Cibler un élément

Une des premières difficultés que vous rencontrerez lorsque vous devrez ajouter de l’interactivité à une animation, c’est de cibler un élément sur la scène. En effet, comment allez-vous faire référence à un élément, à plusieurs d’un même « type », plusieurs contenus dans un autre, etc…

Commençons d’abord par voir à travers un exemple, la méthode qui va nous permettre de cibler un élément précis, puis nous découvrirons dans un deuxième temps, différentes syntaxes.

Sur la copie d’écran ci-dessous, nous avons deux éléments sur la scène :

Edge Animate Cibler un élément

Celui du haut représente l’élément que nous voulons masquer au clic sur celui du dessous (en forme de pilule). L’élément du haut constitue notre cible, nous avons donc besoin de bien l’identifier, pour ce faire, nous lui avons donné un nom via la palette Propriétés (maForme).

À présent, nous allons pouvoir placer une action sur l’élément du bas.

Nous le sélectionnons (par un simple clic à l’aide de la flèche noire).
Nous cliquons sur le bouton des Actions.
Nous optons pour l’évènement click puis nous saisissons notre code dans la fenêtre qui s’ouvre.
```
sym.$("maForme").hide();
```
À la lecture de cette ligne de code, il est tout à fait normal que vous ne compreniez pas complètement, voire pas du tout ce qui est saisi, essayons donc de comprendre sa structure.

Lorsqu’une ligne commence par le mot sym, c’est pour indiquer un chemin, notamment celui qui fait référence à la scène sur laquelle nous nous trouvons lorsque nous sommes dans un document Edge Animate ou dans un symbole.

Si une ligne d’instruction contenant ce mot sym se trouve dans un script sur la scène principale d’une animation Edge, il est alors fait référence à la scène que vous avez sous les yeux lorsque vous êtes dans un document Edge Animate. Si vous êtes dans un symbole, sym fait alors référence aux éléments contenus dans CE symbole.

La signe du dollar accompagné d’une paire de parenthèses, $(), permet d’effectuer « une recherche » au niveau du chemin préalablement spécifié. Il est important de garder à l’esprit qu’Edge Animate génère une structure HTML, c’est à dire un ensemble comprenant des sous-ensembles qui contiennent à leur tour des sous-ensembles, etc. De ce fait, pour faire référence à un élément, on effectue une requête pour le « sélectionner » à l’aide de la méthode jQuery $().

Exemples à télécharger : Animation d’exemple N°1 – Animation d’exemple N°2

Ci-dessous, nous vous proposons des exemples de lignes de code dans un script de type compositionReady, elles peuvent bien sûr être saisies dans d’autres types de scripts.

Cibler un élément

sym.$("bt2").click(clic2);

function clic2() {
   sym.$("lumiere2").css({opacity:0.2});
}

Cibler une classe

sym.$(".boutonBleu").click(clic3);

function clic3() {
   sym.$("lumiere3").css({opacity:0.5});
}

Autre exemple

sym.$(".boutonBleu").mouseover(survol);
sym.$(".boutonBleu").mouseout(sortieSurvol);

function survol() {
   sym.$("lumiere3").css({opacity:1});
}
function sortieSurvol() {
   sym.$("lumiere3").css({opacity:0.2});
}

Rappelons que pour donner un nom de classe à un ou plusieurs éléments, vous devez le(s) sélectionner puis lui/leur définir un nom de classe via le bouton [c] situé à droite du nom de l’élément dans la palette Propriétés.

Cibler un élément cliqué

sym.$(".boutonVert").click(clicVert);
function clicVert() {
   sym.$(".boutonVert").css({backgroundColor:"green"});
   sym.$(this).css({backgroundColor:"red"});
}

Le mot clé this permet de faire référence à l’élément qui appelle la fonction.

Appliquer un attribut à un élément et le cibler

sym.$("bt9").attr({id:"boutonViolet"});
sym.$("#boutonViolet").animate({top:150},10000);

Cibler les enfants d’un élément

sym.$("plateau").children().css({opacity:0.2})

Cibler les enfants qui précèdent un élément cliqué

sym.$(e.currentTarget).prevAll().css({backgroundColor:"blueviolet"});

Cibler les enfants qui suivent un élément cliqué

sym.$(e.currentTarget).nextAll().css({backgroundColor:"blueviolet"});

La fenêtre de code

Lorsque vous commencerez à avoir beaucoup de scripts éparpillés dans une animation, sur les différents éléments, dans des déclencheurs, etc. il deviendra alors très utile que vous puissiez consulter l’ensemble de vos lignes de code dans une même fenêtre. Pour ce faire, effectuez le raccourci Cmd-E (ou CTRL-E sous Windows), vous obtiendrez une fenêtre dans laquelle vous pourrez sélectionner dans la marge gauche, l’ensemble des scripts que vous aurez saisi un peu partout dans votre animation.

Important : vous aurez parfois besoin de fermer cette fenêtre pour pouvoir ajouter des scripts avec les méthodes que nous avons vues au dans cette page.