Tutorial: Upload em Flash

Esse é um tutorial para demonstrar o uso da class FormUp, como já falamos o que é a classe, vamos deixar essa parte
de lado e partir para o que interessa.

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

Resumo - O que teremos que fazer

Criar um novo .FLA em qualquer tamanho e "desenhar" o formulário de upload com os seguintes itens:

Campo de arquivo
Label do campo
Botão de procurar arquivo
Botão de Enviar
Barra de progresso
Caixa de texto para status

Depois disso, criaremos um arquivo server-side (PHP no caso) que irá receber e salvar esse upload (imagem no exemplo).

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

	Crie seu campo (retângulo) como prefirir, em seguida crie um text do tipo Input Text, e estancie-o como field OBS: O nome de instância dos campos de formulários feitos com FormUp, devem seguir uma regra: Todos sempre serão MovieClips (com qualquer instância) com um text dentro que estará instanciado como field.

	Depois disso, selecione o retângulo junto com o text e converta em MC pressionando F8. Coloque qualquer nome para o símbolo, o nome de instância pode ser qualquer um, mas você deve lembrar pois iremos precisar. Nesse caso instancie como arquivo. OBS: Os nomes de instância dos campos, são passados pelo nó mc da propriedade _arrayField, é esse nome que chegará ao server-side.

	Crie um MC que irá servir como o botão para procurar o arquivo de upload. Dê qualquer nome para o símbolo e instância também. OBS: Podiamos definir a instancia desse MC como btBrowser, e cria-lo dentro do MC do campo, assim, a class reconheceria esse botão e não precisariamos declara-lo por código.

	Faça o mesmo para o MC que irá fazer o papel de submeter o nosso formulário de upload. Com qualquer nome de símbolo e instância. OBS: Podiamos definir a instancia como btSend, assim, a class reconheceria esse botão e não precisariamos declara-lo por código.

	Agora crie uma barra para representar o progresso do upload. Estancie como quizer, usei barraLoad. OBS: Usaremos fileProgress da propriedade _callBackFile que recebe os eventos de upload para fazer isso.

	Depois disso, criaremos um text para mostrar o status do nosso formulário. Nesse caso chamei de txtStatus OBS: Podemos trabalhar em todos os eventos possíveis durante um tramite de formulário.

Agora vem a parte divertida. Vamos ao 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 tutorial:FormUp = new FormUp(); tutorial._form = this; tutorial._btSend = btEnviar; tutorial._btBrowser = btProcurar; tutorial._serverFile = 'upload_arquivo.php'; tutorial._arrayField[0] = {mc:'arquivo', fType:'file', required:true, msg:'Selecione um arquivo!'}; tutorial._arrayFileType[0] = {description:"Imagem JPG (.jpg)", extension:".jpg; .jpeg"}; tutorial._arrayFileType[1] = {description:"Imagem GIF (.gif)", extension:".gif; .gif"}; tutorial._callBackFile = {fileProgress:function (arquivo, carregado, total, percentual) { barraLoad._xscale = percentual; }}; tutorial.onStart = function() { barraLoad._xscale = 0; }; tutorial.onError = function(arr) { txtStatus.text = arr[0].msg; }; tutorial.onComplete = function() { txtStatus.text = 'Sua imagem foi enviada!'; barraLoad._xscale = 0; }; tutorial.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 'upload_arquivo.php', mas ainda não criamos.
Abra seu editor de PHP e digite o código: <?php $dir = "imagem/"; move_uploaded_file($_FILES['Filedata']['tmp_name'], $dir.$_FILES["Filedata"]["name"]); exit("&finish=ok"); ?>
Observe que estou jogando as imagens dentro do diretório imagem/ Se preferir crie-a também, mas o mais importante desse código é o retorno que a FormUp precisa: &finish=ok A class usa essa variável para saber que o tramite de envio foi concluído. 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_upload/upload_arquivo.php' Baixe os arquivos usados nesse exemplo. Lembre-se de baixar a class separadamente.

Colabore também

Faça testes com a class e deixe seu post no meu blog assim vamos conversando e acertando os detalhes.

Onde estão usando?

Se você está usando em algum projeto publicado, escreva o endereço aqui:

formUp