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