Tweener

Pré-Requisitos

Adobe Flash 8 ou CS3.

Conteúdo

Olá pessoal, primeiramente um feliz ano de 2008 a todos.

Para comemorar essa passagem de ano vou postar como se usa a classe Tweener, melhorada do tween essa classe tem como objetivo principal escrever animações via Actionscript 2 ou 3.

A classe Tweener é uma classe estática você poderá chamar métodos, propriedades, mas nunca poderá criar instâncias ou objetos.

Instalando

1. Vamos fazer o download da classe, baixe aqui. Ela é free, então não tem problema nenhum em baixá-la.

2. Extraia seu arquivo em qualquer lugar.

3. Mova todos os arquivos dezipados a raíz de seu projeto.

4. Para usá-la você deve usar o import do flash. Mais pra frente veremos como.

Introdução

1. Depois de feito os passos de instalação use o seguinte para importar a classe pro seu projeto.

import caurina.transitions.Tweener;

Com a classe Tweener você pode escrever suas animações via AS com o método AddTween

Tweener.addTween(meu_mc, {_x:20, _y:40, time:1, transition:”linear”});

Aí em cima eu fiz o meu_mc andar da sua posição inicial até o valor _x = 20 e _y = 40 , simples não?

Também posso fazer ele ir a direções dinâmicas.

Tweener.addTween(meu_mc, {_x:meu_mc._x+200, _y:40, time:1, transition:”linear”});

Outra novidade interessante é o delay e _bezier, delay como todos já sabem é o tempo que se conta até algo acontecer. Como a Tweener trabalha com segundos em vez de milisegundos o número 1 representa 1 segundo.

Tweener.addTween(meu_mc, {_x:20, _y:40, time:1, delay:1, transition:”linear”});

O
_bezier serve para alterarmos nossa tangente de animação, ou seja, usar côncavos durante o percurso, quem nunca estudou sobre planos cartesianos?

Tweener.addTween(meu_mc,{_x:100, _y:100, _rotation:360, time:5, delay:1, transition:”easeStrong”, _bezier:[{_y:-100}, {_y:400}]});

Vou explicar o que acontece aí em cima. Estou falando para meu Mc que ele tem que ir até valor de _x=100, _y=100, rotacionar 360°, a animação só acontece depois de um segundo, e tem um tempo total de 5 segundos, com uma transição de easeStrong… e por último, nosso amigo _bezier, ali estou falando que durante essa animação toda ele tem que andar no eixo _y primeiro até o valor -100 e depois até o valor 400, o que faz com que ele crie essa tangente de concavo, sem termos que usar mil linhas de código pra isso.

A classe Tweener não se limita a isso, aqui estou apenas mostrando o básico do bem básico pro pessoal ir dando uma estudada. Qualquer dúvida postem no fórum ou me mandem e-mail. marcelo@marceloduende.com.br

Abraço a todos e bom estudo.

Autor: Marcelo Duende- Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

HitTest

Pré-Requisitos

Macromedia Flash 8, Flash Communication Server ou Flash Media Server.

Conteúdo

Olá pessoal, é meu primeiro tutorial no MX Studio, e o que eu pensei pra essa caminhada é o seguinte:

Ensinar por partes o desenvolvimento de um joguinho de tiros, coisa simples, mas que da uma boa base pra frente.

No tutorial de hoje vou ensinar a usar o hitTest que nada mais é do que um verificador de colisão entre objetos. Chega de conversa e vamos lá.

Primeiro vamos observar a funcionalidade disso. No filme abaixo note que se você arrastar a bolinha pelo palco e soltar nada acontece, agora, se você e soltar dentro do outro quadrado, imediatamente essa bola vai até seu ponto de origem não é mesmo? Isso que se resume o hitTest, dar uma ação quando acontece a colisão. Mas como fazer?

Vamos primeiro reproduzir o arquivo acima, crie uma bola e um quadrado, dentro de um filme de 500 por 450 pixels, transforme os dois elementos em MovieClips, para isso selecione um de cada vez e aperte a tecla de atalho F8, depois de criado nossos dois MovieClips, temos que instanciá-los para declará-los em nosso código, isso se chama OOP (Oriented Object Programming ou Programação Orientada a Objeto). Instancie a bola de “drag_mc” sem as aspas e o quadrado de “area_mc” também sem as aspas.
Ok depois de instanciado nossos objetos vamos ao código. Para acessar sua janela de códigos aperte F9. Agora vamos trabalhar com ActionScript linguagem de programação do Flash.

Vamos inserir por partes o nosso código.

1. Primeiro vamos definir a posição de retorno do MovieClip quando acontecer o hitTest.

var initPosX:Number = 240; // posição X
var initPosY:Number = 100; // posição Y

2. O startDrag nos vai fazer com que arrastemos o drag_mc pelo palco.

drag_mc.onPress = function():Void { // declarando que ao pressionar o drag_mc acontecerá o que está dentro do comando
startDrag(drag_mc);
};

3. O nosso hitTest fará com que quando o drag_mc encostar no area_mc volte imediatamente a posição inicial.

drag_mc.onRelease = function():Void {// o onRelease vem depois do onPress porque ele só é ativado quando se solta o botão do mouse.
if (this.hitTest(area_mc)) { // aqui temos o if (em inglês “se”), e falamos se this (“este” em inglês) colidir em area_mc acontecerá o que está dentro do if
drag_mc._x = initPosX; // que é a posição inicial de X e Y
drag_mc._y = initPosY;
}
stopDrag(); // finalmente paramos o drag
};

E pronto, a parte bem básica de como trabalhar com colisão está pronta. No próximo tutorial ensinarei como trabalhar para que tiros sejam lançados e aconteça o hitTest. Quem tiver interesse em baixar os artigos dessa seção clique aqui.

Abraço a todos e bom estudo.

Autor: Marcelo Duende- Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.