Sunday, 23 May 2010

Percentage preloader in Actionscript 3

A preloader gives the user feedback about the load progress of the swf application. It is good practise to keep the user informed of the download status when files sizes are large. I will create a simple preloader to display the load percentage of the swf which will be from 0 – 100%.

Step 1

Open up a new AS3 file and select the Text tool with dynamic text then drag a dynamic text field on the stage. Ensure the text field width is wide enough to hold four characters. Since we are using dynamic text, the numerals glyphs and the ‘%’ glyph will need to be embedded.

Step 2

Give your dynamic text the instance name: percent_txt.

Step 3

Select the dynamic text field and press F8 on the keyboard to convert into a movie clip. This will wrap the text field within a movie clip so it can be more usable. Give the symbol name: preloader and the instance name: preloader_mc.

Step 4

Open up your Actions panel and add the following code:

stop();

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void {
var p:Number = e.bytesLoaded / e.bytesTotal;
preloader_mc.percent_txt.text = Math.floor((p)*100)+ "%";
}
function onComplete(e:Event) {
this.gotoAndPlay(2);
}

The code above assumes any content to be preloaded to be place on the second frame.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP