Creating a Currency Converter In Flash (AS2)

This tutorial will teach you how to create a currency converter in flash using AS components. The program will not use any advance ActionScript tools and will rely mostly on the if conditional. The example below shows our end result:

The conversion tool works by retrieving the value from the Numeric Stepper, then checks using a conditional what the source currency and destination currency are to select the right multiplier. Once that the multiplier is found, is simple applies it to the value and displays the result in the Label component.

Our tutorial is divided into the following sections:

1. Setting Up the Components
2. Adding the ActionScript Code

Setting Up the Components

To start off open up Flash and create a new ActionScript 2.0 Flash File, set its dimensions to 500x300 px, the frame rate to 32 and the background to white.

We are going to add the components next. A component is a ready-made Flash movie with built-in functionality. They are easy to use and save time as you do not have to create simple UI tools from scratch each time you want to use some. Our program will have four basic components:

1. Numeric Stepper Component - The user will use this one to put the value he wants to convert.
2. Combo Box Component (Two of these) - The user will use these to select the source and target currencies.
3. Label Component - The end result will be displayed on this one.
4. Button Component - The user will be able to click on this one to perform a conversion.

To display the Components panel, go through Window>Components:

Drag and drop the above mentioned components onto the stage as shown in the image below. Make sure that you put two instances of the Combo Box.

We are going to do two things with these components:

1. Set their Instance Names so that we can refer to them using ActionScript.
2. Configure their Parameters so that they function properly.

Starting with the instance names, select the Numeric Stepper on stage then access the Properties Inspector and set its Instance Name to inputValue_mc as shown in the screenshot below:

Using the same technique assign the instance name of other components in the following manner:

• Combo Box (Left) - input_cb.
• Combo Box (Right) - output_cb.
• Label - outputValue_mc.
• Button - convert_btn.

That should allow us to refer easily to all of these components using ActionScript.

We are now going to configure the Parameters of each our components. Starting off with the Numeric Stepper, select it and then access the Parameters tab on the Properties Inspector. This component will be used to input the value to be converted, so we are going to set the maximum and minimum possible values for it. Set the max to a very large number like the one shown below, and the min to zero. The stepSize property sets the amount by which the number will be changed when the component arrows are pushed, set this as 1. Finally, the value property sets the default value at the start of the program, set it to zero.

We will now edit the Combo Boxes. Select the one of the left and only edit the data and labels properties. The labels property controls the text displayed inside the Combo Box. The data property specifies a special name for each corresponding label to refer to it using ActionScript in a manner. We are going to use three currencies in this converter, Omani Rial, US Dollar, and British Pound.

Once done with the first Combo Box, select the other Combo Box and set its parameters to the same values.

We will now configure the Label. Select it, access the Parameters tab, and configure it in accordance with the image below. The autoSize property controlled the alignment of the text inside the label, the html property is used to allow using HTML inside the label text, and the text property specifies the initial text displayed inside the label when the movie starts.

Finally, select the Button component, access the Parameters to change its Label from Button to Convert.

All our components are now ready for us, we are going to add the functionality of the conversion tool using ActionScript.

Adding Actions

Right-click the only frame you have on the timeline and select Actions open up the Actions Panel. We are going to type all of our code in there.

Our code will have the following function:

1. Create a variable to hold the conversion rate.
2. Determine the conversion rate when a Combo Box is used.
3. Carry out the conversion process when the convert button is clicked.

We are going to do these one by one, the first task is to create a variable to hold our conversion rate. We are not going to have any value for this variable at the start as that will be specified using the Combo Box actions in a bit:

We need to specify this exchange rate using the Combo Boxes, in order to execute any command through the Combo Box we must use an Event Listener. This will require creating an event listener object and then registering it with both of our Combo Box instances. We must specify that the event listener is registered for the change event as well. This can be translated in the following code:

We now must specify what code to be executed through the listener object when the Combo Box value is changed. The purpose of this code will be to find out the proper exchange rate to use. We are going to use a chain of conditionals to check the value of the first Combo Box and the value of the second Combo Box and then determine accordingly which exchange rate to use. The necessary code to do this is a bit long, but it is very simple to understand:

The script above should specify the right exchange rate to use whenever a Combo Box is used. We finally need to execute the conversion process and display on the Label component through an .onRelease event handler property attached to our button:

That should do it. You can now hit Ctrl+Enter to test your Flash Currency Converter.

This concludes our tutorial, I hope that you learned something new from it. You can download the final Source FLA file from here. Feel free to email me on diablo@republicofcode.com for any comments or questions or alternatively post in the Republic of Code Forum to get instant feedback

- End of Tutorial.

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved