INSTRUMENTS, DIAGRAMS, & PRINCIPLES:

Part 2 of 6
Building the Application
With 'scientific instruments' as a subject, and a worn vintage look and feel for the interface, the application will deliver its content via four interactive subsections and the information side panel. I used Adobe Illustrator for design and vector graphics and created the final bitmap graphics with Adobe Photoshop. This is my standard operating procedure when developing concepts and user interface design for a new application project.

Depending in large part on their job description, the final graphics fall into one of three basic categories. If the graphic has an irregular shape that requires the background to show through, it will become a 32 bit PNG. Or, if the graphic is rectangular and will have an even opacity, JPEG format is used (the Edge opacity controls are used to change overall opacity). Finally, if scalability and flat color are needed, the format will be SVG. When optimizing the final graphics, I used ImageOptim for PNGs and Adobe Fireworks for JPGs.

To include these final graphics in my Edge Animate project, I simply copied them into the images folder that resides in the project folder. When the .an project file is opened, your images will be recognized and now exist in the EA Library panel.
The Stage Symbol
The Edge Animate Runtime is organized around the concept of symbols. A symbol is a set of self-contained behaviors, timelines and graphics. The stage is a symbol and there is always a single root stage in every Edge Animate composition - think of it as the canvas that your project is built on. The stage and other symbol instances are attached to an element in the DOM.

line 5 In the Actions panel, I used the stage symbol's creationComplete event to change the CSS of the body element tag, setting the background-image property to a leather pattern with jQuery.
// Code to be run when the composition is fully loaded here
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
	
    // Set Background Image to leather
    $('body').css("background-image", "url(images/leatherColored.jpg)");
                              
}); //Edge binding end
The 'layout1024' Symbol
The main symbol is the layout1024 symbol - which is essentially a wrapper for the symbols that make up the application. layout1024 also contains the code that will implement the base functionality and provide a central scope where I can intuitively target and control the nested child symbols. The reasoning behind the layout1024 naming convention is that I would someday recode the project to have a responsive layout, dynamically adding this horizontally designed symbol (or a vertical version) to the stage as needed.

I offset the layout1024 symbol 30 pixels from the top and left by selecting it and changing its x and y values in the EA Properties panel. This offset will allow the background of the DOM element holding the Edge composition (in this case, the body tag which we modified in the previous code) to show through, creating a viewport effect.
Cover Operations
When the application initially loads, the IntroCover graphic will be covering the viewport. Moving this cover to reveal the application content area will be the first interactive feature we address. It's pretty straight forward...

lines 10-13 Clicking the IntroCover element calls the play() API method on the layout1024 symbol to play its timeline forward, moving the IntroCover to reveal the interface setup animation.

lines 2-7 Inversely, clicking the RedLabel_2 element in the upper left corner calls the playReverse() method on layout1024 to play its timeline backward to the first frame which repositions the IntroCover back over the viewport.
Info can be seen
Edge uses the bindElementAction API method to associate an anonymous callback function to be executed in response to an event (click) triggered by an element (IntroCover). It's in the body of this callback function that I placed my event handling code using the EA Actions panel.
// RED LABEL ----------
Symbol.bindElementAction(compId, symbolName, "${_RedLabel_2}", "click", function(sym, e) {
	resetSectionAminations();
	// Reset video
	sym.getSymbol("VideoSection").$("vContainer").html('');
	sym.playReverse();
});//Edge binding end

// INTRO COVER ----------
Symbol.bindElementAction(compId, symbolName, "${_IntroCover}", "click", function(sym, e) {
	sym.play();
	$(sym.lookupSelector("IntroGraphic")).show();
});//Edge binding end
The Main Menu
As I have noted, the application consists of four nested subsection symbols and their individual timeline animations. Each section is represented by a ticket button in the menu, which is located on the bottom left.
Info can be seen
line 3 In the layout1024 symbol creationComplete event handler, I create several helper functions that will assist with repetitive tasks involved in updating the info sidebar, menu, and subsections.

lines 30-36 The updateMenuButtons function resets all four menu ticket button symbol timeline animations back to the beginning with the playReverse() API method. The API method play() is then called on the clicked button to display its selected state.

lines 6-19 The resetSectionAminations function returns the timeline animations of the subsection symbols back to the beginning and hides them with the jQuery hide() method.

lines 22-27 The updatePanelText function takes four parameter values, uses jQuery to select the information textfield elements, hide them, update their html with the new values and then fade them back in.
//Edge symbol: 'layout1024'
(function(symbolName) {
	Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
    	
        // Reset Section Animations
        resetSectionAminations = function (){
            // A
            sym.getSymbol("MappingSection").stop(0);
            $(sym.lookupSelector("MappingSection")).hide();
            // B
            sym.getSymbol("LevelingSection").stop(0);
            $(sym.lookupSelector("LevelingSection")).hide();
            // C
            sym.getSymbol("VideoSection").stop(0);
            $(sym.lookupSelector("VideoSection")).hide();
            // D
            sym.getSymbol("StonehengeSection").stop(0);
            $(sym.lookupSelector("StonehengeSection")).hide();
        };
                                
        // 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);
         };
                                
         // Menu
         updateMenuButtons = function (n){
            sym.getSymbol("TicketA").playReverse(0);
            sym.getSymbol("TicketB").playReverse(0);
            sym.getSymbol("TicketC").playReverse(0);
            sym.getSymbol("TicketD").playReverse(0);
            sym.getSymbol(n).play();
         };
Again using the bindElementAction API method, I place code in the callback function of the click events bound to the menu buttons. I've included code from one of these buttons, TicketA, below as an example. Here's a detailed explanation of what happens when this menu button detects a click event on itself...

lines 5-8 Four local variables are declared and assigned a value. This is the data that will be used to update the info side panel.
line 9 The updatePanelText function is called, and the four local variables are passed in as parameters. Each of these string variables are associated with a corresponding textfield element. jQuery selectors target these textfields, hides them, updates them with the new values and then fades them back in.
line 12 The updateMenuButtons function is called, resetting all four menu ticket button symbol timelines to the unselected state. The clicked button then displays its selected state .
line 15 The resetSectionAminations function is called, resetting all subsection symbol timeline animations, and hiding them with the jQuery hide() method. We also make sure the IntroGraphic is not visible.
lines 19-20 The corresponding subsection symbol of the clicked menu button is made active and visible with the jQuery show() method. The subsection animation is then called to play, displaying its initial state.
lines 23The video section symbol is targeted and its child video element has its HTML reset to empty. This prevents the video's audio stream from continuing to play when leaving the video subsection.
// TICKET A ----------
Symbol.bindElementAction(compId, symbolName, "${_TicketA}", "click", function(sym, e) {
	
    // jQuery Text Updates
    var namer = "INVENTORS";
    var photog = "Julie Pasquell, DAS, FRS";
    var para = "Evolutionists believe that ancient man was intellectually...";
    var cata = "Human / History /";
    updatePanelText (namer,photog,para,cata);
    
    // Menu
    updateMenuButtons ("TicketA"); 
    
    // Reset Section Animations
    resetSectionAminations();
    $(sym.lookupSelector("IntroGraphic")).hide();
    
    // Play Animation
    $(sym.lookupSelector("MappingSection")).show();
    sym.getSymbol("MappingSection").play();
    
    // Reset video
    sym.getSymbol("VideoSection").$("vContainer").html('');
});//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