Large Resolution Screenshot Dilemma!

Hi folks, 

My project runs into a dilemma. Help is needed!

I have a project that has large resolution screenshots 1600 x 900 in it.

First of all, I want to keep the screenshots to its original size so that the screenshot quality is good.

To do that, I need to set the canvas size to 1600 x 900 and set the player setting to "lock player to its optimal size".

But, doing this causes another issue - the scroll pane. Because if the resolution is larger than your monitor resolution, SL will add a scroll pane, which is really not something I want to have in my project. (Learners have to scroll up and down in order to see the whole screenshot.)

The only way to get rid of the scroll pane, you have to set the player setting to "scale player to fill browser window" instead of "lock player to is optimal size". But this setting resizes the screenshot image resolution which distorted the image quality. 

I hope I made myself clear. Can someone share a best practice to solve this dilemma.

Much appreciated in advance!

Cheng

7 Replies
Brett Rockwood

Having a higher resolution screen shot than the actual screen size isn't going to make the image quality any better. The screen only has so many pixel to display so an image with more actual pixels can't actually be displayed without dropping pixels. You should also check your Publish quality setting to make sure you aren't compressing it too much might help. You get set it for higher quality images at the expense of file size.

There is a case where having a higher resolution image is useful and that is when you use a zoom region on an image. If you have a screen size of 600x800 with a full screen image of 600x800 and then you try to zoom it it will become pixelated because you are now attempting to fill a 600x800 pixel screen with only part of 600x800 image. To get around this pixelation you can place a higher resolution image off-stage (say a 1200x1600 version of the image). Copy that larger image and paste it on stage, then scale it down to fit then screen (600x800). Now when you zoom the onscreen image it will use the data from the offscreen image to draw the zoom area and be nice and sharp. Kind of an odd thing and not something you'd likely discover on your own but it works really well.

Phil Mayor

I recently did a project that was handed to me with images set at a similar  I reduced the project down and explained to the client that a lot of users would not have screens that size and also that certain parts of the player do not scale well, if you fix the size of the player on smaller sv=creens you will get scroll panels and don't forget the player adds at least 10 pixels.

Brett share a good example of using zoom, although I understand from the developers this should have now been fixed, although if I have to zoom I still do this.

Cheng Li

Phil Mayor said:

I recently did a project that was handed to me with images set at a similar  I reduced the project down and explained to the client that a lot of users would not have screens that size and also that certain parts of the player do not scale well, if you fix the size of the player on smaller sv=creens you will get scroll panels and don't forget the player adds at least 10 pixels.

Brett share a good example of using zoom, although I understand from the developers this should have now been fixed, although if I have to zoom I still do this.


Hi Phil,

Zooming is a good option. But sometimes frequently zooming in different areas on a same picture might resulting in losing the big picture for the learners, which can be true when teaching learners on how to use a software. 

That is why I try to use high quality, large images in my course so that learners do not have to follow the zooming different areas on the same slide.

Cheng Li

I dug into the issue myself and have some interesting findings.

Storyline has two options scaling its player: 

  1. Scale player to fill browser window 
  2. Lock player at optimal size

Option 1 scales the player to fill browser window to whatever the browser's size is. This option sacrifices image quality because of the scaling.

Option 2 does not scale the player but scales browser window. This option displays image at its original dimension so image has the best quality. But because of the browser window scaling, SL has to add a scroll panel in order to see all content.

As you can see, if you want best image quality, you have to add a scroll panel, which is really bothering. If you want to get rid of the scroll panel, you have to sacrifice image quality. It is an either-or situation. 

Hope Storyline can offer more player options in the next release.

Ashley Terwilliger

Hi Cheng,

Thanks for sharing the update here and if you'd like to see new elements in future updates or versions, please share your thoughts with our development team. You may wan to reference this scenario, as offering a lot of detail about what you'd like to see and why will help our team determine how/if to include it in a new update.