Vous êtes sur la page 1sur 5

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 verso 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 formulrio de upload com os seguintes itens:

Campo de arquivo Label do campo Boto de procurar arquivo Boto 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).

Comeo: 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 (retngulo) como prefirir, em seguida crie um text do tipo Input Text, e estancie-o como field OBS: O nome de instncia dos campos de formulrios feitos com FormUp, devem seguir uma regra: Todos sempre sero MovieClips (com qualquer instncia) com um text dentro que estar instanciado como field.

Depois disso, selecione o retngulo junto com o text e converta em MC pressionando F8. Coloque qualquer nome para o smbolo, o nome de instncia pode ser qualquer um, mas voc deve lembrar pois iremos precisar. Nesse caso instancie como arquivo. OBS: Os nomes de instncia dos campos, so passados pelo n mc da propriedade _arrayField, esse nome que chegar ao server-side. Crie um MC que ir servir como o boto para procurar o arquivo de upload. D qualquer nome para o smbolo e instncia tambm. OBS: Podiamos definir a instancia desse MC como btBrowser, e crialo dentro do MC do campo, assim, a class reconheceria esse boto e no precisariamos declara-lo por cdigo. Faa o mesmo para o MC que ir fazer o papel de submeter o nosso formulrio de upload. Com qualquer nome de smbolo e instncia. OBS: Podiamos definir a instancia como btSend, assim, a class reconheceria esse boto e no precisariamos declara-lo por cdigo.

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 formulrio. Nesse caso chamei de txtStatus OBS: Podemos trabalhar em todos os eventos possveis durante um tramite de formulrio.

Agora vem a parte divertida. Vamos ao cdigo. Antes de comerar a escrever, faa o download da ltima verso da FormUp. Ser um arquivo .zip e dentro dele uma pasta chamada FlashForm, descompacte-a junto ao seu .FLA Lembre-se: A class no precisa estar junto com os swfs, ela usada somente no momento de render e compilao do SWF. Agora crie uma nova layer, abra o painel de action e digite o seguinte cdigo 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 no criamos. Abra seu editor de PHP e digite o cdigo: <?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 diretrio imagem/ Se preferir crie-a tambm, mas o mais importante desse cdigo o retorno que a FormUp precisa: &finish=ok A class usa essa varivel para saber que o tramite de envio foi concludo. 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.