Carregar imagem externa com MovieClipLoader

Dezembro 4, 2008 · 16 comentários

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.

movieclip_vazio.png
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).
nome_mc_vazio.png
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.

movieclip_x_y.png
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.
nome_mc.png
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);

código.jpg
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…

código2.jpg
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

Creative Commons License
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.

Categoria: ActionScript

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:

    1
    2
    3
    4
    5
    6
    
    objOuvinte.onLoadInit = function(mc:MovieClip){
    /*O parâmetro MC é justamente o movie clip container, aquele que vai receber a imagem. Então para vc adicionar o filtro BlurFilter seria assim*/
     
    mc.filters = [blur];
     
    }

    Código completo:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    import mx.filter.BlurFilter;
     
    var blur:BlurFilter = new BlurFilter(10,10,3);
    //O valor 10 seria blurX e blurY e o 3 é a qualidade do desfoque.
     
    objOuvinte.onLoadInit = function(mc:MovieClip){
     
    mc.filters = [blur];
     
    }

    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:

    mclListener.onLoadInit = function(zoom_mc:MovieClip) {
    	var valor:Number = 10; //velocidade
    	zoom_mc._alpha = 0; //define alpha zero
     
    	//verifica constantemente 
    	zoom_mc.onEnterFrame = function(){
    		if(valor < 100){
    			valor += 10;
    			zoom_mc._alpha = valor;
    			trace("+ 10% de alpha");
    		}
    		else {
    			zoom_mc._alpha = 100;
    			delete zoom_mc.onEnterFrame; //para de verificar
    			trace("acabou, alpha 100%");
    		}
    	}
    	zoom_mc.filters = [dropshadow]; //aplica filtro
    	trace("carregou imagem, está no palco!");
    }

    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

WordPress database error: [Table 'wp_cas_count' is read only]
INSERT INTO wp_cas_count (id) VALUES (NULL)

WordPress database error: [Table 'wp_cas_image' is read only]
INSERT INTO wp_cas_image (id, createtime, word) VALUES (0, 1280477816, 'rent')

WordPress database error: [Table 'wp_cas_count' is read only]
DELETE FROM wp_cas_count WHERE id = 0

*
Para validar seu comentario, por favor digite a palavra que aparece na imagem.
Voce pode escutar o som desta palavra caso julgue necessario. Clique na imagem para ouvir.