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.
- 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.
- In the Timeline, click the Playback options for the moreinfo element and choose Stop.
- Double-click the moreinfo symbol on the Stage and press the spacebar to view the animation within the symbol.
- Click the Stage button at the top of the Stage to exit your symbol.
- 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.
)
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).
)
)
The playback of the internal symbol animation does not play on the main Timeline.
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.
)
)
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.
- In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
- Choose mouseover for the event.
- Choose the Get Symbol option.
- 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.
- On the next line in the script panel, choose the Play option.
- Replace sym with the variable, mySymbolObject, which refers to your symbol.
The script panel for triangle opens.
)
Edge Animate adds a mouseover event tab.
)
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.
)
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.
)
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.
)
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.
- In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
- Click on the Plus button on the upper-left corner and choose mouseout for the event.
- Choose the Get Symbol option, and replace the highlighted code with moreinfo.
- On the next line in the script panel, choose the Stop at option.
- Replace sym with the variable, mySymbolObject, which refers to your symbol. Replace the 1000 default millisecond argument with 0.
- Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS).
The script panel for moreinfo button opens.
Edge Animate adds a mouseout event tab.
)
)
The full statement appears as follows:
var mySymbolObject = sym.getSymbol("moreinfo");
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.
)
The next statement appears as follows:
mySymbolObject.stop(0);
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.
)
Using jQuery Effects
The Edge Animate API offers a nice balance of power, flexibility, and ease of use to incorporate interactivity to your designs and animations. Inserting script by simply clicking a button in the script panel is (mostly) idiot-proof. However, adding a bit of jQuery to your scripts can often make your job easier. As you learned earlier in this lesson, jQuery is a JavaScript library that was written specifically to make it simple to select elements on a Web page and creating animations and transitions. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or a slide-in and slide-out. Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you see fit.
Let’s examine one particular jQuery method, fadeToggle(). The method fadeToggle() animates an element’s transparency to fade up or fade down, depending on its current state. If the element is transparent, it will become opaque. If the element is opaque, it will become transparent.
- In a new Edge Animate composition, add a small rectangle and an image on the Stage. Name the rectangle Rectangle, and the image Image.
- In the Timeline or the Elements panel, click the Open Actions button for the Rectangle element.
- Choose click for the event.
- Add the following statement for the click event:
- That’s all! Preview your composition in a browser.
)
)
sym.$("Image").fadeToggle();
)
When you click on the rectangle, Edge Animate uses jQuery to select the image and executes the fadeToggle() method. The image fades in and out with alternate clicks. jQuery does all the work of creating two inverted animations without requiring you to manually create any symbols, keyframes, or mechanisms to remember the state of the image. jQuery is powerful and makes a good addition to your designer-developer toolkit. You can view the 05JQuery.an file in the 05End_JQuery folder to see the completed example.