preloader, modo mais limpo de fazer.

[Jair Humberto 2]

Olá pessoal,

 

eu nas minhas "fuçanças flashiânicas" acabei encontrando um método de fazer um preloader bem melhor

do que os que conhecemos.

 

ao invés de usarmos três frames como antes(metodo antigo), vamos usar apenas um frame.

 

primeiro passo é você criar um movie clip, faça uma animação nesse movie Clip, o que quiser fazer, pois vamos fazer

esse movieclip virar um preloader.

 

edit: coloque um stop() no primeiro frame do seu MC

 

uma vantagem disso é que podemos dar adeus à barrinha, pois agora temos N formas de fazer um preloader.

 

após criar seu MC, instancie ele como preloader.

 

centralize ele no stage(isso também nem é necessário), agora crie uma outra layer e a denomine actions.

 

coloque nessa layer o seguinte código:

 

stop();this.onEnterFrame = function(){	var loaded = this.getBytesLoaded();	var total = this.getBytesTotal();	var percentage = loaded/total;	preloader.gotoAndStop(Math.floor(preloader._totalframes*percentage));	if(loaded == total){		delete this.onEnterFrame;		gotoAndStop("Scene 2", 1);	}};

simples não?

esse é um modo mais limpo que desenvolvi para um preloader, ainda vou tentar melhorar algumas coisas

 

quanto a explicar o codigo acho que nem é necessario porque é muito simples. Mas se surgir alguma dúvida postem

aí que eu respondo.

 

Ah e desculpem pela ausencia de imagens, eu ainda estou na escala evolutiva no aprendizado de como passar o que se sabe.

e Lembre-se que o preloader só funciona se seu arquivo flash for realmente grande. por isso pra testar ele

põe um texto enorme aí no arquivo.

 

edit: Ah lembrando AntonioSP contribuiu para eu chegar a esse ponto analisando o codigo e corrigindo alguns pontos

Comentem por favor! *__* :)

[Lucas Mello 0]

Muito bom Jair pela iniciativa e por mais um belo tutorial!Mas ficou uma dúvida você falou em colocar um texto grande no meio do Stage mas no primeiro frame mesmo?abraço cara e espero mais tuturiais bons iguais a este!

[Jair Humberto 2]

o texto grande é na Cena 2.

 

a Cena 1 deve conter só o preloader e o codigo,

 

esse texto grande é só pra testar o preloader.

 

porque se seu arquivo nao for grande, o preloader nem vai mostrar carregando.

 

if(loaded == total){	delete this.onEnterFrame;	gotoAndStop("Scene 2", 1);}

lembra dessa parte? gotoAndStop("Scene 2", 1); assim que o preloader carregar ele irá

automaticamente para a cena 2 é de la pra frente que tem que conter todo o conteudo do arquivo.

 

:)

 

Abraço

[Lucas Mello 0]

Obrigado Jair Humberto!

Agradeço por ter respondido minha dúvida e por fazer esse incrivel tutorial! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

abraços

[Jair Humberto 2]

Ah tudo bem

 

valeu pelo apoio Lucas! :)

 

editado: tem como também colocar informações como porcentagem carregada, bytes carregados, bytes totais,

para aqueles que têm dúvidas sobre isso eu explico:

 

faz primeiro a seguinte mudança no código:

 

stop();this.onEnterFrame = function(){	var loaded = this.getBytesLoaded();	var total = this.getBytesTotal();	var percentage = loaded/total;	_root.perc = Math.floor(percentage*100); /*cria uma variavel global para percentagem*/	_root.carregado = Math.floor(loaded/1024)+" KB"; /*variavel global com Kilo Bytes carregados*/	_root.tudo = Math.floor(total/1024)+" KB"; /*cria uma variavel global com Kilo Bytes totais*/	preloader.gotoAndStop(Math.floor(preloader._totalframes*percentage));	if(loaded == total){		delete this.onEnterFrame;		gotoAndStop("Scene 2", 1);	}};

criadas as 3 variaveis globais acima agora é so você entrar no seu MC, e criar 3 campos de texto dinâmico e posiciona-los onde quiser.

 

quando você seleciona um campo de texto dinâmico, na barra de ferramentas propriedades, aparece um campo Var,

nesse campo você insere a variavel global que o campo de texto irá receber, por exemplo _root.perc

 

na imagem abaixo eu sublinhei de vermelho o campo Var que eu falei acima

 

 

Se tiverem alguma dúvida postem aí. :)

 

Ah, alguém poderia me dizer onde eu hospedo imagens sem ser no meu proprio servidor, mas de forma que fique permanente?

 

editado: esse preloader só funciona com AS 2 , então para quem usa flash 9, você terá que criar um arquivo usando AS 2. Eu ainda estou tentando entender AS 3 para ver como converter esse preloader para AS 3. Mas se alguém já souber e quiser postar aqui, ficaremos agradecidos. :)

[Lucas Mello 0]

Jair eu pensei que não tinha como ficar melhor o tutorial mas você arrassou agora! :D :DParabéns! ;)

[Jair Humberto 2]

Valeu Lucas ^_^mas há ainda formas de melhorar ele, eu não, mas alguém que saiba como convertê-lo para AS 3.ai ficaria melhor ainda! :)

[wdc_black_ 0]

cara fiz tudo certinho mas n ta dando certo :/

olha ai

 

http://www.wdc-clan.com/intro.html

[Jair Humberto 2]

Olá wdc_black_

 

ué eu acabei de testar aqui e deu certo! o.O

 

dá uma olhada:

 

http://www.weblightbrazil.com/imaster/tuto...oader/teste.swf

 

eis aí o fla

 

http://www.weblightbrazil.com/imaster/tuto...oader/teste.fla

 

da uma olhada , qualquer dúvida me fala que eu explico

 

editado:

ah galera façam a mudança do codigo abaixo, senao nao mostra o sinal "%",

 

_root.perc = Math.floor(percentage*100)+"%"; /*cria uma variavel global para percentagem*/

outro fator importante é que a parte do codigo abaixo

 

if(loaded == total){		delete this.onEnterFrame;		gotoAndStop("Scene 2", 1);	}

faz com que ao terminar de carregar vá para a cena dois em STOP, quero dizer com isso, que se você nao quiser

que seu site/filme/arquivo pare na cena dois terá que usar da forma abaixo. ou então por um play() no primeiro frame

da cena 2

 

gotoAndPlay("Scene 2", 1);

editado denovo:

 

quero lembrar que quanto mais frames você por no seu MC preloader melhor, mais perfeitamente o preloader funcionará

 

Abraço. :)

[wdc_black_ 0]

eu so n entendi 1 coisa.eu vou criar 1 documento em flash as 2.0no primeiro layer e no primeiro frame irei cria um MC e coloca la os codigos e os campos de texto dinamicos certo?ai o resto do meu clipe, eu ponho no segundo layer na cena 1 ou dentro do MC?abraço

[Jair Humberto 2]

Olá wdc_black_

 

no primeiro layer e primeiro frame você põe o MC preloader, no segundo layer primeiro frame,

você põe o código,

 

dentro do mc preloader, você faz uma animação para um preloader qualquer e cria 3 campos de textos e coloca

as variaveis que cada um irá receber. Mas nao esquece de colocar um stop(); no primiero frame desse mc.

 

todo o conteudo do seu arquivo, vai na cena 2, na cena 1 fica só o preloader.

 

para entender melhor, baixa o fla que eu postei aí em cima e dá uma olhada,

 

abraço.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[wdc_black_ 0]

ahhhhhhhhhhh, ;)agora entendi hehehehehvlwssss :Dmas ele n roda o resto da animacao que esta na scene 2 @@www.wdc-clan.com/intro.htmlolha ai :/abraçoo

[João Melo 1]

Sem querer ser chato, mas este já tem em um componente desde o MX.Mas é muito bom saber q podemos contar com os nobres colegas.

[wdc_black_ 0]

Jair Humberto, vlwsssss por tudo, fico perfeita minha intro :Pdeu tudo certoda uma olhada aiwww.wdc-clan.com/intro.htmleu vo melhora ela mais ainda :Pmas por enquanto ta ótima :Dvlwsssssssss :***so 1 coisinhaa animacao so aparece quando ta 17% ja carregado:/como posso resolver isso?

[Jair Humberto 2]

wdc_black_, esses 17% é o tamanho do preloader em relação ao tamanho total do arquivo,

ele nao mostra carregando =/, ainda nao sei como resolver.

 

e João Mello, mostra pra nós! :)

sempre é bem vindo novos conhecimentos.

 

eu já tinha visto um tutorial bastante legal no link abaixo a respeito do

componente Loader, e Progressbar do flash,

 

http://www.imasters.com.br/artigo/3861

 

mas o ruim é que ficamos presos à barrinha! não temos liberdade de criação do preloader! =/

 

e wdc_black_, vou tentar descobrir, se tem uma forma de mostrar carregando do 0.

 

e parece que o nosso preloader não funciona no IE, pelo menos se o acessamos de uma pagina externa,

mas se estamos na mesma pagina, limpamos o cache, e mandamos atualizar, aí já funciona. Vou postar isso no forum pra ver se alguém sabe :/

[GabrielFerrari 41]

Cara super 10 seu tutorial eu que so um cara que apanho com esse tipo de coisa consegui fazer :D

[Jair Humberto 2]

Valeu Thelon,

 

como o Joao Melo falou, o flash já tem um preloader que é componente, que é o Progress Bar que eu postei

os links do tutorial aí em cima,

 

agora vou mostrar como esse preloader que eu desenvolvi, nos deixa livres da barrinha, para escolhermos infinitas formas de fazê-lo

 

olha o fla aí:

http://www.weblightbrazil.com/imaster/tuto...oader/intro.fla

 

ah sintam-se a vontade para se inspirarem na idéia, mas não copiem esse preloader por favor, desenvolvi ele para um site

de um cliente que estou fazendo :P

 

EDIT: ah e wdc_black_ obrigado por lembrar hehe, o link pro swf: http://www.weblightbrazil.com/vitrine

 

abraços.

até a proxima

[dead_inside 0]

E como colocar um efeito easing neste preloader de modo a deixa-lo mais suave no progresso da barra?

 

Exemplo: http://www.move-me.com/main/index.html

[Jair Humberto 2]

quanto mais frames tem o preloader, mais suave será o progresso da barra.

 

agora aqueles efeitos lá, quando termina de carregar o preloader, é so editar o action Script , exemplo:

 

você faz uma animação de 50 frames nesse preloader, e acrescenta do frame 50 ao 70 outra animação de saida do preloader,

 

aí é so editar o AS:

 

preloader.gotoAndStop(Math.floor((preloader._totalframes-20)*percentage));	if(loaded == total){		preloader.gotoAndPlay(51);		if(preloader.totalframes == preloader._currentframe){			delete this.onEnterFrame;			gotoAndStop("Scene 2", 1);		}	}

esse tipo aí mais ou menos, recomendo por um stop() no inicio e no fim do preloader ^^

não testei o código então se tiver algum erro, é so falar,

 

ah lembro mais uma vez, quanto mais frames tiver o preloader, mais suave será o progresso,

 

PS.: engraçado eu que bolei esse preloader :( no entanto não consegui implementa-lo da ultima vez,

não sei o que deu errado, com vocês está tudo certo?

 

Abraços.

[Profº Felippe 0]

Olá caro colega ..

 

Gostei muito de seu post e resolvi adapta-lo pra meu próprio site, O meus que estava com problemas com o Preloader ..

 

Já tinha a idéia de implementar os quadros de "saída do preloader" como citaram acima ..

E resolvi implementar os cods AS que você sugeriu ...

 

Porém parece q tem algum erro sim ... entre a linha 11 e 14 ..

Perceba que o Mc travou no começo da saída do preloader..

 

preloader.gotoAndStop(Math.floor((preloader._totalframes-36)*percentage));	if(loaded == total){		preloader.gotoAndPlay(164);		if(preloader.totalframes == preloader._currentframe){			delete this.onEnterFrame;			gotoAndStop("Scene 2", 1);		}	}};

Obs: Tentei mudar o gotoAndStop, no desespero.. rsrs mas ñ tinha nada a ver com ele mesm ...

Me parece algum outro errinho ... O Debbuger naum diz nada provavelmente eu q devo estar "comendo bola" na lógica da coisa ...

 

Segue o link do .swf:

http://www.flashtest1.cjb.net/

 

 

Abraço ...

e Ótimo trabalho ...