Utilisation du composant ColorPicker

Le composant ColorPicker permet à l’utilisateur de sélectionner une couleur dans un nuancier. Le mode par défaut du composant ColorPicker présente une seule couleur dans un bouton carré. Lorsqu’un utilisateur clique sur le bouton, la liste des couleurs disponibles s’affiche dans un nuancier, ainsi qu’une zone de texte affichant la valeur hexadécimale de la couleur actuellement sélectionnée.

Vous pouvez spécifier les couleurs qui apparaissent dans le composant ColorPicker en définissant sa propriété colors avec les valeurs de couleur que vous souhaitez afficher.

Interaction de l’utilisateur avec le composant ColorPicker

Un composant ColorPicker permet à l’utilisateur de sélectionner une couleur et de l’appliquer à un autre objet dans l’application. Par exemple, si vous voulez autoriser l’utilisateur à personnaliser des éléments de l’application, comme la couleur d’arrière-plan ou la couleur du texte, vous pouvez inclure un composant ColorPicker et appliquer la couleur choisie par l’utilisateur.

L’utilisateur choisit une couleur en cliquant sur son entrée dans le nuancier ou en entrant sa valeur hexadécimale dans la zone de texte. Lorsque l’utilisateur a choisi une couleur, vous pouvez utiliser la propriété selectedColor du composant ColorPicker pour appliquer la couleur à du texte ou à tout autre objet dans l’application.

Une occurrence de ColorPicker reçoit le focus si un utilisateur place le pointeur au-dessus de celle-ci ou utilise la touche de tabulation pour l’atteindre. Lorsque le nuancier d’un composant ColorPicker est ouvert, vous pouvez le contrôler à l’aide des touches suivantes :

Touche

Description

Orig

Amène la sélection sur la première couleur du nuancier.

Flèche vers le haut

Fait monter la sélection d’une ligne dans le nuancier.

Flèche vers le bas

Fait descendre la sélection d’une ligne dans le nuancier.

Flèche droite

Déplace la sélection d’une couleur vers la droite dans le nuancier.

Flèche gauche

Déplace la sélection d’une couleur vers la gauche dans le nuancier.

Fin

Amène la sélection sur la dernière couleur du nuancier.

Paramètres du composant ColorPicker

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres de programmation suivants pour chaque occurrence de ColorPicker : selectedColor et showTextField . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe ColorPicker dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application avec le composant ColorPicker

L’exemple suivant ajoute un composant ColorPicker à une application pendant la programmation. Dans cet exemple, à chaque fois que vous modifiez la couleur dans le composant ColorPicker, la fonction changeHandler() appelle la fonction drawBox() afin de tracer une nouvelle case à l’aide de la couleur sélectionnée dans ColorPicker.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant ColorPicker au centre de la scène depuis le panneau Composants et nommez son occurrence aCp .

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.events.ColorPickerEvent; 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
addChild(aBox); 
 
aCp.addEventListener(ColorPickerEvent.CHANGE,changeHandler); 
 
function changeHandler(event:ColorPickerEvent):void { 
    drawBox(aBox, event.target.selectedColor); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(100, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Choisissez Contrôle > Tester l’animation.

  5. Cliquez sur le composant ColorPicker et sélectionnez une couleur afin de l’appliquer à la case.

Création d’un composant ColorPicker à l’aide d’ActionScript

Cet exemple utilise le constructeur ColorPicker() et addChild() pour créer un composant ColorPicker sur la scène. Il règle la propriété colors sur les valeurs de couleur pour le rouge (0xFF0000), le vert (0x00FF00) et le bleu (0x0000FF), de façon à spécifier les couleurs que le composant ColorPicker affichera. Il crée également un composant TextArea et, à chaque fois que vous sélectionnez une couleur différente dans le composant ColorPicker, l’exemple modifie la couleur du texte dans le composant TextArea en conséquence.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ColorPicker du panneau Composants vers le panneau Bibliothèque.

  3. Faites glisser le composant TextArea du panneau Composants vers le panneau Bibliothèque.

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.ColorPicker; 
import fl.controls.TextArea; 
import fl.events.ColorPickerEvent; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aTa:TextArea = new TextArea(); 
var aTf:TextFormat = new TextFormat(); 
 
aCp.move(100, 100); 
aCp.colors = [0xff0000, 0x00ff00, 0x0000ff]; 
aCp.addEventListener(ColorPickerEvent.CHANGE, changeHandler); 
 
aTa.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis nisl vel tortor nonummy vulputate. Quisque sit amet eros sed purus euismod tempor. Morbi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur diam. Suspendisse at purus in ipsum volutpat viverra. Nulla pellentesque libero id libero."; 
aTa.setSize(200, 200); 
aTa.move(200,100); 
 
addChild(aCp); 
addChild(aTa); 
 
function changeHandler(event:ColorPickerEvent):void { 
    if(TextFormat(aTa.getStyle("textFormat"))){ 
        aTf = TextFormat(aTa.getStyle("textFormat")); 
    } 
    aTf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", aTf); 
}

  5. Choisissez Contrôle > Tester l’animation.