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 ]

3. 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.
    
4. 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.
    
4. 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.

 

	note
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 ]

3. 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 section link below:

---

Now that we finished adding the movie clip, your movie clip should look like a hollow circle:

[ the empty movie clip should look like a hollow circle ]

Let's continue on with the rest of the steps:

1. Select the movie clip (the hollow circle). The Properties panel will update itself to display information about the movie clip. You will see the W:, H:, X:, and Y: labels in the Properties panel. Enter a zero in each of the four fields:

[ enter a zero in the w, h, x, and y fields in the movie clip's properties ]

2. Once you entered zeros in the four fields, you will notice the movie clip align perfectly on the top-left corner of your scene. Select the movie clip again, and give it the instance name location:

[ give an instance name to the movie clip (hollow circle) ]
 

3. Now, look at your timeline. Right click on a blank keyframe in the timeline and select Actions. Copy and paste the following code:

                      choice = Math.round(Math.random()*5);

switch (choice) {

case 0 :

 location.loadMovie("image0.swf");

 break;

case 1 :

 location.loadMovie("image1.swf");

 break;

case 2 :

 location.loadMovie("image2.swf");

 break;

case 3 :

 location.loadMovie("image3.swf");

 break;

case 4 :

 location.loadMovie("image4.swf");

 break;

case 5 :

 location.loadMovie("image5.swf");

 break;

}

[ copy and paste the above code in a blank keyframe of your movie ]

4. Test the movie by going to File | Preview in Browser. Notice how the background randomly loads. You have just created an animation with a randomly loading background!
    
5. You are done with this tutorial. If you are interested in learning more about this animation, read on. The final source code has also been provided for you to refer to. 

Frequently Asked Questions

I have compiled a list of questions people have asked regarding this effect, and I have provided my answers to those questions.

• What if I want to load the images from a URL?
   
  • There is no difference between loading the background from a place on your hard drive or from the internet. In your code, where you see the lines image0.swf, image1.swf, etc. replace them with the path of your image. For example:
    
    location.loadMovie("http://www.kirupa.com/image1.swf");

• Instead of having the background load automatically when the animation loads, I want the background to load when a visitor presses a certain button.
  • To make that happen, you will need to delete the code you entered into a blank keyframe. Once you have deleted the code, right click on the button that will be used for loading a background and select Actions. Use the following code for loading a random movie using a button:

                      on (release) {

 choice = Math.round(Math.random()*5);

 switch (choice) {

 case 0 :

  location.loadMovie("image0.swf");

  break;

 case 1 :

  location.loadMovie("image1.swf");

  break;

 case 2 :

  location.loadMovie("image2.swf");

  break;

 case 3 :

  location.loadMovie("image3.swf");

  break;

 case 4 :

  location.loadMovie("image4.swf");

  break;

 case 5 :

  location.loadMovie("image5.swf");

  break;

 }

}

You are using the exact same code as the one you used in the tutorial, but the above code has the button's on (release) handler to ensure that the code works when the user clicks on the button.

• Are there other methods of achieving this effect?
   
  • Absolutely! In this tutorial, I tried to present the concept in a simplistic way. The code is not optimized for best performance, and nor is the tutorial comprehensive in all that is possible. Just understand how to use the loadMovie function to load an external SWF file into a movie clip.
    
    You can use any method of determining a random number and calling a movie (background) from another location and loading them into a movie clip. You could have used: if/else or even straight out concatenation with the base name of the movie plus the number ie: "http://www.kirupa.com/image" + var + ".swf";

This concludes this version of the tutorial. Click the download source link below to download the final source code for this tutorial:

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇