Share
Un CheckBox è un elemento grafico dell'interfaccia utente che consente all'utente di effettuare una o più selezioni da un numero di opzioni.
In questo tutorial creeremo una casella di controllo Switch ispirata all'interfaccia grafica utente di iPhone. Continua a leggere per scoprire come!
Usando gli strumenti di disegno di Flash creeremo un vettore Switch che sarà controllato dalle classi. Una classe si prenderà cura di tutto il comportamento di Switch e un'altra classe controllerà semplicemente il valore dello Switch. Andiamo!
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 600x300 e imposta il colore su # EFEFF0.
Ora creeremo la grafica di Switch.
Seleziona lo strumento Rettangolo Primitivo (R) e crea un rettangolo di 280x80 px, riempiendolo con questo gradiente lineare: # 505052, # ACADB1.
Utilizzare lo strumento Trasformazione sfumatura per ruotare la sfumatura orizzontalmente e modificare il raggio dell'angolo (Pannello Proprietà) su 10.
Disegneremo due sfondi per lo Switch, lo sfondo OFF e lo sfondo ON.
Duplica la forma precedente e modifica la sua dimensione in 276x76 px. Cambia il lineare grandioso in # 9A9A9A, # F4F3F6 e sposta l'ultimo selettore di colore (Pannello colore) a metà strada lungo la barra.
Seleziona lo strumento di testo (T) e crea un campo di testo statico. Scrivi "OFF" e posizionalo sul lato destro dello sfondo.
Ho usato Helvetica Neue Bold, 48 pt, # 8C8C8C.
Ora aggiungeremo un pulsante che può essere trascinato per modificare il valore dello Switch.
Usa lo strumento Rettangolo per creare un rettangolo di 120x80 px e riempirlo con # A19FA0, imposta il raggio dell'angolo su 10.
Duplica la forma e ridimensionala a 116x76 px, riempila con #FCFCFE.
Per dare il tocco finale al pulsante, ripetere il processo e riempire la forma con una sfumatura lineare # # D7D7D7, #FCFCFE. Utilizzare lo strumento Trasformazione sfumatura per ruotare il riempimento.
Duplica il bordo e lo sfondo OFF, elimina il testo e modifica il gradiente del bordo a # 0D4372, # 6193D2.
Quindi, modifica il gradiente di sfondo su # 0C68B5, # 479FF9, # 6DB0F6.
Posiziona la forma del bordo del pulsante sul lato destro.
Rompi (Cmd + B) le forme per tagliarle.
Usa lo stesso formato di testo per aggiungere il testo "ON" allo sfondo.
Converti il pulsante trascinabile in MovieClip e chiamalo "area". Come puoi immaginare, questa sarà l'area che verrà trascinata per cambiare il valore dello Switch.
Assicurati che il punto di registrazione sia posizionato come quello nelle immagini.
Seleziona tutte le forme inclusa la MovieClip e convertile di nuovo, dai il nome al "cursore" del risultato.
Usa una qualsiasi delle forme dei bordi per creare un'altra MovieClip, questa sarà la Maschera che nasconderà parte della grafica. Chiamalo "msk".
Converti tutto nuovamente in MovieClip e fai doppio clic su di esso.
Crea un nuovo livello, quindi taglia e incolla la clip della maschera su di essa. Fai clic con il pulsante destro del mouse sul livello maschera e seleziona l'opzione "Maschera".
Questo finirà tutta la grafica. Ora il tuo Switch dovrebbe assomigliare a questo (notare il punto di registrazione):
Apri la Libreria e fai clic con il pulsante destro del mouse sul simbolo Cambia. Selezionare Proprietà, selezionare la casella "Esporta per ActionScript" e scrivere "Cambia" come nome della classe.
Crea un nuovo documento ActionScript e salvalo come "Switch.as".
Importa le classi richieste. Se hai bisogno di aiuto specifico per uno di questi, fai riferimento alla Guida di Flash (F1).
package import fl.transitions.Tween; importare fl.transitions.easing.Strong; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle;
Queste sono le variabili che useremo, spiegate nel commento del codice.
la classe pubblica Switch estende Sprite private var tween: Tween; // Un oggetto Tween per l'animazione public var stat: Boolean = false; // Questa è una variabile pubblica, è usata per conoscere il valore di Switch al di fuori di questa classe
La funzione di costruzione. Questa funzione aggiunge gli ascoltatori.
funzione pubblica Switch (): void slider.area.addEventListener (MouseEvent.MOUSE_DOWN, switchDrag); slider.area.addEventListener (MouseEvent.MOUSE_UP, checkPosition);
Questa funzione gestisce il trascinamento del pulsante, in base alla sua posizione.
funzione privata switchDrag (e: MouseEvent): void if (! stat) // Se Switch è OFF, possiamo trascinare a destra e.target.parent.startDrag (true, new Rectangle (0, 0, e.target .parent.parent.msk.width / 1.75, 0)); else e.target.parent.startDrag (true, new Rectangle (e.target.parent.parent.msk.width / 1.75, 0, -e.target.parent.parent.msk.width / 1.75, 0)) ;
Questo codice controlla la posizione del pulsante trascinabile. A seconda del suo valore, ritorna alla posizione originale o rimane nella nuova.
private function checkPosition (e: MouseEvent): void e.target.parent.stopDrag (); if (e.target.parent.x> = 140) e.target.parent.x = 160; stat = true; else if (! stat && e.target.parent.x < 140) tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true); stat = false; // OFF to ON if (e.target.parent.x <= 20) e.target.parent.x = 0; stat = false; else if (stat && e.target.parent.x > 20) tween = new Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 160,1, true); stat = true;
Questo è un esempio di come usare il tuo nuovo Switch.
Crea un nuovo documento ActionScript e salvalo come "Main.as".
Accentsconagua
pacchetto import Switch; // Importa la classe import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite public function Main (): void iSwitch.addEventListener (MouseEvent.MOUSE_UP, checkState); // iSwitch è un'istanza nella fase della classe Switch private function checkState (e: MouseEvent): void if (iSwitch.stat) trace ("Switch is ON!"); else trace ("Switch is OFF!"); Torna al file .Fla e nel pannello Proprietà aggiungi "Main" nel campo Class per renderlo la Document Class.
Hai creato uno Switch completamente personalizzabile da utilizzare nelle tue applicazioni! Ricorda che puoi creare le tue skin e aggiungere molte più funzionalità agli stati ON e OFF.
Grazie per aver letto!
