The perfect roll over slide out menu in Flex

Getting a roll over to work properly in Flex is no fun.

The Scenario

Mouse rolls over a tab, then the tab "slides out" revealing a tool bar or something.

The Tutorial

There are a few things you need to do to get this working right, let's walk through the steps.

1. There's a few ways to do this, but I'm shooting for easiest. Let's say you have a top-oriented menu (top-right) that needs to slide down from 25 pixels to 80 pixels tall. Start by making our canvas.
   

   <mx:Canvas y="-55" right="10"  height="80" width="600" id="slider">
       <mx:Label text="Slider content"/>
   </mx:Canvas>
   

   Now you should have a nice canvas with only 25 pixels showing.

2. Now we need to know something... is a transition happening or not? To do this, we'll create a variable called transitionHappening.
   

   private var transitionHappening:Boolean=false;
   

3. Now let's make some effects! Simple move in and move out will do.
   

   	<mx:Move yFrom="-55" yTo="0" duration="400" target="{slider}" id="moveOut" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;"/>
   	<mx:Move yFrom="0" yTo="-55" duration="500" target="{slider}" id="moveIn" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;" />	
   

   Pretty straight forward eh? Moving from -55 to 0 and back, targeting the slider, and setting the boolean off and on. We'll later use this boolean to reduce errors in rolling over and prevent duplicate calls to the rollover and rollout events.

4. Now let's get jiggy with some action script... my favorite part. We only need 3 lil' functions. An init, a rollover, and a rollout. This is the most important concept in this post. If you do not remove listeners and add them again, you will get duplicate calls... I don't know why. For some reason Flex is not the greatest and firing events at the appropriate time.
   

   private function init():void{
   	slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
   }
   			
   private function rollOver(event:MouseEvent):void{
   	if(!transitionHappening){
   		moveOut.play();
   		slider.removeEventListener(MouseEvent.ROLL_OVER,rollOver);
   		slider.addEventListener(MouseEvent.ROLL_OUT,rollOut);
   		}
            }
   	private function rollOut(event:MouseEvent):void{
   		if(!transitionHappening){
   			moveIn.play(); 
   			slider.removeEventListener(MouseEvent.ROLL_OUT,rollOut);
   			slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
   		}
   	}
   

5. The last step is to add a creationComplete call to init, and you're done!

The finished code

<mx:Application creationComplete="init()"  xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
	<mx:Script>
private var transitionHappening:Boolean=false;
private function init():void{
				slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
			}
			
			private function rollOver(event:MouseEvent):void{
				if(!transitionHappening){
					moveOut.play();
					slider.removeEventListener(MouseEvent.ROLL_OVER,rollOver);
					slider.addEventListener(MouseEvent.ROLL_OUT,rollOut);
				}
			}
			private function rollOut(event:MouseEvent):void{
				if(!transitionHappening){
					moveIn.play(); 
					slider.removeEventListener(MouseEvent.ROLL_OUT,rollOut);
					slider.addEventListener(MouseEvent.ROLL_OVER,rollOver);
				}
			}
        </mx:Script>
<mx:Move yFrom="-55" yTo="0" duration="400" target="{slider}" id="moveOut" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;"/>
	<mx:Move yFrom="0" yTo="-55" duration="500" target="{slider}" id="moveIn" effectStart="transitionHappening=true;" effectEnd="transitionHappening=false;" />
<mx:Canvas y="-55" right="10"  height="80" width="600" id="slider" backgroundColor="#ff0000">
<mx:Text text="YAY!" />
</mx:Canvas>
	
</mx:Application>

• actionscript 3
• as3
• flash
• flex
• flex 3
• mx:image