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

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.