Flash Tutorials: Flash & PHP Forms

Free Flash Tutorials

Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Flash & PHP Forms

304 Interaction
Flash Compatibility: MX 2004 (Principles and ActionScript are the same in Flash MX & Flash 5)

Written by: Phil Schulz

Length: 2400 words

Assumed Knowledge: Familiarity with Flash and uploading files to a web server would be useful.

Level: Medium to Hard

Access: Members Bonus Tutorial. Full text

Feedback forms are an essential part of any site. They are quite straight forward in Flash except that Flash needs a little support from a scripting language.

The scripting language actually emails the from's content. Flash cannot do this. In this instance I have selected to use PHP as the scripting language. There are quite a few other scripting languages that you could use. I have selected PHP because it is a free and is also the most widely used scripting language on the Net.

Note: Scripting languages such as PHP are Server Side. That is your web site controls the script. Flash is not Server Side but Client Side. This means that Flash Movies are controlled by the users Browser or the Clients computer. You do not know the set up of the local computer which is why Flash cannot send an email form. Flash can only collect the information. The PHP (or other scripting language) then sends the form info.

Important Note: For this Form to work you will need to have a PHP Enabled Web Server. Ask your web provider to supply this. Almost all web host companies will supply this but some may charge a small fee.

Cross Ref: For more info on using PHP see: Intro to PHP and Flash

Example: Download the Flash file IntAct 304a (5 Zipped files)

Example of a Flash - PHP form.

Try the following in the Form above:

Try clicking on the submit button after only filling in one of two fields (white boxes).
- The form should prompt you to fill in the minimum 3 sections.
Try clicking on the reset button
- The form should clear anything you have typed into the various fields.

Step one: Setting up the Document

Open a new: Flash Movie
Go to: Modify > Document (Ctrl J)
Set the size to: 520 x 220 pixels
If you wish select a: Background Colour
Click: OK

Step two: Setting up the Input Boxes

Input boxes are the areas that the user types into. In HTML they are often called Fields. Whatever you call them they amount to the same thing: An area that the user can type into like this:

Select the Text Tool:
Drag out a small Text Box:
Return to the standard selection tool:
If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
In the Property Inspector select Input Text:
Select an appropriate font, font style, size and colour:
If your Property Inspector is in collapsed view, click on the down arrow in the bottom right corner of the Property panel to expand the panel. If you have an up arrow your panel is already expanded.
For line type select: Single Line.
Input text has to be Selectable: (You do not need to switch it on as input text is always selectable.)
Select: Show Borders Around Text.
For Variable Name type: nameField

The Variable Name is: nameField

Note: The reason I have not called the Variable 'nameField' as opposed to 'name' is because the word 'name' is a ActionScript Keyword and could cause confusion.

Important: There is no Instance Name only a Variable Name.
For Maximum Characters type: 100

This means that someone cannot type in a name with more than 100 characters.

When you have finished your Property Inspector should look like this.

Property Inspector for the Input Box.
Create another five of these Input boxes so that your Stage looks like this:

The Main Stage with six Input Boxes.
Give your six Input Boxes the following Variable Names:

nameField phoneField

emailField mobileField

companyField faxField
Create an additional two more Input Boxes but this time when you drag them out make them much taller and select: MultiLine

Your Stage should now look like this.
Give your last two Input Boxes the following Variable Names:

addressField messageField

Step three: Creating the Form Text and Buttons

Select the Text tool:
In the Property Inspector set the Text option back to: Static Text

Resetting the Typing tool back to Static Text.

Note: If you fail to do this any text that you subsequently type will be set as an Input Box. If you fail to reset the Property Inspector back to Static Text anything you type can always be reset via the Property Inspector at a latter time.

Type any descriptive text that you may need:

My Sage with Form field labels.
Now that you have visible labels I would suggest that you check that your Variable Names, which are off course not visible, are correct. You can do that by clicking on each of the Input Boxes in turn and looking in the Property Inspector. Check your: Variable Names
Create two buttons and place them towards the bottom left of the Stage:

Reset and Submit buttons are now in place.

Note: If you do not wish to create your own buttons simply pull two buttons out of the Common Library and type a label next to them. To open the Button Library go to: Window > Other Panels > Common Libraries > Buttons

Cross Ref: To learn more about creating your own buttons see the tutorial on: Buttons

Your Stage is now got all the standard items that you will find on any form.

Step four: The Error Box

The Error box is the bit that you hope that no-one every sees! If some one does make an error it will look like this:

The Error dialog Box.

At a latter stage it will be necessary for us to name the Error Box so that it maybe referred too in the ActionScript. In order to be able to do this the box needs to be a Symbol.

Go to: Insert > New Symbol (Ctrl F8)
Type the Name: Error Box MC
Select behavior: Movie Clip
Click: OK
Draw and Type on Stage until you have something similar to this:

The Error Box without the button in the top right corner.
Create a Button (or select one from the Button Library) and place it in the top left corner of the Error box:

Error Box with the close button.
Attach the following ActionScript to the Close Button:

on (release) {
this._x = 2000;
}

This ActionScript moves the Error Box off Stage so that it is not visible. In this case to x position 2000. The Error Box is now finished and is ready to be placed on the Main Stage.
If the Edit Bar is closed, open it: Window > Toolbars > Edit Bar
To return to the Main Stage click on the Scene 1 Tab in the Edit Bar :

It is important that the Error Box sits on top of the form when it comes into view. Yes it is possible to get this the wrong way around!! The easiest way of ensuring that the Error Box is no top of the form is to place it in it's own layer above the form.
In the Timeline rename Layer 1 to: Form
Create a New Layer by clicking on the Insert Layer Button:
Rename this new Layer: Error Box

The Layers in your Timeline should look like this:

The Error Layer is above the Form Layer.
Open the Library: Window > Library (F11)
Select the: Error Layer
Drag the Error Box MC out of the Library: Error Box MC
Using the Selection Tool drag the Error box MC right off to the side of the Stage:

Error Box is placed well to the side of the form.

The reason that you place the Error Box to the side off the Form is so that by default it will not be visible. Do not place the Error Box MC to the top or bottom of the Form but only to the side. This is because the ActionScript only controls the X position (left - right) and the height (Y position) of the Error Box remains the same before and after the box moves. If the Box was too low (or too high) you would need to state a Y position as well as an X position.
In the Property Inspector give the Error box the Instance Name: errorBox

Step five: The ActionScript in frame 1

Place the following ActionScript in frame 1:

stop();
// These names must be the same as the dynamic input fields & must be on a single line in the Actions box:
fieldname = new Array(0, "nameField", "companyField", "addressField", "emailField", "phoneField", "mobileField", "faxField", "messageField");

// This must be in the same order except with a question mark? like this:
awop = new Array(0, "nameField?", "companyField?", "addressField?", "emailField?", "phoneField?", "mobileField?", "faxField?", "messageField?");

Step six: The Reset ActionScript

Place the following ActionScript onto the Reset Button:

// When the button is clicked all the fields are cleared.
// Also the error box (if visible) is placed 2000 pixels off Stage.
on (release) {
    nameField = "";
    messageField = "";
    companyField = "";
    addressField = "";
    phoneField = "";
    mobileField = "";
    faxField = "";
    emailField = "";
    errorBox._x= 2000;
}

Step seven: The Submit ActionScript

Place the following ActionScript onto the Submit Button:

// When the button is clicked and if any of the fields listed are empty display the Error Box.
on (release) {
    if (nameField eq "" || emailField eq "" || messageField eq "") {
        errorBox._x= 100;

    // Otherwise process the form and go to frame 2
    } else {
        loadVariablesNum("process.php", 0, "POST");
        gotoAndStop(2);
    }
}

Note: In the ActionScript above to type the line: | use: Shift + Back Slash \

Step eight: Frame 2

In frame two of the Movie it is possible to give the user feed back so that they know that the form has been sent correctly.

In the Timeline right click (Mac: Ctrl click) and select: Insert Blank Keyframe
Select the Text Tool and type the following using standard: Static Text

Static Text on frame 2.
In the Property Inspector Select: Dynamic Text
Drag out a Dynamic Text Box like this:

Dynamic Text Box next to the intro: Dear
In the Property Inspector give the Text Box the Variable Name: usersName
In the Timeline in frame 2 place the following Actions:

// Displays the name the user typed into the from
usersName=nameField + ",";
If the Library is closed, open it: Window > Library (F11)
Drag out a copy of the: Reset Button

Reset button in place.
Attach the follow Actions to the reset button:

// Clears the fields, moves the Error box and returns the user to Frame 1
on (release) {
    nameField = "";
    messageField = "";
    companyField = "";
    addressField = "";
    phoneField = "";
    mobileField = "";
    faxField = "";
    emailField = "";
    errorBox._x= 2000;
    gotoAndStop(1);
}

Step nine:Saving and Exporting the Flash Movie

The Flash Movie is now Finished. The only thing remaining to do is to publish the Flash Movie, create the PHP and test that it all works.

Go to: File > Save
Go to: File > Publish Settings
Select the following:
Click: Publish
Click: OK

You can now Close your Flash Movie and close Flash.

Step ten: PHP Document 1 - global.inc.php

There are two PHP documents that you will need. This first one is basically a default document that is the same irrespective of the form.

Open Notepad (if you use Windows) or a similar Plain Text Editor: Start > Programs > Accessories > NotePad
Copy and paste the following into the Editor:

<?php
function pt_register()
{
$num_args = func_num_args();
$vars = array();

if ($num_args >= 2) {
$method = strtoupper(func_get_arg(0));

if (($method != 'SESSION') && ($method != 'GET') && ($method != 'POST') && ($method != 'SERVER') && ($method != 'COOKIE') && ($method != 'ENV')) {
die('The first argument of pt_register must be one of the following: GET, POST, SESSION, SERVER, COOKIE, or ENV');
}

$varname = "HTTP_{$method}_VARS";
global ${$varname};

for ($i = 1; $i < $num_args; $i++) {
$parameter = func_get_arg($i);

if (isset(${$varname}[$parameter])) {
global $$parameter;
$$parameter = ${$varname}[$parameter];
}

}

} else {
die('You must specify at least two arguments');
}

}

?>
Save the file into the same location as the Flash Movie. Name the file: global.inc.php

Step eleven: PHP Document 2 - process.php

Copy and paste the following into your Text Editor:

<?php
// Names below must match the names used used for your input boxes (fields) in Flash

include("global.inc.php");
$errors=0;
$error="The following errors occurred while processing your form input.<ul>";
pt_register('POST','nameField');
pt_register('POST','emailField');
pt_register('POST','companyField');
pt_register('POST','addressField');
pt_register('POST','phoneField');
pt_register('POST','mobileField');
pt_register('POST','faxField');
pt_register('POST','messageField');
if($errors==1) echo $error;
else{
$where_form_is="http".($HTTP_SERVER_VARS["HTTPS"]=="on"?"s":"")."://".$SERVER_NAME.strrev(strstr(strrev($PHP_SELF),"/"));
// Useful if you need today's date:
//$today = Time();
//$Date = date("y-m-d");

// Names below must match the names used used for your input boxes (fields) in Flash
$message="
Enquiry Form:

Name: ".$nameField."
Email: ".$emailField."
Company: ".$companyField."
Address: ".$addressField."
Phone: ".$phoneField."
Mobile: ".$mobileField."
Fax: ".$faxField."
Message: ".$messageField."
";
$message = stripslashes($message);

// Fill in the details below for where you want the email to go to
mail("my@email.com","Website Form Reply ",$message,"From: www.myWebSite.com");

}
?>
Save the file into the same location as the Flash Movie. Name the file: process.php

Step twelve: Testing the Form

Just to remind you this form will not work unless your web server is PHP enabled. For the same reason you cannot test this form from your own computer (unless you are running a PHP web server - which is not likely). So you will need to upload the following files to you web server:

The Flash SWF file: form.swf (or similar)
The web page with the form on: form.html (or similar)
The process file: process.php
The global file: global.inc.php

You should then be able to navigate to the appropriate web page using you Internet Explorer or an alternative Browser and test the form.

Hopefully it should work perfectly first time !!

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

	nameField	phoneField
	emailField	mobileField
	companyField	faxField