Criando um Preloader Circular

Vamos mostrar neste tutorial, como criar um preloader circular em flash com algumas animações, usando somente um filtro e algumas cores diferentes.

Passo 1

Crie um novo documento Action Script 2.0 e vá até Modify >Document (CTRL + J) e faça essas configurações:

Criando um Preloader Circular

Com a ferramenta Oval Primitive Tool (O), desenhe um círculo com 100 de largura e 100 de altura com a cor #222222 e sua linha com #333333. Coloque o “Inner Radius em 90” e depois alinhe ao centro utilizando o Painel Align (CTRL + K).

Selecione o círculo, e com o botão direto escolha a opção “Convert to Symbol” ou simplesmente pressione F8. Selecione “Movie Clip” e clique em Ok.

Dê um duplo clique no círculo (após a conversão para Movie Clip), e crie uma nova camada chamada “circular_animation”. Renomeie a camada do círculo anterior para “circle”, boquei-a em seguida.

Criando um Preloader Circular

Passo 2

Agora vamos colocar o efeito de animação circular.

Novamente com a “Oval Primitive Tool (O)”, desenhe outro círculo com 20 x 20px e preencha-o com a cor #99FF00. Faça novamente a conversão deste objeto para Movie Clip.

Através do Painel “Filters”, adicione o efeito “Blur” com 12 X e 12 Y em “High Quality”.

Com a “Free Transform Tool (Q)” selecione o pequeno círculo e mova-o no centro da linha do círculo grande. Pressione F8 e converta também para Movie Clip.

Clique 2x no objeto verde e coloque um novo quadro chave no frame 60. Para isso, clique no quadro 60 e pressione F6.

Clique com o botão direito no Frame 1 e selecione “Create Motion Tween.”

Em seguida configure as propriedades desta forma:

Passo 3

Volte para a cena principal “Scene 1” e insira uma nova camada e coloque o nome de “text”.

Com a ferramenta de texto (T), adicione o texto “Loading” no centro do grande círculo, selecione-o agora e converta para Movie Clip, em seguida dê um duplo clique sobre ele e configure como segue:

Criando um Preloader Circular

No final, vá de novo à cena principal e insina um “keyframe no frame 2”, e para os 2 frames (1 e 2) pressione F9 em cada um e coloque o código actionscript “stop ();” sem aspas.

No frame 2 exclua todos os objetos e coloque um texto qualquer como “Content Loaded” ou “Conteúdo carregado”, você também pode colocar uma imagem grande para testar o carregamento.

Criando um Preloader Circular

Agora selecione o círculo grande no frame 1 e pressione a tecla F9 para abrir o painel de ações. Digite o seguinte código:

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

Bom, chegamos ao fim. Se por acaso vocês quiserem adicionar mais efeitos com cores diferentes, simplesmente altere as cores de base e tente modificar sua posição ou rotação.