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.
- Create the animation in Flash
- Size the stage to the target gif dimensions
- Position your animation properly on the stage
- Export your movie as a PNG sequence with the following options:
- Resolution: 72 dpi
- Include: “Full document size”
- Colors: “24 bit with alpha channel”
- 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
- Open Photoshop (I’m using CS4, not sure if the following option exists in earlier versions)
- Select the first PNG in the sequence
- Make sure the “Image Sequence” checkbox is selected (I had never noticed it before)
- Select “Export for Web”
- Tweak your gif settings (palette, transparency, matte etc…)
- Save
Voila! Your pretty, nicely optimized gif is ready to go.
