Search Flex Samples

How to load animated GIFs using Adobe Flex 2.0

This post is a brief tutorial on how to use the Animated Gif Loader component that I have developed for Adobe Flex. The component is a commercial component available for purchase. You can try the component out before you buy it, however, by downloading the demo version.

Loading a gif from a URL
Using this component is as easy as using the or components that come with the Flex Framework. All you have to do is add a line to your MXML code and specify the source attribute of the component. This tells the component which file (or embedded asset, more on that later) to load.

Here’s an example line of MXML that would get inserted into your Flex app:

<mccune:AnimatedGifLoader source="flag.gif" />

That's all it takes to get a simple animated gif playing in your Flex app. And what's sweet is that the component works exactly like the SWFLoader component, so you get access to every method and property that you would from SWFLoader (such as scaleContent and maintainAspectRatio).

Embedded assets

The component also works with embedded assets in your SWF. See this quickstart article about embedding assets using Flex. Just like you can embed still images into your Flex app and reference the embedded file, you can do the same thing with animated GIFs.

The caveat is that you must specify the mime-type of the asset as “application/octet-stream”. So the tag to load an animated GIF as an embedded asset would be like this:

<mccune:AnimatedGifLoader source="@Embed(source='animated_gif.gif', mimeType='application/octet-stream')" />

or if you're using a <Script> block then you'd do something like this:

<mx:Script> <![CDATA[ [Embed(source="flag.gif", mimeType="application/octet-stream")] private var embedded_image:Class; ]]> </mx:Script> <mccune:AnimatedGifLoader source="{embedded_image}" />

What’s up with the mimeType business? Well, when Flex embeds your images it stores the data in the SWF in a certain way. When you embed a normal jpeg or gif the data is stored as a BitmapAsset. The BitmapAsset class has already done some processing on the image file and converted the file into an image Flex can display. Since we need to read and process the raw data of the gif file itself we can’t use the BitmapAsset. So instead we can specify the mime-type of the embedded asset as “application/octet-stream” which gives us the raw data of the file. Then we can load the animated gif in all it’s glory. If you don’t specify the mime-type then the component will just load the first frame (like the current SWFLoader does). If you specify the wrong mime-type who knows what will happen (actually I do, it just throws an error).

So that’s how you can load an embedded asset and play it as an animated GIF.

Here’s an example that loads two GIF files. One is loaded using the URL of the file (which is present on the server). The other is loaded using an embedded asset (the file isn’t present on the server, it’s embedded in the compiled SWF). View the source.

P.S. Hey Brendan, how about those awesome waving flags?

OK, cool, so loading animated GIFs is easy. Read more about the Animated Gif Loader component at my previous post: AnimatedGifLoader - New Flex Component (or just scroll down if you’re on the same page).


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples