Blog ENI : Toute la veille numérique !
🎁 Jusqu'au 25/12 : 1 commande de contenus en ligne
= 1 chance de gagner un cadeau*. Cliquez ici
🎁 Jusqu'au 31/12, recevez notre
offre d'abonnement à la Bibliothèque Numérique. Cliquez ici
  1. Livres et vidéos
  2. Animate 2023
  3. Les composants
Extrait - Animate 2023 Créer des contenus animés et interactifs en HTML5
Extraits du livre
Animate 2023 Créer des contenus animés et interactifs en HTML5 Revenir à la page d'achat du livre

Les composants

Introduction

Les composants sont des clips prédéfinis qui vous permettent de mettre en place rapidement des fonctionnalités complexes. Un composant peut être une simple commande telle qu’une case à cocher ou un élément de commande plus complexe, tel qu’un ComboBox.

Il est toujours possible de personnaliser l’apparence d’un composant mais cela demande d’entrer plus en profondeur dans le code de programmation JavaScript. Animate prenant en charge le format HTML5 Canvas, l’intérêt des composants est d’utiliser directement les fragments de code fournis par le logiciel afin d’améliorer votre productivité.

Composants ou pas ?

Dans cette première partie, vous réaliserez des animations dont l’interactivité pourra être réalisée avec un composant ou d’une manière plus classique. Vous pourrez ainsi juger par vous-même de l’opportunité d’utiliser ou non un composant.

Interactivité par un bouton

Fichier de départ : 2001Deb.fla

Fichier résultat : 2001Fin.fla

Visualisation web : 2001Fin.html

Objectif : faire tourner la roue en cliquant.

Code JavaScript : fragments de code pour un composant de type Button

 Ouvrez le fichier 2001Deb.fla. Vous avez déjà utilisé ce fichier à l’activité 1 du chapitre Les actions en continu. La scène comporte une occurrence d’un clip nommée clip_Roue et une autre occurrence d’un bouton nommée bt_Tourne1.

 Testez l’animation dans le navigateur.

À chaque clic sur le bouton, la roue doit tourner de 15°.

 Revenez dans Animate et par le menu Fenêtre, affichez les Composants.

 Une fenêtre apparaît, cliquez sur le titre Composants puis développez le dossier Interface utilisateur.

images/20SF01.PNG

Fenêtre des composants

 Sélectionnez ensuite le composant Button et glissez-le sur la scène à droite du bouton déjà présent.

images/20SF02.PNG

Glissement du composant Button

 Dans la fenêtre Propriétés, nommez-le bt_Tourne2.

images/20SF03.PNG

Nommez le composant

 Le bouton étant toujours sélectionné, cliquez sur menu Fenêtre et affichez Paramètres de composant.

 Une nouvelle fenêtre apparaît, dans le champ étiquette, remplacez Button par Tourne.

images/20SF04.PNG

Étiquette de bouton

 Testez l’animation dans le navigateur et comparez l’aspect des deux boutons.

images/20SF05.PNG

Les deux boutons

Ces 2 boutons, bien que différents par leur apparence, affichent le même message. Celui de gauche a été défini au chapitre Les actions en continu par son code (this.etiquette.text=this.name.slice(3,9)), celui de droite par les Paramètres du composant. 

Par contre, si le bouton de gauche permet de faire tourner la roue, ce n’est pas encore le cas du bouton de droite.

 Revenez dans Animate et affichez la fenêtre Actions du calque action.

 Veillez à...

Des composants bien pratiques

Dans cette seconde partie, vous utiliserez des composants qui pourraient être qualifiés d’indispensables. En effet, s’il fallait les réaliser à l’aide des outils de dessin d’Animate, cela demanderait beaucoup de temps. Quant au code de programmation qui permettrait de les faire fonctionner, il serait également assez complexe.

ComboBox

Une ComboBox (boîte combinée en français) est un élément graphique qui réunit une zone de texte et une liste déroulante.

À l’état initial seulement, la première valeur de la liste est visible (l’item zéro). Quand vous cliquez sur la flèche du symbole graphique, les autres items apparaissent et vous pouvez faire votre choix.

Fichier de départ : 2004Deb.fla

Fichier résultat : 2004Fin.fla

Visualisation web : 2004Fin.html

Objectif : utiliser des ComboBox.

Code JavaScript : fragments de code et code pour un composant de type ComboBox

 Ouvrez le fichier 2004Deb.fla. Il est constitué de cadres texte, d’une image, de deux smileys et d’une barre de navigation, le tout réparti sur quatre calques.

 Testez l’animation dans le navigateur, vous êtes invité à répondre à des questions, mais il vous manque des éléments graphiques.

 Revenez dans Animate et affichez la fenêtre Actions du calque action. afin d’étudier le début du script de cette animation :

  • affichage du titre de page (ligne 4),

  • boutons de la barre de navigation (lignes 5 et 6),

  • position et visibilité de clipRep (lignes 7 et 8),

  • variable ctrlValid définie à false (ligne 9),

  • messages affichés au départ de l’animation (ligne 10).

Tous ces messages sont définis dans la partie Global - Script de la fenêtre Actions. 

images/20SF33.PNG

Début de script

 Étudiez ensuite le code de la fonction actualiser.

Ce code ressemble à celui de l’activité précédente.

La principale différence réside dans le fait qu’il y a deux smileys nommés smiley1 et smiley2 au lieu d’un seul.

images/20SF34.PNG

Code de la fonction actualiser

 Enfin, notez que la fin du script concernant les boutons de navigation btMenu4 et btMenu6 n’a pas changé....