Professional Documents
Culture Documents
FLASH Calculator
FLASH Calculator
FLASH Calculator
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