How to use Flash to load random images onto a web page.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Using Flash to Load a Random Image

Full Version: This is a shortened click by click version of a: Full Length Tutorial

Free Flash Tutorial

This tutorial will show you how to load a random image onto your web page. Every time a user browsers your page a new picture will display. This can be used to make your site look fresh and dynamic or to deliver different messages or ads campaigns.

I sometimes use this system to deliver images in the head section of the pages in this site. It is very powerful as the same Flash Movie can be used to control all the pages on the site. If I want to change the images that are displayed I simply delete my current group of images and replace them with the new ones. If I want to change the number of random images that are displayed (that number can even be 1) all I need to do is change a single line of ActionScript in the Flash Movie and upload the new version of Flash Movie. That single change may take only a few minutes but it will effect thousands of pages on the webwasp site. There is no need to change any HTML on individual pages.

The ActionScript used in this tutorial is very simple and consists of only four lines. So for those of you wary of ActionScript, don't worry.

For this tutorial you'll be making something like this:

Example: Download the Flash file Beg 041

To change the image press your Browser's Refresh button (F5).

Note: I have loaded a series of 25 pictures (of my home town: Auckland, New Zealand). The images are displayed at random so occasionally the same image will be displayed twice in a row. Obviously the more images in your series, the less likely they are to repeat.

Step One: Compiling the Images

How Many Pictures?
You will need to collect together a number of pictures. How many is up to you. It is even possible to have only 1!!

File Location
You will need to place them all into a single folder on your computer.

Picture Dimensions
Your images can be either all the same size or mixed sizes. I have used a mixed bunch, including some portrait and some landscape. I have made sure that none of my images exceed a maximum width of 450 pixels and a maximum height of 300 pixels.

File Format: Jpeg, PNG or GIF
Your images can be any format you like as long as all the images are the same. In this instance I have used Jpegs but you could also use PNG or GIF.

Naming the Images
Name all your images numerically from 1. Do not use names like 01.

Step Two: Setting up the Flash Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File (ActionScript 2.0)
4. Click: OK
   
   
5. Go to: Modify > Document (Ctrl J)
6. Set the size: 450 x 300 (or what's appropriate for your images)
   
7. Click: OK
   
   
8. Save your file into the same folder as that of your images: File > Save

Step Three: Creating the ActionScript

1. Select: Frame 1
2. Open the Actions Panel: Window > Actions (F9)
3. In the Actions Panel if Script Assist is on, Switch: Script Assist Off
   
   
4. Type (or Copy & Paste) the following Actionscript into Actions Panel:

// Sets the number of images in the random sequence
// IMPORTANT: Set this number to how many images you have
var myImageSequence = 25;

// Creates a random number:
var myRandomNumber = Math.floor(Math.random()*myImageSequence)+1;

// Creates the full image name like: 1.jpg
// IMPORTANT: If you're NOT using Jpegs change jpg to png or gif
var myImageName = myRandomNumber + ".jpg";

// Loads the random image:
loadMovieNum(myImageName, 1);

5. Change  myImageSequence to the number of images in your sequence. Mine is: 25
6. If you're not using Jpegs change the code above from: ".jpg" to ".png" or ".gif"
   
7. Test your movie: Control > Test Movie (Ctrl Enter)

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

This is a quick reference version of a full length tutorial: Full Length Tutorial