This chapter is from the book
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
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.
Click the Click to open the sample link.The interactivity_start.html file opens, displaying an animation.
Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or 
+Return (Mac).The animation plays in your browser.
Click the Close button to exit your browser.
Click the Next Step link to add a trigger (Step 2 of 7).
Move the Playhead to 0:00 in the Timeline.
Click the Timeline menu, and then click Insert Trigger or press Ctrl+T (Win) or +T (Mac).
In the Snippets list, click the Stop button.
Click the Close button to exit.
Click the Next Step link to add an action (Step 3 of 7).
In the Elements panel, click the Open Actions button for the play <div> element.
Select click from the menu.
In the Snippets list, click the Play button.
Click the Close button to exit.
Click the Next Step link to add a label on the Timeline (Step 4 of 7).
Move the Playhead to 0:00.500 (0.5 seconds).
Click the Timeline menu, and then click Insert Label or press Ctrl+L (Win) or +L (Mac).
Type Loop for the label, and then press Enter (Win) or Return (Mac).
Click the Next Step link to add a timeline action (Step 5 of 7).
In the Timeline, click the Timeline Actions button to the left of the Actions row.
Select complete from the menu.
In the Snippets list, click the Play button.
Replace 1000 with loop.
Click the Close button to exit.
Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or +Return (Mac).
Click the Play button to start the animation in your browser, and then click the Close button to exit.
Click the Next Step link to open the Code window (Step 6 of 7).
Click the Window menu, and then click Code.The Code panel opens in a separate window.
Click the Next Step link to create a loop counter (Step 7 of 7).
In the tree, select play.click.
Click to place the insertion point below the code: sym.play();
Click the Code Snippets button to display the Snippets panel.
Click Set Symbol Variable from the Snippets list.
Modify the code to the following: sym.setVariable(“count”,1);This stores a value that you’ll use to count the number of loops.
In the tree, select Timeline.complete.
Click to place the insertion point before the code: sym.play(loop);
Click Get Symbol Variable from the Snippets list.
Modify the code to the following: var count =sym.getVariable (“count”);
Click to place the insertion point on the line after the code: var count =sym.getVariable (“count”);
Click Set Symbol Variable from the Snippets list.
Modify the code to the following: sym.setVariable (“count”, count + 1);
Move the Playhead to 0:00.500 in the Timeline.
Click the Timeline menu, and then click Insert Trigger or press Ctrl+T (Win) or +T (Mac).
In the Snippets list, click the Get Symbol Variable button.
Modify the code to the following: var count = sym.getVariable (“count”);This displays the count.
Click to place the insertion point on the line after the code: sym.getVariable (“count”);
Click Set Element Text from the Snippets list.Set Element Text uses jQuery code to modify the text of an element.
Modify the code to the following: sym.$(“Text”).html(“” + count);
Click the Close button to exit.
Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or +Return (Mac).
Click the Play button to start the animation in your browser.The animation continue to count until you close your browser.
Click the Close button to exit.The lesson is complete.
Click the File menu, click Save, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
)
)
)
)
)
)
)
)