Preloader

Although 183K might not take long to download on a high-bandwidth connection, it takes at least 40 seconds to pass through a 56K modem. An indicator can be created that will display the progress as the movie is loading.

In older versions of Flash, the only way to show a preloader's progress was by comparing the _framesloaded and _totalframes properties of the movie or a movie clip. Unfortunately, this method was accurate only if the data was spread fairly evenly among the frames of the movie or movie clip. It wouldn't even be possible to create a progress indicator for this game with this method because the entire movie fits into one frame on the main timeline.

At first I moved everything in frame 1 to frame 2, and I created a preloader in frame 1. Unfortunately, a Flash movie will not begin playing until all attached movie clips and sounds have been loaded. Because the attached sounds in this movie were a significant portion of the SWF's file size , the preloader didn't start until 80% of the data had already been downloaded. To display the progress from the beginning, I had to create a new movie for the preloader and use the built-in loadMovie() function to load the actual movie into an empty placeholder movie clip.

Note

Another trick is to embed each sound into a separate movie and use loadMovie() to load the movies. Then you can keep the loading logic in the main movie, and you don't need a preloader movie.

Creating an Accurate Indicator

After the movie is loaded with loadMovie(), you can use Flash 5's new getBytesLoaded() and getBytesTotal() functions inside an onClipEvent(enterFrame) event to repeatedly calculate exactly what percentage of the movie's data has loaded. When the loadMovie() function is first executed, applying the getBytesTotal() function to the empty placeholder movie clip will return a value of 4 because an empty movie clip takes up 4 bytes. This is because the loadMovie() function does not usually take effect immediately. So, an onClipEvent(enterFrame) event might occur several times before the getBytesTotal() variable equals the file size of the SWF file that is being loaded. As soon as the actual movie has been loaded, the value is 0 for the first 2 “10 times that the onClipEvent(enterFrame) occurs. If the movie is already in the cache, the value will skip straight to 0 for several frames.

First I created a new Flash movie with the same dimensions and background color that would be used to load the actual move, and then I saved it as preloader_01.fla.

Then I created a new, empty movie clip symbol called placeholder, placed it in the top-left corner (0,0) of the movie, and gave it the instance name of placeholder. I then drew a new dynamic text field and gave it the variable name percentfield. This field is used to continuously display the percentage that has been loaded. I placed an instance of the Fig Leaf Software logo onto the stage and put the following code onto it:

 onClipEvent(load){     // Immediately load the movie      _root.placeholder.loadMovie("game_375.swf");      // Used to check whether the movie has loaded      initialSize = _root.placeholder.getBytesTotal();      // Used to keep track of whether the movie has loaded      loadStarted = false;      // Initialize the variable that displays the percentage loaded      percent=0;  } 

To display the progress, I created a progress indicator bar, using the _xscale property to scale the indicator itself. (See Figure 25.14.)

Figure 25.14. Unless you're viewing the game over a slow modem connection, you won't notice that the progress indicator is very accurate.

When the preloader movie first starts, the placeholder.loadMovie() method loads the actual movie into the empty placeholder movie clip. The loadMovie() function doesn't always take effect immediately, so I had to make sure that applying the getBytesTotal() method produced a nonzero number before attempting to display the percentage loaded. A new initialSize variable was set to keep track of the initial value returned by the placeholder.getBytesTotal() method. Then a new loadStarted variable was initialized to false so it can be used to keep track of whether the movie has started loading. A new percent variable was initialized so it can be used to display the percentage that has loaded.

Next I added the following code to the Fig Leaf Software logo:

 onClipEvent(enterFrame){     // The placeholder.getBytesTotal() method will equal 4 the      // first time it is run      if (_root.placeholder.getBytesTotal() > 0) {         percent = Math.round ( (_root.placeholder.getBytesLoaded()/_root.placeholder.getBytesTotal())*1  00);      // Only send a valid percentage to the percent field because      // the loadMovie() doesn't always take effect immediately          _root.percentfield=percent+"%";          // Set the size of the indicator according to the          // percentage loaded          _root.indicator.bar._xscale = percent;      }  } 

If the placeholder.getBytesTotal() method is greater than 0, it could be 4, indicating that it hasn't even started loading yet, or it could be the actual file size of the game_368.swf movie. In either case, the percent variable is set to getBytesLoaded() divided by the value of getBytesTotal(), multiplied by 100 to convert to a percentage. The indicator bar's _xscale property is updated accordingly .

To determine whether the movie has started loading, and to set the loadStarted variable accordingly, I added the following code inside the onClipEvent(enterFrame) on the FLS logo movie clip:

 // If it hasn't started loading  if (!loadStarted){     // If something is loading or getBytesTotal() returns a      // different value this time      if (percent < 100  _root.placeholder.getBytesTotal() > initialSize){         // It has started loading          loadStarted = true;      }  } 

If the loadStarted variable isn't yet true, another if statement checks to see whether the percent variable indicates that the movie is loading or whether the placeholder.getBytesTotal() method returns a value greater than it did when the placeholder movie first started playing. If either evaluation is true, the loadStarted variable is set to true, indicating that the actual movie has started loading.

To check whether the actual movie is finished loading if the loadStarted variable is true, I added the following code inside onClipEvent(enterFrame) on the FLS logo movie clip:

 else {     // If it's finished loading      if (percent == 100){         _root.placeholder._visible = true;          _root.gotoAndStop(2);      }  } 

The percent variable is checked to see whether the movie is finished loading. If it is, the placeholder movie clip is made visible, displaying the actual movie, and the playhead in the preloader movie is advanced to frame 2 so that the preloader will not be displayed behind the actual movie.

Changing References to _root

Throughout the actual movie (as opposed to the preloader movie), references to _root now point to the preloader's main timeline rather than its main timeline. Everything still worked fine when I tested the movie in the Flash authoring software, but when it was loaded by the preloader movie, things didn't work. If I had changed all the references to _root in the actual movie to _root.placeholder, the same features wouldn't function when tested in the Flash authoring software. To make everything work in the authoring software as well as when loaded by the preloader, I had to use relative references. This required a lot of trial and error because I had lost track of how many levels below the main timeline each movie clip was. Some of the paths became _parent., some became _parent._parent, and some became _parent._parent._parent, depending on where they were in relation to the actual movie's main timeline. (See Figure 25.15.)

Figure 25.15. The finished product was quite different from the initial storyboard.

Note

When creating copies of the sound object, it is important to specify the target as _root so that all the sound objects can be controlled at once ”for example:

 radioSound = new Sound(_parent); 

Note

Comments in your ActionScript code won't increase the file size of the exported SWF movie, and it will help people understand how your movie works. As your movies become more complex, you will find that even you have difficulty remembering how your code functions. It is important to comment even the more basic aspects of your code so that other people can figure out how to make changes to it. The trace() function, which is similar to the alert() function in JavaScript, causes the Flash authoring software to print information to the Output window for debugging purposes. Although these statements will not show up in the Flash player, they will increase your file size unless you configure the authoring software to omit trace actions from the exported SWF file. To do so, select File Publish Settings, and, on the Flash tab, select Omit Trace Actions.