[Tutorial] Pré-Loader - AS 2

[Thiago de Oliveira Cruz 21]

Este tutorial pode ser encontrado também em:

berseck.wordpress.com

 

Bom galera venho aqui colocar mais um tutorialzinho bem simples para vocês

 

Esse tutorial basicamente é só ActionScript você não vai criar nada simplesmente copiar e colar ;)

E não é copiar e colar em qualquer lugar... é no primeiro frame de sua animação, pois é dali que começa todo o seu clip então é isso que vamos usar para carregar

 

Então vamos lá o código ta explicado e é o seguinte:

stop();
//Primeiramente cria-se um clip no qual vou preencher para quando carregar ele formar uma linha de um lado a outro da tela
var campo:TextField = this.createTextField('campo', this.getNextHighestDepth(), 0, Stage.height/2, 0, 5);
campo.border = true;
campo.background = true;
campo.backgroundColor = 0x125488;

//Crio o campo de texto que vai mostrar a porcentagem;
var texto:TextField = this.createTextField('texto', this.getNextHighestDepth(), Stage.width/2 - 20, Stage.height/2 - 20, 40, 20);

//Agora vamos calcular o tamanho de arquivo e colocar sua porcentagem
this.onEnterFrame = function(){
	var total = this.getBytesTotal();
	var loaded = this.getBytesLoaded();
	var carregado = Math.round((loaded/total)*100);
	texto.text = carregado + "%";
	campo._width = Math.round((loaded/total)*Stage.width);
	if(carregado == 100){
 	//Removo os capos de texto usados no loader
 	texto.removeTextField();
 	campo.removeTextField();
 	//Passo para o proximo frame
 	this.nextFrame();
	}
}

Abraços

[inx 4]

Filé.. Agora só falta um de preloader para aquivos externos.. rs

=D

[Thiago de Oliveira Cruz 21]

Ué para carregar um arquivo externo é simples...

 

Troca o this pelo nome do clip que você vai ta dando o carregamento...

 

Ou simplesmente usa a classe do MovieClipLoader...

E usa o onLoadProgress()

 

E coloca o mesmo código lá dentro... sem o onEnterFrame

Que vai funcionar perfeitamente bem...

 

Exemplo:

//Crio a classe do MovieClipLoader
var mcl:MovieClipLoader = new MovieClipLoader;
//Crio o clip que vai carregar um arquivo externo dentro dele
var mc:MovieClip = this.createEmptyMovieClip('mc', this.getNextHighestDepth());
//Crio o objeto listener para fazer a classe MovieClipLoader funcionar corretamente
var obj:Object = new Object;
//Adiciono o listener a classe
mcl.addListener(obj);

//Carrego um arquivo externo qualquer
mcl.loadClip("arquivoExterno.swf", mc);
//Primeiramente cria-se um clip no qual vou preencher para quando carregar ele formar uma linha de um lado a outro da tela
var campo:TextField = this.createTextField('campo', this.getNextHighestDepth(), 0, Stage.height/2, 0, 5);
campo.border = true;
campo.background = true;
campo.backgroundColor = 0x888888;

//Crio o campo de texto que vai mostrar a porcentagem;
var texto:TextField = this.createTextField('texto', this.getNextHighestDepth(), Stage.width/2 - 20, Stage.height/2 - 20, 40, 20);

//Agora vamos calcular o tamanho de arquivo e colocar sua porcentagem
obj.onLoadProgress = function(){
    var total = this.getBytesTotal();
    var loaded = this.getBytesLoaded();
    var carregado = Math.round((loaded/total)*100);
    texto.text = carregado + "%";
    campo._width = Math.round((loaded/total)*Stage.width);
    if(carregado == 100){
        //Removo os capos de texto usados no loader
        texto.removeTextField();
        campo.removeTextField();
        //Passo para o proximo frame
    }
}

Pronto ta resolvido seu problema.

E o clip ta criado com barrinha de evolução e tudo

 

Abraços

[inx 4]

karamba.. perfeito. =P

 

Vlw

[Donando 1]

Caramba, Berseck, estou penando pra conseguir fazer o pré-load pra um arquivo externo .flv que está sendo chamdo pelo FLVPlayback.

 

Você poderia me dar essa ajuda??

 

Serei muuito grato.

 

abs

[Thiago de Oliveira Cruz 21]

Bom playback é igual qualquer outro...

display.attachVideo(netStmVideo);
ns.play(video);
ns.pause();

ns.onEnterFrame = function(){
var gl:Number = ns.getBytesLoaded();
var gt:Number = ns.getBytersTotal();
if((Math.round(gl/gt)*100) == 100) ns.play();
}

Basicamente é isso ;)

 

Abraços

[Donando 1]

Show de Bola!!!

 

Mais uma vez, muito obrigado.

 

Abs.

[fabiodurgante 0]

dae cara e esse preloader em AS3, assim para que va enchendo a barra quando estiver carregando entendeu

como que ficaria valeuuuu

[Thiago de Oliveira Cruz 21]

É a mesma coisa só que com linguagem AS 3.0

 

Vá ao forum de AS 3.0 e veja lá como fazer para colocar um evento de ENTER_FRAME

 

Abraços

[Anderson Narciso 3]

Cara eu fiz um slideshow, pedreragem mesmo coisa simples, achei muito pesado e imaginei que foce pela qualidade das fotos utilizadas, ai optei por utilizar esse seu preloader porque achei muito bom, mas não consegui fazer funcionar..

 

Vou postar aqui o link com o .fla do slideshow, tens como dar uma conferida aonde que errei? Sabe não manjo muito de flash, mas to tentando! :)

 

Link: Slideshow

[Thiago de Oliveira Cruz 21]

Primeiramente você não quer dentro do MC e sim no arquivo inteiro.

 

Então tire a AS de dentro do MC e coloque fora no primeiro frame!

E jogue seu MC que contem a animação dentro ETC para o segundo frame

 

E não esqueça de colocar o stop()

No começo do código ;)

 

Se não ele vai passar direto pelo loader

 

Abraços

[Anderson Narciso 3]

Perfeito thiago, funcionou certinho!

mas tipo não tem como dar um width para essa barra, se viu que o slide é grande, então ele pega o tamanho todo, ficaria mais bunitinho se foce algo menor e no meio entende..

 

Mas já agradeço :)

[Thiago de Oliveira Cruz 21]

Ai você edita como quiser

aqui:

campo._width = Math.round((loaded/total)*Stage.width);

Eu altero o tamanho do texto... eu faço uma conta para que ele seja 100

 

Se você quer que ele só aumente 400 pixels você faz * 400

 

E depois alinha com o x

campo._x = valor

 

Assim você alinha ele da maneira que você achar melhor

Por isso disse que o meu é beeeeem genérico

 

Abraços

[adsoncs 0]

Berseck, boa tarde...

 

estou o dia inteiro tentando fazer um preloader com algumas imagens e nao consegui, peguei alguns tutoriais na net, exemplos prontos mas nenhum deu certo.

Minha imagem tem 892x77 e queria que o preloader fosse abrindo ela com uma mascara ao chegar em 100% ela carregar por inteiro...

me ajudaaa.

Abração!

[Thiago de Oliveira Cruz 21]

Impossivel =)

 

Você pode carregar a imagem inteira.

Ai depois criar um efeito como se fosse ela carregando.

 

Mas o flash não permite ir mostrando a imagem... enquanto carrega. Isso não é HTML ;)

 

abraços

[adsoncs 0]

Eu fiz um aqui assim...

peguei a imagem e coloquei no movie clipe que ja tinha um loader so que era vetor,

ele tinha uma mascara e ia crescendo ate o 100%. quando eu subistiui pela imagem ele so

carregou ate mais ou menos uns 15% da imagem e entrou no site. Acho que ele nao esta calculando

o tamanho da imagem sei lá.

Dá pra me dar uma luz ou nao tem jeito mesmo.

vlw cara.

[Thiago de Oliveira Cruz 21]

Tipo veja como eu fiz ali no outro exemplo

 

um carregamento de imagens com porcentagem

//Crio a classe do MovieClipLoader
var mcl:MovieClipLoader = new MovieClipLoader;
//Crio o clip que vai carregar um arquivo externo dentro dele
var mc:MovieClip = this.createEmptyMovieClip('mc', this.getNextHighestDepth());
//Crio o objeto listener para fazer a classe MovieClipLoader funcionar corretamente
var obj:Object = new Object;
//Adiciono o listener a classe
mcl.addListener(obj);

//Carrego um arquivo externo qualquer
mcl.loadClip("arquivoExterno.swf", mc);
//Primeiramente cria-se um clip no qual vou preencher para quando carregar ele formar uma linha de um lado a outro da tela
var campo:TextField = this.createTextField('campo', this.getNextHighestDepth(), 0, Stage.height/2, 0, 5);
campo.border = true;
campo.background = true;
campo.backgroundColor = 0x888888;

//Crio o campo de texto que vai mostrar a porcentagem;
var texto:TextField = this.createTextField('texto', this.getNextHighestDepth(), Stage.width/2 - 20, Stage.height/2 - 20, 40, 20);

//Agora vamos calcular o tamanho de arquivo e colocar sua porcentagem
obj.onloadProgress = function(){
 var total = this.getBytesTotal();
 var loaded = this.getBytesLoaded();
 var carregado = Math.round((loaded/total)*100);
 texto.text = carregado + "%";
 campo._width = Math.round((loaded/total)*Stage.width);
 if(carregado == 100){
 //Removo os capos de texto usados no loader
 texto.removeTextField();
 campo.removeTextField();
 //Passo para o proximo frame
 }
}

Ai eu carrego só a imagem mostrando um campo de texto

 

Ai como eu disse a você, para que você tenha o feito que você quer... você precisa carregar a imagem toda primeiro e ai então criar o efeito.

Para saber quando a imagem foi carregada, você usa o evento onLoadComplete (com o L maiusculo do load caso ficar minusculo)

 

Ai você inicia um tween... sei lá uma mascara começa a se mover... para fazer a imagem ir aparecendo... ai fica por sua conta.

 

Abraços

[marcuscruz 0]

Ótima contribuição! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif