Flash AS3 - TextField

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

Les méthodes de la classe TextField permettent de définir, sélectionner et manipuler du texte dans un champ texte dynamique ou de saisie que vous créez en cours de programmation ou à l'exécution. Il est possible de le faire assez simplement, sans importer de package supplémentaire.

Insérer un champ de texte sans importer de package supplémentaire

Afficher du texte

Pour créer une variable de type TextField, utilisez le constructeur:

var zoneTexte:TextField = new TextField();

Pour ajouter du contenu à ce champ, il faut définir une variable de type string qui contiendra le texte à afficher:

var texte: String = "C'est chouette de pouvoir utiliser cette classe!";

Si vous souhaitez faire un saut de ligne ajouter les caractères \n.

var texte: String = "C'est chouette de pouvoir\nutiliser cette classe!";

Il vous permettra d'afficher le texte:

C'est chouette de pouvoir

utiliser cette classe!

Pour afficher ce contenu, il faut se servir de la méthode

addChild();

Sans spécification, le champ de texte est créé avec les paramètres par défaut suivants:

• Largeur : 100 pixels
• Hauteur : 100 pixels
• Couleur : noir
• Police : Times New Roman ou Times
• Taille : 12
• Pas de bordures
• Pas d'arrière-plan
• Une seule ligne

Pour modifier la taille du champ de texte:

zoneTexte.width = 200;
zoneTexte.height = 200;

Vous pouvez également ajouter le code suivant pour que le height du champ change automatiquement:

zoneTexte.autoSize = "center";

ou

zoneTexte.autoSize = "left";

ou

zoneTexte.autoSize = "right";

ou

zoneTexte.autoSize = "none";

Pour dessiner un cadre autour du champ et définir sa couleur:

zoneTexte.border = true;
zoneTexte.borderColor = 0xFF0000;

Pour définir la couleur de l'arrière-fond du champ.

zoneTexte.background = true;
zoneTexte.backgroundColor = 0xFFE4B3;

Pour que le texte apparaisse sous plusieurs lignes et qu'il revienne à la ligne:

zoneTexte.multiline = true;
zoneTexte.wordWrap = true;

Vous permettez au texte de passer à la ligne lorsqu'il arrive au bord du champ.

Formater du texte à l'aide de la classe "TextFormat"

Vous pouvez aussi modifier l'apparence du texte (le formatage) à l'aide de la classe "TextFormat". Grâce à elle, il est possible de définir des propriétés de formatage que vous pouvez réutiliser pour plusieurs blocs de texte.

Voici la marche à suivre:

Dans cet exemple, nous allons créer un formatage qu'on utilisera pour les sous-titres d'un document.

Créer l'objet de formatage:

var sousTitres:TextFormat = new TextFormat();

Il faut ensuite définir les paramètres:

sousTitres.size = 24;
sousTitres.color = 0xbc3131;
sousTitres.font = "Verdana";

Vous pouvez trouver tous les paramètres modifiables sur le site d'Adobe (documentation TextFormat). Pour terminer, utilisez la propriété defaultTextFormat pour appliquer le formatage à un TextField:

monTexte.defaultTextFormat = sousTitres;

Récupérer une entrée utilisateur

Pour récupérer du texte introduit par l'utilisateur, il faut définir le type du TextField en tant qu'input, puis ajouter sur la scène.

var EntreeUtil:TextField = new TextField();
EntreeUtil.type = TextFieldType.INPUT;
addChild(EntreeUtil);

De la même manière que précédemment, il faut ensuite préciser toute une série de paramètre pour que l'affichage convienne à ce que l'on veut faire. La classe TextFormat permet notamment de définir la police et sa taille:

var formatEntree:TextFormat = new TextFormat();
formatEntree.font = "Arial";
formatEntree.size = 12;

Qu'il faut ensuite attribuer comme format par défaut à la variable de saisie:

EntreeUtil.defaultTextFormat = formatEntree;

On lui attribue ensuite les paramètres tels que définis dans la section précédente et on l'ajoute sur la scène. La propriété "focus", fait en sorte que le curseur soit dans la case ainsi créée.

EntreeUtil.x = 10;
EntreeUtil.y = 10;
EntreeUtil.height = 18;
EntreeUtil.width = 200;
EntreeUtil.border = true;
addChild(EntreeUtil);
stage.focus = EntreeUtil;

Pour récupérer cette entrée, il faut deux fonction et un Eventlistener. Une des fonctions permettra d'attribuer la valeur de la saisie à une variable.

function accepteEntree()
{ 
var leTexteSaisi:String = EntreeUtil.text;
}

L'Eventlistener de touche relâchée appellera une fonction qui test si c'est la touche entrée qui a été pressée, qui équivaut au code caractère 13. Si c'est le cas, la fonction accepteEntree() est alors appelée.

EntreeUtil.addEventListener(KeyboardEvent.KEY_UP, testSiReturn); 
function testSiReturn(event:KeyboardEvent) {
if (event.charCode == 13)
{ accepteEntree();}
}

Vous pouvez alors utiliser la variable leTexteSaisi dans votre code.

TextField et mot de passe exemple

à completer...

import flash.sampler.NewObjectSample;
import flash.text.TextField;
import flash.events.TextEvent;

stop();

var passwordNumber = 1000;

var str:String; 


var EntreeUtil:TextField = new TextField();
EntreeUtil.type = TextFieldType.INPUT;
EntreeUtil.x = 10;
EntreeUtil.y = 10;
EntreeUtil.height = 18;
EntreeUtil.width = 200;
EntreeUtil.border = true;
EntreeUtil.displayAsPassword = true;	
this.addChild(EntreeUtil);



var txtField:TextField = new TextField ();
txtField.text = "try again";
txtField.x= 200;
txtField.y= 300;

EntreeUtil.addEventListener(TextEvent.TEXT_INPUT, reportKeyDown); 

function reportKeyDown (event:TextEvent):void 

{
str = EntreeUtil.text + event.text; 
	
}

Go_button.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent):void
{
	if (str == passwordNumber)
	{

		gotoAndStop (2);
		this.removeChild(EntreeUtil); 
	}
	else
	{   
		
		addChild(txtField);
	}
	
}

Références

Les bases de l'ActionScript: Création d’un champ de texte dynamique"TextFieldAS3">[1]

Rosenzweig G. (2008). ActionScript 3.0 pour les jeux. Pearson Education France. Paris.