Les variables dans une animation

Pour pouvoir ajouter des variables dans une animation Edge Animate, vous devez préalablement les déclarer à l’aide du mot clé var.

À la lecture de cette affirmation, la gestion des variables semble simple dans une animation Edge Animate, mais dans la pratique, si vous ne connaissez pas ce qui va suivre, vous ne pourrez pas utiliser une variable globale.

Portée d’une variable

Comme vous le savez, si vous déclarez une variable dans une fonction, sa portée se limite à la fonction. Partant de ce postulat, il est important une vous déclariez vos variables à l’extérieur de toutes vos fonctions, pour ce faire, vous devez afficher la fenêtre code (Cmd-E ou Ctrl-E sous Windows), puis cliquer sur Stage. Vous pouvez à présent la déclarer dans la fenêtre de code (dans la fonction de la scène) et faire référence à cette variable depuis n’importe quel script de votre animation.

 

Variable associée à un élément

Lorsque vous aurez besoin d’affecter une variable à un élément, il faudra que vous trouviez un « emplacement » pour stocker cette information, pour ce faire, vous pouvez utiliser la méthode attr() comme dans l’exemple ci-dessous.

sym.$("c1").attr({numero:"3"});

Ensuite, pour pouvoir lire la valeur « associée » à un élément, vous devrez faire appel à cette syntaxe.

sym.$("c1").attr("numero");

Dans cet exemple, ci-dessus, vous pouvez bien sûr remplacer le mot numero par celui de votre choix, il s’agissait bien sûr d’un exemple. Celui-ci ne doit contenir, ni caractères accentués, ni caractères spéciaux, ni même d’espace.
Dans le cas d’une lecture de cette valeur dans un script plus dynamique, vous devrez utiliser la syntaxe ci-dessous :

sym.$(".cellule").click(touchee);
function touchee () {
  sym.$("affiche").text(sym.$(this).attr("numero"));
}

C’est grâce à la recherche $(this) que nous pouvons cibler l’élément cliqué.
Remarque : L’utilisation de la méthode attr() revient à affecter/ajouter une propriété à une instance.