Avec la fonction de scroll timeline, vous pouvez synchroniser la timeline et le contenu de votre projet. Il sera alors possible de scroller (faire défiler) la timeline en utilisant la souris ou l’iPad !
Voici les différentes possibilités de RacontR que nous allons aborder :
Activer le scroll timeline
Méthode : cinématique inversée
Exemple, animation avec un effet de flou
Optionnel : Pour pouvoir faire ce tutoriel par vous même, téléchargez ce fichier d’images !
Si vous utilisez vos propres images pour ce tutoriel et que vous voulez savoir comment exporter un élément .jpg ou un .png, nous vous invitons à consulter ce lien pour apprendre à le faire sur Photoshop ou thegimp.
Une fois votre projet paramétré et vos images importées dans RacontR, nous allons pouvoir entrer dans le vif du sujet en créant une page et en nous rendant dans l’éditeur de page.
Activer le Scroll Timeline
Pour activer le scroll timeline, allez dans l’onglet de configuration de votre timeline.
Activez le « Scroll Timeline » en cliquant sur la checkbox.
Si vous le souhaitez, vous pouvez ajuster la vitesse de la timeline. Il est alors possible de varier la vitesse de votre animation. Par exemple, si vous utilisez une souris à molette, le défilement sera plus lent que sur un trackpad. Il est donc important de régler ce paramètre en fonction de votre matériel informatique.
Méthodologie : la cinématique inversée
La cinématique inversée est une technique d’animation basée sur le respect de contraintes angulaires dans les articulations d’un objet. Cela simplifie énormément le travail de l’animateur car, par exemple, pour bouger un ensemble d’objet, il suffit de dire dans quelle position ils doivent se trouver à la fin du mouvement et le reste est calculé automatiquement.
Première étape
Pour commencer, déplacez votre curseur au temps « 0 ».
Il est recommandé sur RacontR d’importer tous les éléments au tout début de la timeline (temps « 0 ») et de les positionner à leur place d’apparition. Une fois fait, vous pourrez les masquer et les faire apparaître à tout moment sur la timeline.
2. Maintenant, importez vos médias dans la page.
Etape 2
3. Créez votre mise en page comme elle doit être à la fin de l’animation.
4. Une fois fait, avancez le curseur de la timeline suffisamment pour que votre animation puisse se faire.
5. Cliquez maintenant entre les flèches de vos calques pour verrouiller leurs positions: des points-clés apparaissent sur la timeline.
6. Répétez l’opération sur tous les calques concernés.
Etape 3
Vous allez maintenant créer l’animation. Déplacez votre curseur au début de votre timeline ( au temps « 0 ») là où il y a vos clés, puis sur votre scène déplacez vos éléments.
Pour ce faire, sélectionnez-les un à un, puis avec les flèches de votre clavier, déplacez les. Un clic sur la flèche du haut de votre clavier équivaut à un déplacement d’un pixel.
Vous pouvez aller plus vite, toujours avec les flèches, mais en maintenant le touche « shift » enfoncée : votre déplacement se fera de dix pixels en dix pixels. Une fois fait, déplacez le curseur de droite à gauche pour contrôler l’animation. Vous devez lancer l’aperçu pour jouer votre animation avec le scroll.
Etape 4
Nous allons maintenant créer l'animation de sortie, pour faire disparaître les éléments de la page.
La méthode est la même: avancez sur la timeline;
puis ajoutez des points-clés aux calques.
Cela va permettre de laisser un certain temps les éléments sur la page, puis avancez encore, en laissant suffisamment de temps pour jouer l’animation de sortie.
Etape 5
4. Sans forcément ajouter des points-clés sur la timeline (ceux-ci feront leur apparition automatiquement quand vous déplacerez un élément) et comme expliqué précédemment,
5. vous devez réaliser votre animation de sortie comme vous le souhaitez: par la droite la gauche, ou par le bas ou le haut, en déplaçant simplement vos images ou vos textes.
Exemple: animation avec un effet de flou
Pour cet exercice vous aurez besoin de deux images: une nette et une floue (utilisez un logiciel de PAO pour réaliser ces images). Si vous le souhaitez, vous pouvez utiliser les photos jointes à ce tutoriel (voir en introduction le lien).
Cliquez sur l’œil pour les masquer.
Une fois fait, déplacez votre curseur au temps « 0 »,
puis importez les deux images dans la scène.
Déplacez les de façon à ce que l’image flou soit au dessus de l’image nette et parfaitement superposée.
Vos images sont l’une sur l’autre. Sélectionnez l’image floue en cliquant dessus, puis dans les propriétés de l’image mettez son opacité à « 0 ». Ce que nous voulons faire pour donner l'impression que la photo se floute, c’est faire apparaître l’image floutée par dessus l’image nette en jouant sur son paramètre d’opacité. Retournez sur la timeline et masquez les images.
7. Pour créer l’animation d'apparition de l’image ( cf : Méthodologie, la cinématique inversée), avancez la timeline jusqu’à la disparition de l’animation précédente.
8. Cliquez sur « l’œil » des deux calques pour les faire apparaître sur la scène.
9. Ajoutez-leur des points-clés pour verrouiller leurs positions,
10. Avancez encore sur la timeline suffisamment pour que l’animation puisse se faire (environ une seconde) et ajoutez des points-clés.
11. Déplacez maintenant votre timeline sur les point-clés précédents et sélectionnez les deux calques (net et flou) dans la fenêtre des calques.
12. Maintenez « shift » appuyé pour sélectionner les deux calques puis à l’aide des flèches de votre clavier, déplacez-les vers le bas. Utilisez « shift » pour déplacer les calques de 10 pixels en 10 pixels.
Pour créer l’animation d’apparition de l'image, nous allons jouer sur l’opacité. L’image floue va apparaître progressivement donnant l’impression d’un flou photographique. Avancez sur la timeline puis mettez l’opacité de l’image floue à 100%.