Tutorial de um preloader simples com porcentagem.

[Vinicius R3 0]

Olá! Estou aqui para ensiná-los uma coisa que é bem fácil, mas que muitas pessoas ainda têm uma porção de dúvidas, o PRELOADER!

 

Sem mais delongas, vamos lá? ^^

 

Primeiramente crie um Novo filme.

 

Este filme terá 5 camadas, duas cenas e 3 frames. Mas vamos por partes.

 

Para começar, renomeie a primeira camada de "actions" e 3 keyframes nessa camada.

No primeiro frame, coloque o seguinte código:

 

bytes_carregados = Math.round(thisgetBytesLoaded());

//pega os bytes carregados do filme.

bytes_total = Math.round(this.getBytesTotal());

//pega o tamanho total do filme.

pegaporcentagem = bytes_carregados/bytes_total;

//Cálculo para pegar a porcentagem.

this.barra._width = pegaporcentagem*410;

//Action que dá o comprimento da barra que indica o quanto já foi carregado.

this.texto = Math.round(pegaporcentagem*100)+"%";

//Action que preenche o campo de texto que indica a porcentagem carregada.

if (bytes_carregados == bytes_total) {

this.gotoAndPlay(3);

}

//Envia o filme para a camada 3 quando a quantidade de bytes carregados for igual ao tamanho total.

 

No segundo, coloque o seguinte código:

 

this.gotoAndPlay(1);

 

E, finalmente, no terceiro, coloque o seguinte código:

 

stop();

 

Agora, vamos criar os elementos.

Crie uma nova camada e desenhe uma barra qualquer, pode ser como essa do exemplo ou qualquer outra. Dê um Ctrl + x no preenchimento e renomeie a camada como borda.

 

Cole o preenchimento em outra camada, e a renomeie como máscara.

 

Crie uma nova camada abaixo de máscara, renomeie como Barra e faça um desenho de um retângulo, de preferência um pouco maior que a sua barra. Transforme essa barra em um MovieClip (F8) e coloque seu instance name de "barra" sem aspas e tudo minúsculo. E sete a camada máscara como Mask dessa camada.

 

Crie uma camada chamada texto, crie um campo dinâmico de texto e coloque seu nome de instância de "texto" tudo minúsculo e sem aspas.

 

* Todas as camadas contém 3 keyframes *

 

Logo após, vá ao 3 keyframe da camada texto, faça um botão e coloque a seguinte ação nele:

 

on(release) {

gotoAndStop("Scene 2",1);

}

 

Isso fará com que, quando clicarmos no botão ele irá diretamente para a cena 2, que contém todo o conteúdo do filme.

Mas, para isso precisamos criar a cena, né? Vá a insert > Scene ou Inserir > Cena no flash e a nova cena se criará.

 

 

Coloque algumas fotos, enfim, coisas para pesar o filme para que ele tenha o que carregar.

 

Depois exporte seu filme, apertando Ctrl + alt + Shift + s no teclado.

Depois suba-o para algum ftp para testar

 

 

Está ai o tutorial se alguem precisar do tutorial com fotos eh soh pedir por email.

Tenho um outro tutorial mais facil ainda, se alguem quiser mail me b_boy_vi@hotmail.com

 

Eh issu ae falow galera

[Dede 0]

bem legal vei. parabéns

[Vinicius R3 0]

beleza não vo mais posta isso... Desculpas não sabia disto.

[Tiago Kasa 0]

Atualizando este post antigo, resolvi colocar o link para um tutorial bem simples e com grande impacto visual:

 

http://blog.schoolofnet.com/2008/08/06/pre...n-em-10-passos/

 

Você cria de uma maneira muito fácil um menu diferente destes convencionais, e mantendo a comunicação visual...

[Vinicius R3 0]

Tirei algumas duvidas esses dias e refiz o tuto se alguem quiser baixar está aqui.

 

Quem quiser o link para download está aqui, espero ter ajudado.

 

http://rapidshare.com/files/195251745/Menu.rar

 

valew