Author Archives: Doug

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

Standard
Uncategorized

Hey! It’s Another Flex Blog!

Yup, another blog about Adobe Flex. I’ll mostly focus on Flex work that I do, experiments, custom component development, yadda yadda. I might throw in some observations about San Francisco here and there.

About me

I’m 24 or 25, depending on when you read this. I live in the Mission District in San Francisco. I work at Stanford University (shout out to all who ride Caltrain). I’ve been working with Flex for a while now, whenever Flex 1.5 was first released. I’ve got a few mid to large size Flex projects under my belt. I like mangos. I’m pretty much the most web 2.0 person I know.

Standard