Monday, August 18, 2008

The Sliding Button Class

I recently finished a new Flash game called Trig Spinner. A couple ActionScript 3.0 classes developed over the course of the project, so I've decided to share them with the curious.

Today's class is the oh-so-neat sliding button:

The sliding piece on the button gets dragged by the mouse and when let go, locks to either the left or right side. In Trig Spinner's case, it sets the game mode into either degrees or radians. I made a sample file to demonstrate how the button works:

The class's code goes as follows:

package {

import flash.display.MovieClip;
import flash.geom.Point;

//on mouse down
//if mouse is touching slider
//start dragging it
//on mouse up over the button or stage
//if I am dragging the slider, stop dragging it
//release and autolock the slider to closest edge
//left = true
//right = false

public class SlideButton extends MovieClip {
//For a cool sliding button that gets dragged by the mouse and locks into place when let go
//if the piece isn't dragged, the it will also autolock on the closest side the mouse releases inside the button boundaries
//NOTE: slidePiece1 is an instance variable name inside my library movieclip

//generic variable describing the boolean state of the button,
//access it through myBoolState and interperet it
private var myBool:Boolean;
//assists dragging accuracy, difference between mouseX and slidePiece1's x
private var xDiff:Number;
private var initWidth:Number;
private var rightEdge:Number;
public function SlideButton() {
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownState);
slidePiece1.mouseEnabled = false;
//true by default, be careful!
myBool = true;
xDiff = 0;
//width changes during runtime when the slide piece is dragged too far, need it constant
//scaling the SlideButton instance is also a factor
initWidth = width/scaleX;
//the farthest x-coordinate the slide piece can go,
//do not confuse with the edge of the button graphic
rightEdge = initWidth-slidePiece1.width;
public function get myBoolState():Boolean {
return myBool;

public function mouseDownState(event:MouseEvent) {
//convert local points to global so hitTest will work
var clickPoint:Point = new Point(mouseX, mouseY);
clickPoint = localToGlobal(clickPoint);
if (slidePiece1.hitTestPoint(clickPoint.x, clickPoint.y, true)) {
xDiff = slidePiece1.x - mouseX;
addEventListener(Event.ENTER_FRAME, dragHandler);
} else {
xDiff = -slidePiece1.width/2;
//let the stage listen for the mouseUp since the mouse can be dragged anywhere
this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpState);
public function dragHandler(event:Event) {
//don't drag beyond the button boundaries
if (mouseX + xDiff < 0) {
slidePiece1.x = 0;
} else if (mouseX + xDiff > rightEdge) {
slidePiece1.x = rightEdge;
} else {
slidePiece1.x = mouseX + xDiff;
public function mouseUpState(event:MouseEvent) {
removeEventListener(Event.ENTER_FRAME, dragHandler);
if (mouseX + xDiff <= rightEdge/2) {
slidePiece1.x = 0;
myBool = true;
} else if (mouseX + xDiff > rightEdge/2) {
slidePiece1.x = rightEdge;
myBool = false;
}, mouseUpState);


Download the sample .fla file here.

You are free to use this code however you please (without any warranty whatsoever, not even an implied one), but crediting me would be a nice gesture. ;)

(Learn about ActionScript 3.0 classes here.)

Some of My Favorite Videogames

These are some of my favorite videogames in no particular order:

Advance Wars is a turn based strategy game for the Game Boy Advance. The game was my first real dive into the strategy genre. I fell in love with the beginning tutorial missions, whose clear instructions eased me into the deep and varied play mechanics as if I had known them all along.

The rest of the game proved equally fantastic. The unique and varied units, commanding officer abilities, balanced gameplay, clever map designs, strategy possibilities, funny dialog, solid music, and stage editor made for a phenomenal package I sunk hundreds of hours into (and hundreds more in the sequels). My only complaint with the first game was being stuck with the same 3 commanding officers for most of the Campaign mode. Thankfully, Advance Wars 2 changed officers every couple missions and made some other welcome improvements. Of the four Advance Wars games (as of 2008), Advance Wars 2 is my personal favorite.

I first attempted to play this gem around 1999 at the age of 10. It freaked me out! Playing as child Link was fine, but after turning to adult Link and encountering the sea of redead in the castle town, those club-wielding boars in the Lost Woods, and even creepier creatures Forest Temple, I was just too frightened to proceed any further. *shiver* Come 2003, I'm completely addicted to this game, replaying it more than 4 times (and one go for the Master Quest version). Of all Zelda titles, this one houses my favorite 3D dungeons, music, and emotionally engaging plot. I still discover quirky details here and there when replaying the game.

Hell yes! Kirby Super Star is my favorite videogame ever. I will happily play and replay this entire game any day of the week. Kirby is an adorable pink blob with the ability to eat his enemies and copy their abilities. The copy mechanic allows players to experience the game's platforming environments in dozens of different ways. The game's rich color palette and happy music create a wonderful aesthetic I dearly miss in more modern "polygon-pushing" titles. The game consists of 5 chapters that take Kirby on different platforming adventures, and also a few mingames for good measure.

One chapter, "Revenge of Metaknight", incorporates narrative in a very interesting way. The chapter reveals plot progression from the radio communications between Metaknight and his underlings. As the player progresses through the platforming stages, the villians comment on Kirby's position in real time as he foils Metaknight's plan to conquer Dreamland one stage at a time. I haven't seen narrative incorporated as tightly into a sidescrolling game ever since. Like the rest of the game, "Revenge of Metaknight" consists of exciting stages, boss battles and sweet theme music.

Another chapter, "The Great Cave Offensive" places Kirby on a fantastical treasure hunt as he searches for a way out of the underground cave he has fallen into. Kirby travels through underground gardens, mine-shafts, and water-filled crystaline caverns (among many more) in his search for wealth and freedom. The sheer amount of imagination poured into each of these environments astounds me; how did these designers squeeze such rich colors and beautiful levels into a 2 megabyte cartridge? The level design proves just as interesting. Collecting all 50 hidden treasures is quite a tough feat, even with the help of a strategy guide. I could gush about this game forever, so to conclude: artistry, music, level design, and play mechanics, Kirby Super Star has got it all. (Also, the 2-player rocks!)