Question

Is there a way to darken or lighten an image or actually any display object on mouse over and then restore it back on mouse out? I would prefer to use filters if possible just because I am already applying a filter on mouse over and removing it on mouse out. I would then be able to add it to the filters list. If not that’s fine. In my code I’m using a Flex 4 Spark Image component.

Answer 1

You should use ColorTransform for this. Below is shown how you can utilise this.

image.addEventListener(MouseEvent.MOUSE_OVER, checkTransform);
image.addEventListener(MouseEvent.MOUSE_OUT, checkTransform);

private function checkTransform(e:event):void
{
    if(e.type == MouseEvent.MOUSE_OVER)
        image.transform.colorTransform = new ColorTransform(0.5, 0.5, 0.5); //multiplies all RGB-values by 0.5
    else
        image.transform.colorTransform = new ColorTransform(1, 1, 1); //restores to default image
}

this should do the trick. For more information on ColorTransform: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/ColorTransform.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6