Flash Tutorial 10: Project Two - Area Calculator

In this tutorial, we will be making a calculator for calculating the area of squares and triangles. In my past tutorials, we have covered the basics and now we are moving onto more advanced projects.

1. Open up a new flash document, name it “Area calculator.fla”.
2. Set your stage dimensions to 200 X 250:
3. Name your current layer “background”.
4. Draw a 200 X 250 rectangle of any color on the stage and align it with the stage dimensions
5. While the rectangle is selected, use the color mixer in linear mode (making sure you the fill is selected not the stroke) re-arrange the colors to make it match mine:
6. Now, use the gradient transform tool (Hotkey F) rotate the gradient 90 degrees clockwise and move the arrow to match the edges of the rectangle:
7. Convert this to a movie clip named “background”:
8. On the background movie clip, click on the filters panel and add a bevel to it with these properties:
9. Now, your stage should look a bit like this:
10. Now, lock the background layer so we don't accidentally edit it and add a new layer named "Input" above the "Background" layer:
11. In the "Input" layer, use the text tool and make the word “Base” using these settings and place it at the location of 18, 60:
12. Do this again, except this time, make the word “Height” and at the location 18, 130, your stage should look like this now:
13. Now using the text tool make an input text field with these properties, it is to be placed underneath the “Base” word. Input text lets you enter text in the field:
14. Now, copy that input text field and paste it anywhere. Edit the properties of the copied textbox to look like this:
15. Now your stage should look like this:
16. Lock the "Input" layer.
17. Create another layer named "Output" and place it on top of all the other layers.
18. Use the text tool again and make some STATIC text with the words "Area" and these properties:
19. Use the text tool to create an DYNAMIC text with these properties:
20. We are now finished with the output layer so lock it.
21. Your stage should look like this:
22. Create another layer named "Selection" and put it at the top of the "Output" layer:
23. Push CONTROL + F8 to create a new button, name it square_btn:
24. Inside the newly made button, draw a black rectangle, 30 X 30 at 0, 0 making sure the alignment point is in the middle:
25. Insert keyframes in all states of your current layer in the button except for "hit":
26. In the "over" state, change the color of the rectangle to a different color, same with the "down" state. Doesn't matter what color they are, it's just to show that the buttons are actually doing something visually.
27. Back to the main timeline, drag an instance of the "square_btn" onto the stage and place it at coordinates 130,65. If you don't have the library, open it be pressing CONTROL + L.
28. In the library, right click on "square_btn" and click "duplicate":
29. Name the duplicate “triangle_btn”:
30. Making a duplicate allows us to have an exact copy of a symbol under a different name. However we now want a triangle roughly the same size instead of a square now. Double click on the triangle_btn symbol in the library to edit it.
31. Delete the "over" and the "down" state of the triangle_btn symbol:
32. In the remaining "up" state, select the selection tool but don't select the square that should be there.
33. Instead go over to the to right corner of the square and the cursor should have a right angle symbol next to it, it should look something like this (excuse my bad drawing):
34. Now click and drag the top right hand corner of the square and drag it to the middle (doesn't have to be exact):
35. Do the same to the other side and now it should look like a triangle:
36. Create keyframes on the "over" and "down" states.
37. Re-colour the triangles the same colours as you did with the square.
38. Return to the main timeline.
39. Drag an instance of the "triangle_btn" from the library and place it at coordinates 170, 65.
40. Now the square and triangle are side-by-side. They look a bit plain and don't match with the background so we are going to put some filters in.
41. Select both the triangle and square buttons with the selection tool.
42. Open the filters tab which should be next to the properties tab:
43. Add a "bevel" filter to it to with these properties to make it look 3D:
44. The buttons fit in much better now. Give the square button an instance name of "square_btn" and the triangle button an instance name of "triangle_btn".
45. Lock the "selection" layer and create a new layer named "Calculate":
46. This layer will be for the button used for generating the area. Press CONTROL + F8 and make a new button called "generate_btn":
47. Draw a 70 X 30 rectangle with color #CCCCCC at 0, 0 on the stage:
48. Click on the rectangle and press F8 to convert it to a movie clip symbol and name it "buttonInside":
49. Add a bevel filter to that newly made movie clip with these properties:
50. Add a new layer within the "generate_btn" symbol and place it at the top:
51. Use the text tool and create some STATIC text with the word "Generate" using these properties:
52. The button should look like this (I've zoomed in on it):
53. Go back to scene 1 and drag an instance of the "generate_btn" symbol from the library onto the stage and place it at the coordinates 150, 110.
54. Your calculator should look like this: 
55. Give the "generate_btn" button an instance name of "generate_btn".
56. Lock the calculate layer and make a new layer named "Mode":
57. Create a dynamic text field (with no text) with these properties:
58. Now we are done with the "Mode" layer so lock it. Your stage should look like this:
59. Make one last layer named "Actions" and place it at the very top:
60. Type this code in the actions panel in the "Actions" keyframe:

You cannot copy and paste, you need to type it. (Did this on purpose) Ignore the red writing.

1. But there's a problem! When you test your movie and enter some values for the base and height and attempt to generate the area, it will output NaN:
2. That is because the code “area = base * height;” means EVERYTHING in the base and height values. When we typed in the values for base and height, it made everything in the text field into its value (font color, font size, font etc). Now we are going to fix that.
3. Unlock the "input" layer:

4. Click on the input text field directly underneath the word "Base" and give it an instance name of “inputBase”:
5. Do the same with the input text field underneath the word "Height" except give it an instance name of “inputHeight”.
6. Lock the "input" layer once again.
7. Change the generate_btn function to this in the "actions" layer:
8. In the code above, I've added 2 lines of code to it. Frankly, “base = Number(inputBase.text);” means that base is equal to whatever numbers that is entered in “inputBase”. Same with the height.
9. Now test your calculator, it works completely fine now.

Congratulations, you have now made a functioning area calculator, you can now move on and upgrade graphics, make it look better etc.

Note: If you put in a letter in any of the input fields, it nothing at all, it will output “NaN”.