BlogBlogs.Com.Br

sábado, 14 de junho de 2008

Preloader Com ActionScript 3

Este é um simples preloader para carregar um dado conteúdo. Utilizei um movie clip com uma simples animação e uma máscara que vai revelando o mc conforme o arquivo é carregado. Com essa idéia (máscara + movie clip) é possivel criar preloaders interessantes.

Veja um exemplo : Preloader AS 3

1-Crie um novo documento e adicione duas camadas (actions e objetos). Adicione dois frames.
2-Crie um movie clip para ser sua barra animada e marque a opção export for actionScript como na figura abaixo:
3-Crie um retangulo para a máscara a ser aplicada sobre o movie clip. Faça da mesma forma que no passo anterior, selecione a opção export for actionScript e preencha o campo Class com "Mascara".
4-No primeiro frame adicione o código.

A idéia é a seguinte: Como no primeiro frame temos um stop, a execução do filme ficará limitada ao frame 1, só sendo liberada quando o carregamento for completo. Note que após o carregamento podemos mandar executar tanto o frame seguinte ou uma outra cena.
Segue o código:
stop();
var bar :BarraListras = new BarraListras();
bar.x = ((stage.stageWidth/2) - bar.width/2);
bar.y = ((stage.stageHeight/2) - bar.height/2);
stage.addChild(bar);
Declaração da barra animada e seu posicionamento no meio do stage.
var maskX :Number = new Number(bar.x);
var maskY :Number = new Number(bar.y-4);
var mascara : Mascara = new Mascara();
mascara.x = maskX;
mascara.y = maskY;
addChild(mascara);
bar.mask = mascara;
Posicionamento da mascara pelo valor de mask. Declaração da mascara e sua aplicação da sobre a barra.
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,
checkingProgress);
loaderInfo.addEventListener(Event.COMPLETE,progressComplete);
Listeners que verificam o carregamento e quando o evento está completo.
function checkingProgress(event:ProgressEvent):void{
var procentLoaded:Number = event.bytesLoaded/event.bytesTotal*100;
mascara.scaleX = procentLoaded/100;
}
function progressComplete (e:Event):void{
loaderInfo.removeEventListener(ProgressEvent.PROGRESS,
checkingProgress);
stage.removeChild(bar);
gotoAndPlay(2);
}
Funções dos listeners. Na função progressComplete podemos substiuir o método gotoAndPlay(2) por this.nextScene( ) , se for o caso de um preloader entre duas cenas.

No segundo frame adcione um stop() e o conteúdo que deseja carregar(no meu caso coloquei uma imagem). Para testar exporte o swf, na barra de menus view>simulate download.

12 comentários:

Carlitos disse...

Olá amigo, desculpa, mas não entendi direito...

Eu devo criar 2 MCs... é isso? um com um retangulo sendo a barra, nomeado de Bar - Instancia BarraListras. E outro com outro retangulo, nomeado de mascara?

É isso?

Vc não pode me enviar o fonte (FLA) pra eu estudar?

Abração e sucesso!

4Ndr3 4nD3r1 disse...

sim ... isso mesmo.
Me manda seu email que lhe envio o FLA.

Ricky disse...

também estou interessado nesse preloader, dá para o enviar?

abraço

4Ndr3 4nD3r1 disse...

Só me mandar um email.

Cristian disse...

me manda um pra também!Pode?

4Ndr3 4nD3r1 disse...

so me deixar seu endereço de email q eu mando.

Hal disse...

Seria possível enviar-me também?

Muito obrigado!

4Ndr3 4nD3r1 disse...

Posso enviar sem problemas.
Porem preciso do seu email XD

lino disse...

Oi colega... eu fiz um arquivo carregando um swf.

Sei que o modo de carregar swf é o mesmo pra imagem. Acontece que ta dando erro.

Esse swf que quero carregar é todo feito por um arquivo .as, e o erro que dá se refere ao arquivo .as

O erro que aparece é esse:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at fullPortifolio()

Será que vc pode me ajudar?

4Ndr3 4nD3r1 disse...

Esse erro ocorre quando o compilador não consegue encontrar o método ou propriedade que você está invocando.
Duas razões comuns para isso são: Ou por erro de digitação no nome do método ou propriedade(!) ou então por não ter o método ou propriedade dentro do escopo da função.

kida disse...

no meu deu erro
1151: A conflict exists with definition bar in namespace internal.

gostaria do fla...
obrigado

kidandrio@yahoo.com.br

Vilhegas disse...

Cara... parabéns funcionou perfeitamente!

Vou utilizar bastante este código, em meus sites.

Aliás, vou estudá-lo para entende-lo melhor.

Muito obrigado por dividir o conhecimento.

Fique com Deus, sucesso!