Forum Discussion

MarkVanDeuse309's avatar
MarkVanDeuse309
Community Member
16 hours ago

PNG images with hover states flickering

A colleague of mine placed some button-like .png images in Storyline 360 as custom navigation and created a built-in hover state for each image using a similar image but with a slightly lighter color so it changes when hovered over. The hover state works smoothly in Storyline and when the story.html file is played from the published SCORM. However, when they upload SCORM to their LMS and play it, the hover state is choppy and both normal & hover states disappear for a moment. As a test, they made the same buttons using shapes rather than .pngs and the hovers worked smoothly in their LMS. The issue is, they've created a large course where this navigation is used on every slide. Is there anything they can do rather than going back and changing every slide? Is there a setting they can change in Storyline or in their LMS (performance settings or rendering options)? Thanks.

storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    14 hours ago

    Hi MarkVanDeuse309 it may be because the file size of the PNG files is large, and so when as user first interacts with the button, it downloads the hover PNG. It would be worth compressing the images as much as possible using a service like TinyPNG

    You should also check the dimensions of the image. I use a rule that the image should not be greater than 2 x the size that it appears in the project. I use 2 x to ensure the image looks good when the project scales up in size. For example, if a button is 200x200, I would ensure that an image that is used as the button design is no larger than 400x400.

    If this continues to happen, every time the button is interacted with (and not the first time), this would suggest the images are not caching in the browser. There are a few reasons this may happen:

    1. Browse setting prevents caching (I use this during testing, just to ensure I am seeing the latest files)
    2. Server setting prevents images from caching (would be very unusual)
    3. Issue with Storyline software

    If after compressing the PNG, the issue still occurs, a good test is to check the Network tab in the browser console (F12 > Network). This will show you how a PNG image is being handled by the server when loaded. You can also filter by Img.

    Check out this video for a demonstration using the Network tab in Chrome (will be similar to FF and Saf)

Related Content