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 \n\nSubject: $contact_subject
\n\nMessage: \n\n$contact_message \n\nIP ADDRESS: $client_ip \n\n$siteName";

	$emailAutoReply = "Hi $contact_name, \n\nWe have just received your E-Mail. We will get
in touch in a few days. Thank you!  \n\n$siteName ";

	$extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();
	$autoReply = "From: $receiver\r\n" . "Reply-To: $receiver \r\n" . "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:

You can also check the form in action here.

If you have any question, please leave a reply here. I hope you enjoyed this tutorial and thanks for reading!

Each tutorial should start with a title, preview image (200*200) and a descriptive excerpt for the main page.

After the introduction there will be a ‘Preview’ heading with your live demo or video embedded under that.

The tutorial itself should be laid out in numbered steps, starting with Step 1 containing an illustrative screenshot. The layout is repeated for each step until the tutorial is complete.

To create the coherent structure outlined above you’ll need to utilize some HTML tags like <h2> </h2>, <p> </p>, <em> </em>. As such, your tutorial will need to be created in a HTML file. It’s best to format your tutorial in a text editor like Notepad or a WYSIWYG program like Dreamweaver. It must be saved with a .html extension (i.e. yourtutorial.html).

Please note that every step in your tutorial should be illustrated with a screenshot unless it is blindingly clear. Image size should be 500*500 pixels. Each image should contain a readable UI area.

Number every image in order of appearance: the first image should be titled 1.jpg, your twentieth should be titled 20.jpg, and so on.
Use the following code for an image to appear in your tutorial:
<div class=”tutorial_image”><img src=”-1.jpg” alt=”” /></div>.

Flash Tutorial Intro Preview

Every tutorial should start with a preview of the finished product. This preview should be 500px wide or less.
Live demo is the best way to preview a Flash effect. On the tutorial page you can embed animations. If you are having trouble creating your live demo or creating a place to host it, get in touch with us and we will find a solution.

What to Submit

Before submitting your Flash tutorial, create a .ZIP file with two folders: ‘Tutorial’ and ‘Preview’. Tutorial folder includes your formatted HTML tutorial and your tutorial images and a Preview folder which includes your preview files and a 200 x 200 pixel preview image. If the .ZIP file is over 10 MB use an online file transfer service for delivery. Send your tutorial to marketing (at) flashmint (dot) com

Flash is a tool for creating interactive and animated Web site. These Flash tutorials will teach you how to use Flash in your web designs. The mission of FlashMint Tuts is to be your reference guide to mastering your Flash scripting, learning new Flash effects and Flash concepts. Every technique presented at FlashMint Tuts can be easily implemented into your professional Flash work.

Here you will find exclusive and most sufficient Flash tutorials which will help you to solve any issue arising in the process of developing Flash powered web pages. Besides, your assistance is always appreciated and even required so feel free to add Flash tips and tutorials to fill the incredible FlashTuts collection. Moreover, you have the real opportunity to earn from the collaboration so use your chance to make some profit with minimum efforts and maximum pleasure.

What we’re looking for in tutorials

At FlashMint Tuts we are not looking for quick tips for beginners. We are looking for comprehensive, multi-step tutorials that create a complex and high-end final result on the following topics:

•    Flash animation and interactivity
•    Flash web design and user interfaces
•    Flash applications

Flash Tutorials Acceptance

Before starting, please contact us for the tutorial concept and ideas. We would only reject a tutorial if it did not adhere to the basic requirements listed here, or if the final effect was amateurish.
# If you’re not sure, send a sample of your work.
# Spell check before sending your post.
# We reserve the right to edit your post (h3 and strong tags, punctuation, grammar, etc…)
You agree that the post was not previously and will never be republished elsewhere.

Note on Plagiarism

Please, if you submit a tutorial for publication on FlashMint Tuts, make sure it is an original article.
Since direct copy and pasting is obvious plagiarism; paraphrasing, where the author would base the tutorial on another tutorial, but write it out in his/her own words, is just as unacceptable as copying and pasting.

Getting paid

As a freelance contributor you will be paid $150 per tutorial via PayPal (unless otherwise specified). Payments are made at the beginning of each month.

Author Profile

As an author, you will be featured on the top of each tutorial you send. With your first tutorial you should also submit your website URL, short bio and an email address that is attached to a Gravatar account.
Our aim is to create the most powerful Flash knowledge base in one place so join us right away and enjoy the advanced facilities of Flash design.