Bom Galera axei esse tuto na NEt, ele é facim e pra eu nao fika escrevendo e escrevendo pq o q eu sei fazer é desse aki

ta ai

[spoiler=Flash Preloader]Preloader com barra de rolagem horizontal, porcentagem e setas

que acompanham a barra de carregamento:

Sempre que navegamos na web, costumamos dar de frente com aqueles

preloaders, uns mais loucos que o outro, uns que a barra cresce, outro que indica

porcentagem, emfim, existem muitos modos de se fazer um preloader, hoje vamos

colocar aquí os mais comuns na web e explicar a funcionalidade de cada

um.

A ação _root.getBytesLoaded(); como o nome já

diz, faz a leitura do total de bytes carregados do seu swf, e o _root.getBytesTotal();

faz a leitura do total de bytes que tem o seu arquivo swf.Então dessa

forma podemos dizer que o filme só estará carregado quando o total

de bytes carregados de um filme, for igual ao total de bytes que o filme tem

e encima disso dá pra fazer os preloader visuais, aqueles que você

vê na tela o quanto do arquivo já foi carregado, e o quanto ainda

falta, isso é bem bacana porque se não tivesse o preloader num

site mais demorado para carregar, o usuário sem saber o que está

acontecendo, pode desistir de ver o site, mas isso tambem não é

carta branca para se fazer sites muito pesados, pois não é nada

agradável ficar esperando muito tempo para se ver um site, sabemos que

temos tudo nas mão para fazer um site lindo e cheio de efeitos, mas não

podemos esquecer, que nem todo mundo navega em banda larga ainda, e mesmo os

que navegam as vezes não gostam de esperar tanto, portanto cuidado ao

fazer filmes pesados, mas vamos ao assunto:

Primeiro Exemplo:

Esse preloader, terá uma caixa de texto dinâmico,

que informará ao visitante do site, o tamanho do seu arquivo, e o quanto

em porcentagem foi carregado, junto com ele terá uma barra horizontal

que crescerá de acordo com o total de bytes carregados, por fim para

que fique mais bonito, teremos uma seta (movieClip) que se deslocará

para a direita, dando a impressão que ele acompanha a barra enquanto

ela é carregada, então mão a obra !!!

Vamos criar um documento novo, e no primeiro layer vamos colocar

o nome dele como “ações”, e vamos dar a seguinte ação

pra ele:

stop();

Isso é para parar o nosso filme no primeiro frame onde

terá o preloader, então no preloader vamos comparar o total de

bytes carregados com o total de bytes do arquivo, quando eles se igualarem (em

100%) daí daremos uma ação para ele reproduzir o nosso

filme.

Agora vamos fazer um novo layer (camada), e vamos dar o nome

a ele de “preloader”, vamos trancar o layer de ações

e trabalhar apenas nesse layer agora. vamos então clicar no menu Insert

>> New Symbol >> e vamos criar um movieclip com o nome “preloader”,

se vocês repararem, vai aparecer uma nova timeline em branco, que será

a timeline do nosso movieclip “preloader” conforme a imagem abaixo:


Vamos nomear esse primeiro layer como “Texto”, e clicar

na ferramente “Text Tool” para criar um campo de texto dinâmico

no palco, então na barra de propriedades vamos mudar o Text Tool para

Dynamic Text, vamos marcar o alinhamento do texto ao centro, e clicando e arrstando

o mouse no palco, vamos criar a caixa no palco, depois de criada vamos clicar

na ferramenta “Arrow Tool” (que é aquela setinha preta), vamos

clicar no campo de texto para abrir as propriedades dele e no campo “var”

vamos digitar “mensagem” sem aspas:


Agora vamos trancar esse layer, e criar mais um com o nome Barra

Horizontal, que será a nossa barrinha que irá crescer de acordo

com o progresso do filme carregado, então vamos desenhar um retangulo

pequeno de mais ou menos 15 px em altura e largura, vamos seleciona-lo e apertar

a tecla F8, vai abrir uma tela para você salvar esse quadrado como um

simbolo gráfico, então vamos dar o nome a esse simbolo de Barra

horizontal e antes de clicar em ok, vamos mudar seu ponto de registro para a

esquerda conforme a figura abaixo:


Isso fará com que o movieclip barra horizontal fique com

o ponto de registro a esquerda, sendo assim, ele ficará na coordenada

0 em X dentro do movieclip, isso é importante pois fará com que

a barra cresça somente para o lado direito, ao invés de crescer

metade para cada lado, caso ela estivesse com o ponto de registro centralizado,

ou se tambêm colocar a direita, então ele vai crescer sentido contrário.

Agora voltando ao trabalho, estamos no layer com a barra feita,

então vamos pegar esse movieclip e dar o nome de instancia pra ele de

“barra_horizontal” sem aspas, e posiciona-lo no palco do lado esquerdo:


Feito isso, vamos trancar esse layer, e fazer um novo layer que

será a seta, que é um movieclip que vai se deslocar para a esquerda,

dando a impressão que ele acompanha o progresso todo da barra, então

vamos desenhar uma seta no palco dentro desse novo layer “seta”, vamos

selecionar a seta, transforma-la num movieclip, e vamos dar o nome de instancia

pra ela de “seta” sem aspas e posiciona-la abaixo da barra horizontal:


Agora vamos criar mais um layer com o nome de ações,

e vamos colocar a seguinte ação nesse layer:

t = _root.getBytesTotal()/1024;

c = _root.getBytesLoaded()/1024;

p = int((c/t)*100);

mensagem = “Foram carregados “+p+”% de “+int(t)+”Kb.”;

barra_horizontal._width = p*3;

seta._x = -154+(p*3);

if (c == t) {

_root.play();

}

Detalhando o código:

t = _root.getBytesTotal()/1024; // Aqui declaramos uma variavel

com o nome “t”,ela vai pegar o total de bytes do arquivo swf e dividir

por 1024 que é o valor de 1 kbyte, ou seja cada 1024 bytes, correspondem

a 1 kb, então como usamos mais os resultados em kbytes, faremos essa

conta para ele contar cada 1024 bytes, como 1 kb.

c = _root.getBytesLoaded()/1024; // Aqui declaramos uma variavel

com o nome “c”, ela vai pegar o total de bytes carregados do arquivo

swf e tambem dividir por 1024 do mesmo jeito.

p = int((c/t)*100); // p é variavel que acabamos de formar,

que vai pegar o valor inteiro dos bytes carregados, dividir pelos bytes total,

de desse resultado, multiplicar por 100 que será a porcentagem do arquivo

que já foi carregado.

Então dessas variaveis que criamos, vamos montar uma mensagem

para os visitantes naquele campo de texto dinâmico, com o código

mensagem = “Foram carregados “+p+”% de “+int(t)+”Kb.”;

Então acima, declaramos que o campo mensagem vai receber o texto “foram

carregados” mais o valor dos kb carregador em porcentagem, mais o sinal

de “%” do valor dos bytes total + o texto kb.

barra_horizontal._width = p*3; // Aqui a largura da barra_horizontal

será o valor de p multiplicado por 3, ou seja, vai começar com

3 pixels, que é o valor de 1, e ao final multiplicado por 3 terá

300 pixels, esse valor é adaptavel pro tamanho do seu filme, pode ser

alterado, pra 1, pra 2, pra 4, dependendo do valor que vocês queiram que

a barra cresça.

seta._x = -154+(p*3); // Aqui a seta vai se deslocar para a esquerda

de acordo com o progresso da barra, só que um script não depende

do outro, só vamos declarar aqui a posição inicial da seta

em X dentro do movieclip como ponto inicial, no meu caso foi -154 e a sua posição

em _x será a posição inicial -154 somado com o valor dos

bytes carregados multiplicado por três, ou seja, a cada 1 porcento ela

vai se deslocar 3 pixels, até atingir 300 pixels tambêm.

if (c == t) {

_root.play();

} // Aqui é o que faz todo o sentido do preloader, ele faz uma condição

“Se o total de bytes carregados for igual ao total de bytes do arquivo,

então ele vai mandar a timeline principal reproduzir, então sairá

daquele stop(); que colocamos no frame principal.

Pra finalizar tudo isso, vamos apertar a tecla F5 em todos os

frames 2 desse movieclip para criar um loop dessas ações, tirando

o layer do Logo que eu criei, seus frames deverão ficar assim:

[/spoiler]

Fonte: http://www.mxstudio.com.br/