Tutorial Action Script 3 – 018

Tutorial Action Script 3 – 018

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

Nesta parte do tutorial vamos usar todo o conhecimento passado nos exemplos anteriores para criar um explorador de efeitos e animações…

Começando…

6.9.1. Exemplo de explorador de efeitos / animações

Para o teste de todos estes efeitos, fiz uma class que extende um canvas e nos vai permitir testar todos estes efeitos. No flex criem um novo projecto chamado  testAS3Effects e criem uma pasta dentro da vossa raiz «src» com o nome «com» e dentro dessa uma outra com o nome «msdevstudio», depois criem uma nova class action script com o nome eff e coloquem o seguinte código dentro desse mesmo ficheiro…

[coolcode language=”actionscript” download=”eff.as”] package com.msdevstudio
{
import flash.events.TimerEvent;
import flash.utils.Timer;

import mx.containers.Canvas;
import mx.controls.Image;
import mx.effects.Blur;
import mx.effects.Fade;
import mx.effects.Glow;
import mx.effects.Move;
import mx.effects.Parallel;
import mx.effects.Resize;
import mx.effects.Rotate;
import mx.effects.Sequence;
import mx.effects.easing.*;
import mx.events.EffectEvent;
import mx.events.FlexEvent;

public class effects extends Canvas
{
private var imagem:Image;
private var originalSizeW:int;
private var originalSizeH:int;
private var timed:Timer = new Timer(10);
private var customMove:Move = new Move;
private var moveDir:String=”Up”;
private var isBlur:Boolean=false;
private var isGlow:Boolean=false;
private var angulo:int=0;
private var raio:int=50;
private var centroX:int;
private var centroY:int;
private var isMoving:Boolean=false;

[Embed(source=”smile.jpg”)] private var img:Class;

[Embed(source=”bomb.jpg”)] private var img2:Class;

public function effects()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, onReady, false, 0, true);
}

private function onReady(evt:FlexEvent):void {
imagem=new Image;
imagem.x=0;
imagem.y=(this.height/2)-70;
imagem.source=img;
addChild(imagem);
originalSizeW=128;
originalSizeH=128;
centroX=(this.width/2)-(originalSizeW/2);
centroY=(this.height/2)-(originalSizeH/2);
}

public function timedMovement():void {
reset();
timed.addEventListener(TimerEvent.TIMER, timedMove, false, 0, true);
timed.start();
}

private function timedMove(evt:TimerEvent):void {
if(((imagem.x+4)+imagem.width)
else {
timed.stop();
timed.removeEventListener(TimerEvent.TIMER, timedMove);
}
}

//limpa todos os efeitos
public function reset():void {
imagem.source=img;
imagem.x=0;
imagem.y=(this.height/2)-70;
imagem.height=originalSizeH;
imagem.width=originalSizeW;
customMove.removeEventListener(EffectEvent.EFFECT_END, doJump);
imagem.filters=[];
imagem.alpha=1;
if(isMoving==true) stopCircMove(); //caso esteja a mover

}

public function nativeMove():void {
var move:Move = new Move();
reset();
move.duration=2000;
move.target=imagem;
move.xTo=this.width-imagem.width;
move.play();

}

public function nativeMultiMove():void {
var move:Move = new Move();
reset();
imagem.source=img2;
move.duration=2000;
move.target=imagem;
move.xTo=this.width-imagem.width;
move.yTo=170;
move.play();
}

public function nativeSize():void {
//para não aumentar para fora do nosso canvas se varias vezes //clicado.
if((imagem.y+imagem.height+20)
var size:Resize=new Resize;
imagem.x=30; //como vai aumentar não vai para fora da area do //nosso canvas.
size.target=imagem;
size.heightTo=imagem.height+20;
size.widthTo=imagem.width+20
size.duration=500;
size.play();
}
}

public function nativeRotate(inverse:Boolean=false):void {
var rot:Rotate = new Rotate;
//rot.target=imagem;
reset();
imagem.x=(this.width/2)-(originalSizeW/2)
imagem.y=(this.height/2)-((originalSizeH/2)+50);
rot.angleTo=+360;
rot.duration=1000;
rot.play([imagem],inverse);
}

public function customJump():void {
moveDir=”Up”;
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=this.height-originalSizeH;
customMove.target=imagem;
customMove.yTo=imagem.y-50;
customMove.addEventListener(EffectEvent.EFFECT_END, doJump,false,0,true);
customMove.play();

}
private function doJump(evt:EffectEvent):void {
if(moveDir==”Up”) {
customMove.yTo=imagem.y+50;
customMove.play();
moveDir=”Down”;
}
else
{
customMove.yTo=imagem.y-50;
customMove.play();
moveDir=”Up”;
}

}

//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
/* exemplos
Bounce.easeIn / easeInOut / easeOut
Elastic.easeIn / easeInOut / easeOut
Circular.easeIn / easeInOut / easeOut
Back.easeIn / easeInOut / easeOut
etc…
*/

public function nativeDropBounce():void {
reset()
imagem.source=img2;
imagem.y=-originalSizeH+50;
imagem.x=(this.width/2)-(originalSizeW/2);

var move:Move = new Move;
move.target=imagem;
move.duration=1500;
move.yTo=(this.height-(originalSizeH));
//função de animação
move.easingFunction=Bounce.easeOut;
move.play();
}

public function nativeCircularMove():void {

reset();
var radians:Number= (angulo/180) * Math.PI;

imagem.x=0;
imagem.y=0;
imagem.source=img2;
customMove.target=imagem;
customMove.duration=5;
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;
customMove.addEventListener(EffectEvent.EFFECT_END, moveCircNext);
customMove.play();
isMoving=true;

}

private function moveCircNext(evt:EffectEvent):void{
angulo-=5;
angulo%= 360;
var radians:Number= (angulo/180) * Math.PI;
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;
customMove.play();

}

private function stopCircMove():void {
customMove.removeEventListener(EffectEvent.EFFECT_END, moveCircNext);
isMoving=false;
}

//utilização de efeitos paralelos e efeito Fade
public function nativeFadeMove():void {
reset();
imagem.x=0;
imagem.y=0;
var par:Parallel = new Parallel;
par.target=imagem;
par.duration=1500;
var move:Move = new Move;
move.xTo=this.width-originalSizeW;
move.yTo=this.height-originalSizeH;
par.addChild(move);
var fade:Fade = new Fade;
fade.alphaFrom=0;
fade.alphaTo=1;
par.addChild(fade);
par.play();
}

//utilização de efeitos em sequencia:

public function multipleEffects():void {
var seq:Sequence = new Sequence;
var move:Move = new Move;
var glow:Glow = new Glow;
var fade:Fade = new Fade;

reset()
imagem.source=img2;
imagem.y=-originalSizeH+50;
imagem.x=(this.width/2)-(originalSizeW/2);

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

seq.addChild(move);
//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);
//finalmente o nosso fade;
fade.alphaFrom=1;
fade.alphaTo=0;
fade.duration=1500;

seq.addChild(fade);

seq.target=imagem;
seq.play();

}
//mais efeitos nativos como blur, glow, dissolve, iris, zoom etc…
//bastanto aceder a eles declarando
// iris:Iris = new Iris
// dissolve:Dissolve = new Dissolve;
// zoom:Zoom = new Zoom;
//blur
public function nativeBlur():void {
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=(this.height/2)-(originalSizeH/2);
var blur:Blur = new Blur;
blur.target=imagem;
blur.blurXTo=10;
blur.blurYTo=10;
blur.duration=100;
blur.play();
isBlur=true;
}

//glow
public function nativeGlow():void {
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=(this.height/2)-(originalSizeH/2);
var glow:Glow = new Glow;
glow.target=imagem;
glow.alphaFrom=0;
glow.alphaTo=1;
glow.blurXTo=30;
glow.blurYTo=30;
glow.color=0x43ADF0;
glow.play();
isGlow=true;
}
}
}
[/coolcode]

Finalmente no vosso testAS3Effects.mxml coloquem o código:
[coolcode language=”xml” download=”testAS3Effects.mxml”]


















[/coolcode]

E agora apenas têm que copiar estas duas imagens com os respectivos nomes para a mesma pasta do effects.as (com/msdevstudio)

bomb.pngsmile.png

Compilem o vosso projecto e vejam o nosso explorador de animação e efeitos a funcionar :)

Por hoje foi mais código, mas uma ótima forma de aprender a usar efeitos e animações, certo?
Podem ver o resultado final disponivel aqui.

(Notem que as imagens são diferentes, posem usar as que disponibilizei ou quaisquer outras. Os downloads dos códigos podem ser feitos nas caixas dos códigos em cima, mas devido a problemas de formatação por vezes podem apresentar caracteres estranhos que podem impedir o seu funcionamento correto.)

Duvidas? Pergunte aqui!

Abraço.


8 comments

add yours
  • […] script e coloquem o seguinte código dentro desse mesmo ficheiro…(…)Leia o resto de Tutorial Action Script 3 – 018 (137 […]

  • Paulo April 5, 2010

    Porque não colocam o exemplo em algum lugar pra a gente poder ver sem ter que baixar e compilar?
    Valeu
    Abraço

  • Paulo April 5, 2010

    E o primeiro link “série de tutoriais” não funciona.

  • Mário Santos April 6, 2010

    Ola Paulo, obrigado pelas dicas!

    O exemplo até já tinha sido mostrado aqui no blog num artigo, mas segue o link para visualizar o resultado final.
    http://msdevstudio.com/blog/flexSource/testAS3Effects/

    Quanto o link foi corrigido.

    Abraço,
    Cumps.

  • Ronaldo July 28, 2010

    Alguem poderia dispor ou compartilhar uma Apostila de aborda por completo está linguagem de programação do ActiONScript v_3.0

    contato: ronaldotelecom@hotmail.com

  • Andre September 27, 2010

    Muito boa a serie de tutoriais! parabens!

    Neste ultimo tutorial (18) não está rodando!

    erro nesta linha.

    mensagem de erro

    Description Resource Path Location Type
    1046: Type was not found or was not a compile-time constant: effects. testAS3Effects.mxml /testAS3Effects/src line 12 Flex Problem

    Não sei se fiz algo errado.

    se puder me ajudar?

    abraços,

    André

  • Mário Santos September 29, 2010

    Andre,
    Qual é a linha 12??

    Parece que ele não consegue carregar o componente effects, voce alterou o caminho da classe?? ou têm no seu mxml ao cimo:
    mlns:ns1=”com.msdevstudio.*” ??

    Cumps.

  • Bruxo October 2, 2010

    Cara você é realmente crânio ,

    eu tava procurando a tempo esses tutoriais sobre linguagem adobe , más eu sempre encontrava informações invalidas , e mal formuladas, seus tutoriais são muito praticos criativos , e intuitivos ,

    Muito Obrigado , voce é um exemplo

Leave a Comment

Post