a Random Background
         by kirupa

Hardly a day goes by where I do not come across a really cool Flash site that features a background that loads randomly when loaded. Each time you press Refresh, the page loads, and, you guessed it, a new background appears! This seems simple doesn't it? A variable randomly assigns a number, and that number then plays a corresponding keyframe in a movie clip with background images stored in numerous keyframes.

As it is true in anything Flash related, there is a wrong way and a right way to create a randomly loading background. The method I outlined above is easy, but the more efficient method I will explain in this tutorial is far easier.

[ reload this page to see a new background image ]

There are several parts to making the above animation - both of which are relatively simple. The first part involves converting background images into a SWF movie.

Transferring a JPG to SWF:

  1. Create a new movie in Flash MX. Save the movie as image0. Adjust the movie's dimensions to 300 width and 200 height.
  2. Once you saved the movie and adjusted the width and height, let's get an image in there! Make sure you find an image that exactly matches the width/height of your movie (300 x 200).

    For your convenience, I have provided an image for you to use:

[ use the above image ]

  1. Once you found the image, get that image into Flash MX. If you are using the above image I have provided, right click on the image and select Copy. Then go to Flash and paste the image by going to Edit | Paste.
  2. The image will have pasted perfectly in your movie. Go to File | Save to save this image0 file. Then go to File | Publish. The SWF file for this will have been created.
  3. Now, here comes the mundane part: you will need to repeat the above 4 steps four more times for four MORE images. Do not worry! I do not want you to create 5 more movie files just for this tutorial. I have created them for you, and you should download them and place them ALL in the same folder.

    Right click on the following links and select Save Target As to save the animations the same folder:
    1. Image0.swf

    2. Image1.swf

    3. Image2.swf

    4. Image3.swf

    5. Image4.swf

    6. Image5.swf

  4. Make sure the above files are all stored in the same folder:

[ all the animations are stored in the same folder ]

You may be wondering why you had to first learn how to convert a jpg into a swf, and then why I suddenly decided for you to download the SWF instead. The reason is, I wanted you to know how to make a JPG into a SWF using Flash MX, and I did not want to hassle you with having to find five more images and converting to Flash.

When naming the SWF for the background images, make sure you end them with a number that signifies the order in which they were created. The first image would end in a zero, the second image would end in a one, etc. In Flash, all numerical lists, etc. start with a zero. While the first image would be a "one", it is actually a "zero". You will understand more as you progress through the tutorial.

Loading the Backgrounds Randomly
Now that you have the background images (in the SWF) format downloaded to a folder, we will randomly load the images when the animation you create loads:

  1. Create a new animation and SAVE it in the same folder that the background images are stored in. Set the width and height of the movie you just created to 300 width by 200 height.
  2. Now, create a blank movie clip and place it on your stage. The easiest way to create a blank movie clip is, first, draw a small circle. Select the circle and press F8. From the Convert to Symbol Dialog box, select Movie Clip:

[ the convert to symbol dialog box ]

  1. Once you selected Movie Clip, press OK to close the dialog box. You have converted the circle to a movie clip. Now, right click on the circle and select Edit in Place. Delete the circle by highlighting it and pressing the Delete key. Click the Scene 1 tab to return to your main timeline:

[ the scene 1 tab ]

I think this calls for a short break. Once you are ready, press the Next Page link below:


Next Page



kirupa.com's fast and reliable hosting provided by Media Temple.