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 in the same location as your main .fla file that uses this as its Document Class.

	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;
	[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;
		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 
		public function buildMenu():void 
			butnGroup1 = new Sprite();
			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 
				//put btn1 on state inside btn1
				//add each button to the group container so they can be repositioned as a group
				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 
		{ = true;
		public function doMouseOut(e:MouseEvent):void 
		{ = false;

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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s