FLEX: change image colors on mouse over...

Question

hi,

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;