Accessibilité
Adobe
Se connecter Mes livraisons Mon assistance

L’Editeur de mouvement

Birnou Sébarte Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページにお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links:

Apprenez Flash CS4 Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページにお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links:

Créé:
15 Nov 2008
Niveau de l'utilisateur:
Intermédiaire, Avancé
Produits:
Flash CS4 ou postérieur

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.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player


Conditions requises

Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:

Adobe Flash Professional CS4

Fichiers d'exemple

lrvid4057_fl_fr.zip (ZIP, 665K)

Connaissances à avoir

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 :

  1. 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.
  2. 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.

    mouvement

    Image 1: L’Editeur de mouvement
  3. 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.
  4. Repositionnez la Tête de lecture au début du Scénario.
  5. 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.

    property values

    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:

  1. Déroulez vers le bas l’Editeur de mouvement pour accéder aux propriétés d’Echelle X et Y.
  2. 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.
  3. Pour réduire l’objet interpolé au début de l’animation, tirez le curseur de la propriété Echelle X vers la gauche.

    objet

    Image 3: Dimensionnement d’un objet interpolé
  4. Pour agrandir l’objet interpolé à la fin de l’animation, tirez le curseur de la propriété Echelle X vers la droite.
  5. 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 :

  1. Déroulez vers le bas l’Editeur de mouvement pour accéder à l’emplacement des effets de couleur.
  2. Cliquez sur le bouton Plus. Choisissez Alpha dans le menu contextuel.

    alpha

    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.

  3. 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.
  4. Déplacez la tête de lecture au tiers de l’animation.
  5. 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.

    property keyframe

    Image 5: Création d’une propriété d’image-clé
  6. 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.
  7. 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.

    graphique

    Image 6: Le graphique le l’Editeur de mouvement
  8. Tirez la propriété d’image-clé jusqu’à 100%.
  9. 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 :

  1. 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).
  2. 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.
  3. Choisissez également Simple (lent) depuis le menu accélération pour la propriété Y.

    accélération

    Image 7: Application d’une accélération
  4. 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.

    animation

    Image 8: Décélération d’une animation
  5. Testez le fichier et prévisualisez l’animation en choisissant Contrôle > Tester l’animation.

Pour aller plus loin…

Creative Commons License
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported

A propos des auteurs

Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページにお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links:

Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページにお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links: