NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Flash Mx » [Actions Script] La P.O.O. pour les débutants

[Actions Script] La P.O.O. pour les débutants


Voici pour les débutants, de quoi démontrer que la Programmation Orienté Objet, ce n'est pas sorcier. Bien que depuis Action Script 2.0 ait introduit le typage fort et que Macromedia est devenu une filiale d'Adobe, ce tuto est encore d'actualité pour commencer à appréhender la POO avec Action Script.



Ce tutoriel est assez basique mais il est néanmoins nécessaire afin de mieux comprendre l'Action Script ainsi que la programmation orientée objet

Vous êtes tout content, vous venez d'avoir flash , vous avez commencé à tripoter le logiciel, vous savez créer de clips à l'intérieur d'autre clips, vous vous sentez prêts à pouvoir faire des animations comme celles que vous voyez sur internet mais voilà, vous ne savez pas comment agir sur ces clips, en fait vous vous rendez compte qu'en dehors de gotoAndPlay, play et stop la programmation sous flash est un vrai charabia. Pire, vous ne savez même pas ou placer ce morceau de code que vous avez trouvé en cherchant sur Google.
Bon, je vais directement au but : vous êtes foutus !

Allez, remettez-vous, ne quittez pas tout de suite ce tuto, je vais essayer de vous aider

Commençons par un exemple simple :
Vous avez un petit dessin animé à base d'interpolations de mouvement, de forme etc...
Vous voulez que l'utilisateur puisse stopper l'animation en cliquant sur un bouton, comment faire ?
" Facile " me répondez vous, " j'ouvre le panneau ActionScript et je met ce code : "

on (release) {
   stop();
}


bravo, ça marche

Bon, imaginons maintenant que cette animation contienne un clip dans lequel se trouve une autre animation. Avec le code précédent le résultat fait penser à Matrix : plus rien ne bouge sauf l'élément qui est situé dans le clip
Le problème c'est que vous ne voulez pas que ce clip continue se jouer !
Là encore, vous me répondez : " facile !" et en moins de deux, vous ouvres le panneau propriété, vous tapez " monclip " dans le champ du nom de l'occurrence et vous remplacez ensuite le code de votre bouton par le suivant :

on (release) {
   stop();
   tellTarget ( "_root.monclip" ) {
      stop();
   }
}


Là encore, bravo, ça marche au poil

Hum... Alors pourquoi, si cette technique était si géniale ce serait marqué " Flash Player 3. Déconseillé dans Flash 5 " à " tellTarget " dans le dictionnaire Action Script ?

Eh bien c'est à cause de la Programmation Orientée Objet, la fameuse POO !

En fait, vous avez déjà fait de la POO sans le savoir.
" Mais où ? "
Eh bien en cherchant au plus proche : dans le dernier code. Regardons-le de plus près
Ce qu'il y a de bien avec tellTarget, setProperty & Co, c'est que l'on comprend ce que l'on fait rien qu'en lisant le nom de ces commandes

on (release) {
}


Ceci veut évidemment dire quand on relâche la souris(sous-entendu sur le bouton qui est dans le scénario principal)

stop();


là encore le sens est évident : on arrête la lecture (sous-entendu du scénario dans lequel se situe le bouton)

tellTarget ( "_root.monclip" ) {
   stop();
}


Cette fois-ci on dit à monclip qui est dans _root de s'arrêter

En quoi cette programmation est-elle orientée objet ?
Tous simplement parce que l'on applique des action à des objets :
" le bouton " " scénario dans lequel se situe le bouton " " monclip qui est dans _root "

" bah alors si c'est déjà de la poo, pourquoi il était pas bon mon code ?! "

Eh bien simplement parce que si l'on regarde bien, sur trois objets, deux sont sous-entendus.
tellTarget nous permet de donner explicitement le chemin pour arriver à l'objet sur lequel on souhaite agir. Cette possibilité que nous offre tellTarget offre beaucoup de clarté au code, on a alors l'impression d'avoir entre les mains une commande diablement efficace.

L'idée est donc d'indiquer explicitement chaque objet sur lequel on agit. Le moyen transparaît déjà dans le code précédent avec tellTarget
Il s'agit de la syntaxe à points, ici : _root.monclip que l'on a traduit par " monclip qui est dans _root "

Chaque objet dispose d'une référence qui est en quelque sorte " l'adresse " de cet objet.
Pour atteindre cette adresse (et donc l'objet) il faut emprunter un chemin.
Dans la vie quotidienne pour indiquer un chemin on s'exprime de la sorte :
" A partir de là ou l'on est, revenez en arrière, tournez à gauche jusqu'au rond-point où vous prendrez à droite, puis après le supermarché tournez à la troisième à gauche "
Eh bien la syntaxe à points, c'est la même chose. La similitude va même jusqu'au fait que nous pouvons utiliser différents chemins, faire des détours etc.

Imaginons une succession de clips imbriqués :
Créez quatre clips : " triangle ", " rond ", " carre "(oui, il faut éviter les accents) et " losange "
Placez " carre " dans " rond " et " losange " et " rond " dans " triangle "

Si on transformait ça en arborescence on obtiendrait ça :



Maintenant allez dans le clip " losange " et ouvrez le panneau actions
Le but est de constater que l'on peut cibler tous les clips à partir d'autres clips
A partir d'ici : nous allons essayer de cibler le clip " carré "
Etudions la situation :
Le scénario principal (_root) contient " triangle "
" triangle " contient " losange " et " rond "
" rond " contient " carré "

Comme je l'ai dit, nous pouvons prendre plusieurs chemins
tout d'abord, il y a le ciblage absolu: on part du scénario principal et on parcourt tous les clips vers le clip à cibler
ici pour cible le carré on commencerait par cibler la racine de l'animation : _root puis le triangle, ensuite le rond et enfin le carré
avec la syntaxe à point on aurait alors :

_root.triangle.rond.carré


Facile non ?

Il y a cependant un petit probleme : vous voulez mettre le clip " triangle " dans un autre clip et vous tenez à mettre le code dans le clip " losange ".
tout le ciblage précédent devient faux
l'usage de _root n'est donc pas vraiment conseillé.En effet, un swf codé avec _root peut fonctionner à la perfection mais dès qu'il sera loadé dans un autre swf ce sera le chaos total

Il est donc conseillé d'utiliser un autre type de ciblage : le ciblage relatif
En partant de losange, le chemin à parcourir devient :
Le clip contenant losange (triangle) puis " rond " puis " carre "
Le code devient alors :

this._parent.rond.carre


this.indique que l'on part du clip en cours, celui dont la timeline contient le code, ici " losange "
_parent sert à cibler le clip parent d'un clip
si l'on avait voulu cibler " losange " à partir de " carre " le code aurait été:

this._parent._parent.losange


C'est bien beau de construire un chemin vers un objet mais en pratique, comment on fait pour agir sur cet objet puisque c'est là notre finalité ?
Petite question : qu'est-ce que " agir sur un objet ", en l'occurrence sur un clip ?
Cela consiste finalement à e modifier ses propriétés (_x, _xscale, _alpha), lui appliquer une méthode(play, stop) ou un gestionnaire d'évènements ( on press)
Reprenons notre code de départ :

on (release) {
   stop();
   tellTarget ( "_root.monclip" ) {
      stop();
   }
}


On va essayer de cibler chaque objet (on ne va pas qu'essayer d'ailleurs, on va le faire ) à partir du scénario principal

Dans un premier temps on va cibler le bouton qui est dans le scénario principal
this.monBouton

On lui applique un gestionnaire d'événement, qui n'est rien d'autre qu'une fonction
On a donc :

this.monBouton.onPress=function(){
}


Il faut maintenant dire au scénario principal de s'arrêter
le problème est que l'on a appliqué la fonction au bouton. Par conséquent, this à l'intérieur du gestionnaire d'événement est une référence au bouton et non plus au scénario principal.
Qu'importe, on sait maintenant gérer ce problème avec _parent :
On a alors :

this.monBouton.onPress=function(){
   this._parent.stop()
}


stop n'est plus utilise en tant que simple fonction mais en tant que méthode de MovieClip, j'expliquerai cela en détail dans un deuxième tutorial

Et enfin, on dit au clip de s'arrêter :

this.monBouton.onPress=function(){
   this._parent.stop()
   this._parent.monClip.stop()
}


Nous voici maintenant avec un code agissant de la même façon que le code précédent mais cette fois il est optimisé et écrit avec la syntaxe flash 5 (qui est la meme que celle de flash MX et même MX 2004 si on s'en tient à l'AS1)

J'ai évoqué plus haut des propriétés des clip. Avec l'ancienne syntaxe on modifiat les propriétés avec un code de ce genre (code tiré de l'aide de flash !):

on(release) {
   setProperty( "étoile", _alpha, "30" );
}


Avec la syntaxe orientée objet, cela devient :

monBouton.onRelease=function(){
   this._parent.etoile._alpha=30
}


Plus généralement, on peut cibler n'importe quelle variable avec le code monClip.maVariable ou monClip est une référence au clip et maVariable le nom de la variable et de même pour les fonctions

En espérant que cela vous aidera... ;)
Le 01/04/2006 par D.C.M.

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

Ajouter un commentaire sur ce tutoriel

Adobe, Macromedia, Flash MX, Programmation orienté Objet, Action Script
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)