Question

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.

Answer 1

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>