Back to DEB Tips

Flash: Create a Preloader

Flash movies stream, so when the Flash movie contains several frames or scenes, the movie should be preloaded so that it will playback smoothly. Let's set up the animation that will play while the main movie (the presentation from a previous lesson) is loading behind the scenes. We'll create a movie clip for the preloader animation.

1. Open the movie that you want to add a preloader to. Choose Window...Scenes to access the Scene panel and click the Add Scene button. Rename the scene, “preloader.” Then drag the preloader scene to the top of the stacking order on the Scene panel.

2. Choose Insert…New Symbol. Select the movie clip symbol behavior and name it “preloader animation.” Click OK.

3. Create 7 layers in the movie clip and name each layer to spell out the word, “loading,” starting from the bottom layer. Use the Text tool to create each letter for the word “loading” on a separate layer (i.e., create the letter "l" on the "l" layer, create the letter "o" on the "o" layer, etc.). Choose the Arial font, a dark red color and 34 point text on the Property Inspector.

4. Convert each letter to a graphic symbol, then select all of the symbols and use the Align panel to align each symbol instance to its bottom edge, and space each symbol instance evenly horizontally. Use the Arrow tool to position the symbols in the center of the Stage.
NOTE: Deselect the "Align To Stage" button on the Align panel before aligning, if necessary

5. Frame 20 will be the ending point for the animation. Select all of the layers on frame 20 and then insert a keyframe on frame 20 for all layers.

6. Move the playhead back to the starting point for the animation. Drag the mouse across all layers on frame 1, and then choose the "Align to Stage" button and the Align horizontal center button on the Align panel. This setting will align all of the symbols so that they are stacked on top of each other.

7. Access the Transform panel and adjust the width and height of all selected symbol instances to 500%.
NOTE: Select the Constrain checkbox to adjust the width and height proportionately

8. Click the mouse once on one of the symbols on the Stage. Choose Alpha from the Color drop-down menu on the Property Inspector. Set the Alpha of all selected symbol instances to 1% on the Property Inspector.

9. Drag the mouse across all layers on frame 20 again. Then click once on one of the symbols on the Stage and set the Alpha of all selected symbol instances to 99% on the Property Inspector.

10. Select frames 2-19 across all layers and create a motion tween from the Property Inspector.

11. Stagger each symbol instance by dragging the starting keyframe on frame 1 to a new position on the timeline for all layers, starting with the “o” layer. Press the ENTER key to preview the animation.

12. Drag the mouse across frame 25 on all layers and insert a frame to extend the Timeline.

13. Go back to the Preloader scene.

14. Drag out the “preloader animation” movie clip from the Library onto the Stage.

Frame Actions, Expressions and Conditional Statements

1. Now let's set up the logic for the preloader. Create a new layer and name it “Actions.” On the first keyframe of the Actions layer, let's have Flash test to see if all of the scenes and frames in the presentation have loaded. In other words, has the play head on the Timeline gotten to that last scene and frame in the main movie yet?

2. Select frame 1 on the Actions layer. Then expand the Actions window.

3. Open the Actions folder, and then open the Conditions/Loops folder as well. Double-click the "if" condition. We will use this as part of the conditional statement that will perform an action if a condition is true.
NOTE: Conditional statements perform comparisons and carry out instructions based on the results. A conditional statement in this case will respond to the property of the movie clip we created for the preloader animation. Conditional statements begin with the statement “if.”

4. Open the Properties folder and double-click the “_framesloaded” property. This will serve as a property of the movie clip we created for the preloader and it will be used to specify the number of frames that have already loaded in the movie clip.

5. Click the mouse in the Condition field after the “_framesloaded” property. Then open the Operators folder and access the Comparison Operators folder as well. Double-click the “>=” greater than or equal to operator.
NOTE: The argument that goes between the parentheses is the condition. The condition is an expression that compares one thing with another. Comparison operators are used within expressions and they are used to evaluate an expression and return a value of true or false.

6. Open the Properties folder again and double-click the “_totalframes” property.

7. Open the Movie Control folder, located inside the Actions folder. Double-click the “goto” action. Choose Scene 1 from the Scene drop-down menu.

8. Open the Conditions/Loops folder and double-click the “else” statement.

9. For the next part of the logic, we will create a multi-frame loop that will continuously play the preloader to the visitor until all scenes and frames have loaded. Access the Movie Control folder again and double-click the “goto” action one more time. Keep all of the parameters at their default settings.

10. Choose Control…Test Movie to preview the animation. Once inside the Test Movie window, choose View…Show Streaming to preview the preloader animation.
NOTE: Choose a modem setting from the Debug menu and then preview the animation again

Source: This lesson was developed especially for YOU by Debbie Berg  :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

Back to top

about debbie | debbie's clients | deb's schedule | deb's monthly tip
flawebdeb home | dreamweaver | flash | frontpage | photoshop
web seminar | digital design camp | dreamweaver/flash conference