Storyline Distorts Large Pictures

Sep 04, 2013

So, I'm trying to insert image-based form content into my project. These forms originate in Excel, where I copy them as pictures (to preserve the layout/data) and paste them into my slide. Some of the forms are quite long, but my solution is to resize the image to 860px width and put it inside an 880px scrolling panel, so the participant can scroll vertically to read the form. So far, it's worked pretty well with minimal distortion of the content.

However, I'm running into a problem with a longer form. When I say long, I'm talking about a form image with original dimensions of 1420px x 4371px. Here's a sample:

I can paste it into my slide, but Storyline sets the picture dimensions to 241px x 740px (the height of the slide). When I place the image inside my scrolling panel and resize it to 860px wide, the result is quite blurry, even though the original is sharp. The problem, it seems, is that Storyline considers the "original" image size to be 666px x 2048px, so I'm technically "upsizing" it (approx. 129%). I'm guessing 2048px the max height Storyline can accommodate.

So the scrolling panel can totally handle the large image, but there doesn't seem to be any way to get the image inside it without first degrading the quality. Here's the result:

For the sake of comparison, here's what a shorter form looks like:

Notice how much clearer and more readable the text appears in the second one? That's because the original imported image is smaller (382px x 1996px, because it's a shorter form with fewer rows), so Storyline is "downsizing" it to 165px x 860px (approx. 43% of it's original size).

I'm hoping someone has a solution, because this is a fairly significant part of my design, and my stakeholders are not going to be pleased with blurry images. Thanks!

10 Replies
Greg Edwards

Ah, but see, you're still coming in with an original under the magic 2048px limit. And your result is still blurry to boot.

To test my hypothesis, I tried creating a 10000px x 10000px PNG image in Fireworks, which I imported into my Storyline slide. Storyline resized it to 740px x 740px (to match my project's height). However, when I looked at the Size and Position dialog, Storyline reports the original size of my imported image to be 2048px x 2048px, which is substantially less than the actual size of my test image. 

Even after dropping it into a scrolling panel, Storyline thinks I'm "upsizing" the image if I try to make it larger than 2048px.

This is probably not a huge issue when you're dealing with a typical image, but when you need to retain crisp detail, such as text or line drawings (and after all, isn't that the point of using a scrolling panel?), these arbitrary max dimensions are a real problem. Any other suggestions?

Greg Edwards

I'm out of time this evening, but tomorrow I'm going to try cutting the image into segments less than 2048px tall, importing them individually, and tiling them into the scrolling panel with careful alignment to see how that looks. I'll update the thread with my results. But good grief, I shouldn't have to go to such lengths to import a simple image! :S

Greg Edwards

Well, I suppose fuzzy is a relative term, but I'm looking for something that looks sharp enough to pass as native document content as opposed to a picture.

Anyway, this morning I did import the full-size original into Fireworks CS6, where I:

  1. Re-sized it to 860px x 2647px (based on the actual width I need it to be in Storyline), I figure Fireworks can do a better job than Storyline of resizing images while maintaining high fidelity
  2. Sliced it into two vertical tiles, the first of which is exactly 860px x 2048px and the second at 860px x 599px
  3. Optimized my slices for PNG32
  4. Exported the slices as XXX_r1_c1.png and XXX_r2_c1.png

Then I returned to Storyline, where I:

  1. Imported the first image, re-sized it back to it's original dimensions (860px x 2048px), and placed it into the scrolling panel
  2. Imported the second image and placed it into the scrolling panel, and adjusted the position to move it below the first image.

Here's a side by side comparison of the yesterday's screen grab to my end result:

So, it's definitely a hack and requires way more work than it should, but at least it works for now. Articulate, if you're listening (and I know you are), can we please get this working better in version 2? Thanks!

Ashley Terwilliger-Pollard

Hi Greg,

Thanks for sharing and we're definitely listening (or reading...whichever).  You mentioned Version 2, have you installed Update 3 that came out in May 2013? You can check that you're using the latest update by going to the "Help" tab within Storyline and then clicking on "About Articulate Storyline."  Additionally, the best way to communicate with our developers is by submitting items you'd like as a Feature request and if you think it's a bug, you can always submit a Support case so our team can test it further. 

Also, you're correct 2048 is the magic number, and I thought I'd point you to this article about image size. 

This discussion is closed. You can start a new discussion or contact Articulate Support.