Autor: Tiago Braga (Xavrim)

Flash 8, CS3 ou CS4
Classe: MovieClipLoader
Versão AS: Actionscript 2.0
Dificuldade: Básico/Intermediário

Obs: Para um bom aproveitamento é interessante ter conhecimento básico de Actionscript e lógica de programação.

E aí galera, tudo tranqüilo?
Bom, primeiro agradeço ao Rodrigo Gonçalves e a equipe AlvoWeb por deixarem colaborar com esta comunidade.
Segundo, estarei abordando um assunto de muita serventia para os "flasheiros", que é carregar um arquivo externo, como uma imagem (JPG, PNG, GIF) ou swf.

Neste primeiro tutorial, estarei falando sobre a classe MovieClipLoader do AS2 e porque utilizar ela em vez do famoso método loadMovie(), e em breve, estaremos fazendo um exemplo em outros tutoriais montando um "site" inteiro com a classe MovieClipLoader.

No final deste tutorial temos um arquivo disponível deste exemplo para download.

Mãos a obra, melhor, dedão no código…

Crie um novo arquivo Flash com 500×400.
Crie duas camadas. A primeira com o nome de arquivo_externo e a outra com o nome de AS.
Bloqueie a camada AS e logo em seguida criem um Movie Clip vazio. Como mostra na imgem 1 a seguir.

Imagem 1: Menu, Insert > New Symbol (Ctrl + F8), criando um Movie Clip vazio.

Na próxima janela (Create New Symbol), coloque o nome do Movie Clip de alvo (Em nível de organização da library).

Imagem 2: Janela Create New Symbol, configurando símbolo para tipo(type) MovieClip e com nome alvo.

Você entrará no Movie Clip Alvo. Volte ao nível raiz (SCENE). Abra a library e localize o Movie Clip alvo. Arraste ele para o palco e logo em seguida posicione na posição x=0 e y=0.

Imagem 3: Alvo vazio no stage.

Selecione o Movie Clip vazio. Abra o painel properties(Ctrl + F3) e no campo <Instancie Name>, coloque o nome de alvo_arquivo.

Imagem 4: Painel Properties, inserindo nome de intância no Movie Clip vazio.

Agora que temos toda está estrutura feita, clique no frame 1 da camada AS, abra o painel Actions (F9) e insira o seguinte código:

1
2
3
4

var objOuvinte:Object = new Object();
var objMCLoader:MovieClipLoader = new MovieClipLoader();
objMCLoader.loadClip("imagem/imagem.jpg",alvo_arquivo);
objMCLoader.addListener(objOuvinte);

Imagem 5: Painel Actions, Inserindo código no frame 1 na camada AS.

Salve seu arquivo dentro de uma pasta.
Ex.:
- Nome pasta: Tutorial_mcLoader
– Nome do arquivo: MovieClipLoader.
Dentro da pasta Tutorial_mcLoader, crie outra pasta chamada imagem. Seu diretório terá está ordem:

Tutorial_mcLoader <- Pasta.
Arquivo_fla.fla <- Arquivo salvo dentro da pasta.
Arquivo_fla.swf <- Arquivo que será criado quando você apertar CTRL+ENTER.
imagem <- Pasta.
imagem.jpg <- uma imagem que está dentro da pasta imagem.

Execute o projeto -> CTRL + ENTER

Linha 1: Objeto do tipo genérico que irá executar os eventos da classe MovieCLipLoader.
Linha 2: Objeto do tipo MovieClipLoader, criado para acessar os métodos e propriedades da classe.
Linha 3: Está linha é o que esperamos fazer, carregar a imagem.
Obs.: Meu arquivo *.fla está salvo na mesma pasta da pasta imagem (Pasta: Tutorial_mcLoader).

Linha 4: addListener do objeto objMCLoader é o objeto genérico (objOuvinte). Mais detalhes continue o tutorial.
Quando executado o arquivo, aparece à imagem, tudo tranqüilo até ai.  Aí você me pergunta. Por que você fez isso tudo se com loadMovie eu só preciso fazer isso alvo_arquivo.loadMovie("imagem/goku.jpg",this);? Respondo-te fazendo uma pergunta. Quero agora que apareça aquela famosa barra de carregando ou até mesmo uma caixinha aparecendo à porcentagem. Como faço isso? Aí que vem a grande vantagem. Com a classe MovieClipLoader, além de ser mais organizado, não vou precisar ficar calculando muito, com alguns passos irei executar aquilo que quero.

Então vamos lá, faça aparecer a porcentagem! Então tá, vou fazer agora…

Imagem 5: Painel Actions, inserindo código no frame 1 na camada AS.

A linha 9 que era linha 4: Toda vez que iniciar um carregamento, o evento onLoadProgress será executado. Na frente do nome onLoadProgress está assim: objOuvinte.onLoadProgress, então podemos concluir que toda vez que carregamos uma imagem, o objeto MovieClipLoader irá executar onLoadProgress, pois adicionamos o objeto genérico (objOuvinte) como ouvinte.

Linha 4 e 5: No evento onLoadProgress foi atribuído uma função. Está função tem 3 parâmetros.
- MC: que é seu Movie Clip vazio.
- btLoader: é o total de bytes que foram carregados até o momentos.
-
btTotal: é o total de bytes que seu arquivo tem.

O código completo deste exemplo ficou da seguinte forma:

1
2
3
4
5
6
7
8
9

var objOuvinte:Object = new Object();
var objMCLoader:MovieClipLoader = new MovieClipLoader();
 
objOuvinte.onLoadProgress = function(mc:MovieClip, btLoader:Number, btTotal:Number){
	trace("MC é o Movie Clip vazio "+mc+" ---- "+(btLoader/btTotal)*100 )
}
 
objMCLoader.loadClip("imagem/imagem.jpg",alvo_arquivo);
objMCLoader.addListener(objOuvinte);

Teste seu arquivo. Aperte CTRL+ENTER 2 vezes para simular um "download".

A classe MovieClipLoader te oferecer outros tratamentos(eventos), como:
onLoadComplete <- Quase a mesma coisa do onLoadInit, mas quando se usa uma máscara no objeto carregado, este método não irá funcionar.
onLoadInit <- Quando o objeto for totalmente carregando.
onLoadError <- Verifica erros existentes no carregamento.
onLoadStart <- Executado quando começar a carregar.

Para mais informações, procure pela classe MovieClipLoader para AS2 no help do flash (F1).

Meu primeiro tutorial vai ficando por aqui, mas dá próxima, montaremos um site com carregamento externo de arquivo com a classe MovieClipLoader.

Download - exemplo 1 com a classe MovieclipLoader
Download - exemplo 2 com a classe MovieclipLoader

Até.

Tiago Braga (xavrim)
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.