Fórmulas Essenciais de ActionScript--------------------------------------------------------------------------------------------------------------------------------------------------

A. IntroduçãoMuitas 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 favoritasA 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=3friccao=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){ // bt1back.x = 200 back.y = -50 back.rot = 0 }

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

on(press){ // bt3back.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 arraysletra._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; iclips[i] = [];// array que contendrá cada letra clips[i]["accion"] = "girar";// array noNumérico, con acción a realizar for (var j = 0; jcount++;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; ifor (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. LivrariasCriar 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