Flex4Fun

Following example show how use Rotate3D to create difference Menu.

assets/menu.xml

<?xml version="1.0" encoding="UTF-8"?>
<MENU>
	<menu>
		<color>0x746c55</color>
		<label>Menu 1</label>
	</menu>
	<menu>
		<color>0xaa7972</color>
		<label>Menu 2</label>
	</menu>
	<menu>
		<color>0x1e477f</color>
		<label>Menu 3</label>
	</menu>
	<menu>
		<color>0xca7500</color>
		<label>Menu 4</label>
	</menu>
	<menu>
		<color>0xdbbb4c</color>
		<label>Menu 5</label>
	</menu>
	<menu>
		<color>0x5a6eb5</color>
		<label>Menu 6</label>
	</menu>
	<menu>
		<color>0x6a56ab</color>
		<label>Menu 7</label>
	</menu>
	<menu>
		<color>0x098b71</color>
		<label>Menu 8</label>
	</menu>
	<menu>
		<color>0x0093b4</color>
		<label>Menu 9</label>
	</menu>
	<menu>
		<color>0xbf1c2d</color>
		<label>Menu 10</label>
	</menu>

</MENU>

comp/MyMenuItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="false"
				visible="false"
				depth="0"
				depth.hovered="1"
				buttonMode="true">
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
	</s:states>
	<fx:Script>
		<![CDATA[
			import mx.core.FlexGlobals;
			private var num:Number=270;
			private var angle:Number=0;
			private var degress:Number=0;
			private var radius:Number=200;

			override public function set itemIndex(value:int):void
			{
				super.itemIndex=value;

				if (value == 0)
				{
					doEffect(value);
				}

			}

			private function doEffect(value:int):void
			{
				degress=degress + (2 * value);
				angle=degress * (Math.PI / 180);
				var xpos:Number=radius * Math.cos(angle);
				var ypos:Number=radius * Math.sin(angle);
				this.x=xpos + 100;
				this.y=ypos + 100;
				this.visible=true;
				num=num + 20 * value;
				FlexGlobals.topLevelApplication.myEffect.angleZFrom=num - 15;
				FlexGlobals.topLevelApplication.myEffect.angleZTo=num;
				FlexGlobals.topLevelApplication.myEffect.play([this]);
			}
		]]>
	</fx:Script>
	<s:postLayoutTransformOffsets>
		<mx:TransformOffsets id="scale"
							 scaleX.hovered="1.1"
							 scaleY.hovered="1.1"/>
	</s:postLayoutTransformOffsets>
	<s:transitions>
		<mx:Transition fromState="normal"
					   toState="hovered"
					   autoReverse="true">
			<s:Animate target="{scale}"
					   duration="300">
				<s:SimpleMotionPath property="scaleX"/>
				<s:SimpleMotionPath property="scaleY"/>
			</s:Animate>
		</mx:Transition>
		<mx:Transition fromState="hovered"
					   toState="normal"
					   autoReverse="true">
			<s:Animate target="{scale}"
					   duration="300">
				<s:SimpleMotionPath property="scaleX"/>
				<s:SimpleMotionPath property="scaleY"/>
			</s:Animate>
		</mx:Transition>
	</s:transitions>
	<s:BorderContainer id="bc"
					   backgroundColor="{data.color}"
					   width="150"
					   height="50"
					   cornerRadius="5"
					   depth="0"
					   depth.hovered="1">
		<s:layout>
			<s:VerticalLayout horizontalAlign="center"
							  verticalAlign="middle"/>
		</s:layout>
		<s:Label text="{data.label}"
				 fontSize="20"
				 color="white"/>
	</s:BorderContainer>

</s:ItemRenderer>

Flex3DExample1.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--created:Nov 9, 2010 file:Main.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   backgroundColor="0" viewSourceURL="srcview/index.html">

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			private var num:Number=270;
			private var index:int=1;
			private var angle:Number=0;
			private var degress:Number=0;
			private var radius:Number=200;

			[Bindable]
			private var myMenuDB:ArrayCollection;

			protected function dg_creationCompleteHandler(event:FlexEvent):void
			{
				myMenuDB=new ArrayCollection(this.myMenu.menu as Array);

			}

			protected function myEffect_effectEndHandler(event:EffectEvent):void
			{
				if (index < this.dg.numElements)
				{
					degress=degress + 2;
					angle=degress * (Math.PI / 180);
					var xpos:Number=radius * Math.cos(angle);
					var ypos:Number=radius * Math.sin(angle);
					this.dg.getElementAt(index).x=xpos + 100;
					this.dg.getElementAt(index).y=ypos + 100;
					this.dg.getElementAt(index).visible=true;
					num=num + 20;
					this.myEffect.angleZFrom=num - 15;
					this.myEffect.angleZTo=num;
					this.myEffect.play([this.dg.getElementAt(index)]);
					index++;
				}

			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<s:Rotate3D id="myEffect"
					duration="50"
					effectEnd="myEffect_effectEndHandler(event)"/>
		<fx:Model id="myMenu"
				  source="assets/menu.xml"/>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout verticalAlign="middle"
						  horizontalAlign="center"/>
	</s:layout>
	<s:Group id="g"
			 width="400"
			 height="400">
		<s:DataGroup id="dg"
					 dataProvider="{this.myMenuDB}"
					 itemRenderer="comp.MyMenuItem"
					 creationComplete="dg_creationCompleteHandler(event)"/>

	</s:Group>
</s:Application>

Demo and Source

Originally posted 2010-11-09 12:44:51.