Components to Create a Form
         written by ilyas usal aka pom

This page will include Actionscript and related information. If you have not completed page one of this tutorial, click here.

Actionscript: Making it All Work

  1. The radio buttons
    Radio buttons are used when there can only be one answer to a question.
    We have a couple of things to change there. First the labels of the radio buttons, in our case the gender of the user. Double-click the labels (in the Properties panel) and change them into: male, female, other.

    The second important thing is the group name. In case you have several sets of radio buttons, Flash has to know which radio button goes with which other so that only one can be selected. You can check that name in the Properties panel. Change all 3 of them to gender.

    Finally give them instance names, male, female and other.

    Now we have to know which button is checked. This is where Actionscript helps us. Add the following lines to the first frame of the code layer:

    [ hum... how does this work ? ]

This is quite simple really, and it looks like what we did in the listbox tutorial. First we define a function, radioDisplay, that will trace the selected button:

function radioDisplay (component) {
    radio = component.getValue() ;

The function takes as an argument the component to which we are going to apply it. The getValue() method gets the selected radio button in a group, that is to say exactly what we want. We trace it to see it more clearly. Save your work and test the animation.

  1. The combobox
    From now on, it's pretty much the same. Except now, we are also going to populate the combobox with Actionscript. Give it the instance name birth. Under the script you wrote previously, add:

    [ looks familiar ? ]

    birth.addItem (i);
    combo = component.getSelectedItem().label ;

First we introduce the addItem() method, which adds an item to the combobox. Simple enough. The rest is the same as previously, except we use the getSelectedItem() method, equivalent to the getValue() method. One last thing, this method returns the label and the data of the Item selected, but all we want is the label, hence the .label syntax.

  1. The listbox
    You can refer to the tutorial I mentioned for further information about the listbox component. All you have to do here is give the listbox an instance name, country, and add this script in the first frame of the code layer:

I'm sure you can see that it's exactly the same thing as previously. If you want to add elements in your listbox, all you have to do is put them in the array myLabels.

  1. The checkbox
    The checkbox is the most painful component to use (for me at least). The reason is that there is no function that will give you all the checkboxes that have been checked. That's why you have to check them one by one.
    First we need to change the labels. I put a series of possible hobbies: Flash, Games, Beer, Sport and Art. Now you have to give an instance name to the checkboxes. I used the same as their label, lower case: flash, games... Add this code:

Basically, what we do here is check the status of all the checkboxes whenever the user checks one of them.

for(j in myCheck){
if(myCheck[j].getValue()) s += myCheck[j].getLabel()+"\n";
((s.length) ? s : "Nothing"));

  • 1st line: j will take the values 0, 1, 2, 3, 4 (because there are 5 elements in our array).

  • 2nd line: if the box we are currently looking at is checked, we put it's label in the string s

  • 3rd line: we trace the string s only if there is something in it. A?B:C; means if A is true then do B, else do C.

  1. The scrollbar
    Give the instance name comment to your textbox and bar to your scrollbar. We are going to make so that the scrollbar appears only if the text is long enough.;

When the movie loads, there is nothing in the text area, so there's no need for a scrollbar. That's why we set it as invisible.

comment.onChanged = function(){
if (this.maxscroll>1);

The onChanged method is not a simple method. It is quite similar to onMouseDown for instance, and will be executed whenever the user changes something in the text.
So when the user changes something, we check the maxscoll property. If it is >1, it means that the scroll is necessary. That's why we make the scrollbar visible.
Otherwise, we set it as invisible.

  1. The push buttons
    So we have a submit button and a reset button. You'll need to change their labels first, then give them the instance names submit and reset and finally change their Click Handlers into onSubmit and onReset (in the Properties panel). We will have to implement both functions, but now that we have seen how everything works, it won't be too difficult.

    Easy things first, the onReset function:

It looks complicated, but this is really simple: all I did was uncheck, empty and unselect all the components. You can refer to Macromedia's Actionscript Dictionary to see all the Components methods.

Now the onSubmit should be a walk in the park. We have all the information, so it will just take us to the frame labelled result (and get the input text).

    texte=comment.text ;

The complete code in frame 1 is:

Now insert a blank keyframe on frame 5 of the Component layer. Then put a dynamic text (a big one) that you will call result. Set it as multiline. We are going to put all the data coming from our components in there.

We have defined the variables radio, list, combo, checke and texte in the first frame. All we have to do is print them in the result frame (full code):

There !!! The form should be working now. But it's not over...

Set up a Style Sheet to Easily Change the Looks of Your Form
Flash MX has this wonderful new feature: you can "skin" your components, either using the skins provided by Macromedia, either by defining your own values. This is what we are going to see here. The object we will use is FStyleFormat(), or globalStyleFormet() if you want all your components to be affected by the style sheet.

  1. Setting up the style sheet
    You have to create a new FStyleFormat object, and define all its attributes. You can fin them all in the Actionscript Dictionary, and their names are pretty clear. In frame 1, put this code after the previous one:


  2. Applying it to the components of our movie
    Then you must register your components as listeners of this style:

There. I leave you free to modify the hexadecimal values to change the aspect of your form. You can also change the properties of the textbox, but it's not a component, so it is a little bit different.

// textbox
comment.backgroundColor = 0xFFCC33;

To check out the final source for this, click the following link:

download source for flash mx

There! Over for good! I hope you enjoyed this tutorial, even though it was *a bit* long.

If you want more of this, you can check this tutorial from Macromedia here. It also explains how to send the input to Coldfusion.



Previous Page

Discuss on


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.