Macromedia/Adobe Flash Tutorial

Creating a Basic Calculator in Flash

In this Tutorial we'll create a basic calculator in Flash 5.

I'll try my best to keep this tutorial as simple as possible that even newbie can follow.

Start the Flash if not running, Click File > New

Set Movie property by bringing the Movie Properties by either pressing Ctrl+M or by Modify > Movie menu

Set movie size to 550 x 200 pixels

Press Ctrl+T to bring the Character + Paragraph + Text Option

Note By default these three options reside on same window, until someone mess with these.If these are separated then you can open individual dialog box by Window>Panels

Goto the Text Options, change the text type to Input text, check the Border/BG box and enter 9 in the max character box.
By selecting Input Text we're telling Flash that user should fill this box and by selecting Border/Bg box it appear as a box
on the flash movie.

(Note: Variabe box in disabled on the above but it enabled when you select the Text Box)

Select the Text Tool (T) and drag three boxes (we'll adjust their size later)

Select the first box by Arrow Tool (V) and in the Text Option's Variable box type "Val1" and "Val2" for the two boxes
And "result" for the third and last box.

To make the 3 text boxes of same size call the Info Dialog box by pressing Ctrl + Alt + I

Select the boxes one by and set their size to 125 x 35 then set the font "_sans" and size to 35 and color of you choice.

and align three boxes with the help of Align tool box. Hold Shift key and select three boxes. Click on Align vertical button

Test your work by Ctrl+Enter and do some adjustment if needed. Change the size of text if too small.

Rename the Layer1 to Text Boxes and add new layer, name it Signs. On this layer we'll display the signs like +, x,-, etc

Time Line should look like this

Start creating the buttons, we need about five +, - , x, / and clear, make like these. I hope you'll do it easily otherwise search for creating a button tutorial :)

For Instance for creating a plus button use the info button effectively create a box the set it dimensions 20W x 60H
Center it on stage by entering 0 (zero) on x and y field. Copy it by pressing the ALT key while dragging rotate it and center it.

Note : The 9 squares left of x,y fields shows the align method to the stage, black box in center means all object align center of stage by their center point.
Place newly created buttons on stage nicely, get ready to assign action to buttons

Place the button on the stage as follows

Select the button you created for the - (minus) right click and select Action

Open the Actions group (just below Basic Actions) scroll down and find the "set variable"

Double-Click it and type "results" in variable and val1 - val2 in value.
As you can see assigning action are simple and easy, we are telling Flash that it should display the val1 - val2 in the
Results text box we created earlier.

Select the divide and multiply button and assign the respective action.
Tip: You can copy n paste the minus button code just replace the "-"with "*" and "/"

If you use the simple minus code on the plus it wont work, we use the number function as follows.

on (release) {
results = Number(val1) + Number( val2);
}

In the clear button's action type this:

on (release) {
results = Nill;
val1 = Nill;
val2 = Nill;
}

On the main select the results text box and change its type to Dynamic (be carefull don't change to static)

Test your calculator! Congratulations! (if its working) otherwise oh no

To make our calculator more sophisticated we add a movie clip which show recently performed action by showing it
symbol between the two values.
Create a movie clip by inserting a new symbol (Ctrl+F8) Name it "Actions".

Leave the first frame(label it as blank) of the new movie blank and then insert 5 keyframes, create basic arithmetic symbol on each frame and label the frame by using the Frame window (Ctrl + F) and click on the each keyframe and label it accordingly.

The labeled frame are shown by small red flag (well its look like a flag to me)

Also add stop action on all five keyframes.

We use tellTarget to control the movie playhead to move to our new created movie and go the certain frame by its Frame Label.
Drag the new movie on the stage between the val1 and val2 input boxes. Give it an instance name (Ctrl + I) TellTarget wont work without the instance name.

Select the plus button on stage and go to its actions (You know how)

Double click on tellTarget and type the movie instance name as target.

As target is defined the movie playhead will jump on that movie Click on goto and in Type select Frame Label instead of

Frame Number uncheck the "Goto and play" box

As you remember I told you to label the frames so type the frame label in which you created the plus symbol

Finish the other three buttons I hope you can do it by yourself.On the "Clear" button select the first frame of the movie
We left blank.

That the end of the tutorial , if you find it to lenthy than I wrote it that way that even beginners can complete it without any
problems.

At the end your calculator should look like that, just enter two number in text boxes and click a botton Don't enter alphabets or you

get the "NaN" error which mean Not A Number.

If you're wondering about the fancy pointer then you can read my custom pointer tutorial

You can also download completed calculator file by clicking here.

Suggestions , comments , questions ? Fell free to email me at awesomesirius@gmail.com

Have a Good Day

Syed Saud
Karachi, Pakistan