Découvrir Animate CC 2015

Créer un bouton et le coder pour HTML5 Canvas

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Réalisez un bouton, et assurez-en la programmation avec des extraits de code pour HTML5.
09:38

Transcription

Je vous propose maintenant à partir d'un document HTML5 Canvas de voir comment il est possible d'adjoindre du code à un élément sur la scène. Vous trouverez dans les sources de cette formation, au chapitre 6, un document qui s'appelle Bouton, dans lequel, il y a dans la bibliothèque un symbole de type graphique, bouton. J'ai dessiné un simple rectangle avec un dégradé de gris, partant d'un gris clair à un gris foncé. Je veux donc faire un bouton, et je voudrais que lorsque l'utilisateur clique sur ce bouton, il puisse être évacué vers la page de Google, le moteur de recherche. Comment est-ce que je peux faire cela ? Eh bien, je commence par faire un nouveau symbole, de type bouton, je vais l'appeler Google. Je vais dire qu'il est de type Bouton, et je vais faire OK. J'ai donc maintenant une ligne dedans qui a complètement changé, on en a déjà parlé, j'ai quatre possibilités. Je peux travailler sur chacune d'entre elles, ou seulement sur certaines. Le comportement du bouton, lorsqu'il est tout simplement visible, ensuite le survol du bouton, ensuite qu'est-ce qu'il se passe quand le bouton est enfoncé ? Et ensuite, qu'est-ce qu'il se passe quand le bouton a été cliqué ? Je vais sur la partie haute prendre mon graphisme bouton, et je vais le glisser, hop, directement, à l'intérieur de mon enveloppe Google. Je viens sur Propriétés, je dis que je veux en X, zéro, et en Y, zéro. Voilà mon bouton est donc accroché. Je vais maintenant venir sur la partie Abaisser. Et je vais faire dessus un clic droit, puis je vais me positionner sur Insérer une image-clé. Comme ceci, pour retrouver le symbole que j'ai mis sur Haut, pour le retrouver sur la partie Abaisser, et là je vais le retourner. Je vais venir dans Modification, je vais dire que je souhaite transformer cet élément, et que je souhaite donc le retourner verticalement, voilà. Donc là, j'ai maintenant deux états pour mon bouton, l'état survol, ça c'est la position normale, et lorsqu'on clique dessus, on a l'état enfoncé. Je pourrais aussi faire la même chose ou légèrement différent pour le survol et pour le cliqué. Je vais maintenant verrouiller ce calque que je baptise bouton. Et je vais mettre un texte sur ce bouton pour que l'utilisateur comprenne ce qu'il doit faire. Donc je crée un nouveau calque, toujours avec l'icône Création de calque, et je me positionne sur la partie haute, et là je vais venir intégrer un texte. Je prends l'icône texte, je viens choisir une police. J'ai pris la Verdana, je prends un style régulier, je prends la couleur blanche. Une taille de 28, je clique, et j'écris en majuscule, Google, comme ceci. Je prends l'Outil de sélection, il ne me reste plus qu'à positionner Google, sur le centre du bouton, comme je l'ai mis sur la partie haute, automatiquement, mon calque se prolonge jusqu'au dernier élément que j'ai utilisé. Comme je n'ai pas utilisé le Cliqué, mais que j'ai utilisé le Abaisser, mon calque s'est prolongé jusque sur la colonne Abaisser. Ce qui fait que j'ai comme ça mon texte, tout à fait identique, sur les trois états, Haut, Dessus, et Abaisser. Maintenant que ce bouton est fait, je reviens sur Séquence 1, je viens dans ma bibliothèque, je prends mon bouton, et je l'amène sur la scène dans l'emplacement nécessaire, là où dans mon décor, j'ai prévu d'avoir ce bouton. On va le mettre quelque part à peu près au milieu de la scène, on va même le centrer parfaitement en mettant une petite croix ici, là et là. Et nous allons maintenant programmer ce bouton. On me prévient, quand même, au passage, que lorsque j'ai utilisé ce bouton, l'option AntiAlias n'est pas prise en charge dans les documents HTML5 Canvas. Et donc le texte qui est Antialiasé, il a été converti en CanvasFonts, pour pouvoir donc s'adapter au format HTML5. Je reviens sur le scénario, et donc maintenant, je me positionne sur l'image-clé, qui contient mon bouton. Je vais faire dessus un clic droit, et je vais venir faire un clic gauche sur le lien Action. Cela fait apparaître cette fenêtre qui est la fenêtre à l'intérieur de laquelle je vais coder. Alors, je peux coder directement en tapant au clavier, ou je peux aussi utiliser grâce à cet icône les fragments de code. Je clique sur Fragment de code. J'obtiens une deuxième fenêtre, deuxième fenêtre à l'intérieur de laquelle on me propose trois langages. ActionScript, qui est le langage le plus riche, où je trouve dedans notamment tout ce qu'il faut pour programmer les appareils mobiles sous AIR. Je trouve HTML5, ce qui nous concerne, puisque c'est un document HTML5 Canvas que nous avons ouvert, et je trouve WebGL, nous en reparlerons. J'ouvre HTML5, et je regarde qu'est-ce qu'on me propose ? Alors pour l'instant, il n'y a pas grand chose, mais au fur et à mesure du temps, les bibliothèques vont aller en s'étoffant. Je viens sur Navigation dans le scénario, j'ouvre, et là, on me dit, Arrêter la lecture à partir de cette image, Obtenir le numéro de l'image actuelle. Non, tout ça, ça ne me concerne pas, je replie, qu'est-ce que j'ai comme action ? Cliquer pour atteindre la page web, ah ça, c'est très bien, ça me va bien. Donc, je viens dessus, et là j'ai deux solutions, soit j'utilise cet icône, donc, j'ajoute à l'image actuelle, soit je fais un double-clique dessus, pour rajouter ce code à l'image actuelle. Le problème, il est que si je fais ça comme ça, eh bien, je vais avoir un message d'erreur, pourquoi ? Parce que ce code doit être rattaché à ce bouton, et pour ça, encore faut-il que ce bouton, eh bien, il ait un nom de baptême. Or je n'ai pas nommé mon bouton. Donc ça, c'est quelque chose auquel il faut être vraiment très attaché, lorsque vous voulez programmer quoi que ce soit, dans quelque langage que ce soit, il est opportun de toujours nommer l'élément avant de faire la programmation. Donc, là, on va pour l'instant pousser ces deux fenêtres dans un coin, et on va venir dans les propriétés du bouton. Je vais pousser ça un petit peu plus bas, voilà. Vous voyez que mon bouton n'a pas de nom, dit d'occurrence. Dans la bibliothèque, mon bouton, il a un nom, il s'appelle Google. Mais la copie que j'en ai généré dans la scène, l'occurrence, n'a pas de nom. Je vais l'appeler Google aussi, faites attention aussi lorsque vous programmez, aux majuscules et minuscules. Ici, je mets le G en majuscule, et tout le reste en minuscule. Voilà, donc là maintenant, mon objet, il a un nom. Maintenant qu'il a un nom, je peux double-cliquer sur cet extrait de code, pour obtenir ceci, je ferme la fenêtre. Je vais agrandir un petit peu, pour que l'on comprenne ce qui s'est passé. Alors, qu'est-ce que nous avons ? Eh bien, nous avons, je vous le rassure, beaucoup, beaucoup de commentaires. Tout ce qui est entre Slash étoile, et étoile Slash, c'est des commentaires. On vous explique ce que vous devez faire pour adapter ce code à ce que vous souhaitez faire. Cliquez sur l'occurrence du symbole spécifiée pour charger l'URL dans une nouvelle, je vais agrandir ça, fenêtre du navigateur. Voilà, instructions : remplacez http://www.adobe.com par l'adresse URL de votre choix. C'est ce que je compte faire, donc je viens ici, et là je vais marquer Google.fr. Il s'agit ici d'une instruction JavaScript, qui est tout à fait compréhensible, si vous programmez un peu en JavaScript. Là par défaut, on va ouvrir dans une nouvelle fenêtre. Mais on pourrait aussi ouvrir dans la même fenêtre, en mettant par exemple ici, self, au lieu de blank. On retrouve donc dans les instructions, ce qu'on a l'habitude de manipuler, en JavaScript. Donc voilà, ça y est, j'ai programmé mon bouton, on me dit ici, this.Google, c'est le nom de mon bouton. .addEventListener("click", qu'est-ce que ça veut dire ? Ça veut dire eh bien, sur la scène, il y a un élément qui s'appelle Google, addEventListener, nous mettons dessus ce que l'on appelle un écouteur. Cet écouteur, il est là pour écouter, c'est comme une oreille, un écouteur, ni plus ni moins, il est là pour écouter le clic. Donc, dès que quelqu'un va cliquer sur le bouton, on va exécuter une fonction, cette fonction s'appelle fl_ClickToGoToWebPage, c'est le nom de la fonction qu'elle a. Je peux changer cette fonction. je peux dire par exemple, à la place, aller à et donc, dans ce cas là, je renomme ma fonction ici, aller à. Ce n'est pas une obligation, mais bon, si vous noyez ça dans un code plus important, c'est peut-être plus facile à lire. Voilà, donc mon code est fait, je n'ai plus qu'à fermer, et puis, on va faire un essai, je vais faire Ctrl+Entrée. Je patiente quelques secondes, et là je me retrouve donc dans mon navigateur avec le bouton Google. Lorsque j'arrive dessus, voyez que la main fait son apparition, en dehors pas, en dessus oui. Je clique, regardez, mon bouton s'enfonce, avant de le voir, je vais glisser et sortir. Mais je suis dessus, rien ne se passe, quand je clique, il s'enfonce. C'est donc la deuxième position que nous avons paramétré. Si maintenant je clique vraiment dessus, au lieu de le maintenir enfoncé, que se passe-t-il ? Eh bien, je me retrouve sur le site de Google. Donc voilà, nous avons programmé un élément et vous avez donc vu le principe pour programmer les éléments que vous souhaitez, à l'intérieur d'une animation au format HTML5 Canvas.

Découvrir Animate CC 2015

Prenez en main Adobe Animate CC. Apprenez à réaliser des animations, des illustrations vectorielles, des interfaces, des vidéos, voire même des exécutables pour Mac et PC.

4h47 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Adobe Animate Animate CC
Spécial abonnés
Date de parution :9 févr. 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 !