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

Part 2. This is one way to organize graphical assets for an Actionscript-only AS3.0 project in Flash without using the Library.

Prep the files
In the Flash IDE* (CS4, for example), create an empty .fla and set Tester1 as the Document Class. Make sure you have an image named “mybutton1.png” inside a folder called /assets in your main directory, or in the same place your main .fla is located.

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.DisplayObject;
	
	public class BtnAssets 
	{	
		//embed graphic assets
		// "../../../" since "/assets" is outside this package
		[Embed("../../../assets/mybutton1.png")]
		private var MyBtn1:Class;
		
		//create displayable object to attach graphics to
		private var _mybtn1:DisplayObject;
		
		public function BtnAssets():void 
		{
			//attach graphic asset to displayable object	
			_mybtn1 = new MyBtn1();
		}
		
		/*  create getter method to give other classes a way to access 
			the displayable graphic object while preserving Encapsulation** */
		public function get mybtn1():DisplayObject { return this._mybtn1; }		
				
	}	
}

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

package 
{	
	import com.timshaya.model.BtnAssets;
	
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	[SWF (width="600", height="400", backgroundColor="#9999cc", frameRate="31")]
	public class Tester1 extends MovieClip
	{				
		//a reference to the custom graphics object
		private var btnAssets:BtnAssets; 

		//buttons
		private var butn1:DisplayObject;		
		
		public function Tester1():void 
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;
			
			btnAssets = new BtnAssets();
			
			//add button to stage
			butn1 = btnAssets.mybtn1;
			butn1.x = (stage.stageWidth/2) - butn1.width/2; //stage center
			butn1.y = stage.stageHeight/2 - butn1.height/2;
			addChild(butn1);			
		}		
	}	
}

Why bother? Why not just stuff all assets in the .fla via the Library? Doing it this way makes your AS3.0 code less IDE dependent. It’s easier to compile regardless of whether you’re using Flash, Flex Builder, FDT, or FlashDevelop.

* IDE means Integrated Development Environment. It’s a fancy way of saying “program” or “development tool.”

** Encapsulation is a key principle of OOP

Advertisements

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

  1. Pingback: Part 2: 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