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
Yes, by default Storyline resizes larger pics to fit the project's size. But you should be able to reset the pic to its original size and then add it to the scrolling panel, like I did in this test (using your image which was 2000*650).
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?
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
The image I used was the one you posted, that's why it's fuzzy. But never mind, I now noticed too that '2048' seems to be a 'magic number'. That's an interesting find, thanks for pointing it out. I agree, while tiling the image would be an option, it's annoying.
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:
Then I returned to Storyline, where I:
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!
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.
Greg, thanks for sharing your solution.
Ashley, thanks for pointing out the article. So the max. image size in Storyline is in fact 2048*2048, I did not know that ... learn something new every day
No problem Michael - I also learn something new each day from community members, and that's all part of the fun!
You're my hero, Greg! I just ran into this issue, where 2 of my 20 scrollable screen captures are fuzgly. Your hack was just what I needed. I agree, though, that when using the scrollable region, the max size should unlimited or much larger.
Glad that this older thread was able to assist you as well Gus :) Thanks for popping in to share.
This discussion is closed. You can start a new discussion or contact Articulate Support.