Hurtig introduksjon Flash CheckBox og RadioButton-komponenter

I denne Quick Tip på Flash Professional Components vil vi se på CheckBox og RadioButton Components.

Kort overblikk

I forhåndsvisningen ser du en enkelt boks øverst. Når denne avkrysningsruten er valgt, vil avmerkingsboksens etikett endres for å si "Sjekket" eller "Ikke sjekket".

Med de nederste seks avmerkingsboksene kan du velge hvilke sport du er interessert i, og tekstområdet nedenfor vil oppdatere for å vise endringene. Med radioknappene til høyre kan du bare velge ett alternativ; Etiketten endres hver gang du foretar et valg og oppdatering for å si hvilket alternativ du har valgt.

Trinn 1: Sette opp dokumentet

Åpne et nytt Flash-dokument og angi følgende egenskaper:

Dokumentstørrelse: 550x400px
Bakgrunnsfarge: #FFFFFF

Trinn 2: Legg komponenter til scenen

Åpne komponentpanelet (Meny> Vindu> Komponenter eller CTRL + F7).

Dra fire etiketter, syv boksene, tre radioknapper og ett tekstområde til scenen.

I Egenskaper-panelet gir den første avkrysningsboksen forekomstnavnet "toggleCheckBox".

Hvis Egenskaper-panelet ikke vises, gå til Meny> Vindu> Komponenter eller trykk CTRL + F3.

Sett avkrysningsruten X til 5,00 og dens Y til 21,00.

Merk: Nå følger en ganske repeterende prosess til vi har alle våre komponenter satt opp - henger der :)

I Egenskapspanelet gir den andre boksen forekomstnavnet "SwimmingCheckBox". Sett avkrysningsruten X til 5,00 og dens Y til 91,00.

I Egenskaper-panelet gir den tredje boksen forekomstnavnet "footBallCheckBox". Sett avkrysningsruten X til 116.00 og dens Y til 191.00.

I Egenskaper-panelet gir den fjerde boksen forekomstnavnet "hikingCheckBox". Sett avkrysningsruten X til 5,00 og dens Y til 127,00.

I feltet Egenskaper gir den femte boksen forekomstnavnet "fotballboks". Sett avkrysningsruten X til 116.00 og dens Y til 127.00.

I Egenskaper-panelet gir den sjette boksen forekomstnavnet "boxingCheckBox". Sett avkrysningsruten X til 5,00 og dens Y til 161,00.

I Egenskaper-panelet gir den syvende boksen forekomstnavnet "BaseballCheckBox". Sett avkrysningsruten X til 116.00 og dens Y til 161.00.

I Egenskaper-panelet gir den første etiketten forekomstnavnet "SportsLabel". Sett etikettets X til 5,00 og dets Y til 57,00.

I Egenskaper-panelet gir den andre etiketten forekomstnavnet "InterestLabel". Sett etiketten er X til 5,00 og dens Y til 191.00.

I Egenskaper-panelet gir den tredje etiketten forekomstnavnet "AttendingLabel". Sett etikettets X til 278.00 og dets Y til 21.00.

I Egenskaper-panelet gir den fjerde etiketten forekomstnavnet "willAttendLabel". Sett etikettets X til 278,00 og dets Y til 143,00.

I Egenskaper-panelet gir den første alternativknappen forekomstnavnet "yesRadio". Still inn radioknappen X til 278.00 og dens Y til 51.00.

I Egenskaper-panelet gir den andre radioknappen forekomstnavnet "NoRadio". Still inn radioknappen X til 367.00 og dens Y til 51.00.

I Egenskaper-panelet gir den tredje radioknappen forekomstnavnet "notSureRadio". Still inn radioknappen X til 278.00 og dens Y til 88.00.

I Egenskapspanelet gir tekstområdet forekomstnavnet "sportTA". Sett tekstområdet X til 5.00 og dets Y til 223.00.

Trinn 3: Forbereder .as-filen og importerer klassene

Opprett en ny ActionScript-fil og gi den navnet "Main.as".

Vi vil erklære komponentene våre i denne Main.as-filen, så vi må slå av "auto deklarere scenevaner". Fordelen med
gjør dette er at du får kode hinting for forekomsten.

Gå til Meny> Fil> Publiser innstillinger. Klikk på Innstillinger ved siden av "Script [ActionScript 3]"

Fjern merket for "automatisk deklarere scenevaner".

I Main.as, åpne pakkeerklæringen og Importer klassene vi skal bruke ved å legge til følgende kode:

 pakke // Importer våre kontroller import fl.controls.Label; importere fl.controls.CheckBox; importere fl.controls.TextArea; importere fl.controls.RadioButton; // Trenger du å AutoSize teksten i våre etiketter importere flash.text.TextFieldAutoSize; // Trenger du å sette våre radio knapper inn i en gruppe import fl.controls.RadioButtonGroup; // Trenger du å utvide filmklipp importere flash.display.MovieClip; // Behov for våre bokser importere flash.events.Event;

Trinn 4: Konfigurer hovedklassen

Legg til klassen, utvide filmklippet og sett opp vår Constructor-funksjon.

Legg til følgende til Main.as:

 offentlig klasse Main utvider MovieClip // Komponenter offentlige var interesseLabel: Etikett; offentlig var sportLabel: Etikett; Offentlig var deltakelseLabel: Etikett; offentlig var willAttendLabel: Etikett; offentlig var toggleCheckBox: CheckBox; offentlig var labelCheckBox: CheckBox; offentlig var svømmingCheckBox: CheckBox; offentlig var hikingCheckBox: CheckBox; offentlig var boksingCheckBox: CheckBox; offentlig var fotballCheckBox: CheckBox; offentlig var soccerCheckBox: CheckBox; offentlig var baseballCheckBox: CheckBox; offentlig var sportTA: TextArea; offentlig var yesRadio: RadioButton; offentlig var noRadio: RadioButton; offentlig var ikkeSureRadio: RadioButton; // Trenger du en matrise for sporten Checkboxer private var sportsCheckBoxer: Array; offentlig funksjon Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Trinn 5: Funksjoner i hovedkonstruksjonen

Her definerer vi setupLabels (), setUpCheckBoxes (), og setupRadioButtons () funksjoner.

I setupCheckBoxes () funksjon vi setter alle sportsboksene i en matrise; På denne måten kan vi løse gjennom dem og legge til en enkelt hendelse lytter til hver enkelt av dem, og sparer oss fra å måtte skrive manuelt addEventListener () hver gang.

For setupRadioButtons () vi har brukt a radioButtonGroup. Radio knapper er ment for bare en av en gruppe som skal velges om gangen. Når vi legger til en radioknapp i en gruppe, angir vi hvilke radioknapper den tilhører.

Legg til følgende på Main.as:

 privat funksjon setupLabels (): void // Setter teksten på etiketten sportsLabel.text = "Hvilke sport interesserer deg?"; interestLabel.text = "Dine interesser er:"; attendingLabel.text = "Kommer du til å delta i arrangementet?"; willAttendLabel.text = "Kommer til stede = Ja"; // Bruk autosize slik at våre etiketter kan holde hele teksten sportsLabel.autoSize = sportsLabel.autoSize = TextFieldAutoSize.LEFT; interestLabel.autoSize = interestLabel.autoSize = TextFieldAutoSize.LEFT; attendingLabel.autoSize = attendingLabel.autoSize = TextFieldAutoSize.LEFT; willAttendLabel.autoSize = willAttendLabel.autoSize = TextFieldAutoSize.LEFT;  private funksjon setupCheckBoxes (): void // setter teksten på etikettene toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Svømming"; hikingCheckBox.label = "Vandring"; boxingCheckBox.label = "Boxing"; footballCheckBox.label = "Fotball"; soccerCheckBox.label = "Soccer"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // her setter vi kryssboksene i en matrise slik at vi kan gå gjennom dem // og enkelt legge til samme eventListener til hver av dem sportsCheckBoxes = new Array (swimmingCheckBox, hikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); for (var jeg: int = 0; i 
  Trinn 6: Event Lyttere
 Her kodes vi for våre Event Lyttere. Legg til følgende til Main.as
  privat funksjon toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Checked";  else e.target.label = "Ikke sjekket";  privat funksjonssportSelected (e: Event): void // vi fjerner tekstområdet og legger til de nye alternativene under sportTA.text = ""; for (var jeg: int = 0; i 
 Konklusjon
 Bruk av radioknapper og avmerkingsboks er en fin måte å la brukerne velge.
 Du vil legge merke til i "Komponentparametere" -panelet på komponentene som du kan sjekke og velge bestemte egenskaper:
   Dette bildet er for boksekomponenten. 
  Egenskapene er som følger for boksekomponenten:
   aktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngang.
  merkelapp: tekstetiketten for komponenten.
  labelPlacement: Plassering av etiketten i forhold til checkboxen.
  valgt: en boolsk verdi som indikerer om en avkrysningsboks er slått på på eller av.
  synlig: en boolsk verdi som indikerer om komponenteksemplet er synlig.
 
 Egenskapene til radioButton er som følger:
   aktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngang.
  gruppenavn: Gruppens navn for en radioknapp-forekomst eller gruppe.
  merkelapp: tekstetiketten for komponenten.
  labelPlacement: Plassering av etiketten i forhold til radioknappen ... 
  valgt: en boolsk verdi som indikerer om en radio-knapp er slått på i eller av.
  verdi: En brukerdefinert verdi som er knyttet til en radioknapp ... 
  synlig: en boolsk verdi som indikerer om komponenteksemplet er synlig.
 
 Takk for at du leser og hold øynene dine åpne for kommende komponentopplæringer!



		
			
	   
	




Kode