Preloader with Flash CS3 - advanced

[Flep]

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:

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:

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:

[hard_overclocker]

Hi, great tutorial Flep, but I think I have found a little error in it.
You say :

Now I go back to preloader.fla and in the properties panel I assign the Document Class just by writing Preloader .

but I think the Document Class should Loading.

Hope it helps, bye

[Flep]

Hi hard

ops, you are right.

Sorry, i'm going to fix it.
Thank you

[hard_overclocker]

Hi Flep, I have played with your preloader and it works fine, but I am trying to preload a xml file without success .
I am using URLLoader instead of Loader and I have set up the listener :

...
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
...

public function progressHandler(event:ProgressEvent):void
        {
            var procent:uint = (event.bytesLoaded/event.bytesTotal) * 100;
            trace(procent);
        } 

What this should do (in my oppinion) is print each value of procent as the content loads, but this doesn't happend. What happends is it prints 100 once.
People here : preloading XML- bytesTotal - Flash Kit Community Forums
have been saying that bytesTotal is always 0 during load and gets populated when load is complete (and this explains my result ).
What do you think, any ideea how to preload XML file ?

Thanx alot.

[Flep]

What's the XML size ?

[hard_overclocker]

Well since I was just testing the file size is small 6k.
Why do you ask ?

[Flep]

Try to make it like 200 k and retry please.

I notice that to handle bytesloaded of an XML file it must have a ' decent ' size.

[hard_overclocker]

Well it seems that the Simulate Download doesn't work propperly because when I put the files online, everything works fine (I also increased the xml size to 500k).

Bye

[Flep]

Nice to know
thx for sharing

[Stoater]

Hi Guys,

I have tried to use the preloader with a file I created, the file is named "Test.swf" it has a large photoshop file in it probably 5 mb, I set the document class to Loading and in the Loading.as file I set url='Test.swf' when I run the movie I get the following errors:

1120: Access of undefined property preloader_mc. preloader_mc.run();

1120: Access of undefined property preloader_mc. preloader_mc.mostraProgresso(percentuale);

1120: Access of undefined property preloader_mc. preloader_mc.stopRun();

I have

preloader.fla
Preloader.as
Loading.as
Test.swf

all in the same folder, what am I doing wrong, any help would be much appreaciated, I love the site by the way very well done, great tutorials.

Stoater