INSTRUMENTS, DIAGRAMS, & PRINCIPLES:

Part 3 of 6
Animating with the Timeline
When the menu requests a different subsection, the corresponding symbol animates its child elements to their initial onstage position. To create these animations, I used the EA Timeline panel, which gave me detailed control of my elements at any point in time. Most visual properties of a symbol or DOM element can be set or transitioned to with the help of three major timeline features - the toggle pin, auto keyframe mode and auto transition mode.
Timeline features - auto keyframe mode, auto transition mode, pin tool Pin tool in action
Edge Animate can capture an element's properties at any point in the timeline as a keyframe, either manually by a menu command or automatically, when auto keyframe mode is active. Auto transition mode can be turned on to automatically create a transition between the keyframes if a property value changes. The toggle pin allows the user to "pin" a property value at a specific point in time, then move the playhead to a different time position, edit the value and have the transition automatically updated. Users can also have code triggered at any point of the timeline by attaching it in the Actions panel with the bindTriggerAction API method.
The Leveling Section
The Leveling section is itself a nested symbol, living on the timeline of its parent, the layout1024 symbol. This symbol has its own timeline and six nested children, which also are symbols with their own timelines. When the menu requests this section, its playhead moves down the timeline animating these children into their initial positions on the stage. At this point, the child symbol diagram54_Horiz begins playing its own timeline, moving horizontally, with the overflow being "masked" by its CSS clip property.
The remaining 5 instrument child symbols animate into position from off stage one after another, stopping briefly to show themselves at 140% scale. These symbols behave like buttons in the sense that they can be toggled to reveal information about themselves.
A Leveling Section Child: The 'infoGunnerLevel' Symbol
The screenshot below displays the Leveling Section timeline and the 6 children that exist on it. I expanded the infoGunnerLevel child symbol to reveal how its properties change value over time. When animating into position, four of the symbol's CSS properties - Left, Top, Scale X, and Scale Y, have their values change. These transitions are represented by the green bars on the timeline.

In the first .125 second, infoGunnerLevel moves from an off stage xy position to one onstage while growing in scale 140%. It remains unchanged till the 1 second point, momentarily pausing for the viewer, as indicated by the break in the green transition bars. Finally, the symbol transitions to its final position and 100% scale. This process is repeated by the 4 other info symbols as the playhead moves down the parent timeline.
The five info symbols have their own nested, less complicated timelines which are .2 second in duration. I assigned a toggle() function to each info symbol which takes two functions as parameters. When clicked it will call one of the parameter functions depending on the toggle state. In the body of first function, I target the symbol itself and call the play() API function to move the playhead forward, displaying the info panel 'opening' animation. The second function uses the playReverse() API function, which reverses the animation back to the 'closed' position. I have included a code snippet below showing how I bound the toggle function to the infoGunnerLevel symbol.
// Toggle info boxes
sym.$("infoGunnersLevel").toggle(
	function(){
    	sym.getSymbol("infoGunnersLevel").play();
    },
    function(){
    	sym.getSymbol("infoGunnersLevel").playReverse();
    });
The screenshot of the infoGunnerLevel timeline above reveals that it is composed of 6 child elements, each on their own layer. In Edge Animate, the ability to specify depth (the effect of one element being above another) is accomplished by dragging the element name in the Elements panel. The “closed” state is located at the beginning of a child symbol's timeline while the “open” state is at the end.

In the "closed" state, I have the Display property of the 2 text elements set to off while the red and tan rectangle elements, each with dual radius-ed corners, have their Height property set to 0. When the symbol's playhead moves down the timeliness to the 'open' state, the Height property transitions to its expanded size and the text element's Display property is set to 'on'. As explained earlier, this animated open/close effect can be toggled back and forth with a click.

Comments are loading...

VIEW DEMO


TUTORIAL
Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

EDGE RESOURCES
Edge Animate
Edge Animate Tutorials
Edge Animate on Twitter

LINKS
ImageOptim
Fireworks CS6