This tutorial is more or less a sequel to Kirupa's tutorial about the scrollbar and mine about the listbox. Please read them carefully before attempting this one.

I will show you in this tutorial how to:

set up the form with 6 of Macromedia's components

get the input from the user with Actionscript

change very easily the looks of your form using Actionscript

We are going to make a form asking for information about the user. He will answer a certain number of questions, and when he presses the submit button, we will get all his answers, and go to an answer frame that processes the input data.

This is what the form is going to look like when everything is finished:

[ fill the form and press the submit button ]

To see more easily how it works, we are going to use the trace function to display in the output window what the users inputs.

Creating the form:

1. The general layout
   Create a new movie in Flash MX. Set the width and height to 500. You can choose a background color, a background image, anything you like. I put a yellow background (#FFFF00). Name the first layer components. Also add 2 layers in the timeline. Name them code and labels.
   In the labels layer, add a keyframe on frame 5 by pressing F6 and add a frame on frame 10 by pressing F5. Add a keyframe on frame 5 in the code layer too. Your timeline should look like this:
   

   

   [ the timeline ]
    

2. Actions and labels
   Open your Actions panel. Select the first frame of the code layer and put the stop(); action. Do the same in frame 5.
   Now open the Properties panel. In the Labels layer, select frame 1 and enter the frame label form. In frame 5 enter the frame label result. Your timeline should now look like this:

   

   [ the timeline again ]
    

3. The components
   All the components are going to be added in frame 1 of the components layer.

   • Drag and drop a radio button in the top left end of the scene. Then press Ctrl and drag it to duplicate it. Do it once more to have 3 radio buttons.

   • Drag and drop a combobox on the scene under the radio buttons.
     Drag and drop a listbox.

   • Drag and drop two push buttons.

   • Drag and drop a check box and then duplicate it 5 times like we did with the radio buttons.

   • Put an input text and drag and drop the scrollbar component on it.
      

This is pretty much how the form is going to look like so try and make it look good. Personally I use the properties panel all the time to place precisely my objects on the scene.

What we have to do now is populate the components, and get the input of the user. We will do this with Actionscript. Click the next section link to proceed with adding the Actionscript.

---

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.

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

pom

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇