This effect allows you to make a fairly realistic sky, which will serve as the perfect backdrop to any of the outside scenes in your games or movies.

First, you need to decide what your sky should look like. Try looking on google image search for any photos that look right. Quite often you are not really sure what you want until you see it, but it really helps to have a good look. Even if you can’t find something that is your “perfect” sky, you get a rough idea of the sort of colours that you will be using, as well as the shape and distribution of the different types of cloud.

For this tutorial, I picked this image to use as a reference:

The first thing to do in flash is to prepare the backdrop. This is a basic gradient fill. If using a photo for reference, you can use the eye dropper tool to get a perfect match on the top and bottom colours of your sky.

The next step is to build up a palette of three colours. You can use more or less if you wish, but I recommend three to get the most realistic effect without taking forever to make each cloud. I used the eye drop tool on three areas of cloud to get a highlight (yellow), a body (orange), and a shadow (brown) colour. Set the alpha of each of the colours to 60%.

Now you are ready to start drawing your clouds. Make a new movie clip and call it cloud1. Create three layers in this movie clip. On the middle layer use the paintbrush to paint the main shape of your cloud (orange). Then switch to the top layer and add in the highlights (yellow). Finally swap to the bottom layer and add the shadows. Separating the colours on each layer allows them to overlap, creating additional blending due to the partial transparency of each colour.

Once you are happy with your cloud, repeat the process in order to fill up your sky. Make each cloud a separate movie clip, named cloud2, cloud3 etc. When you are done your sky should look roughly like the picture below (I made 5 separate clouds).

Now to add the most important effect – the blur filter. You will probably need to do this separately for each cloud in order to get the optimum effect, as it is very much dependant on the size of the cloud. Click on a cloud, and go to the filters settings. Add a blur filter, and make sure that the X and Y amounts and unlinked. Keep the Y value between 5 and 10, and then increase the X value until your cloud looks nice and fluffy. Start with a value of 40 or 50, and then adjust it until you are happy with the effect. Repeat this for each cloud until your sky is nice and blended.

Now we need to add the movement. Click on cloud1, and press F8 to create a new movieclip. Name it cloud1_mover. On the first frame, move the cloud so that it is on the far right of the screen, ensuring it is totally off the stage. Now create a motion tween, and place the next keyframe around 800-1200 frames along the timeline (it needs to be a high number of frames, or else the cloud moves to fast, slow is best for this effect!). On the second keyframe, move the cloud to the far left, again so that it is totally off the stage. You should now have a motion tween which moves your cloud across the screen, from right to left. Repeat this process with each of your clouds, so that each cloud is in a new movie clip in which it is moved across the stage. Try to make the duration of each cloud’s animation different, by varying the number of frames in each of the tweens.

Now is the final step. Click on each cloud, and paste the following actionscript onto it:

onClipEvent (load) {
this.gotoAndPlay(Math.round(Math.random()*this._totalframes)+1);
}

This means that every time the sky loads, the clouds will start at a point midway through their animation, rather than all on the first frame.

If you wish, you can copy all of your cloud animations, and paste them back in, in order to create a more cloud filled sky.

The final effect will look something like this:

Tutorial by John Feltham
powerabuse.co.uk

If you have any questions or comments on the tutorial, feel free to post them on the forum.