Part 2: Using custom graphics via Flex SDK in the Flash IDE

This post expands on the previous simple example with an example of a basic menu for an Actionscript-only AS3.0 project in Flash that uses a cool feature of the Flex SDK — the Embed tag. The last example was useful because the Flash IDE’s Library wasn’t used at all. This method, allows you to still use the Flex SDK’s [Embed] meta tag but lets you work with a Designer who only knows how to use .fla files and the Library. Using this technique a Developer can receive an assets SWF from a Designer and worry about the code, not about setting up graphics in the library.

Prep the files
In the Flash IDE* (CS4, for example), create an empty .fla and set TenOfSameButn as the Document Class. Make sure you have an assets SWF named “BasicBtnAssets.swf” inside a folder called /assets in your main directory, or in the same place your main .fla is located. BasicBtnAssets.swf should contain your button graphics, in this case just a generic Off state and On state set to Export for Actionscript. The Off state has a Class name of “reg” (set by going to Library > (Right/Control click the asset MovieClip ) > Properties) and the On state is named “ovr” via the library by the Designer.

Create the graphic assets container Class
Place it inside this folder structure: {your main .fla’s location}/com/timshaya/model.

package com.timshaya.model
{	
	import flash.display.Sprite;
	import flash.display.MovieClip;
	
	public class BasicBtnAssets extends Sprite
	{	
		//embed graphic assets, 
		// "../../../" since "/assets" is outside this package
		[Embed(source="../../../assets/BasicBtnAssets2.swf", symbol="reg")]
		private var MyBtns1offState:Class;
		[Embed(source="../../../assets/BasicBtnAssets2.swf", symbol="ovr")]
		private var MyBtns1onState:Class;

		//create displayable object to attach graphics to
		private var _mybtn1off:Sprite;
		private var _mybtn1on:Sprite;
		
		public function BasicBtnAssets():void 
		{
			//attach graphic asset to displayable object	
			_mybtn1off = new MyBtns1offState();
			_mybtn1on = new MyBtns1onState();
		}
		
		/*  create getter method to give other classes a way to access 
			the displayable graphic object while preserving Encapsulation */						
		public function get mybtn1off():Sprite { return this._mybtn1off; }		
		public function get mybtn1on():Sprite { return this._mybtn1on; }		
	}	
}

Use the above graphic assets Class to display a 10 button menu on stage
Place TenOfSameButn.as in the same location as your main .fla file that uses this as its Document Class.

package 
{	
	import com.timshaya.model.BasicBtnAssets;
	
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;	
	
	[SWF (width="600", height="400", backgroundColor="#9999cc", frameRate="31")]
	public class TenOfSameButn extends MovieClip
	{				
		//a reference to the custom graphics object
		private var btnAssets:BasicBtnAssets; 
		private var butnGroup1:Sprite;
		
		//buttons
		private var butn1:      Sprite; //button 1 local container
		private var butn2:      Sprite;
		private var butn3:      Sprite;
		private var butn4:      Sprite;
		private var butn5:      Sprite; 
		private var butn6:      Sprite;
		private var butn7:      Sprite;
		private var butn8:      Sprite;
		private var butn9:      Sprite; 
		private var butn10:     Sprite; 		
		private var butnsArra:  Array = [butn1,butn2,butn3,butn4,butn5,butn6,butn7,butn8,butn9,butn10];
		
		private var offSet:     Number = 20; //horizontal button spacing offset
		
		public function TenOfSameButn():void 
		{						
			buildMenu();
		}		
		
		public function buildMenu():void 
		{
			butnGroup1 = new Sprite();
			addChild(butnGroup1);			
			
			for(var itm:int = 0; itm < butnsArra.length; itm++) //make 10 buttons
			{				
				butnsArra[itm] = new Sprite();
				//butnsArra[itm] = new MovieClip();																
				//butnsArra[itm].ID = itm; 
				//adding custom properties only works 
                                //with MovieClip, because it's a Dynamic Class															
																
				//create a new BasicBtnAssets instance for each button
				btnAssets = new BasicBtnAssets(); 				
				
				//put btn1 off state inside btn1 
				butnsArra[itm].addChild(btnAssets.mybtn1off);	
	
				//put btn1 on state inside btn1
				butnsArra[itm].addChild(btnAssets.mybtn1on);	
				
				//add each button to the group container so they can be repositioned as a group
				butnGroup1.addChild(butnsArra[itm]);		
				
				butnsArra[itm].x = 2.2;
				butnsArra[itm].x = butnsArra[itm].x * itm * offSet;
				//trace("butnsArra["+itm+"].x = " + butnsArra[itm].x);	
				butnsArra[itm].y = stage.stageHeight / 2 - butnsArra[itm].height/2 - 100;
				
				//hide Mouse Over state
				butnsArra[itm].getChildAt(1).visible = false; 
				butnsArra[itm].buttonMode = true;
				
				butnsArra[itm].addEventListener(MouseEvent.MOUSE_OVER, doMouseOvr, false, 0, true);
				butnsArra[itm].addEventListener(MouseEvent.MOUSE_OUT, doMouseOut, false, 0, true);				
			}
			
			//center btns container
			butnGroup1.x = stage.stageWidth/2 - butnGroup1.width/2;			
		}
		
		public function doMouseOvr(e:MouseEvent):void 
		{				
			e.target.parent.getChildAt(1).visible = true;
		}
		
		public function doMouseOut(e:MouseEvent):void 
		{
			e.target.parent.getChildAt(1).visible = false;
		}
	}	
}
Advertisements

One thought on “Part 2: Using custom graphics via Flex SDK in the Flash IDE

  1. Pingback: Part 1: Using custom graphics via Flex SDK in the Flash IDE « timshaya

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