third

Flash Symbol as a Flex Component

« Getting back to it ||  blog  ||  Flex ActionScript Bubble Sort »

September 29, 2009

This is a simple Tutorial on how to use a Flash CS4 Symbol as a Flex component in Flex Builder and Flex projects. I will show quickly how to use a Flash component in Flex.

First create a flash symbol

Go into Flash CS4 create a flash symbol, for this example I created a button movie clip, not a flash button but a movie clip of a button which uses two frames and

nextFrame();
prevFrame();

to do the over and out states. There is a background on the first layer, with an over state darker background. The second layer contains the btnLabel a dynamic text field. The third layer contains one line of ActionScript to make sure the video doesn't continue playing infinitely.

stop();

Next create the ActionScript file for the symbol export

To do this you associate the .as file with the symbol by right clicking on the symbol in your library and going to properties, then check Export for ActionScript in the class field type the name of the class, and nothing should be in the Base class as it is specified in the class.

Here is the ButtonComponent ActionScript

package com.geothethird.components {
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextFieldAutoSize;
 
 import mx.flash.UIMovieClip;
 
 [Event(name="click",     type="flash.events.Event")]
 
 public dynamic class ButtonComponent extends UIMovieClip {
	 public function ButtonComponent() {
		 super();
		 addEventListener(MouseEvent.MOUSE_OVER,btnHandle);
		 addEventListener(MouseEvent.MOUSE_DOWN,btnHandle);
		 addEventListener(MouseEvent.MOUSE_OUT,btnHandle);
		 btnLabel.autoSize=TextFieldAutoSize.LEFT;
		 btnLabel.selectable=false;
		 mouseChildren=false;
		 buttonMode=true;
	 }
	 private function btnHandle(e:MouseEvent):void {
		 switch (e.type) {
			 case "mouseOver" :
				 e.target.nextFrame();
				 break;
			 case "mouseDown" :
				 dispatchEvent(new Event("click"));
				 break;
			 case "mouseOut" :
				 e.target.prevFrame();
				 break;
		 }
	 }
	 public function set label(s:String):void {
		 btnLabel.text=s;
	 }
	 public function get label():String {
		 return btnLabel.text;
	 }
 }
}

Convert Symbol to Flex Component

To create the flex component the Flash component kit is required. Install the kit and then select Commands > Convert symbol to Flex Component

Now publish the swc and import it into Flex Builder

File > publish and copy the swc file to your flex project lib directory.

Here is the code for the flex side.

<?xml version='1.0' encoding='utf-8'?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="com.geothethird.components.*">
     <mx:vbox>
         <mx:label id="lb" text="">
         <components:buttoncomponent label="Click Here" click="lb.text='Clicked'">
     </components:buttoncomponent></mx:label></mx:vbox>
</mx:application>

And the finished product.

In short it is relativly easy to use Flash symbols as flex components, it requires possibly less work than creating a custom skin, although not as dynamic.

Related tags: actionscript, flash, flex

Leave a comment