Lesson 12.2 Preloaders
Preloaders
A preloader is a fast loading short animation to hold your viewer's interest while your movie downloads. Preloaders can be simple progress bars, text saying L-O-A-D-I-N-G, simple sounds or cartoon animation, company logo with some text that appears and fades out, etc. I advise not saying wait, loading, more to come, etc. Create something more interesting and fun so the user isn't aware that they are really waiting! Some preloaders are quite simple and others seem like major animation projects on their own. Remember that your preloader presents the first impression of your site to your user.
Preloaders work because Flash is a streaming technology as you saw using the Bandwidth Profiler. This means that the data in each frame plays as soon as it's loaded.
Some designers use the preloading time to download all the elements in the movie by setting the visibility of objects to 0 during the download and then setting the visibility to 1 when they want to show the element on the screen. This is more advanced than the scope of this course but I mention it to let you know that you can accomplish a lot behind the scenes of a preloader.
Let's create a simple movie and then add a preloader. A preloader uses 3 frame actions which direct the location of the playback head.
- 1 action to check to see that a specified frame is loaded before the rest of the movie plays
- 1 action to tell the playback head to loop back to a previous frame if the specified frame has not yet loaded
- 1 action to tell the playback head to jump ahead to a frame if the specified frame has loaded
In order to specify the frames we can use the frame numbers, but I recommend using frame labels.
Creating a simple Preloader. (These steps are not related to the images on this page).
Create a new movie called preloader.fla. Set the dimensions to 420x200 with a background color of black and frames per second set to 12, the default for Flash.
Insert and name layers as follows:
actions
labels
preload graphic
preload text
sound
bitmap photo
motion tween
shape tween
background
Select all the layers at frame 100 and Insert Frames on all the layers simultaneously (F5). Save your work.
Insert some text in frame 1. Save your work.
Import a bitmap photo. My bitmap is 300x200 pixels. Don't clean it up. The larger the file size, the better for this example. Import a music or background sound. Save your work. The imported bitmap and sound will appear in your library.
We know that bitmaps and sound bulk up the size of the file so we're intentionally using them to illustrate this fact.
Insert your bitmap photo on frame 35 of the bitmap photo layer. Save your work.
Insert your sound on frame 15 of the sound layer. Set the Sync: to Start. Save your work.
Before going any further, Test your movie by going to the Control Menu - Control>Test Movie or Control + Enter. View the Bandwidth Profiler in Frame by Frame Graph. Does yours look similar to the one below? This shows the sound loading in frame 15 and the bitmap loading in frame 35. The graph will look the same if the Sync is set to Start or to Event. The movie will have to pause for quite awhile in frame 15 for all the sound to load before it begins to play the sound. The movie will pause again at frame 35 for the bitmap photo to load. Note that my fps below is 10 and I asked you to set yours to 12. That won't make much difference in your profiler.
Back to Top
Sound Panel Sync set to Event or Start
Frame by Frame Graph 28.8k settings
Sound must load completely at frame 15 before beginning to play.
Photo must load completely at frame 35.
Now go back to your Sound Panel and set the Sync: to Stream. Save your work and view the Bandwidth Profiler. Can you see the difference in the graph from the Sound Panel Sync option set to Start and set to Stream? When you select Stream for the Sync setting from the Sound Panel, Flash divides the sound into smaller sound clips and synchronizes these clips to specific frames in the movie. The spike in the graph at frame 15 when the sound sync was set to Event or Start has disappeared, meaning that the movie will start to play the music immediately at frame 15 when the sound is set to stream.
Back to Top
The bar in frame 35 is green because I have selected it by clicking on it. This displays the information for the data in that current frame in the left pane in the window. We see in the State: heading that we're on frame 35 and there is 10k of data in that frame. It's above the red horizontal Bandwidth Limit Line so the movie will pause here until the data for this frame is entirely downloaded. Frame 35 is the bitmap image. Now go to the Control Menu of the Flash Player and select Streaming Graph and then Show Streaming. The following illustration is based on the sound sync set to stream as well.
The selected bar is red when viewed in streaming graph and green when viewed in frame by frame graph. All graph views indicate that the duration of the movie is 90 frames (yours will be 100 frames) and at 10 fps that would mean that the movie will play for 9 seconds. However, we see in the Preload: that the viewer will have to wait 2.9 seconds until frame 29 for a pause or delay in playback. Your sample will be similar, not exact if you're at 12 fps and 100 frames.
Test the Bandwidth Profiler by adding more bulk to your movie.
Please note that I am suggesting that you bulk your movie with large file size bitmaps and sound only as a test for you to learn about the bandwidth profiler. It's important that you add this bulk to the movie's stage in frames after the preload and NOT insert this media into the frames create the preloader.
Create a simple motion tween of a circle symbol between frames 40 and 60 on the motion tween layer. Save your work.
Create a simple shape tween of a circle morphing into the word 'WOW' between frames 70 and 80 on the shape tween layer. Save your work. Remember that shape tweening is processor intensive and can bog down the system.
Back to Top
Test your movie and set the connection speed to simulate 28.8k with the Bandwidth Profiler in Frame by Frame Graph. Now check in Streaming Graph and select Show Streaming. With the Bandwidth Profiler in Streaming Graph and Show Streaming selected you should be able to view how long your user would have to wait to begin to see your movie. How long are you waiting? If it's longer than a few seconds, it's too long! Check the Preload: frame number in the left upper pane of the Test window.
Viewing Your Final Project
This is where a nice simple preloader would come in handy to entertain your viewer. Here's the way to do this:
Use the instructions above to view your final project in the Bandwidth Profiler. Note the frame where it shows that all your media is loaded. Insert a keyframe on the label layer for your particular frame and label it "play".
Insert a keyframe on the actions and label layers in frame 1. Insert a keyframe on the actions and label layers in frame 15. If the entire layer gets selected, hold down the Control key and click in the frame. This will select just one single frame. Label frame 1 "start" and frame 15 "loop".
In the actions layer at frame 1, inset the ifFrameLoaded action from the set of Basic Actions. (This action is deprecated in MX).
This action is telling Flash to check to see if a designated frame has loaded onto the user's computer. You'll designate the frame where your media is loaded based on your Bandwidth Profiler. My streaming graphic showed me that my movie was 100% loaded at frame 100 so we'll see if this will be correct when we view later with our preloader. We'll use the label names rather than the frame numbers in case we have to drag the label to a different frame when editing the piece. The label name in my frame 100 is "play". Here is the actionScript I used in frame 1, i.e., "start" label:
ifFrameLoaded ("play") {
gotoAndPlay (16);
}
This script is telling Flash to check to see if the "play" frame label has loaded and if so to jump from frame 1 to frame 16 and continue playing.
Looping the Playback Head until the data is loaded:
Now we have to create a loop to keep the playback head between frame 1 and another designated frame until frame label "play" has loaded.
Back to Top
Select the keyframe on frame 15 of the actions layer. Add a gotoAndPlay action to send the playback head back to frame 1 or the "start" label. This will create a loop of the playback head between frame 1 and 15 (also known as "start" and "loop"). Here is the actionScript I used in frame 15:
gotoAndPlay ("start");
Now you need to create a simple animation between frames 1 and 15. You could have text messages appear across the stage or a simple rotating circle.
When you create an interesting and captivating simple preloader, the users may not be aware of the preloader waiting time because you've captivated them during their wait. Most users will not wait through boredom while your movie loads. If I come to a dull preloader, I assume the rest of the site will be dull as well and I move on.
There are other ways of creating preloaders. Some designers use a small movie clip symbol as the preloader. Others use an Intro Scene using Scene Panel. Some put the large symbols and art into the preloader and set the alpha to 0%. The symbols will load into the cache as the preloader plays and then appear automatically in the keyframe where you set the alpha to 100%. Check your favorite Flash resource site for other preloaders.
The alpha sets the transparency and opacity of a symbol. Once a symbol loads (even if it's set to invisible), it becomes stored in the cache just like a webpage and does not need to be reloaded when it appears again in the movie so it will appear immediately.
For the best information about optimizing your movies and how Flash streams, see Macromedia's Streaming and file optimization techniques for Flash Player at: http://www.macromedia.com. Now that you've optimized your movie and created a preloader, publish the movie.
Please continue to the next section of this lesson.
Up » 12.1 Optimizing Your Movie » 12.2 Preloaders » 12.3 Publishing Your Movie
|
