Olá Pessoas!
Andei abandonando meu blog para terminar uns trabalhos que estavam em fila, dentre eles o site da loja de moda masculina Maria Pitanga Homem, em Campo Grande MS (onde moro), quem quiser conferir basta visitar http://www.mariapitangahomem.com.br.
Bom, tenho notado pelo google analytics que um grande percentual de visitantes acha meu blog procurando por Preloaders, os famosos “carregando” para sites em flash.
Baseando-me nisto e em um tutorial simples do gotoAndLearn(), fiz um resumido em português para o pessoal que precisa de um preloader em as3.
Bom, como eu mesmo disse é simples o preloader, usando basicamente, objetos das classes:
- Loader
- URLRequest
Eventos:
- Event.COMPLETE
- ProgressEvent.PROGRESS
Explicações e justificativas:
Esse preloader irá carregar um único filme e inserí-lo no palco no mesmo nível onde estava a barra de progresso e informação de percentual carregado.
Estou usando timeline para exemplificar a lógica dos eventos, devo bolar uma classe para isso e ensinar a otimizar esse processo de carregamento.
O Flash, do preloader:
Crie um movieclip com a instância de “preloader” e dentro, crie uma barra de progresso com a instância “bar” e uma caixa de texto dinâmica com a instância “info”, como abaixo:

Em seguida, na sua layer actions (sempre crie uma layer separada para os actions, depois esqueça isso e use oop)
O Action Script:
//crio a variável URLRequest com o endereço do filme a ser carregado var mymovie:URLRequest=new URLRequest("movie.swf"); //crio a variável do objeto Loader var myloader:Loader = new Loader(); //adiciono o ouvinte para o evento Complete do loader, chamando a função addMovie myloader.contentLoaderInfo.addEventListener(Event.COMPLETE, addMovie); //adiciono o ouvinte para o progresso do carregamento, chamando a função movieProgress myloader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, movieProgress); //adiciono um evento de mouse o palco, para iniciar o carregamento stage.addEventListener(MouseEvent.MOUSE_DOWN, startLoading); //FUNÇÕES //função do evento Complete do loader function addMovie(e:Event):void { //removendo o filme que informa o carregamento removeChildAt(0); //adicionando o conteúdo do loader no palco, no mesmo nível de onde //foi removido o preloader addChild(e.target.content); } //função do evento Progress do loader function movieProgress(e:ProgressEvent):void { //informando a scaleX da barra de progresso dividindo o carregado/total, //levando em conta que a escala de objetos agora é de 0 a 1 e não mais de 0 a 100 preloader.bar.scaleX=e.bytesLoaded/e.bytesTotal; //informando o percentual de bytes carregados preloader.info.text = String(Math.ceil(e.target.bytesLoaded/e.target.bytesTotal*100)+"%"); } //função que inicia o carregando ao clicar sobre o palco function startLoading(e:MouseEvent):void { //o objeto loader carrega a variável do objeto URLRequest (mymovie) myloader.load(mymovie); }
Salve e teste o filme.
Não se esqueça de criar um filme com um certo tamanho, para que você possa notar o carregamento.
Exemplo abaixo:
Clique para iniciar o carregamento.
Arquivos para download:
Fla: Download
Enjoy

December 17th, 2008 às 5:46 pm
Em as2:
total = getBytesTotal();
carregado = getBytesLoaded();
porcentagem = Math.floor((total/carregando) * 100);
info.text = porcentagem + “%”
bar.xscale=porcentagem
December 19th, 2008 às 9:21 am
Sim, mas não esquecendo de colocar isso dentro de uma função Álvaro.
this.onEnterFrame = function() {
total = getBytesTotal();
carregado = getBytesLoaded();
porcentagem = Math.floor((total/carregando) * 100);
info.text = porcentagem + “%”
bar._xscale=porcentagem ;
if(porcentagem >=100) {
delete this.onEnterFrame;
//next action
}
}
January 5th, 2009 às 2:34 am
olha cara vc é muito bom mesmo nesse mundo virtual. seu estilo de mostrar o produto esta de parabens.
vou começar a visitar seu blog. pra ver as novidades
um abraço espero um dia chegar proximo desse seu conhecimento.
February 22nd, 2009 às 6:55 pm
Parabens pelo seu site, colega! Nao gosto muito de fazer comentarios, mas o seu site esta muito bom mesmo! Continue com esse bom trabalho!
March 10th, 2009 às 2:49 pm
Olá Eder,
o timeline do meu site está assim…
layers frames
1 2 3 4 5 6 7 8 9 10
preloader oa
as(site) x xa
rotulos x o o o o o o o o o o
paginas x o o o o o o o o o o
botoes x o
fundo x o
x= Blank Keyframes
o= Keyframes (considere como bolinhas pretas)
a= actionscript 3
o preloader ficou piscando sem parar durante toda a navegação…
no as(site) soh tem o stop();
agradeço a ajuda
March 11th, 2009 às 9:42 pm
Marcelo.
Esse pre-loader não é pra ser usado como no as2, em timeline.
Se você colocar seu filme seguindo a dica, funcionará perfeitamente.
A forma como sua timeline está posicionada não interfere em nada.
Não crie em as3 como se fosse as2.
May 4th, 2009 às 9:35 am
E se eu quiser fazer o preloading da animação mesmo!
Tipo!
Sem querer fazer load de um swf externo mas sim do Atual!!!
como seria?
May 4th, 2009 às 5:25 pm
Dieggo, o AS3 não foi feito para ser utilizado como no AS2, por questão de controle. Mas é possível sim usar um preloader como no AS2.
Eu criei um filme com dois quadros, no quadro 1 as ações e no quadro 2 uma foto, confere o script.
May 15th, 2009 às 9:08 pm
Eder, boa noite cara,,, me tire uma duvida.
Se eu quiser fazer este preloader, mas que o swf carregue sem precisar clicar.. como q faço?!
Desde já obrigado.
Mt legal o blog cara!
May 18th, 2009 às 1:36 pm
Olá Dêivide.
De várias formas, você pode criar uma função que executo o carregamento e ao invés de fazê-la responder ao evento do mouse, pode apenas executá-la no fim do script.
Ou simplesmente executar o load a partir do loader:
myloader.load(mymovie);
June 22nd, 2009 às 1:19 pm
Eder… Soh agora pude retomar minhas atividades (período de provas na facul).
Bom, funcionou perfeitamente!
Muitíssiimo obrigado meu caro…
January 17th, 2010 às 11:34 am
Como eu faço para colocar um preloader para cada swf que eu for carregar dentro de um site flash?
January 26th, 2010 às 2:43 pm
@Gisele
Para cada swf crie um frame e coloque o código
February 1st, 2010 às 5:45 am
Olá Eder, estou com um problema em mãos.
Criei todo o site OOP como manda o figurino, mas no preloader, fiz o esquema de dois frames e no primeiro frame pus apenas o movie do preloader e no segundo o site propriamente dito. na minha Main o metodo principal chama os listners do preloader, no evento complete dou gotoandstop(2) dou um delay de 500 millessegundos para chamar os listners do frame 2. mas quando publico o filme, simplesmente não vou para o frame 2… o q pode estar acontecendo?
March 15th, 2010 às 7:29 am
Obrigada Álvaro, acho que não expliquei direito, é que eu queria saber como fica o código para carregar movieclips com nomes diferentes:
var mymovie:URLRequest=new URLRequest(“movie.swf”);
//esse é o swf que vai carregar, conforme eu clicar no frame 10, é só modificar o nome ou tem que descarregar o outro movieclip do frame 5?
April 12th, 2010 às 3:20 pm
JESUS como eu sou burro!!!!
não consegui ainda!