Apprendre à faire une animation simple dans le logiciel Flash !
Ce tutorial a pour but d'apprendre aux novices à animer un petit personnage simplement, mais nous partirons d'un personnage déjà fait, la création du personnage n'étant pas traitée ici.
Animation flash (simple, South Park Style)
I. Introduction
Dans ce tutorial, nous allons apprendre à animer simplement un petit personnage. Je précise que celui ci a été fait à partir du South Park Studio (version 2), disponible ici : http://www.planearium2.de/flash/spstudio.html
Les sources de ce tutorial sont téléchargeables ici. ("clic droit, enregistrer la cible sous"). Vous y trouverez le fichier final animation.fla, le fichier de départ depart.fla et le fichier final .swf.
II. Visualisation du contenu d'un clip
Commencez par ouvrir le fichier depart.fla, qui contient le personnage.
Si la fenêtre "Bibliothèque" (visible en bas à droite sur la capture d'écran) n'apparait pas, vous pouvez la faire apparaître en allant dans "Fenêtre", puis en cochant "Bibliothèque" (raccourci "Ctrl + L)
Une fois la bibliothèque visible, faites un clic droit sur le clip "Bonhomme"...
...et cliquez sur "Modifiez".
Nous voyons maintenant le contenu d'un clip. Il est composé de calques, qui contiennent chacun des éléments précis. Exemple, le calque appelé "Cheveux" contient les cheveux du personnage (normal, non ?).
Note : Si jamais vous vous lancez dans la création d'un personnage, pensez à toujours bien organiser vos calques et à bien les nommer, vous gagnerez du temps au moment de l'animation.
III. Insertion du personnage dans le Scénario
Nous allons maintenant procéder à l'insertion de ce personnage dans le Scènario principal. Pour cela, effectuez un "glisser-déposer" depuis la bibliothèque jusqu'au centre (à peu près, ou à un autre endroit, comme vous voulez). Renommez aussi le "calque 1" en "Bonhomme", en cliquant avec le bouton droit de la souris sur le calque puis en selectionnant "Renommer".
IV. Animation du personnage
Le moment que vous attendez est presque arrivé !
Nous constatons que dans le Scènario, il y a une timeline, tout comme les logiciels de vidéo. Mais en essayant de déplacer le curseur, vous êtes bloqué sur l'image 1. C'est tout simplement parce que l'animation est limitée à une image ! Nous allons donc l'allonger à 20 images (au lieu d'une seule). Clic droit sur la vingtième case de la time line, puis "Insérer une image".
Vous pouvez constater que le curseur de la timeline peut aller et venir sur 20 images !
La timeline étant prête, nous allons faire bouger notre petit personnage de droite à gauche (ou dans la direction que vous voulez, bien entendu). Il faut définir la position du personnage sur des images clés, positionnées sur la timeline selon nos désirs.
On peut voir qu'une image clé a déjà été créée sur la première image. Créons-en une autre à l'instant 10 ! Clic droit sur l'instant 10, puis cliquez sur "Insérer une image-clé".
Une image clé est créée. Placez le curseur sur l'instant 10 (là où vous avez créé votre image clé), et déplacez le bonhomme sur la gauche, en laissant le bouton gauche de la souris enfoncé, lachez une fois que le bonhomme occupe la bonne position :
En déplaçant le curseur, vous voyez que le déplacement du personnage n'est pas fluide. Il faut créer une interpolation de mouvement, c'est à dire que l'ordinateur calculera toutes les positions intermédiaires entre chaque image clé. Cliquez sur un instant compris entre 1 et 10 (non inclus), par exemple 5, et ouvrez la fenêtre "Propriétés" (située en bas de l'écran par défaut). Selectionnez "Mouvement" dans le menu déroulant de Interpolation.
Une interpolation est créé, qui est représentée par une fléche de gauche à droite.
Vous pouvez maintenant déplacer votre curseur sur la timeline, le mouvement est fluide (même si il est limité au nombre d'images par seconde du projet, ici 12 images par secondes).
V. Rotation, échelle du personnage
Dans cette partie du tutorial, nous allons apprendre à faire faire à notre personage une rotation et un changement d'échelle.
Positionnez le curseur à l'image 15, créez une image clé comme précédemment, et seletionnez dans la barre d'outils, l'outil "Transformation Libre" (racourci Q).
Une fois l'outil en main, positionnez le dans un coin de votre bonhomme, et le pointeur de la souris se transforme en un petit cercle avec une flèche, le symbole de la rotation. En gardant le clic gauche de votre souris enfoncé, faites pivoter le bonhomme à votre guise.
Une fois cela fait, créez une interpolation de mouvement comme précédemment, et admirez !
Maintenant, le changement d'échelle ! Créez une image clé sur l'image 20. En gardant l'outil "Tranformation Libre", essayez d'augmenter la taille du petit bonhomme, en prenant un coin et en l'étirant, par exemple. Vous pouvez voir que l'agrandissement se fait sans garder le rapport Longeur-Largeur, ce que vous pouvez voir ici :
Evidemment, on peut le faire à vue d'oeil, mais l'on va le faire avec beaucoup de précision en selectionnant une option de l'outil :
Une fois l'option "Redimensionner" activée, on constate que l'on peut régler la taille de notre personnage en gardant exactement le rapport Longeur-Largeur :
Une fois le redimmensionnement effectué, refaites une interpolation de mouvement, et le tour est joué !
VI. Exportation en .swf
L'animation terminée, cliquez dans un espace vide, pour qu'aucun objet ne soit selectionné. Allez voir dans les Propiétés de l'animation (la même fenêtre que pour l'interpolation), puis cliquez sur "Parmètres". Décochez toutes les cases, sauf la case "Flash(.swf)", et indiquez l'endroit où votre fichier .swf va être enregistré.
Une fois cela terminé, cliquez sur l'onglet "Flash" (en haut de la fenêtre), et réglez selon vos désirs, si votre fichier est protégé contre l'importation, si vous voulez que l'animation soit compressé, etc...
Finissez ce tutorial en cliquant sur "publier". Voilà, c'est fini !
L'animation finale : cliquez ici !
Ici, l'animation est jouée en boucle.
Note : Dans des animations flashs dessinées en vectoriel (c'est à dire sans images du style .jpg, ou autre...), on peut zoomer sur l'animtion sans perdre de la qualité, et on obtient un fichier très léger (dans notre cas, 4.65 ko).
Merci d'avoir lu ce tutorial jusqu'au bout, amusez vous bien !
GJ
Ce tutorial a pour but d'apprendre aux novices à animer un petit personnage simplement, mais nous partirons d'un personnage déjà fait, la création du personnage n'étant pas traitée ici.
Animation flash (simple, South Park Style)
I. Introduction
Dans ce tutorial, nous allons apprendre à animer simplement un petit personnage. Je précise que celui ci a été fait à partir du South Park Studio (version 2), disponible ici : http://www.planearium2.de/flash/spstudio.html
Les sources de ce tutorial sont téléchargeables ici. ("clic droit, enregistrer la cible sous"). Vous y trouverez le fichier final animation.fla, le fichier de départ depart.fla et le fichier final .swf.
II. Visualisation du contenu d'un clip
Commencez par ouvrir le fichier depart.fla, qui contient le personnage.
Si la fenêtre "Bibliothèque" (visible en bas à droite sur la capture d'écran) n'apparait pas, vous pouvez la faire apparaître en allant dans "Fenêtre", puis en cochant "Bibliothèque" (raccourci "Ctrl + L)
Une fois la bibliothèque visible, faites un clic droit sur le clip "Bonhomme"...
...et cliquez sur "Modifiez".
Nous voyons maintenant le contenu d'un clip. Il est composé de calques, qui contiennent chacun des éléments précis. Exemple, le calque appelé "Cheveux" contient les cheveux du personnage (normal, non ?).
Note : Si jamais vous vous lancez dans la création d'un personnage, pensez à toujours bien organiser vos calques et à bien les nommer, vous gagnerez du temps au moment de l'animation.
III. Insertion du personnage dans le Scénario
Nous allons maintenant procéder à l'insertion de ce personnage dans le Scènario principal. Pour cela, effectuez un "glisser-déposer" depuis la bibliothèque jusqu'au centre (à peu près, ou à un autre endroit, comme vous voulez). Renommez aussi le "calque 1" en "Bonhomme", en cliquant avec le bouton droit de la souris sur le calque puis en selectionnant "Renommer".
IV. Animation du personnage
Le moment que vous attendez est presque arrivé !
Nous constatons que dans le Scènario, il y a une timeline, tout comme les logiciels de vidéo. Mais en essayant de déplacer le curseur, vous êtes bloqué sur l'image 1. C'est tout simplement parce que l'animation est limitée à une image ! Nous allons donc l'allonger à 20 images (au lieu d'une seule). Clic droit sur la vingtième case de la time line, puis "Insérer une image".
Vous pouvez constater que le curseur de la timeline peut aller et venir sur 20 images !
La timeline étant prête, nous allons faire bouger notre petit personnage de droite à gauche (ou dans la direction que vous voulez, bien entendu). Il faut définir la position du personnage sur des images clés, positionnées sur la timeline selon nos désirs.
On peut voir qu'une image clé a déjà été créée sur la première image. Créons-en une autre à l'instant 10 ! Clic droit sur l'instant 10, puis cliquez sur "Insérer une image-clé".
Une image clé est créée. Placez le curseur sur l'instant 10 (là où vous avez créé votre image clé), et déplacez le bonhomme sur la gauche, en laissant le bouton gauche de la souris enfoncé, lachez une fois que le bonhomme occupe la bonne position :
En déplaçant le curseur, vous voyez que le déplacement du personnage n'est pas fluide. Il faut créer une interpolation de mouvement, c'est à dire que l'ordinateur calculera toutes les positions intermédiaires entre chaque image clé. Cliquez sur un instant compris entre 1 et 10 (non inclus), par exemple 5, et ouvrez la fenêtre "Propriétés" (située en bas de l'écran par défaut). Selectionnez "Mouvement" dans le menu déroulant de Interpolation.
Une interpolation est créé, qui est représentée par une fléche de gauche à droite.
Vous pouvez maintenant déplacer votre curseur sur la timeline, le mouvement est fluide (même si il est limité au nombre d'images par seconde du projet, ici 12 images par secondes).
V. Rotation, échelle du personnage
Dans cette partie du tutorial, nous allons apprendre à faire faire à notre personage une rotation et un changement d'échelle.
Positionnez le curseur à l'image 15, créez une image clé comme précédemment, et seletionnez dans la barre d'outils, l'outil "Transformation Libre" (racourci Q).
Une fois l'outil en main, positionnez le dans un coin de votre bonhomme, et le pointeur de la souris se transforme en un petit cercle avec une flèche, le symbole de la rotation. En gardant le clic gauche de votre souris enfoncé, faites pivoter le bonhomme à votre guise.
Une fois cela fait, créez une interpolation de mouvement comme précédemment, et admirez !
Maintenant, le changement d'échelle ! Créez une image clé sur l'image 20. En gardant l'outil "Tranformation Libre", essayez d'augmenter la taille du petit bonhomme, en prenant un coin et en l'étirant, par exemple. Vous pouvez voir que l'agrandissement se fait sans garder le rapport Longeur-Largeur, ce que vous pouvez voir ici :
Evidemment, on peut le faire à vue d'oeil, mais l'on va le faire avec beaucoup de précision en selectionnant une option de l'outil :
Une fois l'option "Redimensionner" activée, on constate que l'on peut régler la taille de notre personnage en gardant exactement le rapport Longeur-Largeur :
Une fois le redimmensionnement effectué, refaites une interpolation de mouvement, et le tour est joué !
VI. Exportation en .swf
L'animation terminée, cliquez dans un espace vide, pour qu'aucun objet ne soit selectionné. Allez voir dans les Propiétés de l'animation (la même fenêtre que pour l'interpolation), puis cliquez sur "Parmètres". Décochez toutes les cases, sauf la case "Flash(.swf)", et indiquez l'endroit où votre fichier .swf va être enregistré.
Une fois cela terminé, cliquez sur l'onglet "Flash" (en haut de la fenêtre), et réglez selon vos désirs, si votre fichier est protégé contre l'importation, si vous voulez que l'animation soit compressé, etc...
Finissez ce tutorial en cliquant sur "publier". Voilà, c'est fini !
L'animation finale : cliquez ici !
Ici, l'animation est jouée en boucle.
Note : Dans des animations flashs dessinées en vectoriel (c'est à dire sans images du style .jpg, ou autre...), on peut zoomer sur l'animtion sans perdre de la qualité, et on obtient un fichier très léger (dans notre cas, 4.65 ko).
Merci d'avoir lu ce tutorial jusqu'au bout, amusez vous bien !
GJ