Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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:

Step one: Setting up the Document

  1. Open a new: Flash Movie
  2. Go to: Modify > Document (Ctrl J)
  3. Set the size to: 520 x 220 pixels
  4. If you wish select a: Background Colour
  5. 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:

  1. Select the Text Tool:
  2. Drag out a small Text Box:
  3. Return to the standard selection tool:
  4. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
  5. In the Property Inspector select Input Text:



  6. Select an appropriate font, font style, size and colour:



  7. 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.

  8. For line type select: Single Line.



  9. Input text has to be Selectable: (You do not need to switch it on as input text is always selectable.)

  10. Select: Show Borders Around Text.

  11. 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.

  12. 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.
  13. Create another five of these Input boxes so that your Stage looks like this:


    The Main Stage with six Input Boxes.

  14. Give your six Input Boxes the following Variable Names:

      nameField phoneField
      emailField mobileField
      companyField faxField

  15. 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.

  16. Give your last two Input Boxes the following Variable Names:

      addressField messageField


Step three: Creating the Form Text and Buttons

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


    Resetting the Typing tool back to Static Text.
  3. 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.

  4. Type any descriptive text that you may need:


    My Sage with Form field labels.

  5. 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

  6. 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.

  1. Go to: Insert > New Symbol (Ctrl F8)
  2. Type the Name: Error Box MC
  3. Select behavior: Movie Clip


  4. Click: OK

  5. Draw and Type on Stage until you have something similar to this:


    The Error Box without the button in the top right corner.

  6. 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.

  7. 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.

  8. If the Edit Bar is closed, open it: Window > Toolbars > Edit Bar
  9. 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.
  10. In the Timeline rename Layer 1 to: Form
  11. Create a New Layer by clicking on the Insert Layer Button:
  12. Rename this new Layer: Error Box

    The Layers in your Timeline should look like this:


    The Error Layer is above the Form Layer.

  13. Open the Library: Window > Library (F11)
  14. Select the: Error Layer
  15. Drag the Error Box MC out of the Library: Error Box MC
  16. 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.
  17. In the Property Inspector give the Error box the Instance Name: errorBox



Step five: The ActionScript in frame 1

  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


  1. 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


  1. 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.

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


    Static Text on frame 2.

  3. In the Property Inspector Select: Dynamic Text
  4. Drag out a Dynamic Text Box like this:


    Dynamic Text Box next to the intro: Dear

  5. In the Property Inspector give the Text Box the Variable Name: usersName
  6. In the Timeline in frame 2 place the following Actions:

    // Displays the name the user typed into the from
    usersName=nameField +
    ",";

  7. If the Library is closed, open it: Window > Library (F11)
  8. Drag out a copy of the: Reset Button



    Reset button in place.

  9. 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.

  1. Go to: File > Save
  2. Go to: File > Publish Settings
  3. Select the following:



  4. Click: Publish
  5. 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.

  1. Open Notepad (if you use Windows) or a similar Plain Text Editor: Start > Programs > Accessories > NotePad
  2. 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');
    }

    }

    ?>

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

Step eleven: PHP Document 2 - process.php

  1. 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");

    }
    ?>


  2. 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:

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

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1



Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.