Managing Smooth Movie Download and Display Flash

When Flash movies are played back over the Internet, they stream, meaning that the plug-in shows as much of the movie as it can during download, even if the whole file has not been transferred to the user’s system or browser cache. The benefit of this feature is that users start seeing content without having to wait for the entire movie to finish downloading.

Nevertheless, streaming has potential drawbacks. First, during streamed playback, the movie may unexpectedly halt at arbitrary points on the timeline because a required portion of the movie has not yet downloaded. Second, ActionScript code is ignored when it refers to segments of the movie that have not downloaded. These drawbacks can lead to unpredictable and often undesired playback results.

Thankfully, there’s a solution. You can regulate the playback of the movie by using ActionScript code to prevent the movie from playing until a specified portion of it has downloaded. This technique is often referred to as preloading. A common preload sequence, or preloader involves displaying only a short message, such as “Loading . . . Please Wait,” while the movie loads. Once the appropriate amount of the movie has been retrieved, the movie is allowed to play. Flash 5 provides basic and advanced methods of producing a preloader. This section shows you how to use three different actions (or methods) to check the download status of a Flash movie:

  • If Frame is Loaded or ifFrameLoaded: This action has been around since Flash 3, and enables you to check whether a specified frame label in the Flash movie has been downloaded by the plug-in. This is the simplest action to use to check a movie’s download progress.
  • _framesLoaded and _totalFrames: Introduced with Flash 4, these properties can be checked on a Movie Clip timeline or the main movie timeline (Scene 1, Scene 2, and so on). _framesLoaded returns the current number of frames that have downloaded into the plug-in, while _totalFrames returns the number of frames that exist on the specified target timeline.
  • getBytesLoaded() and getBytesTotal(): These methods are new to Flash 5 ActionScript. The most accurate way to check the progress of a Flash movie download is to use these methods with other ActionScript code. The following examples show you how to use each of these actions to monitor the download of a Flash movie over the Web.

Building a basic preloader with ifFrameLoaded
In this example, we explain how to create a preloader for a 100-frame movie, where the movie doesn’t begin playing until all 100 frames have been downloaded. For this exercise, make sure the Actions Panel is in Normal Mode.

  1. Create a new movie with 100 frames. Rename Layer 1 to actions.
  2. Create a new layer and name it labels. On the labels layer, create a blank keyframe on frames 2, 5, and 100. Label those frames preload_loop, begin_movie, and minimum_loadpoint, respectively.
  3. Create a new layer and name it content. Create blank keyframes at frame 5 and frame 100. On each of those keyframes, place a large symbol such as a complex vector shape or a bitmap (you need some content in order to see the load sequence working in Test Movie Mode). See below for reference.
  4. Add content to the Main Timeline that will be preloaded.

    Add content to the Main Timeline that will be preloaded.

  5. On frame 1 of the Content layer, use the Text Tool to type the words Loading . . . Please Wait.
  6. On the actions layer, create a blank keyframe at frames 3, 4, and 100.
  7. Edit the actions of frame 3 by double-clicking it in the timeline. This opens the Actions Panel. Click the plus (+) button in the top-left corner of the panel and select Basic Actions➪If Frame is Loaded. Choose the Frame Label option in the Type setting, and select minimum_loadpoint from the Frame drop-down menu.
  8. With the line ifFrameLoaded (“minimum_loadpoint”){ highlighted in the Actions listbox, click the plus (+) button and select Basic Actions➪Go To.
  9. Choose the Frame Label option of the Type setting, and then select begin_ movie from the Frame drop-down menu. Then check the Go to and Play option at the bottom of the parameter area. This Go To action, which starts playback of the real movie, will only be executed if the frame labeled minimum_loadpoint has been downloaded.

    The ifFrameLoaded action is a one-time check. If the frame specified in ifFrameLoaded action has already downloaded, then the action(s) contained within the ifFrameLoaded statement are executed. If, on the other hand, the frame specified has not yet downloaded, then the action(s) contained are not executed, and the movie simply continues playing. In most cases, however, you won’t want the movie to carry on playing until your desired frame has been downloaded, so you have to force the movie to perform the ifFrameLoaded check repeatedly until the specified frame is loaded.

  10. To loop the ifFrameLoaded action, edit the frame actions of frame 4 on the actions layer by double-clicking the frame in the timeline. In the Actions Panel, add a Go To action to the Actions list. Choose Frame Label from the Type menu, and select preload_loop from the Frame drop-down menu. Then check the Go to and Play option.
  11. Finally, add a stop() action on frame 100 of the actions layer. Now you’re ready to test your movie and see the preloader work its magic. Choose Control➪Test Movie (Command+Enter or Ctrl+Enter). Once in Test Movie Mode, you’ll have to configure the environment a bit to watch the simulated download. Enable the Bandwidth Profiler by checking View➪Bandwidth Profiler. Click frame 1 in the Profiler timeline. Select View➪Frame by Frame Graph. Choose Control➪28.8 (2.3KB/s) (this simulates a 28.8-baud modem).

To watch your movie playback as it would over the Web, choose Control➪ Show Streaming. You’ll see the playhead in the timeline looping around your ifFrameLoaded action while it waits for the movie to download. The green bar in the timeline indicates how much of the movie has downloaded.

There are some general guidelines to keep in mind when you make a preloader. First, preloaders do not work inside Movie Clips. You cannot preload individual portions of a Movie Clip. If a Movie Clip instance is placed on a frame, the frame is not considered loaded until the entire instance has finished loading. Second, you don’t need to preload the entire movie when using preloaders. In our previous example, you could move the minimum_loadpoint keyframe to any point in the movie after frame 5. By using the streaming emulator in Test Movie Mode, you can determine approximately how much of your movie should be loaded before you allow it to play. Also, by using more than one preloader you can show the first part of a movie and then reenter a loading state before showing any subsequent parts.

Preloading with _framesLoaded and _totalFrames
In Flash 3, the only tool developers had to create preloaders was the If Frame is Loaded action. Using multiple preloaders, developers attempted to simulate a percentage-loaded feature that told the user how much of the movie had been downloaded. Although they demonstrated the ingenuity of the developers, these percentage-loaded indicators were mostly inaccurate. With the introduction of ActionScript in Flash 4, developers had a way to precisely determine the percentage of frames that have been downloaded to the user’s system. In this section, we convert the preloading mechanism of the preloader_1.fla movie to the _frames Loaded and _total Frames method.

  1. Open the preloader_1.fla that you created in the last section. If you didn’t do that exercise, then open a copy of the same file from the Flash 5 Bible CD-ROM.
  2. On frame 3 of the actions layer, remove the ifFrameLoaded and Go To actions.
  3. On frame 4 of the actions layer, remove any existing actions and add the following ActionScript in the Actions list (in Expert Mode):
  4. Create a new layer called textField. On this layer, create keyframes on frames 2 and 5. On frame 2 of the textField layer, create a text block with the Text Tool. In the Text Options Panel, change the text type to Dynamic Text, as shown in Figure below. In the Variable field, enter the name percentageOutput. Uncheck the Selectable option.
  5. Save your Flash movie as preloader_2.fla and test the movie.
  6. When the playhead reaches frame 4, Flash executes the script. If, at that time, it finds that the number of frames downloaded is fewer than the number of total frames in the movie, it sends the playhead back to the preload_loop keyframe. Then it updates the percentageOutput variable to show, as a percentage, how many frames have loaded relative to the total number of frames in the movie. If, on the other hand, the number of frames loaded is not less than the total number of frames in the movie (in other words, if all the frames have loaded), then the playhead is moved to the begin_movie keyframe, and the movie proper starts playing.

    An interesting variation on this advanced style of preloading is a graphical preload bar. A preload bar would simply be a small Movie Clip that contains a rectangle shape. Once placed on stage, the width of the bar would be set using the _xscale property to adjust the width percentage of the rectangle Movie Clip instance. The following steps show you how to do this.

    Make sure you change the text block into a dynamic text field.

    Make sure you change the text block into a dynamic text field.

  7. Create new layer called loaderBar. Create keyframes on frames 2 and 5 of the loaderBar layer. On frame 2, draw a long rectangle, as you want it to be appear when the movie has finished loading. Select the rectangle, and press the F8 key. Call this Movie Clip symbol loaderBar.
  8. With the loaderBar instance selected on the Stage, open the Instance Panel and name the instance loaderBar. Double-click the instance to enter the Symbol Editing Mode, and position the rectangle shape so that the left edge is at the zero X coordinate, as shown below.
  9. Go back to the Main Timeline, and reposition the loaderBar instance so that it’s centered on the Stage.
  10. Double-click frame 4 of the actions layer, and change the ActionScript to the match the following code block:
  11. Because we want to the bar to grow from left to right, we need to make sure that the registration point is on the left edge of the rectangle.

    we want to the bar to grow from left to right, we need to make sure that the registration point is on the left edge of the rectangle

  12. Save your Flash movie, and test it.

Both the text-based and graphical preloaders are not accurate measurements of downloaded file size. They measure only the number of frames that have been downloaded. So, if the content of your movie is distributed evenly over the frames of the timeline, the frames-based percentage values will closely match the real filesize transfer percentage.

If, however, your heaviest content occurs only on sporadic frames (as our examples have demonstrated), then the frames-based percentage values may appear imprecise to the user. When such a movie is streamed, the progress bar will jump to discrete sizes regardless of connection speed or duration. Our next example demonstrates a new Flash 5 method for measuring the load progress of a Flash movie.

Using getBytesLoaded( ) and getBytesTotal( ) in Flash 5
By far the most accurate way to check the loading progress of a streaming Flash movie is to use the new Flash 5 methods getBytesLoaded() and getBytesTotal().

As their names indicate, you can now access the actual number of bytes that have downloaded to the browser or stand-alone player. With these new methods, we don’t need to try to disperse content evenly over frames on the Main Timeline—we can simply place our content where and when we want it.

We continue with the preloader_2.fla that we created in the last exercise. If you want to open a fresh file, use a copy of the preloader_2.fla file from the Flash 5 Bible.

  1. Double-click frame 4 on the actions layer. In the Actions Panel, change the Actions list to match the following code block. Pay particular attention to the new variable names we’ve assigned:
  2. In Step 1, we’ve changed loadedFrames to loadedBytes, and more importantly, we’ve made the value of loadedBytes equal the current number of bytes of the main movie file (_root) that have loaded into the Flash Player. Likewise, we’ve switched totalFrames to totalBytes, and made its value equal to the total number of bytes for the main movie file. Make sure you’ve also changed the if condition to indicate the new variable names, as well as the math expression for the percentageOutput variable.

  3. Save your Flash movie as preloader_3.fla, and test it. Make sure the Bandwidth Profiler is in Show Streaming Mode. After you’ve tested your movie, you’ll see that the loaderBar displays the true loading progress of the Flash movie. Not only can you check the progress of the Main Timeline, but you can also use getBytesLoaded() and getBytesTotal() on loaded .SWF movies. The following Expert Tutorial by Gareth Pursehouse shows you how to check the progress of .SWF files that are loaded into the main movie .SWF.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics