Wednesday, 11 July 2012

Toggle switch button in Actionscript 3

In this tutorial I will create a Toggle switch button in Actionscript 3. The button will change between the on and off states when clicked. There are two ways you can make this toggle effect. The first method uses timeline frames and motion tweens to switch between the two states, and the second method uses coded tweens to create a smooth sliding transition. I will provide code for a simple toggle by moving the x positions, and also code for a coded tween using the TweenNano class.


Step 1

Open a new AS3 file and save it with the name: Toggle switch button. You will need to download the TweenNano class from greensocks.com


Step 2

On the menu bar select Insert > New Symbol. Enter the name ‘Toggle button’ choose the type Movie clip and click ok.


Step 3

On the timeline change ‘Layer 1’ to the name ‘base’. This layer will be the base colour for the toggle button. Select the Rectangle Primitive Tool (R) and draw a rectangle shape with the width: 110 pixels and height: 40 pixels and the corner radius: 9. Make sure the x and y position of the rectangle is set to 0.


Step 4

On the timeline insert a new layer called ‘text’. This layer will display the message for the button. Select the Text tool (t) and type the words ‘ON’ and ‘OFF’ in each half of the rectangle shape. I have used the Verdana Regular font with 15pt size and 0xFFFFFF colour.


Step 5

Insert another new layer on the timeline called ‘Switch’. The switch layer is the movie clip that will move between the on/off positions. Select the Rectangle Primitive Tool (R) and draw a rectangle shape with the width: 55 pixels and height: 36 pixels and the corner radius: 9. Move the x and y position to 2. Convert the rectangle into a movie clip (F8) with the top left registration point selected and give it the instance name: switchBtn.


Step 6

Return to the main timeline. Then from the Library panel drag the Toggle button movie clip onto the stage and give it the instance name: toggleBtn. Insert a new layer on the timeline called actions and enter the following code into the Actions panel.

//Determines the on and off state.
var onState:Boolean = true;

//The x positions of the on/off.
const ON_POSITION:int = 2;
const OFF_POSITION:int = 53;

//Adds a hand cursor on the button and adds a click event to the button. 
toggleBtn.buttonMode = true;
toggleBtn.addEventListener(MouseEvent.CLICK, btnClicked);

function btnClicked(e:MouseEvent):void
{
 //This sets the onState variable to true/false when toggleBtn is clicked. 
 //I have used the shorten logic for the true/false. 
 onState = !onState;
 

//If the onState is true then the switchBtn button is moved to the on position, 
//and if the onState is false then switchBtn button is moved to the off position. 
//You can also write the code using the ternary operator (shorten if-else statement)
//like this: toggleBtn.switchBtn.x = (onState) ? ON_POSITION : OFF_POSITION;
 if(onState){
  toggleBtn.switchBtn.x = ON_POSITION;
 }else{
  toggleBtn.switchBtn.x = OFF_POSITION;
 } 

}

The coded tween version is very similar. I have used the TweenNano class to tween the x position of the switchBtn movie clip.

import com.greensock.TweenNano;

var onState:Boolean = true;

toggleBtn.buttonMode = true;
toggleBtn.addEventListener(MouseEvent.CLICK, btnClicked2);

function btnClicked(e:MouseEvent):void
{
 onState = !onState;
 
 if(onState){
  TweenNano.to(toggleBtn.switchBtn, 0.5, {x:ON_POSITION});
 }else{
  TweenNano.to(toggleBtn.switchBtn, 0.5, {x:OFF_POSITION});
 } 
}

Optional

To make the button look less flat I have added a drop shadow to give a slight raise from the background. Since, the button is already on the stage you can add the drop shadow from the Filters panel. Here are the values I have used: BlurX & BlurY – 4, Strength – 70%, Angle – 90, and distance – 1. Alternatively, you can add the drop shadow using the following code.
import flash.filters.DropShadowFilter;

toggleBtn.filters = [new DropShadowFilter(1,90,0,1,4,4,0.7)];

Step 7

Export your movie Ctrl + Enter.



The button on the left is the normal version which shifts the x position of the switchBtn, and the one on the right uses coded tweens to move the switchBtn.

To make the button reusable for other projects you add the code into an Actionscript Class. Firstly, I assume you have created the tweened version. In the library, right click on the toggleBtn movie clip and select properties. Select the 'Export for Actionscript' checkbox and set the Class name to: 'ToggleBtn' and click ok. Now, open up an AS3 class file and enter the following code.

package 
{
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.display.MovieClip;
 import com.greensock.TweenNano;

 public class ToggleBtn extends MovieClip
 {
  public static const BTN_CLICKED:String = "btnclicked";
  private const ON_POSITION:int = 2;
  private const OFF_POSITION:int = 53;
  private var onState:Boolean = true;
  
  public function ToggleBtn()
  {
   buttonMode = true;
   addEventListener(MouseEvent.CLICK, btnClicked);
  }

  private function btnClicked(e:MouseEvent):void
  {
   onState = ! onState;

   TweenNano.to(switchBtn, 0.5, {x: (onState) ? ON_POSITION :  OFF_POSITION });
   
   dispatchEvent(new Event(BTN_CLICKED));
  }
  
  public function get buttonState():Boolean
  {
   return onState;
  }
 }
} 

1 comments:

Shabnum Amin Khan 12 July 2012 at 18:03  

Very Interesting tutorial.I like your websites for these good and interesting tutorials.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP