Les Clips (ou MovieClip)

_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 : Autre

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 !

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 : Autre

Et laissez seulement ça sur la scène principale :
Code : Autre

Voyons ce que nous affiche la fenêtre de sortie :
Code : Autre

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.


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 bien ça fonctionnera ! En effet le clip parent de _root.monclip c'est la scène principale (_root).



_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.

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 : Autre

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



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).


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 : Autre



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.

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.



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

Code : Autre

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 : Autre
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 : Autre
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.



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 : Autre

Vous avez donc brièvement vu comment assigner une taille absolue à un clip, et même comment conserver ses proportions lors d'un 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 : Autre

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

Code : Autre

On peut encore plus compresser ce code comme ça :
Code : Autre

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.



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 : Autre

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

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



Tapez ce code :
Code : Autre

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



Bon expliquons cette petite formule.
_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.



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.
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 !

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 )
• si _alpha = 100 alors clip visible

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

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 : Autre


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.