Creating an AS3 Form in Flash
This page explains how to add form elements to your stage and the required parameters for use with the EZform component when publishing for Actionscript 3. 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 User Interface folder in the Components panel and drop them on the stage.
|
| Parameter |
Explanation |
| value |
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 "User Interface" (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 "dataProvider" 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).
The value of each row is the value that will be sent by the ezForm, the label of each row is the string that will be displayed by the comboxBox in the form.
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 and labels you wish to use. |
|
|
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 "User Interface" (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 "dataProvider" 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).
The value in each row will be sent by the ezForm if the row is selected. The label of each row is the label that will be displayed in the List component as part of the form.
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 and labels you wish to use. |
|
|
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 "User Interface" (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 "User Interface" (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 onto the frame of your movie where the form appears.
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 and instance name
|
|
TOP
