Accentsconagua

Introduzione rapida componenti Flash CheckBox e RadioButton

Codice
Share

In questo suggerimento rapido sui componenti di Flash Professional, daremo un'occhiata ai componenti CheckBox e RadioButton.

Breve panoramica

Nell'anteprima vedi una singola casella di controllo in alto. Quando questa casella di controllo è selezionata, l'etichetta della casella di controllo cambierà per dire "Controllato" o "Non verificato".

Con le sei caselle di selezione in basso puoi selezionare gli sport a cui sei interessato e l'area di testo sottostante verrà aggiornata per mostrare le modifiche. Con i pulsanti di opzione sulla destra puoi selezionare solo un'opzione; l'etichetta cambierà ogni volta che effettui una selezione e aggiorni per dire quale opzione hai scelto.

Passaggio 1: impostazione del documento

Apri un nuovo documento Flash e imposta le seguenti proprietà:

  • Dimensioni documento: 550 x 400 px
  • Colore di sfondo: #FFFFFF

Passaggio 2: aggiungere componenti allo stage

Apri il pannello Componenti (Menu> Finestra> Componenti o CTRL + F7).

Trascina quattro etichette, sette caselle di controllo, tre pulsanti di opzione e un'area di testo sul palco.

Nel pannello Proprietà, assegna alla prima casella di controllo il nome dell'istanza "toggleCheckBox".

Se il pannello Proprietà non viene visualizzato, vai a Menu> Finestra> Componenti o premi CTRL + F3.

Imposta la casella di controllo da X a 5,00 e da Y a 21,00.

Nota: Ora segue un processo abbastanza ripetitivo fino a quando non avremo tutti i nostri componenti impostati - appendi lì :)

Nel pannello Proprietà, assegna alla seconda casella il nome dell'istanza "swimmingCheckBox". Imposta la casella di controllo da X a 5,00 e da Y a 91,00.

Nel pannello Proprietà, assegna alla terza casella di controllo il nome dell'istanza "footBallCheckBox". Imposta la casella di controllo X su 116.00 e la sua Y su 191.00.

Nel pannello Proprietà, assegna alla quarta casella di controllo il nome dell'istanza "hikingCheckBox". Imposta la casella di controllo da X a 5,00 e da Y a 127,00.

Nel pannello Proprietà, assegna alla quinta casella di controllo il nome dell'istanza "soccerBox". Imposta la casella di controllo X su 116.00 e la sua Y su 127.00.

Nel pannello Proprietà, assegna alla sesta casella di controllo il nome dell'istanza "boxingCheckBox". Imposta la casella di controllo da X a 5,00 e da Y a 161,00.

Nel pannello Proprietà, assegna alla settima casella di controllo il nome dell'istanza "baseballCheckBox". Imposta la casella di controllo X su 116.00 e la sua Y su 161.00.

Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza "sportsLabel". Imposta l'etichetta da X a 5,00 e la sua Y a 57,00.

Nel pannello Proprietà, assegna alla seconda etichetta il nome dell'istanza "interestLabel". Imposta l'etichetta da X a 5,00 e la sua Y a 191,00.

Nel pannello Proprietà, assegna alla terza etichetta il nome dell'istanza "attendingLabel". Imposta l'etichetta da X a 278,00 e la sua Y a 21,00.

Nel pannello Proprietà, assegna alla quarta etichetta il nome dell'istanza "willAttendLabel". Imposta l'etichetta X su 278,00 e la sua Y su 143,00.

Nel pannello Proprietà, assegnare al primo pulsante di opzione il nome dell'istanza "yesRadio". Impostare il pulsante di opzione X su 278,00 e il relativo Y su 51,00.

Nel pannello Proprietà, assegnare al secondo pulsante di opzione il nome dell'istanza "noRadio". Imposta l'X del pulsante di opzione su 367,00 e il relativo Y su 51,00.

Nel pannello Proprietà, assegnare al terzo pulsante di opzione il nome dell'istanza "notSureRadio". Imposta il pulsante di opzione X su 278,00 e il relativo Y su 88,00.

Nel pannello Proprietà, assegna all'area di testo il nome dell'istanza "sportsTA". Imposta l'area del testo da X a 5,00 e la sua Y a 223,00.

Passaggio 3: Preparazione del file .as e importazione delle classi

Creare un nuovo file ActionScript e assegnargli il nome "Main.as".

Dichiareremo i nostri componenti in questo file Main.as, quindi dobbiamo disattivare "istanze di stage dichiarate automaticamente". Il vantaggio di
facendo questo è che si ottiene il suggerimento del codice per l'istanza.

Vai a Menu> File> Impostazioni pubblicazione. Fai clic su Impostazioni accanto a "Script [Actionscript 3]"

Deseleziona "dichiara automaticamente istanze di stage".

In Main.as, apri la dichiarazione del pacchetto e importa le classi che useremo aggiungendo il seguente codice:

 pacchetto // Importa i nostri controlli import fl.controls.Label; importare fl.controls.CheckBox; importare fl.controls.TextArea; importare fl.controls.RadioButton; // Necessario per AutoSize il testo nelle nostre etichette import flash.text.TextFieldAutoSize; // È necessario inserire i pulsanti della radio in un gruppo import fl.controls.RadioButtonGroup; // È necessario estendere l'importazione di clip filmato flash.display.MovieClip; // Necessario per le nostre caselle di controllo import flash.events.Event;

Passaggio 4: impostare la classe principale

Aggiungi la classe, estendi il filmato e imposta la nostra funzione di costruzione.

Aggiungi quanto segue a Main.as:

 public class Main estende MovieClip // I componenti public var interestLabel: Label; public var sportsLabel: Label; public var attendingLabel: Label; public var willAttendLabel: Label; public var toggleCheckBox: CheckBox; public var labelCheckBox: CheckBox; public var swimmingCheckBox: CheckBox; public var hikingCheckBox: CheckBox; public var boxingCheckBox: CheckBox; public var footballCheckBox: CheckBox; public var soccerCheckBox: CheckBox; public var baseballCheckBox: CheckBox; public var sportsTA: TextArea; public var yesRadio: RadioButton; public var noRadio: RadioButton; public var notSureRadio: RadioButton; // Ho bisogno di un array per gli sport CheckBox privati ​​var sportsCheckBox: Array; funzione pubblica Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Passaggio 5: funzioni nel costruttore principale

Qui definiamo il setupLabels (), setUpCheckBoxes (), e setupRadioButtons () funzioni.

Nel setupCheckBoxes () funzione abbiamo messo tutte le caselle di controllo dello sport in un array; in questo modo possiamo scorrere su di loro e aggiungere un singolo listener di eventi a ciascuno di essi, salvandoci dal dover digitare manualmente addEventListener () ogni volta.

Per il setupRadioButtons () abbiamo usato un RadioButtonGroup. I pulsanti di opzione sono destinati solo a uno di un gruppo da selezionare alla volta. Quando aggiungiamo un pulsante di opzione a un gruppo, dichiariamo a quali pulsanti radio appartiene.

Aggiungi quanto segue al Main.as:

 private function setupLabels (): void // Imposta il testo sull'etichetta sportsLabel.text = "Quali sono gli interessi sportivi?"; interestLabel.text = "I tuoi interessi sono:"; attendingLabel.text = "Parteciperai all'evento?"; willAttendLabel.text = "Parteciperà = Sì"; // Usa l'autosize in modo che le nostre etichette possano contenere tutto il testo sportsLabel.autoSize = sportsLabel.autoSize = TextFieldAutoSize.LEFT; interestLabel.autoSize = interestLabel.autoSize = TextFieldAutoSize.LEFT; attendingLabel.autoSize = attendingLabel.autoSize = TextFieldAutoSize.LEFT; willAttendLabel.autoSize = willAttendLabel.autoSize = TextFieldAutoSize.LEFT;  funzione privata setupCheckBoxes (): void // imposta il testo sulle etichette toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Nuoto"; hikingCheckBox.label = "Escursionismo"; boxingCheckBox.label = "Boxing"; footballCheckBox.label = "Calcio"; soccerCheckBox.label = "Calcio"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // qui inseriamo le checkbox in una matrice in modo da poterle scorrere // e aggiungere facilmente lo stesso eventListener a ciascuna di esse sportsCheckBox = new Array (swimmingCheckBox, hikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); per (var i: int = 0; i 
 
 Passaggio 6: ascoltatori di eventi
 
Qui codificheremo i nostri ascoltatori di eventi. Aggiungi quanto segue a Main.as
 
 funzione privata toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Controllato";  else e.target.label = "Not Checked";  private function sportsSelected (e: Event): void // cancelliamo la textarea e aggiungiamo le nuove opzioni sotto sportsTA.text = ""; per (var i: int = 0; i 
 
Conclusione
 
L'utilizzo di pulsanti di opzione e caselle di controllo è un ottimo modo per consentire agli utenti di effettuare una selezione.
 
Noterai nel pannello "Parametri componente" dei componenti che puoi controllare e selezionare alcune proprietà:
   
Questa immagine è per il componente checkbox. 
  
Le proprietà sono le seguenti per il componente checkbox:
 
     
  •  abilitato: un valore booleano che indica se il componente può accettare l'input dell'utente.
    •  
  •  etichetta: l'etichetta di testo per il componente.
    •  
  •  labelPlacement: Posizione dell'etichetta in relazione al checkBox.
    •  
  •  selezionato: un valore booleano che indica se una casella di controllo è attivata o disattivata.
    •  
  •  visibile: un valore booleano che indica se l'istanza del componente è visibile.
    •  
 
Le proprietà per il radioButton sono le seguenti:
 
     
  •  abilitato: un valore booleano che indica se il componente può accettare l'input dell'utente.
    •  
  •  nome del gruppo: Il nome del gruppo per un'istanza o un gruppo di pulsanti di opzione.
    •  
  •  etichetta: l'etichetta di testo per il componente.
    •  
  •  labelPlacement: Posizione dell'etichetta in relazione al radioButton ... 
    •  
  •  selezionato: un valore booleano che indica se un radioButton è attivato o disattivato.
    •  
  •  valore: Un valore definito dall'utente associato a un pulsante di opzione ... 
    •  
  •  visibile: un valore booleano che indica se l'istanza del componente è visibile.
    •  
 
Grazie per la lettura e tieni gli occhi aperti per i prossimi tutorial sui componenti!





	
	
			
	   
	







Codice
×