How to Make a Preloader in Flash

21,320

6

9

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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!

Be the First to Share

    Recommendations

    • CNC Contest

      CNC Contest
    • Make it Move

      Make it Move
    • Teacher Contest

      Teacher Contest

    9 Discussions

    0
    None
    fangyi

    7 years ago on Introduction

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

    1 reply
    0
    None
    jim.mcgarry.104fangyi

    Reply 4 years ago on Introduction

    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().

    0
    None

    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.

    0
    None
    lawizegparty8754

    Reply 10 years ago on Introduction

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

    0
    None
    karossii

    10 years ago on Introduction

    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
    0
    None
    thatmantheuser

    10 years ago on Step 5

    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