|
Vous pouvez transformer un composant Button horizontalement et verticalement pendant la programmation et lors de l’exécution. Lors de la programmation, choisissez le composant sur la scène et utilisez l’outil Transformer librement ou une commande de modification > transformation. À l’exécution, utilisez la méthode
setSize()
ou toute propriété applicable de la classe Button, comme
height
et
width
, ainsi que
scaleX
et
scaleY
.
Le redimensionnement du bouton n’affecte pas la taille de l’icône ni celle de l’étiquette. Le cadre de sélection d’un bouton correspond à la bordure du bouton et désigne également la zone active de l’occurrence. Si vous augmentez la taille de l’occurrence, vous augmentez également celle de la zone active. Si le cadre de sélection est trop petit pour contenir l’étiquette, celle-ci est découpée à la bonne taille.
Si le bouton possède une icône plus grande que sa taille, l’icône dépasse les bordures du bouton.
Utilisation de styles avec le composant Button
Les styles d’un composant Button définissent généralement des valeurs pour ses enveloppes, ses icônes, la mise en forme du texte et le remplissage lorsque le composant est dessiné dans ses différents états.
La procédure suivante place deux composants Button sur la scène et définit la propriété
emphasized
sur
true
pour les deux boutons lorsque l’utilisateur clique sur l’un d’entre eux. Elle fixe également le style
emphasizedSkin
pour le second composant Button à
selectedOverSkin
lorsque l’utilisateur clique sur son entrée. Ce faisant, les deux composants Button possèdent des enveloppes différentes pour le même état.
-
Créez un fichier Flash (ActionScript 3.0).
-
Faites glisser deux composants Buttons sur la scène, un par un, et donnez-leur les noms d’occurrence
aBtn
et
bBtn
. Dans l’onglet Paramètres de l’Inspecteur des propriétés, attribuez-leur les étiquettes de composant Button A et Button B.
-
Ajoutez le code suivant dans le panneau Actions, sur l’image 1 du scénario :
bBtn.emphasized = true;
aBtn.emphasized = true;
bBtn.addEventListener(MouseEvent.CLICK, Btn_handler);
function Btn_handler(evt:MouseEvent):void {
bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin");
}
-
Choisissez Contrôle > Tester l’animation.
-
Cliquez sur l’un des boutons pour voir l’effet du style
emphasizedSkin
sur chacun d’eux.
Utilisation d’enveloppes avec le composant Button
Le composant Button emploie les enveloppes suivantes, qui correspondent à ses différents états. Pour modifier une ou plusieurs enveloppes de manière à changer l’aspect du composant Button, double-cliquez sur l’occurrence de bouton sur la scène pour ouvrir la palette de ses enveloppes, comme l’indique la figure ci-dessous :
Enveloppes du composant Button
Si un bouton est activé, il affiche l’état Dessus lorsque le pointeur de la souris est placé sur son entrée. Le bouton reçoit le focus d’entrée et affiche l’état Abaissé lorsque l’utilisateur clique sur son entrée. Le bouton retrouve l’état Dessus lorsque la souris est relâchée. Si le pointeur s’éloigne du bouton alors que la souris est enfoncée, le bouton retrouve son état d’origine et garde le focus d’entrée. Si le paramètre toggle est défini sur
true
, l’état Abaissé est affiché à l’aide de selectedDownSkin, celui de Relevé à l’aide de selectedUpSkin et celui de Dessus à l’aide de selectedOverSkin.
Si un bouton est désactivé, il affiche son état désactivé quelle que soit l’interaction de l’utilisateur.
Pour modifier l’une des enveloppes, double-cliquez sur son entrée pour l’ouvrir en mode d’édition de symbole, comme l’indique la figure ci-dessous :
Bouton en mode d’édition de symbole
Vous pouvez employer les outils de programmation Flash pour apporter à l’enveloppe les modifications désirées.
La procédure suivante modifie la couleur de l’enveloppe selected_over du bouton.
-
Créez un fichier Flash (ActionScript 3.0).
-
Faites glisser un composant Button du panneau Composants vers la scène. Dans l’onglet Paramètres, définissez le paramètre toggle sur
true
.
-
Double-cliquez sur le bouton pour ouvrir la palette de ses enveloppes.
-
Double-cliquez sur l’enveloppe selected_over pour l’ouvrir en mode d’édition de symbole.
-
Définissez le contrôle de zoom sur 400 % pour agrandir l’icône en vue de la modification.
-
Double-cliquez sur l’arrière-plan jusqu’à ce que sa couleur apparaisse dans le sélecteur de couleur de remplissage de l’Inspecteur des propriétés.
-
Sélectionnez la couleur #CC0099 dans le sélecteur de couleur de remplissage pour l’appliquer à l’arrière-plan de l’enveloppe selected_over.
-
Cliquez sur le bouton de retour figurant dans la partie gauche de la barre d’édition en haut de la scène pour revenir en mode d’édition de document.
-
Choisissez Contrôle > Tester l’animation.
-
Cliquez sur le bouton pour le placer dans l’état sélectionné.
Lorsque vous passez le pointeur de la souris au-dessus du bouton, l’état selected_over doit apparaître tel que l’indique la figure ci-dessous.
Bouton affichant l’enveloppe selected_over dont la couleur est modifiée
|
|
|
