Home > Articles > Computer Software > Creative Software > Other

  • Print
  • + Share This
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

  • 01yellow_circle.jpg 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.

  • 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 convert an object to a symbol (Step 2 of 5).
  • 06yellow_circle.jpg Move the Playhead to 0:01 (1 second).
  • 07yellow_circle.jpg In the Elements panel, select the SpinRect <div> element.
  • 08yellow_circle.jpg Click the Modify menu, and then click Convert to Symbol.

  • 09yellow_circle.jpg Type Spin, and then click OK.

    This creates a symbol, which you can reuse. These are known as instances.

  • 10yellow_circle.jpg Click the Next Step link to create instances of a symbol (Step 3 of 5).
  • 11yellow_circle.jpg In the Library panel, drag the Spin icon from Symbols to the right of the first instance.
  • 12yellow_circle.jpg Alt-drag the second instance on the Stage to create another copy to the right of it.
  • 13yellow_circle.jpg Click the Next Step link to convert an object to a symbol (Step 4 of 5).
  • 14yellow_circle.jpg Double-click one of the instances on the Stage.

    The symbol opens to in-place symbol editing mode.

  • 15yellow_circle.jpg In the Properties panel, deselect the Autoplay check box, so the symbol doesn’t play automatically.
  • 16yellow_circle.jpg In the Timeline, click the Timeline Actions button to the left of the Actions row.
  • 17yellow_circle.jpg Select complete from the menu.
  • 18yellow_circle.jpg To loop, click the Play from button in the Snippets list.
  • 19yellow_circle.jpg Change the time of 1000 to 0. The time is in milliseconds.
  • 20yellow_circle.jpg Click the Close button to exit.
  • 21yellow_circle.jpg In the Elements panel, click the Open Actions button for the Center <div> element.
  • 22yellow_circle.jpg Select click from the menu.
  • 23yellow_circle.jpg Add the code from the illustration.
  • 24yellow_circle.jpg Click the Close button to exit.
  • 25yellow_circle.jpg Click Back button or Stage on the Edit bar to exit symbol editing mode.

  • 26yellow_circle.jpg Move the Playhead to 0:00 (0 seconds).
  • 27yellow_circle.jpg In the Timeline, click the Add button (+) in the Playback row for the Spin element.
  • 28yellow_circle.jpg Click Play from the menu.

  • 29yellow_circle.jpg Move the Playhead to 0:00.750 (0.75 seconds).
  • 30yellow_circle.jpg Click the Add button (+) in the Playback row for the Spin2 element, and then click Play.
  • 31yellow_circle.jpg Move the Playhead to 0:01.500 (1.5 seconds).
  • 32yellow_circle.jpg Click the Add button (+) in the Playback row for the Spin3 element, and then click Play.

  • 33yellow_circle.jpg Click the File menu, and then click Preview In Browser or press Ctrl+Enter (Win) or apple.jpg+Return (Mac).
  • 34yellow_circle.jpg Click the Close button to exit.

    The lesson is complete.

  • 35yellow_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