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

Intégration de Vidéo dans Animate CC en HTML5

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

Dans cet atelier, nous abordons la problématique de la vidéo dans une animation Animate CC en HTML5 Canvas. Le mode natif ne propose pas de solutions adaptées, donc nous explorons des solutions en code.

Détails de la leçon

Description de la leçon

Dans cet atelier, nous allons examiner les méthodes d'intégration de la vidéo dans une animation Animate CC, en HTML5 Canvas. Contrairement au mode ActionScript 3, HTML5 Canvas ne propose pas de support vidéo natif dans l'interface utilisateur. Cela présente une certaine complexité pour les développeurs qui doivent recourir à des solutions basées sur du code.

La première solution, bien que possible, est complexe. Elle utilise la classe Bitmap de Create.js pour recomposer la vidéo en pixels au sein de la balise Canvas. Nous optons donc pour une seconde solution plus simple et davantage compatible avec différents navigateurs : manipuler le DOM de la page HTML. Cette méthode nous permet de créer et insérer dynamiquement des balises vidéo HTML5 dans la page.

Le processus implique de créer une fonction qui, lorsqu'elle est appelée par un bouton dans l'animation, insère une balise vidéo dans le DOM. La vidéo se superpose alors à l'animation. Un bouton supplémentaire permet de refermer la vidéo, en supprimant la balise du DOM, et de revenir à l'animation initiale.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de montrer comment :

  • Comprendre les limitations d'Animate CC en HTML5 Canvas en ce qui concerne l'intégration de vidéos.
  • Découvrir deux solutions pour intégrer des vidéos, en privilégiant la manipulation du DOM.
  • Appliquer ces méthodes pour créer des animations interactives et enrichies avec des vidéos.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo incluent :

  • Connaissance de base de Adobe Animate CC.
  • Compréhension des principes HTML5 et de la manipulation du DOM.
  • Notions de JavaScript, notamment pour utiliser Create.js.

Métiers concernés

Les méthodes abordées dans cette vidéo sont particulièrement utiles pour les :

  • Concepteurs d'animations interactives travaillant dans le domaine du web.
  • Développeurs front-end intégrant des médias dans des applications web.
  • Professionnels des médias numériques cherchant à enrichir leurs productions avec des composants vidéos interactifs.

Alternatives et ressources

En plus d'Animate CC, les utilisateurs peuvent explorer d'autres solutions telles que :

  • GSAP (GreenSock Animation Platform) pour des animations interactives.
  • Utilisation de plugins pour des frameworks comme React ou Vue.js.
  • Envisager des Logiciels de montage vidéo comme After Effects pour combiner animations et vidéos avant de les exporter en HTML5.

Questions & Réponses

Animate CC en mode HTML5 Canvas ne propose pas de support vidéo natif dans son interface utilisateur; cette fonctionnalité est réservée au mode ActionScript 3 qui permet de gérer les vidéos via des composants particuliers.
Utiliser Create.js permet de manipuler les éléments du DOM de la page HTML pour intégrer des vidéos, ce qui offre une plus grande flexibilité et compatibilité à travers différents navigateurs web.
La balise vidéo HTML5 permet de charger et lire la vidéo de manière superposée à l'animation Animate CC, offrant ainsi une solution simple et efficace pour intégrer des vidéos dans des projets HTML5.