Simple JavaScript code for SL2 to display an animated gif?

Sep 17, 2015

Hi,

Can anyone provide the basic JavaScript code lines to display an existing 'Animated GIF' in SL2, including the control to play it ONCE then stop on the final frame and to control the speed of playback?

(SL2 continuously loops the animated GIF if I simply insert it as a 'Picture'.)

Many thanks for your help, Tim

18 Replies
Darren Heath

Rather than having another image on the stage you could have another state on the gif that is a static image of the last frame then change the state of the gif to that one.

Ive had the same issue with gifs not doing as they're told, and in HTML5 my gifs just do not appear at all (not sure if this is a known issue or just something with my files)

Ashley Terwilliger-Pollard

Hi all,

I know animated gifs have been an issue we reported to our QA team in that the frame rate is not respected upon publish as it's published as an SWF file. I don't have any additional information to share at this point, but will include this thread in the report that we have open with our team so that I can share additional information with you once available. 

Tim Neill

Thank you all for your suggestions. Changing the state of the animated gif at a cue point does then display my 'last frame' png image, but the animated gif (the 'normal' state) also keeps on looping, even if I pause the timeline at the same cue point. 

SL is completely ignoring the ('play once and stop') setting I made when I created this animated gif in Adobe 'ImageReady'. 

SL needs fixing.

But to go back to my initial posted question: 'Can anyone provide the basic JavaScript code lines to display an existing 'Animated GIF' in SL2'?  

As you will have gathered, I am not a JavaScript programmer but there must be a simple way to do this?

If I called it as web object, how exactly would I do this? 

Darren Heath

Sorry Tim I dont have a JS for your solution. I have uploaded a demo .story file with my gif to illustrate how mine work.

The normal state is my animated gif. Jump, Stopping and Stopped are static png files

In the story file, normal state runs until it reaches cue point 1 at 5 seconds then I have a trigger that changes state to Stopping.

At cue point 2 state changes once more to Stopped

Timeline stops at cue point 3.

Tim, can you upload your GIF and I'll have a look to see how yours differs to mine

 

Phil Mayor

Sorry Tim, There is no javascript solution.  If you want to embed as a web object add it to simple web page with your gif embedded saved to your desktop  (or anywhere on your machine) as index.html. Then insert a web object, navigate to your webobject and insert, all the necessary files will be attached to the project when you publish.

Tim Neill

Thanks Darren. I downloaded the test.story and can see what you're doing. It works well and your 'Normal' state animated gif stops playing and disappears at cue point no.1.

Here's my very crude animated gif test file, generated from a png in ImageReady. If I open this file in a browser, it plays once and stops on the last frame, as it should. 

I suppose the most likely problem is in my animated gif.

Phil Mayor

Glad you got it sorted Tim, I think just be aware (instead of beware) of the way states were intended to work, I think selected and Disabled are the two states that do not work in an advice fashion from normal, and custom states do not at all.

Add this additive 'feature' can be very useful at times or a pain in the...

Depends on what you are trying to achieve.

This discussion is closed. You can start a new discussion or contact Articulate Support.