Before building a preloader, let’s take a look at how SWF files loads.

SWF files are displayed in a streaming manner. Frames in the main timeline are loaded from 1 to the end (from left to right in Flash IDE). The user will be able to see a frame once it is loaded, without loading the whole SWF file. Because of the streaming nature, a SWF file with only one frame in the main timeline will only show up until everything is loaded. A preloader is not needed in such situation. In order to make a preloader visible during the preloading phase, preloader should be placed in the first frame and the contents should be placed in some frames behind it.

Generally, a 2-keyframes structure is used for a Flash file with a preloader.The first keyframe holds the assets related to preloader and the real contents are in the 2nd keyframe. When the preloader detects the file is fully loaded, a gotoAndStop is called to jump to the “main” frame.

One thing to take note is that the amount of assets in the 1st frame is more than what are visible on the stage. Actioncript classes, MovieClips /Images/Sound with linkages in the library are automatically exported into the 1st frame. There’s a trick to solve the problem.

First, un-check the “Export in first frame” option in linkage properties panel. Then, place the item into some frame between the “preloader” frame and the “main” frame to make sure it’s available for use when arriving at the “main” frame. It becomes a 3-keyframes structure. However, this trick doesn’t solve the problem if the 1st frame is bloated by ActionScript classes. (There’s an option to export ActionScript classes into later frames in Preferences panel but it’s not very reliable).

Bandwidth Profiler is a very handy tool when working on preloaders. In Flash IDE, Bandwidth Profiler is available in testing mode (F12 or Ctrl+Enter). It’s a very useful tool to check whether the SWF file will prelload properly or not. Here’s an example of how bandwidth profiler looks like. On the left, it’s a summary of the SWF file and file size of the current frame (49KB for the 1st frame). On the right, it’s a graph of file sizes of all frames (>64KB on the 10th frame). Be careful that the Y axis (KB) increase exponentially not linearly. In this example, the 10th frame is actually 111 KB which looks like 70/80 KB if estimating from human eyes.

Most of the preloaders don’t start from 0% and the reason is obvious. A preloader contributes to the total SWF file size and once the preloader is loaded this means the SWF file is loaded for some percentage also. Using the screenshot as an example, the preloader is 49KB and the rest of the content is 111 KB. Therefore, the preloader will start from 49/(49+111)=30%

Shang :: Apr.21.2008 :: beginner, best practice :: 1 Comment »

Trackback this post | Feed on Comments to this post