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 |
||
|
||
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 |
||
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: 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: |
||
--------------------------------
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:
|
||
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. 6.
und 7. In diesen Zeilen weisen wir posx und posy die Daten der Arrays
poskx und posky zu. |
||
1. <?php |
||
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. |