Tutorial #2

[George]

Hoje vamos aprender a fazer movimentos de objetos no flash com easing usando apenas action script...

### PARTE 1 - MOVIMENTOS UNIFORMES

antes de tudo, vamos relembrar como fazer um simples movimento com AS, sem easing...para isso vamos usar o onEnterFrame = function() { } onde os comandos dentro das chaves são acionados sem parar enquanto estiver rolando os frames.

Faça um MC qualquer e coloque a instância "mc1" nele. Vamos fazê-lo andar para a direita...

_root.onEnterFrame = function() {
   mc1._x += 5;
}

_x meche com a posição horizontal do objeto... o += 5; é para adicionar o valor 5 à propriedade anterior. Portanto, mc1._x += 5; vai adicionar 5 pixels à posição _x de mc1. Agora veja que este comando está dentro do onEnterFrame. Lembra-se do que ele faz? O comando será repetido até o onEnterFrame ou as frames pararem. Assim temos um movimento contínuo do objeto mc1 para a direita. Lembrete: Para movimentar o objeto para a esquerda, é só colocar '-=' em vez de '+='. Para ver mais movimentos, experimente usar _y, _xscale, _yscale, _height, _width, etc... ### PARTE 2 - MOVIMENTOS COM EASING Agora que aprendemos como fazer os movimentos via AS, vamos ver como fazer o easing. vamos raciocinar... mc1._x += 5; // este comando fará com que a velociade do objeto seja de 5 pixels por frame, ou seja, a cada ciclo (ou cada frame que rolar) do onEnterFrame, o objeto ira 5 pixels para a direita. Para fazer um easing, este valor deve variar de alguma forma. Que valor então que varia enquanto o filme é rolado? Naturalmente, a própria posição do objeto: a posição _x de mc1 é alterado em 5 pixels por frame rolado. Agora, como podemos usá-lo?

x = 200; // essa é a posição final do nosso objeto no palco.
mc1._x = 0; // o objeto está colocado na posição 0 no palco

temos a posição inicial e final do mc1. Vamos relembrar das aulas de matemática agora: x - mc1._x // sabendo q x vale 200 e mc1._x é 0, então 200 - 0 é 200. Se colocarmos mc1._x += x - mc1._x; será o mesmo que colocar mc1._x += 200; e assim em apenas um ciclo, ou seja, quase instantaneamente o mc1 irá para sua posição final que é 200. Mas algo diferente aconteceria: o mc1 ficaria parado na posição 200. Porque? //1º ciclo mc1._x += x - mc1._x; // vai direto pro 200 porque 200 - 0 = 200, ou, x - mc1._x = 200. //2º ciclo mc1._x += x - mc1._x; // agora mc1._x vale 200...e x - 200, ou seja, 200 - 200 é 0. Portanto, nos demais ciclos o mc1 se moverá 0 pixels, isto é, ficará parado mesmo com o onEnterFrame rolando. Mas nós não queremos que isso aconteça em um só ciclo, queremos q aconteça mais devagar para podermos observar o easing. É só dividir o valor:

mc1._x += (x - mc1._x)/10;

Vamos ver o que acontece assim: //1º ciclo mc1._x += (200 - 0)/10; // assim ele se moverá 20 pixels inicialmente. //2º ciclo mc1._x += (200 - 20)/10; // agora ele se moverá um pouco menos, 18 pixels. Sendo que anteriormente ele se movimentou 20 e agora mais 18, temos então a mc1._x = 38 //3º ciclo mc1._x += (200 - 38)/10; // agora ele se move 16,2 pixels... Perceba que a cada ciclo, ou a cada frame passado ele se move cada vez mais lentamente...esta então é a definição do easing. Você pode controlar a velocidade do movimento pelo número que divide o valor; quanto menos o número, mais rápido. Temos aqui um exemplo do resultado... (não esqueçam de colocar a velocidade no campo, neste exemplo). ### PARTE 3 - OTIMIZANDO O EASING Neste exemplo percebam pelos valores da movimentação mostrados lá, são um pouco "quebrados", por isso o objeto demora um pouco para estacionar na sua posição final. Vamos então resolver esse problema, fazendo com que ele chegue mais rapidamente na sua posição. Vamos analizar duas funções: o Math.floor() e o Math.ceil(). Math é uma função para realizar contas matemáticas. usando o floor com ela, podemos retorar um número inteiro arredondado para baixo. exemplo: Math.floor(30,99999999); // retorna 30 Math.floor(30,00000001); // retorna 30 Math.ceil pelo contrário, arredonda para cima: exemplo: Math.ceil(30,999999999); // retorna 31 Math.ceil(30,000000001); // retorna 31 No nosso script, vamos usar o Math.ceil, ele fará com que o objeto estacione logo na sua posição final. O código final então ficaria assim:

_root.onEnterFrame = function() {
   mc1._x += Math.ceil((x - mc1._x)/10);
}

É isso aí pessoal...por hoje é só. Aqui temos um exemplo do index que eu fiz usando apenas AS...esse swf tem apenas 9k, 146 linhas de Action Script e apenas 2 interpolações de movimento (uma na animação do retângulo crescendo antes do preloader e a outra é o efeito dos botões do menu)

Se tiverem dúvidas, por favor, postem aqui, não no MSN

[cortex_rsq]

Posso mover algum objeto que não seja um movie clip?

grato.

Rodrigo.

[lord_e]

não ... você deve utilizar um movie clip para move-lo.... com actio script

[cortex_rsq]

e há alguma ação semelhante ao 'onEnterFrame' que faça uma especie de loop...?

[George]

dependendo do que você quer fazer...tem o while.

Creio que você pode mover um botão também além do MC