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.
16 respostas ↓
1 Fabio Alexis // Jan 21, 2009 at 10:40 pm
Olá Tiago Braga,
Boa Noite
Como eu poderia fazer para carregar um jpg externo (após click no botão) dentro de uma movieclip que se ajustaria ao tamanho do jpg?
Deixa eu explicar melhor, preciso que esse jpg carregue em um movieclip com o fundo branco e com um dropshadow, para que o jpg não carrege “seco” em cima da interface.
Conseguiu entender?rs
Obrigado,
2 Luiz Carlos // Jan 23, 2009 at 11:42 am
Opa é ai Thiago bom d+?
Esse tutorial ficou sensacionaaal cara valeu mesmo vai ser de grande ajuda…
3 Tiago Braga // Jan 23, 2009 at 11:53 am
Fábio, vc pode utilizar a classe BlurFilter para fazer a sombra, porém você terá que adicionar o filtro no evento onLoadInit. Pq a imagem só irá aceitar o filtro assim que ela esteja totalmente carregada.
No tutorial foi mostrado o evento onLoadProgress. O procedimento para o evento onLoadInit é o seguinte:
Código completo:
Deu para entender?
Até
4 Fabio Alexis // Jan 26, 2009 at 9:59 am
Olá Thiago, obrigado pela resposta. Coloquei o drop dessa maneira:
import flash.filters.*;
var dropshadow:DropShadowFilter = new DropShadowFilter();
dropshadow.color = 0×000000;
dropshadow.alpha = .40;
dropshadow.blurX = 10;
dropshadow.blurY = 10;
dropshadow.distance = 3;
dropshadow.angle = 45;
mclListener.onLoadInit = function(zoom_mc:MovieClip) {
zoom_mc.filters = [dropshadow];
};
Funcionou perfeitamente, só que eu queria que esse loadclip, aparece com alpha e não de uma forma “seca”, saco?
vlw
5 Rodrigo // Jan 26, 2009 at 2:58 pm
blz Fabio?
Atualiza seu onLoadInit pra esse:
Abraços.
6 JORGE // Jan 30, 2009 at 2:32 pm
DICA EXELENTE
MUITO BOM
UM ABRAÇO
JORGE
7 André // Mi 5, 2009 at 9:22 am
eae,beleza?
tem como fazer um esquema de quando carregar a imagem externa jogasse ela em dois mcs diferentes?
valeeu abraços
8 Gabriel Lau // Mi 5, 2009 at 4:25 pm
Olá Thiago, achei muito bom o seu post… eu estava procurando a tempos algo parecido com isso…
Mas estou com uma dúvida… como que eu poderia fazer para adcionar botoes de paginação ao filme principal…
tipo: eu queria botoes de (um, dois, tres e quatro, por exemplo) e ao clicá-los… ele iria para o seu respectivo filme…
9 Gabriel Lau // Mi 5, 2009 at 5:29 pm
mais uma coisa… como eu poderia usar preloaders em cada swf externo… eu tentei usar o comando
[code]this._lockroot=true;[/code]
colocando o conteudo dento de outro mc… mas ele ignora esse meu swf… e soh lê os outros…
10 Junior // Mi 12, 2009 at 1:35 am
eu fiz e achei muito bom mas criei um album comuma lista de miniaturas que chamam a grande no mesmo lugar mas fica uma em cima da outra, como posso chamar uma imagem por cima da outra sem ordem lógica, apenas clickar e aquela em questão aparecer por cima das outras?
Agradeço des de já. =]
11 Denis // Jun 4, 2009 at 11:00 pm
Oi Tiago,
Muito obrigado pelas dicas! Eu usava loadmovie e realmente moviecliploader é bem melhor!
Uma pergunta.. Sabe me dizer se tem como saber a hora que termina uma animação em swf externa? onLoadComplete nao seria porque esse listener só funciona quando termina de carregaqr e nao de executar. Estou quebrando a cabeça com isso e nao consigo resolver..
Detalhe: Não quero colocar nenhum tipo de comando no swf externo, apenas por listener do flash principal.
12 Tiago Braga // Jun 7, 2009 at 10:07 pm
Então Denis, acho que não tem como! Como vc mesmo citou no “detalhe”, teria que colocar uma variável por exemplo no final do swf puxado para verificar se animação terminou.
Até
13 Denis // Jun 13, 2009 at 11:54 pm
Ok Thiago,
Então acho que vou para de tentar mesmo procurar uma solução.. As únicas soluções que encontrei foi colocar uma variável verificando o final do flash e usando “setTimeout”, mas não ficou muito bom..
Mesmo assim obrigado pela opinião!
Abrs.
14 Denis // Jun 14, 2009 at 12:27 am
Desculpe o post repetido, mas é que fiquei na duvida.. Com “onLoadInit” não funciona o que quero fazer?
15 Gabriel Lau // Jul 28, 2009 at 4:27 pm
Olá Tiago, como eu poderia fazer para adicionar botões de paginação (com os numeros de arquivos que eu tenho para serem carregados por ele)??
O que eu tenho que alterar no código???
16 Luis // Set 28, 2009 at 4:56 pm
Tudo bem Tiago, muito bom seu tutorial !mas como eu poderia fazer para colocar botões anterior e proximo para controlar a navegação de varias fotos (q são mc’s com efeito alpha) utilizando esse carregamento externo? acho q seria bem interessante. valeu
Faça um comentário