Animate à succédé à Flash en 2016 et la création d’objets combinant animation et interaction en vue de la publication web est à nouveau possible de manière intuitive et accessible au non-codeurs en utilisant désormais le javascript.
Avec ce logiciel on peut créer de très belles animations à partir de dessins vectoriels ou de photos. Vous trouverez dans la rubrique Animate : Animation tous les tutoriels permettant de se saisir des différentes manipulations nécessaire à la réalisation d’animations et leur publication au format vidéo.
Dans la rubrique Animate : interaction HTML 5 et JS sont rassemblés tous les tutoriels permettant de rendre ces animations interactives et de passer d’un récit linéaire classique à un récit ou le spectateur devient acteur de la progression. Le résultat est publié en HTML 5 et JS. Ces techniques vous permettrons de créer des interfaces interactives sans avoir à taper une ligne de JS sauf à vouloir perfectionner !
Conception et spécifications techniques d’un document Animate
Les choix techniques de création d’un fichier Animate dépend de l’usage du fichier final. Il est très important de bien concevoir son document dès le départ.
Composants HTML5
On peut ajouter des composants HTML dans Animate. Cela permet entre autre d’ajouter un lecteur vidéo (vidéo à partir d’une url ou directement dans votre ordinateur), des éléments de formulaires, des règles de mise en forme dans une feuille de style (à condition de maîtriser un peu le langage css) afin de gérer l’ensemble de la page et les éléments intégrés dans la partie générée par Animate (styles, arrière plan de la page, etc)… Notez que dans le cas du composant CSS il est actif sur la frame où vous l’avez placé et si vous souhaitez qu’il soit actif sur l’ensemble du projet il suffit de la placer à la première frame d’un calque indépendant.
Pour en savoir plus sur les composants HTML pour le moment vous pouvez consulter la page d’aide d’Adobe : https://helpx.adobe.com/fr/animate/using/using-components-in-animate.html
Utiliser un fichier HTML5 Canevas généré par Animate sans connexion à internet ou sans dépendre d’un autre serveur
Notez que le fichier html créé par Animate fait référence à un javascript en ligne. Si vous souhaitez vous émanciper de cet appel à un serveur extérieur vous pouvez télécharger le fichier createjs.min.js sur Github (https://github.com/CreateJS) et le placer dans votre dossier puis modifier le code html de votre fichier pour faire appel à la version locale du javascript.
Pour cela il suffit de modifier la ligne de code visible dans la copie d’écran ci-après (ligne 24)
