In this next tutorial series we will learn to make use of all the flash components such as simple buttons and combo boxes, checkboxes and data grid, so this is going to be a quite large tutorial, and I will break it up into sections, as we go through all the components.
In this lesson we will learn to use buttons component to raise click events, and I will introduce the combo box, or the drooped as some calls it, and all is of cause done with flash actionscript 3.0.
And here is what we will be making.
First we will make the combo box switch the box color from blue to green when we select a combo box item. Meaning that we will raise an event on the combo box event change.
Next we will learn to add a new item to the combo box, so you can write something into the textbox and with the button you can raise an event to add an item to the combo box.
Before we to down and dirty with the actionscript coding, we need to do some preparations, like setting up some movieclip graphics, buttons etc.
So as you can see by the final result at the top, locate the component panel in flash, (you can find it by going to the top menu -> view -> components) and drag out a button, a textbox and a combobox.
Select each component and go to the properties panel and give them instance names, I named the button "my_btn", the textbox "my_input" and the combobox "my_ComboBox".
Now we will add two items to the combo box, two data elements containing a label name, blue and green.
So select the combo box and locate the parameters panel (by default its docked next to the properties panel).
Click on the dataprovider and add in the information as I did in the image below.
The last thing we need is the colored box, with the rectangle tool draw a square on the stage with the blue color.
Select it and convert the graphic into a movieclip, give the movieclip an instance name, I named mine "box_mc".
In that movie clip create a new keyframe at frame 2 and change the box color to green.
Stay inside the colored box movieclip, now we are ready to do our first actionscripting, even though its just one short line.
Select frame one (the one with a blue box).
In the actionscript panel write:
Now go back to the main stage and select the first (and only) frame on the stage, then bring up the actionscript panel, now we will do some coding, I have broken the code up into small pieces for better understanding, and wrote some comments inside the code so you can follow along.
//This line is just to style the textbox so it has a border.
my_input.border = true;
//Here we add an eventlistener to the combobox, to call a function if the combo box item changes.
my_ComboBox.addEventListener(Event.CHANGE, changeColor);
function changeColor(event:Event):void {
//just a couple of traces to show you a couple of information on the current combo box items.
trace(my_ComboBox.selectedIndex);
trace(my_ComboBox.selectedItem.label);
//an if statement telling flash if the combo box label blue is selected then the box movieclip should change the frame to 1.
if (my_ComboBox.selectedItem.label == "Blue") {
trace("is blue");
box_mc.gotoAndStop(1)
//an if statement telling flash if the combobox label green is selected then the box movieclip should change the frame to 2
} else if (my_ComboBox.selectedItem.label == "Green") {
trace("is green");
box_mc.gotoAndStop(2)
}
}
Now that we how we worked with the combo box, how to call a function when we select another item from the dropdown list, and used it to make some changes on the stage.
Now just for fun I added a small function where you can add your own items to the combo box.
// first and eventlistener to listen to when someone click the button, then it calls a function.
my_btn.addEventListener(MouseEvent.CLICK, addToCombo);
// this is the function, the function basically adds an item to the combo box, containing the my_input text from the textbox.
function addToCombo(event:Event):void {
my_ComboBox.addItem({label:my_input.text});
}