Faire tourner les ailes d’un moulin

Si vous ne voyez pas l’animation, il faut installer Adobe Flash Player.

Ce tutoriel est écrit avec Adobe Flash CS6 et est compatible avec Flash 8. Vous devez avoir ce logiciel pour réaliser ce tutoriel.

Créer les images source
Créer l’animation
Tester l’animation
Ajouter un copyright
Ranger la bibliothèque
Enregistrer l’animation

Nous allons animer les ailes d’un moulin, les faire tourner. Cette animation utilise la rotation d’objet à 360°, par Action Script 2.0.

Créer les images source :

► faites une jolie création avec un objet que vous désirez faire tourner, ici c’est un moulin, puis enregistrez vos images.

Vous avez besoin d’une image pour le fond (en .jpg) et d’une image pour l’objet en mouvement, donc ici les ailes.
Il faut enregistrer l’image des ailes soit en .png soit en .gif, de façon à avoir la transparence.

Vous pouvez télécharger les images pour faire ce tutoriel.

Télécharger : Images moulin et ailesTéléchargé 390 fois – 172,90 Ko

Créer l’animation :

► dans Flash, créer un Nouveau document

► dans la fenêtre, onglet Général, cocher ActionScript 2.0 et entrer les dimensions de votre création. Pour ce tutoriel c’est 320 x 400 pixels

► menu Fichier / Importer / Importer dans la bibliothèque…

► sélectionner les images source, qui vont servir à l’animation, ici le moulin et les ailes

Dans Flash pour un meilleur rendu, je vous conseille d’autoriser le lissage, pour l’image avec transparence donc celle des ailes.

► faire un double-clic sur l’image des ailes dans la Bibliothèque

► dans la fenêtre Propriété du bitmap, cocher la case Autoriser le lissage et dans le menu Compression sélectionner Sans perte (PNG/GIF)

► à partir de la Bibliothèque, déplacer l’image de votre création sur la scène, dans l’espace de travail

► dans le panneau Scénario, faire un double-clic sur le nom du calque et le nommer moulin, par exemple

► dans le panneau Aligner en haut à droite de l’interface, cocher la case Aligner vers la scène puis,
► cliquer sur les icônes de centrage pour centrer l’image horizontalement et verticalement

► dans le panneau Scénario en haut à gauche, ajouter un Nouveau calque et le nommer aile, ce sera l’objet qui va tourner

► déplacer l’image des ailes, de la Bibliothèque vers le plan de travail

► positionner l’image des ailes dans l’espace de travail sur l’image du Moulin puis,
► dans le panneau Aligner, centrer l’image horizontalement. La position verticale est à faire manuellement, avec les touches du clavier, au centre de l’axe du moulin

Il faut maintenant convertir le calque Aile, en symbole Clic.

► dans le panneau Scénario, sélectionner le calque Aile, puis menu Insertion / Nouveau symbole ou faire un double-clic sur le calque ou touche F8

► dans la fenêtre, Nom : Aile, dans le menu déroulant Type sélectionner Clip et cliquer sur le centrage du petit panneau Alignement

► dans le panneau à droite Propriété, renommer l’Occurrence en : aile

► dans le panneau Scénario, ajouter un Nouveau calque et le nommer AS, en faisant un double-clic

Vous pouvez cocher l’icône Cadenas sur les calques moulin et aile, de façon à ne pas les modifier par erreur.

► menu Fenêtre / Action ou touche F9 pour afficher le panneau Action

► dans la partie libre du panneau, coller le code suivant :

   // objet, est a remplacer par votre nom d'occurrence, ici mon exemple c'est aile
   // pour une rotation lente dans le sens des aiguilles d'une montre, ...rotation++;   // pour une rotation inverse, ...rotation--;   // pour augmenter la vitesse, ...rotation=+10; ou -10; (par exemple),   // plus le chiffre ou nombre est grand, plus ça va vite et pour la rotation inverse, c'est pareil
objet.onEnterFrame = function() { this._rotation++; }

► ensuite modifier le mot objet par le mot de l’Occurrence, ici c’est : aile

aile.onEnterFrame = function() { this._rotation++; }

Explications du code :

les lignes avec // sont des commentaires non obligatoires, mais il est préférable de les conserver
objet est à remplacer par votre nom d’occurrence, dans ce tutoriel c’est aile
la fonction dit que la rotation se fera dans le sens des aiguilles d’une montre et lentement
pour inverse le sens de rotation, il faut remplacer ++ par – –
pour augmenter la vitesse vous devez enlever les signes ++ ou – – et les remplacer par = et un chiffre ou nombre,
par exemple rotation =+10;. Plus le nombre est important plus l’animation va vite, pour l’inverse également

Verifier que vous n’avez pas oublié le signe ; (point virgule) en fin de chaque ligne.

Autres codes, exemples :

aile.onEnterFrame = function() { this._rotation++; }
aile.onEnterFrame = function() { this._rotation--; }
aile.onEnterFrame = function() { this._rotation=+10; }

Tester l’animation :

À ce stade on peut, tester son animation.

► menu Contrôle / Tester l’animation et choisir soit dans Flash professionnel soit dans Navigateur

Ajouter un copyright :

Si vous désirez ajouter un copyright à votre animation.

► dans le panneau Scénario, ajouter un Nouveau calque et le nommer : signature (ou copyright)

Dans le panneau Scénario, profitez-en pour activer l’icône Cadenas sur tous les calques, afin de les verrouiller.

► dans le panneau Actions ou appuyer sur la touche F9 pour l’afficher, coller le code suivant :

function doSomething(){}
function doSomething2(){
getURL("URL", _blank);}
MENU = new ContextMenu();
MENU.hideBuiltInItems();
Functioned = new ContextMenuItem("NOM", doSomething);
Functioned2 = new ContextMenuItem("TEXTE", doSomething2);
MENU.customItems.push(Functioned);
MENU.customItems.push(Functioned2);
_root.menu = MENU;

► modifier les mots en vert sur la capture pour personnaliser votre signature

Personnalisation du code :

URL, à remplacer par le chemin complet vers le site ou le lien à insérer (facultatif)
NOM, à remplacer par votre Nom ou Pseudo
TEXTE, à remplacer par le texte que vous voulez ajouter

Vous pouvez à nouveau tester l’animation pour voir si cela convient.

Ranger la bibliothèque :

De façon à pouvoir vous y retrouver par la suite, surtout si vous créez d’autres animations, il est préférable de ranger la Bibliothèque (facultatif).

Pour cela faire un clic droit sur le panneau Bibliothèque et créer des dossiers Image et Clip puis déplacer manuellement vos images source dans ces dossiers.

Ou rangez la bilbiothèque comme vous voulez, l’important est de s’y retrouver.