Flex image mouse over

0
votes

I have the next code that show a image and when mouse is over change it.

  <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg" id="imgOne"   
  mouseOver="imgOne.source=ConfigApp.getResourcesPath()+'/img_over.jpg'"
  mouseOut="imgOne.source=ConfigApp.getResourcesPath()+'/img.jpg'"/>

I have 2 problems:

1st: If I pass fast with the mouse over the image, some times the image state with mouseOver image (don't detect the mouseOut event).

2nd: In the moment that mouse is over there are a few miliseconds when the aren't any image, so its looks like a white flash every time that mouse is over.

2
apache-fleximagemouseovermouseout

2 Answers

4
votes

2nd issue: Its loading the image each time, this flash will get worse when on a remote connection. instead, cahce the image in a class and switch the class reference.

[Embed(source="/assets/imageOver.png")]
public static const overImage:Class;
[Embed(source="/assets/img.png")]
public static const image:Class;

Then switch them like this...

<mx:Image source="{image}" id="imgOne"   
  mouseOver="imgOne.source=overImage"
  mouseOut="imgOne.source=image"/>
1
votes

I'd rather make something like this, it solves all the problems:

[Bindable] public var isOurMouse:Boolean = false;

<mx:Canvas>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg"
        mouseOver="isOurMouse = true"
        mouseOut="isOurMouse = false"/>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img_over.jpg"
        mouseEnabled="false" mouseChildren="false"
        visible="{isOurMouse}"/>
</mx:Canvas>

To the point, if you want your image not to blick on reload, you should have two images, one on another, where background one reloads only after the foreground one has completed loading. Actually, your image blicks, but you don't see it:

<mx:Canvas>
    <mx:Image id="imgBkg"/>
    <mx:Image id="imgFrg"
        source="{something}"
        complete="imgBkg.source = imgFrg.source"/>
</mx:Canvas>