Preloader

Canal: Flash  |  Autor: Oswaldo Junior  |  Publicado em: 21/11/2006  |  Views: 13.954
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!
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [7]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Português Correcto
Publicado em:
06/11/2007 - 18:29
Português Correcto
Um pequeno reparo:
- não se escreve porcentagem mas percentagem ;)
Fica aqui um dicionario online de português para acabar com as dúvidas :)
Português Correcto
Publicado em:
06/11/2007 - 18:30
Português Correcto
Marcelo Navarro
Publicado em:
02/05/2008 - 20:36
Marcelo Navarro
Ola gostei muito do seu tutorial mais fica uma duvida
se por exemplo eu quiser fazer
um preloader sem a barra mais com outro mc exemplo uma palavra qualquer qual seria p procedimento???
seria muito grato se vc pudesse responde mais parabéns pelo tutorial
abrass
Hudson
Publicado em:
13/05/2008 - 19:04
Hudson
parabéns, esse finalmente funcionou depois de muitos outros HAAH :D
mas tipo, se eo carregar a página e atualizá-la, o movie não executa. eo tenho que fechá-la, e abrí-la novamente..
é assim mesmo ou algum deslize meo?
Hudson
Publicado em:
13/05/2008 - 19:53
Hudson
bom, eo mandei um comentário agora pouco, mas consegui resolver...
agora está tudo funcionando ok, muito obrigado =)
Luciana
Publicado em:
21/05/2008 - 08:44
Luciana
Olá Oswaldo, excelente o Tuto, mais fiquei com uma dúvida. Qdo vou abrir o swf, ele executa a segunda cena, pq? Ou ou que devo fazer? O código está igual ao do Tuto.
[]´s
Luciana
Douglas
Publicado em:
01/07/2008 - 14:38
Muito bom o tutorial, simples, fácil e muito útil,mas tenho uma pequena dúvida assim como um asuário acima, depois de carregado, mesmo eu abrindo a página novamente, o filme já abre direto sem a presença do loading, isso seria normal?