Formulare mit Flash MX

Titelthema: Heft 02/2002 (S. 47) 3 Seiten

Eingaben mit ActionScript weiterverarbeiten

Flash bietet viele Optionen zur Interaktion. Mithilfe von ActionScript kann der Anwender auch auf Texteingaben des Websurfers reagieren und diese weiterverwerten. Der folgende Workshop zeigt die Gestaltung einer Eingabemaske und die Verwertung von eingegebenem Text auf einem gesonderten Tableau

Wir zeigen in unserem Workshop, wie man Textfelder auf einer Grafik platziert. Die Eingaben sollen anschließend ausgewertet werden. Für die grafische Gestaltung des Formulars haben wir eine der Flash MX-Vorlagen verwendet. Rufen Sie dazu die Funktion "Datei/Neu von Vorlage" auf. Wählen Sie aus der Kategorie "Präsentation" den Stil 1. In der Vorlage werden sämtliche nicht benötigten Elemente und die Filmbilder gelöscht. Auch alle ActionScript-Anweisungen sollten entfernt werden. Der Hintergrund erhält außerdem einen Grünton mit dem hexadezimalen Wert #336633. Zunächst platzieren wir eine Menge Hilfslinien. Sie sehen das vorbereitete Dokument in der Abbildung.

Neue Objekte konstruieren

Auf einer neuen Ebene werden die Rechtecke erstellt, in denen der Anwender später seine Texteingaben vornehmen soll. Der Rahmen der Rechtecke ist auf einen Pixel eingestellt. Umriss- und Füllfarbe wurden mit der Pipette vom Untergrund entnommen. Der Rahmenfarbton hat die RGB-Farbwerte 176, 196, 176, die Füllung 112, 148, 112.

Platzieren Sie alle vier Rechtecke auf einer neuen Ebene. Dabei hat jedes Rechteck eine Höhe von 25 Pixeln und anschließend denselben Wert als Abstand zum nächsten Rechteck. Auf einer weiteren Ebene erstellen Sie Beschriftungen für die Eingabefelder. Die dafür eingegebenen Schriftattribute sehen Sie abgebildet. Die Farbe entspricht der Umrandung der Eingabefelder. Die unten rechts platzierte Schaltfläche wurde von der Vorlage übernommen. Achten Sie aber darauf, sämtlichen ActionScript-Quell-Code zu entfernten.

Ein neues Schlüsselbild

Das Ergebnis der Texteingabe wollen wir auf einem neuen Bild präsentieren. Erstellen Sie deshalb für die Untergrundebenen neue Schlüsselbilder. Wo Sie die Bilder platzieren, ist egal - sie sollen nur als Trennung dienen. Hier wurde außerdem die Bezeichnung links unten angepasst. Damit unser "Film" nicht durchläuft, platzieren Sie in einem der Schlüsselbilder am Anfang des Films eine Stop-Aktion. In welcher der Ebenen Sie diese unterbringen, ist egal - Hauptsache, der Film hält an.

Texteingabefelder erstellen

Nun wollen wir Ihnen eine besondere Funktion des Textwerkzeugs vorstellen: Sie können nämlich auch Textfelder erstellen, in denen der Anwender Texte eingeben kann. Außerdem gibt es neben den unveränderlichen Texten auch Felder, deren Inhalt dynamisch geändert werden kann. Mit Flash können Sie das Richtext-Format in bearbeitbaren Feldern erhalten. Dynamischen oder Eingabetextfeldern können Sie außerdem im Eigenschaften-Bedienfeld das HTML-Format zuweisen. Dann werden den Texten die notwendigen HTML-Tags zugeordnet.

Nun müssen die Eigenschaften eingestellt werden, die der Text, den die Anwender eingeben können, haben soll. Er entspricht fast dem der Beschriftungen. Allerdings ist er nur 18 Punkt groß und hat die Farbe mit den RGB-Werten 55, 105, 55. Stellen Sie im ersten Listenfeld im linken Bereich des Eigenschaften-Bedienfelds die Option "Eingabetext" ein. Damit werden weitere Funktionen aktiviert. Im Listenfeld beschränken wir mit der Option "Einzelzeile" die Texteingabe auf eine Zeile. Außerdem soll die Textlänge auf maximal 20 Zeichen beschränkt sein.

Schriftarten einbetten

Mit den Schaltflächen der Option "Zeichen" können Sie Speicherplatz sparen. In einem gesonderten Dialogfeld können Sie bestimmte Zeichen - wie etwa Zahlen - beim Einbetten ausschließen.

Eingabetexte erstellen

Ziehen Sie nun auf einer neuen Ebene einen Rahmen auf, der das Feld umschließt, in dem eine Texteingabe möglich sein soll. So entsteht ein leeres Textfeld. Hier könnten Sie Text eingeben - das wollen wir aber nicht tun. Drücken Sie die Esc-Taste, damit das Feld leer bleibt. Übrig bleibt der Markierungsrahmen, der wie üblich blau eingefärbt erscheint. Schieben Sie den Rahmen in die Mitte des darunter liegenden Rechtecks. Dabei kommt es nicht auf die absolute Präzision an.

Variablen verwenden

Nun kommt ActionScript ins Spiel: Hier können Sie mit Variablen arbeiten. Diese Möglichkeit bietet sich an, da die Eingabe des Benutzers logischerweise erst während der Laufzeit unseres Filmes entsteht. Also behandeln Sie das Textfeld als Variable. Die entsprechende Möglichkeit finden Sie rechts im Eigenschaften-Bedienfeld. Tippen Sie im Variablen-Eingabefeld die gewünschte Bezeichnung ein - in unserem Fall "Feld1".

Duplizieren Sie jetzt das fertige Textfeld für die vier anderen Felder, die wir noch vorgesehen haben. Verziehen Sie dazu das Textfeld am besten mit gedrückter Strg-Taste, um ein Duplikat zu erstellen. Richten Sie die vier Textfelder linksbündig zueinander aus - in der Höhe können Sie die Pfeiltasten zum Ausrichten verwenden - das geht schneller. Markieren Sie der Reihe nach die Textfelder und ändern Sie die Variablen-Namen. Wir haben sie einfach durchnummeriert. Nicht markierte, leere Textfelder werden übrigens mit einer schwarzweiß gestrichelten Umrisslinie gekennzeichnet.

Einsatz der Variablen

Definiert sind die Variablen nun. So wird beispielsweise alles, was ein Anwender in das erste Textfeld eintippt, als "Variable Feld1" verwendet. In Filmbild 15 sollen die Eingaben nun ausgewertet werden. Erstellen Sie auch in diesem Filmbild ein Textfeld - wir verwenden dafür eine neue Ebene. In diesem Fall haben wir dieselben Schriftattribute eingegeben - allerdings in der Farbe der Bezeichnungen (RGB: 176, 196, 176). Im Eigenschaften-Bedienfeld haben wir außerdem eine zentrierte Absatzausrichtung eingestellt. Bei den Textoptionen haben wir die gezeigten Werte verwendet. Auch hier muss unbedingt ein Variablenname angegeben werden. Das Textfeld bleibt wieder leer. Damit der Film wieder angehalten wird, sollten Sie auch hier eine Stop-Aktion setzen.

Auswertung der Variablen

Jetzt müssen die Variablen noch ausgewertet werden. Kehren Sie zum ersten Schlüsselbild zurück und markieren Sie die Schaltfläche unten rechts im Bild. Rufen Sie aus dem Kontextmenü die Aktionen auf. Alternativ dazu können Sie auch das Symbol aus dem Eigenschaften-Bedienfeld verwenden. Es ist das mit dem aufwärts zeigenden Pfeil.

Aufruf der Aktionen

Rufen Sie im Aktionen-Bedienfeld die Anweisung set variable auf, die Sie im Ordner "Aktionen/Variablen" finden. An der roten Hervorhebung sehen Sie gleich, dass hier noch weitere Angaben notwendig sind. Im Variablen-Feld muss das Objekt angegeben werden, das die Variable übernehmen soll - also unser Rechteck in Filmbild 15. Diese Variante würde zu einem falschen Ergebnis führen. Warum? Dazu ist eine Überlegung nötig: Vielleicht haben Sie bemerkt, dass im Textbereich die Bezeichnung "Feld 1" in Anführungszeichen gesetzt wurde. Das würde dazu führen, dass beim Start des Films im Ausgabetextfeld der Text "Feld 1" angezeigt würde - egal, was der Anwender im Eingabefeld eingetippt hat. Beim Programmieren werden Texte (Strings) immer in Anführungszeichen gefasst - Befehle und Variablen dagegen nicht. Markieren Sie deshalb für das Wert-Eingabefeld die Option "Ausdruck", die Sie rechts neben dem Eingabefeld finden. So weiß Flash MX, dass es sich nicht um einen Text handelt. Sollen alle Angaben in den Feldern des ersten Filmbilds im Antworttextfeld angezeigt werden, addieren Sie diese einfach, wie in der Abbildung zu sehen.

Besonderheiten

Dieses Verhalten ist eine Besonderheit des Programmierens. Während Sie aus der Mathematik Additionen wie 1 + 2 = 3 kennen, können Sie beim Programmieren anders vorgehen. Sie definieren beispielsweise einfach a + b = c. Sie müssen nun nur beachten, dass zuvor geklärt wird, was "a" und "b" bedeuten. So könnten Sie angeben, dass a = 1 und b = 2 ist. So würde das Ergebnis c ebenfalls den Wert 3 ergeben. Des Weiteren lassen sich auch Strings addieren. Setzen Sie beispielsweise a = "Dies ist" und b = "ein Satz" ergäbe c = "Dies ist ein Satz". Was zunächst irreführend aussieht, ist recht praktisch. Die letztgenannte Variante benutzen wir in unserem Beispiel.

Auswerten der Variablen

Nun müssen Sie noch zum Filmbild 15 wechseln, damit der Anwender seine Texteingaben auch sieht. Fügen Sie also eine gotoAndPlay-Anweisung aus der Kategorie "Filmsteuerung" ein. Der gesamte Anweisungsblock könnte nun folgendermaßen aussehen: Die Schaltfläche in Filmbild 15 verweist im Gegensatz dazu zum Filmbild 1 zurück.

Probieren Sie aus, was passiert. Starten Sie den Film mit der Tastenkombination Strg-Enter. Geben Sie in den Texteingabefeldern Text ein. Damit es deutlich zu erkennen ist, was passiert, haben wir hier pro Feld Zahlen angegeben. Klicken Sie nun auf die Schaltfläche, um das Ergebnis zu betrachten. Sie sehen, dort sind nun alle Felder aneinander angehängt aufgeführt.

Das Ergebnis verfeinern

Das Ergebnis sieht schon ganz gut aus. Wir wollen es aber noch etwas besser aufbauen. Das einfache Aneinanderhängen der Feldeingaben ist doch recht langweilig. Besser wäre es, wenn der Anwender - schön geordnet - seine Angaben angezeigt bekäme. Dazu können Sie die bereits kurz erwähnte Häkchenvariante verwenden. Alles, was in Häkchen geschrieben aufgeführt wird, interpretiert ActionScript als Text.

Formatieren von Texten

Geben Sie also "Feld1 = "+Feld1 ein, wird der Text in Häkchen angezeigt und dahinter der Wert der Feld1-Variablen. So haben wir die folgende Anordnung gewählt. Beachten Sie dabei die Leerzeichen und Kommata, die wir innerhalb der Häkchen zur besseren Strukturierung mit untergebracht haben.

Dass dafür das Eingabefeld viel zu kurz ist, macht nichts: Es rutscht automatisch weiter, wenn das Ende erreicht ist. Die zweite Verbesserung betrifft das Zurückkehren zur Eingabemaske. Dort sind wieder die alten Werte zu sehen, die der Anwender zuvor eingetippt hat. Schöner wäre es doch, wenn zu einer erneut leeren Eingabemaske zurückgekehrt würde. Markieren Sie dazu die Schaltfläche zum Zurückkehren zu Filmbild 1. Neben der Angabe gotoAndPlay (1) fügen Sie noch die folgenden Set Variable-Angaben ein:

Was dort passiert? Nun, wir haben einfach den Variablen der Reihe nach neue Werte zugewiesen, was ja jederzeit möglich ist. Und wir haben den Wert "" verwendet - also nichts. Deshalb wird nichts angezeigt, wenn Sie zur Eingabemaske zurückkehren. Diese Möglichkeit können Sie auch nutzen, um beispielsweise jedes Mal andere Vorgabewerte zu verwenden, die der Anwender dann ergänzen kann. Testen Sie nun die Eingabemaske. Viel Spaß!