Chapter 20. Building Preloaders

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 assetsnotably, bitmap graphics, sound, video, and/or Flash componentsFlash'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 24 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.