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:

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.

Example
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.

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).