Utilisation du composant UIScrollBar

Le composant UIScrollBar permet d’ajouter une barre de défilement à un champ de texte. Vous pouvez ajouter une barre de défilement à une zone de texte pendant la programmation ou lors de l’exécution avec ActionScript. Pour utiliser le composant UIScrollBar, créez une zone de texte sur la scène et faites glisser le composant UIScrollBar du panneau Composants vers n’importe quel quadrant du cadre de sélection de la zone de texte.

Si la longueur de la barre de défilement est inférieure à la taille combinée de ses flèches de défilement, elle ne s’affiche pas correctement. L’une des touches fléchées est masquée derrière l’autre. Flash ne fournit pas de détection des erreurs pour ceci. Dans ce cas, il peut être utile de masquer la barre de défilement avec ActionScript. Si la barre de défilement est dimensionnée de façon à ce qu’il y ait assez de place pour le curseur de défilement, Flash rend ce dernier invisible.

Le composant UIScrollBar fonctionne comme toute autre barre de défilement. Il contient des boutons fléchés aux deux extrémités et un rail et un curseur de défilement entre les deux. Il peut être associé à n’importe quel bord d’un champ de texte et utilisé verticalement et horizontalement.

Pour plus d’informations, voir la classe TextField dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Interaction de l’utilisateur avec le composant UIScrollBar

Contrairement à de nombreux autres composants, le composant UIScrollBar peut recevoir des entrées continues de la souris comme lorsque l’utilisateur maintient le bouton de la souris enfoncé plutôt que d’exiger des clics répétés.

Il n’existe pas d’interaction clavier avec le composant UIScrollBar.

Paramètres du composant UIScrollBar

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres de création suivants pour chaque occurrence du composant UIScrollBar : direction et scrollTargetName . A chacun de ces paramètres correspond une propriété ActionScript du même nom.

Vous pouvez rédiger du compte ActionScript afin de définir des options supplémentaires pour les occurrences de UILoader en utilisant ses méthodes, propriétés et événements. Pour plus d’informations, voir la classe UIScrollBar dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application avec le composant UIScrollBar

La procédure suivante explique comment ajouter un composant UIScrollBar à une application pendant la programmation.

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

  2. Créez un champ de texte dynamique suffisamment grand pour pouvoir contenir une ou deux lignes de texte et attribuez-lui le nom d’occurrence myText dans l’Inspecteur des propriétés.

  3. Dans l’Inspecteur des propriétés, définissez le type de ligne de la zone de saisie de texte sur Multiligne ou Multiligne sans retour si vous envisagez d’utiliser la barre de défilement horizontalement.

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant pour remplir la propriété text de sorte que l’utilisateur doive le faire défiler pour pouvoir l’afficher dans son intégralité :

    myText.text="When the moon is in the seventh house and Jupiter aligns with Mars, then peace will guide the planet and love will rule the stars."
    Remarque : vérifiez que la zone de texte sur la scène est assez petite pour vous contraindre à faire défiler son contenu afin de visualiser tout le texte. Si ce n’est pas le cas, la barre de défilement ne s’affiche pas ou risque d’apparaître sur deux lignes sans poignée (partie que vous faites glisser pour faire défiler le contenu).
  5. Vérifiez que l’accrochage aux objets est activé (Affichage > Accrochage > Accrocher aux objets).

  6. Faites glisser une occurrence de UIScrollBar du panneau Composants sur la zone de saisie de texte près du côté auquel vous souhaitez l’associer. La zone de texte et le composant doivent se chevaucher lorsque vous relâchez la souris de façon à ce que le composant soit correctement lié à la zone. Nommez cette occurrence mySb .

    La propriété scrollTargetName du composant est remplie automatiquement avec le nom de l’occurrence du champ de texte dans l’Inspecteur des propriétés et l’Inspecteur des composants. Si elle n’apparaît pas dans l’onglet Paramètres, vous n’avez peut-être pas suffisamment recouvert l’occurrence UIScrollBar.

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

Création d’une occurrence du composant UIScrollBar à l’aide d’ActionScript

Vous pouvez créer une occurrence de UIScrollBar à l’aide d’ActionScript et l’associer à une zone de texte lors de l’exécution. L’exemple suivant crée une occurrence de UIScrollBar à orientation horizontale et l’attache à une occurrence de zone de texte nommée myTxt , qui contient du texte provenant d’une URL. L’exemple définit également la taille de la barre de défilement afin de l’ajuster à la taille de la zone de texte :

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

  2. Faites glisser le composant ScrollBar vers le panneau Bibliothèque.

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

    import flash.net.URLLoader; 
    import fl.controls.UIScrollBar; 
    import flash.events.Event; 
     
    var myTxt:TextField = new TextField(); 
    myTxt.border = true; 
    myTxt.width = 200; 
    myTxt.height = 16; 
    myTxt.x = 200; 
    myTxt.y = 150; 
     
    var mySb:UIScrollBar = new UIScrollBar(); 
    mySb.direction = "horizontal"; 
    // Size it to match the text field. 
    mySb.setSize(myTxt.width, myTxt.height);  
     
    // Move it immediately below the text field. 
    mySb.move(myTxt.x, myTxt.height + myTxt.y); 
     
    // put them on the Stage 
    addChild(myTxt); 
    addChild(mySb); 
    // load text 
    var loader:URLLoader = new URLLoader(); 
    var request:URLRequest = new URLRequest("http://www.helpexamples.com/flash/lorem.txt"); 
    loader.load(request); 
    loader.addEventListener(Event.COMPLETE, loadcomplete); 
     
    function loadcomplete(event:Event) { 
        // move loaded text to text field 
        myTxt.text = loader.data; 
        // Set myTxt as target for scroll bar. 
        mySb.scrollTarget = myTxt; 
    }
  4. Choisissez Contrôle > Tester l’animation.