Back to DEB Tips

Entertain Your Visitors While They Wait! Use a Flash Preloader

The average Web surfer will wait no more than 10 seconds for a Web page to load, especially a home page. But "sticky" sites are all the rage these days, and to both entertain and KEEP your visitor, you need to create a Web page that's interactive, yet browser-compatible. But how can this be accomplished with such a wide range of browsers and computers being used to surf the Net? The answer--Macromedia's Flash animation tool. Flash' popularity is due to it's ability to create compelling, yet quick-loading and browser-compatible Web experiences. 

Add a Flash movie to your once static HTML page, or create an entirely Flash-based site without having to worry about compatibility or plug-ins. The Flash player is the most popular download on the Internet, and it's popularity is due to it's small file size (200KB), and the fact that it's built into the Windows and Macintosh operating systems, as well browsers such as Internet Explorer, AOL and Netscape Navigator.

Even though Flash movies are generally small in file size,  they are processor-dependent. This can affect the playback quality, and in turn affect the user's experience. Older machines with slower processors may load Flash movies in a choppy fashion with no fluid movement. To enhance your user's experience, create a preloader that loads before your main movie. This preloader serves as a quick-loading mini-movie that entertains your visitor while they wait for the main movie. The preloader can also serve as a visual cue that the movie is loading. Use Flash's version of JavaScript, called ActionScript, to dictate how much of the main movie loads initially behinds the scenes before it's shown to the visitor. Even with slower processors, you can now be more certain that your visitor's experience will be a good one.

To create the preloader:

1) Open your Flash movie

2) Use the SCENES panel to add a new scene. Name it "preloader"

3) Drag the preloader scene to the top of the stacking order in the SCENES panel

4) First, let's go to the scene in our movie that will tell the Flash player that this is the point of the movie we want to load in the background while the preloader is playing in the forefront. Once the playhead reaches this point in the movie, we will load the main movie for the user.

5) For this example, tell Flash that we want to load scene 1 entirely before it starts to play the main movie to the user. To do this, we need to call upon a frame in scene 1, so we label that frame.

6) It's good Flash convention to create a separate layer at the top called labels. It will be easier to spot your labels later on.

7) Select the last frame of your movie on the LABELS layer and add a blank keyframe to it.

8) Go to the FRAME panel and type LOADED in the Label field. We have now labeled a frame!

9) Go back to the PRELOADER scene (select the PRELOADER scene from the SCENES panel).

10) Let's set up the animation that will play while the main movie is loading behind the scenes. We'll create a movie clip for the preloader animation.

11) Create a new symbol and name it PRELOADER ANIMATION. Choose the MOVIE CLIP behavior radio button.

12) Use the text tool to create the word "loading" on the Stage. Align the text on stage.

13) Add a keyframe to frame 5

14) Type a dot (use the period key) on the Stage on frame 5

15) Go to frame 10, add a keyframe and type another dot on the Stage

16) Go to frame 15, add a keyframe and type one more dot on the Stage

17) Go to frame 20 and add some more frames to extend the timeline (add 3-5 frames).

18) Go back to the PRELOADER scene

19) Drag out the movie clip we just created from the Library onto the Stage

20) Align the movie to the stage and readjust the size of the movie clip if necessary

21) Now let's set up the logic for the preloader. First, create a new layer and name it ACTIONS. It's proper Flash convention to create actions on a separate layer.

22) One the first keyframe of the ACTIONS layer, let's have Flash test to see if the frame   that we specified in scene 1 (the last frame that we labeled, remember?) has been loaded. In other words, has the playhead in the Timeline gotten to that last frame in the main movie yet? 

23) Let's add a frame action to frame 1 telling Flash test this. Double-click frame 1. The Actions window appears.

24) From the BASIC ACTIONS folder, choose the "if frame is loaded" action

25) At the bottom of the window, be sure that these are the settings:
Scene: scene 1
Type: frame label
Frame: loaded

26) Still inside the Actions window, choose the "GO TO" action. This tells Flash to go to the opening and play the movie. Be sure that these are your settings:
Scene: scene 1
Type: frame number
Frame: 1
Close the Actions window

27) For the next part of the logic, we will create a multi-frame loop that will continuously play the preloader to the visitor until the frame we specified in scene 1 has loaded.

28) First, add a blank keyframe on frame 2 of the ACTIONS layer so that the player will move to the next frame in the timeline if the frame from scene 1 has not yet loaded.

29) Double-click frame 2 and choose "GO TO" again. We want the Flash player to go back to frame 1 on the current scene (the preloader) and check again to see if the last frame of the main movie has loaded.

30) Be sure that these are your settings:
Scene <current scene>
Type: frame number
Frame: 1

31) Extend the other layers in your timeline to be at least as long as the ACTIONS timeline. Insert a frame onto frame 2 of the animation layer.

32) To see your preloader in action, choose Control...Test Movie. Then choose View...Show Streaming. Watch the animated graph to see the multi-frame loop that occurs in the timeline until the entire scene we specified has been loaded. Congratulations! You've created a preloader!
:-)

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