Wednesday, March 27, 2013

Adobe Edge Animate


Stage properties: Title, Composition ID (useful to refer to it using code from outside javascript). eg.: AdobeEdge.getComposition("EDGE-9496421")

Elements and Library panel. 
Elements: HTML elements in the symbol. mainly using jQuery $(...). eg.: sym.getSymbol("rect1").$("RoundRect")
Library: shows the symbols. DO NOT confuse the symbol ID with instance ID below. similar concept with Flash. but strangely the API uses getSymbol() instead of getInstance()

Instance properties: ID. useful for referring to instances in javascript. eg.: sym.getSymbol("rect1")...

Timeline: can add Label like Frame label in flash. for use in javascript: eg.: sym.play("over")

sample code: 

var count = 0; // my own variable
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
   
      Symbol.bindElementAction(compId, symbolName, "${_rect1}", "mouseenter", function(sym, e) {
         // insert code to be run when the mouse enters an element
         sym.getSymbol("rect1").play();
      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect1}", "mouseleave", function(sym, e) {
         // insert code to be run when the mouse leaves an element
         sym.getSymbol("rect1").playReverse();
      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect1}", "click", function(sym, e) {
         // insert code for mouse click here
         //console.log(sym);
         e.preventDefault();

         // using jquery text() function
         sym.getSymbol("text1").$("Text").text("button clicked: " + (count++));

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'


})(jQuery, AdobeEdge, "EDGE-9496421");

// my own code
var id = setTimeout(myfn, 1000);
function myfn(){
//console.log("time out");
// run some code in Edge
var comp = AdobeEdge.getComposition("EDGE-9496421");
//console.log("EDGE composition: " + comp);
console.log("stage: " + comp.getStage());

var mytext = comp.getStage().getSymbol("text1").$("Text");

 // using jquery offset() function
var x = mytext.offset().left + 1;
//console.log(x);
mytext.offset({left: x});

id = setTimeout(myfn, 1000);
}

No comments: