Forum Discussion
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...
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:
- Browse setting prevents caching (I use this during testing, just to ensure I am seeing the latest files)
- Server setting prevents images from caching (would be very unusual)
- 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)
