Flex/Flash/Actionscript

How to load animated GIFs using Adobe Flex 2.0

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

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:

or if you’re using a
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).

Standard

13 thoughts on “How to load animated GIFs using Adobe Flex 2.0”

  1. Ray Greenwell says:

    What about a plain flash version? I’d like one that extended directly from DisplayObject, like Loader does.

    Also: regarding making the software commercial, I have a proposal for you.
    Rather than make it $50, which is ludicrous, make it free for individuals and $1 for commercial use.
    You’ll get more people using it, you’ll get more people registering it (how can anyone justify ripping you off if it’s only $1?) and you’ll effectively block anyone from developing a free competitor. If it gets popular enough, you could easily make more money with the $1 registration than the $50 registration, but of course that’s assuming you don’t do anything for registration other than cash the check and save the email address, IE there is only one version distributed and you are not offering support or anything.

  2. the component is cool. I am new to the Flex thing.

    the only question i have is the the SWC is a ZIP file and that zip file seems to be lacking the necessary components..

    thanks
    jon

  5. Jay says:

    Hi Doug,

    This looks great. I’m having some trouble getting this to work in Flex though. I’m hitting an error when trying to construct the class in my ActionScript:

    [SWF] Users:jay:dp:voxbot:main:src:flex:workspace:test_flex1:bin-debug:test_flex1.swf – 951,786 bytes after decompression
    Error: Key outOfRange was not found in resource bundle controls
    at mx.resources::ResourceBundle/_getObject()[C:\Work\flex\sdk\frameworks\projects\framework\src\mx\resources\ResourceBundle.as:448]
    at mx.resources::ResourceBundle/getString()[C:\Work\flex\sdk\frameworks\projects\framework\src\mx\resources\ResourceBundle.as:366]
    at com.dougmccune.baseClasses::SWFLoader$/loadResources()[/Users/dougmccune/Documents/eclipse_projects/AnimatedGifLoader/com/dougmccune/baseClasses/SWFLoader.as:304]
    at com.dougmccune.baseClasses::SWFLoader$cinit()
    at global$init()[/Users/dougmccune/Documents/eclipse_projects/AnimatedGifLoader/com/dougmccune/baseClasses/SWFLoader.as:257]
    at global$init()[/Users/dougmccune/Documents/eclipse_projects/AnimatedGifLoader/com/dougmccune/controls/AnimatedGifLoader.as:48]
    at com.snapvine.ui::SmartImage/loadGif()[/Users/jay/dp/voxbot/main/src/flex/workspace/test_flex1/src/com/snapvine/ui/SmartImage.as:41]
    at com.snapvine.ui::Filmstrip/processPhoto()[/Users/jay/dp/voxbot/main/src/flex/workspace/test_flex1/src/com/snapvine/ui/Filmstrip.as:68]
    at com.snapvine.ui::Filmstrip/onCollectionChange()[/Users/jay/dp/voxbot/main/src/flex/workspace/test_flex1/src/com/snapvine/ui/Filmstrip.as:49]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.collections::ListCollectionView/dispatchEvent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:831]
    at mx.collections::ListCollectionView/addItemsToView()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:929]
    at mx.collections::ListCollectionView/listChangeHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1049]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.collections::ArrayList/internalDispatchEvent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ArrayList.as:510]
    at mx.collections::ArrayList/addItemAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ArrayList.as:311]
    at mx.collections::ListCollectionView/addItemAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:501]
    at mx.collections::ListCollectionView/addItem()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:470]
    at test_flex1/addToList()[/Users/jay/dp/voxbot/main/src/flex/workspace/test_flex1/src/test_flex1.mxml:46]
    at test_flex1/___test_flex1_Button1_click()[/Users/jay/dp/voxbot/main/src/flex/workspace/test_flex1/src/test_flex1.mxml:52]

    The code in loadGif looks like this:

    m_gifLoader = new AnimatedGifLoader();
    m_gifLoader.addEventListener(Event.COMPLETE, function(event:Event):void{ onCompleteGifListener(event);});

    It crashes on the new. Am I missing something I need to work with this?

  7. Doug,
    I’m also having the same error as Jay using either MXMLC and Flex while trying to build your example.

    I’m using the demo version (try before I buy 🙂

    Don’t know is it makes a difference but I’m using Flex 3 windows rather that a MAC.

    BTW. I think it’s a bargain @ $50 but I’d be happier if the demo worked for me 🙂

    Daniel

  9. Alen says:

    I’m using FB3 on Windows, and I also wouldn’t mind paying. Provided the thing works of course 🙂

  10. Manohar Dudda says:

    What if the gifs are being loaded from an external url as in from a domain other than the one on which the application is hosted (security/permissions taken care of)? Does it work?

  12. raaj says:

    hey guys…
    Dougs smart…
    but i shud point out..
    im getting the sameerror even after using flex 2
    “key out of bounds or sumthing”
    i certainly would say he isint the son of microsoft…..microsof atleast doesnt promise a working software and then not give the right services..;)
    sorry doug but i guess either you need to give us the source code so that we can correct it
    or you really need to make the thing work if you even want a buck out of our pockets..

  13. Pingback: Animated Gifs in Flex 3 — HTMLCoderHelper.com

Comments are closed.