AS3 Rounded Text Field

Question

Does anyone know how to create a dynamic textfield with a visible border and rounded corners in AS3?

I think I might have to create a rounded movieclip, resize and place it behind the text.

I tried this, but I don't see any changes.

var styleRound:StyleSheet = new StyleSheet();
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}");
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>";
tf.styleSheet = styleRound;

Answer 1

Here is a list of the available CSS styles for TextFields in ActionScript 3. Sorry, there is no corner radius.

You can turn on a border for a textfield on the TextField objects border property. But there is not a property available to round the corner.

I suggest you create a new component and add the border yourself as a Sprite underneath the TextField. Something like:

package
{

import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

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;

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

        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;

        var g:Graphics = background.graphics;
        g.clear();
        g.lineStyle(0, 0x0);
        g.beginFill(0xFFFFFF);
        g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
    }
}

}

Answer 2

I ended up creating a rounded rectangle in flash and exporting it as its own class - hotspotBG.

var hotspotBackground:hotspotBG = new hotspotBG();
hotspotBackground.width = textField.width + 10;
caption.addChild(hotspotBackground);

Answer 3

You cannot change the text field it self, as of 2014 flash does not allow that.

What you can do is delete the background and the borders, which will leave the text field completely transparent, then add an image (rectangle tool is the easiest way to do this) at back of the text field, so that the text field is on top of the image (z-axis-wise)

It may not be the way you thought of but hell it works!

//you are deleting the background and the borders //and replacing them with an image textbox.background=false; textbox.border=false;

Answer 4

Can you just use the CSS styles? Something like:

TextInput { 
  borderStyle: solid; 
  borderThickness: 1; 
  cornerRadius: 2; 
}

I haven't tested this, but that should give you a rounded corner.