Autor: Rodrigo Gonçalves

Flash CS3 Professional
Versão AS: ActionScript 3.0
Versão do Player: Flash Player 9
Package: flash.display
Classe: public class Loader
Dificuldade: conhecimentos básicos de funcionamento do Flash, Actionscript 3.0 e lógica de programação.

Fala galera, tranqüilo?!
Já vimos como podemos carregar uma imagem externa(jpg, gif, png ou swf) no AS3. Carregar imagem externa com Classe Loader AS3.
Agora, vamos ver como podemos fazer a manipulação do conteúdo carregado externamente.
Pra quem já conhecia o a função loadMovie() a classe MovieClipLoader() na versão AS2. Agora passamos à utilizar a Classe Loader() e URLResquet() no AS3 para carregar imagens externas. Para conseguirmos manipular o conteúdo externo precisamos utilizar os Eventos que recebem informações sobre o carregamento externo vinda da propriedade contentLoaderInfo da classe Loader(). As classes de Eventos também podem ser aplicadas para carregamento de dados externos(ex: arquivos Txt, XML, HTML, entre alguns outros). Mas falaremos sobre carregamento de imagens/filmes externos.

Download de um exemplo simples sobre carregamento externo com uso de Eventos.

Quando e pra quê aplicar Eventos em arquivo externos?

- Alguns exemplos:
-Pode ser útil para informar ao usuário do que acontece sobre o conteúdo externo que está sendo carregado naquele momento.

-Poderá também executar/chamar alguma função no começo do carregamento, durante ou após concluir o mesmo, e ainda informar ao usuário caso eventualmente houver erros no carregamento deste conteúdo.

-O arquivo principal(swf) fica mais "leve" por não precisar conter imagens internamente em seu arquivo swf e facilita manutenção. Os arquivos externos, são carregados somente quando solicitados(Eventualmente) pelo programa ou pelo usuário.

Manipulando carregamentos externos com Eventos

Para manipular o conteúdo carregado externamente, podemos usar a propriedade chamada contentLoaderInfo da classe Loader(). Quando utilizado, esta propriedade retorna um objeto da classe LoaderInfo().

Antes de entendermos o código, vamos ver como fica a sintaxe para entender melhor sua aplicação:

A propriedade Loader.contentLoaderInfo "dispara" informações e o "Ouvinte de Eventos"( addEventListener() ) verifica estas informações recebidas e quando ocorrer o tipo de evento definido neste ouvinte, executa/chama a função. Vejamos:

objeto_Da_Classe_Loader.contentLoaderInfo.addEventListener( TipoClasseEvento.PROPRIEDADE_EVENTO, nomeDaFuncao );

Para cada Evento devemos ter ou criar uma função que será chamada quando ocorrer o determinado Evento. Esta função, deve ter um único parâmetro/argumento cadastrado, e este parâmetro deve ser do mesmo tipo (:) do Evento cadastrado dentro da addEventlistener(). Precisamos deste argumento cadastrado na função, porque ele contém informações sobre o objeto carregado, e com isso, podemos utilizar na função os métodos e propriedades do Evento. A função criada não precisa retornar algo. Ou seja, devemos definir como tipo (:) de retorno ( void ). Vejamos:

1
2
3
4

function nomeDaFuncao( argumentoDoEvento:TipoClasseEvento ):void
{
	//declarações da função
}

Alguns do Eventos mais notáveis para manipulação de carregamento de arquivos externos:

* Event.OPEN (open)
Quando iniciar o carregamento do arquivo.

* ProgressEvent.PROGRESS (progress)
Verifica o progresso do carregamento do arquivo externo.

* Event.COMPLETE (complete)
É quando termina o carregamento.

* Event.INIT (init)
É gerado quando as propriedades e métodos do conteúdo que foi carregado estão habilitados para uso após seu carregamento completo. Geralmente quando está disponível a visualização da imagem no stage.

* HTTPStatusEvent.HTTP_STATUS (httpStatus)
Surge quando houve falha no status de uma solicitação HTTP, não consegue carregar o arquivo solicitado.

* IOErrorEvent.IO_ERROR (ioError)
Aparece quando tem um "erro fatal" que resulta em um "cancelamento" na hora de carregar o arquivo.

* SecurityErrorEvent.SECURITY_ERROR (securityError)
É gerado quando o arquivo que está sendo carregado está "fora da área" de segurança permitida.

* Event.UNLOAD (unload)
É também gerado quando utilizamos o método Loader.unload() para remover o arquivo que foi carregado ou quando utilizamos o método Loader.load() para substituir um conteúdo que já foi carregado no mesmo "container"(alvo onde a imagem é carregada do objeto Loader).

Dica:
Todas as Classes de Eventos podem ser encontradas no package(pasta) flash.events do Flash. Também existe mais informações no "Help do Flash".(atalho F1) procurando pelo nome da Classe de Evento. Ex.: ProgressEvent, Event, IOErrorEvent, entre outros. Lá você encontra métodos, propriedades e constantes de cada Evento e também alguns exemplos de sua utilização.
Vale a pena também conferir no Help do Flash as Classes Loader() e LoaderInfo() para maiores informações.

Exemplo

No exemplo que montamos logo abaixo está brevemente comentado no próprio código.
Crie um novo documento ".Fla" na versão AS3 e salve-o em uma pasta.
Coloque também uma imagem externa com tamanho relativamente grande em peso de KBytes nesta mesma pasta do arquivo Fla. Isso para fazermos "testes" de carregamento externo e conseguirmos entender melhor como funciona cada tipo de Evento.
Para simular uma conexão de internet, teste filme pressionando as teclas (Ctrl + Enter, 2 vezes seguidas). Ou também poderá fazer testes com imagens que estão na internet. Ex.: "http://www.seusite.com/suaImagem.jpg".

As informações de carregamento serão mostradas na caixa de saída "Output" para facilitar nosso entendimento e dar maior foco nos tipos de Eventos utilizados.
Pense que ali no lugar do método trace(), você poderá chamar/executar alguma ação/método que queira fazer no início do carregamento, durante e depois que completar o mesmo.

Obs: Lembra-se, estamos utilizando a versão Flash CS3 Adobe para trabalhar com a versão AS3.

No próprio código logo abaixo está inserido uma breve explicação.
Abra o seu arquivo Fla, selecione a primeira camada(layer) e no 1º frame abra o painel de Actions(atalho F9) e coloque o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/* 
 * Criamos variaveis da Classe URLRequest e Loader:
 * carregamos o arquivo e adicionamos o objeto Loader no stage.
 */
var url:URLRequest = new URLRequest("endereco_da_imagem_aqui");
var carregador:Loader = new Loader();
carregador.load( url );
addChild(carregador);
 
/*
Logo abaixo utilizamos Event handlers (Eventos de manipulação) do conteúdo externo.
Devemos utilizar a propriedade "contentLoaderInfo" da Classe Loader()
que verifica informações sobre o conteúdo à ser carregado e consegue "disparar" informações para os Eventos.
Estamos utilizando alguns dos principais.
*/
 
 
/*
 * Event.OPEN
 * Este evento Event.OPEN verifica quando iniciar(abrir) o carregamento do conteudo
 */
carregador.contentLoaderInfo.addEventListener( Event.OPEN, iniciaCarregamento );
function iniciaCarregamento( evento:Event ):void
{
	//poderá fazer qualquer coisa quando iniciar o carregamento
	trace("começou o carregamento. Usamos o Event.OPEN\n");
}
 
 
/*
 * ProgressEvent.PROGRESS
 * Este evento ProgressEvent.PROGRESS verifica o progresso de carregamento do conteudo
 */
carregador.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, progressoDeCarregamento );
function progressoDeCarregamento( evento:ProgressEvent ):void
{
	//pegamos o valor carregado e valor total do conteudo(evento.target)
	var carregado:Number = evento.target.bytesLoaded;
	var total:Number = evento.target.bytesTotal;
	var porcentagem:uint = Math.round( carregado / total * 100 );
	trace(porcentagem +" % carregados. Usamos o ProgressEvent.PROGRESS");
}
 
/*
 * Event.COMPLETE
 * Imagem carrega por completo mas ainda não está visivel no stage.
 */
carregador.contentLoaderInfo.addEventListener( Event.COMPLETE, imagemCompleta );
function imagemCompleta( evento:Event ):void{
trace("Conteudo carregado por completo! Usamos o Event.COMPLETE\n");
}
 
/* 
 * Event.INIT
 * Imagem carreda e está visivel no stage. Está pronta para utilizar propriedades/métodos para manipular a imagem.
 * Este evento é parceido com Event.COMPLETE porém é melhor caso queira fazer algo com o conteúdo.
 */
carregador.contentLoaderInfo.addEventListener( Event.INIT, mostraImagem );
function mostraImagem( evento:Event ):void
{
	trace("Agora poderá utilizar as proprieddades/métodos para fazer algo com a imagem!\nUsamos o Event.INIT\n");
	//depois de carregar pode fazer algo com a imagem. Ex:
	this.alpha = 0.5 //alpga de 50%
	this.rotation = 30; //rotação de 30
}
 
/* 
 * IOErrorEvent
 * Também é possivel disparar Eventos de Erros, quando por exemplo a imagem não puder ser carregada ou não existe.
 * Para simular um erro, basta alterar o endereço para um inexistente.
 */
carregador.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorImagem);
function ioErrorImagem( evento:IOErrorEvent ):void
{ 
	trace("Conteudo", evento.target, "não pode ser carregado.\nVerifique se a imagem existe no local ou a conexão falhou!\nUsamos o IOErrorEvent.IO_ERROR");
}

Download de um exemplo simples sobre carregamento externo com uso de Eventos.

Abraços e até a próxima!

Rodrigo Gonçalves
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.