As everybody well knows, a very important thing is to let the user know that our application’s SWF is loading. More so if the SWF is big and heavy, perhaps adding percentages and timescales of the loading phase.
With this tutorial I’d like to explain, as best as I can ( especially to those who find Actionscript difficult to digest ) how to create a good preloader.
It is fundamental, however, a good knowledge and familiarity with Actionscript 3.0 .
This article is an updated version of the article from May, 9th 2007 called:
loading an external SWF with Flash CS3
Let’s continue with the tutorial…
With Actionscript 2.0 you could monitor the loaded bytes using the getBytesLoaded and getBytesTotal methods of the MovieClip class. In this case you could use the methods cited in the Timeline (which is an instance of the MovieClip class) to monitor the loading of our SWF from a user’s point of view.
With Actionscript 3.0 the 2 methods have been moved from the MovieClip class to the URLLoader class, therefore if you tried to use the methods in the Timeline, Flash would generate an error. Hence, let’s say straight away that now a great method to create a preloader is to use a class specific to the classes Loader and URLLoader.
Suppose to have created our main SWF and that it’s ready to be published to the server. Let’s say the SWF is called ‘ index.swf ‘ . We need another SWF, which we’ll call ‘preloader’ to load indes.swf, it monitors the bytes loaded and shows the percentages to the user.
Creating preloader.fla:
I create an FLA saved as ‘ preloader.fla ‘ in the same folder as index.swf .
Inside the FLA I create the graphics for a simple preloader and I convert it to MovieClip calling it ‘ mc_preloader ‘
I drag mc_preloader from our library to the stage and I assign it to the instance name ‘ preloader_mc ‘ .
I right-click on mc_preloader in the library and a menu pops up, I select properties and a window pops up.
I activate the ‘ export for Actionscript ‘ and in the field ‘ Class ‘ I write: ‘ Preloader ‘ . This way I assign a class called ‘ Preloader ‘ ( which I about to write ) to preloader_mc on the stage.
Creating the Preloader class:
I create an AS file saved as ‘ Preloader.as ‘ structured as follows:
Code:
package
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
public class Preloader extends MovieClip
{
public function Preloader()
{
visible=false;
}
public function run():void
{
stage.frameRate=31;
visible=true;
x=stage.stageWidth/2-100;
y=stage.stageHeight/2-this.height/2;
addEventListener(Event.ENTER_FRAME,go);
}
private function go(e:Event):void
{
lines_0_mc.x--;
lines_1_mc.x--;
if(lines_0_mc.x<=-lines_0_mc.width)
lines_0_mc.x=lines_1_mc.x+lines_1_mc.width-3;
if(lines_1_mc.x<=-lines_1_mc.width)
lines_1_mc.x=lines_0_mc.x+lines_0_mc.width-3;
}
public function stopRun():void
{
this.removeEventListener(Event.ENTER_FRAME,go);
this.addEventListener(Event.ENTER_FRAME,scaleDown);
}
private function scaleDown(e:Event):void
{
e.target.alpha-=.05;
if(e.target.alpha<=0)
{
e.target.alpha=0;
e.target.removeEventListener(Event.ENTER_FRAME,scaleDown);
visible=false;
}
}
public function mostraProgresso(n:Number):void
{
progress_txt.text=n.toString()+' %';
}
}
}
Creating the Loading class:
I create an AS file saved as ‘ Loading.as ‘ structured as follows:
Code:
package
{
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.*;
import flash.net.URLRequest;
public class Loading extends MovieClip
{
private var url:String;
private var loader:Loader;
public function Loading()
{
init();
}
private function init():void
{
url='index.swf';
var request:URLRequest=new URLRequest(url);
loader=new Loader();
initListeners(loader.contentLoaderInfo);
loader.load(request);
}
private function initListeners(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(Event.OPEN,inizia);
dispatcher.addEventListener(ProgressEvent.PROGRESS,inCaricamento);
dispatcher.addEventListener(Event.COMPLETE,completato);
}
private function inizia(event:Event):void
{
preloader_mc.run();
}
private function inCaricamento(event:ProgressEvent):void
{
var percentuale:uint=(event.bytesLoaded/event.bytesTotal)*100;
preloader_mc.mostraProgresso(percentuale);
}
private function completato(event:Event):void
{
preloader_mc.stopRun();
addChild(loader);
}
}
}
Now I go back to preloader.fla and in the properties panel I assign the Document Class just by writing Loading .
Let’s analyse the classes and the Actionscript code:
When the SWF is launched, given that the Document Class is Loading.as, Flash will execute first the code within this class.
Therefore the SWF with the Loader class will be loaded and during the phases of:
- loading begins:
private function inizia(event:Event):void
- during loading:
private function inCaricamento(event:ProgressEvent):void
- loading ends:
private function completato(event:Event):void
we can tell Flash to execute some code.
The code to execute is made of the methods of the Preloader.as class we’ve just written:
when loading begins we call preloader’s run method
preloader_mc.run();
during loading we call the Preloader’s mostraProgresso method passing to it the result of loaded bytes divided by total bytes multiplied by 100
var percentuale:uint=(event.bytesLoaded/event.bytesTotal)*100;
preloader_mc.mostraProgresso(percentuale);
when loading ends ( hence index.swf has completely been loaded by preloader.swf) :
preloader_mc.stopRun();
and we add index.swf, which is now a MovieClip inside preloader.swf, to the Display Object otherwise it wouldn’t be visible:
addChild(loader);
Source files:
29-09-07, 10:34
).
Linear Mode
