Home > Articles > Home & Office Computing

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Taking the Extend Lesson

With the Extend lesson, you can code to your composition to extend the functionality of your animation. With the code you can add interactivity to animation. For example, you can add code to start an animation when you click a button. When you click the button, it triggers an event to take place. With Edge Animate, you don’t have to be a programmer to add interactivity. It comes with Code snippets, segments of code, that you can quickly insert to perform a task.

Take the Extend Lesson

  • 01yellow_circle.jpg From the Welcome screen under Getting Started or the Lessons panel, click the Extend lesson tile to start it.

    The Welcome screen closes, Edge Animate creates a new Untitled project, and the Lessons panel displays the start of the lesson.

  • 02yellow_circle.jpg Click the Click to open the sample link.

    The interactivity_start.html file opens, displaying an animation.

  • 03yellow_circle.jpg Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or apple.jpg+Return (Mac).

    The animation plays in your browser.

  • 04yellow_circle.jpg Click the Close button to exit your browser.

  • 05yellow_circle.jpg Click the Next Step link to add a trigger (Step 2 of 7).
  • 06yellow_circle.jpg Move the Playhead to 0:00 in the Timeline.
  • 07yellow_circle.jpg Click the Timeline menu, and then click Insert Trigger or press Ctrl+T (Win) or apple.jpg+T (Mac).
  • 08yellow_circle.jpg In the Snippets list, click the Stop button.
  • 09yellow_circle.jpg Click the Close button to exit.

  • 10yellow_circle.jpg Click the Next Step link to add an action (Step 3 of 7).
  • 11yellow_circle.jpg In the Elements panel, click the Open Actions button for the play <div> element.

    f03eda32.jpg
  • 12yellow_circle.jpg Select click from the menu.
  • 13yellow_circle.jpg In the Snippets list, click the Play button.
  • 14yellow_circle.jpg Click the Close button to exit.

  • 15yellow_circle.jpg Click the Next Step link to add a label on the Timeline (Step 4 of 7).
  • 16yellow_circle.jpg Move the Playhead to 0:00.500 (0.5 seconds).
  • 17yellow_circle.jpg Click the Timeline menu, and then click Insert Label or press Ctrl+L (Win) or apple.jpg+L (Mac).
  • 18yellow_circle.jpg Type Loop for the label, and then press Enter (Win) or Return (Mac).
  • 19yellow_circle.jpg Click the Next Step link to add a timeline action (Step 5 of 7).
  • 20yellow_circle.jpg In the Timeline, click the Timeline Actions button to the left of the Actions row.

  • 21yellow_circle.jpg Select complete from the menu.
  • 22yellow_circle.jpg In the Snippets list, click the Play button.
  • 23yellow_circle.jpg Replace 1000 with loop.
  • 24yellow_circle.jpg Click the Close button to exit.
  • 25yellow_circle.jpg Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or apple.jpg+Return (Mac).
  • 26yellow_circle.jpg Click the Play button to start the animation in your browser, and then click the Close button to exit.
  • 27yellow_circle.jpg Click the Next Step link to open the Code window (Step 6 of 7).
  • 28yellow_circle.jpg Click the Window menu, and then click Code.

    The Code panel opens in a separate window.

  • 29yellow_circle.jpg Click the Next Step link to create a loop counter (Step 7 of 7).
  • 30yellow_circle.jpg In the tree, select play.click.
  • 31yellow_circle.jpg Click to place the insertion point below the code: sym.play();
  • 32yellow_circle.jpg Click the Code Snippets button to display the Snippets panel.
  • 33yellow_circle.jpg Click Set Symbol Variable from the Snippets list.
  • 34yellow_circle.jpg Modify the code to the following: sym.setVariable(“count”,1);

    This stores a value that you’ll use to count the number of loops.

  • 35yellow_circle.jpg In the tree, select Timeline.complete.
  • 36yellow_circle.jpg Click to place the insertion point before the code: sym.play(loop);
  • 37yellow_circle.jpg Click Get Symbol Variable from the Snippets list.
  • 38yellow_circle.jpg Modify the code to the following: var count =sym.getVariable (“count”);
  • 39yellow_circle.jpg Click to place the insertion point on the line after the code: var count =sym.getVariable (“count”);
  • 40yellow_circle.jpg Click Set Symbol Variable from the Snippets list.
  • 41yellow_circle.jpg Modify the code to the following: sym.setVariable (“count”, count + 1);

  • 42yellow_circle.jpg Move the Playhead to 0:00.500 in the Timeline.
  • 43yellow_circle.jpg Click the Timeline menu, and then click Insert Trigger or press Ctrl+T (Win) or apple.jpg+T (Mac).
  • 44yellow_circle.jpg In the Snippets list, click the Get Symbol Variable button.
  • 45yellow_circle.jpg Modify the code to the following: var count = sym.getVariable (“count”);

    This displays the count.

  • 46yellow_circle.jpg Click to place the insertion point on the line after the code: sym.getVariable (“count”);
  • 47yellow_circle.jpg Click Set Element Text from the Snippets list.

    Set Element Text uses jQuery code to modify the text of an element.

  • 48yellow_circle.jpg Modify the code to the following: sym.$(“Text”).html(“” + count);
  • 49yellow_circle.jpg Click the Close button to exit.

  • 50yellow_circle.jpg Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or apple.jpg+Return (Mac).
  • 51yellow_circle.jpg Click the Play button to start the animation in your browser.

    The animation continue to count until you close your browser.

  • 52yellow_circle.jpg Click the Close button to exit.

    The lesson is complete.

  • 53yellow_circle.jpg Click the File menu, click Save, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
  • + Share This
  • 🔖 Save To Your Account