First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Rizwan Lotia | Website: http://www.doctorsdesktop.info
miles calculator Miles Calculator

By Rizwan Lotia

I learned many things about flash on this web site and now I guess its time to write a tutorial myself. Given below is a sample calculator, which we will make together step by step. This tutorial is intended for novice who have some basic knowledge of flash. You can take this tutorial on any version of flash.

Ok so let's get down to business. Open your flash. You will see a standard stage before you. You may or may not see the timeline or tools at this stage, depending on its previous usage and settings. Open each by clicking on view and windows menu list respectively. On the other hand if you have many panel sets open, close them except the two mentioned above. You can open and close panels as per your needs.

Next step involves adjusting the movie size to your needs. Click Modify and then Movie. Note: Newer versions have document on their menu list. The default size of the stage is 550 x 400 px. We would need a space of 300 x 450 px for our movie and so you should enter these figures into the appropriate boxes and click Ok. You will see that the size of the stage on your computer changes. Some portions of your stage may not be visible at this stage. You can view all the contents by resizing the stage by choosing "Show Frame" from the drop down list located on the menu bar.

Now we are going to make a base of the calculator. As you can see that there is only one layer on the timeline right now. If you click on it, it will be highlighted and also the first frame. Right now it is empty, as we have not drawn anything yet. Select the rectangle tool on your Tools panel. On your Tools panel identify and click the 'Fill color icon' present in the color section, a bucket showing spilling of paint. There is a color palette along with it for you to choose the inside fill color of anything you will draw on the stage. Choose a blue color, with the dropper provided. Do the same for the stroke color. Now you ready to draw your rectangle base on the stage. Place the cursor, which will appear as a cross bar on the top left-hand corner of your stage to the bottom right hand corner. You will now have drawn a rectangle the size of your stage. You now have an object, a square base for the calculator. Once you have done this you will notice that the shade of the frame box has changed to gray. Next, double click where 'Layer 1' is written. The name of the layer can now be renamed and do so to rename it 'base', which will serve as your base for the calculator. Save the file and give it a name before you move on. You should continue to do so, while working.

Before doing anything further lock the base layer created, by clicking on the dot below the lock icon in front of the newly name base layer. A lock icon will now be visible in front of the layer name.

Now insert a new layer. Like many actions in windows and with many software's, you can perform the same actions by multiple routes and so it is with flash. You can create a new layer by simply by clicking on the plus sign given at left side of the timeline below the layer names or you can use the insert menu list on the menu bar or you can simply right click on any layer and use 'insert layer' to add a layer to your timeline. You will get used to these multiple routes of performing the same tasks as you practice more and more. Rename the layer that you have just created 'text'. Next click on the text tool (letter A on tools panel). Before inserting the text boxes, open the text options panel by clicking Windows>Panels>Text options. In newer versions these options are available on properties panel. Check to see if static text is selected from the three options available. Next choose the Character tab on this panel group (in newer versions this is available on Properties panel). Choose 'Arial' for font, 22 for size and white color from the color palette. Click on top of the base. This will create a text insertion box with a cursor in it. You will see that there is a circle on top of it. This lets you create text without wrapping it. Type 'Mileage Calculator' which is your heading. Now click the Arrow Tool and select the box you have just created. Open up align panel from windows menu and click 'to stage'. Click on the second button from the left, in the top line. This places the mileage heading in the horizontal center of the calculator.

You need to write two more text boxes (font size of '16', character 'Arial' and color 'white'). For the first write the following text, 'Enter miles below'. Click on it and open info panel (Properties panel in newer versions). from the Windows menu list. Enter value of 10 and 70 for x and y co-ordinates. For the second enter text 'Result in kilometers'. You can use 10 and 170. You can also distribute these two boxes roughly on the base as per the completed calculator shown on the first page.

You now need to make two graphic boxes, which will serve as a contrasting base for entering data. Create another layer to do name it inputboxes (creating layers for different graphics makes it easy to manipulate or edit graphics if you need to do so later). Choose rectangle tool for these. Choose white as the fill color and black as the outline stroke color. Open the stroke panel (Window>Panels>Stroke) and choose solid line and 2 as its dimension. Now draw to create box of any size, by dragging on the stage below the first text box 'Enter miles below' (We will adjust the size later on). Once you have drawn double click on your graphic by using the arrow selection tool. You will notice that the box stands selected (dotted all over). Enter values of '150' and '25' on the width and height parameters, in the info panel(Properties panel in newer versions). Roughly drag and align it so that it appears in center of the two text boxes and also on the horizontal axis. Once you have created one box simply select (drag the arrow selection tool across the box created) and duplicate it (Edit>Duplicate) to create the other box and drag it to place it below the Result in kilometers text box.

Now select on the first graphic box by double clicking. Press shift and double click on the second graphic box that you just created. Both stand selected on the stage. Open the Align panel, if it is not already open. Deselect the 'to stage' button and now press left (first button on the align panel to even out there left edges as they are placed on the base).

Next you need to create input boxes, where user will be able to insert values. Do this on another layer titled 'feedinlayer'. You will do this with the same text tool that you have been using to create previous text boxes but choose input text from the Text Options panel (Properties panel in newer versions). You can set attributes such as the text character, font size and color for the values to be entered by the user. Choose a size of '16', 'black' color and 'Arial' font. Next click the paragraph tab to select the paragraph panel on the group. Choose justify paragraph to the right from the options. Now first lock the layers already created so you do not modify them. Start drawing your input box over the first graphic box that you have created and size to match it. You will notice that when you drag it along, on the base of your drawing, the box created has a square on its bottom left (in static text their is a circle or a square on the top). This indicates that you are creating an input or dynamic text box, rather than a static text box. Adjust its placement once you are done drawing it. You need to enter a name in the variable field on the Text Options panel (Properties panel on newer versions of flash). Name it 'miles'. Repeat the procedure to create another box, but this time choose dynamic text as its option. Rest of the steps are the same as above except name it 'kilometers'.

The next step involves creating a button, which will interactively calculate our conversion. Interactive buttons are created as symbols in flash, so create a new symbol by clicking Insert> New symbol on your Windows menu bar and select button as its type. Give it any name that you wish. A new stage will open for the symbol, when you press ok. The button symbols timeline has four frames, namely, up, over, down and hit. In the center of the stage draw a rectangular box, using Rectangle Tool once again, as you have done previously. Choose a black as fill and stroke color. Now drag to draw. Adjust the width and height of the rectangle box just drawn to 80 and 20 by selecting the box drawn and align it to the center of the stage as you have done previously. Insert a layer and add static text 'Calculate' to be placed on top of the button and lock it. Extend the timeline to the hit state by selecting it and pressing Insert>Frame.

Next you need to manipulate other frames to give it a different appearance for the button to seem interactive. Do this first by selecting the second frame marked as over state and insert a keyframe (a frame where the drawing changes) by following Insert>keyframe. This allows you to change your graphic in this frame on the same layer on the timeline. Now click once in the center of the box. This will choose your fill color for the rectangle just drawn, excluding the stroke boundary. Press the fill color icon on the Tools panel to open the color palette. Type number #00FFFF into the space provided instead of choosing with the dropper this time. This will create a button, which will change its color when your cursor moves over it. You can now repeat the same process to change to an even lighter color and appearance in the down and hit states. Hopefully you are saving your work while working along this tutorial as instructed earlier.

Now go back to the scene1. You can do that by clicking on the scene name on the left side of the top of the symbol timeline or the movie icon on the right side of top of symbol timeline. From the Windows menu open the library panel. Drag an instance of the button on the stage. You can do that either by clicking on the view of the symbol in the library panel window or by dragging the name of the symbol. Place the button appropriately on the stage.

Now that the drawing of graphics is complete for our movie, we move on to a slightly difficult part, the action script. First lets define the purpose of writing this action script. We want to convert a value given by a user to display another value. So we have two variables in our movie. One is the input a variable number to be provided by the user and the other variable is the result to be displayed. We have already named our variables previously. We now have to write an action script for our button to perform the act of calculation (miles to kilometers. We know that one kilometer is equal too 0.62138 miles. So any number entered by the user for miles times 0.62138 will convert it to kilometers. We are now ready to write our action script. Click the button, we have just placed onto the stage. Open the action script panel by clicking on it on the Windows menu list. The actionscript panel will open with object action marked on the tab above. You can create actionscript in novice or expert mode. Select the novice mode form the list, by clicking the arrow on the right of the panel. Now find the 'on' action, in the actions folder given on the left side of actions panel. Here all the built in actions that come with the flash are enumerated. Double clicking the 'on' action, will enter the 'on' with its parameters in the actionscript window. Select parameter 'press' from the options available for 'on' action. Now with the 'on' selected in the actions panel, double click evaluate action. Type kilometers = miles*0.62138 in the expression field given below (Please note that this actionscript is case sensitive). The * sign means multiply in flash actionscript. This action is now ingrained to the button on stage. You can test your movie at this stage. Press Control>test movie. Feed in your miles and press calculate. Works? Wonderful! You can create a calculator, which converts kilometers to miles as your next project. Happy flashing!

To view some more calculators in action, visit my web site at http://www.doctorsdesktop.info/index.html.

» Level Basic

Added: 2006-04-22
Rating: 1 Votes: 3
» Author
I am a doctor by profession but have learned to work in flash. I maintain a web site at http://www.doctorsdesktop.info as a hobby.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.