I) Présentation
Comme quelques uns d'entre vous me demande de leur apprendre l'animation flash, je me décide à vous faire ici un petit tuto basique. Personnellement, j'ai commencé avec ça en cours et j'ai appris en suite tout seul en bidouillant. Même si cela peut vous parraitre obscur au début, chiant et long, je vous garantit qu'a force de pratique ça va tout seul. Maintenant pour ma part ce qui me prend le plus de temps c'est de faire les visuels, et je fais l'animation sans réelle réflexion.
Tout d'abord, le flash c'est quoi? Flash est un logiciel d'animation 2D et non 3D. On peut simuler de la 3D (une fausse 3D) avec mais c'ets long et extrêmement fastidieux.
La particularité du flash est qu'il est extrêmement léger.
Flash fonctionne principalement avec des dessins dit vecoriels. Bien que l'on puisse animer aussi avec des images bitmap, png, jpeg etc... mais c'est déconseillé car ça à tendance à laguer et à alourdir considérablement.
Le dessin vectoriel est, comme sur dofus (les personnages, les monstres) un dessin sur lequel on peut zoomer à l'infini sans que celui-ci ne pixelise, tout simplement car il s'agit de points et les courbes sont recalculés entre ces points. Les avantages sont donc: aucune pixelisation et une animation légère. Les inconvénient sont que les dessins restent simples avec des couleurs simples (peu de degradés, d'ombres, de transparence etc....) et que si l'on met trop d'éléments il peut y avoir des ralentissements.
Flash est utilisé principalement pour deux choses: faire de l'animation toute simple comme les animations que je fais ou par exemple notre bannière, mais l'on peut aussi faire de l'interactivité avec l'utilisateur. Ainsi avec flash on peut faire des boutons des formulaires et des interactions avec la souris (par exemple les jeux, les sites entièrement en flash ou encore les bandeau publicitaires qui réagissent à votre souris.)
Voilà, je clos donc cette petite présentation et je vais donc maintenant vous faire la présentation du logiciel en lui même.
II) L'interface
Pour ma part j'utilise la version Adobe Flash CS3. Une version fort similaire à toutes les précédentes. Je ne connais pas encore la CS4 mais elle ne doit pas être vraiment différente de la CS3.
Dans un premier temps quand vous allez ouvrir votre logiciel, vous allez avoir le choix entre plusieurs type de fichier. On utilise généralement soit un fichier AS2 ou AS3. L'AS signifie Action-script, c'est un langage propre à Flash qui permet donc de mettre de l'interactivité dans vos création ou par exemple un préchargement.
L'AS2 est l'ancienne version de l'action script qui est totalement différente de l'AS3 (plus complexe à mon gout) aussi, si vous choisissez de mettre du code dans votre fichier, choisissez bien la version que vous voulez car vous ne pourrez plus changer après et l'AS2 n'est pas compatible avec l'AS3 et vice versa. Néanmoins pour le moment, nous n'avons absolument pas besoin de ça et le code est déjà un niveau supérieur, ce qui nous intéresse c'est l'animation.
Créez donc votre fichier.
Je vais vous détailler quelque peu l'interface du logiciel:
Donc comme vous le voyez l'interface est tout ce qu'il y a de plus banal. Sur votre gauche, vous avez des outils de dessin et de selection que l'on trouve sur n'importe quel logiciel de création graphique.
Sur la partie supérieur au centre, vous avez la disposition des calques avec la time line. C'est à dire que là où vous voyez inscrit 1, 5, 10, 15..., il s'agit des images. Par exemple si vous avez configuré le logiciel sur 12 images par secondes (12 i/s) il vous faudra bêtement 12 images sur votre time line pour faire une seconde. Je reviendrai plus tard sur les images.
Encadré en vert, vous avez tous les outils permettant de créer des calques et des dossier, ainsi que les supprimer. Vous remarquerez qu'il y en a un que vous n'avez sans doute jamais croisé, il s'agit du guide de mouvement. Sans entrer dans les détails, disons que vous dessinez une courbe sur ce calque et que l'élément désiré suivra cette courbe. J'y reviendrai plus tard.
Encadré en bleu, vous avez les informations sur le format du fichier. Si vous double cliquez sur cette zone cette fenêtre devrait apparaitre:
Cette fenêtre est très importante, c'est la première que vous devez consulter quand vous faites votre animation. Les deux choses les plus importante sont la taille du document ou plutôt de la scène, et la cadence. Plus la cadence est élevée, plus votre fichier risque de peser lourd mais plus votre animation sera fluide et agréable. En général une animation est entre 12 et 30 images par secondes. Par défaut, je met 24 (24 i/s étant la cadence des films que vous regardez tous les jours)
Enfin vous pouvez choisir la couleur de fond de votre animation ce qui peut être utile. De base un fichier flash n'est pas à fond transparent sauf s'il on met un code dans la balise HTML permettant d'afficher le flash. (wmode="transparent" pour les curieux)
Au centre vous avez ce qu'on appelle la scène. C'est sur cette scène qu'apparaitrons vos éléments et votre animation.
Sur votre droite vous avez différents panneaux. Je passe l'explication sur le nuancier de couleurs, je pense que vous êtes assez grand.
En dessous, encadré en jaune, vous avez votre bibliothèque. Chaque élément de votre animation est appelé symbole et tous les symboles sont contenus dans la bibliothéque. Enfin, tout en bas de la bibliothèque, entouré de rouge, vous avez les outils qui vous permettent de créer des symboles, des dossier pour les classer et de les supprimer. Il faut savoir qu'on arrive vite à des centaines de symboles même pour une animation très simple.
Pour en finir sur l'interface pour le moment, il reste le bloc en bas au centre avec les propriétés. C'est ici que l'on va choisir les mouvements et effets à appliquer à l'animation.
III) Le fonctionnement de l'animationLe mieux pour comprendre comment fonctionne l'animation, c'est d'en faire une!
Pour faire une animation, il faut des symboles. On va donc en créer un. Pour cela deux manières. La première est soit de cliquer sur l'icône nouveau symbole en bas de la bibliothèque. Cette fenêtre devrait apparaitre:
Il est possible que la fenêtre soit plus petite, c'est simplement parce que vous n'avez que les options de base, ça tombe bien on a pas besoin de plus. Entrez donc un nom "Bouboule" ou "Honey", ce sera parfait. Laissez le type clip. Personnellement je n'ai jamais utilisé le type graphique.
Vous remarquez qu'un nouveau symbole est apparu dans votre bibliothèque, c'est magique! De base lorsque vous créez un symbole vous vous trouvez dedan directement. Si ce n'est pas le cas, double cliquez sur le symbole dans la bibliothèque.
Petite astuce pour savoir dans quel symbole vous vous trouvez, regardez ici:
La séquence 1 est la scene de base, puis à coté vous avez les symbole. Ainsi on peut voir que je suis dans le symbole bouboule contenu dans la séquence 1. Il vous suffit donc de cliquer sur "séquence 1" pour revenir à la base du document.
Simplement pour le moment, votre symbole est vide! On va le remplir, utilisez l'outil ovale dans la barre d'outils. (pour le trouver restez appuyé sur l'outil rectangle et il devrait apparaitre). Avant de le tracer choisissez une couleur de contenu et de contour. Pour cela regardez dans le bloc de propriétés en bas au centre. Une fois que vous avez choisis, tracez votre cercle.
Astuce: gardez la touche MAJ enfoncée lorsque vous tracez le cercle pour que ce soit un cercle parfaitVous voila donc avec un joli cercle (le mien est bleu... on s'en fout mais je tenais à le dire). Nous allons maintenant l'animer. Avec un peu d'imagination nous allons le transformer en ballon qui rebondit.
Retournez sur votre scène principale en cliquant sur "séquence 1" comme dit précédemment. Votre scène est vide. Observez votre timeline vous n'avez qu'une image blanche dans laquelle apparait un petit rond. On appelle ça une image clé vide.
Cliquez sur votre symbole dans la bibliothèque et faites le glissé sur la scène, votre rond apparait. Si la taille ne vous plait pas, vous pouvez toujours utiliser l'outil de transformation libre (troisième outil en partant du haut) pour l'agrandir ou le reduire. Petite parenthèse: Si vous utilisez cet outil, un rond blanc apparaitra, c'est "l'axe" du symbole. Vous pouvez le cliquer pour le changer. Ainsi , si vous voulez l'agrandir, il le fera en fonction de l'axe, mais l'axe change aussi la façon dont le symbole effectue un mouvement. Gardez ça en tête pour le moment.
Pour l'instant l'axe de notre boule est au centre et c'est très bien comme ça. Placez la boule en bas de votre scène.
Regardez maintenant de nouveau votre time line (appelée aussi scénario), vous remarquez que la première image est devenue grisée, ce qui veut dire qu'il y a un élément sur cette image.
Je vais maintenant vous expliquer comment faire un mouvement. Flash est un logiciel qui fonctionne par images clés. Et entre ces images, il calcule le mouvement effectué. Pour le moment notre ballon est au point A sur la première image clé. Dans votre Scénario, cliquez sur l'image 10 et appuyez sur la touche F6 pour créer une nouvelle image clé. Logiquement vous devriez avoir ça:
Il y a donc une image clé à la première et à la dixième image, les images clés étant symbolisées par le petit point .
Restez donc sur la deuxième image clé et sélectionnez votre boule. Bougez la ensuite et mettez la tout en haut de votre scène. Il est temps de mettre du mouvement.
Cliquez sur une image entre la première et la neuvième, avant la deuxième image clé quoi. Puis, allez dans le bloc "propriétés" qui devrait se présenter ainsi:
Là encore, beaucoup de choses en apparence mais rien de complexe. Vous pouvez ici choisir le type d'interpolation, c'est à dire ce que va faire flash entre les deux images clés. Soit faire un mouvement, soit changer la forme.
L'interpolation de forme est extremement rarement utilisée car elle a tendance à faire n'importe quoi, aussi vous pourrez tester mais je ne l'ai utilisé qu'une seule fois dans toute mes animations.
Choisissez donc interpolation de mouvement. Aussitôt, vos image du scénario devraient changer, devenir bleues avec une flèche comme ceci:
Si c'est le cas vous avez tout bon. Avant de continuer je vais vous expliquer rapidement à quoi servent les options lié à l'interpolation de mouvement.
En dessous du choix de l'interpolation vous avez "accélération". C'est à dire que le mouvement sera progressif ou dégressif en fonction de la valeur que vous mettrez. Pour notre ballon mettez la à 100, il commencera son mouvement rapidement et décélérera dans sa montée.
La rotation est très utilisée. C'est là que l'axe peut avoir une grande importance car la rotation s'effectuera en fonction de celui-ci. Vous pouvez donc choisir le sens de rotation et le nombre de rotations effectués entre les deux images clés. Bon faire une rotation sur notre ballon servirait pas à grand chose mais si vous voulez essayer, faites un carré et faites le tourner, essayez de changer l'axe pour voir les résultats.
Concernant l'axe et les interpolations de mouvement: Faites extremement attention que l'axe reste le même de la première à la deuxième image clé, sans quoi, Flash ne saura pas comment gérer ça et vous fera n'importe quoi au niveau du mouvement. (Rappel si vous l'avez oublié: l'axe se modifie avec l'outil "transformation libre")Revenons aux propriétés de l'interpolation de mouvement:
En dessous vous avez une série de cases "orienter la trajectoire", "Synch" et "Accrocher". Celle-ci sont utilisées avec des guides de mouvement (cf la partie sur les calques précédemment) Accrocher signifiant que le symbole s'accrochera au guide de mouvement grâce à son axe.
Enfin à droite, vous avez la gestion du son. Ce n'ets pas lié à l'interpolation de mouvement mais à l'image clé, ainsi vous pouvez jouer un son à l'image clé tant que celui-ci a été importé dans votre bibliothèque.
Maintenant testons votre animation. Pour ce faire, vous pouvez aller dans "fichier"> "publier" et aller chercher votre fichier swf (qui est le format d'animation) dans le dossier dans lequel vous avez enregistrer le fichier .fla (fichier du logiciel flash comme psd pour toshop) ou faire "aperçu avant publication). Néanmoins il y a une technique plus rapide avec les raccourcit clavier: il vous suffit d'appuyer sur "ctrl + entrée" et vous aurez directement votre aperçu.
Normalement votre ballon devrait bouger de bas en haut. On va maintenant terminer le rebond. Fermez la visualisation et allez sur votre scénario. cliquez droit sur la première image et "copiez l'image". Puis allez à l'image 20 et collez la. Cela vous permet de retrouver votre ballon dans l'état initial.
Il vous reste plus qu'a faire une interpolation de mouvement entre la deuxième et la troisième image (mettez l'accélération à -100 maintenant) et vous avez une jolie balle qui fait un rebond. Ctrl+ entrée pour vérifier le résultat et vous devriez avoir ça:
Voilà c'est très basique mais c'est déjà beaucoup vous connaissez 90% de l'animation flash rien qu'avec ça. Je vous expliquerai après comment utiliser un guide de mouvement et comment utiliser un masque.
N'oubliez pas que Flash fonctionne avec des symboles encastrés les uns dans les autres. Chaque symbole et la sequence de base peut contenir un nombre infini de calques. Et n'oubliez pas qu'un calque peut faire qu'un seul mouvement à la fois donc faites un calque par élément pour éviter tout problème.
J'espère que j'ai été assez clair et que cela vous aidera, le tout c'est de pratiquer. Je reste à votre disposition pour toute questions. D'autres tuto devraient suivre.
Ven 10 Juil - 1:09
