Flex菜单弹跳效果

一个很简单的单击效果（弹跳，选中时加下划线），可适用于菜单单击，将下面代码作为MenuItemRenderer。实现这个效果无非就是使用了Move3D。（选自FlexViewer）

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				xmlns:components="com.components.*"
				implements="mx.managers.IFocusManagerComponent"
				buttonMode="true"
				focusEnabled="true"
				useHandCursor="true" 
				click="itemClickHandler(event)">

	<fx:Declarations>
		<s:Move3D id="moveEffect" duration="200" effectEnd="moveEffectEndHandler(event)" repeatBehavior="reverse" repeatCount="2" target="{icon}" yBy="-8" yFrom="0"/>
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;

			/**
			 * 是否打开标识 
			 */
			private var isOpen:Boolean = false;


			/**
			 * 数据更改时触发函数，如果作为菜单的ItemRenderer时，监听DataChangeEvent。否则要外部调用执行。以便实现窗口关闭还原状态
			 */
			public function itemrenderer_dataChangeHandler(open:Boolean):void
			{
				//itemrenderer_dataChangeHandler(event:CustomEvent):void
				//作为renderer时，派发自定义事件，data属性中设置open状态，直接赋值即可。
//				icon.source = event.data.icon;
//				underline.open = event.data.open;

				underline.open = open;
			}


			/**
			 * 鼠标移出事件处理 
			 */
			private function mouseOutHandler(event:MouseEvent):void
			{
				//执行鼠标移出处理
			}

			/**
			 * 鼠标移上事件处理 
			 */
			private function mouseOverHandler(event:MouseEvent):void
			{
				//执行鼠标移上处理
			}

			/**
			 * 单击事件处理函数 
			 */
			private function itemClickHandler(event:MouseEvent):void
			{
				if ( !isOpen )
				{
					moveEffect.end();
					moveEffect.play();
					underline.open = isOpen = true;
				}
			}

			/**
			 * 单击时效果渲染完毕 处理函数 
			 */
			private function moveEffectEndHandler(event:EffectEvent):void
			{
				//执行单击操作
			}

			//--------------------------------------------------------------------------
			//
			//  Focus Management
			//
			//--------------------------------------------------------------------------

			/**
			 * 获取焦点，可在此函数中通过焦点来执行鼠标移上移出处理。 
			 */
			override public function drawFocus(isFocused:Boolean):void
			{
				super.drawFocus(isFocused);

				// Popup the tooltip or remove the menu
				if (isFocused)
				{
					mouseOverHandler(null);
				}
				else
				{
					mouseOutHandler(null);
				}
			}


			/**
			 * 空格事件处理，按下空格键派发Click事件 
			 */
			private var keyboardPressed:Boolean = false;

			override protected function keyDownHandler(event:KeyboardEvent):void
			{
				if (event.keyCode != Keyboard.SPACE)
				{
					return;
				}

				keyboardPressed = true;
				event.updateAfterEvent();
			}

			override protected function keyUpHandler(event:KeyboardEvent):void
			{
				if (event.keyCode != Keyboard.SPACE)
				{
					return;
				}

				if (enabled && keyboardPressed)
				{
					// Mimic mouse click on the button.
					keyboardPressed = false;
					dispatchEvent(new MouseEvent(MouseEvent.CLICK));
				}
				event.updateAfterEvent();
			}
		]]>
	</fx:Script>

	<s:VGroup width="50" height="30" gap="2" horizontalAlign="center" verticalAlign="middle">
		<s:Image id="icon" source="@Embed('assets/images/icons/i_clock.png')" width="25" height="25" buttonMode="true" 
				 mouseOut="mouseOutHandler(event)" mouseOver="mouseOverHandler(event)" smooth="true" useHandCursor="true"/>
		<components:Underline id="underline"/>
	</s:VGroup>

</s:VGroup>

Underline

<?xml version="1.0" encoding="utf-8"?>
<!-- 

	绘制线段

-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var open:Boolean = false;
        ]]>
    </fx:Script>
    <s:Line width="10" includeInLayout="{open}" visible="{open}">
        <s:stroke>
            <s:SolidColorStroke caps="square" color="0x000000" weight="2"/>
        </s:stroke>
    </s:Line>
</s:Group>