Forum Discussion
Zoom Region Pixelation
Is there a way to zoom an image without the zoomed in view being pixelated? For example, I insert a large high resolution image of an office floor layout showing different offices, desks, chairs for the whole floor of a building. The image itself is much larger than SL stage so it is automatically shrunk to fit (which is OK because I want to see the whole floor layout). I then zoom in on a specific office but SL seems to be using the reduced size of the original PNG so when the zoom happens the image pixelates. The original image has enough image detail to to have the region zoomed to full screen and still be at least 72dpi. I want the zoomed in image to be crystal clear.
Anybody know a way around this?
32 Replies
I'm having the same problem with pixelization of the image upon zooming. Using a .jpg didn't help. I also tried the copying & pasting trick but it didn't make a difference. Are there any other suggestions?
Hi Mary,
You'll want to follow these best practices for using images in Storyline 2. Are you working with a high-quality image that looks clear without the zoom region?
Thank you, Alyssa. Yes, it's over 6MB. I had to shrink it a bit to fit on the stage. When I increase the stage size, the image is still clear but is blurry when using the zoom region. I can try the other 2 best practices when I'm ready to publish.
Great, thank you! Keep me posted on how it turns out.
I just wanted to add that the suggest 'best practice' does not seem to work. The linked articles [SL2 | SL360] suggest either WMF or EMF. I've attached a sample of both, neither seem to maintain anything closely resembling vector.
I turned to this, because the original PNG image was getting artifacting (pixelation); Although, this actually was better than the 'best practices' approach.
Further, the suggestion to use jpg/jpeg because it's better than .png doesn't seem to hold true (well, not anymore -- perhaps it did, 5 years ago).
If Steve's "hack" / workaround ever worked - they've changed something in the underlying code in the past 5 years, because this doesn't work either.
Does anybody have any thoughts / work-around on this issue?
Thanks! :)
The workaround did, indeed, work. It does still work if publishing to Flash. Note that five years back, Flash was the only publish option. HTML5 publish changes image handling. I'm not sure if this behavior is intended. This could be a bug in the HTML5 publish. Image zooms in raster images aren't very helpful if it's not going to reveal more detail.
Have you tried using a layer to render a scaled version of the image? You lose the nice zoom transition but it would display a more useful image.
Thanks for the clarification RE: Flash!
I am targeting mobile devices, and avoiding Flash like the plague (for a host of compatibility and security reasons): Which means I'm limited to HTML5. And that's worked pretty well up until now.
I've been trying to work out how to effectively do what you suggest; from what I've seen, though, you don't get the ability to 'navigate' the zoomed-in image.
I was trying to use the zoom function to highlight a specific point as a VO was playing, and with the intention of learners seeing the 'zoomed in' component in relation to the 'big picture'.
Ignoring the issue with the pixelation / distortion, I'm also battling issues of limited screen space :P so that's another consideration I'm working through :)
I hear ya. IMO, the HTML5 feature should work just like the Flash feature and actually zoom a full size image. I've submitted a bug report. Crossing fingers for all of the SL zoomers.
Having this issue today. Importing a large .png, and when I use Zoom Region, even a little bit, it pixelates and artifacts like crazy. What is the best practice for this? This issue renders the Zoom Region feature useless for me.
I describe to you the following steps that solved for me the zoom region pixelatiom problem:
1. Publish your project
2. Go to the mobile folder
3. The image to be enlarged is 6CtrA02QKTE_DX1444_DY1444_CX1000_CY851
4.Copy the name of the file
5. Paste it in the name of the file of the image with the best resolution
6. The name of the file has changed
7. Copy the image with the changed name and paste it in the mobile folder of the project
8. Replace the image
9. Here is the project after the changes
Thank you Spiro! I will try this the next time I use the zoom feature and will report back my findings!
