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.
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.
- play() — Plays the animation if it’s stopped.
- pause() — Pauses the animation on the current frame.
- 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!
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).
- I’m a greedy douche.
- I’ve been so cultivated by American capitalism that the only way I measure my self-worth is through financial means.
- 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.
- This post discusses the features Ted Patrick blogged on Wednesday: the Advanced DataGrid component, Deep Linking, Resource Bundles for localization, and the Flex Component Kit for Flash CS3. Advanced DataGrid (I would've called it SuperDataGrid) This is basically what the community has come to call a "TreeGrid", plus the addition…
- UPDATE: The AnimatedGifLoader component is no longer for sale. There are some open-source alternatives to load animated gifs in Flash/Flex projects. Please see the following links: http://www.bytearray.org/?p=95 http://labs.flexcoders.nl/2007/08/30/another-bytearray-fxc-mixfxcloader/ I've released an update to the AnimatedGifLoader Flex component that lets you load animated gifs in Flex. This update adds much more…
- UPDATE: The AnimatedGifLoader component is no longer for sale. There are some open-source alternatives to load animated gifs in Flash/Flex projects. Please see the following links: http://www.bytearray.org/?p=95 http://labs.flexcoders.nl/2007/08/30/another-bytearray-fxc-mixfxcloader/ This post is a brief tutorial on how to use the Animated Gif Loader component that I have developed for Adobe Flex.…