Kurzanleitung Flash CheckBox und RadioButton-Komponenten

In diesem Quick Tip zu den Flash Professional-Komponenten werden die CheckBox- und RadioButton-Komponenten untersucht.

Kurzübersicht

In der Vorschau sehen Sie oben ein einzelnes Kontrollkästchen. Wenn dieses Kontrollkästchen aktiviert ist, ändert sich die Beschriftung des Kontrollkästchens in "Aktiviert" oder "Nicht aktiviert"..

Mit den sechs unteren Kontrollkästchen können Sie auswählen, an welchen Sportarten Sie interessiert sind. Der Textbereich unten wird aktualisiert, um die Änderungen anzuzeigen. Mit den Optionsfeldern rechts können Sie nur eine Option auswählen. Das Label ändert sich jedes Mal, wenn Sie eine Auswahl treffen und aktualisieren, um anzugeben, welche Option Sie gewählt haben.

Schritt 1: Einrichten des Dokuments

Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest:

Dokumentgröße: 550x400px
Hintergrundfarbe: #FFFFFF

Schritt 2: Fügen Sie der Bühne Komponenten hinzu

Öffnen Sie das Bedienfeld Komponenten (Menü> Fenster> Komponenten oder STRG + F7)..

Ziehen Sie vier Beschriftungen, sieben Kontrollkästchen, drei Optionsfelder und einen Textbereich auf die Bühne.

Geben Sie im Eigenschaftenfenster dem ersten Ankreuzfeld den Instanznamen "toggleCheckBox" an..

Wenn das Eigenschaftenfenster nicht angezeigt wird, wählen Sie Menü> Fenster> Komponenten oder drücken Sie STRG + F3.

Setzen Sie das Kontrollkästchen X auf 5,00 und Y auf 21,00.

Hinweis: Nun folgt ein ziemlich wiederholter Prozess, bis wir alle unsere Komponenten eingerichtet haben - hängen Sie rein :)

Geben Sie im Eigenschaftenfenster der zweiten Checkbox den Instanznamen "swimmingCheckBox" an. Setzen Sie das Kontrollkästchen X auf 5,00 und Y auf 91,00.

Geben Sie im Eigenschaftenfenster der dritten Checkbox den Instanznamen "footBallCheckBox" an. Setzen Sie X des Kontrollkästchens auf 116.00 und Y auf 191.00.

Geben Sie im Eigenschaftsfenster der vierten Checkbox den Instanznamen "HikingCheckBox" an. Setzen Sie das Kontrollkästchen X auf 5,00 und Y auf 127,00.

Geben Sie im Eigenschaftenfenster der fünften Checkbox den Instanznamen "soccerBox" an. Setzen Sie das Kontrollkästchen X auf 116.00 und Y auf 127.00.

Geben Sie im Eigenschaftenfenster der sechsten Checkbox den Instanznamen "boxingCheckBox" an. Setzen Sie das Kontrollkästchen X auf 5,00 und Y auf 161,00.

Geben Sie im Eigenschaftenfenster dem siebten Kontrollkästchen den Instanznamen "baseballCheckBox" an. Setzen Sie das Kontrollkästchen X auf 116.00 und Y auf 161.00.

Geben Sie im Eigenschaftenfenster der ersten Beschriftung den Instanznamen "sportsLabel" an. Setzen Sie das X des Labels auf 5,00 und das Y auf 57,00.

Geben Sie im Eigenschaftenfenster dem zweiten Label den Instanznamen "interestLabel" an. Setzen Sie X des Labels auf 5,00 und Y auf 191.00.

Geben Sie im Eigenschaftenfenster der dritten Beschriftung den Instanznamen "attendingLabel" an. Setzen Sie das X des Labels auf 278.00 und das Y auf 21.00.

Geben Sie im Eigenschaftenfenster der vierten Beschriftung den Instanznamen "willAttendLabel" an. Setzen Sie das X des Labels auf 278.00 und das Y auf 143.00.

Geben Sie im Eigenschaftenfenster dem ersten Optionsfeld den Instanznamen "yesRadio" an. Stellen Sie das X des Radio-Buttons auf 278.00 und Y auf 51.00.

Geben Sie im Eigenschaftenfenster dem zweiten Optionsfeld den Instanznamen "noRadio" an. Setzen Sie das X-Optionsfeld auf 367.00 und Y auf 51.00.

Geben Sie im Eigenschaftenfenster dem dritten Optionsfeld den Instanznamen "notSureRadio" an. Stellen Sie das X des Radio-Buttons auf 278.00 und Y auf 88.00.

Geben Sie im Eigenschaftenbereich dem Textbereich den Instanznamen "sportsTA" an. Setzen Sie X des Textbereichs auf 5,00 und Y auf 223.00.

Schritt 3: Vorbereiten der .as-Datei und Importieren der Klassen

Erstellen Sie eine neue ActionScript-Datei und nennen Sie sie "Main.as"..

Wir werden unsere Komponenten in dieser Datei "Main.as" deklarieren. Daher müssen wir die Option "Instanzen der automatischen Deklaration" deaktivieren. Der Vorteil von
Dabei erhalten Sie Code-Hinweise für die Instanz.

Gehen Sie zu Menü> Datei> Veröffentlichungseinstellungen. Klicken Sie neben "Skript [Actionscript 3]" auf "Einstellungen".

Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..

Öffnen Sie in Main.as die Paketdeklaration und importieren Sie die zu verwendenden Klassen, indem Sie den folgenden Code hinzufügen:

 package // Importiere unsere Steuerelemente import fl.controls.Label; import fl.controls.CheckBox; import fl.controls.TextArea; import fl.controls.RadioButton; // Erforderlich für die automatische Größenanpassung des Texts in unseren Labels import flash.text.TextFieldAutoSize; // Sie müssen unsere Radioknöpfe in eine Gruppe einfügen. Import fl.controls.RadioButtonGroup; // Movie Clip verlängern müssen import import flash.display.MovieClip; // Bedarf an unseren Checkboxen import flash.events.Event;

Schritt 4: Richten Sie die Hauptklasse ein

Fügen Sie die Klasse hinzu, erweitern Sie den Movieclip und richten Sie unsere Konstruktionsfunktion ein.

Fügen Sie Folgendes zu Main.as hinzu:

 public class Main erweitert MovieClip // Die Komponenten public var interestLabel: Label; public var sportsLabel: Label; public var attendendingLabel: 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; // Benötige ein Array für die Sportarten CheckBoxes private var sportsCheckBoxes: Array; öffentliche Funktion Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Schritt 5: Funktionen im Hauptkonstruktor

Hier definieren wir die setupLabels (), setUpCheckBoxes (), und setupRadioButtons () Funktionen.

In dem setupCheckBoxes () Funktion: Wir setzen alle Kontrollkästchen für Sport in ein Array. Auf diese Weise können wir sie durchlaufen und jedem von ihnen einen einzigen Ereignis-Listener hinzufügen, sodass wir nicht manuell eingeben müssen addEventListener () jedes Mal.

Für die setupRadioButtons () wir haben ein verwendet radioButtonGroup. Optionsfelder sind nur für jeweils eine Gruppe von Gruppen vorgesehen. Wenn wir einer Gruppe ein Optionsfeld hinzufügen, geben wir an, zu welchen Optionsfeldern sie gehört.

Fügen Sie der Main.as Folgendes hinzu:

 private function setupLabels (): void // Setzt den Text auf dem Etikett sportsLabel.text = "Welche Sportarten interessieren Sie?"; interestLabel.text = "Ihre Interessen sind:"; attendingLabel.text = "Werden Sie an der Veranstaltung teilnehmen?"; willAttendLabel.text = "Wird teilnehmen = Ja"; // Verwenden Sie autosize, damit unsere Labels den gesamten Text aufnehmen können 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 Funktion setupCheckBoxes (): void // setzt den Text auf den Etiketten toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Schwimmen"; hikingCheckBox.label = "Wandern"; boxingCheckBox.label = "Boxen"; footballCheckBox.label = "Fußball"; soccerCheckBox.label = "Fußball"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // Hier werden die Checkboxen in ein Array eingefügt, sodass wir sie durchlaufen können // und einfach den gleichen eventListener zu jedem hinzufügen können. für (var i: int = 0; i 
  Schritt 6: Ereignis-Listener
 Hier werden wir unsere Event Listener programmieren. Fügen Sie Folgendes zu Main.as hinzu
  private Funktion toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Checked";  else e.target.label = "Nicht geprüft";  private Funktion sportsSelected (e: Event): void // Wir löschen den Textbereich und fügen die neuen Optionen unterhalb von sportsTA.text = ""; für (var i: int = 0; i 
 Fazit
 Die Verwendung von Optionsfeldern und Kontrollkästchen ist eine großartige Möglichkeit, Ihren Benutzern eine Auswahl zu ermöglichen.
 Sie werden im Bereich "Komponentenparameter" der Komponenten feststellen, dass Sie bestimmte Eigenschaften überprüfen und auswählen können:
   Dieses Bild ist für die Checkbox-Komponente. 
  Die Eigenschaften für die Checkbox-Komponente lauten wie folgt:
   aktiviert: ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann.
  Etikette: die Textbezeichnung für die Komponente.
  labelPlacement: Position der Beschriftung in Bezug auf die CheckBox.
  ausgewählt: Ein boolescher Wert, der angibt, ob ein Kontrollkästchen in die Position Ein oder Aus gestellt wird.
  sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist.
 
 Die Eigenschaften für den RadioButton lauten wie folgt:
   aktiviert: ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann.
  Gruppenname: Der Gruppenname für eine Optionsfeldinstanz oder -gruppe.
  Etikette: die Textbezeichnung für die Komponente.
  labelPlacement: Position des Labels in Bezug auf die RadioButton… 
  ausgewählt: Ein boolescher Wert, der angibt, ob ein RadioButton ein- oder ausgeschaltet ist.
  Wert: Ein benutzerdefinierter Wert, der einem Optionsfeld zugeordnet ist… 
  sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist.
 
 Vielen Dank für das Lesen und halten Sie die Augen für zukünftige Komponenten-Tutorials offen!



		
			
	   
	




Code