Personalizar o componente TextInput

Você pode alterar o tamanho de uma ocorrência de TextInput durante a autoria e em tempo de execução. Durante a autoria, selecione o componente no Palco e use a ferramenta Transformação livre ou qualquer um dos comandos Modificar > Transformar. Em tempo de execução, use o método setSize() ou as propriedades aplicáveis da classe TextInput, como height , width , scaleX e scaleY .

Quando um componente TextInput é redimensionado, a borda é redimensionada de acordo com a nova caixa delimitadora. O componente TextInput não utiliza barras de rolagem, mas o ponto de inserção rola automaticamente conforme o usuário interage com o texto. Então, o campo de texto é redimensionado dentro da área restante; não há elementos de tamanho fixo em um componente TextInput. Se o componente TextInput for muito pequeno para exibir o texto, então o texto será recortado.

Os estilos e o componente TextInput

Os estilos do componente TextInput especificam valores para as capas, o preenchimento e a formatação de texto quando o componente é desenhado. Os estilos texFormat e disabledTextFormat controlam o estilo do texto exibido no componente. Para obter mais informações sobre propriedades de estilos de capa, consulte As capas e o componente TextInput .

O exemplo a seguir define o estilo textFormat para definir a fonte, o tamanho e a cor do texto exibido no componente TextInput. O mesmo processo se aplica à definição do estilo disabledTextFormat , aplicado quando o componente está desativado.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente TextInput para o Palco e atribua a ele o nome de ocorrência de myTi .

  3. Adicione o seguinte código ao painel Ações no Quadro 1 da Linha do tempo 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. Selecione Controlar > Testar filme.

As capas e o componente TextInput

O componente TextInput usa as seguintes capas, cuja aparência você pode alterar editando-as:

Legenda de TextInput

O procedimento a seguir altera as cores de borda e de plano de fundo de um componente TextInput:

  1. Crie um novo arquivo Flash.

  2. Arraste um componente TextInput para o Palco e clique nele duas vezes para abrir seu painel de capas.

  3. Clique duas vezes na capa Normal.

  4. Defina o controle de zoom como 800% para ampliar o ícone para edição.

  5. Selecione todas as extremidades da borda da capa Normal, uma de cada vez, e defina a cor a ser aplicada como #993399.

  6. Clique duas vezes no plano de fundo até que sua cor apareça no Seletor de cor de preenchimento, no Inspetor de propriedades. Selecione a cor #99CCCC para aplicá-la ao plano de fundo.

  7. Clique no botão Voltar, do lado esquerdo da barra de edição acima do Palco, para voltar ao modo de edição de documento.

  8. Selecione Controlar > Testar filme.

    O componente TextInput deverá aparecer como é mostrado na ilustração a seguir:

    Componente TextInput com as cores de borda e de plano de fundo alteradas.