If you just updated to the new FLASH developer’s suite C5 or if you are completely new to FLASH designing, this how to articles will get you started with ease. FLASH does require some basic prerequisites, but we will try to make this as easy to follow as possible so even the amateur web developer can follow along. There will be some Action Script coding involved in this tutorial as well, so it is an intermediate level tutorial, so beginners may have a bit of a hard time understanding some of the coding parts, but even a beginner should be able to follow these easy to understand instructions.

Description of the Calculator

The calculator will consist of the buttons and text fields that you will need to do basic mathematical equations.. The buttons will be the standard calculator buttons of +, -, x and /. The forward slash is what we will use for division since it is what coder’s use for dividing in any object oriented programming language. The text fields needed will be two input fields and three two dynamic output fields. One input is for the first number in the equation and the other one is for the second number in the equation. The first output will be in between the two equation inputs and will be where the math operator that you select appears(+, -. X or /). The second dynamic output field will be where the answer to your equation will appear when you hit the equals button.

Starting Your Graphics

The easiest way to get started is to make your graphics. So, we will start by making all the buttons and text fields described above. You will need to complete the following steps to get started.

Start by opening FLASH and starting a blank document by selecting an action script 3.0 file since we will be using action script 3.0 in the background to do our calculations.


Now save your document and give it a name. Do this by going to file, save and giving it a name such as “Calculator.fla” for example.


Make sure that your time line is open in your workspace and make six new layers by clicking on the “new layer” symbol at the bottom of the time line on the left side. If you are not sure which symbol it is, hold the mouse over each for a second and the name will pop up so you can tell. Once you have created six new layers, you should have a total of seven layers on your timeline because they start you out with one. Name the layers: “actions“, “dynamic text“, “input right“, “input left“, “results“, “buttons” and “text” from top to bottom.


Save your file by clicking control, “S” on your keyboard.


Goto your text layer by clicking on it. Then select your text tool from your tool bar and click on the stage in the top portion of the area. Now, type in the words: “Flash Calculator”.


Open the properties window. If it isn’t showing on any of your tabs yet, go to “Window” and select the “Properties” Window. Use the properties window while you have the text selected and change it to bold and chose a color you like as well. Make the text size 20Pt..


Click on “Window” again. Then click on “align” to open of the align palette. Make sure that “to stage” is selected. Then click on the button to horizontally center the text. Close the align palette and lock the text layer by clicking on the little lock symbol by the layer’s name in the timeline.


Select the “Buttons Layer” and then grab your “rectangle primitive” tool from your tools menu. You may have the normal rectangle tool selected now. If so, just click on the little arrow in the corner of the icon and select the rectangle primitive tool from the fly out window. Then click about an inch or so below you text on the stage and draw out a small rectangle. Don’t worry about the size so much yet.


With your rectangle still selected, click on your properties tab and set the radius to 10. Then set the width of the rectangle to 50 and the height to 35. Set the stroke to a semi dark grey or color of your choice for that matter. Set the stroke to 2 pixels wide.


Open the color panel by clicking on “Window” and then “Color” and select a nice grey. Then select the swatch in the lower left corner of the color window that is a white to black gradient. Next, select the “gradient transform” tool from your toolbox. It will be located with the “free transform” tool, so if you don’t see it, click and hold the free transform tool and then change it to the gradient one. Point your mouse to the top right corner of the button until you get the little spinning arrows icon and then click and drag the corner clockwise until you change the direction of the gradient so that it foes up and down instead of right to left.
Next, click on the center handle on the bottom of the button and pull it down which will spread your gradient out. Pull it down an inch or so. Then click in the center of the button and drag down until the top bar is almost at the top of the button adjusting your gradient’s position until it looks good. When you are done, you should have a light to dark grey gradient from top to bottom.


Next, hit “V” on your keyboard, which is the hot key for your selection tool. Drag a rectangle around your button, selecting the entire thing. Click on “Modify” and then “Convert to symbol”. select movie clip and name the symbol: “buttonbase_mc”. Click okay, closing the convert to symbol popup.


Now grab your text tool and make sure “Static text” is selected in the properties pane. Click on your button and type in a plus(+) symbol. You can use the properties bar to change the color to a dark grey and size it to about 30Pt.. Nudge it to the center and set it to center align.


Select the whole button again and click on “Modify” and “Convert to symbol“. This time select button and name it “plus_btn”. Hit “Ok”.


Double click on the plus button you just created. Now you should see the states options appear, probably where your timeline is if your stage is still set up default style. Hold down the “Alt” key on your keyboard and click and drag the “Up” state to the over to the “Hit” state. Then close the states window by clicking on the little arrow pointing to the left up top of it. That should back you out of the button and back to “Scene One”.


 Now that you have the first button created, you need to creat four more just like it so you have a total of five buttons for the +, -, x, / and = symbols. To copy it five times quickly, simply hold down your “Alt” key and click and drag from the button and drop the copy onto the stage five times. Line up your buttons from right to left across the stage.


Grab your selection tool and click and drag around all five buttons to select them all. Click on “Window” then “Align” to once again open your align pallete. Select the icon to evenly distribute the buttons horizontally.
Now we need to give the symbols their own instances so you can edit them individually. Otherwise when you edit one, they all will change! You don’t want that! So, select the second button. Click on “Modify”, then “Symbol” and select “Duplicate symbol”. Now name this symbol: “sub_btn”.


Double click into the second button and change the plus text to a negative sign.


Now repeat these steps on the third symbol but name it: “mult_button” and put an “x” in it. Then do the same thing on the fourth, but call it: “div_btn” and change the plus sign to a /. Now do it with the fifth button finally, naming it “equals_btn” and replacing the plus sign with an = this time. Now you have your five buttons created. Move them down towards the bottom of the stage so you have from for the text input and output fields now. You should now have the text heading, “Flash Calculator” up top and the five buttons at the bottom of the stage if you have followed us correctly so far. If not, go adjust your items accordingly.
Now lock your buttons layer and select the “inputLeft” layer. Select your text tool and go to the properties tab and this time make sure that “input text” is selected. Click on the stage towards the middle and drag out about an inch long rectangle to make your input text field. In your properties pane again, select “single line text”, make it 20Pt and whatever color you want. Align it to the right in the properties tab as well. Move it over to the left so that it is under the “Flash” part of the heading.


Now select the text field, right click on it and select “copy”. Now select the “inputRight” layer. Right click on the stage to the right of the last text input and select “paste in place”, creating a new text input. Hold down your shift key and use your arrows on the keyboard to nudge it over to the right so it is under the “calculator” part of the heading and directly to the right of the left input, with about three fourths of an inch in between them. Select the text field you just created and go to your properties bar and align this one to the left and this one is done too! Now go to the left one and name it “num1” in the properties bar and name the right one, “num2”.


Hit control “S” to save your work.


Select the “dynamic text” layer. With your text tool selected, go to the properties bar and change it to “Dynamic Text” this time because this is text that will be generated by the action script later on. Drage a small square in between the two input fields. The input fields are where you will enter the two numbers you want to add, subtract, etc. and the middle one is where the math operator will appear to tell you whether you have selected to add, subtract, etc… Name the square dynamic text field, “sym_txt”. Make it bold and medium grey. Make it non selectable in the properties bar as well.


Now go to the results layer and select it. Draw a longer text field out below the three you just made in between them and the buttons at the bottom. Leave it as a Dynamic text field as well. It should be the total length of the other three. Go to your properties bar and make this one selectable, give it a size of 20Pt and you can make it bold if you like and adjust the color. Give it an instance name of “results_txt”. Click control “S” to save your work as you are done with the graphics and ready to start programming the back end in action script 3.0. That raps up part one of this two part How To article. Go To the secone part to learn how to code the action script that makes it work!

Coding in the Action Script

Now that you have your stage in order with all the graphics we will need, it is time to open up an actions window and start typing in the code to make this all work, We are going to show you the code so you can just copy and paste it into your actions pane since this tutorial is a long one. Follow these few simple steps to get the code working:

Select the “Actions” layer on your timeline.
Click on “Window” and then “Actions” to open the actions window where you will type in the text below.

Here is the code you will enter:

plus_btn.addEventListener(MouseEvent.CLICK, plusClick);
sub_btn.addEventListener(MouseEvent.CLICK, subClick);
mult_btn.addEventListener(MouseEvent.CLICK, multClick);
div_btn.addEventListener(MouseEvent.CLICK, divClick);
equals_btn.addEventListener(MouseEvent.CLICK, equClick);

var plusSym:Boolean = false;
var subSym:Boolean = false;
var multSym:Boolean = false;
var divSym:Boolean = false;

num1.border = true;
num2.border = true;
num1.restrict = "0-9";
num2.restrict = "0-9";


function plusClick(event:MouseEvent):void{
    plusSym = true;
    subSym = false;
    multSym = false;
    divSym = false;
    sym_txt.text = "+";
}

function subClick(event:MouseEvent):void{
    plusSym = false;
    subSym = true;
    multSym = false;
    divSym = false;
    sym_txt.text = "-";
}

function multClick(event:MouseEvent):void{
    plusSym = false;
    subSym = false;
    multSym = true;
    divSym = false;
    sym_txt.text = "x";
}
function divClick(event:MouseEvent):void{
    plusSym = false;
    subSym = false;
    multSym = false;
    divSym = true;
    sym_txt.text = "/";
}


//------------Numbers---------
var input1:String;
var input2:String;
var plusRes:Number;
var subRes:Number;
var multRes:Number;
var divRes:Number;

function equClick(event:MouseEvent):void{
    input1 = num1.text;
    input2 = num2.text;
    if(plusSym == true){
        plusRes = parseInt(input1) + parseInt(input2);
        plusRes.toString();
        results_txt.text = String(plusRes);
    }else if(subSym == true){
        subRes = parseInt(input1) - parseInt(input2);
        subRes.toString();
        results_txt.text = String(subRes);
}else if (multSym == true){
        multRes = parseInt(input1) * parseInt(input2);
        multRes.toString();
        results_txt.text = String(multRes);
}else if (divSym == true){
        divRes = parseInt(input1) / parseInt(input2);
        divRes.toString();
        results_txt.text = String(divRes);
}else {
    results_txt.text = "Please Choose an operator!";
}
    
}


That is it! You are done. You have made a calculator. To test it and make sure it works, go to “Control” and click “Test Scene” and it should pop up a test window. If any errors pop up in the “compile errors” window, then you have made a mistake somewhere. If that happens, make sure your instance names are all typed out the same as they are in the code above. That is the most common problem people have when copy and pasting code.

Action Script Code Explained
It is all fine and easy to copy and paste your code, but to really understand it, you should read this last section and you really should type it in as we explain it so you really pick up on what is going on. That way you will be able to do similar tasks in the future without reading a how to or a tutorial on it.

In the first group of lines, we are setting up our event listeners. We are telling the script that the buttons do s ometing when they are clicked on and the event listeners tell them what functions to execute when they are clicked on.

In the next part, we are simply naming our variables that will hold the arithmetic symbols that appear in the middle of the two inputs.

Then in that third section of code, we are telling FLASH to put borders around the text inputs so you can see them and we are restricting their possible input to 0-9 so you can only enter numbers because if you enter other characters, the script will throw an error.

Next, we have our functions. The functions pick up on the click events from the beginning of the script and do what is between the brackets. In this case, they are telling the script what symbol to enter in between the inputs when the corresponding button is hit.

After the four functions for the buttons, we have the variables that will hold both the input text and the output text for the calculator.

After the variables, is a function that will actually do the math according to what arithmetic operator you have selected. To accomplish this, we used if/else statements so that if we selected the plus button, it will add and if we select the subtract button it will subtract and so on. Then, in the final line of text in that last function, it simply tells it to throw an error if there was not an operator selected. That’s it, now you know how to make a calculator! Good luck with yours and we hope you learned something today!