<!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/PinAnimation/Introduction=Introduction)</h3>
    <p class="loc">($$$/Lessons/PinAnimation/Description=This lesson shows you the basics of animating in Edge Animate using the Pin.)</p>
    <p class="loc">($$$/Lessons/PinAnimation/Description2=The Pin is a tool that works with the Playhead to make animation eaisier.)</p>
    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/pin_animation_start">($$$/Lessons/PinAnimation/ClickToOpenSample=Click to open the sample)</a></p>
    
</div>    
<div class="lessonChapter">
    
    <h3 class="loc">($$$/Lessons/PinAnimation/Easing/Title=Easing)</h3>
    <p class="loc">($$$/Lessons/PinAnimation/Easing/Description=First, let's set up the easing, which affects the feel of your animation.)</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/PinAnimation/Easing/Text1=Click the easing tool. <img class=&quot;inline&quot; src='images/easing-button.png' />)</li>
            <li class="loc">($$$/Lessons/PinAnimation/Easing/Text2=Select Ease Out and Quad.)</li>
        </ol>
    </div>
</div>
    
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Title=Entrance Animation)</h3>
    <p class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text3=Next, let's make an  entrance animation.)</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text4=Move the playhead <img class=&quot;inline&quot; src='images/playhead_pin_off.png'/> to 0:00.250 (0.25 seconds).)</li>
            <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text5=Double-click the playhead so it looks like this: <img class=&quot;inline&quot; src='images/playhead_pin_on.png' />.)</li>
            <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text6=Drag the pin <img class=&quot;inline&quot; src='images/SP_pin_Lg_P_D.png' /> to 0:00.750 (0.75 seconds - the pin will show +0.5s).)</li>
        </ol>
    </div>
    <p class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text7=This sets up a blue region like this:)</p>
    <div class="screenshot"><img img class="locImage" data-imgbase="images/region1" src="images/region1.png" /></div>
    <p class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text8=Blue animates to how things look now.)</p>
    
    <div class="useraction">
      <ol start="4">
          <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text9=Select the &quot;RoundRect&quot; &lt;div&gt; element in the Elements panel.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text10=Hold down Shift to constrain movement, and drag the shape offstage to the left.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text11=In the Properties panel, set Rotate to 720 then click on the stage.)</li>
      </ol>
    </div>

    <p class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text12=To preview the animation inside Edge Animate, do the following.)</p>
    <div class="useraction">
        <ol start="7">
            <li class="loc">($$$/Lessons/PinAnimation/EntranceAnimation/Text13=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play.)</li>
            <li class="loc macOnly">($$$/Lessons/PinAnimation/EntranceAnimation/Text14Mac=Click <img class=&quot;inline&quot; src='images/return-btn.png' /> or Return to move the Playhead back and re-activate the region.)</li>
            <li class="loc winOnly">($$$/Lessons/PinAnimation/EntranceAnimation/Text14Win=Click <img class=&quot;inline&quot; src='images/return-btn.png' /> or Enter to move the Playhead back and re-activate the region.)</li>
        </ol>
    </div>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Title=Animation Refinement)</h3>
    <p class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text15=Let's change the timing of the rotation.)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text16=Grab the left Rotate keyframe <img class=&quot;inline&quot; src='images/keyframe.png' /> and move it right to 0:00.500 (0.5 seconds).)</li>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text17=Preview your animation.)</li>
      </ol>
    </div>
    
    <p class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text18=Let's add an additional animation for the text.)</p>
    
    <div class="useraction">
      <ol start="3">
          <li class="loc macOnly">($$$/Lessons/PinAnimation/AnimationRefinement/Text19Mac=Make sure the region is activated by pressing Return.)</li>
          <li class="loc winOnly">($$$/Lessons/PinAnimation/AnimationRefinement/Text19Win=Make sure the region is activated by pressing Enter.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text20=Click on the blue region <img class=&quot;inline&quot; src='images/blue_region2.png' /> and drag it right so the Playhead is at 0:00.750 (0.75 seconds).)</li>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text21=Select the &quot;Hello World&quot; text on the stage.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text22=In the Properties panel set Scale (either value) to 0.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/AnimationRefinement/Text23=Set Opacity to 0.)</li>
      </ol>
    </div>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Title=Exit Animation)</h3>
    <p class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text24=Now let's make an exit animation.)</p>
    <div class="useraction">
        <ol>
          <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text25=First, click the Easing tool and select Ease-In and Quad.)</li>
          <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text26=Grab the Pin <img class=&quot;inline&quot; src='images/SP_pin_Lg_P_D.png' /> and move it to 0:01.750 (1.75 seconds).)</li>
          <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text27=Move the Playhead to 0:02.250 (2.25 seconds).)</li>
        </ol>
    </div>
    <p class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text28=This sets up a yellow region like this:)</p>
    <div class="screenshot"><img img class="locImage" data-imgbase="images/yellow_region2" src="images/yellow_region2.png" /></div>
    <p class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text29=Yellow animates from the current state.)</p>
    <div class="useraction">
          <ol start="4">
              <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text30=Select &quot;Hello World&quot; on the stage.)</li>
              <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text31=Set Opacity to 0.)</li>
              <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text32=Grab the yellow region and move it to the right by 0.25 seconds so the pin is at 0:02 (2 seconds).)</li>
              <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text33=Select &quot;RoundRect&quot; on the stage.)</li>
              <li class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text34=Hold down Shift and move it offstage to the right.)</li>
          </ol>
    </div>
    <p class="loc">($$$/Lessons/PinAnimation/ExitAnimation/Text35=Preview your animation. To play from the begining, click <img class=&quot;inline&quot; src='images/rewind.png' />)</p>
    
    <p class="useractionClick">
        <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/pin_animation_finished">($$$/Lessons/PinAnimation/ExitAnimation/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/PinAnimation/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>
