Boîte de dialogue

Réussir d’impressionnants effets d’accélération dans Flash

par Rafiq R. Elmansy

Dans les versions précédentes de Flash®, l’interpolation de mouvement était une manière aussi difficile que longue pour donner des effets de mouvement réalistes à une animation. La fonction Accélération/Décélération était très utile mais ses limites devenaient évidentes lorsque vous l’appliquiez à des animations complexes parce que vous deviez créer un grand nombre d’interpolations de mouvement et de forme, image par image, pour arriver à un résultat qui semblait naturel.

Flash Professional 8 améliore la fonctionnalité d’accélération avec l’option Accélération et décélération personnalisée. Cette nouvelle fonction fournit un graphe qui vous donne beaucoup plus de contrôle sur l’interpolation. A l’aide de la courbe de vitesse fournie, vous pouvez contrôler très précisément l’interpolation de mouvement au niveau d’images spécifiques. Par ailleurs, la fonction Accélération et décélération personnalisée vous permet d’appliquer une courbe de vitesse personnalisée pour chaque propriété de symbole.

Cette fonction améliorée d’accélération de Flash Professional 8 peut produire des effets d’interpolation de mouvement impressionnants à la fois faciles à créer et amusants.

Cet article vous aidera à comprendre le graphe Accélération et décélération personnalisée via quelques exemples de création d’effets d’animation intéressants. J’aborderai également les propriétés d’accélération personnalisées et l’application de plusieurs effets d’accélération.

Pré-requis
Pour suivre ce didacticiel, vous devez installer Flash Professional 8 et télécharger les fichiers d’exercices situés sous le titre Téléchargements de la section Ressources à gauche de votre écran.

Vous devez également posséder des connaissances de base de Flash et avoir déjà utilisé les fonctions d’accélération et d’interpolation de mouvement dans Flash.

Accélération personnalisée dans Flash

Flash propose plusieurs méthodes de contrôle de l’accélération de votre animation. La première consiste à utiliser le curseur Accélération de l’inspecteur des propriétés. C’était la façon de faire dans les versions précédentes de Flash. La seconde méthode consiste à utiliser la boîte de dialogue Accélération et décélération personnalisée, qui est disponible uniquement pour les animations avec interpolation de mouvement. (La troisième méthode implique ActionScript, que vous utilisiez les méthodes d’accélération/de classe Interpolation ou vos propres équations.)

Lorsque vous cliquez sur le bouton Modifier en regard du curseur Accélération (vous devez d’abord cliquer sur une image contenant une interpolation de mouvement dans le scénario), la boîte de dialogue Accélération et décélération personnalisée s’affiche avec un graphe qui permet de contrôler indépendamment les propriétés de symboles, comme la position, la rotation, le redimensionnement, la couleur et les filtres, qui changent toutes au cours de l’interpolation de mouvement.

Remarque : lorsque vous appliquez une accélération personnalisée sur votre symbole, la valeur Accélération de l’inspecteur des propriétés affiche --.

La boîte de dialogue Accélération et décélération personnalisée renferme les fonctions suivantes :

• Le graphe Accélération et décélération vous permet de contrôler l’accélération de votre interpolation en modifiant la courbe en des points de contrôle, comme je le mentionnerai dans la section suivante.
• L’option Utiliser un paramètre pour toutes les propriétés permet d’utiliser un paramètre de courbe pour toutes les propriétés de l’objet (activée par défaut).
• Le menu déroulant Propriété est disponible lorsque vous désactivez l’option Utiliser un paramètre pour toutes les propriétés ; il vous permet de spécifier un paramètre de courbe distinct pour chaque propriété de position, de rotation, de redimensionnement, de couleur et de filtres du symbole.
• Les boutons de lecture et d’arrêt vous permettent de prévisualiser l’effet de la courbe sur votre animation.
• Le bouton Réinitialiser permet de redéfinir la courbe de vitesse à sa position par défaut.

Cet article met l’accent sur le graphe Accélération et décélération, qui est la clé de voûte de la fonction d’accélération de Flash 8.

Présentation du graphe Accélération et décélération

Le graphe Accélération et décélération est très simple d’utilisation. L’axe horizontal représente les images du film et l’axe vertical le pourcentage de changement dans l’animation (interpolation). Vous contrôlez l’animation à l’aide des points de contrôle de la courbe de vitesse. Vous pouvez ajouter des points en cliquant sur la courbe ou en supprimer en sélectionnant le point et en appuyant sur la touche Suppr.

Chaque point de contrôle est doté de deux poignées, appelées points de tangente. En déplaçant ces points de tangente, vous pouvez contrôler le comportement de la courbe de vitesse (voir Figure 1). Ceci affecte la finesse de l’animation interpolée finale.

Fig. 1 : graphe Accélération et décélération personnalisée.

Etudions un peu chaque partie du graphe pour mieux en comprendre le fonctionnement. La vitesse de l’interpolation est influencée par l’inclinaison de la courbe de vitesse. Les parties verticales de la courbe avec une forte inclinaison représentent une animation rapide, tandis que les parties horizontales avec une faible inclinaison représentent une animation lente. Dans la Figure 2, la courbe de vitesse commence avec une valeur d’inclinaison élevée, continue horizontalement et se termine par une forte inclinaison à la fin de l’animation.

Fig. 2 : effet de l’inclinaison de la courbe de vitesse sur l’animation.

Lancez la démo suivante pour observer l’effet de l’inclinaison de la courbe de vitesse de la Figure 2 sur l’animation :

Comme je l’ai précisé, les points de tangente influencent les inclinaisons de la courbe de vitesse. Les inclinaisons fortes produisent une animation rapide et saccadée qui convient pour imiter une collision, par exemple de boules métalliques qui s’entrechoquent. Je reviendrai sur cet exemple plus tard.

Les courbes moins inclinées produisent une animation fluide qui convient aux mouvements lents. Dans la Figure 3, la première collision avec le bord opposé est un point d’animation saccadé, lequel indique une trajectoire rapide de l’étoile animée. A l’inverse, la partie plus large de la courbe de vitesse produit un lent retour de l’étoile vers le milieu de la scène.

Fig. 3 : points de tangente dans le graphe de vitesse.

Lancez la démo suivante pour observer l’effet des points de tangente illustrés dans la Figure 3 sur l’animation :

Dans cet exemple, l’emplacement des points sur le graphe détermine le pourcentage d’interpolation. Lorsque vous placez un point de faible valeur après un point de forte valeur, vous voulez signifier que l’interpolation va revenir à un pourcentage moins élevé. Dans la Figure 3, le point le plus faible indique que l’interpolation de mouvement va régresser de 30 % après avoir atteint son effet final (100 %).

Utilisation du graphe Accélération pour créer des effets d’animation

L’exemple suivant imite la collision de deux boules métalliques. Dans les versions précédentes de Flash, vous deviez passer par moult interpolations de mouvement et images-clés pour arriver au résultat souhaité. Comme vous le verrez, vous pouvez maintenant réaliser l’effet grâce à une seule interpolation de mouvement pour chaque symbole (la boule métallique).

Pour créer l’effet de l’exemple, procédez comme suit :

1. Créez un symbole de boule métallique comme illustré dans l’exemple MetalBall.fla et mettez-le sur la scène.
2. Dupliquez l’instance du symbole de boule métallique et placez chacune d’elles sur un calque différent.
3. Dans la première image-clé de l’animation, placez les symboles de boules métalliques comme illustré dans la Figure 4. Le point de transformation apparaît tel qu’illustré.

Fig. 4 : positions des symboles dans la première image-clé de l’animation.

4. Dans l’image 50, créez une autre image-clé et placez les symboles de boules métalliques comme illustré dans la Figure 5.

Fig. 5 : positions des symboles dans l’image 50

5. Créez une interpolation de mouvement pour les deux symboles et sélectionnez toute image qui en fait partie.
6. Dans l’inspecteur des propriétés, cliquez sur le bouton Modifier en regard du curseur Accélération.
7. Dans la boîte de dialogue Accélération et décélération personnalisée, modifiez la courbe de vitesse afin qu’elle ressemble au graphe que vous voyez dans la Figure 6.
8. Prévisualisez votre animation en cliquant sur le bouton Démarrer dans la boîte de dialogue. Elle devrait ressembler à ce qui est illustré dans l’animation suivante.

Fig. 6 : modification de la courbe de vitesse

Lancez la démo suivante pour observer l’exemple d’animation avec interpolation de mouvement qui utilise le paramètre Accélération et décélération personnalisée :

Application de plusieurs effets d’accélération

Dans la boîte de dialogue Accélération et décélération personnalisée, l’option Utiliser un paramètre pour toutes les propriétés est activée par défaut. Toutefois, vous avez la possibilité de contrôler séparément chaque propriété des objets en désactivant cette option. Ce faisant, le menu déroulant Propriété devient disponible et propose une courbe de vitesse pour chaque propriété de symbole répertoriée.

La liste suivante décrit les propriétés qui apparaissent dans le menu déroulant Propriété et leur incidence sur la courbe de vitesse :

• Position affecte la position du symbole animé via l’interpolation de mouvement.
• Rotation affecte la rotation du symbole animé, comme l’exemple de la Figure 3.
• Redimensionner affecte la taille du symbole animé.
• Couleur détermine les paramètres d’accélération des transitions de couleurs appliquées à l’instance animée.
• Filtres affecte les filtres appliqués au symbole animé.

Lorsque vous créez une courbe de vitesse pour chaque propriété de symbole, vous appliquez plusieurs effets d’accélération sur un même symbole. L’exemple suivant montre comment appliquer un paramètre d’accélération différent pour les propriétés Position et Filtres d’une étoile.

Lancez la démo suivante pour voir l’animation de l’étoile avec deux paramètres d’accélération (propriétés Position et Filtres), comme illustré dans les Figures 7 et 8 :

La courbe de vitesse de la Figure 7 illustre le paramètre d’accélération de la position de l’étoile via l’interpolation de mouvement.

Fig. 7 : paramètre d’accélération de la propriété Position de l’étoile animée.

La courbe de vitesse de la Figure 8 illustre le paramètre d’accélération du filtre Flou de l’étoile via l’interpolation de mouvement.

Fig. 8 : paramètre d’accélération pour le filtre flou appliqué à l’étoile animée.

Dans l’exemple suivant, une balle qui rebondit vue d’en haut, j’ai appliqué un paramètre d’accélération différent aux courbes de vitesse Redimensionner et Filtres (Figures 9 et 10).

Lancez la démo suivante pour voir l’animation de la balle qui rebondit avec deux paramètres d’accélération différents pour la propriété Redimensionner et le filtre Flou :

Le paramètre Redimensionner (voir Figure 9) crée l’effet de balle qui rebondit, tandis que le paramètre Filtres (voir Figure 10) crée le flou à la fin de l’animation.

Fig. 9 : paramètre d’accélération de la propriété Redimensionner appliqué aux animations de balle qui rebondit.

Fig. 10 : paramètre d’accélération du filtre Flou appliqué à l’animation de balle qui rebondit.

Que faire maintenant

Essayez d’imiter des effets d’animation naturels et explorez les différentes possibilités que vous offre la courbe de vitesse. Créez une interpolation de mouvement simple, ouvrez la boîte de dialogue Accélération et décélération personnalisée et commencez à modifier la courbe de vitesse pour observer la manière dont vos modifications affectent l’animation.

Par ailleurs, les articles suivants vous aideront à comprendre la notion d’accélération et vous expliqueront comment l’utiliser pour créer des effets d’animation :

• Conception et animation de personnages dans Flash 8 : présentation de la « 2D et demi »
• Flash Animation Learning Guide : Applying Easing and Custom Ease-in and Ease-out to Motion Tweens (en anglais)*
• Using the Tween and Transition Classes in Flash MX 2004 (en anglais)*