Manipulando carregamento externo com AS3

Junho 9, 2008 · 13 comentários

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 1
Download 2

Abraços e até a próxima!

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

13 respostas ↓

  • 1 Thiago // Jun 27, 2008 at 12:47 pm

    Fala Rodrigo Blz!
    Nossa eu já disse e repito, você tem o dom….
    Eu fiz um tutorial do AS3 de uma galeria de imagens com todos os efeitos citados acima, mas estava meio sem entender o pq de cada coisa, ainda mais que eu sei pouco ou quase nada de AS3, andei dando uma estudada em uns tutoriais falando em como começar a programar nessa “nova linguagem”, mas ainda estava nas:
    var Loader:Loader = new Loader();
    minha instancia. addEventListener(MouseEvent.CLICK, função);……
    Bem no inicio mesmo, mas acho que agora eu vou dar uma guinada na situação.
    Eu gostaria de saber onde você adquiriu tanto conhecimento AS3? Sera que foi no F1???? Acho meio dificil…

  • 2 Rodrigo // Jun 27, 2008 at 2:28 pm

    Thiago,

    Valeu a presença no site. Isso ajuda e muito na motivação. Se perceber erros ou falta de informações certas, nos avise também.

    Eu também estou aprendendo com AS.
    Aliás é uma aprendizado constante pra tudo,…mas no caso de programação o que me ajuda quando pego um código pra ler(seja ele qual for), é ter pelo menos a “lógica de programação” mas firme.

    Estou estudando também sobre programação orientação a objeto(OOP), em especial para AS3.
    Tento esses dois conceitos, ajuda e muito na hora de fazer ou entender/estudar algum código, no caso o AS.

    F1 do Flash ajuda sim, e algumas coisas explica pra que serve algum método, classe, propriedade, e alguns mostram exemplo de como pode utilizar.
    Uso um F1 pra entender o conceito de alguma coisa que preciso usar, depois tento fazer testes com o que eu entendi.

    Com certeza o mais difícil é juntar tudo que aprendeu separadamente e fazer alguma coisa/aplicação.

    Eu estudo alguns livros que com certeza ajuda na pratica e estudos. Alguns que eu conheço e que talvez pode ser útil pra você. Todos em inglês:

    *ESSENTIAL ACTIONSCRIPT 3.0
    *ACTIONSCRIPT 3 COOKBOOK
    *LEARNING ACTIONSCRIPT 3.0 DESIGN
    *OBJECT-ORIENTED ACTIONSCRIPT 3.0

    Tem outros sobre o tema, mas ainda não os conheço.

    O resto, é vontade mesmo e praticar, persistir na idéia, que uma hora com certeza sai pelo menos algo no Flash.
    E sim, ainda o F1 continua sendo um “bom amigo” na hora de tirar duvidas rápidas e até complexas em alguns casos.

    Dica do F1:
    Selecione a palavra que você encontrou no código a qual você não conhece ou quer conhecer mais sobre uma classe, método, propriedade, eventos etc… e aperte a tecla F1, ele irá direto para a pesquisa daquilo que você selecionou.
    Ou ao invés de selecionar a palavra inteira, basta clicar com cursor entre a palavra em seguida apertar F1 que também faz o mesmo.

    Abraços.

  • 3 Roberto // Out 25, 2008 at 2:41 am

    Rodrigo, boa noite.

    Talvez você possa me ajudar.

    Eu estou tentando fazer no flash (AS3) um sistema parecido com o do site:

    http://www.templates.com/new/preview/flash-templates/ft-3691.html?page=184044

    onde quando eu ponho o mouse em cima de determinada área, ele faz uma animação andar e parar.

    Será que tem alguma dica no seu site para me ajudar?

    Muito obrigado.

  • 4 Rodrigo // Out 26, 2008 at 2:34 am

    Tudo bem Roberto?

    Você pode resolver navegação com uso de classes de animação Tween.

    Uma idéia pra você:

    Crie um imagem qualquer e converta-o em movie clip com nome de instância mc
    Será neste objeto que faremos animação pelo código com uso da Classe Tween.

    Crie 3 botões com seguintes nomes de instância:
    btn1
    btn2
    btn3

    No 1º frame da 1º camada, abra o painel de actions e digite:

    //importamos a classe de animação tween
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
     
    /*criamos uma função que resolve navegação no eixo X
     * essa função exige 2 parâmetros:
     * _mc: é o objeto que deseja animar
     * _pos: é a posição de destino do objeto que deseja animar
     */
    function anime(_mc:MovieClip, _pos:Number):void{
    	new Tween(_mc, "x", Strong.easeInOut, _mc.x, _pos, 1, true);
    }
     
    //eventos de mouse para os botões
    btn1.addEventListener(MouseEvent.MOUSE_OVER, destino1);
    btn2.addEventListener(MouseEvent.MOUSE_OVER, destino2);
    btn3.addEventListener(MouseEvent.MOUSE_OVER, destino3);
     
    btn1.addEventListener(MouseEvent.MOUSE_OUT, destino_inicial);
    btn2.addEventListener(MouseEvent.MOUSE_OUT, destino_inicial);
    btn3.addEventListener(MouseEvent.MOUSE_OUT, destino_inicial);
     
    function destino1(e:MouseEvent):void{
    	anime(mc, 100);
    }
     
    function destino2(e:MouseEvent):void{
    	anime(mc, 150);
    }
     
    function destino3(e:MouseEvent):void{
    	anime(mc, 200);
    }
     
    function destino_inicial(e:MouseEvent):void{
    	anime(mc, 0);
    }

    O efeito que você procura é muito parecido com esse exemplo:
    http://www.ffiles.com/flash/menus/horizontal_slider_792.html

    Abraços

  • 5 ultimoxman // Fev 10, 2009 at 9:54 am

    rapaz eu tou querendo saber aqui como se faz pra carregar uma pag externa. vou tentar fazer seu tutorial. mas se tiver algo ai pra ir adiantando grato desde já . parabéns está otimo o post.

  • 6 andre // Fev 13, 2009 at 4:57 pm

    tenho um problema.
    consigo carregar os arquivos externos tranquilamente, só que eu tenho uma galeria com um arquivo XML de configuração, só que o flash não acha o arquivo. ele dá o seguinte erro:
    Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///D|/Meus%20Documentos/%5Bmonica%5Fcortinas%5Fnew%5D/PRINCIPAL/config.xml
    at featureSlider_fla::mc_featureSelector_4/featureSlider_fla::frame1()
    pelo que eu entendi, ele diz que não achou o endereço ou URL do arquivo xml…
    também não sei se é isso..

  • 7 André Luís // Mar 4, 2009 at 12:24 am

    Olá Roberto, tudo bom?

    Gostei da sua explicação, parabéns.

    Estou com uma dúvida, e já procurei em todos os fóruns e não consegui, mas gostei da sua explicação e espero que você possa me ajudar.

    Estou fazendo um site com 6 páginas, cada página tem um SWF diferente. Quando vou da primeira para a segunda página, aprimeira página fica embaixo. Já tentei um remove Child, um unload, e nada. Como eu faço para remover o SWF anterior.

    Valeu Cara.

    E parabéns pelo artigo.

  • 8 Rodrigo // Mar 4, 2009 at 4:22 am

    Olá André, tudo bom!

    valeu pela visita ao site.

    Não entendi muito bem a sua intenção, mas você pode tenta fazer é, se pretende mostrar apenas um arquivo externo por vez, pode carrega-los sempre em um único Objeto Loader.
    Automaticamente quando carregar algo novo nesse objeto Loader, ele substituirá o arquivo antigo pelo atual.

    Talvez você irá precisar usar os métodos addChildAt(), removeChildAt(), caso tenha outros objetos para mudar a ordem de empilhamento de visualização dos objetos no stage.

    Confere esse links do help do flash, veja se ajuda em algo:
    http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e3d.html

    http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e36.html

    Abraços.

  • 9 Vitor Santos // Jun 22, 2009 at 6:05 pm

    Olá Rodrigo, os meus parabéns por este artigo!

  • 10 Thiago Torres // Jul 15, 2009 at 1:56 am

    Rodrigo,

    Primeiramente, parabéns pelos artigos que posta, todos úteis e que concerteza nos ajuda muito.

    Gostaria de saber se consegue me tirar uma dúvida, estou desenvolvendo um site em flash, e cada página vou utilizar um swf externo.
    Coloquei no menu uma função chamando cada arquivo externo, tranquilo ele carrega normalmente. Porém, em alguma páginas eu preciso utilizar uma Scroll para rolar os textos, o que acontece é que quando clico em EMPRESA ele carrega a página legal, scroll funcionando normal, quando clico em outra página e volto para EMPRESA o scroll perde a funcionalidade e não rola mais os textos.

    Sabe me dizer o que estou errando ?

    Obrigado

  • 11 Rodrigo // Jul 15, 2009 at 3:22 am

    Thiago, valeu pela visita ao site.

    Talvez o seu scroll perde alguma referência de conteúdo que tinha no começo, e não encontra mais depois.

    Esse scroll é um componente do flash?

    Teria que ver o código pra tentar te ajudar melhor.
    As vezes a sua lógica está certa pro que você quer, mas aplicação dessa lógica no código não esteja.

    Abraço.

  • 12 Thiago Theodoro // Dez 11, 2009 at 10:21 pm

    Rodrigo, boa noite.

    Estou fazendo um slide show e queria saber um método que não retirasse a imagem anterior do palco até que a próxima fosse carregada.

    Hoje, quando inicio o carregamento da próxima imagem, a imagem anterior é retirada do palco e somente depois do carregamento
    completo que a imagem aparece na tela, só não queria que ficasse esse buraco na página enquanto as imagens são trocadas.

    Obrigado

  • 13 Thiago Torres // Dez 14, 2009 at 5:31 pm

    Rodrigo,

    Me tira uma dúvida, estou desenvolvendo uma galeria de imagens, com botões de avançar e voltar. Gostaria que quando clicasse nestes botões, ao invés do Loader limpar a imagem atual até carregar a próxima, que ele mantivesse a foto que já está no palco e só quando a próxima imagem for carregada, fosse jogada no palco.

    É complicado ?

    Abaixo o meu código:

    // —– Classes
    import fl.transitions.Tween
    import fl.transitions.easing.*

    // —– Variáveis
    var carrosRequest:URLRequest = new URLRequest()
    var carrosLoader:URLLoader = new URLLoader()
    var carrosXML:XML
    var contador:int = 0
    var tamanho:uint
    var fotoRequest:URLRequest = new URLRequest()
    var fotoLoader:Loader = new Loader()
    var entradaFoto:Tween
    var end:String

    // —– Eventos
    carrosLoader.addEventListener(Event.COMPLETE, carregou)
    next_btn.addEventListener(MouseEvent.CLICK, avanca)
    prev_btn.addEventListener(MouseEvent.CLICK, volta)

    // —– Funções
    function carregou (e:Event) {
    carrosXML = new XML ( carrosLoader.data )
    tamanho = carrosXML.*.length()
    //
    exibeConteudo()
    }
    function exibeConteudo () {
    nome_txt.text = carrosXML.*[contador].@nome
    valor_txt.text = carrosXML.*[contador].@valor
    atual_txt.text = String(contador + 1)
    //
    fotoRequest.url = carrosXML.*[contador].@foto
    fotoLoader.load(fotoRequest)
    end = carrosXML.*[contador].@foto
    //
    this.addChild(fotoLoader)
    fotoLoader.x = 30
    fotoLoader.y = 130
    //

    //
    entradaFoto = new Tween
    (fotoLoader, “alpha”, Regular.easeOut, 0, 1, 1, true)
    }

    function avanca (e:MouseEvent) {
    contador++
    if (contador == tamanho) contador=0
    //
    exibeConteudo()

    }

    function volta (e:MouseEvent) {
    contador–
    if (contador == -1) contador=tamanho-1
    exibeConteudo()

    }

    // —– Inicialização
    carrosRequest.url = “carros.xml”
    carrosLoader.load( carrosRequest )

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, 1328566656, '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.