Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

The NumericStepper Component

One of flash's hidden gems

Perhaps one of the easiest components to overlook in Flash MX 2004 is tucked away in the UI Components section of the Components Panel, and carries the uninteresting name NumericStepper. Perhaps you're developing experimental effects and require on-screen controls to alter dynamic feedback within those effects. Maybe you're building complex forms that allow users to quickly select numerical data. Either way, it's time to cast your eye over the NumericStepper component.

Let's look at an example. All the dynamics of the movie pictured below are controlled with instances of the NumericStepper.

NumericStepper is an extremely valuable component, but at its most basic, it's designed to step up or down through a series of numbers incrementally. There are several properties of the component that we can get and set. These extremely useful properties, which we'll explore in this article, are as follows:

  • minimum: the minimum value of the component
  • maximum: the maximum value of the component nextValue: the next incremental value of the component (read-only)
  • previousValue: the previous incremental value of the component (read-only)
  • stepSize: the incremental change value for the component
  • value: the currently selected value of the component
    Potential uses for the NumericStepper component include:
  • used as form elements to facilitate rapid numeric value selection
  • used as date selection elements (months, years etc)
  • used in experimental applications to control complex values
The main difference between the NumericStepper and ComboBox components, apart from the methods, properties and events, is to do with ease of use.

While you can accomplish similar effects using the ComboBox component, the NumericStepper component allows you to increment up or down a selection rapidly via the 'up' and 'down' arrows, or the up and down keys on the keyboard. Using the ComboBox, you need to click the ComboBox, wait for it to display the options, then select the desired value from a dropdown.

The NumericStepper solution is obviously much quicker than the ComboBox, and its capabilities allow NumericStepper to be implemented and used easily and effectively in some unique applications.

Numeric Stepper Basics
To get a feel for this component, let's add a single instance of NumericStepper to the stage. We'll then populate some dynamic text boxes with a couple of the NumericStepper component's properties.

The source FLA file for this example is called NumericStepperBasics.fla and can be found in the downloadable code archive accompanying the online version of this article at http://mxdj.sys-con.com.

Setting the Stage

  1. Start by creating a new Flash document. Accept the default width, height and frame rate settings.
  2. Rename the default layer Actions and add another layer beneath it called Components. Drag an instance of the NumericStepper component from the UI Components section of the Components panel into the first frame of the Components layer. Name the instance StepperMain.
  3. Select the NumericStepper component instance and add the following values within the Property Inspector: maximum:100, minimum:0; stepSize:5, value:10. Note: Here, we've added the component's property values via the Property Inspector, but we can also add these values programmatically via ActionScript if we wish (more on this later).
  4. Create two dynamic text boxes one above the other. Name the instances previousTextBox and nextTextBox.
    When we click the NumericStepper component, these text boxes will be populated with the next and previous values of the component. We'll add the ActionScript that achieves this in a moment.
  5. Add relevant labels to the component and text boxes if you wish, as shown in the above screenshot.
Let's move on. Now, we'll add the ActionScript that allows us to see the component in action...

Adding the ActionScript

  1. With the first frame of the Actions layer selected, add the following code within the Actions Panel:

    var palletteArray = new Array ();
    palleteArray = ["0x7FAAD4", "0xFFDF7F"];
    function setTheme() {
    _global.style.setStyle("themeColor", palleteArray[0]);
    _global.style.setStyle("backgroundColor", palleteArray[1]);
    _global.style.setStyle("fontSize", 11);
    _global.style.setStyle("fontWeight", "bold");
    _global.style.setStyle("color", palleteArray[0]);
    }
    setTheme(); // Called at startup

    var stepsListener = new Object();
    stepsListener.change = function() {
    populateTextBoxes();
    };
    stepperMain.addEventListener("change", stepsListener);

    function populateTextBoxes() {
    if ((stepperMain.value<stepperMain.maximum)
    && (stepperMain.value>stepperMain.minimum)) {
    nextTextBox.text = stepperMain.nextValue;
    previousTextBox.text = stepperMain.previousValue;
    }
    }
    The first thing that we are doing here is creating a new array called 'palletteArray', which we populate with a couple of color codes that we've selected for our interface: a nice pastel yellow (#7FAAD4) and a complementary blue (#FFDF7F).

    Note: Creating an array of colors makes it much easier to switch those colors if we need to: we simply change the values of different array members. This solution allows us to avoid having to search through the code, changing individual hexadecimal values as we find them.

    We then have a function called setTheme(), which is called at startup. It sets the theme for the NumericStepper component (or any other Flash MX 2004 component on the stage) using the palletteArray array we set up earlier.

    We then create a new listener object that listens for a change in the value of the NumericStepper component. When a change is detected, the populateTextBoxes() function is called. It pushes the nextValue and previousValue properties of the component to the relevant dynamic text boxes.

  2. Save the Flash document to a location of your choice and preview your work in Flash.
As you can see, clicking on the NumericStepper instance increments or decrements the values of the component, and pushes the next and previous values into the dynamic text areas.

More Stories By Steven Grosvenor

Steven Grosvenor is founder of Phireworx.com. His job title changes more often than his socks, but we're sure he does something important for a Managed Internet Security company in Manchester. A Ph.D. in Molecular Virology has served Steven well in the web industry, bearing no relevance at all, but this hasn't stopped him progressing so deep into code that nobody else understands. When not worked to death, his wife and young children ensure he can relax at home.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
Amazon started as an online bookseller 20 years ago. Since then, it has evolved into a technology juggernaut that has disrupted multiple markets and industries and touches many aspects of our lives. It is a relentless technology and business model innovator driving disruption throughout numerous ecosystems. Amazon’s AWS revenues alone are approaching $16B a year making it one of the largest IT companies in the world. With dominant offerings in Cloud, IoT, eCommerce, Big Data, AI, Digital Assista...
In his session at Cloud Expo, Alan Winters, U.S. Head of Business Development at MobiDev, presented a success story of an entrepreneur who has both suffered through and benefited from offshore development across multiple businesses: The smart choice, or how to select the right offshore development partner Warning signs, or how to minimize chances of making the wrong choice Collaboration, or how to establish the most effective work processes Budget control, or how to maximize project result...
The Founder of NostaLab and a member of the Google Health Advisory Board, John is a unique combination of strategic thinker, marketer and entrepreneur. His career was built on the "science of advertising" combining strategy, creativity and marketing for industry-leading results. Combined with his ability to communicate complicated scientific concepts in a way that consumers and scientists alike can appreciate, John is a sought-after speaker for conferences on the forefront of healthcare science,...
In his keynote at 19th Cloud Expo, Sheng Liang, co-founder and CEO of Rancher Labs, discussed the technological advances and new business opportunities created by the rapid adoption of containers. With the success of Amazon Web Services (AWS) and various open source technologies used to build private clouds, cloud computing has become an essential component of IT strategy. However, users continue to face challenges in implementing clouds, as older technologies evolve and newer ones like Docker c...
Personalization has long been the holy grail of marketing. Simply stated, communicate the most relevant offer to the right person and you will increase sales. To achieve this, you must understand the individual. Consequently, digital marketers developed many ways to gather and leverage customer information to deliver targeted experiences. In his session at @ThingsExpo, Lou Casal, Founder and Principal Consultant at Practicala, discussed how the Internet of Things (IoT) has accelerated our abilit...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
Detecting internal user threats in the Big Data eco-system is challenging and cumbersome. Many organizations monitor internal usage of the Big Data eco-system using a set of alerts. This is not a scalable process given the increase in the number of alerts with the accelerating growth in data volume and user base. Organizations are increasingly leveraging machine learning to monitor only those data elements that are sensitive and critical, autonomously establish monitoring policies, and to detect...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessio...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
IoT solutions exploit operational data generated by Internet-connected smart “things” for the purpose of gaining operational insight and producing “better outcomes” (for example, create new business models, eliminate unscheduled maintenance, etc.). The explosive proliferation of IoT solutions will result in an exponential growth in the volume of IoT data, precipitating significant Information Governance issues: who owns the IoT data, what are the rights/duties of IoT solutions adopters towards t...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
Organizations planning enterprise data center consolidation and modernization projects are faced with a challenging, costly reality. Requirements to deploy modern, cloud-native applications simultaneously with traditional client/server applications are almost impossible to achieve with hardware-centric enterprise infrastructure. Compute and network infrastructure are fast moving down a software-defined path, but storage has been a laggard. Until now.
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
The best way to leverage your CloudEXPO | DXWorldEXPO presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering CloudEXPO | DXWorldEXPO will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at CloudEXPO. Product announcements during our show provide your company with the most reach through our targeted audienc...
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...