Categorias
Tutoriais

Preloader em ActionScript 3.0

No post anterior trabalhamos com o carregamento de uma imagem externa, agora vamos fazer um preloader para o carregamento de uma imagem. Se você não fez o exercício anterior, arrume uma foto do tipo JPG , GIF ou PNG e coloque na mesma pasta do seu arquivo swf. no meu caso eu vou utilizar essa imagem :

Primeiro vamos preparar o terreno. crie um movieclip como o nome barra e o seu resgistration no canto esquerdo ao centro como na imagem abaixo.

Coloque o nome de instância da barra “barra_mc”, selecione o frame para inserir o nosso código e vamos programar:

var str:String = "foto.jpg";
var carregador:Loader = new Loader();
var requisicao:URLRequest = new URLRequest(str);
// criei as variáveis necessárias para efetuar o carregamento , o Loader e URLRequest

carregador.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgresso);
carregador.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleto);
// Adicionei os Eventos para o carregamento

carregador.load(requisicao);
//Mandei carregar o arquivo

// A função que vai ser chamada quando carregar o aquivo.
function onCompleto(e:Event):void{
    var foto:Bitmap;
    foto = e.target.content;
    //criei uma variável para receber a imagem que vai ser carregada
    addChild(foto);
    //adiciono a imagem no stage
}

// A função que vai chamada no progresso do carregamento
function onProgresso(e:ProgressEvent):void{

        var total:Number = e.bytesTotal;
	// pego o total de bytes que eu vou carregar
        var lidos:Number = e.bytesLoaded;
        // pego a quantidade de bytes que eu já carreguei
	var pc:Number = lidos/total;
        // pego o percentual dividindo lidos por total
        barra_mc.scaleX = pc;
}

Vou comentar a ultima função a onProgress ela é disparada no Evento ProgressEvent.PROGRESS ela é chamada durante o progresso do meu download. No evento que a função recebe ProgressEvent tem as propriedades bytesTotal que possui a quantidade total de bytes que serão carregados pelo swf e bytesLoaded que possui a quantidade que foi carregada até o momento. E para extrairmos o percentual basta dividir a quantidade de bytes lido até o momento pelo total.

Por Fim atribuímos o percentual ao scaleX da barra. O exercício é simples mas qualquer dúvida podem comentar. Também aceito sugestões de tutoriais.

Por enquanto é só pessoal. depois eu coloco o fonte para download.

Até Breve

Categorias
Tutoriais

Botões em ActionScript 3.0

Nesse post vamos trabalhar com botões em AS 3.0 então ao trabalho, no actionScript 2.0(AS 2.0) para fazer ações com botões e movieclips era da seguinte forma:

meubotao.onRollOver = function():Void{

 //faz alguma coisa

}

Em acitonScript 3.0(AS 3.0) houve algumas mudanças, de inicio você tem que adicionar os eventos no movieclip e falar qual a função que vai ser chamada veja o exemplo abaixo.

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

//faz alguma coisa

 }

Na linha um adicionamos o evento especificamos o Tipo de evento no exemplo é o evento de mouse o mouse_over igual ao onRollOver do actionScript 2.0.  Na assinatura da função temos de que definir o tipo de parâmetro que a função vai receber, neste caso a variável “e” do tipo MouseEvent, lembrem toda vez que adicionarmos um evento a função que é chamada tem que receber um parâmetro do tipo do evento que foi adicionado.  O “this” que usamos dentro da função para fazer referência a quem chama a função em AS2.0 foi substituído pelo “target” do evento. Obs. Em outros casos o this tem o uso normal. vamos complementar o nosso exemplo:

meubotao.buttonMode = true;

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

         e.target.alpha = 0.5
 }

Na linha 1 foi alterado um parâmentro em nosso botão(movieClip) “buttonMode” essa propriedade surgiu em AS3 e por padrão ela é inicializada com false então para o nosso botão ficar com aquela “mãozinha” quando o mouse passar sobre nosso movieclip . Na linha 4 estamos modificando a propriedade alpha do target ou seja de  quem chamou a função nesse caso o meubotao. Notem que diferente de AS2.0 a propriedade alpha escrevesse sem o “_” isso para outras propriedades como x , y e  rotation. Outras propriedades como _xscale e _yscale agora são scaleX e scaleY. Vamos então usar o TweenLite nos eventos dos botôes(movieClips). Lembrando quem não possui as classes do TweenLite clique aqui para baixar.

import gs.TweenLite;
import gs.easing.*;

meubotao.buttonMode = true;
meubotao.addEventListener(MouseEvent.MOUSE_OVER, over);
meubotao.addEventListener(MouseEvent.MOUSE_OUT, out);
meubotao.addEventListener(MouseEvent.CLICK, clicou);

function over(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:0.7, ease:Expo.easeOut});

}

function out(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:1, ease:Expo.easeOut});

}

function clicou(e:MouseEvent):void{
trace("clicou");
}

No ultimo exemplo implementamos as ações over,  out e clique do movieclip.

Até o próximo post.