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!

Step 1.

Create a new file with ActionScript 3.0 and modify the document like it’s shown on the screenshot below. You can enter the document properties via the admin panel (follow the highlights in red) or pressing Ctrl+J.

Step 2.

Add four images from your computer to your library. To do this press File => Imort => Import to library. You can also import the images directly to the stage, by pressing Ctrl+R.

Next, create three new layers and give them the names Buttons, Images and Actions. To rename a layer, double click on it and type the text.  See the shot below.

Notice that the first frame of each layer has a small circle on it. This is a blank keyframe. Once you put anything on the stage, the circle transforms into black dot which corresponds to the filled keyframe.

Go to the Buttons layer and select the first frame on the timeline. Drag the images from your library to the stage (in case you haven’t imported them right to the stage already) and modify their size to 114×85 px. Be sure to drag the images to our document area which we’ve made black earlier.

Now you have your thumbnails on the stage. Set image alignment selecting Align in Window menu, or just press Ctrl+K. Align pics to the bottom and distribute horizontal center like it’s shown below.

Step 3.

Our thumbnails are going to be buttons, so now we need to convert the images into the Button symbols. Using the Selection Tool, right click on the first thumbnail image and choose “Convert to Symbol”, or simply hit F8. In the opened window set the type Button and name the symbol btn1. Click “OK” to save the changes. Do this for the other three images and give them the names btn2, btn3 and btn4, respectively.

Now we have to give each of these the same Instance Name which is a name to refer to your symbol or object in ActionScript. Instance Name can be set in the Properties panel which you can enter by selecting the necessary object on the stage. Instance Name of the btn1 button will be btn1 and so forth.

Right click on the first frame of the Buttons layer, select Copy Frames, go to the fourth frame and Paste Frames the same way. Or you can just drag the first frame up to the fourth cell to copy it. You timeline should have the following look by now.

Step 4.

OK, let’s put the images that we will be exactly viewing in our gallery. Switch to the Images layer and select the first frame on the timeline. Drag the image that corresponds to the first thumbnail from your library to the stage. Size it down to the 358×268 px and set its position to the 93×18. Of course, you may set your own dimensions and place the pictures whatever you like; this is just what we use for this tutorial.

Insert three more blank keyframes (F6) and do the same operation with the rest of the images.

Now go back to the timeline, select the first frame and go to the Properties panel. Here we will set the Frame Label. It’s important to remember about this because we’re going to reference frame labels in the ActionScript later. We’ve got four frame labels: model, dreamy, dancing and teacher, respectively.

Step 5.

So far we’ve got a thumbnail gallery where each of the thumbs is a button. Our next step is to add some action script so we could click on the button to play the right frame. Go to the Actions layer and drag the first frame up to the fourth cell. Your timeline should have the following look by this moment:

Go back to the first frame in the Actions layer and hit F9 to open the Actions window. Copy and paste the following code into your Actions window. Don’t worry, we will explain in great detail what happens shortly.

Code block

stop();
btn1.addEventListener(MouseEvent.CLICK,play1);
function play1(event:MouseEvent):void{
gotoAndStop ("young")
}
btn2.addEventListener(MouseEvent.CLICK,play2);
function play2(event:MouseEvent):void{
gotoAndStop ("thoughtful")
}
btn3.addEventListener(MouseEvent.CLICK,play3);
function play3(event:MouseEvent):void{
gotoAndStop ("dancing")
}
btn4.addEventListener(MouseEvent.CLICK,play4);
function play4(event:MouseEvent):void{
gotoAndStop ("old")
}

Let’s look closer at what you’ve just done and learn more about AS functions.  The first thing you see in your code window is Stop action.

Code block

stop();

Any effect you create in Flash repeats continuously when you test or publish your movie. Stop action is used to actually stop it from looping. You can apply the Stop action to any keyframe and the movie will stop playing at that exact point.

The next code line is

Code block

btn1. addEventListener(MouseEvent.CLICK,play1);

This script means that btn1, our instance name, referring to the first button in our thumbnail gallery, is responding to a mouse click and calls for the function play1.

And here goes the definition of that function

Code block

function play1(event:MouseEvent):void{
gotoAndStop("model")
}

In this line:

• function play1 tells us the name of the function;
• (event:MouseEvent) defines the type of the event , which is interaction with the mouse here,
• void is a special type used to specify that the function doesn’t return any data;
• gotoAndStop (“model”) causes the playhead to jump to the frame model and stops from progressing further.

All right, this is the initial script that allows our image gallery to work properly. As you see, this piece of code repeats for the rest of the buttons, we change only instance names and frame labels.

Step 6.

To add some spice to our images when they come in, let’s learn how to animate them in Flash CS4.

So, go up to your Images layer and select the first frame. To be able to add some animation to our images, we need to convert them to movie clip symbols. To do this hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four images. Let the names be movie1, movie2, movie3 and movie4.

Choose the Selection tool from your toolbar and double click on the first movie clip we’ve just created. Now we can animate it.

Right click on the movie clip on the stage and select Create Motion Tween.

You can see that it automatically inserts some frames; the number of frames inserted depends on your frame rate. By default Flash CS4 has a frame rate of 24 frames per second. So basically you have the number of frames that would equal one second. Let’s cut it down to 15 frames per second – just drag the border of the 24th frame down to the one we need.

Now let’s create a sleek fade-in effect by means of some color effects and motion tween. Select the image on the stage while the playhead is on the last frame. Go to the object properties, choose Alpha in the Style menu and put it 0%.

Move the playhead back and forth and you will see that we’ve created a fade-out effect for our image – it’s completely transparent on the last keyframe. Right click anywhere on the motion tween area and select Reverse Keyframes. Now we have the fade-in effect applied to the picture.

Click Ctrl+Enter to test your movie. You should see something like this:

Movie plays over and over again and we don’t want this loop happen. Stop action comes in handy here. Return to your movie clip window, right click on the motion tween area and select Convert to Frame by Frame Animation. Then go to the last frame and hit F9. Type stop() in the Actions window and that should fix the problem.

Here is the result:

Step 7.

Another cute effect we’re going to apply is rollover. Wouldn’t it be nice to have the thumbnails change a bit when the mouse hovers over? And that’s pretty easy to do, here we go!

Double click on the first button in the thumbnail line, which is btn1. You can see four frames on your timeline – Up, Over, Down and Hit. These are the states of our button.

• The Up frame is the inactive stage when nothing is happening, the button is displayed as it is.
• The Over is the stage when the mouse hovers over the button.
• The Down frame is the stage when the button is clicked on.
• The purpose of the Hit frame is to define the clickable area or the coordinates of the button.

So, insert blank keyframes (F6) into each of the frames.

Go to the Over and select the button on the stage. In order to modify the way it is rendered, we need to convert it into a graphic symbol. Press F8 and select Graphic in the Type menu. Now go to the object properties and do some changes to the color effect. You may do whatever you want, we changed the RGB parameters, for example (see the screenshot below).

Switch to the Down frame and apply some effects if you want the button to change its state when you click on it. In this case, we’ve added more red to it.

Move on to the Hit area and using the Rectangular Tool draw an area you want to be clickable on your button.

Repeat this step for the other three buttons and press Ctrl+Enter to see the result. It should be similar to this:

This is it, folks. Now you know how to create a simple image gallery with thumbnails and spice it with some nice effects. If you have any questions, please leave them in comments.