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:
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>
0
<s:Keyframe
time=" 250 "
value=" 0.5 " />
<s:Keyframe
time=" 500 "
value=" 1.0 " />
<s:Keyframe
time=" 750 "
value=" 0.5 " />
1
<s:Keyframe
time=" 1000 "
value=" 1.0 " />
<s:Keyframe
time=" 1250 "
value=" 0.5 " />
<s:Keyframe
time=" 1500 "
value=" 1.0 " />
2
<s:Keyframe
time=" 1750 "
value=" 0.5 " />
<s:Keyframe
time=" 2000 "
value=" 1.0 " />
<s:Keyframe
time=" 2250 "
value=" 0.5 " />
3
<s:Keyframe
time=" 2500 "
value=" 1.0 " />
<s:Keyframe
time=" 2750 "
value=" 0.5 " />
<s:Keyframe
time=" 3000 "
value=" 1.0 " />
4
<s:Keyframe
time=" 3250 "
value=" 0.5 " />
<s:Keyframe
time=" 3500 "
value=" 1.0 " />
</s:keyframes>
5
</s:MotionPath>
</s:motionPaths>
</s:AnimateTransform>
6
</fx:Declarations>
<s:Panel
title=" Spark MotionPath Effect
Example "
chromeColor="
#000000 "
7
color="
#CCCCCC "
width="
410 "
height="
239 " >
8
<mx:ApplicationControlBar
width="
409 "
horizontalAlign="
center " >
9
<s:Label
text=" Click on Image for showing
the effect "
fontFamily="
verdana "
color="
#000000 "
0
x="
93 "
y=" 41 " />
</mx:ApplicationControlBar>
<mx:Image
id=" footballImage "
1
source="
@Embed(source='file:/C:/work/bikrant/image/roseindia.gif') "
click="motionpathEffect.end();motionpathEffect.play();"
x="
81 "
y=" 59 " />
2
</s:Panel>
</s:Application>
Output:
3
Running Application:
To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.0.0 or greater is not installed.
Download this code
4
