Personnalisation du composant TextInput

Vous pouvez modifier la taille d’une occurrence de TextInput au cours de la programmation et lors de l’exécution. Lors de la programmation, choisissez le composant sur la scène et utilisez l’outil Transformer librement ou une commande de modification > transformation. Lors de l’exécution, utilisez la méthode setSize() ou les propriétés applicables de la classe TextInput, telles que height , width , scaleX et scaleY .

Lorsqu’un composant TextInput est redimensionné, la bordure prend la taille du nouveau cadre de sélection. Le composant TextInput n’utilise pas de barres de défilement, mais le point d’insertion défile automatiquement lorsque l’utilisateur intervient sur le texte. Le champ de texte est alors redimensionné dans la zone restante. Les éléments d’un composant TextInput n’ont pas de taille fixe. Si le composant TextInput est trop petit pour afficher le texte, le texte est rogné.

Styles et composant TextInput

Les styles du composant TextInput spécifient les valeurs des enveloppes, de la marge intérieure et du formatage de texte lorsque le composant est tracé. Les styles texFormat et disabledTextFormat gèrent le style du texte affiché par le composant. Pour plus d’informations sur les propriétés de style des enveloppes, voir la section Enveloppes et composant TextInput .

L’exemple suivant configure le style textFormat afin de déterminer la police, la taille et la couleur du texte qui s’affiche dans le composant TextInput. Le même processus s’applique à la définition du style disabledTextFormat , qui s’emploie lorsque le composant est désactivé.

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

  2. Faites glisser un composant TextInput sur la scène et nommez l’occurrence myTi .

  3. Ajoutez le code suivant dans le panneau Actions, sur l’image 1 du scénario principal. 

    var tf:TextFormat = new TextFormat(); 
tf.color = 0x0000FF; 
tf.font = "Verdana"; 
tf.size = 30; 
tf.align = "center"; 
tf.italic = true; 
myTi.setStyle("textFormat", tf); 
myTi.text = "Enter your text here"; 
myTi.setSize(350, 50); 
myTi.move(100, 50);

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

Enveloppes et composant TextInput

Le composant TextInput utilise les enveloppes suivantes, que vous pouvez modifier afin de changer son apparence :

Légende du composant TextInput

La procédure suivante modifie les couleurs de bordure et d’arrière-plan d’un composant TextInput.

  1. Créez un fichier Flash.

  2. Faites glisser un composant TextInput sur la scène et double-cliquez sur son entrée pour ouvrir son panneau d’enveloppes.

  3. Double-cliquez sur l’enveloppe dont l’état est Normal.

  4. Définissez le contrôle de zoom sur 800 % pour agrandir l’icône en vue de la modification.

  5. Sélectionnez chaque bord de la bordure de l’enveloppe d’état normal, l’un après l’autre, et définissez sa couleur sur #993399 pour l’appliquer.

  6. Double-cliquez sur l’arrière-plan jusqu’à ce que sa couleur apparaisse dans le sélecteur de couleur de remplissage de l’Inspecteur des propriétés. Choisissez la couleur #99CCCC pour l’appliquer à l’arrière-plan.

  7. Cliquez sur le bouton de retour figurant dans la partie gauche de la barre d’édition en haut de la scène pour revenir en mode d’édition de document.

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

    Le composant TextInput doit apparaître tel qu’illustré ci-dessous :

    Composant TextInput intégrant des couleurs de bordure et d’arrière-plan modifiées.