Problem with Storyline automatically re-sizing images

Hi,

When I insert an image, Storyline seems to re-size it if the length is longer than the length of the slide. It shrinks it proportionately so that the length is equal to the length of the slide.  When I insert a long image for the purpose of putting in a scrolling panel, I need to manually stretch it out so it goes back to full size. And when I do this it gets blurry.

Is there a way to insert or paste an image without SL messing with the size? Or, a way to put it back to it's original size without losing resolution?

I contacted support and they told me to insert instead of paste, but this did not make any difference.

Thanks

24 Replies
David Anderson

Hi Ben - 

When you insert images larger than your slide size, Storyline will auto-size the images to the max height or width of your slide. That's by design. The good news is your image's original size is maintained.

You can scale your image w/o loss of quality, or you can resize the image to its 100% values.

To resize your image to100%,

  1. right click the image
  2. size and position
  3. scale height and width to 100% (make sure Lock aspect ratio is selected)

Ben Kanspedos

Hi David,

Thanks for your quick reply. I am still having some trouble though. Your instructions work if the image is not very long, but for longer images, I can't get it to true 100% without it getting blurry.

I have made a video demonstrating what is happening: http://screencast.com/t/PNj094U3

Thanks!

Lisa Whalen

I am having the same problem.  I need to have a PDF in a scrolling panel.  Storyline does not let you import documents so I read in another post to convert the PDF to images.

Unfortunately, adding multiple images in a scrolling panel severely slows down the program, quite frustrating.  So, I used Photoshop to combine the PNG's to one file.  Looks perfect in Photoshop and viewer.  When importing to Storyline, comes out tiny and scaling to 100% does not come close to the original width. 

So, I tried to go back to insert the individual PNG's, even with scaling...huge loss of quality.

I cannot simply link to the PDF because the Articulate Viewer app does not open Jump to File triggers and there is no Resources tab for the Viewer either.

I would like to use the Mobile Safari browser with the HTML5, but that does not automatically play the audio, which means I would need to have the user click a play button on every slide (not a good option for our users), which also means the timing for the audio to animations would be off (unless there is a way to synch it - will be looking into that as well).

I need to build this module to be accessible via the iPad and just spent a great deal of money on this software.  Where I love what it can do from a design aspect, I am getting quite frustrated with the publishing/output complications.

Any assistance would be greatly appreciated.

Ben Kanspedos

Normal 0 false false false oNotPromoteQF /> EN-US X-NONE X-NONE ontGrowAutofit />

Here's a comment from one of the senior engineers in response to my ticket:

"The largest story size allowable is 2047 x 2047 (Design> Story Size). Changing the image size to 100% only scales the image up tothis maximum size (technically 2048 pixels for the longest side). Since yourimage is actually much larger than this, scaling the image to its actual size(4975 px high), simply causes it to be blurry.

Since you want to retain the image's original size inStoryline, you can use a Web Object, which will have a scroll bar like thescrolling panel you wanted to create. You'll need to host your image online, soyou can use it as a Web Object."

Lisa Whalen

Ben Kanspedos said:

Normal 0 false false false oNotPromoteQF /> EN-US X-NONE X-NONE ontGrowAutofit />

Here's a comment from one of the senior engineers in response to my ticket:

 

"The largest story size allowable is 2047 x 2047 (Design> Story Size). Changing the image size to 100% only scales the image up tothis maximum size (technically 2048 pixels for the longest side). Since yourimage is actually much larger than this, scaling the image to its actual size(4975 px high), simply causes it to be blurry.

 

Since you want to retain the image's original size inStoryline, you can use a Web Object, which will have a scroll bar like thescrolling panel you wanted to create. You'll need to host your image online, soyou can use it as a Web Object."


My individual page PNG's were only 850 x 1100 which is well within the above mentioned parameters.

Due to company policy, I cannot upload my project.  I also cannot use a web object because I don't have any approved web space to store my content.

Lisa Whalen

David Anderson said:

Hi Lisa,

Can you see if this tutorial helps:

 Yes, I saw that and another, tried that as well.  The problem is that when I set at 100% it doesn't really go to the full 100% and it seriously reduces the quality making the image blurry....unlike the easy conversion in the tutorial you mentioned.

But thank you for posting!

I love how quickly people are there to help in these forums!

Seb LTG

I'm currently evaluating SL and I currently use PowerPoint (which recently came out with Office Mix for quizzes). Also, I use Techsmith's Snagit screen capture tool religiously.

I can understand the reason for the current image paste behavior in SL (saves a little time resizing a large image so that it fits inside the canvas), but the tradeoff of not getting a correctly sized, and sharp pasted image (just how it should look at 100% zoom view) - is IMO not worth it by a mile. Yes I can go in and jump through all the hoops to get its size right, but then there's that size limitation for larger images, which causes resampling.

If you try PowerPoint, you'll see that it handles this beautifully. You can go to a web page, right-click and copy image, and paste it in, and it's the correct size and resolution. Same thing with screen captures, and any image in the clipboard.

I will submit a feature request to have a "Don't resample clipboard images when pasting" option, in hope that the folks at Articulate are listening. This could be a deal breaker for me because I paste images from the clipboard all the time when building my projects in PowerPoint.

But I'm hopeful... SL has definite advantages over Powerpoint. For the price, it better! :-)

Ashley Terwilliger

Hi Seb,

This thread is a bit older - but I promise we're always listening. Sending in a feature request is the best way to communicate your thoughts/needs to our product development team so thanks for sending that along. In the meantime, if you  have images that are scaling incorrectly you may want to look at this article for tips on how to return them to their original size. 

Lisa van der Westhuizen

Thank you David and Peter.  I would like to submit the request as SL360 is responsive, thus I automatically assumed that inserting images far longer than the slide height should not be a problem, after all in HTML and CSS you just need to specify the width of an image to scale it according which ever display ratio a device has.  Nonetheless, I did manage to create a work around: I had converted each page in the PDF file to an image file in PS.  The scrolling panel is created first so that I have a width that I can work with.  Each separate image file was inserted into sequence on the slide and scaled to the right size, then aligned and grouped into one very tall image.  This grouped object is then dragged into the scrolling panel.  It worked a charm. No blurring or rasterisation.  However I would recommend that the PDF files to be converted to images in PS as you have better control over file size and quality, otherwise the scrolling panel will become sluggish.  Attached is a Storyline file that you can take apart to see what I did.

Crystal Horn

Thanks, Lisa, for sharing your work here, and especially for including a sample .story file!  I really like your workaround.

I also wanted to link to our FAQs on the new Responsive Player in Articulate 360 to clarify how that works in Storyline 360.  The responsive player is used for Storyline 360 and Studio 360 HTML5 courses on tablets and smartphones. The player itself adapts to the learner's screen size and orientation, but the content maintains its aspect ratio.

Stephanie Brown

Is there any way to turn off the auto stretch to fit feature? When I input an image into a template it auto stretches which takes an additional bunch of steps to re-size/crop when I'd rather it just input it full size so I can crop it to the template.  If we have to follow media standards for our courseware development it's a lot of work to try and resize this thing and make it work. 

Leslie McKerchie

Hi Stephanie!

I'd love to take a closer look at this for you. 

Would you be able to share:

  1. your original image
  2. the steps to replicate (even the .story file that you added the image to originally would be helpful as well)

You can attach directly to the forum thread here or if you cannot share in the forums, you can share here privately.

Stephanie Brown

Hi, thank you. 

Unfortunately the content I am working on can't be shared publicly. 

This happens any time I try to insert a photo from the content library into an already existing template. (any image)

In the screen shot I attached, I am trying to insert a generic image from the storyline content library into a template that has the image across the top. It auto stretches the image to "fit" but this distorts the image. It takes quite a few steps to unstretch the image and then crop it to fit. 

So I am wondering if it's possible to turn that auto feature off 

thanks!

Leslie McKerchie

Gotcha! I think I'm following along now Stephanie. Sounds like it's more of an issue with the aspect ratio.

So, how are you adding in the photo?

  • Insert > Photos
    • Scaling to fit your .story file, but will stretch unless you lock dimensions

or

  • Right click > Change Picture > Content Library Photos
    • Auto-scales to fit previous dimensions