Forum Discussion
Animated GIF issues in HTML5 output
I'm running into a few animated GIF issues with HTML5 output (testing in Chrome/Firefox).
1. I have an animated GIF that is 41Kb and 538 by 379. When I put it in as-is in Storyline and publish, the HTML5 version does not show me the animated GIF, instead showing me a blank image box. I've done some testing and if I scale the GIF down to maybe 50% height/width in Storyline and republish, then it works. Of note is that my quality settings are at 100% for images. If I leave the GIF at 100% and change the quality setting to 99%, the HTML5 version does show the GIF. Is there a reason animated GIFs are not working correctly with the highest possible output quality setting?
2. I've tried putting in animated GIFs that are not repeating. They work fine in the Flash output, but in HTML5, the animation repeats indefinitely. When I view the GIF in a browser, it only plays once as it should. Is there anything that can be done about this?
3. This is minor, but animated GIFs are slightly distorting colors and putting a couple pixels of magenta at the bottom right of the GIF after being published in Storyline. This doesn't seem to happen with every GIF but ones that have a bit more complexity to them. Any way around this?
Thanks!
Keith
43 Replies
Thanks, Alyssa. Our team has no time for Art360 bugs, just go around it. In this case, not use an animated GIF :-D Digital designers thought that the gif would die, but the trend in memes brought them back again to haunt non-compliant web technologies everywhere.
Have a nice day.
Thanks for including a sample file, Melissa. I'm seeing the same thing in the HTML5 output and in Storyline Preview, but the gifs look correct in Flash.
Aside from using the Flash output, have you tried resizing the gifs before inserting them into Storyline?
Hello,
Thanks for your answer. I guess resizing the gif before importing it would
be the best solution. Unfortunately it would mean à great amount of time
lost . Thanks for your help anyway!Melissa Suarez del Real Adalid
E.learning Developer
I have the same issue as Melissa, if I resize a .gif it gets a pink border all around it. Here is a free gif resizer: https://ezgif.com/ . This is the best solution I could find at the moment. But it is inconvient that we can't resize in the program.
Since Flash is not recommended, what other options are there for adding in objects that need to be animated beyond rotation and translation? That need frame by frame.
Thanks, Melissa, and I completely understand. I've logged this as a software bug so our team can begin looking at next steps. As soon as I get more information on this, I'll post an update here!
Great, thanks !
Melissa Suarez del Real Adalid
E.learning Developer
I'm also seeing the magenta pixel that is being added to the lower right corner of the animated gif in published Storyline 360 HTML5 playback. Doesn't appear in Flash. I also attached the .story file. Is there an ETA for a fix for this as client can only use HTML5.
Hi Daniel,
Thanks for sharing the file and a screenshot of your image. Our team is looking into this, but it does appear to be limited to transparent GIFs when viewed in the HTML5 output.
I don't have an ETA to share yet, but we'll keep you posted here.
Bumping this thread since I'm experiencing the same issue in Storyline 360 (latest update as of this post). Has there been a solution or workaround that anyone can share?
Hi Lawrence. The image quality of the transparent GIFs isn't that great, but I found a work-around. You can put a little square in the lower-right corner of the GIF in the Storyline file and fill it with the color you need to hide the magenta pixels.
I personally decided that using GIFs isn't an option at this point for the project I had to provide an estimate on.
Articulate, please give us some animation shape tweening tools in Storyline like Flash/Animate has.I haven't experimented with using Web Objects in Storyline 360 yet, though that might be an option for you. https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-add-web-objects
The only thing is, from what I recall web objects need to be hosted on a server to view in the Storyline file and can't be tested locally. Correct me if I'm wrong.Thanks Daniel. I guess I should have been more specific. The entire GIF has magenta on every single border. The issue doesn't appear if I do not resize or crop the GIF. We're having to send assets back to our Creative Department to resize and crop transparent canvas space as a result, so there's added admin time that no one appreciates :)
