Loading and displaying animated gifs

Hi, I was thinking about loading an animated gif file to display on a html5 application. I know that using the BitmapData loading methods only the first frame will be available. Is there some library or workaround to do this?

As you already realized it ain’t supported out of the box as also the original flash
API didn’t have support for animated GIFs.
No problem though, there’s a library which will take care of it: haxe-gif

It’s a little bit old but still works - you have to do some modifications though.

After installation using:

haxelib install haxe-gif 0.3.3

open AnimatedGif.hx, go to the function timerTick(_) and replace

If you don’t do this change you won’t ever seee more than the first frame of an animated gif as the internal timer just gets called once.

Create a new OpenFl project, put a gif into the default assets/img folder and open project xml.
Here you’ll find this line:
<assets path="assets/img" rename="img" />
replace it by:
<assets path="assets/img" rename="img" include="*.gif" type="binary" />

This will be important in a bit!

Now take a look at the sample code at https://github.com/SempaiGames/haxe-gif
You can almost re-use the whole code EXCEPT for one line:
var bytes:Bytes=Bytes.ofString(Assets.getText("images/anim1.gif"));
needs to be replaced by:
var bytes:Bytes=Bytes.ofData(Assets.getBytes("img/anim1.gif"));

The .gif file extension is internally ‘marked’ as being of type image thus Assets.getBytes()
would return a BitmapData. By including .gif files as binary in project.xml we can get the
actual binary data we need for the AnimatedGif class.


Thank you a lot! It worked just fine!

No problem chokito! Glad I could help! :smiley:

1 Like