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

	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; 

		private var butn1:DisplayObject;		
		public function Tester1():void 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			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;

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

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