Motion 5 : Créer un chemin d'animation

Un tutoriel sur comment animer un chemin d'animation sur une carte géographique, un classique du genre. Pour cette excercice, nous utiliserons les courbes de Bézier et pour commencer, on programmera manuellement le déplacement. Ensuite, on verra comment faire cet effet avec un le comportement "Chemin activé".

Animer une ligne sur une carte :

Nous allons créer une animation de ligne pour simuler une animation sur une carte géographique. Dans un premier temps il faudra importer une carte dans un projet Motion 5.

Créez 2 groupes que vous nommerez «Carte» et «Chemin animé».
Sélectionnez le groupe «Carte», puis Importez une carte géographique.

N’oubliez pas de faire Shift+Z sur le Canevas pour Adapter la vue complète du visualiseur.
Pour dimensionner la carte qui n’occupe pas tout l’écran, vous utiliserez le raccourci Shift+Alt+déplacement souris. Ce qui aura pour effet de zoomer dans la carte en respectant les dimensions avec Shift et au centre avec Alt.

Créer le chemin d’animation :

Pour animer un chemin, nous allons créer les lignes avec l’outil de Bézier (le même que celui que nous avons utiliser pour les masques).

Avant tout, sélectionnez le groupe «Chemin animé», puis l’outil de bézier dans la barre des outils ou en utilisant le raccourci B.
Vérifiez avant de démarrer le tracé, que votre tête de lecture est positionnée à l’endroit où démarrera l'animation sur la timeline.

Pour bien voir ce que l’on fait, on va zoomer avec le raccourci Z dans l’image. Puis, on ré-appuie sur B pour valider l’outil de Bézier et l’on va démarrer le tracé.

Cliquez sur le point de départ, et positionnez vos points en utilisant le clic pour valider les courbes des points.

Sur le dernier point, on peut apercevoir deux lignes blanches avec des points de contrôle qui vous permettront de régler la courbure du tracé. Par la suite, vous pourrez modifier un seul point en utilisant la touche Alt.
Si vous avez besoin de modifier le chemin, cliquez sur un point avec clic droit et passez en mode lissage, les deux points de contrôle apparaitront.

Lorsque le chemin vous plait, appuyez sur Enter. Une ligne blanche apparaitra.... vous pourrez toujours modifier le tracé par la suite.

Vous pouvez régler la taille et la couleur du tracé dans les options.

Idem si vous avez besoin d’aller vite, vous pouvez utiliser la palette flottante, en dé-validant le contour, vous pourrez modifier le chemin d’animation et mieux voir le tracé de la route sur la carte :

Animer le chemin d’animation :

Il ne vous reste plus qu’à animer le «Décalage du dernier point». Placez vous curseur au début de l’animation, mettez 0 sur l’option «Décalage dernier point». Validez un point clé en cliquant sur le triangle à droite de l’option.

Placez votre curseur à la durée de l’effet, puis remettez à 100% pour valider le tracé.

Il ne vous reste plus qu’à jouer l'animation.... en appuyant sur la barre espace.

Réaliser l’effet avec un comportement de Motion 5 :

Nous avons réalisé l’animation en programmation manuelle, mais nous pouvons utiliser un comportement qui nous donnera plus d’options pour l’effet.
Dans la Bibliothèque > Comportements > Forme > Ecriture activée.
Placez le comportement sur le calque «Chemin Animé»

Etudions les options du comportement :

On peut tracer et effacer le trait de notre animation, jouer sur la longueur du trait, son décalage, accélérer ou ralentir le tracé, personnaliser sa vitesse... on a toutes les options possibles pour l’effet.
Pour accélérer la vitesse du tracé, raccourcissez la calque dans la timeline.

Changer l’apparence du trait :

Motion 5 vous permet de personnaliser votre trait avec de nombreuses possibilités. Pour cela rendez-vous dans la palette flottante en cliquant sur «Style de forme».
Vous aurez accès à de nombreuses formes avec des options que vous pourrez modifier par la suite.

Les options sont les suivantes, allez dans l’Inspecteur > Forme > Trait :

Télécharger le projet Motion 5 :