<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>QuickStart</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/QuickStart/DrawAnimate/Title=Draw &amp; Animate)</h3>
    
        <p class="loc">($$$/Lessons/QuickStart/DrawAnimate/Description=This lesson will show you how to create a rectangle and animate it.)</p>
        
        <div class="useraction">
            <ol>
                <li class="useractionClickTall"><a href='#' class='loc lessonAPISelectTool' data-tool='rectangle'>($$$/Lessons/QuickStart/DrawAnimate/Text1=Select the <img class='inline' src='images/rect.png' /> tool.)</a></li>
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text2=Draw a rectangle in the upper-left corner of the stage.)</li>
            </ol>
        </div>

        <p class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text3=The easiest way to animate in Edge Animate is to use the Pin.)</p>
        
        <div class="useraction">
            <ol start="3">
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text4=Click the Pin button <img class='inline' src='images/pin.png' /> in the Timeline.<div class='screenshot'><img src='images/timeline_pin_on.png' /></div>)</li>
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text5=Drag the Playhead&nbsp;<img class='inline' src='images/playhead_pin_on.png' />&nbsp;to 0:01 (1 second). <div class='screenshot'><img src='images/timeline_playhead_1sec.png' /></div>)</li>
            </ol>
        </div>
        <p class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text6=Note: When you drag the yellow playhead, the blue pin stays behind.)</p>    
        <div class="useraction">
            <ol start="5">
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text7=Move the rectangle to the lower-right corner of the stage.)</li>
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text8=Click the gray color chip in the Properties panel.<div class='screenshot'><img src='images/bg_color_gray.png' /></div>)</li>
                <li class="loc macOnly">($$$/Lessons/QuickStart/DrawAnimate/Text9Mac=Change its background color and press Return.)</li>
                <li class="loc winOnly">($$$/Lessons/QuickStart/9Win=Change its background color and press Enter.)</li>
                <li class="loc">($$$/Lessons/QuickStart/DrawAnimate/Text10=Press Space to play back your animation.)</li>
            </ol>
        </div>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/QuickStart/NextStep/Title=Next Step)</h3>
    <p class="loc">($$$/Lessons/QuickStart/NextStep/Description=There is a lot more to Edge Animate.  To take the next step, you might want to check out these other lessons:)</p>
        <ul>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="ContentCreation/content_creation.html" data-lesson-title="($$$/Lessons/lessonTitleContentCreation=Create)" href="#">($$$/Lessons/QuickStart/NextStep/Text11=Create Content)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="KeyframeAnimation/keyframe_animation.html" data-lesson-title="($$$/Lessons/lessonTitleKeyframeAnimation=Animate I: Keyframes)" href="#">($$$/Lessons/QuickStart/NextStep/Text13=Animate I: Keyframes)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="PinAnimation/pin_animation.html" data-lesson-title="($$$/Lessons/lessonTitlePinAnimation=Animate II: The Pin)" href="#">($$$/Lessons/QuickStart/NextStep/Text12=Animate II: The Pin)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="Resize/resize.html" data-lesson-title="($$$/Lessons/lessonTitleResize=Responsive Layout)" href="#">($$$/Lessons/QuickStart/NextStep/Text16=Responsive Layout)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="Interactivity/interactivity.html" data-lesson-title="($$$/Lessons/lessonTitleInteractivity=Extend)" href="#">($$$/Lessons/QuickStart/NextStep/Text14=Extend with JavaScript)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="Symbols/symbols.html" data-lesson-title="($$$/Lessons/lessonTitleSymbols=Reuse)" href="#">($$$/Lessons/QuickStart/NextStep/Text15=Reuse with Symbols)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="MotionPaths/motion_paths.html" data-lesson-title="($$$/Lessons/lessonTitleMotionPaths=Motion Paths)" href="#">($$$/Lessons/QuickStart/NextStep/Text17=Create Motion Paths)</a></li>
            <li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="Audio/audio.html" data-lesson-title="($$$/Lessons/lessonTitleAudio=Audio)" href="#">($$$/Lessons/QuickStart/NextStep/Text18=Adding Audio)</a></li>  
			<li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="SpriteSheet/spritesheet.html" data-lesson-title="($$$/Lessons/lessonTitleSprite=Sprite Sheet)" href="#">($$$/Lessons/QuickStart/NextStep/Text19=Sprite Sheet)</a></li>
			<li class="nextStep"><a class="loc lessonAPIGotoLesson" data-lesson="Video/video.html" data-lesson-title="($$$/Lessons/lessonTitleVideo=Video)" href="#">($$$/Lessons/QuickStart/NextStep/Text20=Adding Video)</a></li>  
        </ul>
    </p>
    
</div>
</div>

<div id="chapterFooter">
    <div id="footerPrevious">&nbsp;</div>
    <div class="loc" id="footerStepStatus">($$$/Lessons/QuickStart/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>
