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 = (number1)+int(number2) int

 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  simply means integer (whole number), as we are performing a maths calculation, the computer needs to int 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  (display_txt). Text Display field 

.text = answer display_txt

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