Monday, 8 March 2010

Combo Box component in AS3 part 2

This is part 2 of the Combo Box component tutorial where you will learn how to use XML to load text and images by selecting the different labels in the Combo box. For this tutorial you will need four images of flags. I will not be explaining the structure and attributes etc of XML in this tutorial as there are so many tutorials on the internet on this subject. If you want more information on XML then I suggest you do a Google search.

Combo Box component in AS3 part 2

Step 1

Open a text editor and type the following.

Once you have finished typing save the file as: languages.xml

Step 2

Open a new Flash AS3 file and save it in the same directory as your XML file. Then select the Text tool with dynamic text and drag a text field onto the stage like below.

Step 3

On the menu bar select Window > Components and drag a ComboBox component onto the stage below the dynamic text field.

Step 4

Give the ComboBox component the instance name ‘my_comboBox’ and give dynamic text field the instance name: output_txt.

Step 5

Temporary import one of your flag images onto the stage and place it above the dynamic text field. Take note of the x and y position of the image as this will be needed later on then delete it from stage. The image will be loaded dynamically so will not be needed on the stage.

Step 6

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

//Creates a holder for the images and add it onto the stage with the x position
//at 83 and the y at 25.
var imageHolder:MovieClip = new MovieClip();

//This creates a new instance of the URLrequest object with
//the path to the XML file.
var my_req:URLRequest=new URLRequest("languages.xml");

//This creates a new instance of the loader object.
var my_loader:URLLoader = new URLLoader();

//The XML is saved in the variable my_xml.
var my_xml:XML;

//Event listener to listen to when the XML file has finised loading.
my_loader.addEventListener(Event.COMPLETE, xmlLoader);

function xmlLoader(event:Event):void {
//This parses the XML data.
my_xml=new XML(;


function setupComboBox() {
//This add the labels to the combo box.
for (var i:int = 0; i < 4; i++) {
my_comboBox.addItem( { label: my_xml.languages.language.@name[i],
data: my_xml.languages.language.@name[i]} );

//Adds an event listener to the comboBox with the change event.
my_comboBox.addEventListener(Event.CHANGE, sayHello);

function sayHello(event:Event):void {
//This loops through the languages found in the XML file.
for each (var language:XML in my_xml.languages.language) {
//If the attribute in the language tag is the same the label in the combo box
//then the appropriate message get displayed in the text field.
if (language.@name==my_comboBox.value) {

//This loads the from the image path in the xml
var image_req:URLRequest=new URLRequest(language.image);
var image_Loader = new Loader();

//This listener to when the image has finished loading.
image_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoader);

//This loads the image into the image loader.



//This function adds the loaded image to the image holder.
function imageLoader(event:Event):void {

Step 7

Test your ComboBox Ctrl + Enter. Try different values in the combo box and you should see a different message and flag appear.


ozzy 31 March 2012 at 12:17  

Good Afternoon,

Thank you so much for your post. I am trying to do the samething but with out the images.

I would like to create a combobox that will display the names from an external xml file and when you select a name, multiple text field will be populated with the data that the external xml files has.

Here is how my xml file looks like:

?xml version="1.0" encoding="UTF-8"?

membership (membership) /membership
name (name) /name
address (address) /address
phone (phone) /phone
dob (date of bith) /dob



iliketo 1 April 2012 at 05:01  


You should be able to tweak the code above.

oshin saginian 23 May 2012 at 00:09  

Very good example of ComboBox Array

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP