Home arrow Flash arrow Building Preloaders

Building Preloaders

A preloader prevents a Flash movie from playing back until the movie can stream properly. Without a preloader, you may find that your movie tries to play frames that haven't been loaded yet, leading to unacceptable playback behavior. This article explains how to build a preloader. It is excerpted from chapter 20 of the Flash 8 Cookbook, written by Joey Lott (O'Reilly, 2006; ISBN: 0596102402). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 19
February 22, 2007
  1. · Building Preloaders
  2. · 20.1 Determining How a Movie Will Download
  3. · 20.2 Building a Simple Preloader
  4. · 20.3 Building a Preloader that Displays Load Percentage
  5. · 20.4 Using a Progress Bar to Create a Graphical Preloader
  6. · 20.5 Creating Preloaders for Files with Exported Symbols
  7. · 20.6 Creating Preloaders for Files with Components

print this article

Building Preloaders
(Page 1 of 7 )

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.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials