Création dynamique de boutons

Par
tannoy
– 12 juin 2008Publié dans : Les boutons

Créer dynamiquement un bouton en ActionScript 3 (AS3).

Dans la version précédente du langage, ActionScript 2, il nous était impossible de créer dynamiquement des boutons. Les boutons ne pouvaient être créés que par l’interface de dessin de Flash.
Désormais en ActionScript 3, il est possible de créer un bouton par programmation en utilisant les méthodes et propriétés de la classe SimpleButton.

Création de l’occurrence du Bouton

La première étape pour créer un bouton, va être de créer une occurrence de la classe SimpleButton. Le constructeur new de la classe SimpleButton peut-être appelé sans lui passer de paramètres

COPIER-COLLER
Actionscript:
  1. // création de l'instance du bouton
  2. var monBouton:SimpleButton = new SimpleButton();

Les états visuels du Bouton.

Lorsque nous créons un symbole bouton dans l’interface de dessin de Flash, celui possède un scénario comprenant 4 états : haut, dessus, abaissé et Cliqué.

  • La première image, l'état haut, représente l'apparence normale du bouton quand le pointeur n'est pas dessus.
  • La deuxième image, l'état dessus, représente l'apparence du bouton quand le pointeur se trouve dessus.
  • La troisième image, l'état abaissé, représente l'apparence du bouton quand vous cliquez dessus.
  • La quatrième image, l'état cliqué, définit la zone qui réagit au clic de la souris. Cette zone est invisible dans le fichier SFW.

En ActionScript 3, ces états visuels sont représentés par 4 propriétés : upState, overState, downState et hitTestState.

  • La propriété upState représente l'apparence normale du bouton quand le pointeur n'est pas dessus.
  • La propriété overState représente l'apparence du bouton quand le pointeur se trouve dessus.
  • La propriété downState représente l'apparence du bouton quand vous cliquez dessus.
  • La propriété hitTestState définit la zone qui réagit au clic de la souris. Cette zone est invisible dans le fichier SFW.

Ces différentes propriétés acceptent des valeurs de type DisplayObject ou des classes dérivées. Ce qui signifie que l’on peut afficher dans un bouton différents objets d’affichage tels qu’un texte, une image, un clip…
Dans notre exemple, chaque état du bouton sera représenté avec le même texte mais de couleur différente.
Nous allons créer 3 instances de la classe TextField, une pour chaque état. L’état haut et l’état cliquable (zone sensible) utiliseront le même objet.

COPIER-COLLER
Actionscript:
  1. // création des textes du bouton
  2. var normal:TextField = new TextField();
  3. var survol:TextField = new TextField();
  4. var clic:TextField = new TextField();

Le texte du bouton sera défini via la propriété text des 4 instances.

COPIER-COLLER
Actionscript:
  1. // Le bouton aura pour label : "valider"
  2. normal.text = survol.text = clic.text = "Valider";

La couleur des textes sera différente pur chaque état. Elle sera définie via la propriété textColor de la classe TextField qui attend une valeur héxadécimal commençant par 0x.
Le système de couleur hexadécimal utilise les six chiffres pour représenter les valeurs de couleur. Chaque chiffre comporte seize valeurs ou caractères possibles. La plage de caractères va de 0 à 9, puis de A à F. Par exemple, le noir correspond à 0x000000 et le blanc à 0xFFFFFF.
La couleur par défaut d’une instance de type TextField est le noir. Nous utiliserons le rouge pour l’état de survol et le bleu pour l’état cliqué.

COPIER-COLLER
Actionscript:
  1. // Le texte du survol sera de couleur rouge
  2. survol.textColor = 0xFF0000;
  3. // Le texte du clic sera de couleur bleue
  4. clic.textColor = 0x0000FF;

Valorisation des propriétés du bouton

Nous allons valoriser les propriétés upState, overState, downState et hitTestState, en leur affectant les différents objets TextField créés précédemment.

COPIER-COLLER
Actionscript:
  1. // états du bouton
  2. monBouton.upState = normal;
  3. monBouton.overState = survol;
  4. monBouton.downState = clic;
  5. monBouton.hitTestState = normal;

Affichage du bouton

Le bouton est ensuite affiché dans la séquence en utilisant la méthode addChild de la classe DisplayObjectContainer.

COPIER-COLLER
Actionscript:
  1. // affichage du bouton
  2. this.addChild(monBouton);

Création du bouton en lui passant en paramètres les objets d’affichage

Le constructeur de la classe SimpleButton accepte 4 paramètres facultatifs, upState, overState, downState, hitTestState.
Ce qui signifie que nous pouvons créer, instancier, le bouton en lui passant en paramètres, les objets représentant ces états.

COPIER-COLLER
Actionscript:
  1. // création des textes du bouton
  2. var normal:TextField = new TextField();
  3. var survol:TextField = new TextField();
  4. var clic:TextField = new TextField();
  5. // Le bouton aura pour label : "valider"
  6. normal.text = survol.text = clic.text = "Valider";
  7. // Le texte du survol sera de couleur rouge
  8. survol.textColor = 0xFF0000;
  9. // Le texte du clic sera de couleur bleue
  10. clic.textColor = 0x0000FF;
  11. // création de l'instance du bouton
  12. var monBouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);
  13. // affichage du bouton
  14. this.addChild(monBouton);