Ich werde hier anfangs etwas ausholen, um euch die Grundschritte näher zu bringen. Für dieses Tutorial
solltet ihr schon ein paar Grundkenntnisse haben. So solltet ihr wissen, wie man Textfelder aufzieht, diese
als „statisch“, „dynamisch“ oder „Eingabefeld“ deklariert und wie man wo Instanznamen vergibt.

Außerdem solltet ihr den Unterschied zwischen „Actionscript im Schlüsselbild“ und „Actionscript im MovieClip“
kennen, da wir ausschließlich im ersten Schlüsselbild der Hauptzeitleiste programmieren werden.


Wir werden hier ein Gästebuch erstellen. Eigentlich bevorzuge ich als Speichermedium die SQL-Variante,
werde hier aber (für alle die sich damit schwer tun) die allseits bekannte Textdatei einbauen. Für welche
Variante ihr euch dann entscheidet, bleibt euch überlassen.

Ich werde hier mit Bildern sparsam sein, da zum einen das meiste programmiert ist, und zum anderen
das Design jedem selbst überlassen ist. Bei den Bildern in diesem Tutorial werdet ihr die Oberfläche von
Flash CS3 sehen. Solltet ihr mit Flash 7 oder Flash 8 arbeiten, sieht es bei euch minimal anders aus.



Ich würde vorschlagen, wir beginnen mit der PHP-Datei, und zwar mit der, die die Textdatei verarbeitet. Wer
über einen PHP-Editor verfügt, sollte diesen verwenden. Ansonsten funktioniert natürlich auch ein Texteditor.
Im ersten Schritt geben wir folgende Zeilen ein:

Code:

Für alle, die keine Ahnung von PHP haben: PHP wird serverseitig ausgeführt, d.h. im Gegensatz zu HTML
kann kein Browser der Welt etwas mit PHP anfangen. Sprich: der Code wird mehr oder weniger vom Server,
wenn der PHP versteht, übersetzt und dann in für den Browser verständlichen Code umgewandelt.
In unserem Falle ist das zwar irrelevant, da wir ja eigentlich keine Browserausgabe für den User wünschen.
Da wir aber dennoch ein Medium zum Übertragen der Daten benötigen, leistet uns hier der Browser gute
Dienste.
Um nun also bekanntzugeben, dass folgender Code für den Server, und nicht für den Browser bestimmt ist,
packt man diesen in sogenannte PHP-Tags:

Einleitungstag
Code:

Dann der eigentliche Code ...

PHP-Ende-Tag
Code:


Nun zum eigentlichen Gästebuch-PHP-Code, wobei ich hier nur die PHP-Befehle kurz erkläre, die auch
im Tutorial verwendet werden.

Code:

$file ist hier ein von mir frei gewählter Variablenname. Wichtig ist nur das Dollarzeichen $ davor. Es könnte
also auch $Oma, $Opa oder sonstwie heißen. Hauptsache, ihr kommt nicht auf die Idee, die Variable einmal
so und einmal so zu nennen.
Was genau macht die Zeile? Hier passiert eigentlich nichts anderes, als eben eine Variable „$file“ ins Leben
zu rufen und dieser zu sagen, dass sie jetzt für „content.txt“ steht. Auch hier ist „content“ frei gewählt. Nur die
Endung „.txt“ muss so heißen, da ja eine Textdatei daraus werden soll.


Code:

Hier wird geprüft, ob es die Datei „content.txt“ schon gibt. Wenn nicht, also beim allerersten Aufruf des
Codes, wird sie erstellt. Hierzu dient uns der Befehl „if“ und der Befehl „!file_exists“. Wer des Englischen
mächtig ist, kann hier schon sehr viel übersetzen:

„Wenn Datei(content.txt) existiert“. Ganz genau ist aber folgende Übersetzung:
„Wenn Datei(content.txt) nicht existiert“, da vor dem Befehl „file_exists“ ein Ausrufezeichen zu finden ist.
Ausrufezeichen drehen den darauf folgenden Befehl oder Operator um bzw. verneinen die Abfrage.

Ganz wichtig in fast allen Programmiersprachen: Nach der Bedingung muss die jeweilige Anweisung in
geschweiften Klammern { } stehen: „Wenn (so und so der Fall ist) { mache das und das }“.

Der nächste Befehl auf der Liste heißt „fopen“, was soviel wie „file open“ (öffne Datei) bedeutet. Damit PHP
weiß, welche Datei geöffnet werden soll, wird eben auf unsere anfangs definierte Variable $file mit dem Wert
„content.txt“ verwiesen. Darauf folgt noch der Parameter „w“ als String, welcher festlegt, wie diese Datei
geöffnet werden soll:
„w“ z.B. steht für „write“ und öffnet die Datei nicht nur, sondern erstellt sie auch, sofern sie noch nicht
vorhanden ist. Für den ersten Aufruf also perfekt.

Das Dumme an dem Parameter „w“ ist allerdings die Tatsache, dass auch bereits vorhandene Dateien, die
schon mit Inhalt gefüllt sind, neu erstellt werden, d.h. Inhalte werden gelöscht. Also werden wir diesen
Parameter nur hier verwenden und ansonsten die weiter unten erklärten Parameter „a+“ und „r“ anwenden.


Um Daten via PHP zu transferieren wird meist entweder „POST“ oder „GET“ verwendet. Hierzu nur eine kurze
Erklärung:
Stellen wir uns vor, POST bzw GET wären Träger oder besser ein Floß im Fluss des WWW. Das POST-Floß
ist riesig und kann unbegrenzt Daten tragen, während das GET-Floß nur begrenzt Daten befördern kann.
Beide bieten Vor- und Nachteile. Da wir unseren Gästebuchbesuchern aber nicht zumuten möchten, nur eine
begrenzte Anzahl von Zeichen zu verwenden, werden wir uns für die POST-Variante entscheiden.

Code:

Nun, was passiert in diesem Codeblock? Auch hier helfen uns wieder Englischkenntnisse: „Wenn POST-Floß
'name'-Daten enthält und POST-Floß 'text'-Daten enthält { ... “.

Hier werden also die Daten, die von unserem Flashgästebuch kommen, erstmal empfangen, um dann weiter
verarbeitet zu werden. $allstring ist wieder eine Variable, die dann beide Floßladungen miteinander verknüpft,
entsprechend formatiert und ein Datum anbaut.

Jeder, der HMTL kennt, wird mit <b> etwas anfangen können. Es macht nämlich alles, was zwischen <b> und
</b> steht fett. Flash versteht in sehr eingeschränkter Form HTML und kann also z.B. <b> auch interpretieren.
date() ist dann der Befehl für die Datumsausgabe, zum einen für den Tag (d), den Monat (m) und das Jahr (Y),
sowie für die Uhrzeit, also Stunde(H), Minute(i) und Sekunde(s) des Eintrags.

$boolstring wiederum ist eine Variable, die $allstring enthält, wobei aber durch den Befehl str_replace(),
alle | Zeichen durch # Zeichen ersetzt wurden.


Da wir hier alle Einträge zusammengefasst an Flash senden , sollten wir doch die Einträge irgendwie
voneinander trennen, bzw. Flash bekannt machen, dass nach jedem | ein neuer Eintrag kommt. Und weil
ein User durch die Eingabe von | versehentlich genau dieses bewirken könnte, verhindern wir das, indem
wir das Zeichen | in den Usereingaben einfach gegen ein # austauschen.

Das | Zeichen (oder auch „Pipe“) ist kein spezielles Zeichen, um Flash Strings trennen zu lassen. Es würde
mit jedem beliebigen Zeichen funktionieren, das wir im späteren Actionscriptcode als Trennzeichen angeben.
Es wird aber eigentlich beim normalen Text schreiben nie verwendet außer bei der Programmierung. Also
bietet sich dieses Zeichen besonders an.


Nun sind beide Datenträger (Name und Text) miteinander verknüpft sind, haben ein Datum und die entsprechende
Formatierung und stehen zusammengefasst als $boolstring zur Verfügung; wir können das Ganze jetzt speichern.

Code:

Und wieder wird unsere content.txt geöffnet. Diesmal allerdings mit dem Parameter „a+“:  
„a+“ (a wie append = anhängen) schreibt genau wie „w“ und erstellt die Datei auch neu, sofern noch nicht
vorhanden. Das Schöne aber ist, dass „a+“ die Datei nicht überschreibt, sondern vielmehr den Inhalt an das
letzte Zeichen anhängt. Wer es genauer wissen will, könnte nach „fopen“ und „Dateizeiger“ googeln.

Der Befehl fputs() gibt dann die eigentliche Schreibanweisung heraus. In unserem Beispiel wird schön brav
noch ein „PIPE“ | dahinter gesetzt, damit Flash das Ganze später beim Einlesen wieder trennen kann. -
fclose() schließt die Datei wieder.


Jetzt haben wir unsere Einträge also alle gespeichert. Nur wie lesen wir sie aus? Und vor allem in der
richtigen Reihenfolge? Wer aufgepasst hat, weiß, dass unsere Einträge so sortiert geschrieben wurden:

Von oben nach unten:
Eintrag 1
Eintrag 2
Eintrag 3
usw

D.h. der letzte Eintrag steht ganz unten. In einem Gästebuch sollte aber der letzte Eintrag immer an erster
Stelle stehen. Und genau das machen wir jetzt im nächsten Schritt:

Code:

In unserer ersten Zeile des Block wird wieder unsere Datei geöffnet. Diesmal verwenden wir den Parameter „r“,
der für „read“ (lesen) steht. Mit dieser Option kann die Datei also nur gelesen werden. Sie wird nicht erstellt,
wenn nicht vorhanden, und es wird nichts geschrieben oder gar gelöscht. Nur gelesen.

Kurzer Einwurf. Wer jetzt denkt, dass es doch umständlich ist, so oft die Datei zu öffnen, anstatt sie einfach
offen zu lassen, hat recht und auch nicht recht: Diese PHP Datei schreibt ja nicht nur, sondern gibt auch
unsere Daten aus. Warum soll also unsere content.txt jedes mal mit Schreibfunktion geöffnet werden, wenn
der User doch vielleicht nur die Einträge lesen will?

Weiter im Text. Unsere Variable $outarr wird durch explode zu einem Array.


Beide speichern Daten. Die einfache Variable speichert nur einen Wert, während ein Array mehrere Werte
(Elemente) speichern kann. Eine einfache Variable könnte z.B. so aussehen

Code:

Ein Array aber kann auch mehrere Werte speichern:

Code:

Um jetzt zum Beispiel nur das zweite Element („Ich bin gelb angestrichen“) auszugeben, verwendet man  

Code:

Falls euch die 1 für das zweite Element verwirrt: In den Programmiersprachen wird fast immer von 0 ab
gezählt. Also das erste Element hat Index [0], das zweite Element hat Index [1] usw.


Also. Um unsere Gästebucheinträge zu trennen, ist es das beste, aus unserem Einträgestring ein Array zu
erstellen ($outarr), welches die Einträge jeweils in ein eigenes Array-Element verfrachtet. Dazu hilft uns
der Befehl explode(), welchem als Trennzeichen ebenfalls die berühmte Pipe (die wir ja verwenden) als
Parameter angegeben wird. Der Befehl fread() liest den kompletten Inhalt aus und gibt ihn als String zurück.
Genauer erklärt:

explode(Parameter für die Trennung, String der getrennt werden soll)
fread(Variable zur geöffneten Datei, filesize(Zeichengröße der zu auslesenden Datei))

Unser Array $outarr ist bestückt. Jetzt können wir die Einträge drehen. Wir wollen ja das der letzte Eintrag
als erster zu sehen ist. Dies geht mit dem simplen Befehl array_reverse() - genau, „array rückwärts“.

Somit haben wir jetzt ein Array $rearr, welches praktisch fast versandfertig in der richtigen Reihenfolge
und richtig formatiert bereit steht. Aber nur fast. Denn leider kann Flash mit einem Array nichts anfangen.
Natürlich arbeitet Flash auch mit Arrays. Aber zum Empfang und Versand von Daten ist ein Array die
falsche Wahl, da hier wenn überhaupt nur das erste Element übergeben wird.

Also machen wir aus dem ganzen Array wieder einen einfachen String, in dem wir die Einträge einfach
durch -richtig erraten!- ein Pipe-Zeichen „|“ trennen.

Code:

Das Pendant zu explode() ist implode(), welches ebenfalls einen Trenner als Parameter erwartet.
Der Befehl echo macht nichts anderes, als eben nachfolgendes anzuzeigen/auszugeben.


Da wir ja gleich eine verarbeitbare Variable für Flash erzeugen sollten, beginnen wir die Ausgabe mit
&back=, was im Prinzip gleichzusetzen ist mit $back=. Flash fängt aber mit $ in der Form nichts an. Genau
genommen setzt man in Flash keine Sonderzeichen vor eine Variable, was ja z.B. in PHP unabdingbar ist.
Um Flash dennoch 'rüberzubringen, was wir wollen, nämlich eine Variable mit den Daten zu erstellen,
verwenden wir nur zur Vergabe eben das kaufmännische & Zeichen, da Flash dieses als Datenflußeinleitung
versteht.


Was uns zum nächsten Problem führt: Was ist wenn unsere User z.B. „Anne & Michael“ schreiben?
Genau. Flash würde auch hier das & Zeichen als Einleitung verstehen und somit Michael als Datenträger.
Da wir aber „Michael“ in Flash gar nicht abfragen, sondern nur „back“, würde Flash hier also nichts mehr
ausgeben. D.h. unsere Eintragspracht würde jäh nach „Anne“ enden.

Um dies zu verhindern, nutzen wir die Möglichkeit schon bei unserem | Zeichen, dieses & Zeichen zu
ersetzen und es dann in Flash selbst, wo es dann wiederum keine Probleme mehr gibt, wieder
zurückzutauschen. Also ändern wir die Zeile flugs in folgende ab:

Code:

Hier der komplette Code

Code:

Jetzt speichern wir unsere PHP als „cont.php“  - und schon wäre der einfachste Part geschafft!  



Ich werde in diesem Beispiel ein minimalistisches Design walten lassen, da ihr das bestimmt sowieso euren
Bedürfnissen anpassen wollt.
Öffnet ein neues Flashdokument und stellt eine Bühnengröße von 400 Breite, 200 Höhe und eine Framerate
von 24 Bildern in der Sekunde ein.



Nun erstellen wir erst einmal die Eingabemaske für eure Besucher.

Zunächst benötigen wir zwei statische Textfelder („Name:“ und „Nachricht:“), unter die jeweils das
entsprechende Eingabetextfeld kommt. Bitte beachten, dass die Option „mehrzeilig“ im Eingabefeld der
Nachrichten aktiviert sein muss, während das Feld für den Namen nur auf „einzeilig“ eingestellt werden
sollte.




Sollte ihr für eure Eingabefelder andere Schriftarten als die allgemein bekannten Systemschriften wie
z.B. Arial verwenden wollen, müsst ihr die Zeichen einbetten. Dazu markiert euer Eingabefeld, und geht
dann im Eigenschaftenfenster auf „Einbetten“. Hier könnt ihr dann entweder ganze Zeichenblöcke aus der
Liste  auswählen, oder die einzubettenden Zeichen unter „Diese Zeichen einschließen“ selbst hineinschreiben.

Bitte bedenken: Je mehr Zeichen ihr einbettet, umso größer wird die ganze Datei. Meine Empfehlung:
Großbuchstaben, Kleinbuchstaben, Satzzeichen, Ziffern und lateinisch einfach markieren. Außerdem noch
die Zeichen öäüÖÄÜß manuell einfügen und mit Okay bestätigen.

Was bedeutet „einbetten“?

Ein Browser kann nur die Schriften anzeigen, die auch auf dem System, auf dem er sich befindet, installiert
sind. Sollte euer Flashfilm mit nicht eingebetteten Schriften arbeiten, die euer Besucher nicht installiert
hat, wird sein System eine installierte Schrift als Ersatz verwenden. Und dies macht so manches Design
zunichte. Beim Einbetten passiert folgendes: Die Zeichen werden separat im Flashfilm gespeichert und dann
nach Bedarf ausgegeben. Somit läuft das Gästebuch mehr oder weniger unabhängig von den installierten
Systemfonts, da es ja auf eigene zugreifen kann.

Nun bekommen eure Eingabefelder noch Instanznamen. Da „name“ auch als Systembefehl von Flash verwendet
wird, verzichten wir auf dieses Wort als Instanzbezeichnung, auch wenn's nicht tragisch wäre.Also nennen
wir unser Eingabefeld für Namen einfach „from“ und unser Nachrichtentextfeld „message“. Natürlich ohne
Anführungszeichen.

Als nächstes setzen wir ein blaues Rechteck und ein statisches Textfeld „Senden“ unter das Nachrichtentextfeld.
Jetzt markieren wir noch beides, so dass das Ganze gruppiert ist und wandeln es mit F8 in ein Symbol um.
Vergebt einfach einen Namen nach Lust und Laune oder überlasst das Flash. Es darf auch „Symbol1“ heißen.
Lediglich den Instanznamen auf der Bühne müsst ihr vergeben, nämlich „send_btn“ (ohne Anführungszeichen).





In AS (ActionScript) werden wir später ja unsere Elemente ansprechen. Z.B. soll beim Klicken auf „Senden“
auch tatsächlich die Nachricht gespeichert werden.
Wir wissen natürlich, was unser „Senden“-Button ist. Flash allerdings weiß das nicht. Deshalb taufen wir
sozusagen unsere relevanten Bausteine auf der Bühne. Somit weiß auch Flash, was was ist.

Ach so. In den Eingabefeldern sowie in späteren dynamischen Feldern gibt es auch noch das Feld für var.
Dieses bitte ignorieren und leer lassen. Auch wenn ihr schon möglicherweise andere Tutorials durchgearbeitet
habt, in denen damit gearbeitet wird.

So. Die Eingabemaske wäre erledigt.


Direkt daneben setzten wir jetzt noch eine Fläche (Farbe egal), die uns später als Maske dient. Auch diese
wird markiert, mit F8 in ein Symbol(Movieclip) umgewandelt und an sie der Instanzname „maske“ vergeben.



Diese Fläche hat eigentlich nur die Funktion, später die Einträge zu maskieren, d.h. man sieht nur den
Ausschnitt an Einträgen entsprechend der Maskengröße.

Jetzt ziehen wir nochmal eine kleine Fläche auf, die uns später als Anfasser für unseren Eintragsscroller
dient. Auch dieser wird symbolisiert (F8) und bekommt den Instanznamen „scroller“



Die Position des Scrollers ist egal, da wir ihn später per Actionscript rechts an die Maske kleben.


Jetzt kommt der haarige Teil: Wir werden jetzt den Elementpart erstellen für die Einträge. Dazu schlage
ich einen blauen Balken oben und dynamisches Textfeld darunter vor. Also:

Wir gehen oben im Menü auf Einfügen->Neues Symbol und wählen den Namen „element“. Mit Okay bestätigen.
Automatisch hat unsere Flashoberfläche nun in den Movieclip „element“ gewechselt.

Nun ziehen wir zunächst am Kreuzchen den Balken für den Elementanfang auf. Achtet darauf, dass der Balken
in der Länge genau den Maßen der Maskenbreite entspricht. Wenn nötig einfach von Hand eingeben. Darunter
setzt ihr nun ein Dynamisches Textfeld mit dem Instanznamen „element_txt“.

Auch hier bitte die Schrift einbetten, wenn eine Sonderschrift verwendet wird. Bitte beachtet aber dabei, dass
fette Darstellung voraussetzt, dass die jeweilige Sonderschrift einmal fett und einmal normal eingebettet wird.
Ansonsten wird später der Name nicht fett, sondern nur normal dargestellt.


So sollte es aussehen. „Auswählbar“ bitte deaktivieren, „Als HTML anzeigen“ aktivieren. Einfach nach
dem Bild richten.

So. Nun verlassen wir unseren MovieClip „element“ wieder, indem wir oben links unter der Zeitleiste auf „Szene1“
klicken. In der Bibliothek klickt ihr jetzt mit der rechten Maustaste auf „element“, wählt „Verknüpfung“
und dann „Export für Actionscript“ und „Ins erste Bild exportieren“. Oben sollte „element“ stehen. Mit
Okay bestätigen.



Jetzt geht’s endlich ans Eingemachte, nämlich an Actionscript. Klickt auf das erste und einzige
Schlüsselbild und öffnet das Aktionenfenster (F9). Ab jetzt bewegen wir uns nur noch darin.

Der schöne Teil :)


Im ersten Schritt müssen wir die Daten aus unserer Textdatei/Datenbank bekommen, für uns verarbeitbar
machen, und entsprechend der Einträge Elementblöcke erstellen, die dann den jeweiligen Eintrag umfassen.
Dann müssen diese Blöcke übereinander angeordnet werden. Wir wollen ja von oben nach unten und nicht
von links nach rechts lesen, was auch möglich wäre.

Auch sollte natürlich nicht die ganze Blockkette angezeigt werden, sondern eben immer nur soviel, dass
es bequem in unser Designschema passt. Also maskieren wir den Bereich, den wir sehen möchten. -
Ach ja. Ein Scroller wäre nett. Schließlich haben wir ja schon einen gebaut.

Scriptaufbau:

+ Lesefunktionseinleitung

+ Daten holen
+ Daten verarbeiten
+ Datenblöcke erstellen
+ Scroller und Maske einsetzten

+ Definieren von wo die Daten kommen

+ Lesefunktion schließen.

Vielleicht ein wenig grob, aber ich denke mit dieser Struktur können wir arbeiten.


Unsere erste Zeile in AS ist eigentlich ziemlich simpel und selbsterklärend.

Code:

Wie schon in PHP erstellen wir hier eine Variable, die uns auf unsere PHP Datei verweist. Auch hier
ist der Name „php“ frei gewählt, da es ja eine von uns erstellte Variable ist. Diese Variable wird
später abgefragt, bzw. zeigt unserem Flash, wo die PHP-Datei zu finden ist.
Dies habe ich hier in die erste Zeile geschrieben, allerdings nur der Übersicht halber. So lange diese
Zeile über der späteren Datei-Abfrage sitzt, funktioniert das Ganze.

Und hier haben wir schon den ersten Unterschied zwischen PHP und Actionscript. Wie auch schon weiter
oben erwähnt, müssen in Actionscript einer Variablen keine Sonderzeichen vorangestellt werden. Im weiteren
Verlauf werdet ihr aber feststellen, dass sich beide Programmiersprachen gar nicht so sehr unterscheiden.

Wie ihr seht, liegen unsere Flächen, Textfelder usw. frei auf der Bühne herum. Gerade unsere Maske passt
doch so gar nicht ins Bild. Also: Damit unser User nicht gleich am Anfang von ihr erschlagen wird, machen
wir sie erstmal unsichtbar, bis alle Daten geladen sind.

Code:

Dasselbe gilt auch für unseren Scroller. Der soll ja ohnehin nur sichtbar sein, wenn auch genügend
Einträge zum Scrollen da sind. Und da wir das anfangs gar nicht wissen und erst die Daten einladen
müssen ...
Code:

... verschwindet auch der im Nirvana. „scroller“ und „maske“ sind keine AS Befehle sondern lediglich
unsere Instanznamen. Ihr erinnert euch?


Kurze Überlegung.
Wir möchten ja, dass unsere Einträge nach einem Eintrag wieder neu gelesen werden. Schließlich will der
User ja sehen, was er geschrieben hat. Was jetzt bei PHP/HTML durch den Reload bedingt im Browser als
selbstverständlich gilt (Reload, neuer Aufruf, Ausgabe), gestaltet sich bei Flash um einiges schwieriger.
Wir müssen Flash bei jeder Aktion sagen, dass es sich die Daten neu holen muss.
Da es aber umständlich wäre, nun einmal einen Codeblock für den Seitenstart und einmal einen für die
Absenden-Anweisung zu schreiben, verwenden wir einfach eine Funktion. Diese können wir beliebig oft
ausführen.

Code:

Wie funktioniert eine Funktion? Wie in fast allen Programmiersprachen ähnlich

    -Funktionsname
    -Funktionsparameter (Optional)
    -Anweisung(en)
    -Funktionsende

Lediglich die Anordnung gestaltet sich von Sprache zu Sprache teilweise etwas anders.In unserem Falle
nennen wir die Funktion „eintraege_lesen“. Denn genau das tut sie ja. Also leiten wir die Funktion ein,
einen Parameter verwenden wir hier nicht:

Code:

Wir haben nun schon ein paar MovieClips manuell erstellt (F8). Hier zeige ich euch wie man diese auch
per AS erstellen kann.

Code:


Auch hier helfen uns unsere Sprachkenntnisse. _root (Wurzel) steht für die allererste Ebene. In einem
Hochhaus z.B. der Keller oder das Fundament, auf dem der Rest des Hauses mit all seinen Ebenen aufgebaut
ist. Die Zeile bedeutet:  „erstelle leeren MovieClip mit dem Instanznamen „elements“ auf Level 0

Level 0 ist also das unterste. Nicht verwirren lassen dadurch, denn natürlich ist _root eh schon der
Keller in unserem Hausbeispiel. Aber wenn wir z.B. im Keller erst einen Tisch und dann darauf eine Lampe
stellen, ist ja der Tisch auch unter der Lampe. Also hat der Tisch Level 0 und die Lampe Level 1, alles
zusammen steht im Keller, also im _root.


Im nächsten Schritt werden wir eine weitere Funktion erstellen, die uns eine Verbindung zu unseren Daten
herstellt.

Code:

Vorsicht. Diese Funktion unterscheidet sich grundlegend von unserer eintraege_lesen()-Funktion. Denn
diese muss nicht erst von uns aufgerufen werden, da sie schon von Flash selbst aufgerufen wird, und
zwar durch den Befehl onLoad. Aber um nicht vorzugreifen, gehen wir die Zeilen durch.

Zunächst wird einer Variablen „varLoader“ eine Variable der LoadVars-Klasse zugewiesen. LoadVars ist
praktisch schon eine komplette Klasse aus der Flashlibrary, auf die wir zugreifen können.

In der nächsten Zeile passiert folgendes
Code:

Sinngemäß: „Wenn Inhalt empfangen werden kann, gib loaded als true zurück“, wobei „loaded“ ebenfalls
wieder eine von uns frei bezeichnete Variable ist.
Code:

„Wenn also loaded wahr (true) ist, sprich tatsächlich Daten empfangen wurden...“
Code:

„...pack uns diese Daten in eine Variable (back) und mach gleich für die & Liebhaber das & wieder rein“.

Die Befehle split() und join() entsprechen in PHP den Befehlen explode() bzw. implode(). Lediglich die
Parametervergabe gestaltet sich unterschiedlich. In beiden Sprachen tun sie das gleiche.
split() trennt den String und verwendet den im Parameter angegebenen String("§§und§§") als Trenner,
während join() das Ganze wieder zu einem String zusammenfügt und in die Trennlücken eben die Zeichen
einfügt, die als Parameter mitgegeben wurden. In diesem Falle also das & Zeichen.

Also übersetzen wir es einmal Wort für Wort: back stellt die angekommenen Daten dar, nachdem diese
einmal anhand der §§und§§" getrennt und dann durch "&" an diesen Stellen wieder verbunden wurden.
Anschließend wird das ganze nocheinmal durch „|“ getrennt. Ihr seht also die Pipe, die wir in PHP als
Trenner verwendet haben, tut hier ihren Dienst ganz gut.

Unsere Einträge, die also vorher vielleicht so aussahen

„<b>Von Anne §§und§§ Michel vom 5.5.2009 um 12.30.52</b>Nachricht: Ein schönes Gästebuch|<b>Von Andi vom 5.5.2009 um 12.20.32</b>Nachricht: Ich bin auch da|“

wurden dann also in

„<b>Von Anne & Michel vom 5.5.2009 um 12.30.52</b>Nachricht: Ein schönes Gästebuch“
„<b>Von Andi vom 5.5.2009 um 12.20.32</b>Nachricht: Ich bin auch da“

umgewandelt. Die <b> sind später nicht sichtbar. Keine Angst. Aber somit weiß Flash „AHA, was da jetzt
zwischen steht, soll fett dargestellt werden“.


So. Da back nun also ein Array ist, das unsere Einträge getrennt für uns aufbewahrt, können wir damit
anfangen, die Daten in Datenblöcke zu laden. Hierzu verwenden wir den vorhin erstellten Movieclip
„element“.

Code:

Im Prinzip einfach. Wir verwenden hier eine for-Schleife, die sich so lange wiederholt, wie unser
Array „back“ Elemente hat.

Code:

Im Prinzip so übersetzt:
„i entspricht 0; solange i kleiner ist als die Anzahl der Elemente im Array back, erhöhe i um 1 und
{ tue bei jeder Erhöhung folgendes }.

Code:

In diesem Schritt prüfen wir, ob auch wirklich etwas drin steht im jeweiligen Eintrag. Wir werden das
GB zwar so schreiben, dass Einträge nur gespeichert werden, wenn Namen und Nachricht nicht leer sind,
aber trotzdem sichern wir uns hier noch einmal doppelt ab.

Code:

Hier werden dann für jeden Eintrag eben unser MovieClip „element“ aus der Bibliothek geholt und an
unseren MovieClip elements geklebt. Bildlich gesehen würde nun unser MC „elements“ wie ein Krake aussehen.
„elements“ als Körper und „element“ als Arm.

Da nun aber nicht jeder Arm „element“ heißen darf, setzen wir einfach an den Namen „element“ noch den
Wert von i, der sich ja ständig erhöht. So haben wir dann

elements.element0,elements.element1,elements.element2,elements.element3 usw.

Kurzerklärung zu attachMovie()

Code:


Übrigens! AttachMovie funktioniert nur mit MovieClips, die in der Bibliothek vorher auch verknüpft
wurden. Haben wir ja gemacht.
Auch hier wird wieder ein Level angegeben, da jedes Level (Ebene) immer nur eine Sache zulässt. Alles
was auf einer Ebene platziert wird, überschreibt das Vorherige. Man kann ja auch keine Lampe in die
Lampe stellen, um unser Hausbeispiel noch einmal aufzugreifen. Aber auch hier verwenden wir den Wert
von i, da sich dieser ja ständig erhöht und somit gleiche Werte ausschließt.


Da nun unsere Blöcke einsatzbereit sind, sollten wir sie doch auch mit ihren Inhalten füllen.
Code:


Wir sprechen die anhängigen MovieClips in eckigen Klammern an, da wir uns immer noch in der
for-Schleife befinden und sowieso ja nicht wissen, wie viele Einträge es denn sind. Und
elements['element'+i] ist doch viel bequemer, als hier jedes einzelne Element für sich anzusprechen,
etwa

elements.element0
elements.element1
elements.element2
usw.

Unsere element-MovieClips hatten ja zum einen den blauen Balken und zum anderen direkt darunter
das Textfeld. Und dieses Textfeld (mit Instanzname element_txt) befüllen wir jetzt.

Code:

Da wir HTML-Tags (<b>) verwenden, müssen wir das Flash hier nocheinmal explizit sagen und anstelle
einer anderen Varianten( „text“) „htmlText“ verwenden.  Direkt nach unserem eigentlichen Eintragselement
(back[i]) bauen wir noch ein paar Umbrüche ein, damit die Elemente später nicht so aufeinander gequetscht
aussehen:

Code:

Da die Einträge ja unterschiedlich lang sind, sollten wir unserem Textfeld erlauben, sich in seiner
Höhe dem Inhalt anzupassen, indem wir den Parameter „autoSize“ auf Wahr stellen:

Code:

Flash arbeitet strikt nach Koordinaten X und Y. Unsere Elementblöcke sollten nun also noch wissen,
wie sie denn angeordnet sein sollen. Nun zum einen sagten wir ja, untereinander.

Code:

D.h. es wird immer die y-Position des vorangehenden MovieClips abgefragt und dessen Höhe addiert. Dann
wird an dieser neuen y-Position der nächste MovieClip positioniert usw.

Nun sollte noch der Hauptmovieclip, der die Eintragsblöcke trägt, an die Maske heranpositioniert werden

Code:

Und schließlich sollte die Maske auch als solche dienen und unsere Elemente maskieren

Code:

... so dass tatsächlich nur soviel von unseren Elementen zu sehen ist, wie unsere Maske Ausmaße hat.
Okay. Das hätten wir.


Jetzt sollte man das ganze nur noch scrollen können, damit wir auch mehr als nur den ersten Eintrag
lesen können. Also positionieren wir den Scroller direkt rechts neben unsere Maske:

Code:

Damit wir wissen, wieviel unser Scroller scrollen muss, sollten wir natürlich errechnen, um wie viel
unser Elementen-Movieclip unsere Maske überragt.

Code:

Selbsterklärend oder? dif = Höhe des Elementen-Movieclips – Höhe der Maske.

Code:

Kennt ihr auch schon. Wenn dif größer als 0 ist, also wenn elemente wirklich größer sind als unsere
Maske, zeige den Scroller an. Andernfalls mache ihn unsichtbar.


Jetzt kommen wir zum Anfassen unseres Scrollers. Wir wollen ihn ja mit der Maus bewegen können.
Nun einfach etwas mit der Maus zu bewegen (zu draggen), ist nicht schwer. Der Befehl startDrag macht
das für uns. Nur sollte unser Scroller ja nicht frei beweglich sein. Er sollte zum einen nur auf der
y-Achse (von oben nach unten) zu verschieben sein, und zum anderen auch nur so weit, wie unsere Maske
hoch ist.
Also werden wir erst mal Grenzen ziehen, die unserem scroller später sagen, bis dahin und nicht weiter.
„o“ steht für oben, „l“ für links, „r“ für rechts und „u“ für unten.

Code:

Wer bis hierher aufgepasst hat, kann diese vier Zeilen schon alleine übersetzen. Die 5 sorgt für ein
bisschen Abstand zur Maske. Sonst würde der Scroller direkt daran kleben.

So, jetzt wird's kurz heftig. Hier kommt der eigentliche Befehl bzw. der Aufruf, wenn wir mit der Maus auf
unseren Scroller drücken:

Code:

„Wenn also die Maus auf dem scroller gedrückt wird...

Code:

... bewege ihn entsprechend der Maus.“

startDrag() wird immer der zu draggende Movieclip vorangestellt. Da wir aber ja unseren Aufruf vom
entsprechenden Movieclip tätigen, reicht ein „this“ („dieser“), was sich dann auf unseren Movieclip bezieht.
Als nächstes folgt der Parameter „false“. Dieser verhindert, dass unser Movieclip nicht abhängig von seinem
Registrierungspunkt an unsere Mausspitze hüpft. Danach kommen dann unsere Begrenzungsparameter
links, oben, rechts, unten.  


Den Scroller könnte man nun theoretisch draggen. Nur scrollen würde noch nichts.- Nochmal Brainstorming.

Wir können über den Befehl onMouseMove die Koordinaten unseres Scrollers abfragen, solange wir die Maus
bewegen (was wir ja beim Draggen tun). Wir wissen, dass unser Scroller einen maximalen Bewegungsbereich
unserer Maskenhöhe hat. Und wir wissen, um wieviel unser Eintrags-Movieclip höher ist als unsere Maske.

Also könnten wir doch den guten alten Dreisatz verwenden, um unser Wissen sinnvoll umzusetzen.

Maskenhöhe = 100%
Scroller Y = X%

dif = 100%
neue Y-Koordinate = dif / 100% * X%

müsste uns doch nach Adam Riese genau die Y-Position durchgeben, die unser Elementen-Movieclip
entsprechend unseres Scrollers einnehmen müsste.

Also (Math.round rundet auf):
Code:

E voilà!


Schön und gut. Nur klebt jetzt der Scroller an unserer Maus, selbst wenn wir schon längst losgelassen
haben. Auch unser MouseMove ist noch aktiv und errechnet ständig neue Koordinaten. Also beheben wir den
Schaden kurz und beenden unsere Funktionsanweisung.

Code:

„Wenn der Scroller losgelassen wird bzw. sich die Maus außerhalb des dragbaren Bereiches aufhält, beende
den Drag und entferne den MouseMove.“ Schließlich sagen wir unserer LoadVars varLoader noch, wie sie was
zu laden hat  - und hätten somit unsere Funktion fertig. Rufen wir sie doch einfach gleich auf:

Code:



Unsere Einträge wären jetzt schön lesbar. Nur leider ist noch nichts eingetragen. Und genau das machen
wir jetzt.

Code:

Kurzum, nachdem wir auf unseren send_btn geklickt haben, wird geprüft, ob unsere Textfelder „from“
und „message“ auch nicht leer sind. Wenn etwas hineingeschrieben wurde, verwenden wir die loadVars-
Klasse erneut, senden aber nur und geben als Sendename jeweils den Namen der LoadVars an und danach
den Variablenbezeichner für PHP ($_POST['name'], $_POST['text']).

Nach dem Senden rufen wir noch kurz eine Schleife auf, die genau 50 mal durchlaufen wird: wir brauchen
Zeit, bis der Server den Eintrag gespeichert hat. Dann rufen wir wieder unsere eintraege_lesen() auf.


War doch einfach, oder? Hier noch mal der ganze Code für die Copy&Pastler unter euch:
Code:



Viel Spaß

Anschauen könnt ihr das fertige Stück hier
http://ush-media.de/shirtshop/gbooktut.html



>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!