Sachant que les navigateurs commencent à bloquer la lecture automatique des publicités Flash, le moment est venu d'examiner les fonctionnalités de Flash Professional CC qui permettent de convertir du contenu et de l'optimiser pour une sortie HTML5 Canvas.
J'ai ici une toute petite animation. Il s'agit d'un fichier FLA en ActionScript 3. Donc, si je lance la lecture, j'obtiens un SWF qui s'exécute dans Flash Player.
On va maintenant convertir cette animation au format HTML5 Canvas. Dans le menu Commandes, je choisis Convertir en d’autres formats de document, je sélectionne HTML5 Canvas, puis je clique sur OK.
Un document Canvas est alors généré. Comme la dernière image comportait des scripts d'action, la fenêtre de sortie m'indique que les scripts d'image ont été mis en commentaire. Pourtant, je retrouve dans le scénario tous les éléments du document ActionScript 3.
Pour examiner les actions, je sélectionne la dernière image, puis j'ouvre le fichier des actions, qui comporte effectivement des scripts en commentaire. Je vais rapidement dans le panneau des fragments de code, et dans le dossier Actions, je sélectionne l'option Cliquer pour atteindre la page Web.Je reviens dans le fichier, où je vais supprimer le script. Je remplace « stop » par « this.stop », puis je vais copier l'action que j'ai sélectionnée dans les fragments de code. Je peux aussi modifier l'URL. Je vais saisir « blogs.adobe.com/flashpro » et remplacer cet élément par « this.stage ».
Dans Canvas, les données bitmap sont parfois beaucoup plus performantes que les objets vectoriels. Lors de la préparation de votre document, vous pouvez sélectionner du contenu vectoriel et opérer un rendu au format Bitmap. Je clique avec le bouton droit sur ce groupe d'objets et je choisis Convertir en Bitmap. Je vois à présent apparaître un bitmap dans ma bibliothèque. Je peux répéter l'opération autant de fois que je veux.
Intéressons-nous un instant aux paramètres de publication. Si vous créez beaucoup d'images bitmap, sachez que l'IAB vous limite à 15 appels serveur. En exportant toutes les images bitmap sous forme de feuille Sprite, vous n'utiliserez que deux appels serveur : l'un pour la feuille Sprite et l'autre pour les données qui lui sont associées. Vous pouvez également convertir le texte en vecteurs, ce qui vous permettra d'appliquer des polices qui ne sont pas forcément disponibles sur votre machine.
Je clique sur OK et je vais lancer l'animation. Les versions Flash Player et Canvas s'exécutent correctement et sont parfaitement identiques. Vous pouvez donc suivre votre workflow habituel pour diffuser dans le navigateur web natif des postes de travail et terminaux mobiles des publicités créées avec Flash Professional CC.
Apprenez à convertir des publicités Flash, dont la lecture automatique peut être bloquée par les navigateurs, en fichiers HTML5 dans Adobe Animate CC.
- Ouvrez votre fichier Flash dans Animate et sélectionnez Commandes > Convertir en d’autres formats de document.
- Choisissiez HTML Canvas et cliquez sur OK.
- Modifiez le script d’action en cliquant sur Fragments de code.
- Convertissez le contenu vectoriel en bitmap en cliquant dessus avec le bouton droit et en choisissant Convertir en bitmap.
- Activez les cases Exporter tous les bitmaps comme des feuilles Sprite et Convertir le texte en contours, puis cliquez sur OK pour publier l’animation.