Converting Basic HTML Forms to Flash

Converting HTML Forms To Flash

OK boys and girls, this one warrants a tutorial based on the number of requests we get on the forums and about the place. Most people aren't server-side scripters and yet they like to be able to use things like CGI and PHP for simple things like contact forms and the like. And often as not we get people posting these huge reams of HTML form code, accompanied by "How do I do this in Flash? Thanks!"

Converting HTML forms to Flash is pretty easy (for the most part). The thing to remember is that (in general) the server-side script which processes the data you send doesn't know or care where the data came from, it just knows what it has to do once it gets it. With that in mind, it is safe to say that we can simply replicate the HTML form in Flash and call the same script for processing, and everything should work out just fine.

Most HTML form elements can be replicated in Flash based on rules. Let's make up a basic HTML form. Something simple. OK here's a simple HTML form which takes one input via a text field, has one hidden field, and submits using POST to some backend script. (Don't try and run it, it doesn't work.)

The HTML source to this form is about as simple as it comes. See it here.

So here's where our 'rules' come in. First the input field. Flash's equivalent of this is... you'll never guess it... an Input field! The only trick is that you have to give the field the variable name the form processor expects. In this case, line 3 specifies that the input field stores the variable 'myName' so you create your Flash input field (on the main stage) with the variable 'myName' assigned to it. Next the hidden field. Again this is really easy. Line 5 shows we have a hidden field, marked by the variable 'secret', whose value in this case is the shamelessly self-promoting string, "ActionScripts.org rules!". This is even easier to replicate in Flash, since it's just a variable with a non-editable value. In the Actions panel on the main stage, enter:

secret = "ActionScripts.org rules!";