Quick Innledning: Flash boksen og radiobutton Components
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips på Flash Professional Components, vi vil være å ta en titt på boksen og radioknappen Components.
Kort oversikt
I forhåndsvisnings du se en enkelt avkrysnings på toppen. Når dette alternativet er valgt av i boksen etikett vil endre seg til å si "Sjekket" eller "Not Sjekket".
Med de nederste seks boksene du kan velge hva idrett du er interessert i og tekstområdet nedenfor vil oppdatere til showet endringene. Med radioknappene på høyre du bare er i stand til å velge ett alternativ; etiketten vil endres hver gang du gjør et valg og oppdatering for å si hvilket alternativ du har valgt
Trinn 1:. Sette opp Document
Åpne en ny Flash dokument og sett følgende egenskaper:
Dokumentstørrelse: 550x400px
Bakgrunnsfarge: #FFFFFF
Trinn 2: Legg Komponenter til Stage
Åpne Components panelet (Meny > Vindu > komponenter eller CTRL + F7)..
Drag fire etiketter, sju boksene, tre radioknapper og et tekstområde på scenen
I panelet Egenskaper gi den første avkrysningsforekomstnavnet "toggleCheckBox"
Hvis Properties panelet ikke vises gå til Meny >.; Vindu > Komponenter eller trykk CTRL + F3
merk boksen sin X til 5,00 og dens Y til 21,00
Merk: Nå følger en ganske repeterende prosess før vi har alle våre komponenter satt opp - henge i.. der :)
I panelet Egenskaper gi andre avkrysningsforekomstnavnet "swimmingCheckBox". Merk boksen sin X til 5,00 og dens Y til 91.00.
I panelet Egenskaper gi den tredje avkrysningsforekomstnavnet "footBallCheckBox". Merk boksen sin X til 116,00 og dens Y til 191,00.
I panelet Egenskaper gi den fjerde avkrysningsforekomstnavnet "hikingCheckBox". Merk boksen sin X til 5,00 og dens Y til 127,00.
I Egenskaper-panelet gir den femte avkrysningsforekomstnavnet "soccerBox". Merk boksen sin X til 116,00 og dens Y til 127,00.
I panelet Egenskaper gi den sjette avkrysningsforekomstnavnet "boxingCheckBox". Merk boksen sin X til 5,00 og dens Y til 161,00.
I Egenskaper-panelet gir den syvende avkrysningsforekomstnavnet "baseballCheckBox". Merk boksen sin X til 116,00 og dens Y til 161,00.
I Egenskaper-panelet gir den første etiketten forekomstnavnet "sportsLabel". Sett etikettens X til 5,00 og dens Y til 57.00.
I panelet Egenskaper gi andre etiketten forekomstnavnet "interestLabel". Sett etikettens X til 5,00 og dens Y til 191,00.
I panelet Egenskaper gi den tredje etiketten forekomstnavnet "attendingLabel". Sett etikettens X til 278,00 og dens Y til 21.00.
I panelet Egenskaper gi den fjerde etiketten forekomstnavnet "willAttendLabel". Sett etikettens X til 278,00 og dens Y til 143,00.
I Egenskaper-panelet gir den første radioknappen forekomstnavnet "YesRadio". Sett radio knappens X til 278,00 og dens Y til 51.00.
I Egenskaper-panelet gir det andre alternativet for forekomstnavnet "NoRadio". Sett radio knappens X til 367,00 og dens Y til 51.00.
I panelet Egenskaper gi den tredje alternativknappen forekomstnavnet "notSureRadio". Sett radio knappens X til 278,00 og dens Y til 88,00.
I panelet Egenskaper gi tekstområdet forekomstnavnet "sportsTA". Angi tekst områdets X til 5,00 og dens Y til 223,00
Trinn 3:. Klar .as Fil og Importere klassene
Opprett en ny Actionscript-fil og gi den navnet "Main.as".
Vi vil erklære våre komponenter i denne Main.as fil så vi må slå av "auto erklære scene forekomster". Fordelen med
gjøre dette er at du får kode antydet for eksempel
Gå til Meny >.; Fil > Publish Settings. Klikk på Innstillinger ved siden av "Script [Actionscript 3]"
Fjern haken ved «automatisk erklære scene forekomster".
I Main.as, åpne pakken erklæringen og Import klassene vi skal bruke av legge til følgende kode:
pakken {//importerer våre kontroller importere fl.controls.Label; import fl.controls.CheckBox; import fl.controls.TextArea; import fl.controls.RadioButton; //Nødvendig å AutoSize Tekst i våre Etiketter importere flash.text.TextFieldAutoSize; //Trenger du å sette våre radioknapper i en gruppe import fl.controls.RadioButtonGroup; //Trenger du å utvide Movie Clip import flash.display.MovieClip; //Trenger for våre boksene importere flash.events.Event;
Trinn 4:. Sett opp hoved Class
Legg klasse, utvide filmklipp og sette opp vår Constructor Funksjon Anmeldelser
Legg til følgende Main.as:
public class Hoved strekker MovieClip {//Komponentene offentlig Var interestLabel: Etikett; offentlig Var sportsLabel: Etikett; offentlig Var attendingLabel: Etikett; offentlig Var willAttendLabel: Etikett; offentlig Var toggleCheckBox: avmerkingsbokser; offentlig Var labelCheckBox: avmerkingsbokser; offentlig Var swimmingCheckBox: avmerkingsbokser; offentlig Var hikingCheckBox: avmerkingsbokser; offentlig Var boxingCheckBox: avmerkingsbokser; offentlig Var footballCheckBox: avmerkingsbokser; offentlig Var soccerCheckBox: avmerkingsbokser; offentlig Var baseballCheckBox: avmerkingsbokser; offentlig Var sportsTA: Tekstfelt; offentlig Var YesRadio: radiobutton; offentlig Var NoRadio: radiobutton; offentlig Var notSureRadio: radiobutton; //Trenger du en array for sports avmerkingsboksene private Var sportsCheckBoxes: Array; offentlig funksjon main () {setupLabels (); setupCheckBoxes (); setupRadioButtons (); }
Trinn 5:. Funksjoner i hoved Constructor
Her kan vi definere setupLabels (), setUpCheckBoxes (), og setupRadioButtons () funksjoner
I de setupCheckBoxes () funksjon vi setter alle idrettsboksene i en matrise; på denne måten vi kan sløyfe gjennom dem og legge til en enkelt hendelse lytteren til hver og en av dem, sparer oss fra å måtte manuelt skrive addEventListener () hver gang.
For de setupRadioButtons () vi har brukt en radioButtonGroup. Radio knapper er beregnet for bare en av en gruppe som skal velges på en gang. . Når vi legger en alternativknapp til en gruppe vi skal oppgi hvilken radio knapper det hører med
Legg følgende til Main.as:
private funksjons setupLabels (): void {//Setter tekst på etiketten sportsLabel.text = "Hva idrett interesserer deg?"; interestLabel.text = "dine interesser er:"; attendingLabel.text = "Vil du være til stede på arrangementet?"; willAttendLabel.text = "vil være til stede = Ja"; //Bruk autosize slik at våre etiketter kan holde all tekst 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 funksjons setupCheckBoxes (): void {//setter teksten på etikettene toggleCheckBox.label = "Sjekket"; 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 vi satt av i rutene i en liste, slik at vi kan sløyfe gjennom dem //og enkelt legge til samme eventListener til hver av dem sportsCheckBoxes = new Array(swimmingCheckBox,hikingCheckBox,boxingCheckBox,footballCheckBox,soccerCheckBox,baseballCheckBox); for (var i: int = 0; i & lt; sportsCheckBoxes.length; i ++) {sportsCheckBoxes [i] .addEventListener (Event.CHANGE, sportsSelected); }} private funksjons setupRadioButtons (): void {yesRadio.label = "Ja"; noRadio.label = "Nei"; notSureRadio.label = "Usikker"; yesRadio.selected = true; //Radio Knapper er ment kun har én valgt om gangen //ved å sette dem inn i en gruppe vi si som hører med hverandre Var stede: RadioButtonGroup = new RadioButtonGroup ("deltar"); //her vi tildele radioknappene til gruppen yesRadio.group = stede; noRadio.group = deltar; notSureRadio.group = deltar; yesRadio.addEventListener (Event.CHANGE, willBeAttending); noRadio.addEventListener (Event.CHANGE, willBeAttending); notSureRadio.addEventListener (Event.CHANGE, willBeAttending);}
Trinn 6: Hendelse Lyttere
Her vil vi kode vårt arrangement Lyttere. Legg til følgende Main.as
privat funksjon toggleChange (e: Hendelses): void {if (e.target.selected == true) {e.target.label = "Sjekket"; } Else {e.target.label = "Ikke Sjekket"; }} Privat funksjon sportsSelected (e: Hendelses): void {//vi fjerne textarea og legge de nye alternativene nedenfor sportsTA.text = ""; for (var i: int = 0; i & lt; sportsCheckBoxes.length; i ++) {//hvis strømmen er merket vi legge det til textarea if (sportsCheckBoxes [i] .selected == true) {sportsTA.text + = sportsCheckBoxes [i] .label + "\\ n"; }}} Privat funksjon willBeAttending (e: Hendelses): void {//vi bruker for øyeblikket er valgt radioer knappen etiketten settet vil være til stede //til "Ja", "Nei", eller "Usikker" willAttendLabel.text = " vil være til stede = "+ e.target.label; }} //Lukke ut klassen} //lukke pakken
Konklusjon
Ved hjelp av radioknapper og avkrysningsbokser er en fin måte å tillate brukerne å foreta et valg.
< p> Du vil merke i "Component Parametere" panel av komponentene som du kan sjekke og velger visse egenskaper:
Dette bildet er for avkrysnings komponent
Eiendommene er som følger. for avmerkingsboksen komponent:
aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
label:.. teksten etiketten for komponenten
labelPlacement. Plassering av etiketten i forhold til avmerkingsboksen
valgt: en boolsk verdi som angir om en avkrysnings veksles i på eller av stilling
synlig. en boolsk verdi som angir om komponenten eksempel er synlig
Egenskapene for radioknappen er som følger:.
aktivert. en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
groupname:. Gruppenavnet for en alternativknapp forekomst eller gruppe
etikett. teksten etiketten for komponenten
labelPlacement: Plassering av etiketten i forhold til radiobutton ..
valgt. en boolsk verdi som angir om en radiobutton veksles i på eller av stilling
verdi: Et brukerdefinert verdi som er knyttet til en radio knapp ..
synlig: en boolsk verdi som angir om komponentforekomst er synlig
Takk for lesing og holde øynene åpne for kommende komponent tutorials
.!