Create an iPhone Inspired Switch CheckBox Using Flash and ActionScript 3.0

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

Web/Logo Designer, Flash Developer with passion for great designs and cool applications.

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).

view plaincopy to clipboardprint?

1. package
2. {
3. import fl.transitions.Tween;
4. import fl.transitions.easing.Strong;
5. import flash.display.Sprite;
6. import flash.events.MouseEvent;
7. import flash.geom.Rectangle;

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.

view plaincopy to clipboardprint?

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

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.

view plaincopy to clipboardprint?

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

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.

view plaincopy to clipboardprint?

1. private function switchDrag(e:MouseEvent):void
2. {
3. if (! stat) //If Switch is OFF, we can drag to the right
4. {
5. e.target.parent.startDrag(true, new Rectangle(0, 0, e.target.parent.parent.msk.width/1.75, 0));
6. }
7. else
8. {
9. 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));
10. }
11. }

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.

view plaincopy to clipboardprint?

1. private function checkPosition(e:MouseEvent):void
2. {
3. e.target.parent.stopDrag();
4. 
   
5. if (e.target.parent.x >= 140)
6. {
7. e.target.parent.x = 160;
8. stat = true;
9. }
10. else if (!stat && e.target.parent.x <>
11. {
12. tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true);
13. stat = false;
14. }
15. 
    
16. // OFF to ON
17. 
    
18. if (e.target.parent.x <= 20)
19. {
20. e.target.parent.x = 0;
21. stat = false;
22. }
23. else if (stat && e.target.parent.x > 20)
24. {
25. tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,160,1,true);
26. stat = true;
27. }
28. }

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 < tween =" new" stat =" false;" x =" 0;" stat =" false;"> 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".

view plaincopy to clipboardprint?

1. package
2. {
3. import Switch; //Import the class
4. import flash.display.Sprite;
5. import flash.events.MouseEvent;
6. 
   
7. public class Main extends Sprite
8. {
9. public function Main():void
10. {
11. iSwitch.addEventListener(MouseEvent.MOUSE_UP, checkState);//iSwitch is an instance in the stage of the Switch class
12. }
13. 
    
14. private function checkState(e:MouseEvent):void
15. {
16. if(iSwitch.stat)
17. {
18. trace("Switch is ON!");
19. }
20. else
21. {
22. trace("Switch is OFF!");
23. }
24. }
25. }
26. }

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!