How To Create a “LIVE” Visitor Counter

How To Create a Realistic Water Text Effect

Introduction
In this tutorial we will be creating a realistic water text effect that is sure to catch someones eyes. This tutorial requires some basic knowledge of Photoshop and how to work in it’s environment. For …

Read the full story »

Creative Corner

A series of in depth and heavily inspiring Graphic, Web and Logo Designer and Developer interviews.

Designer Apps

A resource vault of applications that would serve any Designer or Developer well to have in their arsenal.

Freelance Hub

A storage full of tips and tricks for every freelance Designer or Developer that wants to progress their business.

Geek Things

Every once in a while we’ll post a new geeky thing that might inspire you to go through the day with a laugh or a second thought.

Website Filter

A collection of websites that is sure to bring you creative inspiration and keep you on the edge of design.

Home » Flash

How To Create a “LIVE” Visitor Counter

Submitted by Richard Darell42,042 Views | 126 Comments

Introduction

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.

Document Properties

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”.

Layer Setup

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.

Actions Layout View

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.

Counter Graphics - Assembled

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.

Text Field Properties

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.

Application Interval

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:

Loop Actions Layout

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:

Publish Settings

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!

126 Comments »

Rob said:

Awesome work! In the intro, you should mention that a working example can be seen on the top of this web page.

How To Create a “LIVE” Visitor Counter

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Round Up

126 Comments »

Leave a comment!

Friends & Partners

Random Posts

Latest Video Post

Recent Posts

Most Commented

Most Popular