In a previous section we saw how to create presentations using screens and also how these can be used to create photographic slide shows. One of the problems with this was that slide shows of images could quickly reach a size that would make them slow to load and deter users from waiting for them.
One solution to this problem is to load graphic images one at a time, as they are required. Another thing that can help persuade users to wait for images and other assets to download is to add a progress bar or pre-loader so that the time remaining for the download can be seen. Provided the progress is not too slow this should encourage users to wait for the assets you want them to see.
Start a new Flash project. Add a new layer for the ActionScript we shall need. In the script layer click in frame 1 and press F6 to create a keyframe. Add this code:
loadMovieNum("filename.jpg",1);
The loadMovieNum command is a variant of the more basic loadMovie command. We could have entered:
loadMovie("filename.jpg", "container_mc");
Here container_mc should be a container such as a rectangle that will hold the image specified but this means we have to create the container in the first place, just a few seconds work but the loadMovieNum command removes the need for this. The number that follows the filename refers to the level number where the image will be loaded. It is possible to specify up to 2,130,706,429 levels (2^31-1, a 32 bit signed integer) but you should be able to manage with one or two, just make sure the level number is the same throughout this project.
Now click in frame 10 of the script layer and enter another loadMovieNum command to load another image file. Repeat this as often as you like. Set the frames per second to a lower value than 12, say 2, which will give 5 seconds per image.
After the last image add one more keyframe and enter 'stop();' in the script layer.
This will produce a tiny .swf file, just a hundred bytes or so, instead of the monster file created by embedding the images in the .swf file. The images will load up individually and the user won't get bored waiting for all the images to load.
There is, of course, a loss of control for the user who can no longer advance to the next image using the controls built with behaviors.
'Preloader' is the term used for a device that informs the user of the progress of a download. One way to make a preloader in Flash is to write the ActionScript from scratch.
Start a new project or use the one immediately above. In Layer 1 add a Loader from the UI Components section of the Components window (Window/Development Panels/Components or Ctrl/F7). Set the size of this loader component to match the graphics that you will load into it. Assign a name for the loader in the Instance Name box in the Properties panel. Set the size of the stage to match the loader.
Add a Progress Bar from the Components panel and place it in the middle of the loader. With the progress bar selected choose Modify/Arrange/Send to Back so the graphics hide it when they have loaded. Assign a name to the progress bar in the Instance name box.
Change the code in each keyframe as follows:
my_loader.autoload=false;
my_loader.contentPath = "acoma1.jpg";
my_pb.source = my_loader;
my_loader.load;
my_loader.clear;
You can copy and paste this text but remember to change the file name each time.
The larger the file being downloaded the more useful the preloader will be. With small image files and a fast Internet connection you will notice scarcely any effect as the images load so quickly.
The main problem with this technique is that the loaded component is a fixed size and scales the images loaded to the same dimensions. Thus some graphics may be displayed smaller than the original and some may be stretched to a larger size and become pixelated.
Note also that the .swf file for this version of the slide show is around 32KB, the increase in size being due to the incorporation of components. This is due to the large amount of shared ActionScript classes used to create them. Components make projects easier to build but at the price of increased file size.
Another variation is to combine the preloader with buttons so that the user can choose the image to load.
For this project you can delete the frames between the keyframes because the movie will no longer play the images in sequence. Instead the movie will load the images as before but then use buttons in a toolbar to allow the user to choose the images to view.
The code for the first keyframe can be exactly as before, there is no need to change it as we still want to load at least one image into the movie.
The code for the second and subsequent frames is more or less the same as before but each sequence of code is wrapped up in a function that is called when the buttons are clicked.
Expand the stage to make room for a toolbar area and add some buttons made up from text, as shown previously. Add the buttons to the toolbar layer and add frames to match the keyframes in the scripts layer. Add suitable names to the buttons and then amend the code to:
two_btn.onRelease = function(){
my_loader.autoload=false;
my_loader.contentPath = "acoma2.jpg";
my_pb.source = my_loader;
my_loader.load;
}
(Adapt each section of script in the keyframes.) The code inside the function is exactly the same as before but it has been placed inside a function that responds to the onRelease event of the buttons. The code in the last keyframe is still stop();. In case the user wants to view the first image again we add a button for it and attach code as above.
