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);
}
}
}
