This example demonstrates a very simple bit of scripting. Programmers would probably laugh if they came upon this, saying: "Who doesn't know how to do that?!" But lots of people don't, because they never had a programming class.
I think this tutorial will help you understand what variables are and how they are used in scripting. It also shows how information that is entered (by users) into a Flash graphic is handled via ActionScript.
You need to upgrade your Flash player (v.10 or later) to view this example.
Here is the whole script:
var distance:Number;
var mpg:Number;
var price:Number;
var total:Number;
total_btn.addEventListener(MouseEvent.CLICK, getTotal);
function getTotal(e:MouseEvent):void {
distance = Number(distance_txt.text);
mpg = Number(mpg_txt.text);
price = Number(price_txt.text);
total = distance / mpg * price; // a basic equation
total_txt.text = "$" + String(Math.round(total*100)/100);
}
The first four lines are declarations of variables. Each variable here is typed as a Number. Variables are containers, and their contents can be changed by ActionScript. ActionScript will throw an error if you try to put a non-Number into a variable that has been typed as a Number. So that means each of these variables must contain a number -- they cannot contain text.
var distance:Number; var mpg:Number; var price:Number; var total:Number;
All four variables are used in this simple equation, which appears in the function (and we will discuss the function further, never fear). If this equation is beyond your math abilities, it is possible that scripting is going to be impossible for you unless you study up on some algebra.
total = distance / mpg * price;
When the variables distance, mpg and price have numeric values in them, then the result of distance / mpg * price will be contained in the variable total.
These two lines should be familiar to you as basic Flash button script:
total_btn.addEventListener(MouseEvent.CLICK, getTotal);
function getTotal(e:MouseEvent):void {
If those lines are not familiar to you, go to the basic Flash buttons tutorial.
In the Flash graphic at the top of this page, there are four white boxes. You can type into the first three boxes. You cannot type into the last box, but all four boxes are text fields. The ones you can type into are Input (Classic) or Editable (TLF) text fields. The last one is Dynamic (Classic) or Read Only (TLF). The TLF Text is new in Flash CS5.
If ActionScript is to interact with a text field, that text field must have an instance name. The instance names of the four text fields are, in order:
My variable names (e.g. "distance") are very similar to my instance names for my text fields (e.g. "distance_txt"). This similarity is not needed. The variable for distance could just as easily be "hopping" and the text field could be named "jumping_txt" -- ActionScript doesn't care, so long as there are no duplicate names.
Now we can talk about the function. This function runs (or executes) when you press the button beside the last white box.
function getTotal(e:MouseEvent):void {
distance = Number(distance_txt.text);
mpg = Number(mpg_txt.text);
price = Number(price_txt.text);
total = distance / mpg * price; // a basic equation
total_txt.text = "$" + String(Math.round(total*100)/100);
}
When you see the variable name (such as distance, or mpg) followed by one equals sign, it means: "Make this variable contain the result of whatever follows the equals sign." So if it read distance = 5; that would be easy. Then the value of distance would be 5.
What is the meaning of distance = Number(distance_txt.text); ?
So if you understand what is being done to the distance variable, you should be able to see that the same thing is being done to mpg and price.
distance = Number(distance_txt.text);
mpg = Number(mpg_txt.text);
price = Number(price_txt.text);
Now that distance, mpg and price all have values (whatever you typed into the white boxes), the value of total can be derived from the equation:
total = distance / mpg * price;
We want to see the value of total in the fourth white box. There's just one problem: total must contain a number, but a text field must contain text (even if it is a number, it is typed as text).
total_txt.text = "$" + String(Math.round(total*100)/100);
When ActionScript writes something into a text field, it follows this pattern: fieldname_txt.text =
If it said fieldname_txt.text = "Hello, World!"; you would expect to see the words Hello, World! in the box. However, we need to change the result of our equation (which is currently in the variable total) into a text format. If we had a plain old integer such as 10, we would write only this:
total_txt.text = String(total);
String() converts the type to text, just as Number() converted the type from text to a number.
We are adding the text dollar sign ($) to the front because this is a dollar amount.
total_txt.text = "$" + String(total);
And then we need to account for the fact that sometimes the result of the equation will be something like 15.56789. That is why we need to round the number. But rounding 15.56789 will give us 16, and because this is dollars and cents in U.S. currency, we would prefer to see two decimal places.
The business with 100 divided by 100 ((total*100)/100) is to provide exactly two decimal places. There is a more scripty way to do it (with Math.pow), but the way shown here is easy, and it works.
Here is a breakdown of that final line of the function:
If you type a few letters into the calculator at the top of this page and then click the total button, you'll see $NaN. NaN stands for Not a Number, and it means you tried to perform math on something that was (guess what?) not a number.
This is often seen in error messages from Flash, and it's not always easy to figure out where you made a mistake. The mistake is always related to data types, and to some bit of script that attempted to do math with something that did not have a numeric value.
If you download the FLA, you'll find that the ActionScript is all in Frame 1 on the Timeline.
DOWNLOAD The files can be downloaded from this folder. Because this FLA contains various text fields, I made one version using the new CS5 TLF Text, and another version using Classic text (CS5), and also a CS4 version.
Education use: This package was created as an example for my journalism students. It is not intended to be used commercially.
Use and re-use:
Scripting a Calculator with ActionScript (AS3) by Mindy McAdams is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Updated 24 March 2011