Flash Calculator Introduction  
By Mathew Brown 

Table of Contents 
 

Introduction to Flash ......................................................................................................................................................... 2 
The Workspace ............................................................................................................................................................. 2 
The Stage ....................................................................................................................................................................... 2 
Tools Panel .................................................................................................................................................................... 2 
Panels ............................................................................................................................................................................ 2 
Timeline ......................................................................................................................................................................... 3 
Frames and Keyframes .................................................................................................................................................. 3 
Layers ............................................................................................................................................................................ 4 
Symbols and Libraries ................................................................................................................................................... 4 
Actionscript ................................................................................................................................................................... 4 
 
Basic Calculator ................................................................................................................................................................. 5 
3 Text Field Calculator ................................................................................................................................................... 5 
Step 1 – Creating the objects .................................................................................................................................... 5 
Step 2) – Defining Variables ...................................................................................................................................... 5 
Step 3) – The buttons ................................................................................................................................................ 6 
Step 4) – Adding the Actionscript ............................................................................................................................. 6 
 
Basic Calulator 2 ................................................................................................................................................................ 7 
10 Button Calculator ..................................................................................................................................................... 7 
Step 1) – Creating the objects ................................................................................................................................... 7 
Step 2) – Variables .................................................................................................................................................... 8 
Step 3) – Actionscript .............................................................................................................................................. 10 
 
Further Reading: ................................................................................................................ Error! Bookmark not defined. 
 

 
Introduction to Flash 
The Workspace 
 

The Stage 
 
• Compose movie content on the Stage. 
• Set Stage size by selecting Modify > Document: To specify the Stage size in pixels, enter 
values in the Width and Height boxes.  
• The minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels. 
• To minimize document size, click the Contents button to the right of Match (but first create 
all of the objects on the Stage). 
• To set the Stage size to the maximum available print area, click Printer. 
 
 
Tools Panel 
 
Tools create the content of a movie. 
 
• Selection tools: Select, scale, distort, rotate objects 
• Drawing tools: Draw, paint, create text, and erase objects 
• View tools: Zoom and pan 
• Colour tools: Set stroke and fill colours 
• Options: Modify the currently selected tool 
 
 
Panels 
 
• Panels provide additional tools for creating and editing movies. 
• Click the panel menu to view additional options for the current panel. 
• You can hide or show panels by using the options on the Window menu.   
Timeline 
 
You can organise and control the content of the stage, through the use of frames (keyframes) and layers. 

Frames: Like films, Flash movies divide lengths of time into frames, which are organised on the Timeline. 
 
Keyframes: Frames that define a change in what is displayed in a movie or include frame actions to modify a movie. 
When you open a new blank movie document, it contains one layer with one blank keyframe. 
 

Frames and Keyframes 
 
Each frame is worth ‘time’,  (12 frames per second).  

   
Layers 
 
Layers are like multiple film strips stacked on top of each other, each with a different element that appears on the 
stage. 
 
• Graphics 
• Animations 
• Text 
• Sounds 
• Buttons 
• Frame actions 
 
 
 
 
 
 
 
 
 
 
 
 
Symbols and Libraries 
 
Symbols are elements you reuse within a movie to reduce file size. 
 
• Types of symbols include graphics, buttons, movie clips, sound files, and 
text. 
• A library is where you store and organise symbols. 
• When you drag a symbol from a library to the Stage, you create an 
instance of the symbol 
 
 
Actionscript 
 
ActionScript statements instruct a movie to do something while it is playing. 
 
ActionScript can be attached to a frame or to an object: 
 
• Frames: ActionScript attached to a frame is triggered when the movie plays that frame. 
 
• Objects: ActionScript 
attached to an object 
is triggered when the 
viewer interacts with 
the object, such as 
moving the pointer 
over a hotspot or 
clicking a button.    
Basic Calculator 
3 Text Field Calculator 
 

Step 1 – Creating the objects 
The first task, is to create three text fields on the Stage. 

 
Use the T tool, to draw the text fields. 
 
Next, change the properties of each Text Field. 
 

 
 
You need to change the first two fields to ‘Input Text’, ‘Single Line’.  
 
The third Text Field is ‘Dynamic Text’ 
 

Step 2) – Defining Variables  
 
Click on the first Text Box you created, and add the text ‘sum1’ in the Var: field. 
 
Click on the second Text Box you created, and add the text ‘sum2’ in the Var: field. 
 
Click on the third Text Box you created, and add the text ‘answer’ in the Var: field. 
 
 
We have simply created 3 variables – and assigned that each Text Field will be declaring the variables, along with the 
values.  
 
This defines the variable, sum1, which we will be using later to perform the calculation. 
 
Step 3) – The buttons 
 
Next, create 4 ‘shapes’, such as a rectangle (for the 
buttons). 
 

This can be rectangles, circles, any shape.  

Add text to show the user what type of button it is. 

You then need to turn the buttons into ‘Symbols’, 
> ‘Buttons’. 
 
  
By converting to Button, you are 
declaring that this object is a ‘Button’, 
and the user can click it. 
 
 
 

 
 
 
 

Step 4) – Adding the Actionscript 
 
Click on the + button, and type in the following: 
 
on (release) { 
// This mean after the button has 
been released. 
 
//answer’ is the name of a variable 
we created from our third Text Field. 
 
Answer = Int(sum1) + int(sum2)’ 
// This means the variable answer is 
going to hold the value of the Text 
Fields that declared the variables 
sum1 and sum2. The int means 
integer, whole number. 
 
Repeat this for the remaining three buttons, changing the + to whatever button you are adding the actionscript to: 
 
E.g. Minus button =  
 
on (release) {
answer = int(sum1) - int(sum2);
}
 
Now publish (F12), and see if works! 
Basic Calulator 2 
10 Button Calculator 
 
This calculator is a very simple and basic calculator. The code is 
restrictive, but will give you a greater insight into variables and 
some of the programming possibilities that Flash has. 
 
 

Step 1) – Creating the objects 
Similarly to the previous calculator, we need to create the 
calculators objects. 
 
Buttons 0‐9, +, ‐, x, / … and of course the text display. 
 
Start by drawing the number buttons.  
 
Use the rectangle, or rounded rectangle tool.  
 
Now select all objects, and create into a ‘Symbol’. 
 

 
 
Repeat this process 9 more times. 
 
If you want to do this quickly, you can copy and paste  
each button, but make sure you ‘duplicate symbol’,  
 
If you don’t, you won’t be able to change the number for each button, without changing the same object – trust me. 

 
 
 
 
 
 
The next step is to create the Text Display. 
 
 
 
 
 
 
 
 
Make sure you choose Dynamic Text, and name it ‘display_txt’. This is the objects ‘Name’. 
 
You should now have a calculator that looks like this: 
 

 
 

Step 2) – Variables 
 
We need to define some variables.  
 
Create a new layer, and name it ‘Actions’. 
 
Now open the Actions Frame, and type this: 
 
var number1 = “”
var number2 = “”
var answer = “”
var maths = “”    
 The reason for this, is to define some 
variables that will store data when the user 
uses the calculator. 
 
The data flow looks something like this: 
 

 
The user will press Number 1. This will show on the Text Display panel. 
 
The user will then press the ‘Add’ button. This will store the data from 
the Display Panel, and stores it into variable ‘number1’. 
 
Also, the type of maths function (Add) will be stored in the variable 
‘maths’ as “+”. 
 
The user then presses Number 2. This number will display in the Text 
Display Panel. 
 
The user will then press the Equals Button. The equals button stores 
the number from the Text Display panel and stores it in the variable 
‘number2’. 
 
In the same instance, it then checks which Maths button has been pressed, by checking the variable ‘maths’ for one 
of the four maths buttons. E.g. +, ‐, x, /. 
 
IF one of the buttons has been pressed, then the calculation proceeds by giving the answer as ‘number1’ + 
’number2’ 
 
 
Let’s look at the Actionscript that will allow this basic data flow to work. 
 
 
   
Step 3) – Actionscript 
 
Click on the number one button, and add the following code in the Actions panel: 
 
on (release) {
display_txt.text = display_txt.text + "1";
}

 
This basically tells the number 1 button to display the text “1” in the Text Display (display_txt) object. 

Repeat this code for each numbered button. 

E.g. Button 2 

on (release) {
display_txt.text = display_txt.text + "2";
}
 

Now for the Add buttons. 

on (release) {

maths = "+"

number1 = display_txt.text;

display_txt.text = "";

  } 

Repeat the same code for the Minus, Multiply and Divide button, changing the maths variable to the corresponding 
text. E.g. minus button: 

on (release) {

maths = "-"

number1 = display_txt.text;

display_txt.text = "";

The final actionscript is the toughest. The Equals Button.  

This is where the calculation is performed.
The Equals Button. 

on (release) {

number2 = display_txt.text;

if (maths=="+")

answer =int(number1)+int(number2)

display_txt.text = answer

if (maths=="-")

answer=int(number1)-int(number2)

display_txt.text = answer

Translated, it goes something like this: 

on (release) {

number2 = display_txt.text;

 
This means, when the button is released, store the data from the Text Display field (display_txt)  is stored in the 
variable ‘number2’. 

Next code: 

if (maths=="+")

answer =int(number1)+int(number2)

 
This means, if the variable ‘maths’ (when the user presses the add/minus/divide/multiply button) has been stored 
and equals “+” if (maths==”+”), then store the result of variable ‘number1’ + variable ‘number2’ in the answer 
variable.  

The int simply means integer (whole number), as we are performing a maths calculation, the computer needs to 
know it is a number, and not alphanumerical text. 

The remaining statements are the same, but change depending IF “x” or “‐“ or “/” has been selected by the user. 

Finally, display the variable answer in the Text Display field (display_txt). 

display_txt.text = answer
I also created a Clear button, and inserted the following code: 

on (release) {

display_txt.text = ""

num1.text = ""

num2.text = ""

mathsd.text = ""

 
This simply clears the Text Display, along with clearing the fields of the objects that display the variables contents.s 

If you don’t want to display the calculation by creating Text Objects, just use the following code for the Clear button. 

on (release) {

display_txt.text = ""

Good luck. 

‐‐ 
Mathew Brown