Simples Preloader



>Prévia



01. Crie um novo documento flash. Pressione Ctrl + J na tecla do teclado (Document Properties) e defina suas dimensões como quiser. Escolha o “background” com a cor branca.defina o “Frame Rate” para 26 e clique em OK.



02. Selecione a ferramenta “Rectangle Tool” (R), crie um retângulo com cor 83BB00 (isso é o código RGB da cor). Confira abaixo.



03. Com o retângulo selecionado vá até o painel “Align” (Ctrl+K) e siga os passos:

1. Certifique-se que o botão “Align/Distribute” está ativado;
2. Clique no botão “Align horizontal Center” (Alinhar ao centro horizontal);
3. Clique no botão “Align vertical Center” (Alinhar ao centro vertical);



Agora, você tem o retângulo alinhado com o fundo.

04. Pegue a “Text Tool” (Ferramenta de Texto) (A) e vá para o painel “Properties” (Ctrl + F3) abaixo do palco. Em seguida, Escolha as seguintes opções:

1. Selecione um campo Texto Estático;
2. Selecione a Comic Sans MS como fonte;
3. Escolha como tamanho da fonte 14 e coloque ela como negrito;
4. Selecione a cor branca;
5. Na opção de renderização, selecione o Anti-alias para legibilidade.



Em seguida, digite “loading” no local em que é mostrado na figura abaixo.



05. Pegue a “Selection Tool” (Ferramenta de Seleção) (V) selecione o texto e o retângulo. Após isto, pressione F8 (Converter para Símbolo) para converter este retângulo e o texto em um “Movie Clip”.



06. Dê um duplo clique sobre o “movie clip” no palco com a “Selection tool” (V). Agora você deve estar dentro do “movie clip”.



07. Após isso, clique no “Frame” 100 e pressione F5.

08. Em seguida, crie uma nova camada acima da camada da primeira e dê nome de “Percent” (por cento).

09. Selecione a camada “Percent”, pegue a “Text Tool” (A) e vá para o Painel de Propriedades novamente (Ctrl + F3) e selecione as seguintes opções:

1. Selecione um campo Texto Estático;
2. Selecione a Comic Sans MS como fonte;
3. Escolha como tamanho da fonte 14;
4. Selecione a cor branca;
5. Na opção de renderização, selecione o Anti-alias para legibilidade.



Em seguida, desenhe um retângulo no lado direito da caixa de texto. Neste rectângulo, você irá digitar 99%. Veja a foto abaixo.



Depois disso, vá para “Var”: coloque "percen1"



10. Após isto, digite no retângulo que foi criado na etapa anterior 99%. Veja a foto abaixo.




11. Volte para a cena principal (Scene 1).

12. Pegue a “Selection Tool” (V), clique uma vez sobre o "preloader" para o selecionar e abrir o Painel de “Action Script” (F9). Em seguida, digite o seguinte código Action Script no interior do painel:

onClipEvent (load) {
total = _root.getBytesTotal();
} onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percen1 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}




Pronto, teste agora o seu Preloader.

>Baixar arquivo (.fla)

Site de origem: http://www.flashvault.net


Um grande abraço a todos.

Como todos os tutoriais são de graça, o pagamento é comentar ;D

2 comentários:

Diego disse...

Legal o preloader

;) valeu

Pablo disse...

Simples mas fundamental para que o visitante não feche a janela.