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:
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);
}
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:
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:
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.
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:
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();
}
Esta função criará um movimento como a imagem em baixo demonstra:
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.
//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
}
Ao chamar esta função, a imagem será aumentada na largura e altura em 20px como demonstrada pela imagem:
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:
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.
}
Que irá produzir algo como:
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
Um Comentário
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!