How to create a site loading external SWF with Flash CS3

[Flep]

Good day to all flashers!
To some of you the code of the two articles on how to load an external SWF and how to create a preloader seemed to be a bit confusing. So I decided to write this article.
A few days ago, I received an email from a user that explained his difficulties in migrating from the loadMovieNum (removed!) method to Actionscript 3.0.
At a certain point, the user affirms: "I realise flash sites assembling and exploiting, above all, examples that I download and readapt to my needs.
So I find myself lost with the code (also because I am a neophyte of Actionscript 2.0 - let's not talk about 3.0).
The loadMovieNum has now become a problem considering that I used the same technique for all my realizations in Flash.
In practice, I created a structure which on the action of a frame or button, was loading the external page using the method loadmovieNum".

This article would like to be a tutorial for all those 'flashers' who are in the same situation.
I created a mini site with 5 sections + homepage and a starting page, loading the external SWF (one per section).

Follow me and you will see how...

I create a FLA and save it as 'main.fla', which will be the main swf.
I add a keyframe into which I created a MovieClip containing the buttons (site's menu)
I also created a button 'home_btn' which will be the button to return to the site's homepage.
A starting MovieClip containing a logo and a button ENTER.
A MovieClip with an instance name 'preloader_mc' which is the preloader for each external SWF loaded.
Each MovieClip must be present on both keyframes. Because, if it would not be this way and they would be placed on just one frame, when we would recall them from the Document Class they would be inexistant. When we create a MovieClip on a keyframe, Flash memorise it as a local variable, so to the next keyframe, if we remove the MovieClip, Flash cancel it and free the memory.

I create a Document Class, an AS file saved as 'Main.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.events.*;
	
	public class Main extends MovieClip
	{
		private var sezioni_array:Array;
		private var bottoni_sezioni_array:Array;
		
		private var loader:Loader;
		
		private var swf:String;
		
		private var id:int=0;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stop();
			stage.frameRate=31;
			
			home_btn.visible=false;
			menu_mc.visible=false;
			preloader_mc.visible=false;
			preloader_mc.fill_mc.width=0;
			
			sezioni_array=new Array('http://www.flepstudio.org/swf/sito_tutorial/sezioni/home.swf',
			'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione1.swf',
			'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione2.swf',
			'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione3.swf',
			'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione4.swf',
			'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione5.swf');
			bottoni_sezioni_array=new Array(menu_mc.sezione_1_mc,menu_mc.sezione_2_mc,
			menu_mc.sezione_3_mc,menu_mc.sezione_4_mc,
			menu_mc.sezione_5_mc);
			
			aggiungiListenerEntra();
			aggiungiListenerTornaHome();
			aggiungiListenerMenu();
		}
		
		private function aggiungiListenerEntra():void
		{
			logo_mc.entra_mc.buttonMode=true;
			logo_mc.entra_mc.addEventListener(MouseEvent.MOUSE_DOWN,entra);
		}
		
		private function aggiungiListenerTornaHome():void
		{
			home_btn.addEventListener(MouseEvent.MOUSE_DOWN,tornaHome);
		}
		
		private function aggiungiListenerMenu():void
		{
			for(var i:int=0;i < bottoni_sezioni_array.length;i++)
			{
				bottoni_sezioni_array[i].id=i;
				bottoni_sezioni_array[i].addEventListener(MouseEvent.MOUSE_DOWN,cambiaSezione);
			}
		}
		
		private function entra(m:MouseEvent):void
		{
			this.gotoAndStop(2);
			caricaHome();
		}
		
		private function tornaHome(m:MouseEvent):void
		{
			id=0;
			loader.unload();
			removeChild(loader);
			rimuoviListeners(loader.contentLoaderInfo);
			caricaHome();
		}
		
		private function caricaHome():void
		{
			swf=sezioni_array[0];
			var request:URLRequest=new URLRequest(swf);
			loader=new Loader();
			initListeners(loader.contentLoaderInfo);
			loader.load(request);
			id=0;
		}
		
		private function cambiaSezione(m:MouseEvent):void
		{
			id=m.target.parent.id+1;
			loader.unload();
			removeChild(loader);
			rimuoviListeners(loader.contentLoaderInfo);
			caricaSezione(m.target.parent.id+1);
		}
		
		private function caricaSezione(n:int):void
		{
			swf=sezioni_array[id];
			var request:URLRequest=new URLRequest(swf);
			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 rimuoviListeners(dispatcher:IEventDispatcher):void 
		{
			dispatcher.removeEventListener(Event.OPEN,inizia);
			dispatcher.removeEventListener(ProgressEvent.PROGRESS,inCaricamento);
			dispatcher.removeEventListener(Event.COMPLETE,completato);
		}
		
		private function inizia(event:Event):void 
		{
			menu_mc.visible=false;
			preloader_mc.visible=true;
		}
		private function inCaricamento(event:ProgressEvent):void 
		{
			var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
			preloader_mc.fill_mc.width=n;
		}
		private function completato(event:Event):void 
		{
			addChild(loader);
			swappa();
			preloader_mc.visible=false;
			if(id!=0)
				home_btn.visible=true;
			else
				home_btn.visible=false;
			menu_mc.visible=true;
		}
		
		private function swappa():void
		{
			swapChildren(loader,menu_mc);
			swapChildren(home_btn,loader);
		}
	}
}

These are the 6 external SWF:
the homepage:


section1:


section 2:


section 3:


section 4:


section 5:


the site:


Let's analise the code.

Properties
an array in which I insert the url of the external swf to be loaded
private var sezioni_array:Array;
an array in which I insert the MovieClip's name of the menu
private var bottoni_sezioni_array:Array;
an instance of the Loader class
private var loader:Loader;
a string variable which will contain the swf's url to load (one included into the array sezioni_array)
private var swf:String;
a numerical variable which will contain the section's id to load (to find to right index into the array sezioni_array)
private var id:int=0;

Methods
init();
stop the timeline on the first frame
stop();
I impost the frame rate
stage.frameRate=31;
I impost all the buttons and the preloader as invisible
home_btn.visible=false;
menu_mc.visible=false;
preloader_mc.visible=false;
I tell the Movieclip 'fill_mc' placed inside the preloader_mc to have a width equal to zero
preloader_mc.fill_mc.width=0;
I populate the section's array with the url of each external swf to load
sezioni_array=new Array('http://www.flepstudio.org/swf/sito_tutorial/sezioni/home.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione1.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione2.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione3.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione4.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione5.swf');
I populate the menu's buttons array with the name of each MovieClip placed inside menu_mc
bottoni_sezioni_array=new Array(menu_mc.sezione_1_mc,menu_mc.sezione_2_mc,
menu_mc.sezione_3_mc,menu_mc.sezione_4_mc,
menu_mc.sezione_5_mc);
I call the methods which will add the needed listeners
aggiungiListenerEntra();
aggiungiListenerTornaHome();
aggiungiListenerMenu();

aggiungiListenerEntra();
I tell entra_mc to show the hand's mouse when the users roll over it
logo_mc.entra_mc.buttonMode=true;
I add a listener to the click of entra_mc which will call the function entra()
logo_mc.entra_mc.addEventListener(MouseEvent.MOUSE _DOWN,entra);

aggiungiListenerTornaHome();
I add a listener to the click of home_btn which will call the function tornaHome()
home_btn.addEventListener(MouseEvent.MOUSE_DOWN,to rnaHome);

aggiungiListenerMenu();
I add a listener to each menu's buttons using a cycle
for(var i:int=0;i < bottoni_sezioni_array.length;i++)
{
here I assign a runtime property to each MovieClip placed inside menu_mc, so that I can impost an id property with the respective id of the section to load
bottoni_sezioni_array[i].id=i;
bottoni_sezioni_array[i].addEventListener(MouseEvent.MOUSE_DOWN,cambiaSezi one);
}

entra();
I move the timeline to frame 2
this.gotoAndStop(2);
I call the function caricaHome()
caricaHome();

caricaHome();
I assign to the swf property (string) the value of the first index of the array sezioni_array (which contains the url of home.swf)
swf=sezioni_array[0];
I create an instance of the URLRequest class
var request:URLRequest=new URLRequest(swf);
I create an instance of a new preloader
loader=new Loader();
I call the function initListeners which will add the needed listeners to keep track of all the loading phase passing to it the value of the property contentLoaderInfo of loader
initListeners(loader.contentLoaderInfo);
I load the swf
loader.load(request);
I assign the property id equal to zero
id=0;

tornaHome();
I assign the value zero to the property id
id=0;
I unload the loader's content
loader.unload();
I remove the loader from the DisplayObject
removeChild(loader);
I call the function rimuoviListeners which remove all the Loader's listeners
rimuoviListeners(loader.contentLoaderInfo);
I call the function caricaHome()
caricaHome();

cambiaSezione();
I impost the value of the property id equal to the clicked menu's MovieClip's id
id=m.target.parent.id+1;
I unload the Loader's content
loader.unload();
I remove the Loader from the DisplayObject
removeChild(loader);
I call the function rimuoviListeners() which remove all the Loader's listeners
rimuoviListeners(loader.contentLoaderInfo);
I call the function caricaSezione() passing it the clicked menu's movieClip's id so that the correct sezioni_array index loads the swf
caricaSezione(m.target.parent.id+1);

caricaSezione(n:int);
I assign the swf property (string) the value of the array sezioni_array's id (index equal to the clicked menu's MovieClip's id (menu_mc) passed by the function cambiaSezioni)
swf=sezioni_array[id];
I create an instance of the URLRequest class
var request:URLRequest=new URLRequest(swf);
I create a new instance of Loader
loader=new Loader();
I call the function initListeners which will add the needed listeners to keep track of all the loading phase passing to it the value of the property contentLoaderInfo of loader
initListeners(loader.contentLoaderInfo);
I load the swf
loader.load(request);

initListeners();
I add the listeners needed to keep track of the 3 principal phases to load the external swf
dispatcher.addEventListener(Event.OPEN,inizia);
dispatcher.addEventListener(ProgressEvent.PROGRESS ,inCaricamento);
dispatcher.addEventListener(Event.COMPLETE,complet ato);

rimuoviListeners();
I remove the Loader's listeners
dispatcher.removeEventListener(Event.OPEN,inizia);
dispatcher.removeEventListener(ProgressEvent.PROGR ESS,inCaricamento);
dispatcher.removeEventListener(Event.COMPLETE,comp letato);

inizia();
this code is executed by Flash each time an external swf starts to load
I impost the menu to invisible
menu_mc.visible=false;
I impost the preloader to visible
preloader_mc.visible=true;

inCaricamento();
this code is executed by Flash each time that an external swf is loading and so I can keep track of the bytes loaded and let the user know
var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
I assign to the width of fill_mc (placed inside preloader_mc) the value of the variable n
preloader_mc.fill_mc.width=n;

completato();
this code is executed by Flash each time that an external swf has finished loading
I add the loader (containing the external swf as a MovieClip) to the DisplayObject (otherwise it would not be visible)
addChild(loader);
I call the function swappa() which will change the depth of loader, menu and home_btn as loader has been the last one loaded and the menu would not be visible
swappa();
I impost the preloader_mc as invisible
preloader_mc.visible=false;
if the property id is equal to zero, I impost home_btn visible
if(id!=0)
home_btn.visible=true;
otherwise I impost home_btn invisible
else
home_btn.visible=false;
I impost the menu always visible
menu_mc.visible=true;

swappa();
I swap the loader's depth (at this moment the highest one) with the menu_mc depth
swapChildren(loader,menu_mc);
I swap the home_btn's depth (placed under the loader) with the loader's depth
swapChildren(home_btn,loader);

NB: To add section:
- add the url to the external swf of the section to the sezioni_array
- create the swf of the section
- add a button inside menu_mc as the other ones
Source files:

[xoxo]

Hello everybody!

Congratulations for this great site! It's amazing for learning AS3!!! Good Job!!!

This example is very useful example and works very well!

I would like to know if I can insert a video in one of the loaded movies. I have tried and I can't see it.

Is that possible?

Will be nice...

Have a nice day!!!

[Flep]

Hi xoxo and welcome

How do you display the video ? FLVplayback component ?
More info please.

[xoxo]

Hello Flep,

Yes, with a FLV component inside the swf. Let's suppose one button is for a video presentation for the web or something similar... Will be nice if this could work also.

Best regards!

xoxo

[Maldor]

xoxo all you have to do is take one of the swfs that is loaded, eg sezione1.fla and add another frame to the timeline, then drag an instance of the flv component to the stage and position it, go to the parameters panel or compontent inspector and change the settings...you can change the colour , skin etc....but then just add the http: address in the cource section and voila its done.....if this aint clear attached is section one of fleps great and very useful tut with a flv player embeded and working.......the vid is set to auto play so you can jsut take a look at what i did.........thx flep!....well i cant post it in here casue the fla exceeds the size limit of the post....just drop me a message here if you are still having probs with this and i can send you off the example........

[Maldor]

sorry i meant to say add another layer on the timeline and not frame.......

[xoxo]

Thank you Maldor, I have added the video in a new layer and the source taken from http... and now it works.

Thanks everybody for this nice community!

[2simple]

hi!
this tutorial and this whole site is so great! it helps me alot to learn.

i have a question about this tutorial. how can i ad a subnavigation (2 level) to the main navigation? i am sorry for this question, but i am a flash newbie.

a subnavigation, which just is visible for example in section 2. a function like the home button.

would be great if someone can help.

[Flep]

Hi 2simple and welcome...

hmmm... not possible with that script.

[2simple]

hello flep and friends!

me again!
thanks for your answer.
this time i would like to know, how i can ad a html link to the navigation. is this possible?

happy coding!
2simple