Learn to create cloud animation in Flash

Need a Website? Contact Us Now!

This entry is part 20 of 32 in the series Flash CS4 Tutorials

First make the background color sky Blue, something like this one below.
Learn to create cloud animation in Flash
Select the paint brush toolLearn to create cloud animation in Flash choose a fill color white and just make some random shapes on the blue stage like this one below.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
What you see on stage is a very realistic looking cloud, something like this below
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
By double clicking on the stage, you will enter the cloudanim1 movie clip, as you can see in the edit bar like this one.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.
Learn to create cloud animation in Flash
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.

Series Navigation«Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4Learn to import sound in Flash CS4.»
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • E-mail this story to a friend!
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati

Tags:
Posted in Flash CS4 Tutorial | 1 Comment »


One Response to “Learn to create cloud animation in Flash”

  1. By Clay Jackson on Aug 19, 2009 | Reply

    Thanks. This is exactly what I was looking for.

Post a Comment