Home ProjectsThe Computus Engine AS3 Component: NumberStepper

AS3 Component: NumberStepper

by John

Download the code

The one datatype that is common to all the disciplines in this project is Number so it makes sense to build a number modifier component. Although I’m specifically interested in entering and modifying dates I’m going to follow the component developers mantra and build a general component first. Once I have a simple NumberStepper I will be able to combine them to create all sorts of specific date and time modifiers.

The functionality
I’d like to be able to set the component value and label dynamically. I’d also like the component to resize itself based upon the width of the label. As for the value, I’d like to be able to type it in directly (accepting numbers only) and be able to step the number up or down using a couple of buttons. Luckily some sort of NextPreviousButton might help me with this.

NumberStepper demo

The structure
The NumberStepper is composed of a simple TextField and a NextPreviousButton. The TextField is constrained so as to only accept numbers. I’ve added a handy safety feature to help out any components that subclass the NumberStepper. Component specific validation rules (such as rounding, capping and cycling) can be easily added by overriding the content of the validateValue() function.

validateValue(): working with floating point arithmetic in AS3
Most programming languages (Actionscript included) have “issues” with floating point arithmetic. To show you what I mean I deliberately haven’t done any rounding for this demo. Trying stepping down from 1.21 Gigawatts and you’ll see the value explodes when it goes negative.

Now this isn’t a bug per se, more a feature of how modern programming languages deal with floating point arithmetic. They represent numbers in base 10 whilst performing the calculations in base 2. Flash Player Engineer Tinic Uro explains the phenomenon in the comments to this post. If you only deal with whole numbers you won’t have this problem but if you need to support floating point arithmetic then you can add some Math.round lovin’ to the validateValue() function and you’ll be fine.

You may also like

3 comments

Fredericton Designers » Blog Archive » AS3 Component: NumberStepper September 8, 02008 - 2:16 pm

[…] Link to the original site […]

Reply
RansomWeaver September 8, 02008 - 4:03 pm

This is something that has been crying out for a component. How about click-drag like After Effects to change the value?

Reply
John September 8, 02008 - 4:57 pm

Hi Randomweaver. Yes, you could add that functionality pretty easily because the AnimatedButtons keep their hotspot separate from their state. All you would need to do is rework the hotspot code to track mouse drags.

If you get anything working post back a link otherwise I’ll be looking at draggable UIs and sliders in future posts.

cheers
jd

Reply

Leave a Reply

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