<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Keyframe 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/KeyframeAnimation/Introduction=Introduction)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/Description=This lesson shows you the basics of animating in Edge Animate. You will learn about creating Keyframes and Transitions, controlling motion via Easing, and how to use copy and paste operations to speed the process.)</p>
        
        <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/keyframe_animation">($$$/Lessons/KeyframeAnimation/ClickToOpenSample=Click to open the sample)</a></p>
        
    </div>    
    <div class="lessonChapter">
        
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Title=Creating Keyframes)</h3>
    <!--    
        <p>A Keyframe <img class="inline" src="images/keyframe.png"/> defines the value of a property 
        	at a specific time.  When two keyframes have different values that change over time, 
        	a transition connects them. 
            <img class="inline" src="images/transition.png"/> 
        </p>
        <p>How keyframes and transitions are created is controled by 4 buttons in the Timeline panel.  
        	In the sample they should look like this:</p>
        <div class="screenshot"><img src="images/tl_buttons.png"/></div>
        <p>Let's add keyframes manually, via the keyframe buttons next to the each animatable property
        	in the Properties Panel.</p>
     -->   
        <div class="useraction">
              <ol>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text1=Move the Playhead to 0:01.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text2=Select the &quot;E&quot; on the stage.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text3=Click the <img class=&quot;inline&quot; src='images/keyframe_btn.png' /> button for the Y coordinate in the Properties panel.)</li>
                  <div class="screenshot"><img img class="locImage" data-imgbase="images/e_location" src="images/e_location.png"></div>
              </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text4=A keyframe for Top <img class=&quot;inline&quot; src='images/keyframe.png' /> appears on the Timeline.)</p>
        <div class="useraction">
          <ol>
              <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text5=Move the Playhead to 0:00.)</li>
              <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text6=Add another keyframe for Y.)</li>
              <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text7=Change the Y value to -90.)</li>
              <li class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text8=Click <img class=&quot;inline&quot; src='images/play_button.png' /> 
                or Space to play.)</li>
          </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text9=You should see the E start out above the stage and jump to the original position at 1 second.)</p> 
        <p class="loc">($$$/Lessons/KeyframeAnimation/CreatingKeyframes/Text10=Note the keyframe at 0:01 is hollow. <img src='images/instant_transition.png' class='inline'/> This means that it has a different value than the previous keyframe.)</p>
    </div>
    <div class="lessonChapter">
        
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/AddTransition/Title=Adding a Transition)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/AddTransition/Description=When two keyframes have different values, you can add a transition that causes the value to change gradually over time.)</p>
        <div class="useraction">
              <ol>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/AddTransition/Text11=Right-click either of the keyframes and choose Create Transition.)</li>
              </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/AddTransition/Text12=A transition appears connecting the keyframes.)</p>
    
        <div class="screenshot"><img src="images/transition2.png"></div>
        <div class="useraction">
            <ol start="1">
                <li class="loc">($$$/Lessons/KeyframeAnimation/ClickToPlay=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play.)</li>
            </ol>
        </div>
   
        <p class="loc">($$$/Lessons/KeyframeAnimation/AddTransition/Text13=The E should animate smoothly.)</p>    
    </div>
    <div class="lessonChapter">
        
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/Easing/Title=Specifying Easing)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/Easing/Description=Every transition has an Easing, which defines the feel of the transition.)</p>
        <div class="useraction">
            <ol>
                <li class="loc">($$$/Lessons/KeyframeAnimation/Easing/Text14=Select the transition by clicking on the bar connecting the keyframes.)</li>
                <li class="loc">($$$/Lessons/KeyframeAnimation/Easing/Text15=Click the Easing tool. <img class=&quot;inline&quot; src='images/easing-button.png' />)</li>
                <li class="loc">($$$/Lessons/KeyframeAnimation/Easing/Text16=Select Ease Out and Bounce, and press Return to apply.)</li>
                <li class="loc">($$$/Lessons/KeyframeAnimation/ClickToPlay=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play.)</li>
            </ol>
        </div>
        
        <p class="loc">($$$/Lessons/KeyframeAnimation/Easing/Text18=The E should now fall and land with a bounce.)</p>
    </div>    
    <div class="lessonChapter">
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Title=Animating the Shadow)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Description=Auto Keyframe Mode controls whether keyframes will be created automatically when a property is modified, and Auto Transition Mode specifies whether transitions will be created as needed.)</p>
        <div class="useraction">
              <ol>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text19=Click the Auto Keyframe Mode button to turn it on. 
                        <img class=&quot;inline&quot; src='images/akp_on.png' /> )</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text20=Click the Auto Transition Mode button to turn it on. <img class=&quot;inline&quot; src='images/atm_on.png' /> )</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text21=Select the shadow on stage.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text22=Move the playhead to 0:01.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text23=In the Transform section of the Properties Panel, click the keyframe buttons for scale x and scale y.
                  <img class=&quot;inline&quot; src='images/scale.png' /> )</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text24=Move the playhead to 0:00.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text25=In the Properties Panel, set the x scale to 0.)</li> 
              </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/Shadow/Text26=Since scale x and y are locked, two keyframes and transitions are created. Because we had previously set the easing to bounce, it should be applied to our shadow animation.)</p>
        <div class="useraction">
            <ol start="1">
                <li class="loc">($$$/Lessons/KeyframeAnimation/Shadow/ClickToPlay=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play.)</li>
            </ol>
        </div>
    </div>

    <div class="lessonChapter">
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Title=Reusing Keyframes)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Description=Let's add a little bounce to the E and speed the process by copying and pasting keyframes.)</p>
        <div class="useraction">
              <ol>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text27=Select the E on the stage.)</li>      	
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text28=Click <img class=&quot;inline&quot; src='images/snapping_on.png' /> at the bottom of the Timeline to disable snapping.)</li>      	
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text29=Move the playhead to where the E first hits bottom, around 0.364.)</li>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text30=In the Properties Panel, click the keyframe button for rotation.
					<img class=&quot;inline&quot; src='images/rotation.png' />)</li>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text31=Move the playhead to where the E reaches the top of the bounce, around 0.544.)</li>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text32=In the Properties Panel, set rotation value to -10.)</li>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text33=Move the playhead to where the E hits bottom again, around 0.729.)</li>
				<li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text34=Using the mouse, select the first rotation keyframe, making sure that only the one keyframe 
					is selected. <img class=&quot;inline&quot; src='images/keyframe_selected.png' />)</li>
				<li class="loc macOnly">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text35Mac=Copy the keyframe via Cmd + C and paste via Cmd + V.)</li> 
				<li class="loc winOnly">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text35Win=Copy the keyframe via Ctrl + C and paste via Ctrl + V.)</li> 				
              </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text36=The E should now rotate slightly on the first bounce and back to provide a more natural motion.)</p>
        <div class="useraction">
            <ol start="1">
                <li class="loc">($$$/Lessons/KeyframeAnimation/ReuseKeyframes/Text37=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play. Do it again to play from the beginning.)</li>
            </ol>
        </div>
    </div>
    <div class="lessonChapter">
        <h3 class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Title=Reusing Transitions)</h3>
        <p class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Description=Transitions can be copied and pasted with great flexibility, to speed the animation process.)</p>
        <div class="useraction">
              <ol>
				 <li class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text38=Click <img class=&quot;inline&quot; src='images/snapping_on.png' /> at the bottom of the Timeline to enable snapping.)</li>      	
                  <li class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text39=Click and drag over the visibility column in the Elements Panel for the G, D, and E2 elements to make them visible.)</li>
                  <li class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text40=Select the bar on top of the transitions for the E animation to select all transitions.)</li>
                  <img src="images/e_trans_selected.png" />
                  <li class="loc macOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text41Mac=Press Cmd + C.)</li>
                  <li class="loc winOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text41Win=Press Ctrl + C.)</li>                  
                  <li class="loc macOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text42Mac=Select the G on stage, move the playhead to 0:01, and press Cmd + V.)</li>
                  <li class="loc winOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text42Win=Select the G on stage, move the playhead to 0:01, and press Ctrl + V.)</li>                  
                  <li class="loc macOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text43Mac=Select the letter D on stage and press Cmd + V.)</li>
                  <li class="loc winOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text43Win=Select the letter D on stage and press Ctrl + V.)</li>                  
                  <li class="loc macOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text44Mac=Finally, select the E above the D (E2) press Cmd + V.)</li>
                  <li class="loc winOnly">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text44Win=Finally, select the E above the D (E2) press Ctrl + V.)</li>                  
              </ol>
        </div>
        <p class="loc">($$$/Lessons/KeyframeAnimation/ReuseTransitions/Text45=Each letter should now bounce in, one after the other.)</p>
        <div class="useraction">
            <ol start="1">
                <li class="loc">($$$/Lessons/KeyframeAnimation/ClickToPlay=Click <img class=&quot;inline&quot; src='images/play_button.png' /> or Space to play.)</li>
            </ol>
        </div>
        <p class="useractionClick">
        	<a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/keyframe_animation_finished">($$$/Lessons/KeyframeAnimation/ReuseTransitions/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/KeyframeAnimation/ReuseTransitions/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>
