Text Input Rotation + Styling the text

0
votes

I have textInput on stage, it's not the component; but rather a textField which is set to behave as inputText. I also have a button on stage to bold the selected portion of the text in the inputField.

Here's the code, which works perfectly fine:

var formatDefBold: TextFormat = new TextFormat();
formatDefBold.bold = false;
var formatBold: TextFormat = new TextFormat();
formatBold.bold = true;

boldBtn.addEventListener(MouseEvent.CLICK, makeBold);

function makeBold(event: MouseEvent):void
{
    var sbi:Number = myInputField.selectionBeginIndex;
    var sei:Number = myInputField.selectionEndIndex;

    if (sbi != sei)
    {
        var section:TextFormat = myInputField.getTextFormat(sbi,sei);

        if (section.bold == false)
        {
            myInputField.setTextFormat(formatBold, sbi, sei);
        }
        else
        {
            myInputField.setTextFormat(formatDefBold, sbi, sei);
        }
        stage.focus = this[selectedTextField]; // highlight the selected text again.
    }
}

PROBLEM: When I rotate the textInput, the text disappears. If I embed the font and choose another anti-aliasing method like "Anti-Alias for animation", the rotated textInput displays the text fine, but the makeBold function doesn't work. I've tried different fonts. Sans, Arial, which I embedded all it's styles (Bold, Italic, Bold-Italic). nothing!

I've tried placing the textInput inside a movieClip and rotate the movieClip instead. doesn't work.

I've also tried setting the embedFonts parameter for the textInput too, not sure if I did it correctly

myInputField.embedFonts = true;

this time the text disappears even when the textField is not rotated.

I'm really stuck and can't think of anything else to make the bold function work with a rotated textInput.

2
actionscript-3rotationtextinput

2 Answers

1
votes

Embedding method

For any operations like rotation applied to a text field, you should first embed the text font.

myText.text = "rotation with embed font";
myText.rotation = 10;

Your text field 'myText' is physically put on the scene. When you click on it, in the window 'Properties', do that:

  • anti-alias (Anti-alias for animation)
  • font embed

To embed the font, click on 'embed' button > window 'Font Embedding' > 'Character ranges' > select: 'Uppercase', 'Lowercase', 'Numerals', 'Punctuation'. (don't click on 'All')

3D method

You can also rotate a dynamic text field without embedding fonts using the 3D methods available in Flash Player 10.

var myTextField:TextField = new TextField();
this.addChild(myTextField);

var fo:TextFormat = new TextFormat("Arial", 11, 0xFF0000);

myTextField.defaultTextFormat = fo;
myTextField.text = "3D rotation";
myTextField.rotationZ = 45;

In your case...

In your case, the following code works perfectly (you just have to put a button named 'boldBtn' on your scene):

var myInputField:TextField = new TextField();
this.addChild(myInputField);

var fo:TextFormat = new TextFormat("Verdana", 12, 0x000000, false);

myInputField.defaultTextFormat = fo;
myInputField.text = "3D rotation";
myInputField.rotationZ = 45;

boldBtn.addEventListener(MouseEvent.CLICK, makeBold);

function makeBold(event:MouseEvent):void
{
    fo.bold = !fo.bold;
    myInputField.setTextFormat(fo);
}
0
votes

I set the anti-aliasing to it's default value which is "use device fonts" and used rotationZ to rotate the text field. and it worked!

using rotation (not rotationZ) with default anti-aliasing doesn't show the text.

and using rotation (not rotationZ) with anti-aliasing makes the bold function not work.

so this is solved with just adding this line of code:

myInputField.rotationZ = 45;