Découvrir Animate CC 2015

Publier un document WebGL

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à régler les paramètres de votre publication au format WebGL.
05:10

Transcription

Nous allons maintenant voir comment régler et publier un document au format WebGL. Je vais vous demander de vous rapprocher des sources de cette formation, et d'aller dans le chapitre 7, où vous trouverez le document DefileWebGL. Ce document contient donc dans la bibliothèque une image au format JPG, contient un clip qui s'appelle Bandeau, et donc contient sur le calque Action, je vais clic droit, clic gauche sur Actions, du code que nous avons écrit au préalable, permettant de faire défiler de manière perpétuelle ce bandeau. Arrive le moment donc de publier notre travail pour venir ensuite le mettre sur notre site web. Quels sont les réglages que j'ai en magasin ? Quelles sont les possibilités ? Bien, je vais cliquer sur mon document, puis je viens dans Propriétés, et là j'accède au bouton Paramètres de publication. Lorsque je clique dessus, je vois apparaître cette fenêtre. J'ai aussi, je ferme la fenêtre, la possibilité de faire la même chose en faisant Fichier, Paramètres de publication, ou encore. en faisant Ctrl+Maj+F12. Dans tous les cas, j'arrive sur cette fenêtre. J'ai la possibilité d'agir sur les réglages qui me sont proposés, je peux exporter mon animation sous la forme d'image JPG, ou pas. Sous la forme d'un Package OAM, qui me permettra donc de récupérer ce travail par la suite, sans Adobe Digital Publishing Suite, par exemple, ou bien dans InDesign, ou encore dans DreamWeaver ou Muse. J'ai la possibilité aussi de faire un export de mon travail au format image SVG. Par défaut, je vais obtenir ici un document .json, qui donc porte le nom que j'ai donné à mon animation, .json. Je peux remplacer le document HTML si j'ai déjà publié ce document et que je le republie, ou pas, suivant que je mette la croix ou pas dans cette case. Je peux inclure les calques masqués, ici, il n'y a pas de calque masqué, que je décoche cette case, ce n'est pas la peine de la garder. Et je veux jouer ou pas le scénario en boucle, ici, nous allons le laisser. Je fais Publier, je fais OK lorsque c'est terminé. Et je vais maintenant aller dans l'explorateur Windows, dans le chapitre 7, pour voir ce que j'ai obtenu, j'ai obtenu donc ce document DefileWebGL.html, plus ce dossier libs, plus ce dossier assets. Commençons par les assets. Dedans, je retrouve le document .json et je trouve toute une série de documents au format JavaScript, .json encore et une image PNG. Si je fais Affichage, Grands icônes, je vois que mon image PNG, c'est, ni plus ni moins, que l'image contenant le bandeau que je dois faire défiler. Je remonte d'un cran, dans libs, qu'est-ce que j'ai ? Eh bien, j'ai un document de type JavaScript. Il ne me reste plus maintenant qu'à voir ce que donne ce travail. Je prends donc le document HTML, je double-clique dessus, et je regarde le résultat qui défile ici. On va voir comment est constitué ce document HTML. je viens dans Outils, je viens dans Développement Web, je prends Firebug, qui est donc un plugin gratuit pour Firefox, j'ouvre Firebug. Je patiente quelques secondes, et donc là je vais pouvoir voir ce qu'il y a dans la feuille HTML. J'ai donc un doc type HTML, donc c'est du HTML5, UTF-8 pour prendre en charge notamment les accents, le titre qui est le nom du document, le nom de mon animation. Le script ici, qui va nous permettre, eh bien, de faire fonctionner cette animation, ce n'est pas le script que nous avons écrit nous. C'est le script fourni par Adobe pour justement faire une sortie au format WebGL. Ensuite, nous trouvons ici un autre élément qui est le code que nous avons écrit, et oui, il est là, il est intégré. Je vais agrandir un petit peu ma fenêtre pour que nous le voyions bien. Ça, c'est le code que nous avons écrit nous, qui a donc été intégré en tant que script dans le head du document, et enfin, je trouve ici les éléments nécessaires, générés automatiquement lors de la publication, pour que le travail que j'ai réalisé puisse fonctionner. Dans le body, nous allons trouver une balise Canvas, à l'intérieur de laquelle l'animation va se dérouler, avec une largeur et une hauteur correspondant à la largeur et la hauteur de notre scène. Et je vais trouver ici un certain nombre d'éléments, qui vont réagir dans le cas où mon navigateur ne prend pas en charge WebGL, par exemple. Eh bien, ce message apparaîtra. De plus en plus de navigateurs prennent en charge ce format WebGL. Voilà donc, je ferme cette fenêtre, en quelques mots, ce que nous avons généré en deux clics de souris.

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 !