Flash Counter mit PHP und MySQL

TP Login

TP Intern

Flash MX Counter mit PHP und MySql

Ein Tutorial für den Bau eines dynamischen Flash Counters in Verbindung mit einer MySQL Datenbank. Hier soll anhand dieses Beispiel gezeigt werden wie man eine dynamische Anbindung an Flash vollzieht.

Autor:: zw
Arbeitsmaterial:: download
Schwierigkeit:

Dieses Tutorial richtet sich an alle diejenigen, die mit den Grundfunktionen von Flash MX bereits vertraut sind, aber noch keine Idee davon haben, wie in Flash dynamische Inhalte eingebunden werden. Ebenfalls setze ich vorraus, dass bekannt ist, wie in MySQL eine Datenbank angelegt bzw. wie mit der Shell umzugehen ist, der Code folgt. Mit diesem einfachen Skript wird die Übergabe von Informationen aus einer Datenbank an ein Flash Movie dargestellt. Wie gesagt, in diesem Fall benutzen wir einen Counter, der die Seitenzugriffe zählen soll.

1Zunächst einmal die Tabelle in MySQL

Mit diesem Befehl erstellen wir eine Tabelle in einer beliebigen Datenbank. Das PHP-Skript wird mit jedem Zugriff einfach einen Datensatz (also Zugriff) hinzufügen. Kommen wir jetzt zu dem PHP Skript:

sql

CREATE TABLE counter(id int NOT NULL AUTO_INCREMENT);

2open.inc.php

Enthält die Informationen über den Datenbankhost, User etc. Diese Datei ist die einzige (PHP-Datei), die geändert werden muss, sprich die entsprechenden Daten sind einzugeben.

php

//Datenbank-Host
$dbHost = "hostip";
//Datenbank-Name
$dbName = "datenbank";
//Datenbank-User
$dbUser = "datenbankuser";
//Datenbank-Passwort
$dbPass = "datenbankpasswort";

3counter_read.php

Ließt die Anzahl der Seitenzugriffe aus.

php


//Fügt den Code aus der open.inc.php ein
require("open.inc.php");
//Stellt die Verbindung zur Datenbank her
$connect = mysql_connect($dbHost, $dbUser, $dbPass);
//Gibt eine Fehlermeldung aus, wenn die Datenbank nicht erreichbar ist
if(!$connect){echo"&loaded=0&";exit;}
//Der MySQL Query, der die Zugriffe zählt
$counterQuery = "SELECT COUNT(*) FROM counter;";   
$counterResult = mysql_db_query($dbName, $counterQuery);
while($counterErgebnis = mysql_fetch_row($counterResult))
{
    //Formatierung zur Ausgabe
    $echoString = "&counter=";
    //Zugriffszahl
    $echoString .= $counterErgebnis[0];
    $echoString .= "&";
}
//Ausgabe
echo $echoString."&loaded=1&";
mysql_close($connect);
exit;

4counter_write.php

Dieser Teil des Codes kann auch in die Startseite integriert werden. Ich werde an dieser Stelle aber nicht weiter darauf eingehen.

php


require("open.inc.php");
$connect = mysql_connect($dbHost, $dbUser, $dbPass);
if(!$connect){exit;}
//Solltest du die Tabelle anders genannt haben (also nicht "counter") hier dementsprechend ändern.
$counterQuery = "INSERT INTO counter VALUES(\"\");";
$counterAction = mysql_db_query($dbName, $counterQuery);
mysql_close($connect);
exit;

5Code testen

Um den Code zu testen, kopiere alle PHP-Dateien auf deinen Web-Server und leg die Datenbank an. Rufe dann einmal die counter_write.php auf. Als Ergebnis sollte nur ein weißer Bildschirm auftauchen. Das selbe mit der counter_read.php, hier sollte nur ein String ausgegeben werden (eigentlich sind es zwei): &counter=3&&loaded=1& (Wobei die Zahl counter natürlich abweichend sein kann). Wenn das der Fall ist arbeitet das PHP Skript richtig, und wir können uns nun dem Teil in Flash zuwenden:

6Flash Dokument

Zunächst brauchen wir einmal eine neues Flash-Dokument (ich arbeite mit Macromedia Flash MX 2004 Professional, Testversionen gibt es bei www.adobe.com

Die erste Ebene nennen wir Actions und fügen in das erste Schlüsselbild folgenden Code ein:

php


cache = random(1000000);
loadVariablesNum("http://www.deinedomain.de/counter_write.php?cache="+cache,0,"GET");
loadVariablesNum("http://www.deinedomain.de/counter_read.php?cache="+cache,0,"GET");

STOP?! Warum machen wir das?

Mit diesen beiden Zeilen laden wir das Ergebnis, das die beiden Dateien counter_write.php und counter_read.php in Flash. Flash macht also nichts anderes als diese Dateien in einem "internen Browser" aufzurufen und auszuführen. Die counter_read.php gibt eine für Flash formatierte Variable namens counter zurück, die wir später als unsere Seitenzugriffe ausgeben.

Und warum random(1000000);?

Flash hat ein generelles Problem mit dem Cache (temporäre Internet-Dateien). Flash prüft also zunächst ob es die Datei www.deinedomain.de/counter_read.php bereits in den Temporären Internet-Dateien gibt, und nimmt diese anstelle die Datei neu zu laden. Das hätte zur Folge, dass sich die Anzahl der Besuche für dich nicht ändern würde. Um dies zu verhindern hängen wir einen String mit einer Zufallszahl zwischen 0 und 1.000.000 an. Die Wahrscheinlichkeit, dass nun zweimal die selbe Datei geladen wird ist sehr gering, und sollte uns für den Counter auch reichen. Wenn die Flash-Datei fertig ist, wirf einen Blick in die Temporären Internet-Dateien, du wirst dort einige Dateien finden die nur einen anderen Cache haben. Z.B. .../counter_read.php?cache=123215 usw...

Im zweiten Frame auf der Zeitleiste fügen wir ein weiteres Schlüsselbild, welches wir go nennen. Desweiteren fügen wir einige Frames später (die genaue Zahl ist nicht wichtig) ein weiteres Schlüsselbild ein und schreiben folgenden Code in das Schlüsselbild:

php


if (loaded != 1) {
	gotoAndPlay("go");
} else {
	gotoAndStop("done");
}

STOP?! Warum machen wir das?

In diesem Teil der Flash Datei prüfen wir, ob die Anzahl der Zugriffe bereits geladen ist. Im Prinzip ein kleiner "preloader". Wenn die Daten (die Seitenzugriffe) also noch nicht geladen sind, wird wieder zu einem früheren Teil des Flash-Films gesprungen (Schlüsselbild "go"). Erst wenn die Daten geladen sind werden sie ausgegeben. Dies ist für User gedacht, die eine langsame Internet-Verbindung haben. In der Regel reichen die Frames zwischen dem ersten Frame und der Ausgabe.

Wir fügen ein weiteres Schlüsselbild ein und nennen dieses done, und geben dem Frame folgenden Code:

actionscript

counterText = counter+" visitors...";
stop();

Damit sind wir mit dem Code in Flash bereits fertig, es fehlt uns nur noch ein Textfeld, und eine kleine Animation, die als Preloader fungiert.

Zunächst brauchen wir eine neue Ebene, diese nennen wir Text. Wir fügen zwei neue (leere) Schlüsselbilder ein, eines über dem Frame go und eines über dem Frame done.

Im zweiten Schlüsselbild der Ebene Text fügen wir ein neues Textfeld ein, und geben als Typ Statischer Text an. In das Textfeld schreiben wir ein beliebigen Text wie z.B. "loading data...". Danach konvertieren wir dieses Textfeld in einen neuen Movieclip (Shortcut F8 oder Modifizieren --> In Symbol konvertieren) und vergeben den Namen preloader.

Mit einem Doppelklick auf das neue Symbol gelangen wir in den Movieclip preloader. Im dritten Frame fügen wir ein neues Schlüsselbild hinzu, und ändern die Farbe des Textfeldes minimal ab, so das ein "flimmern" entsteht, wenn wir den Film später betrachten.

Nun kehren wir wieder zur ersten Ebene zurück und fügen in der Zeitleiste Text über dem Schlüsselbild done ein neues Textfeld ein, und geben diesem den Typ Dynamischer Text.

Wichtig: Solltest du keine Standart-Schriftart verwenden, solltest du die Schriftart einbetten. Darauf werde ich an dieser Stelle aber nicht weiter eingehen. Als Variable vergeben wir counterText, und deaktivieren "Auswählbar" sowie "Rahmen um Text zeigen".

Wenn du den Film jetzt testest (Shortcut F12 oder STRG+ENTER) sollte kurz "loading data..." und danach die Anzahl der Besuche zu sehen sein.