Preloader com barra de progresso e porcentagem

Por Felipe Cardozo em 30/04/2008 - 15:14 > 107.517 Visualizações > 450 comentários

Olá meus queridos!
Conforme pedidos por e-mail, segue mais uma sugestão da galera. Estou tentando fazer as vídeo aulas de acordo com cada pedido que é encaminhado para nós.

Hoje, iremos aprender a fazer um preloader no Flash com barra de progresso e porcentagem. Quem quiser ver um preview do preloader, clique aqui.

Espero que gostem!

Assista à vídeo aula

Nota:

No primeiro frame da camada “actions”, você colocará 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);
}

No segundo Feyframe da mesma camada “actions” você colocará este código:


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

Na camada Texto, instancie como “mostrador” e na camada barra, instancie como “barra_mc“

Felipe Cardozo é sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Siga o autor no twitter: @lipecardozo | Site do Autor : www.mxmasters.com.br

Siga o MX Masters no twitter e receba nossas atualizações: @mxmasters

http://www.gartindesign.com.br Gi Guerreira

Felipe,
Muito obrigadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, estou até emocionada, nenhum preloader havia funcionado, parei há 4 anos e estou mais perdida que cego em tiroteio com tantas novidades, eu sou da época do flash 4 que estava tudo semi-pronto, tuas dicas têm sido a salvação da minha alma,kkkkkkkkkkkkkkk, valeuzãooooooooooooooooooooo !!!
Poa-RS
Barbara

Oi, foi muito bom.

Estou fazendo um projeto final do meu curso de programador, e estou querendo botar o carregando integrado com o site HTML, para botar as animaçoes no site estou usando Dreamweaver, mais como integro o carregando com o site?
Desde ja agradeço.
Fillipe

Filliper Cardozo tenho uma duvida ; essse Frame Barra ele cresce da esquerda para direita nao e ? mas se eu quesesse colocar uma imagem (uma animação) seguindo a BARRA do começo ao fim como seria ? vlw abraços!
Rafael Rodrigues Barbosa

Olá Cara (Amigo) eu gostaria de saber como Fazer uma Barra de idioma para o meu site que estou para desenvolver, Tipo assim inglês,Portugues,Spanhol,Japonês,Chinês,Chinês Tradicional,Coreano

Se você poder me ajudar eu agradeço !!! Abaços até mais
eltin182

Tbm eh massa fazer um preloader desse em ajax, nossa, sei la, tantas opçoes q sempre q vou vendo aki as video aulas vou ficando mais e mais perdido kkkkkkkkkkkkkkkkkkkkkkk ^^
Francis Michel Pereira

Bom dia.
Muito bem feito esse preloader e muito simples e funcional. Mas gostaria de saber te teria como usar
esse preloader como entrada em um site, onde a porcentagem carregada seja a porcentagem carregada do site. O site nao esta em flash, somente algumas animações.
Obrigado desde ja.
http://www.mxmasters.com.br David CHC

@Francis, nesse caso vc teria q procurar esse preloader feito em javascript.
ucm

Por favor amigos, como faço para ficar repetindo o clipe de um banner, depois que coloquei o código stop em um frame.
gabriel alves

esse serve em todos os flashs né? O.o
UCM

Refazendo a pergunta.
Por favor amigos, qual código uso para ficar repetindo o clipe de um banner feito em flash, depois que coloquei o código stop em um frame?
http://www.nnworpg.rg3.net Trovão

UCM, eu não entendo muito do assunto, to aprendendo a mecher no flash pra valer mesmo agora, mais creio que o codigo seja: play();

pois o stop(); para o clipe e o play(); faz ele se movimentar novamente

Abraço
Ricardo Souza

Caramba ficou muito bom está video aula adorei meus parabéns!!!
http://www.tomscheider.com Thomaz

Parabéns pelo tutorial, excelente! Entendi perfeitamente suas explicações.
http://awebmasters.com.br nuvenus chovendus

muito show cara, valew
Angelo Márcio

Grande Felipe Cardozo!!! Tutorial show de bola! Justamente o que eu estava procurando a muito tempo. Simples, fácil e funcional. Parabéns e obrigado ao MxMasters por existir.
http://www.criedesign.com Rodrigo Fernandes

Caro Felipe, FANTÁSTICO a sua vídeo-aula…muito boa….
sempre quiz aprender a fazer isso e nunca conseguia e vc foi o unico que me fez aprender….obrigado

So uma dica pros amigos, eu tinha feito e o preloader e funcionou perfeito, mais quando dava 100%, não abria a cena 2.

O problema: O script que o Felipe colou aqui esta em INGLÊS, e o meu flash é portugues, ai, tive que traduzir a palavra: “Scene 2″ para “Cena 2″ em portugues. Ai funcionou…

Valeu a todos.

Abraços Felipe!
http://www.aprendaviolaoemcasa.blogspot.com Dedé

Oi Felipe Cardozo!!! valeu pela vídeo aula… olha.. estou com um problema…
tipo eu fiz a barra, né…(deu tudo certo)…mas aí eu não consigo botar meu site(que eu nao hospedei ele ainda) depois na cena 2… como eu faço???
valeu !
http://aindanonline rafael

ficou show cara
o som da sua voz ficou um pokin baxo mais perfeito nunca mais vou precisar pesqueisar sobre o assunto ^^ =p
Joao Victor

Ola tenho um problema, quando eu salvo em swf nao abre o loading depois a imagem so aparece a imagem (como quando nao faz “simulate download”) como fasso para aparecer o loading primeiro?
http://www.gameseciavirtual.com.br Alan

muito bom essa aula achei maravilhos coloquei o material nesse site http://www.gameseciavirtual.com.br e esta muito bacana e nesse outro site tambem coloquei http://www.homeaironline.com.br achei otimo
Gerge ax

O cara a video-aula esta bem bacana, mas eu queria fazer isso para o filme sempre ser carregado, tipo quando a gente salva ele em .swf a barra deixa de existir!!!
http://www.onibusarte.com Emerson

Pô, até que enfim achei um tutorial nota 10!!!Parabens e obrigado Felipe!Salvou a patria!
Matheus

OI Felipe,

por favor me tira uma dúvida: tem como eu criar esse preloader para inserir no meu HTML??? meu site está sendo feito todo no fireworks, só estou importando pro dreamweaver e linkando, mas gostaria de colocar essa animação pra carregar as páginas do site….tipo quando eu clicar em ex: ”Contato” > entrar a animação e exibir a página …. sem a pessoa ter que ficar esperando pouquinho por pouqinho …… isso é possivel?

desde já agradeço e aguardo sua resposta ….
Stickman06

egua velho ficou muito bom adorei! vlw por postar ae
Teleco

que estranho, este preloader funciona no Chrome, no Firefox mas trava o site no IE O.o”
Roney

Muito bom manu! eu so gostaria de saber se da pra eu colocar uma imagem de fundo no Scene 1!

exemplo: para o preloader carregar sobre a imagem! ao invez de colocar um fundo com uma cor so!
to precisando dessa moral galera vlw!
http://www.musicalharmonia.com.br GILBERTO

Bom dia. Vi seu video e fiz o PRELOADER. Minha duvida é a seguinet. Como eu coloquei as alianças em 3d no site, quando a pessoa entra fica um branco até carregar. Como faço pra inserir um preloader nesse fundo branco para a pessao nao pensar que esta com problemas o site e se entrar na parte de contatos, como faço para tratar os campos data, horário, etc, permitindo camposo obrigatórios e verificar ao enviar se tudo esta preenchido

grato
http://www.andreclaro.com.br andré Claro

olá, gostei muito da aula, mas é o seguinte, a minha animação funciona perfeitamente, apos eu inserir a cena 1 e fazer o preloader nela, a minha animação não roda muito bem, mas o preolader funciona perfeitamento…
alguem sabe o pq?
Anderson Fernandes

Olá Felipe antes de mais nada queria agradecer por todos conhecimento passado para nós que estamos te acompanhando. Sou um aluno assíduo em suas videos aulas para web e é por isso que venho agradecer. Gostaria que se possivel trocasse o player para expansão de tela e melhorasse a resolução para esclarecer algumas duvidas nas proximas aulas. Continue assim garoto.

Muito Obrigado por compartilhar seu conhecimento !!!!
kelly

Oi sou iniciante no flash uma duvida

no flash na camada texto como faço pra aparecer a instance name? no meu nao aparece….

tenho que ja transformar ele em um movie clip? e dar o nome da sua instancia mostrador?

………

me add no msn kellyhorio2010@hotmail.com
Giuliano

Felipe fiz tudo certinho , fico mto massa
mas tem um problema, a minha barra de progresso so carrega ate a metade
o que eu posso fazer pra corrigir isso
Tifanyk

querido amigo Felipe, cumpri todas as etapas ref ao preloader no Flash com barra de progresso e porcentagem e para finalizar coloquei para abrir um .swf, deu tudo certo, somente a apresentação do .swf fica piscando e não aparece por total, vc pode me informar o pq?
Tifanyk

kelly, creio que vc tem que no texto (veja o filme) transforma-lo em dinamico.
Csrfelipe

caraka velho so seu fã.
ksoaksoka
mt bom
Cristiano

Caro felipe, ótima video aula, consegui finalmente criar um preloader com uma 2 cena.. agora gostaria de modificar para em vez de uma barra ele preenche-se uma imagem..teria como ensinar? grato
Ac-arts

ola amigo, fiz conforme assisti o video, mas quando chega no 100% nao abre imagem fica parado no 100% o que faço?
Che

big!
Yann Anderson

Você deve determinar para onde vai após ter carregado, no meu caso eu coloquei gotoAndPlay(“Scene 1″, 3); pois é onde começa meu vídeo.
Luiz Otavio

primeiro parabens pelo tuto!
ficou otimo!
mas ja fiz o site td em flash como devo proseguir para colocar esse preload para abrilo!
c puder add no msn dadi_milico@hotmail.com!
grato pela atenção
Lee Samson

Olá , Gostaria de saber se é Possível fazer um Preloader em flash mas para por em um site feito em HTML.
sendo qe só o preloader seria em flash e um banner no topo.. sera qe tem como.. ?
como ficaria? Abç
Daniel – RecifePE

Já assisti algumas video aulas da Mx, são muito boas como sempre, Vcs estão de parabéns.
Thiago TI

Perfeito otimo post! parabéns
Sousamuniz

Parabéns pela aula. Estou com uma dificuldade, o Preloader não aparece no IE. O que devo fazer?
Antonio

Companheiro, muito bom sua explicação sobre o preloader. És um excelente professor. Parabéns e obrigado.
Mariana

Olá, Muito boa sua aula… parabens… estou sempre acompahando as aulas de vcs.
Eu fiz tudo do zero e funcionou direitinho…

mas tenho uma pagina de site em flash… e tentei colocar essa scene com o preloader… mas ele não esta funcionando.

a scene do site tem várias layers e vão do frame 1 ao 195.

Isso influência em alguma coisa?

desdee já agradeço
L E O Mss

Mtu Obrigado! Funcionou certinho… finalmente eu consegui colocar um carregando nos meus sites XD Vlw!!!!
Gspiava1

meu…..o cara explica muito bem….!!!!!
Tiago Barrio

Muito boa a video aula Felipe!
Sempre me ajudando,,,,mas esta ocorrendo um erro,,,aparece carregando tudo direitinho mas quando da 100% nao muda para a cena 2,,,pq sera?
Obrigado
Tiagolr2011

Olá, muito legal a aula, porem tenho uma duvida, tem como puxar ao invés de uma imagem, um arquivo html? A pagina home do meu site no caso.
Abraço e parabens pelo site…
Camilla di Martino

Felipe, bacana o tutorial!
Mas estou com uma dificuldade:
Já havia criado o site com várias cenas. Para seguir seu tut eu criei uma nova cena, nomeei preloader. Nos códigos alterei com o nome da cena correspondente no meu arquivo:

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(“a procorte”, 1);
}