Atendendo a pedidos hoje vamos construir um preloader simples, mas que funciona.
Então vamos ao trabalho!
Vamos criar um filme com duas cenas e com  o palco no tamanho de 400 x 400 pixels, com a cor de fundo "#333333" (Sem aspas).
Cena 1
Para deixar nosso trabalho mais organizado vamos criar três camadas  para cada ítem que será utilizado. Nomeie a primeira camada como  "Action", a segunda como "Texto" e a terceira como "Barra" (Todas sem aspas).Agora é só começar a trabalhar camada por camada.

Na camada "Actions" no quadro chave insira o seguinte código:

total = getBytesTotal();
carregando = getBytesLoaded();
porcentagem = Math.floor((total/carregando) * 100);
barra_mc._xscale = porcentagem = Math.floor((carregando/total)*100);
mostrador.text = porcentagem + "%"
{
if (carregando == total)
gotoAndPlay("Scene 2", 1);
}

Ainda na camada "Actions", no segundo Keyframe insira o código abaixo :

if (getBytesLoaded()<getBytesTotal()) {
gotoAndPlay("Scene 1", 1);
} else {
gotoAndPlay("Scene 2", 1);
}

Fim da primeira camada!!!!!
Na camada "Texto" no primeiro quadro crie um campo de texto dinâmico e estancie como "mostrador" (sem aspas).
Pronto, fim da camada "Texto".
Vamos para nossa última camada, Selecione a camada "Barra" e no primeiro Quadro  desenhe uma barra de 300 x 17 pixels. Selecione a barra que você criou e aperte F8, escolha a opção Movie clip e em registration selecione o canto superior esquerdo para que sua barra cresça somente para um lado. Com seu Movie clip criado e  selecionado estancie como "barra_mc"(sem aspas).
A cena 1 está pronta!!
Cena 2:
para criar a cena dois faça da seguinte maneira, vá em Insert --> Scene. Pronto está criada sua nova cena.
Agora coloque pelo menos duas fotos para testar seu preloader.
Para testar se o seu preloader está funcionando dê  Ctrl + enter duas vezes.

Agora que está tudo pronto, vamos estudar o Código que utilizamos.
total = getBytesTotal(); --> aqui a foi criada a variavel "total" que vai pegar os valores do Bytes do filme.
carregando = getBytesLoaded(); --> a variavel "carregando" mostra os Bytes que estão sendo carregados.
porcentagem = Math.floor((total/carregando) * 100); --> "porcentagem" é a variavel que será mostrada no campo dinâmico "mostrador", indicando  progressivamente o quanto ja foi carregado em porcentagem. Para se obter o valor que está sendo carregado em porcentagem, foi pego a quantidade de Bytes do filme(total) e dividido pelo total de bytes que já foi carregado "carregando" e com o produto desta divisão multiplica-se por 100.
barra_mc._xscale = porcentagem = Math.floor((carregando/total)*100);--> Aqui o movie clip estanciado como barra_mc vai receber os valores da variavel "porcentagem" onde com a função ".xscale" a barra vai crescendo gradativamente, de acordo com a porcentagem carregada.
mostrador.text = porcentagem + "%" --> aqui o campo dinâmico "mostrador" vai receber o valor da variavel "porcentagem" e no final será acrescentado o simbolo de porcentagem (%).
{
if (carregando == total) --> Aqui faz a seguinte condição: Se a variavel "carregando" tiver o mesmo valor de "total", ou seja se ja tiver carregado todos os Bytes existentes...
gotoAndPlay("Scene 2", 1);--> ...ele vai para a Cena2, onde esta o filme principal
}
Agora no código inserido no segundo KeyFrame:
if (getBytesLoaded()<getBytesTotal()) --> Aqui a condição funciona assim: se o total de Bytes carregados for menor que o Total de Bytes do filme...
{
gotoAndPlay("Scene 1", 1);-->...continua na cena 1.
}
else  --> Senão , se o total de Bytes carregados não for menor ao Total de BYtes do filme...
{
gotoAndPlay("Scene 2", 1);--> ..vai para Cena 2.
}
Espero ter sido claro na explicação e no restante de nosso artigo, para qualquer duvida que tiverem, mandem e-mail para geffin_designer@yahoo.com.br que estarei respondendo e enviando o arquivo deste tutorial. Até a próxima coluna e estudem bastante!

7 Comentário(s) compartilhe