Créer des Animations avec Adobe Flash CS6

L'acquisition de compétences en création d'animations est essentielle pour les animateurs amateurs et professionnels, ainsi que pour les artistes multimédias. Ce tutoriel vous guidera étape par étape pour réaliser des animations de qualité avec Adobe Flash CS6.

Interface utilisateur d'Adobe Flash CS6 avec ses principaux panneaux

Comprendre l'Environnement de Travail d'Adobe Flash CS6

Adobe Flash CS6 est un logiciel graphique et multimédia utilisé pour la création d'animations 2D, de jeux vidéo pour mobile et web, de fichiers GIF et d'animations graphiques animées. Le programme permet de créer du contenu multimédia à l'aide d'images matricielles (bitmap) et vectorielles.

Pour une compréhension globale d'Adobe Flash CS6 Professional, il est primordial de maîtriser les bases de son interface utilisateur. L'espace de travail comprend divers panneaux : la Ligne de temps, les Outils, le panneau des Propriétés, l'éditeur de mouvement et la Bibliothèque.

Le Panneau des Outils

Dans le panneau des Outils, vous trouverez des outils tels que l'outil Sélection, l'outil Lissage, l'outil Transformation libre, l'outil Transformation de dégradé, l'outil de Transition 3D, l'outil Texte, l'outil Plume et l'outil Pinceau.

La Ligne de Temps (Timeline)

Pour créer une séquence d'animation cohérente, le panneau de la Ligne de temps est le plus important. Il est composé de deux parties : la partie gauche, qui gère les calques, et la partie droite, qui affiche la ligne de temps horizontale correspondante.

  • Un calque est dit actif lorsqu'il est sélectionné.
  • Il est possible de créer des dossiers de calque pour organiser un ou plusieurs calques.
  • Une seule image de la séquence d'animation est généralement affichée à la fois sur la scène. Cependant, vous pouvez en afficher deux ou plusieurs simultanément pour faciliter le positionnement et la modification d'une animation image par image.
  • L'image sous la tête de lecture apparaît en couleur, tandis que les images environnantes sont estompées, donnant l'impression de feuilles transparentes empilées les unes sur les autres (effet d'oignon). Les images estompées ne peuvent pas être modifiées.
  • Pour une meilleure gestion des animations, il est conseillé de nommer les calques.
  • Une icône permet d'afficher les Propriétés du calque.
  • Il est possible de verrouiller tous les calques d'une scène ou d'un symbole en cliquant sur le cadenas situé en haut du panneau des calques.
  • Pour créer un dossier, utilisez l'icône située en bas du panneau.

La Bibliothèque (Library)

La Bibliothèque est initialement vide au démarrage d'une nouvelle animation. Elle sert à stocker les éléments réutilisables tels que les symboles, les images importées et les fichiers audio.

Exemple de la fenêtre Bibliothèque dans Adobe Flash CS6

Les Fondamentaux de la Création d'Animations

Flash CS6 offre des interfaces conviviales qui facilitent le développement d'animations fluides et évolutives, tant pour les débutants que pour les professionnels expérimentés. La création d'une animation dans Flash CS6 implique la compréhension de plusieurs concepts clés.

Créer un Nouveau Projet

Pour commencer, ouvrez Flash et créez un nouveau fichier via Fichier > Nouveau.

Comprendre les Images Clés (Keyframes)

La forme la plus simple d'animation dans Flash est l'animation image par image. Les images clés (keyframes) sont les images de votre animation où un changement significatif se produit.

Une animation image par image est une technique traditionnelle où chaque trame contient l'image précédente, légèrement modifiée. Lorsque les trames sont affichées séquentiellement, l'image résultante semble se mouvoir.

Pour créer une animation image par image nécessitant plusieurs trames avec de petites différences, vous devrez les réaliser manuellement. Vous pouvez les dessiner dès le début ou au fur et à mesure de votre progression.

Conseils pour l'animation image par image :

  • Créez un fond de base pour votre animation avant d'insérer votre image. Renommez la première couche en « Fond » puis verrouillez-la.
  • Créez une seconde couche et nommez-la selon vos préférences.
  • Ajoutez votre dessin sur le canevas de la première trame. Cette première image sera une trame primaire, formant l'épine dorsale de votre animation.
  • Il n'est pas nécessaire de placer une nouvelle image dans chaque trame.
  • En convertissant votre dessin en symbole, vous pouvez facilement l'inclure plusieurs fois dans une trame. Pour ce faire, sélectionnez votre dessin, faites un clic droit et choisissez « Convertir en symbole ».
  • Supprimez ensuite le dessin original. Vous le réintroduirez en faisant glisser son symbole depuis votre bibliothèque.
  • Une fois la première trame prête, ajoutez quelques trames secondaires vides entre la première trame primaire et la suivante.
  • Pour créer votre deuxième trame primaire, vous pouvez soit copier la trame primaire existante et y apporter des modifications, soit en créer une vide et y insérer une nouvelle image. Pressez F6 pour créer une trame primaire avec le contenu de la précédente. Pour créer une trame primaire vide, faites un clic droit sur la dernière trame de votre ligne chronologique et sélectionnez « Insérer une trame primaire vide ».
  • Après avoir créé votre seconde trame primaire, apportez des modifications à votre image pour obtenir l'effet de mouvement désiré.
  • Continuez en répétant le processus, en effectuant de petites modifications progressives. Des modifications légères sur chaque trame primaire rendront votre animation plus fluide. Si vous animez le bras d'un personnage, la deuxième trame primaire ne doit pas représenter la fin du mouvement, mais une position intermédiaire.
  • Utilisez ces trames intermédiaires pour représenter la transition entre le début et la fin d'un mouvement.
Exemple d'animation image par image avec des trames primaires et secondaires

Utilisation des Interpolations (Tweens)

Le logiciel Flash inclut une fonction d'interpolation (ou tween) qui permet de définir les points de départ et d'arrivée des objets de votre animation. Le logiciel génère le mouvement entre ces points et les transformations appliquées aux objets selon vos indications, créant ainsi une illusion d'animation.

Vous ne pouvez soumettre qu'un seul objet à la fois à une interpolation de mouvement. Contrairement à l'animation image par image, vous n'avez pas besoin de créer plusieurs objets pour utiliser l'interpolation.

Interpolation de Déplacement

L'interpolation d'un objet d'un point à un autre consiste à le déplacer selon une trajectoire donnée.

  1. Avant d'ajouter votre image, créez un fond pour votre séquence d'animation. Nommez la première couche « Fond » puis verrouillez-la. Créez une seconde couche et nommez-la à votre convenance.
  2. Il est préférable d'utiliser les outils intégrés de Flash ou d'importer votre image depuis un programme de dessin vectoriel.
  3. Convertissez votre objet en symbole pour pouvoir interpoler ses mouvements. Faites un clic droit sur l'objet et sélectionnez « Convertir en symbole ».
  4. Faites un clic droit sur le symbole dans votre scène et sélectionnez « Créer une interpolation de déplacement ». Le logiciel ajoutera 24 trames à votre ligne chronologique par défaut.
  5. Déplacez ensuite l'objet jusqu'à l'emplacement désiré. Votre objet se déplacera sur la trajectoire assignée. Assurez-vous que la couche de fond est étendue à toute la durée de l'animation pour qu'elle ne disparaisse pas.

Ajouter des Transformations pendant l'Interpolation

L'ajout de trames primaires à votre trajectoire permet d'apporter des transformations à votre objet pendant l'interpolation de déplacement. Une transformation ne peut être appliquée que si l'objet se trouve sur une trame primaire.

  1. Pour ajouter des trames primaires, sélectionnez la trame de votre ligne chronologique que vous souhaitez transformer en trame primaire.
  2. Cliquez sur l'objet et déplacez-le à la position souhaitée pour cette trame. La trajectoire sera ajustée automatiquement et une trame primaire sera ajoutée.
  3. Pour modifier le déplacement, cliquez et faites glisser les repères de positionnement de la trame.
  4. Vous pouvez transformer votre objet de manière à ce qu'il se modifie au cours de son déplacement. Ouvrez le dialogue des propriétés de l'objet et modifiez les valeurs nécessaires.
  5. Testez vos interpolations en appuyant simultanément sur Ctrl + Entrée. Vérifiez que les transformations sont plausibles et que les mouvements s'effectuent à la bonne vitesse.

Gestion de la Vitesse et des FPS

Le nombre d'images par seconde (FPS) est fixé à 24 par défaut. Vous pouvez le réduire à 12 pour un fichier plus léger. Pour ce faire, accédez aux propriétés et modifiez le nombre de FPS.

Pour modifier la plage d'une interpolation, sélectionnez la couche concernée et utilisez le curseur pour l'étirer. Pour doubler la durée, étirez-la sur 48 trames.

L'animation vectorielle est préférable aux images bitmap si vous souhaitez redimensionner vos images sans perte de qualité. Les images vectorielles se redessinent d'elles-mêmes sans pixellisation.

Comparaison visuelle entre graphiques vectoriels et bitmap

Optimisation pour le Web

Lorsque vous créez une animation destinée au web, l'optimisation est cruciale pour la gestion des performances. Réduire la taille des fichiers permet une lecture fluide.

Compresser les Actifs

Optimisez les images et les fichiers audio importés pour réduire la taille totale du fichier d'animation.

Limiter le Nombre d'Images par Seconde (FPS)

Bien qu'un nombre élevé de FPS assure une animation plus fluide, il augmente également la taille du fichier. Limitez les FPS pour un équilibre optimal.

Tester sur Différents Navigateurs

Flash peut se comporter différemment selon les navigateurs. Testez votre animation sur plusieurs d'entre eux.

Intégration d'Audio et de Vidéo

L'ajout d'effets sonores et de musique valorise votre animation et lui donne plus de relief.

Importation de Fichiers Sonores

Flash supporte divers formats audio tels que AAC, MP3, WAV et AU. Le format MP3 offre une qualité sonore acceptable avec des fichiers compressés.

  • Importez vos fichiers sonores dans la bibliothèque de travail : Fichiers > Importer > Importer dans la bibliothèque.
  • Placer chaque fichier sonore sur sa propre couche offre plus de contrôle sur les effets de volume et les coupures.

Application des Effets Sonores

Sur la couche sonore, sélectionnez la trame à partir de laquelle le son doit démarrer. Pressez F7 pour insérer une trame primaire vide.

  • Pour un fichier musical qui doit jouer pendant toute l'animation, sélectionnez la première trame de la couche sonore.
  • Dans la fenêtre des propriétés, une section est dédiée au son. Vous pouvez y configurer la reproduction.

Options de Synchronisation :

  • Effets : Permet d'ajouter des effets tels que la diminution/augmentation progressive ou l'écho.
  • Synchronisation :
    • Événement : Reproduit le son entièrement à partir d'un événement donné. Si un nouvel événement se déclenche avant la fin, le son précédent continue jusqu'à sa fin.
    • Démarrage : Similaire à « Événement », mais le son en cours s'arrête et redémarre si un nouvel événement le déclenche.
    • Arrêt : Arrête la reproduction du son dans la même trame.
    • Flux : Tente de faire correspondre le son en cours avec le nombre de trames sur d'autres couches.
  • Boucles de répétition : Définit le nombre de répétitions d'un son.

How To Add Sound Effects to an Adobe Flash Animation

Publication des Animations

Une fois votre travail finalisé, vous devez exporter votre animation.

Formats de Publication

  • Sauvegardez votre projet au format .swf. Ce format est utilisé pour la lecture de films dans la plupart des navigateurs Internet avec les greffons Flash, ou dans un lecteur Flash dédié.
  • Pour revenir plus tard sur votre projet, enregistrez-le sous l'extension .fla.

Adobe Flash CS6 offre également la possibilité de créer des feuilles de sprites en un seul clic, facilitant la création de jeux d'animation. L'intégration AIR avec Flash CS6 permet un accès facile aux fichiers sur n'importe quel appareil et résout de nombreux problèmes de débogage.

Pour les professionnels audacieux souhaitant aller au-delà de l'animation conventionnelle dans Flash CS6, il est possible d'explorer les techniques d'animation 3D.

Flash CS6 propose de nombreux filtres et effets qui peuvent être appliqués aux objets pour leur donner un aspect professionnel ou créatif. Par exemple, l'utilisation de dégradés rend les objets plus dimensionnels. Le flou directionnel (motion blur) donne une impression de vitesse ou de mouvement, particulièrement adapté aux séquences d'action ou de transition, rendant les animations plus fluides.

Flash CS6 importe des fichiers vectoriels tels que les fichiers AI (Adobe Illustrator) ou SVG, permettant d'animer directement au sein de ces logiciels. La capacité d'importer des fichiers vectoriels est particulièrement utile dans le secteur professionnel, garantissant des visuels de haute qualité pour des productions comme des vidéos d'entreprise.

Exemple d'application de filtres et d'effets dans Flash CS6

tags: #creer #animation #homme #adobe #flash #cs6

Articles populaires: