3D animated clouds in Flash CS4 from a photo

Posted by & filed under Tutorials.

I’ve recently been putting together an opening sequence for a website I’m developing for a local architect. While I was putting this together it got me thinking that it would be quite nice to animate the clouds moving slowly through the scene. I wanted the effect to look convincing but I don’t want to have to render a 20 second video sequence because it would make the file size too large. Enter Flash.

I remembered a video tutorial I watched over at Aharon Rabinowitz’s web site, www.allbetsareoff.com.
The tutorial is “Creating 3D Cloud Motion From a Still Image“. Aharon’s tutorial is designed for Adobe After Effects and the end result is very effective so I thought I’d try something similar in Adobe Flash CS4.

You can view the final effect here (the animation is quite subtle) then follow on for a step by step breakdown of how the effect was achieved.

3d animated sky in flash cs4

View 3d sky animation

Step 1.

The first thing I had to do was take the original image supplied by my client and cut out the sky. I have done this quite quickly for the example here so you can see a few jaggie lines along the roof edge. I wont go over how to cut up imagery in photoshop as there are already a heap of great photoshop tutorials out there.

There was a small problem with the flares from the lights on the house. In a couple of instances these cover over the a section of the sky. The easiest solution here was to just cut them along the roofline as I was cutting the sky then simply redraw them back in on a separate layer.

When I was finished I was left with a photoshop file with just the house and the light flares over a transparent background.

Step 2.

Now we need to find an interesting sky image.  Here is the one that I settled on and color corrected to match the original sky.

Replacement sky image

Replacement sky image

It’s quite a bit larger than the original image and this is because we need to animate it. In hindsight I could have chosen a picture with a little more detail near the bottom but this one will do for now.

Step 3.

Now that we have our assets we’ll start putting things together in Flash. I’m using Flash CS4 and we’re going to take advantage of the ‘sort of 3D’ environment in Flash CS4 to set up the sky background in perspective.

Firstly I imported the photoshop files (clouds and house) and converted them into movieclip symbols.

I put them on separate layers and arranged them so that the clouds layer was at the bottom of the layer stack and the house layer was at the top.

Step 4.

Now our assets are in the right places we can use the 3d positioning tools to manipulate the cloud layer to get that effect that we’re after.

To illustrate what’s happening here I have substituted the cloud layer for a checkerboard pattern so that it’s easier to see the perspective effect.

Animated checkerboard to illustrate the perspective effect

Animated checkerboard to illustrate the perspective effect

Checkerboard substituted for sky image

Checkerboard substituted for sky image

All you need to do is select the 3D Rotation tool in the flash tools menu, click on the sky (checkerboard) and rotate it around it’s X-axis until it looks something like this.

Checkerboard rotated around it's X-axis

Checkerboard rotated around it’s X-axis

As well as the 3D rotation and translation tools , Flash has some other tools that can help us get the look that we want. These are found in the properties panel under the ‘3D position and view’ options and are the ‘Persepctive angle’ and ‘Vanishing point’ tools.

The easiest way to see what these do is just to click on the values and drag them left and right. I found that by adjusting these options as well as the checkerboard’s Y and Z-position I was able to get the checkboard to a place that worked for this effect.

Step 5

To finish off the effect all we need to do is animate the checkerboard’s 3D X-position over time from right to left. I could have done this with Actionscript but for simplicities sake we’ll just use the timeline.

Make sure that you are on frame 1 of your animation and adjust the 3d X-position to somewhere that looks about right. Here’s a picture of what looked about right for me.

Checkerboard in postion1

Checkerboard in position 1

Then add some frames to your animation. Mine is running at 25 frames per second and is about 600 frames long. Go to about frame 600 in your animation, select both layers and press ‘F5’. That will extend your animation out to 600 frames long.

On the sky/clouds layer, right click and choose ‘create motion tween’.

Then, still on the sky/cloud layer, click on the last frame in your animation to set your playhead to the last frame.

Then click back onto the checkerboard movie clip and adjust the 3D X-position left until you get something that looks like this.

Checkerboard in position2

Checkerboard in position 2

By setting a start position on the first frame and an ending position on the last frame you should now have created a motion tween animation. To test it out hold down command key (or control key if using windows) and press Return.
That should compile your animation and open it up in a preview.

Once you are happy with the effect, just swap out the checkerboard image for the cloud image, recompile and you’re all done.

One Comment! Yeeha!

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>