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
Ashley Terwilliger-Pollard

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. 

Keith K.

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.

Ashley Terwilliger-Pollard

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? 

Ali Goulet

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! 

Ashley Terwilliger-Pollard

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. 

Melissa Suarez

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.

Ash W

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.

DANIEL GIMNESS

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.


DANIEL GIMNESS

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.

DANIEL GIMNESS

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.

Xtreme Lashes by Jo Mousselli

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 :)