Using Flash to Load a Random Image
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.
Click by Click: If you would like to view this tutorial without all the notes: Click by Click
Step One: Getting the Images Ready
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!!
You will need to place them all into a single folder on your computer.
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.
Here are the details of my images as seen in Windows Explorer:
View as: Thumbnails
Step Two: Setting up the Flash Document
Note: The ActionScript used in this tutorials is suitable for ActionScript 1 or ActionScript 2. It will not work is ActionScript 3. If you find that you get errors it could be that your Flash file is set to publish in ActionScript 3.0 or later. If you are not sure which version of ActionScript you are using check your publish settings: File > Publish Settings > Flash > ActionScript version.
Your settings should look similar to this:
Settings as seen in the Property Inspector.
Note: If your Property Inspector is closed go to: Window > Properties > Properties (Ctrl F3)
Note: The name of your Flash Movie is not important, only the location.
Step Three: Creating the ActionScript
Important Note: Make sure that you can see Actions - Frame at the top of the Actions Panel:
The Actions Panel has Actions - Frame in the top corner.
Note: To see if Script Assist is on or off go to the Action Panel's Side Menu Button:
Script Assist is On when ticked: (remove the tick)
Cross Ref: If you are not sure what Script Assist is or how to switch it on and off see the short Tutorial: 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:
Note: If your images are not the same size as your Flash Movie then the code above will align your images to the top left. If you would rather that your images were aligned to the center then change the load Movie Number from 1 to 0 like this:
Note: This will load one image only. Just to check that the random load is working test your Movie several times in a row by repeatedly pressing: Ctrl Enter (You may see a blank Movie for a short while when waiting for the next image to load, this is just like refreshing you browser and is normal. If you don't wish to wait press Ctrl Enter twice in a row).
Important: In test mode if you have not saved your Flash file into the same folder as your images your movie will not work. When you upload your files to the Internet then the HTML page must be in the same location as the images and the location of the Flash Movie becomes irrelevant. If you want to use your Flash file in multiple web pages and load images form one location you will need to specify an absolute address like this:
var myImageName = "http://www.yourwebsite.com/images/" + myRandomNumber + ".jpg";
I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!
48492 visitors to this page since
26 Oct 07 •
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here
All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.