Nous allons tout d'abord créer un symbole tout simple : une flèche.

- allez sur le menu Insertion et cliquez sur Nouveau Symbole (ou Ctrl F8)
- Une fenêtre s'ouvre et demande un nom (Flèche par exemple) et nous laisserons l'option sur Clip
- Dans l'exemple ci-dessous j'ai marqué en rouge l'axe de rotation de la flèche et je l'ai situé bien au centre du plan de dessin ( nous verrons plus tard pourquoi ).



Maintenant quittons le symbole flèche et revenons à la scène principale ( en cliquant sur scène1 juste en dessous des menus )
Ouvrons la bibliothèque ( Menu Fenêtre puis > Bibliothéque ou bien CTRL+ L )

Une fenêtre s'ouvre ou apparaît notre fameuse flèche.
Sélectionnons avec la souris et faisons glisser le mot "flèche" sur l'espace blanc de la scène.
Relâchons la souris et une copie (on dit une instance ou occurrence de la flèche est venue se coller sur la scène).

La girouette est presque finie il nous reste à l'animer.

Nous allons exploiter pour ceci une propriété formidable de Flash qui permet à chaque Objet (ici notre flèche) de vivre sa vie indépendamment du reste de l'animation.
En effet chaque clip peut déclencher un petit bout de code 12 fois par seconde ( par exemple , mais ça dépend du réglage des fps de votre animation ) et nous allons lui demander de tourner à gauche ou à droite selon la position du curseur de la souris.

Le fait que nous ayons bien placé notre centre de rotation au milieu du plan fait que pour l'objet flèche lorsque le curseur de la souris sera situé à sa droite il verra des x>0 et lorsque réciproquement x<0 à sa gauche.

Voyons maintenant comment mesurer la distance que j'affiche dans l'exemple ci-dessus.
On récupére cette valeur de distance dans la proprieté _xmouse (position x de la souris)
J'insiste sur le fait que vu par l'objet flèche ce dernier ayant son centre au milieu de son plan de dessin les déplacements du curseur vont donner à travers _xmouse une valeur négative à gauche et positive à droite.

Nous allons maintenant demander à la flèche de tourner.
Pour cela utilisons la propriété _rotation du clip flèche (exprimée en degrés)
Et voilà enfin ci-dessous notre seul et unique petit bout de code qui va transformer notre flèche en girouette.



Reste à savoir ou l'écrire et à l'expliquer.

Cliquez avec le bouton de la souris sur l'objet flèche de notre plan de dessin
Dans le menu contextuel qui vient de s'ouvrir cliquez sur Actions.
Dans la fenêtre ainsi ouverte cliquer sur le signe + situé en haut à droite puis sur Propriétés puis sur _rotation dans les menus consécutifs.
Un bout de code s'est automatiquement écrit :



La ligne _rotation est sélectionnée allez en bas de l'écran et complétez la zone expression en écrivant _rotation += _xmouse/10;

Cliquez maintenant sur la ligne "onClipEvent (load)" { pour la séléctionner.

Cliquez sur l'option "Entre Image" située en bas de la fenêtre.

Le code inscrit en haut est donc maintenant le suivant:



Explication du code

Nous affectons à _rotation une certaine valeur. Mais pour ceux qui ne connaissent pas vous trouvez un signe "égal" bien bizarre +=.

Ceci est équivalent en mathématique à _rotation = _rotation + _xmouse/10

L'objet va donc tourner sur lui-meme selon un angle qui va s'incréménter d'une valeur égale à (_xmouse/10) cette valeur étant je vous le rappelle la position de la souris.

Comme ce bout de code va se déclencher 12 fois par seconde si nous voulons voir la fléche bouger nous divisons cette valeur par 10.

Supposons que la souris soit à droite à 50.

Le calcul de _rotation sera donc en entrant dans la boucle égal à 50/10 soit 5.
La fléche tourne vers la droite d'un angle de 5 degrés.

Donc la distance flèche-souris va diminuer et la 2 ième boucle le calcul de _rotation va donc être plus petit et ainsi de suite jusqu'à ce que la flèche se retrouve dans l'axe de la souris.

Mais assez d'explication voyez par vous même ci-dessous.



Télécharger la source (fla + swf)

Source : Flash France , fla et swf reproduit par tutomania.com