I'm using a .png as a slider thumb. When the story is published, the thumb version of the picture is blurry. When the same image is inserted as a picture (at the same size), it's fine. Anyone know a way to fix blurry slider thumb pictures? Screen snapshot attached showing the thumb slider version of the picture and the same image inserted as a picture.

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 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.

Hi Rob, Looks like JPEG compression to me. Maybe you can push Picture Quality slider to the max when you publish and check if it makes a difference.

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)

Slider thumb pictures blurry | Articulate

28 Replies

RobPannoni
Community Member
8 years ago
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.
LeslieMcKerchie
Staff
8 years ago
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.
RickyRatcliff-1
Community Member
5 years ago
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?
PierreJouan
Community Member
5 years ago
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...
LeslieMcKerchie
Staff
5 years ago
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.
MeaganAdams
Community Member
5 years ago
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.
EmilyRicco
Community Member
5 years ago
I'm having the same issue occur.
NeilLundin-fcb5
Community Member
5 years ago
I have the same problem here. Any updates?
RickyRatcliff-1
Community Member
5 years ago
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.
RenaMaguire-3b5
Community Member
5 years ago
I also am having this issue. It would be so nice if it worked properly!