I have an image and I'd like to add a rollover effect to it so that a user can
click on it as is common in many HTML pages. However the redraw is extremely
jerky. It looks as if it were deleting the component (which pulls all the
elements underneath it up on the window) and then adding it back with the new
image (which pushed all the elements back down again). This is done very
quickly and looks very unprofessional. How do I do this in a way that avoids
this kind of jerkiness?




private function turnOnHighlight(event:MouseEvent):void {
imgLogo.source = "images/mSelectLogo.gif";
}
private function turnOffHighlight(event:MouseEvent):void {
imgLogo.source = "images/mLogo.gif";
}

<mx:Image id="imgLogo" source="images/mLogo.gif"
mouseOver="turnOnHighlight(event)"
mouseOut="turnOffHighlight(event)"/>

The problem is that when you change the source property on an Image object, it
makes another HTTP call to get the new image. It's not smart enough to cache
the bitmap data. You can fix the problem by using Eli Greenfield's SuperImage
instead of Image.


http://www.quietlyscheming.com/blog/...ubt-on-flex-as
-the-best-option-orhow-i-made-my-flex-images-stop-dancing/

Solerous,

There are 2 ways that you can accomplish this.

1. If you are using a transparent gif as your logo, you could take advantage
of the built-in glow effect. Notice the code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Glow id="highlightOn" duration="200" color="0xFFFFFF"
alphaFrom="1.0" alphaTo="0.5" blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0" />
<mx:Glow id="highlightOff" duration="200" color="0xFFFFFF"
alphaFrom="0.5" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0" />
<mx:Image source="@Embed(source='images/logo.png')"
rollOverEffect="{highlightOn}" rollOutEffect="{highlightOff}" x="505" y="24"/>
</mx:Application>

or,

2. rather than changing the source of 1 image, try using 2 images that
crossfade each other. Notice the code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
public function initApp():void
{
this.logo.addEventListener(MouseEvent.ROLL_OVER, logo_rollOver);
this.logo.addEventListener(MouseEvent.ROLL_OUT, logo_rollOut);
}

public function logo_rollOver(event:MouseEvent):void
{
this.logo_highlighted.visible = true;
}

public function logo_rollOut(event:MouseEvent):void
{
this.logo_highlighted.visible = false;
}
]]>
</mx:Script>
<mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" />
<mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" />
<mx:Image id="logo_highlighted"
source="@Embed(source='images/logo-highlighted.png')" visible="false"
showEffect="{fadeIn}" hideEffect="{fadeOut}" x="505" y="222"/>
<mx:Image id="logo" source="@Embed(source='images/logo.png')"
rollOverEffect="{fadeOut}" rollOutEffect="{fadeIn}"
rollOver="logo_rollOver(event);" rollOut="logo_rollOut(event);" x="505"
y="222"/>
</mx:Application>

Both examples result in smooth transitions. Let me know how they work...!

--bholli

Thanks guys, that worked great. I ended up using solution #2 from #bholli.