Voici un tutorial sur la rotation d'objets dans Flash. Nous devrions
plutôt utiliser les termes "tourner" ou "mettre en
orbite" qui s'avèrent plus appropriés. Les objets eux-même
ne vont pas pas tourner mais bougeront autour d'un point central.
Intéressons nous tout d'abord aux fondements
de la 3D
Largeur : Gauche à droite Hauteur : Haut à bas Et la profondeur : Proche à loin.
Un écran ne représente que deux dimensions : Largeur et
Hauteur.
Pour représenter la profondeur, nous devrons user de différentes
astuces, la plus évidente étant celle de la perpective :
Tant que les objets s'éloignent, plus ils rapetissent. Ils se déplacent
vers un point central invisible, s'effacent selon un degré d'atmosphère.
Tous ces effets peuvent être crées facilement dans Flash.
En informatique, la hauteur est représentée par Y, ou bien
dans flash avec les propriétés :_y, _yscale
et _height.
La largeur est représentée par X et les propriétés
_x,_xscale et _width.
La profondeur est représentée par Z mais flash est un programme
2D et n'a pas de propriété _y, néammoins
nous pouvons en créer une !
La rotation
Maintenant, parlons de la rotation. Il existe 3 façons de faire
tourner un objet.
La rotation Z. C'est comme une horloge ou un volant.
L'objet ne se rapproche pas de vous ou ne s'éloigne pas, mais sa
position X et Y change.
La rotation Y. Pensez à un manège ou bien
un radio-cassette. La hauteur ne change pas mais l'ordonnée (X)
(gauche à droite) et z ,eux, changent.
La rotation X. Pensez à une scie circulaire.
La hauteur (Y) et profondeur changent mais pas de gauche à doite
(X).
Flash supporte la rotation Z pour les movie clips grâce à
la propriété _rotation. Mais c'est une rotation
droite - tourne autour de son propre centre. Si nous voulons mettre en
orbite un clip comme une planète autour du soleil, nous devrons
appronfondir notre processus.
Le problème basique est comment mouvoir quelque chose autour d'un
point central. La distance de ce point central devra toujours être
la même, allez... disons 100 pixels.
Bien, nous avons un radius de 100 et un angle qui s'étend de 0
à 360. A partir de ça, nous devons calculer la position
_x et _y. Voici la formule !
Je ne vais pas rentrer dans les détails de la trigonométrie
maintenant mais c'est très simple. Sachez juste que ça marche
! Cependant l'angle doit être en radians. C'est un système
différent des degrés. Vous devrez donc convertir les degrés
en radians.Utilisez donc cette formule :
Script :
rad=degree*Math.PI/180;
Maintenant nous avons juste besoin d 'une boucle qui incrémente
(augmente) l'angle de 0 à 360 et vous aurez un mouvement circulaire.
Créez donc un movieclip, placez-le sur la scène et insérez
le code suivant dessus :
Testez et vous devriez avoir votre clip bougeant autour d'un cercle.
Ce n'est pas de la 3D encore mais c'est une étape importante.
Rotation Y
Essayons la rotation Y.
Imaginez le cercle que vous aviez avant, mais tirez le haut vers vous
et poussez le bas au loin jusqu'à ce qu'il devienne plat. Y est
devenue Z mais X reste le même.
Nous devons donc substituer Z pour _y;
Remarquez que j'ai ajouté une valeur zcenter dans la
section (load) et changé ycenter to zcenter
dans la section (enterFrame). Jouez avec cette valeur. Un nombre
plus élevé éloignera l'animation de vous. Un inférieur
le rapprochera de vous. J'ai aussi défini une valeur pour _y.
Autrement _y aurait été à 0 et le clip entier
aurait été placé en haut de l'écran.
Si vous testez maintenant, le clip ne fera que se déplacer de gauche
à droite. Bien que nous ayons défini une valeur z, nous
n'avons rien fait avec. Nous allons l'utiliser pour générer
un redimensionnement, comme ça nous aurons un petit effet de 3D.
Comment obtenir un effet de perspective réaliste
? Croyez-moi ou non mais nous devrons user des théories optiques.
Focale
D'abord, nous devons poser une longueur de focale qui est la distance
théorique du point de vue à l'écran. Nous allons
la définir à 150 pour l'instant. Bien entendu rien ne vous
empêche d'ajuster selon votre envie cette valeur... La focale ne
changera pas, alors nous la plaçons dans la section (load) du code.
Script :
fl=150;
Nous avons besoin d'une échelle. Basée sur la focale et
z. La formule est
Script :
scale=fl/(fl+z);
Elle résulte toujours avec un décimal entre 0 et 1. Quand
z=0, l'échelle sera 1.0. Lorsque z augmente, l'échelle diminue
jusqu'à 0. Nous pouvons donc l'utiliser pour programmer _xscale
et _yscale pour notre objet.
Testez. C'est pas mal jusqu'à présent ! Mais nous pouvons
faire mieux et plus réaliste.
J'ai précisé plus tôt que lorsque un objet rétrécit
dans la distance, il se dirige vers un point transparent. Dans notre exemple
au dessus, nous avons y=0, qui est le niveau de l'oeil et déjà
au point central (le fameux point transparent). Donc vous ne pourrez pas
voir de changement.
Mais disons que y = 100. Cela serait sous nos yeux et nous devrions le
voir bouger vers le haut. Pareillement, si y était inférieur
à 0, le clip serait au-dessus de nous et il se déplacerait
vers l'horizon en descendant, comme si il s'en allait... Reviens ! Reviens
! J'ai les mêmes à la maison !
Pour _x, nous devons d'abord calculer la position sur le cercle,
l'assigner à x, l'ajuster pour la perspective et l'assigner à
_x.
Notez que nous devons d'abord programmer z et l'échelle, comme
ça c'est bon pour le reste du code. Essayez de changer les valeurs
initiales y pour obtenir des rotation à différentes hauteurs.
Essayez avec des nombres négatifs aussi.
C'est aussi réaliste que vous puissiez en termes d'échelle
(redimensionnement) et positionnement. Pour la touche finale, vous pouvez
ajouter une atmosphère en programmant une propriété
_alpha basé sur l'échelle :
Script :
_alpha=scale*100;
En jouant avec le chiffre 100, vous pouvez varier l'atmosphère.
La prochaine étape serait d'ajouter de multiples
objets se déplaçant autour du cercle. Pour les avoir espacer
suffisamment, vous ajustez l'angle initial de chacun. Divisez 360 par
le nombre d'objets et ajoutez-y le résultat.
Exemple :
Vous avez 10 objets. 360/10 = 36. Angle initial pour chaque objet.
Faites-le soit manuellement soit à l'aide d'une boucle
for()
Note additionnelle
J'ai codé tout ça avec onClipEvent's pour faciliter
l'explication. Je vous recommende de mettre tout ce code à l'intérieur
du clip sur sa propre timeline. Par exemple, mettez le code onClipEvent(load)
(les constantes) dans la frame l, placez les actions onCLipEvent(enterFrame)
dans la frame 2, et mettez dans la frame 3 une action gotoAndPlay
(2);
De cette façon, le code est construit à l'intérieur
de l'objet et vous n'avez plus qu'à le sortir de la librairie et
faire plusieur copies, l'utiliser dans d'autres animations... sans avoir
à recréer toute la programmation.
