Muitos designers têm dificuldades para criar preloaders neste estilo igual ao video de introdução da SON, onde a impressão que temos ao carregar o swf é a de realmente estarmos carregando (enchendo) o logotipo. Vamos ensinar um jeito muito simples, onde o preloader ficará em uma “Scene” isolada da sua animação:
01- O primeiro passo é criar uma nova “Scene” (Shift+F2) onde ficará nosso preloader. É importante deixá-la em primeiro lugar, e para facilitar a renomeie para Load. Nas outras “Scenes” ficarão a sua animação/site:
02 – Crie duas imagens de seu logotipo (do mesmo tamanho), uma versão preenchida e outra “vazia”;
03 – Dentro desta “Scene Load” renomeie a camada para Preloader e insira a imagem centralizada do logotipo “vazio” (Ctrl + R), depois a converta em Movieclip (F8) também com o nome Preloader;
04 – Dê duplo clique sobre este MC (Movieclip) que acabou de criar para editá-lo, dentro dele crie quatro camadas com nomes e a ordem iguais a imagem abaixo;
05 – Dentro da camada “LogoPreenchido” insira a imagem também centralizada do logotipo colorido (Ctrl + R);
06 – Dentro da camada “texto” crie um campo de texto dinâmico (Text Tool), e renomeie a variável para pct. Neste campo será exibida a porcentagem do progresso;
07 – Dentro da camada “BarraVertical” crie um retângulo exatamente sobre o logotipo, ele deverá cobrir o mesmo tamanho do logotipo. Depois o converta em MC (F8) com o ponto de registo em sua base, e o estancie com o nome barra2;
08 – Clique com o botão direito sobre a camada BarraVertical, e depois em “Mask”. Aqui está o segredo deste preloader, na verdade o que ele irá fazer é variar o tamanho deste retângulo de 0 em Y, até 100%. Conforme carregar o swf, vai aumentando o retângulo e consequentemente exibindo o logotipo preenchido.
09 – Saia da edição deste MC e volte para a raiz da sua “Scene” (camada Preloader), clique sobre o MC Preloader e pressione F9 para inserir o actionscript;
10 – Actionscript
onClipEvent (load) {
total = _parent.getBytesTotal();
_parent.stop();
barra._yscale = 0;
}
onClipEvent (enterFrame) {
loaded = _parent.getBytesLoaded();
pct = Math.floor(loaded/total*100);
barra2._yscale = pct;
if (pct eq 100) {
_parent.play();
}
// end if
pct = pct+"%";
}
Como testá-lo?
Pressione Ctrl+Enter para visualizar o video dentro do Flash Player, depois pressione novamente Ctrl+Enter para fazer a simulação real. Caso queira ainda é possível acessar dentro do player View » Download Settings e simular a velocidade da conexão.
É isso aí pessoal, um preloader relativamente simples e com grande impacto visual. Claro que utilizar o logotipo foi apenas uma sugestão (para manter a comunicação visual da empresa), porém o limite é apenas a nossa imaginação.
Qualquer dúvida, é só comentar aqui que responderei com o maior prazer 
…
Link para download do preloader: Download
Loading ...
Muito bom…
Preloader bem facil de aprender.
Com este até desenvolví outros tipo aqueles com circulos coloridos
Otimo consegui desenvolver, e ficou com uma aparência otima, obrigado
BOA TARDE…
ESTOU ENTRANDO NESSE LANCE DE FLASH AGORA E ACHEI POR ACASO EM UM FORUM ESTE LINK… GOSTEI BASTANTE DAS EXPLICAÇÕES E TALS, MAS O MEU FICOU TODO BRANCO E QDO TERMINA ELE APARECE A LOGO E O 100%… PODERIA ME AJUDAR???
Olá Evelin,
Ao que tudo indica você conseguiu criar o preloader corretamente, o problema está apenas na hora de testá-lo. Para ele funcionar é necessário que você tenha conteúdo dentro fla, já que a barra de progressão usa como base de cálculo o tamanho do próprio arquivo.
Faça o seguinte teste:
Insira dentro de alguma Scene, que não seja a do próprio preloader (Load) uma imagem qualquer, apenas para servir como teste e garantir que o seu arquivo ficará mais “pesado”. Depois pressione Ctrl + Enter para testar o seu filme, e Ctrl + Enter novamente para simular como uma conexão de internet. Outra forma de testá-lo é subindo o seu filme para algum servidor, e fazer o teste direto na internet.
Assim que realizar estes testes, comente aqui se foi tudo ok!
Olá, você poderia me ajudar?
EU fiz tudo certinho, mas a porcentagem não aparece
dcpair.com/arenabeats/index2.html
Abraços!!!
Olá Marco,
Você tem que verificar:
- Passo 06: O campo de texto está “Dynamic Text” e com o nome da variável pct?
- Passo 10: Este código abaixo está correto? Pois ele é o responsável por mostrar a porcentagem dentro da caixa de texto:
pct = Math.floor(loaded/total*100);
Abs.
Tiago vc poderia postar o .fla desse documento?
Eu devo ser algum tipo de capivara gigantesca que nao consegue faser nenhum arquivo que contenha “actions” dar certo, sempre aparece erro de sintax.
Bom dia caro amigo, fiz tudo direitinho até agora só aparece a porcentagem e na cena seguinte aparece a imagem, certinho, como faço para qua a logomarca apareça, não estou conseguindo. Só mais uma pergunta, a logomarca deve ser feita no flash ou no photoshop.
Blz Tiago, acho que fiz tudo direito, sou iniciante nessa arte, comigo aconteceu a mesma coisa que com a Evelyn, coloquei uma imagem, como vc mencionou e funcionou ok mas minha imagem não enche ela já aparece cheia, te pergunto o seguinte em vez de um logo vazado coloquei um logo todo branco, inclusive as linhas de contorno ou seja ele sumiu mas esta lá, isso pode ter alterado alguma coisa ? queria que ele se preenchese inteiro na apresentação sem um contorno pré.
Tiago blz, eu novamente consegui fazer direito agradeço do mesmo jeito mas agora estou com outro problema que não sei se acontece por não estar publicado, mas ele agora fica num loop constante carrega abre a pagina e volta a carregar, como faço para carregar e depois que entrar na pagina não carregar novamente ?
Você poderia postar o .fla;
Nós agradeceriamos muito.
Parabéns pelo tutorial, Tiago! Consegui fazer meu preloader e olha que estou tentando isso faz tempo, já vi vários tutoriais e não conseguia (é, sou meio lerdinha mesmo…rs).
E parabéns também pelo site (o design tá bem bonito, limpo!) e pela iniciativa (estamos mesmo carecendo de algo do tipo), boa sorte com o projeto!
Ae pessoal, segue o link para download do preLoader: http://blog.schoolofnet.com/wp-content/uploads/preloaderson.fla
Também já está adicionado no Post.
Abraços
Show de Bola o tutorial, ainda nao tentei fazer, baixei o fla pra estudar mas a scene com o preloading está com as camadas mescladas.
Vou tentar fazer e falo se consegui.
Vlw
cara, muito bom o q vc descreveu…
só um probleminha…. eu já tenho um site pronto e estava faltando um preload, achei esse seu e deu certo num teste q fiz…
na hr de fazer no meu site ele aparece muito rápido e já em 100%e já em seguida rola o site!!
vc teria como me ajudar??
valeu !!!
Oi, po aqui deu tudo certo….
só que quando eu fiz outra cena que seria a cena do meu site,
ele fica dando loop…. o load volta toda hora… como eu faço pro load carregar e nao voltar mais? tentei ver pelo seu arquivo .fla + ta tudo identico…. nao sei oq pode ser
Olá thiago, cara muito bom seu post, so que to com um problema, minha imagem nao carrega inteira, vai mais ou menos ate metade só dai o % vai ate os 100 e carrega o site o que pode ser?
Muito bom, só um probleminha, o preloader não aparece no IE.
Esta carregando na barra do IE O SWF.
Alguma sugestão?
Olá.
Fiz esse pré-loader sem o texto mas seguindo os passos não funcionou…, alguém poderia me ajudar em alguma coisa.
Grato.
Fiz o preload mais não funcionou, apresenta esse erro:
**Error** Scene=load, layer=preloader, frame=1:Line 14: Syntax error.
14. pct = pct+”%”;
Total ActionScript Errors: 11 Reported Errors: 11
qdo mando testar fica “pulando” de uma cena para a outra sem parar… o q será?
Obrigado
Ola Tiago. Parabéns pelo post, fiz varios outros tutoriais para aprender a criar um preloader, mas nenhum deu certo. Este seu tutorial tá muito bom e bem esplicado. Gostaria de saber se é possivel fazer este ou outro preloader para que enquanto ele carrega a porcentagem ele estaria carregando uma pagina html que no caso seria a index.html. Ocorre que esta index.html é um pouco pessada então quando chega-se a 100% o preloader iria abrir a pagina correspondente a home do site ja com todas as imagens carregada. Se puder me ajudar ou indicar um tutorial ou site, fico desde já muito grato.
Um Abraço.
Se puder
Bom dia..
acho que o link está OFF.
Por favor, confere pra nós?!
Muito bom o o tuto!
Muito bom o seu preloader, tudo funcionou perfeito…
mas quando testo, ele vai até a scene 2 e volta….
não para mais…. Como resolver???
Abraços
Muito Bom! Fácil de fazer e de personalizar… sem aquelas complicações desnecessárias rs
Parabéns pela iniciativa
abraços
mto legal esse tutorial
Fala Thiago… mando muito bem nesse tuto, procurei a muito tempo… Então fui fazer um site com esse preloader. Tem todo o conteúdo já pré-montado. Fiz o preloader, igual o tuto, simplesmente abre e diz que está totalmente carregado e vai direto pro conteúdo. Só mostra a imagem carregada com o 100% e vai pra página do site. Fiz, refiz, olhei o tuto varias vezes, peguei o .fla do seu tuto e mesmo assim não tá dando certo. Poderia me ajudar ?
Abraço
Se cuida
E aí Lucas, blz? Vlw pelo elogio…
Tem como vc me enviar o .fla para meu e-mail (tckasa@gmail.com)? Deve ter algo que está passando desapercebido por vc, mas só vendo o arqv mesmo.
Abs cara.
Ola Tiago, parabens pelo tópico,
eu fiz 98% mas acho que tem um erro no código,
te mandei um e-mail com o arquivo, se puder dar uma olhada eu agradeço cara,
brigado.
Parabéns kra, na primeira vez que fiz deu um erro no código, mas na segunda vez deu certo…
eu que tinha feito cagada, tinha colocado os logos e o texto tudo na mesma layer hahahaha (fazer as coisas com pressa não da certo mesmo).
MAIS UMA VEZ PARABÉNS, ÓTIMO TUTORIAL.
Maravilhoso esse tuto, é a primeira vez que consigo fazer e dar tudo certo. Parabéns Tiago.
Muito bom esse tuto,deu tudo certinho.
Teria como fazer carregar da esquerda para direita?
obs:ele carrega de baixo pra cima….eu sei que tem que alterar na action..mas estou apanhando…um abraço a todos!!!
Eu fiz o seu preloader + acho que esse só funciona no MX né?!
tentei no Flash 8 e não roda de jeito nenhum… dah erro na linha 14.
**Error** Scene=Scene 1, layer=Preloader, frame=1:Line 14: Syntax error.
14. pct = pct+”%”;
Total ActionScript Errors: 11 Reported Errors: 11
Saberia como acertar isso? Eu não cosegui pois não entendo muito de action… =/
Cara, você me ajudou e muito, só tenho uma duvida:”como eu faço para carregar apenas o miolo da página sem seja preciso garregar todo o resto, como botoes de menu, banner e tudo ao redor? Me responde quando puder. Valeu!
Parabéns Tiago ! Fiz e funcionou o preloader. A minha dúvida é o seguinte: criei um site em html, porém quando é exibido, carrega aos pedaços. Como aproveitar este preloader, para o site aparecer somente após o carregamento completo ? Abraço !
tiago, foi a melhor explicação de tutorial sobre Preloader que encontrei na net. Muito bom, me ajudou muito.
Obrigado!
eai cara to tentando fazer so que nao vai nem a pau cara ja fiz 10 vezes e da sempre esse erro por favor me ajuda..
Scene=load,layer=preloader,frame=1,line 1 clip events are permitted only for movie clip instances onClipEvent (load){
Scene=load,layer=preloader,frame=1,line 6 clip events are permitted only for movie clip instances onClipEvent (enterFrame){
Tipo quando a animação acaba, ele volta pro preloader
não teria como depois do preload ele fosse pra animação, e não voltasse mais pro preloader? tipo repetir so a animação, mas não o pre-loader
pre-loader > começo da animação–fim da animação > começo da animação–fim da animação> começo da animação–fim da animação…..
assim
não tow entendendo é nada, esse começo ta muito embolado =X
Muito bom, mesmo. Simples e direto, e o mais importante funcional, valeu mesmo.
olá, também estou com o mesmo problema do D4.
Quando a animação acaba ela volta para o preloader. Como resolver isto??
Obrigado!!
Muito bom mesmo o tutorial, Parabéns!!
Boa tarde.
Primeiro gostaria de parabenizar pelo tuto, ficou ótimo, mas….
Quando carrego a página, a mesma não mostra o preloader, só o movie principal.
So que também não consta erros, enfim, nada!!!
Simplesmente não aparece.
o que pode ser?
excelente tutorial
consegui quase tudo mas tenho algumas dúvidas ainda no código
se puder me add no msn grato!
Então se for seguir como ta nao vai funfar..
onClipEvent (load) {
total = _parent.getBytesTotal();
_parent.stop();
barra._yscale = 0;
}
Reparem: barrra._yscale =0;
tem que ser barra2._….
tendeu ? rs
Boa noite amigo! Muito bom seu tutorial! Show de bola! Gostaria de tirar uma dúvida…. O logotipo vazado não enche… Fica sempre ‘cinza’ no meu caso é cor/sem cor; O percentual passa corretamente.
Obrigado!
Ramon
Foi mal! Estava engolindo mosca… kkkk
Funcionou tudo perfeitamente. Perfeito!
Parabéns!