TIP OF THE DAY: Creating nice looking animated gifs using Flash

So today I wanted to pretty up our “loading” animations. We’ve been using the AjaxLoad web app to create candy canes-type loader icons (nice site, btw), but wanted to brand it and stay consistent between our flash and HTML UIs.

I already had the animation in Flash. A simple, 40-frame thingy using parts of our logo. 5 plain colors. I thought exporting it to .gif would be a no-brainer. But of course, as with almost everything related to Flash, it’s not that simple. While the option is available in the export menu, Flash seems to always dither GIF colors. I even tried using only the web palette, all my colors looked dithered. Couldn’t find a way around it.

So here’s the trick I used.

1. Create the animation in Flash
2. Size the stage to the target gif dimensions
3. Position your animation properly on the stage
4. Export your movie as a PNG sequence with the following options:
• Resolution: 72 dpi
• Include: “Full document size”
• Colors: “24 bit with alpha channel”
5. If you created a tween with identical starting and end frames, delete the last PNG file otherwise you’ll see a hiccup at the end of each loop
6. Open Photoshop (I’m using CS4, not sure if the following option exists in earlier versions)
7. Select the first PNG in the sequence
8. Make sure the “Image Sequence” checkbox is selected (I had never noticed it before)
9. Select “Export for Web”
10. Tweak your gif settings (palette, transparency, matte etc…)
11. Save

Voila! Your pretty, nicely optimized gif is ready to go.