Dans ce tutoriel, nous allons vous montrer comment animer une formidable explosion en Flash, que vous pouvez utiliser pour un jeu d'action cartoony. Nous vous accompagnons de la conception à la réalisation, puis nous vous montrons comment l'exporter et l'importer dans d'autres scènes..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Décidez quel type d'explosion conviendrait le mieux à votre scène. Est-ce une petite explosion? Une arme nucléaire? Un Batman-esque des années 60, flashy, "WHAM"? Dans ce cas, nous ferons une petite explosion, mais avec l'expérience, vous pouvez faire tout ce que vous voulez..
Une fois que vous savez ce que vous voulez animer, cherchez une référence. Internet est fantastique pour cela car vous pouvez simplement rechercher des séquences vidéo en rapport avec ce que vous souhaitez faire et les étudier attentivement..
Une fois que vous êtes prêt, prenez quelques morceaux de papier et commencez à dessiner votre explosion. L'animation est planifiée à travers images clés, qui sont généralement les parties les plus extrêmes de l’animation qui racontent l’histoire approximative de la façon dont quelque chose va bouger. Dans ce cas, la première chose à laquelle vous devriez penser est le flash initial de lumière.
Ensuite, dessinez les clés expliquant comment la fumée et la lumière sortent de la bombe. Vous voudrez à tout le moins un endroit où la fumée sort de la lumière, puis un quand la fumée est la plus grande et la plus extrême, puis un cadre à la fin. Voici nos dessins d'images clés illustrant ce processus:
Dessinez les entre-deux pour ces cadres. Fondamentalement, vous dessinez maintenant toutes les images qui correspondent au centre de ces images clés. Nous allons inclure nos croquis ici pour référence.
À ce stade, nous numérisons tous nos dessins afin de pouvoir les tracer en Flash..
Ouvrez Flash et modifiez vos paramètres en choisissant celui qui conviendrait le mieux à votre scène actuelle. Vous pouvez voir tous vos paramètres de base dans le panneau des propriétés à droite de la capture d'écran. Dans notre cas, nous travaillerons à 550x500px et 24 images par seconde, avec un fond blanc.
Ensuite, vous devez importer tous vos dessins au trait dans ceux de Flash Pro. Bibliothèque. La bibliothèque est fondamentalement un endroit où tous les fichiers que vous utilisez dans votre animation sont stockés pour être conservés. Vous pouvez le faire en allant à Fichier> Importer> Importer dans la scène, puis en sélectionnant tous vos dessins et en appuyant sur Ouvrir.
Après cela, ils apparaîtront tous sur la même image clé, mais si vous les sélectionnez tous, cliquez avec le bouton droit de la souris et cliquez sur "Distribuer aux calques", ils apparaîtront sous forme de calques séparés, tous sur la même image clé. Ensuite, vous pouvez simplement faire glisser les clés individuelles aux bonnes positions, soit sur leurs propres calques, soit sur un seul calque, selon vos préférences..
Ajoutez un nouveau calque à votre plan de montage, puis commencez à dessiner sur vos anciennes lignes à l'aide de l'outil Ligne. Nous n’utilisons généralement pas l’outil Pinceau, car vous vous retrouvez avec trop de nœuds sur les lignes, ce qui peut rendre les choses extrêmement difficiles à modifier ultérieurement. En gros, vous devez dessiner des lignes à l'aide de l'outil Ligne, puis utiliser l'outil de sélection pour manipuler la courbe entre les deux points. (D'autres astuces de dessin Flash sont disponibles ici.)
Une fois que le cadre a été entièrement tracé à l'aide de l'outil Ligne, nous sélectionnons toutes les lignes, puis passons à Modifier> Forme> Convertir les lignes en remplissages. Parfois, il y aura des problèmes où des morceaux de la ligne disparaissent. Si cela se produit, commencez par sélectionner des morceaux plus petits de l'image, puis réalisez le graphique en entier. Une fois cette opération effectuée, vous pouvez modifier la profondeur des lignes à l'aide de l'outil de sélection, en cliquant et en faisant glisser les bords des lignes..
Colorez les lignes à l'aide de l'outil Pot de peinture.
Répétez les étapes 9 à 11 jusqu'à ce que toutes les images soient terminées..
Sélectionnez tout sur un cadre, appuyez sur F8 et transformez-le en symbole. Nommez-le correctement et il apparaîtra dans votre bibliothèque pour être utilisé et réutilisé à tout moment. L'organisation est vraiment importante lorsque vous animez. Les choses peuvent devenir rapidement déroutantes si vous ne nommez pas et ne triez pas tout correctement, alors veuillez le faire. Vous pouvez même créer des dossiers dans la bibliothèque.
L'outil Pelure d'oignon est un outil important qui peut vraiment vous aider à animer. Avec Onion Skinning, vous pouvez facilement visualiser les images les plus proches de celle que vous êtes en train de modifier, afin de pouvoir déterminer immédiatement si une animation va fonctionner comme prévu ou non. Le bouton Pelure d'oignon est situé au bas de votre timeline.
Pour prévisualiser votre animation complète à tout moment, allez à Contrôle> Tester l'animation> Tester. Il préchargera toute votre animation et vous montrera ensuite exactement à quoi elle ressemblera une fois exportée..
Lorsque vous êtes prêt à exporter, allez simplement à Fichier> Exporter> Exporter le film. Nommez-le comme bon vous semble, choisissez .swf dans le menu déroulant, puis cliquez sur Enregistrer. En fonction de la taille de votre animation, vous devrez peut-être attendre un court instant..
L'exportation d'images .gif est presque la même chose. Quand vous frappez Fichier> Exporter> Exporter le film il suffit de choisir .gif au lieu de .swf du menu déroulant.
Pour importer une explosion dans une scène existante, ouvrez d’abord les deux scènes. Ensuite, sélectionnez toutes les images de l'animation d'explosion sur la ligne de scénario, copiez toutes les images, puis appuyez sur Ctrl + F8. Un dialogue apparaîtra. Nommez l'explosion, puis enregistrez-la en tant que graphique. Hit OK. Un écran vide devrait apparaître sans animation. Cliquez ensuite sur la première image du nouveau scénario et collez toutes vos images. Après cela, cliquez sur le bouton "Scène 1" sous la timeline mais au-dessus de la fenêtre d'animation pour revenir à votre timeline d'origine. Une fois que vous faites cela, votre animation devrait être dans la bibliothèque. Sélectionnez votre animation dans la bibliothèque, faites un clic droit et copiez-la. Vous pourrez ensuite le coller dans la bibliothèque de tout autre fichier FLA ouvert..
Faire des clips vidéo est presque identique à ce que nous avons décrit à l'étape précédente. Pour créer un clip, suivez exactement les instructions de la dernière étape, mais choisissez "Clip" au lieu de "Graphique" lorsque vous atteignez le dialogue après avoir appuyé sur Ctrl + F8. La différence entre un graphique et un clip réside dans le fait que le clip peut être identifié de manière unique à l'aide d'ActionScript, qui est le langage de codage utilisé par Flash pour créer des jeux et des médias interactifs. Lorsque le film est compilé, une copie est créée à partir de la bibliothèque et transformée pour l'animation. La copie peut être floue, mise à l'échelle, etc., pendant l'exécution, sans avoir à créer des animations séparées lors de la conception, ce qui permet de réduire la quantité de mémoire informatique nécessaire et de conserver une taille de fichier SWF réduite..
Pour créer une feuille de sprite de votre animation, cliquez d'abord sur Fichier> Exporter> Exporter le film et sélectionnez Séquence PNG créer un ensemble de graphiques PNG, un pour chaque image. Une fois créés, vous pouvez utiliser n’importe quel logiciel de retouche d’image (tel que Photoshop) pour les importer en tant que lot, puis les copier / coller dans un fichier image plus volumineux..
Vous pouvez également agrandir la scène Flash, faire apparaître chaque image d'animation en même temps, puis déplacer les images individuelles en place avant d'exporter une seule image..
Une troisième option consiste à utiliser l'outil SWFSheet de Keith Peters..
Nous espérons que vous avez apprécié ce tutoriel! Si vous faites une explosion avec elle, merci de la partager dans les commentaires :)