Search code examples
actionscript-3flash-cs5

Flash as3: Change color of text on mouse over for checkbox


So this code creates a check box with some text next to it.

How would I go about making it so the text changes color when someone mouses over the text next to the check box?

There are more packages that go with this...if it's needed to help solve this issue please let me know and I can post those too.

Thanks!

package 
{
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.text.*;

public class Checkbox extends flash.display.Sprite
{
    public function Checkbox(arg1:uint, arg2:uint,
    arg3:String, arg4:Boolean, arg5:Boolean=true, arg6:*=null)
    {
        super();
        this.label = arg3;
        this.selected = arg4;
        this.x = arg1;
        this.y = arg2;
        this.enabled = arg5;
        this.callback = arg6;
        build();
        return;
    }

    public function update():void
    {
        build();
        return;
    }

    internal function handler(arg1:flash.events.MouseEvent):void
    {
        if (enabled) 
        {
            selected = !selected;
            setSelected(selected);
        }
        if (callback != null) 
        {
            callback();
        }
        return;
    }

    public function build():void
    {
        var labelText:*;
        var labelFmt:*;

        var loc1:*;
        graphics.clear();
        Utils.clearDisplayList(this);
        butn = new SimpleButton();
        addChild(butn);
        box = new Shape();
        var loc2:*;
        with (loc2 = box.graphics) 
        {
            lineStyle(1);
            beginFill(bgColor);
            drawRect(0, 0, 12, 12);
            endFill();
        }
        boxWithCheckmark = new Shape();
        with (loc2 = boxWithCheckmark.graphics) 
        {
            lineStyle(1);
            beginFill(bgColor);
            drawRect(0, 0, 12, 12);
            endFill();
            lineStyle(2, tickColor);
            moveTo(3, 6);
            lineTo(4, 10);
            lineTo(10, 3);
        }
        labelFmt = new TextFormat();
        with (loc2 = labelFmt) 
        {
            color = labelColor;
            font = "_sans";
            size = 12;
        }
        labelText = new TextField();
        with (loc2 = labelText) 
        {
            autoSize = TextFieldAutoSize.LEFT;
            selectable = false;
            text = label;
            setTextFormat(labelFmt);
            x = 16;
            y = -3;
        }
        this.addChild(labelText);
        setSelected(selected);
        addEventListener(MouseEvent.CLICK, handler);
        return;
    }

    public function setSelected(arg1:Boolean):*
    {
        this.selected = arg1;
        if (selected) 
        {
            var loc1:*;
            butn.hitTestState = loc1 = boxWithCheckmark;
            butn.downState = loc1 = loc1;
            butn.overState = loc1 = loc1;
            butn.upState = loc1;
        }
        else 
        {
            butn.hitTestState = loc1 = box;
            butn.downState = loc1 = loc1;
            butn.overState = loc1 = loc1;
            butn.upState = loc1;
        }
        return;
    }

    public var enabled:Boolean;

    internal var boxWithCheckmark:flash.display.Shape;

    public var bgColor:*=15658734;

    public var tickColor:*=3355443;

    internal var box:flash.display.Shape;

    internal var butn:flash.display.SimpleButton;

    public var labelColor:*=0;

    public var label:String;

    public var selected:Boolean;

    public var callback:*;
}
}

Solution

  • You can do that using text_field.textColor or using TextFormat.

    Using text_field.textColor :

    var hover_color:Number = 0xff0000
    var out_color:Number = 0x666666
    
    text_field.addEventListener(MouseEvent.MOUSE_OVER, function(e:MouseEvent)
    {
        text_field.textColor = hover_color
    })
    text_field.addEventListener(MouseEvent.MOUSE_OUT, function(e:MouseEvent)
    {
        text_field.textColor = out_color
    
    })
    

    Using TextFormat:

    var text_format:TextFormat = new TextFormat()
        text_format.color = out_color
    
    text_field.defaultTextFormat = text_format
    
    text_field.addEventListener(MouseEvent.MOUSE_OVER, function(e:MouseEvent)
    {
        text_format.color = hover_color
        text_field.setTextFormat(text_format)
    })
    text_field.addEventListener(MouseEvent.MOUSE_OUT, function(e:MouseEvent)
    {
        text_field.setTextFormat(text_field.defaultTextFormat)
    
    })