Spark MotionPath Effect in Flex4

Home Tutorial Flex Flex4 Components Spark MotionPath Effect in Flex4

Spark MotionPath Effect in Flex4
Posted on: July 6, 2010 at 12:00 AM

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.

Download this code

Related Tags for Spark MotionPath Effect in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics