[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_1448975736835{margin-bottom: -10px !important;} »]

Utiliser le scroll timeline

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

Avec la fonction de scroll timeline, vous pouvez synchroniser la timeline et le contenu de votre projet. Il sera alors possible de scroller la timeline en utilisant la souris ou l’Ipad !

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474978442983{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][vc_column_text letter_spacing= » »]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.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height= »50px »][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= » »]

1. Pour activer le scroll timeline, allez dans l’onglet de configuration de votre timeline.
2. Activez le « Scroll Timeline » en cliquant sur la checkbox.
3. Si vous le souhaité, vous pouvez ajuster la vitesse de 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.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5657″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463670295604{margin-right: 5% !important;} »][/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= »30px »][/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.

Première étape

1. Pour commencer, déplacez votre curseur au temps « 0 ».

Il est recommandé sur Racontr d’importer tout les éléments au tout début de la timeline au temps « 0 » et de les positionner à leur place d’apparition. Une fois fait, vous pourrez les masquer et les faire apparaitre à tout moment sur la timeline.

2. Maintenant importer vos médias dans la page.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »606″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447673209804{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]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.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »609″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447673721721{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]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 clefs, puis sur votre scène déplacez vos éléments.

Pour se 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 pour aller plus vite toujours avec les flèches mais en maintenant le touche « shift » enfoncé : 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.[/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 4

Nous allons maintenant créer l?animation de sortie, pour faire disparaître les éléments de la page.

1. La méthode est la même: avancez sur la timeline;
2. puis ajoutez des clés aux calques.
3. 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.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »615″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Etape 5

4. Sans forcement ajouter des clés sur la timeline (celles-ci se mettront 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.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »618″ img_size= »full » onclick= »link_image »][/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][vc_column_text]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Pour cet exercice vous aurez besoin de deux images: une nette et une flou (utiliser un logiciel de PAO pour réaliser ces images). Si vous le souhaitez, vous pouvez utiliser les photos jointes à ce tutoriel.

1. Cliquez sur l’œil pour les masquer.
2. Une fois fait, déplacez votre curseur au temps « 0 »,
3. 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.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »624″ img_size= »full » css= ».vc_custom_1447675700510{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Vos images sont l’une sur l’autre, sélectionnez l’image flou en cliquant dessus, puis dans les propriétés de l’image mettre son opacité à « 0 ». Ce que nous voulons faire pour donner l?impression que la photo se floute, c’est de 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.[/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= » »]

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-leurs des 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.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »630″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Pour créer l’animation d’apparition de l?image, nous allons jouer sur l’opacité. L’image flou va apparaître progressivement donnant l’impression d’un flou photographique (cf vidéo ci-dessous ). Avancez sur la timeline puis mettre l’opacité de l’image flou à 100%.[/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″ 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]