Utilisation du composant Button

Le composant Button est un bouton rectangulaire pouvant être redimensionné, sur lequel un utilisateur peut appuyer à l’aide de la souris ou de la barre d’espace pour déclencher une action dans l’application. Vous pouvez ajouter une icône personnalisée à un composant Button. Vous pouvez également modifier son comportement pour transformer un bouton-poussoir en bouton bascule. Un bouton bascule reste enfoncé lorsque l’utilisateur clique sur son entrée, puis reprend l’état relevé au clic suivant.

Le composant Button est un élément fondamental de nombreux formulaires et applications Web. Chaque fois que l’utilisateur doit pouvoir déclencher un événement, vous utilisez des boutons. Par exemple, la plupart des formulaires comportent un bouton Envoyer. Vous pouvez également ajouter des boutons Précédent et Suivant à une présentation.

Interaction de l’utilisateur avec le composant Button

Vous pouvez activer ou désactiver un bouton dans une application. En état désactivé, un bouton ne réagit pas aux commandes de la souris ni du clavier. Un bouton activé reçoit le focus si vous cliquez sur son entrée ou si vous appuyez sur la touche de tabulation pour l’atteindre. Lorsque l’occurrence d’un composant Button a le focus, vous pouvez la contrôler à l’aide des touches suivantes :

Touche

Description

Maj+Tab

Place le focus sur l’objet précédent.

Espace

Appuie sur le bouton ou le relâche et déclenche l’événement click .

Tab

Place le focus sur l’objet suivant.

Entrée

Place le focus sur l’objet suivant si un bouton est défini comme étant le bouton par défaut de FocusManager.

Pour plus d’informations sur le contrôle du focus, voir l’interface IFocusManager et la classe FocusManager dans le Guide de référence d’ActionScript 3.0 pour Flash Professional et Utilisation de FocusManager .

L’aperçu en direct des occurrences de bouton reflète les modifications apportées aux paramètres dans l’Inspecteur des propriétés ou l’Inspecteur des composants pendant la programmation.

Remarque : lorsque l’icône est plus grande que le bouton, elle dépasse ses bordures.

Pour désigner un bouton comme bouton-poussoir par défaut dans une application (bouton qui reçoit l’événement click lorsque l’utilisateur appuie sur la touche Entrée), configurez FocusManager.defaultButton . Par exemple, le code suivant définit le bouton par défaut comme étant une occurrence de bouton intitulée submitButton . 

FocusManager.defaultButton = submitButton;

Lorsque vous ajoutez un composant Button à une application, vous pouvez le rendre accessible à un lecteur d’écran en ajoutant les lignes de code ActionScript suivantes : 

import fl.accessibility.ButtonAccImpl; 
 
ButtonAccImpl.enableAccessibility();

Quel que soit le nombre d’occurrences d’un composant que vous créez, l’activation de son accessibilité ne se fait qu’une fois.

Paramètres du composant Button

Vous pouvez définir les paramètres de création suivants dans l’Inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) ou dans l’Inspecteur des composants (Fenêtre > Inspecteur des composants) pour chaque occurrence de Button : emphasized , label , labelPlacement , selected et toggle . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Lorsque vous attribuez une valeur à ces paramètres, vous définissez l’état initial de la propriété dans l’application. La définition de la propriété dans ActionScript écrase la valeur que vous avez définie dans le paramètre. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe Button dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application avec le composant Button

La procédure suivante décrit l’ajout d’un composant Button à une application lors de la programmation. Dans cet exemple, le composant Button modifie l’état d’un composant ColorPicker lorsque vous cliquez dessus.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant Button du panneau Composants vers la scène et entrez les valeurs suivantes pour celui-ci dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence aButton .

    • Entrez Show pour le paramètre label.

  3. Ajoutez un composant ColorPicker sur la scène et nommez l’occurrence aCp .

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}

    La deuxième ligne de code enregistre la fonction clickHandler() en tant que gestionnaire de l’événement MouseEvent.CLICK . L’événement se produit lorsqu’un utilisateur clique sur le composant Button, ce qui amène la fonction clickHandler() à effectuer l’une des actions suivantes selon la valeur du composant Button :

    • Afficher : rend le composant ColorPicker visible et définit l’étiquette du bouton sur Désactiver.

    • Désactiver : désactive le composant ColorPicker et définit l’étiquette du bouton sur Activer.

    • Activer : active le composant ColorPicker et définit l’étiquette du bouton sur Masquer.

    • Masquer : rend le composant ColorPicker invisible et définit l’étiquette du bouton sur Afficher.

  5. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

Création d’une application avec le composant Button

La procédure suivante crée un composant Button bascule à l’aide de code ActionScript et affiche le type d’événement dans le panneau Sortie lorsque vous cliquez sur le composant Button. L’exemple crée l’occurrence du composant Button en invoquant le constructeur de la classe et l’ajoute sur la scène en appelant la méthode addChild() .

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant Button du panneau Composants vers le panneau Bibliothèque du document en cours.

    Cette opération permet d’ajouter le composant à la bibliothèque, mais elle ne permet pas de le rendre visible dans l’application.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code suivant pour créer une occurrence de bouton : 

    import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);

    La méthode move() positionne le bouton à l’emplacement 50 (coordonnée x), 50 (coordonnée y) sur la scène.

  4. Ajoutez maintenant le code ActionScript suivant pour créer un écouteur d’événements et une fonction de gestionnaire d’événements : 

    aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

  5. Choisissez Contrôle > Tester l’animation.

    Lorsque vous cliquez sur le bouton, Flash affiche le message « Event type: click » dans le panneau Sortie.