O documento descreve como criar um formulário de contato no Flash com validação de dados, listando os campos necessários e instruindo passo a passo como adicioná-los, nomeá-los, criar botões e validar os dados antes do envio.
1. Formulários com validação
Em nosso formulário iremos utilizar sete elementos para o envio dos dados. Serão
eles:
01. Campo de texto para o nome
02. Campo de texto para o email
03. Campo de texto para a cidade
04. Campo de texto para a mensagem
05. Um select com a lista dos estados
06. O botão “Apagar”
07. Botão “Enviar”
Abaixo você confere um exemplo de como ficará nosso formulário ao concluirmos:
Abra o arquivo “form_contato.fla” em seu Flash (só irá funcionar no Flash MX 2004
ou Flash 8. Se tem uma versão mais antiga, sugiro seriamente que se atualize o
quanto antes) e vamos primeiramente à layer (camada) “form”.
Crie quatro campos do tipo input text, um para cada título do formulário (nome, email,
cidade e mensagem), selecionando a ferramenta de texto, clicando no stage e, após
criar, vá até a barra “Properties” (Propriedades) e mude de “Static Text” para “Input
Text”, conforme a figura abaixo:
Feito isso, vamos atribuir um nome de instância a cada um dos input texts criados.
2. Selecione o campo referente ao nome, na mesma barra Properties, digite “nome_txt” –
sem aspas - no campo <Instance Name> (nome de instância), em seguida digite
“var_nome” – sem aspas - no campo “Var”, conforme a figura abaixo:
Repita esse procedimento com cada um dos campos de texto criados, alterando
apenas seus nomes, conforme a lista abaixo:
E-mail
Campo Instance Name: email_txt
Campo Var: var_email
Cidade
Campo Instance Name: cidade_txt
Campo Var: var_cidade
Mensagem
Campo Instance Name: mensagem_txt
Campo Var: var_mensagem
Agora criaremos o campo select, que conterá a lista de Estados. Para economizar
nosso tempo, apenas criaremos a lista com dois estados “SP” e “ES”, mas você poderá
colocar todos depois. Abra a Components (components) pressionando “Ctrl + F7”.
Em seguida, em User Interface, dê um duplo clique sobre o componente “ComboBox”,
como mostra a figura abaixo:
3. Posicione-o ao lado direito do campo referente à Cidade e diminua seu tamanho, para
que fique com espaço para dois digitos, 50 pixels de width (largura) é o ideal.
Selecione o componente que acabamos de criar, digite “estados_cb” – sem aspas - no
campo <Instance Name>. Em seguida, clique sobre a opção “Parameters” e depois dê
um duplo clique sobre a opção “labels”.
Na janela que se abrir, clique no ícone “+” duas vezes e em cada linha criada, digite as
iniciais de um Estado brasileiro. No meu caso, digitei “SP” e “ES” – sem aspas.
Vale lembrar que a opção que ficar na primeira linha será a padrão, que vai aparecer
automaticamente.
Agora vamos criar os dois últimos objetos do nosso formulário, que são os botões
“Enviar” e “Apagar”. Com a ferramenta texto, digite a palavra “Enviar”, depois
“Apagar” – ambas sem aspas. Certifique-se de que esses textos criados não sejam do
tipo “Input” e sim do tipo “Static”.
4. Selecione a palavra “Enviar” e pressione “F8” para abrirmos a janela de criação de
símbolos. Digite “enviar_btn” no campo “Name” e em “Type” escolha a opção “Button”,
conforme a figura abaixo:
Feito isso, no campo <Instance Name> da barra “Properties”, digite novamente
“enviar_btn”.
Faça o mesmo com a palavra “Apagar”, apenas trocando os nomes para “apagar_btn”.
O principal está pronto, vamos agora para a etapa de validação dos dados informados
pelo usuário.
Etapa de validação
Com a ferramenta de texto, crie um Dinamic Text (texto dinâmico), criando um texto
no stage e mudando na barra “Properties” de “Static Text” para “Dinamic Text”.
5. Selecione o campo que acabamos de criar e no campo “Var” da barra “Properties”.
Digite “var_status” – sem aspas.
Feito isso, selecione o primeiro frame da layer (camada) “Actionscript” e pressione “F9”
para abrirmos a paleta “Actions”. Em seguida digite:
#include “Acoes.as”
Essa linha importará as ações digitadas no arquivo “Acoes.as”. Agora, abra o arquivo
“Acoes.as” no seu Flash para conferir a programação, cada etapa está explicada com
comentários.
A página “email.asp” é a responsável por receber os dados e enviá-los para o e-mail
informado. Abra-a e mude o endereço de e-mail e o nome do recipiente da mensagem.
E vale lembrar que essa página só funcionará se estiver hospedada em um servidor
que trabalhe com ASP. Para outras tecnologias, como PHP, JSP, CFM, será necessário
desenvolver uma página semelhante a essa, que receba as variáveis da maneira
correta.