Preloader simples animado em Flash (Estilo SON) em 10 passos
ago 6th, 2008 por Tiago Kasa
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.