Animated GIF issues in HTML5 output
Jul 02, 2014
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
Hi Keith,
First, I'm curious what update of Storyline you're using as the red or pinkish hue, is something that we fixed in update 2 detailed here.
In regards to your two other issues, it sounds like they're similar to the issue Justin worked on in this thread and has been reported to our QA team.
Hi Ashley,
We are using Storyline Update 4. Besides that, the issue you listed is different than the one I am encountering. In the issue I'm encountering the background of the GIF retains its transparency just fine, however there is a small box of maybe 1 by 2 pixels in just the bottom right of the GIF that's magenta colored. It looks like it gets put there when storyline publishes it, as this is the image from the published directory (check out the bottom right):
The other thread you listed is interesting, as the issue was resolved by putting image quality at 100%, whereas in my case we have already had it as standard at 100% and are only getting issues with animated GIFs when it's 100%. It's a bit of an issue as we don't want to have to sacrifice image quality of other on-screen images just to get an animated GIF to work.
Hi Keith,
Thanks for the image - and sorry I missed this, as I was off for the holiday weekend.
Are you able to update to the current update 5 of Storyline? I don't see any specific fixes in update 5 related to animated gifs, but it's worth seeing how it would behave there as there in case there was something modified as a part of that update that may play a role.
If you're able to use update 5 and continue to see the odd pink pixel in the bottom corner and the remaining issues with quality, are you able to share your .story file with that gif here so we could take a look at it?
Hi Ashley,
I am using storyline 3 Update 1:3.1.12115.0
I am encountering the same issue with the GIF images when viewing HTML 5 output. GIF images are not displaying in HTML5, however, it's showing correctly in HTML version.
Hey Parashuram!
This thread is a little older- so let's start from scratch with what you're seeing.
Would you mind sharing your .story project file here so I can take a look and do some testing? You can add it as an attachment right to a comment here.
Sorry you're running into this, and thanks for letting us know!
Hello, I'm having the same issue with the magenta pixels on html5. Are there any hints on what could be causing this issue ?
Hi Melissa, thanks for joining the conversation!
Mind if I have a look at your file? Even one slide with a GIF would be helpful. You can attach it to a new thread comment using the Add Attachment button. Thanks!
Hi Melissa,
Could you share more about the "magenta pixels"? Is that the only piece or color of your animated GIF that's not showing correctly? I can't say that we've seen that - but I'd love to take a look at one of your projects and test from there!
If you'd like to sh are with our Support Engineers, they're happy to look too! You can upload a copy of your .story file here.
We are having issues with HTML5 export and GIF in Firefox - the GIF is fine in Chrome. Got anything?
Hey Daniel, thank for joining the discussion. What version of Storyline are you using? What exactly is happening to the GIF in Firefox?
Hello Alyssa, thanks for your reply.
I figured out that the gif files that have this magenta border are the ones that have been downsized (as you will see on the attachment)
If you have any clues on whether or not you can downsize gif files and still have them to look right it will be appreciated.
Best,
M.
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?
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.
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
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 :)
Web Objects might indeed be an option. I believe you're right on the hosted aspect. I'll keep that on the back burner if there are any other issues that arise and compound the situation. Thanks!
Lawrence, I feel your pain RE: extra admin time!