Preloader

Contruindo um Preloader simples

Boa tarde, hoje vou ajudar a criar um preloader simples usando ActionScript 2.0.
A estrutura é bem simples.
Primeiramente, vamos organizar o nosso filme. Abra o Flash, vá em File -> new. Depois configure seu Stage de acordo com a sua preferência. Por padrão as medidas do Stage vem 550 x 400, você pode deixar assim se quizer.
Bom... mãos à massa!
Depois de organizar nosso filme iremos criar a primeira estrutura do nosso preloader. Vá até a ferramenta Rectangle e a selecione. Faça um retângulo mais comprido do que largo da cor que preferir.
Assim:

Depois, vá até a timeline e crie outra layer para a barra. Faça outro retângulo para ser a barra do preloader. Agora já temos o fundo e a barra. A barra você pode fazer usando linear gradiente para ficar bacana o esquema de cores.
Para que a timeline fique mais organizada é uma boa prática renomeá-las colocando nomes que façam referência às estruturas que cada uma comporta. Por exemplo, na layer do fundo renomeie a layer como fundo e na da barra renomeie para barra e assim por diante.

Agora, selecione a barra e crie um MovieClip como o nome mc_barra e atribua barra_mc como Instance Name (nome de intância).

Pronto, a estrutura principal já está pronta. Agora vamos às actions para da funcionalidade ao nosso preloader.

Cria uma nova layer e ronomeie para actions. Clique no primeiro frame dessa layer e pressione F9 para abrir o painel de Actions.
O primeiro comando que devemos colocar é o stop();. Isso porque se não houver esse comando, nosso filme iria começar e seguir adiante. Com o stop(); o filme começa e para ainda no primeiro frame.
A seguir colocaremos um evento de frame, o onEnterFrame = function(), para que o filme fique em um loop até que uma condição seja atendida ou que o loop seja interrompido.
O que devemos fazer dentro desse bloco é o seguinte: pegar o tamanho total do arquivo flash e o tamanho carregado até o momento do mesmo - o tamanho carregado é atualizado a cada loop que o filme tiver, é assim que o preloader funciona. Com essas informações devemos realizar uma regra de três, calculando o tamanho carregado dividido pelo tamanho total multiplicado por 100, para obter a porcentagem momentânea. Essa porcentagem deve ser atribuída a uma varíavel porcentagem.
Então atribuímos essa porcentagem à propriedade _xscale da nossa barra_mc.
A seguir, devemos varificar se o arquivo já foi carregado para que nosso filme seja encaminhado para o scene principal. Isso será feito através de um if que verifica se o tamanho total é igual ao tamanho carregado. Se isso tiver acontecido é só dar um gotoAndPlay("principal", 1); onde "principal" é o nome da nossa cena principal.
As cenas ficariam assim: primeiro a cena do preloader - você pode dar o nome que quiser a ela -, e depois a cena principal. Então teremos duas cenas.

Você pode querer colocar um campo de texto para mostrar a porcentagem enquanto a barra_mc é carregada. Para isso basta criar um campo de texto dinâmico e atribuir a porcentagem à propriedade text dele. Coloque percent como nome de instância do seu campo de texto.

O código completo ficaria assim:

stop();
onEnterFrame = function() {
// pegando tamanho total e tamanho carregado
totalSize = getBytesTotal();
atualSize = getBytesLoaded();

// calculo da porcentagem
porcentagem = Math.floor((atualSize / totalSize) * 100);
// atribuindo porcentagem à barra
barra_mc._xscale = porcentagem;
// atribuindo porcentagem ao campo de texto
percent.text = "Loading...  " + porcentagem + " %";
if (totalSize == atualSize) {
 gotoAndPlay("principal", 1);
}
}

Para testar o seu preloader basta ir até a sua cena principal e importar uma imagem para o stage. Agora basta dar ctrl + enter para testar. Note que a imagem importada apareceu logo de cara. Não pense que seu preloader não está funcionando, de outro ctrl + enter que ele vai aparecer. Caso isso não acoteça releia o tutorial.

Agora que já podemos viajar um pouco e inventar. Existe uma infinidade de preloader que se pode fazer.