ActionScript 2: Ein Lehr- und Ubungsbuch

Arno Kohl

ActionScript 2 Ein Lehr- und Übungsbuch

13

Dr. Arno Kohl Macromedia Akademie für Medien Gollierstraße 4 80339 München Deutschland [email protected]

ISBN 978-3-540-35179-5           e-ISBN 978-3-540-35182-5 DOI 10.1007/978-3-540-35182-5 Springer Heidelberg Dordrecht London New York Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbiblio­ grafie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar. © Springer-Verlag Berlin Heidelberg 2011 Dieses Werk ist urheberrechtlich geschützt. Die dadurch begründeten Rechte, insbesondere die der Übersetzung, des Nachdrucks, des Vortrags, der Entnahme von Abbildungen und Tabellen, der Funksendung, der Mikroverfilmung oder der Vervielfältigung auf anderen Wegen und der Speicherung in Datenverarbeitungsanlagen, bleiben, auch bei nur auszugsweiser Verwertung, vorbehalten. Eine Vervielfältigung dieses Werkes oder von Teilen dieses Werkes ist auch im Einzelfall nur in den Grenzen der gesetzlichen Bestimmungen des Urheberrechtsgesetzes der Bundesrepublik Deutschland vom 9. September 1965 in der jeweils geltenden Fassung zulässig. Sie ist grundsätzlich vergütungspflichtig. Zuwiderhandlungen unterliegen den Strafbestimmungen des Urheberrechtsgesetzes. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Einbandgestaltung: KünkelLopka GmbH, Heidelberg Gedruckt auf säurefreiem Papier Springer ist ein Teil der Fachverlagsgruppe Springer Science+Business Media (www.springer.com)

Danksagung

In erster Linie gebührt all meinen Studenten und Schülern Dank dafür, dass sie klaglos meinen gelegentlich sicher etwas anstrengenden Unterricht über sich ergehen ließen und mir so Gelegenheit gaben, den einen oder anderen Workshop am lebenden Sujet auszutesten. Besonderen Dank schuldet der Autor jenen, die aktiv mit Rat und Tat zur Seite standen. Namentlich seien genannt: – „eyelan“ Benedikt Hocke, der mit seiner raschen Auffassungsgabe, unvergleichlichem grafischen Geschick und großer Phantasie eine frühe Phase des Buches begleitete; – Frau Nina Eichinger, die insbesondere ein passendes Layout entwickelte; – Herr Richard Häusler, der angenehm kritisch größere Teile des Manuskripts goutierte und manch einem hartnäckigen Fehler auf die Schliche kam. Ein ganz großes Danke Schön an das Lektorat des Springer Verlags, das mit einer Engelsgeduld jede Terminübertretung des Autors ertragen hat und so das Fertigstellen des Manuskriptes überhaupt erst ermöglichte. Und schließlich sei auch denjenigen gedankt, die die Entwicklung des Skripts langfristig mit kritischem Blick und manch aufmunterndem Kommentar begleiteten (2006: „Wieweit bist Du denn schon?“, 2007: „Ist denn wenigstens ein Kapitel fertig?“, 2008: „Hast Du schon angefangen?“, 2009: „Naja, wenn der Maya-Kalender mit 2012 Recht hat, musst Du Dich jetzt auch nicht mehr beeilen“).

v

Inhaltsverzeichnis

1 Einleitung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   1 2 ActionScript: Geschichte, Versionen, Ausblick  .. . . . . . . . . . . . . . . . . . . . . . . .   5 3 Programmentwicklung und Programmiersprachen  . . . . . . . . . . . . . . . . . . .   3.1 Ansätze (Top-Down, Bottom-Up)  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   3.2 Algorithmus als Problemlösung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   3.3 Hilfsmittel zur Entwicklung von Algorithmen  .. . . . . . . . . . . . . . . . . .   3.3.1 Flowcharts   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   3.3.2 Pseudo-Code   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   3.4 Beispiel-Algorithmus „Kaffee kochen“   .. . . . . . . . . . . . . . . . . . . . . . . .  

11 11 12 13 14 15 16

4 Programmierung und ActionScript  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   27 5 Framework und Codeorganisation  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   5.1 Skriptarten (Objekt- und Bildskript)  . . . . . . . . . . . . . . . . . . . . . . . . . . . .   5.2 Anzahl der Bildskripte  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   5.3 Aufbau eines Skripts  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

35 35 37 37

6 Operatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.1 Zuweisungsoperator  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.2 Arithmetische Operatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.3 Inkrement-/Dekrementoperator  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.4 Stringoperatoren  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.5 Vergleichsoperatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.6 Logische Operatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.7 Bit-Operatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   6.8 Sonstige  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

41 42 42 43 44 46 48 50 51

7 Variablen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   7.1 Deklaration  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   7.2 Wertezuweisung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   7.3 Reichweite  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   7.4 Parameter und Zählvariablen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   7.5 Konstanten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

55 55 58 60 62 62

8 Datentypen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   63 8.1 Boolean  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   64 8.2 Number  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   64 vii

viii

Inhaltsverzeichnis

8.3 8.4 8.5 8.6 8.7

String  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Null, undefined  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . MovieClip  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Object  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Void  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

67 67 68 68 68

9 Arrays  9.1 9.2 9.3 9.4 9.5 9.6 9.7 9.8 9.9

Arrays einrichten und die Länge definieren  .. . . . . . . . . . . . . . . . . . . Arrays bei der Deklaration füllen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zugriff auf Inhalte  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arrays dynamisch füllen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Löschen von Elementen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arrays sortieren und durchsuchen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . Weitere Methoden  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mehrdimensionale Arrays  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Assoziative Arrays  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                   

69 69 70 70 72 74 77 80 81 82

10 Funktionen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.1 Funktionsdeklaration und -aufruf  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2 Funktionen ohne Bezeichner  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.3 Gültigkeit  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.4 Verschachtelung von Funktionen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.5 Parameter  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.6 Funktionen mit Rückgabewert (return)  .. . . . . . . . . . . . . . . . . . . . . . . 10.7 Von Flash zur Verfügung gestellte Funktionen  .. . . . . . . . . . . . . . . . 10.8 Rekursion  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                 

85 85 86 87 88 89 91 92 93

11 Kontrollstrukturen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   95 11.1 Bedingungen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   95 11.1.1 Die if-Anweisung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   95 11.1.2 Verschachtelte if-Anweisungen, logisches und, logisches oder   .   98 11.1.3 if else  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   99 11.1.4 else if  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   100 11.1.5 switch, break  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   101 11.2 Schleifen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   103 11.2.1 for-Schleife  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   104 11.2.2 break, continue  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   108 11.2.3 while-Schleife  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   108 11.2.4 do while-Schleife  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   109 11.2.5 for in-Schleife  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   110 11.2.6 Endlosschleifen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   111 12 MovieClip-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1 Eigenschaften von MovieClips  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1.1 Adressierung von MovieClips  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1.2 _x, _y, _xmouse, _ymouse, _width, _height  .. . . . . . . . . . . . . . . . . . 12.1.3 _xscale, _yscale  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1.4 _rotation, _alpha, _visible  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1.5 blendMode  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.1.6 _currentframe, _totalframes  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.2 Ereignisse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                 

113 113 113 119 123 125 128 130 130

Inhaltsverzeichnis

ix

12.2.1 12.2.2 12.2.3 12.3 12.3.1 12.3.2 12.3.3 12.3.4 12.3.5 12.3.6 12.4

onEnterFrame  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Schaltflächenereignisse von MovieClips  . . . . . . . . . . . . . . . . . . . . . . Maus-Ereignisse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . MovieClip-Methoden  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zeitleistensteuerung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Objekte dynamisch einfügen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Drag and Drop  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kollision  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Maskierung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ausdehnung und Koordinaten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Mutter aller MovieClips: _root (_level0)  .. . . . . . . . . . . . . . . . .

                     

131 132 135 136 136 138 147 148 150 151 153

13 Zeichnungsmethoden der MovieClip-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . 13.1 Linien, Kurven und Füllungen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.2 Verlaufsfüllungen   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.3 Ereignisse, Methoden, Eigenschaften  . . . . . . . . . . . . . . . . . . . . . . . . . 13.4 Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern)  .. . . .

         

155 156 160 165 165

14 String, Textfield, Textformat   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.1 Strings erzeugen und String-Wert auslesen  .. . . . . . . . . . . . . . . . . . . 14.2 Länge   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.3 Verkettung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.4 Escape-Sequenzen und Sonderzeichen  . . . . . . . . . . . . . . . . . . . . . . . . 14.5 ASCII-Zeichensatz  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.6 Teilstrings extrahieren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.7 Teilstrings ermitteln  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.8 Groß-/Kleinbuchstaben  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.9 Text, Textfelder  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.10 Textauszeichnung/-formatierung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.10.1 TextFormat  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.10.2 Formatierung mit HTML  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.10.3 Formatierung mit CSS  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.11 Darstellung größerer Textmengen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 14.12 Eingabetext  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                               

173 173 174 174 174 176 178 179 179 180 184 184 188 190 192 193

15 Math-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.1 Eigenschaften: Konstanten  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.2 Methoden  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.2.1 Auf- und Abrunden  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.2.2 Zufallszahlen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15.2.3 Weitere Methoden  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

           

199 199 200 200 201 205

16 Color-/ColorTransform-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16.1 Klassenpakete und Instanziierung von Klassen  .. . . . . . . . . . . . . . . 16.2 Vollständiges Einfärben  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16.3 Einfärben mit Hilfe einzelner Farbkanäle  . . . . . . . . . . . . . . . . . . . . .

       

207 207 208 209

17 Maus und Tastatur   .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.1 Die Mouse-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.1.1 Eigene Cursor  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.1.2 Mausereignisse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.2 Tastatur  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

213 213 213 215 218

x

Inhaltsverzeichnis

18 BitmapData- und Filter-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.1 Bitmap versus Vektor  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.2 Instanziierung der BitmapData-Klasse  . . . . . . . . . . . . . . . . . . . . . . . . 18.3 Eigenschaften der BitmapData-Klasse  . . . . . . . . . . . . . . . . . . . . . . . . 18.4 Methoden der BitmapData-Klasse  . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.4.1 Dispose()  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.4.2 FillRect(), floodFill()  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.4.3 GetPixel(), getPixel32(), setPixel(), setPixel32()  . . . . . . . . . . . . . . 18.4.4 LoadBitmap(), draw(), copyPixels(), clone()  . . . . . . . . . . . . . . . . . . 18.4.5 Noise(), perlinNoise()  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.5 Optimierung mit Hilfe von BitmapData  .. . . . . . . . . . . . . . . . . . . . . . 18.6 Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.1 Bevel-Filter  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.2 Blur-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.3 DropShadow-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.4 Glow-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.5 GradientBevel-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.6 GradientGlow-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.7 ColorMatrix-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.8 Convolution-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18.6.9 DisplacementMap-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                                         

221 221 223 224 224 225 226 227 229 232 235 235 236 237 238 238 239 239 240 241 242

19 Sound  19.1 19.2 19.3

       

245 245 248 249

20 Externe Assets  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   20.1 Laden externer swf-Dateien  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   20.2 Eigenschaften der geladenen Dateien  . . . . . . . . . . . . . . . . . . . . . . . . .   20.3 Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())  .   20.4 Überblenden bei Ladevorgängen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .   20.5 Alternative Ladekontrolle (Preloader mit der MovieClipLoaderKlasse)  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   20.6 Beispiel modulare Website  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   20.7 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

251 252 257 263 270

.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sound abspielen und stoppen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Einen Sound loopen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Externe Sounds  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

275 276 280

21 XML  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.1 Aufbau von XML-Dokumenten  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Laden von XML-Dokumenten (new XML, load(), onLoad, onData)  .. . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Zugriff auf den gesamten Inhalt einer XML-Datei (firstChild, ignoreWhite)  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Verarbeitung einzelner Daten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

  281   281

22 Tween- und TransitionManager-Klasse  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.1 Tween-Klasse  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.2 Beschleunigungsklassen und -methoden  . . . . . . . . . . . . . . . . . . . . . . 22.3 Eigenschaften (duration, finish, FPS, position, time)  .. . . . . . . . . . 22.4 Methoden  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

  284   286   287 291 291 292 294 294

Inhaltsverzeichnis

xi

22.5 22.6 22.7 22.8 22.9

Ereignisse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sukzessive Animation verschiedener Eigenschaften  . . . . . . . . . . . TransitionManager-Klasse  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eigenschaften, Methoden und Ereignisse  .. . . . . . . . . . . . . . . . . . . . . Übergangstypen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

295 296 298 299 300

23 Debugging  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23.1 Fehlertypen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23.2 Erste Fehlerkontrolle mit Auto-Format  .. . . . . . . . . . . . . . . . . . . . . . . 23.3 Das Nachrichtenfenster  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23.4 Der integrierte Debugger  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

303 303 304 308 312

24 Geskriptete Animationen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.1 Animationskategorien  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.2 Einmalige Animation  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.3 Animation mit onEnterFrame und fester Schrittweite  .. . . . . . . . . 24.4 Animation mit setInterval() und fester Schrittweite  .. . . . . . . . . . . 24.5 Zeitsteuerung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.6 Dynamische Schrittweite  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.7 Feste Schrittanzahl  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.8 Fehlerquelle Schleife  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.9 Überprüfung von Grenzwerten  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.10 Grenzbedingung und Verwendung von Animationsobjekten  . . . 24.10.1 Löschen des Objekts  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.10.2 Bouncing off  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.10.3 Screen wrap  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24.10.4 Neue Zufallsposition  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                             

317 317 318 319 325 329 330 333 337 338 339 340 342 343 344

25 Trigonometrie  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.1 Einige Grundlagen der planen Trigonometrie  .. . . . . . . . . . . . . . . . . 25.2 Abstände zwischen Objekten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.3 Kreise und Ellipsen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.4 Spiralen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.5 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.6 Spiralförmige Animation eines Objekts  . . . . . . . . . . . . . . . . . . . . . . . 25.7 Sinustäuschung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.8 Drehung eines Objekts zu einem anderen Objekt  .. . . . . . . . . . . . . 25.9 Interaktiver Schlagschatten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25.10 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                     

345 345 347 349 351 354 354 357 358 360 362

26 Effekte (Text)  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.1 Text vergrößern und ein-/ausblenden  .. . . . . . . . . . . . . . . . . . . . . . . . . 26.2 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.3 Einzelne Zeichen einfärben  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.4 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.5 Einzelne Zeichen vergrößern und verkleinern  . . . . . . . . . . . . . . . . . 26.6 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.7 Text mit Farbverlauf  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.8 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26.9 Schreibmaschineneffekt  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                   

365 365 371 372 375 377 378 378 383 385

xii

Inhaltsverzeichnis

26.10 26.11 26.12

Text einblenden aus Zufallsbuchstaben  .. . . . . . . . . . . . . . . . . . . . . . .   386 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   389 Weitere Effekte  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   390

27 Effekte (Grafik)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.1 Einfärben über einzelne Farbkanäle  .. . . . . . . . . . . . . . . . . . . . . . . . . . 27.2 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.3 Organische Moleküle  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.4 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.5 Beleuchtungseffekt mit Maske  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.6 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.7 Überblendeffekt mit Maske  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.8 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.9 Mosaik-Effekt  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.10 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                     

391 391 397 399 402 402 405 406 409 410 413

28 Effekte (Maus)  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.1 Maus(ver)folger  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.2 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.3 Initialisierung von Animationen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.4 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.5 Eigenschaftsänderungen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28.6 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

             

415 416 426 428 432 433 435

29 Interface und Navigation  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.1 Check Boxes  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.2 Radio Buttons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.3 Combo-Box  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.4 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.5 Variante  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.6 Slider  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.7 Drag and Drop-Elemente  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.8 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.9 Einfaches Fenster-System mit scale9Grid  . . . . . . . . . . . . . . . . . . . . . 29.10 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29.11 Varianten und Erweiterungen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                       

437 437 440 442 446 447 448 449 453 454 460 462

30 Menü-Systeme  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.1 Kreismenüs  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.2 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.3 Elliptisches Menü  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.4 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.5 Akkordeon  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.6 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.7 Drop Down-Menü  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30.8 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

                 

463 464 471 473 479 480 485 486 490

31 Bildergalerien  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.1 Einfache Galerie mit Slider und internen Assets  .. . . . . . . . . . . . . . 31.2 Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Eine Variante  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

       

493 494 502 503

Inhaltsverzeichnis

xiii

31.4 31.5 31.6 31.7

Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Galerie mit externen Assets  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Einige Varianten  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

       

506 506 518 520

.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pairs  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Puzzle  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

         

521 521 527 528 539

33 Ressourcen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33.1 Literatur  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33.2 Lernvideos  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33.3 Webseiten  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

       

543 543 545 546

32 Spiele  32.1 32.2 32.3 32.4

Sachverzeichnis  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   551

Abbildungsverzeichnis

Abbildung 1: Abbildung 2: Abbildung 3: Abbildung 4: Abbildung 5: Abbildung 6: Abbildung 7: Abbildung 8: Abbildung 9: Abbildung 10: Abbildung 11: Abbildung 12: Abbildung 13: Abbildung 14: Abbildung 15: Abbildung 16: Abbildung 17: Abbildung 18: Abbildung 19: Abbildung 20: Abbildung 21: Abbildung 22: Abbildung 23: Abbildung 24: Abbildung 25: Abbildung 26: Abbildung 27: Abbildung 28: Abbildung 29: Abbildung 30: Abbildung 31: Abbildung 32: Abbildung 33: Abbildung 34: Abbildung 35:

Standardsymbole zur Entwicklung eines Flowcharts  . . . . . . . . .   14 Beispielhaftes Flussdiagramm (Programm­logik)  . . . . . . . . . . . . .   15 Variablen- und Funktionsdefinition  . . . . . . . . . . . . . . . . . . . . . . . . . .   23 Anweisungsblock  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   24 Argument, Parameter, Schleife  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   24 Anweisung, Bedingung, Funktionsaufruf  .. . . . . . . . . . . . . . . . . . . .   25 Integrierter AS-Editor  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   31 Zuweisung eines Objektskripts  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   36 Fixieren des Skriptfensters  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   36 Operanden und Operatoren  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   41 Codehinweise zu Datentypen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   55 Arraylänge, -index und -inhalte  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .   71 Verwendung einer parametrisierten Funktion  .. . . . . . . . . . . . . . . .   90 Vorgegebene Funktionen  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   93 Fehlermeldung bei Endlosschleife  . . . . . . . . . . . . . . . . . . . . . . . . . .   111 Eigenschaftsfenster eines MovieClips auf der Bühne  .. . . . . . .   113 Verschachtelter MovieClip auto  .. . . . . . . . . . . . . . . . . . . . . . . . . . . .   115 Pfadhierarchie  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   116 Relative Adressierung mit _parent  . . . . . . . . . . . . . . . . . . . . . . . . . .   119 Kartesisches Koordinatensystem  .. . . . . . . . . . . . . . . . . . . . . . . . . . .   119 Kartesisches Koordinatensystem in Flash (Hauptzeitleiste)  ..   120 Skalieren eines MovieClips  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   123 Spiegelung mit _xscale  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   124 Positionierung der MovieClips  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .   128 Überlappende MovieClips  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   134 Beispielhafter Aufbau der Übung  . . . . . . . . . . . . . . . . . . . . . . . . . . .   137 Kollisionserkennung mit hitTest()  .. . . . . . . . . . . . . . . . . . . . . . . . . .   150 Ergebnis von getBounds() bei verschiedenen Koordinatensystemen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   152 Beispiel einer geskripteten Zeichnung  . . . . . . . . . . . . . . . . . . . . . .   157 Haus und Grundstück des Autors  . . . . . . . . . . . . . . . . . . . . . . . . . . .   158 Zur Funktionsweise von curveTo()  .. . . . . . . . . . . . . . . . . . . . . . . . .   159 Zweifarbiger, radialer Farbverlauf Rot – Orange  . . . . . . . . . . . .   161 Koronaartiger Grafikeffekt mit Verlaufs­füllung  .. . . . . . . . . . . . .   163 Verschiebung des Verlaufsmittelpunkts  . . . . . . . . . . . . . . . . . . . . .   163 Oval  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   168 xv

xvi

Abbildung 36: Abbildung 37: Abbildung 38: Abbildung 39: Abbildung 40: Abbildung 41: Abbildung 42: Abbildung 43: Abbildung 44: Abbildung 45: Abbildung 46: Abbildung 47: Abbildung 48: Abbildung 49: Abbildung 50: Abbildung 51: Abbildung 52: Abbildung 53: Abbildung 54: Abbildung 55: Abbildung 56: Abbildung 57: Abbildung 58: Abbildung 59: Abbildung 60: Abbildung 61: Abbildung 62: Abbildung 63: Abbildung 64: Abbildung 65: Abbildung 66: Abbildung 67: Abbildung 68: Abbildung 69: Abbildung 70: Abbildung 71: Abbildung 72: Abbildung 73: Abbildung 74: Abbildung 75: Abbildung 76: Abbildung 77: Abbildung 78: Abbildung 79: Abbildung 80: Abbildung 81: Abbildung 82: Abbildung 83:

Abbildungsverzeichnis

Händisch erstelltes Textfeld  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Textformatierung mit der TextFormat-Klasse  .. . . . . . . . . . . . . . . Erweiterte Textformatierung mit der TextFormat-Klasse  .. . . . Verwendung der Komponente UIScrollBar  .. . . . . . . . . . . . . . . . . Eingabefeld für die Mail-Adresse  .. . . . . . . . . . . . . . . . . . . . . . . . . . Einfärben eines MovieClips  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Erweiterte Farboptionen einer MovieClip-Instanz  .. . . . . . . . . . Eigener Mauszeiger in Aktion  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Erzeugung eines Punktrasters mit setPixel()  .. . . . . . . . . . . . . . . . Erzeugung eines zufälligen Musters mit setPixel32()  .. . . . . . . Ausschnittweises Kopieren einer Grafik  .. . . . . . . . . . . . . . . . . . . . Erzeugung einer Störung mit Hilfe der perlinNoise()Methode  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Skinners „Pflanzengenerator“  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bevel-Filter  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bevel-Filter mit maximaler Stärke  . . . . . . . . . . . . . . . . . . . . . . . . . . GradientBevel-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 × 5-Matrix des ColorMatrix-Filters  .. . . . . . . . . . . . . . . . . . . . . . . DisplacementMap-Filter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Einstellungen für das Sound-Verhalten  .. . . . . . . . . . . . . . . . . . . . . Weitere Einstellungen für das Sound-Verhalten  . . . . . . . . . . . . . Externer Ladevorgang in der Hauptzeitleiste  . . . . . . . . . . . . . . . . Auswirkungen von _root auf externe Ladeprozesse  .. . . . . . . . . Verschachtelte Ordnerstruktur für externe Lade­vorgänge  . . . . Fehlermeldung bei fehlgeschlagenem Ladeaufruf  . . . . . . . . . . . Eigenschaftsänderungen bei externen Ladevorgängen  . . . . . . . Fehlerhafte Positionierung einer extern geladenen Grafik  .. . . Bandbreiten-Profiler zur Kontrolle des Ladevorgangs  . . . . . . . Konfiguration der Download-Simulation  .. . . . . . . . . . . . . . . . . . . Simulation eines externen Ladevorgangs  .. . . . . . . . . . . . . . . . . . . Zeichnen der Elemente des Ladebalkens  . . . . . . . . . . . . . . . . . . . . Aufbau der Anwendung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Phase 1 des Ladevorgangs  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Phase 2 des Ladevorgangs  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Phase 3 des Ladevorgangs  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Datei literatur1.xml im Internet Explorer  .. . . . . . . . . . . . . . . . . . . Fehlerhaftes XML-Dokument im Internet Explorer  .. . . . . . . . . Beschleunigungseffekt Back.easeIn  .. . . . . . . . . . . . . . . . . . . . . . . . Beschleunigungseffekt Bounce.easeIn  . . . . . . . . . . . . . . . . . . . . . . Beschleunigungseffekt Elastic.easeIn  . . . . . . . . . . . . . . . . . . . . . . . Beschleunigungseffekt Regular.easeIn  . . . . . . . . . . . . . . . . . . . . . . Beschleunigungseffekt Strong.easeIn  . . . . . . . . . . . . . . . . . . . . . . . Sukzessives Ausführen mehrerer Tweens  .. . . . . . . . . . . . . . . . . . . Abprallen am rechten Rand  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fehlermeldung im Compiler-Fenster (1)  . . . . . . . . . . . . . . . . . . . . Fehlermeldung im Compiler-Fenster (2)  . . . . . . . . . . . . . . . . . . . . Fehlermeldung im Compiler-Fenster (3)  . . . . . . . . . . . . . . . . . . . . Fehlermeldung im Compiler-Fenster (4)  . . . . . . . . . . . . . . . . . . . . Fehlermeldung im Compiler-Fenster (5)  . . . . . . . . . . . . . . . . . . . .

                     

180 186 186 193 196 208 209 214 228 228 231

                                                                         

234 236 237 237 239 240 243 246 247 253 255 255 256 258 260 261 262 262 269 273 274 274 274 282 283 293 293 293 293 293 297 297 304 305 306 306 307

Abbildungsverzeichnis

xvii

Abbildung 84: Abbildung 85: Abbildung 86: Abbildung 87: Abbildung 88: Abbildung 89: Abbildung 90: Abbildung 91: Abbildung 92:

Auflistung aller Variablen zur Laufzeit  .. . . . . . . . . . . . . . . . . . . . . Abspeichern des Inhalts des Nachrichtenfenster  .. . . . . . . . . . . . Debugger-Fenster  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation durch permanente Änderung der Drehung  . . . . . . . Horizontale und vertikale Bewegung  .. . . . . . . . . . . . . . . . . . . . . . . Bewegung und Vorzeichenumkehr  .. . . . . . . . . . . . . . . . . . . . . . . . . Positionsberechnung über wechselnde Entfernung (1)  .. . . . . . Positionsberechnung über wechselnde Entfernung (2)  .. . . . . . Berechnung der Schrittweite aus Schrittanzahl und Entfernung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 93: Bewegung und Grenzbedingung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 94: Überschreiten des Grenzwertes  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 95: Animationsobjekt innerhalb/außerhalb der Bühne  .. . . . . . . . . . Abbildung 96: Abprallen am rechten Screenrand  .. . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 97: Rechtwinkliges Dreieck  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 98: Abstandsmessung zwischen zwei beliebigen Punkten und der Satz des Pythagoras  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 99: Trigonometrische Funktionen und Kreisberechnung  .. . . . . . . . Abbildung 100: Der Einheitskreis  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 101: Abstandsmessung zwischen MovieClips  . . . . . . . . . . . . . . . . . . . . Abbildung 102: Spirale mit linear anwachsendem Radius  .. . . . . . . . . . . . . . . . . . . Abbildung 103: Spirale mit exponentiell anwachsendem Radius  .. . . . . . . . . . . . Abbildung 104: Spiralförmig zu animierende Rakete  . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 105: Spiralförmig animierter Bleistift  . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 106: Sinustäuschung  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 107: Ausrichtung des Fahrzeugs vor der Drehung zur Maus  . . . . . . Abbildung 108: Veränderung des Schlagschattens per Maus  . . . . . . . . . . . . . . . . . Abbildung 109: Animierter Text (Änderung von Größe, Deckkraft, Position)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 110: Einbetten eines Fonts in der Bibliothek  . . . . . . . . . . . . . . . . . . . . . Abbildung 111: Animiertes Einfärben einzelner Buchstaben  .. . . . . . . . . . . . . . . . Abbildung 112: Text mit statischem Farbverlauf  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 113: Farbverlauf Rot – Gelb – Grün  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 114: Verschiedene Ausrichtungen des Farbverlaufs  .. . . . . . . . . . . . . . Abbildung 115: Aufbau der Animation mit Farbverläufen  . . . . . . . . . . . . . . . . . . . Abbildung 116: Schreibmaschineneffekt  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 117: Text einblenden aus Zufallsbuchstaben  .. . . . . . . . . . . . . . . . . . . . . Abbildung 118: Färben über einzelne Farbkanäle  .. . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 119: Einfärbung eines per Filter-Klasse erstellten Schattens  . . . . . . Abbildung 120: Organische Erscheinung per Ebeneneffekt  . . . . . . . . . . . . . . . . . . Abbildung 121: Simulation eines Spotlights  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 122: Überblendeffekt mit Hilfe einer Maske  . . . . . . . . . . . . . . . . . . . . . Abbildung 123: Mosaik-Effekt (1)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 124: Mosaik-Effekt (2)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 125: Ermittlung eines Farbpixels  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 126: Text als Mausverfolger  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 127: Uhr in Ruhestellung  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 128: Uhrteile folgen der Maus  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 129: Aufbau der Uhr ohne Zeitanzeige  .. . . . . . . . . . . . . . . . . . . . . . . . . .

               

313 313 314 319 320 323 332 332

           

334 339 339 341 343 345

                     

346 346 347 347 352 353 355 356 358 359 359

                                         

365 366 373 379 380 381 382 385 387 391 397 399 403 406 410 410 412 416 419 419 422

xviii

Abbildung 130: Blätteranimation nach Mausbewegung  .. . . . . . . . . . . . . . . . . . . . . Abbildung 131: Alternative Objektformen  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 132: Formänderung nach Mausbewegung  .. . . . . . . . . . . . . . . . . . . . . . . Abbildung 133: Check Boxes des Workshops  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 134: Aufbau von mcRecht  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 135: Radio Buttons  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 136: Aufbau von mcKreis  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 137: Combo-Box des Workshops  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 138: Bibliotheks-Elemente der Drag and Drop-Übung  .. . . . . . . . . . . Abbildung 139: Einzelelemente eines Fensters  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 140: Positionsbestimmung der Fensterteile  .. . . . . . . . . . . . . . . . . . . . . . Abbildung 141: Kreisförmiges Menü  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 142: Aktiviertes Kreismenü  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 143: Aufbau des elliptischen Menüs  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 144: Anzeigen der Menüelemente  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 145: Scheitelpunkte der Animation  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 146: Akkordeon-Menü des Workshops  .. . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 147: Aufbau des MovieClips mcFenster  .. . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 148: Drop Down-Menü des Workshops  . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 149: Originalgrafik (verkleinert)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 150: Thumbnail-Typ 1  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 151: Thumbnail-Typ 2  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 152: Thumbnail-Typ 3  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 153: Infografik mit Bildergalerie  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 154: Aufbau des MovieClips mcBild  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 155: Aufbau des MovieClips mcSlider  .. . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 156: Aufbau des MovieClips mcMaske  . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 157: Variante der Bildergalerie  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 158: Aufbau des MovieClips mcMaske bei nicht aktivierter Maske  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 159: Aufbau der Galerie mit externen Assets  .. . . . . . . . . . . . . . . . . . . . Abbildung 160: Ordnerstruktur der Galerie  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 161: Aufbau der Thumbnails  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 162: Aufbau Memory-Spiel  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 163: Karten und Bilderset  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 164: Zufallsverteilung der Karten in aKarten  .. . . . . . . . . . . . . . . . . . . . Abbildung 165: Puzzlespiel  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 166: Umrisse der Puzzleteile  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 167: Registrierungspunkt und gedachtes Quadrat  .. . . . . . . . . . . . . . . . Abbildung 168: Puzzleteile entsprechend der Array-Elemente  . . . . . . . . . . . . . . . Abbildung 169: Begrenzungsrechteck und Registrierungspunkt von mcPuzzle6  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 170: Puzzleteile ohne Maske  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abbildung 171: Puzzleteile mit BevelFilter  .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Abbildungsverzeichnis

                                                       

428 433 433 437 438 440 441 442 449 455 456 464 466 473 475 477 480 481 486 494 494 494 494 495 496 496 497 503

                     

504 507 507 514 521 522 523 528 529 529 530

  533   535   536

1

Einleitung

ActionScript (kurz: AS), die in Flash integrierte Script-Sprache, hat sich im Laufe der Zeit zu einem unverzichtbaren Tool im Arsenal des Webentwicklers gemausert. Interaktive Anwendungen aller Art bis hin zu sogenannten Rich Internet Applications lassen sich mittlerweile mit Hilfe dieser Sprache realisieren. Diese Mächtigkeit hat allerdings ihren Preis, steigt doch mit den Möglichkeiten zugleich auch die Lernkurve, um sich AS anzueignen, mit jeder FlashVersion weiter an. Darum möchte Sie das vorliegende Buch bei der Hand nehmen und behutsam durch den Script-Dschungel führen. Einsteiger-Bücher gibt es viele, und wenn man eines kennt, kennt man die meisten anderen auch. Deren größtes Manko ist der Versuch, möglichst viele AS-Befehle abzudecken. Das sieht zwar im Inhaltsverzeichnis beeindruckend aus, doch spätestens dann, wenn man an einem konkreten Projekt sitzt, werden einem allzu schmerzhaft die Lücken bewusst, die man sich angeeignet hat. Denn derartige Bücher führen in die Themen anhand von Code-Schnipseln ein, die zwar leicht verdaulich sind, aber kaum in die Tiefe gehen. Außerdem stehen diese Schnipsel oft zusammenhanglos und mitunter etwas verlegen im Raum herum. Für den Anfänger fehlt daher nicht selten die Orientierung, wo man sie in einem konkreten, dem Produktionsalltag nahe stehenden Zusammenhang einsetzen kann. Das ist etwa so, als wollte man für eine Reise nach Frankreich Französisch lernen und würde dabei ein Lexikon verwenden anstelle eines Sprachführers. Daher verfolgt das vorliegende Buch einen anderen Ansatz. Wir verzichten hier auf eine lexikalische Auflistung und Behandlung aller AS-Sprachelemente. Für diesen Zweck genügt zumindest prinzipiell die Flash-Hilfe. Statt dessen konzentrieren wir uns auf ausgesuchte Konzepte und Elemente sowie deren Be-

deutung in der Praxis. Eine derartige Auswahl muss notgedrungen subjektiv ausfallen. Immerhin spiegeln sich in ihr zahlreiche Jahre Programmier- und Lehrerfahrung wieder, so dass sie nicht völlig willkürlich ist. Die Konzepte und Elemente werden zwar am konkreten Beispiel von ActionScript behandelt, besitzen jedoch zu einem beträchtlichen Teil sprachunabhängig Gültigkeit. Dazu gehören beispielsweise Variablen, Arrays oder Kontrollstrukturen, die von der Idee her auch in anderen Sprachen wie PHP und Javascript vorkommen. Ebenso ist die Beschreibung des Entwicklungsprozesses eines Programms nicht an Flash gebunden. Damit werden Sie in die Lage versetzt, sich im Fall der Fälle relativ einfach in andere Sprachen einzuarbeiten, falls Sie sich die vorgestellten Konzepte angeeignet haben. Denn es gehört zu den angenehmen Seiten der Programmierung, dass zahlreiche Sprachen mit vergleichbaren Konzepten arbeiten, so dass solide Kenntnisse in einer Sprache das Wechseln zu einer anderen durchaus erleichtern können. Man kann mitunter sogar Lösungen aus einer Sprache in eine andere übertragen, ohne diese Lösung selbst von Grund auf neu entwickeln zu müssen. Der erste Teil des Buches beginnt mit einem Überblick über die Geschichte von ActionScript, gefolgt von drei Kapiteln, die über die Vorgehensweisen bei der Programmentwicklung u. a. anhand eines in Pseudo-Code formulierten Programms zum Kochen von Kaffee – Genuss für Geist und Körper gleichermaßen – informieren. Gerade die relative Zugänglichkeit von AS verleitet schnell dazu, einfach mal „drauf los zu programmieren“ – und spätestens dann, wenn man den eigenen Code nach einigen Wochen erweitern oder ändern muss, türmt sich ein Berg an Problemen auf, weil man ihn aufgrund mangelhafter Planung und Strukturierung weder richtig versteht noch

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

1

2

einfach modifizieren kann. Daher kann die Bedeutung sinnvoller Planung im voraus gar nicht oft genug betont werden. Anschließend folgen kapitelweise Beschreibungen einzelner Sprachelemente und Strukturen wie Operatoren, Variablen, Kontrollstrukturen sowie der wichtigsten Klassen wie MovieClip, BitmapData, XML etc. Besonderen Raum nimmt die MovieClip-Klasse ein, da kaum eine Applikation ohne sie auskommen kann. Diese Kapitel stellen das jeweilige Element vor und geben einzelne Codebeispiele, um ihren Einsatz zu verdeutlichen. Damit man auch tatsächlich erfährt, was es mit diesen Elementen in der freien Wildbahn da draußen auf sich hat, bietet der zweite Teil zahlreiche Workshops, in denen sie immer wieder in den verschiedensten Zusammenhängen auftauchen. Dadurch gewinnt das ansonsten recht abstrakte Erlernen von „Vokabeln“ einen unmittelbaren Praxisbezug, denn die behandelten Themen kommen zu weiten Teilen so oder in einer abgewandelten Form auch tatsächlich im Produktionsalltag vor. Aus didaktischen Gründen musste zwar manches gekürzt oder geändert werden, da der Platz im vorliegenden Buch einfach nicht ausreichte, alles erschöpfend zu behandeln. So manches dort verwendete Skript lässt sich noch optimieren. Damit ginge jedoch die relativ leichte Zugänglichkeit und Verständlichkeit verloren. Dessen ungeachtet bieten die Workshops genügend Masse, um einerseits die Sprache am lebenden Objekt einzuüben und andererseits Einblick in die tägliche Praxis der programmierorientierten Flash-Entwicklung zu gewinnen. An dieser Stelle bemerkt der Autor zugegebenermaßen mit einer gewissen inneren Freude, dass man Skripte aus einem Buch nicht durch schlichtes Kopieren in Flash einfügen kann, sprich: Das Lernen mit diesem Buch macht nur Sinn, wenn Sie den angesprochenen Code wirklich selbst eingeben. Wer Buchstabe für Buchstabe alles abtippt, wird eher darüber nachdenken, was er tut, als wenn man einfach nur kopiert. Kopieren und kapieren sind zwei verschiedene Dinge. Um das Schreiben zu erleichtern, befindet sich am Ende der meisten Workshops des zweiten Teils eine komplette Auflistung des aktuell behandelten Codes. Innerhalb der Workshops wird er abschnitt-, mitunter auch zeilenweise entwickelt und jeweils besprochen. Einige Übungen im ersten und nahezu alle Beispiele im zweiten Teil arbeiten mit einer sogenannten

Kapitel 1  Einleitung

Standarddatei. Damit ist lediglich eine simple FlashDatei gemeint, die über folgende Eigenschaften verfügt:

• Größe 800 × 600, • Bildwiederholrate 18 BpS, • Hintergrundgrafik mit vertikalem Farbverlauf hel-

les zu dunklem Blau, • Hauptzeitleiste mit den Ebenen actions, objects, gegebenenfalls zusätzlich bgd, • Als Grundobjekt ein einfacher MovieClip in Form einer Kugel (Kreis mit radialem Farbverlauf). Selbstverständlich sehen Ihre Flash-Dateien im Produktionsalltag anders aus: Mal muss ein Banner in der Größe 720 × 90, mal eine Site im Seitenverhältnis 16 × 9, mal eine interaktive Animation mit 25 BpS vor einem schwarzen Hintergrund erstellt werden – kurz, es gibt endlos viele verschiedene Möglichkeiten, mit welchen Einstellungen man im Einzelnen angemessen arbeitet. Da es im vorliegenden Buch um die Aneignung von Techniken, nicht jedoch um die optimale Realisierung spezifischer Applikationen geht, verwenden wir einfach eine Standardeinstellung, die Sie Ihren besonderen Bedürfnissen im Einzelfall anpassen müssen. Obgleich das Buch aus zwei Teilen besteht, ist es nicht notwendig, erst Teil 1 und anschließend Teil 2 zu goutieren. Wer die theoretischen Grundlagen beherrscht, kann gerne direkt mit dem Workshop-Teil arbeiten. In dem Fall sollte man allerdings das Kapitel zu Framework und Code-Organisation kennen, da dort eine Vorgehensweise erläutert wird, die in den Workshops zur Anwendung kommt. Wer keinerlei Skriptkenntnisse besitzt, sollte dagegen systematisch alle Kapitel des ersten Teils durcharbeiten, wobei es sich empfiehlt, die vorliegende Reihenfolge einzuhalten, da sie aufeinander bezogen sind. Die Kapitel des zweiten Teils dagegen liegen unabhängig voneinander vor, so dass ein beliebiges Kapitel zum Lernen verwendet werden kann. Wer sich für Texteffekte interessiert, schlägt eben dort nach, ohne vorher etwa das Kapitel Grafikeffekte gelesen haben zu müssen. Die Workshops fassen thematisch zusammenhängende Übungen in Kapiteln zusammen. So finden sich etwa im Kapitel Effekte (Maus) verschiedene Effekte, die in irgendeiner Form auf den Cursor bezogen sind. Die Kapitel werden mit einigen allgemeinen Hinweisen zur jeweiligen Bedeutung der konkreten Themen

 

und Übungen eingeleitet. Danach folgt ein Überblick über das Ziel der Übung sowie eine sukzessive Auflistung der Arbeitsschritte in Form von Handlungsanweisungen. Die Schritte sind zumeist in einzelne Blöcke unterteilt, die anschließend erläutert werden. Besonderes Gewicht wird dabei auf die zugrunde liegende Logik gelegt. Sie ist letztlich wichtiger als die korrekte Syntax: Versteht man nicht, wie ein Problem gelöst wird, nützt eine fehlerfreie Syntax nichts, weil man nie in die Lage versetzt wird, eine eigene Problemlösung zu entwickeln. Eine Syntax zu erlernen ist letztlich ein reiner Gedächtnisvorgang, während die Logik einer weit darüber hinausgehenden Verstandesleistung bedarf. An manchen Stellen wird eine konkrete Übung durch Hinweise auf Varianten ergänzt, deren Code mitunter vorgestellt wird und mitunter auch nur erwähnt wird. Solche Stellen sollten Sie als Aufforderung verstehen, um eigene Lösungen zu entwickeln.

3

Der in den meisten Praxisbeispielen vorgestellte Code lässt sich zwar mit einigen Änderungen direkt auf eigene Projekte übertragen, doch sollte man sich im Klaren sein, was er im Einzelnen bedeutet. Dieses Buch ist in erster Linie als Lehrbuch konzipiert und nicht als Kochbuch mit einfach zu kopierenden Rezepten bzw. Codeschnipsel. Viele Probleme ermöglichen mehrere Lösungswege und so kann hier vorgestellter Code nur als ein möglicher, in der Praxis bewährter Weg, aber beileibe nicht als allein selig machender verstanden werden. Gerne würde der Autor behaupten, er habe aus didaktischen Gründen bewusst einige Fehler eingebaut. Tatsächlich sind derartige Fehler bei dem vorliegenden Seitenumfang einfach unvermeidlich und der menschlichen Schwäche des Autors geschuldet. Dafür sei der Leser hier bereits um Entschuldigung gebeten. Happy Coding!

ActionScript: Geschichte, Versionen, Ausblick

Flash stellt eine vollständige Entwicklungsumgebung und ein Autorensystem für Online- und Offlineanwendungen nahezu jeder Art dar. Aufgrund seiner umfassenden Funktionalität hat es sich innerhalb relativ weniger Jahre von einem ursprünglich doch recht simpel gestrickten Animationsprogramm zum Standard insbesondere bei der Entwicklung von hoch interaktiven, multimedialen Anwendungen gemausert. Zu diesem enormen Erfolg trug ganz wesentlich die integrierte Skriptsprache ActionScript bei, die mittlerweile annähernd so mächtig geworden ist wie eine vollwertige Programmiersprache. Dabei wiesen die sehr bescheidenen Anfänge von ActionScript keinesfalls in die Richtung, die die Sprache nach einigen Jahren eingeschlagen hat. Denn Flash erblickte unter dem Namen FutureSplashAnimator als nettes kleines Animationsprogramm in Konkurrenz zu animierten gif-Dateien das Licht der Welt. 1996 wurde das Programm samt deren Entwickler von der im sonnigen Kalifornien ansässigen Firma Macromedia übernommen. Da der Schwerpunkt auf Animation lag, war die Scriptfähigkeit notwendigerweise bedeutungslos. In den ersten drei Flash-Versionen bestand sie lediglich aus sehr einfachen Befehlen, mit denen man Navigationen ähnlich einer Videosteuerung vornehmen konnte. So war es beispielsweise möglich, eine Zeitleiste anzuhalten und abzuspielen oder zu einem bestimmten Frame zu springen. Dabei handelte es sich um weitgehend vorgefertigte Verhaltensweisen, also fertigen Skripten, die man mit Hilfe von Eingabefeldern parametrisieren konnte. Ein direkter Zugriff auf den Code existierte nicht. Erst mit Flash 4 schlug gewissermaßen die Geburtsstunde von ActionScript als einer eigenständigen Scriptsprache mit Elementen, wie man sie von anderen Sprachen her gewohnt ist. Dazu gehören Schleifen,

2

Variablen und Ausdrücke, was erstmals das Erstellen umfangreicher, durchaus anspruchsvollerer Skripte ermöglichte. Offiziell firmierte die Sprache unter der Bezeichnung actions, intern verwendete man schon den heute geläufigen Namen ActionScript . Ab dieser Version wurde die Sprache recht konsequent ausgebaut und immer näher an internationale Standards herangeführt. Bereits Flash 5 erlaubte den uneingeschränkten Zugriff auf den Code mit Hilfe eines integrierten Editors, ohne jedoch auf die von den Vorgängern her bekannte Möglichkeit eines simplen Zusammenklickens von Codeblöcken völlig zu verzichten. Dahinter stand die eigentlich bis Flash 9 bzw. CS 3 gültige Philosophie, zwei verschiedene Zielgruppen anzusprechen: Einerseits den Programmierer, der nicht davor zurückschreckt, komplexe Skripte zu entwickeln, und den Designer, der sich zwar mehr auf die Animationsfähigkeiten von Flash konzentriert, aber gleichzeitig auf eine einfache Art Interaktionen skripten möchte. Da die Sprache am ECMA 262- bzw. ECMAScript3-Standard ausgerichtet wurde, fanden sich Programmierer, die zuvor insbesondere mit Javascript gearbeitet hatten, recht schnell zurecht. Ein positiver Nebeneffekt war die relativ leichte Portierbarkeit von Code aus einer Sprache in eine andere. Um die Entwicklung zu vereinfachen, konnte man zudem in sogenannte Smart-Clips Code und Objekte hineinpacken, so dass sie sich als fertige Elemente einsetzen ließen, ohne dass man auf den Code zugreifen musste. Ein bisschen erinnerte dieses Konzept an die Behaviors von Director, des damals noch großen Bruders von Flash, das ebenfalls von Macromedia entwickelt wurde. Mit der Versionsnummer 5 wurde Flash, rückblickend betrachtet, tatsächlich erwachsen. Denn es gelang, das Image eines vornehmlich für zappelige Intros

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

5

6

und Animationen geeigneten Entwicklungstools abzulegen (tatsächlich waren diese zappeligen Intros aber weniger dem Tool als vielmehr den betreffenden Entwicklern anzulasten). Nicht zuletzt eben Action­Script zeigte, was, wenn es voll ausgereizt wurde, möglich war  – von kompletten, durchaus userfreundlichen, hoch interaktiven Websites über datenbankgestützte Anwendungen bis hin zu den auch heute noch allgegenwärtigen Spielen reichte die Anwendungspalette. Beflügelt – oder muss man sagen: berauscht? – vom Erfolg schob Macromedia mit Flash MX, entstanden zu einer Zeit, als es plötzlich unmodern geworden war, Versionsnummern zu verwenden, eine stark erweiterte Version von ActionScript nach. Die wichtigste, die Sprache partiell bis heute prägende Neuerung war ein alternatives Ereignismodell, das es erlaubte, in einem einzigen Bildscript allen Objekten die benötigten Ereignisse und Aktionen zuzuweisen. Die Verwendung eigenständiger Objektscripte wurde damit prinzipiell obsolet. Dadurch gewann der Sourcecode an Übersichtlichkeit, denn die endlos verschachtelten Objekte (Movieclips und Buttons) machten es bisher ausgesprochen leicht, Code irgendwo regelrecht zu vergraben. Die Standardisierung von AS wurde vorangetrieben durch eine noch striktere Beachtung des ECMA-Standards. Neben einer erweiterten, umfangreichen Funktionsbibliothek verfügte Flash MX über eine neue API, die es erlaubte, dynamische Vektorgrafiken zu programmieren. Aus den Smart-Clips entwickelten sich die komplexeren Komponenten, die mitunter schon den Charakter eigenständiger Anwendungen annehmen konnten. Als kleines Schmankerl bot man Programmieren die Möglichkeit prototypbasierter objektorientierter Programmierung, wenn auch in einer recht rudimentären Form. Der starke Ausbau der Scriptmöglichkeiten verdeutlichte zugleich, in welche Richtung man sich die Weiterentwicklung des Programms dachte – letztlich eine Grundsatzentscheidung, die im Großen und Ganzen bis zur aktuellen Version 11 bzw. CS5 beibehalten wurde. Denn während jede neue Version immer ausgeklügeltere Features für den Programmierer bot, wurden die Designer hinsichtlich der Grafikwerkzeuge bis heute nur mit wenigen interessanten Neuerungen bedacht, nämlich die längst überfälligen Ebeneneffekte in Flash 8, die in der Tat beeindruckende Videounterstützung ab Flash MX 2004 und BonesAnimation sowie (leider nur halbausgegorenes) 3D in

Kapitel 2  ActionScript: Geschichte, Versionen, Ausblick

CS4. Mittlerweile scheint auch die Unterstützung der Designer in der Programmierung zu bröckeln, wird doch ActionScript mit jeder Version komplexer und für einen eher unbedarften Neuling undurchdringlicher. Dabei waren es gerade die Designer, die Flash einst entdeckt hatten! Schon damals wurde als Parole die Entwicklung von RIA, Rich Internet Applications, ausgegeben, also komplette, nicht selten datenbankgestützte OnlineAnwendungen. Dem war jedoch aller Euphorie zum Trotz Flash (noch) nicht gewachsen, wie der OnlineAuftritt von Macromedia selbst bewies. Der Nachfolger Flash MX 2004 machte einen weiteren großen Schritt nach vorn, indem neben die bestehende ActionScript -Version das neue AS 2.0 trat, das u. a. eine bessere Fehlerkontrolle durch eine strikte Typisierung, ein leistungsfähigeres, wenn auch gegenüber vorher umständlicheres Listener-Ereignismodell und vor allem eine an höhere Programmiersprachen angelehnte objektorientierte Programmierung ermöglichte. War Flash mit Version 5 erwachsen geworden, so geschah dasselbe bei ActionScript mit Version 7 (bzw. MX 2004). Hier wie auch an anderer Stelle musste man als Entwickler jedoch der Entwicklungsgeschichte des Programms Tribut zollen: Um die Abwärtskompatibilität zu älteren Flash-Playern zu bewahren, erfolgte die Kontrolle der Typisierung ausschließlich in der Autorenumgebung, während sich der Player wie schon zuvor genügsam mit, um es böse zu formulieren, „Codesalat“ zufrieden gab. Faktisch bedeutete dies, dass AS 2.0 Code durch die AVM (ActionScript Virtual Machine), die den erstellten Code interpretiert, in AS 1.0 umgewandelt wurde. All die schönen neuen Möglichkeiten, die eine an höhere Programmiersprachen angelehnte Struktur erlaubten, wurden damit partiell zunichte gemacht, und auch die Performance entsprach nicht dem, was man erwarten darf. Erst Flash 9 hat hier zu einer grundlegenden Änderung geführt. Aus Entwicklersicht bot ActionScript damit immerhin eine stabilere Programmierung und eine größere Funktionalität. Andererseits allerdings stieg die Lernkurve für Scriptanfänger stark an. Gerade der leichte Zugang zum Scripting war ja bisher eine der wesentlichen Stärken von Flash gewesen. Dessen eingedenk entschied sich Macromedia zu einem Beibehalten von AS 1.0. Konsequenter als der Vorgänger ermöglichte Flash  8, das sich wieder mit einer Versionsnummer

 

schmücken durfte, objektorientiertes Programmieren. Die Entwickler spendierten dem Programm eine umfangreiche Klassenbibliothek insbesondere zur direkten Manipulation von Bitmapgrafiken auf Pixel­ ebene sowie zum Up- und Download von Dateien. Der Zugriff auf Bitmaps erlaubte geskriptete Effekte, die zuvor gar nicht oder nur unter erheblichem Aufwand möglich waren. Man denke nur an Bumpmapping, eine Technik, die auf zweidimensionalen Objekten eine dreidimensionale Oberfläche durch Tiefeninformationen simuliert. Allerdings erwiesen sich insbesondere die neuen Filter-Klassen im Gebrauch als recht sperrig. So verlangen sie nach – salopp formuliert – einem Dutzend Pflicht- und einem weiteren Dutzend optionaler Parameter, deren Sinn nicht immer leicht zu erkennen ist. Eigentlich sollte in einem derartigen Fall die Programmhilfe erschöpfend Auskunft erteilen. Aber Flash 8 präsentiert sich als die erste Version, deren Dokumentation neuer Befehle und Elemente so unverständlich ist und deren Beispiele so unglücklich gewählt wurden, dass sie für Skript-Einsteiger faktisch fast schon wertlos ist. Man gewinnt den Eindruck, sie sei von Spezialisten für Spezialisten geschrieben – was aber gerade dem Sinn einer Hilfe widerspricht und angesichts der aufgrund der Sprachkomplexität steil angestiegenen Lernkurve schlicht eine Fehlentscheidung darstellt. Flash 9, 2007 auf dem deutschen Markt erschienen, stellt vielleicht nicht nur einen neuen Meilenstein, sondern sogar einen Wendepunkt dar. Denn diese Version wartet mit einer stark überarbeiteten, neuen Version der Scriptsprache, nämlich AS 3.0 auf, die konsequent objektorientiert aufgebaut ist und sich eigentlich kaum mehr von einer Hochsprache unterscheidet. Ihr wurde im Flash-Player eine eigene Virtual Machine, AVM2, gewidmet, die unabhängig neben der aus Kompatibilitätsgründen beibehaltenen AVM1 enthalten ist. Sie zeichnet sich endlich durch die längst fällige höhere Performance aus, setzt aber eben auch das erheblich komplexere AS 3.0 voraus. Die Version 10 baut AS 3.0 aus, bietet die Möglichkeit, Objekte statt Frames zu tweenen, verfügt über einen modifizierten Editor für Tweens und beschenkt den Entwickler, wie erwähnt, mit inverser Kinematik und 3D. Dessen ungeachtet bleibt noch Raum für viele weitere Features, die zukünftige Versionen von Flash sicher bringen werden. Interessanterweise hat der deutsche Markt nach Angaben des Herstellers so an Bedeutung zugenommen, dass die lokalisierte Ver-

7

sion von Flash diesmal früher erschienen ist als sonst üblich. Im Rückblick zeigt sich eine permanente, durchaus viele Wünsche der Flash-Entwickler berücksichtigende Weiterentwicklung von AS, das sich im Laufe der Jahre zu einer mächtigen Skriptsprache mauserte. Sie steht zur Zeit noch konkurrenzlos da – auch wenn sich am Horizont in Form von Microsofts Silverlight sowie HTML5 dunkle Wolken andeuten. Der enorme Erfolg von AS birgt gleichzeitig ein Risiko in sich, das in keiner Version so deutlich zum Vorschein trat wie bei Flash 9 bzw. AS 3.0. Denn diese Sprachversion ist derart umfangreich geworden, dass sich ein Einsteiger mit einer fast ähnlich steilen Lernkurve herumschlagen muss wie bei einer höheren Programmiersprache. Insofern steht Flash an einem Scheideweg: Sollen zukünftige Versionen die Funktionalität der Scriptsprache wie bisher weiter ausbauen? Wie wäre es beispielsweise mit einer echten 3D-Unterstützung, wie sie bereits seit Jahren der langsam in die Vergessenheit sinkende, einst große Bruder von Flash, nämlich Director, beherrscht? Das häufig gehörte Argument, damit wachse der Player notwendigerweise auf eine Größe von mehreren MB an, wird immer unbedeutender angesichts der Tatsache, dass DSL mittlerweile als Standard gelten darf. Das würde natürlich alle professionellen Entwickler und Programmierer freuen, geschähe aber zum Leidwesen der Designer und Gelegenheitsprogrammierer. Oder soll man stärker die Designer berücksichtigen, die nach Jahren erst wieder mit den Ebeneneffekten in Flash 8 und der IK sowie einem überarbeiten Motion-Editor in Flash 10 ein Zückerchen geboten bekamen, während sich die meisten anderen neuen Features eher auf die Programmierung bezogen? So mancher Designer würde sich eine bessere Unterstützung bei Animationen wünschen. Schön wären beispielsweise verschiedene Kamera-Perspektiven, wie sie etwa in ToonBoom-Studio schon lange integriert sind. Sie würden die Erstellung von Animationen nicht unwesentlich erleichtern. Unabhängig davon, wie zukünftige Flash-Versionen aussehen, sind heutige „Flasher“ zunehmend gezwungen, mit ActionScript umzugehen. Denn eben weil es nicht mehr das simple Animationstool von einst ist, sondern eine mächtige Entwicklungsumgebung, deren Potential aber erst wirklich ausgeschöpft wird, wenn man sich der Scriptsprache bedient, werden selbst Designer mit Programmierung konfrontiert. Moderne

8

Webseiten glänzen nicht alleine durch attraktives Design, sondern bieten ein hohes Maß an Funktionalität, das sich nur noch über Programmierung herstellen lässt. Das gilt erst recht für Applikationen, also vollständige Anwendungen, die, glaubt man den Auguren der Branche, dereinst Desktop-Applikationen weitgehend ersetzen werden (auch wenn das noch eher Zukunftsmusik darstellt). Aus dem Flash-Designer wird ein Flash-Entwickler, für den solide Grundkenntnisse in ActionScript unverzichtbar sind. Damit stellt sich die Frage nach der AS-Version, mit der man arbeiten soll. Für den gestandenen Programmierer kann die Antwort nur lauten: AS 3.0. Denn so lassen sich endlich Konzepte umsetzen, die aus der professionellen Softwareentwicklung bekannt und jahrelang erfolgreich eingesetzt wurden. Gerade größere, komplexere Projekte profitieren von den Möglichkeiten dieser Version. Die Mehrzahl der Flash-Entwickler gehört jedoch (immer noch) nicht zu dieser Kategorie, sondern stammt zumeist aus dem Bereich des Designs und der Web-Entwicklung. Ihnen fehlen daher oft die formalen Voraussetzungen, um problemlos mit einer derart komplexen, an eine Hochsprache angelehnten Scriptsprache zu arbeiten. Lohnt sich der Einstieg in AS 3.0? In den meisten Fällen lautet die Antwort derzeit wohl: Nein. Das mag überraschen, zumal in einem Buch, das sich mit Programmierung befasst. Doch sollte man mit beiden Füssen auf dem Boden der Realität bleiben:

• Für

einen Nicht-Programmierer steigt die Lernkurve bei AS 3.0 so stark an, dass man sich genauso gut direkt auf eine Hochsprache wie Java stürzen kann. Wie viel Web-Entwickler, prozentual gesehen, brauchen Java wirklich? Für ein „normales“ Web-Projekt lohnt sich der Aufwand nicht, eine Hochsprache zu erlernen, und AS 3.0 liegt, wie gesagt, aufgrund seiner Komplexität recht nahe an einer derartigen Hochsprache. • Der Erstellungsaufwand für eine Flash-Anwendung erhöht sich zunächst, da AS 3.0 einen recht konsequenten objektorientierten Ansatz verfolgt. So verlangt nun das früher so einfache Zuweisen eines Ereignisses, abgehandelt in einer einzigen Zeile, umständlich nach einem Listener sowie gegebenenfalls dem Import von Klassen. • Für AS 3.0 reicht es nicht aus, einfach nur neue Befehle zu erlernen. Vielmehr steckt eine konsequente Objektorientierung dahinter, die dazu zwingt, vor

Kapitel 2  ActionScript: Geschichte, Versionen, Ausblick

einem Projekt eine saubere objektorientierte Analyse zu erstellen. Sonst kann es schnell geschehen, dass man viele verschiedene Klassen anlegt, die mehrfach dasselbe tun  – als Ergebnis erhält man mindestens eben so gefährlichen Codesalat, wie er gerne von gestandenen Programmierern den AS1Skriptern vorgeworfen wird. Eine saubere Klassenstruktur erhält man nicht en passant, sondern bedeutet einen enormen Lernaufwand. Aus jahrelanger Dozententätigkeit weiß der Autor, dass gerade dieser Punkt vielen Webentwicklern enormes Kopfzerbrechen bereiten kann und dass viele sich gar nicht die Zeit nehmen (können), um hier richtig einzusteigen. • Flash hatte den enormen Vorteil, dem Designer die Möglichkeit zu bieten, relativ einfach Interaktionen und komplexere Anwendungen zu programmieren. Es konnte zumindest prinzipiell alles aus einer Hand entstehen. Wagner spricht zutreffend von der Ein-Mann-Show (Mobile Games mit Flash, p. 8). Das ist zweifelsohne eine der Gründe für die enorme Popularität von Flash als Autorensystem. Mit AS3 ändert sich das grundlegend: die Entwickler werden zu einem Spezialistentum gezwungen, bei dem eine deutliche Trennung zwischen Coder (Programmierer im eigentlichen Wortsinne) und Designer entsteht. AS3 ist schlicht zu komplex, um auf die Schnelle eine Applikation zu skripten und dabei wirklich zu wissen, was man tut. OOP ist eben nichts, was man mal en passent erledigt. Den Informatiker freut’s, den Designer graust’s. Schon aus rein pragmatischen Gründen wird sich die Mehrzahl der Flash-Entwickler daher sinnvollerweise eher mit AS 2.0 anstatt 3.0 befassen müssen (wollen, sollen). Und dem trägt auch dieses Buch Rechnung, indem es sich weitgehend auf AS 2.0 beschränkt. Bereits Version 2.0 bietet so viele Möglichkeiten, dass sie i. d. R. gar nicht ausgeschöpft werden. Auch vor diesem Hintergrund macht es wenig Sinn, sich eine neue, noch mehr (genau so wenig ausgereizte) Features bietende Version anzueignen. Es ist schon erstaunlich, wie groß beispielsweise die Kluft zwischen den Möglichkeiten, welche die in Flash 8 eingeführte BitmapData-Klasse bietet, und deren konkrete Verwendung ist. Anstelle der ColorTransform-Klasse findet nach wie vor die veraltete Color-Klasse Verwendung. Und die Rechnung mit einer Matrix, die uns in AS 2.0 an mehreren Stellen begegnet und Potential vor allem bei der Programmierung grafischer Effekte

 

besitzt, wird so wenig eingesetzt, weil sie für viele Flash-Entwickler eher ein Mysterium Tremendum als ein sinnvolles Hilfsmittel darstellt. Das Problem der richtigen Sprachversion hat wie kaum ein anderes die Gemüter der Flash-Entwickler erhitzt, und so manches Flash-Urgestein wie etwa Philipp Kerman entscheidet sich bei kleineren bis mittleren Projekten zugunsten von 2.0 anstatt von 3.0. Zudem wartet die neue Sprachversion, falls man nicht mit CS 4, sondern dem Vorgänger arbeitet, mit einigen Ungereimtheiten auf, die das Programmieren partiell erheblich erschweren. Dazu gehört insbesondere das gegenüber bisher ausgesprochen unglücklich gehandhabte Entfernen extern geladener swf-Dateien sowie eine deutlich optimierfähige Garbage Collection. Kein Geringerer als Colin Moock hat sich ausführlich mit derartigen Problemen beschäftigt, und einen Einblick in die Diskussion findet der geneigte Leser unter: C. Moock: „The Charges Against ActionScript 3.0“, www.insideria.com/2008/07/the-charges-against-actionscri.html.

9

Brendan Hall und Joshua Davis, beides profilierte Flash-Entwickler, die schon frühzeitig das Potential von Flash sowohl in programmiertechnischer wie designerischer Hinsicht ausreizten, wobei insbesondere Davis beide Bereiche zu verknüpfen suchte, urteilen über den heutigen Stand: „Flash has matured incredibly in the past decade, but it has done so in a way that has blocked non-developers from even getting started. The simple fact of the matter is that with older versions of Flash you could learn the tool and how to program ActionScript almost entirely through creative play. With the latest iterations, unless you have a background in object-oriented programming, that method of learning by doing is simply not an option.“ Als Konsequenz aus dieser Malaise entwickelten sie unter dem Stichwort „Hype“ ein Framework, das jedem Interessierten den schnellen und einfachen Zugriff auf die Programmierfähigkeiten von Flash erlaubt, ohne sich in eine komplex gewordene Programmiersprache einarbeiten zu müssen.

Programmentwicklung und Programmiersprachen

Programmieren ist eine Wissenschaft für sich  – das mag banal klingen, aber gerade der Neuling, der sich naturgemäß kopfüber ins Programmieren stürzt, wird sehr schnell an Grenzen stoßen. Einerseits hat sich ActionScript zu einer recht komplexen, mächtigen Sprache entwickelt, andererseits erfordern heutige FlashProjekte, die rasch auf viele Hundert oder Tausend Zeilen Quellcode anwachsen, sorgfältige Planung, will man nicht in einem Wust aus Spaghetti-Code und geskriptetem Nonsens untergehen. Angemessene Programmentwicklung setzt i. d. R. strukturiertes, überlegtes Vorgehen und systematische Planung voraus, um einerseits möglichst effizient und andererseits möglichst fehlerfrei arbeiten zu können. Insofern gleicht das Programmieren einer Anwendung dem Bau eines Hauses: Bevor man die Baugrube ausheben kann, muss man sich erst einmal einen Konstruktionsplan zurecht legen, an dem sich die einzelnen Bauphasen orientieren können.

3.1 Ansätze (Top-Down, Bottom-Up) Es gibt keinen Königsweg zum guten Programm, aber im Laufe der Zeit haben sich einige Vorgehensweisen herausgebildet, um einem die Arbeit zumindest zu erleichtern. Zu den erfolgversprechendsten Methoden gehören der Top-Down- und der Bottom-Up-Ansatz. Der Top-Down-Ansatz versucht, unabhängig von konkreten Details einen Gesamtüberblick über ein Problem zu erhalten. Im nächsten Schritt wird es in möglichst wenige, z. B. drei oder vier, Teilprobleme zerlegt. Auch auf dieser Stufe geht es noch nicht vornehmlich um einzelne Details. In einem weiteren Schritt wird jedes Teilproblem seinerseits in einige

3

wenige Teile zerlegt. Dies führt man solange durch, bis eine weitere Unterteilung nicht mehr möglich erscheint. Dann befindet man sich auf der untersten Stufe und damit zugleich bei kleinsten Details. Dieser Ansatz beschreibt ein Problem in einer Art Pyramide und arbeitet sich von allgemeinen Fragestellungen vor bis hin zur kleinsten Einzelheit. Insofern stellt dieser Ansatz eine große Kiste zur Verfügung, in die wir alle Elemente hineinpacken, die ein Problem oder eine Aufgabenstellung charakterisieren. Ein zeitlicher Ablauf oder eine logische Verknüpfung zwischen den einzelnen Elementen wird nicht definiert. Die Programmierung kann erst einsetzen, nachdem die Analyse vollständig abgeschlossen wurde. Der Vorteil besteht darin, dass man zu jedem Zeitpunkt einen vollständigen Überblick besitzt, ohne von Detailfragen abgelenkt zu werden. Dem stehen allerdings einige Nachteile gegenüber wie insbesondere die zumeist geringe Flexibilität. Denn wenn sich im Laufe der Entwicklung die Problemstellung aus welchem Grund auch immer ändert, ist man gezwungen, die Top-Down-Analyse erneut durchzuführen, da sich die Beziehung der Elemente untereinander, u. U. auch die Elemente selbst nun geändert haben. Das Gesamtgefüge der ursprünglichen Analyse stimmt nicht mehr mit der aktuellen Situation überein. Der Bottom-Up-Ansatz dreht den analytischen Prozess um und beginnt am Boden der Pyramide. Er greift sich ein Element (z. B. Objekt, Klasse, Methode etc.) heraus und analysiert alle notwendigen Details möglichst unabhängig von der Frage, wie sich dieses eine Element in den Gesamtzusammenhang fügt. Dann folgt die Analyse des nächsten Elements. Dies geschieht solange, bis sich aus den einzelnen Elementen der Gesamtzusammenhang erschließen lässt. Ist ein Element ausreichend definiert, kann man zu-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

11

12

Kapitel 3  Programmentwicklung und Programmiersprachen

mindest prinzipiell schon mit der Programmierung beginnen, obwohl die gesamte Analyse noch nicht abgeschlossen ist. Zu den unbestreitbaren Vorteilen zählt die größere Flexibilität. Weil zunächst kein übergreifender Zusammenhang definiert wird, kann man auch zu einem späteren Zeitpunkt relativ problemlos weitere Elemente hinzufügen, falls es die Situation erforderlich macht. Zudem kann bereits zu einem frühen Zeitpunkt Programmcode geschrieben werden. Allerdings läuft man durch die im Anfangsstadium erfolgende Konzentration auf einzelne Details Gefahr, sich darin zu verlieren und nie den Gesamtüberblick zu erhalten, der aber notwendig ist, um alle Teile im Rahmen eines Programms zusammenfügen zu können. Zu frühes Programmieren birgt zudem das Risiko in sich, dass der aktuelle Code nicht optimal auf den später hinzukommenden Code abgestimmt ist. Nach der Problemanalyse, die zu einer Beschreibung des Programms führt, folgt die Entwicklung der Programmlogik. Während die über die erwähnten Ansätze realisierte Programmbeschreibung festlegt, was das Programm tun soll, beschreibt die Logik, wie es das tun soll. Anders als zuvor spielt nun die Reihenfolge einzelner Arbeitsschritte eine entscheidende Rolle.

3.2 Algorithmus als Problemlösung Aus der Problemanalyse muss sich in irgendeiner Form eine Lösung erarbeiten lassen. Sie wird als Algorithmus bezeichnet, worunter man eine endliche (begrenzte) Anzahl an Schritten zur Lösung eines exakt formulierten Problems versteht. Ein Algorithmus gibt also Handlungsanweisungen und legt so den Ablauf eines Prozesses fest. Formal gesehen verfügt eine derartige Lösung über bestimmte Eigenschaften, zu denen u. a. zählen:

• Ausführbarkeit.

Selbstverständlich müssen die Handlungsanweisungen ausführbar sein, also z. B. von einer Maschine befolgt werden können. Das ist dann der Fall, wenn sie möglichst kleinschrittig sind und in einer spezifischen, für die Maschine verständlichen Form wie z. B. einer Programmiersprache dargeboten werden. Dazu gehört auch das eindeutige Vorhandensein aller Informationen, um

den entsprechenden Lösungsprozess ausführen zu können. • Endlichkeit. Die Lösung muss über eine feste Länge an Schritten verfügen. Ein Prozess, den wir mit unendlich vielen Schritten beschreiben müssten, ließe sich nie als Algorithmus umsetzen. • Terminierung. Der Lösungsprozess muss über eine Endebedingung verfügen, d. h. es muss festgelegt sein, wann die Ausführung zu Ende ist. Dieser Punkt bezieht sich auf die Ausführung, während der vorhergehende Punkt eine Aussage zur Beschreibung trifft. • Determinismus. Bei jedem beliebigen Schritt des Algorithmus muss eindeutig feststellbar sein, an welcher Stelle man sich gerade befindet. Zusätzlich muss bei gleichen Ausgangsbedingungen bzw. Eingaben auch immer das gleiche Ergebnis erzielt werden. Das klingt alles recht abstrakt, beschreibt aber in allgemeiner Form jede Art von Handlungsanleitungen, egal ob ein Kochrezept, eine Wegbeschreibung oder eine Bedienungsanleitung für ein neues Handy. Ja, auch für ein Handy benötigen wir mittlerweile eine Anleitung. Früher konnte man damit einfach telefonieren, doch das moderne Handy ist längst zum multifunktionalen Äquivalent des Schweizer Taschenmessers im Kommunikationsbereich mutiert und widersetzt sich zunehmend einer einfachen Bedienbarkeit nach der klassischen Trial & Error-Methode. Die Problemstellung „Handy bedienen“ resultiert daher in einem umfangreichen Algorithmus „Bedienungsanleitung“, der recht komplex ausfallen kann. Diese Bedienungsanleitung muss in einer verständlichen Sprache abgefasst sein, damit die Einzelschritte befolgt werden können (Ausführbarkeit). Was so selbstverständlich klingt, gelingt leider nicht in jedem Fall, weder in der Programmierung noch bei Bedienungsanleitungen, oder ist Ihnen klar, wie folgende Anweisung zu deuten ist: „Wenn das Wetter kalt ist, wird die Puff Unterlage sich langsam puffen. Entrollen die Puff Unterlage und liegen auf ihr, dann wird sie von der Wärme sich Inflationen bekommen“ (Jürgen Hahn: Jetzt zieh den Zipfel durch die Masche; Zürich 1994)? Verständlicherweise sollten wir bei einem Handy mit zwei, drei Schritten, jedenfalls mit einer fest definierten und möglichst geringen Anzahl, in die Lage versetzt werden, einen Gesprächspartner anzurufen

3.3  Hilfsmittel zur Entwicklung von Algorithmen

(Endlichkeit). Selbst ein Schweizer Taschenhandy, mit dem wir gleichzeitig im Internet surfen, unsere Umgebung filmen und dem Kühlschrank zu Hause die Anweisung geben, fehlende Lebensmittel automatisch per E-Mail zu ordern, erlaubt es, zu telefonieren. Das Ergebnis der Arbeitsschritte ist entweder ein Telefongespräch oder eine Mitteilung über die (momentane) Unerreichbarkeit des gewünschten Gesprächspartners (Terminierung). In jedem Fall wird klar, wann der Prozess des Telefonierens endet. Unabhängig davon, wann man sein Handy zückt und versucht, zu telefonieren, ist das Ergebnis immer dasselbe, nämlich so, wie im vorhergehenden Abschnitt angesprochen (Determinismus). Der Prozessablauf ist exakt festgelegt, bei jedem Einzelschritt ist dem Anwender erkennbar, wo er sich gerade befindet. Und das Ergebnis des Prozesses ist vorhersagbar. Wir müssen nicht damit rechnen, dass unser Handy bei Betätigen das Haus des Nachbarn sprengt oder unser Auto startet (nun ja, Letzteres ist sicher nur noch eine Frage der Zeit). Prinzipiell funktioniert ein Algorithmus für ein Computerprogramm nicht anders. Wenn es uns dennoch leichter fällt, Handlungsanleitungen bezüglich des Telefonierens zu verstehen als Programmcode zu lesen, so liegt das lediglich an der Form, in der uns die Anweisungen für den Computer begegnen. Sie liegen in einer jeweils eigenen Sprache vor, die über eine spezifische Syntax (Struktur, Grammatik) und Semantik (Bedeutung) verfügt. Genau das aber gilt auch für die erwähnte Handlungsanleitung, die nur deshalb von uns so einfach verstanden werden kann, weil uns die Syntax und Semantik der verwendeten Sprache vertraut sind. Würde die Anleitung beispielsweise in Suaheli abgefasst, sähe sie genau so unverständlich aus wie Programmcode. In einer grundlegenden Hinsicht unterscheiden sich allerdings Handlungsanleitung und Programmcode voneinander: Menschen sind in der Lage, mit unvollständigen Informationen umzugehen, Computer dagegen nicht (an dieser Stelle wollen wir den spannenden Bereich der Fuzzy Logic unbeachtet lassen). Wenn jemand die Anweisung erhält, für einen Besucher eine Tasse zu holen, damit dieser sich Kaffee hinein schütten kann, dürfen wir in den meisten Fällen davon ausgehen, eine saubere Tasse zu erhalten. Ist sie es nicht, wird sie gespült, oder es erfolgt solange eine Suche, bis eine saubere Tasse aufgetrieben werden konnte. In einem Computerprogramm dagegen müsste die Tasse

13

spezifiziert werden: „Sauber“ könnte man als Eigenschaft der Tasse bezeichnen, die true, also wahr sein müsste, bevor sie verwendet werden dürfte. Andernfalls wäre das Programm nicht in der Lage, zu entscheiden, welche Art von Tasse gewünscht wird. So wichtig dieser Punkt ist, so häufig machen gerade Anfänger den Fehler, Bedingungen vorauszusetzen, die einem Programm eigentlich explizit mitgeteilt werden müssten. Damit schleichen sich Fehler ein, die ausgesprochen schwer zu bereinigen sind, weil sie zwar der Logik, nicht jedoch der Syntax der verwendeten Programmiersprache widersprechen. Syntaxfehler lassen sich durch Tools i. d. R. recht einfach automatisiert finden, Logikfehler dagegen nicht. An dieser Stelle künden sich schon lange Nächte an.

3.3 Hilfsmittel zur Entwicklung von Algorithmen Gerade am Anfang stellt sich die Frage, wie man denn für ein Problem eine angemessene Lösung entwickeln kann, bevor man den betreffenden Programmcode schreibt. Es existieren mehrere Vorgehensweisen, die mit wechselnden Abstraktionsleveln und partiell mit visuellen Hilfsmitteln arbeiten. Dazu gehören:

• Flowchart. Der Ablauf eines Programms wird mit

genormten Symbolen visualisiert. Wer beispielsweise aus dem Design-Bereich zur Programmierung findet, kennt eine ähnliche Vorgehensweise. Dort dienen Flowcharts dazu, um Strukturen wie etwa den hierarchischen Aufbau eine Site zu erfassen. In der Programmierung bildet ein Flowchart dagegen einen Prozess ab. • Natürliche Sprache. In dieser Form haben wir im vorhergehenden Absatz bereits das Telefonieren angesprochen. Gemeint ist, dass man eine Problemlösung in beredter Prosa formuliert, ohne sich an eine allzu strenge Form zu halten. Der Vorteil besteht in der Möglichkeit, schnell eine Handlungsanleitung zu erhalten, da die verwendete Sprache unserer Alltagssprache entspricht. • Pseudo-Code. Wer bereits über Programmierkenntnisse verfügt, kann mit einem Zwitter zwischen beredter Prosa und halbwegs formaler Syntax eine Problemlösung erarbeiten und beschreiben. Solcher Code soll möglichst unabhängig von der

14

Kapitel 3  Programmentwicklung und Programmiersprachen

Syntax einer konkreten Programmiersprache formuliert werden. Wir wollen uns die Verwendung von Flowcharts und Pseudo-Code etwas genauer anschauen. Dabei konzentrieren wir uns auf die klassische funktionale Programmierung, objektorientierte Programmierung dagegen wird nicht weiter berücksichtigt. Wir wählen diese Vorgehensweise, um die Lernkurve nicht allzu steil ansteigen zu lassen.

3.3.1 Flowcharts Sucht man eine Vorgehensweise, die einerseits ohne allzu intensive Programmierkenntnisse funktioniert und andererseits trotzdem die gewünschte Programmfunktionalität verständlich abbildet, so empfiehlt sich ein Flowchart (Flussdiagramm). Es existieren zahlreiche spezialisierte Programme, die genormte Symbole zur Erstellung anbieten. Leistungsfähig ist beispielsweise SmartDraw, das sich neben leichter Bedienbarkeit durch eine ausgesprochen große Symbolbibliothek auszeichnet. Natürlich existieren wie immer im Freeware- und Open Source-Bereich ebenfalls Programme, die durchaus Vergleichbares leisten. Notfalls kann man sich auch mit Flash (bzw. einem beliebigen Vektor-Grafikprogramm) begnügen, denn

die wichtigsten Symbole lassen sich schnell als MovieClip oder Grafik-Objekt erstellen. Um die Entwicklung verständlicher Flowcharts zu ermöglichen, legt die Norm DIN 66001 fest, welche Art von Symbolen verwendet werden sollte. In den meisten Fällen reicht es aus, wenn Sie mit den in den Abbildungen 1 und 2 gezeigten Symbolen arbeiten. Ein Diagramm könnte beispielhaft so aussehen, wie in Abbildung 2 gezeigt. Diese Abbildung visualisiert in vereinfachter Form den eigentlich erstaunlich komplexen Vorgang des allmorgendlichen Aufbruchs zur Arbeitsstelle. Sobald wir über die Türschwelle treten, beginnen die Probleme, dargestellt an nur einem exemplarisch behandelten Beispiel. So müssen wir uns die Frage stellen, ob es regnet oder ob im Laufe des Tages Regen zu erwarten ist. Falls ja, nehmen wir einen Regenschirm und marschieren anschließend zur Bushaltestelle. Falls nein, gehen wir zu Fuß zum Ziel. In beiden Fällen endet der Prozess zumeist mit der Ankunft an der Arbeitsstelle. Flussdiagramme sollten bestimmten Regeln folgen, die zwar nicht zwingend vorgeschrieben sind, deren Einhaltung aber das Lesen derartiger Grafiken erleichtert: 1. Der Programmablauf (zumindest die allgemeine Logik) erfolgt von oben nach unten und von links nach rechts. Im Einzelfall mag es notwendig sein,

Abbildung 1:  Standardsymbole zur Entwicklung eines Flowcharts

3.3  Hilfsmittel zur Entwicklung von Algorithmen

15

mal einen Schritt von rechts nach links zu visualisieren, aber das sollte möglichst eine Ausnahme bleiben. Andernfalls fällt es schwer, den Ablauf korrekt zu erfassen. Die Ablaufrichtung entspricht damit unserer gewohnten Leserichtung. 2. Es sollten nur Standardsymbole verwendet werden. Natürlich existieren mehr als die oben vorgestellten Symbole, aber schon mit diesen 8 können Sie sehr komplexe Programmabläufe visualisieren. Weitere Symbole lassen sich z. B. für SmartDraw auf der Webseite des Herstellers herunterladen (oder einsehen, falls Sie nur mit Flash arbeiten). Widerstehen Sie auf jeden Fall der Versuchung, eigene Symbole zu kreieren – denn diese können nur Sie selbst verstehen. 3. Jedes Symbol hat entweder nur einen Eingang, nur einen Ausgang, nur einen Ein- und einen Ausgang oder einen Eingang und zwei Ausgänge. 4. Ein Entscheidungssymbol enthält eine Frage, die nur mit Ja/Nein beantwortet werden kann. Für jemanden, der es nicht gewohnt ist, mit Flussdiagrammen zu arbeiten, stellt dies sicher die größte Herausforderung dar. Flussdiagramme bieten den unschätzbaren Vorteil, dass sie einen zwingen, die gesamte Programmlogik in sehr kleine Schritte zu zerlegen. Mag einem vorher die Logik schon im Großen und Ganzen klar gewesen sein, so ist es dennoch nicht selten, dass man beim Programmieren feststellen muss, irgend etwas übersehen oder nicht tief genug durchdacht zu haben. Vor solchen Stolpersteinen schützt ein sauber ausgearbeitetes Flussdiagramm. Ist diese Arbeit geleistet, fällt das eigentliche Programmieren insgesamt leichter, da einem nun klar ist, was genau wann geschieht. Als nachteilig erweist sich jedoch der relativ hohe Zeitaufwand, der mit dem Erstellen von Flowcharts verknüpft ist, und die eher geringe Flexibilität, da nachträgliche Änderungen im Programmablauf dazu zwingen können, weite Strecken des Diagramms neu erstellen zu müssen.

3.3.2 Pseudo-Code Eine in Pseudo-Code (auch: Schein-Code) formulierte Lösung orientiert sich strukturell allgemein an Programmiersprachen, formuliert aber die einzelnen

Abbildung 2:  Beispielhaftes logik)

Flussdiagramm

(Programm­

Arbeitsschritte in einer relativ nahe an der Alltagssprache liegenden Form. Derartiger Code bedient sich bestimmter festgelegter Schlüsselwörter, um die Funktionsweise eines Algorithmus’ oder, allgemeiner, den Ablauf eines Programms sprachunabhängig abzubilden. Sprachunabhängig bedeutet natürlich, dass sich dieser Code nicht an eine spezifische Programmiersprache anlehnt (andernfalls würde man ja schon das konkrete Programm schreiben). Eine einfache if-else-Abfrage würde in Pseudocode beispielsweise folgendermaßen geschrieben: wenn (Bedingung) Anweisung(en) sonst

Anweisung(en)

16

Das ActionScript -Äquivalent würde so aussehen: if(Bedingung){

Kapitel 3  Programmentwicklung und Programmiersprachen

3.4 Beispiel-Algorithmus „Kaffee kochen“

Anweisung(en) }else{

Anweisung(en) }

Da Pseudocode über das Einrücken und über einige Schlüsselbegriffe Programmiersprachen näherungsweise abbildet, ist es zumindest prinzipiell relativ einfach, daraus den benötigten korrekten Code zu erzeugen. Stärker als Flussdiagramme setzt Pseudocode jedoch eine gewisse Erfahrung im Programmieren voraus, um sinnvoll Logiken abbilden zu können. Das obige Beispiel könnte man etwa so formulieren: function zurArbeitGehen(){  gehe zur Tür hinaus

 wenn(Wetter sieht regnerisch aus){  nehme Schirm;

 gehe zur Bushaltestelle;

Der Volksmund weiß, dass Programmierer dickbäuchig, männlich und exzessive Kaffeetrinker sind. Lediglich das letztgenannte Vorurteil stimmt, weswegen wir uns am konkreten Beispiel des Kaffeekochens anschauen wollen, wie sich ein komplexeres Programm in Pseudo-Code entwickeln lässt. Wir wählen eine Top-Down-Vorgehensweise.

• Aufgabenstellung/Problemstellung:

Einen leckeren Kaffee kochen und ihn Gästen servieren. • Annahme: Der Kaffee wird von einer Maschine gekocht, die exakte Anweisungen von uns benötigt. Wasser und Strom sowie Tassen und Kanne sind vorhanden, die durstigen Gäste natürlich auch. Außerdem verfügen wir über notwendiges Kleingeld, um gegebenenfalls in einem gut sortierten Laden um die Ecke Besorgungen durchzuführen.

}sonst{

In der allgemeinsten Form bzw. auf dem höchsten Abstraktionslevel besteht der fragliche Prozess aus zwei Teilen:

}

Kaffee kochen

}

Fertigen Kaffee servieren

Die einzelnen Schritte bleiben gegenüber dem Flowchart notwendigerweise gleich. In beiden Fällen kontrollieren wir beispielsweise das Wetter. Nur sieht die Struktur, in der die Schritte wieder gegeben werden, durchaus ähnlich aus, wie sie auch in einem konkreten Programm zu finden wäre:

Das reicht allerdings bei weitem nicht aus, um den betreffenden Prozess zielgerichtet in Gang zu setzen. Es fehlen nämlich konkrete Einzelschritte bzw. Handlungsanweisungen. Jeder dieser Teile umfasst eine Reihe von Schritten, die in manchen Fällen von spezifischen Bedingungen abhängen. Betrachten wir den ersten der genannten Teile, lässt er sich aufsplitten in die Phasen:

 fahre zum Ziel;  gehe zum Ziel;

• Anweisungen werden in der Reihenfolge der Aus-

führungen untereinander geschrieben. Ein horizontales Abweichen wie beim Flowchart (Ja, Nein) existiert hier nicht. • Logisch aufeinander bezogene Anweisungen werden in einem eigenen Block, einer Funktion, erfasst. • Bedingungen werden ebenfalls in einem eigenen Block, der if-Bedingung, erfasst. In einem „richtigen“ Code müsste abschließend noch der Aufruf der Funktion zurArbeitGehen() erfolgen, aber auch so ist der Ablauf unserer Lösung zu erkennen und nachzuvollziehen.

vorbereiten aufbrühen

Ähnlich können wir den zweiten Teil untergliedern in: vorbereiten servieren

In beiden Fällen gehen dem Ergebnis der Teilprozesse – fertiger Kaffee, „vollendeter Genuß“ TM – vorbereitende Schritte voraus. In Bezug auf das Aufbrühen handelt es sich um:

3.4  Beispiel-Algorithmus „Kaffee kochen“

17

Kanne mit Wasser füllen

vorbereiten

Kanne in Maschine stellen

Zucker nehmen

Wasser in Maschine füllen Filter in Maschine einsetzen Pulver in Filter füllen einschalten

Selbst an dieser Stelle haben wir noch nicht die kleinstmögliche Schrittfolge erreicht. Weitere Unterteilungen sind möglich. So besteht der erste Punkt, das Füllen der Kanne, aus folgenden Einzelhandlungen: Kanne fassen

Zum Wasserhahn gehen

Unter Wasserhahn halten Wasser fließen lassen Wasser stoppen

Kanne zur Maschine bringen

Dieses Verfeinern wird solange durchgeführt, bis man ganz kleinschrittige Anweisungen findet, die sich nicht mehr unterteilen lassen. Für unsere Zwecke reicht der erzielte Detailgrad aus. Zu Übungszwecken können Sie jedoch gerne alle weiteren Schritte soweit ausarbeiten, bis sie sich nicht mehr in kleinere Häppchen unterteilen lassen. Auf dieser Basis lässt sich ein Algorithmus angemessen formulieren. Er sieht zum aktuellen Zeitpunkt folgendermaßen aus: Kaffee kochen vorbereiten

Kanne mit Wasser füllen Kanne fassen

Zum Wasserhahn gehen

Unter Wasserhahn halten Wasser fließen lassen Wasser stoppen

Kanne zur Maschine bringen Wasser in Maschine füllen Kanne in Maschine stellen

Filter in Maschine einsetzen Pulver in Filter füllen einschalten aufbrühen

Fertigen Kaffee servieren

Tassen nehmen Milch nehmen servieren

Kaffee in Tasse füllen Zucker geben Milch geben

Wir könnten so fortfahren, bis wir eine zwar endliche, aber aufgrund der vielen Schritte endlos lang erscheinende Liste mit Instruktionen erhalten würden. Wirklich lesbar und damit verständlich ist eine solche Form allerdings nicht. Daher fügen wir eine formale Gliederung ein, die durch eingerückte Zeilen eine hierarchische Abhängigkeit anzeigt: Kaffee kochen

 vorbereiten

 Kanne mit Wasser füllen  Kanne fassen

 Zum Wasserhahn gehen

 Unter Wasserhahn halten  Wasser fließen lassen  Wasser stoppen

 Kanne zur Maschine bringen  Wasser in Maschine füllen  Kanne in Maschine stellen

 Filter in Maschine einsetzen  Pulver in Filter füllen  einschalten  aufbrühen

Fertigen Kaffee servieren  vorbereiten

 Tassen nehmen  Zucker nehmen  Milch nehmen servieren

 Kaffee in Tasse füllen  Zucker geben  Milch geben

Wir können nun auf einen Blick erkennen, dass die Schritte vorbereiten bis aufbrühen im ersten Teil zum Kochen des Kaffees gehören. Solche Anweisungs-

18

Blöcke lassen sich in Programmiersprachen in sogenannten Funktionen erfassen. Dabei ist eine bestimmte Schreibweise bei der Wahl der Funktionsnamen zu berücksichtigen, die wir hier geflissentlich weitgehend ignorieren wollen, da es zunächst nur um das Prinzip geht. Wir kommen darauf in den nachfolgenden Kapiteln zu Variablen und Funktionen in ActionScript jedoch ausführlicher zu sprechen. Ändern Sie den Pseudo-Code so, wie es die fettgedruckten Zeilen anzeigen (aus Gründen der Übersichtlichkeit wollen wir ab dieser Stelle derartige Änderungen fett auszeichnen): function kaffeeKochen(){  vorbereiten

 Kanne mit Wasser füllen  Kanne fassen

 Zum Wasserhahn gehen

 Unter Wasserhahn halten  Wasser fließen lassen  Wasser stoppen

 Kanne zur Maschine bringen  Wasser in Maschine füllen  Kanne in Maschine stellen

 Filter in Maschine einsetzen  Pulver in Filter füllen  einschalten  aufbrühen }

function fertigenKaffeeServieren(){  vorbereiten

 Tassen nehmen  Zucker nehmen  Milch nehmen  servieren

 Kaffee in Tasse füllen  Zucker geben  Milch geben }

kaffeeKochen();

fertigenKaffeeServieren();

Formal gesehen umfasst unser Code nun zwei Funktionsdefinitionen, in denen teilweise ganz konkrete Anweisungen und Befehle enthalten sind, sowie danach

Kapitel 3  Programmentwicklung und Programmiersprachen

in den beiden letzten Zeilen folgend zwei Funktionsaufrufe. Diese Aufrufe sorgen dafür, dass die vorher definierten Anweisungen auch wirklich ausgeführt werden. Sie sind vergleichbar mit einer Aufforderung an eine andere Person, jetzt Kaffee aufzubrühen und zu servieren. Durch die Verwendung des Schlüsselworts function sowie der runden Klammern () machen wir deutlich, dass es sich hier um die Definition einer Befehlsfolge handelt. Mit den geschweiften Klammern {} kennzeichnen wir deren Anfang und Abschluss. Die Übersichtlichkeit erhöht sich weiter, wenn wir die sehr detaillierten Schritte, die zu einer übergeordneten Handlungsanweisung wie beispielsweise Kanne mit Wasser füllen gehören, ebenfalls in eine Funktion auslagern. Ändern Sie den Pseudo-Code: function kaffeeKochen(){ vorbereiten()  aufbrühen }

function fertigenKaffeeServieren(){  vorbereiten

 Tassen nehmen  Zucker nehmen  Milch nehmen  servieren

 Kaffee in Tasse füllen  Zucker geben  Milch geben }

function vorbereiten(){

Kanne mit Wasser füllen Kanne fassen

Zum Wasserhahn gehen

Unter Wasserhahn halten Wasser fließen lassen Wasser stoppen

Kanne zur Maschine bringen Wasser in Maschine füllen Kanne in Maschine stellen

Filter in Maschine einsetzen Pulver in Filter füllen einschalten

3.4  Beispiel-Algorithmus „Kaffee kochen“

19

}

function vorbereitenServieren(){

fertigenKaffeeServieren();

Zucker nehmen

kaffeeKochen();

Alle Schritte, die zum Vorgang vorbereiten gehören, haben wir in eine entsprechende Funktion verlagert. Jedes Mal, wenn wir Kaffee aufbrühen wollen, rufen wir diese Funktion auf, um alles Notwendige bereitzustellen. Schauen wir uns den bisherigen Code an, erkennen wir, dass es noch eine zweite Stelle gibt, an der die Anweisung vorbereiten zu finden ist, nämlich unmittelbar vor dem Servieren des fertigen Kaffees. In einem früheren Abschnitt wurde darauf verwiesen, dass wir mit zweideutigen Informationen i. d. R. umgehen können. Im aktuellen Beispiel würden Menschen aus dem jeweiligen Kontext darauf schließen, dass Vorbereiten einmal die Verwendung eines Filters, ein anderes mal die Suche nach sauberen Tassen umfasst. Eine Maschine bzw. ein Computer dagegen wäre zu einer derartigen Interpretation nicht in der Lage und würde statt dessen bei jeder Handlungsanweisung vorbereiten genau das tun, was in der gleichnamigen Funktionsdefinition bzw. Handlungsdefinition steht. Was für korrekten Programmcode gilt, sollte man sich daher auch für einen Pseudo-Code merken: Wenn möglich, sind verschiedene Handlungsanweisungen auch mit verschiedenen Begriffen zu formulieren, was es in formaler Hinsicht erleichtert, das spätere Skript fehlerfrei in der richtigen Syntax zu entwickeln. Wir könnten hier die verschiedenen Anweisungen des vorbereiten durch ein Suffix genauer kennzeichnen, z. B. vorbereitenKaffee und vorbereitenServieren. Dann sähe unser Code so aus: function kaffeeKochen(){ vorbereitenKaffee()  aufbrühen }

function fertigenKaffeeServieren(){ vorbereitenServieren()  servieren }

function vorbereitenKaffee(){  Kanne mit Wasser füllen … }

Tassen nehmen Milch nehmen } …

Die drei Punkte (…) deuten Auslassungen an, um nicht permanent den gesamten Code wiederholen zu müssen. Sie fügen an dieser Stelle gedanklich die bereits oben dargestellten Zeilen ein. Damit können wir nun eigentlich genüsslich Kaffee schlürfen. Allerdings bleiben in unserem Algorithmus noch einige Fragen offen. Ein typisches Problem stellen die Vorannahmen dar. Dort haben wir vorausgesetzt, dass Wasser, Kaffeepulver und Strom vorhanden sind. Doch was ist mit den für unseren Prozess ebenso unverzichtbaren Filtern? Wir verwenden sie einfach in unserem Programm, ohne zu prüfen, ob überhaupt welche vorhanden sind. Wir müssen daher unsere Funktion vorbereitenKaffee erweitern: function vorbereitenKaffee(){ …

 Kanne in Maschine stellen

wenn(keine Filter vorhanden){ Filter kaufen gehen }

Filter in Maschine einsetzen Pulver in Filter füllen einschalten }

Auch an anderen Stellen greifen wir einfach auf Objekte zu, ohne uns zu vergewissern, ob sie vorhanden sind. Dasselbe gilt z. B. für Milch und Zucker. Dementsprechend sollte die Funktion vorbereitenServieren lauten: function vorbereitenServieren(){ wenn (Tassen unsauber){ dann spülen }

 Tassen nehmen

wenn (kein Zucker){ Zucker kaufen

20

}

 Zucker nehmen

wenn (keine Milch){

 kaufen (bei den derzeitigen Preisen besser: Nachbarn fragen) }

 Milch nehmen }

Damit erweitert sich unser Algorithmus um ein wichtiges Konzept, nämlich die Bedingung. Anweisungen wie das Kaufen von Zucker oder das Verwenden eines Filters werden von Voraussetzungen abhängig gemacht, die explizit im Programm als Bedingung formuliert werden. Es gibt noch weitere Stellen, an denen Bedingungen erfüllt sein müssen, ehe der nächste Arbeitsschritt ausgeführt werden kann. Dabei können diese Bedingungen beliebiger Art sein. Oft kommt es vor, dass zuerst ein bestimmter Arbeitsschritt beendet werden muss, bevor der nächste Schritt folgen kann. Das gilt in unserem Beispiel hinsichtlich des Servierens, denn selbstverständlich muss man erst einmal abwarten, bis der Kaffee schon fertig aufgebrüht ist, ehe man sich daran laben kann. Den aktuellen Status kann man an der Maschine ablesen, die uns beispielsweise durch ein Lämpchen mitteilt, wann der Kaffee fertig ist. Momentan ist es allerdings noch so, dass wir zunächst den Anweisungs-Block kaffeeKochen und dann unmittelbar danach den Block fertigenKaffeeServieren ausführen. Tatsächlich muss jedoch die zweite Anweisung von dem erfolgreichen Abschluss der ersten abhängig gemacht werden. Daher korrigieren wir unseren Code: function kaffeeKochen(){  vorbereitenKaffee()  aufbrühen

wenn (Lämpchen brennt noch){ warten }sonst{

fertigenKaffeeServieren() } }

Zum Schluss nach allen Funktionsdefinitionen lautet der Aufruf nur noch: kaffeeKochen()

Kapitel 3  Programmentwicklung und Programmiersprachen

Nun bleibt noch der Vorgang des Servierens, der ebenfalls von Bedingungen abhängt und in eine Funktion ausgelagert werden kann. Ändern Sie daher den bestehenden Pseudo-Code in: function fertigenKaffeeServieren(){  vorbereitenServieren() servieren(); }

function servieren(){

Kaffee in Tasse füllen

wenn (Gast will Zucker){ Zucker geben }

wenn (Gast will Milch){ Milch geben } }

In beredter Prosa ergibt sich damit derzeit folgender Ablauf: Zuerst werden einzelne Arbeitsschritte, soweit sie von der Logik her zusammengehören, in Funktionen zusammengefasst. Wir verfügen jetzt über folgende Definitionen dieser Art:

• kaffeeKochen. Das ist die wichtigste Funktion,

die den gesamten Prozess in Gang setzt. Sie ruft in dieser Reihenfolge die Funktionen vorbereitenKaffee und aufbrühen auf. Anschließend kontrolliert sie das Lämpchen an der Maschine. Brennt es noch, müssen wir warten, da der Kaffee noch nicht fertig ist. Andernfalls wird die Funktion fertigenKaffeeServieren aufgerufen. • vorbereitenKaffee. Hier werden alle Schritte ausgeführt, die notwendig sind, bevor wir die Maschine einschalten können. Dazu gehört etwa das Einstecken eines Filters, das Einfüllen von Pulver etc. • aufbrühen. Hier haben wir nicht etwa gemogelt, schließlich fehlt doch eigentlich eine entsprechende Definition. Das Aufbrühen ist ein maschineninterner Vorgang, der ausgelöst wird, sobald wir den betreffenden Befehl geben. Es ist nicht notwendig, kleinschrittigere Anweisungen zu geben. Jede Script- und Programmiersprache verfügt über derartige vorgefertigte Funktionen (natürlich nicht zum Aufbrühen, sondern um anderweitige

3.4  Beispiel-Algorithmus „Kaffee kochen“

Aktionen auszuführen). Sie stellen die Grundbausteine dar, aus denen der Programmierer seine eigenen, komplexeren Funktionen aufbaut. • fertigenKaffeeServieren. Diese Funktion legt fest, was geschehen soll, nachdem der Kaffee fertig aufgebrüht wurde. Sie besteht aus den zwei Anweisungsblöcken vorbereitenServieren und servieren. • vorbereitenServieren. Wie bei aufbrühen bedarf servieren (s. u.) einiger vorbereitender Schritte, die hier definiert werden. • servieren. Diese Funktion umfasst alle Handgriffe, die ausgeführt werden müssen, bis die schon jetzt halb verdurstete Gästeschar endlich trinken darf. Abschließend geben wir den Befehl KaffeeKochen(), der die gesamte in den Funktionen beschriebene Kette an Aktionen auslöst. Bis zu diesem Zeitpunkt hat einer der Gäste den Raum unter Protest in unverständlichem Pseudo-Code verlassen, weil er immer noch nichts zu trinken bekommen hat. Jeder passionierte Kaffeetrinker weiß, dass die Menge des verwendeten Pulvers ebenso entscheidenden Einfluss auf den späteren Genuss ausübt wie die Menge der Milch und gegebenenfalls des Zuckers. Ein noch so geringes Abweichen von der Idealmenge vermag den Genießer in tiefste Depression zu stürzen. Um ein solches Problem zu umgehen, empfiehlt es sich, die Idealmenge irgendwo festzuhalten. In der Programmierung geschieht das mit Hilfe von Variablen. Ganz am Anfang des Codes fügen wir ein:

21

ter Variable festgehalten, in unserem konkreten Fall also 8 Löffel. Auf die gleiche Art und Weise müssten alle anderen Mengenangaben präzisiert werden, also z. B. Milch und Zucker. Für den Fall, dass Sie unterwegs verloren gegangen sind, hier der aktuelle Stand: mengeKaffee = 8 Löffel

function kaffeeKochen(){  vorbereitenKaffee()  aufbrühen

 wenn (Lämpchen brennt noch){  warten }sonst{

 fertigenKaffeeServieren() } }

function vorbereitenKaffee (){  Kanne mit Wasser füllen  Kanne fassen

 Zum Wasserhahn gehen

 Unter Wasserhahn halten  Wasser fließen lassen  Wasser stoppen

 Kanne zur Maschine bringen  Wasser in Maschine füllen  Kanne in Maschine stellen

 wenn (keine Filter vorhanden){  Filter kaufen gehen

mengeKaffee = 8 Löffel

}

Diese Information muss beim Einfüllen des Pulvers in den Filter berücksichtigt werden:

 mengeKaffee Pulver in Filter füllen

function vorbereitenKaffee(){ …

 Filter in Maschine einsetzen

mengeKaffee Pulver in Filter füllen  einschalten }

Durch die Variable mengeKaffee haben wir exakt festgelegt, wie viele Löffel wir zu verwenden wünschen. Über die Funktion vorbereitenKaffee wird nun nicht mehr eine beliebige Menge Pulver in den Filter geschüttet, sondern genau so viel, wie in besag-

 Filter in Maschine einsetzen  einschalten }

function fertigenKaffeeServieren(){  vorbereitenServieren()  servieren(); }

function servieren(){

 Kaffee in Tasse füllen

 wenn (Gast will Zucker){  Zucker geben

22

}

 wenn (Gast will Milch){  Milch geben

Kapitel 3  Programmentwicklung und Programmiersprachen

Und der Befehl beim Aufruf dieser Funktion lautet: function kaffeeKochen(){

}

 vorbereitenKaffee(„Segafredo Intermezzo“)

function vorbereitenServieren(){

}

}

 wenn (Tassen unsauber){  dann spülen }

 Tassen nehmen

 wenn (kein Zucker){  Zucker kaufen }

 Zucker nehmen

 wenn (keine Milch){

 kaufen (bei den derzeitigen Preisen besser: Nachbarn fragen) }

 Milch nehmen }

kaffeeKochen();

Wäre nun nicht die richtige Zeit, um einen Schluck zu nehmen? Leider immer noch nicht  – an dieser Stelle mag der eine oder andere Leser unzufrieden brummeln, denn jedermann dürfte klar sein, dass die richtige Kaffeesorte von elementarer Bedeutung für den „vollendeten Kaffeegenuß“ TM ist. Was geschieht jedoch, wenn jemand die verwendete Sorte keinesfalls goutieren möchte? In dem Fall bliebe zwar der gesamte Prozess vom Ablauf her der gleiche, aber eine Variable müsste mit einem anderen Inhalt belegt werden. In der Programmierung lässt sich das Problem z. B. mit Hilfe einer sogenannten parametrisierten Funktion lösen, also einer Funktion, der wir beim Aufruf eine Variable mit einem bestimmten Inhalt mitgeben. Dazu muss zunächst in der Funktionsdefinition festgelegt werden, dass wir eine derartige besondere Variable benötigen: function vorbereitenKaffee(welcheSorte){ …

 mengeKaffee Pulver welcheSorte in Filter füllen … }

…

Wenn wir den Befehl zum Kaffee kochen an die Maschine ausgeben, teilen wir ihr gleichzeitig mit, welche Sorte denn gewünscht sei. In unserem konkreten Fall übergeben wir leckeren „Segafredo Intermezzo“. Wenn wir beim nächsten Mal anderen Kaffee wünschen, brauchen wir nur dementsprechend den Aufruf zu ändern: function kaffeeKochen(){

 vorbereitenKaffee(„Pangalaktischer Donnergurgler Espresso“) … }

Obwohl uns bereits ein Gast verlassen hat, sind immer noch mehrere vorhanden. Daher reicht es nicht aus, abschließend die Funktion servieren in der momentanen Form aufzurufen. Denn die dort beschriebenen Arbeitsschritte müssen wir nicht nur einmal, sondern so oft ausführen, wie durstige Gäste anzutreffen sind, schließlich soll ja jeder einen Kaffee erhalten. Wiederholt auszuführende Anweisungen werden in der Programmierung mit Hilfe von Schleifen definiert. Ergänzen Sie dementsprechend die Definition von servieren: function servieren(){

für jeden Gast{

 Kaffee in Tasse füllen

 wenn (Gast will Zucker){  Zucker geben }

 wenn (Gast will Milch){  Milch geben } } }

Auf diese Weise wiederholen wir für jeden einzelnen Gast das gesamte Prozedere des Verteilens unseres hoffentlich köstlichen Kaffees. Halten sich noch 5

3.4  Beispiel-Algorithmus „Kaffee kochen“

Gäste bei uns auf, führen wir die fraglichen Anweisungen fünfmal aus, sind 2 da, eben nur zweimal. Wenn man Code auf diese Weise entwickelt, kommt es vor, dass manche Information redundant und damit überflüssig ist, und dass der Programmablauf noch optimiert werden kann. So verfügen wir mit fertigenKaffeeServieren über eine Funktion, die nichts anderes tut, als ihrerseits weitere Funktionen, nämlich vorbereitenServieren und servieren aufzurufen. Wir können also auf fertigenKaffeeServieren verzichten und an deren Stelle direkt die beiden genannten Funktionen verwenden. function kaffeeKochen(){

 vorbereitenKaffee(„Segafredo Intermezzo“)  aufbrühen

 wenn (Lämpchen brennt noch){  warten

Abbildung 3:  Variablen- und Funktionsdefinition

23

} sonst {

vorbereitenServieren() servieren(); } }

Anschließend kann die Funktionsdefinition von fertigenKaffeeServieren gelöscht werden. Die bis hierher entwickelte Form des benötigten Algorithmus beschreibt bereits recht genau den Prozess, den wir programmiertechnisch abbilden wollen. Er enthält zahlreiche grundlegende Elemente, die in jedem Programm anzutreffen sind: Variable, Parameter, Aufruf bzw. Anweisung, Anweisungs-Block, Schleife und Bedingung. Die Abbildungen 3 bis 6 visualisieren sie in Kurzform, jeweils konkreten Elementen unseres Pseudo-Codes zugeordnet. Welche Bedeutung die jeweiligen Elemente im Einzelnen besitzen, werden wir uns in den nachfolgenden Kapiteln noch genauer anschauen.

24

Kapitel 3  Programmentwicklung und Programmiersprachen Abbildung 4:  Anweisungsblock

Abbildung 5:  Argument, Parameter, Schleife

3.4  Beispiel-Algorithmus „Kaffee kochen“

25 Abbildung 6:  Anweisung, Bedingung, Funktionsaufruf

Unser gesamter Pseudo-Code sieht jetzt so aus: mengeKaffee = 8 Löffel

function kaffeeKochen(){

 Wasser in Maschine füllen  Kanne in Maschine stellen

 wenn(keine Filter vorhanden){

 vorbereitenKaffee(„Segafredo Intermezzo“)

 Filter kaufen gehen

 wenn (Lämpchen brennt noch){  warten

 mengeKaffee Pulver welcheSorte in Filter füllen

 vorbereitenServieren()

}

 aufbrühen

}sonst{

}

 Filter in Maschine einsetzen

 einschalten

 servieren();

function vorbereitenServieren(){

}

 dann spülen

}

function vorbereitenKaffee(welcheSorte){  Kanne mit Wasser füllen  Kanne fassen

 Zum Wasserhahn gehen

 Unter Wasserhahn halten  Wasser fließen lassen  Wasser stoppen

 Kanne zur Maschine bringen

 wenn (Tassen unsauber){ }

 Tassen nehmen

 wenn (kein Zucker){  Zucker kaufen }

 Zucker nehmen

 wenn (keine Milch){

26

 kaufen (bei den derzeitigen Preisen besser: Nachbarn fragen) }

 Milch nehmen }

function servieren(){  für jeden Gast{

 Kaffee in Tasse füllen

 wenn (Gast will Zucker){  Zucker geben

Kapitel 3  Programmentwicklung und Programmiersprachen

}

 wenn (Gast will Milch){  Milch geben } } }

kaffeeKochen();

Hätten Sie jemals gedacht, dass Kaffeekochen so kompliziert und Programmieren so einfach sein könnte?

Programmierung und ActionScript

Mittlerweile haben Sie Ihren Kaffee aus dem vorhergehenden Kapitel genossen und stellen sich die Frage, ob man denn tatsächlich jedes Mal, wenn es einen nach Kaffee gelüstet, programmieren muss. Sicher nicht, dennoch sprechen zahlreiche Gründe für die Programmierung (zumindest in der Flash-Entwicklung):

• Eine programmierte Lösung reduziert die Dateig-

röße gegenüber einer rein grafischen Lösung zum Teil erheblich. • Interaktionen, also der Eingriff des Anwenders in den Ablauf Ihrer Applikation und die ZweiwegKommunikation mit ihm, ist nur per Programmierung möglich. Das beginnt schon bei der simplen Steuerung einer Animation, die ohne (allerdings ausgesprochen einfachen) Code nicht realisierbar ist. • Die Programmierung bietet erheblich mehr Flexibilität. Wenn wir beispielsweise eine Animation programmieren, können wir sie zeitleistenunabhängig sehr schnell über Variablen ändern und verschiedene Versionen austesten. Wir müssen keine Änderung an der Zeitleiste vornehmen und laufen so nicht Gefahr, unbeabsichtigt andere Animationen oder Objekte ebenfalls zu modifizieren. Ist der Code ordentlich geschrieben, reicht es, eine einzelne oder einige wenige Zahlen zu ändern und wir erhalten ein völlig neues Ergebnis. • Eine Applikation lässt sich durch externe Informationen anpassen, ohne dass wir die fla-Datei öffnen müssen. Sie wird damit erheblich leichter pflegbar und selbst Kunden können sie den eigenen Wünschen anpassen, ohne über Flash-Kenntnisse verfügen oder das Programm besitzen zu müssen. • Der Code lässt sich, falls korrekt geschrieben und strukturiert, leicht auslagern und in beliebigen Pro-

4

jekten wieder verwenden, was die Entwicklungszeit verkürzen kann. • Als zusätzlicher Benefit sollte nicht unerwähnt bleiben, dass das Erlernen einer Skriptsprache das Umsteigen auf eine andere oder sogar eine höhere Programmiersprache erheblich erleichtern kann. Je breiter man als Entwickler aufgestellt ist, desto bessere Berufschancen ergeben sich. Zudem profitieren auch gestandene Designer von Skriptsprachen, denn nahezu jedes Programm erlaubt die Vereinfachung des Workflows und die Automatisierung von Arbeitsschritten mit Hilfe von Skripten, sei es MEL-Skript in Maya, Expresso und Coffee bei Cinema, Javascript bei Photoshop oder gar JSFL bei Flash. • Weil der Chef es so will (das ultimative Motiv). Was genau versteht man nun unter Programmierung und wie gestaltet sie sich in Flash? Die Programmierung ist prinzipiell nichts anderes als die Entwicklung geeigneter Algorithmen, um ein gegebenes Problem zu lösen, so wie wir es uns zuvor an einem konkreten Beispiel angeschaut haben. Dazu verwendet man Skriptsprachen (z. B. Javascript, ActionScript, PHP) oder Programmiersprachen (z. B. Java, C++, C#). In solchen Sprachen erstellter Code wird nicht direkt von einer Maschine verstanden bzw. ausgeführt. Vielmehr muss er erst in eine für eine Maschine verständliche Zeichenfolge umgewandelt werden. Mit Maschine ist jedes Gerät gemeint, dass Code ausführen kann, in unserem Fall also der Computer. Programmiersprachen verwenden i. d. R. einen Kompiler, der den Code in Maschinensprache oder in eine maschinennahe Sprache übersetzt. Die meisten Skriptsprachen dagegen benötigen einen Interpreter, der den Code in einen Zwischencode oder P-Code übersetzt, der dann

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

27

28

Kapitel 4  Programmierung und ActionScript

von einer Virtuellen Maschine ausgeführt wird. Was zunächst umständlich aussieht, hängt einfach mit der Tatsache zusammen, dass ein Computer lediglich Binärcode versteht – die bekannten 0 und 1 –, für einen Menschen aber das Schreiben von Anweisungen mit derartigen Zeichen zu abstrakt und fehleranfällig wäre. Daher bieten uns die diversen Sprachen die Möglichkeit, Anweisungen in einer der natürlichen Sprache oder der Logik näher stehenden Form zu schreiben. Das Resultat wird dann automatisch umgewandelt, eben kompiliert oder interpretiert. Im Fall von ActionScript kommen derzeit zwei verschiedene Virtuelle Maschinen zum Einsatz, die wir uns nicht auswählen können, sondern die sich nach der verwendeten Sprachversion richten. Die AVM (ActionScript Virtual Machine, nachträglich auch AVM1 genannt) ist für AS 1.0 und 2.0 zuständig, während die AVM2 die Ausführung von AS 3.0 vornimmt. Eine derartige Trennung wurde notwendig, um den partiell grundlegenden Unterschieden der Sprachversionen gerecht zu werden. Diese AVMs sind in den FlashPlayer integriert und führen den von uns erstellten Code clientseitig, also auf dem Computer des Users, aus, sobald eine swf-Datei aufgerufen wird. Wie eine natürliche Sprache wird auch eine künstliche bzw. Programmiersprache durch ihre spezifische Semantik und Syntax bestimmt. Während sich die Semantik auf die Bedeutung der Elemente und Aussagen bezieht, ist mit Syntax die Struktur bzw. Grammatik gemeint. Denn die einzelnen Elemente ergeben nur dann einen Sinn, wenn sie in einer exakt definierten Weise Verwendung finden. Insofern gleichen sich natürliche und künstliche Sprachen. Tatsächlich hat das Erlernen einer Programmiersprache sehr viel gemein mit demjenigen einer Fremdsprache. Allerdings existieren auch bedeutende Unterschiede zu einer natürlichen Sprache:

• Ein

Programm enthält nur Anweisungen, nicht jedoch Beschreibungen. Eine Aussage wie „Das Auto hat eine rote Farbe“ lässt sich in Code nicht wiedergeben. Dort wäre es nur möglich, sich die betreffende Farbe ausgeben zu lassen oder die genannte Eigenschaft auf den gewünschten Farbwert zu setzen, also quasi das Auto einzufärben. In beiden Fällen läge eine Anweisung vor. Davon weichen Auszeichnungssprachen bzw. Markup Languages wie XML ab, die explizit eine Beschreibung zulassen. Näheres zu XML erfahren Sie weiter unten im gleichnamigen Kapitel.

• Code lässt keine Zweideutigkeiten zu. Wenn man

mit Hilfe von Anweisungen ein bestimmtes Ziel erreichen will, dann müssen diese so präzise wie möglich sein, wie bereits oben im vorhergehenden Kapitel gezeigt. Die natürliche Sprache dagegen strotzt geradezu von Zweideutigkeiten und unklaren Ausdrücken, die zu zahlreichen Missverständnissen führen (können), wie wir alle im täglichen Leben erfahren. Gleichzeitig ermöglichen sie jedoch etwas, zu dem eine Computersprache nie in der Lage wäre: Sprachwitze, die eben davon leben, dass Begriffe doppeldeutig sein können. Sie bereichern unsere Sprache, würden aber im Code nur zu Chaos führen (Stellen Sie sich vor, ein Computer müsste erst einmal überlegen, ob unsere Anweisung Ernst gemeint oder nur ein Scherz wäre!). • Ein Programm handelt nicht eigenständig, sondern folgt exakt unseren Anweisungen. Wenn sich ein Programm also fehlerhaft benimmt, dann i. d. R. weil unsere Anweisung falsch war, nicht jedoch weil der Flash-Player irgendwelche Fehler macht. • Die Reihenfolge, in der die Anweisungen in einem Skript auftreten, entspricht nicht zwangsläufig der Reihenfolge ihrer Ausführung. Zwar wird ein Skript beim Starten einer Flash-Datei zeilenweise von oben nach unten in den Arbeitsspeicher eingelesen, aber die konkrete Ausführung einzelner Anweisungen oder ganzer Code-Blöcke kann von Bedingungen und Ereignissen abhängig gemacht werden. ActionScript zeichnet sich durch verschiedene Eigenschaften aus, deren Kenntnis wichtig ist, wenn wir Code schreiben wollen. Dazu gehören:

• AS stellt eine ereignisorientierte Sprache dar, d. h.

Anweisungen werden nur dann ausgeführt, wenn bestimmte Ereignisse eintreten. Anweisungen können daher nie unabhängig von Ereignissen existieren. Das ist ein bisschen wie in unserem realen Leben: Wenn zu nachtschlafener Zeit gegen 5.45 Uhr der Wecker klingelt, quält sich der bemitleidenswerte Autor dieses Buches schlaftrunken aus dem Bett. Das Ereignis entspricht dem Klingeln des Weckers, während der Vorgang des Aufstehens aus Anweisungen und Befehlen an einzelne Körperteile oder allgemeiner aus Handlungen besteht. Nun klingelt in AS eher selten ein Wecker; dafür stehen dort jedoch zahlreiche vordefinierte Ereignisse wie onEnterFrame (der Abspielkopf betritt

 

den aktuellen Frame), onPress (auf das angegebene Objekt erfolgt ein Mausklick) oder onLoad (der Ladevorgang wurde abgeschlossen) zur Verfügung, die mit einer Ausnahme explizit angegeben werden müssen, bevor wir davon abhängige Anweisungen formulieren können. Die Ausnahme bezieht sich auf Code, der in einem Schlüsselbild steht. Der wird automatisch ausgeführt, da der Abspielkopf einen Frame zumindest einmal automatisch betritt (andernfalls wäre Flash gar nicht in der Lage, irgend etwas darzustellen). • Je nach Sprachversion ist AS nur objektbasiert oder aber objektorientiert. In einer objektbasierten Sprache stellen Objekte lediglich benamte Ansammlungen beliebiger Daten (bzw. Eigenschaften) und Funktionen (bzw. Methoden) dar. Diese Objekte werden i. d. R. einfach mit Hilfe assoziativer Arrays erstellt. Eine objektorientierte Sprache dagegen erlaubt die Erstellung und Manipulation von Objekten, die in hierarchischen Klassen organisiert sind. Letzteres trifft auf die AS-Versionen 2 und 3 zu. Alles, was sich in Flash per Code ansprechen lässt, besteht aus einem Objekt, sei es nun ein Textfeld, eine Schaltfläche, ein MovieClip oder auch nur ein Behälter für Daten wie eine Variable oder ein Array. Damit einher geht die Schreibweise, die als Dot-Syntax bekannt ist. Demzufolge müssen alle Elemente, die in einem Code angesprochen werden, eindeutig und einmalig benannt sein. Befehle, Ereignisse und Methoden werden ihnen zugeordnet, indem an die Namen von Objekten die gewünschten Elemente, getrennt durch einen Punkt, angehängt werden, z. B.: einArray.length, einButton.onRollOver oder einMovieClip.loadMovie(). Die in ActionScript zur Verfügung stehenden Objekte werden in Klassen erfasst, die sich in der FlashHilfe einsehen lassen. Bei einer Klasse handelt es sich um eine Art Blaupause, in der Struktur und Funktionalität der betreffenden Objekte festgelegt werden. Was so abstrakt klingt, entspricht vollkommen unserem Alltagsverständnis. Wenn wir beispielsweise ein Haus sehen, wissen wir, dass es sich um ein Objekt der Kategorie „Gebäude“, nicht jedoch um ein Objekt beispielsweise der Kategorie „Säugetier“ handelt. Von einem Haus erwarten wir ganz bestimmte Dinge, etwa, dass es über einen Zugang in Form einer Tür verfügt. Dagegen fehlen ihm beispielsweise Füße oder Flossen, die man eher bei einem Säugetier vorfinden würde (jedenfalls in dieser Ecke des Universums).

29

Wer ActionScript lernen möchte, sollte sich daher unbedingt mit der Flash-Hilfe vertraut machen und dort regelmäßig nachschlagen, bis man sich die wichtigsten Klassen angeeignet hat. Sie unterteilt die benötigten Informationen in sogenannte Bücher, die sich als pdf-Datei von der Seite des Herstellers herunterladen lassen. Für uns besonders wichtig ist die ActionScript 2.0 Language Reference. Betrachten wir darin beispielhaft die Klassendefinition für Buttons, zu finden unter ActionScript Classes – Button. Neben einer allgemeinen Erläuterung finden sich dort Tabellen mit einer Auflistung derjenigen Elemente, aus denen sich eine Klassenbeschreibung zusammen setzt. Dabei handelt es sich prinzipiell um:

• Eigenschaften. Sie legen fest, wie ein Objekt ist, ge-

ben mithin Auskunft auf die Wie-Frage. So verfügt eine Instanz der Klasse Button bzw. das konkrete Button-Objekt auf unserer Bühne über die Eigenschaften _width und _height, also eine horizontale und vertikale Ausdehnung gemessen in Pixeln. Sobald wir auf ein Objekt treffen, das dieser Klasse zugeordnet werden kann, wissen wir, dass es über eine Ausdehnung im Raum verfügt. Und diese lässt sich entsprechend der in der Klassendefinition enthaltenen Angaben behandeln. Prinzipiell möglich sind Auslesen (Rückgabe des Wertes einer Eigenschaft) und Setzen (Verändern des Wertes). Während wir alle Eigenschaften auslesen können, sind manche schreibgeschützt und lassen sich nicht ändern. Wer in AS 2 schreibt, muss sich leider mit einer Altlast von Flash herum schlagen. Denn in älteren Versionen eingeführte Eigenschaften wurden mit einem Unterstrich gekennzeichnet, während neuere ohne verwendet werden. So existieren bei der Button-Klasse die Eigenschaften _width und blendMode, konkret: einButton._width sowie einButton.blendMode. • Ereignisse. Sie definieren, wann die betreffende Klasse etwas tut bzw. wie man mit ihr interagieren kann. Zu einem Button gehört hier klassischerweise der Mausklick, syntaktisch korrekt geschrieben als einButton.onPress. Rein formal lassen sich Ereignisse an dem Präfix on, gefolgt von einer mit einer Binnenmajuskel eingeleiteten Zeichenfolge, erkennen. Zu einem Ereignis gehört i. d. R. mindestens eine Anweisung, die wir normalerweise als Zuweisung einer anonymen Funktion schreiben. Ein konkretes Beispiel könnte lauten: einButton.onPress = function(){Anweisung;}.

30

Kapitel 4  Programmierung und ActionScript

• Methoden. Sie beschreiben, was eine Klasse alles

tun kann. In dieser Hinsicht kommt die ButtonKlasse ausgesprochen bescheiden daher, während einen andere Klassen wie etwa der MovieClip geradezu überschütten mit einer Fülle an Möglichkeiten. Einen Button können wir anweisen, seine Tiefe anzugeben. Dazu müsste man die Methode einButton.getDepth() verwenden. Methoden werden syntaktisch durch nachgestellte runde Klammern () gekennzeichnet.

Nicht jede Klasse verfügt über alle genannten Elemente. So besitzt etwa die Array-Klasse keine eigenen Ereignisse. Trotzdem können wir sie verwenden, indem sie aufgerufen wird, wenn ein zu einer anderen Klasse gehöriges Ereignis eintritt, etwa der Klick auf einen Button. Klassen stellen also keine isolierten Elemente innerhalb eines Scripts dar, sondern sind zumeist aufeinander bezogen, und erst ihre Interaktion untereinander ergibt eine vollständige Applikation. Flash bietet zwei Möglichkeiten, um sie zu verwenden:

• Instanziierung. In den meisten Fällen erstellen wir

eine Kopie einer Klasse bzw. eine Instanz, die über alle Eigenschaften, Ereignisse und Methoden verfügt, die in der betreffenden Klasse festgehalten sind. Das macht dann Sinn, wenn mehr als nur ein Objekt zu einer bestimmten Klasse gehören kann. So sind Schaltflächen ihrer Natur nach sehr gesellig, kommen also i. d. R. mehr als einmal vor. Wenn wir Buttons verwenden, dann handelt es sich daher immer um eine Instanz der Button-Klasse. • Direkter Zugriff. Manche Klassen lassen keine Kopie zu, so dass wir direkt auf sie zugreifen müssen. Das ist etwa bei der Mouse-Klasse, also dem Cursor, der Fall  – verständlicherweise, denn eine Anwendung, die gleichzeitig über mehrere Cursor verfügt, wäre nicht unbedingt sinnvoll und kaum benutzbar. Als Entwickler müssen wir uns nicht überlegen, wann eine Instanz eingesetzt werden soll und wann nicht. Diese Entscheidung nimmt uns Flash ab und informiert in der genannten Hilfe über den richtigen Weg. Dort finden sich zugleich Anwendungsbeispiele für die einzelnen Befehle, die man teilweise per copy-and-paste einfügen und unmittelbar ausprobieren kann. Leider hat die früher gute Flash-Hilfe seit Version 8 insofern stark nachgelassen, als Adobe wohl davon ausgeht,

dass sich nur noch Informatiker mit ihrem Produkt befassen. Einsteiger sind mit der Erläuterung vieler seit dieser Version hinzu gekommener Befehle überfordert, weil der verschwurbelte Beispielcode viele Nebelkerzen abbrennt, anstatt sich auf das Wesentliche zu konzentrieren. Es ist aus didaktischen Gründen eben nicht immer ideal, Programmierer eine Hilfe schreiben zu lassen (Wink an den Hersteller). All diese Elemente verfügen über einen Namen bzw. einen Bezeichner, so dass wir in der Lage sind, per Code darauf zuzugreifen. Wäre beispielsweise die Klasse Array namenlos, könnten wir nie ein neues Array einrichten, um darin Daten aufzunehmen. Aus diesem Grund ist es wichtig, dass wir für Objekte, die wir selbst einrichten, also beispielsweise eine Schaltfläche, keinen Namen verwenden, der ein von ActionScript vorgegebenes Element bezeichnet. Einem Button spaßeshalber den Instanznamen Array zu geben wäre zwar möglich, würde aber Flash in eine gewisse Verwirrung stürzen, da nun zwei verschiedene Dinge mit dem gleichen Namen versehen wären. Die oben erwähnte Eindeutigkeit ginge damit verloren, da Flash nicht mehr in der Lage wäre, genau zu erkennen, wen wir denn mit Array meinten. Glücklicherweise hilft uns das Programm, indem mit Hilfe des sogenannten Syntax-Higlighting oder Coloring automatisch all jene Begriffe farbig hervorgehoben werden, die als reserviert weil von ActionScript bereits verwendet gelten. Dazu gehören die Schlüsselwörter und die Bezeichner. Diese Begriffe dürfen also niemals dazu verwendet, ja geradezu missbraucht werden, um andere als von Flash vorgesehene Elemente zu kennzeichnen. Wir bereits im vorhergehenden Kapitel gesehen, besteht ein Programm nicht nur aus Klassen bzw. entsprechenden Instanzen, so wichtig sie auch sein mögen. Vielmehr existieren als zusätzliche Elemente einer Sprache Operatoren, Anweisungen, Konstanten und Funktionen, die es uns ermöglichen, die in den Klassen zur Verfügung gestellten Objekte zu verändern. Um Code schreiben zu können, stellt Flash einen (eher rudimentären) Editor zur Verfügung, zu finden unter bzw. mit dem Tastenkürzel . Abbildung 7 zeigt den Editor für Flash CS 4. Der Editor umfasst mehrere Fenster mit diversen Elementen (entsprechend der Nummerierung in der vorhergehenden Abbildung):

 

31 Abbildung 7:  Integrierter ASEditor

1. Die ActionScript-Version. 2. Bietet Zugriff auf einzelne Codefragmente, um auf die Schnelle Begriffe, Eigenschaften, Methoden etc einzufügen. 3. Ruft eine mehr als rudimentäre Suchfunktion in einem  – man glaubt es kaum  – modalen Fenster auf. Das ist faktisch wertlos. Statt dessen sollte man über <Suchen und Ersetzen> ein komfortableres Fenster aufrufen. Achtung: das diesem Befehl eigentlich zugeordnete Tastenkürzel <Strg> öffnet das zuvor angesprochene Fensterlein. 4. Zeigt alle Pfade der momentan auf der Bühne befindlichen Objekte an  – sowohl relativ wie auch absolut. 5. Dient zur Beruhigung insbesondere von Anfängern, da dieser Button in den allermeisten Fällen höflicherweise behauptet, Ihr Skript enthalte keine Fehler. 6. Kompiliert das Skript und zeigt zuverlässig Syntax-Fehler an. Leider ist manche Meldung anfangs etwas kryptisch. Beachten Sie, dass mehrere Fehlermeldungen auf einmal nicht unbedingt bedeuten, dass Sie großartigen Mist geschrieben haben. Alle Meldungen ab der 2. Zeile können Folgefehler sein, die automatisch verschwinden, sobald der Fehler in der ersten Zeile korrigiert wurde. Ein Doppelklick auf diese Meldung

springt im Code-Fenster direkt an die fragliche Stelle. Das Kompilieren führt automatisch zu einem Einrücken von Code-Blöcken. Gerade Designer, die zum ersten Mal mit einer Skriptsprache in Berührung kommen, betrachten das Einrücken gerne primär unter einem ästhetischen Aspekt. Tatsächlich dient es jedoch einer logischen Strukturierung, die uns ermöglicht, alleine durch die Position bereits Abhängigkeiten und Zuordnungen zu erkennen. Insofern ist sie ausgesprochen wichtig, um frühzeitig logische Fehler lokalisieren zu können. Da sich das Einrücken automatisch nach dem logischen Aufbau unseres Skriptes richtet, verbietet es sich von selbst, händisch mit der Tab-Taste Zeilen zu verschieben. Dadurch erhalten wir zwar ein ästhetisch optimiertes Ergebnis, dem aber nicht mehr zwangsläufig die Logik des Codes entspricht. 7. Zeigt manchmal Codehinweise. 8. Ermöglicht das Deaktivieren von Debug-Optionen. 9. Bei längeren Skripten kann es nützlich sein, ganze Blöcke quasi ein- und auszuklappen, so, wie Sie es bei einem Dateimanager gewohnt sind, der durch ein vorangestelltes Plus-Zeichen anzeigt, dass hier ein Objektbaum geöffnet oder durch ein MinusZeichen zeigt, dass ein Baum geschlossen werden kann.

32

10. Kommentaroptionen (einzeilig, mehrzeilig, Aufheben des Kommentars). 11. Zauberstab zum automatischen Erzeugen hochkomplexer Skripte  – nein, nicht wirklich, sondern ein überflüssiger Modus, in dem man simple Skriptchen zusammen klicken könnte, wenn hier gezeigt würde, wie. Das verkneifen wir uns jedoch. 12. Optionen für die IDE wie etwa Zeichengröße, Syntaxhighlight, etc. 13. Hilfefunktion, die bis CS 3 brav und sinnvollerweise zu einem markierten Begriff die entsprechende Hilfe anzeigte. Seit CS 4 in der Standardinstallation ein Aufruf der Online-Hilfe, der mitunter über eine Online-Site meldet, es bestehe keine Internet-Verbindung. 14. Auflistung aller Sprachelemente, sortiert nach verschiedenen Kategorien. Nützt vor allem dann etwas, wenn man genau weiß, wonach man sucht, da erst die Kategorie bekannt sein muss, in der der entsprechende Begriff zu finden ist. 15. Zeigt die aktuelle Position innerhalb der gesamten Applikation (also Frame, Zeitleiste und Objekt) an. 16. Da man die unter 14 und 15 genannten Elemente nicht wirklich braucht, kann man sie hier bequem zur Seite schieben, um so für das eigentliche Skript mehr Platz zu erhalten. 17. Endlich – das eigentliche Skriptfenster, in dem Sie Ihren Code schreiben. Am linken Rand befindet sich die Zeilennummerierung, die bei einer Orientierung in längeren Skripten hilfreich ist. Wie in einem normalen Texteditor wird das Script zeilenweise von oben nach unten und von links nach rechts geschrieben. Allerdings entspricht diese Schreibweise nicht zwangsläufig nachher auch der Reihenfolge, in der Ihre Anweisungen ausgeführt werden. Denn schließlich können Sie Bedingungen und Ereignisse definieren, von denen die konkrete Ausführung abhängt. 18. Wohl ob seiner bescheidenen Größe völlig unterschätztes Feature, bietet doch die Pinnadel die Möglichkeit, ein aktives Skript zu fixieren. Damit bleibt der Editor immer auf den Frame ausgerichtet, auf den er festgelegt wurde, selbst dann, wenn Sie zwischenzeitlich auf einen anderen Frame oder ein Objekt klicken. Das ist deshalb wichtig, weil wir aus Gründen der Übersicht meistens in einem oder zwei Frames unsere Skripte schreiben,

Kapitel 4  Programmierung und ActionScript

aber während der Erstellung der Applikation ständig wechselnde Objekte aktivieren. Jeder Wechsel führt dazu, dass unser vorheriges Skript nun nicht mehr sichtbar ist, was gerade bei Anfängern schnell zur Verwirrung führt („Hilfe  – Flash hat mein Skript gelöscht!“). Wie erwähnt wird Code einfach in das Textfenster des Editors geschrieben. Achten Sie dabei auf die richtige ActionScript-Version: unter 1 muss ActionScript 1 & 2 eingestellt sein. Ebenfalls ActionScript 2 muss unter <Einstellungen für Veröffentlichungen> festgelegt sein. Da Sie nun sicher darauf brennen, endlich mal eine Zeile Code zu schreiben, bitte schön: 1. Klicken Sie in der Zeitleiste in einen Frame hinein. Achten Sie darauf, dass in der linken oberen Ecke des Editors „Bild“ steht wie in der vorhergehenden Abbildung zu sehen. 2. Tippen Sie in den Editor: trace(„Hallo Welt“);

3. Klicken Sie <Strg><Enter>. Es poppt ein neues Fenster auf, das Sie mit einem fröhlichen „Hallo Welt“ begrüßt. Wenn Sie <Strg><Enter> drücken, wird die von Ihnen erstellte Flash-Datei in ein Format umgewandelt, das die oben erwähnte virtuelle Maschine verstehen kann. Dabei entsteht eine swf-Datei, die der Flash-Player ausführt. Sie wird standardmäßig im selben Ordner abgespeichert, in dem sich auch die zugehörige fla-Datei befindet. Ihr umfangreicher Code enthält die trace()-Anweisung, die dazu führt, dass Flash ein neues Fenster, das sogenannte Nachrichtenfenster, öffnet, um die innerhalb der Klammern in Anführungszeichen gesetzte Information anzuzeigen. Das Nachrichtenfenster dient uns in der Autorenumgebung von Flash dazu, die Funktionsweise eines Skripts auf die Schnelle zu testen. Es steht später in der fertigen Anwendung nicht mehr zur Verfügung; wir werden im Rahmen der einzelnen Kapitel sehr oft mit diesem Fenster arbeiten. Am Ende der Befehlszeile befindet sich ein Semikolon, mit dem wir Flash mitteilen, wo unsere Zeile endet. Das ist in Flash zwar nicht mehr unbedingt notwendig, da der Abschluss automatisch erkannt wird, aber es schadet auch nicht, zumal andere Skriptsprachen ihrerseits auf dieser Zuwendung bestehen. Um uns keine Ausnahmen merken zu müssen, setzen wir hier ebenfalls ein Semikolon.

 

Als ereignisorientierte Sprache benötigt Flash eben ein Ereignis, um unseren unerwartet spannenden Code ausführen zu können. Da wir kein Ereignis explizit nennen und es sich in vorliegendem Fall um ein dem Bild bzw. Frame zugeordnetes Skript handelt, tritt automatisch ein Ereignis ein, nämlich das Betreten des aktuellen Frames durch den Abspielkopf. Mit dem Abspielkopf ist die rote Markierung der Zeitleiste im aktuellen Frame gemeint. Er ist dafür verantwortlich, dass Flash – Sie erinnern sich: es stellte ursprünglich ein reines Animationsprogramm dar –, überhaupt einen zeitlichen Verlauf abbilden kann. Betritt der Abspielkopf einen Frame, werden alle dort vorhandenen Skripte in den Arbeitsspeicher geladen, die dortigen Anweisungen, soweit möglich, ausgeführt, die benötigten Berechnungen durchgeführt und auf ihrer Basis beispielsweise die Positionen von Objekten neu kalkuliert und erst dann, wenn all diese Prozesse abgeschlossen und ein Screen im Arbeitsspeicher komplett neu gezeichnet wurde, wird er für uns wahrnehmbar dargestellt. Das klingt nach viel Arbeit, die aber i. d. R. im Bruchteil einer Sekunde durchgeführt wird. Grob kann man sagen, dass sich diese Prozesse an der Bildwiederholrate des Films orientieren. Haben wir beispielsweise 25 BpS eingestellt, zeichnet Flash 25 Mal pro Sekunde den Screen neu. Allerdings bedeutet das nicht automatisch, dass alle vorhandenen Skripte ebenfalls neu in den Speicher geladen und ausgeführt werden. Das ist nur dann der Fall, wenn der Abspielkopf loopt, also wenn mindestens zwei Frames vorhanden sind und kein stop()-Befehl im Code existiert. Dann springt der Abspielkopf jedes Mal, wenn er den letzten Frame erreicht hat, zurück zum ersten und spielt wieder alle Frames einschließlich der dort enthaltenen Skripte ab. Existiert dagegen ein Stop-Befehl oder besteht die Anwendung nur aus einem Frame, wird dessen Code ein einziges Mal in den Speicher eingelesen und dort quasi vorrätig gehalten. Unabhängig davon zeichnet Flash die Bühne trotzdem permanent neu. Das macht Sinn, denn es ist ja durchaus möglich, beispielsweise innerhalb eines MovieClips eine mehrere Frames umfassende Animation zu erstellen, die auch ohne Code abspielen soll. Abgesehen von dem Betreten des Frames durch den Abspielkopf müssen alle anderen Ereignisse explizit genannt werden, unabhängig davon, ob es sich dabei um anwendergesteuerte oder automatisch vom Rechner auszuführende Ereignisse handelt. Sie wer-

33

den im Skript einfach in der Form geschrieben, die wir bereits oben kennen gelernt haben: einButton.onPress = function(){  Anweisung; }

Anders formuliert: Für Ihre Anweisungen besteht also nur die Möglichkeit, von einem automatischen Ereignis (Abspielkopf) oder von einem explizit erwähnten Ereignis (user- oder systemabhängig) ausgelöst zu werden. Im erstgenannten Fall werden die Anweisungen zeilenweise in der Reihenfolge des gewünschten Auftretens eingetragen, im zweitgenannten Fall muss einem benannten Objekt mit Hilfe der Dot-Syntax ein entsprechendes Ereignis zugewiesen werden, innerhalb dessen Anweisungs-Block die benötigten Befehle stehen. Dann muss das gewählte Ereignis blau gekennzeichnet sein, da nur vorgefertigte Ereignisse zulässig sind, die als Bezeichner gelten. Über die Färbung können Sie gerade am Anfang Ihrer Programmierkarriere schnell erkennen, ob ein Fehler vorliegt oder nicht. Dasselbe Ereignis kann theoretisch mehrfach geschrieben werden. Ein Skript ist jedoch nicht kumulativ, d. h. nur das zuletzt gefundene Ereignis wird dann auch tatsächlich ausgeführt; alle früheren werden von diesem schlicht überschrieben. Unsinn wäre also: einButton.onPress = function(){  ball.gotoAndPlay(5); }

einButton.onPress = function(){  dreieck.gotoAndStop(1); }

Syntaktisch sind diese Anweisungen korrekt, von der Logik her aber unsinnig, denn der Instanz mit dem Namen einButton wird zweimal dasselbe Ereignis onPress zugewiesen. Dabei wird das erste onPress faktisch durch das zweite ersetzt. Ein Mausklick würde also lediglich dazu führen, dass die Instanz mit dem Namen dreieck zurück auf dessen ersten Frame gesetzt würde. Mit ball dagegen würde nichts geschehen. Sollen trotzdem beide Anweisungen ausgeführt werden, schreibt man sie in ein gemeinsames onPress-Ereignis hinein: einButton.onPress = function(){  ball.gotoAndPlay(5);

34

Kapitel 4  Programmierung und ActionScript

 dreieck.gotoAndStop(1); }

Denken Sie daran, dass dieser Code lediglich bedeutet, dass eine Instanz mit dem Namen einButton auf einen Mausklick reagiert. Wenn Sie beim Testen andächtig vor Ihrer Applikation sitzen, ohne den nach Zuwendung heischenden einButton mit der Maus anzuklicken, passiert nichts. Das ist der Grund, warum ActionScript als ereignisorientierte Sprache gilt. Was wir in unserer Genialität als Skript produzieren, möchten wir der Nachwelt erhalten. Dazu stehen je nach konkretem Einsatzzweck insbesondere folgende Dateitypen zur Verfügung:

• swf. Es klingt schon lustig, wenn man feststellen

muss, dass sich die IT-Geister darüber streiten, was denn mit diesem Kürzel gemeint sei. Steht es nun für „Small Web Format“ oder für „Shockwave Flash“? Richtiger scheint wohl die letztgenannte Variante zu sein, schließlich generiert Flash beim Erstellen einer HTML-Seite mit Code zum Einbetten des Flash-Players einen Bezug auf einen Shockwave-Ordner. Der von Macromedia verwendete Name sollte wohl betonen, dass es sich wie bei dem ursprünglichen Shockwave, einem mit dem Kürzel dcr versehenen Director-Format, um ein Webformat handle. Eine swf-Datei wird

vom Player verwendet und kann theoretisch nicht in der Flash-Autorenumgebung geöffnet werden. Diese Datei ist also Teil beispielsweise Ihrer Website und liegt auf dem Server, auf dem sich die übrigen Dateien wie etwa HTML befinden. Beim Aufruf einer Site im Browser wird diese Datei in den Browser-Cache des Clients geladen (falls das Cachen nicht explizit verhindert wird) und dort ausgeführt. Flash ist insofern eine clientseitige Technik im Gegensatz etwa zu PHP als einer serverseitigen Technik. • fla. Das offene Pendant zu swf steht in der Autoren­ umgebung zur Verfügung. Sie stellt die Arbeitsdatei dar, in der Sie Ihre Flash-Anwendung erstellen. Diese Datei wird nachher nicht auf den Server gestellt, sondern verbleibt auf Ihrer Festplatte, so dass sie bei Bedarf jederzeit wieder geöffnet und geändert werden kann. • as. ActionScript -Code lässt sich auslagern, um ihn in verschiedenen Dateien wieder zu verwenden. Die betreffende Dateiendung as verweist dabei auf eine reine Text-Datei, die sich, falls gewünscht, in beliebigen Programmen, die das txt-Format lesen können, öffnen lassen. Die as-Datei muss nicht auf dem Server abgelegt werden, denn Flash fügt ihren Inhalt beim Erstellen einer swf-Datei automatisch in diese Datei ein.

Framework und Codeorganisation

Die Mehrzahl der Flash-Entwickler hat als fachfremde Quereinsteiger oder als Designer ihren Zugang zum Metier gefunden. Das ist natürlich keineswegs verwerflich, hat jedoch zur Folge, dass die resultierenden Skripte insbesondere in formaler Hinsicht nicht dem entsprechen, was man von einem systematisch entwickelten Code erwarten könnte. Vorgehensweisen, die in der Softwareentwicklung zur Anwendung kommen und auch für Flash-Projekte zumindest ab einer bestimmten Größe geboten wären, sind unbekannt. Das führt nicht selten zu einem recht kunterbunten Gemisch an Code-Bausteinen, was sich spätestens dann als zeitraubendes Ärgernis entpuppt, wenn ein Skript überarbeitet werden muss. Mitunter ist es einfacher und schneller, eine komplette Applikation neu zu entwickeln, als den Code, den man von einem anderen Flash-Entwickler erhalten hat, zu überarbeiten. Dabei reicht es schon aus, einige sehr einfache Regeln zu beachten, um Code übersichtlicher zu gestalten. Dazu gehören beispielsweise Namenskonventionen, auf die wir an späterer Stelle noch ausführlicher eingehen, sowie Vorgaben hinsichtlich der Struktur des zu entwickelnden Programms.

5.1 Skriptarten (Objekt- und Bildskript) Historisch bedingt bietet Flash die Möglichkeit, sowohl ein Objekt- wie ein Bildskript zu schreiben. In Flash 5 und vorher war es unmöglich, ausschließlich mit Bildskripten zu arbeiten, da sich die Objekte nicht ansprechen ließen, um ihnen Ereignisse zuweisen zu können. Statt dessen musste man jedes Objekt markieren und das jeweils benötigte Skript einfügen. Auf

5

den ersten Blick mag das sogar sehr logisch erscheinen. Denn warum sollte man z. B. die Funktionalität einer Schaltfläche nicht unmittelbar an ihr selbst definieren? Würde man denn nicht erwarten, dass sich ein die Funktionalität eines Objekts definierendes Skript auch genau dort befindet, wo wir auf dieses Objekt treffen? Der große Nachteil einer derartigen Vorgehensweise besteht in der Unübersichtlichkeit. Denn je mehr Objekte vorliegen, desto mehr Speicherorte für die Skripte würden existieren. Um beispielsweise die Logik eines Programms zu verstehen, würde es nicht ausreichen, an einer oder zwei Stellen nachzuschauen, sondern man wäre gezwungen, im Extremfall auf Skripte an Dutzenden von Orten zugreifen zu müssen. Hinzu kommt, um es möglichst wertneutral zu formulieren, eine gewisse Geheimniskrämerei von Flash. Denn der Film-Explorer, dessen Aufgabe es eigentlich sein sollte, erschöpfend Auskunft über die Inhalte einer fla-Datei zu geben, weigert sich schon mal gerne, auf einen Blick alle Skripte anzuzeigen. Sind Ihre Code-Schnipsel verschachtelt und beispielsweise Objekten zugewiesen, die sich in anderen Objekten befinden, so bleibt Ihnen nichts anderes übrig, als wild auf alle Symbole zu klicken, bis sich das betreffende Skript offenbart. Nicht viel anders ergeht es Ihnen, wenn Sie mit verschiedenen Szenen arbeiten. Die bereits vor vielen Jahren von Director – zur Erinnerung: Director stammt vom selben Entwickler wie Flash  – praktizierte Lösung mit der Aufnahme von Skripten in die Bibliothek wurde geflissentlich ignoriert. Daher empfiehlt es sich dringend, möglichst vollständig auf derartige Objektskripte zu verzichten bzw. sie auf ein absolutes Minimum zu reduzieren. In den in diesem Buch verwendeten Beispielen sowie den Workshops kommen keinerlei Objektskripte

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

35

36

Kapitel 5  Framework und Codeorganisation Abbildung 8:  Zuweisung eines Objektskripts

zum Einsatz. Dennoch sollten Sie wissen, wie derartige Skripte zustande kommen für den Fall, dass Sie sich in den betreffenden Code einarbeiten müssen. Die Vorgehensweise ist einfach: Markieren Sie das zu skriptende Element, wobei es sich entweder um ein Schaltflächen- oder ein MovieClip-Symbol handeln kann. Der Editor zeigt in der Titelleiste den SymbolTyp an, wie auf Abbildung 8 zu sehen. In das Skriptfenster tragen Sie den gewünschten Code ein, beginnend mit einem Ereignis, z. B.:

Skript geöffnet hat, aber gleichzeitig Objekte markieren möchte. Um das Wechseln zu einem Objekt-Skript zu unterbinden, können Sie das aktive Fenster fixieren. Dazu reicht es, den Frame, in dem sich das gewünschte Skript befindet oder in dem es geschrieben werden soll, anzuklicken. Anschließend klicken Sie auf die Pinnadel am unteren Rand des Skript-Editors, wie in Abbildung 9 gezeigt.

on (press) {

 trace(„Ich bin ein Objektskript“); }

Die Alternative besteht in sogenannten Bildskripten, also Code, der unmittelbar einem Frame zugewiesen wird. Dort lassen sich alle Funktionalitäten festlegen, die benötigt werden. Das gilt selbst für solche Objekte, die erst nach dem aktuellen Frame oder durch eine spätere Interaktion des Anwenders auftauchen. Die Zuweisung eines Skripts funktioniert ähnlich wie bei Objektskripten. Klicken Sie in den gewünschten Frame, wird er im Editor aktiviert und Sie können mit Ihrem Skript beginnen. Die Markierung eines Elements (Objekt oder Frame) legt also fest, welche Art von Skript Sie gerade schreiben. Nun kommt es oft vor, dass man ein

Abbildung 9:  Fixieren des Skriptfensters

5.3  Aufbau eines Skripts

Nun bleibt das gewählte Bildskript immer im Vordergrund, selbst wenn ein beliebiges Objekt oder ein anderer Frame markiert wird. Möchten Sie trotz Fixierung zwischendurch einmal zu einem anderen Skript wechseln, können Sie dazu die Karteireiter am unteren Rand des Editors verwenden. Wird nämlich ein Element markiert, erscheint dort an erster Stelle ein Karteireiter mit Bezug auf dieses Element. Klicken Sie auf den Reiter, wechselt die Ansicht im Editor zu besagtem Element, ohne die vorherige Fixierung aufzuheben. Um zurück zu kehren, müssen Sie nur auf den zweiten Reiter klicken.

5.2 Anzahl der Bildskripte Wie bei der Frage nach dem richtigen Skript-Typ gilt auch hier: Je weniger desto besser. Wenn wir das Bildskript dem Objektskript vorziehen, weil sich damit die Zahl der Skripte reduziert, bevorzugen wir auch hier einen Frame gegenüber mehreren. Im Idealfall befindet sich ein einziges Bildskript in Frame 1 (oder Frame 2) der Szene 1 der Hauptzeitleiste. Die weitere Suche nach Code entfällt dann notwendigerweise automatisch. Dabei ist jedoch zu beachten, dass alle Objekte, die in einem derartigen Skript angesprochen werden, auch im ersten Frame existieren müssen. Es macht z. B. keinen Sinn, in Frame 1 eine Ereigniszuweisung für einen Button zu definieren, der erst in Frame 2 auftaucht. Dieses Ereignis würde von Flash logischerweise ignoriert. Leider gibt das Programm beim Kompilieren keine Fehlermeldung aus, wenn wir versuchen, auf ein nicht-existentes Objekt zuzugreifen. Oft besteht eine Anwendung jedoch aus mehreren Frames, in denen jeweils verschiedene Objekte existieren. So wird ein Film, der einen anderen, größeren Film lädt, einen Preloader benötigen. Die Elemente des Preloaders stehen dann im ersten Frame zur Verfügung, die externen Assets dagegen natürlich noch nicht. Oder es soll zunächst ein extern geladenes Intro abspielen, ehe das Hauptmenü erscheint. In solchen Fällen wird man seine Skripte auf mehrere Frames verteilen. So könnte Frame 1 das Preloader-Skript beinhalten, während in Frame 2 beispielsweise das Hauptskript steht. Das ist so lange unproblematisch, wie man nicht Dutzende von Bildskripten mit jeweils einigen Hundert Zeilen Code verwendet.

37

Eine ähnliche Fragestellung tritt auf, wenn unsere Webseite oder CD-ROM vollständig aus Flash besteht. Dann verwenden wir bekanntermaßen einen modularen Aufbau, der viele einzelne swf-Dateien umfasst. Prinzipiell wäre es möglich, den kompletten Sourcecode in einem einzigen Hauptfilm in dessen erstem Frame unterzubringen. Bei jedem Ladevorgang würde ein erfolgreicher Abschluss geprüft und anschließend den externen Assets die benötigte Funktionalität zugewiesen. In der Praxis erweist es sich jedoch meistens als einfacher, in diesem Fall den Code aufzusplitten. Alles, was sich auf die externen Assets bezieht (mit Ausnahme des Ladevorgangs natürlich), kann in den externen Dateien im ersten Frame definiert werden. Wenn wir dann beispielsweise den Namen eines Objekts ändern, können wir direkt innerhalb derselben Datei den Code anpassen ohne dafür eine zweite Datei, nämlich den Hauptfilm, öffnen zu müssen. Eine Alternative zu den Bildskripten besteht in der Möglichkeit, Code komplett auszulagern und ihn bei Bedarf über eine include- oder import-Anweisung zu laden. Damit gewinnt man insofern an Flexibilität, als einmal entwickelter, funktionierender Code leicht in anderen Projekten einsetzbar wird, ohne dass man gezwungen ist, alles neu zu entwickeln. Voraussetzung für eine derartige Vorgehensweise ist allerdings eine gewisse Erfahrung, da der externe Code so strukturiert sein muss, dass er in beliebige Applikationen hinein passt.

5.3 Aufbau eines Skripts Wenn wir, wie im vorhergehenden Abschnitt empfohlen, tatsächlich alles (oder möglichst viel) in einen einzigen Frame schreiben, schwillt ein derartiges Skript notwendigerweise rasch an. Umso mehr sind wir darauf angewiesen, den Code in eine gewisse Struktur zu zwingen, sonst geht schon alleine aufgrund der Fülle die Übersichtlichkeit wieder verloren. Grob kann man zwei Bereiche innerhalb einer solchen Struktur unterscheiden:

• Meta-Informationen über die Datei insgesamt. • Befehlszeilen, eingeteilt nach ihrer Funktionalität. An erster Stelle innerhalb des Skriptes sollten sich diejenigen Informationen befinden, die Auskunft über

38

die Flashdatei geben. Sie sollten mindestens umfassen:

• Name der aktuellen Datei. Die Namensangabe er-

Kapitel 5  Framework und Codeorganisation

- Beschreibung:

 Hauptmenü in navFrame.htm; http:// www.brightfuture.info/htm/

folgt natürlich vollständig, d. h. zuzüglich der Dateiendung, da sich der Code ja nicht nur in einer fla, sondern auch beispielsweise in einer as-Datei befinden kann. Diese Angabe bezieht sich auf die editierbare Version der Datei. • Name des zugehörigen Projekts. • Verwendungszweck. Möglich sind beispielsweise CD/DVD (Standalone) oder Einsatz im Rahmen einer Webseite, wobei die URL mit anzugeben ist. Hier kann es Sinn machen, eine andere Datei mit anzugeben, von der die aktuelle Flashdatei abhängig ist, etwa wenn ein Menü erstellt wurde, das Sie später in eine html-Seite einbinden. Handelt es sich um eine as-Datei innerhalb einer Code-Bibliothek, entfällt dieser Punkt, da ja der Sinn einer derartigen Bibliothek eben in der Wiederverwendbarkeit besteht. • Kurzbeschreibung. Sie erläutert knapp, welchem Zweck die aktuelle Datei dient. • Autor oder Autoren. Wie im Fall der Dateinamen gilt hier, dass der vollständige, richtige Name angegeben wird. In einem Team mag es zwar momentan lustig klingen, wenn man als Autor „Skriptgott“ angibt, aber weiß man nach einem halben Jahr noch, wer damit gemeint war? • Versionen. Die Versionierung sollte auch im Dateinamen dokumentiert werden, etwa in der Form menuev100, menuev101, menuev200 etc.. In der finalen Version, also derjenigen Version, die unverändert im fertigen Projekt eingesetzt wird, entfernt man das Versionskürzel. Die zuletzt versionierte Datei ist damit logischerweise identisch mit der finalen Datei. Wer mag, kann sie noch mit einem zusätzlichen Suffix wie „fin“ versehen. Zur Versionierungsangabe gehören auch das Änderungsdatum sowie eine Kurzbeschreibung der durchgeführten Modifikationen.

- Zweck:

Solche Meta-Informationen könnten in einer extrem kurzen Form folgendermaßen aussehen:

//-------------- vars –---------------

/* –-------------- Datei –------------

var mRoot:MovieClip = this;

- Film:

 menue.fla

- Projekt

 Relaunch BrightFuture

 enthält Hauptnavigation, lädt Unterseiten html bzw. swf - Autor:

 Arno Kohl

- Versionen:

 v100: 14.12.06

 v101: 15.12.06 korrigierte Pfadangabe Laden externer swf Menüpunkte  v200: 17.12.06 Funktionen Navi in dynmenue.as ausgelagert; final. */

Selbstverständlich müssen diese Informationen als mehrzeiliger Kommentar eingefügt werden, da Flash sie sonst als Befehlszeilen interpretiert und dementsprechend empört Fehlermeldungen ausspuckt. An nächster Stelle stehen alle Zugriffe auf externe Skript-Elemente, die für die weitere Ausführung benötigt werden. Dazu gehören Skripte, die per includeAnweisung geladen werden, was bei der Mehrfachverwendung von Code Sinn macht, sowie der Zugriff auf Klassen. Dazu ein Beispiel: //---------- import, include –-------import flash.display.*;

#include „animation.as“

Damit würden alle Klassen des Display-Pakets und die externe Skriptdatei animation.as geladen. Beachten Sie, dass die include-Zeile mit einem Sonderzeichen (Raute #) eingeleitet und nicht mit einem Semikolon abgeschlossen wird. Die zu ladende Datei muss als String, also innerhalb von Anführungszeichen, übergeben werden. Anschließend erfolgt die Deklaration und gegebenenfalls Initialisierung von Variablen und Arrays: //Zeitleiste //startlevel

var nLevel:Number; //spieler

var sSpieler:String;

5.3  Aufbau eines Skripts

Nicht in jedem Fall ist es notwendig oder möglich, anfangs eine Variable mit dem entsprechenden Wert zu belegen. In dem Fall sollte man sie lediglich deklarieren, also benennen und den Datentyp festlegen. Die Initialisierung, also die Wertzuweisung, kann dann zu einem späteren Zeitpunkt erfolgen. Eine derartige Vorgehensweise setzt voraus, dass die hier angelegten Variablen später funktionsübergreifend bekannt sein müssen. Wenn Sie statt dessen lediglich lokale Variablen innerhalb einer Funktion benötigen, sollten sie auch nur dort angelegt werden. Falls Sie aus Gründen der Übersichtlichkeit doch lieber einen derartigen Variablen-Block am Anfang des Skripts anlegen und konkrete Inhalte erst später zuweisen, dann empfiehlt es sich, nicht mehr benötigte Variablen zu löschen, um belegten Speicherplatz frei zu geben. Etwas anders gestaltet sich der Aufbau, wenn man sehr viel mit Objektvariablen arbeitet. In dem Fall muss natürlich zuerst das Objekt eingerichtet werden, bevor man ihm Variablen und Arrays zuweisen kann. Leider geht unter Flash dann die Möglichkeit, den Datentyp festzulegen, verloren. Die Initialisierung von Variablen würde dann nach der Einrichtung des Objekts ausgeführt. Prinzipiell spielt die Reihenfolge der Deklarationen innerhalb dieses Blockes keine Rolle, solange die Variablen nicht aufeinander bezogen sind. Es kann jedoch nicht schaden, etwa nach Datentypen oder nach Ablauflogik der Applikation vorzugehen. Im Rahmen unserer Workshops werden Sie sehen, das wir uns des Öfteren an folgender durch den zugewiesenen Datentyp vorgegebenen Reihenfolge orientieren: MovieClip, BitmapData, Number, String, Array und der ganze Rest. Das hat den Vorteil, dass man in einem sehr langen Skript von vorne herein ungefähr weiß, an welcher Stelle man beispielsweise die Deklarationen der MovieClip-Variablen finden kann. Danach werden alle Funktionen definiert, gegebenenfalls einschließlich der Ereigniszuweisungen, die ja Funktionsdeklarationen ohne Bezeichner darstellen können. Die Ereignisse greifen ihrerseits oft auf bestehende Funktionen zu, die natürlich ebenfalls in diesem Block definiert werden müssen. Dabei spielt es übrigens i. d. R. keine Rolle, wo dies geschieht, also vor oder nach der Ereigniszuweisung. Denn bevor Flash irgendwelchen Code ausführt, wird er komplett in den Arbeitsspeicher geladen. Damit stehen den Ereignissen auf jeden Fall die an anderer Stelle dekla-

39

rierten Funktionen zur Verfügung. Dieser Codeblock stellt i. d. R. den wichtigsten Bereich dar, denn hier werden die Aktionen des Programms und die Interaktionsmöglichkeiten des Users festgelegt. Dazu ein fiktives Beispiel: //------------- function –------------//Spielerfigur wird auf Bühne eingefügt

function einfuegeSpieler(pWo:MovieClip, pWelcher:String):Void{  var mSpieler = pWo. attachMovie(pWelcher,„spieler“, pWo. getNextHighestDepth());  mSpieler._x = Stage.width/2;

 mSpieler._y = Stage.height/2; }

//Startfunktion legt Startwerte für Spiel fest function init(){  nLevel = 1; }

//Auswahlbutton weist Spieler Spielfigur zu btStart.onPress = function(){

 einfuegeSpieler(mRoot,„rot“); }

Es kann durchaus sinnvoll sein, Ereigniszuweisungen in der init()-Funktion festzulegen anstatt sie unabhängig davon im Funktionsblock aufzuführen. In unserem Beispiel ergäbe sich dann folgende Änderung: //-------------- functions –----------//Spielerfigur wird auf Bühne eingefügt

function einfuegeSpieler(pWo:MovieClip, pWelcher:String):Void{  var mSpieler = pWo. attachMovie(pWelcher,„spieler“, pWo. getNextHighestDepth());  mSpieler._x = Stage.width/2;

 mSpieler._y = Stage.height/2; }

//Startfunktion legt Startwerte für Spiel fest function init(){  nLevel = 1;

40

//Auswahlbutton weist Spieler Spielfigur zu  btStart.onPress = function(){

 einfuegeSpieler(mRoot,„rot“); } }

Der Inhalt bleibt derselbe, nur die Position des KlickEreignisses innerhalb des Codes ändert sich. Jetzt wird es erst nach Aufruf der init()-Funktion definiert. Die Aufgabe dieser Funktion besteht darin, alle vorbereitenden Arbeiten auszuführen, also z. B..:

• Variablen soweit wie möglich konkrete Inhalte zu-

weisen, bevor der Anwender mit der Applikation interagiert. • Benötigte Elemente aufrufen (i. S. von Positionieren und notwendige Aktionen auslösen wie z. B. eine Intro-Animation oder ein externer Ladevorgang). • Benötigte Eigenschaften initialisieren (z. B. die Deckkraft eines Elements auf 0 reduzieren, um es anschließend sukzessive einfaden zu lassen). • Gegebenenfalls den vorhandenen Elementen ihre Funktionalität zuweisen.

Kapitel 5  Framework und Codeorganisation

Manche Entwickler fügen zwischen den Blöcken „functions“ und „start“ noch einen eigenen Ereignis-Block ein, in dem dann das erwähnte onPressEreignis von btStart definiert werden müsste. In dem Fall würde das Ereignis natürlich nicht in die init()-Funktion mit übernommen werden. Wir verzichten jedoch auf diese Form und wählen die oben vorgestellte Struktur, da Ereigniszuweisungen der Definition anonymer Funktionen entsprechen und daher in dem Funktions-Block behandelt werden können. Beachten Sie, dass in den vorliegenden Code-Beispielen aus Gründen der Vereinfachung darauf verzichtet wird, Variablen, die nicht mehr benötigt werden, zu löschen, um Speicher freizugeben (falls es sich nicht um lokale Variablen handelt, die automatisch entfernt werden, vorausgesetzt, sie wurden nicht auf der Hauptzeitleiste eingerichtet). Hier noch mal die gesamte Codestruktur im Überblick: /* Meta-Informationen */

// Import und Include von Klassen und externen Skripten

// Deklaration und gegebenenfalls Initialisierung von Variablen

Ganz zum Schluss wird dann, falls vorhanden, die init()-Funktion aufgerufen, die den Anfangszustand des Films definiert.

// Funktionensdeklarationen

//-------------- start –---------------

Dieses Framework verwendet die AS-Version 2.0 sowie einen prozeduralen Skriptaufbau. Objektorientierte Programmierung bzw. AS 3.0 geht anders vor und ist nicht Gegenstand dieser Einführung.

init();

// Aufruf der init-Funktion und gegebenenfalls weiterer Funktionen

6

Operatoren

Operatoren sind Symbole, mit deren Hilfe Daten und Ausdrücke, also die sogenannten Operanden, verändert werden können. ActionScript kennt zahlreiche Operatoren, von denen uns einige wie die Addition (+) und Subtraktion (-) noch aus der Schulzeit geläufig sind. Diese gehören zu den sogenannten arithmetischen Operatoren, da sie es uns ermöglichen, Rechenoperationen mit Zahlen durchzuführen. In Abbildung 10 sehen Sie zwei Beispiele für die Veränderung von Operanden durch Operatoren. Ihre Anweisung muss nicht notwendigerweise nur einen einzigen Operator fassen, wie das zweite Beispiel in der Abbildung zeigt. Prinzipiell gibt es keine Obergrenze für die Anzahl, solange sich die Anweisung in einer einzelnen Befehlszeile schreiben lässt. Obwohl sich die Operatoren in ihrer Wirkungsweise sehr deutlich voneinander unterscheiden, gibt es einige Gemeinsamkeiten. Allen gemeinsam ist ihr geselliges Wesen, was dazu führt, dass sie notwendigerweise immer mit Operanden auftreten. Die Zahl der Operanden kann sich dabei voneinander unterscheiden, mitunter wird sie sogar verwendet, um die Operanden zu kategorisieren. Wenn ein Operator nur einen Operanden benötigt, spricht man von unären Operatoren. Wer schon etwas

Programmiererfahrung besitzt, dürfte direkt an das häufig verwendete Inkrementieren denken: nZahl++. Dabei wird die Variable nZahl um 1 erhöht. Bei zwei Operanden spricht man von binären Operatoren. Auch sie treten sehr häufig auf, etwa in Form der oben erwähnten Addition: nZahl + 5. Einige wenige Operatoren benötigen sogar mindestens drei Operanden. Man bezeichnet sie als ternäre Operatoren. Ein Beispiel wäre der Konditionaloperator ?:, der im letzten Abschnitt behandelt wird. Oft kommt es vor, dass in einem Ausdruck gleich mehrere Operatoren auftreten. Daher muss es eine Reihenfolge geben, in der sie verwendet werden. Ein simples, wiederum noch dunkel aus der Schulzeit bekanntes Beispiel wäre der Merksatz „Punktrechnung kommt vor Strichrechnung“. Dementsprechend ergibt 15 + 20 * 3 den Wert 75, während ein einfaches Abarbeiten in der Reihenfolge des Auftretens der Operanden den Wert 105 ergibt. Es erfolgt also zuerst die Multiplikation, zu deren Ergebnis dann der vor diesem Ausdruck genannte Operand addiert wird. Jeder Operator besitzt also automatisch einen Vorrang, der festlegt, mit welcher Priorität er gegenüber einem anderen Operator ausgeführt werden soll. Falls gewünscht, können wir auf diesen Vorrang Einfluss nehmen durch einen weiteren Operator, nämlich runde Klammern (): nErgebnis = (15 + 20) * 3;

Abbildung 10:  Operanden und Operatoren

In diesem Fall legen wir fest, dass der Additionsoperator, zuerst zum Zuge kommen soll, obwohl er einen niedrigeren Vorrang besitzt als der Multiplikationsoperator. In komplexen Ausdrücken, die mehrere verschiedene Operatoren umfassen, kann es sogar sinnvoll sein, explizit mit einer derartigen Klammerung Blöcke zu kennzeichnen, um die Lesbarkeit zu erhö-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

41

42

hen (natürlich vorausgesetzt, dass Sie nicht ungewollt den Vorrang fehlerhaft ändern). Auch zwischen Operatoren mit gleichem Vorrang existiert eine Reihenfolge, die sogenannte Assoziativität. Sie legt fest, ob die Operatoren in Leserichtung (Links-Assoziativität) oder entgegen der Leserichtung (Rechts-Assoziativität) ausgeführt werden. Die arithmetischen Operatoren beispielsweise für Addition und Multiplikation werden von links nach rechts, der Zuweisungsoperator dagegen von rechts nach links ausgeführt: nErgebnis = 4 + 5 + 6;

nAddition1 = nAddition2 = nErgebnis;

Zunächst addiert Flash die Zahlen 4 und 5. Dann wird die Summe um den Wert 6 erhöht. Abschließend weist Flash das Ergebnis der entsprechenden Variablen zu. Innerhalb der Addition werden die Berechnungen also von links nach rechts ausgeführt. Im zweiten Beispiel weist Flash den Inhalt von nErgebnis der Variablen nAddition2 und diesen der Variablen nAddition1 zu. Die Arbeitsschritte erfolgen von rechts nach links.

6.1 Zuweisungsoperator Von grundlegender Bedeutung für jede Skript- und Programmiersprache ist der Zuweisungsoperator, also das so bescheiden daher kommende Zeichen „=“. Er weist einer Variablen, einem Array oder einem Objekt einen Wert oder einen Ausdruck zu, z. B.: nZahl = 5;

Die Variable nZahl erhält den Wert 5. Egal, welchen Inhalt sie vor dieser Operation hatte, enthält sie nun den neuen Wert. Dabei gilt allgemein: Der Wert oder der Ausdruck, der auf der rechten Seite des Zeichens = steht, wird dem Element auf der linken Seite zugewiesen. Weitere Beispiele sind: aNamen[3] = „Hans“;

Im Array aNamen wird in die Indexposition 3 (also in die vierte Stelle – s. Kap. 9: Arrays) der Name „Hans“ geschrieben. nZahl1 = 5;

nZahl2 = 10;

Kapitel 6  Operatoren

nErgebnis = nZahl1 + nZahl2;

In der dritten Zeile wird dem Operanden auf der linken Seite nicht einfach ein Wert, sondern ein kompletter Ausdruck, nämlich eine Addition zugewiesen, so dass nErgebnis den Wert 15 erhält. Die Ausdrücke können dabei beliebig komplex sein, solange sie sich als einzelne Befehlszeile schreiben lassen. Mit dem Schlüsselwort function() lassen sich sogar ganze Befehlsblöcke zuweisen, die aus zahlreichen Befehlszeilen bestehen können. Selbst Mehrfachzuweisungen sind, wie wir bereits oben gesehen haben, möglich: nZahl1 = nZahl2 = nZahl3 = 5;

Diese Schreibweise ist identisch mit folgender Notation: nZahl3 = 5;

nZahl2 = nZahl3; nZahl1 = nZahl2;

Wer noch keine Skript- oder Programmiersprachen kennt, muss sich eventuell erst an die Begrifflichkeiten gewöhnen. Denn wir bezeichnen in der Umgangssprache das „=“ als „gleich“, z. B. „nZahl1 ist gleich nZahl2“ (nZahl1 = nZahl2). Tatsächlich ist jedoch eine Zuweisung gemeint, während das Gleichheitszeichen als „= =“ oder gar „= = =“ dargestellt wird (s. u. Vergleichsoperatoren). ActionScript bietet angenehmerweise eine Kurzform für Zuweisungen an, die mit einer arithmetischen oder Bit-Operation (Ausnahme: Komplement ~) verbunden sind. Sie werden am Ende des nachfolgenden Abschnitts bezüglich arithmetischer Operatoren näher erläutert.

6.2 Arithmetische Operatoren Arithmetische Operatoren führen numerische Berechnungen durch. In der simpelsten Form entsprechen sie den Grundrechenarten aus unserer Schulzeit. Ihre Operanden bestehen notgedrungen aus Zahlen, also dem Datentyp Number. In AS 3.0 existieren zusätzlich die numerischen Datentypen Uint und Int. Folgende Tabelle gibt einen Überblick über diese Operatoren.

6.3  Inkrement-/Dekrementoperator

43

Kurzform zugreifen, die als kombinierte Zuweisung bezeichnet wird. So ist:

Operator

Bezeichnung

Assoziativität

+

Addition

links rechts

Subtraktion

links rechts

nZahl1 = nZahl1 + nZahl2;

Multiplikation

links rechts

identisch mit:

Division

links rechts

Modulo

links rechts

nZahl1 += nZahl2;

* / %

Arithmetische Operatoren

Zu ihrer Verwendung muss wohl nicht viel gesagt werden, erfolgt sie doch prinzipiell in derselben Weise, wie wir sie noch aus unserer Schulzeit gewohnt sind. So lässt sich eine simple Addition schreiben als: nAddition = 5 + 4;

Das gleiche gilt natürlich für Subtraktion, Multiplikation und Division. Im Zeitalter der Kundenkarten mag man beim Zeichen % an irgendwelche Sonderkonditionen denken, doch wäre diese Assoziation in unserem Zusammenhang falsch. Gemeint ist nämlich der Modulo-Operator, der jeweils den Restwert einer Division zurück gibt, z. B.: nErgebnis = 5 % 4;

Die Berechnung ergibt 1, da wir die 4 einmal in die 5 hineinpacken können und dabei die 1 übrig bleibt. Dementsprechend erhalten wir bei: nErgebnis = 8 % 4;

als Ergebnis 0, denn wenn wir 8 durch 4 dividieren, bleibt 0 übrig. Dieser Operator, so merkwürdig er auch zunächst erscheinen mag, kann höchst nützlich sein. So ermöglicht er es, sehr einfach heraus zu finden, ob ein Wert eine gerade Zahl darstellt oder nicht. Ergibt die Division durch 2 einen Restwert von 0, liegt eine gerade Zahl vor, andernfalls nicht. Wie alle anderen arithmetischen Operatoren auch, kann Modulo mit Ganz- und mit Fließkommazahlen verwendet werden. Unter einer Ganzzahl versteht man einen Wert ohne Kommastelle (z. B. 5, –396), während eine Fließkommazahl über Werte hinter der Kommastelle verfügt (z. B. 3.14, –225.778). Beachten Sie, dass die Kommastelle entgegen der deutschen Bezeichnung durch einen Punkt gekennzeichnet wird. Im Englischen spricht man von einer float oder floating point. Bei einfachen numerischen Berechnungen, die mit einer Zuweisung verbunden sind, kann man auf eine

Nehmen wir an, nZahl1 enthalte den Wert 10, nZahl2 den Wert 5, dann erhöhen wir in beiden Fällen nZahl1 auf 15. Entsprechend kann man natürlich mit den übrigen Rechenarten verfahren (vgl. die Auflistung in der Tabelle). Zuweisung nZahl1 = nZahl1 + nZahl2

Kombinierte Zuweisung

nZahl1 += nZahl2

nZahl1 = nZahl1 – nZahl2

nZahl1 –= nZahl2

nZahl1  = nZahl1 / nZahl2

nZahl1 /= nZahl2

nZahl1 = nZahl1 * nZahl2

nZahl1 *= nZahl2

nZahl1 = nZahl1 % nZahl2

nZahl1 %= nZahl2

Kurzform Zuweisungsoperator

6.3 Inkrement-/Dekrementoperator Es kommt durchaus häufig vor, dass wir eine Variable jeweils um 1 hoch zählen wollen. Das ist insbesondere dann der Fall, wenn wir Befehle mit Hilfe einer Schleife mehrfach ausführen, etwa um eine Bildergalerie aufzubauen. Wie andere Sprachen auch bietet Flash dafür einen eigenen Operator, den InkrementOperator, an: nZahl = 1; nZahl++;

trace(nZahl);

Ausgabe im Nachrichtenfenster: 2 Zunächst weisen wir der Variablen nZahl den Wert 1 zu. Dann inkrementieren wir sie und lassen uns ihren neuen Wert ausgeben, der 2 entspricht. Die beiden nachgestellten Zeichen ++ sind identisch mit:

44

nZahl += 1;

bzw.: nZahl = nZahl + 1;

Achten Sie bei der Verwendung dieses Operators darauf, kein Leerzeichen zwischen den beiden + einzufügen. Ansonsten geht Flash davon aus, dass sie zweimal den Additions- bzw. Konkatenationsoperator einsetzen wollten, was in dieser Form aber syntaktisch falsch wäre, da zwischen beiden ein Operand fehlt. Sie erhalten dann eine Fehlermeldung. Das Pendant zum Inkrement stellt das Dekrement dar, bei dem jeweils eine 1 subtrahiert wird: nZahl = 1; nZahl--;

trace(nZahl);

Ausgabe im Nachrichtenfenster: 0 Da wir in beiden Beispielen den Operator dem Operanden nachgestellt haben, spricht man von einem Post-Inkrement bzw. Post-Dekrement. Eine Alternative dazu wäre das Prä-Inkrement bzw. Prä-Dekrement, bei dem zuerst der Operator, gefolgt vom zugehörigen Operanden auftritt:

Kapitel 6  Operatoren

In der zweiten Zeile inkrementieren wir die Variable. Da es sich jedoch um ein Post-Inkrement handelt, gibt Flash mit der trace()-Anweisung zuerst nur den vorher gültigen Wert, also die 1, zurück. Erst dann wird die Addition ausgeführt, so dass wir in der letzten Zeile den neuen, um 1 erhöhten Wert erhalten. Umgekehrt läuft die Berechnung im alternativen Fall ab: nZahl = 1;

trace(++nZahl); trace(nZahl);

Ausgabe im Nachrichtenfenster: 2 2 Durch das Prä-Inkrement addiert Flash zuerst eine 1 und gibt dann schon in der zweiten Zeile den neuen Wert zurück, also eine Zeile früher als im vorhergehenden Beispiel. Das gleiche funktioniert natürlich auch mit Dekrement. Am häufigsten verwendet man Post-Inkrement und Post-Dekrement, aber in den meisten Fällen ist es schlicht Geschmackssache, welcher Variante Sie den Vorzug geben wollen.

nZahl = 1;

6.4 Stringoperatoren

trace(nZahl);

Das Pluszeichen eignet sich nicht nur für Berechnungen mit Zahlen, sondern kann auch verwendet werden, um Strings, also beliebige Zeichenfolgen, miteinander zu verknüpfen. In dem Fall spricht man von einer Konkatenation bzw. dem Konkatenationsoperator. Beispielsweise ergibt der Befehl trace(„a“+„b“+„c“) im Nachrichtenfenster „abc“. Die Zeichen „a“, „b“ und „c“ werden einfach aneinander gehängt. Anstelle von Zeichen können natürlich auch Variablen, die Strings enthalten, auf die gleiche Weise miteinander verknüpft werden:

++nZahl;

Ausgabe im Nachrichtenfenster: 2 Das Ergebnis entspricht zunächst wenig überraschend demjenigen des Post-Inkrements. Tatsächlich läuft jedoch der Additions-Vorgang anders ab: Beim PostInkrement verwendet Flash zuerst die Variable mit ihrem alten Wert und erhöht ihn dann, während das Prä-Inkrement zuerst die Addition ausführt und dann das Ergebnis zurück gibt. Dieser vielleicht kryptisch anmutende Satz möchte Ihnen nur folgendes vermitteln: nZahl = 1;

trace(nZahl++); trace(nZahl);

Ausgabe im Nachrichtenfenster: 1 2

sVorname = „Zaphod“;

sNachname = „Beeblebrox“;

sName = sVorname + sNachname; trace(sName);

Im Nachrichtenfenster zeigt Flash „ZaphodBeeblebrox“. Das fehlende Leerzeichen bei der Ausgabe lässt sich leicht einfügen, indem man die Zuweisung von sName entsprechend ändert:

6.4  Stringoperatoren

sName = sVorname + „ “ + sNachname;

Nun ergibt der trace()-Befehl das lesbarere Ergebnis: „Zaphod Beeblebrox“. Mitunter ist es notwendig, den Konkatenationsund den Additionsoperator gleichzeitig zu verwenden, etwa wenn man einen Highscore in einem Spiel berechnen und ausgeben möchte. Dann muss Flash explizit mitgeteilt werden, welche Funktion das Pluszeichen übernehmen soll. Angenommen, wir wollen in einem Textfeld den aktuellen Punktestand zuzüglich von Bonuspunkte ausgeben:

45

cherweise nichts und Flash verwertet den kompletten Ausdruck wieder als String: tPunkte.text = „500“;

nPunkte = tPunkte.text; nBonus = 50;

tHighscore.text = „Punkte: “ + (nPunkte + nBonus);

Um die jetzt fehlerhafte Ausgabe von „50050“ zu korrigieren, müsste man entweder innerhalb der Klammer eine temporäre Typumwandlung vornehmen:

nPunkte = 500;

tHighscore.text = „Punkte: “ + (Number(nPunkte) + nBonus);

tHighscore.text = nPunkte + nBonus + „ Punkte“;

Oder man definiert alternativ bereits nPunkte bei der Initialisierung mit dem gewünschten Datentyp:

Im Textfeld erscheint erwartungsgemäß: „550 Punkte“. Die Werte in den beiden Variablen nPunkte und nBonus werden als Zahlen addiert und anschließend mit dem String „ Punkte“ verknüpft. Flash erkennt automatisch „ Punkte“ als String und verwendet den Konkatenationsoperator anstelle des zuvor benutzten Additionsoperators. Ein ganz anderes Ergebnis ergibt sich jedoch, wenn wir die Reihenfolge umkehren:

nPunkte = Number(tPunkte.text);

nBonus = 50;

tHighscore.text = „Punkte: “ + nPunkte + nBonus;

Nun zeigt das Textfeld: „Punkte: 50050“. Für einen Spieler mag das ein schmeichelhafter Punktestand sein, aber er entspricht nicht dem aus Programmiersicht erhofften Ergebnis. Sobald Flash auf den Konkatenationsoperator stößt, wird jedes weitere Auftreten des Pluszeichens in der gleichen Weise interpretiert, selbst dann, wenn als Datentyp Zahlen anstatt Strings auftreten. Flash führt eine temporäre Typumwandlung durch, so dass aus einer Zahl ein String wird. Um trotzdem eine korrekte Berechnung zu erhalten, muss der Teilausdruck, der die Zahlen umfasst, geklammert werden:

Bei beiden Beispielen gehen wir von der einfachen Annahme aus, dass sich im Textfeld ein String befindet, der ohne Weiteres in eine gültige Zahl umgewandelt werden kann. Wir erhalten jeweils wieder die gewünschte Angabe: „550 Punkte“. Die naheliegende Überlegung, zu einer Konkatenation mit dem Pluszeichen müsse es auch eine Subtraktion mit dem Minuszeichen geben, trifft (leider) nicht zu. Denn das Minuszeichen wird immer als arithmetischer Operator gewertet und erwartet zwei Zahlen als Operatoren. Liegt auch nur in einem Fall ein anderer Datentyp vor, gibt ActionScript NaN zurück: sString1 = „Zaphod“; sString2 = „aphod“;

trace(sString1 – sString2);

Im Nachrichtenfenster erscheint ein NaN, d. h. „Not a Number“, so dass keine Berechnung erfolgen kann. Lassen sich die verwendeten Operanden allerdings korrekt (temporär) in den Datentyp Number umwandeln, dann nimmt Flash sie automatisch vor und führt eine Berechnung durch:

tHighscore.text = „Punkte: “ + (nPunkte + nBonus);

sPunkte = „500“;

Jetzt entspricht die Textausgabe wieder der anfangs erzielten Variante: „550 Punkte“. Sollte allerdings mindestens eine der Variablen nPunkte und nBonus einen String enthalten – etwa weil ihr Inhalt aus einem anderen Textfeld ausgelesen wurde –, dann nützt auch die Klammerung verständli-

trace(sPunkte – nBonus);

nBonus = 50;

Ausgabe im Nachrichtenfenster: 450 Aus dem String „500“ extrahiert Flash per Typumwandlung eine korrekte Zahl, mit der eine mathemati-

46

Kapitel 6  Operatoren

sche Operation erfolgen kann. So bequem diese Vorgehensweise sein mag, so unsauber ist sie auch. Denn derartiger Code erweist sich als schwer lesbar. Wenn Sie also explizit eine Berechnung durchführen wollen, dann sollten Sie Flash auch mitteilen, dass eine temporäre Typumwandlung gewünscht wird, indem Ihr String als Number zu verwenden ist. Korrekter würde dann der vorhergehende Code lauten:

also wahr oder falsch sind. Folgende Tabelle gibt einen Überblick über derartige Operatoren. In der einfachsten Form können wir mit dem trace()-Befehl einen Vergleich durchführen:

sPunkte = „500“;

Wir weisen Flash an, zu ermitteln, ob die Zahl 3 kleiner ist als die Zahl 5. Da dies zutrifft, erhalten wir als Ergebnis true. Machen Sie die Gegenprobe:

nBonus = 50;

trace(Number(sPunkte) – nBonus);

Auch das sukzessive Erweitern eines Strings ist möglich: sText = „abc“; sText += „d“; trace(sText);

An den ursprünglich definierten String „abc“ wird der Buchstabe „d“ gehängt. Daraus lässt sich beispielsweise ein Schreibmaschineneffekt basteln, bei dem im gleichen zeitlichen Abstand immer mehr Buchstaben auftauchen. Zwar kennt ActionScript noch einige andere String-Operatoren wie add, eq etc. doch gelten diese als veraltet und sollten nicht mehr verwendet werden.

trace(3 < 5);

Ausgabe im Nachrichtenfenster: true

trace(5 < 3);

Ausgabe im Nachrichtenfenster: false Vertauschen wir die Zahlen miteinander, trifft der an trace() übergebene Ausdruck nicht mehr zu, so dass Flash im Nachrichtenfenster false ausgibt. Der Operator < vergleicht also zwei Operanden miteinander, wobei der erste kleiner sein muss als der zweite. So ähnlich funktionieren auch die Operatoren >= und <=, nur dass sie bereits dann true zurück geben, wenn der genannte Vergleichswert erreicht, aber noch nicht unbedingt überschritten wurde. nZahl = 6;

trace(nZahl >= 2 * 3);

6.5 Vergleichsoperatoren

Ausgabe im Nachrichtenfenster: true

Die Vergleichsoperatoren ermöglichen naheliegenderweise Vergleiche. Verglichen werden Werte oder Ausdrücke miteinander, die immer true oder false,

Wir weisen der Variablen nZahl den Wert 6 zu und vergleichen sie anschließend mit dem Ergebnis der Multiplikation von 2 mit 3. Der trace()-Befehl gibt true zurück, da nZahl mindestens so groß ist wie

Operator

Bezeichnung

Bedeutung

Assoziativität

<

kleiner als

true, wenn der erste Operand kleiner als der zweite Operand

links rechts

größer als

true, wenn der erste Operand größer als der zweite Operand

links rechts

kleiner gleich

true, wenn der erste Operand kleiner oder gleich dem zweiten Operanden

links rechts

größer gleich

true, wenn der erste Operand größer oder gleich dem zweiten Operanden

links rechts

gleich

true, wenn der erste Operand gleich dem zweiten Operanden

links rechts

nicht gleich

true, wenn der erste Operand nicht gleich dem zweiten Operanden

links rechts

strikte Gleichheit

true, wenn Wert und Datentyp der Operanden gleich

links rechts

>

<= >= == !=

=== !==

strikte Ungleichheit true, wenn Datentyp der Operanden nicht gleich

Vergleichsoperatoren

links rechts

6.5  Vergleichsoperatoren

47

das Ergebnis der Berechnung. Würden wir statt dessen den trace()-Befehl ändern in:

Sie wollten eine Zuweisung anstelle eines Vergleichs ausführen:

trace(nZahl >= 2 * 2);

nZahl = 10;

In dem Fall ist das Ergebnis ebenfalls true, weil nZahl zwar nicht gleich, aber größer als das Ergebnis der Multiplikation ist. Übrigens lassen sich auf diese Weise auch Strings vergleichen, denn sie werden programmintern über einen Zahlencode verwaltet. Beim Vergleich zweier Strings schaut Flash nach, welcher Zahlencode größer oder kleiner ist:

if (nZahl == 20) {

 trace(„trifft zu“); }

trace(„nZahl: „+nZahl);

Ausgabe im Nachrichtenfenster: nZahl: 10

Da der Zahlencode der Majuskel „H“ höher ist als derjenige von „B“, gibt der Vergleich false zurück. Verwenden wir statt des Vergleichsoperators < (kleiner als) den Operator > (größer als), erhalten wir dagegen ein true:

Wir speichern in einer Variablen die Zahl 10 und fragen anschließend, ob ihr Wert der Zahl 20 entspricht. Nur wenn das zutrifft, soll Flash im Nachrichtenfenster die Information „trifft zu“ ausgeben. Da das nicht der Fall ist, erfolgt auch diese Ausgabe nicht. Unabhängig davon lassen wir uns am Ende des Skripts den konkreten Inhalt von nZahl anzeigen, der unverändert 10 beträgt. Wenn wir versehentlich den Zuweisungs- statt des Gleichheitsoperators verwenden, sieht die Sache anders aus:

trace(„Hans“ > „Bernd“);

nZahl = 10;

Ausgabe im Nachrichtenfenster: true

 trace(„trifft zu“);

trace(„Hans“ < „Bernd“);

Ausgabe im Nachrichtenfenster: false

Eine derartige Operation kann beispielsweise dann sinnvoll sein, wenn Sie Strings, etwa Benutzernamen, in einer bestimmten Weise sortieren möchten. Der Gleichheitsoperator == gibt darüber Auskunft, ob die Werte zweier Operanden miteinander identisch sind: trace(2 * 5 == 4 * 2.5);

Ausgabe im Nachrichtenfenster: true In unserem Fall ergibt die Berechnung auf der linken und auf der rechten Seite des Vergleichsoperators dasselbe Ergebnis, nämlich 10. Dadurch lautet unsere Anweisung: trace(10 == 10);

Da es zutrifft, dass beide Werte miteinander identisch sind, erhalten wir im Nachrichtenfenster das erwähnte true. Für Anfänger erweist sich dieser Operator als etwas gewöhnungsbedürftig und man ist mitunter versucht, an seiner Stelle den Zuweisungsoperator zu verwenden. Das hat jedoch fatale Konsequenzen, weil Flash fälschlicherweise davon ausgeht,

if (nZahl = 20) { }

trace(„nZahl: „+nZahl);

Ausgabe im Nachrichtenfenster: trifft zu nZahl: 20 Flash meint, wir wollten in der zweiten Zeile den Inhalt von nZahl ändern und ersetzt daher den Wert 10 durch 20. Infolgedessen wird nun der trace()-Befehl in der if-Bedingung ausgeführt und wir erhalten zum Schluss als neuen Inhalt von nZahl den Wert 20 ausgegeben. Durch diesen scheinbar kleinen Fehler kann sich der komplette Ablauf eines Skriptes ändern. Leider gibt es keine automatische Möglichkeit, einen solchen fatalen Fehler zu unterbinden bzw. von der Flash-IDE als Fehler anzeigen zu lassen. Ebenfalls zu beachten gilt die Art, in der Werte vorliegen. So werden in Flash Arrays und Objekte per Referenz und nicht einfach nach als Inhalt vorliegenden Werten verglichen. Nehmen wir folgendes Beispiel: aEins = [1, 2, 3]; aZwei = [1, 2, 3];

48

Kapitel 6  Operatoren

if (aEins == aZwei) {

Ausgabe im Nachrichtenfenster: false

}

Der Wert NaN liefert immer false zurück, egal in welcher Form die Abfrage erfolgt. Statt dessen müssen Sie hier die globale Funktion isNaN verwenden:

 trace(„gleich“);

Wir richten zwei Arrays ein, die exakt die gleichen Zahlen speichern. Dann fragen wir, ob beide Arrays einander gleich sind. Aus dem beharrlichen Schweigen von Flash nach dem Ausführen des Skripts müssen wir davon ausgehen, dass dem entgegen unserem Augenschein nicht so ist. Zwar sind die Zahlenwerte identisch, aber sie liegen unabhängig voneinander vor. Es besteht keinerlei Verknüpfung zwischen beiden Arrays, sie werden von Flash daher als verschieden bzw. nicht gleich interpretiert. Erst wenn ein Array auf das andere verweist, ändert sich das Ergebnis: aEins = [1, 2, 3]; aZwei = aEins;

if (aEins == aZwei) {  trace(„gleich“); }

sZahl = „b5a“

trace(isNaN(sZahl))

Ausgabe im Nachrichtenfenster: true Da es stimmt, dass sich aus dem String sZahl keine gültige Zahl extrahieren lässt, lautet der Rückgabewert true. Wir haben hier in den meisten Beispielen mit einem simplen trace()-Befehl die Vergleiche ausgeführt. Insofern ein Vergleich prinzipiell zu zwei verschiedenen Ergebnissen führen kann, macht er aber am ehesten innerhalb einer if-Bedingung oder einer Schleife Sinn, um den weiteren Ablauf der Anwendung zu steuern.

Ausgabe im Nachrichtenfenster: gleich Das Array aZwei enthält nun eine Referenz auf das Array aEins, die wir mit Hilfe des Zuweisungsoperators herstellen. Wir können zwar momentan keinen Unterschied zur vorherigen Variante erkennen, da Flash, falls wir mit trace() auf die jeweiligen Inhalte zugreifen würden, dieselben Zahlen ausgeben würde. Dennoch verweisen in diesem Fall beide Arrays auf dasselbe Objekt bzw. auf dieselben Inhalte und es wird dementsprechend der abhängige trace()-Befehl ausgeführt. Dass beide Varianten in der Tat nicht identisch miteinander sind und Flash sehr wohl recht hat, sie verschieden zu behandeln, werden wir später im entsprechenden Kapitel über Variablen bzw. Arrays noch sehen. Last not least ist eine Besonderheit zu beachten, wenn Sie herausfinden wollen, ob ein String, der beispielsweise aus einem Eingabetextfeld extrahiert wird, keine gültige Zahl darstellt (z. B., um bei einer fehlerhaften Eingabe eine entsprechende Rückmeldung an den User zu geben). In einem derartigen Fall können Sie nicht mit dem Wert NaN vergleichen. Falsch wäre also: sZahl = „b5a“;

trace(sZahl ==„NaN“);

6.6 Logische Operatoren Die logischen Operatoren versetzen uns in die Lage, Boolsche Werte und/oder mehrere Ausdrücke in Vergleichen zu kombinieren. Flash stellt drei derartige Operatoren zur Verfügung, wie in der Tabelle zu sehen. Operator Bezeichnung Bedeutung

Assoziativität

&&

Logisches Und

true, wenn alle Ope- links rechts randen true ergeben

||

Logisches Oder

true, wenn mindes-

!

Logisches Nicht

true, wenn ein Ope- links rechts rand nicht true ist

tens einer der Operanden true ergibt

links rechts

Logische Operatoren

Die Verwendung des logischen Und ist immer dann sinnvoll, wenn Sie testen wollen, ob mindestens zwei Bedingungen zutreffen. Nehmen wir beispielsweise an, dass nur dann ein besonderer Cursor eingeblendet werden soll, wenn die horizontale Mausposition größer als 50 Pixel und kleiner als der rechte Rand minus

6.6  Logische Operatoren

50 ist  – auf diese Weise würde rechts und links ein gleich großer Randabstand von 50 Pixel definiert. Die betreffende Abfrage könnte lauten: if(_xmouse> 50 && _xmouse<Stage. width-50){

Durch den Schlüsselbegriff if weisen wir Flash an, zu kontrollieren, ob der Ausdruck in der Klammer true ergibt. Ist das der Fall, wird der abhängige Code, der hier aus Gründen der Vereinfachung fehlt, ausgeführt, andernfalls nicht. Indem wir in der Klammer ein logisches Und verwenden, müssen beide Ausdrücke (_xmouse > 50 UND _xmouse < Stage.width – 50) zusammen zutreffen, also true ergeben, damit die gesamte Bedingung wahr wird. Wir können uns ein sehr einfaches Beispiel anschauen, bei dem die Mausbewegung kontrolliert wird: this.onMouseMove = function() {

 if (_xmouse> 50 && _xmouse<Stage. width-50) {  trace(true); } else {

 trace(false); } };

Bei jeder Bewegung der Maus schaut Flash nach, ob sie sich horizontal innerhalb der angegebenen Koordinaten befindet (d. h. rechter und linker Rand von jeweils 50 Pixel). Ist das der Fall, erhalten wir im Nachrichtenfenster die Meldung true, ansonsten false. Das logische Oder dagegen wird dann verwendet, wenn wir kontrollieren wollen, ob mindestens eine von mehreren Bedingungen erfüllt ist. Wenn wir z. B. eine Animation skripten, bei der ein Objekt seine Bewegungsrichtung umkehrt, sobald es den linken oder den rechten Rand überschreitet, dann erweist sich der genannte Operator als sinnvoll: if(ball._x < 0 || ball._x > Stage. width){

Unsere Bedingung überprüft, ob die horizontale Position des Objekts mit dem Instanznamen ball kleiner als 0 oder größer als die Gesamtbreite der Bühne bzw. des Screens ist. Trifft das zu, wird der abhängige Code ausgeführt, sonst nicht. Beachten Sie, dass die Bedingung, die ein logisches Oder verwendet, anders als beim logischen Und bereits true ergibt, wenn der

49

erste Ausdruck wahr ist. Flash prüft dann den zweiten bzw. alle folgenden Ausdrücke nicht mehr. Auch wenn wir uns bei den bisherigen Beispielen nur auf zwei Ausdrücke innerhalb der if-Bedingung beschränkt haben, kann ihre Anzahl prinzipiell beliebig groß sein. Das logische Oder enthält eine kleine Stolperfalle, die gerne zu einer fehlerhaften Verknüpfung der zu prüfenden Operanden verführt. So könnte man versucht sein, eine Abkürzung für folgenden Code zu finden: nZahl = 5;

if(nZahl == 4||nZahl == 6){  trace(„true“); }

Wir speichern den Wert 5 in einer Variablen und fragen dann, ob diese Variable den Wert 4 oder 6 enthält. Falls ja, soll im Nachrichtenfenster die Ausgabe „ist gleich“ erscheinen. Da das nicht der Fall ist, schweigt Flash bei der Ausführung korrekterweise. Die erwähnte Abkürzung könnte lauten: nZahl = 5;

if(nZahl == 4||6){  trace(„true“); }

Ausgabe im Nachrichtenfenster: true Anstatt im Vergleich jedes mal nZahl == einzutragen, verwenden wir den Ausdruck einmal, während wir nach dem Oder nur noch den zu prüfenden Wert schreiben. Leider gibt Flash dann  – korrekterweise  – immer true aus. Denn zunächst wird nZahl == 4 getestet, was false ergibt. Anschließend prüft Flash die Zahl 6 als eigenständigen Ausdruck, nicht jedoch das von uns gemeinte nZahl == 6. Da jede Zahl, die ungleich 0 ist, als Bool’scher Wert true ergibt, erhalten wir als Ergebnis des gesamten Vergleichs innerhalb der runden Klammern true und die abhängige trace()Anweisung wird ausgeführt. Sie können das testen, indem Sie komplett jeden Bezug auf nZahl löschen: if(4||6){

 trace(„true“); }

Ausgabe im Nachrichtenfenster: true

50

Kapitel 6  Operatoren

Wenn wir also nZahl testen wollen, gibt es keine Abkürzung: Wir müssen in jedem Ausdruck, der mit einem logischen Operator verknüpft wird, die gewünschte Variable aufführen. Die Auswertung von Vergleichen mit Hilfe der logischen Operatoren Und sowie Oder lassen sich in sogenannten Wahrheitstabellen darstellen, die das Ergebnis in Abhängigkeit des Wahrheitswertes der einzelnen Operatoren enthalten. Folgende beide Tabellen zeigen die Werte für das logische Und sowie das logische Oder.

Wir weisen einer Variablen den Wert true zu. In der Bedingung testen wir, ob diese Variable den Wert false enthält, was momentan jedoch nicht der Fall ist. Daher ignoriert Flash die abhängige trace()Anweisung und gibt uns nur den Befehl in der letzten Zeile aus, in der wir uns den Inhalt der Variablen anzeigen lassen. Eine Änderung der Variablen ändert auch den Programmablauf:

Operand 1

Operand 2

Auswertung

}

true

true

true

trace(schalterEin);

false

true

false

true

false

false

false

false

false

Ausgabe im Nachrichtenfenster: Das Licht ist ausgeschaltet false

Wahrheitstabelle logisches Und

Zu lesen ist eine derartige Tabelle folgendermaßen: Wenn der erste und der zweite Operand true ergeben, erhalten wir für den gesamten per && verknüpften Ausdruck ebenfalls true. Ist dagegen der erste oder der zweite Operand false, ergibt der gesamte Ausdruck false. Das gilt natürlich erst recht für den Fall, dass beide Operanden false sind. Operand 1

Operand 2

Auswertung

true

true

true

false

true

true

true

false

true

false

false

false

Wahrheitstabelle logisches Oder

Erheblich schlichter gestaltet sich die Verwendung des logischen Nicht:

schalterEin = false; if(!schalterEin){

 trace(„Das Licht ist ausgeschaltet“);

Da die Variable von Anfang an den Wert false enthält, trifft die if-Bedingung zu und Flash führt die trace()-Anweisung sowohl innerhalb wie außerhalb der Abfrage aus. Dieser Operator ermöglicht es auch, den Bool’schen Wert einer Variablen umzukehren: schalterEin = true;

schalterEin = !schalterEin; trace(schalterEin);

Ausgabe im Nachrichtenfenster: false Wir weisen schalterEins den Wert true zu und kehren sie in der zweiten Zeile in ihr Gegenteil um. Dadurch gibt uns Flash in der trace()-Anweisung der dritten Zeile den Wert false im Nachrichtenfenster aus. Auf diese einfache Weise kann man beispielsweise einen Kippschalter realisieren, also ein Objekt, das genau zwei Zustände kennt. Das funktioniert natürlich nur mit Bool’schen Werten; würde unsere Variable Zahlen, Strings oder andere Datentypen enthalten, wäre eine solche Umkehrung sinnlos.

schalterEin = true; if(!schalterEin){

 trace(„Das Licht ist ausgeschaltet“);

6.7 Bit-Operatoren

trace(schalterEin);

Mit den Bit-Operatoren stellt Flash eine Möglichkeit zur Verfügung, um auf der Ebene der Bits Zahlenmanipulationen durchzuführen. Das ist z. B. interessant, um in bestimmten Fällen eine schnellere Ausführung

}

Ausgabe im Nachrichtenfenster: true

6.8  Sonstige

51

Ihres Codes zu erreichen. Allerdings gehören sie zu den fortgeschrittenen Konzepten, die wir an dieser Stelle nicht näher behandeln wollen. Sie werden ihnen ohnehin höchstens in Ausnahmefällen begegnen, die tägliche Arbeit ist davon sicherlich nicht betroffen.

6.8 Sonstige Flash verfügt noch über eine ganze Reihe weiterer Operatoren, von denen Ihnen einige permanent über den Weg laufen werden, andere dagegen fristen eher ein Exotendasein. Die Tabelle vermittelt einen Überblick. Operator

Bedeutung

,

Aufzählung

.

Zugriff auf Objekteigenschaften, Ereignisse, Methoden

()

Gruppierung von Elementen Kennzeichnung von Funktionen/Methoden Spezifizierung von Schleifen und Bedingungen

{}

Definition von Anweisungs-Blöcken Initialisierung von Objekten

[]

Initialisierung von und Zugriff auf Arrays Auswertung eines Ausdrucks zur Referenzierung eines Objekts

new

Instanziierung von Klassen/Objekten

typeof

Ermittlung von Datentypen

instanceof

Ermittlung von Klassenzugehörigkeit

?:

Konditional-Operator, Kurzform für eine Bedingung

Weitere Operatoren

Nachfolgend erhalten Sie einen kurzen Einblick in die genannten Operatoren entsprechend der Reihenfolge in der Tabelle. Einige werden an anderer Stelle ausführlicher behandelt. Schlicht und undramatisch tritt das Komma auf. In gewohnter Weise dient es dazu, Ausdrücke aufzuzählen, die je für sich ausgewertet werden. Beispiele wären: var mClip1:MovieClip, mClip2:MovieClip; for(var i:Number = 0, j:Number = 0; i < 5; i++, j+= 2){

In der ersten Zeile definieren wir zwei Variablen vom Datentyp MovieClip, in der Zeile darunter zwei Schleifen mit verschiedenen Zählvariablen. Der Komma-Operator tritt in beiden Fällen mit zwei Operanden auf, die von links nach rechts ausgewertet werden. Der Punkt dient dazu, eine Objekthierarchie abzubilden und den Zugriff auf untergeordnete Elemente zu gestatten. In mancher Hinsicht gleicht er dem Backslash bei der Angabe von Dateipfaden. Dazu einige Beispiele: auto.auspuff.aQualm.play(); auto.onPress = function(){ auto._x = 125;

auto.animieren();

In der ersten Zeile sprechen wir einen verschachtelten MovieClip mit dem Instanznamen auto an. Er enthält einen anderen MovieClip namens auspuff, in dem sich seinerseits ein MovieClip aQualm befindet. Dessen Zeitleiste starten wir durch den Befehl play(). Ähnlich würde ein Pfad aussehen, wenn wir beispielsweise auf der Festplatte d: eine Datei im Ordner works mit dem Unterordner flash ansprechen wollten, z. B.: d:\works\flash\operatoren.fla. Die folgende Zeile legt ein Ereignis namens onPress fest, das dem durch den Punkt-Operator vorangestellten Objekt auto zugeordnet wird. Dieses Ereignis kann also nur zusammen mit dem MovieClip auto auftreten. Danach greifen wir auf eine Eigenschaft von auto zu, in diesem Fall auf dessen horizontale Position. In der letzten Zeile wird eine selbst definierte Methode des besagten MovieClips aufgerufen. Bei dem genannten Operator muss auf der linken Seite immer ein Objekt, auf der rechten eine zugehörige Eigenschaft (einschließlich weiterer Objekte wie im Fall des verschachtelten MovieClips), Methode oder Ereignis stehen. Eine derartige Punkt-Syntax zeichnet übrigens neben ActionScript auch die meisten modernen Skriptsprachen und natürlich Programmiersprachen aus. Mit dem Gruppierungs-Operator, der in Form runder Klammern Verwendung findet, kann die Reihenfolge der Auswertung von Ausdrücken festgelegt werden. Darin gleicht er den Klammern, wie wir sie aus der Schulmathematik kennen: nErgebnis = 2 * (5 + 4);

52

Die Berechnung der Addition hat in diesem Fall Vorrang vor der Multiplikation. Ohne die Klammern würde zuerst multipliziert, anschließend addiert, was zu einem anderen Ergebnis führt. Befindet sich innerhalb eines Klammer-Ausdrucks ein weiterer Klammer-Ausdruck, so hat dieser Vorrang vor allen anderen. Programmierspezifisch ist der Einsatz von Klammern, um Funktionen ohne/mit Parametern zu kennzeichnen sowie Bedingungen und Schleifen zu definieren: stop();

trace(„Ich bin ein Parameter“); animieren(5, 3, true);

for(i = 0; i < 5; i++){ if(this._x >= 100){

In den ersten beiden Zeilen wird jeweils eine einfache, von Flash zur Verfügung gestellte Anweisung aufgerufen, einmal ohne, einmal mit Parameter (genauer: Argumenten). Die dritte Zeile zeigt eine selbst definierte, parametrisierte Funktion. In den Zeilen 4 und 5 sehen wir eine Schleife sowie eine Bedingung, deren Ausführung jeweils durch den Klammer-Ausdruck spezifiziert wird. Was es im Einzelnen mit derartigen Zeilen auf sich hat, erfahren Sie in den nachfolgenden Kapiteln; hier geht es nur um den prinzipiellen Einsatz des betreffenden Operators. Anders als die übrigen Operatoren kann dieser Operator eine beliebige Anzahl an Operanden umfassen. Funktionsdeklarationen, Schleifen und Bedingungen werden darüber hinaus mit einer geschweiften Klammer {} gekennzeichnet. Sie umfasst jeweils den Anweisungs-Block, der den betreffenden Elementen zugeordnet ist, z. B.: if(this._x >= 800){  this._x = 0; }

Trifft die in der ersten Zeile formulierte Bedingung zu, wird alles ausgeführt, was sich innerhalb der geschweiften Klammern befindet. Die Anzahl der dort enthaltenen Anweisungen kann beliebig groß sein. Wenn ein Objekt initialisiert wird, kann man ebenfalls die geschweifte Klammer verwenden, um seine spezifischen Eigenschaften, Methoden und Ereignisse festzulegen: auto = {raeder:4, tueren:2};

Kapitel 6  Operatoren

Wir legen ein Objekt namens auto an, das über die Eigenschaften raeder mit dem Wert 4 und tueren mit dem Wert 2 verfügt. Um sie abzufragen, würden wir den erwähnten Punkt-Operator verwenden: trace(auto.raeder);

Ausgabe im Nachrichtenfenster: 4 Eingedenk der überragenden Bedeutung von Arrays für Anwendungen wird Ihnen die eckige Klammer oft begegnen, denn sie ermöglicht es einerseits, derartige Arrays einzurichten, und andererseits, auf die in ihnen enthaltenen Elemente zuzugreifen. An dieser Stelle mögen zwei einfache Beispiele genügen: aAutomarken = [„Audi“,„VW“,„Porsche“, „Renault“]; trace(aAutomarken[0]);

Ausgabe im Nachrichtenfenster: Audi Wir richten ein Array, also eine Variable, die beliebig viele Inhalte aufnehmen kann, ein, wobei vier Strings mit den Bezeichnungen für beliebige Automarken übergeben werden. Anschließend greifen wir mit der trace()-Anweisung auf das Element an erster Stelle bzw. auf dem Index 0 zu, das Flash im Nachrichtenfenster anzeigt. Nicht selten kommt es vor, dass wir dynamisch Objekte erstellen müssen und daher nicht von vorne­ herein wissen, wie ihr konkreter Name lautet. In dem Fall hilft uns der genannte Klammeroperator, aus einem zusammengesetzten Namen das gewünschte Objekt zu ermitteln: for(var i:Number = 1; i <=  5; i++){

 behaelter.attachMovie(„kreis“,„kreis“ +i,i);  behaelter[„kreis“+i]._x = i * 50; }

Mit diesem Code, der Ihnen in späteren Kapiteln in ähnlicher Form noch recht häufig begegnen wird, fügen wir fünf Objekte auf der Bühne ein, deren Instanznamen in der zweiten Zeile aus dem String „kreis“ und der Zählvariablen i gebildet wird. Damit Flash darin ein gültiges Objekt erkennt, greifen wir in der dritten Zeile mit Hilfe der eckigen Klammer auf diesen Ausdruck zu. Flash evaluiert ihn und ist infolgedessen in der Lage, eine Instanz auf der Bühne anzusprechen. In

6.8  Sonstige

dem Fall entspricht unsere Schreibweise der älteren, nicht mehr zu verwendenden eval()-Methode. Wir haben vorhin ein Objekt mit Hilfe der geschweiften Klammern erzeugt. Eine Alternative dazu besteht in der Verwendung des new-Operators, gefolgt von einem Konstruktor. Das Beispiel mit dem Objekt auto sieht dann so aus: auto = new Object(); auto.raeder = 4; auto.tueren = 2;

Wir richten ein neues Objekt ein, das über alle Eigenschaften der Object-Klasse verfügt. Anschließend weisen wir ihm darüber hinausgehende, spezielle Eigenschaften (raeder, tueren) zu. Eine derartige Vorgehensweise ist – im Gegensatz zu den geschweiften Klammern  – mit nahezu allen Klassen möglich, die eine Instanziierung erlauben. Den Stammbaum der zahllosen Objekte, die eine Anwendung bevölkern, können wir uns mit dem typeof-Operator anzeigen lassen. Das ist notwendig, um herauszufinden, von welcher Klasse ein konkretes Objekt instanziiert wurde; denn davon hängt es u. a. ab, welche Operationen mit dem betreffenden Element durchgeführt werden können. Am Beispiel des vorher erzeugten Objektes namens auto würde der Zugriff lauten: trace(typeof(auto));

Ausgabe im Nachrichtenfenster: object Der Datentyp des befragten Elements besteht in diesem Fall aus einem Object, wie Flash im Nachrichtenfenster mitteilt. Durch den instanceof-Operator können wir ermitteln lassen, ob das konkrete Element von einer bestimmten Klasse instanziiert wurde. Wenn wir bei unserem lieb gewonnenen auto bleiben, könnten wir schreiben: trace(auto instanceof Object);

53

Ausgabe im Nachrichtenfenster: true Während typeof einen String zurück liefert, erhalten wir mit instanceof lediglich einen Wahrheitswert. Wir müssen also konkret mitteilen, gegen welche Klasse wir ein bestimmtes Element testen wollen. In obigem Beispiel wollen wir herausfinden, ob auto der Klasse Object zugehört, was Flash mit einem true im Nachrichtenfenster beantwortet. Für Anfänger gewöhnungsbedürftig und selbst langjährigen Flash-Entwicklern nicht unbedingt vertraut, ermöglicht es der Konditional-Operator, eine if-else – Bedingung in Kurzform zu fassen: bSchalter = false;

(bSchalter == true)?trace(„eingeschaltet“) :trace(„ausgeschaltet“);

Ohne Konditional-Operator lautet das Skript: bSchalter = false;

if (bSchalter == true) {

 trace(„eingeschaltet“); } else {

 trace(„ausgeschaltet“); }

Wir initialisieren die Variable bSchalter mit dem Wert false. Anschließend fragen wir ab, ob sie den Wert true enthält. Ist das der Fall, geben wir die Nachricht „eingeschaltet“ aus, andernfalls die Nachricht „ausgeschaltet“. Da Skripte so allerdings schwerer lesbar werden, sollte man sparsam mit diesem Operator umgehen, es sei denn, diejenigen, die Ihren Code zu sehen bekommen, sind geübte Programmierer. Das ist unter Multimedia-Entwicklern allerdings immer noch nicht selbstverständlich, da sich viele Quereinsteiger in der Branche tummeln. In den Skripten des vorliegenden Buches wird auf diesen Operator verzichtet.

7

Variablen

Oft ist es notwendig, Informationen zu speichern, um zu einem späteren Zeitpunkt wieder darauf zugreifen zu können. Was uns simpel erscheint, da wir ein Gedächtnis als Datenspeicher verwenden können, bedarf in der Programmierung eines Hilfskonstrukts, um solche Daten abzulegen. Dieses Konstrukt bezeichnet man als Variable. Darunter ist ein Platzhalter, ein Stellvertreter für einen beliebigen Wert, der sich ändern kann, zu verstehen.

7.1 Deklaration Bei der Verwendung von Variablen unterscheidet die Programmierung zwei Prozesse, nämlich die Deklaration (oder Definition) und die Initialisierung. Mit der Deklaration wird ein Programm angewiesen, im Arbeitsspeicher einen Platz zur Aufnahme von Daten zu reservieren. Bezogen auf ActionScript besteht sie aus dem Schlüsselwort var, gefolgt von dem VariablenNamen und gegebenenfalls dem Datentyp, z. B.:

wiesen werden darf, während die Variable nAnzahl nur eine Zahl aufnimmt. In der Autorenumgebung achtet Flash darauf, dass wir in der späteren Verwendung der Variablen exakt den definierten Datentyp einhalten, ansonsten gibt das Programm eine Fehlermeldung aus. Flash bietet nach Eingabe des Doppelpunktes eine Liste der zur Verfügung stehenden Datentypen an, aus der Sie per Mausklick wählen können, wie Abbildung  11 zeigt. Weitergehende Informationen zu den Datentypen finden Sie am Ende dieses Kapitels. Alternativ ist auch eine einzeilige Deklaration möglich: var sVorname: String, sNachname: String, nAnzahl: Number;

var sVorname;

var sNachname; var nAnzahl;

Während solche Definitionen für AS 1.0 ausreichen, sollte man in AS 2.0 die zulässigen Datentypen benennen: var sVorname: String;

var sNachname: String; var nAnzahl: Number;

Unsere Definition besagt, dass der Variablen sVorname nur ein String, also ein beliebiger Text zuge-

Abbildung 11:  Codehinweise zu Datentypen

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

55

56

Beachten Sie bei einer einzeiligen Deklaration, dass nur einmal ganz am Anfang der Schlüsselbegriff var verwendet werden darf, der automatisch alle kommaseparierten Variablen-Namen erfasst, die in dieser einen Zeile auftreten. Wenn wir auf eine Typisierung verzichten wie bei den Beispielen am Anfang, dann ermittelt Flash den Datentyp jeweils beim Zugriff auf die Variable automatisch. Außerdem führt Flash eine automatische Typkonvertierung durch, wenn wir bei einer Zuweisung den Datentyp ändern. Das ist für Schreibfaule zugegebenermaßen praktisch, aber schlechter Stil und fehleranfällig. Für die Namensgebung existieren bestimmte Regeln:

• Der Name darf nicht mit einer Zahl beginnen. • Er darf keine Sonderzeichen wie z. B. % enthalten.

Ausgenommen sind das Dollarzeichen $ und der Unterstrich _, die auch am Wortanfang stehen können. • Er darf keine Leerzeichen enthalten (falsch z. B. var meine variable). • Zwar sind deutsche Umlaute wie ä oder ü möglich, aber damit gewöhnt man sich einen schlechten Programmierstil an. Da andere Sprachen diese Zeichen nicht zulassen, sollte man auch in ActionScript darauf verzichten, um sich nicht unnötig Ausnahmeregelungen merken zu müssen. In der folgenden Tabelle führen wir die Verwendung von Umlauten daher als syntaktisch falsch auf. • In AS 2.0 wird zwischen Groß- und Kleinschreibung unterschieden. • Absolut tabu sind natürlich die von der Skriptsprache reservierten Begriffe. Ansonsten kann Flash nicht mehr unterscheiden, ob Sie sich nun auf Ihre eigene Variable oder auf den betreffenden reservierten Begriff beziehen wollen. Leider erhalten Sie keine Fehlermeldung, wenn Sie allen Warnungen zum Trotz Schlüsselbegriffe auf diese Weise vergewaltigen. Immerhin hilft die farbige Syntaxhervorhebung des AS-Editors: Sollte der von Ihnen gewählte Begriff nicht in reinstem Schwarz erstrahlen, haben Sie versehentlich einen Schlüsselbegriff verwendet. • Der Name muss eindeutig sein, d. h. innerhalb derselben Zeitleiste können nicht zwei Variablen des gleichen Namens existieren. Ist dies trotzdem der Fall, überschreibt die zweite die erste gleichnamige Variable.

Kapitel 7  Variablen

• Die in früheren Flash-Versionen gültige Längenbe-

schränkung von maximal 256 Zeichen wurde zwar aufgehoben, aber es macht keinen Sinn, mit derart langen Namen zu arbeiten.

In der Tabelle sehen Sie einige Beispiele für falsche und korrekte Namen. Nicht korrekt

Fehler

Korrekt

1Zahl

Beginnt mit Zahl

Zahl1

meine%e

Enthält Sonderzeichen

meineProzente $Prozente _Prozente

meine Variable Enthält Leerzeichen meineVariable gültigeBezeichnung

Enthält Umlaut

gueltigeBezeichnung

nAnzahl nanzahl

Missachtet Groß-/ Kleinschreibung

entweder nur: nAnzahl oder nur: nanzahl

Number

Verwendet reservierten Begriff

nNumber

Beispiele für Variablen-Namen

Obgleich Flash uns relativ viel Spielraum bei der Namensgebung gewährt, sollte man sich an gewisse Konventionen halten, damit ein Skript lesbar bleibt und von anderen (etwa bei Teamprojekten) verstanden werden kann. Der Name sollte, wenn möglich, etwas über den Einsatz der Variablen verraten. Solche Namen bezeichnet man als sprechende Namen. Wenn wir z. B. einen Vornamen speichern wollen, dann wäre die Bezeichnung sVorname naheliegend. Stoßen wir beim Lesen eines längeren Skripts auf eine solche Bezeichnung, können wir uns schon ungefähr vorstellen, wozu diese Variable dient. Hätten wir sie, was formal durchaus möglich wäre, statt dessen a genannt, wäre ihr Verwendungszweck nicht unmittelbar ersichtlich. Nach dem Motto „In der Kürze liegt die Würze“ sollte man zugleich auf allzu lange Namen verzichten. So wäre, um bei unserem Beispiel zu bleiben, zwar möglich: sVorname_des_ersten_spielers_der_sich_ bei_diesem_spiel_anmeldet

Aber spätestens beim wiederholten Tippen solcher Bandwürmer fallen Ihnen irgendwann garantiert die Finger ab und der Name bläht ein Skript unnötigerweise auf.

7.1  Deklaration

Ein vorangestelltes Kürzel wie beispielsweise das

s hilft in einem längeren Skript, die selbst definierten

Elemente in Kategorien einzuordnen und logischen Fehlern auf die Spur zu kommen. Denn so können wir gerade in komplexen Skripten oft erkennen, ob eine bestimmte Operation zulässig ist oder nicht. Eine Ausnahme stellen Zählvariablen in Schleifen dar, bei denen man i. d. R. auf ein Präfix verzichtet. In der Literatur existieren verschiedene mehr oder minder sinnvolle Vorschläge für derartige Präfixe. Auch wenn der Autor dieser Zeilen nicht die notwendige Selbstdisziplin besitzt, um sich konsequent an zumindest einen dieser Vorschläge zu halten (darf man so etwas überhaupt in einem Lehrbuch eingestehen?), so erweist sich die von Reinhardt/Lott modifizierte und hier leicht ergänzte Variante als durchaus empfehlenswert. Die sogenannte Ungarische Notation geht auf Microsoft zurück und dient dazu, über eine Namenskonvention die Lesbarkeit von Source Code zu erhöhen. Im vorliegenden Fall binden wir die Namen der Variablen an den Typ der zugewiesenen Daten. So kann eine Variable, die den Datentyp Number aufnimmt, mit einem vorangestellten n gekennzeichnet werden, etwa nZahl. Macromedia/Adobe bieten dazu eine Alternative an, die darin besteht, Ihre Variable mit einem kennzeichnenden Suffix zu versehen, etwa auto_mc. Von einem derartigen Vorgehen sollte man möglichst absehen, da es eine flashspezifische Lösung darstellt, die so in anderen Sprachen nicht gängig ist. Insofern erscheint die von Reinhardt/Lott vorgeschlagene, sich an der Ungarischen Notation orientierende Lösung sinnvoller. Gerade bei längeren Skripten empfiehlt es sich, Variablen ganz am Anfang in einem zusammengehörigen Block zu deklarieren. So behält man leichter den Überblick und muss sich nicht im Fall der Fälle durch ein ganzes Skript durchwühlen, um nachzusehen, wie und wo eine entsprechende Variable definiert wurde. Ausgenommen sind Objektvariablen, die natürlich erst dann deklariert werden können, wenn das Objekt, dem sie zugeordnet sind, existiert (s. u.). Wie bereits erwähnt, können die benötigten Objekte, und damit auch die Variablen, dynamisch zusammengesetzt werden, etwa mit Hilfe einer Schleife. for (var i:Number = 1; i<=10; i++) {  this[„zahl“+i] = i;

57 Präfix

Datentyp

a

Array

bm

BitmapData

b

bt c

cam cm

cmi d f

fu lc lv m

ml

mic mx n

nc ns o

pt pj r

rs s

sd so t

tf tr vd

xml

xmls

Boolean Button

ColorTransform Camera

ContextMenu

ContextMenuItem Date

Filter

Function

LocalConnection LoadVars

MovieClip

MovieClipLoader Microphone Matrix Number

NetConnection NetStream Object Point

PrintJob

Rectangle RecordSet String Sound

SharedObject TextField

TextFormat Transform Video XML

XMLSocket

Variablen-Präfixe (nach Reinhardt/Lott: Flash MX 2004 ActionScript Bible, p. 98)

 trace(this[„zahl“+i]); }

58

Das Nachrichtenfenster zeigt beim Testen die Werte 1 bis 10 an. Wir richten insgesamt zehnmal eine Variable ein, deren Name aus dem Präfix „zahl“ und dem aktuellen Inhalt von i besteht. Die Variablen-Namen lauten also zahl1, zahl2, zahl3 etc. Ihnen weisen wir jeweils den aktuellen Inhalt von i zu, so dass im Nachrichtenfenster von 1 bis 10 hochgezählt wird. Die Schleifenanweisung for sorgt dafür, dass ein Vorgang mehrfach ausgeführt wird. Bei der Deklaration sollte man durch einen vorangestellten Kommentar den Einsatzzweck verdeutlichen: //Vorname des Spielers var sVorname;

//Nachname des Spielers var sNachname;

//Anzahl der Objekte, die im Spiel auf­ gefangen werden können var nAnzahl;

Stößt man in einem längeren Skript auf eine Variable, bei der man trotz korrekter Namensgebung nicht so recht weiß, was sie denn macht, dann genügt ein Blick in den Deklarationsteil, wo die Kommentare die entsprechende Information bereithalten. Bei unbekannten Skripten können sie zudem bereits eine erste Vorstellung vom Aufbau der Anwendung geben und damit ein erstes Vorverständnis vermitteln.

Kapitel 7  Variablen

3. Fügen Sie nach dem bisherigen Skript ein: if(nAnzahl == undefined){  nAnzahl = 10;

 trace(nAnzahl) }

In diesem Fall testen wir, ob nAnzahl bereits einen gültigen Wert besitzt. Falls nicht, dann weisen wir der Variablen 10 zu und lassen uns diesen Wert im Nachrichtenfenster ausgeben. Hier spielt es keine Rolle, ob vor dem Skript eine Deklaration von nAn­ zahl erfolgt oder nicht. Fehlt sie, wird automatisch eine Variable namens nAnzahl eingerichtet und 10 zugewiesen. Wissen wir bereits von Anfang an, welchen Inhalt eine Variable besitzen soll, können wir ihn direkt bei der Definition mitgeben. Diesen Vorgang bezeichnet man als Initialisierung. 4. Ersetzen Sie das Skript durch: var nAnzahl:Number = 50;

Jetzt wird nicht nur ein Speicherbereich für unsere Variable reserviert, sondern ihm wird auch direkt ein Wert, nämlich die Zahl 50 zugewiesen. Lassen Sie sich die Variable erneut mit einem trace() ausgeben. 5. Ergänzen Sie den Code: var nAnzahl:Number = 50; trace(nAnzahl);

7.2 Wertezuweisung In unseren bisherigen Beispielen werden die Variablen lediglich eingerichtet. Sie erhalten von Flash automatisch den Wert undefined. Das können Sie testen, indem Sie nach der Deklaration die betreffende Variable tracen (aus Gründen der Vereinfachung verzichten wir hier und an anderer Stelle auf einen Kommentar im Skript).

Das Nachrichtenfenster zeigt nun den bei der Initialisierung zugewiesenen Wert 50 an. Eine Variable kann zu einem bestimmten Zeitpunkt immer nur exakt einen einzigen Wert enthalten. Folgende Initialisierung wäre also falsch:  var sName:String = „Zaphod“, „Beeble­ brox“;

1. Erstellen Sie eine Standarddatei. 2. fügen Sie in actions folgendes Bildskript ein:

Durch das Komma auf der rechten Seite der Zuweisung teilen wir Flash mit, zwei Werte in die Variable sName zu packen, was zu einer Fehlermeldung führt. Korrekt dagegen wäre wie im vorhergehenden Beispiel mit nAnzahl:

var nAnzahl: Number;

var sName:String = „Zaphod“;

Im Nachrichtenfenster erscheint undefined. Das lässt sich natürlich auch abfragen.

Im Laufe des Skripts kann sich dieser eine Wert natürlich ändern, es ist also möglich, der Variablen im Laufe der Zeit jeweils einen anderen Wert zuzuweisen.

trace(nAnzahl);

7.2  Wertezuweisung

6. Ersetzen Sie das Skript durch: var sName:String = „Zaphod“ trace(sName);

sName = „Beeblebrox“; trace(sName);

Zuerst erscheint im Nachrichtenfenster Zaphod, dann Beeblebrox, denn der ursprüngliche Wert der Variablen sName wird in der dritten Zeile durch einen neuen Wert überschrieben. Die hier beschriebene Deklaration und Initialisierung ist in Flash im Gegensatz zu Programmiersprachen nicht unbedingt notwendig. Bei Bedarf kann man auch an einer beliebigen Stelle innerhalb eines Skriptes eine Variable durch simple Zuweisung eines Wertes einrichten. Das vereinfacht zwar den Umgang mit AS, hat jedoch in den meisten Fällen den Nachteil der Unübersichtlichkeit, was sich gerade in größeren, komplexen Skripten negativ auswirken kann. Insofern empfiehlt es sich, den etwas umständlicheren Weg der eindeutigen Deklaration, gegebenenfalls inklusive Initialisierung zu wählen und eher selten auf die direkte Zuweisung zuzugreifen. Bereits mehrfach wurde der Zuweisungsoperator = verwendet. Damit sorgen wir dafür, dass eine Variable einen Wert erhält, was ja an irgendeiner Stelle unseres Skriptes notwendig ist, sonst können wir uns den Einsatz der Variablen gleich sparen. Die Syntax ist recht einfach: var nZahl:Number; var sName:String; nZahl = 5;

sName = „Hans“;

Auf der linken Seite steht immer der Variablen-Name, gefolgt vom Zuweisungsoperator (also =), während sich rechts davon der Wert befindet, den wir in die Variable packen wollen. Dieser Wert muss nicht zwangsläufig aus einer einzelnen Zahl oder einem einzelnen String wie in obigem Beispiel bestehen. Statt dessen kann man auch einen kompletten Ausdruck zuweisen, etwa eine Rechenoperation: 7. Ersetzen Sie das Skript durch: var nSumme: Number; nSumme = 5 + 7 + 2; trace(nSumme);

59

Zuerst arbeitet Flash alle Anweisungen ab, die sich auf der rechten Seite des Zuweisungsoperators befinden, also die Addition von 5, 7 und 2. Anschließend wird das Ergebnis der Variablen auf der linken Seite zugewiesen, so dass diese nun den Wert 14 enthält. Die Ausdrücke auf der rechten Seite können dabei beliebig komplex sein. Das gilt beispielsweise auch für Strings, da ja ein Ausdruck nicht zwangsläufig nur eine Berechnung enthalten muss: 8. Ersetzen Sie das Skript durch: var sName: String;

sName = „Hans“ + „ Andersen“; trace(sName);

Zunächst zieht Flash die beiden Strings zusammen und weist dann das Ergebnis der Variablen zu, so dass diese nun den Wert „Hans Andersen“ enthält. Der Ausdruck auf der rechten Seite kann sogar den bisherigen Wert der Variablen auf der linken Seite enthalten, so dass es einfach möglich ist, den aktuellen Wert zu verrechnen. 9. Ersetzen Sie das Skript durch: var nSumme: Number; nSumme = 5 + 7 + 2;

nSumme = nSumme + 1; trace(nSumme);

Der Inhalt von nSumme beträgt, wie wir gesehen haben, nach der ersten Zuweisung 14. In der darauf folgenden Zeile nimmt Flash genau diesen Wert, addiert 1 hinzu und weist das Ergebnis wieder der Variablen zu. Das Element, das auf der linken Seite der Zuweisung steht, repräsentiert für Flash den Speicherplatz der Variablen, den man auch als Linkswert bezeichnet. Auf der rechten Seite dagegen befindet sich der aktuelle Inhalt der Variablen, auch Rechtswert genannt. Durch diese Unterscheidung ist es dem AS-Interpreter möglich, in einer einzigen Zuweisung mehrfach den gleichen Variablen-Namen zu verwenden, damit jedoch verschiedene Prozesse zu verbinden. Eine Variable kann einen Wert erhalten, indem man auf andere Variablen zugreift: 10. Ersetzen Sie das Skript durch:  var nSummand1:Number = 5;

 var nSummand2:Number = 10;

60

Kapitel 7  Variablen

 var nSumme:Number = nSummand1 + nSummand2;

trace(nSumme);

Im Nachrichtenfenster erscheint die Zahl 15. Nach der Deklaration und Initialisierung von nSummand1 und nSummand2 weisen wir die Addition dieser beiden Variablen nSumme unmittelbar als Initialisierung zu. Natürlich kann die Zuweisung auch eine Kombination aus Variable und Wert enthalten. 11. Erweitern Sie das Skript:

var sNachname:String = „Kohl“;

 trace(„Mein Nachname lautet “+ sNachname);

Das Nachrichtenfenster setzt den im Klartext angegebenen String „Mein Nachname lautet “ und den Inhalt der Variablen sNachname zu einem Ausdruck zusammen.

7.3 Reichweite Jede Variable besitzt eine sogenannte Reichweite bzw. Gültigkeit, die festlegt, von welcher Stelle unseres Skriptes aus sie bekannt ist. Man unterscheidet zwischen globalen und lokalen Variablen. Das entspricht in gewisser Weise dem, was wir mit einem Langzeitund einem Kurzeitgedächtnis bezeichnen. Die globale Variable ist ab dem Zeitpunkt ihrer Deklaration überall bekannt, während ihr lokales Pendant nur zu ganz bestimmten Zeitpunkten an ganz bestimmten Orten gilt. Wenn wir beispielsweise eine personalisierbare Lernanwendung erstellt haben, dann ist es notwendig, die ganze Zeit über auf den Namen des Lerners zugreifen zu können. Hier könnte es also sinnvoll sein, mit einer globalen Variablen zu arbeiten. Sie wäre ab ihrer Deklaration in der kompletten Anwendung bekannt und müsste beim Aufruf nicht mit einem speziellen Pfad verknüpft werden. Realisieren wir statt dessen eine Webseite, die aus mehreren Modulen wie z. B. Main, Produkte, Service besteht, dann wird man modulbezogene Informationen zumeist in lokalen Variablen speichern, da sie nur innerhalb eines speziellen Moduls von Bedeutung sind. Oft ist es auch notwendig, für Berechnungen nur zu diesem einen Zeitpunkt mit Variablen zu arbeiten, die

danach ohne Bedeutung sind. Lokale Variablen sind dann nur ein Hilfsmittel, um vorübergehend Daten aufzunehmen. Nachdem das Ergebnis der Berechnung feststeht, benötigt man sie nicht mehr. Im Gegensatz zu globalen Variablen müssen sie nicht explizit gelöscht werden, denn das übernimmt Flash automatisch und gibt so den belegten Speicherbereich frei. Eine globale Variable richtet man mit Hilfe des Schlüsselbegriffs _global ein: _global.gZahl = 111;

Damit ist diese Variable nicht nur von jeder Stelle innerhalb des Films, in dem sie eingerichtet wurde, abrufbar, sondern sie ist auch allen Filmen bekannt, die extern geladen werden. Sie besitzt selbst dann Gültigkeit, wenn die Funktion, innerhalb der wir sie einrichteten, bereits ausgeführt wurde. Leider lässt Flash es nicht zu, bei _global den Datentyp festzulegen. Der Zugriff erfolgt einfach über den Namen ohne Angabe eines Pfades bzw. zugehörigen Objektes: trace(gZahl);

Möglich ist auch: trace(_global.gZahl);

Das Gegenstück dazu ist die lokale Variable, mit denen wir in den früheren Beispielen gearbeitet haben: var nZahl:Number = 112;

Die Variable nZahl gilt, falls sie in einer Funktion deklariert wird, nur innerhalb dieser Funktion, bzw. falls sie innerhalb der Zeitleiste eines Objekts erstellt wird, nur solange, wie dieses Objekt existiert. Um den Unterschied zu verstehen, wollen wir uns ein konkretes Beispiel anschauen. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie actions folgendes BildSkript zu: var nZahl1:Number = 100;

trace(„nZahl1: „+nZahl1); function zaehlen(){

var nZahl2:Number = 5;

 trace(„nZahl2 in der Funktion: „+nZahl2); }

zaehlen();

 trace(„nZahl2 außerhalb der Funktion: „+nZahl2);

7.3  Reichweite

Beim ersten und zweiten trace()-Befehl erhalten wir jeweils die korrekte Antwort (100 bzw. 5). Lediglich der dritte trace()-Befehl in der letzten Zeile ergibt ein undefined im Nachrichtenfenster. Wie bisher richten wir zunächst eine Variable nZahl1 ein und weisen ihr den Wert 100 zu. Es handelt sich hier um eine lokale Variable, da wir den Schlüsselbegriff var verwenden. Ihren Wert fragen wir in der nächsten Zeile ab. Anschließend definieren wir einen Code-Block als eine Funktion namens za­ ehlen(). Immer dann, wenn wir zaehlen() aufrufen, soll genau dieser Code-Block ausgeführt werden. Die Funktion sorgt dafür, dass eine zweite lokale Variable namens nZahl2 eingerichtet wird und den Wert 5 erhält. Direkt danach fragen wir nach ihrem Inhalt. In den beiden letzten Skriptzeilen wird die genannte Funktion aufgerufen bzw. ausgeführt, und danach erneut der Inhalt von nZahl2 angezeigt. Wir haben nZahl1 wie bisher eingerichtet, nämlich außerhalb einer Funktion mit Hilfe des Schlüsselbegriffs var. Dabei handelt es sich um eine Zeitleistenvariable, d. h. um eine Variable, die innerhalb der Zeitleiste, in der sie deklariert wurde, gilt. Sie existiert solange, wie diese Zeitleiste existiert. Wird die Zeitleiste gelöscht, verschwindet auch die Variable. Da sich die Variable in unserem Beispiel auf der Hauptzeitleiste bzw. _root befindet, kann sie von jeder Stelle des Films aus angesprochen werden. Würden wir sie ohne var einrichten, erhielten wir das gleiche Ergebnis. Solche Variablen stellen eine Besonderheit von Flash dar, zu denen in höheren Programmiersprachen insofern kein Pendant existiert, als diese nicht auf das Konzept der Zeitleisten zurückgreifen. Anders verhält es sich mit nZahl2. Sie wurde innerhalb der Funktion zaehlen() eingerichtet. Da wir dabei var verwenden, handelt es sich um eine lokale Variable, die nur innerhalb dieser einen Funktion bekannt ist. Die trace()-Methode in zaehlen() zeigt den korrekten Wert an, während ein trace() außerhalb der Funktion  – egal, an welcher Stelle es erfolgt – immer ein undefined zurückgibt. 3. Fügen Sie in Frame 2 auf der Ebene actions ein Schlüsselbild ein und schreiben folgendes Skript: trace(nZahl1); trace(nZahl2); stop();

61

Erneut gibt Flash 100 für nZahl1 und undefined für nZahl2 aus. Wie erwähnt, kann man auf die Zeitleistenvariable zugreifen, die lokale Variable dagegen bleibt nach wie vor unbekannt. Aus der lokalen Variablen entsteht innerhalb der Funktion eine Zeitleistenvariable, wenn wir bei der Deklaration auf var verzichten. 4. Ändern Sie die Funktionsdeklaration in Frame 1 (Fettdruck): function zaehlen(){ nZahl2 = 5;

 trace(„nZahl2 in der Funktion: „+nZahl2); }

Anstelle des undefined zeigt das Nachrichtenfenster nun die zugewiesenen Variablenwerte an, d. h. nZahl2 existiert nun ebenso lange wie nZahl1, obwohl wir sie innerhalb einer Funktion eingerichtet haben. Was für die Zeitleiste von _root gilt, besitzt prinzipiell für jeden anderen MovieClip, dem wir eine Variable zuordnen, Gültigkeit. 5. Löschen Sie den eben mühsam erstellten Frame 2. 6. Zeichnen Sie in objects an beliebiger Stelle einen Kreis (80 × 80) 7. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt beliebig). 8. Fügen Sie vor der Deklaration von zaehlen() ein: kreis.nTempoX = 25;

9. Schreiben Sie am Ende des bisherigen Codes: trace(„Tempo: “+kreis.nTempoX);

Nach den bisherigen Angaben zeigt Flash den Inhalt der Variablen kreis.nTempoX an. Hier wird einer Instanz mit dem Namen kreis eine Zeitleistenvariable zugewiesen. Sie kann von jeder Stelle innerhalb des Flashfilms angesprochen werden, vorausgesetzt, die Instanz kreis existiert bereits zu dem Zeitpunkt, zu dem diese Codezeile ausgeführt wird. Und sobald wir kreis mit removeMovieClip() löschen, verschwindet automatisch auch die Variable nTempoX. Wollten wir mit var in kreis eine Zeitleistenvariable einrichten, müssten wir im Symbolbearbeitungsmodus des betreffenden MovieClips auf dessen Zeitleiste zugreifen, um dort ein Bildskript zu schreiben.

62

Kapitel 7  Variablen

Lokale Variablen lassen sich korrespondierend zur oben beschriebenen Vorgehensweise einrichten. 10. Ersetzen Sie das bisherige Skript durch:

kreis.ausgabe = function(){

 var nZahl:Number = 5  trace(nZahl)

}

kreis.onPress = function(){

 trace(nZahl)

die nur beim Zeitpunkt eines Funktionsaufrufs Gültigkeit besitzen. Sie ermöglichen es, Funktionen flexibler zu gestalten und werden im Kapitel über Funktionen ausführlicher behandelt. Bei Zählvariablen handelt es sich um gewöhnliche Variablen, die für einen besonderen Zweck, nämlich das Durchzählen von Schleifendurchläufen, verwendet werden. Wir besprechen sie im Kapitel Schleifen.

}

kreis.ausgabe()

Das Nachrichtenfenster zeigt den korrekten Wert von nZahl an. Wenn Sie jedoch auf den Kreis klicken, erhalten Sie ein undefined. Denn durch den Schlüsselbegriff var haben wir zum Zeitpunkt des Aufrufs von kreis.ausgabe() eine lokale Variable eingerichtet, die außerhalb der Funktion nicht mehr zur Verfügung steht. Die Verwendung von _global ist nicht unbedingt notwendig. Denn wenn wir den kompletten Code in der Hauptzeitleiste schreiben und im Falle modularer Anwendungen mit loadMovie() anstatt des weniger zu empfehlenden loadMovieNum() arbeiten, dann können wir jederzeit auf unsere Variablen ohne Pfad­ angabe zugreifen, solange der Code in der Hauptzeitleiste steht.

7.4 Parameter und Zählvariablen Zwei besondere Arten von Variablen stellen Parameter sowie Zählvariablen dar. Parameter sind Variablen,

7.5 Konstanten Trotz des Namens handelt es sich bei Konstanten ebenfalls um Variablen, aber eben um solche, die einmal Daten aufnehmen und diese unverändert während des Programmablaufs beibehalten. Dabei könnte es sich z. B. um die Angabe eines Ordners handeln, aus dem Bilder eingelesen werden müssen, oder einen String, den man benötigt, um daraus verschiedene Datei- oder Objektnamen zusammen zu setzen. Um Konstanten nicht versehentlich während des Programmierens mit wechselnden Werten zu füllen, sollte man auf eine Namenskonvention zurückgreifen wie etwa die Verwendung des Präfix sk (z. B. skPfad) oder von Majuskeln (z. B. PFAD). Leider haben Majuskeln den optischen Nachteil, eine enorme Signalwirkung zu besitzen, so dass sich solcher Code mitunter schwieriger lesen lässt. Flash kennt eine Reihe vordefinierter Konstanten: undefined, true, false, null und NaN, um die häufigsten zu nennen. Verschiedene Objekte wie die Array-Klasse verfügen ebenfalls über Konstanten. So kann man der sort()-Methode Konstanten wie NUMERIC als Parameter übergeben, was im Kapitel Array ausführlicher dargestellt wird.

8

Datentypen

An wiederholter Stelle war von sogenannten Datentypen die Rede, die wir beim Deklarieren der Variablen festlegen. Damit ist schlicht die Art der Daten gemeint, mit denen wir arbeiten wollen. Dieser Typ ist von entscheidender Bedeutung für den richtigen Umgang mit Daten. So macht es z. B. nur Sinn, eine Berechnung durchzuführen, wenn wir es mit Zahlen zu tun haben, wenn also der Datentyp Number vorliegt. Das entspricht unserem Alltagsverhalten und nicht anders agiert auch eine Programmiersprache. Flash kennt zahlreiche Datentypen, von denen wir uns an dieser Stelle nur die wichtigsten anschauen werden. Einige eher ausgefallene Typen begegnen uns an späterer Stelle in den Workshops. Flash unterscheidet zwischen Grunddatentypen wie Boolean, Number und String sowie komplexen oder Referenzdatentypen wie Object und MovieClip, die ihrerseits auf Grunddatentypen verweisen. Zu den komplexen Datentypen gehören auch selbst definierte Klassen, die neue Datentypen bilden. In folgender Tabelle sehen Sie eine Auflistung der häufigsten Datentypen. Datentyp

Art

Boolean

Grunddatentyp

Number String null

undefined

MovieClip Object Void

Häufige Datentypen

Grunddatentyp Grunddatentyp Grunddatentyp Grunddatentyp Referenzdatentyp Referenzdatentyp Referenzdatentyp

Verwenden Sie AS 1.0 und verzichten damit auf eine strikte Typisierung, versucht Flash, automatisch den korrekten Datentyp einer Variablen zu ermitteln, sobald ihr ein Wert zugewiesen wurde. Zudem findet eine automatische Typumwandlung statt, wenn dieser Variablen ein Wert mit einem anderen Datentyp zugewiesen wurde. In manchen Fällen ist eine temporäre Typumwandlung möglich. AS 2.0 erlaubt ebenfalls bei manchen Datentypen eine temporäre wie eine permanente Typumwandlung (Array, Boolean, Object, Number, String). Letztere macht allerdings prinzipiell wenig Sinn, da man sich ja ganz bewusst auf einen bestimmten Datentyp festgelegt hat. Benötigt man die gespeicherten Daten dennoch als anderen Datentyp – z. B. einen String als Number, um Berechnungen durchführen zu können –, dann empfiehlt sich eine temporäre Typumwandlung. Sie ist uns bereits oben über den Weg gelaufen. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects ein dynamisches Textfeld mit beliebigen Eigenschaften ein (Instanzname zahl). 3. Schreiben Sie in das Textfeld die Zahl 125. 4. Weisen Sie actions folgendes Bildskript zu: var nZahl1:Number = 50; var nSumme:Number = 0;

nSumme = zahl.text + nZahl1; trace(nSumme)

trace(typeof(nSumme));

Bei der Ausgabe im Nachrichtenfenster tun sich Abgründe auf, zeigt Flash doch an: 12550 string

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

63

64

Wir richten zwei Variablen mit dem Datentyp Number ein und weisen ihnen die Werte 50 und 0 zu. Anschließend überschreiben wir den Inhalt von nSumme durch eine (scheinbare) Addition des Inhalts unseres händisch angelegten Textfeldes und der ersten Variable. Wie im Kapitel zu den Operatoren gesehen interpretiert Flash hier den Ausdruck auf der rechten Seite als Konkatenation und schreibt infolgedessen die erwähnten Werte hintereinander anstatt eine Berechnung durchzuführen. Automatisch wird dabei der nSumme zugewiesene Datentyp Number durch den Datentyp String überschrieben, es erfolgt also eine permanente Typumwandlung. Wann immer wir in den nachfolgenden Zeilen innerhalb des Codes auf nSumme zugreifen, ist sie vom Datentyp String, wie der typeof-Operator in der letzten Zeile zeigt. Um das Skript korrekt auszuführen, benötigen wir jedoch eine temporäre, also zeitweise Typumwandlung, die sich nicht auf nSumme, sondern auf das Textfeld bezieht. 5. Ändern Sie die Zuweisung von nSumme (Fettdruck): nSumme = Number(zahl.text) + nZahl1; Ausgabe im Nachrichtenfenster: 175 number Die Berechnung wird korrekt durchgeführt und der gewünschte Datentyp Number bleibt für nSumme erhalten. Wir weisen Flash an, zu einem einzigen Zeitpunkt, der faktisch dem Bruchteil einer Sekunde entspricht, den Inhalt des Textfeldes zu nehmen und ihn in den Datentyp Number umzuwandeln. Dann erfolgt die Addition, deren Ergebnis unserer Variablen zugewiesen wird. Vor und nach dem Auslesen des Textfeldes bleibt der ursprüngliche Datentyp String erhalten. Auf diese Weise kommt es zu keiner unerwünschten permanenten Typumwandlung. Generell gilt, dass auf permanente Umwandlungen verzichtet werden soll. Sinnvoll sind statt dessen nur temporäre Umwandlungen, denen Sie hauptsächlich dann begegnen werden, wenn Sie wie in unserem Beispiel mit den Inhalten von Textfeldern arbeiten. AS 3.0 kennt als weitere Grunddatentypen int (Integer, d. h. Ganzzahlen) sowie uint (unsignierte Integer, also Zahlen ohne Bit-Wert für das Vorzeichen), die komplexe Berechnungen beschleunigen können. In AS 2.0 können wir nicht darauf zugreifen.

Kapitel 8  Datentypen

Beachten Sie, dass Grunddatentypen als Wert, nicht als Referenz, weiter gegeben werden. Wenn Sie also beispielsweise eine Reihe an Variablen mit verschiedenen Zahlenwerten anlegen und diese Variablen dann in einem Array aufnehmen, speichert Flash dort nicht wirklich die betreffenden Variablen, sondern nur deren konkreter Inhalt. Wenn Sie dann versuchen, über den Zugriff auf das Array die Variablen zu ändern, ignorieren diese ungerührt Ihre Anweisungen. Statt dessen werden nur die Werte im Array geändert.

8.1 Boolean Beim Bool’schen Datentyp handelt es sich um einen Wahrheitswert, der nur zwei mögliche Inhalte kennt: Wahr oder falsch bzw. in Flash-Syntax true oder false. Diese Werte lassen sich auch als Zahlen darstellen, wobei die 1 dem Wert true, die 0 dem Wert false entspricht. Ein Wahrheitswert sagt etwas darüber aus, ob ein Ausdruck zutrifft oder nicht zutrifft. Ausdrücke werden i. d. R. in if-Bedingungen oder in Schleifen auf ihren Wahrheitsgehalt getestet. Abhängig davon, ob eine Bedingung wie beispielsweise die Aussage, die Variable nZahl enthalte den Wert 12 oder die Variable sVorname enthalte nicht den String „Zaphod Beeblebrox“, zutrifft, wird eine bestimmte Aktion ausgelöst.

8.2 Number Während Programmiersprachen normalerweise zwischen floating point, integer und anderen Zahlen differenzieren, subsumiert sie ActionScript 2.0 unter einem einzigen Datentyp, nämlich Number. Positive oder negative Zahlen, Ganzzahlen oder Fließkommawerte gehören alle zu einem einzigen Datentyp. Das Schreiben erfolgt einfach durch Eingabe der gewünschten Zahl: 5

-17

220378 3.14

Und als Variablendeklaration z. B.: var nZahl:Number = 5;

8.2  Number

Beachten Sie, dass wir anders als im Deutschen üblich zur Abtrennung der Tausenderstellen keinen Punkt verwenden dürfen, was große Zahlen recht unleserlich macht. Syntaktisch gesehen wäre also falsch: var nAnzahl:Number = 800.000;

var sReichtum:String = „In Deutschland gibt es rund „ + nAnzahl + “ DollarMillionäre“;

Unter krasser Missachtung der tatsächlichen Reichtumsverhältnisse würde Flash schlicht bescheidene 800 Millionäre vermuten, da die angegebene Zahl als Fließkommawert und der Punkt als Kommastelle interpretiert wird. Korrekt würde der String ohne Punkt in der Werteangabe initialisiert: var nAnzahl:Number = 800.000;

Unter den angeführten Beispielen befanden sich sowohl Ganzzahlen bzw. Integer (positive Werte, negative Werte jeweils ohne Nachkommastelle, 0) wie auch Fließkommawerte bzw. Gleitkommazahlen (Werte mit Nachkommastellen). Der Einsatzzweck von Ganzzahlen dürfte selbstredend sein: Wenn Sie Objekte zählen, auf eine Frame-Nummer zugreifen oder wissen wollen, an welcher Stelle innerhalb eines Arrays die benötigten Daten liegen, arbeiten Sie notwendigerweise mit Integer. Fließkommawerte dagegen kommen oft in Berechnungen vor (Kreisumfang, Entfernung etc.), aber selbst bei alltäglichen Problemen wie Preisen spielen sie eine bedeutende Rolle. Nicht immer liegen die benötigten Zahlen als Number vor. Das gilt beispielsweise, wenn Sie Ihre Daten extern laden, oder der Anwender die Werte in ein Eingabetextfeld schreibt. In den Fällen müssen die Werte in den Datentyp Number konvertiert werden, was mit Hilfe der oben vorgestellten temporären Typ­ umwandlung erfolgt. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var sZahl:String = „10“;

var nZahl:Number = Number(sZahl); trace(nZahl + 5);

Ausgabe im Nachrichtenfenster: 15 Wir deklarieren die Variable sString als String und weisen ihr die Zeichenkette „10“ zu. Wohlgemerkt: Der zugewiesene Wert wird von Flash nicht

65

als Zahl, sondern als Text gelesen. Anschließend legen wir eine zweite Variable an, diesmal jedoch mit dem Datentyp Number. Ihr weisen wir den Inhalt von sZahl zu, den wir dabei als Number, also Ganzzahl, auslesen. Mit Hilfe des trace()-Befehls lassen wir uns eine Berechnung ausgeben, bei der zur zweiten Variable ein Wert hinzu addiert wird. Was wir vorher mit dem Inhalt eines Textfeldes durchgeführt haben, geschieht nun mit einer Variablen: Temporär, nur für den kurzen Augenblick des Zugriffs, erfolgt eine Typ­ umwandlung von einem String in eine Number, so dass eine sinnvolle Berechnung möglich wird. Eine genauere Kontrolle über die Typumwandlung bieten Ihnen die globalen Funktionen parseInt() und parseFloat(). 3. Ändern Sie die Initialisierung von sZahl wie folgt (Fettdruck): var sZahl:String = „10.25“;

4. Erweitern Sie den Code um folgende Zeilen: trace(„Integer: „ + parseInt(sZahl));  trace(„Gleitkomma: „ + parseFloat(sZahl));

Ausgabe im Nachrichtenfenster: 15.25 Integer: 10 Gleitkomma: 10.25 In sZahl speichern wir eine Zeichenkette, die eine Zahl mit zwei Nachkommastellen enthält. Wenn wir die Initialisierung von nZahl gegenüber zuvor unverändert durchführen, dann liest Flash (in den meisten Fällen) den String korrekt als Fließkommazahl aus und führt die Berechnung durch, die jetzt 15.25 ergibt. Mit den Funktionen parseInt() und parse­ Float() können wir darüber hinaus genau festlegen, ob wir eine Fließkomma- oder Ganzzahl erhalten möchten. Die parseInt()-Funktion gibt uns eine Ganzzahl, also 10, während die parseFloat()Funktion eine Fließkommazahl generiert, also 10.25. Beide Funktionen bieten zusätzlich die Möglichkeit an, die Zahlenbasis zu definieren. Das Zahlensystem, mit dem Sie im Alltag umgehen, beruht auf der Zahlenbasis 10, weswegen man es auch als Dezimalsystem bezeichnet. Es verwendet die Zeichen 0 – 9. Eine beliebige Zahl lässt sich darstellen, indem man jede ihrer Ziffern mit der Basis 10 multipliziert. Andere insbesondere im Bereich der Medienproduktion

66

Kapitel 8  Datentypen

verwendete Zahlensysteme sind das binäre mit der Basis 2 und den Ziffern 0 und 1 sowie das hexadezimale mit der Basis 16 und den Ziffern 0  – 9 und a – f. Wen wir eine derartige Zahl aus einem String auslesen und in das Dezimalsystem umwandeln wollen, bietet parseInt() gegenüber Number() einen deutlichen Vorteil.

Ob überhaupt eine Umwandlung in eine gültige Zahl möglich ist, hängt naturgemäß vom vorliegenden String ab.

5. Erweitern Sie das Skript um folgende Zeilen:

 trace(„parseInt: „ + parseInt(sZiffern));

var sHex:String = „0xff“;

 trace(„Hexadezimal mit Number: „ + Number(sHex));

 trace(„Hexadezimal mit parseInt: „ + parseInt(sHex,16));

Ausgabe im Nachrichtenfenster : Hexadezimal mit Number: 255 Hexadezimal mit parseInt: 255 Wir legen in sHex einen Hexadezimalwert ab, der in Flash mit einem vorangestellten 0x kenntlich gemacht wird. Wenn wir diesen Wert mit Number() und mit parseInt() auslesen, erhalten wir in beiden Fällen den gleichen, korrekten Dezimalwert. Bei der parseInt()-Funktion übergeben wir als Argument neben dem zu verwertenden String die Zahlenbasis 16 für Hexadezimalzahl, so dass eine Umrechnung erfolgen kann. Da Hexadezimalzahlen nicht zwangsläufig mit einem Präfix versehen werden – was erst recht gilt, wenn die Daten aus anderen Applikationen stammen –, werden sie in unserem Fall verschieden behandelt. 6. Ändern Sie die Initialisierung von sHex folgendermaßen (Fettdruck): var sHex:String = „ff“;

Ausgabe im Nachrichtenfenster : Hexadezimal mit Number: NaN Hexadezimal mit parseInt: 255 Durch das Löschen des Präfixes für Hexadeziamlwerte erkennt Number()die Zahlenbasis nicht mehr und kann keine korrekte Umrechnung vornehmen. Daher erhalten wir die Ausgabe NaN. Die parseInt()Funktion dagegen kann nach wie vor den entsprechenden Dezimalwert ermitteln. Übrigens: Sollten Sie testweise versuchen, an Number beim Aufruf ebenfalls eine Zahlenbasis zu übergeben, erhalten Sie eine Fehlermeldung, da nur genau ein Argument, nämlich das auszuwertende Element, zulässig ist.

7. Erweitern Sie das Skript um folgende Zeilen: var sZiffern:String = „5 Euro“;

trace(„Number: „ + Number(sZiffern));

Ausgabe im Nachrichtenfenster: Number: NaN parseInt: 5 Wir definieren zunächst einen String, den wir auswerten wollen. Anschließend versuchen wir, daraus mit Number() die enthaltene Zahl, hier die 5 als beispielhafte Prognose für den Benzinpreis 2009, zu extrahieren. Da Number() keine nicht-numerischen Zeichen (mit Ausnahme des erwähnten Präfix 0x) auswerten kann, erhalten wir die Rückmeldung NaN. Die parseInt()-Funktion kann Zahlen erkennen, solange ihnen kein nicht-numerisches Zeichen vorausgeht. Daher gibt uns das Nachrichtenfenster den korrekten Wert 5 aus. 8. Ändern Sie die Initialisierung von sZiffern wie folgt (Fettdruck):  var sZiffern:String = „Mehr als 5 Euro“;

Ausgabe im Nachrichtenfenster: Number: NaN parseInt: NaN Da der auszuwertende String mit einem nicht-numerischen Zeichen beginnt, kann auch die parseInt()Funktion keinen korrekten Wert mehr extrahieren und meldet wie Number() resignierend NaN. Bevor Sie mit als Zahlen benötigten, aber als String vorliegenden Daten arbeiten, sollten Sie sich daher immer vergewissern, dass der korrekte Datentyp generiert werden kann. Ansonsten kann es geschehen, dass eine fehlerhafte Berechnung durchgeführt wird, während Flash ganz verzweifelt versucht, Ihnen ein NaN mitzuteilen. Mit der globalen Funktion isNaN() besteht wie schon an anderer Stelle gezeigt die Möglichkeit, ganz gezielt zu ermitteln, ob ein Ausdruck einen mathematisch gültigen Wert ergibt.

8.4  Null, undefined

9. Erweitern Sie den Code um folgende Zeile:  trace(„Keine Zahl? „ + isNaN(sZiffern));

Ausgabe im Nachrichtenfenster: Keine Zahl? true Die Funktion isNaN() kontrolliert, ob das übergebene Argument, hier der in sZiffern gespeicherte String, keine Zahl darstellt. Das Ergebnis kann true (keine Zahl) oder false (Zahl) lauten. In unserem Fall erhalten wir true, denn der String enthält nicht-numerische Zeichen und bildet somit keine verwertbare Zahl. Bitte beachten Sie, dass der Rückgabewert true bedeutet, dass keine Zahl vorliegt – gerade für Einsteiger erweist sich diese Funktion mitunter als etwas verwirrend. 10. Ändern Sie den String wieder in die ursprüngliche Variante (Fettdruck):

var sZiffern:String = „5 Euro“;

Ein Test ergibt keine Änderung gegenüber vorher, denn nach wie vor enthält der abgefragte String nichtnumerische Zeichen. 11. Ändern Sie die letzte trace()-Anweisung wie folgt (Fettdruck):  trace(„Keine Zahl? „ + isNaN(parseInt(sZiffern)));

Ausgabe im Nachrichtenfenster: Keine Zahl? false Diesmal greifen wir nicht direkt auf den String zu, sondern fragen ab, ob das Ergebnis von parseInt(sZiffern) keine Zahl darstellt. Da wir, wie oben gesehen, mit parseInt() in diesem Fall sehr wohl eine gültige Zahl erhalten, gibt die isNaN()-Funktion false zurück, d. h. es trifft nicht zu, dass keine Zahl extrahiert werden kann. Um weitergehende Berechnungen mit dem Datentyp Number durchführen zu können, stehen einerseits zahlreiche Operatoren (insbesondere die arithmetischen – s. Kapitel Operatoren) sowie die Math-Klasse (s. Kapitel Math) zur Verfügung.

67

8.3 String Unter einem String versteht man ein einzelnes Zeichen oder eine beliebige Folge (Kette) von alphanumerischen Zeichen. Um einen String von anderen Datentypen zu unterscheiden, wird er mit einem einfachen oder doppelten Anführungszeichen eingeleitet und abgeschlossen: „a“

‘Hallo’

„Das ist ein längerer String. Er besteht aus zwei Sätzen.“ “.“

„1001“ ‘%&§ ’

Wichtig ist, dass das endende Anführungszeichen dem beginnenden entsprechen muss. Leiten Sie den String mit einem einfachen Anführungszeichen ein, können Sie nicht mit einem doppelten schließen. Neben Zahlen spielen Strings eine zentrale Rolle. Weitergehende Informationen finden Sie insbesondere im Kapitel zu den Operatoren (Konkatenation), zur String-Klasse sowie zu Textfeldern. Eine temporäre Typumwandlung wurde oben im Zusammenhang mit dem Konkatenationsoperator vorgestellt, als die Daten aus einem Textfeld vorübergehend, nämlich für den Augenblick der Zuweisung, mit Number(eingegebenerString) in eine Zahl umgewandelt wurden. Weitere Informationen finden Sie im Kapitel zur String-Klasse.

8.4 Null, undefined Der Datentyp null zeigt an, dass keine konkreten Daten vorhanden sind. Ruft man beispielsweise eine Methode auf, die mehr Parameter erwartet, als man übergibt, kann man null an der Stelle der nicht definierten Parameter verwenden. Dieser Datentyp besitzt nur einen einzigen Wert, nämlich den gleichnamigen Wert null. Der Datentyp undefined ist  – prosaisch formuliert  – ein enger Verwandter des Datentyps null. Auch er besagt dass Daten nicht vorhanden sind, wird aber anders als null von Flash automatisch Objekten zugewiesen, die nicht deklariert oder initialisiert wur-

68

den. So gilt eine nicht existente Variable ebenso wie eine nicht initialisierte Variable als undefined. Der Datentyp undefined besitzt als einzigen Wert undefined. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: trace(„nZahlen: “+nZahlen);

Ausgabe im Nachrichtenfenster: nZahlen: undefined Da es keine Deklaration von nZahlen gibt, ist dieses Objekt unbekannt, so dass Flash undefined zurückgibt. 3. Fügen Sie vor dem trace() ein: var nZahlen:Number;

Ausgabe im Nachrichtenfenster: nZahlen: undefined Das Ergebnis im Nachrichtenfenster ist das gleiche, da nZahlen zwar als Variable mit einem Datentyp angelegt wurde, aber noch über keinen konkreten Wert verfügt. Beachten Sie, dass die Deklaration bereits Einfluss auf den Arbeitsspeicher nimmt, auch wenn ein konkreter Wert als Inhalt noch fehlt. Alleine durch die Deklaration wird bereits Speicher belegt. Als Hinweis darauf, dass eine Variable bereits korrekt deklariert wurde, aber noch keinen gültigen Wert besitzt, verwenden Entwickler gerne eine Initialisierung mit dem Datentyp null:

Kapitel 8  Datentypen

8.6 Object Unter einem Object versteht man schlicht eine Sammlung an Eigenschaften, die ein wie auch immer geartetes „Etwas“ beschreiben. Da die Eigenschaften selbst einem beliebigen Datentyp  – und damit auch dem Datentyp Object  – angehören können, ist ein Object beliebig verschachtelbar. Das Object ist gewissermaßen die Mutter vieler anderer Klassen und damit anderer Datentypen wie etwa des erwähnten MovieClip. Zugriff auf die Objekteigenschaften erhalten wir durch den Punktoperator. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var oAuto:Object = new Object(); oAuto.tueren = 2; oAuto.raeder = 4;

 trace(„Das Auto besitzt „+oAuto.raeder+“ Räder, „+oAuto.tueren+“ Türen.“);

Ausgabe im Nachrichtenfenster: Das Auto besitzt 4 Räder, 2 Türen.

var nZahlen:Number = null;

Wir haben ein Objekt mit spezifischen Eigenschaften eingerichtet. Man kann diese Deklaration noch erweitern, indem man dem Object Funktionen (Methoden) und Ereignisse zuweist. Das Objekt stellt beispielsweise eine ideale Möglichkeit dar, um Eigenschaften zu speichern und sie bei Bedarf auf visuell wahrnehmbaren Elementen wie einem MovieClip zu übertragen.

8.5 MovieClip

8.7 Void

Als einziger Datentyp ist der MovieClip mit einem grafischen Element verknüpft. Dies und die Tatsache, dass keine in AS 2 geskriptete Flash-Anwendung ohne MovieClips auskommt, macht ihn zu einem zentralen Datentyp. Er wird ausführlich im Kapitel MovieClips dargestellt und taucht in jedem der im zweiten Teil behandelten Workshops auf.

Wie die Datentypen null und undefined kennt dieser Datentyp nur einen einzigen Wert, nämlich Void. Er findet in Funktionsdeklarationen Verwendung, die keinen Rückgabewert besitzen. Eine solche Definition könnte so aussehen: function ohneRueckgabe():Void{ //Anweisungen; }

Das sieht momentan vielleicht etwas abstrakt aus, wird aber konkreter, wenn Sie einen Blick in das Kapitel Funktionen und Methoden werfen.

9

Arrays

Wie wir gesehen haben, speichern wir in einer Variablen einen Wert, um ihn später wiederverwenden zu können. Doch was geschieht, wenn wir nicht nur einen, sondern mehrere Werte speichern müssen? Für diese Fälle bietet Flash mit dem Array einen eigenen Datentyp an, der als eine Art Variable mit theoretisch unendlich viel Speicherplatz fungiert. In AS 2.0 ist es nicht möglich, wie bei Variablen einen Datentyp vorzugeben, da das Array selbst als Datentyp gilt, der einer Variablen zugewiesen wird.

9.1 Arrays einrichten und die Länge definieren Ein Array lässt sich mit dem Operator new definieren: var aNamen:Array = new Array();

Wir legen eine Variable mit dem Datentyp Array an. Durch den verwendeten Konstruktor erzeugen wir eine neue Objektinstanz und initialisieren alle Eigenschaften, die zur Klasse Array gehören. Da wir noch keinen konkreten Inhalt zugewiesen haben, stellt aNamen nichts weiter als eine leere Kiste undefinierter Größe dar. Wissen wir von Anfang an, wie viele Elemente aufgenommen werden sollen, können wir beim Erstellen die Größe angeben: var aNamen2:Array = new Array(10);

Nun haben wir ein Array angelegt, das über zehn leere Plätze zur Aufnahme von Werten verfügt. Den Unterschied zwischen beiden Array-Definitionen können wir über die wichtigste Eigenschaft, die ein Array besitzt, näher betrachten, nämlich die Gesamt-

länge bzw. Array.length. Die Länge entspricht der Anzahl der Elemente eines Arrays. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var aNamen:Array = new Array();  trace(„Länge aNamen: ”+aNamen. length);

Sie erhalten im Nachrichtenfenster die Ausgabe 0. Wir haben zwar ein Array angelegt, ihm aber weder konkrete Inhalte zugewiesen noch die Gesamtlänge definiert. Daher besitzt es die Länge 0. 3. Erweitern Sie das Skript: var aNamen2:Array = new Array(10);  trace((„Länge aNamen2: ”+aNamen2. length);

Die zweite Ausgabe im Nachrichtenfenster lautet 10. Auch hier ist unser Array noch leer, doch geben wir diesmal die Gesamtlänge mit 10 vor. Für die Ausgabe spielt es keine Rolle, ob diese Stellen mit konkreten Werten belegt oder nur zur Aufnahme von Werten eingerichtet wurden. Denn wir greifen mit der Eigenschaft length auf die Größe anstatt auf den Inhalt eines Arrays zu. Die Größenangabe übrigens bedeutet keine unveränderliche Limitierung. Ein Array, dessen Länge wir beim Einrichten beispielsweise auf 10 festgelegt haben, kann zu jedem beliebigen Zeitpunkt mehr Elemente aufnehmen, falls erforderlich. Flash kennt eine alternative, etwas kürzere Schreibweise, um Arrays einzurichten. 4. Fügen Sie folgende Definition von aZahlen hinzu: var aZahlen:Array = [];

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

69

70

 trace((„Länge aZahlen: ”+ aZahlen. length);

Anstelle des Konstruktors new Array() reicht die Verwendung von eckigen Klammern, um ein neues Array mit der Länge 0 einzurichten. Allerdings können wir bei dieser Vorgehensweise keine Gesamtlänge angeben. Dazu müssen wir explizit die Eigenschaft length ansprechen. 5. Ergänzen Sie nach der Array-Definition und vor dem trace()-Befehl: aZahlen.length = 6; trace(aZahlen);

trace(aZahlen.length);

Entsprechend unserer Vorgabe setzt Flash die Länge mit 6 fest und gibt diesen Wert aus. Da das Array jedoch keine konkreten Inhalte enthält, taucht im Nachrichtenfenster sechsmal die Angabe undefined auf.

9.2 Arrays bei der Deklaration füllen Natürlich lässt sich bei der Einrichtung ein konkreter Inhalt mitgeben. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aNamen:Array = new Array(„Rince­ wind“,„Herrena“,„Alter Großvater“);

Die Gesamtlänge des Arrays aNamen beträgt 3. Darüber hinaus besitzt es einen konkreten Inhalt, bestehend aus drei Elementen, die in kommaseparierter Form übergeben werden. Die Elemente sind vom Datentyp String (und stammen aus der Scheibenwelt, aber das ist in diesem Universum an dieser Stelle nebensächlich). Eine gleichzeitige Angabe von Inhalt und Länge ist nicht möglich, da Flash aufgrund des unvermeidlichen Kommas, das zur Trennung der Argumente verwendet wird, von einer Definition des Inhalts ausgeht. Das können wir testen, indem wir wahlweise an erster oder letzter Stelle innerhalb der Klammern eine Zahl mitgeben. 3. Ändern Sie die Deklaration von aNamen folgendermaßen (Fettdruck):  var aNamen:Array = new Array(7,„Rince wind“,„Herrena“,„Alter Großvater“);

Kapitel 9  Arrays

Trotz der Zahl 7 gibt das Nachrichtenfenster die Länge des Arrays mit 4 an, bestehend aus der eigentlich für die Größendefinition gedachten 7 sowie den drei Namen. 4. Löschen Sie wieder die 7, so dass die Definition von aNamen derjenigen aus Schritt 2 entspricht. Eine Längenangabe ist also nur möglich, wenn bei der Verwendung des Operators new ein einziges Argument, bestehend aus einer positiven Ganzzahl, übergeben wird. Das bedeutet allerdings zugleich, dass Sie auf diese Weise kein Array einrichten können, das als anfänglichen Wert eine einzige Zahl enthält. Auch die alternative Schreibweise lässt es zu, das Array bereits bei der Deklaration zu füllen. 5. Um konkrete Inhalte zuzuweisen, schreiben Sie: var aZahlen:Array = [5,7,9,11,13,15];

6. Ergänzen Sie danach einen trace()-Aufruf:  trace(„aZahlen: “+aZahlen+ „, Länge: “+aZahlen.length);

Flash gibt im Nachrichtenfenster sowohl die konkreten Inhalte, also die zugewiesenen Zahlen, wie auch die Gesamtlänge 6 an. Wir werden im Nachfolgenden hauptsächlich mit dieser Form der Deklaration arbeiten, da sie derzeit noch die üblichere Schreibweise darstellt.

9.3 Zugriff auf Inhalte Wenn wir Arrays verwenden, dann reicht es nicht aus, sie nur zu füllen. Sinn machen sie erst, wenn wir auch wieder auf die Daten zugreifen können. Die einfachste Variante entspricht derjenigen, die wir von Variablen her kennen und oben bereits verwendet haben. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var aZahlen:Array = [5,7,9,11,13,15];  var aNamen:Array = [„Rincewind“,„Herrena“,„Alter Groß­ vater“];  trace(„aZahlen enthält folgende Elemente: “+aZahlen);  trace(„aNamen enthält folgende Elemente: “+ aNamen);

9.3  Zugriff auf Inhalte

Flash listet im Nachrichtenfenster alle Zahlen bzw. alle Namen auf, die wir zugewiesen haben. Damit lässt sich noch relativ wenig anfangen. Denn wirklich hilfreich ist ein Array nur durch das gezielte Auslesen eines einzelnen Werts. Alle Elemente innerhalb eines Arrays liegen auf einer eindeutig definierten Position, wobei das erste Element dem Index 0 entspricht. Über diesen Index sind wir in der Lage, beliebig auf Werte zuzugreifen. 3. Schreiben Sie am Ende des bisherigen Codes:  trace(„Erstes Element in aZahlen: “+aZahlen[0]);

Im Nachrichtenfenster erhalten wir als erstes Element die Zahl 5. Der Indexzugriff erfolgt über eine eckige Klammer, in die wir diejenige Positionsnummer eintragen, die wir auslesen wollen. Dabei spielt es selbstverständlich keine Rolle, welchen Datentyp die im Array gespeicherten Werte besitzen. 4. Schreiben Sie am Ende des bisherigen Codes:  trace(„Erstes Element in aNamen: “+ aNamen [0]);

Das Nachrichtenfenster gibt den zauberhaften Namen „Rincewind“ an. Wenn wir mit 0 auf das erste Element eines Arrays zugreifen, dann lautet der Index des letzten Elements Array-Länge minus 1. 5. Schreiben Sie am Ende des bisherigen Codes:  trace(„Letztes Element in aNamen: “+ aNamen [aNamen.length-1]);

Im Nachrichtenfenster (und zum Glück nur dort) taucht der Troll „Alter Großvater“ auf. Die Länge des Arrays aNamen beträgt 3, denn es enthält die drei Strings Rincewind, Herrena und Alter Großvater. Der erste String liegt auf Indexposition 0, wie wir gesehen haben. Der zweite besitzt dann Index 1 und der dritte Index 2, was der Gesamtlänge 3 minus 1 entspricht, wie Abbildung 12 verdeutlicht.

71

Um den vollständigen Inhalt eines Arrays elementweise auszulesen, müssen wir eine Schleife verwenden, deren Zählvariable wir bequemerweise für den Indexzugriff einsetzen können. 6. Ergänzen Sie den bisherigen Code am Ende:  for(var i:Number = 0; i < aNamen. length; i++){  trace(„Element an Index „+i+“: „+ aNamen[i]); }

Anders als bei dem einfachen Auslesen mit dem trace()-Befehl aus Schritt 11 erhalten wir jetzt eine zeilenweise Auflistung jedes einzelnen Elements. Denken Sie daran, als ersten Index die 0 und als letzten die Arraylänge minus 1 zu verwenden. Letzteres geschieht automatisch, indem wir i als kleiner aNa­ men.length definieren. Sie werden sich sicher fragen, warum man für den Zugriff auf den letzten Index die Formulierung i < aNamen.length anstatt der konkreten 2 verwenden sollte. Die dynamische Angabe mit Hilfe der Arraylänge besitzt gegenüber der konkreten Zahl den unschätzbaren Vorteil, dass sie in jedem Fall funktioniert, also auch dann, wenn wir die Gesamtlänge des Arrays nicht kennen oder wenn wir die Länge durch Einfügen bzw. Löschen einzelner Elemente ändern. Selbstverständlich kann der Zugriff auch mit Hilfe der anderen Schleifen erfolgen, z. B. mit der for inSchleife. 7. Ersetzen Sie den Schleifenaufruf im vorherigen Schritt durch: for (var e:String in aNamen) {

 trace(„Element an Index „+e+“: „+ aNamen[e]); }

Beachten Sie, dass die for in-Schleife beim letzten Element beginnt. Wenn die Reihenfolge, in der die Elemente ausgelesen werden, eine Rolle spielt, könnte diese Schleife problematisch sein. Alternativ kann die while-Schleife verwendet werden. 8. Ersetzen Sie den Schleifenaufruf im vorherigen Schritt durch:

Abbildung 12:  Arraylänge, -index und -inhalte

var i:Number = 0;

while(i < aNamen.length){

72

 trace(„Element an Index „+i+“: „+ aNamen[i]);  i++; }

Am häufigsten ist die erste Variante, also die forSchleife.

9.4 Arrays dynamisch füllen Oft wissen wir nicht, welche Inhalte ein Array enthalten soll. Wenn wir beispielsweise userabhängig die besuchten Seiten unserer Website erfassen wollen, um eine Art Verlauf darstellen zu können, oder wenn wir Highscores speichern, dann sind unsere Arrays anfangs notwendigerweise leer. Flash stellt mehrere Möglichkeiten zur Verfügung, um komfortabel sukzessive Elemente in Arrays einzufügen. Der Operator [] ermöglicht neben dem Auslesen auch das gezielte Setzen von Elementen an einer bestimmten Position. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aNamen:Array = [„Rincewind“,„Herrena“,„Alter Großva­ ter“]; trace(„aNamen: “+ aNamen); aNamen[1] = „Trymon“;

trace(„aNamen: “+ aNamen);

Zunächst erhalten Sie im Nachrichtenfenster wie zuvor die Ausgabe „Rincewind, Herrena, Alter Großvater“. In der zweiten Zeile dagegen lautet die Ausgabe „Rincewind, Trymon, Alter Großvater“. Wir haben das Element auf Index 1, also das Element an zweiter Stelle, durch den String Trymon ersetzt. Hätten wir das erste Element ersetzen wollen, wäre die Indexnummer 0, und beim letzten Element aNamen. length-1 gewesen. Was geschieht aber, wenn wir bei einer Zuweisung eine Indexposition verwenden, die nicht existiert, weil sie über die Gesamtlänge des angesprochenen Arrays hinausgeht? 3. Ändern Sie den Arrayzugriff durch folgenden Indexwert (Fettdruck): aNamen[6] = „Trymon“;

Kapitel 9  Arrays

Wie Sie im Nachrichtenfenster sehen können, ergänzt Flash einfach die fehlenden Indexpositionen 3 bis 6. Auf den Positionen 3 bis 5 liegen keine Elemente vor, Flash gibt also undefined aus, während auf der letzten Position der String „Trymon“ eingefügt wird. Ähnlich lässt sich auch die Methode splice(), das Schweizer Universalmesser der Array-Methoden, einsetzen, wie wir weiter unten im Zusammenhang mit dem Löschen näher besprechen werden. Da es häufig vorkommt, dass wir am Ende eines Arrays neue Elemente einfügen wollen, verfügt Flash über eine eigene Methode. 4. Ersetzen Sie den bisherigen Code durch:  var aAutoren:Array = [„Terry Prat­ chett“]; trace(„aAutoren: “+ aAutoren);

aAutoren.push(„Robert Rankin“); trace(„aAutoren: “+ aAutoren);

Die erste Ausgabe zeigt nur den bei der Initialisierung mit gegebenen String an, während die zweite Ausgabe zusätzlich den über push() eingefügten String enthält. Mit jedem weiteren push() wird das Array um das betreffende, an letzter Stelle eingefügte Element verlängert. 5. Fügen Sie einen weiteren push()-Befehl ein: aAutoren.push(„Douglas Adams“); trace(„aAutoren: “+ aAutoren);

Erneut hängt Flash an das bestehende Array den zuletzt benannten String an. Die push()-Methode lässt es zu, mehrere Elemente auf einmal anzuhängen. 6. Erweitern Sie den bisherigen Code:  aAutoren.push(„Tom Holt“,„Esther Friesner“); trace(„aAutoren: “+ aAutoren);

Der Reigen von Autoren erweitert sich um die mit der erneuten push()-Methode übergebenen Personen. Im Gegensatz zu push() können wir mit un­ shift() jeweils an erster Stelle ein oder mehrere neue Elemente einfügen. 7. Erweitern Sie den bisherigen Code:  aAutoren.unshift(„Craig Shaw“,„Robert Asprin“); trace(aAutoren);

9.4  Arrays dynamisch füllen

Alle Elemente im Array werden um zwei Stellen verschoben, und an den ersten beiden Stellen befinden sich nun die Strings „Craig Shaw“ und „Robert Asprin“. Sowohl die push()- wie die unshift()-Methode geben die neue Länge des Arrays zurück, so dass man diese, falls benötigt, direkt beim Aufruf einer der Methoden ermitteln kann. 8. Ändern Sie den bisherigen Code (Fettdruck):  trace(aAutoren.unshift(„Craig Shaw“,„Robert Asprin“));

Das Nachrichtenfenster gibt zusätzlich zu den bisherigen Informationen die Gesamtlänge des neuen Arrays mit 7 an. Wollen wir den Inhalt eines bestehenden Arrays in ein anderes kopieren oder mehrere Arrays in einem neuen Array zusammenführen, können wir die concat()-Methode verwenden. 9. Erweitern Sie den bisherigen Code:  var aAutorenKopie:Array = aTitel.con­ cat();  trace(„aAutorenKopie: „+ aAutoren­ Kopie);

Wie im Nachrichtenfenster zu sehen, stellt aAu­ torenKopie eine vollständige Kopie von aAuto­ ren dar. Beide Arrays sind unabhängig voneinander, so dass nachfolgende Änderungen in aAutoren keine Auswirkungen auf seinen Zwilling haben. Die concat()-Methode erlaubt es, während des Kopierens weitere Elemente als Argument zu übergeben. 10. Ändern Sie den bisherigen Code (Fettdruck):  var aAutorenKopie:Array = aAutoren. concat(„John Lucas“,„John Brosnan“);

Die Kopie wird gegenüber dem Original um die beiden an concat() als Parameter übergebene Strings erweitert. Dabei fügt Flash die neuen Elemente am Ende des Arrays ein. Als Parameter können auch komplette Arrays übergeben werden, die anders als etwa bei der push()-Methode in Form kommaseparierter Elemente in das neue Array übernommen werden. Besteht der Parameter aus einem mehrdimensionalen Array, erfolgt allerdings keine Trennung in kommaseparierte Elemente. Wollen Sie Elemente eines Arrays an beliebiger Stelle in ein anderes Array kopieren, bietet sich die slice()-Methode an.

73

11. Ersetzen Sie die im vorigen Schritt verwendete concat()-Methode durch:  var aAutorenKopie:Array = aAutoren. slice(2,4);

Wie im Nachrichtenfenster zu sehen, enthält das neue Array alle Strings der Indexpositionen 2 bis 4 von aAutoren. Das Array, aus dem kopiert wird, bleibt dabei unverändert. Der erste Parameter definiert den Beginn, der zweite das Ende des Kopiervorgangs, jeweils übergeben als Indexposition. Da sich, wie wir im nächsten Abschnitt noch sehen werden, die slice()Methode mit der fast gleichlautenden splice()-Methode emulieren lässt, kann man im Einzelfall durchaus auf sie verzichten. Arrays sollten Werte gleichen Datentyps enthalten. Zwar ist es möglich, die Inhalte kunterbunt zu mischen, aber dann laufen wir Gefahr, bei der Verwendung der Inhalte Fehler zu machen, z. B. weil wir versuchen, mit den Elementen Berechnungen durchzuführen, obwohl wir Zahlen und Strings gespeichert haben. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript: var aInhalt:Array = [„Text“,5,true]; trace(aInhalt);

Das Anlegen des gemischten Arrays nimmt Flash klaglos hin und das Nachrichtenfenster zeigt alle Elemente an. 3. Erweitern Sie das Skript:  for(var i:Number = 0; i < aInhalt. length; i++){  trace(aInhalt[i] * 2); }

Beim Testen gibt Flash nach dem korrekten Inhalt des Arrays NaN, 10, 2 aus. Das Ergebnis NaN erhalten wir bei dem Versuch, den String Text mit einer Zahl zu multiplizieren, was natürlich nicht funktionieren kann. Der darauf folgende Wert 10 ist korrekt, während die 2 vielleicht überrascht, schließlich haben wir im Array an der letzten Stelle einen Bool’schen Wert, nicht jedoch eine Zahl stehen. Da sich true und false auch mit 1 und 0 darstellen lassen, führt Flash eine automatisch Typkonvertierung durch und ermöglicht eine Rechnung mit dem Wert true. Wir haben also nur in einem einzigen Fall einen gültigen,

74

in einem Fall einen völlig falschen und in einem Fall einen scheinbar richtigen Wert erhalten, der im späteren Verlauf Folgefehler provozieren kann. Sollten Sie dennoch mit verschiedenen Datentypen arbeiten müssen, z. B. weil sich die benötigten Informationen aufeinander beziehen (Namens- und Altersangaben etc.), so bietet sich die Verwendung von parallelen oder Tandem-Arrays an. Damit sind einfach verschiedene Arrays gemeint, die an übereinstimmenden Array-Positionen miteinander verknüpfte Werte speichern. 4. Ersetzen Sie den bisherigen Code durch:  var aNamen:Array = [„Peter“,„Ulla“, „Severin“,„Johannes“];  var aAlter:Array = [17,12,22,31];  var nIndex:Number = 2;

 trace(aNamen[nIndex] + „ ist „+ aAlter[nIndex] + „ Jahre alt“);

Ausgabe im Nachrichtenfenster: Severin ist 22 Jahre alt In aNamen speichern wir die Namen diverser Personen und in aAlter ihr entsprechendes Alter. Die Verknüpfung zwischen den Daten erfolgt über eine Variable, in der wir jeweils den Index festlegen, mit dem wir die Daten auslesen. Solange dieser Wert für den gleichzeitigen Zugriff auf beide Arrays identisch ist, werden die zugehörigen Werte korrekt ausgelesen. Eine Alternative zu dieser Variante stellt ein Array dar, das jedes Wertepaar als assoziatives Array aufnimmt (s. u.).

Kapitel 9  Arrays

2. Weisen Sie actions folgendes Bildskript zu:  var aTitel:Array = [„Das Licht der Phantasie“, „Das Erbe des Zaube­ rers“];

 trace(„aTitel nach der ersten Initia­ lisierung: “+ aTitel); aTitel = [];

 trace(„aTitel nach der Zuweisung: “+ aTitel);

Der erste trace()-Befehl gibt die anfangs zugewiesenen Titel aus, während der zweite Befehl nur noch den String anzeigt, den wir als Parameter übergeben. Das Array dagegen besitzt zu diesem Zeitpunkt keinen Inhalt mehr, da es mit einem leeren Array überschrieben wurde. Den gleichen Effekt erzielen wir, wenn wir der Längeneigenschaft 0 zuweisen. 3. Ersetzen Sie die zweite Zuweisung von aTitel durch: aTitel.length = 0;

Das Nachrichtenfenster zeigt das gleiche Ergebnis wie zuvor. Indem wir die Array-Länge auf 0 setzen, werden alle Elemente entfernt, die sich innerhalb des Arrays befanden. Wir haben vorhin mit push() und unshift() zwei Methoden kennen gelernt, die es erlauben, an letzter bzw. erster Stelle eines Arrays neue Elemente einzufügen. Die korrespondierenden Methoden zum Löschen lauten pop() und shift(). 4. Ersetzen Sie die dritte und vierte Zeile durch:

9.5 Löschen von Elementen Obgleich es prinzipiell möglich ist, macht es in der Praxis natürlich keinen Sinn, ein Array endlos zu füllen, ohne dass man die nicht mehr benötigten Elemente entfernen kann. Wie beim Einfügen bietet uns Flash gleich mehrere Möglichkeiten an. Die einfachste Variante haben wir eigentlich schon beim Einrichten der Arrays kennen gelernt. Denn wenn wir ein Array mit einem bereits verwendeten Namen neu einrichten, wird das zuvor existierende Array automatisch überschrieben. 1. Erstellen Sie einen neuen Film.

aTitel.pop();

 trace(„aTitel nach dem Löschen der letzten Stelle: “+ aTitel);

Wie der zweite trace()-Befehl im Nachrichtenfenster zeigt, wird der zweite Titel im Array aTitel gelöscht, übrig bleibt der String „Das Licht der Phantasie“. Im Unterschied zu push() können wir bei pop() keine Parameter übergeben, es wird immer nur ein einziges Element angesprochen. Sie können das testen, indem Sie beim Aufruf von pop() beispielsweise 2 als Parameter übergeben. Das Ergebnis ändert sich nicht; allerdings erhalten Sie auch keine Fehlermeldung trotz des fehlerhaften Aufrufs der Methode.

9.5  Löschen von Elementen

5. Ersetzen Sie aTitel.pop() durch: aTitel.shift();

Ausgabe im Nachrichtenfenster: Das Erbe des Zauberers Jetzt fehlt beim zweiten trace() im Nachrichtenfenster nicht mehr das letzte, sondern das erste Element. Auch hier würde die Übergabe eines Arguments an die shift()-Methode, beispielsweise um die ersten beiden Elemente zu löschen, folgenlos bleiben. Wollen wir innerhalb eines Arrays ein oder mehrere Elemente löschen, bietet sich die splice()-Methode an. Dazu benötigen wir ein größeres Array. 6. Ersetzen Sie den bisherigen Code durch:  var aTitel:Array = [„Das Licht der Phantasie“, „Das Erbe des Zauberers“, „Apocalypso“, „Warten auf OHO“, „Kohl des Zorns“, „Der Zeitdieb“];

 trace(„aTitel nach der ersten Initia­ lisierung: „+aTitel); aTitel.splice(2, 3);

 trace(„aTitel nach dem Löschen: „+aTitel);

Ausgabe im Nachrichtenfenster: aTitel nach der ersten Initialisierung: Das Licht der Phantasie,Das Erbe des Zauberers,Apocalypso,Warten auf OHO,Kohl des Zorns,Der Zeitdieb aTitel nach dem Löschen: Das Licht der Phantasie,Das Erbe des Zauberers,Der Zeitdieb Wie im Nachrichtenfenster zu erkennen, löscht Flash die Titel von der dritten bis fünften Stelle. Die splice()-Methode erwartet als Parameter den Index, ab dem die betreffende Operation beginnen soll, sowie die Anzahl der Elemente, die zu löschen sind. Da wir ab der dritten Stelle drei Titel entfernen wollen, übergeben wir als Index 2 (Sie erinnern sich: Index 0 entspricht dem ersten Element, also befindet sich das dritte Element auf Index 2) sowie 3 als Anzahl. Noch einfacher gestaltet sich das Löschen, wenn wir ab der dritten Stelle alles entfernen wollen, ohne mit der Eigenschaft length zu arbeiten. 7. Ändern Sie den Aufruf von splice() wie folgt (Fettdruck): aTitel.splice(2);

75

Nun bleiben die ersten beiden Titel übrig. Übergeben wir an splice() nur den Index, wird alles bis zum Ende des Arrays gelöscht. Damit besitzt splice() genügend Flexibilität, um alle zuvor beschriebenen Lösch-Methoden zu ersetzen. Das letzte Element etwa ließe sich mit aTitel.splice(aTitel. length-1) und das erste mit aTitel.splice(0,1) löschen. Anders als mit pop() und shift() können wir bei splice(), wie gesehen, gleich mehrere Elemente entfernen. Darüber hinaus erlaubt es splice(), Elemente durch andere zu ersetzen oder neue hinzuzufügen. 8. Ändern Sie den Aufruf von splice() wie folgt (Fettdruck):  aTitel.splice(2,3,„Einfach göttlich“,„Schweinsgalopp“);

Damit ersetzen wir, wie das Nachrichtenfenster beim zweiten trace()-Befehl zeigt, die Titel von Rankin durch weitere Titel von Pratchett (sollten Sie damit jetzt wenig anfangen können, dann gehen Sie doch mal in die nächste Buchhandlung). Last not least ermöglicht es der Tausendsassa splice(), neue Elemente ohne gleichzeitiges Löschen einzufügen. 9. Ändern Sie den Aufruf von splice() (Fettdruck):  aTitel.splice(2,0,„Einfach göttlich“,„Schweinsgalopp“);

Wie im Nachrichtenfenster zu erkennen, erweitern wir das Array ab Index 2 um die beiden als Argument an splice() übergebenen Strings. Da die Anzahl der zu löschenden Elemente auf 0 festgelegt wurde, bleiben dabei alle Elemente des Arrays erhalten. Mitunter müssen wir Elemente entfernen, ohne diese völlig zu verlieren. 10. Ändern Sie den bisherigen Code wie folgt (Fettdruck):  var aTitel:Array = [„Das Licht der Phantasie“, „Das Erbe des Zaube­ rers“, „Apocalypso“, „Warten auf OHO“, „Kohl des Zorns“, „Der Zeit­ dieb“];

 trace(„aTitel nach der ersten Initi­ alisierung: „+aTitel);  var aGeloescht:Array = aTitel. splice(2,3);

76

Kapitel 9  Arrays

 trace(„aTitel nach dem Löschen: „+aTitel);

trace(„aGeloescht: „+ aGeloescht);

Ausgabe im Nachrichtenfenster: aTitel nach der ersten Initialisierung: Das Licht der Phantasie,Das Erbe des Zauberers,Apocalypso,Warten auf OHO,Kohl des Zorns,Der Zeitdieb aTitel nach dem Löschen: Das Licht der Phantasie,Das Erbe des Zauberers,Der Zeitdieb aGeloescht: Apocalypso,Warten auf OHO,Kohl des Zorns Aus dem Array werden die Titel gelöscht, die nicht von Pratechett stammen, also die Elemente an Indexposition 2 bis 4. Anders als zuvor gehen diese Elemente jetzt nicht mehr verloren, sondern werden direkt dem neuen Array aGeloescht zugewiesen. Das funktioniert auf diese einfache Weise, weil die splice()Methode beim Ausführen ein Array zurückgibt. <<Meinen Sie vielleicht „Pratchett“?>> Auch pop() und shift() besitzen einen Rückgabewert, der jedoch zu einem anderen Datentyp gehört, so dass der Versuch, auf die gleiche Art diese Methoden einzusetzen, zu einer Fehlermeldung unter AS 2.0 führt. 11. Ändern Sie die Initialisierung von aGeloescht (Fettdruck):

var aGeloescht:Array = aTitel.pop();

Beim Ausführen meldet Flash empört: „Typenkonflikt in Zuweisungsanweisung: Object gefunden, aber Array wird benötigt“. Die direkte Zuweisung macht so keinen Sinn. Wie wir oben gesehen haben, erwartet Flash nun ein Array. 12. Ändern Sie die Initialisierung von aGeloescht (Fettdruck):  var aGeloescht:Array = [aTitel. pop()];

Alternativ geht auch: var aGeloescht:Array = new Array(aTitel.pop());

Flash füllt das Array aGeloescht nun korrekt. Das gleiche funktioniert auch mit der shift()-Methode. Sollte dies noch zu abstrakt sein, mag es helfen, sich die genannten Titel in einer gut sortierten Buchhandlung zu besorgen.

Vorsicht ist beim Zugriff auf ein Array mit variabler Länge geboten. Wenn wir beispielsweise aus einem Array ein bestimmtes Element, das mehrfach auftritt, löschen wollen, dann verkürzt der Löschvorgang das Array natürlich jeweils um 1. Führen wir den Vorgang in einer Schleife aus, die innerhalb der Schleifenbedingung auf die Gesamtlänge des Arrays zugreift, schleichen sich unter bestimmten Umständen Fehler ein. Nehmen wir an, wir wollten aus einem Array die Zahl 7 löschen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: aZahlen = [2,3,5,7,7,11];

 for(var i = 0; i < aZahlen.length; i++){  if(aZahlen[i]==7){

 aZahlen.splice(i,1); } }

trace(aZahlen);

Ausgabe im Nachrichtenfenster: 2,3,5,7,11 Wie wir sehen können, wird die Zahl 7 nur einmal gelöscht. Diese Zahl taucht erstmals auf Index 3, also an vierter Stelle auf. Wenn Flash sie findet, wird sie entsprechend unserer Anweisung in der if-Bedingung gelöscht. Dadurch verkürzt sich jedoch die Gesamtlänge des Arrays und die zweite 7, die auf Index 4 stand, rutscht nun automatisch auf den gelöschten Index 3. Dieser Platz wird aber nicht noch mal kontrolliert, denn das ist ja eben erst geschehen. Flash inkrementiert statt dessen i korrekt auf den nächst höheren Wert und befragt das Element auf Index 4. Das ist nun die 11, nicht, wie vorher, die 7. Anders formuliert: Wenn zwei aufeinanderfolgende Elemente identisch sind, dann führt unsere Methode zu einem fehlerhaften Löschen. Würden wir dagegen mit dem letzten Element beginnen und uns zum ersten vorarbeiten, dann taucht dieses Problem nicht auf. Die Schleife muss also lediglich anders formuliert werden, um zu einem richtigen Ergebnis zu führen: 3. Ändern Sie die Schleife (Fettdruck): aZahlen = [2,3,5,7,7,11];

9.6  Arrays sortieren und durchsuchen

 for(var i = aZahlen.length-1; i >= 0; i--){  if(aZahlen[i]==7){

 aZahlen.splice(i,1); } }

trace(aZahlen);

Ausgabe im Nachrichtenfenster: 2,3,5,11 Alternativ kann man auch eine for in-Schleife verwenden, die automatisch beim letzten Element beginnt: 4. Ersetzen Sie die for- durch eine for in-Schleife (Fettdruck): aZahlen = [2,3,5,7,7,11]; for(var i in aZahlen){  if(aZahlen[i]==7){

 aZahlen.splice(i,1); } }

trace(aZahlen);

Im Nachrichtenfenster erscheint die gleiche Zahlenfolge. Mitunter wollen wir die Länge des Arrays nicht ändern, aber es sollen trotzdem einzelne Elemente gelöscht werden. In diesem Fall hilft die delete-Anweisung. 5. Ersetzen Sie den Aufruf von splice() durch (Fettdruck): if(aZahlen[i]==7){

77

6. Erweitern Sie den Code um: trace(„-------------------“); for(e in aZahlen){

 trace(„for in: „+aZahlen[e]); }

trace(„-------------------“);

for(i = 0; i < aZahlen.length; i++){  trace(„for: „+aZahlen[i]); }

Ausgabe im Nachrichtenfenster: 2,3,5,undefined,undefined,11 ------------------for in: 11 for in: 5 for in: 3 for in: 2 ------------------for: 2 for: 3 for: 5 for: undefined for: undefined for: 11 Die for in-Schleife kann die gelöschten Elemente nicht mehr finden, während die for-Schleife durch den Zugriff auf die unverändert gebliebenen Indexwerte alle Stellen des Arrays abfragen kann. Die beiden trace()-Anweisungen mit der gestrichelten Linie wurde nur der Lesbarkeit halber eingefügt.

delete aZahlen[i];

9.6 Arrays sortieren und durchsuchen

Ausgabe im Nachrichtenfenster: 2,3,5,undefined,undefined,11

Mitunter reicht es nicht aus, in einem Array Elemente in der Reihefolge ihres Speicherns zu verwalten. Wenn Sie beispielsweise eine Website betreiben, bei der sich User anmelden müssen, dann ist es notwendig, die Daten in irgendeiner Form zu sortieren. Flash bietet hierzu mehrere Möglichkeiten an.

}

Zwar greifen wir wie vor auf die selben Indexpositionen zu, sobald dort eine Übereinstimmung entsprechend der if-Bedingung gefunden wird. Doch diesmal löschen wir nicht diese Position, sondern nur den zugeordneten Wert. Dadurch wird er durch undefined ersetzt. Die Gesamtlänge des Arrays ändert sich im Gegensatz zu vorher nicht. Beachten Sie, dass Flash beim Auslesen des Arrays abhängig von der verwendeten Schleife die gelöschten Werte verschieden behandelt.

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aVornamen:Array = [„Robert“,„Peter“, „Hans“,„Ulrike“,„Brigitte“,„Claudia“]; trace(aVornamen.sort());

78

Ausgabe im Nachrichtenfenster: Brigitte,Claudia,Hans,Peter,Robert,Ulrike Flash führt mit Hilfe der sort()-Methode eine einfache alphabetische Sortierung durch. Führen wir denselben Test mit Zahlen durch. 3. Erweitern Sie das Skript wie folgt (Fettdruck):  var aVornamen:Array = [„Robert“,„Peter“, „Hans“,„Ulrike“,„Brigitte“,„Claudia“];  var aZahlen:Array = [17, 26, 21, 35, 38, 43]; trace(aVornamen.sort()); trace(aZahlen.sort());

Ausgabe im Nachrichtenfenster: Brigitte,Claudia,Hans,Peter,Robert,Ulrike 17,21,26,35,38,43 Die Zahlen werden in aufsteigender Reihenfolge sortiert. Flash scheint also zwischen Zahlen und Strings zu unterscheiden und dementsprechend die Sortierung vorzunehmen. 4. Ersetzen Sie die letzte Zahl in aZahlen durch eine 2 (Fettdruck):  var aZahlen: Array = [17, 26, 21, 35, 38, 2];

Ausgabe im Nachrichtenfenster: 17,2,21,26,35,38 Entgegen unserer Erwartung befindet sich die 2, die eindeutig die kleinste Zahl im Array darstellt, nicht an erster Stelle. Tatsächlich behandelt die sort()Methode alle Elemente, unabhängig von ihrem Datentyp, als String. Daher erfolgte die erste Sortierung mit den Namen korrekt, und auch die zweite mit den Zahlen war unproblematisch, da alle Zahlen die gleiche Ziffernanzahl aufwiesen. Erst in unserem dritten Beispiel mit Zahlen verschiedener Ziffernanzahl wird der Fehler deutlich: Wenn wir die Inhalte als Datentyp Number behandeln, ist die Sortierung falsch, als Datentyp String dagegen richtig. 5. Ändern Sie die zweite trace()-Anweisung wie folgt (Fettdruck): trace(aZahlen.sort(Array.NUMERIC));

Ausgabe im Nachrichtenfenster: 2,17,21,26,35,38

Kapitel 9  Arrays

Nun entspricht die Ausgabe einer numerischen Sortierung in aufsteigender Reihenfolge. Beim Aufruf kann an die Methode sort() eine Konstante als Argument übergeben werden, um den Sortiervorgang näher zu definieren. In unserem Fall erzwingen wir eine numerische Sortierung, wobei Flash davon ausgeht, dass das betreffende Array gültige Zahlen enthält. Verzichten wir auf einen derartigen Parameter, wird immer eine alphabetische Sortierung durchgeführt. Etwas anders sieht die alphabetische Sortierung aus, wenn sich Groß- und Kleinschreibung des ersten Zeichens der diversen Elemente voneinander unterscheiden. 6. Ändern Sie den Inhalt von aVornamen (Fettdruck):  var aVornamen:Array = [„Robert“,„Peter“, „hans“,„Ulrike“,„Brigitte“,„Claudia“];

Ausgabe im Nachrichtenfenster: Brigitte,Claudia,Peter,Robert,Ulrike,hans Der arme „hans“ verliert nicht nur an Statur durch das kleine „h“, sondern offensichtlich auch an Bedeutung, so dass er nun auf dem letzten Platz erscheint. Die alphabetische Sortierung von Flash beruht auf dem Key-Code der Strings. Da den Großbuchstaben eine kleinere Nummer als den Kleinbuchstaben zugeordnet ist, erscheint ein Begriff, der mit einer Minuskel beginnt, automatisch nach Begriffen mit einer Majuskel. 7. Ändern Sie den trace()-Befehl bezüglich aVornamen (Fettdruck):  trace(aVornamen.sort(Array.CASEINSENSITIVE));

Ausgabe im Nachrichtenfenster: Brigitte,Claudia,hans,Peter,Robert,Ulrike Der gute „hans“ kehrt wieder mitten in den Freundeskreis zurück. Die an sort() übergebene Konstante sorgt dafür, dass die alphabetische Sortierung unabhängig von der Groß- und Kleinschreibung erfolgt. Ein Array muss nicht zwangsläufig aus einmaligen Werten bestehen, unser geliebter Hans kann also durchaus mehrfach auftauchen. In dem Fall erfolgt das Sortieren in gewohnter Weise, d. h. alle doppelten Elemente werden an die alphabetisch korrekte Stelle verschoben, wenn Sie die sort()-Methode in der bisher vorgestellten Form aufrufen. In Ausnahme­

9.6  Arrays sortieren und durchsuchen

fällen kann es jedoch erwünscht sein, dass eine Sortierung bei doppelten Elementen unterbleibt. 8. Ändern Sie die Initialisierung von aNamen und den betreffenden trace()-Befehl folgendermaßen (Fettdruck):  var aVornamen:Array = [„Robert“, „Peter“,„Hans“,„Ulrike“,„Brigitte“, „Hans“, „Claudia“];  trace(aVornamen.sort(Array.UNI­ QUESORT));

Ausgabe im Nachrichtenfenster: 0 Die bescheidene 0 zeigt an, dass eine Sortierung nicht ausgeführt werden konnte, da mindestens ein Element mehr als einmal vorliegt, nämlich der Name „Hans“. Das Array aVornamen wurde nicht verändert. 9. Fügen Sie danach einen weiteren trace()-Aufruf ein: trace(aVornamen);

Ausgabe im Nachrichtenfenster: 0 Robert,Peter,Hans,Ulrike,Brigitte,Hans,Claudia Das Array wurde nicht, wie der vorhergehende trace()-Befehl mit der Sortierungsanweisung aufgrund des Rückgabewertes 0 erschreckenderweise nahelegen könnte, gelöscht. Dieser Wert bedeutet lediglich, dass die gewünschte Sortierung nicht durchführbar ist. In allen anderen Fällen entspricht die Rückgabe, wie wir oben gesehen haben, dem sortierten Array. Alle bisherigen sort()-Anweisungen sorgen für eine Änderung des davon betroffenen Arrays. Manchmal ist es jedoch erwünscht, einerseits die Reihenfolge, in der die Elemente in ein Array gefüllt wurden, beizubehalten, andererseits auf ein sortiertes Array etwa zwecks schnellerer Suche zugreifen zu können. Was nach Quadratur des Kreises klingt, gelingt mit einer weiteren Konstante, die an die sort()-Methode übergeben werden kann. 10. Ersetzen Sie den bisherigen Code durch:  var aVornamen:Array = [„Robert“, „Peter“,„Hans“,„Ulrike“,„Brigitte“, „Claudia“];

 var aVornamenSort:Array = aVornamen. sort(Array.RETURNINDEXEDARRAY);

79

 trace(„aVornamen unsortiert: „+aVor­ namen);  trace(„aVornamen sortiert: „+aVor­ namenSort);

Ausgabe im Nachrichtenfenster: aVornamen unsortiert: Robert,Peter,Hans,Ulrike,Brig itte,Claudia aVornamen sortiert: 4,5,2,1,0,3 Das Array aVornamen zeigt den Inhalt unverändert an, während in aVornamenSort eine alphabetisch korrekte Reihenfolge über die Indexnummern der Elemente von aVornamen dargestellt wird. In einem sortierten Array würde an erster Stelle das Element der Indexposition 4, also „Brigitte“, an zweiter das Element mit Index 5, also „Claudia“ usw. liegen. Das können wir mit einer Schleife überprüfen. 11. Fügen Sie nach dem letzten trace()-Befehl folgende Schleife ein:  for(var i:Number = 0; i < aVornamen­ Sort.length; i++){  trace(aVornamen[aVornamenSort[i]]);

}

Ausgabe im Nachrichtenfenster: Brigitte Claudia Hans Peter Robert Ulrike Wir verwenden die Indexnummern, die in aVorna­ menSort gespeichert wurden, sukzessive, um auf die entsprechenden Elemente in aVornamen zugreifen zu können. Dadurch ergibt sich die im Nachrichtenfenster ausgegebene korrekte Reihenfolge, ohne dass wir im ursprünglichen Array eine Änderung durchführen müssen. Alle bisherigen Beispiele gehen davon aus, dass eine Sortierung in aufsteigender Reihenfolge erwünscht ist. Die lässt sich für den gegenteiligen Fall sehr einfach umkehren. 12. Ersetzen Sie den bisherigen Code durch:  var aVornamen:Array = [„Robert“, „Peter“,„Hans“,„Ulrike“,„Brigitte“, „Claudia“];

80

 trace(„aVornamen sortiert: „+aVor­ namen.sort());  trace(„aVornamen umgekehrt sortiert: „+aVornamen.reverse());

Ausgabe im Nachrichtenfenster: aVornamen sortiert: Brigitte,Claudia,Hans,Peter,Rob ert,Ulrike aVornamen umgekehrt sortiert: Ulrike,Robert,Peter, Hans,Claudia,Brigitte Wie der Name der Methode nahelegt, erfolgt eine Umkehrung des Arrays durch Vertauschen der Indexposition, so dass eine absteigende Sortierung vorliegt. Das funktioniert natürlich auch mit numerischen Werten. Unabhängig davon, ob ein Array in sortierter oder unsortierter Form vorliegt, müssen wir einzelne Elemente gezielt auslesen können. Wir haben oben bereits gesehen, wie das geschieht, wenn der Index des gesuchten Elements bekannt ist. Viel öfter kommt es jedoch vor, dass wir zwar wissen, wonach wir suchen müssen, kennen aber dessen Position in einem gegebenen Array nicht. In diesen Fällen können wir mit einer simplen Schleife auf das Array zugreifen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aVornamen:Array = [„Robert“,„Peter“, „Hans“,„Ulrike“,„Brigitte“, „Claudia“];  var vSuche:String = „Hans“;

 for (var i:Number = 0; i
 trace(vSuche + „ liegt auf Index „+i); } }

trace(„habefertisch!“);

Ausgabe im Nachrichtenfenster: aktueller Index: 0 aktueller Index: 1 aktueller Index: 2 Hans liegt auf Index 2 aktueller Index: 3 aktueller Index: 4 aktueller Index: 5 habefertisch!

Kapitel 9  Arrays

Wir speichern den zu suchenden Begriff in einer Variablen. Anschließend schauen wir mit Hilfe einer Schleife nach, ob das Element an der durch die Zählvariable i definierten Indexposition mit unserem Suchbegriff übereinstimmt. Ist das der Fall, erfolgt eine entsprechende Ausgabe. Ganz zum Schluss lassen wir uns auf trabbatonisch anzeigen, dass die Schleife beendet wurde. Wie das Nachrichtenfenster zeigt, wird die Schleife allerdings selbst dann noch weiter ausgeführt, wenn wir den gesuchten Begriff bereits gefunden haben. Stellen Sie sich vor, unser Array würde 1.000 Namen enthalten, und schon an dritter Stelle befände sich das benötigte Element. Dann wäre es unsinnig, weiter Zeit zu verschwenden und alle übrigen Elemente ebenfalls anzuschauen. 3. Fügen Sie innerhalb der if-Bedingung nach dem trace() ein: break;

Ausgabe im Nachrichtenfenster: aktueller Index: 0 aktueller Index: 1 aktueller Index: 2 Hans liegt auf Index 2 habefertisch! Wie Sie sehen, hört Flash in dem Augenblick auf, in dem die Bedingung erfüllt ist, also das aktuelle Element dem gesuchten Begriff entspricht. Weitere Optimierungen wären über sortierte Arrays möglich, wobei man beispielsweise vergleichen könnte, ob das gesuchte Element größer oder kleiner als das Element ist, dass sich in der Mitte des Arrays befindet. Ist es größer, sucht man nur in der zweiten Hälfte, ansonsten in der ersten Hälfte des Arrays. Natürlich macht das nur ab einer gewissen Größe Sinn, in unseren Beispielen dagegen wäre das zugegebenermaßen etwas übertrieben.

9.7 Weitere Methoden Zwei Methoden ermöglichen es, den kompletten Inhalt eines Arrays in einen String zu verwandeln. Das ist beispielsweise dann nützlich, wenn wir ein Array einer Variablen zuweisen wollen. Bekanntermaßen nimmt eine Variable nur einen Wert auf, ein Array da-

9.8  Mehrdimensionale Arrays

gegen enthält naturgemäß viele Werte. Beim Versuch einer direkten Zuweisung erhalten wir eine Fehlermeldung aufgrund eines Typenkonflikts, d. h. zweier verschiedener Datentypen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aZahlen:Array = new Array(2,4,6,8);

var aZahl:Number = aZahlen;

Wie erwähnt mokiert sich Flash darüber, dass wir aZahlen mit dem Datentyp Array aZahl mit dem Datentyp Number zuweisen wollen. Verzichten wir auf die Typisierung, führt Flash den Befehl klaglos aus  – und ändert automatisch den Datentyp von aZahl in die allgemeinstmögliche Variante eines Objects. Wenn wir diese Schummelei nicht dulden wollen, können wir eine korrekte Zuweisung über die toString()-Methode erreichen. 3. Ändern Sie das Skript wie folgt (Fettdruck):  var aZahlen:Array = new Array (2,4,6,8);

 var aZahl:String = aZahlen.toString();

81

Ausgabe im Nachrichtenfenster: 2,4,6,8 Ohne Trennzeichen: Hallo, wie geht es?,Ach, eigentlich ganz gut Mit Trennzeichen: Hallo, wie geht es?#Ach, eigentlich ganz gut Verwenden wir lediglich die toString()-Methode, enthält der resultierende String das Komma sowohl als Trennzeichen innerhalb eines Satzes (nach „Hallo“ und „Ach“) wie zwischen den Elementen des ursprünglichen Arrays (Zwischen „?“ und „Ach“). Programmiertechnisch können wir so nicht entscheiden, was denn nun konkret damit gemeint ist. Die join()Methode dagegen setzt nur an den Stellen, an denen eine Trennung zwischen Array-Elementen markiert werden soll, das angegebene Sonderzeichen, während das Komma als Satzelement erhalten bleibt. Aus sSatz 2 ließe sich daher problemlos der ursprüngliche Inhalt des Arrays wieder herstellen bzw. ein verständlicher Text erstellen, aus sSatz 1 dagegen nicht (oder nur mit erheblichem Mehraufwand). Logischerweise wählen Sie als Trennzeichen für die join()-Methode ein Zeichen, das in dem angesprochenen Array nicht vorkommt.

trace(aZahl);

Erwartungsgemäß gibt Flash jetzt die Zahlen „2,4,6,8“ aus. Sie liegen in aZahl nicht mehr als kommaseparierte Elemente, wie wir es vom Array aZahlen gewohnt sind, vor, sondern bilden einen einzigen Wert. Sie lassen sich jedoch sehr einfach aufgrund des Trennzeichens wieder als einzelne Elemente auslesen, falls Bedarf bestehen sollte. Wenn die Elemente im Array bereits als Strings vorliegen, die ihrerseits Kommas enthalten (z. B. im Fall ganzer Sätze), so können wir das Trennzeichnen explizit definieren, müssen dazu aber eine andere Methode verwenden. 4. Erweitern Sie den Code um folgende Zeilen:  var aSaetze:Array = [„Hallo, wie geht es?“, „Ach, eigentlich ganz gut“];  var sSatz 1:String = aSaetze.to­ String();  var sSatz 2:String = aSaetze. join(„#“);

 trace(„Ohne Trennzeichen: „+sSatz 1); trace(„Mit Trennzeichen: „+sSatz 2);

9.8 Mehrdimensionale Arrays Die in den bisherigen Beispielen verwendeten Arrays sind prinzipiell einfach aufgebaut, da sie lediglich einzelne, durch Trennzeichen direkt identifizierbare Elemente enthalten. Doch manchmal ist es notwendig, in einem Array weitere Arrays zu erfassen. In diesem Fall spricht man von einem mehrdimensionalen Array. Damit lässt sich beispielsweise der Aufbau eines gekachelten Spielfelds, die Positionen eines Objekts oder eine aus verschiedenen Zeilen und Spalten bestehenden Fläche beschreiben, wie weiter unten in einzelnen Workshops zu sehen ist. Ein derartiges Array lässt sich prinzipiell so einrichten, wie wir es bereits kennen gelernt haben. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var aPositionen:Array = [[0,0],[5,0]]; trace(aPositionen);

82

Kapitel 9  Arrays

Im Nachrichtenfenster erscheinen die vier bei der Initialisierung übergebenen Werte. Alternativ hätte man auch schreiben können:

einen String als Index zu definieren. In diesem Fall sprechen wir von assoziativen Arrays oder Hashes. Sie lassen sich auf mehrere Arten anlegen.

var aPositionen:Array = new Array ([0,0],[5,0]);

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:

Und ganz besonders korrekt geht auch das: var aPositionen:Array = new Array(new Array(0,0),new Array(5,0));

Um für Flash kenntlich zu machen, dass wir in ein Array weitere Arrays füllen, verwenden wir den Array-Operator, d. h. die eckigen Klammern []. In beredter Prosa formuliert besteht aPositionen aus einem Array mit dem Inhalt 0,0, das dem ersten Element entspricht, und aus einem Array mit dem Inhalt 5,0, das dem zweiten Element entspricht. Der einfache trace()-Befehl gibt die Elemente ohne Arrayzugehörigkeit aus, gerade so, als handle es sich um gewöhnliche kommaseparierte Elemente, wie wir es von anderen Arrays her kennen. Der Zugriff auf einzelne Elemente erfolgt in gewohnter Weise. 3. Erweitern Sie den Code um folgendes trace(): trace(aPositionen[1]);

Im Nachrichtenfenster wird der Inhalt des zweiten Arrays in aPositionen, also 5,0 angezeigt. Wollen wir innerhalb dieses Arrays auf eine einzelne Zahl zugreifen, ergänzen wir einfach den benötigten Index. 4. Ändern Sie die trace()-Anweisung (Fettdruck): trace(aPositionen[1][0]);

Nun taucht nur noch die Zahl 5 auf, also im zweiten Element (5,0) das erste Element (5). Prinzipiell können Sie die Arrays beliebig tief verschachteln. Allerdings verliert man dann schnell den Überblick, so dass hier weniger vielleicht mehr ist. Alle bisher behandelten Eigenschaften und Methoden treffen auf die in aPositionen enthaltenen Arrays zu. Lediglich die concat()-Methode macht insofern eine Ausnahme, als sie, wie erwähnt, beim Zusammenfügen nicht korrekt zwischen Array und kommaseparierten Elementen unterscheidet.

var aAuto:Array = new Array(); aAuto[„raeder“] = 4;

aAuto[„farbe“] = „rot“; aAuto[„preis“] = 26000;

Damit legen wir ein Array an, das über drei Elemente mit den Werten 4, „rot“ und 26000 verfügt. Sie sind jedoch nicht über eine Indexnummer erfasst, sondern über eigens definierte Strings. In einer alternativen Schreibweise kann man die Strings als Bezeichner übergeben. 3. Ersetzen Sie den Code nach der ersten Zeile durch: aAuto.raeder = 4;

aAuto.farbe = „rot“; aAuto.preis = 26000;

Anstelle der Strings verwenden wir jeweils einen Bezeichner, der per Punktsyntax dem Array zugeordnet wird. Eine weitere Möglichkeit besteht darin, auf einen anderen Datentyp zurückzugreifen. 4. Ändern Sie die erste Zeile wie folgt: var aAuto:Object = new Object();

Welche Variante Sie auch wählen, das Ergebnis ist immer dasselbe. Da es sich um keine gewöhnlichen Arrays handelt, gestaltet sich der Zugriff auf die Inhalte anders. 5. Ersetzen Sie die Objektdefinition wieder durch die Arraydefinition: var aAuto:Array = new Array();

6. Fügen Sie ganz am Ende ein: trace(„aAuto: „+aAuto);

trace(„aAuto[0]: „+aAuto[0]);

9.9 Assoziative Arrays

Ausgabe im Nachrichtenfenster: aAuto: aAuto[0]: undefined

Alle bisherigen Arrays verwenden eine Zahl als Indexzugriff. Daneben kennt Flash die Möglichkeit,

Flash kann aAuto nicht auslesen und die erste Indexposition gibt ein undefined zurück. Scheinbar noch

9.9  Assoziative Arrays

merkwürdiger wird es, wenn wir uns den Datentyp von aAuto anschauen. 7. Fügen Sie ganz am Ende ein:  trace(„Datentyp aAuto: „ + typeof(aAuto));

Ausgabe im Nachrichtenfenster: aAuto: aAuto[0]: undefined Datentyp aAuto: object Entgegen unserer Erwartung meldet Flash (korrekt), bei unserem Array handle es sich um ein Object. Das gilt übrigens unabhängig davon, ob wir vor der Zuweisung von Inhalten über Bezeichner den trace()Befehl ausführen oder danach. Denn für Flash stellt ein Array nichts anderes dar als einen Sonderfall eines Objektes. Insofern schummelt das Programm ein wenig, wenn wir beim Deklarieren als Datentyp Array eingeben, aber ein Objekt erhalten. Wirklich tragisch ist das nicht, denn erst dadurch erlaubt uns Flash, Inhalte über Bezeichner statt über einen Index zu definieren. Der korrekte Zugriff erfolgt dann einfach über diese Bezeichner. 8. Kommentieren Sie die bisherigen trace()-Anweisungen aus oder löschen sie. 9. Fügen Sie am Ende einen neuen trace()-Befehl ein: trace(aAuto.farbe);

Das Nachrichtenfenster zeigt nun den zugehörigen Wert „rot“ an. Werte können also nur über die betreffenden Bezeichner abgefragt werden. 10. Fügen Sie ein weiteres trace() ein:

trace(aAuto[„preis“]);

Neben der Farbe „rot“ gibt Flash den Preis „26000“ an. Wie bei der Deklaration können wir beim Zugriff beide Schreibweisen, also mit Bezeichner oder mit String, verwenden. Kennen wir die Bezeichner nicht, bleibt der Zugriff per Schleife. Hier können wir allerdings nur die for in-Schleife verwenden, die ohne Indexzahl auskommt. 11. Ersetzen Sie beide trace()-Befehle durch:  for(var e:String in aAuto){

 trace(„Element „+e+“: „+aAuto[e]);

}

83

Flash zählt alle Elemente in der umgekehrten Reihenfolge ihrer Zuweisung auf. Die Zählvariable e übernimmt dabei keinen Index, sondern den Bezeichner, dessen konkreter Wert über aAuto[e] bestimmt wird. Sind die Bezeichner nicht namentlich bekannt, kann man sie durch direkten Zugriff auf die Variable auslesen. Übrigens kann man die for in-Schleife auch dann verwenden, wenn ein Array über gültige Indexwerte verfügt. In dem Fall wandelt Flash die Indexpositionen einfach in Bezeichner um, es findet also eine temporäre Typumwandlung von Number in String statt. Aus einem „normalen“ Array wird dann temporär ein Hash. Bei Hashes versagen leider die gängigen Methoden der Bearbeitung, d. h. wir können weder die Eigenschaft length abfragen noch eine der oben behandelten und lieb gewonnenen Methoden wie concat(), splice(), push() einsetzen. Änderungen sind nur über die Bezeichner bzw. Strings möglich, die wir beim Einrichten oder zu einem späteren Zeitpunkt setzen. Wir haben oben im Zusammenhang mit verschiedenen Datentypen (Vorname: String, Alter: Number) darauf verwiesen, solche Elemente in einem Array assoziativer Arrays verwalten zu können. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var aPersonen:Array = [];

 aPersonen. push({namen:„Peter“,alter:17});  aPersonen. push({namen:„Ulla“,alter:12});

 aPersonen.push({namen:„Severin“,alter :22});  aPersonen.push({namen:„Johannes“,alte r:31}); trace(aPersonen);

Ausgabe im Nachrichtenfenster: [object Object],[object Object],[object Object],[object Object] Innerhalb des übergeordneten Arrays aPersonen haben wir jeweils Objekte angelegt mit den Attributen „Namen“ und „Alter“ sowie zugehörigen Werten. Der trace()-Befehl gibt uns die entsprechenden Objekte aus. Um auf die Inhalte zugreifen zu können, müssen wir allerdings eine konkretere Angabe machen. 3. Ändern Sie den trace()-Befehl (Fettdruck): trace(aPersonen[1].namen);

84

Ausgabe im Nachrichtenfenster: Ulla Wir übergeben trace() das Objekt an zweiter Stelle und greifen dort auf den Bezeichner namen zu. Als Ergebnis erhalten wir „Ulla“. Wie wir gesehen haben, kann der Zugriff alternativ über einen String anstelle eines Bezeichners erfolgen. 4. Fügen Sie ein weiteres trace() hinzu: trace(aPersonen[1][„alter“]);

Ausgabe im Nachrichtenfenster: Ulla 12 Nach dem Namen erhalten wir nun auch das zugehörige Alter. Obwohl beide Varianten des Zugriffs möglich sind, sollte man sich auf eine festlegen, da der Code ansonsten eher verwirrt. Um alle Elemente auszulesen, verwenden wir wie oben gezeigt einfach eine for in-Schleife. Sollen Werte geändert werden, müssen Sie lediglich den Zugriff auf ein Element mit einer Zuweisung verknüpfen. 5. Fügen Sie am Ende ein: aPersonen[1].alter = 14;

trace(aPersonen[1].alter);

Ausgabe im Nachrichtenfenster: Ulla 12 14 Sprunghaft altert Ulla um 2  Jahre, was man sich in der Jugend gerne gefallen lässt, später dagegen eher nicht mehr. Interessanterweise verwaltet Flash alle Objekte, die von AS-Klassen erstellt werden, als assoziative Arrays. Wir können damit auf ihre Elemente und Eigenschaften zugreifen, indem wir eine for inSchleife verwenden. Das wollen wir uns am Beispiel eines Textfeldes anschauen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var tfTxt:TextField = this. createTextField(„textfeld“, 1, 0, 0, 100, 28); for (var e:String in tfTxt) {

 trace(„Eigenschaft „+e+“: „+tfTxt[e]); }

Kapitel 9  Arrays

Im Nachrichtenfenster erhalten Sie eine lange Auflistung der diversen Textfeldeigenschaften und zugeordneter Standardwerte sowie der von Ihnen bei der Initialisierung gegebenen Werte. Durchaus nützlich ist das, wenn wir als Behälter einen leeren MovieClip verwenden und in ihm alle Objekte speichern, die sich gleich oder ähnlich verhalten sollen, z. B. in einem Spiel die gegnerischen Geschosse. Dann können wir mit einer for inSchleife darauf zugreifen, und ihnen die benötigten Aktionen dynamisch zuweisen, ohne ihre Namen zu kennen. In einzelnen Workshops werden wir darauf zurückkommen. Zur Illustration hier ein kleines Beispiel: 1. Erstellen Sie eine Standarddatei. 2. Auf der Ebene objects zeichnen Sie an beliebiger Stelle ein Quadrat (40 × 40, orange). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcQuadrat, kein Instanzname, Registrierungspunkt mittig). 4. Duplizieren Sie das Quadrat mehrfach und setzen die Kopien auf verschiedene Positionen. 5. Markieren Sie alle MovieClips der Ebene und erstellen daraus einen weiteren MovieClip (Bibliotheksname mcBehaelter, Instanzname behael­ ter, Registrierungspunkt beliebig). 6. Weisen Sie actions folgendes Bildskript zu: behaelter.onEnterFrame = function() {  for (var e in this) {

 if (typeof (this[e] == „movie­ clip“)) {  this[e]._rotation += 5; } } };

Beim Testen werden sich alle MovieClips um ihre eigene Achse drehen. Wir definieren für den MC be­ haelter ein onEnterFrame–Ereignis, das ihn anweist, alle in ihm enthaltenen Objekte zu animieren. Die if-Bedingung sorgt dafür, dass auch wirklich nur MovieClips angesprochen werden. Denn in behael­ ter können neben den von uns händisch angelegten MovieClips weitere Elemente enthalten sein, z. B. eine type function, also das zugewiesene on­ EnterFrame-Ereignis. Mit diesem Objekt würde ein Rotationsversuch keinen Sinn machen.

10

Funktionen

Während wir in Arrays und Variablen Daten erfassen können, bietet eine moderne Skriptsprache auch die Möglichkeit, ganze Befehlsfolgen zu speichern. Dazu verwendet man sogenannte Funktionen, die in ActionScript mit dem Schlüsselwort function deklariert werden. Der Vorteil einer Funktion besteht darin, Befehlsfolgen bzw. Codeblöcke, die man mehrfach benötigt, auf eine einfache Art zur Verfügung zu stellen. Anstatt immer wieder die benötigten Befehle aufzurufen, kann man sie bequem über eine Funktion ausführen. Darüber hinaus erhöht das die Übersichtlichkeit des Codes und strukturiert ihn. Last not least können ausgelagerte Funktionen in anderen Projekten wieder verwendet werden, so dass der benötigte Code nicht jedes mal komplett neu geschrieben werden muss. Angenommen, der gesamte textliche Inhalt Ihrer Website wird extern geladen und in spezifischer Weise formatiert. Nach unserer bisherigen Vorgehensweise müssten Sie den betreffenden Code per copyand-paste an allen Stellen einfügen, an denen er ausgeführt werden soll. Das ist nicht nur mühsam und unübersichtlich, sondern auch fehleranfällig. Denn was geschieht, wenn Sie plötzlich die Formatierung ändern wollen? Dann müssen Sie in einer zeitaufwendigen Suche alle Stellen ausfindig machen, an denen der betreffende Code steht, und ihn ändern. Wie schnell schleicht sich da ein Fehler ein, nur weil man eine Zeile übersehen hat. Der gesamte Prozess vereinfacht sich erheblich, wenn Sie statt dessen mit Funktionen arbeiten. Der benötigte Code wird ein einziges Mal in die Funktion geschrieben, die Sie in Ihrer Anwendung immer dann aufrufen, wenn externe Texte zu laden und zu formatieren sind. Änderungen lassen sich schnell an einer zentralen Stelle durchführen, nämlich in der Funktionsdefinition bzw. -deklaration.

10.1 Funktionsdeklaration und -aufruf Allgemein sieht eine Funktionsdeklaration oder -definition folgendermaßen aus: function Funktionsname():Void{  Anweisung1;  Anweisung2; }

Der Schlüsselbegriff function leitet die Funktionsdefinition ein. Ihm folgt der Name, der den gleichen Konventionen unterliegt wie ein Variablen-Name, also: Keine Zahl als erstes Zeichen. • Keine Leerzeichen. • Keine Sonderzeichen (ausgenommen $ und _). • Keine deutschen Umlaute. • Groß- und Kleinschreibung beachten. • Keine reservierten Begriffe. • Eindeutiger Name. Auch hier gilt natürlich die Regel, dass man einen möglichst aussagekräftigen, dennoch nicht zu langen Namen wählen soll. Nach dem Namen folgen eine runde Klammer, die bei einfachen Funktionen leer bleibt, sowie die Angabe des Datentyps, falls Ihre Funktion einen Wert zurück liefert. Da das hier nicht zutrifft, legen wir diesen Datentyp mit Void fest. Der eigentliche Inhalt der Funktion, d. h. die auszuführenden Anweisungen, wird immer von geschweiften Klammern umschlossen, so dass Flash Beginn und Ende des zur Funktion gehörigen Befehlsblocks erkennen kann. Etwas ähnliches haben Sie bereits bei if-Anweisungen und Schleifen kennen gelernt, bei denen der abhängige Code ebenfalls in derartige Klammern eingeschlossen wird. Als Minimum enthält

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

85

86

eine Funktion mindestens eine Anweisung. Formal gesehen gibt sich Flash allerdings auch mit einer leeren Funktion zufrieden, also dem völligen Fehlen von irgendwelchen Anweisungen zwischen den Klammern Da prinzipiell keine Obergrenze existiert, kann eine Funktion problemlos einige Hundert Zeilen Anweisungen enthalten – Sinn macht das jedoch keinen, denn sie würde durch ihren enormen Umfang völlig unübersichtlich. Der Code in der Funktion kann beliebiger Art sein, es spielt also keine Rolle, ob Sie dort den Wert einer Variablen ändern, eine Schleife verwenden, mit einer verschachtelten if-Abfrage arbeiten, eine andere Funktion aufrufen oder gar eine neue Funktion definieren. Für die Lesbarkeit Ihres Codes können sich jedoch deutliche Konsequenzen ergeben, je nachdem, welche Aktion Sie in Ihren Funktionen ausführen. Wenn Sie beispielsweise innerhalb einer Funktion ständig neue Funktionen definieren, weil diese erst jetzt benötigt werden, dann mag das dem logischen Ablauf Ihrer Anwendung zwar entsprechen, Sie laufen jedoch Gefahr, den berühmt-berüchtigten Spaghetti-Code zu produzieren, weil der Überblick verloren geht. In vielen Fällen ist es daher sinnvoller, alle benötigten Funktionen in einem eigenen Block innerhalb des Sourcecodes zu definieren, selbst wenn die Funktionen erst später, u. U. sogar überhaupt nicht (nämlich wenn sie von einer Useraktion abhängig sind) benötigt werden. Um mit einer Funktion konkret arbeiten zu können, reicht eine Deklaration nicht aus. Denn dort steht nur der Inhalt der Funktion. Die Deklaration entspricht lediglich einer Beschreibung. Ausgeführt wird sie erst, wenn wir sie aufrufen. Ein derartiger Aufruf sieht allgemein so aus: Funktionsname();

Um die in einer Funktion enthaltenen Befehle auszuführen, reicht es also vollkommen aus, den Namen zuzüglich der geschweiften Klammern zu schreiben. Fehlen die Klammern, erhalten Sie zwar keine Fehlermeldung von Flash, der Aufruf wird aber auch nicht ausgeführt. Wir wollen uns ein konkretes Beispiel einer Funktionsdeklaration inklusive Aufruf anschauen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: function ausgabe():Void{

Kapitel 10  Funktionen

 trace(„Hallo Flasher!“); }

ausgabe();

Ausgabe im Nachrichtenfenster: Hallo Flasher! Anfangs deklarieren wir eine Funktion namens aus­ gabe(), deren einzige Aufgabe darin besteht, im Nachrichtenfenster eine Information auszugeben. Anschließend rufen wir die Funktion über ihren Namen auf, so dass Flash uns entsprechend freundlich begrüßt. Zwar spielt bei Flash die Reihenfolge keine Rolle, so dass Sie getrost zuerst eine Funktion aufrufen dürfen und sie danach erst deklarieren. Das widerspricht aber dem Programmablauf und ist zudem schlechter Stil. Daher wollen wir uns immer an die Reihenfolge Deklaration – Aufruf halten.

10.2 Funktionen ohne Bezeichner Alternativ zur oben vorgestellten Syntax können Funktionen auch ohne Bezeichner bzw. als anonyme Funktionen definiert werden. Unter Bezeichner versteht man nichts anderes als den Funktionsnamen. In der allgemeinen Form sieht eine derartige anonyme Funktion so aus: var ausgabe:Function = function(){ //Anweisungen; }

Bei der Übergabe an eine andere Funktion als Argument: Funktionsname(function(){Anweisungen});

Im Zusammenhang mit Ereignissen schreiben wir sie so: Objekt.Ereignis = function(){ //Anweisungen; }

Beachten Sie, dass im letztgenannten Fall keine Typisierung erfolgen kann. Diese Variante verwenden wir häufig, da sie es auf eine recht einfache Art ermöglicht, Interaktionen zu programmieren. Wir können unser erstes Beispiel auch in der anonymisierten Form realisieren.

10.3  Gültigkeit

3. Fügen Sie vor der bestehenden Funktionsdeklaration folgende Zeilen hinzu: var ausgabe:Function = function(){

 trace(„Nochmal: Hallo Flasher!“); }

4. Fügen Sie nach dem bestehenden Funktionsaufruf folgende Zeile hinzu: ausgabe();

Ausgabe im Nachrichtenfenster: Hallo Flasher! Nochmal: Hallo Flasher! Wir legen zunächst eine Variable mit dem Datentyp Function an und weisen ihr eine Funktionsdeklaration zu, die eine trace()-Anweisung enthält. Der Aufruf erfolgt analog zu derjenigen einer Funktion mit Bezeichner, so dass im Nachrichtenfenster die Texte beider trace()-Aufrufe erscheinen. 5. Zeichnen Sie auf objects an beliebiger Stelle einen Kreis (50 × 50). 6. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt beliebig). 7. Fügen Sie nach der zweiten Funktionsdeklaration und vor dem ersten Funktionsaufruf folgende Zeilen ein: kreis.onPress = function(){  trace(„Mausklick“); }

Wir weisen der Instanz kreis eine Funktion ohne Bezeichner zu, die dafür sorgt, dass bei jedem Mausklick auf dieses Objekt eine Meldung im Nachrichtenfenster ausgegeben wird. Fügen Sie folgenden Aufruf ein: setInterval(function(){trace(„Ich bin trotz Großer Lauschangriffe völlig anonym unterwegs!“)},100)

Im Abstand von 100 Millisekunden meldet sich trotzig das Nachrichtenfenster und beharrt auf anonymen, aber keinesfalls ungesetzlichen Bewegungen. Welchen Sinn machen diese verschiedenen Vorgehensweisen? Die Funktionsdefinition mit Bezeichner hat u. a. den Vorteil, jederzeit verwendet werden zu können. Die anonymisierte Form mit der Variablen

87

findet insbesondere bei der Erstellung von Methoden, also an Objekte gebundene Funktionen, Verwendung. Wie wir bei der Beschreibung der einzelnen Klassen weiter unten sehen werden, macht Flash sehr viel Gebrauch von solchen Methoden. Ein konkretes Beispiel haben wir bereits im Kapitel Variablen kennen gelernt, wo wir eine Methode namens kreis.aus­ gabe() definierten. Die vorletzte Variante mit den Ereignissen erweist sich dann als nützlich, wenn Programmaktionen zu bestimmten Zeitpunkten ausgelöst oder Interaktionen des Anwenders definiert werden sollen. Das letzte Beispiel dagegen funktioniert zwar, macht aber insofern wenig Sinn, als der Code dadurch ziemlich unübersichtlich wird. Eine derartige Schreibweise sollte also vermieden werden. Übrigens lassen sich Funktionen, die einem Ereignis zugewiesen wurden, explizit aufrufen. Wenn wir beispielsweise in unserem Code nach der schließenden Klammer des onPress-Ereignisses kreis. onPress(); eintragen, dann entspricht dies dem Eintreten des Mausereignisses und Flash gibt im Nachrichtenfenster die betreffende Meldung aus, ohne dass wir auf den Kreis geklickt haben.

10.3 Gültigkeit Im Zusammenhang mit Variablen haben wir das Konzept der Gültigkeit oder Reichweite kennen gelernt. Was dort gesagt wurde, gilt auch hier. Ein Funktionsaufruf wie oben in Schritt 2 bzw. Schritt 4 kann nur gelingen, wenn sich die Funktionsdeklaration in derselben Zeitleiste befindet, von der aus wir aufrufen. Da wir hier in der Hauptzeitleiste sowohl deklarieren wie auch aufrufen, stellt das kein Problem dar. 8. Ändern Sie den Anweisungsblock innerhalb der Funktionsdefinition von ausgabe() wie folgt (Fettdruck): trace(„Ich bin eine in der Hauptzeitleiste definierte Funktion“); 9. Ersetzen Sie den Anweisungsblock innerhalb des onPress-Ereignisses durch: ausgabe(); Bei Mausklick auf kreis rufen wir die in derselben Zeitleiste wie das onPress-Ereignis definierte Funktion ausgabe() auf, was zum Anzeigen des ge-

88

Kapitel 10  Funktionen

wünschten Textes führt. Anders sieht es jedoch aus, wenn wir das onPress in die Zeitleiste des Movie­ Clips verlagern. 10. Löschen Sie das onPress-Ereignis vollständig. 11. Öffnen Sie den Symbolbearbeitungsmodus von mcKreis. 12. Fügen Sie dort folgendes Bildskript ein:

this.onPress = function() {

 trace(„Mausklick“);  ausgabe();

};

Wenn Sie testen und auf den Kreis klicken, wird nur die trace()-Anweisung ausgeführt, also „Mausklick“ im Nachrichtenfenster ausgegeben. Der Funktionsaufruf von ausgabe() dagegen schlägt fehl, da Flash die entsprechende Deklaration nicht finden kann. Leider schweigt sich Flash an dieser Stelle höflich aus anstatt uns eine entsprechende Fehlermeldung anzuzeigen. 13. Ändern Sie im Symbolbearbeitungsmodus den Aufruf von ausgabe() (Fettdruck):

_root.ausgabe();

Bei Mausklick ist Flash nun in der Lage, die Funktion ausgabe() auszuführen, denn wir haben mitgeteilt, in welcher Zeitleiste sich die zugehörige Definition befindet. Der Bezeichner _root bezieht sich auf die Hauptzeitleiste. Wie bereits an früherer Stelle erwähnt, sollten Skripte möglichst zentral in einem oder einigen wenigen Bildskripten derselben Zeitleiste definiert werden, um Unübersichtlichkeit zu vermeiden. Daher empfiehlt es sich, soweit möglich, auf Bildskripte in Symbolen bzw. auf Objektskripte bei Instanzen zu verzichten und statt dessen ein Bildskript auf der Hauptzeitleiste anzulegen. 14. Schneiden Sie das komplette Bildskript im Symbolbearbeitungsmodus von mcKreis aus und fügen es in actions auf der Hauptzeitleiste wieder ein. 15. Ändern Sie dort die Ereigniszuweisung von on­ Press (Fettdruck):

kreis.onPress = function() {

16. Löschen Sie innerhalb der Anweisungen des on­ Press-Ereignisses den Bezug auf _root, so dass

die Funktion ausgabe() wie zuvor aufgerufen wird:

ausgabe();

Unser Skript besitzt die gleiche Funktionalität wie zuvor, jedoch liegt nun der gesamte Code wieder übersichtlich in einem einzigen Frame vor. Wie bei Variablen sind globale Funktionsdefinitionen möglich, so dass das eben demonstrierte Problem des Zeitleistenbezugs nicht besteht. Allerdings gilt hier dasselbe, was auch schon dort angemerkt wurde: Wenn der gesamte Code in der Hauptzeitleiste definiert und Module per loadMovie() geladen werden, können wir getrost auf _global verzichten.

10.4 Verschachtelung von Funktionen Ähnlich der Verschachtelung von MovieClips können Funktionen ihrerseits Funktionen enthalten bzw. aufrufen. Das haben wir in dem vorhergehenden Beispiel mehrfach gesehen. Zunächst weisen wir dem on­ Press-Ereignis eine anonyme Funktion zu, die ihrerseits die Funktion trace() aufruft. Einige Schritte danach lagern wir das trace() in eine eigene Funktion namens ausgabe() aus und rufen diese im on­ Press–Ereignis auf. Die verwendete Schreibweise lässt sich noch etwas vereinfachen, denn in solchen Fällen ist es möglich, die selbst definierte Funktion unmittelbar dem on­ Press-Ereignis zuzuweisen. Allerdings ändert sich dann der Selbstbezug bzw. der Inhalt des Schlüsselworts this. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects an beliebiger Stelle einen Kreis (50 × 50). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt beliebig). 4. Zeichnen Sie auf objects auf der Position 0,0 ein Rechteck (50 × 50). Sie brauchen es nicht in einen MovieClip zu verwandeln, da es uns lediglich zu Referenzzwecken dient. 5. Weisen Sie actions folgendes Bildskript zu: function klick(){

 trace(„Sie haben auf „+this+“ ge­ klickt“);

10.5  Parameter

 this._x += 20; }

kreis.onPress = function(){  klick(); }

Wenn Sie auf den Kreis klicken, erscheint im Nachrichtenfenster die Meldung „Sie haben auf _level0 geklickt“ und alle Objekte hüpfen um 20 Pixel nach rechts. Wir richten am Anfang die Funktion klick() ein, die eine Information ausgibt, wobei sie auf den Schlüsselbegriff this zugreift. Dieser Selbstbezeichner bezieht sich jeweils auf diejenige Zeitleiste, in der sich das Skript mit dem Begriff befindet. In unserem Fall handelt es sich um _root bzw. _le­ vel0, was mit der Hauptzeitleiste identisch ist. Danach bewegen wir das in this ermittelte Objekt um einen bestimmten Betrag nach rechts. Da sich this momentan auf die Hauptzeitleiste bezieht, muss das Ausführen des Skriptes die komplette Bühne mit allen sichtbaren Objekten verschieben, was auch tatsächlich geschieht. Danach weisen wir der Instanz kreis ein on­ Press-Ereignis zu, das bei Auftreten die Funktion klick() aufruft. Diese Schreibweise entspricht formal gesehen derjenigen, die wir in der vorhergehenden Übung kennen gelernt haben. 6. Ersetzen Sie das bestehende onPress-Ereignis komplett durch: kreis.onPress = klick;

Wenn Sie diesmal klicken, hüpft nur noch die Instanz kreis nach rechts und die Ausgabe im Nachrichtenfenster lautet „Sie haben auf _level0.kreis geklickt“. Flash behandelt die Funktion klick() nun so, als würde sie direkt als anonyme Funktion im onPressEreignis von kreis deklariert. Daher ändert sich der Selbstbezug von this, das nun nicht mehr auf die Hauptzeitleiste, sondern auf kreis verweist. Da nur noch kreis angesprochen wird, bleibt das Rechteck bei einem Mausklick auf den Kreis auf seiner Position. Bei dieser Schreibweise ist unbedingt darauf zu achten, dass Sie nicht aus Versehen die Zuweisung mit runden Klammern abschließen: kreis.onPress = klick();

Dies würde Flash korrekterweise als Funktionsauf-

89

ruf interpretieren, d. h. ohne dass wir auf den Kreis klicken, springt er wie von Geisterhand bewegt unmittelbar nach Start der Anwendung nach rechts und das Nachrichtenfenster gibt eine Meldung aus. Der Bezug von this würde wieder dem vorhergehenden entsprechen und die Hauptzeitleiste referenzieren. In manchen Fällen stellt das eine nützliche Möglichkeit dar, User-Ereignisse zu simulieren, ohne dass der Anwender tatsächlich agierte; in unserem konkreten Beispiel allerdings wäre das ein Fehler.

10.5 Parameter Wie wir gesehen haben, stellen Funktionen eine bedeutende Möglichkeit dar, Code zu vereinfachen und mehrfach verwendbar zu machen. Im Hinblick auf den letztgenannten Punkt erweist es sich als besonders wichtig, eine Funktion so zu definieren, dass sie nicht nur für einen ganz speziellen Fall gilt, sondern in möglichst vielen Situationen Anwendung findet. Nehmen wir das einfache Beispiel einer Textausgabe, die erfolgen soll, wenn wir auf bestimmte Objekte klicken. Abhängig davon, welchem Objekt wir unsere Zuwendung per Klick bezeugt haben, möchten wir einen anderen Text anzeigen und eine zugehörige Infografik einblenden. Wenn wir dafür eine einzige Funktion schreiben, ergibt sich das Problem der verschiedenen Texte. Da sie ja jeweils wechseln, können wir sie nicht direkt in die Funktionsdefinition aufnehmen. Die Lösung besteht in der Verwendung von Parametern, die eine etwas geänderte Funktionsdefinition erfordern: function Funktionsname(Parameter1:Daten typ):Void{  Anweisung1;  Anweisung2; }

In die runden Klammern tragen wir die Parameter mit dem zugehörigen Datentyp ein. Dabei handelt es sich um eine besondere Art von Variablen: Sie besitzen nur in einem einzigen Augenblick einen konkreten Inhalt, nämlich zu dem Zeitpunkt des Funktionsaufrufs. Der große Vorteil besteht darin, dass wir eine Funktion mit wechselnden Parametern ausführen können. Was konkret dahinter steckt, wollen wir an dem angesprochenen Beispiel der Textausgabe anschauen.

90

Kapitel 10  Funktionen

1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie an beliebiger Position auf objects zwei verschiedenfarbige Kugeln (z. B. blau und orange). 3. Wandeln Sie die Objekte jeweils in MovieClips um (Bibliotheksname mcBlau und mcOrange, Instanznamen blau und orange, Registrierungspunkt jeweils beliebig). Achten Sie darauf, dass sich die Instanzen nicht überlappen. 4. Weisen Sie actions folgendes Bildskript zu:

 textAusgabe(„blauer“);

 function textAusgabe(psText:String):Void {

orange.onPress = function() {

 trace(„Ich bin ein „+psText+“ Kreis“); }

blau.onPress = function() {  textAusgabe(); };

Klicken Sie auf den Kreis blau, öffnet sich das Nachrichtenfenster und behauptet: „Ich bin ein undefined Kreis“. Der Aufruf der Funktion textAusgabe() sorgt für die Ausführung des trace()-Befehls. Dort steht nicht nur ein String („Ich bin ein “ sowie „ Kreis“), sondern auch ein Parameter bzw. eine Variable, die aber nirgends definiert wird. Daher enthält sie den Wert undefined. 5. Ändern Sie den Funktionsaufruf bei Mausklick wie folgt (Fettdruck):

};

Nun können alle Objekte angeklickt werden, wobei sie jeweils eine Textinformation ausgeben. Allerdings behaupten alle Kreise fälschlicherweise, ein blauer Kreis zu sein. 7. Korrigieren Sie die Übergabe von Argumenten an den Funktionsaufruf von textAusgabe() wie folgt (Fettdruck):  textAusgabe(„orangener“); };

Jetzt gibt jedes Objekt bei einem Mausklick glaubhaft Auskunft über sich selbst. Beim Aufruf von text­ Ausgabe() wird jeweils ein anderes Argument als Parameter übergeben wie Abbildung 13 visualisiert. Die Instanz orange speichert in psText den String „orangener“, blau dagegen den String „blauer“. Auf diese Weise rufen zwar alle Objekte die gleiche Funktion auf, können Sie jedoch an eigene Bedürfnisse anpassen. Wir werden im Laufe zahlreicher Workshops mit parametrisierten Funktionen arbeiten, da sie eine ausgesprochen große Flexibilität bieten. Das vorliegende Skript kann man noch mit Hilfe von Arrays optimieren, für unsere Zwecke reicht es jedoch vollkommen aus.

textAusgabe(„blauer“);

Wenn Sie jetzt auf den Kreis klicken, bleibt er nicht mehr anonym, sondern meldet wahrheitsgemäß, er sei ein blauer Kreis. Beim Aufruf der Funktion text­ Ausgabe() wird in den Klammern der String „blauer“ mitgegeben. Er repräsentiert den konkreten Inhalt von psText, d. h. überall dort, wo innerhalb des Anweisungsblocks von textAusgabe() der Parameter psText verwendet wird, steht nun der konkrete String. Betrachten wir den Aufruf der parametrisierten Funktion, bezeichnet man den konkreten Klammerinhalt als Argument, in der entsprechenden Funktionsdeklaration dagegen verwendet man, wie oben gesehen, die Bezeichnung Parameter. 6. Weisen Sie der zweiten Kugel ebenfalls ein on­ Press-Ereignis zu: orange.onPress = function() {

Abbildung 13:  Verwendung einer parametrisierten Funktion

10.6  Funktionen mit Rückgabewert (return)

Wir haben hier als Argument einen String übergeben, aber prinzipiell ist jeder Datentyp möglich, ob nun Number, Boolean, Array oder gar MovieClip. Selbst Funktionen können als Argument verwendet werden. Das wichtigste Beispiel wäre die vorgefertigte Funktion setInterval(), der man als Argument mitteilen muss, welche Funktion in welchem Zeitinterval ausgeführt werden soll. Obwohl wir jeweils nur einen Parameter in die Funktionsdeklaration aufgenommen haben, gibt es prinzipiell keine Obergrenze. Wir können also Funktionen mit beliebig vielen Parametern deklarieren  – einmal abgesehen von der Tatsache, dass sich einem ungeschriebenen Naturgesetz der Programmierung zufolge die Lesbarkeit einer solchen Definition umgekehrt proportional zur Anzahl der Parameter verhält. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  function berechnung(pnOperand1: Number, pnOperand2:Number, pbAddition:Boolean) { var nErgebnis:Number;  if (pbAddition) {

 nErgebnis = pnOperand1 + pnOper­ and2; } else {

 nErgebnis = pnOperand1 – pnOper­ and2; }

 trace(„Die Berechnung ergibt: „+nErgebnis); }

berechnung(20,100,true);

berechnung(20,100,false);

Ausgabe im Nachrichtenfenster: Die Berechnung ergibt: 120 Die Berechnung ergibt: -80 Wir deklarieren die Funktion berechnung(), die über drei Parameter verfügt: pnOperand1 und pnOperand2 als Zahlen, mit denen gerechnet wird, sowie pbAddi­ tion, ein Bool’scher Wert, der festlegt, ob eine Addition oder eine Subtraktion erfolgen soll. Anschließend richten wir eine lokale Variable ein, die noch keinen Wert erhält. Sie dient dazu, das Ergebnis der Berechnung aufzunehmen. Abhängig vom Wert des Parameters

91

pbAddition erfolgt eine Addition (wenn true) oder eine Subtraktion (wenn false). Das Ergebnis wird zum Schluss im Nachrichtenfenster per trace() ausgege-

ben. Die Funktion wird zweimal aufgerufen, wobei die beiden Zahlenwerte identisch sind, aber einmal true und einmal false als Argument mitgegeben werden. Dadurch erreichen wir, dass beim ersten Aufruf eine Addition, beim zweiten eine Subtraktion erfolgt. Woher weiß Flash, welches Argument zu welchem Parameter gehört? Flash findet dies simpel über die Position innerhalb der Funktionsdeklaration sowie des Aufrufs heraus. Der Inhalt, der beim Aufruf beispielsweise an erster Stelle übergeben wird, entspricht auch dem Inhalt des ersten Parameters in der Deklaration. Wenn in der Deklaration der erste Parameter eine Zahl ist, muss beim Aufruf an dieser Stelle ebenfalls eine Zahl übergeben werden. Geschieht das nicht oder stimmt die Anzahl der Argumente nicht mit der Anzahl der Parameter überein, kommt es notwendigerweise zu einem Fehler. Fehlt ein Argument, ohne das es zu einer Typdiskrepanz mit den definierten Parametern kommt, erhalten wir leider wie so oft keine Fehlermeldung, sondern Flash, sich stumm in sein Schicksal fügend, führt die Funktion fehlerhaft aus. Die im Abschnitt „Verschachtelung von Funktionen“ behandelte Schreibweise läst sich mit parametrisierten Funktionen leider nicht anwenden. Denn Flash geht, wie Sie schon gesehen haben, automatisch von einem Funktionsaufruf aus, sobald einem Ereignis ein Ausdruck zugewiesen wird, der mit Klammern abschließt  – und genau das wäre notwendig, weil wir ein Argument ja in eine Klammer schreiben müssen.

10.6 Funktionen mit Rückgabewert (return) Die bisherigen Funktionen verrichten mehr oder minder schweigend ihr Werk. Es gibt darüber hinaus eine besondere Art von Funktionen, die nicht nur irgendwelche Aktionen ausführen, sondern an die aufrufende Stelle einen Wert zurück liefern: function Funktionsname():Datentyp{  Anweisung1;  Anweisung2;

 return Wert; }

92

Nehmen wir an, wir müssen öfters eine Multiplikation durchführen. Dann könnten wir entweder eine parametrisierte Funktion schreiben, die das Ergebnis in eine Variable speichert, und anschließend diese Variable auslesen. Oder wir können einfacher eine Funktion mit einem Rückgabewert einsetzen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nMulti:Number = 5;

Kapitel 10  Funktionen

 trace(„Dies wird nach return igno­ riert!“);

Bei jedem Mausklick führt Flash wie bisher die Berechnung durch und ignoriert geflissentlich die eben eingefügte return-Anweisung. 4. Machen Sie die Gegenprobe, indem Sie den re­ turn-Befehl auskommentieren (Fettdruck): //return nErgebnis;

 return nErgebnis;

Zwar berechnet Flash bei einem Mausklick wie bisher, doch die return-Anweisung existiert im Programm­ ablauf nicht mehr. Das Ergebnis der Berechnung wird daher auch nicht mehr ausgegeben. Statt dessen führt Flash den in Schritt 3 eingefügten trace()-Befehl aus.

}

this.onMouseDown = function() {

5. Heben Sie den im vorigen Schritt eingefügten Kommentar wieder auf.

 nZahl++;

Das können wir uns im Fall der Fälle zunutze machen, indem wir den return-Befehl verwenden, ohne ihm Daten zwecks Rückgabe zuzuweisen. Auf diese Weise lässt sich eine Funktion an einer beliebigen Stelle beenden.

var nZahl:Number = 2;

function multiplikation(pOperand1) {  var nErgebnis:Number = pOperand1*nMulti;

 trace(multiplikation(nZahl)); };

Klicken Sie mehrfach mit der Maus auf die Bühne, erhalten Sie im Nachrichtenfenster Zahlen, die ab der Zahl 15 jeweils in Fünferschritten erhöht werden. Beim ersten Klick wird die Variable nZahl inkrementiert, beträgt also 1. Dieser Wert wird an die Funktion multiplikation() als Argument übergeben und dort mit 5 multipliziert. Das Ergebnis speichern wir in einer lokalen Variable, die anschließend an die aufrufende Stelle, in unserem Fall in den trace()Befehl, zurückgeschrieben wird. Damit enthält die Klammer von trace() direkt das Ergebnis der Berechnung. Der Zwischenschritt über die Variable nErgebnis ist zwar nicht zwingend notwendig, er erhöht aber die Lesbarkeit des Codes. Falls komplexere Berechnungen durchgeführt werden müssen, als deren Ergebnis nicht nur ein, sondern mehrere Werte vorliegen, können wir weder mit mehreren return noch mit einer kommaseparierten Aufzählung die betreffenden Daten zurückgeben. In einem solchen Fall speichern Sie Ihre Daten in einem Array und geben dieses zurück. Der return-Befehl beendet recht radikal die Funktion, so dass Befehle, die danach im Skript stehen, vollständig ignoriert werden. 3. Erweitern Sie die Funktionsdeklaration von mul­ tiplikation(), indem Sie unmittelbar nach dem return-Befehl folgende Zeile einfügen:

10.7 Von Flash zur Verfügung gestellte Funktionen Neben den von den Entwicklern selbst definierten Funktionen existieren zahlreiche vorgegebene Funktionen, die wir direkt verwendet können, ohne dass wir sie vorher deklarieren müssen. Denn die Deklaration wird ja bereits von Flash vorweg genommen. Als Entwickler haben wir darauf zunächst keinen Einfluss, was auch gut ist, da wir ansonsten u. U. Gefahr liefen, die Skriptsprache durch fehlerhafte Deklarationen funktionsunfähig zu machen. Wir haben bereits häufig mit solchen Funktionen gearbeitet – mittlerweile in Fleisch und Blut übergegangen sein müsste das Paradebeispiel, nämlich der trace()-Befehl. Wir können ihn unmittelbar verwenden, ohne Flash mitteilen zu müssen, was er mit diesem Befehl anstellen soll. Andere besonders bei Frame-basierten Animationen eingesetzte Beispiele sind gotoAndPlay(), stop(), play() etc. Einen Überblick über solche Funktionen bietet Ihnen die Flash-Hilfe sowie das Hilfspanel im Editor unter der Kategorie Globale Funktionen sowie jeweils un-

10.8  Rekursion

93 Abbildung 14:  Vorgegebene Funktionen

ter den spezifischen Klassennamen. In letzterem Fall handelt es sich genau genommen um Methoden, die aber nichts anderes darstellen als Objekten zugeordnete Funktionen. Die meisten vorgefertigten Funktionen und Methoden verwenden Parameter, was ihnen größere Flexibilität verleiht. Manchmal allerdings meint es Macromedia/Adobe einfach zu gut mit uns und bietet schon mal Methoden an, die mit einem Dutzend oder mehr Parametern arbeiten. Wir werden solche Monster u. a. in den Kapiteln Text sowie Filter kennen und lieben lernen. Es spricht für Flash, dass diese vorgefertigten Funktionen keinesfalls in Stein gemeißelt sind. Sie lassen sich nämlich vom Entwickler anpassen, so dass wir im Prinzip in der Lage sind, eine ganz individuelle Flash-Version zu stricken. In der einfachsten Variante können wir per Prototyping auf die einzelnen Klassen und ihre Methoden zugreifen, um sie zu modifizieren und zu erweitern. Diese Vorgehensweise wurde viel in Flash MX und 2004 genutzt. Mit dem recht ausge-

feilten Klassenkonzept von Flash 8 und insbesondere ab CS3 bietet sich noch weit darüber hinaus gehende Möglichkeiten, die aber nicht mehr Gegenstand dieser Einführung sind.

10.8 Rekursion Eine Besonderheit stellen rekursive Funktionen dar, denn sie rufen sich ständig selbst auf. Das ist etwa so, als wollten Sie mit sich selbst kommunizieren, indem Sie beispielsweise andauernd Ihren eigenen Namen rufen  – ein zugegebenermaßen etwas schizophrener Zeitvertreib. Für die Programmierung dagegen macht dies in bestimmten Situationen durchaus Sinn (natürlich nicht bezüglich Ihres Namens!). Wir können auf diese Weise etwa eine Endlosschleife für einen Hintergrundsound erstellen, Fraktale visualisieren oder per Programmierung organische Objekte wie Pflanzen zeichnen.

Kontrollstrukturen

In den meisten bisherigen Beispielen haben wir es mit einem sehr einfachen Programmablauf zu tun gehabt, denn die einzelnen Code-Zeilen wurden sukzessive ohne Unterbrechung abgearbeitet. Wie im richtigen Leben kommt es jedoch in der Programmierung oft vor, dass man vor eine Entscheidung gestellt wird oder dass eine Aktion mehrfach hintereinander ausgeführt werden soll. Programmiertechnisch handelt es sich dabei um Kontrollstrukturen in Form einer bedingten Ausführung bzw. einer wiederholten Ausführung, für die Flash jeweils spezielle Elemente zur Verfügung stellt.

11.1 Bedingungen Die Bedingung macht das Ausführen von Code abhängig von bestimmten Voraussetzungen, die der Entwickler selbst definiert. Wenn beispielsweise Ihre Website passwortgeschützt ist, dann kann der Anwender sie nur mit einem korrekten Passwort besuchen. Oder Sie erstellen eine Animation, bei der ein Objekt sich permanent zwischen dem rechten und linken Bühnenrand hin- und herpendelt. Wenn das Objekt einen Rand erreicht, muss es sich umdrehen und in die andere Richtung gehen. All diese Aktionen setzen voraus, dass eine bestimmte Bedingung erfüllt ist, bevor sie ausgeführt werden.

11

if(Bedingung){ //Anweisungen; }

Das Schlüsselwort if leitet die Anweisung ein. Ihr folgt als Argument in runden Klammern die Bedingung, die erfüllt sein muss, damit der in geschweiften Klammern eingeschlossene Code-Block ausgeführt wird. Trifft die Bedingung nicht zu, wird der zugehörige Code-Block ignoriert. Die Auswertung der Bedingung ergibt immer ein true oder false, je nachdem, ob das, was in der runden Klammer angegeben wurde, wahr ist oder nicht. Unter Verwendung obiger Beispiele würden unsere if-Anweisungen lauten: if(Passwort == richtig){  Zugang; }

oder: if(Objekt erreicht Rand){  Objekt umdrehen;  Objekt bewegen; }

Ein konkretes Beispiel sähe dann so aus: 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: if(true){

11.1.1 Die if-Anweisung

trace(„Wahr“);

Solche Bedingungen lassen sich mit einer if-Anweisung formulieren, die in allgemeiner Form so aussieht:

Ausgabe im Nachrichtenfenster: Wahr

}

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

95

96

Beim Ausführen kontrolliert Flash, ob die Bedingung wahr ist. Da true immer wahr ist, denn als Konstante kann sie nie einen anderen Wert als den bereits enthaltenen Wert annehmen, und der entspricht nun mal true, führt Flash den trace()-Befehl aus. 3. Ersetzen Sie in der Bedingung den Wert true durch false (Fettdruck): if(false){

Jetzt erfolgt keine Ausgabe im Nachrichtenfenster, denn die angefragte Konstante enthält den Wert false. In dieser Form macht die if-Anweisung nicht allzu viel Sinn. Denn dass true immer true und false immer false entspricht, dürfte kaum eine Überraschung darstellen. Da die Bedingung jeden beliebigen Ausdruck enthalten darf, kontrolliert man oft Eigenschaften oder Inhalte von Variablen mit Hilfe von Vergleichsoperatoren. Dabei können die Variablen jeden Datentyp, und daher, bezogen auf obiges Beispiel, natürlich auch Boolsche Werte enthalten.

Kapitel 11  Kontrollstrukturen

if (bStart){

Ausgabe im Nachrichtenfenster: Das Spiel kann beginnen! Die Ausgabe ändert sich nicht gegenüber vorher, denn Flash führt automatisch einen Vergleich gegen true aus, selbst wenn wir die entsprechende Anweisung streichen. Anders formuliert liest Flash unsere Bedingung genauso, wie sie vor der Streichung in Schritt 4 formuliert war. Der Vollständigkeit halber führen Sie den Test mit dem Umkehrwert von bStart aus. 6. Ändern Sie die Initialisierung von bStart (Fettdruck): var bStart:Boolean = false;

Jetzt erfolgt keine Ausgabe im Nachrichtenfenster, denn der betreffende Code hängt ja davon ab, dass die Bedingung true ergibt. Das ist jedoch aufgrund der Initialisierung der Variablen mit false nicht mehr der Fall.

4. Fügen Sie folgende Codezeilen hinzu:

7. Ändern Sie die Bedingung wie folgt (Fettdruck):

var bStart:Boolean = true;

if (bStart == false){

if (bStart == true){

 trace(„Das Spiel kann beginnen!“);

Ausgabe im Nachrichtenfenster: Das Spiel kann beginnen!

}

Nun erscheint wieder die Meldung im Nachrichtenfenster (wobei man durchaus darüber diskutieren kann, ob ein Spiel ausgerechnet dann beginnen soll, wenn die Startvariable auf false gesetzt wird). Obwohl der Inhalt der Variablen bStart false ist, gibt der Ausdruck in der Bedingung true zurück. Denn dort steht, um es in beredter Prosa zu formulieren: „Der Inhalt von bStart beträgt false“, und das trifft bekanntermaßen aufgrund der Initialisierung zu. Analog zur oben vorgestellten Kurzform lässt sich diese Bedingung abkürzen.

Ausgabe im Nachrichtenfenster: Das Spiel kann beginnen! Die mit true initialisierte Variable bStart wird in der if-Anweisung evaluiert. Da sie wahr ist, gibt die Anweisung true zurück und führt den trace()-Befehl aus. Anders als zuvor kann die Variable bStart zu verschiedenen Zeitpunkten verschiedene Werte (true oder false) enthalten. Der von der if-Anweisung abhängige Code-Block wird also nicht in jedem Fall ausgeführt bzw. nicht in jedem Fall ignoriert. Wenn Sie Boolsche Werte abfragen wollen, dann macht es dementsprechend keinen Sinn, direkt mit der betreffenden Konstante zu arbeiten. Statt dessen verwendet man wie in diesem Beispiel eine Variable. Die Bedingung lässt sich in verkürzter Form schreiben, wenn getestet werden soll, ob der Variableninhalt true ist. 5. Ändern Sie die Bedingung, indem Sie den Vergleichsoperator und den nachfolgenden Vergleichswert streichen:

8. Ändern Sie die Bedingung wie folgt (Fettdruck): if (!bStart){

Ausgabe im Nachrichtenfenster: Das Spiel kann beginnen! Die Bedingung lautet nun: „Der Inhalt von bStart beträgt nicht true“, was in unserem Fall der Aussage „Der Inhalt von bStart beträgt false“ entspricht. Wie Sie sich sicher erinnern, kehren wir durch den Operator ! etwas in sein Gegenteil um.

11.1  Bedingungen

97

Selbstverständlich ist die Bedingung nicht auf Variablen mit Bool’schen Werten beschränkt, sondern andere Datentypen sind ebenso möglich wie die Verwendung komplexer Ausdrücke.

Umfasst der von der Bedingung abhängige CodeBlock nur eine einzige Zeile wie in vorliegendem Fall, kann die gesamte Anweisung in verkürzter Form geschrieben werden.

9. Ergänzen Sie das Skript:

12. Fügen Sie nach dem bisherigen Code folgende Zeile ein:

var sName:String = „Sven Regener“; if(sName == „Sven Regener“){

 if(sName == sGesucht) trace(„Der Autor lautet: „+ sName);

}

Ausgabe im Nachrichtenfenster: Der Autor lautet: Sven Regener

 trace(„Der Autor lautet: ”+ sName);

Ausgabe im Nachrichtenfenster: Der Autor lautet: Sven Regener Der Variablen sName weisen wir den String „Sven Regener“ zu. Anschließend kontrollieren wir, ob der Variableninhalt mit einem String innerhalb der Bedingung übereinstimmt, was hier zutrifft. 10. Ändern Sie das Skript (Fettdruck):

var sName:String = „Sven Regener“;



if(sName == sGesucht){



var sGesucht:String;

 trace(„Der Autor lautet: ”+ sGesucht);

}

In der Bedingung tauschen wir den Klarnamen, gegen den wir testen, mit einer weiteren Variablen aus. Nun wird Variableninhalt mit Variableninhalt verglichen. Stimmen beide überein, gibt die Bedingung true zurück und der eingeschlossene Code wird wie gehabt ausgeführt. In unserem konkreten Beispiel allerdings erfolgt keine Ausgabe im Nachrichtenfenster. Denn die Variable sGesucht wurde zwar deklariert, aber wir haben ihr keinen Wert zugewiesen. Damit erhält sie automatisch den Wert undefined. Für Flash lautet die Bedingung dann: if(„Sven Regener“ == undefined){

Das trifft eindeutig nicht zu, ergibt also false.

Wir erhalten im Nachrichtenfenster zweimal dieselbe Ausgabe, nämlich einmal von der vorhergehenden, dreizeiligen if-Anweisung, und einmal von der aktuellen Kurzschreibweise. Welche Schreibweise Sie konkret wählen, hängt letzten Endes von Ihren Vorlieben ab. Die dreizeilige hat den Vorteil der besseren Lesbarkeit in längerem Code, da Sie durch die automatische Einrückung leichter erkennen können, dass hier eine if-Anweisung vorliegt. Zudem ist eine Erweiterung einfacher möglich, da man ohne Änderung des bisherigen Codes für weitere Anweisungen nur neue Zeilen einfügen muss. Andererseits spart die einzeilige Anweisung natürlich Schreibarbeit und macht den professionelleren Eindruck (doch, doch, das Auge isst mit). Wir verwenden im Nachfolgenden durchgehend die mehrzeilige Schreibweise. Das Element, das wir in einer Bedingung auswerten, kann sich im Laufe der Anwendung ändern, was insbesondere bei Animationen, bei denen spezifische Objekteigenschaften abgefragt werden, der Fall ist. Wir werden im Rahmen zahlreicher Workshops darauf zurückkommen. Dazu ein einfaches Beispiel (hier ohne Animation): 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nKlick:Number = 0;

this.onMouseDown = function(){

11. Ändern Sie das Skript (Fettdruck):

 nKlick++;

 var sGesucht:String = „Sven Regener“;

 if(nKlick == 5){

Ausgabe im Nachrichtenfenster: Der Autor lautet: Sven Regener Jetzt stimmen wie beim ersten Beispiel beide Strings wieder miteinander überein, so dass der abhängige Code ausgeführt werden kann.

 trace(„nKlick: „+nKlick);  trace(„Sie haben fünfmal die Maustaste gedrückt!“);  delete this.onMouseDown; } }

98

Testen Sie, indem Sie mehrfach auf die Bühne klicken. Achten Sie dabei darauf, nicht in das geöffnete Nachrichtenfenster zu klicken, denn diese Klicks werden nicht von der Bühne des Flashfilms ausgewertet. Bei jedem Mausklick erscheint im Nachrichtenfenster: nKlick: 1 beziehungsweise: nKlick: 2 usw., bis der Wert 5 erreicht. Dann erfolgt abschließend die Ausgabe: Sie haben fünfmal die Maustaste gedrückt! Danach hüllt sich Flash in intensives Schweigen. Jeder Klick erhöht die Variable nKlick um eins. Gleichzeitig kontrollieren wir, ob bereits der Wert 5 erreicht wurde. Ist das der Fall, geben wir eine entsprechende Meldung aus und löschen den Mausklick. Die Bedingung in der if-Anweisung trifft anfangs nicht zu. Erst nach mehrfachen Änderungen der abgefragten Variablen wird der definierte Grenzwert erreicht, und Flash führt anschließend den nur für diesen konkreten Fall vorgesehenen Code aus.

Kapitel 11  Kontrollstrukturen

Wir initialisieren nZahl mit dem Wert 100 und fragen zunächst ab, ob diese Zahl größer 10 ist. Da dies zutrifft, führt Flash die zugehörige trace()-Anweisung aus und fragt nach, ob sie zugleich kleiner 100 ist. Auch diese Bedingung gibt true zurück, so dass Flash die entsprechende trace()-Anweisung aufruft. Beachten Sie, dass die innere if-Anweisung von der äußeren if-Anweisung abhängt. Falls die äußere ein false ergibt (z. B. mit dem Wert 60 anstatt 10), wird die innere nicht mehr getestet. Der umgekehrte Fall, nämlich das Zutreffen nur der äußeren Bedingung, ist problemlos möglich. Dazu müssen Sie lediglich die innere Bedingung ändern (z. B. 40 anstatt 100 verwenden), so dass Flash nur noch die erste trace()Anweisung ausführt. Eine Kurzschreibweise ermöglicht die Verwendung des logischen und-Operators in Form von &&. Sie ist jedoch nicht vollständig identisch mit der verschachtelten if-Anweisung. 3. Fügen Sie nach der letzten schließenden Klammer außerhalb der if-Anweisung folgende Zeilen ein: if (nZahl>10 && nZahl<100) {

 trace(„nZahl ist größer 10“);

11.1.2 Verschachtelte if-Anweisungen, logisches und, logisches oder Eine if-Anweisung lässt sich beliebig tief verschachteln. Sie kann also ihrerseits eine oder mehrere ifAnweisungen enthalten. Falls wir beispielsweise wissen wollen, ob der Wert einer Variablen innerhalb eines gewissen Bereichs liegt, könnte man mit einer derartigen Verschachtelung arbeiten. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var nZahl:Number = 50; if(nZahl > 10){

 trace(„nZahl ist kleiner 100“); }

Ausgabe im Nachrichtenfenster: nZahl ist größer 10 nZahl ist kleiner 100 Zunächst ergibt sich ein gleicher Ablauf wie zuvor: Flash testet, ob die angegebene Variable größer 10 und gleichzeitig kleiner 100 ist. Da der Test true ergibt, erfolgt die gewohnte Ausgabe im Nachrichtenfenster. Allerdings verknüpft der und-Operator beide Ausdrücke miteinander, so dass beide true ergeben müssen, ehe die nachfolgende Anweisung beachtet wird. Trifft auch nur eine der Bedingungen nicht zu, ignoriert Flash die trace()-Anweisung.

 trace(„nZahl ist größer 10“)

4. Ändern Sie in dieser Bedingung testweise den Wert 100 auf 40 (Fettdruck):

 trace(„nZahl ist kleiner 100“);

if (nZahl>10 && nZahl<40) {

 if(nZahl < 100){ } }

Ausgabe im Nachrichtenfenster: nZahl ist größer 10 nZahl ist kleiner 100

Die erste Bedingung trifft zwar noch zu, die zweite dagegen nicht mehr. Daher ergibt der gesamte Ausdruck in den runden Klammern false, so dass die trace()-Anweisung nicht zur Ausführung kommt. Welchen Wert die durch den und-Operator verknüpf-

11.1  Bedingungen

ten Bedingungen ergeben, lässt sich einfach mit einem trace() kontrollieren. 5. Erweitern Sie den Code um diese Zeile: trace(nZahl>10 && nZahl<40);

Ausgabe im Nachrichtenfenster: false Flash wertet den kompletten Ausdruck, den wir trace() als Argument übergeben, aus und stellt fest, dass der zweite Teilausdruck, nämlich nZahl<40, nicht zutrifft. Damit ergibt sich für den gesamten Ausdruck false, wie im Nachrichtenfenster angezeigt wird. 6. Ändern Sie sowohl in der if-Anweisung wie in der trace()-Anweisung die 40 in eine 100 (Fettdruck): if (nZahl>10 && nZahl<100) {

und: trace(nZahl>10 && nZahl<100);

Ausgabe im Nachrichtenfenster: nZahl ist größer 10 nZahl ist kleiner 100 true Da beide Bedingungen zutreffen, ergibt der gesamte Ausdruck true und die Welt ist wieder in Ordnung. Mit einem logischen oder bzw. || können wir festlegen, dass es ausreicht, wenn nur eine der Bedingungen zutrifft. Dabei spielt es, anders als bei der zuvor behandelten verschachtelten if-Anweisung keine Rolle, an welcher Stelle sich diese Bedingung befindet. 7. Erweitern Sie den Code um diese Zeilen: if (nZahl>10 || nZahl<100) {  trace(„Logisches oder:“);

 trace(„nZahl ist größer 10“);

 trace(„nZahl ist kleiner 100“); }

trace(nZahl>10 || nZahl<100);

Ausgabe im Nachrichtenfenster: Logisches oder: nZahl ist größer 10 nZahl ist kleiner 100 true

99

Wenig überraschend meldet Flash wie zuvor, die getestete Zahl sei größer 10 und kleiner 100. Unsere ifAnweisung unterscheidet sich so prinzipiell nicht von der vorhergehenden mit dem logischen und. Anders sieht es jedoch aus, wenn wir eine der Bedingungen so wählen, dass sie nicht zutrifft. Ändern Sie den ersten Wert innerhalb der if-Anweisung sowie bei der letzten trace()-Anweisung (Fettdruck): if (nZahl>60 || nZahl<100) {

und: trace(nZahl>60 || nZahl<100);

Ausgabe im Nachrichtenfenster: Logisches oder: nZahl ist größer 10 nZahl ist kleiner 100 true Die Ausgabe ändert sich nicht. Während beim logischen und alle Bedingungen zutreffen müssen, reicht beim logischen oder eine korrekte Bedingung aus. Der Code wird also in jedem Fall vollständig ausgeführt, solange auch nur eine einzige der Bedingungen den Wert true zurückgibt.

11.1.3 if else Bei manchen Aktionen reicht es nicht aus, nur eine Bedingung ohne Alternative zu verwenden. Denken Sie zurück an das Beispiel der passwortgeschützten Site. Gibt der Anwender das korrekte Passwort ein, gewinnt er Zugang zur Site. Doch wie verhält es sich für den Fall einer falschen Passworteingabe? Auch dann muss eine Reaktion erfolgen, da der Anwender sonst nicht weiß, was geschehen ist. Eine derartige Alternative lässt sich in einer if-Bedingung mit dem Schlüsselwort else definieren. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf der Ebene objects an beliebiger Stelle der Bühne einen Kreis (50 × 50); 3. Wandeln Sie den Kreis in einen MovieClip um (Bibliotheksname beliebig, Instanzname kreis, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu: if(kreis._x < Stage.width/2){

100

 trace(„Linke Seite“); }else{

 trace(„Rechte Seite“); }

Je nachdem wo sich der Kreis auf Ihrer Bühne befindet, erhalten Sie einen der beiden Strings als Ausgabe im Nachrichtenfenster. Das Schlüsselwort else definiert einen alternativen Anweisungsblock, der dann automatisch auszuführen ist, wenn die ifBedingung nicht zutrifft. Nehmen wir an, Ihr MovieClip befindet sich auf der x-Position 111. Dann gibt Flash die Meldung „Linke Seite“ aus. Liegt er dagegen beispielsweise auf 666, erhalten Sie die Ausgabe „Rechte Seite“. Denn die if-Bedingung gibt in dem Fall false zurück und Flash ruft den Code im elseFall auf. Auch für diese Form existiert eine Kurzschreibweise. 5. Ergänzen Sie den Code um folgende Zeile:  (kreis._x < Stage.width/2)? trace(„Linke Seite“):trace(„Rechte Seite“);

Diese Schreibweise ähnelt stark der bereits vorgestellten einzeiligen Schreibweise für die einfache if-Anweisung. In allgemeiner Form sieht sie so aus: Bedingung ? Anweisung1 : Anweisung2;

Dabei entspricht Anweisung1 dem Code, der bei Zutreffen der if-Bedingung ausgeführt wird, während Anweisung2 für den else-Fall steht. Das Fragezeichen oder, genauer, der Bedingungsoperator trennt die Bedingung von den Anweisungsblöcken. Hier gilt das gleiche wie das, was für die erwähnte Kurzschreibweise der einfachen if-Anweisung gesagt wurde. Insbesondere aus Gründen der leichteren Lesbarkeit verwenden wir im Nachfolgenden die mehrzeilige Form.

11.1.4 else if Eigentlich haben wir in dem vorhergehenden Beispiel mit dem Kreis ein bisschen gemogelt – Asche auf unser Haupt! Denn was geschieht, wenn sich der Kreis exakt in der Bühnenmitte befindet? Unserer Abfrage zufolge würde er dann den rechtsseitigen

Kapitel 11  Kontrollstrukturen

Kreisen zugeschlagen, da wir nur die zwei Fälle „links“ und „alle anderen“ unterscheiden, d. h. wir können nur einen von zwei Code-Blöcken ausführen. Damit würde ein Fall, der durchaus eintreten kann, in die falsche Kategorie eingeordnet. Mit den Schlüsselwörtern else if dagegen können wir eine beliebige Anzahl an Anweisungen aufrufen und damit auch einen dritten Fall für obiges Beispiel definieren. 6. Ändern Sie das Skript aus dem Kreisbeispiel wie folgt (Fettdruck): if(kreis._x < Stage.width/2){

 trace(„Der Kreis befindet sich auf der linken Seite“); }else if(kreis._x > Stage.width){

 trace(„Der Kreis befindet sich auf der rechten Seite“); }else{

t race(„Der Kreis befindet sich exakt in der Mitte“) }

Unsere if-Anweisung besteht aus drei verschiedenen abhängigen Code-Blöcken, die sich in beredter Prosa folgendermaßen formulieren lassen:

• if: „Wenn die x-Position des Kreises kleiner als die halbe Bühnenbreite ist“ if: „Oder wenn die x-Position des Kreises größer als die halbe Bühnenbreite ist“ • else: „Oder wenn keine der vorgenannten Bedingungen zutrifft“

• else

Damit sind alle Möglichkeiten in unserem konkreten Fall abgedeckt und Flash weiß genau, welcher CodeBlock ausgeführt werden muss. Es gibt keine Obergrenze für die Anzahl der else if-Anweisungen, wir könnten also theoretisch Dutzende hintereinanderschalten (falls es tatsächlich so viele Fälle zu unterscheiden gäbe). Wenn wir uns den Code anschauen, ähnelt er stark einer Aneinanderreihung von einfachen if-Anweisungen. Warum verwendet man dann nicht drei derartige if-Anweisungen anstelle von if, if else und else? Der grundlegende Unterschied besteht darin, dass ein else immer nur einen eindeutigen Fall zulässt, also ausschließlich ist, während die mehrfache Verwendung von einfachen if-Anweisungen in bestimmten Fällen mehrfach true ergeben kann.

11.1  Bedingungen

7. Positionieren Sie die Instanz kreis auf x = 150, y = beliebiger Wert. 8. Ersetzen Sie den Code vollständig durch: var nPos:Number = kreis._x; if (nPos >50) {

 trace(„X-Position >= 50“); } else if (nPos >=10) {

 trace(„X-Position >= 10“); }

Ausgabe im Nachrichtenfenster: X-Position >= 50 Um nachher einfacher darauf zugreifen zu können, speichern wir die aktuelle x-Position der Instanz kreis in der Variablen nPos. Anschließend testen wir, ob diese Variable größer als 50 oder größer/gleich 10 ist. Da sich der Kreis auf der Position 150 befindet, trifft beides zu. Wir möchten jedoch für die Objekte, deren x-Position zwischen 10 und 50 liegt, eine andere Aktion auslösen als für diejenigen Objekte, die sich jenseits von x = 50 befinden. Daher legen wir in der Abfrage durch else fest, dass nur eine der beiden Bedingungen als gültig angesehen wird. Da zuerst die if-Bedingung zutrifft (150, der Inhalt von nPos, ist größer als 50), wird die zugehörige Anweisung ausgeführt und der else-Fall ignoriert. Anders verhält es sich, wenn wir die Bedingungen mit Hilfe einfacher if-Anweisungen festlegen.

101

11.1.5 switch, break Wie erwähnt, können wir prinzipiell endlos viele ifAnweisungen hintereinander ausführen. Unser Code wird aber damit sehr schnell unübersichtlich. Glücklicherweise bietet AS mit der switch-Anweisung die Möglichkeit einer Vereinfachung an. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var sJahreszeit:String = „Herbst“; switch (sJahreszeit) { case „Frühling“ :

 trace(„Wohl temperiert, Blumen blühen, selten über 30 Grad“);  break;

case „Sommer“ :

 trace(„So fühlt sich ein Frühstücksbrötchen beim Aufbacken“);  break;

case „Herbst“ :

 trace(„Umgekehrter Frühling, beginnt neuerdings erst Ende November“);  break;

case „Winter“ :

if (nPos>50) {

 trace(„Alten Sagen zufolge soll es früher wochenlang gefrorenes Wasser, ‚Schnee‘ genannt, geregnet haben“);

}

default :

 trace(„X-Position >= 10“);

 break;

9. Ergänzen Sie den Code um folgende Zeilen:  trace(„X-Position >= 50“);

 break;

if (nPos>=10) {

 trace(„Die fünfte Jahreszeit“);

}

}

Ausgabe im Nachrichtenfenster: X-Position >= 50 X-Position >= 10

Ausgabe im Nachrichtenfenster: Umgekehrter Frühling, beginnt neuerdings erst Ende November

Zwischen beiden if-Bedingungen besteht keine Verknüpfung, sie werden also unabhängig voneinander ausgeführt. Da 150 sowohl größer als 50 wie auch größer als 10 ist, treffen beide Bedingungen zu und Flash führt zweimal einen trace()-Befehl aus. Auf diese Weise ist es nicht möglich, im konkreten Fall eine einzige, eindeutige Unterscheidung zu treffen.

Wir initialisieren die Variable sJahreszeit mit dem String „Herbst“. Danach testen wir ihren Inhalt mit Hilfe der switch-Anweisung. Da nur der Fall zutrifft, der unter case: „Herbst“ definiert wird, gibt Flash den String „Umgekehrter Frühling …“ aus. Beachten Sie, dass der Anweisungsblock innerhalb von jedem case-Fall mit einem break-Befehl

102

Kapitel 11  Kontrollstrukturen

schließen muss. Dieser Befehl führt dazu, dass die switch-Anweisung direkt abgebrochen wird. Wenn Sie auf break verzichten, werden alle nachfolgenden Anweisungen automatisch mit ausgeführt.

}

3. Kommentieren Sie testweise alle break-Anweisungen aus (Fettdruck):

}

//break;

Wie Sie sehen, erspart uns die switch-Anweisung nicht nur Tipparbeit, sondern sie strukturiert den Code, so dass wir auf den ersten Blick erkennen können, welche Elemente zusammen gehören. Das ist bei den mehrfachen if-Anweisungen nicht der Fall. Leider lässt switch keine Vergleiche zu, die getestete Variable darf also keinen Ausdruck enthalten, sonder nur einen Wert. Bei Vergleichen bleibt daher nur die Verwendung von if-Anweisungen mit oder ohne else, je nach Bedarf.

Ausgabe im Nachrichtenfenster: Umgekehrter Frühling, beginnt neuerdings erst Ende November Sagen zufolge soll es früher wochenlang gefrorenes Wasser, ‚Schnee‘ genannt, geregnet haben Die fünfte Jahreszeit Wie zuvor wird die Variable zunächst in der ersten Zeile der switch-Anweisung ausgewertet, anschließend springt Flash zu dem case-Fall, der zutrifft, also wieder case: „Herbst“. Da diesmal die breakAnweisungen fehlen, werden alle nachfolgenden Code-Zeilen ebenfalls ausgeführt, wodurch wir insgesamt drei String-Ausgaben erhalten. 4. Heben Sie die Kommentare der break-Befehle wieder auf. Am Ende befindet sich ein default-Fall, der dann ausgeführt wird, wenn keine der vorgenannten Bedingungen zu trifft. 5. Löschen Sie die Initialisierung von sJahreszeit, so dass nur noch die Deklaration bestehen bleibt: var sJahreszeit:String;

Ausgabe im Nachrichtenfenster: Die fünfte Jahreszeit Da die abgefragte Variable keinen der in den caseFällen definierten Inhalte besitzt, kommt der default-Fall zum Tragen und Flash gibt die dort definierte Nachricht aus. Offiziell empfiehlt Macromedia/ Adobe die Verwendung eines default-Falls. In der Praxis verzichtet man jedoch mitunter darauf, da es eben nur eine Option darstellt, ohne die der entsprechende Code ebenfalls korrekt funktioniert. Würden wir die switch-Anweisung mit einfachen if-Anweisungen schreiben wollen, sähe es so aus: if(sJahreszeit == „Frühling“){

 trace(„Wohl temperiert, Blumen blühen, selten über 30 Grad“);

if(sJahreszeit == „Sommer“){

 trace(„So fühlt sich ein Frühstücksbrötchen beim Aufbacken“); //usw.

6. Ergänzen Sie testweise folgenden Code: var nZahl:Number = 10; switch (nZahl){  case (>5):

 trace(„nZahl ist größer 5“);  break;

 case (>10):

 trace(„nZahl ist größer 10“);  break; }

Ausgabe im Nachrichtenfenster: **Fehler** Szene=Szene 1, Ebene=Ebene Bild=1:Zeile 27: Unerwartetes Auftreten von ‚>‘ case (>5):

1,

Die case-Fälle lassen nur einen Wert bzw. einen Ausdruck zu, akzeptieren aber leider keinen Vergleichsoperator. Daher mahnt Flash die fraglichen Zeilen an und führt den Code nicht aus. Berechnungen dagegen sind möglich. 7. Ersetzen Sie die in Schritt 10 definierten caseFälle durch (Fettdruck): case (nZahl*1):

//Anweisung wie zuvor case (nZahl*2):

//Anweisung wie zuvor

11.2  Schleifen

Die Berechnung ergibt im ersten Fall 10, im zweiten 20, ist also identisch mit der Nennung der konkreten Zahlen als Bedingung. Auf den ersten Blick mag eine derartige Berechnung merkwürdig anmuten, sie macht aber durchaus Sinn. Stellen Sie sich vor, Sie programmieren ein Spiel mit verschiedenen Leveln. Abhängig von der erreichten Punktzahl wird der nächste Level gestartet. Das ließe sich mit einer derartigen switch-Anweisung realisieren, wobei nZahl der Basispunktezahl für einen Level entsprechen würde. Die in unserem Beispiel verwendeten Multiplikatoren 1, 2 usw. entsprächen dann der Levelnummer, die zugeordneten Anweisungen würden den betreffenden Level aufrufen. Wir haben break zwar nur in der switch-Anweisung eingesetzt, aber der Befehl lässt sich genau so gut auch in if-Anweisungen verwenden. Wenn wir trotzdem direkte Zahlenvergleiche mit Hilfe einer switch-Anweisung durchführen wollen, müssen wir einen kleinen Umweg nehmen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nZahl:Number = 10;

var nGrenze:Number = 5;

 switch ((nZahl-nGrenze)/Math. abs((nZahl-nGrenze))) {

103

Der Trick besteht darin, das Vorzeichen der Differenz zwischen der zu prüfenden Zahl und dem Grenzwert zu ermitteln. Das Vorzeichen einer Zahl erhalten wir, indem wir sie durch denselben Wert ohne Vorzeichen dividieren. Wird eine negative durch eine positive Zahl gleichen vorzeichenlosen Werts dividiert, erhalten wir eine negative Zahl. Dividieren wir positiv durch positiv, ist auch das Ergebnis positiv. In unserem konkreten Fall lautet die Berechnung im Klartext: (10–5)/Math.abs((10–5))

bzw.: 5/5

was 1 ergibt. Damit trifft der unter case (1) definierte Fall zu. 3. Ändern Sie die Initialisierung von (Fettdruck): var nZahl:Number = 1;

Wahrheitsgemäß meldet das Nachrichtenfenster, die getestete Zahl sei kleiner. Hier lautet die Berechnung im Klartext: (1–5)/Math.abs((1–5))

bzw.:

case (-1) :

-4/4

 break;

was -1 ergibt, wodurch der unter case (-1) definierte Fall eintritt. Sind beide Werte dagegen gleich, führt switch den default-Fall aus.

 trace(nZahl + „ ist größer „ + nGrenze);

11.2 Schleifen

 trace(nZahl + „ ist kleiner „ + nGrenze); case (1) :

 break;

default :

 trace(nZahl + „ ist gleich „ + nGrenze); }

Ausgabe im Nachrichtenfenster: 10 ist größer 5 In diesem Beispiel greifen wir noch mal die Werte auf, die oben bei dem direkten und daher fehlgeschlagenen Vergleich benutzt wurden. Wir initialisieren den zu vergleichenden Wert mit 10 und legen den Grenzwert mit 5 fest. Danach greifen wir auf die switchAnweisung zu, die einen Ausdruck auswertet.

Während Bedingungen die Voraussetzungen definieren, die für das Ausführen von Code erfüllt sein müssen, legen Schleifen fest, wie oft bestimmte Aktionen aufgerufen werden sollen. Schleifen sind ebenso wie Bedingungen von enormer Bedeutung für die Programmierung. Wenn Sie beispielsweise sukzessive auf alle Inhalte eines Arrays zugreifen, nacheinander Objekte einblenden, Strings zeichenweise ändern wollen etc.  – in jedem Fall kommen Schleifen zum Einsatz. Auch hier stellt Flash mehrere Varianten zur Verfügung.

104

11.2.1 for-Schleife Die bei weitem am häufigsten eingesetzte Version einer Schleife stellt die for-Schleife dar. Sie besitzt allgemein folgende Form: for(Initialisierung; Bedingung; Veränderung){ //Anweisungen; }

Um zu verstehen, wie sie funktioniert, wollen wir überlegen, wie wir einen Vorgang mehrfach ausführen. Eine besonders anspruchsvolle Aufgabe wählend nehmen wir an, wir wollen von 1 bis 10 zählen, der Zählvorgang entspricht also der zu wiederholenden Aktion. Wir beginnen mit 1, addieren jeweils 1 hinzu und hören dann auf, wenn wir 10 erreicht haben. Nichts anderes wird in der oben dargestellten Form festgelegt:

• Die Initialisierung entspricht unserem Startwert 1; • Die Bedingung entspricht allen Zahlen bis zu unse-

rem Endewert 10; • Das Addieren von 1, um zur nächst höheren Zahl zu gelangen, entspricht der Veränderung. Um den Zählvorgang in saubere ActionScript -Syntax zu gießen, gehen wir folgendermaßen vor. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: for(var i:Number = 1; i <= 10; i++){  trace(i); }

Ausgabe im Nachrichtenfenster: 1 2 3 4 5 6 7 8 9 10 Als Startwert legen wir in der Variablen i den Wert 1 fest. Unsere Bedingung lautet, dass alle Zahlen, die kleiner oder gleich 10 sind, als zulässig gelten.

Kapitel 11  Kontrollstrukturen

Abschließend definieren wir, dass wir per Inkrement vom Startwert 1 zum Endewert 10 gelangen. Solange die Bedingung zutrifft, also i kleiner oder gleich 10 ist, führt Flash die trace()-Anweisung aus. Die Variable, die für Initialisierung und Bedingung verwendet wird, heißt Zählvariable. Es hat sich eingebürgert, dafür die Kleinbuchstaben i, j etc. zu verwenden und auf eine Deklaration außerhalb der Schleife, wie wir sie bei anderen Variablen kennen gelernt haben, zu verzichten. Selbstverständlich können Sie andere Variablennamen verwenden; wir wollen uns im Nachfolgenden allerdings an dieser Konvention orientieren. Achten Sie darauf, entgegen sonstiger Gewohnheit die Argumente in der Klammer per Semikolon anstelle eines Kommas zu trennen. Wie führt Flash den Code aus? Zunächst wird eine Variable mit dem Wert i initialisiert. Das geschieht genau ein einziges Mal, nämlich zu Beginn des Schleifenaufrufs. Dann kontrolliert Flash, ob der Initialwert der Bedingung entspricht. Das trifft in unserem Fall zu. Anschließend wird die trace()-Anweisung ausgeführt. Gelangt Flash ans Ende der Anweisungen – der Code-Block kann ja mehr als nur einen einzigen Ausdruck enthalten wie in unserem Beispiel –, wird i inkrementiert. Die Addition erfolgt erst zum Schluss, da wir ein Post-Inkrement verwenden. Bei einem PräInkrement würde i erst hochgezählt, anschließend käme der Anweisungsblock mit dem trace() zum Zug. Nun springt Flash wieder an den Schleifenbeginn und kontrolliert, ob der neue Wert von i noch der Bedingung entspricht. Ist das der Fall, wird derselbe Prozess, d. h. Abarbeiten aller Anweisungen, wieder durchgeführt. Nach dem nächsten Inkrement erfolgt eine erneute Kontrolle. Das wiederholt sich solange, bis i den in der Bedingung genannten Wert übersteigt. Dann springt Flash sofort ans Ende der Schleife und beendet sie, ohne die darin enthaltenen Anweisungen erneut auszuführen. Da wir uns i jeweils ausgeben lassen, können wir genau erkennen, welchen Wert die Zählvariable innerhalb der Schleife besitzt. Beachten Sie, dass i, obwohl innerhalb der Schleife als lokale Variable definiert, nach Ablauf der Schleife weiterhin existiert und den ersten Wert enthält, der nicht mehr die Schleifenbedingung erfüllt. 3. Fügen Sie nach der schließenden Klammer der Schleife folgende Zeile ein: trace(„Nach der Schleife beträgt i: “+i);

11.2  Schleifen

105

Ausgabe im Nachrichtenfenster: Nach der Schleife beträgt i: 11

die Schleife einfach solange aus, bis keine der Bedingungen mehr gilt.

Wie Sie erkennen, zählt Flash bis zum ersten nicht mehr gültigen Wert, hier 11, hoch. Dieser Wert wird nicht mehr innerhalb der Schleife, sondern nach ihrem Ende ausgegeben. Daraus ergibt sich gerade für Anfänger eine Fehlerquelle: Außerhalb der Schleife besteht keine Möglichkeit, auf die Schleifenwerte von i zuzugreifen. Statt dessen werden Sie immer den ersten nicht mehr gültigen Wert erhalten, in unserem konkreten Beispiel die Zahl 11. Wie wir in einigen Workshops sehen werden, stellt das mitunter ein Problem dar, so dass wir dort nach Möglichkeiten suchen müssen, die einzelnen Zählwerte permanent zu speichern. Der Schleifenkopf, d. h. die Stelle, an der die Schleife definiert wird, kann mehrere Initialisierungen enthalten.

5. Ändern Sie den Schleifenkopf wie folgt (Fettdruck):

4. Ändern Sie den bisherigen Code wie folgt (Fettdruck):  for(var i:Number = 1, j:Number = 1; i <= 10; i++, j--){  trace(„i: „+i+“, j: „+j); }

Ausgabe im Nachrichtenfenster: i: 1, j: 1 i: 2, j: 0 i: 3, j: -1 i: 4, j: -2 i: 5, j: -3 i: 6, j: -4 i: 7, j: -5 i: 8, j: -6 i: 9, j: -7 i: 10, j: -8 Der Ablauf entspricht demjenigen von zuvor, lediglich die Variable j tritt hinzu. Sie wird mit dem gleichen Wert wie i initialisiert, aber schrittweise dekrementiert, also jeweils um 1 vermindert. Die Anzahl der Schritte wird weiterhin durch i vorgegeben. Die Zählvariable j wird nur solange dekrementiert, wie wir i inkrementieren. Dadurch erhalten wir wiederum 10 verschiedene Ausgaben im Nachrichtenfenster. Stimmt die Anzahl der Schleifendurchläufe, die sich aus Bedingung und Änderung ergibt, für verschiedene Zählvariablen nicht miteinander überein, führt Flash

 for(var i:Number = 1, j:Number = 1; i <= 10, j<=12; i++, j++){

Ausgabe im Nachrichtenfenster: i: 1, j: 1 i: 2, j: 2 i: 3, j: 3 i: 4, j: 4 i: 5, j: 5 i: 6, j: 6 i: 7, j: 7 i: 8, j: 8 i: 9, j: 9 i: 10, j: 10 i: 11, j: 11 i: 12, j: 12 Über Bedingung und Änderung der i-Variablen legen wir 10, im Fall der j-Variable aber 12 Schleifendurchläufe fest. Da eine Schleife in jedem Fall solange ausgeführt wird, wie eine Bedingung zutrifft, bestimmt in unserem Beispiel j die Gesamtanzahl der Durchläufe. Das führt allerdings automatisch dazu, dass i trotz Erreichen des Grenzwerts von 10 weiter inkrementiert wird. Daher müssen Sie bei Schleifen dieser Art darauf achten, nicht durch logisch falsche Argumente zu fehlerhaften Werten zu gelangen. Davon abgesehen erweisen sich solche Schleifen als schwer lesbar und sollten daher möglichst selten verwendet werden. Wie im Fall der if-Anweisung erlaubt die Schleife eine beliebige Verschachtelung. Das erscheint vielleicht unlogisch, denn wozu sollten wir einen Anweisungsblock, der einzelne Aktionen mehrfach ausführt, seinerseits mehrfach aufrufen? Eine solche Schleife in der Schleife stellt beispielsweise eine einfache Lösungsmöglichkeit für eine gekachelte Fläche dar, also eine Fläche, die wie eine Tabelle aus Spalten und Zeilen besteht, deren Inhalte Grafiken bilden. Sie kann für grafische Effekte ebenso eingesetzt werden wie als Spielfeld. In verschiedenen Workshops werden wir ausführlichere Einsatzbeispiele kennen lernen. Hier wollen wir uns mit einem grundlegenden Beispiel begnügen. 1. Erstellen Sie eine Standarddatei.

106

2. Weisen Sie actions folgendes Bildskript zu: for (var i:Number = 1; i<=3; i++) {

Kapitel 11  Kontrollstrukturen

3. Fügen Sie vor Beginn der Schleife folgende Zeile ein:

 for (var j:Number = 1; j<=3; j++) {

  trace(getTimer() + „ Millisekunden vor Schleifenaufruf“);

}

4. Fügen Sie nach Ende der Schleife folgende Zeile ein:

 trace(„i: „+i+“, j: „+j); }

Ausgabe im Nachrichtenfenster: i: 1, j: 1 i: 1, j: 2 i: 1, j: 3 i: 2, j: 1 i: 2, j: 2 i: 2, j: 3 i: 3, j: 1 i: 3, j: 2 i: 3, j: 3 In der ersten Zeile, also der äußeren Schleife, legen wir fest, dass ein Anweisungsblock insgesamt dreimal auszuführen ist. Besagter Anweisungsblock wird in der zweiten Zeile definiert. Dabei handelt es sich ebenfalls um eine Schleife, die einen trace()-Befehl dreimal ausführt. Dadurch erhalten wir insgesamt 3 × 3 = 9 Aufrufe von trace(). Im Einzelnen geschieht folgendes: Wenn i mit 1 initialisiert wird, beginnt die zweite Schleife mit der Initialisierung von j, dem ebenfalls 1 zugewiesen wird. Dann gelangt Flash ans Ende der inneren Schleife, setzt j auf 2, kehrt zurück zum Schleifenbeginn und kontrolliert, ob die Bedingung noch gilt. Da dies zutrifft (2 ist kleiner 3), wird erneut der trace()-Befehl ausgeführt, addiert und kontrolliert. Auch der j-Wert von 3 erfüllt noch die Bedingung und derselbe Prozess folgt noch mal. Da j abschließend den Wert 4 besitzt, gilt die Bedingung nicht mehr, und der weitere Ablauf wird nun wieder von der äußeren Schleife gesteuert: Erhöhung von i auf 2, Kontrolle der Bedingung, Ausführung der inneren Schleife mit der gleichen Prozedur wie eben beschrieben. Dieser Kreislauf läuft solange ab, bis die Bedingung in der äußeren Schleife nicht mehr erfüllt ist und Flash unmittelbar ans Schleifenende springt. So komplex das auch aussehen mag, die Ausführung erfolgt im Bruchteil einer Sekunde, da die Anweisungen alles andere als rechenintensiv sind. Das können wir kontrollieren, indem wir die abgelaufene Zeit messen.

 trace(getTimer() + „ Millisekunden nach Schleifenaufruf“);

Ausgabe im Nachrichtenfenster: 10 Millisekunden vor Schleifenaufruf //Ausgabe von i und j 10 Millisekunden nach Schleifenaufruf Falls Sie nicht gerade über einen jener museumsreifen, noch dampfbetriebenen Computer verfügen, erhalten Sie eine recht niedrige Zahl, die in beiden Fällen identisch ist. Sie entspricht der Anzahl der Millisekunden, die seit erstmaligem Aufruf des Flash-Players vergangen sind. Die Schleifenausführung dauerte noch nicht einmal eine Millisekunde. Da wir viel mit visuell wahrnehmbaren Objekten arbeiten werden, bilden Schleifen ein nützliches Hilfsmittel, um dynamisch solche Objekte einzublenden und zu benennen. Nehmen wir an, auf der Bühne befinden sich fünf Instanzen kreis1 bis kreis5 an beliebiger Stelle, die wir nebeneinander in einem Abstand von 60 Pixeln anordnen wollen. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf der Ebene objects an beliebiger Stelle einen Kreis (50 × 50). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis0, Registrierungspunkt links oben). 4. Duplizieren Sie die Instanz viermal und weisen jeweils folgende Instanznamen zu: kreis1 bis kreis4. 5. Weisen Sie actions folgendes Bildskript zu: kreis0._x = 0;

kreis0._y = 100; kreis1._x = 60;

kreis1._y = 100; kreis2._x = 120; kreis2._y = 100; kreis3._x = 180; kreis3._y = 100;

11.2  Schleifen

kreis4._x = 240; kreis4._y = 100;

6. Nachdem Sie das Ergebnis bewundert haben, duplizieren Sie die Kreisinstanz weitere 10-mal, erweitern dementsprechend das Bildskript und ärgern sich über den enormen Mehraufwand, der sich selbstverständlich mit Hilfe einer Schleife, wie sie im nächsten Schritt definiert wird, einsparen lässt. 7. Ersetzen Sie den vollständigen Code durch: var nAnzahl:Number = 5;

var nAbstand:Number = 60;

 for (var i:Number = 0; i
 this[„kreis“+i]._x = i*nAbstand;  this[„kreis“+i]._y = 100; }

Wie auf einer Schnur aufgereiht liegen Ihre fünf Kreise nebeneinander auf der Bühne. Wir initialisieren zunächst eine Variable für die Gesamtzahl der Kreise sowie für einen gleichmäßigen Abstand. Anschließend rufen wir eine Schleife auf, deren Anzahl an Durchläufen der Variablen nAnzahl entspricht. Lassen Sie sich nicht von der Bedingung i < nAnzahl anstatt von i <= nAnzahl irritieren. Denn da i mit 0 statt 1 beginnt, erhalten wir genauso viele Durchläufe als wenn unsere Schleife lauten würde: for (var i:Number = 1; i <= nAnzahl; i++) {

Innerhalb der Schleife setzen wir die benötigten In­ stanznamen dynamisch zusammen. Wir wissen, dass sie alle den String „kreis“ zuzüglich einer Zahl von 0 bis 4 enthalten. Daraus machen wir unter Zuhilfenahme der Zählvariablen i den Ausdruck „kreis“+i. Damit Flash darin einen Instanznamen erkennt, müssen wir den Bezug zu einer Zeitleiste herstellen, der hier mit Hilfe des Bezeichners this und den nachgestellten Klammern [] erfolgt. Wenn i beim erstmaligen Schleifendurchlauf 0 beträgt, lautet die Anweisung in der 4. Zeile im Klartext: this[„kreis“+0]._x = 0*60;

bzw.: this[„kreis0“]._x = 0*60;

was wiederum ergibt:

107

kreis0._x = 0;

Da 0 mit 60 multipliziert magere 0 ergibt, ist diese Zeile identisch mit der ersten Zeile aus Schritt 5. Sie setzt die Instanz kreis0 auf die x-Position 0, während die darauf folgende Zeile als y-Position 100 zuweist. Anschließend inkrementiert Flash i, so dass die Anweisung in der 4. Zeile konkret lautet: this[„kreis“+1]._x = 1*60;

Jetzt wird die nächste Instanz angesprochen und positioniert. Das geschieht solange, bis alle Instanzen auf der gewünschten Position liegen. Sie merken schon: Die Schleife nimmt uns die gesamte mühsame Handarbeit ab, die Sie in Schritt 6 leisten mussten (seien Sie froh, dass die Anweisung nicht lautete, 100-mal zu duplizieren!). Änderungen erweisen sich als ausgesprochen einfach. Wollen Sie beispielsweise 20 Objekte so positionieren, müssen Sie lediglich den Wert von nAnzahl dementsprechend anpassen, alles andere erfolgt automatisch. Im Kapitel über die MovieClip-Klasse werden Sie darüber hinaus erfahren, wie Sie per ActionScript Instanzen duplizieren bzw. MovieClips einfügen, so dass sogar das händische Kopieren vollständig entfällt. Unser Skript lässt sich etwas vereinfachen für den Fall, dass wir noch mehr Anweisungen pro Instanz ausführen wollen. 8. Fügen Sie vor der ersten Variablendeklaration folgende Zeile ein: var mKreis:MovieClip;

9. Ändern Sie den kompletten Anweisungsblock innerhalb der Schleife wie folgt:  for (var i:Number = 0; i
Wir legen zunächst eine Variable mit dem Datentyp MovieClip an. Innerhalb der Schleife weisen wir ihr die jeweils ermittelte Instanz zu und können nun mit Hilfe der Variablen die x-und y-Position unserer Kreise definieren. Der Code gewinnt an Übersichtlichkeit und wird weniger fehleranfällig, da wir bei einer Änderung der Instanznamen nur an einer einzigen Stelle korrigieren müssen, nämlich dort, wo wir mKreis einen konkreten Inhalt zuweisen.

108

11.2.2 break, continue Wir haben bei switch mit dem break-Befehl eine Möglichkeit kennen gelernt, den Programmablauf zu unterbrechen. Das gleiche funktioniert auch bei Schleifen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: for (var i:Number = 1; i<=10; i++) {  if (i == 5) {  break; }

 trace(i); }

Ausgabe im Nachrichtenfenster: 1 2 3 4 Obwohl wir im Schleifenkopf 10 Durchläufe festlegen, bricht die Schleife bereits nach dem vierten Durchlauf ab, da wir per if-Anweisung für den Fall, dass die Zählvariable i den Wert 5 enthält, den break-Befehl ausführen. Wollen wir statt dessen nicht vollständig abbrechen, sondern lediglich einen Durchlauf an dieser Stelle überspringen, verwenden wir die continue-Anweisung. 3. Ändern Sie die Anweisung innerhalb der if-Abfrage (Fettdruck): if (i == 5) { continue; }

Ausgabe im Nachrichtenfenster: 1 2 3 4 6 7 8 9 10

Kapitel 11  Kontrollstrukturen

Auch jetzt erscheint eine Lücke, sobald i den Wert erreicht. Aber anders als zuvor wird nur dieser eine Wert übersprungen und mit dem Wert i = 6 fortgefahren.

11.2.3 while-Schleife Etwas einfacher als die for-Schleife gestaltet sich die while-Schleife, die in allgemeiner Form folgendermaßen aussieht: while(Bedingung){ //Anweisungen }

In beredter Prosa formuliert bedeutet dies, dass Anweisungen solange ausgeführt werden, wie die eingangs definierte Bedingung wahr ist. Als Beispiel wollen wir die erste oben behandelte for-Schleife nachbilden, bei der wir von 1 bis 10 zählen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nZahl:Number = 1; while (nZahl<=10) {  trace(nZahl);  nZahl++; }

Ausgabe im Nachrichtenfenster: 1 2 3 //usw. 10 Anders als bei der for-Schleife können wir am Schleifenbeginn keine Initialisierung vornehmen. Daher initialisieren wir vor Aufruf der Schleife die Zählvariable nZahl mit dem benötigten Startwert, hier die 1. Am Schleifenbeginn kontrolliert Flash, ob die Bedingung noch zutrifft, was unmittelbar nach der Deklaration von nZahl natürlich der Fall ist. Anschließend führt Flash den abhängigen Code-Block aus, was in unserem Beispiel schlicht bedeutet, dass er die Variable im Nachrichtenfenster ausgibt. Die letzte Zeile vor der schließenden Klammer der Schleife ist besonders wichtig, denn sie sorgt dafür, dass nZahl inkrementiert wird, so dass irgendwann der Grenzwert von 10

11.2  Schleifen

erreicht und die Ausführung abgeschlossen werden kann. Nach jedem Inkrementieren wird die Schleifenbedingung kontrolliert und abhängig vom Ergebnis der nächste Durchlauf gestartet oder der gesamte Vorgang beendet. Die meisten Vorgänge können Sie mit einer forSchleife abbilden, so dass Sie getrost weitgehend auf die while-Schleife verzichten können, zumal diese zu Fehlern verleitet. In manchen Fällen jedoch erweist sie sich als unverzichtbar, etwa wenn sie ein Objekt solange auf einer Zufallsposition einblenden wollen, bis es nicht mehr mit anderen bereits vorhandenen Objekten kollidiert. Oder Sie ermitteln eine Zufallszahl aus einem größeren Zahlenbereich, wollen dabei jedoch bestimmte Werte ausschließen. Letzteres ist insbesondere interessant, wenn Sie eine Animation erstellen, bei der eine Variable positive und negative Werte enthalten darf, jedoch keine 0. 3. Fügen Sie folgende Deklaration vor der whileSchleife ein:

109

nZufall vor der Schleife: 0 nZufall in der Schleife: -1 nZufall nach der Schleife: -1 Wenn bei Mausklick eine 0 ermittelt wird, trifft die Schleifenbedingung nZufall == 0 zu. Flash führt die Schleife aus und ermittelt auf exakt die gleiche Weise wie zuvor erneut eine Zufallszahl. Diese wird wieder mit der Schleifenbedingung verglichen. Ist sie ungleich 0, verlässt Flash die Schleife und führt den unmittelbar folgenden Code aus. Falls es sich jedoch erneut um eine 0 handelt, bleibt Flash innerhalb der Schleife und gibt eine neue Zufallszahl aus. Das geschieht solange, bis die Zahl größer oder kleiner 0 ist und die Schleife beendet wird. Da die Ausführung der Anweisung extrem schnell erfolgt, merken wir als Anwender keine Verzögerung, selbst wenn Flash mehrfach hintereinander eine 0 ermittelt. Weitere Informationen erhalten Sie im Kapitel zur Math-Klasse.

this.onMouseDown = function() {

11.2.4 do while-Schleife

 trace(„nZufall vor der Schleife: „+nZufall);

Ein enger Verwandter der while-Schleife ist die do while-Schleife. Sie funktioniert ähnlich, verlagert aber die Bedingung ans Ende bzw. an den Schleifenfuß:

 var nZufall:Number = Math. floor(Math.random()*21)-10;

 while (nZufall == 0) {

 nZufall = Math.floor(Math.random()*11)-5;

 trace(„nZufall in der Schleife: „+nZufall); }

 trace(„nZufall nach der Schleife: „+nZufall); };

Sobald Sie auf die Bühne klicken, gibt Flash Zufallszahlen sowie den zugehörigen Text aus. Wenn die ermittelte Zufallszahl ungleich 0 ist, z. B. eine 4, dann erhalten Sie folgende Meldung im Nachrichtenfenster: nZufall vor der Schleife: 4 nZufall nach der Schleife: 4 Da die in der while-Schleife definierte Bedingung nicht zutrifft, gibt Flash nur das erste und dritte trace() aus, während die vollständige Anweisung in der Schleife ignoriert wird. Anders sieht es dagegen bei einer 0 aus. Dann könnte im Nachrichtenfenster beispielsweise stehen:

do{

//Anweisungen;

}while(Bedingung);

Auch hier wollen wir bis 10 zählen, um den direkten Vergleich mit den anderen Schleifen zu ermöglichen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nZahl:Number = 1; do {

 trace(nZahl);  nZahl++;

} while (nZahl<=10);

Ausgabe im Nachrichtenfenster: 1 2 3 //usw. 10

110

Während die Ausgabe derjenigen der while-Schleife entspricht, unterscheidet sich der Ablauf in einem nicht unwesentlichen Punkt: Durch die Verlagerung der Bedingung ans Ende wird diese Schleife auf jeden Fall mindestens einmal ausgeführt, unabhängig davon, ob die Bedingung zutrifft oder nicht. Da Skripte bekanntermaßen von oben nach unten abgearbeitet werden, trifft Flash zuerst auf die Anweisung nach dem Schlüsselwort do, die direkt ausgeführt wird. Anschließend erfolgt die Kontrolle der Bedingung. Die while-Schleife dagegen enthält die Bedingung unmittelbar vor dem Aufruf der abhängigen Anweisungen, so dass diese tatsächlich nur ausgeführt werden können, wenn die Überprüfung der Bedingung true ergibt. 3. Ändern Sie testweise die Bedingung wie folgt (Fettdruck): } while (nZahl>10);

Ausgabe im Nachrichtenfenster: 1 Formal gesehen weisen wir Flash an, nZahl solange auszugeben, wie ihr Wert größer 10 ist. Diese Bedingung trifft allerdings nie zu, denn wir haben die Variable unmittelbar vor der Schleife mit 1 initialisiert. Trotzdem führt Flash ein einziges Mal die Anweisung innerhalb der Schleife aus. Denn zum Zeitpunkt des Aufrufs dieser Anweisung ist Flash die Bedingung noch nicht bekannt. Skeptische Geister werden sich nun fragen, wozu denn eine derartige Schleife überhaupt gut sein soll. Wir setzen sie immer dann ein, wenn wir möchten, dass eine bestimmte Aktion auf jeden Fall einmal und eventuell mehrfach ausgeführt werden soll. Sie stellt beispielsweise ähnlich der while-Schleife eine Möglichkeit dar, Zufallszahlen zu generieren und dabei sicher zu stellen, dass ein bestimmter Wert nicht erreicht wird. Nehmen wir an, wir wollen eine Zufallszahl ermitteln, die sowohl positiv wie negativ sein kann, aber nicht gleich 0 sein darf, da wir sie für die Bewegung von MovieClips verwenden wollen. 4. Ergänzen Sie den Code um folgende Zeilen: var nZuf:Number;

this.onMouseDown = function() {  do {

 nZuf = Math.round(Math.random()*4)-2;

Kapitel 11  Kontrollstrukturen

} while (nZuf == 0);

 trace(„nZuf: „+nZuf); };

Bei jedem Mausklick gibt Flash eine Zufallszahl aus. Wir definieren zunächst die Variable nZuf, ohne ihr einen Wert zuzuweisen. Anschließend legen wir ein Mausklick-Ereignis fest, das jeweils eine Zufallszahl zwischen  –2 und 2 ermittelt. Die genaue Funktionsweise der Math-Methoden entnehmen Sie bitte dem Kapitel Math-Klasse. Da in dem übergebenen Wertebereich auch die 0 enthalten ist, wir aber genau diese Zahl ausschließen wollen, führen wir die Schleife solange aus, wie für nZuf 0 ermittelt wird. Anschließend geben wir den Zufallswert aus. Nehmen wir an, wir klicken mit der Maus. Dann wird die Anweisung innerhalb der Schleife unabhängig von der konkreten Bedingung einmal ausgeführt und in nZuf eine Zufallszahl gespeichert, z. B. eine 2. Da diese ungleich 0 ist, trifft die Bedingung nicht zu und Flash gibt den entsprechenden Wert direkt aus. Klicken wir wieder, läuft der gesamte Prozess erneut ab. Wenn jetzt beispielsweise eine 0 als Zufallszahl ermittelt wird, dann trifft die im Fuß angegebene Bedingung zu und Flash wird angewiesen, erneut eine Zufallszahl zu wählen. Solange dabei 0 herauskommt, speichert Flash eine neue Zufallszahl in nZuf. Erst wenn diese ungleich 0 ist, kann die Schleife beendet und der Wert ausgegeben werden.

11.2.5 for in-Schleife Eher aus dem Rahmen fällt die letzte der Schleifen, die for in-Schleife. Sie wird eingesetzt, um den Inhalt von Objekten oder Hashes (assoziative Arrays) auszulesen. Sie verwendet keine Zählvariable, sondern einen String, der der auszulesenden Eigenschaft entspricht. Allgemein sieht sie folgendermaßen aus: for (Variable in Objekt){ //Anweisungen; }

Weitere Informationen finden Sie im Kapitel ArrayKlasse.

11.2  Schleifen

111 Abbildung 15:  Fehlermeldung bei Endlosschleife

11.2.6 Endlosschleifen Schleifen bergen prinzipiell das Risiko in sich, nicht abgebrochen werden zu können. Insbesondere wenn die Abbruchbedingung falsch definiert wird oder gar völlig fehlt, liegt eine Endlosschleife vor. Während andere Sprachen wie etwa Lingo, die Skriptsprache von Director, in einem derartigen Fall abstürzten, hört Flash nach einer gewissen Anzahl an Schleifendurchläufen automatisch auf und weist höflich darauf hin, dass ein Skript zu viele Iterationen enthalte. Je nach Gemütsverfassung kann man die Ausführung abbrechen (empfehlenswert) oder fortsetzen. Da Sie zweifelsohne darauf brennen, eine Endlosschleife in Aktion zu erleben, speichern Sie bitte alle noch offenen Dateien, beenden vorsichtshalber alle laufenden Applikationen (mit Ausnahme von Flash natürlich) und machen folgende Übung nicht nach. 1. Erstellen Sie keine Standarddatei. 2. Weisen Sie actions unter keinen Umständen folgendes Bildskript zu: var nZahl:Number = 1; while(nZahl < 10){

 trace(„nZahl: “+ nZahl); }

Sollten Sie alle Ratschläge ignoriert, das Skript wider besseres Wissen geschrieben und entgegen aller Vernunft ausgeführt haben, gehen Sie einen Kaffee trinken und begutachten anschließend die in Abbildung 15 gezeigte Warnung.

Zunächst initialisieren wir nZahl mit dem Wert 1. Anschließend weisen wir Flash an, diese Variable solange auszugeben, wie sie kleiner als 10 ist. Da aber innerhalb der Schleife an keiner Stelle nZahl geändert wird, kann sie nie den Grenzwert erreichen bzw. übersteigen, so dass die Ausführung theoretisch unendlich lange erfolgen müsste. Zum Glück erweist sich Flash als klug genug, nach einer gewissen Zeit die Ausführung zu unterbrechen. So banal das Beispiel erscheinen mag, so wichtig ist es doch, denn gerade eine while- bzw. eine do while-Schleife verleitet dazu, die Abbruchbedingung zu vergessen. Etwas größere Sicherheit bietet zumindest in dieser Hinsicht die for-Schleife, denn dort muss ja direkt am Schleifenbeginn die Abbruchbedingung definiert werden. Vergessen wir sie, erhalten wir unmittelbar beim Kompilieren eine Fehlermeldung, so dass die Schleife erst gar nicht zur Ausführung kommt. Daher empfiehlt es sich zumindest anfangs, möglichst auf while-Schleifen zu verzichten. Meistens kann man an ihrer Stelle bequem mit einer for-Schleife arbeiten. Es gibt, wie wir in den Workshops sehen werden, nur einige wenige Fälle, in denen die while-Schleife unverzichtbar ist. Die einzige wirkliche Fehlerquelle einer forSchleife liegt in einer erfahrungsgemäß sehr selten auftretenden fehlerhaften Festlegung, wie man vom Startwert der Zählvariablen zu ihrem Endewert gelangt. Solange Sie, was in der Mehrzahl der Fall sein wird, mit einem simplen Inkrement arbeiten, stellt das nicht wirklich ein Problem dar.

MovieClip-Klasse

Wie wir gesehen haben, verfolgt Flash einen objektbasierten Ansatz. Das wichtigste Objekt, das visuell in Erscheinung tritt, aber durchaus auch in einer unsichtbaren Variante wertvolle Dienste leisten kann, stellt der MovieClip dar. Sie werden ihn sicher ohne Skripting schon intensiv kennen gelernt haben. Eine noch viel wichtigere Rolle spielt er aber gerade für ActionScript 2. Denn nahezu der komplette visuell wahrnehmbare Content Ihrer Anwendung wird, wenn er per Skripting ansprechbar sein soll, als MovieClip vorliegen. Demgegenüber bieten andere Symbole entweder erheblich weniger Funktionalität (Schaltfläche) oder lassen sich nicht skripten (Grafik). Im Grunde genommen können wir also völlig auf Grafik- und Schaltflächensymbole zugunsten von MovieClips verzichten. Ganz so extrem wollen wir nicht vorgehen, aber Schaltflächen werden im Nachfolgenden und insbesondere in den Workshops bestenfalls eine marginale Rolle spielen, deren Funktionalität übernimmt in den allermeisten Fällen ein MovieClip. Wie das geht, sehen wir im weiteren Verlauf dieses Kapitels. Die enorme Bedeutung des MovieClips unterstreicht zudem die Tatsache, dass kein anderes Objekt über einen derartig reichhaltigen Fundus an Eigenschaften, Methoden und Ereignissen verfügt. Wenn Sie einen Blick in die unter Entwicklern zwar aus prinzipiellen Gründen verpönte (jeder hat seinen Stolz), aber gerade für Anfänger absolut notwendige Hilfe werfen und auf den Eintrag MovieClip klicken, schleudert Ihnen Flash auf einer einzigen Seite eine Aufzählung von sage und schreibe 41 Eigenschaften, 18 Ereignissen und 43 Methoden entgegen! Was zunächst nach verwirrend viel aussieht, wird sich im Laufe der Programmierung tatsächlich als oft notwendig erweisen. Wir werden an dieser Stelle nur die am häufigsten verwendeten Eigenschaften, Ereignisse

12

und Methoden behandeln, greifen aber im Rahmen der Workshops das eine oder andere darüber hinausgehende Thema auf; Exoten bzw. Elemente, die nur in Ausnahmefällen zum Tragen kommen, wollen wir völlig ignorieren.

12.1 Eigenschaften von MovieClips 12.1.1 Adressierung von MovieClips Damit ein Objekt per Skript angesprochen werden kann, benötigt es eine Bezeichnung, einen Namen, und dieser Name muss – anders als im richtigen Leben – eindeutig sowie einmalig sein. Nachdem Sie ein Objekt in einen MovieClip verwandelt haben, sehen Sie in dessen Eigenschaftsfenster die Option , wie auf Abbildung 16 zu sehen.

Abbildung 16:  Eigenschaftsfenster eines MovieClips auf der Bühne

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

113

114

Dort wird der Name eingetragen. Fehlt er, kann das Objekt theoretisch nicht per Skripting angesprochen werden, da wir Flash nicht mitteilen können, auf wen sich unsere Anweisungen beziehen sollen. In Ausnahmefällen ist das trotzdem möglich, wie wir noch unten sehen werden; die dort gezeigte Methode ist vor allem dann sinnvoll und hilfreich, wenn wir beispielsweise nicht konkret wissen, wie die Objekte heißen, die wir verändern wollen. Der Name folgt denselben Konventionen, die wir bereits bei Variablen kennen gelernt haben: Keine Schlüsselwörter, an erster Stelle keine Zahlen, keine Leerzeichen sowie keine Sonderzeichen mit Ausnahme von $ und _. Selbstverständlich verzichten Sie auch auf deutsche Umlaute, obwohl Flash diese mittlerweile klaglos akzeptiert. Wenn Sie also einem MovieClip den Instanznamen bücher zuweisen, können Sie zwar problemlos damit arbeiten, aber Sie gewöhnen sich eine Schreibweise an, die in anderen Skript- und Programmiersprachen nicht funktioniert. Um sich späteren Ärger zu sparen und um sich nicht unnötig Ausnahmen merken zu müssen, wo was akzeptiert wird, verzichten Sie einfach auf solche Umlaute. Ebenfalls zu beachten ist die Groß- und Kleinschreibung. Wir haben Variablen durch ein Präfix gekennzeichnet. Ähnliches lässt sich bei Instanznamen anwenden. So ist es z. B. sinnvoll, einen MovieClip, der als Button fungiert, mit dem Kürzel bt zu kennzeichnen, also z. B. btMenue, btService etc. Enthält er eine Zeitleistenanimation, kann man mit an darauf hinweisen, anAuto oder anFlugzeug wären entsprechende Beispiele. Da jedoch ein MovieClip enorm viele Funktionen übernehmen wird, ist es nicht möglich, alles mit einem Präfix zu charakterisieren. Eine weitere Möglichkeit bestünde in der zusätzlichen oder alternativen Verwendung eines Suffix’, das auf den Datentyp des Objektes, d. h. auf den MovieClip verweist. Dann könnten unsere MovieClip-Buttons die Instanznamen bMenue_mc und bService_mc bzw. menue_mc und service_mc tragen. Das hat während des Skriptens den Vorteil, dass in einem Auswahlfeld alle zur Verfügung stehenden Möglichkeiten angezeigt werden, sobald nach dem Namen ein Punkt folgt. Flash erkennt nämlich aufgrund des nachgestellten _mc, dass ein MovieClip vorliegt. Da es sich aber um eine, wie bereits oben angemerkte, proprietäre Flash-Lösung handelt, wird davon abgeraten

Kapitel 12  MovieClip-Klasse

Über denselben Vorteil verfügt, wer die verwendeten MovieClips in einer Variablen referenziert, deren Datentyp man als MovieClip festgelegt hat. Eine derartige Vorgehensweise besitzt zudem den Vorteil, dass man an einer zentralen Stelle die Variablen einrichtet und schon dort erkennen kann, welche Objekte verwendet werden. Wir wählen in den meisten Workshops diesen Weg. Wir wollen an einem kleinen Beispiel zeigen, wie wir auf den Namen zugreifen können. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects an beliebiger Position einen roten Kreis mit beliebigem Durchmesser. 3. Wandeln Sie den Kreis in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis1, Registrierungspunkt mittig). 4. Weisen Sie der Ebene actions ein Bildskript zu: _root.onMouseDown = function(){  trace(kreis1._name); }

Testen Sie den Film und klicken an eine beliebige Stelle. Flash gibt im Nachrichtenfenster kreis1 aus. Das Skript weist Flash an, bei einem Klick mit der Maus auf eine beliebige Stelle Ihrer Bühne auf die Namenseigenschaft der Instanz von mcKreis zuzugreifen. Da wir im Eigenschaftsfenster dieser Eigenschaft den String kreis1 zugewiesen haben, erscheint die im Nachrichtenfenster angezeigte Information. Die Bezeichnung _root bezieht sich hier auf die Hauptzeitleiste, die ebenfalls einen MovieClip darstellt. Sie verfügt automatisch über einen eigenen Namen, auf den wir keinen Einfluss haben. Um mit MovieClips zu arbeiten, ist es wichtig, auf ihre Namen zugreifen zu können. Das ist einfach, solange sie nicht verschachtelt sind. Wenn Sie auf der Bühne 10 verschiedene Kreise mit den Instanznamen kreis1 bis kreis10 liegen haben, lassen sie sich ansprechen, indem wir eben diese Namen verwenden, z. B. kreis1._x = 100, was die horizontale Position des MovieClips mit dem Instanznamen kreis1 auf 100 setzt. Häufig wird es jedoch so sein, dass ihre MovieClips weitere MovieClips enthalten, wir es also mit einer Verschachtelung wie bei der berühmten russischen Matroschka, der Puppe in der Puppe, zu tun haben. Stellen Sie sich einen MovieClip mit dem Instanznamen auto vor, der über eine Karosserie, drehbare

12.1  Eigenschaften von MovieClips

115

Pfad, wie wir ihn vom Betriebssystem her gewohnt sind, wenn wir auf eine bestimmte Datei zugreifen wollen. Auch dort müssen wir den genauen Ort inklusive Ordner angeben. Da eine korrekte Adressierung, eingedenk Konfuzius, der schon vor Jahrtausenden in weiser Voraussicht gefordert hat: „Stellt die Namen richtig!“, unverzichtbar ist, wollen wir sie uns an dem erwähnten Beispiel der Autoanimation näher anschauen.

Abbildung 17:  Verschachtelter MovieClip auto

Räder, einen qualmenden Auspuff etc. verfügt. Da all diese Elemente untrennbare Bestandteile eines Autos sind, werden sie logischerweise im MovieClip auto zusammengefasst. Wenn wir nun die Räder per Skripting ansprechen wollen, um sie etwa zu stoppen, dann benötigen die betreffenden Objekte einen Instanznamen, z. B. anRadV und anRadH für das Vorder- und das Hinterrad. Wollten wir bei einem beliebigen Mausklick die Radanimationen stoppen, müsste das entsprechende Skript lauten: _root.onMouseDown = function(){  auto.anRadH.stop();  auto.anRadV.stop(); }

Da sich anRadH und anRadV in auto befinden, kann Flash die Radanimationen nur finden, wenn wir genau diesen Ort angeben. Die Angabe auto.anRadH und auto.anRadV gleicht im Grunde genommen einem

5. Löschen Sie dort den Kreis sowie alle bisherigen Skripte. 6. Erstellen Sie einen leeren MovieClip (Bibliotheksname mcAuto). 7. Benennen Sie die bestehende Ebene um in rad. 8. Fügen Sie die Ebene karosserie oberhalb von rad ein. 9. Zeichnen Sie auf rad das Vorderrad. Ihre Grafik muss so gestaltet werden, dass wir optisch in der Lage sind, eine Drehung wahrnehmen zu können. Ein simpler Kreis, so attraktiv er auch sein mag, reicht also nicht aus. 10. Wandeln Sie das Rad in einen MovieClip um (Bibliotheksname mcAnRad, Registrierungspunkt mittig). 11. Zeichnen Sie auf karosserie eine Karosserie (Fahrzeugausrichtung nach rechts). Bedenken Sie, dass das Fahrzeug idealerweise nicht den ganzen Screen ausfüllt, so dass später noch Platz für Buttons bleibt. Ordnen Sie die Grafik so an, dass sich der Koordinatenursprung des MovieClips mcAuto in der Mitte befindet. Damit haben wir alle statischen Elemente erstellt, die wir benötigen. Es fehlt noch die Animation der Räder. 12. Öffnen Sie mcAnRad im Symbolbearbeitungsmodus. 13. Wandeln Sie dort die bestehende Grafik in einen MovieClip um (Bibliotheksname mcRad, Registrierungspunkt mittig). 14. Fügen Sie in mcAnRad in Frame 8 ein Schlüsselbild ein. 15. Weisen Sie Frame 1 ein Bewegungstween zu (Drehen: nach rechts, 1 mal). Achten Sie darauf, dass Frame 8 kein Tween erhält. Es ist nicht nur eine relativ weit verbreitete Unsitte, sondern schlicht falsch, dem letzten Schlüsselbild einer Animation ebenfalls ein Tween zuzuweisen.

116

Kapitel 12  MovieClip-Klasse

Ein auf diese Weise erstelltes Tweening hat den Nachteil, dass erstes und letztes Bild miteinander übereinstimmen. Infolgedessen stockt die Animation, weil eine einzige Position doppelt angezeigt wird.



16. Wandeln Sie alle Zwischenbilder von mcAnRad in Schlüsselbilder um. 17. Entfernen Sie aus allen Bildern das Tweening. 18. Löschen Sie das letzte Schlüsselbild.



Indem wir aus allen getweenten Bildern Schlüsselbilder machen, werden sie unabhängig vom ersten Schlüsselbild. Wir können sie dann nach Belieben verändern, was aber in diesem konkreten Beispiel nicht nötig ist. Da durch die Umwandlung alle Bilder (mit Ausnahme des letzten) ein Tween besitzen, es aber überflüssig geworden ist, löschen wir es. Die von Flash errechnete Drehung bleibt trotzdem erhalten. Nun können wir auch das letzte Bild mit der gleichen Position wie das erste entfernen, ohne das es sich auf die Animation auswirken würde. Hätten wir dagegen direkt nach Schritt 15 das letzte Bild gelöscht, wäre gleichzeitig das Tween zerstört worden. 19. Öffnen Sie mcAuto im Symbolbearbeitungsmodus. 20. Weisen Sie dem bestehenden Vorderrad den Instanznamen anRadV zu. 21. Fügen Sie aus der Bibliothek mcAnRad als Hinterrad ein (Instanznamen anRadH). 22. Kehren Sie zur Hauptzeitleiste zurück. 23. Fügen Sie auf objects an beliebiger Position mcAuto ein (Instanzname auto). 24. Weisen Sie actions folgendes Bildskript zu:

_root.onMouseDown = function(){



}

 auto._x += 5;

Sobald Sie irgendwo auf der Bühne klicken, springt das Auto respektvoll um 5 Pixel zur Seite. Wir weisen der Hauptzeitleiste ein onMouseDown-Ereignis zu, das bei jedem Aufruf zur aktuellen x-Position des Objektes mit dem Instanznamen auto 5 Pixel addiert. Das ist zwar noch nicht besonders aufregend, aber wir sehen, wie wir die Objekte ansprechen: Solange sie direkt auf der Bühne liegen, reicht der simple Instanzname. 25. Wollen wir darüber hinaus die Radanimationen stoppen, muss das onMouseDown-Ereignis wie folgt ergänzt werden (Fettdruck):

_root.onMouseDown = function(){

 auto._x += 5;

auto.anRadH.stop(); auto.anRadV.stop(); }

Der Mausklick weist Flash an, im Objekt auto nach Instanzen namens anRadH und anRadV zu suchen und ihre Animationen zu stoppen. Das funktioniert selbstverständlich mit jedem beliebigen anderen Objekt innerhalb von auto oder anderen MovieClips auf der Bühne auch. Die Verschachtelung darf beliebig tief sein. Die Pfade lassen sich wie eine Art Hierarchie betrachten, wie Abbildung 18 zeigt. Wenn die Aktion nicht von _root, sondern vom MovieClip auto ausgelöst werden soll, kann der Pfad in der jetzigen Version verwendet werden. 26. Ändern Sie das bestehende Skript wie folgt (Fettdruck):

auto.onPress = function(){

 auto._x += 5;

 auto.anRadH.stop();  auto.anRadV.stop();

}

Klicken Sie beim Testen auf das Auto, bleiben wie zuvor die Animationen der Räder stehen. Beachten Sie, dass wir ein onPress anstelle eines onMouseDown verwenden müssen, wenn wir einem von _root verschiedenen Objekt einen Mausklick zuweisen wollen. Der Unterschied zwischen beiden Ereignissen wird weiter unten genauer erläutert. Natürlich können wir den Mausklick auch auf die Räder verlagern. 27. Ersetzen Sie auto.onPress durch:  auto.anRadH.onPress = auto.anRadV. onPress = function(){

Abbildung 18:  Pfadhierarchie

12.1  Eigenschaften von MovieClips

Ein einzelner Klick auf eines der Räder stoppt jetzt alle Radanimationen. Aufgrund der Mehrfachzuweisung verfügt jedes der Räder über die gleiche Funktionalität wie zuvor die Instanz auto. Daher reicht ein Klick auf ein Rad aus. Zu Kapitelbeginn wurde erwähnt, dass _root einen MoviClip darstellt. Insofern befindet sich unser autoMovieClip im _root-MovieClip und müsste mit einem entsprechenden Pfad ansprechbar sein. 28. Testen Sie folgende Schreibweise (Änderungen fett):  _root.auto.anRadH.onPress = _root. auto.anRadV.onPress = function(){ _root.auto._x += 5;

_root.auto.anRadH.stop(); _root.auto.anRadV.stop();

}

Tatsächlich existiert in der Ausführung kein Unterschied, beide verwendeten Schreibweisen sind in diesem Fall miteinander identisch. Sie können also theoretisch nach Belieben die eine oder andere Varianten wählen. Allerdings gilt das nicht generell, denn in einer bestimmten Situation führen die Schreibweisen zu zwei völlig verschiedenen Ergebnissen. Die Angabe _root wird anders interpretiert, wenn Sie modulare Applikationen mit Hilfe der loadMovie()-Methode erstellen. Daher empfiehlt es sich unbedingt, auf die Verwendung von _root zu verzichten, um nicht ungewollt einen fehlerhaften weil von Flash anders verstandenen Pfad zu erhalten. Sollte es unverzichtbar sein, sich auf _root zu beziehen, hilft es, die _ root-Angabe in einer Variablen zu speichern oder die Eigenschaft _lockroot auf true zu setzen. Beide Möglichkeiten werden im Zusammenhang mit der erwähnten loadMovie()-Methode näher erläutert. Ein Pfad wie auto.anRadV stellt eine absolute Angaben dar, da wir uns unabhängig davon, von welcher Stelle aus das zugehörige Skript aufgerufen wird, immer auf auto bzw. _root (s. o.) beziehen, also auf das oberste Objekt innerhalb unserer Hierarchie. Diese Vorgehensweise hat zwar den Vorteil, eher simpel zu sein, birgt aber zugleich den Nachteil, dass jede Änderung der Objekthierarchie eine entsprechende Korrektur im Code erfordert. Als Alternative bietet Flash eine relative Adressierung, die als Ausgangspunkt diejenige Stelle wählt, von der aus das Skript ausgeführt wird. Wenn wir bei-

117

spielsweise auto.anRadH ein onPress zuweisen, gilt dieser MovieClip als Ausgangsort. Wollen wir dessen eigene Animation stoppen, können wir anstelle des vorherigen Pfadbandwurms mit dem erheblich kürzeren Schlüsselwort this arbeiten. 29. Ändern Sie das Skript wie folgt:  auto.anRadH.onPress = auto.anRadV. onPress = function(){  this.stop();

}

Ein Klick auf das Vorderrad oder das Hinterrad stoppt die betreffende Animation. Der Methode stop() müssen wir nicht mehr wie zuvor eine Instanz im Klarnamen zuordnen, sondern Flash ermittelt das gemeinte Objekt über das Schlüsselwort this. Wenn wir auf auto.anRadH klicken, steckt in this der Instanzname des Hinterrads, klicken wir dagegen auf auto.anRadV, verweist this auf das Vorderrad. Das können wir noch etwas genauer testen. 30. Schreiben Sie nach der Stop-Methode innerhalb der geschweiften Klammern:  trace(„Angeklicktes Objekt: “+this._ name);

Bei einem Mausklick öffnet sich das Nachrichtenfenster, in dem der Name des angetroffenen Movie­ Clips ausgegeben wird. Wie Sie sehen, ermittelt Flash automatisch jeweils den richtigen Namen, ohne das wir ihn explizit eintragen müssen. Diese Variante besitzt erheblich mehr Flexibilität als die vorhergehende, denn wenn wir den Pfad oder den Instanznamen ändern, wird this in jedem Fall das korrekte Objekt finden. Würden wir mit einem absoluten Pfad arbeiten, wäre es notwendig, nicht nur die Angabe beim onPress-Ereignis zu korrigieren, sondern auch die stop()-Methode ausdrücklich dem neuen Objekt zuzuweisen. Mit this lässt sich übrigens auch der Pfad ablesen, wobei Flash immer einen absoluten Pfad zurückgibt. 31. Fügen Sie nach dem bestehenden ein weiteres trace ein:  trace(„Pfad angeklicktes Objekt: “+this);

Als neue Ausgabe erscheint _level0.auto.anRadH bzw. _level0.auto.anRadV. Dies entspricht dem gesamten Pfad von der Hauptzeitleiste bis zum ange-

118

Kapitel 12  MovieClip-Klasse

klickten Objekt. Lassen Sie sich nicht von _level0 verwirren, an dessen Stelle Sie wahrscheinlich ein _ root erwartet haben. Für Flash sind in diesem Fall beide Bezeichnungen identisch, aber in der Ausgabe wird nur _level0 verwendet. Wie bereits erwähnt, verhält es sich anders, wenn wir mit der loadMovie()Methode arbeiten. Wir haben oben eine Version kennen gelernt, bei der ein Klick auf das Auto die Radanimationen stoppt. Dasselbe geht natürlich auch, wenn wir den absoluten Pfad durch einen relativen ersetzen. 32. Löschen Sie das aktuelle Skript und schreiben Sie folgendes:

auto.onPress = function(){

 this.anRadH.stop();  this.anRadV.stop();

}

Da sich anRadH und anRadV in auto befinden, genügt es, bei Klick auf das Auto über this das aktivierte Objekt zu ermitteln. Wir erhalten automatisch auto und daran angehängt anRadH, was auto.anRadH ergibt. Jedes benannte Objekt, das sich in einem MovieClip befindet, lässt sich über this.InstanznameDesObjektes ansprechen, vorausgesetzt, das ausführende Skript ist dem Objekt zugewiesen, auf das this verweist. Wie der absolute lässt der relative Pfad eine beliebige Verschachtelung zu. Beachten Sie, dass this in jedem Fall an erster Stelle angeführt wird. Ein Pfad wie auto.this.beliebigerInstanzname wäre also unsinnig, weil Sie mit auto bereits einen absoluten Pfad angegeben haben und so eine relative Adressierung überflüssig machen. In einem derartigen Fall erhalten Sie eine Fehlermeldung. Eine Animation wie etwa diejenige der Räder muss nicht notwendigerweise über Klick auf das Auto oder eines seiner Bestandteile gesteuert werden. Statt dessen könnte man eigene Buttons (in Form von MovieClips) verwenden. 33. Fügen Sie in der Hauptzeitleiste eine neue Ebene namens steuerung ein. 34. Erstellen Sie in dieser Ebene an beliebiger Stelle einen MovieClip (Bibliotheksname btnStart, Instanzname btStart, Registrierungspunkt links oben) mit der Beschriftung „Start“ (statisches Textfeld).

35. Erstellen Sie in derselben Ebene neben diesem MovieClip einen weiteren MovieClip (Bibliotheksname btnStop, Instanzname btStop, Registrierungspunkt links oben) mit der Beschriftung „Stop“ (statisches Textfeld). 36. Markieren Sie die beiden neu erstellten Movie­ Clips sowie das Auto auf der Hauptzeitleiste und wandeln sie in einen gemeinsamen MovieClip (Bibliotheksname mcFahrzeug, Instanzname fahrzeug, Registrierungspunkt unten mittig) um. Wir verfahren hier wie beim Auto: Was von der Logik her zusammen gehört, packen wir in einen eigenen Behälter. Da unsere Steuerung sich nur auf das Auto bezieht, stecken wir sie zusammen mit ihm in einen übergeordneten MovieClip. Alternativ hätte man auch einen vom Auto unabhängigen MC einrichten können, der nur die Steuerung aufnimmt. 37. Schreiben Sie nach dem bisherigen Skript folgenden Code:

fahrzeug.btStop.onPress = function(){

 fahrzeug.auto.anRadH.stop();  fahrzeug.auto.anRadV.stop();

}

Die Radanimation lässt sich nun über einen Button steuern. Momentan verwenden wir eine absolute Adressierung, ausgehend von der auf _root befindlichen Instanz fahrzeug, in der sich sowohl die Buttons wie auch das Auto befinden. 38. Ändern Sie das gerade eingefügte Skript wie folgt (Fettdruck):

fahrzeug.btStop.onPress = function(){

this._parent.auto.anRadH.stop(); this._parent.auto.anRadV.stop();

}

Gegenüber vorher erkennen wir beim Testen keinen Unterschied. Auch hier verwenden wir eine relative Adressierung, bewegen uns aber in der Objekthierarchie nicht direkt nach unten, sondern zuerst nach oben. Ein Mausklick weist Flash an, zu dem unserem Stopp-Button übergeordneten Element, also seinem _parent zu gehen, und von dort aus auf den in auto befindlichen MovieClip anRadH bzw. anRadV zuzugreifen. Der Vorteil dieser Schreibweise besteht darin, dass das Skript in jedem Fall funktioniert, solange sich

12.1  Eigenschaften von MovieClips

Abbildung 19:  Relative Adressierung mit _parent

innerhalb der Objekthierarchie der Bezug zwischen dem Stop-Button und den Rädern nicht ändert. Dabei ist es völlig unerheblich, welchen Namen der Behälter trägt, in den diese Elemente eingebettet sind. Würden wir den Instanznamen von fahrzeug in fahrzeug1 ändern, weil beispielsweise mehrere Fahrzeug-Movie­ Clips verwendet werden, würde die stop()-Anweisungen trotzdem funktionieren, vorausgesetzt, das onPress-Ereignis würde dementsprechend fahrzeug1 zugewiesen. Anders sähe das bei einer absoluten Adressierung aus, denn dann müssten wir den Pfad, ausgehend von _root, explizit angeben. Eine Namensänderung von fahrzeug müsste dann auch in den stop()-Anweisungen berücksichtigt werden. Warum können wir vom Stop-Button aus nicht direkt via auto.anRadH.stop() bzw. auto.anRadV.stop() auf auto zugreifen, immerhin befinden sich beide ja innerhalb von fahrzeug? In dem Fall würde Flash unsere Angabe als absoluten Pfad lesen und direkt auf _root nach einer Instanz namens auto suchen. Da sie dort nicht (mehr) existiert, geschieht nichts. Eine falsche Pfadangabe ist eine zumindest anfangs ausgesprochen häufig anzutreffende Fehlerquelle, auf die Flash leider nicht wie man es in anderen Programmiersprachen gewohnt ist, mit einer entsprechenden Meldung reagiert.

119

nen nur ausgelesen, die meisten auch gesetzt werden. Viele beziehen sich auf die visuelle Erscheinung und sind vom Namen her selbsterklärend wie beispielsweise _width (Breite), _height (Höhe), _alpha (Deckkraft) etc. Leider ist, historisch bedingt, die Schreibweise der Eigenschaften bei MovieClips inkonsistent: Die in älteren Flash-Versionen eingeführten wie _height etc. werden mit einem vorangestellten Unterstrich, neuere wie cacheAsBitmap oder filters dagegen ohne Unterstrich geschrieben. Das Auslesen und Setzen von Eigenschaften gehört zu den zentralen Aktionen jeder Applikation, da sie die visuelle Erscheinung von Objekten definieren und ihre interaktive Änderung erlauben. Eine wichtige Rolle spielen dabei die erwähnten Ausmaße, aber auch Position und aktueller Frame eines MovieClips. Bevor wir uns damit näher befassen, ist ein Blick auf das Koordinatensystem von Flash notwendig. Wie weiß Flash, an welcher Stelle ein Objekt darzustellen ist? Allgemein ermöglicht es ein Koordinatensystem, einem Objekt in einem Raum eine genau definierte Position zuzuweisen. Ein zweidimensionales Koordinatensystem benötigt dazu zwei, ein dreidimensionales drei Angaben. Als absoluter Bezugspunkt wird ein sogenannter Koordinatenursprung definiert, in dem die erwähnten Angaben den Wert 0 besitzen. Flash verwendet ein kartesisches Koordinatensystem. Generell liegt in einem derartigen Koordinatensystem der Koordinatenursprung in der Mitte mit nach rechts aufsteigenden und nach links absteigenden

12.1.2 _x, _y, _xmouse, _ymouse, _width, _height Ist der korrekte Pfad zu einem MovieClip bekannt, sind wir in der Lage, beispielsweise auf dessen Eigenschaften zuzugreifen. Manche Eigenschaften kön-

Abbildung 20:  Kartesisches Koordinatensystem

120

Abbildung  21:  Kartesisches Koordinatensystem in Flash (Hauptzeitleiste)

Werten auf der x-Achse sowie nach oben aufsteigenden und nach unten absteigenden Werten auf der yAchse. Die x-Achse definiert dabei die horizontale, die y-Achse die vertikale Position. In Flash befindet sich der Koordinatenursprung, wenn wir uns auf die Hauptzeitleiste beziehen, in der linken oberen Ecke. Von diesem Punkt ausgehend steigt der x-Wert, wenn wir uns nach rechts bewegen, und er wird negativ, wenn wir uns nach links bewegen. Der y-Wert steigt im positiven Bereich bei einer Bewegung nach unten, nach oben sinkt er unter 0. Abbildung 21 verdeutlicht das Kartesische Koordinatensystem in Flash. Wird ein Objekt auf der Hauptzeitleiste auf einen negativen Wert gesetzt, liegt es außerhalb der Bühne und ist i. d. R. nicht mehr sichtbar. Maßgeblich für die Positionierung innerhalb dieses Koordinatensystems ist der Registrierungspunkt eines Objektes. Davon weicht das Koordinatensystem eines beliebigen MovieClips und einer Schaltfläche insofern ab, als dessen Ursprung in der Mitte liegt. Das können Sie leicht testen, indem Sie per <Strg> einen leeren MovieClip erstellen. Dann öffnet Flash den Symbolbearbeitungsmodus und zeigt den Koordinatenursprung genau in der Screenmitte an. Wenn Sie dort ein Objekt zeichnen, es markieren und per Eigenschaftsfenster auf 0,0 positionieren, erhalten Sie ein Koordinatensystem, das demjenigen der Hauptzeitleiste gleicht, da nun der komplette sichtbare Inhalt auf positiven x- und y-Werten liegt. Ein derartiger

Kapitel 12  MovieClip-Klasse

MovieClip verfügt dann über einen links oben angeordneten Registrierungspunkt. Diese Vorgehensweise ist generell üblicher als ein mittig angeordneter Registrierungspunkt. Die Hauptzeitleiste stellt also eine Art globales Koordinatensystem dar, während jedes andere Objekt mit einer eigenen Zeitleiste dementsprechend über ein eigenes lokales Koordinatensystem verfügt. Zum Glück kann man bei Symbolen im Gegensatz zur Hauptzeitleiste den Registrierungspunkt, der identisch ist mit dem Koordinatenursprung, setzen. Diejenige Eigenschaft, für die das Koordinatensystem die größte Bedeutung besitzt, ist natürlich die Position, ausgedrückt als MovieClip._x (horizontaler Abstand zum Koordinatenursprung) und MovieClip._y (vertikaler Abstand zum Koordinatenursprung). Die Abstände werden jeweils in Pixeln gemessen, wobei nicht nur Ganzzahlen, sondern auch Fließkommawerte gültig sind. Allerdings sollte man, wo immer möglich, mit Ganzzahlen arbeiten, was nicht nur das Erstellen eines sauberen Layouts erleichtert, sondern auch gelegentliche Darstellungsfehler verhindert. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen roten Kreis (50 × 50, Linienstärke 1) an beliebiger Position. 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). Sollte sich der Registrierungspunkt aus welchem Grund auch immer nicht an der gewünschten Stelle, nämlich exakt in der Mitte, befinden, so lässt er sich nachträglich sehr leicht korrigieren. Dazu müssen Sie den MovieClip lediglich im Symbolbearbeitungsmodus öffnen, die zu positionierenden Elemente markieren und im Eigenschaftsfenster unter x sowie y jeweils minus halbe Breite und halbe Höhe eintragen. Wird ein Objekt im Symbolbearbeitungsmodus um seine halbe Breite nach links und um seine halbe Höhe nach oben verschoben, liegt der Registrierungspunkt automatisch exakt in der Mitte. 4. Weisen Sie der Ebene actions folgendes Bildskript zu:  trace(„x-Position: “ + kreis._x + “; y-Position : “ + kreis._y);

Im Nachrichtenfenster werden die genannten Eigenschaften angezeigt. Flash liest die x- und y-Position

12.1  Eigenschaften von MovieClips

aus und zeigt die betreffenden Pixelwerte an. Spannender ist das Ganze, wenn wir die Pixelwerte setzen, denn dann können wir unabhängig davon, wo sich das Objekt bei Start der Anwendung befand, zu jedem beliebigen Zeitpunkt eine Positionsänderung vornehmen. 5. Fügen Sie nach dem trace()-Befehl folgende Zeile ein: kreis._x = 0; kreis._y = 0;

Beim Testen befindet sich der Kreis nicht mehr an der händisch während des Erstellens zugewiesenen Position, sondern er klebt in der linken oberen Ecke und ragt nur noch zu einem Viertel sichtbar in die Bühne hinein. Da sein Registrierungspunkt in der Mitte liegt, befinden sich seine linke und seine obere Hälfte, betrachtet vom Koordinatensystem der Hauptzeitleiste, im negativen Bereich und damit außerhalb der Bühne. Wollten wir ihn ganz sichtbar in derselben Ecke positionieren, müssten wir eine kleine Berechnung durchführen. 6. Ändern Sie die Positionszuweisungen:

121

der Durchmesser des Kreises 50 beträgt). Nicht immer ist ein derartiges Verhalten erwünscht. Gerade bei Animationen möchte man eine Positionsänderung ausgehend von der aktuellen Position vornehmen. Das geschieht mit Hilfe einer relativen Wertezuweisung. 7. Schreiben Sie nach den bestehenden Wertezuweisungen: kreis._x += 200;

Der Kreis behält seine y-Position bei, wird aber horizontal um 200 Pixel nach rechts verschoben. Wohlgemerkt: Anders als zuvor wird er nicht auf den Pixelwert gesetzt, der nach dem Zuweisungszeichen genannt wird, sondern zu seiner aktuellen Position wird dieser Wert addiert, so dass er im Ergebnis auf 225,25 gesetzt wird. 8. Schreiben Sie nach der letzten Wertezuweisung: trace(„x-Position: “ + kreis._x);

Im Nachrichtenfenster erscheint der o. g. Wert von 225. Wenn wir die relative Zuweisung ein weiteres Mal ausführen, ergibt sich als neue x-Position 425.

kreis._x = kreis._width/2;

kreis._y = kreis._height/2;

9. Kopieren Sie die in Schritt 7 und 8 geschriebenen Zeilen und fügen sie nach der letzten trace()Anweisung erneut ein.

Jetzt ist er in der linken oberen Ecke vollständig sichtbar. Wie wir gesehen haben, wird er aufgrund des mittig angeordneten Registrierungspunktes horizontal und vertikal jeweils halb außerhalb der Bühne angezeigt, wenn wir ihm die Position 0,0 zuweisen. Um ihn ganz sehen zu können, müssen wir ihn also um die nicht sichtbare Hälfte nach rechts und nach unten verschieben. Diese Hälfte ist, in beredter Prosa formuliert, nichts anderes als die halbe Breite und die halbe Höhe. Wir erhalten Sie einfach, indem wir die vorhandenen MovieClip-Eigenschaften _width und _height durch 2 dividieren. Derartige Berechnungen werden sich im Verlaufe vieler Workshops als wichtig erweisen, da sie es ermöglichen, dynamisch die korrekten Positionen zuzuweisen, ohne mit fest vorgegebenen Zahlenwerten arbeiten zu müssen. In diesen Fällen handelt es sich um absolute Wertezuweisungen, d. h., unabhängig von dem vorher gültigen Wert wird ein neuer Wert eingesetzt. Egal, ob sich kreis vorher auf der Position 0,75 auf 221,333 oder auf irgend einem anderen beliebigen Wertepaar befand, nachher sitzt er auf jeden Fall auf 25,25 (falls

Die beiden letzten Ausgaben im Nachrichtenfenster lauten nun 225 und 425, wodurch wir im Grunde genommen eine sehr einfache Animation programmiert haben. Vielleicht erscheint es Ihnen merkwürdig, dass wir trotz mehrfacher Änderung der x-Position den Kreis nur an einer einzigen Stelle, nämlich an der durch die letzte Zuweisung definierten Position sehen können. Der Grund liegt in der schnellen Abarbeitung unserer doch sehr wenigen Codezeilen. Diese werden im Bruchteil einer Sekunde ausgeführt, anschließend zeichnet der Flash-Player den Frame und als Ergebnis bekommen wir den letzten Zustand zu sehen. Selbst wenn wir Flash mit einem updateAfterEvent() nach jeder Positionsänderung dazu zwingen würden, direkt den Screen neu zu zeichnen, wären wir nicht in der Lage, die einzelnen Positionsänderungen wahrzunehmen. Wie gezeigt, verwendet Flash für die Positionierung das Koordinatensystem derjenigen Zeitleiste, in der sich das betreffende Objekt befindet. Solange unsere Objekte nicht verschachtelt sind, stellt das kein Problem dar. Oft werden wir jedoch MovieClips

122

Kapitel 12  MovieClip-Klasse

einsetzen, die ihrerseits MovieClips beinhalten und u. U. sehr tief verschachtelt sind. Nehmen wir das Beispiel des MovieClips auto, der seinerseits animierte Movie­Clips enthält. Deren Position wird nicht über die Hauptzeitleiste, sondern über diejenige von auto definiert. Denn sie befinden sich nicht direkt in der Hauptzeitleiste, sondern in auto. 10. Öffnen Sie die Datei mit dem MovieClip auto. 11. Ersetzen Sie das bestehende Bildskript der Ebene actions durch:

auto._x = auto._y = 100;

 trace(„Horizontale Position auto: ” + auto._x);  trace(„Horizontale Position anRadH: “ + auto.anRadH._x) ;

Im Nachrichtenfenster gibt Flash die x-Position des Autos erwartungsgemäß mit 100 an, die x-Position des animierten Hinterrades dagegen hat einen negativen Wert. Würde sich der letztgenannte Wert auf die Hauptzeitleiste beziehen, wäre das entsprechende Objekt gar nicht mehr sichtbar, denn es läge links außerhalb der Bühne. Da sich anRadH in auto befindet, wird dessen Koordinatensystem herangezogen. Die Radanimation liegt dort links vom Koordinatenursprung, was eine negative Zahl ergibt. Manchmal besteht die Notwendigkeit, Werte aus einem Koordinatensystem in ein anderes umzurechnen. So könnte es z. B. wichtig sein, welchen Koordinaten auf der Hauptzeitleiste die Position von anRadH in auto entspricht. Dazu stellt Flash zwei Methoden (localToGlobal() und globalToLocal()) zur Verfügung, die wir unten im Block zu den MovieClipMethoden vorstellen. Auswirkungen haben die verschiedenen Koordinatensysteme auch auf die Mausposition, je nachdem, ob das globale oder ein lokales System verwendet wird. 12. Ergänzen Sie das Skript um:

auto.onPress = function(){

 trace(„lokale Koordinaten: „ + this._xmouse + „, „ + this._ ymouse);  trace(„globale Koordinaten: „ + _xmouse + „, „ + _ymouse);

}

Sie erhalten im Nachrichtenfenster zwei verschiedene Wertepaare. Das erste, kleinere Paar misst die

Mausposition in Bezug auf das Koordinatensystem des MovieClips auto und wird in keinem Fall größer sein als die halbe Breite bzw. halbe Höhe des MovieClips, da der Registrierungspunkt mittig angeordnet ist. Das zweite Paar wird um den Wert 100 schwanken und geht von der Hauptzeitleiste aus, in der wir auto auf x = 100 positioniert haben. Die Eigenschaften _xmouse und _ymouse gehören also zu den MovieClip-Eigenschaften und nicht zu denjenigen der Maus, wie man vielleicht vermuten könnte. Sie geben die horizontale und vertikale Position der Spitze des Cursor in Bezug auf die angegebene Zeitleiste wieder. Natürlich lassen sich, falls erforderlich, diese Werte wie die Positionsangaben von Movie­ Clips in Werte anderer Zeitleisten umrechnen (s. Abschnitt Ausdehnung und Koordinaten). Die Eigenschaften _width und _height haben wir bereits kennen gelernt. Sie definieren die Breite und Höhe eines MovieClips in Pixeln. Wenn wir sie explizit setzen, wird der betreffende MovieClip mehr oder minder skaliert. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects ein Quadrat (50 × 50, Linienstärke 0, Farbe beliebig, Position beliebig). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcQuadrat, Instanzname quadrat, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:  trace(„Breite: “ + quadrat._width + „; Höhe: “ + quadrat._height);

Ausgabe im Nachrichtenfenster: Breite: 50, Höhe: 50 Flash greift auf die betreffenden Eigenschaften zu und gibt sie uns so aus, wie wir sie im Eigenschaftsfenster eingestellt haben. Das ist jedoch nicht immer so, denn Flash hält eine kleine Überraschung bereit, wenn man mit einem Rahmen arbeitet. 5. Weisen Sie mcQuadrat im Symbolbearbeitungsmodus eine schwarze Linie der Stärke 1 zu. 6. Markieren Sie das komplette Objekt und vergewissern Sie sich im Eigenschaftsfenster, dass dort als Höhe und Breite jeweils 50 angezeigt wird. 7. Kehren Sie zur Hauptzeitleiste zurück und testen Ihre Anwendung. Ausgabe im Nachrichtenfenster: Breite: 51, Höhe: 51

12.1  Eigenschaften von MovieClips

Als Ausgabe würden wir 50 erwarten, der Wert, den wir bei der Erstellung des Quadrats zugewiesen haben. Tatsächlich gibt das Nachrichtenfenster Breite und Höhe mit jeweils 51 an. Das liegt an der Linienstärke, die wir anfangs auf 1 Pixel gesetzt haben. Horizontal und vertikal erhöhen sich automatisch die Dimensionen eines Objektes jeweils um die Linienstärke, was sehr verwirrend sein kann. Wenn Sie diesen Effekt vermeiden wollen, verwenden Sie entweder eine Haarlinie (bzw. Linienstärke 0.25) oder setzen explizit Breite und Höhe per Skripting auf den gewünschten Wert. Eine derartige Eigenschaftsänderung erfolgt analog zu derjenigen der x- und y-Position, d. h. durch eine simple Zuweisung. 8. Fügen Sie nach dem bisherigen Code ein:  quadrat._width = quadrat._height = 50;  trace(„Breite: “ + quadrat._width + „; Höhe: “ + quadrat._height);

Jetzt betragen Breite und Höhe unabhängig von der Linienstärke exakt 50 Pixel. 9. Fügen Sie nach dem bisherigen Code ein: quadrat._width = 200;

Das Quadrat wird von seinem Registrierungspunkt aus horizontal gestreckt, während wir vertikal keine Änderung vornehmen. Optisch entspricht das einem Skalieren, wie Sie an der nun dicker dargestellten Linie des Objekts erkennen können. Mitunter ist dieser Effekt unerwünscht. 10. Um das Skalieren der Linie zu unterbinden, öffnen Sie den betreffenden MovieClip im Symbolbearbeitungsmodus und wählen unter der Option

123

Skalieren Ohne. Alternativ dazu können Sie auch eine Haarlinie als Linientyp auswählen. Allerdings verringert sich dann die Linienstärke auch im nicht skalierten Objekt. Genau so wie die Position lassen sich Höhe und Breite nicht nur auslesen, sondern auch setzen. Lediglich die Mausposition kann nur ausgelesen werden, was Sinn macht, denn die Maus wird ja bekanntlich vom Anwender gesteuert und sollte sich daher auch genau dort befinden, wo er sie hin bewegt.

12.1.3 _xscale, _yscale Wollen Sie skalieren, müssen Sie nicht unbedingt wie zuvor auf _width bzw. _height zugreifen, denn Flash stellt zu diesem Zweck jeweils eine eigene Eigenschaft zur Verfügung, nämlich _xscale und _yscale. Beide Eigenschaften arbeiten mit Prozent­ angaben. Weist man 100 Prozent (nur als Zahl, ohne Maßangabe) zu, erhält man die Originalgröße, höhere Werte vergrößern, niedrigere Werte verkleinern das Objekt. Ein Wert von 200 entspricht also der doppelten Größe, bei 50 liegt eine Halbierung vor. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects ein Quadrat (50 × 50, Linienstärke Haarlinie, Farbe beliebig, Position beliebig, Option Skalieren: Kein). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcQuadrat, Instanzname quadrat, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:  trace(„Breite quadrat vorher: “ + quadrat._width); quadrat._xscale = 400;

 trace(„Breite quadrat nach “ + quadrat._width);

Abbildung 22:  Skalieren eines MovieClips

Im Nachrichtenfenster erhalten wir die Angaben 51 für die Breite vor und 204 für die Breite nach der Skalierung. Da Sie in einem der vorhergehenden Schritte die Skalierungseigenschaft auf Kein gestellt haben, bleibt die Linienstärke beim duplizierten und skalierten Quadrat mit derjenigen des nicht skalierten Quadrats identisch. Denselben Effekt können wir mit einer relativen Zuweisung erzielen.

124

Kapitel 12  MovieClip-Klasse

5. Ersetzen Sie die Zuweisung der Eigenschaft _ xscale durch: quadrat._xscale *= 4;

Optisch ergibt sich beim Testen kein Unterschied. Wir nehmen die aktuelle Skalierung in horizontaler Richtung und multiplizieren sie mit 4, d. h. wir vergrößern das Objekt in x-Richtung auf das Vierfache. Ob Sie mit der Zuweisung von 400 oder der Multiplikation mit 4 arbeiten, macht prinzipiell Fall keinen Unterschied. Leider fehlt in AS 2.0 die Möglichkeit, in x- und yRichtung über eine einzelne Eigenschaft eine identische Skalierung zu erreichen. Statt dessen müssen Sie mit den getrennten Eigenschaften für eine vertikale und eine horizontale Skalierung arbeiten. 6. Schreiben Sie am Beginn des Codes: var nScale:Number = 4;

7. Ersetzen Sie die Zuweisung für _xscale durch: quadrat._xscale *= nScale; quadrat._yscale *= nScale;

Ihr Quadrat hat sich jetzt auf das Vierfache seiner Größe aufgeblasen. Um die Zuweisung desselben Wertes zu vereinfachen, richten wir zunächst eine Variable ein, in der wir die gewünschte Zahl speichern. Anschließend weisen wir sowohl der _xscale- wie der _yscale-Eigenschaft diese Variable zu. Diese zweizeilige Zuweisung lässt sich vereinfachen. 8. Ersetzen Sie die im vorhergehenden Schritt geschriebenen Anweisungen durch:  quadrat._xscale = quadrat._yscale *= nScale;



}

 quadrat.onRelease = quadrat.onReleaseOutside = function(){

this._xscale = 100; }

Klicken Sie auf quadrat, wird es in horizontaler Richtung auf das Doppelte vergrößert. Sobald Sie die Maus loslassen, erhält es wieder seine Originalgröße zurück, was einer Skalierung auf 100  Prozent entspricht. Mit einem kleinen Trick ermöglichen es diese Eigenschaften, Objekte zu spiegeln. Da das bei einem Quadrat eher schwer nachprüfbar sein dürfte, benötigen wir ein neues Objekt. 11. Erstellen Sie auf der Ebene objects eine beliebige, nicht-symmetrische Grafik, z. B. eine kleine Figur. 12. Wandeln Sie die Figur in einen MovieClip um (Bibliotheksname mcFigur, Instanzname figur, Registrierungspunkt mittig). 13. Erweitern Sie Ihren Code folgendermaßen:

figur.onPress = function(){



}

 this._xscale = -100;

Klicken Sie auf die Figur, dreht sie sich um, wird also in horizontaler Richtung gespiegelt. Die Spiegelachse entspricht einer vertikalen Linie durch den Registrierungspunkt des MovieClips wie in Abbildung  23 zu sehen. Verschieben Sie den Registrierungspunkt, ändert sich natürlich die Spiegelachse, was eventuell zu einem ungewollten Effekt führt.

Da eine Zuweisung von rechts nach links erfolgt, skaliert Flash zuerst in vertikaler Richtung auf das Vierfache, anschließend weist es der horizontalen Skalierung die vertikale Skalierung zu. Sollten Sie lieber mit der handlicheren Originalgröße des Quadrats vorliebnehmen wollen, so lässt sich diese jederzeit wiederherstellen. Das funktioniert auch dann, wenn Sie mehrfache Skalierung vorgenommen haben. 9. Löschen Sie alle bisherigen Skripte. 10. Schreiben Sie statt dessen:

quadrat.onPress = function(){ this._xscale *= 2;

Abbildung 23:  Spiegelung mit _xscale

12.1  Eigenschaften von MovieClips

14. Öffnen Sie mcFigur im Symbolbearbeitungsmodus und verschieben den Registrierungspunkt an den linken Rand. Das erreichen Sie einfach, indem Sie alles markieren und im Eigenschaftsfenster als x-Position 0 eintragen. Wenn Sie jetzt klicken, spiegelt der MovieClip entlang seines linken Randes, was einen völlig anderen visuellen Eindruck ergibt als zuvor. Diese Lösung ermöglicht nur ein einmaliges Spiegeln. Manchmal kann es jedoch sinnvoll sein, permanent zu spiegeln, etwa bei einer Figur, die sich hinund herbewegt. Erreicht sie den Rand, dreht sie sich um und bewegt sich in die andere Richtung. Oder, um es an dieser Stelle einfacher zu halten, bei jedem Klick soll die Figur gespiegelt werden. 15. Verschieben Sie den Registrierungspunkt wieder im Symbolbearbeitungsmodus in die Mitte, indem Sie der Grafik als Position ihre halbe Breite sowie halbe Höhe im Eigenschaftsfenster zuweisen. 16. Ändern Sie das onPress-Ereignis von figur wie folgt (Fettdruck):

figur.onPress = function(){



}

 this._xscale *= -1;

Zeigt die Figur anfangs nach rechts, dreht sie sich bei einem Klick nach links. Ein erneuter Klick spiegelt sie, so dass sie wieder in die ursprüngliche Richtung schaut etc. Dahinter steckt nichts anderes als das Ändern des Vorzeichens der Eigenschaft _xscale. Wie wir wissen, besitzt diese Eigenschaft bei einer Grafik, die nicht geändert wurde, den Wert 100 (misstrau­ische Naturen können dies mit einem trace()-Befehl kontrollieren). Setzen wir diesen Wert auf  –100, ändern also ihr Vorzeichen, spiegeln wir die Grafik, wie wir vorhin gesehen haben. Die negative Zahl erhalten wir, indem wir die positive Zahl mit –1 multiplizieren (100 * –1 = –100, wie uns einst die gute alte Schulmathematik lehrte). Multiplizieren wir den negativen Wert erneut mit  –1, entsteht eine positive Zahl, was dem ursprünglichen, unveränderten Wert von 100 entspricht. Das Prinzip der Vorzeichenumkehr wird uns noch öfters begegnen, wenn wir Animationen skripten, die zwischen zwei definierten Zuständen hin- und herpendeln.

125

12.1.4 _rotation, _alpha, _visible Drei weitere wichtige Eigenschaften beziehen sich ebenfalls auf die visuelle Darstellung, nämlich _rotation, _alpha und _visible. Die Drehung definiert Flash über die Eigenschaft _rotation, die eine Gradangabe erwartet. Standardmäßig besitzt diese Eigenschaft den Wert 0. Eine Drehung nach rechts entspricht einer Erhöhung, eine Drehung nach links einer Reduktion dieses Wertes. Ein Wert von 360 ergibt eine Volldrehung, die wir aber nicht sehen können, da sie identisch mit einer Drehung um 0 Grad ist. Klaglos nimmt Flash auch höhere Werte an, aus denen sich mittels einer Division durch 360 der richtige Drehwinkel errechnen lässt. Würden wir _rotation auf 450 setzen, entspräche das einer Drehung um 90 (450/360 ergibt einen Rest von 90). 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf der Ebene objects in der Screenmitte einen Smiley (80 × 80), der uns freundlich entgegen lächelt. 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcSmiley, Instanzname smiley, Registrierungspunkt mittig). 4. Weisen Sie der Ebene actions folgendes Bildskript zu: smiley.onPress = function(){  this._rotation = 90; }

Ein Mausklick dreht ihn um 90  Grad im Uhrzeigersinn. Entgegen dem Uhrzeigersinn dreht er sich, wenn Sie statt 90 die –90 übergeben. Optisch entspricht dieser Wert einer Dreivierteldrehung, also einer Drehung im Uhrzeigersinn um 270 Grad. Wie bei anderen Eigenschaften ist hier eine relative Zuweisung möglich. 5. Ändern Sie die Zuweisung (Fettdruck): smiley.onPress = function(){  this._rotation += 20; }

Jeder Mausklick erhöht den Drehwinkel um 20, so dass, genügend Geduld und Zeit vorausgesetzt, bei 18 Klicks eine Volldrehung vorliegt. Beim Auslesen ist zu beachten, dass die Eigenschaft _rotation ne-

126

gative Werte annehmen kann, selbst dann, wenn Sie ausschließlich positive Werte zuweisen. 6. Ändern Sie die Zuweisung (Fettdruck): smiley.onPress = function(){  this._rotation += 45;

trace(this._rotation); }

Klicken Sie beim Testen wiederholt auf den Smiley, gibt Flash die betreffenden Rotationswerte im Nachrichtenfenster aus. Bis zum vierten Mausklick einschließlich entspricht das Ergebnis unseren Erwartungen. Die Eigenschaft _rotation enthält sukzessive die Werte 45, 90, 135 und 180. Der fünfte Wert jedoch springt mit –135 aus dem Rahmen. Alle nachfolgenden Werte sind negativ bis zu einer Drehung von 0  Grad, dann beginnt der ganze Prozess wieder von vorne. Der Grund liegt in einer für uns nicht intuitiv nachvollziehbaren Art, wie Flash intern Drehwinkel verrechnet. Alle Drehungen im Uhrzeigersinn entsprechen bis zu einer Halbdrehung einem positiven Wert, alle darüber hinausgehenden Drehungen im Uhrzeigersinn werden intern als Drehung entgegen dem Uhrzeigersinn bis zu einer Halbdrehung interpretiert und ergeben einen negativen Wert. Flash zählt also intern bei _rotation nicht über 180 hinaus, 181 entspricht daher –179. Und eine Dreivierteldrehung mit 270 wird flashintern als Vierteldrehung um  –90 behandelt. Optisch können wir diese etwas ungewöhnliche Herangehensweise nicht wahrnehmen, aber sie spielt programmiertechnisch u. U. eine große Rolle, etwa, wenn Sie bestimmte Aktionen vom Drehwinkel eines Objektes abhängig machen wollen. Unabhängig von Positionierung und Größe lässt sich die Sichtbarkeit eines MovieClips mit den Eigenschaften _alpha und _visible gezielt steuern.

Kapitel 12  MovieClip-Klasse

verschwindet. Mit Hilfe einer relativen Wertzuweisung sorgen wir dafür, dass die Eigenschaft _alpha, also die Deckkraft des MovieClips, um 10 reduziert wird. Sie beginnt bei 100  Prozent. Nach 10 Klicks sind wir bei 0 angelangt, so dass der MovieClip nicht mehr zu sehen ist. Aufgrund der reduzierten Deckkraft scheint der Hintergrund immer stärker durch. Selbstverständlich wäre auch eine absolute Wertezuweisung, z. B. this._alpha = 50, möglich. Wer Flashseiten kennt, weiß, wie beliebt Effekte sind, die auf einer Änderung der Deckkraft beruhen. Sie werden unter dem denglischen Begriff des Fading subsummiert. Wir wollen uns das Grundprinzip, das in mehreren unserer Workshops zum Tragen kommt und ausführlicher unten im Kapitel zum Thema Geskriptete Animation behandelt wird, hier anschauen. Denn wie im Falle der Rotation gibt es eine Eigenheit, die wir in der Programmierung beachten müssen. 8. Ersetzen Sie das vollständige onPress-Ereignis durch ein onEnterFrame: smiley.onEnterFrame = function(){  this._alpha –= 5; }

Unser Smiley blendet ohne unser Zutun stetig aus, bis er nicht mehr zu sehen ist. Das onEnterFrame-Ereignis, auf das wir noch zu sprechen kommen, sorgt für die ständige Ausführung unseres Befehls, der vom aktuellen Alphawert jeweils 5 abzieht. Wenn wir bei 100 starten, hat Smiley im nächsten Durchlauf eine Deckkraft von 95 %, dann von 90 % usw. Übrigens wenn wir das onEnterFrame nicht nach einer gewissen Zeit aufheben, zählt Flash im negativen Bereich weiter. Ein Wert von beispielsweise –100 wäre aus Flashsicht korrekt, auch wenn sich eine negative Prozentzahl visuell gar nicht darstellen lässt.

7. Ergänzen Sie das onPress-Ereignis wie folgt (Fettdruck):

9. Fügen Sie innerhalb des onEnterFrame–Ereignis nach der Reduktion des Alphawerts hinzu:

smiley.onPress = function(){

trace(this._alpha);

this._alpha –= 10;

 this._rotation += 45;

 trace(this._rotation); }

Bei jedem Mausklick hinterlässt unser Smiley einen flüchtigeren Eindruck. bis er (scheinbar) vollständig

Die Zahlen, die Flash jetzt im Nachrichtenfenster präsentiert, entsprechen kaum unserer Erwartung: 94.921875, 89.84375, 84.765625, 79.6875 usw. Flash greift auf einen 8 Bit-Alphakanal zu, der insgesamt 256 verschiedene Abstufungen umfasst. Diese Werte werden jedoch in 100 verschiedenen Prozentwerten ausgedrückt. Flash muss einen Umrechnungsmodus

12.1  Eigenschaften von MovieClips

127

finden, um zwischen den verschiedenen Wertebereichen verrechnen zu können, und rundet anschließend, was in der Ausgabe zu den merkwürdig anmutenden Zahlen führt. Daher gilt hier wie bei _rotation, dass wir Acht geben müssen, wenn wir kontrollieren wollen, ob ein bestimmter Wert erreicht wurde. Beispielsweise würde eine if-Abfrage nach dem Erreichen von exakt 80 % nie true ergeben können. Statt dessen müsste man mit einem Vergleichsoperator wie >= bzw. <= arbeiten. Ein konkretes Beispiel dazu finden Sie im Kapitel Geskriptete Animationen. Wesentlich einfacher gestaltet sich die Verwendung von _visible, da es nur zwei zulässige Werte gibt, nämlich true, wenn ein Objekt dargestellt werden soll, und false, wenn es unsichtbar sein soll.

aktuellen Wert in sein Gegenteil umkehrt (zur Erinnerung: Das Zeichen „!“ bedeutet „nicht“). Das gleiche Prinzip wenn auch in anderer Form haben wir zuvor bei der Multiplikation mit  –1 kennen gelernt. Konkret bedeutet das: Wenn die Eigenschaft _visible auf true gesetzt ist, weisen wir per Mausklick das Gegenteil, also false zu. Ist sie false, erhält sie bei erneutem Klick ebenfalls das Gegenteil, was dann true entspricht. Mitunter ist es notwendig, ein Objekt zeitweise unsichtbar zu schalten. Welchen der beiden vorgestellten Wege (_alpha, _visible) sollte man wählen? Obschon beide optisch das gleiche Ergebnis erbringen, reagieren sie völlig unterschiedlich auf Interaktionen des Users.

10. Erstellen Sie auf der Ebene objects an beliebiger Position ein blaues Rechteck (70 × 25). 11. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht, Registrierungspunkt mittig). 12. Ersetzen Sie das bisherige Skript vollständig durch:

14. Löschen Sie das blaue Rechteck von der Bühne. 15. Duplizieren Sie den Smiley-MovieClip auf der Bühne. 16. Ändern Sie die Instanznamen beider Smileys in deckkraft bzw. sichtbar, so dass wir nachher im Code erkennen können, bei welchem Clip welche Eigenschaft geändert wurde. 17. Weisen Sie der Ebene actions folgendes Bildskript zu:



recht.onPress = function(){



}

 smiley._visible = false;

Durch einen Mausklick können wir den Smiley unsichtbar schalten, optisch erreichen wir damit dasselbe wie bei der Reduktion der Deckkraft auf 0. Anzeigen lassen können wir unseren Smiley, indem wir seine Eigenschaft _visible explizit auf true setzen. Dazu verwenden wir der Einfachheit halber denselben MovieClip, der auch auf unsichtbar schaltet. Wenn ein Schalter zwei verschiedene Zustände annehmen und zwei verschiedene Aktionen auslösen kann, handelt es sich um einen Kippschalter. 13. Ändern Sie den Code (Fettdruck):

recht.onPress = function(){



}

 smiley._visible = !smiley._visible;

Nun lässt sich der Smiley per Mausklick entweder ein- oder ausschalten, je nachdem, in welchem Zustand er sich bei Klick befindet. Wir machen uns die Tatsache zunutze, dass _visible nur zwei exakt definierte Boolsche Werte zulässt. Man kann sehr einfach zwischen ihnen umschalten, indem man den

deckkraft._y = sichtbar._y = deckkraft._height/2; deckkraft._x = deckkraft._width/2;

sichtbar._x = deckkraft._x + sichtbar._ width;

Wir positionieren beide MovieClips im linken oberen Bereich der Bühne. Da der Registrierungspunkt bei beiden in der Mitte liegt, entspricht ihre y-Position der halben Höhe der MCs. Beide sind gleich groß, so dass es ausreicht, für die Positionierung die Höhe von nur einem MovieClip heranzuziehen. Durch unsere Berechnung erhalten die MovieClips jeweils dieselbe y-Position. Ihre x-Position dagegen muss sich logischerweise voneinander unterscheiden, sonst liegen beide übereinander. Den ersten MovieClip positionieren wir direkt am linken Bühnenrand, was der halben Breite des Objektes entspricht. Der zweite muss dann nur noch um dessen gesamte Breite nach rechts verschoben werden, so dass beide exakt nebeneinander liegen. Es ist wichtig, die Objekte an einen für uns bekannten Ort zu setzen. Denn nur so können wir per Maus mit ihnen interagieren, wenn sie nicht mehr sichtbar sind.

128

Kapitel 12  MovieClip-Klasse

Abbildung 24:  Positionierung der MovieClips

18. Fügen Sie an das Skript folgende Zeilen an:

deckkraft._alpha = 0;

sichtbar._visible = false;

 sichtbar.onRollOver = deckkraft.onRollOver = function(){

erweist sich daher i. d. R. die Verwendung von _visible anstelle von _alpha als richtiger Weg. Alle Eigenschaften, die sich auf Position und Größe eines MovieClips beziehen, setzen voraus, dass sich sein Registrierungspunkt an der korrekten Stelle befindet, also i. d. R. links oben oder in der Mitte. Da _width, _x, _rotation etc. immer die konkreten Werte des Registrierungspunktes verwenden, führt ein falsch gesetzter Punkt auch zu unerwünschten Ergebnissen. Solange Sie Ihre MovieClips händisch auf der Bühne anordnen, lässt sich ein derartiger Fehler leicht korrigieren. Das geht jedoch nicht mehr, wenn ein Skript verwendet wird. Daher gewöhnen Sie sich unbedingt an, auf die korrekte Position des Registrierungspunktes zu achten.

 trace(this._name);

}

Versuchen Sie, mit der Maus über die Objekte in der linken oberen Ecke zu fahren. Falls Sie nicht völlig daneben liegen, wird Flash im Nachrichtenfenster „deckkraft“ ausgeben, nicht jedoch „sichtbar“. Wir setzen die Eigenschaften _alpha und _visible auf 0, so dass beide MovieClips ausgeblendet werden. Anschließend weisen wir beiden das gleiche Ereignis zu, demzufolge bei einem onRollOver im Nachrichtenfenster der Name desjenigen Objekts ausgegeben wird, über dem sich die Maus gerade befindet. Tatsächlich reagiert nur die Instanz deckkraft, während sichtbar kein Mausereignis mehr wahrnimmt. Trotz visuell gleicher Darstellung behandelt Flash die Eigenschaften _alpha und _visible in Bezug auf Interaktion des Users unterschiedlich. Unabhängig von seinem Alphawert ist ein MovieClip jederzeit aktivierbar, selbst, wenn wir ihn nicht mehr sehen können. Besitzt er ein Mausereignis, wird er in jedem Fall darauf reagieren. Wenn wir das nicht wollen, müssen wir explizit das betreffende Ereignis deaktivieren bzw. löschen (s. u., Ereignisse). Wird dagegen die Eigenschaft _visible auf false gesetzt, gibt es keine aktive grafische Fläche für ein Mausereignis mehr – der MovieClip wird vom Flash-Player schlicht nicht gezeichnet. Daher kann natürlich auch kein Mausereignis mehr ausgelöst werden. Allerdings ist der MovieClip nach wie vor vorhanden, und Skripte, die ihm zugewiesen wurden, werden weiter abgearbeitet (soweit sie eben nicht von Mausereignissen abhängen). Wollen Sie ein Objekt unsichtbar schalten,

12.1.5 blendMode Von Photoshop oder anderen Grafik- und Illustrationsprogrammen her kennen Sie sicher die Möglichkeit, Ebenen verschiedene Modi zuzuweisen, um ausgefallene Effekte zu erzielen. Flash stellt dazu eine eigene Eigenschaft zur Verfügung, mit der man in gewohnter Weise sowohl per Eigenschaftsfenster wie per ActionScript arbeiten kann. 1. Erstellen Sie eine Standarddatei. 2. Setzen Sie die Hintergrundfarbe auf Schwarz. 3. Zeichnen Sie auf objects an beliebiger Stelle ein Quadrat (200 × 200, Linienstärke 2, schwarz) mit einem linearen, horizontal ausgerichteten Farbverlauf von Weiss nach Blau (#4E81F5). 4. Wandeln Sie das Quadrat in einen MovieClip um (Bibliotheksname mcVerlauf, Instanzname verlaufUnten, Registrierungspunkt mittig). 5. Duplizieren Sie die Instanz an beliebiger Stelle auf der Bühne. 6. Drehen Sie das Duplikat um 90 Grad im Uhrzeigersinn. 7. Weisen Sie dem Duplikat den Instanznamen verlaufOben zu. 8. Weisen Sie actions folgendes Bildskript zu: //-------------- vars –------------ var nMode:Number = 0;

//------------ functions –--------- function init() {

12.1  Eigenschaften von MovieClips

 verlaufUnten._x = Stage.width/2;

 verlaufUnten._y = Stage.height/2;

 verlaufOben._x = verlaufUnten._x+50;  verlaufOben._y = verlaufUnten._y;  trace(verlaufOben.blendMode);

 verlaufOben.onPress = function() {  nMode++;

 this.blendMode = nMode%14+1;  trace(this.blendMode); }; }

 //------------ aufruf –----------- init();

Beim Testen können Sie per Mausklick auf den oben liegenden MovieClip dessen Ebenenmodus verändern. Anfangs steht er auf normal, wie im Nachrichtenfenster angezeigt wird. Bei jedem Klick zeigt das Nachrichtenfenster den aktuell zugewiesenen Modus. Die meisten Modi führen zu einer Mischung zwischen den Farben des oberen und des unteren MovieClips sowie der Hintergrundfarbe. Flash kennt 14 verschiedene Ebenenmodi, die entweder als String oder als Number zugewiesen werden können. Eingedenk der Tatsache, dass Programmierer und solche, die es werden wollen, aus prinzipiellen Gründen schreibfaul sind, entscheiden wir uns für die kürzere zweite Variante. Dazu initialisieren wir im Variablen-Block nMode mit 0. Diese Variable dient später dazu, den gewünschten Modus zu errechnen. Innerhalb der Funktion init() setzen wir beide MovieClips in die Screenmitte. Um Ebeneneffekte in Bezug auf den Hintergrund erkennen zu können, versetzen wir den oben liegenden MovieClip horizontal um 50 Pixel nach rechts. Damit wird der linke Rand von verlaufUnten zu 50 Pixel frei sichtbar, den Rest verdeckt verlaufOben. Der trace()-Befehl gibt uns am Anfang, bevor wir klicken konnten, den aktuellen Ebenenmodus aus, der, wenn keine andere Einstellung vorgenommen wurde, standardmäßig normal lautet. Wir weisen verlaufOben ein Mausklick-Ereignis zu, das jedes Mal ausgeführt wird, wenn wir auf diesen MovieClip klicken (zum onPress-Ereignis s. u.). Dabei inkrementieren wir nMode und weisen der Eigenschaft blendMode das Ergebnis einer Modulo-

129

Berechnung zu. Wie Sie sich erinnern, gibt Modulo den Restwert einer Division wieder. Nehmen wir an, wir klicken zum ersten Mal auf den Clip. Dann beträgt nMode durch das Inkrement 1. Die Zahl 1 % 14 ergibt 1. Addieren wir 1 hinzu, erhalten wir 2. Diesen Wert weisen wir blendMode zu, so dass der nächste Ebenenmodus angezeigt wird. Im nächsten Durchgang beträgt nMode 2 und durch die Berechnung erhalten wir 3 usw. Wird nMode bis 13 hochgezählt, ergibt die Berechnung 14, den letzten gültigen Wert, da Flash genau 14 verschiedene Ebenenmodi kennt. Danach beträgt nMode 14, was mit Modulo 0 ergibt. Da es keinen blendMode 0 gibt, sorgen wir nach Modulo durch die Addition von 1 dafür, dass wir nie einen unzulässigen Wert erhalten. Wir gelangen nämlich zur 1. Auf diese Weise können wir nMode einfach hoch zählen, erhalten aber dank Modulo immer nur Zahlen zwischen 1 und 14. Im Einzelnen bedeuten die Ebenenmodi:

• normal (bzw. 1): Standardeinstellung, der Movie-

Clip wird unverändert angezeigt. • layer (2): Erstellt eine Bitmap-Kopie des MovieClips im Screenbuffer und wirkt sich nur aus, wenn Sie bestimmte Filter anwenden. • multiply (3): Multipliziert die Farben des Clips mit denjenigen des darunterliegenden Objekts, dividiert durch 255. Als Ergebnis erhält man i. d. R. dunklere Töne. • screen (4): Gewissermaßen das Gegenstück zu multiply, indem die Komplementärfarben miteinander verrechnet werden, wodurch zumeist eine Aufhellung erreicht wird. • lighten (5): Wählt die helleren Farbwerte des MovieClips und des darunter liegenden Objekts aus und erzeugt ein helleres Bild. • darken (6): Wählt die dunkleren Farbwerte des MovieClips und des darunter liegenden Objekts aus und erzeugt ein dunkleres Bild. • difference (7): Subtrahiert die dunklere von der helleren Farbe beider MovieClips. • add (8): Addiert die Farbwerte der direkt übereinander liegenden Bereiche. • subtract (9): Subtrahiert die Werte des MovieClips von denjenigen des darunter liegenden Elements. • invert (10): Verwirft die Farbwerte des oben liegenden Clips vollständig und kehrt die Werte des darunter liegenden Elements um.

130

• alpha

(11): Definiert die Farbpixel als Alphamaske. Dieser Modus und erase funktionieren nur, wenn dem übergeordneten MovieClip der blendMode layer zugewiesen wird. • erase (12): Löscht aus dem Hintergrund entsprechend dem Alphawert der Farbpixel des oben liegenden MovieClips. • overlay (13): Passt die Helligkeit an den Hintergrund an, erhält aber den Kontrast des Vordergrunds. • hardlight (14): Erhöht den Kontrast. Nicht jeder Modus funktioniert mit jedem Motiv gleich gut. Daher sollten Sie mit verschiedenen Motiven experimentieren.

12.1.6 _currentframe, _totalframes Zu den besonderen Stärken eines MovieClips zählt die Tatsache, dass er eine eigene, framebasierte Animationen ermöglichende Zeitleiste enthält (das gilt zwar für ein Grafiksymbol ebenfalls, doch können Sie das nicht per Skripting steuern). Um feststellen zu können, wo man sich innerhalb dieser Zeitleiste befindet, stellt Flash die Eigenschaften _currentframe, die sich auf den aktuell angezeigten Frame bezieht, und _totalframes, also die Gesamtlänge der Zeitleiste, zur Verfügung. Beachten Sie beim Einsatz dieser Eigenschaften, dass Flash in der Schreibweise von dem sonst gültigen Prinzip des Camel Case abweicht, also keine Binnenmajuskel verwendet. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie in objects einen leeren MovieClip (Bibliotheksname mcAni). 3. Zeichen Sie im Symbolbearbeitungsmodus von mcAni einen Kreis (50 × 50) auf der Position 0,0. 4. Wandeln Sie den Kreis in einen MovieClip um (Bibliotheksname mcKreis). 5. Fügen Sie im Symbolbearbeitungsmodus von mcAni in Frame 20 eine Schlüsselbild ein, verschieben den Kreis an den rechten Bühnenrand und weisen Frame 1 ein Bewegungstween zu. 6. Kehren Sie zur Hauptzeitleiste zurück. 7. Fügen Sie in der Ebene objects aus der Bibliothek mcAni am linken Bühnenrand ein. 8. Weisen Sie dieser Instanz den namen ani zu.

Kapitel 12  MovieClip-Klasse

9. Weisen Sie der Ebene actions folgendes Bildskript zu: ani.onEnterFrame = function(){ trace(this._currentframe); }

Wenn Sie testen, bewegt sich der Kreis über die Bühne und zeigt im Nachrichtenfenster jeweils seinen aktuellen Frame an. Abhängig vom Erreichen einer bestimmten Framenummer kann man eine Aktion auslösen. 10. Erweitern Sie das Skript innerhalb des onEnterFrame-Ereignisses nach der trace()-Anweisung:  if(this._currentframe == this._ total­ frames){

 trace(„Fertig. Beginne wieder von vorne“);

}

Wenn die Animation zu Ende ist, meldet dies Flash und beginnt wie zuvor wieder von vorne. Flash vergleicht permanent die beiden Eigenschaften _currentframe und ._totalframes miteinander. Sobald ihre Werte übereinstimmen, ist das Animationsende erreicht und der Abspielkopf springt zurück zum ersten Frame. Gleichzeitig erfolgt die Ausgabe im Nachrichtenfenster. Weitergehende Interaktionsmöglichkeiten wie etwa die gezielte Navigation zu einem bestimmten Frame bieten sich durch die Verwendung bestimmter Methoden an, die wir unten kennen lernen.

12.2 Ereignisse In den vorangegangenen Beispielen haben wir bereits mehrfach auf Ereignisse zugegriffen, über die Movie­ Clips verfügen. Flash bietet mehrere system- und userabhängie Ereignisse, die es ermöglichen, gezielt mit MovieClips zu interagieren oder unabhängig von konkreten Aktionen des Anwenders Clips zu kontrollieren. Dazu zählen sowohl MovieClip-spezifische Ereignisse wie auch Schaltflächenereignisse. Wir wollen uns hier nur mit den unverzichtbaren Ereignissen befassen, die in nahezu jeder Applikation eingesetzt werden.

12.2  Ereignisse

12.2.1 onEnterFrame Zu den zweifelsohne am häufigsten verwendeten Ereignissen zählt das onEnterFrame. Dabei handelt es sich um ein permanentes Ereignis, das nach der Zuweisung automatisch von Flash ausgeführt wird. Es entspricht prinzipiell demselben Vorgang, den Flash ausführt, wenn der Abspielkopf in der Zeitleiste einen Frame betritt. Da Animationen oft mit onEnterFrame realisiert werden, kommen wir im Kapitel Geskriptete Animationen ausführlicher auf das Thema zurück. Wir schauen uns hier nur ein simples Beispiel an. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen Kreis (50 × 50, beliebige Farbe und Position). 3. Wandeln Sie ihn in einen MovieClip (Bibliotheksname mcKreis, Instanzname kreis) um. 4. Weisen Sie der Ebene actions folgendes Bildskript zu: kreis.onEnterFrame = function(){

 trace(„Ich bin ein enterFrame-Ereignis“); }

Beim Testen gibt Flash beredt Auskunft über sein Innenleben, indem das Nachrichtenfenster permanent den an die trace()-Funktion übergebenen String anzeigt. Falls Sie gewohnt sind, das Nachrichtenfenster per Mausklick zu schließen, wird es unmittelbar danach wieder aufgehen und seine Ausgabe fortsetzen. Denn das onEnterFrame–Ereignis tritt ja permanent, d. h. solange, wie der Flashfilm ausgeführt wird, ein. Beachten Sie, dass ein derartiges Ereignis unabhängig von der tatsächlichen Anzahl der Frames in der Zeitleiste des MovieClips ausgeführt wird. Selbst wenn, wie in unserem Beispiel, die betreffende Zeitleiste nur einen einzigen Frame umfasst, tritt das onEnterFrame-Ereignis andauernd ein. Die Geschwindigkeit, mit der das Ereignis ausgeführt wird, entspricht der im Eigenschaftsfenster definierten Bildwiederholrate. Wenn Sie beispielsweise den Wert 18 BpS (Bilder pro Sekunde) eingetragen haben, führt Flash 18 mal pro Sekunde das Skript aus. Da die Bildwiederholrate global für den ganzen Film gilt, wird sich jedes onEnterFrame–Ereignis, egal, welchem Objekt Sie es zugewiesen haben, an diesem Tempo orientieren. Das kann insofern von Nachteil

131

sein, als sich nicht garantieren lässt, dass die von Ihnen gewählte Bildwiederholrate auf jedem Rechner gleich schnell ausgeführt wird. In manchen Fällen bietet es sich daher an, mit der setInterval()-Funktion zu arbeiten. Näheres zu setInterval() finden Sie im Kapitel über Geskriptete Animationen. An dem Verhalten des Nachrichtenfensters haben Sie sicher festgestellt, dass es schön wäre, irgendwann ein solches Ereignis wieder loszuwerden. Hier zeigt sich ActionScript ausgesprochen flexibel, denn wir können zur Laufzeit beliebig derartige Ereignisse zuweisen und wieder löschen. 5. Ändern Sie das bisherige Skript (Fettdruck): var nZahl:Number = 10;

kreis.onEnterFrame = function(){ nZahl –-;

trace(nZahl);

if(nZahl == 0){

delete this.onEnterFrame; } }

Flash zählt die Variable nZahl solange herunter, bis sie den Wert 0 erreicht. Dann wird das onEnterFrame–Ereignis gelöscht und dementsprechend erfolgt im Nachrichtenfenster keine weitere Ausgabe mehr. Der Befehl delete() ermöglicht also jederzeit das Löschen eines beliebigen Ereignisses. Anstatt es zu löschen, können Sie das Ereignis auch zur Laufzeit ändern. 6. Ändern Sie das bisherige Skript (Fettdruck): var nZahl:Number = 10;

kreis.onEnterFrame = function(){  nZahl –-;

 trace(nZahl);

 if(nZahl == 0){

this.onEnterFrame = function(){ this._x += 10; };

} }

Wie zuvor zählt Flash die Variable herunter. Sobald sie den definierten Grenzwert erreicht, bewegt sich der Kreis nach rechts. Die Bewegung erreichen Sie,

132

indem das onEnterFrame nicht gelöscht, sondern durch ein neues onEnterFrame-Ereignis mit einer geänderten Anweisung ersetzt wird.

12.2.2 Schaltflächenereignisse von MovieClips Das onEnterFrame–Ereignis läuft automatisch ab, was zwar oft erwünscht ist, aber mitunter spannender sind Applikationen, in die der Anwender eingreifen kann. Die bei weitem häufigsten Interaktionsmöglichkeit besteht im Mausklick oder Loslassen der Maustaste. Dem entsprechen in Flash die Ereignisse onPress und onRelease. Damit können wir die vorherige Übung interaktiv gestalten. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen Kreis (50 × 50, beliebige Farbe und Position). 3. Wandeln Sie ihn in einen MovieClip (Bibliotheksname mcKreis, Instanzname kreis) um. 4. Weisen Sie der Ebene actions folgendes Bildskript zu: var nZahl:Number = 0;

kreis.onEnterFrame = function(){ nZahl++;

 trace(nZahl); }

kreis.onPress = function(){

delete this.onEnterFrame; }

Flash zählt die Variable nZahl solange hoch, bis Sie auf den Kreis klicken. Dann wird das onEnterFrameEreignis gelöscht und dementsprechend erfolgt im Nachrichtenfenster keine weitere Ausgabe mehr. 5. Erweitern Sie das Skript: kreis.onRelease = function() {

 this.onEnterFrame = function() {  nZahl ++;

 trace(nZahl); }; };

Kapitel 12  MovieClip-Klasse

Wie zuvor wird das Hochzählen und Anzeigen der Variablen nZahl durch ein Klick gestoppt. Jetzt können Sie jedoch beim Loslassen der Maustaste den Prozess wieder an der Stelle fortsetzen, an der Sie ihn unterbrochen haben. Da das onEnterFrame-Ereignis in beiden Fällen identisch ist, würde man es in eine para­ metrisierte Funktion auslagern und diese bei Bedarf aufrufen. 6. Ersetzen Sie das Skript vollständig durch: // ------------- vars –------------–– var nZahl:Number = 0;

// ----------- functions –-------–––-

function zaehlen(pWer:MovieClip):Void {  pWer.onEnterFrame = function() {  nZahl ++;

 trace(nZahl); }; }

kreis.onPress = function() {  delete this.onEnterFrame; };

kreis.onRelease = function() {  zaehlen(this); };

// ----------- aufrufe –----------––– zaehlen(kreis);

Der besseren Übersicht halber deklarieren wir unsere Variable in einem Variablen-Block zu Beginn des Skripts. Daran schließt sich die Definition einer para­ metrisierten Funktion namens zaehlen() an, die dem als Argument übergebenen MovieClip das on­ EnterFrame zuweist. Sobald sie einmal aufgerufen wird, funktioniert unser Skript wie zuvor. Die Struktur des Skripts entspricht derjenigen, die Sie in einem früheren Kapitel kennen gelernt haben. Bei längeren Skripten sollte man sich daran orientieren, da es den Code übersichtlicher gestaltet. User-Interaktionen mit MovieClips werden zumeist über Ereignisse gesteuert, die sich auf irgendwelche Eingabegeräte (insbesondere Maus und Tastatur) beziehen. Hier verfügen MovieClips nicht nur über eigene Ereignisse, sondern sie können, wie gezeigt, zusätzlich auf Schaltflächen-Ereignisse zugreifen, was ihnen sehr weitgehende Möglichkeiten verleiht. Von

12.2  Ereignisse

herausragender Bedeutung sind die verwendeten onPress und onRelease, aber auch onRollOver und onRollOut, mit denen ein umfangreiches Arsenal zur Verfügung steht, um ausgefallenste User-Aktionen zu definieren. Nahezu keiner der im vorliegenden Band angeführten Workshops kommt ohne zumindest eines dieser Ereignisse aus. In den vorhergehenden Beispielen haben wir ja bereits Gebrauch von ihnen gemacht. Wie Sie gesehen haben, bedeutet mc.onPress, dass ein Mausklick auf einem MovieClip erfolgt, und mc.onRelease sowie mc.onReleaseOutside, dass die auf dem MovieClip gedrückte Maus wieder losgelassen wird. Für das Loslassen kennt Flash deshalb zwei verschiedene Ereignisse, um unterscheiden zu können, ob sich die Maus noch über dem betreffenden MovieClip befindet oder nicht. Oft ist es ratsam, bei der Verwendung des onRelease auch ein onReleaseOutside zu definieren, um zu vermeiden, dass ein Anwender die gedrückte Maus sehr schnell aus dem aktivierten MovieClip herauszieht und dann erst loslässt. Ein solcher Fall kann nämlich nur durch ein onReleaseOutside, nicht aber durch ein einfaches onRelease aufgefangen werden. Wir werden unten im Zusammenhang mit der startDrag()-Methode ein konkretes Beispiel kennen lernen. Ein mc.onRollOver wird ausgelöst, wenn Sie mit der Maus über einen MovieClip fahren, und mc.onRollOut meint, dass die Maus den MovieClip wieder verlässt. Dabei ist keine Maustaste gedrückt. Während das Klicken und Loslassen der Maus zumeist für das Auslösen irgendwelcher Aktionen verwendet wird (z. B. Aufruf einer neuen Seite, Start einer Animation, Speichern von Daten etc.), benutzen wir die RollOver- und RollOut-Ereignisse, um das betroffene Objekt visuell zu ändern (z. B. Farbe, Deckkraft, mitunter auch Position etc.). Das Objekt deutet damit an, dass es aktiviert werden kann. Oft wird ein RollOver auch verwendet, um zusätzliche Informationen einzublenden (z. B. Tooltip, ausführlicher Text). Im Zusammenhang mit onEnterFrame wurde gezeigt, dass sich ein Ereignis per delete()-Anweisung löschen lässt. Das gilt natürlich genauso für die erwähnten Schaltflächenereignisse. Manchmal ist es jedoch günstiger, ein Ereignis nur temporär zu deaktivieren, um es später wieder einzuschalten. Das ist mit Schaltflächenereignissen – und nur mit diesen – problemlos möglich.

133

1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects ein blaues Rechteck (90 × 28). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht1, Registrierungspunkt links oben). 4. Fügen Sie auf objects eine Kopie unmittelbar neben dem bestehenden Rechteck ein (Instanzname recht2). 5. Weisen Sie actions folgendes Bildskript zu: recht1.onPress = function(){

 trace(„Klick auf „ + this._name);  this.enabled = false;

 recht2.enabled = true; }

recht2.onPress = function(){

 trace(„Klick auf „ + this._name);  this.enabled = false;

 recht1.enabled = true; }

Wenn Sie auf recht1 klicken, wird dessen Name im Nachrichtenfenster angezeigt. Gleichzeitig ändert sich der Fingercursor in den Standardcursor. Ein weiterer Mausklick bleibt ohne Auswirkungen. Klicken Sie auf recht2, geschieht dort dasselbe, allerdings können Sie danach recht1 wieder anklicken. Jeder MovieClip schaltet bei Auftreten des zugeordneten onPress-Ereignisses seine eigene Funktionalität aus und die des anderen ein. Eine Schaltfläche deutet typischerweise durch einen veränderten Cursor auf seine Funktionalität hin. Dies geschieht durch die Verwendung der Schaltflächenereignisse ebenfalls bei MovieClips. Wenn wir jedoch dessen Ereignisse ausschalten, wäre es verwirrend, wenn der Cursor nach wie vor eine Aktivierungsmöglichkeit andeutet. Daher ändert sich der Cursor nach der Deaktivierung der Schaltfläche automatisch in den Standardcursor. Wenn Sie wollen, können Sie auch unabhängig von dem konkreten Zustand Ihres MovieClips den Handcursor ausschalten. 6. Kommentieren Sie durch zwei vorangestellte // alle Zeilen aus, die sich auf die Eigenschaft en­ abled beziehen. Alternativ können Sie die betreffenden Zeilen löschen, da wir sie nicht mehr benötigen.

134

Kapitel 12  MovieClip-Klasse

7. Fügen Sie am Anfang des Codes folgende Zeile ein:  recht1.useHandCursor = recht2. useHandCursor = false;

Der Handcursor wird gezielt ausgeschaltet, so dass bereits beim ersten onRollOver keine Cursoränderung mehr erfolgt. Die MovieClips werden angezeigt, ohne dass sie einen Hinweis auf ihre Schaltflächenfunktionalität geben. In manchen Situationen ist ein derartiges Verhalten erwünscht. Generell gilt jedoch, dass aus Gründen der Usability ein aktivierbares Element in irgendeiner Form auf seine Funktionalität aufmerksam machen sollte. Die Cursoränderung hat sich als Standard etabliert und sollte dementsprechend auch verwendet werden. Diese anwendergesteuerten Schaltflächenereignisse können zu einem beliebigen Zeitpunkt nur jeweils einmal auftreten. Nehmen wir an, Sie haben auf der Bühne drei MovieClips mit jeweils einem onRelease-Ereignis nebeneinander liegen. Wenn Sie nun auf einem Clip klicken und anschließend die Maustaste loslassen, tritt im Flashfilm genau ein einziges onRelease-Ereignis auf und nur der eben aktivierte MovieClip kann darauf reagieren. Das ist nicht weiter überraschend. Doch was geschieht, wenn alle Objekte übereinander liegen oder sich zumindest in genau dem Bereich überlappen, über dem sich die Maus beim Loslassen befindet? 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects ein Rechteck (100 × 30). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht1, Registrierungspunkt mittig). 4. Fügen Sie zwei Kopien auf der Bühne ein (Instanznamen recht2 und recht3). 5. Ordnen Sie die Kopien so an, dass sie sich in einem Bereich überlappen, wie auf Abbildung 25 zu sehen. Die Drehung realisieren Sie mit Hilfe des Drehen-Werkzeugs der Standard-Symbolleiste. Die Reihenfolge der Clips ergibt sich aus dem Einfügen: Im Hintergrund liegt recht1, darauf recht2 und ganz im Vordergrund recht3. 6. Weisen Sie actions folgendes Bildskript zu:  recht1.onRelease = recht2.onRelease = recht3.onRelease = function(){  trace(this._name); }

Abbildung 25:  Überlappende MovieClips

Beim Testen klicken Sie zunächst auf jene Bereiche, die sich nicht überlappen. Sie erhalten dann als Ausgabe im Nachrichtenfenster jeweils den Namen des angeklickten MovieClips. Anschließend klicken Sie genau auf die Mitte. Als Ergebnis zeigt das Nachrichtenfenster „recht3“. Obwohl alle Objekte übereinander liegen und jeweils dasselbe Ereignis zugeordnet wurde, reagiert immer nur ein einziger MovieClip. Die betreffenden Ereignisse werden nicht weiter gereicht, sondern treten nur ein einziges Mal auf und sind dann quasi „aufgebraucht“. Die Wahrnehmung eines der hier behandelten Schaltflächenereignisse ist also immer an das Objekt gebunden, das sich direkt unter dem Mauszeiger befindet. Alle anderen unter diesem Objekt liegenden Objekte werden ignoriert. Bei manchen Ereignissen wie onRollOut, onRelease und onReleaseOutside müssen Sie zudem beachten, das sie sich ausschließlich auf das zuvor aktivierte Objekt beziehen. Wenn beispielsweise auf recht1 ein onPress ausgelöst und die gedrückte Maustaste erst auf recht2 losgelassen wird, erfolgt dort kein onRelease-Ereignis mehr. 7. Ordnen Sie die drei Rechtecke horizontal ausgerichtet (Drehung 0 Grad) nebeneinander an. 8. Erweitern Sie das Bildskript:  recht1.onPress = recht2. onPress=recht3.onPress=function () {

 trace(„Geklickt auf: „+this._name); };

9. Ändern Sie das onRelease-Ereignis (Fettdruck):  recht1.onRelease = recht2.onRelease =recht3.onRelease=function () {

 trace(„Losgelassen auf: „ + this._ name); };

10. Klicken Sie auf recht1 und lassen die Maustaste wieder los.

12.2  Ereignisse

Ausgabe im Nachrichtenfenster: Geklickt auf: recht1 Losgelassen auf: recht1 Flash nimmt auf dem MovieClip recht1 sowohl ein onPress- wie auch ein onRelease-Ereignis wahr und führt die entsprechenden trace()-Anweisungen aus. 11. Klicken Sie auf recht1 und ziehen die noch gedrückte Maus auf recht2, um sie dort loszulassen. Ausgabe im Nachrichtenfenster: Geklickt auf: recht1 Flash nimmt zunächst ein onPress-Ereignis wahr und gibt den Namen des betroffenen MovieClips im Nachrichtenfenster aus. Nun wartet Flash auf das zugehörige onRelease-Ereignis, das auf recht1 erfolgen muss. Da Sie jedoch gemeinerweise die gedrückte Maus aus recht1 herausziehen, kann dieses Ereignis nie stattfinden. Auch das Loslassen auf recht2 ändert daran nichts, denn damit tritt ja zumindest theoretisch nur auf diesem MovieClip ein onRelease ein. Selbst dieses Ereignis wird ignoriert, da es ein auf demselben Objekt erfolgtes onPress voraussetzt. Das jedoch wurde zuvor auf recht1 ausgelöst. In den meisten Fällen macht ein derartiges Verhalten Sinn, denn schließlich wurde recht1 aktiviert, und nicht irgendein beliebiges anderes Objekt. Bei Menüs allerdings erwartet man eine andere Behandlung der Ereignisse. Das können Sie leicht testen, indem Sie in einem beliebigen, Windows-Konventionen folgenden Programm mit gedrückter Maustaste über verschiedene Menüpunkte fahren. Ausgelöst wird eine Aktion erst dann, wenn Sie loslassen, und es wird exakt derjenige Befehl aufgerufen, auf dessen Icon sich Ihre Maus zuletzt befand. Es spielt also keine Rolle, wo der Mausklick zuerst erfolgte. Glücklicherweise lässt sich dieses Verhalten einfach in Flash nachbilden. 12. Fügen Sie ganz am Anfang des Skripts folgende Zeile ein:  recht1.trackAsMenu = recht2.trackAsMenu = recht3.trackAsMenu = true;

Wenn Sie nun den Test von vorhin wiederholen, spielt der Mausklick für das Auslösen des onRelease-Ereignisses keine Rolle mehr. Aufgrund der enormen Flexibilität, die Movie­ Clips bieten, sollte man zu ihren Gunsten möglichst vollständig auf Schaltflächen verzichten. Selbst die

135

spezifische Zeitleiste von Buttons, die ein bequemes Arbeiten ermöglichen, lassen sich mit MovieClips emulieren. Wie das funktioniert, können Sie im Kapitel Button-Klasse, Abschnitt MovieClips als Schaltflächen, nachlesen.

12.2.3 Maus-Ereignisse Neben den auch in der Button-Klasse vorhandenen Mausereignissen kennen MovieClips eigene Mausereignisse wie onMouseDown, onMouseUp und onMouseMove. Die beiden erstgenannten klingen zwar verdächtig nach onPress und onRelease, unterscheiden sich jedoch deutlich von ihnen. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen roten Kreis (Durchmesser 80). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis1, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu: kreis1.onMouseDown = function() {  trace(„Maus gedrückt“); };

Wenn Sie beim Testen auf den Kreis klicken, erfolgt eine Ausgabe im Nachrichtenfenster. Dies entspricht dem Verhalten eines onPress-Ereignisses, wie wir es oben kennen gelernt haben. Klicken Sie jedoch nicht geordnet teutonisch auf den Kreis, sondern wild in der Gegend herum, also auch neben den Kreis, geschieht genau dasselbe. Im Gegensatz zum onPress ist onMouseDown nicht auf die grafische Fläche des zugeordneten Objekts beschränkt. Jeder beliebige Mausklick löst dieses Ereignis aus. 5. Duplizieren Sie den Kreis auf der Bühne. 6. Weisen Sie dem Duplikat den Instanznamen recht2 zu. 7. Positionieren Sie recht2 so, dass keine Überlappung mit recht1 besteht. 8. Ändern Sie das onMouseDown-Ereignis (Fettdruck):  kreis1.onMouseDown = kreis2.onMouseDown = function () {  trace(„Maus gedrückt“); };

136

Kapitel 12  MovieClip-Klasse

Ein beliebiger Mausklick wird nun von beiden Movie­ Clips registriert, so dass im Nachrichtenfenster zwei Ausgaben erfolgen. 9. Verschieben Sie kreis2 so, dass er sich mit kreis1 teilweise überlappt. 10. Klicken Sie beim Testen auf den sich überlappenden Bereich. Die Ausgabe im Nachrichtenfenster ändert sich gegenüber vorher nicht. Da das onMouseDown nicht an ein spezifisches Objekt gebunden ist, kann es von jedem Objekt registriert werden, dem wir ein entsprechendes Ereignis zuordnen, was, wie wir oben gesehen haben, bei einem onPress (bzw. onRelease) nicht zutrifft. Ob Sie sich für ein onPress/onRelease oder ein onMouseDown/onMouseUp entscheiden, hängt also von dem spezifischen Einsatzzweck ab. Möchten Sie, dass nur ein ganz bestimmtes Objekt aktiviert wird, dann wählen Sie das Schaltflächenereignis. Sollen dagegen mehrere Objekte gleichzeitig reagieren, verwenden Sie onMouseDown bzw. onMouseUp. Völlig ohne Pendant unter den Schaltflächenereignissen ist das onMouseMove, das bei jeder beliebigen Mausbewegung ausgelöst wird. Es eignet sich hervorragend, um zahlreiche Effekte zu realisieren wie etwa der klassische Mausverfolger, der im Workshop Effekte vorgestellt wird. 11. Duplizieren Sie einen der Kreise auf der Bühne. 12. Weisen Sie ihm den Instanznamen kreis3 zu. 13. Erweitern Sie das Skript um folgendes Ereignis:

kreis3.onMouseMove = function(){

 this._x = Math.ceil(Math. random()*Stage.width);  this._y = Math.ceil(Math. random()*Stage.height);

}

Bei jeder Mausbewegung vollführt der eigentlich recht ruhig wirkende kreis3 wilde Sprünge. Sobald ein onMouseMove eintritt, errechnen wir einen von der Bühnenbreite und einen von der Bühnenhöhe abhängigen Zufallswert und weisen ihn jeweils der xsowie y-Eigenschaft von kreis3 zu. Der Kreis erhält dadurch jeweils eine neue Position, was den Eindruck erweckt, er springe wild umher. Unsere Formel ist insofern nicht ganz korrekt, als wir Werte erhalten können, bei denen der Kreis um die Hälfte über einen

Bühnenrand hinausragen kann. Aber zur Demonstration des onMouseMove benötigen wir an dieser Stelle keine präziseren Zahlen.

12.3 MovieClip-Methoden Mit einer noch größeren Fülle als bei den Eigenschaften wartet Flash bei Methoden auf. Wie zuvor konzentrieren wir uns auf einige unverzichtbare Methoden. Weitere Informationen finden Sie in den Kapiteln „Geskriptete Animationen“, „Zeichnungsmethoden“, „Filter“, „Externe Ladevorgänge“ sowie in zahlreichen Workshops des Buches.

12.3.1 Zeitleistensteuerung Mit sehr einfachen Mitteln lässt sich die Zeitleiste eines MovieClips kontrollieren, etwa, um eine händisch erstellte Animation mit Hilfe von MovieClip-Buttons zu steuern. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie eine Grafik in die Bibliothek. Sie sollte natürlich kleiner als die Bühne sein, um etwas Platz für Schaltflächen zu lassen. Alternativ können Sie auch einen beliebigen MovieClip zeichnen. 3. Erstellen Sie einen leeren MovieClip (Bibliotheksname mcAnimation). Er dient als Behälter für eine Animation der Grafik. 4. Erstellen Sie einen weiteren leeren MovieClip (Bibliotheksname mcBild) als Behälter für die Grafik. 5. Fügen Sie im Symbolbearbeitungsmodus von mcBild die Grafik auf der Position 0,0 ein. 6. Öffnen Sie mcAnimation im Symbolbearbeitungsmodus. 7. Fügen Sie dort mcBild auf der Position 0,0 ein. 8. Setzen Sie im Eigenschaftsfenster die Deckkraft der eingefügten Instanz von mcBild auf 0 %, so dass die Grafik unsichtbar wird. 9. Erstellen Sie in Frame 20 ein Schlüsselbild. 10. Ändern Sie die Deckkraft auf 100 %. 11. Fügen Sie in Frame 40 ein Schlüsselbild ein. 12. Ändern Sie die Deckkraft auf 0 %.

12.3  MovieClip-Methoden

13. Weisen Sie Frame 1 und Frame 20 jeweils ein Bewegungstween zu. Damit haben Sie eine Animation erstellt, bei der unsere Grafik zunächst einund anschließend ausblendet. 14. Kehren Sie zur Hauptzeitleiste zurück. 15. Fügen Sie dort auf der Ebene objects den Movie­Clip mcAnimation an beliebiger Position ein (Instanzname animation). 16. Fügen Sie in der Hauptzeitleiste oberhalb von objects eine neue Ebene namens buttons ein. 17. Zeichnen Sie auf buttons ein blaues Rechteck (90 × 28). 18. Wandeln Sie es in einen MovieClip um (Bibliotheksname btnPlay, Instanzname bPlay, Registrierungspunkt oben links). 19. Öffnen Sie btnPlay im Symbolbearbeitungsmodus. 20. Fügen Sie eine neue Ebene namens txt ein. 21. Fügen Sie dort ein statisches Textfeld mit dem Text „Play“ ein. Die Eigenschaften des Textfeldes sind beliebig. 22. Duplizieren Sie btnPlay viermal in der Bibliothek (Bibliotheksnamen btnStop, btnGo20, btnGo1, btnGoStop20). 23. Ändern Sie jeweils die Texte der Duplikate in „Stop“, „Go to 20“, „Go to 1“ und „Go Stop 20“. 24. Fügen Sie in der Hauptzeitleiste auf buttons alle Duplikate ein. 25. Weisen Sie ihnen folgende Instanznamen zu: bStop, bGo20, bGo1 und bGoStop20. Ihre Bühne müsste jetzt ungefähr aussehen wie in der Abbildung. Zur Verdeutlichung der Position der im ersten Frame unsichtbaren Animation wurde das entsprechende Begrenzungsrechteck eingeblendet (s. Abbildung 26). Wenn Sie testen, wird die Animation andauernd abgespielt, d. h., Ihr Bild blendet permanent ein und aus. Da es keinerlei Befehle gibt, die sich auf die Frames des MovieClips mit der Animation beziehen, spielt Flash einfach alle Frames ab. Ist das Ende erreicht, springt Flash zurück zum ersten Frame und das Spiel beginnt wieder von vorne. 26. Weisen Sie actions folgendes Bildskript zu:

animation.stop();

Wie Sie bereits vorher im Zusammenhang mit unserem Pseudo-Button gesehen haben, können wir eine Zeitleiste anhalten, indem wir den Befehl stop()

137

Abbildung 26:  Beispielhafter Aufbau der Übung

verwenden. Dasselbe geschieht auch hier: Wir weisen die Instanz animation an, das Abspielen der Frames anzuhalten. 27. Erweitern Sie das Bildskript:

bPlay.onPress = function(){

 animation.play();

 trace(„Frame: „+animation._currentframe);

}

bStop.onPress = function(){

 animation.stop();

 trace(„Frame: „+animation._currentframe);

}

bGo1.onPress = function(){

 animation.gotoAndPlay(1);

 trace(„Frame: „+animation._currentframe);

}

bGo20.onPress = function(){

 animation.gotoAndPlay(20);

 trace(„Frame: „+animation._currentframe);

}

bGoStop20.onPress = function(){

 animation.gotoAndStop(20);

 trace(„Frame: „+animation._currentframe);

}

138

Sie sind nun in der Lage, auf die Animation gezielt mit Hilfe der Buttons Einfluss zu nehmen. Bei jedem Klick führt Flash den betreffenden Befehl aus und gibt denjenigen Frame im Nachrichtenfenster an, der anschließend zu sehen ist. Flash bietet, wie das Beispiel zeigt, mehrere Methoden an, mit denen wir eine Zeitleiste vergleichbar einer Videosteuerung steuern können:

• mcZeitleiste.play(): Spielt die Zeitleiste ab dem aktuellen Frame.

• mcZeitleiste.stop(): Hält die Zeitleiste an. • mcZeitleiste.gotoAndPlay(Wert): Springt zu dem angegebenen Frame und spielt die Zeitleiste ab. • mcZeitleiste.gotoAndStop(Wert): Springt zu dem angegebenen Frame und hält dort an. Die Befehle dürften selbsterklärend sein. Wie der oben eingefügte trace()-Befehl verdeutlicht, hält Flash eine bestimmte Reihenfolge ein: Die Zeitleisten-Methoden werden unmittelbar nach ihrem Aufruf ausgeführt, so dass sich zu dem Zeitpunkt, zu dem wir trace() aufrufen, die Zeitleiste der Instanz animation bereits an ihrem Ziel befindet. Voraussetzung für das Funktionieren dieser Methoden ist natürlich das Vorhandensein einer Zeitleiste mit mindestens 2 Frames. Wenn Ihre Zeitleiste nur 1 Frame umfasst und die Animation komplett über ActionScript definiert wird, nützen Ihnen die Befehle nichts. Wir haben die Animation in einen eigenen MovieClip ausgelagert, so dass die Elemente der Hauptzeitleiste davon unabhängig sind. Sie bewahren sich damit eine größere Flexibilität. Natürlich wäre es auch möglich gewesen, direkt in der Hauptzeitleiste zu animieren. Dann müssten Sie den Pfad im Skript anpassen und anstatt animation.methode() eine relative Adressierung mit this._parent. methode() oder eine absolute Adressierung mit _root.methode() verwenden (.methode() steht hier stellvertretend für die betreffenden Methoden). In unserem Beispiel übergeben wir den Frame, zu dem Flash springen soll, als konkrete Zahl. Eine alternative Möglichkeit besteht darin, den Frames einen Namen zuzuweisen und sie dann über diesen Namen anzusteuern. Das hat den Vorteil, dass bei einer Verschiebung der Frames unser Code nicht geändert werden muss, solange die Bildmarkierungen mit verschoben werden. Arbeitet man statt dessen mit Frame­

Kapitel 12  MovieClip-Klasse

nummern, müssen die Zahlen im Code korrigiert werden. 28. Öffnen Sie mcAnimation im Symbolbearbeitungsmodus. 29. Fügen Sie eine neue Ebene namens marker ein. 30. Weisen Sie dem ersten Schlüsselbild auf marker im Eigenschaftsfenster die Bildmarkierung „anfang“ zu. 31. Fügen Sie auf marker in Frame 20 ein Schlüsselbild ein. 32. Weisen Sie diesem Schlüsselbild die Bildmarkierung „mitte“ zu. 33. Korrigieren Sie den Code wie folgt (Fettdruck):

bGo1.onPress = function() {

 animation.gotoAndPlay(„anfang“);  trace(„Frame: „+animation._currentframe);

};

bGo20.onPress = function() {

 animation.gotoAndPlay(„mitte“);

 trace(„Frame: „+animation._currentframe);

};

bGoStop20.onPress = function() {

 animation.gotoAndStop(„mitte“);

 trace(„Frame: „+animation._currentframe);

};

Beim Testen arbeitet die Steuerung wie vorher. Sie können nun jedoch die Frames der Animation (einschließlich der Bildmarkierungen) nach Belieben verschieben, um die Animation zu verkürzen oder zu verlängern. Danach funktioniert das Skript, ohne dass Sie es irgendwo anpassen müssten.

12.3.2 Objekte dynamisch einfügen Im vorhergehenden Beispiel haben wir die benötigten MovieClips händisch erstellt und auf der Bühne eingefügt. Das ist dann sinnvoll, wenn wir von vorneherein genau wissen, wie viele Objekte verwendet werden und dass der User auf jeden Fall diese Objekte sehen muss. Es existieren jedoch zahlreiche Anwendungen, in denen diese Bedingungen nicht zutreffen.

12.3  MovieClip-Methoden

Bei einer Bildergalerie wissen wir beispielsweise nicht, welche Bilder sich der Anwender tatsächlich anschauen möchte. In einem Spiel müssen bestimmte Objekte erst zu einem späteren Zeitpunkt eingeblendet werden, und ihre konkrete Anzahl hängt u. U. vom Verhalten des Spielers oder vom Zufall ab. In solchen Fällen wäre es besser, dynamisch die benötigten Objekte zu erstellen und einzufügen. Es zählt zu den besonderen Stärken des Skripting in Flash, dass wir diesbezüglich gleich über mehrere Möglichkeiten verfügen. Bevor wir uns die konkreten Methoden anschauen, ist ein Blick auf die Art notwendig, wie Flash intern Objekte verwaltet. Sie haben in Flash und sicher auch in anderen Programmen mit Ebenen gearbeitet, um festzulegen, welches Objekt sich vor welchem anderen Objekt befindet. Je höher Ihre Ebene im Ebenenstapel angeordnet ist, desto weiter oben liegt der darauf befindliche Content. Dieses Konzept ermöglicht es uns, auf eine intuitive Art Objekte anzuordnen. Intern allerdings arbeitet Flash nicht einfach mit Ebenen, die eigentlich nur ein Hilfskonstrukt darstellen. Statt dessen erhält jedes Objekt automatisch eine Tiefe zugeordnet, also eine Zahl, die bei  –16383 beginnt. Auf diesen Wert haben wir zunächst keinen direkten Einfluss. Es ist nicht möglich, im Eigenschaftsfenster einen entsprechenden Wert einzugeben. Wir können ihn jedoch anzeigen lassen, falls es sich bei dem betreffenden Objekt um ein Symbol handelt. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects ein beliebiges Objekt. 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcDing, Instanzname ding1, Registrierungspunkt links oben). 4. Fügen Sie in actions folgendes Bildskript ein: trace(„ding1: ”+ding1.getDepth());

Ausgabe im Nachrichtenfenster: –16383 Mit der Methode getDepth() lesen wir den zugewiesenen Tiefenwert aus. Da noch kein anderes Objekt außer ding1 existiert, liegt dessen Tiefe bei den erwähnten –16383. Jedes weitere in derselben Ebene erhält einen um 2 höheren Wert. Das nächste Objekt müsste also eine Tiefe von –16381 besitzen. 5. Duplizieren Sie ding1 auf der Bühne (Instanzname ding2).

139

6. Erweitern Sie das Skript: trace(„ding2: ”+ding2.getDepth());

Ausgabe im Nachrichtenfenster: ding1: –16383 ding2: –16381 Da das neue Objekt eine automatische Tiefe erhält, die höher als diejenige des vorhergehenden Objekts ist, würde es sich bei einer Überlappung im Vordergrund befinden. Liegen die Objekte auf verschiedenen Ebenen, wird deren Reihenfolge in der zugewiesenen Tiefe automatisch berücksichtigt. 7. Fügen Sie oberhalb von objects eine neue Ebene namens objects2 ein. 8. Verschieben Sie ding1 auf diese Ebene. Ausgabe im Nachrichtenfenster: ding1: –16381 ding2: –16383 Die Tiefen wurden gegenüber vorher vertauscht. Da sich das zuerst eingefügte Objekt, nämlich ding1, jetzt auf einer höheren Ebene als ding2 befindet, benötigt es dementsprechend eine höhere Tiefe. Flash weist ihm automatisch –16381 zu, während ding2 auf den niedrigeren Wert von  –16383 gesetzt wird. Weil diese Hierarchie wichtig für die Darstellung auf dem Screen ist, können zwei beliebige Objekte nie denselben Tiefenwert besitzen, falls sie sich in derselben Zeitleiste befinden. Was hier am Beispiel der Hauptzeitleiste demonstriert wurde, gilt für jede beliebige Zeitleiste, d. h., dass in MovieClips eingefügte Symbole ebenfalls mit der Tiefe von –16383 beginnen. Bei dynamisch erzeugten Objekten müssen wir Flash alle benötigten Informationen mitgeben, die ansonsten entweder im Eigenschaftsfenster eingestellt (z. B. Instanzname) oder automatisch zugewiesen würden (Tiefe). Betrachten wir zunächst das Erstellen eines leeren MovieClips. 9. Löschen Sie alle Objekte von der Bühne. 10. Ersetzen Sie das Skript vollständig durch:  var mBeh:MovieClip = this. createEmpty­ MovieClip(„behaelter“,1);

Wenn Sie nun voll Vorfreude testen, werden Sie leider nichts sehen können  – ein leerer MovieClip ist eben leer. Wir haben eine Variable deklariert, deren Datentyp wir als MovieClip festlegen. Sie wird mit einer Referenz auf einen mit der Methode create-

140

Kapitel 12  MovieClip-Klasse

EmptyMovieClip() erzeugten leeren MovieClip in-

itialisiert. Diese Methode benötigt eine Zeitleiste, in der wir den neuen MC ablegen wollen. In unserem Fall handelt es sich um die Hauptzeitleiste, die wir mit this ansprechen. Wie wir oben gesehen haben, ermittelt Flash bei Verwendung von this automatisch das korrekte Objekt, ohne das wir einen absoluten Pfad übergeben müssten. Des weiteren legen wir den Instanznamen mit behaelter fest und definieren eine Tiefe mit 1. Die Verwendung einer Variablen erleichtert später das Skripten und bietet darüber hinaus den Vorteil, dass im Skriptfenster automatisch Codehinweise eingeblendet werden, auf die wir ansonsten erst Zugriff hätten, wenn wir der etwas merkwürdigen Flash-Konvention mit einem spezifischen Suffix folgen würden. Trotz der gähnenden Leere auf dem Screen sind wir in der Lage festzustellen, ob der MovieClip denn überhaupt existiert. 11. Ergänzen Sie das Skript:

trace(mBeh);

Ausgabe im Nachrichtenfenster: _level0.behaelter Da Flash einen Objektpfad ausgibt, muss das von uns eingerichtete Objekt auch tatsächlich vorhanden sein. Nun fragen Sie sich sicher, welchen Sinn es denn machen sollte, einen leeren MovieClip dynamisch zu erzeugen. Schließlich sind wir ja nicht in der Lage, Flash per AS anzuweisen, eine bereits gezeichnete Form in diesen MovieClip hineinzulegen, so, wie wir es auf der Bühne durch Markieren der entsprechenden Illustration und anschließendes Drücken von tun könnten. Ein leerer MC ist dennoch von überragender Bedeutung für die AS-Programmierung, denn er dient uns als Behälter für Objekte, die wir zur Laufzeit entweder aus der Bibliothek einfügen, extern laden oder per Zeichnungsmethoden und BitmapData erstellen. Wir werden daher in den Workshops permanent mit leeren MovieClips arbeiten. Wie Sie oben am Beispiel des Autos mit den drehenden Rädern gesehen haben, bietet die Behälterfunktionalität eines leeren Clips die ideale Möglichkeit, Daten strukturiert zu verwalten. Alle Objekte, die von der Logik her zusammen gehören, können wir in ihn einfügen, um viel einfacher mit ihnen arbeiten zu können. So bietet es sich beispielsweise an, alle Elemente, die zu einem Spiel gehören, in einen über-

geordneten, leeren MovieClip abzulegen. Die entsprechende Vorgehensweise demonstriert der Workshop Spiele. Oder externe Assets werden in einen übergeordneten Behälter geladen, so dass sie sich mit einem einzigen Befehl alle gleichzeitig ändern lassen (z. positionieren, einblenden etc.), eine Methode, die gerne etwa bei dynamischen Galerien verwendet wird, wie der Workshop Bildergalerie zeigt. Ein derartiger Behälter bedarf logischerweise eines konkreten Inhalts, der auf verschiedene Art und Weise entstehen kann:

• mc.attachMovie(): Ein mit einer Verknüpfung

versehenes Symbol aus der Bibliothek wird in den Behälter eingefügt. • mc.attachAudio(): Eine Audioquelle (Mikrophon oder Video als netStream-Objekt) wird dem Behälter zugewiesen. • mc.attachBitmap(): Der Behälter dient dazu, eine Bitmap anzuzeigen. Weitere Informationen finden Sie im Kapitel zur BitmapData-Klasse. • mc.loadMovie(): Eine externe Datei (swf, gif, png, jpg) wird in den Behälter geladen. Mit diesem Thema befasst sich das Kapitel Externe Assets ausführlicher. • mc.lineStyle(), mc.lineTo() etc.  : Mit Hilfe der sogenannten Zeichnungsmethoden wird in den MovieClip gezeichnet. Dies entspricht dem Zeichnen auf der Bühne per Werkzeuge der Werkzeugpalette und wird im Abschnitt zu den MovieClip-Zeichnungsmethoden behandelt. • mc.createTextField(): Ein leeres Textfeld wird mit spezifischen, änderbaren Standardeigenschaften im angegebenen MovieClip erzeugt, womit wir uns im Kapitel Text auseinandersetzen. Um ein Objekt per attachMovie() einfügen zu können, muss in der Bibliothek ein entsprechendes Objekt  – genauer: ein Symbol (Schaltfläche oder Movie­Clip) – vorhanden sein. 12. Zeichnen Sie einen roten Kreis (100 × 100). Die Ebene, auf der Sie ihn erstellen, spielt keine Rolle. 13. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Registrierungspunkt mittig). 14. Löschen Sie ihn in der Hauptzeitleiste, da wir ihn per Skripting einfügen wollen. Es besteht keine Möglichkeit, mit ActionScript direkt ein Objekt in der Bibliothek anzusprechen. Statt des-

12.3  MovieClip-Methoden

sen müssen wir explizit einen Verknüpfungsbezeichner (auch: Exportname) zuweisen, der sich dann im Skript verwenden lässt. 15. Klicken Sie in der Bibliothek mit der rechten Maustaste auf mcKreis. Achten Sie darauf, dass Sie sich nicht im Vorschaufenster des Clips befinden, sondern an der Stelle, an der Symbol und Name des Objekts zu sehen sind. 16. Wählen Sie die Option . 17. Klicken Sie unter auf <Export für ActionScript >. 18. Flash schlägt automatisch den Bibliotheksnamen des MovieClips an, den Sie getrost übernehmen können. Gleichzeitig wird die Option <Exportieren in erstes Bild> aktiviert. 19. Bestätigen Sie mit . Durch die Zuweisung eines Exportnamens weisen wir Flash an, beim Erstellen der swf das bezeichnete Objekt auch dann einzubinden, wenn es nicht auf der Bühne eingefügt wurde. Gleichzeitig sorgen wir dafür, dass es bereits im ersten Frame zur Verfügung steht, so dass wir in einem dort vorhandenen Skript darauf zugreifen können. Diese Prozedur ist wichtig, da Flash aus Optimierungsgründen bei der Erstellung einer swf nur diejenigen Elemente in der Bibliothek einbindet, die auf der Bühne Verwendung finden. Da ein per Skripting eingefügtes Element zu diesem Zeitpunkt naturgemäß nicht auf der Bühne anzutreffen ist, müssen wir Flash per Verknüpfungsnamen mitteilen, das es dennoch benötigt wird. 20. Ersetzen Sie den trace()-Befehl durch:

var mCont:MovieClip;

 mCont = mMC.attachMovie(„mcKreis“, „kreis“,1);

Wenn Sie testen, hängt in der linken oberen Ecke ein roter Kreis. Wir richten eine weitere Variable ein, um das in den Behälter eingefügte Objekt aufzunehmen. Dadurch ersparen wir uns insbesondere die Angabe langer Pfadnamen. Anschließend weisen wir der Variablen konkreten Inhalt zu. Dabei fügen wir per attachMovie() das in der Bibliothek verknüpfte Objekt ein, wobei die Angabe folgender Argumente notwendig ist:

• Verknüpfungsname. Er kann wie in unserem Fall als String, also im Klartext, oder als Variable übergeben oder per Konkatenation errechnet werden.

141

• Instanzname. Für ihn gilt dasselbe wie für den Ver-

knüpfungsnamen. • Tiefe. Es wird empfohlen, eine Ganzzahl >= 0 zu wählen, so dass Sie nicht Gefahr laufen, einen von Flash bereits automatisch zugewiesenen, negativen Wert zu überschreiben. Zudem müssen Objekte auf einer positiven Tiefe liegen, um sie wieder löschen zu können. Beachten Sie, dass wir bei der Übergabe einer nichtexistenten Verknüpfung leider keine Fehlermeldung erhalten. Statt dessen ignoriert Flash unsere Anweisung und die Bühne bleibt leer. Obgleich zulässig, sollten Sie keinen Instanznamen wählen, der dem Verknüpfungsnamen entspricht. Es macht einen verwirrenden Eindruck, für verschiedene Elemente in einem Skript die gleichen Bezeichnungen vorzufinden. Und spätestens dann, wenn Sie zwei Instanzen desselben Symbols erzeugen, gehen Ihnen die Namen aus – denn jeder Name muss eindeutig sein. Die fraglos ungewöhnliche Position des eingefügten Kreises hängt weniger mit einem störrischen Charakter als vielmehr mit der Tatsache zusammen, dass wir Flash keine Information gegeben haben, wo wir ihn ablegen wollen. Wenn wir ihn händisch einfügen, ergibt sich die Position natürlich automatisch durch das Loslassen der Maustaste bzw. die Stelle, an der wir gezeichnet haben. Ein derartiger Vorgang fehlt jedoch beim dynamischen Einfügen. Daher verwendet Flash einfach einen Defaultwert, bei dem es sich jeweils um den Koordinatenursprung derjenigen Zeitleiste handelt, in die wir etwas einfügen. 21. Erweitern Sie das Skript:

mCont._x = mCont._width/2;

mCont._y = mCont._height/2;

Der MovieClip wird nach dem Einfügen an den linken und an den oberen Rand verschoben, so dass wir ihn vollständig sehen können. Würde sich der Registrierungspunkt in mcKreis nicht in der Mitte, sondern links oben befinden, wäre es nicht notwendig, eine neue Position zuzuweisen. In dem Fall läge er mit dem Defaultwert bereits an der gewünschten Stelle. Da wir in mCont eine Referenz gespeichert haben, können wir den Kreis jederzeit über diese Variable ansprechen. Andernfalls müssten wir schreiben: behaelter.kreis._x = behaelter.kreis._ width/2;

142

Kapitel 12  MovieClip-Klasse

Um ihn in der Mitte abzulegen, müssten Sie die Positionszuweisung folgendermaßen ändern: mCont._x = Stage.width/2;

mCont._y = Stage.height/2;

Natürlich lassen sich auf die gleiche Art alle möglichen Eigenschaften ansprechen und mit spezifischen Werten initialisieren. Alternativ können Sie direkt bei der Verwendung von attachMovie() ein init-Objekt mitgeben, in dem die gewünschten Angaben bereits enthalten sind. Das Objekt kann entweder direkt in diesem Aufruf definiert oder vorher eingerichtet und an attachMovie() übergeben werden. 22. Erweitern Sie den attachMovie()-Aufruf (Fettdruck):  mCont = mMC.attachMovie(„mcKreis“, „kreis“,1,{_x:50,_y:50});

23. Löschen Sie die danach folgenden beiden Zeilen mit der Zuweisung der x- und y-Position. Optisch bemerken wir keinen Unterschied, da die in der geschweiften Klammer übergebenen Werte denjenigen entsprechen, die wir in den beiden zusätzlichen Zeilen festgelegt hatten. Die Funktionalität bleibt die gleiche. Da die MovieClip-Klasse eine Unterklasse der Objekt-Klasse darstellt, können wir die so eingerichteten Objekteigenschaften auf den konkreten Movie­Clip übertragen. Achten Sie auf die Schreibweise innerhalb der geschweiften Klammern: Die Initialisierung der konkreten Werte für die x- und die yPosition erfolgt per Doppelpunkt und nicht mit einem Zuweisungsoperator. 24. Fügen Sie zwischen Deklaration und Initialisierung von mCont folgende Zeilen ein:

var oPos:Object = new Object(); oPos._x = oPos._y=50;

25. Ändern Sie den attachMovie()-Aufruf (Fettdruck):  mCont = mMC.attachMovie(„mcKreis“, „kreis“,1, oPos);

Das Ergebnis ist wieder identisch, aber diesmal haben wir ein eigenes Objekt mit den gewünschten Eigenschaften eingerichtet, das wir bei attachMovie() als Argument übergeben. Gegenüber vorher hat dies den Vorteil, dass man, wenn weitere Symbole an dieser Position eingefügt werden sollen, jedes Mal auf

das Objekt zugreifen kann, ohne es neu schreiben zu müssen. Wir können dem Objekt beliebig komplexe Eigenschaften, Ereignisse und Methoden zuordnen, um sie auf diese Weise automatisch auf alles zu übertragen, was wir dynamisch einfügen. 26. Fügen Sie zwischen die Zeilen mit der Initialisierung der x-Eigenschaft von oPos und dem Aufruf von attachMovie() folgende Ereignisdeklaration ein:

oPos.onPress = function(){



}

 trace(„Autsch!“);

Ein Mausklick auf den Kreis ruft nun ein empörtes „Autsch!“ im Nachrichtenfenster hervor. Trotz der großen Flexibilität, die wir damit gewinnen, hat dieses Vorgehen leider einen Nachteil, der in der Natur der Sache begründet ist. In Schritt 21 konnten wir mit dynamischen Werten, nämlich der Breite und Höhe des Kreises, arbeiten. Egal, welche konkreten Werte vorliegen, führt dieses Skript immer dazu, dass unser Kreis exakt in der linken oberen Ecke platziert wird. Verwenden wir statt dessen ein init-Objekt, ist zu dem Zeitpunkt, wo wir es einrichten, der Kreis noch nicht auf der Bühne vorhanden und damit sind seine Eigenschaften _width und _height undefiniert. Wir müssen dem Objekt also notgedrungen konkrete Werte (wie in unserem Fall jeweils die 50) mit geben, was jedes Mal dann zu einer Korrektur des Codes zwingt, wenn wir händisch die Größe von mc­ Kreis modifizieren. Daran ändert sich nichts, wenn wir unmittelbar in attachMovie() wie in Schritt 22 ein solches Objekt einrichten. Denn erst nach Ausführung dieser Zeile existiert unser Kreis auf der Bühne, und erst dann lassen sich seine Breite und Höhe auslesen. Insofern bietet sich trotz unbestreitbarer Vorteile nicht immer die Verwendung eines solchen Objekts an. Wie die Wissenschaft herausgefunden hat, sind Kreise ausgesprochen gesellig. Wir wollen unserem Kreis daher einen Kollegen zur Seite stellen. 27. Fügen Sie am Ende des Skripts folgende Zeile ein:  mCont = mMC.attachMovie(„mcKreis“, „kreis2“, 2, {_x: oPos._x + 100, _y: oPos._y});

Ein zweiter Artgenosse schmiegt sich rechts an den ersten Kreis.

12.3  MovieClip-Methoden

Seine Einrichtung erfolgt analog zu derjenigen des ersten: Wir weisen mCont eine Referenz auf die neue Instanz zu, die per attachMovie() erzeugt wird. Der Eindeutigkeit halber erhält der neue Kreis einen vom vorhergehenden verschiedenen Instanznamen sowie eine andere Tiefe. Weisen wir den gleichen Instanznamen kreis zu, erhalten wir zwar keine Fehlermeldung, aber Flash weiß dann im Fall der Fälle nicht, welche Instanz konkret gemeint sei. Wir wären nicht mehr in der Lage, jeden der Kreise einzeln anzusprechen. Der zuletzt eingefügte würde einfach alle Befehle ignorieren. Weisen wir die gleiche Tiefe zu, wird dagegen der erste Kreis gnadenlos gelöscht. Sie können das gerne testen, indem Sie beim zweiten Einfügen die Tiefe von 2 auf 1 setzen. Der bedauernswerte Kreis in der linken oberen Ecke wird daraufhin verschwinden. Während wir beim ersten Mal das init-Objekt übergeben, verwenden wir beim zweiten Mal nur einige Eigenschaften des Objekts, nämlich die x-Position, die wir mit der Breite des vorher eingefügten Kreises verrechnen, sowie die y-Psoition. Hätten wir wie beim ersten Kreis einfach oPos übergeben, würden beide Kreise ununterscheidbar übereinander liegen. Wollen Sie an dieser Stelle nicht auf das onPressEreignis verzichten, können Sie es ebenfalls einfach zuweisen. 28. Ändern Sie den attachMovie()-Aufruf für den zweiten Kreis (Fettdruck):  mCont = mMC.attachMovie(„mcKreis“, „kreis2“, 2, {_x:oPos._x+100, _y:oPos._y, onPress:oPos.onPress});

Wir weisen dem onPress-Ereignis des neuen Kreises dasjenige des Objektes zu. Das oPos.onPress darf nicht mit runden Klammern abgeschlossen werden, da Flash ansonsten davon ausgeht, dass Sie das betreffende Ereignis unmittelbar ausführen wollen. In dem Fall würde uns direkt nach Start der Anwendung das Nachrichtenfenster ein überraschendes „Autsch!“ entgegen geschleudert, obwohl wir auf kein Objekt geklickt haben. Darüber hinaus würde kreis2 jeden Mausklick ignorieren, aber einen veränderten Cursor anzeigen, da wir, wenn auch fehlerhaft, ein onPress zugewiesen haben. Übrigens ist es beim zweiten Kreis durchaus möglich, mit dynamischen Werten zu arbeiten, denn nun ist die Kreisbreite durch den vorher eingefügten Movie­Clip bekannt.

143

29. Ändern Sie den attachMovie()-Aufruf für den zweiten Kreis (Fettdruck):  mCont = mMC.attachMovie(„mcKreis“, „kreis2“, 2, {_x:oPos._x+mCont._ width, _y:oPos._y, onPress:oPos. onPress});

Zur Berechnung der korrekten horizontalen Position verwenden wir die Breite des ersten Kreises, auf den nach wie vor eine Referenz in mCont gespeichert ist. Diese wird erst überschrieben, sobald der zweite Kreis eingefügt wurde. Wahre Geselligkeit erschöpft sich nicht in einer Zweierbeziehung. Je mehr, desto besser. Wir wollen beispielsweise 5 Kreise einblenden. Würden wir wie bisher vorgehen, müssten Sie das Skript mehrfach kopieren und einfügen, was eine ausgesprochen mühsame und fehleranfällige Vorgehensweise ist. Aus Gründen der Übersichtlichkeit wollen wir mit einer neuen Datei arbeiten. 1. Erstellen Sie eine Standarddatei (oder: löschen Sie das komplette Skript in der vorher verwendeten Datei und fahren Sie mit Schritt 5 fort). 2. Zeichnen Sie einen Kreis (100 × 100). Die Ebene, auf der Sie ihn erstellen, spielt keine Rolle. 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Registrierungspunkt mittig). Dabei können Sie auch direkt einen Verknüpfungsnamen zuweisen (mcKreis). Sollten Sie die entsprechende Option nicht sehen, versteckt sie sich unter der rechts unten im Fenster angezeigten Schaltfläche „Erweitert. 4. Löschen Sie den Kreis in der Hauptzeitleiste, da wir ihn per Skripting einfügen wollen. 5. Weisen Sie actions folgendes Bildskript zu: //-------------- vars –-------------

 var mMC:MovieClip = this.createEmpty­ MovieClip(„behaelter“, 1); var mCont:MovieClip;

//----------- functions –----------- function init(pNum:Number):Void {

 for (var i:Number = 0; i
 mCont._x = i*mCont._width+mCont._ width/2; mCont._y  = Math.floor(Math. random()*300)+mCont._height/2;

144

} }

//------------- aufruf –------------ init(5);

Es werden fünf Objekte horizontal nebeneinander, aber an beliebiger vertikaler Stelle eingefügt. Zunächst legen wir einen Variablen-Block an, in dem notwendige Variablen deklariert und teilweise mit konkreten Werten initialisiert werden. Es handelt sich dabei um den Behälter, in den wir die übrigen Objekte einfügen wollen, sowie um eine noch nicht initialisierte Variable, die später sukzessive alle Objekte referenziert. Im Funktions-Block legen wir eine parametrisierte init()-Funktion fest, die alles zur späteren Verwendung vorbereitet. In unserem Fall handelt es sich bei der Vorbereitung allerdings lediglich um das Einblenden von Objekten ohne weitere Funktionalität. In einer Schleife, deren Anzahl an Durchläufen durch den zu übergebenden Parameter definiert wird, führen wir drei Aktionen aus:

• Der Variablen mCont weisen wir eine Referenz auf

einen in mMC eingefügten MovieClip mit dem Verknüpfungs- bzw. Exportnamen „mcKreis“, einem dynamisch zusammengesetzten Instanznamen, bestehend aus „kreis“ zuzüglich der Zählvariablen i, und einer an i gebundenen Tiefe. Im ersten Durchlauf lautet der Instanzname kreis0, die Tiefe liegt bei 0. Im nächsten Durchlauf erhöht sich i aufgrund des Inkrements im Schleifenkopf auf 1, so dass der nächste Instanzname kreis1 lautet und die nächste Tiefe bei 1 liegt. Dies wiederholt sich solange, bis 5 Objekte auf der Bühne vorliegen. • Unmittelbar nach dem Einfügen eines Objektes setzen wir dessen horizontale Position auf ein Vielfaches von dessen Breite zuzüglich seiner halben Breite. Am Anfang beträgt i 0, so dass wir mit konkreten Werten folgende Berechnung erhalten: 0 * 100 + 50, was eine x-Position von 50 ergibt. Beim zweiten Schleifendurchlauf beträgt i 1, was durch die Berechnung 1 * 100 + 50 zu einer x-Position von 150 führt. Der zweite Kreis wird also horizontal unmittelbar neben dem ersten positioniert. Alle weiteren Kreise werden jeweils um den gleichen Betrag nach rechts versetzt. • Die vertikale Position ermitteln wir diesmal unabhängig von der Zählvariablen i. Wir verwenden

Kapitel 12  MovieClip-Klasse

jeweils einen Zufallswert, der zwischen 0 und 299 liegt, zuzüglich der halben Objekthöhe, so dass kein Kreis am oberen Rand über die Bühne hinausragt. Der kleinstmögliche Wert beträgt damit 50, der größtmögliche 349. Abschließend erfolgt der Aufruf von init(), wobei das Argument 5 übergeben wird. Diese Zahl legt die Anzahl der Objekte fest. Bei fünf kontaktfreudigen Kreisen bleibt alles noch recht überschaubar. Ganz anders sieht es aus, wenn zusätzlich Dreiecke, Rechtecke und andere Gesellen die Bühne betreten – oder, schlicht formuliert, sich die Anzahl der dynamisch eingefügten Objekte drastisch erhöht. Dann läuft man Gefahr, den Überblick zu verlieren und weist schnell mal eine Tiefe zu, die bereits vorher vergeben worden ist. Das führt zu einem ungewollten Überschreiben des betreffenden Objekts. Abhilfe schafft die Methode getNextHighest­ Depth(). 6. Ändern Sie innerhalb der Schleife das zweite und dritte Argument der attachMovie()-Methode (Fettdruck):  mCont = mMC.attachMovie(„mcKreis“, „kreis“+ mMC.getNextHighestDepth(), mMC.getNextHighestDepth());

Anstatt für die Tiefe einen konkreten Wert zu übergeben, lassen wir Flash ermitteln, welcher Wert zulässig ist. Die Methode gibt den jeweils nächst höheren, noch nicht belegten Wert, beginnend bei 0, zurück. Sie bezieht sich immer auf die konkrete Zeitleiste, die wir als Objekt dem Aufruf der Methode voranstellen. Im vorliegenden Beispiel wird also nur nach einer neuen Tiefe innerhalb von mMC gesucht, was nichts mit Tiefen in anderen Zeitleisten zu tun hat. So ist es möglich, dass unsere Methode in Bezug auf mMC den Wert 70 zurück gibt, weil auf den Tiefen 1 bis 69 bereits Objekte liegen, während in der Hauptzeitleiste die nächst höhere Tiefe vielleicht 2 beträgt. Ebenfalls mit Hilfe der Tiefe sorgen wir für eindeutige Instanznamen. In vielen Fällen ist das die bequemste und zugleich sicherste Methode, um Fehler bei der Tiefe zu vermeiden. Sollten Sie bei einzelnen Objekten gezielt die Tiefe ändern wollen, haben Sie die Möglichkeit, die betreffenden Werte nachträglich sowohl abzufragen wie auch gezielt zu setzen.

12.3  MovieClip-Methoden

7. Fügen Sie innerhalb der Schleife unmittelbar nach der Zuweisung der y-Position folgende Zeilen ein: mCont.onPress = tiefe;

8. Fügen Sie im Funktions-Block nach der Deklaration von init() folgende Definition ein: function tiefe(){

 trace(„Die Tiefe von „ + this._name + „ beträgt: „ + this.getDepth()); }

Klicken Sie beim Testen auf die Objekte, geben Sie Auskunft über ihre Tiefe. Ein Klick auf den letzten Kreis ergibt beispielsweise folgende Ausgabe im Nachrichtenfenster: Die Tiefe von kreis4 beträgt: 4 Wir weisen jedem in mCont referenzierten Movie­ Clip ein onPress-Ereignis zu, so dass bei Mausklick im Nachrichtenfenster der Name des aktivierten Objekts und dessen Tiefe ausgegeben wird. Wenig überraschend entspricht die Tiefe jedes Mal dem Suffix des Instanznamens, also kreis0 liegt auf 0, kreis1 auf 1 usw. Da wir vor den Kreisen kein anderes Objekt in mMC einfügen, beträgt die erste dort verfügbare Tiefe 0, ein Wert, der zufälligerweise auch mit dem ersten Wert unserer Zählvariable i übereinstimmt. Warum dann die ganze Mühe mit dem soviel längeren getNextHighestDepth() anstelle des knackig-kurzen i? 9. Fügen Sie ganz am Ende des Skripts einen zweiten Aufruf von init() ein: init(5);

Zehn prächtige Kreise begrüßen Sie auf dem Screen, da die Funktion init() zweimal hintereinander mit dem gleichen Argument aufgerufen wird. Wir können alle 10 Kreise sehen, weil jeder eine eigene, eindeutige Tiefe erhält. Hätten wir dagegen wie zuvor in der init()-Funktion die Tiefe mit i festgelegt, stünden nur die Werte von 0 bis 4 zur Verfügung – was naturgemäß für 10 Objekte nicht ausreicht, da jeder Wert dann zweimal vorkommt. Sie können das testen, indem Sie vorübergehend innerhalb der init()-Funktion das mMC.getNextHighestDepth() jeweils durch i ersetzen. Dann bleiben nur 5 Kreise auf der Bühne übrig. Wenn sich viele Objekte einen relativ begrenzten Platz teilen müssen, ist es unvermeidbar, dass sie

145

sich überlappen. Mitunter benötigen wir dann eine Möglichkeit, auf User-Interaktion das unten liegende Objekt in den Vordergrund zu holen (ein konkretes Beispiel findet sich im Workshop „Spiele“, Abschnitt „Puzzle“). 10. Fügen Sie in der Deklaration von tiefe() nach dem trace()-Befehl folgende Zeilen ein:  this.swapDepths(mMC.kreis0);

 trace(„Neue Tiefe: „+this.getDepth());

Wenn Sie einen beliebigen Kreis anklicken, wird er seine Tiefe mit derjenigen des ersten Kreises tauschen. Die Methode swapDepths() kann auf zwei Arten verwendet werden:

• mc.swapDepths(andererMC):

Die Tiefe des angesprochenen MovieClips wird mit derjenigen getauscht, der als Argument im Klammerausdruck steht. • mc.swapDepths(Zahl): Die Tiefe des angesprochenen MovieClips wird auf den Wert gesetzt, der als Argument im Klammerausdruck steht. Wir haben uns für die erstgenannte Variante entschieden, aber Sie können gerne die zweite ausprobieren, indem Sie im Variablen-Block eine entsprechende Variable initialisieren und sie beim Aufruf von swap­ Depths() in der Klammer übergeben. Alternativ dazu lassen sich dynamische Inhalte erzeugen, indem wir ein bereits bestehendes Objekt duplizieren. Dabei spielt es keine Rolle, ob dieses Objekt händisch auf die Bühne abgelegt oder per attachMovie() eingefügt wurde. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects an beliebiger Position einen roten Kreis (100 × 100). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis1, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu: kreis1.onPress = function(){

 this.duplicateMovieClip(„kreis2“,1); }

Momentan sehen Sie nach einem Klick auf kreis1 noch nichts. Tatsächlich führt Flash Ihren Befehl aus, dupliziert also denjenigen MovieClip, dem Sie die Methode duplicateMovieClip() zugeordnet ha-

146

ben, in der Zeitleiste, in der er sich befindet. Aber da keine Positionsangaben vorliegen, setzt Flash das Duplikat einfach an die Stelle des Originals, so dass sich beide vollständig überlappen.. 5. Fügen Sie unmittelbar vor der schließenden Klammer ein: k reis2._x = Math.floor(Math. random()*Stage.width); k reis2._y = Math.floor(Math. random()*Stage.height);

Jetzt erhält die Kopie eine zufällige x- und y-Position, hüpft also scheinbar bei jedem Klick über den Screen. Wenn Sie versuchen, auf die Kopie zu klicken, werden Sie feststellen, dass keine Reaktion erfolgt. Das Duplikat übernimmt zwar die Eigenschaften des Originals, nicht jedoch dessen Ereignisse. Wäre das Ihr Ziel, müssten Sie es explizit skripten. 6. Ersetzen Sie das bisherige Skript vollständig durch: //------------- vars –-------------- var mMC:MovieClip;

var nTiefe:Number = 1;

//---------- functions –------------ kreis1.onPress = function() {

 mMC = this.duplicateMovieClip („kreis“+nTiefe, nTiefe); mMC._x  = Math.floor(Math. random()*Stage.width); mMC._y  = Math.floor(Math. random()*Stage.height);

 mMC.onPress = this.onPress;  nTiefe++; };

Wenn Sie testen, können Sie per Klick auf einen beliebigen Kreis diesen duplizieren. Jedes Duplikat übernimmt also das dem Original zugewiesene onPressEreignis. Im Variablen-Block legen wir mMC an, um später jeweils eine Referenz auf das Duplikat aufzunehmen. Die Variable nTiefe sorgt dafür, dass wir bei jedem Kopiervorgang jeweils eine eindeutige Tiefe zuweisen können. Statt dessen wäre es natürlich auch möglich, mit getNextHighestDepth() zu arbeiten. Bei jedem Klick duplizieren wir den angeklickten

Kapitel 12  MovieClip-Klasse

Movie­Clip und weisen dem Duplikat eine Zufallsposition zu. Der Instanzname des Duplikats muss dynamisch gebildet werden, da er jedes Mal wechselt. Der Einfachheit halber binden wir ihn, wie wir es bereits bei der attachMovie()-Methode kennen gelernt haben, an die für die Tiefe zuständige Variable. Da diese immer einmalig und eindeutig sein muss, erzeugen wir so auch eindeutige Namen. Das onPress-Ereignis des angeklickten Clips kopieren wir anschließend in das onPress-Ereignis des Duplikats. Dadurch verhalten sich alle auf der Bühne vorhandenen Objekte exakt gleich. Abschließend inkrementieren wir nTiefe. Im Laufe der bisherigen Kapitel haben Sie sicher den einen oder anderen roten Kreis näher kennen gelernt. So angenehm deren Natur auch sein mag, so verspürt man dennoch von Zeit zu Zeit den Wunsch, sie wieder los zu werden. Dazu stellt Flash eine ausgesprochen simpel zu verwendende Methode zur Verfügung. 7. Erweitern Sie das onPress-Ereignis unmittelbar nach dem Inkrement von nTiefe: this.onPress = function(){  this.removeMovieClip(); }

Wie zuvor erzeugt ein Klick auf einen MovieClip eine Kopie. Wenn Sie dann jedoch ein zweites Mal auf denselben Clip klicken, verschwindet er  – mit Ausnahme des ersten, händisch eingefügten Kreises. Bei einem Mausklick ersetzen wir das bestehende, für den Kopiervorgang verantwortliche onPress-Ereignis durch ein anderes onPress, das lediglich die removeMovieClip()-Methode aufruft. Ihr übergeben wir als Ziel das angeklickte Objekt, was zu seinem Löschen führt. Nur der erste Kreis erweist sich als ausgesprochen hartnäckig, er lässt sich scheinbar nicht von der Bühne entfernen. Die removeMovieClip()Methode löscht laut Flash-Hilfe nur Objekte, die mit attachMovie(), createEmptyMovieClip() und duplicateMovieClip() erzeugt wurden. Das ist jedoch nicht ganz korrekt. Tatsächlich wirkt sie sich unabhängig von deren Erzeugung nur auf MovieClips aus, deren Tiefe >= 0 ist. Würden wir Clips dynamisch auf einer negativen Tiefe erzeugen  – was durchaus möglich ist –, dann bliebe ein removeMovieClip() folgenlos.

12.3  MovieClip-Methoden

8. Fügen Sie innerhalb des gerade zugewiesenen onPress-Ereignisses unmittelbar vor dem Aufruf von removeMovieClip() ein: this.swapDepths(0);

Selbst der sich einst so tapfer widersetzende erste Kreis gewinnt an Einsicht und weicht beim wiederholten Mausklick. Wir setzen einfach jeden angeklickten Clip auf eine Tiefe, von der wir wissen, dass sie nicht negativ ist und sich dort kein anderes Objekt befindet (ansonsten würden wir dieses Objekt durch den Tiefentausch unbeabsichtigt löschen). Damit sind wir in der Lage, die removeMovieClip()-Methode zu verwenden. Sowohl beim Erzeugen wie beim Löschen spielen negative und positive Tiefen eine wichtige Rolle. Die Entwickler von Flash haben dies bewusst eingebaut, um strikt zwischen händisch und dynamisch erstellten Elementen trennen zu können. Insofern ist es nur logisch, dass removeMovieClip() ausschließlich bei positiven Tiefen verwendet werden kann. Sie sollten sich daher an dieser Konvention orientieren und alle dynamischen Elemente auf positiven Tiefen einfügen. Damit vermeiden Sie das unbeabsichtigte Löschen von zuvor per Hand eingefügten MovieClips. Wenn Sie dennoch einmal eine negative Tiefe zuweisen müssen, dann wählen Sie möglichst einen Wert irgendwo zwischen –1 und –1000. Damit stehen ihnen einerseits genügend Werte zur Verfügung, andererseits laufen Sie garantiert nicht Gefahr, ein bestehendes Objekt zu überschreiben.

12.3.3 Drag and Drop Zur Interaktion mit Objekten gehört ein klassisches Verhalten, dass wir von nahezu jeder Applikation gewohnt sind, nämlich das Verschieben bzw. drag and drop. Ob als Fenster, das wir hin- und herschieben können, als Icon, das wir auf ein anderes Symbol ziehen oder als Objekt, das permanent am Cursor klebt – überall steckt die gleiche Funktionalität dahinter. Sie lässt sich in Flash mit einer eigenen Methode nachbilden. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects an beliebiger Position ein blaues Quadrat (80 × 80).

147

3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcQuadrat, Instanzname quadrat, Registrierungspunkt mittig). 4. Zeichnen Sie auf objects an beliebiger Position ein orangenes Dreieck (80 × 80). Achten Sie darauf, dass es das Quadrat weder überlappt noch berührt. 5. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcDreieck, Instanzname dreieck, Registrierungspunkt mittig). 6. Weisen Sie actions folgendes Bildskript zu:  quadrat.onPress = dreieck. onPress=function () {  this.startDrag(); };

 quadrat.onRelease = dreieck. onRelease=function () {  this.stopDrag(); };

Wenn Sie auf eines der Objekte klicken, können Sie es bei gedrückter Maustaste über den Screen verschieben. Beim Loslassen bleibt es an der Stelle liegen, an der das onRelease-Ereignis eintritt. Die Methoden startDrag() und stopDrag() implementieren ein Ziehen, bei dem die Position des aktivierten Objekts automatisch and die Mausposition gebunden wird. Das einzige, das wir definieren müssen, ist das Ereignis, wann dieses Verhalten eintreten soll. In unserem Fall wählen wir ein onPress für den Beginn und ein onRelease für das Ende des Ziehvorgangs. Das entspricht der üblichen Vorgehensweise, aber prinzipiell können Sie jede Art von Ereignis wählen. Vermutlich haben Sie recht vernünftig und ohne große Hektik eines der Objekte über den Bildschirm gezogen. Es gibt jedoch keine Garantie, dass sich der Benutzer Ihrer Applikation ebenso verhält. Ein nervöser Finger kann nämlich zu einem überraschenden Ergebnis führen. 7. Testen Sie erneut, indem Sie ein Objekt anklicken, anschließend bei gedrückter Maustaste heftig hinund herschütteln und plötzlich loslassen. Das von Ihnen aktivierte Objekt wird nach dem Loslassen mehr Anhänglichkeit beweisen als Ihnen vermutlich lieb ist: Es bleibt am Mauszeiger kleben, obwohl die Taste nicht mehr gedrückt wird. Durch das heftige

148

Schütteln kann es vorkommen, dass sich der Mauszeiger beim Loslassen außerhalb des MovieClips befindet. Dort kann er jedoch kein onRelease-Ereignis mehr wahrnehmen. Fehlt dieses Ereignis, wird auch die stopDrag()-Methode nicht aufgerufen, so dass Flash weiterhin das Ziehverhalten ausführt. 8. Fügen Sie ein onReleaseOutside-Ereignis ein:  dreieck.onReleaseOutside = quadrat. onReleaseOutside=function () {  this.stopDrag(); };

Selbst ein aufgrund des nervösen Fingers hyperaktives Objekt wird jetzt auf Wunsch brav innehalten. Es spielt keine Rolle mehr, ob sich der Cursor beim Loslassen über dem aktivierten Objekt befindet oder nicht. Entscheidend ist nur das Auftreten des onPress-Ereignisses, das zwangsläufig wahrgenommen wird, sonst könnte ja kein Ziehen erfolgen. Danach wird jedes Loslassen der Maustaste so interpretiert, als beziehe es sich auf den aktivierten Clip. Aufgrund der Reihenfolge, in der wir die Objekte erstellt haben, befindet sich das Quadrat hinsichtlich seiner Tiefe unter dem Dreieck. Wenn wir das Quadrat ziehen und dabei das Dreieck überlappen, entsteht ein merkwürdiger Eindruck, der unserer Alltagserfahrung widerspricht. Ein Objekt, das wir bewegen, tritt gegenüber den übrigen Objekten immer in den Vordergrund. Daher sollten Sie bei drag and drop-Verhalten mit Hilfe von swapDepths() dafür sorgen, dass das gezogene Objekt vor den anderen liegt. In diesem Beispiel orientiert sich das Ziehverhalten an der Position, an der wir auf den MovieClip klicken. Mitunter ist es jedoch erwünscht, dass sich das Objekt mit seinem Mittelpunkt am Cursor ausrichtet. 9. Erweitern Sie die startDrag()-Methode (Fettdruck): this.startDrag(true);

Bei einem Klick springt der aktivierte MovieClip mit seinem Registrierungspunkt an die Mausposition, so dass wir es exakt an seiner Mitte anfassen und ziehen können. Die startDrag()-Methode lässt sich wie zuvor ohne und mit Argumenten aufrufen. Als erstes Argument können wir einen Bool’schen Wert übergeben, der Flash anweist, den Registrierungspunkt an die Maus zu binden. Verzichten wir auf das Argument,

Kapitel 12  MovieClip-Klasse

geht Flash automatisch von einem false aus und wir erhalten das Verhalten, das wir oben kennen lernten. 10. Erweitern Sie die startDrag()-Methode (Fettdruck):  this.startDrag(true, 40, 40, 360, 300);

11. Fügen Sie ganz am Anfang des Skripts ein:

quadrat._x = quadrat._y = 80;

dreieck._x = dreieck._y = 180;

Die Objekte lassen sich jetzt nur noch innerhalb eines eng definierten Bereichs ziehen. Beim Aufruf der startDrag()-Methode übergeben wir die Koordinaten eines gedachten Rechtecks, dessen linke obere Ecke bei 40,40 und rechte untere Ecke bei 360,300 liegt. Die Koordinaten beziehen sich jeweils auf die Zeitleiste, in die wir das ziehbare Objekt eingefügt haben. Das Ziehen erfolgt solange, wie sich der Registrierungspunkt des jeweils aktivierten MovieClips in diesem Rahmen befindet. Andernfalls stoppt die Bewegung automatisch. Um zu gewährleisten, dass sich die Objekte vor einem Mausklick nicht außerhalb der Grenzen befinden, haben wir ihre Position in unserem Beispiel per Skripting festgelegt. Zwar würde das Ziehen auch ohne diese beiden Zeilen funktionieren, aber es sähe merkwürdig aus, weil die angeklickten Objekte einen Sprung in das gedachte Rechteck machen. Die Begrenzung ermöglicht es uns, beispielsweise schnell einen Slider zu programmieren. Im Gegensatz zu startDrag() lässt stopDrag() keine Übergabe von Argumenten zu. Die startDrag()- bzw. stopDrag()-Methode kann jeweils nur für einen einzigen MovieClip aufgerufen werden. Wir wären damit beispielsweise nicht in der Lage, bei Klick auf das Dreieck gleichzeitig auch das Quadrat zu ziehen. Ein derartiges Verhalten müsste man mit onEnterFrame, setInterval() oder onMouseMove realisieren.

12.3.4 Kollision Wenn Objekte bewegt werden, kann es wichtig sein, herauszufinden, ob sie irgendwo mit anderen Objekten kollidieren. Das bekannteste Beispiel stellen zweifelsohne Spiele dar, in denen Kollisionen eine

12.3  MovieClip-Methoden

149

enorme Rolle zukommt. So geht es in jeder Art von „Ballerspiel“ darum, einerseits irgendwelchen Objekten auszuweichen und andererseits Objekte zu zerstören. Dabei testet man jedes Mal, ob eine Kollision stattgefunden hat. Oder es müssen in einem Lernprogramm Objekte einander per drag and drop zugeordnet werden. In diesen und zahlreichen anderen Fällen kommt zumeist die hitTest()-Methode zum Einsatz.

5. Erweitern Sie das onRelease/onReleaseOutside-Ereignis nach der stopDrag()-Methode:

1. Sie können an dieser Stelle die Flash-Datei aus der vorhergehenden Übung verwenden. Dann fahren Sie mit Schritt 3 fort. Ansonsten erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects wie in der vorhergehenden Übung, Schritte 2 bis 5, ein blaues Quadrat (80 × 80, MovieClip, Bibliotheksname mcQuadrat, Instanzname quadrat, Registrierungspunkt mittig) und ein orangenes Dreieck (80 × 80, MovieClip, Bibliotheksname mcDreieck, Instanzname dreieck, Registrierungspunkt mittig). Achten Sie darauf, dass sich die Objekte nicht überlappen. 3. Weisen Sie actions folgendes Bildskript zu:

 trace(„Kollision!“);

dreieck._x = 80;

dreieck._y = 100;

 quadrat._x = dreieck._x+dreieck._ width * 2; quadrat._y = dreieck._y;

quadrat.onPress=function () {  this.startDrag(); };

 quadrat.onRelease = quadrat. onReleaseOutside=function () {  this.stopDrag(); };

Die Objekte werden per Skript im linken oberen Bildschirmbereich angeordnet. Das Quadrat befindet sich auf gleicher Höhe wie das Dreieck, aber um dessen Breite nach rechts versetzt, um etwas Abstand zwischen ihnen zu schaffen. Im Gegensatz zu vorher kann nur das Quadrat gezogen werden. 4. Erweitern Sie das onPress-Ereignis nach der startDrag()-Methode: this.onEnterFrame = kollision;

delete this.onEnterFrame;

6. Fügen Sie am Ende des Skripts folgende Deklaration ein: function kollision() {

 if (this.hitTest(dreieck)) { } }

Wenn Sie beim Testen das Quadrat horizontal auf das Dreieck ziehen, öffnet sich das Nachrichtenfenster und gibt ständig die Meldung „Kollision“ aus. Wenn wir herausfinden wollen, ob eine Kollision stattfindet, müssen wir zunächst überlegen, wann eine Kontrolle Sinn macht. In unserem Fall setzt eine Kollision logischerweise voraus, dass das Quadrat bewegt wird. Also müssen wir ab dem Augenblick, in dem auf das Quadrat geklickt wird, die Kontrolle durchführen. Das geschieht, in dem wir im onPressEreignis ein onEnterFrame-Ereignis einrichten, das permanent die Funktion kollision() ausführt. Wenn wir die Maustaste loslassen, erfolgt keine Bewegung mehr und die Kontrolle ist infolgedessen überflüssig. Daher löschen wir das onEnterFrameEreignis im onRelease-Ereignis. Die Funktion kollision() ruft die Methode hitTest() auf. Dieser Methode ordnen wir einen MovieClip zu, dessen Begrenzungsrechteck daraufhin getestet wird, ob es sich mit demjenigen des in der Klammer übergebenen MovieClips überschneidet. Das Schlüsselwort this bezieht sich in unserem Beispiel auf quadrat, dessen Begrenzungsrechteck auf Überlappungen mit dreieck kontrolliert wird. Die Methode gibt true zurück, wenn sie sich berühren, andernfalls false. Sobald eine Berührung festgestellt wird, erfolgt der Aufruf des trace()-Befehls und damit die Ausgabe im Nachrichtenfenster. Zweifelsohne ist das eine ausgesprochen bequeme Methode, um eine Kollision zu überprüfen. Sie hat jedoch den schwerwiegenden Nachteil, mit Begrenzungsrechtecken zu arbeiten. Denn wenn Sie das Quadrat nicht horizontal, sondern leicht nach oben versetzt auf das Dreieck ziehen, erfolgt bereits eine aufgeregte Kollisionsmeldung, noch bevor sich die Objekte optisch berühren, wie in Abbildung 27 zu sehen.

150

Abbildung 27:  Kollisionserkennung mit hitTest()

Solange Sie mit Objekten arbeiten, die annähernd eine rechteckige Form besitzen, stellt das kein Problem dar. Doch wie oft kommt das tatsächlich vor? Es dürfte wesentlich häufiger der Fall sein, dass Ihre Objekte eine komplexere Form besitzen, und dann versagt diese Methode. Zwar gibt es noch eine alternative Verwendung von hitTest(), bei der wir einen Punkt gegen ein Begrenzungsrechteck kontrollieren können. 7. Fügen Sie unmittelbar vor der Deklaration von kollision() ein: dreieck.onMouseMove = kollisionMaus;

8. Fügen Sie am Ende des Skripts ein: function kollisionMaus() {

 if (this.hitTest(_xmouse, _ymouse, true)) {  trace(„Mauskollision!“); } }

Sobald Ihre Maus die Grafik berührt, meldet das Nachrichtenfenster „Mauskollision!“. Wir weisen dem Dreieck ein onMouseMove-Ereignis zu, das bei jeder Mausbewegung die Funktion kollisionMaus() aufruft. In dieser Funktion kontrollieren wir, ob die Form von dreieck unabhängig von dessen Begrenzungsrechteck mit dem Mauszeiger kollidiert. Anders als zuvor übergeben wir als Argument in den Klammern einen Punkt, bestehend aus der x-Position und der y-Position der Maus sowie den Bool’schen Wert true, damit Flash weiß, dass wir einen Punkt und eine Form, aber kein Begrenzungsrechteck testen wollen. Wir haben in Flash also nur die Möglichkeit, zwei Begrenzungsrechtecke oder einen läppischen Punkt und eine Form zu testen – aber gerade die wichtigste Möglichkeit, nämlich zwei Formen oder zumindest

Kapitel 12  MovieClip-Klasse

eine Form und ein Begrenzungsrechteck zu testen, gibt es nicht. Das ist um so erstaunlicher angesichts der Tatsache, dass ein Autorensystem wie beispielsweise Director genau dies schon seit Jahren beherrscht. Die geplagten Flash-Entwickler haben sich daher einige workarounds einfallen lassen, zu denen die Entfernungsberechnung bei Kreisen, das Auslesen der Farbwerte oder die Verwendung zahlreicher Punkte, um eine Form halbwegs abbilden zu können, zählen.

12.3.5 Maskierung Neben den oben erwähnten Eigenschaften bezieht sich auch eine wichtige Methode auf die Sichtbarkeit von MovieClips, nämlich setMask(). Damit lässt sich genauso wie wir es von der Autorenumgebung her gewohnt sind, ein Objekt als Maske definieren, mit dem wir ein darunter befindliches Objekt freilegen können. Diese Technik kommt bei vielen Grafik-Effekten und Spielen zum Einsatz. 1. Erstellen Sie eine Standarddatei. 2. Stellen Sie die Hintergrundfarbe auf schwarz. 3. Importieren Sie eine beliebige Grafik (Größe z. B. 320 × 240, z. B. erdhorn.jpg) in die Bibliothek. 4. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcBild). 5. Fügen Sie die importierte Grafik im Koordinatenursprung von mcBild ein. 6. Erstellen Sie einen weiteren leeren MovieClip (Bibliotheks- und Verknüpfungsname mcMaske). 7. Zeichnen Sie dort, beginnend im Koordinatenursprung, ein Rechteck beliebiger Farbe (100 × 80) ohne Rahmen. 8. Kehren Sie zur Hauptzeitleiste zurück. 9. Fügen Sie in actions folgendes Bildskript ein:  this.attachMovie("mcBild","bild",this .getNextHighestDepth());  this.attachMovie("mcMaske","maske", this.getNextHighestDepth());  bild._x = Stage.width/2-bild._ width/2; bild._y = 50;

maske._x = bild._x + 40; maske._y = bild._y + 12; bild.setMask(maske);

12.3  MovieClip-Methoden

Falls Sie die angegebene Grafik verwendet haben, sehen wir im Bildausschnitt den Kopf eines nach rechts schauenden Erdhorns. Wir fügen dynamisch zwei MovieClips ein:

• Die Grafik, die wir maskieren wollen. • Das Objekt, das als Maske dient. Wie bei händisch

erstellten Masken spielt die Farbe der Füllung keine Rolle. Die zugewiesene Tiefe muss logischerweise höher sein als diejenige des zu maskierenden Objekts.

Bei der Positionierung beider MovieClips arbeiten wir hier mit willkürlichen Werten. Das Bild wird auf der Bühne horizontal mittig ausgerichtet. Diese Position errechnet sich aus der halben Bühnenbreite, von der wir aufgrund des links angeordneten Registrierungspunkts noch die halbe Bildbreite subtrahieren müssen. Als y-Wert weisen wir einfach 50 zu. Die Maske muss sich natürlich auf diesem Bild befinden. Ihre Position orientiert sich daher an dessen Koordinaten. Dabei müssen Sie darauf achten, den korrekten Ausschnitt freizulegen, der sich in unserem konkreten Beispiel aufgrund des Bildmotivs – Charakterkopf eines Erdhorns – ergibt. Bei einem anderen Motiv müssen Sie die Werte natürlich anpassen. Eine weiche Maske ist ebenfalls möglich. 10. Weisen Sie mcMaske im Symbolbearbeitungsmodus einen linearen Farbverlauf von schwarz (100 % Deckkraft) zu schwarz (0 % Deckkraft) zu. 11. Drehen Sie den Verlauf mit Hilfe des Füllungstransformationswerkzeugs um 90  Grad, so dass der transparente Bereich am unteren, der nichttransparente am oberen Ende liegt. 12. Ergänzen Sie das Skript unmittelbar vor dem Aufruf von setMask() um folgende Zeile:  maske.cacheAsBitmap = bild.cacheAsBitmap = true;

Jetzt blendet der Charakterkopf unseres Tieres von oben nach unten aus. Testen Sie dasselbe einmal mit einer kreisförmigen Maske und einem radialen Verlauf. Der Eigenschaft cacheAsBitmap können die Werte true und false zugewiesen werden. Ist sie true, speichert Flash intern eine Bitmap der Vektorgrafik, was sich in vielen Fällen positiv auf die generelle Performance auswirkt. In unserem Fall ermöglicht sie es, Verläufe mit wechselnder Deckkraft

151

auf eine Maske zu übertragen und damit Bildbereiche nur partiell freizulegen. Behält diese Eigenschaft den vom Programm vorgegebenen Standardwert false, behandelt Flash eine als Maske definierte Grafik so, als sei ihre Deckkraft auf den Wert 100 % gesetzt, wodurch natürlich jegliche Abstufung der Deckkraft verloren geht.

12.3.6 Ausdehnung und Koordinaten Wie wir mehrfach gesehen haben, besitzen Movie­ Clips (und andere Objekte wie beispielsweise Schaltflächen) eine Ausdehnung, die sich in den Eigenschaften _width, _height, _xscale und _yscale widerspiegelt. Flash gibt uns einen visuellen Hinweis auf diese Ausdehnung, wenn wir einen MovieClip anklicken (kein Doppelklick!), indem das sogenannte Begrenzungsrechteck angezeigt wird, wie bereits im Abschnitt über Kollisionen gesehen. Dabei handelt es sich um ein Rechteck, das vollständig den Inhalt eines Symbols umschließt. Dieses Rechteck kann von uns nicht gesetzt werden, sondern richtet sich ausschließlich nach dem vorliegenden Content. Wir können aber seine Ausdehnung auslesen, was insbesondere dann wichtig sein kann, wenn sich der Registrierungspunkt weder in der linken oberen Ecke noch irgendwo in der Mitte befindet. Die Ausdehnung eines MovieClips lässt sich mit den Methoden getBounds() und getRect() auslesen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksname mcRecht). 3. Zeichnen Sie an beliebiger Position ein blaues Rechteck (140 × 80, Linienstärke 2). 4. Weisen Sie ihm die Position –40,-20 zu. 5. Kehren Sie zur Hauptzeitleiste zurück. 6. Fügen Sie das Rechteck auf der Ebene objects an beliebiger Position ein. 7. Weisen Sie ihm den Instanznamen recht zu. 8. Weisen Sie actions folgendes Bildskript zu: //------------- vars –-------------- var oBounds:Object; var oRect:Object;

//------------ functions –-----------

152

Kapitel 12  MovieClip-Klasse

function init() {

 recht._x = 120;  recht._y = 80;

 oBounds = recht.getBounds(this);  oRect = recht.getRect(this);  for (e in oBounds) {

 trace(„bounds „+e+“: „+oBounds[e]); }

 for (e in oRect) {

 trace(„oRect „+e+“: „+oRect[e]);

Abbildung 28:  Ergebnis von getBounds() bei verschiedenen Koordinatensystemen

}

_width), wird sie von getRect() ignoriert. Daher ist ein von getRect() zurück gegebenes Objekt im-

}

//----------- aufruf –---------------

• xMin: Der kleinste x-Wert (links). • xMax: Der größte x-Wert (rechts). • yMin: Der kleinste y-Wert (oben). • yMax: Der größte y-Wert (unten).

mer kleiner oder maximal gleich demjenigen, das wir bei getBounds() erhalten. Da in Flash verschiedene Koordinatensysteme vorliegen, nämlich dasjenige der Hauptzeitleiste und dasjenige des MovieClips rechteck, müssen wir beim Aufruf der Methoden jeweils mitgeben, auf welches System wir uns beziehen wollen. In unserem Fall verwenden wir _root, übergeben als Argument also this. Ersetzen Sie es testweise durch recht, dann erhalten Sie im Nachrichtenfenster komplett andere Werte. Den gesamten Vorgang für beide Koordinatensysteme visualisiert Abbildung 28 am Beispiel von getBounds(). Wenn wir einen der Eckpunkte in beiden Koordinatensysteme benötigen, können wir einfach getBounds() oder getRect() mit jeweils verschiedenen Koordinatensystemen aufrufen. Falls wir jedoch von einem Punkt, der nicht mit den Eckpunkten zusammen hängt, die Koordinaten benötigen, können wir zwischen Koordinatensystemen hin- und herrechnen, indem wir die Methoden localToGlobal() und globalToLocal() verwenden. Mit local ist das Koordinatensystem des MovieClips gemeint, in dem sich der betreffende Punkt befindet, während sich global auf diejenige Zeitleiste bezieht, in der sich der MovieClip befindet. In unserem Fall entspricht global also der Hauptzeitleiste.

Diese vier Werte beschreiben zwei Punkte: Die linke obere Ecke (xMin, yMin) und die rechte untere Ecke (xMax, yMax) des Begrenzungsrechtecks. Während getBounds() die ein Objekt umgebende Linie mit einbezieht (vgl. o., die Ausführungen zur Eigenschaft

9. Öffnen Sie mcRecht im Symbolbearbeitungs­ modus. 10. Fügen Sie eine neue Ebene hinzu. 11. Zeichnen Sie dort an beliebiger Stelle einen weißen Kreis (10 × 10).

init();

Ausgabe im Nachrichtenfenster: bounds yMax: 141 bounds yMin: 59 bounds xMax: 221 bounds xMin: 79 oRect yMax: 140 oRect yMin: 60 oRect xMax: 220 oRect xMin: 80 Im Variablen-Block initialisieren wir zwei Variablen, um die entsprechenden Werte der Methoden getBounds() und getRect() aufnehmen zu können. In der init()-Funktion positionieren wir das Rechteck an einer bestimmten Stelle, um später die ausgegebenen Werte besser nachvollziehen zu können. Anschließend weisen wir den Variablen die entsprechenden Methoden zu. Die Methoden geben bei Aufruf ein Objekt zurück, das jeweils vier Werte, bezogen auf das Begrenzungsrechteck des zugeordneten Movie­ Clips, enthält:

12.3  MovieClip-Methoden

12. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 13. Fügen Sie im Variablen-Block am Ende ein:

var oPunkt:Object;

14. Erweitern Sie die init()-Funktion unmittelbar nach der Zuweisung der x- und y-Position von recht:

recht.kreis._x = 50; recht.kreis._y = 40;

15. Kommentieren Sie die beiden for in-Schleifen aus, da wir sie für die aktuelle Übung nicht benötigen. 16. Fügen Sie danach, aber noch innerhalb der init()-Funktion, ein:  oPunkt = {x:recht.kreis._x, y:recht. kreis._x};

recht.localToGlobal(oPunkt);



trace(„y Global: „+oPunkt.y);



trace(„x Global: „+oPunkt.x);

Ausgabe im Nachrichtenfenster x Global: 170 y Global: 130 Für die Umrechnung der Punkte benötigen wir ebenfalls ein eigenes Object, das wir im Variablen-Block einrichten. Innerhalb der init()-Funktion sorgen wir zunächst für die gewünschte Positionierung. Wichtig ist dabei, das die gewählte Position nicht im Koordinatenursprung liegt – dann wäre eine Umrechnung in das globale Koordinatensystem natürlich witzlos, weil der betreffende Wert identisch mit demjenigen von mcRecht wäre. Statt dessen wählen wir einen willkürlichen Wert, der den Kreis innerhalb von mcRecht nach rechts unten verschiebt. Um eine Umrechnung zu erreichen, müssen wir zunächst die gewünschten Koordinaten in unserem Objekt speichern. Die Eigenschaften, die Sie mit den Werten belegen, dürfen dabei nicht frei gewählt werden. Sie müssen die Bezeichnungen x und y wählen. Andernfalls erhalten Sie nach der Berechnung fehlerhafte Werte (nämlich die Originalwerte). Die Umrechnung erfolgt über localToGlobal(), der wir als Argument das zuvor initialisierte Objekt übergeben. Als Rückgabewert erhalten wir die neuen Koordinaten, die der Position von recht.kreis auf der Hauptzeitleiste entsprechen.

153

Ob der Wert stimmt, lässt sich leicht nachprüfen. 17. Fügen Sie nach den beiden trace()-Befehlen folgende Zeilen ein:  trace(„x errechnet: „+(recht._ x+recht.kreis._x));  trace(„y errechnet: „+(recht._ y+recht.kreis._y));

Ausgabe im Nachrichtenfenster: x Global: 170 y Global: 120 x errechnet: 170 y errechnet: 120 Auf derjenigen Zeitleiste, auf der sich recht befindet, entspricht die Position von recht.kreis schlicht der Summe aus der Position von recht und der Position von kreis innerhalb von recht. Genau diese Summe berechnen wir innerhalb der trace()Befehle. Tatsächlich stimmt sie mit den Werten der localToGlobal()-Methode überein. Die umgekehrte Berechnung, nämlich globalToLocal(), macht an dieser Stelle natürlich keinen Sinn, da wir es bei den im Objekt oPunkt vorliegenden Werten ja schon mit lokalen Koordinaten zu tun haben.

12.4

Die Mutter aller MovieClips: _root (_level0)

Im Laufe dieses Kapitels haben Sie gesehen, welche enorme Bedeutung MovieClips zukommt. Aber den wichtigsten MovieClip von allen haben wir bisher eher am Rande erwähnt, nämlich _root selbst, also die Hauptzeitleiste. Sie ist gewissermaßen die Mutter aller MovieClips. Das können wir leicht testen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: trace(typeof(_root));

Ausgabe im Nachrichtenfenster: movieclip Mit der Funktion typeof() können wir uns den Datentyp eines Objekts angeben lassen, der im Fall von _root „movieclip“ lautet, sie stellt also eine Instanz der MovieClip-Klasse dar. Daher muss sie auch

154

über alle Eigenschaften etc. verfügen, die wir auf den vorangegangenen Seiten vorgestellt haben. Anders formuliert, können wir mit _root genau dieselben Dinge anstellen, zu denen wir unsere getreuen roten Kreise und blauen Rechtecke überredet haben. 3. Zeichnen Sie auf objects an beliebiger Stelle einen Kreis beliebiger Farbe (doch, er muss nicht rot sein, gönnen Sie sich diese Freiheit). 4. Zeichnen Sie auf objects an beliebiger Stelle ein Rechteck beliebiger Farbe. 5. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Registrierungspunkt links oben). 6. Fügen Sie am Ende des Skripts folgende Zeile ein: _root._visible = false;

Wenn Sie testen, verschwindet plötzlich der komplette Inhalt Ihres Flashfilms. Dabei spielt es übrigens keine Rolle, welcher Art dieser Inhalt ist, es muss sich also nicht unbedingt wie im Fall des Rechtecks um MovieClips handeln. Selbstverständlich stehen auch die anderen Eigenschaften zur Verfügung, etwa die Positionierung. Ersetzen Sie das bisherige Bildskript durch: _root.onMouseDown = function(){  this._x += 25; }

Wenn Sie beim Testen irgendwo auf der Bühne klicken, hüpft alles um 25 Pixel nach rechts. Das ist nun zugegebenermaßen nicht übermäßig sinnvoll, denn wer möchte schon seine komplette Webseite bei Mausklick verschieben oder gar unsichtbar schalten! Aber es zeigt die prinzipiellen Möglichkeiten, die uns das Konstrukt eines übergeordneten MovieClips bietet. Zum Schluss bleibt noch eine Besonderheit zu erwähnen, die wir an der einen oder anderen Stelle bereits kurz kennen gelernt haben, ohne dass sie ausführlicher behandelt worden wäre. Flash speichert nämlich die Inhalte von MovieClips (einschließlich ihrer Eigenschaften etc.) in Hashes. 1. Erstellen Sie eine Standarddatei.

Kapitel 12  MovieClip-Klasse

2. Zeichnen Sie auf objects einen Kreis (60 × 60, Farbe beliebig, Position beliebig). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Registrierungspunkt beliebig). 4. Erstellen Sie an beliebiger Position zwei Duplikate dieser Instanz. Achten Sie darauf, keiner der Instanzen einen Instanznamen zuzuweisen. 5. Zeichnen Sie an beliebiger Position ein Rechteck (80 × 40, Farbe beliebig). 6. Weisen Sie actions folgendes Bildskript zu: this.onMouseDown = function(){  for(a in this){

 trace(„a: „+a);  trace(this[a]);

 this[a]._x += 10; } }

Klicken Sie beim Testen an beliebiger Stelle auf die Bühne, springen nur die MovieClips um 10 Pixel nach rechts und offenbaren einen automatisch von Flash zugewiesenen, internen Namen. Das Rechteck dagegen verharrt störrisch auf seiner Position, was man ihm nicht nachteilig auslegen sollte, denn es entspricht einfach seiner Natur: Eine Form, die in Flash erstellt wurde, kann nicht per Skripting angesprochen werden. Bei MovieClips klappt das trotz fehlendem Namen, weil Flash eben automatisch eine Bezeichnung vergibt. Wie Sie im Kapitel zur Array-Klasse gesehen haben, greift man auf die Elemente eines Hashes mit Hilfe eines String anstelle eines Index’ zu. Die erste trace()-Anweisung gibt uns den Namen des betreffenden String aus, während der zweite trace()Befehl den konkreten Wert anzeigt. Handelt es sich beispielsweise um MovieClips, erhalten wir so ihre Instanznamen bzw. wie in vorliegendem Fall einen automatisch generierten Namen, so dass wir in jedem Fall auf sie zugreifen können. Zwar liegt auch die von uns vorher gezeichnete Form in dem MovieClip, den wir ansprechen. Aber da Formen keinen Bezeichner besitzen, also anonym in der digitalen Welt unterwegs sind, werden sie von ActionScript ignoriert.

13

Zeichnungsmethoden der MovieClip-Klasse

Flash verfügt mit den Zeichnungsmethoden der MovieClip-Klasse über ein interessantes Werkzeug, um per AS dynamische Grafiken zu erstellen. Leider wird ihr Potential selten wirklich ausgeschöpft, obwohl sie eine Reihe von Vorteilen bieten: Hier zu nennen ist – wie an anderer Stelle  – die größere Flexibilität und, noch wichtiger, Interaktionsmöglichkeiten des Anwenders mit unserer Schöpfung. Zudem lassen sich zahlreiche Effekte nur auf diese Weise realisieren. Zugegebenermaßen besitzt ein derartiges Vorgehen seine Grenzen: Eine komplexe Illustration lässt sich in der Regel schneller händisch erstellen als mit den Zeichnungsmethoden. Unsere Tabelle listet die bestehenden Zeichnungsmethoden auf, die wir uns im Folgenden näher anschauen wollen. Gezeichnet wird in einem MovieClip, der als Behälter dient. Befindet sich bereits Content im Behälter, wird dieser durch das Zeichnen nicht gelöscht. Daher lässt die Kombination bestehender Zeichnungen, die eventuell sogar in einem externen Illustrations- oder Grafikprogramm erstellt wurden, mit den Zeichnungsmethoden interessante Effekte zu. Die programmierte Zeichnung lässt sich wie die Instanz eines händisch erstellten Symbols einsetzen, d. h., man kann ihr Ereignisse, Methoden und Variablen zuweisen und mit ihr beliebig interagieren. Während des Zeichenvorgangs kann selbstverständlich mit verschiedenen Linien gearbeitet werden, so dass ein Objekt nicht zwangsläufig aus einheitlichen Elementen bestehen muss. Nach Fertigstellung jedoch sind einzelne Änderungen nicht mehr möglich  – auch darin gleicht die programmierte Zeichnung der Instanz eines händisch erstellten MovieClips. Möchten Sie dennoch beispielsweise eine andere Füllung verwenden, bleibt nur das Neuzeichnen. Lediglich der MovieClip-Be-

Methode

Bedeutung

mc.moveTo(x-Position, y-Position)

Setzt den virtuellen Zeichnungsstift auf seine Anfangsposition

mc.lineStyle(Stärke, Farbe, Alpha)

Legt Linieneigenschaften fest

mc.lineGradientStyle (Typ, Farben, Deckkraft, Verhältnisse, Matrix)

Legt eine Verlaufs­ füllung für die Linie fest

mc.beginBitmapFill( BitmapData)

Definiert eine BitmapGrafik als Füllung

mc.beginFill(Füllfarbe, Alpha)

Definiert eine Füllfarbe

mc.beginGradienFill (Typ, Farben, Deckkraft, Verhältnisse, Matrix)

Definiert eine Verlaufs­füllung

mc.endFill()

Schließt Füllung ab

mc.lineTo(x-Position, y-Position)

Zeichnet eine Linie zur angegebenen Position

mc.curveTo(Steuerpunkt x, Steuerpunkt y, x-Position, y-Position)

Zeichnet eine Kurve zur angegebenen Position

mc.clear()

Löscht die Zeichnung

Zeichnungsmethoden der MovieClip-Klasse

hälter lässt sich nachträglich modifizieren, etwa bezüglich seines Alphawerts. Die verschiedenen Methoden müssen in einer bestimmte Reihenfolge verwendet werden. Obwohl Sie direkt in _root zeichnen können, empfiehlt es sich, einen davon unabhängigen leeren MovieClip als Behälter zu definieren. Damit laufen Sie einerseits nicht Gefahr, dass Ihre Zeichnung irgendwelchen anderen Objekten auf der Bühne in die Quere kommt. Andererseits können Sie die Zeichnung insgesamt durch die Änderung des Behälters ändern (z. B. skalieren, ver-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

155

156

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

schieben etc.). Bezüglich der konkreten Zeichnungsmethoden benötigt Flash an erster Stelle die Definition der Linienart. Das gilt selbst dann, wenn wir ein Objekt ohne Linie, nur bestehend aus einer Füllung, erstellen wollen. Anschließend erfolgt die Angabe einer Füllung, falls gewünscht. Dabei kann man wählen zwischen einer einfarbigen Füllung sowie einem Verlauf, der aufgrund zahlreicher Parameter sehr komplex ausfallen kann. Im nächsten Schritt wird die konkrete Zeichnung als eine Folge von Linien und Kurven definiert. Abschließend teilt man Flash mit, dass die Füllung beendet wird, falls man zuvor eine zugewiesen hat. Verzichtet man darauf, versucht Flash selbständig zu ermitteln, an welcher Stelle die Füllung endet, was mitunter zu ungewollten Ergebnissen führt.

Um etwas sehen zu können, wird die Funktion am Ende des Skripts aufgerufen. Zeichnungen mit lineTo() (und curveTo(), s. u.) beginnen immer im Koordinatenursprung desjenigen Objekts, für das die betreffenden Methoden aufgerufen werden. Da wir mZeich keine Position zugewiesen haben und der Behälter infolgedessen automatisch in der linken oberen Ecke der Hauptzeitleiste eingefügt wird, liegt der Startpunkt unserer Linie an dieser Stelle. Der Endpunkt entspricht dem als Argument bei Aufruf von lineTo() übergebenen Wert, wobei selbstverständlich das Koordinatensystem von mZeich, nicht das von _root maßgeblich ist. Generell liegt der Registrierungspunkt in gezeichneten MovieClips links oben, es sei denn, es würden für lineTo(), curveTo() oder moveTo() negative Werte verwendet. Der Unterschied wird deutlich, wenn wir mZeich verschieben.

13.1 Linien, Kurven und Füllungen

3. Fügen Sie innerhalb der Deklaration von initZeichnung() vor Definition des Linienstils folgende Zeilen ein:

Naheliegenderweise lassen sich Linien am einfachsten zeichnen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //----------- vars –-----------------

 var mZeich:MovieClip = this.createEmp tyMovieClip(„behZeichnung“, 1); //-–------ functions –-------------- function initZeichnung():Void {

 mZeich.lineStyle(1, 0xffaa00, 100);  mZeich.lineTo(200, 200); }

//----------- aufruf –-------------- initZeichnung();

Flash zeichnet mit hoher Professionalität eine vom Koordinatenursprung bis zur Position 200,200 reichende Gerade. Im Variablen-Block referenzieren wir einen leeren MovieClip als Behälter für alle Zeichenvorgänge. Anschließend deklarieren wir die Funktion initZeichnung(), die für diesen Behälter:

• Einen

Linienstil der Stärke 1 Pixel, der Farbe Orange und der Deckkraft von 100 % definiert. • Eine Linie vom Koordinatenursprung bis zur angegebenen horizontalen und vertikalen Position von jeweils 200 Pixeln zeichnet.

mZeich._x = 200; mZeich._y = 50;

Start- und Endpunkt der Geraden verschieben sich um den Wert, den wir der Position von mZeich zuweisen. In flash-typischer Manier lässt lineStyle() zahlreiche Parameter zu, von denen nur der erste mitgegeben werden muss, die restlichen gelten als optional: Linienstärke: Wenig überraschend handelt es sich um eine Pixelangabe für die Dicke der Linie. Die kleinstmögliche Linie stellt die Haarlinie dar. Sie wird normalerweise mit der Stärke 0.25 eingerichtet. Wer Flash überlisten möchte, indem er 0 oder eine negative Zahl als Stärke angibt, wird ebenfalls mit einer Haarlinie belohnt. Es ist also nicht möglich, komplett auf eine Linie zu verzichten (z. B. weil man nur eine Füllung benötigt), indem man einen kleinen Wert wählt.

• Farbe: Ein beliebiger RGB-Farbwert in Hexcode. Fehlt die Angabe, verwendet Flash 0 × 000000. • Deckkraft. Die Deckkraft, die bei fehlender Angabe automatisch mit 100 angesetzt wird. • Pixel: Boolean, der angibt, ob Striche als ganze Pixel dargestellt werden, was u. a. die Linienstärke beeinflusst. Damit lässt sich die Darstellung von Rundungen optimieren. • Skalierung: String, um mitzuteilen, was bei einer Skalierung der Grafik geschehen soll. Zulässig sind „none“, „normal“, „vertical“, „horizontal“.

13.1  Linien, Kurven und Füllungen

• Abschluss: String, der festlegt, wie der Abschluss

einer Linie darzustellen ist. Zulässig sind „none“, „round“ und „square“. • Verbindung: Ein String zur Kennzeichnung der Verbindung zwischen zwei Winkel, wobei „miter“, „round“ und „bevel“ möglich sind. • Winkel: Pflichtangabe bei der Verwendung von „miter“ in der vorhergehenden Option. Dabei übergeben Sie keine Grade, sondern Werte zwischen 0 und 255. Die erwähnten Parameter stimmen mit den Optionen, die im Eigenschaftsfenster bei einer markierten, händisch erstellten Linie angezeigt werden, überein. In den meisten Fällen reicht es aus, wenn Sie Stärke, Farbe und Alpha angeben. Wir wollen uns die Zeichenmethoden an einem umfangreicheren Beispiel etwas ausführlicher anschauen, bei dem wir ein kleines Haus auf stabilem Untergrund und einen grünen Hügel erstellen  – ein genaues Abbild des Anwesens, in dem der Autor dieser Zeilen weilt. 4. Ersetzen Sie den kompletten Inhalt von initZeichnung() durch:  var nBodenHoehe:Number = Math. round(Stage.height * 0.7);

 var nWandHoehe:Number = nBodenHoehe – 80; var nHausXStart:Number = 100; var nHausXEnde:Number = 220;

mZeich.lineStyle(3, 0xffaa00, 60); mZeich.moveTo(0,nBodenHoehe);

 mZeich.lineTo(Stage.width, nBodenHoehe);

Am oberen Rand des unteren Screendrittels zeichnet Flash eine Gerade, die vollständig über die Bildschirmbreite reicht. Wir speichern einige numerische Angaben, die mehrfach verwendet werden müssen, in lokale Variablen. Das könnten wir im Variablen-Block machen, so dass wir einen vollständigen Überblick erhalten, oder innerhalb dieser Funktion, da die Werte nur hier relevant sind. Wir wählen den letztgenannten Weg. In nBodenHoehe legen wir den Baugrund für unser Haus fest. Er befindet sich im unteren Drittel des Screens, aber Sie können natürlich mit beliebigen anderen Werten arbeiten. Ohne Dach erhebt sich unser

157

Haus 80 Pixel über den Boden, so dass nWandHoehe gleich nBodenHoehe  – 80 ist. Die Startposition für das Hauszeichnen beträgt 100, die Endeposition 220 Pixel, woraus sich rechnerisch eine Hausbreite von 120 Pixel ergibt, also ausreichend für eine kleine Familie. Der eigentliche Zeichenvorgang beginnt mit der Definition der Linieneigenschaften. Wir verwenden eine drei Pixel dicke, orangene Linie mit einer Deckkraft von 60, so dass die Farbe nicht zu grell wirkt. Anders als im ersten Beispiel möchten wir unsere Zeichnung nicht im Koordinatenursprung beginnen lassen. Denn da er sich in der linken oberen Ecke befindet, würde das bedeuten, dass wir von dort aus vertikal nach unten und dann nach rechts zeichnen müssten, stünde uns nur lineTo() zur Verfügung. Mit Hilfe von moveTo() können wir den virtuellen Zeichenstift an eine beliebige Position verschieben, ohne dabei zu zeichnen. Wir setzen ihn auf die horizontale Position 0, also den linken Rand, und auf die vertikale Position nBodenHoehe. Von dort aus zeichnen wir mit lineTo() eine Gerade, die auf der gleichen Höhe bleibt, aber am rechten Rand endet. Durch die Verwendung von Stage.height und Stage.width passt sich unser Code automatisch an die Größe Ihres Screens an. 5. Erweitern Sie den Code in initZeichnung(): mZeich.lineStyle(1, 0xffaa00, 100);

 mZeich.moveTo(nHausXStart,nBodenHoehe); mZeich.beginFill(0xffff99,80);  mZeich.lineTo(nHausXStart, nWandHoehe);  mZeich.lineTo(nHausXEnde, nWandHoehe);  mZeich.lineTo(nHausXEnde, nBodenHoehe); mZeich.endFill();

Ein wunderbares Haus, einer Villa nicht unähnlich, erhebt sich über dem Boden, wie Abbildung 29 zeigt.

Abbildung 29:  Beispiel einer geskripteten Zeichnung

158

Innerhalb einer Zeichnung kann man an beliebiger Stelle den Linienstil ändern, was wir hier tun, um Stärke, Farbton und Deckkraft anzupassen. Für das Zeichnen der ersten, linken Wand setzen wir den Stift auf die Anfangsposition, die wir in einer Variablen als horizontalen Start definiert haben. Der vertikale Wert ergibt sich aus der Bodenhöhe – ein solides Bauwerk bedarf nun mal einer gewissen Bodenhaftung. Eine Füllung lässt sich mit der Methode beginFill() zuweisen, der wir als Argumente die gewünschte Farbe und Deckkraft mitgeben. Sie wird demjenigen Bereich zugewiesen, den wir mit lineTo() (und später curveTo() ) umschließen. Um eine korrekte Füllung zu erhalten, muss diese Methode aufgerufen werden, bevor wir die betreffenden Linien zeichnen. Die nächsten drei lineTo() zeichnen die linke Wand von unten nach oben, vom oberen Ende zum oberen Ende der noch nicht gezeichneten rechten Wand, die rechte Wand von oben nach unten. Formal korrekt wäre eine Gerade von diesem Punkt zurück zum Anfang, um die Grafik zu schließen. Wir ersparen uns jedoch diese Zeile und rufen direkt die endFill()-Methode auf, so dass Flash den umrandeten Bereich mit der zuvor definierten Farbe füllt. Da die schließende Linie fehlt, wird sie in demselben Stil wie die übrigen Linien automatisch hinzugefügt. Sie können das kontrollieren, indem Sie in der swf in die Grafik hineinzoomen (<strg><+> und Verschieben per gedrückter Maus). In unserem Fall überschneiden sich Hausgrafik und Boden, was zu unschönen Effekten führen kann. Zur Korrektur müssten Sie in unserem Fall das Haus um zwei oder drei Pixel nach oben versetzt zeichnen, was uns aber nicht weiter kümmern muss, da wir hier die prinzipielle Funktionsweise der betreffenden Methoden betrachten. 6. Erweitern Sie den Code: mZeich.lineStyle(2, 0 × 663300, 100);  mZeich.moveTo(nHausXStart, nWandHoehe);

mZeich.beginFill(0 × 663300, 100);  mZeich.lineTo(nHausXStart + (nHausXEnde – nHausXStart)/2, nWandHoehe – 60);

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

Die Vorgehensweise entspricht der aus dem vorhergehenden Schritt: Linie definieren, Stift setzen, Füllung definieren, Linien ziehen (von der linken oberen Ecke des Hauses zum Scheitelpunkt des Daches, vom Scheitelpunkt zur rechten oberen Ecke), Füllung beenden. Die einzige Berechnung bezieht sich auf den Dachscheitelpunkt. Er liegt horizontal genau in der Mitte zwischen linker Wand (nHausXStart) und rechter Wand (nHausXEnde). Um ihn zu ermitteln, benötigen wir die Differenz zwischen beiden Wänden, dividiert durch 2. Das Ergebnis addieren wir zum Startpunkt der Hauszeichnung bzw. der linken Wand. Als Höhe wählen wir einen willkürlichen Wert von 60 Pixel, den wir von der Wandhöhe subtrahieren. Da sich das Haus in einer landschaftlich reizvollen Umgebung befindet, setzen wir das betreffende Terraforming-Tool von Flash ein. 7. Erweitern Sie den Code: mZeich.lineStyle(2, 0 × 00ff33, 80); mZeich.moveTo(400,nBodenHoehe); mZeich.beginFill(0 × 00cc00,80);

 mZeich.curveTo(580,nBodenHoehe100,600,nBodenHoehe); mZeich.endFill();

Rechts neben dem Haus erhebt sich sanft ein grüner Hügel. Abbildung 30 zeigt unser Gesamtkunstwerk. Die einzige neue Methode stellt curveTo() dar, mit der wir Kurven zeichnen können. Es handelt sich dabei um eine quadratische Bezier-Kurve, die mit nur einem Steuerpunkt arbeitet, um eine Kurve zwischen aktueller Position und angegebenem Zielpunkt zu berechnen. Bildlich gesprochen kann man sich den Steuerpunkt als Magneten vorstellen, in dessen Richtung sich die Kurve neigt. Die Methode curveTo() benötigt vier Argumente:

• Horizontale Position des Steuerpunkts. • Vertikale Position des Steuerpunkts. • Horizontale Position des Zielpunkts. • Vertikale Position des Zielpunkts.

 mZeich.lineTo(nHausXEnde, nWandHoehe); mZeich.endFill();

Ein mit viel Liebe konstruiertes Dach ziert unser Haus.

Abbildung 30:  Haus und Grundstück des Autors

13.1  Linien, Kurven und Füllungen

Wenn wir eine Krümmung nach oben wünschen, müssen wir für den Steuerpunkt eine vertikale Position angeben, die unter derjenigen der Bodenhöhe liegt. Daher subtrahieren wir einen beliebigen Wert von nBodenHoehe. Horizontal muss der Punkt irgendwo zwischen Anfang und Ende der Kurve liegen, sonst wirkt die Krümmung zu unrealistisch. Wollen Sie einen Hügel, der zu beiden Seiten die gleiche Krümmung aufweist, müssten Sie den x-Wert ändern: mZeich.curveTo(500,nBodenHoehe-100, 600,nBodenHoehe);

Der x-Wert muss also exakt auf halber Strecke zwischen Anfangs- und Endpunkt der Kurve liegen. Falls Sie aller Anstrengung zum Trotz mit dem Ergebnis nicht wirklich zufrieden sind, hilft: 8. Fügen Sie innerhalb des Funktions-Blocks nach der schließenden Klammer der init()-Funktion folgende Ereigniszuweisung ein:  this.onMouseDown = function() {  mZeich.clear(); };

159

Abbildung 31:  Zur Funktionsweise von curveTo()

1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcInfo). 3. Erstellen Sie dort im Koordinatenursprung ein dynamisches Textfeld (Instanzname txt, 12 pt, linksbündig, Farbe 0098ff (Blauton), Verdana, nicht auswählbar, einzeilig). 4. Kehren Sie zur Hauptzeitleiste zurück. 5. Weisen Sie actions folgendes Bildskript zu: //------------ vars –---------------  var mZeich:MovieClip = this.create­ EmptyMovieClip(„behZeichnung“, 1); var mInfo:MovieClip;

Als Kurzform könnte man statt dessen auch verwenden:

var nX1:Number = 200;

this.onMouseDown = mZeich.clear;

var nY:Number = Stage.height/2;

Ein Mausklick an beliebiger Stell löscht die komplette Zeichnung. Wenn wir eine Zeichnung wieder loswerden wollen, verwenden wir die Methode clear(). Der Behälter für die Zeichnung bleibt bestehen, nur sein gesamter, vor Aufruf dieser Methode mit Hilfe der Zeichnungsmethoden erstellter Content wird gelöscht. Falls Sie danach keine weiteren Zeichnungen mehr anfertigen wollen, können Sie statt clear() auch den Behälter selbst löschen, indem Sie mZeich.removeMovie­ Clip() aufrufen. Nun ja, Programmierer sind eben keine Architekten. Am Anfang erweist es sich vielleicht als gewöhnungsbedürftig, die gewünschte Krümmung bei curveTo() mit den korrekten Werten für den Steuerpunkt zu definieren. Wir wollen uns daher mit Hilfe einer kleinen Applikation, bei der wir interaktiv die Krümmung einstellen und gleichzeitig den zugehörigen Wert des Steuerpunkts ablesen können, die Funktionsweise der Methode anschauen. Abbildung  31 zeigt einen Beispielscreen.

var nX2:Number = Stage.width-nX1; //----------- functions –----------- function init():Void {

 mInfo = mZeich. attachMovie(„mcInfo“, „info“, 1);  mInfo.txt.autoSize = „left“;  kurve();

 mZeich.onMouseMove = kurve; }

function kurve():Void {

 var nXMouse:Number = _xmouse;  var nYMouse:Number = _ymouse;  mZeich.clear();

 mZeich.lineStyle(2, 0 × 0098ff, 100);  mZeich.moveTo(nX1, nY);

 mZeich.curveTo(nXMouse, nYMouse, nX2, nY);

 mZeich.lineStyle(1, 0 × 666666, 100);  mZeich.moveTo(nX1, nY);

 mZeich.lineTo(nXMouse, nYMouse);

160

 mZeich.lineTo(nX2, nY);

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

 mInfo.txt.text = nXMouse+”, “+nYMouse;

würde jedoch unter dem entstehenden Liniengewirr untergehen. Daher rufen wir zunächst clear() auf, ehe die Kurve definiert wird, bestehend aus folgenden Einzelschritten:

 mInfo._y = nYMouse;

• Definition der Linie. Es handelt sich um den glei-

 mInfo._x = nXMouse+12; }

//----------- aufruf –-------------- init();

Flash zeichnet eine Kurve, deren Krümmung von der Mausposition bestimmt wird, indem wir den Steuerpunkt auf dessen Stelle setzen. Um ihn deutlicher zu sehen, zeichnen wir eine hellgraue Linie jeweils vom Anfangs- und vom Endpunkt der Kurve bis zum Steuerpunkt . Gleichzeitig blenden wir ein Textfeld mit den aktuellen Werten der Mausposition ein. Im Variablen-Block legen wir einen Behälter für die Zeichnung an und deklarieren eine Variable, um eine Referenz auf den MovieClip mit dem Textfeld aufzunehmen. Um horizontal einen gleichen Abstand von den Rändern zu erreichen, legen wir einen entsprechenden Wert in der Variablen nX1 für den linken Rand fest. Der rechte Abstand ergibt sich dann aus der Bühnenbreite minus diesem Wert. Das Ergebnis der Berechnung speichern wir in nX2. Da wir vertikal für beide Kurvenpunkte den gleichen Wert benutzen wollen, reicht eine Variable aus, um ihn zu speichern, nämlich nY. Im Funktions-Block definieren wir zunächst die init()-Funktion, die eben dieses Textfeld einblendet und es linksbündig ausrichtet. Alternativ hätte man das auch bereits im Variablen-Block als Initialisierung von mInfo durchführen können. Wir rufen die Funktion kurve() einmal auf, so dass bereits von Anfang an unsere Zeichnung zu sehen ist, und weisen die gleiche Funktion dem onMouseMove-Ereignis des Behälters zu. Infolgedessen wird kurve() jedes Mal neu ausgeführt, sobald wir die Maus bewegen. Für den User entsteht so der Eindruck, als würden wir permanent zeichnen. Die Funktion kurve() definiert den eigentlichen Zeichenvorgang. Da wir die Position der Maus mehrfach benötigen, speichern wir sie in zwei Variablen (je eine für die horizontale und die vertikale Position). Eine bereits bestehende Zeichnung muss zuerst gelöscht werden, bevor wir neu zeichnen können. Andernfalls würde unsere Grafik vielleicht in ästhetischer Hinsicht gewinnen, der Informationsgehalt

chen Vorgang wie bei der Methode lineTo(). • Bewegung zur Startposition, ohne zu zeichnen. • Zeichnen der Kurve, wobei sich der Steuerpunkt aus der Mausposition ergibt. Um die Linien zum Steuerpunkt zeichnen zu können, legen wir einen neuen Stil fest und setzen den virtuellen Zeichenstift auf die Position des Linienanfangs. Von dort aus zeichnen wir eine Linie zur Maus und von dieser zum Endpunkt der Kurve. Anschließend weisen wir dem Textfeld einen Inhalt zu, bestehend aus einer Konkatenation, die x- und y-Position der Maus zusammenzieht. Den MovieClip, der das Textfeld enthält, richten wir an der Mausposition, um 12 Pixel nach rechts versetzt, aus. Zum Schluss rufen wir init() auf, so dass der Zeichenvorgang beginnen kann.

13.2 Verlaufsfüllungen Das Zeichnen der Umrisse und Füllungen gestaltet sich insgesamt problemlos. Etwas komplexer dagegen ist die Verwendung von Farbverläufen, die sich auf drei Arten einrichten lassen. Wir schauen uns zunächst eine einfachere Variante an, die in älteren Versionen funktioniert, und befassen uns anschließend mit dem „moderneren“ Pendant, das Flash ab Version 8 voraussetzt. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //------------ vars –---------------  var mZeich:MovieClip = this.create­ EmptyMovieClip(„behZeichnung“, 1);

//---------- functions –------------ function initZeichnung():Void {  mZeich._x = mZeich._y=100;

 var aColors:Array = [0xff0000, 0xffaa00];

 var aAlphas:Array = [100, 100];  var aRatios:Array = [0, 255];

13.2  Verlaufsfüllungen

 var oMatrix:Object = {matrixType: „box“, x:0, y:0, w:200, h:200, r:0};  mZeich.beginGradientFill(„linear“, aColors, aAlphas, aRatios, oMatrix);  mZeich.lineTo(200, 0);

 mZeich.lineTo(200, 200);  mZeich.lineTo(0, 200);  mZeich.lineTo(0, 0);  mZeich.endFill(); }

//––--------- aufruf –-------------- initZeichnung();

Flash stellt ein Rechteck mit einem linearen, horizontal ausgerichteten Farbverlauf von Rot nach Orange dar. Nach dem Einrichten unseres Behälters definieren wir im Funktions-Block wieder unsere initZeichnung(), die den Zeichenvorgang steuert. Zunächst positionieren wir den Behälter auf 100,100. Anschließend legen wir einige Werte fest, die unsere Methode für die Verlaufsfüllung benötigt:

• aColors: Ein Array, dass alle im Verlauf enthal-

tenen Farben aufnimmt. Naturgemäß sollte es sich mindestens um zwei in Hexcode angegebene Farbwerte handeln, da der Verlauf andernfalls einen recht eintönigen Eindruck erwecken würde. Die erste Farbe definiert den Beginn bzw. den Mittelpunkt des Farbverlaufs, je nach Art, die beim Aufruf von beginGradientFill verwendet wird. • aAlphas: Ein Array mit der Deckkraft der jeweiligen Farben. • aRatios: Ein Array mit den Anteilen der Farbwerte am gesamten Farbverlauf. Werte zwischen 0 und 255 sind gültig. Die Anzahl der Elemente muss logischerweise in allen drei Arrays miteinander übereinstimmen. Ist das irgendwo nicht der Fall, schweigt sich Flash vornehm aus anstatt mit einer Fehlermeldung zu protestieren, und es wird auch nichts angezeigt. Gleiches gilt für einen ungültigen Wert in einem der Arrays. Da macht Fehlersuche insbesondere in komplexen Skripten wieder richtig Spaß. • oMatrix: Ein Objekt, das, einfach gesprochen, Position, Größe und Drehung des Verlaufs festlegt. Als matrixType beharrt Flash in jedem Fall auf einer „box“. Die x- und y-Werte beziehen sich auf die linke obere Ecke des Verlaufs. Diese Werte müssen nicht zwangsläufig mit der ersten Zeich-

161

nungsposition übereinstimmen. Die beiden folgenden Werte für w und h legen Breite und Höhe fest, während zum Schluss mit r die Drehung in Grad definiert wird. Natürlich sind die Namen der Arrays und Objekte beliebig, auch wenn es sich eingebürgert hat, Bezeichnungen wie die genannten oder zumindest ähnliche Namen zu verwenden. Die Methode beginGradientFill() übergibt den Füllungstyp, der entweder einem linearen oder einem radialen Farbverlauf entspricht, sowie die zuvor definierten Arrays bzw. Objekte. Erst danach beginnt der eigentliche Zeichenvorgang, indem die Form durch vier lineTo() festgelegt wird. Das entspricht dem Zeichenvorgang, den wir bereits in der vorhergehenden Übung kennen gelernt haben. Abgeschlossen wird mit der endFill()-Methode. Der Aufruf am Ende des Skripts löst den Zeichenvorgang aus. Auf den ersten Blick verwirrend dürfte die Angabe von aRatios sein. Gehen wir der Einfachheit halber von einem radialen Farbverlauf mit einer Drehung von 0 Grad aus, wie er oben gezeichnet wurde. Dann lässt sich der Verlauf horizontal in insgesamt 256 verschiedene Stufen (von 0 bis 255) unterteilen, an denen eine beliebige Farbe ungemischt dargestellt wird. Abbildung 32 zeigt dies am Beispiel unseres Verlaufs von Rot nach Orange. Wir haben also an der frühestmöglichen Position, nämlich direkt am Anfang des Verlaufs, ein ungemischtes Rot, und an der letztmöglichen Position,

Abbildung  32:  Zweifarbiger, radialer Farbverlauf Rot  – Orange

162

am Ende des Verlaufs, ein reinrassiges Orange. Alle Farbtöne dazwischen stellen eine Mischung zwischen beiden Farben und damit einen Verlauf von Rot zu Orange dar. Die 256 Abstufungen dürfen nicht mit Pixeln verwechselt werden. Es spielt prinzipiell keine Rolle, ob wir unserem Verlauf eine Breite von 100 Pixeln oder gleich bildschirmfüllende 1024 gönnen: In jedem Fall steht die gleiche Anzahl an Stufen zur Verfügung. Ihre Wirkungsweise lässt sich noch besser verstehen, wenn wir in unserem Beispiel einfach mit verschiedenen Werten experimentieren. 3. Ändern Sie die Definition der Farbverteilung wie folgt (Fettdruck): var aRatios:Array = [127, 255];

Nun verschiebt sich der gesamte Farbverlauf nach rechts. Auf den Positionen 0 bis 127 erscheint Rot, und erst ab dieser Stelle beginnt der eigentliche Verlauf, d. h. die Mischung Richtung Orange. Wenn Sie extreme Werte wie beispielsweise zweimal 255 verwenden, erscheint nur noch Rot. Die Reihenfolge und Größe der Zahlen, die in aRatios definiert werden, spielen eine wichtige Rolle. Um einen Verlauf erzeugen zu können, muss jede Zahl größer sein als die vorhergehende. Was passiert, wenn das nicht der Fall ist, können Sie bei entsprechender Codeänderung testen. 4. Ändern Sie die Definition der Farbverteilung wie folgt: var aRatios:Array = [200,100];

Es ergibt sich keine Farbmischung, sondern einfach eine aus zwei Farbblöcken bestehende Füllung. Der radiale Farbverlauf beginnt ja bekanntlich links und erst an der Position 200 ist der letzte Punkt erreicht, an dem wir ein ungemischtes Rot erhalten. Unser reinrassiges Orange dagegen beginnt schon vor dieser Stelle, nämlich an Position 100. Daher kann es keinen Farbverlauf zwischen beiden mehr geben. Anders sieht es aus, wenn wir den zweiten Wert erhöhen, z. B. auf 220. Dann gibt es einen recht kleinen Bereich, in dem ein Verlauf von Rot zu Orange dargestellt wird. Ein Verlauf muss natürlich nicht zwangsläufig aus lediglich zwei Farben bestehen, so schön diese auch sein mögen. Entscheidend ist nur, dass für jede Farbe ein Alphawert, ein Hexwert und ein Anteil (bzw. eine Position) angegeben werden.

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

5. Ändern Sie die Definitionen von aColors, aAlphas und aRatios wie folgt (Fettdruck):  var aColors:Array = [0xFF0000, 0xffaa00, 0xffffff, 0 × 000099];  var aAlphas:Array = [100, 100, 80,100];

var aRatios:Array = [0,120,190,255];

Sie erhalten einen aus vier Farben bestehenden Verlauf. Vergleichbar dem Transformationswerkzeug, mit dem man einen Farbverlauf drehen kann, lässt sich per ActionScript eine Drehung definieren. Dazu muss lediglich in unserem Matrix-Objekt an letzter Stelle ein entsprechender Wert mit gegeben werden. Da Flash mit Grad arbeitet, beginGradientFill() aber mathematisch korrekt auf Bogenmaß beharrt, wenn wir einen Winkel angeben, muss unser Wert noch dementsprechend umgerechnet werden. Ohne hier auf den mathematischen Hintergrund näher eingehen zu wollen, lautet die Umrechnungsformel: Bogenmaß = Grad/180 * PI. Weitere Informationen zu Bogenmaß und Grad bzw. Radiant entnehmen Sie bitte dem Kapitel Trigonometrie. 6. Um den Farbverlauf zu drehen, ändern Sie den bisherigen Code wie folgt (Fettdruck):  var oMatrix:Object = {matrixType: „box“, x:0, y:0, w:200, h:200, r:(45/180)*Math.PI};

Sie erhalten einen Farbverlauf, der um 45 Grad nach rechts gedreht wird und von links oben nach rechts unten verläuft. Ähnlich funktioniert der Verlauf bei einem Kreis. Allerdings werden unsere 256 verschiedenen Stufen vom Verlaufsmittelpunkt aus berechnet. Wenn man der ersten Farbe 0 zuweist, bedeutet dies natürlich, dass sie nur im Kreismittelpunkt zu 100 % dargestellt, an jeder anderen Stelle aber bereits mit der zweiten Farbe gemischt wird. 7. Ändern Sie den Aufruf von beginGradientFill() folgendermaßen (Fettdruck):  mZeich.beginGradientFill(„radial“, aColors, aAlphas, aRatios, oMatrix);

Flash zeigt einen kreisförmigen Verlauf mit Rot im Kreismittelpunkt und einem blauen, rechteckigen Rand.

13.2  Verlaufsfüllungen

Wie Sie sehen, kann man leicht zwischen Verlaufs­ typen umschalten, indem man entweder den String „linear“ für einen linearen oder „radial“ für einen kreisförmigen Verlauf beim Aufruf von beginGradientFill() übergibt. Der Rand ist unvermeidlich, da als matrixType nur der String „box“ zulässig ist. Unter bestimmten Voraussetzungen können wir uns seiner mit einem einfachen Trick entledigen. 8. Ändern Sie die Initialisierung von aColors wie folgt (Fettdruck):  var aColors:Array = [0xFF0000, 0xffaa00, 0xffffff, 0 × 000000];

9. Ändern Sie die Hintergrundfarbe in Schwarz. Das Rechteck verschwindet, so dass nur noch ein Kreis zu sehen ist. Der Trick besteht einfach darin, der letzten Farbe des Verlaufs denselben Wert zuzuweisen, den der Hintergrund besitzt. Einen interessanten Effekt erzielen Sie übrigens, wenn Sie den vorher verwendeten BlauTon beibehalten und statt dessen den letzten Wert in aAlphas auf 0 setzen. Dann entsteht der Eindruck einer leicht bläulich schimmernden Korona um einen Stern im Weltall, wie Abbildung 33 zeigt. Bei den bisherigen Übungen haben wir der Einfachheit halber darauf geachtet, dass gezeichnetes Rechteck und Füllung deckungsgleich sind. Das muss jedoch nicht zwangsläufig so sein. Das Rechteck, das mit lineTo() definiert wird, stellt nämlich nichts anderes dar als eine Art Maske, durch die man auf den darunter liegenden Verlauf blickt. Dessen Koordinaten dürfen sich also von denjenigen des Rechtecks unterscheiden.

Abbildung  33:  Koronaartiger Grafikeffekt mit Verlaufs­ füllung

163

10. Ändern Sie die Einrichtung von oMatrix folgendermaßen (Fettdruck):  var oMatrix:Object = {matrixType: „box“, x:100, y:0, w:200, h:200, r:0};

Der Kreis verschiebt sich nach rechts und wird in der Mitte abgeschnitten. Relativ zum linken Rand des gezeichneten Rechtecks wird der Kreis nach rechts verschoben. Übrig bleibt ein Halbkreis mit einer an der Schnittseite sehr harten Kante. Wird er dagegen um 200 Pixel verschoben, bleibt nichts mehr vom Kreis übrig, denn das gezeichnete Rechteck ist nur 200 Pixel breit. Der Kreisrand läge exakt rechts außerhalb des Rechtecks. Der Nullpunkt dieses für den Verlauf verwendeten Objektes liegt also im Koordinatenursprung desjenigen MovieClips, in dem gezeichnet wird. Interessanterweise lässt sich auch der Mittelpunkt des Verlaufs verschieben. 11. Fügen Sie unmittelbar nach der Definition des Matrix-Objekts folgende Zeile ein:

var nFokus:Number = 0.9;

12. Ändern Sie den Aufruf von beginGradientFill() wie folgt (Fettdruck):  mZeich.beginGradientFill(„radial“, aColors, aAlphas, aRatios, oMatrix, null, null, nFokus);

Das Ergebnis sehen Sie in Abbildung 34. Der Verlauf scheint eine Art Schweif hinter sich herzuziehen und nach rechts zu blicken.

Abbildung 34:  Verschiebung des Verlaufsmittelpunkts

164

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

Die Methode beginGradientFill() akzeptiert mehrere optionale Argumente, dessen letztes sich, vereinfacht formuliert, auf die horizontale Position des Mittelpunktes eines nicht gedrehten Verlaufs bezieht. Bei einem positiven Wert größer 0 und kleiner/ gleich 1 liegt der Verlaufsmittelpunkt zwischen der Kreismitte und dem rechten Rand, bei einem negativen Wert kleiner/gleich –1 und größer 0 zwischen Mitte und linkem Rand. Andere Werte werden automatisch auf –1 bzw. 1 gerundet. Da wir nur den für den Fokus zuständigen Parameter mit einem Wert belegen wollen, nicht jedoch zwei weitere, müssen wir beim Aufruf zweimal null als Argument übergeben. Andernfalls stimmt die Reihenfolge der Argumente nicht mehr. Mit dem genannten Argument lässt sich der Fokus nur bei einem radialen Verlauf verschieben Bei den beiden von uns so geflissentlich ignorierten optionalen Parametern handelt es sich um:

• spreadMethod: Modus der Verlaufsfüllung, der

über einen String definiert wird. Zulässig sind „pad“, der Standardwert, „reflect“ und „repeat“. Mit „reflect“ kann eine Füllung am Verlaufsende gespiegelt, mit „repeat“ wiederholt werden. Diese Option spielt nur dann eine Rolle, wenn Breite und/oder Höhe des Verlaufs kleiner sind als das zu füllende Zeichnungsobjekt. • interpolationMethod: Art der Berechnung der Farben im Verlauf. Dieser Parameter akzeptiert einen String mit den Werten „linearRGB“ oder dem Standardwert „RGB“.

Um Ihnen einen Vergleich einfacher zu ermöglichen, wollen wir einen neuen MovieClip für die zweite Zeichnung verwenden anstatt den bestehenden zu überschreiben. 15. Fügen Sie im Funktions-Block ein (Änderungen gegenüber initZeichnung() in Fettdruck):

function initZeichnung2():Void {

 mZeich2._x = mZeich._x+mZeich._ width+50; mZeich2._y = mZeich._y;

 var aColors:Array = [0xFF0000, 0xffaa00, 0xffffff, 0 × 000000];

 var aAlphas:Array = [100, 100, 80, 100];  var aRatios:Array = [0, 120, 190, 255];  var nFokus:Number = 0.9;

var mxMatrix:Matrix = new Matrix();  mxMatrix.createGradientBox(200, 200, 0, 0, 0);  mZeich2. beginGradientFill(„radial“, aColors, aAlphas, aRatios, mxMatrix, null, null, nFokus);  mZeich2.lineTo(200, 0);

 mZeich2.lineTo(200, 200);  mZeich2.lineTo(0, 200);  mZeich2.lineTo(0, 0);  mZeich2.endFill();

Oben wurde eine Variante von beginGradientFill() angesprochen, die mit dem geom-Package, das eine Reihe von „geometrischen“ Klassen umfasst, arbeitet.



13. Fügen Sie ganz am Anfang des Skripts ein:

Flash stellt zwei identische Farbverläufe nebeneinander dar. Wir positionieren die neue Zeichnung rechts neben der vorhergehenden. Dazu addieren wir die Position von mZeich, dessen Breite sowie einen willkürlichen Abstand von 50 Pixeln. Die y-Position beider Zeichnungen ist identisch miteinander. Der Zeichenvorgang selbst unterscheidet sich nur in der Art, wie wir unser Matrix-Objekt definieren. Im vorhergehenden Beispiel verwendeten wir ein Object, in diesem Beispiel greifen wir explizit auf die Matrix-Klasse zu, die wir in mxMatrix instanziieren. Anschließend



//------------ import –------------

import flash.geom.*;

Die einzelnen Klassen des Pakets stehen erst zur Verfügung, wenn wir sie in der Gesamtheit – wie hier – oder explizit einzeln importieren. Die benötigte Matrix-Klasse ist Teil dieses Packages. 14. Erweitern Sie den Variablen-Block um:  var mZeich2:MovieClip = this.create­ EmptyMovieClip(„behZeichnung2“, 2);

}

16. Rufen Sie die Funktion am Skriptende auf:

initZeichnung2();

13.4  Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern)

165

rufen wir für mxMatrix die Methode createGradientBox() auf. Sie benötigt prinzipiell dieselben Angaben, die wir vorher oMatrix übergeben haben, nur in veränderter Reihenfolge, nämlich: Breite des Verlaufs, Höhe, Drehung, x-Position, y-Position. Den Typ „box“ müssen wir nicht definieren, da er automatisch von createGradientBox() eingerichtet wird. Anstelle von oMatrix übergeben wir an beginGradientFill() mxMatrix. Wie Sie sehen, ist diese Schreibweise nahezu identisch mit der vorher gezeigten und gilt als die offiziell empfohlene Variante, die jedoch eine neuere Version von Flash voraussetzt. Die Methode lineGradientStyle() funktioniert genau so wie die behandelte Methode beginGradientFill(). Daher wollen wir nicht näher darauf eingehen. Beachten Sie, dass lineGradientStyle() keinen Ersatz für lineStyle() darstellt. Diese Definition ist nach wie vor an erster Stelle notwendig, unabhängig davon, ob Sie den Linien einen Verlauf zuweisen möchten oder nicht.

nach rechts und dreht sich zusätzlich um seinen Registrierungspunkt, was in einer recht eiernden Bewegung resultiert.

13.3 Ereignisse, Methoden, Eigenschaften

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:

13.4 Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern) Als Fingerübung wollen wir noch einige Hinweise geben, wie Sie bestimmte geometrische Figuren mit den Zeichnungsmethoden realisieren können. Spontan könnte man meinen, dass sich ein Kreis mit curveTo() ebenso einfach wie effektiv zeichnen lassen würde. Dem ist nicht so. Tatsächlich benötigen Sie solide Kenntnisse der Geometrie, um den Steuerungspunkt korrekt zu setzen. Wir wollen uns damit an dieser Stelle nicht auseinandersetzen (eine Variante finden Sie online unter den livedocs von Adobe zur Zeichen-API von Flash). Nicht ganz ohne Geometrie, aber immerhin etwas einfacher gelangen Sie mit lineTo() zu einem akzeptablen Kreis.

//----------- functions –------------

Da es sich hier nicht um ein eigenständiges Zeichnungsobjekt handelt, besitzen so erstellte Grafiken keine eigenen Eigenschaften oder Ereignisse. Statt dessen stehen alle Eigenschaften, Ereignisse und Methoden der MovieClip-Klasse zur Verfügung. Wollen Sie Ihre Grafiken beispielsweise mit Interaktionen versehen, gehen Sie genau so vor wie bei einem MovieClip. Bezogen auf die Übungen des vorherigen Abschnitts könnten Sie den Behältern für die Zeichnungen zuweisen: mZeich.onPress = function(){  this.removeMovieClip(); }

mZeich2.onPress = function(){  this._x += 20;

 this._rotation += 10; }

Bei Klick auf mZeich löschen Sie den MovieClip mitsamt des gezeichneten Inhalts. Wenn Sie dagegen auf mZeich2 klicken, bewegt er sich um 20 Pixel

 function kreis(pWer:MovieClip, pRadius:Number, pSchritte:Number, pXPos:Number, pYPos:Number):Void {

 var nTiefe:Number = pWer.getNextHighestDepth();  var nWinkel = 0;

 var nWinkelDist:Number = 360/ pSchritte;  var xPos:Number, yPos:Number;

 var mKreis:MovieClip = pWer.create EmptyMovieClip(„behKreis“+nTiefe, nTiefe);  mKreis._x = pXPos;  mKreis._y = pYPos;

 mKreis.lineStyle(1, 0 × 000000, 100);

 mKreis.moveTo(Math. cos(nWinkel*(Math.PI/180))*pRadius, Math.sin(nWinkel*(Math. PI/180))*pRadius);  for (var i = 0; i
166

 xPos = Math.cos(nWinkel*(Math. PI/180))*pRadius;  yPos = Math.sin(nWinkel*(Math. PI/180))*pRadius;  mKreis.lineTo(xPos, yPos); } }

//---------- aufruf –---------------  kreis(this, 50, 120, Stage.width/2, Stage.height/2);

Ein nicht gefüllter Kreis taucht in der Bühnenmitte auf. Wir verwenden eine parametrisierte Funktion, so dass wir leicht Kreise mit verschiedenen Eigenschaften einrichten können. Zur Vorbereitung richten wir einige Variablen ein:

• nTiefe

speichert die nächst höhere unbelegte Tiefe in demjenigen MovieClip, der als Ziel übergeben wird. • nWinkel setzt den Startwinkel für den Zeichenvorgang auf 0. • nWinkelDist enthält die Winkeldifferenz zwischen den einzelnen Linien. Ein Kreis umfasst 360 Grad, den wir in pSchritte Schritten zeichnen wollen. • xPos und yPos nehmen später die errechnete xund y-Position eines Punktes unserer Linie auf. • mKreis speichert eine Referenz auf einen bei jedem Aufruf von kreis() neu eingerichteten MovieClips. Um eindeutige Instanzen zu erzeugen, binden wir Instanznamen und Tiefe an die Variable nTiefe, in der automatisch jedes Mal ein neuer Wert enthalten ist. Wir setzen mKreis auf die Werte, die wir beim Aufruf der Funktion als Argumente übergeben. Dadurch können wir wechselnde Positionen für unsere Kreise erhalten. Der Zeichenvorgang beginnt mit der Festlegung eines Linienstils. Anschließend setzen wir den virtuellen Stift an die Anfangsposition. Alle Punkte auf einem Kreis lassen sich mit Hilfe trigonometrischer Funktionen berechnen. Dabei verwenden wir Sinus für die y- und Kosinus für die x-Position, jeweils multipliziert mit dem gewünschten Radius. Innerhalb der Schleife wiederholen wir diesen Prozess entsprechend der Anzahl der Schritte, wobei wir jeweils den verwendeten Winkel um die zuvor ermittelte Winkeldifferenz erhöhen und lineTo() anstatt moveTo()

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

verwenden – ansonsten würde natürlich keine Zeichnung entstehen. Abschließend rufen wir die Funktion mit diversen Argumenten auf:

• this bezeichnet den MovieClip, in dem der Behäl-

ter für die Zeichnung eingerichtet wird. In unserem Beispiel handelt es sich dabei um _root, also die Hauptzeitleiste, aber Sie können prinzipiell jeden anderen existierenden MovieClip übergeben. • 50 bezieht sich auf den gewünschten Kreisradius in Pixeln. • 120 legt die Anzahl der Schritte fest, d. h., es werden 120 Linien verwendet, um den Kreis zu zeichnen. • Stage.width/2 und Stage.height/2 definieren die x- und y-Position des Zeichenbehälters. Wir verwenden jeweils die halbe Bühnenbreite und halbe Bühnehöhe, also die Bühnenmitte. In diesem Beispiel wird der Kreis vom Mittelpunkt aus gezeichnet, d. h. der Registrierungspunkt entspricht dem Mittelpunkt. Das können Sie leicht überprüfen, indem Sie beim Aufruf der Funktion kreis() jeweils für die x- und die y-Position den Wert 0 übergeben. Sie werden dann nur noch ein Viertel sehen, nämlich das rechte untere Segment, während der Rest aus der Bühne herausragt. Möchten Sie den Registrierungspunkt statt dessen links oben setzen, muss beim Zeichnen der x- und y-Positionen jeweils der Radius hinzu addiert werden. Es ändern sich dann folgende Zeilen (Fettdruck): mKreis.moveTo(Math.cos(nWinkel*(Math. PI/180))*pRadius + pRadius, → Math.sin(nWinkel*(Math. PI/180))*pRadius + pRadius);

xPos = Math.cos(nWinkel*(Math. PI/180))*pRadius + pRadius; yPos = Math.sin(nWinkel*(Math. PI/180))*pRadius + pRadius;

Wählen Sie einfach die Variante, die Ihnen am ehesten zusagt. Die Methode lineTo() erstellt sogar ein kreis­ ähnliches Gebilde, ohne dass wir auf trigonometrische Funktionen zugreifen. 3. Fügen Sie im Funktions-Block folgende Deklaration ein:  function kreis2(pWer:MovieClip, pDurchmesser:Number, pXPos:Number, pYPos:Number):Void {

13.4  Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern)

 var nTiefe:Number = pWer.getNextHighestDepth();

 var mKreis:MovieClip = pWer.create EmptyMovieClip(„kreisFake“+nTiefe, nTiefe);  mKreis.lineStyle(pDurchmesser, 0xffaa00, 100);  mKreis.lineTo(0, 0.20);  mKreis._x = pXPos;

167

man die letzte Farbe des Verlaufs unseres Kreises mit einer Deckkraft von 0 zeichnen, was gegebenenfalls einen unerwünschten Halo-Effekt hervorruft (s. o., Abschnitt beginGradientFill()). Ein beliebter Zwitter zwischen Kreis und Rechteck stellt das Oval dar, das häufig in Interfaces Verwendung findet. Es lässt sich beispielsweise mit einer Kombination aus lineTo() und curveTo() nachbilden.

 mKreis._y = pYPos;

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:

 this._rotation += 5;

//------------ functions –––---------

 mKreis.onEnterFrame = function() { }; }

kreis2(this, 50, 100, 200);

Es taucht ein orangefarbener Kreis in der linken Screenhälfte auf. Wir missbrauchen die Linie, indem wir ihr eine Stärke im gewünschten Durchmesser geben, aber anschließend eine Gerade zwischen zwei Punkten zeichnen, die vertikal 0.2 Pixel voneinander entfernt sind. Dadurch entsteht ein Kreis, der faktisch eine kleine, nicht wahrnehmbare Ausbuchtung nach oben und unten besitzt. Bedenken Sie, dass diese Variante zu unerwünschten Ergebnissen führen kann, da Flash mitunter Probleme hat, den minimalen Versatz von lineTo() korrekt darzustellen. Das ist insbesondere dann der Fall, wenn diese Kreise pixelgenau positioniert oder animiert werden müssen. Zudem ist die Wiedergabe nicht in jeder Version des Flash-Players gleich. In älteren Versionen werden so erstellte Kreise, wenn man sie dreht – nun ja, wer dreht schon Kreise? – die Ausbuchtungen je nach Winkel überdeutlich anzeigen, was aussieht, als wachsen dem Kreis plötzlich Flügel. Hat er etwa an einem bekannten Getränk genippt? Der kleinstmögliche Wert, der über lineTo() zur Ausgangsposition addiert werden kann, beträgt 0.15. Kleinere Werte führen dazu, dass der Kreis nicht dargestellt wird. Wird dieser Kreis gedreht, verschwindet er zeitweise. Eine weitere Variante mit Hilfe von beginGradientFill() haben Sie bereits weiter oben kennen gelernt. Dabei zeichneten wir einen radialen Farbverlauf, dessen äußerste Farbe derjenigen des Hintergrunds entsprach. Ein derartiges Vorgehen findet natürlich schnell da seine Grenze, wo der Hintergrund mehrfarbig ist oder einen Verlauf enthält. Dann müsste

 function oval(pWer:MovieClip, pRundung:Number, pBreite:Number, pHoehe:Number, pXPos:Number, pYPos:Number):Void {

 var nTiefe:Number = pWer.getNextHighestDepth();

 var mRecht:MovieClip = pWer.creat eEmptyMovieClip(„button“+nTiefe, nTiefe);  mRecht.lineStyle(2, 0 × 000000, 100);  mRecht.moveTo(pRundung, 0);

 mRecht.lineTo(pBreite-pRundung, 0);  mRecht.curveTo(pBreite, 0, pBreite, pRundung);  mRecht.lineTo(pBreite, pHoehe-pRundung);  mRecht.curveTo(pBreite, pHoehe, pBreite-pRundung, pHoehe);

 mRecht.lineTo(pRundung, pHoehe);  mRecht.curveTo(0, pHoehe, 0, pHoehe-pRundung);  mRecht.lineTo(0, pRundung);

 mRecht.curveTo(0, 0, pRundung, 0);  mRecht._x = pXPos;  mRecht._y = pYPos;

}

//--------------- aufruf –---------- oval(this, 40, 300, 150, 200, 250);

Auf dem Screen ist ein großes Oval zu sehen. Innerhalb der Funktion erfolgt nach dem Einrichten des Behälters wie gewohnt der Zeichenvorgang.

168

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse Abbildung 35:  Oval

Er besteht schlicht aus einer Folge von lineTo() für die geraden und curveTo() für die gerundeten Ecken, beginnend mit der oberen Geraden. Gezeichnet wird im Uhrzeigersinn. Der Registrierungspunkt liegt links oben. Abbildung 35 verdeutlicht den Aufbau des Ovals, wobei die ersten 5 Schritte des Zeichnens nummeriert dargestellt werden. Anstelle des curveTo() könnte man auch das lineTo() so verwenden, wie wir es oben im Zusammenhang mit dem Kreis getan haben. Vielleicht kommt Ihnen der Gedanke, mit dieser Methode einen Kreis zu zeichnen, wenn Sie auf die lineTo()-Befehle verzichten und nur curveTo() verwenden. Sie werden jedoch kein sauberes Ergebnis erzielen, da die Kurven für unsere abgerundeten Ecken nicht zu einem Kreis mit dem gleichen Mittelpunkt passen. Mit Hilfe der trigonometrischen Funktionen sind wir in der Lage, ein beliebiges gleichseitiges Vieleck (oder professioneller: Polygon) zu zeichnen, beginnend mit einem Dreieck. Die entsprechenden Grundlagen vermittelt das erwähnte Kapitel Trigonometrie, das Sie spätestens an dieser Stelle aufschlagen sollten, falls Ihr Wissen kleinere Lücken aufweist. Wir wollen uns hier lediglich die benötigte Formel anschauen und sie in eine Funktion einbauen.

 var mPoly:MovieClip = pWer.create EmptyMovieClip(„behPolygon“ +nTiefe, nTiefe);

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:

}

 var nDif = 360/pEcken;

 var nRadius:Number = (pLaenge/2)/ Math.sin((nDif/2)*(Math.PI/180));  var nWinkel:Number = 0;  mPoly._x = pXPos;  mPoly._y = pYPos;

 mPoly.lineStyle (1, 0 × 000000, 100);

 mPoly.moveTo(Math. cos(nWinkel*(Math. PI/180))*nRadius, Math. sin(nWinkel*(Math. PI/180))*nRadius);

 for (var i:Number = 0; i
 xPos = Math.cos(nWinkel*(Math. PI/180))*nRadius;  yPos = Math.sin(nWinkel*(Math. PI/180))*nRadius;  mPoly.lineTo(xPos, yPos); }

//–--------- aufruf –----------------

//–––------ functions –--------------

 polygon(this, 3, 100, Stage.width/2, Stage.height/2);

 var xPos:Number, yPos:Number;

Flash zeigt in Bühnenmitte ein nach rechts zeigendes gleichseitiges Dreieck mit einer Seitenlänge von 100 Pixeln. Wir übergeben als Parameter ähnlich unserer Kreisfunktion die Zeitleiste, in der ein Behälter für

 function polygon(pWer:MovieClip, pEcken:Number, pLaenge:Number, pXPos:Number, pYPos:Number):Void {

 var nTiefe:Number = pWer.getNextHighestDepth();

13.4  Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern)

169

die Zeichnung eingerichtet wird, die Anzahl der Vertices bzw. Eckpunkte, die Seitenlänge sowie x- und y-Position des Behälters. Am Anfang der Funktion definieren wir einige Variablen, die später für die Positionsberechnung der Vertices benötigt werden. In nTiefe speichern wir den nächsten freien Wert, so dass wir leicht mehrere Kreise in der selben Zeitleiste bzw. in demselben MovieClip zeichnen können. Anschließend referenzieren wir den Zeichnungsbehälter in mPoly. Alle Eckpunkte oder Vertices eines Polygons liegen auf einem gedachten Kreis. Der Trick besteht nun darin, den Radius des Kreises aus der vorgegebenen Seitenlänge zu errechnen. Die trigonometrischen Funktionen ermöglichen es uns, bei bekannter Gegenkathete und Winkel die Hypotenuse eines rechtwinkligen Dreiecks zu berechnen. Ein derartiges Dreieck erhalten wir, wenn wir eine Seitenlänge des gewünschten Dreiecks, das nicht rechtwinklig, sondern nur gleichschenklig ist, halbieren. Dann entspricht die halbe Strecke von pLaenge der Gegenkathete und die Hypotenuse dem gesuchten Radius. Der benötigte Winkel zur Hypotenuse ergibt sich aus einer Drehung von 360 Grad dividiert durch die Anzahl der Seiten des Polygons sowie dividiert durch 2 (s. u.). Wenn wir beispielsweise drei Seiten (für unser zu zeichnendes Dreieck) verwenden, dann ist jedes so gezeichnete Segment um 120  Grad gegenüber dem vorhergehenden versetzt. Diese Berechnung führen wir in obigem Skript für die Variable nDif durch. Die Position der Eckpunkte lässt sich über Sinus und Kosinus bestimmen.

Der eigentliche Zeichenvorgang greift wieder die Kreisfunktion auf, die wir oben bereits verwendet haben: Über Kosinus und Sinus können wir Punkte auf einem Kreis berechnen. In unserem Fall ergibt sich die Anzahl der Punkte einfach aus der Anzahl der im Parameter pEcken übergebenen Vertices. Wenn wir die Position der Punkte errechnet haben, verbinden wir sie mit einer Geraden. Im Prinzip haben wir oben beim Zeichnen des Kreises genau dasselbe getan. Dort war jedoch die Länge der Linien so klein und ihre Anzahl so hoch, dass für uns optisch ein Kreis entstand. Beim in der letzten Zeile erfolgenden Aufruf von polygon() übergeben wir als Argumente den MovieClip, in dem der Zeichenbehälter erstellt werden soll, die Anzahl der Vertices, die Seitenlänge sowie die horizontale und vertikale Position des Behälters. Falls Sie mit der Drehung der Zeichnung nicht zufrieden sind, so können wir einfach festlegen, dass beispielsweise die Oberkante in jedem Fall horizontal gerade gezeichnet werden soll. Ein so gezeichnetes Dreieck weist mit der Spitze nach unten.

Die benötigte Formel lässt sich ableiten aus:

4. Ändern Sie den zweiten Aufruf von polygon() (Fettdruck):

Sinus Winkel = Gegenkathete/Hypotenuse Um die Hypotenuse zu errechnen, ergibt sich daraus: Hypotenuse = Gegenkathete/ Sinus Winkel Dem entspricht in unserem Skript die Berechnung von nRadius. Dabei müssen wir jedoch beachten, dass unser rechtwinkliges Dreieck nur eine Hälfte des zu zeichnenden Dreiecks bildet, denn wir haben ja die Seitenlänge halbiert. Dementsprechend müssen wir auch den Winkel, der in die Berechnung von nRadius einfließt, halbieren. Last not least erfolgt eine Umrechnung von Grad in Bogenmaß, da Flash einen anderen Maßstab verwendet als der sogenannte Einheitskreis. Wir legen willkürlich als Startwinkel 0 fest. Dieser Wert bestimmt die Drehung des Objekts.

3. Ändern Sie die Initialisierung von nWinkel (Fettdruck): var nWinkel:Number = -90 – nDif/2;

Da der Einheitskreis bei einer Drehung von 0  Grad nach rechts weist, drehen wir entgegen dem Uhrzeigersinn um 90  Grad, was einer Subtraktion von 90 entspricht. Zusätzlich müssen wir davon die Hälfte der errechneten Differenz subtrahieren, um den bei der Zeichnung entstehenden Versatz am Anfang auszugleichen.

 polygon(this, 11, 120, Stage.width/2, Stage.height/2);

Wie beim Dreieck wird auch beim wie-auch-immerPolygon mit elf Kanten die Oberkante gerade gezeichnet. 5. Ändern Sie die Initialisierung von nWinkel (Fettdruck): var nWinkel:Number = 90 – nDif/2;

Alternativ: var nWinkel:Number = -90;

Jetzt wird bei beiden Objekten die Unterkante horizontal gerade dargestellt.

170

Achten Sie darauf, beim Experimentieren mit verschiedenen Werten die hier als Argument übergebene Seitenlänge nicht mit dem Radius zu verwechseln. Wenn Sie jeweils eine gleichbleibende Seitenlänge von beispielsweise 100 wählen und sukzessive die Anzahl der Ecken erhöhen, muss sich der Radius zwangsläufig ebenfalls vergrößern. Irgendwann ist er so groß, dass Sie das gezeichnete Polygon nicht mehr sehen können, weil seine Seiten außerhalb der Bühne liegen. Diese hier vorgestellte Funktion ist letzten Endes nichts anderes als die oben beim Kreiszeichnen kennen gelernte, nur dass wir dort mit einem vorgegebenen Radius arbeiten konnten, der jetzt erst errechnet werden muss. Mit kleinen Änderungen können wir die Funktion zur Erstellung von Sternen einsetzen. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu (Änderungen gegenüber vorhergehender Übung in Fettdruck): //--------- functions –-------------  function stern(pWer:MovieClip, pEcken:Number, pLaenge:Number, pXPos:Number, pYPos:Number, pSpitze:Number):Void { pEcken *= 2;

 var xPos:Number, yPos:Number, nKnick:Number;

 var nTiefe:Number = pWer.getNextHighestDepth();

 var mPoly:MovieClip = pWer.create­­ EmptyMovieClip(„behPolygon“+nTiefe, nTiefe);  var nDif = 360/pEcken;

 var nRadius:Number = (pLaenge/2)/ Math.sin((nDif/2)*(Math.PI/180));  var nWinkel:Number = 0;  mPoly._x = pXPos;  mPoly._y = pYPos;

 mPoly.lineStyle(1, 0 × 000000, 100);

 mPoly.moveTo(Math. cos(nWinkel*(Math.PI/180))*nRadius, Math.sin(nWinkel*(Math. PI/180))*nRadius);  for (var i:Number = 1; i<=pEcken; i++) {  nWinkel += nDif;

Kapitel 13  Zeichnungsmethoden der MovieClip-Klasse

 nKnick = (i%2)*(nRadius* pSpitze);

 xPos = Math.cos(nWinkel*(Math. PI/180))*(nRadius-nKnick);  yPos = Math.sin(nWinkel*(Math. PI/180))*(nRadius-nKnick);  mPoly.lineTo(xPos, yPos); } }

//---------- aufruf –---------------  stern(this, 7, 80, Stage.width/2, Stage.height/2, 0.6);

Flash zeichnet einen Stern mit 7 Zacken. Eigentlich stellt ein Stern nichts anderes dar als ein Polygon mit eingedrückten Seiten. Daher kann man ein Polygon zeichnen, muss aber bei jedem zweiten Schritt dafür sorgen, dass der Radius kleiner als bei einer Spitze ist. Außerdem ist zu beachten, dass die Anzahl der Spitzen und der Dellen miteinander übereinstimmt. Gegenüber der polygon()-Funktion benötigen wir einen zusätzlichen Parameter pSpitze, in dem festgelegt wird, wie tief die Delle sich eindrückt. Um einen dynamischen Zusammenhang zum Radius herzustellen, wird der hier übergebene Wert später mit dem Radius verrechnet. Zwar könnte man beim Aufruf jeweils eine gerade Zahl übergeben, so dass Spitzen und Dellen gleich verteilt werden, was jedoch fehleranfällig wäre. Daher übergeben wir lediglich die Anzahl der Spitzen und duplizieren einfach den Wert. Zusätzlich richten wir die Variable nKnick ein. In der für das Zeichnen verantwortlichen Schleife errechnen wir einen konkreten Wert für nKnick, den wir jedes Mal vom errechneten nRadius subtrahieren. Da jedoch nur bei jedem zweiten Zeichnen der Radius verkleinert werden soll, muss nKnick zwischen dem Wert 0 und einem Wert größer 0 oszillieren. Dies geschieht, indem wir den Restwert der Division von i durch 2 verwenden. Bei jeder ungeraden Zahl beträgt der Rest 1, bei jeder geraden 0. Multiplizieren wir dieses Ergebnis mit einer anderen Zahl, erhalten wir bei jeder zweiten Multiplikation 0, ansonsten eben diese Zahl. Als Faktor verwenden wir eine Multiplikation von nRadius mit einem positiven Wert kleiner 1. Dadurch wird die Zahl kleiner als nRadius, so dass der resultierende Knick nie bis zum Sternmittelpunkt reicht, egal welchen Radius wir errechnen. Andererseits ist die Zahl groß genug,

13.4  Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern)

so dass ein wahrnehmbarer Knick nach innen entstehen kann. Da wir den Aufruf von moveTo() unverändert übernommen haben, also im letzten Schritt vor der Schleife eine Spitze zeichnen, benötigen wir im ersten Schritt innerhalb der Schleife einen Knick. Würden wir wie zuvor die Schleife mit i = 0 beginnen, erhielten wir infolge Modulo ebenfalls 0 und es würde eine Spitze gezeichnet. Daher verschieben wir den Startwert um 1 und müssen gleichzeitig den Endwert um 1 erhöhen, so dass uns kein Zeichenschritt fehlt. Beim Aufruf in der letzten Zeile übergeben wir wie gewohnt die Argumente, wobei an letzter Stelle der Faktor hinzugekommen ist, mit dem wir den Radius multiplizieren, um eine Delle zeichnen zu können. Vernünftige Resultate erhalten Sie, wenn Werte zwischen 0.4 und 0.7 übergeben werden. Zugegebenermaßen werden Sie eher nicht mit den Zeichnungsmethoden ein Haus zeichnen (zumal Sie schneller wären, wenn die Grafik händisch erstellt wird). Aber sie machen Sinn bei aufwändigeren Applikationen. Stellen Sie sich beispielsweise eine Anwendung vor, die externe Daten einliest, um sie in Diagrammen zu visualisieren. Die Diagramme lassen sich dann per Skripting erzeugen. Natürlich könnte man vorher MovieClips erstellen und damit etwa Balkendiagramme aufbauen (attachMovie, _ xscale/_yscale). Aber die Darstellung von Kreisdiagrammen würde zur aufwendigen Fummelarbeit. Ein Kreissegment lässt sich nicht mehr wie ein Balken durch simples Skalieren abbilden, programmiertechnisch kann es aber sehr wohl erstellt werden.

171

Zahlreiche Effekte können nur dynamisch gezeichnet werden, etwa geometrische Figuren, die ihre Form und Position abhängig von User-Aktionen ändern. Stellen Sie sich Linien vor, die über den Screen, ausgehend von der Maus, gezeichnet werden. Sie weisen eine Krümmung abhängig von der Mausposition innerhalb der unteren oder oberen Screenhälfte auf. Schon die Krümmung wäre mit einem vorgefertigten MovieClip nicht mehr realisierbar, wenn sich die Kurve dynamisch anpassen soll. Ein derartiges Beispiel finden Sie im Workshop Effekte. Ein beliebter Effekt ist das Nachzeichnen des Umrisses eines Objekts. Dazu verwendet man üblicherweise eine Maske, die den Umriss freilegt. Dieses Vorgehen ist nicht nur recht unflexibel, da kleine Änderungen schon mal zum vollständigen Neuaufbau des Maskentweens zwingen können, sondern auch noch ziemlich zeitaufwendig. Erheblich einfacher lässt sich derselbe Effekt mit einer geskripteten Zeichnung realisieren. Da sich auch Masken dynamisch zeichnen lassen, ergeben sich weitere Möglichkeiten für Effekte, von denen Sie einige im Workshop Maskeneffekte kennen lernen. Last not least ermöglichen es diese Methoden, zur Laufzeit ein Interface aufzubauen, das, mit Filter- und Ebeneneffekten aufgepeppt, einem händisch erstellten in nichts nachsteht. Es hat jedoch den enormen Vorteil, jederzeit leicht änderbar zu sein – vor allem durch den User, der sich beispielsweise eine eigene Skin aussuchen kann, die erst dann als Grafik erzeugt wird, wenn wir sie benötigen.

14

String, Textfield, Textformat

Seit Jahrtausenden zählt geschriebener Text zu den wichtigsten Informationsträgern menschlicher Kultur. Daran haben weder Fernsehen noch die digitalen Medien etwas geändert. Auch wenn viele Webseiten mit visuellen Mitteln arbeiten, so kommen doch die meisten nicht ohne Text aus. Darüber hinaus übt Text wie das Bild oft eine ästhetische Funktion aus, auch das ein Charakteristikum vieler Schriftkulturen. Man denke nur an die verzierten Buchstaben von mittelalterlichen Inkunabeln und Frühdrucken. Zumindest prinzipiell sind davon viele Webseiten nicht weit entfernt, wenn sie Schrift als „Hingucker“ verwenden. Dessen eingedenk bietet ActionScript mehrere Klassen und zahlreiche Methoden, um mit Texten arbeiten zu können. Der Datentyp String wurde bereits im Kapitel über Datentypen angesprochen. Wir wollen uns nun näher damit befassen, um anschließend die Text- und die Selection-Klasse zu erörtern.

14.1 Strings erzeugen und String-Wert auslesen Text besteht aus einem oder mehreren Strings, worunter Zeichenfolgen zu verstehen sind. Wie wir oben gesehen haben, gehört ein String zu den einfachen bzw. primitiven Datentypen. Die String-Klasse stellt einen Wrapper bzw. eine Wrapper-Klasse für diesen Datentyp dar und bietet mit eigenen Methoden und Eigenschaften spezielle Bearbeitungsmöglichkeiten. Sie verwendet den Unicode-Zeichensatz. Um einen String kenntlich zu machen, muss er, wie Sie im Kapitel über Variablen erfahren haben, von einem einfachen (‚, auf der Tastatur das Zeichen über der Raute #) oder doppelten Anführungszeichen („) eingeschlossen werden.

Wollen wir von der Wrapper-Klasse wieder zum primitiven Datentyp bzw. dem eigentlichen Wert gelangen, gibt es drei Vorgehensweisen, wie das folgende Beispiel zeigt. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var sZitat:String = „Die Giraffe ist ein durch Neugier verlängertes Pferd.“; trace(sZitat.valueOf());

trace(sZitat.toString()); trace(sZitat);

Ausgabe im Nachrichtenfenster: Die Giraffe ist ein durch Neugier verlängertes Pferd. Die Giraffe ist ein durch Neugier verlängertes Pferd. Die Giraffe ist ein durch Neugier verlängertes Pferd. Zunächst richten wir einen String durch simple Zuweisung ein. Alternativ zu dieser Schreibweise kann man einen String mit Hilfe des gleichlautenden Konstruktors einrichten. Dann sähe die erste Zeile folgendermaßen aus: var sZitat:String = new String(„Die Giraffe ist ein durch Neugier verlängertes Pferd.“);

Wir verwenden hier und im nachfolgenden die kürzere, üblichere Schreibweise. Anschließend greifen wir in der ersten Variante auf die Methode valueOf() zurück. Sie ermittelt für jede Klasse den zugehörigen primitiven Datentyp, falls vorhanden. Die toString()-Methode wandelt das zugeordnete Element in einen String zurück, unabhängig davon, worum es sich vorher handelte. Bedenken Sie bei der Verwendung der Methode, dass sie nicht notwendi-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

173

174

gerweise überall Sinn macht. Last not least bleibt der direkte Zugriff auf den String, der zwangsläufig den Datentyp String besitzt. Der Einfachheit halber verwenden man i. d. R. die letztgenannte Variante.

14.2 Länge Die String-Klasse stellt nur eine einzige Eigenschaft zur Verfügung, nämlich die Länge der betreffenden Zeichenkette. 3. Erweitern Sie obiges Beispiel um folgende Zeile:  trace(„Der String sZitat umfasst „ + sZitat.length + „ Zeichen.“);

Ausgabe im Nachrichtenfenster: Der String sZitat umfasst 53 Zeichen. Berücksichtigt werden alle Zeichen einschließlich der Leerzeichen, woraus sich für unseren Beispielstring die angezeigte Gesamtlänge ergibt. Die Eigenschaft length ist schreibgeschützt und kann anders als etwa bei Arrays nicht gesetzt werden, um den String zu verkürzen oder zu verlängern.

14.3 Verkettung Im vorhergehenden Beispiel lag der verwendete Text als ein einheitlicher String vor. Gerade in dynamischen Anwendungen jedoch setzen wir oft aus verschiedenen Informationen einen String zusammen. Dazu bietet Flash einerseits den Konkatenationsoperator + an, den wir bereits im Kapitel über Operatoren kennen gelernt und beispielsweise oben in Schritt 3 verwendet haben. Andererseits existiert eine concat()-Methode, die Ähnliches leistet wie die entsprechende Methode der Array-Klasse. 4. Erweitern Sie obiges Beispiel um folgende Zeile: var sVorname:String = „Ramon Gomez „; var sNachname:String = „de la Serna“;  var sAutor:String = „Das Zitat stammt von: „;  trace(sAutor.concat(sVorname, sNach­ name));

Kapitel 14  String, Textfield, Textformat

Ausgabe im Nachrichtenfenster: Das Zitat stammt von: Ramon Gomez de la Serna Wir definieren drei verschiedene Strings. Anschließend rufen wir für den letzten String die concat()Methode auf und übergeben als Argumente die beiden ersten Strings. Dadurch werden sie zu einem einzigen String zusammengesetzt und per trace()Anweisung im Nachrichtenfenster ausgegeben. Die concat()-Methode fügt einfach an denjenigen String, dem sie durch die Punktsyntax zugeordnet wird, all diejenigen Zeichenketten an, die sie als Argumente erhält. Wir können dabei einen String sowohl im Klartext wie auch als Objekt bzw. Variable angeben. Beachten Sie, das der Aufruf von trace() nicht zu einer permanenten Änderung von sAutor führt. Wollten wir dies erreichen, müssten wir zuerst eine entsprechende Zuweisung ausführen. 5. Fügen Sie vor der letzten trace()-Anweisung folgende Zeile ein:  sAutor = sAutor. concat(sVorname,sNachname);

6. Ändern Sie den darauf folgenden trace()-Befehl (Fettdruck): trace(sAutor);

Ausgabe im Nachrichtenfenster: Das Zitat stammt von: Ramon Gomez de la Serna Wir ändern sAutor permanent, indem wir für diese Variable die concat()-Methode in derselben Form aufrufen, wie wir es zuvor innerhalb der trace()Anweisung taten. Danach geben wir sAutor aus und erhalten dieselbe Meldung wie vorher.

14.4 Escape-Sequenzen und Sonderzeichen Wir haben oben in Schritt 3 den Inhalt des Zitats ausgeben lassen. In der dort angegebenen Form ist das unproblematisch. Anders sieht es jedoch aus, wenn Sie das Zitat bei der Ausgabe in Anführungszeichen setzen wollen. 7. Erweitern Sie das Skript um folgende Zeilen:

14.4  Escape-Sequenzen und Sonderzeichen

 var sZitat2:String = „Zitat: „Mikro­ phone sind das Einzige, das sich Po­ litiker gerne vorhalten lassen.““; trace(sZitat2);

Wenn Sie testen, erhalten Sie eine Fehlermeldung. Denn Flash ist nicht in der Lage, die inneren Anführungszeichen, die das konkrete Zitat umschließen, von den äußeren, die den gesamten String kennzeichnen, zu unterscheiden. Formal endet der String nach dem auf den Doppelpunkt folgenden Leerzeichen, während die nachfolgenden Begriffe als falsch verkettete Variablen gesehen werden. Eine Lösung wäre, mit verschiedenen Anführungszeichen zu arbeiten.

175

führungszeichen werden durch einen vorangestellten Schrägstrich gekennzeichnet, so dass sie nicht als Anfang bzw. Ende eines Strings, sondern als genau so darzustellendes Zeichen gelesen werden. Allgemein ermöglicht es das Escape-Zeichen, diejenigen Zeichen, die für ActionScript in irgendeiner Form eine eigenständige Bedeutung haben, als simple Strings darzustellen. Außerdem dienen sie dazu, Sonderzeichen einzufügen, etwa um in einem Text einen Zeilenumbruch oder einen Tabulator zu erzwingen. 10. Ändern Sie die Initialisierung von sZitat2 (Fettdruck):

8. Ersetzen Sie die äußeren, doppelten Anführungszeichen jeweils durch einfache Anführungszeichen (Fettdruck):

 var sZitat2:String = „Zitat: \n\t\ „Mikrophone sind das Einzige,\n\tdas sich Politiker gerne vorhalten las­ sen.\““;

 var sZitat2:String = ‚Zitat: „Mikro­ phone sind das Einzige, das sich Po­ litiker gerne vorhalten lassen.“‚;

Ausgabe im Nachrichtenfenster: Zitat: „Mikrophone sind das Einzige,

Ausgabe im Nachrichtenfenster: Zitat: „Mikrophone sind das Einzige, das sich Politiker gerne vorhalten lassen.“

das sich Politiker gerne vorhalten lassen.“

Ein String erstreckt sich immer vom ersten bis zum nächsten Auftreten eines Anführungszeichens. Da das einfache Anführungszeichen den vollständigen Text inklusive der doppelten Anführungszeichen umschließt, kann Flash den String korrekt lesen und dementsprechend im Nachrichtenfenster wiedergeben. Dabei spielt es überhaupt keine Rolle, wie viele doppelte Anführungszeichen eingeschlossen werden. Eine wesentlich flexiblere Methode besteht in der Verwendung sogenannter Escape-Sequenzen, die durch einen simplen Backslash gekennzeichnet werden. 9. Ändern Sie die Initialisierung von sZitat2 (Fettdruck):  var sZitat2:String = „Zitat: \„Mikro­ phone sind das Einzige, das sich Po­ litiker gerne vorhalten lassen.\“„;

Ausgabe im Nachrichtenfenster: Zitat: „Mikrophone sind das Einzige, das sich Politiker gerne vorhalten lassen.“ Aus Gründen der Übersichtlichkeit verwenden wir wie anfangs zur Kennzeichnung von Strings doppelte statt einfacher Anführungszeichen. Die inneren An-

Wir fügen innerhalb des sZitat2 zugewiesenen Strings vor Beginn des Zitats einen Zeilenumbruch (\n) sowie eine Einrückung (\t) ein. Dasselbe machen wir innerhalb des Zitats unmittelbar nach dem Komma. Dadurch erreichen wir eine rudimentäre Formatierung. Wenn Sie den Backslash vor den Zeichen n und t entfernen, werden diese Zeichen als Strings unmittelbar mit ausgegeben, eine Formatierung des Textes entfällt dann. Zusätzlich lassen sich auf diese Weise Sonderzeichen aus dem Unicode-Satz angeben. Sie werden jeweils eingeleitet mit \u, gefolgt von dem entsprechenden Unicode. 11. Fügen Sie am Ende des Skripts folgende Zeile ein:  trace(„sZitat2 \u00A9 by Günter Müg­ genburg“);

Ausgabe im Nachrichtenfenster: sZitat2 © by Günter Müggenburg Mit Hilfe des Escape-Zeichens und dem nachgestellten u als Kürzel für Unicode fügen wir das Copyright-Symbol ein. Dessen Code lautet im UnicodeZeichensatz 00A9. Den betreffenden Zeichensatz und weitergehende Informationen hält die Site www. unicode.org bereit. Zugegebenermaßen kann man

176

Kapitel 14  String, Textfield, Textformat

geistige Bonmonts noch nicht patentieren lassen, aber in einer Welt, in der sogar Patente auf Lebensformen möglich sind, dürfte auch der Copyright-Vermerk bei Zitaten nicht mehr lange auf sich warten lassen. Folgende Tabelle gibt einen Überblick über die Sonderzeichen: Escape- Bedeutung Sequenz

einzelnen Zeichens innerhalb einer Zeichenkette wird genauso wie bei Arrays über einen mit 0 beginnenden Index bestimmt. Die Deklaration von sBuchst muss nicht zwangsläufig erfolgen. Statt dessen wäre der direkte Aufruf der charCodeAt()-Methode möglich: var nASCII:Number = („A“). charCodeAt(0);

\’

Einfaches Anführungszeichen

\“

Doppeltes Anführungszeichen

\\

Backslash

\b

Rückschritt

\f

Seitenvorschub

Die Variable besitzt jedoch den Vorteil der größeren Flexibilität, etwa wenn wir sie zur Laufzeit noch einmal verwenden, aber mit anderem Inhalt füllen. Misstrauische Naturen erwarten an dieser Stelle übrigens die Gegenprobe hinsichtlich der ausgegebenen Zahl.

\n

Zeilenumbruch

3. Erweitern Sie den Code:

\r

Wagenrücklauf

\t

Tabulator

 trace(„Zeichen: „+String. fromCharCode(nASCII));

\u

Leitet Sonderzeichen per Unicode-Zeichensatz ein

Beispielhafte Escape-Sequenzen

14.5 ASCII-Zeichensatz Auch unabhängig von den Escape-Sequenzen ist jeder String kodiert, d. h. ihm entsprechen jeweils spezifische Zeichen des ASCII-Codes. Diese Zeichen lassen sich auslesen und dazu verwenden, um Strings zu verändern. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf actions folgendes Bildskript ein: var sBuchst:String = „A“;

 var nASCII:Number = sBuchst. charCodeAt(0); trace(„Code: „+nASCII);

Ausgabe im Nachrichtenfenster: Code: 65 Zunächst legen wir in einer Variablen den Buchstaben fest, dessen Code wir ermitteln wollen. Anschließend speichern wir den Code, der einer Zahl entspricht, in einer weiteren Variablen und lassen diese im Nachrichtenfenster ausgeben. Der Zugriff auf den Code erfolgt mit der charCodeAt()-Methode, die als Argument eine Indexzahl erwartet. Die Position eines

Ausgabe im Nachrichtenfenster: Zeichen: A Auch der umgekehrte Weg ist möglich: Wir können eine Zahl angeben und mit Hilfe der fromCharCode()Methode das zugehörige Zeichen ermitteln. In unserem Fall übergeben wir den über charCodeAt() herausgefunden Code und lassen uns den dort definierten String im Nachrichtenfenster ausgeben. Damit lässt sich eines der ältesten Prinzipien von Geheimschriften und Verschlüsselungsverfahren demonstrieren: Die Substitution, also die Ersetzung eines Buchstaben durch einen anderen. Schon Cäsar benutzte diese Form, die – darf man das hier erwähnen? – sogar vom Kamasutra den Damen als eine von 64 notwendigen Künsten anempfohlen wird. Um nicht ungewollt in Konkurrenz zu Herrn Zimmermann zu treten, beschränken wir uns auf die denkbar einfachste Form. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf actions folgendes Bildskript ein: //-------------- vars –-------------  var sKlartext:String = „Verschlüsse­ lung ist eine Kunst!“; var sVerschluesselt:String = „“; var sEntschluesselt:String = „“; var nCode:Number;

var nSubst:Number = 1;

14.5  ASCII-Zeichensatz

//----------- functions ––––--------  function schluessel(psText:String, pnPlusMinus:Number):String {  nCode = psText.charCodeAt(0);  nCode += nSubst*pnPlusMinus;  var sErgebnis = String. fromCharCode(nCode);  return sErgebnis; }

this.onMouseDown = function() {

 for (var i:Number = 0; i<sKlartext. length; i++) {  sVerschluesselt += schluessel (sKlartext.charAt(i), 1); }

 trace(„Verschlüsselt: „+sVerschluesselt); };

this.onMouseUp = function() {

 for (var i:Number = 0; i<sVerschluesselt.length; i++) {  sEntschluesselt += schluessel(sVerschluesselt. charAt(i), -1); }

 trace(„Entschlüsselt: „+sEntschluesselt); };

trace(„Unverschlüsselt: „+sKlartext);

Ausgabe im Nachrichtenfenster nach einmaligem Mausklick: Unverschlüsselt: Verschlüsselung ist eine Kunst! Verschlüsselt: Wfstdimýttfmvoh!jtu!fjof!Lvotu“ Entschlüsselt: Verschlüsselung ist eine Kunst! Die zugrundeliegende Idee ist ausgesprochen simpel: Wir schauen nach, welchem ASCII-Code ein String Zeichen für Zeichen entspricht. Dann verschieben wir diesen Code durch Addition einer bestimmten Zahl und ermitteln, welches Zeichen sich daraus ergibt. Dieses Zeichen repräsentiert das verschlüsselte Element. Bei der Entschlüsselung müssen wir das Verschieben des ASCII-Codes lediglich rückgängig machen, also statt einer Addition eine Subtraktion durchführen. Wir richten uns zunächst eine Reihe von Variablen ein:

177

• var

sKlartext: String, der ver- und entschlüs-

• var

sVerschluesselt: String, der die Ver-

• var

sEntschluesselt: String, der die Ent-

selt wird;

schlüsselung enthält; schlüsselung enthält;

• var

nCode:Number: ASCII-Code, um das neue Zeichen zu errechnen; • var nSubst:Number: Zahl, um die der ASCIICode verschoben werden soll.

Anschließend definieren wir eine Funktion, die als Parameter das Zeichen, das zu ver- bzw. entschlüsseln ist, sowie einen Multiplikator erwartet. In ihrer ersten Anweisung ermitteln wir den ASCII-Code des beim Aufruf als Argument übergebenen Strings (der hier immer nur aus einem einzigen Zeichen besteht). Der ASCII-Code entspricht einer Zahl, die wir in der nächsten Zeile entweder um 1 inkrementieren oder dekrementieren. Unser Problem an dieser Stelle besteht darin, eine Anweisung zu schreiben, die einmal addiert (bei der Verschlüsselung) und einmal subtrahiert (bei der Entschlüsselung). Da sich eine Subtraktion auch als Addition einer negativen Zahl beschreiben lässt, müssen wir dafür sorgen, dass nSubst in der betreffenden Zeile negativ werden kann. Das funktioniert, indem wir entweder beim Aufruf die Variable als negative Zahl oder einfach eine  –1 übergeben, mit der die Variable hier in der Anweisung multipliziert wird. Eine positive mit einer negativen Zahl multipliziert ergibt eine negative Zahl. Abschließend schauen wir nach, welches Zeichen dem so veränderten ASCII-Code entspricht und geben es mit return an den Aufruf zurück. Der Aufruf erfolgt sowohl im onMouseDown-Ereignis wie auch im onMouseUp-Ereignis, wobei wir lediglich verschiedene Argumente übergeben müssen. Beim Drücken der Maus erhält die schluessel()Methode sukzessive jedes einzelne Zeichen, das wir ganz am Anfang in sKlartext speicherten. Die Methode charAt() erlaubt den Zugriff auf jedes beliebige, durch einen Index festgelegte Zeichen, wobei wir als Wert einfach die Zählvariable i verwenden. Und ebenfalls Stück für Stück erhalten wir das veränderte Zeichen zurück, das jeweils an den String sVerschluesselt angehängt wird. Sind alle Zeichen abgearbeitet, erfolgt die Ausgabe des verschlüsselten Textes.

178

Lassen wir die Maus los, rufen wir erneut die Methode auf, übergeben diesmal aber zeichenweise den bereits verschlüsselten Text. Um die oben erwähnte Subtraktion zu erreichen, erhält die Methode als weiteres Argument eine negative Zahl. Das zurückgegebene Zeichen hängen wir an den String sEnt­ schluesselt, den wir nach der vollständigen Entschlüsselung im Nachrichtenfenster anzeigen. Zwecks Kontrolle rufen wir, noch bevor der Anwender mit der Maus klicken kann, die trace()-Anweisung auf, um den Originaltext einsehen zu können.

14.6 Teilstrings extrahieren Neben charAt(), mit dem wir auf nur ein einzelnes Zeichen zugreifen, verfügt die String-Klasse über drei weitere Methoden, um ganze Zeichenketten aus einer größeren Zeichenkette zu extrahieren. Es handelt sich dabei um die substr()-, substring()- und slice()-Methoden, die recht ähnlich arbeiten. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf actions folgendes Bildskript ein:  var sZitat:String = „Die Demokratie ist jene Staatsform, in der man sagt, was man will, und tut, was einem ge­ sagt wird.“; var nStart:Number = 4;

 var nLaenge:Number = („Demokratie“). length;  trace(„substr()-Methode: „ + sZitat. substr(nStart,nLaenge));

 trace(„substring()-Methode: „ + sZi­ tat.substring(nStart,nStart+nLaenge));  trace(„slice()-Methode: „ + sZitat. slice(nStart,nStart+nLaenge));

Ausgabe im Nachrichtenfenster: substr()-Methode: Demokratie substring()-Methode: Demokratie slice()-Methode: Demokratie In der ersten Zeile initialisieren wir eine Variable mit einem String, aus dem wir jeweils die Zeichenkette „Demokratie“ extrahieren wollen. Da der gewünschte Begriff ab Index 4 beginnt, speichern wir diesen Wert in einer Variablen. Ebenso verfahren wir mit der Länge des Begriffs, die wir später auf zwei verschiedene Arten verwenden wollen.

Kapitel 14  String, Textfield, Textformat

Als erstes rufen wir die substr()-Methode auf, die als erstes Argument genau wie die anderen beiden Methoden auch den Index erwartet, an dem die ausgewählte Zeichenkette beginnt. Als zweites Argument übergeben wir die Gesamtlänge und erhalten den gesuchten Begriff im Nachrichtenfenster. Bei der substring()-Methode müssen wir nach dem erwähnten Start-Index denjenigen Index angeben, an dem das erste Zeichen liegt, das nicht mehr zum gesuchten Teilstring gehört. Den benötigten Wert errechnen wir einfach durch Addition des Startindex und der Länge des gewünschten Teilstrings. Die slice()-Methode funktioniert genauso wie die substring()-Methode, kann aber auch mit negativen Indexwerten arbeiten. I. d. R. können Sie getrost darauf verzichten. Bei allen Methoden ist das zweite Argument jeweils optional. Lassen Sie es weg, verwendet Flash immer den gesamten String ab angegebenem Startindex. Eine sinnvolle Namenskonvention vorausgesetzt, stellen diese Methoden eine mächtige Möglichkeit dar, um Objekte abhängig von User-Interaktionen einander zuzuordnen. So können wir beispielsweise über die Instanznamen bei onRollOver anzuzeigenden Infotext ermitteln oder bei Mausklick auf Thumbnails herausfinden, welches größere Bild eingeblendet werden muss. Eine vierte Methode funktioniert etwas anders, indem sie einen String in ein Array umwandelt. 3. Erweitern Sie den Code um folgende Zeilen: var aZitat:Array = [];

aZitat = sZitat.split(„ „); trace(aZitat[1]);

Ausgabe im Nachrichtenfenster: Demokratie Wir richten ein leeres Array ein und weisen ihm in der nächsten Zeile den Inhalt des durch die split()Methode geteilten Strings zu. Dabei wird das Leerzeichen als Trennzeichen definiert, so dass jeder durch Leerzeichen getrennter String als einzelnes Element des Arrays interpretiert wird. Anschließend greifen wir beispielhaft auf das zweite Element innerhalb von aZitat zu und erhalten „Demokratie“. Diese Methode erweist sich beispielsweise dann als wichtig, wenn wir mit der loadVars-Klasse externe Textdateien laden wollen, die wir in Form eines Arrays weiter bearbeiten müssen. Da Textdateien notgedrungen nur einfache Strings enthalten, ermöglicht die genannte Methode die notwendige Umwandlung.

14.8  Groß-/Kleinbuchstaben

Als Trennzeichen sind bei der split()-Methode beliebige Zeichen möglich.

179

if (nStart != -1) {

t race(„Der gesuchte Begriff befindet sich an der Position „+nStart); }

14.7 Teilstrings ermitteln

Ausgabe im Nachrichtenfenster: Der gesuchte Begriff befindet sich an der Position 4

Im vorhergehenden Beispiel sahen wir, wie ein Teilstring extrahiert werden kann, wenn seine Position innerhalb des Gesamtstrings bekannt ist. Gerade in dynamischen Anwendungen fehlt genau dieser Wert, so dass wir eine Möglichkeit benötigen, herauszufinden, ob und gegebenenfalls wo sich der gesuchte String befindet.

Wir speichern in nStart den Startindex, den wir mit der indexOf()-Methode ermitteln. Um sicher zu gehen, dass wir bei der Verwertung von nStart keinen Fehler begehen, fragen wir zunächst ab, ob dessen Wert ungleich –1 ist. Falls ja, lassen wir uns eine entsprechende Meldung ausgeben. Andernfalls wurde er nicht gefunden und wir verzichten auf eine wie auch immer geartete Verwendung von nStart. Praktischerweise können wir an die indexOf()Methode ein optionales zweites Argument mitgeben, das bestimmt, ab welcher Position innerhalb des gesamten Strings wir suchen wollen. Damit besitzen wir den unschätzbaren Vorteil, einen String nicht nur einmal zu finden, sondern so oft, wie er tatsächlich vorhanden ist. Das Pendant zu dieser Methode ist die lastIndexOf()-Methode, die uns angibt, an welchem Index ein bestimmter String zuletzt auftritt. Diese Methoden helfen uns etwa bei der Prüfung einer Texteingabe auf ihre formale Korrektheit.

1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf actions folgendes Bildskript ein:  var sZitat:String = „Die Demokratie ist jene Staatsform, in der man sagt, was man will, und tut, was einem ge­ sagt wird.“;

 var sSuchstring:String = „Demokratie“; trace(sZitat.indexOf(sSuchstring));

Ausgabe im Nachrichtenfenster: 4 Nach der Definition des gesamten Strings legen wir in einer Variablen den Suchstring fest. Mit Hilfe der indexOf()-Methode können wir herausfinden, ob der Suchstring im gesamten String enthalten ist. Falls ja, gibt uns die Methode den Index des ersten Zeichens wieder, mit dem der gesuchte String beginnt. Wird er nicht gefunden, erhalten wir eine –1. 3. Lassen Sie testweise den Suchbegriff mit einem Kleinbuchstaben beginnen (Fettdruck):

14.8 Groß-/Kleinbuchstaben Mit den Methoden toUpperCase() und toLower­ Case() erlaubt es Flash, einen angegebenen String in Groß- oder Kleinbuchstaben umzuwandeln.

 var sSuchstring:String = „demokratie“;

1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf actions folgendes Bildskript ein:

Ausgabe im Nachrichtenfenster: –1

var sName:String = „ambrose Bierce“; trace(„Initialisierung: „ + sName);

Flash kann die gesuchte Zeichenkette nicht finden und gibt dementsprechend ein negatives Ergebnis zurück.

 trace(„Großbuchstaben: „ + (sName. charAt(0)).toUpperCase() + sName.sub­ str(1));

4. Korrigieren Sie den eben geradezu mutwillig eingefügten Schreibfehler wieder (Fettdruck):  var sSuchstring:String = „Demokratie“;

5. Ersetzen Sie den trace()-Befehl durch:  var nStart:Number = sZitat. indexOf(sSuchstring);

 trace(„Großbuchstaben: „ + sName. toUpperCase());

 trace(„Kleinbuchstaben: „ + sName. toLowerCase());

Zunächst definieren wir einen scharfzüngigen String, bestehend aus einem Vor- und Nachnamen. Das erste Zeichen des Vornamens wird absichtlich klein geschrie-

180

ben. In der nächsten Zeile lassen wir uns den String zur Kontrolle ausgeben. Anschließend ändern wir den Klein- in einen Großbuchstaben. Da es sich dabei nur um das erste Zeichen handelt, übergeben wir an die toUpperCase()-Methode den auf Index befindlichen Buchstaben des Strings sName. Um auch den Rest des Namens im Nachrichtenfenster zu erhalten, hängen wir an den ersten geänderten Buchstaben per Konkatenation alle Zeichen ab Index 1 an. Die nächste Anweisung mit toUpperCase() verwandelt alle Buchstaben des Strings unterschiedslos in Majuskeln, während die letzte Anweisung mit toLowerCase() die gesamte Zeichenkette in Minuskeln ausgibt. Abschließend ein kleines Beispiel: 3. Zeichnen Sie auf objects an beliebiger Position einen Kreis. 4. Wandeln Sie den Kreis in einen MovieClip um (Bibliotheksname beliebig, Instanzname kreis, Registrierungspunkt beliebig). 5. Fügen Sie nach dem bisherigen Code folgende Zeilen ein: kreis.onPress = function(){

 var sName:String = this._name;

 sName = (sName.charAt(0)).toUpper­ Case() + sName.substr(1);  trace(„Ich bin ein „ + sName); }

Bei Mausklick gibt das Objekt seine eigene Identität preis: „Ich bin ein Kreis“. Das könnte man als einen sehr simplen Tooltip verwendet. Da wir mit Camel Case arbeiten und somit alle Instanznamen mit einer Minuskel beginnen, speichern wir bei Mausklick in einer lokalen Variable den Namen des angeklickten Objekts. Anschließend ändern wir das erste Zeichen des Strings in einen Großbuchstaben und hängen daran alle nachfolgenden Zeichen unverändert an. Dieser Schritt entspricht exakt demjenigen, den wir bereits oben im zweiten trace()-Befehl kennen gelernt haben. Schließlich geben wir den so geänderten String aus.

Kapitel 14  String, Textfield, Textformat

von Flash mit Hilfe dreier Arten von Textfeldern erfasst werden: Statische, dynamische und Eingabefelder. Da statische Textfelder nicht veränderbar sind, kann man bis Flash 8 nicht per AS auf sie zugreifen. Das ist jedoch nicht weiter tragisch, denn mit dynamischen Textfeldern lässt sich all das realisieren, was man ohne Scripting mit statischen Feldern tun könnte – und noch einiges darüber hinaus. Wir betrachten zunächst ein in der Autorenumgebung erstelltes dynamisches Textfeld. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects links oben ein dynamisches Textfeld mit folgenden Eigenschaften ein: –– Verdana –– 11 Pkt. –– Dunkelgrau –– Bold –– Linksbündig –– Mehrzeilig –– Rahmen um Text –– Nicht auswählbar –– Breite ca. 160 Pixel –– Höhe ca. 33 Pixel –– Instanzname haendTxt. 3. Schreiben Sie in das Feld folgenden aussagekräftigen Satz: „Ich bin ein händisch erstellter Text!“. 4. Weisen Sie actions folgendes Bildskript zu: for(a in haendTxt){

 trace(a+“: „+haendTxt[a]); }

Wenn Sie testen, ergibt sich die in Abbildung 36 dargestellte Situation. Im Nachrichtenfenster werden alle Eigenschaften des Textfeldes wieder gegeben, die wir mit Hilfe der for-Schleife auslesen. Flash initialisiert Textfelder automatisch mit einer Reihe von Eigenschaften, die Standardwerte erhalten, falls wir sie nicht explizit setzen. Dazu gehören in unserem Fall u. a. restrict

14.9 Text, Textfelder Wenn Strings erwachsen werden, entwickeln sie sich zu vollwertigen Texten, die in der Autorenumgebung

Abbildung 36:  Händisch erstelltes Textfeld

14.9  Text, Textfelder

181

(Festlegung der zulässigen Zeichen), embedFonts (Einbetten eines Schriftfonts) oder variable (Auslesen einer Variablen). Andere Eigenschaften werden mit den von uns verwendeten Werten angezeigt: selectable (auswählbar)

false

multiline (mehrzeilig)

true

border (Rahmen)

true

text (Textinhalt)

Ich bin ein händisch erstellter Text!

type (Art des Textfeldes)

Dynamischer Text

textColor (Farbe des Textes)

0 (schwarz)

Manche Eigenschaften sind aufeinander bezogen. Wenn wir beispielsweise multiline auf true setzen, erhält wordwrap (Wortumbruch) ebenfalls diesen Wert. Wollen wir das nicht, müssen wir explizit die Option „mehrzeilig, ohne Wortumbruch“ auswählen. Legen wir das Anzeigen eines Rahmens fest, wird automatisch die Eigenschaft background auf true gesetzt. Das hat jedoch keinen Einfluss auf die Hintergrundfarbe, die auch bei nicht aktiviertem Rahmen sowie Hintergrund auf den angezeigten Wert fixiert ist. Um die angesprochenen Werte per AS zu ändern, reicht wie gewohnt eine einfache Zuweisung aus. So weist haendTxt.textColor = 0xcc0000 dem Text eine rote Farbe zu. Das funktioniert natürlich genau so bei einem vollständig per Skripting erstellten Textfeld, das wir weiter unten behandeln. Wenn Sie sich die Ausgabe im Nachrichtenfenster noch einmal anschauen, werden Sie feststellen, dass eine Eigenschaft dort nicht aufgeführt wird, obwohl sie von uns explizit festgelegt wurde, nämlich die Schriftauszeichnung fett. Um die Eigenschaften der Schrift verändern zu können, müssen wir die TextFormat-Klasse verwenden, sind also auf zwei Klassen angewiesen, während dies mit Hilfe des Eigenschaftsfensters bei auf der Bühne händisch eingefügten Textfeldern erheblich einfacher gelöst ist. Die TextFormatKlasse wird unten ausführlicher vorgestellt. Wenn wir von dynamischem Text sprechen, bedeutet das natürlich, dass er sich im Laufe der Anwendung ändern kann bzw. anfangs noch nicht bekannt ist. Dazu stehen uns zwei Möglichkeiten zur Verfügung:

• text, die bereits mehrfach angesprochene Eigenschaft eines Textfeldes

• variable (bzw. im Eigenschaftsfenster die Option Var).

5. Löschen Sie den Text im Textfeld. 6. Weisen Sie haendTxt im Eigenschaftsfenster unter der Option Var die noch zu deklarierende Variable sTxt zu. 7. Fügen Sie ganz am Anfang unseres Skriptes folgende Zeile ein:  var sTxt:String = „Ich bin ein hän­ disch erstellter Text!“;

8. Schreiben Sie am Ende des Skriptes in einer neuen Zeile: this.onMouseDown = function(){

 sTxt = „Ein Mausklick ändert die Variable sTxt“; }

Wenn Sie testen, zeigt das Textfeld wie bisher den Text an. Bei Mausklick erhält die Variable sTxt einen neuen Inhalt, der zugleich im Textfeld angezeigt wird. Alternativ kann man die Variable direkt per Skripting zuweisen. 9. Löschen Sie im Eigenschaftsfenster den Namen von sTxt, so dass keine Verknüpfung mehr zur Variablen besteht. 10. Fügen Sie im Skript ein:

haendTxt.variable = sTxt;

Gegenüber vorher zeigt sich kein Unterschied, aber wir sind so in der Lage, zur Laufzeit nach Belieben Variablen mit einem Textfeld zu verknüpfen bzw. die Verknüpfung aufzuheben. Mittlerweile üblicher ist allerdings der direkte Zugriff auf die Eigenschaft text anstelle der Verwendung einer Variablen, um den textlichen Inhalt zu definieren. Dann würden wir in gewohnter Weise schreiben: haendTxt.text = „Ich bin ein händisch erstellter Text!„oder haendTxt.text = sTxt. Wollen Sie Text löschen bzw. Ihr Textfeld „leeren“, weisen Sie ihm einfach einen leeren String zu. 11. Schreiben Sie am Ende des bisherigen Codes:

haendTxt.text = „“;

Achten Sie darauf, nicht versehentlich ein Leerzeichen zwischen den Anführungszeichen einzufügen.

182

Ansonsten ist Ihr Textfeld entgegen dem optischen Eindruck nämlich nicht leer, sondern es enthält ein unsichtbares Zeichen, das zu Problemen führen kann, wenn der Textfeldinhalt zu einem späteren Zeitpunkt etwa mit den Methoden des String-Objektes bearbeitet werden soll. Völlig löschen, so wie wir es von der MovieClipKlasse kennen, lässt sich ein derartiges Textfeld nicht. Das funktioniert derzeit nur mit einem per createTextField-Methode (s. u.) erstellten Feld. Der Trick mit einem händisch erstellten MovieClip, dessen Tiefe wir mit swapDepths() auf einen Wert größer oder gleich 0 setzen, um ihn dann mit removeMovieClip() zu löschen, funktioniert hier nicht. Denn die TextFieldKlasse kennt in AS 2.0 nur ein Auslesen der Tiefe über getDepth(), nicht jedoch dessen setzen. Ein in der Autorenumgebung erstelltes Textfeld wird also auf seiner ursprünglich erhaltenen negativen Tiefe kompromisslos verharren. Dieses Problem kann man umgehen, indem das Textfeld in einen MovieClip als Behälter eingefügt wird. Löschen wir den MovieClip, verschwindet automatisch auch das Textfeld. Bei einigen Optionen bietet das Eigenschaftsfenster nur rudimentäre Einstellmöglichkeiten. So kann man z. B. lediglich festlegen, ob ein Rahmen angezeigt werden soll oder nicht. AS dagegen erlaubt es, eine spezifische Farbe für den Rahmen zu definieren. Um etwa einen blauen Rahmen zu erhalten, erweitern Sie das bestehende Skript um folgende Zeile:

Kapitel 14  String, Textfield, Textformat

erzeugen. Selbstverständlich lassen sich diese später modifizieren. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var tText:TextField;

 tText = this. createTextField(„txt“,this.getNext­ HighestDepth(),10,10,200,25);  tText.text = „Ich wurde aus dem Nichts erschaffen!“;

Beim Testen erscheint am linken oberen Rand ein Textfeld mit dem von uns definierten Text voll tiefgründiger Philosophie. In der Reihenfolge ihres Auftretens verwendet die createTextField()-Methode folgende Argumente:

• Instanzname • Tiefe • Horizontale Position • Vertikale Position • Breite • Höhe. Das dadurch entstehende Textfeld verfügt über folgende Standardeigenschaften: background

false

border

false

condenseWhite

false

embedFonts

false

Wir setzen die border-Eigenschaft auf true und übergeben die gewünschte Farbe als Hexwert. Ähnlich lässt sich eine Hintergrundfarbe definieren:

html

false

maxChars

null

mouseWheelEnabled

true

haendTxt.background = 0 × 11ccff;

multiline

false

password

false

restrict

null

selectable

true

styleSheet

undefined

tabInded

undefined

type

dynamic

variable

null

wordWrap

false

haendTxt.border = true;

haendTxt.borderColor = 0 × 0000ff;

haendTxt.backgroundColor = 0 × 00aaff;

Zusätzlich bietet AS Zugriff auf Eigenschaften, die ansonsten für MovieClips gelten wie _rotation, _al­ pha oder _visible. Drehung und Deckkraft setzen jedoch voraus, dass man den verwendeten Schriftfont einbindet. Andernfalls zeigt der Flash-Player schlicht keinen Text mehr an. Wir können sogar noch einen Schritt weiter gehen, indem wir anfangs völlig auf die händische Erstellung eines Textfeldes verzichten. Denn die MovieClipKlasse verfügt über eine entsprechende Methode, um ein Textfeld mit gewissen Standardeigenschaften zu

Soweit das sinnvoll ist, lassen sich diese Eigenschaften, wie oben bereits gesehen, direkt ansprechen und setzen. Um z. B. einen mehrzeiligen Text zu erhal-

14.9  Text, Textfelder

183

ten, sind folgende Änderungen bzw. Ergänzungen im Code nötig (Fettdruck):

3. Schreiben Sie:

tText = this. createTextField(„txt“,this.getNextHigh­ estDepth(),10,10,200,50);

 tText.removeTextField();

tText.text = „Ich wurde aus dem \ nNichts erschaffen!“; tText.multiline = true;

Die Höhe des Feldes muss vergrößert werden, so dass zwei Zeilen darstellbar sind. Die zweite Zeile erhalten wir durch einen per Steuerzeichen (n) erzeugten Zeilenumbruch. Damit dieses Zeichen nicht als Teil des Textes interpretiert wird, markieren wir es durch ein Escape-Zeichen (\). Abschließend weisen wir Flash an, einen mehrzeiligen Text zu akzeptieren. Für die Standardformatierung des im Feld dargestellten Textes sorgt ein TextFormat-Objekt, das über folgende Eigenschaften und Werte verfügt: font

Times New Roman/Times

size

12

color

0 × 000000

bold

false

italic

false

underline

false

url

(leerer String)

target

(leerer String)

align

left

leftMargin

0

rightMargin

0

indent

0

leading

0

blockIndent

0

bullet

false

display

block

tabStops

[]

Darauf können wir leider nicht direkt wie bei den vorhergehenden Eigenschaften zugreifen. Statt dessen benötigen wir eine TextFormat-Instanz, die mit dem Textfeld verknüpft werden muss. Wie damit Formatierungen möglich sind, zeigt der nächste Abschnitt zur TextFormat-Klasse. Um das Textfeld zu löschen, können wir ähnlich wie beim MovieClip auf eine remove-Methode zugreifen.

this.onMouseDown = function(){ }

Ein Mausklick an beliebiger Stelle löscht nun das Textfeld problemlos. Wenn mehrzeiliger Text verwendet werden muss, stellt sich bei einem solchen Textfeld notwendigerweise die Frage nach dessen Größe. Denn bei der Erstellung übergeben wir als Argument u. a. einen Wert für die Höhe des Feldes. Stellen wir einen Rand ein bzw. eine Hintergrundfarbe, dann sollte die Höhe mit der Gesamtlänge des Textes übereinstimmen. Ist das Feld zu groß, entsteht eine unschöne optische Lücke. Glücklicherweise können wir trotz des Höhenparameters die Feldhöhe an den Text über die Eigenschaft autoSize anpassen. 4. Ändern Sie das letzte Argument in der createTextField-Methode() wie folgt (Fettdruck):  tText = this.createTextField(„txt“, this.getNextHighestDepth(), 10, 10, 200, 1); tText.border = true;

Wir wählen mit einem Pixel Höhe einen Wert, der zweifelsohne nicht ausreicht, um auch nur eine einzige Textzeile anzeigen zu können. Aus optischen Gründen weisen wir Flash darüber hinaus an, einen Rahmen darzustellen. Falls Sie an dieser Stelle bereits testen, sehen Sie lediglich eine dicke, 202 Pixel breite Linie, bei der es sich um besagten Rahmen handelt. 5. Fügen Sie nach der Initialisierung von multiline ein: tText.autoSize = true;

Trotz der viel zu geringen Höhe des Textfeldes wird alles korrekt angezeigt, da wir Flash durch die Eigenschaft autoSize anweisen, die gesamte Größe des Textes zu berücksichtigen. Diese Eigenschaft kennt folgende Werte:

• true,

was einer linksbündigen Textausrichtung entspricht; • left, linksbündig • center, zentriert • right, rechtsbündig.

184

Kapitel 14  String, Textfield, Textformat

Wird der Text nachträglich geändert, passt sich das Textfeld wie zuvor automatisch an den Inhalt an.

14.10.1 TextFormat

6. Ändern Sie das onMouseDown-Ereignis (Fettdruck):

Betrachten wir zunächst die TextFormat-Klasse, der hier die größte Bedeutung zukommt. Sie verfügt über zahlreiche Optionen, die sehr weitgehende Formatierungen zulassen. Leider ist sie eher kompliziert und umständlich, was sich insbesondere dann als nachteilig erweist, wenn wir innerhalb eines einzigen Textes mit mehreren Schriftauszeichnungen arbeiten wollen. Vor ihrer Verwendung benötigen wir natürlich eine Instanz, die wir wie gewohnt mit einem Konstruktor einrichten.

this.onMouseDown = function(){

 tText.text = „Ich wurde aus dem Nichts erschaffen!“; }

Auf Mausklick ersetzt Flash den bisherigen Feldinhalt durch den neuen Text, der mit dem vorhergehenden Inhalt identisch ist, aber über keinen Zeilenumbruch mehr verfügt. Wie am Rahmen zu erkennen, passt sich das Feld an den nunmehr einzeiligen Text mit größerer Zeilenlänge perfekt an.

14.10 Textauszeichnung/ -formatierung Oft ist es notwendig, Text optisch zu gestalten, sei es, um bestimmte Informationen zu betonen, sei es, weil der Text als ästhetisches Element eingesetzt wird. In Flash existieren gleich mehrere Möglichkeiten:

• Eine eigene Textformat-Klasse bietet so ziemlich

alles, wonach das Herz begehrt. • Text kann in html-Form ausgegeben werden, was die Verwendung einiger, aber beileibe nicht aller Tags direkt in Flash erlaubt. • Damit zusammen hängt die Möglichkeit, CSSStile einzusetzen. Auch hier gibt es wie zuvor bei den Tags (noch) ziemliche Einschränkungen, aber in bestimmten Situationen stellt das eine enorme Arbeitserleichterung dar. So können Sie mit dieser Variante eine html- und eine Flashseite erstellen, die auf die gleichen CSS-Formatierungen zugreifen. Damit garantieren Sie eine einheitliche Erscheinungsweise und müssen sich keine doppelte Arbeit hinsichtlich des Designs machen. Die Stylesheet-Klasse ist der Textfield-Klasse zugeordnet. • Last not least erlaubt das TextField-Objekt eine extrem rudimentäre Formatierung, auf die wir aufgrund der beschränkten Möglichkeiten jedoch nicht weiter eingehen wollen.

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var tComp:TextField = this.createText Field(„computerspiele“,this.getNext­ HighestDepth(),10,10,200,200); tComp.text = „Computerspiele“;

Es wird ein Textfeld mit Standardeigenschaften erzeugt, positioniert und mit einem Text gefüllt. 3. Erweitern Sie das Bildskript um folgende Zeilen:  var tfText:TextFormat = new TextFor­ mat(); tfText.size = 20;

tfText.color = 0 × 0033ff;

Wir instanziieren die Textformat-Klasse und definieren ihre Eigenschaften Größe mit 20 Pixel und Farbe mit einem Blauton. Wenn Sie testen, bleibt der Text jedoch unverändert schwarz in der voreingestellten Schriftgröße. Das ist durchaus logisch, denn wir haben keinen Bezug zwischen dem neuen Textformat und dem Textfeld hergestellt. Den benötigt Flash, um zu wissen, auf wen die Formatierung anzuwenden ist. Schließlich kann unsere Applikation ja mehr als nur ein einziges einsames Textfeld enthalten. 4. Schreiben Sie weiter: tComp.setTextFormat(tfText);

Ein erneuter Test zeigt einen 20 Pixel großen blauen Text an. Wir können also ähnlich wie bei der TextFieldKlasse unmittelbar auf Eigenschaften zugreifen, um sie zu setzen. Alternativ besteht die Möglichkeit, direkt bei der Erstellung einer Instanz Parameter mitzugeben. Doch seien Sie gewarnt: Wie bei anderen

14.10  Textauszeichnung/-formatierung

185

Klassen, insbesondere der BitmapData- und der FilterKlasse, geht man in der Anzahl der Parameter schnell unter. Im vorliegenden Fall dürfen Sie nämlich bis zu 13 (!) Argumente bei der Instanziierung übergeben. Jeder Entwickler kann dabei seine mnemotechnischen Fähigkeiten unter Beweis stellen.

betreffende Parameter erst an 6. Stelle liegt, müssten Sie beim Instanziieren fünfmal null übergeben und anschließend true. Wer nicht permanent mit der TextFormat-Klasse arbeitet, wird sich ohne Zugriff auf die Hilfe schwerlich vorstellen können, welche Eigenschaften mit diesen Parametern gemeint sind.

5. Löschen Sie die Definitionen von size und color sowie die Initialisierung der Variablen tfText. 6. Fügen Sie unmittelbar vor der Zuweisung des Textformats an das Textfeld folgende Zeile ein:

7. Löschen Sie die neue Zeile wieder. 8. Um dasselbe Ergebnis in einer lesbareren Form zu erhalten, fügen Sie folgende Formatdefintionen ein:

 var tfText:TextFormat = new TextFormat(„Georgia“, 20, 0 × 0033ff, true, false, false, null, null, „left“, 20, null, null, null);

 var tfText:TextFormat = new TextFor­ mat();

Als Ergebnis erhalten Sie eine Textdarstellung, die annähernd der vorhergehenden entspricht, allerdings den Text um einige Pixel nach rechts verschiebt und einen anderen Font verwendet. Der ganze Bandwurm stellt eine einzige Befehlszeile dar. Im Einzelnen stehen folgende Argumente zur Verfügung:

• Font (String) • Größe (Pixel) • Farbe (Hexcode) • Fett (Boolean) • Kursiv (Boolean) • Unterstrichen (Boolean) • URL (String, fungiert als Hyperlink) • Target (String) • Ausrichtung (String) • Rand links (Pixel) • Rand rechts (Pixel) • Einrückung (Pixel) • Zeilenabstand (Pixel) Die Reihenfolge ist natürlich wichtig, da AS ansonsten Ihre Werte nicht korrekt zuordnen kann. Wenn Sie wie in unserem Beispiel nicht alle erforderlichen Eigenschaften mit Werten belegen wollen, übergeben Sie einfach null. Offenbar war man sich bei Macromedia bzw. Adobe bewusst, mit so vielen Parameter über das Ziel hinauszuschießen, denn in diesem Fall weigert sich die Flash IDE standhaft, einen Codehinweis auf alle möglichen Argumente einzublenden. Würden Sie tatsächlich auf diese Weise vorgehen, wäre Ihr Code nur schwer lesbar. Stellen Sie sich beispielsweise vor, ein Text sollte unterstrichen dargestellt werden. Da der

tfText.font = „Georgia“; tfText.size = 20;

tfText.color = 0 × 0033ff; tfText.bold = true;

tfText.align = „left“;

tfText.leftMargin = 20;

Wir erhalten nun die gleiche Textdarstellung wie bei unserem flotten Einzeiler, aber hier sind im Gegensatz zu vorher die gesetzten Eigenschaften unmittelbar im Code zu erkennen. Hinweis: Falls sich bei Ihnen plötzlich kein Text mehr zeigen will, kontrollieren Sie, ob nicht aus Versehen die nach wie vor benötigte letzte Zeile mit der Zuweisung des Textformats (s. o. Schritt 4) gelöscht wurde. Ohne auf alle Eigenschaften einzugehen, wollen wir uns ein konkretes Beispiel mit einem längeren Text anschauen, der über das Textformat-Objekt formatiert wird. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie der Ebene actions folgendes Bildskript zu:  var tComp:TextField = this.createText Field(„computerspiele“, 1, 100, 50, 400, 200);  tComp.text = „Computerspiele\n\nWas heutzutage eine milliardenschwere In­ dustrie darstellt, die mit der Film­ branche locker mithalten kann, begann vor Jahrzehnten ganz bescheiden mit einem einsamen Lichtpunkt. Er wan­ derte über den Bildschirm und konnte mit der Tastatur gesteuert werden.\n\ nHeute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photo­

186

realistische Grafik. Und neben die immer noch unvermeidliche Tastatur treten Maus und Joystick.“;

tComp.multiline = true; tComp.wordWrap = true; tComp.border = true;

tComp.background = true;

tComp.backgroundColor = 0xffff99;

 var fFliess:TextFormat = new TextFor­ mat(); fFliess.font = „Georgia“; fFliess.size = 14;

fFliess.color = 0 × 000000; fFliess.align = „left“;

tComp.setTextFormat(fFliess);

Flash zeigt, wie in Abbildung 37 zu sehen, ein hellgelbes Textfeld, bestehend aus drei Absätzen, die per \n definiert werden, also über einen Zeilenumbruch. Fügen wir dieses Zeichen zweimal ein, erhalten wir eine Leerzeile. Die Überschrift besteht aus einem Begriff in der ersten Zeile, der Fließtext steht in den folgenden Absätzen. Da der Text zu sehr am linken und rechten Rand klebt, können wir einen kleinen Abstand einfügen. 3. Erweitern Sie das Skript unmittelbar vor der Zuweisung des Textformats an das Textfeld:  fFliess.leftMargin = fFliess.right­ Margin = 5;

Beim Testen hält der Text nach links und rechts einen kleinen Abstand ein, der die Lesbarkeit erhöht. Sinnvoll wäre es, wenn sich die Überschrift durch irgend eine Auszeichnung vom Fließtext abheben würde. Dazu benötigen wir ein neues Textformat.

Abbildung 37:  Textformatierung mit der TextFormat-Klasse

Kapitel 14  String, Textfield, Textformat

4. Ändern und erweitern Sie den Code (Fettdruck):  fFliess.leftMargin = fFliess.right­ Margin=5;

 var fUeber:TextFormat = new TextFormat(); fUeber.bold = true; fUeber.size = 16;

tComp.setTextFormat(0,14,fUeber);

 tComp.setTextFormat(14, tComp.length, fFliess);

Das neue Format verwendet fett als Auszeichnung und legt eine Schriftgröße von 14 Pixel fest. Da wir nicht den ganzen Text, sondern nur die Überschrift dementsprechend formatieren wollen, übergeben wir der Methode setTextFormat() den Index des ersten Zeichens, ab dem dieses Format gelten soll, und den Index des ersten Zeichens, das nicht mehr formatiert werden soll. Das Überschriften-Format bezieht sich daher nur auf die ersten 13 Buchstaben des Textes. Ab dem 14. Buchstaben kommt das für den Fliesstext bereits vorher definierte Format zur Anwendung. Falls gewünscht, können Sie nun noch die Höhe des Textfeldes an dessen Inhalt anpassen, indem Sie ergänzen: fFliess.align = „left“;. Das Ergebnis zeigt Abbildung 38. Es stehen noch weitere Formatierungsmöglichkeiten zur Verfügung, auf die wir hier aber nicht mehr näher eingehen wollen. Eine Aufzählung einiger Eigenschaften mag zur ersten Orientierung genügen:

• bold, fett (Boolean) • bullett, Aufzählungszeichen (Boolean) • indent, Einzug vom linken Rand (Number) • italic, kursiv (Boolean) • letterSpacing, Abstand zwischen den Zeichen (Number)

Abbildung 38:  Erweiterte Textformatierung mit der TextFormat-Klasse

14.10  Textauszeichnung/-formatierung

187

• underline, unterstrichen (Boolean).

tComp.backgroundColor = 0xffff99;

Nicht ganz so glücklich gelöst ist die Darstellung, sobald sich der Textinhalt ändert.

fFliess.font = „Georgia“;

5. Erweitern Sie das Skript um folgendes Ereignis: this.onMouseDown = function(){

 tComp.text = „Grob gesehen unter­ scheidet man zwischen folgenden Spielekategorien: Action, Strate­ gie, Rollen, Simulation, Glück/Ge­ schicklichkeit und Logik.“ }

Wenn Sie testen, wird zwar unser neuer Text angezeigt, die Formatierung per Textformat geht aber leider verloren. Das gilt auch für den Fall, dass wir den bestehenden Text nicht ersetzen, sondern um den neuen Text erweitern. 6. Erweitern Sie die Ereignisdefinition mit einer Konkatenation (Fettdruck): this.onMouseDown = function(){

 tComp.text += „ \n\nGrob gesehen unterscheidet man zwischen folgen­ den Spielekategorien: Action, Stra­ tegie, Rollen, Simulation, Glück/ Geschicklichkeit und Logik.“ }

Das Ergebnis bleibt in Bezug auf die Textformatierung das Gleiche: Sie geht leider verloren. In dem Fall muss die gewünschte Formatierung erneut zugewiesen werden. Einfacher gestaltet sich die Formatierung, wenn wir ein einheitliches Format verwenden, das auf den gesamten Text angewendet werden soll. Dann lässt es sich als Standard definieren, der auch bei Änderungen des Textes erhalten bleibt. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie der Ebene actions folgendes Bildskript zu:  var tComp:TextField = this.createText Field(„computerspiele“, 1, 100, 50, 400, 200);

tComp.autoSize = „left“; fFliess.size = 14;

fFliess.color = 0 × 000000; fFliess.align = „left“;

 fFliess.leftMargin = fFliess.right­ Margin=5; tComp.setNewTextFormat(fFliess);

 tComp.text = „Computerspiele\n\nWas heutzutage eine milliardenschwere In­ dustrie darstellt, die mit der Film­ branche locker mithalten kann, begann vor Jahrzehnten ganz bescheiden mit einem einsamen Lichtpunkt. Er wan­ derte über den Bildschirm und konnte mit der Tastatur gesteuert werden.\n\ nHeute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photo­ realistische Grafik. Und neben die immer noch unvermeidliche Tastatur treten Maus und Joystick.“; this.onMouseDown = function() {

 tComp.text += „\n\nGrob gesehen un­ terscheidet man zwischen folgenden Spielekategorien: Action, Strate­ gie, Rollen, Simulation, Glück/Ge­ schicklichkeit und Logik.“; };

Der Code entspricht zu wesentlichen Teilen demjenigen des vorhergehenden Beispiels. Allerdings verwenden wir die Methode setNewTextFormat(), die vor der Zuweisung von Text aufgerufen wird. Damit legen wir ein Standardformat für den kompletten Inhalt des Textfeldes fest. Jeder neu hinzukommende Text wird auf genau dieselbe Art formatiert, wie Sie per Mausklick testen können. Benötigen Sie dennoch mehrere Formatierungen in einem Feld mit variablem Inhalt, müssen diejenigen Formate, die nicht der gewünschten Standardformatierung entsprechen, nach jeder Änderung des Inhalts neu zugewiesen werden.

 var fFliess:TextFormat = new TextFor­ mat(); tComp.multiline = true;

3. Erweitern Sie den Code unmittelbar vor der Definition des onMouseDown-Ereignisses um die bereits bekannte Formatierung für eine Überschrift:

tComp.wordWrap = true; tComp.border = true;

 var fUeber:TextFormat = new TextFor­ mat();

tComp.background = true;

fUeber.bold = true;

188

fUeber.size = 16;

tComp.setTextFormat(0, 14, fUeber);

4. Ergänzen Sie das onMouseDown-Ereignis unmittelbar vor dessen schließender Klammer: tComp.setTextFormat(0, 14, fUeber);

Wenn Sie testen, bleiben alle Formatierungen erhalten. Da der Text bei einem Mausklick geändert wird, müssen wir an dieser Stelle dafür sorgen, dass denjenigen Zeichen, die eine besondere Formatierung erhalten sollen, wieder das gewünschte Format zugewiesen wird. Die übrigen Zeichen dagegen behalten automatisch die Standardformatierung bei.

14.10.2 Formatierung mit HTML Die zweite Variante der Textformatierung besteht, wie erwähnt, in der Verwendung von html-Tags. Leider unterstützt Flash nur einen kleinen Teil von HTML, nämlich insbesondere:

• , die verwendete Schriftart • stellt Text fett dar • stellt Text unterstrichen dar • stellt Text kursiv dar. •

legt einen Absatz fest und verwendet

das align-Attribut. •

ermöglicht eine Liste mit Aufzählungspunkten. Es wird nicht zwischen den Tags

und
unterschieden. Listen sind immer unsortiert. • definiert einen Hyperlink. Zulässige Attribute sind href und target • <span>, benötigt, um CSS-Stile zuweisen zu können. Damit Flash unterscheiden kann, ob wir html-formatierten oder „normalen“ Text verwenden wollen, muss explizit auf die Eigenschaften html und htmlText zugegriffen werden. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie der Ebene actions folgendes Bildskript zu:  var tComp:TextField = this. createText­ Field(„computerspiele“, 1, 100, 50, 400, 200);

Kapitel 14  String, Textfield, Textformat

tComp.multiline = true; tComp.wordWrap = true; tComp.border = true;

tComp.background = true;

tComp.backgroundColor = 0xffff99; tComp.autoSize = „left“; tComp.html = true;

 tComp.htmlText = „Computerspiele

Was heutzutage eine milliardenschwere Industrie darstellt, die mit der Filmbranche locker mithalten kann, begann vor Jahrzehnten ganz beschei­ den mit einem einsamen Lichtpunkt. Er wanderte über den Bildschirm und konnte mit der Tastatur gesteuert werden.

Heute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photorealistische Grafik. Und neben die immer noch unvermeid­ liche Tastatur treten Maus und Joy­ stick.“;

Wir übernehmen das Skript aus dem vorhergehenden Beispiel, löschen aber jeden Bezug auf die TextFormat-Klasse. An dessen Stelle verwenden wir HTML-Tags genau so, wie man es zu früheren Zeiten in einem klassischen HTML-Dokument machte. So legen wir die Schriftart über das -Tag fest und erreichen eine rudimentäre Formatierung der Absätze mit Hilfe des
-Tags (alternativ kann man das p-Tag nehmen). Bei der Verwendung von Attributen entsteht das Problem, dass einerseits der zugewiesene htmlText einen String darstellt, also in Anführungszeichen stehen muss, andererseits gilt das jedoch für die Attribute ebenfalls. Würden wir jeweils die gleichen Anführungszeichen ohne weitere Markierung einsetzen, wäre Flash nicht mehr in der Lage, zu erkennen, wo der String beginnt und endet. Die beiden das Attribut umschließenden Anführungszeichen müssen also gesondert gekennzeichnet werden. Das funktioniert mit Hilfe des bereits erwähnten Escape-Zeichens. Alternativ kann anstelle des Escape-Zeichens das Hochkomma (auf der Tastatur das Zeichen über der Raute #) genommen werden. Beachten Sie, dass Farbwerte zwar wie in Flash hexadezimal übergeben werden, jedoch anstelle der vorangestellten Zeichen 0x die Raute # verwendet wird.

14.10  Textauszeichnung/-formatierung

3. Erweitern Sie das Skript am Ende um: this.onMouseDown = function() {

 tComp.htmlText += „
Grob gesehen unterscheidet man zwischen folgen­ den Spielekategorien: Action, Stra­ tegie, Rollen, Simulation, Glück/ Geschicklichkeit und Logik.“; };

Bei einem Mausklick taucht weiterer Text auf, der aber wieder in einer Standardformatierung angezeigt wird. Da wir das geöffnete -Tag bei der erstmaligen Zuweisung des Textes notwendigerweise wieder schließen müssen, verfügt der neu hinzu gefügte Text über keine spezifische Formatierung mehr und wird mit der standardmäßig von Flash vergebenen Formatierung angezeigt. 4. Ergänzen Sie im onMouseDown-Ereignis die Textzuweisung (Fettdruck):  tComp.htmlText += „
Grob gesehen un­ terscheidet man zwischen folgenden Spielekategorien: Action, Strategie, Rollen, Simulation, Glück/Geschick­ lichkeit und Logik.“;

Nun bleibt die Formatierung auch für den neuen Text erhalten. Zwar ist es möglich, bei der erstmaligen Textzuweisung auf das schließende -Tag zu verzichten, was Flash großzügigerweise so interpretiert, als sollte auch jeder neue Text in der gleichen Weise formatiert werden, aber dieses Verhalten ist formal falsch und wird gegebenenfalls in neueren Versionen des Flash-Players nicht mehr unterstützt. Daher sollte man nicht damit arbeiten. Übrigens wird auch im htmlText der Zeilenumbruch per \n korrekt interpretiert. Dennoch sollten Sie an dieser Stelle auf die in HTML gültigen Tags zugreifen, um einen unübersichtlichen Mischmasch aus verschiedenen Formatierungsanweisungen zu vermeiden. Neben der Textformatierung erlaubt HTML die Definition rudimentärer Interaktionen, zu denen natürlich primär die Verlinkung zählt. Sie folgt prinzipiell denselben Regeln wie ein reguläres HTML-Dokument. 5. Ändern Sie die erstmalige Textzuweisung (Fettdruck):  Lichtpunkt

189

6. Löschen Sie das nun nicht mehr benötigte on­ MouseDown-Ereignis vollständig. Wenn Sie testen, öffnet sich entweder ein Fenster mit einem Sicherheitshinweis, falls Sie lokal testen, oder die gewünschte URL wird aufgerufen. Der Link wird jedoch nicht in der von uns gewohnten Formatierung dargestellt, was sich leicht beheben lässt. 7. Ändern Sie die Textzuweisung (Fettdruck):  Lichtpunkt

Flash stellt den Link blau und unterstrichen dar. Ähnlich erfolgt der Aufruf des mail-Clients und von Javascript-Funktionen. Interessanterweise wird auch AS per Hyperlink ansprechbar, denn das hrefAttribut akzeptiert als Wert asfunction mit dem Funktionsnamen und gegebenenfalls einem weiteren Wert als Argument. 8. Fügen Sie folgende Funktionsdefinition ein: function anzeige(pWas:String):Void{

 trace(„Sie haben auf „+pWas+“ ge­ klickt.“); }

9. Ändern Sie die Textzuweisung (Fettdruck):  Lichtpunkt

Bei Mausklick auf den Textlink zeigt Flash im Nachrichtenfenster die Meldung „Sie haben auf Licht geklickt.“ an. In der Funktion anzeige() rufen wir den trace()-Befehl auf und geben einen Text zusammen mit einem Argument aus, das innerhalb des -Tags übergeben wird. Bei asfunction handelt es sich um ein spezifisches Protokoll, das eine Kommunikation mit AS erlaubt. Dabei können beliebige Funktionen aufgerufen werden, also sowohl in AS vordefinierte wie auch selbst erstellte. Sie lassen sich zwar parametrisieren, doch ist die Anzahl der zulässigen Argumente auf ein einziges beschränkt. Da der Aufruf als Wert eines HTML-Attributs erfolgt, ist das übergebene Argument immer vom Datentyp String. Leider versagt an dieser Stelle die Typisierung von Flash. Wenn Sie beispielsweise den Parameter in der Funktionsdekla-

190

Kapitel 14  String, Textfield, Textformat

ration auf einen anderen Datentyp festlegen, erfolgt nicht die ansonsten auftretende Fehlermeldung bezüglich einer Typdiskrepanz. Unser Beispiel mag nun zugegebenermaßen nicht unbedingt die klügste Anwendung sein, aber sie verdeutlicht die prinzipielle Funktionsweise von as­ function. So ließe sich beispielsweise per Mausklick ein Textfeld mit Zusatzfunktionen öffnen oder es könnte ein Textlink zum Weiterblättern der Seite definiert werden. Ebenfalls möglich ist die Verwendung des -Tags, das aber nicht in allen Player-Versionen sauber dargestellt wird. Daher sollte man dessen Einsatz sorgfältig testen, um keine unangenehmen Überraschungen zu erleben.

anders, da das in CSS-Attributen wie font-family übliche Minus-Zeichen nicht akzeptiert wird. An dessen Stelle verwendet Flash eine Binnen-Majuskel, was aus dem vorgenannten Attribut fontFamily macht. Die von AS 2.0 unterstützten Attribute listet die Tabelle auf. Bei den Angaben zu Ausdehnung, Größe und Rand wird nicht zwischen Pixel und Punkt unterschieden, alle Werte werden als Pixelangabe ausgeführt. Geben Sie wie in CSS gewohnt eine Maßeinheit mit an, ignoriert sie Flash. Die Definition des Stylesheets kann ebenso innerhalb von Flash wie außerhalb in einer klassischen CSS-Datei erfolgen, wobei sich letztgenannte Variante vor allem dann anbietet, wenn mehrerer unabhängige Dateien auf die gleiche Weise formatiert werden sollen. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie der Ebene actions folgendes Bildskript zu:

14.10.3 Formatierung mit CSS Unter dem Aspekt der Formatierung bietet CSS gegenüber den bisherigen Methoden zumindest grundsätzlich die Möglichkeit, Texte, die mit verschiedenen Techniken wie Flash, HTML und XML erstellt werden, auf die gleiche Weise zu formatieren. Damit kann man die visuelle Darstellung einander angleichen, ohne zweimal vollständig neu entwickeln zu müssen. Allerdings muss man bedenken, dass Flash derzeit nur einen begrenzten Satz an CSS-Eigenschaften unterstützt. Auch ist die Schreibweise in Flash etwas

 var tComp:TextField = this.createText Field(„computerspiele“, 1, 100, 50, 400, 200); tComp.multiline = true; tComp.wordWrap = true; tComp.border = true;

tComp.background = true;

tComp.backgroundColor = 0xffff99; tComp.autoSize = „left“;

CSS-Attribut

Flash-Entsprechung

Bedeutung

color

color

Textfarbe (hexadezimal), keine namentlich bezeichneten Farben (z. B. blue) möglich

display

display

Zulässig sind inline, block und none.

font-family

fontFamily

Kommaseparierte Liste von Schriften mit absteigender Präferenz

font-size

fontSize

Größe in Pixel

font-style

fontStyle

Zulässig sind normal und italic.

font-weight

fontWeight

Zulässig sind normal und bold.

kerning

kerning

Unterschneidung bei eingebetteten Schriften mit true und false als zulässige Werte.

letter-spacing

letterSpacing

Leerraum zwischen Zeichen, um eine gleichmäßige Aufteilung zu erreichen.

margin-left

marginLeft

Abstand links.

margin-right

marginRight

Abstand rechts.

text-align

textAlign

Textausrichtung mit den zulässigen Werten left, center, right und justify.

In Flash erlaubte CSS-Attribute

14.10  Textauszeichnung/-formatierung

tComp.html = true;

 var cssFormatierung:TextField.Style Sheet = new TextField.StyleSheet();

 cssFormatierung.setStyle(„p“, {fontFamily:„Georgia“, fontSize:„12“, color:“#5500ff“});  cssFormatierung.setStyle(„.titel“, {fontSize:„14“,fontWeight:„bold“}); tComp.styleSheet = cssFormatierung;

 tComp.htmlText = „

<span class=\ „titel\“>Computerspiele.


Was heutzutage eine milli­ ardenschwere Industrie darstellt, die mit der Filmbranche locker mit­ halten kann, begann vor Jahrzehnten ganz bescheiden mit einem einsamen Lichtpunkt. Er wanderte über den Bildschirm und konnte mit der Tasta­ tur gesteuert werden.

Heute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photorealisti­ sche Grafik. Und neben die immer noch unvermeidliche Tastatur treten Maus und Joystick.

“;

Auch hier verwenden wir den gleichen Text und Aufbau wie vorher. Neu dagegen ist die Einrichtung eines Stylesheets mit Formatierungen anstelle der direkt im html-Text vorgenommenen Formatierungen. Zunächst wird ein Stylesheet instanziiert, das keine eigenständige Klasse darstellt, sondern Teil der Textfield-Klasse ist. Jedes zu definierende Element wird mit Hilfe der Methode setStyle() festgelegt, wobei wir den Namen eines Tags (z. B. „p“) oder einer selbst definierten Klasse (z. B. „.titel“), gefolgt von einem Objekt mit den Attributen und gewünschten Eigenschaften, übergeben. Im konkreten Beispiel definieren wir, dass jeder Absatz mit dem Font Georgia in der Größe 12 und einer blauen Farbe angezeigt werden soll. Außerdem legen wir eine eigene Klasse mit dem Namen „titel“ fest, die eine Schriftgröße von 14 und die Auszeichnung fett enthält. Achten Sie darauf, bei der Klassendefinition dem Namen einen Punkt voranzustellen, während der konkrete Aufruf innerhalb des <span>Tags ohne diesen Punkt erfolgt, genau so, wie es auch in HTML geschieht. Fehlt der Punkt in der Definition, wird die dortige Formatierung ignoriert, was ebenfalls geschieht, falls er irrtümlicherweise im <span>-Tag verwendet wird. Während wir in Flash bei der Definition eines Stylesheets die Attribute entsprechend obiger Tabelle

191

anpassen müssen, werden externe Sheets mit den in HTML üblichen Namen korrekt geparst. 3. Erstellen Sie eine CSS-Datei mit folgenden Formatierungen: p{

font-family:Georgia; font-size:12;

color:#5500ff }

.titel{

font-size:14;

font-weight:bold }

4. Speichern Sie die Datei im gleichen Ordner wie ihre Flash-Datei unter dem Namen texte.css. 5. Ersetzen Sie in ActionScript alles nach der Instanziierung des Stylesheets durch: cssFormatierung.onLoad = function() {

 tComp.styleSheet = cssFormatierung;  tComp.htmlText = „

<span class=\ „titel\“>Computerspiele.


Was heutzutage eine milli­ ardenschwere Industrie darstellt, die mit der Filmbranche locker mithalten kann, begann vor Jahr­ zehnten ganz bescheiden mit ei­ nem einsamen Lichtpunkt. Er wan­ derte über den Bildschirm und konnte mit der Tastatur gesteuert werden.

Heute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photorealistische Gra­ fik. Und neben die immer noch unver­ meidliche Tastatur treten Maus und Joystick.

“; };

cssFormatierung.load(„texte.css“);

Die Zuweisung des Stylesheets erfolgt erst dann, wenn wir sicher gestellt haben, dass die externe Datei mit den benötigten Definitionen erfolgreich geladen wurde. Damit Flash weiß, welche Datei wir benötigen, wird sie mit der load()-Methode geladen. Die Vorgehensweise ist also ausgesprochen simpel und narrensicher. Auf diese Weise sind Sie in der Lage, die gleiche Formatierung sowohl für Ihre Flash- wie auch Ihre HTML-Seiten vorzunehmen. Das ist insbeson-

192

dere dann interessant, wenn Sie den gleichen Content auf beide Arten darstellen müssen für den Fall, dass Teile Ihrer Zielgruppe keinen Flash-Player verwenden möchten oder dürfen. Eingedenk der enormen Formatierungsmöglichkeiten, die CSS bietet, wäre eine noch bessere Unterstützung durch Flash wünschenswert.

14.11 Darstellung größerer Textmengen In unseren bisherigen Beispielen hielt sich die Textmenge doch recht in Grenzen, so dass wir uns keine Gedanken über den Zugriff darauf machen mussten. Bei erheblich umfangreicherem Text, der über eine einzelne Seite hinausgeht, ist es notwendig, festzulegen, wann welche Teile zu sehen sind. Am häufigsten verwendet man dazu einen Scrollbalken, der Zeilen nach oben bzw. unten verschiebt, um so vorher nicht sichtbaren Text freizulegen. Das Einzige, was für diese Lösung spricht, ist die Einfachheit ihrer Umsetzung. Denn aus dem Blickwinkel der Usability besitzt sie den Nachteil, allenfalls eine grobe Schätzung der gesamten Textmenge zu erlauben. Zudem widerspricht das zeilenweise Verschieben noch den Lesegewohnheiten von Anwendern, die allen Unkerufen zum Trotz noch von einer Buchkultur geprägt sind. Während vertikales Scrollen in Maßen genossen nicht übermäßig ungesund ist, verbietet sich horizontales Scrollen von selbst. Auch Bilder lassen sich scrollen, was jedoch nicht nur ziemlich ungewohnt ist, sondern zudem unschön aussieht. In einem solchen Fall empfiehlt es sich, das Bild verschiebbar zu machen, so dass der Anwender mit gedrückter Maustaste einen beliebigen Ausschnitt betrachten kann. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects in der linken oberen Ecke ein dynamisches Textfeld ein (Instanzname info, ca. 250 × 90, Verdana, 12, mehrzeilig, mit Rahmen). 3. Zeichnen Sie auf derselben Ebene links unterhalb des Textfeldes ein Dreieck (14 × 14, Farbe Orange). 4. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcPfeil, Instanzname btUp). 5. Fügen Sie daneben eine vertikal gespiegelte Kopie des Dreiecks ein (Instanzname btDown). Diese Dreiecke dienen später dazu, den Text zu scrollen.

Kapitel 14  String, Textfield, Textformat

6. Weisen Sie actions folgendes Bildskript zu:  info.text = „Computerspiele.\n\nWas heutzutage eine milliardenschwere In­ dustrie darstellt, die mit der Film­ branche locker mithalten kann, begann vor Jahrzehnten ganz bescheiden mit einem einsamen Lichtpunkt. Er wan­ derte über den Bildschirm und konnte mit der Tastatur gesteuert werden.\n\ nHeute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photo­ realistische Grafik. Und neben die immer noch unvermeidliche Tastatur treten Maus und Joystick.“; btUp.onPress = function() {  info.scroll++; };

btDown.onRelease = function() {  info.scroll--; };

Wenn Sie testen, lässt sich der Text beliebig nach unten und oben scrollen. Ein dynamisches bzw. Eingabetextfeld verfügt über mehrere Eigenschaften, die sich auf das Scrollen beziehen. Die wichtigste ist die Eigenschaft scroll, mit der die Nummer der Zeile angegeben wird, die sich am oberen Textfeldrand befindet. Am Anfang beträgt dieser Wert notwendigerweise 1. Mit jedem Mausklick auf btUp erhöhen wir diesen Wert, wodurch sich automatisch der Text nach oben verschiebt. Ein Klick auf btDown dagegen dekrementiert die genannte Eigenschaft, so dass der sichtbare Text nach unten wandert. Wenn relativ wenig Text auf recht kleinem Raum angezeigt werden soll, kann man eine derartige Lösung wählen. Komfortabler und für den Anwender besser ist die Verwendung einer von Flash zur Verfügung gestellten Komponente. Bei den von der Idee her eigentlich genialen Komponenten handelt es sich um kleinere Applikationen, die einfach in Ihre Anwendung eingebunden werden können und Funktionalitäten anbieten, die man ansonsten mitunter mühsam selber programmieren muss. An eigene Bedürfnisse angepasst werden diese Komponenten über Parameter, die in der Autorenumgebung unter einem gleichnamigen Fenster definiert werden können. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects in der linken oberen Ecke ein dynamisches Textfeld ein (Instanzname info,

14.12  Eingabetext

Abbildung 39:  Verwendung der Komponente UIScrollBar

ca. 250 × 90, Verdana, 12, mehrzeilig, mit Rahmen). 3. Wählen Sie über <User Interface> die Komponente UIScroll­ Bar aus und fügen Sie auf objects ein. 4. Positionieren Sie die eben erzeugte Instanz am rechten Rand des Textfeldes wie auf Abbildung 39 zu sehen. 5. Markieren Sie die Komponente und öffnen , um dort unter _targetInstanzName den Namen des Textfeldes einzutragen, falls er nicht schon dort steht. Damit teilen Sie Flash mit, auf wen sich die Komponente bezieht. Normalerweise jedoch reicht es ab Flash CS4 aus, die Komponente an den Rand des textfeldes anzudocken, um automatisch eine Verbindung herzustellen. 6. Weisen Sie actions folgendes Bildskript zu:  info.text = „Computerspiele.\n\nWas heutzutage eine milliardenschwere In­ dustrie darstellt, die mit der Film­ branche locker mithalten kann, begann vor Jahrzehnten ganz bescheiden mit einem einsamen Lichtpunkt. Er wan­ derte über den Bildschirm und konnte mit der Tastatur gesteuert werden.\n\ nHeute, fast 50 Jahre später, glänzen Spiele durch eine schon fast photo­ realistische Grafik. Und neben die immer noch unvermeidliche Tastatur treten Maus und Joystick.“;

Sie können beim Testen den Text beliebig scrollen, wobei Ihnen der Scrollbalken einen Hinweis auf die Gesamtlänge gibt.

193

Zugegebenermaßen ist das verwendete Skript enttäuschend kurz: Wir müssen lediglich den konkreten Text definieren, während die Scroll-Komponente das Verschieben der Textzeilen nach Mausklick automatisch übernimmt, ohne dass ein entsprechendes Schaltflächenereignis festgelegt wird. Diese Funktionalität haben die Entwickler der Komponente bereits vorprogrammiert, was uns einiges an Arbeit abnimmt. Lediglich die Verknüpfung zum Textfeld muss händisch per Parameter vorgenommen werden. Eine Alternative zu den bisherigen Lösungen besteht in der symbolischen Andeutung der Textseiten, etwa durch ein simples Rechteck mit einigen Linien, die Textzeilen darstellen sollen. Die Anzahl dieser Symbole verdeutlicht den Gesamtumfang des Textes, die aktuelle Seite sowie die bereits aufgerufenen Seiten lassen sich farblich hervorheben. Daraus ergibt sich eine bessere Orientierung als beim Scrollen. Gelegentlich findet man auch Textzeilen, die bei Mausklick weiteren Text ausklappen, was zwar als Effekt nett ausschauen kann, aber noch weniger Orientierung zulässt als das Scrollen. Sinn macht diese Variante am ehesten in Tabellen, die auf Mausklick kurze Zusatzinfos bieten möchten, und natürlich bei Menüs. Ein Beispiel finden Sie unter den Workshops zu Interfaces.

14.12 Eingabetext Wir haben bisher mit einem dynamischen Textfeld gearbeitet, dem wir zur Laufzeit Text zuweisen. Doch in vielen Situationen muss der Anwender die Möglichkeit haben, selbst Text einzugeben. Das bekannteste Beispiel stellt ein Formular dar, das sich nur mit Hilfe von Eingabetextfeldern realisieren läst. 1. Erstellen Sie einen neuen Film. 2. Weisen Sie der Ebene actions folgendes Bildskript zu:  var tName:TextField = this. createTextField(„anmeldung“, this. getNextHighestDepth(), 20, 20, 100, 20); tName.border = true;

tName.background = true;

tName.backgroundColor = 0xffff99;

194

In der linken oberen Ecke taucht ein 100 Pixel breites und 20 Pixel hohes Textfeld mit gelbem Hintergrund auf. Wir erzeugen wie in einem vorhergehenden Abschnitt gelernt ein Textfeld und positionieren es auf der Bühne. Wenn Sie versuchen, einen Text hinein zu schreiben, wird das Feld allerdings nicht reagieren. Das liegt daran, dass Flash, falls wir nichts anderes definieren, automatisch ein dynamisches Textfeld erzeugt, während wir ein Eingabetextfeld benötigen. Der gewünschte Typ lässt sich einfach festlegen. 3. Erweitern Sie den Code: tName.type = „input“;

Nun können Sie Text eingeben. Über die Eigenschaft type lässt sich der gewünschte Textfeldtyp definieren. Er wird als String übergeben, wobei „input“ für ein Eingabetextfeld und „dynamic“ für ein dynamisches Textfeld möglich sind. Beachten Sie, dass ein Eingabetextfeld nur Sinn macht, wenn zugleich auch ein Rahmen aktiviert wird. Andernfalls hält sich das Feld vielleicht aus falsch verstandener Bescheidenheit dermaßen im Hintergrund, dass es nur durch Zufall gefunden wird, wenn sich der Cursor bei Rollover in den Eingabecursor ändert. Sie können das gerne testen, indem Sie temporär diejenigen Zeilen auskommentieren, die sich auf Rahmen und Hintergrund des Feldes beziehen. Beim Testen ist dann auf der Bühne nichts mehr zu sehen. Bei Eingabetextfeldern ist es mitunter nötig, die möglichen Zeichen einzuschränken, um so zu gewährleisten, dass keine unsinnigen Eingaben erfolgen. So würde es bei einem Feld, in dem man sein Alter eintragen muss, keinen Sinn machen, wenn auch Buchstaben verwendet werden könnten. 4. Erweitern Sie das Skript:  var tAlter:TextField = this. createTextField(„alter“, this.get­ NextHighestDepth(), tName._x + tName._width + 5, 20, 100, 20); tAlter.border = true;

tAlter.background = true;

tAlter.backgroundColor = 0xffff99; tAlter.type = „input“;

tAlter.restrict = „0–9“;

Kapitel 14  String, Textfield, Textformat

Wir erzeugen ein zweites Feld mit denselben Eigenschaften wie das erste. Lediglich die Position wird um die Breite des ersten zuzüglich einem kleinen Abstand von 5 Pixeln nach rechts verschoben. Um die gültigen Zeichen zu definieren, greifen wir auf die Eigenschaft restrict zu, der als String alle Zahlen zwischen 0 und 9 übergeben werden. Eine Eingabe ist damit auf exakt diese Zeichen beschränkt. Auch komplexere Definitionen sind möglich. Nehmen wir der Übung halber an, alle Zahlen mit Ausnahme der vielleicht aufgrund ihrer schiefen Haltung suspekten 7 sollen erlaubt sein. 5. Ändern Sie die Zuweisung für die restrict-Eigenschaft (Fettdruck): tAlter.restrict = „0–9 ^ 7“;

Sie können wie zuvor alle Zahlen eingeben, lediglich bei der 7 streikt das Textfeld. Die nachfolgenden 8 und 9 dagegen machen keine Probleme. Durch das CaretZeichen weisen wir Flash an, alle danach genannten Zeichen zu sperren, selbst wenn sie sich innerhalb des vorher als erlaubt definierten Wertebereichs befinden. Das Gleiche funktioniert natürlich auch mit Buchstaben. Falls das Minus-Zeichen ebenfalls erwünscht ist, kann es nicht einfach eingetragen werden: tAlter.restrict = „0–9 –“;

Diese Definition wäre falsch, da nach dem betreffenden Zeichen ein Wert erwartet wird. Stattdessen müsste man ein Escape-Zeichen verwenden: tAlter.restrict = „0–9 \\-“;

Bei manchen Textfeldern empfiehlt sich darüber hinaus eine Beschränkung der Zeichenanzahl. So macht eine Altersangabe nur Sinn, wenn sie aus maximal drei Zeichen besteht. Ein höheres Alter wird jemand, der unser Textfeld ausfüllen möchte, ohnehin eher nicht erreichen, so dass weitere Zeichen überflüssig sind. 6. Erweitern Sie den Code: tAlter.maxChars = 3;

Die Eigenschaft maxChars erlaubt es, die Länge des Eingabetextes auf eine bestimmte Anzahl zu beschränken. Ist diese erreicht, wird nicht das erste Zeichen automatisch gelöscht, sondern es ist keine weitere Eingabe mehr möglich. Bei Änderungen muss mindestens ein Zeichen entfernt werden.

14.12  Eingabetext

Eine weitere Besonderheit stellen Felder dar, die maskiert werden sollen, so dass die konkrete Eingabe nicht sichtbar wird. Das gilt klassischerweise für ein Passwort. 7. Erweitern Sie den Code:  var tPass:TextField = this.create TextField(„alter“, this.getNext­ HighestDepth(), tName._x, tName._y + tName._height + 5, 100, 20); tPass.border = true;

tPass.background = true;

tPass.backgroundColor = 0xffff99; tPass.type = „input“;

tPass.password = true;

Unterhalb des Textfeldes für den Namen taucht ein weiteres Feld auf, das bei Texteingabe nur Sternchen anzeigt. Wir erstellen in gewohnter Weise ein neues Feld, das 5 Pixel unterhalb des Feldes für den Namen platziert wird. Da wir seine Eigenschaft password auf true setzen, maskiert Flash automatisch alle Eingaben. Natürlich ist per AS trotzdem ein Zugriff auf seinen Inhalt möglich, da ansonsten keine Kontrolle der Richtigkeit erfolgen könnte. In einem Formular besteht eine Reihenfolge der Felder, so das sich einfach per Tabulator-Taste von einem zum nächsten wechseln lässt. Die Reihenfolge der Erzeugung bestimmt auch die Tabulator-Reihenfolge. Sie können das testen, indem Sie in das erste Feld links oben klicken und dann per Tabulator zu dem nächsten wechseln. Das zweite wird das Altersfeld oben rechts, das dritte das Passwort-Feld unten links sein. Unabhängig von der Erzeugung kann die Reihenfolge explizit per AS festgelegt werden. 8. Erweitern Sie den Code: tName.tabIndex = 1; tPass.tabIndex = 2;

tAlter.tabIndex = 3;

Wir beginnen zwar wiederum mit dem Namen, doch als nächstes folgt das Passwort-Feld und zum Schluss erst die Altersangabe. Um diese Reihenfolge festlegen zu können, müssen wir lediglich auf die Eigenschaft tabIndex zugreifen und eine positive Ganzzahl übergeben, deren kleinste das erste Feld festlegt. Wollen wir dagegen den Tabulator unterbinden, genügt:

195

tName.tabEnabled = tPass.tabEnabled = tAlter.tabEnabled = false;

Wir setzen die Eigenschaft tabEnabled einfach auf false, so dass ein Drücken der Tabulator-Taste von keinem Eingabefeld mehr wahrgenommen (oder genauer: an kein Feld mehr weitergeleitet) wird. Mitunter dient der Eingabetext einer gezielten Kommunikation, die in einer bestimmten Form erfolgen muss. Dann ist es notwendig, die eingegebenen Daten auf Korrektheit zu überprüfen. Nicht immer kann man die Korrektheit durch das Aussparen bestimmter Zeichen wie in einem vorhergehenden Beispiel gewährleisten. Bei einer Mail-Adresse beispielsweise sind nahezu alle Zeichen erlaubt, aber manche müssen auf jeden Fall vorkommen und bei manchen ist klar, an welcher Stelle sie auftreten müssen bzw. nicht auftreten dürfen. Wollten wir gerade bei einer Mail eine erschöpfende Analyse durchführen, kämen wir wohl auf ein Dutzend Bedingungen, die erfüllt sein müssen. Da es in unserem Beispiel nur um das Prinzip geht, beschränken wir uns auf einige wenige Kriterien. Betrachten wir eine E-Mail, so sieht die Adresse in allgemeiner Form so aus: [email protected] Damit verfügt sie u. a. über folgende Charakteristika:

• Mindestlänge 8 Zeichen • Exakt ein @-Zeichen • Das @-Zeichen steht weder an erster noch an zwei-

ter Stelle • Mindestens ein Punkt • Dieser Punkt folgt stets irgendwo hinter dem @-Zeichen • Zwischen diesem Punkt und dem @-Zeichen befinden sich mindestens zwei andere Zeichen • Die letzten beiden Zeichen bestehen weder aus einem Punkt noch einem @-Zeichen • Das erste Zeichen ist kein Punkt • Die Adresse darf kein Leerzeichen enthalten. Sicher existieren noch weitere Regeln, aber es würde schon ausreichen, wenn alle genannten Kriterien bei einer Überprüfung Anwendung fänden. Wir wählen beispielhaft die Kriterien Mindestlänge, Position des @-Zeichens sowie des letzten Punktes. 1. Erstellen Sie einen neuen Film.

196

Kapitel 14  String, Textfield, Textformat

2. Weisen Sie der Ebene actions folgendes Bildskript zu: //––---------- vars –--------------- var mBtn:MovieClip;

var aFehler:Array = [];

Abbildung 40:  Eingabefeld für die Mail-Adresse

//--------- functions –--------------

schlossener Eingabe die Kontrolle des Feldes auszuführen und gegebenenfalls ein entsprechendes Feedback zu geben oder die Mail-Adresse zu akzeptieren. Wir legen zunächst mehrere Variablen an, um einen aus einem MovieClip bestehenden Button, die dort angezeigte Beschriftung sowie das Eingabetextfeld zu referenzieren. Innerhalb der Funktion init() wird zunächst das Eingabefeld errichtet, wobei wir den Code aus einer vorhergehenden Übung übernommen haben. Danach wird ein MovieClip mit Hilfe der Zeichnungsmethoden der MovieClip-Klasse gezeichnet. Damit der Anwender weiß, was es mit diesem Objekt auf sich hat, erhält es ein eigenes Textfeld, in dem die Beschriftung „Mail“ angezeigt wird. Um zu verhindern, dass jemand diese Beschriftung auswählen kann – was bei einem als Button zu verwendenden Objekt merkwürdig anmuten würde  –, setzen wir die selectableEigenschaft des betreffenden Textfeldes auf false. Abschließend rufen wir die Funktion init() auf, um die gewünschten Objekte einzurichten.

 var tMail:TextField, tMailBtn:TextField; function init() {

 tMail = this. createTextField(„emailAdresse“, this.getNextHighestDepth(), 20, 20, 100, 20);  tMail.border = true;

 tMail.background = true;

 tMail.backgroundColor = 0xffff99;  tMail.type = „input“;

 mBtn = this.createEmptyMovieClip („btFormular“, this.getNextHighest Depth());  mBtn._x = tMail._x;

 mBtn._y = tMail._y+tMail._height+5;  mBtn.lineStyle(0.25, 0 × 000000, 100);  mBtn.beginFill(0xffffff, 100);  mBtn.lineTo(60, 0);

 mBtn.lineTo(60, 20);

3. Fügen Sie in der Deklaration der init()-Funktion unmittelbar vor der schließenden Klammer ein:

 mBtn.lineTo(0, 0);

mBtn.onPress = kontrolle;

 tMailBtn = mBtn. createTextField(„emailButton“, mBtn.getNextHighestDepth(), mBtn._ width/2, 0, 0, 0);

function kontrolle() {

 mBtn.lineTo(0, 20);  mBtn.endFill();

4. Erweitern Sie den Funktions-Block um folgende Deklaration:  aFehler = [];

 tMailBtn.autoSize = „center“;

 var sTxt:String = tMail.text;

 tMailBtn.text = „Mail“;

 aFehler.push(„Das Eingabefeld ist leer“);

 tMailBtn.selectable = false; }

//------------ start –-------------- init();

Als Ergebnis erhalten Sie, wie in Abbildung  40 gezeigt, ein gelb hinterlegtes Eingabetextfeld sowie darunter einen sehr schlicht gehaltenen Button mit der Beschriftung „Mail“. Er dient später dazu, bei abge-

 if (sTxt.length<1) {

} else if (sTxt.length<8) {

 aFehler.push(„Die Mail-Adresse muss mindestens 8 Zeichen umfas­ sen“); }

 if (sTxt.charAt(0) == „@“ || sTxt. charAt(1) == „@“) {

14.12  Eingabetext

 aFehler.push(„Das @-Zeichen befindet sich an der falschen Stelle“); }

 if (sTxt.indexOf(„@“) != sTxt.last­ IndexOf(„@“)) {  aFehler.push(„Es ist nur ein @-Zeichen erlaubt“); }

 if (sTxt.lastIndexOf(„.“)<=sTxt. indexOf(„@“)+2) {

 aFehler.push(„Der letzte Punkt befindet sich an der falschen Stelle“); }

 if (aFehler.length>0) {  for (a in aFehler) {

 trace(aFehler[a]); }

} else {

 trace(„Gültige Angabe“); } }

Wenn Sie testen und sich entgegen der sonstigen Gepflogenheit einmal bemühen, bewusst eine falsche Adresse einzugeben, erhalten Sie eine entsprechende Fehlermeldung im Nachrichtenfenster angezeigt. Wir weisen in init() dem als Button fungierenden MovieClip ein onPress-Ereignis zu, das bei Auftreten eine Funktion zur Kontrolle der Texteingabe aufruft. Diese Funktion wird innerhalb des FunktionsBlocks deklariert und leert zunächst das Array, das alle Fehlermeldungen aufnimmt. So wird sicher gestellt, das bei mehrmaliger fehlerhafter Texteingabe nicht die Fehler aus vorhergehenden Versuchen erneut angemahnt werden. Anschließend speichern wir den Inhalt des Eingabefelds in einer lokalen Variable, so dass wir einfacher darauf zugreifen können, ohne immer tMail.text schreiben zu müssen. Dieses Vorgehen ist nicht unbedingt notwendig, stellt aber eine gewisse Erleichterung dar. Die eigentliche Kontrolle besteht aus einer Anzahl an if-Bedingungen, die jeweils einzelne Zeichen kontrolliert. Entsprechend der Reihenfolge im Skript fragen wir nach, ob:

197

• Das

Eingabefeld weniger als 1 Zeichen enthält. In dem Fall ist es leer, weil jemand, vielleicht aus einer spontanen Scherzhaftigkeit heraus oder schlicht aus Vergesslichkeit den Mail-Button betätigte, ohne seiner Eingabepflicht Genüge zu tun. • Weniger als 8 Zeichen vorliegen, was bedeutet, dass die Länge zu kurz ist, um eine gültige Adresse darzustellen. Diese Bedingung muss mit der vorhergehenden über ein else if verbunden werden, da ansonsten bei Zutreffen der ersten Bedingung (kein Zeichen enthalten) auch diese zweite Bedingung automatisch zutrifft (kein Zeichen ist weniger als 8 Zeichen). • Das erste oder zweite Zeichen ein @-Zeichen enthalten, was nicht zulässig ist. Da wir ein logisches Oder verwenden, trifft diese Bedingung auch dann zu, wenn das erste und das zweite Zeichen einem @ entsprechen (schöne Grüße vom Spaßvogel aus der ersten Bedingung). • Das @ nur einmal auftritt. Das ist dann der Fall, wenn sein erstmaliges Auftreten (indexOf()) identisch ist mit seinem letztmaligen Auftreten (lastIndexOf()). Dieser Bedingung voranstellen könnte man noch eine Bedingung, die abfragt, ob das betreffende Zeichen überhaupt auftritt. Das lässt sich mit indexOf() bewerkstelligen, dessen Rückgabewert –1 beträgt, wenn das gesuchte Zeichen nicht gefunden werden konnte. • Der letzte Punkt mindestens drei Zeichen weit hinter dem @-Zeichen auftritt. • Das Array aFehler Elemente enthält. Das ist der Fall, wenn mindestens eine der vorgenannten Bedingungen zutrifft. Dann speichern wir eine entsprechende Meldung, die nun per trace() im Nachrichtenfenster ausgegeben wird. In einer konkreten Anwendung müsste diese Information in einem gesonderten Textfeld angezeigt werden. Ist das Array leer, handelt es sich um eine gültige Mail-Adresse und Sie müssten diejenige Funktion aufrufen, die beispielsweise die Daten an ein PHPSkript weiterleitet oder in anderweitiger Form auswertet. Hier steht stellvertretend dafür eine bescheidene trace()-Anweisung. In ähnlicher Weise würde man bei anderen Eingabefeldern verfahren, wobei sich dort die Abfrage i. d. R. einfacher gestaltet als bei einer Mail-Adresse.

15

Math-Klasse

Die Math-Klasse umfasst nicht, wie der Name vielleicht vermuten lassen könnte, alle möglichen mathematischen Objekte und Operationen. Einige sind nämlich so grundlegend, dass sie in anderer Weise zur Verfügung gestellt werden. So haben wir bereits die arithmetischen Operatoren mit den Grundrechenarten und den Datentyp Number als Oberbegriff für alle Arten von Zahlen kennen gelernt. Statt dessen bietet die Math-Klasse Methoden für etwas fortgeschrittenere mathematische Operationen wie Wurzelberechnungen, Zufallszahlen etc. Eingedenk einer schulischen Vorbelastung  – erfahrungsgemäß gehört der Mathematikunterricht für die meisten Schüler zu den eher unangenehmen Erlebnissen  – mögen Sie nun erschaudern und schnell weiter blättern wollen. Das wäre schade, denn gerade die Math-Klasse macht erst viele geskriptete Animationen und Effekte möglich, und der in Sachen Flash geradezu unermüdliche Publisher friendsofed hat dem Thema Mathematik und Flash gleich mehrere wunderbare Bücher gewidmet. Um Ihnen den Zugang zu erleichtern, haben wir das Thema in mehrere Blöcke aufgeteilt:

• Das

vorliegende Kapitel führt in die Funktionsweise der Math-Klasse ein. • Ein eigenständiges Kapitel befasst sich darauf basierend mit Trigonometrie und ermöglicht u. a. Kreisbewegungen, Drehungen etc. • Außerdem beruhen Effekte diverser Workshops auf den hier vermittelten Grundlagen.

15.1 Eigenschaften: Konstanten Flash stellt einige Werte als Konstanten zur Verfügung, von denen Sie wahrscheinlich nur eine kennen, und das ist auch diejenige, die für Anwendungen tatsächlich benötigt wird: Math.PI. Diese Konstante bzw. diese Zahl definiert das Verhältnis von Kreisumfang zu Kreisdurchmesser und beträgt ca. 3,14. Einen genaueren Wert können Sie sich, wenn Sie wollen, mit trace(Math.PI) ausgeben lassen. Diese Konstante ist unverzichtbar, wenn es um die Berechnung kreisförmiger Objekte und Bewegungen geht. Wir werden im Abschnitt über Trigonometrie auf sie zurückkommen. Mit den übrigen Konstanten werden Sie aller Wahrscheinlichkeit nach nicht in Berührung kommen. Sie sind hier nur der Vollständigkeit halber aufgezählt. Konstante

Wert

Math.E

ca. 2.7182

Math.LN10

ca. 2.3025

Math.LN2

ca. 0.6931

Math.LOG10E

ca. 0.4342

Math.LOG2E

ca. 1.4426

Math.PI

ca. 1.1415

Math.SQRT1_2

ca. 0.7071

Math.SQRT2

ca. 1.4142

Konstanten der Math-Klasse

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

199

200

15.2 Methoden Die Math-Klasse bietet zahlreiche Methoden an, die über simple Zufallszahlen und Rundungen bis hin zu Exponentialfunktionen und komplexen logarithmischen Funktionen reichen.

15.2.1 Auf- und Abrunden Berechnungen ergeben nicht zwangsläufig schöne runde Zahlen, also Ganzzahlen. Im Gegenteil, oft erhalten wir Gleitkommazahlen (ein ausführliches Beispiel finden Sie im Abschnitt Zufallszahlen), die aber in dieser Form nicht gut weiterverarbeitet werden können. Wenn wir etwa die Anzahl einzublendender Objekte oder eine Framenummer errechnen müssen, machen solche Fließkommazahlen keinen Sinn. Die Werte müssen daher gerundet werden. Flash stellt dazu drei Methoden zur Verfügung. Mit Math.round() wird abhängig von der vorliegenden Zahl entweder auf- oder abgerundet. Werte zwischen x.1 und x.4 werden auf x abgerundet, Werte ab x.5 werden auf x +1 aufgerundet, wobei x für eine beliebige Ganzzahl steht. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nZahl1:Number = 1.4; var nZahl2:Number = 1.5;

 trace(„Die Zahl „+nZahl1+“ ergibt gerundet: „+Math.round(nZahl1));  trace(„Die Zahl „+nZahl2+“ ergibt gerundet: „+Math.round(nZahl2));

Ausgabe im Nachrichtenfenster: Die Zahl 1.4 ergibt gerundet: 1 Die Zahl 1.5 ergibt gerundet: 2 Bei dieser Rundung überlassen Sie also letzten Endes Flash die Entscheidung, ob die resultierende Zahl durch die Rundung kleiner (vgl. nZahl1) oder größer (vgl. nZahl2) wird. Mit Math.floor() bzw. Math. ceil() können Sie statt dessen eine direkte Vorgabe machen, so dass Ihre Zahl auf jeden Fall ab- bzw. aufgerundet wird.

Kapitel 15  Math-Klasse

3. Erweitern Sie das Skript:  trace(„Die Zahl „+nZahl1+“ ergibt abgerundet: „+Math.floor(nZahl1));  trace(„Die Zahl „+nZahl2+“ ergibt abgerundet: „+Math.floor(nZahl2));

Ausgabe im Nachrichtenfenster: Die Zahl 1.4 ergibt gerundet: 1 Die Zahl 1.5 ergibt gerundet: 2 Die Zahl 1.4 ergibt abgerundet: 1 Die Zahl 1.5 ergibt abgerundet: 1 Im Gegensatz zu vorher erhalten Sie unabhängig von der Nachkommastelle eine abgerundete Zahl, denn durch Math.floor() erzwingen wir eine derartige Abrundung auf die nächst kleinere Ganzzahl (vorausgesetzt natürlich, die übergebene Zahl ist ein Gleitkommawert). 4. Erweitern Sie das Skript:  trace(„Die Zahl „+nZahl1+“ ergibt aufgerundet: „+Math.ceil(nZahl1));  trace(„Die Zahl „+nZahl2+“ ergibt aufgerundet: „+Math.ceil(nZahl2));

Ausgabe im Nachrichtenfenster: Die Zahl 1.4 ergibt gerundet: 1 Die Zahl 1.5 ergibt gerundet: 2 Die Zahl 1.4 ergibt abgerundet: 1 Die Zahl 1.5 ergibt abgerundet: 1 Die Zahl 1.4 ergibt aufgerundet: 2 Die Zahl 1.5 ergibt aufgerundet: 2 Mit Math.ceil() dagegen runden wir in jedem Fall auf. Diese Methoden helfen uns auch, wenn wir die Anzahl der Nachkommastellen begrenzen wollen. Wollen wir etwa Prozentangeben visualisieren, kann es sinnvoll sein, die Werte bis auf zwei Nachkomma­ stellen genau anzuzeigen. 5. Erweitern Sie das Skript: var nStellen:Number = 2; var nBasis:Number = 10;

var nZahl3:Number = 5.1856474232;

nZahl3 *= Math.pow(nBasis,nStellen); nZahl3 = Math.floor(nZahl3);

nZahl3 /= Math.pow(nBasis,nStellen);  trace(„Zahl mit „ + nStellen + „ Nachkommastellen: „ + nZahl3);

15.2  Methoden

201

Ausgabe im Nachrichtenfenster: Zahl mit 2 Nachkommastellen: 5.18

15.2.2 Zufallszahlen

Mit Math.floor() können wir, wie gesehen, sehr einfach die Stellen nach dem Komma entfernen. Wenn wir eine Zahl mit mehr als zwei Nachkommastellen um zwei Stellen nach links verschieben bzw. mit 100 multiplizieren, können wir problemlos alles, was nun hinter dem Komma steht, entfernen. Aus der Zahl 5.1856474232 wird durch Multiplikation mit 100 518.56474232, durch Math.floor() entsteht daraus 518. Wird dieser Wert wieder durch 100 dividiert (um die ursprüngliche Verschiebung um zwei Stellen rückgängig zu machen), ergibt sich 5.18, was einem Abtrennen aller Nachkommazahlen ab der dritten Stelle entspricht. Der Multiplikator bzw. Divisor 100 ergibt sich aus dem verwendeten dezimalen Zahlensystem, dessen Basis die 10 darstellt. Jede Kommastelle, um die wir verschieben wollen, entspricht einer Multiplikation bzw. Division mit 10. Zwei Kommastellen ergeben eine Multiplikation bzw.  – ach, Sie wissen schon  – von 10 * 10, drei Kommastellen eine Multiplikation von 10 * 10 * 10 etc. Das lässt sich auch darstellen als 102 und 103 bzw. mit Hilfe der Math-Klasse als Math. pow(10,2) und Math.pow(10,3). Diese Berechnung lässt sich einfach in eine Funktion fassen.

Oft ist es notwendig, mit zufällig verteilten Werten zu arbeiten. Das gilt vor allem für Spiele, KI und geskriptete Animationen, aber auch eine Bildergalerie beispielsweise kann sinnvoll mit Zufallszahlen attraktiver gemacht werden. Flash bietet zwei Funktionen, um solche Zahlen zu erhalten. Die erste Funktion gilt als völlig veraltet und sollte nicht mehr verwendet werden, hat jedoch den Vorteil, dass sie zunächst einfacher zu verstehen ist. Es handelt sich um das simple random().

6. Ergänzen Sie das Skript: function nachkomma(pZahl, pStellen){

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: this.onMouseDown = function(){  trace(random(10)); }

Mit dieser Funktion erhält man per Mausklick an beliebiger Stelle eine Zufallszahl zwischen 0 und 9. Das Argument in der Klammer gibt an, aus wie vielen verschiedenen Zahlen ein Wert ermittelt werden soll. Der kleinstmögliche Wert entspricht der 0, als größtmöglicher Wert kann dann nur die übergebene Zahl  –1, also hier die 9, in Frage kommen. Dementsprechend würde random(1001) Werte zwischen 0 und 1000 errechnen. Die zweite Methode sieht wesentlich umständlicher aus, ist jedoch die empfohlene Variante.

 var nPow:Number = Math. pow(10,pStellen);

3. Ersetzen Sie den trace()-Befehl durch:

 pZahl = Math.floor(pZahl);

Beim Testen erhalten Sie anstelle der angenehm einfachen Ganzzahlen Fließkommawerte, die irgendwo zwischen 0 und 0.9 Periode rangieren. Der random()Methode der Math-Klasse können wir nicht mehr wie zuvor ein Argument übergeben. Sie verfügt nämlich über einen fest vorgegebenen Wertebereich. Zudem gibt sie Zufallszahlen zurück, die in den meisten Fällen so nicht verwendet werden können. Sie müssen erst bearbeitet werden. Daher bürdet uns diese Version mehr Arbeit auf als die ältere Variante. Sie hat jedoch den Vorteil, dem zu entsprechen (oder genauer: näher an dem zu liegen), was höhere Programmiersprachen bieten. AS nähert sich also einem Standard an, so dass der Entwickler flexibler wird. Dafür muss man mitunter einen gewissen Mehraufwand in Kauf nehmen.

 pZahl *= nPow;  pZahl /= nPow;  return pZahl; }

 trace(„Zahl: „+nachkomma(3.14786932,4));

Ausgabe im Nachrichtenfenster: Zahl: 3.1478 Sie müssen beim Aufruf lediglich die gewünschte Zahl sowie die Anzahl der Nachkommastellen angeben und erhalten als Ergebnis den entsprechend gerundeten Wert.

trace(Math.random());

202

Auf welche Weise erhalten wir nun dieselben Zahlen wie mit der vorhergehenden Version? Dazu müssen wir die Zufallszahl mit einem Wert multiplizieren, so dass sie größer 0 wird, und anschließend runden wir sie auf oder ab, um sie in eine Ganzzahl zu verwandeln. 4. Erweitern Sie das onMouseDown-Ereignis um folgende Zeilen:  var nZufallFliess:Number = Math.random()*10;  var nZufallGanz = Math. floor(nZufallFliess);

 trace(„Fliesskommazahl: „+nZufallFliess); trace(„Ganzzahl: „+ nZufallGanz);

Bei jedem Klicken speichert Flash in der Variablen nZufallFliess eine Zufallszahl, z. B. 4.20338441617787. In der Variablen nZufallGanz wird dieser Wert abgerundet, so dass wir als Zufallszahl der gesamten Berechnung 4 erhalten. Die Abrundung findet in jedem Fall statt, selbst wenn der zuerst ermittelte Wert 4.99999999 beträgt. Als kleinstmögliche Zahl gibt Flash 0 und als größtmögliche Zahl 9 (d. h.: 10 –1) zurück, also dieselben Werte wie bei random(10). 5. Um das Skript etwas lesbarer zu gestalten, ersetzen Sie alles innerhalb des onMouseDown-Ereignisses wie folgt:  var nZufall = Math.floor(Math.random()*10); trace(„Zufallszahl: „+ nZufall);

Wir erhalten bei Mausklick eine zufällig gewählte Ganzzahl zwischen 0 und 9. Wollten wir, was bei random(10) nicht so einfach möglich ist, die 10 mit einschließen, ohne auf die 0 verzichten zu müssen, würde man schreiben (Fettdruck):  var nZufall = Math.round(Math.random()*10);

Nun wird mathematisch korrekt gerundet: Nachkommawerte kleiner 5 werden ab-, alle anderen aufgerundet. Bei 0.2 etc erhalten wir also 0, bei 0.5 etc die 1. Daher ergibt 9.5 den aufgerundeten Wert 10, der zulässige Wertebereich beträgt also 0 bis 10. Natürlich lässt sich die 0 auch vollständig ausschließen, indem man Math.ceil() verwendet und somit nur auf-

Kapitel 15  Math-Klasse

rundet. Ein wichtiger Punkt muss allerdings beachtet werden, wenn wir mit Math.round() arbeiten. Denn diese Methode führt dazu, dass der kleinste und der größte Wert weniger häufig auftreten können als alle anderen Zahlen. Bleiben wir bei dem vorherigen Beispiel. Wann erhalten wir 0, wann 1? Betrachten wir das Ganze unter Beschränkung auf eine einzige Nachkommastelle. Wenn Math.random() 0.0 bzw. 0.4 zurückgibt, runden wir auf 0 ab, bei 0.5 bis 1.4 wird auf 1 gerundet. Fünf verschiedene Werte entsprechen einer 0, zehn dagegen der 1. Die Wahrscheinlichkeit, eine 0 zu erhalten, ist damit halb so hoch wie diejenige einer 1. Gleiches gilt für den höchsten Wert, die 10. Manchmal ist es notwendig, innerhalb eines größeren Wertebereichs Zufallszahlen zu ermitteln, z. B. zwischen 20 und 50. Leider ist das nicht möglich, indem wir einfach entsprechende Argumente an die Math.random()-Methode übergeben. Aber eine einfache Überlegung zeigt die Lösung auf: Zwischen 20 und 50 besteht eine Differenz von 30. Würden wir eine beliebige Zahl zwischen 0 und 30 ermitteln und anschließend 20 hinzu addieren, hätten wir den erwähnten Wertebereich realisiert. 6. Fügen Sie nach den bisherigen trace()-Befehlen ein:  var nZufallZwischen = Math. round(Math.random()*30) + 20;

 trace(„Zufallszahl zwischen 20 und 50: „+ nZufallZwischen);

Im Grunde genommen ist es sehr einfach, herauszufinden, welche Zahlen hier ermittelt werden können. Im ersten Schritt errechnet man den kleinstmöglichen Wert (hier: 0) und den größtmöglichen Wert (hier: 30). Addiert man dazu die nach der Rundung angegebene Zahl, kennt man den Wertebereich. Natürlich muss nicht zwangsläufig eine Addition erfolgen. Verwendet man statt dessen eine Subtraktion, ist es möglich, negative Werte zu erhalten. 7. Fügen Sie nach den bisherigen trace()-Befehlen ein:  var nZufallNegativPositiv = Math. round(Math.random()*30) – 15;

 trace(„Zufallszahl negativ oder positiv: „+ nZufallNegativPositiv);

Die ausgegebenen Werte schwanken zwischen –5 und 5, die 0 eingeschlossen. Um prinzipiell die gleiche

15.2  Methoden

Anzahl an positiven wie negativen Werte zu erhalten, müssen wir lediglich den an Math.random() übergebenen Operanden, dividiert durch 2, subtrahieren. Wollen wir also Zufallszahlen zwischen  –1000 und 1000, lautet die Formel: Math.round(Math.random()*2000) – 1000.

Es stehen insgesamt 2001 Zahlen zur Verfügung, nämlich 1000 negative (–1000 bis –1), 1000 positive (1 bis 1000), sowie die 0. Die kleinstmögliche abgerundete Zahl beträgt 0, von der 1000 subtrahiert wird, was –1000 ergibt. Die größtmögliche Zahl entspricht 2000, von der wir ebenfalls 1000 subtrahieren und so 1000 erhalten. Es mag vielleicht merkwürdig erscheinen, dass wir negative Zufallszahlen errechnen wollen. Aber sie erweisen sich in bestimmten Situationen als ausgesprochen nützlich, etwa wenn wir Objekte animieren wollen, die sich zufallsbedingt entweder nach rechts oder nach links (bzw. nach oben oder unten) bewegen sollen. Ein derartiges Beispiel finden Sie im Kapitel Geskriptete Animationen. Da wir öfter mit einem spezifischen Wertebereich arbeiten wollen, empfiehlt es sich, eine entsprechende Funktion zu schreiben. 8. Ersetzen Sie das bisherige Skript vollständig durch folgende Zeilen:  function zufall(pMin:Number, pMax:Number):Number {  var nZuf = pMax-pMin;

 return Math.round(Math. random()*nZuf)+pMin; }

this.onMouseDown = function() {  trace(zufall(-5, 15)); };

Als Parameter übergeben wir jeweils die kleinst- und die größtmögliche Zahl. Unsere Funktion errechnet zunächst die Differenz zwischen beiden, ermittelt auf dieser Basis eine Zufallszahl und addiert anschließend den gewünschten Minimalwert. Ist dieser negativ wie in unserem Beispiel, wird er automatisch subtrahiert, da die Addition einer negativen Zahl bekanntermaßen einer Subtraktion entspricht. Da wir uns Code erspart haben, müssen wir bei der Übergabe der Parameter darauf achten, dass die erste Zahl tatsächlich kleiner als die zweite ist. Alternativ könnte man mit Math.

203

max() die größere Zahl automatisch ermitteln und

dementsprechend die Berechnung anpassen.

9. Im Code wären folgende Änderungen notwendig (Fettdruck):  function zufall(pMin:Number, pMax:Number):Number {

 var nMax:Number = Math.max(pMin, pMax);  var nMin:Number = Math.min(pMin, pMax); var nZuf:Number = nMax-nMin;  return (Math.round(Math. random()*nZuf)+nMin); }

this.onMouseDown = function() {  trace(zufall(5, -15)); };

In einer Variablen speichern wir zuerst die größere, anschließend in einer anderen die kleinere der beiden Zahlen. An der Berechnung der konkreten Zufallszahl ändert sich natürlich nichts. Beim Aufruf der Funktion spielt es nun keine Rolle, welche der übergebenen Zahlen größer ist. Wichtig ist nur noch, dass sie voneinander verschieden sind, was wir schlicht voraussetzen, denn andernfalls würde eine Zufallszahl keinen Sinn machen. Ist es allerdings unabdingbar, dass alle Werte mit der gleichen Wahrscheinlichkeit erscheinen sollen, bleibt nur die Verwendung von Math.floor() bzw. Math.ceil(), während Math.round() unser Ergebnis verzerren würde. In Sonderfällen kann es notwendig sein, eine Zufallszahl zu ermitteln, die entweder 1 oder –1 beträgt, aber keine 0. Glücklicherweise lässt sich das einfach realisieren. 10. Ergänzen Sie das onMouseDown-Ereignis um folgende Zeile:

trace(Math.round(Math.random())*2–1);

Beachten Sie, das im Gegensatz zu vorher eine Multiplikation erst nach dem Runden erfolgt. Ohne Multiplikation und ohne Subtraktion erhalten wir Werte zwischen 0 und 1. Bei einer 0 ändert sich nichts durch die Multiplikation mit 2, die Subtraktion dagegen wird durchgeführt, so dass sich als Ergebnis –1 ergibt. Erhalten wir zunächst 1, verdoppelt sich ihr Wert auf

204

Kapitel 15  Math-Klasse

2 durch die Multiplikation. Subtrahieren wir 1, bleibt als Ergebnis 1 übrig. Dasselbe lässt sich natürlich mit beliebigen anderen Werten durchführen, solange vom Operanden, mit dem man multiplizieren möchte, nachher dessen Hälfte wieder subtrahiert wird. So ergibt beispielsweise Math.round(Math.random())*10–5 die Werte 5 bzw. –5. Etwas anders gestaltet sich die Berechnung, wenn Sie einen größeren Wertebereich negativer und positiver Zahlen abdecken und dabei ebenfalls die 0 ausschließen wollen. Das wäre z. B. notwendig, wenn Sie ein Objekt mit einem Zufallstempo bewegen wollen und dabei verhindern müssen, dass es starrsinnig auf seiner Position verharrt – nur weil sowohl sein x- wie auch sein y-Tempo zufälligerweise eben 0 betragen! 11. Erweitern Sie das Skript um folgende Funktionsdeklaration:  function zufallOhne (pMax:Number):Number {

 var nZufall:Number = Math.round (Math.random()*(pMax*2))-pMax;  while (nZufall == 0) {

 nZufall = Math.round(Math. random()*(pMax*2))-pMax;

• Das

anschließende Runden macht daraus eine Ganzzahl zwischen 0 und 20. • Durch die zuletzt erfolgende Subtraktion von 10 entspricht das Ergebnis einem Wert zwischen –10, falls vorher eine 0 vorlag, und 10, falls zuvor eine 20 vorlag. Wenn bei dieser Berechnung keine 0 ermittelt wird, führt Flash sofort den return-Befehl aus. Andernfalls tritt die while-Schleife in Aktion, die solange alle vier eben erläuterte Rechenschritte erneut durchführt, wie wir eine 0 als Endergebnis erhalten. Faktisch verhindern wir damit, dass eine 0 per return zurück gegeben wird. Nun könnte man einwenden, dass die while-Schleife zumindest theoretisch permanent eine 0 ermitteln könnte, was zu einer Endlosschleife führen würde. Das trifft zwar zu, ist aber extrem unwahrscheinlich. Wir können noch einen Schritt weiter gehen, indem wir nicht nur die 0, sondern einen ganzen Wertebereich ausschließen. Stellen wir uns noch mal das Beispiel eines zu animierenden Objekts vor. Eine 0 würde eine Animation unmöglich machen, aber andere Werte wie 1 oder  –1 könnten so langsam sein, dass wir sie ebenfalls nicht verwenden wollen.

}

13. Ändern Sie die Deklaration von zufallOhne() folgendermaßen (Fettdruck):



 function zufallOhne(pMax:Number, pOhneMin:Number, pOhneMax:Number): Number {

 return (nZufall); }

12. Ändern Sie das onMouseDown-Ereignis wie folgt:

this.onMouseDown = function() {



};

 trace(zufallOhne (10));

Ein beliebiger Mausklick führt zur Ausgabe einer Zufallszahl, die zwischen 10 und  –10 liegt. Eine 0 erscheint dabei nicht. Bei jedem Aufruf weisen wir der in der Funktion zufall() eingerichteten lokalen Variablen nZufall einen Wert zu, der sich folgendermaßen errechnet:

• Zuerst multiplizieren wir das übergebene Argument mit 2. Wird eine 10 übergeben, erhalten wir an dieser Stelle 20. • Diesen Wert multiplizieren wir mit einer Zufallszahl zwischen 0 und 0.9, so dass wir als Ergebnis eine Zahl zwischen 0,0 und 19,9 erhalten.

 var nZufall:Number = Math.round (Math.random()*(pMax*2))-pMax;  while (nZufall>=pOhneMin && nZufall<=pOhneMax) {

 nZufall = Math.round(Math. random()*(pMax*2))-pMax; }

 return (nZufall);

}

14. Ändern Sie im onMouseDown-Ereignis den Aufruf der Funktion (Fettdruck):  this.onMouseDown = function() {

 trace(zufallOhne(10, -5, 5));

};

15.2  Methoden

Beim Testen gibt Flash Zahlen aus, die zwischen –10 und –6 sowie 6 und 10 liegen. Wir erweitern die Funktion um zwei Parameter, um eine Unter- und eine Obergrenze für die auszuschließenden Zahlen einzurichten. Die while-Schleife muss dann lediglich prüfen, ob die eine Zeile vorher ermittelte Zufallszahl größer als die Unter- und kleiner als die Obergrenze ist. Trifft das zu, lassen wir uns eine neue Zufallszahl geben, andernfalls kann Flash den Wert direkt zurück geben. Auch hier gehen wir davon aus, dass derjenige, der Argumente übergibt, weiß, was er tut. Ansonsten müsste man die Funktion anpassen, um den höchsten und niedrigsten Wert zu ermitteln, wie wir es schon in einem früheren Beispiel getan haben (s. Schritt 9). Für unseren alltäglichen Gebrauch machen die per Math.random() entstehenden Werte einen angenehm zufälligen Eindruck. Tatsächlich handelt es sich dabei jedoch nur um sogenannte Pseudo-Zufallszahlen, da sich echte Zufallszahlen einer formelmäßigen Berechnung aus prinzipiellen Gründen eher verweigern, um es zurückhaltend zu formulieren.

15.2.3 Weitere Methoden Zu den gebräuchlicheren weiteren Methoden zählen Math.abs(), Math.min(), Math.max() sowie Math.pow(), die bereits z. T. angesprochen wurden. Wenn Sie unabhängig vom konkreten Vorzeichen nur den Wert einer Variablen auslesen wollen, hilft Ihnen Math.abs(). Das ist z. B. nützlich bei einer geskripteten Animation, die zum Stillstand kommen soll, sobald die Entfernung zwischen zwei Objekten einen bestimmten Wert unterschreitet. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: var nZahl1:Number = 5;

var nZahl2:Number = -10;

 trace(„Absoluter Wert nZahl1: „ + Math.abs(nZahl1));  trace(„Absoluter Wert nZahl2: „ + Math.abs(nZahl2));

Ausgabe im Nachrichtenfenster: Absoluter Wert nZahl1: 5 Absoluter Wert nZahl2: 10

205

Wir richten zunächst zwei Variablen mit einer positiven bzw. einer negativen Zahl ein. Würden wir die Zahlen unverändert tracen, würde Flash natürlich auch eine positive sowie negative Zahl anzeigen. Durch die Math.abs()-Methode verändern wir allerdings temporär, nämlich nur für den Zeitpunkt der Ausgabe, das Vorzeichen der negativen Zahl und erhalten so ausschließlich positive Zahlen. Unter Berücksichtigung des Vorzeichens können wir ermitteln, welche der Zahlen größer bzw. kleiner ist. 3. Ergänzen Sie das Skript:  trace(„Kleinere Zahl: „+Math.min(nZahl1, nZahl2));  trace(„Größere Zahl: „+Math.max(nZahl1, nZahl2));

Ausgabe im Nachrichtenfenster: Kleinere Zahl: -10 Größere Zahl: 5 Negative Zahlen sind immer kleiner als positive Zahlen. Daher wird als kleinere Zahl –10 und als größere Zahl 5 ermittelt. Würden wir den Vergleich der Zahlen mit Hilfe von Math.abs() durchführen, dann würde sich das Verhältnis zwischen den Zahlen natürlich umkehren. 4. Ändern Sie die Zeilen bezüglich des Größenvergleichs (Fettdruck):  trace(„Kleinere Zahl: „+Math.min (Math.abs(nZahl1), Math.abs (nZahl2)));

 trace(„Größere Zahl: „+Math.max(Math. abs(nZahl1), Math.abs(nZahl2)));

Ausgabe im Nachrichtenfenster: Kleinere Zahl: 5 Größere Zahl: 10 Den Einsatz von Math.pow() haben wir bereits oben im Zusammenhang mit Rundungen kennen gelernt. Diese Methode berechnet nZahl1 hoch nZahl2, wobei nZahl1 dem ersten und nZahl2 dem zweiten übergebenen Parameter entspricht. 5. Ergänzen Sie das Skript:  trace(„2 hoch 8 ergibt “ + Math.pow(2, 8));

Ausgabe im Nachrichtenfenster: 2 hoch 8 ergibt 256

206

In unserer Berechnung wird die Zahl 2 sieben mal mit sich selbst multipliziert, was dem Wert 256 entspricht. Zahlreiche Methoden beziehen sich auf trigonometrische Berechnungen wie Winkel und Kreisposi-

Kapitel 15  Math-Klasse

tionen (Math.cos(), Math.asin(), Math.atan(), Math. atan2(), Math.sqrt(), Math.sin(), Math.tan()). Ausführlichere Informationen dazu finden Sie im Kapitel Trigonometrie.

Color-/ColorTransform-Klasse

Für optisch wahrnehmbare Objekte wie MovieClips und Grafiken stellt die Farbe eine zentrale Eigenschaft dar. Denn sie übt großen Einfluss darauf aus, was wir bei der Wahrnehmung empfinden, ja mitunter sogar, ob wir das betreffende Objekt überhaupt bemerken. Ein MovieClip beispielsweise in feurigem Signalrot ruft bei uns andere Empfindungen hervor als eine nüchterne kühl-blaue Einfärbung. ActionScript gibt uns glücklicherweise teilweise recht ausgefeilte Methoden zur Hand, um Farbeffekte zu erzielen bzw. Farben zu definieren. Interessanterweise versteht Flash Farbe nicht einfach als Eigenschaft von MovieClips oder Grafiken, so dass man am je spezifischen Objekt eine direkte Änderung vornehmen könnte. Statt dessen muss man zuerst eine vom grafischen Objekt unabhängige Klasse instanziieren und anschließend einen Bezug zu diesem Objekt herstellen. In Flash-Versionen bis einschließlich MX 2004 handelte es sich dabei um die Color-Klasse, auf die man ab Flash 8 zugunsten der ColorTransformKlasse verzichten sollte (was eigentlich schade ist, da die Color-Klasse wunderbar einfach zu handhaben war). Unabhängig davon, für welche Variante Sie sich entscheiden, bleibt die zugrundeliegende Funktionsweise der Einfärbung vergleichbar und entspricht dem, was Sie im Eigenschaftsfenster bei markiertem MovieClip unter der Option <Erweitert> <Einstellungen> festlegen können. Ausschließlich ab Flash 8 stehen Ihnen zusätzlich Filter wie der ColorMatrix-Filter zur Verfügung, die komplexe Farbeffekte à la Photoshop ermöglichen. Sie werden im Kapitel BitmapData- und Filter-Klasse angesprochen.

16

16.1 Klassenpakete und Instanziierung von Klassen Was Flash bereits mit der Version MX begonnen hat, wurde insbesondere in Flash 8 und 9 perfektioniert: Die Bereitstellung der benötigten Funktionalitäten durch Klassen, die oft in Packages bzw. Paketen zusammengefasst werden. Dabei handelt es sich um Ordner, in denen zumeist mehrere, von der Logik her zusammengehörige einzelne Klassen abgelegt werden. Sie befinden sich in einem dem Autorensystem bekannt gemachten Klassenpfad, so dass man leicht darauf zugreifen kann. Darüber hinaus existiert standardmäßig ein relativer Pfad, der von dem Speicherort der aktuellen Datei ausgeht. Weitere Pfade können eingetragen werden über Der Zugriff auf Klassen erfolgt auf verschiedene Arten:

• Sie geben im Code an der Stelle, an der eine Funk-

tion, Eigenschaft oder Methode verwendet wird, unmittelbar den gesamten Pfad an. Das mag die einfachste Variante sein, aber auf die Dauer wird der Code durch die ständigen Wiederholungen unübersichtlich und fehleranfällig, da man leicht Opfer von Schreibfehlern werden kann. Daher sollte man auf ein derartiges Vorgehen eher verzichten. • Zu Beginn des Frames, in dem die betreffende Funktionalität benötigt wird, importiert man die Klassen. Bei dieser Schreibweise muss der Klassenpfad Flash bekannt sein. Sollte er von der Standardeinstellung abweichen, muss er wie oben erwähnt, im Menü angepasst werden.

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

207

208

Kapitel 16  Color-/ColorTransform-Klasse

• Man verzichtet komplett auf eine Pfadangabe und ruft die Klasse direkt auf. Das setzt voraus, dass Klasse und fla-Datei im selben Ordner liegen.

Dies gilt natürlich nur für die Arbeit in der Autorenumgebung. Auf dem Zielrechner, der die von Ihnen erstellte swf-Datei abspielt, müssen die Klassen nicht mehr vorliegen, denn der benötigte Code wird unmittelbar in die resultierende swf exportiert.

16.2 Vollständiges Einfärben Die einfachste Farbänderung besteht darin, einem beliebigen Objekt unabhängig davon, wie viele verschiedene Farben ursprünglich vorlagen, eine einzige neue Farbe zuzuweisen. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects an beliebiger Stelle ein Rechteck (150 × 100, Linie 1, schwarz, Füllung 0099ff). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht1, Registrierungspunkt links oben). 4. Duplizieren Sie das Rechteck auf der Bühne. 5. Positionieren Sie das Duplikat so, dass es recht1 nicht überdeckt (Instanzname recht2). 6. Weisen Sie actions folgendes Bildskript zu: //------------- import –------------ import flash.geom.*;

//–––---------- vars –--------------  var ctColor:ColorTransform = new ColorTransform(); var trMC:Transform;

//---------- functions –------------ function init():Void {

 trMC = new Transform(recht1);  ctColor.rgb = 0xffaa00;

 trMC.colorTransform = ctColor; }

//–---------- aufruf –-------------- init();

Beim Testen wird sich Ihr blaues Rechteck in ein orangenes verwandeln. Achten Sie auf die Art der Farbzuweisung: Das eingefärbte Objekt besteht nun

Abbildung 41:  Einfärben eines MovieClips

aus einer einzigen Farbe, die sowohl Füllung wie auch Randlinien umfasst, während das zum Vergleich nicht eingefärbte Objekt zwei verschiedene Farben anzeigt. Da die ColorTransform- und die TransformKlasse zum geom-Package gehören, müssen wir es zuerst importieren. Anschließend richten wir jeweils eine Variable für eine Instanz dieser Klassen ein. Allgemein werden über die Transform-Klasse Daten gesammelt, die sich auf Farb- sowie Koordinatenänderungen eines MovieClips beziehen. Vor einer Verwendung muss sie mit einem konkreten MovieClip verknüpft werden. Die ColorTransform-Klasse dagegen erlaubt die Manipulation der drei Farbkanäle für Rot, Grün und Blau sowie einen Alphakanal. In der init()-Funktion instanziieren wir die Transform-Klasse und übergeben als Argument den Instanznamen desjenigen MovieClips, den wir einfärben wollen, hier also recht1. Damit speichern wir in der Variablen trMC faktisch die Farbeigenschaften, auf die wir zugreifen würden, wenn wir wie oben erwähnt die erweiterten Farboptionen für unseren MovieClip aufrufen könnten. Um sie zu ändern, müssen wir auf das zuvor instanziierte ColorTransform-Objekt zugreifen, da eine direkte Manipulation der transformEigenschaft eines MovieClips nicht möglich ist. Eine beliebige Farbe lässt sich definieren, wenn wir auf die entsprechende rgb-Eigenschaft der ColorTransform-Instanz zugreifen und ihr einen Wert zuweisen. In unserem konkreten Fall wählen wir besagten Orange-Ton, dessen Hexadezimalwert 0xffaa00 entspricht. Flash erwartet an dieser Stelle ein Wert vom Datentyp Number, der als eher schwer lesbare Ganzzahl oder in Hexadezimalform übergeben werden kann. In letztgenanntem Fall verweist das Präfix „0x“ auf das verwendete Zahlensystem, während jedes nachfolgende Zeichenpaar einem Wert für einen der Farbkanäle in der Reihenfolge Rot, Grün und Blau entspricht. Jedes Zeichenpaar umfasst Werte von 0 (in der Form „00“) bis 255 (in der Form „ff“). Das lässt sich einfach überprüfen, indem Sie nach dem Aufruf von init() testweise einfügen:

16.3  Einfärben mit Hilfe einzelner Farbkanäle

209

trace(0 × 00); trace(0xff);

Ausgabe im Nachrichtenfenster: 0 255 Am Präfix erkennt Flash, dass es sich um Hexadezimalwerte handelt und wandelt sie entsprechend um. Lassen Sie das Präfix weg, gibt Flash im ersten Fall ebenfalls 0 aus (es kann sich bei dem in der Klammer übergebenen Argument aus Sicht von AS um keinen Variablennamen handeln, da diese nicht mit einer Zahl beginnen dürfen; daher geht AS einfach von einer Number aus). Im zweiten Fall erfolgt ein undefined, da Flash nach einer Variablen mit dem Namen ff sucht. Nach diesem Test können Sie die beiden trace()-Befehle wieder löschen, da sie nicht weiter benötigt werden. Damit die Farbänderung wirksam wird, müssen wir das ctColor-Objekt mit dem neuen rgb-Wert der colorTransform–Eigenschaft des trMC–Objekts zuweisen. Erst in diesem letzten Schritt erfolgt das konkrete Einfärben, da ja nur unsere Transform– Instanz einen Bezug zum zu verändernden MovieClip enthält. Abschließend erfolgt der Aufruf der init()Funktion, so dass die definierte Änderung auch wirksam werden kann. Wollen wir die Farbwerte eines Objekts auf ein anderes übertragen, können wir einfach die über die colorTransform-Eigenschaft eines MovieClips erfassten Werte verwenden. 7. Ergänzen init():

Sie

die

Funktionsdeklaration

von

recht1.onPress = function() {

 gleicheFarbe(this, recht2);

Wenn Sie beim Testen auf recht1 klicken, erhält recht2 die gleiche Farbe zugewiesen. Wir definieren für den ersten MovieClip ein onPress-Ereignis, das die Funktion gleicheFarbe() aufruft und ihr die Argumente this, also die angeklickte Instanz, sowie recht2, das zu färbende Objekt, übergibt. In der Funktion gleicheFarbe() richten wir eine neue ColorTransform–Instanz ein, um die betreffenden Farbeigenschaften aus recht1 zu kopieren. Wir hätten in diesem speziellen Beispiel zwar auch ctColor verwenden können, da dort die einzige Farbänderung definiert wurde, die wir durchgeführt haben. In einer realen Anwendung wäre es jedoch durchaus möglich, dass wir bei recht1 über weitere Operationen Farbeigenschaften ändern, die eben nicht in dieser einen Instanz der ctColor-Klasse erfasst sind. Daher bietet es sich an, auf die colorTransform–Eigenschaft von recht1 zuzugreifen. In trMC erzeugen wir eine neue Transform-Instanz mit einem Bezug auf das zu färbende Objekt, d. h. recht2. Abschließend übertragen wir auf diese Instanz die zuvor gespeicherten Farbeigenschaften.

16.3 Einfärben mit Hilfe einzelner Farbkanäle Zugegebenermaßen erweist es sich als spannender, wenn man gezielt einzelne Farbkanäle ansprechen und nach Belieben ändern kann. Damit verfügt man über erheblich mehr Optionen als bei einer simplen Einfärbung, wie wir sie eben realisiert haben. Die zulässigen Änderungen entsprechen, wie erwähnt, der erweiterten Farb-Option im Einstellungsfenster, die Abbildung 42 zeigt.

};

8. Fügen Sie im Funktions-Block folgende Deklaration ein:  function gleicheFarbe(pOrig:MovieClip, pZiel:MovieClip):Void {

var  ctAngeklickt:ColorTransform = pOrig.transform.colorTransform;  trMC = new Transform(pZiel);

 trMC.colorTransform = ctAngeklickt; }

Abbildung  42:  Erweiterte Farboptionen einer MovieClipInstanz

210

Kapitel 16  Color-/ColorTransform-Klasse

Jede Instanz der ColorTransform–Klasse verfügt dementsprechend über folgende Eigenschaften:

Die Grafik ändert sich nicht, da wir von einem nicht vorhandenen Farbton dieselbe Farbe subtrahieren.

ctInstanz.redMultiplier (Werte -1 bis 1)

12. Ändern Sie den Anteil von Grün, indem Sie den ersten Slider in der zweiten Reihe bis auf 0 % ziehen.

ctInstanz.redOffset (Werte -255 bis 255) ctInstanz.greenMultiplier ctInstanz. greenOffset

ctInstanz.blueMultiplier ctInstanz. blueOffset

ctInstanz.alphaMultiplier ctInstanz. alphaOffset

Bezogen auf die vorherige Abbildung bezeichnet die Eigenschaft redMultiplier den erstgenannten Wert, der mit 100 % angezeigt wird, und redOffset den zweitgenannten Wert mit der Zahl 0. Die erste Spalte in der Abbildung bzw. die Eigenschaften redMultiplier, greenMultiplier, blueMultiplier sowie alphaMultiplier beziehen sich auf den Anteil der aktuellen Farbe und des gesamten Alphawerts in der vorliegenden Grafik. Diese Werte betragen, wenn wir keinen Einfluss auf die Farbeigenschaften nehmen, immer 100 %. Nehmen wir als Beispiel unser hübsches blaues recht2, bevor wir auf recht1 geklickt haben. Der Hexadezimalwert für das Rechteck lautet 0 × 0099 ff. Das bedeutet, dass der Anteil des Rotkanals 0 beträgt, denn es ist kein Rot in der Farbe enthalten. Dieser Wert wird als Ausgangswert für redMultiplier genommen, entspricht also dort 100 %. Alle Änderungen des Rotkanals werden in Bezug zu diesem Ausgangswert gesetzt. Der Grünkanal kommt dezimal auf 153 bzw. als Hexadezimalwert auf 99. Auch dieser Wert wird als 100 % genommen. Ähnlich verfährt der Blaukanal, der bei dezimal 255 und hexadezimal ff ebenfalls über 100 % des aktuellen Farbanteils verfügt. Um die Farbkanäle zu ändern, können wir diesen spezifischen Farbanteil reduzieren. Das macht beim ersten Kanal mit der Farbe Rot naturgemäß wenig Sinn, denn dort entsprechen unsere 100 % eben einem Rotwert von 0. 9. Markieren Sie auf der Bühne recht2. 10. Öffnen Sie im Eigenschaftsfenster die Option <Erweitert><Einstellungen>. 11. Ziehen Sie den Slider für den Rot-Ton (erste Option in der ersten Reihe) ganz nach unten, so dass im Eingabefeld -100 % angezeigt werden.

Die Grafik färbt sich sukzessive stärker blau ein, weil der zuvor vorhandene Grünanteil reduziert wird, bis er vollständig entfällt. 13. Ändern Sie den Anteil von Blau, indem Sie den ersten Slider in der dritten Reihe bis auf 0 % ziehen. Übrig bleibt ein schwarzes Rechteck, da wir alle Farb­ informationen verworfen haben. 14. Klicken Sie auf , um keine der Änderungen zu übernehmen. Wie können wir nun den Anteil einer Farbe erhöhen, die wie Rot in unserem Fall überhaupt nicht vorkommt? Dazu bedienen wir uns der Eigenschaften redOffset, greenOffset, blueOffset und alphaOffset. 15. Markieren Sie auf der Bühne recht2. 16. Öffnen Sie im Eigenschaftsfenster die Option <Erweitert><Einstellungen>. 17. Ziehen Sie den Slider für den Rot-Offset (zweite Option in der ersten Reihe) ganz nach oben, so dass im Eingabefeld 255 angezeigt wird. Die Füllfarbe erhält eine rötliche Einfärbung, der ursprünglich schwarze Rahmen erstrahlt vollständig in Rot. Mit diesem Slider addieren wir zur bestehenden Farbe einen Wert zwischen 0 (logischerweise kein Effekt) bis 255. Diese Werte ergeben sich aus den möglichen Werten, die über einen einzelnen Farbkanal definiert werden können. Bei einem 8bit-Wert ergeben sich somit 256 verschiedene Werte, die von 0 bis 255 reichen. Da wir den größtmöglichen Wert für den Rotkanal addieren, ergibt sich als neue Füllfarbe 0xff99ff anstatt 0 × 0099 ff. Das können Sie mit Hilfe der Werkzeugpalette kontrollieren. 18. Bestätigen Sie die Änderung mit . 19. Aktivieren Sie den Farbchip für das Fülleimerwerkzeug 20. Klicken Sie auf die Füllung von recht2. Sie erhalten in der dann angezeigten Farbpalette exakt den eben angegebenen Farbwert.

16.3  Einfärben mit Hilfe einzelner Farbkanäle

21. Ändern Sie den Wert für den Rot-Offset per Slider auf –255. Die Grafik sieht nun wieder genauso aus wie zuvor, als der betreffende Offset 0 betrug. Sie können den gewünschten Wert natürlich auch numerisch eingeben, müssen dann aber per <Enter> bestätigen, während die Bedienung des Sliders jede Änderung bei geöffnetem Optionsfenster sofort anzeigt. Da wir nur 256 verschiedene Werte zuweisen können und schon bei 0 alle roten Farbtöne gegenüber der nicht veränderten Grafik vollständig entfernt sind, sieht recht2 genau so aus wie zu Beginn der Übung. 22. Setzen Sie den Wert für den Rot-Offset per Slider zurück auf 0. 23. Ziehen Sie den Slider für den Grün-Offset (zweite Option in der zweiten Reihe) nach unten, so dass im Eingabefeld -153 angezeigt wird. 24. Bestätigen Sie die Änderung mit . 25. Aktivieren Sie den Farbchip für das Fülleimerwerkzeug 26. Klicken Sie auf die Füllung von recht2. Erwartungsgemäß färbt sich unser Rechteck dunkelblau ein. Denn wir haben den vollständigen GrünAnteil, der dezimal 153 und Hexadezimal 99 betrug, vollständig herausgenommen. Wird der Grün-Offset dagegen auf einen Wert größer –153 reduziert, bleibt ein gewisser, aber nicht notwendigerweise sichtbarer Grünanteil erhalten. Wenn Sie z. B. –152 wählen, entsteht der Farbton 0 × 0001ff, der uns jedoch völlig blau erscheint. Wird ein Wert jenseits von 255 bzw. –255 gewählt, setzt ihn Flash automatisch auf den zulässigen höchsten bzw. niedrigsten Wert zurück. Das ist eine vereinfachte Erklärung, denn hinter dem ganzen Prozess steht eine Formel, die sich in der Flash-Hilfe zur ColorTransform-Klasse findet. Mit welcher Variante Sie konkret arbeiten (farbeMultiplier oder farbeOffset) hängt also wesentlich von der Ausgangsgrafik ab. 27. Setzen Sie alle Änderungen zurück, d. h., alle Werte für farbeMultiplier müssen 100 % und alle Werte für farbeOffset müssen 0 betragen. 28. Bestätigen Sie mit .

211

Genau diese Optionen stehen uns per Skripting mit Hilfe der oben bereits genannten Eigenschaften zur Verfügung. 29. Fügen Sie im Funktions-Block folgende Deklaration ein:

unction einfaerben(pZiel:MovieClip, f pWas:String, pWert:Number):Void{



 ctColor = new ColorTransform();



 ctColor[pWas] = pWert;



 trMC = new Transform(pZiel);

 trMC.colorTransform = ctColor; }

30. Fügen Sie nach dem Aufruf von init() folgenden weiteren Aufruf ein:

einfaerben(recht2,„redOffset“,255);

Als Ergebnis erhalten Sie ein rötlich eingefärbtes recht2, wie wir es händisch in Schritt 17 realisiert haben. Wir deklarieren eine parametrisierbare Funktion einfaerben(), die für die gewünschte Farbtransformation sorgen soll. Als Parameter verwendet sie den MovieClip, auf den die Transformation angewendet werden soll, die anzusprechende Eigenschaft sowie den ihr zuzuweisenden Wert. Wir richten wiederum ein neues ColorTransform– sowie ein neues Transform-Objekt ein, das mit dem Ziel-MovieClip verknüpft wird. Da Flash Objekteigenschaften in einem Hash verwaltet, können wir auf sie zugreifen, indem wir ihren Namen als String verwenden. Beim Aufruf von einfaerben() übergeben wir im konkreten Fall an den redOffset von recht2 den höchstmöglichen Wert von 255. Die Möglichkeit, ganz gezielt einen bestimmten Farbkanal zu beeinflussen, vereinfacht enorm das Erstellen diverser Effekte wie z. B. Farbübergänge zwischen Bildern innerhalb einer Animation oder beim Weiterschalten von einem Bild zum nächsten innerhalb einer Bildergalerie. Ebenso einfach lassen sich Slider realisieren, die ein stufenloses Einfärben eines Produktes simulieren können. Im Workshop zu Grafik­effekten finden Sie ein Beispiel, wie sich die Farbe einer Grafik beliebig einstellen lässt.

Maus und Tastatur

Als klassische Eingabegeräte für digitale Anwendungen gelten Tastatur und Maus. Flash bietet einfachen Zugriff auf beide, um User-Interaktionen definieren zu können. Eigenschaften, Methoden und Ereignisse für Tastatur und Maus werden in gewohnter Weise in jeweils einer eigenen Klasse definiert. Diese lässt sich im Gegensatz etwa zum MovieClip nicht instanziieren, sondern steht global zur Verfügung. Das ist auch sinnvoll, denn es existiert beispielsweise nur exakt eine Maus bzw. ein Cursor. Eine Instanz davon zu erstellen würde bedeuten, dass man über beliebig viele Kopien verfügen kann – was für jeden User eine echte Herausforderung darstellen würde. Gleiches gilt für die Tastatur, die von der Hardware vorgegeben ist, so dass beliebige Kopien nicht unbedingt sinnvoll wären. Tastaturabfragen spielen immer dann eine Rolle, wenn Informationen vom Anwender benötigt werden. Dazu gehören, um nur einige wenige Beispiele zu nennen, Passwortabfragen, persönliche Auskünfte wie Name und Adresse etc. Auch im Entertainment sind sie wichtig, etwa um Spiele-Objekte steuern zu können. Anmerkungen zur Bedeutung der Maussteuerung dürften sich wohl erübrigen, schließlich lässt sich jede Anwendung per Maus steuern, ist also Standard. In nahezu jedem hier verwendeten Skript, in dem der User eine Interaktion auslösen kann, kommt sie zum Einsatz. Hervorzuheben sind allenfalls spezielle Effekte, die von Mausaktionen abhängen und in den Workshops zu Effekten vorgestellt werden.

17.1 Die Mouse-Klasse Über diese Klasse lässt sich generell der Cursor Ihrer Flash-Anwendung steuern. Sie umfasst jedoch nicht

17

alle Eigenschaften, Methoden und Ereignisse, die mit dem Cursor verbunden sind, denn insbesondere die MovieClip-Klasse verfügt über entsprechende Sprachelemente wie _xmouse, onPress etc. Statt dessen bietet sie:

• Methoden, um in Zusammenarbeit mit MovieClips eigene Cursor verwenden zu können; um Mausereignisse wahrnehmen zu können.

• Methoden,

17.1.1 Eigene Cursor Zweifelsohne am interessantesten ist natürlich die Möglichkeit, eigene Cursor zu verwenden. Damit kann man dem User auf eine recht dezente und dennoch unübersehbare Weise zusätzliche Hinweise darauf geben, wie er momentan mit Ihrer Applikation interagieren kann. Das ist mittlerweile Standard in allen Anwendungen – man denke beispielsweise nur an den sich verändernden Cursor in Flash, je nachdem, über welchem Objekt er sich gerade befindet. Leider fehlt in Flash eine etwa Director vergleichbare Möglichkeit, unmittelbar den Systemcursor auszutauschen. Statt dessen muss man MovieClips als Hilfsmittel einsetzen, um den gleichen Effekt zu erzielen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects einen Kreis (50 × 50). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKugel, Instanzname kugel1). 4. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcCursor). 5. Zeichnen Sie dort einen beliebigen Cursor (16 × 16, Registrierungspunkt mittig). 6. Kehren Sie zur Hauptzeitleiste zurück.

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

213

214

Kapitel 17  Maus und Tastatur

7. Fügen Sie in actions folgendes Bildskript ein: //------------ vars ----------------– var mCursor:MovieClip;

var nCursorTiefe:Number = 1000;

//---------- functions ------------- function init():Void {

 mCursor = this.createEmptyMovieClip („behCursor“, nCursorTiefe);  kugel1.onRollOver = cursorEin;  kugel1.onRollOut = cursorAus; }

function cursorEin():Void {

 mCursor.attachMovie(„mcCursor“, „cursor“, 1);  mCursor._x = _xmouse;  mCursor._y = _ymouse;  mCursor.startDrag();  Mouse.hide(); }

function cursorAus():Void {  mCursor.stopDrag();

 mCursor.unloadMovie();  Mouse.show(); }

//----------–– start --------------- init();

Wie in Abbildung 43 zu sehen, wird der Mauscursor optisch durch unsere Grafik ersetzt, sobald er sich über der Kugel befindet. Wir legen eine Variable zur Referenzierung der eingefügten Cursorgrafik an und speichern einen Wert für ihre Tiefe. Dabei sollte man natürlich einen möglichst hohen Wert wählen, um zu gewährleisten, dass unser Cursor auch auf jeden Fall über allen anderen Objekten liegt. In init() erzeugen wir einen Behälter für den Cursor und weisen der Kugel zwei Ereignisse zu, bei deren Eintreten jeweils eine Funktion aufgerufen wird. Die Funktion cursorEin() fügt die vorbereitete Grafik aus der Bibliothek auf der Bühne ein und positioniert sie an der Stelle der Maus – schließlich soll sie diese ja ersetzen. Damit sie permanent an die Mausposition gebunden ist, rufen wir die startDrag()Methode auf. Damit kann man, wie im Kapitel MovieClip gesehen, beliebige Objekte ziehen. Anschließend

Abbildung 43:  Eigener Mauszeiger in Aktion

wird die Maus mit Hilfe der Methode hide() einfach ausgeblendet. Damit entsteht der Eindruck, wir hätten den normalen Mauszeiger durch einen eigenen ersetzt. Faktisch existiert der normale Zeiger nach wie vor, er ist jedoch nicht mehr sichtbar. In der Funktion cursorAus() machen wir die Änderungen wieder rückgängig, indem das stopDrag() aufgerufen, unsere Grafik gelöscht und der Mauszeiger wieder eingeblendet wird. Alternativ kann man den Behälter für den Cursor bei jedem onRollOver-Ereignis neu erstellen und bei einem onRollOut-Ereignis wieder löschen. Faktisch macht diese Vorgehensweise jedoch keinen Unterschied zu der von uns gewählten Art. In rein optischer Hinsicht ist ein stopDrag() zwar nicht notwendig, da nach dem Löschen der Grafik ohnehin nichts mehr zu erkennen wäre, aber Flash würde dann zu überflüssigen Prozessen gezwungen, d.h. ein Ziehverhalten für ein nicht existierendes Objekt ausführen. In einem Fall hat unser Skript einen enormen Nachteil: Wenn das Objekt, über dem der geänderte Mauszeiger dargestellt wird, ebenfalls per Drag and Drop verschoben werden soll, benimmt sich der Cursor unbotmäßig. 8. Fügen Sie in der Deklaration von init() unmittelbar vor der schließenden Klammer ein: kugel1.onPress = kugel1.startDrag;

 kugel1.onRelease = kugel1.onReleaseOutside = kugel1.stopDrag;

Wenn Sie bei geändertem Mauszeiger auf die Kugel klicken und mit gedrückter Maustaste ziehen, bleibt Ihr Cursor an Ort und Stelle stehen. Außerdem reagiert das stopDrag() von kugel1 nicht mehr korrekt. Leider lässt Flash zu einem beliebigen Zeitpunkt jeweils nur ein startDrag() zu. Da wir jeweils eines für den Cursor und für die Kugel einrichten, wird nur das zuletzt aufgerufene startDrag() halbwegs korrekt ausgeführt. Wir benötigen also eine andere Möglichkeit, um die gleichzeitige Bewegung mehrerer Objekte realisieren zu können.

17.1  Die Mouse-Klasse

215

9. Ersetzen Sie in der Deklaration von cursorEin() den Aufruf von mCursor.startDrag(); durch:

15. Erweitern Sie die Deklaration von mausbewegung() unmittelbar vor der schließenden Klammer um:





mCursor.onMouseMove = mausbewegung;

10. Fügen Sie folgende Deklaration in den FunktionsBlock ein:

function mausbewegung():Void{

 this._x = _xmouse;  this._y = _ymouse;

}

Nun funktioniert das Ziehverhalten wie gewünscht. Wir weisen unserem Cursor ein onMouseMove-Ereignis zu, so dass bei jeder Mausbewegung die Funktion mausbewegung() ausgeführt wird. Sie macht nichts weiter als die Position der Grafik jeweils auf die aktuelle Mausposition zu setzen. Damit ersetzen wir faktisch die zwar einfachere, aber nicht immer verwendbare startDrag()-Methode. Solange die Objekte mit einem veränderten Cursor relativ klein sind, reicht das erzielte Ergebnis. 11. Importieren Sie eine Grafik in die Bibliothek. Wir verwenden beispielhaft affe0.jpg aus dem Workshop Bildergalerie. 12. Fügen Sie die Grafik auf der Ebene objects unterhalb des Kreises ein. 13. Wandeln Sie sie in einen MovieClip um (Bibliotheksname mcBild, Instanzname bild, Registrierungspunkt beliebig). 14. Ändern Sie in der Deklaration von init() die Zuweisung der ersten beiden Ereignisse (Fettdruck):

bild.onRollOver = cursorEin; bild.onRollOut = cursorAus;

Bei einem Rollover über die importierte Grafik ändert sich der Cursor. Sie werden dabei feststellen, dass dessen Bewegung etwas stockend ausfällt, insbesondere, wenn Sie die Maus relativ schnell bewegen. Das liegt daran, das Flash den Screen entsprechend der Bildwiederholrate neu zeichnet, das onMouseMove aber unabhängig davon Mausbewegungen wahrnimmt. Sie können den Effekt testweise vergrößern, indem Sie die Bildwiederholrate im Eigenschaftsfenster auf einen sehr niedrigen Wert setzen. Ihr bemitleidenswerter Cursor schrubbt dann geradezu über den Screen.

updateAfterEvent();

Die Cursorbewegung erfolgt nun erheblich flüssiger, da Flash angewiesen wird, unmittelbar nach einer Positionsänderung der Maus und damit der von uns verwendeten Cursorgrafik den kompletten Screen neu zu zeichnen. Falls mehr als ein Objekt einen veränderten Cursor erhalten soll, können Sie diese Elemente in einem Array erfassen und in der init()-Funktion das gewünschte Verhalten zuweisen. Beachten Sie, dass ein Einfügecursor bei Textfeldern durch die Methode hide() nicht ausgeschaltet wird. Unser Cursor kommt zugegebenermaßen recht bescheiden daher. Da wir jedoch mit MovieClips arbeiten, besteht die Möglichkeit beliebiger Cursoränderungen bis hin zu animierten Mauszeigern. Beachten Sie, dass sich die erzielte Änderung ausschließlich auf Ihren Flash-Film erstreckt. Ist er z.B. in eine HTMLSeite eingebettet, so zeigt sich auf den nicht von Flash überdeckten Elementen lediglich der Standardcursor.

17.1.2 Mausereignisse Im Zusammenhang mit der MovieClip-Klasse haben Sie einige Mausereignisse kennen gelernt. Sie wurden verwendet, indem wir sie einfach einem MovieClip zugeordnet haben. Sie lassen sich alternativ mit Hilfe von Listener einrichten, was u.a. dann Sinn macht, wenn wir derartige Ereignisse abfragen müssen, ohne dass sie mit MovieClips verknüpft sind. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //------------ vars ––--------------  var oMouseListener:Object = new Object();

//–------------ vars ---------------– function init():Void {

 oMouseListener.onMouseDown = geklickt;

 Mouse.addListener(oMouseListener); }

function geklickt():Void{

216

 trace(„Autsch, nicht so fest!“); }

//–––––------- vars ---------------- init();

Wenn Sie an beliebiger Stelle klicken, meldet sich ein empörtes Nachrichtenfenster und beschwert sich über zu festes Klicken. Wir richten einen Listener ein, bei dem es sich schlicht um ein Objekt handelt, dessen Aufgabe darin bestehen soll, auf bestimmte Mausereignisse zu lauschen. Um welche es sich konkret handelt, teilen wir in der init()-Funktion mit, wo der Listener ein onMouseDown-Ereignis erhält. Tritt es auf, soll die Funktion geklickt() ausgeführt werden. Die Verknüpfung mit der Maus erfolgt über die addListener()-Methode. Dadurch wird er aktiviert. Fehlt die Verknüpfung, kann die Mouse-Klasse das onMouseDown-Ereignis nicht mit einer Funktion verbinden und es erfolgt keine Reaktion auf Klicks. Zu bedenken ist, dass mit onMouseDown jeder Mausklick gemeint ist, unabhängig davon, wo er innerhalb der Flash-Anwendung erfolgt. 3. Erstellen Sie auf objects einen Kreis (50 × 50). 4. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKugel, Instanzname kugel1). 5. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer um: kugel1.onPress = kugel1.startDrag;

Beim Testen wird auch der Klick auf die Kugel zu einer entsprechenden Reaktion des Nachrichtenfensters führen. Um über das onMouseDown keine weiteren Aktionen mehr auszuführen, kann man die Verknüpfung der Maus-Klasse mit dem Listener aufheben. 6. Ändern Sie in der Deklaration von init() das onPress-Ereignis (Fettdruck): kugel1.onPress = function(){  Mouse.removeListener (oMouseListener); }

Nach dem Klick auf die Kugel taucht keine weitere Ausgabe im Nachrichtenfenster mehr auf. Das Löschen einer Verknüpfung zwischen einem Listener und einem Objekt, dem wir ihn zugewiesen haben, erfolgt einfach über die Methode removeList­ ener(), wobei natürlich der Name des Listeners als

Kapitel 17  Maus und Tastatur

Argument zu übergeben ist. In unserem Fall reagiert die Maus danach nicht mehr auf ein onMouseDown. Damit wird jedoch nicht der Listener selbst gelöscht, denn das zuvor eingerichtete Objekt oMouseListener bleibt erhalten. Auf diese Weise lässt sich auch zu einem späteren Zeitpunkt der Listener einfach wieder zuweisen, falls benötigt. Bedenken Sie, dass eine der startDrag()-Methode vergleichbare Kurzform hier nicht möglich ist, da wir der removeListener()Methode ein Argument übergeben müssen. Falsch wäre also: kugel1.onPress = Mouse. removeListener(oMouseListener);

Aufgrund des Klammer-Operators am Ende von removeListener würde Flash die Anweisung korrekterweise als direkten Aufruf interpretieren und die Verknüpfung zum Listener sofort löschen. Die Verknüpfung lässt sich problemlos wieder herstellen. 7. Fügen Sie rechts neben kugel1 eine weitere Kugel ein. 8. Weisen Sie dem Duplikat den Instanznamen kugel2 zu. 9. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer: kugel2.onPress = function(){

 Mouse.addListener(oMouseListener); }

Wird die Verknüpfung zwischen Maus-Klasse und Listener durch Klick auf die erste Kugel gelöscht, stellt der Klick auf die zweite Kugel sie wieder her. 10. Erweitern Sie in der Deklaration von init() das onPress-Ereignis von kugel1 unmittelbar vor dessen schließender Klammer:

delete oMouseListener;

Der Klick auf kugel löscht nun unwiderruflich das Listener-Objekt selbst, so dass die erneute Zuweisung nach Klick auf kugel2 folgenlos bleibt. Testweise können Sie sich im onPress-Ereignis von kugel2 oMouseListener ausgeben lassen. Dabei erhalten Sie ein trauriges undefined im Nachrichtenfenster. Was wir uns am Beispiel von onMouseDown angeschaut haben, funktioniert natürlich auch mit den übrigen Mausereignissen wie onMouseUp, onMouseMove und onMouseWheel.

17.1  Die Mouse-Klasse

Das Verwenden eines eigenen Cursors kann ebenfalls über einen Listener hergestellt werden. Legen wir das obige Beispiel zugrunde, sieht der Code so aus (Änderungen fett): //------------- vars -----------------var mCursor:MovieClip;

var nCursorTiefe:Number = 1000;

var oMouseListener:Object = new Object();

//––--------- functions --------------function init():Void {

 oMouseListener.onMouseMove = mausbewegung;  mCursor = this.createEmptyMovieClip („behCursor“, nCursorTiefe);  bild.onRollOver = cursorEin;  bild.onRollOut = cursorAus;

 kugel1.onPress = kugel1.startDrag;  kugel1.onRelease = kugel1. onReleaseOutside=kugel1.stopDrag; }

function cursorEin():Void {

 mCursor.attachMovie(„mcCursor“, „cursor“, 1);  mCursor._x = _xmouse;  mCursor._y = _ymouse;

Mouse.addListener(oMouseListener);  Mouse.hide(); }

function cursorAus():Void {

Mouse.removeListener(oMouseListener);  mCursor.unloadMovie();  Mouse.show(); }

function mausbewegung():Void { mCursor._x = _xmouse; mCursor._y = _ymouse;  updateAfterEvent(); }

//------------ start -----------------init();

Prinzipiell funktioniert es genauso einfach wie zuvor. Allerdings hat der Listener leider den Nachteil, kein

217

updateAfterEvent() wahrnehmen zu können, so

dass unser Cursor etwas müde vor sich hin ruckelt, falls nicht die Bildwiederholrate des Films erhöht wird. Notgedrungen nur für Windows-Systeme interessant ist die Möglichkeit, das Mausrad anzusprechen. Wir wollen uns dazu ein vereinfachtes Beispiel anschauen, bei dem eine Grafik skaliert wird. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie eine Grafik in die Bibliothek. Wir verwenden beispielhaft affe0.jpg aus dem Workshop Bildergalerie. 3. Fügen Sie die Grafik auf der Ebene objects etwa in Screenmitte ein. 4. Wandeln Sie sie in einen MovieClip um (Bibliotheksname mcBild, Instanzname bild, Registrierungspunkt beliebig). 5. Weisen Sie actions folgendes Bildskript zu: //----------- vars -----------------  var oMouseListener:Object = new Object(); var bSkalieren:Boolean = false;

//---------- functions ------------- function init():Void {

 oMouseListener.onMouseWheel = function(nDelta:Number){  skalieren(nDelta); };

 bild.onPress = skalEinAus; }

function skalEinAus():Void {  bSkalieren = !bSkalieren;  if (bSkalieren) {

 Mouse.addListener (oMouseListener); } else {

 Mouse.removeListener (oMouseListener); } }

function skalieren(nDelta):Void {  bild._yscale = bild._xscale += nDelta; }

//––--------- start ---------------- init();

218

Nach einem Klick auf die Grafik können Sie per Mausrad skalieren, ein weiterer Klick deaktiviert das Mausrad wieder. Wir legen ein neues Objekt zwecks Referenzierung des Listeners an und speichern in einer Variablen den Wert false. Damit definieren wir die Anfangsbedingung für den Skaliervorgang. In init() definieren wir die Mausrad-Funktionalität: Bei Bewegen des Rades soll eine Funktion skalieren() mit dem Argument nDelta aufgerufen werden. Bei nDelta handelt es sich um die Anzahl an Zeilen, die pro Drehung weiter gescrollt werden soll. Bewegen wir das Rad nach rückwärts, erhalten wir negative, bei vorwärts positive Werte. Standardmäßig entspricht nDelta dem Wert 3, den Sie nach Belieben anpassen können. Die entsprechende Einstellung wird im jeweiligen Betriebssystem vorgenommen. Das Bild erhält einen Mausklick, der die Boolsche Variable bSkalieren jeweils auf den Gegenwert setzt. Beträgt sie anfangs false, setzt der erste Klick sie auf true, der nächste wieder auf false etc. Die if-Bedingung kontrolliert ihren Wert und weist dann, wenn sie true enthält, der Maus den zuvor eingerichteten Listener zu, andernfalls entfernen wir den Listener wieder. Die Funktion skalieren() erhöht die horizontale und vertikale Skalierung der Grafik um den in nDelta übergebenen Wert. Ist er positiv, vergrößern wir das Bild, andernfalls wird es verkleinert. In unserem konkreten Beispiel funktioniert nach dem Aktivieren das Skalieren auch dann, wenn sich die Maus nicht (mehr) über der Grafik befindet.

17.2 Tastatur Während sich die Maus auf grafische Interaktionen konzentriert, erfolgen Texteingaben i.d.R. über die Tastatur. Mit Hilfe der Key-Klasse können wir dabei gezielt die gedrückte Taste auslesen und dementsprechend reagieren. Jeder Taste wird intern ein Code zugeordnet, auf den wir zugreifen können. Das ist ein gängiges Verfahren, und Ihnen sind sicher diverse Codetabellen bekannt (beispielsweise ASCII oder Unicode). Sie können in Flash sowohl auf den ASCIIwie den internen Code für Tasten zugreifen. 1. Erstellen Sie eine Standarddatei.

Kapitel 17  Maus und Tastatur

2. Fügen Sie auf objects etwa in Bühnenmitte ein dynamisches Textfeld ein (12, Verdana, Bold, In­ stanzname tiKeyCode). 3. Weisen Sie actions folgendes Bildskript zu: //------------- vars ---------------  var oKeyListener:Object = new Object();

//----------- functions ------------ function init():Void {

 tiKeyCode.multiline = true;

 tiKeyCode.autoSize = „left“;  oKeyListener.onKeyDown = function():Void {

 tiKeyCode.text = „Intern: „+Key. getCode()+“\nASCII: „+Key.get­ Ascii(); };

 Key.addListener(oKeyListener); }

//------------ start --------------- init();

Wenn Sie testen, erhalten Sie beim Drücken einer beliebigen Taste den zugehörigen Code angezeigt. Wie im Fall der Maus richten wir zunächst ein Objekt ein, das als Listener fungieren soll. In der init()-Funktion aktivieren wir den Zeilenumbruch des Textfelds und dessen linksbündige Ausrichtung, wobei sich seine Größe an den Inhalt anpassen soll. Anschließend weisen wir dem Listener das onKeyDown-Ereignis zu und verknüpfen die Key-Klasse mit diesem Listener, so dass auf das Ereignis reagiert werden kann. Wird eine Taste gedrückt, schreibt Flash sowohl ihren internen wie ihren ASCII-Code in das zuvor angelegte Textfeld. Abhängig vom konkreten Ergebnis kann man eine bestimmte Aktion ausführen. 4. Erweitern Sie in der Deklaration von init() das onKeyDown-Ereignis unmittelbar vor der schließenden Klammer: if(Key.getCode()==65){

 Key.removeListener(oKeyListener); }

Wird die Taste gedrückt, erhalten Sie noch die zugehörige Code-Ausgabe, anschließend erfolgt jedoch keine weitere Rückmeldung über die betätigte Taste.

17.2  Tastatur

219

Wir löschen den Bezug auf den Listener einfach dann, wenn der zurück gegebene Code dem Wert 65 entspricht, was die Taste bezeichnet. Beachten Sie, dass der interne Code nicht zwischen Groß- und Kleinschreibung unterscheidet. Ist diese Unterscheidung notwendig, verwenden Sie die Methode get­ Ascii() anstelle von getCode(). Für häufig verwendete Tasten hält Flash eine Reihe von Konstanten bereit, so dass man sich bei bedingten Anweisungen nicht den Zahlencode merken muss. Folgende Tabelle enthält eine Auflistung der Konstanten. Code

Taste

BACKSPACE



CAPSLOCK



CONTROL

<Strg>

DELETEKEY

<Entf>

DOWN



END

<Ende>

ENTER

<Eingabetaste>

ESCAPE

<Esc>

HOME



INSERT

<Einfg>

LEFT



PGDN



PGUP



RIGHT



SHIFT



SPACE



TAB



UP



Konstanten der Key-Klasse

Beliebt ist die Tastatur auch bei Spielen, um Figuren zu steuern. Wir schauen uns ein simples Beispiel an, wobei einige der Konstanten anstelle von Zahlencodes verwendet werden sollen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects einen Kreis (50 × 50). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKugel, Instanzname kugel1). 4. Weisen Sie actions folgendes Bildskript zu:

//------------- vars ---------------  var oKeyListener:Object = new Object(); var nTempoX:Number = 5; var nTempoY:Number = 5;

//----------- functions ------------ function init():Void {

 oKeyListener.onKeyDown = function():Void {

 var nKey:Number = Key.getCode();  switch (nKey) {  case Key.LEFT :

 bewegen(-nTempoX, 0);  break;

 case Key.RIGHT :

 bewegen(nTempoX, 0);  break;

 case Key.UP :

 bewegen(0, -nTempoX);  break;

 case Key.DOWN :

 bewegen(0, nTempoX); } };

 Key.addListener(oKeyListener); }

 function bewegen(pFaktorX:Number, pFaktorY:Number):Void {  kugel1._x += pFaktorX;  kugel1._y += pFaktorY; }

//------------ start --------------- init();

Wenn Sie eine der Pfeiltasten drücken, bewegt sich Ihre Figur in die entsprechende Richtung. Neben dem unvermeidlichen Listener richten wir zwei Variablen ein, um das Tempo der horizontalen und der vertikalen Bewegung zu definieren. In der init()-Funktion wird zuerst der aktuelle Tastencode in einer Variablen gespeichert. Für uns interessant sind nur vier mögliche Werte, die die vier Pfeiltasten repräsentieren. Sie werden in der switch()-Anweisung abgefragt. Je nach Ergebnis rufen wir die Funk-

220

tion bewegen() auf, die als Argument Werte für die horizontale und vertikale Bewegung erhält. In bewegen() addieren wir einfach die übergebenen Werte zur aktuellen horizontalen und vertikalen Position hinzu. Wollen wir beispielsweise eine Bewegung nach links erreichen, muss -nTempoX übergeben werden, so dass innerhalb von bewegen() eine Subtraktion erfolgt. Für die vertikale Richtung ist dann ein Wert von 0 notwendig, da ansonsten zusätzlich auch eine vertikale Bewegung erfolgen würde. Etwas anders gestaltet sich die Verwendung von Key.isDown(), einer Methode, die im Gegensatz zu vorher abfragt, ob eine ganz bestimmte Taste gedrückt wurde. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //------------- vars ----------------

Kapitel 17  Maus und Tastatur

Wenn Sie die rechte Pfeiltaste drücken, erhalten Sie im Nachrichtenfenster ein entsprechendes Feedback, bei anderen Tasten dagegen nicht. Der prinzipielle Unterschied zu vorher besteht in der dem onKeyDown-Ereignis zugewiesenen Methode Key.isDown(). Nach wie vor werden zwar alle Tastatureingaben verfolgt, aber die Reaktion hängt davon ab, ob die rechte Pfeiltaste gedrückt wurde. Nur wenn das zutrifft, gibt das Nachrichtenfenster eine eminent wichtige Meldung aus. Normalerweise kann man mit Key.getCode() bzw. Key.getAscii() nur eine einzige, nämlich die zuletzt gedrückte Taste abfragen. An dieser Stelle hilft Key.isDown(), um mehrere Tasten gleichzeitig zu kontrollieren. 3. Ändern Sie in der Deklaration von init() die ifBedingung (Fettdruck):

 var oKeyListener:Object = new Object();

 if(Key.isDown(Key.RIGHT)&&Key. isDown(Key.UP)){

function init():Void {

}

//------------ functions ------------

trace(„Zwei Tasten gedrückt“);

 oKeyListener.onKeyDown = function() {

Nun erfolgt nur noch eine Ausgabe, wenn sowohl die rechte wie die obere Pfeiltaste gleichzeitig gedrückt werden. Mit Hilfe eines logischen Und können wir beliebige Ausdrücke miteinander kombinieren, was hier konkret mit zwei Pfeiltasten geschieht. Möglich ist natürlich auch ein logisches Oder.

 if(Key.isDown(Key.RIGHT)){

 trace(„Rechte Pfeiltaste gedrückt“); } }

 Key.addListener(oKeyListener); }

//------------- start -------------- init();

BitmapData- und Filter-Klasse

Die Einführung der BitmapData- und der FilterKlasse in Flash 8 glich einem kleinen Quantensprung: War man bisher auf die Bearbeitung von Vektoren beschränkt, ließen sich nun mit sehr ausgefeilten Methoden Bitmaps nahezu beliebig verwenden. Ein solcher Schritt war längst überfällig, bot doch schon Director seit Jahren eine vergleichbare Funktionalität in Form des sogenannten Imaging Lingo. Trotz der Bedeutung, die diesem Schritt zukommt, muss man selbst heute noch mit einigem Erstaunen feststellen, dass die sich bietenden Möglichkeiten von den wenigsten Entwicklern wirklich voll ausgeschöpft werden. Noch allzu häufig entspricht der Workflow dem klassischen Vorgehen Photoshop (bzw. Bildbearbeitungsprogramm) – Flash, wobei alle benötigten Grafiken extern vorbereitet werden. Zahlreiche Schritte lassen sich jedoch direkt in Flash per Skripting erledigen. Wenn der Entwicklungsprozess dennoch anders verläuft, so liegt das einerseits in den durch die in Flash angebotenen Werkzeuge vertauschten Rollen: Während in Photoshop naturgemäß der Grafiker die entsprechenden Grafiken erstellt, müsste es nun in Flash der Programmierer sein, wollte man die besonderen Möglichkeiten dieses Programms ausschöpfen. Aus eigener Erfahrung weiß der Autor jedoch, dass in den meisten Fällen den grafischen Fähigkeiten eines Programmierers eher enge Grenzen gesetzt sind. So manch einer kommt da nicht weit über rote Kreise und blaue Rechtecke hinaus. Andererseits erweisen sich die beiden neuen Klassen im praktischen Einsatz als mitunter recht sperrig, wobei erschwerend hinzu kommt, dass die offizielle Dokumentation von Macro­ media/Adobe an dieser Stelle für Neulinge leider mitunter unbrauchbar  – sprich: unverständlich und unvollständig – ist.

18

Die Einsatzmöglichkeiten alleine der BitmapDataKlasse sind ausgesprochen vielfältig und beschränken sich keineswegs nur auf grafische Effekte. Darüber hinaus können wir nun Informationen mit Hilfe dieser Klasse bereit stellen, die den Workflow vereinfachen, und wir sind in der Lage, die Darstellung von Vektorgrafiken zu optimieren, um dem immer noch nicht übermäßig leistungsfähigen Flash-Player auf die Sprünge zu helfen. Am Ende dieses Kapitels finden Sie dazu gewissermaßen als Appetithäppchen einige Hinweise. Insofern möchte der Autor dem Leser dieses Kapitel, das in einem allgemeinen Skripting-Lehrbuch leider nur in die Thematik einführen kann, ganz besonders ans Herz legen. Die vorgestellten Methoden bieten Gelegenheit zu zahlreichen Experimenten, die man sich nicht entgehen lassen sollte.

18.1 Bitmap versus Vektor Grafische Darstellungen beruhen prinzipiell auf zwei verschiedenen Verfahrensweisen:

• Vektor.

Bei einer Vektorgrafik resultiert das anzuzeigende Bild aus einer Berechnung, also einer mathematischen Beschreibung von Punkten und Kurven. So werden für eine Linie Informationen zu dessen Stärke, Farbe sowie Anfangs- und Endpunkt benötigt, während bei einem Kreis neben Linienstärke und –farbe die Position des Mittelpunkts sowie der Radius bekannt sein müssen. Beispielsweise könnte die Anweisung zur Erzeugung einer rechteckigen Vektorgrafik in einer postscriptfähigen Sprache etwa so lauten:

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

221

222

0 1 0 setrgbcolor 0 0 200 200 rectfill 0 0 1 setrgbcolor 0 0 100 100 rectfill In der ersten Zeile wird Grün als Füllfarbe festgelegt. Danach entsteht von der horizontalen und vertikalen Position 0 ausgehend ein 200 Pixel hohes und ebenso breites Rechteck, dem die erwähnte Farbe zugewiesen wird. Die dritte Zeile wechselt die Farbe zu Blau, mit dem das in der letzten Zeile ebenfalls auf der 0-Position beginnende, aber nur 100 Pixel hohe und breite Rechteck gefüllt wird. Dadurch erhalten wir ein kleines blaues Rechteck, das links oben in einem größeren grünen Rechteck eingefügt wird. Da der Code zur Erzeugung des Bildes aus wenigen Zeilen besteht, belegt diese Vektorgrafik nur minimalen Speicherplatz. Ein weiterer Vorteil liegt in der beliebigen Skalierbarkeit, ohne dass damit ein Qualitätsverlust oder eine deutliche Vergrößerung der Datei einhergehen würden. Allerdings eignen sich Vektorgrafiken nicht für jede Art von Bildern. Haben wir es beispielsweise mit einem sehr detailreichen Motiv zu tun, so könnte es notwendig werden, sehr viele Vektoren zu erzeugen, um die betreffenden Details korrekt wieder zu geben. Dadurch würden die Anweisungen zum Berechnen der Grafik enorm aufgebläht und dementsprechend eine erheblich größere Datei entstehen. Das Anzeigen der Grafik würde zudem mehr Zeit in Anspruch nehmen, da sie ja berechnet werden muss. So enthalten Photos i. d. R. viele Details und eignen sich daher nicht für eine Vektordarstellung. • Bitmap. Völlig anders dagegen funktioniert eine Bitmapgrafik. Sie betrachtet das darzustellende Motiv immer als eine rechteckige, mosaikartige Ansammlung aus zahlreichen einzelnen Bildpunkten, den sogenannten picture elements, aus denen sich der Name Pixel bzw. Pixelgrafik herleitet. Jeder Bildpunkt definiert sich durch seine Position, einen Farbwert und gegebenenfalls eine Transparenz. Um das vorhergehende Beispiel der blauen und grünen Rechtecke umzusetzen, müsste man in einer Art Tabelle jeden einzelnen Punkt, ausgehend von der linken oberen Ecke, erfassen und ihren

Kapitel 18  BitmapData- und Filter-Klasse

Farbwert sowie die Transparenz speichern. Faktisch benötigt man 200 × 200 bzw. 40.000 Werte. Handelt es sich um eine 32-Bit-Grafik mit je 8 Bit (bzw. 256 Werte) für jeden der drei Farbkanäle des RGB-Farbraums sowie zusätzlich 8 Bit für die Transparenz, wächst die entsprechende Datei auf eine Größe von 8 × 8 × 8 × 8 Bit bzw. 160 KB an. Damit ist die resultierende Datei erheblich größer als das besprochene Vektor-Pendant. Ein Skalieren führt zu einem mehr oder minder deutlich wahrnehmbaren Qualitätsverlust und Kanten, die nicht waagerecht oder senkrecht verlaufen, erzeugen unschöne Ränder, die rechnerisch per Anti-Aliasing geglättet werden müssen. In einem zentralen Punkt sind sie jedoch Vektorgrafiken eindeutig überlegen: Sie eignen sich insbesondere für detailreiche Motive und sind damit erste Wahl, wenn es um Photos geht. Zudem ändert sich die benötigte Rechnerleistung prinzipiell nicht mit der Detailfülle, da nur einfach Werte aus einer Tabelle auszulesen sind. Flash arbeitet standardmäßig mit Vektorgrafiken, eine Vorgabe, die auf den für die Entstehung des Programms ursprünglich maßgebenden Gedanken, die Dateigröße möglichst gering zu halten, zurück geht. Wer beispielsweise mit den in der Werkzeugpalette enthaltenen Bordmitteln zeichnet, erzeugt eine Vektorgrafik. Das gleiche geschieht bei der Verwendung der Zeichnungsmethoden der MovieClip-Klasse. Vor Flash 8 konnte man Bitmaps laden und entweder rudimentär in der Autorenumgebung bearbeiten oder zur Laufzeit bezüglich Position, Größe, Deckkraft und Farbe manipulieren, vorausgesetzt, sie waren in MovieClips als übergeordnete Behälter integriert. Ein Zugriff auf einzelne Pixel war dabei jedoch nicht möglich. Das ändert sich grundlegend durch die BitmapData-Klasse, die endlich zahlreiche Werkzeuge für ein gezieltes, umfassendes Bearbeiten von PixelGrafiken bereit stellt. Aller Begeisterung zum Trotz bleibt momentan noch ein dicker Wermutstropfen: Das Rendern der Grafiken erfolgt im Flash-Player bis zur Version 9 über den Hauptprozessor, die zusätzliche Leistung, die eine moderne Grafikkarte durch ihren eigenen Prozessor anbietet, bleibt ungenutzt. Sie steht erst ab Flash CS4 bzw. Player 10 zur Verfügung (und führt derzeit dazu, dass die Animation auf verschiedenen

18.2  Instanziierung der BitmapData-Klasse

Systemen leider verschieden berechnet und dargestellt wird) Selbst der Tempogewinn durch die AVM2, die nur bei AS 3.0 zum Einsatz kommt, reicht noch nicht immer aus, um diejenigen Feuerwerke abbrennen zu lassen, die rein programmiertechnisch mit den vorhandenen Sprachelementen möglich wären. Aber das dürfte lediglich eine Frage der Zeit sein, bis Flash auch an dieser Stelle an moderne Programmiersprachen anschließt.

18.2 Instanziierung der BitmapData-Klasse Alle Bitmap-bezogenen Daten werden in einem eigenen Objekt, einer Instanz der BitmapData-Klasse, im Arbeitsspeicher erfasst. Mit angenehm wenigen Parametern ist es möglich, eine derartige Instanz zu erzeugen, wobei ähnlich der geom-Klasse zunächst das benötigte Package bzw. direkt die betreffende Klasse geladen werden sollte. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: import flash.display.*;

 var bmBitmap:BitmapData = new BitmapData(300,200); trace(bmBitmap);

trace(bmBitmap.width);

trace(bmBitmap.height);

Ausgabe im Nachrichtenfenster: [object Object] 300 200 Wenn Ihr Bildschirm nichts weiter anzeigt als die angegebene Meldung, so ist das völlig korrekt. Denn das eben erzeugte Objekt existiert nur im Arbeitsspeicher und besitzt weder eine visuelle Repräsentation noch irgendwelchen Inhalt. Es handelt sich um ein unsichtbares Rechteck mit einer Breite von 300 und einer Höhe von 200 Pixeln, wie uns die Ausgabe bestätigt. Die maximale Größe liegt bei 2.880 Pixeln horizontal und vertikal. Wird ein höherer Wert gewählt, weigert sich Flash, das betreffende Objekt darzustellen. Auf diese Weise soll verhindert werden, dass ein Flash-Film den

223

kompletten Arbeitsspeicher auf einem Zielrechner belegt (angesichts der Tatsache, dass Vista-geschädigte Nutzer bereits 1 GB alleine für ihr Betriebssystem verschwenden müssen, handelt es sich bei dieser Einschränkung um eine kluge Entscheidung). 3. Erweitern Sie die Initialisierung von bmBitmap (Fettdruck):  var bmBitmap:BitmapData = new BitmapData(300, 200,false,0xffaa00);

4. Fügen Sie nach der Initialisierung von bmBitmap ein: v ar mBitmap:MovieClip = this.create EmptyMovieClip(„behBitmap“,1); mBitmap.attachBitmap(bmBitmap,1);

Als Ergebnis erscheint nun in der linken oberen Ecke ein orangefarbenes Rechteck. Zwingend vorgeschrieben sind für das BitmapData-Objekt als Parameter die Angabe von Breite und Höhe in Pixeln. Wenn wir ohne die Verwendung weiterer Methoden der BitmapData-Klasse auch etwas sehen wollen, müssen wir darüber hinaus auf die optionalen Parameter für Transparenz und Farbe zugreifen. In unserem konkreten Beispiel setzen wir die Transparenz auf false. Würden wir Statt dessen true übergeben, wäre der Effekt der gleiche wie zuvor: Wir könnten nichts sehen, da unabhängig von der verwendeten Farbe jeder Pixel durchsichtig dargestellt würde. An letzter Stelle definieren wir die Füllfarbe, die in unserem Beispiel einem kräftigen Orange entspricht. Eine davon unabhängige Rahmenfarbe wie bei den Zeichnungsmethoden der MovieClip-Klasse existiert hier nicht. Als Farbe haben wir einen 24-Bit-Hexadezimalwert übergeben, bestehend aus jeweils zwei Ziffern pro Farbkanal, genauso, wie wir es bereits beim ColorTransform-Objekt kennen gelernt haben. Flash führt die Anweisung auch klaglos aus. Offiziell empfohlen wird jedoch ein 32-Bit-Hexadezimalwert, der zwei weitere Ziffern für den Alphakanal verwendet. Sie stehen am Anfang der Zahl. In Dezimalschreibweise spricht man von ARGB (Alpha, Rot, Grün, Blau)-Werten, wobei jeder Kanal einen 8-Bit-Wert umfasst bzw. Werte von 0 bis 255. Der Alphakanal definiert den Grad der Transparenz. Liegt ein Wert von ff (oder: FF) vor, entspricht

224

dies der höchsten Intensität und damit voller Deckkraft. Es existiert dementsprechend kein transparentes Pixel. Vollständige Transparenz wird dagegen hexadezimal mit 00 und dezimal mit 0 festgelegt. 5. Korrigieren Sie die Initialisierung von bmBitmap wie folgt (Fettdruck):  var bmBitmap:BitmapData = new BitmapData(300, 200,false,0xffffaa00);

Zwar ergibt sich beim Testen kein Unterschied zu vorher, aber formal folgt die Formulierung der offiziellen Vorgabe. 6. Ändern Sie die Initialisierung von bmBitmap wie folgt (Fettdruck):  var bmBitmap:BitmapData = new BitmapData(300, 200,false,0x00ffaa00);

Wenn wir die Gegenprobe machen und im Farbwert eine vollständige Transparenz übergeben, wird diese beim Testen entgegen unserer Erwartungen offensichtlich ignoriert. Der Grund liegt im dritten übergebenen Parameter (der eigentlich etwas überflüssig ist). 7. Ändern Sie die Initialisierung von bmBitmap wie folgt (Fettdruck):  var bmBitmap:BitmapData = new BitmapData(300, 200,true,0x00ffaa00);

Nun verschwindet unsere Grafik wie erwartet. Durch den dritten Parameter teilen wir Flash mit, den im Farbwert enthaltenen Transparenzwert darzustellen. Da er auf 0 (bzw. Hexadezimal: 00) gesetzt wurde, können wir kein Rechteck mehr sehen.

Kapitel 18  BitmapData- und Filter-Klasse

ansonsten doch recht langweilige orangefarbene Rechtecke zu erstellen. Diese Funktionalität bietet ja schon die MovieClip-Klasse. BitmapData werden erst durch die Bearbeitungsmöglichkeiten, die über die zahlreichen Methoden zur Verfügung gestellt werden, wirklich interessant. Und da macht es auch Sinn, dass wir, wie im ersten Beispiel am Anfang dieses Abschnitts gezeigt, sogar ein Objekt erzeugen können, das zunächst keinen sichtbaren Inhalt enthält.

18.3 Eigenschaften der BitmapData-Klasse In der BitmapData-Klasse werden nur vier jeweils schreibgeschützte Eigenschaften festgelegt, die eigentlich weitgehend selbsterklärend sind:

• width, die Breite des Bitmap-Rechtecks in Pixel; • height, die Höhe des Bitmap-Rechtecks in Pixel; • transparent, die Transparenz, die an dieser

Stelle leider keinen transparenten Verlauf zulässt, sondern nur die Werte true oder false kennt; • rectangle, gemessen als ein Rechteck, das in der linken oberen Ecke der BitmapData-Instanz beginnt, und eine Ausdehnung entsprechend der als Parameter übergebenen Werte besitzt. Die ersten drei Werte werden dem Konstruktor bei der Instanziierung der BitmapData-Klasse übergeben, während der vierte Wert automatisch aus den beiden ersten Werten folgt.

8. Ändern Sie die Initialisierung von bmBitmap wie folgt (Fettdruck):  var bmBitmap:BitmapData = new BitmapData(300, 200,true,0xffffaa00);

18.4 Methoden der BitmapData-Klasse

Machen wir auch dazu die Gegenprobe, indem wir für die Deckkraft den höchstmöglichen Wert übergeben, taucht unser Rechteck in seiner vollen Schönheit wieder auf. Sie können an dieser Stelle gerne mit Werten zwischen den genannten Extremen testen. Wählen Sie einen schwarzen Hintergrund für die Bühne und übergeben Sie beispielsweise 0xaaffaa00, wird das Rechteck abgedimmt. Der Hauptzweck dieser Klasse besteht zugegebenermaßen nicht einfach darin, zwar anmutige, aber

Das eigentliche Potential dieser Klasse offenbart sich in ihren zahlreichen Methoden, die wir hier nicht alle im Einzelnen behandeln können. Die Tabelle gibt einen ersten Überblick, dem sich eine Diskussion ausgesuchter Beispiele anschließt. Sie sollte als Anregung verstanden werden, um selbst Experimente mit dieser Klasse zu wagen.

18.4  Methoden der BitmapData-Klasse

225

Methode

Bedeutung

Methode

Bedeutung

applyFilter()

Weist einen Filter der Filter-Klasse zu

noise()

clone()

Erstellt eine exakte Kopie der BitmapData-Instanz

Weist pixelweise zufällige RGB-Werte zu

paletteMap()

Ordnet Farbkanalwerte neu zu

colorTransform() Ändert die Farbwerte in einem

perlinNoise()

Erstellt eine Störung auf der Basis der Gleichung von Perlin

compare()

Vergleicht (theoretisch) zwei gleich große BitmapData-Instanzen und gibt die Unterschiede als neues Objekt zurück (ab Flash 9)

pixelDissolve()

Pixelweises Auflösen einer BitmapData-Instanz oder pixelweiser Übergang von einer BitmapData-Instanz zu einer anderen BitmapData-Instanz

copyChannel()

Überträgt Informationen aus einem Farbkanal in einen anderen sowohl innerhalb einer BitmapData-Instanz wie auch zwischen solchen Instanzen

scroll()

Scrolled eine BitmapData-Instanz um den angegebenen Wert horizontal und/oder vertikal

copyPixels()

Kopiert einen angegebenen rechteckigen Bereich aus einer BitmapData-Instanz in eine andere BitmapData-Instanz. Skalierung, Rotation oder Farbeffekte werden dabei nicht übernommen

setPixel()

Weist einem angegebenen Punkt einen RGB-Wert zu

setPixel32()

Weist einem angegebenen Punkt einen ARGB-Wert zu

threshold()

Ändert die Farbwerte aller Pixel, die eine angegebene Bedingung (Vergleich von Farbwerten) erfüllen

angegebenen rechteckigen Bereich

dispose()

Löscht eine BitmapData-Instanz aus dem Arbeitsspeicher

draw()

Kopiert eine BitmapData-Instanz oder einen MovieClip in eine andere BitmapData-Instanz. Dabei können zusätzliche Effekte wie Skalierung und Farbtransformationen mit Hilfe entsprechender Objekte (Matrix, ColorTransform etc.) definiert werden

fillRect()

Füllt einen rechteckigen Bereich mit einer ARGB-Farbe

floodFill()

Füllt einen Bereich gleicher Farbe ab einem angegebenen Startpunkt

generateFilterRect()

Definiert ein Zielrechteck für die Methode applyFilter()

getColorBoundsRect()

Gibt einen rechteckigen Bereich zurück, innerhalb dessen alle Pixel einem angegebenen ARGB-Wert entsprechen

getPixel()

Gibt eine Ganzzahl zurück, die dem RGB-Wert eines angegebenen Punktes entspricht

getPixel32()

Gibt eine Ganzzahl zurück, die dem ARGB-Wert eines angegebenen Punktes entspricht

Methoden der BitmapData-Klasse

18.4.1 Dispose() Bevor wir uns mit irgendeiner anderen Methode beschäftigen, ist es wichtig zu erfahren, wie man das gerade instanziierte Objekt wieder los wird. Denn eine Bitmapgrafik belegt im Gegensatz zur Vektorgrafik viel Speicherplatz. Daher müssen derartige Objekte, sobald sie nicht mehr benötigt werden, aus dem Arbeitsspeicher entfernt werden. Dazu stellt Flash die Methode dispose() zur Verfügung. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //------------– import –------------ import flash.display.*;

//-------------- vars –------------- var mBitmap:MovieClip;

Kollisionstest zwischen einer BitmapData-Instanz sowie einem Punkt, einem MovieClip oder einer anderen BitmapData-Instanz

var bmBitmap:BitmapData;

loadBitmap()

Lädt aus der Bibliothek eine BitmapGrafik in eine BitmapData-Instanz

merge()

 bmBitmap = new BitmapData(300, 200,true,0xffffaa00);

Mischung der Farbkanäle zweier BitmapData-Instanzen

hitTest()

//------------ functions –---------- function init() {

mBitmap  = this.createEmptyMovieClip („behBitmap“, 1);

226

Kapitel 18  BitmapData- und Filter-Klasse

 mBitmap.attachBitmap(bmBitmap, 1);

18.4.2 FillRect(), floodFill()

 bmBitmap.dispose();

Wie bereits angesprochen strebt so mancher Künstler nach höheren Weihen und begnügt sich nicht mit orangefarbenen Rechtecken. Zum Glück können nachträglich problemlos einzelne Bereiche bis hin zur gesamten Bitmap mit einer neuen Farbe gefüllt werden. Nehmen wir an, wir wollen die linke obere Ecke unserer Beispielgrafik mit einem kräftigen Rot füllen.

 mBitmap.onPress = function() { }; }

//------------- start –------------- init();

Bei Mausklick auf das Rechteck verschwindet es. Obwohl es so aussieht, wird nicht der MovieClip, sondern nur dessen Inhalt, also die Bitmap, gelöscht. Das können wir kontrollieren, indem wir auf eine bekannte Eigenschaft des angesprochenen Objekts zugreifen. 3. Erweitern Sie das onPress-Ereignis nach dem Aufruf von dispose(): trace(bmBitmap.width);

Ausgabe im Nachrichtenfenster: –1 Wir erhalten nicht mehr 300 Pixel wie unmittelbar nach der Instanziierung, sondern nur noch –1, was bedeutet, dass das betreffende Objekt keine Ausdehnung mehr besitzt, weil es nicht gefunden werden konnte bzw. nicht mehr existiert. Erneut ist eine Gegenprobe möglich. 4. Kommentieren Sie im onPress-Ereignis den Aufruf von dispose() aus (Fettdruck): //bmBitmap.dispose();

5. Fügen Sie danach ein: this.removeMovieClip();

Ausgabe im Nachrichtenfenster: 300 Optisch ergibt sich beim Testen per Mausklick auf mBitmap kein Unterschied, aber wie die Ausgabe zeigt, existiert das BitmapData-Objekt weiterhin, denn seine Breite wird wieder mit 300 angegeben. Der Behälter dagegen, in den wir es zwecks Darstellung eingefügt haben, wurde gelöscht. In diesem Fall würde der Arbeitsspeicher weiterhin mit einer Bitmapgrafik belegt, obwohl wir sie für eine Anzeige nicht mehr weiter benötigen. Um also eine Instanz der BitmapData-Klasse vollständig zu löschen, müssen wir auf die Methode dispose() zugreifen.

6. Fügen Sie nach dem Import des display-Packages ein: import flash.geom.*;

7. Ersetzen Sie innerhalb des onPress-Ereignisses alle Anweisungen durch (Fettdruck): mBitmap.onPress = function() {

 bmBitmap.fillRect(new Rectangle (0, 0, 150, 100), 0xffff0000); };

Bei Mausklick erscheint auf der bisherigen Bitmap in der linken oberen Ecke ein rotes Rechteck. Um den betreffenden Bereich definieren zu können, benötigen wir zunächst die Rectangle-Klasse, die Teil des geom-Packages ist. Dieses wird am Anfang importiert; alternativ hätten wir auch direkt die betreffende Klasse aufrufen können. Dem onPressEreignis weisen wir die fillRect()-Methode zu, der wir zwei Parameter übergeben:

• new

Rectangle(0,0,150,100), was einem

Rechteck entspricht, das in der linken oberen Ecke der Bitmapgrafik beginnt und eine Breite von 150 sowie eine Höhe von 100 Pixeln besitzt; • 0xffff0000, einen hexadezimalen Farbwert, der keine Transparenz enthält und den Rotkanal auf den höchstmöglichen Wert setzt. Der sichtbare Bereich des neu erstellten Rechtecks liegt immer innerhalb des sichtbaren Bereichs der BitmapData-Instanz. 8. Weisen Sie mBitmap vor Deklaration des onPress-Ereignisses testweise eine andere Position zu: mBitmap._x = mBitmap._y = 100;

9. Ändern Sie den ersten Parameter der fillRect()Methode (Fettdruck):

18.4  Methoden der BitmapData-Klasse

b mBitmap.fillRect(new Rectangle(-50, 0, 150, 100), 0xffff0000);

Der Behälter für das orangene Rechteck wird nach rechts und unten um jeweils 100 Pixel verschoben, so dass wir eventuell links neben der aktuellen BitmapData-Instanz gezeichnete Objekte erkennen können. Anschließend verschieben wir innerhalb von fillRect() das zu färbende Rechteck gegenüber dem Nullpunkt der Bitmapgrafik um 50 Pixel nach links. Dennoch erfolgt der Füllvorgang ausschließlich auf dem sichtbaren Teil der Grafik, was faktisch zu einer Verkürzung der Breite des roten Rechtecks um die erwähnten 50 Pixel führt. 10. Setzen Sie den geänderten Parameter der fillRect()-Methode wieder auf seinen ursprünglichen Wert zurück(Fettdruck):

mBitmap.fillRect(new Rectangle(0, 0, b 150, 100), 0xffff0000);

Neben dem gezielten Einfärben eines Rechtecks ist es damit auch leicht möglich, den ursprünglichen Zustand der BitmapData-Instanz wieder herzustellen, etwa, wenn wir einzelne Bereiche mit einer der weiter unten erörterten Methoden geändert haben. Dann reicht es aus, fillRect() mit einem der Größe der betreffenden Instanz entsprechenden Rechteck sowie der Originalfarbe aufzurufen. Für das Rechteck greift man der Einfachheit halber auf die rectangleEigenschaft des gewünschten Objekts zu. In unserem Beispiel würde die Anweisung lauten: bmBitmap.fillRect(bmBitmap.rectangle, 0xffffaa00);

Es ist also nicht unbedingt notwendig, explizit mit einem Konstruktor ein neues Rechteck zu definieren Eine Fläche lässt sich alternativ mit Hilfe von floodFill() füllen. In dem Fall haben wir es mit einer Methode zu tun, die dem bekannten Fülleimer aus Bildbearbeitungsprogrammen wie Photoshop entspricht. 11. Erweitern Sie das onPress-Ereignis nach Aufruf der fillRect()-Methode um:

mBitmap.floodFill(this._xmouse, b this._ymouse, 0xaa0000FF);

Wenn Sie beim Testen mit der Maus in die linke obere Ecke klicken, wird wie bisher ein rotes Rechteck gezeichnet. Alle übrigen Pixel dagegen färbt Flash dann

227

blau. Denn aufgrund von floodFill() werden, ausgehend von der als Parameter übergebenen Position, alle Pixel in der neuen Farbe dargestellt, die zuvor über denselben Farbwert verfügten. Das gesamte orangene Rechteck wird damit in zwei Farbbereiche aufgeteilt. Ein anderes Ergebnis erhalten Sie bei einem Klick auf einen Bereich, der bisher immer rot eingefärbt wurde. Dort erfolgt dann zwar ebenfalls die Rotfärbung, aber danach wird derselbe Bereich mit Blau gefüllt. Die umgebenden orangenen Pixel dagegen bleiben unberührt. Wenn Sie anschließend in den übrig gebliebenen orangenen Bereich klicken, taucht erneut das rote Rechteck auf, während der Rest blau eingefärbt wird. Mit einem abschließenden Klick auf das rote Rechteck wird auch dieses mit dem definierten Blauton gefüllt.

18.4.3 GetPixel(), getPixel32(), setPixel(), setPixel32() Natürlich besteht auch die Möglichkeit, ganz gezielt einzelne Pixel zu manipulieren, wobei wir mit 24- und 32-Bit-Hexwerten arbeiten können. 12. Kommentieren Sie innerhalb des onPress-Ereignisses den Aufruf der floodFill()-Methode aus:  //bmBitmap.floodFill(this._xmouse, this._ymouse, 0xaa0000FF);

13. Fügen Sie innerhalb des onPress-Ereignisses nach den auskommentierten Zeilen ein:

race((bmBitmap.getPixel(100, 0)). t toString(16));

bmBitmap.setPixel(100, 0, 0 x 0000ff); race((bmBitmap.getPixel(100, 0)). t toString(16));

Nach einem Mausklick wird in einem einzigen kaum erkennbaren Punkt am oberen Rand des Rechtecks der Farbwert von Rot auf Blau geändert. Das Nachrichtenfenster gibt den betreffenden Farbwert vor und nach der Änderung aus. In der praktischen Anwendung macht es nun nicht wirklich Sinn, lediglich einen einzigen Pixel zu ändern, da der resultierende Effekt kaum auszumachen ist.

228

Kapitel 18  BitmapData- und Filter-Klasse

Abbildung 44:  Erzeugung eines Punktrasters mit setPixel()

Abbildung 45:  Erzeugung eines zufälligen Musters mit setPixel32()

14. Löschen Sie die eben eingefügten trace()-Anweisungen 15. Ersetzen Sie den Aufruf der setPixel()-Methode durch:

16. Ersetzen Sie die im vorhergehenden Schritt eingefügten Anweisungen vollständig durch:



var nDif:Number = 5;



for  (var j:Number = 0; j<=150/ nDif; j++) {





or (var i:Number = 0; i<=100/nDif; f i++) {

bmBitmap.setPixel(j*nDif,  i*nDif, 0xffffff);

}

}

Per Mausklick erstellen wir ein aus weißen Punkten bestehendes Raster, das über den rot eingefärbten Bereich der Grafik gelegt wird, wie Abbildung 44 zeigt. Wir richten eine lokale Variable nDif ein, die mit dem Wert 5 initialisiert wird. Sie dient dazu, den Abstand zwischen einzelnen Punkten festzulegen. In der nachfolgenden Schleife erfolgt das konkrete Setzen der Farbwerte für ausgesuchte Punkte. Dabei verwenden wir eine äußere Schleife für die vertikale und eine innere für die horizontale Position der Punkte. Ihre Gesamtzahl ergibt sich vertikal aus der Höhe des roten Rechteckbereichs dividiert durch den Punkteabstand, horizontal aus dessen Breite, ebenfalls dividiert durch den Abstandswert. Wenn wir darüber hinaus auch eine Transparenz definieren wollen, müssen wir mit der setPixel32()-Methode arbeiten.



var nXPos:Number, nYPos:Number;



or (var i:Number = 0; i<=nAnzahl; f i++) {





var nAnzahl:Number = 600;

nXPos  = Math.round(Math.random()*150)+50; nYPos  = Math.round(Math.random()*100);

bmBitmap.setPixel32(nXPos,  nYPos, 0xaaffffff); }

Unser Code erstellt nun ein zufälliges Muster aus halbtransparenten weißen Punkten innerhalb der rot eingefärbten Fläche, wie auf Abbildung  45 zu sehen. Wir legen zwei lokale Variablen fest, um darin die zufällig ermittelten Positionswerte zu speichern. In nAnzahl definieren wir die maximale Anzahl der verändert dargestellten Punkte. Da wir aus Gründen der Einfachheit nicht kontrollieren, ob manche Punkte mehrfach eingefärbt werden, kann die tatsächliche Anzahl der sichtbaren Punkte davon nach unten abweichen, was aber für unser Beispiel unerheblich ist. Innerhalb der Schleife ermitteln wir entsprechend dieser Anzahl eine zufällige x-Position sowie eine zufällige y-Position. Der Pixel, der sich an den betreffenden Werten befindet, wird dann weiß eingefärbt und halb

18.4  Methoden der BitmapData-Klasse

transparent dargestellt. Dieses Vorgehen erinnert ein bisschen an die weiter unten vorgestellte noise()Methode. Der einzige wirkliche Nachteil von setPixel() bzw. setPixel32() besteht in der außerordentlich großen Anzahl an Rechenoperationen, die notwendig werden, wenn man eine größere Grafik Pixel für Pixel bearbeiten möchte. Wollten wir beispielsweise in einem Bild der Größe 800 × 600 pixelweise Farbänderungen vornehmen, ergäben sich rein rechnerisch 800 × 600 bzw. 480.000 Zugriffe  – ein unsinnig hoher Wert, bei dem Flash konsequenterweise die Gefolgschaft verweigert. Um ein angemessenes Arbeiten zu gewährleisten, müssen wir uns daher auf ein sinnvolles Maß beschränken und überlegen, ob nicht durch die Verwendung anderer oder die Kombination verschiedener Methoden ein vergleichbares Ergebnis erzielt werden kann, ohne dass sich unvertretbare Rechenzeiten ergeben. Sollte dennoch kein Weg an einer pixelweisen Bearbeitung vorbeiführen, bleibt nur noch, die Rechenoperationen per setInterval() auf mehrere Durchgänge zu verlagern anstatt sie in einem Rutsch in einer Schleife zu verarbeiten. Den idealen Wert für das Intervall muss man experimentell ermitteln.

229

2. Importieren Sie in die Bibliothek eine beliebige Grafik. Wir verwenden hier beispielhaft eine Grafik aus dem Workshop Galerie (z. B. affe0.jpg). 3. Weisen Sie der Grafik in der Bibliothek den Verknüpfungsnamen affe zu. 4. Weisen Sie actions folgendes Bildskript zu: //------------ import –------------- import flash.display.BitmapData;

//–------------ vars –-------------- var mBild:MovieClip;

var bmBild:BitmapData;

v ar sBildVerknuepfung:String = „affe“;

//----------- functions –----------- function init() {

f or (var i:Number = 0; i<=nAnzahl; i++) { bmBild  = BitmapData. loadBitmap(sBildVerknuepfung);

mBild  = this. createEmptyMovieClip(„behBild“, this.getNextHighestDepth());

mBild.attachBitmap(bmBild,  this. getNextHighestDepth()); }

18.4.4 LoadBitmap(), draw(), copyPixels(), clone() Neben dem direkten Zeichnen in das BitmapDataObjekt kann man auch auf bestehende Bitmapgrafiken zugreifen, um sie teilweise oder vollständig zu übernehmen. Eine Variante besteht in der Verwendung der loadBitmap()-Methode. Analog zur loadMovie()Methode der MovieClip-Klasse erweckt diese Bezeichnung auf den ersten Blick den Eindruck, man könne direkt in ein BitmapData-Objekt eine externe Grafik laden. Tatsächlich verbirgt sich dahinter jedoch lediglich die Möglichkeit, zur Laufzeit aus einer Bibliothek eine Bitmap auf die Bühne einzufügen. Damit gleicht diese Methode der attachMovie()-Methode der MovieClip-Klasse. Da es sich um eine statische Methode handelt, weicht ihre Verwendung von den übrigen hier vorgestellten Methoden ab. 1. Erstellen Sie eine Standarddatei.

//–––---------- start –------------- init();

In der linken oberen Ecke taucht das in die Bibliothek importierte Bild auf. Wir importieren die benötigte Klasse  – alternativ: das gesamte Package mit import flash.display.*; – und richten Variablen ein zur Referenzierung der BitmapData-Instanz, des Behälters für diese Instanz und für den Verknüpfungsbezeichner der Grafik. Anders als bisher richten wir nicht explizit ein neues BitmapData-Objekt mit gewissen Ausmaßen ein, sondern laden unmittelbar per loadBitmap()Methode unser Bild, wobei der Verknüpfungsbezeichner als Argument übergeben wird. Die übrigen Zeilen entsprechen wieder der gewohnten Vorgehensweise: Einrichten eines MovieClips als Behälter und Zuweisen der BitmapData-Instanz. Ebenfalls etwas missverständlich ist die Bezeichnung der draw()-Methode, hinter der kein Zeichnungsprogramm steckt, wie man es in Anlehnung an die Zeichnungsmethoden der MovieClip-Klasse an-

230

nehmen könnte. Statt dessen dient draw() dazu, aus einer Vorlage, bei der es sich um eine Bitmap oder einen MovieClip handeln kann, einen beliebigen Ausschnitt zu kopieren. 5. Erweitern Sie den Variablen-Block (Fettdruck): v ar mBild:MovieClip, mKopie:MovieClip;

v ar bmBild:BitmapData, bmKopie:BitmapData;

6. Erweitern Sie im Funktions-Block die Deklaration von init() unmittelbar vor der schließenden Klammer: mBild.onPress = kopieren;

7. Fügen Sie in den Funktions-Block außerhalb der init()-Funktion folgende Deklaration ein: function kopieren() {

bmKopie  = new BitmapData(bmBild. width, bmBild.height);

mKopie  = this._parent.createEmpty MovieClip(„behBildKopie“, this._parent.getNextHighestDepth());  mKopie._x = this._width + 5;  bmKopie.draw(bmBild);

mKopie.attachBitmap(bmKopie,  mKopie.getNextHighestDepth()); }

Wenn Sie auf das linke Bild klicken, wird rechts daneben eine exakte Kopie eingeblendet. Um überhaupt eine Kopie erzeugen zu können, benötigen wir Variablen zum Referenzieren einer neuen BitmapData-Instanz und dessen Behälters, die im Variablen-Block eingerichtet werden. In init() weisen wir dem Behälter der aus der Bibliothek eingefügten Grafik ein onPress-Ereignis zu, das in der Funktion kopieren() definiert wird. Dort instanziieren wir die BitmapData-Klasse und übergeben als Argumente die Breite und Höhe der Grafik, die wir kopieren wollen. Als Behälter erstellen wir einen neuen leeren MovieClip, dessen Position der Breite der Grafik zuzüglich eines kleinen Abstands von 5 entspricht. Dadurch liegt der MovieClip rechts neben der Grafik. Würde sich diese nicht im Koordinatenursprung befinden, sondern vom linken Rand entfernt, müssten wir zur Position unseres neuen Behälters zusätzlich die horizontale Position der Grafik hinzu addieren. Die Me-

Kapitel 18  BitmapData- und Filter-Klasse

thode draw() wird für unsere Bitmap-Kopie aufgerufen und erhält als Argument lediglich den Namen des Objektes, das kopiert werden soll, hier also die BitmapData-Instanz mit der aus der Bibliothek eingefügten Grafik. Im letzten Schritt verknüpfen wir die Bitmap-Kopie mit dem MovieClip-Behälter, so dass eine Grafik zu sehen ist. Wenn wir wie im vorliegenden Beispiel lediglich einen Instanznamen bzw. eine Variable mit einer Referenz auf ein Objekt übergeben, wird das ganze Objekt kopiert, vorausgesetzt, die zur Aufnahme der Kopie erzeugte BitmapData-Instanz ist mindestens so groß wie das zu kopierende Objekt. Andernfalls wird einfach der überstehende Bereich abgeschnitten. Anstatt der Bitmap können wir auch den übergeordneten Behälter, also den MovieClip mBild, kopieren. 8. Ändern Sie in der Deklaration von kopieren() den Aufruf der draw()-Methode (Fettdruck): bmKopie.draw(this);

Optisch ergibt sich kein Unterschied beim Testen. Anstelle der BitmapData-Instanz übergeben wir nun das angeklickte Objekt, als der übergeordnete MovieClip-Behälter als Argument zum Zeichnen. Das mag auf den ersten Blick nicht sonderlich aufregend sein, hat jedoch wichtige Konsequenzen: Auf diese Weise sind wir prinzipiell in der Lage, einen Screen­ shot unserer kompletten Applikation zu erzeugen, denn schließlich stellt die Hauptzeitleiste nur einen MovieClip dar. Wird sie mit draw() gezeichnet, liegt in der dafür verwendeten BitmapData-Instanz eine exakte Kopie vor. Da das mit jedem MovieClip funktioniert, können wir eben auch jedes beliebige Element einer Anwendung auf diese Weise kopieren, solange es sich in einem MovieClip befindet. Gleichzeitig bietet uns diese Methode eine Möglichkeit, externe Grafiken zu laden, indem wir sie per load­ Movie() in einen MovieClip einfügen und anschließend per draw() kopieren. Nicht immer ist es erwünscht, eine vollständige Kopie zu erstellen. In dem Fall sieht der Aufruf der draw()-Methode etwas komplexer aus. 9. Übergeben Sie in der Deklaration von kopieren() beim Aufruf der draw()-Methode wieder wie zuvor die zu kopierende BitmapData-Instanz (Fettdruck): bmKopie.draw(bmBild);

18.4  Methoden der BitmapData-Klasse

10. Erweitern Sie den Import-Block:

import flash.geom.*;

11. Erweitern Sie den Variablen-Block:

var rKopieAusschnitt:Rectangle;



var mxOriginal:Matrix;



var cOriginal:ColorTransform; var sBlendOriginal:String;

12. Erweitern Sie im Funktions-Block die Deklaration von kopieren() unmittelbar am Anfang:

mxOriginal = new Matrix();



BlendOriginal = String(mBild.blends Mode);





cOriginal = new ColorTransform();

KopieAusschnitt = new Rectangle(0, r 0, bmBild.width/2, bmBild.height/2);

13. Ändern Sie in derselben Deklaration den Aufruf von kopieren() (Fettdruck):

mKopie.draw(bmBild, mxOriginal, cOb riginal, sBlendOriginal, rKopieAusschnitt);

Die Änderungen führen dazu, dass wir nun keine vollständige Kopie mehr erhalten, sondern nur noch das linke obere Viertel wie in Abbildung 46 gezeigt. Dieses in der Tat etwas umständliche Vorgehen ist deshalb erforderlich, weil die draw()-Methode insgesamt 6 Parameter erlaubt, von denen alle bis auf den ersten optional sind, und wir ausgerechnet den 5. Parameter benötigen. In dem Fall müssen die übrigen in irgendeiner Form definiert werden, ansonsten versagt die Methode klammheimlich den Dienst. Im Einzelnen handelt es sich um folgende Para­ meter:

231

• Quellbild, also das zu kopierende Bild, wobei es sich um eine BitmapData-Instanz oder einen MovieClip handelt; • Gewünschte Änderungen (Größe, Position, Verzerrung) in Form einer Matrix; • Farbänderungen als ColorTransformMatrix; • Ebenenmodus als String; • Ausschnitt als Rectangle; • Glättung als Boolean.

Da sowohl die Matrix- wie die ColorTransformMatrix Teil des geom-Packages sind, wird dieses am Beginn des Skripts importiert. Danach richten wir vier Variablen für die 4 zusätzlich zu übergebenden Argumente ein. In der Funktion kopieren() werden sie mit den benötigten Werten initialisiert. Allerdings ist zu bedenken, dass wir ja nur in Bezug auf den zu kopierenden Bereich eine Änderung durchführen wollen, an anderer Stelle dagegen nicht. Daher erstellen wir zunächst eine Identitätsmatrix, indem wir die benötigte Matrix-Klasse instanziieren, dabei jedoch keine Argumente übergeben. Faktisch generieren wir damit ein Objekt, das keinerlei Änderung bewirkt. Das gleiche erreichen wir, indem in sBlendOriginal derjenige Ebeneneffekt kopiert wird, über den automatisch der Behälter der Originalgrafik verfügt, nämlich „normal“. Lediglich als Rechteck legen wir einen neuen Bereich fest, der in der linken oberen Ecke beginnt und halb so breit sowie halb so hoch wie die Originalgrafik ist. Den letzten Parameter hinsichtlich einer möglichen Glättung können wir getrost ignorieren, da wir ihn nicht benötigen. Die so ermittelten Werte werden abschließend als Argumente beim Aufruf der draw()-Methode übergeben und führen dazu, dass wir ein Ausschnitt als Kopie erhalten. In unserem vorliegenden einfachen Beispiel sieht der Aufruf von draw() nach Overkill aus, was aber

Abbildung 46:  Ausschnittweises Kopieren einer Grafik

232

Kapitel 18  BitmapData- und Filter-Klasse

schlicht daran liegt, dass wir nur eine simple Änderung erreichen wollten. Erst bei größeren bzw. komplexeren Änderungen zeigt sich der Vorteil der Parameter. Denn die draw()-Methode hat den Nachteil, in der einfachen Form, in der wir sie anfangs verwendeten, keinerlei Änderungen an der Kopie zuzulassen bzw. keinerlei Änderungen der Originalgrafik beim Kopieren zu übernehmen. Wenn wir also beispielsweise bei Mausklick auf den Behälter der Originalgrafik eine Skalierung durchführen und den MovieClip anschließend kopieren würden, erhielten wir die Originalgrafik unskaliert. Würden wir dagegen die Skalierung über eine Transformationsmatrix erfassen und auf die Kopie übertragen, sähe diese wie das Original aus. Ähnlich können wir verfahren, wenn die Kopie im Gegensatz zum Original beim Kopieren skaliert werden soll, ein Vorgang, den wir uns nun beispielhaft anschauen.

Nun entsprechen die Höhe der BitmapData-Instanz und des kopierten Ausschnitts einander.

14. Fügen Sie im Funktions-Block in der Deklaration von kopieren() unmittelbar nach der Initialisierung von mxOriginal ein:

import flash.display.BitmapData;



mxOriginal.a = 2;

Wenn Sie testen, sehen Sie in der Kopie einen langgezogenen Ausschnitt aus dem Original. 15. Ändern Sie im Funktions-Block in der Deklaration von kopieren() die Initialisierung von rKopieAusschnitt (Fettdruck):

KopieAusschnitt = new Rectangle(0, r 0, bmBild.width, bmBild.height/2);

Bezüglich des Motivs sehen wir nun dasselbe wie vor Anwendung der Transformationsmatrix, aber der Ausschnitt ist genau doppelt so breit, das Motiv wird also horizontal skaliert. Wir verändern in der Matrix schlicht den Wert, der sich auf die x-Position eines Punktes beim Skalieren des betreffenden Objekts ändert. Da der Wert verdoppelt wird, vergrößern wir faktisch um 100 %, was zu einer horizontalen Skalierung führt. Abschließend bleibt noch eine kleine Änderung, denn wir erzeugen für unsere Kopie nach wie vor eine Bitmap von der gleichen Größe wie die zu kopierende Grafik. 16. Ändern Sie im Funktions-Block in der Deklaration von kopieren() die Instanziierung von bmKopie (Fettdruck):

mKopie = new BitmapData(bmBild. b width, bmBild.height/2);

18.4.5 Noise(), perlinNoise() Eher ungewöhnliche Ergebnisse können wir mit der noise() und insbesondere der perlinNoise()Methode erzielen. Mit ihrer Hilfe lassen sich nämlich Störungen in ein Bild hinein rechnen, nahezu genau so, wie wir es aus Photoshop und anderen Bildbearbeitungsprogrammen gewohnt sind. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //------------- import –------------ //––----------- vars –-------------- var bmRechteck:BitmapData; var mRechteck:MovieClip;

//----------- functions –----------- function init() {

bmRechteck  = new BitmapData(150, 150, false, 0x00FF0000); mRechteck  = this. createEmptyMovieClip(„mc“, this. getNextHighestDepth());

mRechteck.attachBitmap(bmRechteck,  this.getNextHighestDepth()); mRechteck._x  = Stage.width/2mRechteck._width/2;

 mRechteck.onPress = function() { bmRechteck.noise(100,  0, 255, 1|2|4, false); }; }

//––----------- start –------------- init();

Beim Testen erscheint am oberen Bühnenrand horizontal mittig ein rotfarbenes Rechteck, das bei Mausklick eine beliebige Einfärbung der einzelnen Pixel anzeigt. Wir importieren die benötigte BitmapData-Klasse und richten je eine Variable zur Referenzierung der betreffenden Instanz sowie des übergeordneten Movie­

18.4  Methoden der BitmapData-Klasse

Clip-Behälters ein. In der Funktion init() wird eine 150 × 150 Pixel große rotfarbene Bitmap eingerichtet, die wir nach Erstellen eines leeren MovieClips diesem Clip zuweisen, um die Grafik sehen zu können. Der MovieClip wird in der Bühnenmitte um seine halbe Breite nach links verschoben. Da der Registrierungspunkt des Clips in dessen linker oberer Ecke liegt, wird die Bitmap auf diese Weise horizontal mittig positioniert. Anschließend erhält der MovieClip ein onPress-Ereignis, in dem die noise()-Methode mit fünf Parametern aufgerufen wird. Diese üben folgende Funktion aus:

• 100, eine Ganzzahl für den Pseudo-Zufallsgenera-

tor von Flash. Bei derselben Zahl erhalten wir immer dasselbe Ergebnis; • 0, eine Ganzzahl, die den niedrigsten zulässigen Wert pro Farbkanal definiert; • 255, eine Ganzzahl, die den höchsten zulässigen Wert pro Farbkanal definiert; • 1|2|4, die betroffenen Kanäle in der für Nichtprogrammierer gewöhnungsbedürftigen Form einer Verknüpfung per logischem ODER-Operator 1|2|4|8, wobei in der Reihenfolge des Auftretens die Kanäle Rot, Grün, Blau und Alpha gemeint sind. Mindestens ein Kanal muss angegeben werden; • false, eine Boolean, die angibt, ob ein Graustufenbild (true) oder ein Farbbild (false) erzeugt werden soll. In unserem konkreten Beispiel verwenden wir als Startwert die Zahl 100. Diese Zahl wurde völlig willkürlich gewählt und Sie können gerne mit jedem beliebigen anderen Wert arbeiten. Als Minimum für den Farbkanal übergeben wir 0 und als Maximum 255, so dass alle Werte eines 8 Bit-Kanals zulässig sind, also jeder beliebige Farbwert des RGB-Spektrums möglich ist. Dabei werden die drei Farbkanäle, nicht jedoch der Alpha-Kanal verwendet. Schließlich legen wir fest, dass kein Graustufenbild erzeugt werden soll. Wir können die Störung bei Bedarf natürlich auch gezielt auf einen einzelnen Farbkanal oder den Alphakanal anwenden. 3. Ändern Sie den Aufruf der noise()-Methode (Fettdruck): b mRechteck.noise(100, 0, 255, 1, false);

233

Sie erhalten nun nur noch Störungen in verschiedenen Rottönen, da alle anderen Kanäle ausgeschaltet wurden. Wenn Sie den zulässigen Wertebereich anpassen, können Sie zusätzlich beispielsweise ganz dunkle und ganz helle Töne ausschließen. 4. Ändern Sie den Aufruf der noise()-Methode (Fettdruck): b mRechteck.noise(100, 100, 156, 1, false);

Nun steht nur noch im mittleren Spektrum ein Wertebereich zwischen 100 und 156 zur Verfügung, so dass weder ein ganz dunkler noch ein ganz heller Rotton auftreten kann. Wenn Sie mehrfach auf das Rechteck klicken, werden Sie feststellen, dass nur beim erstmaligen onPress eine Änderung eintritt. Alle nachfolgenden Aktionen bleiben ohne visuell wahrnehmbare Auswirkungen. Zwar berechnet Flash die Zufallswerte jedes Mal neu, doch sind sie miteinander identisch, da der Startwert unverändert bleibt. 5. Ändern Sie den Aufruf der noise()-Methode (Fettdruck): b mRechteck.noise(Math.round(Math.random()*100), 0, 255, 1|2|4, false);

Jeder Mausklick erzeugt nun eine neue Zufallsverteilung der Farbwerte, wobei wir wieder wie zu Anfang auf alle Farben sowie alle möglichen Werte zugreifen. Um daraus ein Graustufenbild zu generieren, reicht eine kleine Änderung aus. 6. Ändern Sie den Aufruf der noise()-Methode (Fettdruck): b mRechteck.noise(Math.round(Math.random()*100), 0, 255, 1|2|4, true);

Dadurch, dass wir an letzter Stelle ein true übergeben, werden die Farbinformationen verworfen und wir erhalten ein Graustufenbild. Komplexer, aber insgesamt vielseitiger verwendbar als die vorgestellte noise()-Methode ist die perlinNoise()-Methode, die Ken Perlins berühmten Algorithmus anwendet. Dahinter verbirgt sich die Erzeugung einer in die Fläche wirkenden, je nach verwendeten Argumenten fast schon organisch anmutenden Störung, wie wir sie mit dem Wolken-Filter in Photoshop erzeugen können. Eine derartige Methode ist elementar für die Generierung von Texturen, die in

234

Kapitel 18  BitmapData- und Filter-Klasse

zahlreichen Anwendungen und insbesondere in Spielen zum Einsatz kommen. Damit lassen sich unmittelbar in Flash Effekte wie Wolken, Nebel, Feuer, aber auch Oberflächenstrukturen wie Holz, Marmor, Stein etc. erzeugen. Wir können den bisherigen Code verwenden, da nur wenige Anpassungen notwendig sind. 7. Ändern Sie das Skript (Fettdruck): //------------ import –------------- import flash.display.BitmapData;

//–----------- vars –--------------- var bmRechteck:BitmapData; var mRechteck:MovieClip; var nStart:Number = 100;

Abbildung  47:  Erzeugung einer Störung mit Hilfe der perlinNoise()-Methode

var nOktaven:Number = 25;

//----------- functions –----------- function init() {

bmRechteck  = new BitmapData(150, 150, false, 0x00FF0000); mRechteck  = this. createEmptyMovieClip(„mc“, this. getNextHighestDepth());

mRechteck.attachBitmap(bmRechteck,  this.getNextHighestDepth()); mRechteck._x  = Stage.width/2mRechteck._width/2;

 mRechteck.onPress = function() {

 bmRechteck.perlinNoise(150, 150, nOktaven, nStart, true, true, 1 | 2 | 4, false, null); }; }

//----------- start –--------------- init();

Erneut erzeugen wir ein rotes, horizontal positioniertes Rechteck, das diesmal jedoch bei Mausklick eine wolkenartige Struktur anzeigt, wie in Abbildung  47 zu sehen. Im Variablen-Block ergänzen wir zwei Variablen, um einen Startwert für den Zufallsgenerator von Flash und einen Wert für die Anzahl der Störungsfunktionen zu initialisieren. Beim Mausklick wird die perlinNoise()-Methode mit folgenden Argumenten aufgerufen:

• 150, die Störungshäufigkeit in horizontaler Rich-

tung und • 150, die Störungshäufigkeit in vertikaler Richtung. Wenn die Werte nicht miteinander identisch sind, wird, vereinfacht formuliert, die Störung (scheinbar) in die Richtung mit dem größeren Wert skaliert; • nOktaven, Anzahl der verwendeten Störungsfunktionen. Je höher der Wert, desto detaillierter fällt die resultierende Störung aus, die benötigte Rechenleistung steigt jedoch ebenfalls an; • nStart, Startwert oder seed (s. noise()-Methode), um Zufallswerte für die Störung zu generieren; • true, Glättung der Bildränder, um (theoretisch) einen nahtlosen Übergang zu ermöglichen, der bei der Verwendung der Störung als kachelbare Textur notwendig wäre; • true, Erzeugung einer fraktalen Störung mit weichen Übergängen zwischen den Farben; • 1|2|4, betroffene Farbkanäle (optional); • false, Graustufenbild (optional); • null, Array mit Punkten, um die Übergänge zwischen den einzelnen Oktaven zu definieren (optional). Dieses Argument wird i. d. R. nur dann benötigt, wenn eine Animation mit Hilfe der perlinNoise()-Methode erstellt werden soll (Flammen, Wolken, Wellen etc). Das letzte Argument können Sie auch schlicht weg lassen anstatt null zu übergeben. In beiden Fällen erhalten wir dasselbe Ergebnis.

18.6  Filter

Da wie bei der noise()-Methode aufgrund eines übergebenen Startwerts eine Zufallsverteilung errechnet wird, erhalten wir jeweils dann neue Störungen, wenn der Startwert variiert. 8. Ändern Sie den Aufruf der perlinNoise()-Methode (Fettdruck): b mRechteck.perlinNoise(150, 150, nOktaven, Math.round(Math. random()*nStart), true, true, 1 | 2 | 4, false, null);

Jeder Mausklick erzeugt nun eine andere Störung. Wir verwenden den in nStart initialisierten Wert, um eine Zufallszahl zu erzeugen, die zwischen 0 und 100 liegt. Damit variieren wir den von Flash verwendeten Ausgangswert, um die Störung zu berechnen und erhalten so jeweils ein anderes grafisches Ergebnis. Eine andere Art von Änderung erzielen wir, wenn für nOktaven verschiedene Werte vorliegen. 9. Ändern Sie im Variablen-Block die Initialisierung von nOktaven (Fettdruck): var nOktaven:Number = 2;

Als Ergebnis erhalten Sie bei Mausklick ein scheinbar stark weichgezeichnete Störung, die dadurch zustande kommt, dass wir die Anzahl der Störungsfunktionen auf einen sehr niedrigen Wert reduziert haben. Die Form der Störung lässt sich zusätzlich durch die beiden ersten beim Aufruf der Methode übergebenen Argumente festlegen, wobei Sie nicht zwangsläufig wie in unserem Beispiel einen Wert wählen müssen, der den Ausmaßen der betroffenen BitmapData-Instanz entspricht. 10. Initialisieren Sie nOktaven wieder mit dem ursprünglichen Wert (Fettdruck):

var nOktaven:Number = 25;

11. Ändern Sie den Aufruf der perlinNoise()-Methode (Fettdruck):

mRechteck.perlinNoise(15, b 15, nOktaven, Math.round(Math. random()*nStart), true, true, 1 | 2 | 4, false, null);

Die resultierende Störung wirkt kleinflächiger und detaillierter. In einem mit diesen Werten erzeugten Graustufenbild entsteht der Eindruck vieler kleiner Wolken.

235

12. Ändern Sie den Aufruf der perlinNoise()-Methode (Fettdruck):

mRechteck.perlinNoise(150, b 15, nOktaven, Math.round(Math. random()*nStart), true, true, 1 | 2 | 4, false, null);

Da der für die horizontale Richtung übergebene Wert denjenigen für die vertikale Richtung um das 10-fache übersteigt, wird die Störung sehr stark in die Länge gezogen, wodurch wir eine Art horizontaler Verlauf von Linien verschiedener Farbe und Stärke erhalten.

18.5 Optimierung mit Hilfe von BitmapData Da eine Bitmap-Grafik im Gegensatz zur VektorGrafik lediglich aus Daten einer Tabelle erstellt wird, mithin eine prozessorintensive Berechnung entfällt, besteht die Möglichkeit, mit ihrer Hilfe den FlashPlayer beim Rendern zu entlasten. Obwohl es sich hier um eine nur für Fortgeschrittene interessante Technik handelt, sei abschließend ein Hinweis darauf erlaubt. An anderer Stelle wird dieses Thema ausführlicher behandelt. Einer der ersten, der das in dieser Technik steckende Potential bereits mit Flash 8 genial ausschöpfte, war Grant Skinner. Er programmierte eine Art Pflanzengenerator, der trotz der für den damals recht schwachbrüstigen Flash-Player zehrenden Prozessorlast eine exzellente Bildwiederholrate und damit eine flüssige Animation erzielen konnte. Abbildung 48 zeigt einen Ausschnitt aus dieser Animation. Näheres dazu finden Sie auf der Blog-Seite von Skinner sowie auf der Website von Adobe jeweils unter dem Stichwort „Vine-G“ sowie „Varicose“.

18.6 Filter Nicht zuletzt mit den Filtern hält die große Welt der Photoshop-Effekte Einzug in Flash. Sie erleichtern den Workflow, da man nun unmittelbar in Flash jene Effekte realisieren kann, die ansonsten eine externe Bildbearbeitung voraussetzten. Da die Filter geskriptet werden, sind die resultierenden Dateien kleiner als

236

Kapitel 18  BitmapData- und Filter-Klasse

Grundlagen des Skripting befassen (aber es kann ja nicht schaden, mal den Mund wässrig zu machen).

18.6.1 Bevel-Filter Der Bevel-Filter erzeugt einen Geschliffen-Effekt, wie er beispielsweise bei Schaltflächen verwendet wird, um ihnen ein leicht dreidimensionales Aussehen zu verleihen.

Abbildung 48:  Skinners „Pflanzengenerator“

wenn sie von vorneherein Bestandteil der Grafiken wären, und der Anwender kann zur Laufzeit der Applikation mit ihnen interagieren. Von den 9 angebotenen Filtern lassen sich 7 per Eigenschaftsfenster in der Autorenumgebung und 2 zusätzliche nur per ActionScript steuern. Es handelt sich dabei um:

• Bevel • Blur • DropShadow • Glow • GradientBevel • GradientGlow • ColorMatrix (nur per AS) • Convolution • DisplacementMap (nur per AS) Da die Filter im filters-Package enthalten sind, muss dieses bzw. die einzelne benötigte Klasse erst am Anfang importiert werden, bevor man die gewünschten Methoden verwenden kann. Sie sind insgesamt recht mächtig und ermöglichen insbesondere in der Kombination miteinander bzw. mit der BitmapData-Klasse beeindruckende Effekte. Um nur ein einziges Highlight zu nennen: Basierend auf dem DisplacementMap-Filter kann man in Flash Kai Krauses unvergleichliches Goo nachbasteln, ein Programm, das die beliebige Verzerrung von Bitmap-Grafiken ermöglichte. Leider müssen solche und weitere Effekte einem anderen Buch vorbehalten bleiben, da wir uns hier nur mit den

1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf ein lebensechtes Grau (0xcccccc). 3. Erstellen Sie auf objects an beliebiger Position ein Rechteck mit leicht abgerundeten Ecken (80 × 25, Füllung 0x0099ff, Rand 1 Pixel und schwarz). 4. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcSchalt, Instanzname schalt). 5. Weisen Sie actions folgendes Bildskript zu: //-------------- import –----------- import flash.filters.*;

//–––----------- vars –------------- var mObjekt:MovieClip = schalt; var fFilter;

//------------- functions –----------

function init(pFilter:Function):Void {  mObjekt._x = Stage.width/2;  mObjekt._y = 200;  pFilter();

 mObjekt.filters = [fFilter]; }

function bevel():Void {

fFilter  = new BevelFilter(3, 45, 0x00ccff, 0.7, 0x0033ff, 0.7, 3, 2, 3, 3, „inner“, false);  trace(„Bevel-Filter“); }

//------------- start –------------- init(bevel);

Wenn Sie testen, taucht in der Bühnenmitte eine Schaltfläche mit einem leichten 3D-Effekt auf, wie in Abbildung 49 zu sehen.

18.6  Filter

237

Abbildung 49:  Bevel-Filter

Abbildung 50:  Bevel-Filter mit maximaler Stärke

Wir importieren das filters-Package mit den benötigten Filtern, legen eine Variable zur Referenzierung des konkret verwendeten Filters sowie zur Aufnahme desjenigen Objekts, dem wir den betreffenden Filter zuweisen werden, an. In der Position init() positionieren wir unseren MovieClip horizontal mittig und vertikal auf einen willkürlich gewählten Wert. Um einfach alle in den nachfolgenden Abschnitten eingerichtete Filter verwenden zu können, weisen wir init() den Parameter pFilter zu, bei dem es sich jeweils um eine Funktion handeln wird, die einen konkreten Filter einrichtet. Dieser Parameter wird als Funktion aufgerufen und der infolgedessen definierte Filter unserem MovieClip zugewiesen. In der Funktion bevel() definieren wir den gewünschten Filter und lassen uns eine entsprechende Information im Nachrichtenfenster ausgeben. Die init()-Funktion rufen wir abschließend mit dem Filter als Argument auf. Selbst wenn Sie sich in einem weniger fortgeschrittenen Alter wie der Autor befinden, wird die enorme Anzahl an Argumenten, die man dem Konstruktor des Bevel-Filters mit auf den Weg gibt, Ihre mnemotechnischen Fähigkeiten bis an die Grenzen belasten. Glücklicherweise bietet sich eine andere Schreibweise an, die zwar nach mehr Tipparbeit verlangt, aber erheblich übersichtlicher ist. Die benötigten Argumente lassen sich nämlich direkt als Eigenschaften einer Filter-Instanz festlegen.

fFilter.blurX = 3;

6. Ändern Sie in der Deklaration von bevel() die Festlegung der Filtereigenschaften ab der öffnenden Klammer wie folgt: fFilter = new BevelFilter();

fFilter.blurY = 3;

fFilter.strength = 2; fFilter.quality = 3;

fFilter.type = „inner“;

fFilter.knockout = false;

Das Ergebnis entspricht optisch dem vorhergehenden Beispiel. Allerdings haben wir nun beim Skripten eher eine Vorstellung davon, was ein konkreter Wert bedeutet, den wir für den Filter festlegen. Da alle Parameter optional sind, können Sie beliebige Eigenschaften, die Sie nicht explizit setzen wollen, einfach weg lassen. Flash übernimmt dann festgelegte Standardwerte. Die einzelnen Eigenschaften und die zulässigen Datentypen sind selbstredend, so dass wir sie nicht weiter erläutern wollen. Als Hinweis mag genügen, dass die Werte für die Deckkraft von 0.0 bis 1.0 reichen, wie wir es bereits bei in früheren Kapiteln kennen gelernt haben. Als type sind zulässig „inner“, „outer“ und „full“ (identisch mit „inner“ und „outer“ des Filters im Eigenschaftsfenster). Für strength können Sie Werte von 0 bis 255 vergeben, wobei mit der Stärke natürlich die Ausprägung des Effekts steigt. Wenn Sie im vorliegenden Beispiel dieser Eigenschaft den höchstmöglichen Wert zuweisen, erhält das Rechteck eine comicmäßige Anmutung, wie in Abbildung 50 zu erkennen. In den meisten Fällen – das gilt übrigens auch für die anderen Filter, soweit sie über dieselbe Eigenschaft verfügen  – machen sehr niedrige Werte eher Sinn. Der Standardwert lautet daher auch 1.

fFilter.distance = 3; fFilter.angle = 45;

fFilter.highlightColor = 0x00ccff; fFilter.highlightAlpha = 0.7;

fFilter.shadowColor = 0x0033ff; fFilter.shadowAlpha = 0.7;

18.6.2 Blur-Filter Der Weichzeichnungs-Filter dürfte vor allem als Gausscher Blur ein Begriff sein, stellt er doch in Photo­shop ein wichtiges Element zahlreicher Effekte dar. Das

238

Flash-Pendant entspricht allerdings nicht wirklich diesem berühmten Namensvetter; er lässt sich jedoch über den Convolution-Filter mit einer 9 × 9 Matrix nachbilden. Dessen ungeachtet bringt der Blur-Filter in Flash in den meisten Fällen gute Ergebnisse. 7. Erweitern Sie den Funktions-Block um folgende Deklaration: function blur(){

 fFilter = new BlurFilter(2,2,3);  trace(„Blur-Filter“); }

8. Ändern Sie den Aufruf von init() (Fettdruck): init(blur);

Unser Rechteck wird leicht weich gezeichnet. Der Blur-Filter arbeitet recht unspektakulär mit nur drei bescheidenen Argumenten, deren erste beiden sich auf die Weichzeichnung in horizontaler und vertikaler Richtung beziehen, während der letzte die Qualität beim rendern betrifft. Wollen Sie statt der Kurzform mit den betreffenden Eigenschaften arbeiten, könnten Sie diese so ansprechen wie im Beispiel des BevelFilters: fFilter.blurX, fFilter.blurY und fFilter.quality. Das gilt für alle anderen Filter, soweit sie über eine Ausdehnung im Raum und eine Darstellungsqualität verfügen. Angesichts der nur wenigen Argumente, deren Bedeutung sich sogar der Autor auswendig merken kann, wollen wir auf eine Einrichtung des Filters anhand der explizit genannten Eigenschaften verzichten.

Kapitel 18  BitmapData- und Filter-Klasse

10. Ändern Sie den Aufruf von init() (Fettdruck):

init(schatten);

Ein herrlicher Schlagschatten ziert Ihr Rechteck. Da wir es hier wieder mit einer Vielzahl an Argumenten zu tun haben, wollen wir bei der Einrichtung die jeweiligen Eigenschaften explizit nennen. 11. Ändern Sie in der Deklaration von schatten() die Festlegung der Filtereigenschaften ab der öffnenden Klammer wie folgt:

fFilter = new DropShadowFilter();



fFilter.angle = 45;



fFilter.distance = 3;

fFilter.color = 0x666666; fFilter.alpha = 0.8; fFilter.blurX = 3; fFilter.blurY = 3;

fFilter.strength = 2; fFilter.quality = 3;

fFilter.inner = false;

fFilter.knockout = false;

fFilter.hideObject = false; trace(„DropShadow-Filter“);

Wenn Sie die Werte für distance und angle auf 0 setzen, erhalten Sie eine Art Glüh-Effekt, wie er auch mit einem speziellen, nachfolgend beschriebenen Filter realisiert werden kann.

18.6.4 Glow-Filter 18.6.3 DropShadow-Filter Den klassischen Schlagschatten kann man mit dem DropShadow-Filter herstellen. 9. Erweitern Sie den Funktions-Block um folgende Deklaration: function schatten() {

 fFilter = new DropShadowFilter  (3,45,0x666666,0.8,3,3,2,3, false,false,false);  trace(„Blur-Filter“); }

Mit diesem Filter erzeugen Sie ein Glühen um Ihr Objekt herum. 12. Erweitern Sie den Funktions-Block um folgende Deklaration:

function glow() {



 trace(„Glow-Filter“);





fFilter  = new GlowFilter (0x0000ff,0.8,5,5,2,3,false,false); }

13. Ändern Sie den Aufruf von init() (Fettdruck):

init(glow);

18.6  Filter

239

Ein bläulicher Glanz umhüllt unser Rechteck und erfüllt es mit farblichem Stolz. 14. Ändern Sie in der Deklaration von glow() die Festlegung der Filtereigenschaften ab der öffnenden Klammer wie folgt:

fFilter = new GlowFilter();



fFilter.alpha = 0.8;



fFilter.color = 0x0000ff; fFilter.blurX = 5;

Abbildung 51:  GradientBevel-Filter

fFilter.blurY = 5;



fFilter = new GradientBevelFilter();

fFilter.quality = 3;



fFilter.angle = 45;

fFilter.strength = 2;



fFilter.inner = false;



fFilter.knockout = false;

Der GradientBevel-Filter kombiniert den normalen Bevel-Filter mit einem Farbverlauf. 15. Erweitern Sie den Funktions-Block um folgende Deklaration:





Filter.colors = [0x0066ff, f 0x0000ff];



fFilter.alphas = [1, 1];



fFilter.blurX = 5;



18.6.5 GradientBevel-Filter

fFilter.distance = 5;



fFilter.ratios = [0, 255]; fFilter.blurY = 5;

fFilter.strength = 2; fFilter.quality = 3;

fFilter.type = „inner“;

fFilter.knockout = false;

function gradientBevel() {

fFilter  = new GradientBevelFilter(5, 45, [0x0066ff, 0x0000ff], [50, 100], [0, 255], 5, 5, 2, 3, „inner“, false);  trace(„GradientBevel-Filter“); }

18.6.6 GradientGlow-Filter Bei diesem letzten Filter erhält der Glow-Effekt einen Farbverlauf.

16. Ändern Sie den Aufruf von init() (Fettdruck):

18. Erweitern Sie den Funktions-Block um folgende Deklaration:





function gradientGlow() {



 trace(„GradientGlow-Filter“);

init(gradientBevel);

Als Ergebnis erhalten wir recht weiche 3D-Kanten, wie in Abbildung 51 gezeigt. Da es sich hier um einen Verlauf handelt, müssen mehrere Farbwerte, die jeweils zugehörige Deckkraft und die Position des einzelnen Farbwerts im gesamten Verlauf angegeben werden. Dadurch wird die Verwendung von Argumenten leider vollends unleserlich. 17. Ändern Sie in der Deklaration von gradientBevel() die Festlegung der Filtereigenschaften ab der öffnenden Klammer wie folgt:





fFilter  = new GradientGlowFilter(0, 45, [0x0033ff,0x0000ff], [0.3, 1], [0, 128], 3, 3, 2, 3, „outer“, false); }

19. Ändern Sie den Aufruf von init() (Fettdruck):

init(gradientGlow);

Das Rechteck glüht nicht zuletzt aufgrund des mäßig attraktiven Farbverlaufs etwas verlegen vor sich hin.

240

Kapitel 18  BitmapData- und Filter-Klasse

20. Ändern Sie in der Deklaration von gradientBevel() die Festlegung der Filtereigenschaften ab der öffnenden Klammer wie folgt:

fFilter = new GradientGlowFilter();



fFilter.angle = 45;



fFilter.distance = 0;

fFilter.colors = [0x0033ff,0x0000ff];

fFilter.alphas = [0.3, 1];



fFilter.blurX = 3;



fFilter.ratios = [0, 128]; fFilter.blurY = 3;

fFilter.strength = 2; fFilter.quality = 3;

fFilter.type = „outer“;

fFilter.knockout = false;

Die Argumente bzw. Eigenschaften entsprechen exakt denjenigen des GradientBevel-Filters.

Blau sowie auf die Deckkraft. Auf der rechten Seite der Abbildung ist eine Identitäts-Matrix erfasst, die zu keinerlei Änderungen führt. Sie kann auch dazu verwendet werden, um durchgeführte Änderungen rückgängig zu machen. 1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf ein lebensechtes Grau (0xcccccc). 3. Importieren Sie in die Bibliothek eine beliebige Grafik. Wir wählen hier beispielhaft erdhorn1.jpg. 4. Fügen Sie die Grafik in der Ebene objects auf der Bühne an beliebiger Position ein. 5. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcBild, Instanzname bild, Registrierungspunkt links oben). 6. Weisen Sie actions folgendes Bildskript zu: //------------ import –------------- import flash.filters.*;

//–----------- vars –--------------- var mObjekt:MovieClip = bild; var fFilter;

18.6.7 ColorMatrix-Filter Von den bisher vorgestellten Filtern unterscheiden sich die nachfolgenden drei entweder im Aufbau (ColorMatrix und Convolution) und/oder in der Auswirkung (DisplacementMap) deutlich. Der ColorMatrix-Filter ermöglicht es mit Hilfe einer 4 × 5-Matrix verschiedene Transformationen von Farbe und Deckkraft durchzuführen. So lässt sich z. B. die Intensität eines einzelnen Farbtons gezielt steuern. Eine derartige Matrix bezeichnet man auch als Kernel; sie ist in Abbildung 52 dargestellt. Die Zahlenreihen beziehen sich, betrachtet von oben nach unten, auf die Farbkanäle Rot, Grün und

var aColors:Array = [];

//----------- functions –------------

 function init(pFilter:Function):Void { mObjekt._x  = Stage.width/2-mObjekt. _width/2;  mObjekt._y = 100;  pFilter();

 mObjekt.filters = [fFilter]; }

function colorMatrix() {

aColors  = [0.2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; fFilter  = new ColorMatrixFilter(aColors);

 mObjekt.filters = [fFilter]; }

//------------ start –-------------- init(colorMatrix);

Abbildung 52:  4 × 5-Matrix des ColorMatrix-Filters

Beim Testen taucht horizontal mittig die gewählte Grafik auf. An ihr ist keinerlei Änderung festzustellen, was schlicht daran liegt, dass wir eine IdentitätsMatrix zugewiesen haben. Diese Werte werden mit dem Farbwert der betroffenen Pixel multipliziert. Da

18.6  Filter

241

in den Farbkanälen keine Änderung vorgenommen wurde, ändert sich auch nichts in der Grafik. Bevor wir in der Matrix mit anderen Werten arbeiten, um beispielsweise eine Färbung herbei zu führen, wollen wir die Schreibweise beim Einrichten des Filters vereinfachen.

Ihre Grafik weist nun einen extremen Rotstich auf. Wir haben zwar formal den Rotanteil nicht verändert, aber den Grün- und Blauanteil reduziert, so dass eine extreme Rotfärbung resultiert.

7. Ersetzen Sie in der Funktion colorMatrix() die Einrichtung von aColors durch:

18.6.8 Convolution-Filter

a Colors = aColors.concat([1, 0, 0, 0, 0]);

Über den Convolution-Filter werden einzelne Pixel mit den benachbarten Pixeln kombiniert, um Effekte wie Kantenhervorhebung, Bildschärfung, Weichzeichnung etc. zu erhalten. Er verwendet eine n x m-Matrix, in der die Verrechnung einzelner Pixel miteinander definiert wird. Aufgrund der prinzipiell beliebigen Größe der Matrix bietet dieser Filter eine geradezu überwältigende Fülle an Einstellmöglichkeiten.

a Colors = aColors.concat([0, 1, 0, 0, 0]); a Colors = aColors.concat([0, 0, 1, 0, 0]); a Colors = aColors.concat([0, 0, 0, 1, 0]);

Die gewünschte Matrix wird in einem Array abgebildet, das 20 Elemente umfasst. Schreiben wir sie wie in der vorherigen Version einfach hintereinander, ist nur schwer erkennbar, welches Element welche Funktion hat. Daher haben wir sie im nächsten Schritt über die concat()-Methode in das anfangs eingerichtete Array eingefügt, wobei wir jeweils 5 Elemente pro Farbkanal sowie für die Deckkraft erfassen. Die Farbwerte aller Pixel im betroffenen Bild werden folgendermaßen errechnet:

9. Erweitern Sie den Funktions-Block:

Rotkanal: 1 * Rotanteil Bild + 0 * Grünanteil + 0 * Blauanteil Bild + 0 * Alpha Rot

10. Ändern Sie den Aufruf von init() (Fettdruck):

Grünkanal: 0 * Rotanteil Bild + 1 * Grünanteil + 0 * Blauanteil Bild + 0 * Alpha Grün

Wer Spektakuläres erwartet hat, wird vielleicht ein bisschen enttäuscht – schließlich ändert sich nichts. Wir legen eine 3 × 3-Matrix fest, hier definiert über dreimaligen Aufruf der concat()-Methode. Danach richten wir einen Convolution-Filter ein, dem wir als Parameter die x- und y-Dimension der Matrix bzw. die Anzahl der Spalten und Zeilen, die eigentliche Matrix sowie einen Divisor  – dieser Wert ist optional – übergeben. Ohne auf alle Details eingehen zu wollen, sind für uns der Wert in der Mitte (bei einer 3 × 3-Matrix der fünfte Wert), eine gewisse Symmetrie der übrigen Werte und die Summe aller Werte bei einem Divisor von 1 wichtig. Die Zahlen legen fest, mit welchen Farbwerten der Farbwert des in der Mitte der Matrix angesprochenen aktuellen Pixels zu verrechnen ist. In unserem Beispiel bedeutet dies, dass wir den momentanen Farbwert mit 1 multiplizieren, ihn also

Blaukanal: 0 * Rotanteil Bild + 0 * Grünanteil + 1 * Blauanteil Bild + 0 * Alpha Blau Alphakanal: 0 * Rotanteil Bild + 0 * Grünanteil + 0 * Blauanteil Bild + 1 * Alphakanal Der Wert der letzten Spalte wird jeweils hinzu addiert, kommt aber nur in besonderen Fällen zum Tragen und muss uns hier nicht weiter interessieren. 8. Ändern Sie die Werte für den Grün- und Blaukanal im zweiten und dritten Aufruf der concat()-Methode (Fettdruck): a Colors = aColors.concat([0, 0.1, 0, 0, 0]);  aColors = aColors.concat([0, 0, 0.1, 0, 0]);

function convolution() {

 aColors = aColors.concat([0, 0, 0]);  aColors = aColors.concat([0, 1, 0]);  aColors = aColors.concat([0, 0, 0]); fFilter  = new ConvolutionFilter(3, 3, aColors, 1); }



init(convolution);

242

Kapitel 18  BitmapData- und Filter-Klasse

insofern unverändert übernehmen, und die Farbwerte der umgebenden Pixel mit 0 multiplizieren und mit dem aktuellen Pixel verrechnen. Faktisch ergibt sich daraus keine Änderung. Die konkrete Auswirkung einer Matrix lässt sich bei einem Divisor von 1 partiell abschätzen anhand der Summe aller Zahlen: Liegt sie über 1, resultiert eine hellere, bei unter 1 eine dunklere Grafik. 11. Ändern Sie den mittleren Wert im zweiten Aufruf der concat()-Methode (Fettdruck):

aColors = aColors.concat([0, 2, 0]);

Die Grafik wird nun erheblich heller dargestellt als zuvor, da wir den aktuellen Farbwert des betroffenen Pixels mit 2 multiplizieren. Dasselbe gilt natürlich auch für jeden beliebigen anderen Pixel. 12. Ändern Sie die Werte im zweiten Aufruf der concat()-Methode (Fettdruck):

aColors = aColors.concat([1, 1, 0]);

Wir erhalten wie zuvor eine starke Aufhellung des Bildes. 13. Ändern Sie die Werte im zweiten Aufruf der concat()-Methode (Fettdruck):

aColors = aColors.concat([0, 0, 0]);

Unsere Grafik wird komplett schwarz, da wir alle Farbwerte mit 0 multiplizieren und so als Ergebnis eben 0 erhalten. Möchten Sie zwar eine Änderung bewirken, dabei jedoch die bestehende Helligkeit erhalten, sorgen Sie mit Hilfe des Divisors dafür, dass die Summe der Matrix 1 ergibt. 14. Ändern Sie die Aufrufe der concat()-Methode (Fettdruck):

aColors = aColors.concat([1,2,1]);



aColors = aColors.concat([1,2,1]);



aColors = aColors.concat([0,1,0]);

Flash stellt die Grafik so stark aufgehellt dar, dass nahezu nichts mehr zu erkennen ist. 15. Ändern Sie bei der Einrichtung des Filters den Divisor (Fettdruck):

Filter = new ConvolutionFilter(3, f 3, aColors, 9);

Damit realisieren wir einen leichten Blur-Effekt, ohne jedoch die Luminanz zu ändern. Abschließend ein Beispiel für einen weiteren Effekt, den wir von Bildbearbeitungsprogrammen her gewohnt sind. 16. Ändern Sie die Werte in der Matrix (Fettdruck):

Colors = aColors.concat([-1, -1, a -1]); Colors = aColors.concat([-1, 9, a -1]);

Colors = aColors.concat([-1, -1, a -1]);

17. Setzen Sie den Divisor zurück auf 1. Sie erhalten eine deutliche Hervorhebung der Kanten.

18.6.9 DisplacementMap-Filter Vielleicht der am schwersten zu verstehende Filter ist die DisplacementMap, die, grob gesprochen, Pixel in einem Bild auf der Basis von Farbinformationen oder der Deckkraft in einem anderen Bild verschiebt. Es fehlt hier leider der Raum, um sich näher mit den dahinter liegenden Berechnungen zu beschäftigen. Wer möchte, kann sich in der Flash-Hilfe die recht komplexe Formel anschauen, die dabei zur Anwendung kommt. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek eine beliebige Grafik. Wir wählen hier beispielhaft erdhorn1.jpg. 3. Fügen Sie die Grafik in der Ebene objects auf der Bühne an beliebiger Position ein. 4. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcBild, Instanzname bild, Registrierungspunkt links oben). 5. Weisen Sie actions folgendes Bildskript zu: //------------- import –------------ import flash.display.*; import flash.filters.*; import flash.geom.*;

//––---------- vars –--------------- var mObjekt:MovieClip = bild; var bmBild:BitmapData; var fFilter;

18.6  Filter

243

//----------- functions –----------- function init():Void {

bmBild  = new BitmapData(mObjekt._ width, mObjekt._height); mObjekt._x  = Stage.width/2-mObjekt._width/2;  mObjekt._y = 100;

 mObjekt.onPress = displace;  mObjekt.onPress(); }

function displace() {

bmBild.noise(Math.round(Math.ran dom()*100));

fFilter  = new DisplacementMapFilter(bmBild, new Point(0, 0), 1, 1, 5, 5);  this.filters = [fFilter]; }

//-------------- start –------------ init();

Die einzelnen Pixel werden beim Testen horizontal und vertikal verschoben, so dass ein Verfremdungseffekt auftritt, der in Abbildung 53 zu sehen ist. Mit jedem Klick auf das Bild wird eine neuer zufallsbedingter Verschiebungsfilter zugewiesen. Wir benötigen drei verschiedene Klassen, die wir am Anfang importieren. Neben zwei schon in den vorhergehenden Übungen deklarierte Variablen wird eine weitere erstellt, die dazu dienen wird, eine geskriptete Bitmap aufzunehmen. Die Funktion init() legt diese Bitmap mit der Höhe und Breite des zu ändernden Bildes an. Sie wird benötigt, um als Verschiebungsmatrix für den Filter zu dienen. Da wir sie nicht anzeigen wollen, können wir an dieser Stelle darauf verzichten, einen MovieClip zur Darstellung der BitmapDaten einzurichten, wie wir es oben kennen gelernt haben. Wir positionieren wie gewohnt das zu ändernde Bild und weisen ihm einen Mausklick zu, bei dem die Funktion displace aufgerufen wird. Damit sie bereits direkt vor einer Aktion des Anwenders zur Ausführung kommt, rufen wir das onPress-Ereignis auf. Die Funktion displace() erstellt ein simples farbiges Störungsbild, dem wir als Startwert eine Zufallszahl zwischen 0 und 100 zuweisen. Dadurch generiert Flash bei jedem Funktionsaufruf eine andere

Abbildung 53:  DisplacementMap-Filter

zufällige Störung. Anschließend richten wir den Filter ein, der dabei folgende Argumente erhält:

• bmBild, die Bitmap-Instanz, in der die für eine

Verschiebung benötigten Werte (Farbe, Deckkraft) enthalten sind; • new Point(0, 0), der Startpunkt des Effekts auf der davon betroffenen Grafik; • 1, der Kanal in bmBild, der für eine Verschiebung in x-Richtung verwendet wird; • 1, der Kanal in bmBild, der für eine Verschiebung in y-Richtung verwendet wird. Die Zahlen 1, 2 und 4 beziehen sich auf die RGB-Farbkanäle, 8 meint den Alphakanal; • 5, 5, die horizontale und vertikale Skalierung des Verschiebungseffekts. Weitere Parameter sind optional und werden von uns nicht verwendet. Da wir in der noise()-Methode jeweils zufällige Farbpixel erzeugen, aber für die Skalierung einen relativ niedrigen Wert wählen, resultiert eine Verschiebung, die nicht so groß ist, dass wir kein Motiv mehr erkennen können. Ändern lässt sich das, indem entweder gezielt andere Farbwerte gewählt werden – je näher die Werte an 128 liegen, desto geringer die Verschiebung – und/oder die Skalierungsfaktoren erhöht werden. Gerne können Sie mehrere Filter miteinander kombinieren, wobei sie in der Reihenfolge der Zuweisung abgearbeitet werden. Sollen aufgrund einer User-Inter­ aktion Filtereigenschaften geändert werden, muss der betreffende Filter erneut zugewiesen werden.

19

Sound

Generell unterscheidet man zwischen Musik, Audio und Sprache. Musik dürfte selbsterklärend sein. Ihre Hauptfunktion besteht darin, eine bestimmte Atmosphäre zu schaffen. Insofern stellt sie das auditive Pendant zu ästhetischen Grafiken dar. Audio bezieht sich auf alle Arten von Geräuschen, deren Funktionen sowohl ästhetischen wie auch informativen Charakter haben können. Oft verwendet man derartige Sounds, um dem User bei der Aktivierung von Schaltflächen ein Feedback – etwa das berühmte Klickgeräusch – zu geben. Sie lassen sich jedoch auch einsetzen, um visuelle oder textuell vermittelte Informationen zu untermalen, etwa Maschinengeräusche bei einer Infoseite zu einem technischen Thema. Sprechersound wird in der überwiegenden Mehrzahl der Fälle eingesetzt, um Informationen zu vermitteln. Im Gegensatz zu den übrigen Medien gilt für Sound i. A. die Regel, dass man keine zentrale Information nur auditiv vermittelt, da Sie nie wissen können, ob die Soundausgabe auf dem Zielrechner aktiviert oder deaktiviert ist. Zwar lässt sich herausfinden, ob audiofähige Hardware und Software vorhanden ist. Dazu müssen Sie lediglich eine betreffende Skriptabfrage einfügen: if(System.capabilities.hasAudio){ //Soundaufruf; }

Die Abfrage ergibt abhängig von der Ausstattung des Zielrechners true oder false. Korrespondierend dazu erteilt Flash Auskunft über das Vorhandensein von benötigter Software mit: if(System.capabilities.hasAudioEncoder){ //Soundaufruf; }

bzw. if(System.capabilities.hasMP3){ //Soundaufruf; }

Da heutzutage in der überwiegenden Mehrzahl Geräte mit den entsprechenden Fähigkeiten ausgestattet sind, erscheint diese Abfragemöglichkeit nicht wirklich hilfreich. Denn sie verschweigt, ob die gefundene Hardware auch tatsächlich aktiviert wurde. Ein Lautsprecher nützt wenig, wenn der Anwender ihn aus welchem Grund auch immer ausgeschaltet hat. Was so banal klingt, hat einen ernsthaften Hintergrund, wie der Autor selbst erfahren musste: In einem CBT (Computer Based Training) wurde die Bedienung des recht komplexen Programms ausschließlich auditiv vorgestellt, was sich beim Einsatz in einem Großraumbüro bei ausgeschalteten Lautsprechern und dem Fehlen von Kopfhörern als fatal herausstellte!

19.1 Sound abspielen und stoppen Flash unterscheidet zunächst einmal unabhängig von der konkreten Funktionalität des verwendeten Sounds zwischen Streaming- und Ereignis-Sound. Ersterer wird bereits während des Ladevorgangs abgespielt. Erst lädt Flash einen kleinen Teil in einen Puffer, anschließend wird er wiedergegeben. Die Größe des Puffers lässt sich mit der globalen Eigenschaft _soundbuftime steuern. Der Standardwert beträgt 5 Sekunden, d. h. Flash speichert 5 Sekunden, bevor das Abspielen beginnt. Wer mit einem anderen Wert arbeiten möchte, muss lediglich eine entsprechende Zuweisung definieren, z. B.:

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

245

246

_soundbuftime = 10;

Die Zahl entspricht der gewünschten Sekundenlänge. Selbstverständlich erfolgt diese Zuweisung vor dem Aufruf des Streamings. Sinn eines derartigen Sounds ist es, eine größere Datei verwenden zu können, ohne diese in den Flashfilm integrieren zu müssen. Damit bieten sich vor allem Sprache und Musik als Verwendungszweck an, während unser berühmte Klicksound sowohl aufgrund seiner geringen Größe wie auch aufgrund der häufigeren Verwendung nicht geeignet wäre. Die zweite Kategorie, der Ereignissound, wird erst abgespielt, nachdem alle Daten vollständig geladen sind. Wir haben es geflissentlich und vielleicht unfairerweise bis jetzt verschwiegen, aber Flash gestattet es, Code zusammen zu klicken. Diese Funktionalität versteckt sich hinter dem Menü . Dort stehen zwar nur sehr eingeschränkte Möglichkeiten zur Verfügung. Eine flexible Steuerung etwa von Sounds kann so nicht realisiert werden. Immerhin jedoch können wir Aufgaben wie das Einfügen und Starten eines in der Bibliothek vorliegenden Sounds, Stoppen aller Sounds oder laden einer externen Sounddatei umsetzen. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek eine Sounddatei. Zwar beherrscht Flash die Formate aif, wav und mp3, doch eignen sich aufgrund des hohen Kompressionsgrads bei gleichzeitig guten Qualitätseinstellungen Letztere am besten. 3. Weisen Sie dieser Datei in der Bibliothek den Verknüpfungsnamen sound1 zu. Damit sind wir in

Kapitel 19  Sound

der Lage, ähnlich wie bei MovieClips den Sound zur Laufzeit in die Bühne einzufügen. 4. Rufen Sie das Menü auf. 5. Klicken Sie auf das Plus-Icon am linken Fensterrand, um ein neues Verhalten auszuwählen. 6. Wählen Sie aus der Liste <Sound><Sound aus Bibliothek laden>. 7. Nehmen Sie in dem sich öffnenden Fenster die in den Abbildungen 54 und 55 angegebenen Einstellungen vor. 8. Bestätigen Sie mit . Beim Testen wird der gewählte Sound abgespielt. Wenn Sie sich die Zeitleiste anschauen, werden Sie feststellen, dass sich in der zuvor aktiven Ebene ein neues Bildskript mit folgendem Inhalt befindet: //Play Internal Sound Behavior

 if(_global.Behaviors == null)_global. Behaviors = {};  if(_global.Behaviors.Sound == null)_ global.Behaviors.Sound = {};  if(typeof this.createEmptyMovieClip == ‚undefined‘){

 this._parent. createEmptyMovieClip(‚BS_ sdSound1‘,new Date().getTime()(Math.floor((new Date().getTime()) /10000)*10000) );  _global.Behaviors.Sound.sdSound1 = new Sound(this._parent.BS_sdSound1); } else {

Abbildung 54:  Einstellungen für das Sound-Verhalten

19.1  Sound abspielen und stoppen

247

4. Weisen Sie actions folgendes Bildskript zu: //------------ vars –--------------- var sdSound1:Sound;

//---------- functions –------------ function init() {

 sdSound1 = new Sound();

 sdSound1.attachSound(„sound1“);  sdSound1.start(); } Abbildung 55:  Weitere Einstellungen für das Sound-Verhalten

 this.createEmptyMovieClip(‚_ sdSound1_‘,new Date().getTime()(Math.floor((new Date().getTime()) /10000)*10000) );

 _global.Behaviors.Sound.sdSound1 = new Sound(this.BS_sdSound1); }

 _global.Behaviors.Sound.sdSound1. attachSound(„sound1“);  if (true) {

 _global.Behaviors.Sound.sdSound1. start(0,1); }

//End Behavior

Dieser Code wurde automatisch eingefügt, so dass wir uns nicht weiter um ihn kümmern müssen. Die Skripte liegen pro Verhalten in einer eigenen XMLDatei vor, die sich im Unterordner Behaviors des für jeden einzelnen User automatisch angelegten Stammordners Flash/de/Configuration befindet. An ähnlicher Stelle lagen ja schon die Flash-Klassen vor, wie weiter oben gezeigt. Neugierige dürfen gerne einen Blick in die XML-Datei werfen. An dieser Stelle können sogar eigene Verhaltensweisen eingefügt werden, was allerdings solide Skript-Kenntnisse voraussetzt.. Mehr Flexibilität (und verständlicheren Code) bietet der eigene Zugriff auf die Sound-Klasse. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek zwei Sound­ dateien. 3. Weisen Sie diesen Dateien in der Bibliothek die Verknüpfungsnamen sound1 und sound2 zu.

//----------–– start –-------------- init();

Wenn Sie testen, gibt Flash den importierten Sound wieder. Wir richten eine Variable ein, um das benötigte Sound-Objekt zu referenzieren. Danach legen wir eine Funktion init() fest, die bei Aufruf die SoundKlasse instanziiert, der Instanz den gewünschten Sound aus der Bibliothek zuordnet und ihn startet. Verzichten wir auf das Starten, wird der Sound zwar geladen, aber nicht abgespielt. Die start()-Methode erlaubt es, zwei Argumente zu übergeben:

• Sekunden,

gibt an, ab welcher Stelle der Sound starten soll. Beachten Sie, dass sich der Wert auf Sekunden bezieht, nicht, wie sonst bei der Zeitmessung, auf Millisekunden; • Zahl, Anzahl der Wiederholungen. Ähnlich einfach gestaltet sich ein Anhalten des Sounds – zumindest prinzipiell. 5. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer: this.onMouseDown = function(){  sdSound1.stop(); }

Wenn Sie beim Testen auf eine beliebige Stelle klicken, wird die Audio-Wiedergabe gestoppt. Doch was geschieht, wenn wir gleichzeitig mehrere Sounds verwenden, z. B. eine dezente Hintergrundmusik und ein Sprechersound? 6. Erweitern Sie den Variablen-Block (Fettdruck): var sdSound1:Sound, sdSound2:Sound;

248

Kapitel 19  Sound

7. Fügen Sie in der Deklaration von init() unmittelbar vor der Zuweisung des onMouseDown-Ereignisses ein: sdSound2 = new Sound();

sdSound2.attachSound(„sound2“); sdSound2.start();

Nun werden zwei Sounds gleichzeitig gespielt. Überraschenderweise stoppen allerdings auch beide, wenn Sie irgendwo mit der Maus klicken, obwohl in der Deklaration von init() explizit nur sound1 gestoppt werden soll. Der Grund liegt in der flashinternen Behandlung von Sound. Zwar richten wir pro Sound ein eigenes Objekt ein, doch benötigt jeder zusätzlich eine Zeitleiste, in der er abgelegt werden kann. Denn Flash behandelt geskriptete Audio-Dateien ähnlich den von Hand eingefügten Audio-Dateien, die auf das Vorhandensein einer Zeitleiste angewiesen sind. Verzichten wir wie im vorliegenden Fall auf die Verwendung einer eigenen Zeitleiste, nimmt Flash einfach diejenige, der unsere Sound-Instanz zugeordnet wurde, also hier konkret die Hauptzeitleiste. Ein stop()-Befehl bezieht sich dann auf alle Sounds innerhalb einer spezifischen Zeitleiste. 8. Erweitern Sie den Variablen-Block:  var mSound1:MovieClip, mSound2:MovieClip;

9. Ergänzen Sie die Deklaration von init() unmittelbar nach der öffnenden Klammer:  mSound1 = this.createEmptyMovieClip („mcSound1“, this.getNextHighest­ Depth());  mSound2 = this.createEmptyMovieClip („mcSound2“, this.getNextHighest­ Depth());

10. Ändern Sie in init() jeweils die Deklaration von sdSound1 und sdSound2 (Fettdruck):

sdSound1 = new Sound(mSound1); sdSound2 = new Sound(mSound2);

Nun funktioniert das Anhalten von sdSound1 wie gewünscht. Wir legen zwei Variablen an, um zwei innerhalb von init() erzeugte leere MovieClips referenzieren zu können. Anschließend übergeben wir bei der Instanziierung des Sound-Objekts jeweils eine dieser

Zeitleisten als Argument, so dass jeder Sound einer eigenen Zeitleiste zugeordnet wird. Ein stoppen bezieht sich dann nur noch auf jeweils eine Zeitleiste und damit eben auch nur noch auf einen einzigen Sound. Wollen wir Statt dessen tatsächlich alle Sounds stoppen, genügt die globale Funktion stop­ AllSounds().

19.2 Einen Sound loopen Wenn wir einen Hintergrundsound verwenden, wählen wir i. d. R. ein möglichst kurzes Musikstück, das sich permanent abspielen lässt. Die Kürze sorgt für eine geringe Dateigröße. Wichtig ist, dass kein Streaming-Sound verwendet wird, denn dann würde ein Loop keinen Sinn machen, da immer nur ein Teil gepuffert, nicht aber die gesamte Datei gespeichert wird. Ein Loop würde dann im ständigen Herunterladen resultieren, was kontraproduktiv wäre. Da bei der start()-Methode des Sound-Objekts keine Loop-Eigenschaft adressierbar ist, behelfen sich viele Entwickler mit einem kleinen Trick. 1. Der Einfachheit halber verwenden wir dieselbe Datei wie im vorhergehenden Abschnitt, die Sie bitte unter einem neuen Namen abspeichern. 2. Ändern Sie in der Deklaration von init() die start()-Methode für sdSound1 (Fettdruck): sdSound1.start(0,999);

3. Löschen Sie jeden Bezug auf sdSound2 sowie mSound2, da es hier ausreicht, mit einem einzigen Sound zu arbeiten. Der resultierende Code müsste jetzt so aussehen: //----------–– vars –--------------- var mSound1:MovieClip; var sdSound1:Sound;

//------------ functions –---------- function init() {

 mSound1 = this.createEmptyMovieClip („mcSound1“, this.getNextHighest­ Depth());  sdSound1 = new Sound(mSound1);

 sdSound1.attachSound(„sound1“);  sdSound1.start(0, 999);

19.3  Externe Sounds

 this.onMouseDown = function() {  sdSound1.stop();

249

start()-Methode auf, so dass die Audio-Datei wie-

der von vorne beginnt.

}; }

//–––---------- start –------------- init();

Falls Ihre Audio-Datei nicht zu lang ist, können Sie feststellen, dass der Sound wiederholt abgespielt wird. Um dies zu erreichen, haben wir einfach die Anzahl der Wiederholungen auf einen recht hohen Wert gesetzt, nämlich 999. Dadurch entsteht der Eindruck einer Endlosschleife. Achten Sie darauf, an die start()-Methode zwei Argumente zu übergeben. Denn der erste ist, wie oben gesehen, für den Start­ offset verantwortlich und nur der zweite definiert die Anzahl der Wiederholungen. Schreiben Sie Statt dessen sdSound1.start(0, 999), meint Flash, Sie wollten den Sound mit einem Offset von 999 Sekunden starten, also erst ab der 999. Sekunde abspielen lassen. Ist Ihr Sound kürzer, was bei einem Ereignissound recht wahrscheinlich sein dürfte, dann werden Sie überhaupt nichts hören. Daher übergeben wir als erstes Argument einen Offset von 0, so dass der Sound von Anfang an spielt, anschließend folgt die Anzahl der Wiederholungen. Ein klein wenig aufwendiger, dafür aber erheblich eleganter ist eine Variante, die sich eines besonderen Ereignisses der Sound-Klasse bedient. 4. Löschen Sie in der Deklaration von init() die an die start()-Methode übergebenen Argumente. 5. Fügen Sie in der Deklaration von init() nach dem Aufruf der start()-Methode ein:

19.3 Externe Sounds Größere Flexibilität bietet der Einsatz externer Dateien. Damit lassen sich sowohl Streaming- wie Ereignis-Sounds wiedergeben. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie in dem Ordner, in dem sich diese Datei befindet, einen Unterordner namens sounds. 3. Fügen Sie in diesem Unterordner eine Datei (Format: mp3) unter dem Namen sound1.mp3 ein. 4. Weisen Sie actions folgendes Bildskript zu: //-----------–– vars –-------------- var mSound1:MovieClip; var sdSound1:Sound;

//–---------- functions –----------- function init() {

 mSound1 = this.createEmptyMovieClip („mcSound1“, this.getNextHighest­ Depth());  sdSound1 = new Sound(mSound1);

 sdSound1.loadSound(„sounds/sound1. mp3“,true);  sdSound1.start();

 this.onMouseDown = function() {  sdSound1.stop(); };

 sdSound1.onSoundComplete = function(){

}

 this.start();

//––----------- start –--------------

}

init();

Das Ergebnis entspricht beim Testen dem vorhergehenden. Statt jedoch die Anzahl der Wiederholungen auf einen zwar hohen, aber dennoch endlichen Wert zu setzen, greifen wir auf das Ereignis onSoundComplete zurück. Das tritt dann auf, wenn, wie der Name schon andeutet, der angesprochene Sound vollständig abgespielt wurde. Dann rufen wir einfach erneut die

Beim Testen startet der Sound wie zuvor. Da wir den Sound extern laden, ist die resultierende fla-Datei erheblich kleiner geworden; zudem können wir, ohne sie öffnen zu müssen, den Sound beliebig austauschen. Die Vorgehensweise gleicht der vorhergehenden; lediglich wird hier anstelle eines attachSound() ein externer Ladevorgang mit loadSound() ausgeführt.

Externe Assets

Zu den Vorteilen von Flash zählt die große Flexibilität im Umgang mit Medienformaten. Wir können alle bekannten und manche weniger gängigen Dateien von Text über Grafiken bis hin zu Sound und Video recht problemlos integrieren. Dabei sind wir nicht darauf angewiesen, die betreffenden Medien in eine fla-Datei hinein zu stopfen, denn Flash erlaubt es, sie zur Laufzeit bei Bedarf zu laden. Zugriff auf extern vorliegende Daten ist in folgenden Fällen möglich:

• Text

(loadVariables(), mc.loadVariables (), loadVariableNum(), LoadVars(), XML, SharedObject). Texte bieten sich immer dann an, wenn Sie entweder Informationen für einen späteren Zugriff speichern oder eine Applikation konfigurieren möchten. So könnte man in einer einfachen Textdatei festhalten, wie viele Bilder in einer Galerie vorhanden sind und in welchem Ordner sie sich befinden. Oder die anzuzeigenden Texte werden aus externen Files eingelesen, so dass sie sich komfortabel ändern lassen, ohne dass man deswegen unmittelbar in den Flash-Code eingreifen müsste. User-Informationen wie etwa der erreichte Level und Punktestand in einem Spiel lassen sich ebenfalls einfach in einer derartigen Datei erfassen. Neben den veralteten Methoden loadVariables() und loadVariableNum() kommen dabei die LoadVars- und SharedObject-Klasse zum Einsatz. Während sich mit allen genannten Methoden lokale Daten laden lassen, erlaubt nur Letztere auch lokales Speichern, wobei der Speicherort von Flash vorgegeben wird. Das SharedObject gerät mittlerweile etwas in Verruf, weil es gerne als Cookie verwendet wird, das ein Browser nicht mehr

20

automatisiert löscht. Speichern auf einem Server dagegen ist innerhalb der Domain, aus der der Film aufgerufen wird, auch mit den übrigen Methoden möglich. • Grafiken (loadMovieNum(), mc.loadMovie(), MovieClipLoader). Wie im Fall von Textinhalten kann es sich bei Grafiken anbieten, diese als externe Assets zu verwenden anstatt sie unmittelbar in die Anwendung bzw. Site zu integrieren. Damit gewinnt man einerseits die Flexibilität, Grafiken relativ einfach nach Bedarf austauschen zu können. Andererseits werden je nach Konzeption nur diejenigen Bilddaten auf den Client übertragen, die aktuell benötigt werden. So kann man in einer Bildergalerie die vorhandenen Grafiken als Thumbnail in einer Vorschau anzeigen, während erst ein Mausklick die größere Originalversion in die Anwendung lädt. • Sound (loadSound()) Im Prinzip gilt hier dasselbe wie für die Grafiken, wobei allerdings die Notwendigkeit mit externen Medien zu arbeiten, bei Sound noch in einem höheren Maße besteht. Denn derartige Dateien verfügen über eine im Vergleich zu Bildern und erst recht zu Text erhebliche Datenmenge. Lädt man Sound, verfügt man neben der erwähnten Flexibilität auch über die Möglichkeit des Streamings: Noch während des Ladevorgangs spielt bereits der auf dem Client vorhandene Teil ab, wodurch sich subjektiv der Ladevorgang verkürzt. • Video (NetStream/attachVideo()) Hinsichtlich Datenmenge und Streaming gleichen sich Sound und Video. • Beliebige Inhalte (loadMovieNum(), mc.loadMovie(), MovieClipLoader).

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

251

252

Gerade umfangreichere Applikationen umfassen, ähnlich, wie wir es von html-Seiten gewohnt sind, eine Vielzahl an swf-Dateien, in denen die konkret zu verwendenden Inhalte vorliegen (oder aufgerufen werden). Durch den modularen Aufbau gewinnt man eine größere Flexibilität, die es zulässt, nur Teile der Applikation im Fall der Fälle auszutauschen bzw. zu aktualisieren, ohne dadurch die gesamte Anwendung komplett neu aufsetzen zu müssen. • Actionscript-Dateien (include, import) Es empfiehlt sich, Code zu modularisieren, indem häufig vorkommende Blöcke in externe as-Dateien ausgelagert werden. Sie lassen sich per includeoder import-Anweisung in jede beliebige Anwendung laden, was natürlich den Workflow erheblich vereinfacht. Einige der erwähnten Fälle wurden bereits an anderer Stelle kurz vorgestellt, ohne dabei jedoch näher auf den Ladevorgang und insbesondere seine Kontrolle einzugehen. Wir wollen uns daher die konkrete Vorgehensweise am Beispiel von swf- und Bilddateien näher anschauen.

20.1 Laden externer swf-Dateien Wie erwähnt, werden in Flash größere Applikationen, insbesondere Websites, modular aufgebaut. Die benötigten Assets laden wir nach Notwendigkeit in Form externer swf-Dateien (bzw. in den oben vorgestellten Formaten von Text bis Video). In der einfachsten Variante reicht ein simpler Aufruf der loadMovie()Methode, um die externe Datei einzubinden. 1. Erstellen Sie einen Ordner namens modular. 2. Erstellen Sie eine Standarddatei und speichern sie in dem genannten Ordner unter dem Namen in­ dex. Alle weiteren Dateien werden, soweit nicht anders angegeben, in diesen Ordner abgelegt. 3. Erstellen Sie eine weitere Standarddatei und speichern sie unter dem Namen main. 4. Importieren Sie in main auf der Ebene objects horizontal und vertikal mittig eine beliebige Grafik. Wir verwenden hier beispielhaft gepard7.jpg. 5. Wandeln Sie main per <Strg><Enter> in eine swf-Datei um. Sie wird automatisch in demselben Ordner gespeichert, in dem sich die zugehörige flaDatei befindet.

Kapitel 20  Externe Assets

6. Kehren Sie zu index zurück. 7. Fügen Sie in actions folgendes Bildskript ein: this.loadMovie(„main.swf“);

Beim Testen blickt uns ein harmlos wirkendes Kätzchen entgegen. Wir erstellen zwei verschiedene Dateien:

• index.swf enthält den Aufruf der externen Datei.

Wir wählen den Namen index in Anlehnung an die Startdatei einer in HTML erstellten Website, deren erste Datei normalerweise eben diese Bezeichnung trägt. • main.swf beinhaltet den konkreten Inhalt, den wir anzeigen wollen. Er kann dabei beliebiger Natur sein, egal, ob Text, Grafik, Sound, etc. Beim Start der ersten Datei wird diese in den FlashPlayer geladen und das im ersten Frame befindliche Skript ausgeführt. Es sorgt dafür, dass in die Zeitleiste des angegebenen Objekts die externe swf-Datei eingefügt wird. In unserem Beispiel handelt es sich bei der Zeitleiste um die Hauptzeitleiste des aufrufenden Films, also _root in index. In der Titelleiste des Flash-Players erkennen Sie den Namen dieser Datei, während die geladene Datei dort nicht aufgeführt wird. Das liegt daran, dass Flash die angegebene Zeitleiste vollständig durch den geladenen Film ersetzt und diesen so behandelt, als sei er ein in in­ dex vorliegender MovieClip. Er gilt somit nicht mehr als eigenständige swf-Datei. Abbildung 56 zeigt das bisherige Ergebnis. Die Position des geladenen Films ergibt sich aus dem Registrierungspunkt der jeweils betroffenen Dateien: Die Datei main wird mit ihrem Registrierungspunkt im Koordinatenursprung des Zielorts eingefügt. Das bedeutet konkret, dass die linke obere Ecke von main über die linke obere Ecke von index gelegt wird. Da sowohl Registrierungspunkt wie Ausdehnung beider Dateien miteinander identisch sind, verdeckt main exakt und vollständig index. Allerdings hat der Ladevorgang Konsequenzen, die sich auf unsere Anwendung in ungewünschter Weise auswirken können. 8. Zeichnen Sie in index auf objects in der linken oberen Ecke ein Rechteck (25 × 75, beliebige Farbe). 9. Wandeln Sie es in einen MovieClip um (Bibliotheksname btnLoad, Instanzname bLoad).

20.1  Laden externer swf-Dateien

253 Abbildung 56:  Externer Ladevorgang in der Hauptzeitleiste

10. Ersetzen Sie den bestehenden Code durch:

 bLoad.onPress = function() {



bLoad.onPress = function() {

 mLaden.loadMovie(„main.swf“);



};



}



init();

_root.loadMovie(„main.swf“);

Wenn Sie beim Testen auf unseren bescheidenen Button klicken, verschwindet er und main wird angezeigt. Wir weisen bLoad ein onPress-Ereignis zu, das bei Auftreten den externen Ladevorgang auslöst. Da die loadMovie()-Methode vollständig den Inhalt der betroffenen Zeitleiste durch den Inhalt des geladenen Films ersetzt, wird unsere Schaltfläche allerdings gelöscht. Denn sie befindet sich ja wie der zu ladende main.swf in _root. Daher müssen alle Objekte, die beibehalten werden sollen, getrennt von den extern zu ladenden Dateien abgelegt werden. 11. Ersetzen Sie den bisherigen Code durch:

//------------ vars –--------------–



//---------- functions –------------



};

//––---------- start –--------------

Beim Klicken bleibt unser Button erhalten. Im Variablen-Block deklarieren wir eine Variable, die in der init()-Funktion mit einer Referenz auf einen neu erstellten, leeren MovieClip gefüllt wird. In diesen Clip laden wir bei Mausklick auf bLoad die gewünschte externe Datei. Dadurch erreichen wir, dass die Hauptzeitleiste in index vom Ladevorgang nicht betroffen ist und somit alle dort vorhandenen Elemente erhalten bleiben. Da wir auch an späterer Stelle mit derartigen Ladevorgängen zu tun haben werden, sollten wir unseren Ladeaufruf etwas flexibler halten.

var mLaden:MovieClip;

12. Fügen Sie im Funktions-Block folgende Deklaration ein:

function init() {

 function laden(pWas:String, pZiel:MovieClip):Void {

 mLaden = this.createEmptyMovieClip („behExternSWF“, this.getNextHigh­ estDepth());

 pZiel.loadMovie(pWas);

}

254

Kapitel 20  Externe Assets

13. Ersetzen Sie in der Deklaration von init() im onPress-Ereignis den Ladeaufruf durch:

laden(„main.swf“, mLaden);

Das Ergebnis bleibt das Gleiche wie zuvor. Doch nun können wir auch von anderer Stelle aus einen Ladeaufruf starten und zudem ein neues Ziel angeben, was notwendig ist, sobald wir eine komplexere Anwendung wie eine Website erstellen wollen. Wir legen die Funktion laden() an, die über zwei Parameter verfügt:

• pWas, die als String übergebene Datei, die wir la-

den wollen. Im konkreten Fall verzichten wir auf eine Pfadangabe, was bedeutet, dass sie sich im selben Ordner befindet wie die aufrufende Datei; • pZiel, diejenige Zeitleiste bzw. der MovieClip, in den die angegebene Datei geladen werden soll. Bei Klick auf unseren Button rufen wir die genannte Methode auf und übergeben als Ziel den leeren MovieClip sowie als zu ladende Datei main.swf. Wenn der geladene Film als in den aufrufenden Film integrierten MovieClip behandelt wird, dann hat das auch Folgen in Bezug auf die Adressierung der Zeitleisten: In einem Flash-Film existiert immer nur ein Objekt mit der Bezeichnung _root. Was geschieht jedoch, wenn sowohl der aufrufende wie auch der geladene Film _root ansprechen? 14. Wandeln Sie die in main.fla importierte Grafik in einen MovieClip um (Bibliotheksname mcBild, Instanzname bild, Registrierungspunkt links oben). 15. Weisen Sie in main.fla der Ebene actions folgendes Bildskript zu:

//------------- import –------------



import flash.filters.*;



var fSchatten:DropShadowFilter;



//------------- vars –-------------//------------ functions –---------function init() {

 fSchatten = new DropShadowFil­ ter(5,45,0 × 000000,0.9,5,5,1,3);

 bild.filters = [fSchatten];



//------------- start –-------------



}

init();

Wenn Sie nun unmittelbar die index-Datei testen, werden Sie keinen Unterschied feststellen. Das liegt einfach daran, dass wir zwar die Änderungen in main gespeichert, aber daraus keine neue swf generiert haben. Daher lädt Flash die vorhergehende main.swf. 16. Erstellen Sie aus der main.fla eine entsprechende main.swf. Beim erneuten Testen der index-Datei zeigt die eingefügte Grafik in main einen leichten Schlagschatten. Wir importieren die Filter-Klasse und deklarieren eine Variable zur Aufnahme einer Filter-Instanz, die in der Funktion init() mit den gewünschten Eigenschaften eingerichtet wird. In unserem Fall handelt es sich um einen simplen Schatten, der in einem Abstand von 5 Pixeln und einem Winkel von 45 Grad mit einem schwarzen, auf 90 % Deckkraft gesetzten, weich gezeichneten Rechteck dargestellt wird. Wir weisen ihn dem mit dem Instanznamen bild versehenen MovieClip, der nun unsere Grafik enthält, zu. Mitunter ist es notwendig, einen unmittelbaren Bezug auf eine Hauptzeitleiste herzustellen. In dem Fall müssten wir bild anders ansprechen. 17. Ändern Sie in der Deklaration von init() die Zuweisung der filters-Eigenschaft (Fettdruck):

_root.bild.filters = [fSchatten];

18. Erstellen Sie daraus erneut eine swf. Der Schlagschatten ist wie zuvor zu erkennen. 19. Testen Sie index. Der Schlagschatten wird nicht mehr angezeigt. Abbildung 57 stellt beide Situationen gegenüber. Solange wir main als unabhängige swf testen, gibt es keine Probleme mit der Darstellung des Schattens. Sowohl die absolute Pfadangabe mit _root wie diejenige ohne _root ermöglicht es, bild den gewünschten Filter zuzuweisen. In dem Augenblick jedoch, in dem wir main in eine andere Datei laden, verliert sie ihre Unabhängigkeit und wird zu einem gewöhnlichen MovieClip innerhalb einer anderen, übergeordneten Zeitleiste. Dadurch ändert sich auch der Bezug von _root, der nun auf eben diese neue Zeitleiste verweist. 20. Fügen Sie in index in der Deklaration von init() unmittelbar nach der Zuweisung von mLaden ein:

mLaden._lockroot = true;

20.1  Laden externer swf-Dateien

255 Abbildung 57:  Auswirkungen von _root auf externe Ladeprozesse

Beim Testen bleibt der Schatten wie gewünscht erhalten. Wir weisen Flash an, direkt nach dem Einrichten des leeren MovieClips dessen Zeitleiste zu sperren, so dass in der zu ladenden Datei enthaltene Bezüge auf _root immer den MovieClip selbst ansprechen. Alternativ kann das _lockroot in die zu ladende Datei aufgenommen werden. Dabei müssen Sie auf die Schreibweise sowie die Stelle des Aufrufs achten. Falsch wäre in main ganz am Anfang des Codes: _root._lockroot = true;

Denn in dem Augenblick, wo diese Datei geladen wird, ist _root mit der Hauptzeitleiste der aufrufenden Datei identisch. Der Befehl würde sich also bereits auf die Zeitleiste von index beziehen, was eben nicht gewünscht ist. Statt dessen müssten Sie schreiben: this._lockroot = true;

Mit this wird automatisch die korrekte Zeitleiste ermittelt. Wichtig ist in diesem Fall die korrekte Position, d. h. möglichst am Anfang des Code-Blocks und selbstverständlich vor der Zuweisung des Filters an _root.bild. Die einfachste Variante speichert den Bezug so, wie wir es ohnehin mit anderen MovieClips bereits gewohnt sind, nämlich in eine Variable. 21. Erweiteren Sie in main den Variablen-Block um:

Während der Test keinen Unterschied zu vorher ergibt, legen wir eine Variable an, in die wir beim Aufruf von init() die Hauptzeitleiste des aktuellen Films speichern. Anschließend benutzen wir diese Variable, um den Filter einem Objekt zuzuweisen, das sich auf der Hauptzeitleiste des zu ladenden Films befindet. Um keine Missverständnisse aufkommen zu lassen: Hier ging es ausschließlich um die Frage, welche Auswirkungen die Verwendung von _root in verschiedenen Zeitleisten besitzt. Wir haben ein einfaches Beispiel gewählt, das selbstverständlich auch ohne Bezug auf _root funktioniert. Er wurde nur zu Demonstrationszwecken hergestellt. Wir haben bisher mit einer flachen Ordnerstruktur gearbeitet, die man so zumindest bei etwas größeren Projekten nicht findet. Es fördert nämlich nicht unbedingt die Übersichtlichkeit, wenn man mit Hunderten oder gar Tausenden von Dateien arbeiten muss, die alle im selben Verzeichnis liegen. Existiert eine komplexere Ordnerstruktur vor und es werden aus mehreren, in verschiedenen Verzeichnissen abgelegten Dateien externe Ladevorgänge gestartet, stellt die Pfadangabe eine potentielle Fehlerquelle dar. 1. Legen Sie innerhalb des Ordners modular folgende Unterordner an, wie sie in Abbildung 58 dargestellt sind.

var mRoot:MovieClip;

22. Fügen Sie in main in die Deklaration von init() unmittelbar nach der öffnenden Klammer ein:

mRoot = this;

23. Ändern Sie in main die Zuweisung der filtersEigenschaft (Fettdruck):

mRoot.bild.filters = [fSchatten];

Abbildung  58:  Verschachtelte Ordnerstruktur für externe Lade­vorgänge

256

2. Kopieren Sie die bisherige main.fla in den Ordner site/kapitel/main. 3. Kopieren Sie in den Ordner site/bilder/main eine beliebige Grafik. Wir verwenden beispielhaft gepard7.jpg. 4. Kopieren Sie die bisherige index.fla in den Ordner site. 5. Fügen Sie in index im Variablen-Block folgende Initialisierung ein: var sPfad:String = „kapitel/main/“

6. Ändern Sie in index in der Deklaration von init() den Aufruf von laden() (Fettdruck): laden(sPfad+„main.swf“, mLaden);

Die Anwendung funktioniert bei einem Test wie gewohnt. Die Dateien befinden sich nicht mehr in demselben Ordner. Daher müssen wir Flash mitteilen, wo sie zu finden sind. Verzichten wir darauf, erhalten wir bei Mausklick auf den Button die in Abbildung  59 gezeigte Fehlermeldung: Glücklicherweise gibt uns Flash direkt den Pfad an, auf den zugegriffen wurde, so dass wir leicht kontrollieren können, ob er mit dem übereinstimmt, was wir geskriptet haben. In unserem konkreten Beispiel speichern wir im Variablen-Block den benötigten Pfad und übergeben ihn im onPress-Ereignis an der Stelle, an der die betreffende Datei geladen wird. 7. Löschen Sie in main das Bild der possierlichen Katze sowohl auf der Bühne als auch aus der Bibliothek.

Kapitel 20  Externe Assets

8. Ersetzen Sie in main das Skript vollständig durch: //------------ vars –----------------

var mRoot:MovieClip, mBild:MovieClip; //---------- functions –------------ function init() {  mRoot = this;

 mBild = this. createEmptyMovieClip(„behBild“, mRoot.getNextHighestDepth());  mBild._x = 100;

 mBild.loadMovie(„../../bilder/main/ gepard1.jpg“); }

//------------ start –-------------- init();

Wenn Sie main testen, können Sie wieder die Katze sehen. Die einzigen Änderungen gegenüber vorher bestehen in der Positionierung (horizontal explizit auf 100, vertikal automatisch auf 0) und einem modifizierten Pfad. Um zum richtigen Ordner zu gelangen, müssen wir ausgehend vom aktuellen Speicherort zunächst zwei Ebenen nach oben gehen. Denn Ordner sind hierarchisch aufgebaut, d. h. sie bilden eine Unterordnung ab. In einer derartigen Struktur kann man sich immer nur vertikal, nie jedoch horizontal bewegen. Um Ordner ansprechen zu können, die sich auf derselben Hierarchieebene befinden, muss man zunächst eine Ebene höher gehen, bevor man von dort aus nach unten auf den gewünschten Ordner zugreifen kann. Nehmen wir der Einfachheit halber an, wir befinden uns im Ordner

Abbildung 59:  Fehlermeldung bei fehlgeschlagenem Ladeaufruf

20.2  Eigenschaften der geladenen Dateien

kapitel und wollten auf den Ordner bilder zugrei-

fen, der sich innerhalb der Hierarchie auf derselben Ebene befindet. Der korrekte Pfad würde dann lauten: ../bilder/Datei. Aufgrund der hierarchischen Struktur können wir nicht direkt auf bilder zugreifen bzw. den Pfad bilder/Datei verwenden. Das würde nämlich so interpretiert, als existiere am aktuellen Standort ein Unterordner namens bilder. Im konkreten Fall müssen wir gleich zwei Ordner nach oben und zwei Ordner nach unten gehen, bevor wir zur gewünschten Grafik gelangen. Der Test über index und Mausklick hält allerdings eine Überraschung bereit: Anstelle der Grafik sehen wir eine Fehlermeldung, derzufolge die aufgerufene Datei nicht gefunden werden konnte. Wenn Sie den angegebenen Pfad beachten, erkennen Sie, dass Flash nun vom Speicherort von index, nicht jedoch wie vorher von main ausgegangen ist. In dem Fall stimmt der Pfad natürlich nicht mehr, da Flash zunächst um zwei Ebenen nach oben geht und damit längst das Verzeichnis unserer Site verlassen hat. Dieses Vorgehen ist allerdings völlig korrekt, denn main gilt, wie bereits mehrfach gesehen, als abhängiger MovieClip und nicht mehr als unabhängige swf. Daher wird der in main verwendete Pfad so ausgelesen, als befänden wir uns bereits in index. 9. Korrigieren Sie den Pfad in main (Fettdruck):  mBild.loadMovie(„bilder/main/gepard1.jpg“);

10. Erzeugen Sie eine swf-Datei und ignorieren Sie nervenstark die auftauchende Fehlermeldung (an dieser Stelle dürfen Sie das ausnahmsweise tun). Flash beschwert sich zu Recht, denn der Pfad stimmt nicht mehr, wenn wir von main ausgehen. 11. Testen Sie index. Nun erhalten Sie wieder eine korrekte Darstellung bei Mausklick, da der Pfad an index angepasst wurde. Beachten Sie also bei derart verschachtelten Aufrufen externer Daten unbedingt die Pfadangaben. Da sich Flash (korrekterweise) so verhält, ist das Testen der Ladevorgänge nur aus der ersten aufrufenden Datei heraus sinnvoll möglich. Um die extern geladenen Dateien wieder loszuwerden, gibt es gleich mehrere Möglichkeiten:

• Wie im Fall von attachMovie() kann auch hier in ein und dasselbe Ziel immer nur ein einziges Ob-

257

jekt geladen werden. Wenn Sie also in mLaden eine andere Datei laden, wird eine dort bereits vorhandene einfach überschrieben und damit gelöscht. • Mit der Methode unloadMovie() lässt sich explizit Inhalt entfernen, ohne dass an dessen Stelle neuer Inhalt tritt. Im konkreten Beispiel würde der Befehl lauten: mLaden.unloadMovie(). • Wie bei attachMovie() können wir eine radikale Lösung wählen, sprich: Den Behälter einfach löschen, was notwendigerweise seinen Inhalt mit in den digitalen Abgrund reißen würde. In unserem Beispiel müssten Sie schreiben: mLaden.remo­ veMovieClip(). Achten Sie dann darauf, dass vor einem erneuten Laden der gelöschte MovieClip wieder als leerer Clip eingerichtet werden muss, ansonsten fehlt ja der Behälter für einen weiteren Ladevorgang.

20.2 Eigenschaften der geladenen Dateien Wenn die geladenen Dateien als MovieClip gelten, beeinflusst das notgedrungen diejenigen Eigenschaften, die wir für den Film insgesamt bzw. die Hauptzeitleiste festgelegt haben, nämlich die Bildwiederholrate, die horizontale und vertikale Ausdehnung sowie die Hintergrundfarbe. Die aufrufende Datei legt für alle geladenen Dateien diese Eigenschaften fest, unabhängig davon, welche Einstellungen anderweitig getroffen wurden. Wenn also beispielsweise in­ dex über einen grauen Hintergrund verfügt, wird der weiße Hintergrund in main ignoriert. 1. Erstellen Sie in den aktuellen Ordnern jeweils eine Kopie von index und main. 2. Nennen Sie die Kopien um in index1 bzw. main1. 3. Ändern Sie in index1 die Hintergrundfarbe zu cccccc (helles Grau). 4. Ändern Sie in index1 in der Deklaration von init() den Ladeaufruf (Fettdruck): laden(sPfad+„main1.swf“, mLaden);

Beide Dateien werden nach Mausklick mit einem hellgrauen Hintergrund dargestellt. Maßgeblich ist die Festlegung in index1, da wir von dort aus main1 laden. Dessen spezifische Einstellungen für die Hauptzeitleiste werden beim Aufruf

258

einfach überschrieben, so dass der weiße Hintergrund verschwindet. Möchten Sie dennoch für die zu ladende Datei einen eigenen Hintergrund definieren, so geht das am einfachsten, indem Sie eine entsprechend eingefärbte Grafik auf der untersten Ebene von dessen Hauptzeitleiste platzieren. 5. Reduzieren Sie in index1 die Breite der Bühne auf 200 Pixel. Das zugegebenermaßen gewöhnungsbedürftige Maß führt dazu, dass unsere Katze beim Laden nur noch partiell zu sehen ist, wie in Abbildung 60 zu erkennen. Die verschiedenen Größen führen dazu, dass wir die geladene Datei quasi durch ein von index1 vorgegebenes Fenster betrachten, gerade so, als sei ein Teil von ihr maskiert. Zu sehen ist nur der Bereich, der sich mit index1 überschneidet. Beachten Sie, dass dies nur gilt, wenn Sie nicht direkt in _root, sondern in einen eigenen Behälter laden. Andernfalls nämlich

Kapitel 20  Externe Assets

passt sich die Größe der aufrufenden Datei derjenigen der geladenen Datei an. 6. Um ein vernünftiges Arbeiten zu ermöglichen, stellen Sie die Größe wieder auf das ursprüngliche Maß zurück. Da mLaden in index1 als Behälter dient, können wir Eigenschaftsänderungen an der zu ladenden Datei auch indirekt über diesen Behälter realisieren. 7. Löschen Sie in main1 in der Deklaration von init() diejenige Zeile, die mBild eine horizontale Position zuweist (mBild._x = 100). 8. Generieren Sie eine swf. 9. Ergänzen Sie in index1 die Deklaration von init() unmittelbar nach der Initialisierung von mLaden: mLaden._x = 100;

Die Positionierung nehmen wir nun nicht mehr in main1 dadurch vor, dass wir dort dem Behälter für das Bild eine horizontale Position zuweisen. Statt dessen belassen wir die Werte auf den Standardwerten, also 0. In index1 verschieben wir nun den für die externe Datei zuständigen Behälter um exakt den Betrag, den wir zuvor für die Position von mBild in main1 verwendeten. Das visuelle Ergebnis bleibt gleich. Welchen Weg Sie für eine Positionierung wählen, bleibt in diesen Fällen letztlich Ihrem Geschmack überlassen, da beide faktisch gleichwertig sind. Oft möchte man über bestimmte Eigenschaften hinaus auch Interaktionen definieren, so dass der Anwender beispielsweise per Klick auf die geladene Datei diese entfernen, ihren Inhalt oder eine ihrer Eigenschaften ändern kann. 10. Ergänzen Sie in main1 die Deklaration von init() vor der schließenden Klammer:

mRoot.onPress = function(){



}

 this._x += 50;

11. Generieren Sie eine swf.

Abbildung  60:  Eigenschaftsänderungen bei externen Ladevorgängen

Wenn Sie nun ganz verzweifelt auf der erzeugten swf-Datei herum klicken, ohne dass sich eine sichtbare Veränderung einstellt, so ist das völlig korrekt, schließlich setzt das onPress-Ereignis im zugeordneten Objekt visuellen Inhalt voraus, der einen Klick wahrnehmen kann. Anders stellt sich die Situation dar, sobald über index1 der externe Ladevorgang ausge-

20.2  Eigenschaften der geladenen Dateien

259

löst wird. Da mRoot aufgrund von loadMovie() mit mLaden identisch ist und dort eine Grafik angezeigt wird, können wir per Klick auf sie eine horizontale Bewegung erzeugen. Tatsächlich wird dabei jedoch nicht das Bild, sondern der übergeordnete MovieClip bzw. Behälter mLaden bewegt. Das können Sie testen, indem Sie nach mehrmaligem Verschieben erneut auf den Button in index1 klicken. Dann wird main1 neu geladen, befindet sich aber durch unser wiederholtes Klicken rechts von der ursprünglichen Position. Etwas anders gestaltet sich der Ablauf, wenn wir beispielsweise in main1 externe Daten laden und von dort aus mit ihnen interagieren wollten. Das wäre etwa bei einer Galerie der Fall, die externe Bilder lädt. Durch Mausklick sollen sie wieder entladen, alternativ das nächste Bild geladen werden. Das Problem dabei besteht darin, dass wir in die Grafik selbst kein Skript für einen Mausklick integrieren können. Das geht nur, indem wir dem MovieClip, in den wir laden, ein entsprechendes Ereignis zuweisen.

Es wird unsere geliebte Katze in der linken obere Ecke angezeigt. Wir speichern zunächst den benötigten Pfad in einer Variablen. Da wir mehrere Bilder laden wollen, legen wir in einem Array deren Namen fest. Noch flexibler wird man, wenn diese Namen aus einer externen Datei eingelesen werden, wie im Workshop zur Bildergalerie gezeigt. Um das erste Bild anzeigen zu können, initialisieren wir nBildIndex mit 0. In der init()-Funktion referenzieren wir in mBild einen leeren MovieClip, in den der Ladevorgang ausgeführt wird. Dabei bedienen wir uns derselben Ladefunktion, die wir zuvor in index definiert haben. An laden() übergeben wir als Parameter dasjenige Element des Bilder-Arrays, das sich auf der durch nBildIndex festgelegten Position befindet. Am Anfang handelt es sich dabei notwendigerweise um das erste Element. Nun möchten wir den Behälter abhängig von der Bildbreite in der Bühnenmitte positionieren und bei Klick auf die Grafik das nächste Bild laden.

1. Erstellen Sie eine Standarddatei und speichern sie im Ordner site als extBilder.fla ab. 2. Kopieren Sie in den Ordner site/bilder/main zwei weitere beliebige Grafiken. Wir verwenden beispielhaft gepard1.jpg und gepard5.jpg. 3. Fügen Sie in actions folgendes Bildskript ein:

4. Ergänzen Sie die init()-Funktion nach dem Ladeaufruf um:

//-----------––– vars –------------- var mBild:MovieClip;

 var sBildPfad:String = „bilder/ main/“; var nBildIndex:Number = 0;

v ar aBilder:Array = [„gepard1.jpg“, „gepard5.jpg“, „gepard7.jpg“];

//------------- functions –--------- function init() {

 mBild = this.createEmptyMovie Clip(„behBild“, this.getNextHigh­ estDepth()); laden(sBildPfad+aBilder[nBild­  Index], mBild); }

 function laden(pWas:String, pZiel:MovieClip):Void {  pZiel.loadMovie(pWas); }

//------------ start –-------------- init();

 mBild._x = Stage.width/2 – mBild._ width/2;

Das Bild wird, wenn nicht alles täuscht, keinesfalls exakt in der Bühnenmitte, sondern nach rechts verschoben angezeigt, wie Abbildung 61 verdeutlicht. Zwei Gründe sind dafür verantwortlich:

• Ein Ladevorgang wird unabhängig von seiner Posi-

tion im Skript immer zum Schluss ausgeführt. Die Breite des MovieClips kann daher bei der Zuweisung der horizontalen Position nur 0 betragen. • Erschwerend kommt hinzu, dass ein externer Ladevorgang immer Zeit benötigt. Dies sieht zwar momentan anders aus, schließlich taucht die Grafik sofort auf. Aber das liegt an der Testumgebung, die lokal abläuft. Würde die Grafik über ein Netzwerk, etwa über das Internet, geladen, träte eine Verzögerung auf. Unsere Positionsberechnung ergibt daher als Wert halbe Bühnenbreite minus die Hälfte von 0, was faktisch eben der halben Bühnenbreite entspricht. An dieser Stelle liegt der MovieClip und die Grafik wird dort mit der linken oberen Ecke eingefügt. Daher benötigen wir eine Möglichkeit, den Abschluss des Ladevorgangs zu kontrollieren, um danach die korrekte Position herauszufinden.

260

Kapitel 20  Externe Assets

Abbildung 61:  Fehlerhafte Positionierung einer extern geladenen Grafik

Es bieten sich gleich mehrere Möglichkeiten an, von denen wir uns zwei im nächsten Abschnitt über Preloader näher anschauen werden. Hier soll nur eine recht einfache zur Sprache kommen, die so eigentlich gar nicht von dem Hersteller von Flash gedacht gewesen ist. 5. Erweitern Sie den Variablen-Block (Fettdruck): var mBild:MovieClip, mCode:MovieClip;

6. Erweitern Sie die Deklaration von init() nach der Initialisierung von mBild:  mCode = this. createEmptyMovieClip(„behCode“, this. getNextHighestDepth());

7. Ändern Sie die Deklaration von init() unmittelbar nach dem Aufruf des Ladevorgangs (Fettdruck): mCode.onEnterFrame = function() { if (mBild._width>10) {

trace(„habefertisch!“);

 mBild._x = Stage.width/2-mBild._ width/2; delete this.onEnterFrame; } };

Bei einem Test wird das Bild in der Bühnenmitte angezeigt. Wir nutzen die Tatsache aus, dass die zu ladende Datei visuellen Content enthält. Zunächst richten wir wieder unsere Variable zur Aufnahme einer Referenz auf einen leeren MovieClip ein, der zusätzlich in init() erzeugt wird. Wir benötigen ihn, um ihm ein onEnterFrame-Ereignis zur Kontrolle des Ladevorgangs zuzuweisen. Dort lesen wir permanent die Breite des Ladebehälters aus. Erst wenn diese einen bestimmten Wert überschritten hat (hier können Sie prinzipiell alles wählen, was größer 0 und kleiner der tatsächlichen Bildbreite ist), wissen wir, dass der Ladevorgang erfolgreich beendet wurde. In diesem Fall streamt Flash nicht, so dass es nur zwei mögliche Werte für die abgefragte Breite gibt: 0 und Bildbreite. Ist letztgenannter Wert erreicht, gibt die if-Bedingung true zurück und der abhängige Code wird ausgeführt, mit dem wir ein trace() ausgeben, die Positionierung korrekt vornehmen und das nicht mehr benötigte Ereignis löschen. Einen genaueren Einblick in den Ablauf gewinnen wir, wenn Flash den Download simuliert. 8. Generieren Sie wie gewohnt eine swf-Datei. 9. Wählen Sie im am oberen Rand eingeblendeten Menü . Das Ergebnis zeigt Abbildung 62.

20.2  Eigenschaften der geladenen Dateien

261

Abbildung 62:  Bandbreiten-Profiler zur Kontrolle des Ladevorgangs

10. Wählen Sie im Menü <56 K>, wie in Abbildung 63 gezeigt. 11. Wählen Sie im Menü .

 function ladeKontrolle(pZiel:Movie­ Clip):Void {

Nun zeigt Flash im Bandbreiten-Profiler den Fortschritt eines Ladevorgangs, der über ein eher älteres Modem mit Handkurbel stattfindet. Abbildung  64 zeigt einen Ausschnitt aus dem Ladevorgang. Wie Sie sehen können, verstreicht eine deutlich wahrnehmbare Zeit, während derer die benötigten Datenpakete geladen werden.

trace(„habefertisch!“);

12. Erstellen Sie im Funktions-Block folgende Deklaration:  function ladeKontrolle(pZiel:Movie­ Clip):Void {

}

13. Verschieben Sie aus init() alle Zeilen von mCode.onEnterFrame = function(){ bis zur zugehörigen schließenden Klammer in diese Deklaration (Fettdruck):

mCode.onEnterFrame = function() { if (mBild._width>10) {

 mBild._x = Stage.width/2mBild._width/2; delete this.onEnterFrame; } };

}

14. Ersetzen Sie in der Deklaration von ladeKont­ rolle() mBild durch pZiel (Fettdruck):  function ladeKontrolle(pZiel:Movie­ Clip):Void {

 mCode.onEnterFrame = function() {  if (pZiel._width>10) {

 trace(„habefertisch!“);

 pZiel._x = Stage.width/2pZiel._width/2;

262

Abbildung 63:  Konfiguration der Download-Simulation

Abbildung 64:  Simulation eines externen Ladevorgangs

Kapitel 20  Externe Assets

20.3  Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())

 delete this.onEnterFrame; }

263

20.3 Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())

};

}

15. Rufen Sie die neue Funktion innerhalb von la­ den() vor der schließenden Klammer auf:

ladeKontrolle(mBild);

Indem wir die gesamte Kontrolle des Ladevorgangs ausgelagert haben, können wir diese nun zu einem beliebigen Zeitpunkt ausführen. Der Einfachheit halber lassen wir sie jedes Mal ausführen, sobald die Ladefunktion aufgerufen wird. Den direkten Bezug auf mBild ersetzen wir in der Funktion ladeKon­ trolle() durch den Parameter pZiel, so dass wir auch andere MovieClips als Ziel übergeben können. 16. Ergänzen Sie die Deklaration von ladeKont­ rolle() unmittelbar vor delete um:

pZiel.onPress = function() {

 nBildIndex++;

 if (nBildIndex>=aBilder.length) {  nBildIndex = 0; }



laden(sBildPfad+aBilder[nBild­  Index], this); };

Sie können jetzt nach Herzenslust laden und jeweils den Ladevorgang kontrollieren. Durch einen Mausklick wollen wir das jeweils nächste Bild laden. Das geht jedoch nur, wenn ein bestehender Ladevorgang vollständig abgeschlossen wurde. Weisen wir vorher mBild ein Ereignis zu, wird es durch loadMovie() überschrieben. Daher müssen wir das betreffende Ereignis in die Funktion zur Ladekontrolle verschieben und können es erst innerhalb des von der if-Bedingung abhängigen Codes definieren. Wir legen dort fest, dass ein Klick auf den Bild-Behälter die Index-Variable inkrementiert. Ist sie größer oder zumindest gleich der Länge des BilderArrays, haben wir bereits das letzte Bild angezeigt und setzen sie wieder zurück auf den Ausgangswert. Abschließend erfolgt derselbe Ladeaufruf wie bereits in der init()-Funktion.

Wie wir gesehen haben, zwingt uns die zeitliche Verzögerung, die beim Laden auftritt, in manchen Fällen dazu, den gesamten Prozess zu kontrollieren. Sollte dieser Prozess längere Zeit in Anspruch nehmen, so empfiehlt sich aus Gründen der Usability ein entsprechendes Feedback an den User. Andernfalls könnte der Eindruck entstehen, die Anwendung sei abgestürzt, da sich ihr aktueller Zustand in visueller Hinsicht nicht ändert. In solchen Fällen kommt der berühmte Preloader zum Einsatz, der grafisch oder zumindest textuell über den Fortschritt des Ladevorgangs informiert. ActionScript bietet mehrere Möglichkeiten, den Verlauf eines externen Ladevorgang zu protokollieren. Die älteste Methode vergleicht die Anzahl der aktuell geladenen Frames mit der Gesamtanzahl der Frames, jeweils bezogen auf die swf-Datei, die geladen wird. Ein solches Vorgehen ist heute allenfalls noch von historischem Interesse und sollte nicht mehr verwendet werden. Denn sie setzt voraus, dass ein Flashfilm mehr als einen Frame umfasst und dass der Content gleichmäßig über alle Frames verteilt ist. Trifft Letzteres nicht zu, kommt es beim Anzeigen des Ladefortschritts zu unschönem Ruckeln. Wenn beispielsweise der erste Frame 50 % des Contents umfasst, zeigt der Ladebalken lange Zeit nichts an, um dann plötzlich auf die 50 %- Marke zu springen. Eine Alternative bieten die getBytesLoaded()und getBytesTotal()-Methoden, die unabhängig von der konkreten Verteilung des Contents lediglich die Bytes kontrollieren, sowie die MovieClipLoaderKlasse. Obwohl Letztere erheblich größere Funktionalität besitzt, wird die ältere Methode mit get­ BytesLoaded() immer noch sehr viel verwendet, da sie ausgesprochen einfach funktioniert. Wir werden nachfolgend beide Varianten vorstellen. Die ältere Methode lässt sich mit Hilfe des Codes aus der vorherigen Übung sehr einfach umsetzen. 1. Speichern Sie die Datei aus der vorhergehenden Übung im Ordner site unter dem Namen pre­ loader1 ab. Alternativ erstellen Sie ein Standarddatei mit folgendem Bildskript: //-------------- vars –--------------

var mBild:MovieClip, mCode:MovieClip;

 var sBildPfad:String = „bilder/main/“;

264

Kapitel 20  Externe Assets

var nBildIndex:Number = 0;

dessen dritter Zeile. Genau an diese Stelle können wir unter Beibehaltung des ganzen übrigen Codes die veränderte Kontrolle eintragen.

//----------- functions –------------

2. Ändern Sie in der Deklaration von ladeKont­ rolle() die if-Bedingung unmittelbar nach der öffnenden Klammer des onEnterFrame-Ereignisses (Fettdruck):

v ar aBilder:Array = [„gepard1.jpg“, „gepard5.jpg“, „gepard7.jpg“]; function init() {

 mBild = this. createEmptyMovieClip(„behBild“, this.getNextHighestDepth());  mCode = this. createEmptyMovieClip(„behCode“, this.getNextHighestDepth());

laden(sBildPfad+aBilder[nBildIndex],  mBild); }

 function laden(pWas:String, pZiel:MovieClip):Void {  pZiel.loadMovie(pWas);  ladeKontrolle(pZiel); }

function ladeKontrolle(pZiel):Void {  mCode.onEnterFrame = function() {  if (pZiel._width>10) {

 trace(„habefertisch!“);

 pZiel._x = Stage.width/2pZiel._width/2;

 pZiel.onPress = function() {  nBildIndex++;

 if (nBildIndex>=aBilder. length) {  nBildIndex = 0; }

laden(sBildPfad+aBilder[nBild  Index], this); };

 delete this.onEnterFrame; } };

function ladeKontrolle() {

 mCode.onEnterFrame = function() {  if (mBild.getBytesLoaded ()>=mBild.getBytesTotal()) {

Ein Test mit Hilfe der Download-Simulation ergibt prinzipiell das gleiche Ergebnis wie in der vorhergehenden Version. Anstelle der Breite kontrollieren wir unmittelbar den Ladefortschritt anhand der aktuell geladenen Bytes im Vergleich zu den insgesamt zu ladenden Bytes. Den letztgenannten Wert ermittelt Flash automatisch beim Aufruf des Ladevorgangs. Erst dann, wenn beide Werte mindestens übereinstimmen, wurden alle Daten geladen und können wir auf den Content zugreifen. Soweit waren wir vorher zwar auch schon, doch bietet uns diese Vorgehensweise die Möglichkeit, herauszufinden, wie viele Daten zu einem beliebigen Zeitpunkt während des Ladevorgangs bereits geladen wurden. Die benötigte Information wird in der getBytesLoaded()-Methode zur Verfügung gestellt. Damit lässt sich ein unmittelbares Feedback an den wartenden User geben. Eine kleine Ungenauigkeit muss noch korrigiert werden: Da der erste Frame Flash-intern anders etwas ausgeführt wird als alle anderen Frames, kommt es hier zu einer ungewünschten Behandlung des Ladevorgangs. Denn weder die Breite des Behälters wird nach Abschluss des Ladens korrekt erkannt noch reagiert er auf Mausklicks. Flash fügt das Bild wie bei unseren ersten Ladeversuchen rechts von der Mitte ein.

}

3. Verschieben Sie das komplette Skript in Frame 2 der Hauptzeitleiste. 4. Fügen Sie ganz am Ende des Skripts ein:

init();

stop();

Wie wir gesehen haben erfolgt hier die Kontrolle des Ladevorgangs einfach über die Breite des Behälters für den externen Content. Die entsprechende Stelle findet sich in der Funktion ladeKontrolle() in

Jetzt funktioniert die Ladekontrolle wie gewünscht. Der stop()-Befehl ist notwendig, da unsere Zeitleiste nun mehr als einen Frame umfasst. In solchen Fällen loopt Flash automatisch, was dazu führen würde, dass

//––----------- start –--------------

20.3  Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())

265

die Ladefunktion ständig aufgerufen würde, ohne jemals abgeschlossen zu werden. Durch den genannten Befehl erzwingen wir ein Anhalten im zweiten Frame. Sollte dennoch gelegentlich  – ja, auch Flash hat seine schwachen Momente – die Breite falsch ausgelesen werden, so können Sie sicherheitshalber nach der bisherigen if-Bedingung die vorherige hinsichtlich der Breite zusätzlich einfügen (Fettdruck):

konkreten Inhalt anzeigen wollen, positionieren wir mCode an einer Stelle, die ungefähr derjenigen des geladenen Bildes entspricht.

if (pZiel.getBytesLoaded()>=pZiel.get­ BytesTotal()) {

Ein Test mit eingeschalteter Simulation zeigt einen zugegebenermaßen noch recht bescheiden dreinschauenden, dafür aber recht schnell hochzählenden Text an, in dem wir die Anzahl der geladenen Bytes sehen können. Dies erreichen wir, indem in das Feld mit Hilfe der Methode getBytesLoaded() der aktuelle Wert hinein geschrieben wird. Das ist allerdings noch nicht wirklich aussagekräftig: Woher soll der Anwender wissen, was da angezeigt wird? Und welche Aussagekraft hat der Text in Bezug auf die Gesamtgröße der Daten?

if (pZiel._width>10) {

Die schließende Klammer muss dann nach der Anweisung delete this.onEnterFrame; gesetzt werden. Das ist nun ein bisschen Overkill, aber es bietet die Sicherheit, im Fall der Fälle eine korrekte Positionierung durchzuführen. Hinsichtlich der Zuweisung des onPress-Ereignisses existiert dieses Problem nicht. 5. Erweitern Sie den Variablen-Block:

7. Fügen Sie in der Deklaration von ladeKont­ rolle() unmittelbar nach der öffnenden Klammer des onEnterFrame-Ereignisses ein:  tProzent.text = String(pZiel.get­ BytesLoaded());

var tProzent:TextField;

8. Fügen Sie in der Deklaration von ladeKont­ rolle() unmittelbar nach der öffnenden Klammer ein:

6. Erweitern Sie die Deklaration von init() nach der Initialisierung von mCode:

 var nAktuellBytes:Number, nTotal:Number;

mCode._x = Stage.width/2; mCode._y = 50;

 tProzent = mCode. createTextField(„txt“, mCode.getNext­ HighestDepth(), 0, 0, 50, 25); tProzent.autoSize = „left“;

Wir erstellen eine Variable zur Referenzierung eines Textfelds, das in der init()-Funktion mit einigen Standardwerten erzeugt wird:

• txt, der Instanzname, • mCode.getNextHighestDepth(), die Tiefe, • 0,0, Position, • 50, 25, Breite und Höhe. Die beiden letztgenannten Werte sind eigentlich irrelevant, da wir die konkrete Größe an den Textinhalt anpassen. Erzeugt wird das Textfeld der Einfachheit halber in mCode; alternativ hätten wir auch einen eigenen MovieClip erstellen können. Nicht möglich dagegen wäre das Einfügen des Feldes in mBild, da dort der gesamte Inhalt sofort nach Start des Ladevorgangs bekanntermaßen gelöscht wird. Weil wir im Textfeld

9. Fügen Sie in der Deklaration von ladeKont­ rolle() im onEnterFrame-Ereignis unmittelbar nach dessen öffnenden Klammer ein:  nTotal = pZiel.getBytesTotal()/1000;  nAktuellBytes = pZiel.getBytesLoa­ ded()/1000;

10. Ändern Sie die Zuweisung von tProzent.text (Fettdruck):  tProzent.text = String(nAktuell Bytes)+“ Kilobytes von \n“+nTotal+“ Kilobytes geladen“;

Wir erhalten bei der Simulation des Downloads eine Angabe über die geladenen Bytes und die insgesamt zu ladenden Bytes. Wir legen in der Funktion ladeKontrolle() zwei lokale Variablen an, die die gewünschten Werte aufnehmen sollen. Im onEnterFrame-Ereignis lesen wir diese Werte aus und dividieren sie durch 1000 bzw. verschieben die Kommastelle um drei Zeichen nach links, so dass unser Ergebnis lesbarer wird. An-

266

Kapitel 20  Externe Assets

schließend weisen wir dem Textfeld die betreffenden Werte in einer Konkatenation zu, d. h. verknüpft mit weiterem Informationstext. Um die Zeile nicht zu lange werden zu lassen, fügen wir zwischendurch einen Zeilenumbruch mit \n ein. Auf den ersten Blick mag es überflüssig scheinen, permanent auch die Gesamtmenge der zu ladenden Daten auszulesen, schließlich kann sie sich nicht ändern. Da die loadMovie()-Methode aber erst Auswirkungen zeitigt, nachdem die übrigen Zeilen abgearbeitet wurden, liegen uns vor Beginn des onE­ nterFrame-Ereignisses noch keine Informationen bezüglich der Bytes vor. Das können Sie testen, indem Sie vorübergehend unmittelbar nach der Deklaration der beiden lokalen Variablen und noch vor Deklaration des onEnterFrame-Ereignisses eintragen: trace(„Gesamt: „+pZiel.getBytesTo­ tal()+“, geladen: „+pZiel.getBytesLoa­ ded());

Als Ergebnis gibt Flash zwei überaus bescheidene Nullen aus, obwohl im Skript die Funktion la­ deKontrolle() mit dieser Ausgabe nach der loadMovie()-Methode aufgerufen wird. Der Ladevorgang hat also noch nicht gestartet. 11. Fügen Sie in der Deklaration von ladeKont­ rolle() innerhalb der (inneren) if-Bedingung ein:

tProzent.text = „“;

Da der Text bisher auch nach Abschluss des Ladens noch angezeigt wurde, löschen wir ihn einfach, indem wir dem verwendeten Textfeld einen leeren String zuweisen. Bevor wir uns weitere Möglichkeiten anschauen, bleibt noch eine kleine Ergänzung, nämlich der Schlagschatten. 12. Fügen Sie am Beginn des Codes einen ImportBlock ein:

//------------ import –-------------

import flash.filters.*;

13. Erweitern Sie den Variablen-Block am Ende um:

var fSchatten:DropShadowFilter;

14. Fügen Sie in der init()-Funktion unmittelbar nach der öffnenden Klammer ein:  fSchatten = new DropShadowFilter(5, 45, 0 × 000000, 0.9, 5, 5, 1, 3);

15. Fügen Sie in der Deklaration von ladeKont­ rolle() vor der Zuweisung des onPress-Ereignisses ein:

pZiel.filters = [fSchatten];

Wie in einer der vorhergehenden Übungen verfügt das angezeigte Bild über einen Schlagschatten. Da die Vorgehensweise sich gegenüber dieser Übung nicht geändert, erübrigt sich hier eine nähere Erläuterung. Wichtig ist lediglich die Stelle, an der wir den Filter zuweisen. Dies muss dann erfolgen, wenn das Bild vollständig geladen wurde, d. h. der Code steht innerhalb unserer (inneren) if-Bedingung. Da die filters-Eigenschaft durch den Ladevorgang gelöscht wird, haben wir nicht die Möglichkeit, zu Beginn bei Einrichten von mBild den gewünschten Filter zuzuweisen. Preloader geben oft statt konkreter Werte einen prozentualen Anteil wieder. Er lässt sich mit einem Dreisatz ermitteln, in dem die bekannten Werte zu dem gesuchten Wert in Beziehung gesetzt werden. Dabei gilt: Geladene Bytes Gesamtanzahl Bytes

=

Gesuchte Prozent 100 Prozent

Wenn wir nach dem gesuchten Wert auflösen, erhalten wir: Geladene Bytes * 100 Prozent Gesuchte = Prozent Gesamtanzahl Bytes Daraus ergibt sich die Formel: nAktuellBytes * 100 nTotal

= nProzent

16. Erweitern Sie in der Deklaration von ladeKont­ rolle() die Variableninitialisierung unmittelbar nach der öffnenden Klammer (Fettdruck):  var nAktuellBytes:Number, nTotal:Number, nProzent:Number;

17. Ändern Sie in der Deklaration von ladeKont­ rolle() im onEnterFrame-Ereignis die Berechnung von nAktuellBytes und nTotal (Fettdruck):

nTotal = pZiel.getBytesTotal();

 nAktuellBytes = pZiel.getBytesLoaded();

20.3  Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())

18. Fügen Sie unmittelbar nach dieser Berechnung ein:  nProzent = Math. round((nAktuellBytes*100)/nTotal);

19. Ändern Sie in der darauffolgenden Zeile die Zuweisung von tProzent.text (Fettdruck):  tProzent.text = String(nProzent)+“ Prozent geladen“;

Anstelle der vorherigen Bytes-Angaben zeigt Flash beim Ladevorgang den Prozentwert der geladenen Daten an. Zur Berechnung benötigen wir eine weitere lokale Variable, die wir am Anfang der Funktion einrichten. In die bisher verwendeten beiden Variablen speichern wir wiederum die geladene und die Gesamtdatenmenge, verzichten diesmal aber auf eine Verschiebung der Kommastellen, da wir später ohnehin das Ergebnis runden. Anschließend errechnen wir den benötigten Wert entsprechend der oben vorgestellten Formel und runden das Ergebnis, um es in einer vernünftigen Form anzeigen zu können. Ohne Math. round() würden wir eine aufgrund zahlreicher unnötiger Nachkommastellen sehr unlesbare Zahl erhalten. Das Ergebnis weisen wir wie zuvor dem Textfeld zu, wobei sich hier ein Hinweis auf die Gesamtmenge erübrigt, da sie notwendigerweise 100  Prozent entspricht. Unser Ergebnis lässt sich natürlich auch grafisch umsetzen, wobei wir lediglich einen Zusammenhang herstellen müssen zwischen dem ermittelten Prozentwert und der Ausdehnung eines visuell wahrnehmbaren Objekts. In der simpelsten Form handelt es sich dabei um einen sogenannten Ladebalken, den wir anstelle des Textfeldes verwenden wollen.

267

var nBildIndex:Number = 0;

v ar aBilder:Array = [„gepard1.jpg“, „gepard5.jpg“, „gepard7.jpg“]; var fSchatten:DropShadowFilter;

//----------- functions –----------- function init() {

 fSchatten = new DropShadowFilter(5, 45, 0 × 000000, 0.9, 5, 5, 1, 3);  mBild = this. createEmptyMovieClip(„behBild“, this.getNextHighestDepth());  mCode = this. createEmptyMovieClip(„behCode“, this.getNextHighestDepth());  mCode._x = Stage.width/2;  mCode._y = 50;

 tProzent = mCode. createTextField(„txt“, mCode.getNextHighestDepth(), 0, 0, 50, 25); tProzent.autoSize = „left“;

laden(sBildPfad+aBilder[nBild­  Index], mBild); }

 function laden(pWas:String, pZiel:MovieClip):Void {  pZiel.loadMovie(pWas);  ladeKontrolle(pZiel); }

 function ladeKontrolle(pZiel:Movie­ Clip):Void {  var nAktuellBytes:Number, nTotal:Number, nProzent:Number;

 mCode.onEnterFrame = function() {

1. Der Einfachheit halber speichern Sie die bestehende Datei im selben Ordner unter einem anderen Namen. 2. Löschen Sie alle Bezüge auf das eingefügte Textfeld (Fettdruck):

 nTotal = pZiel.getBytesTotal();

//------------ import –--------------

 tProzent.text = String(nProzent)+“ Prozent geladen“;

import flash.filters.*;

//------------ vars –----------------

var mBild:MovieClip, mCode:MovieClip; var tProzent:TextField;

 var sBildPfad:String = „bilder/ main/“;

 nAktuellBytes = pZiel.getBytes­ Loaded();  nProzent = Math. round((nAktuellBytes*100)/ nTotal);

 if (pZiel. getBytesLoaded()>=pZiel.getBy­ tesTotal()) {  if (pZiel._width>10) {

 trace(„habefertisch!“);

268

Kapitel 20  Externe Assets

tProzent.text = „“;

 mBalken.moveTo(0, 0);

 pZiel.filters = [fSchatten];

 mBalken.lineTo(pBreite, nBalken­ Hoehe);

 nBildIndex++;

 mBalken.lineTo(0, 0);

 pZiel._x = Stage.width/2pZiel._width/2;

 pZiel.onPress = function() {  if (nBildIndex>=aBilder. length) {  nBildIndex = 0;

 mBalken.lineTo(pBreite, 0);

 mBalken.lineTo(0, nBalkenHoehe);  mBalken.endFill(); }

}

6. Fügen Sie in der Deklaration von ladeKont­ rolle() unmittelbar vor dem onEnterFrameEreignis ein:

};

balken(nBalkenBreite, 100, 0);

laden(sBildPfad+aBilder[nBi  ldIndex], this);  delete this.onEnterFrame; } } }; }

//------------ start –-------------- init(); stop();

Wenn wir einen Ladebalken verwenden wollen, können wir zwischen mehreren Varianten wählen:

• Händisches Zeichnen eines MovieClips; • draw()-Methode der BitmapData-Klasse; • Zeichnungsmethoden der MovieClip-Klasse. Wir wählen beispielhaft den letztgenannten Weg. 3. Erweitern Sie den Variablen-Block: var nBalkenBreite:Number = 100; var nBalkenHoehe:Number = 10;

4. Erweitern Sie die Deklaration von init() nach der Initialisierung von mBalken: mBalken._x –= nBalkenBreite/2;

5. Erweitern Sie den Funktions-Block:  function balken(pBreite:Number, pAlphaRahmen:Number, pAlphaFuell:Number):Void {

 mBalken.lineStyle(2, 0 × 000000, pAlphaRahmen);

 mBalken.beginFill(0xff0000, pAlpha­ Fuell);

7. Fügen Sie in der Deklaration von ladeKont­ rolle() unmittelbar nach der Berechnung von nProzent ein: mBalken.clear();

balken(nBalkenBreite, 100, 0); balken(nProzent, 0, 100);

8. Fügen Sie in der Deklaration von ladeKont­ rolle() in der (inneren) if-Bedingung vor der Positionierung von pZiel ein: mBalken.clear();

Im Grunde genommen benötigen wir zwei Zeichenvorgänge: Erstellen des äußeren Rahmens, der unverändert beibehalten wird, solange der Ladevorgang läuft, und Zeichnen der Füllung entsprechend des errechneten Prozentwerts. Eine Füllung setzt allerdings einen Rahmen voraus, innerhalb dessen sie sich befindet. Wir müssen daher für die Füllung einen weiteren Rahmen zeichnen, auch wenn er faktisch nur als Hilfsmittel benötigt wird. Wir könnten nun zwei verschiedene Funktionen erstellen, von denen eine nur einen Rahmen, die zweite Füllung und Rahmen zeichnet. Alternativ wäre es auch möglich, alles in eine einzige Funktion hinein zu packen, wobei wir dann allerdings Acht geben müssen, dass sich Rahmen und Füllung beliebig ausschalten lassen. Das funktioniert mit einer if-Bedingung oder noch einfacher, indem wir diejenigen Elemente, die unsichtbar sein sollen, zwar zeichnen, ihre Deckkraft aber auf 0 reduzieren. Solange wir mit wenigen und in der Ausdehnung beschränkten Objekten arbeiten, ergeben sich daraus keine Performance-Einbußen.

20.3  Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded())

Wir legen zunächst zwei Variablen fest, in denen die Werte für die Ausdehnung des Ladebalkens enthalten sind, wenn er zu 100 % gefüllt ist. Um uns weitere Berechnungen zu ersparen, werden einfach 100 für die Breite und ein willkürlicher Wert für die Höhe verwendet. Wenn wir unser externes Bild horizontal mittig positionieren, dann sollten wir dasselbe mit dem Ladebalken tun. Das geschieht, indem innerhalb des horizontal mittig angeordneten Clips mCode der neu erstellten Clip mBalken um die halbe Balkenbreite nach links verschoben wird. In dem Fall wird er 50 Pixel links von der Mitte beginnen sich zu füllen, und ebenso viele Pixel rechts von der Mitte den Zeichenprozess beenden. Wenn die Funktion balken() zunächst etwas komplex ausschaut, so nur deshalb, weil sie variabel genug sein muss, um mehrere Möglichkeiten abzudecken. Sie enthält drei Parameter:

• pBreite,

diejenige horizontale Position, bis zu der ein Rahmen gezeichnet werden soll; • pAlphaRahmen, die Deckkraft des Rahmens • pAlphaFuell, die Deckkraft der Füllung. Innerhalb der Funktion legen wir einen Linienstil mit folgenden Eigenschaften fest:

269

• 0xff0000, rote Farbe; • pAlphaFuell, Deckkraft. Falls keine Füllung erwünscht ist, übergeben wir 0.

Das eigentliche Zeichnen beginnt mit der Positionierung des Zeichenstiftes auf dem Koordinatenursprung des MovieClips, in dem gezeichnet wird. Von dort aus ziehen wir eine horizontale Linie nach rechts entsprechend des als Parameter übergebenen Wertes. Benötigen wir den äußeren Rahmen, entspricht dieser Wert 100 bzw. der anfangs festgelegten Variable nBal­ kenBreite. Da sich die Höhe nie ändert, zeichnen wir von dort nach unten ebenfalls entsprechend einer zuvor deklarierten Variable. Die beiden nächsten Linien verlaufen horizontal zurück zum Ausgangspunkt und anschließend vertikal zurück zum Koordinatenursprung. Damit entsteht ein geschlossenes Rechteck, dessen horizontale Ausdehnung einmal von der eingangs initialisierten Variable und einmal von dem errechneten Prozentwert bestimmt wird, je nachdem, an welcher Stelle wir die Funktion aufrufen. Abbildung  65 visualisiert diesen Vorgang, wobei sich die angegebenen Zahlen auf die Zeichnungsreihenfolge (Endpunkt einer Linie) beziehen. Benötigen wir keine Füllung, wird der äußere Rahmen erstellt und die Parameter lauten

• 2, Stärke der Linie. Wir wählen einen etwas hö- • Rahmenbreite nBalkenBreite, heren Wert, um später beim Füllen die RahmenliDeckkraft Rahmen 100 nie noch erkennen zu können. Bei einem kleineren • Deckkraft Füllung 0. Wert müssten wir die Füllung etwas kleiner zeich- • nen oder einen eigenen MovieClip anlegen, der sich hinter demjenigen für den Rahmen befinden würde; • 0 × 000000, schwarze Farbe; • pAlphaRahmen, Parameter für die Deckkraft der Linie. Benötigen wir keinen Rahmen, übergeben wir beim Aufruf für diese Stelle einfach 0. Wir legen eine Füllung mit folgenden Eigenschaften fest:

Um die Füllung zu erhalten, übergeben wir dagegen:

• Rahmenbreite nProzent, • Deckkraft Rahmen 0 • Deckkraft Füllung 100. Aufgerufen wird die Funktion einmal unmittelbar nach Start eines Ladevorgangs, um den äußeren Rahmen zu erstellen. Danach führen wir sie jeweils zweimal permanent mit verschiedenen Argumenten solange aus, bis alle Daten geladen wurden. Die doppelte Ausfüh-

Abbildung 65:  Zeichnen der Elemente des Ladebalkens

270

Kapitel 20  Externe Assets

rung ist deshalb notwendig, weil wir, um den neuen Füllwert darstellen zu können, jedes Mal den alten mit der clear()-Methode löschen. Da die Zeichnung innerhalb eines einzigen MovieClips erfolgt, geht dadurch jedoch zugleich unser äußerer Rahmen verloren, so dass er zusammen mit der Füllung wieder neu erstellt werden muss. Optisch macht es übrigens keinen Unterschied, ob wir hier löschen; wir könnten darauf verzichten und würden uns den Aufruf von balken() für den äußeren Rahmen ersparen, aber so ist es formal korrekter. Ganz zum Schluss, wenn wir feststellen, dass die Grafik vollständig vorhanden ist, entfernen wir die Zeichnung, so dass kein Balken mehr sichtbar ist. Bessere Usability erhalten wir, wenn zusätzlich zur grafischen eine textuelle Darstellung erfolgt. Wir können dabei auf der vorhergehenden Übung aufbauen. 9. Ergänzen Sie den Variablen-Block:

var tProzent:TextField;

10. Erweitern Sie die Deklaration von init() unmittelbar vor dem Aufruf von laden():  tProzent = mCode. createTextField(„txt“, mCode.get­ NextHighestDepth(), 0, 10, 50, 25);

tProzent.autoSize = „left“;

11. Fügen Sie in der Deklaration von ladeKont­ rolle() im onEnterFrame-Ereignis nach dem zweiten Aufruf von balken() ein:  tProzent.text = String(nProzent)+“ Prozent geladen“;  tProzent._x = nProzent-nBalken­ Breite/2;

12. Fügen Sie in der Deklaration von ladeKont­ rolle() unmittelbar vor dem onPress-Ereignis ein:

tProzent.text = „“;

Bei einer Ladesimulation taucht der Text neben dem Ladebalken auf. Das Einrichten des Textfeldes unterscheidet sich nicht von vorher. Neu ist lediglich die Positionierung, die sich nach dem aktuellen Prozentwert richtet. Da das Textfeld wie mBalken in mCode eingefügt, der Zeichenbehälter aber um halbe Balkenbreite nach links verschoben wurde, müssen wir diesen Versatz bei der Anzeige berücksichtigen. Konkret bedeutet

dies, dass vom aktuellen Prozentwert besagte halbe Balkenbreite zu subtrahieren ist. Sie können gerne die Gegenprobe machen, indem Sie auf die Subtraktion verzichten. In dem Fall wird der Text viel zu weit rechts angezeigt. Alternativ können Sie ihn auch mittig zum Prozentwert ausrichten, indem Sie nBalken­ Breite subtrahieren. Hier sind natürlich zahlreiche Varianten und Ergänzungen denkbar. So könnte man nach dem gleichen Prinzip einen maskierten Text als Preloader verwenden und ihn sukzessive freigeben. Denkbar wäre ein kreisförmiger Preloader, bei dem eine vollständige Drehung von 360 Grad 100 Prozent und eine Drehung um 3,6 Grad 1 Prozent entsprechen würde. Auf der Basis dieser Information über den aktuellen Ladezustand könnte man zusätzlich errechnen, wie lange der Ladevorgang noch ungefähr dauern wird. Dabei muss man nur die verstrichene Zeit und bereits geladene Datenmenge in Bezug zur gesamten Datenmenge setzen. Eine derartige Angabe kennt jeder von seinem Betriebssystem, das beim Kopieren von Daten die voraussichtliche Gesamtdauer angibt. Dabei gilt es jedoch zu beachten, dass technisch weniger versierte User – und davon gibt es immer noch eine recht große Menge – eher mit Unverständnis reagieren werden, wenn aufgrund der im Internet zwangsläufig vorhandenen schwankenden Datenübertragungsrate die verbleibende Zeit trotz Fortschritte des Ladevorgangs plötzlich ansteigt statt zu sinken (was zumindest prinzipiell möglich ist). Ladevorgänge sind immer lästig, was natürlich um so deutlicher zutrifft, je längere Zeit sie in Anspruch nehmen. Das kann man allerdings auch nutzen, indem der Anwender in dieser Zeit auf irgendeine Weise abgelenkt wird. Denkbar wäre eine kleine Interaktion etwa in Form eines simplen Spiels, das den Ladevorgang überbrückt. Geht man geschickt genug vor, wird das Laden sogar zu einer Werbung für die zu ladende Site.

20.4 Überblenden bei Ladevorgängen Beim Laden externer Dateien (swf oder Grafiken) per loadMovie()-Methode entstehen i. d. R. abrupte Übergänge: Während die zuvor geladene Datei sofort gelöscht wird, muss die neu aufgerufene Datei erst noch vollständig geladen werden, bevor Flash sie anzeigen kann. Das dadurch entstehende

20.4  Überblenden bei Ladevorgängen

Flackern zwischen den Ladevorgängen lässt sich auf mehrere Arten vermeiden. So wäre eine Verwendung von zwei Containern möglich, die jeweils mit swap­ Depths() ihre Tiefe vertauschen. Eine andere Möglichkeit vertauscht jeweils die Container, in die die neue Datei hineingeladen wird, ohne deren Tiefen zu verändern. Auch hier werden zwei Container verwendet: Einer enthält die vorher geladene Datei, der andere nimmt die neue Datei auf. Die Deckkraft des Containers für die neue Datei wird auf 0 reduziert, so dass er nicht zu sehen ist. Danach laden wir die neue Datei und kontrollieren den Ladevorgang. Liegt sie vollständig vor, blenden wir den Container mit der vorhergehenden Datei aus und gleichzeitig den Container mit der neuen Datei ein. Der resultierende Effekt ist der gleiche wie im Falle der swapDepths()Methode. 1. Erstellen Sie im Ordner site eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcBtn). 3. Benennen Sie dort die bestehende Ebene um in flaeche. 4. Fügen Sie eine neue Ebene namens info ein. 5. Zeichnen Sie auf flaeche beginnend an der Position –28, –12 ein 56 Pixel breites und 24 Pixel hohes Rechteck beliebiger Farbe. 6. Fügen Sie im Koordinatenursprung auf info ein dynamisches Textfeld ein (12, Verdana, beliebige Farbe, nicht auswählbar, zentriert, fett, Instanzname info). 7. Kehren Sie zur Hauptzeitleiste zurück. 8. Weisen Sie actions folgendes Bildskript zu: //---------------- vars –-----------  var mNav:MovieClip, mBtn:MovieClip, mLaden:MovieClip, mBild1:MovieClip, mBild2:MovieClip;  var mLadeNeu:MovieClip, mLadeAlt:MovieClip;

var nAbstand:Number = 5; var nLadeX:Number = 200; var nLadeY:Number = 100; var nAlpha:Number = 5;

 var sBildPfad:String = „bilder/ main/“;

v ar aBilder:Array = [„gepard1.jpg“, „gepard5.jpg“, „gepard7.jpg“]; var aBtns:Array = [];

271

Aufgrund der besonderen Vorgehensweise benötigen wir eine etwas größere Anzahl an MovieClips:

• mNav, einen Behälter für die Aufnahme der gesam-

ten Navigation bzw. der Buttons, die externe Elemente laden. • mLaden, einen Behälter, in dem alle MovieClips mit externen Ladevorgängen enthalten sind. Dieser und der vorhergehende Clip sind nicht unbedingt notwendig, entsprechen aber unserem bisherigen Vorgehen, bei dem wir logisch zusammengehörige Elemente in übergeordneten Behältern gruppieren, um unsere Flexibilität zu erhöhen. • mBtn, um jeweils die einzelnen Schaltflächen zu referenzieren. • mBild1 und mBild2, um die für externe Ladevorgänge zuständigen MovieClips zu referenzieren. • mLadeNeu und mLadeAlt, um jeweils die Reihenfolge der externen Ladevorgänge vertauschen zu können. Auf diese beiden hätten wir ebenfalls verzichten können, müssten uns aber dann mit längeren Pfadangaben herumschlagen, die eine potentielle Fehlerquelle darstellen. Die Variablen nAbstand, nLadeX und nLadeY dienen dazu, den vertikalen Abstand zwischen den Schaltflächen sowie die Position des übergeordneten Behälters zu definieren. Mit nAlpha legen wir denjenigen Wert fest, um den die externen Elemente ein- bzw. ausgeblendet werden. Wie zuvor auch initialisieren wir danach einen Pfad zu den gesuchten Elementen sowie ein Array, in dem die benötigten Dateinamen erfasst werden. Das abschließende Array wird benötigt, um später auf alle vorhandenen Buttons zuzugreifen. 9. Ergänzen Sie folgenden Funktions-Block: //------------- functions –-------- function init() {

 mNav = this.createEmptyMovieClip („behNavigation“, this.getNextHigh­ estDepth());  for (var i:Number = 0; i
 mBtn = mNav.attachMovie(„mcBtn“, „btn“+i, mNav.getNextHighest­ Depth()); mBtn._y  = i*(mBtn._ height+nAbstand);

 mBtn.info.autoSize = „center“;

 mBtn.info.text = „Bild „+(i+1);

272

 aBtns.push(mBtn); }

 mNav._x = mNav._y=mNav._width;

 mLaden = this.createEmptyMovieClip („behExterneassets“, this.getNext­ HighestDepth());  mBild1 = mLaden.createEmptyMovie­ Clip(„behBild1“, mLaden.getNext­ HighestDepth());  mBild2 = mLaden.createEmptyMovie­ Clip(„behBild2“, mLaden.getNext­ HighestDepth());  mLaden._x = nLadeX;

Kapitel 20  Externe Assets

10. Ergänzen Sie die Deklaration von init() in der Schleife unmittelbar nach Aufruf der push()Methode:

mBtn.onPress = function() {

 var nWas = Number(this._name.sub­ string(3));

 mLadeNeu.loadMovie(sBildPfad+aBild er[nWas]);  mLadeNeu._alpha = 0;

 mLaden.onEnterFrame = ladeKont­ rolle;

};

 mLaden._y = nLadeY;

11. Rufen Sie am Ende wie gewohnt die init()Funktion auf:

 mLadeAlt = mBild1;

 //-------------- start –-----------

 mLadeNeu = mBild2; }

Die init()-Funktion muss alle benötigten leeren Clips initialisieren. Der erste Code-Block bezieht sich dabei auf die gesamte Navigation sowie innerhalb der Schleife auf alle Buttons. Da wir so viele Buttons verwenden wollen, wie Bilder geladen werden können, richten wir die Schaltflächen entsprechend der Anzahl der in aBilder erfassten Elemente ein. Dem in jedem eingefügten MovieClip enthaltenen Textfeld wird ein String, bestehend aus „Bild“ sowie der Zählvariable i zuzüglich 1, zugewiesen, so dass sie die Beschriftungen „Bild 1“ bis „Bild 3“ tragen. Die Addition von 1 ist notwendig, da i mit 0 beginnt, der erste Button aber die Beschriftung „Bild 1“ zeigen soll. Der Einfachheit halber wird die Navigation so positioniert, dass sie zum linken und oberen Bühnenrand einen Abstand einhält, der der Breite eines Buttons (bzw. der gesamten Navigation) entspricht. Hier sind natürlich beliebig andere Werte möglich. Danach erzeugen wir drei leere MovieClips, von denen einer als übergeordneter Behälter, die übrigen als Behälter für die externen Elemente fungieren. Dem übergeordneten Behälter weisen wir eine willkürliche Position zu. Alternativ können Sie, wie in den vorhergehenden Übungen gesehen, eine Position in Abhängigkeit von der Größe der geladenen Elemente errechnen. Abschließend werden in zwei Variablen die leeren Behälter referenziert. An den Namen kann man bereits erkennen, welche Variable dabei auf denjenigen Behälter verweist, in den wir laden werden, nämlich mLadeNeu.



init();

Bei Mausklick wird jeweils ein Bild geladen, abhängig vom angeklickten Button. Abbildung 66 zeigt den Aufbau des Beispiels. Jede Schaltfläche erhält ein onPress-Ereignis, das alle Zeichen ab dem vierten Zeichen im Namen des angeklickten Elements ermittelt und in eine Zahl umwandelt. Da die zugewiesenen Instanznamen btn0 bis btn2 lauten, können wir das so ermittelte Zeichen einfach als Index des Arrays aBilder verwenden, um eine Verknüpfung zu einer externen Datei herzustellen. Dementsprechend laden wir in mLadeNeu die so gefundene Datei. Dem Zielort wird eine Deckkraft von 0 zugewiesen, da ansonsten ein sukzessives Einblenden nicht möglich wäre. In der letzten Anweisung rufen wir permanent eine Funktion zur Kontrolle des Ladevorgangs auf. Die ist hier insofern wichtig, als wir feststellen müssen, ab wann alle Daten zur Verfügung stehen, so dass der Zielort mit dem Einblenden beginnen kann. 12. Erweitern Sie den Funktions-Block um folgende Deklaration:

function ladeKontrolle() {

 if (mLadeNeu._width>=10) {

 this.onEnterFrame = function() {  if (mLadeAlt._alpha>0) {

 mLadeAlt._alpha –= nAlpha;

 mLadeNeu._alpha += nAlpha; } else {

20.4  Überblenden bei Ladevorgängen

273 Abbildung 66:  Aufbau der Anwendung

 mLadeNeu._alpha = 100;  mLadeAlt._alpha = 0;

 if (mLadeNeu == mBild2) {  mLadeAlt = mBild2;  mLadeNeu = mBild1; } else {

 mLadeAlt = mBild1;  mLadeNeu = mBild2; }

 delete this.onEnterFrame; } }; }

}

Nun blenden die extern geladenen Elemente langsam ein. Die Ladekontrolle umfasst zwei aufeinander folgende Vorgänge:

• Laden der externen Daten. Wie wir gesehen haben, können wir dabei getBytesLoaded() und/oder eine bekannte Eigenschaft des Ladebehälters verwenden. In letztgenanntem Fall ist auch die Initialisierung des Contens abgeschlossen, weswegen wir uns hier für diese Variante entscheiden (zumal die tatsächlich geladenen Bytes im aktuellen Zusammenhang ohne Bedeutung sind). • Aus- bzw. Einblenden der Ladebehälter.

Da der zweite von dem ersten Prozess abhängt, müssen wir in der Funktion zunächst permanent kontrollieren, ob die benötigten Daten vorliegen. Trifft das zu, überschreiben wir das bestehende onEnterFrame-Ereignis durch ein neues, innerhalb dessen:

• mLadeAlt, der Behälter mit dem bereits irgend-

wann früher geladenen Content ausgeblendet wird. • Synchron damit mLadeNeu, der Behälter mit dem neu geladenen Content, eingeblendet wird. Ist das Ausblenden beendet, setzen wir die Deckkraft von mLadeAlt auf 0 und diejenige von mLadeNeu auf 100. Dies ist notwendig, da die Subtraktion bzw. Addition zu etwas gewöhnungsbedürftigen Werten führt, die sich deutlich von den genannten Grenzwerten unterscheiden (auch wenn das der Anwender visuell nicht wahrnehmen kann) und wir somit weder die 0 noch 100 exakt treffen würden. Um den nächsten Ladevorgang vorzubereiten, wird die Referenzierung der Ladebehälter umgekehrt: mLadeAlt enthält nun den eben geladenen Content und zeigt ihn zu 100 % an, während mLadeNeu auf den bereits früher aufgerufenen Inhalt verweist, ihn aber aufgrund der Deckkraft von 0 % nicht anzeigt. Bei einem erneuten Aufruf der Ladefunktion wird so automatisch der ältere, nicht mehr benötigte Content gelöscht. Da der Ladevorgang abgeschlossen ist, löschen wir das onEnterFrameEreignis. Wer sich die zwar lesbare und eindeutige if-elseBedingung sparen möchte, kann an dessen Stelle mit

274

einem Array arbeiten, das mBild1 und Bild2 enthält. Nach jedem Einblenden erfolgt der Aufruf der Ar­ ray.reverse()-Methode, mit der die Reihenfolge des Inhalts umgekehrt wird. Dadurch kann man den konkreten Inhalt von mLadeAlt und mLadeNeu austauschen, obwohl immer der gleiche Index verwendet wird. Vielleicht überrascht es, dass wir mLadeAlt einen anderen Ladebehälter zuweisen können und dieser in der gewünschten Weise angezeigt werden. Schließlich wurde mLadeAlt auf 0 % Deckkraft reduziert. Wenn dort der Behälter mit dem neu geladenen Content, der zu 100 % sichtbar ist, zugewiesen wird, müsste doch alles verschwinden. Tatsächlich funktioniert unser Vorgehen, weil die einzelnen Variablen keine Kopie, sondern eine Referenz auf die jeweiligen MovieClips enthalten. Wenn wir also die Deckkraft von mLade­ Neu erhöhen, betrifft das automatisch das dort refe-

Kapitel 20  Externe Assets

renzierte Objekt. Haben wir den Wert 100 erreicht, wird in mLadeAlt, dessen Deckkraft 0 beträgt, der gerade vollständig eingeblendete Clip referenziert. Dann übernimmt mLadeAlt dessen Deckkraft von 100 ebenfalls. Sie können das wie immer mit einem trace() kontrollieren, indem Sie sich die Deckkraft von mBild1 und mBild2 während des Einblendens ausgeben lassen. Den Ladevorgang zeigen die Abbildungen 67 bis 69 im Überblick. Könnte man dann nicht auf die feste Zuweisung von Werten im ersten else-Fall innerhalb des on­ EnterFrame-Ereignisses der Funktion ladeKon­ trolle() verzichten? Wenn wir das tun, entsteht das Problem, dass keines der Objekte mehr mit dem korrekten Anfangswert initialisiert wird und im Laufe der Zeit blendet sich jedes Objekt mit verminderter Deckkraft ein.

Abbildung 67:  Phase 1 des Ladevorgangs

Abbildung 68:  Phase 2 des Ladevorgangs

Abbildung 69:  Phase 3 des Ladevorgangs

20.5  Alternative Ladekontrolle (Preloader mit der MovieClipLoader-Klasse)

Eventuell etwas störend wirkt sich die Möglichkeit aus, dass man während eines noch aktiven Ladevorgangs den nächsten starten kann. 13. Erweitern Sie in der Deklaration von init() das onPress-Ereignis der einzelnen Schaltflächen unmittelbar nach der öffnenden Klammer:

einAus(false);

14. Erweitern Sie die Deklaration von ladeKont­ rolle() im onEnterFrame-Ereignis unmittelbar vor Aufruf der delete-Anweisung:

einAus(true);

15. Fügen Sie im Funktions-Block ein:  function einAus(pBoolean:Boolean):Void {  for (e in aBtns) {

 aBtns[e].enabled = pBoolean;



}

}

Wenn Sie testen, kann immer nur ein Bild geladen werden. Erst wenn dieser Prozess beendet ist, lässt sich der nächste Aufruf starten. Da wir vorsorglich alle Buttons beim Einfügen in einem Array erfasst haben, können wir an dieser Stelle sehr einfach darauf zugreifen. Dazu verwenden wir die Funktion einAus(), die der Eigenschaft enabled von jedem Element, dass sich in diesem Array befindet, das beim Aufruf übergebene Argument zuweist. Rufen wir die Funktion mit dem Argument false bei Mausklick auf eine beliebige Schaltfläche auf, schalten wir alle Buttons aus, und beim Argument true, das nach Ende des Einblendens übergeben wird, aktivieren wir sie wieder. Bedenken Sie, dass unsere Lösung zwar reibungslos funktioniert, aber aus prinzipiellen Gründen einen Haken hat: Wenn ein Ladevorgang aus welchem Grund auch immer nicht beendet werden kann, lässt sich keine Schaltfläche mehr aktivieren. Insofern wäre es also notwendig, sich zu vergewissern, ob die zu ladende Datei denn auch tatsächlich existiert. Im nachfolgenden Abschnitt werden Sie eine alternative Ladekontrolle mit Hilfe des MovieClipLoader kennen lernen, der den Vorteil besitzt, bei misslungenem Laden ein entsprechendes Ereignis (onLoadError) zu initiieren. Tritt es auf, muss der Aufruf einAus(true); erfolgen und die Anwendung funktioniert auch bei fehlgeschlagenem Ladeaufruf problemlos.

275

20.5 Alternative Ladekontrolle (Preloader mit der MovieClipLoader-Klasse) Wie oben angesprochen, stellt die MovieClipLoaderKlasse die modernere Variante für einen Preloader dar. Sie verfügt nämlich über einige Ereignisse, die den Ladevorgang recht genau abbilden bzw. erfassen und dabei über das einfache Protokollieren der geladenen Daten hinaus reichen. Da oben bereits gezeigt wurde, wie die über einen Preloader ermittelten Informationen grafisch und textuell angezeigt werden können, wollen wir uns an dieser Stelle auf trace()-Anweisungen begnügen, um den Ladeprozess zu verfolgen. 1. Erstellen Sie eine Standarddatei im Ordner site der vorhergehenden Übungen. 2. Weisen Sie actions folgendes Bildskript zu: //----------––- vars –-------------- var mBild:MovieClip;

var mLoader:MovieClipLoader; var oLoadListener:Object;

 var sBildPfad:String = „bilder/ main/“; var nBildIndex:Number = 0;

v ar aBilder:Array = [„gepard1.jpg“, „gepard5.jpg“, „gepard7.jpg“];

//----------- functions –----------- function init() {

 mBild = this. createEmptyMovieClip(„behBild“, this.getNextHighestDepth());

 mLoader = new MovieClipLoader();  oLoadListener = new Object();

laden(sBildPfad+aBilder[nBild­  Index], mBild); }

 function laden(pWas:String, pZiel:MovieClip):Void {

 oLoadListener.onLoadProgress = function(pZiel:MovieClip, pGeladen:Number, pGesamt:Number):Void {

 trace(pGeladen+“ von „+pGesamt+“ geladen“); };

276

 oLoadListener.onLoadInit = function(pZiel:MovieClip):Void {

 pZiel._x = Stage.width/2-pZiel._ width/2;  pZiel.onPress = function() {  nBildIndex++;

 if (nBildIndex>=aBilder.length) {  nBildIndex = 0; }

laden(sBildPfad+aBilder[nBildIn  dex], this); }; };

 mLoader.addListener(oLoadListener);  mLoader.loadClip(pWas, mBild); }

//-------------- start –––––––----- init();

Wenn Sie den Ladevorgang simulieren, erhalten Sie im Nachrichtenfenster eine Anzeige über die geladenen Bytes. Liegen alle Daten vor, stellt Flash die Grafik in Bühnenmitte dar. Per Mausklick lässt sich die nächste Grafik laden. Diese Funktionalität haben wir bereits im Zusammenhang mit der getBytesLoaded()-Methode kennen gelernt. Hier vereinfacht sich der Prozess jedoch insofern, als wir keinen zweiten Frame benötigen, um einen zuverlässigen Zugriff auf den geladenen Inhalt zu gewährleisten. Gegenüber vorher sind folgende Schritte neu: Wir benötigen nur noch einen einzigen MovieClip, nämlich den Behälter für die zu ladende Datei, wobei es sich wie oben um eine Grafik oder swf handeln kann. Statt dessen verwenden wir zusätzlich einen MovieClipLoader zur Initialisierung des Ladevorgangs und einen Listener zur Kontrolle, die beide später in hier angelegte Variablen referenziert werden. Die init()Funktion richtet konkret die benötigten Objekte ein und ruft wie gewohnt eine Lade-Funktion auf. In dieser Funktion weisen wir dem Listener, bei dem es sich um ein simples Objekt handelt, ein onLoadPro­ gress-Ereignis zu, das über drei Parameter verfügt:

• pZiel, der MovieClip, in den geladen wird; • pGeladen, die Anzahl der aktuell geladenen Bytes;

Kapitel 20  Externe Assets

• pGesamt, die Gesamtzahl der zu ladenden Bytes. Das Ereignis tritt automatisch bei jedem Speichern von Dateipaketen nach Start und vor Ende des Ladevorgangs auf. Die erwähnten Parameter bzw. Argumente übergeben wir nicht explizit in Form konkreter Werte, sondern ergeben sich einerseits aus dem tatsächlichen Ladefortschritt und andererseits aus dem Aufruf der loadClip()-Methode. Im Ereignis onLoadInit legen wir fest, was geschehen soll, wenn der Ladevorgang vollständig abgeschlossen und ein Zugriff auf alle Eigenschaften des geladenen Objekts möglich ist. Bei einer swf-Datei mit einem Skript im ersten Frame würde das bedeuten, dass dieses Skript vollständig in den Arbeitsspeicher geladen wurde und ausgeführt werden kann. Das entspricht demjenigen Zeitpunkt, den wir oben mit dem Auslesen der Breite des übergeordneten MovieClips erfasst haben. Damit der MovieClipLoader etwas mit diesen Ereignissen anfangen kann, muss ihm der Listener zugeordnet werden. Anschließend erfolgt der konkrete Ladeaufruf, wobei der Loader nur den Ladeprozess durchführt, nicht jedoch selbst als Ziel für das zu ladende Objekt dient, da er keine visuelle Repräsentanz besitzt. Anzeigen können wir die externen Inhalte nach wie vor nur mit Hilfe eines MovieClips, hier also von mBild. Ist es wichtig, den exakten Beginn des Ladevorgangs festzustellen, muss man dem Listener noch ein onLoadStart-Ereignis mit dem Ziel-MovieClip als Parameter zuweisen. Um den Inhalt des Bildbehälters zu löschen, können Sie die Methode unloadClip() verwenden, beispielsweise innerhalb des onPress-Ereignisses anstelle des bisherigen Codes: mLoader.unloadClip(this);

Zwar ist diese Vorgehensweise zunächst gewöhnungsbedürftig, sie arbeitet aber zuverlässiger als die vorstehende getBytesLoaded()-Variante und ermöglicht eine bessere Kontrolle des Ladevorgangs.

20.6 Beispiel modulare Website Aus den zahlreichen Einsatzmöglichkeiten wollen wir uns kurz das Beispiel einer modularen Website herausgreifen, deren einzelne Unterseiten extern geladen

20.6  Beispiel modulare Website

werden. Eine derartige Vorgehensweise hat mehrere Vorteile:

• Mit Ausnahme der Hauptseite werden nur diejeni-

gen Unterseiten geladen, die der User explizit aufruft. Würden wir Statt dessen alle Elemente unserer Site in eine einzige Flash-Datei packen, würde dagegen alles komplett auf den Client übertragen. • Die Site lässt sich einfacher pflegen. Ist es beispielsweise notwendig, eine Unterseite zu aktualisieren oder modifizieren, muss nur die entsprechende Datei geöffnet werden. Die Hauptseite und alle anderen Seiten bleiben unberührt, was eine potentielle Fehlerquelle ausschaltet, indem man beispielsweise unbeabsichtigt Änderungen an Elementen durchführt, die nicht zur korrigierenden Unterseite gehören. • Entwickeln wir eine sinnvolle modulare Struktur, lässt sie sich leicht auf verschiedene Projekte übertragen, was die Entwicklung neuer Sites erleichtert. Wir wollen das Beispiel bewusst einfach halten, da es nur um das zugrunde liegende Prinzip geht. Daher werden die benötigten Informationen für den Aufbau der Navigation direkt in den betreffenden Flashfilm integriert anstatt sie in eine XML-Datei auszulagern, die Navigation ist nicht weiter untergliedert und alle Dateien liegen im selben Ordner. 1. Erstellen Sie eine Standarddatei und speichern diese als index.fla in einem beliebigen Ordner. 2. Ersetzen Sie den Farbverlauf im Hintergrund durch einen von links oben nach rechts unten gehenden Farbverlauf (c8c8c8 zu 515151). 3. Erstellen Sie einen leeren MovieClip (Bibliotheks- und Verknüpfungsname mcBtn). 4. In diesem Clip erstellen Sie vier Ebenen (von oben nach unten: rahmen, highlight, txt, flaeche). 5. Auf flaeche zeichnen Sie an der Position 0,0 ein Rechteck (grüner vertikaler Farbverlauf, Höhe 22, Breite z. B. 50). Prinzipiell ist die Breite beliebig, da wir sie nachher per Skript der Beschriftung dieses als Button verwendeten MCs anpassen werden. 6. Wandeln Sie die Fläche in einen MovieClip um (Bibliotheksname mcFlaeche, Registrierungspunkt links oben, Instanzname flaeche).

277

7. Zeichnen Sie auf rahmen an der Position 0,0 einen Rahmen in der Größe der Fläche (Haarlinie, beliebige Farbe). 8. Wandeln Sie den Rahmen in einen MovieClip um (Bibliotheksname mcRahmen, Registrierungspunkt links oben, Instanzname rahmen). 9. Zeichnen Sie auf highlight an der Position 0,0 eine helle Fläche mit einem vertikalen Farbverlauf (weiß 40 % zu weiß 5 %). 10. Wandeln Sie diese Grafik in einen MovieClip um (Bibliotheksname mcHighlight, Registrierungspunkt links oben, Instanzname highlight). 11. Fügen Sie auf txt an der Position 2,3 ein dynamisches Textfeld ein (Arial, 12, fett, 1f1f1f, 12 pt, linksbündig, einzeilig, nicht auswählbar, Instanzname txt). Dies ist nur ein beispielhafter Aufbau für einen Button, den Sie natürlich nach Belieben gestalten können. Wichtig ist eigentlich nur das Textfeld für die Aufnahme der Beschriftung, denn wir wollen diesen einen MC verwenden, um daraus die komplette Navigation zu generieren. Das macht die Applikation erheblich flexibler und die Datei schlanker als wenn wir für jeden einzelnen Menüpunkt einen eigenen Button gestalten würden. 12. Kehren Sie zur Hauptzeitleiste zurück. 13. Fügen Sie in actions folgendes Bildskript ein:

//------------ vars –---------------



var mLoader:MovieClipLoader;



var nBtnRandX:Number = 4;

 var mContent:MovieClip, mNav:MovieClip, mBtn:MovieClip;

var nOffsetX:Number = 2;

var oLoadListener:Object;

ar aNav:Array = [„Home“,„Produkte“, v „Service“,„Shop“,„Impressum“];

Wir benötigen eine Referenz zu einem leeren MovieClip zur Aufnahme des Contents, also der eigentlichen Inhaltsseiten, des gesamten Menüs, der einzelnen Buttons sowie zu einer Instanz der MovieClipLoader-Klasse und der Object-Klasse, die für einen Listener Verwendung finden soll. In zwei Variablen definieren wir den horizontalen Abstand der Buttons untereinander sowie den Abstand zwischen Buttonbeschriftung und dem rechten Buttonrand. In

278

Kapitel 20  Externe Assets

einem Array legen wir die Beschriftungen unserer Buttons und damit gleichzeitig die Namen der zu ladenden Dateien fest, so dass wir nachher sehr einfach bei einem Mausklick herausfinden können, welche Datei aufgerufen wurde. 14. Erweitern Sie das Skript um einen FunktionsBlock:

//---------- functions –------------

 function init(pNavX:Number, pNavY:Number) {

 mContent = this.createEmptyMovie­ Clip(„behInhalte“, this.getNext­ HighestDepth());  mNav = this.createEmptyMovieClip( „behMenue“, this.getNextHighest­ Depth());  var nBreite:Number = mNav._width;  for(var i:Number = 0; i < aNav. length; i++){

 mBtn = mNav. attachMovie(„mcBtn“,„btn“+i,i);  mBtn.txt.autoSize = „left“;

 mBtn.txt.text = aNav[i];



mBtn.sDatei  = aNav[i].sub­ str(0,1).toLowerCase() + aNav[i].substr(1)+“.swf“;

 mBtn.rahmen._width = mBtn. flaeche._width = mBtn.highlight._ width = mBtn.txt._width + nBtn­ RandX;

 mBtn.onPress = geklickt;  mBtn._x = nBreite;

 nBreite = mNav._width + nOff­ setX; }

 mNav._x = pNavX;  mNav._y = pNavY;

 mLoader = new MovieClipLoader();  oLoadListener = new Object();  laden(„home.swf“, mContent);

}

15. Fügen Sie einen Aufruf ein:

//------------- start –-----------init(20,10);

Bei einem Test werden in der linken oberen Ecke 5 Buttons angezeigt, die bei onRollOver einen veränderten Cursor zeigen, aber noch nicht auf einen Mausklick reagieren können, da die dann aufgerufene Funktion noch nicht deklariert wurde. Die Funktion init() erzeugt einen leeren MovieClip zur Aufnahme der Inhaltsseiten sowie einen leeren MovieClip zur Aufnahme der Navigation. Da beiden zunächst keine Position zugewiesen wurde, befinden sie sich im Koordinatenursprung der Hauptzeitleiste. Unsere Buttons sollen horizontal angeordnet werden. Da ihre Breite von der jeweiligen Beschriftung abhängt, müssen wir die korrekte Position in Abhängigkeit von der aktuellen Breite des übergeordneten Behälters berechnen. Am Anfang beträgt dieser Wert 0. Um später darauf zugreifen zu können, speichern wir ihn in nBreite. Die for-Schleife fügt so oft den MovieClip mcBtn aus der Bibliothek ein, wie Elemente im Array aBtns existieren, im konkreten Beispiel also fünfmal. Als Text weisen wir das Arrayelement entsprechend dem aktuellen Wert der Zählvariablen i zu und passen das Textfeld im MovieClip an die Größe des Textes an. Danach skalieren wir alle anderen Elemente des Buttons, also die Instanzen highlight, rahmen sowie flaeche, auf die Größe des Textfeldes zuzüglich eines kleinen Wertes, damit der rechte Rand des Buttons nicht unmittelbar am Text klebt. Um später zu wissen, welche Datei bei Klick auf den Button geladen werden soll, legen wir jeweils eine Variable an, in der einfach das schon für die Beschriftung verwendete Element aus aBtns gespeichert wird. Dabei ändern wir lediglich das erste Zeichen dieses Textes zu einem Kleinbuchstaben, da wir in den Dateinamen keine Großbuchstaben verwenden wollen. Dann erhält jeder Button ein onPress, in dem eine noch zu definierende Funktion geklickt() aufgerufen wird. Die aktuelle Position entspricht dem Wert von nBreite und damit der Breite des übergeordneten Behälters vor dem Einfügen eines neuen Buttons zuzüglich eines kleinen Abstandswertes. Abschließend speichern wir die veränderte Breite des Behälters in nBreite. Wenn alle Buttons eingefügt sind, erfolgt die Positionierung des übergeordneten Behälters auf den als Argument beim Aufruf von init() übergegebenen Werten. Wie im vorherigen Kapitel werden MovieClipLoader und Listener eingerichtet. Am Ende der

20.6  Beispiel modulare Website

Funktion rufen wir die ebenfalls noch zu definierende Funktion laden() auf, um ersten Content anzeigen zu können – ansonsten würde die Site mit einer recht einsamen Navigation allzu nackt aussehen. 16. Erweitern Sie den Funktions-Block um folgende Deklaration:  function laden(pWas:String, pZiel:MovieClip):Void {

 oLoadListener.onLoadProgress = function(pZiel:MovieClip, pGeladen:Number, pGesamt:Number):Void {

 trace(pGeladen+“ von „+pGesamt+“ geladen“); };

 mLoader. addListener(oLoadListener);

 mLoader.loadClip(pWas, pZiel);

}

Dieser Teil entspricht dem vorherigen Abschnitt und bedarf keiner näheren Erläuterung; er bereitet den Loader vor und lädt die als Argument übergebene Datei. 17. Erweitern Sie den Funktions-Block um folgende Deklaration:

function geklickt(){



}

 laden(this.sDatei, mContent);

Wenn Sie testen, lädt Flash – nichts. Sie erhalten lediglich bei Klick auf einen beliebigen Button eine Fehlermeldung, über die wir uns aber im konkreten Fall tatsächlich freuen. Schließlich besagt sie, dass eine bestimmte Datei nicht gefunden werden konnte. Daraus erkennen wir, dass der Ladevorgang zwar korrekt ausgelöst wurde, aber noch nicht alle benötigten Dateien vorliegen. Die Funktion geklickt() macht weiter nichts, als auf die Variable sDatei des angeklickten Buttons zuzugreifen und den dort gespeicherten Dateinamen an die Funktion laden() zu übergeben. Um die ganze Funktionalität testen zu können, erstellen Sie einfach weitere Dateien unter den Namen home.swf, produkte.swf, service.swf, shop. swf und impressum.swf. Wenn diese Dateien im selben Ordner wie index.swf liegen, können Sie

279

nun nach Belieben zwischen den einzelnen Elementen hin- und herschalten. Die enorme Flexibilität dieses Systems zeigt sich, sobald wir das Menü ändern wollen, z. B., weil ein zusätzlicher Punkt eingebaut werden soll. Dann muss nur der Inhalt des Arrays aBtns angepasst werden, weitere Änderungen sind nicht notwendig (vorausgesetzt natürlich, dass die dann neu aufgerufene Datei auch tatsächlich existiert). Wer möchte, kann die aufgerufenen Dateien noch einblenden lassen – entweder in der oben vorgestellten Form oder in einer etwas vereinfachten Version. 18. Erweitern Sie den Variablen-Block:

var nAlpha:Number = 10;

19. Fügen Sie in der Deklaration von laden() unmittelbar nach der öffnenden Klammer ein:

mContent._alpha = 0;

20. Fügen Sie in derselben Funktion vor dem Aufruf der addListener()-Methode ein:  oLoadListener.onLoadInit = function(pZiel:MovieClip):Void {

 pZiel.onEnterFrame = einblenden;

};

21. Erweitern Sie den Funktions-Block um folgende Deklaration:

function einblenden(){

 this._alpha += nAlpha;

 if(this._alpha >= 100){  this._alpha = 100;

 delete this.onEnterFrame; }

}

Zunächst legen wir in einer Variablen die Schrittweite der Funktion einblenden() fest, also den Wert, um den wir später die Deckkraft erhöhen werden. Damit überhaupt etwas eingeblendet werden kann, setzen wir den Behälter für die externen Dateien auf einen Alphawert von 0. Das erfolgt bei jedem Aufruf der Funktion laden(). Um die Einblendfunktion verwenden zu können, müssen die externen Inhalte vollständig geladen sein. Tritt das onLoadInit-Ereignis auf, liegen alle benötigten Daten vor und der Behälter für die Inhalte

280

ruft in einem onEnterFrame-Ereignis die Funktion einblenden() auf. Dieser erhöht solange die Deckkraft von mContent, bis sie mindestens 100 erreicht. In dem Fall löschen wir das onEnterFrame-Ereignis und setzen den Alphawert auf 100. Beachten Sie, dass wir hier auf einen Preloader verzichten; in einer konkreten Anwendung sollte er jedoch auf jeden Fall Verwendung finden. Wie das funktioniert, haben Sie bereits in den vorhergehenden Abschnitten gesehen.

Kapitel 20  Externe Assets

mBtn.sDatei  = aNav[i].substr(0,1). toLowerCase() + aNav[i].sub­ str(1)+“.swf“;  mBtn.onPress = geklickt;  mBtn._x = nBreite;

 nBreite = mNav._width + nOffsetX; }

 mNav._x = pNavX;  mNav._y = pNavY;

 mLoader = new MovieClipLoader();

20.7 Code //------------- vars –-----------------

var mContent:MovieClip, mNav:MovieClip, mBtn:MovieClip; var mLoader:MovieClipLoader; var nOffsetX:Number = 2;

var nBtnRandX:Number = 4; var nAlpha:Number = 10;

var oLoadListener:Object;

var aNav:Array = [„Home“,„Produkte“, „Service“,„Shop“,„Impressum“];

//--------- functions –---------------function init(pNavX:Number, pNavY:Number) {

 mContent = this.createEmptyMovieClip („behInhalte“, this.getNextHighest­ Depth());  mContent._alpha = 0;

 oLoadListener = new Object();  laden(„home.swf“, mContent); }

function geklickt(){

 mContent._alpha = 0;

 laden(this.sDatei, mContent); }

function laden(pWas:String, pZiel:MovieClip):Void {

 oLoadListener.onLoadProgress = function(pZiel:MovieClip, pGeladen:Number, pGesamt:Number):Void {  trace(pGeladen+“ von „+pGesamt+“ geladen“); };

 oLoadListener.onLoadInit = function(pZiel:MovieClip):Void {

 pZiel.onEnterFrame = einblenden; };

 mNav = this.createEmptyMovieClip(„beh Menue“, this.getNextHighestDepth());

 mLoader.addListener(oLoadListener);

 for(var i:Number = 0; i < aNav. length; i++){

function einblenden(){

 var nBreite:Number = mNav._width;

 mBtn = mNav. attachMovie(„mcBtn“,„btn“+i,i);  mBtn.txt.autoSize = „left“;  mBtn.txt.text = aNav[i];

mBtn.rahmen._width  = mBtn.flaeche._ width = mBtn.highlight._width = mBtn.txt._width + nBtnRandX;

 mLoader.loadClip(pWas, pZiel); }

 this._alpha += nAlpha;

 if(this._alpha >= 100){  this._alpha = 100;

 delete this.onEnterFrame; } }

//------------ start –----------------init(20,10);

21

XML

Das heutige Internet wäre zumindest in seiner uns bekannten Form ohne sogenannte Auszeichnungssprache (Markup Language) gar nicht denkbar. Denn das nach wie vor wichtigste Format, in dem dort Daten zur Verfügung stehen, stellt HTML, also die Hypertext Markup Language, dar. Selbst Flash benötigt mindestens eine HTML -Seite, um im Internet aufgerufen werden zu können. Im Prinzip ist eine derartige Sprache nichts anderes als reiner Text, der ein Medium in stark formalisierter Form beschreibt. Neben HTML existieren zahlreiche weitere Auszeichnungssprachen, zu denen weniger bekannte wie SMIL (Synchronized Multimedia Integration Language) und SAML (Security Assertion Markup Language), die mittlerweile schon wieder fast vergessene Sprache VRML zur Beschreibung von 3DObjekten, SGML (Standard Generalized Markup Language), die Mutter aller Auszeichnungssprachen, und eben XML, die Xtensible Markup Language, gehören. Was wie ein Schreibfehler aussieht – schließlich beginnt Extensible mit einem e, nicht mit einem x –, ist wohl letzten Endes nur ein weiterer Marketing-Gag in der an solchen Gags reichen Welt der Bits und Bytes. Anders als die übrigen Beispiele gilt XML als eine Art Allrounder, mit dem sich alle Arten an Medien abbilden lassen, der aber vor allem eingesetzt wird, wenn es um den Austausch von Daten geht. Der zugrunde liegende Gedanke ist eigentlich ganz einfach. Wenn Menschen miteinander kommunizieren wollen, müssen sie sich auf einen gemeinsamen Zeichenvorrat verständigen und festlegen, in welcher Form diese Zeichen zu verwenden sind. Ist das geschehen, spielt es letzten Endes keine Rolle, mit welchem technischen Medium als Hilfsmittel der Kommunikationsprozess durchgeführt wird. Die Kommunikation wird gelingen, vorausgesetzt, man beachtet die zuvor

vereinbarten Regeln und setzt ihnen entsprechend die vereinbarten Zeichen ein. Nichts anderes tut XML: Es stellt einen Zeichensatz und bestimmte Regeln zur Verfügung, um zwischen verschiedenen technischen Systemen eine Kommunikationsbrücke zu realisieren. Es bietet sich also für einen Datenaustausch an. Des weiteren eignet es sich hervorragend, um Daten in strukturierter Form abzuspeichern und stellt damit aus Sicht von Flash prinzipiell eine interessante Alternative zu einem normalen Textformat dar, in dem die Daten per Variable und Wertezuweisung erfasst werden, ohne dass man sie darüber hinausgehend strukturieren könnte.

21.1 Aufbau von XML-Dokumenten Aufgrund der gemeinsamen Herkunft ähneln sich HTML und XML. In beiden Sprachen kommen Tags, Attribute und Werte vor. HTML ist jedoch wesentlich stärker eingeschränkt, insofern alle Tags vorgegeben sind (auch wenn ihre Umsetzung bzw. Darstellung mittlerweile durch CSS verändert werden kann), während XML die Möglichkeit bietet, eigene Tags zu definieren. Die in einem spezifischen XML-Dokument definierten Elemente sollten dabei bestimmten grundlegenden Regeln gehorchen, die der Entwickler in einer DTD (Document Type Definition) selbst fest legen kann oder die aus einer bereits vorgefertigten DTD stammen. In dem Fall spricht man von einem wohlgeformten Dokument. Ein XML-Dokument könnte in der einfachsten Form also so aussehen:

Raymond Smullyan

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

281

282

Martin Gardner

Nicholas Falletta

Der Knoten namens quellen verfügt seinerseits über mehrere Knoten namens autor. Der Inhalt von autor besteht jeweils aus einem String. Ein Browser kann mit den verwendeten Elementen wie nichts anfangen. Dort würden sie schlicht ungültige Tags darstellen. XML dagegen lässt uns die Freiheit, sie selbst zu wählen, wobei man aus Gründen der Lesbarkeit Bezeichnungen verwendet, die einen Bezug zum erfassten Inhalt besitzen. Das Dokument kann, da es sich um reinen, unverdünnten Text handelt, prinzipiell mit jedem Texteditor geschrieben werden. Selbst der simple Windows-Editor reicht dazu eigentlich aus. Wer dagegen Wert auf einen gewissen Komfort legt wie z. B. das automatische Einrücken von Zeilen, um den Text lesbarer zu gestalten, der findet entsprechende Editoren im FreewareBereich. Natürlich sind komplexere, beliebig tief verschachtelte Dokumente möglich. Unser obiges Beispiel könnte man erweitern:



Kapitel 21  XML

Raymond Smullyan

 Logik-Ritter und andere Schurken <jahr>1991

Martin Gardner Gotcha <jahr>1987

Nicholas Falletta Paradoxon <jahr>1988

Beachten Sie, das unsere XML-Dokumente einen einzigen Wurzelknoten, hier beispielhaft besitzen, dem alle anderen Knoten untergeordnet sind, und das jeder geöffnete Tag irgendwann wieder geschlossen wird. Darin unterscheidet sich XML deutlich von HTML. Zudem kennt es keinen spezifischen head- oder body-Bereich.

Abbildung 70:  Datei literatur1. xml im Internet Explorer

21.1  Aufbau von XML-Dokumenten

Ob Ihr Dokument den für XML geltenden Regeln entspricht, können Sie leicht testen. 1. Erstellen Sie im Windows Editor (<Start><Editor>) ein Textdokument, das den Inhalt des eben gezeigten Beispiels mit den drei Autoren enthält. 2. Speichern Sie die Datei unter literatur1.xml ab. Wählen Sie dabei als Dateityp Textdatei und als Codierung UTF-8. 3. Öffnen Sie diese Datei im Internet Explorer. Wenn Ihre Datei korrekt angelegt wurde, erscheint das in Abbildung 70 gezeigte Bild. Wie Sie sehen, geschieht nichts sonderlich Aufregendes – Ihre Daten werden lediglich in strukturierter Form in einer Art Baum angezeigt. Sollte Ihnen ein Fehler unterlaufen, erfolgt ein entsprechender Hinweis, der aber gerade für Anfänger nicht notwendigerweise sehr präzise ist. 4. Löschen Sie in der XML-Datei testweise das letzte schließende jahr-Tag inklusive des Tag-Namens. Der Internet-Explorer zeigt nichts mehr an und gibt nun die in Abbildung  71 enthaltene Fehlermeldung aus:

283

5. Machen Sie den im vorhergehenden Schritt eingefügten Fehler wieder rückgängig, indem Sie das letzte geöffnete jahr-Tag korrekt schließen. Daten lassen sich alternativ mit Hilfe von Attributen beschreiben. Obiges Beispiel würde dann folgendermaßen aussehen:



 

Unter einem Attribut versteht man wie in HTML eine Eigenschaft, die das zugehörige Element näher charakterisiert. Die Werte, die man einem Attribut zuweist, müssen immer als String, also mit Anführungsstrichen, übergeben werden. Das XML-Dokument wird dadurch wesentlich kompakter und enthält keine textlichen Inhalte mehr, sondern nur noch Attribute mit zugehörigen Werten. Da jedes Tag geschlossen werden muss, wird hier am

Abbildung 71:  Fehlerhaftes XML-Dokument im Internet Explorer

284

Ende des öffnenden Tags ein Schrägstrich eingefügt. Selbst eine Kombination beider Varianten ist möglich. Beachten Sie, dass innerhalb ein- und desselben Elements kein Attribut zweimal vorkommen kann, da es sich dann nicht mehr eindeutig zuordnen lässt. In der ersten Zeile enthält ein XML-Dokument einen Hinweis auf die Version, z. B.:

Das ist insofern relevant, als XML ähnlich wie HTML einer ständigen Weiterentwicklung unterworfen ist und neuere Versionen gegebenenfalls erweiterte Funktionalitäten enthalten, auf die in einer spezifischen Form zugegriffen werden kann. Last not least kann ein derartiges Dokument einen Hinweis darauf beinhalten, welche Daten für die verwendeten Attribute und welche Elemente zulässig sind. Man unterscheidet zwischen einer internen DTD, die im Kopf des jeweiligen XML-Dokuments definiert wird, und einer externen DTD, mit dem das Dokument (ebenfalls im Kopfteil) verknüpft wird. Da Flash XML-Dokumente parsed (auswertet), ohne sie zu validieren (auf Übereinstimmung mit einer DTD überprüfen), wollen wir uns hier nicht weiter mit einer derartigen Definition aufhalten. Auch wenn wir die Namen der Elemente bzw. Knoten frei wählen können, so existieren doch gewisse Einschränkungen, die denjenigen bei Variablennamen weitgehend entsprechen:

• Es wird zwischen Groß- und Kleinschreibung un-

terschieden. • Sonderzeichen sind nicht zulässig. • Als erstes Zeichen darf keine Zahl verwendet werden. Möglich sind lediglich Buchstaben sowie der Unterstrich _. • Selbstverständlich sind Leerzeichen tabu. • Am Anfang darf weder in Groß- noch Kleinschreibung das Kürzel XML verwendet werden. Wie in HTML ist es möglich, Kommentare einzufügen, die jeweils mit einem Ausrufezeichen eingeleitet werden:



Kapitel 21  XML

21.2 Laden von XML-Dokumenten (new XML, load(), onLoad, onData) Die Verwendung von XML besteht aus zwei Prozessen: Laden der Datei und Auslesen der Inhalte. Dabei kann es sich sowohl um konkrete Inhalte handeln, die als Text angezeigt werden sollen, wie auch um Informationen bezüglich der Struktur Ihrer Applikation. Gerade die letztgenannte Variante wird viel verwendet, da sie eine einfache Möglichkeit bietet, dynamisch aufgebaute Applikationen zu konfigurieren. Ein typisches Beispiel finden Sie im Workshop Bildergalerie, bei dem die benötigten Informationen über die Bilder in einer XML-Datei erfasst werden. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu: //--------–––– vars ––––------------ var xmlBuecher:XML = new XML();

//------- functions –-------------–––  function ladeXML(pWer:XML, pDatei:String):Void{  pWer.load(pDatei); }

//------------ aufruf –-------------

ladeXML(xmlBuecher,„literatur1.xml“);

Mit Hilfe des Operators new instanziieren wir die XMLKlasse, so dass wir auf ihre Methoden, Eigenschaften und Ereignisse zugreifen können. Der Operator erstellt also eine Art Kopie mit dem Bezeichner xmlBuecher, der die komplette Funktionalität der XML-Klasse besitzt. Anschließend deklarieren wir eine Lade-Funktion, die als Parameter das erstellte XML-Objekt sowie die zu ladende Datei enthält. Für den eigentlichen Ladevorgang ist die Methode load() zuständig, die als Argument eine XML-Datei erhält. Am Ende des Skripts rufen wir die Funktion auf und übergeben das anfangs definierte XML-Objekt sowie die im vorhergehenden Abschnitt erstellte XML-Datei namens literatur1.xml. Achten Sie darauf, dass die swf_Datei, die aus dieser Übung entsteht, und die angesprochene XML-Datei im selben Ordner liegen müssen. Andernfalls übergeben Sie beim Aufruf von ladeXML() einen entsprechenden Pfad. Findet Flash die angegebene Date nicht, erfolgt eine Fehlermeldung: Error opening URL „file:///F|/work/flash/literatur1. xml“

21.2  Laden von XML-Dokumenten (new XML, load(), onLoad, onData)

Die Sicherheitsrichtlinien von Flash erlauben prinzipiell nur den Aufruf von Daten derselben Domain. Wollen Sie domainübergreifend Daten verarbeiten, benötigen Sie eine Datei, in der die Domains eingetragen werden, auf die Sie zugreifen möchten. Wer an dieser Stelle Spektakuläres erwartet, wird enttäuscht: Wir machen nichts weiter als eine Datei zu laden. Es erfolgt keinerlei Zugriff auf deren Inhalt, und wir überprüfen nicht einmal den Ladevorgang, so dass wir nicht wissen, ob die fraglichen Daten überhaupt geladen wurden. 3. Ergänzen Sie die Deklaration von ladeXML() nach dem Aufruf der load()-Methode:  pWer.onLoad = function(erfolg:Boolean) {  if (erfolg) {

 trace(„Erfolgreich geladen“); } else {

 trace(„Sorry, habe die Datei verschlampt!“); }

285

falls tritt der else-Fall ein, der normalerweise eine Fehlerbehandlungsroutine umfasst und hier beispielhaft ein einfaches trace() ausführt. Der Name des Parameters kann frei gewählt werden; eingebürgert hat sich der hier verwendete Name oder dessen englisches Pendant success. Obwohl wir den Aufruf von load() vor dem Ereignis onLoad eingetragen haben, spielt die Reihenfolge im Skript keine Rolle, denn ein externer Ladevorgang wird von Flash erst dann ausgeführt, wenn alle anderen Anweisungen abgearbeitet wurden. Bei größeren Dateien empfiehlt es sich, den Anwender über den Fortschritt des Ladevorgangs zu informieren. Ähnlich wie die MovieClip-Klasse verfügt die XML-Klasse über die getBytesLoaded()- und getBytesTotal()-Methoden, die einen Vergleich der bereits geladenen Daten mit der Gesamtgröße erlauben. Wir benötigen für unser Beispiel zwar keine derartige Kontrolle. Im Fall der Fälle könnte man sie jedoch folgendermaßen implementieren (Änderungen gegenüber bisher in Fettdruck): //------------ vars –---------–––––----

};

var xmlBuecher:XML = new XML();

Ausgabe im Nachrichtenfenster: Erfolgreich geladen

//------------ functions –-------------

Flash bietet zwei Ereignisse, die eine Kontrolle des Ladevorgangs ermöglichen:

• onData: Tritt auf, wenn die angeforderte XML-

Datei vollständig vom Server übertragen wurde. Anschließend wird sie vom Flash-internen Parser verarbeitet und das onLoad-Ereignis aufgerufen. Mit Hilfe dieses Ereignisses können wir einen selbst definierten Parser aufrufen, falls benötigt. • onLoad: Tritt nach dem vollständigen Laden und Parsen der angegebenen XML-Datei auf. Dieses Ereignis wird i. d. R. verwendet, um eigene Routinen zwecks Zugriff auf die Inhalte der XML-Datei auszuführen. In unserem Beispiel setzen wir das onLoad-Ereignis ein. Es gibt einen Bool’schen Wert zurück, je nachdem, ob der Ladevorgang erfolgreich abgeschlossen werden konnte oder nicht. Um den betreffenden Wert abfragen zu können, richten wir einen Parameter namens erfolg ein und fragen seinen Inhalt ab. Beträgt er true, trifft die if-Bedingung zu und wir lassen uns eine entsprechende Meldung ausgeben. Andern-

var nIntervLaden:Number;

function ladeXML(pWer:XML, pDatei:String):Void{  pWer.load(pDatei);

 pWer.onLoad = function(erfolg:Boolean) {  if (erfolg) {

 trace(„Erfolgreich geladen“); } else {

 trace(„Sorry, habe die Datei verschlampt!“); }

clearInterval(nIntervLaden); }; }

function ladeKontrolle(pWer:XML):Void {  var nGeladen:Number = pWer.getBytesLoaded();  var nGesamt:Number = pWer.getBytes Total();  var nProzent:Number = Math. floor((nGeladen/nGesamt)*100);

286

Kapitel 21  XML

trace(nProzent+“ Prozent geladen“);

 trace(this.firstChild);

//------------ aufruf –-------------

Ausgabe im Nachrichtenfenster: Raymond Smullyan Logik-Ritter und andere Schurken <jahr>1991 Martin Gardner Gotcha <jahr>1987 Nicholas Falletta Paradoxon <jahr>1988

}

ladeXML(xmlBuecher, „literatur1.xml“);

nIntervLaden = setInterval(ladeKontrolle, 50, xmlBuecher);

Zunächst legen wir eine Variable an, in der wir später eine Referenznummer für ein noch einzurichtendes Intervall speichern. Unterlassen wir diesen Schritt, sind wir nicht in der Lage, das Intervall zu löschen, nachdem das gesamte Dokument geladen wurde. Die ladeKontrolle()-Funktion speichert mit getBytesLoaded() die aktuell geladenen und mit getBytesTotal() die Gesamtzahl der zu ladenden Bytes jeweils in einer lokalen Variable. Aus beiden lässt sich ein Prozentsatz errechnen, den wir abgerundet in einer weiteren Variable speichern. Sie wird anschließend ausgegeben. Am Ende des Skripts richten wir ein Intervall ein, das diese Kontroll-Funktion alle 50 Millisekunden ausführt und als Argument das XML-Objekt übergibt, in das die externen Daten geladen werden sollen. Tritt das onLoad-Ereignis ein, wurde der Ladevorgang beendet, so dass wir das Intervall löschen. Natürlich würde die Ausgabe bezüglich des Ladefortschritts per trace() auf Ihrer Website keinen Sinn machen, da dort das Nachrichtenfenster nicht zur Verfügung steht. Statt dessen würden Sie die betreffenden Angaben einem dynamischen Textfeld zuweisen. Beim lokalen Testen kommen Sie eventuell nicht in den Genuss von irgendwelchen Ausgaben, weil der Ladevorgang sehr schnell abläuft und Ihre XML-Datei zu klein ist.

21.3 Zugriff auf den gesamten Inhalt einer XML-Datei (firstChild, ignoreWhite) Liegen die Daten vor, möchte man naturgemäß mit ihnen arbeiten. 4. Ändern

Sie

innerhalb

der

Deklaration

der

ladeXML()-Funktion das onLoad-Ereignis (Fett-

druck):

if (erfolg) {

}

Anstelle der simplen Erfolgsmeldung greifen wir nun auf den konkreten Inhalt zu, indem wir uns den Wurzelknoten ausgeben lassen. Der Wurzelknoten wird mit firstChild angesprochen. Da er innerhalb eines XML-Dokuments immer den kompletten Inhalt umschließt, haben wir so Zugriff auf alle benötigten XML-Daten. Allerdings entspricht die Ausgabe nicht ganz unseren Wünschen: Wir erhalten beispielsweise nach jedem Element eine Leerzeile, die ihrerseits als Element gezählt wird. Würden wir das bestehende Dokument in dieser Form weiter verarbeiten, lägen unnütze Informationen vor, die wir nicht verwenden können. Etwas anders sieht die Ausgabe aus, wenn wir in der ersten Zeile des XML-Dokuments den oben erwähnten Hinweis auf die Version aufnehmen. In dem Fall wird die Versionsangabe als erster Knoten interpretiert und die Anzeige bleibt leer, da ihm kein verwertbarer Inhalt zugeordnet wurde. 5. Ändern Sie die Deklaration von ladeXML() (Fettdruck):  function ladeXML(pWer:XML, pDatei: String, pBoolean:Boolean):Void {

6. Fügen Sie innerhalb der Deklaration von ladeXML() vor dem Aufruf von onLoad ein: pWer.ignoreWhite = pBoolean;

21.4  Verarbeitung einzelner Daten

7. Ändern Sie am Ende des Skript den Aufruf von ladeXML() (Fettdruck):  ladeXML(xmlBuecher, „literatur1.xml“, true);

Ausgabe im Nachrichtenfenster: Raymond Smullyan Logik-Ritter und andere Schurken <jahr>1991Martin GardnerGotcha<jahr>1987Nicholas Falletta Paradoxon<jahr>1988 Mit der Eigenschaft ignoreWhite legen Sie fest, wie Flash Leerräume (z. B. Zeilenumbrüche, Leerzeichen, Tab-Stops) innerhalb des XML-Dokuments behandeln soll. Standardmäßig weist Flash dieser Eigenschaft false zu, so dass sie wie im vorhergehenden Beispiel als Information mit ausgelesen werden. I. d. R. benötigen wir diese Leeräume nicht, weswegen wir der betreffenden Eigenschaft true zuweisen. Nun wird auch ein Dokument, das in der ersten Zeile einen Hinweis auf die zugrunde liegende XML-Version enthält, korrekt dargestellt.

21.4 Verarbeitung einzelner Daten

287

wir Zugriff auf „Raymond Smullyan“ zuzüglich aller weiterer Angaben, die von umschlossen werden, also die Tags und <jahr>. 9. Erweitern Sie erneut das onLoad-Ereignis (Fettdruck): if (erfolg) {

trace(this.firstChild.firstChild.  firstChild); }

Ausgabe im Nachrichtenfenster: Raymond Smullyan Da XML streng hierarchisch aufgebaut ist, verfügt auch der eben angesprochene -Tag über einen ersten Knoten, bestehend aus dem Tag sowie dem konkreten Text „Raymond Smullyan“. 10. Aller guten Dinge sind drei – erweitern Sie noch einmal das onLoad-Ereignis (Fettdruck):

if (erfolg) {

trace(this.firstChild.firstChild.  firstChild.firstChild); }

Ausgabe im Nachrichtenfenster: Raymond Smullyan

8. Erweitern Sie innerhalb der Deklaration der ladeXML()-Funktion das onLoad-Ereignis (Fettdruck):

Nun erhalten wir den gewünschten Inhalt, nämlich den konkreten Namen des Autors einer Reihe lesenswerter Bücher zu Logikproblemen und -spielereien. Der Code mag recht umständlich und unübersichtlich erscheinen, spiegelt aber exakt den Aufbau bzw. die Verschachtelung unseres XML-Dokuments wieder. Allerdings besitzen wir so keine Möglichkeit, den nächsten Knoten des Wurzelknotens zu erfassen. Hier hilft die Eigenschaft childNodes weiter.

if (erfolg) {

11. Ändern Sie das onLoad-Ereignis (Fettdruck):

Die für uns interessanten Informationen stecken in den einzelnen Knoten des XML-Dokuments. Daher benötigen wir eine Möglichkeit, sie auszulesen, ohne dass uns jedes Mal der gesamte Wurzelknoten angezeigt wird.

 trace(this.firstChild. firstChild); }

Ausgabe im Nachrichtenfenster: Raymond Smullyan Logik-Ritter und andere Schurken<jahr>1991 Der erste Knoten, also das gesamte Dokument, besitzt seinerseits einen ersten Knoten, nämlich die konkreten Daten, die wir beim erstmaligen Auftreten des -Tags eingetragen haben. Dadurch erhalten



if (erfolg) {

 trace(this.firstChild.childNodes); }

Ausgabe im Nachrichtenfenster: Raymond Smullyan Logik-Ritter und andere Schurken<jahr>1991,Martin Gardner Gotcha<jahr>1987,Nicholas Falletta Paradoxon<jahr>1988

288

Kapitel 21  XML

Zunächst sieht das Ergebnis genauso aus, wie zuvor beim Zugriff mit Hilfe von firstChild. Die Eigenschaft childNodes gibt uns jedoch die gewünschten Informationen in Form eines Arrays zurück, so dass wir gezielt beliebige Elemente aufrufen können. 12. Ergänzen Sie das onLoad-Ereignis (Fettdruck):



if (erfolg) {

t race(this.firstChild.childNodes[0]); }

Ausgabe im Nachrichtenfenster: Raymond Smullyan Logik-Ritter und andere Schurken<jahr>1991 Übrig bleibt der erste Knoten von firstChild, also das erste -Tag. Im Gegensatz zu vorher können wir nun alle weiteren Knoten auslesen. Wenn Sie beispielsweise den Index von 0 auf 1 ändern, zeigt Flash die Informationen zum zweiten Kindknoten des Wurzelknotens an. Mit einer Schleife lassen sich nun alle Knoten einzeln ansprechen. 13. Ändern Sie das onLoad-Ereignis (Fettdruck):

if (erfolg) {

 var aNodes:Array = this.firstChild. childNodes;  for (var i:Number = 0; i
 trace(„Kindknoten „+i+“: „+ aNodes [i]); }

}

Ausgabe im Nachrichtenfenster: Kindknoten 0: Raymond SmullyanLogik-Ritter und andere Schurken<jahr>1991 Kindknoten 1: Martin GardnerGotcha<jahr>1987 Kindknoten 2: Nicholas FallettaParadoxon<jahr>1988 Wir speichern in dem Array aNodes den kompletten Inhalt des Dokuments, wobei ein Kindknoten jeweils einem Element des genannten Arrays entspricht. An-

schließend greifen wir in einer Schleife, deren Zählvariable sich an der Gesamtlänge des Arrays orientiert, auf die konkreten Inhalte elementweise zu. Alternativ lässt sich für aNodes auch der Datentyp String oder, ganz allgemein, Object angeben. Ein -Tag umfasst seinerseits Kindknoten, die wir nun einzeln ansprechen wollen. 14. Ergänzen Sie die erstellte Schleife (Fettdruck):  for (var i:Number = 0; i
 for (var j:Number = 0; j
 trace(„Kindknoten „+i+“: „+aNodes[i].childNodes[j].firstChild); }

}

Wir lesen zunächst wie zuvor jeden Tag aus. Anschließend ermitteln wir in der inneren Schleife die Länge des Tags und greifen jeweils auf den ersten Kindknoten aller childNodes zu. Konkret erhalten wir als aNodes[i].childNodes[0] den Tag , bei childNodes[1] den Tag und bei childNodes[2] den Tag <jahr>. Deren firstChild entspricht dann dem konkreten Textinhalt. Im Grunde genommen gestaltet sich das Auslesen der konkreten Inhalte also recht einfach, wenn man sich erst einmal an die Verschachtelung gewöhnt hat. Eine Alternative zur bisherigen Vorgehensweise bietet die nextSibling-Eigenschaft, mit der wir nach dem firstChild alle in der Hierarchie auf gleicher Ebene befindlichen Folgeknoten finden können. Unser Code setzt voraus, dass sich die gesuchte Information als Element innerhalb des XML-Dokuments wiederfindet. Wie wir weiter oben gesehen haben, kann man die Informationen aber auch als Attribut der einzelnen Tags bzw. Knoten definieren, eine Variante, die in Flash-Versionen bis einschließlich MX 2004 sogar üblich war, da Attribute schneller ausgelesen werden konnten. Das ist jetzt zwar nicht mehr der Fall, diese Vorgehensweise erfreut sich jedoch nach wie vor einer gewissen Beliebtheit. Dazu müssen wir zunächst das XML-Dokument anpassen. 15. Öffnen Sie literatur1.xml in einem beliebigen Editor.

21.4  Verarbeitung einzelner Daten

16. Ändern Sie die Datei wie folgt:



 





Wir löschen alle Textinhalte und fügen sie als Attribute in die einzelnen -Tags ein. 17. Speichern Sie die Datei im gleichen Ordner wie zuvor als literatur2.xml. 18. Ändern Sie in der Flash-Datei den Aufruf von ladeXML() wie folgt (Fettdruck):  ladeXML(xmlBuecher, „literatur2. xml“, true);

Es erfolgt keine Ausgabe mehr im Nachrichtenfenster, da keine Inhalte mehr vorliegen, die wir in der vorhergehenden Form auslesen könnten. Statt dessen benötigen wir eine Methode, um gezielt einzelne Attribute auszulesen. 19. Ändern Sie die Schleife im onLoad-Ereignis (Fettdruck):  for (var i:Number = 0; i
for (e in aNodes[i].attributes) {  trace(„Attribut „+e+“: „+aNodes[i].attributes[e]); }

}

Ausgabe im Nachrichtenfenster: Attribut name: Raymond Smullyan

289

Attribut titel: Logik-Ritter und andere Schurken Attribut jahr: 1991 Attribut name: Martin Gardner Attribut titel: Gotcha Attribut jahr: 1987 Attribut name: Nicholas Falletta Attribut titel: Paradoxon Attribut jahr: 1988 Die Attribute werden wie ein assoziatives Array verwaltet. Daher erhalten wir in der Zählvariablen e jeweils den Namen des gesuchten Attributs, gefolgt von dem betreffenden Wert. Ähnlich einfach können wir ein einzelnes Attribut inklusive Wert ausgeben lassen. 20. Kommentieren Sie in der inneren Schleife vorübergehend den trace()-Befehl aus. 21. Fügen Sie nach der inneren Schleife unmittelbar vor der schließenden Klammer der äußeren Schleife ein:  trace(„Titel: „+aNodes[i].attributes.titel);

Ausgabe im Nachrichtenfenster: Titel: Logik-Ritter und andere Schurken Titel: Gotcha Titel: Paradoxon Wenn der Name der Eigenschaft bzw. des Attributs bekannt ist, können wir direkt auf dessen Wert zugreifen, was hier beispielhaft mit dem Attribut titel geschieht. Auch wenn wir an dieser Stelle die XML-Klasse nur auszugsweise behandelt haben, so genügen die Informationen, um beliebige Daten einzulesen und gezielt zu verarbeiten. In einzelnen Workshops kommen wir auf das Thema zurück. Bedenken Sie dabei, dass die tatsächlichen Einsatzmöglichkeiten weit über das hinaus gehen, was sich hier vermitteln lässt.

22

Tween- und TransitionManager-Klasse

Wer schon länger mit Flash arbeitet, weiß, dass es zahlreiche Möglichkeiten gibt, ein Objekt zu animieren. Wir haben zu diesem Zweck bisher mit selbst erstellten Funktionen gearbeitet, aber manchmal erweist es sich nicht zuletzt aus zeitlichen Gründen als klüger, auf vorgefertigte Lösungen zurück zu greifen. Mit den bereits seit Flash MX verfügbaren Tween- und den Transition-Klassen können wir rasch zu überzeugenden Ergebnissen zu gelangen, ohne allzu tief in die Programmierung einsteigen zu müssen (was eigentlich schade ist, oder?). Im nachfolgenden wird wie in der Flash-Literatur üblich zwar zwischen der Tween- und der TransitionManager-Klasse unterschieden, aber beide gehören zum transition-Klassenpaket, das noch weitere Klassen sowie ein weiteres Paket, nämlich easing, zur Verfügung stellt. Diese lassen sich wie gewohnt einzeln verwenden, bieten aber darüber hinaus bei einer Kombination ein mächtiges Werkzeug, um komplexe Animationen ohne zuviel Aufwand zu erstellen. In Flash findet sich die offizielle Hilfe zur genannten Klasse nicht wie man erwarten würde im Referenzhandbuch zu den Klassen, sondern in der entsprechenden Referenz zu den Komponenten.

22.1 Tween-Klasse Flash verfügt im Klassenordner mx über insgesamt zwei verschiedene Tween-Klassen, von denen eine sich im Unterordner \effects\ versteckt, während die für uns relevante und zugleich mächtigere unter \transitions\ zu finden ist. 1. Erstellen Sie eine Standarddatei.

2. Erstellen Sie auf objects vertikal mittig und horizontal an beliebiger Stelle eine Kugel der Größe 50 × 50 mit beliebigem Farbverlauf. 3. Wandeln Sie die Kugel in einen MovieClip namens mcKugel um. 4. Weisen Sie der Kugel den Instanznamen kugel zu. 5. Weisen Sie actions folgendes Bildskript zu:  //------------- import –------------  import mx.transitions.*;

 import mx.transitions.easing.*;

 //-------------- vars –-------------–  var mxTweenX:Tween;

 var nRand:Number = 100;

 //----––------ functions –----------  function init() {

 mxTweenX = new Tween(kugel, „_x“, Elastic.easeOut, nRand, Stage. width – nRand, 5, true); }

 //-----------–– start –------------- init();

Beim Starten springt die Kugel an den linken Bildschirmrand und bewegt sich von dort in 5 Sekunden an den rechten Rand, wo sie elastisch am Zielpunkt kurz hin- und her schwingt und anschließend stehen bleibt. Wir importieren die Klassenpakete transitions und easing, in denen sich die für uns relevanten Klassen befinden. Da nur ein einziger Tween eingerichtet wird, deklarieren wir auch nur eine einzige Variable, um eine entsprechende Referenz zu speichern. Wir halten in einer Variablen einen beliebigen Wert fest, der uns dazu dient, einen Abstand zum linken bzw.

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

291

292

rechten Bildschirmrand zu definieren. In der init()Funktion weisen wir den gewünschten Tween zu und rufen abschließend die Funktion auf. Alternativ wäre es möglich, ohne Typisierung direkt auf den Tween zuzugreifen. Dann würde sich die Deklaration von init() folgendermaßen ändern: new Tween(kugel, „_x“, Elastic.easeOut, nRand, Stage.width – nRand, 5, true);

Die Deklaration von mxTweenX könnte gelöscht werden. Wir wollen jedoch die Typisierung wie bisher beibehalten. Die Tween-Klasse verwendet eine Reihe von Parametern, denen wir folgende Argumente übergeben:

Kapitel 22  Tween- und TransitionManager-Klasse

mxTweenAlpha = new Tween(kugel, „_ alpha“, None.easeNone, 100, 0, 5, true);

Zusätzlich zur Bewegung blendet die Kugel nun langsam aus. Wir richten eine neue Tween-Instanz ein, der wir in init() die gewünschten Werte zuweisen. Dabei handelt es sich u. a. um die Eigenschaft _alpha, die wir von 100 % auf 0 % innerhalb von 5 Sekunden animieren. Da die Animation ohne weiteren Effekt ablaufen soll, wird die Beschleunigungsklasse None mit ihrer Methode easeNone verwendet, so dass eine lineare Änderung der Deckkraft entsteht.

• kugel; das Objekt, auf das der Tween angewendet werden soll. die Eigenschaft, die getweent wird. Sie muss als String übergeben werden. Animieren lässt sich prinzipiell jede beliebige Eigenschaft, die visuell wahrnehmbar und per Zahlen definierbar ist, also beispielsweise auch _alpha, _rotation, _width etc. • Elastic.easeOut; eine Funktion, in der die Form der Animation spezifiziert wird. Dieses Verhalten entspricht prinzipiell dem Abbremsen/Beschleunigen bei Bewegunstweens, bietet aber darüber hinausgehende Varianten. • nRand; der Startwert der zu tweenenden Eigenschaft. Da wir uns auf eine Position beziehen, handelt es sich hier um eine Pixelangabe. • Stage.width  – nRand; der Endwert der zu tweenenden Eigenschaft, der in unserem konkreten Beispiel wie beim vorhergehenden Parameter als Pixelwert übergeben wird. • 5; die Dauer der Animation, wobei wir Sekunden oder Frames verwenden können. • true; ein Bool’scher Wert, der festlegt, ob der vorhergehende Parameter als Angabe von Sekunden (true) oder Frames (false) zu verstehen ist.

• „_x“;

22.2 Beschleunigungsklassen und -methoden Wie wir gesehen haben, benötigt jede Tween-Instanz eine Angabe bezüglich einer eventuell gewünschten Beschleunigung der Animation. Flash stellt rein rechnerisch 16 Möglichkeiten zur Verfügung, die kaum Wünsche offen lassen. Folgende Tabellen enthalten eine Auflistung. Klasse

Bedeutung

Back

Animation reicht über Grenzwert (Startwert, Endwert oder beide) hinaus

Bounce

Sprungeffekt innerhalb des Grenzwerts

Elastic

Kombination aus Back und Bounce

Regular

Langsame Beschleunigung am Anfang bzw. Abbremsung am Ende

Strong

Starke Beschleunigung am Anfang bzw. Abbremsung am Ende

None

Die Animation erfolgt linear

Beschleunigungsklassen

Sollen mehrere Eigenschaften zeitgleich animiert werden, so lässt sich das einfach einrichten, indem Sie die benötigte Anzahl an Tweens definieren.

Methode

Bedeutung

easeIn

Durch Beschleunigungsklasse definierter Effekt tritt beim Startwert der Animation auf

6. Erweitern Sie den Variablen-Block (Fettdruck):

easeOut

Durch Beschleunigungsklasse definierter Effekt tritt beim Endwert der Animation auf

easeInOut

Durch Beschleunigungsklasse definierter Effekt tritt beim Start- und Endwert der Animation auf

easeNone

Es tritt kein Effekt auf

var mxTweenX:Tween, mxTweenAlpha:Tween;

7. Erweitern Sie die init()-Funktion:

Methoden der Beschleunigungsklassen

22.2  Beschleunigungsklassen und -methoden

293

Daraus ergeben sich folgende Kombinationen, beispielhaft an der ersten Beschleunigungsklasse anhand einer horizontalen Bewegung von links nach rechts gezeigt:

• Back.easeIn: das animierte Objekt bewegt sich am Startpunkt zunächst nach links, so als würde es Schwung holen. Anschließend erfolgt nach rechts eine sich beschleunigende Bewegung. Die entsprechende Änderung im vorherigen Script würde lauten (Fettdruck): new Tween(kugel, „_x“, Back.easeIn, nRand, Stage.width – nRand, 5, true);

Abbildung 73:  Beschleunigungseffekt Bounce.easeIn

• Back.easeOut: das animierte Objekt bewegt sich

über den Endwert hinaus und wird wie von einem unsichtbaren Band zurück zum Endwert gezogen, wobei ein Abbremsen erfolgt. Die entsprechende Änderung im vorherigen Script würde lauten (Fettdruck): new Tween(kugel, „_x“, Back.easeOut, nRand, Stage.width – nRand, 5, true);

• Back.easeInOut:

die beiden vorgenannten Effekte treten in Kombination auf. Die entsprechende Änderung im vorherigen Script würde lauten (Fettdruck):

Abbildung 74:  Beschleunigungseffekt Elastic.easeIn

new Tween(kugel, „_x“, Back.easeInOut, nRand, Stage.width – nRand, 5, true);

Dementsprechend sind auch möglich: Bounce.easeIn, Bounce.easeOut, Bounce.easeInOut etc. Lediglich die Klasse None kennt nur eine Methode, nämlich easeNone, was einer linearen Bewegung ohne Beschleunigen und Abbremsen entspricht. Folgende Abbildungen 72 bis 76 visualisieren die verschiedenen Klassen jeweils anhand des easeIn-Effekts (aus Gründen der Verdeutlichung sind die Effekte überzeichnet dargestellt).

Abbildung 72:  Beschleunigungseffekt Back.easeIn

Abbildung 75:  Beschleunigungseffekt Regular.easeIn

Abbildung 76:  Beschleunigungseffekt Strong.easeIn

294

Kapitel 22  Tween- und TransitionManager-Klasse

Eigenschaft

Bedeutung

duration

Gesamtdauer der Animation (Sekunden oder Frames)

finish

Endewert der Animation, entspricht dem beim Aufruf übergebenen Wert

FPS

Bildwiederholrate der Animation, die mit der Bildwiederholrate des gesamten Flashfilms übereinstimmt, falls dieser Wert nicht explizit gesetzt wird. Diese Eigenschaft ist nicht schreibgeschützt.

position

Aktueller Wert der Eigenschaft, die animiert wird.

time

Aktuelle Zeit der Animation

Eigenschaften der Tween-Klasse

22.3 Eigenschaften (duration, finish, FPS, position, time) Die Tween-Klasse verfügt über insgesamt 5 Eigenschaften, von denen 4 schreibgeschützt sind. Unsere Tabelle gibt Auskunft über diese Eigenschaften. Wir wollen einige dieser Eigenschaften beispielhaft auslesen. 8. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer um folgenden Aufruf: tweenKontrolle();

9. Fügen Sie im Funktions-Block folgende Deklaration ein: function tweenKontrolle() {

 trace(„finish: „+mxTweenX.finish);  this.onEnterFrame = function() {

genschaft finish ausliest. Der dort angegebene Wert entspricht dem Wert, den wir bei Initialisierung von mxTweenX als Endwert für die horizontale Bewegung übergeben haben. Anschließend wird ein onEnterFrame-Ereignis definiert, in dem wir permanent den aktuellen Stand der Animation kontrollieren. Dies geschieht solange, bis die aktuelle Zeit der Animation deren Gesamtdauer entspricht. Dann lassen wir uns einen Hinweis ausgeben und löschen das onEnterFrame-Ereignis, da es nicht mehr länger benötigt wird. Mit Hilfe der if-Bedingung können wir also erkennen, wann die Animation endet. Wie im übernächsten Abschnitt gezeigt, verfügt die Tween-Klasse sogar über ein eigenes Ereignis, mit dem sich das Ende einer Animation einfacher feststellen lässt.

22.4 Methoden

 trace(„habefertisch“);

Die meisten Methoden der Tween-Klasse erinnern an eine Videosteuerung und lehnen sich partiell an das an, was die MovieClip-Klasse zur Steuerung von Zeitleisten-Animationen bietet. Die Tabelle listet die einzelnen Methoden auf.

}

Methode

 trace(mxTweenX.position);

 if (mxTweenX.time == mxTweenX. duration) {  delete this.onEnterFrame;

Bedeutung

};

continueTo() Führt eine Animation ab der aktuel-

Im Nachrichtenfenster gibt ihnen Flash zunächst den Endwert der Animation an, der der Gesamtbreite Ihres Films minus 100 entspricht. Anschließend erhalten Sie Positionsangaben, bis am Ende die trabatonische Meldung „habefertisch“ auftaucht. Wir legen die neue Funktion tweenKontrolle() an, die zunächst mit einem trace()-Befehl die Ei-

fforward()

Springt zum Ende der Animation

nextFrame()

Geht zum nächsten Bild der Animation

prevFrame()

Geht zum vorhergehenden Bild der Animation

resume()

Lässt eine gestoppte Animation an der aktuellen Stelle weiter abspielen

len Position zu einem neuen Endwert in einer angegebenen Dauer aus

}

22.5  Ereignisse

295

Methode

Bedeutung

rewind()

Springt zum Anfang der Animation

start()

Startet die Animation vom ersten Bild an

stop()

Stoppt die Animation in der aktuellen Phase

toString()

Gibt den Klassennamen „Tween“ aus

yoyo()

Kehrt die Animation um und spielt sie ab

Methoden der Tween-Klasse

Mit Ausnahme von continueTo() und dem lustig klingenden, aber treffend bezeichneten yoyo() dürften diese Methoden selbsterklärend sein. Sie dienen schlicht zum Steuern des Ablaufs der Animation. Wirklich spannend sind eigentlich nur die genannten Ausnahmen, die komplexere Abläufe ermöglichen. Ihre Wirkungsweise wird im nächsten Abschnitt im Zusammenhang mit den Ereignissen der TweenKlasse erläutert. Beachten Sie, dass die Methode stop() automatisch an den Beginn der Animation springt, falls Sie einen Tween einrichten, der erst zu einem späteren Zeitpunkt, z. B. auf Mausklick, ausgeführt werden soll. In unserem konkreten Beispiel würde das bedeuten, dass die Kugel nicht auf der händisch zugewiesenen Stelle bis zum Start der Animation verharrt, sondern sie hüpft direkt auf den bei der Instanziierung der Tween-Klasse zugewiesenen Startpunkt. 10. Kommentieren Sie Deklaration und Aufruf von tweenKontrolle() sowie die Initialisierung von mxTweenAlpha aus. 11. Weisen Sie kugel im Eigenschaftsfenster die Position 0,0 zu. 12. Erweitern Sie die Deklaration von init() unmittelbar nach der Initialisierung von mxTweenX um:

mxTweenX.stop();

13. Erweitern Sie den Funktions-Block nach der Deklaration von init():  kugel.onPress = function(){  mxTweenX.start();  }

Beim Testen befindet sich die Kugel nicht mehr an der von Ihnen im Eigenschaftsfenster zugewiesenen Position. Sie wurde um 100 Pixel nach rechts verschoben.

Per Mausklick auf die Kugel kann die Animation gestartet werden. Zunächst kommentieren wir jeden Bezug auf tweenKontrolle() aus, da diese Funktion nicht mehr benötigt wird; sie kann auch gerne komplett gelöscht werden. Um besser erkennen zu können, was geschieht, erhält die Kugel eine neue Position, indem wir sie in die linke obere Ecke des Screens versetzen. Um zu verhindern, dass die Animation wie am Anfang der Übung unmittelbar startet, wird sie durch die Methode stop() angehalten. Das führt jedoch dazu, dass die Kugel die bei der Instanziierung von mxTweenX übergebene Startposition nRand bereits übernimmt. Für Flash bedeutet diese Instanziierung nämlich, dass die gewünschte Animation direkt eingerichtet und somit ihr erstes Bild angezeigt wird, genauso, wie wir es von einer Zeitleistenanimation her gewohnt sind. Abschließend erhält kugel ein onPress-Ereignis, demzufolge der bereits angelegte Tween abgespielt wird.

22.5 Ereignisse Die Ereignisse der Tween-Klasse werden ausgelöst auf, wenn die Animation in irgend einer Form eine Änderung erfährt. Folgende Tabelle gibt einen Überblick über diese Ereignisse. Ereignis

Bedeutung

onMotionChanged

Tritt jedes Mal auf, wenn eine Änderung der animierten Eigenschaft erfolgt

onMotionFinished Tritt auf, wenn die Animation endet onMotionResumed

Tritt bei Aufruf der Methode resume() auf

onMotionStarted

Tritt auf, wenn die Animation gestartet wird

onMotionStopped

Tritt auf, wenn die Animation gestoppt wird

Ereignisse der Tween-Klasse

Mit Hilfe dieser Ereignisse lässt sich der Ablauf einer Animation recht exakt kontrollieren. Als besonders wichtig erweist sich onMotionFinished, das es ermöglicht, komplexe Animationen aus einzelnen Bausteinen zu erstellen. Wir wollen uns das beispielhaft an einer horizontalen Bewegung anschauen.

296

Kapitel 22  Tween- und TransitionManager-Klasse

14. Kommentieren Sie die Deklaration und Initialisierung von mxTweenAlpha aus. 15. Löschen Sie das onPress-Ereignis der Kugel. 16. Löschen Sie den Aufruf der stop()-Methode von mxTweenX. 17. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer:  mxTweenX.onMotionFinished = function() {

Beim testen bewegt sich unsere Kugel permanent zwischen dem rechten und dem linken Bühnenrand hinund her, wobei sie jedes Mal eine Pendelbewegung um die Zielpunkte herum ausführt. Die Methode yoyo() macht nichts anderes, als die zuvor erfolgte Animation umzukehren. Sie entspricht damit exakt dem Menübefehl <Modifizieren>.

 this.continueTo(Stage.width/2, 5);

22.6 Sukzessive Animation verschiedener Eigenschaften Wenn Sie testen, bewegt sich die Kugel wie in der  };

anfänglichen Übung nach rechts. Endet diese Animation, kehrt die Kugel bis zur Screenmitte zurück, wo sie nach kurzem Wackeln zum Stehen kommt. Zunächst heben wir die Ausführung derjenigen Zeilen auf, die nicht mehr benötigt werden (Änderung der Deckkraft, Mausklick, Anhalten des Tweens). Anschließend weisen wir ein onMotionFinishedEreignis zu, dass dann ausgeführt wird, wenn die erste Animation, also die Bewegung zum rechten Rand hin, endet. Durch die Methode continueTo() wird Flash angewiesen, die bisherige Animation von der Stelle aus fortzuführen, an der sich die Kugel aktuell befindet. Als neues Ziel geben wir die Screenmitte an, die innerhalb von 5  Sekunden erreicht werden soll. Diese Methode übernimmt alle beim anfänglichen Einrichten von mxTweenX übergebenen Argumente mit Ausnahme der Zielposition und der Animationsdauer, die bei ihrem Aufruf gesondert zu definieren sind. Der Vorteil dieser Vorgehensweise besteht darin, sehr leicht eine bereits definierte Animation mit neuen Werten fortzusetzen. Allerdings bietet sie nicht die Möglichkeit, die animierte Eigenschaft zu ändern. Eine Lösung für dieses Problem finden Sie im nächsten Abschnitt. Wollen Sie Statt dessen eine permanente Animation zwischen zwei exakt definierten Zuständen realisieren, wie wir sie im Kapitel Geskriptete Animationen ausführlich kennen gelernt haben, so bietet Flash die wunderbar einfache Methode yoyo() an. 18. Kommentieren Sie in der Zuweisung des onMotionFinished-Ereignisses den Aufruf der continueTo()-Methode aus. 19. Weisen Sie demselben Ereignis folgenden Aufruf zu:

this.yoyo();

Unser Skript gestaltet sich etwas komplexer, wenn mehrere Tweens verschiedener Eigenschaften hintereinander abgespielt werden sollen, denn Flash stellt für diesen Zweck keine vorgefertigte Methode zur Verfügung. Wir wollen uns beispielhaft auf die horizontale und vertikale Position beschränken. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects vertikal mittig und horizontal an beliebiger Stelle eine Kugel der Größe 50 × 50 beliebiger Farbe. 3. Wandeln Sie die Kugel in einen MovieClip namens mcKugel um. 4. Weisen Sie der Kugel den Instanznamen kugel zu. 5. Weisen Sie actions folgendes Bildskript zu:  //----------- import –--------------  import mx.transitions.*;

 import mx.transitions.easing.*;

 //------------ vars –---------------  var mxTweenXY:Tween;

 var nIndex:Number = 0;

 var nRand:Number = 100;

 var aTweenWerte:Array = [[„_x“, Stage.width-nRand], [„_y“, nRand], [„_x“, nRand], [„_y“, Stage.heightnRand]];

 //--------- functions –-------------  function init(pWer:MovieClip, pStartX:Number, pStartY:Number):Void {  pWer._x = pStartX;  pWer._y = pStartY;  tweenen(pWer);

22.6  Sukzessive Animation verschiedener Eigenschaften

297

Abbildung 77:  Sukzessives Ausführen mehrerer Tweens

 }

 function tweenen(pWer:MovieClip) {  var nStart:Number = pWer[aTweenWerte[nIndex][0]];

 mxTweenXY = new Tween(pWer, aTweenWerte[nIndex][0], Bounce.easeOut, nStart, aTweenWerte[nIndex][1], 2, true);

 mxTweenXY.onMotionFinished = function() {  nIndex++;

 if (nIndex
 trace(„habefertisch!“); } };  }

 //----------- start –----------------

Aus Gründen der Darstellung liegen die einzelnen zur Kennzeichnung der Bewegung verwendeten Pfeile vertikal verschoben vor. Selbstverständlich ändert sich beim horizontalen Abprallen nur die horizontale Position. Unserem Skript liegt der Gedanke zugrunde, die gewünschten Bewegungen in einem Array zu erfassen. Dann können wir mit Hilfe einer rekursiven Funktion so oft darauf zugreifen, bis wir alle Animationen abgespielt haben. Die betreffende Funktion macht dabei weiter nichts als die Tween-Klasse jeweils mit neuen Inhalten zu instanziieren. Wie im ersten Beispiel importieren wir die benötigten Klassen und richten eine Variable ein, um den gewünschten Tween referenzieren zu können. Da die Animationsphasen per Array definiert werden sollen, legen wir einen Startwert für den Zugriff auf das erste Element fest. Außerdem speichern wir einen willkürlich gewählten Abstand vom Außenrand, der hier 100 Pixel beträgt. In aTweenWerte halten wir pro Ani-

 init(kugel, nRand, Stage.heightnRand);

Beim Starten bewegt sich die Kugel, beginnend am linken unteren Rand, entgegen dem Uhrzeigersinn an den Rändern der Bühne entlang, bis sie wieder am Ausgangspunkt eintrifft. Sie folgt einem imaginären rechteckigen Pfad, wobei sie an jedem Eckpunkt kurz hin- und herwackelt, als sei sie von einem Hindernis abgeprallt. Unsere Abbildung 77 zeigt den gesamten Animationspfad. Das Abprallen am Ende zeigt Abbildung  78 beispielhaft anhand der ersten Animationsphase.

Abbildung 78:  Abprallen am rechten Rand

298

mationsphase die zu ändernde Eigenschaft und deren Zielwert fest, wobei jede Phase ein eigenes Array erhält. Der Funktions-Block definiert die klassische init()-Funktion, die das als Parameter zu übergebende Objekt auf die ebenfalls in Form von Parameteren vorliegende X- und Y-Position setzt. Danach ruft sie die eigentliche tweenen()-Funktion auf, die für die Animationen sorgt. Sie erhält als Argument gleichfalls das zu animierende Objekt. Aufgrund unserer Entscheidung, zwei verschiedene Eigenschaften zu tweenen, müssen wir zu Beginn der Animation jeweils herausfinden, welche Eigenschaft angesprochen werden muss. Die betreffende Information befindet sich in jedem eine einzelne Phase beschreibenden Array an erster Stelle. Findet sich dort der String „_x“, ist die x-Position der Kugel gemeint, ansonsten ihre y-Position. Diese speichern wir in der lokalen Variable nStart. Da Objekteigenschaften von Flash in einem Hash erfasst werden, können wir mit dem Array-Operator [] unmittelbar die gewünschte Eigenschaft für den in pWer übergebenen MovieClip auslesen. Anschließend weisen wir mxTweenXY einen neuen Tween zu, der folgende Werte umfasst:

• zu bewegendes Objekt, also kugel; • zu animierende Eigenschaft, und zwar _x und _y im Wechsel;

• Art der Bewegung, in unserem Fall ein Bounce-

Verhalten; • der Startwert, wobei wir jeweils die aktuelle horizontale oder vertikale Position von kugel verwenden, je nachdem, welche Eigenschaft gerade animiert werden muss; • der Endewert der Animationsphase; • die Dauer in Sekunden, wobei wir im vorliegenden Beispiel faktisch mit unterschiedlichen Tempos arbeiten, da der vertikale Weg kürzer als der horizontale ist; • den Hinweis, dass sich der vorhergehende Wert auf Sekunden und nicht auf Frames bezieht. Das Abspielen mehrerer Phasen hintereinander erreichen wir, indem wir nach dem Ende einer Phase jeweils das Ereignis onMotionFinished verwenden, um zu kontrollieren, ob im Array noch weitere Phasen definiert sind. Ist das der Fall, rufen wir dieselbe Funktion noch einmal auf, wobei sie dann mit einem inkrementierten Wert für den Indexzugriff auf aTweenWerte startet. Das geschieht so lange,

Kapitel 22  Tween- und TransitionManager-Klasse

wie nIndex kleiner der Gesamtlänge des besagten Arrays ist. Andernfalls nämlich haben wir das Ende des Arrays und damit das Ende der gesamten Animation erreicht. Wir lassen uns dann beispielhaft ein trace() ausgeben; an dieser Stelle stünde natürlich Ihr Code, der nach Abschluss aller Tweens aufgerufen werden soll. Ganz am Ende rufen wir init() mit den gewünschten Argumenten für das zu animierende Objekt sowie die horizontale und vertikale Startposition auf.

22.7 TransitionManager-Klasse Mit einer speziellen Art der Animation befasst sich die Transition-Klasse: Sie definiert Übergangseffekte für Folien und MovieClips. Wer früher schon mit Director gearbeitet hat, weiß, wie beliebt solche Übergänge sind, und wer Powerpoint kennt, weiß, wie nervig sie manchmal auftreten können. Davon einmal abgesehen stellt diese Klasse 10 Übergänge auf eine ähnlich simple, mit sehr wenig Programmieraufwand verbundene Art zur Verfügung wie schon die zuvor besprochene Tween-Klasse, wobei sich deren Beschleunigungseffekte einbinden lassen, um die Animationen den eigenen Wünschen anpassen zu können. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects vertikal mittig und horizontal an beliebiger Stelle eine Kugel der Größe 50 × 50 mit beliebigem Farbverlauf. 3. Wandeln Sie die Kugel in einen MovieClip namens mcKugel um. 4. Weisen Sie der Kugel den Instanznamen kugel zu. 5. Weisen Sie actions folgendes Bildskript zu:  //---------- import –---------------  import mx.transitions.*;

 import mx.transitions.easing.*;

 //----------- vars –-----------–----  var tmTransition:TransitionManager;  var oTransition:Object;

 //--------- functions –-------------  function init():Void {

 oTransition = new Object();  oTransition.type = Blinds;

22.8  Eigenschaften, Methoden und Ereignisse

299

 oTransition.direction = Transition. IN;

Einrichten und Start kann in zwei Schritte gesplittet werden:

 oTransition.easing = None.easeNone;

tmTransition = new TransitionManager(kugel);

 oTransition.duration = 2;

 oTransition.numStrips = 20;  oTransition.dimension = 0;

 tmTransition = new TransitionManager.start(kugel, oTransition);  }

 //----------- start –---------------  init();

Unsere Kugel wird streifenweise eingeblendet. Anfangs importieren wir die benötigten Klassenpakete und richten zwei Variablen ein, um die TransitionManager-Klasse zu instanziieren und ein Objekt vorzubereiten, das später alle Eigenschaften des gewünschten Übergangs festlegen soll. Die Funktion init() füllt dann die konkreten Eigenschaften:

• type, die Art des Übergangs; • direction, Ein- oder Ausblendeffekt; • duration, Dauer in Sekunden; • easing, Beschleunigungseffekt, der den

in der Tween-Klasse verwendeten Effekten entspricht; • numStrips, Anzahl der verwendeten Streifen; • dimension, Richtung des Effekts, wobei 0 vertikal und 1 horizontal meint. Diese Parameter sind effektspezifisch und werden im nächsten Abschnitt für alle möglichen Übergänge vorgestellt. Schließlich erfolgt das Einrichten eines konkreten Übergangs, dem wir den zu animierenden MovieClip sowie die zu verwendenden Einstellungen übergeben. Zu der hier gewählten Schreibweise existieren einige Alternativen, die jedoch entweder umständlicher oder unübersichtlicher sind. So können die Objekteigenschaften unmittelbar bei der Instanziierung von tmTransition übergeben werden, was zu folgendem Bandwurm führen würde: tmTransition = new TransitionManager.start(kugel, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:20, dimension:0});

Die gesonderte Einrichtung von oTransition würde dabei entfallen.

tmTransition. startTransition(oTransition);

Etwas vergleichbares haben wir bei der Tween-Klasse kennen gelernt, als ein Tween eingerichtet, aber das automatische Ausführen per stop()-Methode unterbunden wurde. Anders als dort übernimmt im Fall der TransitionManager-Klasse das betroffene Objekt nicht die als Argument definierten Eigenschaften. Das ist auch logisch, denn hier werden diese Eigenschaften erst dann übergeben, wenn der Übergang explizit gestartet wird. Ohne den Aufruf der Methode startTransition() ist die Kugel daher bereits sichtbar.

22.8 Eigenschaften, Methoden und Ereignisse Da sich die Anzahl der Eigenschaften, Methoden und Ereignisse in einem überschaubaren Rahmen hält, wollen wir sie in diesem Abschnitt gemeinsam ansprechen. Die folgenden drei Tabellen geben einen Überblick. Eigenschaft

Bedeutung

content

Animierter MovieClip oder Folie

contentAppearance Grafische Eigenschaften des zu ani-

mierenden MovieClips, die in Form eines Objekts angegeben werden. Diese Eigenschaft ist schreibgeschützt

Eigenschaften der TransitionManager-Klasse

Methode

Bedeutung

start()

Richtet einen Übergangseffekt für ein angegebenes Objekt ein und startet ihn

startTransition() Startet einen Übergangseffekt,

der bereits für ein Objekt eingerichtet wurde

toString()

Gibt den Klassennamen „TransitionManager“ aus

Methoden der TransitionManager-Klasse

300

Kapitel 22  Tween- und TransitionManager-Klasse

Ereignis

Bedeutung

allTransitionsInDone

Listener-Ereignis, das auftritt, wenn diejenigen Änderungen durchgeführt wurden, die dem Wert Transition. IN (Einblenden) entsprechen

allTransitionsOutDone

Listener-Ereignis, das auftritt, wenn diejenigen Änderungen durchgeführt wurden, die dem Wert Transition. OUT (Ausblenden) entsprechen

Ereignisse der TransitionManager-Klasse

Für den praktischen Einsatz wichtig sind letztlich nur die Methoden start() und startTransition(), die einen Übergang einrichten und starten. Der Unterschied zwischen beiden wurde bereits in der obigen Übung vorgestellt.

22.9 Übergangstypen Einen für Flash-Maßstäbe reichhaltigen Fundus an Übergangstypen bietet die TransitionManager-Klasse an, die in folgender Tabelle erfasst und mit den Parametern erläutert werden. Da Art und Anzahl der Parameter effektabhängig sind, empfiehlt es sich, zunächst ein Objekt mit denjenigen Eigenschaften einzurichten, die der verwendeten TransitionManager-Instanz in jedem Fall mitgeteilt werden müssen:

• oTransition

= new Object(); Einrichten des später als Argument übergebenen Objekts.

Typ

Zusätzliche Parameter

Bedeutung

Blinds

numStrips (Number): beliebige Ganzzahl dimension (Number): 0 (vertikale Aus-

Blendet streifenweise ein oder aus

Fade

keine

Blendet ohne weiteren Effekt ein oder aus

Fly

startPoint (Number): 1 (links oben), 2

MovieClip bewegt sich aus der angegebenen Richtung auf die Position, die er vor der Anwendung des Effekts einnahm, oder bewegt sich in diese Richtung fort

Iris

startPoint (Number): 1 (links oben), 2

Legt MovieClip mit einer rechteckigen oder kreisförmigen Maske sukzessive frei, beginnend am angegebenen Startpunkt, oder verdeckt ihn Richtung Startpunkt hin

Photo

keine

Ein- oder Ausblenden mit abschließendem Blitzlicht

PixelDissolve

xSections (Number): beliebige Ganz-

Pixelweises Ein- oder Ausblenden. Fehlt einer der Parameter, wird der Effekt trotzdem ausgeführt, aber er verlangsamt sich.

Rotate

ccw (Boolean): true (entgegen Uhrzeigersinn), false (im Uhrzeigersinn) degrees (Number): beliebige

Dreht einen MovieClip vom angegebenen Winkel zu dem Winkel, den er vor Anwendung des Effekts einnahm, und vice versa.

Squeeze

dimension (Number): 0 (horizontal), 1 (vertikal)

Skaliert horizontal oder vertikal

Wipe

startPoint (Number): wie Fly/ Iris, aber ohne 5 (Mitte)

Legt einen MovieClip mit einer Maske sukzessive frei, beginnend am angegebenen Startpunkt, oder verdeckt ihn Richtung Startpunkt hin. Bei der Maske handelt es sich um ein Rechteck, das im 90 – Grad-Winkel zum Startpunkt gedreht wird.

Zoom

keine

Skaliert proportional

richtung), 1 (horizontale Ausrichtung)

(Mitte oben), 3 (rechts oben), 4 (Mitte links), 5 (Mitte), 6 (Mitte rechts), 7 (links unten), 8 (Mitte unten), 9 (rechts unten) (Mitte oben), 3 (rechts oben), 4 (Mitte links), 5 (Mitte), 6 (Mitte rechts), 7 (links unten), 8 (Mitte unten), 9 (rechts unten) shape (Function): Iris.SQUARE (Rechteck), Iris.CIRCLE (Kreis)

zahl (Anzahl horizontaler Pixel) ySections (Number): beliebige Ganzzahl (Anzahl vertikaler Pixel)

Zahl (Drehung in Grad)

Typen von Übergangseffekten

22.9  Übergangstypen

301

• oTransition.direction

• oTransition.startPoint = 3; • oTransition.shape = Iris.SQUARE;

•

Die Bezeichnung der Parameter finden Sie in der zweiten Spalte der vorhergehenden Tabelle zu den Effekttypen. Über den Sinn so manchen Effekts lässt sich zwar trefflich streiten, doch bietet der eine oder andere Typ einen schnellen Zugriff auf eine Animation, die man ansonsten eher umständlich selbst programmieren müsste. Sparsam eingesetzt, kann ein Übergangseffekt eine Bereicherung darstellen, zumal er sich mit einem Tween kombinieren lässt und das easing-Package zahlreiche Variationsmöglichkeiten anbietet, die förmlich zum experimentieren einladen.

= Transition. IN; Richtung des Effekts, wobei In einem Einblenden und OUT einem Ausblenden entspricht. oTransition.duration = 2; Dauer des Ef-

fekts in Sekunden. Fließkommawerte sind möglich.

• oTransition.easing

=

None.easeNone;

Beschleunigungseffekt, dessen Sinn stark vom aktuell verwendeten Übergangseffekt abhängt. • oTransition.type = Iris; Der gewünschte Effekttyp. Anschließend weisen Sie die erforderlichen effektspezifischen Parameter zu, hier beispielhaft am Typ Iris aufgezeigt:

23

Debugging

„Fehler sind dazu da, um gemacht zu werden“, weiß der Volksmund, und das trifft ganz besonders auf die Programmierung zu. Nahezu kein Programm, mit dem Sie arbeiten, dürfte völlig fehlerfrei sein. Auch Flash stellt in dieser Hinsicht keine Ausnahme dar. Dahinter steckt keine Schlamperei, sondern der Umfang des Codes bringt es naturgemäß mit sich, dass irgendwo Fehler auftauchen. Eine Applikation, die Sie in Ihrer Arbeit einsetzen, kann aus Hunderttausenden oder gar Millionen Zeilen Code bestehen. Es reicht aus, wenn ein einziges Zeichen an einer kritischen Stelle falsch ist, und schon hält ein schöner Bug Einzug. Glücklicherweise sind in den meisten Fällen diese Bugs nicht kritisch, so dass Sie deren Auswirkungen nicht unbedingt als Fehler wahrnehmen. Das sollte Sie nun keineswegs dazu verleiten, die ganze Angelegenheit lediglich sportlich zu sehen, schließlich lässt sich nie von vorneherein abschätzen, welche Folgen ein fehlerhafter Code haben wird. Daher ist man als verantwortungsvoller Entwickler dazu aufgerufen, den Code so fehlerfrei zu gestalten, wie es irgendwie möglich ist.

23.1 Fehlertypen Glücklicherweise bestehen Ihre Programme zumeist aus einer erheblich geringeren Menge an Code (solange Sie nicht komplexere Applikationen wie RIA erstellen). Aber selbst einige 100 Zeilen bieten schon ausreichend Raum, um Fehler zu machen. Sie unterteilen sich prinzipiell in:

• Magische Fehler: Diese Art tritt besonders bei An-

fängern auf und verschwindet mit anwachsender Kenntnis und Erfahrung automatisch und meistens

auch vollständig. Nicht selten sind nämlich gerade Anfänger der Meinung, alles richtig gemacht zu haben, aber das erstellte Programm verhält sich dennoch irgendwie nicht korrekt. In dem Fall kann also nur das Programm „schuld sein“. Tatsächlich übersieht man als Anfänger schlicht allzu schnell eigene Fehler. • Syntax-Fehler: Eine Programmiersprache folgt genau so wie eine natürliche Sprache einer gewissen Struktur, die Sie in den vorhergehenden Kapiteln ausführlich kennen gelernt haben. So bedeutet das Verwenden einer geöffneten Klammer, dass sie nach ihrem Auftreten (und nicht vorher!) auch irgendwo wieder geschlossen werden muss. Solche Fehler lassen sich zumeist relativ einfach finden, da sie Flash beim Kompilieren anmerkt. • Laufzeitfehler: Auch wenn Ihr Skript formal korrekt ist, können darin Anweisungen enthalten sein, die sich nicht sinnvoll ausführen lassen bzw. die zu einem nicht verwertbaren Ergebnis führen. Dazu gehört beispielsweise die Division eines Wertes durch 0 (während die Multiplikation mit 0 erlaubt und möglich ist). Als Ergebnis für eine derartige Berechnung erhalten Sie Infinity bzw. unendlich, eine Zahl, mit der man vielleicht die depressive Stimmung eines durchschnittlichen Steuerzahlers treffend beschreiben kann, die jedoch definitiv nichts in Ihrer Applikation verloren hat. • Logische Fehler: Derartige Fehler lassen sich am schwersten finden, denn sie sind syntaktisch zwar richtig und werden insofern beim Kompilieren nicht als fehlerhaft angemerkt. Dennoch entspricht der Programmablauf nicht unseren Erwartungen, weil wir fehlerhafte Vorgaben gemacht haben (insofern kann man sie ebenfalls zu den Laufzeitfehlern zählen). So wäre es beispielsweise falsch, in

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

303

304

einem Skript per Mausklick eine Variable jeweils zu inkrementieren, den erwarteten Grenzwert aber nur außerhalb des Klicks abzufragen. Wenn sie nur bis zu einem bestimmten Wert hochgezählt werden darf, dann muss die Abfrage exakt an der Stelle erfolgen, an der die Variable geändert wird – und das ist in diesem Beispiel eben in dem genannten Mausklick-Ereignis. Um solchen Fehlern auf die Spur zu kommen, existieren verschiedene Techniken, von denen wir einige bereits kennen gelernt haben. Dazu gehört das Verwenden eines Frameworks, um Code zu strukturieren, sowie das Erstellen eines detaillierten Flowcharts oder Ablaufplans, um die Programmlogik systematisch zu entwickeln. Je sauberer Ihr Code aufgebaut ist, desto einfacher gestaltet sich die konkrete Fehlersuche.

23.2 Erste Fehlerkontrolle mit Auto-Format Während Sie ein Skript schreiben, sollten Sie immer wieder durchführen, so dass Ihr Skript kompiliert und damit auf etwaige Fehler hin überprüft wird. Je früher Sie Fehlermeldungen erhalten, desto größer ist die Chance einer schnellen Korrektur. Denn der betreffende Fehler muss dann mit den zuletzt eingegebenen Codezeilen zusammen hängen. Einen gewissen Hinweis auf dessen Ort enthält auch die von Flash im Fall der Fälle ausgegebene Meldung, sobald Sie eine swf-Datei generieren. Dazu ein einfaches Beispiel: 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Skript zu:

Kapitel 23  Debugging

 for(var i: = 0; i < 5; i++){  trace(„i beträgt: “ + i);  }

Das Skript soll nichts weiter tun als von 0 bis 5 hoch zu zählen und uns eine entsprechende Information auszugeben. Es dient uns lediglich als Test, um die Fehlerkontrolle von Flash verstehen zu lernen. Insofern benötigen wir kein komplexeres Skript. Beim Kompilieren durch Klick auf die Option des Skript-Editors erhalten wir die in Abbildung 79 gezeigte Fehlermeldung. In der Spalte Position gibt uns Flash einen Hinweis darauf, an welcher Stelle sich der Fehler befindet. In unserem Fall handelt es sich um Zeile 1. In der Spalte „Beschreibung“ versucht Flash, eine einigermaßen angemessen Beschreibung des Fehlers zu geben. Konkret wird bemängelt, dass hinter dem Doppelpunkt bei der Deklaration der Variablen i eine konkrete Information erwartet wird. Die letzte Spalte wiederholt die unangenehm aufgefallene Befehlszeile. Tatsächlich wurde von uns die Deklaration von i nicht vollständig vorgenommen, da der Datentyp fehlt. 3. Korrigieren Sie die fehlerhafte Zeile (Fettdruck): for(var i:Number = 0; i < 5; i++){

Die Option gibt nun keine Fehlermeldung mehr aus. Auf den ersten Blick sieht die Ausgabe beim Kompilieren sehr informativ aus, doch leider gibt es zahlreiche Fehler, bei denen die Fehlermeldung bestenfalls einen ungefähren Hinweis bietet und schlimmstenfalls die Verwirrung gerade von Anfängern vergrößert. Zudem fällt so manche Beschreibung allzu kryptisch aus, falls der notwendige Programmierhintergrund fehlt. Zu den recht häufigen Fehlern, die sich nicht mehr so

Abbildung 79:  Fehlermeldung im Compiler-Fenster (1)

23.2  Erste Fehlerkontrolle mit Auto-Format

305

Abbildung 80:  Fehlermeldung im Compiler-Fenster (2)

einfach finden lassen, zählen nicht korrekt geschlossene Anweisungs-Blöcke. Flash zeigt zwar i. d. R. die störende öffnende Klammer, ist aber logischerweise nicht in der Lage, auch die korrekte Zeile anzugeben, an der die schließende eingefügt werden müsste.

nen, wo eine schließende Klammer eingetragen werden muss, nämlich nach dieser letzten Zeile.

1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen Kreis (beliebige Farbe für Füllung und Umrandung, beliebige Größe, beliebige Position auf der Bühne). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis). 4. Weisen Sie actions folgendes Bildskript zu:

Nun ist die Welt zwar wieder in Ordnung, aber die Fehlersuche würde erheblich anders verlaufen, wenn wir ein komplexeres Skript vor uns hätten, in dem sich beispielsweise ineinander verschachtelte Anweisungs-Blöcke befinden würden. So bedeutet der konkrete Hinweis auf Zeile 6 in unserem Beispiel nicht zwangsläufig, dass danach die schließende Klammer einzufügen ist.

 this.onMouseDown = function(){

v ar nDif:Number, nDifX:Number, nDifY:Number;  nDifX = _xmouse-Stage.width;

 nDifY = _ymouse-Stage.height;

n Dif = Math.round(Math.sqrt((nDifX* nDifX)+( nDifY* nDifY)));

t race(„Die Entfernung zur rechten unteren Ecke beträgt: ”+nDif);

Das Skript errechnet bei Mausklick den Abstand zwischen der angeklickten Position und der rechten unteren Ecke und gibt diese im Nachrichtenfenster aus – zumindest theoretisch. Denn wenn Sie kompilieren, taucht die in Abbildung  80 gezeigte Fehlermeldung auf: Wie zuvor erhalten wir einen Hinweis auf eine fehlerhafte Zeile, allerdings nur auf das Erscheinen der geöffneten Klammer direkt am Beginn des Skripts. Eine zweite Meldung mokiert die letzte Zeile. Im aktuellen Beispiel ist das zugegebenermaßen nicht dramatisch, da wir aufgrund der wenigen Zeilen und fehlender Verschachtelung sehr schnell erkennen kön-

5. Fügen Sie nach Zeile 7 ein: }

6. Ersetzen Sie die zuvor eingefügte schließende Klammer in Zeile 7 durch:  kreis.onRollOver = function(){

 trace(„bitte erneut klicken“);  }

Die nach dem Kompilieren angezeigte Fehlermeldung lautet wie in Abbildung 81 gezeigt. Die zweite Meldung verweist auf Zeile 10. Würden wir das als Hinweis auf die Zeile verstehen, nach der eine schließende Klammer eingefügt werden muss, dann wäre unser Skript zwar syntaktisch korrekt, logisch aber falsch. Denn in dem Fall würde das onRollOver-Ereignis in das onMouseDown-Ereignis eingeschlossen. Damit Flash überhaupt auf ein onRollOver reagieren könnte, müsste einmal ein Mausklick stattfinden. Wir wollen beide Ereignisse (oder genauer: beide Anweisungs-Blöcke) jedoch unabhängig voneinander definieren. Da Flash nicht wissen kann, wo wir schließen wollen, wird uns lediglich die unter dem Gesichtspunkt einer korrekten Syntax letztmögliche Zeile angezeigt, was im konkreten Beispiel

306

Kapitel 23  Debugging

Abbildung 81:  Fehlermeldung im Compiler-Fenster (3)

Abbildung 82:  Fehlermeldung im Compiler-Fenster (4)

eben die letzte Zeile des onRollOver-Ereignisses ist. Damit beginnt die mitunter mühsame Suche nach der korrekten Stelle für das Ende des ersten AnweisungsBlocks. Übrigens: Achten Sie darauf, die Fehlerhinweise exakt in der Reihenfolge abzuarbeiten, in der sie angezeigt werden. Denn nicht selten entstehen durch einen Fehler sogenannte Folgefehler, die automatisch mit der Korrektur des ersten aufgehoben werden. Wie angemerkt, kann so manche Fehlermeldung den Skript-Novizen ins Schwitzen bringen, weil sie trotz formaler Korrektheit eher unverständlich formuliert ist. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfungsbezeichner mcKreis). 3. Zeichnen Sie in mcKreis einen Kreis (beliebige Farbe für Füllung und Umrandung, beliebige Größe, beliebige Position auf der Bühne). 4. Kehren Sie zur Hauptzeitleiste zurück. 5. Weisen Sie actions folgendes Bildskript zu:  var mKreis:MovieClip;

m Kreis = this.attachMovie(„mcKreis“,„ kreis“,,this.getNextHighestDepth());

Achten Sie darauf, nach dem Instanznamen kreis boshafterweise zwei Kommas hintereinander einzufügen – ein klassischer „Vertipper“ also. Das Kompilieren belohnt Flash mit der in Abbildung 82 gezeigte Meldung. Die Beschreibung ist richtig, denn der Operand auf der rechten Seite der Gleichung enthält einen Fehler. Allerdings dürften Anfänger damit wenig anzufangen wissen, weil die konkrete Stelle, an der besagter Fehler erfolgte, nicht gekennzeichnet wird. Bei unverständlichen Meldungen bleibt leider nur, beginnend von der angemerkten Zeile aufmerksam den Code zu analysieren. Übrigens: Dass Flash es zumindest in diesem Beispiel durchaus besser weiß, zeigt sich bei einer kleinen Änderung des Skripts. 6. Fassen Sie beide Zeilen zu einer einzigen zusammen: var mKreis:MovieClip = this. attachMovie(„mcKreis“, „kreis“,, this.getNextHighestDepth());

Die resultierende Fehlermeldung lautet wie in Abbildung 83. Es wird nicht nur die Zeile (tja, Kunststück, es gibt ja

23.2  Erste Fehlerkontrolle mit Auto-Format

307

Abbildung 83:  Fehlermeldung im Compiler-Fenster (5)

nur eine!), sondern auch das den Fehler verursachende Zeichen korrekt angezeigt und die Fehlermeldung dürfte selbst für unerfahrene Anwender verständlich sein. Eine besondere Art von Fehlern hätte zwar abgefangen werden können, wird jedoch leider, leider beim Kompilieren und Veröffentlichen völlig ignoriert. Es findet nämlich keine Überprüfung statt, ob ein angesprochenes Objekt überhaupt existiert oder ob ein bereits von ActionScript reservierter Begriff missbraucht wurde. 1. Der Einfachheit halber verwenden wir die bestehende Datei, die Sie unter einem neuen Namen abspeichern. 2. Korrigieren Sie das Skript, indem Sie das überflüssige Komma löschen. 3. Ändern Sie den Verknüpfungsnamen im Skript (nicht jedoch in der Bibliothek!) in: var mKreis:MovieClip = this. attachMovie(„mcKreis1“, „kreis“, this.getNextHighestDepth());

Weder beim Kompilieren noch beim Testen der swf erhalten wir eine Fehlermeldung, obwohl auf ein nicht existentes Objekt namens mcKreis1 zugegriffen wird. Ein derartiger Schreibfehler schleicht sich ausgesprochen schnell ein und lässt sich kaum vermeiden. Die einzige Möglichkeit besteht darin, einen einmal vergebenen Namen per copy-and-paste zu verwenden, falls er mehrfach benötigt wird. Dies ist eine der Ausnahmen, in denen Kopieren als Ausdruck von Intelligenz und nicht von Faulheit oder Dummheit verstanden werden kann. Im Einzelfall mag das zwar umständlicher sein als den Namen jeweils neu zu schreiben, aber man vermeidet Schreibfehler. Selbst bei einer so schändlichen Tat wie dem Miss-

brauch eines reservierten Begriffs erhalten wir keine Fehlermeldung. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  var Array:Array = new Array(1,2,3);  Array.push(5);

 var aArray:Array = new Array(6,7,8);  aArray.push(9);

 trace(„falsches Array: ”+Array);

 trace(„richtiges Array: ”+aArray);

Ausgabe im Nachrichtenfenster: falsches Array: 1,2,3,5 richtiges Array: undefined Weder das Kompilieren noch Testen ergibt eine Warnung oder Fehlermeldung. Statt dessen wird tatsächlich ein Array mit einem reservierten Begriff als Bezeichner eingerichtet  – und ab diesem Zeitpunkt ist es nicht mehr möglich, mit dem new-Operator und dem Array-Konstruktor neue Arrays anzulegen. Die Einrichtung eines Arrays mit dem Klammer-Operator funktioniert dagegen weiterhin. 3. Erweitern Sie das Skript:  var aArray2:Array = [2,2,2];  trace(„aArray2: “+aArray2);

Ausgabe im Nachrichtenfenster: falsches Array: 1,2,3,5 richtiges Array: undefined aArray2: 2,2,2 Um solche Fehler zu vermeiden hilft einfach nur Disziplin: Reservierte Begriffe gelten als absolut tabu, wenn es darum geht, Bezeichner für eigene Objekte zu finden.

308

23.3 Das Nachrichtenfenster Gegenüber dieser eher rudimentären Fehlerkontrolle bietet unser heiß geliebtes und häufig verwendetes trace() in Zusammenarbeit mit dem Nachrichtenfenster eine gezieltere Möglichkeit. Denn wir können damit exakt den Ort und den Zeitpunkt festlegen, zu dem wir etwas über unser Skript erfahren wollen. Wir verwenden die trace()-Anweisung insbesondere um:

• Zu testen, ob und wann ein bestimmtes Ereignis eintritt; • Den Inhalt einer Variablen oder eines Arrays auszugeben; • Eigenschaften zu kontrollieren; • Herauszufinden, ob ein gewünschtes Objekt existiert.

Die konkrete Vorgehensweise unterscheidet sich prinzipiell nicht von dem, was Sie bereits in den vorherigen Kapiteln kennen gelernt haben. Betrachten wir zunächst die Kontrolle von Ereignissen. Flash bietet zwei verschiedene Ereignisse an, um Mausklicks abzufangen, nämlich onMouseDown und onPress. Nehmen wir an, wir würden fälschlicherweise das onMouseDown verwenden. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects einen Kreis (beliebige Farbe für Füllung und Umrandung, beliebige Größe, beliebige Position auf der Bühne). 3. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname und Verknüpfungsbezeichner mcKreis). 4. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –-------------- v ar mLinks:MovieClip, mRechts:MovieClip;

 //----------- functions –-----------  function init() {

m Links = this. attachMovie(„mcKreis“, „linkerKreis“, this.getNextHighest­ Depth());

m Rechts = this. attachMovie(„mcKreis“, „rechter­ Kreis“, this.getNextHighest­ Depth());  mLinks._x = mLinks._width;

Kapitel 23  Debugging

 mLinks._y = mLinks._height;

m Rechts._x = mLinks._x+mLinks._ width;  mRechts._y = mLinks._y;

 mLinks.onMouseDown = function() {  trace(„geklickt auf: „+this); };

 mRechts.onMouseDown = function() {  trace(„geklickt auf: „+this); };  }

 //------------- start –-------------  init();

Testen Sie, indem Sie ein swf-Datei generieren und dort auf den linken Kreis klicken. Sie erhalten als Ergebnis im Nachrichtenfenster die Ausgabe: geklickt auf: _level0.linkerKreis geklickt auf: _level0.rechterKreis Obwohl Sie nur auf einen Kreis klicken, können Sie mit Hilfe des trace()-Kommandos feststellen, dass sich ganz offensichtlich beide Kreise angesprochen fühlen. Das verwendete Ereignisse tritt also bei allen Kreisen auf. Wenn Sie darüber hinaus an einer beliebigen Stelle klicken, geschieht das gleiche. Wir erkennen also fest, dass sich ein onMouseDown unabhängig von konkreten Objekten auf beliebige Mausklicks bezieht. Da wir nun das verwendete Ereignis als Fehlerquelle identifiziert haben, lässt es sich schnell korrigieren. Um Variablen und Arrays zu kontrollieren, greifen wir direkt auf deren Inhalte zu. In unserem Beispiel soll eine bestimmte Aktion erst nach dem Ablauf einer gewissen Anzahl an Frames ausgeführt werden. Konkret handelt es sich um den Text „Starten“, der nach 10 Frames eingeblendet werden soll. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects ein dynamisches Textfeld ein (beliebige Größe und Position, Instanzname toInfo). 3. Weisen Sie actions folgendes Bildskript zu:  //-------------- vars –-------------  var nZahl:Number;

 var nDauer:Number = 10;

23.3  Das Nachrichtenfenster

 //--------–– functions –------------–  function init() {

 toInfo.text = „Warten“;

 this.onEnterFrame = function() {  nZahl++;

 if (nZahl == 10) {

 toInfo.text = „Start“;

 delete this.onEnterFrame; } };  }

 //------------- start –-------------  init();

Wenn Sie testen, zeigt Ihr Textfeld den zuerst zugewiesenen Text „Warten“ an  – und ändert ihn überhaupt nicht, egal, wie lange Sie warten. Hier sind gleich mehrere Fehlerquellen möglich. So könnte es sein, dass die init()-Funktion überhaupt nicht zur Ausführung kommt oder dass die Variable nZahl nicht inkrementiert wird. Beide potentielle Fehler lassen sich mit einem einzigen trace() testen. 4. Erweitern Sie die Deklaration von init() unmittelbar vor der Zuweisung des onEnterFrame-Ereignisses: trace(„nZahl vor onEnterFrame-Zuweisung:“ + nZahl);

Ausgabe im Nachrichtenfenster: nZahl vor onEnterFrame-Zuweisung:undefined Aus dieser Nachricht können wir folgern:

• Die

init()-Funktion wird ausgeführt, sonst könnte überhaupt keine Ausgabe erfolgen. • Der Wert der Variablen nZahl ist undefiniert, d. h. die Variable besitzt überhaupt keinen Inhalt. Dann ist es auch nicht verwunderlich, dass kein Inkrement erfolgt.

Den zweiten Punkt können wir noch genauer kontrollieren. 5. Fügen Sie in der Zuweisung des onEnterFrameEreignisses unmittelbar nach dem Inkrementieren von nZahl ein: trace(„Inkrement nZahl: „+nZahl);

309

Ausgabe im Nachrichtenfenster: nZahl vor onEnterFrame-Zuweisung:undefined Inkrement nZahl: NaN Inkrement nZahl: NaN Inkrement nZahl: NaN Auch hier zeigt sich eine fehlerhafte Durchführung des Inkrements, verursacht durch eine fehlende Initialisierung der Variablen nZahl. 6. Erweitern Sie die Deklaration der Variablen nZahl am Anfang des Skripts (Fettdruck): var nZahl:Number = 0;

Wenn Sie nun testen, wird nZahl korrekt hoch gezählt und sobald Flash den vorgegebenen Grenzwert erreicht, ändert sich der Text im Textfeld auf der Bühne. Ein derartiger direkter Zugriff auf eine Variable stellt eine ebenso einfache wie effiziente und häufig genutzte Fehlerkontrolle dar. Achten Sie dabei allerdings auf eine korrekte Schreibweise, denn AS 2 richtet eine nicht existente Variable automatisch ein, falls wir versuchen, darauf zuzugreifen. Würde in unserem Beispiel die trace()-Anweisung innerhalb des onEnterFrame-Ereignisses fälschlicherweise lauten: trace(„Inkrement nZahl: „+nZahl1);

Dann erhielten wir im Nachrichtenfenster ein undefined anstelle des NaN und hätten eine zusätzliche Variable namens nZahl1 eingerichtet. Immerhin deutet die Ausgabe auf einen anderen Fehler als zuvor hin, der sich wie bereits oben betont mit copy-and-paste vermeiden lässt. Ähnlich gehen wir vor, um den Inhalt eines Arrays zu kontrollieren. Beispielhaft erstellen wir ein Array, in dem bei jeder Mausbewegung die aktuelle Cursorposition gespeichert wird. Daraus ließe sich beispielsweise eine Animation generieren, mit der die Bewegung der Maus in einem bestimmten Zeitraum visualisiert wird. Oder man könnte als Gimmick die zurück gelegten Kilometer Ihrer Maus errechnen, woraus sich wiederum der Abnutzungsgrad der Cursorspitze feststellen ließe etc. – Sie sehen, für dieses konkrete Beispiel existieren zahlreiche wichtige Anwendungsmöglichkeiten. 1. Der Einfachheit halber verwenden wir die bestehende Datei, die Sie unter einem neuen Namen abspeichern.

310

2. Erweitern Sie den Variablen-Block um folgende Deklaration: var aMausPos:Array = [];

3. Entfernen Sie alle bisherigen trace()-Anweisungen, da sie nicht mehr benötigt werden. 4. Erweitern Sie innerhalb der Zuweisung des on­ EnterFrame-Ereignisses die if-Bedingung unmittelbar vor der delete-Anweisung:  this.onMouseMove = speichern;  this.onMouseDown = stoppen;

5. Fügen Sie innerhalb des Funktions-Blocks zwei weitere Deklarationen ein:  function speichern() {

 aMausPos.push(_xmouse, _ymouse); t race(„Mauskoordinaten: „+aMausPos);  trace(„---------------“);  }

 function stoppen(){

 delete this.onMouseMove;  }

Beim Testen erhalten wir beispielsweise folgende Ausgabe im Nachrichtenfenster: Mauskoordinaten: 146,175 --------------Mauskoordinaten: 146,175,145,175 --------------Mauskoordinaten: 146,175,145,175,144,175 --------------Die gestrichelte Linie tragen wir aus Gründen der Lesbarkeit ein, um besser erkennen zu können, wo ein Zugriff auf unser Array endet. Damit wir nicht allzu leicht in einem Zahlenmeer untergehen, sorgt das onMouseDown-Ereignis für ein Löschen des onMouseMove-Ereignisses, so dass keine weiteren Daten mehr gespeichert werden. Das Ergebnis im Nachrichtenfenster ist nicht wirklich befriedigend, da sich einzelne Positionswerte schwer identifizieren lassen. 6. Ändern Sie innerhalb der Deklaration von speichern() die erste trace()-Anweisung (Fettdruck): for (a in aMausPos) {

Kapitel 23  Debugging

t race(„Mauskoordinaten: „+aMausPos[a]); }

Die Ausgabe lautet jetzt (unter Verwendung der gleichen Daten wie zuvor): Mauskoordinaten: 146 Mauskoordinaten: 175 --------------Mauskoordinaten: 145 Mauskoordinaten: 175 Mauskoordinaten: 146 Mauskoordinaten: 175 --------------Mauskoordinaten: 144 Mauskoordinaten: 175 Mauskoordinaten: 145 Mauskoordinaten: 175 Mauskoordinaten: 146 Mauskoordinaten: 175 --------------Um ein Array sinnvoll bei einer Fehlerkontrolle auszulesen, empfiehlt es sich, jeweils auf dessen Elemente einzeln zuzugreifen, was wir mit Hilfe einer for-Schleife tun. Dabei erkennen wir zugleich einen potentiellen Fehler: Die Elemente des Arrays werden jeweils als einzelner Wert angegeben, für eine spätere Verwendung aber sollten sie als Wertepaar (x- und yPosition) vorliegen. Der Fehler besteht im Aufruf der push()-Methode, der wir die benötigten Werte nicht als Array, sondern als simple Aufzählung übergeben. 7. Korrigieren Sie in der Deklaration von speichern() den Aufruf von push() (Fettdruck): aMausPos.push([_xmouse, _ymouse]);

Jetzt werden die Werte korrekt gespeichert und im Nachrichtenfenster in der benötigten Form angezeigt: Mauskoordinaten: 146,175 --------------Mauskoordinaten: 145,175 Mauskoordinaten: 146,175 --------------Mauskoordinaten: 144,175 Mauskoordinaten: 145,175 Mauskoordinaten: 146,175 --------------Wollten wir mit Hilfe dieser Werte beispielsweise den zurück gelegten Weg visualisieren, könnten wir nun

23.3  Das Nachrichtenfenster

sukzessive auf jedes aus zwei Werten bestehende Element zugreifen und sie durch Linien verbinden. Wir haben in einem vorhergehenden Kapitel festgestellt, dass Programmierung oft bedeutet, Eigenschaften auszulesen oder sie zu verändern. Insofern ist es wichtig, auch diese Eigenschaften für den Fall der Fälle kontrollieren zu können. In unserem Beispiel handelt es sich um einen Kreis, der bei Mausklick sanft ausblendet und sich meldet, sobald er fertig ist. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie auf objects ein dynamisches Textfeld ein (beliebige Größe und Position, Instanzname toInfo). 3. Zeichnen Sie auf objects einen Kreis (beliebige Farbe für Füllung und Umrandung, beliebige Größe, beliebige Position auf der Bühne). 4. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcKreis, Instanzname kreis). 5. Weisen Sie actions folgendes Bildskript zu:  //------------ vars –---------------  var nAlpha:Number = 5;

 //---------- functions –------------  function init() {

 toInfo.text = „Keine Aktion“;  kreis.onPress = ausblenden;  }

 function ausblenden() {

 toInfo.text = „Ausblenden“;

 this.onEnterFrame = function() {  this._alpha –= nAlpha;  if(this._alpha == 0){

 toInfo.text = „Fertig“;

 delete this.onEnterFrame; } };  }

 //-------------- start –------------  init();

Das Textfeld zeigt zwar beim Testen den Start des Ausblendens an und der Kreis verschwindet auch tatsächlich, doch erfolgt keine Meldung über den Abschluss des Prozesses. Da die if-Bedingung für die Kontrolle des Abschlusses verantwortlich ist, muss sich irgendwo dort ein Fehler eingeschlichen haben.

311

Es bietet sich daher an, permanent den Wert von _alpha auszulesen, um zu sehen, ob die if-Bedingung jemals erfüllt werden kann. 6. Fügen Sie in der Zuweisung des onEnterFrameEreignisses unmittelbar vor der if-Bedingung ein: trace(„Alpha: „+this._alpha);

Wie Sie nun im Nachrichtenfenster erkennen können, wird der Grenzwert von 0 nie erreicht. Statt dessen tauchen ausgesprochen merkwürdig scheinende Werte auf, z. B.: Alpha: 8.59375 Alpha: 3.515625 Alpha: -1.171875 Alpha: -5.859375 Die Erklärung dazu finden Sie im Kapitel über Movieclips. Für uns interessant ist nur der Zugriff auf die modifizierte Eigenschaft, die uns zeigt, dass wir für ein korrektes Funktionieren des Skripts die if-Bedingung ändern müssen. 7. Ändern Sie die if-Bedingung (Fettdruck): if(this._alpha <= 0){

Alternativ können Sie auch schreiben: if(this._alpha < 0){

Nun funktioniert der Code wie gewünscht und Flash zeigt das Ende der Animation an. Als vierte sinnvolle Einsatzmöglichkeit für die trace()-Anweisung wurde ein Problem angesprochen, das uns bereits im Zusammenhang mit dem Kompilieren beschäftigte, nämlich die Kontrolle, ob ein angesprochenes Objekt überhaupt existiert. Wir verwenden dazu prinzipiell das gleiche Beispiel wie oben. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfungsbezeichner mcKreis). 3. Zeichnen Sie in mcKreis einen Kreis (beliebige Farbe für Füllung und Umrandung, beliebige Größe, beliebige Position auf der Bühne). 4. Kehren Sie zur Hauptzeitleiste zurück. 5. Weisen Sie actions folgendes Bildskript zu:  var mKreis:MovieClip;

m Kreis = this.attachMovie(„mcKreis1“, „kreis“,this.getNextHighestDepth());

312

Kapitel 23  Debugging

Achten Sie darauf, einen nicht existierenden Verknüpfungsbezeichner zu verwenden (was ist das für ein Lehrbuch, in dem man explizit dazu ermuntert wird, Fehler zu machen?). Aller Mühe zum Trotz taucht der gewünschte Kreis nicht auf der Bühne auf. In solchen Fällen besteht die naheliegende Kontrolle darin, nachzuschauen, ob das angesprochene Objekt, referenziert in mKreis, überhaupt existiert.

Wie aussagekräftig ist eine derartige Meldung? Wenn Sie Dutzende an Variablen verwenden und mehrere trace()-Anweisungen einsetzen, ist dann eindeutig, was da gerade ausgegeben wird? Daher sollte durch eine sinnvolle Konkatenation dafür gesorgt werden, dass die angezeigte Nachricht eindeutig zugeordnet werden kann, z. B.:

6. Schreiben Sie nach der attachMovie()-Methode:

this.onMouseDown = function(){

trace(„mKreis: ”+ mKreis);

Im Nachrichtenfenster erhalten Sie eine enttäuschende Mitteilung: mKreis: undefined Damit ist klar, dass keine Referenz angelegt werden konnte. Das ist nur möglich, wenn der verwendete Verknüpfungsbezeichner auf kein existierendes Objekt in der Bibliothek verweist, sei es, weil der Name falsch geschrieben wurde, sei es, weil keinem Objekt ein derartiger Verknüpfungsbezeichner zugewiesen wurde. 7. Korrigieren Sie in der attachMovie()-Methode den Verknüpfungsbezeichner (Fettdruck): mKreis = this.attachMovie(„mcKreis“,„ kreis“,this.getNextHighestDepth());

Als Ergebnis meldet das Nachrichtenfenster erfreut: mKreis: _level0.kreis Wir erhalten einen kompletten Pfad, ausgehend von der Hauptzeitleiste _root (bzw. _level0), was bedeutet, dass ein von uns angesprochenes Objekt tatsächlich vorhanden ist. Unabhängig davon, welche Art von Fehler Sie aufspüren wollen, achten Sie beim Einsatz von trace() unbedingt darauf, die Ausgabe mit einem aussagekräftigen String zu verknüpfen. Möglich ist zwar beispielsweise:

var nTempoX:Number = 20; var nTempoY:Number = 12;

t race(„beliebiger Mausklick, nTempoX: “ + nTempoX  + „, nTempoY : “ + nTempoY); }

Nun lautet die Ausgabe: beliebiger Mausklick, nTempoX: 20, nTempoY: 12 Sollten Sie gewissermaßen auf einen Rutsch alle zum aktuellen Zeitpunkt vorhandenen Variablen auflisten wollen, können Sie dies anstelle vereinzelter trace()Anweisungen erreichen mit <Strg>, wodurch Sie im Nachrichtenfenster eine unter Umständen extrem lange Liste erhalten, wie beispielhaft in Abbildung 84 zu sehen. Um alle Informationen des Nachrichtenfensters etwa im Rahmen einer komplexeren Fehlersuche dauerhaft zur Verfügung zu haben, können Sie dessen Inhalt abspeichern. Dazu müssen Sie im geöffneten Nachrichtenfenster die Option aufrufen (Abbildung 85). Sie erhalten eine txt- bzw. log-Datei, bei denen es sich jeweils um eine reine Text-Datei handelt, die mit jedem beliebigen Texteditor geöffnet werden kann. Da das Nachrichtenfenster in einer unabhängig vom Autorensystem direkt im Player aufgerufenen swfDatei nicht zur Verfügung steht, kann man entweder einen Flash-Player verwenden, der Debugging zulässt oder einfach ein Textfeld einfügen, das die Funktion des Nachrichtenfensters übernimmt.

var nTempoX:Number = 20; var nTempoY:Number = 12;

this.onMouseDown = function(){

23.4 Der integrierte Debugger

}

Zwar gestaltet sich der Einsatz von trace() ausgesprochen simpel, doch bietet einem diese Methode zugegebenermaßen keine üppige Auswahl an Kontrollmöglichkeiten. Daher gibt Flash in Form eines

 trace(nTempoX + „, “ + nTempoY);

Wenn Sie klicken, erhalten Sie im Nachrichtenfenster: 20, 12

23.4  Der integrierte Debugger

313

Abbildung 84:  Auflistung aller Variablen zur Laufzeit

Abbildung 85:  Abspeichern des Inhalts des Nachrichtenfenster

Debuggers ein komplexeres Werkzeug an die Hand, mit dem man erheblich gezielter auf Fehlersuche gehen kann. Zugriff auf den Debugger erhalten Sie unter . Um eine konkrete Anwendung während der Laufzeit zu debuggen, müssen Sie im entsprechenden Modus starten. Das geschieht in der Autorenumgebung durch oder in älteren FlashVersionen unter <Steuerung>. Dann lädt Flash Ihre aktuelle Datei im Flash-Player und öffnet gleichzeitig das zuvor erwähnte Debugger-Fenster. Um den konkreten Ablauf besser verstehen zu können, betrachten wir ein einfaches Beispiel.

1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle ein beliebiges Objekt, z. B. eine Kugel (50 × 50). 3. Wandeln Sie das Objekt in einen MovieClip um (Bibliotheksname beliebig, Instanzname kugel). 4. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var nVelX:Number = 0;

 var nStartX:Number = kugel._width/2;  var nStartY:Number = Stage.height/2;

 //----------- functions –-----------  function bewegen(){

314

 nVelX++;

 this._x += nVelX;  }

 function starten(){

 this.onEnterFrame = bewegen;  }

 function init(){

 kugel._x = nStartX;  kugel._y = nStartY;

Kapitel 23  Debugging

Sie haben nun gleichzeitig Zugriff auf alle Werte, die von Bedeutung für den gestarteten, aber durch den Debugger angehaltenen Flashfilm relevant sind. In der linken Fensterhälfte werden alle vorhandenen Objekte angezeigt, zu denen als Minimum gehören:

• alle als _global angelegte Elemente; • die Hauptzeitleiste _level0; • die MovieClip-Instanz kugel mit dessen vollständigem absoluten Pfad.

 kugel.onPress = starten;

Ist eines der Objekte markiert, lassen sich im darunter liegenden Fenster unter vier verschiedenen Karteireiten einsehen:

 //------------ start –---------------

• Eigenschaften,

 }

 init();

Wenn Sie starten und auf die Kugel klicken, wird diese sich nach rechts bewegen, wobei ihre Geschwindigkeit immer mehr zunimmt. 5. Starten Sie die Datei nun im Debugger, indem Sie in Flash auswählen . Damit öffnet sich das in Abbildung  86 dargestellte Fenster.

Abbildung 86:  Debugger-Fenster

bei einem MovieClip also beispielsweise _x mit dem zugehörigen Wert 25 (bzw. dem in Ihrem Film gültigen Wert). Diese Werte können im Debugger auch gesetzt werden, um verschiedene Szenarien schnell durchspielen zu können. Eine Änderung an der Quelldatei erfolgt dabei nicht; • Variablen, bei _level0 beispielsweise nVelX mit dem zugehörigen Startwert von 0; • lokale Variablen;

23.4  Der integrierte Debugger

• zum Überwachen angegebene Elemente mit Namen und zugehörigem, aktuellen Wert.

Lassen Sie sich nicht stören, falls der Flash-Film nicht unbedingt die erwartete Position des Kreises am linken Bühnenrand anzeigt. Der Debugger startet sinnvollerweise, bevor irgendein Skript zur Ausführung kommt, so dass die von uns in init() festgelegte Positionierung zunächst ohne Auswirkung bleibt. Das ist auch sinnvoll, denn zuerst muss uns ja die Möglichkeit gegeben werden, eventuell zu überwachende Elemente auszuwählen, bevor der Film abläuft. 6. Klicken Sie in der rechten Hälfte des DebuggerFensters am oberen Rand auf die grüne Pfeilspitze. Damit starten Sie im konkreten Fall den Film soweit, dass alle nicht vom User abhängigen Skripte ausgeführt werden, also die Initialisierung von Variablen im betreffenden Block sowie die init()-Funktion. Sie können das daran erkennen, dass sich nun die Kugel auf die gewünschte Startposition begibt. 7. Klicken Sie Debugger-Fenster auf die Bezeichnung _level0. 8. Wählen Sie den Karteireiter Variablen aus. Flash zeigt alle Variablen an, die _root zugeordnet sind. Dazu gehören z. B. nVelX, nStartX und nStartY, aber auch die Funktionen init(), starten() und bewegen(). Beachten Sie, das Flash _ root intern als _level0 bezeichnet. 9. Klicken Sie mit der rechten Maustaste auf nVelX und wählen <Überwachen> aus. Vor dem Namen der Variablen taucht ein Symbol auf, um zu zeigen, welche Elemente während des Ablaufs überwacht, also mit ihrem Wert angezeigt werden sollen. Um die Überwachung rückgängig zu machen, reicht es aus, noch einmal mit der rechten Maustaste auf das betreffende Element zu klicken und das Häkchen vor der dann angezeigten Überwachungsoption weg zu klicken. 10. Schieben Sie das Debugger-Fenster soweit zur Seite, das es den Flash-Film nicht mehr überlappt. Andernfalls wird der Flash-Film beim Starten im Debugger-Modus in den Vordergrund gebracht, was natürlich den Debugger verdeckt. 11. Klicken Sie auf die Kugel und beobachten im Debugger-Fenster die Variable nVelX.

315

Flash zeigt nun jeweils den aktuellen Wert dieser Variablen an, während sich gleichzeitig die Kugel über den Screen bewegt. Sie können auf diese Weise recht bequem sowohl den Ablauf Ihrer Anwendung wie auch die von Ihnen ausgewählten Werte verfolgen. 12. Erweitern Sie die Funktion bewegen() nach der Addition von nVelX:  if(this._x == 400){

 delete this.onEnterFrame;  }

Wir möchten nun, dass die Kugel mit der Bewegung aufhört, sobald sie den Grenzwert von 400 erreicht hat. Das bleibt allerdings frommes Wunschdenken, denn tatsächlich wird sie diese Zahl nur in Ausnahmefällen erreichen. Das können Sie ruhig mal testen. Um herauszufinden, was geschieht, lassen wir uns am Besten während der gesamten Bewegung die horizontale Position der Kugel im Debugger ausgeben: 13. Starten Sie über die Anwendung. 14. Im Debugger-Fenster wählen Sie unter den links oben aufgelisteten Objekten _level0.kugel. 15. Im Karteireiter Eigenschaften aktivieren Sie die Option _x. 16. Starten Sie die Applikation durch Klick auf den grünen Pfeil. 17. Starten Sie die Animation durch Klick auf kugel. Sie werden i. d. R. Fließkommawerte erhalten und der in der if-Bedingung abgefragte Wert von 400 wird sehr wahrscheinlich nicht vorkommen. Warum tauchen diese merkwürdigen Zahlen auf? 18. Starten Sie erneut über die Anwendung. 19. Klicken Sie auf den grünen Pfeil, um die init()Funktion innerhalb des Codes auszuführen. 20. Wählen Sie unter den links oben aufgelisteten Objekten _level0. 21. Im Karteireiter Variablen klicken Sie mit der rechten Maustaste auf nVelX und wählen die Option <Überwachen>. Links neben der aktivierten Variable zeigt der Debugger durch einen farbigen Kreis an, dass der Wert dieser Variablen permanent auszugeben ist.

316

22. Starten Sie die Animation durch Klick auf kugel und beobachten Sie die zu überwachende Variable. Sie werden feststellen, dass wir aufsteigende Fließkommawerte erhalten. Diese sind verantwortlich dafür, dass i. d. R. die gewünschte Endeposition von exakt 400 nicht erreicht werden kann. Denn durch die Fließkommawerte in nVelX wird kugel ebenfalls auf derartige Fließkommawerte positioniert. Um dieses Problem zu umgehen, sollte man generell abfragen, ob ein gewünschter Wert erreicht oder überschritten wurde (Vergleichsoperator >= anstatt ==). Der Debugger hat also in diesem sehr simplen Beispiel geholfen, durch Beobachtung der kritischen Werte einem logischen Problem auf die Sprünge zu kommen. Natürlich wird Ihr Code im Fall der Fälle komplexer ausfallen, aber die Vorgehensweise ist dieselbe: Sie versuchen immer, diejenigen Werte, die verantwortlich für das unbotmäßige Verhalten Ihrer Anwendung sein könnten, zu überprüfen. Ist nicht direkt klar, um welche Werte es sich handelt, lässt man sich sukzessive verschiedene Variablen bzw. Eigenschaften ausgeben. Über die Kontrolle von Werten hinaus lässt es der Debugger auch zu, den Ablauf eines Skriptes gezielt zu verfolgen. Dazu können an beliebiger Stelle Haltepunkte (break points) gesetzt werden, um dann Stück für Stück weiter zu gehen. 23. Kehren Sie zum Scriptfenster zurück. 24. Klicken Sie dort mit der linken Maustaste links neben die Zahl 7, die eine Zeilennummer angibt. Auf diese Weise wird ein Haltepunkt gesetzt, der im Debugger den Ablauf der Applikation anhält. 25. Starten Sie wieder den Debugger und die Applikation mit Hilfe des grünen Pfeils. 26. Klicken Sie auf die Kugel. Nun bewegt sie sich nicht mehr wie zuvor. Statt dessen öffnet sich in der rechten Hälfte des Debuggers ein neues Fenster, in dem der aktuelle Code aufgelistet wird. Ein Pfeil markiert die Stelle, an der die Applikation angehalten wurde – es handelt sich um dieselbe Zeile, in der Sie den Haltepunkt eingefügt haben. Zusätzlich zeigt links unten ein kleines Fenster den Call Stack, also das Element, das gerade ausgeführt wurde,

Kapitel 23  Debugging

als der Haltepunkt erreicht wurde. Konkret handelt es sich um das onEnterFrame-Ereignis, innerhalb dessen wir die Funktion bewegen() permanent aufrufen lassen. Nun können Sie sukzessive den gesamten Ablauf quasi mit einer Zeitlupe verfolgen. 27. Wählen Sie unter den links oben aufgelisteten Objekten _level0. 28. Lassen Sie die Variable nVelX überwachen wie oben gezeigt. 29. Klicken Sie in der Symbolleiste oberhalb des angehaltenen Skriptes auf das Symbol , also den nach rechts weisenden Pfeil. Flash führt nun die angehaltene Codezeile aus und stoppt in der nächsten. Gleichzeitig können Sie sehen, wie nVelX von 0 auf 0.1 erhöht wird. 30. Klicken Sie erneut auf . Wieder geht Flash eine Zeile weiter. Bei jedem Klick wird die aktuelle Zeile ausgeführt und die nächste sich aus der Programmlogik ergebende Zeile markiert. Sind Sie am Ende von bewegen() angelangt, springt Flash wieder auf dessen erste Anweisung und der gesamte Prozess wiederholt sich. Nun steht Ihnen nicht nur der jeweils geänderte Wert von nVelX zur Verfügung, sondern Sie können darüber hinaus auch den konkreten Programmablauf verfolgen. So sehen Sie, was im Einzelnen geschieht und ob beispielsweise eine Funktion, die Sie benötigen, überhaupt nicht oder zum falschen Zeitpunkt aufgerufen wird. Auch unabhängig von einer konkreten Fehlersuche können die trace()-Anweisung und vor allem der Debugger von großem Nutzen sein, insbesondere, wenn Sie noch über eher weniger Erfahrung im Bereich der Programmierung verfügen. Denn beide ermöglichen es uns, erheblich genauer die Ausführung eines Skripts nachzuvollziehen. Wir können beide Tools einsetzen, um zu verstehen wie ein Skript aufgebaut ist und was wann geschieht. Selbst jemand mit ausreichend Erfahrung wird in dem einen oder anderen Fall noch auf sie zurück greifen, etwa, wenn es gilt, nicht oder nur schlecht dokumentierten und wüst durcheinander gewürfelten (Fremd-) Code zu verdauen. Nun sind Sie soweit gewappnet, dass wir uns an konkrete Projekte machen können, um das Gelernte umzusetzen.

Geskriptete Animationen

Bereits mehrfach haben wir im vorhergehenden Kapitel bei der Behandlung von MovieClips auf die Möglichkeit verwiesen, welche Flash für das Skripten von Animationen bietet. Ein solcher Verweis mag sonderbar klingen bei einem Programm, das seine Stärke doch eigentlich nicht zuletzt aus den einfach zu handhabenden, aber mächtigen Animationstechniken von MovieClip und Zeitleiste zieht. In relativ kurzer Zeit entstehen mittels zahlreicher Effekte (z. B. Tweens, Ebeneneffekte, Filter) hochkomplexe und (hoffentlich) ästhetische Animationen. Dennoch bietet gerade das Skripting ein Potential für Animationen, das je nach Aufgabenstellung weit über das hinausgeht, was ohne Programmierung möglich ist. Der wichtigste Vorteil besteht zweifelsohne in der Möglichkeit, dem Anwender Interaktionen zu gestatten. Er kann Einfluss auf den Ablauf der Animation nehmen, sie etwa starten und stoppen oder das Tempo verändern etc. Ein weiterer Vorteil besteht in der einfacheren Wiederverwendung: Grafikunabhängiger Code lässt sich erheblich bequemer in verschiedenen Anwendungen einsetzen als wenn man mühsam Zeitleistenanimationen per copy-and-paste oder als fertige swf-Datei in andere Flashfilme integrieren muss. Und last not least können wir per AS Animationen realisieren, die händisch nicht möglich sind. So gibt es, um nur ein Beispiel zu nennen, Filter, die ausschließlich geskriptet werden können. Um Missverständnissen vorzubeugen: Das heißt natürlich nicht, dass man ab sofort und für alle Ewigkeit Animationen nur noch programmieren sollte. Eine derartige Einstellung wäre absurd, würde man doch damit die eben optimal auf Animationen abgestimmten Werkzeuge des Autorensystems zu Unrecht ignorieren. Vielmehr kommt es darauf an, sich genau zu überlegen, was man erreichen möchte. In manchen

24

Fällen wird es einfacher sein, mit den Zeichenwerkzeugen und der Zeitleiste eine Animation zu erstellen, während andere Fälle nur eine geskriptete Lösung erlauben. Wir befassen uns hier naturgemäß mit der letztgenannten Kategorie.

24.1 Animationskategorien Prinzipiell stellt eine Animation eine Eigenschaftsänderung im zeitlichen Verlauf dar. Zwei Dinge spielen also eine Rolle:

• Objekteigenschaften.

Notwendigerweise handelt es sich um Eigenschaften, die wir optisch und/oder akustisch wahrnehmen können. Das ideale Objekt stellt in dieser Hinsicht der MovieClip dar, der über zahlreiche visuelle Eigenschaften verfügt, die sich manipulieren lassen. Daher verwundert es auch nicht, dass er der absolute Favorit bei Flash-Animationen ist. Ebenfalls häufig verwendet wird Text. • Mindestens zwei verschiedene Zeitpunkte, die Anfang und Ende der Animation markieren. Zu diesen Zeitpunkten ändert sich mindestens eine Eigenschaft eines Objekts, so dass eine Animation vorliegt. Wir wollen uns im folgenden auf visuell wahrnehmbare Animationen beschränken und behandeln einige prinzipielle Vorgehensweisen, während Sound außen vor bleibt. Zahlreiche konkrete Umsetzungen finden Sie in den weiteren Workshops. Trotz der vielen Varianten und Versionen, in denen Animationen anzutreffen sind, lassen sie sich, bezogen auf die zeitliche Dauer und die Anzahl der verschiedenen Animationszustände (bzw. der verschiede-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

317

318

Kapitel 24  Geskriptete Animationen

nen Werte, welche die zu verändernden Eigenschaften annehmen können), in Kategorien unterteilen:

Denkbar wäre etwa, ein Objekt genau 12 Sekunden drehen zu lassen.

• Eine Animation tritt einmalig auf. Zum Beispiel

Schließlich spielt noch eine Rolle, wie autonom der Ablauf erfolgt:

wird ein zunächst nicht sichtbares Objekt übergangslos eingeblendet. Dabei unterscheidet man zwei Zustände: Nicht sichtbar  – sichtbar. Der zeitliche Verlauf der Animation ist ausgesprochen kurz. Die betroffenen Eigenschaften kennen nur zwei Zustände: Startwert und Endewert. • Eine Animation findet eine genau definierte Zeit lang statt und endet dann. Beispielsweise wird ein Objekt über eine gewisse Strecke animiert und stoppt, sobald es seinen Zielpunkt erreicht hat. Der zeitliche Verlauf variiert zwar im Gegensatz zur erstgenannten Variante. Es existiert jedoch prinzipiell ein genau definiertes zeitliches Ende der Animation. Diese Form der Animation kennt eine prinzipiell begrenzte, genau definierte Anzahl an Zuständen. • Eine Animation läuft permanent ab. Denkbar wäre etwa ein Objekt, das sich im Hintergrund unserer Anwendung permanent hin- und herbewegt. Programmiertechnisch existiert keine zeitliche Begrenzung; sie wird allenfalls vorgegeben durch die Dauer, die der Anwender mit unserer Applikation verbringt. Die Anzahl der verschiedenen Animationszustände dagegen kann begrenzt sein wie im genannten Beispiel des sich bewegenden Objekts, oder sie kann unbegrenzt sein wie etwa bei vielen animierten Bildschirmschonern. Der Ablauf einer Animation gehorcht in jedem Fall bestimmten Regeln. Das gilt sogar für rein zufällige Animationen, bei denen eben der Zufall selbst die besagte Regel darstellt. Auch derartige Regeln lassen sich kategorisieren:

• Anzahl der Schritte. Wir können festlegen, wie oft

eine Eigenschaftsänderung erfolgen soll. Beispielsweise möchten wir zehnmal den Alphawert eines Objekts ändern, um von 100 % zu 0 % zu gelangen. • Schrittweite. Alternativ ist es möglich, die Größe der Eigenschaftsänderung zwischen zwei Animationsschritten vorzugeben. So könnten wir ein Objekt jedes Mal um 25 Pixel nach rechts verschieben oder die Schrittweite dynamisch nach einer bestimmten Regel ermitteln, so dass beispielsweise jeder Schritt genau der Hälfte des vorhergehenden entspricht, was optisch einen Bremseffekt ergibt. • Zeitliche Dauer. Hier definieren wir den zeitlichen Abstand zwischen Animationsbeginn und  –ende.

• Nicht-interaktiv. Der Anwender kann in keiner Weise

in die Animation eingreifen. Sie läuft automatisch ab und wird ausschließlich vom System kontrolliert. • Interaktiv. Alternativ kann der Anwender mit der Animation interagieren, wobei verschiedene Grade möglich sind, die sich auf Start, Ende sowie diverse Parameter der Animation (z. B. Tempo, Dauer, Form) beziehen. Die genannten Kategorien existieren nicht vollständig unabhängig voneinander, sondern beeinflussen sich gegenseitig. Denn jede Festlegung der Schrittanzahl oder Schrittweite bestimmt beispielsweise automatisch die Gesamtdauer. Nur legen wir dabei die Dauer nicht in Sekunden fest, ja wir kennen noch nicht einmal den exakten Wert der Gesamtdauer, es sei denn, wir würden ihn explizit beispielsweise aus den Einzelschritten errechnen. Was so hübsch abstrakt und akademisch klingen mag, hat unmittelbare praktische Auswirkungen, denn ein konkretes Skript muss die Kategorie berücksichtigen, der unsere erwünschte Animation zugehört. Wenn wir z. B. nur zwei exakt beschriebene Zustände haben, lösen wir die Animation durch ein anderes Ereignis aus, als wenn wir eine permanente Animation definieren wollen. Wenn die Animation in zehn Schritten ablaufen soll, benötigen wir eine entsprechende Zählvariable. Soll sie dagegen genau eine Minute dauern, müssen wir die Uhrzeit kontrollieren.

24.2 Einmalige Animation In der einfachsten Form liegt eine Eigenschaftsänderung zwischen zwei Zeitpunkten vor, die Animation tritt also einmalig auf. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects in der Bühnenmitte ein Rechteck beliebiger Farbe (60 × 60). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:  recht.onPress = function(){

24.3  Animation mit onEnterFrame und fester Schrittweite

 this._visible = false;  }

Wenn Sie beim Testen auf das Objekt klicken, wird es erwartungsgemäß unsichtbar. Gratulation, damit haben Sie Ihre erste Animation geskriptet, ein Ereignis, dem Sie einige Zeilen in Ihrem Tagebuch widmen dürfen. Zugegeben, das ist nicht ganz zutreffend, denn Sie haben diese einfache Form der Animation bereits im Kapitel über Movie­ Clips kennen gelernt. Sie greifen per Mausklick auf die Eigenschaft _visible zu und weisen ihr den Wert false zu, so dass das betreffende Objekt nicht mehr angezeigt wird. Selbstverständlich kann sich eine einmalige Animation auf beliebige Eigenschaften beziehen, die weniger drastische Veränderungen hervorrufen als die Sichtbarkeit. So können Sie beispielsweise die Position, Drehung oder Größe einmalig ändern. Das Prinzip ist das Gleiche wie in unserem Beispiel mit der Sichtbarkeit.

24.3 Animation mit onEnterFrame und fester Schrittweite In der Regel verknüpfen wir mit dem Begriff der Animation länger andauernde Phasen, also wiederholte oder permanente Animationen. Um sie realisieren zu können benötigen wir ein anderes Ereignis, das dieses zeitliche Moment besser abbildet. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects in der Bühnenmitte ein Rechteck beliebiger Farbe (60 × 60). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:

319

Flash führt das onEnterFrame-Ereignis dauernd aus und erhöht jedes Mal die Rotation von recht um 10 Grad, dem Wert der Variablen nRotat, mit der wir die Schrittweite definiert haben. Bei Start beträgt die Rotation 0 Grad. Im ersten onEnterFrame erhöhen wir diesen Wert um 10, was in der Summe 10 ergibt. Im nächsten onEnterFrame wird 10 hinzu addiert, woraus sich eine Drehung um 20 Grad ergibt usw. Da wir das onEnterFrame-Ereignis an keiner Stelle unterbrechen oder abbrechen, dreht sich das Objekt ohne Unterlass im Uhrzeigersinn. Falls Sie eine Drehung gegen den Uhrzeigersinn erreichen wollen, müssen Sie lediglich das Vorzeichen von nRotat ändern: var nRotat:Number = -10;

Alternativ führen Sie im onEnterFrame eine Subtraktion durch (in dem Fall enthält nRotat einen positiven Wert): this._rotation –= nRotat;

Den Ablauf der Animation visualisiert Abbildung 87. Selbstverständlich lassen sich andere Eigenschaften ebenso einfach animieren. Am häufigsten verwendet man die Position. 6. Erweitern Sie den Variablen-Block: var nTempoX:Number = 12;

7. Erweitern Sie das onEnterFrame-Ereignis nach der öffnenden Klammer: this._x += nTempoX;

Nun rollt sich Ihr Rechteck nach rechts aus der Bühne hinaus.

 //-------------- vars –-------------  var nRotat:Number = 10;

5. Fügen Sie einen Funktions-Block ein:  //------------- functions –---------  recht.onEnterFrame = function(){  this._rotation += nRotat;  }

Wenn Sie den Film starten, wird sich das Rechteck permanent um seine eigene Achse drehen.

Abbildung  87:  Animation durch permanente Änderung der Drehung

320

Kapitel 24  Geskriptete Animationen

 if(this._y >= Stage.height){  this._y = 0;  }

Abbildung 88:  Horizontale und vertikale Bewegung

Zusätzlich zur Drehung ändern wir permanent die horizontale Position, indem wir jeweils den Inhalt von nTempoX hinzu addieren. Damit verschiebt sich das Rechteck bei jedem onEnterFrame um 12 Pixel nach rechts. Eine Bewegung nach links können Sie auf die gleiche Weise wie oben per Vorzeichenumkehr bzw. Subtraktion erreichen. 8. Erweitern Sie die Variablendeklaration: var nTempoY:Number = 4;

9. Erweitern Sie das onEnterFrame-Ereignis: this._y += nTempoY;

Zusätzlich zur horizontalen erhält das Rechteck eine kleinere vertikale Bewegung, so dass es sich in der Summe nach rechts unten bewegt. Nach kurzer Zeit verschwindet es am rechten Rand, da die Animation, auch wenn wir es nicht mehr wahrnehmen können, endlos andauert. Das ist kein Grund zur Traurigkeit, besteht doch die Möglichkeit, das Rechteck höflich, aber bestimmt aufzufordern, wieder zurückzukehren. 10. Erweitern Sie das onEnterFrame-Ereignis unmittelbar vor der schließenden Klammer:  if(this._x >= Stage.width){  this._x = 0;  }

Bei Erreichen des rechten Randes wird das Rechteck am linken Rand wieder eingefügt. Mit der if-Bedingung kontrollieren wir permanent die horizontale Position. Wenn sie einen bestimmten Wert – hier: rechter Bühnenrand – übersteigt, weisen wir recht eine neue x-Position zu. Da jedoch auch eine vertikale Bewegung stattfindet, reicht das nicht aus, um unser Objekt auf der Bühne zu behalten. Denn nach zwei Durchläufen hat sich unser Rechteck endgültig aus dem digitalen Staub gemacht. 11. Fügen Sie nach Ende der if-Bedingung und vor Ende des onEnterFrame-Ereignisses eine weitere if-Bedingung ein:

Zusätzlich zur x-Position kontrollieren wir permanent die y-Position. Sobald horizontal oder vertikal der angegebene Grenzwert überschritten wird, setzen wir das Rechteck in der betreffenden Eigenschaft auf den Koordinatenursprung, also 0. Jetzt läuft unsere Animation permanent ab, ohne dass das Rechteck aus dem Blickfeld verschwinden kann. In diesem Beispiel ändert sich die Animation ständig, da das Erreichen der Ränder nicht synchron erfolgt. Mal trifft die Bedingung zu, die sich auf die x-Position bezieht, ein anderes mal diejenige für die y-Position. Soll immer exakt dieselbe Animation erfolgen, müssen wir den von der Bedingung abhängigen Code ändern und die Startposition speichern. 12. Erweitern Sie den Variablen-Block um:  var nPosX:Number = recht._x;  var nPosY:Number = recht._y;

Das Rechteck startet an einer ganz bestimmten Position, die wir beim Erstellen der Anwendung festgelegt haben. Um später wieder darauf zurückgreifen zu können, speichern wir diese Position in zwei Variablen. 13. Ändern Sie die if-Bedingung für die horizontale Position wie folgt (Fettdruck):  if(this._x >= Stage.width){ this._x = nPosX; this._y = nPosY;  }

Wenn Sie testen, wird das Rechteck immer dieselbe Animation abspielen: Bewegung nach rechts unten bis zum Erreichen des rechten Bühnenrandes, dann Neustart auf der ursprünglichen Position. Da wir anfangs die Startposition gespeichert haben, müssen wir diese zuweisen, sobald die if-Bedingung zutrifft. In unserem Fall funktioniert der Code problemlos, da die vertikale Geschwindigkeit erheblich niedriger ist als die horizontale. Daher erreicht das Rechteck den rechten vor dem unteren Rand. 14. Ändern Sie die Initialisierung von nTempoY (Fettdruck):

var nTempoY:Number = 14;

Nun bewegt sich das Rechteck schneller nach unten

24.3  Animation mit onEnterFrame und fester Schrittweite

als nach rechts. Da zuerst die Bedingung hinsichtlich der y-Position zutrifft, wird das Rechteck auf fehlerhafte Werte zurück gesetzt. 15. Korrigieren Sie die Abfrage der y-Position (Fettdruck):  if(this._y >= Stage.height){ this._x = nPosX; this._y = nPosY;  }

Jetzt spielt es keine Rolle mehr, ob das animierte Objekt zuerst den rechten oder den unteren Rand erreicht. In beiden Fällen erfolgt das Zurücksetzen auf die ursprüngliche Position, so dass die Animation wieder von vorne ablaufen kann. Da wir unabhängig davon, welche Bedingung zutrifft, immer die gleichen Anweisungen ausführen, nämlich Zuweisung einer x- und y-Position, lassen sich die Abfragen vereinfachen. 16. Ersetzen Sie beide if-Bedingungen durch:  if(this._x >= Stage.width || this._y >= Stage.height){  this._x = nPosX;  this._y = nPosY;  }

Beim Testen ergibt sich visuell kein Unterschied. Der Code vereinfacht sich jedoch, indem wir unsere Bedingungen mit einem logischen Oder verknüpfen. In beredter Prosa formuliert lautet unsere Bedingung: Wenn die x-Position des Rechtecks größer oder gleich der Bühnenbreite ODER die y-Position des Rechtecks größer oder gleich der Bühnenhöhe ist, dann setze dessen x- und y-Position auf die in den angegebenen Variablen gespeicherten Werte. Damit haben wir zwar die Bewegung nach rechts unten definiert, doch was geschieht, wenn eine oder beide Tempovariablen einen negativen Wert enthalten? 17. Ändern Sie die Initialisierung von nTempoX und nTempoY (Fettdruck):

321

nach links oben  – und verschwindet über den Rand hinaus. Denn die von uns definierten Bedingungen können nie zutreffen, da sie sich ausschließlich auf den rechten und unteren Rand beziehen. 18. Erweitern Sie die if-Bedingung (Fettdruck):  if(this._x >= Stage.width || this._y >= Stage.height || this._x <= 0 || this._y <= 0){

Unsere Bedingung fängt jede Bewegungsrichtung ab, so dass es keine Rolle spielt, wo das Rechteck den Rand erreicht. In jedem Fall wird es zurück auf seine Startposition gesetzt. Ohne es explizit anzusprechen, haben wir bei obigem Beispiel eine Reihe von grundlegenden Fragen beantwortet, die jede Animation charakterisieren:

• Wie lauten die Ausgangsbedingungen der Anima-

tion in Bezug auf die Eigenschaften, die geändert werden sollen? • Wie gelangen wir von einem Zeitpunkt der Animation zum nächsten? • Wie und/oder wann endet die Animation bzw. wie lauten die Endwerte der Eigenschaften, die wir ändern wollen? • Was geschieht mit den Objekten nach Ende der Animation? An einem zweiten Beispiel wollen wir uns, diesmal unter Anleitung durch den genannten Fragekatalog, systematisch eine weitere Animation anschauen. Dabei bewegen wir einen Kreis permanent von links nach rechts und umgekehrt. Der Kreis wird zur Laufzeit aus der Bibliothek eingefügt, liegt also nicht von Anfang an auf der Bühne. Ausgangsbedingungen: Bei der zu ändernden Eigenschaft handelt es sich um die horizontale Position. Sie entspricht anfangs der horizontalen Mausposition. Der Start erfolgt nach User-Interaktion, ein weiterer Eingriff des Anwenders ist nicht möglich. Das verwendete Objekt muss aus der Bibliothek eingefügt werden.

 var nTempoX:Number = -12;  var nTempoY:Number = -14;

Änderung durch die Animation: Wir ändern die genannte Eigenschaft durch Addition einer Variablen mit dem Wert 12. Damit legen wir die Schrittweite fest.

Da wir jeweils eine negative Zahl zur horizontalen und vertikalen Position addieren, ergibt sich faktisch eine Subtraktion. Das Rechteck bewegt sich daher

Endbedingungen: Die Animation wird endlos ablaufen, endet also nicht im eigentlichen Sinne. Sie besteht jedoch aus meh-

322

reren Phasen, indem wir jeweils bei Erreichen eines Randes die Bewegung umkehren. Objekt nach Animationsende: Da es sich um eine permanente Animation handelt, bleibt das Objekt die ganze Zeit über erhalten. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mc­ Kreis. 3. Zeichnen Sie dort mittig einen Kreis (50 × 50, Farbe beliebig). 4. Weisen Sie mcKreis in der Bibliothek eine gleichnamige Verknüpfung zu. 5. Kehren Sie zur Hauptzeitleiste zurück. 6. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –---------------

 var mBeh:MovieClip = this.createEmpty MovieClip(„behaelter“, this.getNextHighestDepth());  var mKreis:MovieClip;

 var nTempoX:Number = 12;

Wir legen zunächst eine Variable fest, die eine Referenz auf einen leeren MovieClip enthält. Der leere Clip stellt den Behälter dar, in den wir nachher den Kreis einfügen wollen. Um den Kreis einfacher ansprechen zu können, richten wir die Variable mKreis ein. In einer weiteren Variablen speichern wir einen Wert, um den sich unser Kreis bewegen soll. 7. Erweitern Sie das Skript um folgende Funktionsdeklaration:  this.onMouseDown = function(){

 mKreis = mBeh.attachMovie(„mcKreis“ ,„kreis“,1);  mKreis._x = _xmouse;  mKreis._y = _ymouse;

 mKreis.onEnterFrame = function(){  this._x += nTempoX; }

 delete this.onMouseDown;  }

Bei Mausklick erscheint an der Stelle der Maus unser Kreis und bewegt sich recht zügig nach rechts, wo er sich über den Bühnenrand hinaus bewegt. Wir weisen der Hauptzeitleiste ein Mausereignis zu, das bei Klick für ein Einblenden des Kreises sorgt. Dabei speichern wir der Einfachheit halber die Refe-

Kapitel 24  Geskriptete Animationen

renz auf den eingeblendeten Kreis in der Variablen mKreis. Dessen Startposition entspricht der Mausposition zum Zeitpunkt des Klicks. Anschließend erhält der Kreis eine Bewegungsfunktion, die wie im vorherigen Beispiel dafür sorgt, dass er sich horizontal nach rechts bewegt. Da der Kreis erfolgreich eingefügt wurde und kein weiterer benötigt wird, löschen wir das onMouseDown-Ereignis. Weitere Mausklicks bleiben dann folgenlos. Zwar ist die Erde rund, so dass man vielleicht erwarten würde, dass der Kreis irgendwann auf der anderen Seite der Bühne wieder auftaucht, doch dem ist leider nicht so. Daher bleibt nichts anderes übrig, als ihm explizit mitzuteilen, er möge doch bitte am Rand seiner begrenzten Welt umkehren. In der vorhergehenden Übung haben wir gesehen, wie man ihn auf seine Ausgangsposition zurücksetzen kann. Wir möchten hier jedoch erreichen, das er seine Bewegung umkehrt und sich vom rechten zum linken Rand bewegt. 8. Erweitern Sie das onEnterFrame-Ereignis nach der Zuweisung von nTempoX:  if(this._x > Stage.width){  nTempoX *= -1;  }

Beim Testen wird der Kreis am rechten Rand seine Richtung umkehren und sich nach links über den Bühnenrand hinaus bewegen. 9. Erweitern Sie die if-Bedingung (Fettdruck):

if(this._x > Stage.width || this._x < 0){

Nun bewegt sich der Kreis permanent zwischen rechtem und linkem Rand hin und her. Die Umkehr der Bewegung erfolgt einfach über eine Umkehr des Vorzeichens der Tempovariablen. Wenn sich der Kreis nach rechts bewegt, weil die Variable einen positiven Wert enthält, führt die Vorzeichenumkehr dazu, dass der Wert negativ wird. Die Addition eines negativen Wertes entspricht, wie wir bereits mehrfach gesehen haben, einer Subtraktion, der Kreis bewegt sich also nach links. Dort am Rand angekommen, kehren wir das Vorzeichen erneut um, so dass aus der negativen wieder eine positive Zahl wird. Die permanente Addition sorgt dann wieder für eine Bewegung nach rechts. Anstelle einer Multiplikation mit  –1 können wir das Vorzeichen auch folgendermaßen umkehren:

24.3  Animation mit onEnterFrame und fester Schrittweite

323

Erreichen wir den rechten Rand, setzen wir den Wert auf  –100 %, was einer horizontalen Spiegelung entspricht. Der Kreis schaut nun nach links, seiner neuen Bewegungsrichtung. Am linken Rand wiederholen wir den Vorgang, so dass aus –100 wieder der ursprüngliche Wert 100 entsteht, was zu einer erneuten Spiegelung führt. Der Kreis wird mit seiner ursprünglichen Blick- und Bewegungsrichtung dargestellt. Betrachten wir nun die betreffende Lösung für ein Ein- und Ausblenden. Abbildung 89:  Bewegung und Vorzeichenumkehr

nTempoX = -nTempoX;

Neben der Eigenschaftsänderung durch eine Addition zeigt sich hier ein weiteres wichtiges Animationsprinzip, nämlich die Vorzeichenumkehr. Sie ermöglicht es auf eine simple Art, prinzipiell jede permanente Animation, deren Start- und Endwert durch eine Addition abgebildet werden kann, zu realisieren. Dabei spielt es keine Rolle, ob es sich bei der angesprochenen Eigenschaft wie hier um die Position handelt, oder die Deckkraft, Größe und Drehung. In allen Fällen können wir mit Addition und Vorzeichenumkehr arbeiten. Im Kapitel zur MovieClip-Klasse haben wir die Eigenschaften _xscale und _yscale kennen gelernt. Wir können sie in unserem Fall verwenden, um den Eindruck zu erwecken, als drehe sich unser Kreis tatsächlich um, wenn er die Richtung wechselt. 10. Öffnen Sie mcKreis im Symbolbearbeitungsmodus. 11. Weisen Sie ihm zwei dunkle Ellipsen als Augen zu, die nach rechts zeigen. 12. Erweitern Sie die if-Bedingung (Fettdruck):  if(this._x > Stage.width || this._x < 0){  nTempoX *= -1;

this._xscale *= -1;  }

Jedes mal, wenn der Kreis einen Rand erreicht, dreht er sich um und bewegt sich in die entgegen gesetzte Richtung. Wir verwenden dasselbe Prinzip wie im Fall der Bewegung, indem wir einfach das Vorzeichen der Eigenschaft _xscale umdrehen. Ihr Wert beträgt, wenn keine Änderung vorgenommen wurde, 100 %.

1. Erstellen Sie eine Standarddatei. 2. Importieren Sie eine Grafik beliebiger Größe in die Bibliothek. 3. Erstellen Sie einen leeren MovieClip namens mcPict. 4. Fügen Sie dort auf der Position 0,0 die importierte Grafik ein. Damit wird die linke obere Ecke des MovieClips zu seinem Registrierungspunkt. 5. Weisen Sie mcPict eine gleichnamige Verknüpfung zu. 6. Kehren Sie zur Hauptzeitleiste zurück. 7. Weisen Sie actions folgendes Bildskript zu:  //-–----------- vars –---------------

 var mBeh:MovieClip = this.createEmpty MovieClip(„behaelter“, this.getNextHighestDepth());  var mPict:MovieClip;

 var nAlpha:Number = -2;

Zunächst richten wir wieder einen Behälter sowie eine Variable zur Aufnahme des Bildes ein. Anschließend legen wir das Tempo der Animation fest. Da wir im ersten Schritt subtrahieren müssen, enthält die Variable einen negativen Wert. 8. Erweitern Sie das Skript:  //--––--------- functions –---------  function init():Void {

 mPict = mBeh.attachMovie(„mcPict“, „pict“, 1);  mPict._x = mPict._y = 0;

 mBeh._x = Stage.width/2-mBeh._ width/2;

 mBeh._y = Stage.height/2-mBeh._ height/2;  }

 //--------------- aufruf –----------  init();

324

Kapitel 24  Geskriptete Animationen

Flash fügt den händisch erstellten MovieClip mit der importierten Grafik mittig auf der Bühne ein. Wir weisen in der init()-Funktion der anfangs deklarierten Variable mPict eine Referenz auf den aus der Bibliothek per attachMovie() eingefügten Clip zu. Innerhalb des Behälters positionieren wir ihn auf der Position 0,0. Wir hätten auf diese Zeile zwar verzichten können, denn Flash weist automatisch diese Position zu, aber das wäre eher unsauber. Den Behälter möchten wir gerne exakt in die Bühnenmitte setzen. Die horizontale Mitte entspricht der halben Bühnenbreite. Da der Registrierungspunkt von mBeh links oben liegt (Sie erinnern sich: Das attachMovie() wurde auf 0,0 ausgeführt), müssen wir ihn zusätzlich um seine halbe Breite nach links verschieben. Dasselbe führen wir mit der vertikalen Position durch.

keit hin- und herpendeln wollen. Größere Flexibilität besitzen wir jedoch, wenn wir die betreffenden Werte als Argumente übergeben, was wir uns am Beispiel einer permanenten Größenänderung anschauen wollen.

9. Erweitern Sie die init()-Funktion nach der Zuweisung für mBeh._y:

 this._xscale += pScaling;

1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie auf objects in der Bühnenmitte ein Rechteck (40 × 60, Farbe beliebig). 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcRecht, Instanzname recht, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:  //-------------- functions –--------  function init(pWer:MovieClip, pScaling:Number):Void {

 pWer.onEnterFrame = function() {  this._yscale = this._xscale;

 mBeh.onPress = function(){

};

 this._alpha += nAlpha;

 //------------- aufruf –-------------

 this.onEnterFrame = function(){

 }

 if(this._alpha <= 0 || this._alpha >= 100){

 init(recht, 10);

 nAlpha *= -1; } }

 delete this.onPress;  }

Bei Mausklick auf die Grafik blendet sie permanent langsam aus und wieder ein. Wir weisen dem Behälter ein Mausklick-Ereignis zu, das seinerseits ein onEnterFrame-Ereignis aufruft. Darin ändern wir den Alpha-Wert des Behälters auf die gleiche Weise, wie wir zuvor die Position des Rechtecks animiert haben. Wir addieren zunächst den in der Variablen nAlpha initialisierten Wert. Da er negativ ist, erfolgt eine Subtraktion. Anschließend fragen wir permanent den aktuellen Alpha-Wert ab. Ist er kleiner als oder gleich 0 bzw. größer als oder gleich 100, so drehen wir das Vorzeichen von nAlpha um und steuern so die Addition bzw. Subtraktion. Die Grenzwerte müssen nicht zwangsläufig im Klartext in die Bedingung geschrieben werden. Im obigen Beispiel empfiehlt es sich, da wir i. d. R. zwischen völliger Sichtbarkeit und völliger Unsichtbar-

Wenn Sie testen, springt Ihnen schon nach kürzester Zeit scheinbar ein wild gewordenes Rechteck ins Gesicht. Wir definieren unsere init()-Funktion, die zwei Parameter entgegen nimmt: Den Instanznamen des zu animierenden Objekts und die Schrittgröße bzw. Animationsgeschwindigkeit. Der übergebenen Instanz weisen wir ein onEnterFrame zu, innerhalb dessen permanent die Skalierung in x-Richtung um den angegebenen Wert erhöht wird. Um eine gleichmäßige Skalierung zu gewährleisten, setzen wir die y-Skalierung auf den Wert der x-Skalierung. Beim Aufruf der init()-Funktion übergeben wir als Argumente die Instanz recht sowie das Tempo 10. Da wir jedoch noch keinen Grenzwert definiert haben, wird die Skalierung endlos ausgeführt. 5. Fügen Sie innerhalb des onEnterFrame-Ereignisses nach der Zuweisung für _yscale folgende ifBedingung ein:  if (this._xscale>=pMaxScale || this._ xscale<=pMinScale) {  pScaling *= -1;  }

24.4  Animation mit setInterval() und fester Schrittweite

Wir vergleichen die Skalierung in x-Richtung jeweils mit einem maximalen und einem minimalen Wert. Überschreitet Flash einen der beiden Werte, kehren wir das Vorzeichen von pScaling um, was, wie wir wissen, bei einer Vergrößerung zu einer Verkleinerung und umgekehrt führt. 6. Erweitern Sie die erste Zeile der Funktionsdeklaration folgendermaßen (Fettdruck): function init(pWer:MovieClip, pMaxScale:Number, pMinScale:Number, pScaling:Number):Void {

Wenn wir auf zusätzliche Parameter wie die beiden Grenzwerte zugreifen wollen, müssen sie in der Deklaration der betreffenden Funktion enthalten sein, was hier zutrifft. 7. Erweitern Sie den Aufruf von init() wie folgt (Fettdruck): init(recht, 200, 100, 10);

Flash zeigt nun ein pulsierendes Rechteck, das permanent wächst und schrumpft. Als größten Wert legen wir eine Skalierung von 200 beim Aufruf von init() fest, was zu einer Verdopplung der Größe führt. Der kleinste Wert, nämlich 100, entspricht der ursprünglichen Größe, auf die das Rechteck wieder verkleinert wird. Das gleiche Ergebnis lässt sich übrigens mit Hilfe einer Sinus-Funktion realisieren. Denn dort erhalten wir permanent zwischen zwei Extremen hin- und herpendelnde Werte, die dann allerdings mit den gewünschten Werte multipliziert werden müssen, um eine adäquate Animation zu erhalten.

325

da der Player nicht schnell genug alle Ereignisse abarbeiten kann. Daher sollte man bestrebt sein, die Anzahl in Grenzen zu halten; • Das onEnterFrame ist an die Bildwiederholrate gebunden, die jedoch gerade bei sehr hohen Einstellungen nicht auf allen Clients gleich schnell läuft. Daher bietet dieses Ereignis in bestimmten Fällen keine Gewähr, dass Ihre Animation überall mit der gleichen Geschwindigkeit wiedergegeben wird; • Das onEnterFrame lässt keine sekundengenaue Steuerung einer Animation zu. Als Alternative stellt Flash die globale Funktion setInterval() bereit. Damit lässt sich eine als Argument übergebene Funktion unter Angabe eines Zeitwertes wiederholt aufrufen. Um Ihnen einen direkten Vergleich zu ermöglichen, wollen wir uns das Beispiel mit dem sich zwischen rechtem und linkem Bühnenrand bewegenden Kreis mit Hilfe von setInterval() noch mal anschauen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen MovieClip mit einem Kreis (50 × 50, Farbe beliebig, Bibliotheksname mcKreis, Verknüpfungsname mcKreis, Registrierungspunkt mittig). 3. Kehren Sie zur Hauptzeitleiste zurück. 4. Weisen Sie actions folgendes Bildskript zu:  //----------–––- vars –--------------

 var mBeh:MovieClip = this.createEmpty MovieClip(„behaelter“, this.getNextHighestDepth());  var mKreis:MovieClip;

 var nTempoX:Number = 12;

 //-------------- functions –---------

24.4 Animation mit setInterval() und fester Schrittweite In den bisherigen Beispielen erfolgte die permanente Animation mit Hilfe des onEnterFrame-Ereignisses. Das ist eine simple Vorgehensweise, die sehr viel Verwendung findet. Insofern werden wir auch in nachfolgenden Workshops öfters darauf zurück greifen. In manchen Fällen jedoch muss man eine alternative Vorgehensweise wählen:

• Wird zu vielen Objekten ein onEnterFrame zu-

gewiesen, verlangsamt sich u. U. die Ausführung,

 this.onMouseDown = function(){

 mKreis = mBeh.attachMovie(„mcKreis“ ,„kreis“,1);  mKreis._x = _xmouse;

 mKreis._y = _ymouse;

 delete this.onMouseDown;  }

Die Funktionalität entspricht derjenigen der obigen Übung, allerdings ohne Bewegung des Kreises: Wenn Sie irgendwo klicken, blendet Flash an dieser Stelle den Kreis ein. Um ihn zu bewegen, wollen wir ein setInterval() verwenden.

326

5. Fügen Sie innerhalb des onMouseDown-Ereignisses unmittelbar vor dem delete()-Befehl folgende Zeile ein: setInterval(bewegung, 50);

Bei Klick auf die Bühne rufen wir die setInterval()Funktion auf. Sie benötigt mindestens zwei Argumente, nämlich die Funktion, die Sie permanent ausführen möchten, sowie der zeitliche Abstand zwischen dem Ausführen dieser Funktion, gemessen in Millisekunden. Anders als bei onEnterFrame tragen wir hier also nicht einfach die ausführenden Befehle ein, sondern lagern sie in eine Funktion aus, die wir dann aufrufen. Formal gesehen erlaubt es AS zwar, der setInterval()-Funktion eine Funktion ohne Bezeichner zu übergeben, was in einer einfachen Form so aussehen könnte (Fettdruck): setInterval(function() {trace(„Hallo“);}, 50);

In diesem Aufruf weisen wir Flash an, alle 50 Millisekunden ein bescheidenes „Hallo“ auszugeben. Solange sich die übergebene Funktion als einzeilige Anweisung schreiben lässt, akzeptiert Flash alles. Dennoch sollte man auf eine derartige Schreibweise verzichten, da sie ausgesprochen unübersichtlich ist. Kehren wir zurück zu unserem Beispiel. Übergeben wir dort den Namen einer andernorts deklarierten Funktion als Argument, dürfen wir ihn nicht mit den sonst üblichen runden Klammern eintragen, denn das würde die betreffende Funktion direkt ausführen. Nun benötigen wir noch die betreffende Funktionsdeklaration. 6. Fügen Sie innerhalb des Funktions-Blocks vor dem onMouseDown-Ereignis folgende Deklaration ein:  function bewegung():Void {  mKreis._x += nTempoX;

 if (mKreis._x>=Stage.width || mKreis._x<=0) {  nTempoX *= -1;

Kapitel 24  Geskriptete Animationen

bzw. überschritten wurde. Die Sache hat allerdings einen Haken, der so nicht sichtbar wird: Solange wir das eingerichtete Intervall nicht explizit löschen, wird es permanent ausgeführt, selbst dann, wenn wir das zu bewegende Objekt schon längst entfernt haben. 7. Erweitern Sie die Deklaration von bewegung() direkt am Anfang um folgende Zeile: trace(„bewegung“);

Solange das Intervall existiert, wird bewegung() aufgerufen und damit im Nachrichtenfenster eine Information ausgegeben. Damit können wir kontrollieren, ob das Intervall irgendwann verschwindet oder nicht. 8. Fügen Sie im onMouseDown-Ereignis unmittelbar vor dem delete()-Befehl folgende Zeilen ein: mKreis.onPress = function() {  this.removeMovieClip();  };

Per Mausklick können Sie den Kreis löschen. Doch selbst wenn er verschwindet, wird das Nachrichtenfenster nach wie vor permanent den String „bewegung“ anzeigen. Leider sind wir in der vorliegenden Form nicht in der Lage, das Intervall irgendwie zu löschen. Daher empfiehlt es sich in jedem Fall, eine Referenz zu speichern, um es zu einem späteren Zeitpunkt wieder zu entfernen. 9. Ändern Sie den Aufruf der setInterval()-Methode (Fettdruck): var nIntBeweg:Number = setInterval(bewegung, 50);

Wir speichern in der Variablen nIntBeweg eine Zahl, die von Flash dem eingerichteten Intervall automatisch zugeordnet wurde. Nun sind wir in der Lage, über diese Variable das betreffende Intervall jederzeit anzusprechen. 10. Erweitern Sie das onPress-Ereignis um folgende Zeile:

}



Diese Funktion enthält jetzt die gesamte Bewegung, die wir in der früheren Übung unmittelbar in das onEnterFrame-Ereignis geschrieben haben: Positionsänderung durch Addition von nTempoX sowie Vorzeichenänderung, wenn einer der Grenzwerte erreicht

Wenn Sie testen und den Kreis per Klick entfernen, stoppt auch die Ausgabe im Nachrichtenfenster, da wir das Intervall über die ihm zugewiesene ID löschen. Normalerweise zeichnet Flash die Bühne abhängig von der Bildwiederholrate, die im Eigenschaftsfenster eingestellt werden kann. Das Intervall dagegen wird

 }

clearInterval(nIntBeweg);

24.4  Animation mit setInterval() und fester Schrittweite

327

halbwegs unabhängig davon ausgeführt – das bedeutet jedoch nicht automatisch, dass dementsprechend der Screen neu gerendert wird.

pWer._x += vTempoX;

11. Ändern Sie die Anzahl der Millisekunden, die Sie als Argument an das setInterval() übergeben (Fettdruck):

 vTempoX *= -1;

 var nIntBeweg:Number = setInterval(bewegung, 20);

 }

Rein optisch dürfte sich nicht übermäßig viel gegenüber vorher geändert haben. Die Animation ist zwar schneller, aber ruckelt etwas. 12. Fügen Sie innerhalb der Deklaration von bewegung() nach der schließenden Klammer der ifBedingung folgenden Befehl ein:

updateAfterEvent();

Die Animation wird nun erheblich flüssiger und schneller dargestellt als zuvor. Mit dieser Anweisung erzwingen wir das Neuzeichnen des Screens, unabhängig davon, ob bereits alle Skripte für den aktuellen Frame und die dort vorhandenen Objekte abgearbeitet und die sichtbaren Elemente neu gerendert wurden oder nicht. Leider besitzt updateAfterEvent() den Nachteil, den Player stark zu beanspruchen, so dass man damit insgesamt sparsam umgehen sollte. So reizvoll der Gedanke auch sein mag, es macht keinen Sinn, einen besonders kleinen Wert zu wählen, um eine absolut flüssige Animation zu erhalten. Denn der Flash-Player versucht zwar, möglichst präzise das angegebene Intervall einzuhalten, aber es gibt schlicht technische Grenzen. So wird Flash nicht in der Lage sein, exakt jede Millisekunde eine Positionsänderung durchzuführen und korrekt zu rendern. Seien Sie deswegen nicht traurig, denn auch wir besitzen Grenzen: Wir wären nämlich genau so wenig in der Lage, optisch festzustellen, ob Flash schummelt und beispielsweise „nur“ alle 10 anstatt alle 2 Millisekunden einen Befehl ausführt. Ein derartiger Zeitraum ist schlicht viel zu klein, um von uns bewusst wahrgenommen zu werden. Die setInterval()-Funktion erlaubt es, nach den beiden vorgeschriebenen Argumenten eine weitere, beliebige Anzahl an Argumenten zu übergeben. 13. Ändern Sie die Deklaration von bewegung() folgendermaßen (Fettdruck):  function bewegung(pWer:MovieClip):Void {

 if (pWer._x>=Stage.width || pWer._ x<=0) { }

 updateAfterEvent();

Wir schreiben den Namen des zu bewegenden Objekts nicht im Klartext in die Funktion, sondern erfassen ihn mit Hilfe eines Parameters namens pWer. Den trace()-Befehl aus den vorhergehenden Schritten haben wir gelöscht, da die Funktionsweise des setInterval()-Aufrufs nun klar sein dürfte. 14. Erweitern Sie setInterval() folgendermaßen (Fettdruck):  var nIntBeweg:Number = setInterval(bewegung, 50, mKreis);

Die Bewegung erfolgt genauso wie zuvor, optisch erkennen wir also keinen Unterschied. Programmiertechnisch haben wir jedoch die Flexibilität der Bewegungs-Funktion durch einen Parameter erhöht. Das betreffende Argument wird per setInterval() übergeben, wobei Sie auf die Position der Argumente achten müssen: An den beiden ersten Stellen stehen aufzurufende Funktion und Intervall in Millisekunden, erst dann folgen alle weiteren, optionalen Argumente (in unserem Beispiel die zu bewegende Instanz). Wenn wir Variablen als Argumente übergeben, behandelt sie setInterval() anders als wir das von Funktionen gewohnt sind. Denn der Variableninhalt wird nur ein einziges Mal geprüft, nämlich beim Einrichten des Intervalls, so dass nachfolgende Änderungen der Variablen keine Berücksichtigung finden. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie in actions folgendes Bildskript ein:  //----------- vars –---------------– var nTempoX:Number = 12;

 //----------- functions –---------––

 function ausgabe(pTempoX:Number):Void {

 trace(„Tempo-Variablen in Interval: „+pTempoX);  }

 this.onMouseDown = function() {

328

 nTempoX++;

 trace(„Tempo-Variable nach Mausklick: „+nTempoX);  };

 var intTempo:Number = setInterval(ausgabe, 100, nTempoX);

Flash gibt im Nachrichtenfenster permanent den Inhalt von nTempoX mit 12 an. Wenn Sie mit der Maus klicken, erhalten Sie zusätzlich den neuen, jeweils um 1 erhöhten Wert dieser Variablen angezeigt, während sich die über das Intervall ausgegebene Information nicht ändert. Wir richten eine Variable ein, die wir mit dem Wert 12 initialisieren. Über ein Intervall sorgen wir dafür, dass die Funktion ausgabe() alle 100 Millisekunden aufgerufen wird und dabei als Argument die zuvor initialisierte Variable nTempoX erhält. Diese Funktion gibt anschließend den Inhalt der Variablen wieder. Bei jedem Mausklick inkrementieren wir nTempoX. Entgegen unserer Erwartung zeigt die Funktion ausgabe() immer nur den ursprünglichen Wert der Variablen an, genau genommen den Wert, den die Variable zum Zeitpunkt des Einrichtens des Intervalls hatte. Nur dort prüft Flash den Inhalt und übernimmt dann die Variable ungeachtet nachfolgender Änderungen. Das ist gerade für Anfänger eine ärgerliche Fehlerquelle. In der Praxis hält setInterval() eine kleine Einschränkung für uns bereit: Diese Funktion wird nicht völlig unabhängig von der Bildwiederholrate ausgeführt. Wenn die zeitliche Differenz zwischen den Intervallen und zwischen dem durch die Bildwiederholrate definierten Zeichnen des Screens zu groß ist und die per Intervall aufgerufen Funktion zeitintensive Berechnungen enthält, kann Flash die gewünschten Intervalle nicht mehr korrekt ausführen. Bei sehr kleinen Intervallwerten müssen Sie also zusätzlich für eine höhere Bildwiederholrate sorgen. Wir schauen uns dazu ein kurzes Beispiel an. 1. Erstellen Sie eine Standarddatei. 2. Stellen Sie die Bildwiederholrate auf einen hohen Wert, z. B. 55. 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var nInterval:Number, nAlteZeit:Number, nNeueZeit:Number;

 //----------- functions –––---------

Kapitel 24  Geskriptete Animationen

 function init() {

 nAlteZeit = getTimer();

 nInterval = setInterval(dauer, 10);  }

 function dauer() {

 nNeueZeit = getTimer();

 trace(nNeueZeit-nAlteZeit);  nAlteZeit = nNeueZeit;  }

 //------------ start –--------------  init();

Wir erhalten im Nachrichtenfenster eine lange Zahlenreihe, die beispielsweise so aussieht: 16 11 10 10 Wie nahe der ausgegebene Wert tatsächlich am eingestellten Intervall liegt, hängt von Ihrem Rechner und den Prozessen ab, die während der Ausführung unseres Skriptes noch im Hintergrund laufen. Vermutlich werden Sie jedoch Werte erhalten, die nahe an den hier gezeigten liegen. Wir richten drei Variablen ein, die drei Zahlen aufnehmen sollen:

• Eine ID zur Referenzierung des Intervalls, so dass wir es bei Bedarf löschen können;

• Eine Variable zur Aufnahme des letzten Zeitpunkts, zu dem die per Intervall aufgerufene Funktion ausgeführt wurde; • Eine Variable zur Aufnahme des aktuellen Zeitpunkts.

Die Funktion init() speichert die aktuelle Zeit in nAlteZeit, so dass im nächsten Schritt, sobald unsere Funktion dauer() aufgerufen wird, die zeitliche Differenz berechnet werden kann. Dann richten wir ein Intervall ein, das im Abstand von 10 Millisekunden die Funktion dauer() ausführt. Diese Funktion beschränkt sich darauf, die aktuelle Zeit in der Variablen nNeueZeit zu speichern, durch die Subtraktion von nAlteZeit die zeitliche Differenz zu vorher zu errechnen und abschließend den Inhalt von nAlteZeit mit nNeueZeit zu überschreiben. 4. Reduzieren Sie die Bildwiederholrate auf einen niedrigen Wert, z. B. 5.

24.5  Zeitsteuerung

Deutlich ändert sich die Zeit zwischen den Intervallen. Es können beispielsweise folgende Werte im Nachrichtenfenster angezeigt werden: 19 25 19 21 Die Differenz vergrößert sich in diesem Beispiel auf ungefähr das Doppelte. Abhängig von dem auszuführenden Code können sich hier größere Differenzen ergeben, die man nur durch eine hohe Bildwiederholrate ausgleichen kann. Beachten Sie, dass bei der Verwendung von setInterval() der Selbstbezug per this nicht mehr wie gewohnt funktioniert. Enthält die im Intervall aufgerufene Funktion ein this, ist damit nicht mehr wie gewohnt die Zeitleiste gemeint, auf der sich besagte Funktion befindet. Statt dessen ist es undefined. Um den Selbstbezeichner dennoch verwenden zu können, muss dem Intervall das gemeinte Objekt explizit angegeben werden. Dabei ist die aufgerufene Funktion als String zu übergeben, z. B.: function output(){  trace(this);

 clearInterval(nInterv); }

var nInterv:Number = setInterval(this, „output“,50);

Als Ergebnis meldet sich die Hauptzeitleiste im Nachrichtenfenster mit _level0. Unterbleibt dagegen die Angabe des Bezugs bei der Deklaration des Intervalls, erhalten Sie ein deprimierendes undefined für den Inhalt von this. Falsch wäre also: var nInterv:Number = setInterval(output,50);

329

• Wir treffen keine Festlegung hinsichtlich der End-

position. Wir möchten lediglich, dass ein Objekt eine Zeit lang animiert wird; • Wie in den vorhergehenden Beispielen legen wir eine Endposition fest, die innerhalb eines bestimmten Zeitraums eingenommen werden soll. Zwar benötigen wir in beiden Fällen eine Schrittweite, aber sie ist sekundär im Vergleich zur Dauer. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –-----------––  var nTempoX:Number = 10;

 //-----------– functions –------––  function bewegung(pWer:MovieClip):Void{  pWer._x += nTempoX;  }

 function ende():Void{

 delete kreis.onEnterFrame;  clearInterval(intStop);  }

 function init():Void{  kreis._x = 30;

 kreis._y = 100;

 kreis.onEnterFrame = function(){  bewegung(this); }

 var intStop:Number = setInterval(ende,2000);  }

 //------------- aufruf –––––--------

24.5 Zeitsteuerung

 init();

Wie wir oben gesehen haben, muss eine Animation nicht zwangsläufig über eine feste Schrittweite definiert werden, auch wenn das einen sehr häufig beschrittenen Weg darstellt. Statt dessen wollen wir im nachfolgenden die zeitliche Dauer festlegen. Dabei sind zwei Varianten möglich:

Der Kreis wird sich abhängig von der Bildwiederholrate etwa bis zur Bühnenmitte bewegen und dann stehen bleiben. Natürlich benötigen wir hier wie schon zuvor eine Schrittweite, denn Flash muss ja wissen, um welchen Betrag die zu animierende Eigenschaft geändert werden soll. Dazu verwenden wir unsere altbekannte

330

Variable nTempoX. Die parametrisierte Funktion bewegung() macht weiter nichts, als das per Argument übergebene Objekt auf eine neue horizontale Position zu setzen. In der init()-Funktion geben wir dem Kreis eine bestimmte Startposition und weisen ihm ein onEnterFrame zu, das permanent die Funktion bewegung() aufruft. Die eigentliche Zeitsteuerung erfolgt über ein Intervall, dem wir als zweites Argument 2000 Millisekunden, d. h. 2  Sekunden übergeben. Sind diese abgelaufen, führt Flash die Funktion ende() aus, die das onEnterFrame löscht und damit faktisch die Animation stoppt. Da das Intervall nicht mehr benötigt wird, löschen wir es ebenfalls. Die zeitliche Steuerung erreichen wir also schlicht dadurch, dass wir nach einer vordefinierten Zeit eine Funktion aufrufen, die das für die Animation verantwortliche Ereignis löscht, hier das onEnterFrame. Hätten wir an dessen Stelle ein weiteres Intervall verwendet wie in einer der vorhergehenden Übungen, dann müssten wir dieses Intervall ebenfalls aufheben, um die Animation zu stoppen. Wir haben im vorhergehenden Abschnitt für setInterval() eine Kurzform gesehen, die auch bei Ereigniszuweisungen möglich ist: kreis.onEnterFrame = function() {this._x += 10;};

Wir erwähnen sie hier der Vollständigkeit halber, aber sie sollte aus dem schon genannten Grund der erschwerten Lesbarkeit möglichst keine Verwendung finden.

Kapitel 24  Geskriptete Animationen

beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var nPosX1:Number = kreis._width;  var nPosX2:Number = Stage.widthkreis._width;  var nFaktorX:Number = 0.3;  var nGrenze:Number = 0.5;

 var nZiel:Number, nDif:Number;

Vorbereitend definieren wir eine Reihe von Variablen. Dazu gehören zwei verschiedene Zielpositionen, zu denen sich der Kreis bei verschiedenen Klicks hin bewegt. Als erste Position wählen wir die Breite des Kreises, wodurch wir einen Wert erhalten, der nahe am linken Bühnenrand liegt. Der zweite Wert entspricht einem Punkt in Nähe des rechten Bühnenrands. Für die Berechnung der konkreten Schrittweite benötigen wir ein Tempo, das wir hier mit einem scheinbar ausgesprochen kleinen Wert festlegen. In der späteren Berechnung wird jedoch klar, das sich die Bewegung dennoch schnell vollziehen wird. Mit einer weiteren Variable definieren wir eine Abbruchbedingung für die Animation, die ansonsten endlos weiter laufen würde. Die beiden letzten Variablen benötigen wir innerhalb eines onEnterFrame-Ereignisses, um jeweils die neue Position zu ermitteln. 4. Erweitern Sie das Skript um folgende Zeilen:  //--------- functions –---------–----

24.6 Dynamische Schrittweite

 function init():Void {

Eine feste Schrittweite hat den Vorteil, dass sie sich ohne kompliziert erscheinende Berechnung für eine Animation einsetzen lässt. Nachteilig ist jedoch, dass sie mitunter – insbesondere, wenn man sie länger betrachtet – langweilig und steif wirken kann. Mehr Dynamik vermittelt dagegen eine Animation, deren Tempo abhängig von der Streckenlänge variiert. Wir wollen uns dies am Beispiel eines Kreises anschauen, der sich bei Mausklick auf ein definiertes Ziel hin bewegt, wobei sich die Animation permanent verlangsamt.

 kreis._y = Stage.height/2;

1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe

 kreis._x = nPosX1;  }

Anders als sonst bescheiden wir uns diesmal mit einer kleinen init()-Funktion, die nichts weiter tut als dem Kreis eine Startposition zuzuweisen. Sie entspricht horizontal dem ersten der zuvor definierten Zielpunkte und vertikal der Bühnenmitte. Wie wir im Kapitel zur Codestruktur gesehen haben, besteht ja die Möglichkeit, anstelle der bisher verwendeten Variante der vollständigen Abbildung der Ausgangsbedingungen nur spezifische Eigenschaften in diese Funktion aufzunehmen. Funktionszuweisungen kann man dann auslagern, was ein potentielles init()-Monster ent-

24.6  Dynamische Schrittweite

schlackt. Allerdings verfügt man im Gegenzug über zahlreiche kleinere Blöcke, deren logischer Zusammenhang sich nicht direkt erschließt, da sie scheinbar unabhängig nebeneinander existieren. Sie sollten mit beiden Varianten vertraut werden, so dass wir hier den zweiten Weg wählen wollen. 5. Fügen Sie nach der init()-Funktion folgende Deklaration ein:  kreis.onPress = function() {  if(this._x == nPosX1){

 bewegung(this, nPosX2); }else{

 bewegung(this, nPosX1); }  };

Wenn wir auf den Kreis klicken, wird eine noch zu definierende Funktion bewegung() aufgerufen. Sie führt die eigentliche Animation aus. Da wir gerne möchten, dass sich der Kreis, falls er sich auf der ersten Position befindet, zur zweiten hin bewegt und umgekehrt, übergeben wir das gewünschte Ziel jeweils als Argument, abhängig von der aktuellen Position des Kreises. Auf der ersten Position entspricht natürlich nPosX2 und auf der zweiten nPosX1 dem Ziel. Um uns etwas Flexibilität zu bewahren, schreiben wir das zu bewegende Objekt nicht fest in die aufgerufene Funktion hinein, sondern übergeben es ebenfalls als Argument. 6. Fügen Sie nach der Deklaration von onPress ein:  function bewegung(pWer: MovieClip, pWohin: Number):Void{  pWer.onEnterFrame = function(){  nDif = pWohin – this._x;

 this._x += nDif * nFaktorX; }  }

 //------------ aufruf –-------------  init();

Wenn Sie testen, können Sie die Animation jeweils durch einen Mausklick auf den Kreis starten. Zunächst bewegt er sich von links nach rechts, wobei er mit einem hohen Tempo startet, das sich permanent reduziert, bis er auf dem Zielpunkt zur Ruhe kommt. Sobald er steht, kann er erneut angeklickt werden.

331

Dann bewegt er sich auf die gleiche Art und Weise wieder zurück zum linken Bühnenrand. Die Funktion bewegung() benötigt zwei Parameter, nämlich den Instanznamen des zu animierenden Objekts und die horizontale Position, die erreicht werden soll. Die Bewegung erfolgt über ein onEnterFrame, das wir der übergebenen Instanz zuweisen. Da die konkrete Animation von der Entfernung zum Ziel abhängt, müssen wir diese zunächst ermitteln, indem wir von dem übergebenen Zielwert die aktuelle x-Position des Kreises subtrahieren und in der Variablen nDif speichern. Die Reihenfolge der Operanden ist wichtig, denn wir möchten über das Vorzeichen des Ergebnisses automatisch eine Addition oder Subtraktion für die eigentliche Bewegung erreichen, ohne dieses Vorzeichen abfragen zu müssen. Wir verwenden also das gleiche Prinzip, dass Sie bereits in den vorhergehenden Übungen ausgiebig kennen gelernt haben. Wenig spannend wäre es, wenn wir einfach diese Entfernung zur aktuellen Position hinzu addieren würden. Das Ergebnis wäre unserem onEnterFrame zum trotz letzten Endes eine einmalige Animation, da der Kreis sofort seine Zielposition erreichen würde. Daher dürfen wir zur momentanen Position nur einen Bruchteil der Entfernung addieren, was wir durch die Multiplikation von nDif mit nFaktorX erreichen. Da wir den Faktor mit einem Wert kleiner 1 initialisiert haben, wird das Ergebnis der Multiplikation immer kleiner als der für nDif errechnete Wert sein. Um das besser zu verstehen, wollen wir uns ein konkretes Beispiel vorstellen. Nehmen wir beispielsweise an, der Kreis befinde sich auf der Position 20, während wir als Ziel 320 angeben. Subtrahieren wir von pWohin die Position this._x, also 320  – 20, so ergibt sich eine Entfernung von 300. Wenn wir diesen Wert mit nFaktorX, also 0.3, multiplizieren, erhalten wir 90. Im ersten Schritt erhöht sich dementsprechend die x-Position des Kreises um 90, der Kreis befindet sich damit auf 110. Derselbe Vorgang wiederholt sich im nächsten onEnterFrame, nur eben mit veränderten Werten. So beträgt die Entfernung nun 320 – 90, d. h. 230. Durch Multiplikation mit dem Geschwindigkeitsfaktor erhalten wir 69, so dass nicht mehr 90, sondern nur noch 69 zur aktuellen Position addiert werden, was einer neuen x-Position von 110 + 69, d. h. 179 entspricht (s. Abbildungen 90 und 91).

332

Kapitel 24  Geskriptete Animationen

Abbildung  90:  Positionsberechnung über wechselnde Entfernung (1)

Abbildung  91:  Positionsberechnung über wechselnde Entfernung (2)

Mit jedem onEnterFrame reduziert sich daher der zu addierende Wert um etwas weniger als 1/3. Hätten wir nFaktorX dagegen mit 0.5 initialisiert, würde sich jeder neu berechnete Wert gegenüber dem vorhergehenden um die Hälfte verkleinern. In diesem Beispiel spielt die Vorzeichenumkehr keine Rolle, da sich der Kreis von links nach rechts bewegt, also einfach eine Addition bei der x-Position erfolgt. Anders sieht es aus, wenn er seine Zielposition einnimmt und wir anschließend erneut klicken. Die Funktion bewegung() erhält beim Aufruf als Ziel 20 übergeben. Da dieser Wert niedriger als die aktuelle Kreisposition ist, erhalten wir im onEnterFrame bei der Berechnung der Entfernung einen negativen Wert. Bezogen auf unser obiges Beispiel ergäbe sich 20  – 320, was –300 entspricht. Mit 0.3 multipliziert erhalten wir  –90. Addieren wir  –90 zur aktuellen x-Position, erfolgt aufgrund des Vorzeichens faktisch eine Subtraktion und der Kreis bewegt sich um 90 Pixel nach links. Die Bewegung erfolgt also mit denselben Werten wie zuvor, nur mit negativem Vorzeichen, so dass sich die Bewegungsrichtung umkehrt. Auch wenn wir es visuell nicht wahrnehmen können, hat unser Skript einen Nachteil: Flash führt die Animation permanent aus, da eine Endbedingung fehlt. Selbst wenn der Abstand zwischen aktueller Position und Ziel nur noch einen Zehntel Pixel beträgt, zwingen wir Flash zu weiteren, völlig überflüssigen Berechnungen.

if(Math.abs(nDif) > nGrenze){

7. Erweitern Sie die Funktion bewegung() um folgende if-Bedingung (Fettdruck):  function bewegung(pWer: MovieClip, pWohin: Number):Void{  pWer.onEnterFrame = function(){  nDif = pWohin – this._x;

 this._x += nDif * nFaktorX; }else{

this._x = pWohin;

 delete pWer.onEnterFrame; } }  }

Das Ausführen der Bewegung machen wir jetzt von der Größe der Entfernung abhängig. Nur wenn diese über einem bestimmten Wert liegt  – hier konkret: 0.5 – addieren wir den errechneten Wert zur x-Position. Wichtig ist, dass wir in nGrenze einen deutlich niedrigeren Wert speichern als 1. Andernfalls können wir am Ende der Animation mehr oder minder deutlich einen kleinen Ruck wahrnehmen. Sie können das gerne testen, indem Sie nGrenze mit 1 initialisieren. Da die if-Bedingung auch dann korrekt ausgeführt werden muss, wenn sich der Kreis nach links bewegt, nDif also einen negativen Wert enthält (der in jedem Fall kleiner 0.5 ist), verwenden wir an dieser Stelle den vorzeichenunabhängigen Wert mit Hilfe von Math.abs(). Trifft die Bedingung nicht mehr zu, befindet sich der Kreis so nahe am Zielpunkt, dass wir ihn, wie im else-Fall definiert, direkt auf die gewünschte Position setzen und das nun nicht weiter benötigte onEnterFrame löschen können. Die Deklaration von bewegung() ist logisch korrekt, lässt sich aber noch etwas vereinfachen. 8. Ändern Sie die Deklaration von bewegung() folgendermaßen (Fettdruck):  function bewegung(pWer: MovieClip, pWohin: Number):Void{  pWer.onEnterFrame = function(){

24.7  Feste Schrittanzahl

 nDif = pWohin – this._x;

333

this._x += nDif * nFaktorX;

letzte Variable dient dazu, abhängig von der Gesamtzahl und der zurück zu legenden Strecke das Tempo pro Einzelschritt zu ermitteln.

 this._x = pWohin;

4. Erweitern Sie das Skript um folgende Funktionsdeklaration:

 delete pWer.onEnterFrame;

 //------------- functions –----------

if(Math.abs(nDif) <= nGrenze){  pWer.enabled = true; } }  }

Wir führen in jedem Fall die Positionsänderung durch und kontrollieren danach, ob der angegebene Grenzwert erreicht wurde. Wenn ja, beenden wir die Animation wie zuvor. Auf diese Weise ersparen wir uns den else-Fall, der hier vollständig durch die if-Bedingung erfasst wird. Selbstverständlich spielt es hier wie in den vorherigen Beispielen keine Rolle, welche Eigenschaft sie animieren wollen. Denn dieses Prinzip gilt für die Deckkraft ebenso wie für die Größe und Drehung.

24.7 Feste Schrittanzahl Mitunter ist es erwünscht, einer Animation exakt die Anzahl der Eigenschaftsänderungen vorzugeben. Wie im Fall der Zeitsteuerung kann man damit gleichzeitig eine Definition der Endeposition verbinden oder darauf verzichten. Wir werden wieder unseren liebgewonnenen Kreis bemühen, um sich sofort nach Start der Anwendung Richtung Ziel zu bewegen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Weisen Sie actions folgendes Bildskript zu:

 function init(pWer: MovieClip, pStartX: Number, pStartY: Number, pWohin: Number):Void {  pWer._x = pStartX;  pWer._y = pStartY;

 bewegung(pWer, pWohin);  }

In Erweiterung der bisherigen Beispiele parametrisieren wir die zur Vorbereitung verwendete init()Funktion, um das Skript flexibler zu gestalten. Sie erhält als Parameter das zu animierende Objekt, die horizontale und die vertikale Startposition sowie die horizontale Zielposition. Falls Sie nicht nur eine horizontale, sondern zusätzlich eine vertikale Bewegung wünschen, müssen Sie hier den entsprechenden Parameter ergänzen und die noch zu definierende Funktion bewegung() erweitern. Die x- und y-Position der übergebenen Instanz setzen wir auf die ebenfalls übergebenen Positionswerte. Schließlich rufen wir die eigentliche Bewegungsfunktion auf, die als Argument das zu bewegende Objekt und dessen Ziel erhält. 5. Erweitern Sie das Skript um folgende Zeilen:  function bewegung(pWer: MovieClip, pWohin: Number):Void {

 nTempoX = (pWohin-pWer._x)/nMaxSchritt;

 pWer.onEnterFrame = function() {  this._x += nTempoX;  nSchritt++;

 //--------------- vars –-------------

 if (nSchritt>=nMaxSchritt) {

 var nMaxSchritt:Number = 10;

 delete pWer.onEnterFrame;

Zunächst benötigen wir eine Zählvariable, mit deren Hilfe wir herausfinden können, wie viele Schritte bereits vollzogen wurden. Sie startet notwendigerweise mit dem Wert 0. In der Variablen nMaxSchritt legen wir die Gesamtzahl der gewünschten Schritte fest. Die

};

 var nSchritt:Number = 0;

 this._x = pWohin;

 var nTempoX:Number;

}  }

 //------------ aufruf –-------------  init(kreis, kreis._width/2, Stage. height/2, 420);

334

Kapitel 24  Geskriptete Animationen

Das lässt sich in einem einfachen Test überprüfen. 6. Initialisieren Sie testweise nMaxSchritt mit einem anderen Wert: nMaxSchritt = 7;

7. Kommentieren Sie im onEnterFrame-Ereignis innerhalb des if-Blocks die Positionszuweisung aus (Fettdruck): //this._x = pWohin; Abbildung  92:  Berechnung der Schrittweite aus Schrittanzahl und Entfernung

Die Funktion bewegung() erhält, wie erwähnt, beim Aufruf die Instanz, die wir animieren wollen, sowie das Ziel. Das Tempo, mit dem die Bewegung erfolgt, ergibt sich aus der Entfernung zwischen Ziel und aktueller Position dividiert durch die Anzahl der einzelnen Schritte. Wenn wir beispielsweise an der x-Position 20 starten und sich das Ziel auf 420 befindet, beträgt die Entfernung 400 Pixel. Da wir in jedem Schritt die gleiche Entfernung zurücklegen wollen und die Strecke in zehn Schritten bewältigt werden soll, muss der Kreis um 400/10, also 40 Pixel pro onEnterFrame nach rechts bewegt werden. Daher addieren wir jeweils den errechneten Wert zur aktuellen x-Position hinzu. Gleichzeitig wird nSchritt inkrementiert, um die Anzahl der ausgeführten Schritte zu protokollieren. In der if-Bedingung kontrollieren wir, ob mindestens so viele Schritte ausgeführt wurden, wie wir als maximale Anzahl im Variablen-Block definiert haben. Trifft das zu, setzen wir das animierte Objekt exakt auf die Zielposition und löschen das onEnterFrame. Schließlich erfolgt der Aufruf der init()-Funktion, der wir als Argumente die Instanz kreis, dessen halbe Breite als horizontale und die Bühnenmitte als vertikale Startposition sowie 420 als horizontale Zielposition übergeben. Innerhalb des Anweisungsblocks der if-Bedingung haben wir den Kreis auf die korrekte Position gesetzt, was eigentlich nicht notwendig wäre, da wir ja die richtige Schrittweite errechnet haben. Es hat jedoch den Vorteil, dass durch die Berechnung ermittelte Fliesskommawerte nicht zu Ungenauigkeiten bei der Positionierung am Ende führen.

8. Fügen Sie dort folgende Zeile ein: trace(„Erreichte Endposition: „ + this._x);

9. Rufen Sie die init()-Funktion mit einer veränderten Zielposition auf (Fettdruck): init(kreis, kreis._width/2, Stage. height/2, 427);

Ausgabe im Nachrichtenfenster: Erreichte Endposition: 426.85 Der am Ende erreichte Wert weicht geringfügig von dem als Ziel definierten Wert ab. In visueller Hinsicht dürfte das kaum Probleme bereiten, sehr wohl aber, wenn weitere Berechnungen von dieser Position abhängen. Daher schalten wir in Schritt 5 eine potentielle Fehlerquelle aus, indem wir abschließend die gewünschte Position setzen. 10. Kehren Sie zur korrekten Version in Schritt 5 zurück. Die Verwendung einer Zählvariablen ermöglicht es, diese Animation leicht mit einer anderen, die in einer geringeren Frequenz erfolgen soll, zu kombinieren. Nehmen wir an, wir möchten in jedem zweiten Schritt unseren fleißigen Kreis zusätzlich vertikal bewegen. 11. Erweitern Sie den Variablen-Block um folgende Initialisierung:  var nTempoY:Number = 25;  var nDivisor:Number = 2;

Für die vertikale Bewegung benötigen wir ein festes Tempo, das wir mit 25 auf einen etwas höheren Wert festlegen, so dass wir später den Effekt deutlicher erkennen können. Mit Hilfe des Divisors ermitteln wir, ob eine vertikale Bewegung erfolgen soll.

24.7  Feste Schrittanzahl

12. Fügen Sie unmittelbar nach Beginn des onEnterFrame-Ereignisses folgende if-Bedingung ein:  if (nSchritt % nDivisor == 0) {  this._y += nTempoY;  }

Beim Testen bewegt sich der Kreis schräg nach rechts unten, während zuvor eine rein horizontale Bewegung erfolgte. In jedem onEnterFrame kontrollieren wir, ob nSchritt dividiert durch nDivisor einen Restwert von 0 liefert. Da nDivisor 2 beträgt, ist das in jedem zweiten Durchlauf der Fall, nämlich immer dann, wenn eine gerade Anzahl vorliegt: 0, 2, 4 usw. Die Verwendung des Modulo-Operators mit dem Operanden 0 ergibt in jedem Fall 0, weswegen auch im allerersten Schritt, in dem nSchritt 0 beträgt, die vertikale Bewegung ausgeführt wird. Möchte man das unterbinden, müsste in die if-Bedingung noch eine Abfrage eingefügt werden, ob nSchritt größer 0 ist. Die Schrittanzahl muss nicht zwangsläufig durch eine Variable vorgegeben werden, sondern kann sich aus einer spezifischen Eigenschaft eines Objekts ergeben. So legt beispielsweise die Länge des einzublendenden Strings beim bekannten Schreibmaschinen-Effekt die Anzahl der Schritte fest. Oder wir definieren in einem Array Objektpositionen, die sukzessive eingenommen werden sollen. Die Länge des Arrays gibt dann an, in wie vielen Schritten die Animation erfolgt. Wir wollen uns hier das Prinzip in aller Kürze anschauen. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Setzen Sie die Bildwiederholrate auf den Wert 8. 4. Weisen Sie actions folgendes Bildskript zu:

335

Wie zuvor benötigen wir einen Startwert für unsere Zählvariable, der wiederum 0 beträgt. In dem mehrdimensionalen Array aPositionen legen wir jeweils einen x- sowie einen y-Wert für die einzunehmende Position fest. Da wir mit jedem Einzelschritt auf eine Index-Position innerhalb des Arrays zugreifen und der höchste zulässige Index immer der Gesamtlänge des Arrays minus 1 entspricht, speichern wir diesen Wert in nMaxSchritt. Wollten wir auf diese Variable verzichten, müssten wir in der späteren Berechnung jeweils direkt auf die Eigenschaft aPositionen.length zugreifen. 5. Erweitern Sie das Skript um eine gegenüber vorher etwas vereinfachte init()-Funktion:  //------------ functions –----------  function init(pWer: Movie­ Clip, pStartX: Number, pStartY: Number):Void {  pWer._x = pStartX;  pWer._y = pStartY;  bewegung(pWer);  }

Auch hier müssen wir eine Startposition setzen sowie Flash mitteilen, welches Objekt wir überhaupt bewegen wollen. Aber die Angabe einer Zielposition entfällt, da sie sich ja aus dem angelegten Array ergibt. Wer will, kann auch für die Startposition das Array verwenden, indem man einfach den ersten dort enthaltenen Wert zuweist. 6. Erweitern Sie das Skript:  function bewegung(pWer: MovieClip):Void {

 pWer.onEnterFrame = function() {

 this._x = aPositionen[nIndex][0];  this._y = aPositionen[nIndex][1];  nIndex++;

 //------------ vars –----------------

 if (nIndex>nMaxSchritt) {

 var aPositionen:Array = [[40, 75], [124, 180], [207, 207], [300, 207], [300, 207], [255, 280], [230, 344], [200, 500]];

}

 var nIndex:Number = 0;

 var nMaxSchritt:Number = aPositionen. length-1;

 delete this.onEnterFrame; };  }

 //----------–– aufruf –-------------  init(kreis, kreis._width/2, Stage. height/2);

336

Der Kreis wird beim Ausführen der Datei eine mehr oder minder merkwürdige Bewegung über den Screen vollführen, die eher der Tanz-Performance eines modernen Künstlers entsprechen mag als dem, was man von einem anständigen Kreis erwarten würde. Aber über Ästhetik lässt sich bekanntermaßen streiten und so wollen wir dem Kreis seine Animation gönnen. In jedem onEnterFrame-Ereignis weisen wir dem Kreis denjenigen x- und y-Wert zu, der sich über die als Index verwendete Variable nIndex ermitteln lässt. Beträgt die Variable 0 wie bei der Initialisierung, greifen wir im Array auf das erste Element zu, also das Wertepaar [40, 75]. Dessen erster Wert entspricht der x-, der zweite Wert der y-Position. Der Index dieser Werte beträgt in jedem Fall 0 bzw. 1. Danach erhöhen wir nIndex und fragen ab, ob der neue Wert den Grenzwert, der sich aus der Gesamtlänge des Arrays ergeben hat, überschreitet. Falls nein, erfolgt im nächsten Durchlauf der gleiche Prozess, nur dass nun das nächste Element ausgewählt wird. Andernfalls wissen wir, das die letzte Position innerhalb des Arrays zugewiesen wurde und damit die Animation an ihrem Ende angelangt ist. Dann löschen wir einfach das nicht mehr benötigte onEnterFrame-Ereignis. Die Verwendung von onEnterFrame in dieser Variante erweist sich insofern als nachteilig, als sie nur über die Bildwiederholrate eine Steuerung der Ablaufgeschwindigkeit zulässt. Zwar stellt das in unserem konkreten Beispiel kein Problem dar, doch kann es durchaus sein, dass eine höhere Bildwiederholrate zwingend erforderlich ist. Daher lässt sich in diesem Fall ein setInterval() sinnvoll einsetzen. 7. Ändern Sie das Skript wie folgt (Fettdruck):  //----------–– vars –---------------  var nIndex:Number = 0;

 var aPositionen:Array = [[40, 75], [124, 180], [207, 207], [300, 207], [300, 207], [255, 280], [230, 344], [200, 500]];

 var nMaxSchritt:Number = aPositionen. length-1;  var nIntBewegung:Number;

/  /------------ functions –-----------  function init(pWer: MovieClip, pStartX: Number, pStartY: Number, pZeit: Number):Void {  pWer._x = pStartX;

Kapitel 24  Geskriptete Animationen

 pWer._y = pStartY;

 nIntBewegung = setInterval(bewegung, pZeit, pWer);  }

 function bewegung(pWer: MovieClip):Void {

 pWer._x = aPositionen[nIndex][0];  pWer._y = aPositionen[nIndex][1];  nIndex++;

 if (nIndex>nMaxSchritt) {

 clearInterval(nIntBewegung); }

 updateAfterEvent();  }

 //------------ aufruf –-------------  init(kreis, kreis._width/2, Stage. height/2, 200);

Zwar ändert sich die Bewegung prinzipiell nicht, doch lässt sich nun die Ausführungsgeschwindigkeit gezielt steuern. Sie können das gerne selbst testen, indem Sie beim Aufruf von init() an letzter Stelle einen beliebigen anderen Wert übergeben. Wir richten zusätzlich zu den vorhandenen Variablen eine neue ein, in der später die ID-Nummer des für die Animation benötigten setInterval() gespeichert wird. Die Funktion init() erweitern wir um einen Parameter, der eine Angabe über den zeitlichen Abstand zwischen den Aufrufen der Bewegungsfunktion enthält. Außerdem speichern wir in der bereits eingerichteten Variablen nIntBewegung ein Intervall, das die Funktion namens bewegung() alle 200 Millisekunden ausführt und die zu animierende Instanz übergibt. In der Deklaration von bewegung() entfällt das onEnterFrame-Ereignis, da sie durch das Intervall bereits permanent aufgerufen wird. Statt dessen setzen wir direkt die als Argument erhaltene Instanz auf den genauso wie in der vorhergehenden Variante ermittelten Wert. Auch die Kontrolle des Grenzwerts erfolgt gleich. Allerdings löschen wir am Ende der Animation kein onEnterFrame mehr, sondern das Intervall. Um unabhängig von der konkreten Bildwiederholrate das Bild anzeigen zu können, erzwingen wir mit updateAfterEvent() ein Rendern des Screens. Den Aufruf der init()-Funktion erweitern wir um eine Zeitangabe, in unserem Beispiel die erwähnten 200 Millisekunden.

24.8  Fehlerquelle Schleife

24.8 Fehlerquelle Schleife Ein häufiger Fehler, dem Anfänger gerne erliegen, besteht in der Verwendung einer Schleife. Das zu animierende Objekt wird dann nicht über ein onEnterFrame oder ein setInterval() verändert, sondern mit Hilfe einer for- oder while-Schleife. Der entscheidende Denkfehler liegt in der Ausführungsgeschwindigkeit: Die Schleife wird vollständig in einer möglichst kurzen Zeit abgearbeitet und tritt einmalig auf, während ein permanentes Ereignis wie das onEnterFrame in zeitlich konstantem Abstand wiederholt auftritt. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –-------------  var nMaxSchritt:Number = 10;  var nTempoX:Number;

 //----------- functions –-----------  function init(pWer: MovieClip, pStartX: Number, pStartY: Number, pWohin: Number):Void {  pWer._x = pStartX;  pWer._y = pStartY;

 bewegung(pWer, pWohin);  }

 function bewegung(pWer: MovieClip, pWohin: Number):Void {

 nTempoX = (pWohin-pWer._x)/nMaxSchritt;  for (var i:Number = 1; i<=nMaxSchritt; i++) {  pWer._x += nTempoX; }  }

 //------------–– aufruf –-----------  init(kreis, kreis._width/2, Stage. height/2, 420);

Sobald Sie den Film starten, wird der Kreis auf seine Zielposition gesetzt. Wir können keine Animation erkennen.

337

Der Aufbau des Skripts entspricht in wesentlichen Teilen demjenigen aus der ersten Übung zur Animation mit fester Schrittanzahl. Wir legen zunächst die gewünschte Anzahl mit 10 fest und richten eine Variable zur späteren Aufnahme des Bewegungstempos ein. Die init()-Funktion sorgt für die anfängliche Positionierung des Kreises und ruft die BewegungsFunktion auf. Dort ermitteln wir zunächst den erforderlichen Tempowert. Anstelle eines onEnterFrame-Ereignisses bzw. eines setInterval() nehmen wir diesmal jedoch eine Schleife, innerhalb der wir permanent zur aktuellen x-Position des Kreises den Tempowert addieren. Abschließend rufen wir die init()-Funktion mit den gewünschten Startwerten auf. Aller Mühe zum Trotz sehen wir deshalb keine Animation, weil die Schleife in einer oder zwei Millisekunden vollständig abgearbeitet wird, bevor Flash den Screen darstellt. Rein rechnerisch hat unser Kreis dann schon alle Phasen seiner Animation durchlaufen und nimmt die letzte Position ein, die der Zielposition entspricht. Wir können uns die Zeit ausgeben lassen, um zu sehen, wie lange das Abarbeiten der Schleife in Anspruch nimmt. 4. Erweitern Sie die Bewegungs-Funktion wie folgt (Fettdruck):  trace(„Zeit vor Beginn der Schleife: „ + getTimer());  for (var i:Number = 1; i<=nMaxSchritt; i++) {  pWer._x += nTempoX;  }

 trace(„Zeit nach Ende der Schleife: „ + getTimer());

Ausgabe im Nachrichtenfenster: Zeit vor Beginn der Schleife: 14 Zeit nach Ende der Schleife: 14 Selbst wenn Ihr Computer noch eher zu den älteren, vielleicht noch dampfbetriebenen Geräten zählt, dürfte die Differenz zwischen den beiden Zeitangaben minimal sein – im vorliegenden Fall beträgt sie sogar 0 Millisekunden. Innerhalb dieser Zeit wird dem Kreis zehnmal eine neue Position zugewiesen, und danach können wir das Ergebnis auf dem Screen bewundern. Animationen, die sich über einen gewissen Zeitraum erstrecken sollen, mit einer Schleife zu realisieren, macht also keinen Sinn.

338

24.9 Überprüfung von Grenzwerten Bei den bisherigen Animationen spielte es keine Rolle, ob wir die angegebenen Grenzwerte um einen geringen Betrag überschreiten oder nicht. So haben wir in einer früheren Übung unseren Kreis gnadenlos über den Bildschirm gehetzt und ihn dann wieder von vorne beginnen lassen, wenn er den Rand erreichte oder ihn um eine nicht definierte Anzahl an Pixeln überschritt. Auf eine pixelgenaue Definition des Grenzwertes verzichteten wir. Es gibt jedoch Fälle, in denen das einen gravierenden Fehler darstellen kann. Stellen Sie sich vor, wir wollen einen Ball an den Wänden abprallen lassen, ohne dass er diese durchdringt, oder wir möchten die Funktionsweise einer Maschine demonstrieren, bei der sich einzelne Teile aufeinander zu bewegen, bis sie zum Stillstand kommen, sobald sie sich berühren. In solchen Fällen erweist es sich als absolut notwendig, eine Grenze exakt zu definieren und deren Einhaltung zu kontrollieren. Als Beispiel wollen wir wieder unseren erprobten Kreis bemühen, der uns schon so sehr ans Herz gewachsen ist. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, Instanzname kreis, Registrierungspunkt mittig). 3. Fügen Sie eine neue Ebene namens rand ein. 4. Verschieben Sie diese Ebene ganz nach unten im Ebenenstapel der Zeitleiste. 5. Zeichnen Sie dort an beliebiger Stelle eine vertikale Gerade (Linienstärke 1, Höhe entsprechend Bühnenhöhe). Die korrekte Positionierung erfolgt später per Actionscript. 6. Wandeln Sie sie in einen MovieClip um (Bibliotheksname mcLinie, Instanzname linie1, Registrierungspunkt oben Mitte). 7. Weisen Sie actions folgendes Bildskript zu:

Kapitel 24  Geskriptete Animationen

eine horizontale und eine vertikale Position und einen Wert, der die rechte Grenze für die Animation repräsentiert. 8. Erweitern Sie das Skript:  //------------- functions –---------  function init(pWer:MovieClip):Void {  pWer._x = nPosX;  pWer._y = nPosY;

 linie1._x = nRandRe;  bewegung(pWer);  }

Wie gewohnt definieren wir eine init()-Funktion, um vorbereitend das beim Aufruf als Argument übergebene Objekt zu positionieren und es zu bewegen. Um den rechten Rand sehen zu können, setzen wir linie1 auf den als Grenze definierten Wert. 9. Erweitern Sie das Skript:  function bewegung(pWer:MovieClip):Void {

 pWer.onEnterFrame = function() {  this._x += nTempoX;

 if (this._x>=linie1._x) {

 delete this.onEnterFrame; } };  }

In der Funktion bewegung() sorgen wir für die eigentliche Animation, bei der unser Ball solange nach rechts bewegt wird, bis seine horizontale Position derjenigen der Grenzlinie entspricht oder sie überschreitet. Dann löschen wir das zugewiesene onEnterFrame-Ereignisses und beenden faktisch die Bewegung. 10. Rufen Sie die init()-Funktion auf:

 //-------------- vars –--------------

 //---------------- aufruf –---------

 var nPosX:Number = 410;

Der Ball bewegt sich solange nach rechts, bis die ifBedingung zutrifft und er stoppt. Das Endergebnis zeigt Abbildung 93. Sie können deutlich erkennen, dass der Ball nicht einfach an der Wand stoppt, sondern sie weit durchdringt. Einer der Gründe liegt natürlich in der Position

 var nTempoX:Number = 20;  var nPosY:Number = 300;

 var nRandRe:Number = 600;

Wir legen ein relativ hohes Tempo fest, mit dem sich der Kreis bewegen soll. Des weiteren definieren wir

 init(kreis);

24.10  Grenzbedingung und Verwendung von Animationsobjekten

339

Abbildung 93:  Bewegung und Grenzbedingung

Abbildung 94:  Überschreiten des Grenzwertes

des Registrierungspunktes von kreis. Da er für die Positionsberechnung verwendet wird, hat der Kreis die Grenze notwendigerweise schon um die halbe Breite überschritten, ehe die if-Bedingung true zurück liefern kann.

12. Ändern Sie innerhalb des onEnterFrame-Ereignises die if-Bedingung (Fettdruck):

11. Korrigieren Sie innerhalb des onEnterFrameEreignisses die if-Bedingung (Fettdruck):  if (this._x>=linie1._x – this._ width/2) {

Das Ergebnis sieht durchaus besser aus als zuvor, kann aber nicht ganz befriedigen, da der Ball immer noch ein Stück in die Wand hinein ragt. Weil sich der Registrierungspunkt exakt in der Mitte befindet, dieser aber permanent mit der Position der Grenzlinie abgeglichen wird, müssen wir vom Ziel die halbe Breite des Kreises abziehen. Würde sich der Registrierungspunkt am linken Rand befinden, müssten wir sogar die gesamte Breite subtrahieren. Lediglich ein Registrierungspunkt am rechten Rand erfordert in diesem Fall keine weitere Korrektur, hätte aber den Nachteil, bei einer Umkehrung der Bewegungsrichtung am linken Rand Probleme zu verursachen. Wenn der Kreis nun allen Bemühungen zum Trotz euphorisch übers Ziel hinaus schießt, so liegt das schlicht an dem boshafterweise gewählten Startwert und dem Tempo. Die Entfernung zum Ziel beträgt vor dem ersten Schritt 190 Pixel (600 – 410). Da wir in jedem onEnterFrame jeweils 20 zur aktuellen x-Position addieren, ergeben sich Werte wie 430, 450 etc. Im letzten Schritt vor Erreichen der Grenze befindet sich kreis auf der horizontalen Position 590. Da die if-Bedingung noch nicht zutrifft, werden erneut 20 Pixel addiert – damit jedoch lautet seine neue Position 610, was deutlich über der Grenzbedingung von 600 liegt.

 if (this._x > linie1._x – this._ width/2) {  this._x = linie1._x – this._ width/2;  delete this.onEnterFrame;  }

Der Kreis stoppt nun exakt an der Zielposition. Glücklicherweise existieren zwei einfache Varianten zur Korrektur unseres vorherigen Fehlers: Wir setzen entweder im letzten Schritt vor oder im ersten Schritt nach Erreichen des Zielpunkts unser Objekt auf das gewünschte Ziel. In beiden Fällen erhalten wir eine saubere Bewegung, ohne das wir das Ziel sichtbar überschreiten. Das gilt selbst für den Fall, dass wir rein rechnerisch über das Ziel hinausschießen. Da der Screen erst gezeichnet wird, nachdem alle relevanten Skripte abgearbeitet wurden, erfolgt unsere Positionskorrektur vorher und Positionsfehler bleiben unsichtbar. Im konkreten Beispiel kontrollieren wir innerhalb der if-Bedingung nur noch, ob die errechnete Position größer ist als die Zielposition. Falls ja, setzen wir den Kreis direkt auf das Ziel und beenden die Animation.

24.10 Grenzbedingung und Verwendung von Animationsobjekten Wir haben in den bisherigen Beispielen jeweils implizit eine Vorentscheidung bezüglich der weiteren Existenz von Objekten für den Fall getroffen, dass sie die

340

Grenzbedingung der Animation erreichen: Sie führen die Animation fort, nur unter geänderten Bedingungen (z. B. Vorzeichenumkehr der für die Animation verantwortlichen Werte). Welche Möglichkeiten bestehen jedoch generell? Was kann mit Objekten geschehen, die einen solchen Grenzwert erreichen? Diese Frage stellt sich für alle Animationen, bei denen die visuelle Wahrnehmung betroffen ist (insbesondere: Positionsänderung, Deckkraft, Größe, in bestimmten Situationen auch Farbe, nicht jedoch Rotation). Wir wollen uns hier auf die Position beschränken, da sie die im Rahmen einer Animation am häufigsten geänderte Eigenschaft darstellt. Unabhängig von etwaigen philosophischen Erwägungen drohen einem animierten Objekt folgende Schicksale bei Erreichen eines Grenzwerts:

• Das Objekt wird brutal gelöscht. Dies beendet ent-

weder die vollständige Animation oder leitet zu einer neuen Phase über, aber für das betroffene Objekt hat sich das Karma unabänderlich erfüllt! • Das Objekt kehrt seine Bewegungsrichtung um (bouncing off); • Das Objekt setzt seinen Weg am entgegengesetzten Ende des Bildschirms unbeirrt fort (screen wrap); • Das Objekt taucht an einer zufällig ermittelten oder fest vorgegebenen Position innerhalb des Screens wieder auf und setzt i. d. R. die Animation fort. Welche Variante man wählt, hängt notwendigerweise mit dem Zweck zusammen, dem unsere Animation dient. Wir schauen uns kurz konkrete Beispiele an und werden in den weiteren Kapiteln insbesondere zur Trigonometrie darauf zurück kommen.

24.10.1 Löschen des Objekts 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, gleichnamige Verknüpfung, Instanzname kreis, Registrierungspunkt mittig). 3. Löschen Sie den Kreis von der Bühne, da wir ihn später per Skripting einfügen wollen. 4. Fügen Sie eine neue Ebene namens rand ein. 5. Verschieben Sie diese Ebene im Ebenenstapel der Zeitleiste ganz nach unten.

Kapitel 24  Geskriptete Animationen

6. Erstellen Sie dort ein nicht gefülltes Rechteck (Linienfarbe schwarz, Linienstärke 2) in Größe der Bühne, um den Rand des sichtbaren Bereichs zu markieren. 7. Weisen Sie actions folgendes Bildskript zu:  //--------------- vars –------------–  var nTempoX:Number, nTempoY:Number;  var nPosX:Number = Stage.width/2;

 var nPosY:Number = Stage.height/2;  var mKreis:MovieClip;

In gewohnter Weise richten wir unsere Tempo-Variablen für eine horizontale und vertikale Bewegung ein; die konkreten Werte ermitteln wir später per ZufallsFunktion. Für eine Positionierung legen wir zwei Variablen an. Zum Schluss richten wir eine Variable ein, die unseren Kreis aufnehmen soll. 8. Erweitern Sie das Skript um eine init()-Funktion:  //------------- functions –---------  function init():Void {

 mKreis = this. attachMovie(„mcKreis“, „kreis“, 1);  mKreis._x = nPosX;  mKreis._y = nPosY;

 nTempoX = zufallOhne(12, -3, 3);  nTempoY = zufallOhne(12, -3, 3);  bewegung(mKreis);  }

Diese Funktion sorgt für das Einblenden des Kreises, indem wir ihn per attachMovie() auf die Bühne bringen, positioniert ihn in Bühnenmitte, weist mit Hilfe einer noch zu deklarierenden Zufallsfunktion jeweils ein beliebiges Tempo zwischen –12 und –4 sowie 4 und 12 zu und ruft eine ebenfalls noch zu deklarierende Bewegungsfunktion auf. Da das Zufallstempo einen negativen oder einen positiven Wert enthalten kann, wird sich unser Kreis später in einer nicht vorhersagbaren Richtung über die Bühne bewegen. 9. Fügen Sie die Deklaration der Zufallsfunktion ein:  function zufallOhne(pMax:Number, pOhneMin:Number, pOhneMax:Number):Number {

 var nZufall:Number = Math.round(Math. random()*(pMax*2))-pMax;

24.10  Grenzbedingung und Verwendung von Animationsobjekten

 while (nZufall>=pOhneMin && nZufall<=pOhneMax) {

 nZufall = Math.round(Math. random()*(pMax*2))-pMax; }

 return (nZufall);  }

Diese Funktion haben wir bereits im Kapitel über die Math-Klasse, Abschnitt Zufallswerte, kennen gelernt. Ihre Aufgabe besteht darin, einen Zufallswert zu ermitteln, der innerhalb eines gewissen Wertebereichs liegt, und gleichzeitig bestimmte andere Werte auszuschließen. 10. Fügen Sie die Deklaration der Bewegungsfunktion sowie den Aufruf von init() ein:  function bewegung(pWer:MovieClip):Void {

 pWer.onEnterFrame = function() {  this._x += nTempoX;  this._y += nTempoY;

 if (this._x>Stage.width-this._ width/2 || this._xStage.height-this._ height/2 || this._y
 //-------------- aufruf –----------  init();

Der Kreis wird beim Start des Films in Bühnenmitte erscheinen und sich dann Richtung Rand bewegen, wo er verschwindet, sobald er ihn berührt. Die Bewegungsfunktion ist zu großen Teilen aus den vorhergehenden Übungen bekannt. Sie sorgt dafür, dass der Kreis mit den ermittelten Zufallswerten in horizontaler und vertikaler Richtung animiert wird. In dem if-Bandwurm kontrollieren wir permanent, ob seine x-Position größer rechter Rand minus halber Breite oder kleiner seiner halben Breite oder größer unterer Rand minus halber Höhe oder kleiner seiner halber Höhe ist. Der linke und obere Rand entspricht also schlicht der halben Breite bzw. halben Höhe des

341

Kreises. Sobald er einen der Ränder erreicht, löschen wir ihn. Der Löschvorgang ist deutlich wahrnehmbar, da er aufgrund der if-Bedingung schon dann ausgeführt wird, wenn unser Kreis den Rand berührt, also noch bevor er die Bühne verlassen kann. Nicht immer ist ein solches Verhalten erwünscht. 11. Ändern Sie die if-Bedingung wie folgt (Fettdruck):  if (this._x>Stage.width+this._ width/2 || this._x<-this._width/2 || this._y>Stage.height+this._height/2 || this._y<-this._height/2) {

Der Kreis befindet sich dann nicht mehr auf der Bühne, wenn er, gemessen an seinem mittig angeordneten Registrierungspunkt, den Rand um mindestens seine halbe Höhe bzw. halbe Breite überschritten hat. Abbildung 95 visualisiert dies am Beispiel des rechten Randes. Wenn wir den Kreis auf die Bühnenbreite setzen, dann ragt er gleichzeitig halb in die Bühne hinein und halb heraus. Verschieben wir ihn um seine halbe Breite nach links, ergibt sich in der Abbildung das obere Bild. Das entspricht der Grenzbedingung, die wir im vorhergehenden Kapitel kennen gelernt haben. Verschieben wir ihn dagegen um seine halbe Breite nach rechts, erhalten wir das untere Bild, wo er sich vollständig außerhalb der Bühne befindet. Dies ist die erste Position, ab der er für den Betrachter unsichtbar wird und wir ihn gefahrlos löschen können. In unserem konkreten Fall können wir als Vergleichsoperator entweder ein größer (>) und kleiner (<) genau so gut verwenden wie ein größer gleich (>=) und ein kleiner gleich (<=). Es ergibt sich kein wahrnehmbarer Unterschied.

Abbildung  95:  Animationsobjekt innerhalb/außerhalb der Bühne

342

Was geschieht, wenn wir unseren treuen Kreis nicht ins digitale Nirwana schicken wollen? In dem Fall bewegt er sich immer und ewig über den Rand der sichtbaren, von Pixeln und Vektoren bewohnten Welt hinaus. Wir zwingen Flash dann, Prozesse auszuführen, die völlig unnötig sind. Sie hätten sogar deutlich wahrnehmbare Auswirkungen, falls wir nicht nur eines, sondern zahlreiche Objekte per attachMovie() einfügen. Jedes animierte Objekt bedeutet einen zusätzlichen Prozess und damit eine Belastung des Flash-Players.

24.10.2 Bouncing off Gutmütige Seelen belohnen ihre treuen Kreise, indem sie ihnen ein längeres digitales Leben gönnen, es aber beim Erreichen eines entscheidenden Punktes in andere Bahnen lenken. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie auf objects an beliebiger Stelle einen MovieClip mit einem Kreis (40 × 40, Farbe beliebig, Bibliotheksname mcKreis, gleichnamige Verknüpfung, Instanzname kreis, Registrierungspunkt mittig). 3. Löschen Sie den Kreis von der Bühne, da wir ihn später per Skripting einfügen wollen. 4. Fügen Sie eine neue Ebene namens rand ein. 5. Verschieben Sie diese Ebene im Ebenenstapel der Zeitleiste ganz nach unten. 6. Erstellen Sie dort ein nicht gefülltes Rechteck (Linienfarbe schwarz, Linienstärke 2) in Größe der Bühne, um den Rand des sichtbaren Bereichs zu markieren. 7. Weisen Sie actions folgendes aus der vorhergehenden Übung stammende Bildskript zu:  //------------- vars –--------------  var nTempoX:Number, nTempoY:Number;  var nPosX:Number = Stage.width/2;

 var nPosY:Number = Stage.height/2; var mKreis:MovieClip;

 //----------- functions –-----------  function init():Void {

 mKreis = this. attachMovie(„mcKreis“, „kreis“, 1);

Kapitel 24  Geskriptete Animationen

 mKreis._x = nPosX;  mKreis._y = nPosY;

 nTempoX = zufallOhne(12, -3, 3);  nTempoY = zufallOhne(12, -3, 3);  bewegung(mKreis);  }

 function zufallOhne(pMax:Number, pOhneMin:Number, pOhneMax:Number):Number {

 var nZufall:Number = Math. round(Math.random()*(pMax*2))-pMax;  while (nZufall>=pOhneMin && nZufall<=pOhneMax) {

 nZufall = Math.round(Math. random()*(pMax*2))-pMax; }

 return (nZufall);  }

 //-------------- aufruf –-----------  init(kreis);

Wir können mit den gleichen Ausgangsbedingungen arbeiten wie zuvor, d. h. Einblenden eines Kreises und Ermitteln von Zufallsgeschwindigkeiten. 8. Fügen Sie in den Funktionsblock die Deklaration von bewegung() ein:  function bewegung(pWer:MovieClip):Void{

 pWer.onEnterFrame = function() {  this._x += nTempoX;  this._y += nTempoY;

 if (this._x>Stage.width-this._ width/2) {

 this._x = Stage.width-this._ width/2;  nTempoX *= -1;

 } else if (this._x
 if (this._y>Stage.height-this._ height/2) {

 this._y = Stage.height-this._ height/2;

24.10  Grenzbedingung und Verwendung von Animationsobjekten

 nTempoY *= -1;

 } else if (this._y
 this._y = this._height/2;  nTempoY *= -1; } };  }

Wenn Sie testen, bewegt sich Ihr Kreis in beliebiger Richtung. Sobald er irgendwo einen Rand erreicht, kehrt er seine Bewegungsrichtung um, als würde er abprallen. Gegenüber der vorhergehenden Übung haben wir die einzelne if-Bedingung in vier verschiedene Bedingungen aufgesplittet. Auch hier testen wir jeweils, ob der Rand erreicht wurde, diesmal allerdings innerhalb der Bühne, also des sichtbaren Bereichs. Das Abprallen simulieren wir durch eine simple Umkehrung des Vorzeichens einer der Tempo-Variablen, wie Abbildung 96 zeigt – auch das kennen wir bereits aus einer der vorhergehenden Beispiele. Einer der Bühnenränder wird i. d. R. dadurch überschritten, dass sich die horizontale oder die vertikale Position andauernd ändert. Nehmen wir an, der Kreis bewege sich mit einer horizontalen Geschwindigkeit von 8 und einer vertikalen Geschwindigkeit von 6 bei einem Start in der Bühnenmitte. Überschreitet er den rechten Rand, dann geschieht das aufgrund der Addition eines positiven Wertes zur aktuellen xPosition. Um sich wieder zurück in Richtung Bühne

343

zu bewegen, müssen wir, wie oben schon öfters gesehen, lediglich das Vorzeichen derjenigen Variablen, die für die betreffende Bewegung verantwortlich ist, umkehren. Aus dem Wert 8 entsteht ein  –8, so dass eine Subtraktion anstelle der vorherigen Addition erfolgt. Da der y-Wert in diesem konkreten Fall keine Auswirkung auf das Erreichen der Grenzbedingung hat, bleibt die entsprechende Variable unverändert. Der Kreis setzt also seine Bewegung nach unten fort, aber nun horizontal Richtung linker Rand. Dadurch entsteht der Eindruck eines Abprallens, bei dem in simpelster Form Einfallswinkel und Ausfallswinkel einander entsprechen. Diese Bewegung wird mit dem hübschen englischen Begriff des bouncing off oder bouncing ball belegt. Sie wird gerne dann verwendet, wenn Sie einen roten Ball von schwarzen Wänden abprallen lassen möchten  – oder beispielsweise in Simulationen physikalisch überzeugender (aber nicht notwendigerweise korrekter) Bewegungsabläufe und in diversen Spielen wie Billard.

24.10.3 Screen wrap Wer seinem Kreis soviel Einschränkung des Lebensweges nicht zumuten möchte, findet in der dritten Variante, die einen endlos langen und endlos hohen Screen simuliert, eine Lösung. 1. Speichern Sie die vorhergehende Übung unter einem anderen Namen ab. 2. Ändern Sie innerhalb der Deklaration von bewegung() die if-Bedingungen wie folgt:  if (this._x>Stage.width+this._ width/2) {  this._x = -this._width/2;

 } else if (this._x<-this._width/2) {  this._x = Stage.width+this._ width/2;  }

 if (this._y>Stage.height+this._ height/2) {  this._y = -this._height/2;

 } else if (this._y<-this._height/2) {

Abbildung 96:  Abprallen am rechten Screenrand

 this._y = Stage.height-this._ height/2;  }

344

Der rote Kreis wird sich endlos mit unveränderter Geschwindigkeit fortbewegen. Sobald er einen Rand überschritten hat, taucht er auf der anderen Seite des Screens auf gleicher Höhe bzw. gleicher Breite wieder auf. Anders als zuvor muss der Kreis vollständig von der Bühne verschwinden, bevor wir seine Position neu setzen. Das entspricht der Grenzbedingung in der ersten Übung dieses Abschnitts, in der wir den Kreis löschten. Diesmal setzen wir ihn einfach auf die gegenüberliegende Seite. Sie entspricht am rechten Rand bei einem mittig angeordneten Registrierungspunkt einer negative halben Kreisbreite, am linken Rand der Bühnenbreite zuzüglich halbe Kreisbreite. Für die vertikale Position gilt dasselbe, nur in Bezug auf Bühnenhöhe bzw. Kreishöhe (die bei einem Kreis naturgemäß mit der Kreisbreite identisch ist). Das erweist sich nun zugegebenermaßen als nicht mehr ganz so spannend, denn anders als in der vorherigen Variante fehlt eine Bewegungsänderung. Einmal in eine Richtung angestoßen, täuscht der Kreis Bewegung in der Schwerelosigkeit vor, da keine Änderung der Tempovariablen mehr erfolgt. Daher eignet sich ein screen wrap am ehesten für interaktive Animationen, bei denen der Anwender Einfluss auf das Tempo nimmt. Häufig finden wir diese Form bei Steuerungen von Spielfiguren wie ein Raumschiff, das in top-down-Ansicht durch die endlosen Weiten eines digitalen Weltalls gleitet. Denkbar wären auch zusätzlich zufällige Bewegungsänderungen bei nichtinteraktiven Animationen, beispielsweise um ein scheinbar intelligent agierendes virtuelles Lebewesen zu simulieren.

24.10.4 Neue Zufallsposition In der vierten Variante erscheint das Objekt nach Verlassen der Bühne wieder an einer entweder anfangs definierten oder zufälligen Position, wobei sich das Tempo und gegebenenfalls auch die Bewegungsrichtung i. d. R. ändert. Je nach Einsatzzweck können sich auch weitere Eigenschaften wie die Deckkraft, Größe und Rotation zufallsbedingt ändern. 1. Speichern Sie die vorhergehende Übung unter einem anderen Namen ab.

Kapitel 24  Geskriptete Animationen

2. Ändern Sie die Deklaration von init() wie folgt:  function init():Void {

 mKreis = this. attachMovie(„mcKreis“, „kreis“, 1);  starten(nPosX,nPosY);  bewegung(mKreis);  }

3. Fügen Sie im Funktions-Block folgende Deklaration hinzu:  function starten(pPosX:Number, pPosY:Number):Void {  mKreis._x = pPosX;  mKreis._y = pPosY;

 nTempoX = zufallOhne(12, -3, 3);  nTempoY = zufallOhne(12, -3, 3);  }

4. Ändern Sie in der Deklaration von bewegung() die if-Bedingung:  if (this._x>Stage.width + this._ width/2 || this._x < -this._width/2 || this._y > Stage.height + this._ height/2 || this._y < -this._ height/2) {  starten(nPosX,nPosY);  }

Wie zuvor bewegt sich der Kreis mit einem Zufallstempo auf die Bühnenränder zu. Sobald er horizontal und/oder vertikal einen Rand überschritten hat, startet er in Bühnenmitte mit veränderten Geschwindigkeiten wieder von Neuem. Da wir das Starten wiederholen müssen, lagern wir die Definition der entsprechenden Bedingungen in eine eigene Funktion namens starten() aus, die in init() einmal aufgerufen wird. Dabei übergeben wir als Argument jeweils die gewünschte x- und yPosition des Kreises. Die zuvor in init() vorgenommene Ermittlung einer Zufallsgeschwindigkeit erfolgt nun ebenfalls in der Funktion starten(), die wir nach dem Beginn der Animation jedes Mal dann erneut aufrufen, wenn der Kreis einen Bühnenrand überschreitet. Diese Form der Animation haben Sie bereits oben im Abschnitt „Animation mit onEnterFrame und fester Schrittweite“ kennen gelernt.

25

Trigonometrie

Der eine oder andere mag an dieser Stelle zusammen zucken, gelten doch Mathematik und Physik als recht schwierige Angelegenheiten, denen die meisten schon als Schüler soweit irgend möglich aus dem Weg gegangen sind. In der Programmierung kommt man jedoch nicht ganz ohne derartiges Fachwissen aus. Denn erst deren Kenntnis ermöglicht ebenso interessante wie ausgefallene Effekte und Animationen. Dazu zählt beispielsweise das momentan ausgesprochen beliebte Karusselmenü und kreis- bzw. spiralförmige Animationen ebenso wie die physikalisch überzeugende Bewegung eines Fahrzeugs mit Beschleunigung und Abbremsen oder die in einem Spiel eingesetzte Kanonenkugel, deren Flugbahn bestimmten Gesetzmäßigkeiten unterliegt. Solange wir nicht gezwungen sind, eine physikalisch absolut korrekte Simulation zu erstellen, können wir uns mit realistisch anmutenden Näherungen begnügen, die auf insgesamt recht einfachen Formeln beruhen. Selbst von Schulphysik und -mathematik Geschädigte werden insofern leichten Zugang zur Materie finden.

25.1 Einige Grundlagen der planen Trigonometrie Die wichtigsten für uns relevanten Formeln stellt die plane oder ebene Trigonometrie zur Verfügung, soweit sie sich mit Dreiecken und dem Verhältnis von Seitenlängen und Winkelgrößen befasst. Am einfachsten gestaltet sich die Berechnung, wenn ein rechtswinkliges Dreieck wie Abbildung 97 verdeutlicht. In einem derartigen Fall beträgt der größte Innenwinkel 90  Grad, während die beiden übrigen Innenwinkel zusammen genommen ebenso 90  Grad ergeben. Die Summe der Innenwinkel entspricht somit immer 180  Grad. Die dem größten Innenwinkel gegenüberliegende Seite bezeichnet man als Hypotenuse, die übrigen als Katheten. Von einem der spitzen Innenwinkel (d. h. < 90 Grad) aus betrachtet, stellt die angrenzende Seite die Ankathete, die gegenüberliegende die Gegenkathete dar. Zwischen diesen Seiten und Winkeln existiert eine ganz spezifische Beziehung, die es uns ermöglicht, die benötigten Werte zu errechnen. Wollen wir beispielsweise die Länge der Hypotenuse herausfinden, hilft der Satz des Pythagoras weiter, der den meisten noch dunkel im Gedächt-

Abbildung 97:  Rechtwinkliges Dreieck A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

345

346

Kapitel 25  Trigonometrie

Abbildung  99:  Trigonometrische Funktionen und Kreisberechnung Abbildung 98:  Abstandsmessung zwischen zwei beliebigen Punkten und der Satz des Pythagoras

nis haften dürfte als a2 + b2 = c2. In beredter Prosa bedeutet dies: Addiert man das Quadrat der beiden Katheten, erhält man das Quadrat der Hypotenuse. Berechnet man die Wurzel der Summe, erhält man die Länge der Hypotenuse. Sie entspricht dem Abstand zwischen zwei beliebigen Punkten. Die trigonometrischen Funktionen Sinus, Cosinus und Tangens erfassen ebenfalls wichtige Verhältnisse zwischen Seitenlängen und Winkelgrößen. Sie ermöglichen es u. a., die exakte Position beliebiger Punkte auf einem Kreis zu bestimmen. Dabei gilt: Sinus Winkel = Gegenkathete/Hypotenuse Cosinus Winkel = Ankathete/Hypotenuse Tangens Winkel = Gegenkathete/Ankathete Sind in einer der Gleichungen zwei Werte bekannt, lässt sich der dritte einfach ermitteln. Jeder Punkt auf einem Kreis lässt sich beschreiben, indem wir ihn als Eckpunkt eines rechtwinkligen Dreiecks betrachten, wobei folgende Entsprechungen gelten: Ankathete = horizontaler Abstand a Gegenkathete = vertikaler Abstand b Hypotenuse = Kreisradius c Winkel = Drehwinkel d

Um also beispielsweise die Position des Punktes e in Abbildung 99 feststellen zu können, müssten bei gegebenem Drehwinkel und Kreisradius diese Berechnungen durchgeführt werden: Gegenkathete = Sinus Winkel * Hypotenuse Ankathete = Cosinus Winkel * Hypotenuse Beziehungsweise: Vertikaler Abstand = Sinus Drehwinkel * Kreisradius Horizontaler Abstand = Cosinus Drehwinkel * Kreisradius Wir erhalten diese Berechnung durch Umstellung der ursprünglichen Formeln, indem wir beide Seiten der Gleichungen jeweils mit der Hypotenuse multiplizieren. Da die Position eines Punktes in einem zweidimensionalen Raum durch zwei Werte bestimmt wird, müssen wir auch zwei Berechnungen, nämlich eine für die horizontale und eine für die vertikale Position durchführen. Entscheidend für eine korrekte Darstellung der Position ist neben obiger Berechnung das Koordinatensystem, auf das man sich bezieht. Da gibt es nämlich Unterschiede zwischen Flash und dem System, in dem die trigonometrischen Funktionen gelten. Sie

25.2  Abstände zwischen Objekten

347 Abbildung 100:  Der Einheitskreis

lassen sich am besten anhand des Einheitskreises verdeutlichen, den Abbildung 100 zeigt. Der Einheitskreis ist ein idealtypischer Kreis mit dem Radius 1, wobei die konkrete Maßeinheit unerheblich ist. Alle Eigenschaften des Einheitskreises gelten unabhängig davon, ob der Radius nun 1 Kilometer, 75 Zentimeter oder 12 Mikrometer beträgt. Die Drehung des Kreises wird ausgehend von der x-Achse entgegen dem Uhrzeigersinn in Grad angegeben, wobei eine Volldrehung 360 Grad umfasst. Die Nullstellung entspricht einer Ausrichtung nach rechts. In Flash dagegen erfolgt eine Drehung im Uhrzeigersinn und die Nullstellung entspricht derjenigen Position, die das betreffende Objekt beim erstmaligen Einfügen auf der Bühne einnimmt. Zur Winkelberechnung verwendet Flash das Bogenmaß mit der Hilfsmaßeinheit Radiant; lediglich die Eigenschaft _rotation arbeitet wie gewohnt mit Grad. Die Umrechnung zwischen beiden Maßeinheiten erfolgt einfach mit:

25.2 Abstände zwischen Objekten Wie wir gesehen haben, kann man mit Hilfe des Satzes des Pythagoras die Entfernung zwischen zwei beliebigen Punkten ermitteln. Im folgenden Beispiel wollen wir zwei Objekte zufallsbedingt auf der Bühne einfügen. Das erste Objekt kann gezogen werden und gibt während der Bewegung die Entfernung zum zweiten Objekt aus. 1. Erstellen Sie eine Standarddatei. 2. Erzeugen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcKugel). 3. Zeichnen Sie einen Kreis mit radialem Farbverlauf (beliebige Farben, Größe 30 × 30). 4. Positionieren Sie ihn auf –15,–15, so dass sich der Registrierungspunkt exakt in der Mitte der Grafik befindet.

Grad = Radiant * (180/PI) Radiant = Grad * (PI/180) Bei den bisherigen trigonometrischen Funktionen haben wir den Winkel als bekannt angenommen und nach einer Seitenlänge gesucht. Trifft jedoch der umgekehrte Fall zu und wir wollen bei gegebener Seitenlänge einen Winkel ermitteln, können wir die inversen trigonometrischen Funktionen verwenden. Das alles klingt noch recht abstrakt, weswegen wir uns in den folgenden Abschnitten einige konkrete Umsetzungen in Flash anschauen wollen.

Abbildung 101:  Abstandsmessung zwischen MovieClips

348

5. Kehren Sie zur Hauptzeitleiste zurück. 6. Fügen Sie in actions folgendes Bildskript ein:  //------------- vars –--------------  var bBewegung:Boolean = false;

 //----------- functions –-----------  function init() {

 this.attachMovie(„mcKugel“, „kugel1“, this.getNextHighestDepth());  this.attachMovie(„mcKugel“, „kugel2“, this.getNextHighestDepth());  kugel1._x = kugel2._x=Stage. width/2;  kugel1._y = kugel2._y=Stage. height/2;

 kugel2.onPress = function() {  this.startDrag();  bBewegung = true; };

 kugel2.onRelease = kugel2. onReleaseOutside=function () {  this.stopDrag();

 bBewegung = false; };

 kugel2.onMouseMove = function() {  if (bBewegung) {

 var nEntfX:Number = kugel1._xthis._x;  var nEntfY:Number = kugel1._ythis._y;  var nEntfernung:Number = Math. sqrt((nEntfX*nEntfX)+(nEntfY*n EntfY));

 trace(Math.round(nEntfernung)); } };  }

Kapitel 25  Trigonometrie

initialisieren wir die Variable mit dem Wert false. Die init()-Funktion fügt zwei Kugeln ein und weist der zweiten ein Zieh-Verhalten zu. Die Kugeln werden aus der Bibliothek der Einfachheit halber exakt in Bühnenmitte eingefügt. Alternativ können Sie auch mit Zufallswerten arbeiten. Beide Kugeln liegen exakt übereinander. Die zweite Kugel erhält ein onPress-Ereignis, das die startDrag()-Methode aufruft, also ein Ziehen der Kugel erlaubt, und das die erwähnte Variable auf true setzt. Im korrespondierenden onRelease- bzw. onReleaseOutside-Ereignis beenden wir das Ziehen und weisen der Variablen wieder den Ausgangswert false zu. Die Entfernungsmessung findet im onMouseMoveEreignis statt, vorausgesetzt, die Variable bBewegung beinhaltet den Wert true. Denn nur dann liegt ja eine Bewegung vor, die zu einer Änderung der Entfernung führt. Ist sie dagegen false, hat der Anwender nicht auf die Kugel gedrückt. In dem Fall eine Berechnung durchzuführen, wäre unsinnig. Um den bestehenden Abstand korrekt zu ermitteln, müssen wir in Gedanken die Entfernung als Hypotenuse in einem rechtwinkligen Dreieck betrachten. Dann entsprechen die beiden Katheten der horizontalen und vertikalen Entfernung, die wir in den beiden lokalen Variablen nEntfX und nEntfY erfassen. Dabei spielt es keine Rolle, ob sie einen positiven oder negativen Wert enthalten, denn die nachfolgende Berechnung resultiert infolge der Multiplikation in jedem Fall in einer positiven Zahl, aus der wir gemäß der Formel des Pythagoras nur die Wurzel ziehen müssen, um die gewünschte Entfernung zu erhalten. Mit dem seit Flash zur Verfügung stehenden geomPackage gestaltet sich die Berechnung sogar noch einfacher, denn dort ist bereits eine entsprechende Methode vorhanden. 7. Fügen Sie am Beginn des Scripts ein:

 //-------------- start –-------------

 //---------–- import –---------------

init();

 import flash.geom.*;

Wenn Sie mit gedrückter Maustaste eine Kugel ziehen, sehen Sie im Nachrichtenfenster den aktuellen Abstand zu der in der Bühnenmitte verbleibenden Kugel. Wir richten zunächst eine Variable ein, in der wir mit Hilfe einer Boolean speichern wollen, ob eine Kugel gezogen wird. Da das anfangs nicht der Fall ist,

8. Ersetzen Sie im onMouseMove-Ereignis in der Bedingung die ersten drei Zeilen durch:  var nPunkt1:Point = new Point(kugel1._x, kugel1._y);  var nPunkt2:Point = new Point(this._x, this._y);

25.3  Kreise und Ellipsen

349

 var nEntfernung:Number = Point. distance(nPunkt1, nPunkt2);

 mKreis.lineTo(xPos, yPos);

Zwar ergibt sich beim Testen optisch kein Unterschied, aber anstelle der vorherigen Formel verwenden wir eine vorgegebene Methode, die nach dem gleichen Prinzip eine Entfernung bestimmt. Wir benötigen zunächst Zugriff auf die Point-Klasse, die über das geom-Package importiert wird. Innerhalb des onMouseMove-Ereignisses übergeben wir mit nPunkt1 und nPunkt2 Anfangs- und Endpunkt der gedachten Hypotenuse an die distance()-Methode und erhalten wie zuvor als Ergebnis die Entfernung.

}

25.3 Kreise und Ellipsen Zur Kreisberechnung stehen uns die Cosinus- und Sinus-Funktionen zur Verfügung, auf die wir mit Hilfe der Math-Klasse zugreifen können. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  //-------------- vars –-------------  var mKreis:MovieClip;  var nWinkel = 0;

 var nRadius:Number = 100;

 var nSchritte:Number = 20;

 var nWinkelDist:Number = 360/ nSchritte;

 //------------ functions –----------  function init():Void {

 var xPos:Number, yPos:Number;

 mKreis = this.createEmptyMovieClip („behKreis“, this.getNextHighest­ Depth());  mKreis.lineStyle(1, 0 × 000000, 100);

 mKreis.moveTo(Math. cos(nWinkel*(Math.PI/180))*nRadius, Math.sin(nWinkel*(Math. PI/180))*nRadius);  for (var i = 0; i
 xPos = Math.cos(nWinkel*(Math. PI/180))*nRadius;  yPos = Math.sin(nWinkel*(Math. PI/180))*nRadius;

}

 //-------------- aufruf –-----------  init();

In der linken oberen Ecke taucht eine Art Viertelkreis auf, wenn Sie testen. Im Variablen-Block definieren wir einen Behälter zur Aufnahme der Kreiszeichnung, den mit 0 als Startwert initialisierten Winkel, den Kreisradius, die Anzahl der Zeichenschritte sowie die sich daraus ergebende Differenz zwischen den Winkelgrößen pro Zeichenschritt. Je mehr Schritte wir verwenden, um einen Kreis zu zeichnen, desto kleiner wird der Unterschied zwischen den Winkelgrößen und desto runder erscheint der Kreis. Die init()-Funktion legt zwei lokale Variablen zur Aufnahme der horizontalen und vertikalen Position imaginärer Kreispunkte auf und richtet einen leeren Behälter für die Zeichnung ein. Damit wir überhaupt etwas sehen können, definieren wir einen simplen Linienstil, bestehend aus einer Dicke von 1 Pixel, der Farbe Schwarz und einer Deckkraft von 100 %. Um die Zeichnung nicht im Kreismittelpunkt, sondern an der Position eines Kreispunktes beginnen zu lassen, setzen wir den virtuellen Zeichenstift durch moveTo() auf den Wert, der einem Ausgangswinkel von 0 Grad entspricht. Für die horizontale Position dieses Punktes benötigen wir, wie oben gesehen, die Cosinus-Funktion, für die vertikale die Sinus-Funktion. Zusätzlich muss aufgrund der verschiedenen Maßeinheiten eine Umrechnung von Grad (Angabe des Winkels) in Radiant (Berechnung in Flash) erfolgen, was durch die Multiplikation mit Math.PI/180 geschieht. Die for-Schleife zeichnet anschließend so oft Linien von einem errechneten Kreispunkt zum nächsten, wie in der Variablen nSchritte festgelegt. Damit überhaupt ein neuer Kreispunkt ermittelt werden kann, müssen wir natürlich den Winkel sukzessive erhöhen, was durch die Addition der anfangs errechneten Winkeldifferenz geschieht. In unserem konkreten Beispiel beträgt diese Differenz 18, so dass jeder Kreispunkt gegenüber dem vorhergehenden um 18 Grad im Uhrzeigersinn verschoben wird. Da dieser Wert recht groß ist, entstehen deutliche Kanten, die wir später noch korrigieren müssen. Die Positionierung des Kreises in der linken oberen Ecke überzeugt nicht wirklich. Sie hängt vom Ko-

350

ordinatenursprung desjenigen Objekts ab, in dem der Kreis erzeugt wird. Da es sich dabei in unserem Fall um einen MovieClip handelt, der von Flash aufgrund fehlender Positionsangaben beim Erstellen automatisch in die linke obere Ecke verfrachtet wird, befindet sich an derselben Stelle auch der Kreismittelpunkt. Korrigieren lässt sich das durch eine Verschiebung des MovieClips oder durch eine bei der Berechnung der Position einzelner Kreispunkte erfolgende Addition eines entsprechenden Wertes. 3. Fügen Sie in der init()-Funktion unmittelbar nach der Initialisierung von mKreis ein:  mKreis._x = Stage.width/2;

 mKreis._y = Stage.height/2;

Nun zeichnet Flash den Kreis in der Bühnenmitte, so dass er vollständig zu sehen ist. Wir erreichen dies, indem wir einfach den neu erzeugten MovieClip in der Bühnenmitte platzieren. Den gleichen Effekt erzielen Sie mittels der erwähnten Addition, bei der auf die erwähnte Positionierung von mKreis verzichtet wird. Dann wären mehrere Ergänzungen notwendig (Fettdruck). Im Variablen-Block: var nMitteX:Number = Stage.width/2;

var nMitteY:Number = Stage.height/2;

In init() vor der Schleife: mKreis.moveTo(Math.cos(nWinkel*(Math. PI/180))*nRadius+nMitteX, Math.sin(nWinkel*(Math. PI/180))*nRadius+nMitteY);

In init() innerhalb der Schleife: xPos = Math.cos(nWinkel*(Math. PI/180))*nRadius+nMitteX; yPos = Math.sin(nWinkel*(Math. PI/180))*nRadius+nMitteY;

Zunächst legen wir die gewünschten Werte fest, um die unser Kreis verschoben werden soll. Anschließend addieren wir sie an jeder Stelle, an der eine Berechnung der Kreispunkte erfolgt. Diese Variante ist allerdings umständlicher als die vorhergehende und wird nur dann benötigt, wenn aus bestimmten Gründen eine Positionierung des Kreisbehälters nicht möglich ist. Wir wollen im folgenden mit der erstgenannten Variante weiter arbeiten.

Kapitel 25  Trigonometrie

Unser Kreis macht noch einen recht kantigen Eindruck. 4. Ändern Sie die Initialisierung der Schrittanzahl im Variablen-Block (Fettdruck): var nSchritte:Number = 120;

Flash zeichnet einen stärker gerundeten Kreis. Gegenüber vorher verwenden wir sechsmal so viele Einzelschritte, um den Kreis zu zeichnen. Dadurch reduziert sich die Differenz zwischen den Winkeln pro Einzelschritt von 18 Grad auf nur noch 3 Grad. Der Kreis erscheint angenehm rund – jedenfalls reicht das erzielte Ergebnis aus, um zu überzeugen. Soll sich der Kreis animiert aufbauen, muss anstelle der Schleife ein permanentes Ereignis oder ein setInterval() verwendet werden. 5. Ersetzen Sie die for-Schleife vollständig durch:  mKreis.onEnterFrame = function() {  nWinkel += nWinkelDist;

 xPos = Math.cos(nWinkel*(Math. PI/180))*nRadius;  yPos = Math.sin(nWinkel*(Math. PI/180))*nRadius;  mKreis.lineTo(xPos, yPos);  if (nWinkel>=360) {

 trace(„habefertisch“);

 delete this.onEnterFrame; }  };

Beginnend in der Nullposition baut sich im Uhrzeigersinn ein Kreis auf. Mit minimalen Änderungen realisieren wir hier einen animierten Kreis. In jedem onEnterFrameEreignis wird eine Linie von einem Kreispunkt zum nächsten gezeichnet. Berechnen und Zeichnen entsprechen dabei dem Code, der zuvor verwendet wurde. Nur die Ende-Bedingung unterscheidet sich: Wir greifen nicht mehr auf die Variable nSchritte zurück, sondern kontrollieren statt dessen jeweils den aktuellen Winkel. Entspricht er einer Drehung von 360 Grad, wissen wir, dass der Kreis vollständig gezeichnet wurde und das onEnterFrame-Ereignis kann gelöscht werden. Um eine Ellipse zu erhalten, reicht es aus, im bestehenden Code mit zwei verschiedenen Radii zu ar-

25.4  Spiralen

beiten, denn die Ellipse ist nichts weiter als ein gestauchter Kreis. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu (Änderungen gegenüber der nicht animierten Kreisversion in Fettdruck):  //-------------- vars –-------------  var mKreis:MovieClip;

351

wir nun im Variablen-Block jeweils eine Variable für den horizontalen und eine für den vertikalen Abstand fest. Sie wird jeweils bei der Berechnung von Sinus und Cosinus verwendet. Die größte Ausdehnung in horizontaler Richtung entspricht nRadiusX und wird erreicht, wenn die Berechnung von Sinus 0 ergibt und die größte Ausdehnung in vertikaler Richtung ist mit nRadiusY bei einem Cosinus-Wert von 0 identisch.

 var nWinkel = 0;

 var nRadiusX:Number = 100;

25.4 Spiralen

 var nSchritte:Number = 120;

 mKreis._x = Stage.width/2;

Aus diesen Beispielen lässt sich recht leicht eine Spirale zeichnen bzw. ein Objekt spiralförmig animieren. Wir wollen uns dabei mit einer simplen Variante begnügen, die Strichlänge und Tempo nicht unabhängig voneinander behandelt. Das reicht aus, um das Prinzip einer derartigen Animation zu verstehen. Im Unterschied zum Kreis erhöht sich bei der Spirale der Radius permanent, so dass die Kreisbahn immer weiter nach außen verzogen wird. Der Radius kann linear oder exponentiell verändert werden, je nachdem, wie stark der gewünschte Effekt auftreten soll.

 mKreis.lineStyle(1, 0 × 000000, 100);

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:

 var nRadiusY:Number = 60;

 var nWinkelDist:Number = 360/ nSchritte;

 //------------- functions –---------  function init():Void {

 var xPos:Number, yPos:Number;

 mKreis = this.createEmptyMovieClip („behKreis“, this.getNextHighest­ Depth());  mKreis._y = Stage.height/2;

 mKreis.moveTo(Math. cos(nWinkel*(Math. PI/180))*nRadiusX, Math. sin(nWinkel*(Math. PI/180))*nRadiusY);

 //-------------- vars –--------------

 nWinkel += nWinkelDist;

Die Variable mSpirale nimmt eine Referenz auf den MovieClip auf, in dem wir zeichnen wollen. In nWinkel legen wir den Startwinkel und in nRadius den Startradius fest. Mit nWinkelTempo definieren wir einen Wert, um den bei jedem Zeichenvorgang der in der Berechnung verwendete Winkel erhöht wird. Da er einem fixen Wert entspricht, wird die Spirale mit wachsendem Radius kantiger. Im vorhergehenden Abschnitt über Kreise und Ellipsen haben wir diesen Wert aus der Gesamtanzahl an Zeichenschritten errechnet.

 for (var i = 0; i
 //-------------- aufruf –-----------  init();

Flash zeichnet eine 100 Pixel breite und 60 Pixel hohe Ellipse. Das Prinzip entspricht demjenigen, das wir bereits beim Kreis kennen gelernt haben. Allerdings legen

 var mSpirale:MovieClip;  var nWinkel:Number = 0;  var nRadius:Number = 5;

 var nWinkelTempo:Number = 8;

3. Erweitern Sie das Skript um einen Funktionsblock:  //------------- functions –---------  function init():Void {

352

Kapitel 25  Trigonometrie

 mSpirale = this.createEmptyMovie­ Clip(„behSpirale“, this.getNextHighestDepth());  mSpirale._x = Stage.width/2;

 mSpirale._y = Stage.height/2;

 mSpirale.lineStyle(2, 0 × 000000, 100);

 mSpirale.moveTo(Math. cos(nWinkel*Math.PI/180)*nRadius, Math.sin(nWinkel*Math. PI/180)*nRadius);  }

In der Funktion init() wird zunächst der Zeichenvorgang vorbereitet. Dazu gehört das Erstellen eines leeren MovieClips als Behälter, den wir der Einfachheit halber exakt in der Bühnenmitte positionieren. Um die Funktion variabler zu halten, können Sie die gewünschten Werte auch als Parameter definieren, die beim Aufruf übergeben werden. Als Linienstil wählen wir eine Stärke von einem Pixel, schwarz und eine Deckkraft von 100 %. In der folgenden Zeile wird der virtuelle Zeichenstift auf eine Anfangsposition gesetzt, die einem Punkt auf einem gedachten Kreis mit dem im Variablenblock definierten Radius und einem Winkel von 0 Grad entspricht. Dieser Punkt befindet sich horizontal rechts neben dem Koordinatenursprung von mSpirale. 4. Erweitern Sie die Funktion init():  mSpirale.onEnterFrame = function() {  nWinkel += nWinkelTempo;

 this.lineTo(Math. cos(nWinkel*Math.PI/180)*nRadius, Math.sin(nWinkel*Math. PI/180)*nRadius);

Abbildung 102:  Spirale mit linear anwachsendem Radius

• Der für den Kreis verwendete Winkel um den Wert

erhöht wird, den wir im Variablenblock festgelegt haben. Je höher dieser Wert, desto eckiger sieht der resultierende Kreis aus, da nun ein größerer Abstand zwischen den per Linie verbundenen Kreispunkten entsteht. Gleichzeitig erhöht sich das Tempo der Animation, da pro vollständiger Kreisdrehung weniger Zeichenprozesse ausgeführt werden müssen; • Eine Linie vom vorhergehenden zu einem neu errechneten Punkt auf einem gedachten Kreis gezeichnet wird; • Der Kreisradius inkrementiert wird. Dadurch rutscht jeder neu errechnete Punkt immer weiter nach außen, so dass die für eine Spirale typische Öffnung eines Kreises entsteht. Je höher der Wert, um den Sie nRadius verändern, desto mehr Raum nimmt die Spirale ein.

5. Fügen Sie einen Aufruf ein:

Wollen Sie das Tempo der Animation anpassen, dann verwenden Sie am einfachsten ein setInterval(), wie an anderer Stelle gezeigt. Momentan ändert sich der Radius linear, was sich leicht anhand der Werte, die die betreffende Variable annimmt, überprüfen lässt.

 //------------- aufruf –-------------

6. Fügen Sie nach dem Inkrement von nRadius ein:

 nRadius++;  };

 init();

Beim Testen entsteht eine sich ins Endlose ausdehnende Spirale. Durch den Aufruf von init() erhält der erstellte Behälter für die Zeichnung ein onEnterFrame-Ereignis, in dem permanent:

trace(nRadius);

Beispielhafte Ausgabe im Nachrichtenfenster: 41 42 43 44 45

25.4  Spiralen

353

9. Ändern Sie die Initialisierung von nRadiusFaktor (Fettdruck): var nRadiusFaktor:Number = 1.05;

Ausgabe im Nachrichtenfenster: 5 5.25 5.5125 5.788125 6.07753125 6.3814078125 6.700478203125 7.03550211328125 Abbildung 103:  Spirale mit exponentiell anwachsendem Radius

Der erste Wert, den wir erhalten, entspricht dem Ergebnis des erstmaligen Inkrements von nRadius. Um einen exponentiellen Anstieg zu erhalten, muss sich die Differenz zwischen zwei Werten von nRadius sukzessive steigern. 7. Fügen Sie im Variablenblock folgende Initialisierung ein: var nRadiusFaktor:Number = 1.01;

8. Ersetzen Sie das Inkrement von nRadius durch: nRadius *= nRadiusFaktor;

Beim Testen ergibt sich nun ein anderes Bild: Der Radius wächst erheblich langsamer als zuvor, aber nach außen hin erhöht sich der Abstand der Kreise voneinander. Im Nachrichtenfenster zeigen sich folgende Werte: 5 5.05 5.1005 5.151505 5.20302005 5.2550502505 5.307600753005 5.36067676053505 Die Differenz zwischen den einzelnen Werten beträgt nun nicht mehr einfach 1, sondern hängt davon ab, welchen Wert nRadius zum Zeitpunkt der Berechnung hatte. Deutlicher werden die Unterschiede, wenn wir für den Faktor einen etwas höheren Wert wählen.

Die Differenz zwischen den beiden ersten Werten beträgt ca. 0.25, diejenige zwischen den beiden letzten dagegen schon mehr als 0.33. Auch wenn das sehr wenig zu sein scheint, so sehen Sie doch, wie stark die Animation geändert wird, denn auf dem Bildschirm können wir nur noch wenige Drehungen erkennen, bevor die Linien den Rand überschreiten. 10. Setzen Sie nRadiusFaktor auf den ursprünglichen Wert von 1.01 zurück. 11. Löschen Sie die trace()-Anweisung, da sie nicht mehr benötigt wird. Problematisch ist momentan die Tatsache, dass die Animation nicht stoppt. Selbst dann, wenn die Spirale den kompletten Screen ausfüllt und wir keine Änderung mehr wahrnehmen können, läuft sie im Hintergrund weiter. Daher müssen wir eine Abbruchbedingung definieren, sinnvollerweise in Form der maximalen Anzahl der vollständigen Kreisbewegungen, die unsere Spirale vollführen soll. Das wäre in der bisherigen Form mit Hilfe einer Variablen möglich oder alternativ per Parameter. 12. Erweitern Sie die init()-Funktion um die Deklaration eines Parameters (Fettdruck): function init(pKreise:Number):Void {

13. Fügen Sie innerhalb des onEnterFrame-Ereignisses unmittelbar vor der Änderung von nRadius ein: if (nWinkel%(pKreise*360) == 0) {  trace(„habefertisch“);

 delete this.onEnterFrame; }

354

14. Erweitern Sie den Aufruf von init() um die Übergabe eines Parameters (Fettdruck): init(5);

Flash zeichnet nun eine Spirale, die genau 5 Kreisumdrehungen umfasst. Sie endet horizontal auf derselben Höhe, auf der sie begonnen hat, also rechts vom Koordinatenursprung des Zeichnungsbehälters. Die Anzahl der erfolgten Umdrehungen lässt sich sehr einfach über den Restwert einer Division ermitteln. Eine Umdrehung umfasst 360  Grad. Beispielsweise 5 Umdrehungen entsprechen dem 5-fachen dieses Wertes, also 1800. Nun sind einem anständigen Kreis 1800 Grad zwar eher suspekt, aber wir verwenden mit nWinkel eine Variable, die jeden beliebigen ganzzahligen Wert größer 0 annehmen kann. Dividieren wir ihren aktuellen Wert durch 360, können wir ermitteln, wie viele Drehungen bereits vorliegen. Da uns nur vollständige Kreise interessieren, reicht es, herauszufinden, ob besagte Division einen Restwert von 0 besitzt. Nur wenn das der Fall ist, erfolgte eine Drehung um 360 Grad. Bei 5 Umdrehungen müssen wir also nur testen, ob unsere Division durch 5 * 360 einen derartigen Wert ergibt. Allerdings müssen wir beachten, dass nWinkelTempo einen Wert annimmt, durch den sich 360 ebenfalls mit einem Restwert von 0 dividieren lässt. Andernfalls nämlich erreichen wir nie exakt den gewünschten Wert von 1800 und unsere Animation läuft endlos weiter wie bisher. Die if-Bedingung kontrolliert also die Anzahl der Umdrehungen. Sobald der vorgegebene Wert erreicht wird, löschen wir das onEnterFrame-Ereignis und stoppen damit faktisch die Animation. Die trace()Anweisung wird hier nur als Stellvertreter für eine beliebige Funktion verwendet, die Sie nun ausführen möchten. Soll sich die Spirale nicht animiert aufbauen, sondern direkt angezeigt werden, benötigen Sie eine Schleife anstelle des onEnterFrame-Ereignisses. Das Setzen der Startposition in der Zeile vor diesem Ereignis entfällt dann. Die Spirale lässt sich leicht mit einer Ellipse kombinieren, wenn Sie einen horizontalen und vertikalen Radius definieren, die jeweils mit verschiedenen Werten starten. Beide können innerhalb des onEnterFrame-Ereignisses wie bisher mit demselben Faktor multipliziert werden.

Kapitel 25  Trigonometrie

25.5 Code //-------------- vars –-------------var mSpirale:MovieClip; var nWinkel:Number = 0; var nRadius:Number = 5;

var nWinkelTempo:Number = 8;

var nRadiusFaktor:Number = 1.01;

//------------ functions –------------function init(pKreise:Number):Void {

 mSpirale = this.createEmptyMovieClip („behSpirale“, this.getNextHighest­ Depth());  mSpirale._x = Stage.width/2;

 mSpirale._y = Stage.height/2;

 mSpirale.lineStyle(1, 0xffff66, 100);  mSpirale.moveTo(Math. cos(nWinkel*Math.PI/180)*nRadius, Math.sin(nWinkel*Math. PI/180)*nRadius);

 mSpirale.onEnterFrame = function() {  nWinkel += nWinkelTempo;

 this.lineTo(Math.cos(nWinkel*Math. PI/180)*nRadius, Math. sin(nWinkel*Math.PI/180)*nRadius);  if (nWinkel%(pKreise*360) == 0) {  trace(„habefertisch“);

 delete this.onEnterFrame; }

//nRadius++;

 nRadius *= nRadiusFaktor; }; }

//-------------- aufruf –-------------– init(5);

25.6 Spiralförmige Animation eines Objekts Darauf aufbauend lässt sich leicht ein Objekt entlang eines spiralförmigen Pfades animieren. Der Pfad entspricht einem gedachten Kreis, der in der gleichen

25.6  Spiralförmige Animation eines Objekts

355

sierung wird im Fall von nRadius mit einem höheren Wert vorgenommen, da sich die Rakete aufgrund eines zu kleinen Radius’ ansonsten anfangs scheinbar im Kreis dreht. Die trigonometrischen Funktionen beziehen sich auf den Koordinatenursprung, wir wollen jedoch die Animation in der Screenmitte beginnen lassen. Daher halten wir den zu berücksichtigenden Abstand in den beiden Variablen nXPos und nYPos fest. 6. Erweitern Sie den Code um einen Funktionsblock und einen Aufruf: Abbildung 104:  Spiralförmig zu animierende Rakete

Weise errechnet wird wie im vorhergehenden Beispiel. Hier verwenden wir die Version mit der exponentiellen Änderung von nRadius. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie eine beliebige Grafik mit relativ kleinen Ausmaßen. Da wir einen Raketenflug im Uhrzeigersinn darstellen und mit einer Drehung von 0 Grad beginnen wollen, muss Ihr Objekt vertikal nach unten ausgerichtet sein. Bei dem zu animierenden Objekt begnügen wir uns beispielhaft mit einem einfachen Flugkörper, der etwa so aussehen könnte wie in Abbildung 104 zu sehen. 3. Wandeln Sie die Grafik in einen MovieClip um (Registrierungspunkt horizontal und vertikal mittig, Bibliotheksname mcRakete, Verknüpfungsname mcRakete). 4. Löschen Sie den MovieClip aus der Hauptzeitleiste, da er später per Skript eingefügt wird. 5. Weisen Sie actions folgendes Bildskript zu:

 //------------ functions –----------  function init(pKreise:Number):Void {  mRakete = this. attachMovie(„mcRakete“, „rakete“, this.getNextHighestDepth());

 mRakete._x = Math.cos(nWinkel*Math. PI/180)*nRadius+nXPos;  mRakete._y = Math.sin(nWinkel*Math. PI/180)*nRadius+nYPos;  mRakete.onEnterFrame = function() {  nWinkel += nWinkelTempo;

 this._x = Math.cos(nWinkel*Math. PI/180)*nRadius+nXPos;  this._y = Math.sin(nWinkel*Math. PI/180)*nRadius+nYPos;  this._rotation = nWinkel;

 if (nWinkel%(pKreise*360) == 0) {  trace(„habefertisch“);

 delete this.onEnterFrame; }

 //-------------- vars –--------------

//nRadius++;

 var nWinkel:Number = 0;

};

 var nWinkelTempo:Number = 8;

 //------------–- aufruf –------------

 var mRakete:MovieClip;

 nRadius *= nRadiusFaktor;

 var nRadius:Number = 25;

 }

 var nRadiusFaktor:Number = 1.01;

 init(4);

 var nXPos:Number = Stage.width/2;

 var nYPos:Number = Stage.height/2;

Da wir die Spirale nicht zeichnen, benötigen wir auch keinen Behälter mehr. Statt dessen richten wir eine Variable ein, um das zu animierende Objekt zu referenzieren. Die übrigen Variablen entsprechen der vorhergehenden Funktionalität; lediglich die Initiali-

Beim Testen taucht die Rakete in Bühnenmitte auf und bewegt sich entlang einer unsichtbaren Spirale nach außen, bis sie nach vier Umdrehungen stoppt. In mRakete referenzieren wir den per attachMovie()-Methode eingefügten MovieClip. Er erhält eine Position, die dem Anfang unserer Spirale entspricht bzw. in der vorhergehenden Übung

356

Kapitel 25  Trigonometrie

 var nWinkelTempo:Number = 8;

 var nRadiusFaktor:Number = 1.01;

 var nXPos:Number = Stage.width/2;

 var nYPos:Number = Stage.height/2;

Wir benötigen sowohl für den Zeichenstift wie für die zu zeichnenden Spirale jeweils einen Behälter. Da wir diese Elemente nicht einfach auf _root einfügen wollen, wird eine dritte Variable zur Referenzierung eingerichtet. Sie dient als übergeordneter Behälter für alle visuell wahrnehmbaren Elemente. Die übrigen Variablen entsprechen der vorherigen Vorgehensweise. 5. Erweitern Sie das Skript:  //------------- functions –---------Abbildung 105:  Spiralförmig animierter Bleistift

dem ersten gezeichneten Punkt. Das anschließende onEnterFrame-Ereignis berechnet permanent einen neuen Kreispunkt, zu dem diesmal keine Linie gezeichnet, sondern an dessen Stelle unsere Rakete gesetzt wird. Deren Rotation entspricht dem für die Berechnung der Kreispunkte verwendeten Winkel. Alles andere erfolgt wie zuvor. Da wir den Code in nur zwei Einzelschritten vorgestellt haben, verzichten wir auf eine abschließende vollständige Auflistung an dieser Stelle. Die aktuelle und die vorhergehende Übung lassen sich natürlich kombinieren. So kann man anstelle des Raumschiffs einen Zeichenstift nehmen, der die Spirale scheinbar zeichnet. Da der prinzipielle Vorgang schon ausführlich erläutert wurde, begnügen wir uns hier mit einer kurzen Beschreibung.

 function init(pKreise:Number):Void {

 mZeich = this.createEmptyMovieClip („behZeichnung“, this.getNextHighestDepth());  mZeich._x = nXPos;  mZeich._y = nYPos;

 mSpirale = mZeich.createEmptyMovie Clip(„behSpirale“, mZeich.getNextHighestDepth());  mStift = mZeich. attachMovie(„mcStift“, „stift“, mZeich.getNextHighestDepth());

 mStift._x = Math.cos(nWinkel*Math. PI/180)*nRadius;  mStift._y = Math.sin(nWinkel*Math. PI/180)*nRadius;  mSpirale.lineStyle(1, 0xcccccc, 100);

1. Speichern Sie Ihre Datei mit der Rakete unter einem anderen Namen ab. 2. Ersetzen Sie die Rakete durch eine Grafik, die beispielsweise einen Bleistift zeigt, wie in Abbildung 105 zu sehen. 3. Weisen Sie der Grafik den Bibliotheksnamen mcStift und einen gleichlautenden Verknüpfungsnamen zu. 4. Weisen Sie actions folgendes Bildskript zu:

 mSpirale.moveTo(mStift._x, mStift._y);

 //--------------- vars –-------------

 mSpirale.lineTo(this._x, this._y);

 var mStift:MovieClip, mSpirale:MovieClip, mZeich:MovieClip;  var nWinkel:Number = 0;

 var nRadius:Number = 25;

 mStift.onEnterFrame = function() {  nWinkel += nWinkelTempo;

 this._x = Math.cos(nWinkel*Math. PI/180)*nRadius;  this._y = Math.sin(nWinkel*Math. PI/180)*nRadius; //this._rotation = nWinkel;

 if (nWinkel%(pKreise*360) == 0) {  trace(„habefertisch“);

 delete this.onEnterFrame;

25.7  Sinustäuschung

}

//nRadius++;

 nRadius *= nRadiusFaktor; };  }

 //-------------- aufruf –-----------  init(4);

Beim Testen taucht der Zeichenstift in der Bildmitte auf und zeichnet sukzessive die Spirale, bis er nach 4 Umdrehungen stoppt. Hier kombinieren wir schlicht die bisherigen Übungen zur Spirale. Nur die Erstellung des übergeordneten Behälters mZeich ist hinzugekommen, in dem wir sowohl mSpirale wie auch mStift ablegen. Da sich der Zeichenstift nicht mehr wie zuvor die Rakete drehen soll, haben wir die entsprechende Zeile auskommentiert, aber nicht gelöscht, so dass Sie gerne testen können, wie eine Animation mit rotierendem Stift in diesem Fall wirkt.

25.7 Sinustäuschung Abschließend zu den Funktionen Sinus und Cosinus wollen wir uns eine Sinuskurve anschauen, mit deren Hilfe sich eine optische Täuschung, die sogenannte Sinustäuschung von R. H. Day, realisieren lässt. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  //-------------- vars –-------------  var mSinus:MovieClip;

 var nWinkel:Number = 0;

 var nStartY:Number = Stage.height/2;  var nRadius:Number = 150;  var nTempoX:Number = 5;

 var nWinkelDif:Number = 5;

 //------------- functions –---------  function init() {

 var nPosX:Number = 0;  var nPosY:Number;

 mSinus = this.createEmptyMovieClip („behZeichnung“, this.getNextHighestDepth());

357

 mSinus._y = nStartY;

 mSinus.lineStyle(1, 0 × 000000, 100);

 mSinus.onEnterFrame = function() {  nPosY = Math.sin(nWinkel*(Math. PI/180))*nRadius;  this.lineTo(nPosX, nPosY);  nWinkel += nWinkelDif;  nPosX += nTempoX; }; }

//--------------- start –-----------  init();

Die Sinuskurve baut sich sukzessive auf. Im Variablen-Block legen wir wie gewohnt den Behälter für die Zeichnung fest und definieren folgende weitere Variablen:

• Startwinkel; • vertikale Position, an dem das Zeichnen beginnt; • Kreisradius in y-Richtung bzw. Amplitude; • horizontaler Abstand der einzelnen Punkte, die ein Liniensegment bilden;

• Wert, um den unser Winkel pro Zeichenschritt erhöht wird.

Die Funktion init() deklariert zwei Variablen, die zur Aufnahme der Punkte der Liniensegmente dienen. Während wir für die horizontale Position direkt den Wert 0 festlegen, um so am linken Rand beginnen zu können, wird der korrespondierende vertikale Wert später errechnet. Danach erstellen wir einen leeren MovieClip, referenzieren ihn in mSinus und positionieren ihn vertikal mittig. Horizontal liegt er auf 0, da wir keinen anderen Wert übergeben. Als Linienstil legen wir eine simple, 1 Pixel breite schwarze Linie fest. Das eigentliche Zeichnen findet in einem onEnterFrame-Ereignis statt, in dem wir die benötigte y-Position mit der bekannten Sinus-Funktion ermitteln. Anschließend zeichnen wir eine Linie von der aktuellen Position zu einem Punkt, der sich aus den in nPosX und nPosY befindlichen Koordinaten ergibt. Um im nächsten Durchlauf eine neue Position zu erhalten, addieren wir zum aktuellen Winkel nWinkelDif, was später die y-Position ändert, und zu nPosX die Variable nTempoX, wodurch die Kurve nach rechts verschoben wird.

358

Kapitel 25  Trigonometrie

Momentan zeichnet Flash permanent weiter, selbst, wenn die Kurve bereits längst den rechten Bildrand überschritten hat. 3. Erweitern Sie den Variablen-Block um:  var nMaxBreite:Number = Stage.width;

4. Fügen Sie innerhalb des onEnterFrame-Ereignisses unmittelbar vor dessen schließender Klammer ein:  if (this._width>=nMaxBreite) {  trace(„habefertisch!“);

 delete this.onEnterFrame; }

Erreicht die Kurve den rechten Bühnenrand, erhalten wir eine entsprechende Meldung und der Zeichenvorgang stoppt. Wir machen das Ende des Zeichnens einfach von der Breite der Bühne abhängig. Den gewünschten Wert speichern wir in einer Variablen und kontrollieren permanent nach dem Zeichnen eines Liniensegments, ob die gesamte Breite des übergeordneten Zeichenbehälters diesen Wert erreicht oder überschritten hat. Ist das der Fall, geben wir eine Meldung aus und löschen das für die Zeichnung verantwortliche Ereignis. Alternativ kann man auch die Anzahl der Amplituden vorgeben, wobei das gleiche Prinzip zum Tragen käme, das wir in der vorhergehenden Übung hinsichtlich der Anzahl der Umdrehungen einer Spirale kennen gelernt haben. Daraus lässt sich einfach die erwähnte optische Täuschung erstellen, die in Abbildung  106 zu sehen ist. In dieser Abbildung scheint es, als würden Linien verschiedener Länge gezeichnet. Tatsächlich sind jedoch alle Linien gleich lang. 5. Erweitern Sie den Variablen-Block um: var nHoehe:Number = 100;

6. Ersetzen Sie im onEnterFrame-Ereignis den Aufruf der lineTo()-Methode durch:  this.moveTo(nPosX, nPosY);

 this.lineTo(nPosX, nPosY+nHoehe);

Als Ergebnis erhalten Sie die in obiger Abbildung zu sehende Kurve. Dahinter steckt die einfache Überlegung, dass wir an jedem ermittelten Punkt eine vertikal ausgerichtete

Abbildung 106:  Sinustäuschung

Gerade von jeweils gleicher Länge zeichnen müssen. Zwischen den Punkten darf es keine Verbindungslinie mehr geben. Dazu initialisieren wir zuerst eine Variable mit der gewünschten Linienhöhe. Im on­ EnterFrame-Ereignis müssen wir nun nur noch den Zeichenstift jedes Mal auf den neu ermittelten Punkt setzen, ohne vom vorhergehenden Punkt bis dorthin zu zeichnen. Daher ersetzen wir das vorhergehende lineTo() durch ein moveTo(). An den betreffenden Punkten zeichnen wir dann vertikal nach unten mit Hilfe von lineTo() eine 100 Pixel lange Gerade und fertig ist unsere Sinnestäuschung. Je steiler die Kurve und je kürzer die Abstände zwischen den Linien, desto stärker tritt der Effekt hervor.

25.8 Drehung eines Objekts zu einem anderen Objekt An einem einfachen Beispiel wollen wir uns den umgekehrten Effekt, nämlich die Berechnung eines Winkels bei gegebenen Seiten, anschauen. Denn bei der Drehung zu einem Objekt liegen ja gerade die beiden Seiten bzw. Katheten als horizontale und vertikale Entfernung zum Ziel vor, während der benötigte Drehwinkel gesucht wird. In diesem Fall hilft eine umgekehrte trigonometrische Funktion, die Flash mit Math.atan2() zur Verfügung stellt. 1. Erstellen Sie eine Standarddatei. 2. Zeichnen Sie in der Bühnenmitte auf objects ein einfaches Fahrzeug in der Draufsicht (ca. 82 × 45).

25.8  Drehung eines Objekts zu einem anderen Objekt

Abbildung 107:  Ausrichtung des Fahrzeugs vor der Drehung zur Maus

Achten Sie darauf, dass Ihr Fahrzeug nach rechts ausgerichtet ist wie in Abbildung 107. 3. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcAuto, Instanzname auto, Registrierungspunkt mittig). 4. Weisen Sie actions folgendes Bildskript zu:  //------------ functions –----------  function init(){

 auto.onMouseMove = drehen;  auto.onMouseMove();  }

 function drehen() {

 var nXMouse:Number = _xmouse – this._x;  var nYMouse:Number = _ymouse – this._y;

 this._rotation = Math. atan2(nYMouse,nXMouse)*(180/Math. PI);

359

thete und die Ankathete erwartet. Wie wir aus obiger Diskussion wissen, handelt es sich dabei um den vertikalen und den horizontalen Abstand zwischen Zielpunkt und aktueller Position. Er wird jeweils für zwei Variablen berechnet und anschließend an die genannte Methode übergeben. Da der Arkustangens mit Radiant arbeitet, müssen wir in Grad umrechnen und weisen das Ergebnis, nämlich den gesuchten Drehwinkel, der Eigenschaft _rotation von auto zu. Beachten Sie die Reihenfolge der Parameter: Entgegen unserer Gewohnheit, zuerst den horizontalen, anschließend den vertikalen Wert zu übergeben, steht bei Math.atan2() der vertikale Abstand an erster Stelle, gefolgt vom horizontalen. Ebenfalls wichtig ist die Reihenfolge der Werte bei der Berechnung des Abstands. Es muss von der Zielposition die aktuelle Position abgezogen werden, also in unserem Beispiel _xmouse  – this._x. Kehren wir die Subtraktion um, dreht sich das Fahrzeug immer in die entgegen gesetzte Richtung, was zwar recht lustig ausschaut, aber nicht unbedingt unseren Wünschen entspricht. Last not least spielt die Ausrichtung der Grafik innerhalb von mcAuto eine Rolle. Da die Nulldrehung im Einheitskreis einer Ausrichtung nach rechts entspricht, müssen wir dementsprechend das Fahrzeug zeichnen. Würden wir statt dessen das Fahrzeug vertikal zeichnen, erhielten wir bei der Interaktion eine um 90 Grad versetzte Drehung. Das können Sie testen, indem Sie in mcAuto alles markieren und um 90  Grad drehen, so dass die Fahrzeugfront entweder nach oben oder unten zeigt.

 };

 //-------------- start –------------  init();

Beim Testen dreht sich das Auto in Richtung ihrer Maus. In der init()-Funktion definieren wir für auto ein onMouseMove-Ereignis, dem die Funktion drehen zugewiesen wird. Gleichzeitig lösen wir einmal dieses Ereignis aus, so dass die besagte Funktion bereits zum Einsatz kommt, bevor der Anwender die Maus bewegt hat. Dadurch erreichen wir, dass sich das Fahrzeug von Anfang an Richtung Mauszeiger dreht. Die Funktion drehen() richtet das Fahrzeug am Mauszeiger aus. Das geschieht mit Hilfe der Math. atan2()-Methode, die als Parameter die Gegenka-

Abbildung 108:  Veränderung des Schlagschattens per Maus

360

25.9 Interaktiver Schlagschatten Das letzte Beispiel kombiniert Abstandsmessung und Berechnung eines Winkels mit einem Filter-Effekt: Mit gedrückter Maustaste bestimmt der Anwender Größe und Ausrichtung eines Schlagschattens. In Abbildung  108 ist eine Phase dieses Effekts zu sehen. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek eine beliebige Grafik. Wir wählen hier beispielhaft erdhorn1.jpg. 3. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfung mcBild). 4. Fügen Sie dort die Grafik an der Position 0,0 ein, so dass sich der Registrierungspunkt in der linken oberen Ecke befindet. 5. Kehren Sie zur Hauptzeitleiste zurück. 6. Weisen Sie actions folgendes Bildskript zu:  //------------- import –------------  import flash.filters.*;

 //---------––––– vars –-------------  var fSchatten:DropShadowFilter;

 //------------ functions –-----------

Kapitel 25  Trigonometrie

In der Screenmitte taucht das von uns gewählte Bild auf, versehen mit einem leichten, nach rechts unten weisenden Schlagschatten. Wir importieren den benötigten Filter als Teil des filters-Packages und erzeugen eine Variable zur Referenzierung eines DropShadow-Filters. In der init()Funktion legen wir die Eigenschaften fest, die unser instanziiertes Filter-Objekt besitzen soll:

• Entfernung von 5 Pixel; • Winkel 0 Grad; • Farbe dunkles Grau; • Deckkraft 100 % (zur Erinnerung: Bei den Filtern

erstreckt sich der zulässige Wertebereich von 0.0 bis 1.0); • Horizontale und vertikale Weichzeichnung von 5 Pixel; • Stärke 2 (Wertebereich 0 bis 255); • Qualität 3 (Wertebereich 1 bis 3). Zwar verfügt der Schlagschatten-Filter noch über weitere Eigenschaften, die wir aber nicht setzen wollen, so dass sie mit den Standardwerten initialisiert werden. Anschließend fügen wir das Bild aus der Bibliothek ein, positionieren es horizontal und vertikal mittig und weisen ihm den zuvor definierten Filter zu.

 function init() {

7. Erweitern Sie den Variablen-Block:

 fSchatten.distance = 5;

 var nDifX:Number, nDifY:Number, nDif:Number;

 fSchatten.color = 0 × 333333;

 var aKlick:Array = [];

 fSchatten = new DropShadowFilter();  fSchatten.angle = 45;  fSchatten.alpha = 1;  fSchatten.blurX = 5;  fSchatten.blurY = 5;

 fSchatten.strength = 2;  fSchatten.quality = 3;

 this.attachMovie(„mcBild“, „bild“, this.getNextHighestDepth());  bild._x = Stage.width/2-bild._ width/2;

 bild._y = Stage.height/2-bild._ height/2;  bild.filters = [fSchatten];  }

 //-----------––– start –------------  init();

 var nFaktor:Number = 0.1;

8. Erweitern Sie die Deklaration von init() nach der Zuweisung des Filters:  bild.onPress = function() {

 aKlick = [_xmouse, _ymouse];  };

 bild.onMouseMove = schatten;

9. Erweitern Sie den Funktions-Block:  function schatten() {

 nDifX = _xmouse-aKlick[0];  nDifY = _ymouse-aKlick[1];

 nDif = Math.sqrt((nDifX*nDifX)+(nDi fY*nDifY));  fSchatten.angle = Math.atan2(nDifY, nDifX)*(180/Math.PI);

25.9  Interaktiver Schlagschatten

 fSchatten.distance = nDif*nFaktor;  bild.filters = [fSchatten];  }

Per Mausklick können Sie den Schatten verschieben. Zur Berechnung des Drehwinkels sowie des Abstands werden drei Variablen eingerichtet. Da wir die Schattengröße aus der Entfernung berechnen, diese aber nicht 1 zu 1 übernehmen können, benötigen wir den Faktor nFaktor, mit dessen Hilfe die Entfernung reduziert werden kann. Als Ausgangspunkt für unsere Berechnung wollen wir die Mausposition beim Klick auf das Bild verwenden. Sie wird in einem Array erfasst (alternativ könnten wir auch je eine Variable für die horizontale und für die vertikale Mausposition nehmen). In der init()-Funktion erhält das Bild ein onPress-Ereignis, das die aktuelle Mausposition speichert, um von dieser Stelle aus den Abstand sowie die Drehung ermitteln zu können. Prinzipiell hätte man auch den Mittelpunkt der Grafik verwenden können, aber die Mausposition ist erheblich intuitiver. Zusätzlich weisen wir ein onMouseMove-Ereignis zu, in dem permanent die Position des Schattens neu berechnet wird. Die eigentliche Berechnung erfolgt in der Funktion schatten(). Wir ermitteln den Abstand zwischen der aktuellen Mausposition und derjenigen Position, die bei Klick gespeichert wurde. Dabei verwenden wir den oben vorgestellten Satz des Pythagoras. Mit einer umgekehrten trigonometrischen Funktion ermitteln wir darüber hinaus den Winkel zwischen der eben berechneten Strecke und der Nullposition. Die Eigenschaft angle unseres Filters erhält diesen Wert, während wir den Abstand auf ein Zehntel reduzieren und ihn der Eigenschaft distance zuweisen. Damit der Filter mit den neuen Werte dargestellt wird, müssen wir in der letzten Zeile erneut darauf zugreifen. So ganz glücklich macht das Skript noch nicht, denn bei der geringsten Mausbewegung – selbst vor einem Mausklick – wird bereits die Funktion schatten() aufgerufen. Zu dem Zeitpunkt kann aber keine korrekte Berechnung stattfinden, da noch keine Mausposition gespeichert wurde. Außerdem hört der Effekt nach dem Loslassen der Maus nicht mehr auf. 10. Erweitern Sie die Deklaration von init() nach der Zuweisung des onPress-Ereignisses:

361

 bild.onRelease = bild. onReleaseOutside=function () {

 aKlick = [];

 };

11. Machen Sie innerhalb der Deklaration von schatten() die Ausführung aller Befehle von folgender Bedingung abhängig (Fettdruck):  if (aKlick.length>0) {

 //hier stehen alle bisherigen Anweisungen der Funktion schatten()  }

Flash ändert den Schatten nur noch, wenn zuvor ein Mausklick erfolgte. Sobald Sie die Maus loslassen, endet auch der Effekt. Wir benötigen ein Kriterium, anhand dessen Flash erkennen kann, ob die Funktion schatten() auszuführen ist. Das fügen wir ein durch den Bezug auf den Inhalt von aKlick: Nur dann, wenn sich darin Werte befinden bzw. die Länge größer 0 ist, wissen wir, dass bereits eine Mausposition gespeichert wurde. Das ist bekanntermaßen der Fall, wenn der Anwender auf das Bild klickt. Alternativ hätten wir das onMouseMoveEreignis bei Mausklick einrichten und beim Loslassen der Maus wieder löschen können. Aus Gründen der Usability empfiehlt es sich, zumindest den Startpunkt bei einem Mausklick zu visualisieren, so dass der Anwender visuell wahrnehmen kann, welche Strecke er bereits gezogen hat. Alternativ kann man auch eine vollständige Linie vom Startpunkt bis zur aktuellen Mausposition ziehen, eine Variante, die wir uns anschauen wollen. 12. Erweitern Sie den Variablen-Block:

var mLinie:MovieClip;

13. Erweitern Sie in der Deklaration von init() das onRelease-Ereignis unmittelbar vor dessen schließender Klammer:

mLinie.clear();

14. Erweitern Sie die Deklaration von init() unmittelbar vor der schließenden Klammer:  mLinie = this.createEmptyMovieClip („behLinie“, this.getNextHighest­ Depth());

362

Kapitel 25  Trigonometrie

15. Erweitern Sie in der Deklaration von schatten() die if-Bedingung unmittelbar nach der öffnenden Klammer:  mLinie.clear();

 mLinie.lineStyle(2, 0 × 000000, 100);

mLinie.moveTo(aKlick[0], aKlick[1]); 

 mLinie.lineTo(_xmouse, _ymouse);

Bei Mausklick zeigt eine schwarze Linie die Strecke an, die Sie mit gedrückter Maustaste zurück legen. Wir legen eine Variable an, in die wir eine Referenz auf einen MovieClip aufnehmen wollen. Wir benötigen ihn, um mit den Zeichnungsmethoden der MovieClip-Klasse arbeiten zu können. In der init()-Funktion erstellen wir diesen leeren MovieClip, in den die Linie gezeichnet wird. Damit sie zu sehen ist, muss besagter Clip auf einer höheren Tiefe liegen als die Grafik. Das erreichen wir dadurch, dass er erst am Ende von init() Funktion erstellt wird. Das Zeichnen erfolgt in der Funktion schatten(). Wir legen als Linieneigenschaften eine Breite von 2 Pixeln, eine schwarze Farbe sowie eine Deckkraft von 100 fest. Da der Linienbeginn der Mausposition beim Klick entspricht, bewegen wir den Zeichenstift zu dieser Stelle, von der aus wir jeweils zur aktuellen Mausposition zeichnen. Allerdings müssen wir bei einer vorhergehenden Mausbewegung gezeichnete Linien löschen, was mit Hilfe der clear()-Funktion sinnvollerweise geschieht, bevor wir neu zeichnen, sowie beim Loslassen der Maus. Eventuell empfindet man es als störend, dass sich bei Mausklick noch keine unmittelbare Änderung einstellt. Erst eine Mausbewegung löst den Effekt aus. Das können Sie einfach ändern. 16. Fügen Sie in der Deklaration von init() im onPress-Ereignis unmittelbar vor dessen schließender Klammer ein:

schatten();

Sobald Sie auf das Bild klicken, passt sich der Schatten an die Mausposition entsprechend unserer Berechnungen an. Die Lösung ist ausgesprochen simpel: Da schatten() für den gewünschten Effekt verantwortlich ist, rufen wir diese Funktion bereits direkt beim Mausklick und nicht erst bei einer nachfolgenden Mausbewegung auf.

Beachten Sie, dass der hier programmierte Effekt nicht kumulativ ist, d. h. jeder Klick setzt den Schatten unabhängig von seiner vorhergehenden Position neu. Damit ist es nicht möglich  – entsprechenden schwarzen Humor vorausgesetzt –, dass der Anwender den Schatten außerhalb des Screens zu verschieben versucht.

25.10 Code //--------------- import –------------– import flash.filters.*;

//---------------- vars –-------------var mLinie:MovieClip;

var fSchatten:DropShadowFilter; var nDifX:Number, nDifY:Number, nDif:Number; var nFaktor:Number = 0.1; var aKlick:Array = [];

//-------------- functions –----------function init() {

 fSchatten = new DropShadowFilter();  fSchatten.distance = 5;  fSchatten.angle = 45;

 fSchatten.color = 0 × 333333;  fSchatten.alpha = 1;  fSchatten.blurX = 5;  fSchatten.blurY = 5;

 fSchatten.strength = 2;  fSchatten.quality = 3;

 this.attachMovie(„mcBild“, „bild“, this.getNextHighestDepth());  bild._x = Stage.width/2-bild._ width/2;

 bild._y = Stage.height/2-bild._ height/2;  bild.filters = [fSchatten];

 bild.onPress = function() {

 aKlick = [_xmouse, _ymouse];  schatten(); };

25.10  Code

363

 bild.onRelease = bild. onReleaseOutside=function () {

m Linie.moveTo(aKlick[0], aKlick[1]);

 mLinie.clear();

 nDifX = _xmouse-aKlick[0];

 aKlick = []; };

 bild.onMouseMove = schatten;

 mLinie = this.createEmptyMovieClip („behLinie“, this.getNextHighest­ Depth()); }

function schatten() {

 if (aKlick.length>0) {  mLinie.clear();

 mLinie.lineStyle(2, 0 × 000000, 100);

 mLinie.lineTo(_xmouse, _ymouse);  nDifY = _ymouse-aKlick[1];

 nDif = Math.sqrt((nDifX*nDifX)+ (nDifY*nDifY));

 fSchatten.angle = Math.atan2(nDifY, nDifX)*(180/Math.PI);  fSchatten.distance = nDif*nFaktor;  bild.filters = [fSchatten]; } }

//--------------- start –-------------init();

26

Effekte (Text)

Wie Sie wissen, können Texte nicht nur informatorischen, sondern auch ästhetischen Zwecken dienen. Schon sehr früh wurden die besonderen Animationsfähigkeiten von Flash genutzt, um mitunter recht ausgefallene, nichtsdestotrotz ansprechende Effekte zu kreieren. Trotz der schier unglaublichen Vielfalt an Effekten lassen sich einige grundlegende Prinzipien erkennen, die zum wesentlichen Teil bereits im Kapitel Geskriptete Animationen vorgestellt wurden und im nachfolgenden an einigen einfachen exemplarischen Animationen erläutert werden. Bei den Eigenschaften, die in derartigen Effekten modifiziert werden, handelt es sich i. d. R. um:

• Deckkraft; • Größe; • Position; • Farbe; • Drehung; • Textinhalt. Manchen Effekten begegnen wir auch im Zusammenhang mit Grafiken wieder, andere sind spezifischer Natur. So lässt sich die Größe von Texten im Gegensatz zu Grafiken natürlich nicht nur durch eine Änderung der Ausdehnung des übergeordneten Behälters bzw. des Textfeldes erreichen, sondern auch durch eine entsprechende Änderung der Größe des verwendeten Fonts. Eine wichtige Besonderheit stellt die Art dar, wie Flash Schriften behandelt. Um mit dynamischen Textfeldern Größenänderungen und Drehungen realisieren zu können, muss nämlich der betreffende Font eingebettet werden, ansonsten stellt Flash schlicht nichts dar. Generell gilt natürlich für den Einsatz von Effekten, dass man sparsam mit ihnen umgehen sollte, da

sie sich sehr schnell abnutzen und dann einfach nur noch als störend empfunden werden.

26.1 Text vergrößern und ein-/ausblenden Als sehr beliebt erweist sich das Ein- und Ausblenden von Text, das wir uns im ersten Beispiel näher anschauen wollen. Dabei taucht Text in der Bildschirmmitte auf und wird immer größer, während sich gleichzeitig seine Deckkraft reduziert, bis er nicht mehr zu sehen ist. Anschließend beginnt die ganze Animation erneut. Abbildung  109 zeigt eine frühe Phase der Animation. Ein derartiger Effekt eignet sich bei sparsamem Einsatz gut für Überschriften sowie Catch Phrases, also Schlagwörter, die eine Aussage auf den Punkt bringen sollen. Für Fließtexte verzichtet man zwangsläufig auf solche Effekte, denn dort steht die schnelle Informationsaufnahme im Vordergrund.

Abbildung  109:  Animierter Text (Änderung von Größe, Deckkraft, Position)

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

365

366

Kapitel 26  Effekte (Text)

1. Erstellen Sie eine Standarddatei. 2. Öffnen Sie innerhalb der Bibliothek das Kontextmenü, indem Sie mit der rechten Maustaste auf eine freie Stelle klicken. 3. Wählen Sie die Option . 4. Wählen Sie aus der unter <Schriftart> angezeigten Liste eine beliebige Schriftart aus. Die Liste entspricht den Schriftarten, die dem Betriebssystem bekannt sind. Wir wählen beispielhaft den etwas ausgefallenen Font Chinyen. 5. Weisen Sie dem ausgewählten Font einen Namen zu, der dem Font entspricht. Wir nennen unsere Schrift beispielhaft chinyen. 6. Weisen Sie dem neu erstellten Font in der Bibliothek per rechter Maustaste eine gleichnamige Verknüpfung zu, so dass wir per Skript darauf zugreifen können. 7. Weisen Sie actions folgendes Bildskript zu:

var tTxt:TextField;

//--------------- vars –-------------

function init():Void {

var sTxt:String = „Hallo Flasher in

aller Welt!“;

var mTxt:MovieClip;

Abbildung 110:  Einbetten eines Fonts in der Bibliothek

var tfTxt:TextFormat;

Zunächst teilen wir Flash mit, welchen Text wir einblenden wollen. Beispielhaft geschieht dies mit Hilfe der Variablen sTxt, an deren Stelle Sie natürlich auch einen externen Text einlesen oder einen String übernehmen können, den der Anwender in ein Eingabefeld geschrieben hat. Um flexibler zu sein, richten wir eine Variable zur Referenzierung eines Textbehälters ein. Die dritte Variable verweist später das auf dynamisch zu erzeugende Textfeld, in dem der anzuzeigende Text dargestellt wird. Die Variable tfTextFormat dient dazu, die Eigenschaften des zu definierenden Textformats aufzunehmen, so dass wir dieses Format einem String zuweisen können. 8. Fügen Sie folgenden Funktions-Block ein: //------------ functions –-----------

 tfTxt = new TextFormat();  tfTxt.font = „chinyen“;  tfTxt.size = 1;

26.1  Text vergrößern und ein-/ausblenden

 tfTxt.color = 0 × 000000;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  mTxt._x = Stage.width/2;

 mTxt._y = Stage.height/2;

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.autoSize = „center“;  tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);  tTxt._x = -tTxt._width/2;

 tTxt._y = -tTxt._height/2; }

9. Fügen Sie im Anschluss an diese Zeilen einen Aufruf ein:  //------------- aufruf –------------  init();

Die Funktion init() erzeugt den Behälter und dessen Textfeld sowie das Textformat, mit dem der animierte String dargestellt wird. Das gewünschte Textformat referenzieren wir mit der Variablen tfTxt. Im Hinblick auf die Animation sind für uns Font, Größe und Farbe interessant, die wir jeweils auf folgende Werte setzen:

• „chinyen“, womit wir Flash anweisen, denjenigen Font zu verwenden, der in der Bibliothek über den angegebenen Verknüpfungsnamen verfügt. Wenn Sie mit einem Standardfont arbeiten möchten, können Sie auf diese Zeile verzichten. Flash verwendet dann bei der Erzeugung eines neuen Textfeldes „Times New Roman“ unter Windows und „Times“ unter Mac; • 1, so dass der zugewiesene Text zunächst nahezu unsichtbar scheint; • 0 × 000000, also schwarz, um einen möglichst großen Kontrast zum Hintergrund herzustellen. Selbstverständlich können Sie andere Farbwerte wählen. Möglich wäre auch, den Anwender eine Farbe beispielsweise in Abhängigkeit von der aktuellen Mausposition wählen zu lassen oder jeweils eine Zufallsfarbe zu verwenden. Im letztgenannten Fall sollte man zulässige Farbwerte speichern, um nicht versehentlich eine zu helle Farbe auszuwählen.

367

Anschließend erstellen wir einen neuen leeren MovieClip und positionieren ihn exakt in der Bühnenmitte. In diesem Clip wird ein neues Textfeld erzeugt. Wir müssen dabei aus formalen Gründen Argumente für Position und Größe mitgeben, die jedoch erst dann korrekt bestimmt werden können, wenn ein konkreter Textinhalt zugewiesen wurde. Deswegen verwenden wir an dieser Stelle für die fraglichen Werte einfach 0. Logischerweise ist bei solchen Textfeldern die Eigenschaft embedFonts auf false gesetzt, was man übernehmen kann, wenn nur ein Standardfont verwendet werden soll (und weder Größe noch Deckkraft animiert werden). In unserem Fall möchten wir einen speziellen Font verwenden und weisen daher der genannten Eigenschaft true zu. Da ein neues Textfeld die Auswahl des Inhalts durch den Anwender zulässt, was in unserem Zusammenhang aber keinen Sinn machen würde, schalten wir diese Möglichkeit mit false aus. Der in sTxt gespeicherte String wird dem Textfeld zugewiesen. Um zu verhindern, dass er direkt in voller Größe erstrahlt, formatieren wir das Textfeld mit dem zuvor definierten Format. Da dort die Buchstabengröße mit 1 initialisiert wurde, bleibt der Text zunächst fast unsichtbar. Erst jetzt können wir eine korrekte Position zuweisen. Wenn es sich dabei wie in unserem Fall um die Bildschirmmitte handeln soll, muss das Textfeld um seine halbe Breite nach links und seine halbe Höhe nach oben verschoben werden. Da sich der übergeordnete MovieClip bereits in der exakten Mitte befindet, muss nur noch der Text in Bezug auf den Registrierungspunkt dieses Clips gesetzt werden, was hiermit erfolgt. In der letzten Zeile des Scripts rufen wir init() auf, so dass in der Mitte des Screens ein ausgesprochen bescheidenes Textfeldchen mit unleserlichem Inhalt auftaucht. 10. Erweitern Sie den Variablen-Block:  var nGrenze:Number = 5;  var nAlpha:Number = 1;

11. Fügen Sie innerhalb der Deklaration von init() unmittelbar vor der schließenden Klammer ein:

mTxt.onEnterFrame = animieren;

12. Erweitern Sie den Funktions-Block um folgende Deklaration:  function animieren():Void {  tfTxt.size += 1;

368

Kapitel 26  Effekte (Text)

 tTxt.setTextFormat(tfTxt);  tTxt._y = -tTxt._height/2;  this._alpha –= nAlpha;

 if (this._alpha<=nGrenze) {  init(); }

}

Wenn Sie testen, vergrößert sich der Textblock und blendet gleichzeitig aus. Ist er verschwunden, taucht er wieder als kleiner Text in der Mitte auf und wächst erneut. Die Animation benötigt eine Tempoangabe sowie einen Grenzwert, an dem sie stoppen soll. Beides legen wir anfangs in Variablen fest. Das Ausblenden erfolgt mit Hilfe eines onEnterFrame-Ereignisses, das wir dem Behälter zuweisen. Dort ruft Flash permanent die Funktion animieren() auf. Sie erhöht einerseits die Textgröße, indem einfach der Font des vorher festgelegten Textformats sukzessive vergrößert und das veränderte Format dem Textfeld neu zugewiesen wird. Andererseits verschiebt sie das Feld vertikal permanent um dessen halbe Höhe nach oben. Das ist notwendig, da sich ja die Fontgröße andauernd ändert, während der Registrierungspunkt des Feldes an der gleichen Position verbleibt. Wenn wir darauf verzichten, wächst unser Text immer weiter nach unten. Horizontal benötigen wir keine derartige Anpassung, denn der Text wurde beim Erzeugen in init() zentriert ausgerichtet. Ebenfalls permanent ändern wir die Deckkraft, indem wir die Eigenschaft _alpha des übergeordneten Behälters um den in der Variablen nAlpha definierten Betrag reduzieren. Erreicht oder unterschreitet die Deckkraft den in nGrenze angegebenen Wert, rufen wir init() erneut auf. Das führt dazu, dass nach dem nahezu vollständigen Ausblenden des Textes der bestehende Behälter durch einen neuen überschrieben wird, in dem der gleiche Prozess wieder abläuft. Die Animation erscheint also endlos. Wer es statt dessen beim einmaligen Ausblenden belassen möchte, muss lediglich innerhalb der Deklaration von animieren() die if-Bedingung ändern: if (this._alpha<=nGrenze) { this.removeMovieClip(); }

Das Tempo des Ausblendens können Sie einfach durch die Variable nAlpha anpassen: Je höher der Wert, desto schneller verschwindet der Text. Eventuell sieht es so aus, als liege der Text nicht exakt in der Mitte. Das lässt sich einfach überprüfen, indem Sie horizontal eine Linie beliebiger Länge in einer zum Hintergrund kontrastierenden Farbe zeichnen und sie per Eigenschaftsfenster vertikal mittig positionieren. Sie wird während der Animation den Text genau in der Mitte „durchschneiden“. Aus unserem Code lässt sich schnell ein simpler Mauseffekt basteln, indem die Position des Behälters nicht am Bildschirm, sondern am Cursor ausgerichtet wird. Ergänzen Sie dazu die Deklaration von animieren() unmittelbar nach der öffnenden Klammer: this._x = _xmouse; this._y = _ymouse;

Der Selbstbezeichner this bezieht sich hier auf dasjenige Objekt, dem wir ein onEnterFrame zugewiesen haben, also auf den MovieClip mTxt. Statt eines Ausblendens kann man ein Einblenden verwenden. Dazu sind folgende Änderungen notwendig:

• var

nGrenze:Number = 100; Die Variable nGrenze wird mit dem gewünschten Grenzwert,

z. B. 100, initialisiert. Damit wird festgelegt, bis zu welchem Wert wir die Deckkraft erhöhen; • mTxt._alpha = 0; In der Deklaration von init() muss mTxt mit einer Deckkraft von 0 starten, so dass kein Inhalt zu sehen ist; • this._alpha += nAlpha; In der Deklaration von animieren() wird sukzessive die Deckkraft erhöht statt wie bisher reduziert; • if (this._alpha>=100) { In der gleichen Deklaration erfolgt die veränderte Kontrolle der Deckkraft. Damit liegt eine sehr einfache Variante vor, bei der wir jedes Mal den Behälter für den Text neu erzeugen. Alternativ dazu könnte man auch den Behälter beibehalten und statt dessen einen neu anzuzeigenden Text mit den ursprünglichen Werten hinsichtlich der Größe einblenden. Wer anstelle des gleichbleibenden jeweils einen neuen Textinhalt einblenden möchte, muss einige kleinere Änderungen am Code vornehmen. Anders als vorher wollen wir nun den Textbehälter erhalten.

26.1  Text vergrößern und ein-/ausblenden

13. Ändern Sie die Initialisierung von sTxt:  var sTxt:String = „Animationen, Sound, Video.Interaktive Anwendungen, Spiele.All das gelingt ohne Probleme.Flash, das universelle Autorensystem“;

Achten Sie darauf, wie oben gezeigt nach dem durch einen Punkt angezeigten Satzende kein Leerzeichen einzufügen. Andernfalls müssen wir es per Code entfernen (was dann sinnvoll wäre, wenn der anzuzeigende Text beispielsweise extern eingelesen würde). 14. Erweitern Sie den Variablen-Block um folgende Deklarationen:  var aTxt:Array = [];

 var nIndex:Number = 0;

15. Ändern Sie die Initialisierung von nGrenze (Fettdruck):

var nGrenze:Number = 0;

Zum Einblenden benötigen wir einen aus mehreren Sätzen bestehenden Text, den wir in sTxt speichern. Um ihn satzweise auslesen zu können, legen wir ein Array und eine Variable für den Indexzugriff auf dieses Array an. Den Grenzwert, ab dem eine Animation beendet wird, legen wir mit 0 fest. An dieser Stelle können Sie gerne auch mit anderen Werten arbeiten. 16. Ändern Sie die Deklaration von init() wie folgt (Fettdruck):  function init():Void {

aTxt = sTxt.split(„.“);

 tfTxt = new TextFormat();  tfTxt.font = „chinyen“;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  mTxt._x = Stage.width/2;

 mTxt._y = Stage.height/2;

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.autoSize = „center“;  tTxt.selectable = false; txtInhalt();

 mTxt.onEnterFrame = animieren;

}

369

Flash stellt keine einfache Funktion zur Verfügung, um ganze Sätze zu ermitteln. Hier hilft jedoch die Methode split(). Sie liest in unserem Fall den in sTxt gespeicherten String in aTxt ein, wobei jeder Teilstring, der mit dem Zeichen „.“, also mit einem simplen Punkt, endet, als eigenes Element behandelt wird. Auf diese Weise extrahieren wir faktisch jeden einzelnen Satz. Da wir diesmal die init()-Funktion nur einmal ausführen wollen, um den Textbehälter nicht jedes mal neu zu erzeugen, müssen wir die Änderung der Textgröße hier streichen. Sie wird in die noch zu deklarierende Funktion txtInhalt() ausgelagert. Gleiches gilt für das Zuweisen des Textformats und des konkreten Inhalts. Um den ersten Satz sehen zu können, rufen wir eben jene Funktion einmal auf. 17. Erweitern Sie den Funktions-Block um folgende Deklaration:  function txtInhalt():Void {  mTxt._alpha = 100;

 tTxt.text = aTxt[nIndex];  tfTxt.size = 1;

 tfTxt.color = 0 × 000000;

 tTxt.setTextFormat(tfTxt);  tTxt._x = -tTxt._width/2;

 tTxt._y = -tTxt._height/2;

}

Einige Aufgaben, die zuvor in init() enthalten waren, werden nun von der neuen Funktion txtInhalt() übernommen. Zunächst sorgt sie dafür, dass der Behälter für das Textfeld vollständig sichtbar ist, indem dessen Deckkraft auf 100 % gesetzt wird. Ein derartiger Schritt erübrigte sich vorher, da wir den fraglichen Behälter jedes Mal neu erzeugten. Als konkreter Textinhalt wird dasjenige Element verwendet, das sich innerhalb des Arrays aTxt auf dem in nIndex festgelegten Indexwert befindet. Da nIndex mit 0 initialisiert wird, greift Flash beim ersten Aufruf der Funktion txtInhalt() auf das erste Element in diesem Array zu, was dem String „Animationen, Sound, Video“ entspricht. Die übrigen Aktionen kennen wir bereits aus der vorhergehenden Variante, nämlich das Setzen der Fontgröße und  –farbe, Zuweisung des Textformats und mittige Positionierung des Feldes innerhalb des Behälters.

370

Kapitel 26  Effekte (Text)

18. Ändern Sie in der Deklaration von animieren() die if-Bedingung (Fettdruck):

this.removeMovieClip();

derholrate. In den meisten Fällen reicht das vollkommen aus. Wenn der ausgeblendete Text allerdings neben der ästhetischen auch eine Informationsfunktion erfüllen soll, kann es notwendig sein, mit variablen Geschwindigkeiten zu arbeiten. In dem Fall empfiehlt sich der Einsatz von setInterval(). Dazu sind nur wenige Änderungen notwendig.

} else {

19. Fügen Sie im Variablen-Block an beliebiger Stelle folgende Deklaration ein:

 if (mTxt._alpha<=nGrenze) { nIndex++;

if (nIndex == aTxt.length) { trace(„habefertisch!“); txtInhalt(); }

}

Flash blendet nun beim Testen die von Ihnen festgelegten Sätze sukzessive ein. Die Grenzbedingung pro Animationsphase entspricht derjenigen der vorherigen Variante: Sobald die Deckkraft kleiner oder gleich einem festgelegten Wert ist, endet die betreffende Phase. Anschließend inkrementieren wir nIndex, um beim nächsten Mal auf ein neues Element innerhalb von aTxt zugreifen zu können. Dabei sind zwei Fälle zu unterscheiden:

• Entweder entspricht nIndex der Gesamtlänge von aTxt. Dies bedeutet, dass alle Texte angezeigt

wurden, wir also das Ende der gesamten Animation erreicht haben. Dann löschen wir den Behälter und damit natürlich auch das enthaltene Textfeld. Sollen noch weitere Aktionen ausgelöst werden, z. B. Aufruf einer anderen Seite oder Anzeigen eines neuen Textes, dann müsste das an dieser Stelle geschehen. Stellvertretend dafür steht hier der trace()-Befehl mit einem trabatonischen (nicht: Trapper Toni) „habefertisch!“; • Andernfalls existiert noch Text, der nicht eingeblendet wurde. Daher wird die Funktion txtInhalt() erneut aufgerufen und der gesamte Animationsprozess startet mit dem neuen Textinhalt. Eingangs wurde der String sTxt ohne Leerzeichen nach einem Satzende initialisiert. Das ist notwendig, da ansonsten ein derartiges Zeichen als einzelner String behandelt und eingeblendet würde, obwohl wir es nicht wahrnehmen könnten. Das würde bei der Animation zu einer scheinbaren Verschiebung um ein Zeichen nach rechts führen. Sie können es an dieser Stelle testen, indem Sie nachträglich an den fraglichen Stellen innerhalb von sTxt ein Leerzeichen einfügen. Aufgrund des onEnterFrame-Ereignisses erfolgt die Animation entsprechend der eingestellten Bildwie-



var nInterval:Number;

20. Ersetzen Sie innerhalb der Deklaration der init()-Funktion die Zuweisung des onEnterFrame-Ereignisses durch:  nInterval = setInterval (animieren,50, mTxt);

21. Erweitern Sie die Deklaration von animieren() um einen Parameter (Fettdruck):  function animieren(pWer:MovieClip):Void {

22. Ersetzen Sie innerhalb der Deklaration von animieren() jedes this durch den Parameter pWer (Fettdruck):  pWer._alpha –= nAlpha;

…



…

 if (pWer._alpha<=nGrenze) {  pWer.removeMovieClip();

Die Punkte (…) deuten nur Auslassungen an, die Sie bitte nicht im Code eintragen. 23. Fügen Sie innerhalb der Deklaration von animieren() unmittelbar vor der ersten if-Bedingung ein:

updateAfterEvent();

24. Erweitern Sie innerhalb der Deklaration von animieren() die zweite if-Bedingung unmittelbar nach dem Aufruf der removeMovieClip()-Methode:

clearInterval(nInterval);

Prinzipiell ergibt sich beim Testen gegenüber vorher kein Unterschied. Aber jetzt sind Sie in der Lage, die Geschwindigkeit zu steuern, indem Sie anstelle der in init() bei der Definition des Intervalls übergebenen

26.2  Code

50 Millisekunden beispielsweise 100 für eine langsamere oder 25 für eine schnellere Animation verwenden. Die Bildwiederholrate des Films bleibt dadurch unberührt. Um leichter auf das Intervall zugreifen und vor allem, um es später wieder löschen zu können, richten wir eine Variable ein, in der wir eine Referenznummer auf das Intervall speichern. In init() richten wir das Intervall ein und rufen alle 50 Millisekunden die Funktion animieren() auf. Zusätzlich übergeben wir dasjenige Objekt, das animiert werden soll. Da es beim Aufruf aus einem Intervall in der Form, wie wir es hier vornehmen, nicht möglich ist, mit dem Bezeichner this auf das zu animierende Objekt zuzugreifen, müssen wir es in einem Parameter erfassen, den wir in pWer festlegen. Jedes this innerhalb der Deklaration wird dann durch pWer ersetzt. Dadurch stellen wir den korrekten Bezug zum Textbehälter mTxt wieder her. Ebenfalls innerhalb von animieren() sorgen wir durch die updateAfterEvent()-Funktion dafür, dass Flash den Screen sofort neu zeichnet. Verzichten wir darauf, dann berechnet Flash zwar alle 50 Millisekunden Größe, Deckkraft und Position neu, aber Änderungen sehen wir nur entsprechend der Bildwiederholrate. Ist sie niedrig eingestellt, kommt es zu deutlich wahrnehmbaren Rucklern in der Animation. Sie können dies testen, indem Sie updateAfterEvent() vorübergehend auskommentieren. Sind alle Texte ausgeblendet, reicht es in unserem Fall nicht mehr aus, nur den betreffenden MovieClip zu löschen. Denn auch wenn er nicht mehr vorhanden ist, wird das in init() definierte Intervall ausgeführt, selbst wenn es ohne sichtbare Auswirkungen bleibt. Daher löschen wir das Intervall unmittelbar nach Entfernen des MovieClips. Im vorliegenden Beispiel wurde davon ausgegangen, dass beim eingeblendeten Text der Punkt nicht mit angezeigt werden soll. Daher wählten wir ihn als Trennzeichen für das Splitten in ein Array. Möchten Sie dagegen auch den Punkt darstellen, müssen Sie natürlich ein anderes Trennzeichen wählen und in den String eintragen. Möglich wäre zum Beispiel die Raute („#“), die naturgemäß eher selten in einem Satz auftaucht. Dementsprechend müssten geändert werden (Fettdruck):

• Initialisierung von sTxt:

371

var sTxt:String = „Animationen, Sound, Video.#Interaktive Anwendungen, Spiele.#All das gelingt ohne Probleme.#Flash, das universelle Autorensystem“;

• Definition des Trennzeichens:

aTxt = sTxt.split(„#“);

26.2 Code Hier finden Sie den Code beider Versionen. Die erste Version zeigt immer den gleichen Text an. //-------------- vars –----------------

var sTxt:String = „Hallo Flasher in aller Welt!“; var mTxt:MovieClip; var tTxt:TextField;

var tfTxt:TextFormat;

var nGrenze:Number = 5; var nAlpha:Number = 1;

//------------- functions –-----------function init():Void {

 tfTxt = new TextFormat();  tfTxt.font = „chinyen“;  tfTxt.size = 1;

 tfTxt.color = 0 × 000000;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  mTxt._x = Stage.width/2;

 mTxt._y = Stage.height/2;

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.autoSize = „center“;  tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);  tTxt._x = -tTxt._width/2;

 tTxt._y = -tTxt._height/2;

 mTxt.onEnterFrame = animieren; }

372

Kapitel 26  Effekte (Text)

function animieren():Void {

}

 tTxt.setTextFormat(tfTxt);

 mTxt._alpha = 100;

 tfTxt.size += 1;

 tTxt._y = -tTxt._height/2;  this._alpha –= nAlpha;

 if (this._alpha<=nGrenze) {  init(); } }

//-----------––– aufruf –-------------init();

function txtInhalt():Void {  tTxt.text = aTxt[nIndex];  tfTxt.size = 1;

 tfTxt.color = 0 × 000000;

 tTxt.setTextFormat(tfTxt);  tTxt._x = -tTxt._width/2;

 tTxt._y = -tTxt._height/2; }

function animieren():Void {

Die zweite Version zeigt jeweils einen neuen Text an und beendet die Animation, sobald der letzte Text ausgeblendet wurde.

 tfTxt.size += 1;

//-------------- vars –----------------

 this._alpha –= nAlpha;

var tTxt:TextField;

 nIndex++;

var sTxt:String = „Animationen, Sound, Video.Interaktive Anwendungen, Spiele. All das gelingt ohne Probleme.Flash, das universelle Autorensystem“;

 this.removeMovieClip();

var nGrenze:Number = 0;

}

var nIndex:Number = 0;

}

function init():Void {

init();

 tTxt.setTextFormat(tfTxt);  tTxt._y = -tTxt._height/2;

var mTxt:MovieClip;

 if (mTxt._alpha<=nGrenze) {

var tfTxt:TextFormat;

 if (nIndex == aTxt.length) {  trace(„habefertisch!“); } else {

var aTxt:Array = [];

 txtInhalt();

var nAlpha:Number = 1;

}

//------------- functions –------------

//------------- aufruf –---------------

 aTxt = sTxt.split(„.“);

 tfTxt = new TextFormat();  tfTxt.font = „chinyen“;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);

26.3 Einzelne Zeichen einfärben

 tTxt.autoSize = „center“;

Neben der Größenänderung stellt die Einfärbung eine Möglichkeit dar, eine erhöhte Aufmerksamkeit zu erzielen. Anders als zuvor wollen wir aber nicht die gesamte Textzeile einfärben (was mit dem einmaligen Zuweisen eines entsprechenden Textformats realisiert würde), sondern sukzessive einzelne Zeichen. Abbildung 111 zeigt eine beliebige Phase der gewünschten Animation.

 txtInhalt();

1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf schwarz.

 mTxt._x = Stage.width/2;

 mTxt._y = Stage.height/2;

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.selectable = false;

 mTxt.onEnterFrame = animieren;

26.3  Einzelne Zeichen einfärben

373

5. Fügen Sie folgenden Funktions-Block ein: //----------- functions –-----------  function init(pInterval:Number):Void {  tfRot.color = 0xff0000;  tfTxt.font = „chinyen“;  tfTxt.size = 40; Abbildung 111:  Animiertes Einfärben einzelner Buchstaben

3. Fügen Sie in der Bibliothek chinyen als neuen Font ein wie in der vorherigen Übung gezeigt. 4. Weisen Sie actions folgendes Bildskript zu:  //-------------- vars –--------------

 var sTxt:String = „Villa Kunterbunt“;  var mTxt:MovieClip;  var tTxt:TextField;

 var nInterval:Number;

 var nIndex:Number = 0;

 var nAnzahl:Number = 1;

 var nFarbe:Number = 0xffffff;

 var tfRot:TextFormat = new TextFormat();  var tfOrigFarbe:TextFormat = new TextFormat();

 var tfTxt:TextFormat = new TextFormat();

Im Grunde genommen legen wir im Variablen-Block dieselben Elemente an wie in der ersten Übung. In einer Variablen speichern wir den zu animierenden Text, dessen zugehöriges Textfeld und übergeordneter Behälter jeweils in einer eigenen Variable referenziert wird. Da wir anstelle eines onEnterFrame mit einem Intervall animieren, wird eine entsprechende Variable zur Aufnahme der Intervall-Id angelegt. Der Zugriff auf einzelne Zeichen erfolgt ähnlich einem Array, so dass wir für das erste Zeichen mit nIndex eine entsprechende Variable initialisieren. Die Anzahl der zu färbenden Zeichen wird in nAnzahl mit 1 festgelegt. Später können Sie an dieser Stelle mit beliebigen Werten arbeiten. Als Grundfarbe für den Text wählen wir wieder weiß. Schließlich benötigen wir noch drei verschiedene Textformate, die weiter unten genauer erläutert werden.

 tfTxt.color = nFarbe;

 tfOrigFarbe.color = tfTxt.color;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.autoSize = „left“;

 tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

 mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(faerben, pInterval); }

In der Funktion init() initialisieren wir unsere zuvor definierten Textformate:

• tfRot legt die Farbe des einzufärbenden Buchsta-

bens fest. In unserem Fall handelt es sich – nomen est omen – um Rot. Weitere Eigenschaften müssen hier nicht gesetzt werden, da wir die Standardeigenschaften des aktuellen Zeichens übernehmen werden; • tfTxt definiert die erwähnten Standardwerte des Textes. Dazu gehört der Font chinyen, die Größe und die Farbe, die dem im Variablen-Block definierten Wert für nFarbe, d. h. weiß, entspricht; • tfOrigFarbe setzt den in einem vorhergehenden Schritt gefärbten Buchstaben wieder auf die Originalfarbe zurück. Statt dessen könnten wir auch mit dem Standardformat tfTxt arbeiten. In den folgenden Anweisungen wird ein übergeordneter Behälter sowie das zugehörige Textfeld mit Größen- und Positionsangaben erzeugt. Die Textaus-

374

richtung setzen wir auf links und verhindern das Auswählen des Inhalts. Als konkreter Text wird der in sTxt initialisierte String verwendet. Wir formatieren ihn mit unserem in tfTxt festgelegten Standardformat. Als Position wählen wir die horizontale und vertikale Bühnenmitte und rufen abschließend die noch zu deklarierende Funktion faerben() per Intervall auf. Dessen Dauer wird durch den Parameter pInterval gesteuert. 6. Erweitern Sie den Funktions-Block:  function faerben():Void {  if (nIndex>0) {

 tTxt.setTextFormat(0, nIndex, tfOrigFarbe); }

Kapitel 26  Effekte (Text)

Position des ersten rot zu färbenden Zeichens zuzüglich ihrer Gesamtzahl kleiner oder gleich der Gesamtlänge des Strings minus der Zeichenanzahl ist. An einem konkreten Beispiel wird die Überlegung deutlicher. Nehmen wir an, nIndex betrage 8. Dann werden die Zeichen an den Positionen 0 bis 7 („Villa Ku“) weiß, das Zeichen an der Position 8 („n“) rot und alle nachfolgenden Zeichen auf den Positionen 9 bis 15 („terbunt“) ebenfalls weiß angezeigt. Die letzte hier gültige Position beträgt 15 (Stringlänge 16 minus Anzahl zu färbender Zeichen, also 1). Der Vorteil dieser Abfrage besteht darin, mit beliebiger Zeichenanzahl zu funktionieren, wie wir später noch sehen werden.

 tTxt. setTextFormat(nIndex+nAnzahl, sTxt.length, tfOrigFarbe);

Nach dem Einfärben wird der Index für den nächsten Durchgang inkrementiert. Dabei ist der Fall zu beachten, bei dem wir die Position des letzten gültigen Zeichens überschreiten. Dann nämlich haben wir das Stringende erreicht und die letzten Zeichen sind entsprechend nAnzahl rot eingefärbt. Damit die Animation wieder von vorne beginnen kann, setzen wir in diesem Fall nIndex zurück auf den Anfangswert 0.

 nIndex++;

7. Fügen Sie am Ende den erforderlichen Aufruf der init()-Funktion ein:

 tTxt.setTextFormat(nIndex, nIndex+nAnzahl, tfRot);

 if (nIndex+nAnzahl<=sTxt.lengthnAnzahl) {

}

 if (nIndex>sTxt.length-nAnzahl) {  nIndex = 0; } }

Hier findet die eigentliche Animation statt. Sie besteht prinzipiell aus drei Prozessen:

• Alle Zeichen vor dem aktuell einzufärbenden Zei-

chen müssen zurück auf weiß gesetzt werden. Da wir das aktuelle Zeichen durch nIndex festlegen, existieren dann so zu ändernde Buchstaben, wenn diese Variable größer 0 ist. Den Fall erfassen wir in der ersten if-Bedingung, die allen Zeichen vor dem aktuellen Zeichen das Format tfOrigFarbe zuweist; • Dasjenige Zeichen, das sich an der Position nIndex befindet, erhält das Textformat mit der roten Farbe; • Alle nachfolgenden Zeichen müssen ebenfalls zurück auf weiß gesetzt werden. Die zweite ifBedingung testet, ob überhaupt derartige Zeichen vorliegen. Das trifft dann zu, wenn die aktuelle

 //------------ aufruf –-------------  init(120);

Nun wird alle 120 Millisekunden fortschreitend jeweils ein Zeichen des Strings rot dargestellt. Natürlich kann man statt des einen stattlichen Rottons auch eine Reihe an verschiedenen Farben zur Verfügung stellen, aus denen Flash zufallsbedingt auswählt. Dazu sind nur marginale Änderungen notwendig: 8. Erweitern Sie den Variablen-Block am Ende um folgende Deklaration: var aFarben:Array = [0 × 0000cc,0 × 00c c00,0xff0000,0xffcc00,0xcc0000,0 × 000 0cc];

9. Fügen Sie in der Deklaration von faerben() unmittelbar nach der schließenden Klammer der ersten if-Bedingung ein: v ar nZufall:Number = Math.floor(Math. random()*aFarben.length);  tfRot.color = aFarben[nZufall];

26.4  Code

Jetzt erhält der aktuelle Buchstabe jeweils eine zufällige Einfärbung. In einem Array speichern wir beliebige Farbwerte. Jedes mal, wenn wir die ehemals rote Farbe zugewiesen haben, ermitteln wir nun eine Zufallszahl, die größer bzw. gleich 0 und kleiner der Länge des Arrays ist. Anschließend weisen wir der Eigenschaft color des Textformats diejenige Farbe zu, die sich an der Indexposition der zufällig ermittelten Zahl befindet. Um mehreren aufeinander folgenden Buchstaben jeweils verschiedene Farben zuzuweisen, können wir die am Anfang dieses Abschnitts vorgestellte Version anpassen. 10. Machen Sie die Änderungen ab Schritt 7 wieder rückgängig. 11. Fügen Sie im Variablen-Block folgende Initialisierung ein:  var aFarben:Array = [0xffaa00, 0 × 00ff00, 0 × 00cc99];

12. Ersetzen Sie innerhalb der Deklaration von faerben() diejenige Zeile, die zuvor für das Zuweisen des Rottons verantwortlich war, durch:  for (var i:Number = 0; i
375

color wir jeweils auf den Wert setzen, der sich in aFarben befindet. Gleichzeitig weisen wir das For-

mat dem aktuellen Buchstaben zu. Dessen Ermittlung erweist sich auf den ersten Blick als etwas kompliziert, ist aber eigentlich recht einfach: Ausgehend von dem aktuellen Wert von nIndex müssen wir so viele Buchstaben färben, wie es Elemente in aFarben gibt. Nehmen wir an, nIndex beträgt 2. Dann muss der Buchstabe auf Position 2, auf 3 sowie auf 4 verändert werden, wobei jeder eine andere Farbe erhält. Die Variable nIndex darf dabei nicht verändert werden, ansonsten müssten wir den nachfolgenden Code anpassen. Verwenden wir i, ergibt sich automatisch als aktueller zu färbender Buchstabe 2 + 0, 2 + 1 sowie 2 + 2, was den gewünschten Zahlen entspricht. Da bei jedem Schleifendurchlauf jeweils nur ein Buchstabe gefärbt wird, übergeben wir als zweites Argument für die Methode setTextFormat() die genannten Werte plus 1. Als Indexzugriff für das Farben-Array verwenden wir die Zählvariable der Schleife. Diesen Prozess führen wir so oft durch, wie sich Elemente in aFarben befinden. Dessen Länge übernimmt jetzt die Funktion, die zuvor die Variable nAnzahl erfüllte. Da sie nun überflüssig geworden ist, löschen wir sie.

 tfRot.color = aFarben[i];

 tTxt.setTextFormat(nIndex+i, nIndex+i+1, tfRot);

}

13. Ersetzen Sie innerhalb der Deklaration von faerben() die Variable nAnzahl jeweils durch aFarben.length. 14. Löschen Sie im Variablen-Block die Deklaration von nAnzahl, da sie nicht mehr weiter benötigt wird. Beim Testen werden drei Buchstaben entsprechend der Angaben in aFarben eingefärbt. Zunächst müssen wir wissen, welche Farben zugewiesen werden sollen. Das funktioniert auf die gleiche Art wie in dem Beispiel mit den Zufallsfarben, nämlich mit Hilfe eines am Anfang initialisierten Arrays, in dem die gewünschten Werte erfasst werden. Da wir nun mehreren Buchstaben jeweils eine eigene Farbe zuweisen, reicht es nicht mehr aus, wie bisher ein einziges Textformat zu verwenden. Deshalb greifen wir in der Funktion faerben() mit einer Schleife auf das bisherige Textformat tfRot zu, dessen Eigenschaft

26.4 Code Hier finden Sie die vereinfachte Version, bei der eine einzige Farbe zugewiesen wird. //------------– vars –----------------var sTxt:String = „Villa Kunterbunt“; var mTxt:MovieClip; var tTxt:TextField;

var nInterval:Number;

var nIndex:Number = 0;

var nAnzahl:Number = 1;

var nFarbe:Number = 0xffffff;

var tfRot:TextFormat = new TextFormat();

var tfOrigFarbe:TextFormat = new TextFormat(); var tfTxt:TextFormat = new TextFormat();

376

//------------- functions –-----------function init(pInterval:Number):Void {  tfRot.color = 0xff0000;  tfTxt.font = „chinyen“;  tfTxt.size = 40;

 tfTxt.color = nFarbe;

 tfOrigFarbe.color = tfTxt.color;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0); tTxt.embedFonts = true;

 tTxt.autoSize = „left“;

 tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

 mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(faerben, pInterval); }

function faerben():Void {  if (nIndex>0) {

 tTxt.setTextFormat(0, nIndex, tfOrigFarbe); }

 tTxt.setTextFormat(nIndex, nIndex+nAnzahl, tfRot);

 if (nIndex+nAnzahl<=sTxt.length-nAnzahl) {

 tTxt.setTextFormat(nIndex+nAnzahl, sTxt.length, tfOrigFarbe);

Kapitel 26  Effekte (Text)

Und noch mal die zweite Version am Stück: //-------------- vars –---------------var sTxt:String = „Villa Kunterbunt“; var mTxt:MovieClip; var tTxt:TextField;

var nInterval:Number;

var nIndex:Number = 0;

//var nAnzahl:Number = 1;

var nFarbe:Number = 0xffffff;

var tfRot:TextFormat = new TextFormat();

var tfOrigFarbe:TextFormat = new TextFormat(); var tfTxt:TextFormat = new TextFormat();

//var aFarben:Array = [0 × 0000cc, 0 × 00cc00, 0xff0000, 0xffcc00, 0xcc0000, 0 × 0000cc]; var aFarben:Array = [0xffaa00, 0 × 00ff00, 0 × 00cc99];

//------------ functions –------------function init(pInterval:Number):Void {  tfRot.color = 0xff0000;  tfTxt.font = „chinyen“;  tfTxt.size = 40;

 tfTxt.color = nFarbe;

 tfOrigFarbe.color = tfTxt.color;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;  tTxt.autoSize = „left“;

}

 tTxt.selectable = false;

 if (nIndex>sTxt.length-nAnzahl) {

 tTxt.setTextFormat(tfTxt);

 nIndex++;

 tTxt.text = sTxt;

 nIndex = 0;

 mTxt._x = Stage.width/2-mTxt._ width/2;

} }

//-------------- aufruf –-------------init(120);

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(faerben, pInterval); }

26.5  Einzelne Zeichen vergrößern und verkleinern

function faerben():Void {  if (nIndex>0) {

 tTxt.setTextFormat(0,nIndex, tfOrigFarbe); }

v ar nZufall:Number = Math.floor(Math. random()*aFarben.length);  for (var i:Number = 0; i
377

4. Fügen Sie in actions als Bildskript folgenden Variablen-Block ein (Fettdruck Änderungen gegenüber vorheriger Übung):  //-------------- vars –--------------

 var sTxt:String = „Villa Kunterbunt“;  var mTxt:MovieClip;  var tTxt:TextField;

 var nInterval:Number;

 var nIndex:Number = 0;

 tTxt.setTextFormat(nIndex+i,nIndex+ i+1,tfRot);

 var nAnzahl:Number = 1;

//tfRot.color = aFarben[nZufall];

 var tfRot:TextFormat = new TextFormat();

}

 //tTxt.setTextFormat(nIndex,nIndex+ nAnzahl,tfRot);  if (nIndex+aFarben.length<=sTxt. length-aFarben.length) {

 tTxt.setTextFormat(nIndex+aFarben. length,sTxt.length,tfOrigFarbe); }

 nIndex++;

 if (nIndex>sTxt.length-aFarben. length) {  nIndex = 0; } }

//------------- aufruf –--------------– init(120);

 var nFarbe:Number = 0xff0000;

 var nNeueGroesse:Number = 60;

 var tfOrigFarbe:TextFormat = new TextFormat();

 var tfTxt:TextFormat = new TextFormat();

Im Vergleich zu vorher müssen wir hier lediglich den in nFarbe gespeicherten Hexwert von 0xffffff (weiß) auf 0xff0000 (rot) ändern. Die Variable nNeueGroesse legt die Größe des zu ändernden Buchstabens fest. 5. Erweitern Sie das Skript um einen Funktions-Block und einen Aufruf (Fettdruck Änderungen gegenüber vorheriger Übung):  //------------- functions –---------  function init(pInterval:Number):Void {  tfRot.color = nFarbe;

tfRot.size = nNeueGroesse;

26.5 Einzelne Zeichen vergrößern und verkleinern Natürlich lassen sich einzelne Zeichen auch vergrößern anstatt sie einzufärben. Diese Variante können wir sehr leicht aus dem vorhergehenden Code erstellen. 1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf schwarz. 3. Fügen Sie in der Bibliothek chinyen als neuen Font ein wie in der ersten Übung gezeigt.

 tfTxt.font = „chinyen“;  tfTxt.size = 40;

 tfTxt.color = 0xffffff;

 tfOrigFarbe.color = tfTxt.color; tfOrigFarbe.size = tfTxt.size;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;

 tTxt.autoSize = „left“;

 tTxt.selectable = false;

378

 tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

 mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(faerben, pInterval); }

 function faerben():Void {  if (nIndex>0) {

 tTxt.setTextFormat(0, nIndex, tfOrigFarbe); }

 tTxt.setTextFormat(nIndex, nIndex+nAnzahl, tfRot);

 if (nIndex+nAnzahl<=sTxt.lengthnAnzahl) {  tTxt. setTextFormat(nIndex+nAnzahl, sTxt.length, tfOrigFarbe);

Kapitel 26  Effekte (Text)

Da das Interval erstmalig nach 240 Millisekunden ausgeführt wird, sehen wir den Text zunächst in der ursprünglichen Größe, dann erfolgt die Änderung des ersten Zeichens, die zum notwendigen Verschieben des Feldes nach unten führt. 6. Erweitern Sie die Funktion init() unmittelbar vor Initialisierung von nInterval: tTxt.setTextFormat(0, 1, tfRot);

Jetzt erfolgt die Größenänderung ohne sichtbaren vertikalen Hüpfer. Wir weisen einfach dem ersten Zeichen die neue Größe zu, noch bevor der Text auf der Bühne sichtbar wird. Damit passt sich das Textfeld direkt an die gewünschte Größe an. Lediglich das erste Zeichen wird so etwas länger anders dargestellt als die übrigen, denn es wird einmal in init() und einmal in faerben() mit tfRot formatiert. Das kann man, falls gewünscht, umgehen, indem nIndex im Variablen-Block mit 1 anstatt 0 initialisiert wird. Dann greift die Funktion faerben() beim erstmaligen Animationsdurchlauf auf das zweite Zeichen zu.

}

 nIndex++;

 if (nIndex>sTxt.length-nAnzahl) {

26.6 Code

}

Da der Code nahezu identisch ist mit der ersten Version (Abschnitt „Einzelne Zeichen einfärben“), erübrigt sich eine Auflistung.

 nIndex = 0; }

 //------------- aufruf –------------  init(240);

Buchstabenweise erfolgt eine Einfärbung und Vergrößerung unseres Textes. Allerdings vollführt er beim ersten Mal einen deutlich wahrnehmbaren Hüpfer nach unten. Wir weisen dem für die Färbung zuständigen Textformat die in nFarbe gespeicherte Farbe zu und setzen die Originalfarbe auf weiß (also genau umgekehrt als zuvor – beide Vorgehensweisen sind gleichwertig). Da wir dasselbe Format auch für die Größenänderung verwenden wollen, setzen wir dessen Eigenschaft size auf die in nNeueGroesse festgelegte Zahl. Um die Originalgröße wieder verwenden zu können, weisen wir die Größe des anfänglichen Textformats dem Format tfOrigFarbe zu. Der suboptimale Hüpfer verdankt sich der Tatsache, dass Flash den Registrierungspunkt in einem Textfeld unverrückbar in die linke obere Ecke setzt.

26.7 Text mit Farbverlauf Wenn wir dem gesamten Text einen Farbverlauf zuweisen wollen, müssen wir etwas anders vorgehen als bisher. Abbildung 112 zeigt das Ergebnis unserer Übung. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie in der Bibliothek einen beliebigen Font wie in der ersten Übung gezeigt ein. Wir verwenden hier beispielhaft den Font Candles mit dem Verknüpfungsnamen candles. 3. Fügen Sie in actions als Bildskript folgenden Import-Block ein:  //------------- import –------------  import flash.geom.*;

26.7  Text mit Farbverlauf

379

gehaltenen Verhältnis zueinander. Diese Werte sind recht willkürlich gewählt; Sie sollten also nach Ende der Übung damit experimentieren, um ein besseres Verständnis für ihre Bedeutung zu erhalten. 5. Erweitern Sie das Skript um einen FunktionsBlock:  //------------ functions –----------  function init():Void { Abbildung 112:  Text mit statischem Farbverlauf

 tfTxt.font = „candles“;

4. Fügen Sie in actions als Bildskript folgenden Variablen-Block ein:

 mFarbeffekt = this.createEmptyMovie Clip(„behVerlaufseffekt“, this.getNextHighestDepth());

 //------------ vars –----------------

 var sTxt:String = „Villa Kunterbunt“;  var mFarbeffekt:MovieClip, mTxt:MovieClip, mVerlauf:MovieClip;  var tTxt:TextField;

 var tfTxt:TextFormat = new TextFormat();

 tfTxt.size = 60;

 mTxt = mFarbeffekt. createEmptyMovieClip(„behTxt“, mFarbeffekt.getNextHighestDepth());  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;  tTxt.autoSize = „left“;

 var aFarben:Array = [0xff0000, 0xffaa00, 0xffff00, 0 × 00ff00];

 tTxt.selectable = false;

 var sTyp:String = „linear“;

 mTxt._x = Stage.width/2-mTxt._ width/2;

 var mxVerlauf:Matrix;

 var aAlphas:Array = [100, 100, 100, 100];  var aRatios:Array = [0, 87, 167, 255];

Ja, besagte Villa ist uns ans Herz gewachsen, und so taucht sie auch hier als zu verwendender String sTxt auf. Die folgenden drei Variablen referenzieren jeweils einen MovieClip für einen übergeordneten Behälter, der alle Elemente aufnimmt, einen Behälter für den Text sowie einen Behälter für den Farbverlauf. Auch auf das noch zu erzeugende Textfeld und dessen Textformat wollen wir später in je einer Variablen eine Referenz setzen. Der Verlauf umfasst mehrere Farben, die wir in aFarben festlegen. Er verläuft von Rot über Orange und Gelb zu Grün. Da er mit Hilfe einer Matrix eingerichtet wird, importieren wir das geom-Package mit der benötigten Matrix-Klasse und legen eine entsprechende Variable fest. Den Verlaufstyp definieren wir als „linear“ – alternativ möglich wäre hier „radial“ –, die einzelnen Farben sollen mit 100 % Deckkraft dargestellt werden und stehen in dem in aRatios fest-

 tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

 mTxt._y = Stage.height/2-mTxt._ height/2; }

Fügen Sie abschließend einen Aufruf ein:  //------------- aufruf –------------  init();

Das ist noch nicht sonderlich spektakulär: In Screenmitte wird der anfangs gespeicherte String angezeigt – der aber nicht sichtbar ist, da die Schriftfarbe derjenigen des Hintergrunds entspricht. Sie können dies testen, indem Sie vorübergehend einen weißen Hintergrund für die Bühne wählen. Für den weiteren Verlauf der Übung ist die Schriftfarbe irrelevant. Wir erzeugen wie in den vorhergehenden Übungen einen Behälter, in dem ein Text mit einer bestimmten Formatierung dargestellt wird. Die einzige Neuerung besteht darin, diesen Textbehälter seinerseits in einen Behälter namens mFarbeffekt zu setzen. Er dient uns dazu, alle Elemente, die sich auf den gewünschten Effekt beziehen, aufzunehmen.

380

Kapitel 26  Effekte (Text)

6. Erweitern Sie die Deklaration von init() unmittelbar nach der Initialisierung von mFarbeffekt: mVerlauf = mFarbeffekt.createEmpty­ MovieClip(„behEffekt1“, mFarbeffekt. getNextHighestDepth());

In mVerlauf speichern wir eine Referenz auf einen leeren MovieClip, der später einen Verlauf aufnehmen wird. Wir erstellen ihn vor dem Behälter des Textfeldes, so dass er in der Ebenenhierarchie unter dem Textfeld liegt. Damit bilden wir den Aufbau nach, den wir wählen würden, wenn die Anwendung händisch in der Zeitleiste realisiert würde. 7. Erweitern Sie die Deklaration von init() unmittelbar nach der Positionierung von mTxt:  mVerlauf.lineStyle(0, 0 × 00ff00, 0);  mxVerlauf = new Matrix();

 mxVerlauf.createGradientBox(mTxt._ width, mTxt._height, 0, 0, 0);  mVerlauf.beginGradientFill(sTyp, aFarben, aAlphas, aRatios, mxVerlauf);  mVerlauf.lineTo(mTxt._width, 0);

 mVerlauf.lineTo(mTxt._width, mTxt._ height);  mVerlauf.lineTo(0, mTxt._height);  mVerlauf.lineTo(0, 0);  mVerlauf.endFill();

In der linken oberen Ecke erscheint der Farbverlauf, den Abbildung 113 darstellt. Den gewünschten Verlauf realisieren wir mit Hilfe der Zeichnungsmethoden der MovieClip-Klasse. Dazu muss zunächst ein Linienstil definiert werden. Da wir keine Umrandung benötigen, diese aber aus syntaktischen Gründen erwartet wird, verwenden wir in der Methode lineStyle() eine Strichstärke von 0 Pixeln und eine Deckkraft von 0 %. Danach instanziieren wir die Matrix-Klasse, um auf deren Methode createGradientBox() zuzugreifen. Wir übergeben ihr für die Erzeugung eines Verlaufsrechtecks Breite und Höhe des Textfeldes  – schließlich soll ja nur der Text einen Verlauf erhalten  –, eine Drehung von 0  Grad, sowie eine horizontale und vertikale Position von 0. Der konkrete Verlauf wird durch die Methode beginGradientFill() und die nachfolgenden lineTo() gezeichnet. An beginGradientFill() übergeben wir als Argumente:

Abbildung 113:  Farbverlauf Rot – Gelb – Grün

• Den Verlaufstyp, konkret: ein linearer Verlauf von

links nach rechts. Eine andere Ausrichtung lässt sich einfach bewerkstelligen, indem man beispielsweise der Methode createGradientBox() als drittes Argument einen Winkel ungleich 0 übergibt. So dreht Math.PI den Verlauf um 180 Grad, er reicht also von Grün über Gelb nach Rot. Mit Math.PI/2 erhalten Sie einen vertikalen Verlauf, oben beginnend mit Rot; • Die einzelnen Farben in der Reihenfolge ihres Auftretens, beginnend links (bei einer Drehung von 0 Grad); • Die Deckkraft der Farben; • Die Position der Farben innerhalb des Verlaufs bzw. ihr Verhältnis zueinander; • Die Matrix mit Angaben zu Ausdehnung, Drehung und Position. Beachten Sie, dass die Anzahl der Elemente für Farben, Deckkraft und Verhältnis gleich sein muss, ansonsten weigert sich Flash verständlicherweise, etwas darzustellen. Durch die Größenangabe in der Matrix erfolgt noch keine Darstellung auf dem Screen. Sie wird erst möglich, indem wir ein konkretes Rechteck zeichnen, was über die lineTo()-Befehle geschieht. Der virtuelle Zeichenstift erstellt ein Rechteck ebenfalls in der Größe des Textfelds, wobei die Kanten, beginnend links oben, im Uhrzeigersinn gezeichnet werden. 8. Fügen Sie in der Deklaration von init() nach der Beendigung des Füllvorgangs ein:  mVerlauf._x = mTxt._x;  mVerlauf._y = mTxt._y;

 mVerlauf.setMask(mTxt);

Wenn Sie testen, sehen Sie den Text mit einem Farbverlauf. Wir verwenden den Text einfach als Maske. Dadurch wird im maskierten Objekt alles ausgeblendet, was sich nicht unterhalb des Textes befindet. Damit wir dort den Verlauf sehen können, wird er auf dieselbe Stelle gesetzt wie das Textfeld. Übrigens: Während beim händischen Erstellen, wie oben erwähnt,

26.7  Text mit Farbverlauf

381 Abbildung 114:  Verschiedene Ausrichtungen des Farbverlaufs

die Maskenebene über der maskierten liegen muss, wäre es skripttechnisch möglich, ein auf einer höheren Tiefe befindliches Objekt durch eines auf einer niedrigeren Tiefe zu maskieren. Es wurde darauf hingewiesen, dass eine Drehung des Verlaufs über die Matrix möglich ist. Einige Beispiele visualisiert Abbildung 114. Die Drehung wird erreicht, indem der dritte Parameter für die createGradientBox()-Methode den gewünschten Rotationswert erhält. Bei einer Drehung um Math.PI/2 sehen wir nicht mehr alle Farben des Verlaufs im Text, weil das Rechteck des Verlaufs der Größe des Textfeldes entspricht, dieses aber in der Höhe über die Größe der Buchstaben hinausragt. In diesem Fall müsste man mit der TextFormat-Methode getTextExtent() den erforderlichen Höhenwert auslesen und verwenden. Für unsere Zwecke reicht die bestehende Variante aus. Aus diesem Skript lässt sich eine animierte Version erstellen, dessen Farbverlauf scheinbar endlos lang ist und dessen einzelne Farben nahtlos ineinander übergehen. Die gewählten Farben entsprechen denjenigen der bisherigen Übung. 1. Speichern Sie die bestehende Datei unter einem anderen Namen ab. 2. Fügen Sie im Variablen-Block unmittelbar nach der Deklaration von Variablen des Datentyps MovieClip ein: var mVerlaeufe:MovieClip;

Aus konzeptionellen Gründen reicht es nicht aus, mit einem einzigen Verlauf zu arbeiten (dazu später mehr). Daher benötigen wir hier einen übergeordneten Behälter, um nur die Verläufe aufzunehmen. 3. Erweitern Sie den Variablen-Block am Ende:  var aVerlauf:Array = [];  var nTempo:Number = 12;  var nBreite:Number;

 var nAnzahl:Number = 4;

Diese Verläufe werden später im Array aVerlauf verwaltet. Das Tempo, mit dem wir den Verlauf animieren, wird auf 12 Pixel festgelegt. Außerdem benötigen wir eine Variable, in der die halbe Breite des Textfeldes gespeichert wird. Mit 4 legen wir die Anzahl der Verläufe fest. Alles andere in diesem CodeBlock entspricht der vorherigen Übung. 4. Ersetzen Sie in der Deklaration von init() die Initialisierung von mVerlauf durch: mVerlaeufe = mFarbeffekt.createEmpty­ MovieClip(„behAlleVerlaeufe“, mFarbeffekt.getNextHighestDepth());

Wie erwähnt, wollen wir die einzelnen Verläufe in einen gemeinsamen Behälter integrieren, den wir in mVerlaeufe referenzieren. 5. Ersetzen Sie in der Deklaration von init() alle Zeilen (natürlich mit Ausnahme der schließenden

382

Klammer) nach der Zuweisung der Position von mTxt durch:  mTxt._x = Stage.width/2-nBreite;  mTxt._y = Stage.height/2-Math. floor(mTxt._height/2);  mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nBreite = Math.floor(mTxt._width/2);  for (var i:Number = 0; i< nAnzahl; i++) {  zeichnen(i); }

Um zu verhindern, dass zwischen den einzelnen Verläufen beim Aneinanderreihen sichtbare Nahtstellen entstehen, dürfen wir nur Ganzzahlen verwenden. Unsere einzige Quelle potentieller Fließkommawerte stellt das Textfeld dar, dessen Breite von dem konkreten Inhalt abhängig ist. Das gilt zwar auch für die Höhe, aber dieser Wert ist für die Positionierung der Verläufe irrelevant. Daher speichern wir die halbe Breite des Textfeldes (bzw. des in den Ausmaßen identischen übergeordneten Behälters) in einer Variablen. Wer möchte, kann auch schon bei der Positionierung mit Hilfe von Math.floor() für Ganzzahlen sorgen. Das Zeichnen der eigentlichen Verläufe erfolgt in der per Schleife viermal aufgerufenen Funktion zeichnen(), der die Zählvariable i als Argument übergeben wird. Warum reicht ein Farbverlauf nicht aus? Wir wollen per Skript den Verlauf nach rechts bewegen und müssen dabei darauf achten, dass sich unterhalb des Textes permanent ein Verlauf befindet. Das theoretisch notwendige endlose Farbband simulieren wir einfach, indem wir einen Verlauf, sobald er sich rechts außerhalb des Textes befindet, links vom Text positionieren. Wenn wir nicht mit der BitmapData-Klasse arbeiten, benötigen wir mehrere MovieClips mit Farb-

Kapitel 26  Effekte (Text)

verläufen. Rein rechnerisch würden drei ausreichen, um eine endlose Animation zu erhalten. Allerdings würde an einer Stelle bezüglich der Verläufe ein harter Übergang entstehen, weil dann die letzte Farbe des letzten Verlaufs nicht mit der ersten Farbe des ersten Verlaufs übereinstimmt. Bei einer geraden Anzahl dagegen stellt das kein Problem dar. Unsere Überlegung visualisiert Abbildung 115. 6. Erweitern Sie den Funktions-Block um folgende Deklaration:  function zeichnen(pZaehlvar:Number):Void {

 mVerlauf = mVerlaeufe.createEmpty MovieClip(„behEffekt“+pZaehlvar, pZaehlvar);  mVerlauf.lineStyle(0, 0 × 000000, 0);  mxVerlauf = new Matrix();

 mxVerlauf. createGradientBox(nBreite, mTxt._ height, 0, 0, 0);  mVerlauf.beginGradientFill(sTyp, aFarben, aAlphas, aRatios, mxVerlauf);  mVerlauf.lineTo(nBreite, 0);

 mVerlauf.lineTo(nBreite, mTxt._ height);

 mVerlauf.lineTo(0, mTxt._height);  mVerlauf.lineTo(0, 0);  mVerlauf.endFill();

 mVerlauf._x = mTxt._ x+(nBreite*(pZaehlvar-1));  mVerlauf._y = mTxt._y;  }

Wir haben das Zeichnen der Verläufe in eine eigene Funktion ausgelagert, so dass wir diese so oft aufrufen können, wie sie benötigt wird. Um mehrere eindeutig voneinander unterscheidbare Verläufe zu erhalten,

Abbildung 115:  Aufbau der Animation mit Farbverläufen

26.8  Code

wird die in pZaehlvar übergebene Zählvariable der Schleife verwendet. Sie legt die Instanznamen und Tiefen der jeweils in mVerlaeufe erzeugten MovieClips fest. Der konkrete Zeichenvorgang entspricht dem vorhergehenden, allerdings greifen wir auf die in nBreite gespeicherte Ganzzahl zu und sorgen so dafür, dass ein einzelner Verlauf nur die halbe Breite des Textfeldes umfasst. Bei der Positionierung muss ein Verlauf links neben dem Textfeld, zwei exakt unterhalb des Feldes und einer rechts davon gesetzt werden. Das gelingt, indem wir einfach die Zählvariable verwenden und jeweils 1 subtrahieren. Der erste Wert beträgt dann –1, was zur gewünschten Verschiebung des Verlaufs gegenüber dem Textfeld nach links sorgt. Wirklich nahtlos aneinander passen die Verläufe allerdings noch nicht. Das wäre dann der Fall, wenn der zweite und vierte jeweils gespiegelt werden könnte. 7. Fügen Sie in Deklaration von zeichnen() unmittelbar vor der schließenden Klammer ein: aFarben.reverse();

Die visuell wahrnehmbare Reihenfolge der Farben wird durch den in der Matrix gespeicherten Winkel bzw. durch deren Position im Array aFarben definiert. Mit der Methode reverse() drehen wir diese Reihenfolge nach jedem Zeichenvorgang einfach um, so dass aus der letzen die erste und aus der ersten die letzte Farbe wird. Dadurch generieren wir eine nahtlose Kachelung der Verläufe. 8. Fügen Sie in der Deklaration von init() unmittelbar vor der schließenden Klammer ein:  mVerlaeufe.setMask(mTxt);

 mVerlaeufe.onEnterFrame = animieren;

9. Fügen Sie in der Deklaration von zeichnen() unmittelbar vor der schließenden Klammer ein: aVerlauf.push(mVerlauf);

10. Erweitern Sie den Funktions-Block um folgende Deklaration:  function animieren():Void {

383

 aVerlauf[e]._x –= nAnzahl *aVerlauf[e]._width; } }

}

Es ist nicht möglich, per Skripting verschiedenen MovieClips denselben MovieClip als Maske zuzuweisen. Dieses Problem umgehen wir, indem nicht die einzelnen Verläufe, sondern der übergeordnete Behälter durch den Text maskiert wird. Eine Animation erhalten wir, indem diesem Behälter ein onEnterFrame zugewiesen wird, das permanent die Funktion animieren() aufruft. Sie addiert zur horizontalen Position jedes in aVerlauf gespeicherten MovieClips einen bestimmten Wert hinzu. Da dieser Wert für alle Objekte gleich ist, sieht es so aus, als ob sich ein einziger Verlauf bewegen würde. Tatsächlich führen unsere vier Verläufe eine einzige synchrone Bewegung aus. Die if-Bedingung prüft, ob eines der Objekte den rechten Rand des Textfeldes überschritten hat. Ist das der Fall, verschieben wir es an den linken Rand. Diese Position entspricht der aktuellen Position des betroffenen Verlaufs minus dem Vierfachen seiner Breite. Der Faktor 4 ergibt sich einfach aus der Anzahl der Verläufe. Damit überhaupt etwas in aVerlaeufe enthalten ist, wird das Array in dem Augenblick gefüllt, in dem wir die einzelnen Verläufe innerhalb der Funktion zeichnen() erzeugen.

26.8 Code Ohne Animation: //------------- import –--------------import flash.geom.*;

//--------------- vars –--------------var sTxt:String = „Villa Kunterbunt“; var mFarbeffekt:MovieClip, mTxt:MovieClip, mVerlauf:MovieClip; var tTxt:TextField;

 for (var e in aVerlauf) {

var tfTxt:TextFormat = new TextFormat();

 if (aVerlauf[e]._x>=mTxt._ x+Math.floor(mTxt._width)) {

var mxVerlauf:Matrix;

 aVerlauf[e]._x += nTempo;

var aFarben:Array = [0xff0000, 0xffaa00, 0xffff00, 0 × 00ff00];

384

var sTyp:String = „linear“;

var aAlphas:Array = [100, 100, 100, 100];

var aRatios:Array = [0, 87, 167, 255];

//------------- functions –-----------function init():Void {

 tfTxt.font = „candles“;  tfTxt.size = 60;

 mFarbeffekt = this.createEmptyMovie­ Clip(„behVerlaufseffekt“, this.getNextHighestDepth());  mVerlauf = mFarbeffekt.createEmpty­ MovieClip(„behEffekt1“, mFarbeffekt. getNextHighestDepth());

 mTxt = mFarbeffekt. createEmptyMovieClip(„behTxt“, mFarbeffekt.getNextHighestDepth());  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;  tTxt.autoSize = „left“;

 tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

 mTxt._x = Stage.width/2-mTxt._ width/2;

Kapitel 26  Effekte (Text)

//------------ aufruf –---------------init();

Mit Animation: //------------ import –------–--------import flash.geom.*;

//------------- vars –----------------var sTxt:String = „Villa Kunterbunt“; var mFarbeffekt:MovieClip, mTxt:MovieClip, mVerlauf:MovieClip; var mVerlaeufe:MovieClip; var tTxt:TextField;

var tfTxt:TextFormat = new TextFormat(); var aFarben:Array = [0xff0000, 0xffaa00, 0xffff00, 0 × 00ff00]; var sTyp:String = „linear“;

var aAlphas:Array = [100, 100, 100, 100];

var aRatios:Array = [0, 84, 168, 255]; var mxVerlauf:Matrix;

var aVerlauf:Array = []; var nTempo:Number = 12; var nBreite:Number;

var nAnzahl:Number = 4;

 mTxt._y = Stage.height/2-mTxt._ height/2;

//------------ functions –-------------

 mxVerlauf = new Matrix();

 tfTxt.size = 60;

 mVerlauf.lineStyle(0, 0 × 00ff00, 0);  mxVerlauf.createGradientBox(mTxt._ width, mTxt._height, 0, 0, 0);  mVerlauf.beginGradientFill(sTyp, aFarben, aAlphas, aRatios, mxVerlauf);  mVerlauf.lineTo(mTxt._width, 0);

 mVerlauf.lineTo(mTxt._width, mTxt._ height);  mVerlauf.lineTo(0, mTxt._height);  mVerlauf.lineTo(0, 0);  mVerlauf.endFill();

 mVerlauf._x = mTxt._x;  mVerlauf._y = mTxt._y;

 mVerlauf.setMask(mTxt); }

function init():Void {

 tfTxt.font = „candles“;  mFarbeffekt = this.createEmptyMovie­ Clip(„behVerlaufseffekt“, this.getNextHighestDepth());

 mVerlaeufe = mFarbeffekt.createEmpty MovieClip(„behAlleVerlaeufe“, mFarb­ effekt.getNextHighestDepth());

 mTxt = mFarbeffekt. createEmptyMovieClip(„behTxt“, mFarbeffekt.getNextHighestDepth());  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;  tTxt.autoSize = „left“;

 tTxt.selectable = false;  tTxt.text = sTxt;

 tTxt.setTextFormat(tfTxt);

26.9  Schreibmaschineneffekt

 mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

nBreite = Math.floor(mTxt._width/2);

385

} }

//------------ aufruf –---------------init();

 for (var i:Number = 0; i< nAnzahl; i++) {  zeichnen(i);

26.9 Schreibmaschineneffekt

 mVerlaeufe.setMask(mTxt);

Ebenfalls häufig verwendet wird der sogenannte Schreibmaschineneffekt, bei dem sukzessive Buchstaben angezeigt werden, gegebenenfalls noch untermalt von einem entsprechenden Sound. Er eignet sich sowohl für Überschriften wie für Infotext bzw. Fliesstext, vorausgesetzt, Letzterer überschreitet nicht eine gewisse Länge, da sich ansonsten der Effekt schnell abnutzt. Abbildung 116 verdeutlicht die Animation. In wesentlichen Teilen stimmt der Code mit den Übungen am Kapitelanfang überein, so dass hier eine kurze Beschreibung ausreicht.

}

 mVerlaeufe.onEnterFrame = animieren; }

function zeichnen(pZaehlvar:Number):Void {

 mVerlauf = mVerlaeufe.createEmpty­ MovieClip(„behEffekt“+pZaehlvar, pZaehlvar);

 mVerlauf.lineStyle(0, 0 × 000000, 0);  mxVerlauf = new Matrix();

 mxVerlauf.createGradientBox(nBreite, mTxt._height, 0, 0, 0);  mVerlauf.beginGradientFill(sTyp, aFarben, aAlphas, aRatios, mxVerlauf);  mVerlauf.lineTo(nBreite, 0);

 mVerlauf.lineTo(nBreite, mTxt._ height);

 mVerlauf.lineTo(0, mTxt._height);  mVerlauf.lineTo(0, 0);  mVerlauf.endFill();

 mVerlauf._x = mTxt._ x+(nBreite*(pZaehlvar-1));  mVerlauf._y = mTxt._y;

 aVerlauf.push(mVerlauf);  aFarben.reverse(); }

function animieren():Void {

 for (var e in aVerlauf) {

1. Erstellen Sie eine Standarddatei. 2. Fügen Sie in actions als Bildskript ein:  //-------------- vars –--------------

 var sTxt:String = „\ „Killerspiele\“\n\nSeit Jahren findet in Deutschland eine Diskussion\ nüber gewalthaltige Computerspiele statt. Leider\nzeichnet sie sich mehr durch moralische Wertungen\nals durch wissenschaftlich begründete Aussagen aus.“;  var mTxt:MovieClip;  var tTxt:TextField;

 var nInterval:Number;

 var nIndex:Number = 0;

 var tfTxt:TextFormat = new TextFormat();

 aVerlauf[e]._x += nTempo;

 if (aVerlauf[e]._x>=mTxt._x+Math. floor(mTxt._width)) {  aVerlauf[e]._x –= nAnzahl *aVerlauf[e]._width; }

Abbildung 116:  Schreibmaschineneffekt

386

Im String sTxt speichern wir einen mehrzeiligen Text, der über eine rudimentäre Formatierung in Form von Zeilenumbrüchen („\n“) verfügt. Da die Animation nicht per onEnterFrame erfolgt, definieren wir eine Variable zur Aufnahme einer Intervall-Id. Mit nIndex greifen wir später jeweils auf das nächste Zeichen des Strings zu. 3. Erweitern Sie das vorherige Skript um einen Funktions-Block:  //----------- functions –-----------  function init(pInterval:Number, pPosX:Number, pPosY:Number):Void {  tfTxt.font = „courierN“;  tfTxt.size = 24;

 tfTxt.color = 0 × 000000;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.autoSize = „left“;

 tTxt.selectable = false;

 tTxt.setNewTextFormat(tfTxt);  mTxt._x = pPosX;  mTxt._y = pPosY;

 nInterval = setInterval(einfuegen, pInterval); }

 function einfuegen():Void {

 tTxt.text += sTxt.charAt(nIndex);  nIndex++;

 if (nIndex>=sTxt.length) {

 clearInterval(nInterval); } }

4. Fügen Sie am Ende des Skriptes einen Aufruf ein:

Kapitel 26  Effekte (Text)

Die eigentliche Animation gestaltet sich denkbar einfach: Mit Hilfe von nIndex legen wir fest, welches Zeichen in das Textfeld geschrieben werden muss. Da wir sie mit 0 initialisieren, greift Flash auf das Zeichen an der Position 0, also das erste Zeichen zu, in sTxt zu und hängt es an den im Feld vorhandenen Text (momentan ein leerer String) an. Danach inkrementieren wir nIndex, so dass beim nächsten Intervall das Zeichen an Position 1 genommen wird. Dies geschieht solange, bis das Ende des Strings in sTxt erreicht wird, was der Fall ist, wenn, wie in der if-Bedingung kontrolliert, nIndex mindestens der Länge von sTxt entspricht. Dann löschen wir das Intervall, wodurch die Animation automatisch beendet wird. Wir können einen Textumbruch auch automatisch von Flash durchführen lassen. In dem Fall benötigt das Textfeld eine feste Größe, z. B. 450 Pixel als Breite, und die Eigenschaften multiline sowie wordWrap müssen auf true gesetzt werden. Genau genommen reicht es sogar aus, nur wordWrap zu definieren, da Flash dann automatisch ein mehrzeiliges Textfeld verwendet (merkwürdigerweise bleibt dessen Eigenschaft multiline auf dem bei einem derartigen Feld standardmäßig initialisierten Wert false stehen, obwohl der Text korrekt in mehreren Zeilen dargestellt wird). Logischer ist es jedoch, auch multiline entsprechend zu setzen. Abschließend rufen wir die init()-Funktion auf und übergeben ihr die zeitliche Dauer des Intervalls in Millisekunden sowie die Position des Textfeldes. Wollten wir das Feld per Skript mittig positionieren, müssten wir entweder über getTextExtent() die Feldbreite ermitteln oder, was sich programmiertechnisch einfacher gestaltet, in init() das Feld einmal komplett mit Text befüllen, die benötigten Werte auslesen und anschließend den Text wieder löschen, bevor das Intervall eingerichtet wird. Der Anwender wird davon nichts merken, da Flash den Screen erst dann zeichnet, nachdem das komplette Skript abgearbeitet wurde.

 //------------- aufruf –-------------

26.10 Text einblenden aus Zufallsbuchstaben In einem zeitlichen Abstand von 80 Millisekunden  init(80, 100, 80);

blendet Flash einen Text ein, der sich 100 Pixel vom linken und 80 Pixel vom oberen Rand entfernt befindet.

Das so beliebte Einblenden ist nicht auf Deckkraft und Farbe beschränkt, sondern funktioniert auch mit konkreten Textinhalten. Dabei sieht man zunächst ein

26.10  Text einblenden aus Zufallsbuchstaben

387

5. Fügen Sie folgenden Funktions-Block ein:  //------------ functions –----------  function init():Void { Abbildung 117:  Text einblenden aus Zufallsbuchstaben

 tfTxt = new TextFormat();  tfTxt.font = „candles“;

Feld mit beliebigen Zeichen, die sich dann sukzessive zu einem richtigen Text anordnen. Abbildung  117 zeigt eine Phase einer derartigen Animation. Was die Erstellung des Textes und dessen Formatierung anbelangt, greifen wir wie gewohnt auf bereits Bekanntes zurück. 1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf schwarz. 3. Fügen Sie in der Bibliothek einen beliebigen Font wie in der ersten Übung gezeigt ein. Wir verwenden hier beispielhaft den Font Candles mit dem Verknüpfungsnamen candles. 4. Fügen Sie in actions als Bildskript folgenden Variablen-Block ein:  //------------ vars –---------------  var mTxt:MovieClip;

 tfTxt.size = 40;

 tfTxt.color = 0xffffff;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);  tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);  tTxt.embedFonts = true;  tTxt.autoSize = „left“;

 tTxt.selectable = false;  tTxt.text = „“; }

Wie schon öfters erzeugen wir ein Textfeld, das mit unserem speziellen Format ausgezeichnet wird. Zum Schluss weisen wir ihm einen leeren String zu. Würden wir die Funktion jetzt schon aufrufen, wäre daher notgedrungen wenig zu sehen.

 var tTxt:TextField;

6. Erweitern Sie die Funktion unmittelbar vor der schließenden Klammer:

 var sTxt:String = „Hallo Flasher!“;

 for (var i:Number = nStart; i<=nEnde; i++) {

 var tfTxt:TextFormat;

 var sAlphabet:String = „“;  var nStart:Number = 97;  var nEnde:Number = 122;  var nIndex:Number = 0;

 var nAktuell:Number = 1;  var nAendern:Number = 3;  var nInterval:Number;

Neu gegenüber vorher sind die Variablen ab sAlphabet. In diesem String legen wir fest, welche Zufallszeichen zu verwenden sind. Wir entscheiden uns für die Kleinbuchstaben des lateinischen Alphabets von a bis z. Um die Buchstaben nicht händisch eintragen zu müssen, generieren wir sie später aus einer Zeichentabelle, für die wir die beiden Variablen nStart und nEnde benötigen. Die drei nachfolgenden Variablen verwenden wir, um festzulegen, wann wir auf welches Zeichen zugreifen wollen. Die letzte Variable speichert wie gewohnt eine Intervall-Id.

 sAlphabet += String. fromCharCode(i); }

 for (i = 0; i<sTxt.length; i++) {

 tTxt.text += sAlphabet.charAt(Math. floor(Math.random()*sAlphabet. length)); }

 tTxt.setTextFormat(tfTxt);

7. Fügen Sie am Ende des Skriptes einen Aufruf ein:  //------------ aufruf –-------------  init();

In der linken oberen Ecke taucht nun ein Text auf, der z. B. aus der Rede eines Politikers stammen könnte. In der ersten Schleife generieren die Kleinbuchstaben des Alphabets. Sie lassen sich aus dem UnicodeZeichensatz extrahieren, indem wir mit der Methode

388

Kapitel 26  Effekte (Text)

fromCharCode() auf ihre entsprechende Nummer

zugreifen. Für Kleinbuchstaben handelt es sich um die in nStart und nEnde erfassten Werte, also 97 bis 122, für Großbuchstaben dagegen müssten die Werte 65 – 90 verwendet werden. Dazwischen liegen z. B. Sonderzeichen wie die eckigen Klammern. Wir haben die fraglichen Werte in Variablen gespeichert, so dass sie leicht geändert werden können, um andere Zeichen zu erhalten. In der zweiten Schleife greifen wir entsprechend der Länge des später anzuzeigenden Strings in sTxt mit der Methode charAt() auf ein beliebiges Zeichen in sAlphabet zu und hängen es an den im Textfeld enthaltenen Text sukzessive an. Die für den Zugriff verwendete Zufallszahl bewegt sich zwischen 0, was dem Buchstaben „a“ entspricht, und der Länge von sAlphabet  – 1 (aufgrund von Math.floor(), das abrundet), also 25, was den Buchstaben „z“ ergibt. Wir orientieren uns bei den Schleifendurchläufen deshalb an der Länge des korrekten Textes, um genau so viele Zufallszeichen zu erhalten. Wurde der Text vollständig erzeugt, erhält das Textfeld unser Format tfTxt.

Alle 200 Millisekunden wird jetzt die Funktion buchstaben() aufgerufen. 11. Fügen Sie im Funktions-Block die Deklaration von buchstaben() ein:  function buchstaben():Void {

 for (var i:Number = nIndex; i<sTxt.length; i++) {

 tTxt.text += sAlphabet. charAt(Math.floor(Math. random()*sAlphabet.length)); }

}

Wenn Sie testen, ändert Flash in der Tat Zeichen – aber nur, indem an den bestehenden Text im Feld neue Zufallszeichen angehängt werden. Verantwortlich dafür ist die Schleife, die nahezu identisch mit derjenigen ist, die in init() für das zufällige Füllen des Textfeldes gesorgt hat. Der entscheidende Unterschied besteht im Startwert der Zählvariablen i, der jetzt durch nIndex definiert wird.

8. Erweitern Sie die Funktion init() unmittelbar vor der schließenden Klammer:

12. Erweitern Sie die Deklaration von buchstaben() vor der Schleife:

 mTxt._x = Stage.width/2-mTxt._ width/2;

 var sRichtig:String = sTxt.substr(0, nIndex);

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(buchstaben, pInterval);

Erst jetzt, nachdem der konkrete Inhalt zugewiesen wurde, können wir das Textfeld in der Screenmitte positionieren. Damit sind die Vorbereitungen abgeschlossen und es wird eine noch zu definierende Funktion buchstaben() per Intervall aufgerufen. Wir hätten hier mit einem konkreten Wert für die Millisekunden arbeiten können, sind jedoch flexibler, wenn ein Parameter verwendet wird. 9. Erweitern Sie die Deklaration von init() im Kopf um den verwendeten Parameter (Fettdruck):  function init(pInterval:Number):Void {

10. Erweitern Sie den Aufruf von init() um einen entsprechendes Argument (Fettdruck):

init(200);

 tTxt.text = sRichtig;

Jetzt werden nur noch die Zeichen im Textfeld geändert, ohne es zu erweitern. Wir legen eine lokale Variable an, um diejenigen Zeichen aufzunehmen, die bereits dem korrekten Text entsprechen. Um welche es sich dabei handelt, legen wir durch die Variable nIndex fest. Es gelten alle Zeichen von Index 0 bis zur in nIndex enthaltenen Zahl als richtig. Da am Anfang noch kein richtiges Zeichen in das Textfeld geschrieben wurde, beträgt nIndex natürlich 0. Den Inhalt des Textfeldes ersetzen wir jedes Mal durch den Inhalt von sRichtig. Momentan handelt es sich dabei allerdings um einen leeren String, was sich erst ändert, wenn nIndex inkrementiert wird. 13. Fügen Sie in der Deklaration von buchstaben() unmittelbar vor der schließenden Klammer ein:

nIndex++;

Aus dem bisherigen Buchstabengewirr entsteht nun recht schnell der gewünschte Text.

26.11  Code

389

Da wir in sRichtig jeweils einen Teilstring aus dem korrekten Text extrahieren, der bis zu der Stelle reicht, die durch nIndex definiert wird, führt dessen Inkrement dazu, dass nach wenigen Schritten der vollständige Text vorliegt. Der zufällige Buchstabensalat rutscht, da er ebenfalls von nIndex abhängt, immer weiter nach rechts, bis er vollständig verschwunden ist.

nAktuell zurück auf dessen Anfangswert. Dadurch

14. Fügen Sie in buchstaben() unmittelbar vor der schließenden Klammer ein:

26.11 Code

 if (sRichtig.length == sTxt.length) {  trace(„habefertisch!“);

 clearInterval(nInterval);

}

Bisher fehlte eine Abbruchbedingung, so dass die Funktion selbst dann ausgeführt wurde, wenn der korrekte Text schon längst vorlag. Das ändern wir durch eine Abfrage, ob die Länge des in sRichtig gespeicherten Strings derjenigen des korrekten Strings von sTxt entspricht. Ist das der Fall, so wissen wir, dass der gewünschte Text in sRichtig erfasst und dem Textfeld zugewiesen wurde. Dann beenden wir die Funktion, indem das Intervall gelöscht wird. Den trace()-Befehl rufen wir nur auf, um eine sichtbare Rückmeldung über das Ende zu erhalten. In Ihrem konkreten Projekt verzichten Sie darauf bzw. ersetzen ihn durch eine eigene Funktion, die ausgeführt werden soll, wenn die Animation endet. Momentan wird bei jedem Durchlauf ein korrekter Buchstabe ermittelt. Das kann man beliebig anpassen. 15. Ersetzen Sie das Inkrement von nIndex durch:  nAktuell++;

erreichen wir, dass z. B. nur bei jedem zweiten Durchlauf ein korrekter Buchstabe erscheint. Das Tempo der Animation bzw. ihre Dauer können Sie somit sowohl durch den beim Aufruf von init() übergebenen Wert wie auch durch den Wert von nAendern steuern.

//--------------- vars –--------------var mTxt:MovieClip; var tTxt:TextField;

var tfTxt:TextFormat;

var sTxt:String = „Hallo Flasher!“; var sAlphabet:String = „“; var nStart:Number = 97; var nEnde:Number = 122; var nIndex:Number = 0;

var nAktuell:Number = 1; var nAendern:Number = 3; var nInterval:Number;

//------------- functions –------------

function init(pInterval:Number):Void {  tfTxt = new TextFormat();  tfTxt.font = „candles“;  tfTxt.size = 40;

 tfTxt.color = 0xffffff;

 mTxt = this. createEmptyMovieClip(„behTxt“, 0);

 if (nAktuell == nAendern) {

 tTxt = mTxt.createTextField(„tf“, 1, 0, 0, 0, 0);

 nIndex++;

 tTxt.autoSize = „left“;

 nAktuell = 1;

 tTxt.embedFonts = true;



 tTxt.selectable = false;

}

Natürlich muss nIndex nach wie vor inkrementiert werden, sonst werden nie korrekte Buchstaben erscheinen. Aber wir verändern den Zeitpunkt, zu dem dies geschieht. Zunächst inkrementieren wir bei jedem Durchlauf nAktuell und wir weisen wie bisher Zufallszeichen zu. Erst dann, wenn nAktuell dem in nAendern gespeicherten Wert entspricht, erfolgt das Inkrementieren von nIndex. Gleichzeitig setzen wir

 tTxt.text = „“;

for (var i:Number = nStart; i<=nEnde; i++) {  sAlphabet += String. fromCharCode(i); }

 for (i = 0; i<sTxt.length; i++) {

390

 tTxt.text += sAlphabet.charAt(Math. floor(Math.random()*sAlphabet. length)); }

 tTxt.setTextFormat(tfTxt);

 mTxt._x = Stage.width/2-mTxt._ width/2;

 mTxt._y = Stage.height/2-mTxt._ height/2;

 nInterval = setInterval(buchstaben, pInterval);

Kapitel 26  Effekte (Text)

 nIndex++; }

 if (sRichtig.length == sTxt.length) {  trace(„habefertisch!“);

 clearInterval(nInterval); } }

//-------------- aufruf –-------------init(200);

}

function buchstaben():Void {

 var sRichtig:String = sTxt.substr(0, nIndex);  tTxt.text = sRichtig;

 for (var i:Number = nIndex; i<sTxt. length; i++) {

 tTxt.text += sAlphabet.charAt(Math. floor(Math.random()*sAlphabet. length)); }

 tTxt.setTextFormat(tfTxt);  nAktuell++;

 if (nAktuell == nAendern) {  nAktuell = 1;

26.12 Weitere Effekte Wir haben hier wirklich nur einen Bruchteil dessen ansprechen können, was an Texteffekten möglich ist. Dabei stand weniger die ästhetische als vielmehr die programmiertechnische Umsetzung im Vordergrund. Die vorgestellten Skripte sollten Sie als Anregung nehmen, eigene Effekte zu entwickeln. Erfolgreiche Designer wie Hillman Curtis, Brendan Dawes u. a. haben schon vor vielen Jahren gezeigt, welches typografische Potential in Flash steckt, wenn man seine Animationsmöglichkeiten konsequent ausreizt.

27

Effekte (Grafik)

Trotz ihrer Unterschiedlichkeit lassen sich die Bildeffekte i. d. R. in eine der folgenden Kategorien einteilen:

• Direkte Manipulation von Bildeigenschaften, ins-

besondere Farbe und Deckkraft; • Verwendung von Masken, um einzelne Bildbereiche freizulegen bzw. abzudecken; • Zugriff auf die Grafik API von Flash mit Hilfe der Zeichnungsmethoden, BitmapData- sowie FilterKlassen. Natürlich können auch Mischformen auftreten, die aber ihrerseits die Methoden der genannten Kategorien einsetzen. Die Menge der existierenden Effekte ist unüberschaubar groß, denn gerade in diesem Bereich kann Flash seine besonderen Stärken voll zur Geltung bringen. Wann immer Sie im Internet auf animierte grafische Effekte stoßen, besteht daher eine große Wahrscheinlichkeit, dass diese mit Flash realisiert wurde. Aus dieser Fülle können nachfolgend nur einige wenige willkürlich ausgewählte Beispiele vorgestellt

werden, die zu einer intensiveren Beschäftigung mit der Thematik anregen sollen.

27.1 Einfärben über einzelne Farbkanäle Wir haben bei der Besprechung der ColorTransformKlasse gesehen, wie wir auf die einzelnen Farbkanäle einer RGB-Grafik zugreifen können. Hier setzen wir unser Wissen an einem konkreten Beispiel um, bei dem der Anwender gezielt eine Grafik einfärben kann. In Abbildung 118 sehen Sie den Aufbau unseres Beispiels. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie eine beliebige Grafik in die Bibliothek. 3. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfungsname mcBild). 4. Fügen Sie die importierte Grafik auf der Position 0,0 in mcBild ein.

Abbildung 118:  Färben über einzelne Farbkanäle A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

391

392

Kapitel 27  Effekte (Grafik)

5. Erstellen Sie einen leeren MovieClip (Bibliotheksname mcFlaeche). 6. Zeichnen Sie in mcFlaeche auf der Position -3,0 ein Rechteck (6 × 256, Farbe beliebig). 7. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfungsname mcSlider). 8. Benennen Sie dort die bestehende Ebene um in flaeche. 9. Fügen Sie dort auf -3,0 mcFlaeche ein. 10. Weisen Sie dem eingefügten MovieClip den Instanznamen flaeche zu. 11. Fügen Sie eine neue Ebene namens rahmen ein. 12. Erstellen Sie dort auf -3,0 ein nicht gefülltes Rechteck mit der Linienstärke 1 in der Größe von flaeche. Damit erhält die Farbfläche einen Rahmen. Die Trennung in zwei verschiedene Objekte ist notwendig, da wir später per Actionscript die Fläche, die unsere Farbkanäle anzeigen soll, einfärben werden. 13. Erstellen Sie einen leeren MovieClip (Bibliotheksname und Verknüpfungsname mcKnob). 14. Zeichnen Sie dort ein Objekt, das wir als Anfasser für die Farbeinstellung verwenden können. Das Objekt sollte eine Größe von 16 × 8 Pixeln haben und in der Screenmitte angeordnet werden (–8,–4). 15. Kehren Sie zur Hauptzeitleiste zurück. 16. Weisen Sie actions folgendes Bildskript zu:

wendung zuweisen wollen, speichern wir in einem Array. Da wir mit mehreren MovieClips arbeiten müssen, legen wir jeweils eine Variable an, um sie einfacher referenzieren zu können. Anschließend definieren wir eine weitere Variable, die zu einem späteren Zeitpunkt festlegen soll, wieweit sich ein Slider bewegen kann. In den beiden letzten Variablen wird jeweils ein ClorTransform und ein TransformObjekt instanziiert, so dass später der Zugriff auf die Farbeigenschaften der Grafik und ihre Manipulation möglich ist. 17. Fügen Sie folgenden Funktions-Block nach dem bisherigen Code:  //------------ functions –---------  function init() {

 ctColor = new ColorTransform();



 mBild._x = 10;





m Bild = this.attachMovie(„mcBild“, „bild“, this.getNextHighest­ Depth());  mBild._y = 20; }

18. Erweitern Sie das Skript am Ende um den Aufruf der init()-Funktion:  //------------- aufruf –-----------

init(); 



var nGrenze:Number; 

In der linken oberen Ecke wird beim Testen die von Ihnen importierte Grafik angezeigt. Wir initialisieren in der init()-Funktion die für das ColorTransform-Objekt angelegte Variable. Sie wird jetzt benötigt, um innerhalb einer nachfolgenden Schleife die einzelnen Farbbalken einzufärben. Anschließend wird das importierte Bild mit der attachMovie()-Methode auf der Bühne eingefügt. Falls gewünscht, können Sie die Positionsangaben auch als Parameter definieren und beim Aufruf von init() als Argumente übergeben.



var trMC:Transform; 

19. Erweitern Sie die init()-Funktion nach der Positionierung von mBild:

 //------------ import –------------

import flash.geom.*; 

 //-------------- vars –------------  var aKnobs:Array = [[„0xff0000“, „redOffset“], [„0 × 00ff00“, „greenOffset“], [„0 × 0000ff“, „blueOffset“]];  var mSlider:MovieClip, mPart:MovieClip, mBild:MovieClip;

var ctColor:ColorTransform; 

Um die einzelnen Farbkanäle ansprechen zu können, benötigen wir zwei Klassen des geom-Packages, das am Anfang importiert wird. Unsere Anwendung umfasst drei Slider, die jeweils einen anderen Farbkanal steuern. Auf welchen sie Einfluss nehmen und welche Farbe wir ihnen beim Einfügen in die An-



Slider = this. m createEmptyMovieClip(„slider“, this. getNextHighestDepth()); or (var i:Number = 0; i
27.1  Einfärben über einzelne Farbkanäle







m Part = mSlider. attachMovie(„mcSlider“, „slider“+i, mSlider.getNextHighestDepth());  mPart._x = i*40;

 mPart._y = -mPart._height/2;

c tColor.rgb = Number(aKnobs[i] [0]); t rMC = new Transform(mPart. flaeche);

 trMC.colorTransform = ctColor;

m Part = mSlider. attachMovie(„mcKnob“, „knob“+i, mSlider.getNextHighestDepth());  mPart._x = i*40; }

nGrenze = mSlider._height/2; 

ar nBreite:Number = Stage.widthv (mBild._x+mBild._width); Slider._x = mBild._x+mBild._ m width+(nBreite/2)-mSlider._ width/2+mPart._width/2;

Slider._y = mBild._y+mSlider._ m height/2;

Rechts neben dem Bild blendet Flash drei Slider ein, die durch ihre Färbung (Rot, Grün, Blau) jeweils einen der Farbkanäle symbolisieren. Zunächst benötigen wir einen Behälter, um die einzelnen Slider anzeigen zu können. Dazu verwenden wir einen leeren MovieClip, der in mSlider referenziert wird. In der folgenden Schleife werden mit Hilfe der attachMovie()-Methode die in den ersten Schritten vorbereiteten MovieClips mcSlider und mcKnob jeweils dreimal eingefügt und in der Variablen mPart referenziert. In horizontaler Richtung sorgen wir dafür, dass alle Slider bzw. Farbrechtecke 40 Pixel voneinander entfernt angeordnet werden. Vertikal verschieben wir sie um ihre halbe Höhe nach oben. Dadurch ist es einfacher, ausgehend von der aktuellen Position zwei Wertebereiche, einen negativen sowie einen positiven, zu erhalten. Denn für die Addition bzw. Subtraktion des jeweiligen Farbanteils benötigen wir einen Zahlenbereich von 0 bis 255 und von 0 bis -255 (bzw. einem beliebigen Vielfachen von 255). Der Koordinatenursprung von mSlider gibt uns den benötigten 0-Wert. Die übrigen Werte ergeben sich aus der Position der betreffenden Anfasser in Relation zum Koordinatenursprung.

393

Das zuvor definierte Array enthält innerhalb der einzelnen Elemente jeweils an der Indexposition 0 die pro Farbbalken benötigte Farbe. Zum Einfärben verwenden wir das eingangs eingerichtete ColorTransform-Objekt, dessen Eigenschaft rgb den an der betreffenden Position im Array aufgenommenen Wert erhält. Dabei handelt es sich um 0xff0000 (Rot), 0 × 00ff00 (Grün) und 0 × 0000ff (Blau), d. h. ein roter, grüner und blauer Balken werden in dieser Reihenfolge eingefügt. Den konkreten Bezug zu den Balken stellen wir über ein in trMC gespeichertes TransformObjekt her, dem wir die jeweils zu färbende Fläche als Argument übergeben. Das konkrete Einfärben erfolgt, sobald wir der colorTransform-Eigenschaft des Transform-Objekts das ColorTransform-Objekt zuweisen. Anschließend fügen wir jeweils die zugehörigen Anfasser ein, wobei zur Referenzierung aus Gründen der Vereinfachung dieselbe Variable mPart verwendet wird, die zuvor unsere Farbbalken aufgenommen hat. Das ist insofern problemlos möglich, als wir im weiteren Verlauf des Skripts keinen Bezug zu diesen Balken mehr benötigen, wir also durch das erneute Zuweisen der Variablen keinen Inhalt unbeabsichtigt überschreiben. Die horizontale Position der Anfasser stimmt mit derjenigen der Balken überein. Da keine Angaben bezüglich der vertikalen Position gemacht werden, setzt Flash unsere Anfasser einfach auf 0, was dem oben erwähnten 0-Wert für die Addition bzw. Subtraktion der Farbanteile entspricht. Nach dem vollständigen Einfügen der einzelnen Elemente ist es möglich, Werte zu berechnen, die von der Ausdehnung von mSlider abhängig sind. Dazu zählen:

• nGrenze, also der Wert, um den ein Anfasser nach

unten bzw. nach oben verschoben werden kann. Er entspricht in beide Richtungen der halben Höhe von mSlider und findet an späterer Stelle Verwendung; • _x und _y, also die Position von mSlider. In unserem Fall ordnen wir mSlider auf dem rechts neben dem Bild verfügbaren freien Platz horizontal mittig an. Dazu berechnen wir in der nur an dieser Stelle benötigten lokalen Variablen nBreite die Breite des rechts zur Verfügung stehenden Raumes. Er entspricht der Gesamtbreite der Bühne minus aller Objekte, die bereits vor mSlider eingefügt wurden. Konkret handelt es sich dabei um das zu färbende Bild. Als horizontale Position ergibt sich

394

Kapitel 27  Effekte (Grafik)

linker Rand des zur Verfügung stehenden Raums zuzüglich halbe Breite dieses Raums abzüglich halbe Breite von mSlider. Nehmen wir die halbe Raumbreite, befinden wir uns exakt in der Mitte des zur Verfügung stehenden Raums. Von dort aus muss mSlider nach links um dessen halbe Breite verschoben werden, da sich der Registrierungspunkt in mSlider ungefähr in der linken oberen Ecke befindet. Schließlich muss noch ein geringer Wert, nämlich die halbe Breite des Anfassers, verrechnet werden, da der Anfasser links über den Registrierungspunkt von mSlider hinausragt. Die Berechnung der vertikalen Position ist einfacher. Dazu verwenden wir lediglich die Position des Bildes zuzüglich der halben Höhe von mSlider. Diese Addition ist notwendig, weil die Farbbalken beim Einfügen um ihre halbe Höhe nach oben versetzt wurden. Würde der Versatz hier nicht berücksichtigt, läge mSlider am oberen Bildrand und würde über diesen hinausragen. 20. Fügen Sie innerhalb der init()-Funktion in der for-Schleife unmittelbar vor deren schließender Klammer ein:

mPart.nIndex = i; 



 this.onEnterFrame = function() {



t his._y = this._parent._ ymouse;





mPart.onPress = function() { 

i f (this._parent._ymouse>=nGrenze && this._parent._ ymouse<=nGrenze) {

c tColor[(aKnobs[this.nIndex] [1])] = this._y*2;

 trMC.colorTransform = ctColor;

}

};



Part.onRelease = mPart. m onReleaseOutside=function () {





};

 delete this.onEnterFrame; };

Falls Sie jetzt schon testen, können Sie zwar einfärben, aber es handelt sich ganz offensichtlich um das falsche Objekt: Statt des Bildes färbt sich der für den Blauton zuständige Farbbalken. Da wir aus dem vorhergehenden Code noch den Bezug zu diesem Balken

gespeichert haben, erhalten wir diesen ungewollten Effekt. 21. Fügen Sie innerhalb von init() unmittelbar nach der Positionsberechnung von mSlider ein:

ctColor = new ColorTransform();  trMC = new Transform(bild); 

Jetzt sind Sie in der Lage, das Bild pro Farbkanal einzufärben. Allerdings verhalten sich die Anfasser noch etwas ungewöhnlich, was die Addition und Subtraktion der Farbanteile anbelangt. Pro Anfasser muss eine andere Eigenschaft von ctColor angesprochen werden: Der Anfasser des roten Balkens bezieht sich auf redOffset, derjenige des grünen auf greenOffset, und derjenige des blauen auf blueOffset. Diesen Bezug speichern wir einfach in einer pro Anfasser eingerichteten Variablen, die mit dem beim Einfügen aktuellen Wert der Zählvariablen i übereinstimmt. Denn wenn i beispielsweise 0 beträgt, erzeugt Flash den roten Balken inklusive Anfasser. Klicken wir später auf diesen Anfasser, müssen wir ebenfalls mit diesem Wert auf das Array aKnobs zugreifen, um herauszufinden, welche Eigenschaft (konkret: redOffset) angesprochen werden muss. Jeder Anfasser verfügt über ein onPress-Ereignis, das ein onEnterFrame initiiert. Abhängig von der aktuellen Position, die faktisch der y-Position der Maus entspricht, um ein Ziehverhalten zu realisieren, errechnet Flash den gewünschten Farbwert. Dabei ist folgendes zu beachten:

• In der if-Bedingung sorgen wir dafür, dass der

Anfasser nicht über bestimmte Grenzwerte hinaus gezogen werden kann. Die Grenze ergibt sich, wie zuvor erwähnt, nach oben und nach unten jeweils durch die halbe Höhe des Farbbalkens; • Da uns aufgrund der halben Höhe nach oben und nach unten jeweils nur 128 Pixel zur Verfügung stehen, die betreffenden Farbwerte jedoch jeweils 256 verschiedene Abstufungen umfassen, multiplizieren wir einfach die vertikale Position mit 2. Verschieben wir beispielsweise einen Anfasser um 10 Pixel, ergibt sich ein Wert von 20 für den Offset des betroffenen Farbkanals. Zwar kann man infolgedessen rein rechnerisch als höchsten Wert 256 erhalten, während der Offset maximal 255 (von 0 bis 255, woraus sich 256 verschiedene Werte ergeben) betragen darf. Doch liest Flash alle darüber liegenden Werte automatisch als 255, so dass kein

27.1  Einfärben über einzelne Farbkanäle

Fehler auftritt. Bestimmte Werte, nämlich alle ungeraden Zahlen, tauchen aufgrund unserer Berechnung nicht auf. Das ist jedoch zu vernachlässigen, da wir optisch ohnehin nicht in der Lage sind, derart feine Abstufungen wahrzunehmen. Welcher Offset durch Bewegen eines Anfassers betroffen ist, ergibt sich aus dem Array aKnobs. Wurde z. B. der dritte Anfasser verschoben, greifen wir innerhalb von aKnobs auf dasjenige Element zu, das sich an Index 2 befindet. Innerhalb dieses Elements wurde an zweiter Stelle, also an Index 1, die gesuchte Information gespeichert. In unserem Beispiel ergibt sich die Eigenschaft blueOffset. Sie wird mit Hilfe von ctColor[(aKnobs[this.nIndex][1])] angesprochen, so dass Flash diesen Ausdruck aufgrund des Klammer-Operators (konkret: die eckigen Klammern) auswertet als ctColor.blueOffset. Sobald wir diese Änderung an das Transform-Objekt, das in trMC gespeichert ist, übergeben erfolgt die Einfärbung. Um zu verhindern, dass nach dem Loslassen der Anfasser weiterhin Farbänderungen erfolgen, wird das onEnterFrame beim Auftreten von onRelease sowie onReleaseOutside einfach gelöscht. Merkwürdigerweise führt ein Verschieben der Anfasser nach oben zu einer Reduktion, nicht zu einer Erhöhung des betreffenden Farbanteils, wie man intuitiv erwarten würde. Der Grund liegt in der unveränderten Übernahme negativer bzw. positiver Werte in Abhängigkeit von der Position der Anfasser. Wenn wir sie nach oben verschieben, ergeben sich negative Werte für die y-Position und daher negative Werte für den betreffenden Offset. Korrekt wäre jedoch ein gerade umgekehrtes Verhalten. 22. Ergänzen Sie innerhalb des onPress-Ereignisses die Berechnung des jeweiligen Offsets der Farbkanäle (Fettdruck):

tColor[(aKnobs[this.nIndex][1])] = c this._y*2 *-1;

Beim Testen verhalten sich die Anfasser entsprechend unserer Erwartungen. Alternativ zur hier gewählten Vorgehensweise kann man die Farbbalken innerhalb von mSlider auf der vertikalen Position 0 einfügen und dementsprechend die Anfasser um 128 Pixel nach unten verschieben. In dem Fall stehen für eine Bewegung der Anfasser allerdings nur positive Werte zur Verfügung – denn der kleinste zulässige Positionswert beträgt 0. Die Mitte

395

unsere Werteskala liegt dann bei 128 anstatt wie zuvor bei 0. In dem Fall müssen wir den entsprechenden Wert etwas anders berechnen: ctColor[(aKnobs[this.nIndex][1])] = (this._y * 2  – 256)*–1; Experimentierfreudige Naturen unter den Lesern werden feststellen, dass man allzu schnell die Farbbalance des Bildes durcheinander bringen kann. Hilfreich wären beispielsweise Zahlenangaben, um wieder exakt den Ausgangszustand herstellen zu können, oder, besser noch, eine entsprechende Schaltfläche mit der gewünschten Funktionalität. 23. Erweitern Sie den Variablen-Block um folgende Deklarationen (Fettdruck):  var mSlider:MovieClip, mPart:MovieClip, mBild:MovieClip, mReset:MovieClip; var tfReset:TextField;

24. Fügen Sie in init() innerhalb der for-Schleife unmittelbar vor dem Speichern der Zählvariablen i ein:

aKnobs[i].push(mPart);

25. Fügen Sie in der Deklaration von init() unmittelbar vor der schließenden Klammer ein:

Reset = mSlider. m createEmptyMovieClip(„reset“, mSlider.getNextHighestDepth());

Reset._x = mSlider._width/2-mPart._ m width/2; mReset._y = nGrenze+10; 

fReset = mReset. t createTextField(„btnReset“, 1, 0, 0, 1, 1); tfReset.autoSize = „center“; 

fReset.text = „Farben wiederhert stellen“; mReset.onPress = function() { 

t rMC.colorTransform = new ColorTransform(); f or (var i:Number = 0; i
}

396



Kapitel 27  Effekte (Grafik)

 ctColor = new ColorTransform(); };

Unterhalb der Farbbalken sehen Sie jetzt ein Textfeld, das bei Klick alle Farbänderungen rückgängig macht und die Anfasser auf ihre ursprüngliche Position zurück setzt. Im Variablen-Block legen wir zwei neue Variablen an, in denen wir später das Textfeld mit der Beschriftung und den zugehörigen MovieClip, der als Schaltfläche fungieren soll, referenzieren. Um alle Anfasser ansprechen zu können, werden die benötigten Referenzen in aKnobs gespeichert, sobald wir die Objekte auf der Bühne einfügen. Alternativ kann man ein eigenes Array einrichten, falls man nicht auf aKnobs zugreifen möchte. Am Ende von init() wird ein leerer MovieClip als Behälter für das erwähnte Textfeld angelegt. Wir positionieren ihn horizontal mittig in Relation zu den Farbbalken sowie vertikal unterhalb der Balken. Sein Inhalt besteht aus einem dynamischen Textfeld, das im Koordinatenursprung des MovieClips erzeugt wird. Die Ausdehnung des Textfelds wird hier aus formalen Gründen mit bestimmten Werten initialisiert, faktisch bestimmt jedoch der zugewiesene Text, nämlich der String „Farben wiederherstellen“, die tatsächliche Größe. Über die Eigenschaft autoSize legen wir fest, dass der Text mittig ausgerichtet wird. Der MovieClip erhält ein onPress-Ereignis, das den bisherigen Inhalt der colorTransformEigenschaft des Transform-Objekts mit einem neuen ColorTransform-Objekt überschreibt. Faktisch löschen wir damit die vorherigen Änderungen. Gleichzeitig positionieren wir alle Anfasser, die zuvor in aKnobs gespeichert wurden, wieder auf ihrer Ausgangsposition 0. Sie reflektieren damit wieder den Ausgangszustand, bei dem noch keine Farbänderungen vom User vorgenommen wurden. Zum Schluss müssen wir die Farbinformationen in ctColor löschen, denn dort sind ja noch nach wie vor diejenigen Änderungen der Offsets enthalten, die gegebenenfalls durch ein Verschieben der Anfasser erreicht wurden. Wir haben der Einfachheit halber die Länge der Balken so angelegt, dass eine schnelle Umrechnung von vertikaler Position und gewünschter Einfärbung möglich wird. Wer mit anderen Längen arbeitet, muss eine Relation zum erforderlichen Wertebereich herstellen. Nehmen wir an, die gewählte Balkenlänge beträgt nur

100 Pixel, so dass im positiven wie negativen Bereich je 50 Pixel zur Verfügung stehen. Dann entspricht ein einzelner Pixel einem Bereich von ca. 5 Werten. Wenn ein Anfasser um einen Pixel verschoben wird, ändert sich der Anteil der betreffenden Farbe um das Fünffache dieser Zahl. Die im konkreten Fall notwendige Relation ergibt sich aus 256/Länge des Bereichs. Das Ergebnis stellt den Faktor dar, mit dem der ermittelte Pixelwert multipliziert werden muss. Soll das Bild einen Schatten erhalten, lässt sich dieser mit einem DropShadowFilter leicht hinzufügen. Beachten Sie allerdings, dass sich die Einfärbung der Grafik auch auf den Schatten auswirkt. 26. Erweitern Sie den import-Block um:

import flash.filters.*;

27. Erweitern Sie die Variablendeklaration um:

var fSchatten:DropShadowFilter;

28. Fügen Sie innerhalb der init()-Funktion vor der Initialisierung von mSlider ein:  fSchatten = new DropShadowFilter(8, 45, 0 × 333333, 80, 5, 5, 1, 3);

mBild.filters = [fSchatten]; 

Um auf den Schattenfilter zugreifen zu können, importieren wir die benötigte Filter-Klasse (bzw. das übergeordnete Filter-Package). Anschließend legen wir eine Variable an, um einen DropShadowFilter zu instanziieren. Da er erst in der init()-Funktion benötigt wird, erzeugen wir unmittelbar vor Einrichten der Farbbalken für den Slider einen entsprechenden Filter mit folgenden Eigenschaften:

• Entfernung 8 Pixel • Winkel 45 Grad • Farbe dunkelgrau • Deckkraft 80 % • Weichzeichnen in x- und y-Richtung je 5 Pixel • Stärke 100 % • Qualität 3. Danach erhält die Grafik unseren Filter. 29. Beim Testen erhöhen Sie den Farbanteil beispielsweise des Rotkanals. Das Ergebnis zeigt Abbildung 119. Der ehemals dunkelgraue Schatten färbt sich rot ein.

27.2  Code

397 Abbildung 119:  Einfärbung eines per Filter-Klasse erstellten Schattens

Trotz der Farbangabe bei der Einrichtung des Filters (0 × 333333) wird der Schatten nicht unabhängig von der Grafik erstellt. Flash sieht ihn als untrennbaren Bestandteil, so dass sich die Farbänderungen der Grafik auch auf den Schatten auswirken. Das macht insofern Sinn, als auch in der Realität Objekte auf ihre Umgebung „ausstrahlen“, zumindest, soweit wir es wahrnehmen können. Nicht immer ist jedoch ein derartiges Verhalten erwünscht. In dem Fall bleibt nichts anderes übrig als mit einem zweiten Objekt zu arbeiten, das alleine für den Schatten zuständig ist. 30. Ergänzen Sie den Variablen-Block um folgende Deklaration: var mSchatten:MovieClip;

31. Fügen Sie innerhalb der init()-Funktion unmittelbar vor der Initialisierung von fSchatten ein: m Schatten = this. attachMovie(„mcBild“, „schatten“, -10);  mSchatten._x = mBild._x;  mSchatten._y = mBild._y;

32. Ändern Sie die Zuweisung des Schattens (Fettdruck): mSchatten.filters = [fSchatten];

Wenn Sie wie zuvor testen, bleibt der Schatten dunkelgrau, egal, welche Farbänderungen Sie an der Grafik vornehmen. Der zugrunde liegende Gedanke ist einfach: Wenn wir unter die bestehende Grafik eine exakte Kopie legen und nur dieser einen Schatten zuweisen, können Änderungen an der darüber liegenden Grafik sich nicht

auf den Schatten auswirken. Denn beide Grafiken stellen nun faktisch voneinander unabhängige Objekte dar. Dazu legen wir eine neue Variable für die Kopie an. In diese Variable referenzieren wir das zum zweiten Mal eingefügte große Bild, legen es aber auf einer negativen Tiefe ab, so dass es sich innerhalb der Ebenenhierarchie auf jeden Fall unterhalb derjenigen Grafik befindet, an der wir Farbänderungen vornehmen. Um es zu verdecken, positionieren wir beide Bilder auf den gleichen Werten. Schließlich weisen wir den Schattenfilter nicht mehr dem zu verändernden Bild, sondern dem gerade neu eingefügten Bild zu. Für den Betrachter ergibt sich der Eindruck, nach wie vor mit einem einzigen Bild zu arbeiten, da wir von dem zweiten nur dessen Schatten sehen können. Wer möchte, kann übrigens anstelle der Methode attachMovie() auch gerne mit duplicateMovieClip() arbeiten.

27.2 Code Zur Kontrolle der gesamte Code (Version ohne startDrag(), Schatten dunkelgrau, bleibt von Einfärbung unberührt): //--------------- import –------------import flash.geom.*;

import flash.filters.*;

//---------------– vars –-------------var aKnobs:Array = [[„0xff0000“, „red­ Offset“], [„0 × 00ff00“, „greenOffset“], [„0 × 0000ff“, „blueOffset“]];

var mSlider:MovieClip, mPart:MovieClip, mBild:MovieClip, mReset:MovieClip, mSchatten:MovieClip;

398

var tfReset:TextField;

Kapitel 27  Effekte (Grafik)

var nGrenze:Number;

c tColor[(aKnobs[this.nIndex] [1])] = this._y*2*-1;

var trMC:Transform;

}

//------------- functions –------------

};

var ctColor:ColorTransform;

 trMC.colorTransform = ctColor;

var fSchatten:DropShadowFilter;

};

function init() {

m Part.onRelease = mPart. onReleaseOutside=function () {

 ctColor = new ColorTransform();

m Bild = this.attachMovie(„mcBild“, „bild“, this.getNextHighestDepth());

 delete this.onEnterFrame; };

 mBild._x = 10;

}

m Schatten = this. attachMovie(„mcBild“, „schatten“, -10);

v ar nBreite:Number = Stage.width(mBild._x+mBild._width);

 mBild._y = 20;

 nGrenze = mSlider._height/2;

 mSchatten._x = mBild._x;

m Slider._x = mBild._x+mBild._ width+(nBreite/2)-mSlider._ width/2+mPart._width/2;

 mSchatten._y = mBild._y;

 fSchatten = new DropShadowFilter(8, 45, 0 × 333333, 80, 5, 5, 1, 3);  mSchatten.filters = [fSchatten];

m Slider = this. createEmptyMovieClip(„slider“, this. getNextHighestDepth()); f or (var i:Number = 0; i
m Part = mSlider. attachMovie(„mcSlider“, „slider“+i, mSlider.getNextHighestDepth());  mPart._x = i*40;

 mPart._y = -mPart._height/2;

 ctColor.rgb = Number(aKnobs[i][0]);  trMC = new Transform(mPart.flaeche);  trMC.colorTransform = ctColor;

m Part = mSlider. attachMovie(„mcKnob“, „knob“+i, mSlider.getNextHighestDepth());  mPart._x = i*40;

 aKnobs[i].push(mPart);

m Slider._y = mBild._y+mSlider._ height/2;  ctColor = new ColorTransform();  trMC = new Transform(bild);

m Reset = mSlider. createEmptyMovieClip(„reset“, mSlider.getNextHighestDepth());

m Reset._x = mSlider._width/2-mPart._ width/2;  mReset._y = nGrenze+10;

t fReset = mReset. createTextField(„btnReset“, 1, 0, 0, 1, 1);  tfReset.autoSize = „center“;

t fReset.text = „Farben wiederherstellen“;  mReset.onPress = function() {

t rMC.colorTransform = new ColorTransform();

f or (var i:Number = 0; i
 mPart.nIndex = i;

a Knobs[i][(aKnobs[i].length1)]._y = 0;

 this.onEnterFrame = function() {

 ctColor = new ColorTransform();

 mPart.onPress = function() {

}

i f (this._parent._ymouse>=nGrenze && this._parent._ ymouse<=nGrenze) {

};

t his._y = this._parent._ ymouse;

}

//------------- aufruf –--------------init();

27.3  Organische Moleküle

Falls Sie tatsächlich mit derart simplen Elementen für den Slider arbeiten wie in vorliegendem Fall, dann können Sie diese natürlich mit den Zeichnungsfunktionen erzeugen und müssen sie nicht händisch zeichnen.

27.3 Organische Moleküle Die Ebeneneffekte der MovieClip-Klasse laden förmlich zum Spielen ein. Wir wollen daher nach dem Motto „Nummer 5 lebt!“ beispielhaft einen Effekt realisieren, der eine organische Anmutung besitzt. Abbildung 120 zeigt eine beliebige Phase der Animation, die wir nachfolgend umsetzen werden. 1. Erstellen Sie eine Standarddatei. 2. Ändern Sie die Hintergrundfarbe auf schwarz. 3. Erstellen Sie einen leeren MovieClip namens mcKugel1. 4. Zeichnen Sie im Koordinatenursprung von mcKugel1 einen Kreis (40 × 40) mit einem radialen Farbverlauf (grün zu schwarz bzw. zu Hintergrundfarbe), so dass der optische Eindruck einer Kugel entsteht. 5. Weisen Sie mcKugel1 einen gleichlautenden Verknüpfungsnamen zu. 6. Duplizieren Sie mcKugel1 (Bibliotheks- und Verknüpfungsname mcKugel2). 7. Ändern Sie den Farbverlauf in blau – schwarz. 8. Duplizieren Sie mcKugel2 (Bibliotheks- und Verknüpfungsname mcKugel3). 9. Ändern Sie den Farbverlauf in orange – schwarz.

399

10. Weisen Sie actions in der Hauptzeitleiste folgendes Script zu:  //------------- vars –-------------  var mEffekt:MovieClip, mKugel:MovieClip;

var nAnzahl:Number = 40; 



var nGrenzeY:Number = Stage.height; 



var nTempo:Number = 0.1;  var nHaeufig:Number = 50; 

var nMinAbstand:Number = 1; 

 //----------- functions –----------  function init() {



Abbildung 120:  Organische Erscheinung per Ebeneneffekt

var nGrenzeX:Number = Stage.width; 



m Effekt = this.createEmptyMovieClip („behKugeln“,this.getNextHighest­ Depth());

f or (var i:Number = 0; i
m Kugel = mEffekt. attachMovie(„mcKugel1“, „k“+i, i);  mKugel._x = zufall(nGrenzeX);  mKugel._y = zufall(nGrenzeY); m Kugel.nZielX = zufall(nGrenzeX); m Kugel.nZielY = zufall(nGrenzeY);

m Kugel.onEnterFrame = function() { t his.nDiffX = this.nZielXthis._x; t his.nDiffY = this.nZielYthis._y;

 this._x += this.nDiffX*nTempo;  this._y += this.nDiffY*nTempo; v ar nDiff:Number = Math. sqrt((this.nDiffX*this.nDiffX) + (this.nDiffY*this.nDiffY)); i f (Math. abs(nDiff)
 if (nZufall>=nHaeufig-1) { t his.nZielX = zufall(nGrenzeX);

400



Kapitel 27  Effekte (Grafik)

t his.nZielY = zufall(nGrenzeY);

} }

};



}



r eturn Math.round(Math. random()*pFaktor);

}

 function zufall(pFaktor:Number):Number {



}

 //------------- start –------------

init(); 

Wenn Sie testen, tauchen an beliebiger Stelle 40 grüne Kugeln auf, die sich zufallsbedingt immer mal wieder zu einem Ziel hin bewegen, wo sie kurze Zeit verharren, um dann die Bewegung in andere Richtung fort zu setzen. Was auf den ersten Blick etwas komplex wirken mag, wurde in der einen oder anderen Form bereits in früheren Kapiteln behandelt. Zunächst legen wir einen Variablen-Block fest, der entsprechend obiger Reihenfolge folgende Definitionen vornimmt:

• Referenz auf einen Behälter für alle Kugeln sowie

auf jede einzelne einzublendende Kugel; • Gesamtanzahl der Kugeln; • Horizontaler und vertikaler Bereich, in dem die Kugeln auftauchen und sich bewegen können, hier identisch mit der Größe der Bühne; • Faktor zum Ermitteln des Tempos der Kugeln; • Wert, mit dessen Hilfe wir festlegen, wann eine Kugel sich wieder in Bewegung setzen soll; • Minimaler Abstand, um den Ruhezustand einer Kugel erkennen zu können. Die Funktion init() erstellt einen übergeordneten Behälter für die Kugeln und blendet mit Hilfe einer for-Schleife die gewünschte Anzahl an Kugeln ein. Als Position weisen wir jeder Kugel einen beliebigen Wert zwischen 0 und Bühnenbreite bzw. zwischen 0 und Bühnenhöhe zu. Wollen Sie vermeiden, dass die Kugeln zu einem beliebigen Zeitpunkt aus der Bühnen herausragen können, müssen Sie jeweils die halbe Kugelbreite bei der Positionierung mit einbeziehen, also Zufallswerte zwischen halber Kugelbreite und Bühnenbreite minus halber Kugelbreite sowie korre-

spondierend für die Höhe ermitteln. Jede Kugel erhält zusätzlich zwei Variablen mit zufällig gespeicherten Werten für eine horizontale und eine vertikale Position, so dass eine erste Bewegung stattfinden kann. Die gewünschten Zufallswerte werden in der Funktion zufall() ermittelt, der wir als Argument einen Faktor angeben, um die größtmögliche Zahl zu definieren. Die kleinstmögliche Zahl entspricht jeweils der 0. Die konkrete Bewegung erfolgt in einem onEnterFrame-Ereignis, dass wir jeder Kugel zuweisen. Alternativ hätten wir wie in früheren Übungen alle Kugeln in einem Array erfassen und per onEnterFrame-Ereignis des übergeordneten Behälters bewegen können. Im genannten Ereignis berechnen wir zunächst den horizontalen und vertikalen Abstand zum vorher zufällig festgelegten Zielpunkt. Daraus errechnet sich eine Geschwindigkeit, die konkret jeweils einem Zehntel dieser Entfernung entspricht (bzw. einer Multiplikation mit 0.1). Das Tempo passt sich auf diese Weise dynamisch der Entfernung an. Diese Geschwindigkeit wird jeweils zur aktuellen horizontalen und vertikalen Position der in Bewegung befindlichen Kugel addiert. Um zu wissen, wann sie ihr Ziel erreicht hat, berechnen wir mit Hilfe des Satzes des Pythagoras die jeweilige Entfernung. Fällt sie unter den definierten Grenzwert von 1, erzeugen wir eine Zufallszahl. Erst wenn diese über einer bestimmten Zahl liegt, erhält die Kugel eine neue Zielposition und bewegt sich darauf zu. Durch diese zusätzliche Zufallszahl erreichen wir, dass unsere Kugeln nicht sofort wieder losrennen, nachdem sie eine Ruheposition eingenommen haben. Außerdem lässt sich die Dauer der Ruhephase prinzipiell beeinflussen, indem wir für nHaeufig einen möglichst hohen Wert einsetzen. Tendenziell dauern dann die Pausen länger. Solange nMinAbstand nicht größer bzw. gleich 1 ist, wäre, wie wir es bereits an anderer Stelle gesehen haben, prinzipiell auch möglich: if (Math.round(nDiff)==0) {

Damit wird automatisch auf 0 gerundet, sobald der ermittelte Abstand unter 0.5 fällt. Faktisch tritt dieser Fall zwar etwas seltener ein als die zuvor definierte Bedingung mit der 1 als Grenzwert, doch wird dies der Anwender nicht merken aufgrund der geringen Differenz. Sie können natürlich auch komplett auf die ifBedingung bezüglich nZufall verzichten, so dass

27.3  Organische Moleküle

direkt nach Erreichen des Ziels eine neue Bewegung erfolgt. Da wir für nMinAbstand einen sehr niedrigen Wert gewählt haben, käme es auch in diesem Fall rein optisch zu einer kleinen Pause. Allerdings wirkt die Animation insgesamt etwas hektischer und berechenbarer als in der von uns gewählten Variante. Momentan greifen wir nur auf die erste erstellte Kugel zu. Durch kleine Änderungen können wir jedoch schnell auch die übrigen mit einbeziehen. 11. Erweitern Sie den Variablen-Block:

var nArten:Number = 3;

12. Ersetzen Sie innerhalb der Deklaration von init() unmittelbar nach Beginn der for-Schleife die Initialisierung von nWelche (Fettdruck):  var nWelche:Number = Math.ceil(Math. random()*nArten);

13. Ändern Sie innerhalb der Deklaration von init() den Aufruf der attachMovie()-Methode zu Beginn der for-Schleife (Fettdruck):

Kugel = mEffekt. m attachMovie(„mcKugel“+nWelche, „k“+i, i);

Wenn Sie testen, erscheinen zufallsbedingt verschiedenfarbige Kugeln. Um das spätere Einfügen zu erleichtern, legen wir in nArten fest, wie viele verschiedene Kugelarten existieren. Innerhalb der Schleife ermitteln wir jeweils eine Zufallszahl zwischen 1 und dem in nArten gespeicherten Wert und verwenden ihn, um für die Argumente der attachMovie()-Methode den Namen des einzublenden Objekts zu definieren. Lautet die Zufallszahl beispielsweise 2, fügt attachMovie() „mcKugel“+2, also „mcKugel2“ ein, was der blauen Kugel entspricht. Für jede weitere Art an Kugeln, die Sie erstellen, müssen Sie lediglich den Wert von nArten inkrementieren, um später alle verwenden zu können. Momentan wirken die Kugeln noch recht scharfkantig, was insbesondere dann störend zu erkennen ist, wenn sie sich teilweise überlappen. Außerdem verfügen alle über die gleichen Werte hinsichtlich Größe und Deckkraft, was eher langweilig wirkt.

401

15. Fügen Sie in der for-Schleife nach der zufallsbedingten Positionierung von mKugel ein:

mKugel.blendMode = „lighten“; 



Kugel._xscale = mKugel._yscale *= m Math.random()+nMinGroesse;



Kugel._alpha = m zufall(nAlphaZufall)+(100-nAlphaZufall);

Beim Testen sehen Sie Kugeln verschiedener Größe und Deckkraft mit einer sehr weichen Kante. Wenn sie sich aneinander vorbei bewegen, scheinen sie leicht eingedrückt zu werden. Wir legen in zwei Variablen fest, um wie viel Prozent wir die Deckkraft pro Kugel maximal reduzieren wollen und wie stark sie mindestens vergrößert werden sollen. In der init()-Funktion greifen wir auf diese Variablen zu und ermitteln jeweils Zufallswerte für Deckkraft und Größe der Kugeln. Aufgrund von nAlphaZufall können die Werte für die Deckkraft zwischen 80 und 100 % schwanken. Wir lassen uns über die Funktion zufall() eine Zahl zwischen 0 und 20 zurück geben und addieren dazu den Basiswert von 80 (bzw. 100 – nAlphaZufall). Indem die Subtraktion an die Variable nAlphaZufall gebunden wird, kann man bei der Deckkraft mit beliebigen Werten arbeiten. Wollen Sie beispielsweise eine Schwankungsbreite von 50 % erreichen, muss nAlphaZufall mit 50 initialisiert werden. Den organischen Eindruck erreichen wir sehr simpel mit dem Ebeneneffekt „lighten“, den jede Kugel zugewiesen erhält. Sie können an dieser Stelle gerne auch mit anderen Ebeneneffekten experimentieren. Sie werden sicher schon festgestellt haben, dass sich beim Starten des Films alle Kugeln bewegen, bis sie ihr erstes Ziel erreicht haben. Erst dann greift unsere Zufallsfunktion, die für ein gelegentliches Weiterbewegen sorgt. Diesen Effekt können wir leicht so abändern, dass er von Anfang an zur Geltung kommt. 16. Ändern Sie in der for-Schleife unmittelbar vor der Zuweisung des onEnterFrame-Ereignisses die Initialisierung der Objektvariablen nZielX und nZielY (Fettdruck):

mKugel.nZielX = mKugel._x;  mKugel.nZielY = mKugel._y; 

14. Erweitern Sie den Variablen-Block:





Da bereits direkt nach dem Einfügen der Kugeln der Abstand zu ihrem Ziel gleich 0 ist – schließlich ent-



var nAlphaZufall:Number = 20;  var nMinGroesse:Number = 2; 

402

spricht das Ziel jeweils ihrer eigenen Position –, haben wir denselben Zustand hergestellt, der zuvor erst nach dem erstmaligen Erreichen des Ziels vorhanden war. Jetzt wird unsere Zufallsfunktion direkt aufgerufen und abhängig von deren Ergebnis die eine oder andere Kugel bewegt.

Kapitel 27  Effekte (Grafik)

//mKugel.nZielY = mKugel._y;

 mKugel.onEnterFrame = function() { t his.nDiffX = this.nZielXthis._x; t his.nDiffY = this.nZielYthis._y;

 this._x += this.nDiffX*nTempo;

27.4 Code //-------------- vars –--------------var mEffekt:MovieClip, mKugel:MovieClip;

var nAnzahl:Number = 40;

var nGrenzeX:Number = Stage.width;

var nGrenzeY:Number = Stage.height; var nTempo:Number = 0.1; var nArten:Number = 3;

 this._y += this.nDiffY*nTempo;

v ar nDiff:Number = Math. sqrt((this.nDiffX * this.nDiffX) + (this.nDiffY * this.nDiffY)); i f (Math.abs(nDiff)
 if (nZufall>=nHaeufig-1) { t his.nZielX = zufall(nGrenzeX);

var nHaeufig:Number = 50;

t his.nZielY = zufall(nGrenzeY);

var nMinGroesse:Number = 2;

}

var nAlphaZufall:Number = 20; var nMinAbstand:Number = 1;

//----------- functions –-------------function init() {

m Effekt = this.createEmptyMovieClip („behKugeln“, this.getNextHighest­ Depth()); f or (var i:Number = 0; i
m Kugel = mEffekt. attachMovie(„mcKugel“+nWelche, „k“+i, i);

} }; } }

function zufall(pFaktor:Number):Number { r eturn Math.round(Math. random()*pFaktor); }

//-------------- start –--------------init();

 mKugel._x = zufall(nGrenzeX);

27.5 Beleuchtungseffekt mit Maske

 mKugel.blendMode = „lighten“;

Ausgesprochen einfach zu realisieren ist ein relativ oft gesehener Beleuchtungseffekt, bei dem Objekte durch eine Art Spotlight gegenüber der Umgebung hervorgehoben werden. In Abbildung  121 sehen Sie ein Beispiel, das wir umsetzen wollen.

 mKugel._y = zufall(nGrenzeY);

m Kugel._alpha = zufall(nAlphaZufall)+(100-nAlphaZufall); m Kugel._xscale = mKugel._yscale *= Math.random()+nMinGroesse;  mKugel.nZielX = zufall(nGrenzeX);  mKugel.nZielY = zufall(nGrenzeY); //mKugel.nZielX = mKugel._x;

1. Erstellen Sie eine Standarddatei. 2. Ändern Sie den Hintergrund auf schwarz. 3. Importieren Sie eine beliebige Grafik in die Bibliothek. Achten Sie bei der Motivwahl darauf, dass

27.5  Beleuchtungseffekt mit Maske

403

Abbildung 121:  Simulation eines Spotlights

eher helle Farbtöne vorkommen, um einen Kontrast zum ohnehin dunklen Bühnenhintergrund herstellen zu können. Wir verwenden beispielhaft eine Grafik namens affe03.jpg. 4. Erstellen Sie einen leeren MovieClip (Bibliotheks- und Verknüpfungsname mcBild). 5. Fügen Sie dort auf 0,0 die importierte Grafik ein. 6. Erstellen Sie einen weiteren leeren MovieClip (Bibliotheks- und Verknüpfungsname mcSpot). 7. Zeichnen Sie dort einen Kreis (100 × 100) mit radialem Farbverlauf (2 beliebige Farben, Mitte 100 % Deckkraft, Rand 10 % Deckkraft). 8. Setzen Sie die gezeichnete Kreisform innerhalb von mcSpot auf die Position –50,-50. 9. Kehren Sie zur Hauptzeitleiste zurück. 10. Fügen Sie auf actions folgendes Bildskript ein:  //------------- vars –-------------  var mBilder:MovieClip, mBild1:MovieClip, mBild2:MovieClip, mSpot:MovieClip;

var nAlpha:Number = 20; 

 //---------- functions –-----------  function init() {

m Bilder = this.createEmptyMovie­ Clip(„behBilder“, this.getNextHighestDepth());

m Bild1 = mBilder. attachMovie(„mcBild“, „bildUnten“, mBilder.getNextHighestDepth()); m Bild2 = mBilder. attachMovie(„mcBild“, „bildMaskiert“, mBilder.getNextHighest­ Depth());

m Spot = mBilder. attachMovie(„mcSpot“, „bildMaske“, mBilder.getNextHighestDepth());

m Bild1._x = Stage.width/2-mBild1._ width/2; m Bild1._y = Stage.height/2mBild1._height/2;  mBild1._alpha = nAlpha;  mBild2._x = mBild1._x;  mBild2._y = mBild1._y;  mBild2.setMask(mSpot); }

 //------------- start –------------

init(); 

In der Bühnenmitte erscheint eine stark abgedunkelte Version unserer importierten Grafik. Wir richten einige Variablen ein, um einen übergeordneten Behälter, zwei Versionen des MovieClips mit dem importierten Bild sowie das Spotlight zu referenzieren. In einer weiteren Variablen legen wir einen möglichst niedrigen Wert für die Deckkraft fest. Die Funktion init() erzeugt den übergeordneten Behälter und fügt dort zweimal den MovieClip mit dem Bild sowie einmal das Spotlight ein. Die beiden Bilder werden in der Bühnenmitte positioniert. Das unterste Bild erhält eine Deckkraft von 20 % (bzw. dem in der Variablen nAlpha initialisierten Wert). Schließlich weisen wir dem zweiten eingefügten Bild das Spotlight als Maske zu. Wie Sie wissen, dient in Flash eine Maske anders als man das von Bildbearbeitungsprogrammen her gewohnt ist dazu, um Bereiche freizulegen. Da sich unsere Maske aufgrund fehlender Positionsangaben in der linken oberen Ecke, die zu maskierende Grafik aber in der Bühnenmitte befindet, wird notwendigerweise nichts von diesem Bild angezeigt. Zu sehen ist nur das erste eingefügte Bild mit der reduzierten Deckkraft, das uns als Hintergrund dienen wird. 11. Erweitern Sie den Variablen-Block:

var aParkPos:Array = [275, 70];

12. Fügen Sie in der Deklaration von init() nach der Positionierung von mBild2 ein:

aParkPos[0] += mBild1._x; 



mSpot._x = aParkPos[0]; 



aParkPos[1] += mBild1._y;  mSpot._y = aParkPos[1]; 

404

Kapitel 27  Effekte (Grafik)

Nun wird der Kopf des auf dem verwendeten Bild dargestellten Affen deutlicher angezeigt. Wir legen ein Array mit Positionswerten fest. Diese richten sich nach dem konkreten Motiv und müssen händisch ermittelt werden. In unserem Fall handelt es sich um den ungefähren Abstand des Affenkopfes von der linken oberen Ecke der Grafik. Da die Grafik auf der Bühne nicht in deren Koordinatenursprung, sondern an einer beliebige anderen Stelle positioniert wird, müssen wir diese Werte zu den im Array enthaltenen Werten addieren, sonst erhalten wir eine fehlerhafte Positionsangabe. Danach setzen wir das Spotlight auf die Werte des Arrays. Momentan sehen die Ränder des Spots noch sehr scharf aus, da die wechselnde Transparenz in der Maske ignoriert wird.



 mSpot._y = _ymouse;



}

13. Fügen Sie in der Deklaration von init() unmittelbar vor dem Aufruf der setMask()-Methode ein:

16. Ergänzen Sie die Deklaration von init() vor der schließenden Klammer:



17. Fügen Sie im Funktions-Block folgende Deklaration ein:

Bild2.cacheAsBitmap = mSpot. m cacheAsBitmap = true;

Die Maskenränder erscheinen verwaschener bzw. leicht durchsichtig. Das erreichen wir, indem die Vektormaske intern in eine Bitmap umgewandelt wird, in der transparente Bereiche wieder gegeben werden können. Das ist eine der Stellen, an denen man sich als Entwickler eine größere Usability seitens AS wünschen würde. Schließlich wäre es zumindest prinzipiell kein Problem, automatisch dann die genannte Eigenschaft auf true zu setzen, sobald eine Deckkraft ungleich 100 vorliegt. Der Effekt lässt sich auf verschiedene Weise modifizieren, z. B. indem wir in den Masken-Clip eine Pfadanimation integrieren, so dass sie über die Grafik wandert, oder indem wir sie an die Mausposition binden und dem Anwender die Möglichkeit geben, mit der Grafik zu interagieren. Wir wollen uns hier mit der letztgenannten Variante begnügen. 14. Ergänzen Sie die Deklaration von init() vor der schließenden Klammer:

mBild1.onRollOver = startSpot;

15. Fügen Sie im Funktions-Block folgende Deklaration ein:  function startSpot() {

 Mouse.hide();

 mSpot._x = _xmouse;



 mSpot.startDrag();

Wenn Sie die Maus über die Grafik bewegen, können Sie den Spot verschieben. Gleichzeitig blendet die Maus aus. Wir weisen der von vorneherein sichtbaren Grafik ein onRollOver-Ereignis zu, in dem eine Funktion aufgerufen wird. Die Funktion startSpot() blendet die Maus aus, setzt das Spotlight auf die Mausposition und ruft die Methode startDrag() auf, so dass der Spot nun permanent an die Maus gebunden ist. Das gilt allerdings auch für den Fall, dass wir die Maus von der Grafik wegziehen – sowohl der Spot wie die Maus sind nicht (mehr) zu sehen.



mBild1.onRollOut = stopSpot;

 function stopSpot() {

 Mouse.show();



}



 mSpot.stopDrag();

Wenn Sie die Maus aus der Grafik herausziehen, bleibt der Spot stehen und der gewohnte Cursor erscheint wieder. Wir weisen unserem Bild ein onRollOut-Ereignis zu, so dass bei Verlassen der Grafik die Funktion stopSpot() aufgerufen wird. Darin blenden wir die Maus ein und beenden das Ziehverhalten des Spotlights. Problematisch ist noch die Position des Spots, der am Rand kleben bleibt, sobald der (unsichtbare) Cursor den Grafikrand überschreitet 18. Ergänzen Sie die Deklaration von stopSpot() nach dem Aufruf der show()-Methode:

mSpot._x = aParkPos[0];  mSpot._y = aParkPos[1]; 

Das Spotlight springt, sobald die Maus die Grafik verlässt, auf diejenige Position zurück, die es eingenommen hatte, als es erstmals eingeblendet wurde. Die ursprüngliche Position wurde in der init()Funktion in das Array aParkPos eingetragen. Darauf greifen wir zurück, sobald die Maus aus der Grafik ge-

27.6  Code

zogen wird. Damit vermeiden wir es, dass unser Spot recht unmotiviert am Bildrand herumlungert, sobald er nicht mehr gebraucht wird. Alternativ können Sie ihn auch komplett ausblenden, indem Sie eine Position zuweisen, die vollständig außerhalb des Bildes liegt, z. B.: mSpot._x = mBild1._x – mSpot._width;

mSpot._y = mBild1._y – mSpot._height;

405

m Bild1 = mBilder.attachMovie („mcBild“, „bildUnten“, mBilder.getNextHighestDepth()); m Bild2 = mBilder.attachMovie („mcBild“, „bildMaskiert“, mBilder. getNextHighestDepth());

m Spot = mBilder.attachMovie(„mcSpot“, „bildMaske“, mBilder.getNextHighest­ Depth());

Der Spot befindet sich nun links oberhalb des Bildes. Da sich beide in keiner Weise überlappen, bleibt der Maskeneffekt ohne Auswirkungen. Eine Kleinigkeit wirkt sich eventuell noch störend aus. Denn wenn sich die Maus bereits von Anfang an über dem Bild befindet, kann Flash ein onRollOver-Ereignis nicht wahrnehmen. Das wird erst ausgelöst, wenn wir die Maus bewegen.

m Bild1._x = Stage.width/2-mBild1._ width/2;

19. Fügen Sie in der Deklaration von init() vor der schließenden Klammer ein:

 aParkPos[1] += mBild1._y;



f(mBild1.hitTest(_xmouse,_ i ymouse,true)){

 mBild1.onRollOver(); };

Wir kontrollieren bereits vor irgendeiner Mausbewegung, ob sich der Cursor über dem Bild befindet. Trifft dies zu, so gibt die if-Bedingung true zurück und wir rufen einfach das onRollOver-Ereignis auf. Die auf den ersten Blick einfacher scheinende Variante if(mBild1.onRollOver) funktioniert leider nicht, weil wir damit nicht kontrollieren, ob das betreffende Ereignis eingetreten ist, sondern nur, ob ein derartiges Ereignis zugewiesen wurde.

m Bild1._y = Stage.height/2-mBild1._ height/2;  mBild1._alpha = nAlpha;  mBild2._x = mBild1._x;  mBild2._y = mBild1._y;

 aParkPos[0] += mBild1._x;  mSpot._x = aParkPos[0];  mSpot._y = aParkPos[1];

m Bild2.cacheAsBitmap = mSpot. cacheAsBitmap=true;  mBild2.setMask(mSpot);

 mBild1.onRollOver = startSpot;  mBild1.onRollOut = stopSpot; i f(mBild1.hitTest(_xmouse,_ ymouse,true)){  mBild1.onRollOver(); }; }

function startSpot () {  Mouse.hide();

27.6 Code //--------------- vars –--------------var mBilder:MovieClip, mBild1:MovieClip, mBild2:MovieClip, mSpot:MovieClip;

 mSpot._x = _xmouse;  mSpot._y = _ymouse;  mSpot.startDrag(); }

function stopSpot() {  Mouse.show();

var nAlpha:Number = 20;

 mSpot._x = aParkPos[0];

//------------- functions –------------

//mSpot._x = mBild1._x-mSpot._width;

m Bilder = this.createEmptyMovieClip („behBilder“, this.getNextHighest­ Depth());

 mSpot.stopDrag();

var aParkPos:Array = [275, 70];

 mSpot._y = aParkPos[1];

function init() {

//mSpot._y = mBild1._y-mSpot._height; }

406

Kapitel 27  Effekte (Grafik)

//-------------- start –---------------

 mBild1.attachBitmap(bmBild1, 1);

27.7 Überblendeffekt mit Maske

m Bild1._y = mBild2._y=Stage. height/2-mBild1._height/2;

init();

Bei kaum einem anderen Effekt wie bei Bildübergängen finden Masken Verwendung. Aus Platzgründen müssen wir uns an dieser Stelle auf eine einzige Variante beschränken, die nicht annähernd dem gerecht werden kann, was alles möglich ist. Wir können daher nur darlegen, wie ein derartiger Effekt prinzipiell zu realisieren ist. Abbildung 122 zeigt einen Ausschnitt aus dem Überblenden zwischen zwei verschiedenen Grafiken. 1. Erstellen Sie eine Standarddatei. 2. Ändern Sie den Hintergrund auf schwarz. 3. Importieren Sie zwei Grafiken gleicher Größe in die Bibliothek. Wir verwenden hier beispielhaft affe0.jpg und affe1.jpg. 4. Weisen Sie den Grafiken jeweils einen Verknüpfungsnamen zu (affe0 und affe1). 5. Kehren Sie zur Hauptzeitleiste zurück. 6. Weisen Sie actions folgendes Bildskript zu:

m Bild1._x = mBild2._x=Stage. width/2-mBild1._width/2;

m Maske = mBilder. createEmptyMovieClip(„maske“, mBilder.getNextHighestDepth());  mMaske._x = mBild1._x;  mMaske._y = mBild1._y;

m Bild2.cacheAsBitmap = mMaske. cacheAsBitmap=true;  mBild2.setMask(mMaske); }

 //------------ start –--------------  init();

 import flash.display.BitmapData;

Es wird in der Bühnenmitte die erste Grafik angezeigt. Da wir für die Grafiken händisch keine MovieClips in der Bibliothek erzeugt haben und in AS 2 keine Möglichkeit besteht, direkt in einen MovieClip eine Bitmap aus der Bibliothek zu laden, benötigen wir die BitmapData-Klasse als Hilfsmittel, die zu Beginn geladen wird. Im Variablen-Block legen wir eine Reihe von Variablen zur Referenzierung von MovieClips fest, die:

 var mBilder:MovieClip, mBild1:MovieClip, mBild2:MovieClip, mMaske:MovieClip;

• jeweils eine der Grafiken anzeigen, • die Maske enthalten.

 //------------ import –-------------  //------------- vars –---------------

v ar bmBild1:BitmapData, bmBild2:BitmapData;

• alle Grafiken als übergeordneter Behälter aufnehmen,

 var sBild1:String = „affe0“;  var sBild2:String = „affe1“;

 //----------- functions –-----------  function init() {

m Bilder = this.createEmptyMovieClip („behBilder“, this.getNextHighest­ Depth()); m Bild1 = mBilder. createEmptyMovieClip(„mBilder“, mBilder.getNextHighestDepth()); m Bild2 = mBilder. createEmptyMovieClip(„mBilder“, mBilder.getNextHighestDepth()); b mBild1 = BitmapData. loadBitmap(sBild1);

Abbildung 122:  Überblendeffekt mit Hilfe einer Maske

27.7  Überblendeffekt mit Maske

Die benötigten BitmapData-Elemente referenzieren wir ebenfalls in zwei Variablen und wir speichern die Verknüpfungsnamen der anzuzeigenden Bilder in der Bibliothek. Die init()-Funktion erstellt drei leere MovieClips, von denen die beiden letzteren jeweils ein konkretes Bild darstellen werden. Das erste der Bilder fügen wir aus der Bibliothek ein, indem wir es unserem ersten BitmapData-Objekt zuweisen und dieses über den MovieClip mBild1 sichtbar machen. Die beiden als Bildbehälter dienenden MovieClips positionieren wir in Bühnenmitte. Anschließend wird in mMaske ein weiterer leerer MovieClip referenziert, den wir ebenfalls auf die genannte Position setzen. Um später einen Verlauf in der Maske nutzen zu können, setzen wir die betreffende Eigenschaft des Maskenclips sowie des zu maskierenden Clips auf true. Abschließend weisen wir mBild2 mMaske als Maske zu und rufen init() auf. Wir können momentan nur ein Bild sehen, da nur eine Bitmap aus der Bibliothek geladen wurde. Außerdem wurde der zweite zur Bildaufnahme vorgesehene MovieClip durch einen leeren Clip maskiert, so dass eventueller Inhalt ohnehin nicht zu erkennen wäre. 7. Fügen Sie in der Deklaration von init() vor der schließenden Klammer ein: mBild1.onPress = tweenen;

407

Die Funktion tweenen() lädt in das zweite BitmapData-Objekt die zweite Grafik und weist es dem dafür vorgesehenen MovieClip zu. In den darüber liegenden Masken-Clip zeichnen wir ein mit einer beliebigen Farbe gefülltes Rechteck in der Größe der Bilder. Dadurch legen wir faktisch das maskierte Bild vollständig frei. 9. Erweitern Sie den Import-Block:

import mx.transitions.*; 

import mx.transitions.easing.*; 

10. Erweitern Sie den Variablen-Block:

var nAlphaZeit:Number = 2; 

var nBreiteZeit:Number = 2; 

 var mxTweenBreite:Tween, mxTweenAlpha:Tween;

11. Fügen Sie in der Deklaration von tweenen() vor der schließenden Klammer ein:

xTweenBreite = new Tween(mMaske, „_ m width“, Strong.easeOut, 0, mBild1._ width, nBreiteZeit, true); xTweenAlpha = new Tween(mMaske, „_ m alpha“, None.easeNone, 0, 100, nAlphaZeit, true); xTweenBreite.onMotionFinished = m function() {

Der gewünschte Effekt wird ausgelöst, sobald der Anwender auf das sichtbare Bild klickt.



 delete mxTweenBreite;

8. Erweitern Sie den Funktions-Block um folgende Deklaration:



xTweenAlpha.onMotionFinished = m function() {

 function tweenen() {

b mBild2 = BitmapData. loadBitmap(sBild2);

 mBild2.attachBitmap(bmBild2, 1);

 mMaske.beginFill(0xffaa00, 100);  mMaske.lineTo(mBild1._width, 0); m Maske.lineTo(mBild1._width, mBild1._height);

 mMaske.lineTo(0, mBild1._height);  mMaske.lineTo(0, 0);  mMaske.endFill(); }

Wenn Sie beim Testen auf das Bild klicken, taucht unmittelbar die zweite Grafik auf und überdeckt die erste.





};

 delete mxTweenAlpha; };

Bei einem Mausklick wird das Bild sukzessive von links nach rechts freigelegt, wobei die Deckkraft von 0 auf 100 steigt. Für den gewünschten Effekt könnten wir eine eigene Funktion schreiben, die auf das zurück greifen würde, was wir im Kapitel geskriptete Animationen kennen gelernt haben. Alternativ ist eine bequemere Variante möglich, die auf der generell unterschätzten Tween-Klasse beruht. Wir importieren die benötigten Klassen und richten zwei Variablen zur Referenzierung der betreffenden Instanzen ein. Zwei weitere Variablen dienen dazu, Werte für die Dauer der Tweens in Sekunden aufzunehmen.

408

Kapitel 27  Effekte (Grafik)

Innerhalb von tweenen() richten wir zwei Tweens ein:

• mxTweenBreite tweent die Eigenschaft _width

von mMaske von 0 auf eine mBild1 entsprechende Breite in 2 Sekunden, wobei zum Schluss ein leichtes Abbremsen erfolgt; • mxTweenAlpha tweent die Eigenschaft _alpha von mMaske von 0 auf 100 % ebenfalls in 2 Sekunden, ohne einen besonderen Animationseffekt zu verwenden. Da die eingerichteten Tweens nach ihrem Ende nicht automatisch gelöscht werden, kontrollieren wir den Ablauf. Sobald das Ereignis onMotionFinished auftritt, löschen wir die zugehörige Tween-Referenz. Abschließend bleibt noch eine Korrektur, denn der unter Entwicklern gefürchtete User mit einem nervösen Finger könnte sich veranlasst sehen, selbst während der Animation mutwillig auf mBild1 zu klicken und so ständig den Tween neu aufrufen. 12. Erweitern Sie die Deklaration von tweenen() unmittelbar nach der öffnenden Klammer:

mBild1.enabled = false;

17. Ändern Sie in der Deklaration von init() die Zuweisung von bmBild1 (Fettdruck):

mBild1 = BitmapData. b loadBitmap(aBilder[nIndex]);

18. Fügen Sie in der unmittelbar darauf folgenden Zeile ein:

nIndex++;

Noch ergibt sich keine visuell wahrnehmbare Änderung gegenüber der bisherigen Variante. Wir haben lediglich den Zugriff auf die anzuzeigende Grafik geändert. Nun lesen wir die entsprechende Information nicht mehr aus einer einzelnen Variable aus, sondern verwenden statt dessen ein Array, dessen aktueller Index festlegt, welches Bild gewünscht wird. 19. Ändern Sie in der Deklaration von tweenen() die Zuweisung von bmBild2 (Fettdruck):

mBild2 = BitmapData. b loadBitmap(aBilder[nIndex]);

20. Fügen Sie in der Deklaration von tweenen() nach dem Aufruf der attachBitmap()-Methode ein:

13. Fügen Sie in das onMotionFinished-Ereignis von mxTweenBreite ein:



nIndex++; 





 nIndex = 0;

mBild1.enabled = true;

Simulieren Sie einen nervösen Finger. Nach einem Klick auf mBild1 deaktivieren wir das Mausereignis, bis der sich auf die Breite der Maske beziehende Tween beendet wurde. Dann lassen wir wieder einen Mausklick zu. Um wie bei einer Galerie per Mausklick fortlaufend weitere Bilder einzublenden, sind nur wenige Änderungen notwendig. 14. Importieren Sie vier weitere Grafiken in die Bibliothek. Wir verwenden beispielhaft affe2.jpg bis affe5.jpg. 15. Weisen Sie dort die Verknüpfungsnamen affe2 bis affe5 zu. 16. Erweitern Sie den Variablen-Block:

var nIndex:Number = 0;

 var aBilder:Array = [„affe0“, „affe1“, „affe2“, „affe3“, „affe4“, „affe5“];



if (nIndex == aBilder.length) {  }

21. Fügen Sie in der Deklaration von tweenen() im onMotionFinished-Ereignis von mxTweenBreite ein:

bmBild1.draw(bmBild2);  mMaske.clear(); 

Sie sind jetzt in der Lage, jeweils per Mausklick von einem Bild zum nächsten zu tweenen. Ist das letzte innerhalb des Arrays erreicht, beginnt der ganze Prozess wieder von vorne. Wir erfassen die gewünschten Grafiken in einem Array. Wenn alle Bilder wie im vorliegenden Beispiel einfach durch ein gleiches Präfix („affe“) und eine aufsteigende Nummerierung gekennzeichnet sind, dann lässt sich der Name zwar zur Laufzeit errechnen. Wir haben hier dennoch ein Array eingesetzt, so dass Sie die Möglichkeit haben, beliebige Namen zu verwenden. Um den Zugriff auf das erste und alle weiteren Bilder gezielt zu gestatten, initialisieren wir eine

27.8  Code

Variable mit 0. Um die Bilder in einer bestimmten Reihenfolge anzusprechen, müssen wir diesen Index nur inkrementieren, was an jeder Stelle geschieht, an der ein neues Bild aus der Bibliothek eingefügt wird. Entspricht der Index der Gesamtlänge des Arrays, dann wurden alle Bilder angezeigt und wir setzen ihn zurück auf den Ausgangswert, also 0, so dass wir wieder mit dem ersten Bild beginnen können. Auf den ersten Blick stellt der Abschluss eines Tweens ein Problem dar. Denn dann befindet sich in mBild1 eine nicht mehr benötigte Grafik, darüber liegt die gerade freigegebene Grafik, die eigentlich beim nächsten Klick ihrerseits unter einer maskierten Grafik liegen müsste. Theoretisch könnten wir jedes mal neue MovieClips auf höheren Ebenen erzeugen und dort denselben Prozess ablaufen lassen wie bisher. Doch es gibt eine viel einfachere Lösung: Wir kopieren die freigelegte Grafik von bmBild2 in bmBild1 und löschen damit automatisch das ohnehin nicht mehr zu sehende Bild. Nun steht bmBild2 zur Aufnahme einer neuen, wieder maskierten Grafik bereit.

409

//------------ functions –------------function init() {

m Bilder = this.createEmptyMovieClip („behBilder“, this.getNextHighest­ Depth()); m Bild1 = mBilder. createEmptyMovieClip(„mBilder“, mBilder.getNextHighestDepth()); m Bild2 = mBilder. createEmptyMovieClip(„mBilder“, mBilder.getNextHighestDepth()); b mBild1 = BitmapData. loadBitmap(aBilder[nIndex]);  nIndex++;

 mBild1.attachBitmap(bmBild1, 1);

m Bild1._x = mBild2._x=Stage.width/2mBild1._width/2;

m Bild1._y = mBild2._y=Stage.height/2mBild1._height/2; m Maske = mBilder. createEmptyMovieClip(„maske“, mBilder.getNextHighestDepth());  mMaske._x = mBild1._x;

27.8 Code Hier findet sich nur der Code der zweiten flexibleren Version, aus der sich die erste nötigenfalls leicht wieder herstellen lässt. //------------ import –---------------import flash.display.BitmapData; import mx.transitions.*;

import mx.transitions.easing.*;

//------------- vars –----------------var mBilder:MovieClip, mBild1:MovieClip, mBild2:MovieClip, mMaske:MovieClip; var bmBild1:BitmapData, bmBild2:BitmapData;

 mMaske._y = mBild1._y;

m Bild2.cacheAsBitmap = mMaske. cacheAsBitmap=true;  mBild2.setMask(mMaske);

 mBild1.onPress = tweenen; }

function tweenen() {

b mBild2 = BitmapData. loadBitmap(aBilder[nIndex]);

 mBild2.attachBitmap(bmBild2, 1);  nIndex++;

 if (nIndex == aBilder.length) {  nIndex = 0; }

 mBild1.enabled = false;

var nAlphaZeit:Number = 2;

 mMaske.beginFill(0xffaa00, 100);

var nIndex:Number = 0;

m Maske.lineTo(mBild1._width, mBild1._ height);

var nBreiteZeit:Number = 2;

 mMaske.lineTo(mBild1._width, 0);

var aBilder:Array = [„affe0“, „affe1“, „affe2“, „affe3“, „affe4“, „affe5“];

 mMaske.lineTo(0, mBild1._height);

var mxTweenBreite:Tween, mxTweenAlpha:Tween;

 mMaske.lineTo(0, 0);  mMaske.endFill();

410

 mxTweenBreite = new Tween(mMaske, „_width“, Strong.easeOut, 0, mBild1._ width, nBreiteZeit, true); m xTweenAlpha = new Tween(mMaske, „_ alpha“, None.easeNone, 0, 100, nAlphaZeit, true); m xTweenBreite.onMotionFinished = function() {  bmBild1.draw(bmBild2);  mMaske.clear();

 mBild1.enabled = true;  delete mxTweenBreite; };

m xTweenAlpha.onMotionFinished = function() {  delete mxTweenAlpha;

Kapitel 27  Effekte (Grafik)

1. Erstellen Sie eine Standarddatei. 2. Importieren Sie eine beliebige Grafik in die Bibliothek. Wir verwenden hier beispielhaft fordT1. png. Natürlich sind auch die Formate gif und jpg möglich. 3. Weisen Sie der Grafik den Verknüpfungsnamen fordT1 zu. 4. Kehren Sie zur Hauptzeitleiste zurück. 5. Weisen Sie actions folgendes Bildskript zu:  //------------- import –------------  import flash.display.BitmapData;  import flash.geom.*;

 //------------- vars –--------------  var mBilder:MovieClip, mKopie:MovieClip, mOriginal:MovieClip;

}

v ar bmOriginal:BitmapData, bmKopie:BitmapData;

init();

 //------------- functions –----------

27.9 Mosaik-Effekt

m Bilder = this.createEmptyMovieClip („behBilder“, this.getNextHighest­ Depth());

};

//------------- start –----------------

Die BitmapData-Klasse bietet interessante Möglichkeiten, um Effekte zu realisieren. Wir wollen uns dies an einem Beispiel, das die Klasse stärker in den Mittelpunkt rückt, anschauen. Dabei handelt es sich um einen animierten Mosaik-Effekt, aus dem die nachfolgenden Abbildungen 123 und 124 zwei verschiedene Phasen darstellen.

Abbildung 123:  Mosaik-Effekt (1)

 var sBildId:String = „ fordT1“;  function init() {

m Original = mBilder. createEmptyMovie­ Clip („originalBild“, mBilder.getNextHighestDepth());

m Kopie = mBilder.createEmptyMovie­ Clip(„bildKopie“, mBilder.getNextHighestDepth()); b mOriginal = BitmapData. loadBitmap(sBildId);

Abbildung 124:  Mosaik-Effekt (2)

27.9  Mosaik-Effekt

m Original.attachBitmap(bmOriginal, this.getNextHighestDepth()); m Bilder._x = Stage.width/2-mBilder._width/2;  mBilder._y = 50;

 bmKopie = new BitmapData(mOriginal._width, mOriginal._height, false, 0 × 00CEC6B5); m Kopie.attachBitmap(bmKopie, this. getNextHighestDepth()); }

 //-------------- start –------------  init();

Beim Starten wird in der Bühnemitte eine einfarbige Fläche in der Größe des Bildes angezeigt. Am Anfang werden die BitmapData-Klasse als Teil des display-Packages sowie die Rectangle-Klasse als Teil des geom-Packages importiert. Anschließend richten wir Variablen ein, die als Behälter für alle Bilder insgesamt sowie für zwei einzelne Bilder fungieren sollen. Da die Bilder per BitmapData-Methoden angesprochen werden, legen wir zwei weitere Variablen zur Referenzierung der benötigten Instanzen sowie eine zwecks Zugriff per AS auf die in der Bibliothek vorliegende Grafik an. Die Funktion init() erzeugt drei leere MovieClips und positioniert den übergeordneten Behälter horizontal mittig und vertikal in einem Abstand von 50 Pixeln vom oberen Rand. In bm­ Original laden wir das in die Bibliothek importierte Bild, das wir als Vorlage für unseren Effekt verwenden wollen. Es wird in einen MovieClip geladen, so dass es später zu sehen ist. Darüber wird eine einfarbige Bitmap-Grafik erzeugt, in die Flash später bei Mausklick den Mosaikeffekt zeichnet. Der erwähnte Effekt nimmt jeweils den Farbwert eines Pixels auf und überträgt ihn auf seine Nachbarpixel. Je häufiger wir klicken, desto geringer ist der Abstand der so gefärbten Nachbarn, bis am Ende nur noch das Originalbild übrig bleibt. Um diesen Effekt zu realisieren, benötigen wir zunächst eine Reihe zusätzlicher Variablen. 6. Erweitern Sie den Variablen-Block:  var nZeilen:Number;

 var nSpalten:Number;  var nStart:Number;  var nDiv:Number;

411

 var nFarbe:Number;

v ar aDivisoren:Array = [20, 16, 12, 8];  var nIndex:Number = 0;

Um einzelne Mosaiksteinchen in Rechteckform zu erhalten, müssen wir wissen, aus wie vielen Spalten und Zeilen unser Bild bestehen soll. Da diese Werte variieren, deklarieren wir hier nur entsprechende Variablen, ohne ihnen bereits einen konkreten Inhalt zuzuweisen. Mit nStart legen wir ebenfalls dynamisch fest, ab welcher Pixelposition Farbwerte ausgelesen werden müssen. Sie hängt ab von der Größe der Mosaiksteinchen, die wir in aDivisoren beispielhaft definieren. Im ersten Durchlauf werden die Steine 20 × 20 Pixel, im zweiten 16 × 16 usw. groß sein. Um zu wissen, welcher Wert aktuell benötigt wird, verwenden wir nIndex als Indexzugriff auf das genannte Array. Da wir mit 20 beginnen wollen, initialisieren wir diese Variable mit 0. In nDiv speichern wir den Pixelwert (wir könnten uns diese Variable auch sparen, müssten dann aber später im Skript permanent auf das Array an der richtigen Position zugreifen). Den Farbwert, den wir an einer bestimmten Position auslesen, speichern wir in nFarbe. 7. Fügen Sie in der Deklaration von init() vor der schließenden Klammer ein: mOriginal.onPress = pixel;

Da der Effekt durch Mausklick ausgelöst werden soll, weisen wir der unveränderten Originalgrafik die Funktion pixel zu. 8. Erweitern Sie den Funktions-Block um folgende Deklaration:  function pixel() {

 nDiv = aDivisoren[nIndex];

n Zeilen = Math.ceil(this._height/ nDiv); n Spalten = Math.ceil(this._width/ nDiv);  nStart = nDiv/2;

 var nHoriz:Number, nVert:Number;

f or (var i:Number = 0; i
 nHoriz = nDiv*j+nStart;

412

 nVert = nDiv*i+nStart;

n Farbe = Number(„0 × 00“+bmOriginal.getPixel(nHoriz, nVert). toString(16));

b mKopie.fillRect(new Rectangle(nDiv*j, i*nDiv, nDiv, nDiv), nFarbe); } }

 nIndex++; }

Bei jedem Klick zeichnet Flash ein Mosaikmuster, dass immer stärker der Originalgrafik entspricht. Diese ist jedoch nicht zu sehen, da sich nach dem letzten, aus 8 × 8 großen Blöcken bestehenden Muster keine Änderung mehr einstellt. In der Funktion pixel() speichern wir zunächst die Größe der Mosaiksteine, die gezeichnet werden sollen. Davon hängt die Anzahl der Spalten und Zeilen ab, die wir anschließend ermitteln. Da logischerweise Ganzzahlen notwendig sind, wird das Ergebnis aufgerundet. Die Position des Farbpixels, den wir auslesen wollen, können wir willkürlich innerhalb eines Blockes festlegen, der der Größe eines Mosaiksteins entspricht. Wir wählen naheliegenderweise den Mittelpunkt, der sich beim ersten Pixel aus nDiv/2 ergibt. Abbildung 125 zeigt diesen Vorgang beispielhaft anhand einer beliebigen Stelle der Grafik. Innerhalb der inneren for-Schleife berechnen wir jeweils horizontal und vertikal die Position dieses Pi-

Kapitel 27  Effekte (Grafik)

xels, dessen Farbwert wir dann in nFarbe speichern. Da die Mitte eines Mosaiksteines verwendet wird, ist jeder Pixel um nDiv/2 gegenüber einem Vielfachen der Steinbreite um rechts bzw. unten verschoben. Anders formuliert befindet sich der erste zu zeichnende Mosaikstein auf der Position 0,0, der zur Bestimmung der Farbe verwendete Pixel dagegen auf nDiv/2, nDiv/2 bzw. 10/10. Alle weiteren Positionen ergeben sich aus einem Vielfachen von nDiv, gegebenenfalls zuzüglich nDiv/2. Das konkrete Zeichnen erfolgt in der letzten Anweisung. Dort füllen wir jeweils ein Rechteck in der Breite und Höhe von nDiv mit derjenigen Farbe, die wir zuvor ermittelt haben. Wir reduzieren also alle vorliegendem Farbwerte auf denjenigen des in der Mitte des Rechtecks befindlichen Pixel. Das ist zugegebenermaßen eine recht brutale, aber immerhin einfache Vorgehensweise. Eleganter, aber aufwendiger wäre beispielsweise die Berechnung eines Mittelwerts aus allen in einem derartigen Rechteck angetroffenen Farbwerten. 9. Erweitern Sie die Deklaration von pixel() unmittelbar nach der öffnenden Klammer:  if (nIndex>=aDivisoren.length) {  delete this.onPress;  bmKopie.dispose();  return;  }

Jetzt können Sie solange klicken, bis das Bild im Original zu sehen ist.

Abbildung 125:  Ermittlung eines Farbpixels

27.10  Code

413

In der vorhergehenden Version konnten wir zwar prinzipiell unbegrenzt klicken, doch gelangte Flash ans Ende, sobald der letzte gültige Wert im Array aDivisoren ausgelesen wurde. Das war dann der Fall, wenn nIndex der Gesamtlänge des Arrays minus 1 entsprach. Jeder weitere Klick erhöhte den Indexwert, ohne dass sich im betreffenden Array an der so ermittelten Stelle noch ein Wert befinden würde. Nun kontrollieren wir, ob nIndex mindestens gleich der Gesamtlänge des Arrays ist. Falls ja, wurden bereits alle Mosaikbilder dargestellt und wir befinden uns am Ende des Effekts. Wir löschen dann das nicht mehr benötigte Mausklick-Ereignis, löschen die BitmapData-Instanz mit der Mosaikgrafik aus dem Speicher und brechen die Funktion an dieser Stelle ab, da die nachfolgende Berechnung ja nicht mehr benötigt wird. Durch das Löschen der BitmapData-Instanz wird gleichzeitig die darunter liegende Originalgrafik freigelegt. Allerdings kann es vorkommen, dass die Ausmaße unserer Grafik kein ganzzahliges Vielfaches unseres Divisors ergeben. In dem Fall greifen wir jeweils in der letzten Zeile und/oder Spalte auf Pixel zu, die sich außerhalb der Grafik befinden und daher den Farbwert 0 zurück geben. Dadurch entstehen in dem erzeugten Mosaikbild am rechten und/oder unteren Rand schwarze Kästchen, wie zu sehen ist. Um dieses Problem zu umgehen, müssen wir feststellen, wann ein derartiger Fall eintritt. Dann weisen wir der letzten Zeile und/oder Spalte jeweils den Wert des letzten horizontalen und/oder vertikalen Pixels zu.

Wir kontrollieren einfach, ob der in den Variablen ermittelte Wert mindestens der Breite bzw. der Höhe der Grafik entspricht. Ist das der Fall, erhalten wir 0 als Farbwert. Dann setzen wir die betreffende Variable einfach auf die letztmögliche Position, die in einer Bitmap jeweils der Breite bzw. Höhe minus 1 entspricht. Abschließend kann man das Ganze noch mit einem Filtereffekt versehen.

10. Fügen Sie in der Deklaration von pixel() in der for-Schleife unmittelbar nach der Initialisierung von nHoriz ein:

import flash.display.BitmapData;



//------------------ vars –------------





if (nHoriz>=bmKopie.width) { 

 nHoriz = bmKopie.width-1; }

11. Fügen Sie in der Deklaration von pixel() in der for-Schleife unmittelbar nach der Initialisierung von nVert ein:



if (nVert>=bmKopie.height) { 

 nVert = bmKopie.height-1; }

Die erwähnten schwarzen Ränder treten nun nicht mehr auf.

12. Importieren Sie das filters-Package im ImportBlock:

import.flash.filters.*;

13. Erweitern Sie den Variablen-Block:

var fSchatten:DropShadowFilter;

14. Erweitern Sie die Deklaration von init() vor der Zuweisung des onPress-Ereignisses:  fSchatten = new DropShadowFilter(8, 45, 0 × 000000, 0.8, 2, 2, 1, 3, false, false, false);

mOriginal.filters = [fSchatten]; 

Unser Bild zeigt nun einen leichten Schlagschatten an.

27.10 Code //--------------- import –------------import flash.geom.Rectangle;

import flash.filters.DropShadowFilter;

var mBilder:MovieClip, mKopie:MovieClip, mOriginal:MovieClip; var bmOriginal:BitmapData, bmKopie:BitmapData; var nZeilen:Number;

var nSpalten:Number; var nStart:Number; var nDiv:Number;

var nFarbe:Number;

var sBildId:String = „ fordT1“;

var aDivisoren:Array = [20, 16, 12, 8];

414

Kapitel 27  Effekte (Grafik)

var nIndex:Number = 0;

 return;

//--------------- functions –----------

 nDiv = aDivisoren[nIndex];

var fSchatten:DropShadowFilter; function init() {

m Bilder = this.createEmptyMovieClip („behBilder“, this.getNextHighest­ Depth());

m Original = mBilder.createEmptyMovie­ Clip(„originalBild“, mBilder.getNextHighestDepth());

m Kopie = mBilder.createEmptyMovieClip („bildKopie“, mBilder.getNextHighestDepth()); b mOriginal = BitmapData. loadBitmap(sBildId);

m Original.attachBitmap(bmOriginal, this.getNextHighestDepth());

m Bilder._x = Stage.width/2-mBilder._ width/2;  mBilder._y = 50;

b mKopie = new BitmapData(mOriginal._ width, mOriginal._height, false, 0 × 00CEC6B5); m Kopie.attachBitmap(bmKopie, this. getNextHighestDepth());

 fSchatten = new DropShadowFilter(8, 45, 0 × 000000, 0.8, 2, 2, 1, 3, false, false, false);  mOriginal.filters = [fSchatten];  mOriginal.onPress = pixel; }

function pixel() {

 if (nIndex>=aDivisoren.length) {  delete this.onPress;  bmKopie.dispose();

}

n Zeilen = Math.ceil(this._height/ nDiv); n Spalten = Math.ceil(this._width/ nDiv);  nStart = nDiv/2;

 var nHoriz:Number, nVert:Number;

f or (var i:Number = 0; i
f or (var j:Number = 0; j
 if (nHoriz>=bmKopie.width) {  nHoriz = bmKopie.width-1; }

 nVert = nDiv*i+nStart;

 if (nVert>=bmKopie.height) {  nVert = bmKopie.height-1; }

n Farbe = Number(„0 × 00“+bmOriginal.getPixel(nHoriz, nVert). toString(16));

b mKopie.fillRect(new Rectangle(nDiv*j, i*nDiv, nDiv, nDiv), nFarbe); } }

 nIndex++; }

//-------------- start –--------------init();

28

Effekte (Maus)

Die Maus stellt in vielen Applikationen das wichtigste Element des Interfaces dar, um Interaktionen zu ermöglichen. Da sie über eine visuelle Repräsentanz (zumeist in Form eines Pfeils) verfügt, bietet es sich an, sie für grafische Effekte zu verwenden. Dabei haben die Entwickler im Laufe der Jahre eine erstaunliche Vielfalt an mitunter recht ausgefallenen Effekten realisiert, von denen wir uns einige grundlegende Formen anschauen wollen. Die simpelste Form besteht natürlich in der Verwendung eines eigenen Mauszeigers, d. h. im (scheinbaren) Austauschen des vom System zur Verfügung gestellten Cursors gegen eigene Grafiken. Diese Variante haben Sie bereits oben im Kapitel Maus kennen gelernt. Andere Formen behalten die aktuelle Mausgrafik bei, blenden jedoch weitere Grafiken ein, deren Eigenschaften  – insbesondere die Position  – i. d. R. von der Mausposition abhängig gemacht werden. Dabei können vor allem unterschieden werden:

• Objekte, die der Maus unmittelbar folgen, also im-

mer den gleichen Abstand zum Cursor einhalten. Ein derartiges Element ist Ihnen aus gängigen Programmen in Form sogenannter Tooltipps geläufig (wobei dort der Zweck auf Information abzielt, nicht jedoch wie hier primär ein ästhetisches Ziel verfolgt wird). Wir wollen an dieser Stelle nicht weiter darauf eingehen, da das Bewegungsprinzip selbstredend ist. • Objekte, die räumlich und/oder zeitlich versetzt der Maus folgen. Dabei handelt es sich um einen Nachzieheffekt, bei dem die Position irgendwelcher Objekte von der Mausposition abhängt. Wird diese bewegt, bewegen sich auch die Objekte. Zumeist tun sie das solange, bis sie die gleiche Position einnehmen wie die Maus. Eine gern verwendete Ver-

sion reiht dabei die Objekte auf einer scheinbaren Schnur auf, wobei das nächste Objekt jeweils dem vorhergehenden und das erste der Maus folgt. In diesem Fall spricht man von einem Mausverfolger, einem Mausfolger oder einem mouse follow. Zugrunde liegt zumeist ein Animationsprinzip, das im Kapitel Animation erläutert wurde, nämlich die dynamische Schrittweite, bei der eine permanente Berechnung des Abstands zur Maus, der mit einem festen Faktor kleiner 1 multipliziert wird, erfolgt. Diese und die vorhergehende Variante sind am häufigsten anzutreffen. • Objekte, die bei Mausbewegung an der Position des Cursors eingeblendet werden, dann jedoch unabhängig von der Maus weiter animiert werden. In dem Fall stellt die Maus quasi einen Auslöser für die Animation dar, ohne deren weiteren Verlauf zu beeinflussen. Geschieht dies bei jeder Mausbewegung, muss natürlich dafür gesorgt werden, dass bereits im Ablauf befindliche Animationen gelöscht werden, da ansonsten irgendwann die gesamte Site nur noch aus diesen Animationen bestehen würde. • Objekte, die andere Eigenschaften als ihre Position von einer Mausbewegung abhängig machen. Beispiele wären ein Farbspektrum, das sich durch die Position der Maus für eine Grafik errechnen und darstellen lässt, oder ein Objekt, dessen Form durch eine Mausbewegung verändert wird. Obwohl wir intuitiv davon ausgehen, muss ein Mauseffekt nicht zwangsläufig visueller Natur sein. Möglich ist nämlich auch eine Steuerung von Sound durch Mausbewegungen. Wenn wir bisher in Webanwendungen bzw. Sites nur selten auf derartige Beispiele gestoßen sind, so liegt das nicht zuletzt an der Genese des Webs, die dem Entwickler lange Zeit (und auch

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

415

416

heute noch) technische Beschränkungen auferlegte wie etwa eine Begrenzung der Datenmenge, die mit dem Aufruf einer Site verknüpft sein sollte. Jeder der Effekte kann zwar prinzipiell mit einoder ausgeblendetem Mauszeiger realisiert werden. In letztgenanntem Fall gilt allerdings, dass der User durchaus Gefahr läuft, die Orientierung zu verlieren, falls nicht eindeutig erkennbar ist, wo sich der Hotspot des Cursors befindet (also der Punkt, der dem Mausklick entspricht). Aus diesem Grund empfiehlt es sich, den Cursor möglichst nur dann auszublenden, wenn an seiner Stelle eine eigene, eindeutige Grafik eingeblendet wird. Aus Gründen der Usability sollten Effekte dieser Art prinzipiell abgestellt werden können. Zum einen erweisen sie sich mitunter als ressourcenintensiv, zum anderen können sie nach einiger Zeit stören. Dann sollte man den Anwender nicht zwingen, sie beizubehalten. Das gilt im Übrigen auch für die erwähnten Tooltipps, die lediglich für einen Anfänger interessant, für einen erfahrenen User dagegen lästig sind. Die einzige Ausnahme stellen Effekte dar, die nicht nur als ästhetisches Mittel eingesetzt werden, sondern darüber hinaus zum Branding beitragen. In dem Fall sind sie notwendigerweise unverzichtbar, da sie einen integralen Bestandteil der Marke darstellen, die man im Rahmen der betreffenden Site oder Applikation vorstellt. Dann sollten sie jedoch möglichst dezent eingesetzt werden, um keine negative Reaktion seitens des Users zu evozieren. Denn da die Maus ein zentrales Instrument der Interaktion darstellt, ist der Anwender immer darauf fokussiert. Ein an die Maus gebundener Effekt steht insofern immer im Mittelpunkt der Aufmerksamkeit. Ist mit ihm kein wahrnehmbarer, subjektiver Mehrwert verbunden, wirkt er allzu schnell enervierend. Im nachfolgenden wollen wir einige Beispiele vorstellen, um die erwähnten Prinzipien zu illustrieren

Kapitel 28  Effekte (Maus)

und zu eigenen Experimenten anzuregen. Die oben erwähnten Formen des eigenen Mauszeigers und des simplen, unmittelbar an die Mausposition gebundenen Effekts wollen wir hier nicht mehr behandeln, da sie bereits an anderer Stelle besprochen wurden. Die einzelnen Abschnitte bauen nicht aufeinander auf, so dass es möglich ist, nach Belieben eines der Beispiele nachzuvollziehen.

28.1 Maus(ver)folger Aus der schier unendlichen Masse an Beispielen picken wir uns heraus:

• Ein Text folgt der Maus. Dieser Effekt sieht zu-

meist recht dezent aus und lässt sich gut einsetzen, ohne dass er allzu schnell störend wirkt. • Eine Uhr folgt der Maus. Anders als der vorhergehende Effekt benötigt diese Variante mehr Platz, insofern wir eine analoge Uhr mit Ziffernblatt und drei Zeigern verwenden wollen. Eine platzsparendere Version wäre eine digitale Uhr, die sich analog zur vorhergehenden Textversion realisieren ließe. Selbstverständlich dürfen Sie anstelle der Uhr eine beliebige andere, aus Einzelteilen aufgebaute Grafik verwenden. Die Uhr dient uns nur als Dummy für das behandelte Effekte-Prinzip. Betrachten wir zunächst den aus Buchstaben bestehenden Mausverfolger, den Abbildung 126 zeigt. 1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  //------------ vars –---------------  var mcFolgen:MovieClip, mcTxt:MovieClip;  var tText:TextField;  var nTempo = 0.15;

 var aVerfolger:Array = [];

Abbildung 126:  Text als Mausverfolger

Die beiden erstgenannten Variablen referenzieren im späteren Code den übergeordneten Behälter sowie die darin befindlichen einzelnen Buchstaben. Da wir den Text buchstabenweise in dynamischen Textfeldern erstellen werden, benötigen wir eine Referenz auf eben jene Felder, wozu uns tText dienen wird. Mit nTempo legen wir einen Faktor fest, der zur Berechnung der Bewegungsgeschwindigkeit notwendig

28.1  Maus(ver)folger

ist, und aVerfolger nimmt alle zu bewegenden Elemente auf. 3. Fügen Sie folgende Code-Blöcke ein:  //----------- functions –-----------  function init(pTxt:String):Void {

 mcFolgen = this.createEmptyMovie Clip(„behFolger“, 1);  for (var i = 1; i<=pTxt.length; i++) {

 mcTxt = mcFolgen.createEmptyMovie Clip(„buchst“+i, mcFolgen.getNextHighestDepth());  tText = mcTxt. createTextField(„txt“, 1, 0, 0, 1, 1);  tText.autoSize = „center“;

 tText.text = pTxt.substring(i-1, i); } }

 //----------- aufruf –--------------  init(„Hallo Flasher!“);

Sie können schon testen, werden aber nicht viel sehen: In der linken oberen Ecke taucht ein kleiner Haufen auf, der unserem Text entspricht. Die init()-Funktion sorgt für das Einblenden des Textes. Sie benötigt einen Parameter, der den konkreten Text enthält. Am Anfang richtet sie einen leeren MovieClip als Behälter für alle Buchstaben ein. Innerhalb einer Schleife fügt sie entsprechend der Buchstabenlänge des übergebenen Textes:

• Leere

MovieClips ein. Sie werden benötigt, um jeweils einen einzelnen Buchstaben zu bewegen. Sie bieten darüber hinaus für den Fall der Fälle die Flexibilität, mit den besonderen Möglichkeiten der MovieClip-Klasse weitere Effekte zuzuweisen. • Ein neues Textfeld ein. Es dient zur Aufnahme jeweils eines einzelnen Buchstabens. Obgleich der Name aller Textfelder gleich lautet, sind sie eindeutig identifizierbar, da sie sich in verschiedenen MovieClips befinden. Das gilt in ähnlicher Weise für die Tiefe. Als Position wählen wir den Koordinatenursprung des MovieClips, was es später erleichtert, die Positionen während der Animation korrekt zu errechnen. Für Breite und Höhe übergeben wir mit 1 einen beliebigen Wert, der im nächs-

417

ten Schritt an die Größe des konkreten Textinhalts angepasst wird. Wir setzen die Textausrichtung auf zentriert und sorgen so zusätzlich dafür, dass die benötigte Größe für das Textfeld automatisch ermittelt und zugewiesen wird. Der konkrete Buchstabe, den wir einfügen müssen, ergibt sich aus dem im Argument beim Funktionsaufruf enthaltenen Wert. Mit Hilfe der Zählvariablen i und der String-Methode substring() greifen wir bei jedem Schritt genau ein Zeichen heraus und weisen es dem Textfeld zu. Da i inkrementiert wird, erhalten wir so jedes einzelne Zeichen inklusive eventuell vorhandener Leerzeichen. Denn die müssen natürlich ebenfalls übernommen werden, ansonsten erweist sich der resultierende Text als unlesbar. Im Aufruf von init() übergeben wir den zweifelsohne gehaltvollen Beispieltext „Hallo Flasher!“. Dass wir aller Mühe zum Trotz nur wenig sehen können, liegt an der fehlenden Positionszuweisung. Denn Flash fügt alle neu erzeugten MovieClips bekanntermaßen im Koordinatenursprung ein, falls keine anderweitige Anweisung vorliegt. Die wäre hier allerdings auch überflüssig, da wir ja die Position von der Bewegung der Maus abhängig machen wollen. 4. Erweitern Sie die init()-Funktion innerhalb der Schleife unmittelbar vor der schließenden Klammer: aVerfolger.push(mcTxt);

5. Erweitern Sie die init()-Funktion unmittelbar nach der schließenden Klammer der Schleife: interv = setInterval(verfolgen, 20, mcFolgen);

Um eine Bewegung zu ermöglichen, speichern wir eine Referenz auf die unsere Buchstaben enthaltenden MovieClips, was natürlich nur innerhalb der Schleife, also an der Stelle, wo diese Clips erzeugt werden, möglich ist. Liegen alle Buchstaben vor, rufen wir die noch zu definierende Funktion verfolgen() per Intervall alle 20 Millisekunden auf und übergeben als Argument eine Referenz auf den übergeordneten Behälter, d. h. mcFolgen. 6. Erweitern Sie den Funktions-Block um folgende Deklaration:  function verfolgen(pMaus:MovieClip):Void {

418

Kapitel 28  Effekte (Maus)

 for (var i:Number = 0; i
 function bewegen(pWer:MovieClip, pZielX:Number, pZielY:Number):Void {

 bewegen(aVerfolger[i], pMaus._ xmouse, pMaus._ymouse);

 pWer._y += (pZielY-pWer._y)*nTempo;

 if (i == 0) {

} else {

 bewegen(aVerfolger[i], aVerfolger[i-1]._x, aVerfolger[i-1]._y); } } }

Wir müssen zwei Fälle unterscheiden:

• Es wird der erste Buchstabe animiert. Er soll sich

immer an der Mausposition orientieren und gibt damit die Bewegung für alle anderen Elemente vor. Da wir die Buchstaben in einem Array in der Reihenfolge erfasst haben, in der sie als Argument beim Aufruf von init() übergeben werden, befindet sich der hier gesuchte Buchstabe an der ersten Position des Arrays aVerfolger, was dem Wert 0 der Zählvariablen i entspricht. Da jeder MovieClip über ein eigenes Koordinatensystem verfügt, ist es wichtig, Flash mitzuteilen, welche Mauskoordinaten maßgeblich sind. Logischerweise sollte es sich dabei um diejenige des Behälters handeln, in dem sich alle Buchstaben befinden. Die Referenz auf den Behälter wird daher als Argument in pMaus übergeben. Tatsächlich relevant wird das allerdings nur in dem Fall, in dem die Position des Behälters nicht mit derjenigen der Hauptzeitleiste übereinstimmt. • Es werden alle weiteren Buchstaben animiert. Jeder Buchstabe soll sich an seinem Vorgänger, also an dem Buchstaben, der vor ihm eingeblendet wurde, orientieren. Der zweite Buchstabe folgt dem ersten, der dritte dem zweiten usw. Da die korrekte Reihenfolge über aVerfolger abgebildet wird, ergibt sich der Vorgänger einfach aus dem aktuellen Wert der Zählvariable i minus 1, wodurch wir uns innerhalb von aVerfolger um eine Stelle nach links bewegen. In beiden Fällen rufen wir eine weitere Funktion auf, die für die eigentliche Animation zuständig ist. 7. Fügen Sie im Funktions-Block folgende Deklaration ein:

 pWer._x += (pZielX-pWer._x)*nTempo; }

Wenn Sie testen, folgen nun alle Buchstaben der Maus bzw. dem jeweiligen Vorgänger. Die Funktion bewegen() addiert zur Position desjenigen Buchstabens, der gerade animiert werden soll, seine Entfernung zum Ziel bzw. seinem Vorgänger, multipliziert mit dem im Variablen-Block definierten Tempowert. Da unsere Tempovariable kleiner 1 ist, addieren wir faktisch einen Wert, der nur einem Bruchteil der errechneten Entfernung entspricht. Daraus resultiert eine leicht verzögerte Bewegung mit veränderlichem Tempo: Je kleiner die Entfernung, desto kleiner das Tempo. Das zugrunde liegende Prinzip der variablen Schrittweite haben wir im Kapitel Geskriptete Animation kennen gelernt. Momentan bewegt sich der Text zielgerichtet zur Mausspitze, was allerdings störend sein kann. Ansprechender wäre es, wenn er sich etwas rechts unten vom Cursor anordnen würde. 8. Ergänzen Sie den Variablen-Block:  var nOffsetX:Number = 15;  var nOffsetY:Number = 22;

9. Ändern Sie in der Deklaration von verfolgen() die if-Bedingung (Fettdruck): bewegen(aVerfolger[e], pWer._ xmouse+nOffsetX, pWer._ ymouse+nOffsetY);

Der Text richtet sich nun etwas nach rechts versetzt am Mauszeiger aus. In zwei Variablen legen wir relativ willkürlich Pixelwerte fest, um die wir die Buchstaben versetzen wollen. Im konkreten Fall sollen sie gegenüber der Maus um 15 Pixel nach rechts und 22 Pixel nach unten verschoben werden. An die Funktion bewegen() übergeben wir dann als erstes Ziel die Mausposition zuzüglich dieser Offset-Werte. Da alle nachfolgenden Buchstaben sich am jeweiligen Vorgänger orientieren, reicht dies aus, um für alle eine Verschiebung zu erreichen. Falsch wäre es dagegen, die betreffenden Werte direkt in die Funktion bewegen() hinein zu schreiben. Dadurch würde sich nämlich die Verschie-

28.1  Maus(ver)folger

bung potenzieren, so dass der Abstand von Zeichen zu Zeichen immer größer würde. Der Einfachheit halber haben wir mit einem weißen Hintergrund gearbeitet. Nun wäre es zugegebenermaßen langweilig, wenn sich der Effekt nur auf diese Farbe beschränken würde. 10. Ändern Sie die Hintergrundfarbe der Bühne zu schwarz. 11. Erweitern Sie den Variablen-Block:

var tfText:TextFormat;

12. Fügen Sie in der Deklaration von init() vor der Zuweisung von mcFolgen ein:

tfText = new TextFormat();



tfText.color = 0 × 990000;



tfText.size = 18;

13. Fügen Sie in der Deklaration von init() vor der Initialisierung der Eigenschaft tText.text ein:

419

16. Weisen Sie ini init() unmittelbar nach der Erstellung von mcFolgen ein:

mcFolgen.filters = [fDrop]; 

Anstelle von Text können natürlich beliebige grafische Elemente der Maus folgen wie etwa im Fall einer analogen Zeitanzeige, bei der eine Uhr aus einzelnen Teilen dynamisch zusammengesetzt wird, dir wir alle per AS erzeugen wollen. Bewegt sich die Maus, löst sich die Uhr in ihre Bestandteile auf, die dann nacheinander der Maus folgen. Um die Bewegung etwas organischer zu gestalten, existiert wie im vorherigen Beispiel des Textes eine Reihenfolge der Teile untereinander. Sie gibt vor, welches Element welchem Element folgt. Nur das erste Objekt orientiert sich an der Mausposition. Während der Bewegung drehen sich die einzelnen Teile entsprechend der aktuellen Uhrzeit weiter. Die Abbildungen 127 und 128 visualisieren das Ergebnis der Übung.

tText.setNewTextFormat(tfText);

Ein per AS erzeugtes Textfeld erhält automatisch eine Standardformatierung, zu der u. a. eine schwarze Farbe gehört. Um sie zu ändern, benötigen wir ein neues TextFormat, das wir in der Variablen tfText referenzieren. Seinen konkreten Inhalt definieren wir in der init()-Funktion außerhalb der Schleife. In der Schleife wäre das unsinnig, da wir dann das immer gleiche Format für jeden einzelnen Buchstaben neu einrichten und somit Flash zwingen würden, überflüssige Arbeitsschritte auszuführen. Beispielhaft legen wir zwei Eigenschaften des neuen Textformats fest, nämlich die Größe (18 Pixel) und Farbe (Dunkelrot). Damit das Format wirksam wird, muss es vor der Definition des eigentlichen Textinhalts zugewiesen werden, was im letzten Arbeitsschritt erfolgt. Abschließend kann man dem Behälter für den gesamten Text noch einen leichten Schlagschatten zuweisen.

Abbildung 127:  Uhr in Ruhestellung

14. Fügen Sie einen Import-Block ein:

Import flash.filters.*;

15. Erweitern Sie den Variablen-Block um:  var fDrop:DropShadowFilter = new DropShadowFilter();

Abbildung 128:  Uhrteile folgen der Maus

420

1. Erstellen Sie eine Standarddatei. 2. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var mUhr:MovieClip = this. createEmptyMovieClip(„uhr“, 1000);  var mUhrTeil:MovieClip;  var nTiefe = 1;

Wir legen einen leeren MovieClip als Behälter für alle Teile der Uhr an. Damit sie immer im Vordergrund zu sehen sind, erhält dieser MovieClip eine sehr hohe Tiefe, nämlich 1000, zugewiesen. In der Variablen mUhrTeil nehmen wir später sukzessive jeden MovieClip auf, der ein Einzelteil der Uhr darstellt. Um sie ab einer bestimmten Tiefe einblenden zu können, definieren wir eine entsprechende Variable mit dem Startwert 1. 3. Erweitern Sie das Skript um folgende Zeilen:  var aSekunden:Array = [];  var aMinuten:Array = [];  var aStunden:Array = [];  var aZiffern:Array = [];

Um später besser auf die einzelnen Elemente zugreifen zu können, legen wir sie in gewohnter Weise jeweils in einem Array ab, das an dieser Stelle deklariert wird. Wir benötigen für jeden der Zeiger sowie für alle Ziffern jeweils ein eigenes Array. Damit sind wir in der Lage, die einzelnen Elemente unabhängig voneinander zu animieren oder z. B. den Ziffern ein Verhalten zuzuweisen, über das die übrigen Elemente nicht verfügen. Zwar wäre das auch möglich, wenn alles in einem einzigen Array erfasst würde, doch dann wären an geeigneter Stelle if-Bedingungen notwendig. 4. Erweitern Sie das Skript um folgende FunktionsBlock:  //------------ functions –----------  function initUhr(pAnzahl1:Number, pRadius1:Number, pAbstand1:Number, pFarbe1:Number, pArt1:Array, pAnzahl2:Number, pRadius2:Number, pAbstand2:Number, pFarbe2:Number, pArt2:Array, pAnzahl3:Number, pRadius3:Number, pAbstand3:Number, pFarbe3:Number, pArt3:Array, pRadius4:Number):Void {  mUhr._x = _xmouse;

Kapitel 28  Effekte (Maus)

 mUhr._y = _ymouse;

 zeiger(pAnzahl1, pRadius1, pAbstand1, pFarbe1, pArt1);  zeiger(pAnzahl2, pRadius2, pAbstand2, pFarbe2, pArt2);  zeiger(pAnzahl3, pRadius3, pAbstand3, pFarbe3, pArt3);  ziffern(pRadius4); }

Nachdem wir in den bisherigen Workshops immer mit relativ wenigen Parametern ausgekommen sind, war es dem Autor ein besonderes Anliegen, eine Funktion mit so vielen Parametern zu versehen, wie sie von den Flash-Entwicklern gerne verwendet werden. Hier ist das Ergebnis. Wir definieren eine initUhr()-Funktion, die den Behälter für die Uhr auf die Mausposition setzt. Anschließend ruft sie dreimal eine Funktion auf, mit deren Hilfe wir die drei benötigten Zeiger für Sekunden, Minuten und Stunden zeichnen wollen. Dabei übergeben wir als Argumente jeweils die Anzahl der pro Zeiger zu zeichnenden Segmente, die Länge des Zeigers insgesamt, den Abstand zwischen den einzelnen Segmenten, ihre Farbe sowie den Typ. Da die Ziffern anders als die Zeiger erstellt werden, benötigen wir eine eigene Funktion, der wir lediglich den Radius als Argument übergeben. Wenn man wollte, könnte man darüber hinaus weitere Argumente einfügen, z. B. Anzahl der Ziffern, Größe und Farbe. Wir wollen es jedoch in unserem Beispiel bei den Werten belassen, die wir in die Funktion hinein schreiben. Alternativ zu diesem Parameter-Monster kann man die gewünschten Werte pro Zeiger in einem Array erfassen und diese als Argument übergeben. 5. Fügen Sie nach dieser Deklaration folgende weitere Deklaration ein:  function zeiger(pAnzahl:Number, pRadius:Number, pAbstand:Number, pFarbe:Number, pArt:Array):Void {  var nLaenge:Number = Math. floor(pRadius/pAnzahl);

 for (var i:Number = 0; i
 mUhrTeil = mUhr.createEmptyMovie­ Clip(„teil“+nTiefe, nTiefe);  mUhrTeil._x = mUhrTeil._y=0;

 mUhrTeil.lineStyle(1, pFarbe);

28.1  Maus(ver)folger

 mUhrTeil.moveTo(0, –(i*nLaenge));  mUhrTeil.lineTo(0, –(i*nLaenge)(nLaenge-pAbstand));  nTiefe++;

 pArt.push(mUhrTeil); } }

Diese Funktion sorgt für das Zeichnen einzelner Linien, aus denen sich die jeweiligen Zeiger zusammen setzen. Zunächst ermitteln wir die Länge der Linien, die, in vereinfachter Form, der Gesamtlänge dividiert durch die gewünschte Anzahl entspricht. Das Ergebnis ist nicht ganz korrekt, da wir dabei den Abstand zwischen den Linien nicht einbeziehen. Da dieser Abstand aber naturgemäß sehr klein sein wird, reicht unsere Näherung für die Praxis vollkommen aus. In einer Schleife werden nun so oft Linien gezeichnet, wie wir beim Aufruf per Argument fest gelegt haben. Dabei erzeugen wir pro Linie einen neuen MovieClip, den die Variable mUhrTeil referenziert. Auf diese Weise sind wir in der Lage, jedes einzelne Teil zu animieren. Abschließend inkrementieren wir die für die Tiefe zuständige Variable, so dass weitere Linien erstellt werden können, und speichern die gerade gezeichnete Linie in dem für diesen Zeigertyp zuständigen Array. Von entscheidender Bedeutung ist die Positionierung, die jeweils exakt in der Mitte des übergeordneten Uhr-MovieClips erfolgt. Dadurch ist es für uns nachher sehr einfach möglich, während der Animation eine korrekte Positionierung und Drehung vorzunehmen. Der konkrete Zeichenvorgang erfolgt von diesem Mittelpunkt aus nach oben, also in negativer y-Richtung. Wir benötigen bei jedem Zeichnen einen neuen Start- und einen neuen Endpunkt. Beide Werte sind natürlich abhängig von der Zählvariablen i sowie der Länge der jeweiligen Linie. Um den Prozess besser verstehen zu können, wollen wir beispielhaft mit konkreten Werten arbeiten und das Zeichnen der beiden ersten Liniensegmente betrachten. An späterer Stelle werden wir diese Funktion beispielsweise mit folgenden Werten aufrufen: zeiger(6, 60, 3, 0xff6600, aSekunden);

Damit entspricht pAnzahl 6, pRadius 60 und pAbstand 3. Die übrigen Argumente spielen bei der Positionierung keine Rolle. Beim ersten Schleifendurch-

421

lauf beträgt i 0. Für moveTo() ergeben sich dadurch die Werte 0, 0. Der erste Wert ist natürlich selbstredend, schließlich wird er im Klartext in die Methode geschrieben. Beim zweiten Wert multiplizieren wir die Variable nLaenge, die 10 (60/6, anschließend abgerundet) entspricht, mit dem Zählwert i, was ebenfalls 0 ergibt. Zwar erhält dieser zweite Wert ein negatives Vorzeichen, so dass wir theoretisch den virtuellen Zeichenstift nach oben verschieben können, doch das fällt momentan nicht ins Gewicht, da für die 0 das Vorzeichen ohne Bedeutung ist. Von diesem Punkt aus wird eine Linie mit lineTo() zum Punkt auf 0,–7 gezeichnet. Auch hier versteht sich der horizontale Wert 0 von selbst, schließlich wollen wir nur in der Vertikalen zeichnen. Für den zweiten Wert müssen wir vom vorhin errechneten vertikalen Startwert die errechnete Zeigerlänge subtrahieren. Sie würde 10 entsprechen, falls wir jedes Segment ohne Abstand an das nächste anfügen wollten. Da aber zusätzlich ein Abstand von 3 Pixeln beachtet werden soll, muss dieser Wert von der Länge subtrahiert werden, was 7 ergibt. Da wir den Startwert mit einem negativen Vorzeichen versehen haben, erhalten wir  –7. Somit zeichnet Flash im Koordinatenursprung eine vertikale Linie, die um 7 Pixel nach oben reicht. Beim nächsten Durchlauf erhöht sich i auf 1. Dadurch erhalten wir als Startpunkt für den Zeichenstift 0,-10. Von dort aus zeichnen wir eine Linie zu 0, –17 bzw. ausführlicher –(1 * 10) – (10 – 3) bzw. -10 –7, was sich zur erwähnten –17 summiert. 6. Erweitern Sie das Skript um folgende Zeilen:  function ziffern(pRadius:Number):Void {  var nWinkel:Number;

 var nPosX:Number, nPosY:Number;  var tBuchst:TextField;

 for (var i:Number = 3; i<=12; i += 3) {

 mUhrTeil = mUhr.createEmptyMovie­ Clip(„teil“+nTiefe, nTiefe);  nWinkel = i*30–90;

 nPosX = Math.cos(nWinkel*(Math. PI/180))*pRadius;  nPosY = Math.sin(nWinkel*(Math. PI/180))*pRadius;

422

 tBuchst = mUhrTeil. createTextField(„txt“, 1, nPosX, nPosY, 10, 10);  tBuchst.autoSize = „center“;  tBuchst.text = String(i);

 tBuchst._x –= tBuchst._width/2;

 tBuchst._y –= tBuchst._height/2;  aZiffern.push(mUhrTeil);  nTiefe++; } }

Anders als bei den Zeigern werden unsere Ziffern nicht gezeichnet, sondern über dynamische Textfelder erzeugt. Da sie entsprechend dem realen Vorbild kreisförmig angeordnet werden sollen, benötigen wir einen Winkel und entsprechende trigonometrische Funktionen. Dazu deklarieren wir zunächst diverse Variablen zur Aufnahme der benötigten Werte, die innerhalb einer Schleife konkret berechnet werden. Entgegen unserer sonstigen Gewohnheit beginnt unsere Zählvariable nicht mit 0 bzw. 1, sondern mit dem Wert, den wir der ersten Ziffer zuweisen wollen, nämlich einer 3. Der nächste benötigte Wert beträgt dann 6 usw., bis wir bei 12 anlangen. Die Zählvariable dient also einfach dazu, die korrekte Ziffer zu ermitteln. Daher inkrementieren wir sie nicht, sondern addieren bei jedem Durchlauf jeweils 3 hinzu. Zunächst wird wie bei den Zeigern innerhalb von mUhr ein leerer MovieClip erstellt, um später die betreffenden Textfelder aufnehmen zu können. Seine Position ergibt sich aus der Ziffer, die wir darstellen wollen. Wenn es sich wie in unserem Fall um die 3 handelt, muss der Winkel zur Berechnung der Position 0 betragen – Sie erinnern sich sicher an den Einheitskreis, der bei einer gedachten Ausrichtung nach rechts eine Drehung von 0  Grad aufweist. Falls nicht, finden Sie die entsprechenden Informationen im Kapitel Trigonometrie. Da der Abstand zwischen den Ziffern bei insgesamt 4 Ziffern jeweils 90 Grad beträgt und die Zählvariable i zu diesem Zeitpunkt eine 3 enthält, benötigen wir eine Berechnung, bei der ein mit i multiplizierter Wert von 90 die Zahl 0 ergibt. In unserem Fall multiplizieren wir 30 mit i, was 90 ergibt, und subtrahieren noch mal 90, so dass wir 0 erhalten. Beim nächsten Durchlauf beträgt i 6, was bei der Multiplikation 180 ergibt. Subtrahieren wir davon erneut 90, erhalten wir 90, den korrekten Wert für die Ziffer 6. Auf diese Weise

Kapitel 28  Effekte (Maus)

gelingt es uns, mit Hilfe der Zählvariablen sowohl den gewünschten Ziffernwert wie auch den zugehörigen Winkel zu ermitteln. Wollten wir die Funktion allgemeiner halten, müssten wir den Faktor 30 sowie die Argumente der Schleifenbedingung aus der Anzahl der gewünschten Ziffern sowie der Gradanzahl einer vollständigen Kreisdrehung errechnen. Aus dem Winkel lässt sich per trigonometrischer Funktion die korrekte Position für unsere Ziffern ermitteln, bei denen es sich um ein jeweils neu erzeugtes Textfeld handelt. Die Position entspricht einem gedachten Punkt auf einem Kreis, dessen Mittelpunkt die Position von mUhr darstellt. Den benötigten Radius übergeben wir als Parameter. Aus ästhetischen Gründen sollte er sich an den Werten orientieren, die wir später beim Zeichnen der Zeiger als Radius übergeben. Die Eigenschaft autoSize des Textfeldes wird auf zentriert gesetzt, so dass es sich von der Mitte her füllt und seine Größe an den Inhalt angepasst wird. Das Zuweisen eines konkreten Textes führt dazu, dass die ursprüngliche Position, die wir beim Erzeugen eines leeren Textfeldes als Argument übergeben mussten, optisch etwas verschoben erscheint. Das korrigieren wir, indem wir das Feld um seine halbe Breite nach links und nach oben verschieben. Schließlich speichern wir eine Referenz auf den Movieclip mit dem Feld im Array aZiffern und inkrementieren nTiefe, um den nächsten Clip mit Feld erstellen zu können. Die Formatierung des Textes können Sie natürlich analog zur vorhergehenden Übung mit einem eigenen Textformat anpassen. Um einen ersten Test durchführen zu können, benötigen wir einen entsprechenden Aufruf.

Abbildung 129:  Aufbau der Uhr ohne Zeitanzeige

28.1  Maus(ver)folger

7. Erweitern Sie das Skript um folgende Zeilen:  //------------- aufruf –------------  initUhr(6, 60, 3, 0xff6600, aSekunden, 7, 70, 3, 0 × 990000, aMinuten, 5, 50, 3, 0xf90000, aStunden, 70);

Flash zeigt an der Mausposition drei übereinander liegende, nach oben weisende Linien sowie kreisförmig angeordnete Ziffern. Mit den aufgrund der Menge sicher zunächst verwirrenden Argumenten legen wir entsprechend unserer Funktionsdeklarationen jeweils fest, wie die Zeiger zu zeichnen sind. Am Beispiel des Sekundenzeigers lauten die betreffenden Werte: 6 Linien über eine Strecke von insgesamt 60 Pixeln, der Abstand zwischen den Linien beträgt 3 Pixel, ihre Farbe entspricht dem Hexwert 0xff6600, also einem kräftigen Orange, das Objekt gehört zur harmlosen Gattung der Sekundenzeiger und soll daher in das Array aSekunden gespeichert werden. Wer nicht mit so vielen Argumenten arbeiten möchte, kann dementsprechend Variablen anlegen und sie mit den benötigten Werten im Variablen-Block initialisieren. Das Ablesen der Uhrzeit bereitet momentan noch nicht wirklich Vergnügen. 8. Erweitern Sie den Variablen-Block: var intervZeit:Number;

9. Ergänzen Sie die Funktionsdeklaration von initUhr() am Ende vor der schließenden Klammer: intervZeit = setInterval(uhrzeit, 1000);

10. Erweitern Sie den Funktions-Block um folgende Deklarationen:  function uhrzeit():Void {  for (e in aSekunden) {

 aSekunden[e]._rotation = rotation(„sek“); }

 for (e in aMinuten) {

 aMinuten[e]._rotation = rotation(„min“); }

 for (e in aStunden) {

 aStunden[e]._rotation = rotation(„std“);

423

}  }

 function rotation(pZeit:String):Number {  var dZeit:Date = new Date();  var n60:Number = 360/60;  switch (pZeit) {  case „sek“ :

 return (dZeit.getSeconds()*n60);  break;

 case „min“ :

 return (dZeit.getMinutes()*n60);  break;

 case „std“ :

 var n12:Number = 360/12;

 return (dZeit. getHours()*n12+0.5*dZeit.getMinutes());  break; }  }

Wenn Sie testen, springen die Zeiger nach einer Sekunde plötzlich in die korrekte Position und geben ab diesem Zeitpunkt permanent die aktuelle Uhrzeit wieder. Die kleinste Einheit, bei der eine Änderung erfolgt, bildet die Sekunde. Da zwischen jeder Änderung notgedrungen ziemlich exakt eine Sekunde liegt, empfiehlt es sich, im Sekundentakt die aktuelle Uhrzeit auszulesen. Zwar wäre das auch im onEnterFrameEreignis, mit dem wir später die Bewegung der Elemente entsprechend der Mausposition realisieren wollen, möglich, doch würden wir dann, da die Framerate (für unsere Animation zum Glück) deutlich über einem Bild pro Sekunde liegt, unnötig oft die Zeit aktualisieren. Statt dessen verwenden wir ein Intervall, das jeweils im Abstand einer Sekunde den Uhrstand wiedergibt und in der init()-Funktion eingerichtet wird. Aus Gründen der Einfachheit wählen wir ein einziges Intervall, das gemeinsam Sekunden, Minuten und Stunden kontrolliert. Alternativ wäre es natürlich möglich gewesen, für die Minuten ein zweites Intervall einzurichten, das Minuten- und Stundenzeiger animiert. Letzterer übrigens muss mit jeder Minute geändert werden, da er sich bekanntlich ständig in Richtung der nächsten Stunde weiter bewegt.

424

Die per Intervall ausgeführte Funktion ermittelt jeweils getrennt für die einzelnen Zeiger den aktuellen Rotationswert. Der stimmt jeweils für alle Elemente, die sich im selben Array befinden, überein. Errechnet wird er über die Funktion rotation(), der wir als Argument den Zeigertyp, symbolisiert durch einen kurzen String, übergeben. Dabei steht „sek“ für Sekunden, „min“ für Minuten und „std“ für Stunden. Diese Funktion richtet jeweils im Sekundentakt ein neues Date-Objekt ein, um über dessen Methoden die aktuelle Uhrzeit herauszufinden. Um die Berechnung etwas übersichtlicher zu gestalten, speichern wir in der lokalen Variablen das Ergebnis der Division von 360 durch 60. Bei einer Volldrehung des Sekundenzeigers vergehen 60 Sekunden, beim Minutenzeiger 60 Minuten. Eine Sekunde bzw. eine Minute entspricht dann einem Sechzigstel einer Drehung bzw. 6  Grad. Da sich dieser Wert nie ändert, hätten wir ihn auch ganz am Anfang im Variablen-Block initialisieren können. Abhängig vom erhaltenen Argument gibt die Funktion die Drehung als ein Vielfaches von 6 (Sekunden und Minuten) wieder. Sind z. B. 2 Sekunden vergangen, muss der Sekundenzeiger eine Drehung von 2 * 6, also 12 Grad aufweisen. Etwas anders sieht die Berechnung der Stunden aus. Würden wir nur die vollen Stunden messen, dann müsste die Rotation jeweils ein Vielfaches von 30 betragen, da bekanntlich die Volldrehung des Stundenzeigers 12 Stunden ergibt. Bei 360 dividiert durch 12 erhalten wir als Rotationswert pro Stunde 30  Grad. Zusätzlich dreht sich der Zeiger jedoch um einen Bruchteil des Betrages weiter, der mit dem Minutenzeiger angezeigt wird. Berechnet auf die Stunden entsprechen 60 Minuten 30 Grad, eine Minute erhöht damit die Drehung des Stundenzeigers um 60/30 bzw. 0.5 Grad. Auch diesen Wert geben wir an die aufrufende Funktion zurück. Deutsche Gründlichkeit verlangt an dieser Stelle nach dem Hinweis auf eine kleine Ungenauigkeit, die sich durch die Intervallgröße von 1 Sekunde beim Sekundenzeiger einschleicht. Ermitteln wir nämlich zufälligerweise die Sekundenzahl unmittelbar bevor die nächste Sekunde auftritt, hinkt unsere Uhr um mehrere Millisekunden der aktuellen Zeit hinterher. Diejenigen, die mit Hilfe unseres Codes sicherheitsrelevante Abläufe beispielsweise in Kernkraftwerken steuern müssen, werden daher entweder ein gewisses Risiko in Kauf nehmen oder mit einem sehr kleinen Intervall den Abstand zum Eintreten der nächsten Se-

Kapitel 28  Effekte (Maus)

kunde messen. Anschließend kann dann in der hier beschriebenen Weise fortgefahren werden. Da unser Intervall erst nach Verstreichen der dort definierten Zeit die Funktion uhrzeit() aufruft, erwachen unsere Zeiger nach einer Sekunde abrupt aus ihrem Dornröschenschlaf.. 11. Rufen Sie innerhalb von initUhr() unmittelbar vor Einrichten des Intervalls die Funktion uhrzeit() einmal auf:  uhrzeit();

Jetzt zeigen die Zeiger direkt nach dem Zeichnen die korrekte Uhrzeit an, die abrupte Änderung von zuvor findet nicht mehr statt. Damit haben Sie eine vollständige analoge Uhr geskriptet, die sich unabhängig vom noch zu definierenden Mauseffekt verwenden lässt. Wir möchten jedoch, wie bereits eingangs angesprochen, die Position der Uhr an derjenigen der Maus orientieren. 12. Erweitern Sie den Variablen-Block:  var nTempo:Number = 0.1;  Wir benötigen diese Variable, um das Tempo, mit dem sich die Objekte bewegen sollen, festlegen zu können. Der Wert wurde sehr niedrig gewählt, so dass wir eine sehr weiche und langsame Animation erhalten.

13. Fügen Sie im Funktions-Block folgende Deklaration ein:  function bewegung(pWer:Array, pZiel:Array):Void {  var aZiel:Array;

 for (var i:Number = 0; i
 aZiel = pZiel; } else {

 aZiel = [pWer[i-1]._x, pWer[i-1]._y]; }

 var nDifX:Number = aZiel[0]o._x;  var nDifY:Number = aZiel[1]o._y;

28.1  Maus(ver)folger

 o._x += nDifX*nTempo;  o._y += nDifY*nTempo; }  }

Die Bewegungsfunktion entspricht dem klassischen Prinzip einer entfernungsabhängigen, abgebremsten Bewegung, die wir schon in anderem Zusammenhang kennen gelernt haben. Sie erhält zwei Parameter, die beide als Array übergeben werden: Dasjenige Array, in dem sich die aktuell zu bewegenden Objekte befinden sowie die x- und y-Koordinaten eines Objektes, auf das hin sich das erste Element im vorher erwähnten Array hin bewegen soll. Wir müssen zwei Fälle unterscheiden:

• Wir bewegen aktuell das erste Element eines Ar-

rays, z. B. das erste Segment des Sekundenzeigers. Sein Ziel sind die Mauskoordinaten. Wir greifen dann auf dieses Element zu, wenn die Zählvariable i der Schleife, in der die eigentliche Bewegung durchgeführt wird, 0 beträgt. • Wir bewegen die nachfolgenden Elemente. Ihr Ziel entspricht dann dem jeweils vorhergehenden Element, also innerhalb des Arrays dem aktuellen Wert von i – 1. Beträgt i beispielsweise 1, greifen wir auf das zweite Element im Array pWer zu. Das soll sich am vorhergehenden Element, in dem Fall also dem ersten Element orientieren. Das dritte folgt dann dem zweiten, das vierte dem dritten usw. In beiden Fällen errechnen wir den Abstand zum Ziel sowohl in x- wie in y-Richtung. Wenn wir diese Abstände jeweils mit dem Wert für nTempo multiplizieren, erhalten wir die Anzahl an Pixeln, um die sich die aktuelle Position ändern muss. Je größer der Abstand, desto größer auch dieser Tempowert. 14. Erweitern Sie den Funktions-Block um einen konkreten Aufruf:  mUhr.onEnterFrame = function() {

 bewegung(aSekunden, [this._xmouse, this._ymouse]);  };

Wenn Sie die Maus beim Testen bewegen, schweben ihr die Segmente des Sekundenzeigers hinterher. Um eine Animation zu erhalten, müssen wir die oben definierte Funktion der Abstandsberechnung permanent ausführen. das geschieht hier klassischerweise mit

425

einem onEnterFrame, das wir dem übergeordneten Behälter, also mUhr, zuweisen. Damit Flash weiß, wer zu bewegen ist, übergeben wir als Argumente das Array mit den Segmenten des Sekundenzeigers sowie als Ziel für das erste Segment die Mauskoordinaten. Die Bewegung der übrigen Elemente wird auf ähnliche Weise realisiert. 15. Ergänzen Sie das onEnterFrame-Ereignis um folgende Funktionsaufrufe:  bewegung(aMinuten, [aSekunden[0]._x, aSekunden[0]._y]);  bewegung(aStunden, [aMinuten[0]._x, aMinuten[0]._y]);  bewegung(aZiffern, [aStunden[0]._x, aStunden[0]._y]);

Nun reagieren alle Segmente auf eine Änderung der Mausposition, wobei sie sich mit einer Verzögerung in Bewegung setzen. Diese Verzögerung wird einfach dadurch erreicht, dass wir die einzelnen Elemente in einer bestimmten Reihenfolge ansprechen:

• Als erste bewegen sich die Segmente des Sekun-

denzeigers, wobei sich das erste, wie gezeigt, unmittelbar an der Mausposition orientiert. • Anschließend werden die Elemente des Minutenzeigers animiert. Das erste folgt dem ersten Element des Sekundenzeigers, die übrigen jeweils dem vorhergehenden des Minutenzeigers. • Auf die gleiche Art folgen der Stundenzeiger dem Minutenzeiger und die Ziffern dem Stundenzeiger. Sollte Ihnen die Bewegung zu langsam erscheinen, können Sie das Tempo durch die Variable nTempo anpassen. Wählen Sie dabei allerdings möglichst niedrige Werte, sonst rasen Ihre Elemente förmlich über den Screen. Bei einem Wert von 1 kleben die Elemente am Cursor, da die Pixelanzahl, um die wir die Zeiger verschieben, exakt der Entfernung zum Ziel entspricht. Verwenden Sie einen etwas größeren Wert, z. B. 1.2, kommt es zu einem lustigen Zappeln bei jeder Bewegung. Denn nun schießen die Elemente voll Elan jeweils über das Ziel hinaus, bevor sie sich beruhigen und die korrekte Position einnehmen. Sollten Sie eine derartige Uhr als permanenten, eventuell per Verringerung der Eigenschaft _alpha angenehmen abgesofteten Begleiter des Cursors einsetzen, empfiehlt es sich, einen gewissen Abstand zur Mausposition einzuhalten. Ansonsten kann die Uhr schnell störend wirken.

426

Kapitel 28  Effekte (Maus)

16. Erweitern Sie den Variablen-Block:

var nOffsetY:Number = 100;

17. Ändern Sie initUhr() wie folgt (Fettdruck):

mUhr._y = _ymouse+nOffsetY;

18. Ändern Sie das onEnterFrame-Ereignis wie folgt (Fettdruck):  bewegung(aSekunden, [this._xmouse, this._ymouse+nOffsetY]);

So anhänglich sie auch sein mag, so hält die Uhr nun einen respektvollen vertikalen Abstand zur Maus ein. Wir legen in der Variablen nOffsetY diesen Abstand mit 100 Pixeln fest und berücksichtigen ihn jeweils bei der erstmaligen Positionierung mit Hilfe von initUhr() sowie bei jedem onEnterFrame, wenn wir die y-Position der Maus übergeben. Abschließend können Sie, wie in der vorhergehenden Übung gezeigt, einen Schlagschatten zuweisen (im nachfolgenden Code nicht enthalten).

 tfText.color = 0 × 990000;

 mcFolgen = this.createEmptyMovieClip( „behFolger“, 1);  mcFolgen.filters = [fDrop];

 for (var i = 1; i<=pTxt.length; i++) {

 mcTxt = mcFolgen.createEmptyMovie­ Clip(„buchst“+i, mcFolgen.getNextHighestDepth());

 tText = mcTxt. createTextField(„txt“, 1, 0, 0, 1, 1);  tText.autoSize = „center“;

 tText.setNewTextFormat(tfText);

 tText.text = pTxt.substring(i-1, i);  aVerfolger.push(mcTxt); }

 interv = setInterval(verfolgen, 20, mcFolgen); }

28.2 Code Zur Kontrolle das gesamte Skript der vorherigen Übung. Textverfolger: //-------------- import –-------------Import flash.filters.*;

//-----------––– vars –---------------var mcFolgen:MovieClip, mcTxt:MovieClip; var tText:TextField;

var tfText:TextFormat; var nTempo = 0.15;

var aVerfolger:Array = []; var nOffsetX:Number = 15; var nOffsetY:Number = 22;

var fDrop:DropShadowFilter = new DropShadowFilter();

//----------- functions –-------------function init(pTxt:String):Void {  tfText = new TextFormat();  tfText.size = 18;

function bewegen(pWer:MovieClip, pZielX:Number, pZielY:Number):Void {

 pWer._x += (pZielX-pWer._x)*nTempo;  pWer._y += (pZielY-pWer._y)*nTempo; }

function verfolgen(pMaus:MovieClip):Void {

 for (var i:Number = 0; i
 bewegen(aVerfolger[i], pMaus._ xmouse+nOffsetX, pMaus._ ymouse+nOffsetY); } else {

 bewegen(aVerfolger[i], aVerfolger[i-1]._x, aVerfolger [i-1]._y); } } }

//----------–– aufruf –---------------init(„Hallo Flasher!“);

Uhr: //-------------- vars –----------------

28.2  Code

427

var mUhr:MovieClip = this. createEmptyMovieClip(„uhr“, 1000);

 mUhrTeil.lineTo(0, –(i*nLaenge)(nLaenge-pAbstand));

var nTiefe = 1;

 pArt.push(mUhrTeil);

var mUhrTeil:MovieClip;

var nOffsetY:Number = 100; var nTempo:Number = 0.1;

var aSekunden:Array = []; var aMinuten:Array = []; var aStunden:Array = []; var aZiffern:Array = []; var intervZeit:Number;

//------------- functions –-----------function initUhr(pAnzahl1:Number, pRadius1:Number, pAbstand1:Number, pFarbe1:Number, pArt1:Array, pAnzahl2:Number, pRadius2:Number, pAbstand2:Number, pFarbe2:Number, pArt2:Array, pAnzahl3:Number, pRadius3:Number, pAbstand3:Number, pFarbe3:Number, pArt3:Array, pRadius4:Number):Void {  mUhr._x = _xmouse;

 mUhr._y = _ymouse+nOffsetY;

 zeiger(pAnzahl1, pRadius1, pAbstand1, pFarbe1, pArt1);  zeiger(pAnzahl2, pRadius2, pAbstand2, pFarbe2, pArt2);  zeiger(pAnzahl3, pRadius3, pAbstand3, pFarbe3, pArt3);  ziffern(pRadius4);  uhrzeit();

 intervZeit = setInterval(uhrzeit, 1000); }

function zeiger(pAnzahl:Number, pRadius:Number, pAbstand:Number, pFarbe:Number, pArt:Array):Void {  var nLaenge:Number = Math. floor(pRadius/pAnzahl);

 for (var i:Number = 0; i
 mUhrTeil = mUhr.createEmptyMovie­ Clip(„teil“+nTiefe, nTiefe);  mUhrTeil._x = mUhrTeil._y=0;

 mUhrTeil.lineStyle(1, pFarbe);

 mUhrTeil.moveTo(0, –(i*nLaenge));

 nTiefe++; } }

function ziffern(pRadius:Number):Void {  var nWinkel:Number;

 var nPosX:Number, nPosY:Number;  var tBuchst:TextField;

 for (var i:Number = 3; i<=12; i += 3) {  mUhrTeil = mUhr.createEmptyMovie­ Clip(„teil“+nTiefe, nTiefe);  nWinkel = i*30–90;

 nPosX = Math.cos(nWinkel*(Math. PI/180))*pRadius;  nPosY = Math.sin(nWinkel*(Math. PI/180))*pRadius;

 tBuchst = mUhrTeil. createTextField(„txt“, 1, nPosX, nPosY, 10, 10);  tBuchst.autoSize = „center“;  tBuchst.text = String(i);

 tBuchst._x –= tBuchst._width/2;

 tBuchst._y –= tBuchst._height/2;  aZiffern.push(mUhrTeil);  nTiefe++; } }

function uhrzeit():Void {  for (e in aSekunden) {

 aSekunden[e]._rotation = rotation(„sek“); }

 for (e in aMinuten) {

 aMinuten[e]._rotation = rotation(„min“); }

 for (e in aStunden) {

 aStunden[e]._rotation = rotation(„std“); } }

428

function rotation(pZeit:String):Number {  var dZeit:Date = new Date();

Kapitel 28  Effekte (Maus)

 bewegung(aStunden, [aMinuten[0]._x, aMinuten[0]._y]);

 var n60:Number = 360/60;

 bewegung(aZiffern, [aStunden[0]._x, aStunden[0]._y]);

 case „sek“ :

//-------------- aufruf –--------------

 switch (pZeit) {

};

 return (dZeit.getSeconds()*n60);

initUhr(6, 60, 3, 0xff6600, aSekunden, 7, 70, 3, 0 × 990000, aMinuten, 5, 50, 3, 0xf90000, aStunden, 70);

 break;

 case „min“ :

 return (dZeit.getMinutes()*n60);  break;

 case „std“ :

 var n12:Number = 360/12;

 return (dZeit. getHours()*n12+0.5*dZeit.getMinutes());  break; } }

function bewegung(pWer:Array, pZiel:Array):Void {  var aZiel:Array;

 for (var i:Number = 0; i
 aZiel = pZiel; } else {

 aZiel = [pWer[i-1]._x, pWer[i1]._y]; }

28.3 Initialisierung von Animationen Wie erwähnt, sind alternativ dazu Effekte denkbar, bei denen die Mausbewegung eine Animation auslöst. Deren Verlauf entwickelt sich anschließend unabhängig von weiteren Bewegungen der Maus. In unserer beispielhaften Übung wollen wir bei einer Mausbewegung in der Nähe des Cursors verschiedenfarbige Ellipsen einfügen, die wie Blätter anmuten. Sie bewegen sich drehend nach unten und blenden dabei langsam aus wie in Abbildung 130 zu sehen. Wir verwenden in dieser Übung die Zeichnungsmethoden der MovieClip-Klasse, um die Blätter zu erzeugen. Zwar könnten wir auch mit der attachMovie()-Methode arbeiten, doch reduzieren die Zeichnungsmethoden demgegenüber prinzipiell die Dateigrößen und haben den Vorteil, dass wir per AS die Form der eingeblendeten Objekte sehr schnell ändern können ohne eine neue Grafik händisch zeichnen zu müssen. Denkbar wäre auch, dem User die Möglichkeit zu geben, eine gewünschte Form auszuwählen oder zufallsbedingt jeweils neue Formen zu

 var nDifX:Number = aZiel[0]-o._x;  var nDifY:Number = aZiel[1]-o._y;

 var nDiff:Number = Math.sqrt((nDifX *nDifX)+(nDifY*nDifY));  o._x += nDifX*nTempo;  o._y += nDifY*nTempo; } }

mUhr.onEnterFrame = function() {

 bewegung(aSekunden, [this._xmouse, this._ymouse+nOffsetY]);

 bewegung(aMinuten, [aSekunden[0]._x, aSekunden[0]._y]);

Abbildung 130:  Blätteranimation nach Mausbewegung

28.3  Initialisierung von Animationen

generieren. Dazu müssen Sie lediglich die Methode integrieren, die Sie im Kapitel MovieClip, Abschnitt Zeichnungsmethoden, zum Erstellen beliebiger Polygone kennen gelernt haben. 1. Erstellen Sie eine Standarddatei. 2. Stellen Sie als Hintergrundfarbe schwarz ein. 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var mBlaetter:MovieClip, mBlatt:MovieClip;  var nCol:Number;

 var nGroesse:Number = 10;  var nTiefe:Number = 1;  var nAlpha:Number = 2;

 var aBlaetter:Array = [];

Mit mBlaetter definieren wir eine Variable zur Aufnahme aller bei Mausbewegung zu erzeugenden Blätter (oder Objekte), während mBlatt dazu dienen wird, beim Zeichnen jedes einzelne Blatt zu referenzieren. Um einen gesunden, farbenfrohen Mischwald in den verschiedenen Phasen seines Lebenszyklusses zu simulieren, richten wir eine Variable ein, die später eine zufällig errechnete Farbe aufnehmen soll. Die Variable nGroesse legt die (halbe) Breite einer Ellipse fest. Mit Hilfe von nTiefe kontrollieren wir die Tiefe, auf denen jeweils unsere Blätter erzeugt werden. Prinzipiell wäre auch die Verwendung der getNextHighestDepth()-Methode möglich, aber auf diese Weise sind wir in der Lage, für den Fall der Fälle einfach eine Obergrenze festzulegen. Um das Ausblenden realisieren zu können, initialisieren wir die Variable nAlpha mit dem Wert 2. Das Array aBlaetter nimmt später alle aktiven Blätter auf, so dass wir jederzeit wissen, welche Objekte vorhanden sind und animiert werden müssen. 4. Fügen Sie folgende Code-Blöcke ein:  //----------- functions –-----------  function init():Void {

 mBlaetter = this.createEmptyMovie­ Clip(„behBlaetter“, 1);  mBlaetter.onMouseMove = blatt;

 mBlaetter.onEnterFrame = animieren; }

 //------------ aufruf –-------------  init();

429

In der Funktion init() bereiten wir die Animation vor, indem wir zunächst einen leeren MovieClip als Behälter für alle Blätter initialisieren. Er reagiert auf jede Mausbewegung mit dem Aufruf der noch zu definierenden Funktion blatt() und sorgt in der ebenfalls noch zu definierenden Funktion animieren() dafür, dass sich die bereits vorhandenen Blätter bewegen. Zum Schluss rufen wir init() einmal auf. 5. Fügen Sie im Funktions-Block folgende Deklaration ein:  function blatt():Void {

 mBlatt = this.createEmptyMovieClip( „bl“+nTiefe, nTiefe);  nCol = Math.round(Math. random()*0xffffff);

 mBlatt.lineStyle(0, 0xffffff, 0);  mBlatt.beginFill(nCol, 100);

 mBlatt.curveTo(nGroesse, – nGroesse, nGroesse, 0);  mBlatt.curveTo(nGroesse, nGroesse, 0, 0);  mBlatt._x = _xmouse;  mBlatt._y = _ymouse;  nTiefe++; }

Wenn Sie beim Testen den Cursor bewegen, entstehen zahlreiche blattähnliche Ellipsen. Die Funktion blatt() erzeugt bei jedem Aufruf einen neuen leeren MovieClip, der in mBlatt referenziert wird. Seine Tiefe bestimmen wir mit Hilfe der Variablen nTiefe, die anfangs mit 1 initialisiert wurde. Die Instanznamen binden wir ebenfalls an diese Variable. Sie lauten bescheiden bl1, bl2 etc. Als Füllfarbe verwenden wir einen beliebigen Wert des RGB-Farbraums. Da 0xffffff eine (Hexadezimal-) Zahl repräsentiert, können wir einfach mit der Math-Klasse darauf zugreifen und per Math.random() einen Wert zwischen 0 und ca. 16,7 Millionen ermitteln. Anschließend zeichnen wir eine Ellipse. Ihre Linienstärke beträgt 0, d. h. wir verzichten auf eine Umrandung und möchten nur die Füllung als Grafik verwenden. Ihr übergeben wir den eben ermittelten Zufallsfarbwert und verwenden eine Deckkraft von 100 %. Sie ist 20 Pixel breit bzw. das Doppelte der Entfernung unserer Ankerpunkte von der horizontalen Mitte der Ellipse. Dieser Zusammenhang zwischen

430

Mitte, Entfernung der Ankerpunkte und Breite ist zugegebenermaßen willkürlicher Natur, reicht aber aus, um eine angenehm elliptische Form zu zeichnen. Die Grafik wird, beginnend an der Mausposition, horizontal gezeichnet. Der Registrierungspunkt befindet sich also an ihrem linken Rand. Wir positionieren mBlatt an der Stelle des Cursors. Um beliebig viele Blätter einblenden zu können, inkrementieren wir zum Abschluss die Variable nTiefe. Wer seinen Blättern weniger Farbenfreude spendieren und mehr auf Grüntöne setzen möchte, kann eine simple Änderung der Wertezuweisung für nCol durchführen: var nCol = Math.round(Math.random()*256)*256;

Beim Testen glänzen ihre Blätter in diversen Grünvarianten. Formal korrekter wäre es zwar gewesen, mit den Bit-Operatoren zu arbeiten, aber erfahrungsgemäß tun sich diejenigen etwas schwer, die über keinen Programmierhintergrund verfügen. Darum erlauben wir uns an dieser Stelle eine Vereinfachung, indem wir mit einer simplen Multiplikation denselben Prozess abbilden, den wir ansonsten über eben diese Operatoren definiert hätten. Die RGB-Farben werden bekanntermaßen aus dreimal 8 Bit berechnet, d. h. pro Farbkanal steht ein Wertebereich von 8 Bit bzw. 256 verschiedene Werten (0 bis 255) zur Verfügung. Die Blautöne liegen zwischen den Bitstellen 0 bis 8, Grün zwischen 8 und 16 sowie Rot zwischen 16 und 24. Um nun ein beliebiges Grün zu erhalten, benötigen wir Werte größer der Bitstelle 8 und kleiner 16. Der Bitstelle 8 entspricht in obigem Beispiel der nach der Rundung aufgeführte Faktor von 256. Und der Wertebereich von 256 verschiedenen Zahlen wird durch die Zufallsmethode Math.random()*256 abgedeckt. Möchten Sie statt dessen nur Rottöne, muss der gesamte Ausdruck erneut mit 256 multipliziert werden, bei Blautönen verzichten Sie einfach auf die zweimalige Multiplikation mit 256. Aufgrund der gleichen Größe und Ausrichtung wirken die Blätter trotz wechselnder Farben noch recht eintönig. 6. Erweitern Sie die Variablendeklarationen um (Fettdruck): var nCol:Number, nScale:Number;

7. Fügen Sie in der Deklaration von blatt() vor der Initialisierung von nCol ein:

Kapitel 28  Effekte (Maus)

nScale = Math.random()+1;

8. Fügen Sie in der Deklaration von blatt() unmittelbar nach dem Zeichnen ein: mBlatt._xscale = mBlatt._yscale *= nScale;

Ihre Blätter erscheinen nun in leicht verschiedenen Größen. Das erreichen wir, indem in der Variablen nScale ein Zufallswert zwischen 0 und 0.9 Periode ermittelt wird, zu dem wir 1 addieren. Um diesen Wert werden die Blätter jeweils horizontal und vertikal skaliert, so dass sie mindestens ihre ursprüngliche Größe beibehalten und maximal auf nicht ganz die doppelte Größe anwachsen. Wer sie in x- und y-Richtung um verschiedene Werte skalieren möchte, muss den Code wie folgt ändern: nScale = Math.random()+1; mBlatt._xscale *= nScale; nScale = Math.random()+1; mBlatt._yscale *= nScale;

Noch etwas abwechslungsreicher lässt sich das Einblenden gestalten, wenn wir die anfängliche Position zufallsbedingt um die Maus herum streuen. 9. Erweitern Sie den Variablen-Block: var nOffset:Number = 80;

Wir legen mit dieser Variablen fest, über wie viel Pixel unsere Blätter streuen können. In Breite und Höhe steht uns also ein Bereich von jeweils 80 Pixeln zur Verfügung, deren Mittelpunkt die aktuelle Mausposition darstellt. 10. Erweitern Sie den Funktions-Block um folgende Deklaration:  function offset():Number {

 return Math.round(Math. random()*nOffset)-nOffset/2;  }

Beim Aufruf gibt die Funktion einen Wert zurück, der zwischen –40 und 40 liegt. 11. Ändern Sie innerhalb der Deklaration von blatt() die Zuweisung der x- und y-Position des neu gezeichneten Blattes (Fettdruck):  mBlatt._x = _xmouse+offset();  mBlatt._y = _ymouse+offset();

28.3  Initialisierung von Animationen

Sobald ein Blatt eingefügt wird, ermitteln wir jeweils eine Zufallszahl, die die oben genannten Werte annehmen kann, und addieren sie zur x- und y-Position der Maus hinzu. Nehmen wir an, unsere Maus befindet sich auf der Position 125,403. Nun erhalten wir für den ersten Aufruf von offset() beispielsweise einen Wert von –39 und für den zweiten einen Wert von 17. Daraus ergibt sich für das gezeichnete Blatt eine horizontale Position von 125 + –39 bzw. 86 und eine vertikale Position von 403 + 17 bzw. 420. Ein derartiges Blatt wird also gegenüber der Maus nach links unten versetzt eingeblendet. Wir könnten bereits beim Einblenden dafür sorgen, dass die Blätter verschieden gedreht werden. Da jedoch die spätere Animation ebenfalls eine Drehung umfasst, können wir uns das an dieser Stelle sparen. Lediglich eine Initialisierung für die Drehung (und für eine Bewegung nach unten) müssen wir hier vornehmen. 12. Erweitern Sie die Deklaration von blatt() unmittelbar nach der Initialisierung von mBlatt():  mBlatt.nRotat = Math.round(Math.random()*30)-15;  mBlatt.nTempoY = Math.round (Math. random()*5)+3;

Jedes Blatt erhält einen Zufallswert für das vertikale Tempo, der zwischen  –15 und 15 liegt, sowie einen Zufallswert für die Drehgeschwindigkeit zwischen 3 und 8. Wir richten die Werte in Form von Objektvariablen ein, so dass wir später einfach darauf zugreifen können. 13. Erweitern Sie die Deklaration von blatt() unmittelbar vor dem Inkrement von nTiefe:

aBlaetter.push(mBlatt);

Beim Erzeugen erfassen wir alle Blätter im Array aBlaetter, so dass wir sie später einfacher animieren und löschen können. 14. Erweitern Sie den Funktions-Block:  function animieren():Void {

 for (i=0; i0) {

 aBlaetter[i]._alpha –= nAlpha;  aBlaetter[i]._rotation += aBlaetter[i].nRotat;

431

 aBlaetter[i]._y += aBlaetter[i].nTempoY; } else {

 aBlaetter[i].removeMovie­ Clip();  aBlaetter.splice(i, 1); } }

}

Die Blätter bewegen sich nach dem Erzeugen drehend nach unten, bis sie verschwinden. Die Funktion animieren() sorgt für die Bewegung und das Ausblenden der Blätter. Dabei greift sie auf den Inhalt des Arrays aBlaetter zu. Für jedes dort gespeicherte Element werden folgende Aktionen ausgeführt:

• Wenn die Deckkraft des erfassten Elements größer

0 ist, es also noch sichtbar ist: –– Dann reduzieren wir die Deckkraft um den anfangs in der Variablen nAlpha gespeicherten Wert von 2, –– drehen es um den in seiner eigenen Variablen nRotat ermittelten Wert –– und bewegen es um den ebenfalls in seiner eigenen Variablen nTempoY festgehaltenen Wert nach unten. Andernfalls, d. h., wenn die Deckkraft bereits unter • 0 gesunken ist: –– löschen wir es von der Bühne, da es ohnehin nicht mehr gesehen werden kann, –– und entfernen es aus dem Array, da eine weitere Bewegung keinen Sinn mehr machen würde. Wenn Sie möchten, können Sie natürlich auch den Wert, um den die Deckkraft reduziert wird, als Zufallszahl festlegen, so dass die Dauer des Ausblendens anders als im vorliegenden Beispiel von Blatt zu Blatt verschieden ist. Obwohl in dieser Version nicht unbedingt notwendig, schadet es nicht, wenn man das zumindest theoretisch ins Unendliche Anwachsen der für die Tiefe der neuen Blätter zuständigen Variable nTiefe unterbindet. 15. Erweitern Sie den Variablen-Block:

var nMax:Number = 200;

432

Kapitel 28  Effekte (Maus)

16. Ergänzen Sie in der Deklaration von blatt() unmittelbar nach dem Inkrement von nTiefe:

if (nTiefe>nMax) {



}

 nTiefe = 1;

Wir legen als höchsten Wert 200 fest und kontrollieren beim Einblenden, ob nTiefe dieses Zahl überschreitet. Ist das der Fall, setzen wir sie zurück auf ihren Ausgangswert 1. Dadurch kann sie nie einen Wert annehmen, der sich außerhalb unserer Kontrolle befindet. Natürlich können Sie mit anderen Zahlen experimentieren, aber achten Sie darauf, keinen zu kleinen Wert zu wählen. Denn sonst werden eventuell Blätter überschrieben, die noch nicht am Ende ihrer Animation angelangt sind. Das geschieht dann, wenn zwei Objekte auf die gleiche Tiefe gesetzt werden.

28.4 Code Zur Kontrolle das gesamte Skript (beliebige Farben; auskommentiert wurde die Zeile zur Erzeugung von Grüntönen): //-------------- vars –---------------var mBlaetter:MovieClip, mBlatt:MovieClip;

var nCol:Number, nScale:Number; var nGroesse:Number = 10; var nTiefe:Number = 1; var nAlpha:Number = 2;

 mBlatt.nTempoY = Math.round (Math. random()*5)+3;  nScale = Math.random()+1;  nCol = Math.round(Math. random()*0xffffff);

//nCol = Math.round(Math.random()*256)*256;

 mBlatt.lineStyle(0, 0xffffff, 0);  mBlatt.beginFill(nCol, 100);

 mBlatt.curveTo(nGroesse, – nGroesse, nGroesse * 2, 0);

 mBlatt.curveTo(nGroesse, nGroesse, 0, 0);  mBlatt._xscale = mBlatt._yscale *= nScale;  mBlatt._x = _xmouse+offset();  mBlatt._y = _ymouse+offset();  aBlaetter.push(mBlatt);  nTiefe++;

 if (nTiefe>nMax) {  nTiefe = 1; } }

function animieren():Void {

 for (i=0; i0) {

 aBlaetter[i]._alpha –= nAlpha;  aBlaetter[i]._rotation += aBlaetter[i].nRotat;

var nMax:Number = 200;

 aBlaetter[i]._y += aBlaetter[i]. nTempoY;

var aBlaetter:Array = [];

 aBlaetter[i].removeMovieClip();

var nOffset:Number = 80;

//----------- functions –-------------function init():Void {

 mBlaetter = this.createEmptyMovieClip („behBlaetter“, 1);  mBlaetter.onMouseMove = blatt;

 mBlaetter.onEnterFrame = animieren; }

function blatt():Void {

 mBlatt = this.createEmptyMovieClip („bl“+nTiefe, nTiefe);

 mBlatt.nRotat = Math.round (Math.random()*30)-15;

} else {

 aBlaetter.splice(i, 1); } } }

function offset():Number {

 return Math.round(Math. random()*nOffset)-nOffset/2; }

//------------- aufruf –--------------init();

28.5  Eigenschaftsänderungen

In unserem Beispiel liegt der Drehpunkt der Ellipse an der linken Spitze. Er lässt sich leicht in die Mitte verschieben, wenn Sie in der Deklaration von blatt() unmittelbar vor dem Zeichnen ein moveTo() einfügen, das auf die Position  – nGroesse,0 ausgeführt wird. Dann müssen nur noch die bei curveTo() verwendeten x-Werte um nGroesse reduziert werden, was einfach dem Verzichten auf eine Multiplikation mit dem Faktor 2 entspricht. Ihre Grafik verschiebt sich damit um nGroesse Pixel nach links. Selbstverständlich sind beliebige andere Formen denkbar. Testen Sie doch mal folgendes: mBlatt.moveTo(-nGroesse,- nGroesse); mBlatt.curveTo(0,0, nGroesse,nGroesse); mBlatt.curveTo(0,0, nGroesse, nGroesse);

mBlatt.curveTo(0,0,- nGroesse, nGroesse);

mBlatt.curveTo(0,0,- nGroesse,nGroesse);

Das Ergebnis zeigt Abbildung 131. Ebenso können Sie Skripte aus dem Kapitel Zeichnungsmethoden der MovieClip-Klasse einfügen, mit denen wir beliebige Polygone erzeugt haben. Die Funktion polygon() muss dann die Anzahl der Ecken als Zufallswert ermitteln. Ähnliches wäre auch mit der ebenfalls dort besprochenen Funktion stern() möglich. Alternativ kann man die Anzahl an Ecken von der ermittelten Geschwindigkeit oder der Mausposition abhängig machen.

Abbildung 131:  Alternative Objektformen

433

28.5 Eigenschaftsänderungen Mit Hilfe der Zeichnungsmethoden lassen sich ebenso schnell wie einfach Eigenschaftsänderungen in Abhängigkeit von der Mausposition realisieren, wobei wir uns hier nur mit der Form eines sehr simplen Objektes befassen wollen. Andere Eigenschaften wir beispielsweise Farbe, Größe etc. setzen natürlich nicht zwingend die Zeichnungsmethoden voraus. In unserer Übung blenden wir bei jeder Mausbewegung horizontal zwei Kurven ein, deren Scheitelpunkte über die X- und Y-Position der Maus berechnet werden. Nach einiger Zeit verblassen die Kurven. In Abbildung 132 sehen Sie das Ergebnis nach einer kurzen Mausbewegung. 1. Erstellen Sie eine Standarddatei. 2. Stellen Sie als Hintergrundfarbe 0 × 000000 ein. 3. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var mKurve:MovieClip, mKurven:MovieClip;

 var nTiefe:Number = 1;  var nAlpha:Number = 5;

 var aKurven:Array = [];

Nach gewohnter Art referenzieren wir in mKurven den Behälter, der die in mKurve referenzierten einzelnen Kurven aufnimmt. Die Tiefe jeder neuen Kurve legen wir in nTiefe fest, während mit nAlpha ein Wert für die sukzessive Reduktion ihrer Deckkraft gespeichert wird. Mit Hilfe des Arrays aKurven erfolgt die gewünschte Animation.

Abbildung 132:  Formänderung nach Mausbewegung

434

4. Fügen Sie folgende Code-Blöcke ein:  //----------- functions –-----------  function init():Void{

 mKurven = this.createEmptyMovieClip („behKurven“, 1);  mKurven.onMouseMove = zeichnen;  mKurven.onEnterFrame = alphas; }

 //-----------–– aufruf –------------  init();

Die Vorgehensweise ähnelt derjenigen in der vorherigen Übung: Wir erstellen einen leeren MovieClip als Behälter für alle Kurven und weisen ihm ein onMouseMove, das die Kurven zeichnet, sowie ein onEnterFrame, das für die Animation verantwortlich ist, zu. Die dort jeweils aufgerufenen Funktionen müssen natürlich noch definiert werden. Der abschließende Aufruf von init() initialisiert den gesamten Prozess. 5. Erweitern Sie den Funktions-Block um folgende Deklaration:  function kurven(xStart, yStart, xScheitel, yScheitel, xPos, yPos):Void {

 mKurve = mKurven.createEmptyMovie­ Clip(„k“+nTiefe, nTiefe);  aKurven.push(mKurve);

 mKurve.lineStyle(2, 0xffaa00, 100);  mKurve.moveTo(xStart, yStart);

 mKurve.curveTo(xScheitel, yScheitel, xPos, yPos);  nTiefe++; }

Diese Funktion sorgt für das Zeichnen einer Kurve. Zunächst erzeugt sie einen leeren MovieClip, zu dem wir eine Referenz in aKurven speichern. Als Stil für die in diesem MovieClip zu zeichnende Kurve legen wir eine Stärke von 2 Pixel, einen orangenen Farbton sowie eine Deckkraft von 100 % fest. Da sich mKurve im Koordinatenursprung des übergeordneten Behälters und damit zugleich im Koordinatenursprung der Bühne befindet, wir jedoch eine Kurve horizontal zur Mausposition zeichnen wollen, bewegen wir den virtuellen Zeichenstift auf die als Argumente beim Aufruf von kurven() übergebenen Werte xStart und

Kapitel 28  Effekte (Maus)

yStart. Unsere beiden Kurven werden jeweils von

links nach rechts gezeichnet, weswegen wir die Anfangsposition übergeben müssen. Alternativ könnte man sie von der Mitte nach außen zeichnen, dann entspräche die Anfangsposition immer der Mausposition. Unsere Variante hat jedoch den Vorteil, falls gewünscht, auch unabhängig vom Cursor beliebige Anfangspositionen zu erlauben. Von diesem Punkt aus wird eine Kurve gezeichnet, deren Scheitel- und Endpunkte wir ebenfalls als Argumente übergeben. Um immer wieder neue Grafiken erstellen zu können, muss nTiefe inkrementiert werden. Um überhaupt etwas zu sehen, fehlt natürlich noch der Aufruf der eben definierten Funktion. 6. Erweitern Sie den Funktions-Block um folgende Deklaration:  function zeichnen():Void {

 kurven(0, _ymouse, _xmouse/2, Stage.height/2, _xmouse, _ymouse); }

Beim Testen zeichnet Flash eine Kurve vom Bühnenrand bis zur Maus. Wir übergeben beim Aufruf der Funktion, der bei jeder Mausbewegung erfolgt, sechs Argumente:

• Eine horizontale Position von 0, was dem linken

Bühnenrand entspricht. • Als vertikale Position die Position der Maus. • Horizontal liegt der Ankerpunkt genau auf halber Strecke zwischen Startpunkt und Maus. • Vertikal setzen wir ihn auf halbe Bühnenhöhe, so dass sich der Scheitelpunkt abhängig von der vertikalen Mausposition oberhalb oder unterhalb des Cursors befindet. • Den Endpunkt der Linie bilden horizontale und vertikale Position der Maus. Momentan entsteht nur eine Linie vom Rand zur Maus. 7. Erweitern Sie die Deklaration von zeichnen() nach dem Aufruf von kurven() um folgende Zeilen:  var xPlus:Number = (Stage.width-_ xmouse)/2;  kurven(_xmouse, _ymouse, _ xmouse+xPlus, Stage.height/2, Stage.width, _ymouse);

28.6  Code

Nun erscheint jeweils eine zweite Linie, die von der Maus bis zum rechten Bühnenrand reicht. Für diese neue Linie müssen wir die halbe Strecke zwischen horizontaler Mausposition und rechtem Rand ermitteln, denn sie wird benötigt, um die horizontale Position des Scheitelpunkts festzulegen. Das geschieht mit Hilfe der Variablen xPlus. Anschließend rufen wir erneut die für das Zeichnen verantwortliche Funktion auf, der wir in ähnlicher Form wie zuvor die benötigten Argumente übergeben. Das Zeichnen erfolgt auch hier von links nach rechts, so dass der Startpunkt diesmal an der Mausposition liegt, während der Endpunkt dem linken Rand auf gleicher Höhe wie die Maus entspricht. Vertikal muss der Scheitelpunkt auf dem gleichen Wert liegen wie derjenige des vorherigen Funktionsaufrufs. Nun fehlt nur noch das Ausblenden, da wir ansonsten den Screen schnell mit unseren Linien zugekleistert haben. 8. Erweitern Sie den Funktions-Block um folgende Deklaration:  function alphas():Void {

 for (var i:Number = 0; i
 aKurven[i].removeMovieClip();  aKurven[i].splice(i, 1); } } }

Ihre Kurven werden beim Testen relativ schnell ausgeblendet und machen so neuen Grafiken Platz. Nach altbewährtem Prinzip greifen wir auf jedes Element zu, das in aKurven erfasst wurde. Zunächst reduzieren wir die Deckkraft um den im VariablenBlock festgelegten Wert und kontrollieren anschließend, ob das aktuelle Element nicht mehr sichtbar ist. Trifft das zu, wird es einfach von der Bühne entfernt und aus aKurven gelöscht.

435

var mKurve:MovieClip, mKurven:MovieClip;

var nTiefe:Number = 1; var nAlpha:Number = 5;

var aKurven:Array = [];

//------------- functions –-----------function init():Void {

 mKurven = this.createEmptyMovieClip („behKurven“, 1);  mKurven.onMouseMove = zeichnen;  mKurven.onEnterFrame = alphas; }

function kurven(xStart, yStart, xScheitel, yScheitel, xPos, yPos):Void {

 mKurve = mKurven.createEmptyMovieClip („k“+nTiefe, nTiefe);  aKurven.push(mKurve);

 mKurve.lineStyle(2, 0xffaa00, 100);  mKurve.moveTo(xStart, yStart);

 mKurve.curveTo(xScheitel, yScheitel, xPos, yPos);  nTiefe++; }

function zeichnen():Void {

 kurven(0, _ymouse, _xmouse/2, Stage. height/2, _xmouse, _ymouse);  var xPlus:Number = (Stage.width-_ xmouse)/2;

 kurven(_xmouse, _ymouse, _ xmouse+xPlus, Stage.height/2, Stage. width, _ymouse); }

function alphas():Void {

 for (var i:Number = 0; i
 aKurven[i].removeMovieClip();  aKurven[i].splice(i, 1); }

28.6 Code Zur Kontrolle das gesamte Skript: //---------------- vars –--------------

} }

//-------------- aufruf –-------------init();

Interface und Navigation

Das Interface bildet die Schnittstelle zwischen User und Applikation. Es stellt Möglichkeiten zur Verfügung, um mit einer Anwendung zu interagieren, Daten einzugeben und ausgeben zu lassen oder auf irgendeine Art Änderungen herbei zu führen, wozu auch die Navigation, d. h., das komplette Auswechseln des Screeninhalts, zählt. Eine Navigation repräsentiert insofern die digitale Variante zum Umblättern von Seiten im klassischen Medium Buch. Vor sehr langer Zeit, im letzten Jahrtausend, waren Interfaces kommandozeilenbasiert, boten also nichts weiter als einen blinkenden Cursor, an dessen Stelle Befehle eingegeben werden mussten. Aus dieser kryptischen, nur von Spezialisten zu beherrschenden Form haben sie sich in der Gegenwart zu einem Potpourri grafischer Elemente entwickelt, die im Idealfall selbsterklärend sind. Der Anwender muss nicht lange nachdenken, welche Funktionalität sich hinter einem bestimmten Element verbirgt, sondern erkennt diese unmittelbar an ihrer grafischen Gestaltung. Dazu haben nicht zuletzt die Betriebssysteme beigetragen, die zum Durchsetzen von Standards führten. Ein simples Beispiel ist das Papierkorbsymbol, mit dem wir korrekterweise einen Löschvorgang assoziieren. Wir wollen uns im Folgenden mit einigen typischen, häufig verwendeten Interface-Elementen wie Check Boxes, Radio Buttons und Slider befassen.

29

che Beispiel, um die Funktionsweise eines betreffenden Skripts zu demonstrieren. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcHaken. 3. Erstellen Sie dort ein statisches Textfeld (14, schwarz, Webdings, linksbündig). 4. Geben Sie in das Textfeld den Buchstaben „a“ ein. Daraufhin erscheint ein Häkchen-Symbol. 5. Wandeln Sie das Textfeld mit <Strg> in eine Grafik um. 6. Weisen Sie der Grafik folgende Werte im Eigenschaftsfenster zu: Breite: 12, Höhe: 16, X-Position: –5,Y-Position: –9. 7. Erstellen Sie einen leeren MovieClip namens mcRechteck. 8. Zeichnen Sie dort ein Quadrat (14 × 14, Linien­ stärke 1, Füllung weiß). 9. Positionieren Sie es auf –7,–7. 10. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcKasten, Instanzname kasten, Registrierungspunkt mittig). 11. Erstellen Sie oberhalb der aktuellen Ebene eine neue Ebene namens txt. 12. Fügen Sie dort an der Position 15,–10 ein dynamisches Textfeld namens txt ein (Verdana, 12, schwarz, nicht auswählbar, linksbündig).

29.1 Check Boxes Unter einer Check Box versteht man schlicht ein Rechteck, in das man per Mausklick ein Häkchen oder ein x einfügt, um eine Auswahl zu symbolisieren. Wir erstellen das in der Abbildung 133 dargestellte einfa-

Abbildung 133:  Check Boxes des Workshops

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

437

438

Abbildung 134:  Aufbau von mcRecht

13. Erstellen Sie oberhalb der aktuellen Ebene eine neue Ebene namens haken. 14. Fügen Sie dort mcHaken auf der Position 0,0 ein. Den Aufbau des MovieClips verdeutlicht Abbildung 134. 15. Weisen Sie der eingefügten Instanz den Namen haken zu. 16. Weisen Sie mcRecht in der Bibliothek eine gleichnamige Verknüpfung zu. 17. Kehren Sie zur Hauptzeitleiste zurück. 18. Fügen Sie dort auf actions folgendes Bildskript ein:  //------------ vars –--------------  var aCheckBoxes:Array = [„Eins“, „Zwei“, „Drei“];  var aCheckTrue:Array = [false, false, false];  var aGewaehlt:Array = [];

 var mCheck:MovieClip = this.create EmptyMovieClip(„checkboxes“, this. getNextHighestDepth());  var nAbstand:Number = 10;

Zur Vorbereitung benötigen wir eine Reihe von Variablen. Im Array aCheckBoxes legen wir die Texte fest, die neben den Check Boxes eingeblendet werden. Aus Gründen der Vereinfachung wählen wir sehr kurze Texte, die Sie natürlich beliebig anpassen kön-

Kapitel 29  Interface und Navigation

nen. Alternativ wäre es auch möglich, anstelle von Texten Grafiken einzublenden, deren Namen dann hier erfasst würden. Die Länge des Arrays entspricht gleichzeitig der Anzahl der benötigten Check Boxes. In der Regel sind die Boxes beim erstmaligen Anzeigen nicht aktiv. Es sind jedoch durchaus Situationen denkbar, wo eine Vorauswahl Sinn macht. Daher speichern wir in dem Array aCheckTrue die entsprechenden Zustände als Boolean, wobei false nicht ausgewählt und true eben ausgewählt bedeutet. Über die Indexposition erkennen wir, welcher Wert zu welcher Box gehört: Der Wert auf aCheckTrue[0] bezieht sich auf aCheckBoxes[0] etc. Natürlich wäre es möglich, alle Daten in einem mehrdimensionalen Array zu erfassen, aber dann würde es verschiedene Datentypen umfassen, was eine potentielle Fehlerquelle darstellt. Eine Check Box auswählen macht natürlich nur Sinn, wenn wir das Ergebnis irgendwo festhalten. Daher richten wir das Array aGewaehlt ein. Hier würde es nicht ausreichen, nur eine Variable zu verwenden, da es ja möglich ist, mehrere Boxes zu aktivieren. Um größere Flexibilität zu bewahren, richten wir einen leeren MovieClip ein, der später alle Check Boxes aufnehmen kann. Damit diese vertikal nicht aneinander kleben, legen wir in einer Variablen einen beliebig zu wählenden Abstand (hier: 10 Pixel) fest. 19. Erweitern Sie das Skript um die Deklaration einer init()-Funktion:  //----------- functions –----------  function init(pPosX, pPosY) {  mCheck._x = pPosX;  mCheck._y = pPosY;

 var mBox:MovieClip;

 for (var i:Number = 0; i
 mBox = mCheck. attachMovie(„mcRecht“, „box“ + i, i);

 mBox._x = mBox.kasten._width/2;  mBox._y = i*(mBox._ height+nAbstand)+mBox.kasten._ height/2;  mBox.haken._visible = aCheckTrue[i]; }

}

29.1  Check Boxes

Die init()-Funktion übernimmt zwei Parameter, bei denen es sich einfach um die gewünschte x- und y-Position des MovieClips handelt, in den die Check Boxes eingefügt werden. In den ersten beiden Zeilen verwenden wir genau diese Parameter, um mCheck zu positionieren. Anschließend richten wir eine Variable ein, um alle einzufügenden Check Boxes aufzunehmen, wodurch sich das nachfolgende Skripting vereinfacht. Das konkrete Einfügen per attachMovie()Methode erfolgt innerhalb einer Schleife, die so oft ausgeführt wird, wie aCheckBoxes Elemente enthält. Bei der horizontalen Positionierung könnten wir einfach 0 wählen. Dann würde jedes Kästchen aufgrund des Registrierungspunktes von mcRecht etwas links über den Registrierungspunkt des übergeordneten Behälters hinausragen. Daher verschieben wir die eingefügten Boxen um die halbe Breite des Auswahlkästchens nach rechts. Aufgrund der vertikalen Anordnung erhalten alle Elemente die gleiche x-Position. Die y-Position wird an die Zählvariable i gebunden, indem wir i mit der Summe einer Addition von Kästchenhöhe und Zwischenabstand multiplizieren. Für das erste Element ergibt sich daraus 0, weil i 0 beträgt. Dazu wird noch die halbe Kästchenhöhe addiert, wiederum um den in der Mitte befindlichen Registrierungspunkt auszugleichen. Anschließend setzen wir die Eigenschaft _visible des Häkchens auf den im Array aCheckTrue definierten Wert. In unserem Fall werden alle Häkchen unsichtbar geschaltet, denn unser Array enthält nur den Wert false. 20. Erweitern Sie das Skript um folgende Zeilen:  //----------- aufruf –-------------  init(Stage.width/2, Stage.height/2);

Wenn Sie testen, erscheinen drei Check Boxes, die als nicht ausgewählt dargestellt werden. Der Aufruf von init() sorgt für das Einblenden der Boxen, wobei wir als x- und y-Position jeweils die halbe Bühnenbreite und halbe Bühnenhöhe mitgeben. Dadurch wird der Behälter für die Boxen mit seiner linken oberen Ecke in der Bühnenmitte eingefügt. Momentan verfügen die Kästchen noch über keine Funktionalität. 21. Fügen Sie innerhalb der Schleife nach der Zuweisung der Eigenschaft _visible folgende Zeilen ein:  mBox.onPress = function() {

439

 this.haken._visible = !this.haken._visible;

};

Jetzt können die Boxen ausgewählt werden. Wenn wir entweder auf das Kästchen oder auf den Text klicken, wird der Wert, den wir der Eigenschaft _visible zugewiesen haben, in sein Gegenteil verkehrt. Das funktioniert in diesem Fall, weil wir mit Bool’schen Werten arbeiten. Wenn anfangs die Eigenschaft _visible auf false gesetzt ist, so wird sie beim nächsten Klick true. Klicken wir erneut, macht Flash aus true ein false, so dass jeder Klick dazu führt, ein aktiviertes Kästchen zu deaktivieren und umgekehrt. Nun müssen wir noch den gewählten Zustand auswerten. 22. Erweitern Sie das onPress-Ereignis um folgenden Aufruf (Fettdruck):

auswertung();

23. Fügen Sie nach Ende des onPress-Ereignisses, aber noch innerhalb der Schleife, den gleichen Aufruf erneut ein:

auswertung();

24. Fügen Sie innerhalb des Funktionsblocks nach Ende der init()-Deklaration folgende Zeilen ein:  function auswertung() {  aGewaehlt = [];

 for (var e in mCheck) {

 if (typeof (mCheck[e]) == „movieclip“) {

 if (mCheck[e].haken._visible == true) {

 aGewaehlt.push(mCheck[e]); } } }

}

Visuell ergibt sich zwar kein Unterschied zu vorher, aber jetzt wird unsere Auswahl jedes mal ausgewertet, sobald wir eines der Kästchen anklicken. Innerhalb des onPress-Ereignisses rufen wir jedes mal die Funktion auswertung() auf, um zu protokollieren, welche Kästchen angeklickt sind. Außerdem wird die Funktion einmal ausgeführt, bevor

440

ein Klick erfolgen kann, also unmittelbar nach Einblenden der Check Boxes. Das ist notwendig für den Fall, dass von Anfang an ein oder mehrere Kästchen bereits als aktiviert dargestellt werden und der Anwender keine andere Auswahl trifft. Die Funktion auswertung() erkennt an der Eigenschaft _visible, ob ein Element ausgewählt wurde. Beträgt ihr Wert true, dann speichern wir den Instanznamen der aktivierten Check Box in dem Array aGewaehlt. Hier könnten wir entweder bei jedem Klick das Array untersuchen, ob das angewählte Element bereits gespeichert wurde. Falls ja, dann müssten wir es löschen, falls nein, müssten wir es einfügen. Einfacher gestaltet sich der Ablauf, wenn wir bei jedem Aufruf der Funktion auswertung() einfach das Array löschen und dann jedes Element, dessen Eigenschaft _visible auf true gesetzt ist, speichern. Das geschieht, indem wir unmittelbar vor Beginn der Schleife aGewaehlt einfach ein leeres Array zuweisen. Anschließend greifen wir mit einer for in-Schleife auf alle Elemente innerhalb des übergeordneten Behälters zu. Wenn das aufgerufene Element dem Datentyp MovieClip entspricht, wissen wir, dass es sich um ein Kästchen handeln muss. Dann müssen wir nur noch die fragliche Eigenschaft _visible kontrollieren und gegebenenfalls speichern. Aus Anwendersicht wäre es noch schön, zu wissen, was man denn auswählen kann. Das ist mit zwei Zeilen schnell erledigt. 25. Fügen Sie in init() innerhalb der Schleife nach der vertikalen Positionierung von mBox ein:  mBox.txt.autoSize = „left“;

 mBox.txt.text = aCheckBoxes[i];

Neben den Check Boxes erscheint nun der zugehörige Text. Um den korrekten Text zu finden, müssen wir nur die Zählvariable innerhalb der Schleife als Index für den Zugriff auf aCheckBoxes verwenden. Um den Text linksbündig auszurichten und das Textfeld an den Text anzupassen, setzen wir dessen Eigenschaft autoSize auf left. Wir machen es uns zugegebenermaßen einfach, indem wir nur das angeklickte Element anstelle des angezeigten Textes oder eines anderen noch zu definierenden Wertes speichern. Das reicht jedoch aus, denn eine wo auch immer stattfindende Auswertung kann mit einer bedingten Anweisung den ausgewählten Elementen jeweils eine spezifische Aktion zuweisen.

Kapitel 29  Interface und Navigation

Alternativ kann man natürlich auch den angezeigten Text erfassen. Dann muss bei Klick auf eine Box nur das letzte Zeichen im Namen ausgelesen werden – wir erinnern uns (hoffentlich): Dieses Zeichen ist mit dem Index des Arrays aCheckBoxes identisch. Auslesen kann man es in der Funktion auswertung(): if (mCheck[e].haken._visible == true) {  var nIndex:Number = Number(mCheck[e]._name.substr(3));  aGewaehlt.push(nIndex); }

Dann wird nur der Index gespeichert. Bei einer späteren Verwertung der ausgewählten Elemente erhält man den zugehörigen Text mit aCheckBoxes[nIndex]. Natürlich kann man diesen Wert auch direkt im Array speichern.

29.2 Radio Buttons Im Gegensatz zu Check Boxes lassen Radio Buttons nur eine einzige Auswahl zu. Wird auf ein Button geklickt, erfolgt automatisch eine Deaktivierung des vorher aktiven Buttons. Klicken wir erneut auf einen aktiven Button, deaktivieren wir auch ihn. Das benötigte Skript entspricht weitgehend dem eben vorgestellten und muss nur geringfügig angepasst werden. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcPunkt. 3. Zeichnen Sie dort einen schwarzen Kreis (8 × 8, ohne Linie). 4. Positionieren Sie ihn mittig auf –4,–4. 5. Erstellen Sie einen leeren MovieClip namens mcKreis.

Abbildung 135:  Radio Buttons

29.2  Radio Buttons

441

 var aCheckTrue:Array = [false, false, false];  var mGewaehlt:MovieClip;

 var mCheck:MovieClip = this.createE mptyMovieClip(„radioButtons“, this. getNextHighestDepth());  var nAbstand:Number = 10;

Gegenüber der vorhergehenden Übung ändert sich lediglich Zeile 3, in der wir anstelle eines Arrays für die Aufnahme der gewählten Boxes eine Variable definieren. Sie reicht völlig aus, da wir immer nur eine einzige Instanz speichern müssen. Ansonsten legen wir wie gehabt ein Array mit den einzublendenden Texten und den Werten für die Eigenschaft _visible, einen Behälter für die Radio Buttons sowie eine Abstandsvariable für deren Positionierung fest. 17. Erweitern Sie das Skript um die Deklaration einer init()-Funktion: Abbildung 136:  Aufbau von mcKreis



//--------- functions –-------------

 function init(pPosX, pPosY) {  mCheck._x = pPosX;

6. Zeichnen Sie dort einen Kreis (14 × 14, Linienstärke 1, Füllung weiß). 7. Positionieren Sie ihn mittig auf –7,–7. 8. Wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcRahmen, Instanzname rahmen, Registrierungspunkt mittig). 9. Erstellen Sie oberhalb der aktuellen Ebene eine neue Ebene namens txt. 10. Fügen Sie dort an der Position 15,–10 ein dynamisches Textfeld namens txt ein (Verdana, 12, schwarz, nicht auswählbar, linksbündig). 11. Erstellen Sie oberhalb der aktuellen Ebene eine neue Ebene namens punkt. 12. Fügen Sie dort mcPunkt auf der Position  –4,–4 ein. Vergleichen Sie zum Aufbau die Abbildung.. 13. Weisen Sie der eingefügten Instanz den Namen punkt zu. 14. Weisen Sie mcKreis in der Bibliothek eine gleichnamige Verknüpfung zu. 15. Kehren Sie zur Hauptzeitleiste zurück. 16. Fügen Sie dort auf actions folgendes Bildskript ein:  //------------ vars –--------------  var aCheckBoxes:Array = [„Eins“, „Zwei“, „Drei“];

 mCheck._y = pPosY;

 var mBox:MovieClip;

 for (var i:Number = 0; i
 mBox._x = mBox.rahmen._width/2;  mBox._y = i*(mBox._ height+nAbstand)+mBox.rahmen._ height/2;  mBox.txt.autoSize = „left“;

 mBox.txt.text = aCheckBoxes[i];  mBox.punkt._visible = aCheckTrue[i];  auswertung(); }

}

Auch diese Funktion ist zunächst identisch mit derjenigen aus der vorhergehenden Übung, wo sie ausführlich erläutert wird. Hier ändern sich lediglich die Namen der einzufügenden MovieClips sowie die Instanznamen.

442

Kapitel 29  Interface und Navigation

18. Erweitern Sie das Skript um den Funktionsaufruf:  //---------––– aufruf –------------  init(Stage.width/2, Stage.height/2);

Selbst der Funktionsaufruf muss gegenüber der ersten Version nicht geändert werden. In diesem Fall werden die Radio Buttons wie zuvor die Check Boxes in einem mittig positionierten Behälter angezeigt. 19. Fügen Sie innerhalb der Schleife nach der Zuweisung der Eigenschaft _visible folgende Zeilen ein:  mBox.onPress = function() {  for (var e in mCheck) {

 if (typeof (mCheck[e]) == „movie­ clip“ && mCheck[e] != this) {  mCheck[e].punkt._visible = false;

 if (mCheck[e].punkt._visible == true) {  mGewaehlt = mCheck[e];  return; } } }

}

In der Funktion auswertung() gehen wir erneut alle Elemente innerhalb des übergeordneten Behälters durch. Im Gegensatz zur ersten Übung wird, sobald wir eine Instanz punkt gefunden haben, die auf _visible geschaltet ist, diese in einer Variablen gespeichert und die Schleife abgebrochen. Denn wir wissen, dass nur ein einziger Button aktiv sein kann, ein weiteres Abarbeiten der Schleife würde also keinen Sinn mehr machen.

} }

 this.punkt._visible = !this. punkt._visible;  auswertung();

};

Zunächst einmal enthält auch das onPress-Ereignis den schon vorher verwendeten Code, der einerseits dafür sorgt, dass bei Mausklick der Wert der Eigenschaft _visible in sein Gegenteil verkehrt wird, und andererseits zwecks Auswertung des Klicks eine entsprechende Funktion aufruft. Allerdings müssen wir jetzt darauf achten, dass ein eventuell vorher aktiver Button wieder auf inaktiv geschaltet wird. Das geschieht mit Hilfe einer for in-Schleife, die innerhalb des Behälters für die Radio Buttons alle diejenigen Instanzen analysiert, die MovieClips darstellen und die nicht identisch sind mit dem gerade angeklickten Movie­Clip. Die in den gefundenen Objekten vorhandenen Instanzen namens punkt werden unsichtbar geschaltet.

29.3 Combo-Box Ein sehr beliebtes Interface-Element stellt die ComboBox dar. Denn Sie ermöglicht es, auf einem minimalen Raum ein Höchstmaß an Auswahlmöglichkeiten zur Verfügung zu stellen. Sie ist in nahezu jeder Applikation zu finden und wurde früher ausgesprochen gerne auf Webseiten eingesetzt, um die Navigation platzsparend unterzubringen. Ebenso findet man sie häufig in Formularen. Wir wollen uns zwei Varianten einer einfachen Combo-Box anschauen. Im ersten Beispiel wechseln jeweils das ausgewählte Element und das im Top-Bereich gewählte Element ihre Position. Das zweite Beispiel geht den gewohnten Weg, indem im Top-Bereich zusätzlich zu den Auswahlbuttons das aktivierte Element angezeigt wird.

20. Fügen Sie innerhalb des Funktionsblocks nach Ende der init()-Deklaration folgende Zeilen ein:  function auswertung() {

 for (var e in mCheck) {

 if (typeof (mCheck[e]) == „movieclip“) {

Abbildung 137:  Combo-Box des Workshops

29.3  Combo-Box

443

Beim Anzeigen der auswählbaren Elemente sind ebenfalls Varianten möglich: Entweder werden sie nach unten skaliert oder fahren in der Originalgröße von oben nach unten. Unsere Combo-Box wird in Abbildung  137 in nicht aktivem und in ausgefahrenem Zustand dargestellt.

16. Fügen Sie in actions folgendes Bildskript ein:

1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcButton. 3. Nennen Sie Ebene 1 um in bgd. 4. Zeichnen Sie im Koordinatenursprung ein orangenes Rechteck (90 × 24, Linienstärke 1, weiß). 5. Fügen Sie eine neue Ebene namens txt ein. 6. Erstellen Sie dort auf der Position 30, 4 ein dynamisches Textfeld (Instanzname info, Verdana, 10, 0 × 333333, Fett, zentriert, einzeilig, nicht auswählbar). Die Breite ist beliebig, da wir sie später per AS anpassen werden. 7. Weisen Sie dem MovieClip eine gleichnamige Verknüpfung zu. 8. Erstellen Sie einen neuen leeren MovieClip namens mcPfeil. 9. Nennen Sie Ebene 1 um in bgd. 10. Zeichnen Sie im Koordinatenursprung ein orangenes Rechteck (24 × 24, Linienstärke 1, weiß). 11. Fügen Sie eine neue Ebene ein namens pfeil. 12. Zeichnen Sie dort auf der Position 12, 13 eine nach unten weisende Pfeilspitze (10 × 10, 0 × 333333, Linienstärke 2). 13. Wandeln Sie den Pfeil in einen MovieClip beliebigen Namens um (Instanzname spitze). 14. Weisen Sie der so entstandenen Instanz einen Geschliffen-Filter zu, so dass ein leichter 3D-Eindruck entsteht.

 var mAuswahl:MovieClip = this.create EmptyMovieClip(„auswahlfeld“, 1);

Wir benötigen drei Elemente, um unsere Box aufzubauen:

• Eine Fläche, die wir als Auswahlbutton verwenden

wollen. • Ein Rechteck, in dem ein Pfeil angezeigt werden soll. Wir werden dieses Rechteck verwenden, um das Auswahlmenü zu öffnen bzw. zu schließen. • Eine Pfeilspitze, die wir per Skript entweder nach oben oder nach zeigen lassen, so dass der Anwender erkennen kann, ob ein Klick auf obiges Rechteck das Menü öffnet oder schließt. 15. Kehren Sie zur Hauptzeitleiste zurück.

 //------------- vars –-------------  var aAuswahl:Array = [„Nasling“, „Wolpertinger“, „Steinlaus“, „Loch Ness“, „Akademikon“];  var aBtns:Array = [];

 var mBtns:MovieClip, mPfeil:MovieClip, mTop:MovieClip;  var sText:String;

 var bAuf:Boolean = false;

In einem Array speichern wir die Bezeichnungen für die Buttons, die wir zur Auswahl anbieten. Beispielhaft verwenden wir die Namen von Tieren, die der Kryptozoologie zugeordnet werden. Das Array aBtns dient später dazu, die aktivierbaren Buttons aufzunehmen. Die Variable mAuswahl speichert eine Referenz auf den Behälter, in den alle Elemente des Menüs eingefügt werden. Die einzelnen Menüelemente referenzieren wir mit drei weiteren Variablen, deren konkreter Inhalt später in einer init()-Funktion deklariert wird. Um den Text des jeweils aktivierten Buttons zwischenspeichern zu können, legen wir eine entsprechende Variable an und schließlich wird eine Boolsche Variable mit dem Wert false initialisiert. Sie dient dazu, herauszufinden, in welche Richtung sich die Auswahlelemente bewegen sollen. 17. Fügen Sie folgenden Funktions-Block ein:  //------------ functions –---------  function init():Void {  mAuswahl._x = 50;

 mAuswahl._y = 225;

 mTop = mAuswahl. attachMovie(„mcButton“, „btn0“, aAuswahl.length+1);  mTop.info.autoSize = „center“;  mTop.info.text = aAuswahl[0];

 mPfeil = mAuswahl. attachMovie(„mcPfeil“, „pfeil“, aAuswahl.length);  mPfeil._x = mAuswahl._width;  mPfeil._y = 0;

 mPfeil.onPress = aufzu;

}

444

Kapitel 29  Interface und Navigation

In der Funktion init() legen wir die Ausgangsbedingungen fest. Dazu gehört die Positionierung des Menübehälters auf die willkürlich gewählten Werte 50 und 225. Hier wählen Sie selbstverständlich Positionen, die zum Aufbau Ihrer Site passen. Unsere Combo-Box wird dynamisch aus verschiedenen Elementen aufgebaut. Dazu gehört natürlich ein Top- oder Head-Bereich, in dem die aktuell getroffene Auswahl zu erkennen ist. Wir fügen dazu einfach eine Instanz unseres zuvor erstellten Buttons ein. Wichtig ist die Tiefe, die wir in Abhängigkeit von der Länge des Arrays aAuswahl wählen. Da dieser Button nachher alle anderen verdecken soll, müssen wir für seine Tiefe auch den höchsten Wert verwenden. In das in diesem MovieClip vorhandene Textfeld schreiben wir den ersten Text des Arrays aAuswahl, der zentriert angezeigt wird. Damit legen wir fest, dass das erste Element ausgewählt wurde. Unmittelbar rechts neben diesem Element fügen wir den Pfeil ein. Er erhält ein Klickereignis, das eine noch zu schreibende Funktion aufruft. 18. Fügen Sie am Ende des Skripts folgenden Aufruf ein:  //-------------- aufruf –----------  init();

Wenn Sie testen, begrüßt Sie der Nasling freundlich im Top-Bereich des Menüs, während daneben der Pfeil-Button zu sehen ist. Zwar kann man schon auf ihn klicken, da aber die dann aufgerufene Funktion noch nicht existiert, geschieht nichts.

Wie Sie sehen, sehen Sie nichts, wenn Sie erneut testen. Das ist auch nicht weiter überraschend, denn die Elemente, die Flash einfügt, liegen alle auf derselben Position hinter dem Top-Element. Mit der Schleife fügen wir alle benötigten Buttons ein. Anders als sonst üblich beginnt die Schleife diesmal mit einer 1, nicht 0. Denn das erste Element haben wir bereits als Top-Element eingefügt. Wir müssen daher nur noch den zweiten bis zum letzten Button anlegen. Alle Elemente werden horizontal und vertikal auf 0 gesetzt, so dass Flash sie direkt hinter dem obersten Button platziert. Wie beim obersten Element zentrieren wir die Textausrichtung und weisen die in aAuswahl enthaltenen Texte abhängig vom aktuellen Wert der Zählvariablen i zu. Jeder Button erhält ein onPress-Ereignis und wird in ein Array gespeichert. Wenn Sie aufgrund Ihres gesunden Misstrauens lieber testen wollen, ob tatsächlich alle Buttons angelegt werden, obwohl wir sie nicht erkennen können, dann weisen Sie ihnen jeweils eine leicht verschobene y-Position zu, z. B.: mBtns._y = i * 20;

Beim Testen quetschen sich alle Buttons unter dem oberen Element neugierig hervor in den Vordergrund. Vergessen Sie nicht, für das weitere Vorgehen wieder allen als y-Position eine 0 zuzuweisen. 20. Erweitern Sie den Funktions-Block um folgende Deklaration:  function aufzu():Void {

19. Fügen Sie innerhalb der init()-Funktion unmittelbar nach der Zuweisung des onPress-Ereignisses folgende Schleife ein:

 bAuf = !bAuf;

 for (var i:Number = 1; i


 mBtns = mAuswahl. attachMovie(„mcButton“, „btn“+i, i);  mBtns._x = 0;  mBtns._y = 0;  mBtns.i = i;

 mBtns.info.autoSize = „center“;  mBtns.info.text = aAuswahl[i];  mBtns.onPress = auswahl;  aBtns.push(mBtns);

}

 mPfeil.spitze._yscale *= –1;  bewegen(); }

Bei Klick auf den Pfeil wird die Funktion aufzu() aufgerufen. Sie sorgt dafür, dass sich die Richtung des Pfeils jedes mal ändert, um anzuzeigen, in welche Richtung die Menübewegung erfolgt, wenn wir erneut auf den Pfeil klicken. Das Umdrehen erreichen wir einfach durch eine Umkehr des Vorzeichens der Eigenschaft _yscale. Ist der Wert positiv, was anfangs zutrifft, dann weist der Pfeil nach unten. Nach einem Klick kehren wir ihn um, so dass er nach oben zeigt. Bei einem erneuten Klick zeigt er wieder nach unten etc. Prinzipiell dasselbe geschieht mit der Bool’schen Variablen bAuf, die wir bei jedem Klick ins Gegenteil verkehren. Wir initialisieren sie mit dem Wert false,

29.3  Combo-Box

d. h., das Menü ist nicht geöffnet. Klicken wir, muss das Menü ausfahren und wir speichern den Wert true. Bei einem weiteren Klick wird die Variable wieder false etc. Eine alternative Lösung für die Bewegung von Objekten zwischen zwei fest definierten Werten finden Sie weiter unten im Abschnitt Akkordeon-Menü, bei dem wir auf eine Boolsche Variable verzichten. Abschließend ruft der Klick die eigentliche Bewegungsfunktion auf, die wir im nächsten Schritt definieren werden. 21. Erweitern Sie den Funktions-Block um folgende Deklaration:  function bewegen():Void {

 for (var i:Number = 0; i
 mBtns.ziel = (Number(bAuf)*mBtns.i)*mBtns._ height;

 mBtns.onEnterFrame = function() {  var nEntfY = this.zielthis._y;

445

Wert false, dann beträgt die Zielposition 0, d. h. die ursprüngliche Position beim Erstellen des Menüs. Diese Zahl erhalten wir einfach, indem wir aus dem Bool’schen Wert false per temporärer Typumwandlung eine Zahl generieren. Dabei ergibt sich immer 0. Ein beliebiger Wert oder Ausdruck mit 0 multipliziert ergibt ebenfalls 0, also genau das, was wir an dieser Stelle benötigen. Wenn bAuf dagegen auf true gesetzt wurde, erhalten wir durch eine temporäre Typ­ umwandlung 1, so dass jedem Button ein Ziel zugewiesen wird, das einem Vielfachen der Buttonhöhe, abhängig von der Reihenfolge, in der die Buttons eingefügt wurden, entspricht. Lediglich beim ersten Button stimmen das Ziel in diesem und im vorhergehenden Fall überein, nämlich 0. Das macht auch Sinn, schließlich soll sich dieser Button überhaupt nicht bewegen, denn er dient als Top-Element. Alle anderen speichern einen Wert größer 0, so dass tatsächlich eine Bewegung erfolgen kann. Dazu verwenden wir ein onEnterFrame-Ereignis, das wir jedem Button zuweisen. Die Berechnung der Bewegung folgt natürlich wieder unserem altbekannten Schema:

• Berechnung der Entfernung zum Ziel. • Ist diese größer einem bestimmten Grenzwert, wird

 delete this.onEnterFrame;

ein Bruchteil der Entfernung zur aktuellen vertikalen Position addiert. • Andernfalls befindet sich der betreffende Button bereits sehr nahe am Zielpunkt, so dass er einfach exakt darauf gesetzt und sein onEnterFrame-Ereignis gelöscht wird.

};

Nun fehlt noch die Möglichkeit, innerhalb des Menüs eine Auswahl zu treffen.

 if (Math.abs(nEntfY)>0.5) {  this._y += nEntfY/2; } else {

 this._y = this.ziel; } }

}

Wenn Sie testen, können Sie das Menü durch Klick auf den Pfeil-Button abwechselnd öffnen und schließen. Diese Funktion bewegt alle Elemente innerhalb von aBtns, auf die mit einer Schleife zugegriffen wird. Der Einfachheit halber referenzieren wir die einzelnen MovieClips mit Hilfe der Variablen mBtns. Jeder Button verfügt über eine eigene Variable ziel, in der die Position gespeichert wird, zu der er sich bewegen soll. Worum es sich konkret handelt, ermitteln wir mit Hilfe der Bool’schen Variable bAuf. Besitzt sie den

22. Erweitern Sie den Funktions-Block:  function auswahl():Void {

 sText = this.info.text;

 this.info.text = mTop.info.text;  mTop.info.text = sText;  bAuf = false;

 mPfeil.spitze._yscale = 100;  bewegen();

}

Bei einem erneuten Test sind Sie in der Lage, aus dem Menü einen Punkt auszuwählen. Danach klappt das Menü automatisch wieder zu.

446

Kapitel 29  Interface und Navigation

Ein Klick auf die Auswahlbuttons ruft folgende Reaktionen hervor:

• Das Top-Element tauscht seinen Text mit dem ak-

tivierten Button. Dazu speichern wir zunächst in einer Zwischenvariable den Text des angeklickten Buttons. Anschließend weisen wir ihm den Text des Top-Elements zu, das den zuvor gespeicherten Text erhält. • Da wir das Menü nun schließen müssen, wird –– bAuf auf false gesetzt, –– die Pfeilspitze nach unten gedreht, –– die Bewegungsfunktion aufgerufen. Wenn Sie etwas präziser testen, wird Ihnen sicher eine Ungenauigkeit (Fehler klingt an dieser Stelle einfach zu brutal) auffallen: Bei eingeklapptem Menü sind wir in der Lage, einen nicht sichtbaren Button durch Klick auf das Top-Element zu aktivieren. Ereignisse sind in Flash auch dann aktiv, wenn das betroffene Objekt durch ein anderes verdeckt wird. Unsere Buttons verfügen über ein onPress-Ereignis, dass sich jederzeit durch eine entsprechende User-Aktion auslösen lässt. Und genau das geschieht, wenn wir auf das Top-Element, hinter dem sich ja die übrigen Button verstecken, klicken. Wir haben mehrere Möglichkeiten, dieses unerwünschte Verhalten zu unterbinden. So könnten wir bei einem Klick abfragen, ob sich die Maus über dem Top-Element befindet oder nicht. Wir wählen hier jedoch einen alternativen Weg. 23. Erweitern Sie die init()-Funktion unmittelbar nach der Zeile, in der dem Top-Element ein Text zugewiesen wird:  mTop.onPress = function() {

Zum Schluss bleibt natürlich noch das Ausführen von irgendwelchen Aktionen, wenn wir einen Menüpunkt aktiviert haben – andernfalls wäre unsere Combo-Box überflüssig. Wir verwenden hier eine Dummy-Funktion, die Sie natürlich durch Ihre eigene Funktion ersetzen sollten. 24. Fügen Sie innerhalb der init()-Funktion unmittelbar vor der Zuweisung des onPress-Ereignisses an das Top-Element ein:  tuwas(aAuswahl[0]);

25. Erweitern Sie die Deklaration von auswahl() unmittelbar vor der schließenden Klammer:  tuwas(mTop.info.text);

26. Erweitern Sie den Funktions-Block:  function tuwas(pString:String):Void {  trace(„Sie haben gewählt: „+pString);  }

Beim Testen wird jedes Mal dann, wenn wir eine Auswahl getroffen haben, ein Text im Nachrichtenfenster ausgegeben. Wir rufen die Dummy-Funktion tuwas() einmal innerhalb der init()-Funktion auf, denn dort wird ja im Top-Element bereits ein aktives Element dargestellt, also eine Vorauswahl getroffen. Außerdem wird die Funktion bei jedem Klick auf einen Button aufgerufen. Hinter tuwas() versteckt sich ein simpler trace()-Befehl, der den als Argument übergebenen Text anzeigt.

};

 mTop.useHandCursor = false;

Jetzt bleibt ein Klick auf das Top-Element ohne Auswirkungen, selbst, wenn das Menü eingeklappt ist. Der Übeltäter erhält wie die übrigen Buttons ein onPress-Ereignis, dem wir jedoch eine leere Funktion zuordnen. Dadurch können wir zwar ein onPress-Ereignis auslösen, aber es bleibt folgenlos, da keine Befehle vorhanden sind, die Flash ausführen könnte. Danach ist das Ereignis „verbraucht“, d. h., Flash reicht es nicht an die übrigen Buttons weiter. Damit der Anwender nicht irrtümlich annimmt, das Top-Element sei aktivierbar, schalten wir den von Flash automatisch zugewiesenen Cursor aus.

29.4 Code Zur Kontrolle der gesamte Code: //----–––----- vars –-----------------var aAuswahl:Array = [„Nasling“, „Wolpertinger“, „Steinlaus“, „Loch Ness“, „Akademikon“]; var aBtns:Array = [];

var mAuswahl:MovieClip = this.create­ EmptyMovieClip(„auswahlfeld“, 1);

var mBtns:MovieClip, mPfeil:MovieClip, mTop:MovieClip;

29.5  Variante

447

var sText:String;

 mTop.info.text = sText;

//-------------- functions –-----------

 mPfeil.spitze._yscale = 100;

var bAuf:Boolean = false; function init():Void {  mAuswahl._x = 50;

 mAuswahl._y = 225;

 mTop = mAuswahl. attachMovie(„mcButton“, „btn0“, aAuswahl.length+1);  mTop.info.autoSize = „center“;  mTop.info.text = aAuswahl[0];

 bAuf = false;  bewegen();

 tuwas(mTop.info.text); }

function bewegen():Void {

 for (var i:Number = 0; i
 mTop.onPress = function() {

 mBtns.ziel = (Number(bAuf)*mBtns.i)*mBtns._ height;

 mTop.useHandCursor = false;

 var nEntfY = this.ziel-this._y;

 tuwas(aAuswahl[0]); };

 mBtns.onEnterFrame = function() {

 mPfeil = mAuswahl. attachMovie(„mcPfeil“, „pfeil“, aAuswahl.length);

 if (Math.abs(nEntfY)>0.5) {

 mPfeil._x = mAuswahl._width;  mPfeil._y = 0;

 mPfeil.onPress = aufzu;

 for (var i:Number = 1; i
 mBtns = mAuswahl. attachMovie(„mcButton“, „btn“+i, i);  mBtns._x = 0;  mBtns._y = 0;  mBtns.i = i;

 mBtns.info.autoSize = „center“;  mBtns.info.text = aAuswahl[i];

 this._y += nEntfY/2; } else {

 this._y = this.ziel;

 delete this.onEnterFrame; } }; } }

function tuwas(pString:String):Void {

 trace(„Sie haben gewählt: „+pString); }

//----------–––- aufruf –-------------init();

 mBtns.onPress = auswahl;  aBtns.push(mBtns);

29.5 Variante

}

Diese Version einer Combo-Box lässt sich sinnvoll einsetzen, wenn über die Buttons verschiedene Infoseiten aufgerufen werden sollen. Dann würden wir automatisch, ohne das der Anwender etwas tun muss, bereits die erste Seite anzeigen. Sie wäre jedoch dann eine schlechte Lösung, wenn die Combo-Box beispielsweise in einem Shop Zugriff auf verschiedene kostenpflichtige Artikel bietet. Daher schauen wir uns eine alternative ComboBox an, deren Top-Element anfangs leer ist oder einen

}

function aufzu():Void {  bAuf = !bAuf;

 mPfeil.spitze._yscale *= –1;  bewegen(); }

function auswahl():Void {

 sText = this.info.text;

 this.info.text = mTop.info.text;

448

Kapitel 29  Interface und Navigation

Hinweis darauf enthält, was der Anwender tun soll. Aus dem bestehenden Code lässt sich diese Version schnell mit geringfügigen Änderungen erstellen. 27. Löschen Sie im Variablen-Block die Deklaration von sText. 28. Löschen Sie in der Funktion auswahl() folgende Zeilen:

sText = this.info.text; mTop.info.text = sText;

29. Ändern Sie in der Funktion auswahl() die Zuweisung von mTop.info.text (Fettdruck):

mTop.info.text = this.info.text;

Wir müssen keinen Text mehr zwischenspeichern, denn alle Auswahlbuttons behalten ihre Beschriftung permanent bei, selbst dann, wenn wir sie aktivieren. Daher können wir sowohl die Deklaration von sString löschen wie auch die Textoperationen in der genannten Funktion. Damit dennoch im Top-Element der ausgewählte Begriff angezeigt wird, weisen wir den Text des angeklickten Elements direkt zu. 30. Löschen Sie in der init()-Funktion den Aufruf von tuwas(). Am Anfang wollen wir kein Element automatisch aktivieren. Daher dürfen wir in init() nicht mehr die Funktion tuwas() oder das von Ihnen verwendete Pendant aufrufen. 31. Ändern Sie in der init()-Funktion die Textzuweisung für das Top-Element (Fettdruck):

mTop.info.text = „Auswahl“;

Anders als zuvor kann das Top-Element kein ausgewähltes Element anzeigen, da wir ja keine Auswahl vorgeben. Daher empfiehlt es sich, dem Anwender einen textlichen Hinweis darauf zu geben, was sich denn hinter dem Top-Element verbirgt. Natürlich können Sie gerne einen eindeutigeren und weniger mundfaulen Hinweis wie z. B. „Wählen Sie ein Tier.“ verwenden. Achten Sie dann darauf, dass die Breite des Buttons dafür ausreicht und passen Sie diese gegebenenfalls an. 32. Ändern Sie in der init()-Funktion den Schleifenkopf (Fettdruck):  for (var i:Number = 0; i
Im vorhergehenden Beispiel bildete das Top-Element zugleich das erste auswählbare Element. Daher mussten wir dort die Schleife mit 1 starten. Hier dagegen werden alle Auswahlbuttons unter bzw. hinter dem Top-Element eingefügt, so dass die Schleife mit 0 beginnt, um entsprechend der Länge von aAuswahl alle benötigten Buttons einfügen zu können. 33. Ändern Sie innerhalb dieser Schleife das Speichern der Zählvariable i (Fettdruck):  mBtns.i = i+1;

Beim Testen verfügt Ihr Auswahlmenü über einen Button mehr, den Sie sehen, sobald Sie auf den Pfeil klicken. Außerdem wird im Top-Element ein Hinweis zum Menü eingeblendet, der sich dann ändert, wenn Sie eine Auswahl treffen. Ansonsten entspricht die Funktionalität demjenigen der vorhergehenden Version. Wir müssen entweder an dieser Stelle oder in der Bewegungsfunktion dafür sorgen, dass der erste Button, wenn er ausfährt, unmittelbar unter dem Top-Element angeordnet wird. Wenn wir die Bewegungsfunktion unverändert übernehmen und hier den korrekten i-Wert, nämlich 0, verwenden, dann findet für diesen Button kein Ausklappen statt. Denn sein vertikales Ziel wird, unabhängig von der konkreten Bewegungsrichtung, immer 0 sein. Daher erhöhen wir an dieser Stelle rücksichtslos den i-Wert um 1. Skrupulöse Naturen können statt dessen den originalen i-Wert beibehalten und in bewegung() bei der Berechnung des Ziels mBtns.i um eins erhöhen. Wir verzichten hier auf eine erneute Auflistung des gesamten Codes, da die Änderungen eindeutig sein dürften.

29.6 Slider In allen möglichen Formen und mit verschiedenen Funktionalitäten warten Slider auf. Dabei handelt es sich normalerweise um Schiebe- oder Drehregler, mit deren Hilfe stufenlos Werte innerhalb eines fest definierten Bereichs festgelegt werden. So finden sie beispielsweise Verwendung, um die Lautstärke zu regulieren, innerhalb einer Zeitleiste Informationen abzurufen oder um Objekte gezielt pro Farbkanal einzufärben. Da es einen eigenen Workshop gibt, der

29.7  Drag and Drop-Elemente

mit Hilfe eines Sliders Bildmanipulationen vornimmt, wollen wir das Thema hier nicht erneut aufgreifen.

29.7 Drag and Drop-Elemente Häufig ist es notwendig, Elemente einander zuzuordnen. Dabei kann das Ziel des Ziehens darin bestehen, eine Aktion mit dem betreffenden Element auszulösen (z. B. eine Datei wird auf das Papierkorbsymbol gezogen), oder eine Zusammengehörigkeit von Elementen zu visualisieren (der Text „Auto“ wird auf die Grafik eines Fahrzeugs gezogen). Letzteres stellt ein zentrales Element von Lernanwendungen dar. Allgemein stecken hinter dem Drag and Drop zwei Vorgänge:

• Ziehen/Loslassen. • Definieren einer Zugehörigkeit. Die Handlung des Ziehens lässt sich in Flash wunderbar einfach lösen, schließlich bietet das Programm mit startDrag() und stopDrag() zwei Methoden an, die alles Notwendige bieten. In manchen Fällen ist es allerdings notwendig, eine eigene Routine zu schreiben, da diese vorgefertigten Methoden notwendigerweise nicht jede gewünschte Funktionalität bieten können. Das gilt für jene Applikationen, bei denen das Ziehen in Echtzeit, also noch vor dem Loslassen der Maus, Auswirkungen haben soll, die nicht nur die Position des gezogenen Objektes betreffen. Die logische Zugehörigkeit von zwei beliebigen Elementen kann zwar nicht mit einer fertigen Methode realisiert werden, stellt aber auch kein Problem dar. Wir können Sie nämlich prinzipiell über eine Namenskonvention, über Variablen oder, falls eine größere Informationsmenge abgebildet werden muss, mit Hilfe von mehrdimensionalen und von TandemArrays definieren:

449

• Tandem-Array: Anstelle eines mehrdimensionalen

Arrays werden zwei getrennte Arrays verwendet. Eines enthält jeweils die zu ziehenden Objekte, ein zweites die Ziele, wobei eine Zugehörigkeit über die betreffenden Indexpositionen hergestellt wird. Gleiche Indexwerte bedeuten Zugehörigkeit. • Namenskonvention: Die Instanznamen der zueinander gehörenden Objekte verfügen über eine partiell gleiche, eindeutige Zeichenfolge, so dass wir sie identifizieren können. Beim Loslassen der Maustaste wird jeweils mittels der hitTest()-Methode kontrolliert, ob eine Kollision mit dem gespeicherten oder ermittelten Ziel-Objekt stattfand. Falls ja, gilt der Zieh-Vorgang als korrekt durchgeführt, andernfalls nicht. Während die Varianten mit dem Speichern der Informationen selbstredend sein dürften, wollen wir uns hier beispielhaft die letztgenannte Lösung anschauen. 1. Erstellen Sie ein Standarddatei. 2. Erstellen Sie drei MovieClips, jeweils bestehend aus einer Grafik – ein simples Rechteck genügt – und einem auf einer neuen Ebene eingefügten Textfeld mit den Texten „Mann“, „Frau“ und „Paar“. Die Clips sollen nicht in der Hauptzeitleiste zu sehen sein, da wir sie per AS einfügen wollen. 3. Weisen Sie den Clips die Bibliotheksnamen mcMann, mcFrau und mcPaar mit gleichlautenden Verknüpfungsbezeichnern zu. 4. Erstellen Sie drei weitere MovieClips, bestehend aus Grafiken, die man mit mehr oder minder ausgeprägter Vorstellungskraft als Visualisierung der erwähnten Texte „Mann“, „Frau“ und „Paar“ betrachten könnte. Auch diese Clips sollen nicht in der Hauptzeitleiste zu sehen sein. 5. Weisen Sie ihnen die Bibliotheksnamen mcMannZiel, mcFrauZiel und mcPaarZiel mit gleichlautenden Verknüpfungsbezeichnern zu.

• Variablen: Dem zu ziehenden Element wird eine

Variable zugewiesen, in der wir das korrekte Ziel – i. d. R. eine MovieClip-Instanz – speichern. • Mehrdimensionales Array: Ein Array erfasst alle zu ziehenden Objekte und ihre Ziele. Um eine korrekte Zuordnung zu ermöglichen, besteht jedes Element dieses Arrays aus einem weiteren Array, in dem ein Objekt und ein zugehöriges Ziel festgehalten werden.

Abbildung  138:  Bibliotheks-Elemente der Drag and DropÜbung

450

6. Ihre Bibliothek müsste jetzt die in Abbildung 138 enthaltenen Elemente aufweisen, die hier zu Zwecken der Veranschaulichung händisch auf der Bühne eingefügt wurden. 7. Kehren Sie zur Hauptzeitleiste zurück. 8. Fügen Sie in actions folgendes Bildskript ein:  //----------––- vars –--------------  var mObjekt:MovieClip, mBehaelter:MovieClip;  var nTiefe:Number = 0;

 var nAbstandY:Number = 5;

 var sSuffix:String = „Ziel“;

 var sPraefixAttach:String = „mc“;  var aPosBeh:Array = [50, 50];

 var aZiehObjekte:Array = [„Mann“, „Frau“, „Paar“];

//----------- functions –-----------  function init() {

 var sMinuskel:String;

 mBehaelter = this.createEmptyMovie­ Clip(„behObjekte“, this.getNextHighestDepth());  mBehaelter._x = aPosBeh[0];  mBehaelter._y = aPosBeh[1];

 for (var i:Number = 0; i
 sMinuskel = (aZiehObjekte[i]. substr(0, 1)). toLowerCase()+aZiehObjekte[i]. substr(1);

 mObjekt = mBehaelter.attachMovie (sPraefixAttach+aZiehObjekte[i], sMinuskel, nTiefe++);  mObjekt._y = i*(mObjekt._ height+nAbstandY);

 mObjekt.onPress = mObjekt.startDrag;

 mObjekt.onRelease = mObjekt.onReleaseOutside = kontrolle; } }

 //-----------– start –--------------  init();

Wenn Sie testen, tauchen links oben drei Objekte auf, die sich ziehen lassen. Es handelt sich dabei um die händisch erstellten Textfelder.

Kapitel 29  Interface und Navigation

Wir definieren zwei Variablen zur Referenzierung von MovieClips, legen die Start-Tiefe des ersten einzufügenden Objekts mit 0 fest, speichern einen willkürlichen kleinen Abstand für die vertikale Positionierung der Text-Elemente und merken uns Zeichenfolgen, die benötigt werden, um den Verknüpfungsnamen sowie den Instanznamen der Ziele korrekt zu ermitteln. Der Hinweis auf das Präfix „mc“ wäre eigentlich unnötig, da wir i. d. R. mit genau diesem Kürzel arbeiten, aber so sind Sie für den Fall flexibler, dass Sie mit anderen Namenskonventionen arbeiten. Das gleiche gilt für „Ziel“, an dessen Stelle Sie beispielsweise eine durchgehende Nummerierung verwenden können (dann muss der Code allerdings leicht abgewandelt werden). Schließlich halten wir eine willkürliche Position für den übergeordneten MovieClip fest, wobei man gerne auch nach dem Einfügen aller Elemente eine in Bezug zur Bühne zentrierte Position errechnen kann, wie wir es in anderen Übungen getan haben. In dem letzten Array speichern wir eine kennzeichnende Zeichenfolge, aus der sich alle benötigten Namen – Instanznamen der ziehbaren Objekte sowie der Zielobjekte und Verknüpfungsnamen aller MCs – ermitteln lassen. Die Funktion init() bereitet wie gewohnt die Bühne vor. Dazu gehört das Erstellen eines Behälters, um alle benötigten Elemente aufzunehmen. Er wird auf die durch das Array aPosBeh vorgegebenen Position gesetzt. Innerhalb des Behälters fügen wir so viele Objekte ein, wie sich durch die Gesamtlänge des Arrays aZiehObjekte ergeben, also in unserem Beispiel bescheidene drei Stück. Um welches Objekt es sich dabei jeweils konkret handelt, müssen wir ermitteln. Dazu verwenden wir die Hilfsvariable sMinuskel sowie die Variable sPraefixAttach. Betrachten wir den Ablauf genauer hinsichtlich des ersten einzublendenden Objekts. Im Array aZiehObjekte haben wir die Zeichenfolge „Mann“ erfasst, während der Verknüpfungsname des einzublendenden Objekts „mcMann“ lautet. Diesen Verknüpfungsnamen erhalten wir durch eine Konkatenation des in sPraefixAttach vorliegenden Strings „mc“ und der ersten Indexposition in aZiehObjekte. Aus „Mann“ wird so „mcMann“. Instanznamen beginnen laut der von uns gewählten Konvention immer mit einem Kleinbuchstaben. Daher muss das erste Zeichen des Strings in aZiehObjekte umgewandelt werden, um aus „M“ ein „m“ zu machen. Das geschieht mit Hilfe der Methode toLowerCase(). An den umgewandel-

29.7  Drag and Drop-Elemente

ten Buchstaben müssen wir dann nur noch alle dem ersten Buchstaben folgenden Zeichen, konkret: „ann“ anhängen. Das Ergebnis speichern wir der Übersichtlichkeit halber in der Hilfsvariablen sMinuskel. Alternativ kann man diese Berechnung auch direkt innerhalb der Argumente der attachMovie()-Methode durchführen, was aber die Lesbarkeit aufgrund des resultierenden Bandwurms erschweren würde. Während die horizontale Position nicht explizit definiert wird (infolge dieser „Schlamperei“ verwendet Flash automatisch 0), definieren wir für die vertikale Position ein Vielfaches der Objekthöhe zuzüglich einem kleinen Abstandswert. Das eingefügte Objekt erhält ein onPress-Ereignis, das einem simplen Ziehverhalten entspricht, sowie ein onRelease-Ereignis, in dem die noch zu definierende Kontroll-Funktion aufgerufen wird. Am Ende starten wir init(). Unsere Anwendung gewinnt in funktionaler Hinsicht an Attraktivität, wenn wir weitere Objekte einfügen. 9. Erweitern Sie den Variablen-Block: var nAbstandX:Number = 80;

10. Erweitern Sie die init()-Funktion unmittelbar nach dem Ende der for-Schleife:  var nBreite:Number = mBehaelter._ width;

 for (i=0; i
 sMinuskel = (aZiehObjekte[i]. substr(0, 1)). toLowerCase()+aZiehObjekte[i]. substr(1);  mObjekt = mBehaelter.attachMov ie(sPraefixAttach+aZiehObjekte [i]+sSuffix, sMinuskel+sSuffix, nTiefe++);

 mObjekt._x = nBreite+nAbstandX;  mObjekt._y = i*(mObjekt._ height+2*nAbstandY); }

Nun blendet Flash rechts neben den ziehbaren Elemente die zugehörigen Ziele ein. Das Einblenden erfolgt analog zur vorherigen Vorgehensweise. Lediglich die Verknüpfungs- und Instanznamen werden um das Suffix „Ziel“ erweitert. Wir erhalten nach beiden Schleifen daher folgende Instanznamen:

451

• mann • frau • paar • mannZiel • frauZiel • paarZiel Die horizontale Position berücksichtigt die Breite der vorher eingefügten Objekte, indem die Gesamtbreite des Behälters vor Einfügen eines Zielobjekts gespeichert wird. Danach können wir auf diesen Wert zugreifen und einen beliebigen, in nAbstandX initialisierten Wert hinzu addieren, um eine x-Position zu errechnen. Ein beliebter Denkfehler an dieser Stelle ist es, mBehaelter._width direkt innerhalb der Schleife zu verwenden, was uns scheinbar das Einrichten von nBreite erspart. Tatsächlich ändert sich jedoch mBehaelter._width nach dem Einfügen eines weiteren Objekts, so dass unsere Ziele immer weiter nach rechts verschoben werden. Wenn Sie ein ziehbares Objekt auf ein Ziel ziehen, liegt es nicht darüber, wie man erwarten würde, sondern darunter. Ursache ist die Reihenfolge, in der wir die Objekte eingefügt haben. Da die Ziele zuletzt angesprochen werden, liegen sie auf einer höheren Tiefe als die ziehbaren Objekte. Das lässt sich auf verschiedene Arten korrigieren, von denen wir uns hier nur eine anschauen wollen. 11. Erweitern Sie den Variablen-Block:  var nTiefeNegativ:Number = 100;

12. Ändern Sie in der init()-Funktion innerhalb der zweiten Schleife den Aufruf der attachMovie()Methode (Fettdruck):  mObjekt = mBehaelter.attachMovie(s PraefixAttach+aZiehObjekte[i]+sSuffi x, sMinuskel+sSuffix, nTiefe++ -nTiefeNegativ);

Mit einem simplen Trick sorgen wir dafür, dass die nach den ziehbaren Clips eingeblendeten Ziele auf einer niedrigeren Tiefe liegen. Dazu wird eine Variable mit einem größeren Wert initialisiert, hier beispielhaft mit 100. Formal gesehen müsste man diesen Wert an die Länge des Arrays aZiehObjekte binden, um ein versehentliches Überschreiben bereits eingefügter Elemente zu verhindern. Aber der von uns gewählte Wert ist auch so bereits groß genug, zumal es eher unwahrscheinlich ist, dass man es auf einem Screen einmal mit 100 ziehbaren Elementen zu tun haben wird.

452

Kapitel 29  Interface und Navigation

Der genannte Wert wird dann beim Einfügen der Ziele von der zugewiesenen Tiefe subtrahiert, so dass sie unterhalb der vorherigen Objekte angeordnet werden. 13. Erweitern Sie den Funktions-Block um folgende Deklaration:  function kontrolle() {  this.stopDrag();

 var sZiel:String = this._ name+sSuffix;  if (this.hitTest(this._ parent[sZiel])) {

 var nZufall:Number;

 for(i = 0; i < nLaenge; i++){

n Zufall = Math.floor(Math. random()*aZiehObjekte.length);

 aZiehObjekte2. push(aZiehObjekte[nZufall]);

 aZiehObjekte.splice(nZufall,1);

}

 trace(„aZiehObjekte2: „+aZiehObjekte2);

 trace(„Richtig!“);

Wenn Sie mehrfach testen, erhalten Sie eine zufällige Verteilung der gespeicherten Zeichenfolgen „Mann“, „Frau“ und „Paar“.



16. Ändern Sie in init() die letzte Schleife, mit der wir die Ziel-Objekte einblenden (Fettdruck):

} }

Werden die Objekte auf ein Ziel gezogen und losgelassen, erfolgt nun eine Kontrolle, ob sie sich an der richtigen Stelle befinden. Die Funktion kontrolle() stoppt das Zieh-Verhalten und ermittelt den Instanznamen des zugehörigen Ziels durch eine Konkatenation zweier Strings. Dabei handelt es sich um den Instanznamen des aktuellen Objekts zuzüglich des Suffix’ „Ziel“. Die hitTest()-Methode kontrolliert, ob eine Kollision stattfindet zwischen dem gezogenen Objekt und einem Objekt, das den eben ermittelten Instanznamen trägt. Dementsprechend gelten beispielsweise mann und mannZiel als zusammengehörig. Anders als in unserem Beispiel rufen Sie innerhalb der if-Bedingung natürlich kein trace()-Befehl auf sondern die gewünschte Funktion. Für ein Lernprogramm zugegebenermaßen nicht übermäßig spannend und von geringem Wiederholwert ist die Tatsache, dass den zu ziehenden Elementen das Ziel jeweils direkt gegenüberliegt. Wir benötigen daher eine zufällige Reihenfolge der Ziel-Objekte, die auf verschiedene Arten hergestellt werden kann. Wir wählen eine einfache, wenn auch zugegebenermaßen formal nicht optimale Variante. 14. Erweitern Sie den Variablen-Block nach der Initialisierung von aZiehObjekte um:  var aZiehObjekte2:Array = [];

15. Fügen Sie in init() unmittelbar nach der ersten Schleife ein:  var nLaenge:Number = aZiehObjekte. length;

 var nBreite:Number = mBehaelter._ width;

 for (i=0; i
 sMinuskel = (aZiehObjekte2[i]. substr(0, 1)). toLowerCase()+aZiehObjekte2[i]. substr(1);

 mObjekt = mBehaelter.attachMovie (sPraefixAttach+aZiehObjekte2[i]+ sSuffix, sMinuskel+sSuffix, nTiefe++-nTiefeNegativ);  mObjekt._x = nBreite+nAbstandX;  mObjekt._y = i*(mObjekt._ height+2*nAbstandY);

 mObjekt.filters = [fDrop]; }

Sie erhalten nun eine zufällige Verteilung der ZielObjekte. Aufgrund der geringen Anzahl müssen Sie gegebenenfalls mehrfach testen, bevor sich das gewünschte Ergebnis einstellt. Wir erstellen ein zweites Array, in das wir zufallsbedingt solange aus dem ersten Array Elemente einfügen, bis dieses leer ist. Nehmen wir an, es wird beim ersten Durchlauf der Schleife die Zahl 1 ermittelt (möglich sind: 0, 1 und 2, da der Wertebereich an die Gesamtlänge des Arrays aZiehObjekte gebunden ist). Dann kopieren wir das zweite Element in aZieh­ Objekte bzw. den String „Frau“ an die erste Stelle des neuen Arrays aZiehObjekte2. Um nicht noch mal dasselbe Element zu erhalten, wird es in aZieh­

29.8  Code

Objekte gelöscht. Das ist einfach, aber destruktiv, da

wir das betreffende Array ändern. Sauberer, aber aufwendiger wäre es beispielsweise, die ermittelten Indexnummern zu speichern und solange fortzufahren, bis alle zulässigen Nummern aufgetreten sind. Beim zweiten Mal stehen aufgrund der Kürzung von aZiehObjekte nur noch die Werte 0 und 1 zur Verfügung. Erhalten wir jetzt 0, kopieren wir „Mann“ und löschen es gleichzeitig im ursprünglichen Array. Da anfangs aZiehObjekte drei Elemente enthielt, müssen wir diesen Prozess auch dreimal durchführen. Übrigens ein fataler logischer Fehler wäre es, die Gesamtlänge von aZiehObjekte vor der Schleife nicht zu speichern und statt dessen in der Schleife mit aZiehObjekte.length zu arbeiten. Durch das Löschen ändert sich die Länge und das resultierende Array aZiehObjekte2 würde i. d. R. weniger Elemente enthalten als das ursprüngliche Array aZiehObjekte. Nachdem die Objekte in zufälliger Reihenfolge vorliegen, müssen sie nur noch mit der bereits bestehenden Schleife eingeblendet werden, wobei wir allerdings auf das neue Array zugreifen. Alles andere kann bleiben wie bisher. Zum Schluss können wir die Ziel-Objekte noch mit einem einfachen Filter-Effekt versehen (dieser Schritt ist optional). 17. Fügen Sie vor dem Variablen-Block ein:  //------------- import –-----------

import flash.filters.*; 

18. Erweitern Sie den Variablen-Block:

var fDrop:DropShadowFilter;

19. Fügen Sie in init() unmittelbar nach der öffnenden Klammer ein:  fDrop = new DropShadowFilter(3, 45, 0 × 666666, 50, 5, 5, 1, 3);

20. Fügen Sie in init() unmittelbar vor der schließenden Klammer in der letzten Schleife, mit der die Ziel-Objekte eingeblendet werden, ein:

mObjekt.filters = [fDrop]; 

Die Ziel-Objekte werden mit einem leichten Schlagschatten versehen. Wir importieren die benötigte Filter-Klasse, richten eine Variable zur Referenzierung ein und definieren einen neuen Schlagschatten im Abstand von 3 Pixeln, Drehung 45  Grad, Farbe leichtes Grau, Deckkraft

453

50 %, Weichzeichnung in horizontaler und vertikaler Richtung von 5 Pixeln, Stärke 1 und Qualität 3. Damit er wirksam wird, weisen wir ihn der filters-Eigenschaft der Ziel-Objekte zu. Auf den ersten Blick mögen die Varianten mit dem Speichern der korrekten Ziele in jedem Fall einfacher zu sein als das Ermitteln eines Namens. Gerade in vorliegendem Fall gilt dies jedoch nicht, denn hier ist es zwecks korrekter Positionierung der Elemente notwendig, zuerst die zu ziehenden Objekte einzufügen. Ihnen können aber nur dann die Instanznamen der Zielobjekte zugewiesen werden, wenn diese bereits existieren, sprich: auf der Bühne liegen. Wir müssten also den Code umstellen und erweitern, um die benötigten Namen entweder in einem Array oder in Variablen aufzunehmen. Insofern erweist sich die gewählte Vorgehensweise als die kürzere (was aber natürlich nicht generell gilt).

29.8 Code //------------ import –---------------import flash.filters.*;

//-------------- vars –---------------var mObjekt:MovieClip, mBehaelter:MovieClip; var nTiefe:Number = 0;

var nTiefeNegativ:Number = 100; var nAbstandX:Number = 80; var nAbstandY:Number = 5;

var sSuffix:String = „Ziel“;

var sPraefixAttach:String = „mc“; var aPosBeh:Array = [50, 50];

var aZiehObjekte:Array = [„Mann“, „Frau“, „Paar“]; var aZiehObjekte2:Array = []; var fDrop:DropShadowFilter;

//----------- functions –-------------function init() {

 var sMinuskel:String;

 fDrop = new DropShadowFilter(3, 45, 0 × 666666, 50, 5, 5, 1, 3);

 mBehaelter = this.createEmptyMovie­ Clip(„behObjekte“, this.getNextHighestDepth());

454

Kapitel 29  Interface und Navigation

 mBehaelter._x = aPosBeh[0];

function kontrolle() {

 for (var i:Number = 0; i
 var sZiel:String = this._name+sSuffix;

 mBehaelter._y = aPosBeh[1];

 sMinuskel = (aZiehObjekte[i]. substr(0, 1)). toLowerCase()+aZiehObjekte[i].substr(1);  mObjekt = mBehaelter.attachMovie (sPraefixAttach+aZiehObjekte[i], sMinuskel, nTiefe++);  mObjekt._y = i*(mObjekt._ height+nAbstandY);

 mObjekt.onPress = mObjekt.startDrag;

 mObjekt.onRelease = mObjekt.onReleaseOutside = kontrolle; }

 var nLaenge:Number = aZiehObjekte. length;  var nZufall:Number;

 for(i = 0; i < nLaenge; i++){

n Zufall = Math.floor(Math. random()*aZiehObjekte.length);  aZiehObjekte2. push(aZiehObjekte[nZufall]);

 aZiehObjekte.splice(nZufall,1);

 this.stopDrag();

 if (this.hitTest(this._ parent[sZiel])) {  trace(„Richtig!“); } }

//-------------- start –--------------init();

Auch wenn es auf den ersten Blick nicht so aussehen mag, so erlaubt uns dieses Zuordnungsprinzip dennoch, beispielsweise die Navigation einer Site erheblich zu vereinfachen. So können wir Namen für unsere Schaltflächen wählen, aus denen sich die zu ladende Datei extrahieren lässt. Nehmen wir beispielhaft an, unsere Schaltflächen tragen die Instanznamen btHome, btService, btProdukte, btShop und btKunden. Dann könnten wir die per loadMovie() zu ladenden Dateien sinnvollerweise unter den Namen home.swf, service.swf, produkte.swf, shop.swf und kunden.swf anlegen. Klicken wir etwa auf btHome, lässt sich aus diesem Namen die zugehörige Datei home.swf ermitteln, indem wir das Präfix bt streichen und das nächste Zeichen in einen Kleinbuchstaben verwandeln.

}

 var nBreite:Number = mBehaelter._ width;

 for (i=0; i
 sMinuskel = (aZiehObjekte2[i]. substr(0, 1)). toLowerCase()+aZiehObjekte2[i].substr(1);  mObjekt = mBehaelter.attachMovie (sPraefixAttach+aZiehObjekte2[i]+ sSuffix, sMinuskel+sSuffix, nTiefe++nTiefeNegativ);  mObjekt._x = nBreite+nAbstandX;  mObjekt._y = i*(mObjekt._ height+2*nAbstandY);

 mObjekt.filters = [fDrop]; } }

29.9 Einfaches Fenster-System mit scale9Grid Die scale9Grid -Eigenschaft der MovieClip-Klasse ist eigentlich dazu gedacht, das Skalier-Verhalten von Elementen, die sich innerhalb eines MovieClips befinden, zu definieren. Leider funktioniert in manchen Flash-Versionen besagte Eigenschaft nicht korrekt, wenn Bitmaps verwendet werden. Diese werden an den Rändern trotz eingestellter scale9Grid-Eigenschaft skaliert, was zu unerwünschten Effekten führen kann. Wir wollen uns daher im Folgenden eine geskriptete Variante anschauen, bei der ein korrektes Skalieren von Fenstern erfolgt. Darüber hinaus sollen die Fenster verschoben, skaliert und auf die Originalgröße zurück gesetzt werden können, so dass diejenigen, die mit einer neueren Flash-Version arbeiten, zumindest die übrige Funktionalität eines Fenster-Systems verwenden kön-

29.9  Einfaches Fenster-System mit scale9Grid

455

nen. Die betreffende Funktionalität wird per Mausklick auf die Oberkante, die rechte obere sowie die rechte untere Ecke aufgerufen. Korrekterweise müsste man diese Bereiche optisch kennzeichnen; wir verzichten hier aus Gründen der Vereinfachung darauf. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie in einem Bildbearbeitungsprogramm Grafiken für folgende Fenster-Elemente:

• Vier Ecken (links oben, rechts oben, links unten, rechts unten), • Vier Kanten (oben, unten, links, rechts), • Zentrum zur Aufnahme von Content.

Die vier Ecken sollen nicht skalierbar sein, während die Kanten für oben und unten horizontal, diejenigen für links und rechts vertikal skaliert werden dürfen. Für das Zentrum existiert diesbezüglich keinerlei Einschränkung. 3. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mclinksOben). 4. Fügen Sie in mclinksOben auf der Position 0,0 diejenige Grafik ein, die in der linken oberen Ecke liegen soll. 5. Erstellen Sie acht weitere leere MovieClips (Bibliotheks- und Verknüpfungsname mcmitteOben, mcrechtsOben, mclinksMitte, mczentrum, mcrechtsMitte, mclinksUnten, mcmitteUnten, mcrechtsUnten). 6. Fügen Sie dort jeweils auf der Position 0,0 die entsprechenden Grafiken ein. Sie müssten jetzt die in Abbildung  139 gezeigten Elemente als einzelne MovieClips in der Bibliothek vorliegen haben. 7. Erstellen Sie beispielhaften Content, z. B. eine Dummy-Grafik. 8. Fügen Sie den Dummy auf einer neuen Ebene in mczentrum ein. 9. Weisen Sie actions folgendes Bildskript zu:  //------------- vars –--------------  var mWin:MovieClip;

 var mWindows:MovieClip = this.create­ EmptyMovieClip(„behFenster“, 1);  var aTeile:Array = [„linksOben“, „mitteOben“, „rechtsOben“, „linksMitte“, „zentrum“, „rechtsMitte“, „linksUnten“, „mitteUnten“, „rechtsUnten“];  var nRand:Number = 20;

Abbildung 139:  Einzelelemente eines Fensters

Wir legen eine Variable fest, um die einzelnen Fensterteile einfach referenzieren zu können. Damit diese nicht „wild“ in der Gegend herum liegen, deklarieren wir eine weitere Variable mit einer Referenz auf einen leeren MovieClip, der uns als Behälter für alle Fenster dienen soll. In einem Array erfassen wir die Namen, die wir einerseits für das Einfügen der Fensterteile und andererseits für ihre Benennung benötigen. Zwar könnten wir den Code vereinfachen, indem abstrakte Bezeichnungen wie teil1 etc. gewählt würde, doch haben sprechende Namen den Vorteil, ein Skript lesbarer zu halten. In einer letzten Variable halten wir die Breite des Randes, d. h. des Abstandes zwischen Content und Fensterrand fest. Wir setzen voraus, dass er an allen Rändern gleich groß ist. In unserem Fall entspricht er der Breite und/oder Höhe der Kanten und Ecken. 10. Erweitern Sie das Skript um folgende Zeilen:  //-------- functions –-------------  function window(pBreite:Number, pHoehe:Number, pPosX:Number, pPosY:Number):Void {  var nIndex:Number = 0;

 var aPosX:Array = [0, nRand, pBreite +nRand];  var aPosY:Array = [0, nRand, pHoehe +nRand];  var mc:MovieClip;

 mWin = mWindows.createEmptyMovie­ Clip(„fenster“+mWindows.getNextHighestDepth(), mWindows.getNextHighestDepth());  mWin._x = pPosX;

456

Kapitel 29  Interface und Navigation

 mWin._y = pPosY;

 for (var i:Number = 0; i<3; i++) {

 for (var j:Number = 0; j<3; j++) {  mc = mWin.attachMovie („mc“+aTeile[nIndex], aTeile[nIndex], nIndex);  mc._x = aPosX[j];

 mc._y = aPosY[i];  nIndex++; } }

}

 //------------ aufruf –------------  window(100, 100, 100, 0);

Im linken oberen Screenbereich blendet Flash beim Testen ein einsames Fenster ein. Die Funktion window(), die dafür sorgt, dass Fenster eingefügt werden, benötigt vier Parameter:

• Breite des gewünschten Fensters. • Höhe des Fensters. Breite und Höhe beziehen sich auf die gesamte Größe einschließlich der Ränder und nicht nur auf die Größe des für den Content zuständigen Bereichs. • Horizontale Position. • Vertikale Position. Der Registrierungspunkt jedes Fensters liegt dabei in der linken oberen Ecke.

Da die benötigten Informationen zum Einblenden im Array aTeile enthalten sind, initialisieren wir die Variable nIndex mit 0, um sie als Index für den Arrayzugriff verwenden zu können. Ein einzelnes Fenster besteht aus insgesamt neun Teilen, die auf einer bestimmten Position angeordnet werden müssen. Sie lässt sich im Grunde genommen einfach bestimmen, wie Abbildung 140 verdeutlicht. Es ergeben sich folgende horizontale Positionen:

• Erste Spalte: 0 • Zweite Spalte: nRand, also Breite des Randes • Dritte Spalte: Breite der zweiten Spalte plus nRand

Vertikal lauten die Positionen:

• Erste Zeile: 0 • Zweite Zeile: nRand, wobei in unserem Fall der

Rand horizontal und vertikal den gleichen Wert besitzt • Dritte Zeile: Höhe der zweiten Zeile plus nRand. Wenn wir das Fenster in einer bestimmten Reihenfolge, z. B. zeilenweise aufbauen, lassen sich die benötigten Positionswerte leicht in Arrays erfassen. Dies geschieht mit Hilfe von aPosX und aPosY, in denen jeweils die Werte pro Spalte festgehalten sind. Bevor das Einfügen beginnt, muss eine Variable zum Referenzieren und ein leerer MovieClip zur Aufnahme der Einzelteile eingerichtet werden. Er erhält die Position, die als Argumente für pPosX und pPosY übergeben werden.

Abbildung 140:  Positionsbestimmung der Fensterteile

29.9  Einfaches Fenster-System mit scale9Grid

Innerhalb der Schleife erfolgt das konkrete Einfügen der benötigten Teile. Die äußere Schleife legt die Zeilen, die innere die Spalten fest. Konkret bedeutet dies, dass zuerst Zeile 1 mit allen Spalten, dann Zeile 2 und schließlich Zeile 3 eingerichtet wird. Welches konkrete Element eingefügt wird, ergibt sich aus dem Array aTeile, das wir sukzessive, beginnend bei dem ersten Element, durchgehen. Dort müssen alle Elemente in der korrekten Reihenfolge der Zeilen vorliegen, ansonsten erhalten wir ein unter künstlerischen Gesichtspunkten vielleicht interessantes, aber aus dem Blickwinkel eines Users wohl eher ungewöhnliches Fenster, bei dem Ecken und Kanten recht willkürlich verteilt scheinen. Da die Verknüpfungsnamen in der Bibliothek mit dem Präfix „mc“ versehen wurden, fügen wir es beim Aufruf von attachMovie() ein. Als Instanzname verwenden wir einfach diejenigen Bezeichnungen, die in aTeile vorliegen. Als Tiefe weisen wir die bei jedem Durchlauf inkrementierte Variable nIndex zu. Bei der Positionierung verwenden wir in der oben beschriebenen Reihenfolge die in aPosX und aPosY enthaltenen Werte. Anstelle dieser leichter lesbaren Version wäre auch eine kürzere Variante möglich, die auf eine Deklaration und Initialisierung von mc verzichtet und statt dessen die benötigten Positionswerte direkt bei attachMovie() als Objekt übergibt. Die entsprechende Zeile würde dann lauten: mWin.attachMovie(„mc“+aTeile[nIndex], aTeile[nIndex], nIndex, {_x:aPosX[j], _y:aPosY[i]});

457

Rechts unterhalb des bisherigen Fensters erscheint ein neues Fenster gleicher Größe. Wir können also sehr einfach nach Belieben neue Fenster einfügen, indem wir die betreffende Funktion aufrufen und ihr die gewünschten Argumente übergeben. 12. Ändern Sie den zweiten Funktionsaufruf (Fettdruck):

window(100, 80, 300, 100);

Das zweite Fenster ist dem Fensterfraß anheimgefallen: Aufgrund der veränderten Angabe für die Breite wurde die rechte Kante um 20 Pixel nach rechts verschoben, ohne dass die übrigen Elemente skaliert worden wären. Dadurch entsteht eine deutlich sichtbare Lücke. Wir benötigen daher eine Funktion, die abhängig von den konkreten Werten eine beliebige Skalierung des Zentrums sowie eine horizontale oder eine vertikale Skalierung der Kanten zulässt. Genau dasselbe wird auch später benötigt, wenn wir das Fenster mit Hilfe eines Anfassers verändern wollen. 13. Erweitern Sie den Funktions-Block um folgende Deklaration:  function skalieren(pWer:MovieClip):Void {

 pWer.rechtsOben._x = pWer.rechtsMitte._x=pWer.rechtsUnten._x;  pWer.linksUnten._y = pWer.mitte­ Unten._y=pWer.rechtsUnten._y;

Um überhaupt etwas sehen zu können, wird am Ende ein Aufruf eingefügt, der als Argumente folgende Werte erhält:

 pWer.mitteOben._width = pWer. zentrum._width = pWer.mitteUnten._ width = pWer.rechtsUnten._x-nRand;

• Fensterbreite 100 Pixel • Fensterhöhe 100 Pixel • Horizontale Position 100 • Vertikale Position 0



Das Fenster „klebt“ damit am oberen Rand. Sollten Sie die Grafiken von der CD verwendet haben, scheint das Fenster respektvoll einen kleinen Abstand zum oberen Bühnenrand einzuhalten. Tatsächlich handelt es sich jedoch um einen transparenten Verlauf im Bild, so dass die Fensterkanten etwas weicher erscheinen. Rein rechnerisch wird der vorgegebene Abstand von 0 Pixel eingehalten. 11. Fügen Sie einen weiteren Funktionsaufruf ein:

window(80, 80, 300, 100);

 pWer.linksMitte._height = pWer.zentrum._height = pWer. rechtsMitte._height = pWer. rechtsUnten._y-nRand; }

14. Fügen Sie innerhalb der Deklaration von window() nach der äußeren Schleife unmittelbar vor der schließenden Klammer der Funktion ein:

skalieren(mWin);

Das Fenster wird nun entsprechend der im Aufruf übergebenen Werte skaliert. Sie können gerne mit anderen Werten experimentieren, z. B. window(120, 100, 300, 100). Auf den ersten Blick mag die Skalierungsfunktion etwas verwirrend ausschauen. Die dahinter stehende

458

Logik ist jedoch ausgesprochen simpel. Alle Fensterteile mit Ausnahme der linken oberen Ecke werden positioniert und/oder skaliert. Dabei setzen wir alle Elemente der dritten Spalte horizontal auf die Position des rechten unteren Elements. Das ist insbesondere für die spätere Veränderung per Anfasser wichtig, denn er ist mit diesem Element identisch. Das gleiche geschieht vertikal mit der unteren Reihe, die ebenfalls auf die Position des rechten unteren Elements gesetzt wird. Nicht jedes der Elemente benötigt jedoch eine neue vertikale und horizontale Position. Vertikal ändert sich für die erste und zweite Zeile nichts, horizontal bleiben die Werte für die erste und zweite Spalte unverändert. Anschließend erfolgt die Skalierung, die sich ebenfalls nach dem rechten unteren Element richtet. Sie wird durch dessen Position, nicht jedoch durch dessen Größe, vorgegeben. Die Breite aller Elemente in der zweiten Spalte entspricht der x-Position des rechten unteren Elements bzw. des Anfassers minus der Randbreite. Für den Fall, dass Sie mit verschiedenen Randbreiten arbeiten möchten, ist hier der linke Rand relevant. Und die Höhe aller Elemente der zweiten Zeile ergibt sich aus der vertikalen Position des Anfassers minus Rand. Genau derselbe Vorgang soll ausgelöst werden, wenn wir das Fenster an einer bestimmten Ecke anfassen und ziehen. 15. Fügen Sie in der Deklaration von window() unmittelbar nach dem Aufruf von skalieren(mWin) ein:  mWin.rechtsUnten.onPress = klickZiehen;

16. Erweitern Sie den Funktions-Block um folgende Deklaration:  function klickZiehen():Void {

 var nOffsetX:Number = _xmousethis._x;  var nOffsetY:Number = _ymousethis._y;

 this.onEnterFrame = function() {  this._x = _xmouse-nOffsetX;  this._y = _ymouse-nOffsetY;  skalieren(this._parent); };  }

Kapitel 29  Interface und Navigation

Wenn Sie die rechte untere Ecke mit gedrückter Maustaste ziehen, skaliert sich das Fenster entsprechend der Position dieses Anfassers. Wir weisen dem rechten unteren Element, dessen Instanzname im Array aTeile mit rechtsUnten festgelegt worden ist, einen Mausklick zu, bei dem die Funktion klickZiehen() aufgerufen wird. Diese Funktion sorgt dafür, dass die Ecke verschoben wird und dementsprechend alle anderen Element angepasst werden. Da beim Klick aller Voraussicht nach nicht exakt der Registrierungspunkt des Anfassers getroffen wird, muss der Offset, also der Abstand zwischen Maus und diesem Registrierungspunkt ermittelt werden. Verzichten wir darauf, erfolgt die Positionierung des Anfassers beim erstmaligen Bewegen der Maus sprunghaft. Anschließend richten wir ein onEnterFrame-Ereignis ein, das permanent für eine Neupositionierung des Anfassers sorgt und die oben besprochene Skalieren-Funktion aufruft. Als Argument muss mit _parent der übergeordnete MovieClip des Anfassers übergeben werden, da sich die Skalierung ja auf alle Elemente des Fensters beziehen soll und nicht nur auf den Anfasser selbst. Allerdings enthält das Skript in der vorliegenden Form noch einen unangenehmen Fehler: Ziehen Sie den Anfasser nach links oder nach oben über die linke bzw. obere Kante hinaus, verschieben sich einige Fensterelemente  – aber eben nicht alle. Nach dem Motto „Vom Winde verweht“ bleiben nur noch die Ecken übrig, die nach wie vor dem Anfasser folgen. 17. Erweitern Sie die Funktion klickZiehen() folgendermaßen (Fettdruck):  function klickZiehen():Void {

 var nOffsetX:Number = _xmousethis._x;  var nOffsetY:Number = _ymousethis._y;

 var nGrenzeLinks:Number = this._ parent._x+this._parent.linksOben._ width+10;

 var nGrenzeOben:Number = this._parent._y+this._parent.linksOben._ height+10;  this.onEnterFrame = function() {  if (_xmouse>nGrenzeLinks && _ ymouse>nGrenzeOben) {

 this._x = _xmouse-nOffsetX;

29.9  Einfaches Fenster-System mit scale9Grid

 this._y = _ymouse-nOffsetY;  skalieren(this._parent); } };  }

Nun lässt sich der Anfasser nicht mehr beliebig verschieben, sondern bleibt an einem bestimmten Punkt einfach stehen. Wir legen für die Bewegung nach links sowie nach oben eine Grenze fest. Bezogen auf das Koordinatensystem des übergeordneten MovieClips wird sie gebildet aus der Position des Fensters zuzüglich der Ausdehnung der linken oberen Ecke zuzüglich einem beliebigen, kleinen Wert, hier 10 Pixel. Durch die ifBedingung stellen wir sicher, dass eine Bewegung des Anfassers und Skalierung des Fensters nur dann erfolgt, wenn sich die Mausposition rechts und unterhalb dieser Grenze befindet. Ebenfalls korrigiert werden muss der Mausklick, der nicht aufgehoben wird. Selbst wenn Sie die Maus loslassen, klebt das Fenster am Cursor. 18. Fügen Sie innerhalb der Deklaration von window() nach der Zuweisung des onPress-Ereignisses ein:  mWin.rechtsUnten.onRelease = mWin.rechtsUnten. onReleaseOutside=function () {  delete this.onEnterFrame;  };

Wenn Sie die Maus nach einem Ziehvorgang loslassen, ändert sich das Fenster nicht mehr und Sie können den Mauszeiger beliebig bewegen. Um das übertrieben anhängliche Verhalten der Maus abzustellen, weisen wir ein onRelease- sowie onRelaeseOutside-Ereignis zu, das einfach das onEnterFrame-Ereignis des Anfassers löscht. Dadurch erfolgt keine weitere Positionsberechnung und keine Skalierung mehr. Neben dem Skalieren erwartet der Anwender i. d. R. die Möglichkeit, ein Fenster ziehen zu können. 19. Fügen Sie innerhalb der Deklaration von window() nach der Zuweisung des onRelease-Ereignisses ein:  mWin.mitteOben.onPress = function() {  this._parent.startDrag();

459

 };

 mWin.mitteOben.onRelease = mWin.mitteOben.onReleaseOutside=function () {  this._parent.stopDrag();  };

Klicken Sie beim Testen auf den oberen Rand des Fensters, kann es über die Bühne verschoben werden. Dazu bedienen wir uns eines einfachen Ziehverhaltens, das durch die Methode startDrag() zur Verfügung gestellt wird. Diese Methode rufen wir auf, wenn der Anwender auf den oberen Rand des Fensters klickt. Auch hier muss ein onRelease-Ereignis definiert werden, sonst lebt das Fenster seine Anhänglichkeit wieder genüsslich aus. Wenn Sie beide Fenster übereinander schieben und abwechselnd darauf klicken, stellen Sie fest, dass sich die Tiefen nicht ändern. Es kann daher vorkommen, dass ein gerade aktiviertes Fenster von einem anderen hartnäckig verdeckt wird, was nicht unseren Erwartungen entspricht. 20. Erweitern Sie das onPress-Ereignis, das wir mWin.mitteOben zugewiesen haben:  this._parent.swapDepths(mWindows. getNextHighestDepth());

21. Fügen Sie in der Deklaration von klickZiehen () unmittelbar vor der schließenden Klammer, aber außerhalb des onEnterFrame-Ereignisses ein:  this._parent.swapDepths(mWindows. getNextHighestDepth());

Jeder Klick auf eines der Fenster setzt dieses auf eine höhere Tiefe, unabhängig davon, wo es sich vorher befand. Durch die Methode swapDepth() sorgen wir dafür, dass dem übergeordneten Objekt, also dem Fenster, eine neue Tiefe zugewiesen wird. Dabei handelt es sich um die nächst höhere Tiefe in dem MovieClip, der als Behälter für alle Fenster fungiert. Auf diese Weise ist gewährleistet, dass ein aktiviertes Fenster in jedem Fall vor allen anderen Fenstern dargestellt wird. Theoretisch wäre es möglich, dass der Wert mWindows.getNextHighestDepth() irgendwo an eine Grenze stößt, da wir nicht dessen Größe kontrollieren. Faktisch dürfte das Risiko jedoch angenehm niedrig sein, denn Flash verkraftet auch eine Tiefe von bei-

460

spielsweise 100000 locker. Es dürfte eher unwahrscheinlich sein, dass ein Anwender einige Tausend (!) Klicks in unserer Applikation auf einzelnen Fenstern ausführt. Wer sich hier dennoch unwohl fühlt, muss die Tiefen der vorhandenen Fenster kontrollieren und bei Klick dem aktivierten Element eine vorher festgelegte, höchste Tiefe zuweisen, während das zuvor aktive Element eine niedrigere Tiefe erhält (die in Relation zu den Tiefen der anderen Fenster gesetzt werden muss). Wenn man ein Fenster skaliert, möchte man es vielleicht auch wieder auf seine Originalgröße zurück setzen können. 22. Erweitern Sie die Deklaration von window() unmittelbar nach dem Aufruf von skalieren(mWin):  for (var e in mWin) {

 if (typeof (mWin) == „movieclip“) {  mWin[e].tmOriginal = mWin[e]. transform.matrix; }  }

23. Fügen Sie in der Deklaration von window() nach der Zuweisung von mWin.mitteOben.onRelease ein:  mWin.rechtsOben.onPress = function() {

Kapitel 29  Interface und Navigation

In irgendeiner Form muss der Originalzustand der Fenster nach dem Einfügen festgehalten werden, so dass wir in der Lage sind, auf diese Informationen wieder zuzugreifen. Hier gäbe es mehrere Möglichkeiten. So könnten wir ein Array mit den entsprechenden Werten für Breite und Höhe einrichten. Seit Flash 8 gibt es jedoch die kürzere Variante, die benötigten Werte in einer Matrix zu speichern. Die Eigenschaft transform.matrix eines MovieClips hält dessen aktuelle Transformation und eben u. a. seine Größe fest. Diesen Wert speichern wir in einer pro Fensterteil eingerichteten Variablen. Mit der for in-Schleife lesen wir jedes Element innerhalb des Fensters aus und richten dann unsere Variable ein, wenn es sich um einen MovieClip handelt. Die rechte obere Ecke erhält einen Mausklick, der aus Gründen der Vereinfachung in einer lokalen Variablen eine Referenz auf das übergeordnete Fenster speichert. Anschließend gehen wir alle Elemente in diesem Fenster durch. Handelt es sich um einen MovieClip, wissen wir, dass ein Fensterteil vorliegt. Dessen Eigenschaft transform.matrix wird dann einfach auf den zuvor pro Objekt gespeicherten Wert gesetzt, womit wir den Originalzustand wieder herstellen. Zum Schluss muss der Mausklick noch eine Tiefenänderung bewirken, so dass der aktivierte MovieClip im Vordergrund liegt. Nun können Sie nach Lust und Laune fensterln.

 var nP:MovieClip = this._parent;

29.10 Code

 if (typeof (nP) == „movieclip“) {

Der gesamte Code zur Kontrolle:

 for (var e in nP) {

 nP[e].transform.matrix = nP[e].tmOriginal; } }

 this._parent.swapDepths(mWindows. getNextHighestDepth());  };

Wenn Sie beim Testen ein Fenster skalieren, können Sie es durch einen Klick auf die rechte obere Ecke wieder in seinen Originalzustand versetzen. Achten Sie darauf, die rechte Ecke exakt zu treffen, da der entsprechende Bereich zugegebenermaßen in unserem Beispiel sehr klein ist.

//---------------- import –-----------import flash.geom.*;

//------------- vars –----------------var mWin:MovieClip;

var mWindows:MovieClip = this. createEmpty­ MovieClip(„behFenster“, 1);

var aTeile:Array = [„linksOben“, „mitteOben“, „rechtsOben“, „linksMitte“, „zentrum“, „rechtsMitte“, „linksUnten“, „mitteUnten“, „rechtsUnten“]; var nRand:Number = 20;

//------------- functions –-----------function window(pBreite:Number, pHoehe:Number, pPosX:Number, pPosY:Number):Void {

29.10  Code

 var nIndex:Number = 0;

 var aPosX:Array = [0, nRand, pBreite +nRand];  var aPosY:Array = [0, nRand, pHoehe +nRand]; var mc:MovieClip;

 mWin = mWindows.createEmptyMovie­ Clip(„fenster“+mWindows.getNextHighestDepth(), mWindows.getNextHighest­ Depth());

461

 this._parent.stopDrag(); };

 mWin.rechtsOben.onPress = function() {  var nP:MovieClip = this._parent;  for (var e in nP) {

 if (typeof (nP) == „movieclip“) {

 nP[e].transform.matrix = nP[e]. tmOriginal;

 mWin._x = pPosX;

}

 for (var i:Number = 0; i<3; i++) {

 this._parent.swapDepths(mWindows. getNextHighestDepth());

 mWin._y = pPosY;

 for (var j:Number = 0; j<3; j++) {

 mc = mWin.attachMovie(„mc“+aTeil e[nIndex], aTeile[nIndex], nIndex); mc._x = aPosX[j];

 mc._y = aPosY[i];  nIndex++; } }

 skalieren(mWin);

 for (var e in mWin) {

 if (typeof (mWin) == „movieclip“) {  mWin[e].tmOriginal = mWin[e]. transform.matrix; } }

 mWin.zentrum.smiley.onEnterFrame = eyes;

 mWin.rechtsUnten.onPress = klickZiehen;

 mWin.rechtsUnten.onRelease = mWin. rechtsUnten.onReleaseOutside=function () {

}

}; }

function skalieren(pWer:MovieClip):Void {  pWer.rechtsOben._x = pWer.rechtsMitte._x=pWer.rechtsUnten._x;

 pWer.linksUnten._y = pWer.mitteUnten._y=pWer.rechtsUnten._y;

 pWer.mitteOben._width = pWer.zentrum._width = pWer.mitteUnten._width = pWer.rechtsUnten._x-nRand;  pWer.linksMitte._height = pWer.zentrum._height = pWer.rechtsMitte._ height = pWer.rechtsUnten._y-nRand; }

function eyes() {

 for (var k:Number = 1; k<=2; k++) {

 var nDistX:Number = this._xmousethis[„auge“+k]._x;  var nDistY:Number = this._ymousethis[„auge“+k]._y;

 this[„auge“+k]._rotation = Math. atan2(nDistY, nDistX)*180/Math.PI;

 delete this.onEnterFrame;

}

 mWin.mitteOben.onPress = function() {

function klickZiehen() {

};

}

 this._parent.startDrag();

 var nOffsetX:Number = _xmousethis._x;

 this._parent.swapDepths(mWindows. getNextHighestDepth()); };

 mWin.mitteOben.onRelease = mWin.mitteOben.onReleaseOutside=function () {

 var nOffsetY:Number = _ymousethis._y;

 var nBorderLeft:Number = this._parent._x+this._parent.linksOben._ width+10;

462

 var nBorderTop:Number = this._parent._y+this._parent.linksOben._ height+10;  this.onEnterFrame = function() {  if (_xmouse>nBorderLeft && _ ymouse>nBorderTop) {

 this._x = _xmouse-nOffsetX;  this._y = _ymouse-nOffsetY;  skalieren(this._parent); } };

 this._parent.swapDepths(mWindows.getNextHighestDepth()); }

//------------ aufruf –---------------window(200, 200, 100, 0);

window(100, 200, 300, 100); window(100, 100, 100, 200); window(100, 100, 500, 100);

Kapitel 29  Interface und Navigation

29.11 Varianten und Erweiterungen Hier wurde nur an einem einfachen Beispiel das Grundprinzip eines sich anständig benehmenden Fensters vorgestellt. Natürlich sind zahlreiche Modifikationen und Erweiterungen denkbar. So werden Sie sicher wechselnden Content in den Fenstern anzeigen wollen, so attraktiv der Smiley im Beispiel auch sein mag. In dem Fall legen Sie einfach in mczentrum einen leeren MovieClip an (entweder händisch in der Bibliothek oder dynamisch per createEmptyMovieClip()). Dort wird dann bei Einfügen des Fensters der entsprechende Content mit attachMovie(), gegebenenfalls auch mit loadMovie() geladen.

Menü-Systeme

Ein Menü ist ein Interface, das es dem User erlaubt, durch eine Site zu navigieren. Es hängt entscheidend von der Gestaltung des Menüs ab, ob man sich zurecht findet oder nicht. Außerdem bietet es eine gute Möglichkeit, um eine der Site zugrunde liegende Metapher einzuführen und zu visualisieren. Eingedenk seiner Bedeutung haben sich daher Designer und Entwickler immer wieder neue und durchaus ungewöhnliche Formen von Menüs einfallen lassen. Wir wollen im nachfolgenden einige grundlegende Varianten vorstellen, wobei wir uns aus Platzgründen auf eine sehr kleine Auswahl beschränken müssen. Denn das Thema erweist sich als umfangreich genug, um ihm ein eigenes Buch zu widmen. Unabhängig von ihrer konkreten Gestaltung sollte ein Menü bestimmte Anforderungen erfüllen:

• Natürlich ermöglicht es den Zugriff auf den Inhalt

einer Site, das ist schließlich sein Sinn und Zweck. Dabei kann eine spezifische Reihenfolge vorgegeben werden wie man es typischerweise bei Lernprogrammen findet, oder die Navigation kann auf beliebige Seiten zugreifen. • Über das aufrufbare Ziel muss zumindest in rudimentärer Form eine Information gegeben werden, so dass man weiß, was einen dort erwartet. Das kann mit Hilfe von eindeutig zu identifizierenden Icons geschehen oder auch mit einem simplen Text. Die Verwendung von Icons lässt sich durch zusätzlich bei RollOver eingeblendetem kurzen Text (Tooltip) noch erleichtern. • Man kann jederzeit zu einem zentralen Punkt, z. B. dem Startpunkt, zurück kehren. Dabei handelt es sich um die Hauptseite einer Site. Auf diese Weise wird verhindert, dass ein User sich vielleicht im Gestrüpp zahlreicher Buttons verliert und nicht

30

mehr weiß, wohin. Daher muss der Startpunkt eindeutig gekennzeichnet sein, was oft einfach dadurch geschieht, dass er in der Reihenfolge der Menüpunkte an erster Stelle steht. • Es empfiehlt sich, den aktuellen Standort anzuzeigen. Damit fällt es uns leichter, die Seiten, die wir aufrufen können, mental zuzuordnen und gegebenenfalls ihre logische Abhängigkeit voneinander zu erkennen. Möglich wäre z. B. eine farbliche Hervorhebung des aktiven Menüpunkts oder dessen Kennzeichnung durch ein besonderes grafisches Element wie ein kleiner Pfeil oder ein Dreieck. • Bei umfangreichen Sites erweist es sich als eine große Hilfe, wenn bereits aufgesuchte Inhalte gekennzeichnet werden. Dieses Prinzip zeigt sich klassischerweise bei einem Browser, dessen Links abhängig davon, ob man sie schon einmal aufgerufen hat, verschieden eingefärbt werden. • Ein Menü sollte sich an einer prominenten Stelle befinden und jederzeit mit einem einzigen Mausklick aufrufbar sein, ohne dabei jedoch den Content der Site, der ja das eigentliche Ziel des Anwenders ist, zu verdecken. • Es muss direkt als Menü identifizierbar sein. Das Menü ist nämlich nur Hilfsmittel und nicht Zentrum der Site, mit der man sich gerade auseinandersetzt. Ein exploratives Menü, das außerhalb des Screens versteckt wird und sich erst auf eine bestimmte User-Aktion hin offenbart, macht i. d. R. keinen Sinn, weil es einerseits zu viele Vorkenntnisse seitens des Anwenders voraussetzt und ihn andererseits dazu zwingt, einen gewissen Aufwand zu betreiben, bevor er auf die Navigation zugreifen kann. Der ansonsten geniale Landschaftsgenerator Bryce stellt ein gutes Beispiel dar, das dem Autor, der in alten Zeiten aus Prinzip kein Handbuch ge-

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

463

464

lesen hat, einige frustrierende, verzweifelte Momente verschafft hat, weil die Standarddialoge wie etc. gut versteckt waren. • Die Menge der Menüpunkte sollte weder ausufernd noch minimalistisch sein. Es gibt zwar keinen Idealwert, aber man liegt nicht daneben, wenn man irgendwo zwischen 4 und 9 Punkte anbietet. Alles darunter sieht recht schmalbrüstig aus, während eine größere Menge schlicht unübersichtlich wird (das ist übrigens ein grundlegendes Problem von Portalen).

30.1 Kreismenüs Neben Standardmenüs, bestehend aus der horizontalen oder vertikalen Anordnung rechteckiger Schaltflächen, sind natürlich zahllose andere Menüformen denkbar und auch mit Flash realisiert worden. Nicht selten kommen kreisförmige Menüs zum Einsatz. Wir wollen uns einige Varianten anschauen. In der simpelsten Form ordnen wir die Buttons in einem Kreis an und weisen ihnen die gewünschte Funktionalität zu. Das entsprechende Prinzip haben wir bereits im ersten Teil des Buches im Kapitel Trigonometrie kennen gelernt. Abbildung 141 zeigt das Ergebnis dieser Übung.

Abbildung 141:  Kreisförmiges Menü

Kapitel 30  Menü-Systeme

1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek die benötigten Grafiken. Für unsere Übung benötigen Sie sieben kreisrunde Grafiken der Größe 80 × 80. Idealerweise handelt es sich dabei um png-Dateien mit freigestelltem Icon. 3. Erstellen Sie sieben leere MovieClips namens mcPunkt0 bis mcPunkt6, denen Sie gleichnamige Verknüpfungen zuweisen. 4. Fügen Sie dort die importierten Grafiken horizontal und vertikal mittig ein. 5. Kehren Sie zur Hauptzeitleiste zurück. 6. Fügen Sie dort in actions ein:  //------------ vars –---------------  var mMenue:MovieClip;

 var nMenuePosX:Number = Stage. width/2;  var nMenuePosY:Number = Stage. height/2;  var nAnzahl:Number = 7;

 var nRadius:Number = 150;  var nWinkel:Number = 0;

 var nDist:Number = 270/(nAnzahl-1);  var nAktuell:Number = 0;

 var nMenueTiefe:Number = 1000;

Wir legen eine Variable zur Referenzierung aller Menüpunkte an, definieren die Position des Menüs (hier konkret: Bühnenmitte), die Anzahl der Punkte, deren Abstand von der Mitte und den Startwinkel, wobei zu beachten ist, dass der Wert 0 aufgrund des Einheitskreises bedeutet, dass der erste Menüpunkt auf dem rechten Scheitelpunkt eines gedachten Kreises angezeigt wird. Anschließend errechnen wir die Gradanzahl, um die wir jeden weiteren Punkt im Uhrzeigersinn verschieben müssen. Dabei ist ein Punkt zu beachten: Wenn wir für unsere Menüpunkte eine kreisförmige Anordnung kleiner 360  Grad wünschen, dividieren wir die gewünschte Drehung durch nAnzahl  – 1. Diese Berechnung ergibt sich aus der Tatsache, dass wir jeden nachfolgenden Menüpunkt mit Ausnahme des ersten um den ermittelten Winkelwert verschieben. Bei beispielsweise 10 Menüpunkten erhalten wir 9 Verschiebungen. Die einzige Ausnahme betrifft einen vollständigen Kreis von 360 Grad (wie im nachfolgenden Workshop gezeigt).

30.1  Kreismenüs

Die letzten beiden Werte dienen dazu, eine eindeutige Tiefe für jeden einzelnen Punkt sowie eine für den gesamten Behälter festzulegen. In letztgenanntem Fall wählen wir einen möglichst hohen Wert, so dass unser Menü sinnvollerweise vor allen anderen Objekten angezeigt werden kann. 7. Fügen Sie folgende Funktionsdeklaration ein:  //----------- functions –-----------  function init() {

 mMenue = this.createEmptyMovieClip („behMenue“, nMenueTiefe);  mMenue._x = nMenuePosX;  mMenue._y = nMenuePosY;

 mMenue.onEnterFrame = einblenden; }

Zunächst wird der Menübehälter als leerer MC angelegt und auf die gewünschte Position gesetzt. Anschließend rufen wir in einem onEnterFrame-Ereignis die noch zu deklarierende Funktion einblenden auf. 8. Erweitern Sie den Funktionsblock:  function einblenden() {

 var nPosX:Number = Math. cos(nWinkel*(Math.PI/180))*nRadius;  var nPosY:Number = Math. sin(nWinkel*(Math.PI/180))*nRadius;  var mMenuePunkt:MovieClip = mMenue. attachMovie(„mcPunkt“+nAktuell, „k“+nAktuell, nAktuell);  mMenuePunkt._x = nPosX;  mMenuePunkt._y = nPosY;  nWinkel += nDist;  nAktuell++;

 if (nAktuell == nAnzahl) {

 delete this.onEnterFrame; } }

Wie Sie sicher noch aus dem Kapitel über Trigonometrie wissen, ermitteln wir die gewünschte Position für die einzelnen Menüpunkte mit Hilfe von cosinus (horizontal) und sinus (vertikal), wobei aufgrund der verschiedenen Maßeinheiten zwischen dem Einheitskreis und der konkreten Umsetzung in Flash eine

465

Umrechnung in Form der Multiplikation mit Math. PI/180 erfolgen muss. Damit die Punkte nicht überaus anhänglich am Mittelpunkt kleben bleiben, multiplizieren wir das Ergebnis noch mit dem Radius und erhalten so eine korrekte Position auf einem gedachten Kreis. Die so ermittelten Werte werden jeweils einem aus der Bibliothek eingefügten MovieClip zugewiesen. Welchen wir benötigen, ermitteln wir einfach aus einem String und der Zählvariablen nAktuell, so dass sich jeweils der anfangs zugewiesene Verknüpfungsname ergibt. Damit ein weiterer Punkt eingeblendet werden kann, müssen wir den aktuellen Winkel um den bereits im Variablen-Block ermittelten Wert erhöhen. dadurch verschiebt sich die Position jedes nachfolgenden MovieClips im Uhrzeigersinn, bis nAktuell gleich der gewünschten Gesamtanzahl bzw. nAnzahl ist. In dem Fall wird das nun überflüssige onEnterFrame-Ereignis gelöscht. 9. Rufen Sie die init-Funktion auf:  // –---------- aufruf –-------------  initMenue();

Wenn Sie testen, baut sich das Menü entsprechend der von Ihnen gewählten Bildwiederholrate sukzessive auf. Wollen Sie statt dessen ein sofortiges Erscheinen, müssen Sie das onEnterFrame-Ereignis durch eine Schleife ersetzen, bei der Sie nAktuell als Zählvariable verwenden können. Auch hier gilt dann: Es werden so viele Durchläufe benötigt, bis nAktuell gleich nAnzahl ist Das Menü lässt sich in der Ausrichtung und der Anzahl der Punkte sehr leicht anpassen. Möchten Sie z. B. nur eine halbkreisförmige Anordnung, ersetzen Sie im Variablen-Block bei der Berechnung von nDist die 270 durch 180. Und soll der erste Punkte z. B. auf die 12–Uhr–Position verschoben werden, legen Sie in nWinkel den Startwinkel einfach mit –90 fest. Als Startwert für die Berechnungen gilt immer eine Ausrichtung nach rechts, gleichbedeutend mit einer Drehung von 0. Benötigen Sie demgegenüber einen Startwert entgegen dem Uhrzeigersinn, muss nWinkel mit einer Zahl kleiner 0, andernfalls gleich oder größer 0 initialisiert werden. Ein kreisförmiges Menü kann recht raumgreifend auftreten, denn die bei rechteckigen Formen ökonomisch genutzten Ecken bleiben hier natürlich unbenutzt. Dem kann man begegnen, indem die Unter-

466

Kapitel 30  Menü-Systeme

5. Erstellen Sie sieben weitere leere MovieClips namens mcSub10 bis mcSub16, denen Sie ebenfalls die gleichnamigen Verknüpfungen zuweisen. 6. Fügen Sie dort die für die Unterpunkte erster Ordnung vorgesehenen Grafiken horizontal und vertikal mittig ein. 7. Weil wir uns nun schon daran gewöhnt haben, erstellen Sie noch einen weiteren leeren MovieClip namens mcSub2 und weisen ihm eine gleichnamige Verknüpfung zu. 8. Fügen Sie dort die für einen Unterpunkt zweiter Ordnung vorgesehene Grafik horizontal und vertikal mittig ein.

Abbildung 142:  Aktiviertes Kreismenü

Eigentlich müssten wir hier für jeden Unterpunkt erster Ordnung die Unterpunkte zweiter Ordnung erstellen. Wir begnügen uns stellvertretend für alle anderen mit einem einzigen Menüpunkt, der ausreicht, um das Funktionsprinzip zu verdeutlichen. 9. Weisen Sie actions folgendes Bildskript zu:

punkte nicht von vorneherein sichtbar sind, sondern erst bei onRollOver ausfahren. In nicht aktiviertem Zustand ist nur der Menümittelpunkt sichtbar. Erst bei onRollOver fahren die einzelnen Menüpunkte aus dem Mittelpunkt aus, um sich kreisförmig anzuordnen. Haben sie ihre Endposition erreicht, kann man per onRollOver auf sie weitere Unterpunkte ebenfalls kreisförmig einblenden lassen. Im aktivierten Zustand sieht das Menü wie in Abbildung  142 aus, wobei der letzte RollOver über den rechten unteren Menüpunkt stattfand . Sollten Sie keine Grafiken zur Hand haben, können Sie wie in der vorhergehenden Übung gerne mit einfachen Farbkreisen als Dummies arbeiten. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie in die Bibliothek die benötigten Grafiken. Für unsere Übung sollten sie beispielhaft folgende Größen aufweisen: Menümittelpunkt 110 × 110, Unterpunkte erster Ordnung 80 × 80, Unterpunkte zweiter Ordnung 50 × 50. Alternativ erstellen Sie Farbkreise dieser Größen. 3. Erstellen Sie einen leeren MovieClip namens mcMain und weisen ihm automatisch eine gleichnamige Verknüpfung zu, so dass wir ihn später per attachMovie() einfügen können. 4. Fügen Sie dort die für den Mittelpunkt vorgesehene Grafik horizontal und vertikal mittig ein.

 // –------------- vars –------------

 var mcBehM:MovieClip = this.create­ EmptyMovieClip(„behaelterMenue“, 1);  var mcBehD:MovieClip = this.create­ EmptyMovieClip(„behaelterDatei“, 2);  var mcMM:MovieClip;

 var mcSubs:MovieClip;

 var mcSubSub:MovieClip;

Hier geschieht noch nichts dramatisches: Wir definieren lediglich eine Reihe von Variablen, die dazu dienen, MovieClips aufzunehmen. Zunächst benötigen wir eine Variable für einen leeren MovieClip, der uns als Behälter für das gesamte Menü dienen wird. Wie Sie bereits in anderen Workshops gesehen haben, sind wir so flexibler als wenn wir das Menü direkt der Hauptzeitleiste zuweisen würden. Anschließend erstellen wir einen zweiten Behälter, in den wir bei Bedarf externe swf oder andere Dateien laden können, wenn einer der Menüunterpunkte per Mausklick aufgerufen wurde. Drei weitere Variablen werden im Gegensatz zu diesen beiden nur deklariert, nicht initialisiert. Sie werden jeweils den Menümittelpunkt, die mit onRollOver aktivierbaren Menüpunkte sowie die mit Mausklick aktivierbaren Unterpunkte aufnehmen. 10. Ergänzen Sie den Variablen-Block um folgende Zeilen:

30.1  Kreismenüs

 var nSubs:Number = 7;

 var nDist:Number = 360/nSubs;  var nRadius:Number;

 var nWinkel:Number = 0;

 var nTempo:Number = 0.3;

 var nStopDif:Number = 0.5;

Bevor wir die Menüpunkte einblenden können, benötigen wir noch eine Reihe weiterer Variablen. Die Anzahl der einzublendenden Menüpunkte legen wir mit 7 fest. Da sie über eine Winkelberechnung positioniert werden und der Abstand zwischen ihnen jeweils gleich sein soll, müssen wir wissen, um wie viel Grad ein Menüpunkt gegenüber dem vorhergehenden verschoben wird. Bei einem Vollkreis ergibt sich diese Winkeldifferenz aus der Division von 360 durch die Anzahl der gewünschten Punkte. Den Radius deklarieren wir zwar, weisen aber erst später einen konkreten Wert zu, weil wir ihn aus der Breite der Grafik im Zentrum errechnen wollen. Alternativ könnte man natürlich an dieser Stelle bereits einen fixen Wert vorgeben. Der Startwinkel des ersten einzublendenden Objekts beträgt 0. Als Tempo für das Ausfahren der Unterpunkte legen wir 0.3 fest. Der Wert mag sehr niedrig erscheinen, doch werden wir später beim Testen sehen, dass er völlig ausreicht. Schließlich definieren wir einen Mindestabstand der Menüpunkt von ihrer Zielposition. Wird sie unterschritten, setzen wir die animierten Objekte direkt auf das gewünschte Ziel. 11. Ergänzen Sie das Skript um die Deklaration der init()-Funktion sowie deren Aufruf:  // –----------- functions –--------  function initMenue() {

 mcBehM._x = Stage.width/2;

 mcBehM._y = Stage.height/2;

 mcMM = mcBehM. attachMovie(„mcMain“, „main“, 1000);  nRadius = mcMM._width*1.5;

 for (var i:Number = 0; i
 mcSubs = mcBehM. attachMovie(„mcSub1“+i, „sub“+i, i);  mcSubs._x = mcMM._x;  mcSubs._y = mcMM._y;

467

 mcSubs.nZielX = Math. cos(nWinkel*(Math. PI/180))*nRadius;  mcSubs.nZielY = Math. sin(nWinkel*(Math. PI/180))*nRadius;  nWinkel += nDist; }

}

 // –---------- aufruf –------------  initMenue();

Zu Beginn der initMenue()-Funktion sorgen wir dafür, dass der leere Behälter für das Menü auf der Bühne zentriert wird. Sie können gerne testweise andere Werte verwenden bzw. später das Menü dort positionieren, wo es am besten mit den übrigen Elementen Ihrer Site harmoniert. Anschließend fügen wir per attachMovie() in diesen Behälter denjenigen MovieClip ein, den wir zuvor in der Bibliothek als Mittelpunkt definiert haben, hier also mcMain. Danach können wir den Radius des Menüs errechnen. Wir legen ihn in unserem Beispiel auf das anderthalbfache der Breite der im Mittelpunkt befindlichen Grafik fest. Auch hier können Sie natürlich mit eigenen Werten experimentieren, müssen aber beachten, dass die späteren Unterpunkte genügend Platz haben, um vollständig sichtbar zu sein. Mit der for-Schleife blenden wir alle Menüpunkte an der Position des Menüzentrums ein. In mcSubs speichern wir eine Referenz auf sie, um leichter darauf zugreifen zu können. Bei onRollOver sollen sie ausfahren und sich kreisförmig anordnen. Daher benötigen wir eine Zielposition, zu der sie sich hinbewegen sollen. Sie muss mit Hilfe von Winkelfunktionen ermittelt werden, die pro Punkt mit einem anderen Winkelwert arbeiten muss. Daher erhöhen wir den Startwinkel bei jedem Durchlauf jeweils um die bereits zuvor im Variablen-Block ermittelte Winkeldifferenz. Die Ergebnisse der Winkelfunktionen speichern wir in den einzelnen Menüpunkten zugeordneten Variablen, so dass wir sie bei Bedarf jederzeit abrufen können, ohne sie jedes Mal neu berechnen zu müssen (was allerdings problemlos möglich wäre, da es sich nicht um einen sehr rechenintensiven Prozess handelt). Zum Schluss rufen wir die init()-Funktion auf. Seien Sie nicht zu enttäuscht, wenn Ihnen bei der Ausführung nur die kreisförmige Grafik im Zentrum

468

Kapitel 30  Menü-Systeme

des Menüs entgegen grinst, während Sie die Menüpunkte schmerzlich vermissen. Diese haben sich bescheiden hinter dem Zentrum versteckt, denn die ihnen mit attachMovie() zugewiesene Tiefe ist niedriger als diejenige des MovieClips im Zentrum. Das können Sie leicht testen, indem Sie nach mcMM = mcBehM.attachMovie(…) den Alphawert von mcMM auf beispielsweise 20 herabsetzen: mcMM._alpha = 20;

Dann erkennen Sie die übrigen Menüpunkte. Dass sie anfangs verdeckt werden, ist gewollt, denn sie sollen ja erst erscheinen, wenn wir einen onRollOver über den Mittelpunkt des Menüs ausführen. 12. Fügen Sie innerhalb von initMenue() unmittelbar nach dem Ende der for-Schleife folgende Zeilen ein:  mcMM.onRollOver = function() {

 this.onEnterFrame = function() {

 for (var i:Number = 0; i
};

Da die Menüpunkte bei einem onRollOver über das Menüzentrum ausfahren sollen, müssen wir mcMM ein entsprechendes Ereignis zuweisen. Bei einem onRollOver über mcMM erhält dieser MovieClip ein onEnterFrame-Ereignis, das in einer Schleife alle Menüpunkte bewegt. Dabei speichern wir zunächst in mcSubs die benötigte Referenz, die sich zusammensetzt aus mcBehM, dem Behälter, in dem sich alle Menüpunkte befinden, sowie der Konkatenation von „sub“ und der Zählvariablen i. Anschließend führen wir die Funktion bewegung() aus. Sie erhält als Argumente die ermittelten Instanznamen sowie die Zielkoordinaten in x- und y-Richtung. Anstatt die konkreten Anweisungen bereits hier einzutragen, verwenden wir eine parametrisierte Funktion. Denn wenn die Menüpunkte wieder eingefahren werden, entspricht ihre Bewegung derjenigen des Ausfahrens, nur die Richtung ist umgekehrt. Das lässt sich leicht über eine parametrisierte Funktion erledigen, ohne dass wir Code doppelt schreiben müssen.

13. Erweitern Sie den Funktions-Block nach Ende der Deklaration von initMenue() um diese Zeilen:  function bewegung(pWer, pWohinX, pWohinY) {

 pWer.nDistX = pWohinX-pWer._x;  pWer.nDistY = pWohinY-pWer._y;

 pWer.nDistGesamt = Math. sqrt((pWer.nDistX * pWer.nDistX) + (pWer.nDistY * pWer.nDistY));  pWer._x += pWer.nDistX*nTempo;  pWer._y += pWer.nDistY*nTempo;  if (Math.abs(pWer. nDistGesamt)
}

Wenn Sie testen, werden die Menüpunkte nach onRollOver über das Zentrum ausfahren. Die aufgerufene Bewegungs-Funktion sieht auf den ersten Blick vielleicht kompliziert aus, doch ist sie im Grunde genommen recht simpel. Zunächst ermittelt sie die horizontale und die vertikale Entfernung zwischen dem Zielpunkt und dem zu bewegenden Menüpunkt. Daraus lässt sich mit Hilfe des Satzes des Pythagoras die Gesamtentfernung ermitteln. Sollte Ihnen diese Formel nicht mehr geläufig sein, finden Sie im Kapitel Trigonometrie eine ausführliche Erläuterung. Anschließend addieren wir einen Bruchteil der Entfernung jeweils zur aktuellen horizontalen und vertikalen Position hinzu, so dass faktisch eine Bewegung erfolgt. Genau genommen addieren wir jeweils ca. ein Drittel der Entfernung, indem wir die Entfernung mit dem Faktor 0.3 bzw. der Variablen nTempo multiplizieren. Sollte die Entfernungsberechnung einen negativen Wert ergeben, erfolgt hier eine Subtraktion. Wenn der vorzeichenunabhängige Wert der Entfernung kleiner als ein sehr niedrig angesetzter Grenzwert ist, setzen wir den Menüpunkt auf seine Zielkoordinaten, so dass eine weitere Bewegung überflüssig wird. Diesen Vorgang können Sie, wenn Sie die Bewegung genau betrachten, tatsächlich noch wahrnehmen, denn die Menüpunkte scheinen zum Schluss einen sehr kleinen Sprung zu machen. Sollte Sie das stören, können Sie nStopDif z. B. mit 0.5 oder einem noch kleineren Wert initialisieren. Um bei einem Rollover auf einen der ausgefahrenen Unterpunkte deren Unterpunkte anzeigen zu

30.1  Kreismenüs

können, benötigen wir einige weitere vorbereitende Variablen. 14. Erweitern Sie den Variablen-Block:  var nBreite:Number = 0;

 var sDateiTyp:String = „.swf“;  var aSubSub:Array = [];

 var aSubSubPress:Array = [[„sub1“, „sub2“, „sub3“, „sub4“], [„sub1“, „sub2“, „sub3“], [„sub1“, „sub2“, „sub3“, „sub4“, „sub5“], [„sub1“, „sub2“, „sub3“, „sub4“, „sub4“], [„sub1“, „sub2“, „sub3“], [„sub1“, „sub2“, „sub3“, „sub4“, „sub5“, „sub6“], [„sub1“, „sub2“, „sub3“, „sub4“]];

Da sich die Breite des gesamten Menüs durch Anzeigen weiterer Unterpunkte ändert, legen wir zur Aufnahme des neuen Werts eine Variable an, die solange 0 enthält, wie eben kein Untermenü sichtbar ist. Stellvertretend für irgendeine bei Mausklick auf die Menüpunkte zu erfolgende Aktion legen wir fest, dass eine externe Datei zu laden ist, deren Typ in einer Variablen gespeichert wird. Denkbar wäre natürlich auch, dass statt einer swf etwa eine Grafikdatei (gif, jpg oder png) aufgerufen wird. Um nicht mehr benötigte Untermenüs löschen zu können, initialisieren wir ein leeres Array. Ein weiteres Array wird eingerichtet, um die Exportnamen der MovieClips für die Untermenüs und damit gleichzeitig die Namen der zu ladenden externen Dateien aufzunehmen. Beachten Sie, dass wir aus Gründen der Vereinfachung an späterer Stelle für alle Unterpunkte jeweils denselben MovieClip einfügen (mcSub2), in einer realen Applikation jedoch tatsächlich die in dem erwähnten Array erfassten Objekte verwendet werden müssten. 15. Fügen Sie in initMenue() innerhalb der forSchleife unmittelbar vor dessen schließender Klammer ein:  mcSubs.onRollOver = function() {

 var nSubSubIndex:Number = Number((this._name).substr(3, 1));  var nDistSub:Number = 360/ aSubSubPress[nSubSubIndex].length;  var nWinkelSub:Number = 0;

 var nRadiusSub:Number = Math. ceil(this._width)//-10;

 for (var j:Number = 0; j
469

 mcSubSub = mcBehM. attachMovie(„mcSub2“, „subsub“+j, j+10);

 mcSubSub._x = Math. cos(nWinkelSub*(Math. PI/180))*nRadiusSub+this._x;  mcSubSub._y = Math. sin(nWinkelSub*(Math. PI/180))*nRadiusSub+this._y;  mcSubSub.sZiel = aSubSubPress[nSubSubIndex] [j]+sDateiTyp;  nWinkelSub += nDistSub;

 mcSubSub.onPress = function() {

 mcMM.onEnterFrame = function() {  for (var i:Number = 0; i
 mcSubs = mcBehM[„sub“+i];  bewegung(mcSubs, mcMM._x, mcMM._y); } };

 mcBehD.loadMovie(this.sZiel); }; }

 nBreite = Math.ceil(this._width);

};

Bei einem Test werden die Untermenüs der einzelnen Menüpunkte angezeigt, sobald über Letztere ein onRollOver erfolgt. Bei einem onRollOver müssen wir zunächst ermitteln, welche Elemente innerhalb des Arrays aSubSubPress zu dem aktivierten Menüpunkt gehören. Die betreffende Information extrahieren wir aus dem Instanznamen, in dem anfangs der Wert der Zählvariablen i beim Einblenden der entsprechenden Menüpunkte gespeichert wurde (dabei gehen wir stillschweigend von der Annahme aus, dass zum ersten eingeblendeten Menüpunkt auch der erste Eintrag im Array aSubSubPress gehört). Um die Unterpunkte kreisförmig anordnen zu können, werden berechnet:

• Der Winkelabstand zwischen den einzelnen Unter-

punkten, der abhängt von der Anzahl der anzuzeigenden Objekte. Je mehr Elemente das Array aSubSubPress an dem aus dem Instanznamen ermittelten Index enthält, desto kleiner ist dieser Wert.

470

Kapitel 30  Menü-Systeme

• Den Startwinkel für das erste anzuzeigende Ele-

ment, der einfach auf 0 gesetzt wird. Das könnte man übrigens auch ganz am Skriptanfang im Variablen-Block definieren. • Den Abstand der Elemente vom aktivierten Menüpunkt, der mit dessen Breite gleich gesetzt wird. Hier können Sie gerne mit alternativen Werten experimentieren. Die nachfolgende Schleife fügt die Unterpunkte nach dem gleichen Prinzip ein wie die vorher angezeigten übergeordneten Menüpunkte, so dass eine weiter gehende Erläuterung nicht notwendig ist. Da die Unterpunkte bei Mausklick eine Datei laden sollen, speichern wir in der Schleife jeweils in einer Variablen das zu ladende Ziel, zusammengesetzt aus dem Element an der aktuellen Array-Position sowie der anfangs definierten Dateiendung. Anschließend erhält jeder Unterpunkt ein onPress-Ereignis, das:

• Die Funktion bewegung() aufruft, um alle über-

Gleich an mehreren Stellen müssen die Menüpunkte der untersten Hierarchieebene gelöscht werden:

• Bei

einem onRollOver über einen beliebigen Menüpunkt, um zu verhindern, dass die Unterpunkte eines vorher aktivierten Menüpunkts partiell weiterhin angezeigt werden. • Bei Klick auf einen der Unterpunkte, die dann eine externe Datei laden. In dem Fall soll das komplette Menü einfahren und somit auch alle Unterpunkte verschwinden. Es gibt noch einen dritten Fall, den wir weiter unten behandeln müssen. 19. Erweitern Sie den Funktions-Block um:  function subsubDel() {

 if (aSubSub.length>0) {

 for (var e in aSubSub) {

 aSubSub[e].removeMovieClip();

geordneten Menüpunkte wieder einzufahren. • In einem noch zu definierenden, hier nur stellvertretend aufgeführten MovieClip mcBehD die in sZiel gespeicherte Datei lädt.

}

In der letzten Zeile sorgen wir dafür, dass der später bei einem onRollOut relevante Bereich, in dem das Menü noch angezeigt werden soll, korrekt berechnet wird, denn er vergrößert sich ja durch das Einblenden der Unterpunkte. Wenn Sie alle Menüpunkte testen, werden Sie feststellen, dass manchmal einige Unterpunkte ausgesprochene Hartnäckigkeit beweisen, indem sie einfach auf der Bühne liegen bleiben, sobald sie einmal angezeigt wurden.



16. Fügen Sie innerhalb der vorherigen for-Schleife nach der Änderung von nWinkelSub ein:

aSubSub.push(mcSubSub);

Wir speichern eine Referenz auf den jeweiligen Unterpunkt in einem Array, so dass wir später leichter auf ihn zugreifen können. 17. Fügen Sie unmittelbar nach der Zuweisung des vorherigen onRollOver ein:

subsubDel();

18. Fügen Sie innerhalb von mcSubSub.onPress unmittelbar vor dessen schließender Klammer ein:

subsubDel();

 aSubSub = []; }

 nBreite = 0; }

Da wir in dem Array aSubSub die gerade offenen Unterpunkte erfasst haben, ist es leicht, sie zu entfernen. Das geschieht mit Hilfe einer Schleife, die jedes Element im fraglichen Array per removeMovieClip()Methode entfernt und am Ende das betreffende Array leert. Da sich durch das Löschen die Gesamtbreite des Menüs reduziert, müssen wir die Variable nBreite auf 0 zurück setzen, sonst reagiert das Menü nicht mehr korrekt auf die Position der Maus und fährt gegebenenfalls zu spät ein. Nun fehlt noch das Einfahren der Menüpunkte, wenn kein Unterpunkt aktiviert wird und der Anwender die Maus komplett aus dem vom Menü bedeckten Bereich herauszieht. 20. Fügen Sie innerhalb von initMenue() unmittelbar vor dessen schließender Klammer ein:  mcMM.onRollOut = function() {

 this.onMouseMove = function() {  var nDistX:Number = this._ xmouse-this._x;  var nDistY:Number = this._ ymouse-this._y;

30.2  Code

 var nDistGesamt:Number = Math.sq rt((nDistX*nDistX)+(nDistY*nDist Y));  if (nDistGesamt>this._parent._ width/2+nBreite) {  subsubDel();

 this.onEnterFrame = function() {  for (var i:Number = 0; i
 mcSubs = mcBehM[„sub“+i];

 bewegung(mcSubs, mcMM._x, mcMM._y); } };

 delete this.onMouseMove; } };

471

 mcMM.onRelease = mcMM. onReleaseOutside=function () {  this._parent.stopDrag();

};

Bei einem Klick auf die Grafik in der Menümitte wird der übergeordnete Behälter, der alle zum Menü gehörenden Elemente enthält, ziehbar, während ein Loslassen der Maus dieses Verhalten aufhebt. Das gilt unabhängig davon, ob irgendwelche Menüpunkte oder Unterpunkte angezeigt werden oder nicht. Bei diesem Menü gehen wir davon aus, dass jeder Unterpunkt seinerseits weitere Unterpunkte enthält. Daher reicht es aus, wenn wir vereinfachend im Array aSubSubPress nur die unterste Ebene der Navigations-Hierarchie erfassen. Andernfalls müssten wir so vorgehen wie im Workshop zum klassischen DropDown-Menü weiter unten gezeigt, wo die komplette Navigationsstruktur in einem Array abgebildet wird.

};

Da unser Menü kreisförmig aufgebaut wird und sich dessen Ausdehnung abhängig von den aktivierten Unterpunkten ändert, muss nach einem onRollOut-Ereignis solange die Entfernung zur aktuellen Mausposition kontrolliert werden, bis komplett alle Menüpunkte eingefahren sind (oder bis ein erneuter onRollOver eingetreten ist, je nachdem, was zuerst geschieht). Diese Aufgabe übernimmt ein onMouseMove-Ereignis, in dem permanent der betreffende Abstand ermittelt und mit einem Wert abgeglichen wird, der die Breite des Menüs, seiner Menüpunkte sowie gegebenenfalls der angezeigten Unterpunkte abbildet. Erst dann, wenn die Mausentfernung diesen Wert überschreitet, wissen wir, dass sie sich jenseits eines potentiellen Unterpunktes befindet. Dann werden alle Unterpunkte gelöscht (das ist der dritte vorhin angesprochene Fall), alle übrigen Menüpunkte fahren mit Hilfe der Funktion bewegung() ein und das nun überflüssige onMouseMove wird gelöscht. Damit das Menü nicht ständig im Vordergrund liegt und dort eventuell wichtigen Content verdeckt, müssen wir es ziehbar machen.

30.2 Code

21. Fügen Sie in initMenue() unmittelbar vor dessen schließender Klammer ein:

var sDateiTyp:String = „.swf“;

 mcMM.onPress = function() {

var aSubSubPress:Array = [[„sub1“, „sub2“, „sub3“, „sub4“], [„sub1“, „sub2“, „sub3“], [„sub1“, „sub2“, „sub3“, „sub4“, „sub5“], [„sub1“,

 this._parent.startDrag();

};

Zur Kontrolle der gesamte Code des am Anfang des vorhergehenden Abschnitts erwähnten Beispiels: // –------------- vars ––––-----------var mcBehM:MovieClip = this.createEmpty MovieClip(„behaelterMenue“, 1); var mcBehD:MovieClip = this.createEmpty MovieClip(„behaelterDatei“, 2); var mcMM:MovieClip;

var mcSubs:MovieClip;

var mcSubSub:MovieClip; var nSubs:Number = 7;

var nDist:Number = 360/nSubs; var nRadius:Number;

var nWinkel:Number = 0;

var nTempo:Number = 0.3;

var nStopDif:Number = 0.5; var nBreite:Number = 0; var aSubSub:Array = [];

472

„sub2“, „sub3“, „sub4“, „sub4“], [„sub1“, „sub2“, „sub3“], [„sub1“, „sub2“, „sub3“, „sub4“, „sub5“, „sub6“], [„sub1“, „sub2“, „sub3“, „sub4“]];

// –------------ functions –---------function initMenue() {

 mcBehM._x = Stage.width/2;

 mcBehM._y = Stage.height/2;

 mcMM = mcBehM.attachMovie(„mcMain“, „main“, 1000);  nRadius = mcMM._width*1.5;

 for (var i:Number = 0; i
Kapitel 30  Menü-Systeme

 mcSubSub.sZiel = aSubSubPress[nSubSubIndex] [j]+sDateiTyp;  aSubSub.push(mcSubSub);  nWinkelSub += nDistSub;

 mcSubSub.onPress = function() {  mcMM.onEnterFrame = function() {  for (var i:Number = 0; i
 mcSubs = mcBehM[„sub“+i];  bewegung(mcSubs, mcMM._x, mcMM._y); } };

 mcBehD.loadMovie(this.sZiel);

 mcSubs._x = mcMM._x;

 subsubDel();

 mcSubs.nZielX = Math. cos(nWinkel*(Math.PI/180))*nRadius;

}

 mcSubs._y = mcMM._y;

 mcSubs.nZielY = Math. sin(nWinkel*(Math.PI/180))*nRadius;  nWinkel += nDist;

 mcSubs.onRollOver = function() {  subsubDel();

 nBreite = Math.ceil(this._width);  var nSubSubIndex:Number = Number((this._name).substr(3, 1));  var nDistSub:Number = 360/ aSubSubPress[nSubSubIndex]. length;  var nWinkelSub:Number = 0;

 var nRadiusSub:Number = Math. ceil(this._width);  for (var j:Number = 0; j
 mcSubSub._x = Math. cos(nWinkelSub*(Math. PI/180))*nRadiusSub+this._x;  mcSubSub._y = Math. sin(nWinkelSub*(Math. PI/180))*nRadiusSub+this._y;

};

 mcSubs.enabled = false; }; }

 mcMM.onRollOver = function() {

 this.onEnterFrame = function() {

 for (var i:Number = 0; i
 bewegung(mcSubs, mcSubs.nZielX, mcSubs.nZielY); } }; };

 mcMM.onRollOut = function() {

 this.onMouseMove = function() {

 var nDistX:Number = this._xmousethis._x;  var nDistY:Number = this._ymousethis._y;  var nDistGesamt:Number = Math.sq rt((nDistX*nDistX)+(nDistY*nDist Y));  if (nDistGesamt>this._parent._ width/2+nBreite) {  subsubDel();

 this.onEnterFrame = function() {

30.3  Elliptisches Menü

 for (var i:Number = 0; i
 mcSubs = mcBehM[„sub“+i];

 bewegung(mcSubs, mcMM._x, mcMM._y); } };

 delete this.onMouseMove; } }; };

 mcMM.onPress = function() {

 this._parent.startDrag(); };

 mcMM.onRelease = mcMM. onReleaseOutside=function () {  this._parent.stopDrag(); }; }

function subsubDel() {

 if (aSubSub.length>0) {

 for (var e in aSubSub) {

 aSubSub[e].removeMovieClip(); }

 aSubSub = []; }

 nBreite = 0; }

function bewegung(pWer, pWohinX, pWohinY) {  pWer.enabled = false;

 pWer.nDistX = pWohinX-pWer._x;  pWer.nDistY = pWohinY-pWer._y;

 pWer.nDistGesamt = Math.sqrt((pWer. nDistX*pWer.nDistX)+(pWer. nDistY*pWer.nDistY));

473

}

// –----–––------ aufruf –------------initMenue();

30.3 Elliptisches Menü Eine Unterart des kreisförmigen Menüs stellt das elliptische Menü dar. Dabei fahren die Unterpunkte nicht aus dem Mittelpunkt heraus, sondern sind von Anfang an sichtbar wie in der ersten oben vorgestellten Form eines kreisförmigen Menüs. Wenn wir sie zusätzlich bewegen, erhalten wir schnell einen 3D-Eindruck, so, als wären die Objekte in die Tiefe des Raumes verteilt. Da ein derartiges Menü insgesamt weniger Raum benötigt, als ein vollkommen kreisförmiges Menü, kann es für verschiedene Zwecke eingesetzt werden. Anstatt eines Navigations-Menüs kann man es etwa für eine Galerie verwenden. Freude und Wermutstropfen zugleich: seit Flash CS 4 gibt es zwar die Möglichkeit, einem MovieClip einen z-Index zuzuweisen, was ihm automatisch eine räumliche Tiefe verleiht, doch benötigen wir dazu AS3, um eine Interaktion definieren zu können (kleiner Hinweis am Rande: der von Flash zur Verfügung gestellte z-Index ist allerdings fehlerhaft, so dass sich überlappende Clips in bestimmten Situationen nicht korrekt dargestellt werden). Im Fall von AS2 müssen wir den gewünschten Effekt quasi selbst programmieren. Unser Menü besteht aus ellipsenförmig eingefügten Menüpunkten, die sich abhängig von der Mausposition bewegen. Bei onRollOver über einen der Menüpunkte stoppt die Animation sofort. Eine Alternative wäre, das Anhalten vom Grad der Skalierung der Buttons abhängig zu machen. Ist sie kleiner als ein bestimmter Grenzwert, bleiben onRollOver und Mausklick ohne Reaktion. Wir wollen hier jedoch die

 pWer._x += pWer.nDistX*nTempo;  pWer._y += pWer.nDistY*nTempo;  if (Math.abs(pWer. nDistGesamt)
 pWer.enabled = true; }

Abbildung 143:  Aufbau des elliptischen Menüs

474

einfachere Version realisieren. Einen visuellen Eindruck vermittelt Abbildung 143. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcBtn (und einem gleichlautenden Exportnamen), um unsere Schaltflächen aufzunehmen. 3. Benennen Sie dort die bestehende Ebene um in bgd. 4. Fügen Sie eine weitere Ebene namens txt ein. 5. Auf bgd zeichnen Sie horizontal und vertikal mittig ein Rechteck (100 * 80) mit einem leichten orangenen Farbverlauf und einem weißen Rand. 6. Auf txt erstellen Sie mittig ein dynamisches Textfeld (Verdana, 16 pt, schwarz, zentriert, nicht auswählbar, einzeilig) und benennen es txt. Für die Schaltflächen gibt es wie immer verschiedene Möglichkeiten: Sie können statt der dynamischen Erzeugung wie in vorliegendem Beispiel mit externen Grafiken arbeiten. Damit sind die Vorbereitungen abgeschlossen. Im nachfolgenden müssen wir zunächst ein ellipsenförmiges Menü einblenden. Wie oben erwähnt orientieren wir uns dabei an den bereits im Kapitel Trigonometrie besprochenen Beispielen. Dort finden Sie auch ausführlichere Erläuterungen, falls Ihnen einer der hier geschilderten Schritte nicht ganz klar sein sollte. 7. Weisen Sie in der Hauptzeitleiste der Ebene actions folgendes Bildskript zu:  //------------- vars –--------------  var mMenue:MovieClip = this. attachMovie(„mcZentrum“, „kreismenue“, 1);  var mBtn:MovieClip;

 var nWinkel:Number = 0;

 var nRadiusX:Number = 250;  var nRadiusY:Number = 80;  var nAnzahl:Number = 8;

 var nWinkelDif:Number = 360/nAnzahl;

Wir initialisieren zunächst eine Reihe von Variablen, um das Menü aufbauen zu können. In mMenue speichern wir eine Referenz auf das gesamte Menü. Vorbereitend legen wir eine weitere Variable mBtn zur Aufnahme von MovieClips an. Dort werden später die einzufügenden Buttons referenziert. Da die Positionierung der Schaltflächen mit Winkelfunktionen arbeitet,

Kapitel 30  Menü-Systeme

legen wir in nWinkel einen Startwinkel von 0 fest. Anders als ein Kreis zeichnet sich eine Ellipse durch zwei verschiedene Radien aus. Wir definieren Sie in nRadiusX für die horizontale und in nRadiusY für die vertikale Ausrichtung. Die Anzahl der benötigten Menüpunkte wird in nAnzahl festgehalten. Dann ergibt sich die Winkeldifferenz zwischen den einzelnen Schaltflächen, also der Winkelbetrag, um den eine Schaltfläche gegenüber der vorhergehenden versetzt angezeigt wird, aus der Division einer Volldrehung durch die Anzahl. 8. Erweitern Sie den Code um folgende Zeilen:  //------------- functions –---------  function init() {

 mMenue = this.createEmptyMovieClip( „contMenue“,1);  mMenue._x = Stage.width/2;

 mMenue._y = Stage.height/2;

 for (var i:Number = 0; i
 mBtn = mMenue. attachMovie(„mcBtn“, „btn“+i, i);  mBtn._x = Math.cos(nWinkel*(Math. PI/180))*nRadiusX;  mBtn._y = Math.sin(nWinkel*(Math. PI/180))*nRadiusY;  nWinkel += nWinkelDif; } }

 //------------ aufruf –-------------  init();

Beim Testen müsste sich das Bild ergeben, das Abbildung 144 zeigt. Wir erstellen eine init()-Funktion, die das Menü auf der Bühne einfügt, sobald sie aufgerufen wird. Als Erstes erzeugen wir in dieser Funktion einen neuen leeren MovieClip, den wir beispielhaft auf die Bühnenmitte setzen. Die Bühnenmitte ergibt sich durch eine Halbierung der Bühnenbreite und Bühnenhöhe. Sie können natürlich eine Position wählen, die besser zum Aufbau Ihrer jeweiligen Anwendung passt. Anschließend erfolgt das Einfügen der Buttons und das Ermitteln ihrer Position auf einer Ellipsenbahn. Diese Berechnung greift wie im Fall der Kreisberechnung auf die Kosinus- und Sinus-Funktionen der Math-Klasse zu. Um eine Ellipse zu erhalten, müssen

30.3  Elliptisches Menü

475

 mBtn.txt.text = aBtns[i];

Abbildung 144:  Anzeigen der Menüelemente

wir allerdings der Sinus-Funktion den vertikalen und der Kosinus-Funktion den horizontalen Radius übergeben. Da Flash bekanntermaßen mit Bogenmaß statt Grad arbeitet, erfolgt bei der Winkelberechnung durch den Ausdruck Math.PI/180 gleichzeitig die Umrechnung der Maßeinheit. Um dafür zu sorgen, dass jeder Button eine neue Position erhält, vergrößern wir sukzessive den übergeben Winkel durch Addition der im Variablen-Block ermittelten Winkeldifferenz. Zugegebenermaßen erweist sich der Informationsgehalt unsere Menüpunkte als arg eingeschränkt. Daher benötigen wir eine Buttonbeschriftung. 9. Erweitern Sie den Variablen-Block vor der Deklaration von nAnzahl um folgende Zeile: var aBtns:Array = [„Home“, „Produkte“, „Service“, „Portfolio“, „Galerie“, „Shop“, „Kontakt“, „Impressum“];

Wir legen in dem Array aBtns die Beschriftungen der einzelnen Buttons fest. Damit lassen sie sich leicht ändern. Zudem können wir das Array im Bedarfsfall schnell erweitern, um weitere Buttons aufzunehmen. 10. Ändern Sie die Variableninitialisierung von nAnzahl (Fettdruck):

var nAnzahl:Number = aBtns.length;

Wenn in aBtns die einzelnen Menüpunkte erfasst werden, dann entspricht die Länge dieses Arrays notwendigerweise der Anzahl der verwendeten Buttons. Daher ist es sinnvoller, den zuvor zugewiesenen konkreten Wert 8 durch die Eigenschaft aBtns.length zu ersetzen. So führt eine Änderung der Gesamtzahl, die ja in aBtns vorgenommen würde, automatisch zur Korrektur der variablen nAnzahl. 11. Fügen Sie innerhalb der for-Schleife unmittelbar nach der Berechnung von mBtn._y folgende Zeilen ein:  mBtn.txt.autoSize = „center“;

Wenn Sie testen, zeigen die einzelnen Elemente die im Array vorgegebene Beschriftung. Jeder Button enthält ein dynamisches Textfeld, in das wir den zugehörigen Menüpunkt einfügen. Da die Beschriftungen verschieden viele Zeichen enthalten – „Home“, die kürzeste, umfasst 4, „Impressum“, die längste, 9 Zeichen –, werden die Textfelder verschieden groß sein müssen. Dazu verwenden wir ihre Eigenschaft autoSize, die wir auf „center“ setzen, so dass sie gleichmäßig nach rechts und links, gesehen vom Registrierungspunkt des Buttons aus, skaliert werden. Der Text, den wir zuweisen, entspricht der durch die Zählvariable ermittelten Indexposition in aBtns. Wenn wir beispielsweise den ersten Menüpunkt einfügen, beträgt i 0. Mit diesem Wert können wir zugleich das erste Element und damit den ersten Text in aBtns auslesen. Jetzt fehlt noch die Bewegung des Menüs. 12. Fügen Sie im Variablen-Block folgende Zeile ein:  var nTempo:Number = 0.01;

Wir benötigen später einen sehr niedrigen Wert, den wir als Multiplikator für die Errechnung der Drehgeschwindigkeit verwenden. Der hier verwendete Wert von 0.01 ist nur ein Beispiel; Sie können selbstverständlich mit anderen Zahlen experimentieren. 13. Ergänzen Sie die for-Schleife unmittelbar nach der Skalierung der Hintergrundfläche der Menüpunkte um folgende Zeile:  mBtn.winkel = nWinkel;

Für die Bewegungsberechnung speichern wir in einer pro Menüpunkt eingerichteten Variablen den Winkel, den dieser Punkt beim erstmaligen Einblenden zugewiesen bekam. 14. Fügen Sie direkt am Anfang der init()-Funktion folgende Variablendeklarationen ein:  var nDifX:Number;  var nCosX:Number;  var nCosY:Number;

Wir benötigen für die Berechnung der neuen Positionen aller Menüpunkte einige Variablen, die wir an dieser Stelle deklarieren. Konkrete Werte enthalten sie noch nicht, da diese erst später in einem onEnterFrame-Ereignis ermittelt werden.

476

Kapitel 30  Menü-Systeme

15. Fügen Sie innerhalb der init()-Funktion nach Ende der for-Schleife folgende Zeilen ein:  mMenue.onEnterFrame = function() {

 nDifX = (this._x-_xmouse)*nTempo;

 for (var i:Number = 0; i
 nCosX = Math.cos(mBtn. winkel*(Math.PI/180))*nRadiusX;  nCosY = Math.sin(mBtn. winkel*(Math.PI/180))*nRadiusY;  mBtn._x = nCosX;  mBtn._y = nCosY; }

};

Da die Bewegung der Menüpunkte andauernd erfolgen soll, benötigen wir ein permanentes Ereignis. Dazu verwenden wir ein onEnterFrame, das wir demjenigen MovieClip zuweisen, der alle Menüpunkte aufnimmt, also mMenue. Die Bewegung können wir auf verschiedene Arten gestalten. Denkbar wäre z. B. eine andauernde, gleichmäßige Bewegung in eine einzige Richtung, entweder im oder entgegen dem Uhrzeigersinn. Attraktiver scheint uns jedoch eine Bewegung, die sich an der Mausposition orientiert. Sowohl die Drehgeschwindigkeit wie auch die Drehrichtung sind dabei von der Maus abhängig. Je größer die Entfernung zur Maus ist, desto schneller dreht sich das Menü. Natürlich muss man Acht geben, dass der ermittelte Wert für das Tempo selbst bei größtmöglicher Entfernung nicht so hoch wird, dass sich das Menü mit rasender Geschwindigkeit dreht. Es wäre bei einem Bedienelement zweifelsohne kontraproduktiv, wenn man dessen Beschriftung nicht mehr lesen könnte und sich der Versuch, es mit der Maus anzuklicken, in ein Glücksspiel ausarten würde. Dementsprechend ermitteln wir permanent die Entfernung zwischen Maus und Menümittelpunkt, der, da der Registrierungspunkt mittig ausgerichtet wurde, identisch ist mit der x- und y-Position von mMenue. Anschließend multiplizieren wir ihn mit dem zuvor festgelegten Multiplikator. Wenn der Abstand beispielsweise 200 Pixel beträgt, ergibt sich nach der Multiplikation ein Wert von gerade mal 2. Die Berechnung wurde so formuliert, dass sich sowohl positive wie negative Werte ergeben können. Diese verwenden

wir dann einfach, um die Drehrichtung automatisch festzulegen. Nach der Berechnung werden alle Menüpunkte einzeln angesprochen. Der Einfachheit halber verwenden wir dazu wieder die variable mBtn, in der wir sukzessive eine Referenz auf jeden Menüpunkt speichern. Die eigentliche Drehung erfolgt durch eine Änderung des Drehwinkels. Wir greifen auf den für jedes Objekt gespeicherten Drehwinkel zu und ändern ihn um den Wert, den wir unmittelbar vor der Schleife errechnet haben. War der Wert positiv, erhöht sich der Drehwinkel, bei einer negativen Zahl verringert er sich. Eine positive Zahl resultiert in einer Drehung im Uhrzeigersinn, eine negative entgegen dem Uhrzeigersinn. Anschließend ermitteln wir wie beim erstmaligen Einblenden mit Hilfe der Winkelfunktionen eine neue x- und eine neue y-Position. Durch die Drehung entsteht schon ein leichter 3D-Effekt, den man noch vergrößern kann, wenn die Menüpunkte skaliert werden. 16. Erweitern Sie den Variablen-Block um folgende Initialisierung:  var nSkalFaktor:Number = 100/nRadiusY;

17. Fügen Sie im onEnterFrame-Ereignis unmittelbar vor der schließenden Klammer der forSchleife folgende Zeile ein:  mBtn._xscale = Math. round(nCosY*nSkalFaktor);

Um den Eindruck zu erwecken, die Menüpunkte würden sich tatsächlich drehen, stauchen wir sie in x-Richtung und spiegeln sie, sobald sie sich im Hintergrund befinden. Hier besteht die Herausforderung darin, einen permanent sich ändernden Wert zu finden, der ganz bestimmte Eigenschaften aufweist. Die konkrete Berechnung lässt sich am besten verstehen, wenn wir uns die Scheitelpunkte der Animation des drehenden Menüs anschauen, wie in Abbildung  145 gezeigt. Überlegen wir zunächst, welche Skalierungswerte wir uns wünschen. In den vertikalen Scheitelpunkten der Animation (in Abbildung  145 die Punkte 1 und 3) sollen die Menüpunkte jeweils in voller Größe erstrahlen. Dabei möchten wir, dass die Punkte, wenn sie sich im Vordergrund befinden (3), korrekt dargestellt werden, während sie im Hintergrund (1) horizontal gespiegelt werden, so als würden wir sie von

30.3  Elliptisches Menü

477 Abbildung 145:  Scheitelpunkte der Animation

der Rückseite aus betrachten. Alternativ könnte man hier auch den betreffenden Text oder das von Ihnen gewählte Motiv komplett unsichtbar schalten bzw. per reduzierter Deckkraft abdimmen. In den beiden horizontalen Scheitelpunkten (2 und 4) sollen sie möglichst klein skaliert und anschließend gespiegelt werden. Wir möchten nur eine Skalierung in horizontaler Richtung erhalten. Am einfachsten wäre eine Lösung, die sich irgendwie direkt aus den Winkelfunktionen ergeben würde. Schließlich legt sie fest, ob ein Element im Vordergrund oder im Hintergrund zu sehen ist. Dabei benötigen wir Werte, die für diejenigen Elemente, die sich oberhalb des Menüzentrums befinden, kleiner sind als für diejenigen unterhalb der Mitte. Genau solche Werte erhalten wir durch nCosY, denn für die bereits berechneten y-Positionen gilt ja die gleiche Anforderung. Doch wie können wir bei wechselnden Radien dafür sorgen, dass der höchste ermittelte Wert nie 100 übersteigt? Andernfalls nämlich würden wir in Punkt 3 den Button über seine ursprüngliche Größe hinaus skalieren. Da der größte vertikale Abstand identisch ist mit nRadiusY, müssen wir lediglich diesen Wert mit den gewünschten maximalen 100  Prozent verrechnen, so dass der höchste y-Wert automatisch mit 100 gleich gesetzt wird. Da wir bei unseren Berechnungen Fließkommawerte erhalten, vereinfachen wir das Ergebnis durch ein Runden. Um vernünftig bedienbar zu sein, muss eine Möglichkeit bestehen, die Drehung zu stoppen. 18. Erweitern Sie den Variablen-Block um folgende Initialisierung:  var bAktiv:Boolean = false;

Dazu verwenden wir eine Variable, die als Boolschen Wert speichert, ob ein Button per onRollOver aktiviert wurde oder der nicht. Da das anfangs nicht der Fall ist, speichern wir zunächst den Wert false. 19. Fügen Sie innerhalb der init()-Funktion in der for-Schleife nach der Initialisierung von mBtn. winkel folgende Zeilen ein:  mBtn.onRollOver = function() {  bAktiv = true;

};

 mBtn.onRollOut = function() {  bAktiv = false;

};

Diese Zeilen dürften selbsterklärend sein: Wenn ein onRollOver über ein Menüpunkt stattfindet, setzen wir die Variable bAktiv auf true, bei einem onRollOut wieder auf false. 20. Fügen Sie innerhalb des mMenue.onEnterFrame folgende Zeilen ein (Fettdruck):  if (!bAktiv) {

 //hier folgt die Entfernungsberechnung  //anschließend die for-Schleife

}

Die beiden Kommentare stehen stellvertretend für den Code, den Sie bereits in das onEnterFrame geschrieben haben. Die gesamte Berechnung der Drehgeschwindigkeit wird nun abhängig von der Variablen bAktiv gemacht. Nur wenn sie den Wert false enthält, erfolgt eine Drehung. Da das anfangs der Fall ist, erfolgt

478

Kapitel 30  Menü-Systeme

zunächst eine Drehung, bis wir mit der Maus einen onRollOver über einen der Menüpunkte ausführen. Dann setzen wir bAktiv auf true und Flash führt die für eine Bewegung notwendigen Berechnungen nicht mehr aus. Eine Aktivierung der Buttons, beispielsweise um eine neue Seite aufzurufen, gestaltet sich einfach. 21. Fügen Sie innerhalb der init()-Funktion in der for-Schleife nach der Deklaration des onRollOut-Ereignisses folgende Zeilen ein:  mBtn.onPress = function() {  trace(„hallo!“);

};

Wir weisen jedem Button ein onPress-Ereignis zu. Stellvertretend für Ihren Befehl, der in Ihrer spezifischen Anwendung Sinn macht, lassen wir uns hier bei Mausklick eine einfache Meldung ausgeben. Alle zugewiesenen Ereignisse werden unabhängig von Position und Größe der Buttons ausgeführt. Das mag ein unerwünschtes Verhalten sein, denn es sieht merkwürdig aus, wenn wir einen Button aktivieren können, der uns galant seinen Rücken zudreht. Wir können die Ereignisse daher von einer Bedingung abhängig machen. Stellvertretend wählen wir hier das onPress-Ereignis aus. 22. Erweitern Sie den Variablen-Block:  var nAktivGroesse:Number = 20;

23. Erweitern Sie das onPress-Ereignis wie folgt (Fettdruck):  mBtn.onPress = function() {

if (this._xscale>nAktivGroesse) {  trace(„hallo“);

if(Math.abs(this._ xscale)>nAktivGroesse){

Durch Math.abs() erhalten sie einen vorzeichenunabhängigen Wert, so dass auch der gespiegelte Menüpunkt aktivierbar ist. Denn seine –100 % werden beim Auslesen in 100 % umgewandelt. Bedenken Sie, dass wir aus Gründen der Vereinfachung darauf verzichtet haben, die Tiefe der Menüpunkte während der Bewegung dynamisch anzupassen. Daher müssen Sie bei ihrer Anordnung darauf achten, dass sie sich nicht überlappen (was bei einem derartigen Menü ohnehin störend wirken würde). Wer dennoch eine dynamische Berechnung der Tiefen wünscht, um den 3D-Effekt zu verstärken, muss einige kleinere Änderungen vornehmen. 24. Ändern Sie die verwendeten Grafiken, so dass sie mehr Platz benötigen. Für einen schnellen Test können Sie in mcBtn eine neue Ebene mit einem simplen Rechteck (120 × 90, Farbe beliebig, Rand 1 px schwarz) mittig einfügen. 25. Erweitern Sie das Array aBtns um vier Einträge. Der Einfachheit halber duplizieren Sie bereits vorliegende Einträge. Wenn Sie testen, werden sich die einzelnen Elemente überdecken, wobei die hinteren leider zum Teil vor den vorderen liegen. Auch horizontal finden unpassende Überlappungen statt. Dies liegt daran, dass wir alle Punkte im Uhrzeigersinn mit aufsteigenden Tiefenwerten einblenden und im Laufe der Animation keine Anpassung stattfindet. Benötigt werden:

• oberhalb

der Mitte kleinere Tiefen als unterhalb der Mitte; • im horizontalen Scheitelpunkt jeweils höhere Tiefen als zu den Rändern hin

}

26. Fügen Sie im onEnterFrame-Ereignis unmittelbar nach der Berechnung von nDifX ein:

Der Befehlsblock innerhalb des onPress-Ereignisses wird nur dann ausgeführt, wenn die horizontale Skalierung des aktivierten Menüpunkts mindestens 20 % beträgt. Damit sind sowohl Buttons in der Nähe der horizontalen Scheitelpunkte wie auch gespiegelte Buttons nicht mehr anklickbar. Obwohl der gespiegelte Button in voller Größe angezeigt wird, beträgt seine _xscale-Eigenschaft –100 und ist somit kleiner als der angegebene Grenzwert. Wollten Sie dagegen nur an den horizontalen Scheitelpunkten einen Mausklick unterbinden, müsste die Bedingung lauten:

 var nSwap:Number;



};

27. Fügen Sie im onEnterFrame-Ereignis unmittelbar nach der Berechnung von mBtn._xscale ein:  nSwap = nCosY*10-mMenue._x;  mBtn.swapDepths(nSwap);

28. Im Variablen-Block ändern Sie die Initialisierung von nRadiusY (Fettdruck):  var nRadiusY:Number = 50;

30.4  Code

Wir legen eine Variable fest, die während des onEnterFrame-Ereignisses permanent mit neuen Werten gefüllt wird. Anschließend setzen wir die Tiefe jedes einzelnen Elements auf diesen Wert. Damit wir überhaupt einen Effekt erkennen können, reduzieren wir den vertikalen Radius auf 50. Die Berechnung der Tiefen orientiert sich an der Variablen nCosY, da sie ja bereits dafür sorgt, dass die Werte oberhalb der Menümitte niedriger sind als diejenigen unterhalb der Mitte. Um bei der weiteren Berechnung keine doppelten Werte zu erhalten – das wäre fatal, da dann einzelne Elemente gelöscht würden  –, multiplizieren wir die Variable mit 10. Das würde schon ausreichen, um vertikal einen räumlichen Eindruck durch wechselnde Tiefen zu erzeugen. Allerdings stimmt die horizontale Überlappung noch nicht. Sie wird hergestellt, indem wir vom berechneten Wert die Entfernung zur Mitte berücksichtigen: je geringer die Entfernung, desto geringer der Wert, den wir von der genannten Variable reduzieren. Das bedeutet, dass der Tiefenwert für Elemente in der Nähe der Mitte höher ist als für weiter entfernte Elemente. Ausgehend von dieser Übung könnte man ein grafisches Element in der Mitte des Menüs einfügen, das es erlaubt, alles zu verschieben. Oder es wäre denkbar, das Menü mit einer Spiegelung auf dem Boden zu versehen, um den räumlichen Effekt noch zu verstärken. Neben der horizontalen Skalierung könnte man eine vertikale berechnen und gleichzeitig die Deckkraft an die vertikale Position binden.

479

var bAktiv:Boolean = false;

var nAktivGroesse:Number = 20;

//----------- functions –-------------function init() {

 var nDifX:Number;  var nCosX:Number;  var nCosY:Number;

 mMenue = this.createEmptyMovieClip („contMenue“,1);  mMenue._x = Stage.width/2;

 mMenue._y = Stage.height/2;

 for (var i:Number = 0; i
 mBtn = mMenue.attachMovie(„mcBtn“, „btn“+i, i);  mBtn._x = Math.cos(nWinkel*(Math. PI/180))*nRadiusX;  mBtn._y = Math.sin(nWinkel*(Math. PI/180))*nRadiusY;  mBtn.txt.autoSize = „center“;  mBtn.txt.text = aBtns[i];  nWinkel += nWinkelDif;

 mBtn.onRollOver = function() {  bAktiv = true; };

 mBtn.onRollOut = function() {  bAktiv = false; };

30.4 Code //----------––– vars –--------------var mMenue:MovieClip; var mBtn:MovieClip;

var nWinkel:Number = 0;

var nRadiusX:Number = 250; var nRadiusY:Number = 50;

var aBtns:Array = [„Home“, „Produkte“, „Service“, „Portfolio“, „Galerie“, „Shop“, „Kontakt“, „Impressum“]; var nAnzahl:Number = aBtns.length;

var nWinkelDif:Number = 360/nAnzahl; var nTempo:Number = 0.01;

var nSkalFaktor:Number = 100/nRadiusY;

 mBtn.onPress = function() {

 if (this._xscale>nAktivGroesse) {  trace(„hallo“); } };

 mBtn.winkel = nWinkel; }

 mMenue.onEnterFrame = function() {  if (!bAktiv) {

 nDifX = (this._x-_xmouse)*nTempo;  var nSwap:Number;

 for (var i:Number = 0; i
480

Kapitel 30  Menü-Systeme

 mBtn.winkel += nDifX;

 nCosX = Math.cos(mBtn. winkel*(Math.PI/180))*nRadiusX;  nCosY = Math.sin(mBtn. winkel*(Math.PI/180))*nRadiusY;  mBtn._x = nCosX;  mBtn._y = nCosY;

 mBtn._xscale = Math. round(nCosY*nSkalFaktor);

 nSwap = nCosY*10-mMenue._x;  mBtn.swapDepths(nSwap); } } }; }

//-------------- start –--------------init();

Abbildung 146:  Akkordeon-Menü des Workshops

30.5 Akkordeon

mit einer derartigen Freifläche zu arbeiten. Bei Start sieht der Anwender bereits das erste Fenster geöffnet. Abbildung 146 zeigt unsere Anwendung.

Ein vom Prinzip dem Karteireiter verwandtes System, das schnellen Zugriff auf den Content erlaubt, stellt das Akkordeon dar. Zwischen den Inhalten kann man eben so einfach wie schnell hin- und herschalten, wobei eine vertikale oder eine horizontale Ausrichtung möglich ist. Der Einfachheit dieses Systems stehen zwei Einschränkungen gegenüber. Ein Akkordeon lässt keine Verschachtelung zu, sondern wie bei Karteireitern erfolgt bei einer Aktivierung der unmittelbare Zugriff auf den Inhalt. Außerdem empfiehlt es sich aus optischen Gründen, die Größen der einzelnen Inhaltsseiten identisch zu halten. Bei einer Variante dieses Menüs, das die genannten Nachteile umgeht, aber dann nicht mehr so einfach zu bedienen ist, werden bei Mausklick weitere Schaltflächen eingeblendet, die in einem anderen Fenster den konkreten Content darstellen. In der folgenden Übung bauen wir ein Menü auf, das über fünf Schaltflächen den Zugriff auf den Inhalt ermöglicht. Die entsprechenden Fenster befinden sich vertikal in der linken Bühnenhälfte, so dass man gegebenenfalls per Mausklick auf den Content in der rechten Bühnenhälfte weitere Informationen einblenden kann. Selbstverständlich ist es problemlos möglich, die Fenster über den ganzen Screen zu verteilen, ohne

1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcContent. 3. Dort zeichnen Sie, beginnend im Koordinatenursprung, ein Rechteck (300 × 180, hellgrau, Linienstärke 1 schwarz). 4. Löschen Sie die Linie am oberen Rand. 5. Erstellen Sie einen neuen leeren MovieClip namens mcBalken. 6. Dort zeichnen Sie, beginnend im Koordinatenursprung, ein Rechteck (300 × 28, dunkleres grau, Linienstärke 1 schwarz). 7. Benennen Sie Ebene 1 um in bgd. 8. Fügen Sie eine neue Ebene namens txt hinzu. 9. Erstellen Sie auf der Position 145, 5 ein dynamisches Textfeld (Verdana, 12, weiß, bold, zentriert, nicht auswählbar, einzeilig) und benennen es txt. Die Breite spielt keine Rolle, da wir sie per AS anpassen werden. 10. Erstellen Sie einen weiteren leeren MovieClip namens mcFenster. 11. Fügen Sie in dessen Koordinatenursprung mcBalken ein. 12. Weisen Sie diesem MC den Instanznamen balken zu.

30.5  Akkordeon

481

Wir benötigen drei verschiedene Variablen, um auf MovieClips zugreifen zu können:

• mMenu bildet

den Behälter, in den wir alle Elemente einfügen. • mMaske stellt die Maske dar, um zu gewährleisten, dass nur ein bestimmter Bereich sichtbar ist. Da wir die Inhalte nicht skalieren, sondern in der Originalgröße darstellen, könnten wir ohne Maske permanent den Inhalt des untersten Fensters einsehen, selbst dann, wenn es nicht aktiv wäre. • mFenster nimmt zwecks Vereinfachung des Skriptings jeweils eine Referenz auf das aktuell eingefügte Fenster auf. Da noch keine Fenster vorhanden sind, erhält diese Variable anfangs keinen Wert.

Abbildung 147:  Aufbau des MovieClips mcFenster

13. Fügen Sie auf 0, 28 mcContent ein. 14. Weisen Sie diesem MC den Instanznamen content zu. 15. Weisen Sie mcFenster einen gleichlautenden Exportnamen zu, so dass wir per AS darauf zugreifen können. Die konkreten Inhalte werden jeweils in einem eigenen Fenster dargestellt. Dazu haben wir mcFenster erstellt, dessen Aufbau Abbildung  147 zeigt. Der Balken im oberen Bereich dient uns als Button, mit dem wir jeweils einen bestimmten Content aufrufen können. Im unteren Bereich wird der Inhalt angezeigt. 16. Kehren Sie zur Hauptzeitleiste zurück. 17. Fügen Sie in actions folgendes Bildskript ein:  //------------ vars –--------------  var mMenu:MovieClip = this. createEmptyMovieClip(„menue“, 1);

 var mMaske:MovieClip = this.create­ EmptyMovieClip(„menueMaske“, 2);  var mFenster:MovieClip;

 var nBalkHoehe:Number = 28;

 var nFenstHoehe:Number = 180;

 var aBeschriftung:Array = [„Ice Age“, „Monster AG“, „Shrek“, „Ab durch die Hecke“, „Madagascar“];

Um die Fenster vertikal korrekt positionieren zu können, ohne direkt ihre Inhalte anzuzeigen, benötigen wir die Höhe des Balkens, den wir in einer Variablen festlegen. Außerdem speichern wir die Höhe des Contents, auf den wir in einem bestimmten Fall, der unten näher erläutert wird, zugreifen müssen. Last not least legen wir in einem Array fest, welche Beschriftung auf den Buttons bzw. im Balken-MovieClip angezeigt werden soll. 18. Erweitern Sie das Skript um folgenden FunktionsBlock:  //---------- functions –-----------  function init() {

 mMenu._x = 100;  mMenu._y = 50;

 for (var i:Number = 0; i
 mFenster._y = i*nBalkHoehe;  mFenster.i = i;

 mFenster.balken.txt.autoSize = „center“;  mFenster.balken.txt.text = aBeschriftung[i]; }

}

482

19. Rufen Sie init() auf:  //----------- aufruf –-------------  init();

Beim Testen werden alle Fenster eingefügt. Wir legen in gewohnter Weise eine init()-Funktion fest, die für den Aufbau des Menüsystems sorgt. Zunächst positionieren wir den Behälter auf eine beliebige Stelle. Sie können hier wie immer mit verschiedenen Werten experimentieren. In einer Schleife sorgen wir für das Einfügen der Fenster. Deren Anzahl ergibt sich aus der Länge des Arrays, in dem die Beschriftung der Buttons festgelegt wurde. Bei jedem Schleifendurchgang speichern wir eine Referenz auf das aktuell eingefügte Fenster und setzen es horizontal auf 0, d. h. den Koordinatenursprung des Behälters. Bezogen auf die Bühne beträgt die x-Position 100, also der Wert, den wir dem übergeordneten Behälter zugewiesen haben. Die y-Position ergibt sich aus der Balkenhöhe und der Zählvariablen i. Diese Variable ist für uns in mehrfacher Hinsicht von Bedeutung: Einerseits ermöglicht sie es uns, später die ursprüngliche Position zu berechnen, was notwendig ist, wenn wir die Fenster bewegt haben. Andererseits können wir mit ihrer Hilfe herausfinden, welche Fenster bei Mausklick zu bewegen sind. Daher speichern wir sie für jedes Fenster in einer eigenen Variablen. Eine Alternative dazu haben Sie bereits in anderen Workshops kennen gelernt. Denn wir haben im Instanznamen der Fenster den jeweiligen Wert von i integriert, so dass es ausreichen würde, das jeweils letzte Zeichen auszulesen. Wir verwenden die autoSize-Eigenschaft des Textfeldes, das sich im MovieClip balken jedes Fensters befindet, um den Text zentriert anzuzeigen. Der konkrete Text entspricht unserem Textearray, auf das wir ebenfalls mit Hilfe der Zählvariablen i zugreifen. Abschließend rufen wir init() auf. 20. Fügen Sie im Funktions-Block folgende Deklaration ein:  function geklickt() {

 var nStart:Number, nEnde:Number, nAddition:Number;  if (this._parent._y == this._ parent.i*nBalkHoehe) {  nStart = this._parent.i+1;

 nEnde = aBeschriftung.length;  nAddition = nFenstHoehe;

Kapitel 30  Menü-Systeme

} else {

 nStart = 1;

 nEnde = this._parent.i+1;  nAddition = 0; }

 for (var i:Number = nStart; i
 mMenu[„fenster“+i].zielY = i*nBalkHoehe+nAddition;

 mMenu[„fenster“+i].onEnterFrame = bewegen; }

}

In der ersten Zeile definieren wir einige lokale Variablen, die nur für den Zeitpunkt eines Mausklicks benötigt werden. Wir müssen bei einem Klick zwei Fälle unterscheiden:

• Das

angeklickte Fenster befindet sich oberhalb eines zuvor aktivierten Fensters. Nehmen wir beispielhaft an, wir hätten auf den Button „Shrek“ geklickt, während der Content des Buttons „Ab durch die Hecke“ angezeigt wird. In diesem Fall müssen sich alle Fenster, die unterhalb des angeklickten Fensters liegen, zu einer Position bewegen, die der ursprünglichen Position zuzüglich der Höhe des Contents entspricht. Wir müssen also in einem ersten Schritt heraus finden, welche Fenster betroffen sind. Da sich deren Reihenfolge innerhalb des Menüs aus dem ursprünglichen Wert der Zählvariablen i ergibt, addieren wir zum vorher gespeicherten i-Wert des angeklickten Buttons 1 hinzu. Damit erfassen wir das Fenster, das sich unterhalb des aktiven Fensters befindet. Diesen Wert speichern wir in der Variablen nStart, um später innerhalb einer Schleife darauf zugreifen zu können. Die Schleife erweist sich als notwendig, da ja nicht nur ein, sondern mehrere Fenster betroffen sein können. Die Gesamtanzahl ihrer Durchläufe ergibt sich logischerweise aus der Länge des Arrays aBeschriftung. Wenn also das Fenster 2 angeklickt wurde, müssen alle nachfolgenden Fenster, konkret: 3 und 4, nach unten bewegt werden. Die Entfernung, die sie vertikal zurück legen müssen, entspricht einfach der Höhe des Content-Bereichs, in unserem Fall 180 Pixel bzw. nFenstHoehe. Woher wissen wir denn überhaupt, dass wir uns

30.5  Akkordeon

in diesem ersten Fall bzw. dem if-Fall in obigem Code befinden? Jedes Fenster kann nur zwei Positionen einnehmen: Entweder befindet es sich auf seiner ursprünglichen Position oder es wurde nach unten verschoben. Die ursprüngliche Position lässt sich aus der Zählvariablen i und der Balkenhöhe berechnen. Im if-Fall fragen wir daher ab, ob die Position des angeklickten Fensters demjenigen Wert entspricht, der sich aus der Multiplikation von i mit der Balkenhöhe ergibt. Beim Fenster „Shrek“ betrug i 2 und es wurde in der init()-Funktion auf y = 2 * 28 positioniert. Stimmt der aktuelle yWert mit diesem berechneten Wert überein, befindet sich das betreffende Fenster noch oder wieder auf seiner Originalposition. • Im zweiten Fall wurde das Fenster schon einmal bewegt und es befindet sich auf einer anderen Position als bei der Ausführung von init(). Daraus lässt sich schließen, dass oberhalb des angeklickten Fensters bereits ein anderes zuvor aktiviert wurde. In diesem Fall müssen alle Fenster, beginnend beim zweiten eingeblendeten bis zum eben aktivierten, nach oben bewegt werden. Das erste Fenster muss nie bewegt werden, da es kein Fenster gibt, das sich oberhalb von ihm befindet und Einfluss auf seine Position nehmen könnte. Die Startvariable für unsere Schleife beträgt daher 1, der Endewert entspricht dem i-Wert des aktivierten Fensters zuzüglich 1. Diese Addition ist aufgrund der Art, wie wir an späterer Stelle die Endbedingung der Schleife definieren, notwendig. Da wir innerhalb der Schleife das Ziel, zu dem sich ein Fenster bewegen soll, immer in Relation zur Originalposition angeben, weisen wir nAddition den Wert 0 zu. Damit erreichen wir später, dass einfach die Originalposition als Zielpunkt verwendet wird. In der abschließenden Schleife greifen wir auf die ermittelten Instanzen zu, weisen ihnen einen Zielpunkt zu und rufen für jede ein onEnterFrame-Ereignis mit der noch zu definierenden Funktion bewegen() auf. Betrachten wir noch einmal unser konkretes Beispiel: Es erfolgt ein Mausklick auf „Shrek“, während „Ab durch die Hecke“ geöffnet ist. Die ursprüngliche vertikale Position von „Shrek“, genau genommen: des Parent-Elements des angeklickten Balkens mit der Beschriftung „Shrek“, beträgt 56 Pixel. Bei diesem Fenster handelt es sich um das dritte mit Hilfe von

483

init() eingefügte Fenster. Da zu diesem Zeitpunkt die Zählvariable i den Wert 2 besaß, erhalten wir als y-Wert 2 * 28, also 56. Der damalige i-Wert wurde in der Objektvariablen i dieses Fensters gespeichert.

Bei Mausklick errechnet Flash den Positionswert mit Hilfe von diesem Wert und kommt auf eben jene 56, die mit der aktuellen Position verglichen werden. Da beide Wert in diesem Fall übereinstimmen, weiß Flash, dass sich das zuvor aktive Fenster unterhalb des angeklickten befinden muss. Also erhält die Variable nStart den Wert 2 + 1, also 3. In nEnde wird die Länge des Arrays für die Beschriftungen gespeichert, d. h. eine 5. Da wir eine Bewegung nach unten benötigen, speichert Flash in nAddition 180. Der else-Fall wird übergangen, denn der if-Fall trifft ja bereits zu. Der Schleifenkopf sieht mit den konkreten Werten nun folgendermaßen aus: for (var i:Number = 3; i<5; i++) {

Von diesem Aufruf werden die Fenster 3 und 4 betroffen, die sich unterhalb des aktivierten Fensters befinden. Für Fenster 3 ergibt sich als vertikales Ziel: mMenu[„fenster“+3].zielY = 3*28+180;

bzw. als konkreter Wert 264. Bei Fenster 4 erhalten wir: mMenu[„fenster“+4].zielY = 4*28+180;

bzw. als konkreter Wert 292. Beide Fenster werden durch den Aufruf der noch zu definierenden Funktion bewegen() zu dem als Ziel ermittelten Wert hin bewegt. Da aber in unserem konkreten Beispiel fenster3 bereits aktiv war, hatte sich zuvor fenster4 auf dessen Zielposition bewegt, wie Sie in obiger Abbildung Aktivierung eines Fensters (if-Fall) erkennen können. Die errechnete Zielposition stimmt dort also schon mit der aktuellen Position überein. Anders dagegen fenster3, das sich noch auf seiner ursprünglichen Position befindet und daher bis zum Ziel bewegt werden kann. Der else-Fall tritt dann ein, wenn beispielsweise „Monster AG“ aktiv war und wir gerade auf „Shrek“ klicken. Als Startwert definieren wir die 1, der Endewert beträgt 3, nämlich i-Wert des angeklickten Fensters zuzüglich 1. Die Variable nAddition setzen wir auf 0, so dass sich für die Schleife folgende konkrete Werte ergeben: for (var i:Number = 1; i<3; i++) {

484

Kapitel 30  Menü-Systeme

Betroffen sind davon die Fenster mit den Nummern 1 und 2. Fenster 1 erhält als Ziel: mMenu[„fenster“+1].zielY = 1*28+0;

und Fenster 2, also das angeklickte Fenster: mMenu[„fenster“+2].zielY = 2*28+0;

In beiden Fällen entspricht das errechnete Ziel der Originalposition, so dass sich die Fenster wieder an die Stelle zurück begeben, an der sie eingeblendet wurden.

Funktion geklickt() aufgerufen, die, wie oben gezeigt, ermittelt, welche Fenster wohin zu bewegen sind. Bitte nicht erschrecken  – das letzte Fenster ist ständig in seiner vollen Schönheit zu sehen, selbst dann, wenn ein anderes Fenster aktiviert wurde. Wir müssen daher den überschüssigen Bereich verdecken. 23. Fügen Sie innerhalb der init()-Funktion unmittelbar nach Schleifenende folgende Zeilen ein:  mMaske._x = mMenu._x;

21. Erweitern Sie den Funktions-Block um folgende Deklaration:

 mMaske._y = mMenu._y;

 function bewegen() {

 mMaske.beginFill(0xffaa00, 100);

 var nEntfY:Number = this.zielYthis._y;

 mMaske.lineStyle(0);

 mMaske.lineTo(mMenu._width, 0);

 if (Math.abs(nEntfY)>0.5) {

 mMaske.lineTo(mMenu._width, mMenu._ height);

} else {

 mMaske.lineTo(0, 0);

 this._y += nEntfY/2;

 this._y = this.zielY;

 delete this.onEnterFrame; }

}

Wir kennen die Bewegungs-Funktion bereits aus anderen Beispielen. Zunächst ermitteln wir den Abstand zum Ziel, das in der vorher behandelten if-Bedingung errechnet wurde. Solange die Entfernung größer als ein bestimmter Wert ist (wir wählen hier beispielhaft 0.5), addieren wir zur aktuellen Position einen Bruchteil dieser Entfernung hinzu. Liegt das Ziel oberhalb der aktuellen y-Position, erhalten wir einen negativen, unterhalb einen positiven Wert, so dass automatisch eine Subtraktion, also eine Bewegung nach oben, oder eine Addition, also eine Bewegung nach unten, erfolgt. Trifft der else-Fall zu, setzen wir das aktuelle Element auf seine Zielposition und löschen das onEnterFrame. Das Wichtigste fehlt allerdings noch. Denn wir können kein Fenster aktivieren. 22. Fügen Sie innerhalb der init()-Funktion in der Schleife unmittelbar vor Schleifenende folgende Zeile ein:  mFenster.balken.onPress = geklickt;

Wenn Sie testen, sind Sie in der Lage, nach Belieben ein Fenster auszuwählen. Bei jedem Klick wird die

 mMaske.lineTo(0, mMenu._height);  mMaske.endFill();

 mMenu.setMask(mMaske);

Testen Sie erneut, behält der sichtbare Bereich immer die gleiche Höhe bei und der Content des unteren Fensters wird dann verdeckt, wenn wir ein anderes Fenster aktivieren. Wir erzielen den gewünschten Effekt mit Hilfe einer Maske, die wir an derselben Stelle positionieren, an der sich auch das Menü befindet. Wir können die Maske entweder per attachMovie() einfügen. Das wäre beispielsweise möglich mit Hilfe von mcFenster, das wir einmal dynamisch einfügen. Es müsste also kein neuer MovieClip gezeichnet werden. Wir wählen einen alternativen Ansatz, indem wir über die Zeichnungsmethoden der MovieClip-Klasse ein beliebig gefülltes Rechteck in der Größe des Menüs zeichnen und es dem Menü per setMask() zuordnen. Leider macht sich Flash mitunter einen Spaß daraus, beim Rendern gelegentlich die freizulegenden Objekte ohne Rand darzustellen, falls diese über eine Randlinie verfügen. Ist das bei Ihnen der Fall, müssen Sie die Koordinaten des als Maske verwendeten Rechtecks in alle Richtungen um einen Pixel vergrößern. Nach dem momentanen Stand zeigt unser Menü automatisch den Inhalt des letzten Fensters an. Das macht einen etwas unlogischen Eindruck auf den Anwender. Wenn man ein derartiges Menü verwendet,

30.6  Code

485

dann sollten entweder anfangs alle Fenster geschlossen oder nur das erste Fenster geöffnet sein. Wir entscheiden und für den letztgenannten Fall.

var mFenster:MovieClip;

24. Fügen Sie in der init()-Funktion ganz am Ende folgende Zeile ein:

var aBeschriftung:Array = [„Ice Age“, „Monster AG“, „Shrek“, „Ab durch die Hecke“, „Madagascar“];

 mMenu.fenster0.balken.onPress();

Nun sehen wir bei Start unmittelbar den Inhalt des ersten Fensters. Ein Fenster wird laut unserem Code dann geöffnet, wenn wir ein entsprechendes Element anklicken. Diesen Umstand machen wir uns zunutze, indem wir Flash anweisen, einfach einen Mausklick auf das erste Fenster zu simulieren. Wir rufen also das Ereignis onPress für das erste Fenster auf, so dass es geöffnet wird. Der Einfachheit halber haben wir fünf Fenster mit gleichem Content (nämlich nichts) verwendet. Natürlich würden Sie an deren Stelle konkreten Inhalt, Texte, Grafiken etc., anzeigen oder gar externe Daten laden. Dazu sind lediglich einige kleinere Änderungen notwendig. Nehmen wir an, der betreffende Content besteht aus fünf MovieClips, die in der Bibliothek fertig vorliegen und über die Verknüpfungsnamen mcCont0 bis mcCont4 verfügen. Dann müssten Sie die betreffenden Inhalte lediglich in der init()-Funktion den jeweiligen Fenstern zuweisen, z. B.:

var nBalkHoehe:Number = 28;

var nFenstHoehe:Number = 180;

//------------- functions –-----------function init() {

 mMenu._x = 100;  mMenu._y = 50;

 for (var i:Number = 0; i
 mFenster._y = i*nBalkHoehe;  mFenster.i = i;

 mFenster.balken.txt.autoSize = „center“;  mFenster.balken.txt.text = aBeschriftung[i];

 mFenster.balken.onPress = geklickt; }

 mMaske._x = mMenu._x;

mFenster.attachMovie(„mcCont“+i,„conten t“,1,{_x: 10, _y: nBalkHoehe + 10});

 mMaske._y = mMenu._y;

Auf diese Weise würde, abhängig von der Zählvariablen i, jeweils ein MovieClip auf der im Fenster bereits vorhandenen Content-Fläche 10 Pixel vom linken Rand und 10 Pixel unterhalb des Buttons eingefügt. Wenn Sie stattdessen lieber externe Inhalte laden, müssen Sie darauf achten, alles vorauszuladen, bevor das Menü verwendet werden kann.

 mMaske.beginFill(0xffaa00, 100);

 mMaske.lineStyle(0);

 mMaske.lineTo(mMenu._width, 0);

 mMaske.lineTo(mMenu._width, mMenu._ height);  mMaske.lineTo(0, mMenu._height);  mMaske.lineTo(0, 0);  mMaske.endFill();

 mMenu.setMask(mMaske);

30.6 Code

 mMenu.fenster0.balken.onPress();

Zur Kontrolle der gesamte Code:

function geklickt() {

//-------------- vars –---------------var mMenu:MovieClip = this. createEmptyMovieClip(„menue“, 1);

var mMaske:MovieClip = this.createEmpty MovieClip(„menueMaske“, 2);

}

 var nStart:Number, nEnde:Number, nAddition:Number;  if (this._parent._y == this._ parent.i*nBalkHoehe) {  nStart = this._parent.i+1;

 nEnde = aBeschriftung.length;

486

Kapitel 30  Menü-Systeme

 nAddition = nFenstHoehe; } else {

 nStart = 1;

 nEnde = this._parent.i+1;  nAddition = 0; }

 for (var i:Number = nStart; i
 mMenu[„fenster“+i].onEnterFrame = bewegen; } }

function bewegen() {

 var nEntfY:Number = this.zielYthis._y;  if (Math.abs(nEntfY)>0.5) {  this._y += nEntfY/2; } else {

 this._y = this.zielY;

 delete this.onEnterFrame; } }

//--------------- aufruf –------------init();

30.7 Drop Down-Menü Zu den unverzichtbaren Klassikern zählt das Drop Down-Menü, das uns in vielen Varianten sowohl in Webseiten wie in Applikationen aller Art über den Weg läuft. Auch Flash verwendet derartige Menüs, um Zugriff auf die verschiedensten Optionen zu erlauben. Wir wollen ein Menü erstellen, das über folgende Eigenschaften verfügt:

• Vier Menüpunkte, davon drei mit Unterpunkten. Die Menüstruktur wird über ein Array abgebildet, so dass es leicht erweiterbar ist (einschließlich des Einlesens externer Informationen beispielsweise via XML).

Abbildung 148:  Drop Down-Menü des Workshops

• RollOver

über einen Hauptpunkt öffnet die Unterpunkte, falls vorhanden. Diese fahren animiert nach unten aus. Gleichzeitig wird ein etwaig geöffnetes anderes Untermenü animiert geschlossen. • Mausklick an beliebiger Stelle schließt ein etwaiges geöffnetes Untermenü. Das in Abbildung 148 dargestellte Menü werden wir im Rahmen des Workshops realisieren. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcBtn). Dieses Symbol steht stellvertretend für einen Hauptmenüpunkt. 3. Zeichnen Sie in mcBtn, beginnend in dessen Koordinatenursprung, ein Rechteck (80 × 30, Farbe beliebig). 4. Fügen Sie dort auf einer neuen Ebene ein dynamisches Textfeld ein (Instanzname info, 16, Verdana, beliebige Farbe, zentriert). 5. Erstellen Sie einen weiteren leeren MovieClip (Bibliotheks- und Verknüpfungsname mcBtnU). Dieses Symbol steht stellvertretend für einen Unterpunkt. 6. Zeichnen Sie in mcBtnU, beginnend in dessen Koordinatenursprung, ein Rechteck (80 × 30, andere Farbe als für mcBtn verwendet). 7. Fügen Sie dort auf einer neuen Ebene ein dynamisches Textfeld ein (Instanzname info, 14, Verdana, beliebige Farbe, zentriert). 8. Kehren Sie zur Hauptzeitleiste zurück. 9. Fügen Sie in actions folgendes Bildskript ein:  //---––––––-- vars –----------------  var mMenue:MovieClip, mMain:MovieClip, mSubBeh:MovieClip;  var mAktiv:MovieClip = null;

 var nMenueTiefe:Number = 1000;  var nMenuePosX:Number = 50;

 var nMenuePosY:Number = 150;

30.7  Drop Down-Menü

 var nTempoFaktor:Number = 0.5;  var nMinDif:Number = 0.2;

 var aMenue:Array = [[„Home“], [„Products“, „Unter 1“, „Unter 2“, „Unter 3“], [„Service“, „Unter 1“, „Unter 2“, „Unter 3“], [„Clients“, „Unter 1“, „Unter 2“, „Unter 3“, „Unter 4“]];

Wir benötigen eine Reihe von MovieClips, um das Menü darstellen zu können:

• mMenue:

Der übergeordnete Behälter, der alle Menüelemente aufnimmt; • mMain: Ein Behälter für alle Oberpunkte, in unserem Beispiel 4; • mSubBeh: Liegen Unterpunkte vor, werden diese in einem eigenen Behälter erfasst. Zusätzlich verwenden wir an späterer Stelle eine lokale Variable btSub, um einen einzelnen Unterpunkt referenzieren zu können. Das gesamte Menü wird später auf die in nMenueTiefe festgehaltene Tiefe gesetzt, so dass es auf jeden Fall vollständig sichtbar sein wird. Die beiden folgenden Werte beziehen sich auf seine Position, die hier völlig willkürlich gewählt wurde und in Ihrem Fall natürlich zum gesamten Layout passen muss. Um die Animation der Untermenüs steuern zu können, benötigen wir eine Tempo-Variable und einen Grenzwert, ab dem keine weitere Bewegung mehr erfolgen soll. 10. Fügen Sie einen Funktions-Block ein: //--------––-- functions –------------function init() {

 mMenue = this.createEmptyMovieClip („behMenue“, nMenueTiefe);  mMenue._x = nMenuePosX;  mMenue._y = nMenuePosY;

 for (var i:Number = 0; i
 var mMain:MovieClip = mMenue. attachMovie(„mcBtn“, „main“+i, i);  mMain._y = 0;

 mMain._x = i*mMain._width;

 mMain.info.autoSize = „center“;  mMain.info.text = aMenue[i][0]; }

}

487

Rufen Sie die init()-Funktion auf: //------–––––-- start –--------------init();

Die Hauptmenüpunkte werden angezeigt. Wie erwähnt, erstellen wir einen leeren MovieClip als Behälter, referenzieren ihn in mMenue und positionieren ihn auf den gespeicherten Werten. In der Schleife wird pro Element im Array aMenue eine Instanz unseres Hauptbuttons eingefügt. Wohl gemerkt: Pro Element, und zwar unabhängig von dessen Länge. Denn die im Array erfassten Elemente variieren in ihrer Länge von 1 bis 5. Für die Hauptpunkte spielt das jedoch keine Rolle, denn sie müssen in jedem Fall sichtbar sein, ob sie nun über Unterpunkte verfügen oder nicht. Die horizontale Position setzen wir auf 0, während die vertikale schlicht einem Vielfachen der konkreten Button-Breite entspricht, wobei wir als Faktor die Zählvariable der Schleife verwenden. Falls Sie an dieser Stelle mit Objekten variabler Breite arbeiten, können Sie nicht, wie man vielleicht intuitiv vermuten würde, schreiben: mMain._x = mMenue._width;

Denn in dem Fall wird der gesamte Inhalt um eine Buttonbreite nach rechts verschoben. In dem Augenblick, in dem attachMovie() ausgeführt wird, ändert sich die Breite des Menüs auf die Breite des ersten eingefügten Objekts. Wenn danach die Positionierung erfolgt, geht die Berechnung von falschen Werten aus. Verwenden wir dagegen ein Init-Objekt, so besitzen wir Zugriff auf die Menübreite, bevor das Einfügen konkret ausgeführt wurde (Fettdruck): var mMain:MovieClip = mMenue. attachMovie(„mcBtn“, „main“+i, i,{_x:mMenue._width});

Nun erfolgt keine Verschiebung mehr nach rechts. Kehren wir zu unserer Version mit den jeweils gleichen Breiten zurück. Wir legen die automatische Ausrichtung des jeweiligen Textfeldes der Buttons fest und füllen es mit demjenigen Text, der sich innerhalb der einzelnen Array-Elemente an der ersten Stelle befindet. Genau dort stehen ja auch unsere Hauptpunkte. 11. Erweitern Sie die Deklaration von init() innerhalb der Schleife unmittelbar vor deren schließender Klammer:

488

Kapitel 30  Menü-Systeme

if (aMenue[i].length>1) {

 var mSubBeh:MovieClip = mMenue. createEmptyMovieClip(„behaelter“+i, i-10);  mSubBeh._x = mMain._x;  mMain.subs = mSubBeh;

 for (var j:Number = 1; j
 btSub.aZiele = [btSub._y, (j1)*btSub._height+mMain._height];  btSub.info.autoSize = „center“;  btSub.info.text = aMenue[i][j]; }

}

Nun werden auch die Untermenüs eingeblendet – oder doch nicht? 12. Ändern Sie testweise die vertikale Positionierung von btSub (Fettdruck): btSub._y = 50;

Wie Sie sehen, existieren die Untermenüs sehr wohl, werden jedoch von den Hauptpunkten verdeckt. Das ist durchaus sinnvoll, schließlich sollen sie ja erst dann in Erscheinung treten, wenn ein Hauptpunkt aktiviert wurde. 13. Setzen Sie den geänderten Wert wieder zurück auf 0: btSub._y = 0;

Die if-Bedingung prüft, ob das in der (äußeren) Schleife aktuell angesprochene Element über eine Länge größer 1 verfügt. Ist das der Fall, muss das betreffende Element Unterpunkt enthalten. Dann wird ein neuer leerer MovieClip eingerichtet und an derselben Stelle positioniert, an der sich der zugehörige Hauptpunkt befindet. Um später für die diversen Animationen wieder darauf zugreifen zu können, speichern wir pro Hauptpunkt in einer eigenen Variablen jeweils diesen Behälter. Nun müssen wir in einer Schleife ab Index 1, also ab der zweiten Position, das aktuelle Array-Element,

das seinerseits ein Array darstellt, durchsuchen. Für jedes gefundene Element wird ein Unterbutton in den zuvor angelegten Behälter eingefügt. Dabei legen wir alle Buttons übereinander, so dass sie völlig von dem zugehörigen Hauptpunkt verdeckt werden. Die Zuweisung der Beschriftung erfolgt korrespondierend zur Vorgehensweise bei den Hauptpunkten. Allerdings sollen die Unterpunkte irgendwann zum Vorschein kommen und auch wieder verschwinden können. Wir benötigen daher für zwei verschiedene Animationen einen Zielpunkt, zu dem sich der jeweilige Unterpunkt hin bewegen soll. Klappt das Untermenü ein, entspricht der Zielpunkt seiner ursprünglichen Position beim Einfügen. Fährt es aus, ergibt sich das Ziel aus einem Vielfachen der Indexposition innerhalb des Arrays, in dem es erfasst wurde, falls die Höhe aller Buttons (einschließlich der Hauptpunkte) immer gleich ist. Zwar trifft das in unserem Beispiel zu, aber es ist nicht zwangsläufig immer so. Daher berücksichtigen wir die Höhe des Hauptpunktes, müssen dann jedoch bei der Verschiebung nach unten mit einem um Eins reduzierten Wert multiplizieren. 14. Fügen Sie in der Deklaration von init() unmittelbar nach der inneren, aber noch innerhalb der äußeren Schleife ein: mMain.onRollOver = function() {  if (mAktiv != this.subs) {  subsBewegen(0);

}

 mAktiv = this.subs;  subsBewegen(1); };

Jeder Hauptpunkt erhält ein onRollOver-Ereignis, das:

• Kontrolliert, ob der in mAktiv erfasste Behälter

von Submenüs nicht dem eigenen Behälter entspricht. Das ist dann der Fall, wenn vorher ein anderes Untermenü angezeigt wurde, erstmals das Menü aufgerufen wird oder der aktuelle Hauptpunkt über kein Untermenü verfügt. In all diesen Fällen wird eine Funktion aufgerufen, in der das in mAktiv gespeicherte Untermenü eingefahren wird. Das ist zugegebenermaßen nicht ganz sauber, aber funktional. Ganz korrekt wäre hier, explizit die genannten Fälle einzeln zu behandeln.

30.7  Drop Down-Menü

• In mAktiv das eigene Untermenü speichert. Exis-

tiert kein Untermenü, wird das vorher in mAktiv erfasst Untermenü aus der Variablen gelöscht, was korrekt ist, da es sich zu diesem Zeitpunkt ohnehin bereits hinter dem zugehörigen Hauptpunkt wieder versteckt. • Für das eigene Untermenü die erwähnte Funktion aufruft und die Unterpunkte nach unten animiert. 15. Fügen Sie im Funktions-Block folgende Deklaration ein: function subsBewegen(pIndex:Number):Void {  for (var e in mAktiv) {

 var btSub:MovieClip = mAktiv[e];  btSub.nZiel = btSub. aZiele[pIndex];

 btSub.onEnterFrame = function() {  var nDif = (this.nZielthis._y)*nTempoFaktor;  this._y += nDif;

 if (Math.abs(nDif)<=nMinDif) {  this._y = this.nZiel;

 delete this.onEnterFrame; } }; }

}

Wenn Sie testen, können Sie nach Belieben die Unterpunkte ein- und ausfahren lassen – ein netter Zeitvertreib. Da die Animation immer in gleicher Form erfolgt, verwenden wir eine parametrisierte Funktion, um sie realisieren zu können. Dabei wird für jeden Unterpunkt, der sich im in mAktiv erfassten Behälter befindet:

• Ein Ziel festgelegt, das sich aus den gespeicherten Werten und der übergeben Indexvariablen ergibt.

• Ein onEnterFrame-Ereignis definiert, das:

–– Die Entfernung zum Ziel berechnet; –– Das Ergebnis mit einem Tempo-Faktor multipliziert. Da der Faktor kleiner 1 ist, erhalten wir ein Ergebnis, das kleiner der Entfernung ist; –– Das Ergebnis zur aktuellen y-Position addiert. Die Entfernung zum Ziel kann klassisch über

489

eine einfache Berechnung ermittelt werden, indem von der y-Position des Objekts dessen Ziel subtrahiert wird; –– Kontrolliert, ob der errechnete Tempo-Wert eine bestimmte Grenze erreicht oder unterschreitet. Ist das der Fall, befindet sich das betreffende Objekt so nahe an seinem Ziel, das wir es direkt darauf setzen und das nun überflüssige onEnterFrame-Ereignis löschen können. Eine Erweiterbarkeit ist einfach über die Verwaltung der Menüdaten gegeben. 16. Fügen Sie im Variablen-Block im Array aMenue an letzter Stelle ein neues Element ein (Fettdruck): var aMenue:Array = [[„Home“], [„Products“, „Unter 1“, „Unter 2“, „Unter 3“], [„Service“, „Unter 1“, „Unter 2“, „Unter 3“], [„Clients“, „Unter 1“, „Unter 2“, „Unter 3“, „Unter 4“], [„Contact“, „Unter 1“, „Unter 2“]];

Wenn Sie testen, taucht ein fünfter Menüpunkt am rechten Rand des Menüs auf, der bei Rollover zwei Unterpunkte einblendet. Wie Sie sehen, sind außer einer Erweiterung des Arrays keine weiteren Änderungen notwendig. Unsere Buttons bleiben, so stolz sie sich auch präsentieren mögen, unbeeindruckt von Mausklicks, sprich: ihnen fehlt die typische Funktionalität, die man gemeinhin einem ordentlichen Menü nachsagt. Hier gibt es gleich mehrere Varianten, um dieses Problem zu lösen (das gilt übrigens allgemein für jede Art von Menü):

• Wir verwenden ein weiteres Array, in dem diejeni-

gen Funktionen erfasst werden, die bei Mausklick auszuführen sind. Das hat den Vorteil größtmöglicher Flexibilität, da wir verschiedenste Funktionen aufrufen können und nicht allen nur beispielsweise ein loadMovie() oder getURL() zuweisen müssen. Welche Aktion zu welchem Button gehört, ergibt sich aus der jeweiligen Indexposition: Wenn wir beispielsweise in init() innerhalb der Schleife das Element auf Position 2 definieren, gehört dazu auch die im neu angelegten Array an Index 2 erfasste Funktionalität. Komplizierter wird das Ganze insofern, als wir für jede einzelne Funktionalität ein eigenes Array anlegen müssen, das pro Button jeweils 2 Elemente umfasst: Die auf-

490

zurufende Funktion und die zu ladende Datei oder URL. • Wir gehen davon aus, dass sich alle Menüpunkte gleich benehmen und beispielsweise eine externe swf-Datei laden sollen. Über die Instanznamen stellen wir einen Zusammenhang mit dieser Datei her, ein Prinzip, das wir bereits oben näher kennen gelernt haben. In dem Fall kann man aus der Button-Beschriftung die zu ladende Datei extrahieren. So würde der Button mit der Beschriftung Home die Datei „home.swf“ laden. Alternativ erhalten die zu ladenden Dateien Namen, die den Instanznamen der MovieClips entsprechen. Wir nehmen der Einfachheit den letztgenannten Fall an. 17. Erweitern Sie die Funktion init() unmittelbar nach dem Schließen der if-Bedingung der äußeren for-Schleife: else{

 mMain.onPress = geklickt; }

18. Fügen Sie in der init()-Funktion innerhalb der zweiten for-Schleife unmittelbar vor dessen Ende ein: btSub.onPress = geklickt;

19. Erweitern Sie den Funktions-Block: function geklickt(){

 trace(this._name); }

Sie können nun auf die einzelnen Menüpunkte klicken und erhalten dabei eine Ausgabe im Nachrichtenfenster. Wir müssen zwei Fälle unterscheiden:

• Ein Button verfügt über keine Unterpunkte. Dann muss er klickbar sein.

• Er besitzt Unterpunkte, darf daher nicht selbst auf einen Mausklick Dateien laden. Stattdessen übernehmen das seine Unterpunkte.

Das geschieht, indem wir die Länge der in aMenue erfassten Arrays kontrollieren  – also genau so, wie wir bei der Erstellung der Unterpunkte vorgingen. Beträgt die Länge nur 1, wissen wir, dass der betreffende Hauptpunkt klickbar sein muss, da er über keine Unterpunkte verfügt. Dann reicht es, mMain

Kapitel 30  Menü-Systeme

die gewünschte Funktionalität zuzuweisen, hier stellvertretend die simple Funktion geklickt(), die bescheidenerweise lediglich den Namen des aktivierten Buttons preisgibt. Andernfalls müssen die Unterpunkte die betreffende Funktion zugewiesen bekommen, was an der Stelle geschieht, an der wir sie erstellen, also innerhalb der inneren for-Schleife.

30.8 Code //--------––-- vars –----------------var mMenue:MovieClip, mMain:MovieClip, mSubBeh:MovieClip; var mAktiv:MovieClip = null;

var nMenueTiefe:Number = 1000; var nMenuePosX:Number = 50;

var nMenuePosY:Number = 150;

var nTempoFaktor:Number = 0.5; var nMinDif:Number = 0.2;

var aMenue:Array = [[„Home“], [„Products“, „Unter 1“, „Unter 2“, „Unter 3“], [„Service“, „Unter 1“, „Unter 2“, „Unter 3“], [„Clients“, „Unter 1“, „Unter 2“, „Unter 3“, „Unter 4“]]; //----------- functions –-------------function init() {

 mMenue = this.createEmptyMovieClip („behMenue“, nMenueTiefe);  mMenue._x = nMenuePosX;  mMenue._y = nMenuePosY;

 for (var i:Number = 0; i
 var mMain:MovieClip = mMenue. attachMovie(„mcBtn“, „main“+i, i);  mMain._y = 0;

 mMain._x = i*mMain._width;

 mMain.info.autoSize = „center“;  mMain.info.text = aMenue[i][0];  if (aMenue[i].length>1) {

 var mSubBeh:MovieClip = mMenue. createEmptyMovieClip(„behaelter“+ i, i-10);  mSubBeh._x = mMain._x;

30.8  Code

 mMain.subs = mSubBeh;

 for (var j:Number = 1; j
 var btSub:MovieClip = mSubBeh.attachMovie(„mcBtnU“, „main“+i+“_“+j, j);  btSub._x = 0;  btSub._y = 0;

 btSub.aZiele = [btSub._y, (j-1)*btSub._height+mMain._ height];

 btSub.info.autoSize = „center“;

491

 this.onMouseDown = function(){  subsBewegen(0); } }

function subsBewegen(pIndex:Number):Void {  for (var e in mAktiv) {

 var btSub:MovieClip = mAktiv[e];

 btSub.nZiel = btSub.aZiele[pIndex];  btSub.onEnterFrame = function() {

 btSub.info.text = aMenue[i][j];

 var nDif = (this.nZielthis._y)*nTempoFaktor;

}

 if (Math.abs(nDif)<=nMinDif) {

 mMain.onPress = geklickt;

 delete this.onEnterFrame;

 mMain.onRollOver = function() {

};

 subsBewegen(0);

}

 mAktiv = this.subs;

 trace(this._name);

};

//----------- start –-----------------

 btSub.onPress = geklickt;

 this._y += nDif;

}else{

 this._y = this.nZiel;

}

}

 if (mAktiv != this.subs) {

}

}

function geklickt(){

 subsBewegen(1);

}

}

init();

31

Bildergalerien

Zu häufigen mit Flash erstellten Anwendungen zählen Bildergalerien. Denn Flash bietet nicht nur den Vorteil, zahlreiche animierte Effekte wie Ein- und Ausblenden zu ermöglichen, sondern es können auf recht unkomplizierte Art Galerien mit extern vorliegenden Bildern realisiert werden. Wir wollen uns im Rahmen dieses Workshops verschiedene Varianten anschauen. Prinzipiell bestehen zwei Möglichkeiten, die benötigten Bilder zu laden:

• Die Bilder liegen intern vor. Diese Version lässt

sich am einfachsten realisieren, da weder Wartezeiten durch externe Ladevorgänge entstehen noch irgendeine Kontrolle erfolgen muss, ob die externen Daten überhaupt existieren. Nachteile sind jedoch die geringe Flexibilität, da neue Bilder immer händisch in die Flash-Datei eingefügt werden müssen, sowie die prinzipiell begrenzte Dateigröße. Denn unabhängig davon, ob der Anwender auch wirklich jedes Bild betrachtet, werden alle Bilder zum Client übertragen. • Die Bilder liegen, wie oben bereits erwähnt, extern vor. Der Programmieraufwand erhöht sich insbesondere durch das asynchrone Laden, das kontrolliert werden muss. Man gewinnt jedoch enorme Flexibilität, da man die Galerie prinzipiell einfach erweitern kann. Das gleiche gilt generell auch für die Thumbnails bzw. (in gutem alten Deutsch) die Vorschaubilder:

• Wir können zur Laufzeit diejenigen Bilder verwen-

den, die bei Mausklick auf die Thumbnails geladen werden sollen. Das hat den Vorteil, dass wir nur eine Version der Bilder auf einem Server speichern müssen. In Flash würden Sie dann per Skripting auf die benötigte Größe skaliert. Allerdings würde das

bedeuten, dass alle Bilder zunächst in voller Größe vom Server auf den Client übertragen würden, um sie dort zu skalieren. Wir würden damit denselben Download-Prozess durchführen, als wenn der Anwender auf alle Thumbnails geklickt hätte, um die Bilder in voller Größe anzuschauen. Der Sinn der Thumbnails besteht jedoch u. a. darin, eben möglichst wenige Daten zu laden, denn wir können ja nicht von vorneherein wissen, welche Bilder sich der Anwender tatsächlich anschauen möchte. Wenn er nur an einem einzigen Bild Interesse hätte, würden wir alle anderen Daten unnötigerweise auf den Client übertragen. • Wir erstellen zwei Bildervarianten, nämlich einmal die unveränderten Bilder in voller Größe und einmal in Größe der Thumbnails (serverseitige Skalierung der Bilder wollen wir hier nicht berücksichtigen). Nur die kleinen Bilder werden zunächst auf den Client übertragen und in die Applikation integriert. Erst bei Mausklick laden wir dann das aktuell benötigte große Bild. Der Vorteil wäre, dass nur diejenigen Daten übertragen werden, die Flash tatsächlich benötigt. Dem stünde der Nachteil gegenüber, zwei Versionen von Bildern erstellen und auf dem Server bereit halten zu müssen. Das wiegt allerdings nicht sehr schwer, da man notfalls per Batch-Programmierung sehr schnell einen kompletten Ordner verkleinern kann und diese Bilder auf dem Server nicht viel Platz beanspruchen. Falls der Anwender bzw. Kunde die Galerie beliebig ändern möchte, bietet sich sowohl für die Thumbnails wie für die großen Bilder die externe Variante an, da sie trotz des erhöhten Skripting-Aufwandes die flexibelste Lösung darstellt.

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

493

494

Kapitel 31  Bildergalerien

Die Thumbnails ihrerseits können in verschiedenen Varianten vorliegen:

• Am häufigsten wird ein verkleinertes Bild des Ori-

Abbildung 149:  Originalgrafik (verkleinert)

Abbildung 150:  Thumbnail-Typ 1

ginals verwendet. Damit ist der Anwender natürlich in der Lage, sofort zu erkennen, was ihn bei Mausklick erwartet. Diese Variante funktioniert allerdings nicht mit allen Bildmotiven. Denn je komplexer und detaillierter das Motiv ist, desto weniger kann man auf einer verkleinerten Ausgabe erkennen. • Dieses Problem kann man umgehen, indem man einen Ausschnitt verwendet, der nur einen Teil des Bildes in Originalgröße wiedergibt. Damit bleiben auch im Thumbnail alle Details erhalten. Außerdem bauen derartige Thumbnails eine gewisse Spannung auf, da das große Bild eben nur partiell wiedergegeben wird. Es bleibt Raum für eine Erwartungshaltung und Phantasie seitens des Anwenders. Allerdings besteht das Risiko, dass man den Ausschnitt ausgesprochen unglücklich wählt, so dass sich daraus nicht korrekt auf den Gesamtcharakter des Originals schließen lässt. • Als eine Art Kompromiss zwischen beiden Varianten kann man einen verkleinerten Ausschnitt des Originals verwenden. Die Abbildungen 149 bis 152 verdeutlichen diese Möglichkeiten. Im Rahmen der diversen Workshops dieses Kapitels stellen wir sowohl Galerien vor, deren Grafiken intern vorliegen, wie auch solche mit externen Assets.

Abbildung 151:  Thumbnail-Typ 2

31.1 Einfache Galerie mit Slider und internen Assets

Abbildung 152:  Thumbnail-Typ 3

Unsere Galerie soll eine begrenzte Anzahl an Bildern aufnehmen, die bei Mausklick auf bestimmte Points of Interest (POI) als erläuterndes Element eingeblendet werden. Besagte Punkte befinden sich auf einer größeren Grafik. Sie werden bei RollOver und Mausklick hervorgehoben, um eine bessere Orientierung zu ermöglichen. Zusätzlich zeigen wir Informationstext an. Abbildung  153 zeigt die Oberfläche der Anwendung. Da wir hier mit internen Bildern arbeiten, gestaltet sich der Aufbau der Flash-Datei insgesamt etwas

31.1  Einfache Galerie mit Slider und internen Assets

495 Abbildung 153:  Infografik mit Bildergalerie

einfacher. Sie benötigen zur Vorbereitung folgende Grafiken:

• Eine Grafik beispielsweise in der Größe 320 × 430,

auf der wir die benötigten Hotspots anlegen wollen (canoneosforpicslider.png). • Sieben Detailbilder der Größe 350 × 250 (c0.png bis c6.png). Das erste Bild verwenden wir als ästhetische Grafik ohne direkten Bezug zu einem spezifischen Punkt auf der größeren Auswahlgrafik, denn am Anfang hat der Anwender ja noch keinen POI angeklickt. Die übrigen 6 Bilder dienen dazu, weitergehende Informationen zu ausgesuchten Stellen zu bieten. • Eine Grafik zur Aufnahme der Detailbilder (menuboxgrey.png), die Sie beliebig gestalten können. Selbstverständlich können Sie mit anderen Größen arbeiten, müssen dementsprechend aber gegebenenfalls den Code anpassen. 1. Erstellen Sie eine Standarddatei. 2. Fügen Sie zwischen der Ebene objects und actions eine neue Ebene namens maske ein. 3. Importieren Sie die vorbereiteten Grafiken in die Bibliothek. 4. Der Übersichtlichkeit halber erstellen Sie in der Bibliothek einen Ordner impPicts und verschieben die importierten Grafiken dorthin. 5. Erstellen Sie einen leeren MovieClip namens mcBild. 6. Benennen Sie die existierende Ebene um in grafik. 7. Fügen Sie dort auf der Position 0,0 diejenige Grafik ein, die später die Hotspots enthält (canoneos-

forpicslider.png). Damit bildet die linke obere Ecke des MovieClips den Registrierungspunkt. 8. Erstellen Sie oberhalb von grafik eine neue Ebene namens punkte. 9. Zeichnen Sie auf dieser Ebene einen Kreis (12 × 12, Farbe 7cca78). 10. Da wir ihn mehrfach benötigen, wandeln Sie ihn in einen MovieClip um (Bibliotheksname mcPunkt, Instanzname punkt0, Registrierungspunkt mittig). 11. Positionieren Sie ihn auf der Stelle, auf der Ihr erster POI liegen soll (vgl. Abbildung nach Schritt 14). 12. Duplizieren Sie ihn fünf mal. 13. Verschieben Sie diese fünf Punkte auf Ihre gewünschte Position. 14. Benennen Sie die Punkte punkt1 bis punkt5. Abbildung 154 zeigt den aktuellen Stand. 15. Kehren Sie zur Hauptzeitleiste zurück 16. Fügen Sie auf der Ebene objects den MovieClip mcBild horizontal und vertikal mittig ein. 17. Weisen Sie dem MovieClip den Instanznamen bild zu. Diese Instanz dient uns als Informationsgrafik. Einige wichtige Punkte sind durch die grünen Kreise hervorgehoben. Wenn wir sie anklicken, werden weitere Informationen eingeblendet. 18. Erstellen Sie einen neuen leeren MovieClip namens mcSlider. 19. Benennen Sie die existierende Ebene um in picts. 20. Fügen Sie dort auf der Position 0,0 das erste importierte Detailbild ein (c0.png).

496

Kapitel 31  Bildergalerien

punkt links oben). Die benötigten x-Koordinaten lauten: 700, 1050, 1400, 1750, 2100. Die y-Position beträgt immer 0. Der MovieClip mcSlider müsste jetzt so aussehen wie in Abbildung 155. Wir fügen alle Bilder, die per Mausklick anzuzeigen sind, in den MovieClip mcSlider ein, der als Behälter fungiert. Dadurch ist es später relativ einfach möglich, Änderungen vorzunehmen (z. B. Hinzufügen weiterer Bilder), ohne Gefahr zu laufen, andere MovieClips bzw. den gesamten Aufbau der Anwendung ungewollt zu verändern.

Abbildung 154:  Aufbau des MovieClips mcBild

21. Fügen Sie auf der Position 350,0 das zweite Bild ein. 22. Da wir dieses und alle nachfolgenden Bilder per Skripting ansprechen wollen, wandeln Sie es in einen MovieClip um (Bibliotheksname mcPict0, Instanzname pict0, Registrierungspunkt links oben). 23. Verfahren Sie so mit allen anderen importierten Bildern (Bibliotheksnamen mcPict1 bis mcPict5, Instanznamen pict1 bis pict5, Registrierungs-

24. Erstellen Sie einen leeren MovieClip namens mcMaske. 25. Benennen Sie die bestehende Ebene um in fenster. 26. Fügen Sie darunter zwei weitere Ebenen namens maske und bilder ein. 27. Definieren Sie maske als Maskenebene und bilder als maskierte Ebene. 28. Fügen Sie auf fenster an der Position 0,0 die importierte Grafik menuboxgrey.png ein. 29. Da wir sie später per Skripting ansprechen müssen, wandeln Sie sie in einen MovieClip um (Bibliotheksname mcRahmen, Instanzname rahmen, Registrierungspunkt links oben). 30. Sperren Sie diese Ebene. 31. Erstellen Sie auf der Ebene maske an der Position 16,47 ein Rechteck (347 × 247, beliebige Farbe, leicht abgerundete Ecken). 32. Wandeln Sie das Rechteck in einen MovieClip um (Bibliotheksname mcFlaeche, Instanzname maske, Registrierungspunkt links oben). 33. Sperren Sie diese Ebene. 34. Fügen Sie auf bilder an der Position 16,47 mcSlider ein. 35. Weisen Sie der Instanz den Namen slider zu. Den Aufbau von mcMaske bei nicht aktivierter Maskenebene zeigt Abbildung 156.

Abbildung 155:  Aufbau des MovieClips mcSlider

31.1  Einfache Galerie mit Slider und internen Assets

497 Abbildung 156:  Aufbau des MovieClips mcMaske

Wie im Fall des MovieClips mcSlider packen wir die Maske in einen leeren MovieClip als Behälter. Dadurch sind wir von der Hauptzeitleiste unabhängig und können im Bedarfsfall leichter Änderungen vornehmen. 36. Kehren Sie zur Hauptzeitleiste zurück. 37. Fügen Sie auf der Ebene maske den eben erstellten MovieClip mcMaske ein. Wählen Sie eine Position rechts neben der Grafik mit den Hotspots. 38. Weisen Sie der Instanz den Namen bilder zu. Damit ist der Aufbau der Anwendung abgeschlossen und wir können mit dem spannenden Teil, nämlich dem Skripting, beginnen. 39. Weisen Sie actions folgendes Bildskript zu:  //----––----- vars –---------------  var aPunkte:Array = [bild.punkt0, bild.punkt1, bild.punkt2, bild. punkt3, bild.punkt4, bild.punkt5];

//---------- functions –------------

 function init():Void {

 for (var i:Number = 0; i
 aPunkte[i].onRollOver = function() {

 this.onEnterFrame = blinken; }; }

}

 //------------ aufruf –------------  init();

Wir benötigen eine Möglichkeit, um einfach alle grünen Punkte auf der Karte ansprechen zu können. Da ihre Instanznamen bekannt sind, speichern wir diese

in aPunkte, so dass wir jederzeit auf sie zugreifen können. Sollten später weitere Punkte hinzu kommen, müssen wir deren Namen lediglich ins Array einfügen. Alternativ zum händischen Eintragen hätten man die betreffenden Objekte auch mit einer for in-Schleife auslesen bzw. mit einer for-Schleife und dynamisch zusammen gesetzten Strings ermitteln können. Da wir die Funktionalität der Punkte von Anfang an benötigen, legen wir im Funktionsblock eine init()Funktion an. Sie sorgt dafür, dass alle Elemente, die im Array aPunkte erfasst sind, ein onRollOverEreignis erhalten. Wir weisen ihnen eine noch zu definierende Funktion blinken() zu. Abschließend rufen wir die init()-Funktion auf. Momentan können wir beim Testen lediglich einen veränderten Mauszeiger bei Rollover über die Punkte feststellen. Wir möchten jedoch, dass darüber hinaus auch die Punkte anzeigen, dass sie aktiv sind. Das könnten wir beispielsweise durch simples Ein- und Ausblenden, durch einen sukzessive veränderten Alphawert oder durch eine Größenänderung erreichen. Wir wählen letztgenannten Weg. 40. Fügen Sie innerhalb des Funktionsblocks folgende Deklaration ein:  function blinken():Void {  this._xscale += 8;

 this._yscale += 8;

}

Wir legen in der Funktionsdefinition blinken() fest, dass sich die Skalierung des aktivierten Punktes sowohl in horizontaler wie vertikaler Richtung jeweils um 8 % erhöht. Wenn Sie testen, wird der aktivierte Punkt zwar wachsen  – aber er hört nicht mehr auf, da wir keine entsprechende Bedingung definiert haben. Außerdem wird die Funktion blinken() dem

498

Kapitel 31  Bildergalerien

onEnterFrame-Ereignis zugewiesen, ohne dass wir

dieses irgendwann wieder löschen.

41. Fügen Sie in den Block, in dem die Variablen deklariert werden, folgende Zeile ein:  var nAenderung:Number = 8;

 var nScaleMax:Number = 132;

42. Ändern Sie die Funktionsdeklaration von blinken() folgendermaßen (Fettdruck):  function blinken():Void {

 this._xscale += nAenderung;  this._yscale += nAenderung;

Wenn Sie testen, ändert sich ein Punkt nur solange, wie er aktiv ist. Wir definieren ein onRollOut-Ereignis, um die in blinken() beschriebene Animation wieder stoppen zu können. Darin löschen wir das bei rollOver zugewiesene onEnterFrame-Ereignis. Allerdings stellen wir nicht wieder die Originalgröße her, so dass Sie beim Testen verschiedener Punkte zum Schluss verschiedene Größen vorliegen haben. 44. Erweitern Sie das eingefügte onRollOut um folgende Zeile (Fettdruck):  aPunkte[i].onRollOut = function() {

 if (this._xscale>nScaleMax || this._xscale<100) {

 delete this.onEnterFrame;

}

Beim onRollOut stoppt die Animation nun nicht nur, sondern der zuvor aktive Kreis erhält auch seine Originalgröße wieder zugewiesen. Allerdings kann es vorkommen, dass ein Kreis bei onRollOver kurzzeitig schrumpft anstatt zunächst zu wachsen. Das liegt an der Variablen nAenderung, deren Vorzeichen wir wiederholt ändern.

nAenderung *= -1;

}

Wenn Sie jetzt testen, wird sich der aktivierte Punkt wie zuvor stolz aufplustern. Da wir den Wert, um den sich seine Größe ändert, in eine Variable gespeichert haben, können wir ihn dynamisch ändern. Wir bedienen uns dabei einer Vorgehensweise, die Sie im Kapitel Geskriptete Animationen kennen gelernt haben. Denn durch das Vorzeichen dieser Variablen können wir sehr einfach festlegen, ob ein Wachsen oder Schrumpfen stattfinden soll. Als maximale Größe definieren wir in einer weiteren Variablen 132 Prozent. Sie können natürlich gerne mit anderen Werten experimentieren. In blinken() addieren wir jeweils nAenderung zur aktuellen Größe des betreffenden Objekts hinzu. Sobald diese Größe den Grenzwert von 132 übersteigt, ändern wir das Vorzeichen von nAenderung, so dass faktisch eine Subtraktion erfolgt. Wenn die Skalierung unter 100 Prozent sinkt, ändern wir erneut das Vorzeichen, woraus wieder wie zum Anfang eine Addition resultiert. Auf diese Weise erhalten wir ein Hin- und Herpendeln zwischen zwei definierten Zuständen bzw. ein Wachsen und Schrumpfen. 43. Fügen Sie in der init()-Funktion innerhalb der Schleife nach der abschließenden Klammer des onRollOver-Ereignisses folgende Zeilen ein:

 this._xscale = this._yscale=100;  };

45. Erweitern Sie das eingefügte onRollOut um folgende Zeile (Fettdruck):  aPunkte[i].onRollOut = function() {  delete this.onEnterFrame;

 this._xscale = this._yscale=100;

nAenderung = Math.abs(nAenderung);  };

Mit Hilfe von Math.abs() sorgen wir nun dafür, dass nAenderung in jedem Fall auf einen positiven Wert gesetzt wird. Denn die verwendete Methode gibt immer eine positive Zahl zurück, auch dann, wenn das Vorzeichen zuvor negativ war. Ist der Wert positiv, dann führt jeder Aufruf von blinken() bei vorher nicht aktiven Kreisen dazu, dass sie anwachsen, was ja auch erwünscht ist. Neben onRollOver und onRollOut sollen unsere Punkte über ein onPress verfügen, das eine Aktion auslöst.

 aPunkte[i].onRollOut = function() {

46. Fügen Sie nach der schließenden Klammer des onRollOut -Ereignisses folgende Zeilen ein:

 };

 aPunkte[i].onPress = function() {

 delete this.onEnterFrame;

31.1  Einfache Galerie mit Slider und internen Assets

499

 sliding(this._name);  };

50. Fügen Sie am Skriptanfang folgende Variableninitialisierung ein:

47. Erweitern Sie den Funktionsblock um folgende Deklaration:

 var nOffset:Number = bilder. slider._x;

 function sliding(psPunkt:String):Void {

Wenn Sie testen, wird bei Mausklick jeweils das zugehörige Bild eingeblendet. Ein anderes Bild kann nur angezeigt werden, wenn sich die Position des Sliders ändert, während die Position der Maske unverändert bleibt. Um die neue Position zu ermitteln, müssen wir wissen, welches Bild zu sehen sein soll. Hier hilft die erwähnte Namenskonvention. Da wir die kennzeichnende Zahl des angeklickten Punktes kennen, wissen wir, dass das zugehörige Bild den Instanznamen pict zuzüglich besagter Zahl trägt. Wurde beispielsweise auf punkt1 geklickt, wollen wir pict1 einblenden. Unser Slider befindet sich innerhalb von maske auf der x-Position 16. Alle anzuzeigenden Bilder liegen rechts von diesem Punkt, haben also einen x-Wert größer 16 zuzüglich einem Vielfachen der Bildbreite von 350, da das erste Bild kein Detailbild darstellt. Wollen wir die Detailbilder sehen, müssen wir am Anfang slider nach links verschieben. Dabei entspricht die Position von slider jeweils einem negativen Wert, der sich aus einem Vielfachen von 350 minus 16 ergibt. Da sich pict1 auf der x-Position 700 befindet, muss der gesamte slider bei Klick auf punkt1 um 700 Pixel minus 16 Pixel für den erwähnten Abstand vom Koordinatenursprung nach links verschoben werden. Als Ergebnis erhalten wir eine Position von –684. Doch was geschieht, wenn wir anschließend auf punkt0 klicken? Bei diesem zweiten Mausklick befindet sich slider auf einer negativen Position, während die x-Position des Bildes (innerhalb von mcSlider) mit 350 einen positiven Wert hat. Durch das negative Vorzeichen in dem Ausdruck, der nNeuX berechnet, wird dieser Wert ebenfalls negativ und beträgt -350. Damit ergibt sich durch die Addition von 16 als neue x-Position –334, was gegenüber dem vorhergehenden Wert einer Verschiebung von slider nach rechts entspricht. Das Einblenden des betreffenden Bildes erfolgt relativ hart. Attraktiver erscheint eine Bewegung von einem ausgewählten Bild zum nächsten. Das entsprechende Prinzip haben wir im Kapitel Trigonometrie bereits kennen gelernt.

 var nNum:Number = Number(psPunkt. substring(5));  trace(„nNum: ” + nNum);  }

Wenn Sie auf einen Punkt klicken, gibt Flash im Nachrichtenfenster eine Zahl aus. Da zu einem angeklickten Punkt immer nur ein ganz bestimmtes Bild eingeblendet werden soll, müssen wir dafür sorgen, dass es einen Zusammenhang zwischen beiden gibt. Das erreichen wir durch eine Namenskonvention. Unsere Punkte tragen die Instanznamen punkt0 bis punkt5, die zugehörigen Bilder heißen pict0 bis pict5. Wird ein Punkt angeklickt, ruft er die Funktion sliding() auf und übergibt seinen Instanznamen als Argument. Die Funktion ermittelt aus diesem Namen die kennzeichnende Zahl. Wir erhalten Sie, indem wir einen Teilstring extrahieren, der schlicht die ersten fünf Zeichen (identisch mit dem String „punkt“) löscht und so automatisch nur noch die Zahl übrig lässt. Dabei spielt es keine Rolle, ob die gesuchte Zahl ein- oder mehrstellig ist (z. B. wenn 10 oder mehr grüne Punkte vorliegen). Testweise lassen wir uns das Ergebnis im Nachrichtenfenster ausgeben. Spannender wäre es natürlich, wenn tatsächlich Bilder eingeblendet würden. 48. Erweitern Sie die Deklaration von sliding() um folgende Zeilen (Fettdruck):  function sliding(psPunkt:String):Void {

 var nNum:Number = Number(psPunkt. substring(5));  trace(„nNum: ” + nNum);

 var nNeuX:Number = -bilder. slider[„pict“+nNum]._x+nOffset;  bilder.slider._x = nNeuX;  }

49. Löschen Sie den trace()-Befehl innerhalb von sliding(), da er nicht mehr benötigt wird.

500

51. Ersetzen Sie die Zuweisung  bilder.slider._x = nNeuX;

durch:  bilder.slider.onEnterFrame = function() {

 var nDif:Number = nNeuX-this._x;  if (Math.abs(nDif)>1) {

Kapitel 31  Bildergalerien

Aus Sicht der Usability erweist es sich als etwas verwirrend, dass der Anwender nicht erkennen kann, welcher Punkt gerade aktiviert wurde. Daher ist es sinnvoll, den aktiven Punkt in irgendeiner Form zu kennzeichnen. Wir haben im Zusammenhang mit dem onRollOver-Ereignis bereits mehrere Möglichkeiten angesprochen und wollen uns hier für eine Farbänderung entscheiden.

 this._x += nDif*nTempo;

53. Fügen Sie am Skriptanfang folgende Variableninitialisierung ein:

 this._x = nNeuX;

 var mAktiv:MovieClip;

}

 var nKlickFarbe:Number = 0 × 00ff99;

52. Fügen Sie am Skriptanfang folgende Variablen­ initialisierung ein:

54. Erweitern Sie den Funktionsblock um folgende Deklaration:

 var nTempo:Number = 0.3;

 function faerben(pnFarbe:Number):Void {

} else {

 delete this.onEnterFrame;

 var nOrigFarbe:Number = 0 × 7cca78;

 };

 var cFarbe:Color;

Wie Sie beim Testen erkennen, bewegt sich nun bei Mausklick slider weich von einem Bild zum nächsten, wobei die Bewegung immer langsamer wird, bis Flash das gewählte Bild ganz anzeigt. Wir weisen slider ein onEnterFrame zu, um permanent eine neue Position berechnen zu können. Innerhalb des onEnterFrame ermitteln wir den Abstand zum Ziel. Wenn er größer als der von uns willkürlich gewählte Wert 1 ist, addieren wir zur aktuellen x-Position ein Bruchteil der Entfernung. Dazu multiplizieren wir die Differenz einfach mit einer anfangs definierten Variablen, die kleiner 1 ist. In unserem Fall beträgt sie 0.3. Wenn die Entfernung z. B. -30 beträgt, ergibt unsere Berechnung -9, die wir zur aktuellen Position von slider addieren. Die Addition einer negativen Zahl entspricht einer Subtraktion, so dass wir hier faktisch eine 9 subtrahieren würden. Dann beträgt die Entfernung nur noch -21. Multiplizieren wir erneut mit 0.3, erhalten wir -6.3. Dieser Wert wird wiederum von der aktuellen x-Position subtrahiert. Während wir im ersten Schritt um 9 Pixel nach links gehen, sind es bei diesem zweiten Schritt nur noch 6.3 Pixel, was zu einer Verlangsamung der Bewegung führt. Der gesamte Prozess wiederholt sich solange, bis die Entfernung zwischen aktueller slider-Position und Ziel kleiner oder gleich 1 Pixel ist. In dem Fall setzen wir slider auf die Zielposition und löschen das onEnterFrame, da keine weitere Bewegung mehr benötigt wird.

 cFarbe = new Color(mAktiv);  cFarbe.setRGB(pnFarbe);  }

55. Erweitern Sie in der init()-Funktion innerhalb der for-Schleife das onPress-Ereignis wie folgt (Fettdruck):  aPunkte[i].onPress = function() {  sliding(this._name);

 if (mAktiv != undefined && mAktiv != this) { faerben(nOrigFarbe); }

mAktiv = this;

faerben(nKlickFarbe);  };

Bei einem Mausklick wird der aktivierte Punkt blaugrün eingefärbt. Klicken wir auf einen anderen Punkt, erhält der vorher aktive Punkt wieder seine ursprüngliche Farbe. Zunächst müssen wir den aktivierten Punkt speichern, so dass wir später wieder in der Lage sind, seine Originalfarbe herzustellen. Dazu legen wir die Variable mAktiv an, die anfangs leer bleibt (da ja noch kein Punkt angeklickt wurde). In zwei weiteren Variablen legen wir Farbwerte fest, um die Original-

31.1  Einfache Galerie mit Slider und internen Assets

und die Klickfarbe zu definieren. Last not least dient eine Variable zur Aufnahme eines Farbobjekts. Die Funktion faerben() führt das Umfärben durch. Sie weist der zuvor definierten Variable cFarbe ein konkretes Color-Objekt zu und ruft die setRGB()-Methode auf, um eine Umfärbung durchzuführen. Das zu färbende Objekt wird jeweils in mAktiv gespeichert, so dass wir in dieser Funktion direkt auf die Variable zugreifen können. Beim Mausklick auf einen Punkt müssen wir folgende Fälle unterscheiden:

• Die Variable mAktiv ist weder leer noch befindet

sich darin eine Referenz auf das aktuell angeklickte Objekt. In dem Fall wurde vorher bereits ein Punkt angeklickt. Da er in mAktiv gespeichert ist, rufen wir die faerben()-Funktion auf und übergeben den Originalfarbwert. So wird die in mAktiv enthaltene Instanz wieder grün umgefärbt. • Die Variable mAktiv ist entweder undefined, weil jetzt zum ersten Mal ein Klick ausgeführt wird, oder dort befindet sich eine Referenz auf den aktuell angeklickten Punkt, weil dieser vorher schon einmal aktiviert worden ist. Wir speichern die Referenz auf den angeklickten Punkt und rufen die faerben()-Funktion auf, der wir diesmal den Farbwert für den Mausklick übergeben. Im Gegensatz zum vorhergehenden Fall wird dieser Teil des Skriptes immer ausgeführt. Man könnte das Ganze noch präziser formulieren, indem man das Skript abbricht, wenn mAktiv auf den angeklickten Punkt referenziert:  if(mAktiv == this){  return;

//bisherige Anweisungen;  }

Um bei Mausklick noch zusätzliche Textinformationen einblenden zu können, benötigen wir natürlich die zugehörigen Texte. 56. Fügen Sie im Block der Variablendeklarationen folgende Zeilen ein:  var aPictInfos:Array = [„Ausschnitt 1“, „Ausschnitt 2“, „Ausschnitt 3“, „Ausschnitt 4“, „Ausschnitt 5“, „Ausschnitt 6“];  var tfInfos:TextField;

501

Die Textinhalte legen wir der Einfachheit halber in einem Array ab. Wichtig ist die Reihenfolge der Elemente, da wir über den Index einen Zusammenhang zu den grünen Punkten herstellen wollen. An erster Stelle muss also der zu punkt0, an zweiter Stelle der zu punkt1 usw. gehörige Text liegen. Da der Text in einem dynamischen Textfeld angezeigt werden soll, erzeugen wir zu dessen Aufnahme eine entsprechende Variable. 57. Erweitern Sie die init()-Funktion am Anfang um folgende Zeilen:  tfInfos = this. createTextField(„infotxt“, 1, bilder._x+bilder.rahmen._width/2, bilder._y+bilder._height, 1, 1);  tfInfos._visible = false;

 tfInfos.autoSize = „center“;

Der Textfeldvariablen wird ein konkretes Textfeld zugewiesen, das wir auf der Hauptzeitleiste bei Aufruf der init()-Funktion erzeugen. Es erhält den Instanznamen infotxt, der aber im weiteren Verlauf des Skriptes irrelevant ist, da wir es über die Variable tfInfos ansprechen wollen. Wir möchten es unterhalb der Instanz slider horizontal mittig einblenden. Dazu weisen wir ihm die x-Position der Instanz bilder zuzüglich der halben Rahmenbreite zu. Würden wir nur die X-Position von bilder verwenden, läge das Textfeld am linken Rand des eingeblendeten Bildes, da sich dessen Registrierungspunkt in der linken oberen Ecke befindet. Wir müssen es also noch um die halbe Breite des sichtbaren Bildes nach rechts verschieben. Leider können wir dazu nicht einfach die Eigenschaft bilder._width/2 verwenden; die betreffende Instanz umfasst nämlich nicht nur den sichtbaren Bereich, sondern die vollständige Breite von slider, der sich ja innerhalb von bilder befindet. Daher verwenden wir zur Berechnung einfach die Instanz bilder.rahmen. Deren Breite entspricht exakt der Breite des sichtbaren Bereichs. Die Definition der y-Position erfolgt anhand der y-Position von bilder zuzüglich ihrer Höhe, um die das Textfeld nach unten verschoben werden muss. Die Angaben für Breite und Höhe tragen wir der Form halber ein, sie werden jedoch bei der Zuweisung von konkretem Text automatisch auf die benötigten Werte gesetzt. Damit das Textfeld nicht sichtbar ist, solange es keinen Text enthält, setzen wir dessen Eigenschaft _visible auf

502

false. Um trotz verschiedener Textlängen das Feld

immer horizontal mittig zu sehen, definieren wir seine Textausrichtung als „center“. Wer möchte, kann für das Textfeld einen Rahmen sowie Hintergrund definieren. Idealerweise stimmt die Hintergrundfarbe mit dem Highlight des Hotspots überein. In dem Fall müssen Sie allerdings eine andere Farbe wählen, da der hier verwendete Grünton eigentlich zu plakativ wirkt, um das Textfeld einzufärben. Der entsprechende Code, einzufügen nach den eben erstellten Zeilen, würde lauten: tfInfos.background = true;

tfInfos.backgroundColor = 0 × 00ff99; tfInfos.border = true;

Kapitel 31  Bildergalerien

Text, der bekanntermaßen zum zweiten Punkt gehört.

31.2 Code Zur Kontrolle der gesamte Code: //-----------–- vars –----------------var nTempo:Number = 0.3;

var nAenderung:Number = 8;

var nScaleMax:Number = 132;

var aPunkte:Array = [bild.punkt0, bild. punkt1, bild.punkt2, bild.punkt3, bild. punkt4, bild.punkt5];

tfInfos.borderColor = 0 × 00ff99;

var mAktiv:MovieClip;

Testen Sie und ändern Sie die Farbe in einen dunkleren Ton, der Ihrem Geschmack eher entspricht.

var nKlickFarbe:Number = 0 × 00ff99;

58. Erweitern Sie die sliding()-Funktion vor der Zuweisung des onEnterFrame-Ereignisses um folgende Zeilen:  tfInfos.text = „“;  tfInfos._visible = false;

Das Textfeld wird geleert, indem wir ihm einen leeren String zuweisen, und auf unsichtbar geschaltet. Damit wollen wir sicherstellen, dass ein zu einem vorher angeklickten Punkt angezeigter Text bei einem erneuten Mausklick verschwindet. Verwenden Sie ein Textfeld ohne Rahmen und Hintergrund, können Sie darauf verzichten, die Eigenschaft _visible auf false zu setzen.

var nOrigFarbe:Number = 0 × 7cca78; var cFarbe:Color;

var aPictInfos:Array = [„Ausschnitt 1“, „Ausschnitt 2“, „Ausschnitt 3“, „Ausschnitt 4“, „Ausschnitt 5“, „Ausschnitt 6“]; var tfInfos:TextField;

var nOffset:Number = bilder.slider._x;

//------------ functions –------------function sliding(psPunkt:String):Void {

 var nNum:Number = Number(psPunkt.substring(5));  var nNeuX:Number = -bilder. slider[„pict“+nNum]._x+nOffset;  tfInfos.text = „“;

59. Erweitern Sie innerhalb der Deklaration von sliding() den else-Fall des onEnterFrameEreignisses wie folgt:

 tfInfos._visible = false;

 tfInfos._visible = true;

 var nDif:Number = nNeuX-this._x;

 tfInfos.text = aPictInfos[nNum];

Bei Mausklick muss das Textfeld wieder sichtbar werden. Den zugehörigen Text können wir anhand der ermittelten Kennzahl des angeklickten Punkts herausfinden. Diese Kennzahl verwenden wir für den Zugriff auf das Array, in dem sich die Texte befinden, und weisen das dort gefundene Element dem Textfeld zu. Nehmen wir an, punkt1, also der zweite Point of Interest, wurde angeklickt. Dann enthält nNum den Wert 1. Greifen wir auf aPictInfos mit diesem Indexwert zu, erhalten wir automatisch den zweiten

 bilder.slider.onEnterFrame = function() {  if (Math.abs(nDif)>1) {

 this._x += nDif*nTempo; } else {

 this._x = nNeuX;

 delete this.onEnterFrame;  tfInfos._visible = true;

 tfInfos.text = aPictInfos[nNum]; } }; }

31.3  Eine Variante

503

function blinken():Void {

31.3 Eine Variante

 this._yscale += nAenderung;

Auf diesem Code aufbauend lassen sich sehr einfach weitere Varianten generieren. Wir wollen uns ein Beispiel anschauen, bei dem die Navigation durch die Bilder über simple Buttons aufgerufen wird, die sich oberhalb der Instanz slider befinden. Eine Grafik mit Hotspots entfällt. Zur Kennzeichnung der onRollOver-Ereignisse der Buttons verwenden wir eine weitere Grafik, die sich jeweils zum aktiven Button hinbewegt. Diese Bewegung entspricht derjenigen der Bilder. Die geplante Anwendung sieht aus wie in Abbildung 157.

 this._xscale += nAenderung;  if (this._xscale>nScaleMax || this._ xscale<100) {  nAenderung *= -1; } }

function faerben(pnFarbe:Number):Void {  cFarbe = new Color(mAktiv);  cFarbe.setRGB(pnFarbe); }

function init():Void {

 tfInfos = this. createTextField(„infotxt“, 1, bilder._x+bilder.rahmen._width/2, bilder._y+bilder._height, 1, 1);  tfInfos._visible = false;

 tfInfos.autoSize = „center“;

 for (var i:Number = 0; i
 aPunkte[i].onRollOver = function() {  this.onEnterFrame = blinken; };

 aPunkte[i].onRollOut = function() {  delete this.onEnterFrame;

 this._xscale = this._yscale=100;  nAenderung = Math. abs(nAenderung);

1. Erstellen Sie eine Standarddatei. 2. Ändern Sie objects um in maske. Diese Ebene wird die Maske mit den Bildern und den Buttons aufnehmen. 3. Importieren Sie in die Bibliothek 6 Grafiken (350 × 250). Der Einfachheit halber können Sie dieselben Bilder nehmen, die Sie in der vorhergehenden Übung verwendet haben (c1.png bis c6.png). 4. Importieren Sie die Grafiken picgallery003.png und picgallery003marker.png. Sie stellen das Fenster für die Bilder sowie den Marker dar. 5. Erstellen Sie in der Bibliothek einen Ordner impPicts und verschieben alle importierten Grafiken dorthin. 6. Erstellen Sie einen leeren MovieClip namens mcMaske. 7. Nennen Sie die erste Ebene bilder.

};

 aPunkte[i].onPress = function() {  sliding(this._name);

i f (mAktiv != undefined && mAktiv != this) {  faerben(nOrigFarbe); }

 mAktiv = this;

 faerben(nKlickFarbe); }; } }

//-------------- aufruf –-------------init();

Abbildung 157:  Variante der Bildergalerie

504

8. Fügen Sie darüber folgende weitere Ebenen ein: maske, fenster, btns, marker. 9. Fügen Sie auf bilder die Grafik c1.png an der Position 16,47 ein. Wir erstellen an dieser Stelle den Slider, der mit der vorhergehenden Übung nahezu identisch ist. 10. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcSlider, Instanzname slider, Registrierungspunkt links oben). 11. Öffnen Sie mcSlider durch Doppelklick im Symbolbearbeitungsmodus. 12. Wandeln Sie dort c1.png wiederum in einen MovieClip um (Bibliotheksname mcPict0, Instanzname pict0, Registrierungspunkt links oben). 13. Fügen Sie im Symbolbearbeitungsmodus von mcSlider die Grafiken c2.png bis c6.png auf den x-Positionen 350, 700, 1050, 1400 und 1750 ein. Die y-Position beträgt jeweils 0. 14. Wandeln Sie jede der im vorhergehenden Schritt eingefügten Grafiken in einen MovieClip um (Bibliotheksname mcPict1 bis mcPict5, Instanzname pict1 bis pict5, Registrierungspunkt links oben). 15. Kehren Sie in den Symbolbearbeitungsmodus von mcMaske zurück. 16. Erstellen Sie auf maske an der Position 16,47 ein Rechteck mit leicht abgerundeten Ecken (347,247, Farbe beliebig, kein Rand) ein. 17. Wandeln Sie es in einen MovieClip um (Bibliotheksname mcFlaeche, Instanzname maske, Registrierungspunkt links oben). 18. Fügen Sie auf der Ebene fenster picgallery003. png auf der Position 0,0 ein. Alternativ erstellen Sie ein entsprechendes Fenster in Flash und verschieben die betreffende Ebene ganz nach unten, so dass die Bilder später darüber liegen.

Kapitel 31  Bildergalerien

19. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcRahmen, Instanzname rahmen, Registrierungspunkt links oben). 20. Erstellen Sie auf der Ebene btns auf der Position 23,21 ein dynamisches Textfeld namens txt (schwarz, Verdana, Bold, 10, nicht auswählbar, kein Rahmen). Das Textfeld sollte groß genug sein, um den Text „Bild 1“ lesbar anzuzeigen. 21. Wandeln Sie das Textfeld in einen MovieClip um (Bibliotheksname mcBtn, Instanzname btn0, Registrierungspunkt links oben). 22. Setzen Sie Duplikate dieser Instanz auf die x-Positionen 77, 131, 185 und 239. Die y-Position beträgt jeweils 21. Falls Sie vorher Text geschrieben haben, müssen Sie ihn in den Duplikaten nicht löschen, da wir ihn später ohnehin per Actionscript definieren. 23. Weisen Sie den Kopien die Instanznamen btn1 bis btn4 zu. 24. Fügen Sie auf marker die Grafik picgallery003marker.png auf der Position 15.3,15.9 ein. Alternativ zeichnen Sie dort vier Rundungen, die jeweils die Ecken des ersten Buttons markieren sollen. 25. Wandeln Sie die Grafik in einen MovieClip um (Bibliotheksname mcMarker, Instanzname marker, Registrierungspunkt links oben). Den Aufbau des MovieClips erkennen Sie in Abbildung 158. 26. Weisen Sie der Ebene maske über das Kontextmenü den Stil Maske zu, so dass die darunter liegende Ebene mit slider maskiert wird. Nur noch das erste Bild von slider ist sichtbar. 27. Kehren Sie zur Hauptzeitleiste zurück. 28. Fügen Sie in der Ebene maske an beliebiger Stelle mcMaske ein.

Abbildung 158:  Aufbau des MovieClips mcMaske bei nicht aktivierter Maske

31.3  Eine Variante

29. Weisen Sie dem eingefügten MovieClip den Instanznamen bild zu. 30. Weisen Sie actions folgendes Bildskript zu:  //------------ vars –--------------  var nTempo:Number = 0.3;  var nOffset:Number, nMarkerOffset:Number;

 var aBtns:Array = [bild.btn0, bild. btn1, bild.btn2, bild.btn3, bild. btn4];

 var aBtnText:Array = [„Bild 1“, „Bild 2“, „Bild 3“, „Bild 4“, „Bild 5“];

Der Aufbau erfolgt analog zur obigen Übung. Wir definieren zunächst einige Variablen, in unserem Fall für das Tempo der Animation der Bilder und des Markers, für den Abstand von slider und marker vom Koordinatenursprung der Zeitleiste, in der sie sich befinden, sowie zwei Arrays für die Buttons und die Buttonbeschriftungen. Im letztgenannten Fall machen wir es uns zugegebenermaßen einfach, indem unsere Buttons doch recht allgemeine Bezeichnungen erhalten. Bei Beschriftungen unterschiedlicher Länge müssen Sie natürlich darauf achten, dass sie nicht den betreffenden Button sprengt. Passen Sie in dem Fall die Breite aller Buttons in Ihrem Bildbearbeitungsprogramm an den längsten Text an. 31. Erweitern Sie das Skript um folgende Zeilen:  //------------ functions –---------  function init() {

 nMarkerOffset = aBtns[0]._x-bild. marker._x;  nOffset = bild.slider._x;

 for (var i:Number = 0; i
 aBtns[i].txt.text = aBtnText[i];

 aBtns[i].onRollOver = function() {  var nNum:Number = Number(this._name.substring(3));  var nNeuMarkerX:Number = this._x-nMarkerOffset;  var nNeuSliderX = -bild. slider[„pict“+nNum]._ x+nOffset;

505

 bewegung(this._parent.marker, nNeuMarkerX);  bewegung(this._parent.slider, nNeuSliderX); }; }  }

 //------------ aufruf –------------  init();

Bei der späteren Animation errechnet sich die Position von marker und slider immer in Bezug zum Koordinatensystem von mcMaske, also dem MovieClip, in dem wir sie abgelegt haben. Da sich beide horizontal nicht im Koordinatenursprung befinden, speichern wir am Anfang der init()-Funktion den Abstand zum Nullpunkt in zwei Variablen. Anschließend greift die init()-Funktion wie zuvor auch auf das Array zu, in dem alle aktivierbaren Elemente, also unsere Buttons, erfasst wurden. Jeder Button erhält die im zweiten Array definierte Beschriftung, wobei wir uns bei der korrekten Zuordnung an der Indexposition innerhalb des Arrays orientieren. Der erste Button erhält also den ersten Text, der zweite den nächsten Text usw. Zusätzlich weisen wir jedem Button ein onRollOver zu, das zweimal eine Bewegungsfunktion aufruft. Da wir sowohl den Marker als das einen Button bei onRollOver kennzeichnendes Element wie auch slider bewegen müssen, benötigen wir die Bewegungsfunktion doppelt. Wir ermitteln die einen Zusammenhang zwischen Button und Bild herstellende, im Instanznamen enthaltene Zahl und berechnen mit ihrer Hilfe das anzuzeigende Bild. Das gleiche machten wir in der vorhergehenden Übung, doch wurde dort die Berechnung innerhalb der aufgerufenen Funktion durchgeführt. Auch für marker errechnen wir eine neue Position, die sich einfach aus der Position des angeklickten Buttons abzüglich des Marker-Abstands zum Koordinatenursprung ergibt. Abschließend rufen wir die Funktion bewegung() auf und übergeben ihr die berechnete Zielposition sowie das zu bewegende Objekt. 32. Fügen Sie innerhalb des Funktionsblocks folgende Deklaration ein:  function bewegung(pmWer:MovieClip, pnZielX:Number):Void {

 pmWer.onEnterFrame = function() {

506

Kapitel 31  Bildergalerien

 var nDif:Number = pnZielXthis._x;

 nMarkerOffset = aBtns[0]._x-bild. marker._x;

 this._x += nDif*nTempo; } else {

 for (var i:Number = 0; i
 delete this.onEnterFrame;

 aBtns[i].onRollOver = function() {

 if (Math.abs(nDif)>1) {

 nOffset = bild.slider._x;

 this._x = pnZielX;

 aBtns[i].txt.text = aBtnText[i];

}

 var nNum:Number = Number(this._ name.substring(3));

};

}

Wenn Sie testen, wird sich marker bei onRollOver über einen der Buttons zu ihm hinbewegen. Gleichzeitig blendet slider das zugehörige Bild ein. Die Funktion bewegung() enthält als Parameter das Objekt, das bewegt werden soll, sowie den neuen x-Wert, zu dem hin die Bewegung erfolgen soll. Sie weist dem jeweils übergebenen Objekt exakt dasselbe onEnterFrame-Ereignis zu, das wir in der vorherigen Übung verwendeten: Die Entfernung zum Ziel wird permanent ermittelt. Ist sie größer oder gleich 1, multiplizieren wir sie mit einem sehr kleinen Faktor und verändern die aktuelle x-Position um diesen Wert. Andernfalls setzen wir das Objekt auf die Zielposition und löschen das onEnterFrame-Ereignis. Diese parametrisierte Funktion hat den Vorteil, dass wir sie für alle benötigten Bewegungen verwenden können anstatt jeweils eine spezifische Funktion für die Box sowie für die Bilder zu schreiben. Natürlich wäre es hier möglich, auch Text einzublenden. Dazu müsste man wie in der ersten Übung verfahren.

 var nNeuMarkerX:Number = this._x-nMarkerOffset;

 var nNeuSliderX = -bild. slider[„pict“+nNum]._x+nOffset;  bewegung(this._parent.marker, nNeuMarkerX);  bewegung(this._parent.slider, nNeuSliderX); }; }

}

function bewegung(pmWer:MovieClip, pnZielX:Number):Void {

 pmWer.onEnterFrame = function() {

 var nDif:Number = pnZielX-this._x;  if (Math.abs(nDif)>1) {

 this._x += nDif*nTempo; } else {

 this._x = pnZielX;

 delete this.onEnterFrame; }

31.4 Code Zur Kontrolle der Code:

}

};

//-------------- aufruf –-------------init();

//-------------- vars –---------------var nTempo:Number = 0.3; var nOffset:Number, nMarkerOffset:Number;

var aBtns:Array = [bild.btn0, bild. btn1, bild.btn2, bild.btn3, bild.btn4]; var aBtnText:Array = [„Bild 1“, „Bild 2“, „Bild 3“, „Bild 4“, „Bild 5“];

//------------ functions –------------function init() {

31.5 Galerie mit externen Assets Wenn die anzuzeigenden Bilder eine gewisse Größe und Menge überschreiten oder der Anwender bzw. Kunde selbst in der Lage sein soll, die Galerie seinen eigenen Wünschen anzupassen, empfiehlt es sich, die eingangs erwähnte Variante zu wählen, also die Bilder nicht direkt in Flash einzubinden, sondern sie in einen

31.5  Galerie mit externen Assets

507 Abbildung 159:  Aufbau der Galerie mit externen Assets

eigenen Ordner abzulegen. Sie werden dann bei Klick auf einen Thumbnail extern geladen. Zu Veranschaulichung wählen wir hier eine simpel aufgebaute Galerie, die es zulässt, mehrere verschiedene Bildkategorien auszuwählen. Abhängig von dieser Wahl werden die zugehörigen Thumbnails ebenfalls dynamisch angezeigt. Da alle Grafiken extern vorliegen, geben wir dem Anwender über einen Preloader einen Hinweis auf den Ladefortschritt. Der Einfachheit halber verwenden wir hier lediglich ein recht nackt ausschauendes Textfeld, das Sie selbstverständlich durch eines der im Workshop Preloader behandelten Beispiele ersetzen können. Hinsichtlich der Anordnung haben wir uns für eine schlichte Variante entschieden, die Sie nach Belieben ändern können: Am linken Rand befinden sich die Buttons mit den einzelnen Kategorien, daneben blenden wir die Thumbnails in drei Spalten ein und rechts daneben wird das aufgerufene große Bild angezeigt. Abbildung 159 zeigt den Aufbau der Anwendung. Die Thumbnails besitzen in unserem konkreten Fall eine Größe von 80 × 80, die großen Bilder von 350 × 250. Um das Modifizieren der Galerie zu vereinfachen, erfassen wir die benötigten Informationen wie Kategorien, Anzahl der Bilder sowie Infotexte in einer XML-Datei. Sie lässt sich mit einem beliebigen Texteditor erstellen, falls Sie keinen XML-Editor zur Hand haben. 1. Erstellen Sie folgende Ordner und Unterordner: galerie\erdhorn\bilder. Selbstverständlich können Sie andere Bezeichnungen wählen, müssen diese jedoch im Code entsprechend anpassen. 2. Fügen Sie dort die anzuzeigenden großen Bilder ein. Deren Namen lauten erdhorn0.jpg bis erdhorn7.jpg.

3. Erstellen Sie im Ordner erdhorn den Unterordner thumbs. 4. Fügen Sie dort die Thumbnails ein. Deren Namen lauten ebenfalls erdhorn0.jpg bis erdhorn7.jpg. 5. Verfahren Sie mit folgenden Ordnern auf die gleiche Weise: galerie\gepard galerie\affe Daraus ergibt sich eine Ordnerstruktur wie in Abbildung 160. Der übergeordnete Ordner wird später die Flashsowie die XML-Datei enthalten. In den übrigen Ordnern liegen die nach Kategorien sortierten Bilder und Thumbnails vor. Indem wir für Bilder und Thumbnails dieselben Namen verwenden, erleichtern wir uns das spätere Skripten. Alternativ könnte man durch ein Präfix, z. B. „th“, die Thumbnails nament-

Abbildung 160:  Ordnerstruktur der Galerie

508

lich eindeutig von den großen Bildern unterscheiden, müsste dann aber dementsprechend den Code anpassen. 6. Öffnen Sie Ihren Texteditor/XML-Editor und erstellen dort eine XML-Datei, die Informationen über die Bildkategorien, die einzelnen Bilder sowie zugehörige Infotexte enthält. Sie könnte beispielhaft folgendermaßen aussehen: 



  

Kapitel 31  Bildergalerien

  

  

  

 











  

 

 





   

    

31.5  Galerie mit externen Assets

7. Speichern Sie die Datei als galerie.xml in den Ordner galerie. Zusätzlich zu den vorhandenen Bilder legen wir noch zwei Dummy-Ordner an, die Sie natürlich gerne mit eigenen Grafiken füllen können. Um die Galerie übersichtlich zu halten, beschränken wir die Anzahl der Kategorien sowie Bilder. 8. Erstellen Sie eine Standarddatei in Flash. Aus Platzgründen wählen wir diesmal allerdings eine Größe von 950 × 720. 9. Importieren Sie die Grafiken bigviewFrame.png, buttonbox120plus.png, buttonForButtonbox120plus.png und picgalbox_3 × 3.png. 10. Erstellen Sie in der Bibliothek einen Ordner impPicts und verschieben die importierten Grafiken dorthin. 11. Erstellen Sie einen leeren MovieClip namens btnKategorie. 12. Weisen Sie ihm einen gleichlautenden Verknüpfungsnamen zu. 13. Benennen Sie die aktuelle Ebene grafik. 14. Fügen Sie dort auf 0,0 die Grafik buttonForButtonbox120plus.png ein. 15. Fügen Sie eine neue Ebene namens txt hinzu. 16. Erstellen Sie dort auf der Position 50,5 ein dynamisches Textfeld (Instanzname txt, Verdana, 12, #666666, nicht auswählbar, zentriert). Diesen MovieClip mit dem Textfeld wollen wir zur Anzeige der Kategorien verwenden. Selbstverständlich kann man dieses Objekt auch zur Laufzeit zeichnen, worauf wir aber hier zwecks Vereinfachung verzichten wollen. 17. Erstellen Sie einen leeren MovieClip namens mcMenue.

18. Weisen Sie ihm einen gleichlautenden Verknüpfungsnamen zu. 19. Fügen Sie dort auf 0,0 die Grafik buttonbox120plus.png ein.

509

Der MovieClip dient zur Aufnahme von Thumbnails, wobei wir die Zahl auf 9 beschränken. Die Größe lässt sich allerdings prinzipiell mit Hilfe von Actionscript anpassen. 23. Erstellen Sie einen leeren MovieClip namens mcBild. 24. Weisen Sie ihm einen gleichlautenden Verknüpfungsnamen zu. 25. Benennen Sie die aktuelle Ebene info. 26. Erstellen Sie an der Position 76,80 ein dynamisches Textfeld (Instanzname info, Verdana, 12, #666666, nicht auswählbar, zentriert, mehrzeilig, Breite ca. 230). Achten Sie darauf, dass das Textfeld vier bis fünf Zeilen Text aufnehmen kann. 27. Fügen Sie darüber folgende weitere Ebenen ein: bild , maske, rahmen, txt. 28. Erstellen Sie einen leeren MovieClip namens mcBildGross. 29. Kehren Sie in den Symbolbearbeitungsmodus von mcBild zurück. 30. Fügen Sie auf der Ebene bild den eben erstellten MovieClip mcBildGross an der Position 16,16 ein. 31. Weisen Sie ihm den Instanznamen bild zu. 32. Erstellen Sie auf maske an der Position 16,16 ein Rechteck mit leicht abgerundeten Ecken (346 × 246, Farbe beliebig). 33. Weisen Sie dieser Ebene den Stil Maske zu, so dass die darunter liegende Ebene bild maskiert wird. 34. Fügen Sie auf rahmen an der Position 0,0 die Grafik bigviewFrame.png ein. 35. Erstellen Sie auf txt an der Position 76,274 ein dynamisches Textfeld (Instanzname txt, Verdana, 12, #666666, nicht auswählbar, zentriert, mehrzeilig, Breite ca. 230). Wenn wir auf einen Thumbnail klicken, soll in diesem MovieClip das zugehörige große Bild angezeigt werden.

Die Buttons mit den Kategorien werden später per Actionscript in diesem Menü eingefügt.

36. Kehren Sie zur Hauptzeitleiste zurück. 37. Weisen Sie actions folgendes Bildskript zu:

20. Erstellen Sie einen leeren MovieClip namens mcThumbs. 21. Weisen Sie ihm einen gleichlautenden Verknüpfungsnamen zu. 22. Fügen Sie dort auf 0,0 die Grafik picgalbox_3 × 3. png ein.

 //------------- vars –-------------  var mThumbs:MovieClip, mBild:MovieClip, mMenue:MovieClip;  var mThumb:MovieClip, mThbild:MovieClip, mBtn:MovieClip, mAktiv:MovieClip;

510

 var mRoot:MovieClip = this;  var mTxt:TextField;

Wir benötigen zahlreiche MovieClips, um grafischen Content aufzunehmen. Um sie einfacher referenzieren zu können, legen wir Variablen an für die Thumbnails, das große Bild sowie die Kategorie-Buttons an. In den weiteren Variablen wollen wir eine Referenz auf jeweils einen konkreten Thumbnail, das große Bild, einen Button sowie den gerade aktiven Button speichern. Außerdem benötigen wir eine Referenz auf _root (alternativ könnte man auch mit der Eigenschaft _lockroot arbeiten). Schließlich benötigen wir noch eine Variable, die jeweils ein dynamisch erzeugtes Textfeld referenziert. Mit dessen Hilfe zeigen wir später den Ladefortschritt an. 38. Erweitern Sie das Skript um folgende Variablendeklarationen:  var nThumbBreite:Number = 80;  var nThumbHoehe:Number = 80;  var nSpalten:Number = 3;  var nTiefe:Number = 0;

 var nAlpha:Number = 10;  var nAbstand = 5;

 var nThumbOffset:Number;

Wir halten Breite und Höhe der Thumbnails in jeweils einer eigenen Variable fest. An dieser Stelle sind mehrere Varianten denkbar: Wir könnten diesen Wert in der XML-Datei speichern. Wir wären dann insofern flexibler als wir diesen Wert einfach ändern könnten, ohne die Flash-Datei öffnen zu müssen. Allerdings müssten wir dann später im Skript das Layout dynamisch kontrollieren, um zu verhindern, dass es durch unpassende Maße zerstört wird. Alternativ könnten wir ganz am Anfang einen Thumbnail probeweise laden und seine Ausmaße auslesen. Der von uns gewählte Weg ist jedoch insofern vertretbar, als wir bei Thumbnails keine allzu große Variabilität besitzen. Wählen wir ihre Dimension zu klein, lässt sich nicht mehr auf das große Bild schließen, ist sie dagegen zu groß, bleibt nicht mehr genügend Platz für ein großes Bild. Zudem stellt sich dann natürlich die Frage, ob ein großes Bild überhaupt noch einen Sinn macht. An weiteren Werten legen wir die Anzahl der Spalten für die Thumbnails, ihre anfängliche Deckkraft sowie ihren Abstand zueinander fest. Da der erste Thumbnail nicht direkt am linken Rand eines überge-

Kapitel 31  Bildergalerien

ordneten MovieClips eingeblendet wird, müssen wir den zu verwendenden Abstand erfassen. Dazu legen wir eine Variable an, deren konkreten Wert wir an späterer Stelle errechnen müssen. 39. Erweitern Sie das Skript um folgende Variablendeklarationen:  var mlLaden:MovieClipLoader = new MovieClipLoader();

 var oListener:Object = new Object();  var xmlGalerie:XML = new XML();  var aKategorien:Array = [];  var aBilder:Array = [];  var sKategorie:String;

 var sOrdnerThumb:String = „/ thumbs/“;

 var sOrdnerBilder:String = „/bilder/“;

Um den Ladevorgang zu kontrollieren, instanziieren wir einen MovieClipLoader und richten einen Listener ein. Die übrigen Variablen dienen dazu, die externen Informationen einzulesen und zu speichern. Dazu benötigen wir ein neues XML-Objekt sowie zwei Arrays, in denen einerseits alle Kategorien und andererseits alle Bilder verwaltet werden. Um die aktuell gewählte Kategorie speichern zu können, richten wir sKategorie ein. Last not least legen wir in zwei Variablen die pro Kategorie vorhandenen Unterordner für die Bilder sowie die Thumbnails fest. Auch diese Daten lassen sich, falls gewünscht, in der XML-Datei definieren, so dass wir die entsprechenden Werte erst dann in die Variablen schreiben würden, wenn wir die XML-Datei eingelesen hätten. 40. Erweitern Sie das Skript um folgende FunktionsDeklaration:  //----------- functions –----------  function init():Void {

 var aTemp:Array = [];

 var aTemp2:Array = [];

 xmlGalerie.ignoreWhite = true;  xmlGalerie.onLoad = function(pErfolg:Boolean) {  if (pErfolg) {

v ar sXML:String = this.firstChild.childNodes;

31.5  Galerie mit externen Assets

 for (var i:Number = 0; i<sXML. length; i++) {

 aTemp = [sXML[i].attributes. titel, sXML[i].attributes. intro];  aKategorien.push(aTemp);

 for (var j:Number = 0; j<sXML[i]. childNodes.length; j++) {

 aTemp = [sXML[i].childNodes[j].attributes.nr, sXML[i].childNodes[j]. attributes.info];  aTemp2.push(aTemp); }

 aBilder.push(aTemp2);  aTemp2 = []; } } };

 xmlGalerie.load(„galerie.xml“);

}

Da die benötigten Informationen in einer externen XML-Datei vorliegen, muss diese zuerst eingelesen und verarbeitet werden, ehe Flash irgend etwas anzeigen kann. Wir wollen die Daten jeweils in mehrdimensionalen Arrays erfassen, die (beispielhaft) folgendermaßen aussehen:

• aKategorien = [[„erdhorn“,„klein, flink,

ständig auf Nahrungssuche  – so sind sie halt, die braun-grauen Verwandten des Einhorns.“],[„gepard“,„Eine Großkatze mit Booster. “]]. Pro Kategorie legen

wir die benötigte Information, bestehend aus dem Namen der Kategorie und einem zugehörigen Infotext, in einem eigenen Array ab, das in aKategorien gespeichert wird. Die Gesamtzahl der Kategorien entspricht der Länge von aKategorien.

• aBilder

= [[[„0“, „Trotz seiner athletischen Statur gilt das Erdhorn als Vielfraß.“],[„1“,“ Das Erdhorn übertrifft den Maulwurf durchaus an Attraktivität.“]]]. Etwas verschachtelter sieht aBilder aus, da wir pro Kategorie Informationen

erfassen, die ihrerseits in jeweils einem eigenen Array gespeichert wurden. Jedes Bild wird mit seiner Nummer sowie zugehörigem Text in einem temporären Array abgelegt, das seinerseits pro Kate-

511

gorie in ein weiteres temporäres Array gespeichert wird. Sind alle zu einer Kategorie gehörigen Bilder erfasst, wird dieses temporäre Array zu aBilder hinzugefügt. Die Gesamtzahl der Bilder entspricht dann jeweils der Länge der Elemente, die aBilder enthält. Zunächst richten wir zwei temporäre Arrays ein. Während für das Befüllen von aKategorien eigentlich eins ausreichend wäre, benötigen wir aufgrund der stärker verschachtelten Struktur von aBilder zwei Arrays dieser Art. Anschließend weisen wir Flash an, beim Einlesen der XML-Datei die Leerräume zu ignorieren. Das Herzstück der init()-Funktion bildet das onLoad-Ereignis, das dann ausgelöst wird, wenn die XML-Datei geladen wurde (bzw. der Ladeversuch fehlschlug). Erhalten wir true bei diesem Ereignis, wissen wir, dass nun die Auswertung der Daten beginnen kann. Formal gesehen sollte man auch den elseFall, nämlich das missglückte Laden behandeln, etwa indem man dem User ein Feedback gibt. Wir wollen es hier aus Gründen der Vereinfachung unterlassen. Um den Zugriff zu erleichtern, speichern wir alle Unterknoten des Hauptknotens. Wie im ersten Teil des Buches im Kapitel XML gezeigt, entspricht der Hauptknoten dem gesamten Dokument. Bei den Unterknoten handelt es sich jeweils um alle die einzelnen Kategorien beschreibenden Angaben. In der aktuellen Form umfasst das Dokument dementsprechend 5 derartiger Knoten. Da wir die benötigten Informationen in den Attributen namens „titel“ und „intro“ abgelegt haben, greifen wir mit Hilfe einer Schleife darauf zu. Wir speichern sie in einem temporären Array, das seinerseits in aKategorien eingefügt wird. Da wir in dieser Schleife ohnehin jede Kategorie einzeln ansprechen, können wir gleichzeitig in einer weiteren, inneren Schleife die Inhalte der Kategorien sukzessive auslesen. Sie entsprechen Unterknoten der Unterknoten (ein Glück, dass unser Dokument nicht noch tiefer verschachtelt ist  – das ließe sich sprachlich ja gar nicht mehr verantworten!). Hier gehen wir auf die gleiche Weise vor und lesen die benötigten Attribute, nämlich „nr“ und „info“ aus. Sie werden wie bereits oben beschrieben in ein temporäres Array gespeichert und letztlich in aBilder abgelegt. Am Ende der Schleife liegen alle Daten vor, um mit dem konkreten Aufbau der Galerie zu beginnen. Abschließend lösen wir die Auswertung aus, indem wir das fragliche XML-Dokument laden.

512

Kapitel 31  Bildergalerien

41. Erweitern Sie die Deklaration von init() folgendermaßen (Fettdruck):

43. Fügen Sie einen Aufruf ein:

 function init(pMenueX:Number, pMenueY:Number):Void {

 init(10, 100);

 //------------- aufruf –------------

Beim Testen werden in der linken oberen Ecke 5 Buttons mit den auswählbaren Kategorien dargestellt. Den für die Aufnahme der Buttons eingerichteten Behälter namens mcMenue fügen wir ein und referenzieren ihn in mMenue. Er wird auf den Werten posi  mMenue = mRoot. attachMovie(„mcMenue“, „behMenue“, tioniert, die beim Aufruf von init() als Argument mRoot.getNextHighestDepth()); übergeben werden. Beachten Sie, das in unserem konkreten Fall die Grafik etwas weiter vom linken Rand  mMenue._x = pMenueX; entfernt scheint als aufgrund des in init() angege  mMenue._y = pMenueY; benen Arguments von 10 Pixeln zu erwarten wäre.  for (var i:Number = 0; Das liegt daran, dass unsere Grafik am Rand einen i
31.5  Galerie mit externen Assets

Schließlich weisen wir jedem Button einen noch zu definierenden Mausklick zu. Nachdem alle Buttons positioniert wurden, blenden wir den Behälter für die Thumbnails ein. Seine Position entspricht der Position des Menüs zuzüglich dessen Breite sowie einem kleinen Wert, um einen zusätzlichen Abstand zu erhalten. Vertikal verwenden wir die gleiche Position wie beim Menü. Diese Vorgehensweise hat den Vorteil, dass eine Änderung der Menübreite ohne Auswirkungen auf den Code bleibt. Um die Thumbnails später korrekt positionieren zu können, berechnen wir an dieser Stelle bereits deren Abstand zum linken Rand. Wir möchten die Thumbnails horizontal mittig innerhalb des vorgesehenen MovieClips setzen. Dazu müssen wir von der Gesamtbreite dieses MovieClips die Breite aller Thumbnails einer Reihe zuzüglich des kleinen Abstands zwischen ihnen subtrahieren. Wenn wir das Ergebnis durch zwei dividieren, erhalten wir den Abstand der Thumbnails vom linken und rechten Rand. Den Behälter für das große Bild fügen wir als mBild ein. Seine vertikale Position entspricht derjenigen der bisher definierten MovieClips. Horizontal möchten wir ihn mittig in dem rechts neben dem Thumbnail-Behälter freien Bereich einfügen. Zum leichteren Verständnis wurde die notwendige Berechnung hier in mehrere Zeilen aufgeteilt. Zunächst ermitteln wir in der Variablen nPos die Breite des zur Verfügung stehenden Raumes. Er entspricht der Bühnenbreite abzüglich aller eingefügter Elemente (einschließlich von mBild und unter Berücksichtigung des Abstands zwischen diesen Elementen). Dazu subtrahieren wir von der Bühnenbreite die Breite von mBild. Anschließend subtrahieren wir vom Ergebnis die x-Position des Thumbnail-Behälters zuzüglich dessen Breite. Da sich die erwähnte x-Position rechts von mMenue befindet, schließen wir auf diese Weise automatisch die Breite von mMenue und dessen Abstand zu mThumbs mit ein. Dividieren wir das Ergebnis durch 2, erhalten wir den Abstand, den mBild nach rechts und links einhalten muss, um in dem freien Raum horizontal mittig angeordnet werden zu können. Die gewünschte Position entspricht dann dem rechten Rand des Thumbnail-Behälters (bzw. mThumb._x + mThumb._width) zuzüglich dem errechneten Wert. Abschließend rufen wir in gewohnter Weise die init()-Funktion auf.

513

44. Erweitern Sie die init()-Funktion unmittelbar nach den Zeilen, in denen mBild positioniert wird:  mlLaden.addListener(oListener);  sKategorie = aKategorien[0][0];  bilderThumbs(0);

Wir verknüpfen das Listener-Objekt mit dem MovieClipLoader, so dass die Ladevorgänge wahrgenommen werden. Anschließend legen wir fest, dass sich in sKategorie die erste im XML-Dokument definierte bzw. in aKategorien aufgenommene Kategorie befindet. Die danach aufgerufene Funktion bilderThumbs() sorgt dann dafür, dass Thumbnails dieser Kategorie eingeblendet werden. Damit bekommt der Anwender bereits direkt nach Start der Anwendung Vorschaubilder zu sehen, ohne erst eine Kategorie auswählen zu müssen. Wer dies nicht möchte, verzichtet einfach auf die beiden letztgenannten Zeilen. 45. Fügen Sie im Funktions-Block folgende Deklaration ein:  function bilderThumbs(pIndex:Number) :Void {  nTiefe = 0;

 var nAnzahl:Number = aBilder[pIndex].length;

 for (var e in mThumbs) {

 mThumbs[e].removeMovieClip(); }

 var nZeile:Number = 0;

 for (i=0; i
 mThumb = mThumbs.createEmpty­ MovieClip(„thumb“+nTiefe, nTiefe);

 mTxt = mThumb. createTextField(„txt“, 2, 0, 0, 50, 25);

 mThbild = mThumb. createEmptyMovieClip(„bild“, 1);  mThumb._x = (i%nSpalten)*(nThumbBreite+ nAbstand);

 mThumb._y = nZeile*(nThumbHoehe+ nAbstand);  mThumb.nIndex = i;  mThumb.nKat = pIndex;

514

Kapitel 31  Bildergalerien

 mTxt.autoSize = „left“;  mThbild._alpha = 0;

 laden(sKategorie+sOrdnerThumb+ sKategorie+nTiefe+“.jpg“, mThumb);  mThumb.onPress = bildGross;  mThumb.enabled = false;  nTiefe++;

 if ((i%nSpalten) == nSpalten-1) {  nZeile++; } }

}

Die einzelnen Thumbnails bestehen aus leeren MovieClips, in die ein externes Bild geladen wird, sowie ein Textfeld, um den aktuellen Stand des Ladevorgangs anzuzeigen. Dazu initialisieren wir zunächst eine Variable, mit der wir die Tiefe, auf der die leeren MCs angelegt werden, steuern. Damit wir wissen, um welche Bilder es sich überhaupt handelt, übergeben wir beim Aufruf einen Parameter, der dem im vorhergehenden Block erwähnten Indexwert entspricht. Wenn also beispielsweise die erste Kategorie ausgewählt wurde, lautet ihr Index 0, da die betreffenden Informationen in aKategorie auf Index 0 gespeichert wurden. Die in nAnzahl zu erfassende Gesamtzahl der Thumbnails ergibt sich dann einfach aus der Länge des Elements, das in aBilder ebenfalls in Index 0 gespeichert wurde. Bevor neue Thumbnails eingeblendet werden, löschen wir zuerst die bereits vorhandenen vollständig. Das mag merkwürdig erscheinen, da sie doch eigentlich durch das neue Einfügen überschrieben werden. Das trifft auch tatsächlich zu, setzt jedoch voraus, dass pro Kategorie nur die gleiche Anzahl an Bildern verwendet wird. Andernfalls kann es nämlich geschehen, dass wir bei einer Kategorie 8 Thumbnails einblenden. Wenn wir dann eine neue aufrufen, die nur 6 enthält, bleiben 2 Thumbnails der vorhergehenden Kategorie erhalten, was optisch zwar einen lustigen Effekt ergibt, aber kaum erwünscht sein dürfte. In der Schleife sorgen wir daher dafür, dass alle MovieClips innerhalb des Thumbnail-Behälters gelöscht werden. Für das zeilenweise Positionieren benötigen wir eine neue lokale Variable, die wir mit dem Wert 0 für die erste Zeile initialisieren. Anschließend werden alle Vorschaubilder mit Hilfe einer weiteren Schleife

auf die Bühne gesetzt. In den im Variablen-Block eingerichteten Variablen speichern wir jeweils eine Referenz auf:

• einen leeren MovieClip, der das Vorschaubild und

den Ladetext aufnimmt. Er erhält einen fortlaufend nummerierten Instanznamen, beginnend mit thumb0. • ein neues, dynamisches Textfeld, das in der linken oberen Ecke des Thumbnail-MovieClips eingefügt wird. Es erhält jeweils den gleichen Instanznamen txt, der für Flash dennoch eindeutig ist, da sich jedes Feld in einem anderen MovieClip befindet. Die zugewiesene Breite von 50 und Höhe von 25 Pixeln sind letztlich beliebig, da wir die konkreten Werte an späterer Stelle von der Textgröße abhängig machen. Hier übergeben wir Werte, weil Flash syntaktisch danach verlangt. • einen weiteren leeren MovieClip, in den das Vorschaubild geladen wird. Wie beim Textfeld weisen wir den jeweils gleichen Namen bild zu, der dennoch aufgrund der verschiedenen übergeordneten MovieClips als eindeutig gilt. Den Aufbau verdeutlicht Abbildung 161. Im Grunde genommen wird hier ein Raster eingefügt, das wir in anderen Übungen mit Hilfe einer verschachtelten Schleife realisiert haben. Eine derartige Vorgehensweise funktionierte problemlos, da wir keine Zeilen bzw. keine Spalten verschiedener Länge verwendeten. Dies trifft hier jedoch nicht mehr zu. Wenn wir beispielsweise in der Kategorie erdhorn über 8 Thumbnails verfügen, die in drei Spalten angeordnet werden sollen – nSpalten wird im VariablenBlock mit diesem Wert initialisiert –, dann enthalten die ersten beiden Zeilen drei, die letzte Zeile dagegen nur zwei Bilder. Um dieses Problem zu umgehen, führen wir die benötigte Schleife entsprechend dem in nAnzahl erfassten Wert aus. Wenn also nAnzahl für die erste Kategorie 8 enthält, wird auch achtmal ein Thumb-

Abbildung 161:  Aufbau der Thumbnails

31.5  Galerie mit externen Assets

nail eingefügt. Allerdings entfällt nun die bei einer verschachtelten Schleife gegebene simple Möglichkeit, mit Hilfe der Zählvariablen die Positionierung vorzunehmen. Wir benötigen in allen Zeilen für die vertikale Position Werte wie 0, 80 und 160, und in allen Spalten für die horizontale Position ebenfalls 0, 80 und 160 (vorausgesetzt, wir verwenden Quadrate, was in unserem Beispiel der Fall ist). Da bei einer Verschachtelung die Zählvariable der inneren Schleife mehrfach den Wert 0 annimmt, stellte das bisher kein Problem dar. Jetzt jedoch nimmt unsere Zählvariable fortlaufend einen neuen Wert an, ohne dass sich eine Zahl wiederholt. Die 0 tritt mithin nur ein einziges Mal auf. Eine Lösung bietet der exotisch anmutende Modulo-Operator. Wenn wir nämlich nAnzahl durch einen festen Wert dividieren, erhalten wir den Restwert, der mehrfach gleich sein kann. Damit ist es möglich, trotz sich fortlaufend erhöhender Zählvariable bestimmte Werte mehrfach zu erhalten. Wenn wir als Divisor die Spaltenanzahl verwenden, ergeben sich für die Berechnung von i % nSpalten folgende Werte: Wert von i

i%nSpalten

0

0

1

1

2

2

3

0

4

1

5

2

6

0

7

1

Berechnung der horizontalen Position mit Modulo

Multiplizieren wir das Ergebnis mit der Breite der Thumbnails, die wir im Variablen-Block definiert haben, dann erhalten wir die gewünschten Werte 0, 80 und 160. Um zwischen den Bildern einen kleinen Abstand einzufügen, berechnen wir im Code ein Vielfaches der Breite zuzüglich 5 Pixel, so dass aufgrund unseres obigen Codes die konkreten Werte für die xPosition 0, 85 und 170 lauten. Auch für die vertikale Position benötigen wir diese Werte, allerdings in anderer Reihenfolge, nämlich 0, 0, 0 für die erste Zeile, 85, 85, 85 für die zweite und 170, 170 für die dritte Zeile. Dazu verwenden wir die Va-

515

riable nZeile, die ja anfangs auf 0 gesetzt wird. Wir inkrementieren sie jeweils dann, wenn i%nSpalten den Wert 2 ergibt, oder, allgemeiner formuliert, wenn dieser Ausdruck dem Wert von nSpalten minus 1 entspricht. Die Subtraktion ist nötig, weil wir in der Schleife mit 0 beginnen. Wie unsere obige Tabelle in der zweiten Spalte zeigt, geschieht das bei jeder dritten Berechnung, also genau an der Stelle, an der jeweils eine Zeile endet. Wenn wir die Höhe der Thumbnails mit nZeile multiplizieren, erhalten wir die gewünschten, vorhin angesprochenen Werte. Wie im Fall der Buttons für die einzelnen Kategorien speichern wir für jedes Thumbnail den aktuellen i-Wert, so dass wir sehr leicht herausfinden können, welches große Bild bei Mausklick einzublenden ist. Zusätzlich speichern wir pro Thumbnail die Nummer der Kategorie, zu dem er gehört. Sie wird beim Aufruf der Funktion als Argument pIndex übergeben. Diese und den erwähnten i-Wert benötigen wir, um später bei Mausklick den unter dem großen Bild anzuzeigenden Text korrekt ermitteln zu können. Das Textfeld passen wir in der Größe an den Text an und richten ihn linksbündig aus. Um die Thumbnails nicht hart anzuzeigen, sondern einfaden zu lassen, setzen wir ihre Deckkraft auf 0. Anschließend rufen wir eine Funktion auf, um die benötigten Grafiken für die Thumbnails zu laden. Als Argument müssen wir natürlich den konkreten Dateinamen und Ordner angeben. Er errechnet sich aus:

• sKategorie: Name der ausgewählten Kategorie, z. B. erdhorn, • sOrdner: Ordner mit den Grafiken, der bei den Thumbnails immer thumbs lautet, • sKategorie: s. o., alle Bilder einer Kategorie enthalten der Einfachheit halber den Namen der Kategorie, • nTiefe: Tiefenwert für die Thumbnail-MovieClips, der in den Namen der Grafiken abgespeichert ist und immer mit 0 beginnt. Für das erste Bild der ersten Kategorie ergibt sich damit folgender Name: „erdhorn“ + „/thumbs/“ + „erdhorn“ + „0“ + „.jpg“ bzw. in lesbarer Form: erdhorn/thumbs/erdhorn0.jpg. Wir beschränken uns hier auf das jpg-Dateiformat. Selbstverständlich ist es möglich, mit anderen Forma-

516

Kapitel 31  Bildergalerien

ten zu arbeiten. Diese würde man dann in der XMLDatei angeben und in Flash in einer Variablen speichern. Da die Thumbnails auf einen Mausklick reagieren sollen, weisen wir eine noch zu deklarierende Funktion zu. Um zu verhindern, dass man bereits klicken kann, bevor die Grafiken vollständig eingeblendet wurden, setzen wir ihre Eigenschaft enabled auf false. Abschließend inkrementieren wir nTiefe, so dass der nächste Thumbnail auf einer neuen Tiefe eingefügt werden kann, ohne bestehende Objekte zu überschreiben.

• Eine Kontrolle des Fortschritts. Wir schreiben je-

weils in das in den Thumbnails erzeugte Textfeld die aktuell geladenen Bytes sowie die Gesamtzahl der zu ladenden Bytes. • Das Laden der konkreten Datei.

Jede Kategorie ist durch einen übergreifenden Infotext gekennzeichnet. Um ihn einzublenden, sorgen wir zunächst dafür, dass der MovieClip mBild.bild, in dem das externe Bild angezeigt wird, seinen Inhalt entlädt. Andernfalls könnten wir, da sich das Textfeld unter diesem MovieClip befindet, keinen Text lesen. Außerdem löschen wir den zu einem großen Bild angezeigten Text, der natürlich keinen Sinn macht, wenn wir eine allgemeine Information zu einer Kategorie angezeigt bekommen. Schließlich weisen wir eben jenen Infotext entsprechend der gewählten Kategorie dem dafür vorgesehenen Textfeld zu.

Wie wir im Kapitel über Preloader gesehen haben, bietet die MovieClipLoader-Klasse mit onLoadProgress ein Ereignis an, mit dem man eigentlich ganz bequem einen Ladevorgang kontrollieren kann. Das funktioniert solange problemlos, wie sukzessive jeweils nur ein Bild geladen wird. Das trifft in unserem Fall zwar auf die großen Bilder zu, von denen immer nur ein einziges aufgerufen und angezeigt werden soll. Anders verhält es sich jedoch mit den Thumbnails: Wir führen dort den Ladevorgang in einer Schleife aus. Es kann daher vorkommen, dass zwei Ladevorgänge annähernd parallel ausgeführt werden. Wenn wir dann onLoadProgress bei jedem Ladevorgang gesondert aufrufen, erhalten wir nur noch die Daten des zuletzt ausgeführten Ladens. Daher weisen wir dem jeweiligen Bildbehälter ein onEnterFrame-Ereignis zu, das solange ausgeführt wird, wie der Ladevorgang anhält. Dabei bedienen wir uns der getProgress()-Methode des MovieClipLoader, die wie das onLoadProgress angibt, wie viele Bytes bereits geladen sind. Da das Laden öfters ausgeführt wird, sorgen wir mit Hilfe der Parameter pWas und pWer dafür, dass Flash weiß, welche Datei in welchem MovieClip zu laden und in welchem Textfeld die betreffende Information anzuzeigen ist.

47. Fügen Sie im Funktions-Block folgende Deklaration ein:

48. Fügen Sie im Funktions-Block folgende Deklaration ein:

 function laden(pWas:String, pWer:MovieClip):Void {

 oListener.onLoadInit = function(mClip:MovieClip):Void {

 this.txt.text = mlLaden. getProgress(this.bild).bytesLoaded+“ Bytes von\n“+mlLaden. getProgress(this.bild).bytes­ Total+“ geladen.“;

 if (mClip == mBild.bild) {

46. Fügen Sie am Beginn der Deklaration von bilderThumbs() ein:  mBild.bild.unloadMovie();  mBild.txt.text = „“;

 mBild.info.text = aKategorien[pIndex][1];

 pWer.onEnterFrame = function() {

};

 mlLaden.loadClip(pWas, pWer.bild);

}

Der Ladevorgang, der über die Funktion laden() aufgerufen wird, umfasst zwei Prozesse:

 delete mClip._parent.onEnterFrame;  mClip._parent.txt.text = mClip._parent.sText;

} else {

 mClip._parent.txt.removeTextField(); }

 faden(mClip);

};

31.5  Galerie mit externen Assets

Nach Ende des Ladevorgangs benötigen wir keine weitere Kontrolle desselben. Daher löschen wir das onEnterFrame-Ereignis, sobald das onLoadInit ausgelöst wird. Hinsichtlich des Textfeldes müssen wir unterscheiden, bei welchem Objekt wir uns befinden:

• Handelt es sich um das große Bild, fügen wir in das

Textfeld denjenigen Text ein, den wir bei Klick auf einen Thumbnail ermittelt haben. • Wurde dagegen ein Thumbnail geladen, benötigen wir das Textfeld nicht mehr weiter und löschen es. Da unsere Grafiken zu diesem Zeitpunkt noch in höchstem Maße visuelle Bescheidenheit demonstrieren (schließlich beträgt ihre Deckkraft läppische 0 Prozent), rufen wir eine Funktion zum Einblenden auf. 49. Fügen Sie im Funktions-Block folgende Deklaration ein:  function faden(pWer:MovieClip):Void {  pWer.onEnterFrame = function() {  this._alpha += nAlpha;

 if (this._alpha>=100) {  this._alpha = 100;

 pWer._parent.enabled = true;

517

50. Fügen Sie im Funktions-Block folgende Deklaration ein:  function bilderKat():Void {

 if (sKategorie != aKategorien[this.nIndex][0]) {

 sKategorie = aKategorien[this. nIndex][0];  bilderThumbs(this.nIndex); }

}

Wir haben beim Einfügen der Buttons jeweils einen Mausklick zugewiesen, der die Funktion bilderKat() aufruft. Sie sorgt dafür, dass eine neue Kategorie ausgewählt werden kann. Um zu verhindern, dass zweimal hintereinander dieselbe Kategorie angesprochen wird, schreiben wir nur dann in sKategorie einen neuen Wert hinein, wenn der dort gespeicherte Name nicht mit dem der aktuellen Kategorie übereinstimmt. Den finden wir, indem wir über die Indexvariable des angeklickten Buttons auf aKategorie zugreifen. Ist das dort gespeicherte Element identisch mit dem Wert von sKategorie, wurde dasselbe Objekt erneut angeklickt, andernfalls nicht. In letzterem Fall rufen wir bilderThumbs() auf und übergeben die erwähnte Indexvariable. Damit lassen sich neue Thumbnails laden.

 delete this.onEnterFrame;

51. Fügen Sie im Funktions-Block folgende Deklaration ein:

};

 function bildGross():Void {

}

}

Diese Funktion, die wir so oder in ähnlicher Form bereits häufiger verwendeten, weist dem als Argument übergebenen MovieClip ein onEnterFrame zu. Dort erhöhen wir permanent die Deckkraft um den bereits anfangs im Variablen-Block fest gelegten Wert, bis 100 oder, was in Flash mühelos möglich ist, ein größerer Wert erreicht wurde. Anschließend weisen wir korrekterweise 100 % Deckkraft zu, aktivieren den Mausklick des übergeordneten Thumbnail-Behälters und löschen das nicht mehr benötigte onEnterFrame-Ereignis. Nun werden unsere Bilder korrekt geladen und eingeblendet. Allerdings sind wir noch nicht in der Lage, die Kategorie zu wechseln bzw. ein Bild groß anzeigen zu lassen.

 mBild.info.text = „“;

 mTxt = mBild. createTextField(„txt“, 2, 0, 0, 50, 25);  mTxt.autoSize = „left“;

 laden(sKategorie+sOrdnerBilder+ sKategorie+this.nIndex+“.jpg“, mBild);  mBild.bild._alpha = 0;  mBild.enabled = false;

 mBild.sText = aBilder[this.nKat] [this.nIndex][1];

}

Wenn Sie testen, können Sie sowohl zu einem Thumbnail das zugehörige große Bild einblenden wie auch die Kategorie wechseln.

518

Das Funktionsprinzip entspricht prinzipiell demjenigen des Behälters, der alle Thumbnails aufnimmt. Zunächst löschen wir den die betreffende Kategorie allgemein erläuternden Text. Würden wir das nicht tun, bestünde die Möglichkeit, dass man ihn sehen kann, während ein Bild geladen wird. Dann erzeugen wir ein Textfeld zur Anzeige des Ladevorgangs. Das Textfeld wird linksbündig ausgerichtet. Wir rufen die bereits bekannte laden()-Funktion auf und errechnen so wie bei den Thumbnails den korrekten Bildnamen. Die Deckkraft des Bildes wird reduziert, um es einblenden zu können. Zum Schluss speichern wir in einer dem Bildbehälter zugeordneten Variablen den Bildtext, der sich aus aBilder auslesen lässt. Der Index entspricht der die aktuelle Kategorie kennzeichnenden Indexnummer, der Nummer des angeklickten Thumbnails sowie Index 1, also der zweiten Stelle, an der wir jeweils den entsprechenden Text abgelegt haben. Wenn wir uns beispielsweise in der Kategorie erdhorn befinden und dort das dritte Thumbnail angeklickt haben, lautet der konkrete Zugriff: mBild. sText = aBilder[0][2][1].

31.6 Code Zur Kontrolle der gesamte Code: //-------------- vars –----------------

var mThumbs:MovieClip, mBild:MovieClip, mMenue:MovieClip; var mThumb:MovieClip, mThbild:MovieClip, mBtn:MovieClip, mAktiv:MovieClip; var mRoot:MovieClip = this; var mTxt:TextField;

var nThumbBreite:Number = 80;

Kapitel 31  Bildergalerien

var xmlGalerie:XML = new XML(); var aKategorien:Array = []; var aBilder:Array = []; var sKategorie:String;

var sOrdnerThumb:String = „/thumbs/“;

var sOrdnerBilder:String = „/bilder/“;

//---------- functions –--------------function (pMenueX:Number, pMenueY:Number):Void {  var aTemp:Array = [];

 var aTemp2:Array = [];

 xmlGalerie.ignoreWhite = true;  xmlGalerie.onLoad = function(pErfolg:Boolean) {  if (pErfolg) {

v ar sXML:String = this.firstChild. childNodes;  for (var i:Number = 0; i<sXML. length; i++) {

 aTemp = [sXML[i].attributes.titel, sXML[i].attributes.intro];  aKategorien.push(aTemp);

 for (var j:Number = 0; j<sXML[i].childNodes.length; j++) {

 aTemp = [sXML[i]. childNodes[j].attributes.nr, sXML[i].childNodes[j].attributes.info];  aTemp2.push(aTemp); }

 aBilder.push(aTemp2);  aTemp2 = []; }

var nSpalten:Number = 3;

mMenue = mRoot.attachMovie(„mcMenue“, „behMenue“, mRoot.getNextHighest­ Depth());

var nAlpha:Number = 10;

 mMenue._y = pMenueY;

var nThumbHoehe:Number = 80; var nTiefe:Number = 0;

 mMenue._x = pMenueX;

var nAbstand:Number = 2;

 for (var i:Number = 0; i
var nThumbOffset:Number;

var mlLaden:MovieClipLoader = new Movie­ ClipLoader();

var oListener:Object = new Object();

 mBtn = mMenue. attachMovie(„btnKategorie“, „btn“+i, i);

31.6  Code

mBtn._x = mMenue._width/2-mBtn._ width/2;

 mBtn._y = i*mBtn._height+mBtn._ height;  mBtn.txt.autoSize = „center“;

 mBtn.txt.text = aKategorien[i] [0];  mBtn.nIndex = i;

 mBtn.onPress = bilderKat; }

mThumbs = mRoot.attachMovie(„mcThumbs“, „behThumbs“, mRoot.getNextHighest­ Depth()); mThumbs._x = mMenue._x+mMenue._ width+12;  mThumbs._y = mMenue._y;

nThumbOffset = mThumbs._width(nSpalten*(nAbstand+nThumbBreite)); nThumbOffset /= 2;

mBild = mRoot.attachMovie(„mcBild“, „behBild“, mRoot.getNextHighestDepth());

var nPos:Number = Stage.width-mBild._ width; nPos –= mThumbs._x+mThumbs._width; mBild._x = mThumbs._x+mThumbs._ width+nPos/2; mBild._y = mThumbs._y;

 mlLaden.addListener(oListener);  sKategorie = aKategorien[0][0];  bilderThumbs(0); } };

 xmlGalerie.load(„galerie.xml“); }

function bilderKat() {

 if (sKategorie != aKategorien[this. nIndex][0]) {

 sKategorie = aKategorien[this.nIndex][0];  bilderThumbs(this.nIndex); } }

function bilderThumbs(pIndex:Number):V oid {

519

mBild.bild.unloadMovie();  mBild.txt.text = „“;

 mBild.info.text = aKategorien[pIndex] [1];  nTiefe = 0;

 var nAnzahl:Number = aBilder[pIndex]. length;  for (var e in mThumbs) {

 mThumbs[e].removeMovieClip(); }

 var nZeile:Number = 0;

 for (i=0; i
 mThumb = mThumbs.createEmptyMovie­ Clip(„thumb“+nTiefe, nTiefe);

 mTxt = mThumb. createTextField(„txt“, 2, 0, 0, 50, 25);  mThbild = mThumb. createEmptyMovieClip(„bild“, 1);  mThumb._x = (i%nSpalten)*(nThumbBreite+ nAbstand);

 mThumb._y = nZeile*(nThumbHoehe+ nAbstand);  mThumb.nIndex = i; mThumb.nKat = pIndex;

 mTxt.autoSize = „left“;  mThbild._alpha = 0;

 laden(sKategorie+sOrdnerThumb+sKate gorie+nTiefe+“.jpg“, mThumb);  mThumb.onPress = bildGross;  mThumb.enabled = false;  nTiefe++;

 if ((i%nSpalten) == nSpalten-1) {  nZeile++; } } }

function laden(pWas:String, pWer:MovieClip):Void {

 pWer.onEnterFrame = function() {

 this.txt.text = mlLaden. getProgress(this.bild).bytesLoaded+“ Bytes von\n“+mlLaden.

520

};

Kapitel 31  Bildergalerien

getProgress(this.bild).bytesTotal+“ geladen.“;

 mlLaden.loadClip(pWas, pWer.bild); }

function faden(pWer:MovieClip):Void {  pWer.onEnterFrame = function() {  this._alpha += nAlpha;

 if (this._alpha>=100) {  this._alpha = 100;

 pWer._parent.enabled = true;  delete this.onEnterFrame; } }; }

function bildGross() { mBild.info.text = „“;

 mTxt = mBild.createTextField(„txt“, 2, 0, 0, 50, 25);  mTxt.autoSize = „left“;

 laden(sKategorie+sOrdnerBilder+sKateg orie+this.nIndex+“.jpg“, mBild);  mBild.bild._alpha = 0;  mBild.enabled = false;

mBild.sText = aBilder[this.nKat][this. nIndex][1]; }

oListener.onLoadInit = function(mClip:MovieClip):Void {

 delete mClip._parent.onEnterFrame; if (mClip == mBild.bild) {

 mClip._parent.txt.text = mClip._parent.sText; } else {

 mClip._parent.txt.removeTextField(); }

faden(mClip); };

//---------–––- aufruf –--------------init(10, 100);

31.7 Einige Varianten In der bisherigen Variante wird der freie Raum auf der rechten Seite zwar optimal ausgefüllt, aber es kann, abhängig vom Motiv, durchaus vorkommen, dass er dennoch nicht ausreicht. In dem Fall könnte man zusätzlich den Platz verwenden, der von den Thumbnails eingenommen wird. Dazu müssen wir lediglich die Position des großen Bildes und gegebenenfalls der Thumbnails ändern sowie dafür sorgen, dass der Anwender das große Bild durch Mausklick ausblenden muss, bevor er wieder einen Thumbnail aktivieren kann. Alternativ dazu könnte man die Thumbnails unmittelbar unter den Buttons für die Kategorien einblenden. Dann würden wir rechts daneben über genügend Platz verfügen, um das große Bild darzustellen, ohne andere Objekte zu verdecken. Allerdings wäre dann sowohl die Anzahl der (sichtbaren) Buttons wie Thumbnails stärker eingeschränkt, da sich nun beide Arten von Objekten die Gesamthöhe der Bühne teilen müssen. Da diese Variante lediglich eine Positionsänderung erfordert, wollen wir sie hier nicht weiter ausarbeiten. Wir haben die Bildgröße vorgegeben, so dass sich die Positionierung einfacher gestaltet. Prinzipiell könnte man auch mit Bildern verschiedener Größe arbeiten, die beim Laden proportional skaliert werden. Für den Anwender/Kunden hätte das den Vorteil, sich nicht so sehr um eine korrekte Bildgröße kümmern zu müssen. Nachteilig wäre allerdings die Tatsache, dass serverseitig Datenmengen vorliegen, die in dieser Form eigentlich gar nicht benötigt werden. Zugleich werden sie auf den Client übertragen, obwohl Flash sie auch dort nicht in dieser Größenordnung verwenden muss. Alternativ könnte man die Größe von mBild anpassen, indem man beim Skalieren das scale9grid-Verhalten simuliert (andernfalls käme es zu unschönen Verzerrungen der Bitmap-Grafik, die den Rahmen für das große Bild darstellt). Auch die Anzahl der Thumbnails könnte erhöht und die Größe des Behälters dynamisch angepasst werden. In dem Fall müsste man beim Skalieren wie vorhin angesprochen vorgehen.

32

Spiele

Bedenkt man, welches Potential Flash hinsichtlich Animationen einerseits und der Programmierung von Interaktionen andererseits bietet, überrascht es kaum, dass sich das Programm mittlerweile auch in der großen Welt der Online-Spiele als Platzhirsch „breit“ macht. Zwar gibt es andere Programme wie etwa das geniale GameMaker von Mark Overmaars, das erheblich komfortabler Spiele zu programmieren erlaubt, die zudem auch noch schneller ausgeführt werden, doch gelang es ihnen nie, auch nur annähernd eine derartige Verbreitung wie eben Flash zu finden. Selbst die Klassiker Javascript und Java haben enorm an Boden verloren, so dass man schon fast sagen kann, wenn von Casual Games gesprochen wird, ist automatisch Flash gemeint.

Dabei deckt das Programm einen relativ breiten Bereich an Genres ab, die von Jump and Run und doch recht einfach gestrickten Ballerspielen über Geschicklichkeits- und Rollenspiele bis hin zu Logik- und Glücksspielen reichen. Prinzipiell kann man eigentlich jedes Genre bedienen. Das einzige, an dem Flash momentan noch scheitert, sind grafisch aufwendige Spiele und insbesondere 3D-Grafik. Aber selbst dort ist Flash auf einem guten Weg, wie der Player in der Version 10 zeigt, der grafische Berechnungen an den Prozessor der Grafikkarte auslagern und so den Hauptprozessor entlasten kann. Zahlreiche Spiele haben sich im Laufe der Jahre trotz oder gerade wegen ihres einfachen Prinzips zu Dauerbrennern entwickelt. Dazu gehören beispielsweise Pairs- und Puzzle-Spiele, die wir uns hier in einfachen Varianten stellvertretend für die unüberschaubar große Menge an Spielen anschauen wollen.

32.1 Pairs

Abbildung 162:  Aufbau Memory-Spiel

Unter Pairs versteht man ein Spiel, bei dem zwei zusammen gehörende Elemente einander zugeordnet werden müssen. Das Spiel stammt vermutlich aus Japan, wo bereits im 16. Jahrhundert nach diesem Prinzip gespielt wurde. In Deutschland popularisierte es vor allem die Ravensburger AG unter dem Markennamen Memory. Man spielt es mit einer geraden Anzahl an Karten, die paarweise ein gemeinsames Motiv zeigen. Sie liegen verdeckt vor dem Spieler, der jeweils zwei aufdecken darf. Passen die aufgedeckten Karten zusammen, werden sie vom Spielfeld entfernt. Andernfalls müssen sie wieder umgedreht und andere

A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

521

522

Kapitel 32  Spiele

Karten aufgedeckt werden. Das Spiel endet, sobald alle Kartenpaare gefunden wurden. Das Spiel unseres Workshops umfasst ein Set aus 10 verschiedenen Bildern. Sollten Sie keine Bilder zur Hand haben, dann können Sie sich mit Dummies behelfen, wie im nachfolgenden Workshop gezeigt. Die Karten werden jeweils zweimal eingefügt, da der Spieler bekanntermaßen jeweils Pärchen suchen muss. Abbildung  162 zeigt den Aufbau des Spiels, wobei naturgemäß nur der Kartenrücken sowie beispielhaft zwei aufgedeckte Karten zu sehen sind. 1. Erstellen Sie eine Standarddatei. 2. Importieren Sie die zu verwendenden Bilder in die Bibliothek. Da unsere Karten eine Breite von 60 und eine Höhe von 86 Pixeln haben werden, sollten die Bilder diese Maße nicht überschreiten. Sollten Sie über keine Bilder verfügen, dann können Sie in Flash Dummies entsprechend Schritt 4 erstellen. 3. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcBild1). 4. Fügen Sie das erste importierte Bild horizontal und vertikal mittig ein. Alternativ fügen Sie ein Textfeld ein und verwenden die Schriftart Web Dings. Dort sind diverse Motive enthalten, die sich generell zum schnellen Erstellen von Dummies eignen. Anschließend wandeln Sie den jeweils gewählten Buchstaben in eine Grafik um. 5. Verfahren Sie auf die gleiche Weise mit den übrigen Bildern, so dass zum Schluss 10 MovieClips (Bibliotheks- und Verknüpfungsnamen mcBild1 bis mcBild10) vorliegen. 6. Erstellen Sie einen leeren MovieClip (Bibliotheksund Verknüpfungsname mcKarte). 7. Zeichnen Sie dort horizontal und vertikal mittig ein blaues Rechteck mit leicht abgerundeten Ecken sowie einer Höhe von 86 und einer Breite von 60 Pixeln. Die nun vorhandenen Assets zeigt Abbildung 163. 8. Kehren Sie zur Hauptzeitleiste zurück. 9. Fügen Sie in actions folgendes Bildskript ein:  //-------------- vars –-------------  var mBox:MovieClip = this. createEmptyMovieClip(„box“, 1);

 var mKarteWahl:MovieClip = null;  var mKarte:MovieClip, mBild:MovieClip;

 var nTiefe:Number = 0;

Abbildung 163:  Karten und Bilderset

 var nAnzahl:Number = 10;  var nZeilen:Number = 4;

 var nSpalten:Number = (nAnzahl*2)/ nZeilen;  var aTempNums:Array = [];  var aKarten:Array = [];

Wir definieren einen Behälter zur Aufnahme des gesamten Spiels. Drei weitere Variablen dienen zur Aufnahme von Referenzen auf MovieClips, nämlich:

• mKarteWahl, die angeklickte Karte. Die zugehö-

rige Variable initialisieren wir mit dem Wert null, den wir an späterer Stelle abfragen müssen, um herauszufinden, ob bereits eine Karte ausgewählt worden ist oder nicht; • mKarte, allgemein alle Karten innerhalb der Schleife, in der sie eingefügt werden; • mBild, das der jeweiligen Karte zugeordnete Bild. Da die Karten dynamisch eingefügt werden, initialisieren wir eine Variable, um ihre Tiefe zuweisen zu können. Die Anzahl der verschiedenen Bildmotive legen wir mit 10 und die Zeilen, die wir zu ihrer Darstellung benötigen, mit 4 fest. Daraus ergibt sich für die Anzahl der Spalten der Wert (nAnzahl * 2)/nZeilen bzw. 5. Da jede Karte zweimal vorhanden sein muss, entspricht ihre Gesamtanzahl dem Doppelten der Anzahl der Bildmotive. Wenn wir diesen Wert durch die Zeilenanzahl dividieren, erhalten wir die Spaltenanzahl. I. d. R. wählt man die betreffenden Werte so, dass die Karten optisch in einem Rechteck angeordnet werden. Um die Karten zufallsbedingt einblenden zu können, verwenden wir zwei Arrays.

32.1  Pairs

523

10. Erweitern Sie das Skript um die Deklaration einer init()-Funktion:  //----------- functions –----------  function init():Void {  mBox._x = 100;  mBox._y = 100;

 for (var i = 1; i<=nAnzahl; i++) {  for (var j = 1; j<=2; j++) {  aTempNums.push(i); } }

 while (aTempNums.length>0) {

 var nZufall:Number = Math. floor(Math.random()*aTempNums. length);  aKarten. push(aTempNums[nZufall]);

 aTempNums.splice(nZufall, 1); }

 for (var i = 0; i
 for (var j = 0; j
 mBild = mKarte.attachMovie­ („mcBild“+aKarten[nTiefe], „bild“, 1);  mBild._x = 0;  mBild._y = 0;

 mKarte._x = j*(mKarte._ width+2);  mKarte._y = i*(mKarte._ height+2);  nTiefe++; } }

}

11. Rufen Sie init() auf:  //----------––- aufruf –-----------  init();

Flash zeigt die Memory-Karten mit aufgedecktem Motiv an.

Abbildung 164:  Zufallsverteilung der Karten in aKarten

In einem ersten Schritt positionieren wir das Spielfeld auf den willkürlich gewählten Werten 100 und 100. Anschließend generieren wir innerhalb der ersten verschachtelten for-Schleife zweimal die Zahlen 1 bis 10, die in dem temporären Array aTempNums gespeichert werden. Dieses Array sieht folgendermaßen aus: 1,1,2,2,3,3 etc. Die Zahlen repräsentieren unsere Bildnummern, die jeweils zweimal vorkommen müssen. Da sie sauber geordnet vorliegen und es insgesamt eher langweilig wäre, würden wir die Bilder in dieser Reihenfolge einfügen, greifen wir mit der while-Schleife zufallsbedingt auf dieses Array zu. Solange sich in aTempNums Elemente befinden, nehmen wir an einer beliebigen Stelle ein Element heraus, fügen es in aKarten ein und löschen es in aTempNums. Damit gelingt es uns, in aKarten eine zufällige Reihenfolge zu erhalten. Den ganzen Prozess visualisiert Abbildung 164. Die verschachtelte for-Schleife nach der whileSchleife schließlich sorgt für das konkrete Einfügen von Karten, bestehend aus dem MovieClip mcKarte, der den Kartenrücken symbolisiert, sowie den MovieClips mcBild1 bis mcBild10 mit den konkreten Motiven. Von grundlegender Bedeutung für uns ist der Zusammenhang zwischen Karten mit gleichen Bildern. Er muss sich programmiertechnisch irgendwo wiederfinden. In diesem Fall sorgen wir einfach über die Instanznamen für diesen Zusammenhang. Nehmen

524

Kapitel 32  Spiele

wir an, aKarten enthalte folgende Werte: 1, 3, 3, 2, 1, 2 etc. Die erste Karte, die wir einfügen, erhält den Instanznamen „k“+nTiefe+aKarten[nTiefe], was bei einem nTiefe-Wert von 0 dem Namen k01 entspricht. Die zweite Karte heißt k13, die nächsten k23, k32, k41 und k52. Unmittelbar nach dem Präfix „k“ zählen wir hoch, so dass jede Karte einen eindeutigen Instanznamen erhält. Danach weisen wir unter Verwendung des Arrays aKarten eine Zahl zu, die jeweils zweimal vorkommt. Wenn wir später bei Klick auf die Karten herausfinden wollen, welche zusammen gehören, dann müssen wir nur das letzte Kürzel vergleichen. In unserem Beispiel würde das bedeuten, dass k01 und k41, k13 und k23 sowie k32 und k52 ein Paar bilden Damit wir auch optisch ein Paar wahrnehmen können, fügen wir pro Karte ein Bild ein, das jeweils den selben Wert verwendet wie beim Instanznamen. In k01 und k41 werden daher mcBild1, in k13 und k23 mcBild3 und in k32 und k52 mcBild2 eingefügt. Solange wir uns an diese Namenskonvention halten, lässt sich immer der benötigte Zusammenhang zwischen zwei Elementen konstruieren. Alternativ könnten wir die benötigten Werte jeweils in einer mKarte zugewiesenen Variable speichern. Da wir sowohl mcKarte wie auch alle mcBild1 bis mcBild10 mittig angeordnet haben, erfolgt die Positionierung einfach, indem wir sie im Koordinatenursprung von mcKarte einfügen. Die Position der Karten ergibt sich aus einem Vielfachen ihrer Breite bzw. Höhe zuzüglich einem kleinen Wert, um einen Abstand zwischen den einzelnen Elementen herzustellen. Abschließend inkrementieren wir nTiefe, so dass eine neue Karte eingeblendet werden kann. 12. Ergänzen Sie die init()-Funktion innerhalb der zweiten verschachtelten for-Schleife unmittelbar vor der Inkrementierung von nTiefe:  mKarte.onPress = function() {  umdrehen(this);

};

Bei jedem Mausklick auf eine Karte soll sich diese umdrehen. Das geschieht mit Hilfe einer Funktion umdrehen(), der wir als Argument das angeklickte Objekt übergeben.

 pWelche.onEnterFrame = function() {  this._xscale –= nTempo;

 if (this._xscale<-100) {  this._xscale = -100;

 delete this.onEnterFrame; } };

}

14. Fügen Sie im Variablen-Block nach der Deklaration von nSpalten ein:

var nTempo:Number = 20;

Bei Klick auf eine beliebige Karte wird sich diese scheinbar umdrehen. Danach lässt sie sich nicht noch mal aktivieren. Da Flash kein 3D-Format beherrscht, müssen wir uns mit einem altbekannten Trick behelfen: Wir täuschen die fehlende Tiefe vor, indem wir unsere Karten horizontal skalieren. Nach einem Mausklick reduzieren wir permanent die horizontale Skalierung um den im Variablen-Block festgelegten Wert, bis die aktuelle Skalierung kleiner oder gleich –100 ist. Dann löschen wir das nicht mehr benötigte onEnterFrame und setzen die Skalierung auf –100. Dieser Wert entspricht einer horizontalen Spiegelung unserer Grafik. Jetzt können Sie auch erkennen, warum der Registrierungspunkt mittig angeordnet sein muss. Er legt nämlich die Achse fest, um die wir horizontal spiegeln. Momentan haben wir gleich mehrere Probleme:

• Die

Grafik ist von Anfang an sichtbar, was den Schwierigkeitsgrad des Spiels zugegebenermaßen etwas nach unten drückt; • Beim Skalieren wird mit der Karte natürlich ihr gesamter Inhalt, also auch die Grafik, gespiegelt; • Wir können beliebig viele Karten anklicken, was es später unmöglich macht, exakt zwei Karten miteinander zu vergleichen. 15. Fügen Sie in init() innerhalb der zweiten verschachtelten for-Schleife unmittelbar nach der Positionierung von mBild folgende Zeilen ein:

13. Ergänzen Sie den Funktions-Block um folgende Deklaration:

 mBild._xscale = -100;

 function umdrehen(pWelche:MovieClip) :Void {

Beim Einfügen des Bildes spiegeln wir es. Der Wert seiner Eigenschaft _xscale beträgt  –100 und wird

 mBild._visible = false;

32.1  Pairs

durch das Spiegeln der übergeordneten Karte sukzessive auf 100 gesetzt. Damit zeigt die gespiegelte Karte seinen Inhalt in nicht-gespiegelter Form. Außerdem setzen wir seine Sichtbarkeit auf false, blenden es also direkt aus. 16. Ergänzen Sie die Funktion umdrehen() unmittelbar nach der Subtraktion von nTempo um folgende Bedingung:  if (this._xscale<=0) {

 this.bild._visible = true;

}

Beim Testen wird das Bildmotiv zunächst ausgeblendet und taucht nach Mausklick erst dann auf, wenn die Skalierung der Karte einen negativen Wert erreicht hat. 17. Erweitern Sie innerhalb von init() das onPress-Ereignis (Fettdruck):  mKarte.onPress = function() { if (!bWarten) {

 umdrehen(this); }

};

18. Fügen Sie unmittelbar nach der Deklaration von nTempo ein:  var bWarten:Boolean = false;

Wir machen nun das Ausführen des Umdrehens davon abhängig, dass eine bestimmte Variable auf false gesetzt ist. Beim erstmaligen Klick muss sie diesen Wert besitzen, sonst kann überhaupt kein Klick stattfinden. Daher initialisieren wir sie im VariablenBlock mit false. Jetzt muss noch dafür gesorgt werden, dass sie irgendwann den Wert true enthält. Da ihre Aufgabe darin besteht, nach dem zweiten Klick einen weiteren Klick solange unmöglich zu machen, bis eine Auswertung beider Klicks stattgefunden hat, bietet die Funktion umdrehen() einen guten Platz, um ihren Wert zu ändern. 19. Ergänzen Sie die Funktion umdrehen() nach der schließenden Klammer des onEnterFrameEreignisses:  if (mKarteWahl == null) {  mKarteWahl = pWelche;

} else {

525

 bWarten = true;

 pauseInterv = setInterval(pruefen, 1000, pWelche);

}

20. Erweitern Sie den Variablen-Block nach der Deklaration von nTempo: var pauseInterv:Number;

Wenn Sie testen, können Sie genau zwei Karten umdrehen. Beim Aufruf von umdrehen() unterscheiden wir zwei Fälle:

• Es wurde noch keine Karte angeklickt. Dann ist in mKarteWahl der Wert null gespeichert. Wir er-

setzen ihn durch eine Referenz auf die angeklickte Karte; • In mKarteWahl befindet sich bereits ein Wert. In dem Fall handelt es sich bei der aktuell angeklickten um die zweite Karte, so dass wir jetzt eine kleine Pause einlegen müssen. Dazu setzen wir bWarten auf true und rufen mit Hilfe eines Intervalls nach einer Sekunde eine noch zu definierende Funktion pruefen() auf, der wir als Argument die Referenz auf die angeklickte Karte übergeben. Es gibt noch einen dritten Fall, den wir momentan nicht abfragen, der aber zu einem ungewollten Ergebnis führt. Wenn Sie nämlich zweimal schnell hintereinander auf dieselbe und dann auf eine andere Karte klicken, wird nur die erste umgedreht. 21. Erweitern Sie umdrehen() unmittelbar nach der einleitenden Klammer um folgende Bedingung:  if (mKarteWahl == pWelche) {  return;

}

Nun stellt das mehrfache Klicken auf dieselbe Karte kein Problem mehr dar, wie Sie beim Testen feststellen werden. Bevor wir irgendwelche Anweisungen ausführen, fragen wir, ob der in mKarteWahl gespeicherte Wert dem Parameter entspricht. Ist das der Fall, wissen wir, dass vorher bereits einmal auf dieselbe Karte geklickt und sie gespeichert wurde. Dann brechen wir die gesamte Funktion mit return ab, so dass der nachfolgende Code nicht mehr zur Ausführung kommen kann.

526

Kapitel 32  Spiele

22. Erweitern Sie den Funktions-Block:  function pruefen(pWen:MovieClip):Void {

 var sZwei = String(pWen).lastIndexOf(„_“);  var sEins = String(mKarteWahl). lastIndexOf(„_“);  if (String(pWen). substring(sZwei+1) == String(mKarteWahl). substring(sEins+1)) {  bWarten = false;

 mKarteWahl.removeMovieClip();  pWen.removeMovieClip();  mKarteWahl = null; } else {

 mKarteWahl.onEnterFrame = function() {  this._xscale += nTempo;  if (this._xscale>=0) {

 this.bild._visible = false; }

 if (this._xscale>100) {  this._xscale = 100;

 delete this.onEnterFrame; } };

 pWen.onEnterFrame = function() {  this._xscale += nTempo;  if (this._xscale>=0) {

 this.bild._visible = false; }

 if (this._xscale>100) {  this._xscale = 100;

 delete this.onEnterFrame;  mKarteWahl = null;  bWarten = false; } }; }

 clearInterval(pauseInterv);

}

Das Spiel wird nun korrekt funktionieren: beim ersten Klick dreht sich die betreffende Karte um, beim zweiten ebenfalls. Es folgt eine kleine Pause, in der ein Vergleich beider Karten miteinander durchgeführt wird. Zeigen sie dasselbe Bild, verschwinden sie, andernfalls drehen sie sich wieder um. Anschließend können weitere Karten gewählt werden. In der init()-Funktion haben wir eine Zusammengehörigkeit von Karten über eine Zahl definiert, die im Instanznamen gespeichert wird. Zu Beginn von pruefen() wird jeweils diese Zahl aus dem Namen des in mKarteWahl sowie im Parameter pWen referenzierten MovieClips extrahiert und in zwei lokalen Variablen gespeichert. Anschließend erfolgt ein Vergleich miteinander. Sind sie identisch, wissen wir, dass zwei Karten mit gleichen Motiven ausgewählt wurden. Die Variable, die das Warten steuert, wird wieder auf false gesetzt, so dass weitere Klicks erfolgen können. Die angeklickten Karten löschen wir und setzen die Variable für die zuerst angeklickte Karte wieder auf null, um anzuzeigen, dass keine Auswahl mehr vorhanden ist. Wenn die Werte nicht miteinander übereinstimmen, drehen wir beide Karten wieder um. Im Prinzip entspricht dieser Vorgang dem Aufdecken, nur mit geänderten Werten. Dabei muss das Bild natürlich auch wieder ausgeblendet werden, und zwar, sobald der übergeordnete Behälter eine horizontale Skalierung größer 0 aufweist. Am Ende der Animation setzen wir die Skalierung beider Karten auf ihren Ausgangswert 100, löschen das onEnterFrame und setzen mKarteWahl sowie bWarten auf ihre Anfangswerte. Wie zuvor ist es jetzt wieder möglich, neue Karten anzuklicken. Da das Intervall ausgeführt wurde, löschen wir es ebenfalls. Selbstverständlich wäre es hier wie auch an anderer Stelle möglich, ein Grafikset zur Auswahl anzubieten und die Grafiken extern zu laden. Eine prinzipielle Umsetzung einer derartigen Lösung finden Sie im Workshop zu Bildergalerien. Wenn Sie möchten, das Flash am Ende des Spiels eine entsprechende Meldung ausgibt oder einen entsprechenden Screen anzeigt, dann benötigen Sie eine Variable, die mitzählt, wie viele Karten gelöscht wurden. Es reicht, diese Variable bei jedem Löschvorgang einmal zu inkrementieren. Wenn Sie mit 0 startet und denselben Wert erreicht wie nAnzahl, dann wissen Sie, alle Kartenpaare wurden gefunden und das Spiel ist zu Ende. Darüber hinaus kann man die verstri-

32.2  Code

chene Zeit protokollieren und im Vergleich mit anderen Spielern anzeigen. Dazu müsste in init() die Startzeit gespeichert und von der beim Aufdecken des letzten Paares erreichten Zeit subtrahiert werden. Das Ergebnis dividiert durch 1000 liefert die benötigte Zeit in Sekunden. Wer das Ganze optisch etwas attraktiver gestalten möchte, kann natürlich ein zu den Motiven der Karten passendes Hintergrundbild leicht abgesoftet anzeigen und den Kartenrücken mit einem einheitlichen Motiv versehen.

527

 aKarten.push(aTempNums[nZufall]);  aTempNums.splice(nZufall, 1); }

 for (var i = 0; i
 for (var j = 0; j
 mBild = mKarte.attachMovie(„mc Bild“+aKarten[nTiefe], „bild“, 1);  mBild._x = 0;

32.2 Code Zur Kontrolle der gesamte Code: //-------------- vars –---------------var mBox:MovieClip = this. createEmptyMovieClip(„box“, 1);

var mKarteWahl:MovieClip = null;

var mKarte:MovieClip, mBild:MovieClip; var nTiefe:Number = 0;

var nAnzahl:Number = 10; var nZeilen:Number = 4;

var nSpalten:Number = (nAnzahl*2)/nZeilen; var nTempo:Number = 20;

var bWarten:Boolean = false; var aTempNums:Array = []; var aKarten:Array = []; var pauseInterv:Number;

//------------- functions –-----------function init():Void {  mBox._x = 100;  mBox._y = 100;

 for (var i = 1; i<=nAnzahl; i++) {  for (var j = 1; j<=2; j++) {  aTempNums.push(i); } }

 while (aTempNums.length>0) {

 var nZufall:Number = Math. floor(Math.random()*aTempNums. length);

 mBild._y = 0;

 mBild._xscale = -100;

 mBild._visible = false;

mKarte._x = j*(mKarte._width+2);

 mKarte._y = i*(mKarte._height+2);  mKarte.onPress = function() {  if (!bWarten) {

 umdrehen(this); }

};

 nTiefe++; } } }

function umdrehen(pWelche:MovieClip): Void {  if (mKarteWahl == pWelche) {  return; }

 pWelche.onEnterFrame = function() {  this._xscale –= nTempo;  if (this._xscale<=0) {

 this.bild._visible = true; }

 if (this._xscale<-100) {  this._xscale = -100;

 delete this.onEnterFrame; } };

 if (mKarteWahl == null) {  mKarteWahl = pWelche;

528

Kapitel 32  Spiele

} else {

 clearInterval(pauseInterv);

 pauseInterv = setInterval(pruefen, 1000, pWelche);

//------------- aufruf –---------------

 bWarten = true;

}

}

init();

}

function pruefen(pWen:MovieClip):Void {  var sZwei = String(pWen). lastIndex­ Of(„_“);

 var sEins = String(mKarteWahl).lastIndexOf(„_“);  if (String(pWen).substring(sZwei+1) == String(mKarteWahl). substring(sEins+1)) {  bWarten = false;

 mKarteWahl.removeMovieClip();  pWen.removeMovieClip();  mKarteWahl = null; } else {

 mKarteWahl.onEnterFrame = function() {  this._xscale += nTempo;  if (this._xscale>=0) {

 this.bild._visible = false; }

 if (this._xscale>100) {  this._xscale = 100;

 delete this.onEnterFrame; }

32.3 Puzzle Das Puzzle oder Jigsaw-Puzzle geht auf ein ursprünglich als Hilfsmittel des Geographieunterrichts verkauftes Legespiel zurück, das im England des 18. Jahrhunderts erfunden wurde. Dabei wird ein Motiv in viele kleine Teile zerschnitten, die zumeist eine unregelmäßige Form aufweisen. Die Aufgabe besteht darin, das Motiv aus den Einzelteilen wieder zusammen zu setzen. Eine interessante Variante legte die Ravensburger AG vor Jahren mit Moving Puzzle vor. Anstelle eines statischen Bildmotivs zeigt jedes Puzzlestück ein Video, das fortlaufend abspielt. Um die Komplexität des Workshops in einem vertretbaren Maß zu halten, wollen wir uns im nachfolgenden mit der einfachsten Variante beschäftigen. Die benötigten Grafiken liegen intern vor und verfügen bereits über eine passende Größe, so dass wir unsere Puzzlestücke nicht skalieren müssen. Zur Auswahl steht nur ein einziges Motiv. Nach dem Start des Spiels blenden wir links einen Bereich ein, auf dem das Puzzle zusammen gesetzt werden muss. Darunter befindet sich eine verkleinerte Version der Vorlage, während die einzelnen Teile rechts daneben liegen.

};

 pWen.onEnterFrame = function() {  this._xscale += nTempo;  if (this._xscale>=0) {

 this.bild._visible = false; }

 if (this._xscale>100) {  this._xscale = 100;

 delete this.onEnterFrame;  mKarteWahl = null;  bWarten = false; } }; }

Abbildung 165:  Puzzlespiel

32.3  Puzzle

529

Abbildung 167:  Registrierungspunkt und gedachtes Quadrat

Abbildung 166:  Umrisse der Puzzleteile

Als erstes benötigen wir diverse Formen für unsere Puzzleteile. Sie lassen sich entweder in einem externen Programm wie Illustrator oder direkt in Flash erstellen. Wir wählen letztgenannte Möglichkeit. 1. Erstellen Sie eine Standarddatei. 2. Erstellen Sie einen leeren MovieClip namens mcGitter. Dieser MovieClip dient uns als Hilfsmittel, um die Umrisse der benötigten Puzzleteile zu zeichnen. 3. Zeichnen Sie mit Hilfe der Zeichenwerkzeuge die in Abbildung  166 angezeigten Umrisse der benötigten Puzzleteile. Genau genommen sind nur die Nummern 1, 2, 4 und 5 verschieden, die übrigen lassen sich aus einer dieser Nummern durch Drehung erzeugen. Das gilt auch für die spätere Programmierung, so dass wir mit vier Teilen arbeiten könnten. Um uns jedoch einige Berechnungen zu ersparen, wählen wir diesen Weg der Erstellung von 9 Elementen. 4. Weisen Sie dem ersten Teil eine Füllung beliebiger Farbe zu. 5. Markieren Sie die Füllung und wandeln sie in einen MovieClip namens mcPuzzle1 um. Der Registrierungspunkt liegt in der linken oberen Ecke. 6. Weisen Sie dem MovieClip einen gleichlautenden Exportnamen zu.

Für die spätere Programmierung ist es wichtig, dass sich der Registrierungspunkt jedes einzelnen Teils in der linken oberen Ecke eines gedachten, 48 Pixel großen Quadrats befindet. Auf diese Weise sind wir nämlich in der Lage, alle Teile einfach zu kacheln und die korrekte Position unkompliziert zu ermitteln. Das gilt selbstverständlich auch dann, wenn die tatsächliche Form von dem Quadrat abweicht – was ja in unserem Fall zutrifft. Abbildung 167 zeigt das gedachte Rechteck für vier verschiedene Puzzleteile. 7. Verfahren Sie mit den übrigen Puzzleteilen ebenso, bis Sie in der Bibliothek zusätzlich mcPuzzle2 bis mcPuzzle9 vorliegen haben. 8. Falls Sie möchten, können Sie mcGitter aus der Bibliothek löschen, denn er wird nicht mehr weiter gebraucht. Zwar empfiehlt es sich, aus Gründen der Übersichtlichkeit überflüssige Objekte zu entfernen. Mitunter erweist es sich jedoch als nützlich, das eine oder andere Objekt beizubehalten, um später Varianten ausprobieren zu können. So könnten Sie mit etwas veränderten Puzzleformen oder einer anderen Größe arbeiten. Auf die Größe der swf haben nicht verwendete Symbole keinen Einfluss, da sie beim Exportieren von Flash einfach ignoriert werden. 9. Importieren Sie in die Bibliothek eine Grafik (240 × 240) als Vorlage für das Puzzle. 10. Weisen Sie ihr als Verknüpfung den Dateinamen der Grafik zu. In unserem konkreten Beispiel handelt es sich um den vielsagenden Namen grafik.jpg. 11. Kehren Sie zur Hauptzeitleiste zurück. 12. Fügen Sie in actions folgendes Bildskript ein:  //----------- import –-------------

import flash.display.BitmapData; 



import flash.geom.Point; 



import flash.geom.Rectangle;  import flash.filters.*; 

530

Kapitel 32  Spiele

Wir wollen die Puzzleteile in Rechteckform aus einer Grafik ausschneiden. Daher benötigen wir die BitmapData-, die Rectangle- und die Point-Klasse. Um ihnen einen Schatten sowie einen leichten 3D-Effekt zuweisen zu können, importieren wir darüber hinaus die Filter-Klasse. 13. Erweitern Sie das Skript um einen VariablenBlock:  //------------- vars –-------------  var mBild:MovieClip = this. createEmptyMovieClip(„picture“, 1);

 var mPuzzle:MovieClip = this.create­ EmptyMovieClip(„behPuzzle“, 2);  var mSpiel:MovieClip = this.create­ EmptyMovieClip(„spielfeld“, 0);  var mTeil:MovieClip;

 var mBitmap:MovieClip;

Die Variable mBild übernimmt zwei Funktionen: Zunächst enthält sie die Vorlage, aus der wir schrittweise die Einzelteile ausstanzen. Danach verwenden wir sie, um eine verkleinerte Version als Vorschaubild anzuzeigen. In mPuzzle speichern wir eine Referenz auf einen leeren MovieClip als Behälter für alle Puzzleteile. Diese werden auf dem Spielfeld, repräsentiert durch mSpiel, später vom Anwender zusammen gesetzt. Jedes einzelne Teil referenzieren wir beim Erstellen mittels mTeil (Maske in Puzzleform) und mBitmap (gezeichneter Ausschnitt der Vorlage). 14. Erweitern Sie den Variablen-Block:  var aPuzzleStruktur:Array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];  var nBreite:Number = 48;  var nHoehe:Number = 48;  var nTiefe:Number = 0;

 var sName:String = „mcPuzzle“;

 var sPuzzleInstanz:String = „teil“;

var sExport:String = „grafik.jpg“; 



var bmPuzzle:BitmapData; 





ar bmBitmap:BitmapData = Bitmapv Data.loadBitmap(sExport); var oRahmen:Object; 

Hier deklarieren wir für das Zerteilen der Grafik wichtige Variablen. Beim Erstellen der Umrisse arbeiteten wir mit 9 verschiedenen Formen, die wir im mehr-

Abbildung 168:  Puzzleteile entsprechend der Array-Elemente

dimensionalen Array aPuzzleStruktur festhalten. Das erste Element definiert die linke obere Ecke, alle zwischen den Ecken liegenden Teile sowie die rechte obere Ecke. Diese Zahlen entsprechen der Nummerierung aus der Abbildung (s. o.). Das zweite Element definiert den linken Rand, alle Teile der zweiten bis vorletzten Spalte und den rechten Rand. Und im dritten Element legen wir die linke untere Ecke, alle zwischen den Ecken liegenden Teile und die rechte untere Ecke. Damit wissen wir beim späteren Aufbau des Puzzles, dass wir beispielsweise für die linke obere Ecke mcTeil1 und für die rechte untere Ecke mcTeil9 verwenden müssen. Bezogen auf ein kleines, 4 × 4 Teile umfassendes Puzzle sähe die Zuordnung von Teilen wie in Abbildung 168 aus. Wie wir noch sehen werden, muss unser Array zur Realisierung eines solchen Puzzles nicht verändert werden. Darüber hinaus hat die Verwaltung der benötigten Informationen in dieser Art den Vorteil, beliebige Formen zuzulassen. Wir können also komplett andere Umrisse erstellen und müssen nur Sorge tragen, dass ihre Nummerierung derjenigen des Arrays entspricht. Wir speichern jeweils Breite und Höhe unseres gedachten Quadrats, die wir gleich mehrfach verwenden müssen, nämlich zur Errechnung der Spalten und Zeilen, der anfänglichen Positionierung sowie der korrekten Position nach dem Loslassen. Mit nTiefe

32.3  Puzzle

legen wir die Tiefe fest, auf der unsere MovieClips mit den Umrissen eingefügt werden. In den folgenden drei Variablen speichern wir einen Teil der Exportnamen besagter Umrisse und des Instanznamens sowie der Grafik, die wir als Vorlage benutzen. Mit bmBitmap referenzieren und laden wir das Puzzlemotiv, während bmPuzzle verwendet wird, um sukzessive die jeweils gezeichneten Teile aufzunehmen. Da unsere Teile nicht wirklich einem Quadrat entsprechen, benötigen wir oObject, um ihre tatsächliche Dimension zu berechnen. 15. Erweitern Sie den Variablen-Block:  var nSwapMaske:Number = 1000;  var nSwapTeil:Number = 999;

var fSchatten:DropShadowFilter; 

 var fBevel:BevelFilter;  var aZufPos:Array = [];  var aFilter:Array = [];

In weiteren Variablen legen wir Tiefenwerte fest und definieren zwei Filter sowie leere Arrays, um eine zufällige Positionierung und die benötigten Filter aufzunehmen. 16. Fügen Sie folgenden Funktions-Block sowie Aufruf ein:  //------------ functions –---------  function init():Void {

 mBild.attachBitmap(bmBitmap, 1);  var nSpalten:Number = mBild._ width/nBreite;  var nZeilen:Number = mBild._ height/nHoehe;  mPuzzle._x = nBreite;

 mPuzzle._y = nHoehe;  mBild._x = mPuzzle._x;

 mBild._y = mPuzzle._y;  var aTemp:Array = [];

 for (var i:Number = 0; i
 aTemp = [j*nBreite, i*nHoehe];  aZufPos.push(aTemp); }

531

}

v ar nRechts:Number = mBild._ x+mBild._width+30;

 var nNum:Number, nIndexI:Number, nIndexJ:Number, nZufall:Number;

}

 //-----–––--- aufruf –-------------  init();

Wenn Sie jetzt schon voll Vorfreude testen, zeigt Flash in der Nähe der linken oberen Ecke die Vorlage für das Puzzle an. In der init()-Funktion sorgen wir dafür, dass die bereits im Variablen-Block als BitmapData eingefügte Vorlage in einem MovieClip angezeigt wird. Anschließend berechnen wir die Anzahl der Spalten und Zeilen, die sich wie bei jeder Kachelung aus der Breite bzw. Höhe der Grafik dividiert durch Breite bzw. Höhe der Teile ergibt. Wir benötigen sie natürlich, um zu wissen, wie viele Puzzleteile ausgeschnitten werden müssen. Den Behälter für die Puzzleteile und die Vorlage positionieren wir auf einem willkürlichen Wert, der hier völlig zufälligerweise der Breite und Höhe unseres gedachten Quadrats entspricht. Für die Positionierung der Puzzleteile bieten sich mehrere Möglichkeiten an:

• Wie

bei einem echten Puzzle können wir alles durcheinander auf einen Haufen rechts neben dem Motiv werfen. So beginnt jede Puzzler-Karriere; • Den gewieften Puzzler dagegen graut eine derartige chaotische Anordnung und er wird alle Teile fein säuberlich ausrichten, um sich schneller orientieren zu können, sprich: Wir können die Teile zufällig verteilt, aber in Zeilen und Spalten klar getrennt anzeigen. Wir wählen den letztgenannten Weg. Um trotz geordneter Darstellung Zufallspositionen zu erhalten, gehen wir prinzipiell so vor wie im Workshop zum Memory-Spiel. Zunächst erstellen wir ein temporäres Array, das alle möglichen Positionen in der korrekten Reihenfolge aufnimmt. Die Positionen entsprechen jeweils einem Vielfachen der Breite und Höhe des schon so oft aufgetauchten, aber nicht wirklich existierenden Quadrats. Später greifen wir jeweils mit einem zufällig gewählten Index darauf zu und addieren zu dem ermittelten Wert einen Abstand, den wir in nRechts initialisieren. Da sich die Puzzleteile

532

Kapitel 32  Spiele

rechts neben dem Spielfeld befinden sollen, ergibt sich nRechts aus der aktuellen Position der Vorlage zuzüglich ihrer Breite – das ist notwendig, weil sich der Registrierungspunkt von mBild in dessen linker oberer Ecke befindet – zuzüglich einem willkürlichen Abstand von 30 Pixeln. Für die weiteren Berechnungen deklarieren wir abschließend einige Variablen. 17. Erweitern Sie die init()-Funktion nach der Deklaration der lokalen Variablen nNum, nIndexI etc:  for (i=0; i
 nIndexI = 0;

} else if (i == nZeilen-1) {  nIndexI = 2; } else {

 nIndexI = 1; }

 for (j=0; j
 nIndexJ = 0;

} else if (j == nSpalten-1) {  nIndexJ = 2; } else {

 nIndexJ = 1; }

 nNum = aPuzzleStruktur[nIndexI] [nIndexJ];  mTeil = mPuzzle. attachMovie(sName+nNum, sPuzzleInstanz+nTiefe, nTiefe);  mTeil._x = j*nBreite;  mTeil._y = i*nHoehe;

 mTeil.aZiel = [mTeil._x, mTeil._y];

 bmPuzzle = new BitmapData(mTeil._width, mTeil._ height, true, 0xffccccaa);  mBitmap = mPuzzle.createEmpty­ MovieClip(„puzzle“+nTiefe, nTiefe-1000);  mBitmap.attachBitmap(bmPuzzle, 1);

oRahmen = mTeil.getBounds(mTeil); 



 mBitmap.nOffsetX = oRahmen.xMin;  mBitmap.nOffsetY = oRahmen.yMin;

 var xPos:Number = mTeil._ x+mBitmap.nOffsetX;  var yPos:Number = mTeil._ y+mBitmap.nOffsetY;

 bmPuzzle.copyPixels(bmBitmap, new Rectangle(xPos, yPos, mTeil._width, mTeil._height), new Point(0, 0));  nTiefe++; }

}

Zunächst müssen wir wissen, welche Puzzleform benötigt wird. Sie ergibt sich aus der aktuellen Zeile und aktuellen Spalte, in der wir uns befinden. Wir unterscheiden in der äußeren for-Schleife für die Zeilen folgende Fälle:

• Erste Zeile: Die Variable nIndexI erhält den Wert

0. Wir verwenden später diesen Wert, um auf ein Element innerhalb von aPuzzleStruktur zuzugreifen, denn dort haben wir ja die zu verwendenden Puzzleteile abgespeichert. In diesem konkreten Fall würde es bedeuten, dass wir das erste Element [1,2,3] ansprechen werden; • Zweite bis vorletzte Zeile: Die Variable nIndexI erhält den Wert 1; • Letzte Zeile: Die Variable nIndexI erhält den Wert 2. Innerhalb jeder Zeile unterscheiden wir in der inneren for-Schleife für jede Spalte folgende Fälle:

• Erste Spalte: Wir verfahren wie zuvor bei den Zei-

len, verwenden jedoch eine andere Variable, nämlich nIndexJ, die hier auf 0 gesetzt wird; • Zweite bis vorletzte Spalte: Die Variable nIndexJ erhält den Wert 1; • Letzte Spalte: Die Variable nIndexJ erhält den Wert 2. In nNum speichern wir den jeweils auf diese Weise ermittelten Wert, den wir verwenden, um das richtige Puzzleteil aus der Bibliothek einzufügen. Aus Gründen der Einfachheit speichern wir in mTeil eine Referenz auf den verwendeten MovieClip, der per attachMovie() in mPuzzle abgelegt wird.

32.3  Puzzle

Um die Schleifen besser zu verstehen, betrachten wir zwei konkrete Beispiele:

• Angenommen, wir befinden uns beim ersten Puzz-

leteil, also in der linken oberen Ecke. In dem Fall betragen sowohl die aktuelle Zeilennummer wie auch die aktuelle Spaltennummer 0, da die Zählvariablen in beiden Schleifen jeweils mit 0 initialisiert werden. Dementsprechend betragen nIndexI und nIndexJ ebenfalls 0. Der Zugriff auf aPuzzleStruktur lautet mit diesen konkreten Werten nNum = aPuzzleStruktur[0][0], wir lesen also im ersten Element, bestehend aus [1,2,3], dessen erstes Element, nämlich die 1, aus. In die linke obere Ecke würde nach unserer Berechnung Puzzleteil mPuzzle1 eingefügt; • Angenommen, wir befinden uns in der dritten Zeile in der zweiten Spalte. Handelt es sich dabei bereits um die letzte Zeile, trifft der else-if-Fall in der äußeren Schleife zu. Tatsächlich verfügt unser Puzzle jedoch über fünf Zeilen, also gilt der an dritter Stelle angeführte else-Fall, wodurch in nIndexI eine 1 gespeichert wird. Ähnlich verfährt die innere Schleife: Da die angenommene Spalte weder der ersten noch der letzten Spalte entspricht, wird nIndexJ eine 1 zugewiesen. Für nNum erhalten wir aPuzzleStruktur[1][1], was dem zweiten Element innerhalb des aus [4,5,6] bestehenden zweiten Elements und damit der Zahl 5 entspricht. Nach dem Einfügen wird jedes Teil auf seine korrekte Position gesetzt, die sich natürlich als ein von den betreffenden Zählvariablen der Schleifen vorgegebenes Vielfaches der Breite und Höhe des  – Sie ahnen es schon  – imaginären Quadrats ergibt. Wir speichern die x- und y-Position in einem dem jeweiligen Teil zugewiesenen Array, so das wir später sehr einfach kontrollieren können, ob alle Teile vom Spieler an die richtige Stelle gesetzt wurden. In den folgenden drei Zeilen erstellen wir jeweils ein neues BitmapData-Objekt in der Breite und Höhe des Puzzleteils. Es dient uns später dazu, um die konkrete Grafik aus dem Originalbild zu kopieren. Da wir es mit einer Maske versehen müssen, erhält derjenige MovieClip, der diese Bitmap aufnimmt, eine sehr niedrige Tiefe. Die benötigte Maske wird dann auf jeden Fall darüber liegen. Wie wir bereits oben in einer Abbildung gesehen haben, entspricht unser gedachtes Quadrat nicht der

533

tatsächlichen Form der Puzzleteile. Diese wird jedoch benötigt, um die Ausbuchtungen der Teile korrekt zeichnen zu können. Daher speichern wir in dem Objekt oRahmen die tatsächlichen Ausmaße, wobei wir auf getBounds(), also das Begrenzungsrechteck, zugreifen. Intuitiv denkt man vielleicht an die Eigenschaften _width bzw. _height, die sich erheblich einfacher verwenden ließen. Sie nützen uns jedoch nur dann etwas, wenn sich der Registrierungspunkt des Puzzleteils in jedem Fall in dessen linker oberer Ecke befindet. Das trifft nur auf die Teile 1, 4 und 7 zu. Bei den übrigen Teilen ragt die Ausbuchtung entweder nach links oder nach oben über den Registrierungspunkt hinaus. Das lässt sich über die genannten Eigenschaften leider nicht auslesen, sehr wohl jedoch mit Hilfe des Begrenzungsrechtecks bzw. getBounds(). Dort erhalten wir nämlich jeweils den kleinsten und größten x- sowie kleinsten und größten y-Wert dieses Rechtecks, wie Abbildung 169 am Beispiel des Puzzleteils 6 demonstriert. Die linke obere Ecke des hier dargestellten Begrenzungsrechtecks wird von Flash durch einen Punkt mit den Koordinaten xMin und yMin, die rechte untere Ecke mit den Koordinaten xMax und yMax beschrieben. Wie die Abbildung zeigt, liegt yMin über dem y-Wert des Registrierungspunkts, ist also kleiner und damit negativ. Wir erhalten deshalb einen negativen Wert, weil Flash logischerweise das Koordinatensystem des MovieClips verwendet. Wenn wir nachher den korrekten Ausschnitt aus dem Originalbild zeichnen, müssen wir also als Startposition den y-Wert unseres

Abbildung  169:  Begrenzungsrechteck und Registrierungspunkt von mcPuzzle6

534

Kapitel 32  Spiele

Puzzleteils minus den nach oben verschobenen Wert, den wir als Offset bezeichnen wollen, wählen. Mit dem x-Wert müssen wir, je nach vorliegendem Puzzleteil, ebenso verfahren. Diesen Offset speichern wir pro Teil in einer eigenen Variablen. Er beträgt jeweils 0, wenn nichts überragt, andernfalls –12. Mit dem Aufruf der Methode copyPixel() führen wir den eigentlichen Zeichenvorgang aus (alternativ wäre auch die schnellere, aber etwas komplexere Methode draw() möglich). Dabei übergeben wir als Argumente:

• Die Grafik, von der wir abzeichnen, also das Motiv des Spiels; • Der Ausschnitt, der gezeichnet wird. Dabei handelt es sich um ein Rechteck, dessen Position der Position des jeweiligen Puzzleteils zuzüglich des errechneten Offsets entspricht. Größe und Breite des Ausschnitts sind mit Größe und Breite des jeweiligen Teils identisch; • Die Anfangsposition der Zeichnung in unserem Puzzleteil.

Genau genommen zeichnet Flash nun nicht unsere mühsam erstellte Puzzleform, sondern lediglich ein Rechteck, das dem Begrenzungsrechteck der Form entspricht. Wir haben diesen Weg gewählt, weil wir durch die spätere Verwendung einer Maske erheblich einfacher und insgesamt recht sauber Rundungen erstellen können als wenn wir sie direkt über BitmapData zeichnen wollten. 18. Fügen Sie unmittelbar vor dem Inkrement von nTiefe folgende Zeilen ein:

Zufall = Math.floor(Math. n random()*aZufPos.length);

 mTeil._x = aZufPos[nZufall] [0]+nRechts;

 mBitmap._x = mTeil._x+mBitmap.nOffsetX;  mTeil._y = aZufPos[nZufall][1];  aZufPos.splice(nZufall, 1);

 mBitmap._y = mTeil._y+mBitmap.nOffsetY;  mTeil.origX = mTeil._x;  mTeil.origY = mTeil._y;  mTeil.puzzle = mBitmap;

Beim Testen erscheinen rechts neben dem Motiv Rechtecke, die teilweise von Puzzleformen verdeckt

werden. Damit wir tatsächlich mit dem Puzzle etwas anfangen können, müssen alle Teile auf eine zufällige Position gesetzt werden. Die zu verwendenden Positionen haben wir bereits anfangs in dem Array aZufPos abgespeichert. Nun ermitteln wir für die horizontale und vertikale Position von jedem Teil einen Zufallswert, der von der Gesamtlänge dieses Arrays abhängt, zuzüglich eines im Variablen-Block festgelegten Wertes, um einen Abstand zum Originalbild herzustellen. Den jeweiligen Wert weisen wir sowohl der Puzzleform mTeil wie der gezeichneten Bitmap mBitmap zu. Da letztere aufgrund der Ausbuchtungen größer sein können als die Form, müssen wir sie um den zuvor ermittelten Offset verschieben. Um zu verhindern, dass zwei verschiedene Teile dieselbe Position erhalten, löschen wir den zufällig ermittelten Wert aus aZufPos. Als kleines Gimmick möchten wir später, dass ein Puzzleteil, das vom Spieler nicht auf der dafür vorgesehenen Fläche losgelassen wird, wieder auf seine ursprüngliche Position zurück schnappt. Daher speichern wir diese pro Teil in einer Variablen. Zusätzlich speichern wir die zu einer bestimmten Form gehörige gezeichnete Bitmap, so dass es später einfacher möglich ist, beide gleichzeitig zu verwenden. Wie die Teile tatsächlich gezeichnet werden, können wir besser erkennen, wenn wir mTeil unsichtbar machen. 19. Fügen Sie vorübergehend unmittelbar vor der Inkrementierung von nTiefe ein:  mTeil._visible = false;

Jetzt sehen Sie, dass wir das Motiv mit Hilfe verschieden großer Rechtecke nachgezeichnet haben. 20. Löschen Sie die Zeile wieder, die mTeil ausblendet. 21. Fügen Sie an derselben Stelle folgende Zeile ein:  mBitmap.setMask(mTeil);

Jetzt endlich werden Sie beim Testen richtige Puzzleteile sehen. Jedes Rechteck mit dem aus der Originalgrafik kopierten Ausschnitt wird nun durch die darüber liegende Form maskiert. Damit nimmt unser Puzzleteil die korrekte Form an. Bevor wir den Teilen Interaktionsmöglichkeiten zuweisen, müssen noch einige Kleinigkeiten geändert werden. Denn noch fehlt die eigentliche Spielfläche, auf der das Puzzle zusammen

32.3  Puzzle

535 Abbildung 170:  Puzzleteile ohne Maske

gesetzt wird. Außerdem hält sich der Spielspaß in Grenzen, wenn die Vorlage in der momentanen Größe auf dem Screen herum lümmelt. 22. Fügen Sie unmittelbar vor der schließenden Klammer der init()-Funktion, aber außerhalb der Schleifen, folgende Zeilen ein:  mBild._y += mBild._height+10;

 mBild._xscale = mBild._yscale=75;

Nachdem wir die benötigten Teile aus dem Originalbild kopiert haben, verschieben wir es einfach nach unten. Wir wählen dabei einen recht willkürlichen Wert, nämlich die Höhe des Bildes zuzüglich einem kleinen Abstand. Sie können später natürlich mit beliebigen anderen Werten experimentieren. Anschließend skalieren wir es um 25 %. Auch hier sind andere Werte möglich, und je kleiner die Vorlage wird, desto schwieriger gestaltet sich das Puzzle. Gerne können Sie zusätzlich die Deckkraft reduzieren (z. B. mBild._alpha = 80). 23. Fügen Sie innerhalb von init() unmittelbar nach der Positionierung von mBild._y auf mPuzzle._y, also noch vor den Schleifen, folgende Zeilen ein:  mSpiel._x = mPuzzle._x;  mSpiel._y = mPuzzle._y;

 mSpiel.lineStyle(0.5, 0 × 000000);  mSpiel.beginFill(0xffffcc, 100);  mSpiel.lineTo(mBild._width, 0);

 mSpiel.lineTo(mBild._width, mBild._ height);  mSpiel.lineTo(0, mBild._height);  mSpiel.lineTo(0, 0);

 mSpiel.endFill();

Im Variablen-Block hatten wir mSpiel als leeren MovieClip angelegt. Nun positionieren wir ihn an derselben Stelle, an der sich auch der Behälter für die Puzzleteile befindet, so dass sich spätere Positionsberechnungen vereinfachen. Anschließend erstellen wir mit Hilfe der Zeichnungsmethoden ein Rechteck in der Größe der zu diesem Zeitpunkt noch nicht skalierten Puzzlegrafik und füllen es mit einem hellen Gelbton. Auf dieser Fläche muss der Spieler das Puzzle zusammen setzen. Das Ganze lässt sich optisch noch mit diversen Filtern aufmotzen. 24. Fügen Sie in init() unmittelbar nach der Initialisierung von nZeilen, also relativ nahe am Anfang, folgende Zeilen ein:

Schatten = new DropShadowFilter(5, f 45, 0 × 111111, 50, 5, 5, 1, 2);

 fBevel = new BevelFilter(3, 45, 0xaaaaaa, 0.5, 0 × 000000, 0.5, 3, 3, 2, 3);  aFilter = [fBevel];

Wir legen einen Schlagschatten an, den wir dann anzeigen wollen, wenn der Spieler auf ein Teil klickt. Der zweite Filter sorgt für einen leichten 3D-Effekt. Er verfügt über eine zugegebenermaßen verwirrend große Anzahl an Parameter, die hier noch nicht einmal alle verwendet werden. Im Einzelnen übergeben wir folgende Argumente:

• Anzahl an Pixeln, um die die geschliffene Kante verschoben wird. Wenn Sie diesen Wert zu hoch wählen, ist aufgrund der relativ geringen Größe der Puzzleteile kein Effekt mehr erkennbar; • Winkel der geschliffenen Kante;

536

Kapitel 32  Spiele

• Farbe des Glanzlichts auf der Kante; • Alphawert dieser Farbe. Diesen Wert sollten Sie

nicht wesentlich höher wählen als in unserem Beispiel, da die Teile ansonsten aussehen, als würden sie am oberen und linken Rand leicht schimmeln. So etwas fasst man noch nicht einmal mehr mit der Maus an! • Farbe des Schattens der Kante; • Dessen Alphawert. Hier empfiehlt sich wie zuvor die Wahl eines mittleren Wertes; • Horizontale Weichzeichnung in Pixel; • Vertikale Weichzeichnung in Pixel; • Stärke des Farbaufdrucks; • Qualität des Filters. Experimentieren Sie ruhig mit verschiedenen Werten. Sie sollten jedoch nicht zu stark von den angegebenen Werten abweichen, da ansonsten der Effekt eher unrealistisch wirkt. Um diesen Filter verwenden zu können, speichern wir ihn im Array aFilter. Wir benötigen dieses Array, um jedem Puzzleteil zu einem späteren Zeitpunkt neben dem Bevel- auch andere Filter zuweisen zu können. 25. Fügen Sie innerhalb von init() unmittelbar nach der Zuweisung der Maske ein:

mTeil.puzzle.filters = aFilter; 

Ihre Puzzleteile zeigen nun einen leichten 3D-Effekt, wie in Abbildung 171 zu erkennen ist.

Wir weisen den zuvor erstellten und in unserem Array abgespeicherten Filter der filters-Eigenschaft der Teile zu. Damit ist das Erstellen und Positionieren der benötigten Elemente abgeschlossen. Nun fehlt noch die Funktionalität. 26. Fügen Sie innerhalb von init() unmittelbar vor dem Inkrementieren von nTiefe ein:  mTeil.onPress = geklickt;

Teil.onRelease = mTeil. m onReleaseOutside=losgelassen;

Wenn wir auf ein Teil (konkret: die Maske) klicken, wollen wir es ziehen, und beim Loslassen ablegen. Das geschieht mit Hilfe zweier noch zu definierender Funktionen, die einem onPress bzw. einem onRelease/onReleaseOutside-Ereignis aller Puzzleteile zugewiesen werden. 27. Fügen Sie nach der schließenden Klammer der init()-Funktion folgende Deklaration ein:  function geklickt() {

 this.swapDepths(nSwapMaske);

 this.puzzle.swapDepths(nSwapTeil);

 aFilter.push(fSchatten);

 this.puzzle.filters = aFilter; }

 function losgelassen() {

 this.swapDepths(nSwapMaske);

 this.puzzle.swapDepths(nSwapTeil);

 aFilter = [fBevel];

Abbildung 171:  Puzzleteile mit BevelFilter

 this.puzzle.filters = aFilter; }

Wenn Sie auf ein beliebiges Puzzleteil klicken, sehen Sie es, solange die Maustaste gedrückt ist, hervorgehoben und mit einem Schlagschatten unterlegt. Lassen Sie los, verschwindet der Schatten wieder und das Teil wird auf seine alte Tiefe zurückgesetzt, was man daran erkennen kann, dass es von anderen Teilen gegebenenfalls teilweise verdeckt wird. In der realen Welt bedeutet das Anfassen eines Puzzleteils, dass es sich im Vergleich zu den übrigen Teilen nun im Vordergrund befindet. Wir heben es ja schließlich hoch. Diesen Effekt können wir simulieren, indem jede Puzzlegrafik über die Funktion geklickt():

32.3  Puzzle

• Auf die höchstmögliche Tiefe gesetzt wird. Da ein

Teil in unserem Fall aus zwei Elementen, nämlich der jeweiligen Grafik sowie der zugehörigen Maske besteht, führen wir die Änderung der Tiefe mit Hilfe von swapDepths() auch zweimal durch. Die zu verwendende Tiefe haben wir ganz am Anfang im Variablen-Block definiert. Dabei ist lediglich darauf zu achten, dass die Tiefe der Maske natürlich höher sein muss als diejenige der Grafik. Ansonsten funktioniert die Maskierung nicht. Der Klick erfolgt auf die Maske, dessen zugehörige Puzzlegrafik in der Variablen puzzle gespeichert wurde; • Einen Schlagschatten erhält. Wir fügen den zuvor definierten Schlagschatten in unser Array hinein, so dass sich dort ein Bevel- und ein DropShadowFilter befinden. Dieses Array weisen wir jeder Puzzlegrafik zu. Würden wir der filters-Eigenschaft direkt den Inhalt des Schatten-Filters zuweisen, ginge der BevelFilter verloren. Beim Loslassen wollen wir mit Hilfe der Funktion losgelassen() den ursprünglichen Zustand wieder herstellen. Daher setzen wir die Tiefen von Puzzlegrafik und Maske auf den vorherigen Wert zurück, der durch die swapDepth()-Methode in der geklickt()-Funktion in den Variablen nSwapMaske und nSwapTeil gespeichert wurde. Das Array aFilter speichert den BevelFilter erneut, wodurch wir faktisch den Schlagschatten entfernen. Damit die Änderung wirksam wird, weisen wir das Array erneut der filters-Eigenschaft zu, so dass nur noch der BevelFilter zu sehen ist. 28. Erweitern Sie die Funktion geklickt() nach der Zuweisung der filters-Eigenschaft:

var nDifX:Number = _xmouse-this._x;  var nDifY:Number = _ymouse-this._y; 

 this.onEnterFrame = function() {

 this._x = _xmouse-nDifX;  this._y = _ymouse-nDifY;

537

Wir wollen ein Teil genau an der Stelle an die Maus binden, an der wir geklickt haben. Da es sich dabei höchst selten um den Registrierungspunkt handeln wird, müssen wir den Abstand zwischen Registrierungspunkt und Mausposition berechnen. Wir speichern ihn in den Variablen nDifX und nDifY. Anschließend erhält die angeklickte Maske ein permanentes Ereignis, das seine Position auf die Mausposition abzüglich des zuvor berechneten Offsets setzt. Das gleiche geschieht natürlich für die zugehörige Puzzlegrafik, wobei wir dort zusätzlich den aufgrund der Ausbuchtungen bedingten Offset berücksichtigen müssen. Zwar bietet Flash mit startDrag()eine vorgefertigte Methode zum Ziehen, doch sind wir damit nicht in der Lage, mehrere Objekte gleichzeitig zu bewegen. Daher wählen wir die Lösung mit dem onEnterFrame -Ereignis. 29. Erweitern Sie die Funktion losgelassen() unmittelbar vor der schließenden Klammer:  delete this.onEnterFrame;

Wenn das onEnterFrame -Ereignis für die Bewegung verantwortlich ist, dann lässt sie sich leicht stoppen, indem wir es löschen – was hiermit geschieht. Momentan lässt sich ein Teil dort träge nieder, wo wir es loslassen. Das entspricht jedoch nicht dem Verhalten eines anständigen Teils. 30. Erweitern Sie die Funktion losgelassen() unmittelbar nach dem Löschen des onEnterFrame -Ereignisses:  if (mSpiel.hitTest(_xmouse, _ymouse, true)) {  xPos = _xmouse-mPuzzle._x;

x Pos = Math.floor(xPos/ nBreite)*nBreite;

 yPos = _ymouse-mPuzzle._y;

y Pos = Math.floor(yPos/ nHoehe)*nHoehe;

 this.puzzle._x = this._x+this. puzzle.nOffsetX;

 this._x = xPos;



 this.puzzle._x = this._x+this. puzzle.nOffsetX;

 this.puzzle._y = this._y+this. puzzle.nOffsetY; };

Die Puzzleteile können nun mit der Maus gezogen werden, erweisen sich allerdings noch als ausgesprochen anhänglich.

 this._y = yPos;

 this.puzzle._y = this._y+this. puzzle.nOffsetY;

} else {

538

Kapitel 32  Spiele

 this._x = this.origX;  this._y = this.origY;

 this.puzzle._x = this._x+this. puzzle.nOffsetX;  this.puzzle._y = this._y+this. puzzle.nOffsetY;

}

Unser Puzzle ist insofern schon spielbar, als Sie in der Lage sind, einzelne Teile auf der Spielfläche abzulegen. Dort springen sie an eine bestimmte Position, wenn sie losgelassen werden. Damit stellen wir sicher, dass alle Teile in einer gewissen Ordnung angezeigt werden. Befindet sich die Maus außerhalb des Spielfelds, springt das Teil zurück an seine ursprüngliche Position. Wir müssen beim Loslassen zwei Fälle unterscheiden:

• Die Maus befindet sich über dem Spielfeld. Das

können wir mit Hilfe der hitTest()-Methode herausfinden. Damit exakt auf die Mausposition getestet wird, setzen wir innerhalb der Klammern die shape flag auf true. Damit kontrolliert Flash, ob sich die x- und y-Position der Maus innerhalb derjenigen Form befindet, auf der die Puzzleteile abgelegt werden sollen. Trifft das zu, errechnen wir Zielposition. Sie entspricht einem gedachten Quadrat – das ist wirklich das letzte Mal, dass uns dieses Ding über den Weg läuft! – auf dem Spielfeld. Denn wenn wir alle Puzzleteile dort ablegen würden, ohne dass sie sich einander überdecken, dann würden wir eine einfache Kachelung, bestehend aus eben jenen Quadraten, erreichen. Beim Loslassen müssen wir nur noch ermitteln, auf welchem dieser Quadrate sich die Maus befindet; • Die Maus befindet sich an einer beliebigen Position außerhalb des Spielfelds. Dann müssen wir lediglich Maske und Grafik an die ursprüngliche Position zurück setzen, was sich einfach gestaltet, da wir beim erstmaligen Einfügen der Teile diese Position in den Variablen origX und origY gespeichert haben. Immer dann, wenn ein Teil innerhalb des Spielfelds positioniert wird, müssen wir nachschauen, ob das Puzzle gelöst wurde. 31. Ergänzen Sie innerhalb der loslassen()-Funktion unmittelbar vor der schließenden Klammer der if-Bedingung, aber noch vor dem else-Fall:

 fertig();

32. Fügen Sie im Funktions-Block folgende Deklaration ein:  function fertig() {

 for (var e in mPuzzle) {

 if (typeof (mPuzzle[e]) == „movieclip“) {

 if ((mPuzzle[e]._name).substring(0, 4) == sPuzzleInstanz) {

 if (mPuzzle[e]._x != mPuzzle[e].aZiel[0] || mPuzzle[e]._y != mPuzzle[e]. aZiel[1]) {  return; } } } }

 trace(„habefertisch!“);

}

Testen Sie das Spiel, das nun korrekt funktioniert. Eine Kontrolle, ob das Spiel beendet wurde, macht nur an einer einzigen Stelle Sinn, nämlich immer dann, wenn ein Teil an einer beliebigen Position innerhalb des Spielfelds abgelegt wurde. Die Siegbedingung lautet ganz einfach, dass sich jedes Teil an seiner korrekten Zielposition befinden muss. Diese haben wir beim Erstellen der Puzzleteile abgespeichert, was insofern sehr einfach war, als unsere Teile ursprünglich auf der Vorlage eingefügt wurden. Die Funktion fertig() kontrolliert alle Elemente innerhalb des übergeordneten MovieClips mPuzzle, ob es sich um einen MovieClip handelt und ob der Instanzname dieses MovieClips mit dem in der Variablen sPuzzleInstanz gespeicherten Präfix beginnt. Falls ja, wissen wir, dass es sich um ein gültiges Puzzleteil handelt und nicht um irgendeines der anderen Elemente, die ebenfalls in mPuzzle vorhanden sind. Alternativ hätte man, so wie wir es an anderer Stelle getan haben, alle Puzzleteile in einem Array speichern und dann alle Elemente des Arrays durchgehen können. Anschließend kontrollieren wir, ob mindestens die horizontale oder die vertikale Position des betreffenden Elements nicht mit dessen erwünschter Zielposition übereinstimmt. Trifft das zu, brechen wir die

32.4  Code

Funktion einfach ab und alle nachfolgenden Anweisungen werden ignoriert. Nur dann, wenn in jedem Fall die aktuelle Position mit der gespeicherten Zielposition übereinstimmen, gelangt Flash zu der letzten Anweisung innerhalb der Funktion, nämlich dem trace()-Befehl, der hier stellvertretend für eine das Spielende zu behandelnde Funktion steht. Sie müssten hier natürlich ihre eigene Funktion einfügen, die z. B. ein Feedback zum gelösten Rätsel gibt und vielleicht die Möglichkeit anbietet, ein Puzzle mit einem anderen Motiv und/oder mit mehr Puzzleteilen zu spielen. Alternativ könnte man das Ende kontrollieren, indem man jedes mal, wenn ein Teil korrekt abgelegt wurde, eine Variable inkrementiert und mit der Gesamtzahl der Teile vergleicht. Sind beide identisch, ist das Spiel beendet. Ein Puzzle dieser Art genügt den meisten Ansprüchen. Noch attraktiver wird es, wenn die verwendeten Bilder nicht intern vorliegen, sondern extern geladen werden, nachdem der Anwender sich aus einer Thumbnail-Vorschau dasjenige Motiv gewählt hat, mit dem er spielen möchte. Als weiteres Gimmick könnte man den Spieler einen Schwierigkeitsgrad wählen lassen, der sich nach Anzahl der Puzzleteile richtet. Um einen Vergleich mit anderen Spielern zu ermöglichen, kann man die verbrauchte Zeit und/oder die Anzahl der Versuche protokollieren. Last not least wird der Schwierigkeitsgrad automatisch erhöht, wenn die Puzzleteile zufällig gedreht eingefügt werden.

32.4 Code Der gesamte Code: //---------––-- import –--------------import flash.display.BitmapData; import flash.geom.Rectangle; import flash.geom.Point; import flash.filters.*;

//-------------- vars –---------------var mBild:MovieClip = this. createEmptyMovieClip(„picture“, 1);

539

var mBitmap:MovieClip;

var aPuzzleStruktur:Array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; var nBreite:Number = 48; var nHoehe:Number = 48; var nTiefe:Number = 0;

var sName:String = „mcPuzzle“;

var sPuzzleInstanz:String = „teil“; var sExport:String = „grafik.jpg“;

var bmBitmap:BitmapData = BitmapData. loadBitmap(sExport); var bmPuzzle:BitmapData; var oRahmen:Object;

var nSwapMaske:Number = 1000; var nSwapTeil:Number = 999;

var fSchatten:DropShadowFilter; var fBevel:BevelFilter; var aZufPos:Array = []; var aFilter:Array = [];

//------------- functions –-----------function init():Void {

 mBild.attachBitmap(bmBitmap, 1);

 var nSpalten:Number = mBild._width/ nBreite;  var nZeilen:Number = mBild._height/ nHoehe; f Schatten = new DropShadowFilter(5, 45, 0 × 111111, 50, 5, 5, 1, 2);

 fBevel = new BevelFilter(3, 45, 0xaaaaaa, 0.5, 0 × 000000, 0.5, 3, 3, 2, 3);  aFilter = [fBevel];

 mPuzzle._x = nBreite;  mPuzzle._y = nHoehe;

 mBild._x = mPuzzle._x;  mBild._y = mPuzzle._y;

 mSpiel._x = mPuzzle._x;  mSpiel._y = mPuzzle._y;

 mSpiel.lineStyle(0.5, 0 × 000000);

var mPuzzle:MovieClip = this. createEmpty­ MovieClip(„behPuzzle“, 2);

 mSpiel.beginFill(0xffffcc, 100);

var mTeil:MovieClip;

 mSpiel.lineTo(0, mBild._height);

var mSpiel:MovieClip = this.createEmpty MovieClip(„spielfeld“, 0);

 mSpiel.lineTo(mBild._width, 0);

 mSpiel.lineTo(mBild._width, mBild._ height);

540

 mSpiel.lineTo(0, 0);  mSpiel.endFill();

 var aTemp:Array = [];

 for (var i:Number = 0; i
 for (var j:Number = 0; j
 for (a in aZufPos) {

 trace(aZufPos[a]); }

v ar nRechts:Number = mBild._x+mBild._ width+30;  var nNum:Number, nIndexI:Number, nIndexJ:Number, nZufall:Number;  for (i=0; i
 nIndexI = 0;

} else if (i == nZeilen-1) {  nIndexI = 2; } else {

 nIndexI = 1; }

 for (j=0; j
 nIndexJ = 0;

} else if (j == nSpalten-1) {  nIndexJ = 2; } else {

 nIndexJ = 1; }

 nNum = aPuzzleStruktur[nIndexI] [nIndexJ];  mTeil = mPuzzle. attachMovie(sName+nNum, sPuzzleInstanz+nTiefe, nTiefe);

Kapitel 32  Spiele

b mPuzzle = new BitmapData(mTeil._ width, mTeil._height, true, 0xffccccaa);  mBitmap = mPuzzle.createEmpty­ MovieClip(„puzzle“+nTiefe, nTiefe-1000);

 mBitmap.attachBitmap(bmPuzzle, 1); oRahmen = mTeil.getBounds(mTeil);

 mBitmap.nOffsetX = oRahmen.xMin;  mBitmap.nOffsetY = oRahmen.yMin;  var xPos:Number = mTeil._ x+mBitmap.nOffsetX;  var yPos:Number = mTeil._ y+mBitmap.nOffsetY;

 bmPuzzle.copyPixels(bmBitmap, new Rectangle(xPos, yPos, mTeil._width, mTeil._height), new Point(0, 0)); n Zufall = Math.floor(Math. random()*aZufPos.length);

 mTeil._x = aZufPos[nZufall] [0]+nRechts;

 mBitmap._x = mTeil._x+mBitmap. nOffsetX;

 mTeil._y = aZufPos[nZufall][1];  aZufPos.splice(nZufall, 1);

 mBitmap._y = mTeil._y+mBitmap. nOffsetY;  mTeil.origX = mTeil._x;  mTeil.origY = mTeil._y;  mTeil.puzzle = mBitmap;  mBitmap.setMask(mTeil);

 mTeil.puzzle.filters = aFilter;  mTeil.onPress = geklickt;

m Teil.onRelease = mTeil. onReleaseOutside=losgelassen;  nTiefe++; } }

 mBild._y += mBild._height+10;

 mTeil._x = j*nBreite;

 mBild._xscale = mBild._yscale=75;

 mTeil.aZiel = [mTeil._x, mTeil._y];

function geklickt() {

 mTeil._y = i*nHoehe;

}

 this.swapDepths(nSwapMaske);

32.4  Code

 this.puzzle.swapDepths(nSwapTeil);

541

 aFilter.push(fSchatten);

 this.puzzle._y = this._y+this. puzzle.nOffsetY;

 var nDifX:Number = _xmouse-this._x;

} else {

 this.onEnterFrame = function() {

 this._y = this.origY;

 this.puzzle.filters = aFilter;

 fertig();

 var nDifY:Number = _ymouse-this._y;

 this._x = this.origX;

 this._x = _xmouse-nDifX;

 this.puzzle._x = this._x+this. puzzle.nOffsetX;

 this._y = _ymouse-nDifY;

 this.puzzle._x = this._x+this. puzzle.nOffsetX;  this.puzzle._y = this._y+this. puzzle.nOffsetY;

 this.puzzle._y = this._y+this. puzzle.nOffsetY; } }

};

function fertig() {

function losgelassen() {

 if (typeof (mPuzzle[e]) == „movie­ clip“) {

}

 this.swapDepths(nSwapMaske);

 this.puzzle.swapDepths(nSwapTeil);  aFilter = [fBevel];

 this.puzzle.filters = aFilter;  delete this.onEnterFrame;

 if (mSpiel.hitTest(_xmouse, _ymouse, true)) {  xPos = _xmouse-mPuzzle._x; x Pos = Math.floor(xPos/ nBreite)*nBreite;

 yPos = _ymouse-mPuzzle._y; y Pos = Math.floor(yPos/ nHoehe)*nHoehe;  this._x = xPos;  this._y = yPos;

 this.puzzle._x = this._x+this. puzzle.nOffsetX;

 for (var e in mPuzzle) {

 if ((mPuzzle[e]._name).substring(0, 4) == sPuzzleInstanz) {  if (mPuzzle[e]._x != mPuzzle[e].aZiel[0] || mPuzzle[e]._y != mPuzzle[e]. aZiel[1]) {  return; } } } }

 trace(„habefertisch!“); }

//-------------- aufruf –-------------init();

33

Ressourcen

Wenn Sie es bis hierher geschafft haben, werden Sie hoffentlich denken: „Schade, dass es schon zu Ende ist“. Doch keine Angst, die große Flash-Welt bietet mehr Ressourcen, als ein Einzelner in seinem ganzen Leben bewältigen kann. Und so sind folgende Hinweise nur als ein sehr rudimentärer Wegweiser gedacht, um sich mit dem einen oder anderen Thema näher auseinander setzen zu können. Dies ist, wie Sie festgestellt haben, keine Webseite und enthält insofern auch keinen klickbaren Link. Daher erübrigt sich eigentlich der Standard-Disclaimer, diese seltsame Ausgeburt deutschen Rechtsverständnisses oder auch -missverständnisses. Man stelle sich ein Restaurant vor, in dem man den Kellner um eine Empfehlung für ein Mittagessen bittet. Mit einem weinenden und einem lachenden Auge verkündet der Kellner nun: „Für heute könnte ich Ihnen den gespickten Rehrücken mit Preiselbeersoße unbedingt empfehlen – möchte aber dringend davon abraten, ihn zu bestellen!“. Da man hierzulande jedoch nie sicher sein kann, ob nicht schon morgen jeder Autor unmittelbar verantwortlich gemacht wird für Links, die er erwähnt, hier ein juristischer Hinweis: Der Autor distanziert sich mit angemessener Empörung und juristischer Entschiedenheit von allen nachfolgenden Quellen, die er insgesamt guten Gewissens empfehlen kann.

33.1 Literatur

Alle Angaben sind Stand: Frühjahr 2010

• J. Lott/D. Schall/K. Peters: ActionScript 3.0 Cook-

Actionscript allgemein Wir haben im vorliegenden Buch ausgewählte Themen kennen gelernt und aus praktischen Gründen das eine oder andere Element brutal unterschlagen. Wer deswegen ein schlechtes Gewissen bekommen hat, sollte sich noch ganz schnell zulegen:

• J. Lott/Robert Reinhardt: Flash 8 ActionScript Bible; 2006

Ein Name hält Wort: Die schon seit Jahren zu den diversen Sprachversionen erscheinende Bible stellt die umfassendste und systematischste Referenz für Einsteiger und mäßig Fortgeschrittene dar. Sie schlägt in qualitativer Hinsicht die nicht minder umfangreiche offizielle Flash-Hilfe um Längen: Sie ist sowohl verständlicher geschrieben als auch voll sinnvoller, durchaus praxisrelevanter Beispiele  – Pflichtlektüre. Die Bible liegt für AS 3.0 ebenfalls vor, allerdings verfasst von anderen Autoren und leider weniger sinnvoll aufgebaut als die genannte ältere Version. Apropos Flash 8: lassen Sie sich von der Versionsnummer nicht abschrecken, das dort Gesagte stimmt auch noch für AS2 in CS4 und CS5. Einen Schritt weiter geht: book; 2007

Hier werden für zahlreiche Probleme, die einem im Flash-Alltag über den Weg laufen, fertige, unmittelbar einsatzbereite Skriptlösungen einschließlich nachvollziehbarer Erläuterungen geboten. Nein, die 3.0 im Titel ist kein Schreibfehler, der Band behandelt A. Kohl, ActionScript 2, doi:10.1007/978-3-540-35182-5, © Springer 2011

543

544

tatsächlich diese Sprachversion. Doch keine Angst: Wer in AS 2.0 ziemlich sattelfest ist, kann zahlreiche dort vorgestellte Lösungen einigermaßen einfach portieren (soweit es die Sprachunterschiede zulassen). Angenehm bei Lott ist vor allem die Konzentration auf einzelne Problemstellungen, während die weit überwiegende Masse der Flash-Bücher einen lexikalischen Überblick bietet. Wer neugierig ist und wissen möchte, was es denn noch so an schönen Flash-Büchern gibt, kann sich mal folgende Site anschauen: www.friendsofed.com Der Verlag hat sich vor Jahren auf Flash-Bücher spezialisiert, auch wenn das Angebot mittlerweile auf andere Themen ausgeweitet wurde. Es gibt wohl kaum einen Flash-relevanten Bereich, der hier nicht seinen Niederschlag in Form bedruckten Papiers gefunden hätte. Und die Qualität der Bücher ist durchweg passabel. Programmierte Animationen und Effekte Obgleich ein zentrales Thema, existiert entschieden zu wenig Literatur dazu. Vor vielen Jahren veröffentlichte Robert Penner einen Klassiker, der leider nie eine überarbeitete Neuauflage erlebte. Glücklicherweise hat der unermüdliche Betreiber der genialen bit101-Site sein Wissen zwischen zwei Buchdeckel gepresst:

• K. Peters: Actionscript Animation. Making Things Move; 22008

Sehr systematisch behandelt der Autor Animationstechniken per AS und spannt den Bogen von den unvermeidlichen physikalischen und trigonometrischen Grundlagen über Kinematik bis hin zu speziellen Themen wie der Brownschen Bewegung. Mitunter schwierige Materie, aber exzellent behandelt und daher ein Muss für jeden Flasher! Peters hat den Band mittlerweile für AS3 überarbeitet und gleich einen weiteren Band mit fortgeschrittenen Techniken (leider nur noch in AS3) nachgeschoben. Mehr experimentellen Charakter beweist:

Kapitel 33  Ressourcen

ja, Mathematik kann eine eigene Ästhetik inne wohnen  –, mal intellektuell genial und mal einfach nur interessant sind. Lehrreich ist das Sammelsurium allemal, aber nicht immer leicht zu verdauen. Auf der zugehörigen Mini-Site kann man in alle im Buch behandelten Beispiele hinein schnuppern: www.friends ofed.com/fmc. Die Code-Beispiele sind zwar nur in AS1 geschrieben, lassen sich aber aufgrund der minimalen Unterschiede zu AS2 schnell portieren. In deutscher Sprache existiert:

• S. Kluth u. a.: Flash Fast Forward. Die Workshops für Fortgeschrittene; 2008

Thematisch gibt es nur wenige Überschneidungen zwischen den genannten Titeln. Im Vergleich zu Peters hat man bei diesem Band eher den Eindruck einer großen bunten Kiste mit Workshops zu allem Möglichen, dargeboten in diversen Skriptvarianten (AS 2.0, 3.0, prozedural, OOP), was etwas verwirren kann. Davon abgesehen sind die Workshops didaktisch hervorragend aufgebaut und von Bildeffekten über physikalische Simulationen bis hin zu dynamischen Applikationen bekommt man Einiges geboten. Erwähnen sollte man auch:

• S.-C. Kannengießer/M. Kannengießer: Flash 9 Powerworkshops; 2006

Der Band enthält wie der vorgenannte Titel eine große Sammlung an Flash-Beispielen verschiedenster Themen. Erfreulicherweise werden den ansonsten viel zu stiefmütterlich behandelten Filtern, Ebenen-Modi und BitmapData etwas breiteren Raum eingeräumt. Die gewählten Themen sind spannend und nützlich, der Aufbau der Workshops ist jedoch nicht mit dem vorgenannten Band vergleichbar. Einsteiger beißen sich die Zähne aus, weil die notwendigen Erläuterungen enttäuschend knapp ausfallen. Spieleprogrammierung In deutscher Sprache liegt so gut wie nichts zu diesem Thema vor. Immerhin als Einführung nützlich erweist sich:

I. Kommer/T. Mersin: Spiele programmieren mit • Lifaros et. al.: Flash Math Creativity Second Edi- • Flash MX. 12 ActionScript-Workshops; 2003 tion; 2004

Der Band versammelt zahlreiche, von mathematischen Formeln inspirierte Basteleien, die mal schön –

Der Titel ist zwar völlig veraltet (Flash MX bzw. Flash 6), aber die vorgestellten Prinzipien gelten natürlich unabhängig von der Zeit, und es bietet ausge-

33.2  Lernvideos

sprochen einfachen Zugang zur Materie. Die Spiele sind vom Niveau her allerdings sehr simpel gestrickt. In englischer Sprache existieren gleich mehrere Titel, die solides Fachwissen vermitteln. Besonders hervorzuheben sind:

• G.

Rhodes: Macromedia Flash Professional 8 Game Development; 2007 • J. Makar: Macromedia Flash MX Game Design Demystified; 2004 Beide Titel bieten einerseits einen systematischen Überblick über die hinter diversen Casual Games stehenden Prinzipien und geben andererseits Einblick in ihre Programmierung. Während Makar mehr in die Breite geht und eine größere Vielzahl an Genres erfasst, konzentriert sich Rhodes auf das vollständige Erstellen von Spielen inklusive spezieller grafischer Effekte etwa mit Hilfe der BitmapData-Klasse. Wohl weil es viel zu speziell ist, wird leider ein wesentliches Thema der Spieleprogrammierung, nämlich die KI, in nahezu allen Titeln außen vor gelassen oder bestenfalls gestreift (z. B. bei Makar). Das ist schade, denn gerade dadurch können Spiele glaubhafter und anspruchsvoller gestaltet werden. Auch die Programmierung von Animationen und digitaler Kunst kann von ihr profitieren. Dem Interessierten bleibt leider nur der Griff zu entsprechenden Titeln, die sich zumeist höheren Programmiersprachen widmen und solide Kenntnisse voraussetzen. Die Abenteuerlustigen unter den Lesern sollten mal einen Blick wagen auf:

545

mittlerweile leider völlig veraltet ist, so hat Puscher ein Glanzstück abgeliefert und gezeigt, dass man mit Witz und Phantasie eine schwierige Materie verständlich machen kann. Es ist sehr zu bedauern, dass der Titel nie für die aktuelleren Versionen von Flash überarbeitet werden konnte. Flash-Einführungen gibt es zuhauf, aber keine, die mit einer derartigen Leichtigkeit Wissen vermitteln, ohne dabei gleichzeitig anspruchslos zu sein. „Mai English is not so gutt“ – tja, da es zwar bei Spielen, nicht jedoch bei Skript- und Programmiersprachen Lokalisierungen gibt, wird man sich wohl oder übel auf die englische Sprache einlassen müssen. Es gibt sowohl gute bis exzellente englischsprachige Bücher wie auch Sites mit unverzichtbaren Ressourcen (Foren, Downloads, Artikel). Dem hat der deutsche Markt mitunter nichts entgegen zu setzen. Wer sich also wirklich intensiv mit einem bestimmten Tool oder, wie hier, mit einer bestimmten Skriptsprache auseinandersetzen will oder soll, wird sich mit Englisch anfreunden müssen.

33.2 Lernvideos

Auf annähernd 900 Seiten behandelt der Autor sehr systematisch Arten, Einsatzzwecke und Programmierung von spielespezifischer KI. Zu den besonderen Vorteilen dieses Titels zählt es, dass die vorgestellten Lösungen in sprachunabhängigem Pseudo-Code aufgelistet werden, so dass man die zugrunde liegende Logik gut nachvollziehen und gegebenenfalls in AS nachprogrammieren kann. Hier zugegebenermaßen absolut deplaziert, aber dennoch unbedingt notwendig ist ein Hinweis auf ein Buch, das der Autor dieser Zeilen zu den innovativsten Flash-Titeln zählt:

Seit einigen Jahren boomt der Markt mit Lernvideos, die dem menschlichen Bedürfnis, durch Imitation anstatt durch Instruktion zu lernen, in idealer Weise entgegen kommen. Das mag spöttischer klingen als es tatsächlich gemeint ist, bieten doch derartige Videos tatsächlich einen extrem einfachen Zugang zu mitunter hochkomplexen Themen. Der einzige Nachteil besteht darin, dass sie i. d. R. nicht in einer einem dickleibigen Buch vergleichbaren Tiefe schulen können. Neben Verlagen wie Galileo und Markt und Technik ist vor allem Video2Brain mit umfassenden Video-Schulungen präsent. Video2Brain bietet gleich mehrere DVDs zu Flash allgemein und Actionscript sowie Flex im Besonderen, die allesamt empfehlenswert sind. Im englischsprachigen Raum fast schon eine Institution ist lynda.com mit einem noch breiteren Angebot an Lernvideos, die insgesamt gut aufgebaut und leicht nachvollziehbar, aber leider recht teuer sind. Solide gemacht ist beispielsweise:

F. Puscher: Das Flash-Kochbuch; 2002

• J. Lott: Actionscript 2.0 Beyond the Basics

Auch wenn sich der Titel eher allgemein mit Flash befasst, die erste Auflage nicht ohne Fehler war und es

In den Tutorials mit einem Umfang von ca. 13 Stunden behandelt der Autor sehr leicht nachvollziehbar

• I.

Millington: Artificial Intelligence for Games; 2006

546

u. a. die Grafik API, Shared Object, LocalConnection, Classes etc. Auf der genannten Site findet sich ein Überblick inklusive einiger Beispiel-Downloads. Ein Video-Training zum Thema Spieleprogrammierung erlaubt sogar den Zugriff auf mehrere Videos zum vollständigen Programmieren eines kleinen Spiels. Selbst ausgefallenere Themen finden sich im Angebot, so z. B.:

Kapitel 33  Ressourcen

ten Zugänglichkeit des Internets geschuldete Fülle den enormen Nachteil, dass nicht jeder, der ein Tutorial schreibt, auch tatsächlich dazu berufen ist. Will heißen: Es gibt erheblich mehr Konsalik-Epigonen als wahre Didakten und Experten unter den TutorialSchreibern. Dennoch lässt sich zu Einzelfragen so manche Perle finden, und echte Perlentaucher sollten zunächst folgende Gewässer ansteuern:

• T. Perkins: Actionscript 3.0: Building Particle Sys- • www.actionscript.org tems

In 30 kurzen Lektionen lernt man, ein recht einfaches, noch optimierfähiges, aber angenehm flexibles Partikel-System zu programmieren. Die einzelnen Arbeitsschritte sind in narrensichere Häppchen unterteilt, so dass jeder damit zurecht kommt. Auch in diesem Fall stört die verwendete Sprachversion 3.0 nicht wirklich, da sich der gesamte Code mit eigentlich relativ wenigen Handgriffen zu 2.0 portieren lässt. Aufgrund der recht hohen Kosten lohnen sich solche speziellen Schulungen tatsächlich nur, wenn eben ein besonderer Bedarf vorliegt. Wer kostenlose Lernvideos auf professionellem Niveau sucht, wird naheliegenderweise kaum fündig, schließlich ist der Aufwand für derartige Produkte recht hoch. Da die Betonung aber auf kaum liegt, darf man sich zumindest freuen über:

• www.gotoandlearn.com Thematisch breit gefächert und eher als Einführung in Skripting gedacht, behandelt Lee Brimelow gelegentlich auch speziellere Themen wie etwa ein Karussel-Menü, das in drei sehenswerten Video-Lektionen vorgestellt wird. In jedem Fall lohnt es sich, auf dieser Seite und, da man ja ohnehin schon gerade da ist, dem Blog des Autors unter der gleichen URL nachzuschauen.

33.3 Webseiten Das Internet platzt förmlich vor Tutorials und mitunter durchaus genialen Seiten, die zeigen, was mit Flash möglich ist. Tutorials und Artikel Bleiben wir zuerst bei den Tutorials: Anders als in den vorgenannten Medien hat die nicht zuletzt der leich-

Neben umfangreichen Tutorials zu Anfänger- bis Expertenfragen werden hier vor allem sehr viele fla-Dateien zum kostenlosen Download angeboten, die zum Ausprobieren geradezu einladen. Wer sich nur auf eine einzige Site einlassen möchte, hat sie an dieser Stelle soeben gefunden. Die anderen dürfen weiter surfen zu den weiter unten genannten Foren. Dabei sollte man sich ruhig einen kleinen Umweg erlauben: Einst adelte der holländische Kulturwissenschaftler Johann Huizinga den Menschen zum Homo Ludens, und Flash beweist, so scheint es, wie recht er hatte. Wer, dessen eingedenk, andere zum Spielen verführen möchte, kann hier lernen, wie man das professionell macht:

• www.gotoandplay.it Im Laufe der Zeit hat sich diese Seite zur Nummer 1 unter den spielebezogenen Infoseiten entwickelt. Dementsprechend anspruchsvoll präsentiert sich auch so mancher der zahlreichen Artikel und Tutorials, die allemal lesenswert sind. Wer wissen will, wie sich Inverse Kinematik mit Actionscript realisieren lässt, findet hier (und im oben erwähnten Buch von Peters) ebenso eine Antwort wie derjenige, der an verschiedenen Umsetzungen des in der professionellen Spieleentwicklung unerlässlichen A*-Algorithmus zur Wegfindung interessiert ist. Schade ist nur, dass diese Site nur noch sehr wenig frequentiert wird und daher keine neueren Inhalte mehr anbietet. Nicht minder spannend ist es, einem Flash-Entwickler auf dem Weg zum Spieleprogrammierer über die Schulter zu schauen:

• www.emanueleferonato.com Die Seite von Feronato glänzt nur so vor spannenden Experimenten mit durchaus anspruchsvollem Code, der in zahlreichen mehrteiligen Tutorials nachvollziehbar erklärt wird. Wenn Sie beispielsweise schon immer wissen wollten, wie man Line Rider program-

33.3  Webseiten

miert, dürfen Sie hier einen tiefen Blick auf eine ausführliche Artikelreihe mit Code riskieren. Wäre vor Jahren hierzulande das politische Klima anders gewesen, dann wäre PacMan vermutlich unter die Bestimmungen des Suchtmittelgesetzes gefallen, so überaus erfolgreich (und aus heutiger Perspektive zweifelsohne erschreckend gewalttätig) fraß sich der berüchtigte gelbe Knirps durch Horden von Pillen mit unbekannten Wirkstoffen. Hinter diesem spielerischen Evergreen steckt ein simples, in vielen anderen Spielen verwendetes Prinzip, das beispielhaft ausführlich behandelt wird bei:

• tonypa.pri.ee/tbw Der vorgestellte Code ist zwar etwas veraltet und stammt, gerechnet in IT-Jahren, aus der Jungsteinzeit, er zeigt jedoch, wie derartige kachelbasierte Spiele erstellt werden müssen. Die Site besteht aus einem über 100 (!) Seiten umfassenden, in zahlreiche Kapitel unterteilten Tutorial, das sich als pdf Offline lesen lässt. Glücklicherweise handelt es sich bei AS um eine ECMA-kompatible Sprache, so dass die Syntax nicht fundamental von Hochsprachen abweicht. Daher können Sites zu Programmiersprachen wertvolle Hilfestellung leisten, wenn man in der Spieleprogrammierung mal nicht so recht weiter weiß. Stellvertretend für viele seien genannt:

• www.gamesdev.net • www.aigamedev.com Während gamesdev recht breit aufgestellt ist und alle möglichen Themen abdeckt (besonders interessant: Math/Physics, AI, Isometric and Tile Based Games), konzentriert sich aigamedev vornehmlich auf die Programmierung von KI. Auf beiden Sites erhält man relativ ausführliche Artikel und Tutorials sowie Links zu weiteren lesenswerten Sites. Auch zum Lernen unabhängig von einem konkreten Spieleprojekt eignen sich die Sites gut, da sie aufgrund der Anforderungen, die beim Portieren auftreten, zu einer intensiveren Auseinandersetzung mit dem Skripting zwingen. Foren und Blogs Bleiben dennoch Fragen offen, wie denn das eine oder andere Problem zu lösen sei, offenbaren Foren das zugrunde liegende Geheimnis:

• www.flashforum.de • www.flashhilfe.de

547

• www.flashbattle.de Auf insgesamt recht hohem Niveau darf man sich hier an manchen Spezialisten wenden, der einem vernünftig antwortet, solange die Frage angemessen formuliert wurde. Neben den unvermeidlichen Kommunikationsmöglichkeiten bieten die Foren auch Downloads mit interessanten Codeschnipseln, die sich gut zum Lernen eignen. Unverzichtbar für Entwickler. An dieser Stelle sei ein böses Wort erlaubt: Es ist erstaunlich, wie viele Fragesteller sich erfolgreich bemühen, den Eindruck zu erwecken, sie seien nicht in der Lage, einen einzigen Satz in verständlichem Deutsch zu formulieren (selbst Sätze, die weniger verschachtelt sind als dieser, stellen offenbar eine unüberwindbare Hürde dar). Ein „Richtig fragen für Dummies“ würde sich garantiert zum Bestseller entwickeln. Stärker an Einsteiger wendet sich:

• www.psd-tutorials.de Trotz des Namens handelt es sich hier um ein ausgesprochen schnell wachsendes, großes Portal rund um Multimedia-Entwicklung, das auch über eine relativ große Sektion re Flash verfügt. Zu der gehört nicht nur ein Forum, sondern insbesondere auch eine große Tutorial-Sektion, die über 30 Tutorials alleine zu Skripting umfasst, eine Download-Sektion und einen Bereich mit ausführlichen, angemessen kritischen Buchbesprechungen. Hier ist man bestens aufgehoben, wenn man an einer einzigen Stelle zu allen möglichen Themen informiert werden möchte. Zu den vielen in englischer Sprache vorhandenen Foren, die auf Ihren Besuch warten, gehören:

• www.flashkit.com Mit einigen 100.000 Threads ein Gigant und zugleich weltweit eines der ersten Flashforen präsentiert flashkit neben den Standardthemen auch Spezielleres wie beispielsweise Games, Application Design and Architecture sowie Math and Physics. Eigentlich ist flashkit ein überwältigend großes (und dementsprechend unübersichtliches) Portal, aber die tonnenweisen Tutorials und fla-Dateien beziehen sich leider nahezu ausschließlich auf alte Flash-Versionen. Mengenmäßig und erst recht qualitativ steht dem in nichts nach:

• www.ultrashock.com/forums

548

Und natürlich:

• www.kirupa.com Auch kirupa bietet neben den überall anzutreffenden spezielle Themen an, wobei u. a. die interessante Games-Section mit mehreren Tausend Threads hervorsticht. Daneben finden sich auf der Site zahlreiche gute und aktuelle Tutorials zu Flash sowie zu anderen Skript- und Programmiersprachen. Übrigens: Recht spaßig und den Horizont erweiternd sind auf den diversen Foren Contests und Battles, bei denen man beispielsweise mit nur 25 oder 50 Zeilen Code eine Animation oder Interaktion programmieren muss. Sollte einmal der Fall eintreten, dass eine Frage unbeantwortet bleibt, greife man zur Ultima Ratio:

• chattyfig.figleaf.com/mailman/listinfo/flashcoders Diese extrem umfassende Liste mit Postings ist der Platz, an dem man nach Erfahrungen des Autors am zuverlässigsten auf ausgefallene, komplexe Problemstellungen angemessene Lösungsvorschläge erhalten kann. Das Niveau ist durchweg höher als in den genannten Foren – für Flash-Entwickler unverzichtbar. Mehr auf eine Person zugeschnitten sind die zahlreichen Blogs diverser Flash-Entwickler. Die geradezu unglaubliche Fülle – aber Sie haben diesen Satz schon so oft gehört, dass wir hier einfach nur eine einzige Site nennen wollen:

• blog.andre-michelle.com Ein deutscher Flash-Guru und Spielentwickler gibt lohnenswerten Einblick in sein Flash-Leben. Michelle hat vor Jahren ein professionelles Klassen-Paket für Spielentwicklung in AS 2.0 aus der Taufe gehoben und ist Initiator einer Kampagne, die für den Ausbau der Soundbearbeitungsfähigkeiten von Flash plädiert (und in CS4 mit entsprechenden Features belohnt wurde). Eine extrem lange Linkliste auf seiner Site verzeichnet weitere Blogs, auf denen man gelegentlich vorbeischauen sollte. Source Code querbeet Ein Kessel Buntes präsentiert seit Jahren:

• proto.layer51.com Obwohl schon recht betagt sollte man diese Site von Zeit zu Zeit besuchen, bietet sie doch in Form sogenannter Prototypen aus der Flash MX- und Flash MX 2004-Welt mitunter überraschend schöne Lösungen

Kapitel 33  Ressourcen

für Probleme aller Art, seien sie nun halbwegs alltäglicher Natur oder in höchstem Maße exotisch. Vor allem für denjenigen, der seine Programmier-Fertigkeiten schleifen und polieren möchte, lohnt sich das Herumspielen mit den gebotenen Codeschnipseln (denken Sie daran: Nur Übung macht den Meister). Weniger anspruchsvoll und weniger experimentell, aber für das tägliche Leben eines Flashers genau so nützlich ist:

• www.flashstar.de Unter der missverständlichen Rubrik Tutorials versteckt sich eine angenehm große Sammlung an sofort einsetzbaren Skriptlösungen für diverse Probleme und Problemchen, und auch zum Lernen eignet sich diese Schatzkiste allemal gut. Der Betreiber der Site ist Matthias Kannengießer, der sich schon vor Jahren als Autor guter, anspruchsvoller Flash-Bücher einen Namen gemacht hat. Und natürlich halten die bereits genannten Foren i. d. R. ebenfalls fla-Dateien zum Download bereit. Schier ungehemmte Programmierfreude offenbart sich in den zahlreichen Labs, in denen etablierte FlashMeister und begabte Adepten ihr Können unmittelbar unter Beweis stellen, oft genug mit Source-Code, den anzuschauen sich immer lohnt:

• www.bit-101.com/flafiles Keith Peters öffnet sein Schatzkästlein, nein, seine Schatzkammer, schließlich fallen einem hier Hunderte an fla-Dateien verschiedenster Versionen entgegen, die mitunter Banales und Merkwürdiges, viel öfter Geniales und Interessantes offenbaren. Probleme, an denen man ansonsten Stunden mühsam herumkratzt, lösen sich in sauber geskriptetes Wohlgefallen auf, wenn man hier fündig wird, was sicher öfters der Fall sein wird. Auf qualitativ gleich hohem Niveau, aber optisch durchaus attraktiver, zeigt sich:

• incomplet.gskinner.com/index2.html Skinner hat u. a. in seinem beeindruckenden Vine-G Experiment, einem Pflanzengenerator, und einer Adaption von Kai Krauses Goo die Grenzen von Flash ausgereizt. Auf seiner Site können zahlreiche weitere Beispiele oft mit zugehörigem Code heruntergeladen und studiert werden. Und auch Michelle beweist professionelle Experimentierfreude auf:

• lab.andre-michelle.com

33.3  Webseiten

Beispielsites Wer nach Beispielen für gelungene (und mitunter weniger gelungene) Flash-Sites sucht, der kann aus einem großen Angebot wählen unter:

• www.thefwa.com Eines der größten Portale dieser Art listet optisch ansprechend gestaltet Hunderte an Flash-Sites auf, die sich nach Schlüsselbegriffen filtern lassen. Jede Site wird mit einem Screenshot und einer Kurzbeschreibung vorgestellt und ein Link führt direkt zum Objekt der Begierde. Wer wissen will, was wie wo mit Flash gemacht wurde und wird, kann hier seine Reise beginnen. Zu guter Letzt Keine Linkliste zu Flash wäre vollständig, würde ausgerechnet der Hersteller dieses trotz mancher Unzulänglichkeit (nobody is perfect) schlicht genialen Produkts namens Flash fehlen:

• www.adobe.com Wie einst Macromedia lässt es sich Adobe nicht nehmen, den hoffnungsfrohen Flasher mit einem Rundum-Sorglos-Paket zu versehen, das so umfangreich ist, dass wir uns nur einige Einzelteile anschauen können. Wer wissen will, was man mit Flash so alles macht, riskiere einen Blick auf:

549

Das Portal im Portal öffnet den Zugang zu allerhand Arbeitsbeispielen und Tutorials, verfasst von professionellen und bekannten Entwicklern, zu denen u. a. der erwähnte Grant Skinner zählt. Diverse Kategorien erlauben Zugriff auf spezielle Themen, von denen  – selbstredend  – Actionscript das interessanteste ist. Von dort aus kann man gerne einen Blog öffnen, der alle Flash-relevanten News rund um die Welt sammelt und nach Suchbegriffen wie Actionscript, Flash Mobile oder Flex gefiltert ausspuckt. Kommunikativere Naturen kommen voll auf ihre Kosten, wenn sie auf das große Flash-Forum von Adobe zusteuern:

• www.adobe.com/cfusion/webforums/forum/index. cfm?forumid=15

Wer sich noch an die Einführung von Flash MX erinnert, weiß, mit welcher Euphorie damals Flash als Tool zur Entwicklung von RIAs gefeiert wurde. Die Erwartungen überstiegen zunächst bei weitem die Leistungsfähigkeit des Programms, doch diese Zeiten sind zum Glück überwunden. Und so kann Adobe beispielsweise unter:

• kuler.adobe.com eine Applikation zeigen, die Farbschemata produziert. User tauschen ihre Kreationen aus und es macht einfach Spaß, damit herum zuspielen. Das Tool lässt sich übrigens auch direkt aus Flash heraus öffnen. Zum Schluss erlauben wir uns noch einen Blick in die digitale Glaskugel:

• www.adobe.com/cfusion/showcase/index.cfm, • labs.adobe.com Link Flash Rund 230 Projekte, unterteilt in diverse Kategorien, können mit einer Beschreibung (u. a. Anforderungen, Lösung) aufgerufen werden. Dabei steht nicht unbedingt die Genialität, sondern vielmehr der Nutzen im Vordergrund, ein Aspekt, den manche Flasher allzu schnell vergessen. Davon angespornt klickt man sich weiter zu:

• www.adobe.com/devnet/flash

Adobe öffnet einen Spalt weit die Tür zu seinem Labor, um zu zeigen, an welchen Produkten man bastelt. Dazu gehört momentan etwa der neue Flash-Player und insbesondere das Pixel Bender Toolkit zum Entwerfen eigener Filter, die dann in Flash eingesetzt werden können.

Sachverzeichnis

_alpha  125 _currentframe  130 _height  119 _level0  153 _root  153 _rotation  125 _totalframes  130 _visible  125 _width  119 _x  119 _xmouse  119 _xscale  123 _y  119 _ymouse  119 _yscale  123 A Akkordeon-Menü  480 Algorithmus  12, 16 Animation  317 Animationskategorien  317 Ankathete  346 Anweisung  23 Arithmetische Operatoren  42 Array  69 as  34 AS 3.0  7, 8 ASCII-Zeichensatz  176 attachAudio  140 attachBitmap  140 attachMovie  140 Attribute  281 Ausführbarkeit  12 Auto-Format  304 AVM1  7 AVM2  7

B Bandbreiten-Profiler  260 Bedingung  23 Bedingungen  95 beginBitmapFill  155 beginFill  155 beginGradienFill  155 Beschleunigungsklassen  292 Bevel-Filter  236 Bezeichner  30 Bildergalerie  493 Bildskript  35 Bitmap  221 BitmapData  221 Bit-Operatoren  50 blendMode  128 Blur-Filter  237 Boolean  64 Bottom-Up  11 Bouncing off  342 break  101, 108 C cacheAsBitmap  151 Check Boxes  437 clear  155 clone  229 Codehinweis  55 Color  207 ColorMatrix-Filter  240 ColorTransform  207 Combo-Box  442 continue  108 Convolution-Filter  241 copyPixels  229 Cosinus  346 551

552

createEmptyMovieClip  139 createTextField  140 CSS  190 Cursor  213 curveTo  155 D Datentypen  63 Debugger  312 Debugging  303 Dekrement  43 Determinismus  12 DisplacementMap-Filter  242 Dispose  225 Document Type Definition  281 do while  109 Drag and Drop  147, 449 draw  229 Drehung  358 Drop Down-Menü  486 DropShadow-Filter  238 DTD  281 E ECMA  5 Editor  30 Eigenschaften  29 Eingabetext  193 Einheitskreis  347 Ellipse  349 Elliptisches Menü  473 else if  100 E-Mail  195 endFill  155 Endlichkeit  12 Endlosschleife  337 Endlosschleifen  111 Entfernungsmessung  347 Ereignis  33 ereignisorientiert  28 Ereignisse  29, 130 F Farbkanäle  209 Fehlerkontrolle  304 Fenster-System  454 FillRect  226 Filter  221, 235 fla  34 floodFill  226

Sachverzeichnis

Flowchart  13 Font einbetten  365 for in  110 for-Schleife  104 Framework  35, 37 Funktion  85 G Gegenkathete  346 getBounds  151 getBytesLoaded  263 GetPixel  227 getPixel32  227 getRect  151 Glow-Filter  238 GradientBevel-Filter  239 GradientGlow-Filter  239 Grafikeffekte  391 H hitTest  149 HTML  188, 281 HTML5  7 Hypotenuse  346 I if-Anweisung  95 if else  99 Inkrement  43 Instanziierung  30 Instanzname  141 Interface  437, 463 K Key  218 Klassen  29, 207 Klassenpakete  207 Knoten  282, 287 Kollision  148 Komponente  192 Konstanten  62 Kontrollstrukturen  95 Koordinatensystem  119, 346 Koordinatenursprung  120 Kreis  165, 349 Kreismenü  464 L Ladebalken  267 Ladekontrolle  260, 263 Laufzeitfehler  303

Sachverzeichnis

lineGradientStyle  155 lineStyle  140, 155 lineTo  155 Listener  215, 218 LoadBitmap  229 loadMovie  140, 251, 252, 270 Logische Fehler  303 Logische Operatoren  48 M Maske  150, 402, 406 Math  199 Mathematisch Runden  200 Maus  213 Mauseffekte  415 Mausereignisse  215 Maus-Ereignisse  135 Mausverfolger  416 Memory  521 Menü  463 Methoden  30 Mosaik-Effekt  410 moveTo  155 MovieClip  68, 113 MovieClipLoader  251, 275 N Nachrichtenfenster  308 noise  232 Null  67 Number  64 O Object  68 Objekte dynamisch einfügen  138 objektorientiert  29 onEnterFrame  131, 319 Operanden  41 Operatoren  41 Oval  167 P Pairs  521 Parameter  23, 62, 89 perlinNoise  232 Polygon  168 Preloader  260, 263, 275 Programmentwicklung  11 Programmiersprachen  11 Programmierung  27 Pseudo-Code  15

553

Puzzle  528 R Radio Buttons  440 Registrierungspunkt  120 Rekursion  93 return  91 Rückgabewert  91 S Schaltflächenereignisse  132 Schleife  23, 337 Schleifen  103 Schreibmaschineneffekt  385 Screen wrap  343 setInterval  325 setMask  150 setPixel  227 setPixel32  227 Sinus  346 Sinustäuschung  357 Skriptarten  35 Sound  245 Spiegelung  124 Spiele  521 Spirale  351 Stern  170 String  67, 173 Stringoperatoren  44 swf  34 switch  101 Syntax-Fehler  303 T Tags  281 Tangens  346 Tastatur  213, 218 Terminierung  12 Text  180 Texteffekte  365 Text einfärben  372 Textfelder  180 Textfield  173 Textformat  173 TextFormat  184 Text mit Farbverlauf  378 Text Zufallsbuchstaben  386 Thumbnail  493 Tiefe  141 Top-Down  11

554

TransitionManager  291, 298 Trigonometrie  345 Tween  291 U Übergangstypen  300 UIScrollBar  193 undefined  67 V Variable  23, 312 Variablen  55 Vektor  221 Vergleichsoperatoren  46 Verknüpfungsname  141 Void  68 Vorzeichenumkehr  322

Sachverzeichnis

W Website  276 Werte  281 while  108 X XML  251, 281 Z Zählvariablen  62 Zeichnungsmethoden  155 Zeitleistensteuerung  136 Zufallszahlen  201 Zuweisungsoperator  42