Snelle inleiding componenten voor Flash CheckBox en RadioButton

In deze snelle tip over de professionele Flash-componenten zullen we de componenten CheckBox en RadioButton bekijken.

Kort overzicht

In de preview ziet u bovenaan een enkel selectievakje. Als dit selectievakje is ingeschakeld, verandert het label van het selectievakje in 'Gecontroleerd' of 'Niet gecontroleerd'.

Met de onderste zes selectievakjes kun je selecteren in welke sport je geïnteresseerd bent en het tekstgedeelte hieronder zal worden bijgewerkt om de wijzigingen te tonen. Met de keuzerondjes aan de rechterkant kunt u slechts één optie selecteren; het label verandert elke keer dat je een selectie maakt en update om te zeggen welke optie je hebt gekozen.

Stap 1: Het document instellen

Open een nieuw Flash-document en stel de volgende eigenschappen in:

Documentgrootte: 550x400 px
Achtergrondkleur: #FFFFFF

Stap 2: voeg componenten toe aan het werkgebied

Open het paneel Componenten (Menu> Venster> Componenten of CTRL + F7).

Sleep vier labels, zeven selectievakjes, drie keuzerondjes en een tekstgebied naar het werkgebied.

Geef in het paneel Properties het eerste selectievakje de instantienaam "toggleCheckBox".

Als het eigenschappenvenster niet wordt weergegeven, gaat u naar Menu> Venster> Componenten of drukt u op CTRL + F3.

Zet het selectievakje X op 5.00 en zijn Y op 21.00.

Notitie: Nu volgt een vrij repetitief proces totdat we al onze componenten hebben ingesteld - hang daar in :)

Geef in het paneel Properties het tweede selectievakje de instantienaam "swimmingCheckBox". Zet het selectievakje X op 5.00 en zijn Y op 91.00.

Geef in het paneel Properties het derde selectievakje de instantienaam 'footBallCheckBox'. Zet het selectievakje X op 116.00 en zijn Y op 191.00.

Geef in het paneel Properties het vierde selectievakje de instantienaam 'hikingCheckBox'. Zet het selectievakje X op 5.00 en zijn Y op 127.00.

Geef in het paneel Properties het vijfde selectievakje de instantienaam "soccerBox". Zet het selectievakje X op 116.00 en zijn Y op 127.00.

Geef in het paneel Properties het zesde selectievakje de instantienaam 'boxCheckBox'. Zet het selectievakje X op 5.00 en zijn Y op 161.00.

Geef in het paneel Properties het zevende selectievakje de instantienaam "baseballCheckBox". Zet het selectievakje X op 116.00 en zijn Y op 161.00.

Geef in het venster Eigenschappen het eerste label de naam "sportsLabel". Zet de X van het label op 5.00 en de Y op 57.00.

Geef in het paneel Properties het tweede label de instantienaam 'interestLabel'. Stel de X van het label in op 5.00 en de Y op 191.00.

Geef in het venster Eigenschappen het derde label de instantienaam "attendingLabel". Stel de X van het label in op 278,00 en de Y op 21,00.

Geef in het venster Eigenschappen het vierde label de instantienaam "willAttendLabel". Stel de X van het label in op 278.00 en de Y op 143.00.

Geef in het paneel Properties de eerste keuzerondje de instantienaam "yesRadio". Stel de radioknop in op X tot 278.00 en zijn Y op 51.00.

Geef in het paneel Properties de tweede keuzerondje de instantienaam "noRadio". Stel de radioknop in op X tot 367.00 en zijn Y op 51.00.

Geef in het paneel Properties de derde keuzerondje de instantienaam "notSureRadio". Stel de radioknop in op X tot 278.00 en zijn Y op 88.00.

Geef in het venster Eigenschappen het tekstgebied de naam "sportsTA". Stel het tekstgedeelte in op X tot 5.00 en zijn Y op 223.00.

Stap 3: Voorbereiden van het .as-bestand en het importeren van de klassen

Maak een nieuw ActionScript-bestand en geef het de naam "Main.as".

We zullen onze componenten in dit Main.as bestand declareren, dus we moeten "auto declare stage instances" uitschakelen. Het voordeel van
Als u dit doet, krijgt u codehints voor het exemplaar.

Ga naar Menu> Bestand> Publicatie-instellingen. Klik op Instellingen naast "Script [Actionscript 3]"

Verwijder het vinkje bij "automatisch declareren van stage-instanties".

Open in Main.as de pakketverklaring en importeer de klassen die we gaan gebruiken door de volgende code toe te voegen:

 pakket // Importeer onze controls import fl.controls.Label; import fl.controls.CheckBox; import fl.controls.TextArea; import fl.controls.RadioButton; // Nodig om de tekst in onze labels AutoSize te importeren flash.text.TextFieldAutoSize; // Noodzaak om onze radio-knoppen in een groep te importeren fl.controls.RadioButtonGroup; // Noodzaak om Movie Clip-import te verlengen flash.display.MovieClip; // Noodzaak voor onze selectievakjes import flash.events.Event;

Stap 4: Stel de hoofdklasse in

Voeg de klasse toe, breid filmclip uit en stel onze constructorfunctie in.

Voeg het volgende toe aan Main.as:

 public class Main breidt MovieClip uit // De componenten 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 swimmingCheckCheckBox: CheckBox; public var hikingCheckCheckBox: CheckBox; public var boxingCheckBox: CheckBox; public var footballCheckBox: CheckBox; openbare var soccerCheckBox: CheckBox; public var baseballCheckBox: CheckBox; public var sportsTA: TextArea; public var yesRadio: RadioButton; public var noRadio: RadioButton; public var notSureRadio: RadioButton; // Een array nodig voor de sport CheckBoxes private var sportsCheckBoxes: Array; public function Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Stap 5: Functies in de hoofdconstructeur

Hier definiëren we de setupLabels (), setUpCheckBoxes (), en setupRadioButtons () functies.

In de setupCheckBoxes () functie zetten we alle sportvinkjes in een array; op deze manier kunnen we er doorheen lopen en een enkele gebeurtenislistener aan elk ervan toevoegen, waardoor we niet handmatig hoeven te typen addEventListener () elke keer.

Voor de setupRadioButtons () we hebben een RadioButtonGroup. Keuzerondjes zijn bedoeld om slechts één van een groep tegelijkertijd te selecteren. Wanneer we een keuzerondje toevoegen aan een groep, geven we aan met welke radioknoppen het deel uitmaakt.

Voeg het volgende toe aan Main.as:

 private function setupLabels (): void // Plaatst de tekst op het label sportsLabel.text = "Welke sporten interesseren u?"; interestLabel.text = "Uw interesses zijn:"; attendingLabel.text = "Gaat u naar het evenement?"; willAttendLabel.text = "Zal aanwezig zijn = Ja"; // Gebruik autosize zodat onze labels alle tekst kunnen bevatten 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 functie setupCheckBoxes (): void // zet de tekst op de labels toggleCheckBox.label = "Gecontroleerd"; swimmingCheckBox.label = "Zwemmen"; hikingCheckBox.label = "Wandelen"; boxingCheckBox.label = "Boksen"; footballCheckBox.label = "Voetbal"; soccerCheckBox.label = "Voetbal"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // hier plaatsen we de selectievakjes in een array zodat we ze kunnen doorlopen // en eenvoudig dezelfde eventListener aan elk van hen toevoegen sportsCheckBoxes = new Array (swimmingCheckBox, hikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); for (var i: int = 0; i 
  Stap 6: Event Luisteraars
 Hier zullen we onze Event Luisteraars coderen. Voeg het volgende toe aan Main.as
  persoonlijke functie toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Gecontroleerd";  else e.target.label = "Niet gecontroleerd";  private function sportsSelected (e: Event): void // we wissen het textarea en voegen de nieuwe opties toe onder sportsTA.text = ""; for (var i: int = 0; i 
 Conclusie
 Het gebruik van keuzerondjes en selectievakjes is een geweldige manier om uw gebruikers een selectie te laten maken.
 U zult het opmerken in het paneel "Componentenparameters" van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren:
   Deze afbeelding is voor het selectievakje component. 
  De eigenschappen zijn als volgt voor het selectievakje component:
   ingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepteren.
  label: het tekstlabel voor het onderdeel.
  labelPlacement: Positie van het label ten opzichte van het checkBox.
  gekozen: een Booleaanse waarde die aangeeft of een selectievakje in de aan- of uit-positie is geschakeld.
  zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar is.
 
 De eigenschappen voor de radioButton zijn als volgt:
   ingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepteren.
  groepsnaam: De groepsnaam voor een exemplaar van een keuzeknop of een groep.
  label: het tekstlabel voor het onderdeel.
  labelPlacement: Positie van het label in relatie tot de radioButton ... 
  gekozen: een Booleaanse waarde die aangeeft of een radioButton in de aan- of uit-positie is geschakeld.
  waarde: Een door de gebruiker gedefinieerde waarde die is gekoppeld aan een keuzerondje ... 
  zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar is.
 
 Bedankt voor het lezen en houd je ogen open voor de volgende tutorials over onderdelen!



		
			
	   
	




Code