Unidad 24. Animaciones avanzadas (I)

Movimiento de objetos mediante ActionScript

El algoritmo es muy sencillo, se trata de ir modificando la posición de la bola desde una posición inicial para que vaya bajando hasta que llegue al suelo, en ese momento invertimos el movimiento para que suba y calculamos hasta donde tiene que subir. Así sucesivamente hasta que deje de botar.

Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que suba debemos restarle una cantidad. Si queremos que la bola se vaya desplazando hacia la derecha debemos sumar una cantidad a la coordenada x.

Cuando la bola baja, según el esquema de la derecha, pasa de la posición (x₁, y₁) a la posición (x₂, y₂), para ello se incrementa la x con el valor incre_x (que estaria representado por la línea azul) y se incrementa la y con el valor incre_y (que estaria representado por la línea roja).

Cuando la bola sube, la única diferencia es que la coordenada y va disminuyendo en lugar de aumentando, según el esquema de la derecha, al subir se pasa de la posición (x'₁, y'₁) a la posición (x'₂, y'₂), para ello se incrementa la x con el valor incre_x (que estaria representado por la línea azul) y se decrementa la y con el valor incre_y (que estaria representado por la línea roja)

Vamos a ver lo más importante del código ActionScript que tenemos un poco más abajo.

Hemos definido creado una bola azul y la hemos convertido en un movieclip, la instancia se llama bola_mc.

Inicialmente la bola esta en la posición (bola_mc._x= 0,bola_mc._y= 0)

Mediante la variable baja, sabremos si la bola esta bajando o subiendo. Cuando la coordenada y llega al suelo, la bola pasará a subir, cuando la coordenada y llegue al tope la bola comenzará a bajar.

En cada bote la bola ira perdiendo fuerza y el bote sera más bajo, la variable elasticidad determinará esta perdida de potencia.

Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos al tope.

En el esquema, la linea naranja representa esa cantidad que le sumamos al tope 1 para pasar al tope 2.

Ya tenemos nuestro código casi preparado, ahora sólo falta hacer que el proceso se repita un número determinado de veces. Esta película Flash sólo tiene un fotograma. ¿Cómo hacemos esto? Lo primero que se nos ocurre es incluir una instrucción while ... o una instrucción for ... , si lo hacemos veremos que no funcionará porque la repetición es tan rápida que no da tiempo a ver nada.

La solución está en introducir una instrucción que haga que el proceso se repita cada 35 milisegundos. Esto lo vamos a ver en el punto siguiente.

Hemos colocado un botón en la película de forma que cada vez que se pulsa, se detine la ejecución (si todavía no había acabado) y se lanza una nueva ejecución.

Cuando el tope llega al suelo se detine la ejecución.

on (release) {

	var baja:Boolean = true;

	var incre_x:Number = 3.5;

	var incre_y:Number = 8;

	var suelo:Number = 280;

	var tope:Number = 0;

	var elasticidad:Number = 3;

	bola_mc._y = 0;

	bola_mc._x = 0;

	tope += (suelo - bola_mc._y) / elasticidad;

	var repeticion:Number;

	function botar() {

		if (baja) { // baja

			bola_mc._y += incre_y;

			bola_mc._x += incre_x;

			if (bola_mc._y>=suelo) {

				baja = false;

			}

		} else { // sube

			bola_mc._y -= incre_y;

			bola_mc._x += incre_x;

			if (bola_mc._y<=tope) {

				baja = true;

				if (tope>=suelo) {

					incre_y = 0;

					clearInterval(repeticion);

				}

				tope += (suelo - bola_mc._y) / elasticidad;

			}

		}

	}

	clearInterval(repeticion);

	repeticion = setInterval(botar, 35);

}

En este sencillo ejemplo la trayectoria de la bola es rectilínea, para que fuese un movimiento más real debería seguir una trayectoría curva. Dibujar curvas es un poco más complicado que dibujar rectas. Flash nos ofrece una opción más sencilla para hacer que un objeto siga una trayectoria curva: las guías de movimiento que veremos en este mismo tema aplicadas al bote de una pelota.