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

  1. 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.
     
  2. Resize your canvas if you wish. 200 x 200 should be OK. Change the background colour too if you like.
     
  3. Insert a layer for your code and rename the layer to CodeLayer.
     
  4. Rename Layer 1 to UILayer. This is where your user interface components will go.
     
  5. Make sure your UILayer is selected.
     
  6. Add a static text field to your canvas and type a suitable caption.
     
  7. 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.
     
  8. Add a button to your canvas. You might need CTRL+F7.

    Give your button an Instance Name of myButton.
     
  9. Add a Dynamic Text field to your canvas.

    Give your Dynamic Text an Instance Name of myOutput.

    Your canvas should look like this.

    Screen Shot

  10. 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);
    }
     
  11. You can download 03Calculator.fla
     
  12. Here is the finished movie.



  13. TASK: See if you can add buttons for + - x and / and also add the necessary code. Can you prevent the division by zero error?