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.

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é 142 fois –

 

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

Nouveau document et entrer les dimensions

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

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)

Autoriser le lissage

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

Ajouter l'image

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

Nommer le calque

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

Centrer l'image

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

Nouveau calque nommé Aile

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

Positionner l'image des ailes

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

Convertir en symbole Clip

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

Renommer occurrence

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.

Nouveau calque AS

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

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

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

 

Code aile modifié

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 :

 

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.

Calque signature et Activer les cadenas

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

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

Code copyright

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.

Ranger la bibliothèque

 

Enregistrer l’animation :

Pour sauvegarder l’animation originale il faut l’enregistrer au format .fla.

menu Fichier / Enregistrer sous… et donner un nom à votre fichier.fla

Vous pouvez créer des dossiers par catégories pour ranger vos différentes animations.

 

Pour sauvegarder l’animation il faut l’enregistrer au format .swf.

menu Fichier / Exporter / Exporter l’animation…

donner un nom au fichier.swf

 

Ce tutoriel est terminé.

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel est la propriété de Philippe et de Polov. Photoshoplus en possède les droits de diffusion et d‘exploitation exclusifs.
Toute reproduction, exploitation ou diffusion du présent document est interdite.

Articles similaires :