Edge AnimateBiblio JQuery
Exemple d'utilisation d'une bibliothèque JQuery
Cet exemple qui permet de déplacer un symbole à la souris (un cliquer / Glisser ou Drag and Drop) nécessite la bibliothèque JQuery 'jquery-ui.custom.min.js' qui doit être téléchargée à la racine de votre projet Edge Animate.
Pour cet exemple, sur la scène dessinez un carré avec un rond à l'interieure.
Dans la fenêtre code, cliquez sur le menu Stage / Evènement / compositionReady et coller le code surligné ci-dessous :
Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
// Chargement de la bibliothèque JQuery
yepnope(
{
nope:[
'jquery-ui.custom.min.js'
],
complete: init
});
function init(){
// applique la bibliothèque JQuery UI draggable au symbol rond qui est dans le carré
sym.getSymbol('carre').$('rond').draggable({
// ici, les contraintes éventuelles...
start: function(e){},
drag: function(e,ui){
}
});
}
// Chargement de la bibliothèque JQuery
yepnope(
{
nope:[
'jquery-ui.custom.min.js'
],
complete: init
});
function init(){
// applique la bibliothèque JQuery UI draggable au symbol rond qui est dans le carré
sym.getSymbol('carre').$('rond').draggable({
// ici, les contraintes éventuelles...
start: function(e){},
drag: function(e,ui){
}
});
}
Faîtes Ctrl + Entrée pour visualiser le résultat dans votre navigateur. Votre rond doit être déplacable à la souris
Contraintes
On pourra rajouter des contraintes dans la fonction init.Pour cela dessinez un carré et mettez le rond dans le carré. Attention de ne pas supprimer la virgule !
Contrainte de mouvement en x
axis: "x",
Changement d'état du curseur
cursor: "crosshair",
Opacité
opacity: 0.35 ,
Contrainte de déplacement via scène (si pas d'autre symbole)
containment: "parent" ,
Contrainte via coordonnées[ x1, y1, x2, y2 ]
containment: [50, 0, 100, 0],
