O que é um preloader?

 

Um preloader é aquele recurso colocado em sites que mostra o "Carregando", muitas vezes com uma barrinha crescendo de acordo com a porcentagem que já foi carregada.

 

Qual a vantagem de se usar um preloader?

Quando um site é feito inteiro em Flash, e tem muitas imagens e sons, ele costuma ficar muito grande e pode demorar muito para carregar, principalmente em conexões dial-up (discadas) com a Internet. Sites pesados podem chegar a levar 1 minuto ou mais para carregar, até mesmo em conexões de banda larga! A maioria dos usuários, ao ver uma página sem nada escrito, tenta carregar denovo (o que reinicia o download do site, demorando ainda mais), ou entao se irrita e fecha o site.

Com um preloader, o usuário fica mais paciente e aguarda. É possível até colocar-se uma animaçãozinha mais leve no preloader, enquanto o usuário aguarda!

Porém, neste texto, demonstrarei apenas como fazer um preloader com uma barra crescendo e uma caixa de texto mostrando a porcentagem já carregada. É o suficiente. Se alguém quiser mais coisa, pode falar comigo na aula que tentarei ajudar!

Mãos à obra!

 

1. Abra, no Flash MX, o arquivo que deseja instalar o preloader.

 

2. Aperte SHIFT+F2 para que a janela de Cenas se abra (caso ainda nao estivesse aberta).

 

3. Clique no sinal de +, destacado na figura, para adicionar uma nova Cena.

 

4. Dê 2 cliques na nova cena criada (Cena 2) e renomeie-a para Preloader (dando um Enter depois para confirmar).

 

5. Clique e arraste a cena Preloader para antes da Cena 1.
A janela deve estar mais ou menos como esta aqui:

 

6. Feche a janela de cenas.

7. Com a ferramenta de desenhar retangulos , desenhe uma barra na horizontal, que será a barra que vai crescer conforme o site é carregado. Faça-o com uma borda de cor com destaque em relacao ao fundo, e com uma cor de preenchimento qualquer.

 

8. Pegue então a ferramenta que é simbolizada por uma flechinha de mouse preta , e clique uma vez no centro do retangulo que você acabou de desenhar.

 

9. Aperte F8 para converter em Símbolo. Chame de "barra do preloader", sem as aspas, e configure conforme a imagem a seguir, prestando atencao aos itens destacados:

 

10. Dê OK, e em seguida, na janela de propriedades (CTRL+F3 se não estiver aberta), no item "<Nome da Instância>", escreva "mc_preloader_bar":

 

11. Clique na ferramenta de Texto e coloque uma caixa de texto na posição desejada, com tamanho suficiente para aparecer a mensagem "100% Carregado". Altere seu tipo para "Texto Dinâmico", e coloque "txt_preloader_pct" em seu nome de instância:

 

12. Utilizando o "mouse preto" (v. item 8), clique no fundo do palco para "des-selecionar" a caixa de texto.

 

13. Aperte F9 para abrir a caixa de edição de código, copie e cole o código a seguir:

stop();
bt=_root.getBytesTotal();
function preloaderCallback() {
  bl=_root.getBytesLoaded();
  pct=Math.round(bl/bt*100);
  _root.txt_preloader_pct.text = pct + "% Carregado";
  _root.mc_preloader_bar._xscale=pct;
  if(pct>=99) {
    clearInterval(preloader_ID);
    _root.play();
  }
}
preloader_ID=setInterval(preloaderCallback,80);
setInterval(preloaderCallback,80);

 

14. Pronto! Se você não errou nenhum passo, o preloader deve estar funcionando. Para testá-lo, aperte CTRL+Enter duas vezes, para simular uma conexão lenta à internet.