Home / Articles / Adding Basic Interactivity in Adobe Edge Animate

Adding Basic Interactivity in Adobe Edge Animate

Article Description

Learn how to use Adobe Edge Animate’s built-in code snippets and intuitive panels to add actions to create engaging, user-driven, interactive experiences.

From the book

Adobe Edge Animate Classroom in a Book

Adobe Edge Animate Classroom in a Book

$39.99 (Save 20%)

Controlling animated elements

Controlling animated elements

So far, you’ve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular elements. You can also add code to control the playback of animated symbols.

Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal animation. With JavaScript, you can control the symbol animations to create more sophisticated interactions. For example, you can create a button that controls a dramatic animated unfurling or closing of a map. Or, you can create a button that controls the animated expansion or collapse of a more info box. The map and the more info box would be symbols that behave independently on the main Timeline.

For your interactive travel slideshow, you’ll add a button at the top of the Stage that, when rolled over, elegantly animates to reveal information about the images and Myanmar.

Adding the button and animated symbol

The button and the animated symbol have already been created for you, and are in the Library ready to use.

  1. In the Library panel, expand the Symbols section, and drag the moreinfo symbol to the Stage. Position the moreinfo symbol at X=200, Y=0.
  2. The moreinfo symbol appears in the Elements and Timeline panels. The short playback arrowheads on the Timeline show how long the animation within the symbol lasts (1 second long).

  3. In the Timeline, click the Playback options for the moreinfo element and choose Stop.
  4. The playback of the internal symbol animation does not play on the main Timeline.

  5. Double-click the moreinfo symbol on the Stage and press the spacebar to view the animation within the symbol.
  6. The symbol consists of two short animations. The long horizontal gray rectangle expands, and at the same time, the clipping box of some informational text expands to reveal it.

  7. Click the Stage button at the top of the Stage to exit your symbol.
  8. Drag the triangle.png image from the Library Assets folder to the Stage. Position the triangle element at X=484, Y=3, or use the Smart Guides to center the element over the moreinfo element.

Play a symbol animation

The symbol is currently stopped at 0 seconds. You’ll add a mouseover event to the triangle button that tells the symbol to begin playing.

  1. In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
  2. The script panel for triangle opens.

  3. Choose mouseover for the event.
  4. Edge Animate adds a mouseover event tab.

  5. Choose the Get Symbol option.
  6. Edge Animate adds the JavaScript code to select a particular symbol on the Stage. The highlighted portion of the code is the name of the symbol that you want to select.

  7. Replace the highlighted code with moreinfo, to match the moreinfo element on the Stage. Make sure that the double straight quotation marks remain around your element name.
  8. The full statement appears as follows:

    var mySymbolObject = sym.getSymbol("moreinfo");

    The first part of this statement, var mySymbolObject, creates a variable for the reference to your symbol, so you can control it.

  9. On the next line in the script panel, choose the Play option.
  10. Edge Animate adds a statement that plays the sym object, or the main Timeline. However, you want the symbol to play its animation, not the animation on the main Timeline.

  11. Replace sym with the variable, mySymbolObject, which refers to your symbol.
  12. The next statement appears as follows:

    mySymbolObject.play();

Reset the symbol animation

Now, you’ll add a mouseout event for the triangle element to move its playhead back to 0 seconds to reset the animation.

  1. In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
  2. The script panel for moreinfo button opens.

  3. Click on the Plus button on the upper-left corner and choose mouseout for the event.
  4. Edge Animate adds a mouseout event tab.

  5. Choose the Get Symbol option, and replace the highlighted code with moreinfo.
  6. The full statement appears as follows:

    var mySymbolObject = sym.getSymbol("moreinfo");
  7. On the next line in the script panel, choose the Stop at option.
  8. Edge Animate adds a statement that stops the sym object, or the main Timeline. However, you want the symbol to stop its animation, not the animation on the main Timeline.

  9. Replace sym with the variable, mySymbolObject, which refers to your symbol. Replace the 1000 default millisecond argument with 0.
  10. The next statement appears as follows:

    mySymbolObject.stop(0);
  11. Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS).

When you roll over the triangular button at the top of the Stage, the moreinfo symbol plays its animation, which reveals the text box and text. When you roll off the button, the text box and text collapse.