One image, three states of button.

When we want to create custom button, usually three states considered: mouse over (roll over), mouse out (roll out) and press (click, release). If it is advanced, with multiple animations, and differences between those free states, theres no other way to create each of them separately. But if You need quite simple button which changes its color, look at this example.

Firstly some declarations:

private var _loader:Loader;


private var _colorTransform:ColorTransform;
private var _rollOverColorTransform:ColorTransform;
private var _clickColorTransform:ColorTransform;
        
private var _color:uint;
private var _rollOverColor:uint;
private var _clickColor:uint;

We also have to define values:

_color = 0xFFFFFF;
_rollOverColor = 0xFF6600;

We load image:

_loader = new Loader();
_loader.load(new URLRequest(url));
addChild(_loader);
buttonMode = true;

Prepare transformations for switching states:

_colorTransform = _loader.transform.colorTransform;
_colorTransform.color = _color;
_loader.transform.colorTransform = _colorTransform;
            
_rollOverColorTransform = _loader.transform.colorTransform;
_rollOverColorTransform.color = _rollOverColor;


_clickColorTransform = _loader.transform.colorTransform;
_clickColorTransform.color = _clickColor;

Then we set listeners:

addEventListener(MouseEvent.ROLL_OVER, handleRollOver);
addEventListener(MouseEvent.ROLL_OUT, handleRollOut);
addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);

And handlers for events:


private function handleRollOver(e:MouseEvent):void
{
    _loader.transform.colorTransform = _rollOverColorTransform;
}
    
private function handleRollOut(e:MouseEvent):void
{
    _loader.transform.colorTransform = _colorTransform;
}
        
private function handleMouseDown(e:MouseEvent):void
{
    _loader.transform.colorTransform = _clickColorTransform;
}

And it's done!

Check it:

Letter Spacing - TextFormat or css StyleSheet

If you;re looking for example of setting letter spacing - here it is.

The first solution is TextFormat. The property is named same in both options - letterSpacing. Let's see the code:

var txtfmodified:TextField = new TextField();

addChild(txtfmodified);

txtfmodified.y =20;

txtfmodified.text = 'hello world';

var tf:TextFormat = txtfmodified.getTextFormat();

tf.letterSpacing = 3; /* I tried lots of different values here. */

txtfmodified.setTextFormat(tf);

We can also use stylesheet to adjust part of text (in previous solution you can also adjust part of text but selecting chars is more complicated than using styles for classes of html tags). Here is the example:

var txtfmodified2:TextField = new TextField();

addChild(txtfmodified2);

txtfmodified2.y =40;

txtfmodified2.text = 'hello world';

var s:StyleSheet = new StyleSheet();

s.setStyle("p", {letterSpacing:3});

txtfmodified2.styleSheet = s;

txtfmodified2.htmlText = "<p>hello world</p>";

Remember that there are two solutions but you cannot mix them. Either way you'll receive error like this:

Error: Error #2009: This method cannot be used on a text field with a style sheet


And a proof at the end. First line is simple not modified field. Second line is modified by TextFormat properties. Third line is adjusted by stylesheet.

Color in Hex and separated to RGB channels

I don't know why conversion between hex code of color and separating it into RGB channels is not built in AS3.0 classes. It's quite easy operation. Here are methods for both directions:

function hex2RGB ( hex:Number ):Object 

{

var rgb:Object = new Object();

rgb.r = (hex & 0xff0000) >> 16;

rgb.g = (hex & 0x00ff00) >> 8;

rgb.b = hex & 0x0000ff;

trace(rgb.r, rgb.g, rgb.b);

return rgb;

}

Usage:

hex2RGB(0xE60E3F); // 230, 14, 63

It's more functional to operate on one object so the function returns it. For testing purpose there is trace that prints values of channels

function RGB2hex (r:uint, g:uint, b:uint):Number

{

return ((r << 16) + (g << 8) + b);

}

Usage:

trace(RGB2hex(230, 14, 63).toString(16));
For displaying purpose the radix has been changed to 16 (hex)