Quantcast

Dynamic Counter (PHP3+Flash 5)

Get the WebProNews Newsletter:
[ Business]

Hey people, welcome to the Dynamic Counter tutorial. In this tutorial we will investigate how to create a hit counter for your flash page. OK let’s get into it!

Before we start with flash we need to create a data-storage file. This is just a text file called ‘counter.txt’, which you can create with your favorite plain text editor. Note the some text editors might try and store your text in Rich Text format, which will cause you problems. I’m using Windows Notepad, which comes with all versions of Windows and can be accessed through Start > Programs > Accessories > Notepad).

Create your text document, and enter the following code:

-==-

Now save your document as counter.txt in the directory you plan to use for your Flash counter. Now, briefly, I will explain what you have just done and why. The purpose of this file is to store data for us to read and adapt for use in our counter count=0 – sets variable count to the value 0 (zero). & (ampersand symbol, Shift-7) – indicates the end of one variable and the beginning of another loaded=1 – sets the variable loaded to the value 1, I’ll explain why later.

Now call up Flash 5 and create a new document (Ctrl-N). Save your file as “counter.fla” in the same directory as your counter.txt file. Now create a new Movie Clip Symbol (Ctrl-F8) and name it ‘counter’. Leave it empty for the moment. Open up your Library (Ctrl-L) and drag one copy of your empty ‘counter’ clip onto the stage. Select that instance of your symbol and name it ‘counter’ using the instance panel (Ctrl-I).

Now right click the counter instance and select Edit, (or Ctrl-E).

Create 3 keyframes within the counter symbol stage, at frames 1, 2 and 3. Double click frame 1 to bring up the Actions panel for that frame. Now enter the following code:

-==-

Note the best way to enter code is to just copy it from here and paste it (using Expert Mode) into your actions panel. This is one of the joys of Flash 5. To access Expert Mode use Ctrl-E or click the right-facing menu arrow atop the Actions window and select Expert Mode from the drop down menu.

Now, there’s no use entering code if you don’t know what it does! So let’s take a look at the code above:

The first line is a conditional clause: this means it checks one thing before it does another. A good analogy is driving: you don’t press the accelerator without starting the car, (or maybe you do, but you shouldn’t), so you’ve got to check if the car’s started first, before you press the accelerator. This conditional clause asks if our variable startup is equal to nothing ( “” indicates nothing).

Why do this?

Because we’re going to loop back to this frame and I only want to carry out these operations once, not every time we come back. That’s where the second line comes in: by setting our variable startup to any value other than nothing, we ensure that these instructions will be ignored every subsequent time we visit this frame.

The loadVariablesNum command is the important aspect here though. This command replaced the standard loadVariables command in Flash 4 and is used for loading variables into Flash from an external source, such as a text file on the server. These variables are loaded as expressions, (numbers), rather than strings. counter.txt is the name of our data-storage file, which we will deal more with later.

The remainder of the code, produces a random number, random (999999), and concatenates (attaches) it to the end of our file-name, after a question mark. This question mark, random number combination is effective against browser cache conflicts.

Now on to Frame 2. Double click your keyframe in frame 2 to open the Actions inspector for that frame. Now enter the following code:

-==-

What kind of statement is this?

If you said ‘It’s a conditional statement Jesse!’ then give yourself a pat on the back. Yes, conditional statements are everywhere. This one is a bit more complex than the last though. First it checks our condition, in this case loaded == “1″ or ‘Does the variable loaded hold the string value “1″?’

This is where the extra variable in our text file comes in. Data files won’t always load in the split-second between one Flash frame and another. In this case they probably will because the file in question is only a few bytes long, but it’s good practice to add an additional variable at the end of your data file which you can use to check if the data file has completed loading.

If the data file has completed loading, Flash will go to and play, Frame 3. If, somehow, the file is not yet fully loaded, Flash will go to and play frame 1. This is the loop I mentioned earlier and the reason behind the conditional statement in the first frame. In the highly unlikely situation that the data file is not yet loaded, Flash will loop until it is.

Frame 3 is the last keyframe in our counter symbol. It is on this frame that we will display our counter value. To do this we use the text tool and the Text Panel to insert a Dynamic Text field. Name your field “count” and uncheck ‘selectable’ on the text panel. Set the font, color and size as you wish, and remember to depress the include numbers outline button on the Text Panel.

Now open up the Actions inspector for frame 3 and enter the following:

-==-

Line one of this code converts count to a number from a string, and adds 1 to its value. We must first convert it to a number because loaded variables begin as strings, (a sequence of literal text), and you can’t add a number to a string of text: 1 + “test” is invalid. Line two calls our PHP script, which we will talk about below, and tells it the new value of count.

Line three contains an arbitrary stop() command. Which stops this symbol from looping back to frame 1.

The Script

PHP is a hyper-text-pre-processor. Basically it allows you to incorporate aspects of logic and programming into previously static HTML in order to generate dynamic HTML pages. It runs on the server and returns plain HTML to the user, so it is compatible with all modern browsers. PHP is much like ASP, but free. More information is available at:

http://www.php.net

We’re going to use PHP to rewrite our data file each time our counter is incremented. Open your plain text editor again and enter this code:

-==-

Now save your file as “counter.php3″, (not counter.php3.txt! Make sure you save it with only the .php3 extension).

Let’s analyze this code.

Line one tells the server we’re talking in PHP code. Line two opens our data file, counter.txt. Line three writes our new variables, sent by Flash, over our old data file. $count inserts the variable count which was passed by Flash, and &loaded=1 adds our extra test variable, loaded. Line four saves and closes counter.txt. Line five tells the server we’re no longer talking in PHP code.

Now you need to upload all your files, except for your Flash source file (counter.fla) to your PHP compatible web-server and set their permission appropriately: counter.php3 must have read, write and execute access for this counter to work correctly. You can change access levels using the CHMod command. Contact your web host for further details about how to use CHMod.

Note also that you can’t run this counter on you local machine to test it, unless you are running a web-server program such as Microsoft Personal Web Server. If you try to open the file in your browser, nothing will happen. This is for two main reasons. Firstly, you cannot use the no-cache string we used in keyframe one without running a web server locally. Secondly PHP will only run on computers with the proper modules installed: if you wish to run PHP at home, grab a copy from www.php.net for free.

Now on your server, Chmod the php file to 665 (-rw-rw-r-x) and the text file to 666 (-rw-rw-rw-) and run it.

That’s it! You should have a working counter which increments each time you get a hit on your flash file.

If you don’t check all your code, then consider these other possibilities:

Most hosts support the .php3 extension for PHP but some may be strict and require another extension (such as .php). If this is the case your script will not execute because it is not recognized by the serve as server-code. You must rename your script .php (or whatever is appropriate, check your server documentation) and also change all references to .php3 in the Actionscript to .php (or whatever is appropriate).

Have you set your permissions correctly? The directory in which counter.php and counter.txt reside on your server must have the appropriate access permission at the client level. If you are using FTP or Telent to upload your files you can type:

-==-

Support Material

This article contains a support file. To download the attached support file, please click here.

Jesse Stratford is a freelance Flash ActionScript developer, author, tutor and general enthusiast based in Victoria, Australia. Somewhere in there he’s a fulltime student too. Along with Evgueni Strok, he co-founded ActionScript.org, one of the largest free Flash communities online which is frequented by millions of developers each year for its unique and award winning Flash ActionScript content, including but not limited to, tutorials, forums, open source and components.

DevArticles (http://www.devarticles.com) went “live-to-air” in November of 2001. Starting out as just a one man show ran by me from my bedroom, DevArticles quickly became one of the most popular developer sites on the ‘net. Most people attribute it to the way that we write our articles, but I’d also like to think that it’s our strong sense of community that has helped make us what we are today.

Dynamic Counter (PHP3+Flash 5)
Comments Off
About DevArticles
DevArticles (http://www.devarticles.com) went "live-to-air" in November of 2001. Starting out as just a one man show ran by me from my bedroom, DevArticles quickly became one of the most popular developer sites on the 'net. Most people attribute it to the way that we write our articles, but I'd also like to think that it's our strong sense of community that has helped make us what we are today. WebProNews Writer
Top Rated White Papers and Resources

Comments are closed.