Crea una colorida rueda giratoria en Flash con AS3

Spanish (Español) translation by Steven (you can also view the original English article)

En este tutorial aprenderás a crear una rueda giratoria con Flash y AS3, con una interfaz adecuada tanto para dispositivos táctiles como de cursor.

Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:

Haz clic y arrastra el mouse verticalmente para girar la rueda; ¡Cuanto más larga sea la línea que arrastres, más rápido girará la rueda! Una vez que se detiene, la barra de color en la parte inferior mostrará el color en el que aterrizó la rueda.

Paso 1: Breve descripción general

Usando elementos gráficos prefabricados crearemos una interfaz colorida que será impulsada por varias clases de ActionScript 3.

El usuario podrá girar la rueda con un gesto de arrastre representado por una línea en la pantalla; una línea más alta hará un giro más rápido.

Paso 2: Configuración de documento Flash

Abre Flash y crea un documento de 500x300px. Establece la velocidad de fotogramas a 24fps.

Paso 3: Interfaz

Se mostrará una interfaz colorida y agradable, compuesta de múltiples formas, MovieClips y más.
Las formas simples se crearon con las herramientas de dibujo de Flash Pro, y como son fáciles de duplicar, no explicaré su creación. Asegúrate de que el punto de rotación de la rueda esté en el centro.

Siempre puedes ver la FLA en los archivos de descarga de origen.

Paso 4: Nombres de instancias

La imagen de arriba muestra los nombres de instancia de los diferentes MovieClips. Presta especial atención al MovieClip wheel.p; Estas son las pequeñas líneas negras que dividen los colores en la rueda, la cual hemos llamado wheel, y están dentro de la rueda del MovieClip. Se denominan p1 a p10, en sentido horario.

Paso 5: Tween Max

Utilizaremos un motor de interpolación diferente al predeterminado incluido en Flash; esto hará que la transición de color del símbolo colorMC sea mucho más fácil.

Puedes descargar TweenMax desde el sitio web de Greensock.

Paso 6: Establecer la clase principal

Agrega el nombre de la clase, Main, al campo Class en la sección Publicar del panel Propiedades para asociar el FLA con la clase de documento Principal.

Paso 7: Crear una nueva clase ActionScript

Crea una nueva clase de ActionScript 3.0 (Cmd + N) y guárdala como Main.as en tu carpeta de clases.

Paso 8: Estructura de la clase

Crea tu estructura de clase básica para comenzar a escribir tu código.

package 
{
	import flash.display.Sprite;
	
	public class Main extends Sprite
	{
		public function Main():void
		{
			// constructor code
		}
	}
}

Paso 9: Clases requeridas

Estas son las clases que necesitaremos importar para que nuestra clase funcione. La directiva de importación llamada import pone a disposición de tu código clases y paquetes definidos externamente.

import flash.display.Sprite;
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.events.Event;
import com.greensock.TweenMax;

Paso 10: Variables

Estas son las variables que usaremos; lee los comentarios en el código para saber más sobre ellos:

1	private var speed:Number = 0; //the current speed of the wheel
2	private var paddles:Vector.<Sprite> = new Vector.<Sprite>(); //a vector that holds the p1, p2 etc MCs in the stage
3	private var line:Shape; //the line drawn as the gesture to move the wheel
4	private var lastPaddle:String; //will detect the current value of the wheel

Paso 11: Constructor

El constructor es una función que se ejecuta cuando se crea un objeto a partir de una clase, y es el primero en ejecutarse cuando realizas una instancia de un objeto. Dado que esta es nuestra clase de documento, se ejecutará tan pronto como se cargue el SWF.

1	public final function Main():void
2	{
3	//code...
4	}

Paso 12: Vector de paletas

Primero agregamos los diversos MovieClips de paleta al vector y agregamos los oyentes o 'listeners'; a continuación, escribiremos la función listeners().

public final function Main():void
{
	paddles.push(wheel.p1, wheel.p2, wheel.p3, wheel.p4, wheel.p5, wheel.p6, wheel.p7, wheel.p8, wheel.p9, wheel.p10);
	listeners('add');
}

Paso 13: 'Listeners' u oyentes

Esta función agregará o eliminará los oyentes de acuerdo con el parámetro. Los oyentes del mouse están configurados para dibujar la línea que controlará la rueda.

private final function listeners(action:String):void
{
	if(action == 'add')
	{
		stage.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
		stage.addEventListener(MouseEvent.MOUSE_UP, spinWheel);
	}
	else
	{
		stage.removeEventListener(MouseEvent.MOUSE_DOWN, startDraw);
		stage.removeEventListener(MouseEvent.MOUSE_UP, spinWheel);
	}
}

Paso 14: Línea de movimiento

La siguiente función comienza a crear una línea basada en la posición actual del mouse y la coloca en el escenario. Se activa cuando se hace clic con el mouse.

private final function startDraw(e:MouseEvent):void
{
	line = new Shape();
	addChild(line);

	line.graphics.moveTo(mouseX, mouseY);
	line.graphics.lineStyle(8, 0x000000, 0.3);//you can change the line color and style here
	stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
}

Paso 15: Trazar línea

Mientras se mueve el mouse, la línea continúa en esa dirección.

1	private final function drawLine(e:MouseEvent):void
2	{
3	line.graphics.lineTo(mouseX, mouseY);
4	}

Paso 16: Girar la rueda

El siguiente código se ejecuta cuando se suelta el botón del mouse, terminando la línea. Los 'listeners' del dibujo se eliminan para evitar dibujar varias líneas y la velocidad se calcula de acuerdo con la altura de la línea. Finalmente, se llama a un evento EnterFrame para girar la rueda.

private final function spinWheel(e:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, drawLine);
	listeners('rm');

	speed = line.height * 0.1;
	removeChild(line);
	line = null;

	stage.addEventListener(Event.ENTER_FRAME, spin);
}

Paso 17: Rotar la rueda

Esta es la función que hará girar la rueda y detectará en qué valor cae:

private final function spin(e:Event):void
{
	/* Rotate Wheel */

	wheel.rotationZ += speed;

Paso 18: Detectar valor

Aquí detectamos el valor actual de la rueda en función de la última pala que tocó.

/* Detect Value */

for(var i:int = 0; i < 10; i++)
{
	if(indicator.hArea.hitTestObject(paddles[i]))
	{
		lastPaddle = paddles[i].name;
	}
}

Paso 19: Disminuir la velocidad

La velocidad de la rueda se reduce cada cuadro para finalmente detener el giro.

1	/* Decrease speed */
2
3	speed -= 0.1;

Paso 20: Restablecer la rueda

Todos los valores se restablecen cuando la rueda se detiene. Se llama a una función que ejecutará una acción de acuerdo con el valor final.

	/* Remove listener and reset speed when wheel stops */

	if(speed <= 0)
	{
		stage.removeEventListener(Event.ENTER_FRAME, spin);
		speed = 0;
		setBarColor(lastPaddle);
		listeners('add');
	}
}

Paso 21: Establecer el color de la barra

Esta función ejecutará una acción personalizada de acuerdo con el último valor de la rueda. En este caso, cambia el color de la barra inferior, pero puedes hacer que haga cualquier otra cosa.

function setBarColor(action:String):void
{
	switch(action)
	{
		case 'p1':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0xF15D5D, tintAmount:1}});
			break;
		case 'p2':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0xC06CA8, tintAmount:1}});
			break;
		case 'p3':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x644D9B, tintAmount:1}});
			break;
		case 'p4':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x5E98C6, tintAmount:1}});
			break;
		case 'p5':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x4789C2, tintAmount:1}});
			break;
		case 'p6':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x55C4CB, tintAmount:1}});
			break;
		case 'p7':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x57BC80, tintAmount:1}});
			break;
		case 'p8':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0x90CC6C, tintAmount:1}});
		break;
		case 'p9':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0xEBE666, tintAmount:1}});
		break;
		case 'p10':
			TweenMax.to(colorMC, 0.5, {colorTransform:{tint:0xF29C69, tintAmount:1}});
			break;
	}
}

Conclusión

¡Cambia el código para realizar tus propias acciones!

Espero que les haya gustado este tutorial, ¡gracias por leer!