Creating a Contact Form in Flash Using AS3

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Intermediate | Page 1, 2

This tutorial will teach you how to create a simple contact form which the users of your website can use to send you message directly from the website. The script will be written in ActionScript 3.0 and will use a PHP script to send the message through to your email inbox.

This tutorial does not require you to know PHP as the script is simple and can be implemented without modifications. In order to understand the AS3 script would have to know the basics of variables, event handling, and the basics of the URLLoader Class and the URLVariable Class. You may refer to our previous tutorials on these topics to learn more about them.

Our tutorial will be divided into three sections:

  1. Preparing the External Assets
  2. Creating the Graphical Interface in Flash
  3. Writing the Script

Preparing the External Assets

A Flash movie cannot communicate with a server or send an email message by itself. We need to use an external server-side script such as PHP or ASP to do this job. In this tutorial we will use a PHP script. Create a new folder for your project and inside this folder use any text tool a blank PHP file named mail.php.

AS3 Contact Form - PHP File

This file will have the responsibility of receiving our message details from the SWF movie which we will create later and then send this data to the email address we specify. Simply paste the following PHP code to do this job.

<?php
$to = "yourAddress@domain.com";
$subject = ($_POST['senderName']);
$message = ($_POST['senderMsg']);
$message .= "\n\n---------------------------\n";
$message .= "E-mail Sent From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
$headers = "From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
if(@mail($to, $subject, $message, $headers))
{
echo "answer=ok";
}
else
{
echo "answer=error";
}
?>
You must replace the value of the $to variable with the actual email address you want to have the contact form messages be sent to.

Explaining the PHP code goes beyond the scope of this tutorial, however, the basic concept behind the code is that it assembles the information into a single message and then sends it to the email address you specify using the @mail function.

This should make our PHP script ready. Simply save it and launch Flash to start the next step.

Creating the Graphical Interface of the Form

Create a new FLA in Flash in AS3 format. Save it with the name ContactMovie in the same project folder as your PHP script.

AS3 - Contact Form

We are now going to create the graphical elements we need for our contact form, namely:

  1. A text input field for the email address of the sender.
  2. A text input field for the name of the sender.
  3. A bigger text area field for the body of the message.
  4. A submit button.

We are going to use ready-made components for this job. Open up the Components panel by going through Window>Components and drag an instance of the TextInput component onto the stage. You will have to resize it a little bit to have it look like the image below:

AS3 - Contact Form

Now that you have this field on the stage we will have to assign an instance name to it so that we can interact with it via ActionScript. While your field is still selected, access the Properties Inspector and set the Instance name of it to email_txt.

AS3 - Contact Form

That should do it for the first field, repeat the same process to create another field for the name of the sender of the message, after creating the instance of the component, set the instance name of it to name_txt.

AS3 - Contact Form

For the body of the message we need to insert an instance of the TextArea component on to the stage and set an instance name of it to message_txt.

AS3 - Contact Form

Finally, the last component we need to add is the submit button, to do this simply drag a button component to the stage and set its instance name to submit_btn.

AS3 - Contact Form

Our submit button is not fully ready yet as you might have noticed, we need to change the label so that the button actually says Submit. To do this access the Component Inspector by going through Window>Components Inspector and set the Label property of the button to Submit.

AS3 - Submit Button - Contact Form

That should do it, you should have the following elements on your stage right now:

AS3 Contact Form - Layout

We clearly need more labels to explain what is what here, so use the Text Tool to write the right labels next to each of the fields. You should end up with something similar to the image below:

AS3 - Contact Form

That should do it. All of our graphical elements are now done. We are going to script our contact form in the next section.

Summary

  • Created the PHP file.
  • Created the FLA file and placed all the visual elements on the stage.

In the next section of this tutorial we will write the ActionScript required to gather the data from our form and send it to our PHP script.

- End of Tutorial