Comment créer une animation Flash?

Claude Texier
Claude Texier
• 16 min de lecture
Étant donné que l'animation image par image nécessite plusieurs images avec de légères différences
Étant donné que l'animation image par image nécessite plusieurs images avec de légères différences, vous devrez créer tous ces éléments à la main.

Flash est le premier média d'animation sur Internet, et même sur d'autres formats tels que la télévision. Créer une animation Flash simple dans Flash est en fait assez simple à réaliser, car Flash fournit de nombreux outils utiles qui simplifient l'ensemble du processus. Si vous avez une idée pour une animation Flash ou un dessin animé, vous pouvez probablement avoir un croquis approximatif en quelques heures seulement. Voir l'étape 1 ci-dessous pour apprendre à créer une animation Flash.

La prise en charge d'Adobe Flash se termine en décembre 2020. Passé ce délai, il ne sera plus possible d'utiliser le flash.

Partie 1 sur 3: faire une animation flash image par image

  1. 1
    Comprendre les bases de l'animation image par image. Ceci est considéré comme la méthode d'animation "traditionnelle", en ce sens que chaque image a la même image mais légèrement modifiée. Lorsque les images sont lues ensemble, les images semblent bouger. Il s'agit de la même technique de base utilisée par les animateurs manuels traditionnels, et elle prend plus de temps que l'interpolation (voir la section suivante).
    • Par défaut, Flash produira des animations à 24 images par seconde (FPS). Cela signifie qu'une seconde d'animation aura 24 images, mais toutes les images ne doivent pas nécessairement être différentes. Vous pouvez ajuster cela si vous le souhaitez, et de nombreuses animations Flash utilisent 12 FPS, mais 24 produiront une animation beaucoup plus "plus fluide".
  2. 2
    Installez flash professionnel. Il existe une variété de programmes d'animation Flash disponibles, mais le plus puissant est Flash Professional CC d'Adobe. Vous pouvez installer la version d'évaluation gratuitement ou utiliser un autre produit si l'abonnement à Creative Cloud d'Adobe ne vous intéresse pas. Le reste de cet article fera référence à Flash Professional ou à tout autre programme d'édition sous le nom de "Flash".
  3. 3
    Créez vos actifs. Étant donné que l'animation image par image nécessite plusieurs images avec de légères différences, vous devrez créer tous ces éléments à la main. Vous pouvez tous les créer avant de commencer ou les créer au fur et à mesure. Vous pouvez utiliser le programme Flash pour dessiner directement dans votre projet, ou vous pouvez dessiner vos éléments dans votre programme de création d'images préféré.
    • Si vous souhaitez que vos images soient mises à l'échelle sans sacrifier la qualité, vous souhaiterez les créer en tant que vecteurs au lieu de rasters. Les images vectorielles se redessinent à chaque fois qu'elles sont mises à l'échelle, ce qui signifie qu'il n'y aura pas de pixellisation ni de crénelage. Les images raster sont les images traditionnelles auxquelles vous êtes probablement habitué (photos, images Paint, etc.). Ceux-ci ne s'adaptent pas bien et peuvent sembler assez laids si vous voulez les agrandir.
    Peut transformer une bonne animation en une animation incroyable
    La musique rend votre animation plus immersive et peut transformer une bonne animation en une animation incroyable.
  4. 4
    Créez votre premier cadre. Lorsque vous démarrez Flash pour la première fois, vous aurez un calque vide et une timeline vide. Au fur et à mesure que vous ajoutez des images, votre chronologie sera remplie automatiquement. Vous pouvez interagir avec les calques de la même manière que vous le feriez dans Photoshop.
    • Avant d'ajouter votre image, créez un arrière-plan de base pour votre film. Renommez le calque 1 en "Arrière-plan", puis verrouillez le calque. Créez un deuxième calque et nommez-le comme vous le souhaitez. Ce sera le calque sur lequel vous créerez votre animation.
    • Ajoutez votre dessin à la toile dans le premier cadre. Vous pouvez soit importer votre dessin depuis votre ordinateur, soit utiliser les outils de dessin de Flash pour créer un dessin directement dans le programme.
    • Votre première image sera une image clé. Les images clés sont des images qui ont une image et forment l'épine dorsale de votre animation. Vous allez créer une nouvelle image clé à chaque fois que l'image change.
    • Les images clés sont signalées par un point noir dans la chronologie.
    • Vous n'avez pas besoin d'une nouvelle image dans chaque cadre. En général, avoir une image clé toutes les quatre ou cinq images produira une bonne animation.
  5. 5
    Transformez votre dessin en symbole. En transformant votre dessin en symbole, vous pouvez facilement l'ajouter plusieurs fois dans un cadre. Ceci est particulièrement utile si vous devez créer rapidement plusieurs objets, comme un banc de poissons.
    • Sélectionnez l'ensemble de votre dessin. Faites un clic droit sur la sélection et sélectionnez "Convertir en symbole". Cela ajoutera l'image à votre bibliothèque où vous pourrez y accéder rapidement à l'avenir.
    • Supprimez le dessin. Ne t'inquiète pas! Vous le rajouterez à la scène en faisant simplement glisser l'objet depuis votre bibliothèque. Vous pouvez facilement ajouter plusieurs instances du même dessin à votre scène!
  6. 6
    Ajoutez des cadres vierges. Une fois que vous avez votre première image prête, vous pouvez ajouter vos images vierges qui existeront entre la première image clé et la deuxième image clé. Appuyez F5 quatre ou cinq fois pour ajouter des images vides après votre première image clé.
  7. 7
    Créez votre deuxième image clé. Une fois que vous avez ajouté quelques images vierges, vous êtes prêt à créer votre deuxième image clé. Il existe essentiellement deux manières différentes de procéder: vous pouvez copier votre image clé existante et effectuer de petits ajustements, ou vous pouvez créer une image clé vierge et insérer une nouvelle image. Si vous utilisez l'art créé dans un autre programme, vous voudrez la deuxième méthode. Si vous avez créé votre art à l'aide des outils de conception de Flash, utilisez la première méthode.
    • Pour créer une image clé en utilisant le contenu de l'image clé précédente, appuyez sur F6. Pour créer une image clé vierge, faites un clic droit sur la dernière image de votre timeline et sélectionnez "Insérer une image clé vierge". Tout ce qui se trouve dans votre scène sera supprimé.
    • Une fois que vous avez créé votre deuxième image clé, vous devrez apporter des ajustements à l'image pour donner l'effet de mouvement. Si vous utilisez les outils de conception de Flash, vous pouvez utiliser l'outil Transformer pour sélectionner des aspects de votre dessin et les déplacer légèrement, comme le bras d'un bâton.
    • Si vous insérez une nouvelle illustration pour chaque image clé, vous devez vous assurer qu'elle est placée au même emplacement ou à l'emplacement logique suivant à l'écran. Cela garantira que l'art ne saute pas entre les images.
  8. 8
    Répétez le processus. Maintenant que vous avez créé deux images clés, il est temps d'itérer. Vous répéterez essentiellement le même processus jusqu'à ce que vous ayez terminé votre animation. Ajoutez quelques images vierges entre chaque image clé et assurez-vous que vos mouvements semblent fluides.
    • Faites de petits changements incrémentiels. Votre animation sera beaucoup plus fluide si vous apportez de très petites modifications à l'image clé. Par exemple, si vous voulez qu'un bâton agite un bras, votre deuxième image clé ne doit pas être l'autre extrémité de la vague. Au lieu de cela, utilisez quelques images clés pour passer du début de la vague à la fin. Cela produira une animation beaucoup plus fluide.

Partie 2 sur 3: faire une animation point à point (interpolation)

  1. 1
    Comprendre les bases de l' interpolation. Flash contient une fonction appelée interpolation, qui vous permet essentiellement de définir les points de départ et de fin de votre objet. Flash déplacera et transformera ensuite l'objet en fonction de vos paramètres entre ces deux points, créant l'illusion d'une animation. Vous n'aurez pas besoin de créer des images pour chaque image clé comme vous le feriez avec une animation image par image.
    • L'interpolation est particulièrement utile pour créer des effets de "morphing", où un objet devient un autre au cours de l'animation.
    • L'animation image par image et l'interpolation peuvent être utilisées conjointement dans le même film.
    • Vous ne pouvez avoir qu'un seul objet soumis à une interpolation de mouvement à la fois. Cela signifie que si vous souhaitez que plusieurs objets soient animés à la fois, ils devront tous se trouver sur des calques séparés.
  2. 2
    Créez votre premier objet. Contrairement à l'animation image par image, vous n'aurez pas besoin de créer plusieurs objets à animer à l'aide de la fonction d'interpolation. Au lieu de cela, vous allez créer un objet, puis modifier ses propriétés au cours du processus d'interpolation.
    • Avant d'ajouter votre image, créez un arrière-plan de base pour votre film. Renommez le calque 1 en "Arrière-plan", puis verrouillez le calque. Créez un deuxième calque et nommez-le comme vous le souhaitez. Ce sera le calque sur lequel vous créerez votre animation.
    • Il est fortement recommandé d'utiliser les outils de conception intégrés de Flash ou d'importer votre image à partir d'un programme de dessin vectoriel. Les vecteurs peuvent être mis à l'échelle facilement sans distorsion, tandis que les images raster traditionnelles ne seront pas correctement mises à l'échelle et se transformeront.
    Vous n'aurez pas besoin de créer des images pour chaque image clé comme vous le feriez avec une animation
    Vous n'aurez pas besoin de créer des images pour chaque image clé comme vous le feriez avec une animation image par image.
  3. 3
    Convertissez votre objet en symbole. Pour interpoler votre objet, vous devrez le convertir en un symbole. C'est le format des objets que Flash utilise pour les manipuler. Si vous essayez d'interpoler un objet qui n'a pas été transformé en symbole, vous serez d'abord invité à le faire.
    • Faites un clic droit sur votre objet et sélectionnez "Convertir en symbole". L'objet sera ajouté à votre bibliothèque, ce qui facilite le clonage d'objets.
  4. 4
    Créez votre première interpolation de mouvement. Une interpolation de mouvement déplace l'objet d'un emplacement à un autre. Cliquez avec le bouton droit sur le symbole dans votre scène et sélectionnez "Créer une interpolation de mouvement". 24 images seront ajoutées à votre timeline, car il s'agit de la durée par défaut d'une interpolation. N'oubliez pas que par défaut, Flash s'animera à 24 images par seconde, ce qui signifie que cette interpolation de mouvement prendra une seconde pour se terminer.
    • Lorsque vous créez l'interpolation de mouvement, vous êtes automatiquement déplacé vers la dernière image de l'interpolation.
  5. 5
    Créer la trajectoire. Une fois que vous avez créé l'interpolation, vous pouvez déplacer l'objet vers l'emplacement où vous souhaitez qu'il se retrouve. Flash affichera la ligne de trajectoire, qui est en pointillé pour montrer l'emplacement de l'objet pour chaque image de l'interpolation.
    • Lorsque vous créez la trajectoire pour la première fois, ce sera une ligne droite du point de départ au point d'arrivée.
  6. 6
    Étendez vos cadres d'arrière-plan. Si vous exécutiez votre animation maintenant, votre objet se déplacerait le long de la trajectoire, mais votre arrière-plan disparaîtrait après une image. Pour résoudre ce problème, vous devrez étendre votre arrière-plan sur toutes les images de l'animation.
    • Sélectionnez votre calque d'arrière-plan dans la chronologie. Cliquez sur la dernière image de votre chronologie, qui devrait également être l'image sur laquelle se termine votre interpolation de mouvement. Appuyez sur F5 pour insérer des cadres jusqu'à ce point, ce qui gardera votre arrière-plan affiché pendant toute l'interpolation.
  7. 7
    Ajoutez des images clés. L'ajout d'images clés à votre trajectoire vous permettra de transformer votre objet pendant l'interpolation de mouvement. Vous ne pouvez apporter des modifications à un objet que s'il est animé par des images clés. Pour ajouter des images clés à votre trajectoire, sélectionnez d'abord l'image dans la chronologie que vous souhaitez transformer en image clé. Ensuite, cliquez et faites glisser l'objet dans la position souhaitée pendant cette image. Votre trajectoire s'ajustera automatiquement et une image clé sera ajoutée à la chronologie. Les images clés sont indiquées par des icônes en forme de losange dans la chronologie.
  8. 8
    Ajustez votre trajectoire d'interpolation. Pour modifier le chemin de votre objet, vous pouvez cliquer et faire glisser chacun des marqueurs de position de cadre sur le chemin vers un nouvel emplacement. Évitez de trop varier le chemin, sinon l'objet se déplacera de manière erratique (à moins que ce ne soit votre objectif!).
  9. 9
    Transformez votre objet. Une fois que vous avez établi vos images clés et votre trajectoire, vous pouvez transformer votre objet afin qu'il change à mesure qu'il se déplace dans la trajectoire d'interpolation de mouvement. Vous pouvez modifier la forme, la couleur, la rotation, la taille et toute autre propriété de l'objet.
    • Sélectionnez le cadre dans lequel vous souhaitez que la transformation se produise.
    • Ouvrez le panneau Propriétés de l'objet. Vous pouvez appuyer sur Ctrl+ F3 si le panneau n'est pas actuellement visible.
    • Modifiez toutes les valeurs dans la fenêtre Propriétés pour affecter l'objet. Par exemple, vous pouvez modifier la teinte ou la couleur, ajouter des filtres ou modifier l'échelle.
    • Vous pouvez également utiliser l'outil Transformation libre pour modifier librement la forme comme vous le souhaitez.
    Vous n'aurez pas besoin de créer plusieurs objets à animer à l'aide de la fonction d'interpolation
    Contrairement à l'animation image par image, vous n'aurez pas besoin de créer plusieurs objets à animer à l'aide de la fonction d'interpolation.
  10. 10
    Apportez la touche finale à votre tween. Testez votre interpolation de mouvement en appuyant sur Ctrl+ ↵ Enter. Assurez-vous que les transformations sont bonnes et que l'animation se déplace à la bonne vitesse. Si votre animation se déplace trop rapidement, vous pouvez soit réduire le FPS de la scène, soit augmenter la plage d'interpolation.
    • Par défaut, le FPS est de 24, alors essayez de le réduire à 12. Pour ce faire, cliquez en dehors de la scène, puis modifiez le FPS dans le panneau Propriétés. Le changer à 12 doublera la durée de votre animation, mais peut la rendre plus " saccadée ".
    • Pour modifier votre plage d'interpolation, sélectionnez le calque qui contient l'interpolation et utilisez le curseur pour le retirer. Si vous souhaitez que l'interpolation soit deux fois plus longue, étendez-la à 48 images. Assurez-vous d'insérer des images vides dans votre calque d'arrière-plan afin que l'arrière-plan ne disparaisse pas à mi-chemin de l'animation. Pour étendre l'arrière-plan, sélectionnez le calque, cliquez sur la dernière image de l'animation dans la chronologie, puis appuyez surF5

Partie 3 sur 3: ajouter du son et de la musique

  1. 1
    Enregistrez ou trouvez vos effets sonores et votre musique. Vous pouvez ajouter des effets sonores aux actions qui se produisent dans votre animation pour la faire ressortir et lui donner une certaine personnalité. La musique rend votre animation plus immersive et peut transformer une bonne animation en une animation incroyable. Flash prend en charge divers formats de fichiers, notamment AAC, MP3, WAV et AU. Choisissez celui qui vous offre la meilleure qualité pour la taille de fichier la plus faible.
    • MP3 vous donnera généralement une qualité sonore parfaitement acceptable tout en maintenant la taille du fichier au minimum. Évitez les fichiers WAV si possible, car ils sont souvent assez volumineux.
  2. 2
    Importez les fichiers audio dans votre bibliothèque. Avant de pouvoir ajouter des sons à votre projet, ils doivent être ajoutés à la bibliothèque de Flash. Cela vous permettra de les ajouter rapidement à votre projet plus tard. Cliquez sur Fichier → Importer → Importer dans la bibliothèque. Recherchez le fichier son sur votre ordinateur. Assurez-vous que le fichier son a un nom facile à retenir, afin que vous puissiez le retrouver rapidement dans le menu plus tard.
  3. 3
    Créez un nouveau calque pour chaque fichier son. Ce n'est pas strictement nécessaire, car vous pouvez ajouter du son aux calques existants, mais placer chaque fichier sur son propre calque vous donnera beaucoup plus de contrôle sur les fondus entrants et sortants, quand démarrer et s'arrêter, et il est plus facile de déplacer les sons.
  4. 4
    Créez une image clé où le son commencera. Sur le calque du son, sélectionnez l'image de l'animation à laquelle vous souhaitez que le son commence. Appuyez sur F7 pour insérer une image clé vierge. Par exemple, si vous souhaitez inclure un fichier musical qui est lu pendant la durée de l'animation, sélectionnez la première image sur le calque du fichier musical. Si vous ajoutez une boîte de dialogue pour un personnage, sélectionnez le cadre où le personnage commence à parler.
  5. 5
    Ajoutez le son ou le fichier musical. Dans le cadre Propriétés, vous verrez une section Son. Vous devrez peut-être le développer pour voir les options. Cliquez sur le menu "Nom" et sélectionnez le fichier que vous voulez dans votre bibliothèque.
  6. 6
    Configurez le fichier son. Une fois que vous avez sélectionné un fichier, vous pouvez configurer son mode de lecture. Ce que vous sélectionnez sera basé sur ce que vous avez besoin du son pour accomplir dans l'animation. Vous pouvez modifier les paramètres d'effet, de synchronisation et de répétition de chaque son à l'aide du menu situé sous le menu Nom dans le cadre Propriétés.
    • Effet - Cela permet d'ajouter des effets au son, comme un fondu entrant et sortant ou l'ajout d'écho. Vous pouvez sélectionner des paramètres prédéfinis dans le menu déroulant ou cliquer sur l'icône en forme de crayon à côté du menu pour créer vos propres paramètres personnalisés.
    • Sync - Ceci détermine comment la chanson est jouée dans l'animation. L'événement jouera le son jusqu'à ce qu'il soit terminé. Si le même son est à nouveau déclenché avant la fin du premier, l'original continuera à jouer jusqu'à ce qu'il se termine. Start fonctionne comme Event, mais s'arrête si le son est rejoué. Stop arrête le son dans cette image. Si vous souhaitez l'utiliser conjointement avec d'autres propriétés sonores, créez une nouvelle image clé à l'endroit où vous souhaitez que le son s'arrête et utilisez cette option. Stream tentera de faire correspondre le son joué avec le nombre d'images sur les autres couches. Ceci est mieux utilisé pour le dialogue.
    • Répéter - Ce paramètre vous permet de définir la durée de répétition du son. Vous pouvez le configurer pour qu'il ne joue qu'une seule fois ou le faire boucler autant de fois que vous le souhaitez. Si votre animation est une animation en boucle, vous devez configurer votre musique pour qu'elle boucle à l'infini.
    Si votre animation est une animation en boucle
    Si votre animation est une animation en boucle, vous devez configurer votre musique pour qu'elle boucle à l'infini.
  7. 7
    Terminez votre projet. Lorsque vous avez enfin terminé votre projet, enregistrez-le en tant que fichier SWF. C'est le format utilisé pour lire le film. Vous pouvez le lire dans pratiquement n'importe quel navigateur Web ou utiliser un lecteur Flash dédié pour le regarder. Il existe également une variété de sites sur lesquels vous pouvez le télécharger pour que d'autres puissent le voir, tels que Newgrounds, Albino Blacksheep et Kongregate.
  8. 8
    Allez plus loin dans vos futurs projets. Ce guide aborde les bases de la création d'une animation, mais il y a tellement plus que vous pouvez apprendre et faire. Ajoutez quelques boutons et chemins de branchement, et vous obtenez un jeu d'aventure à choisir. Vous pouvez suivre un cours accéléré sur ActionScript et mieux contrôler les détails les plus fins de votre animation. Continuez à expérimenter et vous vous retrouverez bientôt à apprendre toutes sortes d'astuces et de mises en œuvre.

Conseils

  • Si vous souhaitez revenir à votre travail plus tard, enregistrez-le en tant que fichier ".fla". Il s'agit du format de projet pour les fichiers Flash.

Lisez aussi: Comment dessiner une lune dans Adobe Illustrator?

Questions et réponses

  • Comment puis-je envoyer une animation via Gmail, si possible?
    Vous devez d'abord compresser les fichiers. Il existe plusieurs outils pour compresser des fichiers, et Windows en propose un. Cependant, s'il n'y a pas d'outil de compression pré-installé, vous pouvez télécharger 7-ZIP qui est très facile à utiliser. Une fois que vous l'avez installé, faites simplement un clic droit sur votre dossier et cliquez sur zip. Vous pouvez ensuite le faire glisser dans votre e-mail et l'envoyer.
  • Où puis-je télécharger Flash?
    Vous pouvez vous abonner au package Adobe Creative Cloud dans votre compte Creative Cloud et le télécharger à partir du site Adobe. Ou vous pouvez commencer un essai gratuit pendant sept jours en enregistrant un compte Creative Cloud. Téléchargez Flash Pro CC (maintenant Animate CC) depuis le site d'Adobe.
  • Adobe Flash peut-il être inséré dans une page Web?
    La balise embed en HTML peut intégrer un fichier d'animation Flash, mais vous aurez besoin d'un éditeur HTML (Brackets, code Visual Studio, etc.).
  • Dois-je payer pour le programme?
    Flash est fourni avec Creative Cloud, Photoshop et Stock, ainsi que divers autres services Adobe. Creative Cloud propose un essai gratuit. Ensuite, vous devrez payer une certaine redevance par mois.

Les commentaires (4)

  • qwill
    Tout a été utile, merci.
  • matthieuroyer
    C'est parfait. Tout ce dont j'ai besoin, c'est de ma tablette de dessin numérique et de mon boom.
  • duncansmith
    Je vais animer, et cela a vraiment aidé mes rêves.
  • carolinebuisson
    Cela m'a été très utile dans sa manière simple étape par étape. Merci pour vos efforts.

Lisez aussi:

  1. Comment activer Flash sur Chrome?
  2. Comment mettre à niveau Adobe Flash Player sur Linux Mint?
  3. Comment installer Adobe Flash sur Kindle Fire HD?
En parallèle
  1. Comment télécharger Flash?Nathan Wuyts
  2. Comment activer Flash sur Chrome?Maxim Delhaye
  3. Comment importer de l'audio dans Flash?René Lelievre
  4. Comment créer une interpolation de mouvement dans Flash?René Cyr
  5. Comment créer une interpolation de forme dans Flash?Richard Pinto
  6. Comment faire une bannière flash?Arthur Payet
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail