WAS?

Dieses Tutorial ist das erste einer Reihe von Beschreibungen, die sich um Flash und PHP drehen. Ziel ist auf eine einfache Art und Weise eine möglichst hohen Grad an Interaktivität und Dynamik auf eine Webseite zu bringen. Die fla-Datei, das PHP-Script, die Textdateisowie diese Beschreibung können hier heruntergeladen werden.

ZIEL

Mit Hilfe dieses Tutorials soll erklärt werden, wie eine bestimmte Anzahl von Elementen auf dem Bildschirm per drag/drop positioniert werden kann. Die _x und _y Positionen dieser Elemente sollen ermittelt und anschließend auf dem Server abgespeichert werden. Der nächste Besucher sieht dann die vom vorherigen Besucher bestimmten Positionen dieser Elemente. Diese können erneut in ihrer Position verändert und abgespeichert werden.

In weiteren Tutorials soll dann beschrieben werden, wie diese Daten

 
 
  • (neben der Position auch die Farben, Größe und der _alpha-Wert) verändert und abgespeichert werden können.
  • nach einem LogIn eines bestimmten Besuchers dessen schon früher eingegebenen Daten erneut erscheinen (nützlich dafür, wenn ein bestimmter Besucher seine Oberfläche selbst gestaltet oder beim Abspeichern eines Punktestandes bei Onlinespielen)
  • mit Hilfe einer E-Card zu einer anderen Person verschickt werden können.
  • das Abspeichern sowie Abfragen dieser Daten in einer einfachen mysql-Datenbank
 
 

Aus Zeitgründen werden diese Anleitungen in unregelmäßigen Abständen erscheinen.

Ich möchte darauf hinweisen, dass ich hier nicht auf das Einrichten eines localhost eingehen werde. Dazu gibt es genügend Anleitungen. Zusätzlich bieten verschiedene Provider PHP-unterstützte Server gratis zum Testen an. Zeitweise sind diese sehr langsam und unzuverlässig, zum Üben reichen sie im allgemeinen aus.

Welche Bereiche werden hier angesprochen? DuplicateMovieClip, drag/drop, Arrays, split, push (mit extra Anmerkungen) sowie PHP. Es werden hier sehr viele Informationen vermittelt - anhand eines praktischen Beispiels. Der Anfänger soll ein vertieftes Wissen in ActionScript, sowie eine Anregung zu weiterem Spielen und Experimentieren erhalten.

START
Zuerst kreieren wir die Grafik, ein Quadrat, das wir duplizieren wollen. Mit Strg F8 kreiere ich ein neues Symbol, wähle Button aus, benenne ihn Button und zeichne ein Quadrat beliebiger Farbe mit einer Größe von 50 x 50 Pixel. Ich kreiere mit Strg F8 ein weiteres Symbol, wähle Filmsequenz aus und ziehe den Button aus der Bibliothek auf die Bühne. Anschließend aktiviere ich den Button mit der Maus (ein einfacher Klick auf den Button) und schreibe folgenden Code in das ActionScript Fenster:

--------------------------------

 
  1. on (press) {
2. startDrag (this);
3. }
4. on (release) {
5. stopDrag ();
6. }
--------------------------------
 
  Jetzt kehre ich wieder zur Hauptzeitleiste zurück. Dort ziehe ich das Quadrat aus der Bibliothek neben die Bühne und gebe ihm den Instanznamen quader0. Falls jemand einen anderen Namen besser findet, kein Problem, wichtig ist allerdings, dass direkt hinter den Instanznamen eine 0 gehängt wird. quader_0 oder quader-0 ist auch kein Problem.
 
 

Auf der Hauptzeitleiste bilden wir drei Keyframes sowie drei Ebenen mit den Bezeichnungen Action (hier kommt der ActionScript-Code rein), Button und quader. In alle drei Frames wird ein Teil des Skripts geschrieben.

In Frame eins findet sich folgendes Skript:

 
  --------------------------------
1. fscommand ("allowscale", "false");
2. k = 10;
3. this.loadVariables("position.txt");
4. stop();
--------------------------------
 
 

Normalerweise werden die Variablen und Funktionen in Frame eins definiert. Da ich in dieser Übung der Einfachheit halber ohne Funktionen arbeite, finden sich hier nur vier Zeilen:

1. Mit diesem Skript wird das Skalieren des Flash-Films unterbunden.

2. Wir legen den Wert der Variable k, die in Frame zwei benötigt wird, fest. In diesem Fall entschied ich mich für den Wert 10. Es gehört zu gutem Programmierstil, die Variablen so weit wie möglich im ersten Frame festzulegen.

3. Wir laden die Textdatei mit den Werten für die _x und _y Positionen in den FlashMovie. Die Variablen heißen posx und posy. Die Textdatei heißt position.txt.

4. Mit einem Stop-Befehl halten wir den Film in Frame eins an.

Mit Hilfe einer Schaltfläche soll der String aus der .txt-Datei in einen Array umgewandelt werden. Zusätzlich soll der Abspielkopf in Frame 2 springen. Wir drücken also wieder Strg F8, tippen den Namen Button ein und wählen Schaltfläche aus. Wir zeichnen eine Grafik, 30 x 30 Pixel groß und kehren zur Hauptzeitleiste zurück. Anschließend ziehen wir den Button in Frame eins auf die Bühne (Ebene: Schaltfläche). Wir aktivieren die Schaltfläche und schreiben folgendes Script in das ActionScript Fenster:

 
  --------------------------------
1. on(release) {
2. neux = new Array();
3. neuy = new Array();
4. _root.neux = posx.split(",");
5. _root.neuy = posy.split(",");
6 _root.gotoAndStop (2);
7. }
--------------------------------
 
  1. Dieser Befehl müsste schon bekannt sein: Bei Loslassen des Mauszeigers geschieht alles, was innerhalb der geschweiften Klammer { } steht.

2. Wir bilden einen neuen Array mit dem Namen neux für die _x Positionen

3. Einen weiteren neuen Array mit dem Namen neuy für die _y Positionen

4. Mit dem Befehl split füllen wir die neuen Arrays, die bisher noch leer sind, mit den _x und _y Positionen, die in der Textdatei position.txt abgespeichert worden sind. Wir verwenden hierfür den Befehl split, mit dessen Hilfe der String xpos aus der Textdatei position.txt in einen Array umgewandelt wird. Die split- Funktion teilt einen String in eine Reihe von Substrings und füllt diese in einen Array. Die allgemeine Schreibweise für die Benutzung von split() sieht so aus: string.split(delimiter);Bei String verwenden wir logischerweise den Namen des Strings: xpos. dann folgt nach einem Punkt der Befehl split und in Klammer folgt in Anführungszeichen das Zeichen, welches anzeigt, wo unser String geteilt werden soll. Da bei xpos (siehe position.txt) alle Zeichen durch ein Komma geteilt sind, folgt die Verwendung eines Kommas: xpos.split(",");

5. Dasselbe wie in 5, nur für die _y Position

6. Der Mauszeiger springt in Frame zwei und bleibt dort stehen.

Kommen wir nun zu Frame 2:
Hier sollen die aus der Textdatei position.txt entnommenen Daten den duplizierten Objekten (in unserem Fall die Quadrate) zugewiesen werden. Dies bedeutet, dass die _x und _y Positionen der Quadrate genau die Positionen annehmen sollen, die in der Textdatei festgelegt sind. Nun der Reihe nach. Das Skript:

 
  --------------------------------
1. quadrat = new Array();
2. quadrat[0] = quader0;
3. x = 0;
4. while (x<=k) {
5. duplicateMovieClip ("quader0", "quad"+x, x);
6. quadrat[x] = eval("quad" + x);
7. quadrat[x]._x = neux[x];
8. quadrat[x]._y = neuy[x];
9. x = x+1;
10. }
11. stop();

--------------------------------
 
 

Dieses Skript sieht vielleicht für den einen oder anderen etwas kompliziert aus, es ist aber halb so wild: Zuerst bilden wir einen Array. Bei einem Array handelt es sich um einen Datentyp, der wie eine Variable Informationen beinhalten kann. Ein Array kann jedoch im Gegensatz zu einer Variablen mehrere Daten, genannt Elemente, enthalten. Bevor ich das Script weiter erläutere, noch einige grundsätzliche Anmerkungen zu Arrays. Nehmen wir an, wir haben einen Array mit 20 Elementen, genannt element1, element2,...element20. Wollten wir den Array ElementArray mit diesen 20 Elementen füllen wollen, sähe dies so aus:
var elementArray = new Array("element1","element2",...."element20");
Grundlegend (!) und wichtig (!) zur Vermeidung von Fehlern ist, bei jedem Array zu bedenken, dass die Zählung bei Arrays mit Null beginnt. Wollen wir element1 im Array elementArray ansprechen, schreiben wir elementArray[0]. Wollen wir element17 ansprechen, notieren wir elementArray[16]. Hier ein Beispielscript, wie dem element7 die _x-Position 125 zugewiesen wird:
elementArray[6]._x = 125;


Nun zurück zu dem oben beschriebenen Script:

1. Mit quadrat = new Array(); bilden wir einen neuen Array mit dem Namen quadrat. Diese Methode ist die gängigste Art, einen Array zu bilden. Bis jetzt enthält dieser Array jedoch noch keine Daten. Diesem Array ordnen wir später (Punkt 6) nach dem Duplizieren die duplizierten MovieClips zu. Da wir im folgenden Beispiel 20 Elemente duplizieren, enthält dieses Array 20 Elemente. Diese Zuordnung wird nützlich sein, um jedes Element einzeln ansprechen zu können. Ich werde darauf zurückkommen.

2. quadrat[0] = quader0; Mit dieser Zeile ordnen wir dem ersten Element des Arrays, quadrat[0] den FilmClip quader0 (den wir selbst kreiiert haben und nun auf der Bühne sehen) zu.

3. Wir legen den Wert x = 0;

4. while (x<=k) { Mit Hilfe einer While-Schleife soll der Film solange dupliziert werden, bis k<= 20 erreicht ist. Weiter unten, bei Punkt 9, wird zu x eins dazugezählt. Die Schleife wird solange wiederholt, bis 20 erreicht ist. Es könnte auch while(x<=20) geschrieben werden. Es gehört jedoch zum besseren Programmierstil, Variablen zu definieren und ihnen Werte zuzuweisen. Sollte ein bestimmter Wert öfters verwendet werden und muss er aus bestimmten Gründen verändert werden, kann einfach k ein neuer Wert zugewiesen werden und der Wert wird automatisch an allen notwendigen Stellen aktualisiert. Ohne die Verwendung einer Variablen muss diese Arbeit mit Hand durchgeführt werden, was einerseits mit einem erhöhten Zeitaufwand verbunden ist, aber auch eine erhöhte Fehlergefahr in sich birgt.

5. duplicateMovieClip ("quader0", "quad"+x, x);Dieser Befehl dupliziert den auf die Bühne gezogenen quader0. Es ist darauf zu achten, dass dieser Instanzname zwischen Anführungszeichen steht. Hinter dem Komma steht der neue Name dieses duplizierten MovieClips: "quad"+x. Bei x=1 heißt das duplizierte Element somit "quad"+1, was quad1 gleichkommt, bei x = 2 "quad" + 2 u.s.w.

6. Hier haben wir es mit einer sehr wichtigen Zeile zu tun: quadrat[x] = eval("quad" + x); Die jeweiligen duplizierten Elemente("quad"+x) werden dem Arrayquader[x] je nach x-Wert zugewiesen.

7. quadrat[x]._x = neux[x]; Diese Zeile setzt die x-Position der jeweiligen duplizierten Elemente fest. Das Prinzip ist einfach. Wir haben insgesamt 20 Quadrate und wir haben 20 _x Positionen, die im Array neux[x] enthalten sind. Quadrat 1 (=quadrat[1]) weißen wir die Position 1 im Array neux zu, das wäre neux[1]. Quadrat 2 (=quadrat[2]) weißen wir als _x Position als zweiten Wert das Arrays neux[2] zu usf.

8. quadrat[x]._y = neuy[x]; Zuweisung eines _y-Wertes wie in 7. beschrieben.

8. x = x+1; Wie oben beschrieben wird zu x solange eins addiert, bis 20 erreicht ist. Dies bedeutet, dass 20 Mal das Skript durchgeführt wird und bei jedem Durchlauf wird der x-Wert um eins größer.

9. } Das Whileloop wird geschlossen.

10. Stop(); Der Abspielkopf stoppt an diesem Frame.


Mit Hilfe einer Schaltfläche gelangen wir in das dritte Frame. Der Besucher klickt diesen Button nur, wenn er daran interssiert ist, die Positionen der Elemente, wie er sie festgelegt hat, abzuspeichern. Wir ziehen erneut eine Schaltfläche aus der Bibliothek in Frame 2 auf der Ebene Button auf die Bühne.

In dem Button findet sich folgendes Skript:
-----------------------------------

 
  on (release) {
gotoAndStop (3);
}

-----------------------------------
 
  Dieser Befehl muss wohl nicht näher erläutert werden.

In Frame drei steht folgendes Skript: Hier werden die neuen _x sowie _y Positionen der duplizierten Elemente ermittelt, nachdem sie vom Besucher an die erwünschten Positionen gelegt worden sind und an ein PHP-Script übergeben.
-----------------------------------
 
  1. poskx = new Array();
2. posky = new Array();
3. for (i=1; i<=k; i++) {
4. poskx.push(_root["quad"+i]._x);
5. posky.push(_root["quad"+i]._y);
6. posx = poskx;
7. posy = posky;
8. }
9. loadVariables ("save.php", "", "POST");
10. stop ();
-----------------------------------
 
 

1. und 2. Es werden zwei neue Arrays gebildet mit den Namen posx und posy, was als Abkürzung für die position von x und die position von y zu werten ist. Es ist zu beachten, dass diese Arrays dieselben Namen erhalten sollten, wie die Variablen in der position.txt-Datei.

3. Mit Hilfe einer for-Schleife, die ebensoviele Elemente enthält wie wir duplizierte Elemente haben (k Elemente, wie oben beschrieben), werden den neu gebildeten Arrays (posx und posy) die _x und _y Positionen zugewiesen. Die Zählung beginnt jedoch bei eins, da Null schon durch das von uns kreierte quader0 besetzt ist.

4. und 5. Dies erfolgt mit Hilfe des push-Befehls. Mit posx.push(_root["quad"+i]. _x); Hier werden nun sämtliche _x-Positionen aller duplizierten Quader in den Array posx eingefügt.
Der Array posx könnte dann folgendermaßen aussehen:
posx(229.7,342.75,171.6,261.5,334.75, 232,103.7,159.85,446.3, 76.55,187.25,405.65,145.35,39.25,163,226.9,135.75,494.5,135.5);
Zu beachten ist hier: wir sprechen die duplizierten MC's nicht, wie weiter oben mit quader[x] an, sondern mit dem beim Duplizieren zugewiesenen Namen: _root.["quad"+i].
Mit push werden normalerweise ein oder mehrere Elemente an das Ende eines Arrays angehängt. Da die Arrays posx und posy bisher noch leer sind, beginnt die Einfügung an der ersten Stelle (und damit die Zählung, wie beschrieben bei Null).

Um die Funktion von push noch genauer zu erläutern, hier ein Beispiel:
Nehmen wir an, wir haben ein Array mit dem Namen arrayorte:
arrayorte = ["Buxtehude", "Aschersleben", "Biberach"];
Nun fügen wir diesem Array noch Bebra hinzu:
arrayorte.push("Bebra");
Damit sieht arrayorte nun so aus:
arrayorte = ["Buxtehude", "Aschersleben", "Biberach", "Bebra"];

6. und 7. In diesen Zeilen weisen wir posx und posy die Daten der Arrays poskx und posky zu.

9. Mit loadVariables ("saveselbst.php", "", "POST"); wird ein PHP-Skript aufgerufen, mit dessen Hilfe posx und posy abgespeichert werden sollen.

DAS PHP-SCRIPT
Mit Hilfe des folgenden PHP-Scripts soll eine neue Datei position.txt gebildet werden. In ihr werden die_x und _y-Positionen, die wir in die Arrays xpos und ypos eingefügt haben, abgespeichert.
--------------------------------

 
 

1. <?php
2. $namep = fopen("position.txt",wb);//öffnen der datei;
3. fputs($namep,"&poskx=$poskx&posky=$posky"); // schreiben in die Datei
4. fclose($namep);
5. ?>

--------------------------------
 
  1.Mit <?php beginnt jedes php-Script

2. Mit dieser Zeile wird die position.txt Datei geöffnet. Ist sie noch nicht vorhanden, wird sie mit diesem Befehl automatisch kreiiert. Mit "w" erfolgt der Befehl, dass Informationen in die Datei geschrieben werden sollen.

3. Mit fputs wird alles, was in der Klammer folgt, in die Datei geschrieben. Mit $namep erfolgt nochmals ein Verweis auf die zu beschreibende Datei, anschließend werden die Daten des Array aus Flash durch das Script in einen String formatiert. Die Elemente aus dem Array posx werden in die Variablen $posx ungewandelt (Variablen werden in PHP mit einem vorgesetzten Dollar-Zeichen dargestellt).

4. Die Datei wird wieder geschlossen. Beim erneuten Laden der Webseite erscheinen nun die Quadrate an den Positionen, wie sie zuletzt eingespeichert wurden und können erneut verändert und abgespeichert werden.

Es kann durchaus vorkommen, dass ein Neuling diese Übung beim ersten Lesen und Umsetzen nicht ganz versteht. Ich schlage vor, diese Übung am nächsten Tag noch ein oder zwei mal durchzuführen. Sollten dann immer noch Fragen offen sein, einfach an info@2sign4.de schreiben.