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

Programmation d'un Bouton de Lancement de Vidéo et Styles CSS

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

Ce tutoriel explique comment programmer un bouton de lancement de vidéo et appliquer des styles CSS pour positionner les éléments en HTML.

Détails de la leçon

Description de la leçon

Pour démarrer, nous utilisons un fichier Vidéoflat comme base de l'exercice. Le fichier contient un bouton vidéo à programmer pour lancer la vidéo et un calque JS pour le script. La première étape consiste à référencer le scénario principal pour y accéder facilement depuis les fonctions internes.

Nous ajoutons des styles CSS dans le DOM de la page pour positionner la balise Calneva. En HTML, pour superposer deux éléments, ils doivent avoir des propriétés CSS spécifiques, notamment un positionnement absolu. Ceci empêche les éléments de se placer côte à côte et permet de les superposer.

Pour accéder à la balise Calneva et ajouter des propriétés CSS dans le DOM, nous utilisons Stage Calneva et définissons un style de position absolu. Puis, nous ajoutons des styles top et left en les définissant à 0 pixels, ce qui positionne l'élément à l'origine de l'axe Y et l'axe X.

Enfin, nous rectifions une petite erreur où O pixels devait être 0 pixels. Ce tutoriel vous guide pas à pas dans ces étapes cruciales pour une meilleure compréhension de la manipulation des éléments de page via les styles CSS et la programmation.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à programmer un bouton vidéo et à appliquer des styles CSS pour positionner correctement les éléments en HTML.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo incluent des connaissances de base en HTML, CSS, et JavaScript.

Métiers concernés

Les métiers liés à ce sujet incluent développeur web et intégrateur HTML/CSS.

Alternatives et ressources

Des logiciels ou solutions alternatives incluent l'utilisation d'éditeurs de texte avancés comme Visual Studio Code ou Sublime Text.

Questions & Réponses

Les styles CSS permettent de superposer les éléments et d'éviter qu'ils se placent côte à côte, ce qui est essentiel pour un design précis.
Le calque JS est prévu pour contenir le script qui programmepa le bouton pour lancer la vidéo.
Les propriétés 'top' et 'left' déterminent la position d'un élément par rapport à l'axe Y (vertical) et l'axe X (horizontal).