Nous allons maintenant découvrir un des travaux essentiels d'un webdesigner : la création d'animation. Vous verrez ici comment créer ce que l'on appelle un "GIF animé", petite animation qui sert trés souvent de base à la création de bannières publicitaires ou de boutons animés. Dans le cas présent l'exercice demande de bonnes notions de dessin, mais il est adaptable à tous type de sujet.

   L'exercice a pour but la découverte des possibilités d'ImageReady, de la palette animation et des options qui lui sont associées.
Étape 1 : Création du personnage.

Nous décomposerons dans cet exercice la course d'un personnage - en l'occurence Hulk - dont nous allons dessiner deux phases du mouvement. Aprés avoir scannés et mis en couleur les dessins ( voir méthode dans le tutorial 3 ), voici le résultat sous Photoshop : deux fichiers distincts ouvert dans deux fenêtres différentes. Au besoin retravaillez la couleur de fond, puis faites les glisser l'un sur l'autre par l'outil de déplacement.
Étape 2 : Ouverture d'ImageReady.

Une fois ce travail exécuté, basculez sous ImageReady à l'aide de la commande en bas de la palette Outils.

Étape 3 : Les calques.

A ce stade de l'exercice, vous possedez deux calques distincts. ImageReady, dont l'interface est calquée sur celle de Photoshop, vous permet de les visualiser dans la palette Calques.

Étape 4 : Les mouvements.

Pour pouvoir animer tout ça il vous manque encore quelques étapes du mouvement. Pour les obtenir il vous suffit de dupliquer une fois chaque calque puis de faire Edition/Transformation/Symétrie axe horizontal sur chaque copie.
ATTENTION : dans le personnage tout n'est pas symétrique. Par exemple la mèche de cheveux sur le front que vous devrez redessiner dans le bon sens.

Étape 5 : L'animation.

Nous allons maintenant nous servir de la palette Animation. C'est une palette toute en longeur que vous faites apparaitre par Fenêtre/Animation.
Tout comme il est possible de créer de nouveaux calques dans la palette Calques, il est possible de créer de nouveaux "états" d'animation. Il nous en faut 4, un par mouvement.
Une fois cette opération effectuée, mettez vous sur le 1er état ( en bleu ) et veillez bien à ne faire apparaitre que le 1er calque dans cet état...


 

Et ainsi de suite pour chacun des mouvement : dans l'état lui correspondant, ne faites apparaitre que lui.


ATTENTION : toute modification "de dessin" sur un calque dans un état entrainera sa modification dans tous les états de l'animation même ceux ou il est masqué.

 





Étape 7 : Le temps.

Une fois les états créés, il vous faut leur donner un temps d'afichage afin de rendre votre animation plus fluide et d'en contrôler la vitesse. Par défaut le temps est réglé sur "sans délai" ce qui donne un mouvement trés rapide et agressif pour l'oeil.
le temps d'affichage est inscrit sous les vignettes de la palette Animation, il vous suffite de maintenir la souris cliquée pour faire dérouler le menu. Il n'est pas besoin d'augmenter énormément le temps pour obtenir un bon résultat ( ici 0,1 sec ). dans notre exemple, tous les états ont le même temps d'affichage mais ce n'est pas une règle.

Étape 7 : Résultat.

Et voilà le travail : un ptit Hulk en mouvement. pour avoir une idées de l'anim telle qu'elle apparaitra faites Fichier/Aperçu dans../votre navigateur.
Il s'agit là d'une animation simple, image par image, avec peu de calques. mais l'on peut imaginer bien sûr des animations plus complexes : il suffit juste de garder à l'esprit que le temps de chargement ne doit pas être trop long ni l'image trop lourde. c'est pour cette raison que les animations GIF sont souvent petites à l'écran.
copyright MikeGraphic 2005