CATALOGUE Code & Data Formation Animate CC Apprendre la programmation dans Animate CC - Les fondamentaux de Create JS

Création et Publication d'Animations HTML5 avec JavaScript

Retour à la formation
Chapitre 3 Leçon 1
Précédent
Suivant

Découvrez comment configurer et publier des animations HTML5 avec JavaScript en utilisant Adobe Animate. Dans cette session, nous explorerons les différences entre les animations vectorielles et celles utilisant des médias externes comme les fichiers JPEG ou les fichiers audio.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons examiner en détail la structure du package de publication HTML5 JavaScript généré par Adobe Animate. Selon les éléments utilisés dans une animation, la composition du package peut varier. Nous commencerons par analyser le cas où seules des éléments graphiques vectoriels sont utilisés, et suivrons avec des exemples incluant des médias externes tels que des images JPEG ou des fichiers audio.

Nous aborderons également les deux fichiers principaux :

  • Le fichier HTML, qui inclut des liaisons avec l'API Create.js et le runtime de l'animation.
  • Le fichier JavaScript, qui contient toutes les références aux éléments de l'animation, y compris les symboles et les scripts d'initialisation.

Enfin, une attention particulière sera portée sur les nouvelles fonctionnalités introduites pour gérer l'affichage sur des écrans haute résolution et la gestion responsive des animations, en particulier les modifications nécessaires pour permettre le redimensionnement de la fenêtre Canva.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Comprendre la structure du package de publication HTML5 JavaScript dans Adobe Animate.
  • Apprendre à configurer correctement une animation en fonction des éléments utilisés (vectoriels ou médias externes).
  • Savoir intégrer et optimiser les liaisons avec l'API Create.js et les fichiers runtime.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir :

  • Une connaissance de base en HTML et JavaScript.
  • Des compétences en Adobe Animate ou en logiciels similaires de création d'animations.

Métiers concernés

Ce sujet est particulièrement pertinent pour :

  • Les développeurs front-end souhaitant enrichir leur site web avec des animations interactives.
  • Les designeurs cherchant à créer des contenus animés pour des projets marketing ou publicitaires.

Alternatives et ressources

En alternatives, vous pouvez explorer :

  • Utiliser Adobe After Effects pour créer des animations plus complexes.
  • Envisager GreenSock Animation Platform (GSAP) pour les animations JavaScript haute performance.

Questions & Réponses

La principale différence réside dans les fichiers générés lors de la publication. Une animation vectorielle n'exporte que les fichiers HTML et JavaScript, tandis qu'une animation avec des médias externes exporte également un dossier contenant ces médias, avec des paramètres de compression configurables.
Adobe Animate intègre dans le code HTML des scripts spécifiques pour gérer l'affichage sur les écrans rétina, permettant ainsi une meilleure qualité visuelle. Cependant, ces scripts peuvent être modifiés ou supprimés pour permettre le redimensionnement responsive de l'animation.
Les polices Typekit sont recommandées car les polices vectorisées peuvent alourdir considérablement le fichier JavaScript de l'animation. Utiliser Typekit permet de réduire le poids du fichier, assurant ainsi une meilleure performance et des temps de chargement plus rapides.