FLEX: change image colors on mouse over - apache-flex

Question

I want to change the color of my image when I move the mouse over it.
So I've prepared 2 images and this is the eventListener:
private function mouseOverHandler(e:MouseEvent):void {
e.target.source = "#Embed(source='../icons/userIconOver.png')";
}
Unfortunately when I move the mouse over, I only see a blank image (error, image not found). However the compiler doesn't give me any error, and I tried to use the same path of the original image, and also to remove "../" in case he is referencing from root directory in run-time. But still nothing.
The image is stored there, of course.
However if I can apply an effect to change the color from blue to orange to my image (by preserving the transparency), I could solve differently
Thanks

Answer 1

This isn't the easiest way to do what you want. Stylesheets were built for this, so use the skins styles for your various states. Example:
.backButton{
upSkin: Embed(source="BackButton.png");
downSkin: Embed(source="BackButtonDown.png");
overSkin: Embed(source="BackButtonOn.png");
disabledSkin: Embed(source="BackButton.png");
selectedUpSkin: Embed(source="BackButtonDown.png");
selectedDownSkin: Embed(source="BackButtonDown.png");
selectedOverSkin: Embed(source="BackButtonDown.png");
selectedDisabledSkin: Embed(source="BackButtonDown.png");
}
It's much easier than trying to programatically change states every time you need to do so.

Answer 2

While I think Robusto's solution is best, the problem with your existing code is that you're pointing the source at a string. You're not using MXML, so the compiler isn't going to parse the Embed code for you, you'll need to embed the image seperately:
(at the top of the class:)
[Embed(source='../icons/userIconOver.png')]
public var myImageRef:Class
(in your event handler)
e.target.source = myImageRef;