Personnalisation du composant UIScrollBar

Vous pouvez transformer un composant UIScrollBar horizontalement et verticalement pendant la programmation et lors de l’exécution. Néanmoins, un composant UIScrollBar vertical ne vous permet pas de modifier la largeur, et un composant UIScrollBar horizontal ne vous permet pas de modifier la hauteur. 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 les propriétés applicables de la classe UIScrollBar, telles que les propriétés width, height, scaleX et scaleY.

Remarque : si vous utilisez la méthode setSize(), vous ne pouvez modifier que la largeur d’une barre de défilement horizontale ou la hauteur d’une barre de défilement verticale. Lors de la programmation, vous pouvez définir la hauteur d’une barre de défilement horizontale, ou la largeur d’une barre de défilement verticale, mais les valeurs seront réinitialisées à la publication de l’animation. Seule la dimension d’une barre de défilement qui correspond à sa longueur peut être modifiée.

Utilisation de styles avec le composant UIScrollBar

Les styles du composant UIScrollBar spécifient uniquement les classes de ses enveloppes et la valeur de FocusRectPadding, qui spécifie le nombre de pixels à utiliser pour la marge intérieure entre le cadre de sélection du composant et sa limite extérieure. Pour plus d’informations sur l’utilisation des styles d’enveloppe, voir la section A propos des enveloppes.

Utilisation d’enveloppes avec le composant UIScrollBar

Le composant UIScrollBar emploie les enveloppes suivantes.

Enveloppes du composant UIScrollBar

Les barres de défilement horizontale et verticale utilisent les mêmes enveloppes. Lors de l’affichage d’une barre de défilement horizontale, le composant UIScrollBar fait pivoter les enveloppes comme nécessaire.

Remarque : la modification de l’enveloppe ScrollBar dans un composant affecte tous les autres composants qui utilisent le composant ScrollBar.

L’exemple suivant montre comment modifier la couleur du curseur du composant UIScrollBar et des boutons fléchés.

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

  2. Faites glisser le composant UIScrollBar sur la scène et nommez l’occurrence mySb. Dans l’onglet Paramètres, définissez la direction sur horizontal.

  3. Double-cliquez sur la barre de défilement pour ouvrir son panneau d’enveloppes.

  4. Cliquez sur l’enveloppe Up pour la sélectionner.

  5. Définissez le contrôle de zoom sur 400 % pour agrandir l’icône en vue de la modification.

  6. Double-cliquez sur l’arrière-plan de la flèche droite (ou de la flèche vers le haut pour une barre de défilement verticale) 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.

  7. Choisissez la couleur #CC0033 pour l’appliquer à l’arrière-plan du bouton.

  8. Cliquez sur le bouton de retour figurant dans la partie gauche de la barre d’édition en haut de la scène jusqu’à ce que vous reveniez en mode d’édition de document.

  9. Répétez les étapes 6, 7 et 8 pour le curseur et la flèche vers la gauche (ou vers le bas pour une barre de défilement verticale).

  10. Ajoutez le code suivant dans le panneau Actions, sur l’image 1 du scénario, pour associer la barre de défilement à un objet TextField.

    var tf:TextField = new TextField(); 
    addChild(tf); 
    tf.x = 150; 
    tf.y = 100; 
    mySb.width = tf.width = 200; 
    tf.height = 22; 
    tf.text = "All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All . . ."; 
    mySb.y = tf.y + tf.height; 
    mySb.x = tf.x + tf.width;x 
    mySb.scrollTarget = tf;
  11. Choisissez Contrôle > Tester l’animation.

    Le composant UIScrollBar doit apparaître tel qu’illustré ci-dessous.

    Barre de défilement horizontale sur laquelle le curseur et les flèches gauche et droite apparaissent en rouge
    Barre de défilement horizontale sur laquelle le curseur et les flèches gauche et droite apparaissent en rouge