Fórmulas Essenciais de ActionScript

--------------------------------------------------------------------------------------------------------------------------------------------------

A. Introdução
Muitas vezes a gente pensa que usar formulas em Flash requere um grande conhecimento de matemática e
programação orientada a objetos. Na realidade é algo distinto. Basta ter alguns conhecimentos básicos e uma
grande disposição para achar soluções.
Neste artigo, vamos tratar de algumas fórmulas essenciais e seu emprego para criar efeitos e aplicações mais
complexas.

B. As favoritas
A seguir vamos descrever 3 fórmulas que são muito usadas pelos desenvolvedores em Flash e que devem
ser as as primeiras (principalmente) a serem aprendidas

B.1 Easing. Esta fórmula é a mais comum e umas das primeiras a se aprender:

v += ( vf - va ) / d
v valor
vf valor final
va valor atual
d fator da divisão

O q essa fórmula faz é passar um valor para outro, diminuindo a velocidade a medida que alcança o valor
final.

Exemplo 1: Para criar um mouse trailer simples, pode-se usar esta formula. Substituindo as variáveis na
formula baseado no eixo X e supondo q as ações estão dentro de uma instacia de filme (movie clip), nós
temos a seguinte formula:

_x += ( _parent._xmouse -_x ) / 10;

Fazendo o mesmo para o eixo Y:

_y += ( _parent._ymouse - _y ) / 10 ;

O script completo ficaria assim:

onClipEvent(enterFrame){
_x += ( _parent._xmouse -_x ) / 10;
_y += ( _parent._ymouse -_y ) / 10;
}

B.2 Bounce. Esta formula faz basicamento o mesmo da fórmula anterior, para um valor para outro, porém,
dando um efeito de elasticidade.

v += (vt = vt * f + (vf - va) * r)

v valor
vr valor temporal
f fricção
vf valor final
va valor atual
r raio

Exemplo 2: Se substituirmos a fórmula de easing do exemplo anterior com a fórmula BOUNCE, o script ficaria
assim:

onClipEvent(load){
f = 0.9 ;
r = 0.03 ;
}
onClipEvent(enterFrame){
_x += ( xt = xt * f + ( _parent._xmouse - _x ) * r ) ;
_y += ( xt = xt * f + ( _parent._ymouse - _y ) * r ) ;
}

B.3 Gravity. Há mais que uma opção, neste caso nós usaremos a forma simples. Há de se tomar em conta
que o stage (área de trabalho) do Flash, se compararmos com um plano cartesiano, ele se encontra no
quadrante inferior direito. É por esta razão q para orientar um clip para o lado direito, aumentamos
apropriedade _x, e para orienta-lo para esquerda diminuímos a mesma propriedade. Para orientar o clip para
cima precisamos diminuir a propriedade _y, e para baixo, aumentamos o _y.

A fórmula:
y += (yvel = (yvel+g)* f)
y coordenada y
yvel velocidade em y
g gravidade
f fricção

Exemplo 3: Este é um exemplo simples em que inicamos com uma velocidade de -15:

onClipEvent(load){
yvel=-15
gravidade=3
friccao=0.96
}
onClipEvent(enterFrame){
_y += (yvel = (yvel+gravedad)* friccion)
}

C. O que eu faço com isso?

Aqui é onde vem o difícil, você terá que pensar em soluções. Suponhamos que queremos fazer um sistema
de navegação como do Barneys.com, em que o fundo se move para chegarmos a seção desejada.

Exemplo 4: Temos duas fórmulas para mover clipes especificando o ponto final....easing e bounce. Usemos
easing...obviamente o fundo terá q ser um movie clip para poder ser movido. Se a área de trabalho é de
300x150 e temos 3 seções, e queremos que se movam de maneira horizontal, então necessitamos um movie
clip fundo de 900x150. Edite o seu movie clip de forma q o seu centro fique no canto esquerdo superior que
será o ponto (0,0).
Como a imagem começa em (0,0) e a largura é de 300.... isso será a unidade para mover o fundo. Asim, a
primeira seção estará em (0,0), a segunda em (-300,0) e a terceira em (-600,0).

Por que movemos em números negativos no eixo x? Porque a imagem se movimentará para a esquerda.
(explicação do plano cartesiano acima, lembra?)

Então, vamos ao script. Teremos uma variavel com nome "x" que será a que nos dirá a que posição o movie
clip irá. Como a posição inicial em X (0), iniciaremos o script que deverá ser posto no único clip que tem na
cena, ou seja, o fundo a ser movido.

onClipEvent(load){
x=0
}

Agora, poremos o script que fará que todo o clip se mova, neste caso somente no eixo x:

onClipEvent(enterFrame){
_x += (x-_x)/4;
}
Tudo isso....!!!! Isso é tudo para que todo o movie clipe se mova. Agora nós mudaremos o valor de "x" de
forma que os movimentos do movie clipe de fundo se mova para a posição que nós queremos.

Primeiro nós temos que pôr um nome de instância para o fundo, neste caso estará "back". Agora nós
precisamos 3 botões e cada botão terão o script a seguir:

on(press){
back.x = 0 // para bt 1
}
on(press){
back.x = -300 // para bt 2
}
on(press){
back.x = -600 // para bt 1
}

Isso é tudo que precisamos para o sistema de navegação......

No exemplo acima, nós mudamos a propriedade _x, mas que tal se nós também mudássemos outras
propriedades, como a posição em Y (_y) e a rotação (_rotation).

Exemplo 5: Suponhamos que nosso stage tenha 300x150 e a imagem de fundo tem 400x400 e temos
também 3 posições diferentes, que levam em conta as propriedades _x, _y, _rotation.
Realizaremos o mesmo procedimento do exemplo anterior:

onClipEvent(load){
x = 200
y = -50
rot = 0
}

onClipEvent(enterFrame){
_x += (x-_x)/4;
_y += (y-_y)/4;
_rotation += (rot-_rotation)/4;
}

Na instancia deste clip poremos o nome de "back" e nos botões, poremos o seguinte codigo com os
parâmetros que escolhemos:

on(press){ // bt1
back.x = 200
back.y = -50
back.rot = 0
}

on(press){ // bt 2
back.x = 176
back.y = 70
back.rot = -45
}

on(press){ // bt3
back.x = 148
back.y = 45
back.rot = 40
}

O efeite se será mais interessante q o anterior. Pode-se ver que o script tem várias propriedades, você só terá
que acostumar-se para usa-las adequadamente. Bem, como haviamos comentado antes, é importante
esboçar os problemas e organizar uma solução. Para isso teremos uma pergunta básica: O que eu preciso?
... esta pergunta sempre nos ajudará a começar um esboço do que nós queremos. Outra ferramenta boa é ter
livrarias de scripts, isto nos ajuda a reduzir o tempo que nos ocupamos a desenvolver um script, de forma que
nao precisemos reescrevê-lo.

D. Criando prototypes.

No Flash, os objetos tem uma propriedade chama Prototype , esta propriedade (que tambem e um objeto) é
usada para para nomear outras propriedades a uma classe. Quer dizer, levemos em conta que MovieClip é
uma classe, e nós queremos nomear um método novo à classe inteira MovieClip:

MovieClip.prototype.mensagem = "O mundo vai se acabar..!!"

Assim, estamos criando uma propriedade chamada "mensagem" à clase MovieClip, quer dizer que todos os
movie clips que existem vao ter essa propriedade. Se há dois clipes chamados "um" e "dois" respectivamente,
ambos possuiriam aquela propriedade, quer dizer, um.mensagem e dois.mensagem conteriam a cadeia "O
mundo terminará!!."

Isto também se aplica para funcões que construem métidos. Por exemplo:

MovieClip.prototype.mover = function () {
_x++
}

No script acima (que pode ser posto no 1º frame ou dentro de um movie clip, não importa...) cria um método
chamado "mover()" que vai funcionar para todos os movie clips

Exemplo 6: Construiremos um prototype utilizando a fórmula Bounce:

MovieClip.prototype.bounce = function(x, y){

var f= 0.7; var r= 0.3;
_x+= ( xvel= xvel * f + ( x - _x ) * r )
_y+= ( yvel= yvel * f + ( y - _y ) * r )
}

Este novo metodo já pode ser usado em qualquer movie clip, basta especificar a localização (x,y), para onde
você quer que ele vá. Usaremos as coordenadas do mouse:

onClipEvent( enterFrame ){
bounce( _parent._xmouse, _parent._ymouse )
}

Este é um modo para ter um pouco melhor organizado o seu script, ou simplesmente um modo para usar de
novo os scripts que nós já fizemos anteriormente.

Exemplo7: Suponhamos que queremos fazer um menu que tenha 5 botões de maneira vertical, separados
por 20 pixels um do outro, e que tambem esse menu seja arrastável, dando a impressão que os bts estejam
unidos por uma corta invisível.

O que precisamos?
Precisamos fazer um drag no bt que puxará os outros. Nós precisamos também que os outros bts continuem
unidos ao primeiro, em forma de uma cadeia.

Ok, primeiro inserimos um bt dentro de um movie clip e nele pomos o seguinte script:

on(press){
this.startDrag()
}
on(release,releaseOutside){
stopDrag()
}

Agora, o que continua... nós precisamos mover ao outro.... nós usamos o protótipo Bounce, que nós já temos,
com uma modificação pequena ao valor "f" e de "r":

MovieClip.prototype.bounce = function(x, y){

var f= 0.7; var r= 0.2;
_x+= ( xvel= xvel * f + ( x - _x ) * r )
_y+= ( yvel= yvel * f + ( y - _y ) * r )
}

E por último, é necessário lhes falar onde eles têm que se mover. Vamos resolver isto da seguinte maneira:
nós poremos os 5 clipes dentro de uma Array, para ficar mais fácil de manipular os dados... (há as pessoas
que preferem não usar Arrays).

onClipEvent(load){
a= _root.a
a._visible= 0
num= 4
dist= 20
clips= [this]
for(var i= 1; i<= 4; i++){
a.duplicateMovieClip("a"+i,i)
clips[i]= _root["a"+i]
}
}
onClipEvent(enterFrame){
for(var i= 1; i<= 4; i++){
clips[i].bounce(clips[i-1]._x, clips[i-1]._y + dist )
}
}

Neste caso, o clipe arrastado é o que controla todos os demais, e é o que diz que os outros continuam presos
a este.

E. Complicando a vida

Bom... agora nós vamos fazer algo mais complexo... que tal um redemoinho de letras? E que essas letras
saiam do redemoinho, caindo, e formando uma palavra, quando você fizer um rollOver sobre um bt.

Exemplo 8: Para fazer um redemoinho, precisamos de uma fórmula que descreva uma circunferência, coisa
que qualquer livro de matematica basica tem.
No caso, usaremos estas:

x = cos(ang) * radio
y = sin (ang) * radio

Assim, nós usaremos métodos "sin" e "cos" do objeto "Math" (Math.cos (), Math.sin ()). é importante se
lembrar daquele Flash usa radianes e graus de non na Matemática de objeto. Assim nós precisamos
converter de graus a radianes se é que nós queremos ter uma base em graus.
Para isso, construiremos dois metidos no objeto Math

Para isto nós construiremos dois métodos no objeto Math que nos farão o trabalho de transcurso de graus
para radianos.
Math.sin2 = function (angulo) { return Math.sin(angulo*Math.PI/180) }
Math.cos2 = function (angulo) { return Math.cos(angulo*Math.PI/180) }

Agora Bom... agora é necessário criar um método que nos dê movimento circular.

movieClip.prototype.circular= function(){
if(!ang) ang = Math.floor(Math.random() * 360)
if(!radio) radio = Math.floor(Math.random() * 50) + 25
if(!sentido) sentido = (Math.random() * 10) - 5
xC = Math.cos2 (ang) * radio
yC = M ath.sin2 (ang) * radio
ang+= sentido
}

O método acima cria 3 variáveis (ang, radio e sentido), que realizam um movimento circular, e armazenam os
valores em outras 2 variáveis "xC" e "yC".

movieClip.prototype.easing= function( x, y){

var x= x; var y= y
_x+= (x - _x) / 3
_y+= (y - _y) / 3
}

E por último, usaremos um método de gravidade:

movieClip.prototype.gravity= function(){
var friccao= 0.96; var gravidade= 3
if(!yvel) yvel = -(Math.random()*20)
if(_y+yvel+gravidade > 100) {
_y=100; yvel *= -1
} else{
_y += (yvel = (yvel+gravidade)* friccao)
}
}

O que o script acima faz, é gerar a gravidade, mas descobrir quando você chega à coordenada 100 para fazer
um recuo que inverte a velocidade em "yvel." E terminar, é necessário amarrar todos os eventos:
duplicar clipes usando as palavras e os pondo em ordens

onClipEvent (load) {
//duplicar clips usando as palavras e inserindo-os em arrays
letra._visible = 0;
count = 0;
espacio = 10;
palavras = ["FoxSux", "PanSux", "ProvidaSux"];
// array das palavras
clips = [];
// array que irá conter cada grupo de letras por palavra
for (var i = 0; i
clips[i] = [];
// array que contendrá cada letra
clips[i]["accion"] = "girar";
// array noNumérico, con acción a realizar
for (var j = 0; j
count++;
letra.duplicateMovieClip("letra"+count, count);
clips[i][j] = this["letra"+count];
clips[i][j].letra = substring(palabras[i], (j+1), 1);
clips[i][j].xF = (-(espacio*palabras[i].length)/2)+espacio*j;
clips[i][j].yF = i*espacio;
}
}
}
onClipEvent (enterFrame) {
for (var i = 0; i
for (var j = 0; j
// verificar acaoa realizar
if (clips[i]["accion"] == "girar") {
clips[i][j].circular();
clips[i][j].easing(clips[i][j].xC, clips[i][j].yC);
} else if (clips[i]["accion"] == "acomodar") {
clips[i][j].easing(clips[i][j].xF, clips[i][j].yF);
} else {
clips[i][j].gravity();
}
}
}
}

As ações vão se mudando de acordo com o estado dos botões

on(rollOver){
letras.clips[0]["accion"] = "acomodar"
}
on(rollOut){
letras.clips[0]["accion"] = "girar"
}
on(press){
letras.clips[0]["accion"] = "caer"
}

A única coisa que vai e muda entre os botões, é o número: de 0 à 1, e à 2.

F. Livrarias
Criar protótipos e objetos pré-definidos é muito útil, o que nos evita ter que reescrever o mesmo script toda
vez que precisarmos dele. Há muitos lugares onde se encontram livrarias públicas de prototypes e objetos.
Uma delas é http://www.layer51.com/proto/

Exemplo 9: Logo um protótipo que simula um movimento sinuoide em 3D:

// Math functions by Robert Penner

Math.sind = function (theta) { return Math.sin(theta*Math.PI/180) }
Math.cosd = function (theta) { return Math.cos(theta*Math.PI/180) }
Math.atan2d = function (y, x) { return Math.atan2(y, x)*180/Math.PI }
Math.dist = function (a, b) { return Math.sqrt((a*a) + (b*b) ) }
Math.r3 = function (a, b){ return b * 100 / a }

// 3D prototype by Rolf Ruiz

MovieClip.prototype.tresD3 = function ( angleXY, ratioXY, angleXZ , ratioXZ, id ){
za = Math.sind(angleXZ) * ratioXZ
zT = 300 + (za * 2)
zb = ( zT < 1 ) ? 1 : zT
_x = (Math.cosd(angleXY) * ratioXY) + (Math.cosd(angleXZ) * ratioXZ)
_y = Math.sind(angleXY) * ratioXY
_xscale = 300+zb
_yscale = 300+zb
depth = (int( _xscale * 100 ) * 100 ) + id
thie.swapDepths ( depth )
}

Um exemplo de seu emprego:

onClipEvent (load) {
num = 20;
f = 0.9;
r = 0.03;
w = 600;
h = 300;
bola._visible = 0;
for (i=1; i<=num; i++) {
bola.duplicateMovieClip("b"+i, i);
b = this["b"+i];
b.id = i;
b.angleXY = random(360);
b.ratioXY = 100;
b.angleXZ = random(360);
b.ratioXZ = 100;
b.tresD3(b.angleXY, b.ratioXY, b.angleXZ, b.ratioXZ, id);
}
}
onClipEvent (enterFrame) {
x = (Math.r3(w, _root._xmouse)-50)/10;
y = (Math.r3(h, _root._ymouse)-50)/10;
for (i=1; i<=num; i++) {
b = this["b"+i];
b.angleXZ += x;
b.angleXY += y;
b.tresD3(b.angleXY, b.ratioXY, b.angleXZ, b.ratioXZ, id);
}
}

// Rubiano Patrick Basquera