Creating an Email Form with Actionscript 3.0 and PHP

[Flep]

Who uses Flash to create Web sites knows that the contact form (form of sending email) is one of the most used up.

I received many e-mails by users who demanded a tutorial explaining how to build one.

What I will explain then describes step by step how to create a basic form of sending email using Actionscript 3.0 and PHP.

Step 1 - Create FLA and Document Class

Create a FLA file and seve it as name "main.fla."

Create the Document Class, an AS file named "Main.as", implemented in this way

package
{
	import flash.display.*;
	import flash.events.*;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			trace("My Document Class has been created correctly");
		}
	}
}

The code you see is the basic statement of a Document Class we have seen widely in other articles:

Document Class

Best way to instance the Document Class

Call from the timeline to the Document Class and vice versa

How to call another class from the Document Class

Step 2 - Create graphics

The first thing to do is create the graphics and objects that we need for our email-form.

In this case, use 3 simple input text fields (name, email, message) and a sending button.

Will be to customize each of you as fit.

In a level of my FLA I create 3 text fields of type input:

- name_txt where user will insert his name

- email_txt: user will insert his e-mail

- message_txt: user will insert the message

For each of these 3 fields as you see I have assigned an instance name (name_txt, email_txt, message_txt) so I can refer to them by the Document Class.

Also I need the characters and the font we use are visible by all, make sure to include the right set of characters for each text field.

How to do it, read the following tutorial:

- Http://blog.flepstudio.org/tutorials/incorporare-fonts-nell-swf-con-flash-cs3/

Now I create a sending button with instance name "send_btn".

I select the three text fields and transform them into a MovieClip.

I call the MovieClip mc_form and assign it the istance name of "form_mc".

I get the following results:

Step 3 - Creating the Actionscript logics

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.net.*;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			trace("My Document Class has been created correctly");
			
			form_mc.send_btn.addEventListener(MouseEvent.MOUSE_DOWN,checkFields);
		}
		
		private function checkFields(evt:MouseEvent):void
		{
			if(form_mc.name_txt.text!=""&&form_mc.email_txt.text!=""&&form_mc.message_txt.text!="")
				sendMessage();
		}
		
		private function sendMessage():void
		{
			var variables:URLVariables=new URLVariables();
			variables.name=form_mc.name_txt.text;
			variables.email=form_mc.email_txt.text;
			variables.message=form_mc.message_txt.text;
			
			var request:URLRequest=new URLRequest();
			request.url='sendMail.php';
			request.method=URLRequestMethod.POST;
			request.data=variables;
			
			var loader:URLLoader=new URLLoader();
			loader.dataFormat=URLLoaderDataFormat.VARIABLES;
			loader.addEventListener(Event.COMPLETE,messageSent);
			try 
			{
				loader.load(request);
			} 
			catch (error:Error) 
			{
				trace('Unable to load requested document.');
			}
		}
		
		private function messageSent(evt:Event):void
		{
			var loader:URLLoader=URLLoader(evt.target);
			var vars:URLVariables=new URLVariables(loader.data);
			if(vars.answer=="ok")
				trace("The message has been sent");
			else
				trace("Something wrong");
		}
	}
}

Let's navigate through the code:

Add the listener to the button that when clicked calls a function that controls if user has filled each field:

form_mc.send_btn.addEventListener(MouseEvent.MOUSE _DOWN,checkFields);

I check if the fields have ben filled and I call a function that will send the values to PHP:

if(form_mc.name_txt.text!=""&&form_mc.email_txt.te xt!=""&&form_mc.message_txt.text!="")

sendMessage();

Send the variables to PHP:

The first block of code of sendMessage function I use the URLVariables class.
I assign three properties at URLVariables istance and I call them name, email and message.

Important: These 3 variables have the same names of variables that I will set in PHP which it expectes via POST.

For each of the three properties assign the text of the corresponding text field

var variables:URLVariables=new URLVariables();

variables.name=form_mc.name_txt.text;

variables.email=form_mc.email_txt.text;

variables.message=form_mc.message_txt.text;

In the second block I use URLRequest class that makes a request of Flash to call a url ( the PHP file ). Set to POST the "how to send" variables mode method.

var request:URLRequest=new URLRequest();

request.url='sendMail.php';

request.method=URLRequestMethod.POST;

request.data=variables;

In the third block I use URLLoader class that will call and send to PHP the values of the URLVariables we have previously assigned. Assign to dataFormat property of Loader the ownership of the string URLLoaderDataFormat.VARIABLES loader, which is a string "variables".

Add a listener that will call a function when the variables has been sent and PHP echo to us.

var loader:URLLoader=new URLLoader();

loader.dataFormat=URLLoaderDataFormat.VARIABLES;

loader.addEventListener(Event.COMPLETE,messageSent );

try

{

loader.load(request);

}

catch (error:Error)

{

trace('Unable to load requested document.');

}

Obtaining PHP answer:

In messageSent function recovery the response of the PHP by using same loader that I used to send and creating an instance of URLVariables that will contain a variable named answer with a value assigned by PHP. If the value is "ok" then execute the necessary logic, otherwise trace an error.

Also read the following post: http://blog.flepstudio.org/tutorials/string-passed-to-urlvariablesdecode-must-be-a-url-encoded-query-string-containing-namevalue-pair/

var loader:URLLoader=URLLoader(evt.target);

var vars:URLVariables=new URLVariables(loader.data);

if(vars.answer=="ok")

trace("The message has been sent");

else

trace("Something wrong");

Last this is the PHP:

PHP Code:

<?php
$to = "address@mydomain.com";
$subject = ($_POST['name']);
$message = ($_POST['message']);
$message .= "\n\n---------------------------\n";
$message .= "E-mail inviata da: " . $_POST['name'] . " <" . $_POST['email']  . ">\n";
$headers = "From: " . $_POST['name'] . " <" . $_POST['email'] . ">\n";
if(@mail($to, $subject, $message, $headers))
{
    echo "answer=ok";
} 
else 
{
    echo "answer=error";
}
?>

Source files:

[muasif80]

I have got this error Can you please help in this regard

Error: Error #2101: The String passed to URLVariables.decode() must be a URL-encoded query string containing name/value pairs.
at Error$/throwError()
at flash.net::URLVariables/decode()
at flash.net::URLVariables()
at flash.net::URLLoader/onComplete()