Tutorial 6 - Animación con ActionScript 3.0

Paso 9 de 19

Ahora que hemos comprobado que nuestro código funciona correctamente, sustituimos la función trace por la acción que realmente queremos que se realice, que es que la nube se arrastre.

function drag(e:MouseEvent):void
{
    cloud1_mc.startDrag();
}

Si probamos de nuevo nuestra película, podremos ver que al pulsar sobre la nube, ésta comienza a arrastrarse junto con el ratón, y no deja de arrastrarse en ningún momento.

Para que cese el arrastre, tendremos que introducir una nueva función que permita que cuando se suelte el botón del ratón, la nube deje de arrastrarse.

El funcionamiento será el mismo que el anterior. Tendremos que crear otro detector para el evento de soltar el ratón, y asignarle una función que detenga el arrastre de la nube.

Por legibilidad del código podemos juntar por un lado las líneas con la creación de los listeners, y por otro lado las funciones.

La forma más rápida para escribir este nuevo código es copiar y pegar el que ya habíamos creado, ya que es en muchos aspectos similar. Sustituiremos el MOUSE_DOWN por MOUSE_UP, y el nombre de la función nueva será drop en vez de drag. Por último, la función que detiene un arrastre activo es stopDrag().

El código que hemos creado hasta ahora en el primer fotograma de la capa as es el siguiente:

cloud1_mc.alpha = .6;
       
cloud1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
cloud1_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(e:MouseEvent):void
{
    cloud1_mc.startDrag();
}

function drop(e:MouseEvent):void
{
    cloud1_mc.stopDrag();
}