Flex实现iPhone屏幕切换效果

[b][color=red]注[/color]：本文出自dox-pro.iteye.com，为Dox.Pro原创，转载请注明出处！[/b]

今天因为公司需要，想着写些Flex特效，拿着手里的iTouch正在思索做什么样的特效呢？突然想到可以做成iPhone视图间切换的效果，于是试着写了一个，与大家分享一下，欢迎高手排砖指教！
这里贴出air版本的源代码，附件有Flex、Air版本的源代码和发布的Air应用
注：附件下载后去除“.rar”既可使用

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="610" minHeight="516"
			   maxWidth="610" maxHeight="516"
			   currentState="mainScreen">

	<s:states>

		<s:State name="mainScreen"/>

		<s:State name="secondScreen"/>

		<s:State name="thirdScreen"/>

		<s:State name="forthScreen"/>

	</s:states>

	<!-- 
		********** Transitions Defination ************* 
	-->
	<s:transitions>

		<!-- to right transition -->
		<s:Transition fromState="mainScreen" toState="secondScreen">

			<s:Sequence>

				<s:Parallel targets="{[main, second]}">

					<s:AddAction/>

					<s:Fade target="{main}"/>

					<s:Move target="{main}" xTo="-50"/>

					<s:Fade target="{second}"/>

					<s:Move target="{second}" xFrom="380"/>

				</s:Parallel>

				<s:RemoveAction targets="{[main, second]}"/>

			</s:Sequence>

		</s:Transition>

		<s:Transition fromState="secondScreen" toState="thirdScreen">

			<s:Sequence>

				<s:Parallel targets="{[second, third]}">

					<s:AddAction/>

					<s:Fade target="{second}"/>

					<s:Move target="{second}" xTo="-50"/>

					<s:Fade target="{third}"/>

					<s:Move target="{third}" xFrom="380"/>

				</s:Parallel>

				<s:RemoveAction targets="{[second, third]}"/>

			</s:Sequence>

		</s:Transition>

		<s:Transition fromState="thirdScreen" toState="forthScreen">

			<s:Sequence>

				<s:Parallel targets="{[third, forth]}">

					<s:AddAction/>

					<s:Fade target="{third}"/>

					<s:Move target="{third}" xTo="-50"/>

					<s:Fade target="{forth}"/>

					<s:Move target="{forth}" xFrom="380"/>

				</s:Parallel>

				<s:RemoveAction targets="{[third, forth]}"/>

			</s:Sequence>

		</s:Transition>

		<!-- to left transition -->
		<s:Transition fromState="secondScreen" toState="mainScreen">

			<s:Sequence>

				<s:Parallel targets="{[second, main]}">

					<s:AddAction/>

					<s:Fade target="{second}"/>

					<s:Move target="{second}" xTo="380"/>

					<s:Fade target="{main}"/>

					<s:Move target="{main}" xFrom="-50"/>

				</s:Parallel>

				<s:RemoveAction targets="{[second, main]}"/>

			</s:Sequence>

		</s:Transition>

		<s:Transition fromState="thirdScreen" toState="secondScreen">

			<s:Sequence>

				<s:Parallel targets="{[third, second]}">

					<s:AddAction/>

					<s:Fade target="{third}"/>

					<s:Move target="{third}" xTo="380"/>

					<s:Fade target="{second}"/>

					<s:Move target="{second}" xFrom="-50"/>

				</s:Parallel>

				<s:RemoveAction targets="{[third, second]}"/>

			</s:Sequence>

		</s:Transition>

		<s:Transition fromState="forthScreen" toState="thirdScreen">

			<s:Sequence>

				<s:Parallel targets="{[forth, third]}">

					<s:AddAction/>

					<s:Fade target="{forth}"/>

					<s:Move target="{forth}" xTo="380"/>

					<s:Fade target="{third}"/>

					<s:Move target="{third}" xFrom="-50"/>

				</s:Parallel>

				<s:RemoveAction targets="{[forth, third]}"/>

			</s:Sequence>	

		</s:Transition>

	</s:transitions>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			private function toLeftScreen():void
			{
				switch (currentState)
				{
					case 'secondScreen':
						currentState = 'mainScreen';
						break;
					case 'thirdScreen':
						currentState = 'secondScreen';
						break;
					case 'forthScreen':
						currentState = 'thirdScreen';
						break;
					default:
						break;
				}
			}

			private function toRightScreen():void
			{
				switch (currentState)
				{
					case 'mainScreen':
						currentState = 'secondScreen';
						break;
					case 'secondScreen':
						currentState = 'thirdScreen';
						break;
					case 'thirdScreen':
						currentState = 'forthScreen';
						break;
					default:
						break;
				}
			}
		]]>
	</fx:Script>

	<s:Button id="leftButton" label="上一视图"
			  click="toLeftScreen()"
			  height="37" y="389" x="210" width="92"/>

	<s:Button id="rightButton" label="下一视图"
			  click="toRightScreen()"
			  height="36" y="390" x="327" width="89"/>

	<mx:Image id="main"
			  includeIn="mainScreen" source="image/MainScreen.png" 
			  x.mainScreen="210" y.mainScreen="75" width="206" height="306" 
			  depth="1"/>

	<mx:Image id="second"
			  includeIn="secondScreen" source="image/TwoScreen.jpg" 
			  x.secondScreen="210" y.secondScreen="75" width="206" height="306"
			  depth="2"/>

	<mx:Image id="third"
			  includeIn="thirdScreen" source="image/ThreeScreen.jpg" 
			  x.thirdScreen="210" y.thirdScreen="75" width="206" height="306"
			  depth="3"/>

	<mx:Image id="forth"
			  includeIn="forthScreen" source="image/FourScreen.jpg" 
			  x.forthScreen="210" y.forthScreen="75" width="206" height="306"
			  depth="4"/>
	<s:Label  x="210" y="52" text="Flex实现iPhone视图切换效果"
			  fontWeight="bold" fontSize="15"/>


</s:WindowedApplication>