How to Make a Preloader in Flash


Introduction: How to Make a Preloader in Flash

About: I like to draw, play my guitar, play sports, even though im kinda lazy. I'd like to think that i'm good at a lot of stuff, but you can decide.

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){


if(percent == 100){

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


Go to Frame 3.


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


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!



    • Creative Misuse Contest

      Creative Misuse Contest
    • Clocks Contest

      Clocks Contest
    • Water Contest

      Water Contest

    9 Discussions

    can i know why do i get NaN% in the dynamic text box when i tried to test the movie?

    1 reply

    You get the Not a Number NaN output because the author has used a lower case "l" instead of a capital "L" in the getBytesLoaded() function. You have getBytesloaded() when you really need getBytesLoaded().

    it was great, but you didn't actually tell us to make a text box with the text. you just said select the text tool and dynammic text.

    Say you're playing a game online. Its that bar that shows how much the game has loaded.

    While there are near limitless number of tutorials on this subject elsewhere on the net, there's nothing wrong with another. However I would point out that you need to specify which ActionScript you're using. There are a few design issues I would change too, but that is more personal preference so I won't go into it unless you wish...

    1 reply

    Freaky! I was just looking how to make a preloader earlier today and still didn't get it until now! Once again-Freaky.

    1 reply