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 CC 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
    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). 

    components_drag_drop
    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.

    components_preview
    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.

    component_snippets
    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 CC

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.

    Component_example_7
    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 CC attribue un nom d’occurrence au bouton sélectionné. Le code nouvellement ajouté apparaît dans le panneau Actions.

    Component_example_4
    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.

    Component_example_5
    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é>. 

    Component_example_6
    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 lecode 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.

Condition préalable

Utilitaire Gérer les extensions. Pour obtenir des instructions de téléchargement, cliquez sur Aide > Gérer les extensions dans votre produit Animate CC.

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.

    ManageExtensions
  2. Cliquez sur Installer une extension et sélectionnez l’extension (fichier .zxp) que vous souhaitez installer.

  3. Pour afficher le composant installé dans Animate CC, 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.

    reloading-components

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne