Advertisement
ActionScript

Create an iPhone Inspired Switch CheckBox Using Flash and ActionScript 3.0

by

A CheckBox is a graphical user interface element that permits the user to make one or multiple selections from a number of options.

In this tutorial, we'll create a Switch checkbox inspired by the iPhone Graphical User Interface. Read on to find out how!

Step 1: Brief Overview

Using the Flash drawing tools we'll create a vector Switch that will be controled by classes. One class will take care of all the Switch behavior and another class will simply check the value of the Switch. Let's go!

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x300 and set the color to #EFEFF0.

””

We'll now create the Switch graphics.

Step 3: Border

Select the Primitive Rectangle Tool (R) and create a 280x80 px rectangle, filling it with this linear gradient: #505052, #ACADB1.

Use the Gradient Transform Tool to rotate the gradient horizontally and change the corner radius (Properties Panel) to 10.

Step 4: OFF Background

We'll draw two backgrounds for the Switch, the OFF background and the ON background.

Duplicate the previous shape and change its size to 276x76 px. Change the linear grandient to #9A9A9A, #F4F3F6 and move the last color selector (Color Panel) to halfway along the bar.

Select the Text Tool (T) and create a Static TextField. Write "OFF" and place it at the right side of the background.

I used Helvetica Neue Bold, 48 pt, #8C8C8C.

Step 5: Draggable Area

Now we'll add a button that can be dragged to modify the Switch value.

Use the Rectangle Tool to create a 120x80 px rectangle and fill it with #A19FA0, set the corner radius to 10.

Duplicate the shape and resize it to 116x76 px, fill it with #FCFCFE.

To give the final touch to the button, repeat the process and fill the shape with a #D7D7D7, #FCFCFE linear gradient. Use the Gradient Transform Tool to rotate the fill.

Step 6: ON Background

Duplicate the border and the OFF background, delete the text and change the border gradient to #0D4372, #6193D2.

Next, change the background gradient to #0C68B5, #479FF9, #6DB0F6.

Place the button border shape in the right side.

Break Apart (Cmd+B) the shapes to cut them.

Use the same Text Format to add the "ON" text to the background.

Step 7: Setting the MovieClips

Convert the Draggable Button to MovieClip and name it "area". As you can imagine this will be the area that will be dragged to change the Switch value.

Make sure the Registration point is positioned like the one in the images.

Select all shapes including the MovieClip and convert them again, name the result "slider".

Use any of the border shapes to create another MovieClip, this will be the Mask that will hide part of the graphics. Name it "msk".

Convert everything to MovieClip once again and double-click it.

Create a new Layer then cut and paste the mask clip on it. Right-click the mask layer and select the "Mask" option.

This will finish all the graphics. Now your Switch should look like this (note the Registration point):

Step 8: Linkage

Open the Library and right-click your Switch symbol. Select Properties, mark the "Export for ActionScript" box and write "Switch" as the class name.

Step 9: Switch.as

Create a new ActionScript document and save it as "Switch.as".

Step 10: Necessary Classes

Import the required classes. If you need specific help for any of these, please refer to the Flash Help (F1).

package 
{
	import fl.transitions.Tween;
	import fl.transitions.easing.Strong;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

Step 11: Variables

These are the variables we'll use, explained in the code commentary.

public class Switch extends Sprite
{
	private var tween:Tween; //A Tween object for animation
	public var stat:Boolean = false; // This is a Public variable, it's used to know the Switch value outside this class

Step 12: Constructor Function

The Constructor function. This function adds the listeners.

public function Switch():void
{
	slider.area.addEventListener(MouseEvent.MOUSE_DOWN, switchDrag);
	slider.area.addEventListener(MouseEvent.MOUSE_UP, checkPosition);
}

Step 13: Drag function

This function handles the button dragging, based on its position.

private function switchDrag(e:MouseEvent):void
{
	if (! stat) //If Switch is OFF, we can drag to the right
	{
		e.target.parent.startDrag(true, new Rectangle(0, 0, e.target.parent.parent.msk.width/1.75, 0));
	}
	else
	{
		e.target.parent.startDrag(true, new Rectangle(e.target.parent.parent.msk.width/1.75, 0, -e.target.parent.parent.msk.width/1.75, 0));
	}
}

Step 14: Check Function

This code checks the position of the draggable button. Depending on its value it returns to the original position or stays in the new one.

private function checkPosition(e:MouseEvent):void
{
	e.target.parent.stopDrag();

	if (e.target.parent.x >= 140)
	{
		e.target.parent.x = 160;
		stat = true;
	}
	else if (!stat && e.target.parent.x < 140)
	{
		tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true);
		stat = false;
	}

	// OFF to ON

	if (e.target.parent.x <= 20)
	{
		e.target.parent.x = 0;
		stat = false;
	}
	else if (stat && e.target.parent.x > 20)
	{
		tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,160,1,true);
		stat = true;
	}
}

Step 15: Main Class

This is an example of how to use your new Switch.

Create a new ActionScript document and save it as "Main.as".

package
{
	import Switch; //Import the class
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	public class Main extends Sprite
	{
		public function Main():void
		{
			iSwitch.addEventListener(MouseEvent.MOUSE_UP, checkState);//iSwitch is an instance in the stage of the Switch class
		}

		private function checkState(e:MouseEvent):void
		{
			if(iSwitch.stat)
			{
				trace("Switch is ON!");
			}
			else
			{
				trace("Switch is OFF!");
			}
		}
	}
}

Step 16: Document Class

Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.

Conclusion

You have created a fully customizable Switch to use in your applications! Remember that you can create your own skins and add plenty more functionality to the ON and OFF states.

Thanks for reading!

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: User Controls0d63m preview image@2x
    We are building a simple music player app for Android in this series. So far, we have presented a list of the songs on the device and allowed the user to make selections from it, starting playback using the MediaPlayer class in a Service class. In this final part of the series, we will let the user control playback, including skipping to the next and previous tracks, fast-forwarding, rewinding, playing, pausing, and seeking to particular points in the track. We will also display a notification during playback so that the user can jump back to the music player after using other apps.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Game Development
    Implementation
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Game Development
    Implementation
    Make a Neon Vector Shooter in jMonkeyEngine: The BasicsMonkeyblaster 1 preview big
    In this tutorial series, I'll explain how to create a game inspired by Geometry Wars, using the jMonkeyEngine. The jMonkeyEngine ("jME" for short) is an open source 3D Java game engine—find out more at their website or in our How to Learn jMonkeyEngine guide.Read More…
  • Code
    Android SDK
    Android SDK: Drawing with OpacityDrawing with opacity@2x
    This tutorial demonstrates how to allow users to draw with opacity values. While this post builds on related tutorials published on Mobiletuts+, you can dive straight into this lesson without completing the prior posts. Read on!Read More…