Básico do AS3, Preloader, _parent, onRelease

Estava faltando na net um conteúdo com informações básicas na criação de um site em as3. No blog mesmo encontro várias pessoas procurando por loader e pré-loader. Por isto resolvi fazer o básico que você irá precisar para criar o básico do seu site, ou mesmo aplicaçãom, em flash.

Pré-loader (loader que aparece no começo do site)
onRelease, onRollOver, onRollOut… (criar botões)
Comunicação em movieclips (antigos _parent, _root e _global)

Nestes exemplos não serão usados classes, já que a idéia é a simplicidade. Mas nada impede de você faze-lo já que não muda quase nada.

 

Pré-Loader (loader do começo do site)

De forma simples e para situações simples podemos criar todo o código dentro do primeiro frame. Observe o exemplo as2 que será convertido:

this.onEnterFrame = function() {
loaded._width = (_root.getBytesLoaded()*MaxWidth)/_root.getBytesTotal();
if(_root._framesloaded == _root._totalframes) {
delete this.onEnterFrame;
//_root.play();
}
}

loaded é o movieclip que terá o seu tamanho atualizado a cada frame fazendo uma regrinha de 3 básica de sempre. Quando concluir o download será apagado esta função e, caso o load seja colocado em um movieclip separado do site terá será mandado chamado a função/método play();. No modo as3 não poderemos usar necessariamente um loop já que existe uma classe que cuida de carregamento conteúdos, loaderInfo.

this.loaderInfo.addEventListener(Event.INIT, getinit);
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, getprogress);
this.loaderInfo.addEventListener(Event.COMPLETE, getcomplete);

Não é necessário o evento INIT. Já que o que queremos é o progresso e quando estiver completo. Eu coloquei só para mostrar ou para alguém que precisar que alguma coisa seja feita quando iniciar o download, ou sei lá.

function getinit( event:Event ) {
loaded.width = 1;
}
function getprogress( event:Event ) {
var lb:Number = event.target.bytesLoaded;
var tb:Number = event.target.bytesTotal;
var MaxWidth:Number = 100;
loaded.width = (lb/tb)*MaxWidth;
}
function getcomplete( event:Event ) {
loaded.width = 730;
//MovieClip(this.parent).play();
this.loaderInfo.removeEventListener(Event.INIT, getinit);
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, getprogress);
this.loaderInfo.removeEventListener(Event.COMPLETE, getcomplete);
}

Como disse, caso não use o evento INIT poderá remover o getinit. Todas as funções/métodos que são criados para receber eventos deverão ter a entrada de um argumento do tipo do evento. O getprogress será chamado toda vez que for alterado o valor carregado do site. loaded é um movieclip presente que terá o seu tamanho modificado a cada vez que o valor mudar. Em getcomplete poderá ser chamado o pai do mesmo no caso de você deixar o pre-loader dentro de um movieclip.

O código não está otimizado justamente por que isto é uma explicação e todos os conceitos estão sendo usados, no caso vocês devem personalizar eles para o seu uso. Por exemplo, eu não removo todos os listeners de eventos já que sempre deixo o pré-loader dentro de um movie e logo no segundo frame o mc já não estará mais instanciado, perdendo então a necessidade desta parte do código.

download do fonte

 

onRelease, onRollOver, onRollOut…

Eu tenho costume criar botões com movieclips mesmo. Acho que fica uma coisa, digamos, mais personalizada. E na verdade tudo é movieclip quando é compilado. Para o flash player botão, gráfico e clipe de filme são a mesma coisa.

Se eu quiser usar os eventos release, rollover e outros deveremos fazer assim:

this.addEventListener( MouseEvent.MOUSE_OVER, overExample );

function overExample( event:MouseEvent ) {
//
}

Criamos um evento do tipo MouseEvent. Então a função deverá receber um evento do tipo MouseEvent. O release você pode usar o moseUp, e o press mouseDown. Agora podemos criar eventos de outros tipos para substituir por exemplo o release, CLICK é um exemplo. duplo click também e coisas como releaseOutside deverão ser programas. Você terá que mesclar dois pontos, MOUSE_OUT e mouseUp. Não vou entrar em mais detalhes por que o objetivo é fazer você entender como funciona, os detalhes você conseguirá entender agora no próprio F1.

Para fazer o useHandCursor você pode deixar a propriedade buttonMode como true, “ligada”.

 

Comunicação em movieclips

Como vocês devem ter observado, a forma de interação entre movieClips irmão, pais e filhos mudou. Não existe mais _parent, _root, e _global. Agora todo movieclip criado tem um objeto chamado parent, e root. o global acabou em definitivo.

O uso neste caso é muito simples this.parent ou this.root.

Caso você queria chamar uma função você terá que informar o que se trata o objeto em questão. Por exemplo, se quiser dar um play no movieclip pai do atual deverei usar:

MovieClip(this.parent).play();

Nada de complicado e ajuda muito. Caso necessite mesmo do _global você poderá criar e instanciar uma classe estática e onde você deixe referência de objetos para depois chama-los. Assim qual instancia poderia acessar a variável “global”.

Caso tenham alguma duvida a mais não listada aqui poderão deixar um comentário por aqui e informar o que gostariam.