About Me

Friday, 13 April 2012

Flash Forms

Flash Forms

Flash is great for showing movies and entertaining animations, but did you also know that you can gather information from your users with the use of Flash? Built into Macromedia Flash is the capability to do everything you can do with HTML forms.


This lesson will create a Flash Form that can be processed by ASP, PHP, or anything else that you want to use to process Form Data.

Flash Static Text Fields

Before we begin with the nitty gritty task of creating the form, let's lay out some titles for the inputs we will soon have. In this example we will be making a form to collect a user's name and home city. Using the Text Tool from the Tools window let's make two Static Text Fields with a Font of _sans and a size of 12.

Create two text input fields with the text "Name:" and "Homecity:". Your text fields should look something like this:

Now let's make sure they are lined up properly. With the arrow tool drag a box around both text fields to select them, then choose from the menu Modify < Align < Right to get a clean lineup.

Creating Flash Input Fields

Now let's gather some data! With the Text Tool selected, choose the following from the Properties window:
Input Text with a Font of _sans and a size of 12.

Create two input boxes to the right of Name: and Home: that look something like this:

Now get them aligned by selecting both boxes with the arrow tool and going to the menu and choosing Modify < Align < Left

Creating Flash Input Variables

If we are going to send this data to another web page, we are going to need access to the contents of these input fields. Flash uses variable names as a way to access the values that are contained in input text fields. Variable names are assigned in the Properties window when you have the text input field selected.

Use the arrow tool to select the text input field to the right of Name: and set Var: field to "Name".

Select Home's input and name it "Home".

Creating a Flash Submit Button

We're almost done! We just need to create the Send button and tell Flash the URL of the form data processor and that'll be it.
To expedite this part of the lesson we are going to use Macromedia Flash's premade buttons. To access these buttons go to the Flash menu Windows < Common Libraries < Buttons and you should see this window popup.

Open the "buttons bar" directory and select the "bar blue" button.

Drag and drop this button to bottom right corner of your Stage like we have done.

The button currently reads "Enter" which is not appropriate for our form. To change the text that is displayed on the button, double click the button with the arrow tool to bring up the button edit mode.

Using the Text Tool from the Tools window select the text "Enter" contained within the button and replace it with "Submit".

Exit out of button edit mode by choosing from the Flash menu Edit < Document (shortcut: Ctrl + E).

Adding Flash Action getURL

We are now going to add an action to our button, so when it is clicked it will send the data contained in the input fields to a web page that will process the data. Using the arrow tool select the button and open up the Actions window: Window < Actions. Navigate to the getURL action.

Make sure that Script Assist is turned on and then double click getURL to bring up the ActionScript wizard for getURL.

It is important to note at this time that this form will function exactly like an HTML Form, so we will configure it just like we would an HTML Form. If you need a refresher on how HTML Forms work check out our HTML Form Lesson. We will be using the POST method in this form, so your processor will need to get data using POST. Check out ASP Forms POST to learn how to create an ASP page to process POST data.
Enter in the following information to the fields and you'll be done!
  • URL: "http://www.example.com/processer.php"
  • Window: ""
  • Variables: "Send Using POST"

Note: You will need to replace the URL with the actual location of your Form Data processor. http://www.example.com/processer.php does not exist.

0 comments:

Post a Comment