Flex Effect Using | Flex 效果使用

Flex中Effect的可以为程序增添特效，可以让程序更生动，下面的源码整理自Using Flex 4.6一书，将常用几种特效都演示一下：

EffectUsingExamples.mxml

<?xml version="1.0" encoding="utf-8"?>
<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"
			   minWidth="955" minHeight="600" pageTitle="Effect Using Examples">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" paddingBottom="40" paddingLeft="40"
						  paddingRight="40" paddingTop="40"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.geom.TransformOffsets;
			// Define an instance of TransformOffsets.
			private var myXForm:TransformOffsets = new TransformOffsets();
			// Initialize the postLayoutTransformOffsets property of the target.
			private function initOffsets():void {
				targetImg7.postLayoutTransformOffsets = myXForm;
			}
			// Move the target 20 pixels to the left and
			// increase its x and y scale by 0.1.
			private function nudgeImageLeft():void {
				targetImg7.postLayoutTransformOffsets.x =
					targetImg7.postLayoutTransformOffsets.x - 20;
				targetImg7.postLayoutTransformOffsets.scaleX =
					targetImg7.postLayoutTransformOffsets.scaleX + 0.1;
				targetImg7.postLayoutTransformOffsets.scaleY =
					targetImg7.postLayoutTransformOffsets.scaleY + 0.1;
			}
			// Move the target 20 pixels to the right and
			// decrease its x and y scale by 0.1.
			private function nudgeImageRight():void {
				targetImg7.postLayoutTransformOffsets.x =
					targetImg7.postLayoutTransformOffsets.x + 20;
				targetImg7.postLayoutTransformOffsets.scaleX =
					targetImg7.postLayoutTransformOffsets.scaleX - 0.1;
				targetImg7.postLayoutTransformOffsets.scaleY =
					targetImg7.postLayoutTransformOffsets.scaleY - 0.1;
			}
			// Reset the transform.
			private function resetImage():void {
				targetImg7.postLayoutTransformOffsets.x = 0;
				targetImg7.postLayoutTransformOffsets.scaleX = 1.0;
				targetImg7.postLayoutTransformOffsets.scaleY = 1.0;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Animate id="scaleUp"
				   target="{myB1}">
			<s:SimpleMotionPath property="scaleX"
								valueFrom="1.0" valueTo="1.5"/>
		</s:Animate>
		<s:Animate id="scaleDown"
				   target="{myB1}">
			<s:SimpleMotionPath property="scaleX"
								valueFrom="1.5" valueTo="1.0"/>
		</s:Animate>
		<s:Animate id="scaleIncrease"
				   target="{myB2}">
			<s:SimpleMotionPath property="scaleX"
								valueFrom="1.0" valueTo="1.5"/>
			<s:SimpleMotionPath property="scaleY"
								valueFrom="1.0" valueTo="1.5"/>
		</s:Animate>
		<s:Animate id="scaleDecrease"
				   target="{myB2}">
			<s:SimpleMotionPath property="scaleX"
								valueFrom="1.5" valueTo="1.0"/>
			<s:SimpleMotionPath property="scaleY"
								valueFrom="1.5" valueTo="1.0"/>
		</s:Animate>
		<s:Parallel id="parallelRMForward1"
				target="{myImage1}">
		<s:Rotate
			angleBy="180"/>
		<s:Move
			xBy="100"
			yBy="100"/>
	</s:Parallel>
	<s:Parallel id="parallelRMBack1"
				target="{myImage1}">
		<s:Rotate
			angleBy="180"/>
		<s:Move
			xBy="-100"
			yBy="-100"/>
	</s:Parallel>
		<s:Parallel id="parallelRMForward2"
					target="{myImage2}">
			<s:Rotate
				angleBy="180"
				autoCenterTransform="true"/>
			<s:Move
				xBy="100"
				yBy="100"
				autoCenterTransform="true"/>
		</s:Parallel>
		<s:Parallel id="parallelRMBack2"
					target="{myImage2}">
			<s:Rotate
				angleBy="180"
				autoCenterTransform="true"/>
			<s:Move
				xBy="-100"
				yBy="-100"
				autoCenterTransform="true"/>
		</s:Parallel>
		<s:Move3D id="moveEffect1" target="{targetImg1}"
				  xBy="100" zBy="100"
				  repeatCount="2" repeatBehavior="reverse"
				  effectStart="playButton1.enabled=false;"
				  effectEnd="playButton1.enabled=true;"/>
		<s:Rotate3D id="rotateEffect1" target="{targetImg2}"
					angleYFrom="0" angleYTo="360"
					repeatCount="2" repeatBehavior="reverse"
					effectStart="playButton2.enabled=false;"
					effectEnd="playButton2.enabled=true;"/>
		<s:Rotate3D id="rotateEffect2" target="{targetImg3}"
					angleYFrom="0" angleYTo="360"
					duration="3000"
					autoCenterTransform="true"
					repeatCount="2" repeatBehavior="reverse"
					effectStart="playButton3.enabled=false;"
					effectEnd="playButton3.enabled=true;"/>
		<s:Rotate3D id="rotateEffect3" target="{targetImg4}"
					angleYFrom="0" angleYTo="360"
					duration="3000"
					repeatCount="2" repeatBehavior="reverse"
					effectStart="playButton4.enabled=false;"
					effectEnd="playButton4.enabled=true;"/>
		<s:Rotate3D id="rotateEffect4" target="{targetImg5}"
					angleZFrom="0" angleZTo="360"
					applyChangesPostLayout="false"
					duration="5000"
					repeatCount="2" repeatBehavior="reverse"
					effectStart="playButton5.enabled=false;"
					effectEnd="playButton5.enabled=true;"/>
		
		<s:Fade id="vsFade" alphaFrom="0" alphaTo="1" duration="1000"
				target="{vs}"/>
</fx:Declarations>
	<s:Label width="100%" fontSize="24" fontFamily="微软雅黑" fontWeight="bold" text="所有示例摘抄自UsingADOBE® FLEX® 4.6"/>
		<s:Group width="100%" height="100%">
			<s:layout>
				<s:TileLayout columnWidth="300" horizontalGap="15" rowHeight="200" verticalGap="15"/>
			</s:layout>
			<s:Panel width="200" height="200" title="Scale example">
				<s:layout>
					<s:VerticalLayout/>
				</s:layout>
				
				<s:Button id="myB1"
						  label="Scale Button"
						  mouseDown="scaleUp.end(); scaleUp.play();"
						  mouseUp="scaleDown.end(); scaleDown.play();"/>
				<s:Button id="myB2"
						  label="Scale Button"
						  mouseDown="scaleDecrease.end(); scaleIncrease.play();"
						  mouseUp="scaleIncrease.end(); scaleDecrease.play();"/>
			</s:Panel>
			<s:Panel width="200" height="200" title="Parallel effect example">
				<s:layout>
					<s:VerticalLayout/>
				</s:layout>
				<s:Button label="Play Effect Forward"
						  x="10" y="10"
						  click="parallelRMForward1.end();parallelRMForward1.play();"/>
				<s:Button label="Play Effect Backward"
						  x="150" y="10"
						  click="parallelRMBack1.end();parallelRMBack1.play();" />
				<s:Image id="myImage1"
						 x="10" y="50" width="100" height="100"
						 source="@Embed('resource/images/castle.png')"/>
			</s:Panel>
			<s:Panel width="200" height="200" title="Parallel effect example">
				<s:layout>
					<s:VerticalLayout/>
				</s:layout>
				<s:Button label="Play Effect Forward"
						  x="10" y="10"
						  click="parallelRMForward2.end();parallelRMForward2.play();"/>
				<s:Button label="Play Effect Backward"
						  x="150" y="10"
						  click="parallelRMBack2.end();parallelRMBack2.play();" />
				<s:Image id="myImage2"
						 width="100" height="100"
						 source="@Embed('resource/images/castle.png')"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:Image id="targetImg1"
						 horizontalCenter="0"
						 verticalCenter="0"
						 width="100" height="100"
						 source="@Embed(source='resource/images/castle.png')"/>
				<s:Button id="playButton1"
						  left="5" bottom="5"
						  label="Move3D"
						  click="moveEffect1.play();"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:Image id="targetImg2"
						 horizontalCenter="0"
						 verticalCenter="0"
						 width="100" height="100"
						 source="@Embed(source='resource/images/castle.png')"/>
				<s:Button id="playButton2"
						  left="5" bottom="5"
						  label="Rotate3D"
						  click="rotateEffect1.play();"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:HGroup
					horizontalCenter="0"
					verticalCenter="0">
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image id="targetImg3" width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
				</s:HGroup>
				<s:Button id="playButton3"
						  left="5" bottom="5"
						  label="Rotate3D"
						  click="rotateEffect2.play();"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:HGroup
					horizontalCenter="0"
					verticalCenter="0">
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image id="targetImg4" width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
				</s:HGroup>
				<s:Button id="playButton4"
						  left="5" bottom="5"
						  label="Rotate3D"
						  click="rotateEffect3.play();"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:HGroup
					horizontalCenter="0"
					verticalCenter="0">
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image id="targetImg5" width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
					<s:Image width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"/>
				</s:HGroup>
				<s:Button id="playButton5"
						  left="5" bottom="5"
						  label="Rotate3D"
						  click="rotateEffect4.play();"/>
			</s:Panel>
			<s:Panel title="Move3D Effect Example"
					 width="200" height="200" >
				<s:HGroup
					horizontalCenter="0"
					verticalCenter="0">
					<s:Image
						width="100" height="100"
						source="@Embed(source='resource/images/castle.png')"/>
					<s:Image id="targetImg7"
							 width="100" height="100"
							 source="@Embed(source='resource/images/castle.png')"
							 creationComplete="initOffsets();"/>
					<s:Image
						width="100" height="100"
						source="@Embed(source='resource/images/castle.png')"/>
				</s:HGroup>
				<s:HGroup left="5" bottom="5">
					<s:Button id="nudgeLeftButton"
							  label="Nudge Left"
							  click="nudgeImageLeft();"/>
					<s:Button id="nudgeRightButton"
							  label="Nudge Right"
							  click="nudgeImageRight();"/>
					<s:Button id="resetButton"
							  label="Reset"
							  click="resetImage();"/>
				</s:HGroup>
			</s:Panel>
		</s:Group>
</s:Application>

效果参加：

http://cachetian.com/blog/tech/flex/examples/EffectUsingExamples.html