Create a Flash preloader using ActionScript

1. Start creating a new flash document about 500x300 dimensions. Save it as preloader.fla

2. Insert a new layer. Name the first layer content and the second actions.

3. In the first frame of the content layer do the following:

3.1. Using the Text Tool (T) insert a new textfield. Set font: Arial, size 16, bold and color #00FFFF. Choose Dynamic Text and give it an instance name of loaded_txt like in the next picture.

3.2. Select the Rectangle Tool (R). In the bottom of the Tools panel choose Set Corner Radius (see in the picture below). In the Rectangle Settings window set 5 for Corner radius and click Ok button. Now in the Properties panel set black #000000 for Stroke color and #00FFFF for the Fill color.

3.3. Now draw a rectangle on the Stage with width 202 and height 12. Double-click the rectangle to select both the Stroke and the Fill and set X:150, Y:200.

3.4. Now click outside the rectangle and then click the fill once (you want to select only the Fill of the rectangle). Choose Modify >> Convert to Symbol (F8). In the Convert to Symbol that appear choose MovieClip as type and give it a name of preloaderMC. Click Ok button. Then go to the Properties panel and give it an instance name of preloader_mc.

4.Great! Now go to the second frame of the content layer. Click it to select it, then

right-click and choose Insert Keyframe (F6). Insert here the bigest picture you have on the

computer: File >> Import >> Import to Stage (Ctrl+R).

5. Now go to the first frame of the actions layer open the Actions panel (F9) an put the

following ActionScript code:

stop(); // to stop the play head to this first frame
// create a new MovieClip for displaying for being mask for the the preloader and set some

properties for it
this.createEmptyMovieClip("mask_mc",1);
preloader_mc.setMask("mask_mc");
mask_mc._x = 150;
mask_mc._y = 200;
var total:Number = _root.getBytesTotal(); // to keep the total bytes of the flash movie
// the begining coordinates of drawing from mask_mc
var X:Number = 0;
var Y:Number = 0;
mask_mc.lineStyle(1,0x000000,100); // set the lineStyle for the mask

mask_mc.onEnterFrame = function(){
loaded = _root.getBytesLoaded();
this.clear();
var percent:Number = Math.floor((loaded/total)*100); // percent of loaded bytes
if(loaded != total){
// display the percent of loaded bytes
loaded_txt.text="Loading . . . "+percent+"%";
// drawing the mask
this.beginFill(0x000000);
this.moveTo(X,Y);
this.lineTo(X,Y+12);
this.lineTo(X+(percent*2),Y+12);
this.lineTo(X+(percent*2),Y);
this.lineTo(X,Y);
this.endFill();
}else{
_root.gotoAndStop(2);
this.removeMovieClip();
}
}

6. Good job! Now just test your movie (Ctrl+Enter). Hope this tutorial really hepls you improve your flash skills.

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by trenton , September 03, 2007

it is not working the laoding bit is not laoding

written by harun , September 08, 2007

working great. checked.

written by adrian , September 27, 2007

great help 10x

written by larrybn , October 09, 2007

Good tutorial, but things aren't explained that well, it's more like you do this, that, and the other and then this happen, instead of you do this because, and this happens because. Still useful though.

written by colin , October 14, 2007

Everything Keeps Flashing LIke Crazy When I Test It I've tried to redo this two times still happens

written by AnaSt , October 15, 2007

For each layer you should have only two frames. Assure you dont't have somewhere three ore more frames.

written by vishal , December 04, 2007

its not working in flash 8.
When i select dynamic text, instance field is no showing.

written by The Ugly Duckling , December 04, 2007

I've done everything you've told me, this is the worst tutorial ever, doesn't work, who ever said it does work is a geek, who edits the code and doesn't even thinks he's edited it. And has no life apart from looking at a computer screen

written by The Beautiful Swan , December 07, 2007

you guys are a bunch of retards.

when you export, you have to simulate download.

written by vishal , December 10, 2007

I am talking about the following tutorial.

Tutorial : "Create a Flash preloader using ActionScript"

Its not working in flash 8.
When i select dynamic text, instance field is not showing to me.

written by sarath , December 11, 2007

I would like you to introduct me about some code that use for in flashf because now I'm study flash 8.0 but I don't understand about some code.
please tell me more.
good by:
sarath

written by christu , December 26, 2007

i can't run the above code in macro media flash 8

written by hayley , February 11, 2008

it didnt work...make it easier haha

written by hayley , February 11, 2008

IT DONT WORK !

written by Soona , April 15, 2008

when i click edit button from webform flash should run .

1. webform having a two textbox name of two textbox is (txtwidth, txtheight)
2.This tools should goes to xml and xml goes to flash
My concept:
i need example for flash image resize in flash .
so, i need to implement webform,xml,css,and flash

so , pls reply soon.

written by Apollo , June 19, 2008

This doesn't work in Flash Player 10. Way to go!

written by RF , July 15, 2008

how would I emplement that code with this code I am going to put bellow?? I bought a preloader on here that does a cool animation but doesn't have a percent loaded.....I added a new layer and created a dynamic text box and created a var for it to refrence to in the code but it didn't work so now i'm starting at step one....here is the code that was given to me with the preloader...

_root.myPercentLoaded = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);

written by digitallybertypoo , September 09, 2008

"you need to register to download the FLA file"

I have registered and could not find the FLA file, I am sorry but I think this is really sad.

written by DanielRo , September 09, 2008

The file is there, you just missed it.
After you register, revisit this article and you will find the download link where the register link was placed.
And stop being sad

written by fasil , September 25, 2008

it dont wok

written by akhil , February 05, 2009

action script all how to make

written by TESTMAN , February 23, 2009

WOW SUPER COOL
Thanks so much.... first preloader that works

written by gmadi , June 30, 2009

very good.....

written by saathish Kumar , July 07, 2009

Its not WOking Properly

written by gowda , July 21, 2009

hello if i add the loding image in 1sceane and banner animation in 2scene how to stop the loding image after banner comes.it will play second times also please help me i need to add to my work actually iam working please help me

written by James B , July 31, 2009

why spend so long being detailed about the simple first steps, then stumble into a jumbled mess at the end?

written by ardavanskii , August 22, 2009

Best goddamn preloader i have found on the internet! I have searched for 2 days straight, finally one that works! Thanks mate!

written by i00_000i , August 30, 2009

A brilliant preloader tutorial.
worked perfectly for me
the only problem was the author forgot 2 comment the third line which causes the debugger to show 3 errors. just comment it and it works.
a copy of commented line is shown below(the last Line shld b commented)

stop(); // to stop the play head to this first frame
// create a new MovieClip for displaying for being mask for the //the preloader and set some

//properties for it

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (28)