Animated Flag Tutorial

By D. Thomas Treadwell

By request, here is a tutorial explaining how to use the excellent "Animated Flag" Photoshop action created by mtrusty@bigfoot.com, based on an action by madcowmancastun@yahoo.com. This action is the best I've seen for animated flags. It's not hard to use, but there are a number of steps, and each must be followed to the letter.

This tutorial assumes a basic understanding of computer use and a beginner-to-intermediate Photoshop skill level.

Preparing Your Artwork

You will need to create a flag before you can animate it. Your flag must be a certain size in order to work with the Photoshop action: 412 pixels by 217 pixels. (You may reduce the size later if you wish.)

: Your flag will show up better on many Web pages if you don't use a pure white or pure black for the main field color.

Setting Up the Document

Download the animatedflag.zip file by clicking here: Download Now

Unzip the file, placing all the bump files in a directory called: C:\animflag
The bump files must be in this directory, or else the action won't work.

Place the animatedflag.atn file in C:/Program Files/Adobe/Photoshop 7.0/Presets/Photoshop Actions.
Using Photoshop 6.0 or higher, open the other file that came in the zip file: flaganimation.psd. You should now be looking at this:

So far so good! Now you know why your flag artwork had to be 412 x 217.

Running the Action

Open your flag artwork in Photoshop. For purposes of this tutorial, I'll use Stede Bonnet's flag:

Copy your flag artwork and paste it into the flaganimation.psd document. Be sure it lines up exactly with the guides, like this:

Merge (Cntl-E) your artwork layer with the template layer. You should now have only one layer in your document. It must be named "Flag."

This would be a good time to resave this document with a new name, so you'll have the flaganimation.psd file intact if you want to make another flag. I've resaved my flag as bonnet.psd.

Now for the fun part. Load the animatedflag.atn action in Photoshop. (Click on Actions tab, then the arrow in the top right corner. Select "Load Actions" and navigate to where you put the file--hopefully in C:/Program Files/Adobe/Photoshop 7.0/Presets/Photoshop Actions. When the action is loaded, you should see something like this on your screen:

If you don't see all the steps in the action, click on the little blue triangles to reveal them.

Click once on the step called "Flapping Flag" to highlight it:

Now you're ready to run the action by clicking on the "Play" button at the bottom of the window:

(After the fourth "Stop" step, you will need to hit the Play button again to start the action back up.)

The action will automatically create 13 new layers, using the bump files to simulate a waving flag. You can stop here, or hit Continue to have the action apply lighting effects (which always looks better to me).

Animating Your Flag

Now that we have all the frames we need to create the animation, we can move into Image Ready. Image Ready is built into Photoshop 6.0 and 7.0. If you get an error message when using the action step to launch Image Ready, you can launch it instead by clicking on this button below the tool bar:

This is a good time to stop and consider our file size. At this size, once the flag is animated, the file will be impractically large in size--almost 1.5 meg. Since I know that I will want to reduce the flag to a manageable download time, I usually do that now. The animation and optimization functions we'll do soon will run faster if the file is smaller. (Or you can skip this step and reduce the image size later, if you prefer.)
One way we can reduce the file size is to crop away unneeded area. The bump map causes the flag to rise up and down, but it never exceeds the vertical guides. So we can crop in the sides (JUST the sides--not the top or bottom) like this:

The flag I'm using has even more room on the sides that I can cut. So I'm going to crop in even further, so that I end up with a flag that's 370 pixels wide. (Remember, only crop the sides, not the top or bottom.)

Once the flag is cropped, I can reduce it using Image Size. At 370 pixels wide, the flag will reduce nicely to 150 x 100--a good compromise between image size and download time.

Now that we have our flag re-sized, it's time to create the animation. On the Animation toolbar, click on this button:

Then select "Make Frames from Layers:"

You'll notice the Animation toolbar has now filled up with 13 frames. Leave the loop set at "Forever" and the duration for each frame at 0 secs. You can watch the animation by hitting the play button:

This next step--optimization--is very important to the end result of our animation. Click on the main window's "Optimized" tab. Also make sure the "Optimize" toolbar is visible. You should be able to see both of these windows:

Use the following optimization settings:

You will probably want to experiment with the number of colors and lossy control to find the best setting for your particular flag. I try to keep file size down to 25k or less. To do so, I can reduce the image quality, or remove frames. Here are flags optimized two different ways:

25k--64 colors, 70 lossy
25k--128 colors, 0 lossy, every third frame deleted

Once you're happy with the optimization, click on File, Save Optimized As. Name your file, select "Images Only" and the default settings.

Troubleshooting

What if your flag looks like this?

sample-halo.gif - 79049 Bytes

I've noticed that Image Ready may create a halo around an image if I have viewed the animation as a .jpg instead of a .gif. To fix it, resave it using the settings above. The halo can be stubborn and you may need to keep fiddling with the optimization settings until it goes away. If all else fails, download my optimization setting here: animatedflag-transparency-no-halo.irs Place the file in your Photoshop 7.0/Presets/Optimized Settings folder, relaunch Photoshop, and look for it in ImageReady's Optimize dropdown menu.

That's about all I know about flag-making. Enjoy!

D. Thomas Treadwell