Building Web Forms In Flash (
Page 1 of 6 )
In addition to building animation clips on the fly, Flash can
also be used to build simple Web forms to collect user data on your Web
site. This article demonstrates the process, showing you how to build
simple Flash forms and link them to server-side scripts for further
processing."Flash forms!", yelled the Developer, tugging at his goatee in exasperation.
"Flash forms? Flash? Forms? Are you nuts? Has you brain gone AWOL? Do you know
how long they'll take to load up? And how slow they'll be? And...listen, go away
and bug someone else, willya? Some of us have work to do!"
If your
reaction to the thought of building Web-based forms in Flash is something
similar, you probably don't want to read the rest of this article. Close your
browser, take a pill (in fact, take a couple - you'll sleep better) and consider
signing up for a short course in yoga.
If, on the other hand, the thought
of using Flash to collect user input intrigues you, keep reading. Over the next
few pages, I'll be showing you how you can build Flash movie clips that also
have the ability to communicate with server-side scripts, both to send and
retrieve data. And no, it won't give you heartburn.{mospagebreak title=Welcome
To The Matrix} Before we get started with building a Flash form, you need to
know a little theory.
Most HTML forms send the data they collect from the
user to a server-side script, which is actually responsible for processing the
data. This server-side script, usually written in a language like Perl or PHP,
actually takes care of doing something useful with the data - for example, using
it to build a database query, writing it to a file, and/or generating a result
page.
Flash forms work much like HTML forms, except that the constructs
used to build them are a little different. A Flash form can be programmed to
connect to a specific server-side script, and to pass form variables to it via
either GET or POST methods.
In order to better understand this, let's
consider a simple example. Pop open Flash, create a new movie and then create a
new Button symbol. Name it "textBox".
In
the Symbol Editor, define a rectangular textbox,
and then use the Windows -> Panels -> Text
Properties panel to turn it into an input text box. Set a variable name for this
text box as well - I've called mine "name".
This is the form variable which will store the user's
input, and which will be passed forward to the server-side script.
Back
in the Stage, drag and drop a copy of this symbol into the workspace. Add some
descriptive text above it if you like.
Next, it's time to connect the text box with a
server-side script. Since I want the server-side script to be invoked when the
Flash form is submitted (or, in this case, when the user enters some data into
the text box and hits the Enter key), I need to add some ActionScript to the
symbol. Right-click the symbol instance, pop up the ActionScript editor and add
the following code to it:
on (keyPress "<Enter>") {
getURL ("matrix.php", "", "GET");
}
This is fairly self-explanatory, even if you've never
programmed in ActionScript before. When the form input box receives an Enter
keypress, it will invoke the URL "matrix.php", and submit the form data to that
URL via the GET method. It is then up to the server-side script to decide what
to do next.
Let's see what "matrix.php" looks like:
<html>
<body>
Welcome to the Matrix, <? echo $_GET['name'];?>
</body>
</html>
Extremely simple, this - all it does is accept the form data
from the Flash form, and print a simple Web page with a message incorporating
the form data. Note that the script references the data entered by the user into
the form input box via its variable name - you'll remember that I defined this
variable, "name", a couple steps back when first creating the
symbol.
Export the movie as a Flash SWF file, place it in an appropriate
location under your Web server root, and access it via your browser. Here's what
you should see:
Enter some data, and hit
the Enter key. The Flash form will submit your entered data to the "matrix.php"
script, and you'll see something like this:
Welcome to the Matrix, john
/ 304 
