Hello! I will be doing a series of Flash tutorials in this board over time. There will be no real rhyme nor reason for the tutorials as they are, meaning they won't lead to a certain project at the end. Instead I thought I would cover some basics, as well as things that are asked a lot, or that people seem to have difficulty with. Keep in mind that for most of these tutorials I will assume you have a general understanding of how to get around the Interface, and where to go to do certain things (i.e. make a new symbol, insert a frame, import to library, etc.).

Also I will be using Flash versions MX Pro 2004 and 8. These versions utilize Action Script 2.0, which is much different in many areas over the original AS 1.0 version.

However, as a lover of Flash version 5 (and subsequently AS 1.0) many of my coding tips and tricks will work just fine in AS 1.0 format. Keep in mind the error messages you may come across while testing as there are going to be small differences in the methods, and the error pop up will tell you what they are. So just pay attention to those if you are still using an AS 1.0 version of Flash.

For the first tutorial, I will cover the Preloader. Let's get started.

Goal: The goal of this tutorial is to introduce the basic methods for making and utilizing a preloader for a Flash Movie.

Why: Flash movies can vary in size, from a small navigation bar or image holder for a gallery, to an extensive RPG style game, to anything in between. Preloaders give site visitors something on the screen other than a blank page to let them know that the movie they are waiting for is actually doing something. It is not always necessary to use a preloader. If you can test your movie on a slow connection and an older machine and it loads just fine without a wait, you don't really need one.

How: Preloaders work in a very simple way. They basically look through your movie counting the total number of bytes the movie takes up, then they wait until every single byte is loaded by the visitors browser/player before they allow access to the first frame. There are thousands of different types of preloaders, from the bar loader which has a bar that fills up as the loading takes place, to a numerical percentage counter that counts the amount loaded, to anything in between. We will be making a numerical percentage loader.

The Build: Okay, let's get started. Open Flash and a new document. Change your settings to what ever you like (back ground color, width and height, FPS, etc.) We will make 3 layers, I name my layers for ease of use later. Let's make an Actions layer, a Preloader layer and a Labels layer, then go ahead and make a blank keyframe in each layer:

http://img180.imageshack.us/img180/3883/part1fr2.th.png (http://img180.imageshack.us/my.php?image=part1fr2.png)

Next, let's make some graphics. We will try to make this simple as well as functional. So I will put a graphic logo of my site and some "pretty-ness" to the frame. Keep it in the front of your mind that the more you add here the worse off you are going to be. (more to load, and the preloader should not have to load before it starts loading your movie.) Anyway, we will put these on frame 1 of the Preloader layer.

Now we need a place for the preloader to actually show it's count. Let's add a dynamic text box to the stage with a var name of "count". As a courtesy and to prevent whatever, I make my dynamic boxes not-selectable, with anti-aliased text for readability, and choose a font that is nice on the eyes. For this tutorial I am using the "broadway" font.

http://img469.imageshack.us/img469/7/part2nz9.th.png (http://img469.imageshack.us/my.php?image=part2nz9.png)

Okay, now that we have that done, we need to add one key frameframe to the preloader level. This will also bring over everything from frame 1 to frame 2 which is perfect, as we don't want to manually add it back in and hope we got it in the exact spots as frame one.

http://img469.imageshack.us/img469/3601/part3yr4.th.png (http://img469.imageshack.us/my.php?image=part3yr4.png)

Now, we need some action script. The first part will go in frame 1 of the actions layer:



var percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
var count = _root.percent +"% is now Loaded";


Two small lines declaring new variables.

The first tells Flash what the variable "percent" is. And it is the math that we need to figure out how much of the movie is loaded.

Math.floor() -- this tells the math formula inside the () to round DOWN to the nearest whole number if there is ANYTHING after the decimal point. Forget what you learned in school... For Math.floor if the answer is 5 it equals 5, it the answer is 5.1 it equals 5, if the answer is 5.5, or 5.9 it equals 5. Make sense?

getBytesLoaded() -- this is an internal code of Flash that will give a numerical equivalent to the total number of BYTES that has been loaded by the viewer so far.

getBytesTotal() -- again this tells Flash how many BYTES the entire movie is made up of.

/ and * mean divide and multiply, respectively.

The second variable tells Flash that "count" equals the first line PLUS the words % is now Loaded.

we use _root for anything we reference on the root level of the movie. Anything inside quote marks (") is considered a string, and will be displayed as it is.

Alright, now let's make a blank keyframe in Frame 2 of the Actions layer, and add this code to it:



if(percent == 100){
gotoAndPlay("play");
}
else{
gotoAndPlay (1);
}


This is your basic if/else statement. The first part (the if) tells the movie, IF "percent" is equal to 100 go to the frame labeled "play" and play the movie.

the second part (the else) tells Flash if percent does NOT equal 100 go back to frame 1 and start over. (not start over loading, but start over the playing.) This is why we made sure our graphics from frame one in the Preloader layer look identical to frame 2's graphics. (Otherwise they would appear to jump or glitch.)

Now add a blank keyframe to Frame 3 of the Actions layer and add this code to the frame:



stop();


Now, we have told the movie to go to the frame labeled "play" when it is completely loaded, but we don't have a frame labeled play yet!

Make a blank keyframe on Frame THREE of the Labels layer. And add a label called play there.

http://img478.imageshack.us/img478/6756/part4tr6.th.png (http://img478.imageshack.us/my.php?image=part4tr6.png)

Also, this is the frame where the rest of your movie would begin playing. For our tutorial just add a blank key frame to Frame 3 of the Preloader layer, and put some text on stage like "It's Loaded!" or something.

That's it! Really! That is all there is too it!

Now if you test this as is, you won't see much of anything, as we are only loading about 300 bytes give or take.

Go ahead, test it out! There are many other things you can do with this type of loader, perhaps later I will go over some other options of "loadable" things and how to implement them.

If you feel the need, I have attached a zip file with this tutorial inside as a Flash 8 .fla. Also a Flash MX Pro 04 .fla. You may download and take a look if it will help.

Until next time,

~~BLiZZ