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; } } }
Pingback: Part 1: Using custom graphics via Flex SDK in the Flash IDE « timshaya