So, like a superhero looking for the criminals, I went out on the Internet to see if I could track down some of the best ways and most functional contact forms available. In this article you will find what I found with complementary downloadable code to set up your form.

Enjoy!

1. HTML Contact Form

This stylish but simple contact form can complement just about any website in a good way. Its simple and straight forward layout makes for an easy way for the visitor to get in touch with you.

The form consists of three sections. Name, Address and Message. Each with its own input fields where the visitor can submit his contact info. You can easily change the border color, background color and setup even more fields if you so need.

You are allowed to change it, add or remove fields that you see fit your needs. You can of course set the tables width to fit the theme of your website or blog.

To change the names of the input fields which will allow you to generate nicely formatted results after submission you can just change the names of the fields to complement the field names used in the delivery system you are using. Consult your server provider to make sure what names they are using in their delivery system.

2. AJAX/PHP Contact Form

This form is a combined AJAX/PHP form using all kinds of fancy features. Simple to modify and a really nice addition to any website. It’s clean and stylish and depending on what you are after you can really add some great design flavor to your form.

Features include:

• Form Validation using FormCheck2.
• Spam Check.
• Display user IP, user agent and referrer in the message.
• Display a dialog box when message is sent successfully.
• Inputs and Text areas are styled with NiceForms.
• Works in the most recent browsers.

All these features will make sure that your form is not only perfectly user friendly but also prevents nasty spam procedures from sending you annoying mass messages. If you should still get spam you can always block the IP address.

Source: Web Kreation

3. CSS/PHP Contact Form

This form is created using a combined technique of CSS and PHP to accomplish a stylish and really useful contact form for your website or blog.

It resembles the Simple HTML Contact Form but this one may be a bit more customizable and it has some nice and useful control features which will make it both user friendly and spam safe.

Features include:

• Required input field check,
• Form validation using a simple captcha system.
• Design modification friendly.
• Streamlined user experience.

Some really useful features to make sure that your form is fully and correctly filled out when the user submits it.

With a few modifications and graphics you can have a clean and professionally designed contact form for your blog or website.

Source: CrazyLeaf Design Blog

4. Flash / PHP Contact Form

This particular form uses Flash and PHP to create a simple but quite useful contact form. There isn’t any particular fancy features coming with this form but its streamlined user interface makes the form quite powerful.

However, it being created mostly in Flash you have every chance of making the form quite stunning when it comes to designing it. You can also create new input fields and buttons that match your website or blog theme. You can even go ahead and animate the buttons or the input fields. The entire look of the contact form is up to you.

The easy setup makes this form quite powerful in any website design. A PHP file is included in this download to handle the submission system which you simply upload to your server and you are ready to go.

I am sure that you can add validation, captcha and/or input field check to the form if you have just a little bit of flash experience along with some skills in PHP coding. Fusing the two is quite easy once you get a hang of it.

Source: Flash Template Design

5. Pure AJAX Contact Form

A simple but well stylised contact form that sure will make your visitors feel welcome to contact you right away.

This form is based on pure AJAX code which makes it truly customizable if you are a little bit familiar with AJAX programming. Add or change any field you need changed to get it just the way you want it.

This form has no particular features to brag about like the more advanced forms. However, it has a nice CC button that will enable the visitor that uses the contact form to send the form submission to him or herself as well.

Implementing this on your site is quite easy. All you have to do after downloading this is either to copy the form code and paste it right where you want it on your site. Or, you can simple just use the original html file and all should be good to go.

Powerful, little hassle and professionally looking.

Source: MTSix

In this tutorial we will be creating a Slidshow application for your site or blog. This tutorial is once again very basic and uses pretty simple ActionScripting to get things done. As usual I will explain what the script does so you can follow what’s going on and when.

Necessary skills are basic and we’re going to do some ActionScripting, Masking and XML scripting which will make sure we can use this slidesho application whenever and how many time we want. This means we will load pictures and picture tag lines dynamically which enables you to always update your Slideshow with new content.

Software’s and Languages used:

• Adobe Flash
• Adobe Photoshop
• ActionScript
• FTP Client

Step 1

The first thing we have to do is to create a User Interface for our Slideshow Player. The interactivity is going to be a Next, Prev and a Slideshow Speed button. There are millions of ways you can design your User Interface to fit your blog or website. Your creativity is really only the limit.

I have created a fairly simple and straight forward User Interface. What’s important to remember here is to Layer everything so you can dis include some things when adding your background in Flash for example. You wouldn’t want to have you player showing all the buttons as it then will become kind of weird looking when you adjust the speed for example.

Here is my User Interface all put together:

Step 2

Now when we have our User Interface it’s time to setup our Flash project. Open your Adobe Flash and open a new project. Make it ActionScript 2.0. After your new project has been created open the “Document Properties” window by either double clicking on the “Frame Rate” display or by pressing “Ctrl-J“.

With the window open add these settings (considering you have the same User Interface Properties as I am using in my User Interface. Width, Height etc…):

• Title: Slideshow Player
• Width: 263px
• Height: 356px
• Background Color: White (#ffffff) – Considering you want the same background color.
• Frame Rate: 25 fps (Frames per Second)

Step 3

Let’s create the layers we need for this application. We’re going to be creating a pre-loader for the Slideshow. Not a pre-loader that loads all the pictures at once as this would make our player slow and frustrating before it actually begins if we were to use a vast amount of pictures to Slideshow.

The layers we are going to need are (from top to bottom):

• actions
• buttons
• speedcontrol
• textfield
• display
• preloader
• background

If you want to add for example a title to your player you can just go ahead and add another layer. It’s really up to you what you want to add to this player.

In the “display” layer we are going to play around with masking to get the result we’re after when changing images. But we will get to that.

Step 4

Let us start adding stuff to our player by adding the background we’re going to be using. Before adding my background (User Interface) I have to take out everything that will be moving around. Would want to reveal a stuck nob while the movable object is floating around.

So, in Photoshop I will just de-select the layers I don’t want visible in the background of our Slideshow Player.

After that, let’s import our background to our project. With our “background” layer selected click “File” -> “Import” -> “Import To Stage…”

When your graphics have been imported you might have to align them properly. Either use your “align” toolbox to your right or set X and Y in your “info” box to your right to 0 and 0. This will align your background to the upper-left corner.

Go ahead and lock the layer to prevent any movement.

Step 5

Now with out background all included. Let’s create the pre-loader for our pictures. So, create a rectangular box over the “Speed Slider Bar” with the size of Width: 250, Height: 12. Color doesn’t matter as our box will later become transparent anyways.

With that done we need to convert our rectangle into a video clip. With the recangle selected click “Modify” -> “Convert To Symbol…” Use these settings for the new movie clip:

When done converting the rectangle into a movie clip make sure you set the “Instance Name” to “preloader“.

Double click the newly created movie to get inside the movie for us to set things up. When inside the movie create one new layer and name them (from top to bottom):

• preloaderbar
• loaderbackground

What we have to do now is to actually make our background transparent so it show our real background and it’s details.

Select the rectangle that we just created a movie clip out of (this time inside the movie). We are going to convert it into a “bitmap” so we can mess around with it’s properties a little. Click “Modify” -> “Convert To Symbol…” Use these settings for our “bitmap”:

Alright, now we have a “bitmap” to play around with and will be able to set a bunch of settings if we so wanted. However, there is only one setting we really need to mess around with this time. With the “bitmap” selected you will see a bunch of properties that we can set in the lower part of your screen.

It’s the “Color” setting we’re going to change and in this case the “Aplha” level. So, go ahead and click the roll down menu and choose “Alpha” and set the level to “0%”. As you can see now our background layer is transparent and out of the way. Great!

Time to create the actual loader in itself.

In our “prelaoderbar” layer let’s create what’s going to be our Pre-Loader indicator bar. Create another rectangle (pick the color you want) with the exact same size: Width: 250, Height: 12 and place it exactly where the first one was placed. Should look like this:

With that done we now have to create a movie clip out of this rectangle as well. So, go ahead and click “Modify” -> “Convert To Symbol…” and use the same settings we used last time we created our movie clip. Only this time use the title “Loader Bar Indicator“.

While having the newly created movie clip selected set the “Instance Name” to “preload_bar“.

When this is done, let’s make it a bit transparent to make sure we get that cool effect of being able to look through it to see the details on the background.

With the newly created movie clip selected go ahead and change the “Alpha” level again to 20%. This will make it transparent but still visible enough to be seen and show the loading progression.

You should now have something looking like this:

Step 6

Time to create the actual display. The pane where we are going to show our pictures. Start by creating a square box where you want your pictures to be shown in the “display” layer. My box measures: Width: 249, Height: 186. Align it to where you want it to be positioned. Here is where I positioned my picture window:

Alright, time to convert this box into a dynamic loader by converting it into a movie clip. As usual, convert it by clicking “Modify” -> “Convert To Symbol…” Again use the “Movie Clip” selection and set the name to “Slidehow Window“.

Now, set the “Instance Name” to “picture“. And after doing that, double click your movie clip and when you enter the inside of the movie clip, select that square you just created and delete it. There should only be an empty frame left in the layer bar. This will make the window non visible before there are any pictures in it. Later when we load the image it will be resizing itself.

In order for the pictures not to size up larger then the actual position where we want the picture to be show we are going to create a mask layer so that any excess will be cut off when this happens.

Now, with the “display” layer selected create another layer. Name the layer “masking“. In the masking layers first frame. Create another box exactly sized as the old one. Width:249, Height: 186.

After doing that, right click the “masking” layer and select “Mask“. You will now notice how your newly created box disappears. You have now created a masking for the picture. The picture will only be visible inside this box. Anything that goes outside the masking limits will become invisible. Everything will be kept nice and tidy.

Now we should be done setting up our picture pane and it’s time move on to the next step.

Step 7

In our Slideshow we would like to have some tags/info showing for each image so the viewer will know what he/she is looking at. This is easily created with a dynamic text field which we then can program to load text along with the image showing.

So, lets create a dynamic text field on our Slideshow. Pick the “Text” tool and create a text field where you want it positioned. My text field measured: Width: 244, Height: 98. It’s positioned here:

Now we need to set up our text field so that it will be dynamic and able to load text from an XML document. In the text fields “Properties” that you find in the lower part of your screen, add these settings:

• Change the Text Type to: Dynamic
• Instance Name: “desc_txt“
• Font: Arial Bold
• Font Size: 11
• Font Color: #777777
• Line Type: Multiline
• Align Text: Left
• Embed: Uppercase, Lowercase, Numerals, Punctuation, Basic Latin

Alright, our “tag line” text field is set up. We have another text field to set up as well. The text field that will display how many pictures there are in the Slideshow and what image we are currently displaying.

So, add another text field using these settings:

• Text Type: Dynamic
• Instance Name: “pos_txt“
• Font: Arial Bold
• Font Size: 12
• Font Color: #ffffff
• Line Type: Single Line
• Align: Center
• Embed: Uppercase, Lowercase, Numerals, Punctuation, Basic Latin

I have chosen white just because it’s the least probable color to cover the most part of the image you are going to show. But font color is entirely up to your taste so go ahead and change it if you feel you want another one to fit your website/blog theme.

Here is the finished positioning and layout of the text fields:

Now our text fields are set up and it’s time to move on to the next step yet again.

Step 8

Time to create the Slideshow Speed adjuster. We’re going to make a little drag box that will adjust the speed of the Slideshow and how often it changes images.

So, go ahead and create a rectangle over the loaderbar in the “speedcontrol” layer. Size it: Width: 250, Height: 12.

After doing that, we once again must create a movie clip out of our rectangle to make it interactive. Click “Modify” -> “Convert To Symbol…” Use the same settings as usual but name it “Speed Control“.

Set the “Instance Name” to “speedbar“.

Double click the newly created movie clip to get inside it. In there, create another movie clip out of the rectangle again. Same procedure but name it “Speed Bar Background“. Also set the “Instance Name” to “speedBG“.

With then newly created movie clip (“Speed Bar Background” selected. Set the “Alpha” level to 0% to make it transparent.

We now need to add our drag box. Import it by clicking “File” -> “Import” -> “Import To Stage…” to the same layer and frame as your newly created movie clip. Position it all the way right in the Speed Bar.

The “Drag Box” is now a “graphic” entity and we need to convert it into a movie clip also to be able to play around with it. Convert it using the same settings as usual but name it: “Dragger“. Also set the “Instance Name” to “dragger“.

With everything set up properly you should now have something looking like this:

Step 9

Alright, so all our interface functions is set up graphically. It’s time for us to add some interactivity to the things. Let’s add our buttons to the user interface.

As you can see our background is already showing our buttons. Well, this is no problem, just makes it easier for us to align and position our buttons. They will never be moved out of their position so the background is never going to be seen anyways.

Now, go ahead and add your buttons to the user Interface. Position them where they are supposed to be.

After you have positioned your buttons, go ahead and convert them to buttons. Do so by clicking “Modify” -> “Convert To Symbol…” name them “Prev Btn” and “Next Btn” and choose “Button“. Set their “Instance Name” to “previous_btn” and “next_btn“.

Now we have some working buttons as well. You can go ahead and add different stage images to the buttons if you like. It’s all up to you what you want your buttons to do when “Hovering”, “Clicked” and so on.

Step 10

Now we need to add some functionality to our User Interface. Time to for the core. The ActionScript that actually will make things move. Look at it as if we’re bringing life to our Slideshow with Actionscript.

delay = 10000;

Sets the speed of the Slideshow. The 10000 indicates the time between each image. This can later be adjusted by our Speed Control drag box.

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = “file not loaded!”;
}
}

Line 1 -Opens up a function that will load our XML file and store the contents.
Line 2 – Checks if any XML file has already been loaded.
Line 3 – Sets up our variable parent.
Line 4 – Creates the child variable “image” to xmlNode.
Line 5 – Creates the child variable “description” to xmlNode.
Line 6 – Creates a variable that will hold the number of total images.
Line 7 – Calculates the total number of images in the Slideshow.
Line 8 – Holds the current image that will be displayed. In this case the first one.
Line 9 – Holds the current description that will be displayed. In this case the first one.
Line 10 – Ends the calculation process.
Line 11 – Directs the Script to the “firstImage” function.
Line 12 – If no content is found, then this…
Line 13 – Content not loaded.
Line 14 – Ends the “else” process.
Line 15 – Ends the if loaded process.

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};

Line 16 – Creates a variable to hold the XML file content.
Line 17 – Ignore any line spacing that might occur in the file.
Line 18 – Sets up the load session.
Line 19 – Loads the XML file. (Here it is important to add the EXACT pathway to your xml file on the server. Meaning for example “http://www.sitename.com/slideshow/images.xml”)
Line 20 – Opens up button functionality. Listens for interactions.
Line 21 – Opens up a function that listens for Key strokes.
Line 22 – If “left” key is pressed.
Line 23 – Go to prevImage function and execute it.
Line 24 – If “right” key is pressed.
Line 25 – Go to nextImage function and execute it.
Line 26 – Close “if” process.
Line 27 – Close loadXML function.

previous_btn.onRelease = function() {
clearInterval(myInterval);
if (p == 0) {
lastImage()
} else {
prevImage();
}
};

Line 28 – Opens up “previous_btn” button onRelease function.
Line 29 – Resets the interval.
Line 30 – If we’re at the first image…
Line 31 – Load the last image in the list.
Line 32 – If not…then…
Line 33 – Go to the previous image in the list.
Line 34 – Close the else process.
Line 35 – Close the “previous_btn” onRelease function.

next_btn.onRelease = function() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
};

Line 36 – Opens up “next_btn” onRelease function.
Line 37 – Resets the interval.
Line 38 – If number is less or equal to the total amount of images.
Line 39 – Resets the P variable to zero.
Line 40 – Go to the firstImage function and execute it.
Line 41 – If not…then…
Line 42 – Go to the nextImage function and execute it.
Line 43 – Close the “else” process.
Line 44 – Close the “next_btn” onRelease function.

p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};

Line 45 – Resets the image counter to zero.
Line 46 – Opens up a onEnterFrame function.
Line 47 – Creates a variable (filesize) which will store the total amount of Bytes for an image.
Line 48 – Creates a variable (loaded) that will store the current amount of bytes loaded.
Line 49 – Make the “preloader” visible.
Line 50 – If the current amount of bytes loaded is equal to the total amount of bytes then…
Line 51 – Calculate the actual width of the loaderbar progress.
Line 52 – If not…then…
Line 53 – Make the “preloader” invisible.
Line 54 – If “picture”’s Alpha level is less then 100 then…
Line 55 – Add another 10 to the pictures Alpha level.
Line 56 – Close the “else” process.
Line 57 – Close the “if loaded” process.
Line 58 – Close the onEnterFrame function.

function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
};

Line 59 – Opens up nextImage function.
Line 60 – If we haven’t yet come to the end of the list of images.
Line 61 – Add one to the image counter.
Line 62 – If the loaded amount of bytes is the same as the total amount of bytes then…
Line 63 – Set pictures “Alpha” level to 0.
Line 64 – Load the current numbered image.
Line 65 – Add the text content in the XML file to the “desc_txt” label.
Line 66 – Go to then “picture_num” function.
Line 67 – Go to the “slideshow” function.
Line 68 – Close the “if loaded” process.
Line 69 – Close the “if total” process.
Line 70 – Close the “nextImage” function.

function prevImage() {
if (p>0){
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
};

Line 71 – Opens up “prevImage” function.
Line 72 – If Image is not the first then…
Line 73 – Subtract one from the counter.
Line 74 – Set the pictures “Alpha” level to 0.
Line 75 – Load the current numbered movie.
Line 76 – Put the current numbered text into the “desc_txt” label.
Line 77 – Go to the “picture_num” function.
Line 78 – Go to the “slideshow” function.

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
}
};

Line 79 – Opens up the “firstImage” function.
Line 80 – If the amount of bytes loaded is equal to the total amount of bytes then…
Line 81 – Set the image “Alpha” level to zero.
Line 82 – Load the current numbered image.
Line 83 – Put the current numbered text into the “sesc_txt” label.
Line 84 – Go to the “picture_num” function.
Line 85 – Go to the “slideshow” function.
Line 86 – Close the “if loaded” function.
Line 87 – Close the “firstImage” function.

function lastImage() {
picture._alpha = 0;
picture.loadMovie(image[total-1], 1);
desc_txt.text = description[total-1];
current_pos = total;
pos_txt.text = current_pos+” / “+total;
p = total-1;
slideshow();
};

Line 88 – Opens up the “lastImage” function.
Line 89 – Set the image “Alpha” level to zero.
Line 90 – Load the current numbered image.
Line 91 – Put the current numbered text into the “desc_txt” label.
Line 92 – Put the current position in the slideshow count into the “current_pos” variable.
Line 93 – Put the current position and the total number of images into the “pos_txt” label.
Line 94 – Subtract one from the current position.
Line 95 – Go to the “slideshow” function.
Line 96 – Close the “lastImage” function.

function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+” / “+total;
};

Line 97 – Opens up the “picture_num” function.
Line 98 – Adds the current position+1 to the “current_pos” variable.
Line 99 – Puts the current position and the total amount of images in the “pos_txt” label.
Line 100 – Close the “picture_num” function.

function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}

Line 101 – Open up the “slideshow” function.
Line 102 – Pause the Slideshow with the amount given in “delay” variable.
Line 103 – Opens up the “pause_slideshow” function.
Line 104 – Resets the interval variabel.
Line 105 – If we have reached to the end of the list of images then…
Line 106 – Reset the position counter to zero (start).
Line 107 – Go to the “firstImage” function and execute it.
Line 108 – If not…then…
Line 109 – Go to the “nextImage” function and execute it.
Line 110 – Close the “else” process.
Line 111 – Close the “if” process.
Line 112 – Close the “slideshow” function.

this.speedbar.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.speedBG._width-20, this._y);
this.onEnterFrame = function() {
delay = (10000/100)*((this._x/(this._parent.speedBG._width-20))*100);
if (delay < 1000) { delay = 1000;}
};
};

Line 113 – Opens up the “dragger” onPress function.
Line 114 – If “dragger” is draged the result is adjusted here.
Line 115 – Open up the “dragger” onEnterFrame function.
Line 116 – Calculates the amount of “pause” the Slideshow should have in between each image.
Line 117 – If delay dragger amount is less then 1000 then the “pause” stays at 1000 (1 sec).
Line 118 – Close the “dragger” onEnterFrame function.
Line 119 – Close the “dragger” onPress function.

this.speedbar.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};

Line 120 – Opens up the “dragger” onRelease function.
Line 121 – Deletes the onEnterFrame tag validator.
Line 122 – Indicates the user stopped dragging.
Line 123 – Close the “dragger” onRelease function.

this.speedbar.dragger.onReleaseOutside = function() {
stopDrag();
};

Line 124 – Opens up the “dragger” onReleaseOutside function.
Line 125 – Indicates the user stopped dragging.
Line 126 – Close the “dragger” onReleaseOutside function.

Well, that was all as far as ActionScripting. Not too much was it. Well, I can admit it was a bit much but it’s usually repetitive stuff and besides. Repetition is great for learning. Now when I have explained the whole script and all is set up it’s time to save our project and start with the content of the actual Slideshow.

But first, here is the entire ActionScript for an easy copy and paste solution.

Finished Code

delay = 10000;

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = “file not loaded!”;
};
};

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
};
};

previous_btn.onRelease = function() {
clearInterval(myInterval);
if (p == 0) {
lastImage()
} else {
prevImage();
};
};

next_btn.onRelease = function() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
};
};

p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
};
};
};

function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
};
};
};

function prevImage() {
if (p>0){
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
};
};

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
};
};

function lastImage() {
picture._alpha = 0;
picture.loadMovie(image[total-1], 1);
desc_txt.text = description[total-1];
current_pos = total;
pos_txt.text = current_pos+” / “+total;
p = total-1;
slideshow();
};

function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+” / “+total;
};

function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
};
};
};

this.speedbar.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.speedBG._width-20, this._y);
this.onEnterFrame = function() {
delay = (10000/100)*((this._x/(this._parent.speedBG._width-20))*100);
if (delay < 1000) { delay = 1000;}
};
};

this.speedbar.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};

this.speedbar.dragger.onReleaseOutside = function() {
stopDrag();
};

Step 11

With all that code created and our Slideshow Player all setup we are now ready to create the image list with the including tag lines. This is the part that is fun as you can just go ahead and add as many images as you want. The player will keep track of everything for you when you enter everything accordingly.

So, open your favorite word processor (I use Notes on Windows) and type this.

<?xml version=”1.0″ encoding=”utf-8″ standalone=”yes”?>
<images>
<pic>
<image>/Images/Image – 1.gif</image>
<caption>Me at the amusementpark with my daughter.</caption>
</pic>
<pic>
<image>/Images/Image – 2.gif</image>
<caption>My daughter and me on our way to Los Angeles.</caption>
</pic>
<pic>
<image>/Images/Image – 3.gif</image>
<caption>On our way to Santa Monica beach.</caption>
</pic>
</images>

Line 1 – Tells the computer that this is an XML document and should be executed as such.

Line 2 – Tells our Slideshow Player that our image list starts here.

Line 3 – Tells our Slideshow Player that this is an image.

Line 4 – Tells our Slideshow Player that this is the tag line to the above image.

Line 5 – Tells our Slideshow Player this is the end of information for our image.

Line 6 to Line 14 – Repeating the above steps.

Line 15 – Tells our Slideshow Player that this is the end of the image list.

As you can see, our image list is really simple and powerful. You can actually go ahead and more information tags to the Player with a little bit of easy coding. The mind is the limit.

When you create your XML document you will only change the “blue” text to what and where your images are located. I am using a folder where the Slideshow Player is located that holds my images for better and cleaner server structure. If you want to add more images, just upload them to the “Images” folder (in my case) and add new picture tags to the XML document and you’re good to go. It’s as easy as that.

Now when our XML Slideshow Image list is all completed, go ahead and save it in the same directory as your Slideshow Player and name the file “images.xml”.

Don’t forget to put your images in a folder located in the same directory as you Slideshow Player to. All this will be uploaded to our server after we have saved our project and published it. Which we’re going to do in the next step.

Step 12

Alright, time to save our Flash project and publish it. Click “File” -> “Save As…” and name your project “Slideshow Player“.

When we’re done doing this. Let’s hook up the “Publish Settings”. Open your publish settings by either “File” -> “Publish Settings…” or press “Ctrl+Shift+F12“.

What we need to do is to make sure we maintain the very best quality in our JPEG images when loading them dynamically into our Slideshow Player. So, in the “Flash” tab set the “JPEG Quality” to 100%.

Now click the “HTML” tab and change the “Quality” to “Best“.

That should be about  it for our publish settings. Now press “OK“.

To “Publish” our flash movie application either click “File” -> “Publish” or press “Shift+F12“.

We have now hopefully successfully published our finished Slideshow Player and are ready to implement it on our website or blog.

Step 13

To upload everything and to add it to your website or blog there are just a few more steps until it’s all done. Use your favorite FTP client and upload everything to your server. Make sure you remember the file path for your Slideshow Player.

After doing this you can incorporate your Flash Slideshow Player by adding this anywhere in your website or blog.

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”263″ height=”356″ id=”Slideshow Player” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”false” />
<param name=”movie” value=”/Slideshow App/Slideshow Player.swf” />
<param name=”quality” value=”best” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”/Slideshow App/Slideshow Player.swf” quality=”best” bgcolor=”#ffffff” width=”263″ height=”356″ name=”Slideshow Player” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

This script adds your flash application to your site. As you can see, I decided to put my Slideshow Player Application in a folder…and that’s really all there is to it. Underneath here you can find an example of the finished Slideshow Player Application.

Finished Example

Round Up

As you can see I switched some colors to make it work better with the example images. Also, go ahead and change what you feel fits better for your images and site or blog. It’s entirely up to you.

Well, that just about sums it all up. We now have a working slideshow application and we can now go ahead and just show our visitors our images with complimentary captions.

I have really enjoyed making this tutorial and I hope you have enjoyed trying it out as well. When it comes to coding it usually is a lot easier than it actually looks at the beginning. Code is never complex unless the viewer is looking at it with fatigued eyes.

Don’t forget that there are plenty of other tutorials on this site that will enhance the feel of your website for your every visitor. Everything from Count-Up’s and Live Visitor Counter’s to Expansive XML Music Player’s.

If you have any additional question please don’t hesitate to ask. I am now taking a short coffee break before I start on my next tutorial.

Also, don’t forget to subscribe to the RSS Feed. You can subscribe to it right here: Minervity RSS Feed

Thank You!

I have gotten quite a lot of requests on different tutorials that my visitors would like to see on the site and it’s really exciting. I just wish I had the time to keep up with you and give you all what you want. But hang in there, I will get to “that” exact tutorial you’re waiting for. I just have to take them one at a time.

This tutorial is a bit more complex than the other ones you can find on this site. Not necessarily harder, just a bit more code to pull it off.

It will cover all the steps necessary to get a working Flash XML MP3 Player for your site or blog. Necessary skills are once again basic. Software’s used are: Adobe Flash, Photoshop and a simple word processor of your choice for setting up your play list. I am using “Notes” on windows just to simplify. Also some knowledge on how to use a ftp client to upload your player and music to your server is needed.

PS: You can find a working example of the player at the bottom of this tutorial. Enjoy!

Step 1

As usual we need some graphics that will make up our player user interface. There are a million ways you can design your player and only your creativity is the limit. I have decided to take a somewhat classic way of designing my UI for this tutorial player.

What you should remember is to make several files. A file of each the buttons in their different states (i.e Hover, Press etc.) How many states you want your buttons to have is entirely up to you.

The functions this player will have is:

• Play Button
• Stop Button
• Previous Song Button
• Next Song Button
• Volume Slider
• Loader Bar
• Information Window – Song Title, Artist Name & Time

As you can see this player has all the necessary features to make any visitor appreciate the music you put on your site (remember: using copyrighted music without permission is a crime).

Also important to remember is if you’re using the Window Glass Shine on your information window, save the shine layer separately so we can put in the labels underneath the glass for better effect.

Here is my user interface design:

Step 2

Time to set up our flash document. Open a new project and use and set the following settings in “Publishing Settings…” under “File” (CTRL+Shift+F12).

Flash Tab:

• Version: Flash Player 9.0
• Load Order: Bottom Up
• ActionScript Version: ActionScript 2.0
• JPEG Quality: 100%
• Audio Stream: MP3, 160kbps, Stereo (this won’t affect the quality of the sound but I like to set it anyways)
• Audio Event: MP3, 160kbps, Stereo (this won’t affect the quality of the sound but I like to set it anyways)

HTML Tab:

• Quality: Best

There, now our publishing settings are set and it’s time to change some document settings. Open “Document Properties” and (if using the same dimensions as me on your user interface (182+102)) set the following:

• Title: “XML MP3 Player”
• Dimensions: 182 (width), 102 (height)
• Background Color: White (#FFFFFF) – (Optional, take what suits your interface best)
• Frame Rate:  30

Step 3

Now we’re going to set up our layers for the player. This time it’s a few more than usual. We need seven (7) layers this time so go ahead and add another 6 to the list.

After doing so name your layers, top to bottom, “actions“, “shine“, “text fields“, “buttons“, “loader / progress“, “volume” and “background“. That should be the layers we are going to work with. Of course you can go ahead and add any other layers that you need to make your user interface more interactive. But for this one we only need these.

Step 4

Let’s add our background to the setup. Go to “File” -> “Import” -> “Import To Stage…“. Your image should now be present on your stage. After your background image has been added to the stage make sure you align it correctly using you “Align” tool box to your right. Enable the “To Stage” button to your farthest right and then align it. This should but the background right where it’s supposed to be.

Now you should have something looking like this:

Step 5

Now, let’s add our little volume slider to the user interface.The first thing we have to do is to set the size of the movie clip itself that will hold our “Volume Slider”. So, let’s go ahead and create a rectangular shape using the tool box to the left. Make the rectangle fit the “Volume Bar” exactly. Should look like this (using red just to make it more visible for you. Will make it transparent later on so go ahead and use any color you like):

Now, select the red rectangle you just created and choose “Modify” -> “Convert To Symbol…“. Use the following title and settings:

Now we have our movie in the size that is needed for our “Volume Slider” to work as it is intended to. Now name (instance name) the movie clip “volume1“.

Double click the newly created movie click. We now enter the movie clips inside so we can manipulate the red rectangle along with adding our “Volume Slider”.

Select the red rectangle and once again choose “Modify” -> “Convert To Symbol“. This time use the exact same settings: Name the symbol “Slider“. We need to do this in order to be able to be able to manipulate the color of the red rectangle the way we want to. Set the instance name for our new symbol to “volBG“.

After doing this, if not already selected, select the red rectangle and go to “Properties” at the bottom of your screen. There you will find a choice named “Color” as a roll down menu. In the roll down menu choose “Alpha” and set the amount to “0%“. This will make our red rectangle transparent and won’t be in the way of our slider or make the bar look weird.

Time to add the “Volume Slider”.The little slider has been saved separately in Photoshop so we can interact with it and set the volume. While still in the movie clip let’s add the slider by importing it as usual using the “File” -> “Import” -> “Import To Stage...” procedure.

When it’s imported position it all the way to the right on your “Volume Bar” to set the volume to maximum when the player is initiated.

We need to create a movie clip out of our “Volume Slider” as well. So let’s repeat the “Modify” -> “Convert To Symbol…” and name it “Volume Controller“. Again using the same settings as we used previously. Remember, use the same layer as the red rectangle is on. No need to create a new layer. As instance name set it to “dragger“.

You should now have something looking like this:

Step 6

OK, we got our volume control graphics set up. Now it’s time to set up our loader bar/play progression bar. This will be done almost the same way so remember the “Convert To Symbol” procedure.

Alright, let’s create the loader movie to begin with. Create a 168*2 pixel bar where the loader indicator is positioned on our user interface. Here’s how it looks like on my user interface:

Now we have to convert this shape into a Movie Symbol again. Again, “Modify” -> “Convert To Symbol…“. Name it “Loader Bar” and set it to “Movie Clip“. Set the instance name to “loaderer“.

When we have done this, double click on the newly created movie clip to get inside it. In here we’re going to set up our loader bar. The bar that will indicate how much of the song is loaded. What we need to do first is to create a new layer to house our progress bar. Name the new layer “progression“. So, again create a bar (pick a color of your choice) that will represent the loader.

I have chosen a blue color for my loading progression bar. We once again have to create a movie clip out of our bar. So once again: “Modify” -> “Convert To Symbol…“. Name the symbol “Progression” and here is an important step. You have to set the focal point to top-left corner for the loading progression bar to progress from left to right when loading.

Now, make the width of your newly created progression bar movie clip to 1 pixel in the “Info” section in your toolbox to your right. Set the instance name to “loaderBar“. Now the Loading Progression Bar is all set up.

What we need to do before leaving the insides of this clip is to get rid of the main movie clip size adjuster background. So, let’s convert the background to a “Graphic” layer with the same procedure as usual. “Modify” -> “Convert To Symbol…“. Pick the “Graphic” option and name it “Loader Background”.

After converting the background graphics to “Graphic” again use the Roll Down menu in the “Properties” box found at the bottom of your screen when selecting your newly created “Graphic” symbol. Choose “Alpha” and set it to “0%” to make it transparent.

Here’s how my complete setup looks like:

Ok, now the loading progression bar is all set up. What we’re going to do now is to use the loader bar as our player head progression bar as well. Nifty right?! What we need is an indicator that will move along the progression bar as the song is being played to show where in the song we are currently located.

If you haven’t already, go back to your root, the beginning flash project layout by clicking “Scene 1“. Let us now import our 4*4 pixel player head to the stage using the usual procedure. “File” -> “Import” -> “Import To Stage…”

Alright with the player head imported, position it on the farthest left of your loader bar. After doing this we again need to convert it to a Movie Symbol to make it usable as a player head.

“Modify” -> “Convert To Symbol…“. Name it “Player Head” and pick the “Movie Clip” option. Don’t forget to set the focal point to the top left corner. Give your newly created movie clip the instance name “playHead“.

After doing all this you should have something looking like this:

Step 7

Wow, we have come a long way already in 7 steps. All the tricky parts are now over and now we come to the more basic functions of the music player. It’s time to set up our Play, Stop, Prev and Next buttons.

When I saved the background for my player I also saved each button in it’s “inactive” state as well as “active” state separately. Let us start by importing the “Play Button” to the “buttons” layer and to the stage. I presume you know by now how to do this so I won’t go in to that again.

After importing the play button (inactive) position it right where it’s supposed to be. OK, all done. Now, let’s convert this graphic button into a “Button” symbol. Same procedure as usual. Name the button symbol “Play Btn – Inactive” and set the instance name of your newly created button symbol to “play_btn“.

Now we have our first button. Double click the button to enter the buttons different state stages. As you can see the “Up” stage is already there. What we need to do right now is to import a our play button graphics in it’s active state.

Select the “Over” frame and create a blank key frame. This is done by right clicking the empty “Over” frame and selecting “Insert Blank Keyframe“. With this done we can now import the “active” state of the button. So, import the play buttons active graphics to our newly created key frame in “Over“.

We now have a working “Play” button.

Repeat this with all the three other buttons giving them the instance names: “stop_btn“, “prev_btn” and “next_btn“.

There, our important music player buttons are all in place and you should have something looking like this. Pay attention to the “Play” button as it is in an active state. Just to show how they look in active state.

Step 8

To display “Song Title”, “Artist Name” and “Time” we need to set up some labels. This we will easily do. We are going to add three (3) dynamic text fields in the “text fields” layer with the instance names: “timeDisplay_txt“, “bandDisplay_txt” and “titleDisplay_txt“.

Remember to “embed” the font to store it in to the Flash file when published. This way the texts will look the same no matter what visitor sees it.

The aligning of the labels are entirely up to you how you want them to present the information. Just remember to drag the artist name and the song title text fields to their maximum available space as they otherwise will get cut if you have an artist name or a song title that is too long.

This is how I aligned my three labels:

IMPORTANT: Remember that the artist name and title is only for you to see where I have positioned the different labels. Before you save and publish you player you should just make them blank.

Step 9

Nice! Now our labels are all setup as well. Just a few things remaining now before we can publish and test our new masterpiece. Now comes the easy part. Adding the “shine” layer to the player to make it more realistic in it’s appearance.

In the “shine layer”, import the shine layer to the first frame.

You can either import a PNG file with 100% opacity and then convert the shine into a “Graphic” layer and the add the “Alpha” color to it or you can just save a PNG in Photoshop that already has the opacity set to 20% or whatever shine strength you prefer.

You should now have something like this:

Step 10

Now comes the heavy part. Don’t be discouraged though. I will lead you through the entire process and try to explain what it all means. It’s time for the core. The code to make our player work as intended. It’s not as complicated as it looks so just stick with me.

In the first frame of our “actions” layer add this all this code explained underneath. You open the “actions” window by either right clicking on the first frame in our “actions” and choose “Actions” at the bottom of the list or you can just press “F9“The full code will be presented in the end. I just want to go through the parts of it so you understand what the code does.

stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
//trace(songname[i]+”  “+songfile[i]+” “+songband[i]);
}
}
_root.createEmptyMovieClip(“sound_mc”, 1);
_global.song_nr = random(songfile.length);
//_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

OK, lot of code here. No worries. I am going to explain the main parts of it.

Line 1 – Just makes sure that our flash movie doesn’t loop and re-setup our player. Instead it stops and waits for us to interact with the player, such as pressing the play button.

Line 2 – Creates a variable for our play list later created in an XML file.

Line 3 – Will simply ignore any line breaks in our play list to make sure it’s read from top to bottom correctly.

Line 4 through 12 – scans out play list for the information such as Song Title, Artist Name and File and puts them in variables later accessible for our player when pressing the Play button.

Line 13 – sets up our sound channel. Opens it if you will.

Line 14 – randomizes the place where the player starts playing in the play list.

Line 15 – As you can see I have two slashes in front of the line. This is because if we didn’t the player would start playing automatically as soon as it’s loaded. If you want this function just take off the two slashes and you player is all setup to start playing as soon as it loads.

Line 16 – Closes the function.

There, let’s move to the next part of the script.

function timer(sound_obj) {
time = sound_obj.position/1000;
min = Math.floor(time/60);
min = (min<10) ? “0″+min : min;
sec = Math.floor(time%60);
sec = (sec<10) ? “0″+sec : sec;
timeDisplay_txt.text = min+”:”+sec;
}

This function is all for the timer of the player. Showing how much of the song that has been played. Let’s go through the code.

Line 1 – Opens up the timer procedure of the sound channel allowing us to keep track of where the player head is located.

Line 2 – Creates a variable holding the total length of the song.

Line 3 – Calculates the number of minutes that has passed.

Line 4 – If total amount of minutes are less than 10 we add a zero in front of the number to  keep our layout the same.

Line 5 – Calculates the number of seconds that has passed.

Line 6 – If total amount of seconds are less than 10 we add a zero in front of the number to keep our layout the same.

Line 7 – Sends and prints our result to our “timeDisplay_txt” instance label.

Line 8 – Closing our function.

Now our timer is all set up and it’s time to move on over to the part that actually handles the play operation. This includes the sound channel setup and our volume control.

MovieClip.prototype.songStarter = function(file, name, band) {
if (this.sound_obj) {
this.sound_obj.stop();
delete this.sound_obj;
}
this.sound_obj = new Sound(this);
this.sound_obj.loadSound(file, true);
this.onEnterFrame = function() {
if (this.sound_obj.position>0) {
delete this.onEnterFrame;
this._parent.titleDisplay_txt.text = “‘”+name+”‘”;
this._parent.bandDisplay_txt.text = band;
this._parent.timeDisplay_txt.text = “00:00″;
timeInterval = setInterval(timer, 1000, this.sound_obj);
} else {
this._parent.bandDisplay_txt.text = “Loading…”;
}
};
this.sound_obj.onSoundComplete = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
this._parent.volume1.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.volBG._width-10, this._y);
this.onEnterFrame = function() {
var p = (this._x/this._parent.volBG._width)*100;
this._parent._parent.sound_mc.sound_obj.setVolume(p);
};
};
this._parent.volume1.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};
this._parent.volume1.dragger.onReleaseOutside = function() {
stopDrag();
};
};

This time it’s a lot of code. Again, no worries. It’s all pretty straight forward.

Line 1 – Opens up our songStarter function. Starts it off.

Line 2 through 5 – Checks if something is currently playing. If it is, then that object is stopped and deleted.

Line 6 – Creates a new sound channel for our song.

Line 7 – Loads the file currently in line in our play list.

Line 8 – Opens up a “This Frame” function. Meaning whenever our flash movie enters this frame this function will be executed.

Line 9 through 10 – Checking if the position of the player head is larger than 0. If it is it’s deleted.

Line 11 through 13 – Resets all the labels and the timer to blank and zero.

Line 14 – Resetting the timer interval.

Line 15 through 17 – If labels and timer already is reset “Loading…” is printed out to our bandDisplay label.

Line 18 – Function closed.

Line 19 – Opens up a new function. This function handles the “next” track when the current track has been played to the end and is completed.

Line 20 – Resets the interval.

Line 21 – Resets the “Timer” label to “00:00″.

Line 22 – Adds one to the play list counter location and progresses to the next track in the play list.

Line 23 – Locates, loads and starts the next track in the play list.

Line 24 – Function closed.

Line 25 – Opens up volume dragger function – The onPress function.

Line 26 – Checks the newest position of the volume dragger.

Line 27 – Opens up an onEnter Frame function to locate the dragger at initialization.

Line 28 – Sets the minimum and maximum “x” limits of our volume dragger.

Line 29 – Sets the volume according to the location of the volume dragger.

Line 30 – Function (volume onPress) closed.

Line 31 – Function (SoundComplete) closed.

Line 32 – Opens a onRelease function for the volume dragger.

Line 33 – Resets the dragger on Frame enter.

Line 34 – Stops dragging.

Line 35 – Function closed.

Line 36 – Opens an (outside release) onRelease function.

Line 37 – Stops dragging.

Line 38 – Function closed.

Line 39 – Main function (songStarter) closed.

A lot of code there huh? But it wasn’t that hard was it? On to the code that handles the loader bar and the progression indicator. This part is somewhat easier and not so complex.

setInterval(soundStatus,100);
function soundStatus(){
var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal();
_root.loaderer.loaderBar._width = amountLoaded * 168;
duration = _root.sound_mc.sound_obj.duration;
position = _root.sound_mc.sound_obj.position;
_root.playHead._x = position / duration * 165+6;
}

Line 1 – Resets our soundStatus interval to 100.

Line 2 – Opens up a soundStatus function.

Line 3 – Creates a variable to hold the amount loaded.

Line 4 – Checks the total amount of bytes for our song file.

Line 5 – Sets total file size to be 100% of the loader bar. (168 being the total width of my loader bar)

Line 6 – A variable holding the current duration of the load.

Line 7 – A variable holding the current location of the load.

Line 8 – Sets the width of our loader bar to the current progress in percentage.

Line 9 – Function closed.

That should be it for our loader progression bar. Now let us head on to our buttons. This is the fun part actually setting up some user interaction with our player. Let’s take a button at a time.

play_btn.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
_root.playHead._x = 7;
this._parent.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “play_btn” onRelease function. This will be executed each time you press the “Play” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Resets the timer label to “00:00″.

Line 4 – Brings our player head back to start position.

Line 5 – Starts the current song loaded.

Line 6 – Function closed.

Easy huh? Not much to it was it. Now our “Play” button should be working all good. On to the “Stop” button.

stop_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.timeDisplay_txt.text = “00:00″;
this._parent.titleDisplay_txt.text = “”
this._parent.bandDisplay_txt.text = “”;
this._parent.sound_mc.sound_obj.stop();
};

Line 1 – Opens up a “stop_btn” onRelease function. This will be executed each time you press the “Stop” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings the player head right back to it’s starting position.

Line 4 – Resets the timer label to “00:00″.

Line 5 – Resets the “Song Title” label to blank.

Line 6 – Resets the “Artist Name” label to blank.

Line 7 – Stops the current song playing on our sound channel.

Line 8 – Function closed.

That’s out “Stop” button interaction completed. Now both our “Stop” and “Play” buttons should be working as intended. Now what remains is our “Next” and “Prev” song buttons. Let’s go straight to the “Next” button code.

next_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.bandDisplay_txt.text = “Loading…”;
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “next_btn” onRelease function. This will be executed each time you press the “Next” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings the player head straight back to it’s start position.

Line 4 – Adds “loading…” to bandDisplay label.

Line 5 – Resets the timer label to “00:00″.

Line 6 through 7 – Gets the next Song info in the play list and starts loading it. After loading it automatically starts playing.

Line 8 – Function closed.

That should wrap up our “Next” button interaction. Now all that’s left of the button’s is the “Prev” button interaction code. Let’s do it.

prev_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.bandDisplay_txt.text = “Loading…”;
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr–;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “prev_btn” onRelease function. This will be executed each time you press the “Prev” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings our player head right back to it’s starting position.

Line 4 – Adds “loading…” to our bandDisplay label.

Line 5 – Resets the timer label to “00:00″

Line 6 through 7 – Gets the previous song info on the play list and starts loading it. After loading the song will start automatically.

Line 8 – Function closed.

Well, that should be all of our button’s. The button interaction is now all completed and there is only one thing left we have to add to our code in order to make it work properly. We of course have to load our play list. Our XML file not yet created. It’s only one line so it should be really easy.

playlist.load(“playlist.xml”);

Line 1 – Basically loads our play list from the file location. If using a folder or a sub folder you can just go ahead and add the pathway for it not including the root. For example. If I am using a folder called “XML Player” my code would look like this:

playlist.load(“/XML Player/playlist.xml”);

Simple huh?

Our code is now all done and all that is left to do now is actually to create our play list and then upload the whole thing to our server.

Step 11

The last thing we’re going to do in creating our XML Mp3 Music Player is to create our XML file. This is the main part of our Player and it’s what we’ll be modifying ever once in a while to switch up music for our player. Remember, using copyrighted music without permission is a crime.

Now let us see how our play list shall be setup correctly. Open your favorite word processor and type or copy the following (accept you using your own songs). My play list is looking something like this. I am using songs from my yet unreleased album so enjoy the preview. And yes, I am also a writer/producer.

<?xml version=”1.0″ encoding=”UTF-8″?>
<songs>
<song name =”Give Her A Break” band =”Richard Darell” file=”/site player/Give Her A Break.mp3″ />
<song name =”Leavin Me Numb” band =”Richard Darell” file=”/Site Player/Leavin Me Numb.mp3″ />
<song name =”Hollywood Movie” band =”Richard Darell” file=”/Site Player/Hollywood Movie.mp3″ />
</songs>

As you can see it’s neither hard or complicated. Actually it’s very structured.

Line 1 – Tells the browser/computer that this is going to be an XML document.

Line 2 – Tells our player that this is the start of our play list.

Line 3 -

• The “song name” is where you will be putting the “Song Title” for your song.
• The “band” is where your “Artist Name” goes.
• Finally “file” is where the location of your song will be found.

Pretty simple right? Just keep adding songs as many as you like.

Line 4 – Tells our player that this is the end of our play list.

Alright, the Music Player should now look something like this being done:

Yeah, that should be it. Time to actually save our Flash movie and get it published before we open up our favorite FTP software to upload it to our server.

Step 12

With everything set up correctly and everything ready all that’s left to do is to save our newly created player and then publish it before we upload it.

So, save your project as “Website Player” by “File” -> “Save” or by pressing “Ctrl+S“. After saving our player let’s publish it by going to “File” -> “Publish“.

There. The final step was finally completed. Now what we have to do is to upload it to a server and test it. Don’t forget to upload your song to your chosen location.

Step 13

Alright, now when our Music Player is all created, saved, published and uploaded to our server, we need to add the HTML code to our blog/website where we want to place it.

The HTML code you will be adding anywhere of your choice is looking like this:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”180″ height=”100″ id=”Website Player” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”/site player/Website Player.swf” />

<param name=”quality” value=”best” />

<param name=”bgcolor” value=”#ffffff” />

<embed src=”/site player/Website Player.swf” quality=”best” bgcolor=”#ffffff” width=”180″ height=”100″ name=”Website Player” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

There, that should be all. Now test you player to make sure it works as intended. Here is an example of my player. Go ahead and try it out.

Working Example

Round Up

Wow, that went fast! As you can see it’s quite simple to add a complex music player to your website without too much work. I am sure you are able to create this player within an hour or so if you have a clear idea what kind of user interface you want to create.

I am also sure your visitors will enjoy a little music while they read your blog or surf your site. This player is super solid and stable so go right ahead and use it in any way you like.

I hope you have enjoyed this tutorial as much as I have enjoyed writing and creating it. There are plenty more tutorials on the site to enhance the experience for your visitors that visits your site or blog. You are more than welcome to check them out.

Now I’m off for a little break before I will hit the computer again to create another tutorial I’ve had in my mind for ages now.

Looking forward hearing from you so please comment if you have the time.

Thank you!

I have gotten some great reviews for my latest tutorial “How To Create a “LIVE” Visitor Counter” and I have been requested by many to make a tutorial of my “Count Up” application featured here on my site. So I thought, why not! Let’s give them what they want. Isn’t that what freemiums are all about?

This tutorial requires, as my previous tutorials, nothing more than the basic knowledge of Flash and ActionScript. Some basic knowledge of FTP and HTML is also required, however this is mostly a copy and paste situation so if you don’t possess this knowledge I am sure you are able to follow this tutorial with flying colors anyways. It’s pretty straight forward and I believe anyone could read this and be able to create their own count-up. With a little bit of focus and bit of patience it should be all good. Let’s start.

Step 1

Just like in my previous tutorial, mentioned in the introduction, we need a background. To make it easy I have chosen to take the same background as in the Live Visitor Counter tutorial. But of course you can go ahead and create your very own background in whatever size or shape that you want it to have. For this one however I have once again chose the 200*38 size with two layers creating that depth effect. Here’s my flattened layer consisting of two layers:

Once again, when creating your own background and are using layers, to create the depth effect, make sure you separate the “on top” layers from the “background layers to be able to put the text in between.

Step 2

OK, we have our background. Time to setup our project in Flash. Open up a new project and make it in ActionScript2.0. First thing we’re going to do is to set the Document Properties so we get the right size and speed of the application. So, open up “Document Properties” (Ctrl+J) and set the width to 200 and the height to 38. Also change the FPS (frames per second) from 12 to 30. This is to make sure we get an even second for each second. Also set the background to black black (#000000) as it’s mostly much easier to see if you’ve made any mistakes in your aligning later on. Don’t forget to name your project. I have chosen to name it “Live Count-Up”. Now you should have something similar to this:

Step 3

It’s time to set up our layers for the project. Create 4 (four) new layers making it a total of 5 (five) layers. Name them, from the bottom up, “background”, “labels”, “textfields”, “shine” and “actions”. Your setup should now look something like this:

Step 4

The first layer to get some content is actually our “actions” layer. Open up “Actions” view by selecting the first frame of the “actions” layer and right click on it. Choose “Actions” at the bottom of the list. Now, input this:

this.onEnterFrame = function() {

var trueday:Date = new Date();
var trueYear = trueday.getFullYear();
var trueTime = trueday.getTime();

var startDate:Date = new Date(2008,11,12);
var startTime = startDate.getTime();

var timeLeft = trueTime – startTime;

var sec = Math.floor(timeLeft/1000);
var min = Math.floor(sec/60);
var hrs = Math.floor(min/60);
var days = Math.floor(hrs/24);

sec = string(sec % 60);
if (sec.length < 2) {
sec = “0″ + sec;
}
min = string(min % 60);
if (min.length < 2) {
min = “0″ + min;
}
hrs = string(hrs % 24);
if (hrs.length < 2) {
hrs = “0″ + hrs;
}
days = string(days);

var countup:String = days+ “:” + hrs + “:” + min + “:” + sec;
countprnt.text = countup;
}

Now you’re thinking. Wow, that’s a lot of code and he said it was to be basic. No worries. I will try and explain the basics of the code line by line so you know what it does.

Line 1

this.onEnterFrame = function() {

This line opens up our script each time we the cycle hits this frame. What it means is that everytime our flash movie enters his frame it executes the ActionScript.

Line 2

var trueday:Date = new Date();

This line creates a variable for us to store the current date. The updated date so to say.

Line 3

var trueYear = trueday.getFullYear();

This line stores the current year in a variable named trueYear.

Line 4

var trueTime = trueday.getTime();

This line stores the current time in a variable named trueTime.

Line 5

var startDate:Date = new Date(2008,11,12);

This line is the only one you have to pay close attention to really. This line stores the date that you want the counter to start it’s count-up from. Also, this line has some more explaining to do. The layout of the date within the parentecies is Year, Month, Date. But, one thing that is really important here is the months only goes to 11. Meaning December is 11. It is like this because the computer counts January as month number 0. This is important when you add your date here.

Line 6

var startTime = startDate.getTime();

This line stores the startDate’s time. Meaning if you have entered it it will also include it down to the second.

Line 7

var timeLeft = trueTime – startTime;

Here is the calculation that calculates how many days, hours, minutes and seconds has passed since the start.

Line 8

var sec = Math.floor(timeLeft/1000);

This line calculates the milliseconds into the number of seconds.

Line 9

var min = Math.floor(sec/60);

This line calculates the seconds into the number of minutes.

Line 10

var hrs = Math.floor(min/60);

This line calculates the minutes into the number of hours.

Line 11

var days = Math.floor(hrs/24);

This line calculates the hours into the number of days.

Line 12

sec = string(sec % 60);

This line calculates the total number of seconds that have passed.

Line 13

if (sec.length < 2) {
sec = “0″ + sec;
}

These lines adds a zero (0) in front of the seconds if the total number of seconds are less than 10. We do this to make sure we always have a two digit print out on our count-up.

Line 14

min = string(min % 60);

This line calculates the total number of minutes that have passed.

Line 15

if (min.length < 2) {
min = “0″ + min;
}

These lines adds a zero (0) in front of the minutes if the total number of minutes are less than 10. We do this to make sure we always have a two digit print out on our count-up. Just like in the seconds.

Line 16

hrs = string(hrs % 24);

This line calculates the total number of hours that have passed.

Line 17

if (hrs.length < 2) {
hrs = “0″ + hrs;
}

These lines ads a zero (0) in front of the hours if the total number of hours are less then 10. We do this to make sure we always have a two digit print out on our count-up. Just like in the seconds and the minutes.

Line 18

days = string(days);

This line stores the total number of days that have passed.

Line 19

var countup:String = days+ “:” + hrs + “:” + min + “:” + sec;

This line stores our print out in the right order. It combines all of our calculated variables and stitches it into one string variable ready for prin out.

Line 20

countprnt.text = countup;

This line prints our string to countprnt.text which will be our dynamic text field where we see our count-up progress.

Line 21

}

This line just closes our script.

Step 5

OK, now we’re done with the ActionScript. Time to add the visible’s to the counter. Let’s add the background. Choose “File -> Import -> Import To Stage…“. Pick your background and click ok. If all is ok it should align itself to your workspace. It should now look something like this:

Step 6

Our background is in place and we need to insert our labels. The labels that will tell the viewer what he/she is looking at. Let’s start with the title. Let’s add “SINCE LAUNCH” title to the count-up in the upper right corner in the first frame of the “labels” layer. I have chosen the font “Trebuchet MS” size 7 to make it clean and tidy. You can go ahead and use whatever font you feel fits your needs. Now we have something looking like this:

I have chosen not to add the bottom labels yet as we want to make sure first where they go. This we do by inserting the actual counter.

Step 7

Time to insert the core of the count-up. The count-up itself. In the first frame of the “textfields” layer let’s add a dynamic text field with the text “000:00:00:00″ indicating where the digits will go. I have chosen Arial as font and 18 as size. I also picked Bold to give it more body. I gave it a slight bright gray to make it stand out a bit from the titles pure white color.

Before we enter the next step we need to give our text field and instance name so that our ActionScript can push it’s data to it. So, click the newly created dynamic text field with out zeros in it and give it an instance name of “countprnt” which you will also find in our script. ALSO, make sure you widen the text field all the way to the left to give it more room for more digits.

IMPORTANT: Make sure you have right aligned the text in the dynamic text field so that the increment always looks the same. You should now have something looking like this:

Step 8

There. Now we can go ahead and add the last labels to the count-up as we have the guide now to align them. We’ll need to add 4 different static text fields to do this. Under the far right zero’s you type “SEC”, then “MIN”, “HRS” and “DAYS”. I have used the same font and size as in the title label. Same color and everything. You should now have something looking like this:

Step 9

That’s almost everything as far as our application. The only thing we need to do right now is to add the “shine” layer to it to create that extra depth to the count-up. Once again add the Shine image (which is a semi transparent layer saved as a PNG in Photoshop) by Importing it to the stage on the first frame of the “shine” layer. After doing this, if it’s not aligned already, align it by using the “Align X” commands found on your right in the Flash workspace.

Now we have something looking like this:

Step 10

Well, what do you know. Our count-up is done and what we need to do right now is to save it and publish it. So go ahead and save your newly created online application. Name it “Live Count-Up”. After saving it open up “Publish Settings…” and make sure that ActionScript is set to ActionScript2.0 and that JPEG quality is set to 100. Now go ahead and publish your new application. All your new files are now in the same folder and it’s time to dig through the HTML to find the flash object tags so we can add them to your site.

Step 11

Upload your new application flash movie to a directory of your choice on your server host, but make sure you remember the path to it. The shorter the better. The file you should upload is “Live Count-Up.swf”.

Step 12

After uploading your file to your server the only thing we need to do right now is to incorporate the object code to your website/blog. This is the code you should use. Place it anywhere on your web site’s html code and bang, there it is!

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”200″ height=”38″ id=”Live Count-Up” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”Live Count-Up.swf” />

<param name=”quality” value=”high” />

<param name=”bgcolor” value=”#000000″ />

<embed src=”Live Count-Up.swf” quality=”high” bgcolor=”#000000″ width=”200″ height=”38″ name=”Live Count-Up” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

This code is looking for the flash movie in the root directory. If you put it in another directory just use “directory\Live Count-Up.swf” and it should all good.

That should be pretty much it! Now go ahead and test your new count-up on your own site or blog or you can check out this example to see how it works:

Round Up

Well, all should be working now there are plenty of areas this could be used within. For example you could stick one of these onto each and every post you make if you want to be sure everyone knows exactly how long ago you posted your blog post. Or, why not combine my “Live Visitor Counter” with this one to showcase your hit count during a certain amount of time. Should be pretty cool to watch for anyone!

Whatever you use this for it’s only your imagination that sets the limit. You are welcome to use this technology in whatever way you see fit. But, make sure of one thing. Have fun with it!

I hope you have enjoyed this tutorial and that you will check out my other tutorials on this site. I would very much like to see you return for future tutorials as well. Leave a comment or send me an email. If you have any questions don’t hesitate to contact me (which reminds me, I haven’t set up my contact page yet. Dang it! – 02/02/09).

It’s been great fun creating this tutorial and I hope I will hear from you soon!

Thank you!

In this tutorial I will teach you how to create a “LIVE” visitor counter that actually updates itself. “LIVE” means that the counter, made in flash, checks for new visitors every 20 seconds or so (this you will be able to set to whatever interval you think is best suited for your needs). A working example of this can be found on top of this website along with in the end of this tutorial.

The execution of this tutorial is very straight forward and doesn’t really demand any particular skills in either flash, photoshop, FTP or PHP other than the basic understanding of the three. There are however some important tasks that needs to be done in order for it to work properly. But I will guide you through the process best I can to ease your reading.

Creating this Live Visitor Counter I will be using the following software’s and Languages:

• Adobe Flash
• Photoshop
• PHP Scripting
• FTP Client

Alright that should be it. Let’s start off this tutorial!

Step 1

The first thing you need to do is to create a background for your counter (this is however optional and is just for effect). I decided to make a slightly bigger counter than the one I have on top of this site. The tutorial one measures 200*38 and has a red background.

What you would want to think about when creating this background is to give it some depth (again for effect). Doing this gives the counter a slighter more advanced look and more appealing to look at as well. The trick here is to create a second or more layers with for ex. a “shine” layer which you later put on top of your flash application in it’s own layer. This creates the illusion that there actually is some glass above the text itself.

Here is the final background in all it’s simplicity. As you can see there is a “shine” layer on it as well.

Make sure you separate the two layers in Photoshop making them a JPG “background” file and a PNG “shine” file. For an in depth tutorial on how to create the Shiny Button look check my earlier tutorial: “Make A Shiny Button“

Step 2

Now when we have our background we can go ahead and do the necessary assembly in Flash. Open up Flash and open up the “Document Properties” panel. Set the dimensions to 200 (width) and 38 (height). Also change the frame rate from 12 to 10 to give it an exact count in milliseconds. You can also change the background color to black (#000000) to make it easier to see on a white background if something is not aligned properly. Before clicking OK you can go ahead and change the Title of the project to “Live Visitor Counter. Click Ok.

Step 3

Now, create four (4) new layers making the total five. Name them (from the bottom up) “background”, “visitor counter”, “labels”, “shine” and “actions”.

Step 4

Now to some ActionScript. Make sure your “Publishing Settings” are set to use ActioScript 2.0 as this is how this is read. OK now, in the first frame of the “actions” layer open the “Actions” edit view and type:

this.loadVariables(“counter.php?num=”+random(999));

This will call for our PHP script that will handle the actual page view counting. We will deal with the PHP script after we’re done assembling our Flash movie.

Step 5

Create a second frame in the “actions” layer and open up the “Actions” edit view again. Type in:

this.loadVariables(“count.txt?num=”+random(999));

This will load the actual number of visitors from the holder file “count.txt” after our PHP script has done it’s job.

Now your layers should look something like this.

Step 6

Now, let us go ahead and add the background that’s going to become our actual visitor counter. Import you background JPG in the first frame of the “background” layer. Make sure you align it to the top left corner so it covers the entire work area.

Also go ahead and add the shine to the counter by importing the shine PNG to the first frame of your “shine” layer. Don’t forget to align it just like you did with the background layer. To the top left corner. Your layout should now look something like this.

You can also go ahead locking these to layers to be sure nothing is moved ad throws off your alignment.

Step 7

Time to add some labels to make sure the visitor/viewer knows what this application is counting. In the first frame of the “labels” layer add these two labels to your counter application. “LIVE VISITOR COUNTER” in the top right corner and also “NUMBER OF VISITORS” in the bottom right corner. I have chosen to use the font “ARIAL” size 8 for the top label and “ARIAL” size 7 for the bottom one in order to be able to make a distinction of the two.

Step 8

Here come the part where we actually incorporate the number count for our counter. It’s quite simple but there is some things you have to pay close attention to. In the “visitor counter” layer add a zero (0). Make the alignment of the text area “Align Right” to make sure the counter increases from right to left and nothing else. I have also chosen a bit grayer color for the number count to make the effect of the “shine” layer more eye pleasing. One important task here is not to forget to drag the text area all the way to the right to make sure that when the counter increases in muber of characters it doesn’t clip in the middle of the application. You should en up with something like this:

Step 9

With the number count text field still selected edit “count” in it’s VAR field in the text fields “Properties”. It’s case sensitive so make sure you edit “count” in only lower case character. What’s really important as well is to make sure you text field is “Dynamic Text” and not “Static Text” or “Input Text”. The counter simply won’t work if you forget this step.

Step 10

To make the entire application to update itself I have chosen the easiest way to accomplish this. When we chose 10 frames per second in the beginning of the tutorial we actually made sure that when we create more key frames the run time of the application is increased with one second per 10 frames. This makes it easy for us to choose whatever time interval we want the application to have. Let’s go ahead and add frames all the way up to 200 to make the application to update itself every 20 second.

You accomplish this easiest by going to the 200th frame, selecting it and pressing F5 for each layer and you have created yourself frames all the way up to 200.

As you can see I have locked all the layers to prevent any movement within the layers of the elements.

Step 11

We need the application to return to the first after running it’s entire cycle. Therefor, select the 200th frame of the “actions” layer and press F6. This will create a sole key frame at the 200th frame. With the frame still selected open up the Actions Edit view and insert the following code:

gotoAndPlay(2);

This will make the application to return to frame 2 of the flash movie. Now you might wonder “Why number 2?”. Well, the first frame increases the number by one every time it’s executed. If we were to return to the number 1 frame of the flash movie it would mean that every time it started over it would increase the counter number by 1. In this case we would get an application that increased it’s number every 20 seconds. Returning to number two ensures that we only increase it ones and after that we just pick up the current number of visitors. You should now have something like this:

Step 12

Now go ahead and save your flash movie. After saving it go to “Publish Settings…” and make sure you’ve set your ActioScript to 2.0. Also, for best quality make sure you have the “BEST” quality selected and also the highest JPG quality. Here’s how my settings look:

Go right ahead now and publish you flash movie by selecting “Publish” from the “File” menu. You can also press Shift+F12 to accomplish this. Make the name of your movie “Live Visitor Counter”.

Step 13

OK. We have out flash movie visitor counter application done. Now it’s time to look in to the PHP scrips need to make all this work. Open your choice of text editor. I prefer “Notes”  or “Type Pad” as it is a pretty easy word processor. With it open type this:

<?php
$count = file_get_contents(“count.txt”);
$count = explode(“=”, $count);
$count[1] = $count[1]+1;
$file = fopen(“count.txt”, “w+”);
fwrite($file, “count=”.$count[1]);
fclose($file);
print “count=”.$count[1];
?>

This script is the core of the counter so to speak. I will try and explain it as simply  as I can so you know what it does. But before doing this please save this as “counter.php” in the same directory as you flash movie.

Line 1:

<?php

Opens up the php scripting channel declaring that this will be a php script.

Line 2:

$count = file_get_contents(“count.txt”);

This line loads the content of our (to be created) count file which is the current number of visitors before incresing it.

Line 3:

$count = explode(“=”, $count);

This line breaks down the count.txt file and just fetches the actual number of visitors.

Line 4:

$count[1] = $count[1]+1;

This line increase the number of visitors by 1.

Line 5:

$file = fopen(“count.txt”, “w+”);

This line “opens” the file for us to be able to write the new number back into the file.

Line 6:

fwrite($file, “count=”.$count[1]);

This line writes our new number into the file.

Line 7:

fclose($file);

This line closes the file. If we don’t close the file there will be a memory leakage further down the road as our script simply will open a new file again leaving the old still open.

Line 8:

print “count=”.$count[1];

This line pushes the new number of visitors to our variable “count” in our flash movie simply updating it.

Line 9:

?>

This line simply close our script telling the computer the script has now ended.

Step 14

What we need to now is to create the actual file that holds the visitor number. This file will be loaded and increased every time someone enters your site (depending on where you put this flash movie of course). Open up your favorite text editor again and type in the following:

count=0

Save your file as “count.txt” in the same directory as your newly created flash file and your PHP script.

Step 15

Now we are done with all the background work. Now it’s time to put it in to your website. Upload “Live Visitor Counter.swf“, “counter.php” and “count.txt” to your root directory on your server. We need to do this as the counter executes it’s stuff from the root rather then a directory making the script a bit more complicated.

Step 16

Alright. To incorporate you newly created flash counter on your website/blog. Simply put this code wherever you feel you want it to be located on the site.

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”200″ height=”38″ id=”Live Visitor Counter” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”Live Visitor Counter.swf” />

<param name=”quality” value=”best” />

<param name=”bgcolor” value=”#000000″ />

<embed src=”Live Visitor Counter.swf” quality=”best” bgcolor=”#000000″ width=”200″ height=”38″ name=”Live Visitor Counter” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

That should be pretty much it. Now test your new live visitor counter to make sure all is in good order. Here is the finished counter as an example:

Round Up

Now when everything should be working you could simply sit and watch your counter and it will increase whitout reloading the page. Try open another browser and reload the page there. Quickly jump back to this page as you’ll sit it increase in a few seconds. Pretty cool huh!

Hope you have enjoyed this tutorial and that you will make good use of this technique. It can get quite mesmarizing at times to sit and watch it so don’t get addicted to it. LOL

If you have any additional question please don’t hesitate to ask. More tutorials coming up soon.

It’s been a pleasure creating this tutorial for you and I wish to see you back again and again!

Thank you!