AS3: Main
AS3: Simple Preloader, Step By Step
Step 1
Create your movieclip and textfield. For this recipe, you'll need a simple rectangle, and a dynamic textfield
a) Draw your rectangle, to the width you wish it to be when fully loaded. Remove the outline by double-clicking on it and pressing delete.
b) Select the rectangle, and right-click>Convert to Symbol. Select Movie Clip, and give it a name like loadBar. Click OK.
c) With your new MC still selected, use the property bar (CTRL+F3) to give it an Instance Name. My example uses lbar
d) If you wish your bar to load from left to right, as opposed to outwards in both directions from the middle, follow steps e - g
e) Double-click your new MC to enter Edit mode
f) Select the rectangle, and drag it so that the left-hand end is on the little cross (MC registration point, 0,0).
g) Exit Edit mode by double-clicking anywhere except the rectangle
Now for the textfield. Back on the main Stage
a) Select the Text tool (T), and in the Properties bar, select 'Dynamic Text' from the dropdown.
b) Drag yourself a textbox at the desired position above or below the loadbar
c) Select it, and in the Properties Bar, give it a name for reference. My example uses lpc
d) If you want it to look professional, click the 'Embed' button on the Properties bar, select 'Numerals' from the list, and type % in the 'include these characters' box below. Click OK to close the embed window
OK. On to the Actionscript. Select frame 1 on the main timeline, and add this code:
//Import the required assets
import flash.display.*;
//Stop the playhead while loading occurs
this.stop();
//Create a listener to call the loading function as the movie loads
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PL_LOADING);
/*This is the main function, basically it grabs the total and loaded bytes,
calculates a percentage, and displays it by stretching the bar and adjusting
the textfield display. If your bar/textbox instancenames are NOT lbar/lpc,
you'll need to adjust this code to match your instance names*/
function PL_LOADING(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTot al*100;
//Stretch the bar
lbar.scaleX=pcent/100;
//Display the % loaded in textfield
lpc.text=int(pcent)+"%";
//If the movie is fully loaded, kick to the next frame on the main timeline
//You may wish to change the gotoAndStop(2) to a gotoAndPlay(2)
if(pcent==100){
this.gotoAndStop(2);
}
}
That's it. Just start your movie on frame 1, rather than frame 2, on the main timeline. If you've already made your movie, you can shift all frames by selecting the first frame, SHIFT-Clicking the last frame, and dragging them all to the right by one frame (yeah, I'm sure most of you know this already, but there's no harm in mentioning it)
You can test your preloader offline, by pressing CTRL+ENTER twice. While in that mode, you can use the View>Download Settings to simulate download speeds ranging from 14.4 kbps modem, up to a T1 line.
If you don't want to spend the time learning this or creating the necessary assets, there are two versions of the source. Version as of this tut is here, and there's also a version with a Play button on the second frame over there.
If you're interested in expanding further, or adding more glitz to your preloader, consider using the pcent/100 to manipulate the playhead in a 100-frame MC. It's also worth checking out the other triggers for ProgressEvent in the Flash Help files, for more information on the subject.
Feel free to add your own approach to preloader to this thread
