Dans ce tutoriel je vais vous montrer comment faire tourner un clip
en AS3 à l'aide d'une rotation verticale ou horizontale,
comme dans les exemples ci-dessous.


Commençez tout d'abord par ouvrir un nouveau document en cliquant sur
fichier puis nouveau ou alors directement sur le raccourcis
en cliquant sur les  touches ctrl + N.



Nous allons ensuite créer le clip sur lequel s'effectuera la rotation.
Moi pour mon exemple je vais me servir d'un polygone mais ce clip peut être une image, un texte, une forme ou tout éléments que vous convertirez en clip.

Pour cela, cliquer sur l'outil rectangle , une nouvelle fenêtre va alors s'ouvrir, sélectionner ensuite l'option Polygone



Choisissez les couleurs qui vous plaises à l'aide de la palette des couleurs,



puis tracez ensuite un polygone sur votre scène.



sélectionner la totalité de ce polygone en cliquant sur l'image clé correspondante,
vous verrez alors ce polygone se remplir de plein de petits points.



Vous allez devoir maintenant convertir ce polygone en clip, pour cela cliquer sur
modification puis convertir en symbole ou alors directement sur le raccourcis
en cliquant sur la touche F8 de votre clavier.



Une nouvelle fenetre va s'ouvrir, nommer ce clip "polygone" et
sélectionner de type clip.
Vous pouvez également sélectionner l'axe de rotation de votre clip en modifiant
les carrés d'alignement, tout dépend de comment vous souhaitez
faire tourner ce polygone.



Une fois vos choix effectués, cliquer sur ok

Vous verrez alors votre polygone entouré d'une carré bleu, cela veut dire qu'il
a bien été convertis en clip.



Vous pouvez également vérifier dans votre bibliothèque que le clip "polygone"
que vous venez de créer à bien été ajouté.

Ouvrez ensuite la fenêtre des propriétés et entrer le nom d'occurence polygone



Il ne vous reste plus maintenant qu'à inscrire le code  ActionScript
afin de faire tourner votre clip.
Pour cela ajouter un nouveau calque en cliquant sur , positionner vous dessus
et double cliquer sur ce claque afin de le renommer, donner lui le nom AS.
Faites la même chose pour l'autre calque et donner lui le nom polygone.

Repositionner vous sur le calque AS et inscrivez le code compris dans un
des spoilers ci-dessous, suivant le type de rotation que vous souhaitez effectuer (voir les exemples).


1) Rotation en 2D



           

Code: Tout sélectionner

this.addEventListener(Event.ENTER_FRAME,tourneCercle);

// ENTER_FRAME est appliquée à la rotation, et permet au code d'être exécuté en continu. //

function tourneCercle(e:Event){   
cercle.rotation += 2;   
}

// Le chiffre 2 correspond à la vitesse de rotation //

// Le signe +     correspond à une rotation horaire, c'est à dire vers la droite,
tandis que le signe - correspond à une rotation anti-horaire, c'est à dire vers la gauche. //



       
       télécharger les sources

rotation en - :
rotation en +   :



2) Rotation en 3D



                                                   

Code: Tout sélectionner

this.addEventListener(Event.ENTER_FRAME,tourneCercle);

// ENTER_FRAME est appliquée à la rotation, et permet au code d'être exécuté en continu. //

function tourneCercle(e:Event) {
cercle.rotationY  += 2;
}

// Le chiffre 2 correspond à la vitesse de rotation //
// Le signe +     correspond à une rotation horaire, c'est à dire vers la droite,
tandis que le signe - correspond à une rotation anti-horaire, c'est à dire vers la gauche.//

// X correspond à une rotation verticale //
// Y correspond à une rotation horizontale //


       
télécharger les sources

rotation 3d X :    
rotation 3d Y :                              

3) Rotation en 3D selon un axe horizontal, vertical et diagonal
                                                   

Code: Tout sélectionner

this.addEventListener(Event.ENTER_FRAME,tourneCercle);

//ENTER_FRAME est appliquée à la rotation, et permet au code d'être exécuté en continu //

function tourneCercle(e:Event) {
cercle.rotationX +=5;
cercle.rotationY +=5;
cercle.rotationZ +=5;
   }

// Le chiffre 5 correspond à la vitesse de rotation //
// Le signe + correspond à une rotation horaire, c'est à dire vers la droite,
tandis que le signe - correspond à une rotation anti-horaire, c'est à dire vers la gauche.//

// X correspond à une rotation verticale //
// Y correspond à une rotation horizontale //
//Z correspond à une rotation diagonale //



télécharger la source
rotation 3D XYZ :

La rotation sur le clip est maintenant terminée, il ne vous reste plus qu'à
tester votre animation en cliquant sur les  touches CTRL +     entrée  de votre clavier.




Télécharger le tutoriel au format pdf

voir tous mes autres tutoriels flash