|
Load Images Dynamically |
|
|
|
Written by Rawpulse
|
|
Friday, 21 April 2006 |
|
Learn how to dynamically load images, saving download time!
Dynamically loading images is a great way to reduce download times on Flash websites. If you have a number of images, it loads them individually instead of with the rest of the site, which would increase initial download time. This benefits both you and the viewer. They only load the pictures they want to see. To view a basic example of dynamically loading images, click here.
Stage 1
First, make sure you have all the images you wish to use. It's better to create a folder just for the images, so they are more organized. In this example, I'll be using two guitar photos. You should follow by using two images, then when you know how it works, expand with more if you need to. Once you have your folder of images, open Flash. Find out the dimensions of your pictures. If they are different dimensions, use a stage size that is the same size, or larger than the biggest photo. Change the name of Layer 1, to "Images". If you don't already have it, make sure the Component window is open. To open it, press Ctrl + F7. Expand the user interface section of the components window, by clicking the small plus sign.
Find where it says "Loader" about half way down.
Stage 2
Click and drag it onto the stage. When you release, you will see a small white square with a blue stroke. Inside are the words "mx.controls.Loader". We need to resize the loader, to make it the same size as our stage. To do that, ensure it is selected, then go to your Properties menu. Change the width and height to match the size of your stage. Once you have done that, change the X and Y positions to 0, which will align the loader with the stage.
Give the loader an instance name by clicking it and going to the Properties. Name it "loader", as we will be using the name loader in the Actionscript, later. Save the FLA file to the same directory that your photos are in. Loading images dynamically will only work if the SWF is in the same folder.
Stage 3
Now we need to create two buttons. The first button will load the first image, and the second button will load the second image, when it is clicked. So, create a new layer, and call it "Buttons". Make sure it is above the images layer. Once you have drawn your button, position is on the middle left, and convert it to a button, by selecting it and pressing F8. Call it "button1" and make sure button is selected.
Now, still on the buttons layer, draw a second button, or duplicate the movie clip. Make sure you convert it to a symbol, and call it "button2". Place it on the right hand side of the stage.
Stage 4
Now we need to add code to the buttons. Select your first button, and press F9 to open up the Actions panel. Enter the following code:
on (release){
loader.contentPath = "guitar1.jpg";
}
The first part of the code tells Flash to do something when the button is clicked and released. So, on click release, access the loader. The code then tells Flash to display the image named "guitar1.jpg". If you are not using an image called guitar1.jpg, change the name to whatever your photo is called. If you want to learn the code, it's recommended that you write it up, rather than simply copy and paste it. Once you have added it to your first button, close the Actions panel. Now select your second button, and apply the code again. The only difference this time, is that you change the image name from guitar1.jpg, to guitar2.jpg (or whatever you named your images).
Now test your movie. Initially you should just see your buttons and a white background. Click on your left button to load your first image, then click on your second to load your other image. You can add as many images to your gallery as you like, and it won't effect the download time of the rest of your site. To watch the example again, click here.
If you had a problem with this tutorial, tell me about it on the forum.
|
|
Tutorials 
