Preloader
Canal: Flash | Autor: Oswaldo Junior | Publicado em: 21/11/2006 | Views: 13.954Atendendo 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:
Ainda na camada "Actions", no segundo Keyframe insira o código abaixo :
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!
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!
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] 







- não se escreve porcentagem mas percentagem ;)
Fica aqui um dicionario online de português para acabar com as dúvidas :)
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
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?
agora está tudo funcionando ok, muito obrigado =)
[]´s
Luciana