Friday, March 2, 2012

Flex: Accessing a function of a loaded/embedded SWF file

Flex is pretty powerful when it comes to handling and displaying data, but there times when I would still prefer using the WYSIWYG interface of Flash Professional, especially when I just want to create a simple animation. Therefore, I shall show you my method of accessing the functions of a loaded SWF today.

Here's the code of the Main Flex Application.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    creationComplete="creationCompleteHandler(event)">
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Embed a swf file
   [Embed(source="../assets/simpleAnimation.swf")]
   private var simpleSWF:Class;
   
   //Assign the source of the SWFLoader to the embedded swf
   protected function creationCompleteHandler(event:FlexEvent):void
   {
    swfLoader2.source = simpleSWF;
   }
   
   //Upon clicking on the button, access the swf files that
   //are loaded in swfLoader and pass a parameter into the
   //functions in the swf file.
   //Note: SWF file must be exported in as3 otherwise it
   //don't work.
   protected function clickHandler(event:MouseEvent):void
   {
    var tempSWFLoader:* = getSWFLoaderContent(swfLoader1);
    tempSWFLoader["startMovie"](txtInput.text);
    tempSWFLoader = getSWFLoaderContent(swfLoader2);
    tempSWFLoader["startMovie"](txtInput.text);
   }
   
   //Function that will access the given SWFLoader component
   //and return a direct pointer to the swf file so that you
   //can gain access to the functions inside.
   private function getSWFLoaderContent(tempSWF:SWFLoader):*
   {
    var tempSWFContent:*;
    var tempSWFContent1:*;
    tempSWFContent1 = tempSWF.content;
    tempSWFContent = tempSWFContent1.getChildAt(0);
    tempSWFContent = tempSWFContent.content;
    if(tempSWFContent)
    {
     return tempSWFContent; 
    }else{
     return tempSWFContent1;     
    }
   }   
  ]]>
 </mx:Script>
 <mx:VBox width="100%" height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <mx:HBox verticalAlign="middle"
      horizontalAlign="center"
      width="100%">
   <mx:Spacer width="100%"/>
   <!-- Load a SWF file on demand -->
   <mx:SWFLoader id="swfLoader1" 
       source="simpleAnimation.swf"/>
   <mx:Spacer width="100%"/>
   <mx:SWFLoader id="swfLoader2"/>
   <mx:Spacer width="100%"/>
  </mx:HBox>
  <mx:TextInput id="txtInput" text="5" restrict="0-9"/>
  <mx:Button id="btnAnimateNow" label="Animate Now!"
      click="clickHandler(event)"/>
 </mx:VBox>
</mx:Application>

And the script inside the SWF file that I am going to load.
In the 1st Frame
stop();
var count:Number;
function startMovie(tempNum)
{
 count = tempNum;
 init();
}

function stopMovie()
{
 this.gotoAndStop(1);
}

function init()
{
 if(count < 0)
 {
  movie_mc.text_txt.text = "";
  count = 0;
  stop();
 }else{
  movie_mc.text_txt.text = count;
  count --;
  this.gotoAndPlay(2);
 }
}
In the last Frame
init();
* Click here to view the demo of this example.
^ Click here for the source files of this demo.

2 comments: