[FLASH] Flash Forms

Sources: httphttps://www.tizag.com/flashTutorial/flashforms.php
Author: tizag.com
Version: Macromedia Flash 5
Objectives: Using Load Movie to load external movies as part of a Flash website.
Tools & Techniques: Load Movie, loadMovie, levels, buttons

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. If you would like to learn more about processing Form Data with PHP or ASP see our PHP Form Data Processing lesson or our ASP Form Data Processing Lesson.

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.

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

fform1static

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.

fform1static2

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.

fformstaticproperties

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

fform2inputalign

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.

fforminputvariableblank
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!

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

Test It Out!

Now that you have completed this long and arduous tutorial, go ahead and choose Control < Test Movie from the menu and check out your Flash Form.

 ‘;’ type=’text/javascript’>

Share this post! Let them know how awesome is this!
Facebook
Twitter
LinkedIn
WhatsApp
Email