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!

To follow this tutorial you need Flash CS3 or greater, because we are using ActionScript 3.0.

Outline: we will resize our images in Photoshop, secondly we are going to use any text editor or Dreamweaver to write an XML file, and then we will go into Flash and do some ActionScripting in order to load our gallery.

The size of our gallery will be 800X450 which means that the max size of image can be 420 by height and 770 by width (if we want to make a 15px marging between the image and the edge of the gallery). You can set the size of the image anywhere between these. For this tutorial I recommend you to save images as 1.jpg, 2.jpg and so on.

Important thing to remember is that you should save your XML file and .fla file in the same folder with the images. So create a folder on your computer and name it, let us say, “XML flash gallery” and put the images you are going to use into this folder. It’s important to keep all files within the same folder because the XML file will reference the images while Flash file will reference the XML file.

Now that our images are ready, let’s write an XML file. As I said you can use any source code editor like DreamWeaver or Notepad ++ (that will be probably a better solution for beginner users) or a basic text editor like Notepad. I will use Notepad for this lesson. So, open a blank  document and save it as an .xml file named ImageGal.xml. Be sure to save it in our “XML flash gallery” folder because it’s really important. When you are done, type the next line in your new document:

Code block

<?xml version="1.0" encoding=@utf-8"?>

This is just a doc type definition. If you use Dreamweaver, you don’t have to enter this line, you can just set the type of the doc you are going to create as XML and this line will be filled in automatically.

The beauty of XML is that you can make up your own tags. If you are familiar with HTML coding, you will see that XML uses similar signs, like angle brackets, opening and closing tags, etc. But while HTML uses a fixed number of tags, XML enables you to write your own tags. To learn more about XML data, read these tutorials:

• Introduction to XML in Flash
• Writing/Saving XML files
• Using XML in Flash CS3/AS3

Let’s create our first tag, which will look like this:

Code block

1. <imageFolder>
2.  
3. </imageFolder>

It’s not hard to guess what this tag means, is it? We are going to organize our image gallery data. We’ve just marked a “container” for our images and now let’s create the first “child” in it:

Code block

<image>
    <imgURL>1.jpg</imgURL>
    <imgW>525</imgW>
    <imgH>420</imgH>
</image>

As you see, our image container has 3 pieces of information in it, which are image URL, image width and image height respectively. Notice that we didn’t write the address of the image file within the imgURL tag: because we saved our XML file right in the same folder as all of our images, we can just immediately reference the file name. As for the other two tags, you can grab the image width and height from the file properties window.

Now you can duplicate this <image> tag as many times as many images you have, filling necessary information and our XML file is actually written. Here is what I’ve got as a result:

Code block

<?xml version="1.0" encoding=@utf-8"?>

<imageFolder>

    <image>
        <imgURL>1.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>2.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>3.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>4.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>5.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>6.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>7.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>

</imageFolder>

Now we can jump into Flash and start building our image gallery there. However, in fact we won’t create anything special in Flash, we will make just one symbol and the rest is all coding. So, open your Adobe Flash CS3 or CS4 and create a new Actionscript 3.0 Flash file.

As I mentioned in the beginning, the size of our gallery is going to be 800×450, so let’s set necessary dimensions and make the stage color black via the document properties tab (see the screenshot below).

Now find a Rectangle tool on the toolbar and draw a rectangle of any size. Then select your new object and go to the properties panel. Set the dimensions of the rectangle to 800X450, just like our stage.

Now comes an important moment: press F8 to convert the object into symbol. Let’s name it Base. Please make sure it’s a Movie Clip and that the registration point is in the top left corner. Give this layer name Base and same goes for its Instance Name.

Now we are completely ready to process to the coding. Create a new layer and name it AS. Then select the first keyframe of this layer and hit F9 to open the ActionScript window.

Now copy the following chunk of code and paste it into your Actions window. Save the file. If that doesn’t make sense to you yet, don’t worry – a detailed line-by-line explanation goes further.

Code block

var xmlRequest:URLRequest = new URLRequest("ImageGal.xml");
var xmlLoader:URLLoader = new URLLoader (xmlRequest);
var imgData:XML;
var imageLoader:Loader;
var rawImage:String;
var rawH:String;
var rawW:String;
 
var imgNum:Number = 0;
var checkTime:Timer = new Timer(100);
var numberOfChildren:Number;
 
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
Base.addEventListener(MouseEvent.CLICK, nextImgF);
Base.buttonMode = true;
 
function xmlLoadedF(event:Event):void{
	checkTime.start();
	checkTime.addEventListener(TimerEvent.TIMER, checkF);
	imgData = new XML(event.target.data);
}
 
function checkF(event:TimerEvent):void{
	if(imgNum ==0){
		packetF();
	}else if(imgNum < numberOfChildren){
		imageLoader.unload();
		packetF();
	}else{
		imageLoader.unload();
		imgNum = 0;
		packetF();
	}
}
 
	function packetF():void{
	checkTime.removeEventListener(TimerEvent.TIMER, checkF);
	rawImage = imgData.image[imgNum].imgURL;
	numberOfChildren = imgData.*.length();
	rawW = imgData.image[imgNum].imgW;
	rawH = imgData.image[imgNum].imgH;
	imageLoader = new Loader;
	imageLoader.load(new URLRequest(rawImage));
	Base.addChild(imageLoader);
	imageLoader.x = (stage.stageWidth - Number(rawW)) /2;
	imageLoader.y = (stage.stageHeight - Number(rawH))/2;
 
}
 
function nextImgF(event:MouseEvent):void{
	checkTime.addEventListener(TimerEvent.TIMER, checkF);
	imgNum++;
}

Virtually our xml flash gallery is done! Go to Control => Test Movie or simply press Ctrl+Enter to see the resulting gallery. It should look like this:

We’ve just created a simple flash gallery that uses an XML file to render some data. Now let’s look into greater detail at the code you’ve pasted a minute earlier.

The first thing we need to create sort of a container where we will store the primary information about our XML file. Using a professional language, we need to declare a variable.

var xmlRequest:URLRequest = new URLRequest(“ImageGal.xml”); – here we created an XML loading request

var xmlLoader:URLLoader = new URLLoader (xmlRequest); – the URLLoader variable actually loads the aforesaid URL  “ImageGal.xml”. In other words, it’s loading our XML file.

Our next step is adding an event listener to the URL loader which basically says Flash to load the XML data immediately after the XML file is loaded (line 13 of our source code):

xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF); – this line means that as soon as the file ImageGal.xml is loaded, the function xmlLoadedF will be executed. We will need one more variable in order to create that function (see the 3d line of the source code):

var imgData:XML;

The function xmlLoadedF starts on the line 17 and looks like this:

function xmlLoadedF(event:Event):void{

imgData = new XML(event.target.data);

}

To see what’s going on, let’s trace the variable imgData by typing trace(imgData); right under the line imgData = new XML(event.target.data); Then just press Ctrl+Enter.

You will get the following result:

We see that our output window is showing us right the same data we’ve typed in our XML file. Everything’s working and you can now delete the trace line.

Our next step is actually to define the first image in our XML file on the stage here in a Flash file so we could view the image. To do this, we should add several new variables first (Line 4 and 5 of the source code):

var imageLoader:Loader; – here Loader is an AS3 class responsible for loading an object;

var rawImage:String; – this is a variable of String type, which is, in other words, a line of code containing some text data;

var imgNum:Number = 0; – variable of Number type is responsible for keeping numerical values, both whole and fractional numbers.

Now we need to add some code within the xmlLoadedF function to make the image displayed (line 38 of the source code):

rawImage = imgData.image[imgNum].imgURL; – as you remember, we’ve declared the rawImage variable above and it’s a string, this line defines the value of rawImage.

Another variable we’ve just declared is imageLoader and now we have to initialize this object as a Loader (line 42 of the source code):

imageLoader = new Loader;

Now that our value is initialized, let’s populate its property:

imageLoader.load(new URLRequest(rawImage)); – in this line, we call our imageLoader object’s load method. The load method takes a URLRequest object as its argument, so we create a new URLRequest object, and since its constructor accepts a string to create the rawImage request, I pass it our rawImage argument that function xmlLoadedF takes.

Here goes the next line of code:

Base.addChild(imageLoader); – with this line we add our imageLoader object, which holds a loaded image, onto the stage.

Now when you click Ctrl+Enter you should have the first image displayed:

Notice that the image is aligned at the top left corner because it makes a start from the registration point of our Base movie clip, which we set up as the top left corner, as you remember.

Now we have to declare two new variables (lines 6 and 7 of the source code):

var rawH:String;

var rawW:String;

As you might guess, these are responsible for the image height and width respectively.

Now let’s give Flash a hint at where it should take info about the image width and height, and of course, we will refer to our XML file:

rawW = imgData.image[imgNum].imgW;

rawH = imgData.image[imgNum].imgH;

Next step is to add the code necessary to center this image (lines 45 and 46 of the source code):

imageLoader.x = (stage.stageWidth – Number(rawW)) /2;

imageLoader.y = (stage.stageHeight – Number(rawH)) /2;

Notice that we converted raw here into a Number, although initially we defined it as String. We need this because Flash can’t do Math with strings, we have to operate numbers. In order to enable Flash to calculate the “x” and “y”  parameters we just point out that rawW and rawH are numbers in this case.

Now you can test the movie by clicking Ctrl+Enter and you’ll see that the image is now centered:

Let’s go further and make our image switch to the next one when we click on it. First, we need to add an event listener to our Base movie clip so that when it’s clicked next XML item is loading. Here it is (see line 14 of the source code):

Base.addEventListener(MouseEvent.CLICK, nextImgF);

Because Base is a movie clip, when you hover the mouse over it you won’t get that index finger cursor displayed. But using a small trick we can enable that finger to let users know the area is clickable. All we need to do is apply a button mode to our movie clip (line 15):

Base.buttonMode = true;

You will be able to preview this effect as soon as we define the function nextImgF. We will get back to this function later right after we write some more code necessary for its implementation.

The code we’ve written so far allows us to load data from our XML file using the xmlLoadedF function. However, this is not enough for our image gallery and we need a few more things to add to our code block. And a couple of new variables go first (lines 10 and 11 of the source code):

var checkTime:Timer = new Timer(100); – this variable contains info about timer which is going to continuously check the number of the image, so the program could know when the image is clicked and when it has to go ahead. In our case the timer will cycle every one tenth of a second infinitely.

var numberOfChildren:Number; – this variable of a Number type contains the number of children in the XML document. So far Flash only knows one child, var imgNum:Number = 0. We need to fix that.

Let’s define what numberOfChildren should be equal to:

numberOfChildren = imgData.*.length(); – * Symbol here means “any child inside the imgData”.

Now let’s actually start our timer. Because we need it to start as soon as our XML file is loaded, we will add some details for the xmlLoadedF function which, as you remember, gets executed right after the XML file is loaded (line 18, 19):

checkTime.start(); – with this line we tell our timer to start and execute every tenth of a second. And in order to tell the timer what it should execute every one tenth of a second, let’s add an event listener:

checkTime.addEventListener(TimerEvent.TIMER, checkF); – as you see, every tenth of a second our timer will call the function checkF.

We will define this function in a moment. Now I want to point out you that the xmlLoadedF function is called only once, and what we want is to make Flash reload image each time the imgNum changes.  That’s why we need to remove a junk of code from xmlLoadedF and put it into function that will be continuously recalled as we wish. Let’s create such function and call it packetF (line 36 of the source code):

Code block

function packetF():void{
	checkTime.removeEventListener(TimerEvent.TIMER, checkF);
	rawImage = imgData.image[imgNum].imgURL;
	numberOfChildren = imgData.*.length();
	rawW = imgData.image[imgNum].imgW;
	rawH = imgData.image[imgNum].imgH;
	imageLoader = new Loader;
	imageLoader.load(new URLRequest(rawImage));
	Base.addChild(imageLoader);
	imageLoader.x = (stage.stageWidth - Number(rawW)) /2;
	imageLoader.y = (stage.stageHeight - Number(rawH)) /2;
 
}

Look above at the line 37: we removed the event listener so that checking function would stop running as soon as function packetF is called.

Now let’s get back to the checkF function. We are going to put some if and else statements into this function to let the code decide between several potential paths (line 23 of the source code):

if(imgNum ==0){

packetF(); – the condition here is that if the imgNum equals 0, the function packetF should be executed.

Another condition we’ll state is that if the image number is less than number of children in the XML file, imageLoader object should unload, as we don’t want all the stack of image to appear on the stage:

Code block

}else if(imgNum < numberOfChildren){
		imageLoader.unload();
		packetF();

And the last part, in which we will define that in all other cases the program should unload the image loader, set the imgNum to 0 and execute function packetF:

Code block

}else{
		imageLoader.unload();
		imgNum = 0;
		packetF();
	}
}

Finally we can define nextImgF function (line 50 of the source code):

function nextImgF(event:MouseEvent):void{

checkTime.addEventListener(TimerEvent.TIMER, checkF); – we need to recover an event listener for our timer, so it could start calling the conditional function packetF.

imgNum++; – with this line we set function to take the imgNum and add one number to it.

}

And here the grand moment comes –  our simple XML image gallery is done! I’ve included seven images to my example photo slideshow, but you can add as many images as you want. Try how easy it is to edit an XML gallery – you just enter necessary data in your XML document and all changes automatically appear in your .swf file. So enjoy and good luck in your projects!

Here is how it should looks like:

Getting Started

We’ll need Tween Effects to use them in our player. Click here to download TweenMax.
I’ll make the all ActionScript explanations in the code areas. All you need is following the tutorial carefully. I’m sure that even if you don’t know ActionScript, you’ll be able to create this player. Let’s start to create it!

Step 1 – Preparing The Folders

We must create a main folder to collect all folders and files. Create a new folder and apply the steps like the following:

1.Move “com” folder (from TweenMax) into the main folder.

2.Create a new folder called “musics”. Move your own songs into the this folder.

3.Create a ActionScript 3.0 Flash Project and XML Project (by using Dreamweaver or Notepad).

4.Save as them.

You should have had a folder like this:

Step 2 – Properties of The Canvas

Open the project you saved. Every element of the design can be changed. I used sample values. Your stage size must be about 300×200. Background Color (#191611 )

Step 3 – Creating The Background Of MusicBox

We’ll use a rectangle and square for background of MusicBox. Outline Color (#3E362D), Main Color (#2F2922). Fill the shapes like the following.

Step 4 – Importing Cover Image

Import (Ctrl + R) your cover image to the stage and embed it. Cover image must be small than cover background (95×95).

Step 5 – Creating Gradient

Create a new rectangle and crop it like the following. Reduce its alpha value to 10. You can use every color for making this effect.

Step 6 – Creating Player Elements

If you have any player icon set or like this, of course you can use it in your project. I used “Webdings” font set. We have 5 elements in the player. Now, we’ll give them their instance names. Pause Button: “PauseBtn”, Play Button: “PlayBtn”, Next Button “NextBtn”, Previous Button: “PrevBtn” and finally Mute Button “MuteBtn”.

Step 7 – The Name of The Song

Create a dynamic text on your main scene. Set its properties like the following.

Step 8 – Preview of The Design

We have just finished the design of the MusicBox. I’ll make the MusicBox “drag&drop”. So, it can be moved each folder easily. Also, I’ll add a drop shadow effect ( Blur X-Y: 8, Quality: High, Distance: 0 ) to my design. Select all items and covert them to the MovieClip.

Step 9 – Coding The Design

Now, we’ll write the codes of the design. I’ll use XML File for calling songs and titles. I want to start with defining the elements and variables of the player. Open MovieClip and write the following codes:

///Defining The Elements and Variables of the Music Player

var MusicLoading:URLRequest;//File Request

var music:Sound = new Sound();

var sc:SoundChannel;

var currentSound:Sound=music;

var CurrentPos:Number;//Current Position of the Song

var xml:XML;

var songlist:XMLList;//Music List from XML

var currentIndex:Number=0;//The Number of Index

var MuteFunc:SoundTransform = new SoundTransform();//Mute Functions

var XMLLoader:URLLoader = new URLLoader();//XML Loader

Step 10 – Coding The Design

We’re going on with XML Actions.

//If XML File Load successfully, it will be voided this actions:

XMLLoader.addEventListener(Event.COMPLETE, success);

function success(e:Event):void {

        xml=new XML(e.target.data);

        songlist=xml.song;//For adding a new song in XML File.

        MusicLoading=new URLRequest(songlist[0].file);

        music.load(MusicLoading);

        sc=music.play();

        MusicName.text=songlist[0].name;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

//The Name of the XML File.

XMLLoader.load(new URLRequest("playlist.xml"));

Step 11 – Coding The Design

Adding Event Listeners for the control buttons.

//Add Event Listeners for control buttons

PauseBtn.addEventListener(MouseEvent.CLICK,pauseSong);

PlayBtn.addEventListener(MouseEvent.CLICK,playSong);

NextBtn.addEventListener(MouseEvent.CLICK, nextSong);

PrevBtn.addEventListener(MouseEvent.CLICK, prevSong);

MuteBtn.addEventListener(MouseEvent.CLICK, Mute);

Step 12 – Coding The Design

Next Song Functions.

//Next Song Functions

function nextSong(e:Event):void {

        if (currentIndex < (songlist.length() +1)) {//Next Song(+1)

               currentIndex++;

        } else {

               currentIndex=0;

        }

        //New Request for Next Song

        var nextSongFunc:URLRequest=new URLRequest(songlist[currentIndex].file);

        var nextTitle:Sound=new Sound(nextSongFunc);

        sc.stop();

        MusicName.text=songlist[currentIndex].name;//Writing New Song's name

        sc=nextTitle.play();

        currentSound=nextTitle;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

Step 13 – Coding The Design

Prev Song Functions.

//Prev Song Functions

function prevSong(e:Event):void {

        if (currentIndex>0) {

               currentIndex--;

        } else {

               currentIndex=songlist.length()-1;//Prev Song(-1)

        }

        var prevSongFunc:URLRequest=new URLRequest(songlist[currentIndex].file);

        var prevTitle:Sound=new Sound(prevSongFunc);

        sc.stop();

        MusicName.text=songlist[currentIndex].name;

        sc=prevTitle.play();//Writing Prev Song's name

        currentSound=prevTitle;

        sc.addEventListener(Event.SOUND_COMPLETE, nextSong);

}

Step 14 – Coding The Design

Pause and Play Functions.

//Pause The Song (sc.stop)

function pauseSong(e:Event):void {

        CurrentPos=sc.position;

        sc.stop();

}

//Play The Song

function playSong(e:Event):void {

        sc=currentSound.play(CurrentPos);

}

Step 15 – Coding The Design

Mute Button Functions. Here, We must create a new dynamic text to show status of the mute button. Open “MuteButton” and create a dynamic text. Give it a instance name called “mute”.

MuteBtn.mute.text="VOLUME ON"; //First Text

//We'll use Sound Transform Actions For "Mute" and "Unmute"

function Mute(e:Event):void {

        MuteFunc.volume=0;//Close the volume of the music.

        SoundMixer.soundTransform=MuteFunc;

        MuteBtn.mute.text=String("VOLUME OFF");//When clicked to the "MUTE BUTTON"

        MuteBtn.mute.alpha=0.9;

        MuteBtn.addEventListener(MouseEvent.CLICK, UnMute);

        MuteBtn.removeEventListener(MouseEvent.CLICK, Mute);

}

//UnMute

function UnMute(e:Event):void {

        MuteFunc.volume=1;//Open The volume of the music.

        SoundMixer.soundTransform=MuteFunc;

        MuteBtn.mute.text=String("VOLUME ON");//When clicked to the "MUTE BUTTON" again"

        MuteBtn.addEventListener(MouseEvent.CLICK, Mute);

}

Step 16 – Effects on the Buttons

Finally, I want to add some effects to the control buttons. Now, We need TweenMax. So, Type these codes to the each button’s first frame.

//Import Tweens

import com.greensock.*;

import com.greensock.easing.*;

//Mouse Over & Out Functions

this.addEventListener(MouseEvent.MOUSE_OVER, MouseOverFunc);

this.addEventListener(MouseEvent.MOUSE_OUT, MouseOutFunc);

//Mouse Over Function

function MouseOverFunc(e:Event):void {

//Glow Effect

        TweenMax.to(this, 0.5, {glowFilter:{color:0xb0a295, alpha:1, blurX:4, blurY:4}});

}

//Mouse Out Function

function MouseOutFunc(e:Event):void {

        //Without Glow Effect

        TweenMax.to(this, 0.5, {glowFilter:{color:0xb0a295, alpha:0, blurX:4, blurY:4}});

}

Step 17 – Right Click Menu

Finally, We’ll add Right Click Menu to the MusicBox. When you click to the MusicPlayer, you’ll see a context menu with Pause Song Function.

//Right Click Menu Actions

var RightClickMenu:ContextMenu = new ContextMenu();//New Menu

RightClickMenu.hideBuiltInItems();//Zoom, Select ets. are hidden.

var menuItem1:ContextMenuItem=new ContextMenuItem("© 2010 - AS3 MusicBox");//The Name of The First Item

var menuItem2:ContextMenuItem=new ContextMenuItem("Pause The Song");//The Name of The Second Item

menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, pauseSongFunc);//Pause Song Event Listener

RightClickMenu.customItems.push(menuItem1);

RightClickMenu.customItems.push(menuItem2);

this.contextMenu=RightClickMenu;

function pauseSongFunc(e:ContextMenuEvent):void { //Same actions with "Pause Song"

        CurrentPos=sc.position;

        sc.stop();

}

Step 18 – Creating XML File

Open your XML File. Write these codes. “Name” is the title of the song. “File” is the path of the song with file format.

Final Step – Conclusion

Congratulations. You’re done! Test your movie and listen to the musics. You’ve created a MusicPlayer with ActionScript 3 and XML. The possibilities are endless. You can provide and use this project. 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.

If you follow each of the listed steps carefully, as a result you will get a flash menu like this:

Step 1: creating a shape

Open your Photoshop and create a new document (Ctrl+N) with size 600×300 pixels. Set a color for the background: black gives a good contrast, so you can use it unless your menu color is going to be black.
Create a new layer (Ctrl+Shift+N) and select a Rounded Rectangle Tool (U).

In Rounded Rectangle Tool settings activate Shape Layers button and set Radius:8px.
You can set a different radius value according to your taste, just take some time to experiment.

After you are done with Tool settings, draw a rectangle shape of the needed size (mine is 120x45px). Set the color. Mine is color:#25b6b1. To change the color click twice on the layer of your rectangle shape and pick the color you need from palette.

Step 2: adding gradient
Select   Layer > Layer Style > Blending Options and set all the values like shown on the screenshot.  Select Gradient Overlay and place a tick in the box next to it.

To change the color click twice on the Gradient palette and you’ll see a color changing tool with four sliders (two on the top and two on the bottom). To set the color for each of the sliders you need to click twice on it. For two sliders on the bottom set Color:#00fff6.

The sliders on the top change Opacity value. Make the right slider active and set Opacity:0.

When you are done with this, press OK and your button will look somewhat like this

Step 3: inner shadow
Go to Layer > Layer Style > Blending Options and select Stroke. Set Size:1px, Position:Outside, Color:#02fbf2.
Then select Inner Shadow and set the Color:#003e39, Opacity:84%, Size:9px.

The result will look like:

Step 4: brush
Create a new layer (Ctrl+Shift+N) and select a Brush Tool (B). Use a standard Airbrush. Set Color:#006965, Diameter:200px.

• Click 2 or 3 times on the top of your button. The more times you click the more intense shadow you will get, so you need to watch for the best result.
• Then do a Ctrl+click on your button layer in the Layers panel at the right side of your screen to highlight this layer.
• After this you need to invert the highlighting by clicking Ctrl+Shift+I. Now press Delete.

Step 5: transparency
Create a new layer (Ctrl+Shift+N). Select a  Rounded Rectangle Tool (U) with the same settings as the previous time. Draw a rectangle object (approximate Size: 115x25px, Color:#79fffa).
Then click Add Layer Mask on your Layers panel.

Add Transparency to the layer using Gradient Tool (G). Hold Shift and draw a vertical line of the gradient from the bottom the the top ( gradient Color: back+white). 

Step 6: reflection
Select the layers with Shift button and put them into a folder (Ctrl+G) 

Then duplicate this Group by clicking with the right button if your mouse on it and selecting Duplicate Group.
Then you need to unite all the layers into one layer. To do this you need to highlight this folder and press Ctrl+E.

To look better the button needs to have a reflection. To make a reflection you need to rotate your duplicate layer (Ctrl+T). Do a right-click on the object and select Rotate 180′

Place the layer like shown on the screenshot.
And, like before, Add layer mask and use the Gradient Tool (Color:transparent and black). Make your shadow look somewhat like on the screenshot by playing around with opacity. 

Step 7: text
Your button is ready, all you need to do is place a text of its name. Select Horizontal Type tool (T), click on the place where the text must be and type in your button name. Press Ctrl+Enter.

You can also add a shadow effect to the text by following Layer > Layer Style > Blending Options and select Drop Shadow. Set parameters about Opacity:33%, Size:5px, Color:#019b95.

To finish your flash menu you need to make copies of your button and place them next to each other. It’s done!

Step 8: cutting parts for Flash animation

Recreating this neat menu in Flash will require 2 elements of the button: the button itself and the shadow. Let’s crop & save them.

In the Layers section hide all button groups and leave only one button. Hide its shadow and its text. Then use the Crop Tool to crop the button. My crop size was about 132*49. And don’t forget to hide the black background layer. Save the resulting button picture using File > Save for Web & Devices > Preset : PNG-24 > Save I have saved it as bg_button2.png

Then you need to perform exactly the same steps for the reflection of the button. So basically you need to have 2 .png files before we move on to Flash animation: bg_button.png and reflection.png

Step 9: first steps in Flash (importing files & inserting layers)

Open Adobe Flash CS3 and create a new Flash File (ActionScript 2) document. You will need to import 2 image files to library : bg_button.png and reflection.png. This can be done either by using File > Import > Import to library or you can simply drag’n'drop files into the library window.

Drag-n-drop bg_button.png to the workspace and convert this object to a Movie Clip. This can be done by Rightclick > Convert To Symbol > Movie Clip or you can simply highlight it with Selection Tool (black arrow) and press F8. Let’s name this movie clip “whole button“.

After the movie clip is created doubleclick on the button image to enter it. You will see that in the address bar “whole button” movie clip appeared right after the “Scene 1“. Now we will need to create movie clips for each of the objects of the “whole button”, there are 3 of them: button itself, reflection and text. Each movie clip should have its own layer and we will need to create 2 more layers called “action” and “button area”. Thus I have created 5 total layers with the names: button, reflection, text, action, button area.

Step 10: creating Movie Clips

Please pay attention that “Layer 1″ was renamed to “button” and it still contains the picture of a button. Let’s select this picture and convert it to a movie by pressing F8. I have named it “mc_button_back” and it is under the “button” layer. Now you will need to select “reflection” layer, drag-n-drop reflection.png from library right under the button (you can use arrow keys to move it more precisely). After this is done press F8 and convert it to movie as well. I have named it “mc_reflection“. The next step is to add some text to a button.  Choose the “text” layer, select Text Tool and insert some text on the button. You can easily edit the text style by referring to Properties menu.

After setting this up convert the text to Movie clip by pressing F8. I have named it “mc_text”. This way we have all our button parts in places and your library should look like this:

Step 11: using Timeline & setting an amplitude

The next step will be to make the button jump and return while hanging a mouse cursor over it. For this purpose we will need to use the Timeline.  Let’s have 10 frames for button to jump up and another 10 frames to go back down. Highlight the first frames of text, reflection and button layers. Press Alt and holding it drag them to the 10th frame of the Timeline and release the mouse button. This will copy the frames. Repeat the procedure and copy those three frames further to the 20th frame.

The next step will be to define the amplitude assigned to button jumping action. Highlight the 10th frame under the “button” layer. Be sure that you are using the Selection Tool, and define the position of a button in its highest point. Then go to “reflection” layer and move the reflection a little down, using the down arrow or moving it with the Selection Tool. And absolutely the same way fit the text to a button that has jumped up. Now we should have a nice button that is flying above the ground and the reflection slightly moved down.

Step 12: defining actions

Highlight the “action” layer. Click on the very first frame and insert a keyframe. This can be done by pressing F6, or rightclick > Insert keyframe, or in the manu above go Insert > Timeline > Keyframe. Then highlight the 10th frame and press F6. Do the same for 20th frame. Then insert keyframes for the 2nd and 11th frames. You will have something like this:

Now we will have to define some keywords for our action script to refer to. Let’s insert an action to the 1st and 10th keyframe of the “action” layer. This can be done by highlighting a keyframe and pressing F9, or you can use right click and choose action from the dropdown menu. What you need to type in the appeared window is just:  stop();

Don’t forget to do the same for the 10th keyframe! Ok. We are almost done with the “action” layer. Let’s define the frame names of the 2nd and 11th frames. This is done by highlighting a frame and looking down at the Properties menu. Name the 2nd frame “over” and the 11th “out“.

Step 13: creating a button

Now let’s finish with automatization. Highlight the “button area” layer and chose the Rectangle Tool. We will need to create a rectangular which will cover our button. (if it does not let you, ensure that you have at least one frame in the “button” layer) Then convert the rectangular to a Button. I have named it “button action”

Now double click it and you will go inside the button. Under Layer 1 hold the first frame with your mouse left button and drag it till the Hit column.

To get out of the editing this action you can click somewhere outside the grey rectangle or click the “whole button” in the navigation bar.
Step 14: Setting up animation

Now when you can see that your button is blurred. It’s ok. Next we will need to insert some code into this button area to have it working. Press F9 while having our blurred rectangular chosen and insert the next into the action window:

on(rollOver)

{

gotoAndPlay(“over”);

}

on(rollOut)

{

gotoAndPlay(“out”);

}

Now we wiil need to define the action itself. Highlight some part of the timeframe for 3 of our objects so that 10th frame was in the center of the selection. Go down to Properties and choose the Motion setting for Tween.

Step 15: Setting up the framerate and spreading the button area

The next step will be to set framerate to have or button jump faster. This is done by double clicking the current frame number.  Use 31 frames per second.

And the last thing that needs to be done for button to work – we must spread the “button area” layer from 1st to 20th frame. You can just click on 20th frame and press F5 for it to be done.

Our “whole button” is ready now! Congrats!  You can get out of the button by double clicking outside of it, or pressing Scene 1. You can press Ctrl + Enter to see how well it jumps!

Step 16: Some more tips

Still there are some tricks we can do about it. I’ll show you some of them:

When highlighting the frames area for 3 objects you can set the Ease parameter for the button to go smoother. Set it to 100 and see the result!

And to have our button animation even more sophisticated we can make the text change its color. For this purpose you will need to refer to the 10th frame of the “text” layer. Select the text with the Selection Tool and go down to the Properties section. In the Color drop-down box choose Tint and assign black color to the text.

Step 17: compiling the whole flash menu

At last we have our button ready! Now we need to clone it and compile the whole menu! Let’s duplicate our home button movie clip to make a separate movie clip for each button.

Then ensure that your current place is Scene 1, not the “whole button” and drag-n-drop newly created buttons to have the full flash menu. After this we will need to have a separate text movie for each button. You already know how to do this. Just delete the original one from each button, and create its own movie clip for each button.

Your Flash Menu is now complete. Now you can add another layer at Scene 1 and draw a big black rectangle for background and our menu is done!

Here you can check the live DEMO of our COOL flash menu:

In this tutorial we will create an advanced blue preloader with beautiful reflection effect and a big easing text. This requires a little knowledge about animations and action scripting.

About the Author:
Hi. I`m Danny, a freelancer web developer from Romania and I like to write interesting tutorials in Flash and Photoshop. You can visit my website for more great and useful tutorials: Extreme Design Studio.

Advanced Preloader with Reflection

Step 1

Create a new file with Action Script 2.0 and go to Modify – Document (CTRL+J) and do the settings below:

Import to scene (CTRL+R) the two main images bar.png and bar_h.png and put the half bar under the full bar and align them to middle. Right click on each object and convert it to a movieclip (F8) and rename the first layer to preloader and apply the glow filter and set the alpha to 50.

Step 2

Select both bars and press F8 to convert them in a single movieclip. Double click the object. Inside the movieclip will be the main animation. Now select again the two bars and press F8 to convert them in a single movieclip. Repeat this once more to have the possibility to set the alpha to 0 for the both bars.

Double click again on the movieclip and now you must be inside of a two movieclips. Very good. Now insert a keyframe (F6) on the frame 10 then right click on the frame 1 and select Create Motion Tween. Select frame 1 and click on your object. In the Properties Panel you will find the option Color and set it to Alpha 0.

Ok now we have the animation for our bars. Right click on the frame 20 and select Action (F9) and write stop();

Step 3
On the timeline bar click on the second movieclip to return. On the image above the second movieclip is named as Symbol 5. Double click Layer 1 icon and mark View layer as outlines and rename it to bars.

Insert a keyframe on the frame 3 and copy your bar (CTRL+C) and paste in place (CTRL+SHIFT+V) and move it with 10 pixels using SHIFT + Right Arrow.

Repeat this step for every uneven frame (Frame 5 – 3 bars, Frame 7 – Frame 4 bars… until you reach frame 100).
You don’t need to make 50 bars. Try to insert 2 or 3 frames until you reach frame 100. See the picture below:

Step 4
Insert a new layer and rename it to percent. With the Text Tool (T) create a text 100%. Use Arial font with size 50 and left aligned. Instance field should be txt_mc and var field should be txt and don’t forget to embed numerals and punctuations.

Step 5
Very good now we must add a movieclip to move the text using action script. Insert a new layer and rename it to move. With the Rectangle Tool (R) draw a small white rectangle and convert it to movieclip (F8) with alpha 0, instance name moving and the X Axis same like the text. Insert a keyframe to frame 100 and move the object at the end of lines. Try to view the picture below:

Step 6
Return to Main Scene, right click on the movieclip and select Actions (F9) and write the following code:

onClipEvent(load) {
total = _root.getBytesTotal();
}

onClipEvent(enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
txt = +percent+”%”;
txt_mc._x = moving._x;
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Now add a keyframe on frame 2 and put stop(); for the both frames (F9). On the frame 2 you can put a text field with Content Loaded and a big image to test your preloader.

Final Work

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.