Open the image of the flag you want to animate and re-size it if necessary to a smaller working size. I used 576 pixels wide.

Next, create a new blank document with a white background. For a 576 pixel image I used 1700 x 800 pixels.

Now copy your flag image into the new document. I used 8 frames in the final animation, so I copied the flag 8 times.

You should now distribute each of the new flag layers evenly across the width of the blank document as shown in the illustration. Make sure all of the layers aligned on their centres.

Now add a new layer above all of the flag layers. Fill this layer with 50% gray and reduce its opacity enough to see the underlying flags.

You now need to create a displacement map which will be used to distort each of the flag layers. As these layers are all in a slightly different position, each layer gets a slightly different distortion.

Reset the swatches to the default by pressing the letter D.

Select a soft round brush, I used 250px. I've found that the brush size should be about one third the width of the individual flags. Now draw vertical black and white lines across the image as shown in the illustration. You may need to experiment a bit depending on the image you use. The size of the brush strokes determines how the individual flag frames will be distorted. Put the layer transparency back to 100%.

You should now copy this layer to the clipboard, create a new document with exactly the same measurements and then paste the copy into the new document. Save this new document as a PSD file with an appropriate name. I used FlagDisplMap.psd. Close this file.

You can now hide or delete the striped layer from your flag image.

You now use the displacement map you created to distort the flag layers.

Make sure all of the flag layers are visible and make the topmost layer active.

Choose Filter/Distort/Displace and a dialog will open for you to choose some settings. I used the following

Horizontal Scale = 0

Vertical = 20

I left the other settings at the default values. When you press OK, another dialog will open asking you to choose a displacement map. Navigate to where you saved the map you created earlier and press open.

The topmost layer will be displaced with a vertical wave pattern. In turn select each of the other flag layers and press CTRL (CMD) F to repeat the displace filter on each of the other layers. You will and up with images similar to the illustrations on the right.

The next thing to do is to align all of the flag layers on their centres You can now also crop the image to remove some of the excess white background.

For the next step it is essential lock the transparency of each of the flag layers. You do this by making each layer active in turn and clicking on the small “Lock transparent pixels” icon in the layers pallet.

The reason for locking the transparency is to allow us to apply some shadows to each of the flag layers without having to worry about accidentally painting in the transparent areas.

Adding shadows adds a bit of reality to the flags so that parts of the flag appear that they are in partial shade when “Blowing in the wind”.

Make sure only the topmost flag layer is visible and active. Look at the flag and judge where you think the flag would be in shade were the light come from one side or the other. In this tutorial I assumed the light was coming from the left.

Add a new transparent layer above this layer and then CTRL + click on the active flag layer thumbnail in the layers pallet to select the flag. Make sure the new transparent layer is active.

Note: you can draw these shadows directly onto the flag, but you may find it easier to change things a bit if you do them on a separate layer.

Now choose a soft round brush of a size that is proportionate to the size of the area to be shaded. Set the opacity and flow to 75% and draw down over the flag to apply a shadow line. If it looks like there are 2 or more areas where a shadow might fall, draw in a shadow in those areas too. When you finish each layer, and are happy with the result, merge the shadow layer with its flag layer

Repeat this process for each of the flag layers. As all the flag layers were displaced in a slightly different way, the shadows should all be in a slightly different position on each of the flag layers. You should have something the sample on the right.

If you still have a background layer, delete it now. Make sure all of the flag layers are visible, and do a final crop to remove most of the transparent area around the flags.

That's the basic image created and sufficient frames created to begin making the animation.

I used Photoshop CS2 for this tutorial so did not need to use Imageready but the principles of what I show here will be more or less the same for imageready.

Open the animation pallet and add a new frame for each of the flag layers, that would be 7 additional frames for this tutorial.

Select frame 1 and then in the layers pallet, make sure only the first flag layer is visible.

Select frame 2 and make sure only flag layer 2 is visible.

Repeat this for each of the flag frame, making sure that only the corresponding flag layer is visible for each animation frame.

Next set the frame delay for all of the frames to 0.15 seconds.

Press the play button to view the animation. As the image is still quite large, the animation may be a little jerky. If you re-size it something smaller, say 150 pixels, it will display better.

Save the master file as a PSD file to preserve the layers, and then use the Save for Web option to save the file as GIF.

That's it, you're done and you should have something similar to what you see here.

I hope you find this useful.

If you have any questions, you can find my email address on my home page