Introduction: How to Make a Preloader in Flash

By

I decided to make this i'ble because you CANNOT BELIEVE how many people ask, "omgzorz how does i make flash!1!!!one!" It's really annoying. All right, let's get started.

Stuff you need:
Flash (I'm using CS3, but you can use MX-CS4)
A computer
A trial of flash/full copy (which you can get here)

Obviously, open Flash and make a new Flash file. I'm using Actionscript 2, BTW.

Step 1: Adding Layers

First, we have to add 2 layers to the timeline. One named "Actions" on top, and one named..."Text" or "Bar" or "Stuff".

Next, we need to add one Keyframe to the Actions layer, and one Frame to the other layer.

Then take the Text tool(T), and select Dynamic Text from the drop-down box in the properties box, it probably has "Static Text" selected already. Now, draw a rectangle with the Rectangle tool(R). make sure fill isn't white.

Make the fill of the rectangle you just made a Movie Clip by clicking on it once and and pressing F8. Name it, and make sure "Movie Clip" is selected and the Registration Point is in the top left before you press OK. THIS PART IS IMPORTANT Select the movie clip you made, and in the properties box, you'll see a text box that says "Instance name". Type in loadBar. Press Enter.

Then, select the Dynamic Text box you made earlier, and go down to the Properties Box. You should see the instance name text box again, click on it. This time, type in textBox. Press Enter.

Step 2: Coding Time!

Now, go on the "Actions" Layer. Click the first frame. Press F9 and TYPE in(DON'T joust copy and paste, you lazy bum. If you do, you'll never really learn this, which is the point.):

percent = Math.round(getBytesloaded()/getBytesTotal())*100;
textBox.text = percent + "%";
loadBar._xscale = percent;

I'll explain this code line by line.

percent = Math.round(getBytesloaded()/getBytesTotal())*100;

Creates a variable that divides the percent of the flash loaded already by the total size of the flash file, then multiplies it by 100 and rounds it.

textBox.text = percent + "%";

Displays the variable percent in the Dynamic Text box you made.

loadBar._xscale = percent;

Changes the x scale of the rectangle according to the percent.

Step 3: More Coding!

Now, click the second Keyframe of the "Actions" layer. Press F9. TYPE this in. Again, don't copy and paste, you won't learn it. It's not even that much. Lazy bum.

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

Explanation:

if(percent == 100){

This says if(condition) the variable percent is equal to 100(flash is done loading), then...

gotoAndPlay(3);

Go to Frame 3.

}else{

If the if statement isn't true, then...

gotoAndPlay(1);

Go to frame 1.

}
Closes the if statement.

This code makes a "loop" until the flash is fully loaded. If the variable percent isn't equal to 100, it keeps on going back to frame one until it is. It's pretty much just checking if the flash is loaded until it is.

Step 4: One More Step...

Now, just select frame 3 and press F6. Add your content, whether it be an animation, a website, or a picture. GOOD JOB! You just made a preloader! :D

Step 5: Done!

Enjoy your preloader, comment about how great this was, or how bad it was. Tell me any problems you had at all. Rate, please.

Some upcoming tuts might be...oh, i don't know. making a game. a website. nobody knows...

Thanks for viewing!