Mar
03
Putting ’static’ to good use.
I’m going to talk about how to build a simple 4 function calculator using static variables and meathods in Flash ActionScript 3.0. This is my first tutorial, so if you have questions or comments, I would appreciate them and will do what I can.
First of all we want to think through how this is going to work. I wanted two types of buttons; The digit buttons (1, 2, 3…) and the operator buttons (+, -, =…) and so I created 2 simple MovieClips that are almost the same as my base and then assigned them custom classes which I planned to make later.
The buttons are just a simple gray box with rounded corners (which doesn’t matter… make it whatever you want) and a small textField with instance name “btnKey” (which does matter, at least for my code).
None of that goes on the stage. I want to add everything to the stage with code so that it’s a simple matter of giving them instance names and passing them their initial values.Just to give ourselves something to work with I filled in the basics of our button classes
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;
public class BaseDigitBtn extends MovieClip {
private var num:Number;
public function BaseDigitBtn(numP:Number) {
this.num = numP;
btnKey.text = String(numP);
mouseChildren = false;
buttonMode = true;
stop();
addEventListener(MouseEvent.MOUSE_UP, OnRelease);
}
private function OnRelease(event:MouseEvent):void {
/****I will decide what happens here later****/
}
}
}
I pretty much use the same code for both BaseDigitBtn and BaseFuncBtn, only one receives a string var while the other receives a number.
public function BaseFuncBtn(disp:String, strP:String) {
this.str = strP;
btnKey.text = disp; mouseChildren = false;
buttonMode = true;
stop();
addEventListener(MouseEvent.MOUSE_UP, OnRelease);
}
…
Now if we want we can write the code to put these buttons on the stage. It’s only a few lines of code really that are copied and pasted till I’m blue in the face then with little added changes in each:
import classes.BaseDigitBtn;
import classes.BaseFuncBtn;
import classes.Calc; //I will talk about this class in a second… just hold on.Calc.clearField(); //I needed to initalize some variables
/*************Creating all my button instances*********************/
var Btn1:BaseDigitBtn = new BaseDigitBtn(1);
var Btn2:BaseDigitBtn = new BaseDigitBtn(2);
var Btn3:BaseDigitBtn = new BaseDigitBtn(3);
var Btn4:BaseDigitBtn = new BaseDigitBtn(4);
var Btn5:BaseDigitBtn = new BaseDigitBtn(5);
var Btn6:BaseDigitBtn = new BaseDigitBtn(6);
var Btn7:BaseDigitBtn = new BaseDigitBtn(7);
var Btn8:BaseDigitBtn = new BaseDigitBtn(8);
var Btn9:BaseDigitBtn = new BaseDigitBtn(9);
var Btn0:BaseDigitBtn = new BaseDigitBtn(0);
//The first peram in the following declerations is what is displayed on the
//button. The second peram is the name of the opperator.
var BtnA:BaseFuncBtn = new BaseFuncBtn("+", Calc.ADD);
var BtnS:BaseFuncBtn = new BaseFuncBtn("-", Calc.SUBTRACT);
var BtnM:BaseFuncBtn = new BaseFuncBtn("X", Calc.MULTIPLY);
var BtnD:BaseFuncBtn = new BaseFuncBtn("/", Calc.DIVIDE);
var BtnE:BaseFuncBtn = new BaseFuncBtn("=", Calc.EQUALS);
var BtnC:BaseFuncBtn = new BaseFuncBtn("C", Calc.CLEAR);
var BtnPN:BaseFuncBtn = new BaseFuncBtn("+/-", Calc.POS_NEG);
var BtnDec:BaseFuncBtn = new BaseFuncBtn(".", Calc.DECIMAL);
/*****************Placing those buttons on the stage******************/
for(var i = 1; i < 10; i++) {
addChild(this["Btn" + i]);
this["Btn"+i].x = 10 + ((i-1)%3)*50;
this["Btn"+i].y = 10 + (int((i-1)/3))*34;
}
addChild(BtnA);
BtnA.x = 160;
BtnA.y = 10;
addChild(BtnS);
BtnS.x = 160;
BtnS.y = 44;
addChild(BtnM);
BtnM.x = 160;
BtnM.y = 78;
addChild(BtnD);
BtnD.x = 160;
BtnD.y = 112;
addChild(BtnE);
BtnE.x = 110;
BtnE.y = 112;
addChild(Btn0);
Btn0.x = 60;
Btn0.y = 112;
addChild(BtnC);
BtnC.x = 10;
BtnC.y = 112;
addChild(BtnPN);
BtnPN.x = 110;
BtnPN.y = 146;
addChild(BtnDec);
BtnDec.x = 60;
BtnDec.y = 146;
/**********A cheap (not the best, but good enough for us) easy way to keep the display refreshing******/
addEventListener(Event.ENTER_FRAME, OnEnterFrame);
function OnEnterFrame(event:Event):void {
digitDisplay.text = Calc.getDispNum(); //returns a string
}
So, now that we’ve made all the basic buttons, it’s time to get into the heart of this calculator. Everything happens in one class I called Calc.
First of all I want to explain that I usually like to make public static constants for a lot of my strings that I want to use as a parameter because it makes it easier to debug if you make a typo. You saw them being used when I created the instances of my operator buttons and here they are being declared in my Calc class:
public class Calc {
/*****Useing these makes debuging easier and is good practice****/
public static const ADD:String = "add";
public static const SUBTRACT:String = "subtract";
public static const MULTIPLY:String = "multiply";
public static const DIVIDE:String = "divide";
public static const EQUALS:String = "equals";
public static const CLEAR:String = "clear";
public static const DECIMAL:String = "decimal";
public static const POS_NEG:String = "positive/negative";
public static const SQRT:String = "sqrt";
public static const SQUARE:String = "square";
public static const POWER:String = "power";
public static const BACK:String = "back"; public static var isActive:Boolean; //Used to tell me what to display, the total or the number being entered.
public static var activeNum:Number; //The number being entered.
public static var decVal:Number; //Used to place the next decimal at the Nth place.
private static var total:Number;
private static var activeFunc:Function; //Points to the opporator function currently active.
public function Calc() { //This constructor isn’t really used.
clearField();
}
public static function clearField():void { //Resets the calculator.
total = 0;
activeNum = 0;
isActive = false;
decVal = -1;
activeFunc = addition;
}
/*This meathod is called from the BaseFuncBtn class and is passed
the operator name of the key. Value received should be one of the
public constants declared earlier in this class.*/
public static function funcKey(str:String):void {
switch(str) {
case "add":
equals();
activeFunc = addition;
break;
case "subtract":
equals();
activeFunc = subtraction;
break;
case "multiply":
equals();
activeFunc = multiplication;
break;
case "divide":
equals();
activeFunc = division;
break;
case "clear":
if(isActive){ //If you made a mistake while entering a number, this will forgive you a little.
isActive = false;
activeNum = 0;
}else {
clearField();
}
break;
case "equals":
isActive = true; //Set to ‘true’ so you can repeat the last opperation over and over.
equals();
break;
case "decimal":
if(decVal < 0)
decVal = 0;
break;
case "positive/negative":
if(isActive){
activeNum *= -1;
}else {
total *= -1;
}
break;
default:
trace("Something went wrong. String was: " + str);
}
}
/*Called from the stage and is used to display the current values*/
public static function getDispNum():String {
if(decVal < 0){
if(isActive){
return(String(activeNum));
}
return(String(total));
}else {
/*If decVal is >= 0 then isActive WILL be true, so this code
here isn’t all needed. But, it’s not hurting anything either…
The computer was rounding decimals off weird (i.e. instead of 2.3
it would have something like 2.300000012) so I need .toFixed() for
the active number being entered.*/
if(isActive){
return(String(activeNum.toFixed(decVal)));
}
return(String(total.toFixed(decVal)));
}
}
private static function equals():void {
if(isActive){
total = activeFunc(total, activeNum);
isActive = false; //Set to ‘false’ so you can change your mind about the next opperation without re-calculating
decVal = -1;
}
}
private static function addition(num1:Number, num2:Number):Number {
return(num1 + num2);
}
private static function subtraction(num1:Number, num2:Number):Number {
return(num1 - num2);
}
private static function multiplication(num1:Number, num2:Number):Number {
return(num1 * num2);
}
private static function division(num1:Number, num2:Number):Number {
return(num1 / num2);
}
}
}
Notice that almost everything in that class is STATIC. This is so we don’t have to create an instance of the class to use them. For example, in my OnEnterFrame function I used digitDisplay.text = Calc.getDispNum(); The digitDisplay is an instance of a textField that I put on the stage, while Calc is just my class.
The last thing that needs to be done is entering a little bit of code that needs to be run when you click a button. That was some fun code to come up with (not really):
private function OnRelease(event:MouseEvent):void {
/*This just resets the active number before the next opperation. I don’t
want to erase the old active number till the last second so that I can
repeat the last opperation by pressing equals again.*/
if(!Calc.isActive){
Calc.activeNum = 0;
}
if(Calc.decVal < 0){
if(Calc.activeNum >= 0){
Calc.activeNum = Calc.activeNum * 10 + num;
}else {
Calc.activeNum = Calc.activeNum * 10 - num;
}
}else {
if(Calc.decVal < 20)
Calc.decVal++; //Decimals are annoying.
if(Calc.activeNum >= 0){
Calc.activeNum = Calc.activeNum + (num / Math.pow(10, Calc.decVal));
}else {
Calc.activeNum = Calc.activeNum - (num / Math.pow(10, Calc.decVal));
}
}
Calc.isActive = true;
}
/************And in the BaseFuncBtn class**********/
private function OnRelease(event:MouseEvent):void {
Calc.funcKey(str);
}
A quick explination of the BaseDigitBtn’s OnRelease function and then we are done:
Entering numbers on a calculator always places the new digit to the far right. That is easy to take care of by multiplying by 10 to shift what you have to the left and then adding your new number… untill you try to enter decimals. With decimals you have to divide by the next highest power of 10 for every spot you move to the right and this can cause some rounding errors. I take care of that in Calc.getDispNum(); with the .toFixed() which will cut it off and not show the 12,000,000th of a unit that it’s off.
You can download the source files for this tutorial here: Calculator Flash Source
It shouldn’t take long at all to add a square root operator key or sin/cos/tan keys. Try it yourself.
Tags: 3.0, ActionScript, Beginner, Calculator, Intermediate, Static
March 3rd, 2008 at 18:42
Awesome tutorial Paul. I don’t know why I felt it neccessary to go so far up in value, but once yout get to high, somewhere near 1.0e+1000, it switches to reading Infinity.
March 3rd, 2008 at 20:40
Cool post, Paul. Not that I understand any of it, but… heh.
March 3rd, 2008 at 20:47
Huzzah! A tutorial from Paul!
ClickPopMediaMarch 5th, 2008 at 14:20
[...] from ClickPopMedia explains us how to build a simple 4 function calculator using static variables and meathods in [...]
March 5th, 2008 at 14:58
Nice work! Helps a great deal to see a pretty complex tool done so elegantly - thanks.
March 5th, 2008 at 21:20
[...] from ClickPopMedia explains us how to build a simple 4 function calculator using static variables and meathods in [...]