creating dynamic rectangle - actionscript-3

Question

I'm wondering how I can create a dynamic rectangle which has some text in it, the text is dynamic so the rectangle has to adapt to the length of the text. Any ideas on how to approach this?

Answer 1

here is a basic one for single line text:
import flash.display.Sprite;
import flash.text.TextField;
var rectClip:Sprite = new Sprite();
var rect:Sprite = new Sprite;
rect.graphics.beginFill(0xff0000, 1);
rect.graphics.drawRect(0, 0, 100, 100);
rect.graphics.endFill();
var tf:TextField = new TextField();
tf.autoSize = "left";
tf.text = "Lorem ipsum dolor sit amet...";
addChild(rectClip);
rectClip.addChild(rect);
rectClip.addChild(tf);
rect.width = tf.textWidth + 12;
rect.height = tf.textHeight + 12;
tf.x = Math.round(rect.width/2 - tf.width/2);
tf.y = Math.round(rect.height/2 - tf.height/2);
Rob

Answer 2

Another way if you want to draw your rectangle in Flash instead of actionscript (although the above way might be more useful).
Create a layer with a rectangle.
Make the rectangle some sort of graphic or sprite and set it to 9-slice scaling. This way the rectangle will scale properly with the textbox (good if it's a rounded rectangle)
Also choose Linkage for the rectangle and give it a class name (say, "Background")
public var textBackground:Background; // can make public or private depending if you leave it on the stage or generate it
private var myTextField:TextField;
Then have two functions:
private function createTextField():void
{
// create your textfield here using actionscript
myTextField = new TextField();
// customize your textfield
}
private function createTextBackground():void
{
textBackground = new Background;
textBackground.height = myTextField.height + 20;
}
Then:
createTextField();
createTextBackground();
addChild(textBackground);
addChild(myTextField);
I usually change the height depending on the text and set the width to a fixed width and set my positioning how I like.

Answer 3

If the TextField is multiline, you will need to set a fixed width , you can then determine the TextField height after it's been formatted.
private var format:TextFormat = new TextFormat();
private var textWidth:int = 300;
private var hPadding:int = 10;
private var vPadding:int = 10;
private var boxColor:uint = 0x990000;
private function init():void
{
var tf:TextField = getTextField("Your text..........etc...");
tf.x = hPadding;
tf.y = vPadding;
var rectWidth:int = textWidth + ( hPadding * 2);
var rectHeight:int = tf.textHeight + ( vPadding * 2);
var container:Sprite = getTextContainer( rectWidth , rectHeight );
container.addChild( tf );
}
private function getTextField( text:String ):TextField
{
var tf:TextField = new TextField();
tf.defaultTextFormat = format;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.multiline = true;
tf.width = textWidth;
tf.text = text;
// etc...
return tf;
}
private function getTextContainer(width:int , height:int ):Sprite
{
var sp:Sprite = new Sprite();
with( sp.graphics )
{
beginFill( boxColor );
drawRect( 0 , 0 , width , height );
endFill();
}
return sp;
}