LE CIBLAGE DES CLIPS

Lorsqu'on réalise des animations sous flash plus ou moins complexes, un clip peut très vite avoir de nombreuses ramifications. Il devient dès lors fondamental de bien comprendre le ciblage des clips. Flash propose à cet égard les 4 fonctions suivantes :



A la racine de votre anim, this sera égal à _root. Pour redescendre dans l'arborescence et cibler les cibles enfants, il est possible d'utiliser 2 notations différentes : le point ou les crochets. Il est ainsi possible d'écrire :


Cette dernière écriture est particulièrement utile pour cibler un grand nombre de clips. En effet il est très pratique de créer une boucle et de pouvoir écrire clipparent["clipenfant"+i] pour cibler n clips : i désignant le nom de la variable incrémentée dans la boucle.
Lorsque vous mettez un écouteur (onPress, onEnterFrame,.....) sur un clip, this cible le clip écouté dans le code lié à l'écouteur.
Prenons l'exemple de 5 clips imbriqués respectivement nommés clip1, clip2, ..., clip5. La structure de l'arborescence est la suivante :
_root > clip1 > clip2 > clip2 > clip3 > clip4 > clip5

Imaginons que vous souhaitiez rendre transparent le clip2 en pressant sur le clip5; il faut dans un premier temps cibler le clip5 et lui mettre un écouteur. Pour cela nous allons redescendre l'arborescence à partir du scénario principal jusqu'au clip5:
this.cible1.cible2.cible3.cible4.cible5.onPress=function(){
}

Dans le code lié à l'écouteur this cible à présent cible5. A partir de là il va falloir cibler le clip2. Pour cela il est possible d'écrire :



De prime abord la première écriture paraît bien plus simple. Cependant, je recommande fortement d'utiliser plusieurs fois la commande _parent (solution n°3). En effet imaginons que vous chargiez dans votre animation un fichier swf où les clips sont ciblés avec un _root. Le clip chargé devient un élément de l'arborescence de votre animation ; du coup puisque _root cible la racine de l'arborescence, _root va cibler la racine de l'animation principale et non plus celle du clip chargé. Flash sera donc incapable de cibler les clips désirés, et votre animation ne fonctionnera plus.
Nous obtenons donc au final le code suivant
this.cible1.cible2.cible3.cible4.cible5.onPress=function(){
this._parent._parent._parent._alpha=0;
}


Il est parfois nécessaire de passer le nom du clip en paramètre dans un objet lorsque la fonction ne permet pas d'ajouter des variables à faire passer en paramètre (par ex. onLoad). Prenons l'exemple d'un objet de type xml appelé monxml dans lequel on souhaite cibler un clip nommé monclip lors du chargement. Il est possible de créer un paramètre appelé par exemple cible et d'y stocker votre clip
monxml.cible=monclip
Ensuite dans la fonction onLoad, en appelant this.cible il est possible de cibler monclip.



DUPLICATION DE CLIPS

Il est très pratique de pouvoir dupliquer un clip autant de fois qu'on le souhaite. Cela permet en outre de rendre vos animations plus dynamiques (dans le sens paramétrable), mais surtout de gagner du temps et en lisibilité.

A cet effet, Flash propose la fonction duplicateMovieClip.Cette dernière permet l'utilisation des 2 notations ci-dessous :
- duplicateMovieClip(clip,nom,niveau)
- clip.duplicateMovieClip(nom,niveau,paramètres)



Profitons-en pour aborder la notion de profondeur. Comme pour les pages d'un livre, chaque occurrence de clip créée, importée, ou dupliquée, nécessite une profondeur z distincte pour indiquer à flash dans quel ordre il faut empiler les clips. Je précise bien qu'il ne peut y avoir qu'un seul clip à une profondeur z définie. Si dans un même clip parent vous affectez la même profondeur à 2 clips, le 2° clip écrasera automatiquement le premier.

Comme il est sous entendu dans l'exemple précédent, la profondeur est relative au clip parent. Prenons l'exemple de 3 clips nommés, clip1, clip2 et clip3 imbriqué les uns dans les autres. Tous les clips créés dans clip3 seront situés en dessous de clip2 (quelque soit la profondeur donnée). La profondeur indiquera comment les clips sont empilés dans clip3.
Cette valeur peut être définie manuellement, mais flash propose la fonction getNextHighestDepth qui, comme son nom l'indique, permet de donner au clip la prochaine profondeur disponible. La notation est la suivante :
clip.getNextHighestDepth : clip correspondant au nom du clip parent
Cette fonction permet d'éviter d'écraser des clips en affectant par erreur la même profondeur.
Par ailleurs il existe la fonction swapDepths qui permet de permuter les profondeurs de 2 clips.

Revenons à la fonction duplicateMovieClip. Je recommande l'utilisation de la 2° notation qui nécessite moins de lignes de code. Si par exemple vous souhaitez dupliquer un clip « boule » (situé à la racine du projet) et donner à sa copie (nommée boule1) un facteur d'échelle de 50%, et un positionnement en (100,100) vous obtiendrez :

Notation1:
duplicateMovieClip(this.boule,"boule"+1,this.getNextHighestDepth());
this["boule"+1]._x=100;
this["boule"+1]._y=100;
this["boule"+1]._xscale=50;
this["boule"+1]._yscale=50;


Notation 2:
this.boule.duplicateMovieClip("boule"+1,this.getNextHighestDepth(),{_xscale :50,_yscale :50,_x :100,_y :100});



ECOUTEURS

Pour rendre vos animations interactives, flash propose des écouteurs d'évènements. Ces derniers sont des objets qui contrôlent en permanence les actions de l'utilisateur (souris et clavier) sur un clip donné. Ils permettent de définir les actions à exécuter lorsque l'écouteur détecte l'évènement écouté. Les principaux écouteurs d'évènement disponibles sont:



Comme il est sous entendu dans le paragraphe précédant, la définition d'un écouteur nécessite les 2 éléments suivants :
- le nom de l'occurrence du clip sur laquelle vous souhaitez affecter un écouteur (pour les exemples à venir nous utiliserons une occurrence de clip appelée monclip)
- le type d'écouteur d'évènement

Par exemple, si vous souhaitez définir un écouteur qui modifie la transparence d'un clip de moitié lorsqu'on clique sur ce dernier, la syntaxe à utiliser est :

monclip.onPress=function(){
this._alpha*=0.5;
}

Nota :
Comme nous l'avons vu dans le tutorial sur le ciblage des clips, entre les accolades, this cible le clip écouté à savoir monclip.

RollOver, RollOut

Nous allons maintenant aborder un aspect très utile pour vos futures animations flash. En effet, les écouteurs onRollOver et onRollOut sont souvent appelés pour respectivement lancer une animation, et revenir à l'état initial le tout de façon symétrique.
Plutôt que de créer 2 animations pour les 2 écouteurs, nous allons lire l'animation dans le sens chronologique et anti-chronologique. Pour cela nous utiliserons en boucle les fonctions prevFrame() et nextFrame() qui permettent respectivement de reculer et d'avancer d'une frame dans le timeline (barre de temps). Cette boucle prend bien évidemment des ressources processeur ; nous penserons donc à la détruire lorsque nous atteindrons la fin de l'animation (pour le RollOver) et le début de l'animation (pour le RollOut). La fin de l'animation sera atteinte lorsque la frame courante (obtenue avec la fonction _currentframe) sera égale au nombre total de frames (obtenu avec la fonction _totalframes). Bien évidemment le début de l'animation correspond à la frame 1.

Après ces explications sur les démarches à effectuer, nous pouvons passer à la partie code proprement dite. Nous obtenons le code suivant :

monclip.onRollOver=function(){
this.onEnterFrame=function(){
this.nextFrame();
if (this._currentframe==this._totalframes){
delete this.onEnterFrame;
}
}
}

monclip.onRollOut=function(){
this.onEnterFrame=function(){
this.prevFrame();
if (this._currentframe==1){
delete this.onEnterFrame;
}
}
}


OnPress, onRelease, onReleaseOutside

Pour illustrer ces 3 écouteurs nous allons prendre pour exemple une barre de défilement. Par rapport à l'exemple précédent nous ajouterons une zone de texte dynamique avant pour nom de variable montexte. En maintenant le bouton de la souris appuyé sur le clip (évènement onPress), nous allons permettre le déplacement du clip sur une plage limitée en abscisse et en ordonnée. Pour cela nous utiliserons la fonction startDrag(). Cette dernière prend pour paramètres les valeurs minium et maximum que vous souhaitez donner à l'abscisse et à l'ordonnée du clip. Pour notre exemple nous fixerons les ordonnées entre 100 et 200. Ensuite nous définirons en boucle la valeur de scroll à apporter au texte (fonction scroll()) en fonction de la position de la barre. Cette valeur sera calculée par le biais d'une régression linéaire (la valeur maximale de scroll étant donnée par la fonction maxscroll). Dans le cas d'une barre de défilement verticale nous obtenons :
scroll=(maxscroll-1)/(ymax-ymin)*(y-ymax)+maxscroll

Nota :
Comme précédemment, this cible entre les accolades le clip monclip. Pour récupérer la valeur de scroll maximale de la variable montexte et lui affecter la valeur de scroll calculée, il faut remonter au clip parent.

monclip.onPress=function(){
this.startDrag(true,this._x,100,this._x,200);
this.onEnterFrame=function(){
this._parent.montexte.scroll=Math.round(( this._parent.montexte.maxscroll-1)/ (200-100)*(this._y-200)+ this._parent.montexte.maxscroll);
}
}


Les écouteurs onRelease et onReleaseOutside sont souvent utilisés ensemble. Pour notre exemple ils permettront de stopper le déplacement du clip (fonction stopDrag()) lorsque l'utilisateur relâche le bouton de la souris et ce, quelle que soit la position du curseur de la souris (dans ou en dehors du clip). Ils permettront également de libérer de la charge processeur en supprimant la boucle pour le calcul du scroll.

monclip.onRelease=monclip.onReleaseOutside=function(){
this.stopDrag();
delete this.onEnterFrame;
}


onKeydown onKeyUp

Pour illustrer ces 2 écouteurs, nous prendrons pour exemple un petit shoot'em up. Nous déplacerons un vaisseau intergalactique avec les touches haut, bas, gauche, droit, et nous lancerons des projectiles avec la touche espace.
Nous allons dans un premier temps créer un objet nommé ecouteurclavier et lui affecter un écouteur clavier avec la commande Key.addListener. Cet objet surveillera en permanence toutes les actions clavier de l'utilisateur.
var ecouteurclavier:Object = new Object();
Key.addListener(ecouteurclavier);

A partir de là nous pouvons utiliser les fonctions onKeyUp et onKeyDown pour respectivement déplacer et stopper le vaisseau lorsqu'une touche est appuyée ou relâchée. Ces fonctions seront affectées à l'écouteur ecouteurclavier.

Pour l'écouteur onKeyDown, chacune des touches précédemment citées aura des actions bien distinctes : il nous faut donc identifier quelle touche est appuyée. Pour cela nous utiliserons la fonction Key.getCode() qui renvoie le code décimal d'une touche. Pour ne pas avoir à retenir tous ces codes par coeur, les touches principales disposent d'une variable à leur nom ayant pour valeur le code décimal de la touche.
touche haut : key.UP
touche bas : key.DOWN
touche gauche : key.LEFT
touche droite : key.RIGHT
touche espace : key.SPACE

var ecouteurclavier:Object = new Object();
var compteur:Number=0;
ecouteurclavier.cible=this;
ecouteurclavier.onKeyDown = function() {
switch (Key.getCode()) {
case Key.UP :
this.cible.vaisseau.onEnterFrame=function(){
this._y-=4;
if (this._y -this._height){
this._y=Stage.height;
}
}
break;
case Key.DOWN :
this.cible.vaisseau.onEnterFrame=function(){
this._y+=4;
if (this._y>Stage.height){
this._y=0;
}
}
break;
case Key.RIGHT :
this.cible.vaisseau.onEnterFrame=function(){
this._x+=4;
if (this._x>Stage.width+this._width){
this._x=0;
}
}
break;
case Key.LEFT :
this.cible.vaisseau.onEnterFrame=function(){
this._x-=4;
if (this._x 0-this._width){
this._x=Stage.width;
}
}
break;
case Key.SPACE :
this.cible.attachMovie("tir","tir"+compteur,this.cible.getNextHighestDepth() ,{_x:this.cible.vaisseau._x+ this.cible.vaisseau._width,_y:this.cible.vaisseau._y+ this.cible.vaisseau._height/2});
this.cible["tir"+compteur].onEnterFrame=function(){
this._x+=8;
if (this._x>Stage.width){
delete this.onEnterFrame;
this.removeMovieClip();
}
}
compteur++;
break;
}
}

ecouteurclavier.onKeyUp = function() {
delete vaisseau.onEnterFrame;
}

Key.addListener(ecouteurclavier);



egypte
charlie
safari
ladies
geddes
paris_hilton
final_fantasy
a3_project
spellforce
killzone
hentai
guildwars
demoniaque
pink
gungrave
gun
techno
tekken
knight
magna_carta
nature
dragonshard
carnage
autumn
squelette
tenshi
warhammer
blonde
summerattitude
atfirstsight
albator
genomette
soucoupe
futur
sportmeca
eau
lady
banniere
u2
noel
neverwinter
pop3
winamp
neti
mp3player
fireworks
jet
snow
stars
rebond
webcounter
mp3player
bouton