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 20 Formulare und UI-Komponenten
  Pfeil 20.1 UI-Komponenten
  Pfeil 20.2 Beispielanwendung mit Flash MX 2004 Pro und Flash 8 Pro
  Pfeil 20.3 Beispielanwendung ohne Flash Professional

20 Formulare und UI-Komponenten

Das Herzstück für komplexe WebanwendungenSie werden lernen:
  • Wie setzen Sie UI-Komponenten ein?
  • Wie erstellen Sie Formularfelder?
  • Wie greifen Sie auf Daten in Formularfeldern zu?
  • Wie lassen sich Formulareingaben überprüfen?

Nicht von dieser Welt sind diese Formen. – Schiller

Beim Stichwort »Formulare« denkt man meistens zuerst an die eigene (womöglich längst überfällige) Steuererklärung. Und in gewisser Hinsicht besteht ein Zusammenhang zwischen Flash-Formularen und dem jährlichen Belegesammeln. Wie sieht ein Formular der Steuererklärung aus? In vorgefertigte Felder können Sie Text und (natürlich) Zahlen eingeben, hin und wieder auch etwas ankreuzen.

Im Webbereich ist das genauso, auch hier sind Formulare gang und gäbe und bieten Felder, in die Sie Werte eintragen. Fast täglich wird der User mit solchen Web-Formularen konfrontiert: Nehmen Sie einen Webmail-Dienst in Anspruch – über ein Formular loggen Sie sich dort ein. Betreiben Sie Online-Banking – in ein Formular tippen Sie bei jeder Überweisung die Empfängerdaten und den Verwendungszweck.


Flash und Usability

Der umstrittene »Usability-Papst« Jakob Nielsen hat im Jahr 2000 die kritische These »Flash: 99  % schlecht« aufgestellt. Seine drei Hauptkritikpunkte: Der Bruch mit fundamentalen Web-Standards (beispielsweise keine Zurück-Schaltfläche), Ablenkung vom Seiteninhalt (häufig aufwendig zu pflegen) und eben der Designmissbrauch, unter anderem durch fehlende Standard UI-Komponenten. Im Jahr 2002 relativierte Nielsen diese Aussage, denn neue Flash-Versionen behoben viele der monierten Punkte (zudem engagierte Macromedia ihn unter anderem für einen Workshop bei der Entwicklerkonferenz »DevCon«...). Gleichzeitig bietet Nielsen eine (kostenpflichtige) Case Study an, die Design-Guidelines für Flash verspricht. Den Artikel von damals können Sie unter http://www.useit.com/alertbox/20001029.html nachlesen.


Auch in Flash-Filmen sind Formulare sehr sinnvoll. In diesem Kapitel demonstrieren wir Ihnen das am Beispiel einer Umfrage. Das nächste Kapitel zeigt wie Sie Formulare individuell anpassen, Kapitel 22 den Versand eines Kontaktformulars mit PHP und Kapitel 23 eine (kleine, aber feine) Warenkorb-Applikation. Überall dort kommen Formularfelder zum Tragen, und Sie benötigen ActionScript, um damit arbeiten zu können.


Rheinwerk Computing - Zum Seitenanfang

20.1 UI-Komponenten  topZur vorigen Überschrift

In alten Flash-Versionen war es noch schwierig, Formularfelder einzusetzen. »Schwierig« bedeutet, dass mit Flash nichts Derartiges mitgeliefert wurde und Sie alles selbst programmieren mussten. Die einzige Ausnahme stellten Textfelder dar, die schon seit längerem möglich sind. Für komplexere Formularelemente, beispielsweise Radiobuttons oder mehrzeilige Textfelder mit Scrollbalken, gab es nur zwei Möglichkeiten: Externe Komponente einkaufen oder selbst Hand anlegen, was beides teuer und aufwendig war.

Ein weiteres Problem: Jeder kreative Flasher kochte sein eigenes Süppchen. Und somit sahen Flash-Formulare je nach Gusto des Designers lange Zeit unterschiedlich aus. Nach der persönlichen Einschätzung des Designers stets intuitiv und eindeutig, aber häufig im Usability-Test ein Fehlschlag.

Mit Flash MX hat Macromedia die so genannten UI-Komponenten eingeführt und will damit die zuvor genannten Probleme ausmerzen. Zum einen steht ein stattlicher Satz an UI-Komponenten zur Verfügung, der sich leicht und ohne großen Programmieraufwand einsetzen lässt. Zum anderen garantiert das einheitliche Aussehen, dass sich die Anwender schnell mit der Bedienung zurechtfinden können – zumindest in der Theorie.

Nun müssen Sie abwägen: hohe Usability durch Einheits-Look oder mögliches Unverständnis beim Kunden und dafür ein individuelles Layout. Unsere Empfehlung: Freunden Sie sich mit den mitgelieferten Komponenten an. Sie lassen sich innerhalb gewisser Grenzen anpassen und können recht einfach mit ActionScript angesteuert werden.

Auch in MX 2004 gibt es die UI Components, sogar einige mehr als in der Version MX; gleiches gilt für Flash 8. Dennoch beschränken wir uns bei den Ausführungen auf Komponenten, die bereits unter Flash MX zur Verfügung standen.

Über Fenster • Entwicklungs-Bedienfelder • Komponenten können Sie das Komponenten-Bedienfeld einblenden, sofern es noch nicht sichtbar ist. Dort finden Sie die bei Flash mitgelieferten Komponenten (siehe auch Kapitel »Streaming« auf der CD-ROM zum Buch).

Wie Sie sehen, gibt es eine ganze Reihe von UI-Komponenten. Aus ActionScript-Sicht sind einige davon besonders interessant und kommen auch im großen Praxisbeispiel am Ende des Kapitels zum Einsatz. Zuvor jedoch werfen wir einen Blick auf ausgewählte Komponenten.

Allgemein gilt: Beim Testen und Einsetzen der Komponenten benötigen Sie einen einfachen Mechanismus, um schnell auf den aktuellen Wert im Formularfeld (der Eingabe) zuzugreifen. Folgendermaßen gehen Sie für jedes Beispiel vor:

Abbildung 20.1 Die Komponenten von Flash 8 (größtenteils bereits in MX 2004 vorhanden)

  • Sie erstellen eine Funktion ausgabe(), die per trace()-Anweisungen etwas ausgibt:
function ausgabe() { 
  trace("..."); 
}
  • Diese Funktion wird per setInterval() periodisch aufgerufen:
setInterval(ausgabe, 250);

Das ist der ganze Trick. Für jedes Formularfeld sieht der Inhalt von ausgabe() natürlich ein wenig anders aus, aber Sie wissen jetzt, wie der Mechanismus für den Zugriff funktioniert.


Passwortfelder

Bei Passwortfeldern erscheinen die Eingaben in Form von Sternchen, die nichts über die Eingabe verraten. Von Flash aus können diese Daten allerdings im Klartext ausgelesen werden, es findet also keine Form von Verschlüsselung statt.


Textfeld(er)

Wozu eine eigene Komponente verwenden, um ein bloßes Textfeld darzustellen? Mit dynamischen Textfeldern gelingt der Zugriff per ActionScript ebenfalls. Die Antwort: Komponenten-Textfelder sind mächtiger, hier sind beispielsweise auch Eingaben möglich. Für einfache Anwendungen (nur dynamische Ausgaben) reicht allerdings meistens ein dynamisches Textfeld.

Das Texteingabefeld (1) verbirgt sich hinter der Schaltfläche TextInput. Erstellen Sie einen neuen Film und platzieren Sie ein solches Feld auf der Bühne. In den verschiedenen Bedienfeldern von Flash können Sie jetzt Informationen über die Komponente aufrufen.

Abbildung 20.2 Die UI-Komponente innerhalb eines Films

Dabei stehen Ihnen folgende Möglichkeiten zur Verfügung:

  • Im Eigenschafteninspektor (2) (Register Parameter) bearbeiten Sie die wichtigsten Angaben zum Textfeld und vergeben einen Instanznamen. Um das Textfeld mit ActionScript ansteuern zu können, müssen Sie den Instanznamen unbedingt setzen.
  • Im Komponenten-Inspektor (3) (ebenfalls im Register Parameter) haben Sie Zugriff auf weitere Eigenschaften des Textfelds. Hier lässt sich beispielsweise die maximale Anzahl an Zeichen, die in das Textfeld dürfen, beschränken.

Eigenschaft Beschreibung

editable

Gibt an, ob der Benutzer Text in das Feld eingeben darf (true) oder nicht (false). Bei false kann der Flash-Film selbst trotzdem Änderungen am Feld vornehmen.

password

Liegt ein Passwortfeld vor (true) oder nicht (false, Standard).

text

Bezieht sich auf den Text, der anfangs im Feld stehen soll.


Tabelle 20.1 Wichtige Eigenschaften für Textfelder

Im Eigenschafteninspektor können Sie bereits die drei wichtigsten Feldeigenschaften ablesen; Sie finden sie in der oben stehenden Tabelle.

UI-Komponenten werden intern als MovieClips gehandhabt. Sie können also über Instanzname.Eigenschaft auf bestimmte Eigenschaften des Textfelds (beziehungsweise allgemeiner: der Komponente) zugreifen. Interessant zum Auslesen des Textfelds ist natürlich die Texteigenschaft. Erstellen wir einen Testfilm:

Schritt für Schritt: Textfelder einsetzen

Setzen Sie zwei Textfelder in den neuen Film ein. Beachten Sie, dass beide Textfelder für den Benutzer bearbeitbar sind, die Eigenschaft editable also den Wert true hat.

Vergeben Sie für die beiden Felder die Instanznamen textfeld1 und textfeld2.

Machen Sie eines der Textfelder zu einem Passwortfeld. Dazu müssen Sie die Eigenschaft password auf true setzen.

Der folgende Code gehört in Bild 1 des Flash-Films:

function ausgabe() { 
  trace("Feld 1: " + textfeld1.text + "\n"); 
  trace("Feld 2: " + textfeld2.text + "\n\n"); 
}
setInterval(ausgabe, 250);

Abbildung 20.3 Die Eingaben erscheinen im Ausgabe-Fenster.

Fertig ist ein einfacher Textfeldtest; Sie finden ihn auf der CD-ROM unter textinput_AS2.fla bzw. textinput_AS1.fla für Flash MX. Wenn Sie in die Textfelder etwas eingeben, erscheint im Ausgabe-Fenster sofort der zugehörige Wert.


Warum nicht keyUp?

Geeignet erscheint zunächst das Ereignis keyUp, also das Loslassen einer Taste. Es gibt allerdings einen Fall, bei dem diese Vorgehensweise ausgehebelt werden kann: Kopieren Sie zunächst Text in die Zwischenablage. Rufen Sie dann mit der Maus das Kontextmenü des Textfeldes auf und dort den Menüeintrag Einfügen. Der Text aus der Zwischenablage wird eingefügt, ohne dass Sie eine Taste drücken mussten. keyUp hat also nicht unbedingt Vorteile; deswegen haben wir uns für change entschieden.


Allerdings ist das Beispiel noch nicht optimiert. Das permanente Flackern im Ausgabe-Fenster ist störend. Angenehmer wäre , wenn nur nach einer Eingabe im Textfeld etwas angezeigt wird. Die gute Nachricht: Auch für Textfelder gibt es Ereignisse. Wählen Sie ein Textfeld aus und tippen Sie im Aktionen-Bedienfeld »on («. Sofort klappt ein Codehinweis auf, in dem alle zulässigen Ereignisse aufgelistet sind.

Abbildung 20.4 Die möglichen Ereignisse des Textfelds

Einige der Ereignisse kennen Sie bereits aus vorherigen Kapiteln. Für unser Beispiel ist change die richtige Wahl: Sobald sich etwas im Textfeld ändert, wird das Ereignis ausgelöst. Die folgenden Schritte geben immer dann den neuen Text aus, wenn eine Änderung in einem der Textfelder auftritt. Als Ausgangsbasis verwenden Sie die vorher erstellte Datei textinput_AS2.fla bzw. textinput_AS1.fla.

Schritt für Schritt: Textfelder einsetzen

Kommentieren Sie im ActionScript-Code für Bild 1 den Aufruf von setInterval() ein:

//setInterval(ausgabe, 250);

Geben Sie für beide Textfelder das folgende Ereignis ein:

on (change) {
   _parent.ausgabe();
}

Es wird nur ausgabe() aufgerufen, wenn sich in einem der Textfelder tatsächlich etwas geändert hat.

Mehrzeiliges Textfeld

Textfelder müssen nicht immer nur eine Zeile lang sein. Gerade wenn, etwas mehr Text einzugeben ist, beispielsweise der E-Mail-Text bei einer Webmail-Anwendung, reicht eine Zeile nicht aus. Hier sind mehrere Zeilen sinnvoll. Auch in diesem Fall helfen Ihnen die Flash UI-Komponenten.

Das entsprechende Formularelement ist im Komponenten-Bedienfeld mit TextArea beschriftet, heißt also praktischerweise genauso wie das HTML-Pendant.

Sobald Sie eine TextArea in den Film eingefügt haben, können Sie im Komponenten- und im Eigenschafteninspektor die Eigenschaften der Komponente aufrufen.


Wieso _parent?

Es stellt sich die Frage, warum _parent.ausgabe() aufgerufen wurde und nicht einfach ausgabe(). Die Antwort: Alle UI-Komponenten von Flash sind als MovieClips realisiert und haben somit eine eigene Zeitleiste. Die Funktion ausgabe() wurde aber in der Hauptzeitleiste des Films deklariert. Aus diesem Grund müssen Sie aus der UI-Komponente heraus zunächst mit _parent auf den Hauptfilm zugreifen, erst dann steht Ihnen die Funktion ausgabe() zur Verfügung.


Die folgende Tabelle zeigt Ihnen die vier wichtigsten:


Eigenschaft Beschreibung

editable

Kann der Benutzer Text in das Feld eingeben (true) oder nicht (false)?

html

Sind im Feld auch HTML-Formatierungen möglich (dann kann sich beispielsweise mitten im Text die Schriftgröße ändern)?

text

Bezieht sich auf den Text, der anfangs im Feld stehen soll.

wordWrap

Gibt an, ob Text automatisch umbricht (true, Standard) oder nicht (false).


Tabelle 20.2 Wichtige Eigenschaften für mehrzeilige Textfelder

Zur Veranschaulichung erstellen Sie eine neue Beispieldatei:

Schritt für Schritt: Mehrzeilige Textfelder einsetzen

Setzen Sie ein mehrzeiliges Textfeld in einen neuen Film. Achten Sie darauf, dass das Feld bearbeitbar ist (editable muss true sein).

Vergeben Sie den Instanznamen textfeld und setzen Sie die Eigenschaft html auf true.

Setzen Sie die text-Eigenschaft des Feldes auf Ein <i>mehrzeiliges</i> Textfeld. Durch das HTML-Element <i> wird das Wort »mehrzeilig« kursiv gedruckt.

Ergänzen Sie im ersten Bild den bereits bekannten ActionScript-Code (ohne setInterval()!):

function ausgabe() { 
  trace("Feld: " + textfeld.text); 
}

Fügen Sie dem Textfeld in seine Aktion folgendes Ereignis hinzu:

on change() { 
  _parent.ausgabe(); 
}

Das war es auch schon; Sie finden das Beispiel auf der CD-ROM unter dem Namen textarea_AS2.fla bzw. textarea_AS1.fla. Starten Sie den Film und beachten Sie, dass im Textfeld die HTML-Formatierung angezeigt wird.

Abbildung 20.5 Ein mehrzeiliges, HTML-fähiges Textfeld

Daraus lässt sich gleich eine Empfehlung ableiten: Zur Ausgabe von HTML-Text ist die Komponente gut geeignet. Tippt jedoch auch der Benutzer Text in das Feld ein, sollten Sie die Eigenschaft html auf false stellen. Ansonsten wird es nämlich schwierig, aus den ganzen HTML-Kommandos den eigentlichen Text herauszufiltern.

In Flash MX war es nicht üblich, ein mehrzeiliges Textfeld automatisch mit Scrollbalken auszustatten, sobald zu viel Text im Feld stand. Diese mussten als eigene UI-Komponente hinzugefügt werden. Das hat sich mit Version MX 2004 grundlegend geändert: Dort erscheinen die Scrollbalken automatisch, wie in der Abbildung zu sehen.

Checkbox

Das nächste Formularelement ist die Checkbox, auf Deutsch auch Kontrollkästchen genannt. Es handelt sich um ein Kästchen, das der Nutzer ankreuzen kann oder nicht. Die Checkbox kennt also nur zwei Zustände: an oder aus.

Die entsprechende Komponente ist so beschriftet wie sie heißt: mit CheckBox. Praktisch ist, dass sie exakt drei Eigenschaften besitzt, Komponenten- und Eigenschafteninspektor zeigen also dasselbe an:


Eigenschaft Beschreibung

label

Beschriftung der Checkbox

labelPlacement

Wo die Beschriftung angezeigt werden soll: links (left), rechts (right, Standard), oben (top) oder unten (bottom).

selected

Zeigt, ob die Checkbox im Voraus ausgewählt ist (true) oder nicht (false, Standard).


Tabelle 20.3 Wichtige Eigenschaften für Checkboxen

Sehr praktisch ist an der Checkbox, dass die Beschriftung Teil der Komponente ist. Hin und wieder kann das aber störend fürs Design wirken. Hier gibt es eine einfache Abhilfe: Setzen Sie die Eigenschaft label auf eine leere Zeichenkette und fügen Sie selbst an anderer Stelle ein Flash-Textelement hinzu.

Die wichtigste Eigenschaft der Checkbox ist selected, die den Zustand des Kontrollkästchens angibt. Ein kleines Beispiel soll diese Eigenschaft dynamisch auslesen:

Schritt für Schritt: Mehrzeilige Textfelder einsetzen

Setzen Sie eine Checkbox in einen neuen Film. Vergeben Sie den Instanznamen checkbox und belassen Sie bei allen anderen Eigenschaften deren Standardwerte.

Fügen Sie im ersten Bild der Hauptzeitleiste die folgende Fassung der bereits bekannten ausgabe()-Funktion ein:

function ausgabe() { 
  trace("Zustand: " + checkbox.selected); 
}

Es wird hier die Eigenschaft selected abgefragt und ausgegeben.

Jetzt fehlt nur noch das Ereignis. Es heißt click und tritt ein, sobald die Checkbox angeklickt wird – also immer dann, wenn sich der Zustand der Checkbox ändert.

on click() { 
  _parent.ausgabe(); 
}

Abbildung 20.6 Der Zustand der Checkbox wird im Ausgabe-Fenster angezeigt.

Das Ergebnis finden Sie in der Datei checkbox_AS2.fla bzw. checkbox_AS1.fla auf der CD-ROM.

Radiobutton

Mit der Checkbox zu vergleichen sind Radiobuttons, das sind Optionsfelder. Auch sie besitzen die beiden Zustände an und aus, allerdings gibt es zwei gewaltige Unterschiede zu Checkboxen:

  • Ist ein Radiobutton einmal ausgewählt, lässt er sich durch nochmaliges Anklicken nicht deaktivieren, wie das bei Checkboxen der Fall ist.
  • Radiobuttons können in Gruppen auftreten.

Der zweite Punkt hilft, das Problem des ersten Punktes zu beseitigen: Von allen Radiobuttons innerhalb einer Gruppe darf immer nur einer ausgewählt sein. Stellen Sie sich vor, Sie haben zwei Radiobuttons, der erste ist aktiviert. Sobald Sie den zweiten aktivieren, wird dadurch automatisch der erste deaktiviert. Wenn Sie in einem Formular eine Frage stellen und mehrere Auswahlmöglichkeiten anbieten, sollten Sie über den Einsatz von Radiobuttons nachdenken.

Die UI-Komponente für Radiobuttons ist mit RadioButton beschriftet. Ziehen Sie zwei Radiobuttons auf die Bühne und werfen Sie einen Blick auf den Komponenten- und den Eigenschafteninspektor. Wieder gibt es eine überschaubare Anzahl von Eigenschaften, in beiden Inspektoren wird dasselbe angezeigt. Hier eine Übersicht:


Gruppenname

Entscheidend ist der Name der Radiobuttongruppe. Alle Radiobuttons mit demselben Wert in der groupName-Eigenschaft gehören zu einer Gruppe, sprich nur ein Radiobutton kann jeweils ausgewählt sein.



Eigenschaft Beschreibung

data

Wert des Radiobuttons, nur beim Formularversand von Interesse.

groupName

Name der Gruppe aus Radiobuttons

label

Beschriftung des Radiobuttons

labelPlacement

Wo die Beschriftung angezeigt werden soll, links (left), rechts (right, Standard), oben (top) oder unten (bottom).

selected

Meldet, ob der Radiobutton vorausgewählt ist (true) oder nicht (false, Standard).


Tabelle 20.4 Wichtige Eigenschaften für Radiobuttons

Von der Gruppierung der Radiobuttons einmal abgesehen ist alles wie bei den Checkboxen: Ob Radiobuttons ausgewählt sind oder nicht, verrät die Eigenschaft selected. Das Ereignis, das beim Anklicken ausgelöst wird, heißt click. Daraus lässt sich ein kleines Beispiel nach bekanntem Muster basteln:

Schritt für Schritt: Radiobuttons einsetzen

Erzeugen Sie zwei Radiobuttons in einem neuen Film.

Vergeben Sie als Instanznamen radiobutton1 und radiobutton2, als Eigenschaft data die Werte Radio1 bzw. Radio2.

Jeder neuer Radiobutton, der von Ihnen hinzugefügt wird, trägt den Gruppennamen radioGroup. Wenn Sie nur eine Radiobutton-Gruppe benötigen, ist das in Ordnung, ansonsten müssen Sie hier gegebenenfalls Anpassungen tätigen. Die data-Eigenschaft wird später noch sehr praktisch sein (unten gleich mehr dazu).

Schreiben Sie für beide Radiobuttons in die jeweiligen Aktionen das Ereignis für das Anklicken:

on (click) {
   _parent.ausgabe();
}

Erstellen Sie in Bild 1 des Films die Funktion ausgabe(). Rufen Sie dabei die selected-Eigenschaft jedes Radiobuttons sowie die selectedData-Eigenschaft der Gruppe auf.

function ausgabe() {
   trace("Radio 1: " + radiobutton1.selected);
   trace("Radio 2: " + radiobutton2.selected);
   trace("Gruppe: " + radioGroup.selectedData);
}

Das Ergebnis befindet sich auf der CD-ROM zum Buch in der Datei radiobutton_AS2.fla. Beachten Sie, dass Sie über Gruppenname.selectedData auf den Parameter data desjenigen Radiobuttons zugreifen können, der ausgewählt ist. Dies geht bei einer Radiobutton-Überprüfung deutlich schneller, als jeden Radiobutton einzeln abzufragen, ob er ausgewählt ist oder nicht (Eigenschaft selected). Allerdings müssen Sie bei jedem Radiobutton den data-Parameter setzen, damit der Einsatz von selectedData Sinn macht.

Abbildung 20.7 Der Zustand der einzelnen Radiobuttons und der Gruppe

Auswahlliste

Das nächste wichtige Formularelement sind Auswahllisten. Sie kennen das beispielsweise von Flash-Textfeldern: Wenn Sie eine andere als die Standard-Schriftart verwenden möchten, müssen Sie in einer Dropdown-Liste den Schrifttyp angeben.

Bei den hier vorgestellten Auswahllisten werden – im Gegensatz zu Dropdown-Listen – jeweils mehrere Listenelemente gleichzeitig angezeigt.

Außerdem lässt sich einstellen, dass Sie mehrere Listenelemente gleichzeitig auswählen durch Halten der Strg / Ctrl -Taste beim Klicken.

Die UI-Komponente für die Auswahlliste ist bei Flash MX 2004 mit List beschriftet. Im Komponenten- und Eigenschafteninspektor stehen die folgenden Parameter zur Verfügung:


Eigenschaft Beschreibung

data

Werte der einzelnen Listenelemente

labels

Die zugehörigen Beschriftungen (das, was man sieht).

multipleSelection

Gibt an, ob mehrere Elemente ausgewählt werden dürfen (true) oder nicht (false, Standard).

rowHeight

Höhe eines einzelnen Listenelements in Pixeln (Standard: 20 Pixel)


Tabelle 20.5 Wichtige Eigenschaften für Auswahllisten


Höhen und Größen

Wenn Sie die Auswahlliste auf die Bühne ziehen, ist sie standardmäßig 100 x 100 Pixel groß. Das heißt, dass fünf Elemente Platz haben, wenn eines die Höhe 20 Pixel hat. Falls nur drei Elemente angezeigt werden sollen, müssen Sie als Größe der gesamten Liste im Eigenschafteninspektor 64 eingeben. Warum 64 und nicht 60? Nun, 60 Pixel werden für die drei Elemente benötigt und jeweils zwei Pixel für den Listenrahmen oben und unten.


Interessant wird es, wenn Sie ermitteln wollen, welches Listenelement ausgewählt ist – oder bei Mehrfach-Auswahllisten: welche Listenelemente.

Fangen wir mit dem einfachen Fall an, mit einer einzelnen Auswahlliste. Um auf das aktuelle Listenelement zuzugreifen, gibt es mehrere Möglichkeiten:

  • Listenname.selectedIndex liefert die Nummer des gewählten Listenelements. Achtung, es ist wie bei Arrays: Der erste Listeneintrag hat die Nummer 0.
  • Listenname.selectedItem gibt das ausgewählte Element zurück. Dieses besitzt als Eigenschaften unter anderem data (Wert) und label (Beschriftung). Beispiel: Listenname.selectedItem.label.

Hier ein Exempel zum Mitmachen:

Schritt für Schritt: Einfache Auswahlliste

Fügen Sie in einen neuen Film eine neue Auswahlliste ein, Instanzname liste1. Geben Sie als Höhe (Feld H im Eigenschafteninspektor) den Wert 64 ein.

Klicken Sie doppelt im Komponenten- oder Eigenschafteninspektor auf die Eigenschaft data. Setzen Sie dort als Werte r, g und b ein.

Abbildung 20.8 Die Werteeingabe für Auswahllisten

Mit der Schaltfläche + fügen Sie einen neuen Wert ein, mit löschen Sie ihn. Die Pfeil-Schaltflächen dienen zum Umsortieren der Einträge.

Gehen Sie analog für die Eigenschaft labels vor; verwenden Sie als Werte Rot, Grün und Blau.

Rufen Sie die (noch zu schreibende Funktion) ausgabe() auf, sobald sich an der Auswahl in der Liste etwas ändert. Das zugehörige Ereignis heißt change:

on (change) {
   _parent.ausgabe();
}

Abschließend geben Sie die Position, die Daten und die Beschriftung des gewählten Elements aus und stellen sie in die Funktion ausgabe() in Bild 1 des Films:

function ausgabe() {
   trace("Liste 1: " + liste1.selectedItem.data +
      "/" + liste1.selectedItem.label +
      " an Position " + liste1.selectedIndex);
}

Wie Sie sehen, werden alle Informationen über das gewählte Listenelement ausgegeben: Wert, Beschriftung und Position.

Abbildung 20.9 Alle Informationen über das angeklickte Listenelement

Etwas schwieriger ist es bei Mehrfach-Auswahllisten. Hier liefert selectedIndex die Position des ersten gewählten Listenelements, aber nicht die Position aller anderen Elemente.

Genauso sieht es auch bei selectedItem aus: dort wird nur das erste Listenelement zurückgeliefert, nicht etwa alle. Freundlicherweise hat Macromedia an diesen Fall gedacht und zwei weitere Eigenschaften eingeführt:

  • selectedIndices liefert die Positionen aller gewählten Listenelemente.
  • selectedItems liefert alle gewählten Listenelemente.

Der Zugriff auf die einzelnen Werte in diesen Eigenschaften gestaltet sich exakt so wie der Zugriff auf Arrays, beispielsweise über eine for-Schleife:

for (var i = 0; i < liste.selectedItems.length; i++) {
   //in liste.selectedItems[i] steht jetzt
   //bei jedem Durchlauf ein gewähltes Element
}
Schritt für Schritt: Mehrfach-Auswahlliste

Fügen Sie eine zweite Auswahlliste ein, der Instanzname ist dieses Mal liste2. Als Höhe geben Sie den Wert 64 an.

Setzen Sie im Eigenschafteninspektor den Parameter multipleSelection auf true.

Fügen Sie in den Parameter data die Werte c, m, y und k ein, in labels die Beschriftungen Cyan, Magenta, Yellow und Black.

Rufen Sie beim Ereignis change der Liste die Funktion ausgabe() auf:

on (change) {
   _parent.auswahl();
}
function ausgabe() {
   trace("Liste 1: " + liste1.selectedItem.data +
      "/" + liste1.selectedItem.label +
      " an Position " + liste1.selectedIndex);
   var ausgabe_str:String = "";
   for (var i=0; i<liste2.selectedItems.length; i++) {
      var el = liste2.selectedItems[i];
      ausgabe_str += el.data + "/" + el.label + "; ";
   }
   trace("Liste 2: " + ausgabe_str);
}

In der String-Variablen ausgabe_str ist der Ausgabetext gespeichert; in der for-Schleife wird diese Variable bei jedem Durchlauf mit dem Wert und der Beschriftung des jeweiligen Elements ergänzt.

Die fertige Datei finden Sie auf der CD-ROM unter dem Dateinamen list_AS2.fla bzw. list_AS1.fla.

Abbildung 20.10 Einfach- und Mehrfach-Auswahllisten

Schaltfläche

Als letztes Formularelement stellen wir Ihnen die Schaltfläche vor. Mit diesem Element starten Sie in der Regel irgendeine Aktion, beispielsweise den Versand eines Formulars.

Die Schaltfläche verbirgt sich im Komponenten-Bedienfeld hinter der Beschriftung Button. Auf die Bühne gezogen, erkennen Sie einen Unterschied zwischen Komponenten- und Eigenschafteninspektor: Der Erstgenannte zeigt mehr Optionen an. Die wichtigsten Optionen befinden sich jedoch stets auch im Eigenschafteninspektor und sind in folgender Tabelle aufgeführt.


Verwendung von Icons

Beim Begriff »Icon« denkt manch einer an das .ico-Format. Leider ist das in diesem Fall der falsche Ansatz. Stattdessen wird hier der Bezeichner eines Flash-Symbols erwartet. Um also ein Icon verwenden zu können, müssen Sie zuvor ein Symbol erstellen.



Eigenschaft Beschreibung

icon

Name einer Icon-Datei, die auf der Schaltfläche angezeigt wird

label

Beschriftung der Schaltfläche

labelPlacement

Wo die Schaltflächen-Beschriftung angezeigt werden soll, links von (left), rechts von (right, Standard), über (top) oder unter (bottom) dem Symbol. Falls kein Icon angegeben ist, erscheint die Beschriftung horizontal und vertikal zentriert.

selected

Meldet, ob die Schaltfläche den Fokus hat (true) oder nicht (false, Standard).

toggle

Zeigt an, ob die Schaltfläche bei jedem Anklicken einen Zustandswechsel (an/aus) durchführt (true) oder nicht (false, Standard).


Tabelle 20.6 Wichtige Eigenschaften für Schaltflächen

Die Ausführung einer kleinen Beispielsapplikation geht schnell von der Hand. Erstellen Sie einen Film, platzieren Sie eine Schaltfläche auf der Bühne und geben Sie ihr das folgende Ereignis:

on (click) {
   trace("Autsch!");
}

Abbildung 20.11 Erstellen eines neuen Symbols

Abbildung 20.12 Der Klick auf die Schaltfläche wird gemeldet.

Auf der CD-ROM heißt die zugehörige Datei button_AS2.fla bzw. button_AS1.fla.



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