I am trying to create a custom nav menu that uses resize to provide a drop down effect. The intent is to have the each menu item drop down and change color as the mouse rolls over it. On roll out the menu item will resize to it's original state with a bounce effect and when the effectEnd event is fired for the menu item it will change back to it's original color. The problem I'm having is that if you move the mouse quickly over the menu items they all drop down and return to stat properly, but only one or two items with process the effectEnd event and change the color back. The rest of the items still show the rollover color. All I can think of is that for some reason the effectEnd event isn't fireing properly. Is there an easier way to accomplish the effect I want.
Thanks Attach Code <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="1025" height="768" borderStyle="none" creationComplete="creationCompleteHandler()"> <mx:Script> <![CDATA[ import mx.effects.Effect; import mx.events.EffectEvent; import mx.controls.Text; import mx.effects.easing.*; import mx.effects.EffectManager; private var navSelectedMenuItem:VBox; private var navMenuItemStdHeight:int; private var newNavMenuItemSelected:Boolean; private var menuItemOneTimer:Timer; private var menuItemTwoTimer:Timer; private var menuItemThreeTimer:Timer; private var menuItemFourTimer:Timer; private var menuItemFiveTimer:Timer; private var menuItemOverArray:Array = new Array; private function creationCompleteHandler():void { navSelectedMenuItem = cvsHome; navMenuItemStdHeight = cvsSolution.height; navSelectedMenuItem.height = navSelectedMenuItem.height + 20; newNavMenuItemSelected = false; } private function navMenuItemSelectedHandler(event:MouseEvent):void { if (navSelectedMenuItem.name != event.currentTarget.name) { newNavMenuItemSelected = true; navSelectedMenuItem.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT)); resizeNavMenuItemOut.target = navSelectedMenuItem; resizeNavMenuItemOut.end(); resizeNavMenuItemOut.play(); navSelectedMenuItem = event.currentTarget as VBox; resizeNavMenuItemDown.target = event.currentTarget; resizeNavMenuItemDown.end(); resizeNavMenuItemDown.play(); } } private function menuItemTimerListener(event:TimerEvent):void { var mnuItem:VBox; var mnuItemName:String = menuItemOverArray.shift().toString(); mnuItem = this.getChildByName(mnuItemName) as VBox; resizeNavMenuItemOver.target = mnuItem; if (resizeNavMenuItemOver.isPlaying) { resizeNavMenuItemOver.end(); } resizeNavMenuItemOut.target = mnuItem; resizeNavMenuItemOut.play(); switch (mnuItemName) { case "cvsHome": break; case "cvsProducts": break; case "cvsConsiderations": break; case "cvsFeedback": break; case "cvsSolution": break; } } private function resizeNavMenuItemOutRollOutHandler(event:MouseEvent):void { var timerDelay:Number = 300; if (event.currentTarget.name != navSelectedMenuItem.name) { switch (event.currentTarget.name.toString()) { case "cvsHome": menuItemOverArray.push("cvsHome"); menuItemOneTimer = new Timer(timerDelay,1); menuItemOneTimer.addEventListener(TimerEvent.TIMER_COMPLETE, menuItemTimerListener); menuItemOneTimer.start(); break; case "cvsProducts": menuItemOverArray.push("cvsProducts"); menuItemTwoTimer = new Timer(timerDelay,1); menuItemTwoTimer.addEventListener(TimerEvent.TIMER_COMPLETE,menuItemTimerListener); menuItemTwoTimer.start(); break; case "cvsConsiderations": menuItemOverArray.push("cvsConsiderations"); menuItemThreeTimer = new Timer(timerDelay,1); menuItemThreeTimer.addEventListener(TimerEvent.TIMER_COMPLETE,menuItemTimerListener); menuItemThreeTimer.start(); break; case "cvsFeedback": menuItemOverArray.push("cvsFeedback"); menuItemFourTimer = new Timer(timerDelay,1); menuItemFourTimer.addEventListener(TimerEvent.TIMER_COMPLETE,menuItemTimerListener); menuItemFourTimer.start(); break; case "cvsSolution": menuItemOverArray.push("cvsSolution"); menuItemFiveTimer = new Timer(timerDelay,1); menuItemFiveTimer.addEventListener(TimerEvent.TIMER_COMPLETE,menuItemTimerListener); menuItemFiveTimer.start(); break; } } } private function resizeNavMenuItemOverEffectStartHandler(event:EffectEvent):void { if (event.currentTarget.target.name != navSelectedMenuItem.name) { event.currentTarget.target.setStyle("backgroundColor", 0xCC0000); for (var i:int = 0;i<event.currentTarget.target.numChildren;i++) { var child:* = event.currentTarget.target.getChildAt(i); if (child is Label) { child.setStyle("color", 0xCC0000); } } } } private function resizeNavMenuItemOutEffectEndHandler(event:EffectEvent):void { if (event.currentTarget.target.name != navSelectedMenuItem.name || newNavMenuItemSelected) { newNavMenuItemSelected = false; event.currentTarget.target.setStyle("backgroundColor", 0x000000); for (var i:int = 0;i<event.currentTarget.target.numChildren;i++) { var child:* = event.currentTarget.target.getChildAt(i); if (child is Label) { child.setStyle("color", 0x000000); } } } } ]]> </mx:Script> <mx:Resize id="resizeNavMenuItemOut" effectEnd="resizeNavMenuItemOutEffectEndHandler(event)" heightTo="45" easingFunction="mx.effects.easing.Bounce.easeOut" duration="1100"/> <mx:Resize id="resizeNavMenuItemOver" effectStart="resizeNavMenuItemOverEffectStartHandler(event)" heightTo="100" duration="500"/> <mx:Resize id="resizeNavMenuItemDown" heightTo="65" duration="500"/> <mx:VBox x="483" y="0" width="102" height="45" mouseUp="navMenuItemSelectedHandler(event)" rollOverEffect="resizeNavMenuItemOver" rollOut="resizeNavMenuItemOutRollOutHandler(event)" verticalAlign="bottom" backgroundColor="#CC0000" id="cvsHome"> <mx:Label text="Home" width="100%" opaqueBackground="0xffffff" fontSize="13" fontFamily="Arial" color="#CC0000" fontWeight="bold" id="lblHome"/> </mx:VBox> <mx:VBox x="593" y="0" width="102" height="45" mouseUp="navMenuItemSelectedHandler(event)" rollOverEffect="resizeNavMenuItemOver" rollOut="resizeNavMenuItemOutRollOutHandler(event)" verticalAlign="bottom" backgroundColor="#000000" id="cvsProducts"> <mx:Label text="Products" width="100%" opaqueBackground="0xffffff" fontSize="13" fontFamily="Arial" color="#000000" fontWeight="bold" id="lblProducts"/> </mx:VBox> <mx:VBox x="813" y="0" width="102" height="45" mouseUp="navMenuItemSelectedHandler(event)" rollOverEffect="resizeNavMenuItemOver" rollOut="resizeNavMenuItemOutRollOutHandler(event)" verticalAlign="bottom" backgroundColor="#000000" id="cvsConsiderations"> <mx:Label text="Considerations" width="100%" opaqueBackground="0xffffff" fontSize="13" fontFamily="Arial" color="#000000" fontWeight="bold" id="lblConsiderations"/> </mx:VBox> <mx:VBox x="923" y="0" width="102" height="45" mouseUp="navMenuItemSelectedHandler(event)" rollOverEffect="resizeNavMenuItemOver" rollOut="resizeNavMenuItemOutRollOutHandler(event)" verticalAlign="bottom" backgroundColor="#000000" id="cvsFeedback"> <mx:Label text="Feedback" width="100%" opaqueBackground="0xffffff" fontSize="13" fontFamily="Arial" color="#000000" fontWeight="bold" id="lblFeedback"/> </mx:VBox> <mx:VBox x="703" y="0" width="102" height="45" mouseUp="navMenuItemSelectedHandler(event)" rollOverEffect="resizeNavMenuItemOver" rollOut="resizeNavMenuItemOutRollOutHandler(event)" verticalAlign="bottom" backgroundColor="#000000" id="cvsSolution"> <mx:Label text="Solution" width="100%" opaqueBackground="0xffffff" fontSize="13" fontFamily="Arial" color="#000000" fontWeight="bold" id="lblSolution"/> </mx:VBox> </mx:Canvas> -- View this message in context: http://www.nabble.com/Resize-Effect-effectEnd-event-not-fireing-properly-tp16809111p16809111.html Sent from the FlexCoders mailing list archive at Nabble.com.
