Exercise #3

Creating a Basic Preloader
Download the source file

Flash file downloads can sometimes be pretty large. If you don't preload the file, slower modems will choke on the file loading. The reason preloading works is due to the IF FRAME LOADED option in a key frames action property. Double click a keyframe of a movie.

1. Create a new SCENE in a new movie
   Select INSERT / SCENE.
   
   
   
2. Return to SCENE 1 so we can start building the PRELOADER
   Select INSERT / SCENE.
   
   
   
3. Creating the PRELOADER SYMBOL
   You can use any symbol or graphic as your PRELOADER. For this example we'll use a simple animated text SYMBOL.
   
   
   
4. Convert the text to a symbol
   We need to do this so we can add an ALPHA TRANSPARENCY to the text. With the text selected go to INSERT / CONVERT TO SYMBOL. Name the symbol and choose GRAPHIC as the type of symbol.
   
   
   
5. Insert ADDITONAL FRAMES
   Right click in FRAME 30 and choose INSERT FRAME. This adds frames from frame 1 to frame 30.
   
   
   
6. Insert KEYFRAME
   Right click in frame 15 and choose INSERT KEYFRAME from the menu.
   
   
   
7. Opening the EFFECTS PANEL
   Select frame 1 on the timeline to make it active. Select WINDOWS / PANELS / EFFECTS from the menu bar.
   
   
   
8. Creating the ALPHA TRANSPARENCY
   Select Alpha Transparency from the drop down menu. With the text selected on the stage ( it has a blue border around it ), move the slider bar on the right hand side until it reaches 0%.
   
   
   
9. Create the MOTION TWEEN
   Now we'll tween the frames between 1 and 15 to give the eefect of the text fading in. Right click on any frame between 1 and 15 on the timeline. Choose CREATE MOTION TWEEN from the menu.
   
   
   
10. Completeing the MOTION TWEENS
    Right click in frame 30 and add a KEYFRAME. Select frame 30 to make the text on the stage active. From the effects panel set the alpha tranparency to 0%. Right click on any frame between 15 and 30 and CREATE MOTION TWEEN.
    
    
    
11. Adding the ACTIONS LAYER to the timeline
    Insert a new layer. Double click on the assigned default layer name, to put it in edit mode, and rename it ACTIONS. This way we can add our actions to this one layer and keep them seperate from the rest of the timeline and easy to locate.
    
    
    
12. Preparing to add ACTIONS
    Right click in frame 30 of the ACTIONS LAYER and insert a keyframe.
    
    
    
13. Opening the ACTIONS PANEL
    Right click in frame 30 of the ACTIONS LAYER and choose ACTIONS from the menu. This opens the ACTIONS PANEL.
    
    
    
14. Assigning the PRELOADER LOOPING ACTION
    Double click GO TO from the BASIC ACTIONS MENU. This assigns gotoAndPlay (1); to keyframe 30. Accept the defaults.
    
    
    
15. Assigning the IF FRAME IS LOADED Action
    Right click in FRAME 15 of the ACTIONS LAYER and insert a keyframe. Then scroll down the BASICS ACTIONS MENU until you reach IF FRAME IS LOADED. Double click IF FRAME IS LOADED to add the action to keyframe 30.
    
    
    
16. Choosing the TARGET
    Select SCENE 2 from the SCENE: drop down menu. Enter 30 into the FRAME : OPTION BOX. Close the FRAME ACTIONS PANEL.
    
    
    
17. Assigning an ACTION To IF FRAME IS LOADED
    Now we need to tell our movie what to do when Scene 2, Frame 30 is loaded. Select GO TO from the Actions Panel. Then choose SCENE 2, FRAME 30. Uncheck the box GO TO AND PLAY.
    
    
    
18. Adding content to Frame 30, SCENE 2
    We'll need to add some content to SCENE 2, FRAME 30 in order to test our preloader.
    Here's an image you can download.
    
    
    
19. Importing the image
    Right click in frame 30 of SCENE 2 and insert a KEYFRAME into frame 30. With the PLAYHEAD over frame 30 choose FILE / IMPORT. Navigate to where you've saved the sample image and select it for importation.
    
    
    
20. Trying it out
    To test out your preloader, go to the control pulldown and choose TEST MOVIE. The image immediately appears. To see the preloader in action Select DEBUG from the menubar and then choose a modem speed. You can see there are a number of modem selections there for you to test. Then select VIEW / SHOW STREAMING. This create a real life environment for testing the preloader.
    View the screen shot