Basic flash preloader
March 20th, 2009 in Flash | 14 CommentsThis tutorial demonstrates how to create a preloader in flash with actionscript 3 so that when you load files your users can have some indications on the process of the file’s loading.
The preloader will load an external swf file.
1. Create a new flash file (ActionScript 3.0) and save it as simple_preloader.fla.
2. Make the background color of the stage black and set the frame rate to 30fps. Let the size of the document 550×400 pixels. (This size must match the size of the content that you will load).
3. Insert 2 new layers so that we have now 3 layers.
Name the one at the top ‘actions’, lock it right now, name the second ‘text’ and the one at the bottom ‘bar’.
4. Select the text layer, take the Text Tool and in the property inspector set the text type to dynamic and set the font and size properties as you like. Position the text in the middle of the stage and give it an instance name of percent.
5. Select the bar layer and take the Rectangle Tool.
In the property inspector set its stroke to none and set its color to red. Position the rectangle beneath the text on the stage and make it 300×15 pixels.
Select the rectangle and convert it to a Movie Clip by pressing F8. Set its name to mcBar, its type to MovieClip and the registration point to top left and click OK.
With the rectangle still selected, set its instance name to bar.
6. Select the actions layer and open the actions panel. Copy the following code :
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("content.swf"));
function progressHandler(event:ProgressEvent):void
{
var ratio:Number = event.bytesLoaded / event.bytesTotal;
percent.text = Math.ceil(ratio*100).toString();
bar.scaleX = ratio;
}
function completeHandler(event:Event):void{
removeChild(percent);
removeChild(bar);
percent = null;
bar = null;
addChild(loader);
}
7. Let’s explain the code.
We’ve declared a Loader object that will load our external file which is contained in the URLRequest object.
Content.swf represents the path of the external file that we want to load.
Next we add listeners so that the loader object keep track of the loading process.
The progressHandler function is handling the PROGRESS event.
Inside this function we have declared a ratio variable that holds the ratio between the bytes that are already loaded and the total bytes.
Then we set the property text of our dynamic text to a String representing this ratio multiply by 100 to have the percentage.
Then we set the property scaleX of the movie clip bar to the value ratio. (in Actionscript 3 , 0.0 <= scaleX <= 1.0).
Finally the completeHandler function is handling the COMPLETE event by removing the text and the bar and setting their values to null so that they are not in memory anymore, and we add the loader to the display list.
8. Test the movie by pressing Crtl + Enter on Windows or Cmd + Enter on Mac. As you work locally on your computer the file will load very quickly so that you won’t see the preloader.
To see it you need to simulate a download. Select View > Download Settings and choose for example 56K . Next go to View > Simulate Download.
You should see the preloader in action :
and once your file finishes loading, you should see the content appear:
Jun 8th, 2009
[...] Basic Flash Preloader [...]
Aug 18th, 2009
many thanbks for the tuts, now up to the next step, adding it to the wesite.:(
Aug 28th, 2009
Good tutorial, but how to insert it into the Web page? Thank you.
Aug 28th, 2009
@K77 : What do you mean by “how to insert it into the Web page” ?
Just publish your file …
Aug 29th, 2009
I wanted to tell, what encodes put in the Web page for inserer the preloader?
thank you
Oct 7th, 2009
Hi and Thanks for the great and easy tutorial.
I’ve never needed to use a preloader before now. But I have a Flash website that is pretty big and takes a while to load the Opening.INDEX HTML
My biggest challenge is to figure out if I should add this code and scenes to my existing SWF that my HTML is loading … or should I create a SWF and a HTML using the PRELOADER (that you just taught me to make) and rename it INDEX.HTML?
Does this make sense?
Thanks in advance,
Rick
Feb 5th, 2010
perfect preloader, thx again
Feb 10th, 2010
hey do you guys happened to know of a AS3.0 preloader tutorial that uses the 2 Frames method like the old AS2.0 way?? I like this tutorial but somehow i faced some problem with loading external swf due to certain components and framework, and i need this fast hence i do not have the time to redo the framework…
Any help will be appreciated.
Mar 18th, 2010
nice piece of work, helped me much! gl
Mar 31st, 2010
it was good n very nicely breifed.
Thankyou
Apr 1st, 2010
//Hey I modified your code to make it fully dynamic and as light as possible i hope you don’t mind me
// posting my version of your code
var accordionTextField:TextField = new TextField(); // DYNAMICALLY create the textfield
var myFormat:TextFormat = new TextFormat(); // if you have more than one preloader you can set the format for the text
var loader:Loader = new Loader(); // constructor for the loader
var accordionSWF:URLRequest = new URLRequest(“swfs/accordion.swf”); // this is the swf you load
myFormat.color = 0×999999; // set the color
myFormat.size = 12; // set the size
myFormat.font = “Arial”; // set the font
accordionTextField.x = 266.3; // set the width position for the percentage loader (ideally in the center
accordionTextField.y = 471.9; // set the height position for the percentage loader (ideally in the center
accordionTextField.selectable = false; // can’t select it
accordionTextField.setTextFormat(myFormat); // sets the format from earlier
accordionTextField.antiAliasType = AntiAliasType.ADVANCED; // we need this baby clear = )
loader.load(accordionSWF); // initiate the loader with the url request
loader.x = 10; // this is where the swf width postion
loader.y = 351; // this is where the swf height position
addChild(accordionTextField); // adds the textfield you created to the stage
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
// progress event listener on loader
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
// complete event when it’s done loading
function progressHandler(event:ProgressEvent):void // the actual function here, what logic occurs
{
var ratio:Number = event.bytesLoaded / event.bytesTotal; // creates the ratio variable and sets the value
accordionTextField.text = Math.ceil(ratio*100)+”%”.toString(); // sets the dynamic textfield
}
function completeHandler(event:Event):void{ // function to remove the textfield
removeChild(accordionTextField); // remove it
}
addChild(loader); // add the swf you are loading
Apr 1st, 2010
sorry folks one minor change…
replace:
accordionTextField.setTextFormat(myFormat); // sets the format from earlier
with this:
accordionTextField.defaultTextFormat = myFormat; //set the format
sorry….
May 20th, 2010
how do i implement this in dreamweaver??????? i have been struggling for days to do it O.O
i have put my intro and the preloader SWF in the same folder and changed in the URLrequest lyne into the name of my own file.
- tried to copy the code of the demo site into dreamweaver, and tried my own code.
I think i am missing something here,
Im trying to make a flash intro doe my site.
If i click on the preloader SWF it works fine, but i just cant implement it correctly into dreamweaver CS4
May 29th, 2010
@Chris you would implement this inside your .fla with either external script or on the timeline.