Animate CC 2017 : Les nouveautés

Découvrir l'extrait de code pour les composants HTML5 Canvas

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez maintenant apprendre à associer des extraits de code à un composant HTML5. Suivez le guide.
06:15

Transcription

Je suis maintenant l'heureux propriétaire d'un composant "Vidéo" au format HTML5 mis dans un document au format "Canvas" HTML5. Ce que je souhaiterais faire, c'est rajouter sur ma scène un bouton. Un bouton permettant à l'utilisateur, lorsqu'il clique dessus, de faire lire la vidéo. Pour ce faire il faudra donc que je fasse du code. Eh bien, ce code, je vais le faire en partie parce que la majorité du code va être générée automatiquement par Animate CC. J'ai donc mon lecteur, ce lecteur est relié à une vidéo au format MP4 sur mon disque dur. J'ai décoché les propriétés "Lecture auto", "Contrôles", "En boucle". Je n'ai gardé que "Préchargement". Je vais maintenant rajouter sur ma scène un nouveau composant, un composant HTML5 "Bouton". Pour ce faire, je viens sur Fenêtres. Je viens sur Composants, je clique, je peux aussi faire Ctrl-F7. Dans la liste des composants qui font leur apparition, eh bien ma foi, je viens dans la famille Interface Utilisateur, je peux réduire la vidéo, je ne m'en sers plus puisqu'elle est déjà sur ma scène. Je viens sur Interface Utilisateur, je prends le "Button", je glisse et je lâche. Je ferme cette petite fenêtre Composants. Ce bouton, j'ai eu la bête idée de le mettre sur le même calque que la vidéo, ce qui est vilain donc je vais faire un clic droit dessus, et je vais dire que je veux "Répartir dans les calques", de manière à obtenir un calque pour le bouton que je vais baptiser "Button", et un calque pour le lecteur, calque que je vais baptiser "Lecteur vidéo". Bien. Maintenant mon lecteur, je vais lui donner un nom. Pourquoi je vais lui donner un nom ? Eh bien tout simplement parce que dans le code lié au bouton, il faudra bien que je dise à un moment donné « c'est ce lecteur-là que je veux activer ». Pour pouvoir dire « c'est ce lecteur-là », il faut que je le nomme, je clique donc sur mon lecteur, je viens dans les propriétés sur le "Nom de l'occurence" et là je vais l'appeler "lecteur", tout simplement ou tout autre nom qui me passe par la tête. Je valide avec Entrée. Je vais maintenant que j'ai mon bouton, cliquer sur ce bouton, je vais changer son étiquette, on va marquer Lecture, l'étiquette c'est le texte que l'utilisateur va voir sur le bouton qu'il comprenne à quoi sert ce bouton, tout simplement. Donc je l'appelle Lecture. Ce bouton, il est activé donc je ne mets pas de croix dans Désactiver, il est Visible, bien évidemment. Ce bouton, je vais lui donner un nom. Je vais cliquer dans la case "Nom d'occurence" et je vais l'appeler "bt" pour bouton, underscore… et je vais lui mettre le nom de "lecture" comme ceci. Voilà. Bien. Je n'ai plus qu'à créer un nouveau calque, calque que je vais baptiser "Action". C'est le calque dans lequel je vais mettre mon code. Je me positionne sur la première image-clé, je fais un clic droit, clic gauche sur "action", j'ai donc la fenêtre Action qui fait son apparition, je vais faire apparaître les fragments de code en cliquant0 tout simplement sur cette petite icône, et donc, là je trouve plusieurs catégories et notamment je trouve la catégorie HTML5 Canvas. J'ouvre cette catégorie en cliquant sur la petite flèche. Maintenant, je vais tout simplement aller sur les Composants, j'ouvre, là je trouve les composants Vidéo. Je trouve dans le composant "Vidéo" un code qui me permet de lire une vidéo. Et je vais double-cliquer sur « Lire une vidéo ». Ce qui me permet d'obtenir ce code. Ce code, va m'être utile tout à l'heure, pour l'instant je l'ai là, je vais le garder bien au chaud, je vais faire un petit Entrée une fois ou deux, pour me dégager de là, et ensuite, je vais récupérer ce code à l'intérieur d'un code un peu plus complexe. Ceci pour vous montrer que je n'ai pas besoin de taper quoi que ce soit. Je viens maintenant sur mon bouton, j'appelle les extraits de code, là je vais venir dans les composants de type Interface Utilisateur et je vais choisir l'événement de "Clic sur le bouton". Je double-clique pour obtenir ce code, et donc, dans ce code, je vois qu'il y a une fonction. Cette fonction eh bien, est là pour me permettre lorsque je cliquerai sur le bouton de déclencher ma vidéo. Oui mais comment dois-je déclencher ma vidéo ? Tout simplement avec le code écrit précédemment. Je sélectionne ce code. Ctrl-X pour le couper. Et je viens le mettre quelque part à l'intérieur de ma fonction, Ctrl-V. Donc voilà. À partir de là, je pourrais, lorsque je cliquerai sur ce bouton, lancer la lecture de ma vidéo. Voyez, en utilisant les deux extraits de code de manière séparée, en faisant un simple copier-coller, eh bien je suis en capacité de faire un programme plus complexe. Bien sûr, j'aurais pu aussi, si je sais coder, j'aurais pu aussi écrire carrément cette instruction. Ici, j'ai une sortie sur la console, hein, pour voir si le bouton a été cliqué. Bon, c'est juste pour tester. Moi je vais passer cet élément en commentaire en mettant deux barres obliques devant. Voilà donc, là, mon code est prêt. Lorsque quelqu'un cliquera sur le bouton, le bouton qui s'appelle "bt_lecture", eh bien cela déclenchera cette fonction, cette fonction dira que le lecteur doit lancer la vidéo. Il ne reste plus qu'à tester, je maintiens la touche Ctrl enfoncée, j'appuie sur Entrée, je patiente quelques secondes au bout desquelles mon navigateur fait son apparition, et là je vois effectivement ma vidéo. La vidéo ne se joue pas, c'est normal. Puisqu'il faut cliquer sur le bouton de lecture pour que cela se produise. Je clique sur le bouton Lecture, et donc, ma vidéo se joue sans autre forme de procès. Voilà donc encore une des nouveautés très attractives de ce nouvel opus d'Animate CC.

Animate CC 2017 : Les nouveautés

Abordez les nouveautés d’Animate. Prenez en main la gestion de la caméra et de la scène, réalisez l’exportation de vos images, partagez des symboles avec la bibliothèque CC, etc.

1h21 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Adobe Animate Animate CC 2017
Spécial abonnés
Date de parution :2 nov. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !