This chapter is from the book
This chapter is from the book
This chapter is from the book
Taking the Reuse Lesson
With the Reuse lesson, you can create symbols of an element so that you can reuse it multiple times in you composition. When you import an asset as a symbol or convert an existing element to a symbol, it’s known as a definition. When you use the symbol definition in your animation, it becomes an instance, which you can uniquely modify. You can add multiple instances of the same symbol and animate them differently. By using the same symbol definition, you’re only using the asset once, which reduces time it takes to load it.
Take the Reuse Lesson
From the Welcome screen under Getting Started or the Lessons panel, click the Reuse 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 convert an object to a symbol (Step 2 of 5).
Move the Playhead to 0:01 (1 second).
In the Elements panel, select the SpinRect <div> element.
Click the Modify menu, and then click Convert to Symbol.
Type Spin, and then click OK.This creates a symbol, which you can reuse. These are known as instances.
Click the Next Step link to create instances of a symbol (Step 3 of 5).
In the Library panel, drag the Spin icon from Symbols to the right of the first instance.
Alt-drag the second instance on the Stage to create another copy to the right of it.
Click the Next Step link to convert an object to a symbol (Step 4 of 5).
Double-click one of the instances on the Stage.The symbol opens to in-place symbol editing mode.
In the Properties panel, deselect the Autoplay check box, so the symbol doesn’t play automatically.
In the Timeline, click the Timeline Actions button to the left of the Actions row.
Select complete from the menu.
To loop, click the Play from button in the Snippets list.
Change the time of 1000 to 0. The time is in milliseconds.
Click the Close button to exit.
In the Elements panel, click the Open Actions button for the Center <div> element.
Select click from the menu.
Add the code from the illustration.
Click the Close button to exit.
Click Back button or Stage on the Edit bar to exit symbol editing mode.
Move the Playhead to 0:00 (0 seconds).
In the Timeline, click the Add button (+) in the Playback row for the Spin element.
Click Play from the menu.
Move the Playhead to 0:00.750 (0.75 seconds).
Click the Add button (+) in the Playback row for the Spin2 element, and then click Play.
Move the Playhead to 0:01.500 (1.5 seconds).
Click the Add button (+) in the Playback row for the Spin3 element, and then click Play.
Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or +Return (Mac).
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.
)
)
)
)
)
)
)