Flex/Flash/Actionscript

AnimatedGifLoader – New Flex Component

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/

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.

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.

Examples

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

This movie requires Flash Player 9.

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

  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:

  • 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…
    Tags: flex, component, will, i'm, it's
  • 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…
    Tags: animated, component, gifs, flex, load, gif, will, animatedgifloader
  • 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.…
    Tags: component, gif, animated, flex, load, gifs
Standard

17 thoughts on “AnimatedGifLoader – New Flex Component

  1. Hey,

    I am getting

    “TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.dougmccune.controls::AnimatedGifLoader/::nextFrame()
    at com.dougmccune.controls::AnimatedGifLoader/::advanceFrame()
    at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
    at flash.utils::Timer/flash.utils:Timer::tick()”

    When clicking on the top ‘Play’ button.

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

    Do use a favor, just say I wish I could walk into the grocery store with a smile and they give me free food. πŸ™‚

    You are a component developer, if someone needs an animated gif laoder, 50$ isn’t anything to have an animated gif loader!

    Commercial flex components will flourish by fall of this year so keep releasing them!

    Peace, Mike

  2. Mike,
    Thanks for the input, I’ve updated the component and the example on the main page. That error should now be eliminated.

    Thanks for your help,
    Doug

  3. jkirby says:

    Does this loader have a reloader capability? In otherwords, I use the loader to load an animated gif file from an external site. The gif file (animated weather radar) is updated periodically. I want to be able to “refresh” the currently loaded gif. Is this possible?

  4. You can think of it just like the SWFLoader component in the Flex Framework. So there is a load() method that allows you to pass the URL. If you call load() it will reload the GIF. As long as the browser doesn’t return a cached version (which you could ensure by adding a random query strnig onto the end of the request) then the fresh GIF will be reloaded each time.

    But why don’t you just download the DemoAnimatedGifLoader SWC file and try it out?

  5. jkirby says:

    Yup… looks good. I forgot about adding a random string to ensure a fresh version. If everything looks after testing this… the check is in the mail πŸ™‚

  6. sboys says:

    Is it possible to use the ProgressBar component with this AnimatedGifLoader? I have tried the following but it doesn’t appear to work.

  7. edward says:

    bought your component and hoping to test it out in a simple website we’re developing, but it doesn’t work. Even following the readme and the example project, it spits out 3 errors:-

    unable to load SWC AnimatedGifLoader.swc: multiple points
    1017: The definition of base class Locale was not found
    Could not resolve to a component implementation.

    Please help

  8. Doug says:

    I would also be interested in a server-side one that does it on the fly, that would be sweet if I could get my hands on it for whatever you charge for it.

  9. Hi Doug,

    I want to use your component and I don’t mind buying it but when I click on Buy Now I see an error page saying ” There is a problem with this account. Please contact support for more information.
    Please use the form below to notify the seller of this issue.”

  10. ed says:

    I’ve been using the animatedgifloader for some time with flex2. Recently switched to flex3 and the exact same code that use to run in flex2 no longer runs. Is there an updated version of this comonent?

    -ed koch

  11. Pingback: 33 ?????? - Fix AnimatedGif for using in Flex 3 - RIA ??????????, Flex, Action Script, AIR, Eclipse, Monkey script

  12. Pingback: FB3 beta2 : Error: Key outOfRange was not found in resource bundle controls » free icons download

Comments are closed.