vismotus > Flash, Actionscript y Flex

El movimiento es un fenómeno físico que se define como el cambio de posición de un cuerpo.

En Flash normalmente estamos acostumbrados a manejar movimientos mediante la línea de tiempo, pero el objetivo de este tutorial es aprender a manejar los conceptos básicos de una animación a través de Actionscript.

Primero un poco de teoría: la propiedad que se encarga de mover un cuerpo en relación a una medida de tiempo se llama velocidad. También vale la pena destacar que la velocidad es un vector, por lo que cuenta con una magnitud y una dirección, por lo que se puede graficar como una flecha. La magnitud sería la rapidez y la dirección es el ángulo de rotación hacia donde se dirige la flecha.

Flash utiliza un eje cartesiano para posicionamiento de objetos (imágenes, sprites, movieclips, etc.) por lo tanto necesitaremos una velocidad para el eje X y una velocidad para el eje Y.

La forma de mover un cuerpo será así:

ball.x += xVelocity;
ball.y += yVelocity;

Eso se debe ejecutar por cada unidad de tiempo, en nuestro caso, por cada nuevo frame entrante.

Iniciemos con la práctica. Vamos a hacer lo siguiente:

1. Crear una clase Ball o Particle o el nombre que usted guste…recuerde que los nombre de clase se escriben en mayúscula.
2. Crear la propiedades de nuestra clase, entre ellas las más importantes de denotar son la velocidad en X y la velocidad en Y.
3. Crearemos un metodo update( ) que se encargará de dar las instrucciones a nuestra partícula para que se mueva.
4. Vamos a conectar un movieclip a nuestra clase.

Vamos paso a paso…

Paso 1. Creación de la clase

package{	import flash.display.MovieClip;	import flash.events.Event;
 
	public class Particle extends MovieClip	{		//Aqui van las propiedades		public function Particle()		{			//Esto se llama constructor		}		public function update():void		{			//Aquí va el código que realiza el movimiento		}	}}

Paso 2 y 3.  Declarar propiedades y el metodo para el movimiento

package{	import flash.display.MovieClip;	import flash.events.Event;
 
	public class Particle extends MovieClip	{		private var xVelocity:Number;		private var yVelocity:Number;
 
		public function Particle()		{			xVelocity = 3;			yVelocity = 3;			addEventListener(Event.ENTER_FRAME, update);
 
		}		public function update(event:Event):void		{			this.x += xVelocity;			this.y += yVelocity;		}	}
 
}

Como ven también creamos un Listener que escuche el evento EnterFrame de la misma clase.

Paso 4. Conectar el movieclip a nuestra clase.

Click derecho sobre el movieclip de la librería y luego un click en Linkage Properties y en el nombre de la clase quitamos el que viene y ponemos el nombre de nuestra clase.

La aceleración

La aceleración es la magnitud que aumenta o disminuye la velocidad de un móvil en función del tiempo. En términos de Actionscript podríamos decir que la aceleración es la fuerza que cambia la velocidad.

Hasta este momento hemos utilizado una xVelocity y yVelocity igual a 3, pero no siempre la velocidad es constante. La velocidad inicial de los móviles es siempre igual a 0 y la aceleración se encarga de aumentar o decrementarla.

Veámos el siguiente ejemplo:

package{	import flash.display.MovieClip;	import flash.events.Event;
 
	public class Particle extends MovieClip	{		private var xVelocity:Number;		private var yVelocity:Number;		private var xAcceleration:Number;		private var yAcceleration:Number;
 
		public function Particle()		{			xVelocity = 0;			yVelocity = 0;			xAcceleration = 0.2;			yAcceleration = 0.2;			addEventListener(Event.ENTER_FRAME, update);
 
		}		public function update(event:Event):void		{			xVelocity += xAcceleration;			yVelocity += yAcceleration;			this.x += xVelocity;			this.y += yVelocity;
 
		}	}
 
}

La gravedad

Es la fuerza de atracción que experimentan entre sí dos cuerpos con masa. Este concepto corresponde a lo que nosotros conocemos como peso, ya que es la fuerza que ejerce la tierra sobre los objetos.

En Actionscript para definir la gravedad se sumará una fuerza o cantidad en la coordenada “y” por cada frame. Se recomienda usar una gravedad como 0.5 o menor, de lo contrario se sentirían los cuerpos muy pesados.

package{	import flash.display.MovieClip;	import flash.events.Event;
 
	public class Particle extends MovieClip	{		private var xVelocity:Number;		private var yVelocity:Number;		private var xAcceleration:Number;		private var yAcceleration:Number;		private var grav:Number;
 
		public function Particle()		{			xVelocity = 0;			yVelocity = 0;			xAcceleration = 0.2;			yAcceleration = 0.2;			grav = 0.1;			addEventListener(Event.ENTER_FRAME, update);
 
		}		public function update(event:Event):void		{			xVelocity += xAcceleration;			yVelocity += yAcceleration;			yVelocity += 0.3;			this.x += xVelocity;			this.y += yVelocity;
 
		}	}
 
}

Velocidad Extendida

La forma como se trabaja la velocidad, aceleración y gravedad es muy similar, se suma o disminuye cierta cantidad por cada frame, pero este concepto se puede aplicar a otras propiedades de los movieclips como la rotación, el apha y la escala.

package{	import flash.display.MovieClip;	import flash.events.Event;
 
	public class Particle extends MovieClip	{		private var xVelocity:Number;		private var yVelocity:Number;		private var xAcceleration:Number;		private var yAcceleration:Number;		private var grav:Number;		private var rot:Number;
 
		public function Particle()		{			rot = 10;			xVelocity = 0;			yVelocity = 0;			xAcceleration = 0.2;			yAcceleration = 0.2;			grav = 0.1;			addEventListener(Event.ENTER_FRAME, update);
 
		}		public function update(event:Event):void		{			xVelocity += xAcceleration;			yVelocity += yAcceleration;			yVelocity += 0.3;			this.x += xVelocity;			this.y += yVelocity;			this.rotation += rot;
 
		}		public function reset():void		{			xVelocity = 0;			yVelocity = 0;			xAcceleration = 0.2;			yAcceleration = 0.2;		}	}
 
}