Tutorial Action Script 3 – 017

Tutorial Action Script 3 – 017

Em continuação a série de tutoriais sobre AS3…

No ultimo tutorial falamos um pouco sobre efeitos, filtros movimentos, vamos nesta parte mostrar alguns exemplos dos mesmos efeitos, repetições, funçoes de animação, efeitos paralelos e sequenciais. Fade, Blur, Glow… Começando…

6.4. Efeitos, Exemplos e Easing Functions

Com estas funções e a com a ajuda de um eventListner podemos fazer um efeito bem agradavel de uma imagem a saltar infinitamente… vejam o código:
[coolcode language=”actionscript” linenum=”off”] private var moveDir:String=”Up”;
private var customMove:Move = new Move();

public function customJump():void {
moveDir=”Up”; //usado para saber o sentido da animação (up/down)
imagem.x=100;
imagem.y=100;
customMove.target=imagem;
customMove.yTo=imagem.y-50; //move 50px para cima
customMove.addEventListener(EffectEvent.EFFECT_END, doJump,false,0,true);
//no final de efectuar o movimento chama a função doJump
customMove.play(); //inicia
}
private  function doJump(evt:EffectEvent):void {
if(moveDir==”Up”) { //se estiver a executar para cima
customMove.yTo=imagem.y+50; //anda 50px para baixo
customMove.play(); //inicia o novo moviemnto
moveDir=”Down”; //que esta a mover para baixo
}
else
{ //sinal que terminou de mover para baixo
customMove.yTo=imagem.y-50; //movemos de novo para cima
customMove.play(); //inicia o efeito de novo
moveDir=”Up”;
}
}
private function stopJump():void {
customMove.addEventListener(EffectEvent.EFFECT_END, doJump);
//retira o eventListener que fará com que a função de movimento e a repetição dos move seja feita.
}
[/coolcode]

Esta função (customJump) fará com que a imagem esteja a fazer um efeito de salto repetivamente, o que não passa de movimentos repetidos +-5px na vertical.
Muito simples e com um aspecto bem agradável.

Dentro do package mx.effects encontram a class easing, que nada mais nada menos nos disponibiliza algumas funções de animação que introduzem efeitos durante a animação, vulgarmente chamadas easing Functions que podem ser adicionadas a qualquer elemento explicado em cima.

Se escreverem mx.effects.easing. Aparecer-vos-á uma lista das funções easing, funções estas que podem ser introduzidas nos nossos efeitos, utilizando o parametro .easingFunction como vou passar a explicar a seguir num exemplo que vai simular a queda de uma imagem e fazer com que ela salte no «chão» ao tocar nele.

Utilizando o nosso move, faremos o seguinte:

[coolcode language=”actionscript” linenum=”off”] public function nativeDropBounce():void {
imagem.y=0;//inicio do move y=0; x=100;
imagem.x=100;

var move:Move = new Move;
move.target=imagem;
move.duration=1500;
move.yTo=150; //definição do y final, «chão»
//função de animação
move.easingFunction=Bounce.easeOut;
move.play();

//Utilização das classes easing / funções de animação
//Estão disponiveis muitos efeitos acedidos pelo package                 //mx.effects.easing. bastando escrever mx.effects.easing. e             //escolher da lista o efeito, algums exemplos:
/*Bounce.easeIn / easeInOut / easeOut
Elastic.easeIn / easeInOut / easeOut
Circular.easeIn / easeInOut / easeOut
Back.easeIn / easeInOut / easeOut
etc…
*/
}
[/coolcode] Se executarem esta função terão um efeito de queda com se fosse uma bola a cair e a saltar até parar. Este Bounce é uma das funções Easing mostradas em cima, e pode ser substituido por qualquer uma das outras na lista, testem e vejam os outros efeitos.

6.5. Filtros; Fade & Parallel

Existem alguns outros efeitos, mais conhecidos como filtros, que alguns deles falaremos mais à frente noutra forma de uso, neste momento vamos falar de 3 efeitos muito usados, o Fade, Blur e Glow que nos permite adicionar um pouco mais de criatividade às nossas imagens / botões.

Vamos começar pelo Fade, já aplicado a um movimento da imagem, o objectivo é que a imagem comece invisivel e ao longo do movimento venha aparecendo até ficar totalmente visivel no final do efeito. Para que isto aconteca ao mesmo tempos temos que usar o Parallel que nos permite executar 2 efeitos ao mesmo tempo no mesmo objecto, vejam o seguinte código:
[coolcode language=”actionscript”] public function nativeFadeMove():void {
imagem.x=0;
imagem.y=0;
//o parallel como  já viram no exemplo do painel é uma                 //instancia de efeitos que nos permite agrupar os efeitos que             //quisermos (addChild) e executar todos ao mesmo tempo.
var par:Parallel = new Parallel;
//ao adicionar o target do paralel como a imagem, em cada                 //efeito nao necessitamos de o fazer.
par.target=imagem;
par.duration=1500;

//nosso movimento
var move:Move = new Move;
move.xTo=100;
move.yTo=70;
par.addChild(move); //adicionamos ao parallel

//nosos filtro/efeito fade
var fade:Fade = new Fade;
fade.alphaFrom=0; //alpha inicial 0=invisivel, 1=visivel
fade.alphaTo=1;
par.addChild(fade); //adicionamos ao paralel

par.play(); //iniciamos o nosso parallel.
}
[/coolcode] E finalmente está pronta a nossa animação que fará um movimento de x=0, y=0 até x=100, y=70, e fará também a transformação progressiva do alpha da imagem de 0 até 1, algo como a imagem em baixo ilustra.

move & alpha

6.6. Filtros; Glow

Agora vamos a um exemplo de Glow; A base deste efeito é um um contorno feito em volta da nossa imagem com alguns pixeis, preenchido de cor em que essa mesma cor é sujeita a um efeito de fade, que nos dará a impressao de estar a desaparecer essa mesma cor fanzendo com que a nossa imagem apresente um resultado bme interessante…

vejam o código:
[coolcode language=”actionscript”] public function nativeGlow():void {
imagem.x=50;
imagem.y=50;
var glow:Glow = new Glow;
glow.target=imagem;
glow.alphaFrom=0; //o efeito inicia com alpha a 0
glow.alphaTo=1; //até 1
glow.blurXTo=30; //distancia/blur/XX
glow.blurYTo=30; //distancia/blur/YY
glow.color=0x43ADF0; //Cor do glow
glow.play();
}
[/coolcode]

Este código produziria o efeito seguinda na imagem:
glow

O efeito glow aparecerá gradualmente visto ser um efeito processado gradualmente.

6.7. Filtros; Blur

Outro efeito parecido é o Blur,  que faz com que a nossa imagem fora um efeito de desfocagem como o exemplo a seguir mostrará:
[coolcode language=”actionscript”] public function nativeBlur():void {
imagem.x=50;
imagem.y=50;
var blur:Blur = new Blur;
blur.target=imagem;
blur.blurXTo=10; //distancia/distorção/XX
blur.blurYTo=10; //distancia/distorção/XX
blur.duration=100; //duração
blur.play();
}
[/coolcode]

Que produziria o efeito seguinte:

blur

Estes são os filtros mais usados, no entanto ficam outros para poderem pesquisar, tais como o Dissolve, Iris ou Zoom.

Para eliminarem os efeitos glow e blur da imagem façam:
[coolcode language=”actionscript”] imagem.filters=[];
[/coolcode] Para restaurar a visibilidade retirada pela alpha:
[coolcode language=”actionscript”] imagem.alpha=1;

[/coolcode]

6.8. Filtros; Sequence

Existe também uma instancia Sequence, que nos permite fazer uma sequencia de efeitos e executa-los pela devida ordem, ao contrario do parallel, os efeitos são executados individualmente e por ordem (a mesma ordem de adição com o addChild) que nos permite fazer sequencias de efeitos. O que vou demonstrar é fazer um movimento de queda de uma imagem (y=0 -> y=100), de seguida fazer um Glow e depois um Fade. Vejam o seguinte código.

[coolcode language=”actionscript”] public function multipleEffects():void {

var seq:Sequence = new Sequence;
var move:Move = new Move;
var glow:Glow = new Glow;
var fade:Fade = new Fade;

imagem.y=0
imagem.x=50;

move.duration=1500;
move.yTo=(this.height-(originalSizeH));
//função de animação
move.easingFunction=Bounce.easeOut;

seq.addChild(move); //adicionamos à sequencia, ordem : 1

//depois de mover vamos fazer o glow
glow.alphaFrom=0;
glow.alphaTo=1;
glow.blurXTo=30;
glow.blurYTo=30;
glow.color=0x43ADF0;
glow.duration=1500;

seq.addChild(glow); //adicionamos à sequencia, ordem : 2

//finalmente o nosso fade;
fade.alphaFrom=1;
fade.alphaTo=0;
fade.duration=1500;

seq.addChild(fade); //adicionamos à sequencia, ordem : 3

seq.target=imagem; //definimos como alvo da seq a nossa imagem
seq.play(); //iniciamos a sequencia.

}

[/coolcode]

Testem o exemplo e verão os 3 efeitos (Move, Glow e Fade) serem executados pela ordem que foram adicionados à sequencia, o efeito seguinte apenas se inicia quando o anterior estiver terminado.

6.9. Filtros & Efeitos; Exemplos

Já falamos de quase todos os efeitos principais e das suas implicações e funcionamento, vamos agora ver como a matemática (às vezes dificil de entender) nos pode ajudar a fazer um movimento circular infinito na nossa imagem, vejam o código:

[coolcode language=”actionscript”] private var angulo:int=0;  //guarda o angulo actual da posição da imagem
private  var raio:int=50;  //raio do circulo que a imagem vai fazer
private  var centroX:int;  //centro do circulo XX
private  var centroY:int;  //centro do circulo YY
private  var isMoving:Boolean=false; //definido para saber se existe movimento.
private var customMove:Move = new Move;  //variavel do nosso efeito

public function nativeCircularMove():void {
var radians:Number= (angulo/180) * Math.PI; //angulo en rad.
imagem.x=0;
imagem.y=0;
customMove.target=imagem;
customMove.duration=5; //Movimento rápido, 5ms

//faz o movimento da imagem de acordo com o circulo imaginário
//o circulo é definido sempre com o centro fixo (centroX/Y) e             //variando de acordo com os cosenos (XX) e senos (YY) do grau de         //movimento, multiplicado pelo raio para que fique sempre à mesma         //distancia do centro.
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;

//quando termina o movimento, chama o moveCircNext que se                 //encarregará de efectuar o proximo movimento que tornará este move         //num ciclo infinito até o eventListner ser retirado.
customMove.addEventListener(EffectEvent.EFFECT_END, moveCircNext);

customMove.play(); //inicia o movimento.
isMoving=true; //declara o movimento como iniciado.
}

private  function moveCircNext(evt:EffectEvent):void{
angulo-=5; //variação que o efeito fará, vai mudar 5 graus de angulo
angulo%= 360; //sem esquecer a referencia do circulo, 360 graus.

//transformação en radianos.
var radians:Number= (angulo/180) * Math.PI;

//de novo o mesmo movimento.
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;
customMove.play();

}
[/coolcode]

Este movimento será infinito já que o customMove têm um eventListner que fará que seja executado infinitamente, para o terminar, fazemos a função seguinte:

[coolcode language=”actionscript”] private  function stopCircMove():void {
customMove.removeEventListener(EffectEvent.EFFECT_END, moveCircNext);
isMoving=false;
}
[/coolcode]

E assim o nosso efeito circular será terminado, testem o código e vejam o uso da matematica aliado à programação…

Bom, por agora é tudo.

Qualquer duvida, usem o fórum do blog. Para os que procuram seguir esta serie de tutoriais, podem encontrar todos os numeros aqui.

Abraço.


2 comments

add yours

Leave a Comment

Post