How to deal with competing effects in Flex?

Question

I'm a beginner at Flex, and having the hardest time, working with Effects.

Right now I'm dealing with the problems faced when dealing with competing effects.

Please look at the following code. I have basically created a short reproducible tests sample which shows the problem I'm facing:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">

    <mx:Script>
     <![CDATA[
      private function showmenu():void
      {Menu.visible= true;
      }
      private function hidemenu():void
      {Menu.visible= false;
      }
     ]]>
    </mx:Script>

    <mx:WipeDown id="wipedown" duration="900"/>
    <mx:WipeUp id="wipeUp" duration="900" />



<mx:Canvas id="main"  width="400" height="400"
    rollOver="showmenu();" rollOut="hidemenu();">
    <mx:Button label="Show Menu" 
      x="100" y="20">
     </mx:Button>

     <mx:Canvas id="Menu" visible="false"
     width="100" height="200"
     backgroundColor="#B8B8B8" x="96" y="35"
     showEffect="{wipedown}" hideEffect="{wipeUp}">

     </mx:Canvas>

</mx:Canvas>    



</mx:Application>

This basically shows a Button, and when you roll over on the button, another canvas, which is going to be a sort of menu, will be displayed. When you roll out, the Menu disappears.

The menu also has some effects, and if you try to start one effect before another is over, it gets into an infinite loop.

To reproduce what I am talking about, rollover the button, and then rollout and then quickly rollover again. You will see that the menu effects get stuck in a loop.

How do I code around this?

Answer 1

I cannot reproduce your problem. No matter where/when I move my mouse in or out, it never goes into a loop. Note that I'm using Flex 3.2. Maybe it depends on which version your using?

Btw, your code doesn't completely match your description: You have the rollOver and rollOut events on the canvas that also contains the canvas that you are showing and hiding. Just a guess, but I can imagine that the effect itself actually causes your mouse to be over or not over the canvas anymore, triggering the rollOver/rollOut, which then again cause the mouse to move in/out... Is that the infinite loop you're experiencing?

Answer 2

If you're having problems with events playing when they shouldn't, just add EffectEvent.EFFECT_START listeners to your events and use it to stop any playing events. e.g,

function _handleEffectStart(e:EffectEvent):void {
  if(e.target == wipedown) {
    wipeup.stop();
  } else {
    wipedown.stop();
  }
}

Or something similar.