Flash AS2 12: Pré loader

1. Como funciona um pre loader

Estou certo de que você já sabe o que é um pré-loader (também chamado de pré carregador ou carregando). O pré-loader é uma animação, geralmente bem simples, que acontece antes da animação principal aparecer. Ele serve para duas coisas:

  • informar o usuário do estado de carregamento da animação principal, por exemplo, que vai demorar mais uns 2 minutos…
  • não deixar a animação rodar enquanto não estiver totalmente baixada para o micro do cliente… ou seja, o do usuário.

E como ele funciona. É terrivelmente simples. Veja…

O pré-loader tem que conter um código que verifica a quantidade de total bytes do SWF e a quantidade carregada. Quando a quantidade carregada for igual à total, ele deixa a animação principal aparecer. E enquanto a quantidade de bytes carregada não for igual à total, fica aparecendo o pré-loader… Simples, não?

2. A montagem de um pre loader

Qual a vantagem de você mesmo fazer o seu pré-loader, se existem tantos disponíveis na web? São duas:

  • você tem controle total sobre como ele vai ser, quais elementos gráficos vão aparecer, etc. Se o seu cliente (ou você mesmo) quiser um pré-loader em forma de girafa, você vai conseguir fazer.
  • você aprende… é pra isso que estamos aqui, certo?

Primeiro vamos conhecer as duas funções que nos permitem fazer o pré-loader:

  • getBytesTotal: esta retorna o valor total em bytes do SWF que você fez
  • getBytesLoaded: esta retorna o valor em bytes do que já foi carregado até aquele momento

Bem, tudo o que você tem que fazer é pegar a sua animação e faze-la começar a partir do frame 3. Assim, deixamos 2 frames para colocar o pré-loader e só deixamos o flash mostrar o frame 3 (ou seja, a animação principal) quanto o SWF estiver totalmente carregado.

Para isso vamos usar as seguintes linhas de programação no frame 2:

bl= getBytesLoaded();
bt= getBytesTotal();
if (bl<bt) {
  gotoAndPlay(1);
}

Traduzindo: bl expressa os bytes carregados, bt o total de bytes do arquivo. Se o número de bytes carregados for menor que o total, volte para o frame 1 (e não deixe a animação passar). Assim que bl for igual a bt, a animação começa e tudo corre normalmente.

Para testar, use e abuse dos recursos de simulação de download que o player do Flash tem (menu View da tela de preview). Se você não usar o recurso de simulação, o seu preview vai carregar tão rápido que não vai mostrar nada. Isso porque você está com o arquivo na sua própria máquina…

C. Melhorias

Bem, o que vimos até agora evita que a animação principal apareça antes de estar totalmente carregada, mas ainda não dá nenhuma dica ao usuário de quanto tempo vai demorar para carrega-la… Vamos então melhorar o nosso pré-loader.

Lembre-se que o importante é você entender os passos que fazremos, e não decora-los. Quando decoramos não estamos realmente entendendo o que se passa, e o nosso objetivo é que você sempre saiba sair com a solução de um problema, ainda que seja diferente deste que estamos mostrando.

Bem, se queremos que a porcentagem de carregamente apareça na tela, temos que colocá-la lá. O objeto deve ser um texto dinâmico. Como nome de instância eu coloquei porcentagem.

Logo em seguida, acrescente ao código já digitado uma linha que coloca no objeto texto o valor da porcentagem. No final vai ficar assim:

bl= getBytesLoaded();
bt= getBytesTotal();
 
porcentagem.text = bl/bt;
 
if (bl<bt) {
  gotoAndPlay(1);
}

Mas por quê bl/bt?

Por que essa relação é que espressa a porcentagem de carregamento. Ora, se o seu movie tem 100Kb e so carregou 20Kb, 20% do seu movie foi carregado, isto é 20 / 100, ou seja, bl/bt.

Acontece que se você testar agora o número que aparece tem esse aspecto:

0.3435365645

isso quer dizer que foram carregados 34,35365645 porcento do seu arquivo. Geralmente queremos saber da porcentagem numa escala entre zero e cem e não entre zero e um. Assim, multiplique a expressão a ser mostrada por 100. Depois disso, isole a parte inteira usando a função int. Veja o resultado:

bl= getBytesLoaded();
bt= getBytesTotal();
 
porcentagem.text = int(100*(bl/bt)); 
 
if (bl<bt) {
  gotoAndPlay(1);
}

Bem, o nosso pré-loader básico está pronto. Ele evita que a animação principal apareça antes de estar 100% carregada e mostra o quanto já carregou.

Se você quer fazer uma barra de carregamento, desenhe uma barra horizontal. Transforme-a num MovieClip com nome de instância barra.

Depois atribua à propriedade _xscale (escala em X) da barra o valor do carregamento. Assim, se num determinado momento só 20% tiver sido carregdo, a barra terá 20% de seu tamanho nesse momento… e chegará a 100% quando estiver tudo carregado. O código fica assim.

bl= getBytesLoaded();
bt= getBytesTotal();
 
      porcentagem.text = int(100*(bl/bt));
      barra._xscale = (bl/bt)*100;
 
if (bl<bt) {
  gotoAndPlay(1);
}

Para maior clareza, você pode desenhar um contorno na barra para mostrar os limites dela para o usuário.

É isso. Agora você não depende de mais ninguém para fazer a sua própria barra de carregamento. Se quiser baixar o . FLA do exemplo que acabamos de ver, clique aqui.

D. Vídeo