Flash Tutorials – Creating Contact Module
Do you want to create a Contact Module using popular scripts? In this tutorial, we’ll create a Advanced Contact Module with ActionScript 3.0 – XML and PHP. Don’t worry! You don’t need to know PHP Script. During the tutorial, I’ll explain you coding and designing parts of the creation process. Also, we will use XML to make an easy upgrade. The Module can be improved and used each project. The Steps are very easy. Just follow the steps carefully and apply them.
Step 1: Preparing The Folder
First, Create a new folder called “AS3 Contact Module” Open the new blank projects like the following:
1. Contact.fla – Flash Project
2. Contact.html – HTML Page to show swf file.
3. Contact.swf – Main Swf File
4. contactImg.jpg – The image of The Module
5. ContactPHP – PHP Script
6. ContactXML – XML Script
Step 2: Flash Project
Open a new AS3 Project File. You can see the properties of the project below.
Step 3: Background Properties
Select Rectangle Tool (or Press “R”) and create a rectangle without outline. The size of the rectangle can be changed. Now, Crop the rectangle like the following and reduce the alpha value to 20. Align it at the top of the module.
Step 4: XML Text Fields
Create 2 dynamic texts to type the information of the module. They use XML File to call texts. You can see their instance names below. I’ll give the actionscript explanations at the end of the designing.
Step 5: Import The Image
Go to “Insert > New Symbol”. Create a new blank MovieClip. Move it to the stage from library. Apply the properties like the following.
Step 6: Contact Form
Now, We can start to create contact form. Let’s start with the background of the input text. Press “R (Rectangle Tool)” and draw a shape. The size of the shape is 200×20. Then fill the shape with this colours: Main Color: #252525, Outline Color: #333333. If you want, you can add a drop shadow effect.
Step 7: Input Texts
Input text allows you to type text and show them. Therefore, we must use them in our contact form. Create 4 input texts and 1 dynamic text. Align them according to the backgrounds. You can see the properties below.
Step 8: Send Button
To use “Submit Function” we must create a button. You can use same background to create it. Use a static text to show “SEND” text. Because we will not change it.
Step 9: Coding The Design
We have just finished the designing.I will explain the actionscript in the code area. Now, We can start to write the codes. Let’s start with XML Actions. Type these codes to the first frame.
/*To Define The Main Varibles*/
var urlLoader:URLLoader = new URLLoader();
var imgLoader:Loader = new Loader();
var loadFunction:URLLoader=new URLLoader ;
/*XML Request*/
function XMLFunction(XMLPath:String):void {
urlLoader.load(new URLRequest(XMLPath));
urlLoader.addEventListener(Event.COMPLETE, onSuccess);
}
//The Name of the XML File
XMLFunction("ContactXML.xml");
/*XML - Flash Actions*/
//We'll define "info, title and image" varibles to use them in XML File.
function onSuccess(e:Event):void {
var xml:XML=new XML(e.target.data);
contactInfo.htmlText=xml.info;//We use HTML to show any type of texts
contactInfo.autoSize=TextFieldAutoSize.LEFT;//AutoSize-Left
contactTitle.htmlText=xml.title;
contactTitle.autoSize=TextFieldAutoSize.LEFT;
imgLoader.load(new URLRequest(xml.@image));
imageMc.addChild(imgLoader);
}
Step 10: Coding The Design
To show and hide input text. The codes are same but we have to change them because we want to show different text on the input texts.
/*Focus In - Focus Out*/
/*An object dispatches a FocusEvent object when the user changes the focus
from one object in the display list to another.*/
//Name Text Actions
nameText.text="NAME";
nameText.addEventListener(FocusEvent.FOCUS_IN, focusInName);
nameText.addEventListener(FocusEvent.FOCUS_OUT, focusOutName);
function focusInName(evt:Event) {
if (nameText.text=="NAME") {
nameText.text="";
}
}
function focusOutName(evt:Event) {
if (nameText.text=="") {
nameText.text="NAME";
}
}
//E-Mail Text Actions
emailText.text="E-MAIL";
emailText.addEventListener(FocusEvent.FOCUS_IN, focusInEmail);
emailText.addEventListener(FocusEvent.FOCUS_OUT, focusOutEmail);
function focusInEmail(evt:Event) {
if (emailText.text=="E-MAIL") {
emailText.text="";
}
}
function focusOutEmail(evt:Event) {
if (emailText.text=="") {
emailText.text="E-MAIL";
}
}
//Subject Functions
subjectText.text="SUBJECT";
subjectText.addEventListener(FocusEvent.FOCUS_IN, focusInSubject);
subjectText.addEventListener(FocusEvent.FOCUS_OUT, focusOutSubject);
function focusInSubject(evt:Event) {
if (subjectText.text=="SUBJECT") {
subjectText.text="";
}
}
function focusOutSubject(evt:Event) {
if (subjectText.text=="") {
subjectText.text="SUBJECT";
}
}
//Message Functions
messageText.text="MESSAGE";
messageText.addEventListener(FocusEvent.FOCUS_IN, focusInMessage);
messageText.addEventListener(FocusEvent.FOCUS_OUT, focusOutMessage);
function focusInMessage(evt:Event) {
if (messageText.text=="MESSAGE") {
messageText.text="";
}
}
function focusOutMessage(evt:Event) {
if (messageText.text=="") {
messageText.text="MESSAGE";
}
}
Step 11: Coding The Design
To communicate between Flash and PHP.
/*/PHP - Flash Actions/*/
//Make a PHP Script Request to Post to the server
var urlRequest:URLRequest=new URLRequest("ContactPHP.php"); //The Name of the PHP Script
urlRequest.method=URLRequestMethod.POST;
//Send Button
sendBtn.addEventListener(MouseEvent.CLICK, SubmitFunction);
/*Text Field Validation*/
function SubmitFunction(e:MouseEvent):void {
if (nameText.text == "NAME" || emailText.text == "E-MAIL" ||
subjectText.text == "SUBJECT" || messageText.text == "MESSAGE" ) {
resultText.text="PLEASE FILL OUT ALL REQUIRED FIELDS";
} else if ( !emailValidate(emailText.text) ) {
resultText.text="VALID E-MAIL ADDRESS.";//If E-Mail field is empty the e-mail will not be sent.
} else {
resultText.text="SENDING...";//If everything is correct the message'll be sent.
var dataEmail:String = "name=" + nameText.text
+ "&email=" + emailText.text
+ "&subject=" + subjectText.text
+ "&message=" + messageText.text;
Step 12: Coding The Design
E-Mail Validation Actions.
function emailValidate(s:String):Boolean {
var p:RegExp=/(w|[_.-])+@((w|-)+.)+w{2,4}+/;
var r:Object=p.exec(s);
if (r==null) {
return false;
}
return true;
}
Step 13: Coding The Design
I’m going on with the URL Actions.
/*URL Actions*/
var URLvariables:URLVariables=new URLVariables(dataEmail);
URLvariables.dataFormat=URLLoaderDataFormat.TEXT;
urlRequest.data=URLvariables;
loadFunction.load(urlRequest);
loadFunction.addEventListener(Event.COMPLETE, responseFunction );
}
}
/*Status of the E-Mail*/
function responseFunction(e:Event):void {
var loader:URLLoader=URLLoader(e.target);
var emailStatus=new URLVariables(loader.data).success;
//If E-Mail is sent successfully, the visitor'll see this message.
if (emailStatus=="yes") {
resultText.text="THANK YOU! YOUR MESSAGE WAS SENT SUCCESSFULLY.";
//If E-Mail can not be sent, the visitor'll see this message.
} else {
resultText.text="AN ERROR OCCURED!";
}
}
Step 14: Creating XML File
To show the text on the Flash, we must create a XML File. Open XML File you saved and type these codes. You can change the information.
Step 15: Creating PHP File
To send visitor information you have to have a e-mail account. Open PHP Script you saved. Change the “emailAddress and siteName” with yours. The PHP Script contains an automatic response system.
<?php
//Type the receiever's e-mail address
$emailAddress = "info@email.com";
//Type your Site Name
$siteName = "Company Name";
$contact_name = $_POST['name'];
$contact_email = $_POST['email'];
$contact_subject = $_POST['subject'];
$contact_message = $_POST['message'];
if( $contact_name == true )
{
$sender = $contact_email;
$receiver = $emailAddress;
$client_ip = $_SERVER['REMOTE_ADDR'];
$email_body = "The Name Of The Sender: $contact_name nEmail: $sender nnSubject: $contact_subject
nnMessage: nn$contact_message nnIP ADDRESS: $client_ip nn$siteName";
$emailAutoReply = "Hi $contact_name, nnWe have just received your E-Mail. We will get
in touch in a few days. Thank you! nn$siteName ";
$extra = "From: $senderrn" . "Reply-To: $sender rn" . "X-Mailer: PHP/" . phpversion();
$autoReply = "From: $receiverrn" . "Reply-To: $receiver rn" . "X-Mailer: PHP/" . phpversion();
mail( $sender, "Auto Reply: $contact_subject", $emailAutoReply, $autoReply );
if( mail( $receiver, "New E-Mail - $contact_subject", $email_body, $extra ) )
{
echo "success=yes";
}
else
{
echo "success=no";
}
}
?>
Conclusion
Congrulations!You’re done! You can test your movie. You have created a contact module with ActionScript 3.0, XML and PHP. Everything is ready. You must only send the folder to your server and start to use.
Here’s how your new amazing contact form should look:
Source: tuts.flashmint.com
you may also like:
Leave a Reply
