Boîte de dialogue

La boîte à outils des professionnels de l’animation

Flash et After Effects ou comment associer la précision vectorielle aux animations de bitmaps riches

par Chris Georgenes

Figure 1 : les émoticônes super-héros, fers de lance de Yahoo

Tous les professionnels de l’animation le savent : la technologie Flash est parfaite pour créer des animations vectorielles nettes et claires. Pourtant, pour produire des effets spéciaux spécialement adaptés aux programmes vectoriels, bien souvent, Flash ne suffit plus.

Avec Flash 8, vous pouvez désormais appliquer des modes de fondu et des effets de filtres en temps réel. Mais comment réaliser des effets spéciaux animés qui transcendent les filtres de Flash 8 ? Comment ajouter plus de profondeur à l’apparence de votre animation ? Réponse : en associant After Effects d’Adobe et Flash.

En voici la preuve. J’ai récemment travaillé avec Yahoo! et Ogilvy Worldwide pour créer une série d’animations destinée à promouvoir la nouvelle version de Yahoo! Instant Messenger. J’ai construit le projet quasi intégralement avec Flash et Adobe Photoshop. J’ai conçu et animé les personnages avec Flash et utilisé Photoshop pour créer les images d’arrière-plan en manipulant des images prises à partir de photos. Enfin, j’ai importé les images d’arrière-plan dans Flash.

Toutefois, il y avait un effet particulier que nous voulions réaliser pour lequel Flash seul ne nous suffisait pas. Les personnages du projet sont des super-héros sous forme d’émoticônes, possédant chacun un superpouvoir unique. L’un d’eux en particulier pouvait transformer son visage « normal » en visage « furtif ». J’ai utilisé After Effects pour appliquer un effet de morphing sur deux graphiques différents, à l’aide d’un effet tourbillonnant. J’ai ainsi pu réaliser exactement ce que j’avais imaginé : l’objet commence à tourbillonner et à fondre comme s’il tournait dans un mixer, puis se retourne sur lui-même en tourbillonnant dans l’autre sens avant de se transformer en un autre objet.

Ce projet présentait deux défis en un : la réalisation technique de cet effet et la capacité de conserver une taille de fichier raisonnable.

Pré-requis
Flash Professional 8
After Effects 6.5

Connaissances pré-requises
Pour être capable de suivre les étapes successives décrites dans cet article, des connaissances fondamentales des espaces de travail Flash et After Effects sont recommandées.

Utilisation de Flash pour créer les états « avant » et « après » du super-héros
La première étape dans la création de l’effet de morphing consiste à créer l’image « avant » (Image 1) et l’image « après » (Image 2) dans Flash. Le plus simple est de déterminer le début et la fin de l’effet de morphing. Le plus complexe ? Tout ce qu’il y a entre les deux.

Figure 2 : les visages « avant » et « après » de l’émoticône

Vous devez copier chaque image, à laquelle vous allez appliquer l’effet, dans un nouveau document Flash. Exportez ensuite chaque image en fichier PNG pour l’utiliser dans After Effects.

1. Assurez-vous d’avoir un nouveau document Flash avec l’image « normale » de l’émoticône collée sur la Scène.
2. Choisissez Fichier > Exporter l’image. Renommez le nouveau fichier tete_a.png et sélectionnez le format PNG (non compressé).
3. Dans la boîte de dialogue Exporter au format PNG, sélectionnez Zone image minimale dans le menu contextuel Inclure si vous voulez que l’image soit recadrée à la taille du graphique.
4. Dans le menu contextuel Couleurs, sélectionnez 24 bits avec alpha channel pour conserver un fond transparent.
5. Répétez l’opération pour l’émoticône « mode furtif », en renommant le fichier tete_b.png.

Figure 3 : paramètres de fichier PNG de la boîte de dialogue Exporter au format PNG dans Flash

Création d’un effet de morphing dans After Effects
Démarrez After Effects 6.5 d’Adobe : par défaut, il crée un nouveau projet Sans titre. Commencez une nouvelle composition en sélectionnant Composition > Nouvelle composition (Ctrl + N). Une fenêtre Paramètres de composition s’affiche pour vous permettre de personnaliser plusieurs aspects de votre projet. Pour cet exemple, le plus important est de s’assurer que la cadence d’image est la même que dans la séquence Flash. Cliquez sur OK.

Figure 4 : la boîte de dialogue Paramètres de composition apparaît lorsque vous créez une nouvelle composition dans After Effects. Vérifiez que la cadence image est la même que dans votre séquence Flash.

Dans la fenêtre Projet ou le menu contextuel Fichier, choisissez Importer fichier (Ctrl + I) et sélectionnez les images que vous avez exportées depuis Flash. Cliquez sur OK. Pour utiliser les ressources de la fenêtre Projet, il vous suffit de les placer par glisser-déposer dans la fenêtre Composition.

Figure 5 : glisser-déposer de l’image de la fenêtre Projet vers la fenêtre Composition.

Un nouveau calque est automatiquement créé chaque fois que vous placez un fichier par glisser-déposer dans la composition. Pour cet effet, je devais m’assurer que les deux images avaient exactement la même position dans la composition.

Figure 6 : positionnement du visage « mode furtif » de l’émoticône sur le visage « normal ».

A ce stade du processus de production, il faut ajuster la longueur du panneau Montage selon la durée de l’effet. Puisque l’ensemble de l’effet doit durer 2-3 secondes, j’étire le panneau Montage pour refléter cette durée. Modifiez le panneau Montage pour que l’image « normale » (tete_a.png) soit présente du début à la fin de l’animation, et que la seconde image (tete_b.png) soit placée dans la deuxième moitié, uniquement. L’image « mode furtif » ne doit pas démarrer au début, car l’effet se termine avec cette image.

Figure 7 : panneau Montage d’After Effects, les images placées de façon appropriée

A présent, pourquoi ne pas s’amuser en appliquant un effet à vos images. Sélectionnez le calque de l’image initiale puis Effet > Déformation > Tourbillon.

Figure 8 : sélection de Effet > Déformation > Tourbillon

Lorsque vous appliquez un effet, le calque dans le panneau Montage se met à jour avec ses propriétés. Cliquez sur les sous-sélections pour développer et afficher les options disponibles. Vous pouvez ainsi créer des images clés, ajuster l’effet appliqué et modifier les propriétés du calque telles que point d’ancrage, position, échelle, rotation et opacité.

Figure 9 : calque 2 de la composition, avec l’effet de tourbillon et les options disponibles

La fenêtre Effets vous permet de contrôler et de corriger les propriétés de l’effet. Dans le cas présent, réglez l’effet de tourbillon à l’aide du bouton Angle et du curseur Rayon.

Figure 10 : effet de tourbillon du morphing

En utilisant les propriétés Effets (Figure 10) ainsi que celles du panneau Montage (Figure 11), vous construisez l’effet en créant des images clés, en appliquant l’effet et en réglant l’opacité de deux images sur les deux calques. Appliquez l’effet Tourbillon aux deux images et réglez l’opacité du début à la fin de la séquence, pour que la seconde image apparaisse en fondu progressif sur l’image originale.

Figure 11 : paramètres du panneau Montage pour l’effet de morphing

Un effet comme celui-ci exige généralement bon nombre de réglages fins et de corrections de précision pour obtenir un résultat satisfaisant. Alors préparez-vous à passer du temps à perfectionner le timing et les propriétés des effets.

Une fois l’effet désiré appliqué, il est temps de préparer l’animation en vue de son exportation. La première étape consiste à ajuster le panneau Montage selon la durée de l’animation. Nul besoin d’exporter plus que nécessaire. Faites glisser le curseur de la zone de travail pour étendre uniquement la série d’images que contient votre animation.

Figure 12 : ajustement du panneau Montage selon la durée de l’animation

L’outil Recadrer sur zone ciblée est situé en bas de la fenêtre Composition. Cet outil fonctionne comme l’outil Recadrer de Photoshop. Cliquez et faites glisser le curseur sur l’animation dans la fenêtre Composition pour déterminer la zone de sélection de l’animation.

Figure 13 : outil Zone ciblée

Une fois que vous avez déterminé la zone à recadrer, sélectionnez Composition > Recadrer comp. sur zone ciblée.

Figure 14 : recadrage de la composition sur la zone ciblée

Ensuite, choisissez Fichier > Exporter > Séquence d’image. Sélectionnez le format PNG.

Figure 15 : sélection du format de fichier PNG pour la séquence exportée

Parce que cet effet utilise un fond transparent, sélectionnez Millions de couleurs+ dans le menu Options. (Le « + » représente une couche alpha.)

Figure 16 : la sélection de Millions de couleurs+ permet d’inclure une couche alpha dans la séquence exportée

Importation de l’effet animé dans Flash
La séquence d’image exportée depuis After Effects est nommée selon une suite de nombres. Dans Flash, choisissez Fichier > Importer dans la bibliothèque et sélectionnez le premier fichier de la séquence. Flash reconnaît celui-ci comme faisant partie d’une séquence et vous demande si vous souhaitez importer uniquement le fichier sélectionné ou la séquence entière. Flash crée un symbole de séquence vidéo dans la bibliothèque contenant la série d’images PNG, chacune apparaissant sous forme d’images clés séparées sur un calque. Faites glisser cette séquence vidéo sur la Scène et lancez la lecture du film pour la tester.

Cliquez ici pour voir la figure 17. L’effet de morphing, créé dans After Effects et en lecture dans Flash

After Effects est le complément idéal de Flash lorsque votre film nécessite un effet qui sort des capacités de Flash 8. Les nouveaux filtres et modes de fondu de Flash 8 constituent une avancée spectaculaire dans la série Flash et donnent des résultats visuels étonnants. Mais lorsqu’un effet animé personnalisé est nécessaire et qu’il requiert un gros travail personnel, After Effects constitue la solution la plus adaptée.