PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Intermédios

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX / Flash MX 2004
Dificuldade: Intermédio
Data de Publicação: 16/06/2004


Introdução

Este é um tutorial que pretende dar a conhecer a maneira de como criar uma validação de e-mail no Flash MX. Antes de mais, ficam umas breves notas do que este tutorial não ensinará. Este tutorial não se a string que o utilizador inseriu no campo de texto, se é um endereço de e-mail válido, irá somente dizer a string inserida, se é de sintaxe correcta equivalente à de um endereço de e-mail.

Este tutorial trabalha em parte com a determinação de alguns dos caracteres que não são válidos num e-mail, mas não abrange todos os existentes. Existem diversos tipos de caracteres que não são permitidos inserir num e-mail, contudo foi reduzido o número de detecção de caracteres inválidos, aos caracteres em que é mais usual tentar inserir-se.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

Contudo poderemos adicionar sempre mais caracteres, se assim for pretendido. Este tutorial foi escrito no Macromedia Flash MX, tendo sido usado os mesmos princípios que no Flash 5, a sintaxe usada aqui não será suportada no Flash 5, pois este não suporta a instance names para os campos de texto, e assim sendo, não se poderá referir à cor do texto ou à cor de rebordo do campo de texto. A fig.1 ilustra bem o resultado final deste tutorial.

1. Criem um novo filme em Flash.

2. Usando a ferramenta de text tool, desenhem um campo de inserção.

3. No painel de properties seleccionem a opção de “Show Border Around Text”, seleccionem “Single Line” e atribuam o nome de emailBox à instance name e o nome de emailInput como o nome da variável.

4. Deveremos então o nome da layer em que estamos a trabalhar para “input” e coloquem o aluquete.

5. Assim como na figura poderemos atribuir uma nova layer com o um campo de texto, com a propriedade de static text, que poderá conter o texto de “enter e-mail”.

6. Adicionem mais uma layer com o nome de “script” seleccionando a primeira keyframe. Deveremos inserir de seguida os conteúdos da fig. 2 no painel das actionscripts.

As linhas quatro e cinco definem as cores iniciais do texto, e do rebordo da caixa de inserção do texto.

As linhas nove, dez, onze e doze são a função das cores. O que estas linhas irão fazer é atribuir a cor preta ao texto e ao rebordo quando o campo de inserção está seleccionado.

As linhas treze, catorze e quinze estão programadas para fazer outro tipo de função. Desta vez, uma vez que o campo de inserção não estiver seleccionado uma outra função de “emailValidation()” é chamada. É mais lógico existir o conteúdo da função “emailValidation()” aqui, em vez de chamar outra função que complete esta tarefa. Contudo, se pretendermos juntar este script a outros mais, como parte de um formulário de resposta, esta é a maneira mais prática.

A fig. 2 ilustra o script necessário para a interacção com o utilizador. Imediatamente após a mesma keyframe (a primeira keyframe contida na layer script) deveremos inserir o conteúdo da fig. 3, mas por favor notem: O código que está dentro do rectângulo amarelo deve ser escrito numa só linha sem espaços ou quebras de linha. No exemplo é utilizado com quebras de linha para que se pudesse demonstrar numa figura, deste exemplo. A não utilização do código numa linha só, irá fazer com que exista um erro de sintaxe no Flash.

A linha dezanove, começa com a nossa função de validação.

Na linha vinte criamos todo o mecanismo para que o nosso script funcione. Tudo começa com um if. Esta linha pode parecer mais complicada por começar com um comando de if, isto porque usa um operador lógico “OR” que em linguagem de Javascript escreve-se com || (duas barras verticais), fazendo com que esta sintaxe elabore um script consideravelmente mais pequeno. Isto é equivalente a usar variados if’s um atrás do outro.

Primeiramente a função (emailInput.lengh<6) será verdadeira se o tamanho dos caracteres inseridos pelo utilizador for 6. Este valor pode ser perfeitamente mudado para qualquer outro tamanho idealizado. Por exemplo para o valor seis, teríamos algo semelhante a isto: a@b.bb . Qualquer conjunto de caracteres inseridos que contivesse um menor número seria considerado inválido.

De seguida usamos a linha (emailInput.indexOf(“.”)>=0) que diz, se o número de caracteres inseridos na primeira aspa é maior ou igual a zero, então existe uma outra aspa. Porque a aspa um caracter inválido num endereço de e-mail, se este estiver presente, então o teste é válido, retornando que o e-mail inserido é inválido. Repetimos de seguida o mesmo teste para outros quatro caracteres inválidos. Poderemos inserir quantos caracteres quisermos para fazer a validação dos mesmos.

Usa-se a linha (emailInput.indexOf(“@”)<=0) que é o oposto dos testes anteriores, que permite verificar se dentro dos caracteres inseridos, se existe um “@”. Caso exista o teste é verdadeiro, caso contrário, o e-mail é inválido.

O teste seguinte (emailInput.indexOf(“@”)!=emailnput.lastIndexOf(“@”)) é uma pequena variação. “indexOf()” devolve-nos o último número do caracter especificado. Se estes dois não forem coincidentes, então, devem existir pelo menos duas instâncias da mesma string ‘@’, enquanto que deveremos conter somente uma num endereço de e-mail, para que esta função seja verdadeira.

O comando (emailInput.lastIndexOf(“.”)+3)<emailInput.indexOf(“@”)) diz que deve existir um ‘.’ Depois do ‘@’. Notem que é válido ter um ‘.’ Antes do ‘@’.

Finalmente ((emailInput.lastIndexOf(“.”)+3)>emailInput.length) avisa o programa que a última instância do ‘.’ deve ser seguida pelo menos por 2 caracteres.

As linhas vinte e um e vinte e dois são executadas se algum dos testes na linha vinte resultam em verdade, o que fará com que o e-mail inserido pelo utilizador seja inválido. Assim sendo, ambos os textos e a caixa de inserção, obterão a cor de vermelho, para que o utilizador tenha a percepção de que o e-mail inserido está errado.

As linhas vinte e três a vinte e seis são executadas, caso o e-mail inserido seja válido. Assim sendo, ambas as cores de texto e da caixa de inserção voltarão às cores de defeito.

A linha vinte e sete termina a função de validação do e-mail.

Testem o vosso filme onde devem ter um campo de inserção que alerta para quando for inserido um e-mail inválido. Para modificar este script de forma a validar quase tudo, simplesmente apontem os requerimentos de uma string válida e insiram as condições na linha vinte do script.

 

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados