Flex | Flash | Air | AS3
Basic flash preloader
March 20th, 2009 in FlashThis 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.