Tutorial Action Script 3 – 016

Tutorial Action Script 3 – 016

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

No ultimo tutorial terminamos com um painel personalizado e com a aplicação dos estudos sobre a estrutura das classes. Vamos passar a um novo ponto do actionscript, ponto em que vamos falar de efeitos e animações.. segue então a continuação…

6. Efeitos e Filtros

Como vimos anteriormente foram utulizados alguns efeitos (resize, move e parallel) que fizerem com que o nosso painel aumenta-se de tamanho e se coloca-se na devida posição indicada pelo move.

O AS3 do Flash traz algumas funções de animação (tween) mas são um pouco limitadas, mas aqui vou falar das funções de animação do AS3 no Flex, bem como alguns efeitos e também como criar a nossa propria função de animação e criar efeitos paralelos e sequenciais.

Começando pelos mais simples, um simples efeito de movimento feito programaticamente sem recurso aos efeitos nativos do flex..

6.1. Move – Movimento

Pretende-se movimentar uma imagem no ‘eixo dos xx’ desde x=0 até x=100, para isso facilmente conseguiria-mos perceber o seguinte código feito com recurso a um timer:
[coolcode lang=”actionscript”] //variavel timer, que define o seu tempo de execução em 10ms
private  var timed:Timer = new Timer(10);

//função para iniciar o timer
public  function timedMovement():void {
imagem.x=0;
timed.addEventListener(TimerEvent.TIMER, timedMove, false, 0, true);
timed.start();
}

//função chamada pelo timer a cada 10 milisegundos
private  function timedMove(evt:TimerEvent):void {
//move a imagem 4 em 4 px, verificando antes de mover a imagem se o proximo //movimento ficará acima do nosso maximo (100) imagem.x+4>100 e se for o caso é //sinal que a imagem já se encontra no final do movimento pretendido, parando o //timer.
if(((imagem.x+4)+imagem.width)<100) imagem.x+=4;
else {
timed.stop();
timed.removeEventListener(TimerEvent.TIMER, timedMove);
}
[/coolcode]

Este simples movimento efectua uma transição do x=0 até ao x=100 de 4 em 4 pixeis, como exemplifica a imagem em baixo:

move_1

Este é o básico de qualquer movimento fundamentado pelas leis da matemática, e para evitar estes calculos todos foram feitas varias funções de animação e incluidas no package mx.effects que pode ser acedido no flex.

Tendo o objectivo de simplificar, este package também nos propões algumas soluções simples que necessitariam de grandes conhecimentos matemáticos e acima de tudo a necessidade de saber implementar esses conhecimentos no AS3… mas como isso é tudo ultrapassado pelo package effects podemos provar a sua simplicidade fazendo o mesmo movimento que em cima criamos, mas desta feita, nativamente com a função Move do AS3;

Vejam o seguinte código que fará a mesma coisa que o exemplo em cima:

[coolcode lang=”actionscript”]

var  move:Move = new Move();
imagem.x=0; //colocamos a nossa imagem no x=0;
move.duration=2000; //duração do movimento em milissegundos 200 =~ 2s
move.target=imagem; //definimos o target do nosso movimento
move.xTo=100; //Indicamos que o x deve-se mover até ao x=100;
move.play(); //iniciamos o nosso movimento.

[/coolcode]

Este função não necessita de qualquer eventListener e faz exactamente o que criamos em anteriormente. Coloquei estes 2 exemplos para conseguirem entender que todas as funções que vamos falar mais à frente são possíveis de fazer com cálculos matemáticos.

A partir desta função, facilmente poderíamos criar uma outra que move no eixo dos xx e também no eixo dos yy, vejam:

[coolcode lang=”actionscript”]

public  function nativeMultiMove():void {
var move:Move = new Move();
imagem.x=0;
imagem.y=0;
move.duration=2000;
move.target=imagem;
move.xTo=100;
move.yTo=70;
move.play();
}

[/coolcode]

Esta função criará um movimento como a imagem em baixo demonstra:
move_2

Simples ah?

6.2. Resize – Redimensionamento

O segundo efeito apresentado anteriormente no exemplo do painel foi o resize, que é mais um dos efeitos nativos nas classes effects do AS3 no Flex, que pode ser facilmente feito pela segunte função.

[coolcode lang=”actionscript”]

public  function nativeSize():void {
//Função que cada vez que for executada aumenta em 20px o //tamanho da nossa imagem.
var size:Resize=new Resize;
imagem.x=0;
size.target=imagem;
size.heightTo=imagem.height+20; //aumenta a altura em 20px
size.widthTo=imagem.width+20 //aumenta o comprimento em 20px
size.duration=500; //duração
size.play(); //inicio
}

[/coolcode]

Ao chamar esta função, a imagem será aumentada na largura e altura em 20px como demonstrada pela imagem:
resize_1

6.3. Rotate – Rodar

Temos ainda outros efeitos, como o rotate que nos permite rodar a imagem em determinados graus como mostra a função:
[coolcode lang=”actionscript”]

public  function nativeRotate(inverse:Boolean=false):void {
var rot:Rotate = new Rotate;
//colocamos a imagem numa posição em que seja possivel rodar
// isto não é necessário mas é por uma questão que se a imagem
// estiver com x=0 e y=0 o seu movimento será parcialmente
// ocultado
imagem.x= 100;
imagem.y= 100;
rot.angleTo=+360;    // definir o angulo, 360= 1 volta completa
rot.duration=1000; // duração.
rot.play([imagem],inverse);
//nesta linha vemos umas novidades, em vez de definir o
//rot.target=imagem, posso defini-la quando se chama a função
//indicando um ou mais target’s num formato de array, e uso
//também o inverse, que permite executar o mesmo efeito mas ao

//contrario como exemplifica as imagens em baixo.
}

[/coolcode]

Que irá produzir algo como:

rotate

E bom… por agora é tudo… já ficaram a conhecer um pouco mais sobre animação com as classes nativas do as3, no proximo tutorial falaremos sobre funções de animação, mais alguns efeitos e efeitos em simultaneo e paralelo…. mas isso fica pro próximo tutorial.

Se tiverem duvidas usem o fórum. Criticas ou sugestões deixem em comentário….

Abraço.

6. Efeitos e Filtros


1 Comment

add yours
  • Gabriela de Souza February 22, 2010

    Queria elogiar este Site!! está perfeito!!!
    Gostaria também de pedir ajuda…. preicso fazer o seguinte… uam imagem subindo em um loop infinito… imagem estreita de largura mas com altura muito grande… dai quando o mouse passar sobre um determinado ponto dessa imagem o movimetno de subir seja interrompido…. farei tipo um menu rolante de noticias que sempre achamos na internet que quando passamos o mouse sobre ele para na noticia que o mouse está sobre… mas tudo isso com imagem….

    será possivel uma ajudinha!?

    Deus abençoe!!!
    e prospere esse belo trabalo!

Leave a Comment

Post