Share
Le monde de l'animation peut sembler très intimidant - entre AfterEffects, Flash et tout le reste, il y a tant à apprendre. Et qui a le temps? N'ayez crainte, vous pouvez créer de simples animations Flash sans quitter les limites familières d'Illustrator et sans aucune connaissance de Flash. Voici deux façons simples de faire bouger les choses.
Vous trouverez ci-dessous deux animations SWF finales sur lesquelles nous allons travailler. Vous voulez accéder à l'intégralité des fichiers Vector Source et aux copies téléchargeables de chaque didacticiel, y compris celui-ci? Rejoignez Vector Plus pour seulement 9 $ par mois.
J'ai créé ce didacticiel vidéo pour compléter ce didacticiel texte + image..
Pour ce type d'animation, dans lequel une forme se transforme en une autre (et une autre, si vous le souhaitez), nous allons utiliser l'outil de fusion pour créer les formes intermédiaires, puis relâcher chaque forme dans son propre calque, puis l'exporter. ceux-ci comme une séquence pour le fichier Flash.
Puisque cette animation sera utilisée sur le Web, commencez avec un nouveau document RVB. Ici, j'ai quatre icônes simples représentant les quatre saisons. Sélectionnez toutes les formes, puis centrez-les horizontalement et verticalement, à l'aide du panneau Aligner (ou du panneau Contrôle). Assurez-vous que chaque forme est sur le même calque.
Double-cliquez sur l'outil de fusion dans la palette pour afficher ses options. Choisissez Étapes spécifiées dans le menu déroulant Espacement, puis tapez 8. Cela nous donnera une transition en douceur entre les formes, mais ne créera pas trop de calques..
Avec toutes les formes sélectionnées, sélectionnez Objet> Mélanger> Créer.
Les formes mélangées étant toujours sélectionnées, sélectionnez Objet> Développer. Cela séparera le mélange en formes individuelles. Pour que cet effet fonctionne, les formes individuelles doivent être dissociées les unes des autres. Allez à Objet> Dissocier.
Les formes non groupées doivent toujours être sur un seul calque. Dans le panneau Calques, assurez-vous que le calque est mis en surbrillance, cliquez sur le menu déroulant et choisissez Libérer les calques (séquence). Vous remarquerez que chaque forme est maintenant sur son propre calque et que chaque calque a une couleur différente. Si vous ne le voyez pas, revenez en arrière et assurez-vous d'avoir dissocié le mélange développé.
Allez dans Fichier> Exporter et choisissez Flash (SWF) comme format de fichier (REMARQUE: En fonction de la version d'Illustrator et / ou de la version de Flash que vous avez installée sur votre ordinateur, le format de fichier peut s'appeler Macromedia Flash.). Choisissez les couches AI en images SWF comme méthode d'exportation.
Maintenant, cliquez sur le bouton Avancé pour faire apparaître plus d'options. Choisissez le format d'image sans perte. Cliquez sur En boucle pour que votre animation se répète encore et encore. Les paramètres par défaut conviennent pour le reste de la boîte de dialogue Options SWF, mais vous souhaiterez peut-être les expérimenter dans de futurs projets..
Pour voir votre animation en action, effectuez l'une des opérations suivantes: Cliquez sur le bouton Aperçu Web dans la boîte de dialogue Options SWF pour lancer votre navigateur Web par défaut et lire l'animation. Ou, enregistrez le fichier SWF, puis faites-le glisser dans une fenêtre de navigateur vierge pour le lire..
1. Lorsque vous travaillez avec un mélange pour créer une animation, vous avez peut-être remarqué la case à cocher Animer les mélanges dans la boîte de dialogue Options avancées de SWF. Cela fait ce qu’il dit: il utilise le mélange pour l’animation et sépare chaque forme développée dans le processus. Vous n’avez donc pas à suivre les étapes 4 et 5, mais il est utile de comprendre comment Illustrator crée l’animation..
2. Si vous préférez, le fichier Illustrator peut être exporté vers Photoshop, puis ouvert dans ImageReady pour y créer des animations. Suivez les étapes 1 à 5 ci-dessus, puis exportez sous un fichier Photoshop (PSD). La clé ici est de vérifier à la fois les couches d'écriture et la capacité d'édition maximale dans la boîte de dialogue Options d'exportation. Lorsque vous ouvrez le fichier dans Photoshop, vous verrez que chaque couche (dans ce cas, les 29 d'entre elles) est préservée. Vous pouvez ensuite passer à ImageReady et modifier l’animation image par image..
Maintenant que vous comprenez le concept de base, vous pouvez expérimenter toutes sortes de mélanges et de morphes. Pour des animations vraiment trippantes, essayez d’utiliser des objets 3D ou des formes en dégradé..
Encore une fois, commencez avec un fichier RVB. J'utilise cette simple silhouette de zombie, avec un remplissage de noir et un coup nul. Je vais ajouter une série de traits à l'extérieur de la forme, de sorte que, une fois animés, les traits rayonnent de la forme..
Sélectionnez la forme, accédez au panneau Apparence et choisissez Ajouter un nouveau trait dans le menu déroulant. Dans CS4, toutes les modifications apportées à ce nouveau trait peuvent être effectuées directement dans le panneau Apparence. En allant de gauche à droite, cliquez d'abord sur le mot Trait pour afficher les options Trait. Cliquez sur la troisième icône en regard de l'option Aligner le trait pour l'aligner sur l'extérieur de la forme. Ensuite, cliquez sur l'échantillon de couleur pour appliquer la couleur (j'ai commencé avec le noir), puis choisissez enfin l'épaisseur du trait dans le troisième champ..
Pour ajouter les traits restants, vous pouvez répéter l’étape 1 en modifiant à chaque fois les options, la couleur et le poids. Mais pour gagner un peu de temps, cliquez simplement sur l'icône Dupliquer Sélectionner un élément au bas du panneau des traits pour faire une copie du trait. Maintenant, choisissez la copie (ce devrait être celui SOUS l’original) et changez sa couleur en un bleu très foncé (ou ce que vous voulez) et son poids à 2 points.
Répétez cette procédure plusieurs fois en ajoutant un trait plus léger et plus épais à chaque fois. Le résultat final devrait ressembler à l'image ci-dessous. Vous verrez chaque trait supplémentaire dans le panneau Apparence..
Allez à Objet> Développer l'apparence. Cela développera et séparera les traits.
Dissociez les traits développés et, comme vous l'avez fait dans la partie I, sélectionnez le calque dans le panneau Calques et choisissez Libérer en calques (séquence) dans le menu déroulant (pour cette méthode, vous devez vraiment effectuer cette étape)..
Exportez le fichier au format Flash, comme à l'étape 6 ci-dessus. Pour cette image, je vais changer la couleur de fond en noir, mais les autres paramètres restent les mêmes..
Pour voir votre animation en action, effectuez l'une des opérations suivantes: Cliquez sur le bouton Aperçu Web dans la boîte de dialogue Options SWF pour lancer votre navigateur Web par défaut et lire l'animation. Ou, enregistrez le fichier SWF, puis faites-le glisser dans une fenêtre de navigateur vierge pour le lire..
Comme auparavant, prévisualisez le fichier dans votre navigateur Web. Essayez de faire glisser la fenêtre du navigateur plus grande et plus petite. Puisqu'il s'agit d'un fichier vectoriel, la qualité est excellente quelle que soit la taille. Bonne animation!
Accentsconagua