Menu Do Site Phantom Planet

[guevara1990]

ola

tava dando uma olhada no site a banda Phantom PLanet e vi o menu e paguei um pau no efeito "puxadinho" hehehe

como se faz ? é com easing ?

grande abraço

Phantom Planet

[Cielio]

ver se isso q você quer....

Fórmula do efeito de elasticidade

por Zipnedles

Muitas pessoas já devem ter visto por ai exemplos de Flash com efeitos de elasticidade, mas se perguntam muitas vezes como aquilo ocorre, ou como aquele efeito funciona. Nesse artigo estarei explicando para você, que está fazendo a gentileza de ler isso, como funciona a fórmula da elasticidade. Ai está ela na forma simplficada:

P = P + F = F / T1 + (P2 - P) / T2

Aí você me pergunta: O que eu faço com isso?

No Flash P seria a propriedade de um Objeto, e P2 o valor futuro dessa mesma propiedade desse objeto. já os divisores T1 e T2 poderiam ser substituídos por multiplicadores na seguinte regra: N < 1.

Eis um exemplo na plataforma do Flash:

MC._x = MC._x + VelX = VelX / (T1 = 2) + (200 - MC._x) / (T2 = 4);

ou então na forma simplificada...

Mc._x += VelX = (VelX/2) + (200 - Mc._x)/4;

Quando eu declaro o valor 200 no lugar de P2 significa o novo valor para a propiedade do MC (MovieClip ou Clipe de Filme) que poderia ser qualquer outro escolhido por você. Você também deve ter percebido a presença de uma variável chamada de VelX. Essa variável está no lugar de F na nossa fórmula anterior. Ela e a responsável pelo efeito de "vai e vem" da elasticidade. Observem a fórmula de movimento que muitos de vocês já devem conhecer:

P = P + (P2-P) / T;

Ela funciona da seguinte maneira, pega a posição e soma ela à diferenca de sua posiçãoo futura dividida por um tempo:

Faça uns testes no onClipEvent(enterFrame){arguments}:

_x += (velocidade = 5); //P += V ou P = P + V

//Aqui estou dizendo que X e igual a X mais um valor

Agora imagine uma régua com a seguinte fórmula: P += (P2-P) / T, se referindo ao movimento de um quadradinho:

A---------B-------C-----D---E-F

O QUE OCORRE AQUI?

P é IGUAL a P MAIS a diferença do valor futuro para ele mesmo DIVIDIDO por um TEMPO (T). Assim temos um movimento que freia durante o tempo. Obs: quanto maior o valor de T a diferença dos valores ira retornar numeros menores, observe os intervalos B~C e D~F, e suas distâncias.

Bom, acho que isso ai deu pra entender direitinho não é?

...voltando a elasticidade...

Você se lembra daquela Variável F da nossa fórmula inicial? então agora vamos aplicar ela na fórmula de movimento que acabamos de executar. Você reparou aguma semelhança entre elas? Observe então:

Elasticidade : P += F = F / T1 + (P2-P) / T2

Movimento : P += (P2-P) / T2

Acontece que o princípio do movimento é a base do princípio da elasticidade, incluíndo uma variável unitária escalar F.

Faça novos testes no onClipEvent(enterFrame){arguments}:

_x += F = F+ (200-_x) / 4 ; //viu o que acontece?

Você deve ter observado que o seu MovieClip (Clipe de Filme) fica num movimento de "vai e vem", basta agora voce ir diminuindo aos poucos esse valor da variavel F para obter a enfim elasticidade!. Como? Simples, dividindo ou multiplicando seguindo a regra: N < 1. Desse modo ele vai com uma força F1 e volta com uma força F2 bem menor do que sua antecessora. Observe o gráfico Abaixo :

---------------------P2--------------<<

---------------------------------->> F1

F2 <<-----------------------------

Obs: todos os testes que você executou foram feitos no evento enterFrame porque esse evento cria uma rotina que nos permite executar várias vezes o mesmo comando, assim F ficara sempre menor e poderemos sempre verificar.

Exemplo Final:

//MovieClip

onClipEvent(load){this._x = 0}

onClipEvent(enterFrame)

{

newX = 300;

//30 FPS

this._x += F = F*0.9 + (newX-this._x)/(T = 10);

}

[kornfleix]

cara du ceu... num consegui fazer aquele efeito igualdito acima... no incicio do tópico...

:/