novembre

Commencer avec Djehouti – 7/ La timeline

Djehouti s’équipe aujourd’hui d’une Timeline en version beta qui permet d’animer tous les éléments présents sur la scène dans le temps.

 

1/ Activer la Timeline

Par défaut, à l’ouverture d’un projet, dans l’éditeur de page, la timeline n’est pas visible. Il est donc necéssaire de l’activer. Vous pouvez le faire à n’importe quel moment. Cependant, il est fortement conseillé de ne pas l’activer puis la désactiver, car cela pourrait entrainer des problèmes sur votre page.

activation-timeline

 

2/ Les éléments dans la Timeline 
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).
elements

3/ La Timeline en détail

element-timeline-1

Afficher les détails du calque : en cliquant sur la petite flèche, vous faites apparaitre les options disponibles pour chaque claque.

– Position : verticale et horizontale

– Opacité : de 0 à 100%

– L’échelle : largeur et hauteur

– Rotation : de -360 à 360 °

– Visible : cette option permet de rendre visible ou invisible un élémént. L’option visible / invisible ne correspond pas au bouton de visualisation que l’on trouve sur les calques. Un élément en invisible dans la timeline sera considéré comme inexistant, alors que l’option de visualisation que l’on trouve dans les calques sert juste au confort de travail.

 

• Le curseur et le time code du curseur : sont là pour indiquer où l’on se trouve dans la timeline.

 

• Visualisation globale des points clés : quand les options de calque sont masquées, cela permet de voir où sont placés les différents points clés déjà créés. On ne peut en revanche pas agir dessus.

 

• Détails des points clés : cela permet de voir en détails tous les points clés créés, sur quelles options ils sont appliqués, et de les supprimer (en cliquant sur la touche « suppr » du clavier)

 

• Ajout de points clés : Pour l’ajout de de points clefs il faut dissocier deux choses.

 

– L’ajout de points clés sur toutes les option : pour cela il faut cliquer sur le petit rond (entouré de 2 fleches) qui se trouve sur le calque dans la timeline, et cela créera une serie de 5 points clés (1 pour chaque option) à l’endroit où se trouve le curseur.

 

– L’ajout d’un point clé pour une option : pour cela il faut cliquer sur le petit rond (entouré de 2 fleches) qui se trouve en face de l’option concernée, et cela créera un point clé à l’endroit où se trouve le curseur.

 

• Mettre une vidéo en master : Quand on veut caler des éléments sur ou en lien avec une vidéo, c’est à dire qui des éléments qui doivent apparaitre à un moment donné d’une vidéo, il faut mettre la vidéo référante en master. Cela à pour but que les éléments restent toujours calés même si la vidéo à des ralentissements dû aux connections internet.

 

Pour mettre la vidéo en master il faut cliquer sur le triangle gris, ainsi il devient rouge : la vidéo est en master. Il faut savoir que seule les vidéos uploadées dans Djehouti peuvent être mises en master. Ce n’est pas possible pour les vidéos issues de Youtube, Viméo, Dailymotion.

 

4/ Animer avec la Timeline

 

Avant toute chose il faut bien comprendre que l’animation avec la timeline et l’animation par action de clic / survol / roll-out sont deux choses differentes. Il est bien entendu possible d’agir sur la timeline par des actions de clic, mais il est aussi possible d’établir des animations par clic / survol / rool-out en parallèle des animations de la timeline. (Par exemple, sur la timeline on définit une animation qui fait apparaitre un menu, et les boutons de ce menu font apparaitre des élément par action de clic).

Pour ce qui est de l’animation avec la Timeline, on distingue 3 possibilités.
 
Animer un ou des éléments Je vais faire arriver mes éléments les uns après les autres. Les images arriverons de la droite en 1 seconde, puis les textes arriveront de la gauche et passeront de 0 à 100% en 1 seconde une fois les images arrivées.
 
• Étape 1 :
animer-element-etape1
1- Je place mon curseur au début de la timeline.

2- Puis je mets les éléments que je veux animer ( ici les textes et les images ) hors de la zone de scène.

• Étape 2 :

 

animer-element-etape2
1- Je place le curseur de la timeline à 1seconde

2- Je sélectionne les deux images et je les place dans la scène, là où je veux qu’elles arrivent.
3- Un point clé de déplacement s’est automatiquement créé.
• Étape 3 :
animer-element-etape3
1- Je vais créer des points clés de déplacement et d’opacité sur tous les calques textes. Je fais cette operation car sinon l’animation de déplacement commencerait depuis le début. Vu que je veux que l’animation commence au bout d’une seconde je définis qu’à une seconde les éléments textes sont toujours à l’exterieur.

2- Une fois créés les points clés – Les actions sur la Timeline – Les actions boutons qui agissent sur la Timeline.
3- Dans les propriétés de chaque calque texte, je baisse l’opacité à 0%.
• Étape 4 :
animer-element-etape4

1- Je place le curseur à 2 secondes

2- Je passe l’opacité des calques textes à 100% (les points clés d’opacité apparaissent), puis je viens placer les calques là ou je veux. (les points clés de déplacement apparaissent.)

 

Voilà, l’animation d’arrivé des éléments est achevée.

Les actions Timeline

 

activer-action-timeline

 

 

Pour accéder aux actions de la timeline il suffit de cliquer sur le petit rond dans la partie action de la timeline.

Un panneau en pop-in apparait :

 

panneau-action-timeline

 

 

– Redirection : permet d’acceder à une autre page du projet au moment souhaité.

– Aller à : permet d’aller directement à un instant donné de la timeline.

– Jouer un média : permet de jouer automatiquement un média son, ou vidéo.

– Pause : permet  de mettre en pause la lecture de la timeline.

 

 

Les éléments qui agisse sur la timeline

Il est possible dans Djehouti de créer sur chaque élément des actions clic / survol / roll-out qui agissent sur la timeline.

Pour cela il suffit de sélectionner l’élément sur lequel on veut mettre l’action de clic ou de survol ou de roll-out, puis dans les paramètres « transitions et interactions » de choisir l’état souhaité.

 

 

panneau-action-clic-timeline

 

 

 

1- Dans la fenêtre en pop-in, à « appliquer » choisir « Scène »

2- Dans « paramètres » choisir l’action voulue :

Timeline play : lance la Timeline

Timeline pause : met la Timeline en pause

Timeline play/pause : un clic lance la Timeline, un second clic la met en pause

Timeline Seek to : envoie la Timeline à un instant donné.

 

Il est bien sur possible d’appliquer à tout ces actions avec un délai.