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:

Next: Loading Up >>
 

More Flash Articles
More By icarus, (c) Melonfire

Comments On: Building Web Forms In Flash

>>> Be the FIRST to comment on this article!