Flash MX in Forms

In Flash MX, the Text Tool and Flash components such as CheckBox, RadioButton, ListBox and ComboBox, provide HTML form-like elements to gather user data on the Web. However, the methodology to send this data to a server-side script (which may, in turn, process and store this data in a database) is different. This involves using ActionScript to send the data that has been captured by the Flash components. 

STEP ONE

Set up the stage



Launch Flash MX and drag-n-drop the Text Tool on to the stage. Set its instance name (not the Var) to textfield. Click on Show Border Around Text and for the Text type select Input Text. 

Click on Window>Component and, from the Components panel, drag-n-drop ComboBox and ListBox component on to the stage. Set the instance name to combobox and listbox, respectively. Populate these components with items using their Labels and Data properties. 

Drag-n-drop two instances of RadioButton component on to the stage. By default the two radio buttons are grouped under the name radioGroup (Group Name). Set the data property of the first button to radio1 and that of the second button to radio2. Next, drop an instance of the CheckBox component onto the stage and set its instance name to checkbox. 

Create a button clip or select a button from the library and drop it on to the stage. This will be the submit button of our Flash form. Set its instance name to submit. A click on this button must send the form data to a server-side script. 

STEP TWO

Set up submit action



Right click on the button and select Actions. In the Actions panel, key in the following.

on (release){



}

The above code snippet called ‘action handler’ is executed when the button is clicked. All the Actionscript statements mentioned below must be contained within the opening ( { ) and the closing braces ( } ). 

STEP THREE

Get data 



Next, key in the following 



ActionScript. 






formdata= new loadvars( );



formdata.textfielddata=textfield.text;


formdata.checkbox=checkbox.getvalue( );


formdata.radio=radioGroup.getvalue( );


formdata.listbox=listbox.getvalue();


formdata.combobox=combobox.getvalue();

The first statement creates a LoadVars object, namely formdata, which will be used to store data filled in the Flash Form and send it to the server-side script. A LoadVars object can also store the data that is sent back by the server, as you will see later. The next statements store the data keyed in or selected in the components into the formdata. For a Text Tool, the text property gives the text entered into the box. For list box and combo box, the getvalue( ) function gives the Data corresponding to the selected Label. The getvalue( ) function for a RadioGroup gives the data property (set to radio1 and radio2 in our case) of the selected radio button. And the getvalue( ) function of a checkbox gives true if the checkbox is ticked, else false. 

Note the names following the dot suffix to formdata, namely textfield, checkbox, radio, listbox and combobox of the formdata. The data keyed in or selected in the components will be available to the server-side script through these names. That is, these names serve the same purpose as the names given to the form elements in a HTML form. 

STEP FOUR

Dispatch data 



Key in the following.







formdata.send(“process.aspx”,”_self”,”POST”);

The send functions dispatches the collected data to a server-side script process.aspx, an ASP.NET script. The _self specifies to load the script page in the same page as the Flash movie. POST specifies to send the data via HTTP POST method (as opposed to GET method). 

STEP FIVE

Write server script



In the ASP.NET page, you can access the data as







Request.Form(“textfield”) ‘ text keyed in the text tool



Request.Form(“checkbox”) ‘ true or false depending on whether the checkbox is checked


Request.Form(“radio”) ‘ the data property of the selected radio button 


Request.Form(“listbox”) ‘ the Data corresponding to the selected label of the listbox


Request.Form(“combobox”) ‘the Data corresponding to the selected label of the combo box

As an example we have used ASP.NET code for server-side scripting. Given the name of the form elements, you can use your preferred scripting language. 

RETAIN FLASH

The problem with the above method is that when you click on the button, the browser unloads the Flash movie and loads the server page, usually HTML. But, if you don’t want to escape the Flash environment, then modify the statement

formdata.send(“process.aspx”,”_self”,”POST”);

to

formdata.sendandload(“process.aspx”,resultdata,”POST”);

Here, resultdata is a LoadVars object which is created using ‘new LoadVars( )’. The above statement sends the data in formdata to the script process.aspx and stores the result returned by the script in the resultdata. The server-side script must exhibit the result as name-value pair. For example,

Response.Write(“&result=success”);

Or,







Response.Write(“&result=error”); ‘ in case of any error like database error

To pass another name-value pair, append it to the first pair separated by an ampersand (&) as follows







Response.Write(“&result=success&foo=blah”);

To display the data returned from the script in your Flash movie, insert the following line before the statement 

formdata.sendandload.



resultdata = new LoadVars( );


resultdata.onload=showresult;

The first line creates the LoadVars object. As said, the server-script result is stored in resultdata. But, script execution may take time. Hence, we must proceed to showing the result only when the server script has finished execution and the resultdata is filled with the result. For this, we specify, through the second statement, that when the resultdata is loaded with data then execute a function named showresult. The showresult function will look something as below.

function showresult(executed)



{


if(executed){


// show resultdata.result


}


else{


/ show error 


}

Note that the that above code must also be within the opening and closing braces of on(release). The function showresult gets an implicit parameter (named ‘executed’ in this case), which indicates whether the server-side script actually got executed. If the script got executed, then we process further with displaying the data returned by the server script, else we display an error message in the Flash movie. Note that we get the data returned by the script as







resultdata.result



resultdata.foo

This will give a ‘success’ (or ‘error’) and ‘blah’, respectively. 

We have seen how you can blend your Flash creativity with some ActionScripting and server-side scripting to come up with data-enabled Flash sites. 

Shekhar Govindarajan