Preloaders

 

Um preloader é uma pequena animação exibida para o visitante enquanto o site não é carregado completamente.

 

Preloader simples

 

1. Crie um novo arquivo com 500 pixels de largura e 350 pixels de altura.

 

2. Mude o nome da cena para introducao.

 

 

3. Crie uma nova cena e modifique seu nome para site.

 

4. Na cena site importe uma imagem e configure seu tamanho para 500 pixels de largura e 350 pixels de altura, e a posição X=0 e Y=0. Fazemos isto para, propositadamente deixar a animação mais pesada e facilitar a visualização do preloader. Depois de dimensionar e posicionar, converta a imagem em símbolo gráfico.

 

 

5. Ainda na cena site, crie uma nova camada, e nesta camada, faça uma animação qualquer, uma bolinha passando, esta animação deve ir obrigatoriamente até o quadro 30 (para este exercício).

 

6. Alterne para a cena introducao.

 

7. Escreva a palavra “Carregando” no centro do palco e converta-a em símbolo gráfico.

 

 

8. Clique no quadro 20 da linha de tempo e crie um quadro-chave.

 

9. Clique sobre a palavra “Carregando” e modifique seu alpha para 0 e aplique uma interpolação de movimento.

 

 

10. Clique no quadro 21 da linha de tempo e pressione F7 para criar um quadro-chave em branco.

 

11. Pressione F9 para ver a paleta de ações e digite a ação abaixo:

 

ifFrameLoaded ("site",30)

      {

      gotoAndPlay("site",1);

      }

 

Onde: Se o quadro carregado na cena site, for o de número 30 (nosso ultimo quadro), vá para a cena 30 e rode a animação a partir do quadro 1.

 

12. O trabalho ainda não está pronto, pois ele executa o teste somente uma vez, devemos clicar no quadro 21, onde inserimos um quadro-chave em branco (F7) e digitar a ação abaixo, para que enquanto o quadro 30 da segunda cena não for carregado ele retorne ao quadro inicial e permaneça mostrando a animação de preloader

 

gotoAndPlay(1)

 

Preloader avançado

 

O resultado deste preloader não é satisfatório do ponto de vista estético, este exemplo serve para mostrar como funcionam as funções getBytesTotal(); e getBytesLoaded(); que capturam, respectivamente: quantidade total de bytes do arquivo e a quantidade de bytes que já foram carregados.

 

Este preloader vai mostrar:

 

» Tamanho total do arquivo.

» Quantidade de bytes que já foram carregados.

» A quantidade que falta para carregar.

 

Exemplo

 

1. Crie um novo arquivo com 400 pixels de largura por 250 pixels.

 

2. Abra a paleta de cenas e mude o nome da cena para principal.

 

3. Nesta cena vamos criar o que será a simulação do site. Para testar na sua própria máquina e não publicado, devemos criar uma animação muito pesada, pois, do contrário, vai rodar tão rápido que não vai dar para ver o preloader rodando.

 

4. Crie um camada, na camada inferior insira uma foto e dimensione-a para o tamanho do site, na camada superior faça uma animação qualquer que vá até o quadro 30 da linha de tempo.

 

5. Insira uma nova cena, mude seu nome para “carregador” e use a paleta cenas para movê-la para cima, esta será a cena do preloader.

 

6. Crie no palco da cena “carregador” as caixas de texto abaixo.

 

 

7. Os retângulos ao lado de Total de bytes, Carregados, Ainda Restando, e Porcentagens, são caixas de texto que devem ser configuradas como Texto dinâmico da barra de propriedades.

 

 

8. Ao configurar uma caixa de texto como Texto Dinâmico você pode definir em propriedades o nome da variável que usará esta caixa para ser exibida.  Dê os nomes que são pedidos abaixo:

 

a. Caixa ao lado de Total de Bytes: total_bytes

b. Caixa ao lado de Carregados: bytes_carregados

c. Caixa ao lado de Ainda Restando: bytes_faltando

d. Caixa ao lado de Porcentagem: percent_done

 

 

9. Insira o código abaixo no primeiro quadro de sua animação.

 

total_bytes = _root.getBytesTotal();

bytes_carregados = _root.getBytesLoaded();

bytes_faltando = total_bytes-bytes_carregados;

percent_done = int((bytes_carregados/total_bytes)*100) + "%";

ifFrameLoaded ("principal", 30)

      {

      gotoAndPlay("principal", 1);

      }

 

Onde:

 

1) total_bytes       =  _root.getBytesTotal();

2) bytes_carregados  =  _root.getBytesLoaded();

3) bytes_faltando    =  total_bytes-bytes_carregados;

4) percent_done      =  int((bytes_carregados/total_bytes)*100);

 

5) ifFrameLoaded ("Scene 2", 30)

         {

         gotoAndPlay("Scene 2", 1);

         }

1) A variável total_bytes recebe uma função que mostra o tamanho total do arquivo.

2) A variável bytes_carregados recebe função que captura a quantidade de bytes carregados para a memória RAM do micro do visitante.

3) A variável bytes_faltando recebe o valor do tamanho total do arquivo e subtrai da quantidade de bytes carregados.

4) Variável percent_done calcula a porcentagem que foi carregada, dividindo bytes_caregados por total_bytes e dividindo por 100 a função INT() retorna um valor inteiro.

5) Código padrão para um preloader.

 

10. Insira o código abaixo no segundo frame de sua cena de carregador:

 

gotoAndPlay(1)

 

Preloader com barra de progressão

 

Exemplo

 

1. Crie um novo arquivo com 400 pixels de largura por 250 pixels.

 

2. Abra a paleta de cenas e mude o nome da cena para principal.

 

3. Nesta cena vamos criar o que será a simulação do site. Para testar na sua própria máquina e não publicado, devemos criar uma animação muito pesada, pois, do contrário, vai rodar tão rápido que não vai dar para ver o preloader rodando.

 

4. Crie um camada, na camada inferior insira uma foto e dimensione-a para o tamanho do site, na camada superior faça uma animação qualquer que vá até o quadro 30 da linha de tempo.

 

5. Insira uma nova cena, mude seu nome para “carregador” e use a paleta cenas para movê-la para cima, esta será a cena do preloader.

 

6. Vamos precisar de 4 camadas no total, então crie mais três camadas e e nomeie-as como mostrado na próxima figura.

 

 

7. Clique na cena contorno e desenhe um retângulo com 350 de largura e 15 de altura, não remova seu contorno e posicione-o no centro do palco.

 

8. Selecione o preenchimento deste retângulo e pressione CTRL X para recortar.

 

9. Clique na camada barra e use CTRL SHIFT V para colar no mesmo local.

 

10. Converta este retângulo em Movie clip e marque o registro como mostrado abaixo:

 

 

11. Dê o nome de barra a sua instância.

 

 

12. Selecione a camada percent e desenhe uma caixa de texto dinâmica abaixo da barra, dê o nome de percent a variável desta caixa.

 

 

13. Clique no primeiro quadro da camada acao e pressione F9 para mostrar a paleta de ações, digite ação abaixo.

 

total_bytes = _root.getBytesTotal();

bytes_carregados = _root.getBytesLoaded();

bytes_faltando = total_bytes-bytes_carregados;

percent = int((bytes_carregados/total_bytes)*100) + "%";

barra._xscale = int((bytes_carregados/total_bytes)*100)

 

ifFrameLoaded ("principal", 30)

      {

      gotoAndPlay("principal", 1);

      }

 

14. Selecione o quadro 2 de todas as camadas e pressione F6.

 

15. Clique no segundo quadro da camada acao e digite o código abaixo.

 

gotoAndPlay(1);

 

Pressione CTRL ENTER duas vezes para testar.

 

16. Podemos dar uma incrementada no nosso preloader, aplicando um efeito de Alpha, isto será feito dinamicamente, insira a próxima linha de código no primeiro quadro da camada acao, abaixo da linha do “barra._xscale=...”

 

barra._alpha = int((bytes_carregados/total_bytes)*100)

 

17. Estamos associando a propriedade Alpha do clipe de filme à porcentagem de carregamento do site, assim a barra iniciará sua progressão com alpha de 0 e se modificará sincronizada com o aumento da porcentagem.