Neste primeiro tutorial, vamos mostrar como fazer um preloader com barra de progresso e percentual, utilizando AS3.

Ele utiliza somente o primeiro frame do movie e por isso é extremamente fácil e prático de usar.

Aqui vão os passos de como usar o preloader em seu site em flash:

PASSO 1

No primeiro frame do seu .fla, cole o código abaixo:

stop();

//importando labraries do Flash
import flash.display.*;

//Pára neste frame para calcular os bytes carregados
this.stop();

//Cria um listener para ativar a função de loading
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, CARREGANDO);

/*Na função CARREGANDO, é calculado o percentual carregado com base no total de bytes do filme e o total carregado até aquele momento. Esta função
calcula o percentual, esticando a barra do preloader e mostrando no texto dinâmico, o percentual.*/
function CARREGANDO(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTotal*100;

//Estica a barra do preloader. Não esqueca que sua barra deve ser chamar loadbar
loadbar.scaleX=pcent/100;

//Mostra o percentual carregado no texto dinâmico. Seu texto dimâmico deve ser chamar percentual_txt
percentual_txt.text=int(pcent)+"%";

//Quando o flash estiver totalmente carregado (100%) irá automaticamente para o próximo frame.
//Você pode mudar o comando de gotoAndStop(2) para gotoAndPlay(2)
if(pcent==100){
this.gotoAndStop(2);
}
}

PASSO 2

Crie um campo de texto dinâmico no primeiro frame, e chame este campo de percentual_txt

PASSO 3

Crie um retângulo de aproximadamente 200px de largura por 15px de altura. Transforme este retângulo em MovieClip (atalho F8), definindo o ponto de registro (Registration point) no Centro à Esquerda. Com este MovieClip no primeiro frame, selecione este Movieclip e mude seu nome (Instance Name) para loadbar.

Teste seu SWF. Para testar o preloader em ação sem precisar publicar ele no servidor, tecle CTRL+ENTER duas vezes seguidas.

IMPORTANTE: Lembre-se que no primeiro frame deverá ter o mínimo de conteúdo possível, assim o flash não demorará tempo demais para mostrar o preloader, já que ele carrega frame a frame, em sequência.

Dúvidas, postem abaixo que responderemos sempre que possível.