[vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ min_height= »220″][vc_column width= »1/2″][vc_empty_space height= »30px »][vc_column_text css= ».vc_custom_1448977012755{margin-bottom: -10px !important;} »]

Utiliser la timeline

[/vc_column_text][vc_column_text letter_spacing= » » css= ».vc_custom_1474975289752{margin-right: 5% !important;} »]

La Timeline permet d’animer tous les éléments présents sur la scène dans le temps.

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474975336596{margin-left: 5% !important;} »]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top= » »][vc_column width= »5/6″][vc_single_image image= »123″ img_size= »full » alignment= »center »][vc_empty_space height= »10px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Voici une liste des raccourcis clavier qui pourront vous aider dans l’éditeur :

• Clic image clé > séléction
• Clic + shift images clés > multi-séléction
• 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éselectionne les points clés (des calques déployés) après la tête de lecture
• Alt + shift + B > Déselectionne 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é selectionnés > déplace les point clé selectionnés d’une frame
• Alt + fleche + shift + points clé selectionnés > déplace les point clé sélectionnés de 10 frames
• Alt + retour arrière > supprime le point clé selectionné
• Alt espace > met en lecture la timeline

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5668″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463670790413{margin-right: 5% !important;} »][vc_empty_space height= »10px »][vc_column_text letter_spacing= » »]Racontr dispose désormais 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.

1. Ici nous avons créé un rectangle
2. puis dupliquez votre timeline en cliquant sur la petite flèche en bas à droite.
3. 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.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][/vc_column_inner][/vc_row_inner][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_single_image image= »527″ img_size= »full » onclick= »link_image » css= ».vc_custom_1446814758413{margin-right: 5% !important;} »][vc_empty_space height= »20px »][vc_row_inner][vc_column_inner width= »1/2″][vc_column_text letter_spacing= » »]

1. Calques : Zone où apparaissent vos calques. Dans la timeline, vous retrouvez les même éléments que dans la palette des calques. Ils ont le même nom et la même position (profondeur).
2. Cliquez sur l’icône pour faire apparaître les options disponibles pour chaque calque.
3. Paramètre des calques : Position (verticale et?horizontale), Opacité (de 0 à 100%), Echelle (hauteur et largueur), Rotation (de -360° à 360°)
4. Le curseur et le time code du curseur : Ils sont là pour indiquer où l’on se trouve dans la timeline. Pour exemple, le curseur ci-dessus et positionné a 24 secondes sur la timeline (00:00:24)
5. Détails des points clés : Pour créer une animation vous devrez créer des points clefs. Ceux-ci peuvent être déplacés en cliquer-glisser sur la time line mais ils peuvent être aussi supprimés avec les touches « alt » + « Retour arrière ».
6. Choisir la visibilité de vos calques

[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/2″][vc_column_text letter_spacing= » »]

7. 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.
8. Cacher, visibilité, verrouiller et supprimer le calque.
9. Actions de timeline
10. Cacher et visibilité de tous les calques
11. Options de timeline
12. Jouer la timeline (aperçu)
13. Zoom à l’intérieur de la timeline

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height= »50px »][vc_row_inner][vc_column_inner width= »1/2″][vc_single_image image= »5662″ img_size= »full » onclick= »link_image »][vc_column_text letter_spacing= » »]Options de timeline

1. Cliquez sur « timeline option »
2. Une fenêtre apparaît avec diffèrentes options :
   Lecture automatique de la timeline
   Boucle infinie de timeline
   Scroll Timeline
   Vitesse de lecture

[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/2″][vc_single_image image= »530″ img_size= »full » onclick= »link_image »][vc_column_text letter_spacing= » »]Actions de la timeline

1. Cliquez sur le carré bleu au dessus de vos calques
2. 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.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]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. Grace à cela, les éléments restent toujours calés même si la vidéo à des ralentissements causés par les connexions internet.

1. Cliquez sur l’icône en forme d’horloge à côte de votre vidéo
2. 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, Viméo, Dailymotion.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]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.

1. Assurez vous que votre curseur est au temps « 0 » de votre Timeline.
2. Sélectionner le calque à déplacer.
3. Déplacer votre curseur , choisissez un temps adapté à votre animation. Si vous posez votre curseur à 2 seconde l’animation de déplacement mettra donc 2 secondes pour se jouer. Referez-vous au time code du curseur..
4. Votre curseur est positionné, déplacez maintenant votre calque dans votre scène. Vous pouvez utiliser le raccourcis clavier « Shift » + « Flèche » pour déplacer vos calques. Automatiquement une clé se crée dans votre timeline..

 

Bravo! Vous venez de créer une animation de position ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]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.

1. Sélectionnez votre calque
2. Déplacez votre curseur
3. Changez l’opacité dans la fenêtre des paramètre du calque. Automatiquement une clé se crée dans votre timeline.

Bravo ! Vous venez de créer une animation de rotation
Paramètre d’opacité
Idem que pour la rotation[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]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.

1. Sélectionnez votre calque
2. Déplacez votre curseur
3. A l’aide des coins de l’objet et en cliquer-glisser, agrandissez ou réduisez votre objet. Dans notre exemple (cf : vidéo) nous avons élargi le rectangle. Pour les photos vous devrez garder l’homothésie de l’image. Pour se faire cliquer-glisser un coin de l’image, en maintenant la touche  » Shift » enfoncée.

Bravo! Vous venez de créer une animation d’échelle.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]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. 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 être au début de l’animation. (Cf : vidéo ci-dessous)[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Etape : Créer la fin de l’animation

1. Pour commencer, importez vos éléments sur la scène puis créez votre mise en page.
2. Ouvrir la timeline.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »552″ img_size= »full »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

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

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »555″ img_size= »full »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Etape 2 : Créer le début de l’animation

1. Déplacez maintenant votre curseur au temps « 0 » sur les point clés
2. Nous allons animer l’image, pour se faire, sélectionnez là. La fenêtre des propriétés s’ouvre
3. 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%.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »558″ img_size= »full »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

1. Voila votre image à disparu. Nous allons nous occuper des deux blocs texte, vérifiez que vous êtes toujours au temps « 0 » sur la timeline
2. Sélectionnez le bloc de texte (le titre). Nous allons lui assigner un déplacement du haut vers le bas (paramètre de position).
3. En cliquant sur Shift plus la flèche vers le 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)
4. Faites la même chose avec l’autre bloc texte, mais cette fois ci vers le bas.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »561″ img_size= »full »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Move the cursor along the timeline to make sure your animation plays properly. Congratulations, you’ve just completed your interface![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width= »1/6″][vc_empty_space height= »50px »][vc_widget_sidebar sidebar_id= »sidebar-1″][/vc_column][/vc_row][vc_row padding_top= »0″ padding_bottom= »0″][vc_column][vc_empty_space][vc_single_image image= »132″ img_size= »full » alignment= »center »][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/3″][vc_empty_space][vc_column_text]

Plus de
tutoriels :

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]

• Importer une vidéo
• Importer un son
• Importer une image
• Créer un calque d’action

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

[/vc_column_text][/vc_column][/vc_row]