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: