Preloader AS3 (como disse nosso amigo "QUE FUNCIONA!")

[Pooh]

Olá flasheiros!

Estarei de agora em diante tentando inserir mais AS3 e OOP para vocês e espero que todos tenham a coragem necessária para migrar e deixar de lado a programação trabalhosa do AS1/AS2.

Sobre o tutorial de hoje:

Durante muito tempo, flasheiros e flasheiras ficam frustados com "pepinos" encontrados em criar um preloader.

Seja ele a demora que existe antes de começar o preloader.

Seja ele o preloader começar apenas com X% sendo esse X algo bem longe de 1~10% tirando a realidade do carregamento.

Entre muitos outros problemas diariamente encontrados com preloader internos.

Buscando soluções na internet me deparei com alguns estudos e técnicas que desenvolvedores de jogos para flash utilizam.

Explicando ela é algo como:

Adicionar uma classe para Carregar, remover a opção "carregar no 1º frame" de tudo o que existir na biblioteca e adicionar esses itens ao frame 2, assim começando seu aplicativo no frame 3 somente.

Porque isso ?

No frame um nosso flash dedica o seu código, se colocarmos algo junto com ele no 1º frame, ele só começará a fazer algo quando esse item tiver sido carregado ou seja nosso preloader vai começar ou já com 100% ou la pelos X%

Colocar tudo no frame 2 faz com ele APÓS carregar o código carregue os elementos do site ali antes de iniciar.

Resumindo em 3 frames:

Frame 1 -> Carrega nosso código com o Preloader

Frame 2 -> Carrega tuso o que sera usado no Aplicativo

Frame 3 -> já pode começar seu aplicativo

Agora que já entendemos vamos ao exemplo ?

Crie um arquivo Flash AS3

import StagePreloader

var carregar:StagePreloader = new StagePreloader(stage);

Diferente do que eu vi por ai, eu quis passar o stage para o Carregador, pois dentro do carregador se você acessar stage a REFERÊNCIA é outra, e ao invés de ficar naquela ladainha de "this.parent. bla bla bla" eu passei como parâmetro. Importamos a classe que vai monitorar o carregamento, e a iniciamos passando stage como parâmetro. Agora dentro da Classe

package{

import flash.events.IEventDispatcher
import flash.events.Event
import flash.display.Sprite

public class StagePreloader extends Sprite implements IEventDispatcher
{
    
private var e:Event;
private var bl:Number;
private var bt:Number;
private var pct:Number;
private var meuStage;
    
public function StagePreloader(Objeto)
{

meuStage = Objeto;

this.addEventListener(Event.ENTER_FRAME,CheckaStage);

}
    
private function CheckaStage(e)
{
    
bt = meuStage.loaderInfo.bytesTotal;
    
bl = meuStage.loaderInfo.bytesLoaded;

pct = Math.round(((bl/bt)*100));

trace(pct);

if(pct >= 100)
{
    
this.removeEventListener(Event.ENTER_FRAME,CheckaStage);

/*Aqui dizemos o que fazer após concluir :)*/
    
}
    
}
    
}
    
}

Analisando a fundo...

import flash.events.IEventDispatcher

import flash.events.Event

import flash.display.Sprite

Antes de explicar o porque, percebam que NÃO utilizamos os eventos INIT,PROGRESS e COMPLETE.

Porque ?

Constatou-se que em algumas versões do IE, mais especificamente na versão 6 esses Listeners não rodavam, porém como estamos numa versão mais avançada do flash isso com certeza já foi corrigido.

Porém como programador meu trabalho é evitar erros por isso peguei o caminho mais seguro, usando um evento básico que é o ENTERFRAME.

Assim sendo incluimos a biblioteca de EVENTOS, de SPRITE para obtermos as funções básicas como hierarquia e o IEVENTDISPATCHER é uma opção minha pois gosto de enviar confirmações como por exemplo, assim que acabar o preloader poder enviar para algum listener "Acabei de carregar!" e executar uma ação em seguida :)

private var e:Event;

private var bl:Number;

private var bt:Number;

private var pct:Number;

private var meuStage;

Nossas variáveis:

e -> vai carregar a definição de Event

bl -> BytesLoaded vai carregar os bytes carregados até o presente momento

bt -> bytesTotal vai carregar os bytes totais do nosso Aplicativo

pct -> Porcentagem vai carregar os dados calculados da porcentagem de progresso

meuStage -> Referência de Stage vai carregar a definição de Stage passada pela Timeline Principal

this.addEventListener(Event.ENTER_FRAME,CheckaStage);

Aqui atribuimos à nossa classe um listener de ENTERFRAME para que a cada ciclo de processamento ele verifique o carregamento do nosso Aplicativo e possa nos mostrar o seu andamento.

Enfim o coração do preloader

private function CheckaStage(e)

{

bt = meuStage.loaderInfo.bytesTotal;

bl = meuStage.loaderInfo.bytesLoaded;

pct = Math.round(((bl/bt)*100));

trace(pct);

if(pct >= 100)

{

this.removeEventListener(Event.ENTER_FRAME,CheckaStage);

}

}

Atribuimos às variáveis seus reespectivos valores, calculados de forma simples a porcentagem, damos uma trace nela apenas para ver se realmente está carregando algo e no fim uma verificação.

Verificamos se o carregamento chegou ao fim, assim podemos encerrar o listener do ENTERFRAME e no meu caso despachar um evento dizendo que terminou o carregamento.

Bom é isso meus flasheiros

Vou disponibilizar um exemplo e lembrem de ir à suas bibliotecas e configurar o seguinte:

vai em cada objeto encontrado la -> Propriedades... -> Avançado(se já não estiver) ->Exporte ele para ActionScript porém NÃO exporte ele no 1º frame, deixe o checkbox em branco.

Agora coloque o objeto no segundo frame e começe seu trabalho no 3º frame

(Obviamente para ver o resultado utilize o SIMULAR DOWNLOAD com uma velocidade razoável)

Arquivos zipados RAR: Arquivos zipados (2)

Abraços!

EDIT: Acabei de perceber que o Thiago Bueno tem um tutorial abordando a mesma coisa, porém subimos um pouco o nivel simplificando colocando o carregador em uma classe e lembrando do passo de colocar nossos objetos de biblioteca no 2º frame, retirando a opção do "iniciar no 1º frame".

Thiago espero que atualize seu tutorial com essas dicas também.

Abração!

Editado Fevereiro 6, 2010 por Pooh