Search Flex Samples

AnimatedGifLoader - New Flex Component

UPDATE: I have updated this component. For the newest information please see the component page here.

Problem: Flex doesn’t let you play animated GIFs.

Answer: AnimatedGifLoader! A Flex component you can drop straight into your MXML code and use just like the SWFLoader component included in the Flex Framework.

There has been some discussion on flexcoders regarding the inability of Flex to dynamically load animated GIF files. The basic answer is that no, you can’t really load animated GIFs. The more complicated answer is that there are some hacked-together workarounds involving IFrames. The semi-official response from Adobe is to make you convert your animated gifs to SWFs using Flash. Others have mentioned that they use some server-side magic to do the GIF to SWF conversion on the fly.

So since all this seemed far too silly to me, I created a component that lets you load animated GIFs.

This is a commercial component - Cost: $50

The AnimatedGifLoader is for sale for $50. This will get you the compiled SWC file that you can drop into your Flex project. You will also receive any updates to the component if there are bugfixes or added functionality. Read on to learn more about this component.
Make payments with PayPal - Download with PayLoadz

What is the component?

It’s basically an enhanced SWFLoader component. It does everything the normal SWFLoader does, except it also loads animated GIFs. It’s based off the SWFLoader, but since I had to overwirte a bunch of private methods and things I couldn’t simply extend SWFLoader. You get a couple new methods and properties that weren’t included in SWFLoader.

New Methods:

  • play() — Plays the animation if it’s stopped.
  • pause() — Pauses the animation on the current frame.

New Properties:

  • autoPlay — A Boolean to indicate whether the animation should start playing immediately. If false, the animation will load and pause on the first frame. Read-write.
  • playing — A read-write Boolean that tells you if the animation is playing. If you set this via Actionscript it will either play or pause the movie. Bindable.
  • currentFrame — A read-only Number that tells you what frame the animation is on. Bindable.
  • delay — An optional Number to allow you to specify the delay in milliseconds between frames. If left unset this will use the delays between each frame that are specified within the GIF file

Other than that it’s just like SWFLoader. You specify the source attribute and it loads the GIF. You can use it inline in MXML or with Actionscript.


Here’s an example of loading an animated GIF using the AnimatedGifLoader component, compared with the normal SWFLoader component. You can see that the AnimatedGifLoader actually plays the animation and gives you some control over the playback. The SWFLoader on the right loads the same file, but it only displays the first frame. You can view the source of this example (doesn’t show you the source of the component, just the source of the example and how to use the component).

So that’s that. I’m infusing web 2.0 with some old school love. Bring those annoying GIF animations back into style!

Make payments with PayPal - Download with PayLoadz

Argh! Why isn’t this open source?

I know people are going to ask why I don’t just release the source code of the component and give it away as a benefit to the community. You can pick whichever answer you like from the list below (or make up a different one if it makes you feel better).

  1. I’m a greedy douche.
  2. I’ve been so cultivated by American capitalism that the only way I measure my self-worth is through financial means.
  3. I’m simply curious if people will actually pay for something a kid like me cooks up.

I’d like to think the real answer leans most towards #3, but who knows, maybe it’s closer to #1.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples