Create a Colorful Spinning Wheel in Flash With AS3

In this tutorial you'll learn how to create a spinning wheel using Flash and AS3, with an interface that's suitable for both mouse- and touch-based devices.

Final Result Preview

Let's take a look at the final result we will be working towards:

Click and drag your mouse vertically to spin the wheel; the longer the line you drag, the faster the wheel will spin! Once it stops, the colored bar at the bottom will display the color the wheel landed on.

Step 1: Brief Overview

Using pre-made graphic elements we'll create a colorful interface that will be powered by several ActionScript 3 classes.

The user will be able to spin the wheel using a dragging gesture represented by a line on the screen; a taller line will make a faster spin.

Step 2: Flash Document Settings

Open Flash and create a 500x300px document. Set the frame rate to 24fps.

Step 3: Interface

A colorful nice looking interface will be displayed, made up of multiple shapes, MovieClips and more.
The simple shapes were created using the Flash Pro drawing tools, and since they're easy to duplicate I won't explain their creation. Make sure the wheel's rotation point is in the center.

You can always look at the FLA in the source download files.

Step 4: Instance Names

The image above shows the Instance Names of the various MovieClips. Pay special attention to the wheel.p MovieClips; these are the little black lines that divide the colors in the wheel, and are inside the wheel MovieClip. They are named p1 to p10, going clockwise.

Step 5: TweenMax

We'll use a different tween engine than the default one included in Flash; this will make the color transition of the colorMC symbol a lot easier.

You can download TweenMax from the Greensock website.

Step 6: Set Main Class

Add the class name, Main, to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

Step 7: Create a new ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 8: Class Structure

Create your basic class structure to begin writing your code.


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

Step 9: Required Classes

These are the classes we'll need to import for our class to work. The import directive makes externally defined classes and packages available to your code.


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

Step 10: Variables

These are the variables we'll use; read the comments in the code to know more about them:


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

Step 11: Constructor

The constructor is a function that runs when an object is created from a class, and is the first to execute when you make an instance of an object. Since this is our document class, it'll run as soon as the SWF loads.


public final function Main():void
{
	//code...
}

Step 12: Paddles Vector

First we add the various paddle MovieClips to the vector, and add the listeners - we'll write the listeners() function next.


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');
}

Step 13: Listeners

This function will add or remove the listeners according to the parameter. Mouse Listeners are set to draw the line that will control the wheel.


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);
	}
}

Step 14: Movement Line

The next function starts to create a line based on the current mouse position, and places it on the stage. It's triggered when the mouse is clicked.


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);
}

Step 15: Draw Line

While the mouse is moved, the line continues in that direction.


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

Step 16: Spin the Wheel

The next code runs when the mouse button is released, finishing the line. The drawing listeners are removed to avoid drawing multiple lines and the speed is calculated according to the height of the line. Finally, an EnterFrame event is called to actually rotate the wheel.


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);
}

Step 17: Rotate the Wheel

This is the function that will spin the wheel and detect what value it lands on:


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

	wheel.rotationZ += speed;

Step 18: Detect Value

Here we detect the current value of the wheel based on the last paddle it touched.


/* Detect Value */

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

Step 19: Decrease Speed

The wheel's speed is reduced every frame to eventually stop the spinning.

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

Step 20: Reset Wheel

All values are reset when the wheel stops. A function that will run an action according to the final value is called.


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

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

Step 21: Set Bar Color

This function will run a custom action according to the last value of the wheel. In this case it changes the color of the bottom bar, but you could make it do anything else.


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;
	}
}

Conclusion

Change the code to perform your own actions!

I hope you liked this tutorial, thank you for reading!