<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Pin Animation</title>
    
	<link href="../getting_started.css" rel="stylesheet" type="text/css"/>
    
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../getting_started.js"></script>
    
</head>

<body>

<div class="lessonChapters">
<div class="lessonChapter">
    
    <h3 class="loc">($$$/Lessons/MotionsPaths/Introduction=Introduction)</h3>
    <p class="loc">($$$/Lessons/MotionsPaths/Description=This lesson will show you how to create animate objects along a curved motion path.)</p>
    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/motion_paths_start">($$$/Lessons/MotionsPaths/ClickToOpenSample=Click to open the sample)</a></p>
    
</div>    
<div class="lessonChapter">
    
    <h3 class="loc">($$$/Lessons/MotionsPaths/Creation/Title=Creating a motion path)</h3>
    <p class="loc">($$$/Lessons/MotionsPaths/Creation/Description=In this chapter you will create a simple motion path.)</p>    
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/MotionsPaths/Creation/Text1=Select bee_sym in the Elements Panel, or click to select the symbol on stage.<br><img class=&quot;inline&quot; src='images/bee.jpg' />)</li>
            <li class="loc">($$$/Lessons/MotionsPaths/Creation/Text2=Select the &quot;Motion Paths&quot; radio button in the Properties Panel.<img class=&quot;inline&quot; src='images/mpcpp.jpg' />)</li>
            <li class="loc">($$$/Lessons/MotionsPaths/Creation/Text3=Double click the Playhead on the Timeline. The blue Pin will now be activated. <img class=&quot;inline&quot; src='images/playhead_pin_on.png' />)</li> 
            <li class="loc">($$$/Lessons/MotionsPaths/Creation/Text4=Drag the Playhead to 0:01 (1 second).<img class=&quot;inline&quot; src='images/playhead_1_sec.jpg' />)</li>                        
        </ol>
    </div>        
    <p class="loc">($$$/Lessons/MotionsPaths/Creation/Text5=Note: When you drag the Playhead, the blue Pin stays behind.)</p> 
    <div class="useraction">
        <ol start="5">
            <li class="loc">($$$/Lessons/MotionsPaths/Creation/Text6=On the stage, drag bee_sym to position it on top of the flower graphic. A turquoise line will now be drawn between the element's original and new location. You've just created a motion path! Arrows on the end anchors of your path will point in the direction of movement.<br><img class=&quot;inline&quot; src='images/dragbee.jpg' /> )</li>
        </ol>           
    </div>
</div>   
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Title=Adding anchor points)</h3>
    <p class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text7=Next, let's add some anchor points to the path.)</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text8=Hover over the middle of the motion path. The cursor will now change to the Add Anchor icon.<img class=&quot;inline&quot; src='images/Cur_PenAdd.png' />)</li>
            <li class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text9=With the Add Anchor icon active, click to create an anchor point on the motion path. You can now drag this anchor point to create a curve.)</li>
        </ol>
    </div>          
    <p class="loc macOnly">($$$/Lessons/MotionsPaths/AnchorPoints/Text10Mac=Note: To delete an anchor point, hover over the anchor and Cmd + Click. This will remove the anchor and the curve created with it. <img class=&quot;inline&quot; src='images/Cur_PenSubstract.png' />)</p>
    <p class="loc winOnly">($$$/Lessons/MotionsPaths/AnchorPoints/Text10Win=Note: To delete an anchor point, hover over the anchor and Ctrl + Click. This will remove the anchor and the curve created with it. <img class=&quot;inline&quot; src='images/Cur_PenSubstract.png' />)</p>
    <p class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text11=When you select and drag the anchor, two blue handles will appear extending from the anchor point. These are called &quot;Bezier handles&quot;. Grab a Bezier handle to control the curve of the path.<br><img class=&quot;inline&quot; src='images/beziers.jpg' />)</p>
    <p class="loc macOnly">($$$/Lessons/MotionsPaths/AnchorPoints/Text12Mac=Note: To create Bezier handles on end anchor points, hover over the triangle and then Opt + Click + Drag. To remove Bezier handles Opt + Click on an anchor. <img class=&quot;inline&quot; src='images/Cur_PenCorner.png' />)</p>    
    <p class="loc winOnly">($$$/Lessons/MotionsPaths/AnchorPoints/Text12Win=Note: To create Bezier handles on end anchor points, hover over the triangle and then Alt + Click + Drag. To remove Bezier handles Alt + Click on an anchor. <img class=&quot;inline&quot; src='images/Cur_PenCorner.png' />)</p>    
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/MotionsPaths/ApplyEasing/Title=Applying an easing)</h3> 
    <div class="useraction">
    <p class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text13=Now let's apply an easing to add some swing to your path.)</p>        
        <ol>
            <li class="loc">($$$/Lessons/MotionsPaths/ApplyEasing/Text14=Select the &quot;Location&quot; transition on the timeline.<br><img class=&quot;inline&quot; src='images/location.png' />)</li>
            <li class="loc">($$$/Lessons/MotionsPaths/ApplyEasing/Text15=In the Easing Panel, select &quot;Ease In Out Quad&quot;. The easing will be applied to the movement of the object on the motion path. <img class=&quot;inline&quot; src='images/easing.jpg' />)</li>
            <li class="loc">($$$/Lessons/MotionsPaths/ApplyEasing/Text16=Hit the spacebar to playback your animation. The bee will now follow the curved path you just created.)</li>
        </ol>    
    </div>
    <p class="loc">($$$/Lessons/MotionsPaths/AnchorPoints/Text17=Congratulations, you've just made your first motion path! )</p>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Title=Multiple Motion Paths)</h3>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text18=You can also create multiple motion paths for the same object. Multiple paths are separated by a keyframe in the timeline. You can adjust these keyframes to control the playback duration of each path. <img class=&quot;inline&quot; src='images/keyframe.png' />)</p>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text19=When you apply easing to an object with motion paths, it will affect each individual motion path separated by a keyframe.)</p>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text20=To break a path into two paths:)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text21=Move the playhead to the middle of the Location transition on the timeline)</li>
          <li class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text22=Click the keyframe icon beside Location in Timeline Panel)</li>          
      </ol>
    </div>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text23=To create a single contiguous motion path:)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text24=Click on the keyframe in the timeline)</li>
          <li class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text25=Hit the Delete key. )</li>          
      </ol>
    </div>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text26=Preview your finished animation in the browser.)</p>
    <p class="loc">($$$/Lessons/MotionsPaths/MultipleMotionPaths/Text27=You can also open and inspect a finished version of this project if you encountered any issues.)</p>
    <p class="useractionClick">
        <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/motion_paths_finished">($$$/Lessons/MotionsPaths/MultipleMotionPaths/ClickToOpenFinished=Click to open the completed sample)</a>
    </p>
</div>
</div>
<div id="chapterFooter">
    <div id="footerPrevious">&nbsp;</div>
    <div class="loc" id="footerStepStatus">($$$/Lessons/MotionsPaths/ExitAnimation/StepStatus=Step <span id='footerCurrentStep'>1</span> of <span id='footerStepTotal'>1</span>)</div>
    <div id="footerNext">&nbsp;</div>
</div>
<div id="chapterBrowser">
    <div id="chapterDropdown"><span id="chapterCurrent"></span><div id="chapterDropdownList"></div></div>
    <div id="chapterNext">&nbsp;</div>
    <div id="chapterPrevious">&nbsp;</div>
</div>
    
</body>
</html>
