Creating a Form in Flash

This page explains how to add form elements to your stage and the required parameters for use with the EZform component. The following form elements are explained here:
Static Text Field, Input Text Field, Radio Buttons, Combo Box, List, Check Box, Button

STATIC TEXT FIELD

Create labels for each field (such as Name, E-mail, Comments...) using the Text Tool.

 

 
Ensure that you create these labels in "static text" mode (fig. 1).

 

fig. 1

TOP

 

INPUT TEXT FIELD

Create input text fields alongside Name, E-mail and Comments using the same Text Tool that you used to create the labels, except this time, set the fields to be "input text". Adjust the size of the input text fields by double clicking on the fields (edit) and dragging the small square in the bottom right corner.
Each input field must be given an instance name (fig. 2). The instance name that you assign to the input fields will be the name that appears in the form response email.

fig. 2 - Setting input text field instance name

TOP

 

RADIO BUTTONS

 

Drag the radio buttons from the UI Components (in the Components panel) and drop them on the stage.

Note: You should not give the radio buttons instance names, unless you are using the Bit component radioButton in which case it IS necessary to give each radio button an instance name. The value of the Bit component radioButton will still be taken from the button label, regardless of its instance name.

 
Parameter Explanation
data The value that will appear in the form response email if this button is selected.
groupName Radio buttons work in sets of two or more called "groups". Radio buttons of the same subject must belong to the same group. In this example, these radio buttons are in a group named "Gender".

The groupName will appear as the title for this field in the form response email.
label The word that should appear on the form alongside this option.
labelPlacement The position of the label in relation to the radio button (left, right, top, bottom).
selected Choose "true" if the radio button should be selected by default. Only one radio button per group can be selected at a time.

fig. 3 - RadioButton component

 
"Male" radio button
parameters
"Female" radio button
parameters

TOP

 

COMBOBOX

 

 
Open the Component panel and locate "ComboBox" under "UI Components" (fig.4). Drag and drop the ComboBox component onto the stage.
The ComboBox must be given an instance name. The instance name that you assign (fig. 5) will be the name that appears in the form response email.
Click anywhere in the "labels" field of the ComboBox parameters (fig. 6a) to open the "values" box (fig. 6b).
Enter the list of choices which should appear in the ComboBox, in the value box that will open (fig. 6b). To add a new row, press the "+" button. Use the arrow buttons to change the order or appearance. Press "OK" once you have added all the values.

 

 



fig. 4 - ComboBox component

 



fig. 5 - ComboBox instance name

 



fig. 6a - ComboBox Parameters



fig. 6b - Entering ComboBox "labels"

TOP

 

LIST

 
Open the Component panel and locate "List" under "UI Components" (fig. 7). Drag and drop the List component onto the stage. You may wish to resize the List component to fit your form.
The List component must be given an instance name. The instance name that you assign (fig. 8) will be the name that appears in the form response email.
Click anywhere in the "labels" field of the List component parameters (fig.9a) to open the "values" box (fig. 9b).
Enter the list of choices which should appear in the List, in the value box that will open (fig.9b). To add a new row, press the "+" button. Use the arrow buttons to change the order or appearance. Press "OK" once you have added all the values.


fig. 7 - The List component

fig. 8 - List instance name

 



fig. 9a - List Parameters


fig. 9b - Entering list labels


TOP

 

CHECKBOX

 
Open the Component panel and locate "CheckBox" under "UI Components" (fig.10). Drag and drop the CheckBox component onto the stage. In this example, where there are three checkboxes, repeat this step until you have three checkboxes on the stage.
Each CheckBox must be given its own instance name. The instance name that you assign (fig. 11) will be the name that appears in the form response email.
Set the CheckBox parameters for each checkbox based on the settings in fig.12.

fig. 10 - The CheckBox component

fig. 11 - CheckBox instance names



fig. 12 - Example of CheckBox parameters


TOP

 

BUTTON

 
Open the Component panel and locate "Button" under "UI Components" (fig. 13).
 Drag and drop the Button component onto the stage.

Give the button an instance name. In this case we'll give it the name "submit" and set the button component parameters to match the settings in fig. 14.

To assign this button to submit the form (as defined in the "Basic Tutorial"), paste the following ActionScript into frame 1 of your main timeline:

submit.onRelease = function() {
   myForm.submitForm();
}

If you are using Actionscript 3, use this code instead:

import flash.events.MouseEvent;
submit.addEventListener(MouseEvent.CLICK, onMouseClick);
function onMouseClick(eo:MouseEvent):void {
 myForm.submitForm();
}

 



fig. 13 - The Button component



fig. 14 - Button parameters

 

TOP