De component UIScrollBar aanpassen

U kunt een component UIScrollBar horizontaal en verticaal aanpassen tijdens het ontwerpen en bij uitvoering. Een verticale UIScrollBar staat u echter niet toe de breedte aan te passen en een horizontale UIScrollBar staat het aanpassen van de hoogte niet toe. Selecteer tijdens het ontwerpen de component in het werkgebied en gebruik het gereedschap Vrije transformatie of een van de opdrachten Wijzigen > Transformeren. Bij uitvoering kunt u de methode setSize() of elke toepasbare eigenschap van de klasse UIScrollBar gebruiken, zoals width , height , scaleX en scaleY .

Opmerking: Als u de methode setSize() gebruikt, kunt u alleen de breedte van een horizontale schuifbalk of de hoogte van een verticale schuifbalk wijzigen. Bij het ontwerpen kunt u de hoogte van een horizontale schuifbalk of de breedte van een verticale schuifbalk instellen, maar de waarden worden opnieuw ingesteld bij het publiceren van de film. Alleen de afmeting van een schuifbalk die overeenkomt met de lengte kan gewijzigd worden.

Stijlen gebruiken met de component UIScrollBar

Met de stijlen van de component UIScrollBar worden alleen de klassen voor de skins opgegeven en een waarde voor FocusRectPadding, waarmee het aantal pixels wordt bepaald voor de opvulling tussen het selectiekader van de component en de buitenste begrenzing. Zie Skins voor meer informatie over het gebruik van skinstijlen.

Skins gebruiken met de component UIScrollBar

De component UIScrollBar gebruikt de volgende skins.

UIScrollBar-skins

Zowel horizontale als verticale schuifbalken gebruiken dezelfde skins; bij de weergave van een horizontale schuifbalk draait de component UIScrollBar de skins op de juiste manier.

Opmerking: Het wijzigen van de ScrollBar-skin in één component zorgt dat dit voor alle andere componenten die de ScrollBar gebruiken ook wordt gewijzigd.

Het volgende voorbeeld toont hoe u de kleur van het blokje van de UIScrollBar en de pijlknoppen wijzigt.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component UIScrollBar naar het werkgebied en geef deze de instantienaam mySb . Stel op het tabblad Parameters de richting in op horizontaal.

  3. Dubbelklik op de schuifbalk om het deelvenster met skins te openen.

  4. Klik op de skin Up om deze te selecteren.

  5. Stel het zoombesturingselement op 400% in om het pictogram te vergroten voor bewerken.

  6. Dubbelklik op de achtergrond van de Pijl-rechts (of de Pijl-omhoog voor een verticale schuifbalk) totdat de achtergrond is geselecteerd en de kleur ervan wordt weergegeven in de kleurkiezer voor de vulkleur in Eigenschapcontrole.

  7. Selecteer de kleur #CC0033 om deze toe te passen op de achtergrond van de knop.

  8. Klik op de knop Terug links van de bewerkbalk boven in het werkgebied totdat u terug gaat naar de documentbewerkmodus.

  9. Herhaal stappen 6, 7 en 8 voor de elementen blokje en Pijl-links (of Pijl-omlaag voor een verticale schuifbalk).

  10. Voeg de volgende code in het deelvenster Handelingen toe aan frame 1 van de tijdlijn om de schuifbalk aan een TextField te koppelen.

    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. Selecteer Besturing > Film testen.

    De component UIScrollBar ziet er nu uit als op de onderstaande afbeelding.

    Horizontale ScrollBar met rood blokje en rode toetsen Pijl-links en Pijl-rechts
    Horizontale ScrollBar met rood blokje en rode toetsen Pijl-links en Pijl-rechts