Spark MotionPath Effect in Flex4
MotionPath is the collection of KeyFrames. A MotionPath can define any number of KeyFrames.
MotionPath is the collection of KeyFrames. A MotionPath can define any number of KeyFrames.Spark MotionPath Effect in Flex4:
MotionPath is the collection of KeyFrames. A MotionPath
can define any number of KeyFrames. The tag of MotionPath is <s:MotionPath>. The
syntax is of MotionPath is following:
<s:MotionPath
Property=""
/>
In this example you can see how we can use the MotionPath in your application.
Example:
|
<?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"> <fx:Declarations> <s:AnimateTransform id="motionpathEffect" target="{footballImage}"> <s:motionPaths> <s:MotionPath property="scaleX"> <s:keyframes> <s:Keyframe time="250" value="0.5"/> <s:Keyframe time="500" value="1.0"/> <s:Keyframe time="750" value="0.5"/> <s:Keyframe time="1000" value="1.0"/> <s:Keyframe time="1250" value="0.5"/> <s:Keyframe time="1500" value="1.0"/> <s:Keyframe time="1750" value="0.5"/> <s:Keyframe time="2000" value="1.0"/> <s:Keyframe time="2250" value="0.5"/> <s:Keyframe time="2500" value="1.0"/> <s:Keyframe time="2750" value="0.5"/> <s:Keyframe time="3000" value="1.0"/> <s:Keyframe time="3250" value="0.5"/> <s:Keyframe time="3500" value="1.0"/> </s:keyframes> </s:MotionPath> <s:MotionPath property="scaleY"> <s:keyframes> <s:Keyframe time="250" value="0.5"/> <s:Keyframe time="500" value="1.0"/> <s:Keyframe time="750" value="0.5"/> <s:Keyframe time="1000" value="1.0"/> <s:Keyframe time="1250" value="0.5"/> <s:Keyframe time="1500" value="1.0"/> <s:Keyframe time="1750" value="0.5"/> <s:Keyframe time="2000" value="1.0"/> <s:Keyframe time="2250" value="0.5"/> <s:Keyframe time="2500" value="1.0"/> <s:Keyframe time="2750" value="0.5"/> <s:Keyframe time="3000" value="1.0"/> <s:Keyframe time="3250" value="0.5"/> <s:Keyframe time="3500" value="1.0"/> </s:keyframes> </s:MotionPath> </s:motionPaths> </s:AnimateTransform> </fx:Declarations> <s:Panel title="Spark MotionPath Effect Example" chromeColor="#000000" color="#CCCCCC" width="410" height="239"> <mx:ApplicationControlBar width="409" horizontalAlign="center"> <s:Label text="Click on Image for showing the effect" fontFamily="verdana" color="#000000" x="93" y="41"/> </mx:ApplicationControlBar> <mx:Image id="footballImage" source="@Embed(source='file:/C:/work/bikrant/image/roseindia.gif')" click="motionpathEffect.end();motionpathEffect.play();" x="81" y="59"/> </s:Panel> </s:Application> |
Output:
Running Application:
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
