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/