Slider thumb pictures blurry

Thanks for the suggestion. I tried that, but it didn't make a difference.

Since the picture works fine when not used as a slider thumb, I'm fairly certain this is a bug. Storyline seems to be resizing the picture down to the default thumb size and then enlarging it again from the tiny version. This prevents using large thumbs, which greatly cripples the usefulness of the feature. 

I'm hoping that someone has found a workaround.  For instance, is there an alternative way (other than a slider) to constrain the path of a user-dragged object ?

I do get a slight difference when publishing, expecially with Flash (less artefacts in red disk). See attached file.

You're right about the difference between pic and cursor : in the HTML 5 folder, you can see cursor is published as JPEG while picture remains as a crisp PNG.

(cursor on the left)

Hi Rob,

I'd love to take a look at this. Can you share the original image you're inserting and a copy of your .story file with me? If you need to send privately you can share directly with our Support Engineers here. 

I created a generic story for this. I'm exporting as HTML5 using Chrome on Windows.

The first image is what the thumb looks like at the default height of the slider.

The second image shows the slider height and thumb enlarged to the actual pixel size of the image.

The third image is inserted as a picture at 100% size. This version looks fine. 

Thanks Rob for sharing that example. I see what you're describing when previewing (as that shows the HTML5 output) and once I published and uploaded a copy to Tempshare here. 

It appears in the HTML5 output in Chrome and Edge, although the Flash output doesn't cause the same blurriness. We've seen some blurriness appear in Chrome HTML5 based on how Chrome is rendering it - but since it's also visible in a few other set ups, I'm going to share this with my team as a possible software bug. 

From here, I’ll meet with my team to take a closer look so we can determine next steps. Sometimes my team catches errors in my logic and we don’t have a bug after all. Of course, if that’s the case, I’ll let you know! 

Depending on priority and risk, some bugs can be fixed quickly, while others take longer to resolve. Here's more information on how we identify and tackle bugs.

I’ll let you know as soon as we have an update on this issue. 

Thanks for taking a look at this. The results are the same in Firefox. So I don't think it's related to a specific browser. However, it does seem to be a bit worse when viewed after publishing as opposed to previewing. Or maybe it's just my imagination from staring at it too long. 

Hi Rob,

It looked about the same publish vs. preview - but I only saw it in the HTML5 output (which explains why it appeared that way in preview too). 

In the meantime, can you look at using the Flash output? 

We support Apple devices. So Flash doesn't work for us.

Understandable, Rob, and I'm really sorry this is something you're running into.

You'll be notified as soon as we have any news on this bug. Thanks again for letting us know about this.

Is there anything new about this bug? I tested the latest Storyline version but still see the ugly images. 

Has anyone found a workaround for this problem?

I never found a workaround and I haven't been notified that the bug has been fixed. So I assume it hasn't. I ended up redesigning the UI so I didn't need a custom thumbnail. The problem only appears in HTML5 output. If you can use Flash, you're okay.

Hi Margit - No update at this time. I wanted to share some information on how we define bugs and how we tackle them when they occur.

This thread is attached to the report so we can update you when we can. Thank you for chiming in to share your experience and sorry that you've run into this and that it is slowing you down.

Hi everyone, 

I'm running into the same issue. I've created a custom image to be used as a thumb fill image for a slider and when I export for HTML5 the image is completely pixelated. To the point that you can barely make out what it is. 

It seems to work fine when using EDGE and Safari, but in Chrome for Mac the image is completely distorted. The issue is that our company employees primarily use Chrome browser on Mac. I've tried resizing my image at least 30 times with no success. I've also tried every output option available. All of my other images are crystal clear in the same browser which leads me to believe this is a bug with how the images are compressed when used with the slider feature. Has there been any recent updates to this?

The issue is still there (I took my old test file, with a new test image and published it again).

For some reason, the cursor image is saved as an upscaled JPEG at 315x315 while original image is crisp 200x200 PNG.

Flash output is still better...

Hi Ricky,

Thanks for contacting us and sharing what you are experiencing as well. I see that you are currently working directly with Gerald on our support team.

Hi Pierre,

You are correct. We are still tracking and investigating this issue.

I wanted to share some information on how we define bugs and how we tackle them when they occur.

I also have experienced this issue in numerous course developments. Since flash is no longer supported, and HTML5 is the only option for most of us, it would be nice to see a fix here. Especially since this issue is now going on 3 years old.

I'm having the same issue occur. 

I have the same problem here. Any updates?

Hi Neil - nothing yet on a software fix; however, I was able to use a work around that required me to hit the max size in width which is 2047px. My final graphic size was 2047px W and 1400px H. This is not ideal because the framing of my project looks a bit off; however, this is what worked for me. Pictures are not completely crisp, but look a lot better. I'm definitely less embarrassed to present the work now. 

I also am having this issue. It would be so nice if it worked properly!

I just wanted to share what worked for me. I noticed that the slider thumb (with custom png graphic) looks sharp when the mouse hovers over it. If this is the case for you, then try duplicating the hover state, and name it Selected (or any of the SL built-in states). Then add a trigger to change the state of the slider to Selected when the timeline starts.

Correction: I realize that you actually need to create a Visited state, NOT Selected state. It doesn't really work with a Selected state, because every time the user interacts with the slider, the thumb graphic toggles back and forth between the Selected (sharp) state and the Normal (blurry) state. With the Visited state, the image stays sharp.

Wow thanks! I'll be testing that out as soon as I can.

Jen P,

I have tried your solution and it worked! thank you!

Any fix on this yet?  It's been four years people !!!