Personalizzare il componente UIScrollBar

Potete trasformare un componente UIScrollBar modificandone le dimensioni orizzontale e verticale sia durante la creazione che in fase di runtime. Tuttavia, un componente UIScrollBar verticale non consente di modificare la larghezza, mentre un componente UIScrollBar orizzontale non permette di modificare l'altezza. Durante la creazione, selezionate il componente nello stage e usate lo strumento Trasformazione libera o uno dei comandi Elabora > Trasforma. In fase di runtime, usate il metodo setSize() o le proprietà valide della classe UIScrollBar quali width , height , scaleX e scaleY .

Nota: se utilizzate il metodo setSize() , potete modificare solo la larghezza di una barra di scorrimento orizzontale o l'altezza di una barra di scorrimento verticale. In fase di creazione potete impostare l'altezza di una barra di scorrimento orizzontale o la larghezza di una barra di scorrimento verticale, ma i valori vengono ripristinati al momento della pubblicazione del filmato. È possibile modificare solo le dimensioni di una barra di scorrimento corrispondente alla sua lunghezza.

Usare gli stili con il componente UIScrollBar

Gli stili del componente UIScrollBar consentono di specificare solo le classi per i relativi skin e un valore per FocusRectPadding, che specifica il numero di pixel da usare per il riempimento tra il riquadro di delimitazione e il bordo esterno del componente. Per ulteriori informazioni sull'uso degli stili degli skin, vedete Informazioni sugli skin .

Usare gli skin con il componente UIScrollBar

Il componente UIScrollBar usa i seguenti skin:

Skin del componente UIScrollBar

Le barre orizzontale e verticale usano gli stessi skin, che vengono ruotati automaticamente dal componente UIScrollBar quando viene visualizzata una barra di scorrimento orizzontale.

Nota: la modifica dello skin ScrollBar in un componente viene applicata a tutti gli altri componenti che usano il componente ScrollBar.

L'esempio seguente illustra come cambiare il colore della casella di scorrimento e dei pulsanti freccia del componente UIScrollThumb.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate il componente UIScrollBar nello stage e assegnategli il nome di istanza mySb . Nella scheda Parametri, impostate la direzione su orizzontale.

  3. Fate doppio clic sulla barra di scorrimento per aprire il relativo pannello di skin.

  4. Fate clic sullo skin Up per selezionarlo.

  5. Impostate la percentuale di ingrandimento su 400% per aumentare le dimensioni dell'icona per la modifica.

  6. Fate doppio clic sullo sfondo del pulsante freccia destra (o freccia su per una barra di scorrimento verticale) per selezionarlo; il relativo colore viene visualizzato nel selettore Colore riempimento della finestra di ispezione Proprietà.

  7. Selezionate il colore #CC0033 per applicarlo allo sfondo del pulsante.

  8. Fate clic sul pulsante Indietro sul lato sinistro della barra di modifica, visualizzata sopra lo stage, per tornare alla modalità di modifica del documento.

  9. Ripetete i punti 6, 7 e 8 per gli elementi casella di scorrimento e freccia sinistra (o freccia giù per una barra di scorrimento verticale).

  10. Aggiungete il codice seguente nel pannello Azioni al fotogramma 1 della linea temporale per associare la barra di scorrimento a un componente 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. Selezionare Controllo > Prova filmato.

    Il componente UIScrollBar dovrebbe apparire come nella figura seguente.

    ScrollBar orizzontale con casella di scorrimento e frecce sinistra e destra in rosso
    ScrollBar orizzontale con casella di scorrimento e frecce sinistra e destra in rosso