Présentation de la « 2D et demi »

Ce n'est pas parce que Flash simplifie l'interpolation à l'extrême que vous devez toujours vous en contenter pour créer des animations convaincantes. Comprenez-moi bien : l'interpolation offre un formidable gain de temps et permet de faire le travail, pour autant que ce travail ne demande que de simples objets se déplaçant sur la scène.

Que se passerait-il si vous poussiez la méthode d'interpolation dans ses retranchements pour rendre votre personnage plus réaliste ? Que se passerait-il si vous exploitiez sa simplicité à l'extrême et l'utilisiez d'une manière à laquelle peu d'utilisateurs Flash ont pensé ? Que se passerait-il si l'interpolation n'avait plus de secrets pour vous et que vous repreniez les premiers 10 % de ces connaissances et changiez radicalement d'orientation ? Où tout cela vous mènerait-il ?

Dans cette leçon, je vais dévoiler une technique « d'enfer » pour développer des animations Flash. Elle vous permettra d'obtenir réellement ce que certains appellent un effet 3D convaincant. Ce qui est sympathique, c'est que vous n'avez pas besoin de quitter l'environnement Flash, vous restez dans l'univers 2D. Vous touchez là les frontières dimensionnelles. S'il s'agit toujours de 2D mais que ça ressemble à de la 3D, qu'en est-il exactement ?

Bienvenue dans le monde de l'animation « 2D et demi ».

Et oui, l'animation 2D et demi ! C'est moi qui ai inventé ce nom. Je ne prétends pas avoir inventé cette technique mais, pour ce que j'en sais, le nom deux D et demi, doit venir de moi.

La figure 28 présente le personnage logo de mon site Web, www.mudbubble.com*.

Figure 28. N'est-il pas mignon ?

La figure 29 montre que j'ai placé chaque symbole sur son propre calque. J'ai activé la fonction contour de sorte que vous puissiez voir comment chaque partie du corps du personnage a été isolée. Cela est très important car l'interpolation du mouvement ne requiert qu'un symbole par calque pendant l'interpolation. Si vous placez deux symboles différents sur un même calque pendant la même interpolation de mouvement, l'interpolation est interrompue.

Figure 29. Chaque symbole possède son propre calque

J'ai même pris le temps de nommer chaque calque. Bien que cela ne soit pas obligatoire, ces noms sont très utiles car, au fur et à mesure que votre scénario s'allonge, vous le parcourez de plus en plus. Cela est également très important dans le cas d'un travail en équipe, où le partage de fichiers est courant. On n'est jamais trop organisé.

Lorsque votre scénario est bien défini, vous pouvez commencer à appliquer des interpolations de mouvement à votre personnage. Dans cet exemple, je n'ai animé que les symboles composant la tête du personnage, en m'assurant que tous les autres calques étaient verrouillés afin de ne pas les modifier.

Tourner les têtes : Partie 1

J'ai commencé par créer mes images-clés aux endroits où je voulais que la tête commence et cesse de tourner. Cliquez et faites glisser verticalement la souris du haut du calque vers le bas et faites la conversion en images-clés (F6). Répétez cette opération une deuxième fois, en gardant environ 15 à 20 images entre les images-clés. Dans mon exemple, j'ai placé des images-clés sur les images 15 et 30 (Figure 30).

Figure 30. Préparation à l'application d'interpolation de mouvement

En gardant la tête de lecture au niveau de l'image où je voulais que le mouvement de la tête de mon personnage s'arrête, j'ai modifié chacun des symboles de la scène à l'aide de l'outil de transformation libre.

Suivez mon exemple. J'ai commencé par l'un des yeux. Vous devez imaginer les yeux enveloppant une sphère (la tête). S'il s'agissait d'un véritable objet 3D, l'oeil grossirait en se rapprochant de vous. Comme il n'aurait pas non plus la forme d'un oeuf, le rendre plus large est également une bonne idée. L'oeil de mon personnage étant constitué de trois symboles différents, je les ai tous mis à l'échelle en même temps en maintenant la touche Maj enfoncée pendant que je sélectionnais les trois symboles (Figure 31). J'ai ensuite utilisé l'outil de transformation libre pour les mettre à l'échelle simultanément. Ne vous inquiétez pas si tout n'est pas parfait à ce stade. Rien ne vous empêche d'affiner votre animation par la suite. Ce travail s'effectue presque en aveugle car vous ne saurez pas exactement à quoi il ressemblera avant d'appliquer l'interpolation de mouvement.

Figure 31. Sélection des symboles de l'oeil

Passons maintenant au nez. Le personnage nous faisant face, tout ce qui est plus proche de nous doit se déplacer de droite à gauche. S'il s'agissait d'un véritable objet 3D, le nez sortirait franchement de la tête. Pour que tout cela soit plus convaincant, je l'ai tourné légèrement vers le bas au fur et à mesure de son déplacement de droite à gauche (Figure 32). N'oubliez pas non plus de le redimensionner en le grossissant légèrement lorsqu'il se rapproche de l'observateur.

Figure 32. Modification du nez

J'ai ensuite écarté l'autre oeil tout en le grossissant et en arrondissant sa forme ovale. J'ai également déplacé les deux sourcils en les faisant pivoter légèrement tout en les grossissant (Figure 33).

Figure 33. Modification de l'autre oeil

A ce stade, j'ai appliqué l'interpolation de mouvement à chacun des calques qui avaient été modifiés. Il est maintenant temps de révéler ce que j'ai réellement fait et de voir si d'autres ajustements sont nécessaires.

Ne vous inquiétez pas, de nombreux ajustements sont presque toujours nécessaires pour que l'effet soit réaliste. La figure 34 illustre le mouvement de la tête du personnage à ce stade.

Figure 34. Mouvement de la tête du personnage

Pour examiner l'effet animé obtenu, regardez le fichier mudbubble_boy.swf (Figure 35).

Figure 35. Effet animé final du mouvement de la tête

C'est un bon début, n'est-ce pas ? Par quelques modifications simples effectuées avec l'outil de transformation libre, vous commencez à voir l'effet prendre vie. Ce n'est pas parfait, mais à ce niveau c'est normal. Vous pouvez continuer de régler la mise à l'échelle, le positionnement et l'inclinaison de vos éléments jusqu'à obtenir l'effet désiré.

Tourner les têtes : Partie 2

Je vais maintenant m'intéresser aux autres parties de la tête du personnage pour accroître le mouvement de la tête.

La partie la plus importante de cette illusion consiste à convaincre l'observateur que cet objet plat, en deux dimensions, a un volume et une masse. Vous devez également berner l'oeil de l'utilisateur pour qu'il ait l'illusion d'une profondeur de l'animation. Pour cela, vous devez imaginer que ce personnage est construit à partir d'objets 3D dans un volume. Si le personnage tournait réellement la tête dans un volume en 3D, les éléments placés au premier plan se déplaceraient dans le sens opposé de ceux en arrière plan. Pour bien vous représenter ceci, imaginez la terre en train de tourner sur son axe dans l'espace. La terre tourne dans le sens inverse des aiguilles d'une montre. Cela signifie que la surface la plus proche de nous se déplace de droite à gauche et la plus éloignée se déplace de gauche à droite. Appliquons cela à la tête de mon personnage.

Le symbole de la tête elle-même n'étant qu'une forme ovale plate, tout ce que j'ai à faire est de l'incliner légèrement. J'ai également choisi de la relever légèrement vers la droite car, lorsque quelqu'un tourne son visage vers vous, vous voyez davantage de chair à droite de l'oeil gauche. De même, cette forme de la tête étant plus en arrière que les traits du visage, elle doit se déplacer légèrement vers la droite de quelques pixels. N'exagérez pas ces mouvements. L'effet obtenu est bien meilleur avec de nombreux mouvements subtils plutôt que quelques modifications grossières. C'est la somme des parties qui fait le tout, car plusieurs animations progressives complètent l'effet spectaculaire global.

J'ai ensuite fait pivoter le bord de la casquette vers le côté droit de la tête du personnage (Figure 36). N'oubliez pas, les objets de l'arrière-plan sont plus éloignés et se déplacent dans le sens inverse par rapport à ceux du premier plan.

Figure 36. Rotation du bord de la casquette

J'ai également utilisé les touches de direction pour relever le bord de la casquette vers la droite de manière à ce qu'elle semble encore plus derrière le cou du personnage.

Le même principe s'applique à sa casquette. Je l'ai inclinée pour la rendre plus mince tout en la déplaçant vers la droite de quelques pixels (Figure 37).

Figure 37. Ajustement de la casquette

L'oreille s'incline également légèrement lorsqu'elle se déplace vers le haut et vers la gauche (Figure 38).

Figure 38. Inclinaison de l'oreille

N'oubliez pas les cheveux. J'ai conçu les cheveux avec trois symboles individuels pour qu'ils puissent être modifiés indépendamment. Au fur et à mesure que la tête se tourne vers le spectateur, je les ai inclinés vers les yeux du personnage et les ai raccourcis comme s'ils se dirigeaient davantage vers le spectateur (Figure 39). Cela fausse légèrement la perspective et n'est pas toujours facile à obtenir. Il existe des limites à l'inclinaison et à la mise à l'échelle possible d'un symbole. N'oubliez pas que l'effet obtenu est bien meilleur lorsqu'il est utilisé avec parcimonie et subtilité. N'en abusez pas. Moins il y en a, mieux c'est.

Figure 39. Inclinaison des cheveux

J'ai ensuite appliqué des interpolations de mouvement aux autres calques modifiés. Si vous m'avez suivi jusque-là, regardez le résultat.

Pas mal, non ? La tête tourne vraiment comme s'il s'agissait d'un objet 3D. N'oubliez pas que la plupart des personnages humains ont deux oreilles. Pour que la deuxième oreille du personnage passe du côté droit de la tête, créez un nouveau calque sous tous les autres. Copiez l'oreille existante et collez-la sur ce nouveau calque dans une image-clé vide à mi-chemin entre les interpolations de mouvement (aux environs de l'image 22). Choisissez ensuite Modification > Transformer > Renverser horizontalement pour la faire pivoter.

Positionnez l'oreille du côté droit derrière la tête de sorte qu'elle se place à peu près à mi-chemin. C'est à peu près tout ce que l'on doit voir de l'oreille (Figure 40).

Figure 40. Positionnement de la deuxième oreille

Ajoutez une seconde image-clé sur l'image 30 (où se trouvent toutes les autres images-clés) comme l'illustre la figure 41.

Figure 41. Ajout d'une seconde image-clé

Revenez à la première image-clé de l'oreille et repositionnez-la presque complètement derrière la tête. J'ai converti certain des autres calques en contours pour que vous puissiez voir la nouvelle position de l'oreille (Figure 42).

Figure 42. Repositionnement de la deuxième oreille

A présent, appliquez simplement l'interpolation de mouvement. Diffusez votre animation pour voir l'oreille apparaître au fur et à mesure que la tête « pivote » vers vous (Figure 43). Ce petit détail renforce énormément le réalisme du mouvement de la tête car il donne l'impression que la tête est sphérique (cette animation requiert Flash Player 8).

Figure 43. Effet animé final de l'oreille apparaissant lorsque la tête tourne

N'hésitez pas à parcourir le scénario et à ajuster vos symboles lorsque cela semble nécessaire. L'effet final dépend de votre niveau de perfectionnisme et de la complexité de votre personnage. Le personnage de mon exemple est plutôt complexe, du fait de la quantité d'objets utilisés pour sa conception.

Panneau Accélération/Décélération personnalisée (Flash Professionnel 8 uniquement)

J'aimerais apporter une petite touche finale au mouvement de la tête. Comme vous le savez, les interpolations de mouvement peuvent sembler plutôt statiques car leur vitesse est constante. Dans son état initial, elles peuvent même paraître un peu saccadées. Toutefois, une nouvelle fonctionnalité de Flash Professionnel 8 permet d'ajouter un effet « d'accélération/décélération » qui adoucit la transition. L'astuce consiste à savoir accélérer et décélérer pendant l'interpolation.

La première étape consiste à appliquer l'interpolation de mouvement. Pour ce faire, procédez de l'une des deux façons suivantes :

• Cliquez du bouton droit sur les images placées entre les deux images-clés. Dans le menu déroulant, choisissez Créer une interpolation de mouvement.
• Sélectionnez tous les calques avec l'outil de sélection et un cliquer-déplacer qui les surligne tous en noir. Dans le menu déroulant Interpolation de l'inspecteur des propriétés, choisissez Mouvement.

Remarquez la présence du bouton Modifier dans l'inspecteur des propriétés (Figure 44).

Figure 44. Cliquez sur le bouton Modifier pour ouvrir la boîte de dialogue Accélération/Décélération personnalisée.

Un clic sur ce bouton ouvre la boîte de dialogue Accélération/Décélération personnalisée (Figure 45).

Figure 45. Boîte de dialogue Accélération et décélération personnalisée

La boîte de dialogue Accélération et décélération personnalisée permet de mieux contrôler l'accélération que dans les versions précédentes. Elle affiche un graphique représentant le degré de déplacement au fil du temps. L'axe horizontal représente les images et l'axe vertical le pourcentage de changement de l'objet.

La courbe du graphique indique la vitesse de changement de l'objet. Lorsque la courbe est horizontale (pas de pente), la vélocité est égale à zéro. Lorsque la courbe est verticale, il n'y a ni accélération ni délai dans le mouvement de l'objet.

Si vous cochez la case 'Utiliser un paramètre pour toutes les propriétés', la courbe actuelle s'applique à toutes les propriétés (Position, Rotation, Echelle, Couleur, Filtres). Si vous désactivez cette case à cocher, vous pouvez appliquer une courbe distincte à chacune des propriétés, comme suit :

• Position : Spécifie les paramètres d'accélération personnalisée pour la position d'un objet animé sur la scène.
• Rotation : Spécifie les paramètres d'accélération personnalisée pour la rotation d'un objet animé. Par exemple, vous pouvez régler la vitesse à laquelle un personnage animé se tourne vers l'observateur sur la scène.
• Echelle : Spécifie les paramètres d'accélération personnalisée pour l'échelle d'un objet animé. Par exemple, vous pouvez plus facilement personnaliser le redimensionnement d'un objet de sorte qu'il semble s'éloigner de l'observateur, puis s'en rapprocher, puis s'en éloigner de nouveau.
• Couleur : Spécifie les paramètres d'accélération personnalisée pour les transitions de couleur appliquées à un objet animé.
• Filtres : Spécifie les paramètres d'accélération personnalisée pour les filtres appliqués à un objet animé. Par exemple, vous pouvez contrôler le paramètre d'accélération d'une ombre portée qui simule le changement de direction d'une source lumineuse.
• Boutons Lire et Arrêter : Ces boutons permettent d'afficher une animation sur la scène à l'aide des courbes de vélocité courantes définies dans la boîte de dialogue Accélération/Décélération personnalisée.
• Bouton Réinitialiser : Ce bouton permet de réinitialiser la courbe de vélocité à l'état linéaire, par défaut.

Cliquez une fois sur la diagonale pour ajouter un nouveau point de contrôle. Pour contrôler le déplacement d'un objet avec précision, faites glisser les positions des points de contrôle.

Les indicateurs d'images (représentés par des poignées carrées) vous permettent de cliquer à l'endroit où vous voulez qu'un objet accélère ou décélère. En cliquant sur la poignée d'un point de contrôle (les poignées carrées), vous sélectionnez ce point de contrôle et affichez les points tangentiels (cercles vides) sur l'un de ses côtés. Pour faire glisser les points de contrôle ou les points tangentiels vers leur nouvelle position, vous pouvez utiliser la souris ou les touches du clavier.

Conseil : Par défaut, les points de contrôle s'accrochent à une grille. Vous pouvez désactiver temporairement l'accrochage en maintenant la touche X tout en faisant glisser le point de contrôle.

Un clic sur une courbe, loin des points de contrôle, crée un nouveau point de contrôle sur cette courbe. Un clic n'importe où, loin de la courbe et des points de contrôle, désélectionne le point de contrôle actuellement sélectionné.

Pour obtenir un démarrage et une fin d'animation progressifs, ajustez la courbe comme celle de la figure 46. Il est fortement conseillé de faire de nombreux essais en créant et en modifiant les points de contrôle et les point tangentiels et en testant l'animation à l'aide des boutons Arrêter et Lire situés dans le coin inférieur gauche du panneau. Très vite, les relations entre la courbe et son effet sur l'animation n'auront plus de secrets pour vous.

Figure 46. Utilisation de la courbe d'accélération/décélération

Diffusez maintenant votre animation. Regardez comme la tête accélère, puis décélère sur la fin. Pour animer la tête avec un mouvement revenant vers sa position d'origine, il vous suffit de copier les images de l'Image1 et de les coller après l'interpolation que vous venez de créer. Reprenez la même procédure en ajoutant une interpolation de mouvement, pour l'accélération et la décélération, et votre personnage peut tourner la tête en douceur, dans un sens puis dans l'autre.

Application de filtres

Oui, l'impossible est à présent possible dans Flash. Flash 8 introduit les filtres de graphiques et les modes de fondu, que les développeurs Flash ont accueilli à bras ouverts. Vous pouvez maintenant appliquer des effets tels que des ombres portées, des flous, des effets de rayonnement, des biseaux, des biseaux dégradés et des réglages de couleurs sur n'importe quelle occurrence de clip. Alors amusez-vous à appliquer une ombre portée à votre personnage.

La première chose à faire consiste à placer votre personnage dans un symbole de clip. Dans le scénario, faites un glisser-déplacer pour sélectionner toutes les images de tous les calques. (Conseil : commencez sur l'image1 dans le coin supérieur gauche et glissez en diagonale jusqu'à la dernière image placée en bas du calque.) Vos images et vos calques sont alors surlignés en noir. Choisissez Edition > Scénario > Copier les images (ou appuyez sur Ctrl+Alt+C) pour copier l'ensemble du scénario dans le presse-papiers. (Vous pouvez également cliquer du bouton droit n'importe où sur les images surlignées et choisir Copier les images dans le menu contextuel.) A présent, gardez cela à l'esprit jusqu'à l'étape suivante.

Ouvrez votre bibliothèque (Ctrl+L) et, dans le menu déroulant situé dans la partie supérieure droite, choisissez Nouveau symbole, puis un comportement de Clip et cliquez sur OK. Vous êtes maintenant en mode d'édition pour ce nouveau symbole. Sélectionnez la première image du scénario, puis choisissez Edition > Scénario > Coller les images (ou appuyez sur Ctrl+Alt+V) pour coller votre sélection, comme dans la figure 47. (Vous pouvez également cliquer du bouton droit sur l'image1 et choisir Coller les images dans le menu contextuel.)

Figure 47. Clic droit sur l'image1 et commande Coller les images

Revenez à la scène principale et créez un nouveau calque. Localisez le symbole de clip que vous venez de créer dans la Bibliothèque et faites-le glisser vers la scène sur ce nouveau calque (Figure 48).

Figure 48. Ajout du clip sur la scène

Supprimez tous les autres calques qui contiennent votre personnage d'origine. A présent, votre scénario ne doit présenter qu'un seul calque et un seul symbole de clip contenant l'animation de votre personnage.

Vous pouvez créer deux sortes d'ombre. Une ombre portée normale crée une ombre derrière l'occurrence, avec un léger décalage par rapport à l'original. Ce type d'effet est souvent très plat et similaire à une ombre projetée sur un mur ou sur une surface plane. Lorsque vous projetez une ombre sur le sol, ce n'est pas très convaincant. Pour obtenir un effet plus réaliste, quelques étapes très simples sont encore nécessaires.

Dupliquez l'occurrence du clip et placez la copie derrière le clip original. (Vous pouvez soit conserver le double sur le même calque puis le placer derrière le clip original, soit le copier-coller sur un nouveau calque situé sous le clip original.)

Sélectionnez ensuite le double et, dans l'onglet Filtres de l'inspecteur des propriétés, choisissez Ombre portée dans le menu Plus (+) (Figure 49). Réglez le niveau d'intensité sur environ 45 % et sélectionnez Masquer l'objet. Cela a pour effet de masquer le clip tout en révélant les propriétés du filtre de l'ombre portée. Vous pouvez effectuer d'autres réglages, en définissant notamment la qualité sur Faible, Moyenne ou Haute ou en modifiant le niveau de flou, la couleur, l'angle ou la distance entre l'effet de flou et le graphisme original.

Figure 49. Filtre d'ombre portée appliqué à la copie du clip

Pour faire en sorte que cet effet ne ressemble pas à une ombre portée projetée sur un mur derrière l'objet original, employez l'outil Transformation libre pour incliner le clip filtré. Il vous faudra vous entraîner quelque peu à cette technique pour être au point. Compressez et inclinez le clip de sorte que l'on ait l'impression que l'ombre se projette par terre (Figure 50). Pour obtenir l'effet désiré, il vous faudra peut-être repositionner l'occurrence.

Figure 50. Copie du clip inclinée à l'aide de l'outil de transformation libre

Testez le clip pour voir l'effet créé.

Combiner des animations en boucle avec plusieurs autres animations en boucle donne un résultat visuel sophistiqué, comme dans la figure 51 (cette animation requiert Flash Player 8).

Figure 51. Exemples d'effets « 2D et demi » obtenus avec le filtre Ombre portée

Cet exemple montre comment l'effet d'ombre portée donne une toute autre dimension à l'animation. Il s'agit d'une suite de clips contenant des animations en boucle des personnages du garçon et du chien. Dans un futur article, j'expliquerai comment de petites boucles animées peuvent encore améliorer vos animations.

J'espère que cet article aura contribué à affûter vos compétences en matière d'animation et de conception Flash. Flash offre également plusieurs autres techniques d'animation, telles que l'animation complète (souvent appelée image par image), les interpolations de formes et les séquences d'images issues de vidéo ou de programmes d'animation 3D. De même, un certain nombre de plug-ins très intéressants sont disponibles auprès des autres concepteurs et animateurs. Ils vous aideront à accélérer votre flux de travail dans Flash. Surveillez la parution de futurs articles concernant ces techniques et ces outils.

Page 5 sur 5

Page précédente