Frmulas Essenciais de ActionScript

-------------------------------------------------------------------------------------------------------------------------------------------------A. Introduo Muitas vezes a gente pensa que usar formulas em Flash requere um grande conhecimento de matemtica e programao orientada a objetos. Na realidade algo distinto. asta ter alguns conhecimentos bsicos e uma grande disposio para achar solu!es. Neste artigo" vamos tratar de algumas f#rmulas essenciais e seu emprego para criar efeitos e aplica!es mais comple$as. B. As favoritas % seguir vamos descrever & f#rmulas que so muito usadas pelos desenvolvedores em Flash e que devem ser as as primeiras 'principalmente( a serem aprendidas B.1 Easing. )sta 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 diviso / q essa f#rmula faz passar um valor para outro" diminuindo a velocidade a medida que alcana o valor final. Exemplo 1* 0ara criar um mouse trailer simples" pode-se usar esta formula. 1ubstituindo as variveis na formula baseado no ei$o 2 e supondo q as a!es esto dentro de uma instacia de filme 'movie clip(" n#s temos a seguinte formula* 3$ +, ' 3parent.3$mouse -3$ ( . 456 Fazendo o mesmo para o ei$o 7* 38 +, ' 3parent.38mouse - 38 ( . 45 6 / script completo ficaria assim* on9lip)vent'enterFrame(: 3$ +, ' 3parent.3$mouse -3$ ( . 456 38 +, ' 3parent.38mouse -38 ( . 456 ; B. Bounce. )sta formula faz basicamento o mesmo da f#rmula anterior" para um valor para outro" porm" dando um efeito de elasticidade. v +, 'vt , vt < f + 'vf - va( < r( v valor vr valor temporal f frico vf valor final va valor atual r raio Exemplo * 1e substituirmos a f#rmula de easing do e$emplo anterior com a f#rmula /=N9)" o script ficaria assim* on9lip)vent'load(: f , 5.> 6

r , 5.5& 6 ; on9lip)vent'enterFrame(: 3$ +, ' $t , $t < f + ' 3parent.3$mouse - 3$ ( < r ( 6 38 +, ' $t , $t < f + ' 3parent.38mouse - 38 ( < r ( 6 ; B.! "ravit#. ? mais que uma opo" neste caso n#s usaremos a forma simples. ? 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 razo q para orientar um clip para o lado direito" aumentamos apropriedade 3$" e para orienta-lo para esquerda diminuAmos a mesma propriedade. 0ara orientar o clip para cima precisamos diminuir a propriedade 38" e para bai$o" aumentamos o 38. % f#rmula* 8 +, '8vel , '8vel+g(< f( 8 coordenada 8 8vel velocidade em 8 g gravidade f frico Exemplo !* )ste um e$emplo simples em que inicamos com uma velocidade de -4B* on9lip)vent'load(: 8vel,-4B gravidade,& friccao,5.>C ; on9lip)vent'enterFrame(: 38 +, '8vel , '8vel+gravedad(< friccion( ;

$. % &ue eu fao com isso' %qui onde vem o difAcil" vocD ter que pensar em solu!es. 1uponhamos que queremos fazer um sistema de navegao como do arne8s.com" em que o fundo se move para chegarmos a seo desejada. Exemplo (* Eemos duas f#rmulas para mover clipes especificando o ponto final....easing e bounce. =semos easing...obviamente o fundo ter q ser um movie clip para poder ser movido. 1e a rea de trabalho de &55$4B5 e temos & se!es" e queremos que se movam de maneira horizontal" ento necessitamos um movie clip fundo de >55$4B5. )dite o seu movie clip de forma q o seu centro fique no canto esquerdo superior que ser o ponto '5"5(. 9omo a imagem comea em '5"5( e a largura de &55.... isso ser a unidade para mover o fundo. %sim" a primeira seo estar em '5"5(" a segunda em '-&55"5( e a terceira em '-C55"5(. 0or que movemos em nFmeros negativos no ei$o $G 0orque a imagem se movimentar para a esquerda. 'e$plicao do plano cartesiano acima" lembraG( )nto" vamos ao script. Eeremos uma variavel com nome H$H que ser a que nos dir a que posio o movie clip ir. 9omo a posio inicial em 2 '5(" iniciaremos o script que dever ser posto no Fnico clip que tem na cena" ou seja" o fundo a ser movido. on9lip)vent'load(: $,5 ; %gora" poremos o script que far que todo o clip se mova" neste caso somente no ei$o $* on9lip)vent'enterFrame(: 3$ +, '$-3$(.I6 ;

Eudo isso....JJJJ Ksso tudo para que todo o movie clipe se mova. %gora n#s mudaremos o valor de H$H de forma que os movimentos do movie clipe de fundo se mova para a posio que n#s queremos. 0rimeiro n#s temos que pLr um nome de instMncia para o fundo" neste caso estar HbacNH. %gora n#s precisamos & bot!es e cada boto tero o script a seguir* on'press(: bacN.$ , 5 .. para bt 4 ; on'press(: bacN.$ , -&55 .. para bt O ; on'press(: bacN.$ , -C55 .. para bt 4 ; Ksso tudo que precisamos para o sistema de navegao...... No e$emplo acima" n#s mudamos a propriedade 3$" mas que tal se n#s tambm mudssemos outras propriedades" como a posio em 7 '38( e a rotao '3rotation(. Exemplo )* 1uponhamos que nosso stage tenha &55$4B5 e a imagem de fundo tem I55$I55 e temos tambm & posi!es diferentes" que levam em conta as propriedades 3$" 38" 3rotation. Pealizaremos o mesmo procedimento do e$emplo anterior* on9lip)vent'load(: $ , O55 8 , -B5 rot , 5 ; on9lip)vent'enterFrame(: 3$ +, '$-3$(.I6 38 +, '8-38(.I6 3rotation +, 'rot-3rotation(.I6 ; Na instancia deste clip poremos o nome de HbacNH e nos bot!es" poremos o seguinte codigo com os parMmetros que escolhemos* on'press(: .. bt4 bacN.$ , O55 bacN.8 , -B5 bacN.rot , 5 ; on'press(: .. bt O bacN.$ , 4QC bacN.8 , Q5 bacN.rot , -IB ; on'press(: .. bt& bacN.$ , 4IR bacN.8 , IB bacN.rot , I5 ; / efeite se ser mais interessante q o anterior. 0ode-se ver que o script tem vrias propriedades" vocD s# ter que acostumar-se para usa-las adequadamente. em" como haviamos comentado antes" importante

esboar os problemas e organizar uma soluo. 0ara isso teremos uma pergunta bsica* / que eu precisoG ... esta pergunta sempre nos ajudar a comear um esboo do que n#s queremos. /utra 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 reescrevD-lo. *. $riando protot#pes. No Flash" os objetos tem uma propriedade chama 0rotot8pe " esta propriedade 'que tambem e um objeto( usada para para nomear outras propriedades a uma classe. Suer dizer" levemos em conta que Movie9lip uma classe" e n#s queremos nomear um mtodo novo T classe inteira Movie9lip* Movie9lip.protot8pe.mensagem , H/ mundo vai se acabar..JJH %ssim" estamos criando uma propriedade chamada HmensagemH T clase Movie9lip" quer dizer que todos os movie clips que e$istem vao ter essa propriedade. 1e h dois clipes chamados HumH e HdoisH respectivamente" ambos possuiriam aquela propriedade" quer dizer" um.mensagem e dois.mensagem conteriam a cadeia H/ mundo terminarJJ.H Ksto tambm se aplica para func!es que construem mtidos. 0or e$emplo* Movie9lip.protot8pe.mover , function '( : 3$++ ; No script acima 'que pode ser posto no 4U frame ou dentro de um movie clip" no importa...( cria um mtodo chamado Hmover'(H que vai funcionar para todos os movie clips Exemplo +* 9onstruiremos um protot8pe utilizando a f#rmula ounce* Movie9lip.protot8pe.bounce , function'$" 8(: var f, 5.Q6 var r, 5.&6 3$+, ' $vel, $vel < f + ' $ - 3$ ( < r ( 38+, ' 8vel, 8vel < f + ' 8 - 38 ( < r ( ; )ste novo metodo j pode ser usado em qualquer movie clip" basta especificar a localizao '$"8(" para onde vocD quer que ele v. =saremos as coordenadas do mouse* on9lip)vent' enterFrame (: bounce' 3parent.3$mouse" 3parent.38mouse ( ; )ste 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. Exemplo,* 1uponhamos que queremos fazer um menu que tenha B bot!es de maneira vertical" separados por O5 pi$els um do outro" e que tambem esse menu seja arrastvel" dando a impresso que os bts estejam unidos por uma corta invisAvel. / que precisamosG 0recisamos fazer um drag no bt que pu$ar os outros. N#s precisamos tambm que os outros bts continuem unidos ao primeiro" em forma de uma cadeia. /N" primeiro inserimos um bt dentro de um movie clip e nele pomos o seguinte script* on'press(: this.startVrag'( ;

on'release"release/utside(: stopVrag'( ; %gora" o que continua... n#s precisamos mover ao outro.... n#s usamos o prot#tipo ounce" que n#s j temos" com uma modificao pequena ao valor HfH e de HrH* Movie9lip.protot8pe.bounce , function'$" 8(: var f, 5.Q6 var r, 5.O6 3$+, ' $vel, $vel < f + ' $ - 3$ ( < r ( 38+, ' 8vel, 8vel < f + ' 8 - 38 ( < r ( ;

) por Fltimo" necessrio lhes falar onde eles tDm que se mover. Wamos resolver isto da seguinte maneira* n#s poremos os B clipes dentro de uma %rra8" para ficar mais fcil de manipular os dados... 'h as pessoas que preferem no usar %rra8s(. on9lip)vent'load(: a, 3root.a a.3visible, 5 num, I dist, O5 clips, XthisY for'var i, 46 iZ, I6 i++(: a.duplicateMovie9lip'HaH+i"i( clipsXiY, 3rootXHaH+iY ; ; on9lip)vent'enterFrame(: for'var i, 46 iZ, I6 i++(: clipsXiY.bounce'clipsXi-4Y.3$" clipsXi-4Y.38 + dist ( ; ; Neste caso" o clipe arrastado o que controla todos os demais" e o que diz que os outros continuam presos a este. E. $omplicando a vida om... agora n#s vamos fazer algo mais comple$o... que tal um redemoinho de letrasG ) que essas letras saiam do redemoinho" caindo" e formando uma palavra" quando vocD fizer um roll/ver sobre um bt. Exemplo -* 0ara fazer um redemoinho" precisamos de uma f#rmula que descreva uma circunferDncia" coisa que qualquer livro de matematica basica tem. No caso" usaremos estas* $ , cos'ang( < radio 8 , sin 'ang( < radio %ssim" n#s usaremos mtodos HsinH e HcosH do objeto HMathH 'Math.cos '(" Math.sin '((. importante se lembrar daquele Flash usa radianes e graus de non na Matemtica de objeto. %ssim n#s precisamos converter de graus a radianes se que n#s queremos ter uma base em graus. 0ara isso" construiremos dois metidos no objeto Math 0ara isto n#s construiremos dois mtodos no objeto Math que nos faro o trabalho de transcurso de graus para radianos.

Math.sinO , function 'angulo( : return Math.sin'angulo<Math.0K.4R5( ; Math.cosO , function 'angulo( : return Math.cos'angulo<Math.0K.4R5( ; %gora om... agora necessrio criar um mtodo que nos dD movimento circular. movie9lip.protot8pe.circular, function'(: if'Jang( ang , Math.floor'Math.random'( < &C5( if'Jradio( radio , Math.floor'Math.random'( < B5( + OB if'Jsentido( sentido , 'Math.random'( < 45( - B $9 , Math.cosO 'ang( < radio 89 , M ath.sinO 'ang( < radio ang+, sentido ; / mtodo acima cria & variveis 'ang" radio e sentido(" que realizam um movimento circular" e armazenam os valores em outras O variveis H$9H e H89H. movie9lip.protot8pe.easing, function' $" 8(: var $, $6 var 8, 8 3$+, '$ - 3$( . & 38+, '8 - 38( . & ; ) por Fltimo" usaremos um mtodo de gravidade* movie9lip.protot8pe.gravit8, function'(: var friccao, 5.>C6 var gravidade, & if'J8vel( 8vel , -'Math.random'(<O5( if'38+8vel+gravidade [ 455( : 38,4556 8vel <, -4 ; else: 38 +, '8vel , '8vel+gravidade(< friccao( ; ; / que o script acima faz" gerar a gravidade" mas descobrir quando vocD chega T coordenada 455 para fazer um recuo que inverte a velocidade em H8vel.H ) terminar" necessrio amarrar todos os eventos* duplicar clipes usando as palavras e os pondo em ordens on9lip)vent 'load( : ..duplicar clips usando as palavras e inserindo-os em arra8s letra.3visible , 56 count , 56 espacio , 456 palavras , XHFo$1u$H" H0an1u$H" H0rovida1u$HY6 .. arra8 das palavras clips , XY6 .. arra8 que ir conter cada grupo de letras por palavra for 'var i , 56 i clipsXiY , XY6 .. arra8 que contendr cada letra clipsXiYXHaccionHY , HgirarH6 .. arra8 noNumrico" con acci#n a realizar for 'var j , 56 j count++6 letra.duplicateMovie9lip'HletraH+count" count(6 clipsXiYXjY , thisXHletraH+countY6 clipsXiYXjY.letra , substring'palabrasXiY" 'j+4(" 4(6 clipsXiYXjY.$F , '-'espacio<palabrasXiY.length(.O(+espacio<j6 clipsXiYXjY.8F , i<espacio6

; ; ; on9lip)vent 'enterFrame( : for 'var i , 56 i for 'var j , 56 j .. verificar acaoa realizar if 'clipsXiYXHaccionHY ,, HgirarH( : clipsXiYXjY.circular'(6 clipsXiYXjY.easing'clipsXiYXjY.$9" clipsXiYXjY.89(6 ; else if 'clipsXiYXHaccionHY ,, HacomodarH( : clipsXiYXjY.easing'clipsXiYXjY.$F" clipsXiYXjY.8F(6 ; else : clipsXiYXjY.gravit8'(6 ; ; ; ; %s a!es vo se mudando de acordo com o estado dos bot!es on'roll/ver(: letras.clipsX5YXHaccionHY , HacomodarH ; on'roll/ut(: letras.clipsX5YXHaccionHY , HgirarH ; on'press(: letras.clipsX5YXHaccionHY , HcaerH ; % Fnica coisa que vai e muda entre os bot!es" o nFmero* de 5 T 4" e T O. F. .ivrarias 9riar prot#tipos e objetos pr-definidos muito Ftil" o que nos evita ter que reescrever o mesmo script toda vez que precisarmos dele. ? muitos lugares onde se encontram livrarias pFblicas de protot8pes e objetos. =ma delas http*..\\\.la8erB4.com.proto. Exemplo /* ]ogo um prot#tipo que simula um movimento sinuoide em &V* .. Math functions b8 Pobert 0enner Math.sind , function 'theta( : return Math.sin'theta<Math.0K.4R5( ; Math.cosd , function 'theta( : return Math.cos'theta<Math.0K.4R5( ; Math.atanOd , function '8" $( : return Math.atanO'8" $(<4R5.Math.0K ; Math.dist , function 'a" b( : return Math.sqrt''a<a( + 'b<b( ( ; Math.r& , function 'a" b(: return b < 455 . a ;

.. &V protot8pe b8 Polf Puiz Movie9lip.protot8pe.tresV& , function ' angle27" ratio27" angle2^ " ratio2^" id (: za , Math.sind'angle2^( < ratio2^ zE , &55 + 'za < O( zb , ' zE Z 4 ( G 4 * zE 3$ , 'Math.cosd'angle27( < ratio27( + 'Math.cosd'angle2^( < ratio2^( 38 , Math.sind'angle27( < ratio27 3$scale , &55+zb 38scale , &55+zb depth , 'int' 3$scale < 455 ( < 455 ( + id

thie.s\apVepths ' depth ( ; =m e$emplo de seu emprego* on9lip)vent 'load( : num , O56 f , 5.>6 r , 5.5&6 \ , C556 h , &556 bola.3visible , 56 for 'i,46 iZ,num6 i++( : bola.duplicateMovie9lip'HbH+i" i(6 b , thisXHbH+iY6 b.id , i6 b.angle27 , random'&C5(6 b.ratio27 , 4556 b.angle2^ , random'&C5(6 b.ratio2^ , 4556 b.tresV&'b.angle27" b.ratio27" b.angle2^" b.ratio2^" id(6 ; ; on9lip)vent 'enterFrame( : $ , 'Math.r&'\" 3root.3$mouse(-B5(.456 8 , 'Math.r&'h" 3root.38mouse(-B5(.456 for 'i,46 iZ,num6 i++( : b , thisXHbH+iY6 b.angle2^ +, $6 b.angle27 +, 86 b.tresV&'b.angle27" b.ratio27" b.angle2^" b.ratio2^" id(6 ; ; .. Pubiano 0atricN asquera