COMMENT CREER VOS ANIMATIONS

Si vous avez déjà vu mes animations, vous devez éprouver une sorte de jalousie (comment ça j'ai les chevilles qui enflent ?). Bon, autrement si vous aussi vous voulez réaliser de superbes animations, rien de plus simple : lisez ce tutorial.

Ben prog
Dernière Maj. : 20/11/2003


INFORMATION : Attention au simple fait que je ne suis qu'un amateur (un amateur expérimenté quand même) et que mes conseils ne sont pas forcément les meilleurs, cependant, je suis sur qu'ils fonctionnent tous, puisque testés personnellement. Ce tutoriel ne parlera pas de l'animation complexe, comme au cinéma (même si je sais faire, l'expliquer est un tout autre problème) mais de l'animation informatique simple (que je désignerais par AIS ) ou peu évoluée.


SOMMAIRE :
- Les animations que j'ai déjà réalisées
- L'animation en générale
- Les logiciels nécessaires
- La procédure de création d'animation
- Conclusion

LES ANIMATIONS QUE J'AI DEJA REALISEES

 Les animations que j'ai créés peuvent être séparées en quatres parties : (le site actuellement en construction, certaines animations - à vrai dire toutes sauf les smileys - sont indisponibles)

Les animations réalisées grâce au logiciel Flash au format gif :
- La mine anti-TT
- Les effets de la mine sur Guti

Les animations réalisées grâce au logiciel Gif Movie Gear au format gif :
- Le piratage du forum de Micro-Hebdo
- Une multitude de smileys

Les animations réalisées grâce au logiciel Flash au format Flash (ces animations, malgré qu'elles soient relativement simples, ne peuvent être qualifiées d'AIS car elles contiennent une bande sonore) :
- Une reprise de la BD Calvin & Hobbes

Les animations en 3D qui sont des animations complexes (donc, comme je l'ai dit plus haut, je n'en parlerais pas), pour plus de détails à ce propos cliquez là.

Les trois premières animations ont été réalisées pour le forum de Micro-Hebdo dans un certain contexte, l'essentiel n'est pas de connaître ce contexte, mais de voir ce qui est possible de réaliser dans le domaine de l'AIS.

Pour plus de renseignements à propos des animations que j'ai déjà réalisées, cliquez là.

Retour en haut de page


L'ANIMATION EN GENERALE

 Introduction :
L'animation est un terme relativement vague, cela peut-être de l'animation cinématique, virtuelle en 3D, ... mais ce qui nous intéresse, l'AIS, a beau être basique comparée à ces techniques, mais cependant le fond reste le même : créer des objets, les modifier et les mettre en mouvement. C'est le principe même de l'animation.

Le fonctionnement des animations :
L'AIS est une animation comme une autre : c'est à dire qu'elle est composée de plusieurs images, qui, mises les unes après les autres donnent l'animation. Regardons un exemple d'animation (on va prendre un smiley assez simple) :

Si on regarde de plus près (et surtout si on ralenti l'animation) on voit effectivement que l'animation est une succession d'images :

On voit bien la décomposition d'images, l'animation est en réalité la succession de ces images :

Le rôle principal des logiciels d'animation n'est donc pas de créer l'animation en elle-même, mais plutôt de créer un enchaînement d'images. Bien sûr, certains logiciels d'animations sont totalement autonomes et peuvent permettre de créer les animations du début jusqu'à la fin (comme flash par exemple), mais d'autres ne se contentent que de créer un enchaînement d'images (il faut donc créer les images avant d'utiliser le logiciel) avec certaines petites options (comme gif movie gear). Nous verrons plus tard comment utiliser ces logiciels.

Les formats d'animations :
On a vu la technique utilisée pour les animations, maintenant, on va voir le format d'animation. Comme beaucoup de fichiers, le format est assez déterminant sur plusieurs critères comme le contenu, la taille, la qualité, ...
Dans ce tutoriel, nous ne verrons que deux formats, le gif et le flash (ce sont deux formats relativement simples et adaptés à l'AIS, cependant le format flash, selon son contenu, peut sortir de la catégorie de l'AIS, car il peut offrir beaucoup plus de possibilité, comme une bande sonore, interactive, ...). Ces deux formats ont chacun des avantages comme indiqué dans le tableau ci-dessous :

Format Avantages du format Inconvénients
GIF - la petite taille (en octet) des animations aux dimensions réduites
- la transparence avec le fond de la page web possible
- la compatibilité avec les navigateurs sans nécessité de telecharger un petit logiciel pour les exploiter 		- la taille (en octet) des animations avec de grandes dimensions
- la qualité pas toujours bonne (selon le logiciel utilisé)
- l'absence de prises en compte d'éléments extérieurs (élement interactif comme le clique des internautes)
- l'animation limitée au visuel (impossibilité par exemple d'incorporer du son)
FLASH - la taille (en octet) des animations avec de grandes dimensions (cependant, vous verrez qu'une animations avec de grandes dimensions peut occuper tout de même beaucoup de place)
- la de prises en compte d'éléments extérieurs (élement interactif comme le clique des internautes)
- l'animation qui peut être audio-visuel (voir plus)
- la bonne qualité générale
 - la nécessité de telecharger un logiciel pour les exploiter


Avec ce tableau, nous pourrions penser qu'il vaut mieux ne créer que des animations flash, mais il ne faut pas oublier les avantages offerts par le gif notamment la transparence et la taille pour les petites animations.

Tandis que le logiciel Gif Movie Gear ne peut créer que des animations gif, le logiciel flash peut lui créer du flash, du gif et d'autres formats, cependant, ce n'est pas parce qu'il permet de créer une grande variété de formats et qu'il possède un plus grand nombre d'options, que c'est le meilleur, gif movie gear a aussi ses avantages et au fur et à mesure de votre progression dans le domaine de l'animation, vous découvrirez qu'il vaut parfois mieux utiliser l'un que l'autre selon ce que l'on veut faire.

Retour en haut de page


LES LOGICIELS NECESSAIRES

 Comme vous avez pu le voir précédemment, je cite deux logiciels : Gif Movie Gear et Flash. Ce sont les deux principaux logiciels d'animations que j'utilise. Personnelement j'utilise la version 3 de Gif Movie Gear et la version 5 de Flash (je sais pas si il y a de nouvelles versions, mais moi je garde celles-ci - du moins pour le moment -). Ces deux logiciels (ou des versions plus avancées) sont diponibles en telechargement sur www.telecharger.com, ce sont tous les deux des sharewares limités à 30 jours.

Ceci dit, pour l'utilisation de gif movie gear (GMG), il est nécessaire de disposer d'un logiciel de dessin permettant de créer des images fixes (pas obligatoirement du gif, mais ce format est conseillé si vous voulez utiliser la transparence), car GMG ne permet pas de créer ses propres images : il se contente de créer l'enchaînement entre des images faites préalablement. Personnellement, le logiciel que j'utilise pour créer ces images fixes est Photoshop.

Quand au logiciel flash, il dispose de tous les outils nécessaires pour être totalement indépendant, ce qui n'exclue pas la possibilité d'importer des images extérieures.

Retour en haut de page


LA PROCEDURE DE CREATION

 Venons maintenant à ce qui constitue réellement l'animation : sa création.

Dans ce dernier chapitre, nous aborderons le fonctionnement des logiciels cités.

Utilisation de Flash :
Je ne détaillerait pas l'utilisation de flash, car celui-ci dispose d'un très bon tutoriel réalisé lui même en flash.
Lorsque vous lancez le logiciel flash, vous devriez obtenir cet écran : (il est possible qu'il y ait des fenêtres sur la droite de l'écran, mais cela ne change en rien le contenu du logiciel)



Pour lancer le tutoriel, cliquez sur Aide, puis sur Leçon, puis sur le chapitre que vous désirez visionner. Eventuellement, si le tutoriel ne vous convient pas, ou que vous l'estimez incomplet, Flash dispose d'un fichier d'aide dans Aide / Utilisation de Flash.



Flash dispose également d'exemples que vous pouvez voir, pour cela, allez dans Aide / Exemples et sélectionnez un exemple.

Juste une information, pour enregistrer votre animation, allez dans Fichier / Enregistrer sous et enregistrez l'animation dans le répertoire que vous souhaitez, un premier fichier falsh sera créé. Retournez une seconde fois dans Fichier puis cliquer sur paramètres de publication, selectionnez le(s) format(s) souhaité(s) (comme le gif par exemple), configurez si nécessaire puis cliquer sur Publier. L'animation devrait être enregistrée dans le même dossier que vous aviez sélectionné précedemment.

Utilisation de Gif Movie Gear :
Je m'attarderais plus sur ce logiciel car son tutoriel est moins bien fait que flash et qu'il est plus facile d'expliquer son fonctionnement.

Pour commencer, lancez GMG, vous obtiendrez cet écran :



Comme je l'ai dit précédemment, GMG n'est pas capable de créer ses propres images, ils faut donc les importer, pour cela, cliquez sur le bouton :



Un écran s'affiche, il vous suffit maintenant de choisir le répertoire où se trouve vos images préalablement réalisées, de sélectionner une ou plusieurs image(s) et de cliquer sur ouvrir.



Vous obtiendrez vos images dans plusieurs cadres, chaque cadre correspondant à une image comme dans cet exemple (nous garderons le même exemple de la banane) :



Ensuite, il s'agit de paramétrer la durée de chaque image. Chaque image peut-être d'une durée différente, pour cela, il vous suffit de cliquer sur l'image voulue et de modifier la durée (indiquée en millisecondes) dans ce cadre :



Si vous voulez, vous pouvez également uniformiser la durée de tous les cadres en cliquant dans Animation/Propriétés/Cadre Global et modifier la valeur indiquée dans le cadre animation "1/100e de secondes d'intervalle après l'image"

Si vous voulez voir le résultat, il vous suffit de cliquer sur ce bouton, un cadre s'affiche avec votre animation telle qu'elles est actuellement :



En principe, le plus gros de l'animation est fini, sauvegadez votre travail en cliquant sur Fichier, puis sur Sauvegarder l'animation gif sous ... . Vous pouvez considérer que votre animation est finie, néanmoins, vous pouvez peaufiner votre animation en utilsant plusieurs option disponibles avec le logiciel.

La transparence de l'animation :
On a vu plus haut que la transparence de l'animation était un avantage pour le format gif, en quoi consiste-t-elle exactement ?

La transparence se présente sous deux aspects : la transparence avec le fond et la transparance avec le cadre précédent. Illustrons ceci :

Dans le premier cas, la transparence avec le fond peut être illustrée comme ceci :
Premier cas, l'image n'a pas un fond transparent :
Second cas, l'image a un fond transparent :


On voit donc bien l'intêret de rendre transparent l'arrière plan, cela permet à l'animation de mieux s'incorporer dans le fond de la page.

Second cas : la transparance avec le cadre précédent
Premier cas, animation sans transparence avec le cadre précédent :
Second cas, animation avec transparence avec le cadre précédent :


On voit bien que dans la seconde animation une image laisse apparaître une partie de l'autre image, cette partie correspond à toute la zone laissée transparente sur la première image, c'est a dire que toute la zone qui n'est pas remplie par un pixel de couleur (la zone transparente) laisse apparaître les restes de l'image précédente. On pourrait penser alors qu'il est stupide d'utiliser un telle option : c'est faux, regardez, prenons une animation de deux images :



Cette animation est composée des deux images suivantes :

      


Regardez, toute la zone dans le rectangle vert hachuré ne change pas d'une image à l'autre, donc, si on rendait cette zone transparente, cela permettrait de rendre l'animation moins lourde en octet (j'expliquerais plus tard pourquoi) :



Donc, l'animation est rendue moins lourde, pour savoir pourquoi, intéressons nous au système de pixels de différents formats (le bitmap et le gif).
Chaque pixels du bitmap pèse 3 octets car, tout le monde sait (même si vous savez pas c'est pareil ) qu'un octet est consitué de 8 bits, un bit est en réalité soit un 1 soit un 0, si chaque pixel pèse 3 octets, il est donc constitué de 24 bits donc de 24 chifre (1 ou 0) qui s'enchaine ce qui donne 16 777 216 possibilités de couleur. Quel que soit le pixel, il est codé comme ça donc, une image de 24 pixels par 24 pixels possède donc 576 pixels ce qui représente 1728 octets. Le gif utilise un système similaire, mais pour lui, chaque pixel ne pèsent que 1 octet soit 256 possibiltés, . Mais au même titre que les couleurs, la tansparence est considérée également en pixel, donc chaque pixel de transparenc pèse donc 1 octet. Mais le principal avantage du gif, c'est que sur des étendus de plusieurs pixels consécutifs de même couleur, imaginons une tendue de 24 pixels x 24 pixels de même couleur, l'étendue ne mesure pas 576 octets comme on pourait le penser, mais seulement 63 octet, ce qui représente un gain de place relativement important pour de grandes images. Le fait que la zone soit transparente ne change en rien le système et le gain de place se fait sans problème (enfin sans problème, c'est vite dit, car en réalité le système est un peu plus complexe que ça, mais l'idée générale reste la même)

C'est pourquoi la maîtrise de la transparence est nécessaire. Dans Gif Movie Gear, les options correspondant à ce système de transparence sont :



Le bouton 1 correspond à une transparence de cadre, d'un cadre à l'autre toutes les zones transparentes seront remplies par les zones du cadre précédent situées au même endroit.

Le bouton 2 correspond à l'absence de transparence, les cadres seront traités individuellement sans laisser apparaître quoique ce soit du cadre précedent, cependant, si le cadre possède des zones transparentes, celles-ci laisseront apparaître le fond de la page web.

Le bouton 3 est théoriquement assez complexe, il applique la meme propriété que le cadre précedent sans toutefois être considérée comme une image de fond. Vous n'avez pas compris ? C'est normal, c'est pour ma part assez difficile à expliquer, on va donc prendre un exemple pour que vous compreniez mieux.
Prenons quatre image qui constituent une animation, la première image possède la seconde propriété (donc pas de transparence), la seconde, possède la propriété 1 (transparence). Donc toutes les zones transparentes de cette seconde image afficheront celles au même endroit de la première image (vous suivez ?). Bon maintenant rajoutons une troisième image qui possèdent cette troisième propriété. Donc comme je l'ai dit, cette image s'adapte à la propriété du cadre précédent. Donc dans notre cas, elle possèdera la première propriété, c'est-à-dire transparence avec le cadre précédent. Donc toutes les zones transparentes de cette troisième image laisseront apparaître une partie de la deuxième image. Cependant comme je l'ai aussi dit un peu plus haut, elle ne sera pas considérée comme une image de fond. C'est-à-dire (et c'est là où c'est malin ) que si on rajoute une quatrième image avec la propriété 1 (transparence avec le cadre précédent), les zones transparentes de cette quatrième image n'afficheront pas les parties de la troisième image, mais de la seconde (J'éspère que vous avez compris parce que je ne suis pas en mesure de mieux vous l'expliquer). Egalement si on change la propriété de l'image 2 en choisissant l'absence de transparence, l'image 3 aura également cette propriété et l'image 4 (sans modidifier sa propriété) affichera donc une partie de l'image 2. Voilà, j'ai fait du mieux que j'ai pu pour expliquer !!!

Les boutons indiqués ne s'appliquent que cadre par cadre, pour généraliser l'option à toute l'animation, cliquez dans Animation / Propriétés / Cadre Global et modifier la valeur correspondant à "avant d'afficher le cadre suivant"
           "Aucune méthode de suppression" et "Laissez tel quel" correspondent à la première option
           "Couleur d'arrière plan" à la deuxième
           "Retour cadre précédent" à la troisième option.


Voilà, les notions principales vous sont acquises en principe, il ne me reste plus qu'a détailler les diverses options mineures que je connais.

Pour cela, reprenons la cadre général de GMG



1 : Fonctions respectives Nouveau / Ouvrir / Enregistrer
2 : Insérer cadre(s) supplémentaires(s) à l'animation
3 : Fonctions respectives Couper / Copier / Coller / Supprimer le cadre sélectionné / Annuler / Répeter
4 : Ces boutons permettent de visualiser l'animation en cours
5 : Fonction respectives de Zoom avant / Zoom arrière / Retour aux dimensions réelles
6 : Aide

7 : Propriétés du cadre
8 : Choisissez le cadre que vous voulez selectionner
9 : Edition de la durée de chaque cadre
10 : Fonctions de transparence
11 : Propriétés de l'animation
12 : Nombre d'itérations, c'est-à-dire le nombre de fois que se répetera l'animation, si vous mettez 0, cela signifie qu'elle se répetera à l'infini
13 : Editer palette global : premet de modifier les couleurs de l'animation. Notez que cette option est forte pratique si vous voulez modifier une couleur et qu'elle suive l'évolution de l'animation, c'est à dire que cette couleur sera modifiée pour tous les cadres.

14 : Cadre actuellement selectionné
15 : Dimensions de l'animation (que vous pouvez modifier dans les propriétés)
16 : Durée de l'animation
17 : Taille de l'animation (en octet) et le temps de télechargement avec le modem indiqué (vous pouvez changer de modem dans Affichage / Temps de télechagement)
18 : Zoom actuel

Les boutons que je n'ai pas indiqué sont les boutons dont je ne connais pas bien l'interêt. (Eh oui, je sais pas tout ).

Bon voilà, j'ai commenté l'essentiel des fonctions de GMG, maintenant, il en reste d'autres, mais je vous laisse le soin de les découvrir.

Retour en haut de page


Voià, mon tutoriel est terminé, j'espère qu'il est assez clair et qu'il vous permettra de réaliser des animations meilleures que les miennes ! (Euh ... faut pas exagérer non plus ). Bon, ceci dit, je reste, dans la mesure de mes possibilités (c'est-à-dire quasiment tout le temps), disponible pour tout renseignements, remarques, suggestions ou critiques pour cela envoyez moi un e-mail à l'adresse : benprog@paicai.net (Eventuellement, si vous faites parti du forum de Micro-Hebdo, vous pouvez m'en faire part sur ce topic : Fan Club de Ben Prog ... Eh oui, j'ai un Fan Club)



Bonnes animations !



Retour en haut de page


Retour à la page d'accueil