Free Flash Tutorials at FlashMint Tuts » flash xml http://tuts.flashmint.com Advanced Flash Tutorials and tips Wed, 17 Mar 2010 14:16:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Creating Contact Module Tutorial with AS3 http://tuts.flashmint.com/creating-contact-module-tutorial-with-as3/ http://tuts.flashmint.com/creating-contact-module-tutorial-with-as3/#comments Wed, 17 Mar 2010 13:33:32 +0000 admin http://tuts.flashmint.com/?p=403 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 \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!

]]> http://tuts.flashmint.com/creating-contact-module-tutorial-with-as3/feed/ 0 How to Edit Flash XML Template http://tuts.flashmint.com/how-to-edit-flash-xml-template/ http://tuts.flashmint.com/how-to-edit-flash-xml-template/#comments Mon, 02 Nov 2009 14:30:39 +0000 admin http://tuts.flashmint.com/?p=93 If you seek to create a flash website with minimal expenses, buying or downloading a free flash template is probably the best solution for you. Though, any template demands customization. The least you need to do with is insert your logo, contact info, text and pictures. But it is also very likely that you will need to make some changes in the menu structure (add or remove some components), you might want to change some of the colors, i.e. button colors, colors on the background or anything else.
If you don’t want to pay for customization you can do it yourself, all you need to know for this are just some basic steps.
This tutorial was written especially for you, so that you don’t have to pay money for flash templates customization and don’t get lost in your xml files when trying to do it yourself.
As an example I’ve taken one of the Flash Mint website templates, and I shall use it as an example for you, so that you can understand what I will be talking about.
As you purchase or download a flash template you receive it as a template package which consists of all the template-related files, including source code files and content. After you have figured out what changes you want to do about your template, you need to open this folder. All the changes you need will be done with the files in this folder.

Website structure (main menu)
The structure of your flash template is determined in XML file. Mine is called “structure”, yours might have a different but still somewhat similar to this name. This document lists all the components of the main menu, as well as the sub menu components. If you want to delete, add or change elements from the main menu you need  to:
1. Open the structure xml file.
2. To delete one of the menu elements you need to find this item in the code. Then highlight this piece of code and press delete. For example, to delete the News section from my main menu I highlight the whole phrase in the code that describes this element and delete it.
Template file folder → Structure file → <item name=”NEWS“ … /> → DELETE
3. To add an element to the main menu, first you have to add the same piece of code as for the other elements, only with the item name you need. Save the file.
Structure file → <item name=”NEW BUTTON“ … /> → INSERT
4. But in such a way you will add only a new button to the main menu. It will lead you to the same page where the button you’ve copied the code from did. To make it lead to another page you need to create one. The easiest way to do it is to use a sample of the existing one (like if you need a second news block to show not only company news, but world news as well) or to buy a flash component  and simply insert it to your website (for example, you’ve purchased a template and you want to have an event planner on it).
Template file folder → NEW BUTTON FOLDER → INSERT
To make your main menu button lead where you need, you have to write a new path to it. To do this, in the phrase you’ve inserted you need to change the value for componentPath and componentSWF. The new componentPath value will be a name of the new folder you need to insert into your folder with template files. If you have purchased a new flash component, you can insert the folder with this component files. If you are adding an element  similar to one of the existing ones, you can copy and rename its folder, and then customize the content of it according to the steps described below.
Structure File → <item name=”NEW BUTTON“ type=”component“ componentPath=”NEW BUTTON“ componentSWF=”newbutton.swf“ visible=”true” />
5. If you only need to change the name for one of the existing buttons, you can do it simply by giving a new value to <item name=”NEW NAME”.
Colors of the main menu
If you need to change the colors of the main menu buttons, find a file in the template file folder, called colors. This file must be in the main folder, not in one of the component folders, as it describes properties of the main menu. To do the changes you need to put a new value for the color tag that describes the color of a certain element. The value is usually described by a special code, assigned to each of the web colors.
Template file folder → colors file → <buttons mouseOver=”0xa000d4″…/>
Logo
To put your logo on the template you need to put new logo picture into the folder instead of the old one. Mine is in the folder called Images.  Make sure the size and image type fits.
Template file folder → Images → Insert new image


Homepage homepage
The homepage of my template is a slide show of pictures, where I have three pictures changing each other with a certain delay. I can substitute these pictures with the ones I need.
1. First of all, I’ve got to look through files and folders in my template file folder  and find out where the pictures form my home page are. I’ve found mine in a folder called “Gallery”. It includes three pictures that I can see on my homepage as a slide show.
To change the pictures to different ones I can put new pictures into my folder with pictures. To make them show up instead of the old ones, I need to put the names of these pictures into the code.
Template file folder → Gallery → insert new images
2.If you want to have more pictures, you can just copy the code that inserts one (or more) picture, insert it once more and add the names of the pictures you want to show up.
3.Now I need to find a code file describing how these pictures substitute each other and what is the delay time. In my template file folder there is a folder called data. It contains an XML file called “Gallery”. This file describes what pictures and how often appear on my homepage and other pages of my website as a background.
4. To change the delay (make pictures change more/less often)  you just need to change the value for delay in this code file. The delay value is measured in seconds, so you can put “12″, “5″, “30″ or any other number.
Template file folder → Data → Gallery file → <image ……delay=”new value”…/>
6. Do not forget to save the code file each time you’ve done the changes, in other way they will not be applied.

Slide show slide-show

1. My template includes a slide show component. If yours does not and you need it, you can get one from Flash Mint’s flash components gallery. Anyway, you will definitely need to customize this component, because you need to put your photos into the slide show. You might also want to change the background color and the color of buttons or the picture title.
2. To do anything about your slide show you need to open a folder that has all the files describing your slide show. In my template files folder I have a slide show folder, it contains a folder with the pictures, an xml file that describes the order in which the pictures appear and one more xml file that describes the colors set for various elements in slide show.

3.  To change the pictures I need to add new pictures in the folder where the old ones are. Do not forget to re-size your pictures so that they fit.
Template file folder → Slideshow folder → Items → insert new pictures
4. Then you need to put the names of these pictures into the code that describes the order of the pictures.
Template file folder → Slideshow folder → slideshow xml file → <item image=”items/new image name.jpg” />
5. If you want to change anything about the colors you can open the XML file which describes the colors for this section of template and do the changes. For my template I can change the background color, the color of buttons and the main title color. To do this I need to put a new value for the color tag that describes the color of a certain element. The value is usually described by a special code. Such codes are assigned to all of the web colors. You can look up the one you need, for instance, here.
Template file folder → Slideshow folder → colors xml file → new color numbers

News news
The news section is probably the one that demands to be changed more often than any other one. In my template news show up as a picture with short description, and as you click on it, you can read the whole text. In such a way, I need to put the pictures to be displayed and two pieces of text. And as for any other section of my website I can change the general colors.
1. To add/delete news from the news section you need to find a folder with these files in your template files folder. Mine is called “dynamic_news”.
2. Here I can find one more folder which is called “Items”  and it has all the news-related pictures in it. I can put new pictures here, though it is still important to remember about the image size.
Template file folder → Dynamic News → items → New pictures for news
3. To make the new pictures displayed in my news, I have to open a code file (lies in the news folder). Here for each of the news there are several parameters given. Item thumbnail (the picture), title (title of the piece of news), description (a short text displayed by the picture), content (the whole text of this piece of news).
To make your picture displayed you need to put your new picture name as a value for item thumbnail.
Dynamic news → News XML file → <item thumbnail=”items/category1/New Image for news 1.jpg“ title=”News Title for news“
4. In a similar way  you can give a new title to your news, insert new texts for description and the whole text of the news. Just paste a new text between the description and content tags and do not forget to save your file.
Dynamic news → News XML file → <content> NEW CONTENT. </content>
5. You can edit the basic colors for this page as well. Just follow a procedure similar to the one described in Step 5 for the slide show.

Media media
My template has image and video gallery components. They can be reached from Media in the main menu. Each of these galleries has its own folder in the main folder.
Video gallery
1. To edit the contents of the video gallery I need to substitute the old videos with the ones I want to put here. So I insert into the folder with videos my new videos, and then open the code file and change the names for the videos.
Template file folder → Video gallery → Items → New Videos
2. In my template besides the videos there are thumbnails for them, which appear as a preview, help navigation. There is also the description text for each video.
3. The thumbnails are located in the same folder as video, so as I insert a new name for the video in the code file, I need to change the name for a thumbnail. Thumbnails are .jpeg files.
4. Then I can insert the new description text into the code file.
Template file folder → Video Gallery → Video XML file → <item item_icon=”items/1/New video 1.jpg“ item=”items/1/New video1.flv“ title=”New Video 1“>
5. The same procedure must be done for every video, just make sure the names you insert into the code match the ones that are assigned to each video or thumbnail in the items folder.
6. To edit the colors just open the colors XML file and and make the changes the same way like for other components.

Image gallery
1. To customize your image gallery find a folder which contains the information on this gallery.
2. Change the pictures in this folder to the ones you need. Pay attention to the image size and type.
Template file folder → Images Gallery → Items →Insert New images
3. Substitute the names of the pictures in the code. Add the text you need. The procedure is pretty much the same as for videos, you’ll just be dealing with a different type of files.
Template file folder → Images gallery → Images XML file → new image names
4. To do the color changes just open a code file in this folder which describes colors and apply changes according to the steps described for previous components.

About us about-us
In my template the About Us element is a menu that consists of four components. Three of them are text pages (philosophy, Testimonials and Services) and one is a Staff page where there are pictures and text near them.
1.To make changes at the Staff Page I need to open the folder with the files about this page and add the new pictures of staff by putting them into the appropriate folder instead of old ones.
Template file folder → Staff page → Items → Insert New pictures
2. Then I can open the code file of this page and insert new picture names.
Staff page → Staff page XML file →<item thumbnail=”items/1/New staff image.jpg“ title=” New Photo 1“>
3. The text can be simply inserted by replacing the old one in this code file for each picture separately.
Staff page → Staff page XML file → <![CDATA[ New Content ]]>
4. If you need to add more entries than there initially were just duplicate a piece of code and change the values. If you need to have less, simply delete the items you don’t need.
5. And of course, you can change the colors the same way as for the other components of the menu.

To insert the new text into the text pages just open the folder with the files on this page and replace the content between the content tags in the code file. Do not forget to save the file each time you make changes, so that they get applied!

Contact Page contact-page
1. To change your contact data open the contact page folder, and change the data in the code file by substituting the old info with the new one. Save.
Template files folder → Contact page → Contact page XML file
2. You can open colors XML file for this page to do the color changes you wish.

Sound
If there is a background sound in your template and you want to change it, just put new tracks instead of old ones in the template file folder. If your track names differ from the old ones you need to change them in the sound code file as well.
Template file folder →Sound XML file → <item name=”New Track 1 – Unknown Artist“ url=”New track.mp3” />

]]> http://tuts.flashmint.com/how-to-edit-flash-xml-template/feed/ 1