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; } } }
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…
Nice widget! I think the number scrubber should be a little more sensitive though – the value changes a bit too slowly…
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.
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).
Some cool ideas, Og2t.. I might look into them this weekend if I have some time..
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.
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. :).
Hey ed, did you try “10 CLS 20 PRINT “Devon is cool.” 30 GOTO 20″ ?
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.
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…
RSS feed for comments on this post. / TrackBack URI