|
Vous pouvez transformer un composant NumericStepper 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. Lors de l’exécution, utilisez la méthode
setSize()
ou toutes les propriétés et méthodes applicables de la classe NumericStepper, telles que
width
,
height
,
scaleX
et
scaleY
.
Le redimensionnement du composant NumericStepper ne modifie pas la largeur des boutons fléchés vers le haut et le bas. Si l’incrémenteur est redimensionné au-delà de la hauteur par défaut, le comportement par défaut place les boutons fléchés en haut et en bas du composant. Sinon, la mise à l’échelle à 9 découpes détermine la façon dont les boutons sont dessinés. Les boutons fléchés apparaissent toujours à droite de la zone de texte.
Styles et composant NumericStepper
Vous pouvez définir les propriétés de style du composant NumericStepper afin de modifier son apparence. Les styles spécifient les valeurs des enveloppes, de la marge intérieure et du format de texte du composant lorsque celui-ci est tracé. Le style
textFormat
permet de modifier la taille et l’apparence de la valeur du composant NumericStepper. Les différents styles d’enveloppe permettent de spécifier les diverses classes à associer à l’enveloppe. Pour plus d’informations sur l’utilisation des styles d’enveloppe, voir la section
A propos des enveloppes
.
Cette procédure utilise le style
textFormat
pour modifier l’aspect de la valeur affichée par le composant NumericStepper.
-
Créez un document Flash (ActionScript 3.0).
-
Faites glisser le composant NumericStepper du panneau Composants vers la scène et nommez l’occurrence
myNs
.
-
Ajoutez le code suivant dans le panneau Actions, sur l’image 1 du scénario principal :
var tf:TextFormat = new TextFormat();
myNs.setSize(100, 50);
tf.color = 0x0000CC;
tf.size = 24;
tf.font = "Arial";
tf.align = "center";
myNs.setStyle("textFormat", tf);
-
Choisissez Contrôle > Tester l’animation.
Enveloppes et composant NumericStepper
Le composant NumericStepper dispose d’enveloppes permettant de représenter les états Relevé, Abaissé, Désactivé et Sélectionné de ses boutons.
Si un incrémenteur est activé, les boutons fléchés vers le haut et vers le bas affichent leur état survolé lorsque le pointeur se déplace au-dessus d’eux. Les boutons affichent leur état enfoncé lorsque l’utilisateur clique sur leur entrée. Les boutons reviennent à l’état survolé lorsque le bouton de la souris est relâché. Si le pointeur s’éloigne des boutons alors que le bouton de la souris est enfoncé, les boutons reviennent à leur état original.
Si un incrémenteur est désactivé, il affiche son état désactivé, quelle que soit l’interaction de l’utilisateur.
Le composant NumericStepper possède les enveloppes suivantes :
-
Créez un fichier FLA.
-
Faites glisser le composant NumericStepper sur la scène.
-
Réglez le zoom sur 400 % pour agrandir l’image en vue de la modification.
-
Double-cliquez sur l’arrière-plan de l’enveloppe TextInput sur le panneau des enveloppes jusqu’à ce que vous développiez le niveau Groupe et que la couleur d’arrière-plan apparaisse dans le sélecteur de couleur de remplissage de l’Inspecteur des propriétés.
-
Dans le sélecteur de couleur de remplissage de l’Inspecteur des propriétés, sélectionnez la couleur #9999FF pour l’appliquer à l’arrière-plan de l’enveloppe TextInput.
-
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.
-
Double-cliquez de nouveau sur le composant NumericStepper pour rouvrir la panneau des enveloppes.
-
Double-cliquez sur l’arrière-plan du bouton fléché vers le haut dans le groupe Relevé jusqu’à ce que l’arrière-plan soit sélectionné et que sa couleur apparaisse dans le sélecteur de couleur de remplissage de l’Inspecteur des propriétés.
-
Choisissez la couleur #9966FF afin de l’appliquer à l’arrière-plan du bouton portant la flèche vers le haut.
-
Répétez les étapes 8 et 9 pour la flèche vers le bas du groupe Relevé.
-
Choisissez Contrôle > Tester l’animation.
L’occurrence de NumericStepper doit apparaître telle qu’illustrée ci-dessous :
|
|
|
