Monthly Archives: April, 2008

Creating smooth rollOver and rollOut Effects

In the Flex framework, if you have a rollOver and rollOut effect set on a particular component, you might experience some very jerky movement when you roll over and out of the components quickly. Here is an example: Non-Smooth Effects. Try rolling over and out of the Buttons quickly. You will notice that the movement is not smooth. The reason for this is explained in bug SDK-430.

” Currently in rollOver if the user roll’s out before the rollOver effect finishes, the framework will call end on the rollOver effect, then play the roll out effect. The result is jarring.”

To get around this, you need to manage each effect instance that plays. If the instance has not completed, then, your rollOut effect should be to do a “reverse” on the effect. Jason Szeto posted a simple example of how to do this in the bug. Download the bug file “ZoomRollOver.mxml”. Here is the code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”&gt;
<mx:Script>
import mx.effects.*;
import mx.effects.effectClasses.*;
import mx.events.*;
import mx.core.*;

public var resizeInst:ResizeInstance;

public function handleMouse(event:MouseEvent):void
{
if (resizeInst)
resizeInst.reverse();
else
r.play([event.currentTarget],event.type==MouseEvent.MOUSE_OUT);
}

</mx:Script>

<mx:Resize id=”r” heightTo=”100″ heightFrom=”22″ effectStart=”resizeInst = ResizeInstance(event.effectInstance);” effectEnd=”resizeInst=null”/>

<mx:Button width=”200″ mouseOver=”handleMouse(event)” mouseOut=”handleMouse(event)” />
</mx:Application>

I have modified this example to work for a group of Buttons. This involved managing all of the effectInstances that were playing in an Array (because multiple instances could be running at once). Hope this helps someone since I’ve seen this asked about on multiple forums.

Demo: ZoomRollOverGroup_withEffects.swf

Sample Code: ZoomRollOverGroup_withEffects.mxml

I’m not sure this is the cleanest solution, but it seems to work. Modify it as much as you’d like.