Snabb Introduktion Flash Checkbox och RadioButton Components

I den här snabba tipsen på Flash Professional-komponenterna tar vi en titt på CheckBox och RadioButton Components.

Kort överblick

I förhandsgranskningen ser du en enda kryssruta längst upp. När den här kryssrutan är markerad ändras kryssrutans etikett för att säga "Kontrollerat" eller "Ej kontrollerat".

Med de sex sista kryssrutorna kan du välja vilka sporter du är intresserad av och textområdet nedan kommer att uppdateras för att visa ändringarna. Med radioknapparna till höger kan du bara välja ett alternativ; Etiketten ändras varje gång du gör ett urval och uppdaterar för att säga vilket alternativ du har valt.

Steg 1: Ställa in dokumentet

Öppna ett nytt Flash-dokument och ställ in följande egenskaper:

Dokumentstorlek: 550x400px
Bakgrundsfärg: #FFFFFF

Steg 2: Lägg till komponenter till scenen

Öppna panelen Komponenter (Meny> Fönster> Komponenter eller CTRL + F7).

Dra fyra etiketter, sju kryssrutor, tre radioknappar och ett textområde till scenen.

I fönstret Egenskaper ger den första kryssrutan förekomstnamnet "toggleCheckBox".

Om Egenskaper-panelen inte visas går du till Meny> Fönster> Komponenter eller trycker på CTRL + F3.

Ställ kryssrutan X till 5,00 och dess Y till 21.00.

Notera: Nu följer en ganska repetitiv process tills vi har alla våra komponenter på plats - hänga in där :)

På panelen Egenskaper ger den andra kryssrutan förekomstnamnet "swimmingCheckBox". Ställ kryssrutan X till 5,00 och dess Y till 91,00.

På panelen Egenskaper ger den tredje kryssrutan förekomstnamnet "footBallCheckBox". Ställ kryssrutan X till 116.00 och dess Y till 191.00.

På fältet Egenskaper ger den fjärde kryssrutan förekomstnamnet "hikingCheckBox". Ställ kryssrutan X till 5,00 och dess Y till 127,00.

På fältet Egenskaper ger den femte kryssrutan förekomstnamnet "soccerbox". Ställ kryssrutan X till 116.00 och dess Y till 127.00.

På rutan Egenskaper ger den sjätte kryssrutan förekomstnamnet "boxingCheckBox". Ställ kryssrutan X till 5,00 och dess Y till 161.00.

På panelen Egenskaper ger den sjunde kryssrutan förekomstnamnet "baseballCheckBox". Ställ kryssrutan X till 116.00 och dess Y till 161.00.

På Egenskaper-panelen ge den första etiketten förekomstnamnet "SportsLabel". Ange etiketten X till 5,00 och dess Y till 57,00.

På Egenskaper-panelen ge den andra etiketten förekomstnamnet "InterestLabel". Ange etiketten X till 5,00 och dess Y till 191.00.

På Egenskaper-panelen ge den tredje etiketten förekomstnamnet "Att DeltaLabel". Ange etiketten X till 278.00 och dess Y till 21.00.

På Egenskaper-panelen ge den fjärde etiketten förekomstnamnet "willAttendLabel". Ange etiketten X till 278.00 och dess Y till 143.00.

På panelen Egenskaper ger den första alternativknappen förekomstnamnet "yesRadio". Ställ in radioknappen X till 278.00 och dess Y till 51.00.

På panelen Egenskaper ger den andra alternativknappen förekomstnamnet "noRadio". Ställ in radioknappen X till 367.00 och dess Y till 51.00.

På panelen Egenskaper ger den tredje alternativknappen förekomstnamnet "notSureRadio". Ställ in radioknappen X till 278.00 och dess Y till 88.00.

På fliken Egenskaper ger textområdet förekomstnamnet "sportTA". Ställ in textområdet X till 5,00 och dess Y till 223.00.

Steg 3: Förbereda .as-filen och importera klasserna

Skapa en ny ActionScript-fil och ge den namnet "Main.as".

Vi kommer att förklara våra komponenter i den här Main.as-filen, så vi måste stänga av "auto deklarera sceninstanser". Fördelen med
gör detta är att du får koden hinting för förekomsten.

Gå till Meny> Arkiv> Publicera inställningar. Klicka på Inställningar bredvid "Script [ActionScript 3]"

Avmarkera "automatiskt deklarera sceninstanser".

I Main.as, öppna paketdeklarationen och Importera de klasser vi ska använda genom att lägga till följande kod:

 paket // Importera våra kontroller import fl.controls.Label; importera fl.controls.CheckBox; importera fl.controls.TextArea; importera fl.controls.RadioButton; // Behövs att AutoSize texten i våra etiketter importera flash.text.TextFieldAutoSize; // Behöver sätta våra radioknappar i en grupp import fl.controls.RadioButtonGroup; // Behöver du förlänga filmklippet import flash.display.MovieClip; // Behovet av våra kryssrutor importera flash.events.Event;

Steg 4: Ställ in huvudklassen

Lägg till klassen, förläng filmklipp och sätt in vår Constructor-funktion.

Lägg till följande i Main.as:

 public class Main utökar MovieClip // Komponenterna public var interestLabel: Etikett; allmän var sportLabel: Etikett; public var att deltaLabel: Etikett; offentlig var willAttendLabel: Etikett; public var toggleCheckBox: CheckBox; public var labelCheckBox: CheckBox; allmänheten var swimmingCheckBox: CheckBox; public var hikingCheckBox: Checkbox; public var boxingCheckBox: CheckBox; public var football checkbox: checkbox; public var soccerCheckBox: CheckBox; public var baseballCheckBox: CheckBox; offentliga var sportTA: TextArea; public var yesRadio: RadioButton; public var noRadio: RadioButton; allmänhet var inteSureRadio: RadioButton; // Behöver en matris för sporten Checkboxar privat var sportCheckboxar: Array; allmän funktion Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Steg 5: Funktioner i huvudkonstruktionen

Här definierar vi setupLabels (), setUpCheckBoxes (), och setupRadioButtons () funktioner.

I setupCheckBoxes () funktion vi sätter alla sportkryssrutor i en matris; På det här sättet kan vi gå igenom dem och lägga till en enda händelseloggare till var och en av dem, vilket gör att vi inte behöver skriva manuellt addeventlistener () varje gång.

För setupRadioButtons () vi har använt a Radiobuttongroup. Radion knappar är avsedda för endast en av en grupp som ska väljas åt gången. När vi lägger till en radioknapp i en grupp anger vi vilka radioknappar den hör till.

Lägg till följande i Main.as:

 privat funktion setupLabels (): void // Ställer in texten på etiketten sportsLabel.text = "Vilka sporter intresserar dig?"; interestLabel.text = "Dina intressen är:"; attendingLabel.text = "Kommer du att delta i evenemanget?"; willAttendLabel.text = "Kommer att delta = Ja"; // Använd autosize så att våra etiketter kan hålla hela texten sportsLabel.autoSize = sportsLabel.autoSize = TextFieldAutoSize.LEFT; interestLabel.autoSize = interestLabel.autoSize = TextFieldAutoSize.LEFT; attendingLabel.autoSize = attendingLabel.autoSize = TextFieldAutoSize.LEFT; willAttendLabel.autoSize = willAttendLabel.autoSize = TextFieldAutoSize.LEFT;  privat funktion setupCheckBoxes (): void // anger texten på etiketterna toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Swimming"; hikingCheckBox.label = "Vandring"; boxingCheckBox.label = "Boxing"; footballCheckBox.label = "Fotboll"; soccerCheckBox.label = "Soccer"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // här lägger vi kryssrutorna in i en grupp så att vi kan gå igenom dem // och enkelt lägga till samma eventListener till var och en av dem sportCheckBoxes = new Array (swimmingCheckBox, hikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); för (var i: int = 0; i 
  Steg 6: Händelselysare
 Här kodar vi våra händelselyttare. Lägg till följande på Main.as
  privat funktion växla Byt (e: Event): void if (e.target.selected == true) e.target.label = "Checked";  else e.target.label = "Ej kontrollerad";  privatfunktionssportSelected (e: Event): void // vi rensar textområdet och lägger till de nya alternativen under sportTA.text = ""; för (var i: int = 0; i 
 Slutsats
 Att använda radioknappar och kryssrutor är ett bra sätt att låta dina användare göra ett urval.
 Du kommer att märka i panelen "Komponentparametrar" för komponenterna som du kan kolla och välja vissa egenskaper:
   Den här bilden är för kryssrutan. 
  Egenskaperna är följande för kryssrutan komponent:
   aktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatning.
  märka: textetiketten för komponenten.
  labelPlacement: Placering av etiketten i förhållande till checkboxen.
  vald: ett booleskt värde som indikerar huruvida en kryssruta är växlad i till- eller frånläge.
  synlig: ett booleskt värde som anger om komponentinstansen är synlig.
 
 Egenskaperna för radioButton är följande:
   aktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatning.
  Grupp namn: Gruppnamnet för en radioknappinstans eller grupp.
  märka: textetiketten för komponenten.
  labelPlacement: Placering av etiketten i förhållande till radioknappen ... 
  vald: ett booleskt värde som indikerar huruvida en radioknapp är växlad till eller från.
  värde: Ett användardefinierat värde som är associerat med en radioknapp ... 
  synlig: ett booleskt värde som anger om komponentinstansen är synlig.
 
 Tack för att du läser och håll ögonen öppna för kommande komponenttutorials!



		
			
	   
	




Koda