<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Adding Interaction</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/Interactivity/Introduction=Introduction)</h3>
    <p class="loc">($$$/Lessons/Interactivity/Description=This lesson shows you how to easily enhance your compositions with JavaScript code.)</p>

    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/interactivity_start">($$$/Lessons/Interactivity/ClickToOpenSample=Click to open the sample)</a></p>

    <p class="loc">($$$/Lessons/Interactivity/Text1=First, let's see what the animation looks like.  To preview work that contains code, you must use Preview in Browser.)</p>

    <div class="useraction">
        <ul>
            <li class="loc macOnly">($$$/Lessons/Interactivity/Text2Mac=Press Cmd + Return to preview in browser.)</li>
            <li class="loc winOnly">($$$/Lessons/Interactivity/Text2Win=Press Ctrl + Enter to preview in browser.)</li>
        </ul>
    </div>

</div>

<div class="lessonChapter">

    <h3 class="loc">($$$/Lessons/Interactivity/Triggers/Title=Triggers)</h3>
        <p class="loc">($$$/Lessons/Interactivity/Triggers/Description=A Trigger is a function that is called at a specific time.  It is added to the Timeline at the Playhead location.)</p>
        <div class="useraction">
            <ol>
                <li class="loc">($$$/Lessons/Interactivity/Triggers/Text3=Move the Playhead to 0:00 (0.0 seconds).)</li>
                <li class="loc macOnly">($$$/Lessons/Interactivity/Triggers/Text4Mac=Press Cmd + T to add a trigger.)</li>
                <li class="loc winOnly">($$$/Lessons/Interactivity/Triggers/Text4Win=Press Ctrl + T to add a trigger.)</li>
            </ol>
        </div>

    <p class="loc">($$$/Lessons/Interactivity/Triggers/Text5=This will open the code popup which shows you the function you are editing.)</p>
    <div class="screenshot"><img class="locImage" data-imgbase="images/action_popup" src="images/action_popup.png" /></div>

    <p class="loc">($$$/Lessons/Interactivity/Triggers/Text6=The code popup has a panel at the bottom where the actions for common tasks are provided. Targets for these actions can also be chosen if applciable.)</p>
    <div class="useraction">
        <ol start="3">
          <li class="loc">($$$/Lessons/Interactivity/Triggers/Text7=Click on &quot;Playback->Stop&quot; in the &quot;Pick an action&quot; section and then double-click on  &quot;Stage&quot; in the &quot;Pick a target&quot; section.)</li>
        </ol>
    </div>
    <p class="loc">($$$/Lessons/Interactivity/Triggers/Text8=The body of your trigger function should look like this:)</p>
    <p class="loc">($$$/Lessons/Interactivity/Triggers/Text9=<code>sym.stop();</code>)</p>
    <div class="useraction">
      <ol start="4">
        <li class="loc">($$$/Lessons/Interactivity/Triggers/Text10=Click <img class=&quot;inline&quot; src='images/code_close.png' /> or press Esc to close the popup.)</li>
      </ol>
    </div>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Interactivity/Actions/Title=Actions)</h3>
        <p class="loc">($$$/Lessons/Interactivity/Actions/Description=An Action is a function that gets called in response to a mouse, touch, timeline or other event.)</p>
        <p class="loc">($$$/Lessons/Interactivity/Actions/Description2=Each element that can have Actions has an Open Actions button like this: <img class=&quot;inline&quot; src='images/actions_button.png' />)</p>
        <div class="useraction">
           <ol>
              <li class="loc">($$$/Lessons/Interactivity/Actions/Text11=In the Elements Panel, click the Open Actions button for the &quot;play&quot; &lt;div&gt; element.)</li>
              <li class="loc">($$$/Lessons/Interactivity/Actions/Text12=Select &quot;click&quot; from the  menu.)</li>
              <li class="loc">($$$/Lessons/Interactivity/Actions/Text13=Click on &quot;Playback->Play&quot; in the &quot;Pick an action&quot; section than double-click on  &quot;Stage&quot; in the &quot;Pick a target&quot; section.)</li>
           </ol>
        </div>

    <p class="loc">($$$/Lessons/Interactivity/Actions/Text14=The body of your Action function should look like this:)</p>
    <p class="loc">($$$/Lessons/Interactivity/Actions/Text15=<code>sym.play();</code>)</p>
    <div class="useraction"><ol start="4"><li class="loc">($$$/Lessons/Interactivity/Actions/Text16=Close the code popup.)</li></ol></div>
</div>

<div class="lessonChapter">
  <h3 class="loc">($$$/Lessons/Interactivity/Labels/Title=Labels)</h3>
    <p class="loc">($$$/Lessons/Interactivity/Labels/Description=You can add Labels to the timeline to mark key locations on the Timeline. These can be used in the code you write.)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/Interactivity/Labels/Text17=Make sure the Playhead is at the start of the main animation at 0:00.500 (0.5 seconds).)</li>
          <li class="loc macOnly">($$$/Lessons/Interactivity/Labels/Text18Mac=Add a Label via Cmd + L.)</li>
          <li class="loc winOnly">($$$/Lessons/Interactivity/Labels/Text18Win=Add a Label via Ctrl + L.)</li>
          <li class="loc macOnly">($$$/Lessons/Interactivity/Labels/Text19Mac=Type in <code>loop</code>, and press Return.)</li>
          <li class="loc winOnly">($$$/Lessons/Interactivity/Labels/Text19Win=Type in <code>loop</code>, and press Enter.)</li>
      </ol>
    </div>
    <p class="loc">($$$/Lessons/Interactivity/Labels/Text20=The timeline should now look like this:)</p>
    <div class="screenshot"><img class="locImage" data-imgbase="images/loopLabel" src="images/loopLabel.png" /></div>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Interactivity/TimelineActions/Title=Timeline Actions)</h3>
    <p class="loc">($$$/Lessons/Interactivity/TimelineActions/Description=The Timeline also fires events to inform you what is happening with the animation. The complete event fires when the Playhead reaches the end of the Timeline.)</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Interactivity/TimelineActions/Text21=On the Timeline, open the Timeline Actions popup by pressing the <img class=&quot;inline&quot; src='images/actions_button.png' /> button to the left of the Actions row.)</li>
            <li class="loc">($$$/Lessons/Interactivity/TimelineActions/Text22=Select the &quot;complete&quot; event.)</li>
            <li class="loc">($$$/Lessons/Interactivity/TimelineActions/Text23=Click on &quot;Playback->Play From&quot; in the &quot;Pick an action&quot; section than double-click on  &quot;Stage&quot; in the &quot;Pick a target&quot; section)</li>
            <li class="loc">($$$/Lessons/Interactivity/TimelineActions/Text24=Replace 1000 with <code>&quot;loop&quot;.</code>)</li>
        </ol>
    </div>
    <p class="loc">($$$/Lessons/Interactivity/TimelineActions/Text25=The body of your  function should look like this:)</p>
    <p class="loc">($$$/Lessons/Interactivity/TimelineActions/Text26=<code>sym.play( &quot;loop&quot; );</code>)</p>
    <div class="useraction"><ol start="5"><li class="loc">($$$/Lessons/Interactivity/TimelineActions/Text27=Close the code popup.)</li></ol></div>

    <p class="loc">($$$/Lessons/Interactivity/TimelineActions/Text29=You should now have an animation that requires click to play and loops.)</p>
    <div class="useraction">
        <ol start="6">
            <li class="loc macOnly">($$$/Lessons/Interactivity/TimelineActions/Text28Mac=Cmd + Return to preview in browser and press the Play button.)</li>
            <li class="loc winOnly">($$$/Lessons/Interactivity/TimelineActions/Text28Win=Press Ctrl + Enter to preview in browser and press the Play button.)</li>
        </ol>
    </div>
</div>

<div class="lessonChapter">
  <h3 class="loc">($$$/Lessons/Interactivity/CodePanel/Title=The Code Panel)</h3>
  <p class="loc">($$$/Lessons/Interactivity/CodePanel/Description=Edge Animate also features a Code panel that allows you to access all of the code for your project in one place.)</p>
  <div class="useraction">
      <ul><li class="loc">($$$/Lessons/Interactivity/CodePanel/Text29=Select Window &gt; Code to make the Code panel visible.)</li>
      </ul>
  </div>
  <p class="loc">($$$/Lessons/Interactivity/CodePanel/Text30=On the left side of the Code panel is a tree that provides an overview of the Actions and Triggers in your project.)</p>
  <div class="screenshot"><img class="locImage" data-imgbase="images/code_tree" src="images/code_tree.png" /></div>
  <p class="loc">($$$/Lessons/Interactivity/CodePanel/Text31=You can use the list to select which function to edit as well as add new ones.)</p>
</div>

<div class="lessonChapter">
  <h3 class="loc">($$$/Lessons/Interactivity/LoopCounter/Title=Creating a Loop Counter)</h3>
        <div class="useraction">
            <ol>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text32=In the tree, select &quot;play.click&quot;.)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text33=Position the cursor after <code>sym.play();</code>)</li>
                 <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text34=Copy the code snippet mentioned here and paste it in the code panel:<br />
                    <code>sym.setVariable( &quot;count&quot;, 1 );</code><br />)</li>
                    <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text35=Code in the &quot;Code panel&quot;  with &quot;play.click&quot; selected should look like <br /><code>sym.play();</code><br /><code>sym.setVariable( &quot;count&quot;, 1 );</code>)</li>
            </ol>
        </div>

        <p class="loc">($$$/Lessons/Interactivity/LoopCounter/Text37=This stores a value that we can access later. Let's access it at the end of the timeline and use it to count the number of loops.)</p>
        <div class="useraction">
            <ol start="5">
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text38=Select &quot;Timeline.complete&quot;.)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text39=Put the cursor before <code>sym.play(&quot;loop&quot;);</code>)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text40=Copy the code snippet mentioned here and paste it in the code panel:<br /> <code>var count=sym.getVariable(&quot;count&quot;);</code></br>)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text42=Put the cursor on the line after <code>sym.getVariable(&quot;count&quot;);</code>)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text43=Copy the code snippet mentioned here and paste it in the code panel:<br /> <code>sym.setVariable(&quot;count&quot;,count+1);</code></br>)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text44=Code in the &quot;Code panel&quot;  with &quot;Timeline.complete&quot; selected should look like : </br><code>var count=sym.getVariable(&quot;count&quot;);</code></br><code>sym.setVariable(&quot;count&quot;,count + 1);</code><br /><code>sym.play(&quot;loop&quot;);</code> )</li>
            </ol>
        </div>
        <p class="loc">($$$/Lessons/Interactivity/LoopCounter/Text45=Finally, let's show the count!)</p>
        <div class="useraction">
            <ol start="11">
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text46=Position the Playhead at 0:00.500 (0.5 seconds).)</li>
                <li class="loc macOnly">($$$/Lessons/Interactivity/LoopCounter/Text47Mac=Add a Trigger via Cmd + T.)</li>
                <li class="loc winOnly">($$$/Lessons/Interactivity/LoopCounter/Text47Win=Add a Trigger via Ctrl + T.)</li>
                <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text48=Copy the code snippet mentioned here and paste it in the code panel:<br /> <code>var count=sym.getVariable(&quot;count&quot;);</code></br>)</li>
              </ol>
            </div>

            <p class="loc">($$$/Lessons/Interactivity/LoopCounter/Text50=Finally, the &quot;Set Text&quot; snippet uses a little jQuery to modify the text of an element.)</p>
            <div class="useraction">
                <ol start="14">
                    <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text51=Put the cursor on the line after <code>sym.getVariable( &quot;count&quot; );</code>)</li>
                    <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text52=In the snippets list at the bottom of the code popup, click on &quot;Text->Change Text&quot; in the &quot;Pick an action&quot; category than click on  &quot;Stage&quot; and double click on  &quot;Text&quot; in the &quot;Pick a target&quot; category.)</li>
                    <li class="loc">($$$/Lessons/Interactivity/LoopCounter/Text53=Modify the code so it looks like this: <br/>
                        <code>sym.$(&quot;Text&quot;).html( &quot;&quot; + count );</code>)</li>
                </ol>
            </div>

        <p class="loc">($$$/Lessons/Interactivity/LoopCounter/Text54=Preview your finished animation in the browser.  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/interactivity_finished">($$$/Lessons/Interactivity/LoopCounter/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/Interactivity/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>