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
CODE
import StagePreloader
var carregar:StagePreloader = new StagePreloader(stage);
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
CODE
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 :)*/
}
}
}
}
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...
QUOTE
import flash.events.IEventDispatcher
import flash.events.Event
import flash.display.Sprite
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
QUOTE
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
QUOTE
this.addEventListener(Event.ENTER_FRAME,CheckaStage);
Enfim o coração do preloader
QUOTE
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!