Designing a Loader Screen

[ LiB ]

If a would-be player of your game is downloading your huge file through a fast broadband connection, his computer, most likely, won't have a problem streaming the file frame by frame. As he doesn't have the issue of the animation stopping in the middle of execution to download more information, he won't ever notice a stutter.

What about when the player is on a 56k modem, downloading at a significantly slower speed? The beautiful animation that is supposed to move at 24 frames per second may be moving as slow as 1 frame per second if the animation is heavy enough. Or even worse , the animation can play chunks at a time.

A smart thing to do to prevent the second scenario is to preload all of the information before playing it. This way, all the information in the frames is downloaded into your client's computer and can be played locally from his RAM instead of from the Internet.

Flash offers more methods for determining how much of your movie has loadedit also offers a method for determining how big a movie is. You can use this information to wait until the whole movie is downloaded before it's played. The following two methods return this information to you:

 movieClip.getBytesLoaded() 

and

 movieClip.getBytesTotal() 

As you can already guess, getBytesLoaded returns the number of bytes that have been already downloaded, and getBytesTotal returns the size of the whole SWF file.

So, if you think about it, when these two values are equal, they should be ready to play the movie with no problem, because the whole SWF would be on the client's computer.

You need to run all of the demos in this section from inside the Flash environment. Click on View, Test Movie, and then check the Show Streaming option. If you don't do this, you won't experience the downloading effect that we are trying to achieve here.

Open GDA_PROG14.1.fla in Flash and test the movie. What you will see here is a bar animation that grows continuously until the movie is loadedand then a huge sounds plays. If this were a slow connection without the loader code, the sound would play in bits and pieces with some major annoying breakupsno one wants this.

The animation plays from Frame 1 to Frame 12. I put the code in Frame 12, which makes it loop (to Frame 1) until the information is loaded completely. Check it out.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This demo shows you how to // add a simple progress bar to // your movie. // Compare the amount of bytes loaded against the // overall file size. When they are equal, we are // ready to play our movie. If not, we keep playing // our loadbar animation. if (_root.getBytesLoaded() == _root.getBytesTotal()) {         nextFrame(); } else {   gotoAndPlay(1); } 

NOTE

NOTE

The default include directory is usu ally X:\VSDirectory\VC\Include where X is the drive and VSDirectory is the directory where you installed Visual C++. All the C++ built-in headers are in that directory.

Every time Frame 12 is played, this condition is tested to see if getBytesLoaded is equal to getBytesTotal . If it is, the movie goes on to the next frame. If they are not equal, the movie returns to Frame 1, and will play again until Frame 12, where the condition is retested.

Now, if you remember how to get a percent amount from a part divided into a whole and then scale this value up by 100, then you're on the right track. My next demo, GDA_PROG14.2.fla, shows you how to incorporate this value into the displayand this can help calm a viewer's nerves.

Figure 14.1 shows how I set up the visuals for the file.

Figure 14.1. Displaying the percentage of the movie that has loaded

graphic/14fig01.gif


I have set up a textbox in the middle of the stage with a variable attached to it. This way, I can send the percent amount to be displayed. Take a look at the following listing to see the improvements.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // This demo shows you how to // add a simple progress bar to // your movie. // Display the percent amount of what's loaded loadDisplay = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100); loadDisplay += "%"; // Compare the amount of bytes loaded against the // overall file size. When they are equal, we are // ready to play our movie. If not, we keep playing // our loadbar animation. if (_root.getBytesLoaded() == _root.getBytesTotal()) {         nextFrame(); } else {         gotoAndPlay(1); } 

Right off you can see that I started to calculate how much has been downloaded. I'll break down this formula:

 // Display the percent amount of what's loaded loadDisplay = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100); 

When I divide the value returned by getBytesLoaded by the value returned by getBytesTotal , I get a decimal value that can be scaled up by 100 to yield a percent amount. This percent amount is the amount of the movie that has been downloaded. As there was a division, there is a big possibility that I don't have a whole number; this is why I rounded this figure.

For display purposes, I concatenated the percent symbol to the display.

 loadDisplay += "%"; 

I then compared how much was downloaded with the size of the fileif the amounts are equal, the movie proceeds to the next frame.

 if (_root.getBytesLoaded() == _root.getBytesTotal()) {         nextFrame(); } 

If they're not equal, the movie loops back to the first frame.

 else {         gotoAndPlay(1); } 

Wouldn't it be cool if you could have a bar visually representing the percent amount along with the numerical value? This requires some setup, but it can be done.

NOTE

TIP

You can change your streaming download speed when testing your movie by selecting your speed from the Debug menu.

Take a look at Figure 14.2 to see how much more visually appealing this load bar is.

Figure 14.2. The load bar

graphic/14fig02.gif


NOTE

TIP

You can take the loader Movie Clip from GDA_PROG14.3.fla and just paste it into the first frame of your movie and it will work. All the code is embedded into the clip, so you won't have to worry about moving separate pieces of it.

Open up GDA_PROG14.3.fla and test the movie in streaming mode. Don't you like it better this way?

Let's see how it's done. Double-click the loader Movie Clip on the first frame. The first thing you should notice is that this clip is comprised of four layers ; Display, Border, Bar, and Background. The Display layer has a dynamic textbox with a variable attached. The code uses this box to display the percent amount later on. The Border and Background are there only for decoration. The Bar layer, however, contains a Movie Clip. This is the Movie Clip that contains the code that I'll discuss here.

NOTE

NOTE

Note that the Bar Movie Clip was drawn from 0, 0. In other words, all the graph ics in the clip are to the right of its origin.This will allow us to scale the bar to one sideif it were drawn from the middle, the bar would scale symmetrically on both sides.This way, it will only scale to the right.

If you look into the Bar Movie Clip, you will find the following code:

 // Game Develop with ActionScript // By Lewis Moronta (c) 2003 // This code allows us to use // a bar to visually tell us // what percent the movie has // loaded... // Setup this code to execute all the time onClipEvent (enterFrame) {   // Calculate percent amount for display purposes   percentLoaded = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);   // Scale the bar with this amount   _xscale = percentLoaded;   // Add the percent sign and display it   _parent.loadDisplay = percentLoaded+"%";   // If we are ready, let's move on   if (_root.getBytesLoaded() == _root.getBytesTotal()) {     _root.nextFrame();   } } 

As I want to check up on the loading process constantly, I set up the following:

 // Setup this code to execute all the time onClipEvent (enterFrame) { 

Here I did the usual by calculating the percent amount for the display:

 // Calculate percent amount for display purposes percentLoaded = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100); 

I then scaled the bar to the current percent amount. This amount directly reflects how much of the movie has been downloaded. I have drawn the bar to the right of its registration point so that it can only scale to the right, not symmetrically on both sides. This completes the effect, but we're not done with the loader yet.

I then shoved the value into the textbox variable along with a percent sign:

 // Add the percent sign and display it _parent.loadDisplay = percentLoaded+"%"; 

After that, I tested to see if the movie was finished downloadingif it is, then it moves on to the next frame on the main Timeline.

 // If we are ready, let's move on   if (_root.getBytesLoaded() == _root.getBytesTotal()) {     _root.nextFrame(); } 

Not so hard, was it?

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net