Utilisation de composants dans HTML5 Canvas

Consultez cet article pour en apprendre davantage sur l’utilisation des composants personnalisables.

Les composants offrent une fonction ou un ensemble de fonctions personnalisables et réutilisables permettant d’améliorer la productivité des publicitaires. Auparavant, Animate prenait en charge les composants Flash utilisés avec des cibles basées sur Flash. Désormais, Animate prend en charge le format HTML5 Canvas. 

  1. Sélectionnez Fichier > Nouveau.

    Sélectionnez l’onglet Avancé dans la partie supérieure de la boîte de dialogue Nouveau document et choisissez ensuite l’option HTML5 Canvas.

    Nouveau document
    HTML5 Canvas

  2. Sélectionnez Fenêtre > Composants.

    Composants par défaut

  3. Sélectionnez Composants > Vidéo. Faites glisser les composants correspondants vers la zone de travail. 

  4. Sélectionnez l’occurrence du composant vidéo sur la scène, puis affichez et modifiez les paramètres dans l’inspecteur des propriétés. Le paramètre Source permet de sélectionner le fichier vidéo à un emplacement local ou de fournir une URL pour lire la vidéo (formats mp4, ogg, ogv ou webm). 

    Glissement-déplacement des composants

  5. Sélectionnez Respecter les dimensions du fichier source pour redimensionner le lecteur vidéo en fonction des dimensions de la vidéo en entrée. Cette fonction fonctionne seulement avec les vidéos mp4. Pour les autres types de vidéos, redimensionnez manuellement l’occurrence vidéo sur la scène afin que les proportions restent les mêmes.

  6. Appuyez sur Ctrl + Entrée (Commande + Entrée sur Mac) pour prévisualiser la séquence. La vidéo s’affiche dans votre navigateur par défaut. Puisque les contrôles sont visibles par défaut, ils s’affichent quand vous passez le pointeur de la souris sur la vidéo dans un navigateur.

    Vous pouvez appliquer la même procédure à d’autres composants.

    Aperçu de la sortie de composant

Remarque :

Les composants sont ajoutés au document HTML comme éléments DOM. Reportez-vous aux fragments de code du composant (Fragments de code > HTML5 Canvas > Composants) pour ajouter de l’interactivité aux composants.

Ajout d’interactivité à des composants à l’aide de fragments de code

  1. Sélectionnez Fenêtre > Composants.

  2. Pour rendre des composants interactifs, sélectionnez Fenêtre > Fragments de code. Vous pouvez afficher le mappage des différents comportements de composants disponibles.

  3. Dans l’écran Fragments de code, sélectionnez HTML5 Canvas > Composants.

    Fragments de code par défaut

  4. Double-cliquez sur le fragment de code correspondant au composant sélectionné afin de l’afficher dans le panneau Actions. Pour en savoir plus sur l’ajout d’interactivité aux fragments de code, voir Ajout d’interactivité à l’aide de fragments de code dans Animate

Exemple

Reportez-vous à l’exemple suivant pour savoir comment utiliser des fragments de code là où la lecture de la vidéo est commandée par du code.

  1. Sélectionnez l’occurrence de la vidéo sur la scène et désactivez le paramètre Lecture auto dans l’inspecteur des propriétés. 

  2. Double-cliquez sur le composant Bouton deux fois dans le panneau Composants afin de créer deux occurrences sur la scène et de positionner les boutons. Vous pouvez également faire glisser et déplacer le composant directement depuis le panneau Composants sur la scène.

    Positionnement des boutons

  3. Sélectionnez la première occurrence de bouton et définissez le libellé sur Lecture dans l’inspecteur des propriétés. Modifiez de la même façon le libellé du deuxième bouton sur Pause. 

  4. Ouvrez le panneau Fragments de code en cliquant sur Fenêtre > Fragments de code. Accédez à HTML5 Canvas > Composants et développez la section de l’interface utilisateur. 

  5. Sélectionnez le bouton Lecture sur la scène, double-cliquez sur l’événement de clic du bouton dans le panneau Fragments de code, puis cliquez sur OK. Animate attribue un nom d’instance au bouton sélectionné. Le code nouvellement ajouté apparaît dans le panneau Actions.

    Ajout de fragments de code

  6. Sélectionnez la vidéo sur la scène et développez la section Vidéo dans les fragments de code. Double-cliquez sur Lire une vidéo. Le code requis pour lire la vidéo est ajouté au panneau Actions.

    Code ajouté au panneau Actions

  7. Pour lire la vidéo quand l’utilisateur clique sur le bouton, déplacez le code dans la section <Début de votre code personnalisé> et <Fin de votre code personnalisé>. 

    Déplacement du code entre les balises

  8. Pour ajouter un code afin de suspendre la vidéo, sélectionnez le bouton Pause, affectez le nouveau gestionnaire de clic du bouton, puis ajoutez le code permettant de mettre en pause la lecture d’une vidéo.

  9. Prévisualisez le film. Cliquez sur le bouton Lecture pour lire la vidéo et sur le bouton Pause pour la mettre en pause. 

Remarque :

Vous pouvez afficher l’attribut className pour chaque composant dans l’inspecteur des propriétés. Utilisez ces noms de classe pour habiller les composants utilisant une feuille de style CSS. Utilisez le composant CSS pour charger votre feuille CSS personnalisée. Le composant CSS permet de sélectionner n’importe quel fichier CSS local qui est inclus dans le film.

Installation de composants distribués

Les concepteurs ou les développeurs Animate peuvent installer le composant de fichier ZXP distribué à l’aide de l’utilitaire Gérer les extensions. Pour plus d’informations, voir Installation des extensions.

Condition préalable

Installation des composants

Pour installer des composants distribués, vous pouvez procéder comme suit : 

  1. Double-cliquez sur le fichier ManageExtensions.exe. La boîte de dialogue Gérer les extensions apparaît.

  2. Cliquez sur Installer une extension et sélectionnez l’extension (fichier .zxp) que vous souhaitez installer. Pour plus d’informations, voir Installation des extensions.

  3. Pour afficher le composant installé dans Animate, cliquez sur Fenêtre > Composant. La boîte de dialogue contextuelle Composants apparaît. 

  4. Cliquez sur le menu hamburger dans le coin supérieur droit, puis sur Recharger les composants.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?