Calculator2

In part 2 of the calculator project we will add 4 radio buttons (they were called option buttons in Visual Basic) and modify our code so that we can do any of the four basic math operations (+, -, *, /) according to which radio button has been chosen.

Add a first radio button component by dragging one from the components panel or by double-clicking (if necessary, make the components panel visible by choosing Window > Components). Make sure that the ‘parameters’ tab is selected instead of the 'properties' tab, then change the label of the radio button to ‘+’ (click the old label and type in a replacement). Drag the button into position between (but above) the two input text boxes. Make 3 more radio buttons under the first one, give them appropriate labels, and move them into position underneath the first one.

Your frame should now look something like this (note that I have changed the width of some items and used Modify > Align > ….. to tidy up the stage) :

We’ve finished adding items to the stage now, and setting their properties. Now we need to modify the code so that the calculator does different calculations according to which radio button is chosen.

In the timeline, select frame 1 of the Actions layer. Then make sure the Actions panel is open (Window > Actions or F9) and carefully copy and paste the following code into the Actions panel, replacing all the existing code. The code for the fourth option button is missing - adding it in is left as a little challenge for you - it should be easy enough for you and why would I have to do all the work?

btn.onRelease = function() {
            x = Number(x_txt.text);
            y = Number(y_txt.text);
            if (radioGroup.getValue() == "+") {                   ans = x+y;             
            } else if (radioGroup.getValue() == "-") {                   ans = x-y;
            } else if (radioGroup.getValue() == "*") {                  ans = x*y;
            }
}

You can learn a lot by studying the above code. You probably can understand just about everything – the line in bold checks whether the label of the selected radio button is equal to ‘+’ (all the radio buttons belong to a group whose group name is ‘radiogroup’). If it is, then the variable ‘ans’ is assigned the value obtained when x and y are added together.

Notice some differences with VB:

  • 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.
  • One of the weaknesses of VB was that the same symbol, ‘=’ was used both the assignment operator (e.g. x = 6 + 3) and for testing for equality (e.g. if x = y then…). In Flash, this ambiguity is removed – the ‘=’ sign is used ONLY as the assignment operator and testing for equality is performed with a double equals sign ‘==’.

You can test your movie now (Ctrl-Enter). You should find that the calculator works just fine.

Do you remember that in VB there was an alternative to If…Then called the Select Case structure – there is an equivalent in Flash, called a Switch structure, and it might be a good idea to use it here since there are several (4) different possible cases for the radio button labels. Here is the new code, which you can substitute for the existing code if you wish...

btn.onRelease = function() {
             x = Number(x_txt.text);
             y = Number(y_txt.text);
             switch (radioGroup.getValue()) {
             case "+" :
                  ans =x + y;
                  break;
             case "-" :
                  ans =x - y;
                  break;
             case "*" :
                  ans =x*y;
                  break;
            // This is a COMMENT to remind you add the last 'case'
            }
}

As in VB, I'll be impressed if you extend this minimal calculator that you have made by adding extra functions, such an extra radio button for doing powers.

Hints:

For powers, the equivalent in Actionscript of xy is Math.pow(x,y)

Remember, Actionscript is case sensitive, so for example math.pow(x,y) would not work.

For square roots, you can use this function: Math.sqrt(x)

For random numbers, the function Math.random() will give you a random decimal number between zero and one.

That’s all, folks – unless you want to publish your movie and insert it (as an SWF file) into a web page, which is the ultimate ‘raison d’être’ of Flash. I've inserted the finished calculator SWF file into this page to convince you that this really works - try it!

Next we’ll see whether our lunar lander can be recreated in Flash…