ActionScript 3.0 Calculator
Navigation -
Site Root ::
Tutorial Home
Basics - Hello World ::
Text IO ::
Calculator ::
If Statement
Games -
Mouse Tracker ::
Ball Bounce ::
Maze ::
Pong ::
Ajax Style Demo
Techniques -
Container Objects
- Start up Flash CS3 and start a new ActionScript 3 file.
If necessary refer back to the Text IO example.
Most of the tasks in this tutorial are similar to tasks in the Text IO example.
- Resize your canvas if you wish. 200 x 200 should be OK. Change the background colour too if you like.
- Insert a layer for your code and rename the layer to CodeLayer.
- Rename Layer 1 to UILayer. This is where your user interface components will go.
- Make sure your UILayer is selected.
- Add a static text field to your canvas and type a suitable caption.
- Add two input text fields to your canvas.
Give the top input text field an Instance Name of N1.
Give the lower input text field an Instance Name of N2.
- Add a button to your canvas. You might need CTRL+F7.
Give your button an Instance Name of myButton.
- Add a Dynamic Text field to your canvas.
Give your Dynamic Text an Instance Name of myOutput.
Your canvas should look like this.

- Select Frame 1 of the CodeLayer and then press F9 to make the Actions - Frame view visible. Enter this code.
myButton.addEventListener(MouseEvent.CLICK, doMyCalculation);
function doMyCalculation(e:MouseEvent):void
{
var myAnswer : Number;
// PROCESS
myAnswer = Number(N1.text) + Number(N2.text);
// OUTPUT
myOutput.text = String(myAnswer);
}
- You can download 03Calculator.fla
- Here is the finished movie.
- TASK: See if you can add buttons for + - x and / and also add the necessary code. Can you prevent the division by zero error?