Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 8 Textfelder
  Pfeil 8.1 Textfelder und ActionScript
  Pfeil 8.2 Mit Textfeld-Inhalten arbeiten
  Pfeil 8.3 Textfelder formatieren und verändern
  Pfeil 8.4 Textfelder dynamisch erzeugen


Rheinwerk Computing - Zum Seitenanfang

8.2 Mit Textfeld-Inhalten arbeiten  topZur vorigen Überschrift

Nach der Theorie erfolgt nun der Schritt in die Praxis. Im folgenden Beispiel setzen Sie Eingabetextfelder und dynamische Textfelder ein. Die Ausgangsdatei finden Sie unter dem Namen textfelder.fla auf der CD-ROM zum Buch in den Ordnern Flash8 bzw. FlashMX2004 und FlashMX.

Die Datei enthält eine Vielzahl an Textfeldern. Die statischen Textfelder dienen zur Beschriftung. Das Eingabefeld rechts unten erlaubt dem Nutzer, ein eigenes Ziel zu wählen. Dieses Ziel soll neben dem Schriftzug »//target:« erscheinen. Dafür befindet sich dort ein dynamisches Textfeld. Die zwei dynamischen Textfelder unten sollen die aktuelle Position des Mauszeigers aufnehmen, wenn sich die Maus bewegt. Die drei dynamischen Textfelder auf den Schaltflächen in der Select-Box enthalten die Namen der Planeten. Diese Namen sollen bei einem Klick auf die jeweilige Schaltfläche ebenfalls neben dem Schriftzug »//target« landen.

Abbildung 8.4 Der Aufbau des Films zeigt die Namen der einzelnen Textfelder.

Die Variablennamen für den Inhalt der Textfelder sind in der Ausgangsdatei bereits vergeben und können der Übersichtsgrafik entnommen werden.

Schritt für Schritt: Textfelder zum Leben erwecken

Nun geht es los: Unser Solarsystem wird dank ActionScript funktionstüchtig. Dabei setzen Sie wegen der besseren Übersichtlichkeit Ereignisprozeduren ein, um die Schaltflächen mit Funktionalität zu belegen. Das heißt, der in den folgenden Schritten gezeigte Code landet komplett im ersten Schlüsselbild des Hauptfilms. Der Übersichtlichkeit halber packen Sie ihn wie gewohnt in die Ebene ActionScript.

Zu Anfang setzen Sie die dynamischen Felder über die Schaltflächen für die drei Planeten:

planet1_inhalt_str = "Pluto";
planet2_inhalt_str = "Mars";
planet3_inhalt_str = "Jupiter";

Bereits hier sehen Sie die Möglichkeiten von dynamischen Textfeldern: Schaltflächen und beliebige andere Elemente lassen sich dynamisch beschriften. Sie könnten statt »Mars« einfach »Venus« oder »Uranus« angeben:

planet2_inhalt_str = "Uranus";

Schon hätte die zweite Schaltfläche die Beschriftung »Uranus«.

Als Nächstes weisen Sie den Inhalt der drei dynamischen Textfelder mit den Planeten bei einem Klick auf die Schaltfläche dem dynamischen Textfeld neben »//target« zu:

planet1_btn.onRelease = function() {
   ziel_inhalt_str = planet1_inhalt_str;
};

Dies ist der Code für die erste Schaltfläche. Für die beiden anderen Schaltflächen passen Sie den Code einfach an:

planet2_btn.onRelease = function() {
   ziel_inhalt_str = planet2_inhalt_str;
};

und

planet3_btn.onRelease = function() {
   ziel_inhalt_str = planet3_inhalt_str;
};

Abbildung 8.5 Wenn der Nutzer auf die Schaltfläche für den ersten Planeten klickt, erscheint der Name des Planeten als Ziel unter »//target«.

Deaktivieren Sie für die drei dynamischen Textfelder der Planeten die Option Auswählbar.

Wenn die Option aktiviert ist, verdeckt das dynamische Textfeld die Schaltfläche darunter. Deswegen mussten wir sie für die dynamischen Textfelder deaktivieren.

Im nächsten Schritt versehen Sie die Schaltfläche set mit Funktionalität. Der Code überträgt den Inhalt des Eingabefelds in das dynamische Textfeld neben »//target«:

set_btn.onRelease = function() {
   ziel_inhalt_str = eingabe_inhalt_str;
};

Um das Eingabefeld mit der Schaltfläche clear wieder zu leeren, fügen Sie folgenden Code in das erste Schlüsselbild ein:

clear_btn.onRelease = function() {
   eingabe_inhalt_str = "";
};

Sie weisen damit dem Eingabefeld einen leeren String zu.

Tragen Sie nun den Code für die dynamischen Textfelder mit den Mauskoordinaten ein.

_root.onEnterFrame = function() {
   mausPosX_inhalt_str = _xmouse;
   mausPosY_inhalt_str = _ymouse;
   updateAfterEvent();
};

Besonders wichtig ist hier, wo der Code steht. Er wird an den Hauptfilm (_root) und dort an das Ereignis onEnterFrame gebunden. Die Ereignisprozedur enthält dann die eigentliche Funktionalität: Die Textfelder erhalten die Mauskoordinaten des Hauptfilms (_xmouse und _ymouse). Der Hauptfilm hat in diesem Fall also dieselben Eigenschaften wie ein normaler MovieClip. Nach dem Belegen der Textfelder aktualisiert die Funktion updateAfterEvent(). Wenn Sie die Funktion vergessen, werden die Textfelder nur einmal gefüllt.

Abbildung 8.6 Der Nutzer setzt einen Planeten.

Die fertigen Dateien mit ActionScript-Code finden Sie auf der CD-ROM. Sie heißen textfelder_AS1.fla für Flash MX und textfelder_AS2.fla für Flash 8 und MX 2004.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern