INSTRUMENTS, DIAGRAMS, & PRINCIPLES:

Part 4 of 6
The Mapping Section
The Map section (MappingSection) uses the established keyframe/timeline techniques for animation and appends its HTML with a tag that loads a Google map into the background.
lines 1-4 I added code to the creationComplete event of the symbol that included two variables and a function. The currSection var stores a string object that represents the current inventor section. The currentMapRequest var stores HTML code that will load a Google map.

lines 4-12 The changeInventor() function is passed a parameter object created by the clicked inventor button symbol and uses the object's map and section values to update the textfields in the info panel.
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
    var currSection = '', currentMapRequest = '';
	
    changeInventor = function(obj){
		// For Later down the sym timeline
		sym.currSection = obj.section;
		sym.currentMapRequest = obj.map;
                            
		// Change now
		sym.$("descriptText").html(obj.description);
		sym.$("inventorNameText").html(obj.name);
    };

});//Edge binding end
Using the bindTriggerAction API function, I add code that will stop the MappingSection's playhead at the .246 second point, after the four inventor buttons have shown themselves. When the playhead hits this point in the timeline, it 'triggers' the stop() API function to be called.
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 246, function(sym, e) {
    sym.stop();
});//Edge binding end
line 2 When an inventor button symbol is clicked, it creates a local variable and assigns an inventor object to it.

line 2-5 The object is made up of four name/value pairs that represent the inventor and his map.

line 8 The object is then passed to the changeInventor function and it updates inventor properties.

line 11 The playhead now continues down the timeline.
// Create inventor object and assign it to a local variable, modify name/value pairs, and pass it to the changeInventor function
var io = {'section':'babbage',
		  'name':'Charles Babbage',
		  'description': "Chancellor of the state of Shu Han during the...",
		  'map': '<iframe width="895" height="580" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=5+Devonshire+Street,+Portland+Place,+London&aq=&sll=40.518715,-74.412095&sspn=0.191828,0.381775&t=h&g=Menlo+Park,+New+Jersey&ie=UTF8&hq=5+Devonshire+Street,+Portland+Place,&hnear=London,+United+Kingdom&ll=51.513646,-0.138913&spn=0.020663,0.026951&output=embed"></iframe>'};

// Call changeInventor function and pass inventor object as parameters
changeInventor(io);

// New inventor values have updated - now play the animation
sym.play();
line 6 Again, using the bindTriggerAction API function, I added code that will stop the MappingSection's playhead at the .899 second point.

line 7 Then the current inventor animation will play, as determined by the updated currSection variable.

line 8 The mapHolder symbol has it's HTML changed, as determined by the updated currentMapRequest variable and loads in the specific location in Google maps.
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 899, function(sym, e) {
    
    // Stop - end of the sym animation timeline
    // Play inventor animation (determined by the currSection variable)
    // Load Google map (determined by the currentMapRequest variable)
    sym.stop();
    sym.getSymbol("inventors").play(sym.currSection);
    sym.$("mapholder").html(sym.currentMapRequest);
    
});//Edge binding end
The Edison Map The Euclid Map The Babbage Map The Liang Map
The Video Section
The Video section (VideoSection) uses the established keyframe/timeline techniques for animation. To play a video, its HTML is appended with a tag that loads an iFrame that will in turn load a YouTube video.
lines 1-4After the child elments take their initial positions on the stage, a timeline action is triggered to load the iFrame tag into the vContainer element's HTML.The initial video is retrieved from YouTube.

lines 7-10 When a video thumbnail element is clicked, the vContainer element's HTML is replaced by an updated iframe tag with the new video URL.

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2512, function(sym, e) {
   var youtubevid=$("<iframe width='400' height='300' src='http://www.youtube.com/embed/_SqXyzUdzc0'></iframe>");
   sym.$("vContainer").html(youtubevid);
});
//Edge binding end

Symbol.bindElementAction(compId, symbolName, "${_t1}", "click", function(sym, e) {
   var youtubevid=$("<iframe width='400' height='300' src='http://www.youtube.com/embed/_DryzUstc0'></iframe>");
   sym.$("vContainer").html(youtubevid);
}); //Edge binding end

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