<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Drawing and Assets 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/ContentCreation/Introduction=Introduction)</h3>
        <p class="loc">($$$/Lessons/ContentCreation/Description=This lesson gets you up and running quickly with the basics of drawing and working with assets in Edge Animate.)</p>
        <p class="useractionClick">
            <a href="#" data-fileToOpen="samples/content_creation" class="loc lessonAPIOpen">($$$/Lessons/ContentCreation/ClickToOpenSample=Click to open the sample)</a>
        </p>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/ContentCreation/CreatingContent/Title=Creating Content)</h3>
        <p class="loc">($$$/Lessons/ContentCreation/CreatingContent/Text1=Edge Animate lets you  draw simple shapes.)</p>
        
        <div class="useraction">
            <ol>
                <li class="useractionClickTall"><a href='#' class='loc lessonAPISelectTool' data-tool='roundrect'>($$$/Lessons/ContentCreation/CreatingContent/Text2=Select the <img class=&quot;inline&quot; src='images/round_rect.png' /> tool.)</a></li>
                <li class="loc">($$$/Lessons/ContentCreation/CreatingContent/Text3=Draw a rounded rectangle in the center of the screen.)</li>
            </ol>
        </div>
    
        <p class="loc">($$$/Lessons/ContentCreation/CreatingContent/Text4=The shape is an HTML &lt;div&gt; styled with CSS3. You can customize it with the Properties panel.)</p>
        <div class="screenshot"><img class="locImage" data-imgbase="images/properties" src="images/properties.png" /></div>
        <div class="useraction">
            <ol start="3">
                <li class="loc">($$$/Lessons/ContentCreation/CreatingContent/Text5=In the Properties panel, click on the link between W and H.)</li>
                <li class="loc">($$$/Lessons/ContentCreation/CreatingContent/Text6=Set the size to W: 220, H:130, as shown.)</li>
            </ol>
        </div>
    
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/ContentCreation/AddingText/Title=Adding Text)</h3>
        <div class="useraction">
            <ol>
                <li class="useractionClickTall"><a href='#' class='loc lessonAPISelectTool' data-tool='text'>($$$/Lessons/ContentCreation/AddingText/Text7=Select the <img class=&quot;inline&quot; src='images/text_tool.png' /> tool.)</a></li>
                <li class="loc">($$$/Lessons/ContentCreation/AddingText/Text8=Click in the center of the rectangle and type &quot;Hello World.&quot;)</li>
                <li class="loc">($$$/Lessons/ContentCreation/AddingText/Text9=Come out of edit mode by clicking outside the text element.)</li>
                <li class="loc">($$$/Lessons/ContentCreation/AddingText/Text10=Select the text and use Smart Guides to center the text in the shape.)</li>
            </ol>
        </div>
            
        <div class="screenshot"><img src="images/centering_text.png" /></div>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/ContentCreation/ImportingGraphics/Title=Importing Graphics)</h3>
    
        <p class="loc">($$$/Lessons/ContentCreation/ImportingGraphics/Text11=You can import web graphics such as png, jpg, gif and svg files, and these get added to the Library panel under &quot;Images&quot;.)</p>
        <div class="screenshot"><img class="locImage" data-imgbase="images/Library" src="images/Library.png" /></div>
        
        <div class="useraction">
            <ol>
                <li class="loc">($$$/Lessons/ContentCreation/ImportingGraphics/Text12=Drag the background.jpg icon from the Library onto the stage and drop it at 0,0.)</li>
            </ol>
        </div>
        <p class="loc">($$$/Lessons/ContentCreation/ImportingGraphics/Text13=You&#39;ll see that the background image completely covers your text and rectangle. Let's fix it by rearranging the stacking order in the Elements panel.)</p>
    
        <div class="useraction">
            <ol start="2">
                <li class="loc">($$$/Lessons/ContentCreation/ImportingGraphics/Text14=In the Elements panel, drag the &quot;background&quot; &lt;div&gt; element down below the &quot;RoundRect&quot; &lt;div&gt; element, as shown.)</li>
            </ol>
        </div>
    
        <div class="screenshot"><img class="locImage" data-imgbase="images/drag_background" src="images/drag_background.png" /></div>
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/ContentCreation/OrganizingElements/Title=Organizing Elements)</h3>
    
        <p class="loc">($$$/Lessons/ContentCreation/OrganizingElements/Text15=You can also change an element's parent by dragging and dropping.)</p>
        <div class="useraction">
            <ul>
                <li class="loc">($$$/Lessons/ContentCreation/OrganizingElements/Text16=In the Elements panel, drag the &quot;Text&quot; &lt;div&gt; element onto the &quot;RoundRect&quot; &lt;div&gt; element and drop.)</li>
            </ul>
        </div>
    
        <p class="useractionClick">
            <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/content_creation_finished">($$$/Lessons/ContentCreation/OrganizingElements/ClickToOpenFinished=Click to open the finished sample.)</a>
        </p>
</div>
</div>

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