ActionScript/Tipos de campos de texto

Podemos criar um campo de texto através do ActionScript e ele pode ser de duas características diferentes: ou uma caixa de input (para formulários) ou de texto dinâmico (que pode ser alterado). O tipo StaticText, texto estático do Flash, só pode ser criada na IDE do Flash.

As bibliotecas usadas são flash.text.TextField, para a criação dos textos em si, e flash.text.TextFieldType, para configuração do tipo de caixa de texto.

var placar:TextField = new TextField();
placar.type = TextFieldType.DYNAMIC;

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

placar.x = placar.y = 100;
login.x = login.y = 200;

placar.text = "Texto Dinâmico";
login.text = "Caixa de input";

addChild(placar);
addChild(login);

O campo placar será do tipo dinâmico, o que permite a mudança de seu texto, e login é um campo de input, o que faz com que ele possa ser editado e submetido.

Estilizando campo de texto

Podemos definir a altura e largura de um campo de texto, se terá borda e sua cor, cor de fundo, entre outros.

var cxTexto:TextField = new TextField();
cxTexto.type = TextFieldType.DYNAMIC;

// Largura e altura
cxTexto.width = 200;
cxTexto.height = 20;

cxTexto.border = true; // Terá borda
cxTexto.borderColor = 0x0000FF; // Cor da borda
cxTexto.background = true; // Terá cor de fundo
cxTexto.backgroundColor = 0xDDDDDD; // Cor

cxTexto.multiline = true; // Permite ter mais de uma linha
cxTexto.wordWrap = true; // Esconderá texto de linha que passar da largura da caixa
cxTexto.selectable = false; // Texto não será selecionável

cxTexto.textColor = 0x990000; // Cor do texto

cxTexto.text = "Texto de exemplo"; // O texto da caixa

addChild(cxTexto);

Campo de senha

Precisa ser do tipo input e ser configurado true para o atributo displayAsPassword. Você pode configurar também o número máximo de caracteres e uma expressão regular para restringir os tipos de caracteres aceitos (se somente letras, números, etc.).

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

// Será campo de senha
cxSenha.displayAsPassword = true;

cxSenha.restrict = "a-z0-9"; // Só aceita letras e números
cxSenha.maxChars = 15; // Aceita apenas 15 caracteres

// Alguns atributos suportados
cxSenha.width = 120;
cxSenha.height = 18;
cxSenha.border = true;
cxSenha.borderColor = 0x0000FF;
cxSenha.background = true;
cxSenha.backgroundColor = 0xDDDDDD;
addChild(cxSenha);

Veja mais sobre expressões regulares em ActionScript na página de ajuda da Adobe.

Foco a um campo de texto

Use a propriedade focus para lançar o foco sobre um campo de texto. O exemplo abaixo faz com que quando o palco for clicado a caixa de senha cxSenha receba o foco do cursor de texto.

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

cxSenha.displayAsPassword = true;
cxSenha.width = 120;
cxSenha.height = 18;
cxSenha.x = cxSenha.y = 10;

cxSenha.restrict = "a-z0-9";
cxSenha.maxChars = 15;

addChild(cxSenha);

stage.addEventListener(MouseEvent.CLICK, foco);

function foco(evt:MouseEvent):void 
{
    stage.focus = cxSenha; // Usando a propriedade focus
}

Você pode usar esse comando stage.focus porque a referência a linha principal de tempo está implícita. Você poderia escrever esse comando de duas maneiras diferentes que surtem o mesmo efeito:

cxSenha.stage.focus = cxSenha; // fazendo referência ao palco da cxSenha, ou
this.stage.focus = cxSenha; // usando a palavra 'this'

Acrescentando texto

Utilize o método appendText():

var cxTexto:TextField = new TextField();

cxTexto.text = "Meu nome é ";
cxTexto.appendText("João");

O resultado será "Meu nome é João". Você pode adicionar texto através do operador += também (cxTexto.text += "João"), mas appendText() é mais rápido.

Dimensionando um campo de texto

A propriedade autoSize, da classe TextField, redimensiona um campo de texto baseado em entrada e na escolha do alinhamento.

var cxSenha:TextField = new TextField();
cxSenha.type = TextFieldType.DYNAMIC;

// Estilização...
cxSenha.width = 120;
cxSenha.height = 18;
cxSenha.x = cxSenha.y = 50;
cxSenha.border = true;
cxSenha.borderColor = 0x0000FF;
cxSenha.background = true;
cxSenha.backgroundColor = 0xDDDDDD;

// essas 3 linhas são necessárias, pois senão o resultado será uma única linha de texto
cxSenha.multiline = true;
cxSenha.selectable = false;
cxSenha.wordWrap = true;

cxSenha.text = "Meu nome é Fulano, sou estudante\n de ActionScript 3.0 e web designer. Moro em São Paulo capital.";

// Dimensionando automaticamente a caixa de texto
cxSenha.autoSize = TextFieldAutoSize.LEFT;

addChild(cxSenha);
cxSenha.addEventListener(MouseEvent.CLICK, adiciona);

function adiciona(evt:MouseEvent):void 
{
    evt.target.appendText("TEXTO ");
}

Você pode utilizar as propriedades TextFieldAutoSize.LEFT (expande ou contrai no lado direito, em qualquer caso de linhas novas), TextFieldAutoSize.RIGHT (expande ou contrai no lado esquerdo) e TextFieldAutoSize.CENTER (distribui igualmente tanto à direita como à esquerda os espaços).

No exemplo acima, cada vez que a caixa for clicado novo texto será adicionado, o que faz com que a caixa, em vez de esconder o texto novo, se redimensione e abrigue mais texto.

• O caractere especial \n significa uma nova linha de texto (carriage return).

Rolagem de um campo de texto

Para efetuar a rolagem num campo de texto você deve utilizar as propriedades scrollV (rolagem vertical) e scrollH (horizontal). Veja o exemplo:

var cxTexto:TextField = new TextField();
cxTexto.type = TextFieldType.DYNAMIC;

cxTexto.width = 120;
cxTexto.height = 42;
cxTexto.x = cxTexto.y = 50;
cxTexto.border = true;
cxTexto.borderColor = 0x0000FF;
cxTexto.background = true;
cxTexto.backgroundColor = 0xDDDDDD;
cxTexto.multiline = true;
cxTexto.selectable = false;
cxTexto.wordWrap = true;

cxTexto.text = "Meu nome é Fulano, sou estudante\n de ActionScript 3.0 e web designer. Moro em São Paulo capital. \
Desejo trabalhar com web, internet, redes e etc." ;

addChild(cxTexto);

cxTexto.addEventListener(MouseEvent.CLICK, rolagem);

function rolagem(evt:MouseEvent):void 
{
    // Rolará para baixo aumentando em uma linha o andamento da rolagem
    evt.target.scrollV++;
}

Ao clicar em cxTexto você verá o texto rolando, uma linha por vez (por causa de ++, mas você pode pedir que ande determinado número de linhas usando o atributo += ). Você pode fazer a rolagem ir para cima diminuindo com scrollV--, ou então inserir diretamente um número inteiro para rolar a caixa.

• A barra invertida (\) inserida na string em cxTexto.text serve para darmos continuidade na escrita de um comando muito longo na linha seguinte. Assim não temos dificuldades para ler e escrever códigos muito longos.

• A roda do mouse também permite a rolagem da caixa de texto.

Usando fontes embutidas

Utilize a propriedade embedFonts para dar suporte a uma fonte embutida (só possível através da IDE do Flash).

cxTexto.embedFonts = true;

Usando TextFormat

Criando uma instância da classe TextFormat você pode formatar campos de txto, configurando cores para o texto, tipologia, tamanho, entre outras. Não permite todos os recursos que a formatação através de HTML/CSS (visto adiante), porém TextFormat é um pouco mais fácil de se utilizar.

var formatacao:TextFormat = new TextFormat(); // Criando o objeto

formatacao.font = "Arial"; // Definindo fonte
formatacao.color = 0x000099; // Definindo cor de texto

// Texto será em negrito, itálico e sublinhado
formatacao.bold = true;
formatacao.italic = true;
formatacao.underline = true;

// Tamanho 14, espaçamento entre letras (estes em pixels) e espaço entre linhas
formatacao.size = 14;
formatacao.letterSpacing = 1;
formatacao.leading = 6;

// Margem esquerda e direita
formatacao.leftMargin = 3;
formatacao.rightMargin = 2;

// Indentação do texto
formatacao.indent = 8;

// Criando e definindo campo de texto...
var cxTexto:TextField = new TextField();
cxTexto.width = 200;
cxTexto.height = 300;
cxTexto.border = true;

// Passando à cxTexto a instância que contém informações sobre formatação
cxTexto.defaultTextFormat = formatacao;
cxTexto.text = "Texto de exemplo feito \npara a exibição de texto formatado.";

addChild(cxTexto);

O uso da propriedade defaultTextFormat funciona bem porque definimos o texto da caixa cxTexto depois de discriminarmos a formatação. Para inserirmos a formatação depois de definir o texto temos que usar o método setTextFormat(). Você pode especificar também um limite de caracteres (seleção) que será formatada (em vez do texto todo):

cxTexto.setTextFormat(formatacao);

// Apenas os caracteres de 0 a 4. O valor 4 é o caractere até onde vai a formatação, e 0 o início
cxTexto.setTextFormat(formatacao, 0, 4);