Wednesday, 16 September 2009

Combo box component in Actionscript 3

In this tutorial you will learn how to use the Combo box component with Actionscript 3.0. I have created a simple example using the combo box which demonstrates how it works. In my example I have used four free stock images of different drinks. You can find these stock images at www.sxc.hu.


Combo box component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with static text and type the following message on the stage “What is your favourite drink?” I have used Verdana font type, but you can use whatever font type you wish.


Step 2

Import all your images into the library by File > Import > Import to Library. Then on the menu bar select Insert > New Symbol and give the symbol an appropriate name, choose movie clip and click ok.


Step 3

Now that you are inside the movie clip, on the timeline create three layers as shown below. The drinks layer will contain all the images of the various drinks; the labels layer will contain the labels and names of the various drinks; and the actions layer will contain the actions.



Step 4

Select the drinks layer on the timeline and create three key frames (F6) on the 10th, 20th and 30th frames. Then repeat this for the labels layer, but add the following labels into the frames as shown below.




Step 5

On the drinks layer drag the appropriate drink from the library onto the correct key frame. So, on the 1st key frame you drag the image of the ‘Tea’ onto the stage, and on the 10th key frame you drag the image of the ‘Beer’ onto the stage.




Step 6

On the ‘Actions’ layer select the first frame and hit F9 and add the following code in the actions panel.

stop();


Step 7

Return to the main timeline and select Window > Components and drag the ComboBox component onto the stage. Then select Window > Component Inspector and double click on the ‘dataProvider’ value. Click on the black plus icon to add a new value to the ComboBox. Add all the values you need in the ComboBox and then click ok.




Step 8

Give your ComboBox the instance name ‘my_comboBox’ and give your drinks movie clip the instance name ‘drinks_mc’.


Step 9

On the timeline create a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//Adds the change event to the Combo Box.
my_comboBox.addEventListener(Event.CHANGE, selectDrink);

//This function stops at the appropriate drink when the Combo Box
//value is selected
function selectDrink(event:Event):void{
drinks_mc.gotoAndStop(my_comboBox.value);
}

Step 10

Test your movie clip Ctrl + Enter. Now try changing the values in the Combo box and you should notice the image change as well.



You should now be able to use the Combo box component in Actionscript 3.0.

Update

A few people have been asking how to use the combo box component in Minimalcomps. Firstly, make sure you know how to set up Minimalcomps, look at this post. Here is my code below.

//Imports the required class
import com.bit101.components.ComboBox;

//Array of items to be displayed in the ComboBox
var comboItem:Array = ['Tea', 'Beer', 'Orange', 'Water' ];

//Adds the ComboBox on the stage at 100X100 pixels, set the default
//value to tea and set the other values from the ComboBox. 
var comboBox:ComboBox = new ComboBox(this, 100, 100, "Tea", comboItem);

//Sets the length of the combo box to the length of items in the array.
comboBox.numVisibleItems = comboItem.length;


comboBox.addEventListener(Event.SELECT, comboSelected);

function comboSelected(e:Event):void{
 drinks_mc.gotoAndStop(e.target.selectedItem);
}

2 comments:

Yo 5 November 2009 at 05:34  

Good work!

Anonymous 8 January 2010 at 20:20  

Very nice tutorial! Thanks a lot

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP