Perspective Cloud Animation using Photoshop 7 and Flash MX

Start with a 400x100 pixel cloud picture. Either a photo or a cloud filter.


Photoshop:
Select contrasting foreground/background colors. I used White and a dark blue.
Filter.. Render.. Clouds

Make a Seamless Vertical Tile

Shift the image vertically by half it's height (50 pixels) so that the top/bottom is now across the center.
>Filter..Other..Offset.. 50 (with pixel wrap on so top of image rotates around to the bottom when you offset)
Use the clone tool to clone a good part of the cloud picture over the line across the center. Once that's done, this is a seamless tile (vertically anyway).

Make 10 Copies of layer 1, each shifted up by 10 pixels

Copy layer 1 to layer 2. On layer 2 we want the clouds to move up. Since this is a 100 pixel image height, we can make 10 frames that move up 10 pixels each.
On layer 2, move the cloud image up 10 pixels:
Filter.. Other.. Offset.. -10

Copy layer2 to layer 3 and offset it by -10 pixels. Repeat this process until you have 10 layers that are offset by 10 pixels vertically from the one beneath it. The 10th layer should end up being 10 pixels offset from the first layer so now there is a good animation loop. Make sure no layers move horizontally.

Add Perspective

Now we want to make each of the 10 layers look like the clouds are coming towards us from a distance.
In Photoshop, use Edit.. Transform.. Perspective
Do this perspective transform on each of the 10 layers..

Drag one of the upper corners out to get a perspective look...

Keep dragging.. WAY out there...Cursor out of view even...

SAVE 10 PNG IMAGES

Now you have to decide what dimensions to use. You can leave it as-is at 400x100 but I think it's better to stretch it horizontally. I resized mine to 600x100. It's easier to work with at 400 than at 600 because of the perspective transform part. If you really want to get the size of the final swf down, consider changing dimensions down to 300x50 and then using transform in Flash back to 600x100. This example is done that way. It's only 8 KBytes! The top one up there is 102kbytes. kinda too big.


Once you have set your final dimensions, just save all 10 layers as seperate png images. Avoid jpeg because of compression damage that will ruin the look of it.
Turn off the visible icon for all the layers except layer 1. Save as image01.png
It will say it can only save as a copy. That is fine.. it will be a png of only the visible layer.
Turn on visibilty for layer 2. Save as image02.png
Continue until you have saved all 10 layers as seperate images image01.png to image10.png

Import Into Flash
In Flash, click on a keyframe where the images should import to.
File.. Import... browse to the cloud images. Select ONLY image01.png and press OK
It will ask you if you want to import as a sequence. yes
Save your animation as an SWF and load it up at runtime with loadMovie.


.. OK, now, having told you the individual steps.. I would suggest not doing it that way! hahaha
What I mean is, it will save you a lot of work if you record the steps as actions. I made two actions.. first one to duplicate layer and offset by -10 and the 2nd one does the perspective transform. I set each action to a hot-key so it's really fast to do the whole thing with just a few keystrokes. But, do it the hard way if you must! :o)
Have fun!

Tralfaz
EMAIL: Click here and remove 'TAKEOUT' to email me if you have any questions


Main Page Flash MX Projects