Perform Math Calculations in Flash

The days of Flash being used solely for entertainment are over. Macromedia has spent an enormous amount of money and effort to bring Flash out of its “animation only” box, and promote it as a cross-platform development environment, as well as a designer environment. Along with the funny cartoons, Flash can now be used to build business applications.

One of the basic requirements of any business app is the ability to do math. In this tutorial, we will cover how to do basic arithmetic in Flash. We’ll also cover the capture of data input by a user, and learn how to perform calculations based on this data.

The Search for Information on Flash’s Calculation Abilities

A little over a year ago, I started a project that required Flash to do some serious calculations. I knew that calculations were possible in Flash; it was just that I’d never done any. So, like any good Web user, I started to search forums and Google for some guidance. Unfortunately, I found very little information on what I was looking for.

I then went to my local bookstore in search of answers, but found the same problem: there is virtually no documentation available on using math in real world Flash applications.

Don’t believe me? Search on Macromedia.com for the term “calculation”. Go to your local bookstore, look at any book claiming to be the be-all and end-all and for Flash, and see what you can find under “math” or “equations”. Sure, there are plenty of examples the explain the use of math to make random swirling lines, flying squares, and dancing midgets, but what about using math to calculate data? Those dancing midgets are cute, but calculating data can make money.

After looking through about 30 books, I found two that offered about a page on what I was looking for. It wasn’t much, but it was something.

If Rich Internet Applications are going to be as big as Macromedia hopes, more tutorials and examples covering basic, real-world business needs like calculating data will need to be written. This tutorial is the first attempt to pique developer awareness of, and interest in, Flash’s math capabilities.

Flash can handle any equation you throw at it, from simple addition, to complex calculus.

Static Calculations

To get you acquainted with what Flash can do, we’ll start off with simple, static calculations. By “static”, I mean equations that are hard coded, and do not require any input from the end user.

All these calculations are performed with ActionScript, so we’ll be doing a little coding. Let’s go!

1. Start up Flash, and create a new movie.

2. Draw four dynamic textboxes on your stage. The dynamic property is set on the Properties panel.

   

3. Once that's done, give each textbox a Variable name. In this example, I’m using “addition”, “subtraction”, “multiplication”, and “division” as the Variable names.
   
   

   Tip: When developing, you should always give objects (textboxes, components, Movieclips, etc.) unique names. Otherwise, you run the risk of confusing Flash. This would be like having two brothers named John and John, and having you mom say, "Tell John to wash the car and tell John to clean the bathroom.” Avoid the confusion by giving every object a unique name.

   We’ll be using these variables to tell Flash were to display the results of our calculations.

4. In the timeline, create a new layer. Name the layer containing the textboxes “Calculations”, and name the new layer “Actions”. We do this so that we can easily see which layer contains the code, and which layer contains the user interface.
   
   

5. Now, let’s apply the calculations. Select the first frame in your Actions layer. In order to give ourselves freedom to type what we wish, we need to set the Actions panel to Expert Mode. Choose Expert Mode from the Actions panel pop-up menu (at the upper right of the panel).

   

6. Now, input the following code:

   addition = 1+1;
subtraction = 5-2;
multiplication = 10*2;
division = 100/5;

   Now, an explanation of what this code does and why. There are four lines, and at the beginning of each is a Variable reference. Remember the Variable names we gave to the four textboxes? The first line starts with “addition”. This references our “addition” textbox. We then give an expression to which "addition” is equal. The ”addition” textbox will display the results of one plus one, the subtraction textbox will display the results of five minus two, etc.

Publish your movie to see the results!

If you get really lost, here's a sample FLA that has all the details.