Creating a Flex component using Flash CS3

[Flep]

With Flex Builder 3 we can use components and animated graphics to our pleasure.

How?

By installing Flash CS3 the Adobe Flex Component Kit.

This tutorial for Flex 3 will show how to create a component for Flex using Flash CS3.

In doing so we can use the graphical tools of Flash interface, its timeline and of course Actionscript 3.0 to customize the component as we prefer.

Associate a class ( must extend UIMovieClip ) to the MovieClip created with Flash that manage our component and export format SWC.

Finally, we just need to export an SWC file and import it into Flex and we can use methods and properties of UIMovieClip and of course the methods and properties we have created to our component.

What we need for this tuorial:

• Adobe Flash CS3


• Adobe Flex Builder 3


• Adobe Flex Component Kit ( free )

First thing, download and install the Flex Component Kit.

Be sure to have the last version of Adobe Extension Manager installed on your machine, or download it here.

Double click on FlexComponentKit.mxp file and it opens the Adobe Extension Manager.

Acept the disclaimer.

Reboot Flash !

Flash

Create a new FLA and save it as Aura.fla ( keep same name of the FLA, AS file and MovieClip of the name you want use for your component ).

Create a new MovieClip with name Aura.

Inside Aura create the design you need for the component. Of course it depends on what the component must do. Anyway, in my case I will create a window panel that can load an image or an SWF.


So I have 6 layers inside of MovieClip Aura:

1. background: contains a MovieClip that is the component's background ( its istance name: background_mc )


2. bar: contains a MovieClip ( its istance name: bar_mc ). This is the bar that the user will use to drag the window.


3. embed font: contains a dynamic TextField ( its istance name: label_txt ). This textfield is useful to embed fonts and insert the character sets.


4. empty: this layer contains an empty MovieClip ( its istance name: empty_mc ) that will hold the loaded image


5. loader: contains a MovieClip ( its istance name: apple_mc ) which serves as a preloader ( MAC style )


6. close/open: contains a MovieClip ( its istance name: close_mc ) that will close / open the window panel. This MovieClip has 2 keyframes.

Now we must convert this MovieClip to Flex component.

1. Set frame rate to 24 ( it is a must because Flex needs it )


2. Select the Aura MovieClip in library


3. Go to Flash main menu, commands > Make Flex Component

 

I see a new component in my library that is called UIMovieClip.

This means that everything is successful and Flash has associated the MovieClip Aura to a class base that is no longer the flash.display.MovieClip but mx.flash.UIMovieClip.

At this point we need to create a class that extends the UIMovieClip to associate our MovieClip Aura.

For example, in this case create 2 folders: org / FlepStudio.

Then in the library Aura.fla, right click on MovieClip Aura and going into property.

How base class find (as I just said) the mx.flash.UIMovieClip and as I enter the class name org.FlepStudio.Aura (before physically create the file Aura.as).

Now create a new file Aura.as and save it inside FlepStudio folder.

This class will manage all of my logical component, and then the MovieClip I have in Aura.fla.

At this point I start to write the actions:

package org.FlepStudio
{
	import mx.flash.UIMovieClip;
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.net.*;
	import caurina.transitions.Tweener;
	
	public dynamic class Aura extends UIMovieClip
	{
		private var isOpen:Boolean=true;
		private var isBitmap:Boolean;
		
		private var startW:Number;
		private var startH:Number;
		private var imageStartW:Number;
		private var imageStartH:Number;
		private var distance:int=10;
		
		private var source:String;
		
		private var loader:Loader;
		private var image:*;
		private var alt_mc:MovieClip;
		
		public function Aura()
		{
			addEventListener(Event.ADDED_TO_STAGE,initME);
		}
		
		private function initME(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,initME);
			
			hideApple();
			
			startW=this.width;
			startH=this.height;
			
			this.label_txt.mouseEnabled=false;
			
			stopButton();
			initDrag();
		}
		
		private function stopButton():void
		{
			this.close_mc.gotoAndStop(1);
			
			this.close_mc.mouseChildren=false;
			this.close_mc.buttonMode=true;
			
			this.close_mc.addEventListener(MouseEvent.MOUSE_OVER,setOver);
			this.close_mc.addEventListener(MouseEvent.MOUSE_OUT,setOut);
			this.close_mc.addEventListener(MouseEvent.MOUSE_DOWN,closeOpen);
		}
		
		private function setOver(evt:MouseEvent):void
		{
			if(isOpen)
				createAlt("close");
			else
				createAlt("open");
		}
		
		private function setOut(evt:MouseEvent):void
		{
			removeAlt();
		}
		
		private function closeOpen(evt:MouseEvent):void
		{
			removeAlt();
			
			if(isOpen)
				closeWindow();
			else
				openWindow();
		}
		
		private function hideApple():void
		{
			this.apple_mc.stop();
			this.apple_mc.alpha=0;
			this.apple_mc.x=0;
			this.apple_mc.y=0;
		}
		
		private function removeApple():void
		{
			this.apple_mc.stop();
			this.removeChild(this.apple_mc);
		}
		
		private function showApple():void
		{
			this.apple_mc.x=this.width/2-this.apple_mc.width/2;
			this.apple_mc.y=this.height/2-this.apple_mc.height/2;
			this.apple_mc.alpha=0.5;
			this.apple_mc.play();
		}
		
		public function closeWindow():void
		{
			isOpen=false;
			
			this.close_mc.gotoAndStop(2);
			if(loader==null)
				Tweener.addTween(this.background_mc,{height:this.bar_mc.height+distance,time:0.5,transition:"easeOutQuad"});
			else
				fadeOutImageAndCloseWindow();
		}
		
		public function openWindow():void
		{
			isOpen=true;
			
			this.close_mc.gotoAndStop(1);
			if(loader==null)
				Tweener.addTween(this.background_mc,{height:this.startH,time:0.5,transition:"easeOutQuad"});
			else
				openWindowAndFadeInImage();
		}
		
		private function initDrag():void
		{
			this.bar_mc.addEventListener(MouseEvent.MOUSE_DOWN,startDragMe);
			this.bar_mc.addEventListener(MouseEvent.MOUSE_UP,stopDragMe);
		}
		
		private function startDragMe(evt:MouseEvent):void
		{
			var rect:Rectangle=new Rectangle(0,0,stage.stageWidth-this.width,stage.stageHeight-this.height);
			this.startDrag(false,rect);
		}
		
		private function stopDragMe(evt:MouseEvent):void
		{
			this.stopDrag();
		}
		
		public function loadImage(s:String):void
		{
			openWindow();
			
			isBitmap=true;
			
			showApple();
			
			source=s;
			
			var request:URLRequest=new URLRequest();
			request.url=source;
			
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,setComplete);
			loader.load(request);
		}
		
		public function loadSWF(s:String):void
		{
			openWindow();
			
			isBitmap=false;
			
			showApple();
			
			source=s;
			
			var request:URLRequest=new URLRequest();
			request.url=source;
			
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,setComplete);
			loader.load(request);
		}
		
		private function setComplete(evt:Event):void
		{
			isOpen=true;
			
			removeApple();
			
			evt.target.loader.removeEventListener(Event.COMPLETE,setComplete);
			
			if(isBitmap)
				image=evt.target.loader.content as Bitmap;
			else
				image=evt.target.loader.content as MovieClip;
			image.alpha=0;
			
			imageStartW=image.width;
			imageStartH=image.height;
			
			this.empty_mc.addChild(image);
			
			this.startW=image.width;
			this.startH=image.height;
			
			Tweener.addTween(this.background_mc,{height:this.startH+this.bar_mc.height+distance*1.5,width:this.startW+distance,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
			Tweener.addTween(this.bar_mc,{width:this.startW,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
		}
		
		private function fadeInImage():void
		{
			Tweener.addTween(image,{alpha:1,time:0.5,transition:"easeOutQuad"});
		}
		
		public function fadeOutImage():void
		{
			Tweener.addTween(image,{alpha:0,time:0.5,transition:"easeOutQuad"});
		}
		
		private function setImageDimensionsZero():void
		{
			image.width=0;
			image.height=0;
			image.scaleX=0;
			image.scaleY=0;
		}
		
		private function setImageDimensionsToNormal():void
		{
			image.width=imageStartW;
			image.height=imageStartH;
			image.scaleX=1;
			image.scaleY=1;
		}
		
		private function fadeOutImageAndCloseWindow():void
		{
			Tweener.addTween(image,{alpha:0,time:0.3,transition:"easeOutQuad",onComplete:close});
		}
		
		private function close():void
		{
			setImageDimensionsZero();
			Tweener.addTween(this.background_mc,{height:this.bar_mc.height+distance,time:0.5,transition:"easeOutQuad"});
		}
		
		private function openWindowAndFadeInImage():void
		{
			setImageDimensionsToNormal();
			
			Tweener.addTween(this.background_mc,{height:this.startH+this.bar_mc.height+distance*1.5,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
			
			if(this.y>stage.stageHeight-imageStartH)
				Tweener.addTween(this,{y:stage.stageHeight-imageStartH-this.bar_mc.height-distance*2,time:0.5,transition:"easeOutQuad"});
		}
		
		private function createAlt(s:String):void
		{
			this.alt_mc=new MovieClip();
			this.alt_mc.alpha=0;
			this.addChild(this.alt_mc);
			
			var tf:TextField=new TextField();
			tf.selectable=false;
			tf.background=true;
			tf.backgroundColor=0xCCCCCC;
			tf.border=true;
			tf.borderColor=0x333333;
			tf.multiline=false;
			tf.embedFonts=true;
			tf.antiAliasType=AntiAliasType.ADVANCED;
			tf.defaultTextFormat=getFormat();
			tf.text=s;
			tf.width=tf.textWidth+10;
			tf.height=tf.textHeight+5;
			
			this.alt_mc.addChild(tf);
			this.alt_mcx=mouseX;
			this.alt_mc.y=mouseY-tf.height-distance;
			
			Tweener.addTween(this.alt_mc,{alpha:1,time:0.3,transition:"easeOutQuad"});
		}
		
		private function removeAlt():void
		{
			if(this.alt_mc!=null)
			{
				this.removeChild(this.alt_mc);
				this.alt_mc=null;
			}
		}
		
		private function getFormat():TextFormat
		{
			var format:TextFormat=new TextFormat();
			format.size=10;
			format.color=0x333333;
			format.font="Tahoma";
			
			return format;
		}
	}
}

This component has 2 public methods: loadImage(String):void and loadSWF(String):void .

Once instantiated class Aura, we can call loadImage passing the url of image we want to load or call loadSWF passing the url of SWF we want to load.

Once your code is ready, go in publish settings of Aura.fla, Flash tab and activate " export SWC " option. Then click publish.

Flash has now created the file Aura.swc and we import it into our Flex project.

Flex

Create a new Flex project, new MXML file and go to Flex Navigator panel.

Right click on the project's name and then click properties.

Flex opens a new window, pick Flex Build Path and then go to Library path.

Now click add SWC and browse to get Aura.swc file.

Click ok and Flex imports Aura.swc .

Now I can instanciate Aura, as following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="testMe()">
	<mx:Script>
		
			import org.FlepStudio.Aura;
			
			private function testMe():void
			{
				var aura:Aura=new Aura();
				addChild(aura);
				aura.loadImage("http://www.flepstudio.org/utilita/sliding/images/img_6.jpg");
			}
		
	</mx:Script>
</mx:Application>

Watch the result

Source files:

[aaronyeo22]

Hi flep.
It's very nice tutorial. Have you convert it to flex container.

thanks

[niha]

Hey guys,

Sorry if this post is not in its correct topic, I just want to do something like this :

Making some RIA on web that allow me to edit FLA or some self-made-flash-source on web, the RIA allow me to modify things like image/text on web like that in Flash CS3 ( a flash cs3 like on web maybe... ), then output the FLA or some self-made-flash-source, and SWF..

Is it even possible ? Thanks for any advice :D.