Flash 8 Cookbook

Building Preloaders

By  Joey Lott

Excerpted from Flash 8 Cookbook, published by O'Reilly Media, Inc. © 2006

Flash movies begin playback as soon as the first frame is loaded. This default behavior generally works well with compact Flash vector graphics. However, when you use other kinds of assets—notably, bitmap graphics, sound, video, and/or Flash components— Flash's default behavior can lead to stuttered, delayed, and broken playback. The cause of the unacceptable playback is that Flash is forced to try to play frames back that haven't been loaded yet.

For example, imagine a movie that has a frame rate of 12 frames per second. On frame 12, a keyframe contains a bitmap graphic that is 36 kilobytes in size. Even assuming that there is no other content in the movie, to display this frame at the proper time, Flash would have to download at a rate of 36 kilobytes per second, or 3 kilobytes for every frame. But a user on a modem may be able to download only 2–4 kilobytes per second. In this case, the playhead would reach frame 12 before its contents were loaded, and Flash would stop playback and wait for the content to load. Obviously, the lower the user's bandwidth, the more pronounced the problems are; thus, modem users are much more likely to experience poor playback than users on a corporate intranet.

Flash has a built-in tool, the Bandwidth Profiler, which can be used to simulate the playback of a movie at different connection speeds. For example, you can have Flash play back the movie assuming that the movie downloads at a rate of 4.7 kilobytes per second, which is roughly equivalent to the operating speed of a 56K modem. This simulation reveals whether problems in playback are likely and, if so, where in the timeline they're likely to happen.

Flash lacks a simple setting to tell it not to begin playback until the movie can stream properly. However, you can create equivalent functionality by creating a preloader. A preloader prevents Flash from playing the movie until part or all of the SWF has already downloaded. The most basic preloader holds the playhead on frame 1, which contains a message such as, "Loading…" until the necessary amount of content has loaded; then the movie begins normal playback.

One problem with a simple loading screen is that users have no idea how long they have to wait. If a simple loading screen is on the monitor without change for 30 seconds, users may suspect that the movie is broken and leave the site. Fortunately, you can add feedback that communicates the preload progress to the user, in the form of a numeric percentage that increases as the content is preloaded or in the form of a progress bar. This chapter contains recipes for both of these types of preloader.

You can check how much content has loaded into the Flash player using two movie clip methods called getBytesLoaded() and getBytesTotal(). Respectively, these two methods return the number of bytes that have been downloaded and the number of bytes overall that are required for the whole movie. You can divide the former by the latter to determine what percentage of the file has downloaded.

20.1 Determining How a Movie Will Download

Problem

You want to test the playback of a movie simulating different connection speeds, identify frames with assets too large to play back progressively, and/or determine whether you need a preloader.

Solution

Use the Bandwidth Profiler.

Discussion

The Bandwidth Profiler is available within the testing environment in Flash. That is, it is accessible when you test a movie by choosing Control > Test Movie. To access it, choose View > Bandwidth Profiler. The top half of the test player displays the Bandwidth Profiler.

The Bandwidth Profiler analyzes the file size of assets needed to download in each frame and plots the file size as bars on a graph. The values on the left side of the bar vary based on the size of the assets in the movie. The bottom line on the graph, or stream limit, shown in red, represents the dividing line between movies that will stream acceptably and those that may have problems during playback. If any frame has a column extending beyond the stream limit, the movie is unlikely to play back acceptably. Figure 20-1 shows a movie with bitmaps placed every fourth frame. All of these frames extend far beyond the stream limit; this movie would need a preloader to ensure acceptable playback.

Figure 20-1. A movie needs a preloader when it contains frames that exceed the red line

The value of the stream limit is relative to the connection speed and frame rate. That is, if you have Flash simulate playback for a 56K modem at 12 frames per second, the line will appear at 400 bytes. However, if you change the playback simulated setting to a 28.8 modem, the line will appear at 200 bytes. If you increase the frame rate to 24 frames per second for a 28.8K modem, the line appears at 100 bytes because the content would essentially have to download twice as fast as it did when the frame rate was 12 frames per second in order to keep up with the playback.

You can change the connection speed by selecting it from the View > Download Settings menu. Built-in options range from 14.4K modems to T1 connections. You can also create your own custom settings by selecting the Customize option from that same menu.

In addition to seeing the graph depicting how a movie will download, you can have Flash simulate the download for a given bandwidth. Specify the connection speed in the View > Download Settings menu, and then select View > Show Streaming, or press Control-Enter (Windows) or Command-Return (Macintosh). Flash plays back the movie at the specified rate, pausing to simulate frames that have not yet downloaded.

The Bandwidth Profiler has two practical limitations:

See Also: Recipe 20.2

URL: