ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer un formulaire - Zone de saisie, CheckBox, RadioButton, Liste déroulante
Nous allons voir ici les différents éléments mis à disposition pour construire un formulaire :
- Zones de saisie (TextInput,TextArea) :

Pour créer une zone où l'internaute pourra saisir du texte, vous avez trois possibilités.
> Vous pouvez créer une zone de texte dynamique. Pour cela sélectionnez l'outils texte, dans les propriétés séletionnez "Texte Classique" et "Saisie de texte", puis tracé sur la scène votre zone de saisie.
> Sinon, dans les composants Flash, vous avez deux composants reprennants le principe des balises <input type="text" /> et <textarea></textarea> de l'HTML : TextInput et TextArea. Posez-les simplements sur la scène pour pouvoir les utiliser. Le TextInput affiche un champ de saisie d'une seule ligne alors que le TextArea affiche une zone de saisie multiligne. Le TextArea possède à peut prêt les mêmes propriétés qu'une zone de texte de saisie. Ses deux composants sont paramétrables dans l'onglet propriétés.

Vous pouvez paramétrer vos zones de saisies ainsi : (plus de précisions ici)

//Imports Flash
import fl.controls.TextArea;
import fl.controls.ScrollPolicy;

//Si vous souhaitez créer la zone de texte directement en AS3 sans passer par l'outil texte ou un composant
var zone_de_saisie:TextArea = new TextArea();

//Paramètres de la zone de saisie
zone_de_saisie.setSize(120,30); //Définit la taille de la zone de saisie (largeur,hauteur)
zone_de_saisie.move(50,45); //Définit la position de la zone de saisie (x,y)
zone_de_saisie.editable = true; //Définit si la zone de saisie est éditable
zone_de_saisie.enabled = true; //Définit si la zone de saisie est sélectionnable à la souris (revient à l'activer ou non)
zone_de_saisie.text = "Texte par défaut"; //Texte affiché par défaut dans la zone de saisie

//> Uniquement pour un TextArea
zone_de_saisie.htmlText = "Texte <b>par</b> défaut"; //Texte affiché par défaut dans la zone de saisie au format HTML
zone_de_saisie.wordWrap = true; //Définit si on applique le retour à la ligne automatique
zone_de_saisie.horizontalScrollPolicy = ScrollPolicy.ON; //Active ou non (ON/OFF/AUTO) l'affichage d'une scrollbar horizontale
zone_de_saisie.verticalScrollPolicy = ScrollPolicy.ON; //Active ou non (ON/OFF/AUTO) l'affichage d'une scrollbar verticale

//> Uniquement pour un TextInput
zone_de_saisie.displayAsPassword = false; //Définit si la zone de saisie concerne un mot de passe. Si oui, les saisies sont masqués.

Pensez à limiter le nombre et le type de caratères autorisés :

zone_de_saisie.maxChars = 10; //Champ limité à la saisie de 10 caractères
zone_de_saisie.restrict = "abc123"; //Champ limité à la saisie des chiffres "1","2","3" et des lettres "a","b","c"

Une fois vos zones de saisies placés sur la scène, donnez leurs un nom d'occurence. Ensuite, pour accéder à se qui a été saisie dedans, utilisez simplement :

//Saisie classique
var text_saisie = zone_de_saisie.text;

//Saisie HTML
var text_saisie = zone_de_saisie.htmlText;

- Listes déroulantes (ComboBox) :

Insérez la liste déroulante sur la scène et donnez lui un nom d'occurance (liste) :

//Imports Flash
import fl.controls.ComboBox;

//Si vous souhaitez créer une liste déroulante directement en AS3 sans passer par un composant
var liste:ComboBox = new ComboBox();

liste.addItem({label:"Femme",data:"1"});
liste.addItem({label:"Homme",data:"2"});
liste.addItem({label:"Enfant",data:"3"});

La valeur label correspond à se qui s'affiche dans la liste déroulante, et la valeur data correspond à la valeur de liste lorque cet élément est sélectionné.

- Boutons radios (RadioButton) :

Insérez trois boutons radio sur la scène et donnez leurs des noms d'occurances (radioBTN_1,radioBTN_2,radioBTN_3) :

//Imports Flash
import fl.controls.RadioButton;

//Si vous souhaitez créer un bouton radio directement en AS3 sans passer par un composant
var radioBTN_1:RadioButton = new RadioButton();
var radioBTN_2:RadioButton = new RadioButton();
var radioBTN_3:RadioButton = new RadioButton();

//Définit le groupe (dans un groupe, seul un bouton radio peut être coché à la fois)
radioBTN_1.groupName = "groupeBoutonRadio_1";
radioBTN_2.groupName = "groupeBoutonRadio_1";
radioBTN_3.groupName = "groupeBoutonRadio_1";

//Définit le bouton radio qui est sélectionné par défaut
radioBTN_1.selected = false;
radioBTN_2.selected = true;
radioBTN_3.selected = false;

//Définit le titre de chaque bouton radio (pas obligatoire, vous pouvez créer vos propres texte pour légender les boutons)
radioBTN_1.label = "Célibataire";
radioBTN_2.label = "En couple";
radioBTN_3.label = "Enfant(s) à charge(s)";

- Cases à cocher (CheckBox) :

Insérez deux cases à cocher sur la scène et donnez leurs des noms d'occurances (boxBTN_1,boxBTN_2) :

//Imports Flash
import fl.controls.CheckBox;

//Si vous souhaitez créer une case à cocher directement en AS3 sans passer par un composant
var boxBTN_1:CheckBox = new CheckBox();
var boxBTN_2:CheckBox = new CheckBox();

//Définit si une checkBox est sélectionné par défaut
boxBTN_1.selected = false;
boxBTN_2.selected = true;

//Définit le titre de chaque checkBox (pas obligatoire, vous pouvez créer vos propres texte pour légender les boutons)
boxBTN_1.label = "Posséde le permis B";
boxBTN_2.label = "Posséde un véhicule";

- Bouton (Button) :

Insérez un bouton sur la scène et donnez lui un nom d'occurance (btn) :

//Imports Flash
import fl.controls.Button;

//Si vous souhaitez créer un bouton directement en AS3 sans passer par un composant
var btn:Button = new Button();

//Paramètres du bouton
btn.label = "Valider"; //Définit le nom du bouton
btn.setSize(120,40); //Définit la taille (largeur,heuteur) du bouton
btn.move(50,75); //Définit la position (x,y) du bouton
btn.emphasized = false; //Définit si on affiche les doubles bordures

- Définir le style des textes des composants :

Il vous suffit de créer le style :

//Imports Flash
import flash.text.TextFormat;

var myTextFormat:TextFormat = new TextFormat();
myTextFormat.bold = true; //Texte en gras
myTextFormat.color = 0xFF0000; //Couleur

Ensuite appliquez le à votre composant :

composant.setStyle("textFormat", myTextFormat); //Définit le style du nom du bouton

- Exemple :

Dans cet exemple vous verrez également comment je récupère les infos pour les transmettre à un fichier PHP.

Commentaire(s)
Par mathrem le 2012-10-14 a 16:26,
bonjour comment rédiger le fichier envoi.php?