[Resolvido] Preloader em círculo

[guiobom131 0]

Olá, muita gente gostaria de fazer o preloader em círculo (Exemplo). Então aqui está o passo a passo.

Abra o flash e crie mais um quadro chave.

No 2º quadro insira a ação stop(); e uma coisa pesada no palco (imagem, som, etc) para haver tempo de carregamento

No 1º desenhe uma coroa circular como a fig.1 (todas as figuras citadas estão neste link). Desenhe duas linhas verticais maiores que o diâmetro da coroa. Centralize-as com a coroa, selecione a segunda linha, abra o painel Transformar (Ctrl+T) e coloque a rotação em 7.2. (Isso significa 2% de 360º, a coroa toda). Seu palco deve estar parecido com a fig.2. Agora delete algumas coisas até igualar-se à fig.3, transforme em clipe de filme (movieClip) com o ponto de registro no canto inferior esquerdo e instancie-o de "p2". Abra o movieClip e delete as linhas que foram desenhadas, deixando apenas o arco de 7.2º como mostra a fig.4 (Obs.: a fig.4 está animada apenas para mostrar o ponto de registro).

Vamos entender o que fizemos até agora: criamos um movieClip chamado "p2" com um arco de circunferência de 7.2º, por que isso? 7.2º é 2% da coroa original, isto significa que a animação ocorrerá a cada 2% carregado. Para terminar, crie um campo de texto dinâmico com nome "porcentagem" e escreva as ações do 1º quadro:

stop();

atual = 2;

ir = true;

onEnterFrame = function () {

// Define a porcentagem e o texto que irá aparecer

porcem = getBytesLoaded()*100/getBytesTotal();

porcentagem.text = Math.round(porcem)+"%";

// Quando a diferença for maior ou igual a 2...

if (porcem-atual>=2) {

// duplicará o movieClip anterior...

duplicateMovieClip("p"+atual, "p"+(atual+2), atual);

// fará sua _rotation ser 7.2 maior que o MC anteior, causando a impressão de que é um círculo...

eval("p"+atual)._rotation = eval("p"+(atual-2))._rotation+7.2;

// atual aumentará

atual += 2;

}

// Quando 99% do filme for carregado ele continuará

if (atual>99 && ir) {

for (i=2; i<=100; i += 2) {

removeMovieClip("p"+i);

}

play();

ir = false;

}

// Fim

};

Pronto! Agora crie o fundo, mude as cores e tamanhos de acordo com seu projeto.

Tchau!