Utilisez l’Editeur de mouvement pour contrôler précisément l’interpolation des différentes propriétés. Créez et appliquez des courbes d’accélération personnalisées.
Niveau intermédiaire pour l’animation et l’interpolation dans Flash
Utilisation de l’Editeur de mouvement
Adobe® Flash® CS4 vous permet de contrôler parfaitement vos interpolations de mouvement en utilisant l’Editeur de mouvement. Dans ce tutoriel, vous apprendrez à utiliser l’Editeur de mouvement pour contrôler chacune des propriétés de vos animations.
Utilisation de l’Editeur de mouvement
L’Editeur de mouvement vous permet de visualiser votre animation propriété par propriété. Pour utiliser l’Editeur de mouvement :
Sélectionnez un élément interpolé depuis une animation. Sélectionnez la première image-clé de l’interpolation pour cet élément dans le scénario. Cette étape est délicate, parce qu’il est nécessaire de sélectionner l’animation dans le scénario avant d’utiliser l’Editeur de mouvement.
Cliquez sur l’onglet de l’Editeur de mouvement. L’onglet Editeur de mouvement est situé à côté de celui du Scénario juste au-dessus de la Scène. Dans le haut de l’Editeur de mouvement, vous pouvez constater les propriétés X et Y de l’animation.
Image 1: L’Editeur de mouvement
Pour avoir un aperçu de l’animation, bougez la tête de lecture de l’Editeur de mouvement. Chacune des propriétés est remise à jour quand vous faites défiler le Scénario.
Repositionnez la Tête de lecture au début du Scénario.
Pour modifier la valeur d’une propriété, utilisez le texte actif souligné de bleu pour la propriété désirée. Par exemple, pour changer la valeur de la propriété X, tirez le texte Position X vers la droite pour augmenter la valeur de la propriété, et vers la gauche pour la diminuer.
Image 2: Modification des valeurs de propriétés
Remarque: En tirant le curseur vers la droite, l’interpolation de mouvement de la Scène bougera également vers la droite. En tirant le curseur vers la gauche, l’interpolation de mouvement de la Scène bougera également vers la gauche.
Modifier d’autres propriétés
L’Editeur de mouvement vous permet d’accéder à toutes les propriétés qui peuvent être animées, pas seulement les propriétés X et Y. Par exemple, pour redimensionner votre objet quand il se déplace vers la gauche, utilisez les propriétés d’Echelle X et Y:
Déroulez vers le bas l’Editeur de mouvement pour accéder aux propriétés d’Echelle X et Y.
Assurez-vous que les propriétés X et Y sont liées en utilisant l’icône Lien de l’Editeur de mouvement. Cliquez sur l’icône Lien pour lever la liaison des propriétés. Cliquez de nouveau sur l’icône lien pour lier de nouveau les propriétés.
Pour réduire l’objet interpolé au début de l’animation, tirez le curseur de la propriété Echelle X vers la gauche.
Image 3: Dimensionnement d’un objet interpolé
Pour agrandir l’objet interpolé à la fin de l’animation, tirez le curseur de la propriété Echelle X vers la droite.
Faites défiler la tête de lecture de l’Editeur de mouvement pour prévisualiser la nouvelle animation sur la Scène.
Appliquer un effet de couleur
Vous pouvez également appliquer des effets de couleur, comme l’Alpha, depuis l’Editeur de mouvement. Pour appliquer un effet de couleur :
Déroulez vers le bas l’Editeur de mouvement pour accéder à l’emplacement des effets de couleur.
Cliquez sur le bouton Plus. Choisissez Alpha dans le menu contextuel.
Image 4: Choix de l’Alpha depuis le menu contextuel
Remarque: L’Alpha, ou canal Alpha, est la valeur qui contrôle la transparence d’une image ou d’un vecteur dans Flash. En animant la propriété Alpha, vous pouvez changer la transparence d’un objet pendant le déroulement d’une animation.
Assurez-vous que l’animation commence avec un objet ayant un alpha de 0. Amenez la tête de lecture en arrière jusqu’à la première image de l’animation, et alors tirez le curseur Alpha vers la gauche jusqu’à ce qu’il atteigne la valeur 0.
Déplacez la tête de lecture au tiers de l’animation.
Pour créer une nouvelle propriété d’image, cliquez sur l’icône Ajouter ou Supprimer une image-clé, situé en bas à gauche de l’Editeur de mouvement. Une nouvelle image-clé apparaît, représentée par un carré noir dans l’Editeur de mouvement. Laissez la valeur Alpha à 0.
Image 5: Création d’une propriété d’image-clé
Accédez à la fin de l’animation et créez une autre image-clé en appuyant sur la touche Commande/Ctrl et en cliquant sur la dernière image du scénario. Une ligne relie maintenant le second et troisième tiers de l’animation. Cette ligne représente l’animation de la propriété Alpha.
Tirez sur la dernière propriété d’image-clé Alpha vers le haut pour augmenter le pourcentage Alpha. De la même manière, tirez sur la propriété d’image-clé Alpha vers le bas pour diminuer le pourcentage Alpha. Vous remarquerez que vous changez la valeur de la propriété non pas en bougeant le texte actif bleu, mais en utilisant le graphique le l’Editeur de mouvement lui-même.
Image 6: Le graphique le l’Editeur de mouvement
Tirez la propriété d’image-clé jusqu’à 100%.
Prévisualisez l’animation en faisant Contrôle > Entrée. L’objet devrait se déplacer de la droite vers la gauche de la Scène, en augmentant de taille, et en allant de 0 à 100% d’opacité.
Appliquer une accélération
Une autre fonctionnalité qui peut grandement améliorer votre animation est l’application d’une accélération. L’accélération consiste à décélérer ou accélérer une animation de façon à rendre le mouvement plus réaliste. Avant d’appliquer une accélération, prévisualisez l’animation existante. Pour prévisualiser l’animation :
Choisissez Contrôle > Tester l’animation. Une prévisualisation plein écran apparaît. Remontez dans l’Editeur de mouvement jusqu’à trouver les propriétés X et Y. Cliquez sur le menu Accélération situé à la droite de la propriété X. Les options disponibles par défaut dans le menu sont : Aucune accélération et Simple (lent).
Choisissez Simple (lent). Cette option vous permet d’appliquer une accélération de base à votre animation et vous permet de ralentir ou accélérer la fin de votre animation.
Choisissez également Simple (lent) depuis le menu accélération pour la propriété Y.
Image 7: Application d’une accélération
Descendez vers la section Accélération de l’Editeur de mouvement. Tirez le texte actif Simple (Lent) au maximum vers la droite jusqu’à la valeur de 100. La courbe de la zone graphique de l’Editeur de mouvement décélère, ou se courbe de façon convexe. Décélérer de cette façon provoque un ralentissement de l’animation à sa fin.
Image 8: Décélération d’une animation
Testez le fichier et prévisualisez l’animation en choisissant Contrôle > Tester l’animation.