Flash CS5 y AS3: Mueve tus imágenes y crea la sensación de profundidad con base en la posición de tu Mouse.
Escrito por Gerardo Sepúlveda Viernes, 31 de Diciembre de 2010 10:51
En este pequeño tutorial vamos a detectar la posición que tiene nuestro cursor y utilizar este dato para mover dinámicamente nuestro background con Flash CS5 y Actionscript 3. Este a la vez, estará dividido en capas para crear la sensación de profundidad.
Pasa tu mouse por encima de la fotografía para ver el efecto.
Tenemos 3 imágenes diferentes, en este caso una fotografía dividida en 3 planos para crear un mejor efecto, pero incluso puedes poner las imágenes (movieclips o gráficos) que tu desees.
Importamos nuestras 3 imágenes y cada una la pondremos en un layer diferente (para una mejor organización aunque incluso podrían ir en el mismo layer), el orden sería: frontImage.jpg en el layer superior, middle.jpg en el layer intermedio y backImage.jpg en el layer inferior. Hasta arriba de todos ponemos un nuevo layer y lo nombramos Actions o Acciones.
Cada una de las imágenes la convertiremos en MovieCip y le ponemos los nombres de instancia: front, middle y back (según corresponda a cada imagen).
En el layer de Acciones seleccionamos el primer "frame", y en el panel de acciones tecleamos lo siguiente:
La explicación de lo que estamos haciendo en el código:
//Creamos un evento "EventListener (addEventListener)" de tipo Enter_Frame
addEventListener(Event.ENTER_FRAME, direccionMouse);
//Creamos la función con el nombre que establecimos en el EventListener, que sería "direccionMouse"
function direccionMouse(event):void {
//Creamos una variable que definirá a posición que tiene nuesto Mouse
var posicionMouse:int = mouseX
//Creamos una variable que determinará el tamaño de nuestro Canvas o Área de Trabajo
var canvasSize:int = stage.stageWidth
//Creamos otra varialbe que restará la posición del Mouse al tamaño que tiene nuestro Canvas
var total:int = posicionMouse-canvasSize
//Las cordenadas "x" (horizontales) de nuestro layer "front" serán iguales a nuestra variable "total" multiplicado por -.15
front.x = (total * (-.015));
//Las cordenadas "x" (horizontales) de nuestro layer "middle" serán iguales a nuestra variable "total" multiplicado por 0.10
middle.x = (total * .010);
//Las cordenadas "x" (horizontales) de nuestro layer "back" serán iguales a nuestra variable "total" multiplicado por -.007
back.x = (total * (-.007));
}
Una vez hecho esto probamos nuestra escena (cmd+Enter) o Control - Test Movie - Test y veremos que al pasar el Mouse por nuestro Flash las imágenes se moveran horizontalmente dependiendo de la posición de nuestro cursor.
Puedes cambiar los valores para experimentar y ver los resultados en el movimiento de las imágenes, incluso puedes agregar o remplazar .x por .y para que el movimiento sea también en el eje vertical.
Hasta aquí este ejercicio para dar movimiento a elementos, imágenes o gráficos con base en la posición de nuestro mouse.
Descarga los archivos base desde aquí.
RSS feed Comments
escrito por juanxo, agosto 22, 2011
http://www.skeyndor.com/index.php/es
Muchas gracias
escrito por Anika, marzo 07, 2012
El efecto lo hace sin problemas, pero solo se me aplica con las medidas del archivo que has facilitado.
¿Como puedo adaptarlo a estas medidas y que me haga el efecto por todo?
Porfa, me hace mucha falta. Gracias!!
Sin embargo, he estado tratndo desde hace tiempo de lograr algo asi, pero yo uso cs3 y el código que usas es muy confuso para mí. Podrías enviarme una solucion en formato cs3 para estudiarlo? soy nuevo y manejo el AS básico y me gusta aprender script, pero esto no es de mi nivel.