自定义可收缩菜单

package com.hnisi.screen.common{import flash.events.Event;import flash.events.MouseEvent;import spark.components.supportClasses.SkinnableComponent;[SkinState("expand")][SkinState("collapse")][Event(name="menuChange", type="flash.events.Event")][Event(name="autoPlayedChange", type="flash.events.Event")]public class CollapseMenu extends SkinnableComponent{private var _isCollpased:Boolean = false;private var _index:int = -1;private var _autoPlayed:Boolean;public function CollapseMenu(){super();this.doubleClickEnabled = true;//addEventListener(MouseEvent.DOUBLE_CLICK,onDoubleClick);addEventListener(MouseEvent.ROLL_OVER,onDoubleClick);addEventListener(MouseEvent.ROLL_OUT,onDoubleClick);}[Bindable(event="autoPlayedChange")]public function get autoPlayed():Boolean{return _autoPlayed;}public function set autoPlayed(value:Boolean):void{if( _autoPlayed !== value){_autoPlayed = value;dispatchEvent(new Event("autoPlayedChange"));}}[Bindable]public function get index():int{return _index;}public function set index(value:int):void{_index = value;dispatchEvent(new Event("menuChange"));}protected function onDoubleClick(event:MouseEvent):void{isCollpased = !isCollpased;}[Bindable]public function get isCollpased():Boolean{return _isCollpased;}public function set isCollpased(value:Boolean):void{_isCollpased = value;invalidateSkinState();}override protected function getCurrentSkinState():String{if(isCollpased){return "collapse";}else{return "expand";}}}}

皮肤：

<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"><!-- host component --><fx:Metadata>[HostComponent("com.hnisi.screen.common.CollapseMenu")]</fx:Metadata><fx:Declarations><mx:Sequence id="collapseSequence"><!--<s:Fade alphaTo="0" duration="150" target="{graphGroup}"/>--><s:Resize duration="150" target="{base}"/>        </mx:Sequence>  <mx:Sequence id="expandSequence"><s:Resize duration="150" target="{base}"/>        <!--<s:Fade alphaTo="1" duration="150" target="{graphGroup}"/>--></mx:Sequence></fx:Declarations><s:transitions><mx:Transition effect="{collapseSequence}" fromState="*" toState="collapse"/><mx:Transition effect="{expandSequence}" fromState="collapse" toState="*"/></s:transitions><!-- states --><s:states><s:State name="expand" /><s:State name="collapse" /></s:states><s:Group id="base" top="0" bottom="0" left="0" right="0"><s:Group id="expandGroup" top="0" bottom="0" left="0" right="0" includeIn="expand"><s:Rect top="0" bottom="0" left="0" right="0" topLeftRadiusX="4" topLeftRadiusY="4"bottomLeftRadiusX="4" bottomLeftRadiusY="4"><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="#007EFF"/><s:GradientEntry color="#00BAFF"/></s:LinearGradient></s:fill></s:Rect><s:Label text="自动播放" horizontalCenter="0" color="0xffffff"/><s:Image source="resource/images/btn_play.png" visible="{hostComponent.autoPlayed}"  horizontalCenter="0" click="{hostComponent.autoPlayed = !hostComponent.autoPlayed}"/><s:Image source="resource/images/btn_stop.png" visible="{!hostComponent.autoPlayed}"  horizontalCenter="0" click="{hostComponent.autoPlayed = !hostComponent.autoPlayed}"/><s:VGroup top="50" bottom="20" horizontalCenter="0"><s:HGroup verticalAlign="middle" click="{hostComponent.index=0;}" buttonMode="true"><s:Image width="20" height="20" source="resource/images/icon_menu01.png"/><s:Label text="公司总览"></s:Label></s:HGroup><s:VGroup gap="0" width="100%"><s:Line width="100%"><s:stroke><s:SolidColorStroke color="gray"/></s:stroke></s:Line><s:Line width="100%"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Line></s:VGroup><s:HGroup verticalAlign="middle" click="{hostComponent.index=1;}" buttonMode="true"><s:Image width="20" height="20" source="resource/images/icon_menu05.png"/><s:Label text="网络拓扑"></s:Label></s:HGroup><s:VGroup gap="0" width="100%"><s:Line width="100%"><s:stroke><s:SolidColorStroke color="gray"/></s:stroke></s:Line><s:Line width="100%"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Line></s:VGroup><s:HGroup verticalAlign="middle" click="{hostComponent.index=2;}" buttonMode="true"><s:Image width="20" height="20" source="resource/images/icon_menu02.png"/><s:Label text="ITM业务系统"></s:Label></s:HGroup><s:VGroup gap="0" width="100%"><s:Line width="100%"><s:stroke><s:SolidColorStroke color="gray"/></s:stroke></s:Line><s:Line width="100%"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Line></s:VGroup><s:HGroup verticalAlign="middle" click="{hostComponent.index=3;}" buttonMode="true"><s:Image width="20" height="20" source="resource/images/icon_menu03.png"/><s:Label text="OSS统计视图"></s:Label></s:HGroup><s:VGroup gap="0" width="100%"><s:Line width="100%"><s:stroke><s:SolidColorStroke color="gray"/></s:stroke></s:Line><s:Line width="100%"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Line></s:VGroup><s:HGroup verticalAlign="middle" click="{hostComponent.index=4;}" buttonMode="true"><s:Image width="20" height="20" source="resource/images/icon_menu04.png"/><s:Label text="ITSM3.1统计视图"></s:Label></s:HGroup><s:VGroup gap="0" width="100%"><s:Line width="100%"><s:stroke><s:SolidColorStroke color="gray"/></s:stroke></s:Line><s:Line width="100%"><s:stroke><s:SolidColorStroke color="white"/></s:stroke></s:Line></s:VGroup></s:VGroup></s:Group><s:Group id="collapseGroup" top="0" bottom="0" left="0" right="0" includeIn="collapse"><s:Rect top="0" bottom="0" left="0" right="0" topLeftRadiusX="4" topLeftRadiusY="4" bottomLeftRadiusX="4" bottomLeftRadiusY="4"><s:fill><s:LinearGradient rotation="0"><s:GradientEntry color="#00eaff"/><s:GradientEntry color="#0091ff"/></s:LinearGradient></s:fill></s:Rect><s:VGroup  paddingBottom="24" paddingTop="24" paddingLeft="5" paddingRight="5" fontSize="12" color="white"><s:Label text="导"/><s:Label text="航"/><s:Label text="菜"/><s:Label text="单"/><s:filters><s:DropShadowFilter color="0" blurX="2" blurY="2" distance="1" angle="0"/></s:filters></s:VGroup><!--<s:Label text="导航菜单" paddingBottom="24" paddingTop="24" paddingLeft="5" paddingRight="5" fontSize="14" rotation="-90" maintainProjectionCenter="true"></s:Label>--></s:Group></s:Group></s:Skin>