Flash-Php mail – a reusable solution

One of the most common requirements of a good website is a flash based contact form. Here we will see a simple yet effective flash – php based email form and how to send data from flash to php and receive confirmation. All you need is the flash IDE some basic knowledge of action script and you are good to go.

flash-mail-preview

This is how our final output will look like. so lets begin…

Building the flash front-end:

  1. Open up for flash editor and create a new document of dimension : 550 x 400
  2. Draw a graphics background for your form, or leave it to a stage background color, that’s up to you.
  3. Create 3 Input text Boxes and 1 multi line Input text box.
  4. Put static text labels against each of them as you see in the picture above: as “To”, “From”, “Subject”, “Message”
  5. Finally put a button at the bottom of the setup.
  6. Convert each of the text box and the text area to movie clips individually.
  7. Now edit each of the movie clips and name the text entity inside them as “txtinputedit-each
  8. Note that we are giving the same instance name to every text field. This is because the outer movie clip name will help distinguish between them , which we will be providing after this.
  9. Once every text field has the instance name of “txtinput” we will name the movie clips that contain them. so on the stage catch hold of each movie clip and name them , “to” , “from”, “subject” and “message” respectivelyname-each
  10. Once we are done we will be having 4 movie clips on the stage and a button. At this stage we will add a dynamic text field to the form , which we will be using to print status messages to user. for styling i have given drop shadow filter on each of the movie clips. (this is why i choose putting the text fields inside movie clips)status-box
  11. Now that we have 4 movie clips (with input text fields inside them), a button and a dynamic text field for status messages, we will convert the whole thing into a single movie clip and name the movieclip “mailform”so that we can use the form as a component in any project we wish to. So select all movie clips, the dynamic text field and the button together. Then convert to Symbol -> “movieclip”.
  12. Now that we are done creating the view we will jump to code. Since this is going to be a reusable component we need to create a separate class file for it. so create a new action script file, and save it as “FlashMail.as”new-as-class-file
  13. Here is the code to go into this file, with explanation.
import mx.utils.Delegate;
dynamic class flashMail
{
private var to:MovieClip;
private var from:MovieClip;
private var subject:MovieClip;
private var message:MovieClip;
private var btnSend:Button;
private var Smail:LoadVars;
private var Rmail:LoadVars;
private var confirmation:TextField;

public function flashMail()
{
Smail=new LoadVars();
Rmail=new LoadVars();

to.txtinput.text="";
to.txtinput.restrict="a-z A-Z 0-9 @ . _ -";
to.txtinput.maxChars=40;

from.txtinput.text="";
from.txtinput.restrict="a-z A-Z 0-9 @ . _ -";
from.txtinput.maxChars=40;

subject.txtinput.text="";
subject.txtinput.restrict="a-z A-Z 0-9 @ .";
subject.txtinput.maxChars=40;

message.txtinput.text="";
message.txtinput.maxChars=500;

confirmation.text="";
btnSend.onRelease=Delegate.create(this,sendMail);
}

function sendMail()
{
var tostring:String=to.txtinput.text;
var fromstring:String=from.txtinput.text;
var subjectstring:String=subject.txtinput.text;
var messagestring:String=message.txtinput.text;
if((tostring.length>0)and(fromstring.length>0)and
(subjectstring.length>0)and(messagestring.length>0))
{

Smail.to=tostring;
Smail.from=fromstring;
Smail.subject=subjectstring;
Smail.message=messagestring;

Smail.sendAndLoad("mailerdemon.php",Rmail,"POST");
Rmail.onLoad=Delegate.create(this,confirmMail);
}
else
{
confirmation.text="Invalid Fields !"
}
}

public function confirmMail()
{
if(parseInt(Rmail.confirm)==1)
{
confirmation.text="Mail Sent Successfully";
}
else
{
confirmation.text="Mail Failed";
}
}

}

This is a valid action script 2.0 class file. As you can see, we first declare each of the parts of the form, before using them.

private var to:MovieClip;
private var from:MovieClip;
private var subject:MovieClip;
private var message:MovieClip;
private var btnSend:Button;
private var Smail:LoadVars;
private var Rmail:LoadVars;
private var confirmation:TextField;

Next in the constructor we initialize each of the text boxes, the load vars for communicating with php, and setup the handler for the button.

public function flashMail()
{
Smail=new LoadVars();
Rmail=new LoadVars();

to.txtinput.text="";
to.txtinput.restrict="a-z A-Z 0-9 @ . _ -";
to.txtinput.maxChars=40;

from.txtinput.text="";
from.txtinput.restrict="a-z A-Z 0-9 @ . _ -";
from.txtinput.maxChars=40;

subject.txtinput.text="";
subject.txtinput.restrict="a-z A-Z 0-9 @ .";
subject.txtinput.maxChars=40;

message.txtinput.text="";
message.txtinput.maxChars=500;

confirmation.text="";
btnSend.onRelease=Delegate.create(this,sendMail);
}

Finally in the “sendMail()” function we collect text data from each of the text fields and validate them for valid inputs. Next we wrap them in our loadvars object “ Smail” and send them to the php script for processing via sendandload,while setting up a callback listener for the confirmation we get from php.

Smail.sendAndLoad("mailerdemon.php",Rmail,"POST");
Rmail.onLoad=Delegate.create(this,confirmMail);

The PHP Script:

The Code

<?php
$to=$_POST['to'];
$from=$_POST['from'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$headers = "From: " . $from . "\r\n";
$mailsent = mail($to, $subject, $message, $headers);
if ($mailsent)
{
    print "confirm=1";
}
else
{
    print "confirm=0";
}
?>

As you can see there is not much in the php code, except collecting the variables sent by flash and calling the php mail function upon them. However there are two things to note. firstly the variable names in flash must match what you attempt catch in php. (example: Smail.to – > $_POST[‘to’]) etc:

Second thing to notice, will be the print statements. ie: (print “confirm=1”; and print “confirm=0”;) after sending mail, php prints either “confirm=1” .. if success or “confirm=0” if failure. This print statement does not print anything to the browser, rather to the flash input stream.

Hence when flash receives the print statement it triggers the response handler as setup by us before sending data to php.

Rmail.onLoad=Delegate.create(this,confirmMail);

finally the response handler receives the response sent by the php script and displays to user via the dynamic text field we set up for this purpose.

public function confirmMail()
{
if(parseInt(Rmail.confirm)==1)
{
confirmation.text="Mail Sent Successfully";
}
else
{
confirmation.text="Mail Failed";
}
}

Finally we will attach or class file FlashMail.as to the Form Movieclip we have created. To do this, while in flash design view of the form we created, open the library by press (F11) . Now locate the movieclip “mailform”. Select th movieclip and rightclick -> linkage, to bring up the the “linkage properties” dialog box. There in the dialog box, check “export for Actionscript” and provide the class name “FlashMail” in the Class input area.linkage

Press ok to complete the process and have your flash-pap mail reusable component ready.

Note that here just the class name is sufficient as we are not using any package level placement for our class. to know more about classes and packages in as2 refer to :

Download Full Source here(as + php)

No Comments - Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*