MovieClip fugindo do mouse
E aí pessoas, blz?
Demorei pra atualizar o blog né? foi mal.
Olha só, eu fiz um site junto com o parceiro muito gente fina e talentoso (@tiagopreto). Nesse site a gente precisava fazer umas fotos se movimentarem na direção oposta ao mouse, se o rato vai pra direita, a foto vai pra esquerda, entendeu né? Pois bem, além disso tinha que ter um certo efeito de profundidade entre as fotos.
O esquema funciona assim:
- Definimos um deslocamento pro movieclip, quanto maior for o deslocamento, mais longe do mouse ele irá. É com essa propriedade que simulamos a profundidade, quanto maior for o deslocamento, mais próxima a foto parece estar;
- Definimos a distância máxima que o mouse se movimentará sobre o stage. É difícil explicar isso, talvez fosse melhor um screencast, mas imagine o seguinte: O movieclip se move no mesmo sentido do mouse, mas em direção contrária, mas o deslocamento do movieclip deve ser proporcional ao deslocamento do mouse, e não idêntico, logo, se o mouse se movimentou 10% da distância máxima para a direita, o movieclip se moverá 10% do deslocamento definido para a esquerda. Entendeu? Não? Então faz assim, coloque a distância máxima do X a largura do stage, e a distância máxima do Y a altura do stage que vai funcionar;
- Monitoramos o evento de movimento do mouse e aplicamos o cálculo definido acima usando a Tweener para ficar mais suave.
Abaixo segue um exemplo do uso.
package
{
import br.com.oswd.util.OsjMouseMov;
import flash.display.MovieClip;
import flash.display.Sprite;
public class Post004 extends Sprite
{
private var mm1:OsjMouseMov;
private var mm2:OsjMouseMov;
private var mm3:OsjMouseMov;
private var mm4:OsjMouseMov;
private var mm5:OsjMouseMov;
public function Post004()
{
mm1 = new OsjMouseMov(clip_fundo, 50, 550, 400);
mm2 = new OsjMouseMov(clip_meio1, 100, 550, 400);
mm3 = new OsjMouseMov(clip_meio2, 100, 550, 400);
mm4 = new OsjMouseMov(clip_frente1, 150, 550, 400);
mm5 = new OsjMouseMov(clip_frente2, 150, 550, 400);
}
}
}
Resultado
Pronto, é isso, é simples mas é de coração. Clique aqui para fazer o download do exemplo.
Até mais seres.