How do I create a rounded-corner textField component in AS3

Hi,

I need to create labels with coloured round-cornered backgrounds.

I am creating a flash file that will be used as a base or template flash file by three designers (including myself) to create hundreds of informative SWF files.

These labels will vary in size (depending on the amount of text) but the font size and position of the text (the padding effectively) must always be consistent.

I found a good article here: http://stackoverflow.com/questions/1223606/as3-rounded-text-field

Unfortunately I am an OKish AS2 coder, who struggles with classes and am only recently migrating uncomfortably to AS3.

After looking online I worked out how to get the above code into a component but my knowledge is not sufficient to do much more with it.

What I want:
- AS3 component (hereby referred to as label component)  that I can drag from library or component panel into a scene
- label component to have a text entry box in the componenrt inspector
- label component to show in the scene
- text to appear in label component

Of the above, I have sort of got the first bit working:
I saved the package as TextBorder.as in a new folder, created an AS3 flash document called demo.fla.
In demo.fla I created a movieclip and then I clicked 'Component Definition' in library and associated the class with TextBorder.as
Also in library I clicked on properties and associated class with TextBorder.as

When I drag my moviclip into the scene and compile it I get a round corner box with a text field saying Hello World. Which I expected.

The instance of the component is invisible on the stage and only appears when you compile/ at runtime.

Additionally I can't alter the hello world text and I can't define anything in the component inspector.

---

My gap (many gaps) in knowledge is how do I take this package and create it into a component that I can see in my development environment (the stage). I have seen a bit about live preview but it asks for a swf and I can't provide one as the label is produced dynamically.

I tried to add a stylesheet element so I could control the text but it is not picking it up, again i am a real newbie at all of this and AS3 so probably getting it terribly wrong.

---

If component is not my best approach, anybody able to suggest a solid work around with moviclips with 9 point scaling? I can't see it working as elegantly as a component, especially as I would have to separate the text layer from the background to prevent the text from scaling etc.

---

Any help or examples please would be amazing thank you.

Kind regards,
Ady

/*code taken from http://stackoverflow.com/questions/1223606/as3-rounded-text-field

modified by myself to include a stylesheet (which doesn't work) and to add padding - which sort of does.
*/

package
{

import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
//Ady added---
import flash.text.Stylesheet;
//--- Ady end

public class TextBorder extends Sprite
{
    private static const CORNER_RADIUS:int = 5;
    // display objects
    private var background:Sprite;
    private var field:TextField;

    // properties
    private var _text:String;
    //Ady add---
    private var newStyleSheet:StyleSheet = new StyleSheet();
    //--- Ady end

    public function TextBorder()
    {
        background = new Sprite;
        field = new TextField;
        field.autoSize = TextFieldAutoSize.LEFT;

        //Ady added---
        var styleObj:Object = new Object();
        styleObj.fontWeight="bold";
        styleObj.color="#666666";
        newStyle.setStyle(".defStyle",styleObj)

        field.styleSheet = newStyle;
        field.htmlText="";
        //--- Ady end

        addChild(background);
        addChild(field);

        // TESTING:
        text = "Hello World";
    }

    public function set text(newText:String):void
    {
        _text = newText;
        display();
    }

    public function get text():String
    {
        return _text;
    }

    private function display():void
    {
        field.text = _text;

        //Ady add--
        var expX:Number = field.width+20;
        var expY:Number = field.height+20;
        //--- Ady end

        var g:Graphics = background.graphics;
        g.clear();
        //Ady add
        g.lineStyle(0.1,0x000000,0.5,true,"normal");
        //--- Ady end
        g.lineStyle(0, 0x0);
        g.beginFill(0xFFFFFF);
        //--- Ady end
        g.drawRoundRect(-10, -10, expX, expY, CORNER_RADIUS);
        //--- Ady end

        /* originally was this:
        g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
        */
    }
}

}

Select allOpen in new window