Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Animate CC 2015

Publier un document HTML5 Canvas

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Procédez aux réglages de votre document au format HTML5 pour sa publication.
08:34

Transcription

Je vais maintenant vous demander de vous rapprocher des sources de cette formation, et d'aller dans le chapitre 7, où vous trouverez le fameux hamburger, qui s'appelle donc toujours hamburger, je vais zoomer un petit peu en arrière, qui est un document au format HTML5 Canvas, et que nous souhaitons maintenant publier. C'est-à-dire que nous souhaitons obtenir dans le dossier source de la formation, dans le chapitre 7, tout ce qu'il faut, pour que notre hamburger puisse être mis en ligne sur notre hébergement. Ce fichier là, devant resté sur notre disque dur, c'est les sources de notre animation. Tout ce que l'on va générer, qui va venir se rajouter ici pourra être mis sur notre hébergement par la suite. Comment fait-on pour régler cette publication ? Eh bien, on clique sur cette zone grise ici ou là, et on clique sur Propriétés. Puis sur le bouton Paramètres de publication, ce qui nous donne accès à cette page. Je referme, autre possibilité, je fais Fichier, je viens sur Paramètres de publication, ou je fais encore Ctrl+Maj+F12, dans tous les cas, je me retrouve là. Nous avons ici la possibilité de publier par défaut, nous allons publier au format JavaScript HTML, c'est le but même d'un document HTML5 Canvas. J'ai aussi la possibilité de publier dans d'autres formats, par exemple, sous la forme d'une image JPG, sous la forme d'un Package OAM, c'est-à-dire un Package qui sera utilisable par exemple par InDesign, ou par DreamWeaver ou par Muse. J'ai aussi la possibilité de sortir sous la forme d'une image SVG. Pour l'instant, on va se contenter de cette option là. Nous avons ici plusieurs onglets, l'onglet simple, va nous permettre de régler l'essentiel de la publication. Nous allons obtenir un document qui va avoir comme extension .js, qui porte le nom de notre document, hamburger, hamburger. Et donc, il va contenir exclusivement du code JavaScript. J'ai la possibilité à l'aide de cet icône, de signaler où est-ce que je souhaite que ce document se crée. Je peux remplacer le fichier HTML à la publication, ce qui veut dire que, si j'ai déjà transformé mon fichier HTML, lors d'une publication précédente, je vais perdre cette transformation. Donc si j'ai déjà un fichier HTML, je ne souhaite pas le modifier, il me suffit de retirer la croix ici. Je remets la croix, je peux dire si je veux que le scénario se joue en boucle ou pas, tout simplement en mettant ou en retirant la croix ici. Je peux inclure les calques masqués, si dans mon animation, il y a des calques ou dans la colonne où il y a l'oeil, une petite croix est mise, cela veut dire que ces calques contiennent des informations que je ne souhaite pas montrer. Dans ce cas là, est-ce qu'ils sont réellement utiles ? À vous de voir, on peut aussi décocher de manière à ce que les calques masqués ne soient pas exportés. Nous allons, si nous le souhaitons, avoir la possibilité d'exporter des éléments d'image, dans un dossier baptisé image, alors ça, ça veut dire quoi ? Ça veut dire tout simplement, je fais Annuler, que, si dans votre bibliothèque, vous avez des images de type JPG ou PNG, elles seront exportées dans un dossier image. Ici, je n'ai que du vectoriel, donc bien évidemment, ces éléments là ne seront pas exportés. Du moins au format JPG, bien évidemment. Je clique sur Paramètres de publication. Si j'exporte mes images, je peux les exporter en tant qu'entité individuelle, mais je peux aussi les regrouper à l'intérieur d'une feuille, ou de plusieurs feuilles, appelées feuilles de Sprite. Ensuite, s'il y a des sons, je peux les exporter, ici je n'en ai pas, je vais décocher. S'il y a des éléments CreateJS, je peux les exporter dans un dossier qui s'appelle libs. Dans mon cas, il n'y a pas d'images, donc je décoche. Je vais maintenant venir sur Avancer. Dans l'onglet Avancer, nous avons la possibilité de dire si nous souhaitons que les bibliothèques hébergées, soient utilisées comme telles, ou si nous souhaitons au final, que les éléments CreateJS soient mis sur notre site. Donc, si je laisse la croix ici, je vais obtenir un lien qui pointe vers le site, CreateJS.com, dans lequel il y a le code JavaScript nécessaire pour que mon animation au format HTML fonctionne. Si par contre, je ne mets pas la croix dans cette case, eh bien, ce code va être mis dans le dossier libs, de manière à ce que mon animation sache où trouver le code afférent pour que le travail puisse s'exécuter. Donc à vous de voir si vous souhaitez faire appel aux bibliothèques hébergées sur le site CreateJS, ou si vous souhaitez avoir cette bibliothèque chez vous, sur votre hébergement. Je vais dire que je la veux chez moi. Je peux compacter les formes pour gagner un peu de place si je le souhaite. Et j'ai la possibilité de changer les espaces de noms si le besoin s'en fait sentir. J'ai même la possibilité lorsque j'utilise des feuilles de Sprite, ce qui n'est pas le cas ici, mais si j'avais donc, comme je vous l'ai dit précédemment, dans ma bibliothèque, des éléments de type JPG ou PNG. Je les exporterai sous forme de feuille de Sprite en disant que je mets une croix là. De par le fait ici, j'aurai la possibilité ici de paramétrer ces feuilles de Sprite. Je veux que ma feuille de Sprite soit au format PNG, JPG, ou les deux, je veux qu'elle soit en 8, 24 ou 32 bits, je peux définir sa taille, je peux définir sa couleur de fond, bref, j'ai la possibilité de jouer sur ces éléments pour gagner en poids, par exemple. Comme j'ai décoché cette case là, bien évidemment, ces éléments là ne sont pas accessibles. Si j'utilise des polices web, eh bien, je vais indiquer l'URL de ces polices web en séparant chacun des éléments par des virgules. Je vais faire Publier. Une fois que j'ai publié, je fais OK, qu'est-ce que je trouve ici ? Je trouve dans le panneau de sortie, toute une série de messages m'expliquant ce qui s'est passé, ce qui a marché de ce qui n'a pas marché. Je reviens maintenant dans les sources de la formation, dans le chapitre 7, et là je trouve, puisque j'ai exporté, j'ai exporté hamburger.fla non, puisque c'est le fichier original, par contre, j'ai à l'export obtenu, hamburger qui s'appelle html, qui est mon document HTML. J'ai ici hamburger.js, qui est le code JavaScript contenant tout ce qu'il faut pour pouvoir redessiner, chacun des éléments de mon animation. Et dans le dossier libs, je trouve un fichier JavaScript, qui est là donc, pour assurer le bon fonctionnement de mon animation. Je remonte d'un cran, et je vais donc mettre en route hamburger.html, je double clique. Le document en question se met en route et je vois mon animation se dérouler. Voyons voir un peu ce qu'il y a dedans. Je vais venir dans Outils, je suis ici dans Firefox, comme j'ai installé le plugin Firebug, qui est un très très bon plugin, eh bien, je peux voir un peu ce qui se passe, ouvrir Firebug. Je patiente quelques secondes, et là, je me retrouve donc avec cette fenêtre, dans laquelle je vois un onglet HTML avec le détail de ma page. Qu'est-ce que j'ai dans le head de ma page ? J'ai le fait qu'il s'agit d'HTML5, donc voilà le doc type ici, HTML. J'ai le fait que je suis en France, donc de l'UTF-8. J'ai un titre, ça s'appelle hamburger. Et j'ai un script, qui est le script que j'ai demandé d'aller chercher sur le site CreateJS, et qui sert donc à faire fonctionner mon animation. Ensuite, j'ai le script hamburger.js, qui a été généré automatiquement, qui permet de redessiner chacun des éléments, chacune des formes, qui constitue mon animation. Donc quand je dis chacune des formes, ça veut dire, la calotte du hamburger, ça veut dire les tomates, etc, etc. Donc là, on a le descriptif complet de toutes ces formes, et la manière donc, de les redessiner. Ensuite, je remonte complètement en haut, nous avons obtenu, je réduis ça, une partie script, qui est ici encore, donc on a au total trois scripts. Où là, Canvas est pris en compte, de manière à ce que le dessin puisse se faire. Donc, là, nous allons trouver dans le body, une balise Canvas, avec comme ID, Canvas. Et c'est donc à l'intérieur de ce Canvas/Canvas, que tout va être redessiné, et donc va faire son apparition. Je retrouve la hauteur et la largeur, qui sont les hauteurs et largeurs que j'ai indiqué lors de la création de mon animation dans Animate. Voilà, donc, en quelques mots, ce que nous obtenons, lorsque nous faisons une publication 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 !