Edge AnimateCode JQuery
Exemple de code JQuery
Tous les codes proposés ci-dessous sont à insérrer dans la fonction (symbolName) visible à partir de l'affichage "Code complet" de la fenêtre code (Ctrl + E) :
La plupart des codes proposés ici sont à tester avec un évènement de type "mousedown"
Après avoir créé un bouton "btn" et un rectangle sur la scène, créer un évènement mousedown. Pour créer un évènement mousedown, dans la fenêtre de l'éditeur de code (Ctrl+E), cliquez sur le menu Stage / Eléments / btn / mousedown
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol;
//Edge symbol: 'stage'
(function(symbolName) {
//Début d'un évènement mousedown sur le symbole "btn"
Symbol.bindElementAction(compId, symbolName, "${_btn}", "mousedown", function(sym, e) {
//le code à coller ici
});
//Fin évènement mousedown
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-110465113");
var Composition = Edge.Composition, Symbol = Edge.Symbol;
//Edge symbol: 'stage'
(function(symbolName) {
//Début d'un évènement mousedown sur le symbole "btn"
Symbol.bindElementAction(compId, symbolName, "${_btn}", "mousedown", function(sym, e) {
//le code à coller ici
});
//Fin évènement mousedown
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-110465113");
Effets sur symbole
Masque le symbole s1 ($ pour instance de symbole)sym.$("s1").hide();
Masque le symbole s2 qui ce trouve dans le symbole s1
sym.$("s1").$("s2").hide();
Affiche le symbole monsymbole
sym.$("monsymbole").show();
Réalise un fondu enchainé sur monsymbole
sym.$("monsymbole").fadeToggle();
Lecture du symbole monsymbole qui est sur la scène
sym.$("monsymbole").play();
Lecture du symbole monsymbole qui est dans le symbole0
sym.$(symbole0").$("monsymbole").play();
Effets de texte
Fait apparaitre un texte à la place du symbole s1sym.$("s1").html("hello");
Pour récupérer le texte d'une zone de texte
var monelement = sym.$("mazonetexte").text();
alert(monelement);
alert(monelement);
Pour ecrire dans une zone de texte
sym.$("texte1").text("hello");
Autre effets
Code pour un lien hypertexte
window.open("http://www.google.fr", "_self");
Afficher une boîte de dialogue
alert('Coucou');
Afficher les coordonnées x d'un symbole dans une boite de dialogue
var positionleft = sym.$('s1').offset();
alert(positionleft.left);
alert(positionleft.left);
Afficher la position (top et left) d'un symbole dans 2 zone de texte
var positionleft = sym.$('balle').offset();
sym.$("t1").text(positionleft.left);
var positiontop = sym.$('rond').offset();
sym.$("t2").text(positiontop.top);
sym.$("t1").text(positionleft.left);
var positiontop = sym.$('rond').offset();
sym.$("t2").text(positiontop.top);
La fonction offset() récupére les valeurs de l'offset (left et top) du premier élément trouvé en position relative dans le document.
Effet de basculement (toggle = basculer)
sym.$('btn1').toggle({effect: "scale", direction: "horizontal"});
sym.$('btn1').toggle({effect: "scale", percent: 50});
sym.$('btn1').toggle({effect: "scale", percent: 50});
Exemple d'action sur symbole via CSS (nouvelle coordonnés)
sym.$('rond').css({"position":"absolute", "top":0, "left":200});
Changer la transparence et redimentionner un symbole :opacitiy est ok mais pas scaleX pour chrome (donc on doit rajouter -webkit- pour Chrome)
sym.$('rond').css({"opacity" : 0.5, "-webkit-transform" : "scaleX(2)"});
Effet de scène
Agrandi la scène et le bouton quelle contient
var titi = sym.$('Stage').parent();
titi.css('-webkit-transform', 'scale(2,2)');
titi.css('-webkit-transform', 'scale(2,2)');
Transformation des origines
sym.$("Stage").css({"-webkit-transform-origin":"0 0"});
Echelle sur le contenu
sym.$('Stage').parent().height(sym.$('Stage').height() * (Math.round(sym.$('Stage').parent().width() * 1) / sym.$('Stage').width()));
Agrandissement de la scène
sym.$("Stage").css('-webkit-transform', 'scale(2,2)');
Affichage des infos dans 2 zones de texte
sym.$("txt").text('Largeur de la fenêtre : '+ $(window).width()+ 'px');
sym.$("txt2").text('Largeur de la scène : '+ $(Stage).width()+ 'px');
sym.$("txt2").text('Largeur de la scène : '+ $(Stage).width()+ 'px');
