La Timeline permet d’animer tous les éléments présents sur la scène dans le temps.
Voici les différentes possibilités de RacontR que nous allons aborder :
Raccourcis clavier
La timeline en détail
Utiliser une vidéo en master média
Technique d’animation #1: Linéaire
Technique d’animation #2: L’animation reversée
Raccourcis claviers qui pourront vous aider dans l’éditeur :
Clic image clé > sélection
Clic + shift images clés > multi-sélection
Alt + A > sélectionne les points clés (des calques déployés) après la tête de lecture
Alt + B > sélectionne les points clés (des calques déployés) avant la tête de lecture
Alt + shift + A > Désélectionne les points clés (des calques déployés) après la tête de lecture
Alt + shift + B > Désélectionne les points clés (des calques déployés) avant la tête de lecture
Alt + fleche > déplace la tête de lecture d’une frame
Alt + fleche + shift > déplace la tête de lecture de 10 frames
Alt + fleche + points clés selectionnés > déplace les points clés selectionnés d’une frame
Alt + fleche + shift + points clés selectionnés > déplace les points clés sélectionnés de 10 frames
Alt + retour arrière > supprime le point clé selectionné
Alt espace > met en lecture la timeline
RacontR dispose maintenant d’une Timeline plus performante et ergonomique. Désormais, plus besoin d’activer la timeline, elle l’est par défaut. Commencez par importer des éléments sur votre scène.
Ici nous avons créé un rectangle (illustration ci-dessus)
puis dupliquez votre timeline en cliquant sur la petite flèche en bas à droite.
La timeline se déplie et nous retrouvons notre rectangle en bas à gauche.
C’est à cet endroit précis que vous allez régler les différents paramètres d’actions timeline de l'objet.
La timeline en détail :
Calques : zone où apparaissent vos calques. Dans la timeline, vous retrouvez les mêmes éléments que dans la palette des calques. Ils ont le même nom et la même position (profondeur).
Cliquez sur l’icône pour faire apparaître les options disponibles pour chaque calque.
Paramètres des calques : position (verticale et horizontale), opacité (de 0 à 100%), échelle (hauteur et largueur), rotation (de -360° à 360°)
Le curseur et le time code du curseur : ils indiquent où l’on se trouve dans la timeline. Pour exemple, le curseur ci-dessus est positionné à 8 secondes sur la timeline (00:00:8)
Détails des points clés : Pour créer une animation vous devrez créer des points clés. Ceux-ci peuvent être déplacés en cliquer-glisser sur la timeline mais ils peuvent être aussi supprimés avec les touches « alt » + « retour arrière ».
Choisir la visibilité de vos calques
L’ajout de points clés sur tous les paramètres du calque : pour cela il faut cliquer sur le petit carré qui se trouve sur le calque dans la timeline et cela va créer une série de 5 points clés (1 pour chaque option : position, opacité, rotation, échelle, visibilité), à l’endroit où se trouve le curseur.
Cacher, voir, verrouiller et supprimer le calque.
Actions de timeline
Cacher, voir et verrouiller tous les calques
Options de timeline
Jouer la timeline (aperçu)
Zoom à l’intérieur de la timeline
Options de timeline (illustration ci-dessus)
Cliquez sur « timeline options »
Une fenêtre apparaît avec différentes options : lecture automatique de la timeline (boucle infinie de la timeline - scroll de la timeline - vitesse de lecture)
Actions de la timeline
Cliquez sur le carré bleu au-dessus de vos calques
Une fenêtre apparaît avec différentes options. Pause : mets la timeline entièrement en pause. Redirection : aller automatiquement à une autre page du projet à ce moment précis. Aller : redirige vers un point précis, une seconde précise de la timeline. Ajouter un dispatch click sur un élément.
Utiliser la vidéo en master média sur la timeline
Sur RacontR, vous pouvez remplacer la timeline par défaut par la timeline d’une vidéo (vidéo probablement importée sur votre page). Pour faire simple, quand vous déplacerez le curseur, c’est votre vidéo que vous verrez se lire en même temps. L’avantage de cette propriété est de pouvoir créer des interactions sur la vidéo à un moment précis. Grâce à cela, les éléments restent toujours calés même si la vidéo a des ralentissements causés par les connexions internet.
Cliquez sur l’icône en forme d’horloge à côte de votre vidéo
Quand la timeline de la vidéo devient bleue, c’est qu’elle est en master !
Important : Il faut savoir que seules les vidéos uploadées dans RacontR peuvent être mises en master. Ce n’est pas possible pour les vidéos issues de YouTube, Vimeo, Dailymotion.
Technique d’animation #1 : linéaire
Paramètres de position :
Le paramètre de position va vous permettre d’animer des déplacements de vos calques. Nous allons voir comment procéder.
Assurez-vous que votre curseur est au temps « 0 » de votre timeline.
Sélectionnez le calque à déplacer.
Déplacez votre curseur, choisissez un temps adapté à votre animation. Si vous posez votre curseur à 2 secondes l’animation de déplacement mettra donc 2 secondes pour se jouer. Référez-vous au time code du curseur.
Votre curseur est positionné, déplacez maintenant votre calque dans votre scène. Vous pouvez utiliser le raccourci clavier « Shift » + « Flèche » pour déplacer vos calques. Automatiquement une clé se crée dans votre timeline..
Paramètres de rotation :
Le principe d’animation est le même que celui pour la position, à la différence que vous devrez régler la rotation dans les paramètres de l'objet.
Sélectionnez votre calque
Déplacez votre curseur
Changez le degré de rotation de l'objet dans la fenêtre de ses paramètres. Automatiquement, une clé se crée dans votre timeline.
Paramètres d’opacité : Même manipulation que pour la rotation
Paramètres d’échelle : L’animation échelle va agir sur la hauteur et la largeur de votre objet. Par exemple vous pourrez animer un rectangle qui s’élargit ou créer un zoom sur une photo.
Sélectionnez votre calque
Déplacez votre curseur
A l’aide des coins de l’objet et en cliquer-glisser, agrandissez ou réduisez votre objet. Pour les photos vous devrez garder l'homothétie de l’image. Pour ce faire cliquez-glissez un coin de l’image, en maintenant la touche "Shift" enfoncée.
Technique d’animation #2 : 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’objets, il suffit de dire dans quelle position ils doivent se trouver à la fin du mouvement et le reste est calculé automatiquement. Pour faire simple on commence par ordonner ses éléments, comme ils doivent être à la fin de l’animation, puis on revient en arrière sur la timeline pour positionner ses éléments comme ils doivent l'être au début de l’animation.
Etape : Créer la fin de l’animation
Pour commencer, importez vos éléments sur la scène puis créez votre mise en page.
Ouvrir la timeline (illustration ci-dessous)
Par défaut, il faut que votre mise en page soit créée au temps « 0 » de votre timeline. Nous pouvons voir que des point clés ont été crées automatiquement.
Déplacez votre curseur sur la timeline: ici nous l’avons déplacé au temps 00:01:40. L’animation mettra donc 1 seconde 40 pour se jouer.
Verrouillez la position de vos calques sur la timeline en ajoutant des points clés. Cliquez sur le trait entre les flèches pour ajouter des points clés.
Etape 2 : Créer le début de l’animation
Déplacez maintenant votre curseur au temps « 0 » sur les point clés
Nous allons animer l’image, pour se faire, sélectionnez là. La fenêtre des propriétés s’ouvre
Nous voulons, dans notre exemple, jouer sur l’opacité de l’image, la faire passer de 0 à 100% d’opacité. Dans les paramètres mettre l’opacité à 0%.
Voila votre image a disparu. Nous allons nous occuper des deux blocs texte, vérifiez que vous êtes toujours au temps « 0 » sur la timeline.
Sélectionnez (illustration ci-dessous) le bloc de texte (le titre). Nous allons lui assigner un déplacement du haut vers le bas (paramètres de position).
En cliquant sur Shift + Flèche haut, déplacez le bloc texte vers le haut jusqu’à ce qu’il disparaisse de votre scène (dans l’éditeur de page il est visible mais ne le sera pas à la publication)
Faites la même chose avec l’autre bloc texte, mais cette fois-ci vers le bas.
Bougez le curseur le long de la timeline afin de vous assurer que votre animation se déroule comme voulu.
Votre animation est terminée.