Animated GIF--Loop Just Once?
Dec 12, 2012
By
Bob Wiker
I created an animated GIF in Adobe Fireworks. It's a gauge with a needle that moves from the 6 o'clock position to the 12 o'clock position, using 16 frames ('states' in Fireworks parlance). I set the animation to run just ONCE; the needle rotates from 6 o'clock and stops at 12 o'clock. I tested the animated GIF in my Web browser and it works as expected.
When I insert the animated GIF onto a Storyline slide, however, the animation loops forever. It loops in Preview mode and also when I publish to Web (HTML) output.
Does Storyline recognize and respect the 'looping' setting contained within an animated GIF file?
81 Replies
Hi Bob. Welcome to E-Learning Heroes!
I'm not an Adobe expert, but I would think you would be able to edit the "looping" option for the gif image in the original software (Fireworks). Articulate wouldn't control looping of the image, to my knowledge.
I played around with this a little bit and came up with a workaround for you, hopefully it'll help.
If you'd like to see the example I created, you can see the published version here. I've also attached the file to this thread, if you'd like to see how I created this. Please keep in mind it's a very simple example, nothing fancy
I took a screenshot of the image in the position that I considered "finished" and put it behind the animated gif at the end of the time specified for the image. So, you could use the same technique and put in an image of the needle at the 12 o'clock mark.
I know this probably isn't the only way to do this and may not even be the best method, but hopefully it will help until you're able to find a better work around.
Good luck with the project!
Christine
Thanks for taking a look at this. Yes, there is a mechanism in Fireworks for setting the number of loops in an animation. This screenshot shows the Fireworks States panel for my 18-state animation; the Looping drop down menu is set for 'No Looping'. With this setting, the animated GIF that I export from Fireworks will play all 18 'states' once and then stop at the last state.
It appears that Storyline is NOT recognizing the looping setting in the animated GIF file. My Web browser runs the animated GIF properly (one cycle of the animation) but Storyline Web output does not (endless cycles of the animation).
The workaround you mocked up does indeed yield the result I'm seeking, though it's a bit of struggle to set the timing just right so that the animation goes off-screen at exactly the right time--not too soon, not so late that it begins to loop again. This is the workaround I tried before asking the question here in the forum. Great minds think alike!
Might be helpful to find out for sure whether Storyline recognizes the looping setting in an animated GIF so that others will know (or as a feature request for the next Storyline update). Either way, I'll live with this workaround on my current project.
Thanks again for researching.
Hi Bob!
I totally agree, I think it would be pretty useful. For now, you might want to submit that feature request you mentioned earlier. We love getting feedback and we take suggestions pretty seriously
Also, just wanted to say that I really like the look of the gauge you created. I bet it looks great in your project!
Thanks, Bob. I hope you have a great day!
Christine
One "trick" that might help is to set the duration of the final frame in the animated GIF to a large number. That way, it is easier to set the duration of the animated GIF in the Storyline timeline to stop/end exactly where and when you want.
Animated GIF frame durations are set in 1/100ths of a second increments. So, you might set it up like this in your animated GIF authoring tool (such as Adobe Fireworks):
frame 1----15/100ths
frame 2----15/100ths
etc.
frame 27----15/100ths
frame 28----500/100ths
In this example, each frame of the animated GIF displays for 15/100ths of a second except for the final frame, which displays for 5 full seconds (500/100=5). Add your animated GIF to the Storyline timeline, then drag its bar to shorten it so that it ends anywhere within the final 5 seconds of the animation (i.e., the final frame of your animated GIF).
This is an excellent workaround, Bob. Thanks for this.
I realise this forum thread is 2 years old, and that feature request you submitted has not yet been addressed.
I will submit a feature request now also, and hopefully the next update to Storyline will be able to recognise the loop setting in an animated GIF. This would save a lot of mucking around.
Thanks Kuriko for submitting the feature request. Generally the updates have dealt with bug fixes or other elements, and the new version of Storyline would deal with feature requests and new elements being added. You can see the listing of all our updates and fixes here, and we're currently on Storyline Ver 1, Update 6 Build 1407.2208.
Hi all - I've just imported an animated GIF into SL2, and it's not recognising the loop setting - i.e. my design colleague set it to only play once, but SL2 is looping it. Any ideas other than the workaround above, which I have in my back pocket if all else fails?
Thanks
Nope. Doesn't appear that Storyline 2 was fixed to recognize/honor the looping setting of animated GIFs. Best bet still seems to be setting the final frame of the GIF animation to a large value (like 5 seconds), then setting Storyline to take the animated GIF off the screen anytime during that final 5-second frame.
Hi Anne,
As Bob mentioned, this is still not an element of Storyline 2 - so you'll want to use the workaround mentioned above.
I am running into this same issue as I have three different gifs that show a building being taken down or rebuilt or demolished and they all seem to start looping during the entire slide rather than when they appear on the timeline.
This is really tricky to get the timings just so on this and I find it very unpleasant that such an expensive piece of software isn't updated for what is clearly a known bug.
Hi Joseph,
This is something we've shared with our QA team, in regards to how Storyline 2 does not respect the frame rate of the original GIF file. I don't have any additional information or updates to share - but once I do I'll be able to post here as I've tagged this thread in connection with the report filed with our team.
Hi Joseph and Ashley,
The workaround above was OK, to a point, but Storyline also continued to considerably slow down the frame rate. Instead, we used an interim solution that ended up being our fix of choice: we turned the GIF into a little MP4. Problem solved!
Don't know if this is an acceptable solution for you, Joseph.
Anne
Thanks Anne for sharing that workaround here and I'm glad you found a solution that'll work for you.
The problem isn't just that the gif won't stop, but also that it won't start when it appears on the timeline.
I have had to create a workaround by creating a one-frame gif timed to come in when the first gif should cycle once, but this is inexact and visually disruptive. Considering I have three gifs in the same slide to show three types of construction (building being redone, building being torn down to a frame and rebuilt and a demolish for parking lot), this really needs to be more precise.
If there was a good tool for converting gifs into mp4s that would be great, but too many of them are filled with spyware or don't do what I need. Any recommendations?
Anne, I hope you don't mind me asking, but what did you use to turn the GIF into an MP4?
If you have an Apple Mac, there's a free and easy (this is an Apple product after all) way to convert animated GIFs or any other animation for that matter (i.e., Flash) into an MPEG4 video clip.
Step One: Launch QuickTime Player, which is part of Mac OS X on every Mac.
Step Two: Choose File > New Screen Recording; a new window appears along with instructions for doing full-screen or partial-screen recording.
Step Three: Drag a rectangle around the animated GIF, then click Start Recording.
Step Four: Click the Stop button in the upper right side of the menu bar when you're done.
Step Five: Save the file. After saving it, you can change the file extension from .mov to .mp4 if you wish. (The file will work just fine; it's an MPEG4 video using the H.264 codec, and will work on Macs, PCs and iPhone/iPad devices.)
Hi Joseph
Sorry not to reply sooner, but I had to ask my colleague in our publishing studio, and then I was out of the office all day yesterday. She tells me she used Adobe Media Encoder CS6. I don't know if you get this as a separate product, or whether it's a part of the Adobe InDesign suite, which we use for all our desktop publishing. The images were originally created in Illustrator.
I ended up using Articulate Replay and it worked very well, thank you.
Thanks for sharing :)
I have reported this issue to tech support. There should be no way that animated GIFs should not work the way they do in HTML5 and it's ridiculous that this problem has not been resolved yet.
Thanks for reaching out Joseph. I see where you have submitted your support ticket (00486197) on this.
I'm sorry for the trouble, Joseph.
Our team is looking into the root cause of the problem, and we'll update this Forum Thread with any developments. We'll also keep your Support Case open and reach out to you there, if and when the problem is resolved.
Thanks for letting us know that this is a priority for you, and have a great weekend!
Do you need any examples or are you good?
Hi Joseph,
If you'd like to share another example, please feel free to send it along to our team here. We can also keep you updated via the case in addition to the forum thread here.
I guess you are a really nice guy. It is not unpleasant, but ridiculous and unacceptable that animated GIF still don't work in Storyline. This bug (and not feature request) is known for more than two years.
I really love Storyline but unfortunately a couple of really annoying bugs are never adressed.