Zoom com Mouse em MovieClips
Publicado por andrebanderas em 3 Maio 2008
dificuldade: média
_
O que preciso saber antes de ler este artigo?
Conhecer as funções matemáticas do Flash. [Post]
Saber nomear um MovieClip. [Post]
Introdução
Neste post vamos fazer com que um MovieClip tenha um efeito de zoom de acordo com a posição do mouse.
Ingredientes
Vamos usar os seguintes métodos e propriedades:
- MovieClip.onEnterFrame
- MovieClip._xscale
- MovieClip._yscale
- MovieClip._width
- MovieClip._height
- MovieClip._xmouse
- MovieClip._ymouse
- Funções do objeto Math
Preparo
No Palco (Stage) desenho um retângulo qualquer (de preferência menor que o Palco umas duas vezes), converta este retângulo em um MovieClip [F8] com o Registro (Registration) no centro. Coloque o nome da instância (Instance Name) de movie_mc.
Coloque também um caixa de texto dinâmico (Text Tool > Dynamic Text) no Palco. No campo chamado var escreva a palavra msg. Esta caixa será irá nos informar alguns valores que usaremos no script.
Crie uma nova Camada (layer), coloque o nome de Actions, clique no primeiro quadro e abra a janela Ações (Actions)[F9].
Programando
Nosso objetivo é fazer com que o objeto cresça quando o usuário colocar o mouse no centro do MovieClip e que diminua à medida que o usuário vai afastando o mouse do centro do MovieClip.
Vamos fazer isso passo a passo…
Como se trata de uma animação, vamos executar ações a cada mudança de quadro do filme, então vamos usar o método onEnterFrame do objeto _root (que se refere à linha de tempo principal) para fazer essa animação.
Digite o seguinte código na janela Ações (Actions)
_root.onEnterFrame = function(){
msg = movie_mc._xmouse;
}
Teste o filme [Ctrl+Enter], passe o mouse por cima MovieClip e veja o que aparece escrito na caixa de texto.
Observe que na caixa aparece a posição x do ponteiro do mouse dentro do MovieClip. Porém estamos interessados em um fator de escala, assim divide-se a posição x do mouse por metade da largura do MovieClip (observe a figura acima). Usaremos a seguinte abordagem:
xmouse/(largura/2) = 2*xmouse/largura
Então temos:
_root.onEnterFrame = function(){
msg = 2*movie_mc._xmouse/movie_mc._width;
}
Agora temos um fator, porém está invertido já que queremos que nas bordas o fator de escala seja zero. Há um outro incoveniente, arrastando o mouse para esquerda o fator de escala é negativo, resolvemos isso usando a função Math.abs() que retorna sempre um valor positivo, assim a expressão do fator será:
fator = 1 – Abs( 2*xmouse/largura)
//Abs é uma função que retorna sempre um valor positivo
Assim em Actionscript teremos
_root.onEnterFrame = function(){
msg = 1- Math.abs( 2*movie_mc._xmouse/movie_mc._width );
}
Agora deu certo. Fazemos o mesmo tratamento para componente vertical (Y). Depois precisamos decidir que fator usar, o componente x ou o componente y. Prefiro usar o menor valor dos dois com a ajuda da função Math.min(). Faremos algumas modificações em nossa expressão, chamamos de ‘fx’ o fator em x e de ‘fy’ o fator em y.
_root.onEnterFrame = function(){
fx = 1- Math.abs( 2*movie_mc._xmouse/movie_mc._width );
fy = 1- Math.abs( 2*movie_mc._ymouse/movie_mc._height );
msg = Math.min( fx,fy );
}
Parece tudo bem se não fosse por um incômodo. Fora do MovieClip o valor fica negativo, o certo é que seja igual a zero. Problema facilmente solucionado com com a função Math.max().
_root.onEnterFrame = function(){
fx = 1- Math.abs( 2*movie_mc._xmouse/movie_mc._width );
fy = 1- Math.abs( 2*movie_mc._ymouse/movie_mc._height );
msg = Math.max(Math.min( fx,fy ),0); // Retornará apenas valores >= 0.
}
Queremos um valor para este fator entre 0 e 100 (você pode definir outro fator de escala, eu escolhi o duplicar adicionando mais 100%), assim multiplicamos o fator por 100 e pegamos apenas a parte inteira do resultado usando a função Math.floor().
_root.onEnterFrame = function(){
fx = 1- Math.abs( 2*movie_mc._xmouse/movie_mc._width );
fy = 1- Math.abs( 2*movie_mc._ymouse/movie_mc._height );
msg = Math.floor(100 * Math.max(Math.min( fx,fy ),0) );
}
Agora usamos um nome diferente na variável de fator, e atribuimos o fator de escala em x e em y como 100 (normal) + fator.
_root.onEnterFrame = function(){
fx = 1- Math.abs( 2*movie_mc._xmouse/movie_mc._width );
fy = 1- Math.abs( 2*movie_mc._ymouse/movie_mc._height );
fator = Math.floor(100 * Math.max(Math.min( fx,fy ),0) );
movie_mc._xscale = movie_mc._yscale = 100 + fator;
}
Apagamos a caixa de texto e testamos o filme [Ctrl+Enter] pela última vez.
Bueno, por hoje é só pessoal…
Hasta la vista 
