CATALOGUE Code & Data Formation Animate CC Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

Intégration d'une Animation HTML5 dans une Page HTML

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

Ce didacticiel explique comment intégrer une animation HTML5 créée avec Animate dans une page HTML existante, en utilisant des styles CSS pour un positionnement précis.

Détails de la leçon

Description de la leçon

Dans ce tuto, nous présentons les étapes pour insérer une animation créée avec Animate dans une page HTML déjà formatée. La leçon commence par l'ouverture du fichier HTML existant où l'animation doit être ajoutée. Ensuite, il est crucial d'intégrer le runtime de l'animation ainsi que le runtime Create.js, afin d'assurer le bon fonctionnement de l'animation. La balise <canvas> est ensuite copiée et insérée dans le <body> de la nouvelle page.

Une fois l'animation ajoutée, les styles CSS sont utilisés pour positionner correctement l'élément. Le style est défini dans la balise <style> déjà présente dans la page pour paramétrer l'image de fond. Les propriétés CSS permettent de définir le positionnement relatif de l'animation sur l'axe X ainsi que le centrage horizontal via la propriété margin: auto. Cette méthodologie garantit que l'animation s'affiche correctement et à l’endroit souhaité sur la page.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez en mesure d'intégrer une animation HTML5 dans une page HTML existante en utilisant Animate et de la positionner correctement avec des styles CSS.

Prérequis pour cette leçon

Des connaissances de base en HTML, CSS et JavaScript sont nécessaires pour suivre cette vidéo avec succès.

Métiers concernés

Les compétences développées dans ce tutoriel sont utiles pour les métiers de développeur web, designer web et intégrateur web, en particulier ceux focalisés sur l'enrichissement visuel des sites web par l'animation.

Alternatives et ressources

D'autres logiciels tels que Adobe Edge Animate ou GreenSock (GSAP) peuvent également être utilisés pour créer et intégrer des animations similaires.

Questions & Réponses

Le runtime Create.js est nécessaire pour que l'animation créée avec Animate fonctionne correctement, car il contient les scripts essentiels pour l'exécution des animations.
La propriété 'margin: auto' sert à centrer horizontalement un élément dans son conteneur, facilitant ainsi le positionnement centré de l'animation sur une page HTML.
Il est nécessaire d'intégrer le runtime de l'animation, le runtime Create.js, ainsi que la balise affichant l'animation pour une intégration réussie.