|
Potete trasformare un componente NumericStepper modificandone le dimensioni orizzontale e verticale sia durante la creazione che in fase di runtime. 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à e i metodi validi della classe NumericStepper quali
width
,
height
,
scaleX
e
scaleY
.
Il ridimensionamento del componente NumericStepper non modifica la larghezza dei pulsanti freccia giù e freccia su. Se lo stepper viene ridimensionato con un'altezza maggiore rispetto a quella predefinita, i pulsanti freccia vengono ancorati nella parte superiore e inferiore del componente per impostazione predefinita. In caso contrario, la modifica in scala a 9 porzioni determina il modo in cui vengono disegnati i pulsanti. Essi vengono sempre visualizzati a destra della casella di testo.
Stili e componente NumericStepper
Potete impostare le proprietà di stile del componente NumericStepper per modificarne l'aspetto. Mediante gli stili potete specificare i valori per gli skin, il riempimento e il formato del testo del componente quando viene disegnato. Lo stile
textFormat
consente di modificare le dimensioni e l'aspetto del valore di NumericStepper. I diversi stili dello skin consentono di specificare le diverse classi da usare per lo skin. Per ulteriori informazioni sull'uso degli stili degli skin, vedete
Informazioni sugli skin
.
In questa procedura viene usato lo stile
textFormat
per modificare l'aspetto del valore visualizzato dal componente NumericStepper.
-
Create un nuovo documento Flash (ActionScript 3.0).
-
Trascinate il componente NumericStepper dal pannello Componenti allo stage e assegnategli il nome di istanza
myNs
.
-
Aggiungete il codice seguente nel pannello Azioni al fotogramma 1 della linea temporale principale:
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);
-
Selezionare Controllo > Prova filmato.
Skin e componente NumericStepper
Il componente NumericStepper dispone di skin per rappresentare gli stati su, giù, disattivato e selezionato dei relativi pulsanti.
Se uno stepper è attivo, il pulsante giù e il pulsante su visualizzano lo stato sopra quando il puntatore passa su di essi. I pulsanti visualizzano lo stato giù quando vengono premuti e tornano allo stato sopra quando il pulsante del mouse viene rilasciato. Se il puntatore si sposta dai pulsanti mentre il pulsante del mouse è premuto, i pulsanti tornano allo stato originale.
Se uno stepper è disabilitato, visualizza tale stato indipendentemente dall'azione dell'utente.
Un componente NumericStepper dispone dei seguenti skin:
-
Creare un nuovo file FLA.
-
Trascinate il componente NumericStepper nello stage.
-
Impostate la percentuale di ingrandimento su 400% per aumentare le dimensioni dell'immagine per la modifica.
-
Fate doppio clic sullo sfondo dello skin TextInput nel pannello degli skin e accedete al livello relativo al gruppo finché non viene visualizzato il colore di sfondo nel selettore Colore riempimento della finestra di ispezione Proprietà.
-
Mediante il selettore Colore riempimento della finestra di ispezione Proprietà, selezionate il colore #9999FF per applicarlo allo sfondo dello skin TextInput.
-
Fate clic sul pulsante Indietro sul lato sinistro della barra di modifica, visualizzata sopra lo stage, per tornare alla modalità di modifica del documento.
-
Fate di nuovo doppio clic sul componente NumericStepper per riaprire la tavolozza degli skin.
-
Fate doppio clic sullo sfondo del pulsante freccia su nel gruppo Up per selezionarlo; il relativo colore viene visualizzato nel selettore Colore riempimento della finestra di ispezione Proprietà.
-
Selezionate il colore #9966FF per applicarlo allo sfondo del pulsante freccia su.
-
Ripetete i punti 8 e 9 per il pulsante freccia giù nel gruppo Up.
-
Selezionare Controllo > Prova filmato.
L'istanza NumericStepper dovrebbe apparire come mostrato nella figura seguente:
|
|
|
