Developing Flash Components for Flex

Posted on May 2, 2010 | No Comments

Adobe is about to release a development kit for Flex to create components by using Flash IDE. This kit may help developers add more interaction and animation effects into their flex components. Now, I will develop a small sample by using this tool.

Please notice that before reading this article you have to prepare your development environment accordingly. For more detailed information please visit AdobeLab . Then please set up this extension which helps you in creating components for Adobe Flex.

Well, let’s start. Now, open a new Flash CS3 document and create a new MovieClip sample. Then run the extension command from Commands > Make Flex Component. This helps us a standardized component for Flex. Take a look at our library and make an Actionscript 3 document according to the name you gave for the MovieClip. Mine is FFButton, so I jot down FFButton.as file which is look like that:

package {
import flash.events.MouseEvent;
import     flash.net.navigateToURL;
import   flash.net.URLRequest;
import mx.flash.UIMovieClip;

public class FFButtonUp extends UIMovieClip{
public function FFButtonUp       () {
addEventListener(MouseEvent.MOUSE_OVER,   over);
addEventListener(MouseEvent.MOUSE_OUT,   out);
addEventListener(MouseEvent.CLICK, go);
}
public function over(event:MouseEvent):void{
trace("over");
this.scaleY   =.90;
this.scaleX   =.90;
}
public   function out(event:MouseEvent):void{
trace("out");
this.scaleY   =1;
this.scaleX =1;
}
public function go(event:MouseEvent):void{
var request:URLRequest   =new   URLRequest("http://www.tolgaozdemir.net")
navigateToURL(request);
}
}
}

Then run your Flash CS3 file. If everything looks correct, you are ready to make a SWC file. Please do that.

Well, we are ready to switch off Adobe Flex. Create a new Flex Application and from the properties window jump to Flex Build Path and tab to the Library Path and Add the SWC file you have just created and press OK. That’s all.

My flex document looks like this:

<?xml version="1.0"   encoding="utf-8"?>
<mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"       layout="absolute" xmlns:local="*">
<local:FFButtonUp   x="300" y="300" />
</mx:Application>

Category: Flex Components
Tags: Flash Components

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.