OBO_NumberScrubber – a new UI Widget

I’ve seen ’em used in After Effects for ages and now they’re a part of the Flash CS4 interface, so I figured why not a new Flash widget. This little UI component allows users to change numerical values by clicking then dragging their mouse to the left and right over the number display. By clicking once and not moving the mouse, the number can be adjusted manually. For a better idea of what I’m talking about, check out the example below:

The above example was created with the following document class:

package {
	
	import com.onebyonedesign.ui.OBO_NumberScrubber;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	/**
	 * Quick test of OBO_NumberScrubber
	 * @author Devon O.
	 */
	public class Main extends Sprite {
		
		private var _redSquare:Sprite;
		private var _numberScrubber:OBO_NumberScrubber;
		private var _label:TextField;
		
		public function Main():void {
			if (stage) {
				init(null);
			} else {
				addEventListener(Event.ADDED_TO_STAGE, init);
			}
		}
		
		private function init(event:Event):void {
			initSprite();
			initLabel();
			initScrubber();
		}
		
		private function initSprite():void {
			_redSquare = new Sprite();
			_redSquare.graphics.beginFill(0xFF0000);
			_redSquare.graphics.drawRect(0, 0, 300, 300);
			_redSquare.graphics.endFill();
			_redSquare.x = 50;
			_redSquare.y = 25;
			_redSquare.filters = [ new DropShadowFilter() ];
			addChild(_redSquare);
		}
		
		private function initLabel():void {
			_label = new TextField();
			var fmt:TextFormat = new TextFormat("_sans", 11);
			_label.defaultTextFormat = fmt;
			_label.selectable = false;
			_label.mouseEnabled = false;
			_label.autoSize = TextFieldAutoSize.LEFT;
			_label.text = "Set Alpha:";
			_label.y = 350;
			_label.x = 50;
			addChild(_label);
		}
		
		private function initScrubber():void {
			_numberScrubber = new OBO_NumberScrubber(0, 100, 100, 50, "_sans", 11, 0x000088);
			_numberScrubber.x = Math.round(_label.x + _label.width + 5);
			_numberScrubber.y = 350;
			_numberScrubber.addEventListener(Event.CHANGE, scrubberHandler);
			addChild(_numberScrubber);
		}
		
		private function scrubberHandler(event:Event):void {
			_redSquare.alpha = _numberScrubber.value / 100;
		}
	}
}

package {

import com.onebyonedesign.ui.OBO_NumberScrubber;

import flash.display.Sprite;

import flash.events.Event;

import flash.filters.DropShadowFilter;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;

/**

* Quick test of OBO_NumberScrubber

* @author Devon O.

public class Main extends Sprite {

private var _redSquare:Sprite;

private var _numberScrubber:OBO_NumberScrubber;

private var _label:TextField;

public function Main():void {

if (stage) {

init(null);

} else {

addEventListener(Event.ADDED_TO_STAGE, init);

}

private function init(event:Event):void {

initSprite();

initLabel();

initScrubber();

}

private function initSprite():void {

_redSquare = new Sprite();

_redSquare.graphics.beginFill(0xFF0000);

_redSquare.graphics.drawRect(0, 0, 300, 300);

_redSquare.graphics.endFill();

_redSquare.x = 50;

_redSquare.y = 25;

_redSquare.filters = [ new DropShadowFilter() ];

addChild(_redSquare);

}

private function initLabel():void {

_label = new TextField();

var fmt:TextFormat = new TextFormat("_sans", 11);

_label.defaultTextFormat = fmt;

_label.selectable = false;

_label.mouseEnabled = false;

_label.autoSize = TextFieldAutoSize.LEFT;

_label.text = "Set Alpha:";

_label.y = 350;

_label.x = 50;

addChild(_label);

}

private function initScrubber():void {

_numberScrubber = new OBO_NumberScrubber(0, 100, 100, 50, "_sans", 11, 0x000088);

_numberScrubber.x = Math.round(_label.x + _label.width + 5);

_numberScrubber.y = 350;

_numberScrubber.addEventListener(Event.CHANGE, scrubberHandler);

addChild(_numberScrubber);

}

private function scrubberHandler(event:Event):void {

_redSquare.alpha = _numberScrubber.value / 100;

}

You can preview, download, and peruse the documentation of the entire onebyonedesign UI library here.

And in other news… A Belated Merry Christmas to all from the wife and I. Hope the New Year is great for all…

9 Comments:

Nice widget! I think the number scrubber should be a little more sensitive though – the value changes a bit too slowly…

dVyper · December 28, 2008
Thanks for the comment dVyper. I struggled with that a bit. I wanted an algorithm that would be just as responsive for a range of 0 to 1 as it would be for -1000 to 1000. I’ve changed it since you posted. It may not really be noticeable in the above example, but I much prefer it now. The newer version’s been repackaged on the download page. The download itself’s a bit big, but includes all the docs and crap.. Thanks again.

Devon O. · December 28, 2008
Nice one Devon! I was thinking of writing it myself but wanted to use up/down or mousewheel. Another idea would be to use modifier keys (shift/alt/ctrl) to change the step (0.1/10/100).

Og2t · January 05, 2009
Some cool ideas, Og2t.. I might look into them this weekend if I have some time..

Devon O. · January 06, 2009
Clicking the scrubber and moving the mouse in one direction does exactly what it should be doing. However, switching directions and moving the mouse in the opposite direction produces random results, sometimes not affecting the scrubber at all, other times resulting in major jumps in the value. Try clicking the scrubber and moving the mouse frantically left to right to reproduce this bug.

Using Firefox 3.0.5, Flash Player 10, on Windows XP.

chris · January 23, 2009
Yo, I need your help I can’t seem to get this to work on my commodore vic 20. I found one in my mom’s closet I used to play games with the neigheibor kid with, listening to Exit Stage Left, and playing Dungeons and Dragons. Thanks in advance, Ed. :).

ed · January 30, 2009
Hey ed, did you try “10 CLS 20 PRINT “Devon is cool.” 30 GOTO 20″ ?

Devon O. · January 31, 2009
I did and the computer started spaming that “I know Devon is cool and Ed is a bone head” It looks like you are doing well, keep up the good work. Your website is very interesting.

ed · January 31, 2009
Hmmm.. I seem to recall playing on a Vic-20, listening to Rush and playing D&D with a neighbor kid.. Who’d a thunk someone who did all that would turn into such a nerd…

Devon O. · February 01, 2009

OBO_NumberScrubber – a new UI Widget

Auto Resizing Popups with Actionscript

Curved 3D Wall in Flash Player 10

Kinect Application Running in Dublin

9 Comments:

Leave a Comment! Cancel reply

Devon O. Wolfgang

Categories

Recent Comments

Archives