Building Web Forms In Flash - Alien Invasion (
Page 3 of 6 )
If you're using the latest
version of Flash, Flash MX, you'll be happy to hear that Macromedia's included a
bunch of new form controls in it. These controls allow you to build ever more
complex forms, including forms containing list boxes, radio buttons and check
boxes.
To access these, use the Window -> Components command to pop up
a panel containing these new form components.

Let's build a simple form using some of these
components. Pop open a new Flash movie, and add a couple of static text boxes to
it

Next, add form input fields next to
each of these - name the corresponding variables "name" and "species"
respectively.

How about checking the
species type as well? Drag a couple of radio button instances from the
Components panel into your form,

and click
on each one to set the properties for it.
In the Properties panel that
opens up, click the Parameters tab and set the label for each radio
button.

The label attached to the radio
button instance on the Stage should change simultaneously.

Also set the group name for the radio buttons. Since
this is an either-or choice, you should make sure that both radio buttons have
the same group name - I've used "speciesType".

Next, how about adding a list box? Drag and drop a
copy of the Combo Box symbol from the Components panel into the Stage. Name it
"residence".

At this point, the box
doesn't have any values in it - but you can fix that by popping open its
Properties panel, going to the Parameters section, and filling up the Labels and
Data sections. The Labels section contains the items to be displayed within the
box, while the Data section contains the corresponding values to be sent to the
server-side script.

And here's what the
combo box should look like once you're done.

Finally, we need a button to actually submit the form.
Pull out a Push Button symbol instance from the Components panel, and add it to
your almost-complete form. Alter the label via the Properties panel, so that it
says something a little more helpful.

While in the Properties section, add a click event
handler to the form. This is an ActionScript function that is invoked whenever
the button is clicked.

At the end of all
this activity, here's what your form should look like: