Calculator 1

In this lesson we will try to make a 4 function calculator, like we did in VB. How much do you remember of the VB calculator? The user would type two numbers into the two textboxes, then choose the mathematical operation to be carried out by clicking one of four option buttons (+, -, *, /), then click an ‘equals’ button to display the answer in a label. We’ll try to set up something similar in Flash. Don't forget though that what you make in Flash will have a huge advantage over what you made in VB: the possibility of putting what you have made inside a web page.

Although we want to make a four function calculator, is a good idea to do your project one step at a time, testing each step as you go. So before we try for a four function calculator we will make a 'one function' calculator - a calculator that only does addition.

In Flash, make a new project. You probably see, in addition to the 'stage' (the equivalent of the 'form' in VB) at the center:

	a tools panel, to the left. You can probably guess the function of most of the tools already. At the bottom of the tools panel is a space that shows what options are available for the currently selected tool .
	the timeline window, at the top, which we will use little or not at all in our first projects, so shrink it now by clicking its title bar
	an actions panel and a properties panel, stacked one above the other at the bottom of the screen. The actions panel is where we will create our ActionScript code, i.e. do the programming. The properties panel is like the properties panel in Visual Basic - it lets you set various properties of the selected object.
	on the right side you probably have several other panels, stacked one above the other. It's neat how the panels can be stacked like this - try adding another (very useful) panel to the stack by pressing F11 to show the library panel - drag it by the left edge of its title bar and make it part of the stack. Note that any panel can be expanded or contracted by clicking its title bar.

The shape of the stage is probably not ideal, so click the ‘size’ button in the properties panel at the bottom of the screen and change the size to 450 x 150 pixels (if the properties panel is not visible then choose Window > Properties). Make sure you can see the whole of the frame by choosing ‘show frame’ from the pull-down list in the top right hand corner of the frame window. In VB the steps for making programs included ‘add controls, set properties, write code, so let’s add controls (components) to the form (frame) now.

To make a text box, use the Text Tool which is in the tool box, normally located at the top left of the screen. As soon as you have created the text box, change the text type setting from ‘static’ to ‘input text’ in the properties panel which is normally visible at the bottom of the screen (choose Window > Properties if it’s not visible). An 'input text' box allows the user to type into the box. In the properties window, set the instance name of this textbox to x_txt. The '_txt' extension in the name indicates that this is a textbox - it is good practice to always end the instance names of textboxes with this extension. Recall that we did something similar in Visual Basic - we always began the name of a textbox with txt.

Turn on the ‘show border around text’ option for this text box, and do the same when you make the other two text boxes (otherwise you won’t see where the text boxes are located when the movie is run).

Make another text box to the right of the first, set it to input text and set its instance name to y_txt.

Make a third text box to the right of the first two – this one will be used to display the answer so it should NOT be set for text input – set it instead as dynamic text, indicating that the contents of the box can be changed by the code but not by the user typing in the box. Note that a dynamic textbox in Flash is like a label in VB, since code can change the caption of a label, while an input box is like a textbox. You do not need to give this text box an instance name. In the properties window, indicate that the contents of the text box are going to be associated with the variable 'ans’ by setting the variable name (Var) to be ‘ans’ (without the apostrophes).

Just one more item to add to the frame: a button component (called a command button in VB). In Flash, components are useful, ready-made objects that have been saved in a compressed format - that's good news in terms of keeping your file size small but bad news in the sense that you cannot freely modify the properties of the component - you can't modify the font size of the button component, for example. If necessary, make sure the components panel visible (choose Window > Components, then open the 'User Interface' folder). It would be a good idea to embed (dock) the panel into the set of panels that run down the right side of the Flash window, if it is not already there. Add a button to the stage either by double-clicking the button icon in the components panel or by dragging the icon from the panel to the stage. In the properties tab, set the instance name to btn. Then make sure that the 'parameters' tab is selected rather than 'properties' and change the button's label to ‘=’. Drag the button between the ‘y’ (middle) textbox and the answer textbox, so that your stage now looks like this (note that I have changed the width of some items using the Free Transform tool ):

Now for the fun part – the programming!

In VB we attached the calculator code to the commandbutton, but Adobe recommends that all the code in a Flash movie should be placed in a separate layer called 'Actions'. They argue that it's easier to find the code when it's all in one place. So, in the timeline, make a new layer by clicking the 'New Layer' button and then double-click the layer's name and rename it ‘Actions’. Notice that frame 1 of the new layer is an empty keyframe (indicated by a small empty circle in the timeline). Keyframes can have code attached to them so click frame 1 of the Actions layer so that we can add actions to it. Now make sure the Actions panel is open (Window > Actions or F9) and then carefully copy and paste the following code into the Actions panel (Script Assist in the top right corner of the Actions panel should be turned OFF).

btn.onRelease = function() {
ans = x_txt.text + y_txt.text;
}
Your timeline should now look like this: . Notice the small 'a' in frame 1 of the Actions layer - this indicates that there is Actionscript code attached to this frame.

You can test your movie now (Ctrl-Enter).

It's easy to understand the above code. When we press down the mouse button over the button called btn and then release the mouse button, Flash will get the text from each of the two text boxes then add them together and store the answer in a variable called ans. Since the third text box is associated with the variable 'ans' it should automatically display the value of that variable.

Just one problem: it doesn't work properly! We have the same problem that we had in VB, that 2+3=23! Can we use the same solution that we used in VB? Does Flash have a function like 'Num' which converts text into numbers? The answer is that Flash DOES have a function like that, but it's called 'Number' rather than 'Num'. Replace the old code with this new code:

btn.onRelease = function() {
    x= number(x_txt.text);
    y =number(y_txt.text);
    ans = x + y
}

Does it work now? Yes!

This code also has a second improvement: it copies the numbers from the two text boxes into variables with very short names 'x' and 'y', making it easier for us to do the next part of this project.

Notice some differences between Flash code and VB code:

	Whereas VB tends to use like ‘End If’ or ‘End Sub’, Flash uses instead curly brackets { } to mark the beginning and end of blocks of code.
	Some lines of the Flash code need to end with a semicolon – it’s not too obvious which ones though so be careful. If you forget to put in the semicolons your code will probably still work, but it's not guaranteed.

Please click HERE to go on to the second and final part of this calculator project, in which we will add four radiobuttons and modify the code accordingly.