Loading external swfs using multiple buttons

[poundcake]

I'm new to AS3 and really enjoying the tweening engine. Unfortunately I'm a tad out of my element when it comes to loading swfs and I can't quite grasp what I would like to achieve using the LoaderMax engine.

 

Essentially I would like to have multiple buttons that will load external swfs. I found this code useful for what I was trying to achieve, though I don't know if its the most effecient way...

 

var Xpos:Number = 50;
var Ypos:Number = 180;
var swf:MovieClip;
var loader:Loader = new Loader();

var defaultSWF:URLRequest = new URLRequest("swfs/example1.swf");

loader.load(defaultSWF);
loader.x = Xpos;
loader.y = Ypos;
addChild(loader);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Btns Universal function
function btnClick(event:MouseEvent):void {

removeChild(loader);
var newSWFRequest:URLRequest = new URLRequest("swfs/" + event.target.name + ".swf");
loader.load(newSWFRequest);
loader.x = Xpos;
   loader.y = Ypos;
addChild(loader);
}
// Btn listeners
example1.addEventListener(MouseEvent.CLICK, btnClick);
example2.addEventListener(MouseEvent.CLICK, btnClick);
example3.addEventListener(MouseEvent.CLICK, btnClick);
example3.addEventListener(MouseEvent.CLICK, btnClick);

 

However, I would like to incorporate the tweening engine to alpha in the images similar to this past forum post below. My knowledge of syntax is weak and I'm just not sure how to reference the container. It would be great to have specific control for each button.

 

Any help would be immensely appreciated. Thanks!

 

viewtopic.php?f=6&t=4693&p=18813&hilit=load+external+swf#p18813

 

op();
   import com.greensock.*;
   import com.greensock.loading.*;
   import com.greensock.easing.*;
   import com.greensock.events.LoaderEvent;

   example1.addEventListener(MouseEvent.CLICK, btnClick);   	
   example1.buttonMode=true;

   var loader:SWFLoader =new SWFLoader("swfs/example1.swf",{container:this,x:150,y:0,alpha:0,name:"swf1",onComplete:completeHandler});

   trace(loader);
   function btnClick(e:MouseEvent) {

         loader.load();

   }

   //this function was nested in navOver I moved it out
   function completeHandler(e:LoaderEvent):void {
      TweenLite.to(e.target.content, 1, {alpha:1});
   }


   function navOut(e:MouseEvent):void {

         TweenLite.to(loader.content, 1, {alpha:0, onComplete:disposeLoader});

   }

   function disposeLoader() {

      loader.unload();

   }

[Carl]

try something like:

 

 

 var loader:SWFLoader;


   function btnClick(e:MouseEvent) {
         loader  =new SWFLoader(e.target.name + ".swf",{container:this,x:150,y:0,alpha:0,name:"swf1",onComplete:completeHandler});
         loader.load();

   }


   function completeHandler(e:LoaderEvent):void {
      TweenLite.to(e.target.content, 1, {alpha:1});
   }

 

here you are re-using or re-creating the same loader over and over.

 

alternately you could create loaders for each btn/swf and then tell each button what loader to control:

 

var homeLoader:SWFLoader = new SWFLoader("home.swf", {add props here});
var newsLoader:SWFLoader = new SWFLoader("news.swf", {add props here});
var aboutLoader:SWFLoader = new SWFLoader("about.swf", {add props here});

home_mc.loader = homeLoader;
news_mc.loader = newsLoader;
about_mc.loader = aboutLoader

 

then you could do:

 

var currentLoader:SWFLoader;

function btnClick(e:MouseEvent) {
//if something is already loaded... get rid of it (if you want)

if(currenLoader){
//currentLoader.unload()
//or fade it out via TweenMax.to(currentLoader.content, 1, {autoAlpha:0})
}


         currentLoader = e.target.loader;
         currentLoader.load();

}

function completeHandler(e:LoaderEvent):void {
      TweenLite.to(currentLoader.content, 1, {alpha:1});
   }

 

 

start with the first approach and see if it gives you any trouble.

I didn't have time to test the second option so consider it more of a theory than bulletproof code.

[poundcake]

Thanks for the reply. I apologize as I don't think I was clear but what I was aiming to do was for multiple buttons to load in external swfs but replace one another, similar to what is achieved in my first post.

 

The code below loads one on top of another, atlhough I'm not entirely sure if what I have is correct.

 

   stop();
       import com.greensock.*;
       import com.greensock.loading.*;
       import com.greensock.easing.*;
       import com.greensock.events.LoaderEvent;

       pic1.addEventListener(MouseEvent.CLICK, btnClick);   
       pic2.addEventListener(MouseEvent.CLICK, btnClick);   
       pic1.buttonMode=true;	   
       pic1.buttonMode=true;

       var loader:SWFLoader;

       function btnClick(e:MouseEvent) {
             loader  =new SWFLoader(e.target.name + ".swf",{container:this,x:150,y:0,alpha:0,name:"swfs/",onComplete:completeHandler});
             loader.load();

       }

       function completeHandler(e:LoaderEvent):void {

            TweenLite.to(e.target.content, 1, {alpha:1});
       }

       function navOut(e:MouseEvent):void {

             TweenLite.to(loader.content, 1, {alpha:0, onComplete:disposeLoader});

       }

       function disposeLoader() {

          loader.unload();

       }

[Carl]

ok. i see what you mean.

 

modify your button click code like this:

 

     function btnClick(e:MouseEvent) {
		if(loader){
			loader.dispose(true);
			}
             loader  =new SWFLoader(e.target.name + ".swf",{container:this,x:150,y:0,alpha:0,name:"swfs/",onComplete:completeHandler});
             loader.load();

       }

 

now the previously loaded swf will be removed when you load a new swf

[poundcake]

This works great, thanks! I'm learning from your 2nd example as well.

 

Cheers!

[sondanz]

I am doing something similar, where I load an external swf.

 

Carl's code was very helpful.

 

But now I want to tween that external swf (just move it to the left) after it loads in. I am having no luck so far, but I feel like I'm pretty close. Any suggestions are greatly appreciated!

 

// import the tween engine
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.loading.*;
//import com.greensock.events.LoaderEvent;
//import com.greensock.loading.display.*;

// function to load the external morph.swf
var morpher:LoaderMax=new LoaderMax({name:"morpher"});
function loadMorph():void{
morpher.append(new SWFLoader("morph.swf", {name:"morph", container:this, x:200, y:0}));
morpher.load();
TweenLite.to("morph", 1, {x:"-200", ease:Expo.easeOut});
}

// main timeline
var timeline:TimelineLite = new TimelineLite();
timeline.appendMultiple([
TweenLite.to(mc1,						1, {x:"255", ease:Expo.easeOut}),
TweenLite.to(mc2,						1, {x:"-100", delay:.5, onComplete:loadMorph})]);

stop();

[sondanz]

Finally figured this out. I got rid of "this" and replaced it with a mc called "holder".

 

 

// function to load the external morph.swf
var morpher:LoaderMax=new LoaderMax({name:"morpher"});
function loadMorph():void{
morpher.append(new SWFLoader("morph.swf", {name:"morph", container:holder, x:200, y:0}));
morpher.load();
TweenLite.to(holder, 1, {x:"-200", ease:Expo.easeOut});
}

[Carl]

great sondanz. thanks for posting your solution. It saves us time and could very well help someone else in the future.

 

enjoy LoaderMax

 

Carl