[Tuto ImageReady] Animation Diaphragme

Nombre de messages : 5 Age : 44 Date d'inscription : 21/05/2006

Salut tout le monde !
Je vais tenter de vous apprendre à créer une animation d'ouverture d'un diaphragme, ou plus simplement : l'ouverture d'une porte blindée d'hélices. Et par là-même, vous apprendre à utiliser un script qui répètera une même opération autant de fois que vous le souhaitez.

Voici ce à quoi nous voudrions arriver :

Etape 1 : Mise en place du décor
Nous allons ouvrir un nouveau document de 170*170 px.
Sélectionnez l'outil "Ellipse" (raccourci U), et tracez un rond de 160*160 px que l'on va appeler "RondCentral".
Vous devriez arriver à cela :

Etape 2 : Création des repères principaux
Nous allons créer des repères afin de faire un travail de précision, ce qui sera primordial pour l'animation finale.
Allez dans le menu "Affichage -> Nouveau Repère...".
Choisissez d'abord l'option "Horizontale", et mettez la valeur "50%" pour la position.
Refaites de même, mais en choisissant cette fois "Verticale"
C'est magnifique ! Vous avez deux repères placés parfaitement au milieu de votre cadre ! Vous avez donc ça :

Si les repères ne s'affichent pas, vérifiez que l'option est bien activée (raccourci CTRL +:)

Etape 3 : Création de la première hélice
Commencez d'abord par dupliquer le calque "RondCentral" (clic droit sur le calque -> Dupliquer le calque).
Vous appellerez ce nouveau calque "Hélice 1", changerez sa couleur en rouge, et le pixelliserez (clic droit sur le calque -> Pixelliser le calque)
Récupérez la sélection de ce dernier en maintenant la touche CTRL appuyée, tout en cliquant sur la zone entourée en rouge sur ce screen :

Sélectionnez le calque "Hélice 1" en cliquant simplement dessus.
Utilisez l'outil "Rectangle de sélection" (raccourci M), et déplacez votre sélection vers le bas avec la touche SHIFT enfoncée jusqu'à ce que le haut de celle-ci rejoigne le repère horizontal en son milieu :

Appuyez sur la touche Suppr.
Gardez votre sélection active, et déplacez là de façon à avoir quelque chose qui ressemble à ce screen :

Pour cette partie, n'hésitez pas à zoomer à fond pour que la sélection soit la plus précise possible.
Maintenant, faites un clic droit sur votre sélection, et sélectionnez l'option "Intervertir" (raccourci MAJ + CTRL + I).
Appuyez sur la touche Suppr.
Voilà, votre première hélice est créée ! Vous devriez avoir quelque chose qui ressemble à ça :

Etape 4 : Création des autres hélices
Bon alors là, ça va être assez difficile à expliquer, mais je vais faire avec les moyens du bord hein :mrgreen:
Dupliquez votre calque "Hélice 1", et renommez le "Hélice 2".
ZOOMEZ A FOND VOTRE CALQUE de sorte à voir votre calque + le croisement que forment les deux repères.
Sélectionnez ce nouveau calque, et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
Maintenant, il va falloir que vous placiez le point de référence pile poil sur le croisement que forment les 2 repères ! (le point de référence est le petit rond qui se place par défaut en plein milieu du calque).
Ceci fait, appliquez une rotation de 90° à votre calque par le menu "Edition -> Transformation -> Rotation 90° horaire".
Validez votre transformation.

Vous arrivez donc à ça :

Maintenant, dupliquez les calques "Hélice 1" et "Hélice 2", puis renommez les "Hélice 3" et "Hélice 4".
Selectionnez les calques 3 et 4, et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
Après, cela marche de la même façon pour placer le point de référence, mais au lieu d'appliquer une transformation de 90°, vous allez appliquer une transformation de 180° par le menu "Edition -> Transformation -> Rotation 180°".
Validez votre transformation.

Vous arrivez donc à ça :

Dupliquez de la même façon que tout à l'heure les calques "Hélice 1", "Hélice 2", "Hélice 3" et "Hélice 4" et renommez les "Hélice 5", "Hélice 6", "Hélice 7" et "Hélice 8".
Selectionnez les calques 5, 6, 7 et 8, puis allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
Appliquez une rotation de 30° par le menu qui se trouve en haut de l'écran, puis validez la transformation.

Vous arrivez donc à ça :

Répetez enfin la même opération, mais en dupliquant cette fois-ci les calques "Hélice 5", "Hélice 6", "Hélice 7" et "Hélice 8" et en les renommant "Hélice 9", "Hélice 10", "Hélice 11" et "Hélice 12".

Les étapes précédentes réitérées, vous devriez arriver à ça :

Bon la partie de création est terminée !
Vous pouvez appliquer quelques effets sur les calques afin d'avoir des hélices avec une tête.... d'hélices...
J'ai opté pour un simple dégradé sur les hélices afin qu'on les distingue mieux les unes des autres pour la suite.

Etape 5 : Création de nouveaux repères pour l'animation
Bon alors déjà que jusque là c'était pas de la tarte à expliquer... maintenant ça va être le cauchemar !
On va devoir créer de nouveaux repères afin de pouvoir positionner facilement les points de référence pour effectuer les rotations des hélices pendant l'animation.
Vous avez déjà les deux repères centraux.
Créez 4 nouveaux repères horizontaux, et 4 repères verticaux par le menu "Affichage -> Nouveau Repère..." (répétez l'opération autant de fois que nécessaire pour arriver au compte).

Allez maintenant on va placer tout ce petit monde !
On va donc déplacer les 8 repères un par un, de façon à avoir quelque chose du genre (placez les approximativement pour le moment) :

Chaque hélice forme un croisement avec le contour du rond. Il va vous falloir retrouver ces croisements, et placer les repères pile poil dessus !
Ca va être dur, il va peut être falloir vous y reprendre à plusieurs fois, mais je ne peux pas être d'une grande aide pour vous ici. Le seul conseil que je peux vous donner, c'est d'utiliser le zoom...

Etape 6 : Création du script pour l'animation
Bon on va pouvoir passer aux choses sérieuses !
L'animation va être divisée en une dizaine d'images, où les hélices vont se déplacer de 5° à chaque fois.
Pour ne pas avoir à répéter la transformation sur chaque hélice pour chaque fragment de l'animation, nous allons créer un script qui va enregistrer tous les mouvements que nous allons faire à partir de maintenant.
On va donc faire une fois le changement d'angle sur chaque hélice, puis nous utiliserons le script pour qu'il le répète autant de fois que nous le voudrons !

Sélectionnez l'onglet "Scripts" qui se trouve par défaut à côté de l'onglet "Historique". Si vous ne le voyez pas, allez dans le menu "Fenêtres -> Scripts" (raccourci ALT + F9).
Cliquez sur l'icône en bas de la fenêtre de scripts "Commencer un nouveau script" : , et nommez le "RotationHelices".
Désormais, toutes les actions que vous effectuerez seront enregistrées. Si vous faites une fausse manipulation, vous pouvez toujours revenir en arrière en décochant la case qui correspond à l'action dans l'onglet "Scripts".

ZOOMEZ A FOND de façon à voir le calque "Hélice 1" + le 4ème repère horizontal en partant du haut + le 1er repère vertical en partant de la gauche.
Sélectionnez le calque "Hélice 1", et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
Placez votre point de référence au niveau du croisement que forment les 2 repères précédement cités.

Appliquez une rotation de -5° par le menu qui se trouve en haut de l'écran, puis validez la transformation.

Il va falloir faire de même pour tous les autres calques d'hélice, en prennant à chaque fois le croisement des repères suivants, en tournant dans les sens des aiguilles d'une montre.
Par contre, faites attention ! Je dois vous faire remarquer que le calque "Hélice 1" ne se trouve pas avant le calque "Hélice 2" si l'ont tourne dans le sens des aiguilles d'une montre !

Pour vous y retrouver, voici les calques et leur correspondance.
Le trait bleu montre l'endroit où vous devez mettre votre point de référence pour chaque calque.

Lorsque vous avez enfin terminé la rotation de tous les calques hélices, vous remarquerez que ça dépasse un peu sur les bords.
Nous allons corriger cela en 2 secondes !
Récupérez la sélection du calque "RondCentral".
Faites un clic droit sur votre sélection, et sélectionnez l'option "Intervertir" (raccourci MAJ + CTRL + I).
Maintenant, sélectionnez chaque calque d'hélice l'un après l'autre, et appuyez sur la touche Suppr. à chaque fois.
Déselectionnez, et appuyez enfin sur le bouton d'arrêt dans l'onglet "Script" :

Etape 7 : Répétition du script, et création du gif
Nous avons créé un script que nous allons pouvoir réutiliser pour qu'il refasse toutes les opérations que nous avons enregistré.
Enregistrez votre image en cours en la nommant par exemple "Animation-1" .

Ensuite, appuyez sur le bouton d'exécution du script (vérifiez bien que c'est le script que nous avons créé qui est sélectionné) :

Enregistrez cette nouvelle image sous "Animation-2".

Répétez cette opération n fois en enregistrant les images sous le nom "Animation-n", jusqu'à ce qu'on ne voit plus les hélices à l'intérieur du rond.

Vous pouvez désormais utiliser ces images dans un éditeur de gif pour créer votre animation !
Lorsque vous aurez maîtrisé la technique, vous pourrez facilement personnaliser l'animation en rajoutant un texte en fondu, etc...

Merci à tous ceux qui auront lu ce tutorial jusqu'au bout, et là je vais me coucher parce que j'ai passé 3 heures à le rédiger :mrgreen:

C'était Animation Diaphragme par Derzone

super tuto ! merci beaucoup ! :9:

Salut,voila j'ai essayé le tuto mais une fois le script terminé comment tu fait pour l'animé par ce que je ne siai pas comment faire.
Merci d'avance.

Tuto très intéressant

Ouai bonn boulot pour l'explication.
Nice tuto.

Très bon tuto. Très bien expliquer. Juste la fin sur le script je n'ai pas tout compris, il bugait au moment ou je lui demandait de supprimer les bout en trop. Donc je l'ai fait manuellement pour chaque image et arrêter le script au truc des 5°.

[Tuto ImageReady] Animation Diaphragme Thxrz1

[Tuto ImageReady] Animation Diaphragme Thxrz1

Magnifique ce tuto! Franchement bravo!

bouuuuuuuuuuuuuuuuuuuuuuuuu -9999999999999999999
( moi 9puisance 1000000000000000000000...)

je trouve ce tuto super mais jarrive pas a changer les couleur du calques a letape 3, quelqu'un peut m'aider ?

PS : je debute donc je connait pas bcp

Merci mais je ne vois pas les sreens X_x.. quelqu'un pourrait-t-il m'aider svp ?

Je ne comprends pas ce que tu appelles "image" à nommer animation1, ni comment lancer le script!

oui je ne suis pas douée!

Je pourrai le faire manuellement mais ça ne m'aiderais pas pour l'anim' que je veux faire qui est bien plus compliquée, et où le script m'est indispensable!

Je te remercie d' avance pour ton aide!

» animation d'une porte [facile]
» bann en flash avec imageready!
» Tuto interface
» traduction de tuto:
» tuto engrenages