Application simple

Sélectionnez Fichier > Nouveau.

Dans la boîte de dialogue document, sélectionnez Fichier Flash (ActionScript 3.0) et cliquez sur OK.

Une nouvelle fenêtre Flash s’ouvre.

Choisissez Fichier > Enregistrer, nommez le fichier Flash Greetings.fla , puis cliquez sur le bouton Enregistrer.

Dans le panneau Composants Flash, sélectionnez un composant TextArea et faites-le glisser sur la scène.

Dans la fenêtre Propriétés, après avoir sélectionné le composant TextArea sur la scène, nommez l’occurrence aTa puis entrez les informations suivantes :

• Tapez 230 pour la valeur W (largeur).

• Tapez 44 pour la valeur H (hauteur).

• Tapez 165 pour la valeur X (position horizontale).

• Tapez 57 pour la valeur Y (position verticale).

• Entrez Hello World! pour le paramètre texte, dans l’onglet Paramètres.

Faites glisser un composant ColorPicker sur la scène, placez-le à gauche du composant TextArea et nommez son occurrence txtCp. Entrez les informations suivantes dans l’Inspecteur des propriétés :

• Tapez 96 pour la valeur X.

• Tapez 72 pour la valeur Y.

Faites glisser trois composants RadioButton sur la scène, un par un, et nommez leurs occurrences smallRb , largerRb et largestRb . Entrez les informations suivantes les concernant dans l’Inspecteur des propriétés :

• Tapez 100 pour la valeur W et 22 pour la valeur H de chacun d’eux.

• Tapez 155 pour la valeur X.

• Tapez 120 pour la valeur Y de smallRb, 148 pour largerRb et 175 pour largestRb.

• Tapez fontRbGrp pour le paramètre groupName de chacun d’eux.

• Dans l’onglet Paramètres de Small , Larger et Largest , entrez des étiquettes pour chaque composant.

Faites glisser un composant ComboBox sur la scène et nommez l’occurrence msgCb . Entrez les informations suivantes le concernant dans l’Inspecteur des propriétés :

• Tapez 130 pour la valeur W.

• Tapez 265 pour la valeur X.

• Tapez 120 pour la valeur Y.

• Dans l’onglet Paramètres, entrez Greetings pour le paramètre d’invite.

• Double-cliquez sur le champ de texte du paramètre dataProvider pour ouvrir la boîte de dialogue Valeurs.

• Cliquez sur le signe plus et remplacez la valeur de l’étiquette par Hello World!

• Répétez l’étape précédente pour ajouter les valeurs d’étiquette Have a nice day! et Top of the Morning!

• Cliquez sur OK pour fermer la boîte de dialogue Valeurs.

Enregistrez le fichier.

Si le panneau Actions n’est pas affiché, ouvrez-le en appuyant sur la touche F9 ou en choisissant Actions dans le menu Fenêtre. Cliquez sur l’image 1 du scénario principal et entrez le code suivant dans le panneau Actions :

import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);

Les trois premières lignes importent les classes d’événement utilisées par l’application. Un événement se produit lorsqu’un utilisateur interagit avec l’un des composants. Les cinq lignes suivantes enregistrent des gestionnaires d’événements pour les événements que l’application veut écouter. Un événement click se produit pour un composant RadioButton lorsque l’utilisateur clique sur son entrée. Un événement change se produit lorsque l’utilisateur sélectionne une couleur différente dans le composant ColorPicker. Un événement change se produit pour le composant ComboBox lorsque l’utilisateur choisit un message de bienvenue différent dans la liste déroulante.

La quatrième ligne importe la classe RadioButtonGroup de manière à ce que l’application puisse affecter un écouteur d’événement au groupe de composants RadioButtons, plutôt que d’affecter l’écouteur à chaque bouton individuellement.

Ajoutez la ligne de code suivante au panneau Actions pour créer l’objet TextFormat tf , utilisé par l’application pour modifier les propriétés de style size et color du texte dans le composant TextArea.

var tf:TextFormat = new TextFormat();

Ajoutez le code suivant pour créer la fonction de gestion des événements rbHandler . Cette fonction gère un événement click lorsqu’un utilisateur clique sur l’un des composants RadioButton.

function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}

Cette fonction utilise une instruction switch pour examiner la propriété target de l’objet event afin de déterminer quel composant RadioButton a déclenché l’événement. La propriété currentTarget contient le nom de l’objet qui a déclenché l’événement. Selon le composant RadioButton sur lequel l’utilisateur a cliqué, l’application modifie la taille du texte dans le composant TextArea et la fixe à 14, 18 ou 24 points.

Ajoutez le code suivant pour implémenter la fonction cpHandler() , qui gère une modification apportée à la valeur dans le composant ColorPicker :

function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}

Cette fonction définit la propriété color de l’objet TextFormat tf sur la couleur sélectionnée dans le composant ColorPicker, puis appelle la méthode setStyle() pour l’appliquer au texte dans l’occurrence de TextArea aTa .

Ajoutez le code suivant pour implémenter la fonction cbHandler() , qui gère une modification apportée à la sélection dans le composant ComboBox :

function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}

Cette fonction remplace simplement le texte du composant TextArea par le texte sélectionné dans le composant ComboBox, event.target.selectedItem.label .

Choisissez Contrôle > Tester l’animation ou appuyez sur Ctrl+Entrée pour compiler le code et tester l’application Greetings.

La section suivante explique comment créer la même application avec une classe ActionScript externe et un fichier FLA incluant uniquement les composants to dans la bibliothèque.

Sélectionnez Fichier > Nouveau.

Dans la boîte de dialogue document, sélectionnez Fichier Flash (ActionScript 3.0) et cliquez sur OK.

Une nouvelle fenêtre Flash s’ouvre.

Choisissez Fichier > Enregistrer, nommez le fichier Flash Greetings2.fla , puis cliquez sur le bouton Enregistrer.

Faites glisser les composants suivants du panneau Composants vers la bibliothèque :

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  Le fichier SWF compilé utilisera chacune de ces actifs ; vous devez donc les ajouter à la bibliothèque. Faites glisser les composants en bas du panneau Bibliothèque. Lorsque vous ajoutez ces composants à la bibliothèque, d’autres ressources (telles que List, TextInput et UIScrollBox) sont ajoutés automatiquement.

Dans la fenêtre Propriétés, tapez Greetings2 dans la zone Classe du document.

Si Flash affiche un message d’avertissement indiquant que la « définition de la classe de document est introuvable », ignorez-le. Vous allez définir la classe Greetings2 dans les étapes suivantes. Cette classe définit la fonctionnalité principale de l’application.

Enregistrez le fichier Greetings2.fla.

Sélectionnez Fichier > Nouveau.

Dans la boîte de dialogue Nouveau document, sélectionnez un fichier ActionScript, puis cliquez sur OK.

Une nouvelle fenêtre de script s’affiche.

Ajoutez le code suivant dans la fenêtre de script :

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {    

Le script définit une classe ActionScript 3.0, intitulée Greetings2. Le script effectue les opérations suivantes :

• Il importe les classes que vous allez utiliser dans le fichier. Normalement, ces instructions import seraient ajoutées lorsque vous faites référence à des classes différentes du code, mais par souci de rapidité, cet exemple les importe toutes en une seule opération.

• Il déclare les variables qui représentent les différents types d’objets de composant que vous allez ajouter au code. Une autre variable crée l’objet TextFormat tf .

• Il définit une fonction de constructeur, Greetings2() , pour la classe. Vous allez ajouter des lignes à cette fonction et d’autres méthodes à la classe au cours des étapes suivantes.

Choisissez Fichier > Enregistrer, nommez le fichier Greetings2.as , puis cliquez sur le bouton Enregistrer.

Ajoutez les lignes de code suivantes à la fonction Greeting2() :

    createUI(); 
    setUpHandlers(); 
}

La fonction doit désormais avoir l’aspect suivant :

public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}

Ajoutez les lignes de code suivantes après l’accolade fermante de la méthode Greeting2() :

private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}

Ces lignes :

• instancient les composants utilisés dans l’application ;

• définissent la taille, la position et les propriétés de chaque composant ;

• ajoutent chaque composant sur la scène via la méthode addChild() .

Après l’accolade fermante de la méthode bldRadioButtons() , ajoutez le code suivant pour la méthode setUpHandlers() :

private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}

Ces fonctions définissent les écouteurs d’événement des composants.

Choisissez Fichier > Enregistrer pour enregistrer le fichier.

Choisissez Contrôle > Tester l’animation ou appuyez sur Ctrl+Entrée pour compiler le code et tester l’application Greetings2.