Click to Show Lecture Notes

Making a Preloader Movie in Flash MX

Button Action       Optimize File size    Pr 1    Pr 2    Pr 3

Determining When a Movie is Fully Loaded

This page will help you determine if a Flash Movie has finished loading completely. By using a Preloader Movie, you can keep your user informed as to the expected time for the Movie to start.

There are a couple of built-in features in Flash to help you determine this, do the session below to learn how.

Checking to see if the Movie is Loaded.Checking to see if the Movie is Loaded.

Determine Whether a Movie Is Fully Loaded

This session you'll check the _framesloaded property against the _totalframes property to determine when a loaded movie is totally loaded.

  1. First, create a little sub-movie that will be loaded. Set the document properties to 300 x 300.
  2. Then create a linear animation that starts in frame 2. That is, click frame 2, select Insert Keyframe (F6), and then build the animation that plays through many more frames (at least out to frame 60 or more). If you have a series of bitmap images to use, it would be ideal because you want something that takes a little while to download.


  3. In the first frame of this sub-movie, put a stop Action followed by an evaluate Action.
  4. Type in the Expression filed waiting=true, (you'll use this in the main movie to make the host movie wait for the submovie to load.)


  5. In frame 1 on the Stage, type the Static Text,  "Loading..." .
  6. Create a Dynamic Text block with "0" (zero) in it, but be sure to associate a variable called "percent" (%) with the Dynamic Text.
  7. Also set the margins on the text wide enough to accommodate "100". This field will show the user the status of the download.


  8. In the last frame of this movie, place a GoTo Action and set the frame parameter to 2. This will cause the animation to loop, but not all the way back to frame 1 (where the loading screen appears).


  9. In a new folder, save this movie as submovie.fla and then do a Test Movie (Ctrl+Enter) to create a submovie.swf file. (When you Test Movie, the movie just sits on frame 1—you'll control this issue from the movie into which it loads.)


  10. Now in a new movie, draw a box that's exactly 300x300 (remove the fill), select Convert to Symbol (F8), call it "Holder," and make sure it's a Movie Clip.
  11. Be sure to name the instance now on the Stage "theClip" (from the Properties panel).
  12. Edit the master version of this clip (just double-click it). Select View > Grid > Snap to Grid.
  13. Now select the entire square and then grab the top-left corner and snap it to the center of the clip (the little plus sign in the center of the screen).


  14. Back in the main scene of this movie, create a button named “Load Movie” and make a copy of it for the second button named “Unload Movie”.
  15. To add the ActionScript needed from the Actions Panel, choose: Actions > Browser/Network > loadMovie.
  16. For the URL: use submovie.swf, change the Location: to Target, and then type theClip in the field to the right. Variables: leave at Don’t send.

    17. Actions Button Dialog Box


    Hide Practice Session 1

Working with the other Buttons. Building the Unload Button and the Play Actions

Building the Unload Button and the Play Actions

There's quite a bit to do in the next few steps, so take your time and recheck your steps if needed. (I'll break it down to baby steps since you probably have little experience with ActionScripts.)

  1. The other button should each use an Actions > Browser/Network > unloadMovie.

    2. Building the Script
  2. Now it's time to create the script attached to the instance of the Holder symbol (instance name, "theClip"). Select theClip and open the Actions panel.


  3. First, insert an"onClipEvent" (found under the plus button > Actions > Movie).
  4. Change the onClipEvent parameter from "load" to "EnterFrame" (the first line of the script).


  5. Insert an evaluate Action, Actions > Miscellaneous Actions > evalutate and type the following in the Expression parameters:
    percent=Math.floor(_framesloaded/_totalframes*100)
  6. Notice that the "floor" is calculated (that is, rounding down) by taking everything inside the parentheses to the right..


    7. Hide Practice Session 2

Finishing the Code. Finishing the Code.

Wrapping Up With The Balance Of The Code

Here's the balance of the scripting that needs to be done to complete this preloader movie. You'll want to do two things when the movie is totally loaded: tell the loaded movie to start playing and to stop checking whether it's totally loaded.

  1. Insert an "if" Action (Esc, I, F). Into the Condition field type waiting==true && percent==100. This code looks for the condition where "waiting" is true and "percent" happens to equal 100.

    2. In scripting the double equal sign == is different from the normal single equal sign =. The Double equal sign is a comparison—more like "Does percent happen to equal 100?"



  2. Finally, add a simple play Action so the movie can play if the statement is true.

    3. Action Scripting
  3. Turn the "waiting" to false so that checking can stop. To do this, add a simple evaluate Action with waiting=false. The image below shows the final version of this code.

    4. The Final version of the script
  4. Test it out. The movie should work great. Uploading this to the server will be a great test to see how it works on the Internet.


    5. Hide Practice Session 3

Button Action    Back to Contents    Optimize File size    Top

Page Updated on May 5, 2003