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:

   // The display function function radioDisplay (component) { radio = component.getValue() ; trace ( radio ) ; } // We assign this function to the group gender gender.setChangeHandler ("radioDisplay") ;

   [ 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.
 

2. 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:

   // populate the combobox for (i=1970;i<1990;i++) { birth.addItem (i) ; } // function to display the selection function comboDisplay (component) { combo = component.getSelectedItem().label ; trace ( combo ); } // We assign the function to the combobox birth.setChangeHandler ("comboDisplay") ;

   [ 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.

3. 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:

   // The labels in the listbox myLabels = new Array ("France", "US", "Germany", "New Zealand", "England", "China", "Japan", "Singapore", "Australia", "Dark side of the moon"); // Populate the listbox for (i in myLabels) { country.addItem (myLabels[i]) ; } // Display function function listDisplay (component) { list = component.getSelectedItem().label ; trace ( list ) ; } // You get the picture country.setChangeHandler ("listDisplay") ;

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.

4. 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:
    
   // Array of the instance names of the checkboxes myCheck = [flash,games,beer,sport,art]; // Function function checkDisplay(component) { var j,s; for(j in myCheck){ if(myCheck[j].getValue()) s += myCheck[j].getLabel()+"\n"; } checke="You like:\n" + ((s.length) ? s : "Nothing"); } // As usual... for (i=0;i<myCheck.length;i++) { myCheck[i].setChangeHandler ("checkDisplay") ; }

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.

5. 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.

   // The textarea is empty, so no scrollbar _root.bar._visible=false; // onChanged function comment.onChanged = function(){ if (this.maxscroll>1) { _root.bar._visible=true; } else _root.bar._visible=false; }

   _root.bar._visible=false;

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) _root.bar._visible=true;
else _root.bar._visible=false;

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.

6. 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:

   // Reset button function onReset = function () { // radio buttons male.setValue(false); female.setValue(false); other.setValue(false); // listbox birth.setSelectedIndex(0); // combobox country.setScrollPosition(0); country.setSelectedIndices(null); // checkbox var j; for (j in myCheck) { myCheck[j].setValue(false); } // text comment.text = ""; bar._visible = false; }

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).

onSubmit=function(){
    texte=comment.text ;
    _root.gotoAndStop("result");
}

The complete code in frame 1 is:

stop() ; // 1. Radion buttons // ----------------- // The display function function radioDisplay (component) { radio = component.getValue() ; } // We assign this function to the group gender gender.setChangeHandler ("radioDisplay") ; // 2. Combobox // ----------- // populate the combobox for (i=1970;i<1990;i++) { birth.addItem (i) ; } // function to display the selection function comboDisplay (component) { combo = component.getSelectedItem().label ; } // We assign the function to the combobox birth.setChangeHandler ("comboDisplay") ; // 3. Listbox // ---------- // The labels in the listbox myLabels = new Array ("France","US","Germany","New Zealand","England","China","Japan","Singapore","Australia","Dark side of the moon"); // Populate the listbox for (i=0;i<myLabels.length;i++) { country.addItem (myLabels[i]) ; } // Display function function listDisplay (component) { list = component.getSelectedItem().label ; } // You get the picture country.setChangeHandler ("listDisplay") ; // 4. Checkbox // ----------- // Array of the instance names of the checkboxes myCheck = [flash,games,beer,sport,art]; // Function function checkDisplay(component) { var j,s; for(j in myCheck){ if(myCheck[j].getValue()) s += myCheck[j].getLabel()+"\n"; } checke = "You like: " + ((s.length) ? s : "Nothing"); } // As usual... for (i=0;i<myCheck.length;i++) { myCheck[i].setChangeHandler ("checkDisplay") ; } // 5. Scrollbar // ------------ // The textarea is empty, so no scrollbar _root.bar._visible=false; // onChanged function comment.onChanged = function(){ if (this.maxscroll>1) { _root.bar._visible=true; } else _root.bar._visible=false; } // 6. Push Buttons // --------------- // Reset button function onReset = function () { // radio buttons male.setValue(false); female.setValue(false); other.setValue(false); // listbox birth.setSelectedIndex(0); // combobox country.setScrollPosition(0); country.setSelectedIndices(null); // checkbox var j; for (j in myCheck) { myCheck[j].setValue(false); } // text comment.text = ""; bar._visible = false; } // Submit button function onSubmit = function () { texte = comment.text; _root.gotoAndStop ("result"); }

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):

stop(); result.text = "You are a "+radio+"\n"; result.text+= "You are from "+list+"\n"; result.text+= "You were born in "+combo+"\n"; result.text+= checke; result.text+= "You wrote a nice word for us:\n"+texte;

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:

   // New style sheet pomStyle = new FStyleFormat(); // Attributes of the style sheet pomStyle.face = 0xffCC33; pomStyle.background = 0xFFCC33; pomStyle.arrow = 0x000000; pomStyle.scrollTrack = 0xFFCC33; pomStyle.highlight = 0xffcc33; pomStyle.darkshadow = 0xffcc33; pomStyle.selection = 0x993300; pomStyle.textColor = 0x999999;

    

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

   // We apply pomStyle to the components pomStyle.addListener(bar); pomStyle.addListener(country); pomStyle.addListener(flash); pomStyle.addListener(games); pomStyle.addListener(beer); pomStyle.addListener(sport); pomStyle.addListener(art); pomStyle.addListener(male); pomStyle.addListener(female); pomStyle.addListener(other); pomStyle.addListener(birth); pomStyle.addListener(submit); pomStyle.addListener(reset);

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:

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