AS3, flash 10 - click on color button and write in textarea with that color font

Question

hi everyone

I want to do as follows:

* click a "red" button
* write in textarea with red color font
* click "blue" button
* write in textarea with blue color font

Isn't this possible in flash 10 using AS3 ??????

I tried using setTextFormat but the problem is i have to have text before inserting format on that.

This is what i want:

* start writing in textarea with WHITE COLOR (eg: "abc")
* click BLUE COLOR BUTTON
* start writing in textarea with BLUE COLOR (eg: "abcdef" - abc in white and def in blue)
* click RED COLOR BUTTON
* start writing in textarea with RED COLOR (eg: "abcdefxyz" - abc in white and def in blue and xyz in red)

Please somebody tell me how to do this?????

Thanks alot in advance

Regards

Answer 1

the documentation states that if you want to change the format of the text prior to writing anything in the text field to assign a new defaultTextFormat. otherwise, setting a new format will change the current selection.

the solution below works by maintaining the focus on the text field, so when the buttons are clicked the text field still has focus. if there is a current selection, the selection will change either blue or red, depending on which button is pressed. if there is no selection, a new defaultTextFormat is applied, without changing previous defaultTextFormats, since the text field still had focus when the new format was applied.

package
{   
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.events.MouseEvent;
import flash.events.FocusEvent;

public class ChangeTextColor extends Sprite
{
private var field:TextField;
private var redButton:Sprite;
private var blueButton:Sprite;

public function ChangeTextColor()
    {
    init();
    }

//Initialize
private function init():void
    {
    //Create Text Field
    field = new TextField();
    field.type = TextFieldType.INPUT;
    field.border = true;
    field.x = field.y = 10;
    addChild(field);

    //Retain Focus On TextField
    field.addEventListener(FocusEvent.FOCUS_OUT, fieldFocusOutHandler);

    //Create Button
    redButton = createButton(10, 120, 200, 20, 0xFF0000);
    blueButton = createButton(10, 150, 200, 20, 0x0000FF);
    }

//Create Button Method
private function createButton(x:uint, y:uint, width:uint, height:uint, color:uint):Sprite
    {
    var resultSprite:Sprite = new Sprite();

    resultSprite.graphics.beginFill(color);
    resultSprite.graphics.drawRect(0, 0, width, height);
    resultSprite.graphics.endFill();

    resultSprite.addEventListener(MouseEvent.CLICK, mouseClickEventHandler);

    resultSprite.x = x;
    resultSprite.y = y;
    addChild(resultSprite);

    return resultSprite;
    }

//Apply Text Format
private function changeTextFormatColor(color:uint):void
    {
    var format:TextFormat = new TextFormat();
    format.color = color;

    //Change Format Of Selection Or Set Default Format
    if  (field.selectionBeginIndex != field.selectionEndIndex)
        field.setTextFormat(format, field.selectionBeginIndex, field.selectionEndIndex);
        else
        field.defaultTextFormat = format;
    }

//Maintain Focus Of TextField When Color buttons Are Clicked
private function fieldFocusOutHandler(evt:FocusEvent):void
    {
    stage.focus = evt.currentTarget as TextField;
    }

//Button Click Event Handler
private function mouseClickEventHandler(evt:MouseEvent):void
    {
    switch  (evt.currentTarget)
            {
            case redButton:     trace("red clicked");
                                changeTextFormatColor(0xFF0000);
                                break;

            case blueButton:    trace("blue clicked");
                                changeTextFormatColor(0x0000FF);
            }
    }
}
}

alternatively, if you have other buttons in your program that do not relate to the text field and should make the text field lose focus when clicked, just remove the fieldFocusOutHandler function and place stage.focus = field; inside the buttonClickHandler method. you could also keep and tailor the fieldFocusOutHandler function if this is an issue.

Answer 2

hi everyone...

Here is the solution for anyone who is looking around (thanks to those who solved my problem)

Use following in changehandler of textfield:

textfield.setTextFormat(default_format, textfield.caretIndex-1, textfield.caretIndex);

Use following in clickhandler of button:

default_format.color = getColor("red");
    stage.focus = textfield;

Regards