how to make a ...

Preloader in Flash 4

by Olga Tsetlin
 
 
 

Animation for preloader: DEMO

 
 
 
Click if you prefer to view this page on a  black  background.

................................................................... [ homeflashworkcontact ] ...................................................................
 
TABLE OF CONTENTS:
 
INTRODUCTION
You've got "Macromedia Flash" and are starting to design your first movie with an excitement...

Finally, you are done with it. It is full of graphics, music and extremely long. Your file is about 0.5 MG - isn't it?

You've put this movie on the web and started testing it.

Here is a problem. Flash movie loads frame after frame. As frame with music is loaded flash player starts to play music. But not all the frames with animation are loaded. So, as a result music ended already, but animation is still loading and playing.

To prevent such a trouble you need to make a "Preloader" that stops movie in the very beginning until all the frames of the movie are completely loaded.
 
Notes:
 
«» Everything that we are going to design for "Preloader" is supposed to be in layers, which do not consist ANY graphics.


SHORT WAY


Say our main movie has several Scenes.
We call them "Scene 1", "Scene 2", etc. ..., "Last Scene".

  1. Add a new layer to the "Scene 1" and to the "Last Scene".
  2. Give a name to this layer - "Counter".
  3. Put in this layer keyframes: one in the first frame of "Scene 1" and another in the last frame of "Last Scene".
  4. Add labels to these frames in the main movie - "First frame" and "Last frame" (without quotations, I am adding them only to separate these names).
    To do so: right click on frame, from drop-down menu select "Property"...

    ^


    ... in tab "Label" type the name for this frame. Click OK.

    ^


  5. Add one additional scene BEFORE the existing movie.
  6. Name this scene "Preloader"
  7. Add a separate layer to "Preloader" scene and put an animated symbol in it that would be saying that the movie is loading and would entertain a visitor while he/she is waiting;
  8. There is supposed to be at least 3 frames in the "Preloader".

    1. In the beginning of the "Preloader" place frame labeled "Preloader Start";

       

      ^

       

    2. Then place just an empty keyframe in the next frame (you don't need to label it);
    3. In the end of "Preloader" place frame labeled "Preloader End"

       

      ^

       

  9. Add actions to these frames:

    1. for the "Preloader Start" (the first frame of the preloader):

      If Frame Is Loaded ("Last frame") 
      	Go to and Play ("Preloader End")
      End Frame Loaded
      			
      *** Here is a little catch: Flash player is checking if "Last frame" IS loaded. If it IS loaded them player goes to frame "Preloader End" in the "Preloader" scene, If it is NOT loaded yet, then player goes to NEXT frame, which we left empty, so far. We should catch the Player in this frame and send it back to check condition of loading.
    2. Assign an action for the frame with an empty keyframe (somewhat in the middle of "Preloader" scene) add action:

      Go to and Play ("Preloader Start")
      				

  10. Now FlashPlayer loops between these two frames unless desired "Last Frame" is loaded.
    When it is finally loaded FlashPlayer gets to the "Preloader End" frame and movie starts.



So, we are done with "Short Way".
 
 
................................................................... [ homeflashworkcontact ] ...................................................................
 
LONG WAY
 
~ which actually shows progress in percentage ~
 

The logic of this variant of Preloader is totally the same as the previous one. There will be just more frames in Preloader scene, because we need to make a "progress bar". I wont describe how to make the graphic part of the preloader. I guess everyone knows this. I would rather describe the technicalities step-by-step.

  1. Add new layer to each existing scene;
  2. Call them somehow (e.g. "Counter");
  3. By adding keyframes to this layer (in timeline) add 11 keyframes that divide the main movie in to 10 segments - first keyframe is in first frame of the main movie, and 11th keyframe is in the very last frame of it;
  4. By adding labels to each of these 11 keyframes name them: "0%", "10%", "20%" ... and so on up to "100%";
  5. Add a new scene BEFORE "Scene 1" of your movie;
  6. Add the name for this scene - "Preloader";
  7. Put 21 frames in preloader scene;
  8. Put keyframes in each frame.
  9. Label each odd frame (e.g. "Show 0", "Show 10", "Show 20" ... "Show 100");
  10. Now add actions to these keyframes:

    FIRST STEP:

    Action for frame with label "Show 0" (the very first frame of "Preloader"):



    If frame Is Loaded (Scene 1, "10%")
    	Go to and Play ("Show 10")
    End frame loaded
    			

     

    SECOND STEP:
    Add action to next frame (which does not have a label):
    Go to and Play ("Show 0")
    			
    *** Now FlashPlayer loops between these two frames unless desired frame "10%" is loaded.

  11. Repeat first and second steps for each pair of frames in preloader scene except the last one.
  12. Leave the last keyframe in preloader ("Show 100") empty, I mean you don't need to assign any action here.

     

    Happy moment - Movie starts! That's it.

 
GLOSSARY
 
Main movie
- a movie except preloader scene.
Preloader scene
- a new scene added to the very beginning of the existing movie.
to label
- to add Label
- in timeline select frame and add keyframe. If you've done with this already, then right click on it, from drop-down menu select "Property", in tab "Label" type the name for this frame. Click OK. The frame have labeled now.

Document last modified: Friday, November 12, 1999.

................................................................... [ homeflashworkcontact ] ...................................................................