Découvrir Animate CC 2015

Publier pour une animation HTML5 canvas

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Partez à la découverte des améliorations du panneau Paramètres de publication, pour une animation HTML5 canvas.
07:07

Transcription

Lorsque vous souhaitez publier une animation au format Canvas HTML5, vous avez un grand nombre d’options qui sont mis à votre disposition par Animate CC. Je vais vous demander pour que nous puissions parcourir dans de bonnes conditions ces différentes options, d’ouvrir dans le chapitre 3 des sources de cette formation, le document qui s’appelle « Publier HTML5. » Une fois que vous l’aurez ouvert vous allez vous trouver en présence d’un diaporama constitué de six images et donc sur ce diaporama nous avons deux calques. Un premier calque qui contient chacune des images constituants le diaporama et un deuxième calque contenant quelques lignes de codes en JavaScript pour permettre de passer d’une image à l’autre d’un simple clic. Le problème maintenant c’est de publier ce travail qui a été conçu, créé au format HTML5 Canvas, c’est un document HTML5 Canvas, et donc, nous voulons le publier. Alors, pour atteindre les paramètres de publication, vous avez deux options possibles. Vous pouvez faire Fichier Paramètres de publication. Et vous atteignez cette fenêtre. Je la ferme. Vous avez aussi la possibilité en cliquant en dehors de la scène de venir dans les propriétés de la catégorie Publier, et là vous allez trouver le bouton permettant d’atteindre les paramètres de publication que voilà. Déjà, vous pouvez, vous créer des profils. Ça c’est extrêmement intéressant parce que vous avez peut-être le besoin dans certains cas de publier d’une certaine manière, par exemple dans certains cas, vous souhaitez publier votre animation de manière à ce qu’elle soit responsive et ce qu’elle soit centrée à l’écran. Puis dans d’autres cas vous ne souhaitez pas que vous animation soit responsive, vous ne souhaitez pas qu’elle soit centrée. Bien vous allez pouvoir créer plusieurs profils avec des réglages différents de manière à ce que par la suite, vous gagner du temps dans votre processus de publication. Ces profils, ils sont ici, pour l’instant, il y en a qu’un seul, le profil type par défaut. Mais vous avez, grâce à cette petite roue cranté la possibilité de créer un nouveau profil, de dupliquer un profil existant, etc. Parlons peu, parlons bien. Commençons par regarder la colonne publier. Dans publier, je vais publier JavaScript et HTML. Je peux éventuellement publier à d’autres formats, sous forme d’image JPEG, sous forme de package OAM ou sous forme d’image SVG. Un package OAM, c’est un package qui va nous permettre de récupérer notre animation Animate dans d’autres logiciels de la suite Adobe beaucoup plus facilement. Par exemple, pour le récupérer dans Dreamviewer. Maintenant regardons un tout petit peu les onglets que nous avons ici. Nous avons Simples, Avancés, Feuille de Sprite et Police Web. Commençons par Simples. Le nom de la sortie, donc c’est le nom sous lequel vous allez obtenir votre page HTML, vous pouvez ici changer le nom. Pour l’instant c’est le même nom que le document Animate. Vous pouvez indiquer si vous souhaitez que votre animation se joue en boucle ou pas. Il suffit tout simplement de cocher ou décocher cette case, et vous pouvez dire si vous souhaitez inclure les calques masqués ou pas. Si vous avez des calques masqués qui ne servent que pour vous lors de la création de votre animation, ne les incluez pas ça vous permettra de gagner en poids. Ensuite vous avez des possibilités comme le centrage dans la scène, le fait de rendre responsive votre animation, le fait d’inclure un pré-loader. Ces différentes options, nous les verrons à part dans des tutoriels dédiés. Vous pouvez exporter des éléments dans tel ou tel dossier. Alors par défaut, on vous propose le dossier Images pour mettre les images, dossier Sounds pour mettre des sons, et dossier CreateJS pour mettre les bibliothèques JavaScript. Donc vous avez la possibilité ici en cliquant sur ces différentes icônes de changer le dossier et de régler donc le dossier de destination à votre convenance suivant votre organisation. Nous avons dans l’onglet Avancés des choses extrêmement intéressantes. Lorsque nous publions, nous pouvons demander de remplacer le fichier HTML à la publication. La première fois vous n’avez pas de fichier HTML, donc lorsque vous allez publier, ce fichier HTML va être créé. Mais la deuxième fois vous ne souhaitez peut-être pas que Animate modifie le fichier HTML initial que vous peut-être retouché par ailleurs. Donc dans ce cas-là, il vous suffit tout simplement de décocher cette case. Alors attention toutefois, cette case cochée ou pas cochée n’a aucun impact si vous cliquez sur le bouton Inclure le code JavaScript dans le fichier HTML. On a deux possibilités. Première possibilité, c’est d’avoir un fichier JavaScript externe. Deuxième possibilité c’est d’inclure le fichier JavaScript à l’intérieur de la page HTML. Si vous choisissez cette option, eh bien, on vous le signale, la page HTML sera détruite et recréée à chaque publication. Donc si entre deux publications, vous faites des modifications dedans, elles seront perdues. Je fais annuler. Ensuite, j’ai des options avancées pour le JavaScript. Je peux utiliser des bibliothèques hébergées ou pas. Donc là, c’est à moi de mettre la croix ou pas ici. Donc bibliothèque hébergée, ça veut dire quoi ? Ça veut dire que les bibliothèques comme CreateJS par exemple, je peux les avoir sur mon site ou je peux demander à aller les chercher à l’extérieur en fonction du fait que je clique sur cette case ou pas, que je coche cette case ou pas. Je peux compacter les formes pour gagner en poids, et je peux mettre une limite pour les images multiples de manière toujours à gagner en poids et donc en vélocité. Ensuite, on a des espaces de nom qui sont prévus d’origine pour des symboles lib, pour les images Images et pour les createJS, CreateJS. Mais on peut changer ces noms si on en a le besoin. Vous avez aussi la possibilité grâce à l’onglet Feuille de Sprite, de regrouper toutes les images à l’intérieur de Feuilles de Sprite dans un format PNG ou JPEG ou les deux. Vous pouvez régler la qualité, vous pouvez même régler la taille maximum au-delà de laquelle la feuille de Sprite sera scindée en plusieurs feuilles de Sprite. Puis même, choisir la couleur d’arrière-plan. Ici, c’est la transparence pour vos Feuilles de Sprite. Éventuellement vous pouvez aussi, si vous avez un compte Adobe, utiliser des polices Typekit pour rendre vos œuvres un petit peu plus différenciées par rapport au travail du voisin. Voilà donc en quelques mots les différents réglages. Alors je vous invite à les explorer, à faire différents essais pour voir ce qui vous convient le mieux et lorsque vous avez fait un réglage qui vous convient, par exemple, ici, je vais cocher tous ces éléments, je vais créer maintenant un profil. Je donne un nom à ce profil, je vais l’appeler test par exemple. Je fais OK. Donc ce qui fait, que par la suite, lorsque je voudrais publier au format HTML5, je pourrais utiliser soit le profil par défaut, soit le profil test, soit tout autre profil que j’aurais créé. Bien sûr vous avez créé un profil, vous pouvez aussi le supprimer tout simplement en cliquant sur supprimer le profil. Voulez-vous supprimer le profil test, il faut au préalable se mettre dessus. Je fais OK, le profil est détruit. Voilà vous savez tout à présent, il ne vous reste plus qu’à faire des tests et à voir ce qui vous convient le mieux.

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 !