Animated GIF supported in HTML5 publishing?

Hi there,

I inserted animated GIF in Storyline.

It plays fine in the preview mode, but when published in HTML5, it does not appear at all.

I searched the forum. Some people are reporting other problems relating to GIF, but nobody said

anything about GIF not showing up in the HTML5 published file.  

Some write animated GIFs are supported and some say it's not supported.  What is the official statement on animated GIF support?

Thanks

21 Replies
Ashley Terwilliger

Hi Hide and welcome to Heroes!

As you'll see described here, animated GIFs are supported in Storyline - although it can cause some problems if they are imported from Powerpoint. If you're still having difficulty with your file, please feel free to share it with us here in the forum or if you'd prefer, send it to our team privately. 

Justin Grenier

Good Afternoon, Hide.

Although we are working on some problems related to .gif frame rate and looping, I have been unable to reproduce any specific problems with our HTML5 output.

Here is a .gif file I grabbed for testing, here is a .story project file containing this .gif file, and here is the resulting published HTML5 output.

Could you please share your specific .gif and .story files with us for further testing?  Thanks!

Hide M

Hi there,

Thank you for your replies.

Justin, I took your GIF and placed in a brand new Storyline file (only changed the background color) and placed the GIF, then html5 publish and I encountered the same problem. The GIF is replaced with big broken link "X". 

I downloaded your Storyline file, and html5 published in my environment, and it was still working fine.

So I compared the publish setting and i noticed you had custom publish setting.

Video quality = 9 

Image quality = 100%

I copied these settings to my test file and viola it was published fine and GIF was showing properly.

I did the same test with my own GIFs and it's working now.

Believe or not, it was the output quality setting for videos and/or images.

But I was using the default "optimized for standard delivery".

Is there any mention anywhere about bumping up these settings for proper publishing of animated GIFs?

My issue is resolved,  but I would encourage you guys to recreate this problem by decreasing the

output quality so you guys are aware.

Thank you very much for your help.

H

Justin Grenier

Thanks so much for the thorough troubleshooting, Hide!

I tend to keep my Quality settings at their highest, but to date, there have been no known software defects related to .gif publishing at Standard Quality.  In addition, I was unable to reproduce the behavior you reported at Standard Quality.

Could you please share your specific .gif and .story files with us for further testing?  Thanks!

Thad B.

Hi Justin, I had the same issue. Hopefully this will help with troubleshooting. Attached is a .story file with your .gif file that I used to recreate this problem. HERE is the broken version and HERE is the working version. The only difference is the publish settings were changed to Hide's suggestions. I published using Storyline Update 5. Oddly, I also tried to recreate the problem using your file but was unsuccessful.

Justin Grenier

Thanks for that test, Thad.

When I run a Fiddler trace against your broken version, I see that your web host is returning a 404 Error when story_html5.html attempts to access the .gif file at the following URL:

http://web.ics.purdue.edu/~tblossom/test3/mobile/5s0CqM5agOG_80_DX1000_DY1000_CX500_CY500.gif

...whereas in your working version, the story_html5.html file is successfully accessing the .gif file at the following URL:

http://web.ics.purdue.edu/~tblossom/test4/mobile/5s0CqM5agOG_DX1000_DY1000_CX500_CY500.gif

That file obviously doesn't exist in the broken version, so I'm curious to know:  Are there any .gif files within your published output folder at all?  ...perhaps a .gif file with a different filename, or maybe a .gif file that is placed in a different subfolder?  I'm curious if we seem to be failing to publish the .gif file altogether, or are simply misplacing it or referencing it incorrectly.

Thanks again for your test!

Justin Grenier

Thanks again, Thad.

I was able to reproduce the problem, and I have submitted this behavior to the Articulate Quality Assurance Team for further review.

I cannot offer a time frame for when or if this issue will be resolved, but I will keep this Forum Thread updated with any developments.  Please continue to take advantage of the workaround (Publish with a Custom Image Quality of 100%) if you encounter this issue in the future.  Thanks!

Ashley Terwilliger

Hi all, 

I wanted to share some additional information here regarding the release of Update 8 for Storyline 2. We shared with our team the high priority of the GIF looping issues brought to us by so many users in this thread and others, and it was initially targeted to be included in this update. During the testing phase of an initial fix, one of the examples here where the GIF was to be brought in at approximately 12 seconds opened a bit of a Pandora’s box in terms of alternate scenarios for when, how, and what would happen to the GIF based on triggers, timeline elements and states. As our team continued to deconstruct the complexities of this, we still had a number of really crucial fixes and we felt it was important to get in the hands of customer sooner rather than later. With that in mind we chose to release Update 8 as our team continues to evaluate all the GIF looping scenarios and look towards possible solutions. I’ll continue to share information here as it’s available and feel free to let us know if you have any questions.

Lizzie Wakefield

hi so I am using gifs in button states. so that there is no problem with where/when it should play on the timeline.

i have two projects. 

First: has a state called 'flash' which is called at the end of the time line- this sometimes works and sometimes doesn't - but is ok because it is not showing any broken link when not working.

Second: is a initial design for a project. It has 3 buttons each with a gif in the hover state. - the menu button works fine no problem what ever publish setting I use. The back and next buttons just come up as broken links and can't be used at all in HTML5. As far as I am aware I built all 3 buttons the same.

I have tried upping the publish quality as suggested above, for both video and image, but this has not fixed the problem at all. - not sure what to do - any suggestion??? 

Ashley Terwilliger

Hi Lizzie,

Thanks for reaching out here, although it does sound different than the other issues mentioned in this thread with GIFs. I would like to have our team take a look at one of your sample projects and you can upload them here. 

I did also want to offer a reminder in regards to our supported browsers for HTML5 as detailed here. 

Ashley Terwilliger

Hi George,

I've seen that behavior for HTML5 with an animated gif and once it has a state added to it, an associated trigger no longer working. That's something we've reported to our QA team, but I don't have any updates on that particular issue. A number of other users had shared they were able to get around it by using a layer vs. a state to show a different version of the animated gif. 

I'll be sure this forum discussion gets noted in the report so that they're aware the variety and breadth of users being impacted by this behavior. We'll keep you posted here once we've got a bit more to share! 

George Champlin

I had moved my animated gifs to layers, but hiding and showing layers changes the stacking of images on the slide. When you hide a layer then show it again, it moves to the top.

A better way is to keep them on the main timeline and toggle their Normal/Hidden states. This allows you to hide/show various elements w/o changing their layering.

Katie (Gokhshteyn) Riggio

Really sorry you're seeing that error report when trying to publish, Daniel. I'm happy to lend a hand!

Looks like the issues mentioned in this discussion were experienced after publish. I see my teammate, Mohan, recently sent you instructions on how to fix unexpected crashing in Storyline 360. Let us know if that helped solve the crashing issue!

If you still see the crash report after those steps, would you be able to share your .story file slide with our team, so we can take a closer look? Here's the unique upload link from your case to send it privately