Tuesday, May 19, 2009

Simple Preloader

First open a new flash document and make four layers. name the top one "Actions", Then the second down should be "Outline", Then "Text", and finally the bottom layer should be "Bar" Select the layer named Bar and get the rectangle tool. Now draw a rectangle. Select the outline and right click and cut it out. Then select the Outline layer then right click and press "paste in place".









Now convert the fill into a movie clip. Do this by selecting it and hitting the F8 key. Make sure it's a movie clip and name it Loadbar.














Now go to the text layer and select the text tool. Then select dynamic text from the properties inspector and draw a text box under you load bar that is about the same width as it. and give it an instance name of "percent" (without the quotes and the no capital letters). Also change the instance name of the fill color to "lbar" (without the quotes and the no capital letters)Once you have both the instance names in go to the actions layer and hit F9 on your keyboard. This will open the actions window. now type in this code:

stop();
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadbar);

function loadbar(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTotal*100;
lbar.scaleX=pcent;
percent.text="Loading... " + int(pcent)+ "%";
if(pcent==100){
gotoAndStop(2);
}
}

The first line stops the timeline where it is. The second line says that when the movie starts loading run the "loadbar" function. The third line makes a variable called "pcent" and makes it the percent of the bytes loaded of the movie. The fourth line makes the fill scale down to the percent loaded. The fifth line makes the text box say "loading... [percent loaded]%".
The sixth and seventh lines say that if the percent is 100 then go to frame 2 and stop there. then the two }'s close the if then the next one closes the function.

Now hit Ctrl + Enter to test the movie. If you hit Ctrl + Enter a second time once the window pops up it will simulate download so you can see your preloader working . If you want to do that put somthing after the preloader for it to load.

Have fun with your new preloader!

2 comments:

  1. how can I change the instance name of fill color to lbar.

    ReplyDelete
  2. If you have flash CS4 there will be a box for it in the upper left-hand corner. If you have CS3 the instance name box will be at the bottom left.

    ReplyDelete