Onebyone Design

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:

[kml_flashembed fversion=”9.0.0″ movie=”https://blog.onebyonedesign.com/wp-content/uploads/2008/12/scrubbertest.swf” useexpressinstall=”true” publishmethod=”static” width=”400″ height=”400″]

[/kml_flashembed]

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;
		}
	}
}

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…