Aller au menu - Aller au contenu

Icône MovieClip

Par Avatar SuprazZz
Mise à jour : 08/07/2010
Difficulté : Facile Facile
4 613 visites depuis 7 jours, dont 198 sur ce chapitre classé 39/786
Nous pourrions dès maintenant aborder des concepts difficiles comme celui des classes, mais il me parait préférable de voir seulement ce dont on a besoin et de faire les choses au fur et à mesure. Ne vous étonnez donc pas de rencontrer des mots barbares comme classe, instance, méthode, propriété ... Il n'est pas nécessaire de connaître avec précision leur signification, s'ils sont là c'est juste pour que vous puissiez les apprivoiser dans des cas pratiques !


Les MovieClip étaient les structures de bases de Flash à l'époque de l'AS 1.0 ainsi qu'en 2.0. Maintenant il pourrait presque s'agir d'une classe comme une autre, cependant en connaissant quelques-unes de ses propriétés nous allons pouvoir très rapidement nous amuser avec Flash :D
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

_root , this et _parent

Je rappelle que tout le code que je donne sans indication se place de la façon suivante : vous devez être sur la scène principale, sélectionner une image clé dans le scénario et ouvrir le panneau action. C'est là que vous pourrez mettre le code ! Si vous ne vous rappelez plus de ce qu'est un clip ou comment les créer, retournez lire ce chapitre : Où je le mets ce fichu code ?


_root



Nous avons déjà vu dans le premier chapitre que le clip parent à tous les autres clips, qu'on appelle la scène principale, se nommait _root.

Maintenant que nous avons quelques notions d'ActionScript, intéressons-nous à la signification de ce _root.

Code : Actionscript
1
2
3
var monnombre:Number = 10;
trace(monnombre);
trace(_root.monnombre);


La fenêtre de sortie va vous afficher deux fois 10.
Cela signifie que sur la scène principale, _root.monnombre = monnombre
C'est logique, puisque vu qu'on est dans _root, on a pas besoin de le repréciser !

Le . entre _root et monnombre, permet de dire au compilateur que l'un est inclus dans l'autre. En effet la variable appartient à l'objet _root (en Mathématiques on parlerait d'ensemble).

Maintenant, on va faire une chose ignoble, mais nécessaire à l'apprentissage : on va mettre du code dans un clip ! :p

Créez une nouveau clip, mettez-le sur la scène principale et nommez le monclip (oui, je sais, l'originalité n'est pas mon fort :-° et au passage, je précise que je parle de son nom d'occurrence).

Allez dans une image clé de ce clip (double-cliquez sur le clip), et tapez dans l'onglet action :
Code : Actionscript
1
2
trace(" monnombre => "+monnombre);
trace(" _root.monnombre => "+_root.monnombre);


Et laissez seulement ça sur la scène principale :
Code : Actionscript
1
var monnombre:Number = 10;


Voyons ce que nous affiche la fenêtre de sortie :
Code : Actionscript
1
2
3
monnombre => undefined

 _root.monnombre => 10


Et là on constate en effet qu'essayer d'afficher la variable qui est déclarée dans _root, mais pas dans le clip, ne fonctionne pas si on ne précise pas que cette variable se trouve sur _root. Le undefined signifie que la variable n'est pas définie, car elle n'existe pas dans le clip monclip.

En clair, la variable monnombre existe dans _root.
Mais elle n'existe pas dans _root.monclip.
Pour y accéder à partir de _root.monclip, il faut préciser où elle se trouve : _root.monnombre.

this



Voilà une propriété que nous allons TOUT LE TEMPS utiliser.

this permet de préciser au compilateur qu'on travaille sur l'objet qui contient le script.

Bah, ça sert à rien, il suffit de rien mettre ! o_O

Souvent, en effet, this est optionnel. Mais vous verrez par la suite, quand on abordera les évènements, que cette propriété se révèle fort utile, pour préciser au compilateur que malgré que le code soit dans _root, il s'applique à un autre clip.

Il est en effet possible d'écrire du code dans l'onglet action de _root qui se rapporte pourtant à un autre clip. Dans ce cas, si on ne met pas this, la variable appartiendra à _root, et si on précise this, la variable appartiendra au clip dont on parle (pour l'instant c'est normal que ça vous paraisse abstrait, nous prendrons des exemples par la suite).

_parent



_parent, renvoie au clip parent.

Et si on reprend l'exemple précédent, en remplaçant le _root.monnombre par this._parent.monnombre, que se passera-t-il ?


Et bien ça fonctionnera ! :D En effet le clip parent de _root.monclip c'est la scène principale (_root).

Vous vous demandez peut-être si _root._parent.monnombre fonctionnerait ? La réponse est : non. En effet, il n'existe pas de niveau "en dessous" de root. _root._parent renvoie donc à un objet qui n'existe pas !


_parent devient donc intéressant en cas d'imbrication d'un clip, dans un clip, dans un clip ...
Et c'est pour éviter d'utiliser cette propriété en spaghetti qu'on met tout le code au même endroit. ;) En effet, si vous commencez à mettre du code un peu partout dans des clips, vous devrez utiliser _parent plus souvent, et votre code deviendra rapidement incompréhensible, aussi mal "ordonné" qu'un plat de spaghettis. :p
Retour en haut

Positionnement

Maintenant que nous savons comment accéder aux clips, nous allons apprendre à manipuler leurs propriétés, commençons par les propriétés _x et _y des clips, qui permettent de positionner un clip au pixel près sur la scène.

Positionnement d'un clip sur _root



Dans un nouveau document créez un nouveau clip que vous nommerez dans l'onglet propriétés monclip (ce qui nous intéresse ici c'est le nom d'occurrence du clip, pas son nom dans la bibliothèque qui lui ne sert à rien en ActionScript. Mais ça vous le savez déjà ;) allez voir ici pour un rapide rappel).
Tapez dans l'onglet action (si je ne donne pas d'indication c'est que le code doit être placé dans la scène principale) :

Code : Actionscript
1
2
monclip._x=0;
monclip._y=0;


En exécutant l'animation vous verrez que le clip se placera en haut à gauche de l'écran.

En fait c'est le point d'ancrage du clip qui se placera aux coordonnées indiquées. Le point d'ancrage d'un clip correspond à la petite croix noire par défaut au centre d'un clip fraîchement créé, mais qu'il est plus judicieux de placer en haut à gauche du clip dans certains cas.


Pour ceux qui n'auraient pas compris, la syntaxe à point permet de séparer le nom du clip de sa propriété, ici on utilise deux propriétés du clip. Sa position sur l'axe horizontal (axe des abscisse) est la propriété _x et _y est sa position sur l'axe vertical (axe des ordonnées).

Image utilisateur

Voilà un petit schéma simple expliquant comment Flash et la plupart des langages que je connaisse conçoivent le placement d'un clip dans un plan, c'est-à-dire sur l'écran.

Vous pouvez ainsi donner n'importe quelle position au clip que vous souhaitez en utilisant ce système.

















Positionnement d'un clip dans un autre



Complexifions un petit peu la chose, entrez dans le clip monclip et créez à l'intérieur un second clip que vous nommerez clipdansleclip.

Maintenant retournons dans le code et voyons comment faire pour bouger ce clip à l'intérieur de l'autre.

Code : Actionscript
1
2
3
4
monclip._y = 50;
monclip._x = 50;
monclip.clipdansleclip._y = 25;
monclip.clipdansleclip._x = 50;


Image utilisateur


A votre avis, où va être placé le clip clipdansleclip ?
Eh bien, il sera à 50 pixels à droite du point d'ancrage de monclip.
Et monclip lui même sera à 50 pixels à droite du point d'ancrage de la scène principale.

Donc par rapport au point d'ancrage de la scène principale, le clip clipdansleclip sera à 50+50=100 pixels à droite et à 75 pixels vers le bas.











Cliquez ici pour voir une petite animation récapitulative.

Retour en haut

Taille absolue

Les clips possèdent aussi les propriétés _width et _height (respectivement largeur et hauteur en français).
Ces propriétés permettent d'indiquer la taille des clips en pixels. Le clip sera alors redimensionné par le lecteur Flash.
N'oubliez pas que _width représente la largeur sur l'axe horizontal. Et donc que la hauteur _height correspond à l'axe horizontal.

Cliquez ici pour un exemple animé.


Reprenez l'exemple précédent, et rajoutez :

Code : Actionscript
1
2
monclip._width = 300; // Largeur : 300px
monclip._height = 100; // Hauteur : 100px


Comme vous le constatez, la figure devient très allongée.
Si on voulait rendre le clip carré, il suffirait de prendre la même largeur et hauteur :

Code : Actionscript
1
2
monclip._width = 100; // Largeur : 100px
monclip._height = 100; // Hauteur : 100px

Voilà, le clip est carré.

Imaginons maintenant que nous voulions agrandir le clip de façon à garder ses proportions, c'est-à-dire conserver le rapport largeur/hauteur d'origine.

Il faudrait alors suivre cette bête règle de trois :
Code : Actionscript
1
_width/*de départ*/ / _height/*de départ*/ = _width/*d'arrivée*/ / _height/*d'arrivée*/

Il s'agit là d'une équation qui n'a rien de mathématique, arrangeons-la pour que Flash la comprenne. Prenons l'exemple d'une boîte de largeur 100px et de hauteur 50px. Nous voulons que cette boîte deviennent large de 200px, en conservant les proportions. On cherche donc la hauteur (x sur le schéma) qu'on va devoir lui donner pour conserver ce rapport.

Image utilisateur

Bon là, c'est facile, on voit qu'il suffit de multiplier par deux, mais dans des cas plus complexes, voilà le code qui permettrait d'assigner la bonne hauteur à monclip :

Code : Actionscript
1
monclip._height = 200*monclip._height/monclip._width;


Vous avez donc brièvement vu comment assigner une taille absolue à un clip, et même comment conserver ses proportions lors d'un agrandissement.
Retour en haut

Agrandissement

Pourquoi s'embêter avec des calculs pour conserver la proportion d'une image ou d'un clip ? Utilisons les propriétés _xscale et _yscale.

Ces deux propriétés permettent d'agrandir en pourcentage un clip sur l'axe horizontal _xscale ou vertical _yscale.

La valeur d'origine pour un clip est _xscale = _yscale = 100 puisque l'agrandissement se fait en pourcentage.

Reprenez l'exemple précédent, supprimez tout le code et tapez :

Code : Actionscript
1
2
3
trace("Agrandissement horizontal avant changement : "+monclip._xscale); // Affiche 100
monclip._xscale = 200; // on agrandit 2 fois en longueur le clip (100*2=200)
trace("Agrandissement horizontal après changement : "+monclip._xscale); // Affiche 200


Intéressant, n'est-ce pas ? :D
Maintenant, réduisons ce clip en conservant ses proportions, c'est-à-dire que son agrandissement horizontal et vertical doivent être les mêmes.

Code : Actionscript
1
2
monclip._xscale = 50; // on réduit la taille de moitié (100 / 2 = 50)
monclip._yscale = monclip._xscale; // on conserve les proportions


On peut encore plus compresser ce code comme ça :
Code : Actionscript
1
monclip._xscale = monclip._yscale = 50;



Cliquez ici pour une petite démonstration de l'agrandissement proportionnel.
Retour en haut

Rotation

Avant dernière propriété que nous allons étudier : _rotation

_rotation s'exprime en degrés, et ses valeurs vont de -180 à 180 degrés. Si vous donnez une valeur supérieure, Flash fera la transformation qu'il faut pour que ça tombe juste.
En effet n'oubliez pas qu'une rotation de 360° équivaut à une rotation de 0 degré, puisque 360° c'est un tour complet.

La rotation s'effectue avec le point d'ancrage du clip comme centre ! Ne l'oubliez jamais, c'est ce point d'ancrage qui est le centre pour toutes les propriétés que nous avons vues !


Reprenons encore et toujours l'exemple précédent, mais je vous conseille de mettre une photo dans le clip, pour mieux voir l'effet de _rotation en faisant Ficher->Importer->Importer dans la scène quand vous êtes en train d'éditer le clip.
Supprimez tout le code précédent, et essayez les différents codes suivants ligne après ligne (ne mettez pas tout d'un coup, sinon, seule la dernière ligne aura un effet ;) ) :

Code : Actionscript
1
2
3
4
monclip._rotation = 180 ; // On le retourne complétement
monclip._rotation = 90 ; // La tête en bas
monclip._rotation = -90 ; // La tête en haut
monclip._rotation = 45 ; // En biais


C'est bien beau tout ça, mais on va passer à plus complexe et surtout à plus utile ! On va demander à notre clip d'effectuer une rotation dans la direction d'un autre clip :D

Pour ce faire, créez une nouvelle scène, un clip monclip et un clip cible, mettez ce que vous voulez dedans.

Image utilisateur


Tapez ce code :
Code : Actionscript
1
_root.monclip._rotation = Math.atan2(_root.cible._y-_root.monclip._y, _root.cible._x-_root.monclip._x)/(Math.PI/180);


Et si vous exécutez l'animation, vous devriez obtenir cela :

Image utilisateur


Bon expliquons cette petite formule. :p
_root.cible._y-_root.monclip._y => renvoie la distance verticale entre les deux clips
_root.cible._x-_root.monclip._x => renvoie la distance horizontale entre les deux clips
La fonction Math.atan2 inclue dans Flash, va renvoyer l'angle que le clip doit adopter en Radians. Or on cherche cet angle en degrés.

Conversion d'un angle de radian en degré :
degré = radian / (pi/180)
ou encore
degré = radian*180 / pi


La classe Math de Flash contient non seulement cette magnifique fonction atan2, mais aussi la valeur approchée de pi : Math.PI

Surtout gardez cette formule dans un coin, elle nous servira par la suite. :D
Si vous ne l'avez pas compris, ce n'est pas bien grave. Mais suivez bien vos cours de Maths qui parlent de trigonométrie et vous devriez en saisir le fonctionnement !

Cliquez ici pour voir une rotation à l'oeuvre.
Retour en haut

Transparence

Dernière des propriétés importantes que nous allons voir dans ce chapitre : _alpha

Flash est souvent utilisé pour ses effets visuels dynamiques. Or en voici un bien pratique : la transparence !

_alpha détermine la transparence d'un clip :
  • si _alpha = 0 alors clip invisible
  • si _alpha = 50 alors clip à moitié visible (ou à moitié transparent, ça dépend de votre état d'esprit :p )
  • si _alpha = 100 alors clip visible

Allez faites donc quelques tests vous même. ;) Je suis sûr que vous avez compris le truc.

Mais attention ! Un clip a beau être totalement transparent, il existe toujours ! Ne l'oubliez pas, on pourrait par exemple toujours cliquer sur un bouton complètement transparent !


Et comme d'habitude, une petite animation pour finir.
Retour en haut

Visibilité

Une propriété très intéressante : _visible
Vous pouvez lui assigner la valeur true (le clip est visible) ou false (le clip est invisible).

Par exemple :
Code : Actionscript
1
monclip._visible = false; //Le clip va devenir invisible


Quelle est alors la différence entre _visible=false et _alpha=0 ?

En fait non seulement _visible peut rendre un clip invisible comme le ferait _alpha, mais en plus il désactive le clip. Imaginez un bouton sur la scène principale, si vous utilisiez _alpha=0, alors le clip serait invisible mais vous pourriez encore cliquer dessus. Mais si vous utilisez _visible=false alors le clip deviendra invisible et en plus il deviendra impossible de cliquer dessus.
Retour en haut

Q.C.M.

Soit le clip monclip sur la scène principale :
Code : Autre
1
2
3

monclip._x=10;
monclip._y=0;
monclip._y += monclip._x;


Quelle va être la position verticale de monclip en pixels ?
Soit le clip monclip sur la scène principale :

Code : Autre
1
2

monclip._width = 100;
monclip._yscale = 200;


Quelle va être la largeur de monclip ?
Soit le clip monclip sur la scène principale :

Code : Autre
1
2

monclip._alpha = 100;
_root._alpha = 50;


Quelle va être le niveau de transparence du clip ?

Statistiques de réponses au QCM

Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
39 commentaires pour "MovieClip"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne LeonLecamet # Posté le 22/03/2010 à 09:34:51

Citation : Florianboy
Ce serais vraiment génial si on pouvait toujours avoir accès à l'intégralité du tuto sur l'AS2 et une annexe sur l'AS3, voir si tu as le temps, un nouveau tuto.


Aujourd'hui, avec la version CS4, le nouveau tuto est devenu indispensable. Car plus rien ne marche, ni en AS2 ni en AS3. Je suppose que les procédures doivent être différentes.
Donc ce tuto ne sert plus à grand chose... :(


Citation : Florianboy
Je te fais pas de reproche, c'est vraiment super ce que tu as fais, mais pour des Zéro comme nous :lol: ça devient très compliqué de te suivre.


Tu es gentil, Florianboy, de ne pas faire de reproches ;) Moi je regrette que depuis maintenant 5 ans que ce tuto existe, il n'y ait personne pour reprendre le flambeau et nous en sortir un nouveau. :(

Il y a beaucoup de zéros qui espèrent, mais pas beaucoup de 1 pour montrer le chemin. Et des 0 sans 1, ça ne fera jamais d'informatique. :p
Hors ligne Matisk # Posté le 30/03/2010 à 14:26:10

Une initiative excellente, mais malgré mes petites connaissances en programmations en tout genre, je dois dire que l'approche n'est pas très didactique (pourtant très bonne élocution), désolé je n'aime pas critiquer, mais prend ça comme une approche douce de la critique. Pourtant j'ai vu quelques vidéos sur le net expliquant pas mal de choses simple. Qui mon aidé à appréhender les bases de Flash et du AS 2.0. Peut-être faut-il parfois s'imaginer que ce sont des gosses (oh il y en a peut-être bien !) de 10 ans qui connaissent déjà bien Flash. Ainsi on peut mieux faire mumuse (avec des exemples très... CM2) en dév. sur AS. ;)

Question de densité d'informations : je crois que tu n'as pas assez décomposer les données que tu fournis, ni même à amener les personnes à bien comprendre les choses (captures d'écran) sans en mettre 3 à la fois. et sans exemple précis au cas par cas qui peuvent éviter un long discours.

J'ai arrêté juste avant les _parent _root et this, ça devenait trop vague et les exemples étaient en lien brisé, donc dommage.

Bon d'accord je suis sur CS4 (dans 13 jours le CS5 arrive !), même si la teneur avec AS 2.0 à l'air de bien fonctionner. Une revue AS 3.0 serait bienvenue (pourquoi diable rester en 2 ?).

Tu imagines les confusions qu'on peut avoir dans le démarrage de l'apprentissage en AS2 et en 3, j'ai vu la liste Adobe de toutes les instructions... :-° autant apprendre le Flash Lite ! Car combien de fois j'ai dû cherché pour savoir comment c'était en Flash 8 dans les exemples que j'ai fait par ailleurs !

Alors, espérons que dans quelques mois, je reprenne tout ton cours pour l'adapter en AS 3 pur sang :p

Bon bah, je m'arrête là et je vais m'initier au php5, tiens, j'en aurais besoin aussi !
« Ce qui ne nous tue pas, nous rend plus fort. » Friedrich Nietzsche
 
Hors ligne gros_faignan # Posté le 30/03/2010 à 17:57:38

bon bah perso je vient de choper flash CS4 et je suis un peut decus par le tuto par ce que ya rien qui correspond a rien....meme si en soit le tuto reste interessant !

si qqun a des idée je suis preneur
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:53:07

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:50:50

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires