Learn to create cloud animation in Flash
Need a Website? Contact Us Now!
First make the background color sky Blue, something like this one below.

Select the paint brush tool
choose a fill color white and just make some random shapes on the blue stage like this one below.

Now you will have to convert this to a symbol, so select all by pressing Ctrl+a and press F8, having checked the movie clip, name the movie clip cloud 1 and press ok. Like the one below.

Now clicking on the movie clip, you must add a blur filter to it, so go to your filter panel, select the add filter button, select the blur filter and increase the ‘x’ and ‘y’ to say 54 with a medium quality as shown below.

What you see on stage is a very realistic looking cloud, something like this below

First of all we are going to put this movie clip inside another movie clip, and in that movie clip we are going to create a simple looping animation. So with the movie clip selected, press F8 to put that inside another movie clip, check the movie clip option and call it cloudanim1 and press ok like this one below.

By double clicking on the stage, you will enter the cloudanim1 movie clip, as you can see in the edit bar like this one.
![]()
So in our cloudanim1, we are going to bring the clouds little down and make the size smaller by clicking on the free transform tool, you will see something like this below.

So lets to down to frame15 and press F6 to add a new keyframe, and at frame15 we are going to get the clouds to the centre of stage and also resize the image bigger using the free transform tool, like this one below.

So we are going to create a motion tween between the two keyframes, so right click between the first and the fifteenth keyframe and select motion tween, and as we scrub the timeline across we see the clouds flying at us, and this by default will loop over and over again. Now what we want to do is, as it gets really close, we want it to fade out, and we’ll do it in the course of a few frames, so jump to frame11 and hit F6 to add a new key frame there, and come to frame15 and we want to make it transparent, so come to frame 15, to back to the properties panel and change color from none to alpha and bring the alpha all the way down to 0 like this one below.

So as you scrub the time line across, the clouds comes close to you and then fades out, ok.
So go back to scene1 and test your movie, by hitting Ctrl+Enter. You will see the effect.
Now lets go and create 2 more cloud animation movie clips, so lets go and lock this layer and also make it invisible, call this layer cloud1, now add another layer above cloud1 layer and call it cloud2, now do the same exercise to draw clouds by Selecting the paint brush tool choose a fill color white and just make some random shapes on the blue stage like this one below.

Select all by pressing Ctrl+a, select a movie clip by pressing F8 call it clouds2, go to filters add a blur filter and with the quality medium selected increase the blue to 54.
Now you will have to convert this to a symbol, so select all by pressing Ctrl+a and press F8, having checked the movie clip, name the movie clip cloud 2 and press ok. Like the one below.

Now clicking on the movie clip, you must add a blur filter to it, so go to your filter panel, select the add filter button, select the blur filter and increase the ‘x’ and ‘y’ to say 54 with a medium quality as shown below.

So put this inside another movie clip that we are going to animate to press F8, check on the movie clip and name it cloudanim2 and press ok like this one below.

By double clicking on stage you will enter cloudanim2, being in frame1 bring the clouds down and resize it little smaller, and pick different number of frames, the last one we took about 15 frames, we want this one to look a little big random so go upto 29 frames and press F6 to add a new keyframe there. Again at frame 20 bring it to the centre of stage and expand the size by using the free transform tool, then make the motion tween by clicking inbetween these two keyframes and right clicking and selecting motion tween. We want it to fade back towards the end so jump back to frame 16 and press F6 to add another keyframe and go back to frame 20 and make it invisible in your properties panel to color> alpha>0. Remember these are all stored in movie clips and these movie clips are going to loop over and over again.
Ok we want the cloud1 to animate from frame1 itself, and we want the cloud2 to animate little later, lets say from Frame 5, so push cloud2 to frame5. what we have done is we are animating cloud1, which is start animation right away, but cloud2 will take a couple of frames to animate, but make sure the first frame is still visible in frame5, so we need to add some frames here, so click on frame5 and press F5 to insert some frames, now remember by default, no matter what our main timeline is doing these two movie clips are going to be animated over and over again, they are going to be looping so we don’t want to jump back to frame1, if we jump back to frame1 then all of a sudden the animation we created in frame6 is going to disappear, so its only going to be visible in frame 5 and then disappear, so at frame5 we want to put a stop action, so create another layer above cloud2 and call it actions, click on frame5 and hit F6 to add a new key frame there, and selecting that keyframe press F9 to open your actions panel, and the keyboard shortcut to write a stop action is ESC+st or just type “stop();” close your actions panel and test your movie again. You will notice two different sets of clouds coming at us.
That’s it now you know how to make cloud animation using flash.
Flash CS4 Tutorials
- Flash CS4 Tutorial
- Introduction to flash CS4 authoring environment
- Panels and Panel workspace in flash CS4
- Drawing in flash CS4
- Use of polystar tool in flash CS4
- Object drawing Mode in Flash CS4
- How the Line tool, Pencil tool, brush tool and pen tool work in in Flash CS4
- How to use Ink bottle and paint bucket tool in flash CS4
- How to manage layers in Flash CS4
- How to make an image big on rollover in flash CS4
- Creating Mask in Flash CS4
- Moving Ball Animation in Flash CS4
- How to create a shape tween in Flash CS4
- How to create a motion guide in Flash CS4
- Learn how to create a bouncing ball in Flash CS4
- Learn how to put multiple classic tween on stage at the same time in Flash CS4
- Learn Complex Text Animation in Flash CS4
- Learn Create Animations involving Masks in Flash CS4
- Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4
- Learn to create cloud animation in Flash
- Learn to import sound in Flash CS4.
- Learn 3D Art in Flash CS4.
- Learn to create a customizable pop-up window using Flash CS4.
- How to create a pop up window in flash CS4 using javascript
- How to get an url in a blank window in a flash CS4 action script
- How to get an url in a blank window in an xml file
- How to put your favorite icon in the browser
- How to create a scroll bar in Flash CS4
- How to create a basic layout in Flash CS4
- How to load pictures in flash CS4 dynamically using the loader component
- Load External swf as2
- Upload a Website/ FTP
Tags: Learn to create cloud animation in Flash
Posted in Flash CS4 Tutorial | 1 Comment »













By Clay Jackson on Aug 19, 2009 | Reply
Thanks. This is exactly what I was looking for.