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.
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.
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
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.
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.
Thanks Thad for sharing that here, although Hide and David's original issues seemed to be connected to the publish settings, but it may help someone else who comes across this issue.
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:
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.
That specific .gif file is not being published at all - in the parent folder or the sub-folders. Two other .gif files do get published (icon_loading.gif and wait.gif), but those are part of the standard publish and are not files specific to my project.
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!
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.
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???
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.
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!
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.
I just submitted a case to support. There appears to be a bug in Storyline 360. Slide with animated GIF keeps crashing when trying to publish. See attachment.
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!
21 Replies
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.
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!
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
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!
I actually experienced the exact same thing as Hide. Sure enough, changing the quality settings fixed it and it appears in the published content now.
Thanks David for sharing your experience here, and welcome to the Heroes community!
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.
Thanks Thad for sharing that here, although Hide and David's original issues seemed to be connected to the publish settings, but it may help someone else who comes across this issue.
Also, welcome to the Heroes community!
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!
That specific .gif file is not being published at all - in the parent folder or the sub-folders. Two other .gif files do get published (icon_loading.gif and wait.gif), but those are part of the standard publish and are not files specific to my project.
I'm glad to help with this issue.
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!
Luckily I found this thread.
Did a little more experimentation - simply setting the image quality to 100% does the trick.
Video doesn't have to be adjusted.
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.
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???
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.
My experience is that animated gifs do not work in states for objects when output to html5.
The image src is "mobile/undefined" in the html for the image. Height and width are "NaN", meaning "not a number."
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!
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.
Hi. I just experienced an issue with animated gif playback of Thad's file he posted. http://web.ics.purdue.edu/~tblossom/test4/story_html5.html
Animated gif displays in Internet Explorer 11. Doesn't show up in Google Chrome Version 68.0.3440.106 (Official Build) (64-bit)
I just submitted a case to support. There appears to be a bug in Storyline 360. Slide with animated GIF keeps crashing when trying to publish. See attachment.
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.