seguir raton en flash

Conseguir este efecto en el que un clip de película persigue el movimiento del ratón es bien sencillo. Veamos como:

Abre una nueva película de flash y crea el objeto que perseguirá al retón. Puede ser un dibujo que hagas en flash o una imagen que hayas creado en otro programa e importes a flash, lo que quieras. Selecciona el objeto y conviertelo en clip de película, para ello, con el objeto seleccionado, presiona F8, dale un nombre y que esté seleccionada la opción "clip de película".

Ahora vamos a meter el código que necesitamos para que funcione como queremos. Con el objeto seleccionado, botón derecho del ratón sobre él y le damos a "acciones", y metemos este código:

onClipEvent (load) {         _x = 0;         _y = 0;         velocidad = 5; }  onClipEvent (enterFrame) {         posicionX = _root._xmouse;         posicionY = _root._ymouse;         _x += (posicionX - _x)/velocidad;         _y += (posicionY - _y)/velocidad; } 

Explicación del código.

onClipEvent (load) - La sentencia onClipEvent, como su propio nombre indica, le dice a flash que se van a ejecutar una serie de acciones en el clip de película cuando suceda el evento dado. Esta sentencia solo es válida pués para los clips de película, asi que no podríamos ponerla en un frame o fotograma, un gráfico o un botón.

La estructura es: onClipEvent (evento). La palabra "evento" podríamos sustituirla por "cuando...". Concretamente, aquí tenemos el evento load, que quiere decir, "cuando flash haya leido o cargado el clip", así que el código que encierra solo se ejecutará una vez, cuando se cargue el objeto.

_x = 0; - _x es una palabra reservada de flash que indica la posición horizontal del objeto en el plano. La inicializamos a cero.

_y = 0; - _y es la posición vertical del objeto sobre el plano. También inicializada a cero.

velocidad = 5; - velocidad es una variable que nos hemos creado para posteriormente calcular la velocidad de movimiento del objeto. Teóricamente, las variables se declaran con var variable = inicialización; para variables locales, es decir, que solo existen dentro de ese trozo de código, no en toda la película de flash, y set var variable = inicialización; para variables de ámbito global, es decir, que "existen" en toda la película de flash. Sin embargo, flash es muy permisible, y si no declaramos la variable, no pasa nada, la reconoce igualmente, pero la trata como una variable local (var), no global (set var), ojo con eso a la hora de trabajar con variables si no las declaramos.

El código:

onClipEvent (load) {
_x = 0;
_y = 0;
velocidad = 5;
}

Viene a decir simplemente que cuando se cargue el objeto lo vamos a poner en las coordenadas horizontal y vertical 0/0 y nos creamos una variable llamada velocidad que de entrada vale 5.

onClipEvent (enterFrame) - onClipEvent ya hemos explicado lo que es. enterFrame se podría traducir como "cuando entre un fotograma", es decir, el código que esté dentro de ésta clausula se volverá a ejecutar cada vez que se lea un nuevo fotograma, que por defecto, las películas van a 12 fotogramas por segundo. Por cierto, decir que el código al que afecta un onClipEvent es aquel que está dento de las llaves { ... }.

posicionX = _root._xmouse; - posicionX es una nueva variable que nos hemos creado para capturar la posición horizontal del puntero del ratón. El signo igual (=) en flash no significa "igual", sino asignación, el igual en actionscript es el doble signo igual (==). A continuación viene una palabra que vereis muy a menudo "_root", _root hace referencia a la línea principal de tiempo, es decir, a la capa más externa de flash. Y por último, _xmouse es la posición horizontal del cursor del ratón. En definitiva, esta línea se podría leer como: en posicionX guardo la posición (coordenada en pixels) horizontal del ratón.

posicionY = _root._ymouse; - Igual que antes pero para la posición vertical.

_x += (posicionX - _x)/velocidad; - Esta línea de código y la siguiente son las que lo hacen todo. Voy a tratar de explicarla con el mayor número de detalle.

Empecemos por ver que significa "+=". Imaginemos que tenemos lo siguiente:

resultado = 5; // esto es, la variable resultado la inicializo a 5.
resultado = resultado + 3; // a resultado le meto, lo que ya había (5), más 3; luego, resultado ahora vale 8.

Pues esto es lo mismo que si hubieramos puesto:

resultado = 5;
resultado += 3;

+= significa por lo tanto, "lo que ya tenía, más lo nuevo", es una forma de ahorrar código, queda más elegante, pero la otra forma es igual de funcional.

Bien, sigamos; (posicionX - _x) quiere decir, (recordemos que en posicionX tenemos la coordenada x u horizontal del ratón), que a la coordenada horizontal del ratón le resto la coordenada horizontal del objeto, obteniendo un nº como resultado. Y por último, "(posicionX - _x)/velocidad;" el resultado de ese nº, lo divido entre la velocidad, que tal y como lo declaramos en un principio vale 5. Y el resultado que de todo eso, lo meto en "_x", que es la coordenada horizontal del objeto.

¿Por qué todo esto? - A la posición x del retón le resto la posición x del objeto, así obtengo un nº, que será mayor cuanto más lejos estén el uno del otro, y luego lo divido de la velocidad. Cuanto más bajo sea el valor que le hayamos dado a la velocidad, más rápido irá, ¿por qué? veamos:

8 / 2 = 4
8 / 4 = 2

Es decir, si iniciamos la velocidad a "2", para ese ejemplo que he puesto, la pelota se moverá a 4 pixels por fotograma, mientras que si inicializo a "4", se moverá a 2 pixels por fotograma... queda claro supongo.

¿Y cómo se hace para que con forme se acerca la pelota al puntero del retón vaya más lenta? Bien, ese efecto se hace aquí:(posicionX - _x). Si el nº que divido entre la velocidad es el resultado de la resta entre la posición del ratón y del objeto, cuanto más cerca estén menor será el resultado, ya que menor será la distancia, y por lo tanto, el resultado de la división entre la velocidad irá bajando y como esto se meté en "_x" que es la posición horizontal del objeto, cada vez irá más lento. Por ejemplo:

30 / 5 = 6 pixels por fotograma.
20 / 5 = 4 pixels por fotograma.
10 / 5 = 2 pixels por fotograma.
00 / 5 = 0 pixels por fotograma.

He ahí un ejemplo, en el que la pelota se va frenando, hasta que el resultado de restar la posición x del ratón y la posición x de la pelota es cero, es decir, cuando están uno encima de otro, en cuyo caso la velocidad será cero, es decir, estará parado.

_y += (posicionY - _y)/velocidad; - Igual que antes, pero para la posición vertical.

Bueno, el ejercicio es bien sencillo, pero lo he alargado mucho porque quería explicar el código a fondo para todos aquellos que están empezando.

Echandole imaginación, con este mismo código se pueden hacer cosas más interesantes, por poner un ejemplo:

Si lo deseas, puedes descargarte el archivo del ejemplo aquí. O este segundo ejemplo, aquí.