Preloader simples animado em Flash (Estilo SON) em 10 passos

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

[sourcecode language=’jscript’]
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+”%”;
}
[/sourcecode]

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