INSTRUMENTS, DIAGRAMS, & PRINCIPLES:

Part 5 of 6
The Stonehenge Section
The Stonehenge section consists of a background with a simple image rotation system and an image index text field sitting above. The image rotator includes a PREV and NEXT button elements for manual navigation. The rotated images tumble into place from the right as the previous image simultaneously exits to the left. The image index textfield also is updated.
lines 3-6 At the .25 timeline mark we trigger code that takes the playhead to the "begin" label, which is beyond the intro animation, and at the beginning of content animations. The content index textfield is set to '0'.

lines 1-4 I assign a click event handler function to the nextButton symbol that will play the Stonehenge section's playhead forward when clicked.

lines 6-13 I assign a click event handler function to the prevButton symbol that will play the Stonehenge section's playhead backward when clicked if the playhead is past the 1 second mark (past the intro animation).

lines 15- 41 At five points on the Stonehenge timeline I add triggers that stop the playhead and update the index textfield number at the end of each content animation.

Symbol.bindElementAction(compId, symbolName, "${_nextButton}", "click", function(sym, e) {
   // insert code for mouse click here
   sym.play();
}); //Edge binding end

Symbol.bindElementAction(compId, symbolName, "${_prevButton}", "click", function(sym, e) {         
   if (sym.getPosition() >= 1000) {
      sym.playReverse();
   }
   else {
    sym.play();
   }          
}); //Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) {
   sym.$("vidNumText").html("0");
   sym.play();
}); //Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1264, function(sym, e) {
   sym.stop();
   sym.$("vidNumText").html("1");
}); //Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1770, function(sym, e) {
   sym.stop();
   sym.$("vidNumText").html("2");
}); //Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2249, function(sym, e) {
   sym.stop();
   sym.$("vidNumText").html("3");
}); //Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2500, function(sym, e) {
   // play the timeline from the begin label
   sym.play("begin");

   // Reset position index text
   sym.$("vidNumText").html("0");
}); //Edge binding end
The Information Sidebar
The information sidebar changes its content based on which subsection is currently active. When a menu button is clicked, four local variables are passed in as parameters to the updatePanelText function, which updates each of the four textfields with the new value. jQuery selectors target, hide, update, then fade these textfields back in.
Information Sidebar
// Update Panel Text
updatePanelText = function (nm,ph,pa,ca){
	$(sym.lookupSelector("nameText")).hide().html(nm).fadeIn(1000);
    $(sym.lookupSelector("photographerText")).hide().html(ph).fadeIn(1000);
    $(sym.lookupSelector("paraText")).hide().html(pa).fadeIn(1000);
    $(sym.lookupSelector("catagoryText")).hide().html(ca).fadeIn(1000);
};

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