PreLoader

[Jazara 3]

Galera to queimando a mufa e nada de resolver.

 

O que acontece, tenho um preloader em flash que até 4mb le normalmente mas acima disso ele desaparece não mostra o que esta carregando, abri o esquema que faz o teste do carregamento da imagem em flash e lá mostra o processo rolando de vento em poupa, porém a imagem de carregando e a mensagem do preloadre não aparece e quando termina de carregar é que ele aparece, como posos resolver isso, meu arquivo tem 20mb e é uma apresentação para cd e via download no site. obrigado

[Thiago de Oliveira Cruz 21]

Bom para começar se vai rodar no computador do cliente... não é preciso de pre-loader...

Afinal se rodar no local... ele já carregou tudo... não precisa carregar novamente não é verdade? você tem os arquivos rs :)

 

Depois como você está fazendo seu código de loader??

 

Abraços

[Jazara 3]

na visão cd rom beleza sem erro nenhum...

 

mas eu tenho que disponibilizar este arquivo para que as pessoas possam assistir on line tbm...

 

se não tiver outra maneira vou mandar o arquivo zipado para o servidor e só disponibiliza-lo via download...

 

mas o mais engraçado que até 4 mb ele tava lendo legalzinho...

 

da uma olhadinha neste tutoria que achei na web que ensinou um pre load básico...

 

 

**********************************************************************************************

 

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:

 

E no fim do seu trabalho, seu preloader deverá ficar assim:

 

 

 

 

Baixe aqui o fla desse exemplo zipado AQUI

 

Hora de brincar com o código !!!

 

Agora que aprendemos a fazer um preloader simples, vamos dar

 

uma modificada nele, vamos alterar o campo de texto, e fazer com que ele diga

 

o quanto de Kbs foram carregados, ao invés de mostras a porcentagem.Então

 

vamos alterar a linha do código do campo de texto “mensagem”,

 

para essa:

 

mensagem = “Foram carregados “+int©+”Kb”

 

+” de “+int(t)+”Kb.”;

 

Então aqui a mensagem vai receber o valor inteiro de “c”

 

que são os bytes carregados, como expliquei no tutorial lá encima.

 

Agora vamos fazer o seguinte, vamos editar o movieclip da seta,

 

e colocar mais um campo de texto dinâmico lá dentro, para a porcentagem

 

concluída acompanhar a seta, assim o preloader vai ficar um pouco mais

 

bacana.

 

Destranquem então o layer “seta”, e vamos editar

 

o movieclip seta dando um duplo clique no ponto central dele ou editando direto

 

na biblioteca, então lá teremos um layer com a seta desenhada,

 

e vamos criar mais um campo de texto dinamico, com a var “porcentagem”,

 

como a firgua abaixo:

 

Agora voltando a timeline do Movieclip, vamos colocar a seguinte

 

linha no código:

 

seta.porcentagem = int(p) + “%”;

 

Então aquí vamos ordenar que o campo porcentagem

 

que está dentro do movieclip “seta”, receba o valor de “P”

 

mais o sinal de porcentagem, então no final seu código inteiro

 

deverá ficar assim:

 

t = _root.getBytesTotal()/1024;

 

c = _root.getBytesLoaded()/1024;

 

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

 

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

 

seta.porcentagem = int(p) + “%”;

 

barra_horizontal._width = p*3;

 

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

 

if (c == t) {

 

_root.play();

 

}

 

**************************************************************************************

 

 

 

 

 

Bom para começar se vai rodar no computador do cliente... não é preciso de pre-loader...

Afinal se rodar no local... ele já carregou tudo... não precisa carregar novamente não é verdade? você tem os arquivos rs :)

 

Depois como você está fazendo seu código de loader??

 

Abraços

 

[Thiago de Oliveira Cruz 21]

Loader básico:

this.onEnterFrame = function(){
var loaded = this.getBytesLoaded();
var total = this.getBytesTotal();
var carregado = Math.round((loaded/total)*100);
trace("Porcentagem carregada:"+ carregado +"%");
}

No caso ai você troca o trace por um campo de texto...

 

Abraços