| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0014)about:internet --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../style.css" type="text/css" media="screen"><link rel="stylesheet" href="../../../print.css" type="text/css" media="print"><link rel="stylesheet" href="../../../override.css" type="text/css"><meta name="keywords" content="MotionPath,spark.effects.animation.MotionPath,LOOP,REVERSE,animationTarget,currentValue,cycleFraction,cycleTime,duration,easer,easer,interpolator,interpolator,isPlaying,keyframes,motionPaths,playReversed,playheadTime,property,repeatBehavior,repeatCount,repeatDelay,startDelay,time,value,valueBy,valueBy,valueFrom,valueTo,animationEnd,animationRepeat,animationStart,animationStop,animationUpdate,clone,clone,end,getValue,pause,play,resume,stop"><title>spark.effects.animation.MotionPath</title><script src="../../../AC_OETags.js" type="text/javascript"></script></head><body><script language="javascript" type="text/javascript" src="../../../asdoc.js"></script><script language="javascript" type="text/javascript" src="../../../help.js"></script><script language="javascript" type="text/javascript" src="../../../cookies.js"></script><script language="javascript" type="text/javascript"><!-- |
| asdocTitle = 'MotionPath - ApacheFlex API Reference'; |
| var baseRef = '../../../'; |
| window.onload = configPage; |
| --></script> |
| <script type="text/javascript"> |
| scrollToNameAnchor(); |
| </script><table class="titleTable" cellpadding="0" cellspacing="0" id="titleTable" style="display:none"><tr><td class="titleTableTitle" align="left">Apache Flex 4.16.1 API Reference </td><td class="titleTableTopNav" align="right"><a href="../../../package-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Packages</a> | <a href="../../../class-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Classes</a> | <a href="../../../all-index-A.html" onclick="loadClassListFrame('../../../index-list.html')">Index</a> | <a id="framesLink1" href="../../../index.html?spark/effects/animation/MotionPath.html&spark/effects/animation/class-list.html">Frames</a><a id="noFramesLink1" style="display:none" href="" onclick="parent.location=document.location"> No Frames </a></td><td class="titleTableLogo" align="right" rowspan="3"><img src="../../../images/logo.jpg" class="logoImage" alt="AdobeLogo" title="AdobeLogo"></td></tr><tr class="titleTableRow2"><td class="titleTableSubTitle" id="subTitle" align="left">MotionPath</td><td class="titleTableSubNav" id="subNav" align="right"><a href="#propertySummary">Properties</a> | <a href="#methodSummary">Methods</a> | <a href="#includeExamplesSummary">Examples</a></td></tr><tr class="titleTableRow3"><td colspan="3"> </td></tr></table><script language="javascript" type="text/javascript" xml:space="preserve"> |
| <!-- |
| |
| if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("MotionPath"); titleBar_setSubNav(false,true,false,false,false,false,false,false,true,true,false ,false,false,false,false,false);} |
| --> |
| </script><div xmlns:fn="http://www.w3.org/2005/xpath-functions" class="MainContent"><table class="classHeaderTable" cellpadding="0" cellspacing="0"><tr><td class="classHeaderTableLabel">Package</td><td><a href="package-detail.html" onclick="javascript:loadClassListFrame('class-list.html')">spark.effects.animation</a></td></tr><tr><td class="classHeaderTableLabel">Class</td><td class="classSignature">public class MotionPath</td></tr><tr><td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">MotionPath <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> Object</td></tr><tr><td class="classHeaderTableLabel">Subclasses</td><td> <a href="../../../spark/effects/animation/SimpleMotionPath.html">SimpleMotionPath</a></td></tr></table><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p></p><p></p> |
| The MotionPath class defines the collection of Keyframes objects for an effect, |
| and the name of the property on the target to animate. |
| Each Keyframe object defines the value of the property at a specific time during an effect. |
| The effect then calculates the value of the target property |
| by interpolating between the values specified by two key frames. |
| |
| <p></p><a name="mxmlSyntaxSummary"></a><span class="classHeaderTableLabel">MXML Syntax</span><span id="showMxmlLink" style="display:none"><a href="#mxmlSyntaxSummary" onclick="toggleMXMLOnly();"><img src="../../../images/collapsed.gif" title="collapsed" alt="collapsed" class="collapsedImage">Show MXML Syntax</a><br/></span><span id="hideMxmlLink"><a href="#mxmlSyntaxSummary" onclick="toggleMXMLOnly();"><img src="../../../images/expanded.gif" title="expanded" alt="expanded" class="expandedImage">Hide MXML Syntax</a></span><div id="mxmlSyntax" class="mxmlSyntax"> <p>The <code><s:MotionPath></code> tag |
| inherits the tag attributes of its superclass, |
| and adds the following tag attributes:</p> |
| |
| <pre> |
| <s:MotionPath |
| id="ID" |
| interpolator="NumberInterpolator" |
| keyframes="val" |
| property="val" |
| /> |
| </pre> |
| |
| </div><script language="javascript" type="text/javascript"><!-- |
| setMXMLOnly(); |
| --></script><p><span class="classHeaderTableLabel">Default MXML Property</span><code>keyframes</code></p><p><a href="#includeExamplesSummary">View the examples</a></p><p><span class="classHeaderTableLabel">See also</span></p><div class="seeAlso"><a href="Keyframe.html" target="">Keyframe</a><br/><a href="../../../spark/effects/interpolation/NumberInterpolator.html" target="">spark.effects.interpolation.NumberInterpolator</a></div><br/><hr></div><a name="propertySummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Properties</div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableProperty"><tr><th> </th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a href="#interpolator" class="signatureLink">interpolator</a> : <a href="../../../spark/effects/interpolation/IInterpolator.html">IInterpolator</a><div class="summaryTableDescription"> |
| The interpolator determines how in-between values in an animation |
| are calculated.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a href="#keyframes" class="signatureLink">keyframes</a> : Vector.<<a href="../../../spark/effects/animation/Keyframe.html">Keyframe</a>><div class="summaryTableDescription"> |
| A sequence of Keyframe objects that represent the time/value pairs |
| that the property takes during the animation.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a href="#property" class="signatureLink">property</a> : String<div class="summaryTableDescription"> |
| The name of the property on the effect target to be animated.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr></table></div><a name="methodSummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Methods </div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableMethod"><tr><th> </th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#MotionPath()" class="signatureLink">MotionPath</a>(property:String = null)</div><div class="summaryTableDescription"> |
| Constructor.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#clone()" class="signatureLink">clone</a>():<a href="../../../spark/effects/animation/MotionPath.html">MotionPath</a></div><div class="summaryTableDescription"> |
| Returns a copy of this MotionPath object, including copies |
| of each keyframe.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getValue()" class="signatureLink">getValue</a>(fraction:Number):Object</div><div class="summaryTableDescription"> |
| Calculates and returns an interpolated value, given the elapsed |
| time fraction.</div></td><td class="summaryTableOwnerCol">MotionPath</td></tr></table></div><script language="javascript" type="text/javascript"><!-- |
| showHideInherited(); |
| --></script><div class="MainContent"><div class="detailSectionHeader">Property Detail</div><a name="propertyDetail"></a><a name="interpolator"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">interpolator</td><td class="detailHeaderType">property</td></tr></table><div class="detailBody"><code>public var interpolator:<a href="../../../spark/effects/interpolation/IInterpolator.html">IInterpolator</a></code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p> |
| The interpolator determines how in-between values in an animation |
| are calculated. By default, the MotionPath class assumes that the values are |
| of type Number and can calculate in-between Number values automatically. |
| If the MotionPath class is given keyframes with non-Number values, or if the |
| desired behavior should use a different approach to interpolation |
| (such as per-channel color interpolation), then an interpolator |
| should be supplied. |
| <p>Flex supplies predefined interpolators in the spark.effects.interpolation package.</p> |
| |
| </p></div><a name="propertyDetail"></a><a name="keyframes"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">keyframes</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>public var keyframes:Vector.<<a href="../../../spark/effects/animation/Keyframe.html">Keyframe</a>></code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p> |
| A sequence of Keyframe objects that represent the time/value pairs |
| that the property takes during the animation. Each successive |
| pair of keyframes controls the animation during the time interval |
| between them. |
| The optional <code>easer</code> and <code>valueBy</code> |
| properties of the later keyframe are used to determine the behavior |
| during that interval. The sequence of keyframes must be sorted in |
| order of increasing time values. |
| |
| <p>Animations always start at time=0 and lasts for a duration |
| equal to the <code>time</code> value in the final keyframe. |
| If no keyframe is defined at time=0, |
| that keyframe is implicit, using the value of the |
| target property at the time the animation begins. </p> |
| <p>Because keyframes explicitly define the times involved in an animation, |
| the duration for an effect using keyframes is set according to the maximum time |
| of the final keyframe of all MotionPaths in the effect. |
| For example, if an effect has keyframes |
| at times 0, 500, 1000, and 2000, then the effective duration of that |
| effect is 2000 ms, regardless of any <code>duration</code> property set on the |
| effect itself. |
| Because the final keyframe determines the duration, there |
| must always be a final keyframe in any MotionPath. That is, |
| it is implicit that the time in the final keyframe is the |
| duration of the MotionPath.</p> |
| |
| <p>Any keyframe may leave its <code>value</code> undefined (either unset, set to |
| <code>null</code>, or set to <code>NaN</code>). |
| In that case, the value is determined dynamically when the animation starts. |
| Any undefined value is determined as follows: </p> |
| <ol> |
| <li>If it is the first keyframe, it is calculated from the next keyframe |
| if that keyframe has both a <code>value</code> and <code>valueBy</code> property set, |
| as the difference of those values. Otherwise it gets the |
| current value of the property from the target.</li> |
| <li>If it is the final keyframe and the animation is running in a transition, it |
| uses the value in the destination view state of the transition.</li> |
| <li>Otherwise, any keyframe calculates its <code>value</code> by using the previous |
| keyframe's <code>value</code> and adding the current keyframe's <code>valueBy</code> |
| to it, if <code>valueBy</code> is set.</li> |
| </ol> |
| |
| </p><p><span class="label">See also</span></p><div class="seeAlso"><a href="Keyframe.html" target="">Keyframe</a></div></div><a name="propertyDetail"></a><a name="property"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">property</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>public var property:String</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p> |
| The name of the property on the effect target to be animated. |
| |
| </p></div><a name="constructorDetail"></a><div class="detailSectionHeader">Constructor Detail</div><a name="MotionPath()"></a><a name="MotionPath(String)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">MotionPath</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">Constructor</td></tr></table><div class="detailBody"><code>public function MotionPath(property:String = null)</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p> |
| Constructor. |
| </p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">property</span>:String</code> (default = <code>null</code>)<code></code> — The name of the property on the target to animate. |
| |
| </td></tr></table></div><a name="methodDetail"></a><div class="detailSectionHeader">Method Detail</div><a name="clone()"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">clone</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td></tr></table><div class="detailBody"><code> public function clone():<a href="../../../spark/effects/animation/MotionPath.html">MotionPath</a></code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p> |
| Returns a copy of this MotionPath object, including copies |
| of each keyframe. |
| </p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../../spark/effects/animation/MotionPath.html">MotionPath</a></code> — A copy of this MotionPath object, including copies |
| of each keyframe. |
| |
| </td></tr></table></div><a name="getValue()"></a><a name="getValue(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getValue</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function getValue(fraction:Number):Object</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version : </b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version : </b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions : </b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p> |
| Calculates and returns an interpolated value, given the elapsed |
| time fraction. The function determines the keyframe interval |
| that the fraction falls within and then interpolates within |
| that interval between the values of the bounding keyframes on that |
| interval. |
| </p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">fraction</span>:Number</code> — The fraction of the overall duration of the effect, |
| (a value from 0.0 to 1.0). |
| </td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>Object</code> — The interpolated value. |
| |
| </td></tr></table></div><a name="includeExamplesSummary"></a><div class="detailSectionHeader">Examples</div><div class="exampleHeader">KeyFrameEffectExample.mxml</div><div class="detailBody"><div class="listing"><pre><?xml version="1.0"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- Simple example to demonstrate the s:Keyframe and s:MotionPath classes. --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Declarations> |
| <fx:Vector id="kf" type="spark.effects.animation.MotionPath"> |
| <s:MotionPath property="scaleX"> |
| <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:MotionPath> |
| <s:MotionPath property="scaleY"> |
| <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:MotionPath> |
| </fx:Vector> |
| |
| <s:Animate id="shrinkEffect" |
| motionPaths="{kf}" |
| target="{myImage}"/> |
| </fx:Declarations> |
| |
| <s:Panel id="examplePanel" |
| title="Keyframe and MotionPath Effect Example" |
| width="75%" height="75%"> |
| <s:layout> |
| <s:VerticalLayout paddingTop="10" paddingLeft="10"/> |
| </s:layout> |
| |
| <!-- Directions --> |
| <s:VGroup id="detailsBox" width="50%" left="0"> |
| <s:Label width="99%" color="blue" |
| text="Click the Adobe logo to watch the effect."/> |
| </s:VGroup> |
| |
| <mx:Image id="myImage" |
| source="@Embed(source='assets/logo.jpg')" |
| click="shrinkEffect.end();shrinkEffect.play();"/> |
| </s:Panel> |
| </s:Application> |
| </pre></div><script language="javascript" type="text/javascript"><!-- AC_FL_RunContent( "src", "examples/KeyFrameEffectExample", "width", "100%", |
| "height","400px", "salign", "TL", "id", "example1", "quality", "high", "bgcolor", "", "name", |
| "example1", "flashvars","", "allowScriptAccess","sameDomain", "type", |
| "application/x-shockwave-flash","pluginspage", "http://www.macromedia.com/go/getflashplayer" ); --></script></div><br/><br/><hr><br/><p></p><center class="copyright"><footer>The Apache Software Foundation</footer><br/>Wed Nov 15 2017, 09:50 AM +01:00 </center></div></body></html><!--The Apache Software Foundation<br/>Wed Nov 15 2017, 09:50 AM +01:00 --> |
