BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Flash and Flex Integration

Posted by Shardul Singh Bartwal on March 31, 2008

Flex and Flash Integration
==========================

The Flex technology is based on the flash player. So how can be it difficult to get and access the content of any swf in Flex and reflecting the changes in the flash swf.Here I  am just  discussing the case  when  you   are  using  Action Script 3 version of the flash, and as all of us know that the Flex 2.0  and Flex 3.0  both uses Action Script 3.In depth we can say that in both cases we are using AVM 2. I have just created a swf in flash namely ‘ProAddRemoveApp.swf’. In this swf I am having two button with label ‘Add’ and ‘Remove’,and  their id in flash are ‘btnAdd’ and ‘btnRemove’.Also I am having  a MovieClip in Flash  with id ‘MC’.In flash on the click of Add button I am  creating a movieclip (red hexagonal),and adding that movieclip in an array and then attaching all items of the array to the ‘MC’ movieclip.Similarly on click of  Remove button I am  removing the last item  from the array and attaching the array to movieclip MC. Here In flash the name of my array is ‘arr’.  Now come to the Flex side,I have just loaded the earlier  discussed swf in my  Flex  Application. Here I am simply creating a MovieClip and pushing  all  content  of the swf in that.Now I can get  the object of the flash swf by just using a dot with this one movieclip.In my application I have added a handler with  each  these  two  flash button,which is just showing an alert message of item Added/Removed.Except this swf I am adding a flex button here with id ‘btnRemoveOfFlex’.Now this is flex button and I am  directly removing  item from the array ‘arr’ of flash on its click and hence the item is removed from flash Swf.

In the image below the upper red rectangle is the swf of flash and lower rectangle red box is showing a flex button.

 

 

flex_flash1.png

Hope you can get the clear idea after looking the code. I am just putting the

‘Flex’ code here for your better understanding.

*************************************************************************

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml
 width=”35%” height=”60%” layout=”absolute” creationComplete=”creationComplete()”
 backgroundColor=”#ffffff”
 horizontalAlign=”center” verticalAlign=”middle”
 horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
 cornerRadius=”10″
 >
<mx:Script>
 <![CDATA[
  import mx.controls.Button;
  import mx.controls.Alert;
  import flash.display.MovieClip;
  import flash.display.DisplayObject;
  
  private var addButtonCount:Number=0;
  private var mc1:MovieClip;
  
  private function creationComplete():void
  {
   mc1=MovieClip(mySWF.content);
   mc1.btnAdd.addEventListener(MouseEvent.CLICK,addHandler,false);
   mc1.btnRemove.addEventListener(MouseEvent.CLICK,removeHandler,false);
  }
  
  private function btnOfFlexHandler():void
  { 
   var len:int =mc1.arr.length;
   mc1.arr.pop();
   if(len >0)
   {
   mc1.MC.removeChildAt(len);
   }
  }
  
  private function addHandler(event):void
  {
   Alert.show(“Added from Flash”);
  }
  
  private function removeHandler(event):void
  {
   Alert.show(“Removed from Flash”);
  }
 ]]>
</mx:Script>
<mx:HBox width=”100%” horizontalAlign=”center”>
<mx:VBox width=”50%” horizontalAlign=”center”  verticalGap=”5″ verticalAlign=”top” top=”15″>
<mx:SWFLoader id=”mySWF” source=”ProAddRemoveApp.swf” autoLoad=”true”/>
<mx:Button id=”btnRemoveOfFlex” width=”150″ height=”30″ click=”btnOfFlexHandler()” label=”Remove From Flex”/>
</mx:VBox>
</mx:HBox> 
</mx:Application>

******************************************************************************************

Hope you will enjoy this.
Enjoy Flexing…………………………….

Advertisements

One Response to “Flash and Flex Integration”

  1. Kuldip said

    Thank you very much. Easy n simple way

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: