Tutorial: Radio e check em Flash

Esse tutorial é mais um da serie para demonstrar o uso da class FormUp.Vamos fazer um simples formulário de cadastro
à mão, com nossas próprias animações.

OBS: Escrevi o tutorial usando o Flash 8, para funcionar com AS2. A versão da class para AS3 ainda está sendo revisada, postarei novidades.

![Update] Agora com ASP

Agora, também coloquei o código em ASP para o _serverFile, especialmente para Lajus que precisava bastante. Para funcionar é necessário que o servidor dê suporte ao objeto Persits.MailSender que é bastante comum nos servidores por aí. Mas se seu servidor não possuir, procure saber qual objeto eles dispobilizam e leia a documentação. Não deve ser nada muito diferente disso.

Resumo - O que teremos que fazer

Criar um novo .FLA em qualquer tamanho e "desenhar" o formulário de (cadastro por email) com seguintes itens:

Campos do formulário (nome. email, ddd, telefone, sexo, musica)
Botão e animação para radio
Botão e animação para check
Botão de Enviar
Caixa de texto para status

Depois disso, criaremos um arquivo server-side (PHP no caso) que irá receber e enviar os dados para um e-mail qualquer.

Veja o exemplo funcionado.

Começo: Abra o Flash, crie um novo documento em AS2. Pressione CTRL+J e modifique o tamanho do Stage. Eu criei um com 560x360px.

	Crie um campo (retângulo) como prefirir, e um text static, apenas parar servir de label para o campo. Faça isso para todos os demais campos. OBS: Para criar campos, deve-se seguir uma regra simples: Todos sempre serão MovieClips (com qualquer instância) com um text dentro que estará instanciado como field. Isso é importante para que a Class, trate os campos de uma maneira genérica.

	Em seguida, crie um text do tipo InputText, e estancie-o como field Depois disso, selecione o inputText (field) e converta em MC pressionando F8. Duplique esse MovieClip posicionando de acordo com os campos, e estancie-os com os nomes dos campos a serem enviados.

	Crie agora um MovieClip que fará o papel de radioButton, desenhe um shape qualquer e converta em MC. Rádio e Check não precisam do inputText (field), crie apenas a animação que deseja que aconteça quando um deles for marcado. E também a animação para quando tiver que ser desmarcado.

	Você não precisa digitar nenhuma linha de código dentro dos rádios e checks, apenas faça a animação e defina as flags (labels) dos frames sinalizando seu estado. No estado de desmarcado escreva unchecked e checked para o estado de clicado. Não dê stop(); a class tratará radio e checks automaticamente.

	Faça o mesmo para o campo tipo de música, crie um shape para representar o check faça sua animação e coloque suas flags (labels).

	Depois de criar 1 radio e 1 check, duplique-os (CTRL-D) pois o seu funcionamento será o mesmo, se prefirir pode criar diferentes animações paras as opções. Estancie-os seguindo uma regra simples, no exemplo, "tipo de música" é um campo com opções, portanto estancie-os com o nomedocampo_valor. Ex: sexo_f Faça isso para todas as opções.

	Depois disso, crie um MC que servirá de botão para submeter o formulário, estancie-o como btSend Crie também uma caixa de texto dinâmica para usarmos como status de nosso formulário.

Tudo bunitinho, mas precisamos botar para funcionar. CÓDIGO! Antes de comerçar a escrever, faça o download da última versão da FormUp. Será um arquivo .zip e dentro dele uma pasta chamada FlashForm, descompacte-a junto ao seu .FLA Lembre-se: A class não precisa estar junto com os swfs, ela é usada somente no momento de render e compilação do SWF.

Agora crie uma nova layer, abra o painel de action e digite o seguinte código nela: import FlashForm.FormUp; var contato:FormUp = new FormUp(); contato._arrayField[0] = {mc:'nome', required:true}; contato._arrayField[1] = {mc:'email', fType:'email', required:true}; contato._arrayField[2] = {mc:'ddd', fType:'ddd', autoTab:true, errorFormat:function () { this.nextFrame(); }}; contato._arrayField[3] = {mc:'telefone', fType:'fone', errorFormat:function () { this.nextFrame(); }}; contato._arrayField[4] = {mc:'sexo', fType:'radio', options:'m,f'}; contato._arrayField[5] = {mc:'musica', fType:'check', options:'rock,pop,tecno,samba'}; contato._form = this; contato._serverFile = 'cadastro_email.php'; contato.onSend = function() { mcStatus.text = 'Aguarde, enviando...'; this._afterSend.ready = true; }; contato.onError = function(arr) { mcStatus.text = 'ATENÇÃO! Preencha os campos corretamente.'; for (var i in arr) { var mc = arr[i].mc; mc.nextFrame(); mc.field.onSetFocus = function() { this._parent.prevFrame(); }; } }; contato.onComplete = function() { mcStatus.text = 'Sua mensagem foi enviada. Obrigado, entraremos em contato.'; }; contato.init(); Pressione CTRL+ENTER e se correu tudo certo já estará quase pronto. Falta uma última parte.
Definimos a propriedade _serverFile com um arquivo PHP chamado 'cadastro_email.php', mas ainda não criamos.
Abra seu editor de PHP e digite o código: <?php $corpo ="Nome: ". $_REQUEST["nome"]."<br/>"; $corpo .="E-mail: ". $_REQUEST["email"]."<br/>"; $corpo .="DDD-Telefone: ". $_REQUEST["ddd"].' - '.$_REQUEST["telefone"]."<br/>"; $corpo .="Sexo: ". $_REQUEST["sexo"]."<br/>"; $corpo .="Tipo de música: ".$_REQUEST["musica"]."<br/>"; $headers = "Content-type: text/html; charset=iso-8859-1\n"; $headers .= "From:".$_REQUEST["email"]."\n"; $headers .= empty($_REQUEST["email"]) ? "" : "Reply-to:".$_REQUEST["email"]."\n"; $subject = "FormUp - formulario exemplo"; $to = "seu@email.com"; mail($to, $subject, $corpo, $headers); exit("&finish=ok"); ?>
Observe que estou printando o retorno que a FormUp precisa: &finish=ok A classe usa essa variável para saber que o tramite de envio foi concluído. Caso esteja usando ASP, use esse código para enviar o e-mail com Persits. Importante! Esse é um exemplo de form com server-side lembre de testa-lo no seu ambiente web (intranet), se preferir pode testar direto do Flash usando: _serverFile = 'http://localhost/tutorial_radio_check/cadastro_email.php'; Baixe os arquivos usados nesse exemplo. Lembre-se de baixar a class separadamente.