Autor: Rodrigo Gonçalves

Flash CS3 ou superior
Package: flash.net
Classe: public final class URLRequest,
Classe: public class URLLoader,
Classe: public dynamic class URLVariables,

Versão AS: ActionScript 3.0
Player: Flash Player 9 ou superior

Dificuldade: Básico.
Obs: Para um bom aproveitamento deste artigo é interessante ter lógica de programação, noções básicas para leitura de sintaxe ActionScript 3.0 e PHP.

Fala galera, tranquilo?!

Vamos ver uma das maneiras de criar um formulário de e-mail utilizando AS3 em conjunto com um script PHP.
O exemplo mostrado é relativamente simples, mas acredito ser um bom ponto de partida pra começar. Depois você mesmo poderá incrementá-lo conforme achar necessário.
Pra fazer os testes, você precisa de um servidor para hospedar seu arquivo PHP. O seu servidor deve ter suporte pra função mail() do PHP.

No final deste artigo, está disponível para download o mesmo exemplo abordado aqui para testes.

Indice:

1. Introdução;
2. Criando os objetos na tela;
3. Organização do código;
> 3.1. Divida uma grande tarefa em pequenas tarefas;
> 3.2. Nomes de variaveis, funções e comentários de código;
4. Inserindo código AS3;
6. Criando script PHP;
7. Download.

1. Introdução

No Flash, basicamente, para este exemplo do formulário, além de utilizarmos um script PHP que irá "interagir" com Actionscript, precisamos utilizar 3 classes mais notáveis no AS3 que fazem parte do Package flash.net, sendo elas:
- URLRequest(), é responsável por armazenar endereços externos. No nosso caso, será um arquivo PHP;
- URLLoader(), é responsável por “recuperar” dados/informações externas. A qual iremos manipular informações externas com uso de Eventos.
- URLVariables(), criamos "variáveis" que recebem o conteúdo digitado nos campos de textos do Flash. Com isso, conseguimos comunicar com o arquivo PHP e enviar as informações para o destinatário de e-mail.

E de quebra, pra incrementar um pouco mais a funcionalidade do nosso Formulário. Utilizaremos a classe Timer(), em que a sua aplicação é muito semelhante com as funções setInterval() e setTimeout(). No nosso caso, a classe Timer() simplesmente irá chamar/executar uma determinada função depois de um tempo específico estipulado. Veremos isso mais adiante.

2. Criando os objetos na tela

É possível também criar esses objetos usando apenas código AS3. Mas como nosso objetivo aqui será apenas enviar e-mail, e dar ênfase ao código que tem maior importância para não fugir do nosso foco. Para esse exemplo estamos criando os objetos visuais (caixa de textos e botão) manualmente usando as ferramentas no ambiente do Flash.

Dica: É sempre bom criarmos um hábito de organização com web. No Flash não é diferente e você vai agradecer você mesmo mais tarde por lembrar de ter feito essa organização. Sugiro criar uma pasta para guardar todos seus arquivos Flash e PHP.

Com o Flash aberto, crie um arquivo novo documento: versão Actionscript 3.0.

Para organizar os conteúdos crie 2 camadas, sendo elas:
- Actions
- Objetos

Imagem 1: Criando camadas para organizar os objetos.

Na camada Objetos será destinada para os objetos visuais (caixa de textos e botão).
Iremos criar 5 campos de texto, sendo:
- 4 deles serão dinâmicos do tipo "input Text", com instâncias na seguinte ordem: nomeTxt, emailTxt, assuntoTxt e mensagemTxt;
- 1 campo de texto do tipo Dynamic Text com nome de instância avisoTxt, que será destinado para mostrar os avisos ao usuário sobre o que acontece quando ele tenta enviar os dados.
- 1 botão com nome de instância enviarBtn, que será responsável por enviar os dados.

Cada objeto estão organizados com seus respectivos nomes de instâncias. Repare também que todos os campos estão configurado pra aceitar apenas uma única linha (Single line). Apenas os campos mensagemTxt e caixa e avisoTxt devem ser configurado para aceitar mais de uma linha (Multiline), você confere essa configuração pelo painel de propriedades da caixa de texto.

Você poderá acompanhar na imagem 2 a seguir, na seguinte ordem:

- Campo Nome:
- Tipo: Input Text
- Instância: nomeTxt
- Aceitar quantas linhas: Single line

- Campo E-mail:
- Tipo: Input Text
- Instância: emailTxt
- Aceitar quantas linhas: Single line

- Campo Assunto:
- Tipo: Input Text
- Instância: assuntoTxt
- Aceitar quantas linhas: Single line

- Campo Mensagem:
- Tipo: Input Text
- Instância mensagemTxt
- Aceitar quantas linhas: Multiline

- Botão
- Tipo: MovieClip
- Instância enviarBtn

- Campo Aviso:
- Tipo: Text Dynamic
- Instância avisoTxt
- Aceitar quantas linhas: Multiline


Imagem 2: Criando os objetos e configurando.

3. Organização do código

Com os objetos criados e configurados, agora vem a parte mais legal. ActionScript. É ele que vai dar vida. Mas precisamos nos organizar e pensar no que fazer antes.
E aqui vai algumas dicas que me ajudam muito na hora de começar programar algo, e talvez esse método possa te ajudar também.

No começo, pode parecer que perdemos tempo tendo esses cuidados. Mas, acredite, vai facilitar a sua vida e de quem for trabalhar com você.

3.1. Divida uma grande tarefa em pequenas tarefas

No código a seguir, repere que foi criado várias funções dedicada para cada pequena tarefa. Isso facilita muito na organização, manutenção e reutilização de código. Pois, é muito mais fácil enfrentarmos algum problema e criar soluções pra eles, se antes dividirmos em pequenos pedaços e dedicando soluções por partes (criando funções específicas).

Por exemplo, quando queremos fazer uma "grande tarefa", como no nosso caso "enviar e-mail", se quebrarmos essa "grande tarefa" (grande função) em "pequenas tarefas" (funções dedicadas), BINGO! Ficará muito mais fácil de atingir seus objetivos passo-a-passo, além de te ajudar na organização e agilizar caso precise fazer manutenção ou melhorias futuramente.

3.2. Nomes de variaveis, funções e comentários de código

Não tenha medo também de dar nomes "grandes" pra funções e variáveis, desde que esses nomes sejam descritivas e tenha um padrão durante todo código. Nomes descritivos irão ajudar ter um código mais "auto-explicável" possível e tentar poupar comentários desnecessários.

O comentários também são bastante válidos para não só "documentar o seu código", mas pra te ajudar a lembrar a lógica do que o programa faz. Você não vai querer perder tempo e reaprender algo que você mesmo já fez. Ou quer?
Os comentários no código estão com objetivos mais "didáticos", mas sempre poderá melhorar pra não ser tão redundante na explicação, algo que o o próprio nomes das funções e variáveis já conseguem (e devem) explicarem por si só.

4. Inserindo o código AS3

Vamos ao código de fato.
O código está dividido por funções dedicadas pra cada pequena tarefa, brevemente comentado e auto-explicativo.
Na camada Actions, selecione o 1º e único frame, e abra o painel de Actions, atalho [F9], e insira o código:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

/* @Autor: Rodrigo Gonçalves [Rodrigo PiXEL]
 * @Créditos: www.AlvoWeb.com */
 
 
/***************************
 * VARIAVEIS
 * Criamos todas variaveis usadas durante o código
 ****************************/
 
var tempoMensagem:Timer; //intervalo entre mensagens de aviso
var variaveis:URLVariables; //receber dados no flash pra enviar pro script php
var urlPhp:URLRequest; //vai armazenar o arquivo php externo
var loader:URLLoader; //carregar e comunicar com arquivo php
 
//iniciamos o programa
init();
 
 
 
/***************************
 * FUNÇÕES
 * Toda mecânica está separada em pequenas funções
 ****************************/
 
//inicia e configura todo o programa
function init():void
{
	//habilitamos acentuação
	System.useCodePage = true;
 
	//limpamos todos os campos de texto antes de começar.
	limpaTodosCamposTextos();
 
	//cria o Timer com 3 segundos(3000 milesegundos) executa quandoTempoAcabar() apenas 1 vez.
	tempoMensagem = new Timer(3000, 1); 
	tempoMensagem.addEventListener(TimerEvent.TIMER, quandoAcabarTempo);
 
	//quando clicar no botão executa a função enviaMensagem();
	enviarBtn.addEventListener(MouseEvent.CLICK, quandoEnviarBtn);
}
 
 
//função de evento, executa a quando clicar no botao enviarBtn
function quandoEnviarBtn(e:MouseEvent):void
{
	verificaDadosAntesDeEnviar();
}
 
 
/* Verificar e se qualquer um dos campos estão vazios ou incorretos,
 * caso esteja errado, mostra mensagem de aviso.
 * Se não, no final envia começa enviar os dados...*/
function verificaDadosAntesDeEnviar():void
{
	if(nomeTxt.length < 3)
	{
		mostraMensagemAviso("Coloque um nome com pelo menos 3 letras");
	}
	else if(emailTxt.length == 0)
	{
		mostraMensagemAviso("Preciso do seu e-mail pra te responder.");
	}
	else if(emailTxt.text.indexOf("@") == -1 ||
			emailTxt.text.indexOf(".") == -1)
	{
		mostraMensagemAviso("Ops! Esse e-mail não é valido!");
	}
	else if(assuntoTxt.length == 0)
	{
		mostraMensagemAviso("Insira um assunto.");
	}
	else if(mensagemTxt.length == 0)
	{
		mostraMensagemAviso("Ahh! Não esquece da mensagem.");
	}
	else{ 
		enviaDadosParaPHP();
	}
}
 
 
//responsável por interagir informação do Flash com script PHP
function enviaDadosParaPHP():void
{
	mostraMensagemAviso("Enviando mensagem...");
 
	/* iniciamos e criamos variaveis dinamicas
	 * que recebem o conteúdo digitado nos campos do flash
	 * essas variáveis servirão de ponto entre o Flash e script PHP */
	variaveis = new URLVariables();
	variaveis.nomePhp = nomeTxt.text;
	variaveis.emailPhp = emailTxt.text;
	variaveis.assuntoPhp = assuntoTxt.text;
	variaveis.mensagemPhp = mensagemTxt.text;
 
	/* iniciamos variavel que tem o arquivo PHP
	 * devemos aplicar método POST de envio de dados
	 * e transmitimos os dados dos campos do Flash para o script PHP */
	urlPhp = new URLRequest("http://www.SEU_SITE_AQUI.com/mail.php");
	urlPhp.method = URLRequestMethod.POST;
	urlPhp.data = variaveis;
 
	/* iniciamos variavel responsável por "recuperar" dados/informações do PHP
	 * quando estiver completo o carregamento do arquivo PHP, executa a função que confirma envio.
	 * quando surgir erro durante o envio, executa a função que mostra mensagem de erro.
	 * e carregamos o arquivo PHP armazenado na variavel urlPhp */
	loader = new URLLoader();
 	loader.addEventListener(Event.COMPLETE, quandoEnviadoMensagem);
 	loader.addEventListener(IOErrorEvent.IO_ERROR, quandoHouverErroNoEnvio);
 	loader.load(urlPhp);
}
 
 
//Função de evento, mostra ao usuário que a mensagem foi enviada com sucesso.
function quandoEnviadoMensagem(e:Event):void
{
	mostraMensagemAviso("Mensagem enviada!");
	iniciatempoMensagemDeAviso();
	limpaTodosCamposTextos();
}
 
 
//Função de evento, mostra ao usuário que houve algum erro durante o envio.
function quandoHouverErroNoEnvio(e:IOErrorEvent):void
{
	mostraMensagemAviso("Ops! Surgiu erro! Tenta novamente.");
 	iniciatempoMensagemDeAviso();
}
 
 
//Função de evento do Timer, limpa o campo de aviso, função do Timer
function quandoAcabarTempo(e:TimerEvent):void
{
	mostraMensagemAviso("");
}
 
 
/* Limpa todos os campos de textos digitados pelo usuário
 * depois aplica foco do cursor de texto no campo nomeTxt */
function limpaTodosCamposTextos():void
{
	nomeTxt.text = emailTxt.text = assuntoTxt.text = mensagemTxt.text = "";
	stage.focus = nomeTxt;
}
 
 
/* Destinada pra enviar mensagem de aviso
 * e apaga esse aviso após 3 segundos usando timer.*/
function mostraMensagemAviso(texto:String):void
{
	avisoTxt.text = texto;
}
 
 
/* Destinado pra reiniciar e iniciar intervalo Timer
 * Pra não atropelar o tempoMensagem de cada mensagem de aviso que foi disparada antes*/
function iniciatempoMensagemDeAviso():void
{
	tempoMensagem.reset();
	tempoMensagem.start();
}

Terminamos nosso código AS3. Vamos agora para o script PHP.

5- Criando script PHP

Vamos criar o script PHP, que está brevemente comentado no próprio código. O script PHP faz comunicação com flash e recebe todas as variáveis dinâmicas que recebem valores dos campos de textos digitados pelo usuário dentro do Flash.
Abra um bloco de notas, ou seu editor de códigos, e salve este arquivo na mesma pasta do seu arquivo Flash. Dêmos o nome do arquivo de: mail.php

Insira o seguinte código PHP:

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

<?php
//coloque o email de destinatário:
$enviaPara = 'seu email aqui';
 
//Criamos variaveis PHP que recupera as Variaveis criadas no Flash
$campoNome = $_POST['nomePhp']; //retorna o valor digitado no campo "nomeTxt" do Flash
$campoEmail = $_POST['emailPhp']; //retorna o valor digitado no campo "emailTxt" do Flash
$campoAssunto = $_POST['assuntoPhp']; //retorna o valor digitado no campo "assuntoTxt" do Flash
$campoMensagem = $_POST['mensagemPhp']; //retorna o valor digitado no campo "mensagemTxt" do Flash
 
//Assunto padrão do seu e-mail
$subject = 'Essa mensagem veio do seu site';
 
//Monta o corpo da mensagem enviada
$mensagem = "Nome: ".$_POST['nomePhp']." \n";
$mensagem .= "E-mail: ".$_POST['emailPhp']." \n";
$mensagem .= "Assunto: ".$_POST['assuntoPhp']." \n\n";
$mensagem .= "Mensagem: \n". $_POST['mensagemPhp'];
 
//e-mail do remetente:
$mail_headers = 'From: '.$_POST['emailPhp'];
 
//envia o e-mail
mail($enviaPara, $subject, $mensagem, $mail_headers);
?>

Basta hospedar seu arquivo PHP em algum servidor e fazer os testes.

Obs: Lembra-se de informar o endereço do arquivo PHP no código AS. Importante também sempre fazer teste online com seus arquivos PHP e SWF no seu servidor web pra garantir que tudo esteja funcionando como esperado.

6 - Download
Download deste exemplo final.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Se você sempre desejou ter um link em sua página onde fosse possível mudar o estilo da mesma somente com um clique, então está lendo o post certo. Iremos aprender, utilizando a linguagem PHP, como é possível criar um link que permite o usuário escolher entre duas folhas de estilos. Sendo possível alterar totalmente o layout de uma página através do CSS, você poderá criar duas versões de um único site e ainda permitirá que o internauta escolha qual deseja visualizar. Isso tornará seu site um pouco mais interativo com o usuário.

A estrutura para tornar isso possível é simples, para tanto, é necessário noções de PHP e conhecimento de CSS. Para iniciarmos você terá que ter uma página pronta (óbvio, né?! rsrs), que eu chamarei de “minhapagina.php”, e duas folhas de estilos, no meu caso “folha01.css” e “folha02.css”.

A primeira alteração que vamos fazer no documento PHP será “linkar” uma das folhas de estilos a ele. Normalmente o link se dá pelo seguinte comando:

<link href="folha1.css" rel="stylesheet" type="text/css" />

Porém, para o trabalho que iremos realizar iremos utilizar:

<link href="<?php echo $padrao;?>" rel="stylesheet" type="text/css"  />

Agora iremos inserir todo o comando PHP. Será criada uma variável chamada “padrão” que irá receber a folha de estilo. Iremos atribuir a essa variável umas das folhas de estilos, a que irá ser carregada com a página. O seu estilo padrão. Em seguida, através da estrutura IF iremos realizar toda a mágica para que a alteração seja possível. Veja abaixo a estrutura comentada:

1
2
3
4
5
6

<?php $padrao="folha01.css"; //variável recebe o estilo padrão que será carregado 
	//isset verifica se a varíavel "estilo" foi criada e então...
	if( isset ($_GET['estilo'])) {
	   	$padrao = $_GET['estilo']; //... a variável "padrão" recebe o estilo escolhido 
	}
?>

Através da estrutura acima será feita toda a verificação para a mudança de estilo. Para finalizarmos, vamos criar os links para as folhas de estilo. Como você deve ter percebido no código PHP utilizamos o método GET, portando o link deve ser para a mesma página HTML (no meu caso minhapagina.html) utilizando o raciocínio do método GET:

1
2
3
4
5
6
7

<!-- 
estrutura de link para cada folha de estilo,
onde a variável "estilo" é igual ao nome
do arquivo a ser carregado
-->
<a href="minhapagina.php?estilo=folha01.css">Estilo 01</a>
<a href="minhapagina.php?estilo=folha02.css">Estilo 02</a>

Estando a variável “estilo” com o nome da folha a ser carregada, essa passa o nome do arquivo para a variável “padrão” que será responsável em informar, através daquela primeira linha de código que vimos, qual folha de estilo será carregada.

Então é isso, espero que tenha ajudado a quem possa interessar.

Até a próxima!

Reginaldo Lima
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.