Complex Loader

Share |

 

Although the simple loader may be all that you need, most large movies have something more elegant on the front end. Usually, there is a progress bar, as shown in figure

Figure 23.1. A progress bar, halfway through a load.

1. Start a new movie.

2. Draw a wide rectangle, complete with a border.

3. Select the entire rectangle and turn it into a movie clip by choosing Insert, Convert to Movie Clip.

4. Double-click on this new movie clip to edit it.

5. Separate the rectangle's fill and border into two separate layers.

6. Copy the rectangle fill and create a new layer to paste it into. This layer should have the border layer in front of it and the original rectangle behind it.

7. Select the new rectangle and fill it a darker color. It should sit right on top of the lighter original rectangle.

8. Now turn the darker rectangle into a movie clip by choosing Insert, Convert to Movie Clip. Give it any Library name you want, but give it the instance name bar in the Properties panel.

9. Double-click on the dark rectangle movie clip to edit it. You'll need to reposition the rectangle so that the upper-left corner of the rectangle is at the movie clip's registration point (see Figure 23.2).

   Figure 23.2. The rectangle's upper-left corner is at the registration point.

   

10. Back in the main movie clip, create a fourth layer. Put a dynamic text field there. Link it to the variable displayText. Make it a nice big font, colored white.

11. Go all the way back to the main timeline. Now we need to attach a script to the movie clip. It starts by setting up the bytesLoaded and bytesTotal variables.

    onClipEvent(load) {
        // initialize variables
        bytesLoaded = 0;
        bytesTotal = _root.getBytesTotal();
    }
    

    
    
12. 
    

    The enterFrame handler does most of the work. It monitors bytesLoaded and bytesTotal every frame. The variable percentLoaded is a value from 0 to 100. It is used in the text field but is also used to change the _xscale of the bar. Because the registration point is at the left, the left side of the bar stays in the same place, but the right side shrinks or grows according to _xscale.
    

    When the bytesLoaded equals bytesTotal, the display text is changed to a different message. The nextFrame command moves the movie forward to the next frame.
    

    
    

    onClipEvent(enterFrame) {

        // if there is more to load

        if (bytesLoaded < bytesTotal) {

            // get current amount loaded

            bytesLoaded = _root.getBytesLoaded();

            // calculate percentage

            percentLoaded = Math.round(100*bytesLoaded/bytesTotal);

            // if there is still more

            if (bytesLoaded < bytesTotal) {

                // display text

                displayText = "Loading: "+percentLoaded+"%";

                // set scale of bar

                barFill._xscale = percentLoaded;

            // no more left

            }  else {

                // display complete

                displayText = "Loading Complete.";

                // fill out bar

                barFill._xscale = 100;

                // go to next frame

                _root.nextFrame();

            }

        }

    }

    
    
13. 
    

    The main timeline should be broken into three layers. The first layer has the loader bar movie clip that we have built. This stretches across the first two frames.

    
    
14. 
    

    Another layer has two separate key frames in frames 1 and 2. In frame 1 is a stop() command, but no other elements.

    
    
15. 
    

    The second frame of this new layer has a button. You can see it in Figure 23.3. The user clicks the simple button script to continue with the rest of the movie.
    

    Figure 23.3. The second frame of our loading movie allows the user to control when the rest of the movie begins.

    
    

    

    on (release) {
        play();
    }
    

    
    
16. 
    

    The third layer of the movie contains the video—the large media piece that causes this movie to need a loading frame in the first place.