Adobe Animate – toujours aussi "flashy" !

Vous souvenez-vous de la publicité “Kinder Surprise” dans laquelle l’enfant demande au père s’il pourrait lui apporter quelque chose de son voyage d’affaires ? Quelque chose de nouveau, quelque chose pour jouer… et du chocolat.

Le père répond : “Mais ça fait trois vœux à la fois !”

Quand Adobe Animate est évoqué dans ce billet de blog, c’est pour montrer comment le logiciel pour animations 2D répond à trois souhaits à la fois, au moins pour les personnes à la recherche d’un outil de création d’animations de haute qualité dans le style Adobe… et pas seulement pour le web.

Précédemment…

J’ai déjà beaucoup évoqué Adobe Animate dans mes anciens billets. D’une part, j’ai déjà analysé l’effort d’apprentissage pour la création d’animations web (https://www.digicomp.ch/…/javascriptjquery-vs-adobe-flash-annaeherungen-eines-kursleiters) et les avantages des animations HTML5 Canvas d’autre part (https://www.digicomp.ch/…/banner-fur-das-www-animierte-gifs-vs-html5-canvas).

Cet article a pour but de présenter Adobe Animate d’un point de vue légèrement différent.

Le défi

La publicité sur Internet est presque omniprésente et en tant qu’agence graphique ou média, la simple création de cartes de visite ne suffit plus. Aujourd’hui, une campagne publicitaire ne se termine plus par une annonce dans les journaux. Comme nous l’avons déjà mentionné, la publicité souhaite aussi s’ancrer sur Internet et les écrans multimédias, qui succèdent aux colonnes d’affichage.

En bref : les animations 2D sont devenues nécessaires.

En tant que graphiste, médiamaticien ou polygraphiste, la communication visuelle d’une organisation ou d’une entreprise est aujourd’hui généralement assurée par les produits Adobe : Illustrator, Photoshop et InDesign font tous partie de la panoplie de base en de nombreux endroits.

À l’image de l’enfant évoqué plus tôt, nous formulons nos souhaits : “Créer des bannières publicitaires sur Internet, créer des animations pour des écrans multimédia et se faire connaître !”

Oui, ça fait trois vœux à la fois !

Quelque chose de nouveau : Des animations pour bannières publicitaires sur Internet

Les réseaux publicitaires sur Internet s’appuient (de plus en plus) sur la technologie HTML5 et exigent des données au format HTML/CSS/JavaScript. Apprendre en profondeur ces technologies prend un temps relativement long comparé à l’apprentissage d’Adobe Animate.

Adobe Animate permet de créer des animations 2D relativement facilement et de les exporter au format souhaité. Il existe même un assistant pour le code qui permet de faciliter l’écriture de code JavaScript, l’interactivité (comme cliquer sur un bouton qui envoie sur un site Web) et la logique (comme s’arrêter au bon endroit ou sauter au début) dans les animations.

Petit détail mais pas des moindres : Adobe Animate fonctionne très efficacement et exporte toutes les images sous forme de sprites au lieu de les exporter individuellement.

Quelque chose pour jouer : Des animations pour écrans multimédia

Comme auparavant, quand Adobe Animate s’appelait “Flash”, l’outil supporte toujours la création d’animations au format FLA avec ActionScript. Par rapport aux animations HTML5 Canvas, cette variante offre les avantages suivants :

1. Coloration d’instances
Chaque élément d’Animate sur ce que l’on appelle la “scène” est une “instance” d’un modèle dans la bibliothèque d’objets. (Vous aimez ces phrases autant que moi ?! Il y en a d’autres dans mes cours d’Animate.? ). Dans les animations FLA, ces instances peuvent être recolorées directement sur la scène, sans changer l’original. Dans les animations HTML5 Canvas, elles peuvent aussi être colorées, mais ne peuvent plus bouger. Sans doute un bug… ?

2. Flux sonore
Dans les animations HTML5-Canvas, vous pouvez travailler avec le son. Vous importez le fichier sonore dans Animate et définissez quand il doit être lu. Mais c’est tout. Dans les animations FLA, vous pouvez également arrêter un son ou même dire à l’animation de se synchroniser avec le son. Il est donc possible de créer des animations qui s’adaptent exactement à la musique.

3. Formats d’export divers
Les animations basées sur FLA peuvent, entre autres, être exportées sous forme de fichiers .swf, qui peuvent ensuite être intégrés dans des sites web. En plus des GIF animés, des films MOV ou AVI, vous pouvez également compiler des fichiers exécutables pour MacOS et Windows, qui peuvent ensuite s’exécuter comme un programme indépendant sur PC. Ceci apporte de nombreux avantages pour les écrans de présentation ou les systèmes kiosques, par exemple. Dans le passé, ces fichiers étaient gravés sur de petits CD-ROM au format carte de crédit et envoyés par la poste. C’était l’époque…

Où est le “jeu” ? – Petit crochet par le thème de la prise en charge du GPU

Qu’une animation HTML5 Canvas provienne du processeur principal (CPU) ou du processeur graphique le plus approprié (GPU pour Graphics Processing Unit) dépend du navigateur affichant l’animation, et de la capacité de l’utilisateur à ajuster les paramètres. Cameron Laird le décrit très bien dans l’un de ses billets. Donc, si vous prétendez que les jeux bons et fluides ne peuvent être mis en pratique qu’avec la variante FLA ActionScript, vous devez (lentement mais sûrement) revoir votre jugement ! Aussi : Si vous avez déjà entendu parler de “WebGL”, votre cœur s’emballe quand Animate vous demande, lors de la création d’un nouveau projet, s’il doit être de type “WebGL”… (même “seulement” comme aperçu).

Et le chocolat ?

Dans la publicité Kinder Surprise, l’enfant veut aussi du chocolat.

Pour moi, ce “chocolat”, quand il s’agit d’Adobe Animate, correspond à l’intégration dans la famille de produits Adobe :

• Ceux qui travaillent avec Illustrator et Photoshop peuvent importer directement les fichiers originaux et même sélectionner la couche si désiré.
• Si vous gérez le concept d’outils des produits Adobe, vous manipulerez rapidement Animate.
• Quiconque a compris le concept des images-clés d’After Effects ou de Premiere se débrouillera rapidement dans Animate, puisque l’idée de base provient du prédécesseur d’Animate “Flash”.

On le concède : Le chocolat est un peu amer. Par exemple, quiconque a appris à aimer synchroniser des palettes dans Creative Cloud devra malheureusement faire une croix sur Animate.

Bilan

Adobe Animate est toujours aussi “flashy” ! Fondamentalement, l’outil se concentre toujours sur la création d’animations professionnelles de haute qualité, quel que soit le format final. Il propose différents outils, entre autres géniaux, comme le “Bone Tool”.

Le monde de l’Internet d’aujourd’hui exige de plus en plus d’animations HTML5 Canvas et Animate offre cette possibilité, bien qu’avec certaines limitations par rapport à la variante FLA, mais pour la bannière publicitaire conventionnelle, c’est suffisant. Si vous voulez créer des animations professionnelles pour le web, Animate est un bon choix.

Animate semble être préparé pour affronter l’avenir et c’est la variante des animations pour WebGL qui le montre. Le fait que cette option a été appelée “preview” (depuis des années) donne une idée de la priorité chez Adobe. Animate n’est certainement pas la mise à jour la plus importante.

Mais elle est passionnante et ludique… Savourons donc ce “chocolat” ! ?