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.

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (15)