Introduction rapide Composants Flash CheckBox et RadioButton

Dans cette astuce sur les composants Flash Professional, nous allons examiner les composants CheckBox et RadioButton..

Bref aperçu

Dans l'aperçu, vous voyez une case à cocher en haut. Lorsque cette case est cochée, l'étiquette de la case à cocher changera pour indiquer "cochée" ou "non cochée".

Avec les six cases à cocher en bas, vous pouvez sélectionner les sports qui vous intéressent et la zone de texte ci-dessous se mettra à jour pour afficher les modifications. Avec les boutons radio à droite, vous ne pouvez sélectionner qu’une option; l'étiquette changera chaque fois que vous effectuez une sélection et une mise à jour pour indiquer quelle option vous avez choisie.

Étape 1: Configuration du document

Ouvrez un nouveau document Flash et définissez les propriétés suivantes:

Taille du document: 550x400px
Couleur de fond: #FFFFFF

Étape 2: Ajouter des composants sur la scène

Ouvrez le panneau Composants (Menu> Fenêtre> Composants ou CTRL + F7)..

Faites glisser quatre étiquettes, sept cases à cocher, trois boutons radio et une zone de texte sur la scène.

Dans le panneau Propriétés, donnez à la première case le nom de l'instance "toggleCheckBox".

Si le panneau Propriétés ne s'affiche pas, allez à Menu> Fenêtre> Composants ou appuyez sur CTRL + F3..

Définissez le X de la case à cocher sur 5,00 et son Y sur 21,00.

Remarque: Suit maintenant un processus assez répétitif jusqu'à ce que tous nos composants soient configurés.

Dans le panneau Propriétés, attribuez à la deuxième case le nom de l'instance "swimmingCheckBox". Définissez le X de la case à cocher sur 5,00 et son Y sur 91,00.

Dans le panneau Propriétés, attribuez à la troisième case le nom d'instance "footBallCheckBox". Définissez le X de la case à cocher sur 116,00 et son Y sur 191,00.

Dans le panneau Propriétés, attribuez à la quatrième case le nom d’instance "HikingCheckBox". Définissez le X de la case à cocher sur 5,00 et son Y sur 127,00.

Dans le panneau Propriétés, attribuez à la cinquième case le nom d'instance "soccerBox". Définissez le X de la case à cocher sur 116,00 et son Y sur 127,00.

Dans le panneau Propriétés, attribuez à la sixième case le nom de l'instance "boxingCheckBox". Définissez le X de la case à cocher sur 5,00 et son Y sur 161,00.

Dans le panneau Propriétés, attribuez à la septième case le nom d'instance "baseballCheckBox". Définissez le X de la case à cocher sur 116,00 et son Y sur 161,00.

Dans le panneau Propriétés, attribuez à la première étiquette le nom d’instance "sportsLabel". Définissez le X de l'étiquette sur 5,00 et son Y sur 57,00.

Dans le panneau Propriétés, attribuez à la deuxième étiquette le nom d'instance "interestLabel". Définissez le X de l'étiquette sur 5,00 et son Y sur 191,00..

Dans le panneau Propriétés, attribuez à la troisième étiquette le nom d'occurrence "participantLabel". Définissez le X de l'étiquette sur 278,00 et son Y sur 21,00.

Dans le panneau Propriétés, attribuez à la quatrième étiquette le nom d'occurrence "willAttendLabel". Définissez le X de l'étiquette sur 278,00 et son Y sur 143,00..

Dans le panneau Propriétés, attribuez au premier bouton radio le nom d’instance "yesRadio". Définissez le X du bouton radio sur 278,00 et son Y sur 51,00.

Dans le panneau Propriétés, attribuez à la deuxième case d'option le nom d'instance "noRadio". Définissez le X du bouton radio sur 367,00 et son Y sur 51,00..

Dans le panneau Propriétés, attribuez au troisième bouton radio le nom d'instance "notSureRadio". Définissez le X du bouton radio sur 278,00 et son Y sur 88,00.

Dans le panneau Propriétés, attribuez à la zone de texte le nom d’instance "sportsTA". Définissez le X de la zone de texte sur 5,00 et son Y sur 223,00..

Étape 3: Préparation du fichier .as et importation des classes

Créez un nouveau fichier ActionScript et nommez-le "Main.as"..

Nous allons déclarer nos composants dans ce fichier Main.as, nous devons donc désactiver "les instances de stade à déclaration automatique". Le bénéfice de
faire ceci est que vous obtenez un indice de code pour l'instance.

Allez dans Menu> Fichier> Paramètres de publication. Cliquez sur Paramètres à côté de "Script [Actionscript 3]"

Décocher "déclarer automatiquement les instances d'étape".

Dans Main.as, ouvrez la déclaration du paquet et importez les classes que nous allons utiliser en ajoutant le code suivant:

 package // Import nos contrôles import fl.controls.Label; importer fl.controls.CheckBox; import fl.controls.TextArea; import fl.controls.RadioButton; // Nécessaire pour redimensionner automatiquement le texte dans nos étiquettes import flash.text.TextFieldAutoSize; // Besoin de placer nos boutons radio dans un groupe import fl.controls.RadioButtonGroup; // Nécessité d'étendre l'import du clip flash.display.MovieClip; // Besoin de nos cases à cocher import flash.events.Event;

Étape 4: Configurer la classe principale

Ajouter la classe, étendre le clip et configurer notre fonction constructeur.

Ajoutez ce qui suit à Main.as:

 public class Main extend MovieClip // Les composants public var interest interest - Label; Label; public var sportsLabel: Label; public var participantLabel: Label; public var willAttendLabel: Label; public var toggleCheckBox: CheckBox; public var labelCheckBox: CheckBox; var publicCheckCheckBox: CheckBox; var public walkingCheckBox: CheckBox; public var boxingCheckBox: CheckBox; public var footballCheckBox: CheckBox; public var soccerCheckBox: CheckBox; var publique baseballCheckBox: CheckBox; public var sportsTA: TextArea; public var yesRadio: RadioButton; public var noRadio: RadioButton; public var notSureRadio: RadioButton; // Besoin d'un tableau pour les sports CheckBoxes private var sportsCheckBoxes: Array; fonction publique Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Étape 5: Fonctions dans le constructeur principal

Ici nous définissons le setupLabels (), setUpCheckBoxes (), et setupRadioButtons () les fonctions.

dans le setupCheckBoxes () fonction nous mettons toutes les cases à cocher sports dans un tableau; De cette façon, nous pouvons les parcourir en boucle et ajouter un seul écouteur d’événement à chacun d’eux, nous évitant d’avoir à taper manuellement. addEventListener () chaque fois.

Pour le setupRadioButtons () nous avons utilisé un radioButtonGroup. Les boutons radio ne sont conçus que pour sélectionner un seul groupe à la fois. Lorsque nous ajoutons un bouton radio à un groupe, nous indiquons les boutons radio auxquels il appartient..

Ajoutez ce qui suit au Main.as:

 fonction privée setupLabels (): void // Définit le texte sur l'étiquette sportsLabel.text = "Quels sports vous intéressent?"; interestLabel.text = "Vos intérêts sont:"; assisterLabel.text = "Allez-vous assister à l'événement?"; willAttendLabel.text = "Sera présent = Oui"; // Utiliser autosize pour que nos étiquettes puissent contenir tout le texte sportsLabel.autoSize = sportsLabel.autoSize = TextFieldAutoSize.LEFT; interestLabel.autoSize = interestLabel.autoSize = TextFieldAutoSize.LEFT; participantLabel.autoSize = participantLabel.autoSize = TextFieldAutoSize.LEFT; willAttendLabel.autoSize = willAttendLabel.autoSize = TextFieldAutoSize.LEFT;  function privée setupCheckBoxes (): void // définit le texte sur les étiquettes toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Natation"; HikingCheckBox.label = "Randonnée"; boxingCheckBox.label = "Boxe"; footballCheckBox.label = "Football"; soccerCheckBox.label = "Football"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // ici nous mettons les cases dans un tableau pour pouvoir les parcourir // et ajouter facilement le même événementListener à chacun d'entre eux sportsCheckBox = new Array (swimmingCheckBox, HikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); pour (var i: int = 0; i 
  Étape 6: Auditeurs de l'événement
 Ici, nous allons coder nos auditeurs d’événement. Ajouter ce qui suit à Main.as
  fonction privée toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Vérifié";  else e.target.label = "Non coché";  fonction privée sportsSelected (e: Event): void // efface la zone de texte et ajoutons les nouvelles options ci-dessous sportsTA.text = ""; pour (var i: int = 0; i 
 Conclusion
 L'utilisation de boutons radio et de cases à cocher est un excellent moyen de permettre à vos utilisateurs d'effectuer une sélection..
 Vous remarquerez dans le panneau "Paramètres de composant" des composants que vous pouvez vérifier et sélectionner certaines propriétés:
   Cette image est pour le composant case à cocher. 
  Les propriétés sont les suivantes pour le composant case à cocher:
   activée: une valeur booléenne indiquant si le composant peut accepter les entrées de l'utilisateur.
  étiquette: le libellé du composant.
  labelPlacement: Position de l'étiquette par rapport à la case à cocher.
  choisi: une valeur booléenne qui indique si une case à cocher est activée ou désactivée.
  visible: une valeur booléenne indiquant si l'instance du composant est visible.
 
 Les propriétés du radioButton sont les suivantes:
   activée: une valeur booléenne indiquant si le composant peut accepter les entrées de l'utilisateur.
  nom de groupe: Le nom du groupe pour une instance de bouton radio ou un groupe.
  étiquette: le libellé du composant.
  labelPlacement: Position de l'étiquette par rapport au bouton radio… 
  choisi: une valeur booléenne indiquant si un bouton radio est activé ou non..
  valeur: Une valeur définie par l'utilisateur associée à un bouton radio… 
  visible: une valeur booléenne indiquant si l'instance du composant est visible.
 
 Merci d'avoir lu et de garder les yeux ouverts pour les prochains tutoriels sur les composants!



		
			
	   
	




Code