leitura do artigo >

29
ago

Formulário AS3 + PHP

Este é um exemplo básico de formulário que usa apenas 4 caixas de texto. A partir dele, você pode fazer as modificações que desejar, tais como: criar mais campos de texto, usar combobox no lugar de caixa de texto, criar um código para validar o email, etc.

Comentários (3) Comentários(32) Categorias Action Script3, Destaques

Este é um exemplo básico que usa apenas 4 caixas de texto. A partir dele, você pode fazer as modificações que desejar, tais como: criar mais campos de texto, usar Combobox no lugar de caixa de texto, criar um código para validar o email, etc. Neste exemplo, vou criar as caixas de texto diretamente no palco para simplificar a explicação e enfocar a atenção no código de envio da informação, que é o mais importante neste caso.

Crie 4 caixas de texto de entrada (input) com os nomes de instancia: nome, email, assunto e mensagem. Apenas mensagem vai ter habilitada a opção de multiline. Também crie uma caixa de texto dinâmica com nome de instancia aviso que servirá para mostrar um texto caso algum campo estiver vazio ao tentar enviar o formulário. Incorpore (embed) os caracteres que serão usados (recomendado: Maiúsculas, Minúsculas, Numerais, Pontuação, Latin I). Crie um botão com nome de instância enviar. Clique no palco e na barra de propiedades defina a DocumentClass como Form. Agora, abra um documento de Actionscript (*.as), salve como Form.as e coloque o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

package {
 
	import flash.display.*;
	import flash.net.*;
	import flash.events.*
 
	public class Form extends MovieClip {
 
		var i:int;
		var loader:URLLoader = new URLLoader;
		var request:URLRequest = new URLRequest("form.php");
		var variaveis:URLVariables = new URLVariables();
		var pattern:RegExp = /^(\w+[\-\.])*\w+@(\w+\.)+\w{2,4}+$/;
 
		public function Form() {
 
			mensagem.text = "";
 
			request.method = URLRequestMethod.POST;
			loader.addEventListener(Event.COMPLETE, loaderComplete);
			loader.addEventListener(IOErrorEvent.IO_ERROR, loaderError);
 
			enviar.addEventListener(MouseEvent.CLICK, enviarClick)
 
			function enviarClick(e:MouseEvent) {
 
				if ( (nome.length) && (email.length) && (assunto.length) && (mensagem.length)) {
 
					if (validarEmail(email.text)) {
						variaveis.nome = nome.text;
						variaveis.email = email.text;
						variaveis.assunto = assunto.text;
						variaveis.mensagem = mensagem.text;
						request.data = variaveis;
						loader.load(request)
 
						enviar.removeEventListener(MouseEvent.CLICK, enviarClick)
					} else {
						aviso.text = "- email inválido -";
					}
 
				} else {
					aviso.text = "- por favor, preencha todos os campos -";
				}
			}
 
			function validarEmail(email:String):Boolean {
				return pattern.test(email)
			}
 
			function loaderComplete(e:Event){
				gotoAndStop(2)
			}
			function loaderError(e:IOErrorEvent){
				gotoAndStop(3)
			}
 
		}
	}
}

Feito isso, abra o Bloco de Notas ou qualquer outro editor de texto, salve o documento como form.php e coloque o código abaixo:

<?php
 
	$nome = $_POST["nome"];
	$email = $_POST["email"];
	$assunto = $_POST["assunto"];
	$mensagem = $_POST["mensagem"];
 
	$recipient = "email@dominio.com";
 
	$ip = $_SERVER['REMOTE_ADDR'];
 
	utf8_decode($nome);
	utf8_decode($email);
	utf8_decode($mensagem);
	utf8_decode($assunto);
 
	$cabecalho  = "MIME-Version: 1.0\r\n";
	$cabecalho .= "Content-type: text/html; charset=utf-8\r\n";
	$cabecalho .= "Reply-to: ".$_POST['email']."\r\n";
	$cabecalho .= "From: ".$_POST['nome']." <".$_POST['email'].">";
 
	$subject = "Contato: ".$assunto;
 
	$msg = "<b>Nome:</b> $nome\n<br /><b>Email:</b> $email\n<br /><b>Mensagem:</b> $mensagem\n<br /><b>IP:</b> $ip\n";
 
	mail($recipient, $subject, $msg, $cabecalho);
 
?>

Antes de salvar e fechar, mude a linha $recipient = “email@dominio.com”; colocando entre as aspas o email ao qual deseja que a informação seja enviada.

Nota: a linha mensagem.text = “”; do ActionScript foi adicionada porque por alguma estranha razão (bug?) ao deixar a caixa de texto como multiline, inicialmente o Flash não considera o conteúdo do texto como nulo.

Exemplo de Formulário
Baixado 2371 vezes
Tamanho 7.44 kB
Clique para fazer o download

EDITADO: post editado em set/2011 para adicionar a função de validar o email.

«
»
Postado em 29-08-2009 por
em Action Script3, Destaques

Share

Comentários

  • Eder Lima disse:
    em 2 de setembro de 2009

    Muito bom Igor!

    O pessoal tá sempre procurando por formulários e é uma ótima idéia disponibilizar um exemplo aqui.

    :)

  • Sandro Oliveira disse:
    em 3 de setembro de 2009

    se não me falha a memória, os campos input com multi-linha só nao ficam vazias quando embedadas, quando não estao embedadas elas ficam com o valor vazio mesmo, me corrigam se eu estiver enganado.

    quanto ao php acho masi dinamico fazer desta maneira:
    http://pastebin.com/fa959c53

    e receber a variavel dizendo se foi enviado ou nao pelo php, a partir dai gerar uma mensagem ao usuario.
    fica ai a minha dica.

  • Sandro Oliveira disse:
    em 3 de setembro de 2009

    desculpe pelos erros de ortografia. :P

  • Sandro Oliveira disse:
    em 3 de setembro de 2009

    esqueci de corrigir o charset do header do email tembém:
    http://pastebin.com/d2b1b16ee

    #fail

  • Igor Amendola disse:
    em 7 de setembro de 2009

    sandro… abri o arquivo q botei pra download e percebi q esqueci de embedar… huhhu… ou seja, multiline da bug com ou sem embed… enfim, brigado pq senao nao teria visto q esqueci isso e tb brigado pela dica do php… quem puder dar mais dicas, fique à vontade :D

  • Lucas disse:
    em 11 de setembro de 2009

    Olá Igor. Estou caçando na net um formulario de Flash + PHP que dê certo há dias. Tentei usar esse seu exemplo no servidor (Locaweb) e ele não funcionou. Só alterei o e-mail, gerei o swf e coloquei os arquivos no servidor (swf, as e php) e não funfou, como faz??

    Obrigado.
    []‘s

  • Eder Lima disse:
    em 11 de setembro de 2009

    Lucas.
    Eu testei o formulário e funciona perfeitamente na Locaweb. Leva uns 5min, mas o e-mail chega, sem necessidade de nenhuma configurção diferente.

  • Lucas disse:
    em 20 de setembro de 2009

    Eder e Igor,

    Eu testei novamente e funfou. Aquele dia não sei se fiz alguma coisa errada e talz. Fiquei encabulado e decidi tentar de novo e foi.

    Parabéns pelo tutorial, muito obrigado.

    Abraços.

  • Sérgio disse:
    em 28 de setembro de 2009

    Tentei colocar o formulário a funcionar mas ele nem procede ao envio. Será que pode tentar verificar onde se encontra o erro?

  • Eder Lima disse:
    em 28 de setembro de 2009

    Sérgio.
    Seja um pouco mais específico, que erro ocorre?

    Esse formulário funciona “from the box”, ou seja, basta alterar o endereço de e-mail e hospedar no servidor.
    “Procurar um erro” no formulário que funciona é difícil.

    Verifique se você configurou corretamente o endereço de e-mail e claro, se seu servidor oferece o suporte adequado.

  • Pedro Lins disse:
    em 26 de janeiro de 2010

    Os arquivos para download estão trocados.
    Estão vindo com o post do Eder de consulta do Cep.

    :x

  • Eduardo disse:
    em 15 de março de 2010

    Muito bom mas tem um pequeno defeito.
    Clique duas vezes sem escrever nada em enviar e o e-mail vai.

    Para arrumar isso criei um outro local para aparecer a mensagem de erro.

  • guilhermekami disse:
    em 29 de março de 2010

    Simples e objetivo o tutorial parabéns!

  • Igor Amendola disse:
    em 31 de março de 2010

    Valeu guilherme!
    e obrigado Eduardo! atualmente trabalho dessa forma de usar uma caixa de texto pra indicar os erros… vou dar uma atualizada neste tutorial pra nao ter esse problema de enviar com 2 cliques. valeu!!

  • Igor Amendola disse:
    em 4 de agosto de 2010

    Demorei, mas editei… hehehe… agora o formulario mostra um aviso numa caixa de texto separada caso algum dos campos estiver vazio :)

  • Rodrigo disse:
    em 31 de janeiro de 2011

    Vlw o post ;)

  • Rodrigo disse:
    em 6 de março de 2011

    Funcionaria se eu colocasse mais um if na função validarclick para poder validar o campo de email pra aceitar somente email com @

  • Igor Amendola disse:
    em 6 de março de 2011

    Rodrigo, sim… funcionaria…
    Eu coloquei um codigo simples pra depois cada um adaptar da forma que quiser. Mas você pode criar uma condiçao pra validar o email… uma boa opçao pra validar email é usando a classe RegExp.

    1
2
3
4
5
6

    function validarEmail(email:String):Boolean {
    var pattern:RegExp = /^(\w+[\-\.])*\w+@(\w+\.)+\w{2,4}+$/;
    return pattern.test(email)
}
trace(validarEmail("teste@bla")) //false
trace(validarEmail("teste@bla.com")) //true
  • Rodrigo disse:
    em 6 de março de 2011

    Vlw Igor o formulário esta funcionando 100%, vou dar uma pesquisada deixei na comunidade do orkut um site simples que foi meu segundo trabalho no qual foi utilizado cerca de 80% dos recursos colocados aqui no site, obrigado a todos…

  • Rodrigo disse:
    em 7 de março de 2011

    vlw eu tava montando esse
    var validEmailRegExp:RegExp = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/;
    trace( validEmailRegExp.test( “sssw@ilson.com.br” ) );
    e acabei com dificuldade em tratar a saida true e false; nem liga coisa de novato

  • wagner disse:
    em 12 de setembro de 2011

    ola, funciona legal se estiver na cena principal,, mas agora, a duvida:

    como faço parar funcionar estando dentro de um movieclip ?

  • Igor Amendola disse:
    em 22 de setembro de 2011

    wagner, desculpe pela demora…
    Vc deverá exportar esse MovieClip pra ActionScript (pelas propiedades dele na biblioteca) e escolher um nome de classe. Esse nome de classe vc pode definir como Form pra nao ter q modificar o codigo, ou usar outro nome (neste caso deverá substituir o novo nome pelo Form no codigo).

  • wagner disse:
    em 26 de setembro de 2011

    Muito obrigado igor, e para quem esta tendo problema com a locaweb (hospedagem windows), utilizem este cabeçalho abaixo:

    $cabecalho = "MIME-Version: 1.0\r\n";
$cabecalho .= "Content-type: text/html; charset=utf-8\r\n";
$cabecalho .= "From: "."$nome"." <"."$recipient".">\r\n";
$cabecalho .= "Return-Path: <"."$recipient".">\r\n";
$cabecalho .= "Reply-To: <"."$email".">\r\n
  • Pete disse:
    em 29 de setembro de 2011

    Olá Igor!

    muito obrigado pela ajuda!
    sou novato no assunto, montei o conteúdo do site em um swf, e meu campo de comfirmação está no mesmo frame que todo o conteúdo do meu formulário, e percebi que você colocou a confirmação em outros frames, como ficaria no meu caso.

  • Igor Amendola disse:
    em 29 de setembro de 2011

    olá, Pete!
    obrigado pela visita e pelo teu comentario!

    o q vc poderia mudar seriam estas linhas:

    52
53
54
55
56
57

    			function loaderComplete(e:Event){
				gotoAndStop(2)
			}
			function loaderError(e:IOErrorEvent){
				gotoAndStop(3)
			}

    a funçao loaderComplete indica o q acontecerá qnd o email for enviado corretamente, e a funçao loaderError indica o q acontecerá se ocorrer algum erro. entao, no teu caso vc pode mudar ambos gotoAndStop() e no lugar colocar o codigo do q vc quer q aconteça, o qual depende da estrutura do teu projeto, por isso nao posso te dar uma resposta exata. mas é ai q vc deverá mexer.

  • Rodrigo disse:
    em 13 de outubro de 2011

    Bacana deu uma atualizada neste formulário e validou os campos mais uma vez, valew!!!

  • Marcos disse:
    em 13 de outubro de 2011

    Teria uma dica pra validar campos de telefone para aceitar somente números e traços…

  • Igor Amendola disse:
    em 13 de outubro de 2011

    Rodrigo, obrigado a vc por continuar nos visitando!

    -

    E Marcos, vc pode usar a propiedade ‘restrict’ da classe TextField:
    http://help.adobe.com/pt_BR/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#restrict
    Ou seja, digamos q teu campo de texto tem nome de instancia ‘telefone’, vc deverá usar:

    telefone.restrict = "0-9 \\-"

    porém, se quiser especificar o formato, precisará trabalhar com a classe RegExp.
    valeu!

  • Matheus Mariano disse:
    em 23 de outubro de 2011

    Olá Igor,
    Ótimo tutorial! Ajudou bastante.
    Mas acho que você poderia resumir um pouco mais essa parte do “utf8_decode”, colocando no início o código:

    $_POST = array_map(“utf8_decode”,$_POST);

    Assim ele aplicaria o “utf8_decode” à todos os elementos do Array “Post”.
    Até a próxima ;)

  • Igor Amendola disse:
    em 26 de outubro de 2011

    Obrigado, Matheus… pela visita e pela dica no comentario!
    Eu nao conhecia essa funçao. Alias, sei pouco de PHP. Mas já vi como funciona e é bem util. Por enquanto, deixarei como está, porém tenho planejado atualizar outros detalhes neste post e daí atualizaria tudo junto.
    Obrigado mais uma vez!

  • controle da missao disse:
    em 7 de janeiro de 2012

    otimo tutorial….mas a gora como eu coloco ele em uma scene minha?

  • Igor Amendola disse:
    em 12 de janeiro de 2012

    controle de missao…
    esse tutorial explica como usá-lo na scene principal… mas se vc quer ter a opçao de usa-lo como objeto independente, use-o como MovieClip… já citei anteriormente em outro comentario:
    “Vc deverá exportar esse MovieClip pra ActionScript (pelas propiedades dele na biblioteca) e escolher um nome de classe. Esse nome de classe vc pode definir como Form pra nao ter q modificar o codigo, ou usar outro nome (neste caso deverá substituir o novo nome pelo Form no codigo)“.
    espero ter resolvido a duvida e obrigado pelo comentario!

Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Spam protection by WP Captcha-Free