Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



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

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 28 mai 2008

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

// création de l'instance du bouton
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.

// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();

Le texte du bouton sera défini via la propriété text des 4 instances et sera le même, le mot Valider.

// Le bouton aura pour label : "valider"
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 à 0×000000 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é.

// Le texte du survol sera de couleur rouge
survol.textColor = 0xFF0000;
// Le texte du clic sera de couleur bleue
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.

// états du bouton
monBouton.upState = normal;
monBouton.overState = survol;
monBouton.downState = clic;
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.

// affichage du bouton
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.

// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();
// Le bouton aura pour label : "valider"
normal.text = survol.text = clic.text = "Valider";
// Le texte du survol sera de couleur rouge
survol.textColor = 0xFF0000;
// Le texte du clic sera de couleur bleue
clic.textColor = 0x0000FF;
// création de l'instance du bouton
var monBouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);
// affichage du bouton
this.addChild(monBouton);