Hands-On: Flash MX 2004 Basic Preloader ActionScript

Exercise 37: Building a Basic Preloader ActionScript

Flash movies are played in the order of the scenes listed in the Edit Scenes drop-down list or the Scenes panel. When you have a Preloader in a movie it will control the number of frames downloaded for the entire movie before loading the movie. One way of doing a Preloader is to have the Preloader occur in the first Scene, and the main movie starting in scene 2. This exercise is a simple Preloader and will occur in the first frame of the current scene.

Follow these steps to build the ActionScript for your Preloader Movie:

1. Open the file called BuildPreloader.fla in Flash MX 2004 it has the files you need to do this exercise including a slideshow with buttons to move through the show.
2. In the Timeline click the second layer (named buttons) and add a layer above it, rename this layer preloader.
3. In the Timeline click the new layer (named Preloader) and add another layer above it, rename this layer actions.
4. Click in the first frame of the actions layer and hit [F9] to open the Actions panel, and then select: Global Functions > Timeline Control > stop. To put a Stop Action on the Stage.
   
   
5. Open your Library [F11] to access a simple Preloader called mcLoader that’s inside the MovieClip folder.
6. Click the first frame of your preloader layer and then drag a copy of mcLoader from the Library onto the Stage.
7. Use the Align panel [Control] + [K] to center the mcLoader movieClip on the Stage. Be sure that the To Stage: icon is selected first and then from either the Align: grouping or the Distribute: grouping, use the middle icons to center the MovieClip on the Stage. When you are finished, lock the preloaderlayer.
8. Click on the preloaderon the stage to have it selected and then open the Action panel [F9]. The ActionScripting will occur on the MovieClip itself. It needs to have Flash MX 2004 check and see if all the bytes needed to show the movie have downloaded to the user’s computer, if not it has to keep playing the Preloader movie until it has downloaded all the bytes. So that’s what you’ll be doing next.
9. From the Actions panel select the following: Global Functions > Movie Clip Control > onClipEvent
   
10. From the onClipEvent drop-down menu of choices choose enterFrame.
    
11. Click paste the opening curly bracket { and then hit the [Enter] key to move down to the next line.
    
12. Now we need to add an IF action to see if the required amount of bytes have downloaded. Click the plus + icon again and choose: Statements > Conditions/Loops and double-click on the if action to add it to the Script pane. (The if action allows you to set up a condition that tests whether or not something is true.)
    
13. Next we need to set the condition as your code hit is telling you by leaving the cursor inside of the parentheses (). What we need to know is how many bytes have loaded and how many bytes there are in total. You will do that by choosing: Built-in Classes >Movie > MovieClip >Methods > getBytesLoaded first.
    
    
    
14. Replace the instanceName with _parent this tells Flash to look up one level or folder because you want to know how many bytes are loaded from the main movie not just the little preloader movieClip.
15. At this point we only know how many bytes have loaded, but we don’t know how many bytes are left to load, so that’s what we’ll have the ActionScript do next. Insert the cursor after the parentheses () and then type a [Space] and two equal signs == and then type another [Space] and _parent. Choose: Built-in Classes >Movie > MovieClip >Methods > getBytesTotal
    
    the double equal signs tests for the quality of the statements on either side, in other words does getBytesLoaded exactly equal getBytesTotal? If not continue playing the Preloader, but if they do actually equal each other, then we are ready to go to the main movie. So you will add that bit of ActionScripting next.
16. Look to the end of the second line of coding and notice the open curly bracket { click to the right of it and [Enter] once to go to the next line.
17. Type the following: _parent. This time add a period because the choices you are about to make will not use the dot syntax.
18. After typing the above choose: Global Functions > Timeline Control > nextFrame
    
    this is what your code should look like in the Actions panel in case you can’t read the above.

onClipEvent (enterFrame) {
        if (_parent.getBytesLoaded() == _parent.getBytesTotal()) {
            _parent.nextFrame();
}
}

19. Now it’s time to see if your new ActionScript works, hit [Control] + [Enter] and check it out.
20. If the Preloader remains on the Stage after loading the main movie, click in Frame 2 of the Preloader layer and choose [F7] to add a blank keyframe. It should be gone from the Stage now.

This simple Preloader movie and ActionScript will work for any movie you have, all you need to do is copy the frame holding the MovieClip and paste it into the first frame of that movie. Just be sure to have an Actions layer with a Stop action in the 1 st Frame. This will hold the movie from playing until the animation of the Preloader has determined whether or not to move on to the 2 nd Frame and play the main movie.

There are far more complicated Preloader movies that use more complicated scripting, and if you wish to find these try http://flashkit.com or directly from Macromedia Flash Exchange found at the lower right side of your start screen each time you open a new Flash MX 2004 file.