Building Web Forms In Flash (Page 1 of 6 )
"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
Next: Access Granted >>
More Flash Articles
More By icarus, (c) Melonfire
/ 274 
