<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Working with Symbols</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/Symbols/Title=Introduction)</h3>
    <p class="loc">($$$/Lessons/Symbols/Description=This lesson will teach you about  Symbols, a powerful feature that enhances both animation and interactivity.)</p>
                
    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/symbols_start">($$$/Lessons/Symbols/ClickToOpenSample=Click to open the sample)</a></p>

    <div class="useraction">
        <p class="loc macOnly">($$$/Lessons/Symbols/Text1Mac=Press Cmd + Return to preview this sample in the browser.)</p>
        <p class="loc winOnly">($$$/Lessons/Symbols/Text1Win=Press Ctrl + Enter to preview this sample in the browser.)</p>
    </div>
    
    
</div>
    
<div class="lessonChapter">

   <h3 class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Title=Convert to Symbol)</h3>
    
   <div class="useraction">
        <ol>
           <li class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text2=Make sure the Playhead is at 0:01 (1 second).)</li>
           <li class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text3=In the Elements panel, right-click the SpinRect &lt;div&gt; and choose &quot;Convert to Symbol&quot;.)</li>
           <li class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text4=In the &quot;Create Symbol&quot; dialog, name it &quot;Spin&quot;, leave &quot;Autoplay timeline&quot; checked and click Ok.)</li>
      </ol>
  </div>
    
  <p class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text5=This simple action causes &quot;SpinRect&quot;, its children and all of their animations to be removed and replaced by an instance of a &quot;Spin&quot; symbol.)</p>
  <p class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text6=Each symbol instance has a &quot;Playback&quot; row that shows the region of playback as a <i>chevron</i> pattern.)</p>
  <div class="screenshot"><img class="locImage" data-imgbase="images/playback1" src="images/playback1.png" /></div>
  <p class="loc">($$$/Lessons/Symbols/ConvertToSymbol/Text7=If you preview your animation, you will notice that converting to a symbol has not changed the animation.)</p>
   
  <div class="useraction">
      <ol start="4">
        <li class="loc macOnly">($$$/Lessons/Symbols/ConvertToSymbol/Text8Mac=Press Cmd + Return to preview in browser.)</li>
        <li class="loc winOnly">($$$/Lessons/Symbols/ConvertToSymbol/Text8Win=Press Ctrl + Enter to preview in browser.)</li>
      </ol>
  </div>
</div>
<div class="lessonChapter">

    <h3 class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Ttile=Creating Instances)</h3>
    <p class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Text9=Also notice that the Library contains a &quot;Spin&quot; symbol. This is not an instance, but a definition.)</p>
    <p class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Text10=When you create a Symbol, you are creating a definition. This includes the elements it contains, as well as animations, triggers and actions.)</p>
    <p class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Text11=From a definition you can create multiple instances.  To do so, simply drag the symbol icon <img class='inline' src='images/symbol_icon.png' /> from the Library panel to the stage.)</p>
	
    <div class="useraction">
    	<ol>
        	<!--li>($$$/Lessons/Symbols/CreatingSymbolInstances/Text12=Turn off Auto-Keyframe Mode via &quot;A&quot; (no modifier))</li-->
            <li class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Text13=Drag the &quot;Spin&quot; icon from the Library to the stage to the right of the first instance.)</li>
            <li class="loc macOnly">($$$/Lessons/Symbols/CreatingSymbolInstances/Text14Mac=Create a third instance of the symbol by Option + dragging the second symbol instance to the right.  Your stage should look like this:)</li>
            <li class="loc winOnly">($$$/Lessons/Symbols/CreatingSymbolInstances/Text14Win=Create a third instance of the symbol by Alt + dragging the second symbol instance to the right.  Your stage should look like this:)</li>
    	</ol>
    </div>
    <div class="screenshot"><img src="images/3symbols.png" /></div>
    <div class="useraction">
        <ol start="3"><li class="loc">($$$/Lessons/Symbols/CreatingSymbolInstances/Text15=Preview in Browser.)</li></ol>
    </div>
</div>
    
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Title=Customizing Symbols)</h3>
    <p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text16=You can customize symbols. When you do, you are changing the definition and thus all of the symbol's instances.)</p>
    <p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text17=Now let's customize the playback animation of each symbol instance so that they're not all synchronized.)</p>
    <div class="useraction">
      <ol>
        <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text18=Double-click one of the instances on the stage to enter in-place editing mode.)</li>
        <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text19=In the Properties Panel, uncheck the &quot;Autoplay&quot; checkbox.)</li>
      </ol>
    </div>
    
    <p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text20=This configures the symbol to not play automatically.)</p>
    
    <div class="useraction">
      <ol start="3">
              <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text21=On the Timeline, open the Timeline Actions popup by pressing the <img class='inline' src='images/actions_button.png' /> button to the left of the Actions row.)</li>
              <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text22=Select the &quot;complete&quot; event.)</li>
              <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text23=To loop, in the snippets list at the bottom of the code popup, click on &quot;Playback->Play From&quot; in the &quot;Pick an action&quot; category than double-click on  &quot;Spin&quot; in the &quot;Pick a target&quot; category.)</li>
              <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text24=Change the time of 1000 to 0.  The time is in milliseconds.)</li>
              <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text25=Close the code popup.)</li>
      </ol>
    </div>
    
    <p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text26=Symbols can also have interactions.)</p>
    <div class="useraction">
    	<ol start="8">
        	<li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text27=In the Elements Panel, select the Open Actions button
            	<img class='inline' src='images/actions_button.png' /> for the &quot;Center&quot; &lt;div&gt; element.)</li>
        	<li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text28=Select click.)</li>
        	<li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text29=Add the following code in the editor:<br>)</li>
        </ol>
    </div>
     <p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text30=<code>
        	  if (sym.isPlaying()) <br>
              &nbsp;&nbsp;&nbsp;&nbsp;sym.stop();<br>
			  else<br>
			  &nbsp;&nbsp;&nbsp;&nbsp;sym.play();
    </code>)</p>
    
	<p class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text31=This action stops the symbol animation from playing.)</p>
    
    <div class="useraction">
      <ol start="11">
            <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text32=Close the code popup.)</li>
            <li class="loc">($$$/Lessons/Symbols/CustomizingSymbols/Text33=To exit symbol editing mode, click &quot;Stage&quot; in the breadcrumb at the top of the stage.)</li>
      </ol>
	</div>
    <div class="screenshot"><img class="locImage" data-imgbase="images/breadcrumb" src="images/breadcrumb.png" /></div>
</div>
    
<div class="lessonChapter">
  <h3 class="loc">($$$/Lessons/Symbols/ControllingPlayback/Title=Controlling Playback)</h3>
    <p class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text34=Now that &quot;Autoplay&quot; has been turned off, notice that the playback rows are empty. If you preview the animation, nothing happens.)</p>
    <p class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text35=To control playback, you can either write JavaScript  or use Playback commands, which reside on the Playback row.)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text36=Move the Playhead to 0:00 (0 seconds).)</li>
          <li class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text37=Click the + button in the &quot;Spin&quot; Playback row and select Play.)</li>
      </ol>
    </div>
    <div class="screenshot" ><img class="locImage" data-imgbase="images/playback_menu" src="images/playback_menu.png" /> </div>
    <div class="useraction">
      <ol start="3">
          <li class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text38=Move the Playhead to 0:00.750 (0.75 seconds), click the + button in the &quot;Spin2&quot; Playback row and select Play.)</li>
          <li class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text39=Move the Playhead to 0:01.500 (1.5 seconds), click the + button in the &quot;Spin3&quot; Playback row and select Play.)</li>
      </ol>
    </div>

    <p class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text40=Try previewing your finished animation in the browser.  Click on the center dot to pause and restart playback per symbol.)</p>
    <p class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text41=Notice how Symbols allow you to add independent animation and interaction, and enable reuse.)</p>
    <p class="loc">($$$/Lessons/Symbols/ControllingPlayback/Text42=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/symbols_finished">($$$/Lessons/Symbols/ControllingPlayback/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/Symbols/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>
