9-slice scaling in AS3.0

This is a quick AS3 example that sets up 5 buttons, positions them on screen & shows a different sized box with rounded corners that stay undistorted through 9-slice scaling. I used the Flash CS4 component to save time. If your button only needs 1 – 3 states, you can easily replace the Button component with your own custom button Sprite.

Frame script version:

import fl.controls.Button;
/*		
	@ comments 	drag an instance of Button UI component onto stage in Flash CS4 before compiling this code or equivalent in Flex; NOTE: fl.* only works in Flash IDE, NOT in Flex Builder, FDT, FlashDevelop, which use the Flex SDK library's button 
*/

var btn1:Button;
var btn2:Button;
var btn3:Button;
var btn4:Button;
var btn5:Button;
var btnArr:Array = [btn1, btn2, btn3, btn4, btn5]
var offSet:uint = 10;
var s:Sprite =  new Sprite(); //panel container

function init():void 
{
	for (var itm in btnArr) 
	{ //create & position buttons on stage
		btnArr[itm] = new Button();		
		btnArr[itm].label = "my text " + (uint(itm) + 1);	
		btnArr[itm].name = "myBtn_" + (uint(itm) + 1);
		btnArr[itm].width = 70;		
		btnArr[itm].x = 10;
		btnArr[itm].y = 10;
		btnArr[itm].x = btnArr[itm].x * itm * offSet;  		
		addChild(btnArr[itm]);
		trace("btnArr[itm].x = " + btnArr[itm].x);
		
		btnArr[itm].addEventListener(MouseEvent.MOUSE_OVER, resizPanel, false, 0, true);		
	} 	
}

function resizPanel(e:MouseEvent):void 
{	//trace("e.target.name = " + e.target.name);	
	switch(e.target.name) {
		case "myBtn_1":
			trace("button 1!");
			createPanel(80, 60, 230, 161);
			break;
		case "myBtn_2":
			trace("button 2!");
			createPanel(90, 50, 230, 221);
			break;
		case "myBtn_3":
			trace("button 3!");
			createPanel(190, 110, 230, 101);
			break;			
		case "myBtn_4":
			trace("button 4!");
			createPanel(201, 189, 230, 191);
			break;		
		case "myBtn_5":
			trace("button 5!");
			createPanel(66, 104, 230, 116);
			break;			
	}
}

function createPanel(xpos:Number, ypos:Number, wdth:Number, hght:Number):void 
{		
	with(s.graphics) 
	{
		clear();
		lineStyle(6, 0xFEE397, 1, true); 
		beginFill(0xFFF9C9, 1);
		drawRoundRect(0, 0, wdth, hght, 28); //rounded corner w/h = 28
		endFill();
	}
	s.x = xpos;
	s.y = ypos;
	
	addChild(s);
	////Error 2004:
	//var slic9rect:Rectangle = new Rectangle(28, 28, this._wdth, this._hght); 
	//var slice9rect:Rectangle = new Rectangle(28, 28, 230, 161); 
	var slice9rect:Rectangle = new Rectangle(38, 38, wdth-40, hght-40); 
	// w/h of rect must be > w/h of sprite - corner w/h
	s.scale9Grid = slice9rect;	
}

init();
createPanel(50, 60, 230, 161);

Class version with a dynamic text box:

package 
{		
	import flash.display.Sprite;
	import flash.display.MovieClip;	
	import fl.controls.Button;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.geom.Rectangle;
	
	/*			
		@ comments 	drag an instance of Button UI component onto stage in Flash CS4 before compiling this code
					or equivalent in Flex; note fl.* only works in Flash IDE, NOT in Flex Builder, FDT, FlashDevelop
	*/
	
	public class NinePointScalin extends Sprite
	{
	
		private var btn1:Button;
		private var btn2:Button;
		private var btn3:Button;
		private var btn4:Button;
		private var btn5:Button;
		private var btnArr:Array = [btn1, btn2, btn3, btn4, btn5]
		private var btnClose:MovieClip;
		private var offSet:uint = 10;
		private var s:Sprite =  new Sprite(); //panel container
		private var cornerRadius:uint = 28;
		private var txtBox:TextField; 
		private var txtFormat:TextFormat;
		private var copyArr:Array = ["<font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline:</font> <font color='#7A1315'>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</font></b></font>",
									 "<font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline copy two:</font> <font color='#7A1315'>...sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </font></b></font>\n\n<p><font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline:</font> <font color='#7A1315'>Duis aute irure dolor...</font></b></font></p>",
									 "<font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline copy and more:</font> <font color='#7A1315'>...in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</font></b></font>",
									 "<font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline copy again:</font> <font color='#7A1315'>Sed ut perspiciatis unde omnis iste natus error sit... </font></b></font>",
							 		 "<font face='arial,verdana,sans-serif' size='12'><b><font color='#F78F1E'>Headline copy slightly different:</font> <font color='#7A1315'>Ut enim ad minima veniam...</font></b></font>"];

		public function NinePointScalin():void  
		{
			init();
			createPanel(246, 147, 230, 161);
			createTxtBx();
		}		
		
		public function init():void 
		{
			for (var itm in btnArr) 
			{ //create & position buttons on stage
				btnArr[itm] = new Button();		
				btnArr[itm].label = "my text " + (uint(itm) + 1);	
				btnArr[itm].name = "myBtn_" + (uint(itm) + 1);
				btnArr[itm].width = 70;		
				btnArr[itm].x = 10;
				btnArr[itm].y = 10;
				btnArr[itm].x = btnArr[itm].x * itm * offSet;  		
				addChild(btnArr[itm]);
				trace("btnArr[itm].x = " + btnArr[itm].x);
				
				btnArr[itm].addEventListener(MouseEvent.MOUSE_OVER, showPanels, false, 0, true);		
			} 	
			
			btnClose = new CloseBtn();
			btnClose.x = -100; 
			btnClose.y = -100;
			addChild(btnClose);
			btnClose.addEventListener(MouseEvent.MOUSE_DOWN, hidePanels, false, 0, true);	
		}
		
		public function showPanels(e:MouseEvent):void 
		{	//trace("e.target.name = " + e.target.name);	
		
			//createTxtBx(); if panels only created on first mouseover.
			
			switch(e.target.name) {
				case "myBtn_1":
					trace("button 1!");
					createPanel(246, 147, 230, 161);	//as State Pattern: pnl:AbstractPanel = new Panel1(); 		
					moveTxtBx(txtBox, copyArr[0]);	//pnl.createPanel(80, 60, 230, 161); pnl.moveTxtBx(txtBox, copyArr[0]);				
					break;
				case "myBtn_2":
					trace("button 2!");
					createPanel(246, 98, 230, 221); //as State Pattern: pnl:AbstractPanel = new Panel2();...
					moveTxtBx(txtBox, copyArr[1]);			
					break;
				case "myBtn_3":
					trace("button 3!");
					createPanel(246, 117, 230, 101); //as State Pattern: pnl:AbstractPanel = new Panel3();...
					moveTxtBx(txtBox, copyArr[2]);
					break;			
				case "myBtn_4":
					trace("button 4!");
					createPanel(246, 46, 230, 191);
					moveTxtBx(txtBox, copyArr[3]);			
					break;		
				case "myBtn_5":
					trace("button 5!");
					createPanel(246, 20, 230, 116);
					moveTxtBx(txtBox, copyArr[4]);			
					break;			
			}
		}
		
		public function hidePanels(e:MouseEvent):void 
		{
			s.visible = false;
			txtBox.visible = false;
			btnClose.visible = false;
		}
		
		public function createPanel(xpos:Number, ypos:Number, wdth:Number, hght:Number):void 
		{			
			s.visible = true;	
			with(s.graphics) 
			{
				clear();
				lineStyle(6, 0xFEE397, 1, true); 
				beginFill(0xFFF9C9, 1);
				drawRoundRect(0, 0, wdth, hght, cornerRadius); 
				endFill();
			}
			
			//adjust panel to new position
			s.x = xpos;
			s.y = ypos;
			
			addChild(s);
				
			var slice9rect:Rectangle = new Rectangle(cornerRadius+10, cornerRadius+10, wdth-40, hght-40); 
			s.scale9Grid = slice9rect;	
			
			setChildIndex(s, numChildren-3);
			
			//adjust close btn to new position
			btnClose.x = xpos + s.width - 45;
			btnClose.y = s.y + cornerRadius - 10;	
			btnClose.visible = true;
			setChildIndex(btnClose, numChildren-2);
		}
		
		
		public function moveTxtBx(bx:TextField, copyTxt:String):void
		{
			//make sure txt field is always at the top of the display list
			setChildIndex(bx, numChildren-1); 
			bx.x = s.x + cornerRadius;	 
			bx.y = s.y + cornerRadius; 	
			
			bx.htmlText = copyTxt;	
			
			bx.visible = true;
		
		} 
		
		public function createTxtBx():void 
		{
			txtFormat = new TextFormat();
			txtFormat.font = "Arial";	
			txtBox = new TextField();	
			txtBox.setTextFormat(txtFormat); //txtBox.defaultTextFormat = txtFormat;
			txtBox.x = s.width + cornerRadius + 10;
			txtBox.y = s.y + cornerRadius; 
			txtBox.width = s.width - cornerRadius - 30; 	
			txtBox.height = s.y + cornerRadius; 	
			txtBox.multiline = true;	
			txtBox.selectable = true;
			txtBox.wordWrap = true;	
			txtBox.mouseEnabled = false;		
		
			addChild(txtBox);
			setChildIndex(txtBox, numChildren-1); 
		
			//btnClose.x = s.width + 97;
			//btnClose.y = s.y + 100;
			setChildIndex(btnClose, numChildren-2);
		
			txtBox.htmlText = copyArr[0];
			//txtBox.appendText("line one\n");
			//txtBox.addEventListener(MouseEvent.CLICK, handleClick, false, 0, true);	
			
		}		
	}
}
Advertisements

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