LogoLogo
  • Home
  • Projects
  • About
  • Contact

OBO_NumberScrubber – a new UI Widget

Devon O. · December 27, 2008 · Actionscript, Flash · 9 comments
3

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:

Get Adobe Flash player

The above example was created with the following document class:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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…

  Facebook   Pinterest   Twitter   Google+
  • Laws of Nature and of Nature’s God
    July 04, 2008 · 0 comments
    1642
    3
    Read more
  • Yahtzee! Too Late for a Contest, but Never too Late to Play
    July 27, 2008 · 4 comments
    2132
    3
    Read more
  • FOTB 2010 – Some Closing Thoughts and some Play Time
    October 07, 2010 · 1 comments
    2534
    8
    Read more
9 Comments:
  1. 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
  2. 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
  3. 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
  4. Some cool ideas, Og2t.. I might look into them this weekend if I have some time..

    Devon O. · January 06, 2009
  5. 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
  6. 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
  7. Hey ed, did you try “10 CLS 20 PRINT “Devon is cool.” 30 GOTO 20″ ?

    Devon O. · January 31, 2009
  8. 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
  9. 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

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang