flash 5 in 21 tagen 3-8272-5958-5 [PDF]

Zitiervorschau

Philli llip Kerman

Flash 5 Schritt für Schritt zum Flash-Profi Animationen und Sound einbinden ActionScript lernen

Bitte beachten Sie: Der originalen Printversion liegt eine CD-ROM bei. In der vorliegenden elektronischen Version ist die Lieferung einer CD-ROM nicht enthalten. Alle Hinweise und alle Verweise auf die CD-ROM sind ungültig.

Markt + Technik Verlag

Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich.

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Autorisierte Übersetzung der amerikanischen Originalausgabe: Teach Yourself Flash 5 in 24 Hours © 2000 by SAMS Publishing Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Software-Bezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.

10 9 8 7 6 5 4 3 2 1 05 04 03 02 01

ISBN 3-8272-5958-5 © 2001 by Markt + Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH. Martin-Kollar-Straße 10–12, D–81829 München/Germany Alle Rechte vorbehalten Übersetzung: Ingo Dellwig, Werne / Ingo Lackerbauer, München Fachlektorat: Elmar Dellwig, Werne Lektorat: Melanie Kasberger, [email protected] Herstellung: Claudia Bäurle, [email protected] Einbandgestaltung: Grafikdesign Heinz H. Rauner, Gmund Satz: reemers publishing services gmbh, Krefeld, (www.reemers.de) Druck und Verarbeitung: Bercker, Kevelaer Printed in Germany

Inhaltsverzeichnis Über den Autor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Vorwort. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Woche 1 – Vorschau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Tag 1

Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 1.1

1.2

1.3

1.4 1.5

1.6 1.7

Ein Überblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Die Bühne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Symbolleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Die Zeitleiste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Fenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Bedienfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Bedienfelder in Gruppen organisieren. . . . . . . . . . . . . . . . . . . 38 Die Bibliothek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Die aktuelle Ebene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Das aktuelle Bild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Die aktuelle Szene bzw. das aktuelle Symbol . . . . . . . . . . . . . 42 In der Benutzeroberfläche navigieren . . . . . . . . . . . . . . . . . . . 43 Filmeigenschaften. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Dateitypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Quell-Dateien (.fla-Dateien). . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Exportierte .swf-Dateien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 HTML-Dateien, die .swf-Dateien beherbergen . . . . . . . . . . . . 48 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

5

Inhaltsverzeichnis

Tag 2

Malen und Zeichnen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 2.1 Auf der Bühne malen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 2.2 Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Ansicht-Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Erschaffende Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Linien zeichnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Füllungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Mit Linien und Füllungen Figuren zeichnen und verändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Texte erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 2.3 Objekte auswählen und bearbeiten . . . . . . . . . . . . . . . . . . . . . 71 Auswahl-Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Die Pipette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Den Vergrößerungsgrad und die Rotation verändern . . . . . . . 77 Figuren glätten und begradigen . . . . . . . . . . . . . . . . . . . . . . . . 79 Objekte über das Andocken verbinden . . . . . . . . . . . . . . . . . . 80 2.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 2.5 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Tag 3

Grafiken in Flash importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 3.1 Vektor- und Rastergrafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 3.2 Gute Gründe, warum man den Grafikimport vermeiden sollte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 3.3 Vektorgrafiken importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Aus einer Datei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Aus anderen Programmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 So stellen Sie die Bild-Integrität sicher. . . . . . . . . . . . . . . . . . . 96 Das Zusammenspiel zwischen Flash und anderen Vektorprogrammen. . . . . . . . . . . . . . . . . . . . . . . . . . . 97 3.4 Bitmaps verwenden (auch bekannt als Rastergrafiken) . . . . . . 98 Rastergrafiken importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Bitmap-Einstellungen verändern . . . . . . . . . . . . . . . . . . . . . . 101 Rastergrafiken in Vektorgrafiken konvertieren . . . . . . . . . . . . 105 Bitmap-Sequenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 3.5 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 3.6 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

6

Inhaltsverzeichnis

Tag 4

Fortgeschrittene Zeichentechniken. . . . . . . . . . . . . . . . . . . . . . . . 113 4.1 Benutzerdefinierte Farben und Farbverläufe . . . . . . . . . . . . . 114 Farbtöne und Farbverlaufsfelder erstellen . . . . . . . . . . . . . . . 114 Farbverläufe verwenden und bearbeiten . . . . . . . . . . . . . . . . 120 Mit einer Rastergrafik füllen . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Texteffekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 4.2 Objekte isolieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Wenn Sie es sehen können, können Sie es auswählen . . . . . 125 Die Leinwand-Ebene verwenden . . . . . . . . . . . . . . . . . . . . . . 125 4.3 Objekte gruppieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Effekte von Gruppierungen . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Gruppen bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 4.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 4.5 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Tag 5

Die Bibliothek produktiv einsetzen . . . . . . . . . . . . . . . . . . . . . . . 135 5.1

5.2

5.3

5.4 5.5

Das Konzept der Bibliothek . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Wie man Symbole erstellt und verwendet . . . . . . . . . . . . . . . 137 Wie Ihnen Symbole helfen können . . . . . . . . . . . . . . . . . . . . 142 Die Bibliothek verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Den Überblick behalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Die Bibliothek mit Namen, Sortierung und Ordnern verwalten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Symbole aus der Bibliothek verwenden . . . . . . . . . . . . . . . . . 147 Instanzen von Symbolen auf der Bühne platzieren . . . . . . . . 147 Instanzen von Symbolen bearbeiten. . . . . . . . . . . . . . . . . . . . 147 Effekte von Instanzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Instanzen von Symbolen in Symbolen verwenden . . . . . . . . 153 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

7

Inhaltsverzeichnis

Tag 6

Animationen verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 6.1 Wie Animationen arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 6.2 Die Komponenten einer Animation . . . . . . . . . . . . . . . . . . . . 160 Bilder und Bildrate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Die Bildrate gegenüber der Anzahl der Bilder. . . . . . . . . . . . 163 Die Bildrate verschiedener Animationstypen. . . . . . . . . . . . . 164 Schlüsselbilder und leere Schlüsselbilder . . . . . . . . . . . . . . . 164 Tweening. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 6.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 6.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Tag 7

Animationen auf die altmodische Weise. . . . . . . . . . . . . . . . . . . . 171 7.1 Die »Rohe-Gewalt«-Technik verstehen . . . . . . . . . . . . . . . . . 172 Eine Animation als Test-Film betrachten . . . . . . . . . . . . . . . 174 Ein Schlüsselbild zur gleichen Zeit bearbeiten . . . . . . . . . . . 175 Die Bilddarstellung ändern. . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Die Zwiebelschalen-Werkzeuge verwenden . . . . . . . . . . . . . 176 7.2 Die Bild-für-Bild-Animation erweitern . . . . . . . . . . . . . . . . . . 180 Pausen integrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Bewegung vorgaukeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Der Flimmer-Effekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 7.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 7.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Zusatz-Aufgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Woche 2 – Vorschau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Tag 8

8

Animationen mit Bewegungstweening . . . . . . . . . . . . . . . . . . . . . 189 8.1 Einen Bewegungstween erstellen . . . . . . . . . . . . . . . . . . . . . . 190 Die Regeln eines Bewegungstweens befolgen . . . . . . . . . . . . 192 Techniken und Tipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 8.2 Feintuning eines Bewegungstweens . . . . . . . . . . . . . . . . . . . . 197 Mehrere Schlüsselbilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Abbremsen und beschleunigen . . . . . . . . . . . . . . . . . . . . . . . 198 In einem Bewegungstween rotieren . . . . . . . . . . . . . . . . . . . . 200 8.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Inhaltsverzeichnis

8.4

Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Tag 9

Morphing mit Formtweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 9.1 Einen Formtween erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . 206 So beachten Sie die Regeln eines Formtweens . . . . . . . . . . . 207 Techniken und Tipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 9.2 Feintuning eines Formtweens . . . . . . . . . . . . . . . . . . . . . . . . . 211 Formmarken verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Formmarken verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Gute Gründe, warum man Formtweens vermeiden sollte . . 215 9.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 9.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Übung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Tag 10

Sound in Animationen einbinden . . . . . . . . . . . . . . . . . . . . . . . . 219 10.1 Sounds importieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Unterstützte Formate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Sounds aus einer anderen Bibliothek importieren. . . . . . . . . 223 10.2 Sound verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Sync-Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Effekt-Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Wdh-Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 10.3 Qualität und Dateigröße kontrollieren . . . . . . . . . . . . . . . . . . 232 Digital-Audio-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Einstellungen beim Exportieren. . . . . . . . . . . . . . . . . . . . . . . 233 Tricks für mehr Effizienz . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 10.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 10.5 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

9

Inhaltsverzeichnis

Tag 11

Ebenen in Animationen verwenden . . . . . . . . . . . . . . . . . . . . . . . 239 11.1 Wie Ebenen funktionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Der wahre Zweck von Ebenen . . . . . . . . . . . . . . . . . . . . . . . . 240 Ebenen-Einstellungen, die Ihnen beim Editieren helfen . . . 243 11.2 Ebenen-Eigenschaften für visuelle Effekte . . . . . . . . . . . . . . 246 Führungs-Ebenen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Pfade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Maskieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 11.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 11.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Tag 12

Animationen mit Filmsequenzen und Grafik-Symbolen . . . . . . . 259 12.1

12.2

12.3 12.4

Tag 13

10

Das Verhalten von Filmsequenzen . . . . . . . . . . . . . . . . . . . . . 260 Eine Filmsequenz erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Vergleich zwischen Filmsequenz-Symbolen und Grafik-Symbolen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Wann man Filmsequenzen verwenden sollte . . . . . . . . . . . . 264 Die Feinheiten von Filmsequenzen . . . . . . . . . . . . . . . . . . . . 265 Adressierbare Filmsequenz-Instanzen . . . . . . . . . . . . . . . . . . 265 Einsparungen in der Dateigröße . . . . . . . . . . . . . . . . . . . . . . 266 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Schaltflächen erstellen, auf die ein Anwender klicken kann . . . . 271 13.1 Eine Schaltfläche erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Den Aktiv-Zustand der Schaltfläche definieren . . . . . . . . . . . 275 Eine Schaltfläche bezüglich der Dateigröße minimieren . . . 276 Instanzen von Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . 277 13.2 Erweiterte Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Animierte Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Schaltflächen-Behandlungsoptionen . . . . . . . . . . . . . . . . . . . 280 Schaltflächen mit Sound versehen . . . . . . . . . . . . . . . . . . . . . 281 Unsichtbare Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 13.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Inhaltsverzeichnis

13.4

Tag 14

Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Aktionen verwenden, um nichtlineare Filme zu erzeugen. . . . . . 287 14.1 Aktionen verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Aktionen durch Parameter spezifizieren . . . . . . . . . . . . . . . . 291 Bild-Aktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Schaltflächen-Aktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Filmsequenz-Aktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Aktionen bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 14.2 Aktionstypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Effizienz-Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 14.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 14.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Woche 3 – Vorschau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Tag 15

ActionScripting-Anwendungen für erweiterte Interaktivität . . . . 315 15.1 Drag&Drop-Interaktionen erzeugen . . . . . . . . . . . . . . . . . . . 316 Die grundlegende Methode . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Die Grundlagen verschiebbarer Sequenzen . . . . . . . . . . . . . 320 15.2 In Flash programmieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 15.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 15.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Tag 16

Smart-Filmsequenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 16.1 Was ist eine Smart-Filmsequenz? . . . . . . . . . . . . . . . . . . . . . . 334 Smart-Filmsequenzen erstellen . . . . . . . . . . . . . . . . . . . . . . . 337 Eine .swf-Datei für Sequenzparameter verwenden . . . . . . . . 343 16.2 »Radio Buttons« verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . 345 16.3 Erweiterte Smart-Filmsequenzen erzeugen . . . . . . . . . . . . . . 348 16.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

11

Inhaltsverzeichnis

16.5

Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Tag 17

Filme mit dem Internet verknüpfen . . . . . . . . . . . . . . . . . . . . . . . 351 17.1 Standard-Veröffentlichung . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 17.2 Ein einfacher Hyperlink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 17.3 Welche Internetaufgaben kann Flash noch erfüllen? . . . . . . 358 Fenster anvisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 E-Mails senden (mit dem mailto:-Befehl) . . . . . . . . . . . . . . . 359 17.4 Hochladen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 17.5 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 17.6 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Tag 18

Modulare Internetseiten entwerfen. . . . . . . . . . . . . . . . . . . . . . . . 361 18.1 Die Aktion Load Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 18.2 Wie man feststellt, wann ein Flash-Film komplett geladen wurde, und wie man ihn wieder entlädt. . . . . . . . . . . . . . . . . 365 18.3 Geteilte Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Wie man geteilte Bibliotheken verwendet . . . . . . . . . . . . . . . 368 18.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 18.5 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Tag 19

Eine gute Benutzeroberfläche erstellen . . . . . . . . . . . . . . . . . . . . 375 19.1 19.2

19.3 19.4 19.5

12

Gutes Design der Benutzeroberfläche . . . . . . . . . . . . . . . . . . 376 Elemente, die eine gute Benutzeroberfläche ausmachen . . . 377 Zügeln Sie sich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Profitieren Sie von Design-Standards . . . . . . . . . . . . . . . . . . . 387 Stellen Sie Übereinstimmung nicht über alles . . . . . . . . . . . 387 Überprüfen der Funktionalität . . . . . . . . . . . . . . . . . . . . . . . . 388 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

Inhaltsverzeichnis

Tag 20

Optimierung Ihrer Flash-Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 20.1 Überlegungen zur Dateigröße . . . . . . . . . . . . . . . . . . . . . . . . 392 Kalkulieren von Ladezeiten . . . . . . . . . . . . . . . . . . . . . . . . . . 393 Was ist groß? Was ist klein?. . . . . . . . . . . . . . . . . . . . . . . . . . . 393 Sound- und Bitmap-Dateien. . . . . . . . . . . . . . . . . . . . . . . . . . 398 Benutzen des Bandbreiten-Profilers . . . . . . . . . . . . . . . . . . . . 402 20.2 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Unerwünschte Spezialeffekte . . . . . . . . . . . . . . . . . . . . . . . . . 412 Streaming von Sound-Dateien . . . . . . . . . . . . . . . . . . . . . . . . 413 Grafiken. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 20.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 20.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Tag 21

Animationstechniken für Fortgeschrittene . . . . . . . . . . . . . . . . . . 419 21.1 Es zählt nur das Resultat, nicht die Technologie . . . . . . . . . . 420 Einfache Techniken – sparsam angewandt . . . . . . . . . . . . . . 421 Wege, den Anwender zu täuschen . . . . . . . . . . . . . . . . . . . . . 422 21.2 Das Anwenden herkömmlicher Techniken . . . . . . . . . . . . . . 423 Aufmerksamkeit und Spannungsaufbau (Antizipation) . . . . . 423 Overkill – das Ende einer Animation . . . . . . . . . . . . . . . . . . . 426 Die Simulation von Tiefe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Kontrolle der perspektivischen Ansichten . . . . . . . . . . . . . . . 433 Behalten Sie immer das Ende im Auge . . . . . . . . . . . . . . . . . 434 21.3 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 21.4 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Anhang A

Die Arbeit an großen Projekten und in Teamumgebungen. . . . . 437 A.1 Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Definieren einer Rolle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Das Testen der Rollen und Strukturen. . . . . . . . . . . . . . . . . . 439 Das Trennen von Programmiercode und Daten . . . . . . . . . . 439 A.2 Angewandte Techniken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 Gemeinschaftliche Bibliotheken . . . . . . . . . . . . . . . . . . . . . . 442 Smart Clips (Smart-Filmsequenzen) . . . . . . . . . . . . . . . . . . . 444 Das Bewahren der Vollständigkeit bei umfangreichen Änderungen. . . . . . . . . . . . . . . . . . . . . . . . . . 448 Dokumentation und Namenskonventionen. . . . . . . . . . . . . . 450

13

Inhaltsverzeichnis

A.3 A.4

Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Übungsfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Anhang B

Vertiefen der erworbenen Flash-Kenntnisse . . . . . . . . . . . . . . . . . 455 B.1 Profitieren Sie von Beispiel-Dateien. . . . . . . . . . . . . . . . . . . . 456 Dateien, die in Flash enthalten sind. . . . . . . . . . . . . . . . . . . . 456 Online-Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Wie man aus einer abgeschlossenen Arbeit lernt. . . . . . . . . . 457 B.2 Der Beginn eines umfangreichen Projektes . . . . . . . . . . . . . . 461 Die Philosophie der kleinen Schritte . . . . . . . . . . . . . . . . . . . 461 Schützen Sie sich vor Fehlern . . . . . . . . . . . . . . . . . . . . . . . . 462 Üben Sie Selbstkritik. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 B.3 Man lernt niemals aus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Software wird immer weiterentwickelt . . . . . . . . . . . . . . . . . . 464 Auch die Praxis zählt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Einfache Beispiele und Aufgaben, die Sie immer wieder gebrauchen können. . . . . . . . . . . . . . . . . . . . . . . . . . . 465 B.4 Das Beheben von Fehlern (Debugging). . . . . . . . . . . . . . . . . 467 Traditionelle Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Das Benutzen des Debuggers . . . . . . . . . . . . . . . . . . . . . . . . . 469 B.5 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 B.6 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 B.7 Zusatzübung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Anhang C

Das Veröffentlichen Ihrer Flash-Anwendung . . . . . . . . . . . . . . . . 477 C.1 Wie publiziert man eine Seite?. . . . . . . . . . . . . . . . . . . . . . . . 478 C.2 Optionen für das Publizieren . . . . . . . . . . . . . . . . . . . . . . . . . 483 Die Frage nach dem Medientyp. . . . . . . . . . . . . . . . . . . . . . . 483 C.3 Der Export anderer Medientypen. . . . . . . . . . . . . . . . . . . . . . 493 C.4 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 C.5 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 F&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495

14

Inhaltsverzeichnis

Anhang D

Figuren mit Auswahl, Andocken und den Ebenen . . . . . . . . . . . . 497 D.1 Halbkreis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .498 D.2 Speichen in einem Rad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .501 D.3 Fünfeckiger Stern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .505 D.4 Ein räumlicher Würfel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511 D.5 Wellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .513 D.6 3D-Kugel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515 D.7 Das Farbrad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .517

Anhang E

Fortgeschrittenes ActionScripting . . . . . . . . . . . . . . . . . . . . . . . . . 521 E.1 Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522 E.2 Funktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Funktionen verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Eingebaute Funktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Hausgemachte Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . .523 E.3 Lernen Sie immer weiter. . . . . . . . . . . . . . . . . . . . . . . . . . . . .524

Anhang F

Netzressourcen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525 F.1 Einführungen und Online-Ressourcen. . . . . . . . . . . . . . . . . .526 F.2 Seiten über Inhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .527 Audio- und Soundseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . .527 Bilder und Fotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528 F.3 Schriftarten und Sonstiges. . . . . . . . . . . . . . . . . . . . . . . . . . . .528 F.4 Inspirierende Seiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .529 F.5 Statistiken. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .530

Anhang G

Glossar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531

Anhang H

Antworten zu den Übungsaufgaben . . . . . . . . . . . . . . . . . . . . . . . 537

Anhang I

Die CD-ROM zum Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

15

Über den Autor Phillip Kerman ist selbständiger Programmierer, Trainer und auf Macromedia-Produkte spezialisierter Autor. Er machte seinen akademischen Abschluss in Bild- und Fotografie-Technologie beim »Rochester Institute of Technology«, als »Multimedia« noch eine andere Bedeutung als heutzutage hatte. In einem Praktikum hatte Kerman die Aufgabe, mehrere Diaprojektoren synchron zur Musik zu programmieren. Das verstand man in den achtziger Jahren unter »Multimedia«. 1993 entdeckte er Macromedia Authorware als Instrument für die Verwirklichung seiner Interessen und Fähigkeiten. Nachdem er bei »The Human Element, Inc.« arbeitete, zog er zurück nach Portland in Oregon, um dort selbstständig zu arbeiten. Kerman hat seine Fachkenntnisse von Authorware über Director bis hin zu Flash weiterentwickelt. Über sieben Jahre hinweg hat er es an insgesamt 13 Versions-Updates angepasst, wobei Flash 5 das bedeutendste darstellt. Neben der Aktualisierung und Weiterentwicklung seiner Kenntnisse sieht Kerman das Lehren als größte Herausforderung an. Er bildete bereits an so exotischen Orten wie Reykjavik in Island, Melbourne in Australien, Amsterdam in Holland und McAlester in Oklahoma aus. Außerdem schrieb er bereits für »Macworld«, »Macromedia User Journal« und seinen selbstveröffentlichten »The Phillip Newsletter« (http://www.teleport.com/~phillip/newsletter). Neben der Lehrtätigkeit hat Kerman genug Gelegenheiten, um sich selbst die Hände mit Programmierung schmutzig zu machen. Erst vor kurzem erstellte er die reine Flash-Site http://www.m-three.com für die »Paris France Inc.«. Diese Seite wurde im Jahr 2000 sowohl in »Communication Arts Interactive Design Annual« als auch in »British Design & Art Direction Annual« gewürdigt. Sie erreichen Phillip Kerman unter [email protected].

17

Vorwort Macromedia übertreibt nicht mit der Behauptung, Flash sei »der professionelle Standard für die Produktion hoch beeindruckender Web-Erlebnisse«. Sie brauchen nur ein paar mit Flash aufgearbeitete Seiten zu besuchen, um zu erkennen, wie überzeugend es ist. Flash begeistert, lehrt, unterhält und vermittelt praktische Informationen, indem es Grafiken, Animationen, Sound und Interaktivität verwendet. Mehrere hundert Millionen Nutzer haben bereits den kostenlosen Flash-Player installiert, der benötigt wird, um Flash-Filme zu betrachten. Die Tatsache, dass Macromedia diese Software weiterhin so erfolgreich vertreibt, bedeutet, dass das Publikum für Flash-Inhalte sehr groß ist und immer noch wächst. Die Tools, die Sie benötigen, um Flash-Filme zu erstellen sind in Reichweite. Nachdem Sie Flash gekauft haben, ist die einzige Investition, die Sie tätigen müssen, Ihre Zeit zum Lernen. Sie können Flash sogar von http://www.macromedia.com/de/ downloaden und 30 Tage lang testen, ohne es zu bezahlen. Ich finde es aufregend, Leute dabei zu beobachten, wie Sie zuerst mit Flash herumspielen und später unterhaltsame Filme erstellen. Stellen Sie sich einen guten Musikanten vor, der ein Instrument in die Hand nimmt und es innerhalb von Tagen erlernt. Es ist wirklich verblüffend. Wenn Sie motiviert sind, werden Sie mit moderatem Zeitaufwand feststellen, was für ein mächtiges Medien-Tool Ihnen an die Hand gegeben wurde. Flash ist so einzigartig, dass man sagen kann: je weniger Erfahrung Sie haben, umso besser! Wenn Sie schon jetzt eine Vorstellung haben, was Flash sein könnte, und Sie haben bisher Zeicheneditoren verwendet, ist es wahrscheinlich die beste Idee, alles wieder zu vergessen und neu anzufangen. Dieses Buch ist so aufgebaut, dass Sie sehr schnell Erfolge sehen werden. Mit jeder Aufgabe beweisen Sie sich selbst, dass Sie Wissen und Fähigkeiten dazugewonnen haben. Eigentlich brauche ich gar keine Aufmunterungsrede zu halten, da Sie das alles selbst erfahren werden. Nach wenigen Lektionen werden Sie Zeichnungen erstellen, von denen Sie jetzt noch denken, dass Sie dafür nicht genug Talent haben. Einige Kapitel später werden Sie Animationen generieren, bis Sie schließlich nach der Lektüre dieses Buches unaufhaltbar sein werden. Davon bin ich fest überzeugt: Ich habe Hunderte von Schülern in Flash unterrichtet. Wie weit Sie Ihre Fähigkeiten ausbauen, ist Ihre Sache, aber Sie sich werden hier eine großartige Grundlage schaffen.

19

Vorwort Sie werden sich vielleicht nicht über Nacht wie ein Profi fühlen, aber Sie haben ein mächtiges Medien-Tool unter Ihrer Kontrolle. Wenn Sie nicht mehr warten können, anderen Ihre Kreationen zu zeigen, sind Sie auf dem richtigen Weg. Machen Sie sich bereit, Spaß zu haben.

20

Ta g 1

Grundlagen

23

Ta g 2

Malen und Zeichnen

51

Ta g 3

Grafiken in Flash importieren

87

Ta g 4

Fortgeschrittene Zeichentechniken

113

Ta g 5

Die Bibliothek produktiv einsetzen

135

Ta g 6

Animationen verstehen

159

Ta g 7

Animationen auf die altmodische Weise

171

Ta g 8

Animationen mit Bewegungstweening

189

Ta g 9 Morphing mit Formtweening Tag 10 Sound in Animationen einbinden

205

Tag 11 Ebenen in Animationen verwenden Tag 12 Animationen mit Filmsequenzen und Grafik-Symbolen

239 259

Tag 13 Schaltflächen erstellen, auf die ein Anwender klicken kann

271

Tag 14 Aktionen verwenden, um nichtlineare Filme zu erzeugen

287

Tag 15 ActionScripting-Anwendungen für erweiterte Interaktivität

315

Tag 16 Smart-Filmsequenzen Tag 17 Filme mit dem Internet verknüpfen

219

333 351

Tag 18 Modulare Internetseiten entwerfen Tag 19 Eine gute Benutzeroberfläche erstellen

361

Tag 20 Optimierung Ihrer Flash-Site Tag 21 Animationstechniken für Fortgeschrittene

391

WOCHE 1 – VORSCHAU

375

419

W O C H E

W O C H E

W O C H E

Grundlagen

1

Grundlagen

Die Flash-Umgebung sieht sehr einfach aus. Es ist leicht, mit dem Zeichnen anzufangen und kleine Animationen zu erstellen. Allerdings reagiert Flash in manchen Situationen nicht so, wie Sie es erwarten werden. Um sicherzugehen, dass Sie mit dem richtigen Fuß aufstehen, zahlt es sich aus, mit ein paar Grundlagen zu beginnen. Obwohl Flash in manchen Beziehungen mit anderen Softwaretypen vergleichbar ist, gibt es viele Unterschiede. Sowohl erfahrene Benutzer als auch Anfänger sollten die Grundlagen verstehen, die in diesem Kapitel vermittelt werden. In dieser Lektion werden Sie 쐽

sich mit der Arbeitsoberfläche von Flash vertraut machen,

쐽

Bedienfelder anordnen und lernen, wie man sie benutzt,

쐽

die Flash-Film-Eigenschaften erkunden (globale Einstellungen),

쐽

die Dateitypen kennen lernen, die in Zusammenhang mit Flash stehen. Bedienfelder sind eine Eigenart von Flash, die Ihnen die Möglichkeit gibt, die meisten Einstellungen zu betrachten und zu ändern, während Sie eine Datei bearbeiten. Mit dem Text-Bedienfeld können Sie beispielsweise die Schriftart und -größe eines beliebigen markierten Textes ändern.

1.1

Ein Überblick

Der Schlüssel zum Verständnis von Flash ist, immer zu wissen, »wo Sie sind«. Ihnen wird die Möglichkeit gegeben, alles zu bearbeiten: statische Grafiken, Animationen, Knöpfe und mehr. Sie sollten sich zu jeder Zeit bewusst sein, was Sie gerade bearbeiten. Es kann leicht passieren, dass Sie die Orientierung darüber verlieren, welches Element gerade verändert wird. Dieser Abschnitt wird Ihnen zeigen, wie Sie sich am besten orientieren.

Die Bühne Das große weiße Rechteck in der Mitte des Flash-Oberfläche wird Bühne genannt. Text, Grafiken, Fotos, einfach alles, was der Anwender sehen soll, wird auf der Bühne angezeigt (siehe Abbildung 1.1). Lassen Sie uns eine kleine Reise über die Flash-Arbeitsoberfläche machen: 쐽

24

Die Bühne ist Ihr sichtbarer Arbeitsbereich. Jede Grafik, die in diesem Bereich platziert wird, ist für den Anwender sichtbar.

Ein Überblick

Abbildung 1.1: Die Bühne ist die große weiße Fläche in der Mitte. Auf der Bühne werden alle sichtbaren Elemente Ihrer Animation angezeigt. 쐽

Der Werkzeugkasten enthält alle (und es gibt viele) Zeichengeräte von Flash. Diese werden im nächsten Kapitel näher beschrieben.

쐽

Die Zeitleiste enthält die Verkettung von Bildern, die eine Animation ausmachen. Die Zeitleiste kann auch aus mehreren Animationsebenen bestehen. Auf diese Weise können bestimmte Grafiken über oder unter anderen erscheinen und Sie können mehrere Animationen zur gleichen Zeit ablaufen lassen.

쐽

Bedienfelder stehen über allem anderen. Sie können anders angeordnet werden, wenn Sie es wünschen. Der Ausdruck Anwender bezeichnet die Person, die Ihren Film betrachtet oder Ihre Internetseite besucht. In diesem Buch werde ich mich sehr oft auf den Anwender beziehen. Manchmal werde ich den Anwender auch das Publikum nennen. Ich habe auch schon gehört, dass der Anwender Betrachter genannt wird. Es ist wirklich egal, welchen Ausdruck Sie verwenden. Wichtig ist nur der Unterschied zwischen Ihnen (dem Autor, Entwickler, Designer) und dem Anwender (oder Publikum, Betrachter oder wie auch immer Sie ihn bezeichnen wollen). Als Autor können Sie den Flash-Film bearbeiten, wohingegen der Anwender den Film nur betrachten und gegebenenfalls mit ihm interagieren kann.

Stellen Sie sich die Bühne als Leinwand vor, auf die ein Maler einen Rahmen malt, in dem ein Fotograf Bilder anbringt. Manchmal wollen Sie eine Grafik-Animation außerhalb der Bühne starten lassen, um sie dann auf die Bühne zu bewegen. »Außerhalb der Bühne«

25

Grundlagen

ist der graue Bereich, der die weiße Fläche umrandet. Sie können diesen Bereich nur sehen, wenn im Menü ANSICHT der Punkt ARBEITSBEREICH aktiviert ist. (Wenn Sie diesen Punkt anklicken, wechselt dessen Status zwischen aktiviert und deaktiviert.) Sie sollten die Standardeinstellung (ARBEITSPLATZ ist aktiviert) bevorzugen, da Sie nur so Grafiken außerhalb der Bühne platzieren können. Bitte bedenken Sie, dass die Einstellungen, die Sie im Menü ANSICHT vornehmen, nur das beeinflussen, was Sie sehen. Der Betrachter wird allerdings immer noch genau den gleichen Film sehen. Es gibt nicht allzu viel über die Bühne zu lernen. Es ist ganz einfach Ihr sichtbarer Arbeitsbereich. Allerdings gibt es zwei wichtige Konzepte, die einer näheren Betrachtung wert sind: die Bühnengröße und der Skalierungsfaktor. Standardmäßig ist die Bühne ein Rechteck mit einer Breite von 550 Bildpunkten und einer Höhe von 400 Bildpunkten. Später in diesem Kapitel werden Sie lernen, wie man die Breite und die Höhe eines Filmes verändert (in dem Unterkapitel »Film-Eigenschaften«). Die Angaben in Bildpunkten sind nicht so wichtig wie die damit erzielte Form der Bühne (Breiten-Höhen-Relation). Die Anzahl der Bildpunkte spielt keine Rolle, denn sobald Sie den Film veröffentlichen, können Sie einen Flash-Maßstab in einer beliebigen Pixelgröße angeben. Die Breiten-Höhen-Relation ist das Verhältnis zwischen Breite und Höhe. Jedes Quadrat oder Rechteck besitzt eine solche Breiten-Höhen-Relation. Zum Beispiel hat ein normaler Fernseher eine Breiten-Höhen-Relation von 4:3, wobei es egal ist, wie groß Ihr Fernseher ist. Er ist immer drei Einheiten hoch und vier Einheiten breit (OK, es gibt inzwischen neuere Geräte, die mit einem 16:9-Format arbeiten). Auch im Computerbereich wird fast immer das Verhältnis 4:3 verwendet, denn die gängigsten Bildschirmauflösungen sind 640x480, 800x600 und 1.024x768. Sie können natürlich eine beliebige Breiten-Höhen-Relation für Ihre Internetseite wählen; bedenken Sie nur, dass ungenutzter Platz auf dem Bildschirm frei bleibt. Ein Breitbild-Format (z.B. 16:9) wird einen ganz anderen Effekt erzielen als ein quadratisches 1:1-Format. Skalieren nennt man das Anpassen der Größe an individuelle Bedürfnisse. Ein Flash-Film behält seine Breiten-Höhen-Relation, wenn er skaliert wird. Er wird also nicht verzerrt. Sie können zum Beispiel festlegen, dass der Film zu 100% an die Größe des Browserfensters des Anwenders angepasst wird. Es ist genauso möglich, einen Film in der Größe 100x100 zu erstellen und auf 400x400 zu vergrößern. Sie können Ihren Flash-Film nicht nur in jeder beliebigen Größe bereitstellen (da Flash sehr gut skaliert), sondern auch beim Arbeiten mit Flash einen bestimmten Bereich der Bühne vergrößern, um einen bestimmten Effekt genauer unter die Lupe nehmen zu können als in der aktuellen Größe. Versuchen Sie sich einmal an der folgenden Aufgabe, in der ich einige wichtige Werkzeuge einführen werde, die für die Bühne von Bedeutung sind.

26

Ein Überblick

Aufgabe: Ändern Sie die Ansicht der Bühne 1. Öffnen Sie Flash. Sie werden ein leeres, ungespeichertes Dokument erhalten, das Film1 heißt. 2. Anstatt bei Null anzufangen, wollen wir eine existierende Datei öffnen. Wählen Sie HILFE / LEKTIONEN / 01 INTRO. Dadurch wird nun eine Datei geöffnet. (Normalerweise würden Sie dafür DATEI / ÖFFNEN verwenden, allerdings sind einige Einführungs-Dateien vorinstalliert, die man über das Menü HILFE ansprechen kann.) 3. Bitte beachten Sie die Anzeige der Vergrößerungsstufe am unteren Rand der Bühne (siehe Abbildung 1.2). Dieses Steuerelement ist eine Möglichkeit, um die aktuelle Ansicht zu verändern. Andere Möglichkeiten sind das Menü ANSICHT / VERGRÖSSERN und das Vergrößerungs-Werkzeug (der Knopf mit der Lupe in der Zeichnen-Werkzeugleiste), welches wir im nächsten Kapitel noch näher kennen lernen werden.

Abbildung 1.2: Mit dem Vergrößerungs-Steuerelement (untere Ecke links) können Sie die Bühne vergrößern oder verkleinern. Das hat allerdings keine Auswirkung auf das Erscheinungsbild für das Publikum.

4. Vergrößern Sie die Ansicht auf 400%. Sie sehen, wie alles größer erscheint. Allerdings haben Sie nichts verändert. Sie sehen nur eine vergrößerte Version des gleichen Filmes. 5. Wahrscheinlich können Sie nun nicht mehr die gesamte Bühne sehen (es sei denn, Sie haben einen riesigen Monitor). Allerdings können Sie die anderen Teile der Bühne auf zwei Arten betrachten: Einerseits können Sie die normalen Bildlaufleisten am rechten und unteren Fensterrand bewegen, andererseits können Sie aber auch das Hand-Werkzeug verwenden. Dieses können Sie am besten aufrufen, indem Sie (____) (Space)

27

Grundlagen

gedrückt halten. Versuchen Sie es einmal und klicken Sie (während Sie (____) gedrückt halten) auf die Bühne und bewegen dann die Maus. Sie bewegen sich nun zu anderen Teilen der Bühne, ohne irgendetwas zu verändern. Sie verändern mit dem Hand-Werkzeug also lediglich den für Sie sichtbaren Ausschnitt der Bühne. Das Schöne an dieser Aktion ist, dass Sie über die Kurztaste (____) das Werkzeug genauso lange verwenden können, bis Sie die Taste wieder loslassen. Wir werden im nächsten Kapitel weitere Werkzeuge kennen lernen, die man auf die gleiche Weise ansprechen kann. 6. Stellen Sie das Vergrößerungs-Steuerelement nun auf ALLES ANZEIGEN ein. Flash wird nun die Bühne so verkleinern, dass Sie wieder alles im Blick haben, egal welche Bildschirmauflösung Sie verwenden. Nun öffnen wir eine weitere Datei, um diese Aufgabe abzuschließen. Wählen Sie also HILFE / BEISPIELE / SCHLÜSSELBILD ERSTELLEN. 7. Zwei weitere interessante Werkzeuge stehen im ANSICHT-Menü zur Verfügung: Das Gitternetz und die Hilfslinien. Wählen Sie ANSICHT / GITTERNETZ / GITTERNETZ ANZEIGEN. Es erscheint nun das Gitternetz hinter allen Grafiken, die sich auf der Bühne befinden (siehe Abbildung 1.3). Diese Linien kann der Betrachter später natürlich nicht sehen. Im nächsten Kapitel werden Sie lernen, wie Ihnen das Gitternetz bei der perfekten Ausrichtung von Grafiken behilflich sein kann. Unter ANSICHT / GITTERNETZ / GITTERNETZ BEARBEITEN können Sie die Farbe und die Abstände der Linien verändern. Schalten Sie nun das Netz wieder aus, indem Sie ANSICHT / GITTERNETZ / GITTERNETZ ANZEIGEN wählen und diese Option wieder deaktivieren.

Abbildung 1.3: Wenn Sie das Gitternetz einschalten, können Sie Objekte besser ausrichten.

28

Ein Überblick

8. Hilfslinien sind mit dem Gitternetz vergleichbar, allerdings muss man sie an der richtigen Stelle ziehen. Zuerst aktivieren Sie ANSICHT / LINEALE. Nun können Sie auf eines der beiden Lineale klicken und eine Hilfslinie auf die Bühne ziehen (siehe Abbildung 1.4). Über das linke Lineal erzeugen Sie vertikale Hilfslinien und mit dem oberen Lineal lassen sich horizontale Linien generieren. Wenn Sie eine Hilfslinie löschen wollen, ziehen Sie diese einfach wieder auf das Lineal zurück. Wie zuvor bei den Gitternetzlinien finden Sie unter ANSICHT / HILFSLINIEN / HILFSLINIEN BEARBEITEN die Einstellmöglichkeit für die Farbe. Zusätzlich können Sie die Linien festhalten (HILFSLINIEN SPERREN), um ein versehentliches Verschieben zu verhindern.

Abbildung 1.4: Hilfslinien sind mit den Gitternetzlinien vergleichbar, allerdings können Sie diese frei platzieren.

9. Schließen Sie nun die beiden Dateien, ohne sie zu speichern.

Symbolleisten Flash verfügt über fünf Symbolleisten: Standard, Status, Steuerung, die Startleiste und den Werkzeugkasten (auch Werkzeuge genannt). Die ersten vier Symbolleisten sind alternative Wege, um per Knopfdruck Aktionen auszuführen, die Sie normalerweise in den verschiedenen Menüs finden. Der Werkzeugkasten ermöglicht es Ihnen, Texte und Grafiken einzufügen und zu bearbeiten. Unter FENSTER / SYMBOLLEISTEN finden Sie STANDARD, STATUS und ABSPIELSTEUERUNG. Sie können diese wie in Abbildung 1.5 aktivieren. Die Startleiste ist übrigens immer vorhanden.

29

Grundlagen

Abbildung 1.5: Sie können bei Bedarf zusätzliche Symbolleisten einblenden.

Die Standard-Symbolleiste enthält Knöpfe mit allgemeinen Funktionen, die man sonst in den Menüs DATEI und BEARBEITEN findet (zum Beispiel: ÖFFNEN, SPEICHERN und RÜCKGÄNGIG). Wenn Sie wissen wollen, was ein bestimmter Knopf bewirkt, bewegen Sie einfach den Mauszeiger über den Knopf und warten Sie, bis ein kurzer Hinweis erscheint. Die Statusleiste zeigt einfach nur den aktuellen Status der Tastatur an. Dabei steht CAP für die Umschalt-Feststelltaste und NUM für die Nummern-Feststelltaste. Das war es auch schon. (Ich lasse die Statuszeile meist ausgeschaltet, weil sie viel Platz wegnimmt und nur Informationen anzeigt, die sowieso schon von meiner Tastatur geliefert werden.) Die Abspielsteuerungsleiste ähnelt den Tasten eines Videorecorders. Wenn Sie Animationen erstellen, können Sie diese Symbolleiste verwenden, um den Film abzuspielen, zu stoppen, zurückzuspulen und schrittweise weiterzuspielen. Wahrscheinlich werden Sie sich aber auch an die Kurztasten für diese Funktionen gewöhnen. Die Standard- und die Abspielsteuerungsleise sind verbindbar, was bedeutet, dass man sie einzeln auf dem Bildschirm platzieren kann, aber auch die Möglichkeit besteht, sie mit der Flash-Oberfläche zu verbinden. Auf diese Weise können Sie Ihren Arbeitsplatz so gestalten, wie Sie wollen. Wählen Sie beispielsweise FENSTER / SYMBOLLEISTEN / ABSPIELSTEUERUNG. Die Symbolleiste sollte über allem anderen auf dem Bildschirm erscheinen. Wenn Sie die Leiste über die Zeitleiste (oberhalb der Bühne) bewegen, können Sie diese verbinden. Um sie wieder abzukoppeln, klicken Sie auf die Linie neben dem Stopp-Knopf und ziehen Sie die Leiste wieder weg. Wir werden im weiteren Verlauf des Kapitels noch einige andere verbindbare Fenster in Flash kennen lernen (inklusive Zeitleiste und alle Bedienfelder). Die Statusleiste ist allerdings immer fest an ihren Platz am unteren Bildschirmrand gebunden.

30

Ein Überblick

Die Startleiste ist eine Symbolleiste, die man nicht verschieben oder ausschalten kann. Sie ist eigentlich auch ohne diese Funktion nützlich. Mit der Startleiste am unteren Rand der Flash-Oberfläche können Sie schnell die gängigen Bedienfelder öffnen, die wir später besprechen werden. Die Werkzeugkiste lässt sich über FENSTER / WERKZEUGE ein- und ausschalten. Wie viele andere Symbolleisten ist auch der Werkzeugkasten verbindbar (standardmäßig an der linken Seite der Flash-Oberfläche). Man verwendet die Werkzeug-Symbolleiste hauptsächlich, um auf der Bühne zu zeichnen. Wir werden noch sehen, dass sie sich in mehrere Sektionen unterteilt: Werkzeuge, Ansicht, Farben und Optionen (siehe Abbildung 1.6).

Abbildung 1.6: Die Werkzeugkiste bietet Hilfsmittel zum Zeichnen, Editieren, Betrachten sowie Optionen, die je nach aktiviertem Werkzeug variieren.

Der Abschnitt Werkzeuge befähigt uns, Grafiken und Texte zu erstellen (Linien- und TextWerkzeug), Grafiken zu bearbeiten (Radiergummi- und Farbeimer-Werkzeuge) und einfach Grafiken auszuwählen (Pfeil-, Lasso- und Unterauswahl-Werkzeuge). Alle diese Werkzeuge werden wir im nächsten Kapitel genauer besprechen. Im Ansicht-Abschnitt kann man die Ansicht der Bühne verändern (wie wir das schon in der letzten Aufgabe durchgeführt haben). Im Abschnitt Farben kann man die Farbe bei gezeichneten Objekten beeinflussen. Und im Optionen-Feld erhält man bei gewissen Werkzeugen weiterführende Einstellmöglichkeiten. Je nach Werkzeug kann dieser Abschnitt auch leer bleiben.

31

Grundlagen

In den Kapiteln 2 und 4 werden wir noch genauer auf Einzelheiten der Werkzeuge eingehen. Zu diesem Zeitpunkt sollten Sie erst einmal weiterlesen und ein wenig mit den Werkzeugen spielen. Sie müssen aber sicher sein, dass Sie verstanden haben, wie man Symbolleisten verbindet und was in etwa das Einsatzgebiet jedes Werkzeuges ist.

Die Zeitleiste Wir werden uns mit der Zeitleiste im Detail in Kapitel 7 auseinandersetzen. Trotzdem möchte ich Ihnen einen kurzen Überblick geben. Die Zeitleiste beinhaltet eine Sequenz von Einzelbildern, welche die Animation ausmachen. Wenn der Anwender Ihre Animation betrachtet, sieht er Bild 1 gefolgt von Bild 2 und so weiter. Denken Sie sich einfach einen konventionellen Film, dessen einzelne Bilder Sie horizontal nebeneinander angeordnet auf den Bildschirm gelegt haben (der Anfang ist links und das Ende rechts). Wie viele andere Fenster ist auch die Zeitleiste ankoppelbar (siehe Bild 1.7). Das Ankoppeln ist eine weitere Art, den Arbeitsbereich zu organisieren. Wenn Sie wollen, können Sie die Zeitleiste unter der Bühne, oder wo immer Sie wollen, ankoppeln. Wenn Sie zwei Monitore an Ihrem Computer angeschlossen haben, können Sie noch flexibler mit Ihrem Arbeitsbereich umgehen. Ich persönlich koppele die Zeitleiste gerne oberhalb der Bühne und die Werkzeugkiste an der linken Seite an. Diese Anordnung werde ich bei den meisten Bildern dieses Buches verwenden. Wenn Sie die Zeitleiste schließen (nur im abgekoppelten Modus verfügbar), um mehr Platz zu schaffen, können Sie diese immer unter ANSICHT / ZEITLEISTE wieder sichtbar machen.

Abbildung 1.7: Die Zeitleiste und die Werkzeugkiste können ausgekoppelt und wie jedes andere Fenster verschoben werden. Sie können natürlich auch wieder an ihre originalen Positionen »angekoppelt« werden. So können Sie ganz einfach Ihre Arbeitsoberfläche organisieren.

32

Fenster

Wenn Sie anfangen, Animationen zu entwerfen, zeigt Ihnen die Zeitleiste einige Hinweise an. Beispielsweise können Sie ganz einfach die Länge einer Animation bestimmen, indem Sie einen Blick auf die Zeitleiste werfen. Außerdem verwendet Flash in der Zeitleiste einige Icons und Farben, die Ihnen sofort verraten, wie die Animation ablaufen wird. Zusätzlich zu den Bildern stellt Ihnen Flash so viele Ebenen zur Verfügung, wie Sie wollen. Diese verhalten sich genauso wie in anderen Grafikprogrammen, denn alle Objekte, die in einer bestimmten Ebene gezeichnet wurden, erscheinen ober- oder unterhalb der Objekte anderer Ebenen (je nachdem wo die aktuelle Ebene angeordnet ist). Jede Ebene enthält eine unterschiedliche Animation (sicherlich haben Sie im Beispiel »Schlüsselbild erstellen« schon gesehen, dass dort viele unterschiedliche Ebenen eingetragen sind). Auf diese Weise können mehrere verschiedene Animationen zur gleichen Zeit ablaufen. Sie können sehr komplexe Animationen erstellen, indem Sie die Ebenen benennen und gegebenenfalls Effekte (wie zum Beispiel die Maskierung) verwenden. Bild 1.8 zeigt die Zeitleiste und die Ebenen eines fertigen Filmes. Zu diesem Thema werden Sie aber in Kapitel 11 noch mehr erfahren.

Abbildung 1.8: Die meisten Animationen verwenden mehrere Ebenen. Jede Ebene ist unabhängig von den anderen.

1.2

Fenster

Natürlich werden Sie es in Flash mit mehr Fenstern als der Bühne, den Symbolleisten und der Zeitleiste zu tun bekommen (obwohl dies die wichtigsten sind). In diesem Abschnitt werden wir einige weitere kennen lernen.

Bedienfelder Bedienfelder ermöglichen es Ihnen, Eigenschaften von Objekten zu betrachten und zu verändern. Sie können beispielsweise mit dem Zeichen-Bedienfeld die Schriftart und größe ansehen und verändern. Mit dem Füllung-Bedienfeld kann man die Füllfarbe eines Objekts kontrollieren. Obwohl wir in diesem Kapitel nur einige Bedienfelder betrachten werden, kennen Sie sich am Ende bestimmt schon ganz gut mit den noch folgenden aus

33

Grundlagen

(unter FENSTER / BEDIENFELDER finden Sie eine komplette Liste). Da es eine solche Vielzahl von Bedienfeldern gibt, werden Sie später noch erfahren, wie man sie so organisiert, dass Sie ordentlich auf die Arbeitsoberfläche passen. Sie werden sehen, dass die Bedienung dieser Komponenten sehr einfach ist. Bedienfelder funktionieren auf eine sehr spezielle Art und Weise. Wenn Sie ein Bedienfeld geöffnet haben, obwohl keine Objekte markiert sind, wirken sich Veränderungen in diesem Feld nicht aus. Wenn Sie also Objekte verändern wollen, müssen Sie diese zuerst auswählen. Soll beispielsweise die Schriftgröße eines Textes verändern werden, wählen Sie den Text aus und öffnen das Zeichen-Bedienfeld, um die Änderungen auszuführen. Wichtig ist, dass der Text ausgewählt bleibt, wenn Sie das Bedienfeld öffnen. Sie können auch mehrere Objekte gleichzeitig verändern, wenn Sie diese gleichzeitig auswählen und dann das Bedienfeld öffnen. In den folgenden Aufgaben werden wir dies näher betrachten.

Füllung-Bedienfeld Das Bedienfeld Füllung zeigt die Füllfarbe von Objekten an und gibt Ihnen die Möglichkeit, diese zu verändern. Auch das lernen Sie in den folgenden Aufgaben.

Aufgabe: Verwenden Sie das Bedienfeld Füllung, um Farben zu betrachten und zu verändern! Während dieser Aufgabe werden Sie das Füllung-Bedienfeld dazu verwenden, die Füllfarben von Objekten einer fertigen Animation anzuzeigen und zu verändern. Folgen Sie einfach diesen Schritten: 1. Damit Sie eine Datei haben, mit der Sie arbeiten können, wählen Sie bitte HILFE / BEISPIELE / SCHLÜSSELBILD ERSTELLEN. 2. Nun klicken Sie in der Zeitleiste auf das oberste Vorhängeschloss, um alle Ebenen zu entsperren; ansonsten können Sie nichts an der Animation verändern, da alle Ebenen gesperrt wurden, bevor die Datei abgespeichert wurde.

Abbildung 1.9: Man kann alle Ebenen entsperren (oder sperren), indem man das oberste Vorhängeschloss in der Zeitleiste anklickt.

34

Fenster

3. Nun werden wir die Farbe des Rahmens ändern. Wählen Sie FENSTER, BEDIENFELDER, FÜLLUNG (dies ist ein Umschaltmenü. Wenn das Bedienfeld Füllung schon angezeigt gewesen wäre, hätten Sie gesehen, dass es ausgewählt war. Ein erneutes Klicken auf Füllung hätte das Bedienfeld wieder geschlossen. In diesem Fall klicken Sie erneut auf Füllung, um es wieder zu öffnen.) 4. Klicken Sie nun auf die Registerkarte Füllung und ziehen Sie das Bedienfeld in die Mitte des Bildschirms (siehe Abbildung 1.10). Auf diese Weise können Sie Bedienfelder voneinander trennen.

Abbildung 1.10: Das Bedienfeld Füllung kann in die Mitte des Bildschirms gezogen werden, um separat angezeigt zu werden.

5. Wählen Sie das Werkzeug Pfeil oben links in der Werkzeugkiste (oder drücken Sie (V)). Klicken Sie dann auf den gezeichneten blauen Rahmen auf der Bühne. Beachten Sie, dass sich das Muster im Füllung-Bedienfeld an die Pfade des Rahmens anpasst. Das Bedienfeld Füllung ist nur eine Art, die Füllfarbe eines Objekts zu verändern. 6. Klicken Sie nun auf die Topfpflanze. Beachten Sie, dass sich das Bedienfeld Füllung an die blaue Farbe angleicht. Das Bedienfeld zeigt immer die Eigenschaften des momentan ausgewählten Objekts an. 7. So weit ist die Benutzung des Bedienfelds Füllung recht einfach; fahren wir aber zum Spaß fort und klicken auf den blauen Hintergrund im Inneren des Rahmens. Beachten Sie, wie sich das Muster erneut anpasst. Sie sehen, dass Füllfarben manchmal Farbverläufe sind. Über diese Farbverläufe lernen wir mehr im vierten Kapitel. 8. Lassen Sie diese Datei weiterhin geöffnet, denn wir werden damit in Kürze weiterarbeiten.

35

Grundlagen

Das Info-Bedienfeld Das Bedienfeld Info zeigt visuelle Eigenschaften eines Objekts an. Dazu gehören sowohl Breite und Höhe als auch die horizontale und vertikale Position. Das Info-Bedienfeld wird genau wie einige andere Bedienfelder so oft benutzt, dass Macromedia speziell einen Knopf in der Startleiste eingeführt hat (siehe Abbildung 1.11). Betrachten wir wieder die Datei, die Sie noch aus der letzten Aufgabe geöffnet haben. Wir gehen aber jetzt genauer auf das Bedienfeld Info ein. Klicken Sie also auf das Icon für Info (unten in der Startleiste). Ziehen Sie es nun über die Titelleiste in die Mitte des Bildschirms.

Abbildung 1.11: Die Knöpfe in der Startleiste sorgen für schnellen Zugang zu den am meisten verwendeten Bedienfeldern.

Stellen Sie sicher, dass Sie immer noch das Werkzeug Pfeil ausgewählt haben und klicken Sie dann auf verschiedene Teile des Gemäldes auf dem Bildschirm. Betrachten Sie, wie sich im Bedienfeld Info die Zahlen verändern. Beachten Sie auch, dass die Zahlen am unteren Rand des Bedienfeldes sich immer dann verändern, wenn Sie die Maus bewegen. Klicken Sie erneut auf den gezeichneten Rahmen und schauen Sie sich die Breite und Höhe an, die im Bedienfeld Info angezeigt werden. Sie sollten auch beachten, dass die

36

Fenster

Position des Rahmens in den Feldern X und Y angezeigt wird. Dabei gibt X die Anzahl der horizontalen Bildpunkte zum linken Bildschirmrand und Y die Anzahl der Bildpunkte nach oben an. Benutzen Sie die Pfeiltasten auf der Tastatur, um den Rahmen zu bewegen, und schauen Sie, wie sich die X- und Y-Koordinaten verändern. Über Bedienfelder können Sie Eigenschaften nicht nur anzeigen, sondern auch verändern. Wenn Sie also eine größere Zahl in das Feld X eintragen und (ÿ__) drücken, werden Sie sehen, wie sich der Rahmen auf der Bühne verschiebt. Auf diese Weise können Sie auch die Breite und Höhe eines Objektes verändern. So können Sie beispielsweise die Breite von zwei Objekten über das Bedienfeld Info angleichen. Das Koordinatensystem besitzt in allen Multimedia-Werkzeugen (und so auch in Flash) die X-Achse (horizontal) und die Y-Achse (vertikal). Die Ecke oben links auf dem Bildschirm (oder der Bühne) hat die Werte 0x,0y. Wenn man sich weiter nach rechts bewegt, steigt die X-Koordinate an. Geht man beispielsweise 100 Bildpunkte nach rechts, befindet man sich an der Position 100x,0y. Bewegt man sich nach unten, erhöht sich die Y-Koordinate. Die Ecke unten links auf einem 800x600-Bildschirm hat die Position 0x,600y. Merken Sie sich nur, dass die Y-Koordinate ansteigt, wenn man sich nach unten bewegt (nicht nach oben, wie man erwarten könnte). Hier kommt eine interessante Herausforderung: Was passiert, wenn man die Position eines Objektes auf -1000x setzt? Das Objekt wird in den Außenbereich der Bühne um 1000 Pixel nach links bewegt.

Das Zeichen-Bedienfeld Das Zeichen-Bedienfeld ist wie das Info-Bedienfeld sehr nützlich. Erstellen Sie eine neue Datei (DATEI / NEU oder (Strg)+(N)), damit wir ein wenig mit dem Zeichen-Bedienfeld experimentieren können. Wählen Sie das Zeichen-Werkzeug aus, klicken auf die Bühne und tippen Sie dann ein paar Worte. Klicken Sie auf das Pfeil-Werkzeug, wenn Sie mit dem Schreiben fertig sind. Sie finden das Zeichen-Bedienfeld nicht nur in der Startleiste, sondern Sie können auch auf einen bereits bestehenden Textblock rechts klicken, um ein Kontextmenü (siehe Abbildung 1.12) anzuzeigen. (Wenn Sie einen Macintosh benutzen, klicken Sie (Strg) und die Maustaste.) Aus dem Kontextmenü, das erscheint, können Sie alle Bedienfelder starten, welche Eigenschaften dieses Objekts verändern können (in diesem Fall also auch das Zeichen-Bedienfeld). Dies ist nur eine andere Art und Weise, um das richtige Bedienfeld zu finden. So gelangen Sie immer zum richtigen Bedienfeld, auch wenn Sie nicht wissen, welches für dieses Objekt zuständig ist. Im Bedienfeld Zeichen können Sie eine andere Schriftart oder Schriftgröße einstellen, die Schriftfarbe verändern und den Text auf viele Arten formatieren. Das Bedienfeld Absatz enthält nebenbei bemerkt einige Möglichkeiten, die Ausrichtung und die Ränder zu verändern. Diese Bedienfelder werden wir im nächsten Kapitel noch genauer besprechen.

37

Grundlagen

Abbildung 1.12: Sie erreichen alle Bedienfelder, die in Zusammenhang mit einem Objekt stehen, durch das Kontextmenü (Rechtsklick auf das Objekt bzw. (Strg) rg) und Klick beim Macintosh).

Bedienfelder in Gruppen organisieren An dieser Stelle haben Sie wahrscheinlich viel ausprobiert. Deshalb sind Ihre Bedienfelder vielleicht kreuz und quer über den Bildschirm verteilt. Das bringt uns zu einem interessanteren Punkt: Ihnen wird eine Menge Freiheit eingeräumt, wie Sie Ihre Bedienfelder organisieren dürfen. Sie können sie nach Belieben gruppieren und wieder trennen. Wenn Sie wollen, können Sie alle Bedienfelder in einem großen »Super-Bedienfeld« zusammenfassen. Dahinter steckt die Idee, dass Sie Bedienfelder so anpassen können, wie Sie am besten zu Ihrem Arbeitsstil passen. Wenn Sie beispielsweise sehr viel Text formatieren müssen, kann es sein, dass Sie nur die Bedienfelder Zeichen, Absatz und Info sehen wollen. Je nachdem, welche Bildschirmauflösung Sie verwenden, kann es sein, dass Sie sich von den Bedienfeldern gestört fühlen, da sie zu viel von der Bühne verdecken. Drücken Sie einfach die Taste (ÿ__), um vorübergehend alle Bedienfelder zu schließen. Drücken Sie erneut auf (ÿ__), um diese wieder zu öffnen.

38

Fenster

Sie können jederzeit die »Fabrik-Einstellungen« der Bedienfelder wiederherstellen, indem Sie auf FENSTER / BEDIENFELDSÄTZE / STANDARDLAYOUT klicken. Wenn Sie eine Zusammenstellung gefunden haben, mit der Sie sehr gut arbeiten können, speichern Sie diese ab. Positionieren Sie die Bedienfelder dafür ganz einfach so, wie Sie es wollen und wählen Sie FENSTER / BEDIENFELDER-LAYOUT SPEICHERN. Sie werden nun aufgefordert, einen Namen für diese Anordnung einzugeben. Der Name, den Sie wählen, erscheint im Menü FENSTER / BEDIENFELDSÄTZE. Sie finden die gespeicherte Datei im Ordner Panel Sets, der ein Unterordner Ihrer Flash-Installation ist. Sie können diese Dateien mit anderen Flash-Autoren austauschen oder auch löschen, wenn sie nicht länger benötigt werden.

Die Bibliothek Die Bibliothek ist der beste Ablageplatz für alle Medienelemente, die Sie in Ihrer FlashDatei verwenden. Es gibt eine Menge Gründe, warum Sie die Bibliothek später lieben werden (weitere Details sehen wir in Kapitel 5). Medien, die in der Bibliothek platziert wurden, können Sie immer und immer wieder in Ihrer Datei verwenden. Unabhängig davon, wie oft Sie dieses Medium verwenden, wird die Dateigröße Ihrer Flash-Animation nicht steigen! Wenn Sie beispielsweise die Zeichnung einer Wolke in Ihrer Bibliothek ablegen, können Sie 100 Kopien dieser Wolke auf die Bühne bringen (um beispielsweise einen Himmel voller Wolken zu simulieren), aber in Ihrer Flash-Datei befindet sich in Wirklichkeit nur eine einzige Wolke. Die Verwendung der Bibliothek ist ein Grund, warum FlashFilme so klein bleiben. In der Praxis wird die Bibliothek auf zwei Arten verwendet: Zum Editieren und zum Verwalten (bzw. Ansprechen) der Bibliotheksinhalte. Es kann sein, dass Sie den Inhalt eines Bibliothek-Objekts (Symbol genannt) editieren müssen, womit Sie den Inhalt der Bibliothek verändern werden. Es kann genauso gut sein, dass Sie die Bibliothek nur dazu verwenden, um die Instanzen Ihrer Symbole im Film zu ordnen. In diesem Fall verwalten sieht lediglich die Bibliothek (anstatt Sie zu editieren). Ein Symbol ist der Name für ein Objekt, das Sie erschaffen und in Ihrer Bibliothek ablegen (meist ein sichtbares Objekt, wie zum Beispiel eine Grafik). Allerdings existieren verschiedene Arten von Symbolen. Dahinter steckt die Idee, dass Sie ein Symbol erschaffen und diese Grafik nur einmal in der Bibliothek ablegen. Nachdem es sich in der Bibliothek befindet, kann das Symbol mehrfach in Ihrem Film auftauchen, ohne die Dateigröße des Films gravierend zu erhöhen. Eine Instanz ist eine Kopie eines Symbols (das in Ihrem Film verwendet wird). Jedes Mal, wenn Sie ein Symbol aus der Bibliothek ziehen, erschaffen Sie eine neue Instanz. Es handelt sich dabei nicht um eine »Kopie« im herkömmlichen Sinne, da es in Wirklichkeit nur ein Symbol gibt und jede Instanz so gut wie keinen Speicher verbraucht. Wir werden noch sehen, dass Instanzen in vielen Belangen verändert werden können (z.B. in ihrer Größe).

39

Grundlagen

Abbildung 1.13: Eine typische Bibliothek beinhaltet mehrere verschiedene Symbole. Die Bibliothek bietet sowohl Zugang zu allen Medien als auch weitere Optionen wie Sortieren, Löschen und Umbenennen der verschiedenen Symbole.

Sie können die Bibliothek über die Startleiste oder über FENSTER / BIBLIOTHEK öffnen (außerdem funktioniert die Tastenkombination (Strg)+(L)). Es erscheinen nun alle Namen der Symbole, die in Ihrer Bibliothek zur Verfügung stehen (siehe Abbildung 1.13). Sie können diese Liste nach Namen, Änderungsdatum, Art und so weiter sortieren. Das geschieht auf die gleiche Weise, wie Sie auch eine Dateiliste in Ihrem Computer verwalten können. Wenn eine Zeile ausgewählt ist (nur ein einfacher Klick), erscheint eine Vorschau dieses Symbols und Sie können Veränderungen über den Menüpunkt OPTIONEN (oben rechts im Bibliotheks-Fenster oder über das Kontextmenü per Rechtsklick) vornehmen. Weitere Optionen, wie beispielsweise UMBENENNEN, EIGENSCHAFTEN und IN NEUEN ORDNER VERSCHIEBEN, fallen in die »Verwaltung« der Bibliothek. Um ein Symbol aus der Bibliothek in Ihrem Film zu verwenden, ziehen Sie es einfach aus dem Bibliotheksfenster auf die Bühne. Abschließend – und probieren Sie es bitte jetzt noch nicht aus – können Sie den Inhalt eines Symbols editieren, indem Sie entweder BEARBEITEN aus dem Optionsmenü wählen oder auf das Symbol in der Bibliothek doppelt klicken. Das würde in dieser Einführung allerdings zu weit führen und wird detailliert in Kapitel 5 besprochen.

40

Navigation

1.3

Navigation

Ein wichtiger Aspekt in Flash ist, immer zu wissen, wo man sich gerade befindet. Wenn Sie zum Beispiel denken, dass Sie sich in der Bibliothek befinden und ein Symbol bearbeiten, sollten Sie besser hoffen, dass Sie wirklich dort sind. Da es immer möglich ist, herauszufinden, wo man sich in Flash befindet, könnte sich das für Sie jetzt ein wenig verwirrend anhören. Allerdings sind die Hinweise oft sehr versteckt. Wir werden nun herausfinden, wie Sie immer anhand der versteckten Hinweise wissen, wo Sie sich in der Oberfläche befinden.

Die aktuelle Ebene Obwohl es nur eine Haupt-Zeitschiene gibt, haben wir bereits zuvor gesehen, dass man mehrere Ebenen verwalten kann. Öffnen Sie nun eine neue Datei und legen Sie eine neue Ebene an (EINFÜGEN / EBENE), damit wir damit ein wenig experimentieren können. Ein wichtiger Aspekt ist, dass Sie sich immer nur in »einer« Ebene zugleich befinden können. Wenn Sie beispielsweise Grafik einfügen oder zeichnen, wird diese immer der aktuellen Ebene hinzugefügt. Diese aktuelle Ebene wird durch ein kleines Bleistift-Symbol gekennzeichnet (siehe Abbildung 1.14). Klicken Sie einfach auf eine andere Ebene, um diese zu aktivieren (beobachten Sie, wie sich der Bleistift zur neuen Ebene bewegt). Das Geheimnis an dieser Stelle ist, dass Sie immer darauf achten müssen, welche Ebene Sie momentan bearbeiten. Wenn die aktuelle Ebene beispielsweise gesperrt ist, werden Sie nichts daran ändern können.

Abbildung 1.14: Die aktuelle Ebene ist nicht immer schwarz unterlegt, sondern wird lediglich durch das Bleistift-Symbol gekennzeichnet. Dadurch wird angezeigt, in welcher Ebene neue Grafiken erscheinen werden.

Das aktuelle Bild Wenn Sie die Zeitleiste betrachten, werden Sie eine rote Markierung entdecken können, die das aktuelle Bild markiert, das momentan angezeigt wird (siehe Abbildung 1.15). Diese rote Markierung (auch Abspielkopf genannt) kann immer nur auf einem einzigen Bild zur gleichen Zeit stehen – und das ist das Bild, das Sie momentan editieren. An dieser Stelle werden Sie vielleicht denken, dass man diese Markierung nicht hinter Bild 1 verschieben kann, was allerdings nur daran liegt, dass bisher keine weiteren Bilder zur Verfügung stehen. In Zukunft werden Sie jedoch sehr oft die Gelegenheit haben, das nachzuholen; In

41

Grundlagen

diesem Moment reicht es allerdings, dass Sie wissen, wofür die rote Markierung steht. Wenn es ihnen hilft, stellen Sie sich eine Zeitmaschine vor. Sie können jeden Zeitpunkt besuchen, allerdings immer nur einen auf einmal.

Abbildung 1.15: Der rote Abspielkopf (hier bei Bild 11) kann immer nur auf ein Bild zur gleichen Zeit zeigen. Sie sollten immer im Hinterkopf haben, wo sich diese Markierung befindet.

Die aktuelle Szene bzw. das aktuelle Symbol Das mit Abstand am schwersten zu verstehende Konzept ist für neue Anwender dieses: In Flash gibt es mehr als eine Zeitlinie! Ein sehr großer oder komplizierter Film kann nämlich in verschiedene Szenen unterteilt werden. Sie können sich diese Szenen wie Kapitel in einem Roman vorstellen. Tief im Innern von Flash gibt es lediglich eine lange Zeitlinie (so wie unser Roman eine lange, zusammenhängende Geschichte erzählt), wenn Sie aber Ihre Datei in Szenen aufteilen, können Sie diese einzeln ansprechen. Dabei handelt es sich um eine sehr nützliche Option, denn auf diese Weise können Sie sehr einfach die Reihenfolge der Szene verändern. Ohne weiter ins Detail zu gehen, sollten Sie schon an dieser Stelle wissen, dass Sie immer darauf achten müssen, in welcher Szene Sie gerade arbeiten. Sie finden den Namen der aktuellen Szene oberhalb der Zeitleiste (wenn diese angekoppelt wurde) oder oberhalb der Bühne (wenn die Zeitleiste nicht angekoppelt ist). Ich werde diese Stelle später als Adressleiste bezeichnen. Der Standardname ist Szene 1. Außerdem wird neben dem Namen das Symbol für Szenen (eine Filmklappe) angezeigt (siehe Abbildung 1.16).

Abbildung 1.16: In der oberen linken Ecke der Zeitleiste sehen Sie normalerweise den Namen der aktuellen Szene. Das Symbol einer Filmklappe zeigt an, dass es sich bei diesem Namen um eine Szene handelt.

42

Navigation

Die Adressleiste zeigt allerdings oft mehr Informationen an, als man in Abbildung 1.16 sieht. Wie wir im 4. Kapitel sehen werden (wenn wir mit dem Zeichnen beginnen), kann man Grafiken innerhalb anderer Grafiken gruppieren. Wenn wir uns in Kapitel 5 näher mit der Bibliothek beschäftigen, werden Sie außerdem sehen, wie man Symbole innerhalb anderer Symbole verwenden kann. Wenn Sie auf eine gruppierte Grafik oder auf die Instanz eines Symbols doppelklicken, um es zu bearbeiten, wird alles andere auf der Bühne abgeschwächt (um anzuzeigen, dass diese Inhalte nicht editierbar sind). Die beste Möglichkeit, um herauszubekommen, welche Grafik Sie momentan bearbeiten, ist der Blick auf die Adressleiste. Hier könnte beispielsweise »Szene 1: Gruppe« (siehe Abbildung 1.17) stehen. Das bedeutet, dass Sie sich in einer Gruppe befinden, die ihrerseits sich wieder in Szene 1 befindet. Das klingt ganz schön haarig, oder? Nun ja, es ist nicht ganz so schrecklich, da die Adressleiste sehr klar strukturiert ist – Sie müssen nur immer daran denken, einen Blick darauf zu werfen.

Abbildung 1.17: Die Adressleiste zeigt hier an, dass Sie eine Gruppe bearbeiten, die sich in Szene 1 befindet.

In der Benutzeroberfläche navigieren Wir haben also gesehen, dass die Benutzeroberfläche Hinweise anzeigt, die uns zu jeder Zeit verraten, wo wir uns befinden. Jetzt wäre es nur noch interessant zu wissen, wie man überhaupt an diese Stelle gelangt. Und wie kommt man wieder zurück? Es ist sehr einfach, durch eine Flash-Datei zu navigieren (vielleicht ist es auch gerade deshalb so einfach, sich zu »verlaufen«). Betrachten wir nun einige Arten des Navigierens. Die Adressleiste zeigt nicht nur die Hierarchien Ihrer aktuellen Position an, sie bietet Ihnen auch die Möglichkeit der Navigation. Klicken Sie einmal auf die Adressleiste. Wenn Sie beispielsweise gerade ein Symbol bearbeiten, welches sich in Szene 1 befindet, sollte »Szene 1: Symbolname« angezeigt werden. Wenn Sie nun einfach auf Szene 1 klicken, werden Sie zurück in diese Szene geführt (siehe Abbildung 1.18). Wenn die Adressleiste sichtbar ist, können Sie zu jeder Zeit innerhalb der Hierarchien zurücknavigieren. Merken Sie sich bitte, dass die Adressleiste Informationen über die aktuelle Position anzeigt und dass man darauf klicken kann.

43

Grundlagen

Abbildung 1.18: Die Adressleiste bietet mehr als nur Informationen – Sie können auf jeden angezeigten Namen klicken, um dorthin zurückzuspringen. Hier können Sie also auf Szene 1 klicken, um wieder bis an den Start zurückzuspringen.

Abbildung 1.19: Die Menüs Szene bearbeiten und Symbole bearbeiten sind immer an der rechten Seite Ihres Bildschirms erreichbar. Sie bieten die beste Möglichkeit, zwischen Szenen und Symbolen zu navigieren.

Abschließend möchte ich noch auf zwei weitere Menüs verweisen, die sich am anderen Ende der Adressleiste befinden: SZENE BEARBEITEN und SYMBOLE BEARBEITEN (siehe Abbildung 1.19). Über diese Menüs können Sie zu jeder beliebigen Szene oder jedem Symbol springen, das sich in Ihrem aktuellen Film befindet. Natürlich ist es nicht sehr interessant, diese Menüs zu benutzen, wenn Sie nur ein einziges Symbol in lediglich einer Szene erstellt haben. Wenn Ihre Datei allerdings größer wird, bieten diese Menüs eine

44

Filmeigenschaften

schnelle Möglichkeit der Navigation. Wenn Sie wollen, öffnen Sie doch einmal ein Beispiel oder eine Lektion aus dem Hilfe-Menü und versuchen Sie durch die verschiedenen Szenen und Symbole zu navigieren, indem Sie diese Menüs benutzen. Es gibt noch viel mehr Möglichkeiten, sich in Flash zu bewegen (und wir werden Sie alle kennen lernen). An dieser Stelle haben Sie aber schon genug gelernt, um komfortabel durch eine Flash-Datei navigieren zu können. Denken Sie nur immer an alle Hinweise, die Flash Ihnen gibt, um herauszufinden, wo genau Sie sich gerade befinden.

1.4

Filmeigenschaften

Wenn Sie einen Film erstellen, müssen Sie direkt zu Beginn einige Einstellungen vornehmen, deren Auswirkungen sehr weitreichend sind. Viele dieser Einstellungen finden Sie in der Dialogbox Filmeigenschaften (siehe Abbildung 1.20), die Sie unter MODIFIZIEREN / FILM oder per Doppelklick auf den unteren Rand der Zeitleiste (wo Sie 12.0 BpS sehen) öffnen können. Öffnen Sie nun das Dialogfeld Filmeigenschaften, damit wir mit einigen Einstellungen experimentieren können.

Abbildung 1.20: Das Dialogfeld Filmeigenschaften bietet die Möglichkeit, einige übergreifende Einstellungen, die Sie zu Beginn eines Projektes festlegen sollten, vorzunehmen.

Als Erstes sollten Sie sicherstellen, dass die Linealeinheit auf Bildpunkte (Pixel) eingestellt ist. Dabei handelt es sich um die Standardeinheit im Bereich Multimedia und Internetseiten. Es ist wichtig, dass Sie die Einheit auf Pixel einstellen, weil dies einige andere Dialogfelder (einschließlich dem bereits erwähnten Bedienfeld Info) beeinflussen wird. Neben Hintergrundfarbe sehen Sie ein weißes Feld, das es Ihnen erlaubt, die Farbe der Bühne zu verändern. Das ist unter Umständen nicht so nützlich, wie Sie vielleicht denken mögen, da Sie zum Zeitpunkt der Veröffentlichung Ihres Filmes im Internet wieder eine andere Hintergrundfarbe wählen können – welche diese Einstellung überschreiben wird. Sie können also gerne die Hintergrundfarbe zu jeder beliebigen Zeit verändern. Möglicherweise ist Grau ein wenig augenfreundlicher oder Schwarz macht das Auswählen von weißer Grafik einfacher. Machen Sie einfach was Sie wollen, da diese Einstellung jederzeit wieder zurückgestellt werden kann und sowieso nur die Bühnenfarbe verändert, während Sie zeichnen.

45

Grundlagen

Zwei weitere Eigenschaften sollten Sie schon zu Beginn Ihres Filmes festlegen: die Bildrate und das Format. Die Bildrate spezifiziert die Geschwindigkeit, in der Flash versuchen wird, Ihren Film abzuspielen – und zwar die Anzahl der Bilder pro Sekunde. Ich sage extra »versucht«, denn einige Betrachter verfügen nicht über einen so schnellen Rechner, um hier mithalten zu können. Flash wird dann wahrscheinlich nicht die Bildrate erreichen, die Sie eingestellt haben, sondern es wird stecken bleiben oder einfach nicht mehr mitkommen. Das Format ist nur insofern interessant, als es die Längen-Breiten-Relation der Bühne beeinflusst. Das haben wir zu einem früheren Zeitpunkt schon besprochen. Entscheiden Sie sich nun einfach, ob Sie eine quadratische Bühne (Sorry, aber sie kann leider nicht rund sein), oder doch lieber ein Breitbild-Format wünschen. Vielleicht wollen Sie sogar ein vertikales Rechteck erzeugen (wenn Sie beispielsweise eine Menüleiste neben Ihre Internetseite legen wollen). Entscheiden Sie sich frühzeitig, da das Aussehen Ihrer Bühne die Anordnung von Bildern und Grafiken beeinflussen wird. Viele Leute verwechseln Bildrate oft mit Geschwindigkeit, was mehr ein visueller Effekte ist. Animateure können einige Tricks verwenden, um etwas scheinbar sehr schnell über den Bildschirm zu bewegen, obwohl sie nur eine sehr geringe Bildrate verwenden. Wenn Sie zum Beispiel ein Auto am linken Rand des Bildschirms sehen und nur Bruchteile von Sekunden später befindet es sich schon auf der rechten Seite, könnte das Ihrem Gehirn vorspielen, dass sich das Auto sehr schnell bewegt hat. Obwohl so ein Trick nur zwei Bilder benötigt – und bei einer Bildrate von vier Bildern pro Sekunde erscheint das zweite Auto schon eine Viertelsekunde nach dem ersten! Die Bildrate kontrolliert also nur die visuelle Auflösung. Damit ist gemeint, in wie viele Stückchen eine jede Sekunde unterteilt wird. Vier Bilder pro Sekunde wird sehr »ruckelig«, da das Bild nur viermal in der Sekunde verändert wird. Dagegen werden 30 Bilder pro Sekunde (das entspricht der Bildrate des Fernsehens) in so kleine Stückchen zerlegt, dass man den Unterschied zwischen den einzelnen Bildern nicht mehr erkennen wird. Nebenbei gesagt kann man natürlich auch ein Auto über den Bildschirm bewegen, wenn man mit 60 Bildern pro Sekunde arbeitet – allerdings würde unsere Viertelsekunden-Bewegung dann ganze 15 Bilder benötigen. Wir werden uns mit diesem Thema noch genauer in Kapitel 7 beschäftigen.

1.5

Dateitypen

Natürlich ist der übliche Einsatz von Flash die Erstellung interaktiver Animationen für das Internet. Wenn wir uns nun die verschiedenen Dateitypen ansehen, könnte das ein wenig verwirrend sein. Deshalb beschränken wir uns auf ein Minimum, denn Sie sollen zumindest drei Dateitypen verstehen: Quell-Dateien .fla, exportierte .swf-Dateien und HTMLDateien (.htm oder .html).

46

Dateitypen

Quell-Dateien (.fla-Dateien) Einer der wichtigsten beiden Dateitypen in Flash ist die Quell-Datei eines Flash-Films, die Sie immer während Ihrer Arbeit abspeichern können. Diese Datei verwendet die Endung .fla. Sie können jede .fla-Datei öffnen und bearbeiten. Mit dieser Quell-Datei können Sie immer die anderen Dateitypen erzeugen – allerdings können Sie mit keiner anderen Datei eine .fla-Datei wiederherstellen (außer, Sie machen sich die ganze Arbeit noch einmal). Wenn Sie Dateien mit anderen Flash-Autoren austauschen wollen, die etwas am Film verändern sollen, tauschen Sie immer .fla-Dateien aus. Jeder, der Flash 5 installiert hat (sei es auf dem Macintosh oder unter Windows), kann eine .fla-Datei öffnen und bearbeiten, die Sie erzeugt haben. Obwohl Sie eine .fla-Datei nicht direkt ins Internet stellen können, damit andere Nutzer Ihren Film betrachten können, beinhaltet diese Datei alle Informationen über Ihren Film.

Exportierte .swf-Dateien Wenn Sie Ihre Arbeit abgeschlossen haben und bereit sind, Ihre Kreation zu veröffentlichen, exportieren Sie lediglich eine .swf-»Flash-Player«-Datei. Eine .swf-Datei kann von jedem im Internet betrachtet werden, der das Flash-Player-Plugin installiert hat. Das Publikum kann eine .swf-Datei nicht bearbeiten, sondern nur betrachten.

Abbildung 1.21: Das Dialogfeld Film exportieren erlaubt es Ihnen, einzustellen, welchen Dateityp Sie exportieren wollen. In den meisten Fällen werden Sie eine .swf-Datei (Flash-Player) erzeugen.

Die Vorgehensweise, um eine .swf-Datei zu erstellen, ist sehr einfach. Sie öffnen eine .fla-Datei und wählen DATEI / FILM EXPORTIEREN und geben die Position und den Namen der .swf-Datei an. Obwohl es noch eine Menge mehr Details gibt, ist es wichtig zu verstehen, dass Exportieren immer das Erzeugen einer neuen Datei (.swf-Datei) beinhaltet, die .fla-Datei aber weiterhin unverändert bleibt. Das Ganze ist vergleichbar mit der

47

Grundlagen

Funktion SPEICHERN UNTER, die Sie in vielen anderen Programmen finden. Sie sollten immer eine Kopie Ihrer .fla-Datei behalten, egal was Sie tun. Damit können Sie jederzeit .swf-Dateien erstellen oder Ihre Animation verändern und weitere .swf-Dateien erzeugen. Es gibt noch eine letzte Sache, mit der wir uns jetzt beschäftigen sollten, wenn Sie beabsichtigen, mit mehreren Leuten im Team zu arbeiten oder auf andere Weise .fla-Dateien untereinander austauschen wollen (und zwar auf verschiedenen Rechnern): Jede .fla-Datei, die Sie erstellt haben, wird sowohl auf einem Macintosh als auch auf Windows-Rechnern ordentlich zu öffnen sein. Allerdings gibt es einen kleinen Nachteil: Die Schriftarten, die Sie in Ihrer Flash-Datei verwendet haben, müssen auf dem Rechner installiert sein, auf dem Sie eine .swf-Datei erstellen wollen. Es ist nicht so, dass Sie die Datei nicht austauschen können, wenn auf dem Zielrechner die betreffende Schriftart nicht installiert ist – allerdings kann man auf dem Rechner dann nicht den Text editieren und auch keine .swf-Dateien erstellen. Das kann man ganz einfach verhindern, indem man alle verwendeten Schriftarten auf allen Rechnern installiert, mit denen gearbeitet werden soll.

HTML-Dateien, die .swf-Dateien beherbergen Wenn Sie schon ein wenig Erfahrung mit HTML haben, werden Sie feststellen, dass es recht einfach ist, Ihre .swf-Dateien in eine Internetseite einzubinden. Wenn Sie noch keine HTML-Erfahrung besitzen, kann es nicht schaden, ein wenig HTML zu lernen, allerdings ist das keine Pflicht. Hier ein kleiner Einblick: Wenn Sie eine Internetseite besuchen, »gehen« Sie nicht wirklich irgendwohin. In Wirklichkeit lädt Ihre Browser-Software eine kleine Text-Datei herunter (für gewöhnlich mit einer .htm- oder .html-Dateiendung). Diese Datei beinhaltet nicht nur die Worte, die Sie auf einer Internetseite sehen, sondern zusätzliche Anweisungen, wie zum Beispiel die Schriftart und -größe auszusehen haben. Zusätzlich beinhaltet eine HTML-Datei Informationen über Bilder, die Sie im Internet sehen. Dazu gehören Details wie der Dateiname des Bildes oder dessen Format. Wenn Sie eine Flash-Player-Datei (.swf) in eine Internetseite einbinden wollen, ist das nicht schwerer, als ein Bild in eine Internetseite einzufügen. Allerdings können Sie ein paar weitere Details (außer dem Dateinamen der .swf-Datei) hinzufügen, wie zum Beispiel die Hintergrundfarbe oder ob Sie den Film stets wiederholen lassen wollen. Des Weiteren gibt es noch sehr viele interessante Einstellungen, die in Flash möglich sind. Um diesen Prozess ein wenig zu vereinfachen, gibt es in Flash eine Funktion namens VERÖFFENTLICHEN (welche wir in einem späteren Kapitel noch genauer besprechen werden). Weitere Details kann man im Dialogfeld Einstellungen für Veröffentlichungen festlegen (siehe Abbildung 1.22).

48

Zusammenfassung

Abbildung 1.22: Im Dialogfeld Einstellungen für Veröffentlichungen können Sie alle Dateiformate auswählen, die Sie zur Verfügung stellen wollen. Weitere Einstellungen kann man über die Registerkarten vornehmen, die am oberen Rand des Fensters erscheinen.

1.6

Zusammenfassung

Wir haben in diesem Kapitel sehr viele Grundlagen besprochen, ohne eigentlich irgendetwas zu erstellen. Keine Angst, wir werden uns in der nächsten Stunde »die Hände schmutzig machen«. Allerdings sind die Informationen, die Sie in diesem Kapitel erhalten haben, sehr wertvoll für Ihre weitere Flash-Karriere. Ich habe Sie in die Flash-Oberfläche eingeführt (inklusive Bühne, Zeitleiste und Werkzeugkiste). Sie haben gelernt, wie man die Größe der Bühne verändert und wie man die Ansicht vergrößern bzw. verkleinern kann. Wir haben die Werkzeugkiste kennen gelernt (die Sie in der nächsten Stunde sehr häufig gebrauchen werden) und haben einige Bedienfelder besprochen, die es uns ermöglichen, Grafiken zu bearbeiten. Obwohl wir nicht viel mit der Zeitleiste gearbeitet haben, haben Sie schon gelernt, auf kleine Hinweise zu achten (z.B. den Abspielkopf und das Bleistift-Symbol). Danach sind noch weitere Hinweise der Oberfläche und Werkzeuge für die Navigation eingeführt worden, damit Sie immer sehen, wo Sie sich gerade befinden. Die Adressleiste und die beiden Menüs oben rechts helfen Ihnen in diesem Bereich immer weiter. Abschließend haben wir die Dateiformate besprochen, die wir erstellen werden. Es ist wichtig, dass Sie sich mit diesen Dateien auskennen und sie strukturiert in verschiedenen Ordnern verwalten. Wer hastig arbeitet, wird Müll produzieren. Das bestätigt sich vor allem dann, wenn man viele Tausend oder Millionen Dateien zu verwalten hat. Tragen Sie es also mit Fassung, achten Sie darauf, wie sich die Flash-Oberfläche verändert und haben Sie eine Menge Spaß.

49

Grundlagen

1.7

Workshop

F&A F

Wenn ich die Leertaste drücke, um das Hand-Werkzeug zu erhalten, und es dann nach oben oder links bewege, kann ich nicht nach links oder oben über die Bühne hinaus kommen. Warum ist das so? A

F

In den meisten Fällen ist ANSICHT / ARBEITSBEREICH nicht ausgewählt. Sie können nur den Bereich außerhalb der Bühne sehen, wenn diese Option eingeschaltet ist (ich empfehle Ihnen, diese Einstellung standardmäßig ausgewählt zu lassen).

Irgendwie ist meine Zeitleiste verschwunden. Wie erhalte ich diese zurück? A

Es ist ganz einfach, die Zeitleiste wieder sichtbar zu machen: Wählen Sie einfach ANSICHT / ZEITLEISTE. Die Zeitleiste ist das einzige Fenster, das Sie über das ANSICHT-Menü öffnen können. Andere Fenster finden Sie im FENSTER-Menü.

Übungsaufgaben Diese Übungsaufgaben wurden erstellt, um Ihr Wissen zu testen, das Sie sich in diesem Kapitel angeeignet haben. 1. Wie öffnet und bearbeitet man eine .swf-Datei? a. Das kann man nicht, und wenn man keine Sicherheitskopie der .fla-Datei besitzt, hat man Pech. b. Man benutzt einfach das Menü DATEI / ÖFFNEN. c. Man kann sie über das Menü DATEI / IMPORTIEREN importieren. 2. Wie kann man die Animation dazu bringen, wirklich schnell abzulaufen? a. Man schraubt die Bildrate im Dialogfeld Filmeigenschaften hoch. b. Man trickst den Betrachter durch althergebrachte Animationstechniken aus. c. Man spielt den Film ganz einfach auf dem schnellsten Computer ab, den man finden kann. 3. Was ist die Standard-Einheit im Bereich Internetseite und Multimedia? a. Zoll b. Zentimeter c. Bildpunkte

50

Malen und Zeichnen

2

Malen und Zeichnen

Ob Sie es glauben oder nicht, Flash erblickte das Licht der Welt als Zeichensoftware. Der Programmierer von Flash wollte eine »natürlichere« Zeichenumgebung entwickeln. Natürlich hat sich Flash zu einem Animations-Werkzeug weiterentwickelt und da man Bilder animiert, wurde sofort vorgesehen, dass man diese direkt in Flash zeichnen kann. In diesem Kapitel werden Sie in die grundlegenden Zeichentechniken von Flash eingeführt – stellen Sie sich das als »Basis-Training« vor. Da es hier sehr viele Themen abzudecken gilt, werden Sie an diesem Kapitel wahrscheinlich etwas länger lesen, als an anderen. Auch wenn die Länge des Kapitels etwas anderes vermuten lässt, werden wir noch nicht praktisch arbeiten – Sie werden vielmehr die Chance haben, die Werkzeuge auszuprobieren. Wenn Sie bisher nur wenig oder gar keine Erfahrung im Erstellen von Computergrafiken haben, können Sie sich besonders glücklich schätzen! Flash ist so einzigartig, dass es umso besser ist, je weniger Sie wissen – Sie müssen Ihr Gehirn nur wie einen Schwamm arbeiten lassen, der alle Informationen aufsaugt. Sollten Sie schon Erfahrung mit Computergrafik haben, versuchen Sie alles zu vergessen, was Sie bisher von anderen Zeichenprogrammen kennen, und fangen Sie bei Null an. In diesem Kapitel werden Sie 쐽

lernen, wie man in Flash malt und zeichnet,

쐽

den Unterschied zwischen Linien und Füllungen kennen lernen,

쐽

lernen, wie man geometrisch perfekte Formen in Flash erzeugt. Bei den in Flash erzeugten Grafiken handelt es sich um so genannte Vektorgrafiken (im Gegensatz zu Rastergrafiken, auch Bitmaps genannt). Bei Rastergrafiken speichert der Computer Informationen für jeden einzelnen Bildpunkt ab, wobei Vektorgrafiken lediglich mathematische Funktionen enthalten, mit denen man die Muster erzeugen kann. Ein Vektorkreis wird also mit der mathematischen Formel für einen Kreis dargestellt. Aus diesem Grund sind VektorDateien sehr klein (und können somit sehr schnell heruntergeladen werden) und außerdem kann man diese sehr einfach an eine neue Größe anpassen (der Radius eines Kreises könnte zum Beispiel geändert werden). Allerdings erkennt man bei Vektorgrafiken, dass es sich um Computergrafiken handelt, da sehr klare Linien und feste Füllfarben verwendet werden. Nicht so in Flash. Wenn Sie erst einmal ein Gefühl für das Zeichnen mit Flash bekommen haben, werden Sie verstehen, warum Macromedia Flash »Vektor-Ton« genannt hat – es handelt sich im Innern um ein Vectorformat, allerdings können Sie es so natürlich modellieren, als ob es sich um Ton handelte.

52

Auf der Bühne malen

2.1

Auf der Bühne malen

Sicherlich wissen Sie noch aus dem letzten Kapitel, dass alles, was das Publikum ansehen soll, auf die Bühne gemalt werden muss. Manchmal soll eine Grafik außerhalb der Bühne starten und in diese hinein animieren. Wenn Sie außerhalb der Bühne zeichnen wollen, muss ANSICHT / ARBEITSBEREICH aktiviert sein. Diese Einstellungen sollten Sie auch unverändert lassen, aber immer im Hinterkopf behalten, dass der graue Bereich für den Betrachter später nicht sichtbar sein wird.

2.2

Werkzeuge

Standardmäßig sollten die Zeichen-Werkzeuge auf der linken Seite des Bildschirms angezeigt werden (siehe Abbildung 2.1). Sollte das nicht der Fall sein, benutzen Sie bitte FENSTER / WERKZEUGE.

Abbildung 2.1: Die Zeichen-Werkzeuge von Flash scheinen auf den ersten Blick recht einfach zu sein. Da die meisten von ihnen aber mit zusätzlichen Funktionen versehen sind, trügt der Schein ein wenig.

Wenn Sie auf ein Werkzeug klicken, wird dieses ausgewählt. Alternativ dazu können Sie auch die Kurztasten-Kombination drücken. Wenn Sie die Maus über einem Werkzeug bewegen, wird nach kurzer Zeit die Kurztasten-Kombination angezeigt. Wenn Sie die Maus beispielsweise über das Pfeil-Werkzeug bewegen, wird Pfeil-Werkzeug (V) angezeigt. Wenn Sie also die Taste (V) betätigen, wird das Pfeil-Werkzeug ausgewählt. (Probieren Sie es aus, indem Sie zunächst ein anderes Werkzeug aktivieren und dann die Taste (V) drücken.)

53

Malen und Zeichnen

Ansicht-Werkzeuge Die beiden Ansicht-Werkzeuge (Hand-Werkzeug und Vergrößerungs-Werkzeug) beeinflussen Ihre Zeichnung nicht. Sie werden lediglich dazu benötigt, um Ihnen bei der Ansicht Ihrer Zeichnung behilflich zu sein. In der folgenden Aufgabe führe ich Sie durch ein Szenario, in dem Sie beide Werkzeuge verwenden können.

Aufgabe: Benutzen Sie die Ansicht-Werkzeuge, um besser sehen zu können. In dieser Aufgabe werden wir sowohl das Hand-Werkzeug als auch das VergrößerungsWerkzeug kennen lernen. Folgen Sie diesen Schritten: 1. Da wir bisher noch nichts gezeichnet haben, verwenden wir wieder eines der vielen Beispiele, die mit Flash 5 ausgeliefert wurden. Bitte wählen Sie HILFE / BEISPIELE / WÜRFEL. 2. Sie können das Bild vergrößern, um Ihre Zeichnung haargenau zu inspizieren oder zu verändern. Klicken Sie auf das Vergrößerungs-Werkzeug (es sieht wie eine Lupe aus). Beachten Sie, dass weitere Knöpfe im Bereich Optionen erscheinen, wenn Sie das Vergrößerungs-Werkzeug auswählen, wie bei vielen anderen Werkzeugen auch. Sie sollten nun zwei weitere Lupen im Optionsbereich sehen (siehe Abbildung 2.2).

Abbildung 2.2: Das VergrößerungsWerkzeug besitzt zwei Optionen: Vergrößern und Verkleinern.

54

Werkzeuge

3. Stellen Sie sicher, dass Vergrößern ausgewählt ist (der Knopf mit dem Pluszeichen) und klicken Sie dann auf den roten Punkt in einem der beiden Würfel. Klicken Sie einige Male und Sie werden die Ansicht immer mehr vergrößern. 4. Wenn Sie eine sehr starke Vergrößerung gewählt haben, wird wahrscheinlich der größte Teil der Bühne außerhalb des Sichtfeldes liegen. Selbstverständlich können Sie die Bildlaufleisten am unteren und rechten Rand verwenden, um einen anderen Teil der (nun sehr großen) Bühne zu betrachten. Sie können aber auch das Hand-Werkzeug verwenden. Wählen Sie bitte die Hand aus und halten Sie die linke Maustaste gedrückt, während Sie die Maus bewegen. Sie werden sehen, wie sich der sichtbare Ausschnitt bewegt. 5. Nun können wir die Ansicht wieder verkleinern. Wählen Sie wieder das Vergrößerungs-Werkzeug. Denken Sie aber daran, die Verkleinerungsoption auszuwählen (die Lupe mit dem Minuszeichen). Klicken Sie einfach und Sie werden die Ansicht verkleinern. Diese Aufgabe mag sehr einfach ausgesehen haben, aber es gibt noch mehr, das Sie wissen sollten. Immer, wenn Sie ein Ansicht-Werkzeug verwenden, wird nichts an Ihrer FlashDatei verändert. Sie betrachten Ihren Film nur aus einer anderen Perspektive. Im Menü ANSICHT stehen Ihnen die meisten dieser Funktionen auch zur Verfügung. Und auch hier wird Ihre Datei nicht verändert.

Abbildung 2.3: Der exakte Vergrößerungswert wird stets unten links auf der Bühne angezeigt.

Sie haben gerade die Vergrößerungsoption des Vergrößerungs-Werkzeugs verwendet, und einfach auf die Bühne geklickt. Eine andere Möglichkeit, einen Bildausschnitt zu vergrößern, besteht darin, auf eine Stelle zu gehen, mit der Maus (bei gedrückter Maustaste) ein Rechteck aufzuspannen und somit den neuen Vergrößerungsausschnitt festzulegen. In unserer Beispiel-Datei könnten Sie beispielsweise einfach einen Rahmen um einen der beiden Würfel aufspannen, um diesen direkt als neuen Vergrößerungsausschnitt zu markieren. Sie sehen immer den aktuellen Vergrößerungsgrad unten links in der Vergrößerungsanzeige (siehe Abbildung 2.3); hier können Sie auch wieder zu einer hundert-

55

Malen und Zeichnen

prozentigen Ansicht zurückkehren. Ein weiterer schneller Weg zu einer Ansicht von 100% ist ein Doppelklick auf das Vergrößerungs-Werkzeug (nicht die Vergrößerungs- oder Verkleinerungsoption, sondern das Haupt-Vergrößerungs-Werkzeug). Da wir gerade von schnellen Techniken reden, sei erwähnt, dass sowohl das Vergrößerungs- als auch das Hand-Werkzeug eine »Schnellauswahlfunktion« besitzen. Das heißt, wenn Sie beispielsweise ein anderes Werkzeug benutzen, können Sie (____) drücken und gedrückt halten, um mit dem Hand-Werkzeug zu arbeiten. Wenn Sie die Taste dann loslassen, wird automatisch wieder zurück zum alten Werkzeug gewechselt. Wenn Sie (Strg)+(____) drücken, erhalten Sie die Vergrößerungsoption des Vergrößerungs-Werkzeugs. Wenn Sie (Strg)+(ª)+(____) drücken, wechseln Sie zur Verkleinerungsoption. Diese Vorgehensweise ermöglicht es Ihnen, sehr schnell und kurzfristig ein anderes Werkzeug zu wählen, ohne zur Werkzeugleiste wechseln zu müssen.

Erschaffende Werkzeuge Auch wenn sich die Ansichts-Werkzeuge als sehr nützlich erwiesen haben, verändern Sie Ihren Flash-Film nicht. Wenn Sie allerdings in Flash etwas darstellen wollen, wollen Sie wahrscheinlich ein Bild einfügen, etwas ändern, das Sie bereits gemalt haben, oder sogar etwas löschen, was Sie bisher gezeichnet haben. Schauen wir uns zuerst Möglichkeiten an, etwas einzufügen. Damit erzeugen wir etwas, das Sie später verändern oder auch löschen können. Betrachten wir zuerst alle Werkzeuge einzeln und analysieren später, wie sie zusammenarbeiten können.

Linien zeichnen Es gibt zwei Werkzeuge, die einzig und allein für das Zeichnen von Linien zuständig sind: das Linien-Werkzeug und das Bleistift-Werkzeug. Man kann die Linien mit einer Strichfarbe, einer Strichdicke und einer Strichart versehen. Das ist recht interessant, da die geometrische Definition einer Linie – der kürzeste Weg zwischen zwei Punkten – nichts über Farben, Dicke oder Stil enthält. Am besten stellen wir uns eine Linie so vor: Es handelt sich um eine unendlich lange, dünne Linie, der wir eine Farbe, Dicke (oder Breite) und einen Stil (wie zum Beispiel gestrichelt, gepunktet oder ausgefüllt) zuweisen. Man kann jedes der Linien-Attribute zu jeder Zeit verändern, ohne die zu Grunde liegende Linie anzutasten. Soviel zur Theorie von Linien! In der folgenden Aufgabe werden Sie welche erstellen.

Aufgabe: Zeichnen und verändern Sie Linien! In dieser Aufgabe werden Sie erstmals Linien zeichnen und manipulieren. Es folgen die einzelnen Schritte:

56

Werkzeuge

1. Erstellen Sie eine neue Datei. Zuerst sollten Sie das Bedienfeld Linie in eine gut sichtbare Position bringen, da die Linien verschiedene Attribute besitzen können. Sollte das Linie-Bedienfeld nicht sichtbar sein, wählen Sie FENSTER / BEDIENFELD / LINIE. Dann ziehen Sie das Bedienfeld auf eine freie Position (siehe Abbildung 2.4).

Abbildung 2.4: Mit dem Bedienfeld Linie können Sie die Attribute von Linien verändern.

2. Das Linien-Werkzeug zeichnet gerade Linien. Wählen Sie es aus. Ihr Cursor verändert sich zu einem Fadenkreuz. Klicken und bewegen Sie die Maus bei gedrückter Maustaste, um eine Linie zu erstellen. Vielleicht haben Sie schon bemerkt, dass manchmal ein dunkler Ring beim Ziehen erscheint. Dabei handelt es sich um eine Art, die Flash beim Linienziehen unterstützt, denn wenn die AUSRICHTEN-Option im Menü ANSICHT aktiviert ist, können Sie leichter absolut gerade Linien zeichnen. 3. Sobald Sie die Linienart, -farbe oder -dicke verändern, werden diese Einstellungen für alle Linien angewendet, die Sie danach zeichnen. Wählen Sie bitte eine andere Farbe. Ändern Sie nun die Dicke. Zeichnen Sie jetzt eine andere Linie. 4. Wenn Sie die Attribute einer Linie verändern wollen, die Sie bereits gezeichnet haben, wählen Sie zuerst das Pfeil-Werkzeug aus und klicken Sie auf die Linie. Sobald Sie eine oder mehrere Linien ausgewählt haben, werden alle Änderungen, die Sie im Bedienfeld Linie vornehmen, auf die markierten Linien angewandt.

57

Malen und Zeichnen

5. Wählen Sie jetzt das Freihand-Werkzeug aus. Beachten Sie, dass dieses Werkzeug über die Option Stiftart verfügt. Klicken Sie bitte auf den Knopf, der im Optionsbereich erscheint, um die Stiftart zu verändern (siehe Abbildung 2.5).

Abbildung 2.5: Die Stiftart ist eine Option, mit der Sie festlegen können, wie sich das Freihand-Werkzeug verhalten wird.

6. Mit der Option Begradigen werden auch runde Linien zu geraden umgewandelt. Versuchen Sie einmal den Buchstaben »S« zu zeichnen. Er wird mit Sicherheit sehr kantig aussehen. Wenn Sie allerdings den Buchstaben »Z« zeichnen, wird dieser schon eher danach aussehen, was Sie sich vorgestellt haben. Im weiteren Verlauf dieses Kapitels werden wir noch sehen, wie man die Sensibilität einstellt. Anhand dieser beiden Buchstaben kann man allerdings schon sehr gut sehen, wie der Stiftmodus Begradigen funktioniert. 7. Wählen Sie nun die Option Glätten. Zeichnen Sie bitte wieder ein »S« und ein »Z«. Das »S« sieht nun schon viel besser aus. Allerdings weist das »Z« nun Kurven auf, wo zuvor keine waren. Diese Optionen sind sehr nützlich, wenn Sie der Meinung sind, dass Ihre handgezeichneten Skizzen zu unklar aussehen. 8. Der Modus Tinte wird in den meisten Fällen genau das zeichnen, was Sie vorgeben. Flash wird allerdings Ihre Skizze geringfügig ausrichten, um die Dateigröße zu reduzieren. Eine gerade Linie verbraucht einfach weniger Speicher als eine Kurve und ist somit später bei der Übertragung schneller. Sämtliche Einstellungen, die Sie im Bedienfeld Linie vorgenommen haben, beeinflussen sowohl Zeichnungen, die Sie mit dem Freihand-Werkzeug erstellt haben, als auch Linien, die mit dem Linien-Werkzeug erstellt wurden. Die einzige Option im Bedienfeld Linie,

58

Werkzeuge

mit der wir noch nicht gearbeitet haben, ist der Linienstil. Das Auswahlmenü zeigt Ihnen für jeden Linienstil eine Vorschau an. Die Einstellung Massiv ist gleichbedeutend mit einer Haarlinie, wobei sie für die Haarlinie allerdings die kleinste mögliche Liniendicke erhält. Die anderen, sehr ausgefallenen Linienarten sollten mit extremer Vorsicht genossen werden. Der Grund dafür ist ganz einfach: je zufälliger eine Struktur aussieht, desto stärker wächst die Dateigröße. Näheres zu diesem Thema lernen wir im Kapitel 20. Sie sollten nun allerdings schon einmal im Hinterkopf behalten, dass diese Arten von Linien eine wesentlich größere Datei erzeugen. Abschließend sei erwähnt, dass der kleine Optionspfeil oben rechts im Linie-Bedienfeld ein weiteres Fenster öffnet, in dem Sie Ihre eigenen Linienstile erzeugen können. Dabei stehen Ihnen verschiedene Attribute zur Verfügung (siehe Abbildung 2.6). Mit diesem Hilfsmittel kann man sicherlich sehr witzige Effekte erzielen, allerdings gilt auch hier, dass die Dateigröße dadurch überproportional anschwillt.

Abbildung 2.6: Im Dialogfeld Linientyp können Sie alle Eigenschaften eines Linienstils einstellen.

Abbildung 2.7: In vielen Bedienfeldern steht ein Optionspfeil zur Verfügung, der ein weiteres Menü öffnet.

Da wir gerade beginnen, die Bedienfelder von Flash zu erkunden, sollten Sie lernen mit dem Optionspfeil umzugehen. Die meisten Bedienfelder besitzen zusätzliche Menüs, die man mit dem Pfeil oben rechts im Bedienfeld ansprechen kann (siehe Abbildung 2.7). Dabei wird ein Menü geöffnet, das in direktem Zusammenhang zum Bedienfeld steht. Ich sage immer, dass es sich um den »mysteriösen Pfeil« handelt – man weiß nie, was sich dahinter verbirgt,

59

Malen und Zeichnen

allerdings findet man hier sehr oft nützliche Hilfsmittel. In diesem Buch werden Sie in Zukunft öfter aufgefordert, ein Objekt zu wählen, das sich im Menü »vom Optionspfeil« befindet.

Füllungen In Flash gibt es nur zwei Arten von Komponenten, aus denen sämtliche Zeichnungen bestehen: die Linien und Füllungen. Manche Zeichnungen bestehen lediglich aus Linien (wie wir sie bisher kennen gelernt haben), allerdings gibt es auch solche, die nur aus Füllungen bestehen oder eine Kombination aus beidem sind. Füllungen und Linien sind unterschiedlich. Linien haben eigentlich keine Dicke (die Liniendicke, die wir bereits kennen gelernt haben, ist nur ein Attribut des Linientyps). Auf der anderen Seite haben Füllungen einen linken, rechten, oberen und unteren Rand. Stellen Sie sich also Linien als das vor, was Sie mit einem spitzen Bleistift zeichnen können, und Füllungen als das Ergebnis eines Textmarker-Einsatzes. Diese Unterschiede gewinnen mehr an Bedeutung, wenn Sie lernen, wie man bereits erstellte Zeichnungen bearbeitet. Es gibt zwei Werkzeuge, mit denen man Füllungen erstellen kann: das Pinsel-Werkzeug und das Farbeimer-Werkzeug. In der nächsten Aufgabe werden wir mit diesen Werkzeugen ein wenig experimentieren.

Aufgabe: Erstellen Sie Füllungen! In dieser Aufgabe werden wir uns mit den Grundlagen und später mit einigen fortgeschrittenen Techniken von Füllungen beschäftigen. Folgen Sie einfach diesen Schritten: 1. Öffnen Sie eine neue Datei und benutzen Sie das Freihand-Werkzeug, um einige große Kreise zu erzeugen. Stellen Sie sicher, dass zumindest einer vollkommen geschlossen, ein anderer beinahe geschlossen und ein dritter offensichtlich nicht geschlossen ist (siehe Abbildung 2.8).

Abbildung 2.8: Drei handgezeichnete Kreise, die wir ausfüllen werden

60

Werkzeuge

2. Wählen Sie das Farbeimer-Werkzeug aus. Beachten Sie, dass drei Knöpfe im Optionsbereich erscheinen: Lückengröße, Füllung sperren und Füllung transformieren (siehe Abbildung 2.9). Zu diesem Zeitpunkt werden wir lediglich den Knopf Lückengröße kennen lernen und die anderen erst in Kapitel 4 betrachten.

Abbildung 2.9: Das FarbeimerWerkzeug besitzt mehrere Optionen. Unter anderem kann man mit Lückengröße die Toleranzgrenze dieses Werkzeugs verändern.

3. Wenn Sie mit dem Farbeimer-Werkzeug auf einen leeren Bereich der Bühne klicken, passiert gar nichts. Man kann mit diesem Hilfsmittel geschlossene Figuren mit der ausgewählten Farbe (die Füllfarbe sehen Sie im Abschnitt Farben in der Werkzeugkiste) ausfüllen. Außerdem kann dieses Werkzeug die Füllung bereits ausgefüllter Objekte verändern. Stellen Sie bitte große Lücken schließen mit dem Knopf Lückengröße ein. Nun sollten Sie alle Kreise ausfüllen können, auch wenn diese nicht komplett geschlossen sind. 4. Wählen Sie nun das Pinsel-Werkzeug aus und zeichnen Sie damit einen Strich. Da Sie mit dem Pinsel gearbeitet haben, haben Sie nun eine Füllung (keine Linie) erstellt, obwohl diese wie eine dicke Linie aussehen mag. 5. Wählen Sie nun eine andere Füllfarbe. Klicken Sie auf den Farbeimer und füllen Sie die Figur, die Sie mit dem Pinsel erstellt haben, mit einer neuen Farbe aus. Sie sehen, dass man mit dem Farbeimer-Werkzeug nicht nur geschlossene Figuren ausfüllen kann, sondern auch die Farbe bereits erstellter Füllungen verändern kann. 6. Wenden wir uns nun den Optionen des Pinsel-Werkzeuges zu. Die beiden Auswahlfelder in der Mitte scheinen auf den ersten Blick kaum unterschiedlich zu sein, sind in Wirklichkeit aber sehr verschieden. Die obere Auswahl (Pinselgröße) verändert – wie

61

Malen und Zeichnen

der Name schon sagt – die Größe des Pinsels. Auf der anderen Seite verändert das Menü Pinselform die Kontur der Pinselspitze. Wenn Sie beispielsweise eine abgewinkelte Pinselspitze verwenden, können Sie ganz einfach Schriften mit einem besonders künstlerischen Aussehen erzeugen (siehe Abbildung 2.10). Der Knopf Füllung sperren wird im 4. Kapitel behandelt. Somit bleibt uns noch die Option Pinselart, die wir im nächsten Schritt genauer betrachten.

Abbildung 2.10: Mit der Option Pinselform lassen sich sehr künstlerische Zeichnungen erstellen.

7. Die Abbildung 2.11 demonstriert jede Pinselart. Lassen Sie uns eine ausprobieren. Wählen Sie den Modus Innen malen, um damit ein wenig zu experimentieren. Verwenden Sie dazu entweder die geschlossenen Kreise, die Sie zuvor gezeichnet haben, oder malen Sie ein paar neue mit dem Freihand-Werkzeug. Stellen Sie nun sicher, dass Sie wieder das Pinsel-Werkzeug ausgewählt haben (beachten Sie, dass die Pinseleinstellungen so geblieben sind, wie Sie sie verlassen haben); zeichnen Sie nun innerhalb eines Ihrer Kreise. Versuchen Sie danach außerhalb der Kreise zu malen. Wenn Sie innerhalb einer geschlossenen Fläche starten, wird im Modus Innen malen keine Farbe außerhalb der Fläche aufgetragen. Wenn Sie Innen malen gewählt haben und versuchen, außerhalb einer solchen Fläche mit dem Malen zu beginnen, wird nichts passieren. Lassen Sie mich noch ein paar Worte über wichtige Eigenschaften verlieren, die sämtliche Werkzeuge betreffen. Zuerst einmal haben verschiedene Hilfsmittel zusätzliche »Optionen«, die im unteren Teil des Werkzeugkastens sichtbar werden. Sollten Sie einmal eine Option nicht wiederfinden, die Sie zuvor genutzt haben, müssen Sie sich merken, für welches Werkzeug diese Option zur Verfügung stand. Diese Angelegenheit ist allerdings nicht so frustrierend, wie Sie vielleicht vermuten, da sämtliche Attribute, die Sie nach dem Zeichenvorgang verändern würden, zusätzlich in verschiedenen Bedienfelder zur Verfügung stünden. Sie finden lediglich die Optionen, die Sie auswählen sollen, bevor Sie zeichnen, im Optionsbereich der Werkzeugkiste.

62

Werkzeuge

Abbildung 2.11: Das Pinsel-Werkzeug hat viele verschiedene Modi. Im Beispiel in Auswahl malen habe ich zuvor die Fenster ausgewählt. Das Beispiel innen malen funktioniert nur, wenn man innerhalb des Hauses mit dem Zeichnen beginnt.

Eine weitere Eigenschaft, die ich anmerken will, ist: Nicht selten lassen sich die gleichen Ergebnisse auf verschiedene Weisen erzeugen. Wir haben beispielsweise schon das Kommando VERGRÖSSERN im Menü ANSICHT, das Vergrößerung-Werkzeug, und die Vergrößerungs-Anzeige auf der Bühne kennen gelernt. Genauso kann man die Füllfarbe über die Werkzeugkiste, das Bedienfeld Füllung, das Bedienfeld Farbmischer und zusätzlich verschiedene andere Stellen verändern. Die Tatsache, dass Sie bestimmte Funktionen verschieden ausführen können, unterstützt Sie darin, Ihren eigenen Arbeitsstil zu finden.

Mit Linien und Füllungen Figuren zeichnen und verändern Wenn Sie entweder das Ellipsen- oder Rechteck-Werkzeug benutzen, erstellen Sie eine Figur, die sowohl Linien als auch Füllungen enthält. Dabei hat die Füllung die aktuell eingestellte Füllfarbe und die Linien besitzen alle Eigenschaften des Linien-Bedienfeldes. Sie können auch Rechtecke oder Ellipsen erzeugen, die keine Füllungen enthalten, indem Sie Keine Farbe einstellen (siehe Abbildung 2.12). Auf die gleiche Weise können Sie eine Figur ohne Linie erzeugen, wenn Sie Keine Farbe in den Linieneinstellungen als Linienfarbe verwenden. Beachten Sie aber, dass Sie gar nichts zeichnen werden, wenn Sie sowohl die Füllfarbe als auch die Linienfarbe auf Keine Farbe gestellt haben. Diese Werkzeuge sind wirklich selbst erklärend. Allerdings gibt es im Rechteck-Werkzeug eine Option, die wir etwas genauer betrachten sollten: der Eckradius. Damit kann man einem Rechteck abgerundete Ecken zuweisen. Ellipsen oder Rechtecke zu erzeugen ist sehr einfach. In der folgenden Aufgabe werden wir auf verschiedenen Wegen solche Figuren zeichnen und verändern.

63

Malen und Zeichnen

Abbildung 2.12: Wenn man das Ellipsen- oder Rechteck-Werkzeug ausgewählt hat, ist eine Option der Füllfarbe keine Farbe (die als roter Schrägstrich angezeigt wird).

Aufgabe: Zeichnen und bearbeiten Sie Figuren! Diese Aufgabe fasst Ihr Wissen zusammen, das Sie bereits über Füllungen und Linien erworben haben. Allerdings werden Sie noch einige weitere Tricks dazulernen. Folgen Sie einfach diesen Schritten: 1. Setzen Sie die Liniendicke auf einen hohen Wert (5 oder höher). 2. Wählen Sie eine beliebige Farbe sowohl für die Linie als auch für die Füllung – allerdings nicht keine Farbe. 3. Verwenden Sie das im Ellipsen-Werkzeug, um einen Kreis zu zeichnen. Ein Kreis ist nichts anderes als eine Ellipse, welche die gleiche Breite und Höhe hat. Wenn Sie einen Kreis zeichnen wollen, halten Sie einfach (ª) gedrückt, während Sie mit dem Ellipsen-Werkzeug arbeiten. 4. Verändern Sie nun die Füllfarbe und zeichnen Sie ein Quadrat (indem Sie (ª) drücken, während Sie das Rechteck-Werkzeug verwenden). 5. Wählen Sie nun den Farbeimer aus und klicken Sie in den Kreis, den Sie gezeichnet haben. Wie Sie sehen, wird die Füllfarbe des Kreises auf die aktuell eingestellte Farbe gesetzt. Der Farbeimer ist sehr einfach zu verstehen – er erstellt entweder Füllungen oder verändert sie.

64

Werkzeuge

6. Betrachten wir ein anderes Werkzeug – das Tintenfass-Werkzeug. Wählen Sie dieses Werkzeug aus und verändern Sie die Linienfarbe. Klicken Sie nun erneut auf den von Ihnen gezeichneten Kreis. Wie Sie sehen, verändert sich die Linienfarbe. Das ist wirklich bemerkenswert, denn mit dem Tintenfass-Werkzeug werden lediglich Linien verändert. Sie müssen also nicht extrem vorsichtig vorgehen und auch nicht darauf achten, wohin Sie klicken. Normalerweise können Sie irgendwo auf eine Figur klicken, wobei Sie dann aber nur die Linien verändern werden. 7. Das Tintenfass-Werkzeug verändert nicht nur die Farbe einer Linie. Wählen Sie im Linie-Bedienfeld eine andere Liniendicke aus – sagen wir einmal 10. Da Sie nun schon einmal an Ort und Stelle sind, wählen Sie doch direkt einen anderen Linienstil aus. Klicken Sie erneut auf den Kreis. Wie Sie sehen, werden sämtliche Linieneigenschaften auf die Kreislinie angewandt. 8. Genauso wie das Farbeimer-Werkzeug Füllungen erzeugen kann, kann man mit dem Tintenfass-Werkzeug Linien erzeugen, wo zu Anfang noch keine waren. Verwenden Sie das Pinsel-Werkzeug, um schnell eine Figur zu zeichnen. Aktivieren Sie nun erneut das Tintenfass-Werkzeug und klicken Sie auf die Füllung, die Sie soeben erstellt haben. Sie haben nun eine Linie hinzugefügt, welche die Füllung umgibt. Diese Aufgabe hat noch einmal gezeigt, dass es zwei fundamentale Komponenten von Figuren gibt, die Sie erstellen können – die Linien und Füllungen – wobei jede über einen anderen Werkzeugsatz verfügt. Sowohl das Ellipsen-Werkzeug als auch das RechteckWerkzeug können zur gleichen Zeit Füllungen und Linien erstellen. Um eine neue Füllung zu erstellen oder bereits auf dem Bildschirm befindliche Füllungen zu verändern, verwenden Sie das Pinsel-Werkzeug und das Farbeimer-Werkzeug. Linien erzeugen Sie mit dem Freihand-Werkzeug, oder dem Linien-Werkzeug und ändern die Charakteristiken mit dem Tintenfass-Werkzeug. Mit dem Stift-Werkzeug werden in erster Linie Linien erzeugt, allerdings werden von Ihnen gezeichnete geschlossene Figuren automatisch mit der eingestellten Füllfarbe ausgefüllt. Im weiteren Verlauf dieses Kapitels werden wir noch sehen, wie man diese Figuren verändert (und auch, wie man die Füllungen entfernt). Wenn Sie das Stift-Werkzeug verwenden, können Sie Ankerpunkte und gerade Linien erstellen. Allerdings können Sie damit auch Kurven erzeugen. Wenn Sie anstatt eines normalen Klicks die Maustaste danach gedrückt halten und dann die Maus bewegen, erzeugen Sie eine Kurve. Dabei erstellen Sie in der Richtung, in der Sie die Maus bewegen, eine Tangente zu Ihrer Kurve. Die Distanz zu der Linie sagt dabei aus, wie stark Ihre Kurve ausschlagen wird. Sollte das für Sie jetzt schon einleuchtend sein, wäre ich sehr überrascht. Sie sollen ganz einfach ein wenig damit experimentieren, um dieses Verhalten besser zu verstehen. In der nächsten Aufgabe werden Sie dazu ausreichend Gelegenheit bekommen.

65

Malen und Zeichnen

Aufgabe: Verwenden Sie das Stift-Werkzeug! In dieser Aufgabe werden Sie kontrollierte Kurven erzeugen. Folgen Sie wie gewohnt den folgenden Schritten: 1. Zu Beginn werden wir einen Diamanten zeichnen. Wählen Sie dazu das Stift-Werkzeug aus. Klicken Sie am unteren Rand der Bühne (das wird die untere Spitze des Diamanten), danach weiter oben und weiter links (linke Ecke des Diamanten) und genauso für die obere und rechte Spitze des Diamanten. Danach klicken Sie wieder in der Nähe des unteren Startpunktes, um die Figur zu schließen. Dabei sehen Sie einen kleinen Kreis am Cursor (siehe Abbildung 2.13). Wir werden die verschiedenen Veränderungen des Cursors im Verlauf dieses Kapitels noch genauer besprechen. In diesem Moment reicht es, wenn Sie wissen, dass ein kleiner Kreis im Cursor andeutet, das die Figur, die Sie begonnen haben, geschlossen wird, wenn Sie an dieser Stelle klicken. Klicken Sie also, um die Figur zu schließen. Sie wird nun mit der aktuellen Füllfarbe ausgefüllt.

Abbildung 2.13: Wenn der Cursor einen Kreis enthält, wird damit angedeutet, dass die Figur bei einem Klick geschlossen wird.

2. Sie können ebenso eine »V«-Kurve erzeugen. Klicken Sie dazu einmal, um die obere linke Ecke festzulegen, dann einmal für die untere Spitze und erneut für die rechte Ecke. Doppelklicken Sie, um die Figur abzuschließen (auch wenn sie nicht geschlossen ist). Wenn Sie nun woanders auf die Bühne klicken, beginnen Sie eine neue Figur. Sie können die Zeichnung auch abschließen, indem Sie einfach ein anderes Werkzeug auswählen. 3. Nun werden wir versuchen, eine gebogene Linie zu zeichnen. Klicken Sie erneut auf das Stift-Werkzeug (um sicherzustellen, dass Sie eine neue Figur zeichnen), klicken Sie dann einmal, halten dabei aber die Maustaste gedrückt und bewegen die Maus nach links.

66

Werkzeuge

4. Sie sind gerade dabei, einen Ankerpunkt für die Kurve festzulegen, die Sie erzeugen wollen. Klicken Sie dazu und bewegen Sie die Maus bei gedrückter Maustaste, bevor Sie fortfahren. Jetzt können Sie die Maustaste wieder loslassen. Klicken Sie nun etwas oberhalb und rechts vom ersten Punkt und halten Sie die Maustaste gedrückt. Wenn Sie nun (immer noch bei gedrückter Maustaste) die Maus nach rechts bewegen, sehen Sie, wie Ihre horizontale Tangente eine Kurve erzeugt, wie Sie sie in Abbildung 2.14 sehen.

Abbildung 2.14: Wenn Sie klicken, um einen Ankerpunkt zu erzeugen, und dabei (mit gedrückter Maustaste) die Maus bewegen (hier nach rechts), erzeugen Sie eine Tangente für die Kurve.

5. Wenn Sie die Maustaste weiterhin gedrückt halten und den Cursor direkt über den zweiten Punkt bewegen, werden Sie feststellen, dass die Kurve anders verläuft, da Sie auch eine andere Tangente erzeugen (siehe Abbildung 2.15).

Abbildung 2.15: Die Kurve verändert sich in Abhängigkeit von der Ausrichtung der Tangente (hier vertikal).

6. Abschließend können Sie (immer noch bei gedrückter Maustaste) den Abstand zum Ankerpunkt vergrößern oder verkleinern. Dabei wird der Winkel der Kurvenkrümmung verändert. Damit Ihre Hand nicht übermüdet, sollten Sie nun weiter rechts (etwa auf der gleichen Höhe des zweiten Punktes) doppelklicken, um die Kurve fertig zu stellen. Auch wenn diese Linie drei Punkte enthält, ist nur die Verbindung zwischen dem ersten und dem zweiten Punkt gebogen. Das ist so, weil Sie nur beim zweiten Punkt die Maus bei gedrückter Maustaste bewegt haben.

67

Malen und Zeichnen

Sie werden noch viel mehr über das Stift-Werkzeug (und das verwandte UnterauswahlWerkzeug) im weiteren Verlauf dieses Kapitels kennen lernen, wenn wir bestehende Zeichnungen verändern werden.

Texte erstellen Damit Sie auch noch Grafikelemente kennen lernen, die weder Linien noch Füllungen enthalten, will ich Texte einführen. Wenn Sie einen Text erstellen wollen, klicken Sie einfach auf das Text-Werkzeug. Klicken Sie nun auf die Bühne und beginnen Sie zu tippen. Sie können die Schriftart, den Schriftstil und die Textfarbe verändern, wenn Sie den Text bereits erzeugt haben. Es macht Sinn, wenn Sie Formatierungen erst nach der Texteingabe vornehmen, weil Sie nur so sehen können, wie der Text später aussehen wird. Das erleichtert die Ausrichtung ungemein. Die Texterstellung war in Flash noch nie so einfach oder besser ausgeklügelt. In der folgenden Aufgabe werden Sie die wichtigsten Manöver ausführen.

Aufgabe: Erstellen und formatieren Sie Text! In dieser Aufgabe werden Sie die Texterstellung in Flash erkunden. Es folgen die Schritte: 1. Wählen Sie das Text-Werkzeug aus, klicken Sie dann auf die Bühne und tippen Sie das Wort Hallo ein. 2. Diese »Klick-und-Tippen«-Technik erweitert den Rahmen des Textblocks automatisch so weit, wie Sie ihn für den eingegebenen Text benötigen. Dieser Modus wird durch einen Kreis an der oberen rechten Ecke des Textblocks angezeigt (siehe Abbildung 2.16). Wenn Sie den Kreis anklicken und mit der Maus bewegen, wird er sich in ein Quadrat verwandeln, das anzeigt, dass der Rahmen festgestellt ist. Sie können auf das Quadrat doppelklicken, um zum ursprünglichen Modus zurückzukehren.

Abbildung 2.16: Mit dem Kreis oben rechts kann man den Rahmen verändern.

3. Während Sie den Text editieren, können Sie den Rahmen verändern. (Stellen Sie sicher, dass der »I«-Cursor im Textfenster blinkt. Klicken Sie gegebenenfalls in das Textfenster.) Klicken Sie den Kreis an und bewegen Sie ihn, um den Textblock breiter oder schmaler zu gestalten. Wie versprochen verwandelt sich der Rahmen-Einsteller in ein Quadrat, das anzeigt, dass der Text nun bei einer Überlänge umgebrochen wird. Probieren Sie es aus und schreiben Sie einige Zeilen. Sie werden sehen, dass der Text au-

68

Werkzeuge

tomatisch umgebrochen wird, ohne dass Sie (¢) drücken müssen. Nebenbei bemerkt: Wenn Sie beim Erstellen des Textfensters nicht nur geklickt, sonder bei gedrückter Maustaste die Maus bewegt hätten, wäre direkt ein festgestellter Textrahmen aufgespannt worden. Es ist völlig egal, welche Technik Sie verwenden. Sie sollten allerdings immer im Hinterkopf behalten, was die unterschiedlichen Rahmen-Einsteller bedeuten. 4. Da Sie nun Text eingegeben und die Textbegrenzungen festgelegt haben, ist es an der Zeit, den Text zu formatieren. Aktivieren Sie das Pfeil-Werkzeug, um die Texteingabe zu beenden. Der Textblock sollte nun ausgewählt sein. (Ist das nicht der Fall, klicken Sie einmal auf den Text. Es erscheint ein Rechteck um den Text herum.) 5. Öffnen Sie nun das Zeichen-Bedienfeld. Sollte es nicht schon sichtbar sein, können Sie das Symbol mit dem Buchstaben »A« darauf (in der Startleiste) anklicken, um das Bedienfeld einzublenden. Die Standard-Bedienfeldgruppe beinhaltet das Zeichen-Bedienfeld zusammen mit den Textoptionen- und Absatz-Bedienfeldern in angedockter Form. Bitte ändern Sie vorerst nur die Textfarbe, Schriftart und Schriftgröße (siehe Abbildung 2.17). Sie werden sehen, dass diese Optionen ganz einfach zu handhaben sind. Die Vorschau der Schriftarten ist besonders interessant, wenn Sie sich schnell die verschiedenen Schriftarten ansehen wollen.

Abbildung 2.17: Mit dem Zeichen-Bedienfeld können Sie gängige Texteinstellungen (wie zum Beispiel Schriftgröße und -farbe) vornehmen.

69

Malen und Zeichnen

6. Ändern Sie nun den Textstil eines Textabschnittes im Textfenster in Fettdruck oder Kursiv. Dazu wählen Sie zuerst ein paar Wörter oder Buchstaben aus, die Sie verändern wollen. Wenn Sie im Textblock doppelklicken, wird automatisch das Text-Werkzeug aktiviert. Sie können die gewünschten Buchstaben genau wie in jeder Textverarbeitung auswählen (nur klicken und ziehen). Während ein Textabschnitt ausgewählt ist, können Sie Einstellungen im Zeichen-Bedienfeld vornehmen, um nur diesen Text zu formatieren. Wenn Sie die Schriftart ändern wollen, wird die Vorschau den ausgewählten Text in der neuen Schrift anzeigen. Auf diese Weise können Sie in jedem Textblock die Formatierung des Textes sogar buchstabenweise durchführen. 7. Aktivieren Sie nun das Pfeil-Werkzeug und wählen Sie den Textblock aus. Im AbsatzBedienfeld können Sie nun die Textausrichtung zentrieren (siehe Abbildung 2.18). Experimentieren Sie ein wenig mit den anderen Einstellungen wie Rändern, Einrückungen und Zeilenabständen.

Abbildung 2.18: Wenn Sie einen Textblock ausgewählt haben, können Sie im AbsatzBedienfeld die Ausrichtung des Textes verändern (in diesem Fall zentrieren).

Das letzte textbezogene Bedienfeld Textoptionen wird im 15. Kapitel ausführlicher besprochen. Im Moment sollten Sie die Option immer auf Statischer Text eingestellt lassen. Der von Ihnen eingegebene Text wird sich nicht verändern und der Betrachter wird ihn immer in der von Ihnen eingestellten Schriftart sehen (auch wenn diese Schriftart auf seinem Rechner nicht installiert ist). Die Einstellung Auswählbar ermöglicht es dem Anwender, den Text zu markieren und zu kopieren.

70

Objekte auswählen und bearbeiten

In der vorangegangenen Aufgabe haben Sie gelernt, wie man einen Textblock erzeugt und ihn (oder auch nur Teile) formatiert. Ebenso wichtig ist die Verwendung des kleinen Kreises oder Quadrates in der oberen rechten Ecke des Textblocks. Im weiteren Verlauf dieses Kapitels werden Sie lernen, wie man bei Objekten die Breite, die Höhe oder beides verändert. Wenn Sie einen Textblock verbreitern, wird er zwar breiter aussehen, aber die Ränder werden sich nicht verändert haben. Wenn Sie allerdings die Ränder (wie in der letzten Aufgabe) verändern, wird festgelegt, an welcher Stelle die Zeilen umgebrochen werden.

2.3

Objekte auswählen und bearbeiten

Da Sie jetzt wissen, wie man Linien, Füllungen, Figuren (mit Linien und Füllungen) und Text erzeugt, ist es an der Zeit, herauszufinden, wie man diese Objekte bearbeitet. Die Vorgehensweise ist ganz einfach. Wählen Sie das Objekt aus, das Sie bearbeiten wollen und bearbeiten Sie es dann. Die größte Herausforderung dürfte im Moment aber darin liegen, genau das auszuwählen, was Sie verändern wollen. Dieser Abschnitt wird sich mit den Grundlagen beschäftigen. Sie werden im Kapitel 4 aber noch weitere Details kennen lernen.

Auswahl-Werkzeuge Die beiden Basis-Auswahl-Werkzeuge sind das Pfeil- und das Lasso-Werkzeug. Das Unterauswahl-Werkzeug (der weiße Pfeil) wird nur dazu benötigt, einzelne Ankerpunkte (wie sie unter anderem vom Stift-Werkzeug erzeugt werden) auszuwählen. Wenn Sie sich bereits mit dem Stift-Werkzeug vertraut gemacht haben, wird Ihnen auch die Arbeit mit dem Unterauswahl-Werkzeug leicht von der Hand gehen. Andernfalls sollten Sie die Grundlagen noch weiter vertiefen, bevor Sie mit dem Unterauswahl-Werkzeug experimentieren. Sie sollten sich also zuerst auf das Pfeil- und das Lasso-Werkzeug konzentrieren. Das Pfeil-Werkzeug scheint so einfach zu sein, dass es nicht der Rede wert wäre, allerdings ist es in Wirklichkeit sehr mächtig. Sie haben dieses Werkzeug bereits eingesetzt, indem Sie durch einfaches Klicken ein Objekt ausgewählt haben. Das Geheimnis des Pfeil-Werkzeuges ist, dass der Cursor sich verändert und Ihnen so verrät, was passieren wird, wenn Sie klicken. Sie werden in der nächsten Aufgabe anhand einiger einfacher Figuren dieses Werkzeug ausprobieren.

71

Malen und Zeichnen

Aufgabe: Verwenden Sie das Pfeil-Werkzeug, um Figuren auszuwählen und zu bearbeiten! In dieser Aufgabe werden Sie erfahren, wie sich der Cursor verändert, um Sie darüber zu informieren, was passieren wird, wenn Sie klicken. Folgen Sie wie gewohnt diesen Schritten: 1. Verwenden Sie zuerst das Linie-Bedienfeld, um eine sehr große Liniendicke (etwa 5) auszuwählen. Zeichnen Sie dann mit dem Ellipsen-Werkzeug einen Kreis und mit dem Rechteck-Werkzeug ein Quadrat. 2. Aktivieren Sie nun das Pfeil-Werkzeug und bewegen Sie den Cursor in die Mitte des Quadrates. Der Cursor wird nun das Bewegungssymbol (vier Pfeile) anzeigen, um Ihnen mitzuteilen, dass Sie nun klicken und bei gedrückter Maustaste die Füllung verschieben können (siehe Abbildung 2.19).

Abbildung 2.19: Der Bewegungs-Cursor erscheint, wenn man sich über einer Füllung befindet, um anzuzeigen, dass man bei einem Klick die Füllung bewegen wird.

3. Klicken und bewegen Sie die Maus bei gedrückter Maustaste. Sie werden feststellen, dass tatsächlich nur die Füllung des Quadrates bewegt wird. Wählen Sie nun BEARBEITEN / RÜCKGÄNGIG beziehungsweise drücken Sie (Strg)+(Z), um die Füllung wiederherzustellen. Stellen Sie zudem sicher, dass nichts mehr ausgewählt ist, indem Sie irgendwo auf eine freie Stelle der Bühne klicken. 4. Bewegen Sie den Cursor an eine äußere Kante des Quadrates. Der Cursor enthält nun eine Kurve (siehe Abbildung 1.20). Wenn Sie jetzt klicken und die Maus bei gedrückter Maustaste bewegen, werden Sie die Linie verbiegen. Probieren Sie es aus und verbiegen Sie die rechte Kante des Quadrates nach links. Beachten Sie, dass sich die Füllung der gebogenen Linie anpasst. (Achten Sie darauf, dass Sie für diesen Effekt sofort mit dem ersten Klick die Maustaste gedrückt halten müssen. Wenn Sie zuvor schon einmal geklickt haben, wird das eine andere Auswirkung haben.) 5. Stellen Sie wieder sicher, dass nichts ausgewählt ist und bewegen Sie den Cursor in die Nähe der unteren linken Ecke des Quadrates. Wir stellen fest, dass ein Ecksymbol im Cursor erscheint, was bedeutet, dass ein Klick (mit direkt anschließendem Bewegen der Maus bei gedrückter Maustaste) den Eckpunkt verschieben wird (siehe Abbildung 2.21). Probieren Sie es einmal aus.

72

Objekte auswählen und bearbeiten

Abbildung 2.20: Wenn sich der Cursor in der Nähe einer Linie befindet, zeigt er an, dass Sie beim nächsten Klick die Linie verbiegen werden.

Abbildung 2.21: Wenn sich der Cursor in der Nähe einer Ecke befindet, zeigt er wieder ein ganz anderes Symbol. Hier wird angezeigt, dass man den Eckpunkt verschieben kann.

6. Jetzt haben wir kennen gelernt, was passiert, wenn man an verschiedenen Stellen klickt und wie der Cursor uns eine Vorschau darauf gibt. Jetzt werden wir das PfeilWerkzeug dazu verwenden, etwas auszuwählen. Wählen Sie ganz einfach die Kreislinie aus, indem Sie darauf klicken. Beachten Sie dabei nicht, was der Cursor anzeigt, denn das bezieht sich nur darauf, was passieren würde, wenn Sie die Maus bei gedrückter Maustaste bewegten. Klicken Sie also einfach auf die Linie, um diese auszuwählen. 7. Sobald Sie die Kreislinie ausgewählt haben, werden Sie feststellen, dass der Cursor nun das Bewegungssymbol anzeigt (wenn er sich in der Nähe der Kreislinie befindet). Wenn Sie jetzt erneut klicken und bei gedrückter Maustaste die Maus bewegen, werden Sie die Kreislinie verschieben. Sie können auch einfach (Entf) drücken, um die Linie zu löschen. Probieren Sie es aus. 8. Stellen Sie erneut sicher, dass nichts ausgewählt ist und versuchen Sie, die Umrandung des Quadrates auszuwählen. Wenn Sie einmal auf eine Kante klicken, wird nur diese eine Kante ausgewählt. Doppelklicken Sie aber, wird die komplette Umrandung selektiert. Auch hier können Sie wieder die Linien verschieben oder löschen. Im Moment können wir die Linien aber noch gebrauchen. Lassen Sie diese also unverändert. 9. Versuchen Sie das gesamte Quadrat auszuwählen. Wenn Sie einmal auf die Füllung klicken, wird nur die Füllung ausgewählt. Wenn Sie allerdings dort doppelklicken, ist das gesamte Quadrat erfasst und kann verschoben oder gelöscht werden.

73

Malen und Zeichnen

10. Eine weitere Möglichkeit, das Quadrat auszuwählen, ist, es »einzufangen«. Klicken Sie (immer noch mit aktiviertem Pfeil-Werkzeug) außerhalb des Quadrates und bewegen Sie die Maus bei gedrückter Maustaste so, dass das Quadrat von dem aufgespannten Rechteck (auch Gummiband genannt) umschlossen wird. Lassen Sie dann die Maustaste los. Das Quadrat ist nun ausgewählt. 11. Allerdings ist es manchmal (wie in Abbildung 2.22) nicht möglich, die gewünschte Figur allein auszuwählen, denn im Beispiel würde immer auch ein Teil des Kreises selektiert werden. Hier können Sie nun per Doppelklick auf die Füllung zum Ziel kommen, allerdings gibt es für solche Situationen ein weiteres Hilfsmittel: Das Lasso-Werkzeug.

Abbildung 2.22: Manchmal wird mit dieser Auswahlmethode mehr selektiert, als man will.

12. Wählen Sie das Lasso-Werkzeug aus. Klicken Sie nun außerhalb des Quadrates und fahren Sie bei gedrückter Maustaste eine Kurve um das gewünschte Objekt ab. Wenn Sie das Lasso in den Polygon-Modus stellen, verhält es sich fast so wie das Stift-Werkzeug. Wählen Sie also bitte diesen Modus aus und klicken Sie die Eckpunkte Ihrer Auswahl an (siehe Abbildung 2.23). Doppelklicken Sie, um die Auswahl zu akzeptieren. (Noch einmal: In diesem Fall wäre ein Doppelklick auf die Füllung einfacher gewesen, allerdings werden Sie dieses Werkzeug oft verwenden, wenn es beispielweise darum geht, mehrere Objekte auszuwählen.) 13. Abschließend sei gesagt, dass Sie auch Teile einer Figur ausschneiden können. Stellen Sie sich vor, Sie wollen den oberen Teil des Kreises abtrennen. Verwenden Sie dann einfach das Pfeil-Werkzeug wie in Abbildung 2.24 demonstriert. Wir haben die Gummiband-Technik anhand des Pfeil-Werkzeuges kennen gelernt. Wenn Sie auf ein Objekt klicken, können Sie es biegen oder bewegen. Klicken Sie allerdings auf einen Bereich der Bühne, in dem sich kein Objekt befindet, erscheint ein Rechteck, wenn Sie die Maus bei gedrückter Maustaste bewegen. Wenn Sie die Taste nun loslassen, werden alle »eingefangenen« Objekte ausgewählt. Diese Technik ist bei der Auswahl sehr hilfreich.

74

Objekte auswählen und bearbeiten

Abbildung 2.23: Im Polygon-Modus müssen Sie für jede Ecke Ihrer Auswahl einmal klicken.

Abbildung 2.24: Sie können das Pfeil-Werkzeug auch verwenden, um Teile einer Figur auszuwählen.

Als Nächstes werden Sie lernen, wie man ausgewählte Objekte verändert. Allerdings haben Sie vorerst nur die Grundlagen für das Auswählen von Objekten kennen gelernt. Weitere Details lernen Sie in Kapitel 4 kennen. Denken Sie aber immer daran, darauf zu achten, was der Cursor Ihnen mitteilt.

Die Pipette Eine ganz einfache Möglichkeit, etwas zu verändern, das Sie gezeichnet haben, ist die Farbe zu wechseln. Der Farbeimer kann beispielsweise die Füllfarbe verändern und das Tintenfass-Werkzeug die Linienattribute (Farbe, Dicke und so weiter ...). Das geht immer dann gut, wenn Sie zuerst eine Füllfarbe wählen und dann beispielsweise das FarbeimerWerkzeug aktivieren, um damit auf eine Füllung zu klicken, um diese einzufärben. Allerdings werden Sie manchmal eine Füllfarbe eines anderen Objekts zuweisen wollen. Die Pipette lässt Sie die Farbe eines bereits auf dem Bildschirm befindlichen Objekts auswählen. Es werden sogar noch mehr Informationen als nur die Farbe aufgenommen, wie Sie in der folgenden Aufgabe feststellen werden.

75

Malen und Zeichnen

Aufgabe: Wählen Sie Attribute mit der Pipette aus! In dieser Aufgabe werden Sie mit der Pipette weit mehr Informationen als nur die Farbe sammeln. Es folgen die Schritte: 1. Stellen Sie die Liniendicke auf 10 ein und zeichnen Sie einen Kreis. Verändern Sie nun die Liniendicke, Linienfarbe und die Füllfarbe. Zeichnen Sie einen zweiten Kreis. Ändern Sie die Einstellungen noch einmal und zeichnen Sie einen dritten Kreis. 2. Wenn Sie an dieser Stelle die Füllfarbe des zweiten Kreises an die des ersten anpassen wollen, können Sie einfach die Füllfarbe verändern. Wenn Sie die genaue Farbe des ersten Kreises noch im Kopf haben, sind Sie ein Glückspilz. Allerdings ist es besser die Pipette zu verwenden, als sich auf die eigenen grauen Zellen zu verlassen. Beobachten Sie, wie der Cursor einen Pinsel anzeigt, während Sie sich über der Füllung des ersten Kreises befinden (siehe Abbildung 2.25). Das bedeutet, dass bei einem Klick die Füllungseinstellungen des Kreises zwischengespeichert werden.

Abbildung 2.25: Der Cursor zeigt an, dass er die Füllungseinstellungen übernehmen wird, wenn Sie klicken.

3. Klicken Sie mit der Pipette nun in die Mitte des ersten Kreises. Sie werden feststellen, dass sich nicht nur die Füllfarbe an die des ersten Kreises angleicht, sondern zusätzlich das Farbeimer-Werkzeug aktiv wird. Sie können nun schnell zum zweiten Kreis gehen und diesen mit der neuen Füllfarbe ausfüllen. Auf geht’s! 4. Wenn Sie die Linien beider Kreise angleichen wollen, können Sie das TintenfassWerkzeug verwenden, um die Linie des zweiten Kreises auszuwählen. Allerdings müssten Sie dann alle Einstellungen von Hand vornehmen. Die bessere Möglichkeit ist an dieser Stelle die Pipette, mit der Sie alle Linieneigenschaften des ersten Kreises übernehmen können. Aktivieren Sie also die Pipette und bewegen Sie diese in die Nähe der Kreislinie des ersten Kreises. Beachten Sie, dass der Cursor einen Bleistift anzeigt (siehe Abbildung 2.26). Das bedeutet, dass bei einem Klick die Linieneigenschaften zwischengespeichert werden.

76

Objekte auswählen und bearbeiten

Abbildung 2.26: Dieser Cursor zeigt an, dass bei einem Klick die Linieneigenschaften gespeichert werden.

5. Klicken Sie also, um die Linieneigenschaften auszuwählen. Es werden nun nicht nur die Einstellungen im Linie-Bedienfeld aktualisiert, sondern gleichzeitig das Tintenfass-Werkzeug aktiviert. Sie können nun sofort in den zweiten Kreis klicken, um die Linieneigenschaften anzugleichen. Behalten Sie also im Hinterkopf, dass die Pipette viele Eigenschaften speichern kann (nicht nur die Farbe).

Den Vergrößerungsgrad und die Rotation verändern Sie haben anhand des Pfeil-Werkzeuges gelernt, wie man Figuren biegen, verformen und verschieben kann. Außerdem haben Sie gesehen, dass man das Tintenfass- und das Farbeimer-Werkzeug nutzen kann, um bereits auf dem Bildschirm befindliche Figuren zu verändern. Allerdings gibt es noch mehr Wege, ein ausgewähltes Objekt zu editieren. Zwei übliche Modifikationen sind Vergrößerung und Rotation. Im Großen und Ganzen brauchen Sie dazu nur ein Objekt zu markieren und dann die Option Drehen oder Skalieren des Pfeil-Werkzeuges zu wählen. Diese Optionen stehen immer dann unter dem Pfeil-Werkzeug zur Verfügung, wenn Sie ein Objekt ausgewählt haben. Sie finden die beiden Optionen auch im Menü MODIFIZIEREN / TRANSFORMIEREN und auf der Standard-Symbolleiste, die Sie mit FENSTER / SYMBOLLEISTEN / STANDARD öffnen können. Probieren wir diese Optionen doch ein wenig aus:

Aufgabe: Vergrößern und drehen Sie gezeichnete Objekte! In dieser Aufgabe erkunden wir die Optionen Skalieren und Drehen. Folgen Sie dazu einfach diesen Schritten: 1. Verwenden Sie das Rechteck-Werkzeug, um ein Quadrat zu zeichnen. Wählen Sie dann das Pfeil-Werkzeug aus und doppelklicken Sie in die Mitte des Quadrates, um es auszuwählen. 2. Wählen Sie nun die Option Skalieren (siehe Abbildung 2.27).

77

Malen und Zeichnen

Abbildung 2.27: Wenn ein Objekt ausgewählt wurde, können Sie die Option Skalieren aktivieren.

3. Das ausgewählte Objekt verfügt nun über quadratische Markierungen an den Ecken und Kanten. Beachten Sie, dass der Cursor sich verändert, wenn Sie sich damit über einer solchen Marke befinden. Mit den Markierungen an den Ecken können Sie gleichzeitig die Höhe und die Breite verändern. Die anderen Markierungen dienen lediglich zur Veränderung der Höhe oder der Breite. Klicken Sie auf eine Markierung an einer Ecke und bewegen Sie die Maus bei gedrückter Maustaste. 4. Stellen Sie sicher, dass Sie das Quadrat immer noch ausgewählt haben und wählen Sie nun die Option Rotieren. Die Markierungen werden nun zu kleinen Kreisen. Mit den Markierungen an den Ecken lässt sich das Objekt drehen und mit den Seitenmarkierungen können Sie es verzerren. Bewegen Sie den Cursor über eine solche Marke und achten Sie auf die Veränderung des Cursors. 5. Klicken Sie nun auf eine Eckmarkierung und bewegen Sie die Maus bei gedrückter Maustaste. Wie Sie sehen, dreht sich das Quadrat. Wenn die Option An Objekten ausrichten (der Magnet) aktiviert ist, werden Sie feststellen, dass sich das Quadrat alle 45° von selbst justiert. Darüber lernen wir noch mehr im Verlauf dieses Kapitels. Unter Markierungen versteht man in Zusammenhang mit den Optionen Drehen und Skalieren die kleinen Quadrate oder Kreise, auf die man klicken muss, um die Funktion auszuführen. Wenn Sie ein Objekt auswählen, wird es entweder schraffiert dargestellt oder mit einem Rechteck eingerahmt. In jedem Fall erscheinen die Markierungen aber am äußeren Rand dieser Kennzeichnung. Eines sei noch gesagt: Verschiedene Markierungen haben auch verschiedene Funktionen. So stehen Kreise beispielsweise für die Rotation und Quadrate für die Skalierung.

78

Objekte auswählen und bearbeiten

Abbildung 2.28: Wenn An Objekten ausrichten aktiv ist, haben Sie es einfacher, logische Drehwinkel (wie 45°) einzustellen.

Zusätzlich zu den Optionen des Pfeil-Werkzeuges stehen Ihnen zwei weitere Wege zur Verfügung, wie Sie Objekte skalieren oder drehen können. Zuerst gibt es die Menüpunkte ROTIEREN und SKALIEREN unter MODIFIZIEREN / TRANSFORMIEREN. Diese öffnen ein Fenster, in dem Sie die exakten Werte für die Vergrößerung oder Rotation eingeben können. Eine weitere Möglichkeit für die Veränderung bereits gezeichneter Objekte sind die Bedienfelder Info und Transformieren. Markieren Sie einfach ein Objekt und wählen Sie das Info-Bedienfeld. Hier können Sie andere Werte für die Breite und Höhe eines Objektes eintragen. Im Transformieren-Bedienfeld finden Sie exakte Werte für die Rotation und Verzerrung. Außerdem kann man mit dem Knopf unten rechts bereits eingestellte Verformungen wieder rückgängig machen. Ein weiterer interessanter Knopf heißt Kopieren und Transformierung anwenden und befindet sich links neben der zuvor erwähnten Schaltfläche. Dieser Knopf kopiert bei jedem Klick das ausgewählte Objekt und wendet dabei die eingestellte Transformierung an.

Figuren glätten und begradigen Wir haben nun schon einige Möglichkeiten kennen gelernt, wie man die Form von Objekten verändern kann. Wenn Sie mit dem Freihand-Werkzeug arbeiten, passt Flash das Ergebnis je nach Stiftart an. Beim Pfeil-Werkzeug haben Sie das Biegen von Linien und das Herausziehen von Ecken kennen gelernt. Zum Schluss haben wir uns dann mit der Rotation und der Skalierung beschäftigt.

79

Malen und Zeichnen

Natürlich gibt es noch mehr Möglichkeiten. Man kann beispielsweise eine Zeichnung auch nach der Fertigstellung noch glätten oder begradigen. Diese beiden Optionen stehen unter dem Pfeil-Werkzeug zur Verfügung. Die Vorgehensweise ist denkbar einfach: Wählen Sie ein Objekt aus und klicken Sie dann auf eine der Optionen Glätten oder Begradigen (siehe Abbildung 2.29). Sie können auch mehrfach klicken, um den Effekt zu verstärken.

Abbildung 2.29: Die Optionen Glätten und Begradigen beeinflussen alles, was gerade ausgewählt ist.

In Abbildung 2.30 sehen Sie ein paar »Vorher/Nachher«-Beispiele. Nehmen Sie sich einen Moment Zeit, um mit diesen Funktionen zu experimentieren. Manchmal wird das Ergebnis sicher nicht so sein, wie Sie sich das vorgestellt haben, aber Flash erzeugt immer unkomplizierte Figuren, die dadurch auch weniger Speicherplatz belegen.

Abbildung 2.30: Die oberen Formen wurde begradigt und die unteren geglättet.

Objekte über das Andocken verbinden Eines der tiefgründigsten Konzepte von Flash ist die Art, wie Ihnen das Ausrichten an Objekten beim Zeichnen hilft. Wenn Sie ANSICHT / AUSRICHTEN aktivieren oder ganz einfach auf die Schaltfläche An Objekten ausrichten (der Magnet) klicken, sind Sie in der

80

Objekte auswählen und bearbeiten

Lage, exakte Kreise, Quadrate oder perfekt horizontale Linien zu erzeugen. Sie werden auf das »Aktivwerden« dieser Funktion durch einen dunklen Ring aufmerksam gemacht, der im Cursor erscheint, wenn Sie ein neues Objekt zeichnen. Wenn Sie diesen Ring sehen, wissen Sie, dass Flash Sie beim Zeichnen unterstützt. Vielleicht wissen Sie schon (aus anderen Grafikanwendungen), dass Sie bei gedrückter (ª)-Taste mit einer ähnlichen Funktion unterstützt werden, aber das Andocken von Flash kann noch viel mehr: Zusätzlich zum perfekten Zeichnen von Figuren, hilft es Ihnen, zwei Figuren miteinander zu verbinden. Das ist viel mehr, als Figuren sich einfach berühren zu lassen – Sie werden sogar wirklich verbunden. Allerdings kann es in Flash manchmal so aussehen, als ob zwei Figuren verbunden wären, obwohl das gar nicht der Fall ist. Hier ein Beispiel: In der folgenden Aufgabe werden Sie einen Pfeil zeichnen. Solange der Pfeilkopf nicht mit dem Pfeilkörper verbunden ist, werden Sie beim Skalieren feststellen, dass nicht alles vergrößert wird. Wenn die beiden Teile aber zusammengefügt werden, sind sie für immer verbunden.

Aufgabe: Zeichnen und verbinden Sie perfekte Figuren über das Andocken! In dieser Aufgabe werden Sie einige interessante Arten kennen lernen, mit denen Flash Sie beim Zeichnen unterstützt: 1. Stellen Sie zuerst sicher, dass AUSRICHTEN im Menü ANSICHT aktiviert ist. Wählen Sie nun das Rechteck-Werkzeug aus und zeichnen Sie ein Quadrat. Sie werden durch den dunklen Ring im Cursor dabei unterstützt (siehe Abbildung 2.31).

Abbildung 2.31: Wenn Sie mit dem Rechteck-Werkzeug arbeiten und das Ausrichten eingeschaltet ist, macht ein dunkler Ring Sie darauf aufmerksam, dass Sie ein perfektes Quadrat zeichnen.

81

Malen und Zeichnen

2. Wählen Sie nun das Linien-Werkzeug, um eine Linie mit 45° zu zeichnen. Dieses Mal müssen Sie (ª) gedrückt halten, damit Sie unterstützt werden. 3. Nun wollen wir die Linie mit einer Ecke des Quadrates verbinden. Wählen Sie dazu das Pfeil-Werkzeug. Stellen Sie sicher, dass der Cursor das Kantensymbol anzeigt, bevor Sie die Linie bewegen. Ziehen Sie nun das obere Ende der Linie an die obere rechte Ecke des Quadrates. Sie werden feststellen, dass Sie dabei wieder unterstützt werden. 4. Im letzten Schritt wurde der Winkel unserer Linie verändert. Deshalb machen Sie ihn bitte mit (Strg)+(Z) wieder rückgängig. Versuchen Sie es etwas anders: Klicken Sie zuerst auf die Linie, um diese auszuwählen. Gehen Sie dann wie im Punkt drei vor, um das Ende der Linie mit der Ecke des Quadrates zu verbinden. Diesmal wird der Winkel nicht verändert. Das einzige Hindernis in diesem Schritt ist, dass Sie den dunklen Ring nur sehen, wenn Sie die Linie an einer Ecke oder genau in der Mitte »aufgehoben« haben. Sollten Sie den Ring also nicht sehen, lassen Sie die Linie los und versuchen Sie es noch einmal. 5. Zeichnen Sie nun zwei Linien in der Nähe der ersten Linie, die etwa parallel dazu verlaufen. 6. Verlängern Sie die Linien nun wie in Abbildung 2.32 angezeigt. Ziehen Sie dabei die Endpunkte der Linien an die Ecken des Quadrates und an den Endpunkt der ersten Linie.

Abbildung 2.32: Man kann Linien verbinden, indem man die Endpunkte verschiebt.

7. Jetzt prüfen wir, ob alle Linien wirklich verbunden sind: Verwenden Sie das PfeilWerkzeug, um den Punkt zu bewegen, an dem sich die drei Linien treffen. Wenn die Linien richtig verbunden sind, werden sich alle drei Linien gleichzeitig bewegen und sich nicht vom Quadrat ablösen.

82

Zusammenfassung

Diese Aufgabe hat Ihnen einen kleinen Vorgeschmack von der Unterstützung durch Flash beim Zeichnen gegeben. Gehen wir doch einmal von horizontalen und vertikalen Linien aus. Wenn Sie die vertikale Linie in der Mitte aufheben und mit einem Ende der horizontalen Linie verbinden, können Sie danach den Verbindungspunkt nach außen ziehen, um so einen perfekten Pfeil zu erzeugen. Im Anhang D werden Sie weitere Figuren kennen lernen, die man ganz einfach erzeugen kann. Nebenbei: Wenn Sie ANSICHT / LINEALE aktivieren, können Sie Hilfslinien auf die Bühne ziehen (in ein Lineal klicken und bei gedrückter Maustaste auf die Bühne ziehen). Vorausgesetzt, ANSICHT / HILFSLINIEN / AN HILFSLINIEN AUSRICHTEN ist aktiviert, können Sie diese Hilfslinien genauso wie echte Linien verwenden, um Objekte daran auszurichten. Allerdings dienen die Hilfslinien nur zur Unterstützung – sie sind unsichtbar für das Publikum. Abschließend sei gesagt, dass man das Andocken auch kurzzeitig ausschalten kann, wenn es störend ist. Das ist z.B. sinnvoll, wenn man zwei Linien wirklich eng nebeneinander zeichnen will, sie sich aber nicht berühren sollen. Außerdem können Sie die »Sensibilität« des Andockens unter BEARBEITEN / EINSTELLUNGEN in der Registerkarte BEARBEITEN verändern.

2.4

Zusammenfassung

Dieses lange Kapitel hat praktisch jedes Zeichen-Werkzeug in Flash betrachtet. Wir haben Linien, Füllungen, kombinierte Figuren und Text kennen gelernt. Nachdem Sie einige Objekte gezeichnet haben, konnten Sie sogar die Farben, Ränder, die Position, Skalierung und Rotation verändern. Außerdem wissen Sie jetzt, wie man Figuren zusammenfügt. Auch wenn Sie denken, dass Sie keine Kunst erstellen (vielleicht arbeiten Sie mit jemandem zusammen, der sich für einen »Künstler« hält), sollten Sie zwei wichtige Konzepte verstanden haben: Erstens ist die Datei umso kleiner, je einfacher die Figuren sind. Zweitens sind nur Figuren zusammengefügt, die wirklich angedockt wurden. Wenn Sie natürlich künstlerisch tätig sein wollen, hat Ihnen dieses Kapitel die Grundlagen des Zeichnens mit Flash vermittelt.

83

Malen und Zeichnen

2.5

Workshop

F&A F

Anscheinend hat das Farbeimer-Werkzeug seine Arbeit eingestellt und verhält sich wie ein normaler Cursor. Was mache ich falsch? A

F

Warum scheint mein Pinsel-Werkzeug zuerst zu funktionieren, wenn ich zeichne. Wenn ich dann aber fertig bin, erscheint nichts auf der Bühne? A

F

Wahrscheinlich haben Sie in der Option Pinselart die Einstellung In Auswahl malen aktiviert. Wenn Sie dann nichts ausgewählt haben, wird auch nichts gezeichnet.

Anscheinend gibt es noch viel mehr Werkzeugoptionen, die wir noch nicht besprochen haben. Werden diese später noch behandelt? A

F

Wahrscheinlich haben Sie die Option Füllung transformieren eingeschaltet. Schalten Sie diese Option wieder aus. Sie wird erst in Kapitel 4 besprochen.

Wir werden im vierten Kapitel noch auf einige dieser Optionen und Werkzeuge eingehen. Auch wenn Sie in diesem Kapitel erst die Grundlagen gelernt haben, dürfen Sie gerne schon weitere Werkzeuge und Optionen ausprobieren.

Warum haben meine Linien immer so abgerundete Enden, egal, wie kurz ich sie mache? A

Der Endpunkt einer Linie ist wirklich nur ein Punkt. Außerdem ist die Dicke der Linie als doppelter Radius um jeden Linienpunkt definiert. Eine 8-Punkt-Linie hat also immer eine 4-Punkt-Kappe an jedem Ende. Wenn Sie dies vermeiden wollen, können Sie die Linie in eine Füllung umwandeln (MODIFIZIEREN / FORM / LINIEN IN FÜLLUNGEN KONVERTIEREN) und danach die Enden stutzen.

Übungsaufgaben 1. Was passiert, wenn Sie sowohl die Füllfarbe als auch die Linienfarbe auf Keine Farbe setzen und dann ein Rechteck zeichnen? a. Es wird ein schwarzes (Farben fehlen) Rechteck gezeichnet. b. Man kann versuchen zu zeichnen, aber es erscheint nichts auf dem Bildschirm. c. Flash wird abstürzen und Sie haben gelernt, so etwas nie wieder zu tun.

84

Workshop

2. Die Schnelltaste für das Pfeil-Werkzeug ist (A), für das Freihand-Werkzeug (Y) und für den Pinsel (B). Wo kann man die Schnelltasten der anderen Werkzeuge am besten nachschlagen? a. Am Anfang dieses Buches b. Auf der Macromedia-Homepage c. Bewegen Sie einfach den Cursor über das Werkzeug und warten Sie einen Moment. Nach kurzer Zeit haben Sie die Antwort direkt vor Ihrer Nase. 3. Gibt es mehr als eine Möglichkeit, die Füllfarbe zu verändern? a. Ja, an jeder Stelle, an der man ein Farbfeld sieht, kann man die Füllfarbe einstellen. b. Ja, es gibt viele Stellen, an denen man die Füllfarbe einstellen kann. Egal wo man sie verändert, werden alle anderen Füllfarben-Farbfelder angeglichen. c. Nein, man muss die Füllfarbe immer in der Werkzeugleiste am Farbfeld mit dem Eimer daneben einstellen.

Übungen Versuchen Sie selbst, perfekte geometrische Figuren (zum Beispiel eine Röhre) zu erzeugen. Wenn Sie ein paar Beispiele suchen, finden Sie einige in Anhand D.

85

Grafiken in Flash importieren

3

Grafiken in Flash importieren

In den ersten beiden Lektionen haben wir gesehen, wie man einfache Grafiken in Flash mit recht wenig Aufwand erstellen kann. Unabhängig davon, wie mächtig die Werkzeuge von Flash sind, kann es manchmal wichtig sein, Grafiken zu importieren, die woanders erzeugt wurden. Zwei wichtige Gründe wären das Verwenden eines Fotos oder einer bestehenden Grafik (anstatt sie neu zu erstellen). Selbstverständlich kann man solche Grafiken auch in Flash verwenden – und genau das lernen wir in diesem Kapitel. Dieses Kapitel wird sich besonders mit folgenden Punkten befassen: 쐽

Vektorgrafiken in Flash importieren

쐽

Rastergrafiken importieren

쐽

Wege kennen lernen, wie man Grafikimporte vermeidet

쐽

Optimieren und die beste Qualität beim Import sicherstellen

3.1

Vektor- und Rastergrafiken

Vektorgrafiken verfügen über bestimmte Eigenschaften, die sich daraus ergeben, wie sie im Computer gespeichert werden. Eine Vektorgrafik enthält die mathematischen Formeln, um das Bild auf den Bildschirm zu zeichnen. Beispielsweise enthält ein Kreis Informationen wie Radius, Liniendicke und Farbe. Alle Grafiken, die Sie in Flash erstellen, sind vektorbasiert. Solche Grafiken haben zwei Vorteile: Die Dateigröße bleibt klein (deshalb lässt sie sich schnell herunterladen) und das Bild lässt sich beliebig vergrößern, ohne dass die Qualität dabei leidet (ein Kreis bleibt immer ein Kreis, auch wenn es ein großer Kreis ist). Vektorgrafiken sind sehr gut, aber es ist wichtig, auch deren Nachteile zu kennen. Bei solchen Grafiken muss der Computer des Anwenders mehr arbeiten als bei der Anzeige eines anderen Bildes (es gibt halt viel zu rechnen). Außerdem sehen Vektorgrafiken oft schlichter aus als andere, da sie aus geometrischen Figuren zusammengesetzt sind. Beide Nachteile lassen sich auf ein Minimum reduzieren, allerdings sollte man sie immer im Hinterkopf behalten. Rastergrafiken unterscheiden sich grundlegend von Vektorgrafiken. Eine Rastergrafik enthält die Farbinformation für jeden einzelnen Bildpunkt. Wenn das Bild 100x100 Bildpunkte groß ist, gilt es 10.000 Bildpunkte mit einer eigenen Farbe zu versehen. Deshalb sind Rastergrafiken immer relativ große Dateien. Außerdem kann man Rastergrafiken nicht gut vergrößern. Sie tendieren dazu, eine sehr grobe Körnung zu erhalten. Das kennen Sie sicher von Vergrößerungen bei Fotos. Ein Vorteil solcher Grafiken ist allerdings, dass sie sehr schnell auf dem Bildschirm angezeigt werden können.

88

Gute Gründe, warum man den Grafikimport vermeiden sollte

Es mag so aussehen, dass Vektorgrafiken grundsätzlich die bessere Wahl sind. Allerdings sollte man die Entscheidung, ob man eine Vektor- oder eine Rastergrafik verwendet, davon abhängig machen, welche Art von Bild dargestellt werden soll. Wenn das Bild sehr geometrisch aufgebaut ist und noch dazu klare Farbdefinitionen verwendet, ist eine Vektorgrafik die bessere Wahl. Handelt es sich aber um die Fotografie einer Person oder aber eine Landschaft, lässt sich eine Rastergrafik nicht umgehen. Die Entscheidung, welches Format man nutzen sollte, ist recht einfach; allerdings hat jedes seine Eigenheiten.

3.2

Gute Gründe, warum man den Grafikimport vermeiden sollte

Die Möglichkeit, sehr schöne Vektorgrafiken in Flash zu erstellen, ist wahrscheinlich die beste Rechtfertigung dieser Warnung: Importieren Sie keine Grafiken in Flash, ohne es wirklich zu müssen! Das ist es, was wir in diesem Kapitel lernen werden – allerdings heißt es nicht immer, dass es eine gute Idee ist. Wenn es einen Weg gibt, um Flash-Dateien im Download zu verzögern oder langsamer abspielen zu lassen, ist es der Weg, Grafiken unnötig zu importieren. Es ist also absolut wichtig, Wege zu finden, den Grafikimport zu vermeiden. Wahrscheinlich ist es ein natürlicher Instinkt, dass man Grafiken importieren will. Wenn man einem Grafikdesigner (der Experte in Illustrator oder Freehand ist) zeigt, wie man mit Flash arbeitet, wird seine erste Frage sein, wie man Illustrator- oder Freehand-Dateien in Flash importiert. In diesem Kapitel lernen Sie die Antwort. Wenn man genau betrachtet, warum der Grafik-Profi überhaupt fragt, stellt sich ein Problem: Manche Leute können sehr anspruchsvolle oder auch komplizierte Grafiken mit anderen Hilfsmitteln erzeugen. Solche Grafiken in Flash einzubinden, verursacht zwei Probleme. Manchmal kommt Flash nicht mit sehr großen und komplizierten Dateien zurecht. Auf der anderen Seite wird eine komplizierte Datei mehr Zeit für den Download benötigen und darüber hinaus auch noch langsamer abspielen – warum sollte man eine solche Datei also in seinem Flash-Film verwenden? Die erste Überlegung bei der Entscheidung, eine Grafik in Flash zu importieren, sollte die sein, ob man eine einfache Version in Flash neu erstellen kann oder ob die Grafik wenigstens vereinfacht werden kann, bevor man sie in Flash importiert. Wenn man dem Grafiker vorschlägt, die Datei in Flash neu zu erzeugen, kann es sein, dass er antwortet, dass Flash ihm nicht die Möglichkeiten für seine Arbeit bietet. Wenn das so ist, liegt die Lösung darin, die Grafik vor dem Import zu vereinfachen – und nicht, sie in Flash hineinzuquetschen.

89

Grafiken in Flash importieren

Allerdings werden Sie in einigen anderen Fällen einen Grafikimport nicht vermeiden können. Angenommen, Sie haben eine Fotografie, die Sie in Flash verwenden wollen, oder Sie besitzen eine einfache Vektorgrafik, die Sie nicht in Flash neu zeichnen wollen. Wir werden Rastergrafiken noch im weiteren Verlauf dieses Kapitels besprechen, uns aber zuerst mit Vektorgrafiken befassen.

3.3

Vektorgrafiken importieren

Es kann durchaus vorkommen, dass Sie eine bereits existierende Vektorgrafik in Ihrem Flash-Film verwenden wollen. Typischerweise ist so eine Grafik relativ geometrisch – obwohl das nicht immer so sein muss. Unabhängig von der exakten Form der Grafik – es sei denn, sie ist extrem kompliziert – können Sie diese in Flash importieren.

Aus einer Datei Ein Weg, Grafiken aus anderen Anwendungen in Flash einzubinden, ist das Importieren einer Datei. Das ist so einfach, wie DATEI / IMPORTIEREN zu wählen und dann auf die entsprechende Datei zu klicken (siehe Abbildung 3.1). Wie Sie sehen, gibt es eine große Anzahl von Dateitypen, was aber nicht heißt, dass sie alle gleich gut importiert werden können. Außerdem sind nicht nur Raster- und Vektorgrafikformate aufgelistet, sondern es stehen noch zusätzliche Video- und Audioformate zur Verfügung. Betrachten wir zuerst die Vektorgrafikformate.

Abbildung 3.1: Grafik-, Audio- und VideoDateien in Flash zu importieren ist sehr einfach.

90

Vektorgrafiken importieren

Obwohl sehr viele Dateitypen zur Verfügung stehen, gibt es nur vier Vektorgrafikformate, die der Rede wert sind: Freehand (.fh9), Illustrator (.ai), Illustrator EPS und Flash Player (.swf). Generell ist Freehand die beste Option. Direkte Freehand-Unterstützung ist neu in Flash 5. Es funktioniert schon sehr gut, wie Sie in einer Minute sehen werden. Die einzigen Illustrator-Versionen, die unterstützt werden, sind 3.0, 4.0, 5.0, 6.0 und die ältere »88«. Künstler, die mit Illustrator in der Version 6 oder höher arbeiten, brauchen lediglich beim Abspeichern die Version 6 oder niedriger anzugeben. Leider gehen dabei eventuell einige sichtbare Elemente verloren. Bitte beachten Sie aber, dass Sie immer eine Kopie der Original-Datei behalten, die im Format der gerade aktuellen Illustrator-Version abgespeichert wurde. Der Importprozess geht also wie folgt vonstatten: Der Grafikdesigner erstellt seine Grafik in seiner Illustrator-Version, speichert eine Kopie in der Version 6 ab, wenn er die Grafik fertig gestellt hat, und importiert diese .ai-Datei in Flash. Wenn Sie eine .ai-Datei besitzen, aber nicht sicher sind, mit welcher Version diese gespeichert wurde (und Sie Illustrator nicht installiert haben), können Sie versuchen, diese Datei in Flash zu importieren. Allerdings kann es zu einer sehr schmerzvollen Erfahrung führen, wenn das nicht richtig funktioniert. Das Ergebnis wird nicht so aussehen, wie Sie es erwarten. Sie können es in Abbildung 3.2 sehen. Zu einem schlechten Ergebnis führt es, wenn eine Illustrator-Version verwendet wird, die größer als 6 ist und Flash die Datei nicht interpretieren kann. Um das zu vermeiden, müssen Sie die Datei lediglich in einer aktuellen Illustrator-Version öffnen und die Prozedur mit der gespeicherten Kopie durchführen.

Abbildung 3.2: Wenn Sie eine zu neue IllustratorDatei importieren wollen, kann dies zu verheerenden Ergebnissen führen.

91

Grafiken in Flash importieren

Freehand-Dateien importieren Flash kann anstandslos Freehand-Dateien importieren. Wenn Sie mit Freehand vertraut sind, wird dies wahrscheinlich die beste Möglichkeit sein, Vektorgrafiken in Flash zu importieren. Klicken Sie dazu in Flash einfach DATEI / IMPORTIEREN und wählen Sie die Freehand-Datei aus, die Sie importieren wollen. Jetzt werden Sie mit dem FreehandImport-Dialog (siehe Abbildung 3.3) konfrontiert.

Abbildung 3.3: Nachdem eine Freehand-Datei importiert wurde, zeigt Flash diesen Dialog an.

Flash stellt eine Vielzahl von Optionen zur Verfügung, wenn man eine Freehand-Datei importieren will. Die Zuordnung-Auswahlen geben Ihnen die Möglichkeit, zu bestimmen, wie in Flash mit bestimmten Eigenheiten von Freehand umgegangen werden soll. Beispielsweise hat eine Freehand-Datei »Seiten«, von denen Flash wissen muss, wie diese zu handhaben sind. Die Optionen sind im Einzelnen leicht verständlich und Sie müssen wissen, wofür sie stehen. Allerdings gibt es einige Punkte, die Sie beachten sollten, wenn Sie in Freehand Dateien erzeugen, um einen späteren Import nach Flash reibungslos ablaufen zu lassen. Es folgen ein paar Tipps, die Ihnen dabei helfen sollen, Ihre Zeichnungen nach Flash zu importieren. Zuerst einmal sollten Sie die Symbole von Freehand benutzen, da diese direkt in die Symbole von Flash transformiert werden und somit Grafiken wiederverwendet werden können. Wir werden Symbole in Flash noch genauer in Kapitel 5 behandeln. Außerdem sollte jedes Objekt in Freehand in seine einigen Ebenen unterteilt werden. Die Datei lässt sich später besser importieren, wenn Sie mehrere Ebenen verwenden. Es gibt einige Texteffekte, die man in Freehand verwenden kann, die allerdings nicht nach Flash übersetzt werden können. Wenn Sie beispielsweise einen Text mit einem Pfad verknüpft haben, wird er in Flash nicht mehr editierbar sein. Außerdem unterstützt lediglich Freehand verschiedene Stricharten für Text, so dass dieser Effekt von Flash ignoriert wird.

92

Vektorgrafiken importieren

In Freehand kann man die Schriftgröße sehr fein abstimmen, was in Flash nicht so gut funktioniert. Das hat zur Folge, dass die Schriftgröße in Flash leicht abweichen kann. Manchmal passiert es, dass Texte aus Freehand direkt zu Vektoren in Flash konvertiert werden (was wiederum bedeutet, dass der Text nicht mehr editierbar ist). Dies sind nur ein paar grundlegende Tipps. Wenn Sie wirklich Dateien erstellen wollen, die reibungslos nach Flash konvertiert werden können, sollten Sie zusätzlich noch ein wenig mit Freehand experimentieren.

EPS-Dateien importieren Ein anderes Vektorformat ist EPS (Encapsulated PostScript). Leider gibt es viele Variationen dieses Formats (wie beispielsweise PhotoShop EPS). Allerdings ist die einzige EPSVariante, die Flash unterstützt, das so genannte Illustrator-EPS. Die beste Möglichkeit, herauszufinden, ob Ihre Datei importiert werden kann, ist es einfach zu testen. Wenn der Import fehlschlägt, kann es passieren, dass die Anzeige in Flash nicht wie erwartet aussieht oder dass sogar eine Fehlermeldung (siehe Abbildung 3.4) erscheint, die Ihnen mitteilt, dass es ein Problem gibt. Abbildung 3.4: Manchmal wird Flash Sie warnen, dass es ein Problem mit der Datei gibt, die Sie importieren wollen.

Von allen Optionen, die man für den Import von Vektorgrafiken einstellen kann, ist EPS wahrscheinlich die schlechteste Wahl, denn es arbeitet nicht immer verlässlich. Der Import mag unter bestimmten Umständen erfolgreich sein, dann aber unter leicht veränderten Umständen wieder fehlschlagen. Wenn Sie festlegen können, unter welchen Umständen der Import funktioniert, haben Sie Glück – aber das ist leichter gesagt als getan.

Flash-Player-Dateien importieren Die wohl verlässlichste Methode (mal abgesehen von Freehand-Dateien) ist der Import von Flash-Player-Dateien. Viele Grafikdesigner denken gar nicht über .swf-Dateien als Dateiformat nach, allerdings sind sie inzwischen schon ein Standard geworden. Natürlich ist eine .swf-Datei nicht mit einer Freehand- oder Illustrator-Datei vergleichbar, da sie nicht voll editierbar ist. Freehand 9 und Illustrator 9 erlauben es Ihnen, funktionsfähige Dateien als .swf-Dateien abzuspeichern. Das Ergebnis ist erstaunlich gut. Das kann man an zwei Eigenschaften beweisen: Die endgültige Datei ist kleiner und das Bild enthält immer noch alle Details und die Qualität des Originals.

93

Grafiken in Flash importieren

Wenn Sie Probleme beim Export von .swf-Dateien haben, sollten Sie ein wenig mit den Optionen experimentieren, die von den jeweiligen Programmen zur Verfügung gestellt werden. Einige dieser Dialoge werden in Abbildung 3.5 gezeigt. Natürlich kann ich nicht auf jede einzelne Option eingehen, allerdings werden Sie feststellen, dass es Parallelen zwischen allen Dialogfenstern gibt.

Freehand 9 (Schaltfläche Einstellungen)

Illustrator 8 (englische Version)

94

Illustrator 9 (englische Version)

Abbildung 3.5: Hier sehen Sie einige Dialoge, die erscheinen, wenn man mit Freehand oder Illustrator eine .swf-Datei exportieren will.

Vektorgrafiken importieren

Zusätzlich zu der Möglichkeit, .swf-Dateien zu exportieren, gibt es einige spezielle Techniken, die man ausprobieren kann. Diese werden im späteren Verlauf dieses Kapitels noch besprochen. Im besten Fall kann man dadurch die Grafik weniger komplex gestaltet, was den Import wiederum vereinfacht.

Aus anderen Programmen Die nachfolgende Technik arbeitet – allerdings nicht wirklich gut. Ich will sie dennoch vorstellen, da sie für einfache Grafiken sehr schnell ist. Öffnen Sie dazu Ihre Grafik in einem beliebigen Grafikprogramm, während Flash geöffnet ist. Wählen Sie nun den Inhalt aus und kopieren Sie ihn. Wechseln Sie zu der geöffneten Flash-Datei und fügen Sie den Inhalt wieder ein. Wenn Sie diese Technik verwenden wollen, sollten Sie sich die Registerkarte ZWISCHENABLAGE (siehe Abbildung 3.6) aus dem Menü BEARBEITEN / EINSTELLUNGEN etwas genauer ansehen.

Abbildung 3.6: In den Eigenschaften der Zwischenablage wird eine Option zur Verfügung gestellt, mit der man festlegen kann, wie Freehand-Text gehandhabt werden soll.

95

Grafiken in Flash importieren

Diese Vorgehensweise hört sich im Gegensatz zum letzten Absatz sehr einfach an – aber lassen Sie sich nicht täuschen, denn sie arbeitet nicht immer perfekt. Was eigentlich passiert, ist Folgendes: Der Inhalt in einem globalen Dateiformat wird in die Zwischenablage gelegt. Die Umwandlung hängt vom jeweiligen Format ab, ist aber vergleichbar mit dem Export und anschließenden Import einer EPS-Datei (nur funktioniert es vollautomatisch). Wenn das funktioniert, haben Sie Glück. Falls nicht, sollten Sie auf die bereits besprochenen Import-Methoden zurückgreifen oder noch besser: die Datei in Flash neu erstellen.

So stellen Sie die Bild-Integrität sicher So leicht sich die Export/Import-Funktionalität anhören mag, so frustrierend kann es sein, wenn sie nicht funktioniert! Die beste Möglichkeit, qualitativ hochwertige Bilder zu erzeugen, ist tatsächlich, alle in Flash zu zeichnen. Für die Ausnahmen, bei denen Sie bereits existierende Bilder importieren müssen, gibt es einige Punkte zu beachten, damit die BildIntegrität auch nach dem Export erhalten bleibt. Einige dieser Tipps sind überflüssig, wenn man .swf-Dateien entweder von Illustrator oder Freehand importieren will. Als erstes Beispiel wären Schrifteffekte zu nennen. Einige Programme bieten eine fast unerschöpfliche Auswahl an Effekten, die sich auf Schriftarten anwenden lassen. Leider ist das bei Flash nicht der Fall. Die erste Überlegung bei Text sollte sein, ob dieser später in Flash noch editiert werden muss. Falls Sie den Text in Flash nicht mehr bearbeiten müssen, entstehen die besten Ergebnisse, wenn Sie ihn zuerst in Vektoren umwandeln. Dazu finden Sie in Freehand eine Option, die es Ihnen ermöglicht, beim Export in eine .swfDatei die Konvertierung automatisch durchzuführen. Natürlich werden Sie nicht mehr in der Lage sein, den Text zu bearbeiten, nachdem Sie diesen Vorgang durchgeführt haben. Deshalb sollten Sie immer zuerst eine Sicherheitskopie erstellen. Zusätzlich könnte es nämlich passieren, dass die Dateigröße anschwillt. Wir werden uns in Kapitel 20 noch genauer mit der Dateigröße beschäftigen. Wenn Sie allerdings Farbverläufe benutzen, sollten Sie auf den Export von .swf-Dateien verzichten. Ein einfacher Farbverlauf kann beispielsweise eine Vielzahl von Kreisen für jede Farbstufe enthalten. Stellen Sie sich aber vor, Sie würden Hunderte von konzentrischen Kreisen importieren, die sich nur durch eine unterschiedliche Größe und eine leicht andere Farbe unterscheiden. Diesen Effekt können Sie beispielsweise in Abbildung 3.7 sehen, wenn Sie versuchen, ein Quadrat zu verschieben, welches mit einem Farbverlauf gefüllt ist. Daran kann man sehr gut erkennen, dass ein solcher Farbverlauf eine viel größere Datei erzeugt und noch dazu den Film verlangsamt. Mit anderen Worten: Dieser Farbverlauf ist viel komplizierter, als er eigentlich sein müsste (im nächsten Kapitel werden wir uns mit Farbverläufen in Flash beschäftigt).

96

Vektorgrafiken importieren

Abbildung 3.7: Nicht selten ist eine importierte Datei viel größer, als sie eigentlich sein müsste. Dieser Farbverlauf besteht beispielsweise aus vielen konzentrischen Kreisen.

Das Zusammenspiel zwischen Flash und anderen Vektorprogrammen Nehmen wir einmal an, Sie importieren eine Grafik, die Sie woanders erstellt haben. Danach bearbeiten Sie sie in Flash und stellen fest, dass die Grafik noch einmal im Originalprogramm bearbeitet werden muss. Diese Vorgehensweise ist durchaus denkbar, funktioniert in den meisten Fällen aber nicht zufrieden stellend. Gerade weil es dabei sehr oft Fehler gibt, ist die Frage berechtigt, ob so etwas wirklich nötig ist. Natürlich können Sie diese Situation vermeiden, wenn Sie die Grafiken direkt in Flash erstellen. Allerdings kann es durchaus sein, dass Sie ein anderes Grafikprogramm gewählt haben, weil dort mehr Funktionen zur Verfügung stehen. Wenn das andere Programm aber so großartig ist, warum nehmen Sie dann nicht auch die Änderungen, die Sie zuerst mit Flash erstellen wollten, direkt in diesem Programm vor, anstatt zu versuchen, die mit Flash bearbeitete Datei wieder einzulesen? Die beste Möglichkeit, ein editierbares Vektorgrafikformat aus Flash zu exportieren, ist das Format Adobe Illustrator (.ai). Im einfachsten Fall werden Sie wahrscheinlich ein einzelnes Bild exportieren. Dazu können Sie einfach das Menü DATEI / BILD EXPORTIEREN und dann das Illustrator-Format auswählen. Diese Datei können Sie nun mit jedem Grafikprogramm finden, das .ai-Dateien lesen kann. Leider kann Ihnen niemand versprechen, dass diese Vorgehensweise immer ohne Fehler funktionieren wird, aber es scheint so, als sei dies die beste Möglichkeit.

97

Grafiken in Flash importieren

Wenn es sich um eine einfache Grafik handelt, können Sie versuchen, die Technik des Kopierens und Einfügens zu verwenden. Normalerweise funktioniert das bei kleinen Grafiken, allerdings kann es passieren, dass sich die Grafik unterscheidet, wenn Sie sie wieder nach Flash zurückbringen. Sie werden beispielsweise Linien nicht mehr so verbiegen können, wie Sie es vorher konnten, bevor Sie die Grafik in ein anderes Programm exportiert hatten. Ich habe schon sehr viele Techniken ausprobiert und das einzige, was ich definitiv festgestellt habe, ist, dass man sehr viele verschiedene Optionen ausprobieren muss, bevor man die Einstellung findet, die gut funktioniert. Im Folgenden fasse ich die Hauptpunkte dieses Abschnitts zusammen: 쐽

Versuchen Sie, alle Grafiken in Flash zu erstellen.

쐽

Wenn Sie auf andere Programme ausweichen, um Grafiken zu erstellen, versuchen Sie diese nicht zu kompliziert zu machen.

쐽

Wenn Sie Dateien von anderen Vektorprogrammen importieren müssen, ist es meist die beste Möglichkeit, das .swf-Format zu verwenden, da dieses sich problemlos nach Flash importieren lässt.

쐽

Eine Alternative zum .swf-Format ist, Grafiken in Freehand zu erstellen und Flash diese Datei importieren zu lassen. Für diese Vorgehensweise sollten Sie jedoch mit Freehand gut vertraut sein.

쐽

Wenn Sie eine Datei aus Flash exportieren, in einem anderen Programm bearbeiten und dann nach Flash zurückholen (was eigentlich schon nach Ärger riecht), sollten Sie das Illustrator-Format.ai wählen.

쐽

Abschließend sei gesagt, dass Sie immer mehrere Einstellungen ausprobieren sollten und dabei die Dateigröße im Auge behalten müssen (was wir in Kapitel 20 noch genauer besprechen werden).

3.4

Bitmaps verwenden (auch bekannt als Rastergrafiken)

In diesem Abschnitt werden wir lernen, wie man Bitmaps (Rastergrafiken) in Flash verwenden kann. Es gibt einige Charakteristiken von Rastergrafiken, die so nicht mit Flash erzeugt werden können. Die einzige Warnung, die man beachten sollte, wenn man Rastergrafiken verwendet, ist: Stellen Sie fest, ob Sie wirklich Rastergrafiken benötigen. Es folgt eine Zusammenfassung von Einsatzgebieten, in denen Rastergrafiken nicht wegzudenken sind:

98

Bitmaps verwenden (auch bekannt als Rastergrafiken)

쐽

Eine Fotografie. Der einzige Zeitpunkt, an dem man über ein Vektorbild als Alternative zu einem Foto nachdenken kann, ist, wenn das Bild ein deutlich geometrisches Objekt zeigt.

쐽

Eine Serie von Standbildern, die aus einem Video stammt.

쐽

Ein Bild mit Spezialeffekten, die nicht mit Vektoren erzeugt werden können (z.B. Wolken, Feuer, Wasser oder sonstige Natureffekte).

Wenn Sie noch nicht so vertraut mit dem Unterschied von Vektor- und Rastergrafiken sind, kann es einige Zeit dauern, bis Sie gelernt haben, die richtige Wahl zu treffen. Die Dateiformate .gif, .jpg, .png, .bmp und .pct sind allesamt Rasterformate. Das soll allerdings nicht heißen, dass jedes Bild in einem solchen Format nicht auch in einem Vektorformat denkbar wäre. Was in Wirklichkeit zählt, ist der Inhalt des Bildes. Wenn Sie also eine GIF-Datei vorliegen haben, sollten Sie sich diese zuerst ansehen, um zu entscheiden, ob eine Rastergrafik hier sinnvoll ist. Ich will Ihnen hier eine kleine Entscheidungsregel an die Hand geben: Wenn Sie sehen, dass Sie den Inhalt der Grafik auch in Flash erzeugen können, sind Sie besser beraten, das Bild selbst in Flash zu erzeugen. Sollte es sich um ein Foto handeln, werden Sie wahrscheinlich nicht dazu in der Lage sein. In diesem Falle sollten Sie die Rastergrafik importieren. Wenn es sich allerdings um das Bild einer Schachtel handelt, können Sie diese wahrscheinlich genauso gut zeichnen und dabei die Vorteile einer Vektorgrafik nutzen, ohne die Rastergrafik-Bremse zu ziehen.

Rastergrafiken importieren Der Import eine Rastergrafik gestaltet sich sehr einfach. Wählen Sie das Menü DATEI / IMPORTIEREN und wählen Sie ein Rastergrafikformat aus. Wählen Sie dann die Datei, die importiert werden soll. Das war's. Jedes Mal, wenn Sie eine Rastergrafik importieren, wird diese nicht nur auf die Bühne gelegt, sondern gleichzeitig als Objekt in die Bibliothek verschoben. Wenn Sie die Grafik auf der Bühne also löschen, bleibt immer noch das Objekt in der Bibliothek bestehen (siehe Abbildung 3.8). Nachdem Sie eine Rastergrafik importiert haben, müssen Sie diese in der Bibliothek belassen. Hier können Sie übrigens festlegen, wie das Bild exportiert werden soll, wenn Sie einen Film für das Internet erstellen. Wenn Sie die Einstellungen unverändert lassen, wird das Bild mit den Standardeinstellungen exportiert. Sie können natürlich spezielle Einstellungen für jedes einzelne Bild festlegen. Lassen Sie uns eine Rastergrafik importieren und die einzelnen Optionen kennen lernen.

99

Grafiken in Flash importieren

Abbildung 3.8: Nachdem Sie eine Rastergrafik importiert haben, wird ein Grafikobjekt in die Bibliothek eingefügt.

Aufgabe: Importieren Sie eine Rastergrafik! 1. Legen Sie einen neuen Film an und wählen Sie DATEI / IMPORTIEREN. Wählen Sie dann eine Rastergrafik aus (C:\Windows ist ein guter Ort zum Nachschlagen). 2. Klicken Sie auf die Grafik auf der Bühne und löschen Sie diese. Da es sich um eine Rastergrafik handelt, ist sie immer noch in der Bibliothek gespeichert. 3. Öffnen Sie die Bibliothek über FENSTER / BIBLIOTHEK bzw. (Strg)+(L). 4. Klicken Sie auf die Zeile in der Bibliothek, die mit dem Baumsymbol beginnt und den Namen der Datei enthält, die Sie importiert haben. 5. Im Bibliotheks-Menü OPTIONEN / EIGENSCHAFTEN sollten Sie die Bitmap-Eigenschaften sehen (siehe Abbildung 3.9). 6. In diesem Fenster können Sie die Exporteigenschaften für die soeben importierte Grafik einstellen. Schließen Sie dieses Fenster bitte noch nicht.

100

Bitmaps verwenden (auch bekannt als Rastergrafiken)

Abbildung 3.9: In diesem Fenster können Sie für jedes einzelne Bild einstellen, wie es später mit dem gesamten Film exportiert werden soll.

Bitmap-Einstellungen verändern Flash kann alle möglichen Rastergrafikformate importieren, benutzt selbst beim Export eines Films aber lediglich die Formate JPG, GIF oder PNG. Man nennt eine Grafik auch Bitmap, wenn sie sich in der Flash-Bibliothek befindet. Das bedeutet, dass Sie immer im Dialogfeld Bitmap-Eigenschaften die Eigenschaften eines Bildes verändern müssen. Experimentieren Sie ein wenig mit den Bitmap-Eigenschaften, indem Sie auf die Schaltfläche Testen klicken, nachdem Sie die Einstellungen geändert haben. Beobachten Sie dabei sowohl das Bildfenster als auch die angegebene Dateigröße (siehe Abbildung 3.10).

Abbildung 3.10: Wenn Sie eine niedrige Grafikqualität (10) einstellen und danach den Knopf Testen drücken, sehen Sie sowohl einen Ausschnitt des Ergebnisbildes als auch die neue Dateigröße.

101

Grafiken in Flash importieren

JPEG-Komprimierung ist normalerweise die effizienteste Option. Wenn Sie nicht gerade eine PNG- oder GIF-Datei importieren, wird Flash die Komprimierung automatisch auf JPG einstellen. Wenn Sie eine JPEG-Datei importieren, wird Flash zusätzlich die Optionen Importierte JPEG-Daten verwenden aktivieren (siehe Abbildung 3.11). In diesem Fall sollten Sie diese Einstellung unverändert lassen.

Abbildung 3.11: Wenn Sie JPEG-Dateien importieren, können Sie die OriginalKomprimierung beibehalten.

Es gibt zwei sinnvolle Vorgehensweisen, wenn Sie eine Rastergrafik nach Flash importieren wollen. Bei der ersten importieren Sie eine Datei mit der höchsten Qualität, die Sie aufbringen können (z.B. eine BMP-Datei) und experimentieren dann mit den Bitmap-Kompressions-Einstellungen von Flash, um den besten Kompromiss herauszufinden. Im zweiten Fall werden Sie eine andere Bildbearbeitungssoftware verwenden – wie zum Beispiel PaintShop Pro – um eine JPEG-Datei mit dem besten Kompromiss zwischen Dateigröße und Qualität herzustellen. Diese Datei werden Sie direkt nach Flash importieren und mit der Original-Komprimierung abspeichern. Ich rate davon ab, eine bereits komprimierte Datei weiter zu komprimieren. Das Ergebnis wäre eine extrem schlechte Qualität. Auch wenn Sie andere gängige Formate, wie zum Beispiel BMP und PCT importieren, wird Flash mit der JEPG-Komprimierung arbeiten. Allerdings wird im Fenster Bitmap-Einstellungen die Option Standardqualität des Dokuments verwenden eingeblendet (siehe Abbildung 3.12). Auf den ersten Blick sieht diese Option ähnlich aus wie Importierte JPEG-Daten verwenden. In Wirklichkeit handelt es sich aber um eine ganz andere Option. Wenn Sie diesen Punkt ausgewählt lassen, wird das Bild mit den globalen Dokumenteinstellungen komprimiert. Dazu können Sie im Anhang C mehr lesen.

102

Bitmaps verwenden (auch bekannt als Rastergrafiken)

Abbildung 3.12: Wenn Sie andere als JPEGDateien importieren, wird die Option Standardqualität des Dokuments verwenden eingeblendet.

Sollten Sie die soeben besprochene Option ausschalten, können Sie für dieses Bild individuelle Einstellungen angeben. In diesem Fall erscheint ein Feld, in dem Sie die JPEGQualität einstellen können. Wenn Sie hier eine kleine Zahl eingeben, wird die Dateigröße stark vermindert und die Qualität wird extrem nachlassen. Sollten Sie eine bessere Qualität wünschen, stellen Sie einen Wert ein, der in Richtung 100 geht (das ist gleichzeitig der Maximalwert). Betätigen Sie einfach die Schaltfläche Testen, um den besten Kompromiss zwischen Bildqualität und Dateigröße zu finden (siehe Abbildung 3.13).

Abbildung 3.13: Wenn man bei diesem Bild die Qualität auf 10 stellt, ist die Dateigröße um 60% geschrumpft.

Im Vorschaufenster oben links können Sie genau erkennen, wie das Bild aussehen wird, wenn es mit den angegebenen Einstellungen exportiert wird. Ein kleiner Tipp am Rande: Sie können das Bild mit der Maus bewegen. Außerdem stehen Ihnen einige Ansichtsoptionen zur Verfügung, wenn Sie auf das Vorschaubild rechtsklicken.

103

Grafiken in Flash importieren

In Abbildung 3.14 sehen Sie den Unterschied verschiedener Qualitätsstufen am gleichen Bild. Bitte beachten Sie, dass die Bilder JPEG 80 und JPEG 100 nahezu die gleiche Qualität haben, aber die Dateigröße von JPEG 80 weniger als ein Viertel der JPEG 100 Dateigröße ist.

JPEG 15, 13 kb

JPEG 50, 28 kb

JPEG 80, 49 kb

JPEG 100, 204 kb

Abbildung 3.14: Die Ergebnisse verschiedener Kompressions-Raten beim gleichen Bild

Original BMP, 697 kb

104

Bitmaps verwenden (auch bekannt als Rastergrafiken)

Abschließend will ich noch die letzte Qualitätsstufe beschreiben: Sie heißt Verlustfrei (GIF/PNG). Sollten Sie also eine Datei in diesem Format importieren, wird die verlustfreie Komprimierung automatisch eingestellt. Allerdings können Sie diese Einstellung auch bei anderen Dateiformaten von Hand vornehmen. Sollte diese Option aktiv sein, wird Flash sozusagen die Original-Datei verwenden. Damit ist immer die beste Qualität sichergestellt. Allerdings müssen Sie dafür einen recht hohen Preis bezahlen: Die Dateigröße wird sehr stark anschwellen und das bedeutet eine lange Downloadzeit aus dem Internet. Diese Option lohnt sich eigentlich nur, wenn Sie eine Präsentation erstellen, die Sie beispielsweise auf CD oder in Ihrem lokalen Netzwerk verteilen wollen. Wenn das nicht der Fall ist, sollten Sie nur mit dem Gedanken spielen, diese Option zu benutzen, wenn die höchste Qualität des importierten Bildes absolut höchste Priorität hat.

Rastergrafiken in Vektorgrafiken konvertieren Es gibt zwei Standardsituationen, die förmlich danach schreien, eine Rastergrafik in eine Vektorgrafik zu konvertieren. Die erste Situation betrifft Grafiken, die im Vektorformat besser zu handhaben sind. Im zweiten Fall bringen Sie vielleicht Ihre künstlerische Ader zur Geltung, indem Sie Spezialeffekte über die Konvertierung erzeugen. Lassen Sie uns einmal eine solche Konvertierung durchspielen:

Aufgabe: Eine Rastergrafik in eine Vektorgrafik um wandeln 1. Erstellen Sie eine neue Datei und wählen Sie DATEI / IMPORTIEREN. Danach wählen Sie eine Grafik-Datei aus, die möglichst wenig Farbverläufe enthält. 2. Vergrößern Sie die Ansicht der Grafik, um zu sehen, wie bei Rastergrafiken jeder einzelne Bildpunkt einzeln dargestellt wird. In hohen Vergrößerungen erhalten Sie eine »Klötzchengrafik« (siehe Abbildung 3.15), deshalb sollte man bei Rastergrafiken lieber die Finger von Vergrößerungen lassen. 3. Wählen Sie das Bild aus und aktivieren Sie den Menüpunkt MODIFIZIEREN / BITMAP NACHZEICHNEN. Es erscheint ein Fenster (siehe Abbildung 3.16) mit einigen Einstellmöglichkeiten. Tragen Sie bitte bei Farbschwelle den Wert 1 ein. Damit wird ausgedrückt, wie dicht zwei Farben beieinander liegen müssen, um als gleiche Farbe zu gelten. Kleinste Fläche gibt an, wie groß die kleinste Vektorfläche sein darf. Stellen Sie hier eine 10 ein. Lassen Sie Kurvenanpassung und Kantenschwelle auf dem Wert Normal. Klicken Sie nun auf OK. 4. Die Grafik besteht nun nur noch aus Vektoren. Vergrößern Sie die Ansicht wieder und Sie werden feststellen, dass Sie zwischen den einzelnen Farbbereichen klare Trennlinien haben, was für ein schärferes Bild sorgt.

105

Grafiken in Flash importieren

Abbildung 3.15: Eine Rastergrafik sieht bei einer starken Vergrößerung eher wie eine »Klötzchengrafik« aus.

Abbildung 3.16: Im Fenster Bitmap nachzeichnen können Sie festlegen, wie die Konvertierung in Vektoren vonstatten gehen soll.

Ein Artefakt ist jedes ungewollte oder obskure Ergebnis eines Prozesses. Beispielsweise ist das Rauschen in einer Radiosendung ein Artefakt der Übertragung. Moiré-Effekte in Bildern von Magazinen, Farbverschiebungen im Fernsehen, Regentropfen auf der Kameralinse und Druckfehler in Büchern sind allesamt Beispiele für Artefakte. Genauso bringt der Vorgang Bitmap nachzeichnen in Flash fast immer solche Artefakte hervor. Ebenso erzeugt die JPEG-Komprimierung Artefakte, die am meisten auffallen, wenn Sie die Qualität auf einen sehr niedrigen Wert stellen. Je nachdem, welches Bild Sie ausgewählt haben, werden Sie mit dem Ergebnis mehr oder weniger zufrieden sein. Deshalb will ich Ihnen an dieser Stelle nicht vorenthalten, dass es spezielle Programme (z.B. Adobe Streamline) für diese Zwecke gibt. Bevor Sie sich allerdings teure Software zulegen, sollten Sie sich ein wenig mit den Einstellungen im zuvor besprochenen Fenster vertraut machen.

106

Bitmaps verwenden (auch bekannt als Rastergrafiken)

쐽

Während der Umwandlung wird Flash versuchen, Farbflächen voneinander zu trennen und in geometrische Figuren umzuwandeln. Farbschwelle gibt dabei an, wie stark die Farben voneinander abweichen dürfen, um noch als gleiche Farbfläche zu gelten. Wenn Sie den Wert sehr hoch ansetzen, wird das Ergebnis nur noch aus wenigen geometrischen Figuren bestehen.

쐽

Kleinste Fläche gibt an, wie groß die kleinste Fläche sein darf, die Flash erzeugen wird. Wenn Sie ein sehr detailliertes Bild haben, sollten Sie diesen Wert sehr klein halten (es sei denn, Sie wünschen einen Mosaik-Effekt).

쐽

Kurvenanpassung gibt an, wie stark die Geraden und Kurven kopiert werden.

쐽

Kantenschwelle gibt an, ob Ecken bestehen bleiben oder entfernt werden sollen.

Die Abbildungen 3.17 bis 3.20 sind verschiedene Beispiele von Rastergrafiken, die in Vektorgrafiken umgewandelt wurden.

Abbildung 3.17: Hier wurden große weiche Vektorflächen erstellt, die mit jeder beliebigen Farbe ausgefüllt werden können.

Rechts: Farbschwelle 100, kleinste Fläche: 100

Bitmap-Sequenzen Obwohl Flash nicht gut mit Videos umgehen kann, wurde jedoch an die nächstbeste Möglichkeit gedacht – Bildsequenzen. Dabei handelt es sich um eine Serie von Standbildern. Sie mögen vielleicht denken, dass Sie ein echtes Video ansehen, was auch einige Leute bei einem Projekt dachten, das ich vor kurzem in Flash erstellt habe (siehe Abbildung 3.21). Der Betrachter kann dabei Bildsequenzen betrachten, die zuvor einem Video entnommen wurden. Dabei handelt es sich nicht wirklich um »Video«, denn es fehlt am synchronisierten Ton. Der Prozess war eigentlich ganz einfach, denn man benötigt dazu nur eine VideoBearbeitungssoftware, mit der man die einzelnen Bilder exportiert, um sie danach in Flash einzubinden.

107

Grafiken in Flash importieren

Abbildung 3.18: Bitte beachten Sie, dass sogar die Fenster im rechten Bild bei einer hohen Farbschwelle zusammengefasst werden.

Mitte: Farbschwelle 10, kleinste Fläche: 100 Rechts: Farbschwelle 100, kleinste Fläche: 100

Abbildung 3.19: Ein besonders künstlerischer Effekt lässt sich erzielen, wenn man einen relativ kleinen Wert als Farbschwelle angibt und die kleinste Fläche an die Bildgröße anpasst.

Rechts: Farbschwelle 40, kleinste Fläche: 40 Vielleicht denken Sie jetzt, dass es recht lange dauern mag, die ganze Sequenz von Bildern zu importieren. Im Normalfall werden Sie von Flash dabei gut unterstützt. Wenn Sie eine Serie von Bildern erzeugt haben, die in ihren Dateinamen fortlaufende Nummern enthalten, und wenn sich dazu noch alle Bilder im gleichen Ordner befinden, importieren Sie lediglich das erste Bild und Flash wird automatisch nachfragen, ob Sie die restlichen Bilder auch noch einbinden wollen (siehe Abbildung 3.22). In diesem Fall wird Flash die restlichen Arbeiten für Sie erledigen, damit eine Bild-für-Bild-Animation entsteht. Dazu erhalten Sie weitere Informationen, wenn Sie das Kapitel 7 lesen.

108

Bitmaps verwenden (auch bekannt als Rastergrafiken)

Abbildung 3.20: Die hohe Farbschwelle beim Bild unten links verursacht die Streifen am Himmel.

Unten links: Farbschwelle 110, kleinste Fläche: 10 Unten rechts: Farbschwelle 30, kleinste Fläche: 10

Abbildung 3.21: Auf der Homepage www.m-three.com finden Sie einige Actionsequenzen, die ein Video simulieren.

109

Grafiken in Flash importieren

Abbildung 3.22: In den meisten Fällen wird Flash Sie unterstützen, wenn Sie eine Serie von Bildern importieren.

3.5

Zusammenfassung

Erstellen Sie so viele Grafiken wie möglich direkt in Flash. Sollten Sie in diesem Kapitel auch nichts anderes gelernt haben, müssen Sie diesen Punkt doch immer im Hinterkopf behalten: Vermeiden Sie Grafikimporte, wann immer es geht. Allerdings mag es immer noch Ausnahmesituationen geben, in denen Sie Grafiken importieren wollen. Das kann zum Beispiel der Fall sein, wenn Sie eine Grafik besitzen, die man unmöglich in Flash neu zeichnen kann. Auch wenn es sich um ein Foto handelt, besteht so ein Ausnahmefall. Wenn also kein Weg an einem Import vorbeiführt, sollten Sie versuchen, die Datei vor dem Import zu optimieren. Bei Rastergrafiken stehen Ihnen verschiedene Möglichkeiten zur Verfügung, die Dateigröße zu reduzieren. Außerdem können Sie solche Grafiken in Vektoren umwandeln.

3.6

Workshop

F&A F

Ich habe ein Foto, das ich als Rastergrafik in Flash einbinden will. Ich habe dieses Foto schon gescannt und will es nun abspeichern. Welches Dateiformat soll ich wählen? Es gibt einfach so viele. A

F

110

Normalerweise sollten Sie alle Grafiken im bestmöglichen Dateiformat abspeichern, bevor Sie diese nach Flash importieren. Wenn die Grafik dann einmal in Flash vorhanden ist, können Sie diese immer noch komprimieren. In diesem Falle empfehle ich Ihnen beispielsweise eine BMP-Datei. JPEG-Dateien sind bereits komprimiert und können 1:1 nach Flash übernommen werden.

Wie kann ich herausbekommen, wie viel Speicherplatz eine Grafik im fertigen Film einnehmen wird?

Workshop

A

F

Ich habe eine Rastergrafik importiert und in Vektoren umgewandelt. Das Ergebnis sieht sehr gut aus. Allerdings ist die Dateigröße angestiegen. Wie kann das sein? Vektorgrafiken sollen doch kleiner sein als Rastergrafiken, richtig? A

F

Wenn es sich um eine Rastergrafik handelt, können Sie dieses im Fenster BitmapEinstellungen auslesen. Bei Vektorgrafiken ist das etwas schwieriger. Hier können Sie beispielsweise die einzelne Grafik herauskopieren und getrennt als SWF-Datei abspeichern. Betrachten Sie dann die Dateigröße. Damit haben Sie einen Richtwert, wie viel Speicherplatz diese einzelne Grafik im Gesamtfilm einnehmen wird.

Nicht notwendigerweise. Hier handelt es sich um ein weit verbreitetes Missverständnis. Wahrscheinlich haben Sie die Einstellungen so gewählt, dass jeder einzelne Bildpunkt als Vektorfläche definiert wurde. Somit muss für jeden Bildpunkt nicht nur die Farbe, sondern auch eine mathematische Funktion, welche die Fläche angibt, festgehalten werden. Die Lösung des Problems liegt einfach darin, die Farbschwelle drastisch abzusenken, um größere Flächen zu erzeugen. Nur wenn die Grafik weniger kompliziert wird, kann man auch von kleineren Dateigrößen ausgehen.

Ich besitze eine Grafik, die eigentlich recht einfach ist. Allerdings kann man diese nicht in Flash erzeugen. Die einzige Lösung ist doch nun, sie zu importieren, richtig? A

Das klingt für mich wie ein Widerspruch: Die Grafik soll recht einfach sein, lässt sich aber nicht in Flash rekonstruieren? Wenn es sich gar nicht anders lösen lässt, importieren Sie diese Grafik ruhig. Sie sollten Sie aber möglichst zuvor als SWFDatei abspeichern.

Übungsaufgaben 1. Welches Grafikformat wird typischerweise nach Flash importiert? a. Raster b. Vektor c. Das hängt vom Inhalt des Bildes ab. 2. Wenn Sie eine .gif-Datei nach Flash importiert haben und den gesamten Film speichern, welche Kompressionsrate verwendet Flash dann für dieses Bild? a. Das hängt von der Einstellung Komprimierung im Dialog Bitmap-Eigenschaften ab. b. Flash verwendet immer eine JPEG-Komprimierung. Lediglich der Komprimierungsgrad hängt von den Einstellungen ab. c. GIFs werden als GIFs exportiert.

111

Grafiken in Flash importieren

3. Wenn Sie eine Illustrator-Datei importiert haben, das Ergebnis aber nur einen Haufen undefinierbarer Skizzen anzeigt, was haben Sie dann wahrscheinlich falsch gemacht? a. Sie haben die »Einfachheits«-Regel gebrochen. b. Sie haben irrtümlicherweise eine Rastergrafik importiert. c. Sie haben versucht, eine Illustrator-Datei mit einer höheren Versionsnummer als 6 zu importieren.

112

Fortgeschrittene Zeichentechniken

4

Fortgeschrittene Zeichentechniken

Wir haben die letzten beiden Kapitel damit verbracht, grundlegende Zeichen- und Grafikimport-Fähigkeiten zu erlernen. In diesem Kapitel werden Sie Ihr Wissen vertiefen und weiterführende Techniken kennen lernen. Wenn Sie ein erfahrener Illustrator- oder Freehand-Anwender wären , wäre es ungewöhnlich, wenn Sie nach der Lektüre dieses Kapitels diese Programme nicht mehr benutzen würden. Allerdings werden Sie jetzt die Macht der einzelnen Flash-Zeichen-Werkzeuge kennen lernen und feststellen, dass diese ganz leicht zu bedienen sind. Wahrscheinlich kann Flash Ihre anderen Zeichenprogramme nicht ersetzen, allerdings ist es definitiv das beste Programm, um die Zeichnungen für Ihre animierte Internetseite zu erstellen. In diesem Kapitel lernen Sie, 쐽

selbstdefinierte Farbtöne und Farbverläufe zu erstellen,

쐽

gezeichnete Objekte auszuwählen und zu isolieren

쐽

und Gruppen zu verwenden und zu bearbeiten.

4.1

Benutzerdefinierte Farben und Farbverläufe

Wie Sie in Flash Farben verwenden, ist einzig und allein Ihre Entscheidung. Allerdings sollten Sie dabei einige technische Gegebenheiten berücksichtigen, wenn Sie einen FlashFilm im Web veröffentlichen wollen. Generell können Sie aber jede Farbe verwenden. In diesem Abschnitt werden Sie lernen, wie Sie benutzerdefinierte Farbtöne erstellen und eine neue definierte Farbpalette für Ihren Film abspeichern. Außerdem werden Sie sehen, wie man Farbverläufe erstellt und mit ihnen arbeitet.

Farbtöne und Farbverlaufsfelder erstellen Im zweiten Kapitel haben wir jedes Mal, wenn wir eine neue Farbe für Linien oder Füllungen verwendet haben, ein Farbfeld ausgewählt, dass in der Werkzeugleiste angezeigt wurde. Wenn Sie auf die Füllfarbe geklickt haben, wurden alle aktuell verfügbaren Farbtöne angezeigt. Standardmäßig sind nur 216 »Internetfarben« verfügbar. Es wird für Anwender, die nur 256 Farben (8 Bit) zur Verfügung haben, empfohlen, nur diese 216 von Flash zur Verfügung gestellten Farben zu verwenden. Die restlichen 40 Farben werden vom Browser (in den Schaltflächen und in Menüs) je nach Betriebssystem unterschiedlich belegt und können gegebenenfalls falsch angezeigt werden. Im Normalfall wird der Betrachter allerdings nicht an 256 Farben gebunden sein, so dass Sie Ihre eigenen Farben erstellen können.

114

Benutzerdefinierte Farben und Farbverläufe

Wenn man seinen eigenen Farbton erstellen will, muss man zwei Schritte durchführen: Zuerst muss man die neue Farbe im Farbmischer definieren und danach als Farbton abspeichern. In diesen Prozess können bis zu drei Bedienfelder einbezogen werden: Farbmischer, Farbtöne und Füllung. Wenn Sie die Übungsaufgaben in diesem Kapitel durchführen, sollten Sie diese Bedienfelder eingeschaltet haben. In der ersten Aufgabe werden Sie eine benutzerdefinierte Farbe erstellen.

Aufgabe: Erstellen Sie einen benutzerdefinierten Farbton! In dieser Aufgabe werden Sie verschiedene Wege kennen lernen, wie man Farbtöne erstellt und so abspeichert, dass man sie später weiterverwenden kann. Folgen Sie wie gewohnt diesen Schritten: 1. Stellen Sie sicher, dass sowohl das Bedienfeld Farbmischer als auch das Bedienfeld Farbtöne sichtbar ist. Sie können die beiden auseinander ziehen, indem Sie die Registerkarten verschieben. 2. Klicken Sie nun im Farbmischer auf die Farbleiste (siehe Abbildung 4.1) und bewegen Sie die Maus bei gedrückter linker Maustaste, um zu sehen, wie sich die Farbe verändert. Auch wenn die Auswahl an Farben nicht unendlich ist, gibt es doch viel mehr als 216 Kombinationen.

Abbildung 4.1: Wenn Sie eine Farbe mit dem Farbmischer erstellen wollen, müssen Sie auf die Farbleiste klicken.

115

Fortgeschrittene Zeichentechniken

3. Sie sollten bei dieser Aktion feststellen, ob sich die Zahlen in den RGB-Feldern (für Rot, Grün und Blau) verändern. Farben werden aus 256 »Schattierungen« der additiven Grundfarben Rot, Grün und Blau (mit den Werten 0 bis 255) dargestellt. Diese numerischen Werte können mitunter sehr hilfreich sein. Eine Firma, die ihr Logo immer in einer festen Farbe angezeigt haben will, kann beispielsweise spezielle RGB-Werte angeben. 4. Eine andere Art, eine Farbe auszuwählen, ist, sie von einem anderen Ort zu kopieren. Das funktioniert sogar außerhalb von Flash. Nehmen wir einmal an, Sie wollen genau die Farbe verwenden, die im Flash-Logo verwendet wird. Öffnen Sie dazu die HilfeDatei und positionieren Sie den Internetbrowser so, dass Sie gleichzeitig Flash und die Hilfeseite sehen können. 5. Klicken Sie nun im Farbmischer auf die Füllfarbe und halten Sie die Maustaste gedrückt, während Sie den Mauszeiger auf die »5« im Flash-Logo ziehen (siehe Abbildung 4.2). Die aktuell eingestellte Füllfarbe wird sich genau der Farbe des Logos anpassen.

Abbildung 4.2: Es ist möglich, eine Farbe zu kopieren, die außerhalb von Flash angezeigt wird. Auf der linken Seite des Bildschirms befindet sich eine Internetseite, aus der eine Farbe kopiert wird.

6. Da Sie nun eine neue Farbe erstellt haben, können Sie diese direkt einsetzen (wählen Sie doch den Pinsel aus, um das direkt auszuprobieren). Trotzdem sollten Sie diese Farbe als Farbton abspeichern, um sie später einfach auswählen zu können, ohne den Farbmischer verwenden zu müssen. Wählen Sie das Optionsmenü im Farbmischer-Bedienfeld aus (der Pfeil oben rechts in der Nähe des Fragezeichens). Wählen Sie nun Füllmuster hinzufügen. Dadurch wird die aktuelle Farbe ausgewählt und am unteren Rand des Bedienfeldes Farbtöne eingefügt.

116

Benutzerdefinierte Farben und Farbverläufe

7. Scrollen Sie zu den unteren Farben im Bedienfeld Farbtöne und Sie werden die neue Farbe entdecken. Außerdem wird diese Farbe immer dann angezeigt, wenn Sie die Füllfarbe oder Linienfarbe verändern wollen. Sie haben nun einige Wege kennen gelernt, wie man Farben auswählen kann, und eine Möglichkeit, einen Farbton abzuspeichern. Selbstverständlich gibt es noch zusätzliche Methoden. Wenn Sie beispielsweise ein anderes Farbsystem bevorzugen (anstelle von RGB), werden Sie es im Optionsmenü des Farbmischer-Bedienfeldes finden. Vielleicht haben Sie auch schon festgestellt, dass es für jede Farbe die Möglichkeit gibt, die Transparenz (Alpha) in Prozent anzugeben. Je niedriger dieser Wert ist, umso durchsichtiger wird die Farbe sein. Im nächsten Kapitel werden Sie noch lernen, dass es weitere Möglichkeiten gibt, um die Transparenz zu kontrollieren. Allerdings ist es im Normalfall nicht nötig, die Transparenz festzulegen, während Sie eine Farbe erstellen. Der Prozess, den Sie soeben kennen gelernt haben, um Farbtöne zu erstellen, ist im ersten Moment relativ zeitaufwändig. Dennoch kann man damit im späteren Verlauf eines Projektes viel Zeit einsparen. Auch wenn die selbst erstellten Farbtöne standardmäßig nur mit der aktuellen Flash-Datei abgespeichert werden, können Sie diese (nach der zeitaufwändigen Prozedur der Festlegung) als Farbtabelle abspeichern, um sie in späteren Projekten erneut zu öffnen. Dazu können Sie im Bedienfeld Farbtöne das Optionsmenü aufrufen und Farben speichern anklicken. Die so erzeugte Datei kann wie gesagt in anderen Dateien, aber auch von weiteren Teammitgliedern verwendet werden. Um diese Farben zu verwenden, müssen diese dann nur im soeben genannten Optionsmenü den Punkt Farben ersetzen auswählen. (Beachten Sie bitte, dass diese Funktion »ersetzen« und nicht »hinzufügen« heißt. Deshalb werden alle Farben gelöscht, die Sie zuvor erstellt haben.) Es gibt zwei weitere Optionen, die auf den ersten Blick gleich aussehen – Standardfarben laden und im Web 216. Die Standardfarben, die mit Flash ausgeliefert werden, sind Web 216. Allerdings können Sie eigene Farben erzeugen und Als Standard speichern, wenn Sie das wünschen. Von dem Moment an werden alle neuen Dateien mit diesen Farben initialisiert. Allerdings können Sie dann mit dem Punkt Web 216 wieder zu den Original-Standardfarben von Flash wechseln. Ich will noch eine weitere Bemerkung zum Speichern von Farben anbringen: Das StandardDateiformat für Farbtabellen ist .act. Solche Farbtabellen können in Programmen wie Photoshop und so weiter eingelesen werden. Selbstverständlich können diese Programme dann auch wieder .act-Dateien abspeichern, um sie im Gegenzug in Flash einzubinden. Die Idee, die dahinter steckt, ist, es Teammitgliedern zu vereinfachen, Farbtabellen auszutauschen. Ohne Zweifel werden Sie festgestellt haben, dass Füllfarben auch aus Farbverläufen bestehen können. Sie können sowohl gerade Farbverläufe als auch kreisförmige definieren, um sie als Farbton abzuspeichern. In der folgenden Aufgabe werden wir unseren eigenen Farbverlauf erstellen.

117

Fortgeschrittene Zeichentechniken

Aufgabe: Erstellen Sie einen benutzerdefinierten Farbverlauf! In dieser Übung werden Sie einen benutzerdefinierten Farbverlauf erstellen. Folgen Sie wie gewohnt diesen Schritten: 1. Für diese Aufgabe werden alle drei zuvor genannten Bedienfelder benötigt. Füllung, Farbmischer und Farbtöne. Ordnen Sie diese so an, dass sie nicht untereinander liegen und Sie alles auf einen Blick sehen können (siehe Abbildung 4. 3).

Abbildung 4.3: Wenn man einen benutzerdefinierten Farbverlauf erstellen will, werden drei Bedienfelder (Füllung, Farbmischer und Farbtöne) benötigt.

2. Klicken Sie auf den ersten Farbverlauf im Bedienfeld Farbtöne. Wie Sie sehen, gibt das Feld für die Füllfarbe nun diesen Farbverlauf wieder. Wählen Sie nun FÜLLMUSTER DUPLIZIEREN aus dem Optionsmenü des Bedienfeldes Farbtöne. Dadurch wird ein neuer Farbton erstellt und direkt ausgewählt. Sie können diesen sofort bearbeiten, ohne den Standard-Farbverlauf zu verändern. 3. Im Bedienfeld Füllung erscheinen nun zwei Zeiger, die sich an den äußeren Enden des Farbverlauf-Definitionsbalkens befinden. Klicken Sie auf den Zeiger an der linken Seite (die helle Farbe) und der Zeigerkopf wird schwarz. Das zeigt an, dass Sie nun die Farbe dieses Teils des Farbverlaufs bearbeiten. Im Bedienfeld Farbmischer wird nun ebenfalls ein Zeiger erscheinen, der als Farbenstellvertreter dient. Verwenden Sie nun

118

Benutzerdefinierte Farben und Farbverläufe

den Farbmischer, um ein helles Gelb aus der Farbleiste auszuwählen. Wie Sie sehen, haben Sie nun einen Farbverlauf erstellt, der von Gelb nach Schwarz läuft. In der Abbildung 4.4 sehen Sie die soeben besprochenen Zeiger.

Abbildung 4.4: Wenn Sie die linke Seite Ihres Farbverlaufs ausgewählt haben, können Sie im Bedienfeld Farbmischer eine neue Farbe einstellen.

4. Wenn Sie im Bedienfeld Füllung als Farbverlaufsstil kreisförmiger Farbverlauf auswählen, werden Sie sehen, dass sich das Farbfeld erneut verändert. 5. Klicken Sie auf den Zeiger an der rechten Seite des Farbverlaufs und verwenden Sie dann den Farbmischer, um eine hellblaue Farbe auszuwählen. Nun sollten Sie einen kreisförmigen Farbverlauf erzeugt haben, der von Gelb nach Blau geht. 6. Wenn Sie noch weitere Farben in den Farbverlauf einfügen wollen, klicken Sie einfach unterhalb des Farbverlauf-Definitionsbalkens im Bedienfeld Füllung. Es erscheinen sofort neue Zeiger, die Sie sowohl bewegen als auch mit neuen Farben versehen können. Wenn Sie eine Farbe entfernen wollen, ziehen Sie den entsprechenden Zeiger einfach nach unten. 7. Sie brauchen nicht auf den Knopf Speichern unten rechts im Bedienfeld Füllung klicken, da dies im Prinzip nichts anderes ist als die Funktion Füllmuster duplizieren aus dem zweiten Schritt. Da Sie einen benutzerdefinierten Farbverlauf erstellt haben, werden Sie nun lernen, wie man ihn in einem Film verwendet.

119

Fortgeschrittene Zeichentechniken

Farbverläufe verwenden und bearbeiten Egal, ob Sie die Standard-Farbverläufe verwenden oder benutzerdefinierte Farbverläufe erstellen, es gibt immer noch etwas mehr, das Sie zum Thema Farbverlauf wissen sollten. Es genügt nicht, einfach den Farbverlauf als Füllfarbe auszuwählen. Es ist nämlich wichtig, dass Sie zwei weitere Optionen des Farbeimer-Werkzeuges verstehen: Füllung sperren und Füllung transformieren. Wenn Füllung sperren aktiviert ist, wird ein Farbverlauf von Weiß auf Schwarz über mehrere Formen als einziger Farbverlauf zu erkennen sein. Sollte diese Funktion nicht ausgewählt sein, erhält jede Füllung ihren eigenen Farbverlauf von Weiß nach Schwarz. Die Option Füllung transformieren stellt Ihnen die Möglichkeit zur Verfügung, die Eigenschaft eines Farbverlaufs auch dann noch zu verändern, wenn er bereits einer Füllung zugeordnet wurde. Dabei handelt es sich um den Dimmer-Effekt, den Mittelpunkt, die Rotation und die Form. In der folgenden Aufgabe werden diese beiden Optionen verwendet.

Aufgabe: Verändern Sie die Attribute eines Farbverlaufs, den Sie in Ihrem Film verwenden! In dieser Aufgabe werden Sie die Optionen Füllung sperren und Füllung transformieren erkunden, um Farbverläufe komplett kontrollieren zu können. Es folgen die einzelnen Schritte: 1. Wählen Sie eine einfache Farbe aus und zeichnen Sie zwei nahe beieinanderliegende Quadrate. 2. Wählen Sie das Farbeimer-Werkzeug aus und stellen Sie außerdem einen kreisförmigen Farbverlauf ein (der standardmäßige Farbverlauf Weiß nach Schwarz ist nicht schlecht). 3. Stellen Sie sicher, dass die Option Füllung sperren nicht aktiviert ist (siehe Abbildung 4.5). Klicken Sie nun einmal in jedes Quadrat, um beide mit dem kreisförmigen Farbverlauf auszufüllen. Dies ist der normale Modus. Beachten Sie, dass der Mittelpunkt des Farbverlaufs sich genau da befindet, wo Sie geklickt haben. Klicken Sie an verschiedenen Stellen innerhalb eines Quadrates, um den Mittelpunkt des Farbverlaufs zu verschieben. 4. Klicken Sie nun einmal in die Nähe einer Kante, die sich nahe dem anderen Quadrat befindet. Danach klicken Sie auf Füllung sperren. Die letzte Füllung, die Sie erzeugt haben, definiert nun den Mittelpunkt des Farbverlaufs für alle weiteren Füllungen, da Sie Füllung sperren aktiviert haben.

120

Benutzerdefinierte Farben und Farbverläufe

Abbildung 4.5: Die Option Füllung sperren ist nicht aktiviert.

5. Klicken Sie nun in das andere Quadrat und Sie werden sehen, dass sich der Farbverlauf aus dem ersten Quadrat fortführt. Genau das ist der Effekt, der mit Füllung sperren erzielt werden soll. Auch wenn Sie ein zweites Mal in das erste Quadrat klicken, wird der Mittelpunkt des Farbverlaufs gesperrt bleiben. 6. Klicken Sie auf Füllung transformieren, um die erstellten Füllungen bearbeiten zu können. In diesem Modus wird es so aussehen, dass man das Farbeimer-Werkzeug nicht mehr verwenden kann, da außer dem Bearbeiten von Füllungen keine weiteren Aktionen ausgeführt werden können . 7. Klicken Sie auf die Füllung eines der beiden Quadrate und es werden einige Markierungen erscheinen (siehe Abbildung 4.6). Nun können Sie den Mittelpunkt des Farbverlaufs verschieben. An weiteren Markierungen können Sie die Form, die Drehung und den Dimmer-Effekt des Farbverlaufs verändern. 8. Möglicherweise werden Sie die Handhabung dieser Markierungen sehr intuitiv finden. Trotzdem sollten wir damit ein wenig experimentieren. 9. Klicken Sie auf die Mittelpunkt-Verschiebungsmarkierung und bewegen Sie die Maus bei gedrückter Maustaste. Sie werden sehen, dass Sie so den Mittelpunkt des Farbverlaufs bewegen. Beachten Sie, dass sich der Cursor in den Verschiebe-Cursor verwandelt, wenn Sie sich über dieser Markierung befinden (siehe Abbildung 4.7).

121

Fortgeschrittene Zeichentechniken

Abbildung 4.6: Sie können die Funktion Füllung transformieren auf diesen Farbverlauf anwenden (auch wenn er sich über mehrere Figuren erstreckt, da Füllung sperren aktiviert ist).

Abbildung 4.7: Die verschiedenen Cursor der Option Füllung transformieren

10. Klicken Sie auf die Verformungs-Markierung und bewegen Sie erneut die Maus bei gedrückter Maustaste. Wie Sie feststellen werden, verformt sich der Kreis zu einer Ellipse. Auch hier verwandelt sich der Cursor in ein anderes Symbol. Es ist der Verformungs-Cursor (siehe Abbildung 4.7).

122

Benutzerdefinierte Farben und Farbverläufe

11. Wenn Sie auf die gleiche Weise die Dimmer-Markierung verwenden, wird sich auch der Cursor (Sie haben es sicher schon geahnt) in den Dimmer-Cursor verwandeln (siehe Abbildung 4.7). 12. Nun können Sie den Drehwinkel des Farbverlaufs verändern. Es erscheint der gleiche Rotations-Cursor, den wir schon von der traditionellen Rotation kennen (siehe Abbildung 4.7). Bitte beachten Sie, dass die Drehung nur dann einen Effekt hat, wenn der Farbverlauf zuvor verformt wurde. 13. Abschließend sei gesagt, dass der Cursor ein kleines Farbverlaufssymbol enthält, während Sie sich im Modus Füllung transformieren befinden (siehe Abbildung 4.7). Daran können Sie leicht erkennen, dass Sie Füllung transformieren ausschalten müssen, bevor Sie mit dem Farbeimer-Werkzeug normal weiterarbeiten können. (Klicken Sie also erneut auf Füllung transformieren, um in den normalen Modus zurückzukehren.)

Mit einer Rastergrafik füllen Da Sie nun die Verwendung und Bearbeitung von Farbverläufen verstanden haben, können wir uns einer speziellen Funktion zuwenden -Rastergrafiken als Füllung zu verwenden. Grundsätzlich kann jede zuvor importierte Rastergrafik als Füllung verwendet werden. In der folgenden Aufgabe werden Sie mit diesem Spezialeffekt vertraut gemacht.

Aufgabe: Verwenden Sie eine Rastergrafik als Füllung! In dieser Aufgabe werden Sie das Füllen mit Rastergrafiken kennen lernen. Die einzelnen Schritte sehen so aus: 1. Importieren Sie eine beliebige Rastergrafik, wie Sie das im letzten Kapitel schon durchgeführt haben. 2. Löschen Sie die Kopie auf der Bühne (keine Panik, die Grafik ist noch in der Bibliothek gespeichert). 3. Wählen Sie im Bedienfeld Füllung den Punkt Bitmap als Füllstil aus. Sie sehen eine kleine Vorschau Ihrer importierten Grafik. Klicken Sie darauf, um diese Grafik auszuwählen. 4. In der Füllfarbe wird eine sehr kleine Version Ihrer Grafik als aktuelle Füllfarbe angezeigt. Verwenden Sie das Pinsel-Werkzeug, um einige Formen auf die Bühne zu zeichnen. 5. Auch hier können Sie den Punkt Füllung transformieren (im Farbeimer-Werkzeug) verwenden, um Ihre Füllung genauer auszurichten.

123

Fortgeschrittene Zeichentechniken

Texteffekte Im zweiten Kapitel haben Sie gelernt, wie man Text erstellt und Schriftart, Farbe, Stil und so weiter verändert. Nun werden Sie einige geistreiche Möglichkeiten kennen lernen, um Farbverläufe und Bilder als Füllung zu verwenden. Sie werden allerdings schnell herausfinden, dass man Farbverläufe und Rastergrafiken nur Füllungen zuweisen kann – nicht aber Linien oder Texten. Allerdings kann man Texte in Füllungen konvertieren. Wenn der Text dann einmal als Füllung existiert, können Sie alle Techniken verwenden, die bereits in diesem Kapitel besprochen wurden. Die Technik, die verwendet wird, um Texte in Füllungen zu verwandeln, ist recht einfach. Erstellen Sie dazu einfach einen Textblock und versichern Sie sich, dass die Schriftart, die Größe und der Stil richtig eingestellt sind. Wählen Sie nun den gesamten Textblock aus und dann MODIFIZIEREN / TEILEN. Wenn der Text erst einmal geteilt wurde, kann er als Füllung behandelt werden. Seien Sie aber gewarnt, denn wenn der Text erst einmal in eine Füllung konvertiert wurde, werden Sie nie wieder die Wörter bearbeiten können! Deshalb sollten Sie zuvor alle Textattribute festlegen.

4.2

Objekte isolieren

Bisher haben wir eine Menge Zeit damit verbracht, irgendetwas zu zeichnen und das dann zu bearbeiten. Nun werden Sie lernen, wie man einzelne Objekte auswählt, um sie zu verschieben oder zu entfernen. Allerdings ist das Zeichnen in Flash so einfach, dass es manchmal schneller geht, eine fehlerhafte Grafik neu zu erstellen, als sie zu reparieren. Nichtsdestotrotz werden Sie in diesem Abschnitt die Macht kennen lernen, die Ihnen die Fähigkeit verleiht, Objekte auszuwählen. Die typische Isolationstechnik ist, einfach eine Auswahl zu treffen. Bisher wissen Sie, dass Sie eine Linie bewegen können, indem Sie einmal darauf klicken (um sie auszuwählen) und dann bei gedrückter Maustaste die Maus zu bewegen, um die Linie zu verschieben. Vielleicht haben Sie schon gemerkt, dass nur ein Teil der Linie ausgewählt wird, wenn diese über Knicke oder Kanten verfügt. Zeichnen Sie beispielsweise ein Rechteck mit einem Strich (Stift-Werkzeug) und klicken Sie auf diesen Strich. Sie werden feststellen, dass nur eine einzige Seite des Rechtecks ausgewählt wird. Wenn Sie allerdings doppelt klicken, wird der komplette Rahmen des Rechtecks ausgewählt. Das wird natürlich nicht mit einem Oval funktionieren, da es da keine Knicke gibt – Sie werden dabei also mit einem einzigen Klick den kompletten Rahmen selektieren. Genauso verhält es sich auch mit Füllungen, denn wenn Sie einmal auf die Füllung klicken, wird diese ausgewählt. Bei einem Doppelklick auf dieselbe wird allerdings zusätzlich zur Füllung auch die Rahmenlinie in die Auswahl mit aufgenommen.

124

Objekte isolieren

Wenn Sie das bisher schon für sehr hilfreich halten, sollten Sie erst einmal abwarten, bis Sie die weiteren Möglichkeiten kennen gelernt haben, wie man in Flash Objekte auswählen kann.

Wenn Sie es sehen können, können Sie es auswählen Als ich zum ersten Mal eine Flash-Demonstration sah, hat der Mitarbeiter von Macromedia es wie ein Marktschreier präsentiert, der etwas »wie warme Semmeln« verkauft. Er sagte etwas, das sich sofort einprägte: Was man in Flash sehen kann, kann man auch auswählen. Das ist wirklich wahr. Wenn Sie dieses Konzept verstanden haben, wird es für Sie sehr einfach werden, Abschnitte Ihrer Zeichnungen auszuwählen, um sie zu verändern, zu verschieben oder zu löschen. Das sollte man in Aktion sehen. Zeichnen Sie dazu ein Oval und wählen Sie dann das Pinsel-Werkzeug aus, um eine dicke Füllung (in einer anderen Farbe) direkt durch die Mitte zu zeichnen (siehe Abbildung 4.8). Da Sie die linke Seite der Ellipse »sehen« können, können Sie diese auch auswählen.

Abbildung 4.8: Alles was Sie sehen können, können Sie auch auswählen. Da dieses Oval durch den Pinsel in zwei Teile geteilt wurde, können Sie die beiden Abschnitte getrennt voneinander auswählen, da sie ja sichtbar getrennt wurden.

Die Leinwand-Ebene verwenden Ein verwandtes Konzept zu »was Sie sehen können, können Sie auch auswählen« ist die Tatsache, dass alles was man zeichnet, in der gleichen »Ebene« erscheint. In Wirklichkeit ist nichts über oder hinter etwas anderem. Wenn Sie also die Füllung auswählen, die das Oval getrennt hat, (siehe Abbildung 4.7) und diese Füllung verschieben, werden Sie feststellen, dass plötzlich die Mittelsektion des Ovals fehlt (als wenn das Pinsel-Werkzeug etwas »herausgebissen« hätte). Um in der Terminologie von Flash zu bleiben, befindet sich alles, was Sie zeichnen, auf der Leinwand-Ebene. (Das Wort »Ebene« ist hier nicht

125

Fortgeschrittene Zeichentechniken

mit den später besprochenen Ebenen zu verwechseln, die in der Zeitleiste eingestellt werden können). Im späteren Verlauf dieses Kapitels werden Sie sehen, wie man Zeichnungen über- oder untereinander positionieren kann. Für den Moment genügt es aber, wenn Sie Folgendes verstanden haben: Es gibt einen Unterschied zwischen den hier besprochenen Ebenen und den Ebenen in der Zeitleiste. Wahrscheinlich sind Sie zu diesem Zeitpunkt ein wenig frustriert, dass alles, was Sie zeichnen, alles andere »auffrisst«. Allerdings können Sie damit sehr kreativ umgehen, da Sie sehr komplexe Formen erstellen können. In der folgenden Aufgabe werden wir das noch einmal ausprobieren, indem wir einen Halbmond erzeugen.

Aufgabe: Verwenden Sie Figuren auf der Leinwand-Ebene, um einen Halbmond zu erzeugen! In dieser Aufgabe werden wir aus der einzigen Leinwand-Ebene in Flash unseren Vorteil ziehen. Das geht wie immer Schritt für Schritt: 1. Stellen Sie sicher, dass die Linienfarbe eine normale Farbe und kein Farbverlauf ist. Zeichnen Sie einen perfekten Kreis. 2. Doppelklicken Sie nun auf die Füllung des Kreises, um die Füllung und die Rahmenlinie auszuwählen. 3. Wählen Sie BEARBEITEN / KOPIEREN ((Strg)+(C)) und BEARBEITEN / AN POSITION EINFÜGEN ((Strg)+(ª)+(V)). 4. Solange das Duplikat immer noch ausgewählt ist, können Sie die Pfeiltasten verwenden, um es nach rechts zu bewegen (siehe Abbildung 4.9).

Abbildung 4.9: Wenn Sie den duplizierten Kreis über den anderen bewegen, können Sie jeden Bereich auswählen und entfernen, den Sie sehen.

5. Heben Sie die Auswahl auf, indem Sie irgendwo auf den freien Bereich der Bühne klicken und die Formen werden sich gegenseitig »auffressen«. 6. Nun können Sie den zweiten Kreis erneut auswählen und entfernen. Jetzt sollte eine Halbmond-Form auf dem Bildschirm zurückbleiben.

126

Objekte gruppieren

Wenn Sie der Meinung sind, dass diese Aufgabe sehr interessant war, werden Sie weitere Beispiele im Anhang D finden. Es ist erstaunlich, wie man mit ein paar grundlegenden Geometriekenntnissen alle möglichen Arten von Formen erstellen kann.

4.3

Objekte gruppieren

Auch wenn ich Ihnen versprochen habe, dass Sie die Art, wie man mit der LeinwandEbene umgehen kann, lieben werden, kann es vorkommen, dass Sie Grafiken zusammenfügen müssen, ohne dass Sie sich gegenseitig beschädigen. Stellen Sie sich vor, dass Sie ein Firmenlogo über einer anderen Grafik anordnen müssen (siehe Abbildung 4.10). Solange Sie das Logo mit den Kreisen als zweites zeichnen und es beim ersten Versuch richtig positionieren, sieht alles gut aus.

Abbildung 4.10: Solange Sie das Logo mit den Kreisen als zweites zeichnen und es beim ersten Versuch richtig positionieren, sieht alles gut aus.

Abbildung 4.11: Versuchen Sie das Logo mit den drei Kreisen auszuwählen und zu verschieben. In diesem Fall werden Sie schmerzvoll erfahren, dass alles auf der gleichen Leinwand-Ebene gezeichnet wird.

127

Fortgeschrittene Zeichentechniken

Vielleicht gefällt Ihnen das Logo dann aber in einer anderen Position besser (siehe Abbildung 4.11). Wie Sie dort aber auch sehen können, kommt es zu Problemen bei der anderen Grafik. Abschließend sei gesagt, dass verschachtelte Grafiken (siehe Abbildung 4.12) nahezu unmöglich zu erstellen sind – zumindest mit den Möglichkeiten, die Sie bisher kennen gelernt haben. Das ist aber nur so, weil Sie noch nicht gelernt haben, wie man Objekte gruppiert.

Abbildung 4.12: Ohne die Technologie des Gruppierens zu kennen, sind solche Effekte nahezu unmöglich.

Effekte von Gruppierungen Das Gruppieren hat zwei Effekte: 쐽

Der wohl nützlichste Effekt ist, dass gruppierte Objekte in eine eigene Ebene (Achtung: Auch hier sind nicht die Ebenen in der Zeitleiste gemeint) über die Leinwand gelegt werden. Dadurch kann man die Gruppe ober- oder unterhalb anderer Gruppen platzieren, ohne dass sie sich gegenseitig »auffressen«.

쐽

Die Bilder werden zusammengeschlossen. Dadurch wird es ermöglicht, dass man sie als Gruppe bewegen, rotieren und skalieren kann. Dabei wird vermieden, dass man irrtümlicherweise Farben oder Linien der einzelnen Objekte bearbeitet.

Wir werden nun einen kleinen Blick auf beide Effekte werfen. Zuerst will ich ein Beispiel bringen, das zeigt, wie der Effekt des Zusammenschließens funktioniert. Zeichnen Sie ein Rechteck und danach ein Oval direkt darüber. Wählen Sie beide Objekte aus und gruppieren Sie diese, indem Sie MODIFIZIEREN / GRUPPIEREN ((Strg)+(G)) wählen. Zeichnen Sie nun ein weiteres Rechteck. Wählen Sie dessen Füllung und Rahmenlinien aus (denken Sie daran, dass Flash diese als separate Objekte betrachtet) und kopieren Sie diese. Nun besitzen Sie zwei Gruppen, die an der gleichen Stelle angeordnet werden können, ohne sich gegenseitig zu beschädigen. Beachten Sie ebenfalls, dass die zweite Gruppe oberhalb der ersten angeordnet wird. Jede Gruppe besitzt eine effektive Ebene, in der sie angeordnet ist – Sie werden niemals irgendwo »Ebene 1« oder »Ebene 2« lesen können, aber diese Ebene existieren halt. Sie können die Stapelreihenfolge verändern, indem Sie MODIFIZIEREN / ANORDNEN / IN DEN HINTERGRUND auswählen. Wenn Sie über drei oder mehr Gruppen verfügen, macht der

128

Objekte gruppieren

Rest des Menüs ANORDNEN mehr Sinn. NACH VORNE und NACH HINTEN werden die ausgewählten Gruppen eine Ebene weiter bewegen. IN DEN HINTERGRUND wird eine Gruppe hinter alle anderen legen und IN DEN VORDERGRUND wird diese Gruppe vor allen anderen anzeigen. Der andere Effekt der Gruppierung ist, dass alle Objekte zusammengeschlossen werden. Wenn Sie die Gruppe mit dem Oval und dem Quadrat bewegen, können Sie davon ausgehen, dass sie relativ zueinander immer den gleichen Abstand halten. Das ändert sich nur, wenn Sie die Gruppierung aufheben oder bearbeiten (was wir als Nächstes besprechen werden). Das Verschieben, Skalieren und Rotieren betrifft immer die Gruppe als Ganzes. Es gibt eine Ausnahme zu der Regel, dass sich alles in der Leinwand-Ebene befindet, es sei denn es ist gruppiert: Diese Ausnahme betrifft Text. Solange Sie Text nicht in eine Füllung umwandeln, besteht Text weder aus Linien noch aus Füllung. Als solches bildet Text wie gesagt die Ausnahme zur Leinwand-Ebenen-Regel und wird immer oberhalb aller anderen Objekte angezeigt. Wenn Sie Text allerdings in eine Füllung umwandeln, wird er sich verhalten, als sei er direkt zu Beginn gruppiert worden.

Gruppen bearbeiten Man kann Gruppen mit sehr wenig Aufwand bewegen, rotieren und skalieren. Außerdem kann man die Anordnung von Gruppen über das Menü MODIFIZIEREN / ANORDNEN verändern. Aber wie ändert man beispielsweise die Füllfarbe eines Objektes in einer Gruppe? Wenn man mit dem Farbeimer-Werkzeug darauf klickt, passiert gar nichts. Um zwei Objekte innerhalb einer Gruppe mehr zusammenzurücken, ist die einzig sichtbare Möglichkeit, die Gruppierung zuerst aufzuheben (MODIFIZIEREN / GRUPPIERUNG AUFHEBEN), die Veränderung vorzunehmen und daraufhin die Objekte erneut zu gruppieren. Allerdings können die Objekte, während Sie nicht gruppiert sind, versehentlich andere Objekte auf der Leinwand-Ebene »auffressen«. Die Lösung für dieses Dilemma ist, sich in die Gruppe hineinzubewegen. In der folgenden Aufgabe werden wir genau dieses tun.

Aufgabe: Verändern Sie den Inhalt eines gruppierten Objekts! In dieser Aufgabe werden Sie lernen, wie man für kurze Zeit zum Inhalt einer Gruppe wechselt, um deren Inhalt zu bearbeiten. Folgen Sie wie üblich diesen Schritten: 1. Stellen Sie sicher, dass ANSICHT / AUSRICHTEN aktiviert ist. Zeichnen Sie nun ein Quadrat. Wählen Sie sowohl die Füllung als auch die Rahmenlinien aus und kopieren Sie diese über MODIFIZIEREN / KOPIEREN oder (Strg)+(C). 2. Drehen Sie das Quadrat um exakt 45 Grad. 3. Verändern Sie die Füllfarbe und zeichnen Sie einen Kreis.

129

Fortgeschrittene Zeichentechniken

4. Wählen Sie den kompletten Kreis aus (in dem Sie auf die Füllung doppelklicken) und ziehen Sie die Mitte des Kreises auf die obere Ecke des Quadrates (siehe Abbildung 4.13). Da es sich bei dem Quadrat um eine Gruppe handelt, wird kein Objekt das andere »auffressen«. Beachten Sie, dass der Kreis sich hinter der Quadrat-Gruppe befindet. Erinnern Sie sich noch einmal daran, dass Gruppen automatisch auf einer höheren Leinwand-Ebene angeordnet werden.

Abbildung 4.13: Wenn Sie den Kreis auswählen und den Mittelpunkt auf das Quadrat zu bewegen, erhalten Sie die Möglichkeit, diesen Kreis am Quadrat auszurichten.

5. An dieser Stelle werden Sie eine gravierende Änderung am Quadrat vornehmen. Allerdings wollen Sie es dazu nicht aus der Gruppierung nehmen, da es sonst den Kreis »auffressen« würde. Statt dessen gehen Sie einfach für kurze Zeit in die Gruppe hinein. Doppelklicken Sie dazu einfach auf das Quadrat und schon können Sie den Inhalt der Gruppe bearbeiten. 6. Beachten Sie, dass am oberen Bildschirmrand Szene 1; Gruppe steht (Siehe Abbildung 4.14). Es wird Ihnen außerdem auffallen, dass der Rest der Bühne ein wenig schwächer dargestellt wird. Das sind Ihre Hinweise darauf, dass Sie sich in der Gruppe befinden. Alles was Sie nun verändern, wird sich lediglich auf die Quadrat-Gruppe auswirken. 7. Heben Sie nun in der Gruppe die Auswahl auf, indem Sie auf eine freie Stelle der Bühne klicken. Verbiegen Sie nun die beiden unteren Kanten des Quadrates nach innen, um eine flügelähnliche Form zu erzeugen (siehe Abbildung 4.15). 8. Sie können auch andere Veränderungen vornehmen (wie zum Beispiel der Füll- oder Linienfarbe). Wenn Sie damit fertig sind, können Sie wieder zurück zur Hauptszene wechseln. Sie kommen auf zwei Wegen wieder zurück: Der am meisten einleuchtende Weg ist, auf das Wort Szene 1 in der Adressleiste zu klicken. Allerdings hat ein Doppelklick auf eine freie Stelle der Bühne denselben Effekt. Speichern Sie diese Datei oder lassen Sie Flash einfach geöffnet, denn Sie werden mit diesem Beispiel noch weiterarbeiten können.

130

Objekte gruppieren

Abbildung 4.14: Während Sie sich in einer Gruppe befinden, werden Sie feststellen, dass sich die Adressleiste verändert.

Abbildung 4.15: Wenn Sie sich innerhalb der Gruppe des Quadrates befinden, können Sie auch grundlegende Veränderungen an der Form vornehmen.

Wenn sich die Adressleiste ändert und der Inhalt auf der Bühne schwächer dargestellt wird (siehe Schritt 6), handelt es sich um ein wichtiges Moment. Das sind nämlich Hinweise darauf, dass Sie sich in einer Gruppe befinden. Wenn Sie beispielsweise Formen verändern und dann zurück in die Hauptszene wechseln, werden sich die Formen, die Sie in die Gruppe eingefügt haben, mit allem anderen in der Gruppe bewegen. Es gibt sicherlich Momente, in denen man Gruppen anlegen muss, allerdings sollten Sie das dann immer bewusst erledigen. Das Übersehen einer geänderten Adressleiste ist der häufigste Fehler, den man in Flash begehen kann. Also seien Sie bitte immer dann aufmerksam, wenn Sie eine Veränderung in der Adressleiste bemerken. Lassen Sie mich noch eine Sache über Gruppen loswerden: Es gibt keine Regel die besagt, dass man nicht auch Gruppen in Gruppen anlegen dürfte. Wählen Sie beispielsweise den gesamten Kreis aus der vorherigen Aufgabe und gruppieren Sie diesen.

131

Fortgeschrittene Zeichentechniken

Abbildung 4.16: Sowohl der Kreis als auch das Quadrat sind gruppiert und danach noch zusammengruppiert worden.

Wählen Sie dann die Kreis- und Quadrat-Gruppe und bilden Sie daraus eine neue Gruppe. Die interessante Sache an solchen Gruppen von Gruppen ist, dass man in jede Ebene der Gruppe direkt eintauchen kann. Doppelklicken Sie auf die Quadrat-KreisGruppe und Sie befinden sich in dieser Gruppe. Doppelklicken Sie nun auf die QuadratGruppe und Sie sind innerhalb der Gruppe in der Gruppe. Auch diese wird in der Adressleiste angezeigt, damit sie nicht verloren geht. In Abbildung 4.16 sehen Sie ein solches Beispiel.

4.4

Zusammenfassung

Sie haben eine Menge Fähigkeiten erworben. Mit ein wenig Übung werden Sie diese Fähigkeiten verfeinern und vertiefen. In diesem Kapitel haben Sie Farbtöne und benutzerdefinierte Farbverläufe erstellt. Sie haben gesehen, wie man Füllungen – sowohl Farbverläufe als auch Rastergrafiken – transformieren kann, indem man die Optionen des Farbeimer-Werkzeugs verwendet. Die Gruppierung von Formen hat zwei Vorteile: Zuerst einmal werden Objekte von anderen Formen isoliert, so dass sie sich nicht gegenseitig »auffressen«. Zweitens erlaubt es Ihnen, mehrere Formen zusammenzuschließen.

132

Workshop

Abschließend kann Ihnen das Wissen, dass ungruppierte Objekte immer auf der gleichen Leinwand-Ebene gezeichnet werden, dabei behilflich sein, komplexe Formen zu entwickeln.

4.5

Workshop

F&A F

Ich habe in den Farbeimer-Werkzeug-Einstellungen die Option Füllung sperren aktiviert. Wenn ich aber eine Form mit einem Farbverlauf füllen will, sehe ich lediglich eine normale Farbe. Was ist passiert? A

F

Wenn Sie meinen, dass Sie eine normale Farbe sehen, ist es möglich, dass Sie in Wirklichkeit das Ende eines Farbverlaufs betrachten. Die beste Möglichkeit, Füllung sperren zu verwenden ist, zuerst eine Form mit ausgeschalteter Option Füllung sperren zu füllen, die Option danach einzuschalten und daraufhin weitere Formen auszufüllen. Andererseits kann es oft passieren, dass die Transformation des Farbverlaufes zu groß eingestellt ist.

Soll ich lieber RGB, HSB oder HEX als Farbspezifikation verwenden? A

Wie Sie möchten. Keines dieser Systeme ist besser als ein anderes. Jeden Farbwert können Sie auch in jedem anderen System darstellen. Wenn Ihnen jemand einen Farbwert in RGB vorgibt, sollten Sie dieses System verwenden. Wenn Sie die Information in HEX erhalten, nehmen Sie doch einfach das System. Das Ergebnis ist immer gleich.

Übungsaufgaben 1. Woher weiß man, dass man eine Gruppe bearbeitet? a. Alles andere auf der Bühne ist abgeschwächt dargestellt und man sieht das Wort Gruppe in der Adressleiste. b. Man sollte immer zuerst MODIFIZIEREN / GRUPPIERUNG AUFHEBEN wählen. c. Man hat (Strg)+(ª) gedrückt, während man doppelt auf ein Objekt geklickt hat.

133

Fortgeschrittene Zeichentechniken

2. Welches Bedienfeld verwendet man, wenn man einen Farbverlauf erstellen will? a. Die Bedienfelder Farbton und Gradient b. Nur das Füllung-Bedienfeld c. Die Bedienfelder Farbtöne, Füllung und Farbmischer 3. Wie viele Objekte braucht man, um eine Gruppe erstellen zu können? a. Eins b. Zwei oder mehr c. Null, denn man kann nur Farbverläufe gruppieren

Übungen Da Sie nun über einige grundlegende Zeichenkenntnisse verfügen, versuchen Sie sich doch einmal an folgenden Aktivitäten: 1. Erkunden Sie den Umgang mit Text. Normaler Text kann beispielsweise gekippt werden, wenn man die seitlichen Markierungen beim Rotieren bewegt. Damit sollten Sie in der Lage sein, einen Schatteneffekt zu erzeugen, indem Sie einen Textblock duplizieren und die Kopie kippen. Ändern Sie die Farbe der Kopie und stellen Sie diese in den Hintergrund. Sie werden staunen, wie glaubhaft dieser Effekt ist. 2. Man kann weitere Effekte erstellen, wenn man den Text trennt (denken Sie aber daran, dass Sie den Text danach nicht mehr bearbeiten können). Als Füllung kann man einem Text auch einen Rahmen hinzufügen. Wenn Sie dann verschiedene Linienstärken und -formen ausprobieren, werden Sie interessante Effekte erzielen. 3. Versuchen Sie, geometrische Figuren zu erzeugen, indem Sie die Leinwand-Ebene und das Andocken verwenden. Dazu gibt es eine Menge Beispiele im Anhang D.

134

Die Bibliothek produktiv einsetzen

5

Die Bibliothek produktiv einsetzen

Die Bibliothek ist in Flash von so grundlegender Bedeutung, dass es fast unmöglich ist, einen Film zu produzieren, ohne die Bibliothek zu verwenden. Wenn Sie die Bibliothek nicht benutzen, kann man ohne schlechtes Gewissen sagen, dass Sie irgendetwas falsch machen. Wenn Sie effektiv und produktiv arbeiten wollen, sollten Sie diese lieber so oft wie möglich in den Arbeitsprozess einbeziehen. Die Produktivität wird dabei durch die Technologie der Symbole unterstützt, denn wenn Sie das Symbol selbst verändern, werden alle Instanzen automatisch aktualisiert. Die Effizienz wird dagegen insofern bereitgestellt, da Grafiken und alle sonstigen importierten Medien, nur einmal in der Bibliothek abgelegt werden müssen und nicht bei jedem Erscheinen erneut den kompletten Speicherplatz belegen. In diesem Kapitel werden wir uns mit der Bibliothek beschäftigen und sie tiefergehend erkunden. Da es sich bei diesem Hilfsmittel um ein wichtiges Werkzeug handelt, sollten Sie sich am Ende dieses Kapitels unbedingt sicher sein, dass Sie die Bibliothek vollkommen verstanden haben. In diesem Kapitel lernen Sie: 쐽

Symbole zu erstellen,

쐽

die Bibliothek zu verwenden, um die Arbeit zu minimieren,

쐽

Hinweise aufzufinden, die uns von der Arbeitsoberfläche gegeben werden, um den Überblick zu behalten,

쐽

mehrere Kopien eines Symbols zu verwenden, ohne die Dateigröße des Flash-Films gravierend zu vergrößern. Symbole sind genau die Daten, die Sie in der Bibliothek ablegen. Man kann eigentlich alles, was man in Flash erzeugt (Formen, Gruppen, andere Symbole und sogar Animationen) in die Bibliothek legen und es dann als Symbol bezeichnen. Es gibt mehrere Arten von Symbolen, die jeweils unterschiedliche Charakteristiken haben. Außerdem gibt es zwei Datentypen, die nicht in Flash erstellt werden, aber trotzdem in der Bibliothek auftauchen können: Rastergrafiken und Audio-Dateien. Allerdings werden Sie in Zukunft wohl am meisten mit den Symbolen zu tun haben, die direkt in Flash erstellt werden. Jede Kopie eines Symbols, das sich außerhalb der Bibliothek befindet, nennt man Instanz. Wie Sie noch sehen werden, gibt es jeweils nur einen so genannten Master für jedes Symbol (und das ist genau das Symbol in der Bibliothek). Sie können allerdings so viele Instanzen aus der Bibliothek auf die Bühne ziehen, wie Sie wollen. Dabei ist jede Instanz mit einer Kopie des Originals vergleichbar. Das heißt aber nicht, dass es sich hier wirklich um Kopien handelt, denn die Dateigröße wird nicht stark erhöht (und das müsste bei echten Kopien geschehen).

136

Das Konzept der Bibliothek

5.1

Das Konzept der Bibliothek

Wenn Sie die Bibliothek verwenden, werden Sie in diesem Prozess Symbole erstellen und davon Instanzen erzeugen, die Sie in Ihrem Film nutzen werden. Diese Symbole können sogar in anderen Symbolen verwendet werden.

Wie man Symbole erstellt und verwendet Man kann Symbole auf zwei Arten erzeugen. Einerseits kann man ein bestimmtes Objekt in ein Symbol konvertieren und auf der anderen Seite ein solches Symbol auch von Grund auf neu anlegen. Schauen wir uns diese beiden Methoden an.

Aufgabe: Erstellen Sie ein Symbol, indem Sie ausgewählte Objekte umwandeln! In dieser Aufgabe werden Sie meine bevorzugte Art und Weise kennen lernen, wie man Symbole erstellt – dabei handelt es sich um die Funktion IN SYMBOL KONVERTIEREN. 1. Öffnen Sie eine neue Datei und zeichnen Sie einen Kreis. Wählen Sie nun mit dem Pfeil-Werkzeug den gesamten Kreis (Füllungen und Linien) aus. 2. Wählen Sie EINFÜGEN / IN SYMBOL KONVERTIEREN oder drücken Sie (F8). Daraufhin werden Sie von Flash aufgefordert, einen Namen für dieses Symbol und das Standard-Verhalten anzugeben (siehe Abbildung 5.1). 3. Die Erfahrung zeigt, dass man Symbole möglichst logisch benennen sollte (der Standardname Symbol 1 wird im ersten Moment logisch erscheinen, ist es aber nicht mehr, wenn Sie 35 Symbole verwalten). Aus diesem Grund sollten wir dieses Symbol Kreis nennen. Wenden wir uns nun dem Verhalten zu. Die unterschiedlichen Möglichkeiten werden wir noch im weiteren Verlauf dieses Buches besprechen. Für diesen Moment sollten Sie einfach die Standardeinstellung Filmsequenz beibehalten. Klicken Sie nun auf OK. 4. Jetzt ist es an der Zeit, die Bibliothek zu öffnen. Am schnellsten geht das über das BuchSymbol in der Startleiste. Sie werden feststellen, dass jetzt ein Symbol in der Bibliothek existiert, das Kreis heißt. Sie haben also zwei Fliegen mit einer Klappe geschlagen, denn Sie haben ein Symbol für die Bibliothek erstellt und gleichzeitig eine Instanz auf der Bühne (denn der Originalkreis ist als Instanz des Symbols auf der Bühne verblieben). Wenn Sie weitere Instanzen auf die Bühne bringen (indem Sie auf das Symbol in der Bibliothek klicken und bei gedrückter Maustaste auf die Bühne ziehen) werden alle Instanzen zunächst einmal gleich aussehen. Sollten Sie einmal versehentlich auf eine

137

Die Bibliothek produktiv einsetzen

Instanz doppelklicken, erscheint Szene 1; Kreis in der Adressleiste, was anzeigt, dass Sie nun den Master des Symbols bearbeiten können. In diesem Fall können Sie auf das Wort Szene 1 klicken, um wieder in den Normalmodus zurückzukehren.

Abbildung 5.1: Wenn Sie etwas in ein Symbol konvertieren, müssen Sie den Namen und das Verhalten angeben.

5. Da Sie nun einige Instanzen des Kreises auf die Bühne gebracht haben, mag es aussehen, als hätten Sie mehrere Kopien des Masters erzeugt. In Wirklichkeit handelt es sich aber um Instanzen des Masters. Sollten Sie eine Veränderung am Master in der Bibliothek vornehmen, werden damit sämtliche Instanzen geändert. 6. Es gibt mehrere Möglichkeiten, den Master des Kreis-Symbols zu bearbeiten. Die eine ist, das Symbol in der Bibliothek auszuwählen und im Optionsmenü den Punkt BEARBEITEN auszuwählen (siehe Abbildung 5.2). 7. Es mag zuerst so aussehen, als sei nichts passiert. Allerdings hat sich hinter dem Bibliotheksfenster etwas auf der Bühne getan – der beste Hinweis dafür ist die Adresszeile. Außerdem sehen Sie nur noch eine einzige Version des Kreises (das Original) in der Mitte der Bühne, welche anscheinend keinen Rand mehr hat. Sie befinden sich nun in der Masterversion des Kreis-Symbols und können dieses nun bearbeiten.

138

Das Konzept der Bibliothek

Abbildung 5.2: Das Optionsmenü der Bibliothek enthält mehrere Optionen. Unter anderem ist auch Bearbeiten verfügbar.

Abbildung 5.3: Man kann an der Adressleiste erkennen, dass im Moment ein Master-Symbol bearbeitet wird.

139

Die Bibliothek produktiv einsetzen

8. Bevor wir das in Angriff nehmen, lassen Sie uns das Symbol noch einmal verlassen, um auf einem anderen Weg erneut an diese Stelle zurückzukehren. Klicken Sie also auf Szene 1 in der Adressleiste und Sie befinden sich wieder in der Hauptszene (mit mehreren Instanzen des Kreises). Kehren Sie nun zur Masterversion des Symbols zurück, indem Sie auf eine beliebige Instanz des Symbols doppelklicken. Wenn das passiert ist, wird sich die Adressleiste wieder ändern und die anderen Instanzen werden etwas schwächer dargestellt. Diese Vorgehensweise ist vergleichbar mit der Bearbeitung von Gruppen aus dem letzten Kapitel. Allerdings werden wir hier den Kreis bearbeiten. 9. Schneiden Sie nun ein Stück aus dem Master-Kreis heraus, indem Sie das Pfeil-Werkzeug verwenden (siehe Abbildung 5.4). Dabei handelt es sich um eine gravierende Bearbeitung und nicht so etwas Einfaches wie die Veränderung der Farbe.

Abbildung 5.4: Jede Veränderung, die wir an diesem Symbol vornehmen, wird sich auf jede Instanz auswirken.

10. Kehren Sie nun in die Hauptszene zurück, indem Sie Szene 1 aus der Adressleiste anklicken. Sie werden sehen, dass jetzt alle Instanzen des Kreises die Verformung angenommen haben. Auch wenn Sie neue Instanzen aus der Bibliothek auf die Bühne ziehen, werden diese nun genauso aussehen. In der vorausgegangenen Aufgabe haben wir etwas ausgewählt und in ein Symbol konvertiert. Dabei wurde eine Instanz des neuen Symbols auf der Bühne zurückgelassen. Der andere Weg, der zu einem Symbol führt, ist dieser hier: Entscheiden Sie sich ganz einfach, ein Symbol erstellen zu wollen und erstellen Sie es dann. Die eine Methode ist nicht besser als die andere und Sie werden immer das gleiche Ergebnis erhalten.

140

Das Konzept der Bibliothek

Aufgabe: Erstellen Sie ein Symbol von Anfang an! In dieser Aufgabe werden wir die Funktion NEUES SYMBOL verwenden. 1. Erstellen Sie eine neue Datei und wählen Sie EINFÜGEN / NEUES SYMBOL. Wie Sie sehen, ist der Punkt IN SYMBOL KONVERTIEREN nicht aktiv, da nichts ausgewählt ist. 2. Nun erscheint das gleiche Fenster, das Sie schon aus der letzten Aufgabe kennen. Benennen Sie das Symbol mit Quadrat und lassen Sie das Verhalten auf Filmsequenz eingestellt. Wenn Sie an dieser Stelle OK klicken, werden Sie in den Bearbeitungsmodus des Symbol-Masters gelangen (siehe Abbildung 5.5). Natürlich ändert sich auch die Adressleiste entsprechend.

Abbildung 5.5: Wenn Sie Neues Symbol auswählen, werden Sie direkt in den Bearbeitungsmodus des neuen Symbols gelangen, um es anschließend zu zeichnen.

3. Da wir uns im Innern des Master-Symbols befinden, können Sie jetzt das Quadrat zeichnen. Wahrscheinlich werden Sie es genau in die Mitte zeichnen wollen, die durch ein kleines Pluszeichen in der Mitte der Bühne angezeigt wird (siehe Abbildung 5.5). Dieses Zeichen markiert gleichzeitig die Achse, um die beispielsweise rotiert oder skaliert wird, wenn man dieses Symbol verwendet. Wie trifft man mit dem Quadrat aber genau die Mitte? Dazu gibt es einen kleinen Trick: Wählen Sie das Quadrat aus und verschieben Sie es in den Zwischenspeicher, indem Sie BEARBEITEN / AUSSCHNEIDEN wählen. Nun sollten Sie sicherstellen, dass die Bühne wirklich mittig ausgerichtet ist. Das geschieht über ANSICHT / SKALIERUNGEN / BILD EINBLENDEN. Jetzt reicht dann einfach BEARBEITEN / EINFÜGEN, um das Quadrat exakt mittig einzufügen. Ich verwende diese Technik recht häufig, wenn ich Symbole zentrieren will.

141

Die Bibliothek produktiv einsetzen

4. Wenn Sie das Quadrat fertig gezeichnet haben, kehren Sie in die Hauptszene zurück (indem Sie auf Szene 1 in der Adressleiste klicken). Wo ist jetzt das Quadrat geblieben? Nun ja, Sie haben zwar ein neues Symbol erstellt, aber mit der Funktion NEUES SYMBOL wird es nur in der Bibliothek angelegt. Ziehen Sie also einige Instanzen des Quadrates auf die Bühne.

Wie Ihnen Symbole helfen können Wahrscheinlich haben Sie schon die eine oder andere Idee, wie Ihnen Symbole helfen können. Es gibt aber noch viele andere Möglichkeiten, an die Sie nicht einmal im Traum denken würden. Gehen wir doch einmal zu zwei fundamentalen Vorteilen beim Speichern in einer Bibliothek: die Dateigröße reduzieren und den Arbeitsaufwand minimieren,

Die Dateigröße reduzieren Sie können es glauben oder nicht: wenn Sie eine Grafik in der Bibliothek gespeichert und 100 Instanzen auf die Bühne gezogen haben, ist die Datei nicht viel größer, als wenn Sie nur eine Instanz erzeugt hätten. Das funktioniert auf folgende Weise: Das Master-Symbol schlägt in Sachen Dateigröße 1:1 zu Buche. Wenn eine Grafik also 1 kb groß ist, wird die Flash-Datei auch um 1 kb größer. Eine Grafik von 100 kb erhöht den Speicherbedarf um 100 kb. Das hängt also nur davon ab, was sich in dem Symbol befindet. Egal, wie oft Sie das Symbol verwenden, es ist immer nur einmal als Ganzes in der Datei abgespeichert. Es werden eigentlich nur ein paar Details pro Instanz abgespeichert (Position, Farbe, Skalierung ...), aber die Dateimenge lässt sich auf ein paar Bytes reduzieren und ist mit einer Kopie des Symbols nicht vergleichbar. Stellen wir uns einmal vor, wir hätten eine Grafik von 100 kb. Diese soll zehnmal auf der Bühne erscheinen. Wenn wir mit Kopien arbeiten würden, hätten wir ein ganzes Megabyte (!) an Speicherbedarf. Nach dem Instanzmodell kommen wir vielleicht auf gerade einmal 101 kb (wenn überhaupt). Symbole scheinen also hervorragend für die Verwendung mehrerer Instanzen der gleichen Form geeignet zu sein. Allerdings ist diese Technik noch weitaus mächtiger, da jede Instanz sehr unterschiedlich aussehen kann. Bisher haben wir ausschließlich gleich aussehende Instanzen des Masters erzeugt, die sich nur durch die Position am Bildschirm unterscheiden. Die Zusatzdaten, die eine Instanz ausmachen, können neben der Position aber (wie gesagt) auch den Drehwinkel und die Skalierung enthalten. Auf diese Art kann jede Instanz unterschiedlich aussehen. Darüber werden Sie später noch mehr erfahren. Merken Sie sich im Moment allerdings, dass Sie auch bei vielen Instanzen auf der Bühne (die auch noch unterschiedlich skaliert, gedreht, gefärbt usw. sein können) keine gravierende Erhöhung der Dateigröße verursacht haben.

142

Die Bibliothek verwenden

Den Arbeitsaufwand minimieren Zusätzlich zum Einsparen des Speicherplatzes kann die Bibliothek auch Arbeit ersparen. Nehmen wir einmal an, dass Sie einen Textblock benötigen, der immer wieder im Film auftaucht (ein Titel zum Beispiel). Wenn Sie diesen Text in die Bibliothek einfügen, können Sie jedes Mal, wenn der Text gebraucht wird, eine Instanz aus der Bibliothek ziehen. Wenn Sie den Text später ändern müssen, brauchen Sie nicht alle Stellen wieder zu suchen, bei denen der Text erscheint, sondern lediglich den Master zu ändern und überall wird der Text korrigiert. Dafür ist nur ein klein wenig Zeit für die Planung notwendig.

5.2

Die Bibliothek verwenden

Sie haben die Bibliothek bereits in den vorangegangenen Beispielen eingesetzt. Allerdings haben wir uns damals nicht die Zeit genommen, auf die Details einzugehen. Das sollten wir nun nachholen, damit Sie alle Vorteile der Bibliothek nutzen können.

Den Überblick behalten Im ersten Kapitel haben wir gesehen, wie wichtig es ist, zu wissen, wo man sich befindet. Im Zusammenhang mit der Bibliothek gewinnt dieser Punkt noch mehr an Bedeutung. Es wird sehr verwirrend, wenn Sie die kleinen Hinweise nicht beachten. Bevor Sie also ein Werkzeug auswählen sollten Sie sich immer fragen: »Wo bin ich und was will ich hier?« Hier sind einige Tipps, die Ihnen helfen sollen, den Überblick zu behalten: 쐽

Obwohl Ihnen die Statusleiste keinen kompletten Überblick über die Position des Symbols in der Hierarchie verschafft, gibt es doch ein kleines Icon, das Ihnen verrät, ob Sie sich in einer Szene oder in einem Symbol befinden. Das letzte aufgelistete Element hat immer ein Icon für »Szene« (die Filmklappe) oder eines von drei SymbolIcons. In Abbildung 5.6 bearbeiten wir beispielsweise gerade das Master-Symbol Kreis, was uns auch von der Statuszeile angezeigt wird.

쐽

Jedes Mal, wenn Sie sich in der Bibliothek befinden, wird ein Pluszeichen auf der Bühne angezeigt, das die Achse angibt, um die beispielsweise rotiert wird. Das werden Sie in einer normalen Szene nicht sehen.

쐽

Außerdem werden Sie nie die Bühnenränder sehen, wenn Sie ein Symbol bearbeiten, denn da gibt es keine Bühne. Wenn Sie Instanzen auf die Bühne ziehen, müssen Sie diese innerhalb des Bühnenrahmens platzieren, damit der Anwender sie auch zu sehen bekommt. Symbole haben dagegen einfach keine Bühne.

143

Die Bibliothek produktiv einsetzen

Abbildung 5.6: Die Adressleiste verrät uns, ob wir gerade ein Symbol oder eine Szene bearbeiten.

Abbildung 5.7: Über die Schaltfläche Symbole bearbeiten erhalten Sie schnellen Zugang zu allen Symbolen in der aktuellen Datei.

144

Die Bibliothek verwenden

쐽

Es gibt mehrere Wege, den Inhalt eines Master-Symbols zu erreichen: 왘

Zuerst sei das Optionsmenü der Bibliothek genannt. Klicken Sie ein Symbol an und wählen Sie dann OPTIONEN / BEARBEITEN. Alternativ dazu können Sie auf das Symbol doppelklicken. Ein Doppelklick auf den Namen des Symbols lässt Sie das Symbol umbenennen.

왘

Als Zweites können Sie jede beliebige Instanz des Symbols auf der Bühne doppelt anklicken, um das Master-Symbol bearbeiten zu können. Der Unterschied zur ersten Variante besteht darin, dass Sie nun noch den Inhalt der Bühne sehen (zwar ein wenig schwächer, aber dennoch in Position).

왘

Drittens lassen sich Symbole auch über die Schaltfläche Symbole bearbeiten (oben rechts) editieren (siehe Abbildung 5.7). Hier finden Sie eine Liste aller Symbole in Ihrem Film. Außerdem stellt Szene bearbeiten (die Schaltfläche daneben) eine schnelle Möglichkeit dar, zur Szene zurückzukehren.

Die Bibliothek mit Namen, Sortierung und Ordnern verwalten Die Bibliothek ist so großartig, dass Sie sie immer verwenden werden. Sobald die Anzahl der Symbole in der Bibliothek allerdings ansteigt, werden Sie nach Wegen suchen, um etwas Ordnung zu schaffen. Sie können die Bibliothek auf verschiedene Weisen strukturieren, allerdings werden wir hier auf drei Punkte gezielt eingehen: Namen, Sortieren und Ordner erzeugen. Da jedes Symbol einen Namen braucht und man den dazu noch sehr schnell ändern kann, macht es Sinn, die Namen selbst zu organisieren. Jeder wird seine eigene Vorstellung von einer guten Bezeichnung haben, aber es gibt inzwischen einige Standards, die ich hier vorstellen will: Zuerst einmal sollten Sie präzise und beständig sein. Wenn Sie ein Symbol eines Kreises haben, nennen Sie es doch einfach Kreis. Es besteht kein Grund für kryptische Abkürzungen (zum Beispiel Kre). Allerdings mag eine Bezeichnung Roter Kreis ohne Kreislinie dann doch etwas zuviel des Guten sein. Sagen Sie, was sein muss, aber nicht mehr. Denken Sie daran, dass man die Bibliothek alphabetisch nach Symbolnamen sortieren kann. Da macht auch ein Plan für die Benennung von Symbolen Sinn. Wenn Ihr Film beispielsweise aus mehreren Teilen besteht, kann man diese dem Symbolnamen voranstellen, um mehr Ordnung zu schaffen. Nehmen wir an, Ihr Film enthält ein Spiel. Dann verwenden Sie doch einfach das Präfix spiel_ und erzeugen Symbolnamen, wie spiel_hintergund, spiel_figur, spiel_karte und so weiter. Eine solche Vorgehensweise ist auch dann denkbar, wenn mehrere Personen an einer Datei arbeiten. Wenn jede Person einem Symbolnamen die Initialen voranstellt, ist es einfacher, herauszufinden, wer welches Symbol erstellt hat. Im Anhang A werden Sie weitere solcher Namenskonventionen kennen lernen.

145

Die Bibliothek produktiv einsetzen

Wie ich bereits erwähnt habe, sortiert die Bibliothek die Symbole alphabetisch. Wenn Sie das Bibliotheksfenster vergrößern, werden Sie weitere Sortiermöglichkeiten finden. Klicken Sie dazu einfach auf die Schaltfläche breite Ansicht (siehe Abbildung 5.8). Schauen Sie sich dieses Bild genau an, um sich ein wenig mit der Bibliothek vertraut zu machen. Sie können also nach dem Namen, der Art (alle Audio-Dateien stehen hintereinander usw.), der Anzahl der Zugriffe (gemeint ist die Anzahl der im Film verwendeten Instanzen) und dem Änderungsdatum sortieren.

Abbildung 5.8: Es gibt in der Bibliothek eine Vielzahl von Werkzeugen. 쐽

Das Vorschaufenster zeigt eine verkleinerte Version des Symbols an.

쐽

Die Spaltenüberschriften können mehr als nur den Namen der Spalte angeben. Klicken Sie auf eine solche Überschrift und die Symbole werden nach diesem Kriterium sortiert.

쐽

Der kleine Pfeil verändert die Sortierreihenfolge.

쐽

Die Schaltfläche Neues Symbol bewirkt das Gleiche wie EINFÜGEN / NEUES SYMBOL.

쐽

Mit der Schaltfläche Neuer Ordner kann man (Sie ahnen es) einen neuen Ordner anlegen, in dem man dann mehrere Bibliotheksinhalte ablegen kann.

쐽

Wenn Sie auf Eigenschaften klicken, öffnet sich das Fenster, das Sie vom Erstellen eines Symbols kennen.

쐽

Breite Ansicht und Schmale Ansicht verändern die Fenstergröße der Bibliothek.

146

Symbole aus der Bibliothek verwenden

쐽

Im Menü OPTIONEN finden Sie alle soeben genannten Einstellungen in schriftlicher Form. Vergessen Sie dieses Menü also nicht, wenn Sie etwas an Bibliotheksfunktionalität suchen.

Zu guter Letzt kann man die Bibliothek auch mit Ordnern organisieren. Das kennen Sie ja schon vom Umgang mit den Daten auf Ihrer Festplatte. Sie können einfach einen neuen Ordner erstellen, indem Sie auf die Schaltfläche Neuer Ordner klicken. Dann können Sie dem Ordner direkt einen Namen zuweisen oder ihn später auf die gleiche Weise wie bei den Symbolen umbenennen. Die Organisation der Ordner ist sehr intuitiv. Lassen Sie mich dennoch ein paar Manöver erläutern. Sie können Symbole ganz einfach in einen Ordner verschieben, indem Sie das Icon des Symbols in den Ordner ziehen. Wenn Sie in einen Ordner hineinsehen wollen, können Sie diesen mit einem Doppelklick öffnen. Außerdem können Sie sogar Ordner in Ordnern anlegen.

5.3

Symbole aus der Bibliothek verwenden

Das Konzept, Symbole einfach aus der Bibliothek auf die Bühne zu ziehen, um eine Instanz zu erzeugen, ist recht einleuchtend. Das ist sehr vielseitig und dennoch einfach zu handhaben.

Instanzen von Symbolen auf der Bühne platzieren Da wir dieses Thema schon einmal besprochen haben, werde ich mich kurz fassen. Man kann also Symbole auf die Bühne ziehen, um eine Instanz zu erzeugen. Wenn man auf diese Art eine Instanz auf der Bühne kopiert, wird in Wirklichkeit eine neue Instanz (mit den Eigenschaften der kopierten Instanz) erzeugt. Es gibt aber noch eine weitere Möglichkeit, eine Instanz auf die Bühne zu bekommen. Das passiert nämlich immer dann, wenn Sie eine Form in ein Symbol konvertieren. Erinnern Sie sich?

Instanzen von Symbolen bearbeiten Wir haben schon erwähnt, dass sich die Instanzen durch die Positionen unterscheiden. Diese werden ja für jede Instanz getrennt abgespeichert. Ich habe auch schon anklingen lassen, dass man für jede einzelne Instanz auch andere Eigenschaften (Rotation, Skalierung usw.) verändern kann. In der folgenden Aufgabe werden wir genau diese unterschiedlichen Eigenschaften unter die Lupe nehmen.

147

Die Bibliothek produktiv einsetzen

Aufgabe: Ändern Sie die Position, die Vergrößerung und die Drehung von Instanzen! 1. Erstellen Sie in einer neuen Datei ein Rechteck und legen Sie mit dem Text-Werkzeug Ihren Namen darüber. Versuchen Sie, diese beiden Objekte von der Größe halbwegs anzupassen. Verändern Sie gegebenenfalls die Textfarbe, damit er sich gut sichtbar vom Rechteck abhebt. 2. Wählen Sie nun alles aus, was Sie soeben gezeichnet haben, und wählen Sie dann BEARBEITEN / IN SYMBOL KONVERTIEREN. Nennen Sie das Symbol Mein Name und lassen Sie die Standardeinstellung für das Verhalten bestehen. 3. Auf der Bühne befindet sich nun eine Instanz des soeben erstellten Symbols Mein Name. Erzeugen Sie nun weitere Instanzen dieses Symbols (dazu haben Sie vor wenigen Zeilen verschiedene Möglichkeiten kennen gelernt). 4. Bewegen Sie nun jede Instanz an eine andere Position auf der Bühne. Verändern Sie die Größe oder den Drehwinkel (oder auch beides) der einzelnen Instanzen. Wenn Sie wollen, können Sie die eine oder andere Instanz auch kippen (über die RotierenOption des Pfeil-Werkzeuges). Sie können ruhig »wilde Sachen« damit machen (siehe Abbildung 5.9) und trotzdem ist die Dateigröße im Prinzip nur so groß wie das MasterSymbol.

Abbildung 5.9: Hier sieht man verschiedene Instanzen desselben Symbols, die sich nur durch die Position, Skalierung und Rotation unterscheiden.

148

Symbole aus der Bibliothek verwenden

Effekte von Instanzen Vielleicht denken Sie jetzt, dass das Zuordnen von verschiedenen Positionen, Skalierungen und Rotationen eine Menge Möglichkeiten bietet – und Sie haben Recht. Allerdings ist das noch nicht alles. Man kann jeder Instanz auf der Bühne einen Effekt zuordnen.

Das Effekt-Bedienfeld Wenn Sie eine Instanz mit einem Effekt belegen wollen, wählen Sie einfach die Instanz auf der Bühne und im Bedienfeld Effekt den gewünschten Effekt aus. Wenn Sie dieses Bedienfeld nicht finden, öffnen Sie es einfach über das Kontextmenü der Instanz (Rechtsklick auf die Instanz wie in Abbildung 5.10).

Abbildung 5.10: Über das Kontextmenü kann man alle relevanten Funktionen zu einem Objekt auf der Bühne ausführen.

Im Effekt-Bedienfeld befindet sich ein Auswahlfeld, in dem Sie den gewünschten Farbeffekt einstellen können. Schauen Sie sich Abbildung 5.11 und die nun folgende Liste ein wenig genauer an, damit Sie mit den einzelnen Effekten vertrauter werden. 쐽

Die Helligkeit fügt Weiß oder Schwarz zur Instanz hinzu. Sie wirkt dadurch heller oder dunkler.

쐽

Über Farbton erzielen Sie den gleichen Effekt wie mit Helligkeit, allerdings können Sie hier auch andere Farben als Schwarz und Weiß einstellen.

149

Die Bibliothek produktiv einsetzen

쐽

Mit Alpha lässt sich die Transparenz der Instanz verändern.

쐽

Außerdem steht Ihnen noch die Option Erweitert zur Verfügung, mit der Sie Farbton und Alpha kombinieren können.

Abbildung 5.11: Im Effekt-Bedienfeld finden Sie einige Möglichkeiten, das Aussehen einer Instanz zu verändern.

Aufgabe: Ändern Sie Effekte mehrerer Instanzen! 1. Öffnen Sie die Datei, die Sie in der letzten Aufgabe erstellt haben. Das war die mit den ganzen Symbolen und Ihrem Namen darin. Wenn Sie diese nicht mehr gespeichert haben, erstellen Sie einfach vier neue Instanzen. 2. Wählen Sie nun eine dieser Instanzen aus, indem Sie einmal darauf klicken. Öffnen Sie das Bedienfeld Effekt, während die Instanz noch ausgewählt ist. 3. Wählen Sie hier aus dem Auswahlfenster die Option Helligkeit. Rechts daneben soll ein Feld mit einer Prozentzahl erscheinen (siehe Abbildung 5.12). Klicken Sie auf den Pfeil rechts daneben und halten Sie die Maustaste gedrückt. Es erscheint ein Schieberegler. Stellen Sie damit 80% ein. Alternativ dazu können Sie auch die Zahl 80 in das Prozentfeld eintragen. 4. Lassen Sie das Effekt-Bedienfeld geöffnet und wählen Sie eine andere Instanz aus. Stellen Sie nun im Auswahlfeld den Wert Farbton ein. Die Bedienung erfolgt ganz intuitiv. Stellen Sie eine Farbe ein und geben Sie wieder eine Prozentzahl für die Stärke

150

Symbole aus der Bibliothek verwenden

des Farbeffekts an (siehe Abbildung 5.13). Wenn Sie hier 100% eintragen, wird das Symbol nur noch in der neu eingestellten Farbe erscheinen, auch wenn es zuvor mehrere Farben enthielt.

Abbildung 5.12: Hier fügen wir gerade einer Instanz die 80% Helligkeit hinzu.

Abbildung 5.13: Der Effekt Farbton kann eine Instanz einfärben.

151

Die Bibliothek produktiv einsetzen

5. Jetzt versuchen wir das gleiche für Alpha. Setzen Sie den Alphawert einer Instanz auf 40% und schieben Sie die so veränderte Instanz über etwas anderes, denn wenn nichts unter der Instanz liegt, kann auch nichts durchscheinen. 6. Betrachten wir abschließend noch die Einstellung Erweitert. Damit kann man die Alpha- und Farbtonfunktionen kombinieren. Es ist sehr schwierig, die acht Schieberegler zu bedienen, um genau das zu bekommen, was man erreichen will. Deshalb sollten Sie besser zu folgendem Trick greifen. Angenommen, Sie wollen etwas gelb einfärben und zusätzlich leicht transparent machen. Dazu sollten Sie zuerst den Effekt Farbton ausnutzen, um eine gelbe Färbung einzustellen. Nun wechseln Sie in die Einstellung Erweitert und stellen fest, dass bei den RGB-Werten bereits Zahlen eingetragen sind (siehe Abbildung 5.14). Jetzt brauchen Sie nur noch den gewünschten Alphawert einzustellen und haben es geschafft. Der Trick ist also, zuerst die Färbung einzustellen und dann den Effekt zu wechseln, da man so nicht den RGB-Wert von Hand einzustellen braucht.

Abbildung 5.14: Wenn Sie zuerst den Farbton verändert haben und danach die Option Erweitert aufrufen, wird die Farbe schon voreingestellt.

7. Probieren Sie es aus und bringen Sie viele Instanzen auf die Bühne. Verändern Sie jeweils die Effekte. Machen Sie, wonach Ihnen ist. Noch einmal: Die Dateigröße ist immer noch (fast) die gleiche, als wenn Sie nur eine Instanz auf dem Bildschirm hätten.

Wie sich jede Instanz verschieden verhält Sie haben jetzt schon eine Menge Unterschiede erforscht, die man den einzelnen Instanzen beibringen kann. Es gibt aber noch mehr: Erinnern Sie sich an die Einstellung Verhalten, als wir ein Symbol erzeugt haben? Man konnte dort festlegen, ob ein Symbol beispielsweise als Schaltfläche oder Filmsequenz angesehen werden soll. Diese Einstellung kann man für jede Instanz getrennt vornehmen. Machen Sie sich keine Gedanken über die genaue Bedienung von Schaltflächen oder Filmsequenzen. Dazu gibt es später im Buch eigene Kapitel. Wenn wir das Verhalten einer Instanz verändern wollen, brauchen wir nur die Eigenschaften aufzurufen (das geht über das blaue Symbol mit dem Buchstaben »i« in der Bibliothek). Es erscheint wieder das Fenster, das Sie schon beim Erstellen eines Symbols kennen gelernt haben. Allerdings ist es um die Schaltfläche Bearbeiten erweitert worden (siehe

152

Symbole aus der Bibliothek verwenden

Abbildung 5.15). Angenommen, Sie haben bereits zehn Instanzen als Filmsequenz auf die Bühne gezogen und ändern nun im Master das Verhalten des Symbols auf Schaltfläche, dann werden diesmal nicht alle anderen Instanzen umgewandelt. Die Einstellung bezieht sich nur auf neue Instanzen. Die alten bleiben alle Filmsequenzen.

Abbildung 5.15: Über diesen Dialog kann man das Standardverhalten eines Symbols verändern.

Selbstverständlich hat nicht nur der Master ein Standardverhalten, sondern jede einzelne Instanz ist mit ihrem eigenen Verhalten ausgestattet. Im Bedienfeld Instanz kann man das Verhalten für jede einzelne Instanz nachlesen und verändern (siehe Abbildung 5.16).

Abbildung 5.16: Mit diesem Bedienfeld lässt sich das Verhalten einzelner Instanzen verändern.

Instanzen von Symbolen in Symbolen verwenden Man kann nicht nur Instanzen eines Symbols auf die Bühne ziehen, sondern Instanzen auch für die Erstellung neuer Symbole verwenden. Auf diese Weise kann man beispielsweise ein Haus-Symbol erstellen und ein neues Symbol aus Instanzen des Haus-Symbols erzeugen, das eine ganze Häuserreihe darstellt (siehe Abbildung 5.17). Man kann also ohne weiteres Instanzen von Symbolen dazu verwenden, neue Symbole zu erzeugen.

153

Die Bibliothek produktiv einsetzen

Abbildung 5.17: Die Häuserreihen bestehen aus Instanzen des Symbols Haus.

Aufgabe: Erstellen Sie ein Symbol, das Instanzen eines anderen Symbols verwendet! 1. Erstellen Sie in einer neuen Datei einen Kreis. 2. Wählen Sie den gesamten Kreis aus und dann EINFÜGEN / IN SYMBOL REN. Nennen Sie das neue Symbol Kreis und klicken Sie auf OK.

KONVERTIE-

3. Nun wollen wir ein einfaches Auge erstellen. Sicher: Sie könnten zwei neue Kreise zeichnen und wieder ein Symbol daraus erzeugen. Das ist aber nicht Sinn und Zweck dieser Übung. Wir gehen also etwas anders vor. 4. Sie haben bereits eine Instanz des Symbols Kreis auf der Bühne. Vergrößern Sie diese und stellen den Helligkeitseffekt auf 100%. Nun ziehen Sie eine weitere Instanz auf die Bühne und ändern deren Helligkeit auf -100%. Nun haben Sie einen großen weißen und einen kleinen schwarzen Kreis auf der Bühne. 5. Richten Sie die beiden Instanzen so aus, dass die schwarze Instanz über der weißen liegt und das »Auge« nach unten schaut (siehe Abbildung 5.18). 6. Wählen Sie die beiden Kreise aus und dann EINFÜGEN / IN SYMBOL KONVERTIEREN. Nun haben Sie ein Symbol erzeugt, das aus zwei Instanzen besteht. Nennen Sie das neue Symbol Auge und klicken Sie auf OK. 7. Ziehen Sie eine zweite Instanz des Augen-Symbols auf die Bühne und drehen Sie sie.

154

Symbole aus der Bibliothek verwenden

Abbildung 5.18: Hier sehen Sie zwei Instanzen desselben Symbols. Sie unterscheiden sich nur durch Position, Helligkeit und Skalierung.

8. Ziehen Sie eine weitere Instanz des Kreises auf die Bühne und vergrößern Sie die Instanz. Stellen Sie diesen Kreis in den Hintergrund (weil er sonst die Augen verdecken würde). Färben Sie die Instanz hellgelb ein. 9. Sie haben nun ein Gesicht erstellt, das aus einem Kopf und zwei Augen besteht. Naja. Es fehlt noch der Mund. Also zeichnen Sie mit dem Pinsel-Werkzeug einen Mund. Wenn Sie jetzt denken, das hat nicht so ganz funktioniert, liegen Sie falsch, denn Sie haben ja auf der Leinwand-Ebene gezeichnet. Instanzen von Symbolen verdecken die Ebene allerdings. Wenn Sie den Mund nicht neben dem Gesicht neu zeichnen wollen, um ihn dort zu gruppieren, können Sie wie in Abbildung 5.19 versuchen, den Mund, den Sie nicht sehen, auszuwählen und danach zu gruppieren. 10. Nun sieht das Gesicht wie in Abbildung 5.20 aus. Wählen Sie erneut alles aus und konvertieren Sie das gesamte Gesicht in ein Symbol mit genau diesem Namen. Jetzt können Sie ganz einfach so viele Gesichter erzeugen wie Sie wollen. Sie bestehen alle aus »recycelten« Kreisen und einem Lächeln. Nebenbei: Sie brauchen den Mund nicht gesondert in die Bibliothek einzubinden, da er im Gesicht automatisch mitgespeichert wurde.

155

Die Bibliothek produktiv einsetzen

Abbildung 5.19: Sie können versuchen, den Mund mit dem Pfeil-Werkzeug auszuwählen, auch wenn er sich noch hinter dem Gesicht befindet.

Abbildung 5.20: Das fertige Gesicht

156

Zusammenfassung

5.4

Zusammenfassung

Mit der Bibliothek kann man also viel mehr anstellen, als Sie zuerst vermutet haben. Sie haben die Grundlagen der Bibliotheksorganisation erlernt und wissen, wie man Symbole erzeugt und anwendet. Wenn ein Symbol erst einmal in der Bibliothek ist, kann man es immer wieder im Film verwenden. Die so erzeugten Instanzen können mit eigenen Eigenschaften und Effekten versehen werden. Außerdem haben Sie zum Schluss gesehen, wie man aus Instanzen wieder neue Symbole erzeugt.

5.5

Workshop

F&A F

Wenn ich versuche, ein Symbol aus der Bibliothek auf die Bühne zu ziehen, wechselt der Cursor zum internationalen »Nein«-Symbol. Vorher hat es schon funktioniert, aber warum jetzt nicht mehr? A

F

Symbole halten die Dateigröße schön klein und sparen auch viel Zeit. Es wäre aber noch besser, wenn man Sie unter mehreren Dateien austauschen könnte. Ist das möglich? A

F

Man kann Symbole nur dann auf die Bühne ziehen, wenn man über eine geöffnete Ebene verfügt, in der man auch zeichnen kann. Das setzt voraus, dass sie nicht gesperrt oder versteckt ist. Außerdem darf sich der Abspielkopf nicht in einem interpolierten Bild befinden (wie wir in den Kapiteln 8 und 9 noch sehen werden).

Das ist tatsächlich vorgesehen und Sie können zu diesem Thema mehr in Anhang A erfahren. Bitte haben Sie bis dahin noch etwas Geduld.

Ich habe ein Symbol aus der Bibliothek auf die Bühne gezogen. Danach habe ich das Mastersymbol verändert. Als ich zur Hauptszene zurückgekehrt bin, befand ich mich in einer neuen Datei! Also wählte ich den ursprünglichen Film über das FENSTER-Menü aus. Allerdings war das Symbol auf der Bühne noch das ursprünglich unveränderte. Was läuft da falsch? A

Die Bibliothek kann Sie manchmal an der Nase herum führen. In diesem Fall haben Sie ein Symbol aus der Bibliothek einer anderen Datei in eine weitere Datei gezogen. Wenn Sie die Bibliothek geöffnet haben und danach eine neue Datei erzeugen, wird die Bibliothek weiterhin auf der Bühne bleiben (und dunkelgrau eingefärbt). Allerdings ist sie dann immer noch die Bibliothek des ersten Films, denn

157

Die Bibliothek produktiv einsetzen

jeder Film besitzt seine eigene Bibliothek. Wenn Sie ein Symbol aus einer Bibliothek in einen anderen Film ziehen, wird Flash dieses Symbol in die Bibliothek des anderen Films kopieren. Wenn Sie die Bibliothek immer geschlossen halten, werden Sie damit keine Probleme haben. Außerdem sollten Sie jeden Film, mit dem Sie arbeiten, abspeichern. Dann wird nämlich der Dateiname in der Titelleiste der Bibliothek eingeblendet.

Übungsaufgaben Hier sind wir wieder an der Stelle angelangt, an der ich mich ständig wiederhole: Bitte versuchen Sie zuerst selbst eine Lösung für die Fragen zu finden, bevor Sie die Lösungen nachschlagen. 1. Sie finden ein Symbol nicht in der Bibliothek, obwohl Sie wissen, dass Sie es erstellt haben. Was ist dafür normalerweise der Grund? a. Ihre Flash-Version ist abgelaufen. Kaufen Sie sich ein Update. b. Die Bibliothek gehört nicht zu der aktuellen Datei oder das Symbol versteckt sich in einem Unterordner. c. Sie haben den Namen des Symbols vergessen. Deshalb wird es nicht mehr aufgelistet. 2. Woran erkennen Sie, dass Sie im Moment ein Master-Symbol bearbeiten? a. Die Adressleiste enthält den Namen des Symbols und ein Pluszeichen ist in der Mitte der Bühne zu sehen. b. Das Effekt-Bedienfeld ist deaktiviert. c. Das Symbol wird im Bibliotheks-Vorschaufenster angezeigt. 3. Sollten Sie einen anderen Effekt als Alpha verwenden, wenn Sie eine Instanz farblich abschwächen wollen? a. Nein, nichts schlägt Alpha. b. Ja, denn man sollte niemals Alpha verwenden. c. Wenn die Instanz nicht über etwas anderem liegt, sollte man sich mit der Helligkeit begnügen oder eventuell einen Farbton festlegen.

158

Animationen verstehen

6

Animationen verstehen

Es gibt nichts, was man mit einer Animation vergleichen kann. Sie kann inspirieren, lehren und unterhalten. Außerdem bleibt sie im Gedächtnis – es besteht doch kein Zweifel, dass Sie beim Namen »Disney« direkt an gewisse Bilder denken. Sie stehen gerade am Fuß des Berges, auf dessen Gipfel die Macht der Animation auf Sie wartet. Bevor wir aber »losklettern«, gibt es einige Konzepte, die wir genauer betrachten sollten. Deshalb werden wir in diesem Kapitel die Animation im Allgemeinen und deren Umsetzung in Flash diskutieren, damit Sie genau wissen, worauf ich hinaus will. Wenn man das Ziel vor Augen hat, fällt das »Klettern« nämlich leichter. In den folgenden Kapiteln werden wir die technischen Grundlagen für die Animationsentwicklung legen. In diesem Kapitel werden Sie: 쐽

die Grundlagen der Animation erlernen,

쐽

die wichtigsten Grundbegriffe in Zusammenhang mit Animationen kennen lernen,

쐽

sich mit den elementaren Flash-Komponenten für die Animationsentwicklung vertraut machen

쐽

und herausfinden, wo das Animationskonzept versagt und wie man trotzdem zu einem ansehnlichen Ergebnis kommt.

6.1

Wie Animationen arbeiten

Eine Animation wird aus einzelnen Bildern hergestellt. Auch wenn man eine Bewegung simulieren will, verfügt man nur über feststehende Bilder. Das Prinzip ist mit einem Film vergleichbar. Wenn der Streifen von einem Bild zum nächsten wechselt, ist die Leinwand für einen Sekundenbruchteil schwarz. Der Moment ist aber so kurz, dass man meint, man würde eine zusammenhängende Bewegungsfolge sehen. Dieser Effekt kommt über das menschliche Auge im Zusammenspiel mit dem Gehirn zustande. Wenn Licht Ihre Netzhaut trifft, wird ein Signal an das Gehirn gesendet. Dieser Effekt stoppt aber nicht so schnell, wie auf der Leinwand die schwarze Stelle schon überwunden wurde und das nächste Bild erscheint (vorausgesetzt, die Pause ist nicht zu lang).

6.2

Die Komponenten einer Animation

Da wir nun einige Grundlagen über Animationen kennen, können wir uns damit befassen, wie man sie in Flash umsetzt. Es gibt viele Grundbegriffe für Animationen, deren Bedeutung Sie direkt mit der Umsetzung in Flash kennen lernen.

160

Die Komponenten einer Animation

Bilder und Bildrate Wie ich schon gesagt habe, besteht eine Animation aus einer Reihe von Standbildern. Jedes Standbild wird auch kurz Bild genannt. Beim Kinofilm ist die Bedeutung klar. Ein Bild ist ein kleines Foto auf dem Filmstreifen. Das entspricht einem kleinen Rechteck in der Zeitleiste von Flash. Die Bilder in Flash sind sogar durchnummeriert. Jedes fünfte Bild ist grau unterlegt. Der rote Abspielkopf kann nur auf ein Bild gleichzeitig zeigen – das ist dann exakt das Bild, das Sie sehen und bearbeiten können. Sie zeichnen aber nicht in einem Bild in der Zeitleiste, sondern auf der Bühne. Der Abspielkopf in der Zeitleiste gibt lediglich an, welches Bild sich gerade auf der Bühne befindet. In Abbildung 6.1 sehen Sie die Zeitleiste in ihrem Urzustand. Solange man die Filmdauer nicht erweitert, kann man den Abspielkopf nicht hinter das erste Bild bewegen. Nur das erste Bild ist weiß mit einem schwarzen Rahmen.

Abbildung 6.1: Die Zeitleiste mit ihren vielen Zellen ist zu Anfang nur mit einem einzigen Bild ausgestattet.

Standardmäßig wird Ihre Zeitleiste nur ein Bild lang sein. Schauen wir uns also eine Animation mit mehreren Bildern an. Ich will jetzt aber nicht, dass Sie sofort eine Animation erstellen, sondern es reicht vorerst, wenn Sie eine bestehende Animation öffnen. Wählen Sie also HILFE / BEISPIELE / SPOTLIGHT MASKE. Jetzt können Sie in der Zeitleiste beispielsweise den Abspielkopf auf das Bild Nummer 25 zeigen lassen. Klicken Sie dazu nicht in das Bild (auf das kleine Rechteck), sondern auf die Zahl 25 oberhalb der Rechtecke (siehe Abbildung 6.2).

161

Animationen verstehen

Abbildung 6.2: Es wird eine Zeitleiste mit 50 Bildern angezeigt, wobei sich der Abspielkopf auf Bild 25 befindet.

An dieser Beispiel-Datei kann man mehrere wichtige Konzepte erklären. Als Erstes will ich Ihnen das so genannte Schrubben vorstellen. Dazu klicken Sie beispielsweise auf die Zahl 25 in der Zeitleiste und halten die Maustaste gedrückt. Dann bewegen Sie die Maus nach links und rechts (immer noch bei gedrückter Maustaste) und Sie erhalten einen kurzen Einblick, wie die Animation ablaufen wird. Die Animationsgeschwindigkeit hängt natürlich in diesem Moment davon ab, wie schnell Sie schrubben. Der Anwender wird später eine feste Bildrate zu Gesicht bekommen. Wählen Sie einmal STEUERUNG / ABSPIELEN oder drücken Sie einfach (¢), um zu sehen, wie die Animation mit der richtigen Bildrate aussieht. Wenn Sie die Animation wieder anhalten wollen, drücken Sie einfach erneut auf (¢). Sie sollten auch einen kurzen Blick auf die Statuszeile in der Zeitleiste werfen, denn dort werden die aktuelle Bildnummer, die Bildrate und die bereits verstrichene Zeit angezeigt (siehe Abbildung 6.3).

Abbildung 6.3: Die Statuszeile der Zeitleiste enthält drei wichtige Zahlen, die in Zusammenhang mit dem Animationstiming stehen.

Die aktuelle Bildnummer (links) gibt die Position des Abspielkopfes wieder. Sie verändert sich beim Abspielen und beim Schrubben, da Sie ja immer nur ein Bild zugleich sehen können. Die Bildrate steht normalerweise auf der zuletzt von Ihnen unter MODIFIZIEREN / FILM eingestellten Bildrate. Allerdings wird Flash die Bildrate selbstständig reduzieren, wenn es merkt, dass es bei Ihrer Animation in der von Ihnen gewählten Bildrate nicht mithalten kann. Die Bildrate gibt an, wie »flüssig« der Film für den Betrachter wiedergegeben wird. Eine Bildrate von 30 bps gibt an, dass dreißig Bilder in jeder Sekunde wiedergegeben werden. Man kann die Bildrate leicht mit der Geschwindigkeit verwechseln, aber das ist nicht wirklich das Gleiche. Wenn eine Animation aus

162

Die Komponenten einer Animation

zehn Bildern bei 10 bps besteht, sieht sie eigentlich aus wie eine Animation, die zwanzig Bilder mit 20 bps durchläuft, denn beide benötigen eine Sekunde. Die letztere Animation wirkt allerdings flüssiger. Lassen Sie uns die Bildrate zu Testzwecken einmal sehr hoch einstellen. Wählen Sie (noch immer im Spotlight-Beispiel) das Menü MODIFIZIEREN / FILM. Sie erreichen dieses Fenster auch über (Strg)+(M) oder per Doppelklick auf die Bildrate. Stellen Sie für die Bildrate den Wert 60 ein und klicken Sie auf OK. Spielen Sie nun den Film ab. Im Normalfall wird Ihr Computer versuchen, mit 60 bps abzuspielen, aber nicht mithalten können. Die Bildrate wird beim Abspielen laufend aktualisiert. Die hier angegebene Bildrate ist aber nicht ganz richtig, da Flash momentan im Bearbeitungsmodus läuft. Wenn der Film exportiert wurde, sieht die Bildrate im Normalfall noch niedriger aus. Die letzte Ziffer gibt an, wie viel Zeit Flash benötigen wird, um das aktuell angezeigte Bild zu erreichen. Wenn Sie eine Animation mit 50 Bildern haben, wird das letzte Bild bei einer Bildrate von 24 bps nach etwa zwei Sekunden und bei einer Bildrate von zwölf bps nach etwa vier Sekunden erreicht sein. Die Abspiellänge des Films hängt also von der Bildrate ab.

Die Bildrate gegenüber der Anzahl der Bilder Die Zahlen im Statusbereich sind von großer Wichtigkeit. Wenn Sie einen Film erstellen, werden Sie wahrscheinlich eine Bildrate auswählen wollen, um diese fest einzustellen. Wenn Sie dann später die Bildrate verändern, passiert das für den gesamten Film. Angenommen, Sie haben eine Animation eines Sportlers, der erst geht, dann läuft, später rennt und zwischendurch für einen Moment stillsteht. Wenn Sie ihn etwas schneller gehen lassen wollen, indem Sie die Bildrate erhöhen, wird er aber auch extra schnell rennen. Seine Pause wird auch kürzer ausfallen – alles geschieht einfach schneller. Am besten lassen Sie die Bildrate unverändert und finden einen anderen Weg, den Charakter zu beschleunigen. Tatsächlich gibt es ein paar Möglichkeiten, die effektive Geschwindigkeit zu verändern. Stellen Sie sich vor, dass Sie eine Animation eines Flugzeuges erstellen wollen, das sich über den Bildschirm bewegen soll. Dazu müssen Sie sich entscheiden, wie schnell das passieren soll. Wenn die Animation über 36 Bilder erfolgt, stellen Sie sich vielleicht eine Flugzeit von drei Sekunden vor. Dann stellen Sie einfach die Bildrate fest auf zwölf bps ein. Die effektive Geschwindigkeit gibt an, wie schnell sich etwas scheinbar bewegt. Dagegen steht die tatsächliche Geschwindigkeit. Wenn zwölf Bilder bei zwölf bps durchlaufen, dauert das eine Sekunde. Was dabei passiert, ist aber der Schlüssel zur effektiven Geschwindigkeit. Wenn Sie viel Bewegung erzeugen (Wolken, die sich in Gegenrichtung zum Flugzeug bewegen), scheint das Flugzeug bei zwölf bps sehr schnell zu fliegen. Wenn Sie allerdings nur das Flugzeug einzeln über die Bühne bewegen, ist die effektive Geschwindigkeit bei gleicher Bildrate eher langsam.

163

Animationen verstehen

Wenn ein Flugzeug in drei Sekunden über den Bildschirm fliegt, ist es scheinbar sehr nah. Wenn es allerdings in 8.000 Metern Höhe fliegt, braucht es etwa 15 Sekunden (oder länger), um den Bildschirm zu überqueren. Wenn Ihr Flugzeug also zu schnell ist, gibt es zwei Möglichkeiten, es zu verlangsamen: Entweder Sie setzen die Bildrate herunter, oder Sie gönnen der Animation mehr Bilder.

Die Bildrate verschiedener Animationstypen Wir haben uns bisher über die Bildrate bei verschiedenen Perspektiven unterhalten. Wenden wir uns einmal den unterschiedlichen Medien zu. Ein Kinofilm spielt mit einer Bildrate von 24 bps. Auch bei dieser eher geringen Rate scheint der Film doch sehr flüssig zu sein. Das Fernsehen arbeitet mit 30 bps. Bei Computeranimationen müssen wir anders an die Bildratenfrage herangehen. Der Monitor selbst wird viel mehr Bilder in der Sekunde anzeigen, als unsere Animation liefern kann. Deshalb kommt es bei Animationen auf dem Computer darauf an, wie oft sich ein Bild in der Animation verändert. In der Praxis sieht das dann so aus: Wenn Sie weit unter die Standardeinstellung von zwölf bps gehen, wird der Betrachter ein »Springen« der Animation ausmachen. Wenn Sie aber schneller werden, wird er denken, dass es viel flüssiger läuft und Bewegungen fast wie im echten Leben ablaufen. Denken Sie noch einmal an den Kinofilm: Er läuft mit 24 bps sehr flüssig. Auf den ersten Blick sieht es so aus, als ob Sie die Bildrate immer so hoch wie möglich ansetzen sollten, damit der »Ruckeleffekt« vermindert wird. In Wirklichkeit ist das aber nicht so einfach. Zuerst einmal werden die Dateien von Animationen mit hohen Bildraten oft viel größer. Außerdem braucht man dann auch einen Computer, der diese Bildrate flüssig anzeigen kann. Ein älterer Computer macht eine Animation daraus, die nicht nur ruckelnd abläuft, sondern auch noch viel langsamer wird. Abschließend sei gesagt, dass man den Betrachter auch ein wenig an der Nase herumführen kann, denn mit bestimmten Tricks kann man eine schnellere Bewegung vortäuschen. In Kapitel 3 werden Sie eine Animation erstellen, die nur aus drei Bildern besteht. Im 21. Kapitel lernen Sie dann noch weitere Techniken kennen. Im Moment reicht es, wenn Sie im Hinterkopf behalten, dass die Bildrate zwar sehr wichtig, bei weitem aber nicht das wichtigste ist.

Schlüsselbilder und leere Schlüsselbilder In einem Schlüsselbild definieren Sie genau, was zu diesem Zeitpunkt wie und wo auf der Bühne erscheinen soll. Dabei können also Objekte auf der Bühne sein oder sie kann auch leer bleiben. Ein solches leeres Schlüsselbild ist immer noch ein Schlüsselbild, bei dem halt nur nichts auf der Bühne erscheint.

164

Die Komponenten einer Animation

In einem traditionellen Film ist jedes Bild ein Schlüsselbild, da immer etwas Neues auf dem Bildschirm erscheint. Genauso können Sie in Flash jedes Bild als Schlüsselbild definieren, Sie können aber auch eine Abkürzung nehmen. Wenn das erste Schlüsselbild im Bild 1 erscheint und das nächste erst in Bild 10, passiert in den Bildern 2 bis 9 nichts Neues. Wenn Sie also ein Schlüsselbild erzeugen, machen Sie eigentlich nichts anderes, als Flash zu sagen: »Zeige diese Sachen auf der Bühne an und lass sie dort, bis das nächste Schlüsselbild erreicht wird.« Das nächste Schlüsselbild bedeutet wieder das Gleiche: »Zeige diese Sachen auf der Bühne...« Man muss sich bei Schlüsselbildern also nur zwei Sachen überlegen: Wann soll es in der Zeitleiste erscheinen, und was soll in dem Moment auf der Bühne erscheinen. Man erstellt ein Schlüsselbild, indem man das Bild, das zum Schlüsselbild werden soll, anklickt und dann EINFÜGEN / SCHLÜSSELBILD wählt oder direkt (F6) drückt. Wenn Sie diese Funktion ausführen, passieren einige Dinge. Zuerst wird das Bild nun durch einen Punkt in der Zeitleiste gekennzeichnet und der Inhalt des letzten Schlüsselbildes auf die Bühne kopiert. Wenn sich im letzten Schlüsselbild nichts auf der Bühne befunden hat, wird ein leeres Schlüsselbild eingefügt. Wenn im Schlüsselbild zuvor aber etwas angezeigt wurde, wird das wie gesagt kopiert. Das mag sich etwas eigenartig anhören, da ein Schlüsselbild ja eine Veränderung zum vorherigen Schlüsselbild bringen soll. In den meisten Fällen wird aber nur eine kleine Veränderung nötig sein. Deshalb kann man leichter mit einer Kopie starten und dort die Kleinigkeiten bearbeiten.

Aufgabe: Analysieren Sie eine fertig gestellte Animation! In dieser Übung werden wir eine Beispielanimation betrachten und kleine Änderungen daran vornehmen, um Schlüsselbilder besser verstehen zu können. 1. Wählen Sie HILFE / BEISPIELE / SCHLÜSSELBILD ERSTELLEN. Drücken Sie (¢), um zu sehen, wie die Animation abläuft (siehe Abbildung 6.4).

Abbildung 6.4: In dieser Zeitleiste verbergen sich eine Menge Hinweise darüber, wie die Animation aussehen wird.

165

Animationen verstehen

2. Wie Sie sehen, gibt es verschiedene Ebenen (Frame = Rahmen, Pot = Blumentopf, Plant = Pflanze, Butterfly = Schmetterling und Background = Hintergrund). Wir werden diese Ebenen einzeln betrachten. Gegebenenfalls müssen Sie die Höhe der Zeitleiste verändern (siehe Abbildung 6.5), wenn nicht alle Ebenen sofort sichtbar sind. Wir werden uns in Kapitel 11 noch genauer mit den Ebenen auseinander setzen.

Abbildung 6.5: Man kann die Größe der Zeitleiste verändern, um alle Ebenen zu sehen.

3. Die Ebenen Frame, Pot und Background legen das gleiche Verhalten an den Tag. Sie erscheinen sofort in Bild 1 und bleiben unverändert bis zum Ende der Animation auf der Bühne. Es existiert also immer ein Schlüsselbild in Bild 1, dem viele normale Bilder folgen. 4. Schrubben Sie in den Bildern 1 bis 10, um das Wachsen der Pflanze zu betrachten. Wie Sie sehen, ist in der Pflanzen-Ebene (Plant) für die Bilder 1 bis 10 je ein Schlüsselbild eingefügt. In jedem dieser Schlüsselbilder verändert sich das Aussehen der Pflanze ein wenig. Wenn Sie den Abspielkopf in die nächsten 15 Bilder bewegen, werden Sie sehen, dass die Pflanze dort nicht mehr weiter wächst. Deshalb sind dort in der Pflanzen-Ebene auch keine weiteren Schlüsselbilder, bis die Pflanze auf den Schmetterling trifft. 5. Die Schmetterlings-Ebene (Butterfly) ist wahrscheinlich die interessanteste. In den Bildern 1 bis 10 ist der Schmetterling nicht einfach außerhalb der Bühne – er existiert noch nicht. In Bild 1 finden wir also ein leeres Schlüsselbild, das angibt, dass in dieser Ebene am Anfang der Animation noch nichts auf dem Bildschirm angezeigt werden soll. Das nächste Schlüsselbild erscheint in Bild 10, wenn der Schmetterling zu fliegen beginnt. Beachten Sie, dass es keine weiteren Bilder nach dem Schlüsselbild in Bild 41 auf der Schmetterlings-Ebene gibt.

166

Die Komponenten einer Animation

6. Schauen wir, was passiert, wenn wir ein weiteres Bild in die Ebene einfügen. Klicken Sie dazu auf Bild 81 in der Ebene Butterfly. Drücken Sie nun (F5), um ein neues Bild einzufügen, oder wählen Sie EINFÜGEN / BILD. Wenn Sie die Animation nun abspielen lassen, wird der Schmetterling nicht verschwinden. Die Erscheinung des Schlüsselbildes 41 wird bis Bild 81 beibehalten. Man kann die Dauer dieses Zustandes (das Erscheinen des Schmetterlings) verkürzen, indem man das Quadrat aus Bild 81 nach links verschiebt (siehe Abbildung 6.6).

Abbildung 6.6: Wenn wir Bilder am Ende einer Ebene eingefügt haben, können wir die Dauer verkürzen, indem wir das Rechteck nach links bewegen.

7. Schließen Sie die Datei, ohne sie zu speichern. In diesem Beispiel hatten Sie also die Chance, Bilder, Schlüsselbilder und leere Schlüsselbilder in einer funktionsfähigen Datei zu erleben.

Tweening Man kann alles mögliche in ein Schlüsselbild legen, um es bis zum Erscheinen eines weiteren Schlüsselbildes anzuzeigen. Alternativ dazu können Sie Flash zwingen, einen Übergang zu generieren. Stellen Sie sich vor, dass im ersten Schlüsselbild ein Flugzeug auf der linken Seite der Bühne ist und im nächsten Schlüsselbild (einige Bilder später) das Flugzeug auf der rechten Seite erscheint. Flash kann nun berechnen, wie sich das Flugzeug von der einen Position zur anderen bewegen muss. Diesen Vorgang nennt man Tweening. Unter Tweening versteht man den Prozess, von einem Schlüsselbild auf ein anderes Schlüsselbild über Verformungen oder Verschiebungen überzuleiten. Wenn ein Kreis in Bild 1 am unteren Rand der Bühne ist und dann in Bild 10 am oberen Rand der Bühne auftaucht, ist der Übergang sehr abrupt. Wenn die beiden Bilder per Tweening verbunden werden, sieht man, wie der Kreis zehn mal 1/10 der Strecke zurücklegt. Flash übernimmt die Berechnung für Sie, so dass Sie nicht zehn neue Schlüsselbilder erstellen müssen, um den Kreis »von Hand« zu verschieben.

167

Animationen verstehen

Das Wort »Tweening« stammt vom englischen Wort »between« (zwischen) und wird auch in konventionellen Animationen verwendet. Wenn Sie einmal den Abspann eines voll animierten Filmes sehen, werden Sie neben den Zeichnern auch die so genannten Tweener finden. Die Zeichner erstellen sozusagen die Schlüsselbilder und die Tweener füllen die Lücken bis zum nächsten Schlüsselbild auf. Damit Sie eine Vorstellung von diesem Vorgang bekommen, können Sie sich die Abbildung 6.7 ansehen. Es ist wirklich so einfach, das erste Bild (hier den Kreis) zu zeichnen, dann das letzte Bild (das Quadrat) zu erstellen und Flash den Rest machen zu lassen. In den Kapiteln 8 und 9 werden wir dieses Thema noch vertiefen. Denken Sie im Moment nur daran, dass Flash uns bei solchen Arbeiten unterstützt.

Abbildung 6.7: Wenn man zwei verschiedene Schlüsselbilder erstellt hat, die durch einige Bilder getrennt sind, kann man Flash beauftragen, den Übergang zu generieren.

6.3

Zusammenfassung

Auch wenn wir in diesem Kapitel keine Animationen erstellt haben, so haben wir doch einige betrachtet. Wir haben einige Konzepte kennen gelernt, mit denen wir für die nächsten Kapitel gut gerüstet sind. Wir haben Medien wie Film und Fernsehen besprochen und herausgefunden, wie Animationen entstehen. Dieses Wissen haben wir auf Flash angewendet. Dann haben wir die Bildrate, Schlüsselbilder und das Tweening kennen gelernt. Diese drei Konzepte werden wir noch sehr oft in den nächsten Kapiteln einsetzen und somit vertiefen.

168

Workshop

6.4

Workshop

F&A F

Was ist die beste Bildrate, die man verwenden sollte? A

F

Die Bildwiederholfrequenz meines Monitors ist 75 Hz. Er zeigt also 75 Bilder in der Sekunde an. Allerdings kann ich in Flash sogar Bildraten von 120 Bildern in der Sekunde einstellen. Was macht das für einen Sinn? A

F

Das kann man leider nicht so pauschal beantworten. Bei der von Ihnen angegebenen Bildrate handelt es sich um das Maximum, was bei vielen Computern aber nicht erreicht werden kann. Experimentieren Sie ein wenig. Folgendes sollten Sie aber beachten: Entscheiden Sie sich einmal für eine Bildrate und bleiben Sie dann möglichst dabei. Wenn etwas sich sehr schnell bewegen soll, kann man auch einfach weniger Bilder verwenden, anstatt die Bildrate anzuheben.

Zuerst einmal werden Sie feststellen, dass Flash bei einer Bildrate von 120 Bildern in der Sekunde nicht mithalten kann. Wenn man nur wenige Bilder abspielt, kann man sicherlich mehr als 30 bps abspielen. Dennoch werden 120 bps nur in der Theorie erreicht. In Flash 4 kann man so aber erreichen, dass Skripte öfter ausgeführt werden (das besprechen wir in Kapitel 14). In Flash 5 gibt es dafür allerdings bessere Methoden. Deshalb sind sehr hohe Bildraten nur für superschnelle Computer geeignet.

Ich habe die Bildrate auf 24 bps eingestellt. Irgendwie hat sie sich aber auf 18,2 reduziert. Wie mache ich das wieder rückgängig? A

Das ist ein Zeichen, dass Ihr Computer die Animation nicht mit 24 bps abspielen kann. Die 18,2 ist die letzte Bildrate, die Ihr Computer geschafft hat, als Sie die Animation abgespielt haben. Wenn Sie die Bildrate wirklich wieder ändern wollen, können Sie darauf doppelklicken. Aber bedenken Sie, dass Flash die 24 bps nicht schaffen wird. Es wird nur versuchen, so schnell es geht abzuspielen.

169

Animationen verstehen

Übungsaufgaben Ich glaube, dass ich zu den Übungsaufgaben keine Moralpredigt mehr abgeben muss, oder? 1. Was ist der visuelle Effekt eines Filmes, der nur aus einzelnen Schlüsselbildern besteht? a. Er sieht sehr flüssig aus. b. Er wird »ruckelig« aussehen. c. Das hat keinen Einfluss auf die Erscheinung. 2. Wie wird die Animation erscheinen, wenn Sie die Bildrate auf zwei bps einstellen? a. Die Animation sieht »ruckelig« aus. b. Man sieht eine schwarze Pause zwischen den Bildern. c. Es erscheinen unterschwellige Botschaften zwischen den Bildern. 3. Wie lang dauert eine Animation mit 90 Bildern, wenn Sie die Bildrate auf 60 bps stellen? a. Genau 1,5 Sekunden b. 1,5 Sekunden oder länger c. Nichts von den oben genannten

170

Animationen auf die altmodische Weise

7

Animationen auf die altmodische Weise

Es wird endlich Zeit, selbst zu animieren! Sie wissen nun, wie man Grafiken erstellt und haben etwas, was Sie animieren können. Im letzten Kapitel haben Sie die Grundlagen für Animationen (Bilder, Schlüsselbilder, Bildrate und Tweening) erlernt. Sie sind also bereit, Ihre erste Animation zu erstellen. Wir werden nicht sofort mit den Methoden beginnen, bei denen Flash Sie unterstützt (Bewegungstweening und Formtweening), sondern wir werden zuerst eine Animation erstellen, die wir Bild für Bild verändern werden, um eine Bewegung zu simulieren. Mit Tweening werden wir uns in den nächsten beiden Kapiteln noch sehr genau auseinander setzen. Wenden wir uns also zuerst der »altmodischen Weise« zu. In diesem Kapitel werden Sie: 쐽

lernen, wie man eine Bild-für-Bild-Animation erstellt,

쐽

das Zwiebelschalen-Werkzeug kennen lernen,

쐽

einige Tricks ausprobieren, die diese altmodische Technik etwas effizienter nutzbar machen.

7.1

Die »Rohe-Gewalt«-Technik verstehen

Wenn Sie schon einmal ein Daumenkino erstellt haben, wissen Sie, wie man eine Bild-fürBild-Animation erstellt. Jedes Bild ist ein wenig anders als das Bild zuvor. Wenn Sie dann das Daumenkino verwenden, wird eine Animation entstehen. Genau das wollen wir in diesem Kapitel besprechen. Allerdings werden wir nicht unterschiedliche Zeichnungen in ein Buch malen, sondern viele Schlüsselbilder in Flash erstellen, die wir dann jeweils leicht abändern.

Aufgabe: Wie man eine Bild-für-Bild-Animation erstellt Genug geredet! Lassen Sie uns eine Animation erstellen und dann später darüber reden, was wir gemacht haben. Unsere Animation heißt: »Twistendes Strichmännchen«. 1. Erstellen Sie in einer neuen Datei ein Strichmännchen, das nur aus Linien (ohne Füllungen) besteht. 2. Klicken Sie nun in der Zeitleiste direkt neben das Schlüsselbild mit dem Punkt – das ist also die zweite Zelle in Ebene 1. 3. Klicken Sie EINFÜGEN / SCHLÜSSELBILD oder drücken Sie (F6), um ein Schlüsselbild in das zweite Bild einzufügen.

172

Die »Rohe-Gewalt«-Technik verstehen

Abbildung 7.1: Ein Strichmännchen, das nur aus Linien besteht (damit man es leichter bearbeiten kann)

4. Jetzt wollen wir eine kleine Änderung im zweiten Bild vornehmen. Dazu sollten wir sicherstellen, dass wir uns auch im zweiten Bild befinden. Der Abspielkopf muss demnach auf das zweite Bild zeigen. Wenn das nicht so ist, klicken Sie einfach in das zweite Rechteck in der Zeitleiste. 5. Nun kommt die versprochene Änderung: Biegen Sie das rechte Bein ein wenig und verändern Sie den Endpunkt eines Armes, so dass er winkend aussieht (siehe Abbildung 7.2). 6. Wenn Sie eine kleine Vorschau auf das haben wollen, was Sie bisher animiert haben, verwenden Sie einfach die Schrubbertechnik. Halten Sie den Abspielkopf fest und bewegen Sie ihn nach links und rechts. Es gibt noch nicht sehr viel zu sehen, aber das Strichmännchen schwingt schon lässig das Knie. 7. Weiter geht es mit dem dritten Bild. Klicken Sie in Ebene 1 auf das Bild 3 und erzeugen Sie ein neues Schlüsselbild. Es wird der Inhalt von Bild 2 in das neue Schlüsselbild kopiert. 8. Ändern Sie wieder eine Kleinigkeit (das Bein weiter beugen und den Arm mehr bewegen). 9. Fügen Sie Schlüsselbild für Schlüsselbild weiter ein und nehmen Sie dazwischen immer wieder Änderungen vor.

173

Animationen auf die altmodische Weise

Abbildung 7.2: Im zweiten Schlüsselbild wird das Bein ein wenig gebogen.

Eine Animation als Test-Film betrachten Es gibt drei Wege, die komplette Animation zu betrachten: Schrubben, Abspielen und Testen. Während der Arbeit kann man die Schrubbertechnik sehr gut anwenden, denn der Abspielkopf ist immer recht schnell erreichbar. Das Problem dabei ist nur, dass die Geschwindigkeit nicht sehr konstant ist (genauer gesagt nur so konstant, wie Sie schrubben). Die zweite Möglichkeit verbirgt sich hinter dem Menüpunkt STEUERUNG / ABSPIELEN. Da Sie hier nicht genau das sehen werden, was der Betrachter später auf dem Bildschirm hat, will ich Ihnen sofort nahe legen, einen Film nicht mit dieser Funktion zu testen oder darauf abzustimmen, denn die letzte Möglichkeit gibt immer noch am meisten Aufschluss über das echte Verhalten und Aussehen des Films. Ich rede von STEUERUNG / FILM TESTEN oder (Strg)+(¢). Diese Option exportiert eine .swf-Datei in den Ordner, in dem die Datei gespeichert wurde. Danach wird der Flash-Player geöffnet und spielt das Ergebnis ab. Wenn Sie nach einem Test schon mit dem Ergebnis zufrieden sein sollten, können Sie die .swf-Datei direkt einsetzen, ohne den Film exportieren zu müssen. Sie werden sicherlich gemerkt haben, dass sich die Menüleiste verändert, wenn man einen Film testet. Das liegt daran, dass Sie in dem Moment nicht mehr in Flash, sondern im Flash-Player (also in einem ganz anderen Programm) sind. Der einzige Nachteil an dieser Konstruktion ist, dass man den Flash-Player schließen muss, um nach Flash zurückzukehren. Der Vorteil ist dagegen, dass Sie genau das sehen werden, was der Betrachter später auch auf dem Bildschirm hat.

174

Die »Rohe-Gewalt«-Technik verstehen

Ein Schlüsselbild zur gleichen Zeit bearbeiten Die Bild-für-Bild-Technik ist recht einfach. Sie erzeugen für jedes Bild ein Schlüsselbild. Deshalb ist in jedem Bild etwas ganz anderes auf der Bühne – manchmal ist der Unterschied eher minimal und manchmal doch eher drastisch. Das Schöne an der Sache ist, dass Sie alles in einem Schlüsselbild unterbringen können, ohne darauf zu achten, was in den anderen Schlüsselbildern passiert. Auch wenn es sich bei diesem Animationstyp um einen recht simplen handelt, entsteht doch eine Menge Arbeit. Stellen Sie sich einmal vor, Sie würden jedes Bild neu zeichnen müssen, auch wenn es sich nur um eine kleine Änderung handelt. Allerdings haben Sie bei keiner anderen Technik so eine detaillierte Kontrolle, was in jedem einzelnen Bild passieren soll.

Die Bilddarstellung ändern Auch wenn es sich bei der Bild-für-Bild-Technik um eine Menge Arbeit handelt, heißt das nicht, dass Sie keine Hilfe annehmen dürfen. Ein Weg, den Prozess ein wenig einfacher zu gestalten, ist, die Bilddarstellung zu verändern. In Abbildung 7.3 sehen Sie die Schaltfläche, die dafür zuständig ist. Wenn Sie hier VORSCHAU anklicken, werden Sie alle Bilder der Animation sehen, ohne diese durchlaufen zu müssen. Wenn Sie VORSCHAU IM KONTEXT auswählen, werden auch Abstände und leere Bühnenabschnitte angezeigt. Das Strichmännchen wird in der Vorschau also kleiner dargestellt.

Abbildung 7.3: Man kann im Menü Bilddarstellung einstellen, ob und wie eine Vorschau in der Zeitleiste angezeigt werden soll.

175

Animationen auf die altmodische Weise

In der Abbildung 7.4 sieht man die Strichmännchen-Animation im VORSCHAU-Modus.

Abbildung 7.4: Hier wurde in der Bilddarstellung der VorschauModus aktiviert.

Durch diese Einstellungen wird Ihre Animation nicht beeinflusst. Auch wenn Sie eine noch so große Darstellung der Vorschau in der Zeitleiste einstellen, wird das Ergebnis für den Betrachter später immer noch gleich sein.

Die Zwiebelschalen-Werkzeuge verwenden Die wohl besten Hilfsmittel für Bild-für-Bild-Animationen in Flash sind ohne Frage die Zwiebelschalen-Werkzeuge. Diese Technik stammt aus konventionellen Animationen, denn wenn ein Zeichner ein neues Bild erstellen sollte, das sich nur minimal vom vorherigen unterscheidet, hat er Pauspapier verwendet, das so transparent war, dass man das vorherige Bild hindurch sehen konnte. Dieser Effekt ist auch in Flash so anwendbar. Sie können so viele Bilder vor oder nach dem aktuellen Bild anzeigen, wie Sie wollen.

176

Die »Rohe-Gewalt«-Technik verstehen

Öffnen Sie die Datei mit dem Strichmännchen. Klicken Sie auf die Schaltfläche der Zwiebelschalen-Werkzeuge links außen (wie in Abbildung 7.5). Stellen Sie die Zeitleistenansicht im Bilddarstellungsmenü auf GROSS. Nun können Sie den Abspielkopf auf ein beliebiges Bild in der Zeitleiste positionieren und Sie sehen zusätzlich eine abgeschwächte Version der anderen Bilder auf der Bühne.

Abbildung 7.5: Der ZwiebelschalenModus ist aktiv. Deshalb können wir die anderen Bilder der Animation auf der Bühne erkennen.

177

Animationen auf die altmodische Weise

Wie viele Bilder man zusätzlich auf der Bühne sieht, hängt vom Zwiebelschalen-Anfang und -Ende ab. Da man diese Markierungen nur sehr schwer zu fassen bekommt (ich erfahre das immer wieder selbst), empfiehlt es sich, die Bilddarstellung zu vergrößern (das haben wir ja schon erledigt). Damit Sie ein wenig Übung mit diesem Werkzeug bekommen, können wir die Strichmännchen-Animation erneut erstellen (nur jetzt mit dem Zwiebelschalen-Werkzeug).

Aufgabe: Verwenden Sie die Zwiebelschalen, um bei der Animationsgestaltung unterstützt zu werden! 1. Öffnen Sie eine neue Datei und stellen Sie die Bildansicht auf Gross. 2. Schalten Sie den Zwiebelschalen-Modus ein. Beachten Sie, dass man die Anfangsund Endmarkierung (siehe Abbildung 7.6) nicht über die Animation hinausbewegen kann. Wir besitzen im Moment nämlich nur ein Bild.

Abbildung 7.6: Die Markierungen der Zwiebelschale geben an, wie viele Bilder im Zwiebelschalen-Modus angezeigt werden sollen.

3. Zeichnen Sie wieder ein Strichmännchen ohne Füllungen. 4. Erstellen Sie ein Schlüsselbild an der Bildposition 2. 5. Verändern Sie in Bild 2 die Position des Beines. Nun werden Sie das alte Bein in einer abgeschwächten Form wiedererkennen. 6. Erstellen Sie ein Schlüsselbild in Bild Nummer 3. Wenn Sie nun das Bein verändern, können Sie sehr gut ausmachen, wie weit Sie es bewegen müssen, um eine gleichmäßige Animation zu bekommen. 7. Erstellen Sie weitere Schlüsselbilder und denken Sie daran, immer eine Veränderung vorzunehmen, bevor Sie das nächste Schlüsselbild einfügen. 8. Wenn Sie einige Schlüsselbilder erzeugt haben, testen Sie das Zwiebelschalen-Werkzeug aus, indem Sie die Anfangs- und Endmarkierungen verschieben. Außerdem können Sie einige voreingestellte Optionen erhalten, wenn Sie die rechte Schaltfläche der Zwiebelschalen-Werkzeuge anklicken (siehe Abbildung 7.7).

178

Die »Rohe-Gewalt«-Technik verstehen

Abbildung 7.7: Das Menü Zwiebelschalenmarkierung ändern hat mehrere Optionen.

Das Menü ZWIEBELSCHALENMARKIERUNG ÄNDERN hat mehrere Optionen: 쐽

MARKIERUNGEN IMMER ANZEIGEN: Die Markierungen bleiben immer sichtbar, auch wenn Sie den Zwiebelschalen-Modus ausgeschaltet haben.

쐽

MARKIERUNGEN VERANKERN: Die Markierungen bleiben fest an dieser Stelle (egal wo der Abspielkopf ist).

쐽

2 ZWIEBELSCHALEN: Es werden immer zwei Bilder vor und nach dem Abspielkopf angezeigt.

쐽

5 ZWIEBELSCHALEN: Es werden immer fünf Bilder vor und nach dem Abspielkopf angezeigt.

쐽

ALLE ZWIEBELSCHALEN: Es werden alle Bilder angezeigt.

Bevor wir dieses Werkzeug abschließen, will ich noch die letzten beiden Optionen besprechen: Zwiebelschalenkonturen und Mehrere Bilder bearbeiten. Sie können entweder Zwiebelschalen oder Zwiebelschalenkonturen einschalten, aber nicht beides. Bei der letzteren Option werden die Zwiebelschalen ohne Füllungen dargestellt. Das ist besonders bei langsameren Rechnern interessant oder wenn Sie den Überblick verlieren.

179

Animationen auf die altmodische Weise

Der letzte Punkt (Mehrere Bilder bearbeiten) ist auch sehr interessant. Wenn man diese Option einschaltet, kann man alle Bilder innerhalb der Zwiebelschalen-Markierungen bearbeiten (also auch die abgeschwächt angezeigten). Auf diese Weise kann man beispielsweise sehr schnell den gesamten Inhalt einer Animation verschieben. Wählen Sie dazu ALLE ZWIEBELSCHALEN, markieren dann alles und schieben es wohin Sie wollen.

7.2

Die Bild-für-Bild-Animation erweitern

Eine Bild-für-Bild-Animation kann eine Menge Arbeit bedeuten. Das heißt aber nicht, dass es immer viel Arbeit sein muss. Manchmal kann man mit ein Paar Tricks denselben Effekt mit dem Bruchteil des Arbeitsaufwandes erstellen. Dieser Abschnitt soll Ihnen ein paar Ideen dazu geben. In Kapitel 21 finden Sie noch mehr zu diesem Thema.

Pausen integrieren

Abbildung 7.8: Diese Bild-für-BildAnimation enthält eine Pause nach dem fünften Schlüsselbild, da das nächste Schlüsselbild erst in Bild 11 auftaucht und somit dazwischen der Inhalt der Bühne unverändert bleibt.

Angenommen Sie haben eine Animation mit zwölf Bildern. Wenn Sie hier für jedes Bild ein Schlüsselbild einfügen, haben Sie eine echte Bild-für-Bild-Animation. Manchmal soll sich der Inhalt der Bühne aber nicht bei jedem Bild ändern. Dann sind die ungeänderten Schlüsselbilder schon zu viel Arbeit. Dafür kann man auch Pausen einsetzen.

180

Die Bild-für-Bild-Animation erweitern

Man kann Pausen auf zwei Arten erzeugen. Einerseits kann man während der Animationserstellung einfach ein paar Bilder überspringen, wenn man das nächste Schlüsselbild einfügt (siehe Abbildung 7.8). Andererseits ist auch nach der Fertigstellung der Animation das Einbinden von Pausen möglich, denn wenn Sie auf das Schlüsselbild klicken, das länger erscheinen soll und dann EINFÜGEN / BILD auswählen, wird der gesamte Inhalt der Ebene, der nach diesem Schlüsselbild erscheint, ein Bild weiter nach rechts verschoben. Pausen sind ein sehr wichtiges kreatives Mittel. Stellen Sie sich vor, Ihr Strichmännchen läuft über die Bühne und soll danach wieder zurückgehen. Was passiert in dem Moment, in dem es umkehrt? Na klar! Es muss eine kurze Pause einlegen, um das wirklich glaubhaft zu machen.

Bewegung vorgaukeln Eigentlich braucht man für eine Animation nur zwei Bilder. Wenn Sie beispielsweise in Bild 1 das Strichmännchen links auf der Bühne anordnen und dann im zweiten Bild auf der rechten Seite, haben Sie eine solche Animation. Wenn Sie so etwas einigen Leuten zeigen, werden Sie immer welche finden, die darauf schwören würden, dass unser Strichmännchen sich von links nach rechts bewegt hätte. Im echten Leben gibt es keine Möglichkeit, von einem Punkt zum anderen zu kommen, ohne über alle Punkte dazwischen gewandert zu sein, aber in Animationen brauchen Sie nicht jeden Zwischenschritt zu zeichnen. Probieren wir das doch einmal aus. Erzeugen Sie ein Strichmännchen, das in Bild 1 einen Fußball vor dem rechten Bein liegen hat. Im Bild zehn erzeugen Sie ein neues Schlüsselbild, in dem sich der Ball in der Luft befindet und das Bein des Strichmännchens gestreckt ist. Die Animation ist gar nicht mal schlecht. Wenn Sie jetzt noch in Bild 4 ein weiteres Schlüsselbild ergänzen, in dem die Figur mit dem Bein ausholt, haben Sie schon eine recht gute Animation. Das Strichmännchen steht neben dem Ball, holt aus und schießt. Stellen Sie sich einmal vor, wie viel Arbeit es wäre, alle zehn Bilder voll auszumalen. Abbildung 7.9: Mit nur drei Bildern kann man schon eine Animation erstellen, die viel mehr Bewegung vorgaukelt, als wirklich in ihr steckt.

Das Vorgaukeln von Bewegung ist eine großartige Fähigkeit. Man kann damit eine Menge Zeit einsparen, die man besser für andere Sachen einsetzen kann.

181

Animationen auf die altmodische Weise

Der Flimmer-Effekt Wie stellt man einen Blinkeffekt her? Ganz einfach: Sie benötigen nur ein Schlüsselbild mit Ihrem Objekt, danach ein Bild, in dem sich nichts auf der Bühne befindet und danach sofort wieder ein Bild mit dem Objekt. Es gibt mehrere Möglichkeiten, wie man so etwas löst. Eine davon wird in der nächsten Aufgabe besprochen.

Aufgabe: Erstellen Sie eine flimmernde Sonne! 1. Zeichnen Sie in Bild 1 einer neuen Datei eine Sonne, die etwa wie in Abbildung 7.10 aussieht.

Abbildung 7.10: Das Bild der Sonne, die wir nun flimmern lassen wollen

2. Wählen Sie die Sonne aus und wandeln Sie diese in ein Filmsequenz-Symbol namens Sonne um. 3. Nun wählen Sie die Bilder 1 bis 10 aus. Dazu klicken Sie auf Bild 10 und halten die Maustaste gedrückt, währen Sie die Maus auf Bild 1 bewegen. 4. Wählen Sie nun MODIFIZIEREN / BILDER / IN SCHLÜSSELBILDER KONVERTIEREN. Sie haben nun zehn Schlüsselbilder mit einem Klick erzeugt. 5. Klicken Sie nun auf das Bild 2 und der Inhalt wird automatisch ausgewählt.

182

Zusammenfassung

Abbildung 7.11: Wir löschen gerade den Inhalt des zweiten Bildes. Genauso verfahren wir auch mit jedem weiteren zweiten Bild.

6. Drücken Sie nun auf (Entf), um die Sonne zu löschen. In diesem Moment haben Sie ein Schlüsselbild ohne Inhalt erzeugt, das auch leeres Schlüsselbild genannt wird. Man erkennt es an dem leeren umrahmten Rechteck in der Zeitleiste (siehe Abbildung 7.11). 7. Fahren Sie fort, indem Sie bei jedem Bild mit gerader Nummer den Inhalt löschen. Testen Sie den Film und Sie werden feststellen, dass er genau den Effekt bringt, den wir erhofft haben.

7.3

Zusammenfassung

In diesem Kapitel haben wir die Bild-für-Bild-Animation kennen gelernt. In späteren Kapiteln werden wir uns mit weiterführenden Techniken auseinander setzen. Sie haben aber jetzt schon eine Menge Grundlagen in Sachen Animationsdesign erlernt (Schlüsselbilder, Zwiebelschalen-Werkzeug und Pausen). Außerdem haben Sie Ihre ersten Animationen selbst erstellt.

183

Animationen auf die altmodische Weise

7.4

Workshop

F&A F

Wann macht es Sinn, ein Schlüsselbild nach dem anderen einzufügen, anstatt eine ganze Serie per MODIFIZIEREN / BILDER / IN SCHLÜSSELBILDER KONVERTIEREN umzuwandeln? A

F

Was ist der Unterschied zwischen dem Einfügen eines Schlüsselbildes mit dem direkt darauf folgenden Löschen des Bühneninhaltes und dem Einfügen eines leeren Schlüsselbildes? A

F

Wenn man eine permanente Weiterentwicklung verwirklichen möchte, macht es Sinn, ein Schlüsselbild einzufügen und danach die Veränderung vorzunehmen, um dann wiederum ein weiteres Schlüsselbild einzufügen, in dem die Veränderung dann schon enthalten ist. Deshalb ist auf diese Weise jedes Schlüsselbild genauso wie das vorherige, bevor Sie eine leichte Veränderung vornehmen. Wenn Sie allerdings in jedes Schlüsselbild eine ganz neue Zeichnung einfügen möchten, sollten Sie leere Schlüsselbilder per MODIFIZIEREN / BILDER / IN LEERE SCHLÜSSELBILDER KONVERTIEREN verwenden. Auf diese Weise können Sie bei jedem Schlüsselbild mit einer leeren Bühne beginnen.

Ganz einfach, es gibt keinen. Es ist nur ein wenig einfacher zu verstehen, wenn man zuerst ein Schlüsselbild einfügt und dann den Inhalt löscht. In dem Moment braucht man nicht über leere Schlüsselbilder nachzudenken, sondern man hat einfach ein Schlüsselbild ohne Inhalt.

Ist die Bild-für-Bild-Animation der beste Animationstyp? A

Nein, in den meisten Fällen verursacht sie mehr Arbeit als andere Animationstechniken. Das werden Sie aber noch mitbekommen.

Übungsaufgaben 1. Wenn Sie ein Schlüsselbild erzeugen – wie lang bleibt es auf der Bühne? a. Nur das eine Bild lang, in dem Sie es gezeichnet haben b. Bis ein anderes Schlüsselbild mit anderem Inhalt auftaucht c. Für die gesamte Animation

184

Workshop

2. Wie viele Bilder sind für eine Animation erforderlich? a. Eins b. Zwei oder mehr c. Nicht weniger als drei 3. In welchem Teil des Buches werden wir animieren? a. In den nächsten zwei Kapiteln b. In den letzten zwei Kapiteln c. In diesem Kapitel – wir haben schon die ganze Zeit Animationen erstellt

Zusatz-Aufgabe Ich habe eine schöne Übung für Sie: Versuchen Sie einmal, eine Animation zu erstellen, in der Sie nicht immer den Inhalt des vorherigen Bildes kopieren, sondern wirklich in jedem Schlüsselbild neu zeichnen. Wählen Sie die Bilder 1 bis 100 aus und fügen Sie per MODIFIZIEREN / BILDER / IN SCHLÜSSELBILDER KONVERTIEREN in jedem Bild ein leeres Schlüsselbild ein. Schalten Sie in den Modus 2 ZWIEBELSCHALEN. Nun zeichnen Sie im ersten Bild mit dem Pinsel-Werkzeug ein kleines »V«, das einen Vogel darstellen soll. Gehen Sie nun zum nächsten Bild (die Kurztaste dafür ist .). Zeichnen Sie hier den Vogel an einer etwas anderen Stelle. Fahren Sie so fort: V, nächstes Bild, V, nächstes Bild, V ... . Das geht eigentlich recht schnell. Wenn der Vogel langsam fliegen soll, malen Sie das V nahe dem vorherigen. Soll der Vogel schneller fliegen, vergrößern Sie einfach den Abstand.

185

Ta g 1

Grundlagen

23

Ta g 2

Malen und Zeichnen

51

Ta g 3

Grafiken in Flash importieren

87

Ta g 4

Fortgeschrittene Zeichentechniken

113

Ta g 5

Die Bibliothek produktiv einsetzen

135

Ta g 6

Animationen verstehen

159

Ta g 7

Animationen auf die altmodische Weise

171

Ta g 8

Animationen mit Bewegungstweening Morphing mit Formtweening Sound in Animationen einbinden Ebenen in Animationen verwenden Animationen mit Filmsequenzen und Grafik-Symbolen Schaltflächen erstellen, auf die ein Anwender klicken kann Aktionen verwenden, um nichtlineare Filme zu erzeugen

Ta g 9 Ta g 1 0 Ta g 1 1 Ta g 1 2 Ta g 1 3 Ta g 1 4

Tag 15 ActionScripting-Anwendungen für erweiterte Interaktivität Tag 16 Smart-Filmsequenzen Tag 17 Filme mit dem Internet verknüpfen

189 205 219 239

W O C H E

259 271 287 315 333 351

Tag 18 Modulare Internetseiten entwerfen Tag 19 Eine gute Benutzeroberfläche erstellen

361

Tag 20 Optimierung Ihrer Flash-Site Tag 21 Animationstechniken für Fortgeschrittene

391

WOCHE 2 – VORSCHAU

W O C H E

375

419

W O C H E

Animationen mit Bewegungstweening

8

Animationen mit Bewegungstweening

Wenn man eine Bild-für-Bild-Animation (wie im letzten Kapitel) erstellt, bedeutet das eine Menge Arbeit, da man jedes Bild selbst zeichnen muss. Über das Tweening werden Sie von Flash unterstützt. Es generiert nämlich die Bilder zwischen zwei Schlüsselbildern. Sie können in Flash zwei Formen des Tweenings verwenden: Bewegungstweening und Formtweening. In diesem Kapitel wenden wir uns zuerst dem Bewegungstweening zu. In diesem Kapitel werden Sie: 쐽

einen Bewegungstween erstellen,

쐽

die vier Grundeigenschaften eines Bewegungstweens kennen lernen,

쐽

mit den Effekten »abbremsen« und »beschleunigen« experimentieren,

쐽

Tricks ausprobieren, mit denen Ihre Bewegungstweens natürlicher und realistischer aussehen.

8.1

Einen Bewegungstween erstellen

Man kann einen Bewegungstween recht schnell und einfach erzeugen. Probieren wir es einmal aus. Danach können wir immer noch zur Analyse kommen.

Aufgabe: Erstellen Sie einen einfachen Bewegungstween! 1. Zeichnen Sie in einer neuen Datei einen Kreis auf die Bühne. 2. Wählen Sie den ganzen Kreis aus und wandeln Sie ihn in ein Symbol um, das eine Filmsequenz namens Kreis sein soll. 3. Erzeugen Sie in Bild 30 ein Schlüsselbild. 4. Wählen Sie das Schlüsselbild 1 aus und bewegen Sie den Kreis zur Startposition (sagen wir, die linke Seite der Bühne). 5. Klicken Sie auf das letzte Schlüsselbild (Bild 30). Bewegen Sie nun den Kreis nach rechts. 6. Probieren Sie die Animation mit der Schrubbertechnik aus. Wie Sie sehen, lässt die Animation noch zu wünschen übrig, denn bis Bild 29 bleibt der Kreis links stehen und springt dann in Bild 30 nach rechts. Damit wir die Bewegung etwas flüssiger simulieren können, wird sich Flash um die Bilder 2 bis 29 kümmern. 7. Man muss das Tweening im ersten Schlüsselbild definieren, das zum Tweening-Vorgang gehört. In unserem Fall ist das Bild 1. Klicken Sie also darauf und öffnen Sie das Bild-Bedienfeld.

190

Einen Bewegungstween erstellen

8. In diesem Bedienfeld finden Sie einerseits ein Eingabefeld für die Bezeichnung des Bildes (dazu kommen wir später noch einmal) und darunter ein Auswahlfeld namens Tweening. 9. Wählen Sie hier die Option Bewegung aus und lassen Sie die anderen Einstellungen unverändert (siehe Abbildung 8.1).

Abbildung 8.1: Das geöffnete Bedienfeld Bild mit unserem ersten Schlüsselbild im Hintergrund

Abbildung 8.2: Die Zeitleiste enthält nun einen schwarzen Pfeil auf blauem Grund, um anzuzeigen, dass die beiden Schlüsselbilder per Bewegungstween verbunden werden.

191

Animationen mit Bewegungstweening

10. Das war's! Beachten Sie, dass von Flash ein Pfeil wie in Abbildung 8.2 erzeugt wurde, der die beiden Schlüsselbilder verbindet. Testen Sie nun Ihren Film (mit (Strg)+(¢)), um zu sehen, was Flash daraus gemacht hat.

Die Regeln eines Bewegungstweens befolgen Die Übungsaufgabe hat funktioniert, weil die Regeln eines Bewegungstweens genau befolgt wurden (auch wenn Sie diese noch nicht kannten): Man darf in den Schlüsselbildern nicht mehrere Objekte haben und das eine Objekt, das Sie verwenden, muss dazu noch ein Symbol sein. Flash ist an dieser Stelle sehr eigen und wird Ihnen eine Zuwiderhandlung nicht verzeihen. Die gute Nachricht ist, dass Flash Ihnen verschiedene Hinweise geben wird, falls Sie diese Regel nicht befolgen. Im Bild-Bedienfeld wird dann ein Warnsymbol mit Ausrufzeichen angezeigt. Wenn man darauf klickt, erhält man diese Meldung: Bewegungs-Tween kann nicht auf Ebenen angewendet werden, auf welchen Formen bzw. mehr als eine Gruppe oder ein Symbol vorhanden sind.

Abbildung 8.3: Wenn Sie die Regeln eines Bewegungstweens nicht befolgen, werden Sie von Flash gewarnt.

192

Einen Bewegungstween erstellen

Sie brauchen den Knopf aber nicht einmal zu drücken, um zu wissen, dass etwas falsch läuft – das Ausrufungszeichen ist schon genug. Zusätzlich dazu wird die Zeitleiste ein wenig anders aussehen. Wo der Pfeil erscheinen sollte, ist dann eine gestrichelte Linie (siehe Abbildung 8.3). Wie Sie dem Hinweistext von Flash entnehmen können, ist es prinzipiell auch möglich, einen Bewegungstween auf Gruppen anzuwenden. Davon will ich Ihnen aber abraten, da Flash daraus zuerst einmal ein Symbol namens Tween 1 erstellen würde, um damit weiterzuarbeiten. In diesem Fall würde Ihnen Flash sozusagen das Denken abnehmen. Es ist aber von Vorteil, wenn Sie selbst das Symbol zum Tweening anlegen, da Sie dann die freie Namenswahl haben und für mehr Überblick in der Bibliothek sorgen.

Techniken und Tipps Sie können stolz darauf sein, dass Sie den Kreis von links nach rechts bewegt haben. Allerdings hat in Wirklichkeit Flash die Arbeit erledigt. Wie wir noch sehen werden, kann Flash alle beliebigen zwei (der Regel entsprechenden) Schlüsselbilder ineinander übergehen lassen. Dabei spielt es keine Rolle, wie verschieden diese sind. Zusätzlich dazu gibt es noch Optionen, die Ihnen die Arbeit mit Tweens noch weiter vereinfachen.

Mehr als nur die Position tweenen Wie Sie in Kapitel 5 gesehen haben, können verschiedene Instanzen desselben Symbols unterschiedliche Eigenschaften wie Farbe und Skalierung haben. Insgesamt gibt es sieben solcher Eigenschaften: Position, Skalierung, Drehung, Kippwinkel, Helligkeit, Farbton und Alpha. Diese sieben Attribute können auch für das Tweening eingesetzt werden. Versuchen wir doch einfach einmal ein wenig mehr als nur die Position per Tweening zu verändern. Das Ergebnis wird nicht unbedingt ganz perfekt sein, aber dazu kommen wir später noch.

Aufgabe: Tweenen Sie Position, Vergrößerung, Rotation und Farbe! 1. Erstellen Sie in einer neuen Datei einen Textblock mit Ihrem Namen. Die Größe ist dabei nicht so wichtig, der Name sollte allerdings groß genug sein, damit Sie später gut die Effekte sehen können. 2. Wählen Sie nun mit dem Pfeil-Werkzeug den Textblock (nicht den Text selbst) aus und wandeln Sie ihn in ein Symbol namens Mein Name um. 3. Fügen Sie nun in Bild 30 ein Schlüsselbild ein ((F6)).

193

Animationen mit Bewegungstweening

4. Klicken Sie wieder auf das Schlüsselbild 1 und positionieren Sie den Namen unten links (das ist dann die Startposition). 5. Wählen Sie im Bild-Bedienfeld für Tweening den Wert Bewegung aus. 6. Nun wechseln Sie zum Bild 30 (also zum zweiten Schlüsselbild) und bestimmen die Endposition des Textes. Vergrößern Sie diesen so, dass er die gesamte Bühne einnimmt und positionieren Sie ihn gegebenenfalls etwas weiter in der Mitte. 7. Verschaffen Sie sich einen Überblick über die Animation, indem Sie die Schrubbertechnik anwenden. Sie können nun nur noch den Start- und Endpunkt der Animation festlegen. Flash kümmert sich selbst um die Bilder zwischen den Schlüsselbildern. 8. Bewegen Sie den Abspielkopf wieder auf Bild 30. Sie werden sich dem Farbeffekt der Instanz zuwenden. Wählen Sie die Instanz aus und öffnen Sie das Effekt-Bedienfeld (siehe Abbildung 8.4). Wählen Sie dort den Effekt Farbton aus und stellen Sie eine helle Farbe ein. Schrubben Sie erneut, um eine kurze Vorschau zu erhalten.

Abbildung 8.4: Der Effekt Farbton wurde in Bild 30 angewendet.

9. Gehen Sie zum ersten Bild und vergrößern Sie den Namen um einiges. (Eventuell müssen Sie die Position anpassen.) 10. Rotieren Sie den Namen um wenige Grad gegen den Uhrzeigersinn und kippen Sie ihn etwas (siehe Abbildung 8.5). 11. Testen Sie nun die Animation. Sie haben zwei ganz unterschiedliche Schlüsselbilder erzeugt, aber Flash führt diese genau ineinander über.

194

Einen Bewegungstween erstellen

Abbildung 8.5: Wir können jede Eigenschaft der Instanz verändern und Flash wird sie entsprechend tweenen.

Auch wenn man viele Eigenschaften von Instanzen tweenen kann, sollten Sie nicht in die Versuchung kommen, zu viel auf einmal zu verändern. Ein besonders rechenintensiver Faktor ist das Tweening von Alpha. Ich will es Ihnen nicht komplett verbieten, da es oft sehr gute Effekte erzielt, aber denken Sie daran, dass gerade langsamere Rechner ihre Probleme haben werden, wenn sich der Alphawert eines Objekts schnell verändert. Wenn nichts durch ein Objekt hindurchscheint, sollten Sie lieber die Helligkeit regeln, da dies nicht so viele Geschwindigkeitseinbußen bringt.

Halten Sie sich aus dem Territorium von Flash heraus Sie sind für die Erstellung von Schlüsselbildern verantwortlich und Flash für den Übergang dazwischen. Betrachten Sie also den Bereich zwischen zwei Schlüsselbildern (die per Tweening verbunden sind) als »Niemandsland«. Wenn Sie versuchen, etwas in einem Tweening-Bereich zu bearbeiten (siehe Abbildung 8.6), werden Sie wahrscheinlich unerwartete Ergebnisse erhalten. Wenn Sie an einer solchen Stelle etwas ändern wollen, sollten Sie ein Schlüsselbild einfügen. Allerdings nehmen Sie dann Flash die Kontrolle über den gesamten Bewegungstween. Im späteren Verlauf des Kapitels werden wir noch Möglichkeiten kennen lernen, wann ein Eingriff in einen Bewegungstween sinnvoll sein kann.

195

Animationen mit Bewegungstweening

Abbildung 8.6: Der Abspielkopf befindet sich zwischen den Schlüsselbildern. Hier sollten Sie den Film nicht bearbeiten!

Wissen Sie immer, wo Sie sind? Aus den oben genannten Gründen sollten Sie also immer den Abspielkopf im Auge behalten. Wenn Sie eine Bewegung von links nach rechts simulieren wollen, sollten Sie das Objekt im Start-Schlüsselbild auf der linken Seite der Bühne anordnen. Wenn der Abspielkopf allerdings irrtümlich noch im letzten Schlüsselbild steht, werden Sie die Endposition bearbeiten und ein ganz anderes Ergebnis erzielen. Bevor Sie also etwas bearbeiten, schauen Sie zuerst auf den Abspielkopf (siehe Abbildung 8.7)!

Abbildung 8.7: Der Abspielkopf zeigt an, welches Bild Sie gerade bearbeiten.

Halten Sie sich an dieses Muster! Hoffentlich beginnen Sie schon ein Muster in der Vorgehensweise zu erkennen. Ich will das noch einmal zusammenfassen: Ein Bewegungstween bezieht sich immer nur auf ein Objekt (und zwar ein Symbol). Wandeln Sie das Objekt also in ein Symbol um, bevor Sie

196

Feintuning eines Bewegungstweens

das End-Schlüsselbild erstellen, da dort sonst eventuell noch eine Form und kein Symbol existiert. Wenn Sie sowohl das Anfangs- als auch das End-Schlüsselbild erstellt haben, können Sie bei beiden das Objekt positionieren und die sieben tweeningfähigen Attribute anpassen (wobei Alpha nicht empfehlenswert ist). Wenn Sie dabei noch den Abspielkopf im Auge behalten, kann eigentlich kaum noch etwas schief gehen.

8.2

Feintuning eines Bewegungstweens

Einen Bewegungstween zu erstellen ist recht einfach. Wenn er allerdings auch noch gut aussehen soll, ist das wiederum eine ganz andere Sache. Es gibt einige Techniken, um eine Art Feintuning an einem Tween vorzunehmen. Wir werden uns hier auf grundlegende Dinge beschränken und weitere Möglichkeiten im 21. Kapitel ansprechen.

Mehrere Schlüsselbilder Ein Tween verwendet immer nur zwei Schlüsselbilder. Eines am Anfang und eines am Ende. Was ist aber, wenn man eine Bogenbewegung darstellen will? Ganz einfach: Man teilt diese Bewegung in zwei Tweens auf. Eine Aufwärts- und dann eine Abwärtsbewegung. Hier haben wir dann in Wirklichkeit zwei Bewegungstweens, die durch drei Schlüsselbilder koordiniert werden, da das mittlere Schlüsselbild die Endposition für den ersten und die Startposition für den zweiten Tween definiert. Eine solche Animation (nur mit vertauschten Richtungen) ist zum Beispiel die Bewegung eines Jojo. Versuchen wir das einmal.

Aufgabe: Lassen Sie eine Animation da enden, wo sie startet! 1. Zeichnen Sie in einer neuen Datei einen Kreis. 2. Wandeln Sie ihn in ein Symbol namens Jojo um. 3. Bringen Sie den Jojo in der Nähe der oberen Bühnenkante in Position. 4. Erzeugen Sie in Bild 10 ein Schlüsselbild. 5. Bevor Sie etwas bewegen, sollten Sie an Position 20 ein Schlüsselbild einfügen. Zu diesem Zeitpunkt haben Sie dann drei identische Schlüsselbilder. 6. Wechseln Sie nun wieder zu Bild 10 und bewegen den Jojo gerade nach unten.

197

Animationen mit Bewegungstweening

7. Jetzt fügen Sie in den Bildern 1 und 10 je einen Bewegungstween ein (über das BildBedienfeld). Sie können das sogar gleichzeitig erledigen, indem Sie alle erstellten Bilder markieren und erst dann die Änderung im Bedienfeld vornehmen (siehe Abbildung 8.8).

Abbildung 8.8: Änderungen im Bedienfeld Bild wirken sich auf alle ausgewählten Schlüsselbilder aus.

8. Testen Sie nun den Film und speichern Sie ihn ab. Wir werden in Kürze darauf zurückkommen. Denken wir noch einmal zurück: Eine Sache war sehr von Vorteil. Ich rede von den drei identischen Schlüsselbildern. Wenn man in einer Animation den Ausgangspunkt wieder erreichen will, kann man eine Feinjustierung umgehen, indem man die Endposition direkt von der Anfangsposition übernimmt. Genau das haben wir ja gemacht, da wir das zweite Schlüsselbild (was ja anfangs eine exakte Kopie des ersten war) erst verändert haben, nachdem das dritte erzeugt war.

Abbremsen und beschleunigen Ein Problem bei Animationen, die per Tweening von Flash unterstützt wurden ist, dass man meist erkennt, ob ein Computer die Finger im Spiel hatte, da die Animationen zu perfekt aussehen. Beim Jojo-Beispiel sieht man, dass sich der Jojo mit der gleichen Geschwindigkeit hoch und runter bewegt. Dabei bleibt die Geschwindigkeit auch dauerhaft gleich.

198

Feintuning eines Bewegungstweens

In Flash gibt es daher die Möglichkeit, eine Bewegung zu beschleunigen oder abzubremsen. Bei einem Bewegungstween würden also die Start- und die Endgeschwindigkeit unterschiedlich sein. Sie können das in der Datei des letzten Beispiels ausprobieren. Wählen Sie das erste Schlüsselbild aus und stellen Sie Abbremsen im Bild-Bedienfeld auf den Wert -40. Hinter dem Wert steht nun Am Ende. Das bedeutet, dass die Abwärtsbewegung des Jojos am Ende abgebremst wird (siehe Abbildung 8.9).

Abbildung 8.9: Im Bild-Bedienfeld kann man eine Bewegung abbremsen oder beschleunigen.

Den zweiten Tween (zwischen 10 und 20) sollten Sie langsamer starten lassen. Das erreichen Sie durch den Wert 80 im Feld Abbremsen, worauf ein Am Anfang neben dem Wert erscheint. Testen Sie die Animation erneut und Sie werden sehen, dass sie einem Jojo wesentlich näher kommt. Was ist aber, wenn man eine Bewegung langsam beginnen, dann beschleunigen und danach wieder abbremsen will? Das ist möglich – allerdings nicht mit zwei Schlüsselbildern, da nur ein Wert für Abbremsen pro Tween erlaubt ist. Auch hier müssen wir die Bewegung also in zwei Teile auftrennen und mit drei Schlüsselbildern arbeiten.

Aufgabe: Erstellen Sie eine Animation, die abgebremst und beschleunigt wird! 1. Zeichnen Sie in einer neuen Datei irgendeine Form und wandeln Sie diese in ein Symbol um, welches Sie am linken Bühnenrand positionieren. 2. Fügen Sie in Bild 50 ein Schlüsselbild ein. 3. Bewegen Sie (immer noch in Bild 50) das Symbol an den rechten Bildschirmrand. 4. Erzeugen Sie nun in Bild 1 einen Bewegungstween. 5. Testen Sie den Film und prägen Sie sich ein, wie er aussieht.

199

Animationen mit Bewegungstweening

6. Positionieren Sie den Abspielkopf in der Mitte (Bild 25). 7. Erzeugen Sie dort ein Schlüsselbild. Testen Sie den Film erneut. Es sollte sich nichts geändert haben. Sie haben ja auch nur ein Schlüsselbild in einen bestehenden Bewegungstween eingefügt, in den dann die aktuelle Position Ihres Objektes kopiert wurde. 8. Stellen Sie für das Schlüsselbild 1 bei Abbremsen den Wert -100 und bei Bild 25 den Wert 100 ein. Testen Sie die Animation und Sie werden sehen, dass das Objekt zuerst beschleunigt und dann am anderen Ende der Bühne wieder abbremst. Ein Vorgang ist dabei besonders interessant: Wir haben ein Schlüsselbild in einen bestehenden Tween eingefügt. Dadurch haben wir das Objekt direkt an der richtigen Position in unser Schlüsselbild kopiert bekommen.

In einem Bewegungstween rotieren Sie wissen ja bereits, dass Flash einen Drehwinkel per Bewegungstween anpassen kann. Es ist aber noch mehr möglich, denn Sie können eine Anzahl von Drehungen festlegen, die Flash während des Tweens ausführen soll. Die Einstellmöglichkeit finden Sie wieder im Bild-Bedienfeld. Dort können Sie bei Drehen die Werte UZS (im Uhrzeigersinn) und gegen UZS (gegen den Uhrzeigersinn) sowie die Anzahl der Umdrehungen eingeben (siehe Abbildung 8.10). Wenn Sie hier Keiner einstellen, werden auch manuell gedrehte Objekte im gesamten Tween nicht weiter gedreht.

Abbildung 8.10: Hier kann man die Anzahl der Umdrehungen eines Objektes im Bewegungstween angeben.

Bitte bedenken Sie, dass weniger oft mehr ist. Sie haben nun einige Effekte (wie zum Beispiel auch das mehrfache Drehen) kennen gelernt, die in Maßen recht effektiv sind. Wenn man den Bogen aber überspannt, erkennt man die wichtigen Details Ihrer Animation nicht mehr. Sie sollten sich also immer überlegen, ob ein weiterer Effekt Ihre Intention noch unterstützt oder ob er eher ablenkt.

200

Zusammenfassung

8.3

Zusammenfassung

Gratulation! Sie haben die Grundlagen des Bewegungstweenings erlernt. Es ist doch von Vorteil, wenn man Flash die ganze Arbeit erledigen lassen kann, oder? Der Vorgang ist ganz einfach: Sie erstellen zwei Schlüsselbilder, die beide ein Symbol enthalten und bringen diese im ersten Schlüsselbild in den Startzustand und im zweiten in den Endzustand. Nun brauchen Sie nur noch das Tweening einzuschalten und schon geht es los.

8.4

Workshop

F&A F

Ich habe ein Schlüsselbild eingefügt und Flash hat automatisch einen Bewegungstween zwischen dem Schlüsselbild davor und meinem neuen Schlüsselbild erstellt. Wie kann das passieren? A

F

Wie kann ich mehrere Symbole tweenen? A

F

Die Regel sagt nur, dass man maximal ein Symbol pro Ebene tweenen kann. Wir werden in Kapitel 11 auf die Ebenen eingehen. Dann werden Sie auch mehrere Ebenen zum Tweenen verwenden können.

Wenn ich die Drehen-Einstellung in meinem Schlüsselbild verwende, dreht sich das Symbol zwar, allerdings ist die Drehung sehr schief. Wieso? A

F

Wenn Sie ein Schlüsselbild einfügen, kopiert Flash den Inhalt und die Bildeigenschaften des Schlüsselbildes davor. Wenn das Schlüsselbild vor einem neuen Schlüsselbild schon auf Tweening gestellt war, wird auch das neue Schlüsselbild diese Einstellung übernehmen.

Jedes Symbol rotiert um seinen Mittelpunkt. Sie sollten das Mastersymbol bearbeiten und mittig ausrichten. Wenn Sie mehr dazu wissen möchten, sollten Sie Kapitel 5 wiederholen.

Wieso folgt mein Bewegungstween keinem sinnvollen Pfad? A

Normalerweise wird bei einem Bewegungstween die kürzeste Strecke zurückgelegt. Allerdings kann man mehr als nur die Position tweenen und noch dazu den Tween an einen Pfad binden. Darüber lernen Sie in Kapitel 11 mehr.

201

Animationen mit Bewegungstweening

F

Die Wiedergabe meines Bewegungstweens ist sehr ruckelnd und nicht gleichmäßig. Woran liegt das? A

Wenn Sie einen Alpha-Effekt beim Symbol verwenden, sollten Sie gegebenenfalls einen anderen Effekt (zum Beispiel Helligkeit) in Betracht ziehen, da Alpha sehr viel Leistung vom Computer fordert. Wenn das nicht für die Verzögerung verantwortlich ist, sollten Sie sich mit der Bildrate (siehe Kapitel 6) auseinandersetzen und gegebenenfalls Ihre Animation über mehr Bilder verteilen, damit die Abstände zwischen den einzelnen Bewegungen kürzer werden.

Übungsaufgaben Falls Sie es wieder vergessen haben sollten: Bitte lösen Sie die Aufgaben selbst, bevor Sie die Lösungen nachschlagen. 1. Was sollten Sie bei der Erstellung eines Bewegungstweens noch vor dem Erzeugen eines Schlüsselbildes tun? a. Die Datei speichern, da Flash an dieser Stelle gerne abstürzt b. Sicherstellen, dass es sich bei dem Objekt im ersten Schlüsselbild um ein Symbol handelt c. Die Farbton-Eigenschaft der Instanz im ersten Schlüsselbild einstellen 2. Was sollten Sie beachten, wenn Sie eine Instanz in einem bestimmten Bild verschieben wollen? a. Der Abspielkopf muss auf das richtige Bild zeigen. b. Man muss sich auf die Nummer des Bildes konzentrieren und erst dann das Symbol bewegen. c. Das Symbol darf nicht rot sein. 3. Man benötigt zwei Schlüsselbilder für einen Bewegungstween. Wenn Sie nun zwischen diesen beiden Schlüsselbildern einen Bewegungstween erzeugen wollen, wo genau müssen Sie das einstellen? a. Im Effekt-Bedienfeld des Symbols im Schlüsselbild 1 b. Im Bild-Bedienfeld des zweiten Schlüsselbildes c. Im Bild-Bedienfeld des ersten Schlüsselbildes

202

Workshop

Übungen In den meisten Aufgaben haben wir bisher die Position per Bewegungstweening verändert. Ich will diese Gelegenheit dazu nutzen, Sie ein wenig zum Ausprobieren der anderen Attribute zu motivieren. 1. Versuchen Sie beispielsweise einen Ball zu animieren, der zu Boden fällt und sich ein wenig zusammendrückt, bevor er zurückspringt. Außerdem können Sie noch versuchen, einen Text vom transparenten Zustand in einen undurchsichtigen Zustand gleiten zu lassen. Verwenden Sie dazu kein Alpha. Wenn Sie möchten, können Sie bei dieser Übung auch mit dem Abbremsen und Beschleunigen experimentieren. Viel Spaß! 2. Erstellen Sie einen einfachen Tween, der einen Text vom unsichtbaren zum sichtbaren Zustand einblenden soll. Versuchen Sie einen anderen Weg als die Verwendung von Alpha zu finden. Stellen Sie sicher, dass Sie aus dem Text ein Symbol erzeugen, bevor Sie Schlüsselbilder hinzufügen.

203

Morphing mit Formtweening

9

Morphing mit Formtweening

Es gibt mehrere Möglichkeiten, einen Flash-Film klein und schnell zu halten. Die Wiederverwendung von Symbolen aus der Bibliothek und die Verwendung von Bewegungstweens sind zwei der besten Möglichkeiten. Leider ist die Verwendung von Formtweens (die wir in diesem Kapitel kennen lernen werden) eine nicht so effiziente Methode, da die Dateigröße ansteigen wird. Allerdings sehen Formtweens einfach genial aus! Es gibt keine andere Möglichkeit, den Morph-Effekt in Flash zu erzeugen. In diesem Kapitel werden Sie 쐽

Formtweens erstellen,

쐽

Alternativen zu Formtweens kennen lernen und

쐽

Formmarken für mehr Kontrolle hinzufügen. Ein Morph ist eine Art von Animation, die eine Form auf sehr natürlich aussehende Weise in eine andere Form umwandelt. Es handelt sich hierbei um einen allgemeinen Ausdruck, der am besten die Weise bezeichnet, wie das Formtweening in Flash arbeitet.

9.1

Einen Formtween erstellen

Formtweens machen Spaß, da sie gut aussehen und leicht zu erzeugen sind. Alles was Sie dazu tun müssen ist, eine oder mehrere Formen in zwei Schlüsselbildern zu erstellen und das Tweening im ersten Schlüsselbild auf Form stellen. Versuchen wir es einmal: Wir werden die Vorgehensweise später analysieren.

Aufgabe: Erstellen Sie einen einfachen Formtween! 1. Zeichnen Sie in einer neuen Datei einen Kreis auf die Bühne. (Gruppieren Sie nichts und konvertieren Sie auch nichts in ein Symbol.) 2. Fügen Sie in Bild 30 ein Schlüsselbild ein. Das wird das Ende unseres Tweens sein und wie der Anfang aussehen. 3. Erstellen Sie ein weiteres Schlüsselbild in Bild 15. Verbiegen Sie die Kreislinie ein wenig, während der Abspielkopf auf Bild 15 zeigt (siehe Abbildung 9.1). 4. Halten Sie nun (ª) gedrückt, während Sie erst auf Bild 1 und dann auf Bild 15 klicken. Stellen Sie nun im Bild-Bedienfeld den Wert Tweening auf Form um. 5. Testen Sie den Film.

206

Einen Formtween erstellen

Abbildung 9.1: Wir verbiegen die Kreislinie in einem Schlüsselbild und überlassen Flash später die Arbeit, die Formen anzugleichen.

So beachten Sie die Regeln eines Formtweens Flash wird es Ihnen nicht verzeihen, wenn Sie seine Regeln nicht befolgen. Glücklicherweise sind die Regeln für Formtweens sehr einfach: keine Gruppen und keine Symbole. Das war’s! Wenn Sie sich das merken, werden Formtweens ein Kinderspiel für Sie sein. Wenn Sie sich kurz an das zweite Kapitel erinnern, werden Sie wissen, dass Text automatisch gruppiert wird. Das bedeutet, dass man keinen Text in einem Formtween verwenden kann, es sei denn, man teilt ihn (MODIFIZIEREN / TEILEN). Bedenken Sie aber, dass Sie den Text dann nicht mehr bearbeiten können! Auch wenn kein Weg um die »Keine Gruppen und keine Symbole«-Regel herum führt, kann man dennoch die Vorteile von Gruppen und Symbolen ausnutzen. Gruppen sind beispielsweise oft nötig, um Teile einer Zeichnung zu isolieren. Sie können auch bei der Erstellung von Formtweens so viele Gruppen verwenden, wie Sie wollen. Denken Sie aber daran, alle Gruppierungen aufzuheben, bevor Sie den Formtween definieren. Das gleiche gilt für Symbole aus der Bibliothek. Wenn Sie beispielweise einen Formtween auf ein Bild in der Bibliothek anwenden wollen, können Sie das tun. Denken Sie nur daran, es zu trennen, bevor Sie den Formtween aktivieren. Sie können die Regeln also nicht umgehen, aber Sie können sie kurzzeitig brechen, während Sie arbeiten.

207

Morphing mit Formtweening

Techniken und Tipps Auch wenn die Regeln für Formtweens recht einfach sind, heißt das nicht, dass die Erstellung eines gut aussehenden Formtweens ebenso einfach ist. Es gibt viele Techniken, um die Arbeit zu vereinfachen und das Ergebnis zu verbessern.

Die Einfachheit ist der Schlüssel zum Erfolg Auch wenn Sie allen anderen Tipps keine Beachtung schenken sollten, ist dieser von besonderer Wichtigkeit: Halten Sie Ihren Formtween einfach! Auch wenn es außer dem Verbot von Gruppen und Symbolen keine Regeln in Bezug auf Formtweens gibt, sollten Sie beachten, dass ein Formtweening von sehr vielen Formen sehr zufällig aussieht. Die beiden Symptome, dass die Animation nicht einfach genug ist, sind unerwartete Ergebnisse und der Schachbretteffekt, den wir gleich sehen werden. Stellen wir uns vor, Sie wollen Ihren Namen in einen Kreis überführen. Allerdings erhalten Sie nur »Müll« oder einen Schachbretteffekt (siehe Abbildung 9.2) auf dem Bildschirm. Das sind Anzeichen dafür, dass Sie etwas erstellt haben, das für Flash zu kompliziert ist. Flash berechnet die interpolierten Bilder eigentlich sehr genau, allerdings kann es schwierig werden von, etwas sehr Komplexem (wie Ihrem Namen) zu etwas Einfachem (wie dem Kreis) zu gelangen. Flash wird Sie vom einen Bild zum anderen führen, allerdings kann der Weg dorthin recht schlecht aussehen.

Abbildung 9.2: Der Schachbretteffekt ist ein übliches Ergebnis eines zu komplexen Formtweens.

208

Einen Formtween erstellen

Die Lösung ist, die Einfachheit beizubehalten. Gehen Sie Schritt für Schritt vor. Versuchen Sie beispielsweise nur einen Buchstaben Ihres Namens in einen Kreis zu verwandeln. In Kapitel 11 werden Sie sehen, dass es recht einfach ist, mehrere Tweens simultan auszuführen (in unterschiedlichen Ebenen). Außerdem werden wir in diesem Kapitel noch Formmarken kennen lernen, die es Flash einfacher machen, zu wissen, was Sie meinen. Allerdings gilt auch dann noch, dass es umso besser ist, je einfacher die Animation aufgebaut ist.

Mischen Sie keine Linien und Füllungen Es ist wohl am besten, wenn man das Tweening zwischen Schlüsselbildern vermeidet, die nicht die gleiche Kombination von Füllungen und Linien aufweisen, da das Ergebnis unvorhersehbar sein kann. Wenn man eine gerade Linie in eine gebogene umformt, wird das sehr gut aussehen. Wenn Sie aber eine Linie in eine Füllung überführen wollen, wird das einige sehr merkwürdige Ergebnisse zur Folge haben. Um so etwas zu verhindern, sollten Sie Linien in Füllungen umformen (MODIFIZIEREN / FORM / LINIEN IN FÜLLUNGEN KONVERTIEREN). Damit Sie es einfacher haben, sollten Sie bei Formtweens sicherstellen, dass Sie in beiden Schlüsselbildern nur Füllungen, nur Linien oder beides in gleicher Kombination haben.

Halten Sie sich aus dem Territorium von Flash heraus Wenn Flash eine Bildfolge per Tweening bearbeitet, färbt es die getweenten Bilder in der Zeitleiste blau (Bewegungstween) oder grün (Formtween) ein. Diese interpolierten Bilder (wie sie in Flash genannt werden) nenne ich das »Territorium von Flash« (siehe Abbildung 9.3). Sie sollten sich grundsätzlich von diesem Bereich fern halten. Sie können in interpolierten Formtween-Bildern nichts zerstören, allerdings kann es sehr frustrierend sein, wenn Sie versuchen sollten, darin etwas zu verändern. Sie können darin weder zeichnen noch Objekte auswählen. Die beste Möglichkeit ist, diese Bilder als das Territorium von Flash und Schlüsselbilder als Ihr Territorium anzuerkennen.

Wissen, wann ein Bewegungstween genügen wird Es ist sehr einfach, sich in Formtweens zu verlieben, da es nichts Vergleichbares gibt. Sie können sie verwenden, wann immer Sie es für nötig halten. Allerdings sind Formtweens nicht so effizient wie Bewegungstweens (die Datei wird größer und das Abspielen langsamer). Deshalb sollten Sie Bewegungstweens vorziehen, gerade wenn man mit beiden Techniken den gleichen Effekt erreichen kann.

209

Morphing mit Formtweening

Abbildung 9.3: Die interpolierten Bilder (in denen Flash für das Tweening zuständig ist) sind entweder grün (Formtween) oder blau (Bewegungstween) eingefärbt.

Manchmal ist es offensichtlich, welche Art von Tween man verwenden soll. Wenn sich beispielsweise nur die Farbe oder die Position verändert, reicht ein Bewegungstween völlig aus. Bei gravierenden Veränderungen der Form ist allerdings ein Formtween angebracht. Manchmal ist es allerdings nicht offensichtlich, welche Tweening-Variante man verwenden soll. Man kann beispielsweise extreme Formveränderungen mit den bereits bekannten Veränderungen Rotation, Skalierung und besonders dem Kippen von Objekten bewirken. In Abbildung 9.4 sehen Sie beispielsweise viele verschiedene Instanzen desselben Symbols, bei denen diese Werte verändert wurden. Hier reicht für ein Tweening immer der Bewegungstween aus.

Abbildung 9.4: Verschiedene Instanzen desselben Quadrates können stark verformt, aber immer noch in einem Bewegungstween verwendet werden. (Beachten Sie das Originalquadrat in der Bibliothek.)

210

Feintuning eines Formtweens

9.2

Feintuning eines Formtweens

Formtweens sehen meist nicht so aus, wie man es erwarten würde. Die Tipps, die ich Ihnen bisher gegeben habe, sind meist als Regeln oder Warnungen zu verstehen. Allerdings kann es immer noch zu unerwarteten Ergebnissen führen, auch wenn Sie alle diese Hinweise beachtet haben. Deshalb verfügt Flash über ein besonderes Hilfsmittel, das speziell für Formtweens eingeführt wurde. Dabei handelt es sich um Formmarken. Mit diesen Helfern kann man aus einer Animation, die wie ein reines Durcheinander aussieht, ein Tweening erzeugen, das Ihrer Vorstellung entspricht oder zumindest näher kommt.

Formmarken verwenden Durch Formmarken haben Sie die Möglichkeit festzulegen, wie ein Punkt vom ersten Schlüsselbild zum zweiten während des Tweenings umgeformt werden soll. Sie sollten Formmarken immer dann einsetzen, wenn Flash einen Formtween erstellt hat, der nicht so aussieht, wie Sie ihn im Kopf hatten. Gehen wir das doch einmal durch:

Aufgabe: Verwenden Sie Formmarken für einen besseren Formtween! 1. Zeichnen Sie in einer neuen Datei ein Quadrat. 2. Fügen Sie in Bild 25 ein Schlüsselbild ein. 3. Verändern Sie das Quadrat in Bild 25 in ein Dreieck. Es gibt mehrere Wege dies zu tun, allerdings will ich, dass das Dreieck so nah wie möglich an das Quadrat herankommt. Versuchen Sie also einmal folgende Methode: 4. Zeichnen Sie (immer noch in Bild 25) eine vertikale Linie, die das Quadrat nicht berührt. 5. Stellen Sie nun sicher, dass An Objekten ausrichten (die Schaltfläche mit dem Magneten) aktiviert ist und wählen Sie die Linie aus. Klicken Sie nun auf die Mitte der Linie und ziehen Sie diese bei gedrückter Maustaste in die Mitte der oberen Kante des Quadrates (siehe Abbildung 9.5). 6. Heben Sie nun die Markierung der Linie auf, indem Sie auf eine freie Stelle der Bühne klicken. Ziehen Sie als Nächstes die obere linke Ecke des Quadrates zum Schnittpunkt des Quadrates mit der Linie. Gehen Sie den gleichen Vorgang noch einmal für die obere rechte Ecke durch. 7. Markieren Sie nun die beiden Teilstücke der Linie und löschen Sie diese.

211

Morphing mit Formtweening

Abbildung 9.5: Bei eingeschalteter Option An Objekten ausrichten kann man die Linie exakt in der Mitte der oberen Quadratkante positionieren.

8. Stellen Sie im ersten Bild Tweening (im Bild-Bedienfeld) auf Form ein und testen Sie den Film. Das Ergebnis ist wahrscheinlich nicht das, was Sie erwartet haben. Jetzt haben wir die Chance, Formmarken einzusetzen. 9. Stellen Sie den Abspielkopf auf Bild 1 ein und wählen Sie dann MODIFIZIEREN / TRANSFORMIEREN / FORMMARKE HINZUFÜGEN oder drücken Sie (Strg)+(ª)+(H). 10. Es erscheint ein kleiner roter Kreis mit dem Buchstaben a (eine Formmarke). Wechseln Sie vorübergehend zu Bild 25 und Sie werden auch hier eine a-Formmarke wiederfinden. 11. Stellen Sie sicher, dass Sie sich wieder in Bild 1 befinden. Ziehen Sie die Formmarke auf die obere linke Ecke des Quadrates (siehe Abbildung 9.6). Wie Sie sehen, ist die Marke immer noch rot, was anzeigt, dass Sie die Formmarke am Ende des Tweens noch nicht richtig positioniert haben. 12. Gehen Sie nun in das Bild 25 und ziehen Sie die Formmarke a zur Mitte der linken Dreieckskante. Die Formmarke wird nun grün und ist somit richtig verknüpft. Wenn Sie in das Bild 1 zurückkehren, werden Sie feststellen, dass die Formmarke nun gelb gefärbt ist. Das bedeutet ebenfalls, dass sie richtig verknüpft wurde. 13. Testen Sie den Film. Wenn er gut aussieht, benötigen Sie keine weitere Formmarke. Wenn nicht – und das ist in dieser Aufgabe eigentlich meist der Fall – sollten Sie eine weitere Formmarke anlegen. 14. Fügen Sie in Bild 1 eine weitere Formmarke ein ((Strg)+(ª)+(H)). Diese erhält automatisch den Namen b. Ziehen Sie diese Formmarke auf die obere rechte Ecke des Quadrates.

212

Feintuning eines Formtweens

Abbildung 9.6: An der oberen linken Ecke des Quadrates befindet sich eine Formmarke.

15. Ziehen Sie in Bild 25 die Formmarke b auf die Mitte der rechten Dreieckskante (siehe Abbildung 9.7).

Abbildung 9.7: Nun haben wir zwei Formmarken angelegt.

16. Wenn Sie nun den Film testen, wird das Ergebnis viel besser sein als zuvor (ohne Formmarken).

213

Morphing mit Formtweening

Formmarken verstehen Die zeitaufwändigste Aktion in der letzten Aufgabe war, das Dreieck möglichst passend zum Quadrat zu zeichnen. Betrachten Sie das als kurze Wiederholung. Das Hinzufügen von Formmarken war dagegen sehr einfach. Natürlich habe ich Ihnen verraten, wo man die Formmarken am besten positioniert. Trotzdem ist es recht einfach, herauszufinden, wo man Formmarken möglichst sinnvoll positioniert. Denken Sie sich einfach folgende Methode: Sie sagen Flash »dieser Punkt in der Form am Anfang des Tweens wird zu diesem Punkt am Ende«. Wenn Sie langsam die Schrubbertechnik verwenden, werden Sie sehen, dass sich die Formmarke aus dem ersten Schlüsselbild in den interpolierten Bildern auf die Position der Formmarke im letzten Schlüsselbild zu bewegt. Bitte verwenden Sie nicht mehr Formmarken als unbedingt nötig! Sie sollten nicht von vornherein zehn Formmarken definieren, wenn eine einzige zum selben Ergebnis führen wird. Wenn Sie die erste Marke definiert haben, sollten Sie sich erst einmal das Ergebnis ansehen, denn manchmal entspricht es schon Ihren Anforderungen. Sie dürfen gerne in Ihrer täglichen Arbeit mit Flash Formmarken verwenden, wann und wo Sie wollen. Denken Sie aber daran, dass meist schon eine Marke genügt, um Flash den Tipp zu geben, wie Ihre Animation aussehen soll. Es gibt noch einige weitere Punkte, deren Verständnis für Sie hilfreich sein wird: 쐽

Sie können keine Formmarken definieren, wenn Sie sich nicht im ersten Schlüsselbild eines Formtweens befinden. Mit anderen Worten: Sie müssen zuerst den Formtween definieren, dann in das erste Schlüsselbild dieses Tweens gehen, um dort die Formmarken einzufügen.

쐽

Sie können ANSICHT / FORMMARKEN ANZEIGEN ausschalten, um die Formmarken zu verstecken. Sie werden allerdings immer noch berücksichtigt.

쐽

Formmarken werden erst dann berücksichtigt, wenn sie in beiden Schlüsselbildern des Formtweens an eine Linie oder Füllung angekoppelt wurden. Wenn das passiert ist, verändern sie die Farbe.

쐽

Auch wenn Sie eine Formmarke allein nicht löschen können, haben Sie mit MODIFIZIEREN / TRANSFORMIEREN / ALLE MARKEN LÖSCHEN die Möglichkeit, alle Formmarken zu entfernen.

쐽

Man kann Formmarken nur mit einem Paar Schlüsselbilder verwenden. Wenn Sie beispielsweise einen Tween mit drei Schlüsselbildern erzeugen wollen (siehe letztes Kapitel), haben Sie nicht die Möglichkeit, die Formmarken aus dem Tween zwischen den ersten beiden Schlüsselbildern in dem Tween zwischen den Schlüsselbildern zwei

214

Feintuning eines Formtweens

und drei zu verwenden. Die Lösung ist aber recht einfach: Erstellen Sie zwei getrennte Tweens, die je ein eigenes Start- und Endschlüsselbild besitzen (siehe Abbildung 9.8).

Abbildung 9.8: Eine Formmarke stellt die Bedingung, dass man nur zwei Schlüsselbilder im Formtween verwendet.

Gute Gründe, warum man Formtweens vermeiden sollte Der wohl beste Grund, warum man Formtweens vermeiden sollte ist, dass man sie oft nicht (oder selten) benötigt. Ein Nachteil von Formtweens ist nämlich, dass sie nicht unwesentlich zur Dateigröße beitragen. Denken Sie einmal daran, was passiert, wenn Sie ein Schlüsselbild einfügen: Der Inhalt des vorausgegangenen Schlüsselbildes wird kopiert und im neuen Schlüsselbild eingefügt. Wenn Sie im ersten Schlüsselbild also ein Quadrat gezeichnet haben, existiert im zweiten Schlüsselbild eine Kopie dieses Quadrates. Das Quadrat existiert also zweimal im Speicher. Auch wenn Sie das Quadrat im zweiten Schlüsselbild verändern, bleibt es doch als eigene Form im Speicher. Vergleichen wir das einmal mit einem Bewegungstween: Angenommen, dass im ersten Schlüsselbild das Symbol eines Quadrates liegt. Dann haben wir im zweiten Schlüsselbild eine Instanz desselben Symbols erzeugt (das Quadrat existiert also nur einmal im Speicher). Sie sehen, dass allein die Vorbereitung für die unterschiedlichen Tweens einen Speicherzuwachs des Formtweens gegenüber dem Bewegungstween von knapp 100% ausmacht.

215

Morphing mit Formtweening

Ein weiterer Grund für die Vermeidung von Formtweens ist, dass sie schlechter zu handhaben sind als Bewegungstweens. Das gilt besonders für Tweens, bei denen viele Formmarken nötig sind. Bei einem Bewegungstween kann man allerdings die Bibliothek (mit allen Vorteilen) anwenden. Verwenden Sie Formtweens also nur, wenn Sie es unbedingt müssen.

9.3

Zusammenfassung

Da Sie das Formtweening verstanden haben, kennen Sie nun beide Möglichkeiten, wie Flash Sie durch Tweening (sowohl Form- als auch Bewegungstweening) unterstützt. Sie haben die Möglichkeiten des Morphings kennen gelernt. Die Grundregeln des Formtweens lauten: keine gruppierten Formen und keine Symbole! Deshalb sind Formtweens recht einfach zu erstellen, allerdings benötigt man einige Techniken, um ein gutes Ergebnis zu erzielen. Verwenden Sie beispielsweise Formmarken, um Flash klarzumachen, was Sie sich vorstellen. Dies war das letzte Kapitel, in dem wir uns mit den Grundlagen von Animationen befasst haben. Es wird langsam Zeit, sich den interessanteren Dingen zuzuwenden (zum Beispiel Sound und Interaktivität).

9.4

Workshop

F&A F

Warum erscheint in meinem Formtween auf einmal eine gestrichelte Linie in den interpolierten Bildern der Zeitleiste? A

F

216

Sie haben entweder eine Regel der Formtweens verletzt, die besagt, dass man keine Symbole oder Gruppen verwenden darf. Es kann aber auch sein, dass Ihr Tween nicht genau zwei Schlüsselbilder besitzt. Achten Sie also darauf, dass Sie zwischen zwei Schlüsselbildern tweenen, die beide weder Symbole noch gruppierte Objekte enthalten.

Meine Animation verhält sich eigenartig. Manche Objekte erscheinen nur im ersten und letzten Bild. Ich muss aber die Regeln der Formtweens beachtet haben, da ich keine gestrichelte Linie in der Zeitleiste erhalte.

Workshop

A

F

Die richtig aussehende Zeitleiste besagt leider nicht, dass Sie wirklich alles richtig gemacht haben, denn wenn Sie einige Objekte in den beiden Schlüsselbildern haben, die weder Symbole noch Gruppen sind, erscheint die gestrichelte Linie nicht mehr. Nur wenn alle Objekte Symbole oder Gruppen sind, werden Sie auf diese Weise auf den Regelverstoß aufmerksam gemacht.

Wenn ich auf ein grünes interpoliertes Bild klicke, kann ich im Bild-Bedienfeld die Einstellung Tweening verändern. Ich dachte, dass es sich hier um das Territorium von Flash handelt. Wieso kann ich dann darauf zugreifen? A

In Wirklichkeit greifen Sie auf das Bild-Bedienfeld des ersten Schlüsselbildes des Tweens zu. Denken Sie daran, dass ein Schlüsselbild ohne Tween angibt, was bis zum nächsten Schlüsselbild auf der Bühne erscheinen soll. Genauso ist das auch bei Tweens. Allerdings rechnet Flash hier für Sie. Die gute Nachricht ist, dass Sie beim Klicken an dieser Stelle nicht besonders vorsichtig sein müssen (da immer das erste Schlüsselbild des Tweens angesprochen wird). Dennoch sollten Sie sich darüber im Klaren sein, welches Schlüsselbild in so einem Fall angesprochen wird.

Übungsaufgaben Bitte versuchen Sie zuerst selbst die Antwort auf die folgenden Fragen zu geben, bevor Sie die Lösungen nachlesen. Schauen Sie sich bitte auch die Erklärungen der Lösungen an, auch wenn Ihr Ergebnis stimmt. 1. Was ist die ideale Anzahl von Formmarken in einem Formtween? a. Zehn b. Nicht mehr als fünf c. Nicht mehr als nötig 2. Welche Art von Tweening wird eine kleinere Dateigröße ermöglichen: Form- oder Bewegungstweening? a. Formtweening b. Bewegungstweening c. Das hängt von der Anzahl der Farben ab, die in der Datei verwendet wurden. 3. Wie kann man Texte in einen Formtween einbauen? a. Text kann in Formtweens nicht verwendet werden. b. Stellen Sie sicher, dass der Text getrennt wurde. c. Stellen Sie sicher, dass der Text sich nicht in der Bibliothek befindet.

217

Morphing mit Formtweening

Übung Es gibt eine Menge Möglichkeiten, den Umgang mit Formtweens zu üben. Hier ist eine kleine Herausforderung, die Ihre Sinne schärfen soll: Versuchen Sie einen einzelnen Buchstaben in eine verwandte Form zu tweenen (zum Beispiel ein A in ein Dreieck oder ein C in einen Kreis). Verwenden Sie gegebenenfalls Formmarken, um die Animation nach Ihren Wünschen ablaufen zu lassen. Bitte versuchen Sie noch nicht, Ihren ganzen Namen zu tweenen. Ein Buchstabe reicht erst mal.

218

Sound in Animationen einbinden

0 1

Sound in Animationen einbinden

Mit Sounds erwecken Sie einen Film zum Leben. Meist bemerken die Betrachter Ihrer Animation die Hintergrundgeräusche oder -musik gar nicht. Man kann auf diese Weise aber das Erscheinungsbild einer Seite prägen. Wenn Sie allerdings schlechte Sounds verwenden, wird dies dem Anwender unangenehm auffallen. Der Effekt von Audio ist nicht immer auf den ersten Blick erkennbar – und gerade das macht ihn so mächtig. Unabhängig davon, warum Sound so nützlich ist, ist es sehr wichtig, dieses Mittel effektiv einzusetzen, da es sich bei Audio um den größten Teil der Datenmenge einer normalen Animation handelt. Es gibt keinen Grund, dem Sound zu erlauben, mehr Speicher zu belegen als unbedingt nötig. Leider gibt es aber keine »Bringe Audio gut rüber«-Schaltfläche. Die Wahl zwischen guter Qualität und kleiner Dateigröße hat mehr von einem Kampf als von einem Balanceakt. Man muss dazu lediglich die Technik dahinter verstehen – genau das ist das Ziel dieses Kapitels. In diesem Kapitel werden Sie: 쐽

Sound importieren und in Schlüsselbildern verwenden,

쐽

Audio-Konzepte (wie zum Beispiel Aufnahmequalität, Frequenz und Komprimierung) kennen lernen und

쐽

Tricks ausprobieren, wie man die Dateigröße von Soundeffekten verringert.

10.1 Sounds importieren Flash unterstützt zwar die Wiedergabe von Audio-Dateien, bietet aber leider keine Möglichkeit, Ton oder Geräusche zu generieren. Sie müssen sich also auf die Suche nach einer fertigen Sound-Datei machen, sich Ihre Sounds anfertigen lassen oder selbst zu entsprechender Software greifen, um Ihre eigenen Geräusche zu generieren oder aufzuzeichnen. Das Einbinden von Sound funktioniert in zwei Schritten: Zuerst müssen Sie die AudioDatei importieren und dann angeben, wo (besser wann) und wie sie abgespielt werden soll. Das kann man fast mit der Verwendung von Rastergrafiken (siehe Kapitel 3) vergleichen. Wenn man beispielsweise ein Geräusch importiert hat, wird es in der Bibliothek abgespeichert. An dieser Stelle möchte ich kurz darauf hinweisen, dass es natürlich im Internet eine Vielzahl von Bezugsquellen von Sounds gibt. Bedenken Sie aber, dass viele dieser Dateien urheberrechtlich geschützt sind. Außerdem sollten Sie bei der Erstellung einer professionellen Internetseite lieber einen Sound-Experten beauftragen, eigene Sounds für Sie zu generieren. Das hat eine Menge Vorteile: Sie haben einerseits die Urheberrechts-Fragen von Anfang an geklärt und können dafür sorgen, dass niemand sonst Ihre Audio-Dateien verwendet. Stel-

220

Sounds importieren

len Sie sich vor, Sie wollen ein Geräusch verwenden, das auch eine andere Firma einsetzt, die plötzlich viel populärer wird. Auf einmal stehen Sie wie ein Nachahmer da, obwohl Sie die Datei vielleicht schon viel früher verwendet haben. Oder denken Sie an eine Firma, die den gleichen Sound (mit dem Sie ein hochwertiges Produkt bewerben) für Zwecke einsetzt, die Ihrem Image schaden. Ich bin der Meinung, dass sich die Investition auf jeden Fall lohnt, wenn man eine exklusive Seite erstellen möchte.

Unterstützte Formate Flash kann die folgenden digitalen Audioformate verarbeiten: 쐽

MP3

쐽

WAV

쐽

AIF (kommt auch als AIFF vor)

Dabei gibt es nur einen Haken: Wenn Sie noch nicht QuickTime 4 installiert haben, können Sie unter Windows keine AIF-Dateien und mit einem Macintosh keine WAV-Dateien importieren. Laden Sie QuickTime einfach von http://www.apple.com herunter und installieren Sie diese Software. Dann können Sie alle drei Formate beliebig einsetzen. Ich werde oft gefragt, welches dieser Formate das beste ist. Grundsätzlich kann man sagen, dass es keine Rolle spielt, welches Format Sie verwenden. Sie sollten allerdings immer mit der besten Qualität beginnen, die Ihnen zur Verfügung steht. Dabei unterscheiden sich WAV und AIF kaum voneinander. Sie bieten beide die gleiche hohe Qualität. Bei den MP3-Dateien sieht das aber schon anders aus. Hier liegen die Audioinformationen nämlich komprimiert vor. Das heißt also, dass die Qualität nicht besonders hoch ist. Es gibt allerdings zwei gute Gründe, warum man MP3-Dateien einsetzen sollte: 쐽

Wenn die einzige Datenquelle eine MP3-Datei ist oder

쐽

wenn die MP3-Datei (soweit Sie das beurteilen können) schon optimal komprimiert wurde.

MP3-Dateien werden qualitativ nicht schlechter, wenn man sie in Flash verwendet, allerdings werden Sie auch nicht besser. Das ist wieder der Grund, warum ich Ihnen nicht empfehlen kann, eine MP3-Datei als Quell-Datei zu verwenden. Es sei denn, Sie haben nichts anderes oder Sie sind mit der aktuellen Qualität hundertprozentig zufrieden.

Aufgabe: Importieren Sie einen Sound! Die Vorgehensweise, um Sound in Flash zu importieren, ist recht einfach. Folgen Sie diesen Schritten:

221

Sound in Animationen einbinden

1. Wählen Sie in einer neuen Datei DATEI / IMPORTIEREN. (Unter Windows finden Sie einige Sounds in C:\Windows\Media; Macintosh-Anwender können eine Suche nach Dateien vom Typ Sound starten.) Man kann die Dateianzeige nach Sound-Dateien ausfiltern, wenn man (wie in Abbildung 10.1) Alle Ton-Formate auswählt.

Abbildung 10.1: Wenn man nach bestimmten Dateien sucht, kann man über das Auswahlfeld Dateityp die Anzeige filtern.

2. Nachdem Sie eine Ton-Datei ausgewählt haben, können Sie auf Öffnen klicken. Der Sound wird nun importiert (Sie werden nichts hören, aber die Ton-Datei steht Ihnen nun in Flash zur Verfügung). Sie finden den Ton in der Bibliothek wieder. Schauen Sie doch einmal nach ((Strg)+(L)). 3. Auch wenn wir hier noch nicht genau auf die Verwendung von Sound eingehen (das kommt im nächsten Abschnitt), sollten wir es schon einmal ausprobieren. Es gibt zwei Möglichkeiten, den Sound einzubinden: Die eine ist, ihn direkt aus der Bibliothek auf die Bühne zu ziehen. Dazu ist ein editierbares Bild (also nicht interpoliert) erforderlich, das sich in einer nicht gesperrten Ebene befindet. Die andere Methode ist, einfach ein Schlüsselbild auszuwählen (klicken Sie in der Zeitleiste einfach auf 1) und im Sound-Bedienfeld die gewünschte Datei im Auswahlfeld Ton einzustellen (siehe Abbildung 10.2). Hier werden alle Ton-Dateien angezeigt, die Sie zuvor in Ihren Film importiert haben. 4. Wenn Sie den Film nun testen, werden Sie den Sound hören. (Dafür sollten natürlich Ihre Soundkarte und die Computerlautsprecher funktionieren.)

222

Sounds importieren

Abbildung 10.2: Die importierten AudioDateien erscheinen sowohl in der Bibliothek als auch im Sound-Bedienfeld.

Sounds aus einer anderen Bibliothek importieren Ich bin mir sicher, dass Sie mit mir einer Meinung sind: Sounds zu importieren ist ein Kinderspiel. Es gibt allerdings noch eine andere Möglichkeit, Ton zu importieren. Sie können nämlich die erforderlichen Dateien direkt aus Bibliotheken anderer Flash-Filme übernehmen. Dazu brauchen Sie nur das entsprechende Soundobjekt von einer Bibliothek in die andere zu ziehen (oder aus der fremden Bibliothek auf die Bühne, wenn das aktuelle Bild bearbeitet werden kann). Sie können das ausprobieren, indem Sie die Sound-Bibliothek öffnen, die mit Flash ausgeliefert wird. Stellen Sie sicher, dass Ihre Bibliothek geöffnet ist und wählen Sie dann FENSTER / ALLGEMEINE BIBLIOTHEKEN / SOUNDS. Ordnen Sie die beiden Bibliotheken so an, dass beide sichtbar sind. Nun können Sie einzelne Soundobjekte aus der Flash-Bibliothek in Ihre ziehen. Wenn Sie die zweite Variante verwenden (indem Sie die Sounds auf die Bühne ziehen), werden Sie feststellen, dass die Objekte auch in Ihrer Bibliothek auftauchen.

223

Sound in Animationen einbinden

10.2 Sound verwenden Da wir nun wissen, wie man die Sounds importiert, können wir uns mit der Frage beschäftigen, wie man sie im richtigen Moment abspielt. Es gibt nur eine Stelle in Flash, an der man Sounds einfügen kann: in Schlüsselbildern. (Es gibt eine Ausnahme, die mit ActionScript zusammenhängt. Dazu kommen wir aber erst viel später.) Auch wenn Sie beispielsweise einen Sound abspielen wollen, falls ein Anwender mit der Maus über eine Schaltfläche fährt, müssen Sie den Sound in ein Schlüsselbild einfügen – dabei handelt es sich lediglich um ein Schlüsselbild in der Schaltfläche. Mit solchen Schaltflächen werden wir uns aber erst in Kapitel 13 beschäftigen. Wir wissen also, dass man Sounds in Schlüsselbilder einfügt. Wie bekommt man diese aber dort hinein? Dazu gibt es das Sound-Bedienfeld. Außerdem kann man an der Zeitleiste erkennen, wann und wie lange eine Ton-Datei abgespielt wird (siehe Abbildung 10.3).

Abbildung 10.3: Die Wellenform (eine Abbildung des Tons) wird in der Zeitleiste angezeigt. Das ist besonders dann hilfreich, wenn Sie Bilder mit bestimmten Soundabschnitten synchronisieren wollen.

Im Bedienfeld Sound können Sie aber trotzdem immer noch am besten erkennen, welcher Sound in welches Schlüsselbild eingefügt wurde. Allerdings werden (wie bei jedem anderen Bedienfeld auch) nur Informationen zum aktuellen Schlüsselbild angezeigt. Man kann dieses Bedienfeld sehr leicht missverstehen, da man Schlüsselbilder einfach verlassen kann. Die Abbildung 10.4 sieht ähnlich aus wie die Abbildung 10.3. Allerdings wird im Bedienfeld Sound angezeigt, dass kein Ton verwendet wird. Wenn Sie allerdings auf die Zeitleiste schauen, werden Sie feststellen, dass zwar eine Wellenform angezeigt wird, aber kein Schlüsselbild ausgewählt wurde. Deshalb sollten Sie erst dann auf das Sound-Bedienfeld schauen, nachdem Sie das entsprechende Schlüsselbild ausgewählt haben.

224

Sound verwenden

Abbildung 10.4: Das Bedienfeld Sound kann irreführend sein. Es zeigt nur dann Sounds an, wenn ein Schlüsselbild ausgewählt wurde. Da hier aber kein Schlüsselbild aktiviert wurde, wird auch kein Sound im Bedienfeld angezeigt.

Sync-Einstellungen Wenn wir in einem Schlüsselbild die Wiedergabe von Sound aktiviert haben, können wir exakt angeben, wie der Ton wiedergegeben werden soll. Die wichtigste Entscheidung, die Sie dabei treffen müssen, ist die Sync-Eigenschaft des Sounds. Dabei wird die Priorität des Sounds gegenüber den sichtbaren Elementen der Animation festgelegt. Bevor Sie die Einstellungen ausprobieren, betrachten Sie bitte die folgende Liste und die Abbildung 10.5 für eine genauere Beschreibung jeder Option. 쐽

Ereignis ist die Standardeinstellung und üblicherweise auch die beste Wahl. Mit dieser Einstellung wird der Sound wiedergegeben, wenn das entsprechende Schlüsselbild erreicht wurde, und sie stoppt erst, wenn die Ton-Datei komplett abgespielt wurde. Das Zusammenspiel von Bild und Ton wird aber nicht auf jedem Computer gleich sein. Der Sound wird natürlich nicht schneller oder langsamer wiedergegeben (das würde sich recht lustig anhören), aber die Geschwindigkeit, in der die Grafik berechnet wird, ist doch recht unterschiedlich.

쐽

Start ist vergleichbar mit Ereignis. Allerdings kann hier ein bereits abgespielter Sound

nicht überlagert werden. Wenn Sie in mehreren Schlüsselbildern den gleichen Sound per Ereignis starten, werden die einzelnen Instanzen des Sounds überlagert (wie bei einem Kanon). Die Option Start besagt aber: »Spiele den Sound ab, wenn er nicht schon wiedergegeben wird.« 쐽

Mit Stop kann man die Wiedergabe eines bestimmten Sounds beenden. Wenn Sie beispielsweise eine Hintergrundmusik abspielen lassen, können Sie (wo auch immer diese Soundwiedergabe begonnen wurde) das Abspielen dieses Sounds stoppen. Alle anderen Sounds werden aber ganz normal fortgesetzt.

225

Sound in Animationen einbinden

쐽

Wenn Sie Stream eingestellt haben, wird der Sound synchron mit der Bildwiedergabe abgespielt. Da (wie wir schon festgestellt haben) der Sound aber vom Tempo nicht variiert werden kann, werden gegebenenfalls einzelne Bilder übersprungen, um (bei einem grafisch langsamen Computer) mit dem Sound Schritt zu halten. Wenn Sie also eine Animation mit 12 Bps erstellt haben, sollte bei einem Drei-Sekunden-Sound die Animation auch 36 Bilder haben, da sonst ein Teil des Sounds nicht abgespielt wird. Wenn Sie also in der Zeitleiste eine besondere Stelle im Sound erkennen, können Sie sicher sein, dass mit der Option Stream in dem Moment auch versucht wird, das entsprechende Bild anzuzeigen (vorausgesetzt der Computer des Betrachters ist schnell genug). Außerdem werden Sounds, die per Stream wiedergegeben werden, auch bei der Schrubbertechnik abgespielt, um Lippensynchronität zu testen.

Abbildung 10.5: Sie können für jede Sound-Instanz die Einstellung Sync im Sound-Bedienfeld verändern.

Die Entscheidung, welche Sync-Einstellung man verwenden sollte, ist eigentlich gar nicht so schwer. Ereignis ist bei fast jedem Sound (besonders bei kurzen Geräuschen) die richtige Wahl, es sei denn, es wird eine besonders präzise Synchronisation gewünscht. Eine Hintergrundmusik, die irgendwann beginnt und sich dann ständig wiederholt, benötigt keine besondere Abstimmung mit den Bildern. Deshalb ist auch hier Ereignis die richtige Wahl. Wenn Sie aber zum Beispiel fünf Schaltflächen besitzen, die immer dann ein Geräusch von sich geben, wenn der Betrachter mit der Maus darüber fährt, gibt es bei kurzen Tönen kein Problem. Wenn Sie aber etwas längere Audio-Dateien für diesen Effekt verwenden, wird der Betrachter schnell abgelenkt, da die Geräusche sich immer überlappen und so ein ganzer Sound-Teppich entsteht. Hier wäre Start wahrscheinlich die bessere Wahl. Wir kommen auf solche Sounds aber im 13. Kapitel noch zu sprechen. Die Einstellung Stop können Sie besonders geschickt einsetzen, denn es wird ein Sound gezielt gestoppt. Wenn Sie im 14. Kapitel mehr über Aktionen lernen, werden Sie erfahren, wie man alle Sounds auf einmal stoppt. Abschließend sei gesagt, dass Stream für eine Funktion besonders gut geeignet ist: Grafik mit Sound zu synchronisieren. Das ist besonders dann interessant, wenn Sie einen Charakter erschaffen haben, dessen Lippen sich synchron zur Stimme bewegen sollen. Versuchen Sie das einmal ohne diese Einstellung. Sie werden schnell verzweifeln, da Sie bei der Schrubber-

226

Sound verwenden

technik nichts hören. Erst wenn Sie Stream eingestellt haben, wird der Sound im Prinzip in kleine Stücke zerteilt, die den einzelnen Bildern zugeordnet werden. Deshalb können Sie auch beim Schrubben die Stimme Ihres Charakters hören und genau abgleichen. Wenn Sie ein Drei-Sekunden-Geräusch in einer 12-Bps-Animation verwenden, wird Flash während des Geräusches 36 Bilder anzeigen. Was passiert aber, wenn Sie die Bildrate auf 24 Bps erhöhen? Ganz einfach: Flash wird nun die Bilder in 1,5 Sekunden spielen, aber den Sound unverändert lassen (siehe Abbildung 10.6).

Abbildung 10.6: Die gleiche Animation mit gleichem Sound in 12 Bps (oben) und 6 Bps (unten). Alles bleibt gleich, lediglich der Sound benötigt eine andere Anzahl von Bildern, um abgespielt zu werden.

227

Sound in Animationen einbinden

Effekt-Einstellungen Das Bedienfeld Sound bringt einige sehr interessante Effekte mit sich, die Sie bei einem ausgewählten Sound anwenden können. Im Auswahlfeld neben dem Wort Effekt können Sie mehrere Einstellungen (wie zum Beispiel Einblenden, Ausblenden, von links nach rechts oder von rechts nach links) vornehmen. Damit Sie die Handhabung besser verstehen, sollten Sie Benutzerdefiniert einstellen oder auf Bearbeiten neben dem Soundnamen klicken. Es erscheint das Fenster Hülle bearbeiten (siehe Abbildung 10.7).

Abbildung 10.7: Im Fenster Hülle bearbeiten können Sie vorgefertigte Überblendeffekte auswählen oder Ihre eigenen erzeugen. 쐽

Im linken Kanal/rechten Kanal werden verschiedene Wellenformen angezeigt, wenn es sich bei Ihrem Sound um Stereo handelt. Aber selbst wenn es sich um ein Monosignal handelt, werden beide Kanäle angezeigt, damit Sie beispielsweise einen Überblendeffekt von links nach rechts erzeugen können. In diesem Fall kommt aus beiden Lautsprechern genau das gleiche Geräusch (allerdings mit unterschiedlichen Lautstärken).

쐽

Die Hüllenkurve stellt die Lautstärke des Sounds zu den unterschiedlichen Zeitpunkten dar. Wenn die Kurve oben ist, spielt der Sound mit 100% Lautstärke. Wenn die Kurve also nach rechts hin ansteigt, wird der Sound immer lauter.

쐽

Die Hüllenanfasser sind vergleichbar mit Schlüsselbildern im Sound. Immer wenn Sie die Richtung der Hüllenkurve verändern wollen, können Sie an der entsprechenden Stelle auf die Hüllenkurve klicken, um einen Hüllenanfasser zu erzeugen. Es wird

228

Sound verwenden

auch im anderen Kanal ein solcher Wendepunkt erzeugt, der sich von seinem Gegenstück (im anderen Kanal) zwar in der Lautstärke, aber nicht in der Position (Zeitpunkt) unterscheiden kann. 쐽

Mit dem Startpunkt legen Sie fest, an welcher Stelle der Sound starten soll. Damit können Sie zum Beispiel die Stille am Anfang einer Aufnahme ausschließen und den Sound direkt beim ersten Geräusch starten lassen.

쐽

Über den Endpunkt können Sie im Gegenzug das Abspielen des Sounds vorzeitig beenden. Das macht Sinn, wenn beispielsweise auch hier Stille folgt oder wenn Sie nur einen Teil des Sounds verwenden wollen. Wenn Sie so den Sound verkürzen, wird auch nur dieser Teil in Ihrer .swf-Datei gespeichert (was für eine geringere Dateigröße sorgt).

쐽

Mit Stopp/Abspielen können Sie die Effekte überprüfen, die Sie eingestellt haben. Sie sehen zwar, was Sie produziert haben, aber Sie werden wohl doch eher Ihrem Gehör vertrauen, wenn es um die Feinabstimmung des Sounds geht.

쐽

Wenn Sie Vergrößern/Verkleinern verwenden, können Sie genauer bestimmen, wann Effekte einsetzen sollen oder wo der Sound beginnen und enden soll.

쐽

Mit Sekunde/Bilder können Sie festlegen, welche Einheit angezeigt werden soll. Es lohnt sich nicht, dass Sie sich Sekunden anzeigen lassen, wenn Sie die Synchronisation der Bilder anpassen wollen.

Auch wenn es so viele Einstellmöglichkeiten in diesem Fenster gibt, können Sie nur zwei Aktionen damit ausführen: Entweder Sie wählen einen vordefinierten Effekt oder Sie erstellen einen neuen. Sie können natürlich auch eine vorgefertigte Hüllenkurve zuweisen und diese dann Ihren Anforderungen anpassen. Sie sollten nach jeder Änderung den Sound testen. Alle Änderungen, die Sie vornehmen, beeinflussen die Original-SoundDatei in der Bibliothek nicht. Sie können also mehrere Soundinstanzen mit unterschiedlichen Effekten belegen, wobei aber immer die Original-Datei in der Bibliothek zu Grunde gelegt wird. Eine sehr wichtige Sache ist, dass man durch die Verwendung des Start- und Endpunktes die Dateigröße verringern kann und somit für den Anwender Downloadzeit gespart wird; dieses Detail sollten Sie in Erinnerung behalten. Es nützt allerdings nichts, wenn Sie statt dessen die Hüllenkurve auf 0% setzen, denn der Sound bleibt dann immer noch genauso lang (und die Datei genauso groß) wie zuvor.

Wdh-Einstellungen Abschließend möchte ich Sie noch auf die Einstellung Wdh im Sound-Bedienfeld hinweisen. Hier können Sie angeben, wie oft der Sound wiederholt werden soll. Bei den Wiederholungen werden keinerlei Pausen eingefügt, was besonders schön für spezielle Loop-Sounds ist.

229

Sound in Animationen einbinden

Manche Sounds eignen sich besser für Wiederholungen als andere. Ein gut geeigneter Sound endet auf die gleiche Weise, wie er startete. Selbstverständlich kann man auch eine große Ton-Datei importieren und über den Start- und Endpunkt einen schönen wiederholbaren Sound erstellen, allerdings dürfte das nicht gerade einfach sein. Im Normalfall werden Sie nach einem Sound suchen, der von einem Tontechniker vorbereitet wurde, um diesen Zweck zu erfüllen. Solche professionellen Sounds verraten nicht, dass und wann sie wiederholt werden. Sie hören sich wie eine Endlosmelodie an. Wenn Sie einen passenden Sound gefunden haben, den Sie »endlos« oft wiederholen wollen, ist es in Flash gängige Praxis, eine sehr große Zahl in das Feld Wdh einzutragen. Wenn Sie also 99999999999 eintragen, wird Flash die Zahl in 2147483647 umwandeln (die größte ganze Zahl, die Flash verwalten kann). Ich denke, dass ein sehr geduldiger Betrachter diese Anzahl von Durchläufen abwarten könnte. Wenn Sie aber nachrechnen, werden Sie feststellen, dass ein Ein-Sekunden-Sound bei 2.147.483.647-maliger Wiederholung etwa 68 Jahre benötigt, um am Ende zu sein!

Aufgabe: Fügen Sie Sounds und Soundeffekte zu einer Animation hinzu! In dieser Aufgabe werden wir einen Beispielfilm mit Sound versehen. 1. Wählen Sie HILFE / BEISPIELE / SCHLÜSSELBILD ERSTELLEN. Öffnen Sie bitte auch die Sound-Bibliothek per FENSTER / ALLGEMEINE BIBLIOTHEKEN / SOUNDS. 2. Öffnen Sie die Bibliothek der Beispiel-Datei über FENSTER / BIBLIOTHEK ((Strg)+(L)).

Abbildung 10.8: Schieben Sie die beiden Bibliotheken nebeneinander, damit wir Sounds übernehmen können.

230

Sound verwenden

3. Ziehen Sie die folgenden Dateien aus der Sound-Bibliothek in die Bibliothek der Beispiel-Datei: Book Drops, Smack und Visor Hum Loop. 4. Damit sind die Sounds nun in Ihrer Datei verfügbar. Allerdings müssen wir sie noch in Schlüsselbilder einfügen. Lassen Sie uns zuerst aber eine Ebene nur für die Sounds anlegen. Wählen Sie also Einfügen / Ebene (es ist egal, wo die neue Ebene angezeigt wird). Nennen Sie die Ebene Hintergrundmusik. 5. Wählen Sie das erste Bild der neuen Ebene aus und öffnen Sie das Sound-Bedienfeld. Wählen Sie unter Ton den Sound Visor Hum Loop aus. Damit das Geräusch ständig wiederholt wird, tragen Sie eine Reihe Neunen (99999999999) unter Wdh ein (siehe Abbildung 10.9).

Abbildung 10.9: Wenn Sie eine sehr große Zahl unter Wdh eintragen, wird der Sound ständig wiederholt.

6. Wählen Sie nun STEUERUNG / FILM TESTEN. Der Sound wird sehr schön wiederholt und gibt unserem Film einen dramatischen Touch. Lassen Sie uns einige weitere Soundeffekte einfügen. 7. Fügen Sie eine weitere Ebene ein und nennen Sie diese Soundeffekte. Nun fügen wir ein Geräusch ein, bei dem die Blume den Schmetterling fängt. Das passiert ziemlich genau in Bild 40. Fügen Sie also in der Ebene Soundeffekte bei Bild 40 ein Schlüsselbild ein. 8. Wählen Sie das soeben erzeugte Schlüsselbild aus und tragen Sie im Sound-Bedienfeld Smack zum Abspielen ein. Lassen Sie die anderen Einstellungen unverändert, da wir den Sound nicht wiederholen wollen.

231

Sound in Animationen einbinden

9. Wählen Sie erneut STEUERUNG / FILM TESTEN. Der Effekt ist gut, allerdings bleibt das Summen weiterhin bestehen, auch wenn der Schmetterling bereits weg ist. 10. Das ändern wir, indem wir in Bild 43 in der Ebene Soundeffekte ein weiteres Schlüsselbild erzeugen: Tragen Sie hier im Bedienfeld Sound wieder Visor Hum Loop ein, wählen aber unter Sync den Wert Stopp. Damit beenden wir die Wiedergabe des Summens. 11. Zum Schluss fügen wir noch ein Geräusch ein, wenn der Schmetterling hinuntergeschluckt wird. Dazu fügen wir wieder in Soundeffekte in Bild 63 ein Schlüsselbild ein und lassen Book Drops einmal abspielen. Testen Sie den Film noch einmal und Sie werden mir zustimmen, dass der Film viel besser ist als die stumme Variante. Nebenbei: Diese Sounds haben die Dateigröße gerade einmal um 3 kb erhöht!

10.3 Qualität und Dateigröße kontrollieren Da Sie nun wissen, wie man mit Sound innerhalb von Flash umgeht, sollten Sie sich Gedanken darüber machen, wie die Qualität im Zusammenhang mit der Dateigröße steht. Wenn Sie die beste Audioqualität verwenden, wird die Datei sehr groß. Dem gegenüber steht eine kleine Datei für schlechte Qualität. Das ist einfach eine Tatsache. Sie müssen sich entscheiden, wie Sie diese beiden Werte ausbalancieren. Ist die Soundqualität so wichtig, dass Sie Ihr Publikum länger vor dem Bildschirm beim Download warten lassen wollen? Lässt ein schneller Download den Betrachter über qualitativ schlechten Sound hinwegsehen? Sie sollten sich darüber viele Gedanken machen, um den besten Kompromiss zu finden. Bevor wir dieses Thema weiter diskutieren, sollten wir ein paar Grundlagen lernen, um diese später in Flash umsetzen zu können.

Digital-Audio-Grundlagen Digitale Sounds sind nicht flüssig. Genauso wie Ihr Monitor flimmert, besteht ein digitales Geräusch aus vielen Klangteilen, die man auch Samples nennt. Diese Samples folgen allerdings so schnell aufeinander, dass Sie meinen, einen flüssigen Sound zu hören. Die Geschwindigkeit, in der die Samples abgespielt werden, nennt man auch SampleRate. Dabei klingen hohe Raten besser als niedrige. Eine CD wird zum Beispiel mit 44 KHz aufgenommen. Ein Sound mit halber Rate (22 KHz) klingt aber nicht extrem viel schlechter, obwohl er nur die halbe Datenmenge benötigt.

232

Qualität und Dateigröße kontrollieren

Ein weiterer wichtiger Faktor ist die Bit-Tiefe. Genauso wie Ihr Monitor 256 Farben (8 Bit) oder 16,7 Millionen Farben (24 Bit) anzeigen kann, ist es bei Sounds möglich, einen Vollausschlag in 256 oder 65.536 (16 Bit) einzelne Werte zu unterteilen. Ein 16-Bit-Sound (wie bei einer CD) ist also viel höher aufgelöst als ein 8-Bit-Sound und klingt deshalb viel besser. Die Werte Sample-Rate und Bit-Tiefe sind voneinander unabhängig. So kann man zum Beispiel Sounds mit hoher Sample-Rate, aber niedriger Bit-Tiefe oder umgekehrt erzeugen. Noch etwas anderes: Ein Stereosound ist immer doppelt so umfangreich wie ein Monosound (da die Informationen für zwei Kanäle abgespeichert werden müssen). Außerdem wird durch die Länge des Sounds die Dateigröße direkt beeinflusst. Je länger ein Sound ist, umso größer wird die Datei. Es gibt zwar Möglichkeiten, die genaue Größe einer Sound-Datei zu berechnen, was an dieser Stelle allerdings zu weit führen würde. Seien Sie einfach versichert, dass SoundDateien meist sehr groß sind. Eine Minute in CD-Qualität benötigt beispielsweise etwa neun Megabyte Speicher. Deshalb sollten Sie versuchen, einen besseren Weg zu finden. Eine Möglichkeit ist die Komprimierung. Für das MP3-Format wird der Sound beispielsweise analysiert und es entsteht eine Datei, mit der man den Sound mit recht wenig Verlust wieder rekonstruieren und abspielen kann. Die Dateigröße wird dabei stark vermindert. (Eine CD-Minute ist danach nur noch ein Megabyte groß.) Wie das genau funktioniert weiß ich nicht. Das ist bestimmt Magie, glaube ich.

Einstellungen beim Exportieren Die ganze Theorie ist ja recht interessant, aber wie wendet man das nun auf die eigenen Sounds an? Es gibt zwei Stellen in Flash, an denen man die Soundqualität einstellen kann: das Sound-Bedienfeld (hier kann man für jeden einzelnen Sound verschiedene Angaben machen) oder global in den Veröffentlichungseinstellungen.

Globale Veröffentlichungseinstellungen Wenn Sie die Standardeinstellung für jeden Sound in Ihrem Flash-Film verändern wollen, wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN. Stellen Sie sicher, dass Sie bei den Formaten Flash (.swf) aktiviert haben und klicken Sie dann auf die Registerkarte Flash (siehe Abbildung 10.10). Sie sehen zwei unterschiedliche Einstellungen: Stream-Audio und Ereignis-Audio. Dabei beeinflusst Steam-Audio alle Sounds, die per Sync-Einstellung auf Stream gesetzt wurden und Ereignis-Audio die Sync-Werte Ereignis und Start. Wenn Sie auf die Schaltfläche Einstellungen klicken, sehen Sie alle verfügbaren Optionen (siehe Abbildung 10.11).

233

Sound in Animationen einbinden

Abbildung 10.10: In der Registerkarte Flash können Sie die globalen Einstellungen vornehmen, die dann alle SoundDateien Ihres Films betreffen.

Abbildung 10.11: Sie können in den Einstellungen für Veröffentlichungen die Komprimierung für alle im Film enthaltenen Sounds festlegen.

234

Qualität und Dateigröße kontrollieren

In der folgenden Liste finden Sie eine Beschreibung zu jeder Option: 쐽

Deaktivieren ist schnell erklärt. Damit befehlen Sie Flash, keine Sounds zu exportieren. Deshalb gibt es auch keine weiteren Optionen, wenn Sie diesen Wert auswählen.

쐽

ADPCM ist vergleichbar mit RAW (siehe unten), allerdings wird eine niedrige Komprimie-

rung unterstützt. Der einzige Grund, warum Sie diese Funktion verwenden sollten ist, wenn Sie den Film im Flash-3-Format abspeichern wollen. Ansonsten ist MP3 klar vorzuziehen. 쐽

Wenn Sie MP3 wählen, werden Sie eine großartige Komprimierung bei guter Qualität erhalten. Verändern Sie hier einfach die Bitrate (nach oben für bessere Qualität und nach unten für kleinere Dateien). Tasten Sie sich von oben nach unten vor und nehmen Sie die Rate, kurz bevor der Sound inakzeptabel wird.

쐽

Mit RAW bleibt der Sound so wie er ist (und leider auch so groß). Sie können allerdings die Dateigröße eines Stereosounds halbieren, indem Sie ihn auf Mono umschalten.

Sie sollten auch noch einen Blick auf das Feld Sound-Einstellungen übergehen werfen, denn wenn Sie das aktivieren, gelten die Einstellungen dieses Fensters auch, wenn etwas anderes über die Sound-Einstellungen für bestimmte Sounds angegeben wurde.

Individuelle Export-Einstellungen Zusätzlich zu den globalen Einstellungen kann jedes Soundobjekt in der Bibliothek mit eigenen Export-Einstellungen versehen werden. Doppelklicken Sie einfach auf einen Sound in der Bibliothek und Sie werden mit dem Fenster Sound-Eigenschaften konfrontiert (siehe Abbildung 10.12).

Abbildung 10.12: Hier werden SoundEinstellungen für einen einzelnen Sound vorgenommen. Dabei werden die globalen Einstellungen übergangen.

235

Sound in Animationen einbinden

Dieses Fenster erinnert sehr stark an die Export-Eigenschaften von Rastergrafiken. Hier werden Sie mit allen Einstellungen versorgt, die Sie auch in den globalen Export-Einstellungen für Sounds vornehmen können. Zusätzlich wird hier die Größe der exportierten Datei angezeigt und über die Testen-Schaltfläche erhalten Sie einen Eindruck vom komprimierten Sound. Über die Schaltflächen Aktualisieren und Importieren können Sie bequem Sounds ersetzen. Das macht beispielsweise dann Sinn, wenn Sie immer mit einem bestimmten Geräusch gearbeitet haben und nun eine besser passende Datei gefunden haben. So können Sie mit einem Klick die Soundverknüpfungen im ganzen Film auf die neue Datei umlenken. Das spart eine Menge Arbeit.

Tricks für mehr Effizienz Die beste Möglichkeit, Speicherplatz über Audio zu sparen ist, Sounds ganz zu vermeiden. Auch wenn das abwegig klingt, sollte man darüber nachdenken. Sie sollten sich zwingen, über die Notwendigkeit jedes einzelnen Sounds nachzudenken. Wenn für Ihren Film aber nichts dazu gewonnen wird, sollten Sie die Finger von dem Sound lassen, da nämlich auf jeden Fall unnötiger Speicherplatz belegt wird. Wenn Sie sich dann aber entschieden haben, dass der entsprechende Sound wirklich notwendig ist, können Sie die Dateigröße herunterdrücken. Dazu sollten Sie zuerst einmal Stille am Anfang und am Ende des Sounds löschen. Eine weitere Möglichkeit ist die Verwendung eines kurzen wiederholten Sounds anstelle eines langen linearen Geräusches. Damit das Ganze nicht zu monoton klingt, können Sie Ihre Animation mit ein paar zufällig wirkenden kurzen Sounds spicken. Das hört sich meist sehr interessant an. Die wohl subjektivste Frage ist allerdings, welchen Grad der Komprimierung man verwenden sollte. Vielleicht werden Sie denken, dass man Stimme weiter komprimieren kann als Musik. Das ist ein weit verbreitetes Missverständnis. Man kann aber eine andere Verallgemeinerung treffen: Sounds, die von natürlichen Geräuschen (und somit auch von herkömmlichen Instrumenten) erzeugt werden, sollten besser in hoher Qualität verbleiben, wogegen man synthetische Sounds weiter komprimieren kann. Zuletzt möchte ich noch darauf hinweisen, dass Monosounds klarer klingen als Stereo. Das heißt nicht, dass Sie niemals Stereo verwenden sollten. Allerdings können Sie StereoDateien nicht so weit komprimieren wie Mono-Daten (was doppelt ins Gewicht fällt, da Stereo-Dateien doppelt so groß sind wie Mono-Dateien der gleichen Qualität und Länge). Prüfen Sie bitte ganz genau, ob Sie wirklich Stereo brauchen. Bedenken Sie, dass Sie einen Unterschied zwischen links und rechts auch ohne Stereo-Daten in Flash erzeugen können.

236

Zusammenfassung

10.4 Zusammenfassung Flash unterstützt die Einbindung von Audio sehr elegant. Importieren Sie einfach die nötigen Sounds in Ihren Film und legen Sie fest, in welchen Schlüsselbildern welche Sounds abgespielt werden sollen. Dabei gibt es eine Menge Optionen, die das Abspielverhalten beeinflussen. Die »Kosten« für die Verwendung von Sound liegen im hohen Speicherbedarf. Aber auch dafür gibt es eine Hand voll Gegenmittel. Ich bin sicher, dass Sie in den meisten Fällen eine MP3-Komprimierung verwenden werden, da diese das beste Gleichgewicht zwischen Qualität und Dateigröße schafft. Ich hoffe, ich habe Sie nun ein wenig in Bezug auf die Verwendung von Audio sensibilisiert. Bitte verstehen Sie mich nicht falsch: Sounds sind ein wichtiges gestalterisches Mittel, aber denken Sie einfach genau nach, bevor Sie Sounds einsetzen. Ihr Publikum mit einer langsameren Verbindung wird es Ihnen danken.

10.5 Workshop F&A F

Ich habe einen langen Sound in das erste Schlüsselbild meines Films eingefügt. Wenn ich den Film aber teste, höre ich den Sound nur kurz, der dann sofort abbricht. Warum ist das so? A

F

Sie haben wahrscheinlich die Sync-Einstellung namens Stream verwendet. Wenn dann Ihr Film nicht so lang ist wie der Sound, wird dieser stumm geschaltet, sobald das Ende des Films erreicht ist. Ändern Sie die Sync-Einstellung einfach auf Ereignis und es wird funktionieren.

Ich habe einen Sound in das erste Bild meines Filmes eingefügt. Wenn ich den Film abspiele, höre ich allerdings nichts. Ich habe mich schon vergewissert, dass die Lautsprecher eingesteckt sind und die eingestellte Lautstärke nicht zu niedrig ist. Was könnte es sonst noch sein? A

Sie können zwei Dinge überprüfen. Zuerst einmal sollte weder STEUERUNG / SOUND DEAKTIVIEREN aktiv sein, noch sollte die Hüllkurve des Sounds als horizontale Linie auf dem niedrigsten Niveau liegen. Als Zweites können Sie auch noch den importierten Originalsound prüfen, um sicher zu gehen, dass es sich nicht um Stille handelt.

237

Sound in Animationen einbinden

F

Ich habe das Sound-Bedienfeld geöffnet und möchte einen Sound einfügen. Ich weiß genau, dass er richtig importiert wurde, denn er existiert in der Bibliothek. Was mache ich falsch? A

Sie haben bestimmt kein Schlüsselbild ausgewählt. Sounds können nur in Schlüsselbilder eingefügt werden. Wählen Sie also zuerst das entsprechende Schlüsselbild und wählen Sie dann im Sound-Bedienfeld die passende Audio-Datei aus.

Übungsaufgaben 1. Was ist das bessere Dateiformat für Originalsounds? AIF oder WAV? a. AIF, da es für den Macintosh entwickelt wurde b. WAV, da es noch neuer ist c. Weder noch, da beide die gleiche Qualität liefern können 2. Wo platziert man Sounds, damit man sie im fertigen Film hören kann? a. In der Bibliothek, in Symbolen oder in Schlüsselbildern b. In Schlüsselbildern (egal wo diese sind) c. Auf der Sound-Ebene 3. Wie kann man einen Sound dazu bringen, sich »ewig« zu wiederholen? a. Das kann man nicht. Man sollte statt dessen eine sehr große Zahl in das Wdh-Feld eintragen. Das kommt einer Endlosschleife schon sehr nahe. b. Mann schreibt unendlich in das Wdh-Feld. c. Stellen Sie sicher, dass die Sound-Datei die Buchstaben wdh im Dateinamen enthält.

238

Ebenen in Animationen verwenden

1 1

Ebenen in Animationen verwenden

Es ist sehr interessant, dass die meisten Leute denken, die Ebenen in Flash seien nur für das Anordnen visueller Elemente in verschiedenen Schichten zuständig. Das ist auch verständlich, da fast jedes Grafikprogramm solche Ebenen verwendet. Auch wenn die Ebenen in Flash den gleichen Effekt bringen, liegt ihr wahrer Wert nicht darin. Eine Ebene bietet nämlich eine eigene Zeitlinie. In diesem Kapitel werden Sie lernen, wie die Ebenen Sie in erster Linie unterstützen und (trotzdem) wie Sie damit Objekte in unterschiedlichen SichtEbenen anordnen können. Im Detail werden Sie in diesem Kapitel 쐽

Animationen über Ebenen steuern,

쐽

Ebenen-Eigenschaften verändern, um besondere Effekte zu erzielen und

쐽

Führungs-Ebenen, Pfade und maskierte Ebenen kennen lernen.

11.1 Wie Ebenen funktionieren Wenn Sie sich ein wenig mit Photoshop, Fireworks oder irgendeinem anderen Grafikprogramm auskennen, sind Sie bereits mit Ebenen als Instrument für die Anordnung von visuellen Objekten in verschiedenen Schichten vertraut. Wir haben auch schon gelernt, dass man Grafiken gruppieren kann und so verschiedene Anordnungen über- und untereinander festlegen kann. Wozu brauchen wir dann noch Ebenen?

Der wahre Zweck von Ebenen In Flash haben verschiedene Ebenen auch verschiedene Zeitlinien – und das macht sie eigentlich so wertvoll. Die Bilder in verschiedenen Ebenen werden zwar über oder unter anderen Ebenen angezeigt, allerdings ist das nicht die Hauptaufgabe der Flash-Ebenen. In verschiedenen Ebenen können Sie nämlich Animationen unterschiedlich steuern. Sicher haben Sie aus dem achten Kapitel behalten, dass man nur ein Objekt pro Ebene bewegungstweenen kann. Stellen Sie sich vor, Sie wollen zwei Kreise aufeinander zu bewegen. Das funktioniert nur, indem Sie jeden Kreis in einer eigenen Ebene anzeigen. Lassen Sie uns zu Beginn mit etwas Einfachem starten:

Aufgabe: Verwenden Sie zwei Ebenen, um zwei Kreise zu animieren! 1. Zeichnen Sie in einer neuen Datei einen Kreis, wählen diesen aus und konvertieren Sie ihn in ein Symbol. Nennen Sie das neue Symbol Kreis und lassen Sie das Standardverhalten Filmsequenz unverändert. Klicken Sie auf OK.

240

Wie Ebenen funktionieren

2. Mit dieser Instanz auf der Bühnen können Sie nun einen Bewegungstween erstellen. Damit es später nicht zu kompliziert wird, sollten Sie die Ebene Schnell nennen, da sich dieser Kreis gleichmäßig schnell bewegen soll. Um eine Ebene umzubenennen, können Sie einmal auf die gewünschte Ebene klicken, um sie zu fokussieren und danach auf den Namen der Ebene doppelklicken, damit Sie den neuen Namen eintragen können. Man kann auf jedes interaktive Element (Schaltflächen, Felder ...) den Fokus richten. In einem Onlineformular kann immer nur ein Element zur gleichen Zeit den Fokus erhalten. Wenn Sie etwas auf der Tastatur eingeben, erscheint der Text in dem Element, das gerade fokussiert ist. Immer wenn Sie (ÿ__) drücken, springt der Fokus ein Feld weiter. Genauso können auch die Bedienelemente von Flash fokussiert werden. Eine Ebene, die den Fokus erhalten hat, erkennen Sie beispielsweise an der geschwärzten Darstellung. 3. Da bisher nur ein Bild in der Zeitleiste eingetragen wurde, sollten Sie den Kreis an der linken Seite der Bühne positionieren. Danach klicken Sie auf Bild 31 in der Ebene Schnell und fügen dort ein Schlüsselbild ein. 4. Stellen Sie sicher, dass der Abspielkopf auf Bild 31 zeigt und ziehen Sie den Kreis auf die andere Seite der Bühne. 5. Erzeugen Sie im Schlüsselbild 1 einen Bewegungstween. 6. Lassen Sie uns nun eine weitere Ebene erzeugen. Dazu können Sie entweder EINFÜGEN / EBENE wählen oder die Schaltfläche Ebene einfügen betätigen (siehe Abbildung 11.1). Bevor Sie es vergessen, sollten Sie die Ebene mit dem Namen Langsam versehen (siehe Schritt 2).

Abbildung 11.1: Mit der Schaltfläche Ebene einfügen kann man am schnellsten eine neue Ebene erzeugen.

241

Ebenen in Animationen verwenden

7. Von nun an sollten Sie immer ganz sicher sein, wo Sie sich gerade befinden und welche Ebene Sie gerade bearbeiten. Sie können immer nur in einer Ebene zur gleichen Zeit sein – und das ist die mit dem Bleistiftsymbol hinter dem Namen (siehe Abbildung 11.2).

Abbildung 11.2: Das Bleistiftsymbol gibt an, welche Ebene im Moment aktiv ist (in diesem Fall die Ebene Langsam).

8. Jetzt werden wir die Instanz des Kreises aus der Schnell-Ebene kopieren und in die Ebene Langsam einfügen. Klicken Sie auf den Kreis. Da er sich in der Ebene Schnell befindet, wird diese Ebene aktiviert (der Bleistift steht nun bei Schnell). Der Kreis wird ausgewählt. Drücken Sie (Strg)+(C), um die Instanz zu kopieren. Jetzt müssen Sie wieder in die Ebene Langsam wechseln (auf den Namen klicken) und den Kreis dort per (Strg)+(V) einfügen. Positionieren Sie den neuen Kreis auch auf der linken Seite der Bühne (aber bitte nicht so, dass er den ersten Kreis verdeckt). 9. Damit Sie klarer sehen, können Sie die Instanz des Kreises in der Ebene Langsam einfärben (über Farbton im Effekt-Bedienfeld). 10. Fügen Sie nun in der Ebene Langsam bei Bild 31 ein Schlüsselbild ein und bewegen Sie dort den zweiten Kreis nach rechts (aber nicht so weit wie den ersten). 11. Erzeugen Sie im ersten Bild der Ebene Langsam einen Bewegungstween und testen Sie den Film. Sie sehen zwei Kreise, die sich gleichzeitig, aber mit unterschiedlicher Geschwindigkeit bewegen. 12. Lassen Sie diese Datei für die nächste Aufgabe geöffnet. Die frühere Beschreibung sollte nicht den Anschein erwecken, dass man Ebenen vermeiden soll. Im Gegenteil – erstellen Sie so viele Ebenen wie Sie brauchen, auch wenn es nur um die Anordnung von Objekten geht. Auch wenn eine Flash-Datei mit vielen Ebenen ein wenig mehr Zeit beim Öffnen brauchen wird, werden alle Ebenen beim Export in einer .swf-Datei zusammengefügt. Dadurch entstehen also keine zusätzlichen Daten. Die Ebenen sind nicht nur für die Organisation und die Anordnung von Objekten gut, sondern absolut notwendig für Animationseffekte.

242

Wie Ebenen funktionieren

Ebenen-Einstellungen, die Ihnen beim Editieren helfen Wir haben schon gesehen, wie das Bleistiftsymbol anzeigt, welche Ebene gerade bearbeitet wird. Allerdings zeigen auch andere Symbole in der Zeitleiste an, welche Eigenschaften eine Ebene hat. Betrachten Sie die Abbildung 11.3 für einen kurzen Überblick bezüglich der Eigenschaften. Wir werden sie gleich im Detail besprechen.

Abbildung 11.3: Ebenen-Eigenschaften, die man verändern kann

In Abbildung 11.3 sehen Sie so gut wie jede Variation von Ebenen-Eigenschaften. Wenn Sie auf die Ebene rechtsklicken und dann EIGENSCHAFTEN wählen, können Sie Veränderungen vornehmen. Hier folgt eine kurze Einführung in jede einzelne Möglichkeit: 쐽

Bei Name können Sie die Ebene umbenennen.

쐽

Mit Einblenden haben Sie die Möglichkeit, die Ebene zu verstecken oder wieder anzuzeigen. Diese Option steht Ihnen auch in der Zeitleiste zur Verfügung und wird durch ein Augen-Symbol kenntlich gemacht.

쐽

Wenn Sie Sperren aktivieren, können Sie in der entsprechenden Ebene nichts zeichnen. Durch einen erneuten Klick wird sie wieder zur Bearbeitung freigegeben.

쐽

Mit der Option Ebene als Kontur anzeigen können Sie die Ansicht der Ebene auf ein Minimum reduzieren. Die Ebene verhält sich fast wie ausgeblendet, allerdings sind die Umrisse der Objekte noch zu sehen.

243

Ebenen in Animationen verwenden

쐽

Wenn Sie Normal aktivieren, verhält sich die Ebene (wie der Name schon sagt) ganz normal. Das ist auch die Standardeinstellung.

쐽

Nicht mehr normal ist dann schon die Option Führungs-Ebene, denn hier können Sie hineinzeichnen, was Sie wollen. Dabei handelt es sich meist um Figuren, die bei der Ausrichtung behilflich sind, denn alles was hier abgelegt wird, erscheint nicht im späteren Film.

쐽

Wenn Sie auf eine Ebene rechtsklicken, können Sie PFAD HINZUFÜGEN auswählen. Die Ebene erhält dann eine Zusatz-Ebene, die als Pfad gekennzeichnet ist.

쐽

Die ursprüngliche Ebene (der Sie den Pfad hinzugefügt haben) ist dann eine am Pfad entlanggeführte Ebene. Das wird durch die Option Ausgerichtet kenntlich gemacht.

쐽

Wenn Sie die Einstellung Maske auswählen, können Sie in der Ebene beliebige Formen und Nicht-Filmsequenz-Symbole einfügen, die bestimmen, welcher Teil einer maskierten Ebene sichtbar oder nicht sichtbar ist.

쐽

Durch Maskiert können Sie dann letztlich festlegen, dass diese Ebene durch eine solche Maske betrachtet werden soll.

Manche der Ebenen in Abbildung 11.3 lassen sich mit einem Klick erzeugen. Andere wiederum benötigen eine Vielzahl von Schritten. Wir werden uns im weiteren Verlauf dieses Kapitels noch mit Führungs-Ebenen und Masken beschäftigen. Für den Anfang sollten wir jedoch mit leichteren Einstellungen beginnen. Wenden wir uns also dem ANZEIGEN / VERSTECKEN, SPERREN / ENTSPERREN und dem ANZEIGEN ALS KONTUREN zu.

Aufgabe: Experimentieren Sie mit dem Verstecken und der Konturenansicht von Ebenen! 1. Öffnen Sie die Datei aus der letzten Übung und schauen Sie sich die Animation erneut an, damit Sie sich erinnern, wie sie aussah. 2. Woher weiß man, welcher Kreis in welcher Ebene liegt? Wenn Sie sich überschneiden, liegt einer über dem anderen. Stellen Sie den Abspielkopf auf Bild 1 ein. Wenn Sie nur auf den Bildschirm sehen, werden Sie nicht feststellen können, welcher Kreis zu welcher Ebene gehört. Man könnte versuchen, anhand der Namen der Ebenen eine Aussage zu treffen, aber Schnell und Langsam sind nicht wirklich aussagekräftig. Besonders schwierig wird es, wenn Sie nur ein Standbild betrachten. Um ein wenig mehr Durchblick zu bekommen, können Sie kurzzeitig einzelne Ebenen ausblenden. Wenn Sie also auf das Auge über den Ebenen klicken, werden alle auf einmal ausgeblendet. Ein erneuter Klick macht alle Ebenen wieder sichtbar. Wenn Sie aber nur eine einzige Ebene verstecken wollen, klicken Sie einfach auf den Punkt unter dem Auge, der zur entsprechenden Ebene gehört. Sie werden nicht nur ein rotes X an der Stelle sehen, an der zuvor noch der Punkt war, sondern der Inhalt der Ebene wird (so-

244

Wie Ebenen funktionieren

lange Sie das X per Klick nicht wieder entfernen) ausgeblendet. Mit dieser Methode können Sie herausfinden, was sich in bestimmten Ebenen befindet, da man sie einzeln ausblenden kann.

Abbildung 11.4: Die Inhalte von Ebenen können als Konturen angezeigt werden.

Abbildung 11.5: Man kann alle Ebenen-Eigenschaften im gleichnamigen Fenster bearbeiten.

245

Ebenen in Animationen verwenden

3. Blenden Sie wieder alle Ebenen ein, damit Sie die Kreise auf einem anderen Weg unterscheiden können. Diesmal verwenden Sie Konturen. Wenn Sie auf das Quadrat oberhalb der Ebenen klicken, werden die Inhalte aller Ebenen als Konturen angezeigt (siehe Abbildung 11.4). Da sich unsere Kreise in verschiedenen Ebenen befinden, werden sie in unterschiedlichen Farben angezeigt, die Sie neben den Ebenennamen wiederfinden. 4. Sollten die Konturen in der gleichen Farbe angezeigt werden, können Sie in den Ebenen-Eigenschaften (Doppelklick auf die Ebene) die Konturfarbe einstellen (siehe Abbildung 11.5). Wenn Sie nun wieder die Bühne betrachten, werden die Kreise unterschiedliche Farben haben. Bisher haben Sie zum Thema Ebenen also Folgendes gelernt: Mit zusätzlichen Ebenen kann man mehr als nur ein Objekt animieren. Besonders für Bewegungstweens ist das interessant, denn wenn Sie zwei Objekte gleichzeitig per Bewegungstween animieren wollen, müssen Sie diese in verschiedenen Ebenen unterbringen. Außerdem haben Sie gelernt, wie man mit den Ebenen-Eigenschaften die einzelnen Ebenen modifizieren kann. Mit den Optionen ANZEIGEN / VERSTECKEN, SPERREN / ENTSPERREN und der Konturenansicht kann man schnell herausfinden, welche Objekte in welcher Ebene angesiedelt sind. Denken Sie bitte daran, dass alle bisher besprochenen Einstellungen keinerlei Einfluss auf die fertige Animation haben. Der Betrachter wird ausgeblendete Ebenen genauso sehen, wie auch Ebenen in der Konturenansicht für ihn mit allen Füllungen erscheinen werden. Die Einstellungen sind nur für Sie (den Autor) interessant.

11.2 Ebenen-Eigenschaften für visuelle Effekte Die drei verbleibenden Ebenenarten (Führungs-Ebenen, Pfade und Masken) sind sehr mächtig. Im Gegensatz zu den bisher besprochenen Einstellungen haben diese Ebenentypen Auswirkungen auf das, was das Publikum später sehen wird. Allerdings ist die Verwendung dieser Ebenen-Eigenschaften etwas komplizierter, als nur ein Symbol in der Zeitleiste anzuklicken. Wenn Sie allerdings erleben, was mit diesen Einstellungen möglich ist, werden Sie schnell erkennen, warum sich der zusätzliche Aufwand lohnt.

Führungs-Ebenen Wenn Sie den Film veröffentlichen oder exportieren, werden die Führungs-Ebenen automatisch unsichtbar. Ich habe gerade gesagt, dass sich die nun beschriebenen Ebenen auf das Endergebnis auswirken. Das erste Thema, das wir nun betrachten, ist, dass etwas unsichtbar wird. Trotzdem sind diese Ebenen sehr nützlich, denn auch wenn man nichts von ihnen sieht, können sie doch das Gesamtbild des Filmes positiv verändern.

246

Ebenen-Eigenschaften für visuelle Effekte

Warum sollte es Sinn manchen, etwas zu zeichnen, das gar nicht mitexportiert wird? Meist werden Führungs-Ebenen dazu eingesetzt, Objekte zu positionieren, die an mehreren Stellen im Film auftauchen sollen. Stellen Sie sich einen Titel vor, der mehrfach auftauchen soll. Dazu zeichnen Sie eine Linie in die Führungs-Ebene und können die verschiedenen Titeltexte immer an der gleichen Linie ausrichten. Die Linie selbst wird der Betrachter aber nie zu Gesicht bekommen. Ein anderer Grund für den Einsatz dieser Ebenen kann die Dokumentation sein. Wenn Sie beispielsweise einem anderen Designer, der auch an Ihrer Datei arbeitet, über einen Text etwas mitteilen wollen, so können Sie diesen Text in eine Führungs-Ebene schreiben, da sie den fertigen Film nicht beeinflusst und nur von Personen mit Zugriff auf die FlashDatei gesehen werden kann. Außerdem kann es durchaus passieren, dass Sie sich kurz vor Fertigstellung des Films entscheiden, eine einzelne Animation zu löschen. Bevor Sie aber die Animation für immer entfernen, sollten Sie lieber die betreffende(n) Ebene(n) zu Führungs-Ebenen ernennen und haben jederzeit wieder Zugriff auf die Animation, die für den Betrachter plötzlich nicht mehr existiert.

Aufgabe: Verwenden Sie eine Führungs-Ebene, um den Bereich außerhalb der Grenzen zu definieren! 1. Angenommen, wir wollen eine Präsentation erstellen, in der einerseits Text vorkommt und andererseits ein Rahmen animiert werden soll. Der Text soll den Rahmen aber nicht berühren. Dabei kann uns eine Führungs-Ebene sehr behilflich sein. 2. Zeichnen Sie in einer neuen Datei ein ausgefülltes Rechteck in der Größe der Bühne. Verwenden Sie dann das Stift-Werkzeug, um eine unregelmäßige Figur in das Rechteck zu zeichnen. Wählen Sie die mittlere Füllung aus und löschen Sie diese (siehe Abbildung 11.6).Wählen Sie nun die ganze Form aus und konvertieren Sie diese in ein Symbol, das Sie Rahmenform nennen können. Nennen Sie diese Ebene Registrierung, da sie unsere Führungs-Ebene wird. 3. Fügen Sie eine neue Ebene namens Benutzeroberfläche ein. Hier soll eine Kopie der Rahmenform zu einem späteren Zeitpunkt im Ablauf des Films in Position gebracht werden, damit ich die Funktion von Führungs-Ebenen besser demonstrieren kann. Wählen Sie zuerst die Rahmenform in der Ebene Registrierung und kopieren Sie diese ((Strg)+(C)).Wählen Sie dann Bild 30 in der Ebene Benutzeroberfläche aus und fügen Sie hier ein Schlüsselbild ein. Stellen Sie sicher, dass Sie sich in der Ebene Benutzeroberfläche befinden (falls nicht, klicken Sie einfach auf den Namen) und fügen Sie die Rahmenform an der gleichen Position in Bild 30 ein ((Strg)+(ª)+(V)). 4. Klicken Sie auf Bild 40 in der gleichen Ebene und fügen Sie ein weiteres Schlüsselbild ein. Stellen Sie den Abspielkopf nun wieder zurück auf Bild 30 und skalieren Sie die Rahmenform so groß, dass man den Rand auf der Bühne nicht sehen kann (siehe Abbildung 11.7). Erzeugen Sie abschließend in Bild 30 einen Bewegungstween.

247

Ebenen in Animationen verwenden

Abbildung 11.6: Dies wird unsere Führungs-Ebene.

5. Klicken Sie auf Bild 40 der Ebene Registrierung. Fügen Sie dort mit (F5) ein Bild ein, damit diese Ebene genauso lang besteht wie die anderen. Stellen Sie nun die Ansicht dieser Ebene auf Konturenansicht um (indem Sie auf das Kästchen neben dem Ebenennamen klicken). Verwenden Sie die Schrubbertechnik, um zu erkennen, dass die Kontur der Führungs-Ebene genau anzeigt, bis wohin der Rahmen am Ende reichen wird. Damit können wir nun verhindern, dass sich Text und Rahmen in die Quere kommen. Wenn Sie allerdings den Film testen, werden Sie sehen, dass die Ebene Registrierung die ganze Zeit sichtbar ist. Das ist im Moment auch noch richtig so, da wir bisher die Ebene noch nicht in eine Führungs-Ebene umgewandelt haben. 6. Das werden wir nun ändern, indem wir die Ebenen-Eigenschaften von Registrierung öffnen und den Modus Führungs-Ebene aktivieren. Sie sollten die Ebene an dieser Stelle auch sperren und die Option ALS KONTUR ANZEIGEN aktivieren. 7. Erstellen Sie nun eine neue Ebene, die Sie Text nennen. 8. Im ersten Bild der Text-Ebene erstellen wir nun einen Textblock mit großer Schrift (etwa 40). Schreiben Sie nun so viel Text, wie in den Rahmen hineinpasst und achten Sie darauf, dass Sie den Rand nicht überschreiben (siehe Abbildung 11.8). 9. Testen Sie den Film und stellen Sie geg-Ebenenfalls die Option SCHLEIFE aus dem Menü STEUERUNG beim Abspielen aus.

248

Ebenen-Eigenschaften für visuelle Effekte

Abbildung 11.7: An dieser Stelle (Bild 30) soll zum ersten Mal der Rahmen erscheinen. Wir vergrößern ihn so weit, dass fast die ganze Bühne zu sehen ist. Dann wird er von außen nach innen eingeblendet.

Abbildung 11.8: Durch die Konturenansicht der Führungs-Ebene können wir den Text sehr genau formatieren, ohne die Ränder zu berühren.

249

Ebenen in Animationen verwenden

In der letzten Aufgabe haben wir eine Führungs-Ebene dazu verwendet, um einen gesperrten Bereich zu markieren. Das kann Ihnen später noch öfter von Nutzen sein, wenn Sie beispielsweise Schaltflächen erstellen, die sich stark vergrößern, wenn man mit der Maus darüber fährt oder wenn ein Menü aufklappen soll. In diesen Fällen wollen Sie wahrscheinlich nicht, dass andere Elemente dadurch verdeckt werden. Sie können dann einfach den größten Zustand einer Schaltfläche in eine Führungs-Ebene kopieren und schon wissen Sie immer, wo Sie noch freie Bahn haben und wo nicht.

Pfade Wenn Führungs-Ebenen schon nützlich sind, sind Pfade unverzichtbar! Eine Pfad-Ebene ist eigentlich eine normale Führungs-Ebene, die eine untergeordnete Ebene besitzt, welche sich im Modus Ausgerichtet befindet. Das Geniale ist, dass Sie in der Pfad-Ebene eine beliebige Linie zeichnen können und dann in der ausgerichteten Ebene einen Bewegungstween erstellen können, der genau der Linienform des Pfades folgt. Eine Pfad-Ebene wird (genau wie eine Führungs-Ebene) für das Publikum unsichtbar sein. Wer will auch schon vorher wissen, wie sich ein Objekt bewegt? Merken Sie sich bitte, dass für diese Technik zwei Ebenen benötigt werden: Die Pfad-Ebene und die ausgerichtete Ebene, die dem Pfad folgen soll.

Aufgabe: Verwenden Sie einen Pfad, um einen springenden Ball zu simulieren! 1. Zeichnen Sie in einer neuen Datei eine Kurve wie in Abbildung 11.9. Diesem Pfad soll der Ball später folgen. Sie können dazu gerade Linien zeichnen, die Sie verbiegen und dann zusammendocken. Sie sollten nur sicherstellen, dass es sich um eine durchgehende Linien handelt. 2. Öffnen Sie nun die Ebenen-Eigenschaften (per Doppelklick auf die Ebene). 3. Nennen Sie die Ebene Pfad und sperren Sie diese, damit Sie die Linie nicht weiter verändern können. Stellen Sie außerdem die Art der Ebene auf Führungs-Ebene. 4. Fügen Sie eine neue Ebene ein und nennen Sie diese Ball. 5. Im Normalfall wird die Ball-Ebene über der Pfad-Ebene liegen. Jetzt werden wir diese Ebene am Pfad ausrichten, damit sich der Ball genau über den Pfad bewegt. Es gibt zwei Anforderungen an eine ausgerichtete Ebene: Sie muss genau unter dem Pfad liegen und die Ebenen-Eigenschaft muss auf Ausgerichtet stehen. Die Anordnung der Ebene kann man verändern, indem man auf die Ebene klickt und sie bei gedrückter Maustaste verschiebt. Schieben Sie die Ball-Ebene also unter die Pfad-Ebene.

250

Ebenen-Eigenschaften für visuelle Effekte

Abbildung 11.9: Eine einfache Linie wird als Pfad für den Ball verwendet.

6. Sie haben nun nicht nur die Anordnung der Ebenen verändert, sondern zusätzlich noch die ehemalige Führungs-Ebene in eine echte Pfad-Ebene verwandelt (Das sieht man am Pfeil-Symbol neben dem Ebenennamen). Die beiden Ebenen werden nur noch durch eine gestrichelte Linie getrennt (siehe Abbildung 11.10), was Ihnen zeigen soll, dass die beiden enger verbunden sind als andere (denn die eine stellt ja den Pfad für die andere zur Verfügung). Vielleicht ist die letzte Aktion für Sie nicht so einleuchtend gewesen, oder Sie wollen nicht, dass Flash Ihnen die ganze Arbeit abnimmt und selbstständig die Ebenen-Eigenschaften anpasst. Deshalb können Sie den letzten Schritt mit BEARBEITEN / RÜCKGÄNGIG wieder zurücknehmen und einen anderen Weg einschlagen.

Abbildung 11.10: Die Pfad-Ebene hat ein eigenes Symbol erhalten und die BallEbene wurde verknüpft.

251

Ebenen in Animationen verwenden

7. Dieses Mal werden wir die Pfad-Ebene über die Ball-Ebene ziehen. Außer der Anordnung der Ebenen verändert sich jetzt nichts. Wir können aber auch nicht die Führungs-Ebene in eine Pfad-Ebene verwandeln (was wir im Endeffekt ja wollen), allerdings können wir die Ball-Ebene in den Ausgerichtet-Zustand versetzen, da sie sich jetzt unter der späteren Pfad-Ebene befindet. Öffnen Sie also per Doppelklick die Ebenen-Eigenschaften der Ball-Ebene und stellen Sie Ausgerichtet ein. 8. Jetzt werden wir die eigentliche Animation erstellen und den Ball direkt mit dem Pfad verknüpfen. Zeichnen Sie dazu in der Ball-Ebene einen Kreis im ersten Bild und wandeln Sie ihn in ein Symbol um. Nennen Sie es Bild des Balls. Fügen Sie nun in der gleichen Ebene bei Bild 50 ein Schlüsselbild ein. Beachten Sie, dass die Pfad-Ebene nicht so lange existiert. Fügen Sie dort im Bild 50 ein normales Bild ein ((F5)). Erzeugen Sie nun im ersten Bild der Ball-Ebene einen Bewegungstween. 9. Es gibt noch einen letzten Schritt, den Sie unternehmen müssen, um den Ball auf den richtigen Pfad zu bringen: Sie müssen in beiden Schlüsselbildern den Ball an den Pfad ankoppeln. Koppeln Sie also im ersten Bild die Mitte des Balls an das linke Ende des Pfades und im letzten Bild an das rechte Ende des Pfades. Testen Sie den Film. Der Ball wird dem Pfad von links nach rechts folgen. Die meiste Zeit ist bei dieser Aufgabe für die Anordnung von Ebenen draufgegangen. Wenn wir es noch einmal betrachten, haben wir nur einen Pfad gezeichnet und ein Symbol in einer anderen Ebene erstellt. Dann wurden die Ebenen verknüpft und das Symbol in zwei als Bewegungstween verbundenen Schlüsselbildern an die Enden des Pfades angekoppelt. (Hört sich leicht an, oder? Aber mehr haben wir nicht gemacht.) Lassen Sie uns schnell noch über eine andere Sache in Bezug auf Pfade sprechen: Das Bild-Bedienfeld eines Bewegungstweens enthält die Option AN PFAD AUSRICHTEN. Der Effekt, den Sie damit erreichen können ist, dass sich ein Objekt, welches einem Pfad folgt, immer in die Bewegungsrichtung dreht. Ändern Sie dazu die Form des Kreises ein wenig, um diesen Effekt auszuprobieren (bei einem runden Symbol kann man eine Drehung schlecht erkennen). Ich habe Ihnen bisher bewusst nichts von der Schaltfläche Pfad-Ebene hinzufügen gesagt, die sich neben der Schaltfläche Ebene einfügen befindet (siehe Abbildung 11.11), denn hier werden mehrere Schritte auf einmal erledigt. In der vorausgegangenen Übung sollten Sie aber mit den einzelnen Schritten genau vertraut gemacht werden, wofür sich die »Abkürzung« über die Schaltfläche nicht eignet. Wenn Sie beispielsweise schon den Ball in eine eigene Ebene gezeichnet haben, können Sie diese Ebene fokussieren und auf die Pfad-Ebene hinzufügen klicken. Nun wird automatisch über der Ball-Ebene eine PfadEbene erzeugt, die schon mit der unteren Ebene verknüpft ist. Die Ball-Ebene wird außerdem automatisch in den Ausgerichtet-Zustand versetzt.

252

Ebenen-Eigenschaften für visuelle Effekte

Abbildung 11.11: Mit der Schaltfläche Pfad-Ebene hinzufügen kann man mehrere Schritte auf einmal erledigen.

Maskieren Wenn Führungs-Ebenen nützlich und Pfade unverzichtbar sind, kann man Maskierungen ruhigen Gewissens als unglaublich bezeichnen! Es handelt sich wirklich um einen ganz anderen Effekt. Die einzige Gemeinsamkeit liegt darin, dass es sich bei einer Maskierung um eine Ebenen-Eigenschaft handelt, für die man mindestens zwei Ebenen benötigt. Der grafische Inhalt einer Maske gibt an, was von einer maskierten Ebene durchscheint. Es ist, als ob Sie die Löcher zeichnen würden, die angeben, wo man durch die Maske hindurchsehen kann. Die grundlegende Orientierung ist wie beim Gespann Pfad und ausgerichtete Ebene. Hier erzeugen Sie allerdings zuerst eine Ebene, die Sie über die Ebenen-Eigenschaften als Maske definieren. Danach stellen Sie die Maskiert-Option für die darunter liegende Ebene ein. Sie werden den Effekt aber erst sehen, wenn Sie den Film testen oder alle einbezogenen Ebenen sperren.

Aufgabe: Verwenden Sie eine Maskierung, um einen Scheinwerfer-Effekt zu erzeugen! 1. Lassen Sie uns zuerst den Scheinwerfer mit seiner Bewegung erstellen. Zeichnen Sie dazu in einer neuen Datei einen ausgefüllten Kreis, den Sie in ein FilmsequenzSymbol namens Spot umwandeln. 2. Nennen Sie die Ebene, in der sich der Spot befindet Spot-Bewegung. 3. Erzeugen Sie Schlüsselbilder in den Bildern 10, 20 und 30. Bewegen Sie den Spot in Bild 10 auf eine andere Position und in Bild 20 auf eine wiederum verschiedene Position. Lassen Sie Bild 1 und 30 identisch. 4. Erzeugen Sie in den Bildern 1, 10 und 20 je einen Bewegungstween. 5. Wechseln Sie nun in die Ebenen-Eigenschaften und stellen Sie das Verhalten der Ebene auf Maske um.

253

Ebenen in Animationen verwenden

6. Beobachten Sie, wie sich das Symbol neben dem Namen der Ebene in das MaskenSymbol verwandelt (siehe Abbildung 11.12). Sperren Sie diese Ebene, damit wir nicht versehentlich etwas ändern.

Abbildung 11.12: Unsere Masken-Ebene wird nun mit einem gesonderten Maskensymbol markiert.

7. Nun können wir darunter eine weitere Ebene einfügen, deren Verhalten wir auf Maskiert stellen. Fügen Sie nun eine neue Ebene ein, die im Normalfall oberhalb unserer Masken-Ebene erscheint. Das ist soweit noch akzeptabel. Nennen Sie die neue Ebene Gebäude. 8. Damit die neue Ebene maskiert wird, müssen wir sie zuerst unter die Masken-Ebene ziehen. Meist wird sie dabei schon in eine maskierte Ebene umgewandelt (siehe Abbildung 11.13). Man kann diese Einstellung natürlich auch von Hand über die EbenenEigenschaften vornehmen.

Abbildung 11.13: Die maskierte Ebene Gebäude erhält ebenfalls ein gesondertes Symbol.

9. Zeichnen Sie in der Gebäude-Ebene viele Rechtecke in verschiedenen Farben, um Gebäude zu simulieren. 10. Die Animation sollte schon funktionieren, wenn Sie den Film testen oder alle Ebenen sperren. Setzen Sie nun die Hintergrundfarbe des Filmes auf Schwarz (MODIFIZIEREN / FILM). 11. Auch wenn das jetzt schon gut aussieht, fehlt noch etwas: Es ist die Art, wie ein Scheinwerfer aussieht, wenn er auf leere Stellen trifft. Der schwarze Hintergrund ist einfach zu dunkel. Lassen Sie uns eine weitere Ebene mit einer abgeschwächten Version der Gebäude erzeugen, um die Animation glaubwürdiger zu machen. 12. Zuerst sollten Sie alle Rechtecke markieren und in ein Filmsequenz-Symbol namens Gebäudegrafik konvertieren (die Ebene muss dazu entsperrt sein).

254

Zusammenfassung

13. Erzeugen Sie eine neue Ebene, die Sie dunkle Gebäude nennen. 14. Ziehen Sie die neue Ebene unter die anderen. Diese Ebene soll aber nicht maskiert sein. Stellen Sie deshalb das Verhalten geg-Ebenenfalls in den Ebenen-Eigenschaften auf Normal. 15. Kopieren Sie die Gebäudegrafik mit (Strg)+(ª)+(V) an dieselbe Stelle in die neue Ebene. Verstecken Sie alle Ebenen bis auf dunkle Gebäude, damit wir sicher sein können, welche wir gerade bearbeiten. Stellen Sie nun über das Effekt-Bedienfeld die Helligkeit auf -40% ein. 16. Das sieht doch super aus, oder? Wir hätten die dunklen Gebäude nicht erstellen müssen, um mehr über den Maskeneffekt zu lernen, aber es verleiht der Animation einen viel glaubwürdigeren Eindruck. Es gibt einige Dinge, die man mit Masken nicht lösen kann. Es folgen einige Grenzen: Man kann nicht mehr als ein Symbol in einer Masken-Ebene verwenden. Wenn Sie beispielsweise zwei Kreise animieren wollen, stellen Sie sicher, dass diese per MODIFIZIEREN / TRENNEN bearbeitet worden sind. Außerdem kann man keine Pfade und Masken kombinieren. Es ist also nicht möglich, unseren springenden Ball als Maske für den Scheinwerfereffekt zu verwenden. Abschließend verhält sich ein Filmsequenz-Symbol wie ein Grafiksymbol, wenn es als Maske dient (was das genau heißt, werden wir in Kapitel 12 sehen). Wir haben gerade die Maske bewegt und so einen Spot simuliert. Manchmal macht der umgekehrte Weg aber auch Sinn. Stellen Sie sich das Innere eines Flugzeuges vor. Wenn Sie draußen Wolken vorbeiziehen lassen wollen, sollten Sie einfach die Maske des Fensters unbeweglich stehen lassen und die Wolken in der maskierten Ebene bewegen. Sicher würde das auch anders gehen, indem Sie beispielsweise das Innere des Flugzeuges so gestalten, dass alles aus Objekten besteht und nur das Fenster frei bleibt, aber mit einer Maskenkonstruktion können Sie viel schneller und effizienter arbeiten. Die Maskierung hat also unglaubliches Potenzial im Hinblick auf visuelle Effekte.

11.3 Zusammenfassung Wir haben eine Menge zum Thema Ebenen kennen gelernt. Solche Ebenen lassen sich für weit mehr einsetzen als das Anordnen von Objekten in verschiedenen Schichten. Eine wichtige Gegebenheit ist, dass man nur einen Bewegungstween pro Ebene erzeugen kann. Wenn Sie also mehr Animationen einfügen wollen, benötigen Sie weitere Ebenen.

255

Ebenen in Animationen verwenden

Außerdem haben wir Ebenen-Eigenschaften besprochen. Wir haben gelernt, wie man einzelne oder alle Ebenen ausblendet, sperrt oder als Kontur anzeigt. Diese Eigenschaften kann man direkt über die Zeitleiste steuern. Über Führungs-Ebenen kann man Inhalte für die Konstruktion eines Films anlegen, die aber im fertigen Film nicht erscheinen. Wir haben Objekte an Pfaden entlang bewegt und zum Schluss eine Maske erstellt, die bestimmte Teile einer maskierten Ebene sichtbar macht oder versteckt.

11.4 Workshop F&A F

Ich habe eine Ebene als Maske und eine als maskierte Ebene definiert. Wenn ich nun eine neue Ebene einfüge wird diese automatisch zu einer maskierten Ebene. Sobald ich diese aber in eine normale Ebene umwandle, wird auch die andere maskierte Ebene normal. Was passiert hier? A

F

Warum ist der Modus, den ich meiner Ebene zuweisen will, deaktiviert? A

F

Das hängt davon ab, welchen Modus Sie Ihrer Ebene zuweisen wollen. Sie können beispielsweise keine Ebene auf den Status Maskiert setzen, wenn die Ebene darüber keine Maske ist. Ebenso können Ebenen nicht als Ausgerichtet gekennzeichnet werden, wenn sich in der Ebene darüber nicht ein Pfad befindet.

Ich habe einen Pfad erstellt und einen 40-Bild-Bewegungstween in der ausgerichteten Ebene erzeugt. Wenn ich versuche, in Bild 40 das zu bewegende Objekt an den Pfad anzukoppeln, fehlt der Pfad. Warum ist das so? A

256

Für den Maskierungseffekt sind zwei verbundene Ebenen (eine Maske und eine maskierte Ebene) nötig, wobei die Maske über der maskierten Ebene sein muss. Wenn sich Ihre neue Ebene nun zwischen den beiden alten Ebenen befindet, wird sie logischerweise zu einer maskierten Ebene und bei einer Umwandlung zu einer normalen Ebene ist die zweite maskierte Ebene nicht mehr direkt unter der Maske. Das hat zur Folge, dass auch diese Ebene normalisiert wird. Lösen Sie so ein Problem einfach, indem Sie die zu normalisierende Ebene über die Maske ziehen.

Wahrscheinlich lebt der Pfad nicht so lang wie Ihr Bewegungstween. Erzeugen Sie in der Pfad-Ebene ein Bild an (in Ihrem Fall) Position 40 und Sie werden den Pfad wieder sehen.

Workshop

Übungsaufgaben 1. Wenn Sie etwas in eine Masken-Ebene zeichnen, aber der Inhalt der maskierten Ebene unverändert bleibt, bis Sie den Film testen, was ist dann das Problem? a. Es gibt kein Problem. Man kann den Effekt nur sehen, wenn man den Film testet. b. Sie müssen die maskierte Ebene verstecken. c. Sie müssen beide Ebenen sperren. 2. Wie viele Ebenen kann man mit einer Masken-Ebene maskieren? a. Eine. Wenn Sie mehrere Ebenen maskieren wollen, benötigen Sie für jede Ebene eine eigene Maske. b. So viele Sie wollen c. Es ist andersherum: Sie können viele Masken für eine maskierte Ebene erzeugen. 3. Wo ist die Stelle, in der Effizienz (wie bei der Verwendung der Bibliothek) keine Rolle spielt? a. Nirgendwo in Flash, denn Sie sollte immer effizient sein b. In Führungs-Ebenen, da diese nicht in den fertigen Film exportiert werden c. In versteckten Ebenen, da diese versteckt sind

Übungen 1. Versuchen Sie sich einmal an folgender Masken-Aufgabe: Zeichnen Sie eine Maske, die zwei Fenster darstellt. Die maskierte Ebene soll Wolken enthalten, die an den Fenstern vorüberziehen. Denken Sie daran, dass Sie nur ein Symbol in der MaskenEbene verwenden dürfen! 2. Versuchen Sie eine Kreisbewegung als Bewegungstween zu realisieren. Stellen Sie dazu einen Pfad her, der einer Kreislinie entspricht. Dabei gibt es aber ein Problem: Wenn das zu bewegende Objekt an der gleichen Stelle startet, an der es auch ankommen soll, wird ein Bewegungstween nicht funktionieren. Trennen Sie deshalb ein sehr kleines Stück aus der Kreislinie heraus, damit Sie zwei Enden erhalten, an die Sie das zu bewegende Objekt andocken können.

257

Animationen mit Filmsequenzen und Grafik-Symbolen

2 1

Animationen mit Filmsequenzen und Grafik-Symbolen

Wenn Sie sehen, was man mit Filmsequenz-Symbolen machen kann, werden Sie erstaunt sein. Sie können innerhalb einer Filmsequenz eine Animation erzeugen und das Symbol wiederum animieren (eine doppelt animierte Animation sozusagen). Damit können Sie beispielsweise die Filmsequenz eines drehenden Rades entwerfen und das gesamte drehende Rad über die Bühne bewegen. Mit Symbolen allgemein kennen Sie sich ja schon aus, denn wir haben im fünften Kapitel bereits die Grundlagen erlernt. Der wohl größte Vorteil von Symbolen ist, dass man nur ein Master-Symbol in der Bibliothek hat und so viele Instanzen verwenden kann, wie man will, ohne die Dateigröße massiv zu verändern. Sie sollten sich aber auch an Kapitel 8 erinnern, in dem wir uns mit Bewegungstweens beschäftigt haben. Hier wurde gesagt, dass jedes Objekt, das Sie bewegen wollen, ein Symbol sein muss. Sie haben sicher schon bemerkt, dass Flash Sie immer fragt, welche Art von Symbol Sie erstellen wollen, wenn Sie eine Grafik konvertieren. Mit Schaltflächen werden wir uns aber erst im nächsten Kapitel beschäftigen. Dafür gehen wir jetzt auf Filmsequenzen und Grafik-Symbole ein. Sie werden also 쐽

lernen, wie man Filmsequenzen erstellt und anwendet,

쐽

sehen, dass Filmsequenzen ihre eigene, unabhängige Zeitlinie mitbringen,

쐽

die fundamentalen Unterschiede zwischen Filmsequenzen und Grafik-Symbolen kennen lernen und

쐽

herausfinden, dass Filmsequenzen adressierbar sind.

12.1 Das Verhalten von Filmsequenzen Viele Leute nehmen fälschlicherweise an, dass Grafik-Symbole nur ein Bild und Filmsequenzen mehrere Bilder enthalten. Sicherlich kann man auf diese Weise arbeiten, aber es geht noch mehr. Nehmen wir einmal an, Sie zeichnen ein Grafik-Symbol eines Rades (einen Kreis mit Speichen) und fügen dieses in ein Filmsequenz-Symbol ein, in dem das Rad gedreht wird. Wenn Sie nun ein Auto erzeugen, das zwei solche Räder hat, ist das Auto selbst wieder ein Grafik-Symbol, da es ja nur ein Bild besitzt. Trotzdem handelt es sich um eine Animation. Verzweifeln Sie nicht, wenn sich das jetzt verwirrend anhört, denn wir werden das noch in einer Übung durchspielen. Sie sollten nur schon einmal gehört haben, dass Sie nicht nur dann an eine Filmsequenz denken müssen, wenn das Symbol mehrere Bilder besitzt.

260

Das Verhalten von Filmsequenzen

Eine Filmsequenz erstellen Das Erstellen einer Filmsequenz ist vergleichbar mit dem Anlegen eines Symbols. Zuerst erstellen wir eine Animation innerhalb der Filmsequenz. Wenn wir die Filmsequenz dann mit einem Bewegungstween versehen, wird sich die gesamte Animation mitbewegen. Hier werden wir gleich ein Rad zeichnen und eine Instanz davon verwenden, um ein drehendes Rad zu erzeugen. Das wiederum binden wir zweimal in ein Auto-Symbol ein, was sich dann mit drehenden Rädern über den Bildschirm bewegen soll.

Aufgabe: Verwenden Sie eine Filmsequenz, um ein Rad zu drehen! 1. Zeichnen Sie in einer neuen Datei einen Kreis, der durch mehrere Linien geteilt wird. Zeichnen Sie die Linien bitte nicht genau symmetrisch, damit wir später gut erkennen können, ob sich unser Rad auch dreht (siehe Abbildung 12.1). Wählen Sie die gesamte Form aus und konvertieren Sie diese in ein Filmsequenz-Symbol, das Sie Rad nennen.

Abbildung 12.1: Diesem Rad kann man gut ansehen, dass es sich dreht.

2. Wählen Sie nun die Instanz auf dem Bildschirm aus und konvertieren Sie diese erneut in ein Filmsequenz-Symbol (das hört sich jetzt doppelt gemoppelt an, ist es aber nicht, wie Sie gleich sehen werden). Nennen Sie das neue Symbol drehendes Rad. 3. Gehen Sie nun in das Master-Symbol von drehendes Rad. Hier finden Sie eine Instanz von Rad vor. 4. Jetzt erstellen wir einen einfachen Bewegungstween (und das ist die Auflösung aus Punkt 2, denn man braucht ein Symbol, um einen Bewegungstween zu erzeugen). Klicken Sie also auf Bild 20 und fügen Sie ein Schlüsselbild ein. Stellen Sie im ersten Bild einen Bewegungstween ein und die Option Drehen im Bild-Bedienfeld auf UZS mit dem Wert 1. 5. Kehren Sie in die Szene zurück. Sie finden eine Instanz von drehendes Rad vor, das sich aber nicht dreht. Erst wenn Sie den Film testen, können Sie das erkennen.

261

Animationen mit Filmsequenzen und Grafik-Symbolen

6. Erzeugen Sie nun eine weitere Instanz von drehendes Rad, indem Sie das Symbol erneut aus der Bibliothek auf die Bühne ziehen. Positionieren Sie die Symbole so nebeneinander, dass Sie mit dem Pinsel-Werkzeug nur noch die Form eines Autos außen herum zeichnen müssen. Wählen Sie nun alles aus und konvertieren Sie es in ein Filmsequenz-Symbol namens Auto. 7. Erzeugen Sie nun ein Schlüsselbild in Bild 30 und einen Bewegungstween, in dem das Auto von einer Seite der Bühne zur anderen fährt. Testen Sie den Film, um das Ergebnis zu sehen (beim Schrubben werden sich die Räder nämlich nicht drehen). Wenn Sie sich mit der Verschachtelung von Symbolen nicht gut auskennen, kann diese Übung ein wenig verwirrend sein. Lesen Sie gegebenenfalls noch einmal in Kapitel 5 nach.

Vergleich zwischen Filmsequenz-Symbolen und GrafikSymbolen Es macht keinen Unterschied, ob Ihr Master-Symbol ein Grafik- oder Filmsequenz-Symbol ist. Das wirkt sich nur auf das Standardverhalten aus, wenn man eine Instanz aus der Bibliothek auf die Bühne zieht. Was zählt, ist das Verhalten der Instanz auf der Bühne. Wenn Sie eine Filmsequenz auf die Bühne ziehen, wird sie sich standardmäßig wie eine Filmsequenz verhalten. Das kann man aber ändern, indem man das Instanz-Bedienfeld verwendet und bei Verhalten den Wert Grafik einstellt (siehe Abbildung 12.2). Was zählt, ist das Verhalten der Instanz. Wenn man ein Symbol, das aus mehreren Bildern besteht, als Grafik interpretieren lässt, gibt es die zusätzliche Option Erstes im Instanz-Bedienfeld. Hier kann man einstellen, welches Bild (im Symbol) zuerst angezeigt werden soll. Außerdem können Sie im Auswahlfeld darüber zwischen Schleife, Einmal abspielen und Einzelbild wählen, was wohl keiner weiteren Erklärung bedarf. Wenn Sie beispielweise unsere beiden Räder nehmen, können Sie eines davon bei Bild 10 starten lassen. Somit werden sich beide Räder komplett drehen, aber das erste hat einen Vorsprung von neun Bildern. Wenn man einem Symbol das Verhalten Grafik zuweist, wird es (wenn es mehrere Bilder enthält) das erste Bild im ersten Bild der Hauptzeitlinie anzeigen, das zweite im zweiten Bild und so weiter. Wenn wir nur über fünf Bilder in der Hauptanimation verfügen, wird beim letzten Bild das Bild Nummer 5 des Grafik-Symbols angezeigt. Danach stoppt das Symbol. Bei Filmsequenzen sieht das anders aus. Hier würde sich unser Rad weiterdrehen. Stellen Sie sich das so vor, als ob eine Filmsequenz nach dem Takt eines eigenen Trommlers marschiert (das heißt aber nicht, dass Sie hier eine andere Bildwiederholrate einstellen können). Dabei ist es egal, wie viele Bilder die Hauptanimation hat. Das Rad wird sich immer weiter drehen, bis die Wiedergabe beendet ist.

262

Das Verhalten von Filmsequenzen

Abbildung 12.2: Eine Instanz kann (unabhängig vom Verhalten des Master-Symbols) jedes beliebige Verhalten besitzen, das Sie im Instanz-Bedienfeld auswählen.

Aufgabe: Vergleichen Sie ein Grafik-Symbol mit einem FilmsequenzSymbol! 1. Wählen Sie in einer neuen Datei EINFÜGEN / NEUES SYMBOL, nennen es Zahlen und wählen Filmsequenz als Verhalten. Beachten Sie, dass Sie nach dem Klick auf OK in der Masterversion des neuen Symbols landen. 2. Schreiben Sie in Bild 1 von Zahlen mit dem Text-Werkzeug eine 1 in die Nähe der Bildschirmmitte. Fügen Sie dann ein Schlüsselbild in Bild 2 ein und ändern Sie die Zahl in eine 2. Fahren Sie so bis zum Bild 10 fort. 3. Kehren Sie zum Hauptbildschirm zurück und stellen Sie sicher, dass Sie sich nicht mehr in Zahlen befinden. Ziehen Sie dann eine Instanz von Zahlen aus der Bibliothek auf die Bühne. Testen Sie den Film, denn nur so können Sie eine Filmsequenz ausprobieren. Es werden alle zehn Zahlen durchlaufen, obwohl unsere Hauptzeitlinie nur ein Bild lang ist. 4. Fügen Sie (in der Szene, nicht im Symbol) ein Bild bei Bild 5 ein ((F5)). Damit verlängern Sie lediglich den Film um ein paar Bilder. Testen Sie den Film erneut und Sie werden keinen Unterschied feststellen. 5. Ziehen Sie eine weitere Instanz der Filmsequenz Zahlen auf die Bühne. Stellen Sie nur für diese Instanz das Verhalten auf Grafik ein. (Das geht über das Instanz-Bedienfeld.) Stellen Sie Außerdem die Option der GRAFIK-INSTANZ auf Schleife. Testen Sie den Film nun erneut.

263

Animationen mit Filmsequenzen und Grafik-Symbolen

6. Wenn die Zahlen zu schnell laufen, um einen Unterschied zu sehen, wählen Sie bitte eine niedrigere Bildrate. Sie werden sehen, dass die GRAFIK-INSTANZ nur die Zahlen 1 bis 5 anzeigt. Die Filmsequenz wiederholt dagegen alle zehn Bilder. Wenn Sie die Wiedergabe beendet haben, können Sie die Schrubbertechnik verwenden und werden sehen, dass Sie im Gegensatz zur Filmsequenz bei einem Grafik-Symbol eine Vorschau erhalten. 7. Probieren wir noch eine letzte Sache aus: Wenn Sie den Film abspielen, wählen Sie einmal STEUERUNG / STOPP, wodurch der Abspielkopf nicht mehr weiterläuft. Die Filmsequenz wiederholt sich weiter, während die Grafik anhält. Wie Sie sehen, ist ein Grafik-Symbol fest an die Zeitlinie gekoppelt, während eine Filmsequenz über eine eigene Zeitlinie verfügt. Es gibt einige weitere Punkte, denen man Beachtung schenken sollte: Zuerst einmal wiederholen sich Filmsequenzen ständig. Es gibt keine Option Einmal abspielen. (Im 14. Kapitel werden wir allerdings ein »stoppe beim letzten Bild«-ActionScript kennen lernen.) Deshalb bereiten Filmsequenzen zusätzliche Arbeit. Der scheinbare Vorteil, dass man Grafik-Symbole (wegen ihrer starken Verknüpfung zur Hauptzeitlinie) mit der Schrubbertechnik beim Erstellen eines Films genau im Auge hat, ist eigentlich nicht zu vergleichen mit dem Vorteil von Filmsequenzen: Man kann diese nämlich, wann immer man es will, über ActionScript anhalten und weiterspielen lassen (weshalb eine Vorschau unmöglich ist). Testen Sie deshalb beim Einsatz von Filmsequenzen den Film, um beurteilen zu können, was der Betrachter später sieht.

Wann man Filmsequenzen verwenden sollte Sie sollten Filmsequenzen möglichst für alle Symbole verwenden, die Grafik enthalten (auch wenn sie nur aus einem Bild bestehen). Wir werden später sehen, dass man mit Filmsequenzen nicht so viel Speicher belegt, wie mit Grafik-Symbolen. Allerdings gibt es trotzdem einige Gründe, um Grafik-Symbole zu verwenden: Ich empfehle Ihnen Symbole mit dem Verhalten Grafik, wenn Sie unbedingt eine Vorschau beim Erstellen des Films benötigen. Wenn Sie in so einem Fall Filmsequenzen (ohne Vorschaumöglichkeit) einsetzen, wird die Arbeit schnell sehr nervig. Nehmen wir dazu wieder die Lippensynchronität. Hier wären Filmsequenzen nicht anzuraten. Außerdem können Sie ruhig mit Grafik-Symbolen arbeiten, wenn Sie definitiv keine Wiederholung der Symbol-Sequenz benötigen, da die Einbindung eines Scripts, welches die Schleife einer Filmsequenz stoppen soll, definitiv mehr Arbeitsaufwand bedeutet. Ich will Ihnen aber nicht vorenthalten, dass es mit Grafik-Symbolen wegen der Ankopplung an die -Hauptzeitlinie auch Probleme geben kann. Das ist immer dann der Fall, wenn die Anzahl der verwendeten Bilder nicht übereinstimmt. Nehmen wir einmal an, wir haben ein Symbol mit einem drehenden Rad (wie in der ersten Aufgabe), das sich über 20

264

Die Feinheiten von Filmsequenzen

Bilder einmal um die eigene Achse dreht. Wenn dieses Symbol sich im Grafik-Modus befindet, wird es sich in einer Auto-Animation mit nur einem Bild nicht drehen. In einer Auto-Animation mit zehn Bildern schafft es gerade einmal eine halbe Drehung und wird (bei einer Schleifenwiedergabe der Animation) eine halbe Drehung überspringen. Wenn das Rad-Symbol aber als Filmsequenz definiert wurde, dreht sich das Rad unabhängig von der Länge der Auto-Animation gleichmäßig immer weiter um die eigene Achse. Wenn Sie allerdings verschachtelte Symbolgebilde (Symbole in Symbolen) verwenden oder Bewegungstweening einsetzen, empfiehlt sich meist die Verwendung von Filmsequenzen, da diese in ihrer eigenen Zeitlinie animieren und man nicht auf die in der Hauptzeitlinie zur Verfügung stehende Zeit achten muss.

12.2 Die Feinheiten von Filmsequenzen Wir haben bisher die größten Unterschiede zwischen Filmsequenzen und Grafik-Symbolen besprochen – die Zeitlinie einer Filmsequenz ist unabhängig. Allerdings gibt es da noch mehr: Filmsequenzen sind nämlich adressierbar. So können Sie bestimmte Aktionen gezielt auf einzelne Instanzen anwenden. Auf diese Weise ist es beispielsweise möglich, bei zwei Instanzen der gleichen Filmsequenz die eine anzuhalten, während die andere weiter animiert. Dieses Konzept werden wir in Kapitel 14 vertiefen.

Adressierbare Filmsequenz-Instanzen Erinnern Sie sich, dass man im Instanz-Bedienfeld einen Namen eingeben konnte, der die Filmsequenz eindeutig bezeichnet (siehe Abbildung 12.3). Warum sollte man einer Instanz einen Namen geben, wenn das Symbol in der Bibliothek doch schon einen hat? Die Antwort steckt schon in der Frage, denn eine Instanz ist etwas anderes als ein Symbol (das ja mehrere Instanzen erzeugen kann). Nur so kann man beispielsweise zwei Instanzen des gleichen Symbols unterschiedlich ansprechen.

Abbildung 12.3: Wenn man das Verhalten im Instanz-Bedienfeld auf Filmsequenz stellt, erhält man die Möglichkeit, die Instanz zu benennen.

265

Animationen mit Filmsequenzen und Grafik-Symbolen

Erinnern Sie sich daran, wie wir die Zeitlinie in der letzten Aufgabe angehalten haben? So ein Stopp funktioniert, als ob man »Stopp!« in eine Menge rufen würde. Anders sieht es beim Anhalten einer einzelnen Instanz namens Inst_1 aus: »Hey! Inst_1, Du stoppst jetzt!« Das funktioniert natürlich nur, wenn man der Instanz zuvor auch einen Namen gegeben hat.

Einsparungen in der Dateigröße Filmsequenzen sind kleiner als Grafik-Symbole (das gilt besonders für Filmsequenzen in Filmsequenzen). Das kann man mit einem simplen Test beweisen: Zeichnen Sie eine Linie und wandeln Sie diese in eine Filmsequenz um. Erzeugen Sie nun mit vier Linieninstanzen eine Quadratfilmsequenz, daraus eine Sequenz mit vier Quadraten und so weiter. Wenn Sie nun das gleiche mit Grafik-Symbolen erzeugen, wird die Datei genauso aussehen. Exportieren Sie die beiden Möglichkeiten aber, werden Sie feststellen, dass die Grafik-Symbole insgesamt zehnmal so groß sind wie die Filmsequenzen. Das ist ein Unterschied zwischen einem Film der zehn Sekunden zum Downloaden braucht und einem, der fast zwei Minuten benötigt! Flash ermöglicht eine Vorschau beim Schrubben, wenn man ein Grafik-Symbol verwendet. Und genau das ist schon der Grund, warum die Datei größer wird. Bei Grafik-Symbolen muss sich Flash genau merken, wann ein Symbol wie aussieht, bei Filmsequenzen nicht, da sie ja dynamisch gesteuert werden (das haben wir noch nicht gesehen, werden wir aber nachholen). Wenn man einen Film exportiert, werden Grafik-Symbole vorgerendert. (Flash rechnet dann schon aus, wie die Grafik später aussehen soll.) Der Film wird dadurch flüssiger ablaufen, aber bei Symbolen in Symbolen (und so weiter) führt das schnell zu einer viel größeren Datei. Sie sollten also gelernt haben, dass man möglichst immer Filmsequenzen verwendet, es sei denn, Sie benötigen unbedingt einen der Vorteile von Grafik-Symbolen.

12.3 Zusammenfassung In diesem Kapitel haben wir nicht viel Neues besprochen. Sie kannten bereits zwei wichtige Techniken: das Verschachteln von Symbolen und wie man Bewegungstweens erstellt. Inzwischen wissen Sie aber auch, wie man Filmsequenzen einsetzt und welche Vor- und Nachteile sie gegenüber Grafik-Symbolen haben.

266

Workshop

Man kann die Schrubbertechnik bei Filmsequenzen nicht anwenden – zumindest wird man bei der Filmsequenz keine Animation sehen, bis man den Film testet. In manchen Fällen (zum Beispiel Lippensynchronisation) bietet sich deshalb die Verwendung von Grafik-Symbolen an. Wenn Sie einmal ein paar Tests bezüglich der Dateigröße gemacht haben, werden Sie feststellen, dass Filmsequenzen wesentlich kleiner ausfallen. Auf lange Sicht kann ich Ihnen versprechen, dass Sie Filmsequenzen wegen ihrer Adressierbarkeit zu schätzen lernen werden.

12.4 Workshop F&A F

Ich habe die Aufgabe mit den drehenden Autorädern durchgeführt. Am Anfang habe ich vergessen, dem Symbol Drehendes Rad das Verhalten Filmsequenz zuzuweisen. Deshalb habe ich in der Bibliothek dem Symbol dieses Verhalten zugewiesen, um den Fehler zu beheben. Allerdings läuft die Animation immer noch nicht. Warum? A

F

Ich kann die Schleifen-Option im Instanz-Bedienfeld nicht mehr finden. Ich schwöre, dass ich sie zuvor schon gesehen habe. A

F

Wenn Sie das Verhalten des Mastersymbols verändern, bezieht sich diese Änderung nur auf Symbole, die ab diesem Zeitpunkt auf die Bühne gezogen werden. Bereits existierende Instanzen sind von der Änderung nicht betroffen. Wenn Sie den Fehler beheben möchten, sollten Sie jede Instanz von Drehendes Rad auswählen (im Auto-Symbol) und dann über das Instanz-Bedienfeld das Verhalten auf Filmsequenz umstellen.

Sie haben diese Option bestimmt schon einmal gesehen, allerdings nicht bei einer Instanz einer Filmsequenz. Die Schleifen-Option steht nur bei Instanzen von Grafik-Symbolen zur Verfügung.

Ich habe in diesem Buch mehrfach »Instanz, deren Verhalten Grafik ist« gelesen. Warum sagen Sie nicht einfach »Grafik-Symbol«? A

Da gibt es einen Unterschied: Mit einem Grafik-Symbol ist meist das Master-Symbol gemeint. Allerdings behalten nicht alle Instanzen so eines Grafik-Symbols immer ihr Grafik-Verhalten, denn Sie können es ja über das Instanz-Bedienfeld umändern.

267

Animationen mit Filmsequenzen und Grafik-Symbolen

Übungsaufgaben 1. Wie viele Bilder kann man in einem Grafik-Symbol und wie viele in einer Filmsequenz verwenden? a. Eines in Grafik-Symbolen und so viele man will in Filmsequenzen b. Jeweils so viele man will c. Das ist bei beiden in Master-Symbolen egal. Wenn man allerdings eine Instanz mit Grafik-Verhalten hat, darf man nur ein Bild verwenden, wenn sie sich aber als Filmsequenz verhält, ist das egal. 2. Was passiert, wenn man zwei Symbole in der Bibliothek gleich benennt, und was, wenn man so bei Filmsequenz-Instanzen verfährt? a. Das kann man beides nicht. b. Man kann Symbole nicht gleich benennen. Bei Instanzen ist das aber kein Problem. c. Man kann sowohl Instanzen als auch Symbole gleich benennen, allerdings wäre das keine gute Idee, da Flash etwas verwechseln könnte. 3. Wenn Filmsequenzen doch weniger Speicher belegen, gibt es dann überhaupt einen Grund, Grafik-Symbole einzusetzen? a. Nein, man sollte sie immer vermeiden. b. Ja, denn mit Grafik-Symbolen kann man Grafiken besser mit der Zeitlinie koordinieren und sie machen oft einen Film flüssiger. c. Ja, denn Grafik-Symbole sind besser für die Augen, da sie vorgerendert werden.

Übungen 1. Auch wenn wir bisher oft schlecht über Grafik-Symbole gesprochen haben, gebe ich Ihnen nun eine Übung mit auf den Weg, in der sie absolut notwendig sind: Erstellen Sie die Animation einer Dampflok. Erzeugen Sie zunächst ein Grafik-Symbol Schornstein. Animieren Sie diesen so, dass er normal beginnt und sich dann bis Bild 5 per Formtween ein wenig zusammenzieht, um dort wieder in seine Ursprungsform zurückzukehren, bis er in Bild 6 ein wenig größer als zuvor ist und eine Rauchwolke auspustet. In den Bildern 7 bis 10 ist er dann wieder normal groß. Fügen Sie den Schornstein nun in ein Grafik-Symbol Lok ein und stellen Sie sicher, dass beide die gleiche Anzahl an Bildern besitzen. Bringen Sie die Lok nun auf die Bühne und bewegen Sie das Gefährt per Bewegungstween. Beim Schrubben können Sie nun genau bestimmen, wo Wolken ausgestoßen werden. Fügen Sie genau an diesen Stellen Grafik-Symbol-Instanzen einer Wolke ein, die Sie per Bewegungstween auf 0% Alpha ausblenden. Viel Spaß!

268

Workshop

2. Nun erstellen wir ein Riesenrad. Zuerst sollten Sie eine Passagiergondel zeichnen, die Sie in eine Filmsequenz umwandeln, um sie animieren zu lassen. Verwenden Sie einen Pfad, um die Gondel in etwa 28 Bildern eine volle Umdrehung fahren zu lassen. Platzieren Sie nun 10 Gondeln in einer 36-Bild Filmsequenz namens Riesenrad und legen Sie für jede Instanz das Startbild fest. Lassen Sie die ersten Gondel in Bild 3 starten, die zweite in Bild 4, die dritte in Bild 7 und so weiter. Am Ende haben Sie zehn gleich rotierende Gondeln, die allerdings an unterschiedlichen Stellen starten.

269

Schaltflächen erstellen, auf die ein Anwender klicken kann

3 1

Schaltflächen erstellen, auf die ein Anwender klicken kann

Da Sie nun wissen, wie man einfache Grafiken und Animationen in Flash erzeugt, können wir uns einem sehr interessanten Thema zuwenden – Interaktivität. Eine gradlinige Animation kann schon sehr machtvoll sein, allerdings wird der Anwender noch mehr in den Bann gezogen, wenn er selbst eingreifen kann. Er wird zu einem Teil des Films. In diesem und dem nächsten Kapitel werden Sie lernen, wie man einem Film Interaktivität verleiht. Die gradlinigste Art, solche Interaktivität zu erzeugen, ist das Einfügen von Schaltflächen. So könnte man beispielsweise den Film als Anwender stoppen und weiterspielen lassen. Oft wird auch das Überspringen einer einleitenden Animation per Knopfdruck realisiert. Mit Flash kann man sehr außergewöhnliche Schaltflächen in allen Formen erzeugen. Zusätzlich kann man schöne visuelle sowie akustische Effekte einbinden. In diesem Kapitel lernen Sie, die sichtbaren Elemente der Schaltflächen anzuwenden, und im nächsten Kapitel werden die Schaltflächen auch etwas auslösen. Es gibt viele Möglichkeiten, wie man Schaltflächen einsetzen kann. In diesem Kapitel werden Sie 쐽 쐽

eine einfache Schaltfläche erschaffen, Schaltflächen mit mehreren Zuständen erzeugen, die einen Drücken- und Darüber-Zustand besitzen,

쐽

Schaltflächen erzeugen, die fortgeschrittene Funktionen (animierte Zustände und Sound-Effekte) besitzen,

쐽

genau festlegen, welcher Bereich einer Schaltfläche angeklickt werden kann, und lernen, wie man unsichtbare Schaltflächen erzeugt. Die Zustände einer Schaltfläche sind die optisch anderen Schaltflächen, die der Anwender sieht, wenn er mit der Schaltfläche interagiert. Die meisten Dialoge in Flash enthalten eine OK-Schaltfläche. Sie besitzt einen Drücken-Zustand, der sichtbar wird, wenn der Anwender auf OK klickt. Dieser Zustand ist optisch leicht anders als der normale Auf-Zustand, in dem sich eine Schaltfläche befindet, wenn sie nicht angeklickt wird und sich auch nicht der Mauszeiger darüber befindet (Darüber-Zustand).

13.1 Eine Schaltfläche erstellen Immer, wenn Sie ein Symbol erzeugen, müssen Sie das Verhalten als Filmsequenz, Grafik oder aber als Schaltfläche definieren. Filmsequenzen und Grafik-Symbole haben wir bereits intensiv besprochen. Wenn man aber eine Schaltfläche erzeugen will, braucht man eigentlich nur die Option Schaltfläche aktivieren. Schauen wir uns das trotzdem im Detail an:

272

Eine Schaltfläche erstellen

Aufgabe: Erstellen Sie eine ganz einfache Schaltfläche! 1. Zeichnen Sie in einer neuen Datei ein Oval oder ein Rechteck, das später eine Schaltfläche werden soll. 2. Wählen Sie mit dem Pfeil-Werkzeug die gesamte Form aus. 3. Konvertieren Sie die Auswahl in ein Symbol (EINFÜGEN / IN SYMBOL KONVERTIEREN). 4. Nennen Sie Ihr Symbol Meine Schaltfläche und wählen Sie die Option Schaltfläche aus. 5. Testen Sie nun den Film und fahren Sie mit der Maus über Ihre Schaltfläche. Sie werden feststellen, dass sich der Mauszeiger in eine Hand mit ausgestrecktem Zeigefinger verwandelt (siehe Abbildung 13.1). Sie können die Wiedergabe beenden, aber lassen Sie bitte die Quell-Datei geöffnet, da wir damit in der nächsten Aufgabe noch weiter arbeiten werden.

Abbildung 13.1: Jede beliebige Form kann als Schaltfläche dienen. Der Mauszeiger verändert sich, wenn man ihn über eine Schaltfläche bewegt.

Das war doch ganz einfach, oder? Wir haben hier eine Schaltfläche erstellt, die aber in zwei Punkten wahrscheinlich nicht Ihren Erwartungen entspricht, denn sie sieht nicht aus wie eine Schaltfläche (mit verschiedenen Zuständen) und sie verhält sich nicht so, da noch nichts passiert, wenn man darauf klickt. Den zweiten Punkt (das Ausführen von Aktionen) werden wir im nächsten Kapitel behandeln, allerdings sollten wir jetzt schon einmal das Aussehen der Schaltfläche verbessern, indem wir einen Darüber- und einen DrückenZustand hinzufügen.

Aufgabe: Fügen Sie mehrere Zustände zu Ihrer einfachen Schaltfläche hinzu! 1. Doppelklicken Sie auf die Instanz Ihrer Schaltfläche aus der Datei der vorherigen Aufgabe. Sie gelangen in das Master-Symbol der Schaltfläche. Nebenbei gesagt: wenn Sie auch im Bearbeitungsmodus von Flash immer noch das Hand-Symbol erhalten, sobald Sie den Mauszeiger über die Schaltfläche bewegen, sollten Sie die Option STEUERUNG / SCHALTFLÄCHEN AKTIVIEREN ausschalten. 2. Da wir uns nun im Master-Symbol von Meine Schaltfläche befinden, werden Sie feststellen, dass es hier nur vier Bilder gibt – und anstelle von Nummern sind sie mit den Worten Auf, Darüber, Drücken und Aktiv gekennzeichnet (siehe Abbildung 13.2). Man

273

Schaltflächen erstellen, auf die ein Anwender klicken kann

kann diese Bilder mit ihren Nummern (1-4) oder den angegebenen Zustandsnamen bezeichnen. Man zeichnet in jedes Zustandsbild, wie die Schaltfläche im dazugehörigen Zustand aussehen soll. Im Auf-Zustand wird schon angezeigt, wie die Schaltfläche in Normalfall aussehen soll. Der Auf-Zustand definiert, wie die Schaltfläche im Normalfall aussehen soll. Im Darüber-Zustand kann man sehen, wie sie aussieht, wenn der Betrachter mit dem Mauszeiger darüber fährt. Der Drücken-Zustand wird aktiviert, wenn man auf die Schaltfläche klickt und der Aktiv-Zustand gibt an, in welchem Bereich überhaupt geklickt werden kann, um den Zustand zu wechseln.

Abbildung 13.2: Im Master-Symbol einer Schaltfläche befinden sich vier Bilder, die mit den Zustandsnamen gekennzeichnet sind.

3. Nun wollen wir den Darüber-Zustand neu definieren. Wählen Sie ihn dazu aus, indem Sie in der Zeitleiste unter das Wort Darüber klicken. Fügen Sie hier wie gewohnt ein Schlüsselbild ein. Jetzt füllen Sie einfach die Schaltfläche mit einer etwas helleren Farbe aus. 4. Fügen Sie ein Schlüsselbild im Drücken-Zustand ein. 5. Wählen Sie hier die gesamte Form aus und schieben Sie sie ein wenig nach unten und rechts. Sie können dazu die Cursortasten verwenden. Eine Bewegung um drei Bildpunkte nach rechts und unten erwirken Sie durch dreimaliges Drücken der RechtsTaste gefolgt durch ebenfalls dreimaliges Drücken der Runter-Taste. 6. Wir haben die Schaltfläche nun stark erweitert. Kehren Sie bitte in die Hauptszene zurück und testen Sie den Film.

274

Eine Schaltfläche erstellen

Sie sehen also, dass man ganz einfach durch Einfügen bestimmter Grafiken in die zu den Zuständen gehörigen Bilder eine recht anspruchsvolle Schaltfläche erstellen kann.

Den Aktiv-Zustand der Schaltfläche definieren Sicher ist Ihnen der Aktiv-Zustand schon aufgefallen. Alles was hier gezeichnet wird, kann der Betrachter nicht sehen. Er definiert vielmehr den Bereich, in den der Anwender klicken kann, um die Schaltfläche in den Drücken-Zustand zu versetzen. Stellen Sie sich vor, Sie haben eine Schaltfläche in der Form eines Ringes. Wenn Sie nichts in den Aktiv-Status hineinzeichnen, kann man nur auf den Ring, aber nicht in die Mitte klicken (siehe Abbildung 13.3). Sobald Sie aber einen ausgefüllten Kreis in diesen Zustand zeichnen, wird man auch in der Ringmitte die Schaltfläche betätigen können. Diese Technik ist auch dann nützlich, wenn man eine sehr kleine Schaltfläche hat, die auch ein Anwender anklicken können sollte, der keine chirurgischen Erfahrungen hat. Geben Sie dem Publikum also eine Chance, indem Sie den Aktiv-Zustand groß genug auslegen.

Abbildung 13.3: Wenn man die Form im Aktiv-Zustand verändert, kann man den anklickbaren Bereich modifizieren.

Aufgabe: Erstellen Sie eine Schaltfläche mit einem extra großen AktivZustand! 1. Verwenden Sie in einer neuen Datei das Text-Werkzeug, um das Wort HOME auf die Bühne zu bringen. 2. Wählen Sie den Text aus und konvertieren Sie ihn in ein Schaltflächen-Symbol namens Home Schaltfläche.

275

Schaltflächen erstellen, auf die ein Anwender klicken kann

3. Testen Sie den Film und beobachten Sie den Mauszeiger, wenn Sie ihn über die Schrift bewegen. Man kann nur auf die Schaltfläche klicken, wenn man sich exakt über der Schrift befindet. Man kann also nicht in das Innere des O klicken. 4. Diese negative Eigenart können wir der Schaltfläche allerdings austreiben. Kehren Sie in die Hauptszene zurück und doppelklicken Sie auf die Instanz der Home Schaltfläche. Sie gelangen nun in das Master-Symbol. 5. Fügen Sie hier ein Schlüsselbild in den Aktiv-Zustand der Schaltfläche ein. Dabei wird (wie sonst auch) der Inhalt des vorherigen Schlüsselbildes in das neue Schlüsselbild kopiert. Es erscheint also das Wort HOME aus dem Auf-Zustand. Wenn wir den neuen Aktiv-Zustand definiert haben, können wir den Text getrost löschen, da das Publikum diesen Bereich sowieso nicht sehen kann. 6. Zeichnen Sie ein Oval, das etwas größer als der Text ist und löschen Sie das Wort HOME danach. 7. Wenn Sie den Film nun erneut testen, werden Sie die Schaltfläche viel einfacher anklicken können. Die Schaltfläche aus der letzten Aufgabe hat also einen größeren Bereich erhalten, der angeklickt werden kann, als optisch zu vermuten wäre. Bitte bedenken Sie aber, dass ein leerer Aktiv-Zustand immer das vorherige Schlüsselbild als Vorlage nimmt. Wenn Sie also keinen Aktiv-Zustand definiert haben und sich im Drücken-Zustand eine Zeichnung befindet, wird man nur dort klicken können.

Eine Schaltfläche bezüglich der Dateigröße minimieren Wir haben schon oft besprochen, dass man unbedingt auf die Dateigröße des exportierten Films achten sollte, auch wenn die Internetverbindungen heute immer schneller werden. Deshalb sollten wir auch bei Schaltflächen auf die anfallende Datenmenge achten. In der vorletzten Aufgabe (mit der Ellipse) haben wir nicht sehr effizient gehandelt, denn wir haben mehrere Schlüsselbilder erstellt, wodurch der Inhalt des vorigen Schlüsselbildes kopiert wurde (was also den doppelten Speicherbedarf ausmacht). Es wäre besser gewesen, wenn wir ein Symbol angelegt hätten, welches die Form der Schaltfläche aufnimmt, denn wir haben lediglich die Farbe und die Position verändert. Es wird oft angenommen, dass Schaltflächen schon optimiert sind, da es sich dabei ja bereits um Symbole handelt. Allerdings kann man doch noch mit Symbolen in Symbolen arbeiten, um weiteren Speicherplatz zu sparen.

276

Eine Schaltfläche erstellen

Instanzen von Schaltflächen Ich hoffe, dass Sie langsam Gefallen an Schaltflächen gefunden haben, denn auch die schnell erstellten Versionen aus den letzten Aufgaben sehen doch schon ganz gut aus, oder? Auch wenn wir noch bis zum nächsten Kapitel warten müssen, um endlich mit den Schaltflächen zu steuern, macht es Sinn, einen kleinen Blick nach vorne zu riskieren, damit Sie wissen, wo unser Ziel liegt. Genauso wie bei anderen Symbolen können wir beliebig viele Schaltflächen-Instanzen auf die Bühne bringen, ohne die Dateigröße gravierend zu beeinflussen. Jede Instanz kann die gewohnten unterschiedlichen Eigenschaften (wie zum Beispiel Skalierung und Rotation) besitzen. Außerdem können wir jeder Schaltflächen-Instanz eine Aktion zuweisen. Deshalb sollten wir uns einmal ansehen, wie man diese Aktionen einer Instanz (nicht dem Master-Symbol) zuweist. Das Einzige, was wir in das Master-Symbol legen, sind die sichtbaren Elemente und Sounds (wie wir in einer Minute sehen werden). Es wird oft versucht, eine Aktion in einer Schaltfläche selbst zu definieren, was allerdings nicht möglich ist. Auch wenn es sich logisch anhört, eine Aktion, die beim Klick auf die Schaltfläche ausgeführt werden soll, in den Drücken-Status zu schreiben, funktioniert nicht auf diese Weise. Aktionen sind Ihre Möglichkeit, um Flash etwas zu befehlen (beispielsweise

»Stopp!«, »Abspielen!« oder »Springe zu Bild X!«). Wie man Aktionen anwendet, wird im nächsten Kapitel besprochen. Dieses Konzept wollte ich schon einmal erwähnt haben, da wir hier von Instanzen sprechen und die Themen bei Schaltflächen sehr verwandt sind. Man definiert also Aktionen in den Instanzen von Schaltflächen. Machen wir einen kurzen Abstecher – aber nicht mehr. Rechtsklicken Sie auf eine beliebige Schaltflächen-Instanz und wählen Sie AKTIONEN aus dem Kontextmenü. Klicken Sie auf die Plus-Schaltfläche (+) und wählen Sie BASISAKTIONEN / ON MOUSE EVENT. Beachten Sie, dass im Aktionenfenster verschiedene Ereignisse aufgeführt werden (siehe Abbildung 13.4). Solche Ereignisse werden wir im nächsten Kapitel genauer unter die Lupe nehmen. Das Abfragen von Ereignissen ist der einzige Weg, wie Schaltflächen in Flash arbeiten. Allgemein gesprochen geschehen Ereignisse. In der Multimediawelt werden Ereignisse einerseits durch den Anwender hervorgerufen (wenn er beispielsweise eine Schaltfläche anklickt) oder treten bei zuvor definierten Situationen (wie dem Starten des Films) auf. Das war auch schon der ganze Abstecher in die Zukunft – machen wir uns also auf, dorthin zu kommen. Keine Angst, das geht schnell genug. Außerdem gibt es einige sehr interessante Themen bei erweiterten Schaltflächen (die als Nächstes ins Haus stehen). Merken Sie sich bitte schon einmal, dass man Aktionen in den Instanzen und das Aussehen im Master-Symbol einer Schaltfläche bestimmt.

277

Schaltflächen erstellen, auf die ein Anwender klicken kann

Abbildung 13.4: Bei den Aktionen in SchaltflächenInstanzen muss man angeben, welches Ereignis die Aktion auslösen soll.

13.2 Erweiterte Schaltflächen Wenn Sie die bisher erstellten Schaltflächen schon aufregend fanden, warten Sie noch einen Moment. Wir werden einige sehr anspruchsvolle Schaltflächen entwerfen. Ihre Grundkenntnisse über Schaltflächen werden wir dabei mit Ihrem Wissen über Animationen verbinden.

Animierte Schaltflächen Es ist viel einfacher als Sie denken, eine animierte Schaltfläche zu erzeugen. Wünschen Sie eine Schaltfläche, die ständig animiert? Oder soll sie nur animieren, wenn sich der Mauszeiger darüber befindet? Wie wäre es mit beidem? Sie können alles herstellen, was Sie wollen – eine Filmsequenz im entsprechenden Zustand ist das ganze Geheimnis.

Aufgabe: Erstellen Sie eine animierte Schaltfläche! 1. Schreiben Sie in einer neuen Datei mit dem Text-Werkzeug das Wort Home auf die Bühne. Wandeln Sie es in ein Filmsequenz-Symbol namens Normaler Text um. Dieses Symbol werden wir sehr oft verwenden. 2. Der Text auf der Bühne ist nun eine Instanz von Normaler Text. Wir erstellen nun eine Filmsequenz, die diese Instanz auf dem Bildschirm animieren wird. Wählen Sie die Instanz also aus und wandeln Sie diese erneut in ein Filmsequenz-Symbol namens Animierter Text um.

278

Erweiterte Schaltflächen

3. Jetzt müssen wir natürlich im Master-Symbol von Animierter Text für die Animation sorgen. Doppelklicken Sie also auf die Instanz. Vergewissern Sie sich, dass Sie sich im Master-Symbol von Animierter Text befinden, bevor Sie fortfahren. 4. An dieser Stelle können Sie nun ein Schlüsselbild in Bild 30 und ein weiteres in Bild 15 einfügen. Vergrößern Sie den Text in Bild 15 ein wenig. Aktivieren Sie in den Bildern 1 und 15 das Bewegungstweening. Schrubben Sie, um die Animation zu sehen. 5. Kehren Sie in die Hauptszene zurück. Löschen Sie alles auf der Bühne ((Strg)+(A) und dann (Entf)). Die Symbole sind jetzt noch sicher in der Bibliothek aufgehoben. Öffnen Sie nun die Bibliothek und ziehen Sie eine Instanz von Normaler Text auf die Bühne. 6. Jetzt sind wir soweit, um eine Schaltfläche zu erzeugen. Wählen Sie dazu die Instanz auf der Bühne aus und konvertieren Sie diese in ein Schaltflächen-Symbol namens Animierte Schaltfläche. So haben wir ein Symbol verwendet, um eine Schaltfläche zu produzieren. 7. Jetzt können wir die Schaltfläche so bearbeiten, dass sie animiert. Doppelklicken Sie dazu auf die Instanz von Animierte Schaltfläche auf der Bühne. Jetzt befinden Sie sich im Master-Symbol der Schaltfläche. Wie Sie sehen, liegt das Symbol Normaler Text im Auf-Zustand. 8. Jetzt werden wir eine Instanz von Animierter Text in den Darüber-Zustand einfügen. Sie können nun eine Instanz aus der Bibliothek auf die Bühne ziehen und diese am ersten Text ausrichten. Wir werden hier etwas anders vorgehen, um uns das Ausrichten zu ersparen. Fügen Sie ein Schlüsselbild in den Darüber-Zustand ein. 9. Wählen Sie die Instanz von Normaler Text im Darüber-Zustand der Schaltfläche und öffnen Sie das Instanz-Bedienfeld. Drücken Sie nun auf die Schaltfläche Symbol wechseln (siehe Abbildung 13.5). 10. Im gerade geöffneten Fenster Symbol wechseln finden Sie alle Symbole aus Ihrer Bibliothek wieder. Das aktuell verbundene Symbol wird durch einen Punkt markiert (siehe Abbildung 13.6). Klicken Sie auf Animierter Text und danach auf OK. Sie haben gerade das Symbol der Instanz gewechselt. 11. Der Schaltfläche fehlt nun noch ein schöner großer Aktiv-Zustand. Fügen Sie im Aktiv-Zustand also zuerst ein Schlüsselbild und dann ein Oval ein, das groß genug ist, um das größte Home-Wort zu überdecken. Danach können Sie den Text löschen. Wir haben uns hier vom Speziellen zum Allgemeinen vorgearbeitet, denn wir haben zuerst nur den Text erstellt. Aus diesem Symbol haben wir dann eine Animation erzeugt und aus diesen beiden Komponenten haben wir eine Schaltfläche gebastelt.

279

Schaltflächen erstellen, auf die ein Anwender klicken kann

Abbildung 13.5: Man kann das Symbol austauschen, das mit einer Instanz verbunden ist, ohne die anderen Eigenschaften (wie zum Beispiel die Position) der Instanz zu verändern.

Abbildung 13.6: In diesem Fenster können Sie ein anderes Symbol auswählen.

Schaltflächen-Behandlungsoptionen Die Behandlungsoption einer Schaltfläche gibt uns mehr Kontrolle über ihr Verhalten. In Abbildung 13.7 sehen Sie, dass man für jede Instanz einer Schaltfläche angeben kann, ob Flash sie Als Schaltfläche behandeln soll, oder ob die Option Als Menüelement behandeln aktiviert werden soll. Der einfachste Weg, diese Behandlungsoption zu verstehen, ist, mehrere Schaltflächen zu erzeugen, deren Darüber-Zustände sich von den Auf-Zuständen unterscheiden (dabei kann es sich ruhig um zwei Instanzen der gleichen Schaltfläche handeln). Wenn Sie beide Instanzen im Modus Als Schaltfläche behandeln belassen, werden Sie bei einmal auf einer Schaltfläche gedrückter Maustaste keine weiteren Schaltflächen ansprechen können.

280

Erweiterte Schaltflächen

Abbildung 13.7: Hier können Sie einstellen, ob eine Schaltfläche als solche oder als Menüelement behandelt werden soll.

Erst wenn Sie beide Schaltflächen auf Als Menüelement behandeln gekennzeichnet haben, reagieren die anderen Schaltflächen auch noch, wenn Sie bereits die Maustaste gedrückt haben (wie man das aus Menüs kennt). Diese Funktion ist nicht besonders wichtig, aber Sie sollten wissen, dass es sie gibt.

Schaltflächen mit Sound versehen Es gibt mehrere Möglichkeiten, eine Schaltfläche mit Sound zu versehen. Die einfachste Variante ist, einfach den Sound in ein Schlüsselbild eines Zustandes einzubinden. So könnte man Audio in den Darüber-Zustand einbinden, um ihn immer dann abzuspielen, wenn der Betrachter mit der Maus über die Schaltfläche fährt. Bei etwas ausgefalleneren Effekten (wie dem wiederholten Abspielen, während sich der Mauszeiger über der Schaltfläche befindet) sind ein paar Schritte mehr nötig. Für ganz komplizierte Soundeinbindungen müssen Sie sich zuerst mit ActionScripts auskennen. Deshalb werden wir uns hier mit Sounds im Darüber-Zustand beschäftigen.

Aufgabe: Erstellen Sie eine Schaltfläche, die mit einem Darüber-Sound versehen ist! 1. Erzeugen Sie in einer neuen Datei ein Rechteck, das Sie direkt in ein SchaltflächenSymbol namens Audio Schaltfläche umwandeln. 2. Doppelklicken Sie auf die Instanz, damit wir das Master-Symbol bearbeiten können. 3. Damit wir Speicher sparen, wählen wir hier das Rechteck aus und konvertieren es in ein Filmsequenz-Symbol namens Form der Schaltfläche. 4. Jetzt fügen wir ein Schlüsselbild im Darüber-Zustand ein. 5. Nun benötigen wir noch einen Sound, den wir einfügen können. Öffnen Sie dazu sowohl Ihre Bibliothek als auch die Sound-Bibliothek (FENSTER / ALLGEMEINE BIBLIOTHEKEN / SOUNDS). Ziehen Sie nun die Audio-Datei Breaker Switch aus der Sound-Bibliothek in die Bibliothek Ihrer Datei. Jetzt können Sie im Darüber-Zustand den Sound aktivieren, indem Sie ihn im Sound-Bedienfeld auswählen (siehe Abbildung 13.8).

281

Schaltflächen erstellen, auf die ein Anwender klicken kann

Abbildung 13.8: Wir haben einen Sound in den Darüber-Zustand der Schaltfläche integriert.

6. Wenn Sie nun den Film testen, werden Sie das Ergebnis sehen und hören. Speichern Sie diese Datei bitte ab, da wir sie in der nächsten Aufgabe wieder benötigen. Das war doch gar nicht so schwer. Ich habe den Sound Breaker Switch ganz bewusst gewählt, da ich mit dem in Kapitel 10 angesprochenen Effekt demonstrieren kann, was passiert, wenn man sehr schnell hintereinander auf die Schaltfläche zeigt und sie wieder verlässt. Korrigieren Sie das gegebenenfalls, indem Sie die Sync-Einstellung auf Start stellen. In der folgenden Aufgabe werden wir uns mit wiederholenden Sounds in Schaltflächen beschäftigen. Ich rate Ihnen aber, dieses Mittel nicht zu oft einzusetzen, denn auch wenn ein Schleifen-Sound beim ersten Hören ganz witzig klingt, kann er bei längerer Betrachtungszeit eines Films recht nervig werden.

Aufgabe: Erstellen Sie eine Schaltfläche, die mit einem wiederholten Sound versehen ist! 1. Bearbeiten Sie das Master-Symbol der Schaltfläche aus der letzten Aufgabe. 2. Wählen Sie das Schlüsselbild im Darüber-Zustand aus und tragen Sie im Sound-Bedienfeld einen sehr hohen Wert bei Wdh ein.

282

Erweiterte Schaltflächen

3. Testen Sie nun den Film. Es gibt einige Probleme. Das kleinste Übel ist im Moment, dass der Sound Breaker Switch nicht besonders gut als Schleife klingt. Die beiden größeren Probleme sind: erstens – der Sound wird immer wieder über sich selbst gelegt und produziert so einen Klangteppich; zweitens – der Sound hört nicht auf zu spielen. 4. Das erste Problem lässt sich dadurch beheben, dass Sie die Sync-Einstellung auf Start stellen (siehe Kapitel 10). Wenn Sie den Film erneut testen, werden Sie merken, dass wir dieses Problem gelöst haben. 5. Allerdings wird der Sound immer noch nicht beendet. Der richtige Moment, den Sound anzuhalten, ist, wenn der Anwender die Schaltfläche mit dem Mauszeiger verlässt und sie somit wieder in den Auf-Zustand versetzt. Erraten Sie es? Genau. Wir brauchen nur im Auf-Zustand den Sound Breaker Switch per Sync-Einstellung auf Stopp anzuhalten. Probieren Sie es aus und testen Sie den Film.

Unsichtbare Schaltflächen Unsichtbare Schaltflächen sind recht nützlich. Man kann sie ebenfalls recht einfach erzeugen. Sie (der Autor) werden die Schaltfläche in hellem Blau sehen, während der Betrachter natürlich eine unsichtbare Schaltfläche nicht sehen kann. Auch wenn man im ersten Moment keine Verwendung für Schaltflächen findet, die man nicht sehen kann, gibt es doch einige gute Einsatzgebiete. Man kann solche Schaltflächen über etwas anderes legen, ohne es zu verdecken. Ein Beispiel wäre eine Landkarte, in der ein Anwender Städte anklicken kann, um mehr darüber zu erfahren.

Aufgabe: Erzeugen Sie eine unsichtbare Schaltfläche! 1. Wählen Sie in einer neuen Datei EINFÜGEN / NEUES SYMBOL und nennen Sie es Unsichtbar. Stellen Sie das Verhalten auf Schaltfläche ein. Klicken Sie nun auf OK. Somit gelangen wir in das Master-Symbol einer (noch) leeren Schaltfläche. 2. Lassen Sie alle Bilder leer und fügen Sie nur im Aktiv-Zustand ein Schlüsselbild ein. 3. Zeichnen Sie einen Kreis um das Pluszeichen, das die Mitte des Symbols markiert. Im Zweifelsfall können Sie über das Info-Bedienfeld die Position 0, 0 einstellen. Das Ergebnis sieht dann etwa wie in Abbildung 13.9 aus. 4. Kehren Sie in die Hauptszene zurück und ziehen Sie eine Instanz der unsichtbaren Schaltfläche auf die Bühne. Wie Sie sehen, ist sie blau. Testen Sie den Film. Wie Sie sehen, sehen Sie nichts außer einer Veränderung des Mauszeigers, wenn Sie ihn über die unsichtbare Schaltfläche bewegen.

283

Schaltflächen erstellen, auf die ein Anwender klicken kann

Abbildung 13.9: So sieht eine unsichtbare Schaltfläche aus. Nur im AktivZustand befindet sich ein Schlüsselbild.

Abbildung 13.10: Man kann über jede Zeichnung unsichtbare Schaltflächen legen.

284

Zusammenfassung

5. Zeichnen Sie in der Hauptszene ein großes Rechteck mit einigen Kreisen (wie in Abbildung 13.10) und stellen Sie sich das als Karte mit einigen Städten vor. Ziehen Sie nun für jeden Kreis eine Instanz von Unsichtbar auf die Bühne. Positionieren Sie diese entsprechend und passen Sie die Größe an. Für etwas, das man nicht sehen kann, sind unsichtbare Schaltflächen doch recht leistungsstark. Ich kann mit Sicherheit behaupten, dass ich in keinem Projekt ohne sie auskomme. Der große Vorteil ist, dass man die Schaltflächenfunktionalität vom Optischen trennen kann.

13.3 Zusammenfassung Jetzt sollten Sie verstanden haben, wie man aus jeder beliebigen Form in Flash eine Schaltfläche erzeugt. Sie wissen ebenfalls, wie man ihr Aussehen verändern kann, wenn der Betrachter interagiert. Außerdem können Sie jetzt genau festlegen, welcher Teil der Schaltfläche überhaupt anklickbar ist. Zusätzlich haben wir Sound in Schaltflächen eingefügt und unsichtbare Schaltflächen generiert. Jetzt können Sie also Ihre Animationen mit Schaltflächen zupflastern, was aber nur die halbe Miete ist, denn wir benötigen ja noch die auszuführenden Aktionen. Lesen Sie dazu im nächsten Kapitel weiter.

13.4 Workshop F&A F

Frage: Ich habe eine Filmsequenz auf die Bühne gezogen und versehentlich das Verhalten per Instanz-Bedienfeld in Schaltfläche geändert. Nun funktioniert meine Filmsequenz nicht mehr, sondern verhält sich wie eine Schaltfläche (mit dem Hand-Cursor, wenn man ihn darüber bewegt). Was ist hier los? A

Erinnern Sie sich daran, dass man das Verhalten von Instanzen verändern kann, auch wenn das Mastersymbol ein anderes Verhalten hat. Wenn Sie eine Filmsequenz in eine Schaltfläche umwandeln, repräsentieren die ersten vier Bilder die vier Zustände der Schaltfläche. Allerdings werden die Namen der Zustände nicht angezeigt, wenn das Verhalten der Instanz nicht von Anfang an Schaltfläche war. Sie werden zu diesem Thema aber noch mehr in Kapitel 5 lernen.

285

Schaltflächen erstellen, auf die ein Anwender klicken kann

F

Wenn ich auf ABSPIELEN klicke, funktionieren meine Schaltflächen nicht. Wieso? A

Das geht nur, wenn Sie den Film testen ((Strg)+(¢)). Sie können aber auch im Autorenmodus von Flash die Schaltflächen einschalten, indem Sie STEUERUNG / SCHALTFLÄCHEN AKTIVIEREN wählen.

Übungsaufgaben 1. Wie viele Bilder kann man animieren, wenn man den Darüber-Zustand einer Schaltfläche verwendet? a. Das hängt von der Anzahl der Schlüsselbilder in der Schaltfläche ab. b. Nicht mehr als vier Bilder c. So viele man will, da man eine Filmsequenz einbindet 2. Kann man verschiedene Sounds in unterschiedlichen Instanzen einer Schaltfläche verwenden? a. Nein b. Ja c. Das hängt davon ab, ob sich der Sound wiederholt. Für wiederholende Sounds: Ja; für nicht wiederholte Sounds: Nein. 3. Was passiert, wenn die Schaltfläche keine Grafik außer im Aktiv-Zustand beinhaltet? a. Das wird nicht funktionieren. b. Man hat eine unsichtbare Schaltfläche. c. Flash wird abstürzen.

286

Aktionen verwenden, um nichtlineare Filme zu erzeugen

4 1

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Die Programmiersprache von Flash heißt ActionScript. Wie in jeder anderen Computersprache kann man auch in ActionScript Befehle auflisten, denen der Computer (in diesem Fall genauer: die Flash-Animation) folgen wird. Ohne ActionScript wird der Film immer wieder gleich ablaufen. Wenn Sie ihn beispielsweise durch den Anwender anhalten und weiterspielen lassen wollen, benötigen Sie diese Programmiersprache. Die einzelnen Elemente von ActionScript werden Aktionen genannt. Wenn Sie also Aktionen beispielsweise mit einer Schaltfläche ausführen wollen, müssen Sie zwangsläufig ActionScript lernen. In den Bedienfeldern für Aktionen können Sie vordefinierte Aktionen kombinieren. Im letzten Kapitel haben wir uns mit den optischen und akustischen Eigenheiten von Schaltflächen befasst. Jetzt werden Sie aber auch lernen, wie man ihnen Befehle (zum Beispiel »Abspielen!« oder »Stopp!«) zuweist. Genauer gesagt werden Sie: 쐽

die drei Orte kennen lernen, an denen man Aktionen einfügen kann,

쐽

lernen, wie man Aktionen so bearbeitet, dass sie genau das bewirken, was Sie sich ausgedacht haben,

쐽

Aktionen so lenken, dass sie nur bestimmte Teile des Films betreffen und

쐽

einige grundlegende Möglichkeiten herausfinden, wie man Aktionen für bestimmte Effekte richtig zusammensetzt.

Je nachdem, wie man sie zählt, gibt es mehr als 50 Aktionen in Flash. Wir werden in diesem Kapitel nicht alle kennen lernen, aber die Grundlagen ihrer Verwendung. So schaffen Sie gute Voraussetzungen, um mit Ihren Anforderungen zu wachsen.

14.1 Aktionen verwenden Verwenden Sie Aktionen wie Bausteine. Nehmen Sie die Aktionen, die Sie verwenden wollen und fügen Sie diese in einer bestimmten Reihenfolge zusammen. Wenn das dann Sinn macht, wird das Ergebnis sicher sehr interessant sein. Allerdings bedeutet diese Freiheit auch, dass es Kombinationen gibt, die unlogisch oder sogar widersprüchlich sind. Nehmen Sie sich einfach die nötigen Aktionen und fügen Sie diese in der richtigen Reihenfolge an den passenden Stellen zusammen. Danach brauchen Sie nur noch eventuell nötiges Feintuning vornehmen. Alle Aktionen werden über das Bedienfeld für Aktionen eingefügt. Sie können es per Klick auf die Schaltfläche Aktionen einblenden (siehe Abbildung 14.1) öffnen. Sie können aber auch FENSTER / AKTIONEN wählen oder einfach (Strg)+(Alt)+(A) drücken. Schauen Sie sich kurz die Abbildung 14.2 an, damit wir ein paar weitere Details besprechen können, bevor wir uns an einigen Aufgaben versuchen.

288

Aktionen verwenden

Abbildung 14.1: Unten rechts befinden sich einige Schaltflächen, mit denen man Bedienfelder öffnen kann. Darunter befindet sich auch Aktionen einblenden.

Abbildung 14.2: Das Objekt-Aktionen-Bedienfeld besteht aus vielen Komponenten.

289

Aktionen verwenden, um nichtlineare Filme zu erzeugen

쐽

In der Aktionsliste kann man die einzelnen Aktionen auswählen. Diese sind wie in Ordnern gruppiert.

쐽

Im Scriptbereich werden die Aktionen in der Reihenfolge der Abarbeitung aufgelistet.

쐽

Durch die Schaltfläche Ausgewählte Aktion nach unten/oben verschieben kann man eine bestimmte Aktion immer um eine Zeile nach oben oder unten bewegen.

쐽

Über die Schaltfläche Objekt hinzufügen erhält man die gleichen Aktionen wie in der Aktionsliste. Allerdings werden hier auch Kurztastenkombinationen angezeigt (beachten Sie dazu den Tipp weiter unten).

쐽

Über Objekt entfernen kann man die ausgewählte Aktion wieder löschen.

쐽

Mit Parameterbereich ein/aus können Sie den Parameterbereich ausblenden. Das empfehle ich Ihnen aber nicht, da wir ihn sehr oft verwenden werden.

쐽

Im Parameterbereich selbst werden die Parameter der ausgewählten Aktion angezeigt. Manche sind allerdings so einfach, dass sie keine Parameter besitzen. Wenn Sie die Schaltfläche Objekt hinzufügen verwenden, finden Sie Tastenkombinationen wie ESC+go vor. Das bedeutet, dass Sie die entsprechende Aktion über die nacheinander (!) eingegebene Tastenfolge (Esc), (G) und (O) hinzufügen können. Wenn Sie später feststellen, dass Sie die gleiche Aktion sehr häufig verwenden, wird diese Vorgehensweise schneller erfolgreich sein, als die Aktion immer wieder neu zu suchen.

Während Sie lernen, sollten Sie besser den normalen Modus verwenden. Sie können nämlich über den Optionspfeil zwischen Normaler Modus und Experten-Modus auswählen. Im Experten-Modus wird vorausgesetzt, dass die Syntax Ihrer Befehle richtig ist, was im Normal-Modus immer überprüft wird. Die Syntax ist bei fast jeder Programmiersprache unterschiedlich. Mit diesem Begriff ist die Art und Weise gemeint, in der Befehle aufeinander folgen und miteinander verknüpft werden müssen, um einen Vorgang gültig zu beschreiben. Ansonsten führt es zu Fehlern. Eine E-Mail-Adresse hat als Bestandteil ihrer Syntax immer ein @-Zeichen, dafür dürfen aber keinerlei Leerzeichen verwendet werden. Wenn man sich nicht an diese Regeln hält, kommt die Mail nicht an. Wenn Sie sich im Normal-Modus der Aktionseingabe befinden, wird Flash sicherstellen, dass die von Ihnen eingegebene ActionScript-Syntax immer korrekt ist. Das heißt nicht, dass Ihr Script so arbeitet, wie Sie es geplant haben, allerdings wird Flash die Befehle einwandfrei identifizieren können und sie alle abarbeiten.

290

Aktionen verwenden

Die einfachste Möglichkeit, Aktionen hinzuzufügen, ist, einfach eine Aktion aus der Aktionsliste (links) auszuwählen und darauf doppelt zu klicken. Daraufhin wird sie im Scriptbereich (rechts) erscheinen. Jede hinzugefügte Aktion wird durch eine Zeile in diesem Bereich repräsentiert. In seltenen Fällen besteht eine solche Aktion aus einem einzigen Wort. Meist ist jedoch ein ganzer Satz oder Ausdruck erforderlich, da die Aktion sehr komplex ist. Die gesamten Ausdrücke im Scriptbereich nennt man Script. Wenn Sie einmal eine Aktion eingefügt haben, gibt es zwei Möglichkeiten, diese zu bearbeiten. Beim Hinzufügen erscheinen die Ausdrücke in der Reihenfolge, in der Sie sie eingefügt haben. Diese Reihenfolge können Sie durch das Auswählen eines Ausdrucks mit anschließendem Betätigen der Hoch- und Runterschaltflächen verändern. Ebenso funktioniert das direkte Ziehen der Auswahl. Die andere Möglichkeit der Bearbeitung ist das Verändern von Parametern. Die Aktion gotoAndPlay stellt den Abspielkopf auf ein anderes Bild ein. Natürlich müssen Sie die Nummer des Bildes angeben, damit das Script auch funktionieren kann. In diesem Fall ist die Bildnummer ein Parameter, der im Parameterbereich angezeigt wird (wenn er geöffnet ist). Manche Aktionen benötigen keine Parameter. Man kann das Bedienfeld für Aktionen vergrößern und verkleinern. Außerdem gibt es unter dem Optionspfeil eine Option für die SCHRIFTGRÖSSE. An derselben Stelle finden Sie auch eine Option namens SYNTAX FARBIG ANZEIGEN. Dabei handelt es sich um eine gute Unterstützung zum Lernen, denn es werden unterschiedliche Bestandteile von ActionScript auch in unterschiedlichen Farben angezeigt (Eigenschaften in Grün, Schlüsselwörter in Blau und so weiter). Es ist dabei nicht so wichtig, dass Sie genau wissen, welche Farbe für welche Elemente steht, denn es ist auch dann eine große Stütze, wenn Sie die Struktur besser durchschauen können. Und genau das passiert bei eingefärbtem Quelltext fast automatisch. (Die anderen Optionen, die Sie hier finden, benötigt man für die fundamentalen Vorgehensweisen wie SUCHEN und ERSETZEN.)

Aktionen durch Parameter spezifizieren Jetzt haben Sie die Chance, Aktionen und Parameter einzusetzen. Sie werden sehen, dass einige Aktionen ganz einfach sind. Allerdings sind die meisten Aktionen doch eher kompliziert. Lassen Sie uns eine kleine Übung durchführen und anschließend analysieren, was wir getan haben.

Aufgabe: Erstellen Sie eine Aktion, die einen Teil Ihres Filmes wiederholt! 1. Erstellen Sie in einer neuen Datei einen Textblock, der das Wort Willkommen enthält. 2. Positionieren Sie ihn in der Mitte des Bildschirms und fügen Sie Schlüsselbilder in den Bildern 20 und 30 ein.

291

Aktionen verwenden, um nichtlineare Filme zu erzeugen

3. Stellen Sie den Abspielkopf auf Bild 1 ein und schieben Sie dort den Text soweit nach links, dass er sich komplett außerhalb der Bühne befindet. Stellen Sie in den Bildern 1 und 20 einen Bewegungstween her. In Bild 20 können Sie dann im Bild-Bedienfeld einstellen, dass die Schrift auf dem Weg zu Bild 30 einmal im Uhrzeigersinn (UZS) um die eigene Achse rotieren soll. Schlagen Sie gegebenenfalls im achten Kapitel für nähere Informationen nach. Wenn Sie den Film testen, werden Sie feststellen, dass er sich ständig (inklusive dem Hineinschieben der Schrift von links) wiederholt. Das werden wir nun ändern und nur den Teil zwischen den Bildern 20 und 30 wiederholen lassen. 4. Wählen Sie dazu das Bild 30 aus und öffnen Sie das Bedienfeld für Aktionen auf dem gewohnten Wege. In diesem Fall heißt es Bild-Aktionen (siehe Abbildung 14.3). Vergewissern Sie sich noch einmal, dass auch wirklich das Bild 30 ausgewählt ist, denn genau da wollen wir eine Aktion ausführen, die den Film veranlasst, wieder zu Bild 20 zurückzuspringen.

Abbildung 14.3: Wir haben dieses Bedienfeld geöffnet, nachdem wir das Bild 30 ausgewählt haben. Die hier eingegebenen Aktionen werden also genau dann ausgeführt, wenn der Abspielkopf das Bild 30 erreicht.

5. Jetzt können Sie in der Aktionsliste den Ordner Basis-Aktionen aufklappen und werden dann die Aktion Go To finden. Doppelklicken Sie darauf und es wird ein Go ToAusdruck im Scriptbereich eingefügt (siehe Abbildung 14.4). Die angezeigten Parameter befinden sich noch in ihrem Standardzustand, was wir aber gleich ändern werden. Beachten Sie aber, dass in der Zeitleiste ein kleines a in dem Bild erscheint, in dem wir soeben die Aktion eingefügt haben.

292

Aktionen verwenden

Abbildung 14.4: So sieht das Bedienfeld für Aktionen im Moment direkt nach dem Einfügen einer Go To-Aktion aus.

6. Wenn Ihr Parameterbereich nicht angezeigt wird, sollten Sie auf den kleinen Pfeil unten rechts klicken.

Abbildung 14.5: Der Endzustand der Aktion, die dem Bild 30 zugewiesen wurde. In diesem Fall springt der Abspielkopf jedes Mal, wenn er Bild 30 erreicht, direkt auf Bild 20 zurück.

293

Aktionen verwenden, um nichtlineare Filme zu erzeugen

7. Im Parameterbereich geben Sie alle Details für die aktuell ausgewählte Aktion (in diesem Fall Go To) ein. In dieser Übung lassen Sie fast alles so wie es ist. Geben Sie lediglich beim Bild die Nummer 20 ein. Nun sollte gotoAndPlay(20); im Scriptbereich stehen (siehe Abbildung 14.5). 8. Testen Sie den Film erneut und Sie werden sehen, dass nur einmal die Schrift auf die Bühne geschoben wird und danach immer, wenn Bild 30 erreicht wird, der Drehvorgang in Bild 20 neu startet. So einfach diese Übung auch war, gibt es eine Sache, welche die Animation noch verbessern kann. Stellen Sie sich einmal die ganze Arbeit vor, die Sie haben werden, wenn Sie die Position des Schlüsselbildes verändern. Was wäre, wenn zum Beispiel das zweite Schlüsselbild von Position 20 nach 25 umziehen müsste? Es würde alles gut funktionieren (natürlich mit einem längeren Schiebevorgang und einer schnelleren Drehung), allerdings würde die Wiederholung immer noch bei Bild 20 einsetzen (also noch im Schiebevorgang), was das Endergebnis schlecht aussehen ließe. Sie müssten sich also daran erinnern, das Script in Bild 30 auf gotoAndPlay(25); zu ändern. Sie würden diese Änderung jedes Mal durchführen müssen, wenn Sie das Schlüsselbild verschieben würden. Natürlich gibt es da einen besseren Weg. Man kann nämlich auch einem Bild einen Namen geben (der sich beim Verschieben des Bildes nicht verändert) und kann diesen in der Go To-Aktion anstelle der Nummer angeben.

Aufgabe: Verwenden Sie eine Bildnummer als Ziel eines Go

To!

1. In der Datei, die wir soeben erstellt haben, wählen Sie bitte das Bild 20 (oder wo immer die Drehung startet) aus. Nennen Sie dieses Bild Schleifenstart (siehe Abbildung 14.6). 2. Gehen Sie wieder zum Bild 30 und öffnen Sie das Bild-Aktionen-Bedienfeld. 3. Wir müssen nun die gotoAndPlay-Anweisung im Bild-Aktionen-Bedienfeld abändern. Auch wenn wir nur eine Zeile geschrieben haben, müssen wir diese auswählen, um ihren Parameter zu verändern. Stellen Sie nun im Auswahlfeld Typ den Wert Bildmarkierung ein. Nun erhalten Sie auch bei der Option Bild ein Auswahlfeld, das alle Bildnamen enthält. In unserer Datei gibt es bisher nur die Bildmarkierung Schleifenstart, aber wenn Sie mehr definiert hätten, würden Sie diese hier vorfinden. Wählen Sie also Schleifenstart aus (siehe Abbildung 14.7). Diese Methode ist besser, als einfach den Namen einzutragen, denn dabei können sich Tippfehler einschleichen. Sollten Sie den Pfeil zum Aufklappen des Auswahlfeldes nicht sehen, müssen Sie gegebenenfalls das Bedienfeld ein wenig vergrößern. 4. Testen Sie den Film erneut. Er wird sich für den Betrachter nicht von der ersten Version unterscheiden. Kehren Sie nun zur Zeitleiste zurück und ziehen Sie das Bild Schleifenstart an die Bildposition 10.

294

Aktionen verwenden

Abbildung 14.6: Wenn wir das Bild 20 über das Bild-Bedienfeld mit dem Namen Schleifenstart versehen, kann das Sprungziel in der Aktion von Bild 30 der Bildname (Schleifenstart) sein, anstatt die Bildnummer (20) zu verwenden.

Abbildung 14.7: Die neue Version unseres Go To ist besser, da eine Bildmarkierung angesprungen wird.

5. Testen Sie den Film noch einmal. Jetzt springt die Animation automatisch nach Bild 10, ohne dass wir das Script verändern müssen. Und das ist gerade der Vorteil, wenn Sie Bildmarkierungen als Sprungziel für Ihre Go To-Aktionen verwenden: Sie können die Schlüsselbilder dann immer noch verschieben, ohne irgendetwas abändern zu müssen.

295

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Bild-Aktionen Wir haben gerade gesehen, wie eine Aktion den Abspielkopf an eine andere Stelle im Film geschickt hat. Lassen Sie uns aber einen Moment zurückgehen und sehen, was wir sonst noch gelernt haben. Aktionen sind Befehle, denen Flash folgt. Aktionen führen etwas aus. Aktionen können verändert werden, indem man ihre Parameter bearbeitet. Das sind alles gute Informationen, aber wann genau befolgt Flash diese Befehle? Die Antwort liegt da, wo genau Sie die Aktion einfügen. Es gibt drei Stellen, an denen man Aktionen einfügen kann: In Schlüsselbildern, in Instanzen von Schaltflächen und in Instanzen von Filmsequenzen. In der letzten Übung haben wie die Aktion in ein Schlüsselbild eingefügt. In diesem Fall wird die Aktion ausgeführt, wenn der Abspielkopf das Bild erreicht. Bei einer solchen Bild-Aktion braucht der Anwender nichts anderes zu tun, als darauf zu warten, dass der Abspielkopf das Bild (in dem die Aktion definiert wurde) erreicht. Auch wenn es sich hierbei nicht um echte »Interaktivität« handelt, ist diese Möglichkeit doch sehr nützlich. Manchmal ist es beispielsweise nötig, eine Stop-Aktion im ersten Bild einzufügen, damit der Film nicht abspielt, bevor irgendetwas eingetreten ist (üblicherweise das Betätigen einer Schaltfläche durch den Anwender). Ein anderes Beispiel wäre das Anhalten mitten in einer Animation. Alles was man braucht, ist ein Schlüsselbild und die Stop-Aktion. Es gibt viele weitere Beispiele für Bild-Aktionen, die eintreten sollen, wenn eine bestimmte Stelle des Films erreicht wurde – nicht nur wenn der Anwender irgendetwas anklickt. Das waren Bild-Aktionen. Was ist aber mit den beiden anderen Möglichkeiten? Hier ist die nächste:

Schaltflächen-Aktionen Schaltflächen-Aktionen werden ausgeführt, wenn der Anwender auf eine Schaltfläche klickt. Die Entscheidung, welche Art von Aktion man verwenden soll, ist recht einfach: Wenn sie beim Erreichen einer Stelle im Film ausgeführt werden soll, verwenden Sie eine Bild-Aktion. Muss der Anwender aber interagieren, um Ihre Aktion aufzurufen, sollten Sie diese in der Instanz einer Schaltfläche unterbringen. Bild-Aktionen werden nach einem einfachen Muster erzeugt: Sie fügen die Aktion einfach in ein Schlüsselbild ein. Schaltflächen-Aktionen setzen allerdings voraus, dass Sie angeben, welches Maus-Ereignis die Aktion auslösen soll. Wollen Sie reagieren, wenn der Anwender die Maustaste drückt oder erst, wenn er sie wieder loslässt? Vielleicht wollen Sie sogar eine Aktion starten, wenn der Mauszeiger sich über die Schaltfläche hinweg bewegt. Diese Details geben Ihnen die Möglichkeit, die Aktion genau dann auszuführen, wann Sie es für sinnvoll halten.

296

Aktionen verwenden

Maus-Ereignisse sind spezielle Angaben, die wiedergeben, wie genau der Anwender mit einer Schaltfläche interagiert. Man kann eine Schaltfläche nämlich nicht nur ansprechen, indem man die Maustaste drückt, sondern es ist manchmal auch sinnvoll, eine Aktion auszuführen, wenn sie wieder losgelassen wird. Diese Details sind aber nur für Schaltflächen interessant, da bei Bild-Aktionen die Aktion immer dann ausgeführt wird, wenn das Bild erreicht wird. Die beste Möglichkeit, das nachzuvollziehen, ist, es selbst auszuprobieren. Wir werden in unsere letzte Übung einfach zwei Schaltflächen einbauen, mit denen man den Film anhalten und weiterspielen lassen kann.

Aufgabe: Fügen Sie Schaltflächen in Ihre Animation ein, die diese anhalten und weiterspielen lassen können! 1. Verwenden Sie entweder die Datei aus der letzten Aufgabe oder erstellen Sie eine neue mit einem Bewegungstween über mehrere Bilder (stellen Sie sicher, dass sich etwas auf der Bühne bewegt, damit man sehen kann, ob die Animation abläuft oder steht). 2. Fügen Sie eine neue Ebene für die Schaltflächen ein. Wir wollen diese nämlich nicht in eine Ebene mit einem Bewegungstween einfügen, da sich die Elemente stören könnten. Nennen Sie die neue Ebene Schaltflächen. 3. Erzeugen Sie ein Rechteck in der neuen Schaltflächen-Ebene und wandeln Sie es in ein Schaltflächen-Symbol namens Meine Schaltfläche um. 4. Da wir zwei Schaltflächen benötigen, sollten Sie eine weitere Instanz von Meine Schaltfläche auf die Bühne (in die Schaltflächen-Ebene) bringen. Färben Sie eine Schaltfläche rot (für Stopp) und eine grün (für Wiedergabe) ein. Das funktioniert (wie Sie sich erinnern werden) über das Instanz-Bedienfeld mit der Option Farbton. 5. Jetzt müssen wir unterschiedliche Aktionen für die beiden Schaltflächen einfügen. Wählen Sie die rote Schaltfläche aus und öffnen Sie das Bedienfeld für Schaltflächen (jetzt Objekt-Aktionen). Doppelklicken Sie auf die Basis-Aktion Stop in der Aktionsliste. Obwohl Sie eigentlich nur eine Aktion einfügen, werden drei Zeilen in den Scriptbereich geschrieben (siehe Abbildung 14.8). Das hängt damit zusammen, dass man nicht einfach Aktionen mit einer Schaltfläche verknüpfen kann, sondern man muss sie zusätzlich mit einem Maus-Ereignis in Verbindung bringen. Das Standard-Ereignis heißt release (loslassen). Die Aktion wird also ausgeführt, wenn der Anwender die Schaltfläche nach dem Anklicken wieder loslässt. Wir werden später noch weitere Ereignisse besprechen. 6. Wählen Sie nun die grüne Schaltfläche aus und fügen Sie ihr die Aktion Play (Wiedergabe) aus den Basis-Aktionen zu. Testen Sie dann den Film.

297

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Abbildung 14.8: Eine mit einer Schaltfläche verknüpfte Aktion darf sich nur innerhalb eines Maus-Ereignisses befinden.

Das Einbetten einer Aktion in ein Maus-Ereignis macht bei Objekt-Aktionen Sinn, da man genau festlegen muss, wann die Aktion ausgeführt werden soll. Das Erzeugen von drei Zeilen kann aber ein wenig verwirrend sein. Deshalb ist auch eine andere Herangehensweise denkbar. In der letzten Aufgabe haben wir eine Aktion eingefügt, die dann automatisch in ein MausEreignis eingebunden wurde. In diesem Fall könnte man das Ereignis modifizieren, um es auf die eigenen Wünsche anzupassen. Damit haben wir aber zuerst das Ergebnis (die Aktion) festgelegt und danach das Ereignis angegeben, das überhaupt zu der Aktion führt. Logischer erscheint da die andere Variante: Legen Sie zuerst das Maus-Ereignis und danach die Aktion fest. Den Eintrag onMouseEvent finden Sie unter Basis-Aktionen. Fügen Sie diesen zuerst ein und wählen Sie in den Parametern aus, welches Ereignis genau die Aktion auslösen soll. Dann fügen Sie zwischen den geschweiften Klammern die gewünschten Aktionen ein (siehe Abbildung 14.9). Wenn Sie diesem Weg folgen, kann die Sache für Sie ein wenig logischer sein, da Sie das Script in zeitlich richtiger Reihenfolge erstellen.

298

Aktionen verwenden

Abbildung 14.9: Nachdem ein Maus-Ereignis festgelegt wurde, wird der damit verknüpfte Aktionsbereich durch eine öffnende Klammer { eingeleitet und durch eine schließende } wieder beendet.

Bisher waren unsere Aktionen recht einfach, allerdings sind die Maus-Ereignisse noch viel mächtiger. Man kann beispielsweise die gleiche Aktion von mehreren Ereignissen auslösen lassen. Selbstverständlich kann man auch in derselben Schaltfläche mehrere Ereignisse verschiedene Aktionen ausführen lassen. So könnte eine Schaltfläche beim Maus-Ereignis Press die Aktion Stop und bei Release wieder Play auslösen. Auf diese Weise würde der Film nur so lange angehalten, wie die Schaltfläche auch gedrückt wird. Bevor wir die Grundlagen der Aktionen bei Schaltflächen abschließen sollten Sie sich die folgenden Sachverhalte noch einmal klar machen: Es ist wichtig, dass Sie Aktionen immer auf die Instanzen von Schaltflächen anwenden und nicht versuchen, diese in den MasterSymbolen unterzubringen. Das ist zwar sehr verlockend und scheint auch logisch zu sein, wenn man beispielsweise für alle Instanzen bestimmte Aktionen festschreiben will. Aber diese Methode funktioniert einfach nicht. Was Sie ohne Bedenken machen können, ist, einer Instanz die gewünschten Aktionen hinzufügen und die modifizierte Schaltfläche wiederum in eine Filmsequenz zu konvertieren. Auf diese Weise kann man schnell Schaltflächen mit gleichen Aktionen produzieren.

Filmsequenz-Aktionen Wir haben nun das Anwenden von Aktionen auf Schlüsselbilder und Schaltflächen kennen gelernt. Die meisten Fälle, in denen Sie Aktionen verwenden werden, fallen bestimmt in diese beiden Kategorien. Allerdings gibt es noch eine dritte Möglichkeit: Instanzen von Filmsequenzen. Auch wenn das jetzt ein wenig verwirrend sein kann, besteht bei Filmsequenzen (im Gegensatz zu Schaltflächen) die Möglichkeit, die Aktionen auch in den Master-Symbolen unterzubringen. Auch wenn man die Aktionen innerhalb der Filmsequenz

299

Aktionen verwenden, um nichtlineare Filme zu erzeugen

nur auf Schlüsselbilder und Schaltflächen anwenden kann (was ja jetzt hinreichend besprochen wurde), will ich Ihnen zeigen, wie man sie mit Instanzen von Filmsequenzen verbindet. Wenn wir diese Methode hier in aller Ausführlichkeit besprechen wollten, würde das zu diesem Zeitpunkt ein wenig kompliziert werden. Allerdings kann ich Ihnen mit der folgenden Aufgabe einen kleinen Vorgeschmack geben, was Sie in Kapitel 15 und in Anhang E noch zum Thema ActionScript erwartet.

Aufgabe: Fügen Sie eine Aktion in die Instanz einer Filmsequenz ein! 1. Erstellen Sie eine Filmsequenz, die aus einigen Bildern besteht und versehen Sie diese mit einer kleinen Animation, so dass man sehen kann, ob sie diese abspielt. 2. Platzieren Sie die Filmsequenz auf der Bühne und testen Sie den Film, um sicherzustellen, dass die Animation funktioniert. 3. Wenn Sie wieder in Flash zurück sind, wählen Sie die Instanz der Filmsequenz aus und öffnen Sie das Bedienfeld für Aktionen. Beachten Sie, dass fast alle Aktionen in der Aktionsliste verfügbar (also nicht deaktiviert) sind. 4. Fügen Sie die Aktion Stop aus den Basis-Aktionen ein. Sie werden feststellen, dass die Aktion wieder eingebettet wird. Dieses Mal handelt es sich um ein Filmsequenz-Ereignis (»clip event«). Das Standard-Ereignis ist hierbei load, weshalb Sie ein Script wie in Abbildung 14.10 haben sollten.

Abbildung 14.10: Eine Aktion, die man einer Filmsequenz-Instanz zufügt, wird automatisch einem Filmsequenz-Ereignis (hier load) zugeordnet.

300

Aktionen verwenden

5. Testen Sie nun den Film und Sie werden sehen, dass die Filmsequenz sofort anhält, nachdem sie geladen wurde (also zum ersten Mal auf dem Bildschirm erscheint). Man kann diesen Effekt auch erzielen, indem man die Stop-Aktion auf das erste Bild der Sequenz anwendet. Es spricht nichts dagegen, allerdings sollten Sie beachten, dass man auf diese Weise jede Instanz der Filmsequenz nach dem Laden anhält. Wenn man die Aktion allerdings auf die Instanz bezieht – wie wir es gerade getan haben – beeinflusst man damit nur diese eine Instanz. 6. Wir werden nun noch zwei weitere Aktionen einfügen, die auf die Ereignisse mouseDown und mouseUp reagieren sollen. Wenn der Anwender klickt (mouseDown), soll die Filmsequenz abspielen. Wenn er die Maustaste aber wieder loslässt (mouseUp), soll auch die Sequenz anhalten. Wenn Sie momentan eine Zeile ausgewählt haben, die sich innerhalb der geschweiften Klammern befindet, werden Sie dort keine Filmsequenz-Ereignisse einfügen können. Es gibt keine Ereignisse in Ereignissen. 7. Ziehen Sie eine Play-Aktion unter die schließende Klammer des ersten onClipEvent. Auch diese Aktion wird automatisch in ein eigenes Filmsequenz-Ereignis »verpackt«. Wiederholen Sie den Vorgang mit einer Stop-Aktion. 8. So macht das Script nicht viel Sinn, da wir nun drei Versionen des onClipEvent(load) haben. Das erste ist noch OK, aber beim zweiten sollten Sie die Ereigniszeile (onClipEvent(load)) anklicken und die Parameter im Ereignis von Laden auf Maus drücken ändern. Das letzte Ereignis sollte mit dem Parameter Maus loslassen versehen werden. Wenn Sie alles richtig gemacht haben, wird Ihr Script wie in Abbildung 14.11 aussehen.

Abbildung 14.11: Die fertigen Aktionen für diese Filmsequenz

9. Testen Sie den Film. Das Ergebnis ist wirklich verblüffend, wenn man die Einfachheit des ActionScripts bedenkt, das Sie eingebaut haben. Kehren Sie zurück ins Bedienfeld für Aktionen und lesen Sie das Script noch einmal durch.

301

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Es gibt ein paar wichtige Anmerkungen zu dieser Aufgabe. Die Filmsequenz-Eigenschaften mouseDown und mouseUp beziehen sich auf jeden Mausklick – nicht nur auf die Klicks, die auf die Filmsequenz selbst angewandt werden. Wenn Sie etwas programmieren wollen, das sich auf einen Klick in einem bestimmten Bereich oder gezielt auf eine Grafik bezieht, sollten Sie eine Schaltfläche verwenden. Versuchen Sie einmal Folgendes: Erstellen Sie ein Schlüsselbild in Bild 20 der Hauptzeitleiste. Verschieben Sie die Instanz der Filmsequenz und fügen Sie in Bild 1 einen Bewegungstween ein. Testen Sie nun den Film und Sie werden sehen, dass sich der Mausklick nur auf das Abspielverhalten der Filmsequenz auswirkt. Die komplette Animation läuft ständig weiter. Mit dieser Technik kann man viel bewirken. Was Sie im Moment behalten sollten, ist, dass Aktionen von Filsequenz-Instanzen immer in Ereignisse eingebettet werden (genauso wie bei Schaltflächen). Schaltflächen reagieren auf onMouseEvent und Filmsequenzen auf onClipEvent. Außerdem beziehen sich solche Aktionen nur auf die eine Instanz der Filmsequenz, der sie zugeordnet sind.

Aktionen bearbeiten Wir haben bereits gelernt, wie man Aktionen in Schlüsselbilder, Schaltflächen-Instanzen und in Instanzen von Filmsequenzen einfügt. Dabei haben wir auch kleine Veränderungen an den einzelnen Aktionen vorgenommen. Allerdings gibt es noch mehr als beispielsweise nur die Bildnummer einer Go To-Aktion zu verändern. Sie sollten sich zuerst einmal mit dem Aktions-Bedienfeld ein wenig vertrauter machen. Deshalb sollen Sie auch den Parameterbereich immer geöffnet lassen. Schauen Sie sich die Tastenkombinationen von häufig verwendeten Aktionen an, indem Sie mit der +-Schaltfläche nachschlagen. Machen Sie sich außerdem mit dem Verschieben von Aktionen im Aktionsfenster vertraut, denn Sie werden es oft benötigen. Man kann nur einige wenige Sachen mit dem Bedienfeld für Aktionen anstellen: Aktionen einfügen, bearbeiten und löschen. Wie bei jedem anderen Bedienfeld auch beziehen sich die Angaben jeweils nur auf die angegebene Schaltfläche, Filmsequenz oder das Schlüsselbild. Wenn Sie meinen, dass Sie gerade kein Script schreiben können, liegt das meist daran, dass Sie keines dieser Objekte ausgewählt haben. Man kann auch schnell denken, man habe ein Script verloren, wobei man allerdings nur die aktuelle Auswahl aufgehoben hat.

302

Aktionstypen

14.2 Aktionstypen Da wir nun wissen, wo und wie man Aktionen platziert, können wir uns einige Aktionen genauer ansehen. Auch wenn wir nicht alle im Detail besprechen können, ist es doch möglich, die üblichsten ein wenig genauer zu durchleuchten.

Navigation Obwohl es keine Gruppe von Aktionen gibt, die »Navigation« heißt, gibt es doch zwei Aktionen, die sich genau damit befassen. Werfen wir einen kurzen Blick darauf:

Go To Mit Go To kann man zu einem bestimmten Bild, zu einer Bildmarkierung oder zu einer anderen Szene springen. Diese Aktion kann man sowohl einsetzen, um einen Abschnitt einer Animation zu wiederholen oder für interaktive Sprünge (zum Beispiel einen Neustart der Animation in Bild 1, wenn der Anwender eine Schaltfläche anklickt).

Abbildung 14.12: Die Go To-Aktion besitzt eine Option Gehe zu und abspielen. Wenn diese deaktiviert ist, wird aus gotoAndPlay ein gotoAndStop.

Mit Szenen kann man die Zeitlinie ein wenig aufsplitten, um sie besser organisieren zu können. Das kann man sich wie verschiedene Seiten in einem Buch vorstellen. Wenn ein Film abläuft, wird eine Szene nach der anderen so abgespielt, als ob es sich um eine große Zeitlinie handelte. Verwenden Sie das Szene-Bedienfeld, um einzelne Szenen einzufügen, zu löschen, zu verschieben und umzubenennen.

303

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Beachten Sie, dass es bei Go To eine Option Gehe zu und abspielen gibt (siehe Abbildung 14.12). Wenn Sie diese verwenden, brauchen Sie keine zusätzliche Play-Aktion einzufügen, um den Film weiterspielen zu lassen. Wenn Sie nach dem Sprung den Film anhalten wollen, lassen Sie diese Option einfach deaktiviert.

Get URL Während man mit einer Go To-Aktion zu einem anderen Bild springt, kann man mit Get URL den Anwender zu einer anderen Internetseite schicken. Wenn Sie sich mit Hyperlinks in HTML auskennen, ist Get URL das Gleiche. Als Parameter müssen Sie die Adresse der zu ladenden Internetseite angeben. URL steht für »uniform resource locator« und ist der Standard für die Adressierung von Internetseiten. Wenn Sie beispielsweise mit Get URL auf meine Internetseite verweisen wollen, müssen Sie den URL kennen (er ist http:// www.teleport.com/~phillip). Es gibt noch einige weitere Attribute für diese Aktion, die wir allerdings im Kapitel 17 kennen lernen werden. Wir können das aber schnell einmal durchgehen, um zu sehen, wie einfach die Sache ist.

Aufgabe: Erstellen Sie eine Schaltfläche, die auf eine anderen Internetseite verweist! 1. Erschaffen Sie in einer neuen Datei eine Schaltfläche und bringen Sie eine Instanz davon auf die Bühne. 2. Öffnen Sie das Bedienfeld für Aktionen, wenn die Instanz ausgewählt ist. 3. Fügen Sie die Aktion Get URL aus den Basis-Aktionen ein. Wählen Sie die gerade eingefügte Aktion aus und tragen Sie beim Parameter URL die Adresse http://www.teleport.com/~phillip ein. 4. Testen Sie den Film (oder besser: wählen Sie DATEI / VORSCHAU FÜR VERÖFFENTLICHUNGEN / STANDARD beziehungsweise drücken Sie (F12), um das Ergebnis in einem Browser zu sehen). Klicken Sie nun auf die Schaltfläche und wenn Sie online sind, werden Sie sich auf meiner Homepage wiederfinden.

304

Aktionstypen

Filmsequenzen anvisieren Die Navigations-Aktionen, die wir bisher kennen gelernt haben, ermöglichen es uns, in der Zeitlinie oder im Web umherzuspringen. Allerdings wissen Sie auch, dass Filmsequenzen ihre eigene Zeitlinie haben. Wie springt man also in Filmsequenzen? Wenn sich die Aktion innerhalb der Filmsequenz befindet oder auf die Instanz einer Sequenz angewendet wird, ist die Sache klar: Ein Stop hält beispielsweise dann immer die Filmsequenz an. Es wird allerdings etwas komplizierter, wenn man eine Aktion »aus der Ferne« auf eine Filmsequenz anwenden will. Nehmen wir einmal an, Sie haben eine Filmsequenz und eine Schaltfläche (die sich nicht innerhalb der Filmsequenz befindet). Wenn Sie nun die Schaltfläche mit einer Stop-Aktion belegen, wird per Klick das Abspielen des Films befohlen, allerdings wird die Filmsequenz dann immer noch weiter spielen. Damit man die Aktion nun gezielt auf eine Instanz ausrichten kann, muss man diese anvisieren. Bedenken Sie, dass es mehrere Instanzen des gleichen Master-Symbols auf der Bühne geben kann. Diesen Konflikt kann man in Flash auf zwei Arten lösen. Man muss ja zwei Sachen erledigen: die Filmsequenz anvisieren und ihr befehlen, was zu tun ist. Erinnern Sie sich bitte, dass wir in Kapitel 12 schon festgestellt haben, dass man Filmsequenzen (über das Instanz-Bedienfeld) benennen kann. Wenn man den Namen kennt, kann man die Sequenz gut anvisieren. Jetzt muss nur noch befohlen werden, was zu tun ist. Auch wenn es elegantere Methoden gibt, ist die am leichtesten verständliche wohl die Aktion with. Diese Aktion ist recht trickreich, denn man benötigt mehrere Schritte: Der erste ist, die Ziel-Filmsequenz zu benennen und dann die Aktion zu befehlen. Am Rande sei erwähnt, dass diese Aktion früher einmal Tell Target hieß. Das ist für Sie nur wichtig, wenn Sie mit älteren Flash-Versionen arbeiten wollen. Verwenden Sie aber für neuere Versionen immer with, da die ältere Variante eventuell gestrichen werden könnte.

Abbildung 14.13: In der with-Aktion muss man den Namen der anzuvisierenden Instanz angeben. Außerdem muss man in den Klammern die auszuführenden Aktionen angeben.

305

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Wenn Sie with aus der Aktionsliste auswählen, ist der einzige einzugebene Parameter das anzuvisierende Objekt. Man kann hier den Namen der Instanz angeben, auf welche die Aktion wirken soll (siehe Abbildung 14.13). Schreiben Sie nun nur noch die auszuführenden Aktionen in die geschweiften Klammern. Natürlich ist es nicht immer so einfach. Stellen Sie sich vor, Sie haben eine Filmsequenz innerhalb einer Filmsequenz. Solange Sie diese einzeln benennen, ist das Anvisieren noch recht einfach. Versuchen wir das einmal mit einer relativ komplexen Filmsequenz, die wiederum Filmsequenzen enthält.

Aufgabe: Verwenden Sie with, um eingebundene Instanzen anzuspringen! In dieser Aufgabe werden wir die Aktion with anwenden, um die Filmsequenzen von Rädern anzuhalten, die sich in einer Auto-Filmsequenz befinden. 1. Wir brauchen ein Auto mit drehenden Rädern, wie wir es bereits in Kapitel 12 in der Aufgabe »Verwenden Sie eine Filmsequenz, um ein Rad zu drehen« erzeugt haben. Schlagen Sie gegebenenfalls noch einmal dort nach. 2. Ziehen Sie eine Instanz von Drehendes Rad auf die Bühne. Testen Sie den Film und merken Sie sich die Richtung, in die sich das Rad dreht. 3. Ziehen Sie eine weitere Instanz auf die Bühne und positionieren Sie sie links von dem anderen Rad. Nennen Sie die eine Instanz vorderrad und die andere hinterrad (siehe Abbildung 14.14). 4. Zeichnen Sie die Karosserie des Autos um die beiden Räder. Wählen Sie alles aus und konvertieren Sie es in eine Filmsequenz namens auto. 5. Es gibt jetzt eine Instanz von auto auf der Bühne. Da sie aber noch keinen Namen hat, nennen Sie diese im Instanz-Bedienfeld einfach das_auto. 6. Fügen Sie ein Schlüsselbild in Bild 40 ein und bewegen Sie dort das Auto an eine andere Stelle auf der Bühne. Fügen Sie danach in Bild 1 einen Bewegungstween ein. 7. Zeichnen Sie in einer neuen Ebene ein Rechteck, das als Schaltfläche dienen soll. Konvertieren Sie es also in eine Schaltfläche namens Meine Schaltfläche. Ziehen Sie eine weitere Instanz der Schaltfläche auf die Bühne und verwenden Sie das Effekt-Bedienfeld, um eine rot und die andere grün einzufärben. 8. Wählen Sie nun die rote Instanz von Meine Schaltfläche aus und öffnen Sie das Bedienfeld für Aktionen. Fügen Sie eine Stop-Aktion ein. 9. Testen Sie den Film und Sie werden sehen, dass unser Auto zwar anhält, die Räder sich aber noch weiter drehen. Deshalb brauchen wir zusätzliche Aktionen, um das zu beheben. 10. Kehren Sie nach Flash zurück und fügen Sie eine with-Aktion direkt nach Stop ein (siehe Abbildung 14.15).

306

Aktionstypen

Abbildung14.14: Mit dem InstanzBedienfeld benennen wir die einzelnen Räder so, dass sie getrennt angesprochen werden können.

Abbildung14.15: Im Maus-Ereignis release fügen wir die with-Aktion direkt nach Stop ein.

307

Aktionen verwenden, um nichtlineare Filme zu erzeugen

11. Klicken Sie in das Parameterfeld Objekt und danach auf die Schaltfläche ZIELPFAD EINFÜGEN (die Schaltfläche mit dem Fadenkreuz). 12. Es öffnet sich nun das Fenster Zielpfad einfügen. Hier wird eine Hierarchie mit den Namen der einzelnen Instanzen von Filmsequenzen angezeigt, die sich in Ihrem Film befinden. Klicken Sie auf das Pluszeichen neben das_auto, um die untergeordneten Instanzen zu sehen. Klicken Sie nun auf vorderrad und dann auf OK (siehe Abbildung 14.16). Beachten Sie, dass nun das_auto.vorderrad im Objekt-Feld stehen muss.

Abbildung 14.16: Im Fenster Zielpfad einfügen kann man jede Instanz gezielt auswählen.

13. Nun müssen wir angeben, was wir der vorderrad-Instanz befehlen wollen. Fügen Sie deshalb in die geschweiften Klammern von with die Stop-Aktion ein (siehe Abbildung 14.17).

Abbildung 14.17: Fügen Sie in den geschweiften Klammern von with die Stop-Aktion ein.

14. Wiederholen Sie diesen Prozess für die hinterrad-Instanz. Stellen Sie sicher, dass sich die letzte with-Aktion noch vor der schließenden Klammer des Maus-Ereignisses, aber hinter der schließenden Klammer der ersten with-Aktion befindet. Das fertige Script sehen Sie in Abbildung 14.18.

308

Aktionstypen

Abbildung 14.18: Das fertige Script visiert die beiden Instanzen der drehenden Räder an.

15. Testen Sie nun den Film. Wenn Sie die rote Schaltfläche anklicken, stoppen die beiden Räder zusammen mit dem Auto. Sie sollten nun den ganzen Prozess noch einmal für die grüne Schaltfläche und die Play-Aktion wiederholen, damit der Anwender das Auto auch wieder weiterfahren lassen kann. Das Ganze kann jetzt etwas kompliziert erscheinen, da wir drei verschiedene Zeitleisten ansprechen mussten, nur um das Auto anzuhalten. Man kann den Quelltext ein wenig verkleinern, indem man die Stop-Aktion direkt in der Instanz aufruft. Dadurch wird aus diesen Zeilen with (das_auto.vorderrad { stop (); }

der folgende Einzeiler: das_auto.vorderrad.stop();

Die beiden Varianten bewirken genau das Gleiche und unterscheiden sich nur in der Anzahl der Zeilen. Wir werden uns mit dieser Methode im nächsten Kapitel noch genauer beschäftigen. Denken Sie immer daran, dass alle Befehle, die Sie an eine anvisierte Instanz weitergeben wollen, innerhalb der geschweiften Klammern von with stehen müssen. In Abbildung 14.19 habe ich mehrere Zeilen Kommentar (der nichts ausführt) in diesen Bereich geschrieben. Das Anvisieren von Filmsequenzen ist ganz einfach, wenn man diese mit Namen versieht.

309

Aktionen verwenden, um nichtlineare Filme zu erzeugen

Abbildung 14.19: Die Aktion with ist immer dann sinnvoll, wenn man mehrere Aktionen an ein Objekt senden will.

Effizienz-Tricks Da Sie nun eine Idee haben, wie man Aktionen einfügen kann, können wir am Feintuning dieser Technik arbeiten. Man kann beispielsweise eine eigene Ebene nur für die Aktionen anlegen. Da man Aktionen nicht in Bildern, sondern nur in Schlüsselbildern anbringen kann, und oft auch die Ausführung einer Aktion mitten in einem Tween erfolgen soll, ist es von Vorteil, das Schlüsselbild in einer gesonderten Ebene einzubinden. So wird der Tween nicht gestört. Außerdem halten Sie Ihre Bild-Aktionen beisammen und müssen nicht in allen Ebenen nach einer bestimmten Aktion suchen. Eine verwandte Technik ist, eine eigene Ebene für die Bildmarkierungen einzurichten. Die Gründe sind die gleichen wie im Abschnitt zuvor.

14.3 Zusammenfassung Wir haben die fundamentalen Ergebnisse von Aktionen kennen gelernt. Wir haben gesehen, wie man eine Aktion platziert und wie diese durch den Abspielkopf oder durch den Anwender gestartet werden kann. Neben Schlüsselbildern und Schaltflächen haben wir aber auch Aktionen in Filmsequenzen angeordnet. Außerdem haben wir festgestellt, dass viele Aktionen zusätzliche Parameter benötigen. Damit haben wir zwar nur an der Oberfläche von Aktionen gekratzt, aber Sie haben die Grundlagen für das Verständnis von ActionScript gelegt, das Ihnen sicher immer öfter in Flash begegnen wird.

310

Workshop

14.4 Workshop F&A F

Ich habe die Aktion gotoAndPlay(5) in das letzte Bild meines Films geschrieben. Außerdem befindet sich hier ein Textblock, der aber beim Abspielen nie zu sehen ist. Erst wenn ich die Aktion ein Bild später einfüge, sieht man den Text. Woran liegt das? A

F

Wieso wiederholt sich mein Film (als ob ich eine gotoAndPlay(1)-Aktion im letzten Bild ausführen würde), obwohl ich keinerlei Aktion im Film verwendet habe? A

F

Das ist eine kritische Geschichte: Eine Bild-Aktion wird immer sofort ausgeführt, wenn der Abspielkopf das Bild mit der Aktion erreicht. Der Text wird erst danach auf dem Bildschirm erscheinen. Flash springt vorher aber schon zu Bild 5.

Wenn der Effekt beim Testen des Films auftritt, werden Sie beim Testen wohl die Funktion STEUERUNG / SCHLEIFE im Flashplayer (nicht in Flash selbst) aktiviert haben. Wenn Sie das ausstellen, wird der Film am Ende anhalten (solange Sie keine Aktion einfügen, die für eine Wiederholung sorgt). Normalerweise brauchen Sie nicht einmal eine Stop-Aktion im letzten Bild, denn wenn Sie beim Veröffentlichen die Schleifen-Option deaktivieren wird der Film auch beim Anwender nicht wiederholt.

Welche Aktion muss ich verwenden, um ein Spiel zu erschaffen, wie man es von den vielen Werbe-Videospielen kennt? A

Ich hoffe, dass Sie verstehen, warum man einen Schritt nach dem anderen machen sollte. Auch wenn wir viele interessante Dinge in diesem Kapitel gelernt haben, so brauchen Sie für derartig aufwendige Projekte noch viel mehr Wissen. Hier haben wir lediglich die Grundlagen gelegt.

Übungsaufgaben 1. Wo kann man in Flash Aktionen einfügen? a. In Schaltflächen-Symbolen, in Schlüsselbildern und in Filmsequenz-Symbolen b. In jedem Schlüsselbild außer in Bild 1 (und in Schaltflächen und Filmsequenzen) c. In Schlüsselbildern, Schaltflächen-Instanzen und Filmsequenz-Instanzen

311

Aktionen verwenden, um nichtlineare Filme zu erzeugen

2. Was ist eine Aktion überhaupt? a. Etwas, das sich auf der Bühne bewegt b. Eine vorgefertigte Flash-Komponente, die irgendetwas ausführt c. Was Programmierer Funktionen nennen 3. Wie viele Aktionen kann man in eine Schaltfläche einfügen? a. Eine für jedes Maus-Ereignis b. Nicht mehr als zwei c. So viele man will

312

Ta g 1

Grundlagen

23

Ta g 2

Malen und Zeichnen

51

Ta g 3

Grafiken in Flash importieren

87

Ta g 4

Fortgeschrittene Zeichentechniken

113

Ta g 5

Die Bibliothek produktiv einsetzen

135

Ta g 6

Animationen verstehen

159

Ta g 7

Animationen auf die altmodische Weise

171

Ta g 8

Animationen mit Bewegungstweening

189

Ta g 9 Morphing mit Formtweening Tag 10 Sound in Animationen einbinden

205

Tag 11 Ebenen in Animationen verwenden Tag 12 Animationen mit Filmsequenzen und Grafik-Symbolen

239 259

Tag 13 Schaltflächen erstellen, auf die ein Anwender klicken kann

271

Tag 14 Aktionen verwenden, um nichtlineare Filme zu erzeugen

287

Tag 15 ActionScripting-Anwendungen für erweiterte Interaktivität

315

Tag 16 Smart-Filmsequenzen

333

Tag 17 Filme mit dem Internet verknüpfen

351

Tag 18 Modulare Internetseiten entwerfen

361

Tag 19 Eine gute Benutzeroberfläche erstellen

375

Tag 20 Optimierung Ihrer Flash-Site

391

Tag 21 Animationstechniken für Fortgeschrittene

419

Woche 3 – Vorschau

219

W O C H E

W O C H E

W O C H E

ActionScriptingAnwendungen für erweiterte Interaktivität

5 1

ActionScripting-Anwendungen für erweiterte Interaktivität

Sie haben im letzten Kapitel gesehen, wie man mit ein paar strategisch platzierten Aktionen kontrollieren kann, wie der Film abgespielt wird. Eine Aktion, die auf einer Schaltfläche liegt, lässt den Anwender in den Film eingreifen, wenn er auf die Schaltfläche klickt. Außerdem kann man Aktionen in ein Schlüsselbild einfügen, um wieder zu einem anderen Bild zurückzuspringen. Das letzte Kapitel hat Spaß gemacht, war aber nur die Spitze des Eisbergs. In diesem Kapitel werden Sie weiterhin mit dem Thema »Interaktivität durch ActionScript« konfrontiert. Sie werden nun lernen, wie man etwas komplexere Aufgaben mit dieser Programmiersprache löst. In diesem Kapitel werden Sie: 쐽

verschiebbare Objekte erstellen und

쐽

die Grundlagen der Programmierung lernen, um Benutzerinformationen zu erfassen und die visuellen Eigenschaften von Filmsequenzen zu verändern.

Sie haben eine große Aufgabe vor sich. Auch wenn Sie sich nicht als »Programmierer« sehen, wird Ihnen dieses Kapitel einen Einblick in das Potential von Flash geben. Wenn Sie sich in der Programmierung schon auskennen, werden Sie in den folgenden Abschnitten kaum eine Herausforderung finden, aber es werden Ihnen die Werkzeuge an die Hand gegeben, mit denen Sie später selbstständig handeln können.

15.1 Drag&Drop-Interaktionen erzeugen Eine der effektivsten Methoden, wie man dem Anwender Interaktivität zugestehen kann, ist das Verschieben von Objekten auf der Bühne. Dabei handelt es sich nicht nur um eine Grundvoraussetzung in der Spiele-Programmierung, sondern auch um ein großartiges pädagogisches Hilfsmittel, da man auf diese Weise gut lernen kann. Dieser Effekt ist in Flash recht einfach zu erzeugen. Es gibt jedoch ein kleines Dilemma. Man kann in Flash ganz einfach über Schaltflächen feststellen, ob ein Anwender in einen bestimmten Bereich geklickt hat. Das ist OK, denn man kann die startDrag-Aktion in einer Schaltfläche definieren. Das Problem ist aber, dass man bei dieser Aktion als Parameter angeben muss, welche Filmsequenz man verschieben will, weshalb startDrag nur auf Filmsequenzen wirkt. Allerdings wollen Sie diese Funktionalität ja bei einer Schaltfläche nutzen. (Es ist zwar möglich, Filmsequenz-Ereignisse statt Maus-Ereignissen zu verwenden, bedenken Sie aber, dass ein mouseDown in einer Filmsequenz alle Mausklicks abfängt, auch wenn sie nicht über der Filmsequenz ausgeführt wurden!)

316

Drag&Drop-Interaktionen erzeugen

Die grundlegende Methode Die Überbrückung dieses Dilemmas ist recht einfach: Erzeugen Sie einfach eine Filmsequenz, die eine Schaltfläche enthält. Die Aktion auf der Schaltfläche wird dann etwa sagen »Starte das Verschieben der Filmsequenz, in der ich mich befinde!«. Wenn Sie die nachfolgende Aufgabe durchgehen, wird Ihnen das wahrscheinlich noch mehr einleuchten.

Aufgabe: Erzeugen Sie eine einfache, verschiebbare Filmsequenz! In dieser Aufgabe werden Sie die einfachste verschiebbare Filmsequenz erstellen, die es gibt: 1. Zeichnen Sie in einer neuen Datei ein Quadrat. Konvertieren Sie dieses in eine Schaltfläche namens Schaltfläche. 2. Wählen Sie die soeben erstellte Instanz aus und konvertieren Sie diese in eine Filmsequenz namens Sequenz w-Schaltfläche. 3. Stellen Sie sicher, dass es sich bei der Instanz auf der Bühne um die Filmsequenz und nicht um die Schaltfläche handelt. Jetzt begeben Sie sich in das Master-Symbol der Filmsequenz und fügen der Schaltfläche eine Aktion hinzu, die quasi »Zieh mich!« sagt. Doppelklicken Sie dazu zuerst auf die Instanz der Filmsequenz, um in ihr Master-Symbol zu gelangen (siehe Abbildung 15.1). Wählen Sie die Instanz der Schaltfläche aus und öffnen Sie das Bedienfeld für Aktionen. Öffnen Sie hier aus der Aktionsliste die Gruppe Aktionen. Nun finden Sie die Aktion startDrag, auf die Sie doppelklicken. 4. Testen Sie nun den Film und probieren Sie aus, was funktioniert und was nicht. Wenn man klickt und dann bei gedrückter Maustaste die Maus bewegt, passiert nichts. Wenn man aber auf das Quadrat klickt und die Maustaste loslässt, fängt man an zu ziehen – aber erst nach dem Loslassen! 5. Um diesen Fehler zu beheben, müssen Sie wieder zur Schaltflächen-Instanz in der Filmsequenz gehen und die eingefügte Aktion so verändern, dass sie nicht auf das Maus-Ereignis release, sondern auf press reagiert (siehe Abbildung 15.2). Wenn Sie den Film erneut testen, werden Sie feststellen, dass die Funktionalität jetzt gegeben ist. Allerdings können Sie den gezogenen Bereich nicht wieder loslassen. 6. Die Schaltflächen-Instanz muss auf zwei Ereignisse reagieren. Beim Drücken der Maustaste muss das Ziehen der Filmsequenz beginnen und beim Loslassen der Taste muss das Ziehen beendet werden. Dazu ziehen Sie bitte die stopDrag-Aktion aus der Aktionsliste unter die letzte Zeile des bisherigen Scripts im Scriptbereich (siehe Abbildung 15.3).

317

ActionScripting-Anwendungen für erweiterte Interaktivität

Abbildung 15.1: Sie sollten sicherstellen, dass Sie die Aktion startDrag der Schaltflächen-Instanz in der Filmsequenz »Sequenz w-Schaltfläche« zuordnen.

Abbildung 15.2: Wenn man die erste Zeile eines Scripts auswählt, kann man angeben, auf welches Maus-Ereignis das eingebettete Script reagieren soll.

318

Drag&Drop-Interaktionen erzeugen

Abbildung 15.3: Wenn man die stopDragAktion unter die letzte Zeile des Scripts zieht, wird automatisch ein neues MausEreignis eingefügt.

7. Das zweite Maus-Ereignis (das unsere stopDrag-Aktion enthält) verwendet das releaseEreignis standardmäßig. Sie sollten für das Maus-Ereignis aber noch die Option AUSSERHALB LOSLASSEN aktivieren, um eine Fehlerquelle zu vermeiden, denn unter bestimmten Umständen kann es passieren, dass der Anwender sich beim Loslassen außerhalb der Schaltfläche befindet. Das Ergebnis sieht dann wie in Abbildung 15.4 aus.

Abbildung 15.4: Die fertige Version einer einfachen verschiebbaren Filmsequenz

319

ActionScripting-Anwendungen für erweiterte Interaktivität

Die Grundlagen verschiebbarer Sequenzen Ich hoffe, Sie hatten ein kleines Erfolgserlebnis in der letzten Aufgabe. Die Konstruktion mit der Schaltfläche in der Filmsequenz war zwar etwas merkwürdig, aber dennoch recht einfach. Nun sollten wir uns mit ein paar Parametern der startDrag-Aktion beschäftigen. In Abbildung 15.5 können Sie die Option Maus zentrieren erkennen. Wenn Sie das aktivieren, wird die Filmsequenz immer so an der Maus ausgerichtet, dass diese sich in der Mitte befindet. Testen Sie das doch einmal an der Datei, die Sie soeben erstellt haben. Dadurch wird zwar kein gravierender Unterschied erzeugt, aber das Ziehen »fühlt sich anders an«. Der Anwender bemerkt sofort, dass er die Filmsequenz bewegen kann, denn sie springt sofort in Position, wenn er darauf klickt. Wenn Sie diese Option auswählen, erscheint der Zusatz true im Scriptbereich.

Abbildung 15.5: Eine startDrag-Aktion mit aktivierter Option Mauszeiger zentrieren

Eine weitere Option ist Immer als Rechteck. Hier können Sie ein Rechteck definieren, innerhalb dem man die Filmsequenz verschieben kann. Wenn Sie die Option aktivieren, müssen Sie das Rechteck definieren, in dem verschoben werden darf. Sie müssen dazu die Angaben links (L), rechts (R), oben (T von »top«) und unten (B von »bottom«) angeben. Mit diesen Einstellungen kann man den Anwender auch davon abhalten, etwas ganz von der Bühne zu ziehen. Wenn Sie die Zahlen berechnen wollen, die Sie hier eintragen sollen, können Sie in der Hauptszene die Filmsequenz in jede extreme Position schieben und die Werte im InfoBedienfeld ablesen. Sie sollten (wie in Abbildung 15.6 gezeigt) sicher gehen, dass Sie den Mittelpunkt der Sequenz anzeigen lassen, denn die einzutragenen Werte im Script beziehen sich auf den Mittelpunkt.

320

In Flash programmieren

Die vorausgegangene Aufgabe stellte eine der gängigen Varianten von verschiebbaren Filmsequenzen dar, denn der Anwender muss eine Schaltfläche drücken, um die Sequenz zu bewegen. Man kann die startDrag-Aktion aber nicht nur in Schaltflächen, sondern auch in Schlüsselbildern definieren. Wenn Sie das beispielsweise im ersten Bild einer Filmsequenz verwenden, wird diese direkt an den Mauszeiger angekoppelt. Auch wenn diese Methode nicht oft gebraucht wird, kommen wir damit doch zum letzten Parameter der startDrag-Aktion – dem Ziel-Feld.

Abbildung 15.6: Das Info-Bedienfeld versorgt Sie mit den nötigen Koordinaten für die Konstruktion des Verschiebebereiches.

Hier kann man nämlich den Namen der Instanz angeben, die man ziehen will. In der letzten Aufgabe haben wir hier nichts angegeben und trotzdem hat es funktioniert, denn Flash nimmt beim Fehlen dieses Parameters die Filmsequenz als Ziel an, in der man sich gerade befindet. Das ist ähnlich wie bei Postadressen. Wenn Sie einen Brief innerhalb Deutschlands versenden, brauchen Sie auch nicht zusätzlich »Deutschland« in die Adresse zu schreiben. Wenn man allerdings in einem Schlüsselbild startDrag ausführt, muss man angeben, welche Filmsequenz gemeint ist.

15.2 In Flash programmieren Der Rest dieses Kapitels beschäftigt sich mit der Programmierung in Flash. Da man über dieses Thema ein eigenes Buch schreiben könnte, kann man es leider nicht in einem halben Kapitel zusammenfassen. Ich werde Ihnen aber den Weg andeuten. Wenn Sie kein Interesse an Programmierung haben, können Sie den Rest dieses Kapitels überspringen und in Kapitel 16 weiterlesen. Sie können bei Interesse später noch einmal hierher zurückkehren. (Überspringen Sie aber bitte nicht den Rest des gesamten Buches!)

Variablen Variablen sind ein (momentan noch) sicherer Platz, um Informationen abzuspeichern. Stellen Sie sich jede einzelne Variable als separate Tafel vor. Sie können alles auf diese Tafel schreiben, es löschen und dann wieder etwas anderes darauf schreiben. Genauso ist

321

ActionScripting-Anwendungen für erweiterte Interaktivität

es auch mit Variablen. Sie sind besonders nützlich, da man ab und zu Daten abspeichern will, während der Film läuft. Das Konzept von Variablen ist, dass jede einen Namen und einen zugeordneten Wert enthält. Man kann mit Variablen zwei Dinge machen: 쐽

den Wert setzen oder verändern und

쐽

ihren Wert auslesen oder prüfen.

Beachten Sie, dass ich nichts vom Erstellen von Variablen gesagt habe, denn man erstellt sie nicht. Eine Variable existiert einfach ab dem Moment, in dem man ihr einen Wert zuweist. Man kann den Wert von Variablen direkt auf der Bühne anzeigen. Dazu benötigen Sie ein Textfeld, für das Sie im Text-Optionen-Bedienfeld das Verhalten auf Dynamischer Text stellen, um Variablenwerte anzuzeigen, oder auf Texteingabe, um Informationen vom Anwender zu erfragen. Als Nächstes müssen Sie diesem dynamischen Text eine Variable zuweisen. Das können Sie im Feld Variable erledigen (siehe Abbildung 15.7). Sobald Sie das getan haben, wird der Text mit der Variablen verknüpft. Wenn sich der Wert der Variablen also verändert, wird sich der Text entsprechend anpassen.

Abbildung 15.7: Im Text-Optionen-Bedienfeld kann man das Verhalten des Textblocks angeben.

Wenn man das auf die Praxis umsetzt, werden Sie für folgende Anwendungen Variablen einsetzen: 쐽

Man kann den Anwender nach seinem Namen fragen, um diesen später zu verarbeiten.

쐽

Wenn der Anwender einen bestimmten Teil des Filmes mehrfach gesehen hat, kann man einen anderen Abspielkurs einschlagen, wenn man die Variablen mitgezählt hat.

쐽

Man kann Quiz-Fragen an den Anwender stellen und seine Punktezahl ausgeben.

쐽

Man kann über Variablen Text anzeigen, der sich oft verändert.

In der folgenden Aufgabe werden Sie lernen, wie man den Namen des Anwenders abfragt.

322

In Flash programmieren

Aufgabe: Verwenden Sie eine Variable, um den Namen des Anwenders zu erfassen! 1. Öffnen Sie in einer neuen Datei das Text-Optionen-Bedienfeld, das normalerweise nur bereits bestehenden Text verändert, aber auch Text vorkonfigurieren kann, der noch geschrieben wird. Stellen Sie das Textverhalten Texteingabe ein und aktivieren Sie die Option Rand. Wählen Sie nun das Text-Werkzeug aus und klicken Sie einmal auf die Bühne, um einen Textblock zu erstellen. Sie können den Eingabebereich nun beliebig vergrößern. Es gibt eine interessante Fähigkeit bei Textblöcken mit dem Verhalten Texteingabe: Man kann sie auch ohne Inhalt erstellen. 2. Wählen Sie nun den Textblock aus und geben Sie im Text-Optionen-Bedienfeld im Feld Variable den Wert Benutzername (unser neuer Variablenname) ein (siehe Abbildung 15.8).

Abbildung 15.8: Eine Texteingabezeile, in die der Anwender seinen Namen schreiben kann

3. Fügen Sie eine Stop-Aktion in Bild 1 ein. 4. Erstellen Sie eine Schaltfläche und fügen Sie eine Instanz davon neben dem soeben erstellten Textblock ein. Fügen Sie zur Instanz eine Play-Aktion im Maus-Ereignis release hinzu. Wenn der Anwender allerdings RETURN auf der Tastatur drückt, muss die Schaltfläche ebenfalls gedrückt werden. Dazu können Sie den Parameter Tastendruck aktivieren und den Cursor in das dahinter liegende Feld stellen, um dort (¢) zu drücken. Es erscheint der Wert . 5. Erzeugen Sie in Bild 10 ein leeres Schlüsselbild ((F7)) und einen weiteren Textblock. Dieser sollte sich als Dynamischer Text verhalten, damit der Anwender ihn nicht bearbeiten kann. Verknüpfen Sie ihn mit der Variable Mitteilung. 6. Jetzt werden wir einige Aktionen in das Schlüsselbild einfügen. Öffnen Sie also das Bildaktionen-Bedienfeld. Hier fügen Sie die set variable-Aktion (aus der Untergruppe Aktionen) ein, um den Wert der Variablen zu verändern.

323

ActionScripting-Anwendungen für erweiterte Interaktivität

7. Im Feld Variable können Sie nun Mitteilung eintragen, da diese Variable geändert werden soll. 8. Im Feld Wert wird eingetragen, welcher neue Wert der Variablen zugeordnet werden soll. Wir wollen hier aus Name (oder was auch immer der Anwender eingetragen hat) ein Willkommen Name machen. Dazu müssen wir den Text dynamisch verändern. Aktivieren Sie also die Option Ausdruck neben dem Wert-Feld, da wir Flash dazu bringen werden, etwas auszuwerten und nicht den Wert in der Variablen zu speichern, den wir nun eintragen. Schreiben Sie "Willkommen "+Benutzername in das Wert-Feld. Durch das Pluszeichen wird der Text "Willkommen " (achten Sie auf das Leerzeichen) mit der Variablen Benutzername verbunden. Alles was sich in Anführungsstrichen befindet, wird von Flash genau so übernommen. 9. Fügen Sie in Bild 10 eine Stop-Aktion in das Schlüsselbild ein und testen Sie den Film. In der vorausgegangenen Aufgabe haben Sie den Anwender eine Variable verändern lassen und diese dann später wieder an ihn ausgegeben. In vielen Fällen macht die Ausgabe aber keinen Sinn (wenn Sie zum Beispiel mitzählen wollen, wie oft ein Anwender auf eine Frage geantwortet hat). In der nächsten Aufgabe werden Sie sehen, wie man den Wert einer Variablen erhöht. Das ist recht einfach, denn eine Variable namens zaehlen soll sich immer dann erhöhen, wenn der Anwender auf eine Schaltfläche drückt. Um das Ergebnis zu überprüfen, werden Sie einen dynamischen Text erstellen, der den Wert von zaehlen ausgibt.

Aufgabe: Erhöhen Sie den Wert einer Variablen! 1. Erzeugen Sie in einer neuen Datei eine Schaltfläche und einen dynamischen Textblock mit einer 0 darin. Verknüpfen Sie die Variable zaehlen mit dem Text, wodurch die Variable automatisch angelegt wird. 2. Fügen Sie in die Schaltfläche eine evaluate-Aktion ein. Mit dieser Aktion können Sie alles eintragen, was Sie wollen. Tippen Sie in diesem Fall zaehlen++. Das bedeutet, dass die Variable zaehlen um den Wert 1 erhöht werden soll (siehe Abbildung 15.9). 3. Testen Sie den Film und Sie werden sehen, wie sich bei jedem Klick auf die Schaltfläche der Wert der Variablen erhöht. Ganz einfach. Ändern Sie die Variable, die mit dem Textblock verknüpft ist in mitteilung. Testen Sie den Film erneut. Funktioniert er? Nur weil Sie den Wert von zaehlen nicht mehr sehen, heißt das nicht, dass er nicht mehr erhöht wird. Lassen Sie bitte mitteilung noch eingetragen. 4. Ziehen Sie eine weitere Instanz der Schaltfläche auf die Bühne und definieren Sie in ihr die evaluate-Aktion message="Sie haben "+zaehlen+" Mal geklickt!".

324

In Flash programmieren

Abbildung 15.9: Die Aktion, die wir der Schaltfläche zugewiesen haben, wird den Wert von zaehlen erhöhen.

5. Testen Sie den Film und klicken Sie siebenmal auf die erste Schaltfläche. Wenn Sie nun auf die zweite Fläche klicken, erscheint der Text mit der richtigen Anzahl an Klicks. Man kann also den Wert einer Variablen verändern, auch wenn man diese nicht sieht. 6. Damit Sie keine veralteten Informationen angezeigt bekommen, können Sie mit der evaluate-Aktion message="" in der ersten Schaltfläche die Anzeige der Klicks löschen. Man kann eine Variable mit variable++ um den Wert 1 erhöhen. Das Gegenteil funktioniert mit variable--, was eine Verringerung um 1 zur Folge hat. Wenn man aber einen anderen Wert als 1 (zum Beispiel 5) verwenden will, geht das mit variable+=5 beziehungsweise variable-=5. Da Sie nicht davon ausgehen können, dass jeder Anwender die von Ihnen gewählte Schriftart installiert hat, können Sie im Text-Optionen-Bedienfeld genau festlegen, welche Zeichen in der Datei abgelegt werden sollen (siehe Abbildung 15.10). Je mehr Sie allerdings auswählen, umso größer wird die Datei!

325

ActionScripting-Anwendungen für erweiterte Interaktivität

Abbildung 15.10: Hier kann man angeben, welche Zeichen in der entsprechenden Schriftart in die fertige Datei exportiert werden sollen.

Eigenschaften Jedes Objekt besitzt Eigenschaften, die man beim Erstellen eines Films verändern kann. Man kann sich diese Eigenschaften als sichtbare Elemente vorstellen. Da gibt es zum Beispiel _x (X-Position), _y (Y-Position), _alpha (aktuelle Alpha-Einstellung) und _rotation (aktuelle Drehung). Nebenbei: Man findet alle Eigenschaften in der gleichnamigen Kategorie des Bedienfeldes für Aktionen. Bei Filmsequenzen gibt es diesbezüglich eine Besonderheit, denn man kann deren Eigenschaften auch zur Laufzeit verändern (und so beispielsweise _x und _y neu berechnen).

Eigenschaften setzen Man kann eine Eigenschaft einer Filmsequenz setzen, indem man die Instanz der Sequenz anvisiert und den Namen der Eigenschaft angibt. Man muss diesem Konstrukt dann nur den neuen Wert zuweisen. In der folgenden Aufgabe sehen Sie, wie einfach das sein kann.

Aufgabe: Verändern Sie die Alpha-Eigenschaft der Instanz einer Sequenz! 1. Erzeugen Sie in einer neuen Datei eine Schaltfläche und eine Filmsequenz. Nennen Sie die Instanz der Filmsequenz die_filmsequenz (im Instanz-Bedienfeld).

326

In Flash programmieren

2. Fügen Sie in der Schaltflächen-Instanz eine evaluate-Aktion ein, in der Sie die_filmsequenz._alpha=50 eintragen (siehe Abbildung 15.11). 3. Testen Sie den Film und Sie sehen, wie ein Klick auf die Schaltfläche den Alphawert der Filmsequenz auf 50% setzt.

Abbildung 15.11: Hier wird der Alphawert der Filmsequenz auf 50% gesetzt.

Neben der soeben gezeigten Variante kann man auch die setProperty-Aktion wie in Abbildung 15.12 verwenden. Kommen wir aber noch einmal auf die kryptische Variante zurück. Sie ist immer in der Objekt-Eigenschaft-Syntax gehalten (objekt.eigenschaft). Da ein spezielles Objekt (wie zum Beispiel eine Filmsequenz in einer anderen Filmsequenz) mit einer ähnlichen Notation (der so genannten Punktnotation) angesprochen werden kann, ist zum Beispiel diese Zeile zulässig: filmsequenz.filmsequenzInDerFilmsequenz._alpha=50

327

ActionScripting-Anwendungen für erweiterte Interaktivität

Abbildung15.12: Bei der Aktion setProperty kann man alle Angaben in den Parametern ausfüllen (was eventuell ein wenig einfacher ist).

Eigenschaften auslesen Neben dem Setzen von Eigenschaften ist natürlich auch das Auslesen von Eigenschaften möglich. Das ist in der gleichen Notation wie im vorigen Abschnitt möglich. Folgende Zeile ist dadurch möglich: ausgabe="Aktueller Alphawert: "+filmsequenz._alpha+"%"

Bei einem Alphawert der Filmsequenz filmsequenz von 20% wird dabei die Variable ausgabe auf den Wert Aktueller Alphawert: 20% gesetzt. Selbstverständlich kann man auch das Setzen einer Eigenschaft mit dem Auslesen einer solchen verbinden und somit einer Eigenschaft den Wert einer anderen zuweisen (und gegebenenfalls den Wert zuvor um beispielsweise 10 verringern).

Aufgabe: Erstellen Sie Schaltflächen, welche die Alpha-Eigenschaft einer Sequenz erhöhen und verringern! In dieser Aufgabe werden Sie sowohl Eigenschaften setzen als auch auslesen. 1. Sie benötigen zwei Schaltflächen und eine Filmsequenz auf der Bühne. Nennen Sie die Instanz der Filmsequenz (wie schon zuvor über das Instanz-Bedienfeld) die_filmsequenz.

328

In Flash programmieren

2. Fügen

Sie in eine Schaltfläche eine evaluate-Aktion ein, in der Sie die_filmsequenz._alpha=die_filmsequenz._alpha-10 eintragen (siehe Abbildung

15.13). Durch einen Klick wird dann der Alphawert der Filmsequenz um 10% verringert.

Abbildung 15.13: Hier verringern wir den Alphawert der Filmsequenz um 10%.

3. Fügen Sie in der anderen

Schaltfläche eine evaluate-Aktion ein, in der Sie die_filmsequenz._alpha=die_filmsequenz._alpha+10 eintragen.

4. Testen Sie den Film!

»Hausgemachte« Eigenschaften erstellen Die von Flash mitgelieferten Eigenschaften einer Filmsequenz sind alle sichtbar. Das gilt für die Position genauso wie beispielsweise für den Alphawert. Es gibt aber noch ein anderes Prinzip, das Ihnen noch mehr Möglichkeiten gibt: Ich nenne sie Hausgemachte Eigenschaften. Damit sind Variablen in Filmsequenzen gemeint, da sie für jede Instanz unterschiedlich sein können. Diese wirken sich nicht auf das Aussehen der Filmsequenz aus (es sei denn, Sie geben sie beispielsweise in einem Textfeld aus). Wenn Sie das Prinzip einmal verstanden haben, werden Sie es zu schätzen wissen.

329

ActionScripting-Anwendungen für erweiterte Interaktivität

15.3 Zusammenfassung Wenn Sie es einmal verstanden haben, ist die Programmierung in Flash recht einfach. Der schwere Teil ist, zu wissen, was man eigentlich zu tun hat, um ans Ziel zu kommen. Wenn man das weiß, ist es nur noch Routine, um es in die Realität umzusetzen. Wenn Sie sich gut mit dem Umgang des Anvisierens von Variablen und Eigenschaften vertraut gemacht haben, werden Sie unaufhaltsam sein. In diesem Kapitel haben wir verschiebbare Filmsequenzen kennen gelernt. Außerdem haben wir uns mit zwei wichtigen Programmierkonzepten beschäftigt: Variablen und Eigenschaften.

15.4 Workshop F&A F

Ich habe in der Instanz einer Filmsequenz die Aktion startDrag im Ereignis mouseDown eingefügt und per stopDrag in mouseUp wieder aufgelöst. Das funktioniert ganz gut. Wieso haben wir das über eine Schaltfläche in der Filmsequenz gelöst? A

F

Ich habe einen dynamischen Text auf die Bühne gebracht und mit der Variablen zaehler verknüpft. In einer Schaltfläche steht der Code zaehler=zaehler+1. Wenn ich den Film teste, erhalte ich als Ergebnis nur eine Reihe von Einsen, die sich immer um eine Ziffer verlängert. A

330

Es sieht nur so aus, als ob diese Lösung funktionieren würde. Die Filmsequenz wird hier nämlich immer verschoben, wenn der Anwender klickt – auch wenn das außerhalb der Filmsequenz ist. Nur über eine Schaltfläche kann man kontrollieren, in welchem Bereich der Anwender klicken muss, um eine Aktion auszulösen.

Mit dem Pluszeichen werden Zeichenketten und Zahlen verknüpft. Nur wenn links und rechts vom Pluszeichen Variablen sind, die Zahlen beinhalten, wird eine mathematische Addition ausgeführt. Eine Variable wird erst einmal als Zeichenkette angesehen. Eine Lösung wäre, den Code zaehler++ zu verwenden. Die andere Variante wandelt die erste Variable in eine Zahl um: zaehler=Number(zaehler)+1 Zu diesem Thema werden Sie später noch mehr erfahren.

Workshop

F

Ich habe die Eigenschaft IQ in der Instanz einer Filmsequenz auf 55 gesetzt (per dieSequenz.IQ=55). Bei einer anderen Filmsequenz habe ich den Wert dieser Eigenschaft auf 120 gesetzt. Wieso verhalten sich die beiden Instanzen nun nicht unterschiedlich? A

Wenn Sie eine eingebaute Eigenschaft (wie zum Beispiel _x) verändern, wird sich das sofort auswirken. Sollten Sie aber (wie in diesem Fall) eine selbst erstellte Eigenschaft verwenden, wird sich nichts verändern, solange die Eigenschaft nicht in irgendeiner Aktion eingesetzt wird.

Übungsaufgaben 1. Woher weiß Flash, welche Filmsequenz Sie ziehen wollen, wenn Sie die Aktion startDrag verwenden? a. Das ist eindeutig, da man die Filmsequenz verschiebt, auf die man klickt. b. Flash weiß das nicht – darum muss man es immer im Ziel-Feld angeben. c. Flash wird die Filmsequenz ziehen lassen, die im Ziel-Feld eingetragen ist und wenn da nichts steht, dann die Filmsequenz, in der sich die Aktion befindet. 2. Wie erstellt man eine neue Variable? a. Man wartet solange, bis der Abspielkopf mindestens Bild 2 erreicht hat. b. Man verwendet sie einfach, wenn man sie benötigt. c. Durch das Einfügen der Aktion newVariable 3. Muss man ActionScript verwenden, um den Alphawert einer Filmsequenz zu verändern? a. Ja, man kann das nur über die _alpha-Eigenschaft regeln. b. Nein, man kann auch die _visibility-Eigenschaft verwenden. c. Nein, man kann das auch »von Hand« im Effekt-Bedienfeld einstellen.

331

Smart-Filmsequenzen

6 1

Smart-Filmsequenzen

Im letzten Kapitel haben wir die Programmierung studiert. Das mag für manche technischer gewesen sein, als Ihnen lieb war. Für andere war es nicht technisch genug. Diese Trennung ist normal. Manche drücken ihre Kreativität aus, indem sie Puzzles lösen, während andere artistische Vorlieben haben. Ein Vorteil von Flash ist, dass es sich für beide Gruppen eignet – und eine Smart-Filmsequenz ist ein Beispiel dafür. Eine Smart-Filmsequenz ist eine Art von Filmsequenz, die Programmcode enthält, so dass eine technisch nicht versierte Person diese Sequenz nutzen kann, ohne wissen zu müssen, wie sie genau funktioniert. Jeder kann eine Smart-Filmsequenz anwenden. Je nachdem, welche Funktionen eingebaut wurden, kann man mit einer solchen Sequenz unglaubliche Sachen machen. In diesem Kapitel werden Sie: 쐽

herausfinden, wie man einige der Smart-Filmsequenzen anwendet, die mit Flash ausgeliefert wurden,

쐽

die Grundlagen erlernen, wie man eine Smart-Filmsequenz selbst erstellt und

쐽

die Anwendung vom Smart-Filmsequenzen in Ihren eigenen Filmen üben.

Sie werden also lernen, wie man Smart-Filmsequenzen erstellt und anwendet – allerdings mit dem Schwerpunkt auf der Anwendung.

16.1 Was ist eine Smart-Filmsequenz? Ich habe Smart-Filmsequenzen als Filmsequenzen mit Programmcode definiert. Allerdings wird nicht jede Filmsequenz mit einer Aktion darin sofort zu einer Smart-Filmsequenz. Diese haben nämlich für jede Instanz separat gespeicherte Eigenschaften, die man in jeder Instanz neu belegen kann. Sie werden noch genau lernen, wie man solche Smart-Filmsequenzen erstellt, allerdings werden Sie zuvor eine solche Sequenz anwenden, die bereits mit Flash installiert wurde.

Aufgabe: Verwenden Sie das Menü SMART-FILMSEQUENZEN! 1. Wählen Sie in einer neuen Datei FENSTER / ALLGEMEINE BIBLIOTHEKEN / SMARTFILMSEQUENZEN. Hier finden Sie alle Smart-Filmsequenzen, die mit Flash geliefert wurden. Ziehen Sie die Smart-Filmsequenz namens Menu in Ihren Film (siehe Abbildung 16.1). Damit können Sie gleich ein benutzerdefiniertes Auswahlmenü erzeugen.

334

Was ist eine Smart-Filmsequenz?

Abbildung 16.1: Die Smart-Filmsequenz Menu dient zum Erzeugen von benutzerdefinierten Auswahlmenüs.

2. Schließen Sie die Smart-Filmsequenz-Bibliothek, um Verwirrung zu vermeiden. Als Sie die Sequenz in Ihren Film gezogen haben, wurde sie automatisch auch in die Bibliothek Ihrer Datei kopiert. 3. Wählen Sie die Instanz von Menu aus und dann FENSTER / BEDIENFELDER / SEQUENZPARAMETER, um das gleichnamige Bedienfeld zu öffnen (siehe Abbildung 16.2).

Abbildung 16.2: Das Sequenzparameter-Bedienfeld ist immer dann verfügbar, wenn eine Instanz einer Smart-Filmsequenz ausgewählt wurde.

4. Im Sequenzparameter-Bedienfeld können Sie für diese Instanz der Smart-Filmsequenz die Eigenschaften einstellen. Jede Eigenschaft ist mit Name und Wert aufgelistet. Wenn Sie auf einen Wert doppelklicken, können Sie ihn verändern. In items finden

335

Smart-Filmsequenzen

Sie hier die einzelnen Namen der Auswahl-Einträge. Doppelklicken Sie auf den Wert von items, der als (Array[]) angezeigt wird. Es wird sich das Fenster Werte öffnen (siehe Abbildung 16.3).

Abbildung 16.3: Hier sieht man das Werte-Fenster, das sich immer dann öffnet, wenn man ein Array bearbeiten will.

5. Klicken Sie auf den obersten Eintrag und ändern Sie ihn in Klein. Der zweite soll Mittel und der dritte Eintrag Groß heißen. Die beiden letzten Felder können Sie löschen, indem Sie sie auswählen und dann die Schaltfläche mit dem Minuszeichen drücken. 6. Testen Sie den Film und Sie werden sehen, wie diese Smart-Filmsequenz arbeitet. Sie können viele Einträge verwenden und brauchen sich trotzdem nicht darum zu kümmern, wie groß der Auswahlbereich aufklappen soll, denn die Smart-Filmsequenz erledigt das automatisch für Sie. Ein Feld (in Englisch Array) ist eine spezielle Variable, die mehrere Werte hat. Denken Sie daran, dass eine Variable einen Namen und einen Wert hat. Wenn dieser Wert ein Feld ist, hat die Variable in Wirklichkeit mehrere Werte. So können Sie die verschiedenen Typen der Parameter sehen. Kehren Sie zur Instanz der Smart-Filmsequenz zurück und sehen Sie sich noch einmal die Sequenzparameter an. Die zweite Eigenschaft von menu heißt style und hat momentan den Wert Auto. Wenn Sie darauf doppelklicken, können Sie zwischen drei Werten auswählen: Auto, Mac und Win. Hier können Sie das Verhalten des Menüs anpassen. Was aber viel interessanter ist: Es handelt sich bei dieser Auswahl um den Variablentyp Liste. Der Unterschied zum Feld ist, dass man hier nur aus einer fest vorgegebenen Anzahl von Optionen auswählen kann, während man im Array selbst Elemente löschen und hinzufügen kann. In der Smart-Filmsequenz, die Sie erstellen werden, wird eine »Standard«-Variable verwendet. Wenn man den Wert verändern will, wird man weder ein Werte-Fenster noch ein schickes Auswahlmenü vorfinden. Statt dessen werden Sie ein einfaches Textfeld erhalten, in dem Sie den Wert anpassen können (siehe Abbildung 16.4).

336

Was ist eine Smart-Filmsequenz?

Abbildung 16.4: In Ihrer selbstgebauten SmartFilmsequenz werden Sie Eigenschaften erstellen, die man »von Hand« verändern kann.

Nebenbei: Sie können weitere Menu-Instanzen auf die Bühne ziehen und ganz eigene Werte für diese festlegen. Das ist ja genau das Prinzip hinter Smart-Filmsequenzen. Der Programmiercode ist in der Smart-Filmsequenz eingebettet und Sie brauchen sich nur noch um die Anpassung der Parameter zu kümmern.

Smart-Filmsequenzen erstellen Wenn Sie eine eigene Smart-Filmsequenz erstellen wollen, kann das eine Menge Arbeit bedeuten. Allerdings ist die Verwendung solcher Sequenzen – wie wir im letzten Abschnitt gesehen haben – sehr zeitsparend. Ich werde hier nicht auf jedes Detail der Erstellung von Smart-Filmsequenzen eingehen, sondern nur die Grundlagen vorstellen. Zum einen werden Sie Smart-Filmsequenzen dann nicht mehr als Mysterium ansehen und zum anderen können Sie den Prozess zur Erstellung guter Smart-Filmsequenzen lernen. Auch wenn Sie nie selbst eine Smart-Filmsequenz erstellen wollen, können Sie am Ende dieses Kapitels einem Kollegen erklären, wie er eine solche Sequenz für Sie entwickeln soll, damit Sie diese für Ihre Zwecke einsetzen können. Es ist wirklich so: Wenn Sie erst einmal eine genaue Vorstellung davon haben, welche Smart-Filmsequenz Sie benötigen, ist der Rest nur noch eine Sache der Ausführung. Angenommen, Sie wollen einen Kreis über den Bildschirm wandern lassen. Er soll selbstständig erkennen, wann er das Ende der Bühne erreicht hat und dann wieder an der anderen Seite starten. Dazu können Sie eine Filmsequenz erstellen, in die Sie folgenden Programmcode integrieren:

337

Smart-Filmsequenzen

onClipEvent (enterFrame) { _x = _x+10; if (_x>550) { _x = 0; } }

Wie Sie noch aus dem letzten Kapitel wissen, bezeichnet _x die Eigenschaft der X-Position. Mit diesem Code wird also jedes Mal, wenn auf ein neues Bild gesprungen wird (enterFrame) die X-Position um zehn Bildpunkte erhöht (_x = _x+10). Die darauf folgenden drei Zeilen bewirken, dass die X-Position immer auf Null zurückgesetzt wird, wenn sie größer als 550 (die Standard-Bühnenbreite) ist. Wenn Sie jetzt mehrere Instanzen brauchen, müssen Sie den Code in jede weitere Instanz kopieren. Dabei können Sie aber auch die zweite Zeile in _x = _x+20;

oder _x = _x+5;

ändern. Das Problem dabei ist folgendes: Wenn sich etwas Gravierendes ändern sollte (zum Beispiel die Bühnenbreite), müssten Sie jede Instanz korrigieren, da jede Instanz eine eigene Kopie des Codes besitzt! Wenn Sie den Code allerdings in das Master-Symbol der Filmsequenz schreiben würden, wäre die Sache einfacher. Es stellt sich dann allerdings die Problematik, dass nur in Instanzen von Filmsequenzen das Ereignis enterFrame definiert ist. Die Lösung hierfür ist (noch) recht einfach, denn man kann ja eine Instanz mit dem Code versehen und diese in eine neue Filmsequenz verpacken. Das schauen wir uns einmal in der Praxis an. Danach werden wir weitere Probleme betrachten, die sich ergeben (aber mit Smart-Filmsequenzen lösbar sind).

Aufgabe: Beginnen Sie, Ihre erste Smart-Filmsequenz zu erstellen! In dieser Aufgabe werden die Grundlagen für die Erstellung einer Smart-Filmsequenz gelegt. 1. Zeichnen Sie in einer neuen Datei einen Kreis, den Sie eine Filmsequenz namens Kreis konvertieren. Wählen Sie die Instanz aus und konvertieren Sie diese erneut in eine Filmsequenz namens Sequenz mit der Kreis-Sequenz. 2. Doppelklicken Sie auf die Instanz von Sequenz mit der Kreis-Sequenz, um in das Master-Symbol zu gelangen. Hier finden Sie eine Instanz von Kreis vor. Wählen Sie diese aus und öffnen Sie das Bedienfeld für Aktionen. Fügen Sie eine evaluate-Aktion ein, die Sie nach _x = _x+10 modifizieren. Beachten Sie, dass die Aktion auf das Ereig-

338

Was ist eine Smart-Filmsequenz?

nis load reagiert. Wählen Sie die erste Zeile aus und markieren Sie die Option BILD im Quelltext enterFrame erscheint (siehe Abbildung 16.5). Wenn Ihr Film mit 12 Bps abspielt, wird diese Aktion zwölfmal in der Sekunde aufgerufen.

EINGEBEN, damit

Abbildung 16.5: Durch diesen Code wird sich der Kreis nach rechts bewegen.

3. Fügen Sie eine if-Aktion (aus dem Ordner Aktionen) direkt nach der Zeile _x = _x+10 ein. Für diese Aktion müssen Sie eine Bedingung festlegen, die wahr (true) sein muss, damit der Quelltext in den geschweiften Klammern ausgeführt wird. Schreiben Sie in das Feld Bedingung also _x>550, damit die folgende Aktion ausgeführt wird, wenn der Kreis am Bühnenrand angekommen ist. Fügen Sie zwischen die geschweiften Klammern der if-Aktion eine evaluate-Aktion ein, die Sie mit dem Ausdruck _x=0 versehen. Das Ergebnis sehen Sie in Abbildung 16.6. 4. Speichern Sie die Datei ab, da wir später darauf aufbauen wollen. Testen Sie den Film. Ziehen Sie mehrere Instanzen von Sequenz mit der Kreis-Sequenz auf die Bühne und ändern Sie die Zahl 550 im Code auf 100. Es werden alle Instanzen aktualisiert. Genauso ist das, wenn Sie die 10 in eine 20 oder 5 verwandeln. So weit so gut. Was ist aber, wenn sich die Instanzen unterschiedlich schnell bewegen sollen? Der Code muss an der gleichen Stelle bleiben wie zuvor, da sonst unser altes Problem wieder auftritt. Allerdings können wir eine benutzerdefinierte Eigenschaft namens speed (Geschwindigkeit) einführen, die in jeder Instanz unterschiedlich sein kann.

339

Smart-Filmsequenzen

Abbildung 16.6: Die fertige Version des Codes

Aufgabe: Fügen Sie eine benutzerdefinierte Eigenschaft hinzu! In dieser Aufgabe werden Sie dem wandernden Kreis die Eigenschaft speed zuordnen. 1. Öffnen Sie die Datei der letzten Aufgabe. Wählen Sie die Instanz Kreis aus, die Sie im Master-Symbol von Sequenz mit der Kreis-Sequenz finden. Öffnen Sie das Bedienfeld für Aktionen und ändern Sie die Zeile _x = _x+10 in _x = _x+speed (siehe Abbildung 16.7). 2. Während Sie sich noch im Master-Symbol von Sequenz mit der Kreis-Sequenz befinden, können Sie unter der Instanz von Kreis ein dynamisches Textfeld erstellen, in das Sie eine 0 eintragen und das mit der Variablen speed verknüpft werden sollte (siehe Abbildung 16.8). Vergrößern Sie den Textblock so weit, dass er zwei Ziffern nebeneinander darstellen kann. 3. Wir erstellen gerade eine Smart-Filmsequenz, die es erlaubt, die Geschwindigkeiten für jede einzelne Instanz neu festzulegen. Bevor wir so weit sind, werden wir das Verhalten testen, indem wir ein paar Zahlen einprogrammieren. 4. Kehren Sie in die Hauptszene zurück und entfernen Sie alle Instanzen von Sequenz mit der Kreis-Sequenz von der Bühne. Ziehen Sie nun eine »frische« Instanz aus der Bibliothek. Benennen Sie diese mit eineSequenz im Instanz-Bedienfeld. Alles was Sie wollen, ist, den Wert von speed einzustellen, um zu sehen, ob die Filmsequenz funktioniert. Dazu wählen Sie das erste Schlüsselbild aus und öffnen das Bedienfeld für Aktionen. Hier fügen Sie eine evaluate-Aktion ein, in die Sie den Ausdruck eineSequenz.speed=10 eingeben.

340

Was ist eine Smart-Filmsequenz?

Abbildung 16.7: Hier wird die fest eingestellte 10 durch eine selbst definierte Variable speed ersetzt.

Abbildung 16.8: Erstellen Sie einen Textblock, um den Wert der Geschwindigkeit zu überwachen.

341

Smart-Filmsequenzen

5. Testen Sie den Film. Der Kreis wird sich nicht über die Bühne bewegen, aber man sieht die 10 im Textfeld. Die Eigenschaft speed wurde also in Sequenz mit der Kreis-Sequenz richtig gesetzt. Der Kreis hat sich aber nicht bewegt, da die Aktion in Kreis definiert wurde, der aber nicht über eine speed-Variable verfügt. Man muss dem Kreis also beibringen, dass er so etwas ausführen kann: »Setze meine Eigenschaft _x auf _x plus, den Wert der Eigenschaft speed der Filmsequenz, in der ich mich befinde!« Das funktioniert, indem man der Eigenschaft den Zusatz _parent. voranstellt.

Aufgabe: Verändern Sie die benutzerdefinierte Eigenschaft so, dass Sie auf _parent zeigt! 1. Die vorausgegangene lange Erklärung lässt sich schnell umsetzen, indem man nur die Zeile _x = _x+speed in _x = _x+_parent.speed umwandelt. Testen Sie danach den Film. 2. Es funktioniert. Nun können wir die Sequenzparameter-Funktionalität von SmartFilmsequenzen nutzen, um diese eigenartige Aktion im ersten Bild loszuwerden. 3. Damit eine Filmsequenz zu einer Smart-Filmsequenz wird, brauchen Sie lediglich anzugeben, welche Parameter man durch den Anwendungsautor verändern lassen will. Öffnen Sie dazu Ihre Bibliothek und wählen Sie die Sequenz mit der Kreis-Sequenz aus. Wählen Sie nun SEQUENZPARAMETER DEFINIEREN aus dem Optionsmenü. Es erscheint ein Fenster, das Sie in Abbildung 16.9 sehen. 4. Damit aus unserer Filmsequenz eine Smart-Filmsequenz wird, brauchen wir nur noch speed als Eigenschaft zu definieren, die man von außen verändern kann. Klicken Sie dazu auf die Schaltfläche mit dem Pluszeichen und doppelklicken Sie danach auf varName. Ändern Sie den Variablennamen in speed. Außerdem können Sie den Standardwert (defaultValue) auf 10 setzen. Klicken Sie dann auf OK. 5. Löschen Sie die Aktion in Bild 1. Ziehen Sie nun mehrere Instanzen der Sequenz mit der Kreis-Sequenz auf die Bühne und verändern Sie jeweils über das Sequenzparameter-Bedienfeld die Werte für speed. Testen Sie den Film. Sie haben soeben eine Smart-Filmsequenz erschaffen. Auch wenn es so aussieht, dass man dafür eine Menge Arbeit aufwenden musste, habe ich doch einige Umwege gemacht, denn es ist von Vorteil, wenn Sie beispielsweise wissen, wie man Variablen von Sequenzen ausliest, in welche die Sequenz mit dem Script eingebunden ist (_parent).

342

Was ist eine Smart-Filmsequenz?

Abbildung 16.9: Nachdem Sie hier die Eigenschaften festgelegt haben, die von außen verändert werden dürfen, ist die Filmsequenz eine Smart-Filmsequenz.

Eine .swf-Datei für Sequenzparameter verwenden Der Quellcode einer Smart-Filmsequenz befindet sich in der Sequenz. Der Autor, der die Smart-Filmsequenz anwendet, braucht nur die Parameter von außen zu verändern, wobei das Sequenzparameter-Bedienfeld die Schnittstelle bildet. Allerdings kann man diese Schnittstelle auch durch eine in Flash erzeugte Schnittstelle ersetzen – nämlich eine .swfDatei. Diese .swf-Datei (sie wird als benutzerdefinierte Oberfläche bezeichnet) kann alles tun, was auch ein Flash-Film kann. Denken Sie aber dennoch immer an den Einsatzzweck. Der einzige wahre Zweck ist, die Parameter einzustellen, die sonst über das Sequenzparameter-Bedienfeld modifiziert werden müssen. Eine Smart-Filmsequenz unterscheidet sich in Ihrer Bibliothek durch ein anderes Symbol von einer normalen Filmsequenz (siehe Abbildung 16.10). Wenn Sie nun die Smart-Filmsequenz auswählen und im Optionsmenü den Punkt SEQUENZPARAMETER definieren, gelangen Sie in das Fenster Sequenzparameter definieren. Hier finden Sie dann ein Feld namens VERKNÜPFUNG MIT BENUTZERDEFINIERTER OBERFLÄCHE. Geben Sie an dieser Stelle einfach an, wo sich die .swf-Datei mit Ihrer Oberfläche befindet. Das ist schon das ganze Geheimnis.

343

Smart-Filmsequenzen

Abbildung 16.10: Eine Smart-Filmsequenz unterscheidet sich in Ihrer Bibliothek durch ein anderes Symbol von einer normalen Filmsequenz.

Abbildung 16.11: Man kann den Dateinamen einer .swf-Datei angeben, die als benutzerdefinierte Oberfläche dienen soll.

344

»Radio Buttons« verwenden

16.2 »Radio Buttons« verwenden Die so genannten Radio Buttons sind Schaltflächen, die sich wie die Knöpfe an alten Autoradios verhalten, bei denen man nur eine auf einmal herunterdrücken konnte. Auf diese Weise kann man den Anwender auf eine Auswahl festnageln, wenn nur eine Möglichkeit immer alle anderen ausschließt (zum Beispiel weiblich/männlich). In der folgenden Aufgabe werden Sie damit vertraut gemacht.

Aufgabe: Verwenden Sie »Radio Button« als Smart-Filmsequenz! In dieser Aufgabe erstellen wir eine Abfrage nach dem Wissensstand des Anwenders (Anfänger/Fortgeschrittener/Experte). 1. Öffnen Sie in einer neuen Datei die Smart-Filmsequenz-Bibliothek und ziehen Sie eine Instanz von RadioButton auf die Bühne. Schließen Sie die Bibliothek dann wieder. 2. Wählen Sie die Instanz auf der Bühne aus und öffnen Sie das Sequenzparameter-Bedienfeld (siehe Abbildung 16.12). Wie Sie sehen, kann die Person, die eine Smart-Filmsequenz erstellt, eine Beschreibung eingeben, die angibt, wie man mit der Sequenz umgehen muss.

Abbildung 16.12: Bei RadioButton kann man viele Einstellungen für jede Instanz vornehmen. Außerdem wurde eine Beschreibung eingefügt.

345

Smart-Filmsequenzen

3. Bei _name sollte man einen eindeutigen Namen für den Radio Button eintragen – lassen Sie radioBox1 eingestellt. Bei checked gibt man den Standardwert an, mit dem dieser Radio Button zu Beginn ausgewählt sein soll. Unter label kann man eintragen, welches Wort neben der Schaltfläche erscheinen soll. Tragen Sie hier Anfänger ein. Es bleibt noch style, wo Sie wieder angeben können, ob das Design Windows oder Macintosh angeglichen werden soll. 4. Kopieren Sie die Instanz und fügen Sie sie noch zweimal ein. Stellen Sie sicher, dass die beiden neuen eindeutige Namen (radioBox2 und radioBox3) haben und geben Sie bei Label Fortgeschrittener und Experte ein. 5. Testen Sie den Film. Lassen Sie ihn entweder geöffnet oder speichern Sie die Datei ab, da wir sie gleich noch einmal benötigen. Das ist ja schon nicht schlecht. Wenn man aber eine zweite Gruppe (zum Beispiel männlich/weiblich) benötigt, wird man zwischen allen fünf Schaltflächen auswählen müssen. Deshalb fasst man die zusammengehörigen Radio Buttons in einer Filmsequenz zusammen.

Aufgabe: Werten Sie Radio Buttons aus! 1. Verwenden Sie die Datei der Aufgabe, die wir soeben beendet haben. Zeichnen Sie ein Dreieck und wandeln Sie es in eine Schaltfläche namens Weiter um. 2. Stellen Sie sicher, dass sich die Schaltfläche in Bild 1 zusammen mit den Radio Buttons auf der Bühne befindet. Gehen Sie in Bild 2 und fügen Sie dort ein leeres Schlüsselbild ein ((F7)). Erzeugen Sie einen dynamischen Textblock, den Sie mit der Variablen message verknüpfen. Kehren Sie zu Bild 1 zurück. Dort werden wir gleich beim Druck auf die Schaltfläche die Radio Buttons abfragen und eine entsprechende Mitteilung erzeugen. 3. Wählen Sie die Instanz von Weiter aus und öffnen Sie das Bedienfeld für Aktionen. Fügen Sie eine evaluate-Aktion ein. Tragen Sie nun mitteilung="Sie haben nichts ausgewählt!" im Ausdruck-Feld ein. Fügen Sie direkt hinter der evaluate-Aktion eine if-Aktion ein. Die Bedingung der if-Abfrage soll radioBox1.getState() sein. Dieser Ausdruck liefert nur dann den Wert true zurück, wenn die radioBox1 ausgewählt ist. Mit anderen Worten: Alles was in den geschweiften Klammern der if-Aktion steht, wird nur noch ausgeführt, wenn man Anfänger ausgewählt hat. Fügen Sie also an dieser Stelle wieder per evaluate-Aktion die Zeile mitteilung="Willkommen als Anfänger!" ein. 4. Jetzt brauchen Sie nur noch hinter der ersten zwei weitere if-Aktionen einfügen, welche die beiden anderen Radio Buttons behandeln (siehe Abbildung 16.14).

346

»Radio Buttons« verwenden

Abbildung 16.13: Hier wird abgefragt, ob der Anwender den Radio Button Anfänger ausgewählt hat.

Abbildung 16.14: Die fertige Behandlung der Weiter-Schaltfläche.

347

Smart-Filmsequenzen

5. Fügen Sie in das erste Schlüsselbild eine Stop-Aktion ein und testen Sie den Film mehrmals mit unterschiedlichen Auswahlen.

16.3 Erweiterte Smart-Filmsequenzen erzeugen Auch wenn wir beim Thema Smart-Filmsequenzen nicht bis ins Detail gehen konnten, will ich Ihnen ein paar Tipps mit auf den Weg geben: Versuchen Sie von den Smart-Filmsequenzen zu lernen, die mit Flash ausgeliefert wurden. Wenn Sie eine Sequenz mögen, fragen Sie sich, was daran so faszinierend ist und behalten Sie das im Hinterkopf. Eine gute Smart-Filmsequenz ist die Zeitinvestition wert. Wenn Sie durch diese Technik beim späteren Arbeiten keine Zeit einsparen, haben Sie die Arbeit umsonst gemacht. Wenn Sie einmal wissen, was Sie genau brauchen, ist der Programmieraufwand das kleinere Problem. Sie sollten allerdings immer möglichst viele Situationen bedenken, in denen Ihre Smart-Filmsequenz eingesetzt werden könnte. Halten Sie die Sequenz so allgemein wie möglich. Dann ist sie die Mühe wert. Abschließend sei gesagt, dass Sie in Anhang F einige Online-Quellen finden, die immer Stoff zum Lernen bieten.

16.4 Zusammenfassung Smart-Filmsequenzen sind eine sehr schöne Neuerung in Flash. Erfahrene Flash-Programmierer können auf diese Weise ungewöhnliche Vorlagen schaffen, mit denen ein FlashAnfänger ohne Programmierkenntnisse sehenswerte Effekte in seinen Film einbringen kann. Eine Smart-Filmsequenz ist eine Filmsequenz mit Programmiercode. Sie lässt einen anderen Autor von außen bestimmte Eigenschaften verändern, ohne dass dieser sich mit den Scripts im Innern der Sequenz auseinandersetzen muss. Man kann es dem Anwendungsautor sogar noch einfacher machen, wenn man ihm eine angepasste Benutzeroberfläche zur Verfügung stellt. Gute Smart-Filmsequenzen sind zwar relativ zeitaufwendig in der Produktion, allerdings kann man im späteren Verlauf wieder viel Zeit einsparen.

348

Workshop

16.5 Workshop F&A F

Ich hatte eine Datei, die eine mit Flash ausgelieferte Smart Filmsequenz verwendete. Als ich wieder in der Datei arbeitete, stellte ich fest, dass die schöne .swf-Oberfläche der Smart Filmsequenz nicht mehr vorhanden war, sondern nur noch die Wertetabelle angezeigt wurde. Wie bekomme ich die Oberfläche wieder zurück? A

F

Wenn Sie in das Mastersymbol der Smart Filmsequenz in Ihrer Bibliothek schauen, können Sie im Optionsmenü der Bibliothek auf SEQUENZPARAMETER DEFINIEREN klicken. Im dann geöffneten Fenster können Sie auf das Ordnersymbol klicken, um den Namen der .swf-Datei einzutragen, die für die Oberfläche verantwortlich ist.

Müssen Smart-Filmsequenzen immer so kompliziert sein? A

Natürlich nicht. Zuerst einmal waren die Beispiele hier noch nicht so kompliziert. Smart-Filmsequenzen können viel umfangreicher sein. Allerdings machen auch sehr einfache Smart-Filmsequenzen Sinn: Wenn man beispielsweise immer ein Überschriftenformat an mehreren Stellen im Film benötigt, kann man das über eine simple Smart-Filmsequenz realisieren.

Übungsaufgaben 1. Smart-Filmsequenzen sind einfach Filmsequenzen, die Eigenschaften besitzen, welche der Autor über das Sequenzparameter-Bedienfeld verändern kann. a. Richtig b. Falsch, man ändert die Eigenschaften über das Effekt-Bedienfeld. c. Falsch, Smart-Filmsequenzen benötigen eine .swf-Datei als Benutzeroberfläche. 2. Flash 5 wird mit sehr wenigen Smart-Filmsequenzen ausgeliefert. Wenn man deren Möglichkeiten erforscht hat, muss man auf Flash 6 warten, um neue Filmsequenzen verwenden zu können. a. Richtig, es sei denn, es gibt eine Zwischenversion wie Flash 5.5. b. Falsch, denn man kann Smart-Filmsequenzen dazu verwenden, neue zu erschaffen (was auch als Sequenzmutation bekannt ist). c. Falsch, denn jeder begabte Flash-Anwender kann Smart-Filmsequenzen von Grund auf neu erschaffen.

349

Smart-Filmsequenzen

3. Radio Buttons sollten nur verwendet werden, um Musikstücke auszuwählen. a. Richtig, warum sonst sollten sie Radio Buttons heißen? b. Falsch, Radio Buttons können für jeden beliebigen Zweck verwendet werden. c. Falsch, denn Radio Buttons sollten für exklusive Auswahlen verwendet werden.

350

Filme mit dem Internet verknüpfen

7 1

Filme mit dem Internet verknüpfen

Da Sie nun wissen, wie man Bilder, Animationen, Schaltflächen und Interaktivität erzeugt, können wir uns damit beschäftigen, wie man all diese Daten zusammenfügt, um sie ins Internet zu stellen. In diesem Kapitel werden Sie lernen, wie man Flash-Filme in Internetseiten einbindet. Selbstverständlich kann man einen Flash-Film auf einem Computer lokal abspielen (wie beim Testen eines Films), allerdings besteht der richtige Spaß darin, den Film im Internet zu veröffentlichen, so dass jeder ihn sehen kann. In diesem Kapitel werden Sie: 쐽

Ihren Flash-Film mit dem notwendigen HTML-Dokument veröffentlichen,

쐽

Hyperlinks einbinden, damit der Anwender zu anderen Seiten weiterspringen kann oder es leichter hat, eine E-Mail zu versenden,

쐽

einige Möglichkeiten kennen lernen, wie man Flash und HTML kombinieren kann und

쐽

eine Einführung erhalten, wie man Flash-Dateien auf einen Internetserver stellen kann.

17.1 Standard-Veröffentlichung Viele Funktionen von Flash sind einfach zu bedienen. Die Veröffentlichung eines FlashFilms ist nicht nur einfach, sondern auch noch schnell. Eigentlich brauchen Sie nur DATEI / VERÖFFENTLICHEN wählen. Dabei wird nicht nur eine .swf-Datei exportiert, sondern gleichzeitig die für die Veröffentlichung notwendige HTML-Seite generiert. HTML steht für HyperText Markup Language. Eine HTML-Datei ist eigentlich nichts anderes als eine Text-Datei, die Informationen über das Aussehen einer Internetseite enthält. Ihr Internetbrowser wandelt diese Informationen in ein sichtbares Bild um. Hier wird auch angegeben, wo und wie ein Flash-Film eingebunden werden soll. Da Flash diese Datei für Sie anlegt, brauchen Sie nicht in den nächsten Buchladen zu laufen und sich Lektüre zu dieser Sprache zuzulegen. Allerdings kann dieses Wissen nicht schaden. In der folgenden Aufgabe werden Sie die Menüpunkte VERÖFFENTLICHEN und VORSCHAU FÜR VERÖFFENTLICHUNGEN aus dem DATEI-Menü kennen lernen.

352

Standard-Veröffentlichung

Aufgabe: Veröffentlichen Sie einen Film! 1. Erstellen Sie in einer neuen Datei eine einfache Animation. Speichern Sie diese in einen neuen Ordner (zum Beispiel test auf Ihrem Desktop) und nennen Sie die Datei testfilm. 2. Wählen Sie EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN aus dem DATEI-Menü. Wählen Sie hier die Registerkarte Formate aus und stellen Sie sicher, dass sowohl Flash als auch HTML aktiviert sind (siehe Abbildung 17.1). (Das ist die Standardeinstellung.)

Abbildung 17.1: Hier kann man einstellen, welche Dateien erstellt werden sollen, wenn Sie den Film veröffentlichen.

3. Wählen Sie nun DATEI / VERÖFFENTLICHEN aus. Es passiert noch nicht viel, dennoch können Sie ja einmal in Ihren test-Ordner schauen. Neben der Original-Datei (testfilm.fla) finden Sie die Dateien testfilm.html und eine testfilm.swf vor. Doppelklicken Sie auf die HTML-Datei und es wird sich Ihr Standardbrowser öffnen, der Ihren Flash-Film abspielt! (Aus irgendwelchen Gründen ist das Abspielen eines FlashFilmes in einem Browser für manche Leute ein echtes Erfolgserlebnis.) 4. Wenn Sie jetzt die .swf-Datei zusammen mit der HTML-Datei auf einen Webserver hochladen, kann jeder den Film sehen, wenn er die Adresse kennt und einen FlashPlayer installiert hat. Ich habe Ihnen gesagt, Sie sollen sicherstellen, dass die Optionen Flash und HTML aktiviert sind. Für jede dieser Optionen wird eine eigene Registerkarte eingeblendet, in der man einige Einstellungen bezüglich dieses Formats vornehmen kann. In unserem Fall finden

353

Filme mit dem Internet verknüpfen

Sie also eine Flash- und eine HTML-Registerkarte. Schauen Sie sich die Einstellungen ruhig einmal an – sie erklären sich eigentlich von selbst. Wir werden in Anhang C aber noch einmal darauf zurückkommen. Wenn Sie in der letzten Aufgabe statt DATEI / VERÖFFENTLICHEN den Weg DATEI / VORSCHAU FÜR VERÖFFENTLICHUNGEN / STANDARD ((F12)) gewählt hätten, wäre auch der Browser direkt geöffnet worden und Sie hätten sich einen Schritt gespart. Die Dateien in Ihrem test-Verzeichnis beginnen alle mit dem Namen der Original-Datei (testfilm). Wenn Sie die HTML-Datei zum Beispiel in index.html umbenennen wollen, ist das kein Problem. Sollten Sie aber die .swf-Datei umbenennen oder verschieben, kann das zu Komplikationen führen, da auch in der HTML-Datei der ursprüngliche Name (testfilm.swf) eingetragen wurde. Sie müssen ihn dann gegebenenfalls mit einem Editor (wie Notepad) von Hand umschreiben (er taucht an zwei Stellen auf). Damit Sie die HTML-Datei im Texteditor auch finden, müssen Sie nach DATEI / ÖFFNEN gegebenenfalls die Option Alle Dateien wählen (siehe Abbildung 17.2).

Abbildung 17.2: Wenn man beispielsweise auch HTML-Dateien in Notepad sehen will, muss man den Dateityp umstellen.

Der Dateiname wird in den folgenden beiden Zeilen (an verschiedenen Stellen) eingetragen, um den Flash-Film sowohl im Internet Explorer als auch im Netscape Navigator sichtbar zu machen. src="testfilm.swf" PARAM NAME=movie VALUE="testfilm.swf"

Auch wenn wir jetzt nicht HTML lernen wollen, müssen die beiden Einträge auf die richtige .swf-Datei zeigen.

354

Ein einfacher Hyperlink

Wenn Sie Veränderungen an der HTML-Datei vorgenommen haben, wird diese bei der nächsten Veröffentlichung wieder überschrieben (es sei denn, Sie haben die Datei zuvor umbenannt). Um das zu vermeiden, brauchen Sie nicht immer eine komplette Veröffentlichung durchzuführen, sondern es wird DATEI / FILM EXPORTIEREN reichen, wenn Sie bei Dateityp den Wert Flash Player auswählen. Auch das Testen des Films ((Strg)+(¢)) exportiert nur die .swf-Datei und hat den gleichen Effekt.

17.2 Ein einfacher Hyperlink Wenn wir einen Film schon ins Internet stellen, spricht eigentlich nichts dagegen, auch die Funktionalität des WWW auszunutzen und Hyperlinks zu definieren. Wie das funktioniert, haben wir ja bereits in Kapitel 14 im Abschnitt Navigation besprochen. In Abbildung 17.3 finden Sie aber eine kleine Gedankenstütze.

Abbildung 17.3: Mit der Aktion Get URL kann man einen Hyperlink erzeugen.

355

Filme mit dem Internet verknüpfen

Die Aktion Get URL können Sie überall anwenden, wo Aktionen erlaubt sind (Schaltflächen, Filmsequenzen und Schlüsselbilder). Sie funktioniert fast wie ein Go To, allerdings wird nicht zu einem Bild, sondern zu einer anderen Internetseite gesprungen. Es gibt aber noch zwei weitere Möglichkeiten, einen Hyperlink zu erzeugen. Jeder Text kann beispielsweise mit einem URL versehen werden. Wählen Sie dazu den betreffenden Textblock einfach aus und öffnen Sie das Zeichen-Bedienfeld. Hier finden Sie die Einstellung URL. Tragen Sie dort einfach die gewünschte Adresse ein (siehe Abbildung 17.4). Wenn Sie nun im Film auf diesen Text klicken, funktioniert er wie ein herkömmlicher Hyperlink.

Abbildung 17.4: Dieser Textblock ist nun als Hyperlink deklariert.

Es gibt neben der Aktion Get URL und dem Eintragen eines URLs über das Zeichen-Bedienfeld noch eine dritte Möglichkeit. Diese betrifft dynamischen Text. Hier gibt es nämlich die Möglichkeit, den Text als HTML-Code zu interpretieren und so kann man selbstverständlich auch einen Hyperlink produzieren. Wie das funktioniert, sehen Sie in der folgenden Aufgabe:

356

Ein einfacher Hyperlink

Aufgabe: Verwenden Sie dynamischen Text, um einen Hyperlink zu erzeugen! In dieser Aufgabe werden wir HTML-Text in einen Textblock schreiben. 1. Erstellen Sie in einer neuen Datei mit dem Text-Werkzeug einen Textblock (der Typ ist egal, da er sowieso ersetzt wird). 2. Wählen Sie aus dem Textoptionen-Bedienfeld das Verhalten Dynamischer Text aus und verknüpfen Sie den Textblock mit der Variable meinText. Aktivieren Sie die Option HTML (siehe Abbildung 17.5).

Abbildung 17.5: Auf diese Weise können Sie HTML in Flash verwenden.

3. Im ersten Schlüsselbild können Sie nun die meinText-Variable anpassen. Wählen Sie also das erste Bild aus und öffnen Sie das Bedienfeld für Aktionen. Fügen Sie die Aktion Set Variable ein und tragen Sie unter Variable den Text meinText ein. Bei Wert können Sie die HTML-Zeile Diese Seite ist super! eintragen. 4. Wenn Sie HTML verstehen, ist das gut. Wenn nicht, akzeptieren Sie das bitte für den Moment. Testen Sie den Film.

357

Filme mit dem Internet verknüpfen

17.3 Welche Internetaufgaben kann Flash noch erfüllen? Im Rest dieses Kapitels werden Sie einige nützliche Wege kennen lernen, wie man Flash mit normalem HTML kombinieren kann. Auch wenn Sie mit dieser Sprache nicht vertraut sind, sollten Sie daraus einige Informationen entnehmen können.

Fenster anvisieren Sicher ist Ihnen aufgefallen, dass bei der Verwendung eines Hyperlinks (zum Beispiel per Get URL-Aktion) die neue Seite in dem Fenster angezeigt wurde, in dem sich zuvor noch Ihr Flash-Film befand. Dieses Standardverhalten kann man aber noch variieren. Im Bedienfeld für Aktionen wird für die Aktion Get URL ein Parameterfenster angegeben. Dabei handelt es sich um das Zielfenster, in dem die anzuspringende Seite angezeigt werden soll. Allerdings gibt es noch so genannte Rahmen (frames), die eine einzelne Seite unterteilen können. Sicher haben Sie so etwas schon gesehen. Wenn links beispielsweise eine Linkliste angegeben ist und rechts der eigentliche Inhalt der Seite liegt, können Sie rechts scrollen, aber links bewegt sich die Liste keinen Millimeter. Das Fenster ist also offensichtlich in zwei Teile aufgeteilt. Das sind die erwähnten Rahmen. Für die genaue Anvisierung, in welchem Rahmen die neue Seite angezeigt werden soll, ist ebenfalls die Einstellung Fenster verantwortlich (siehe Abbildung 17.6).

Abbildung 17.6: Hier kann man das Zielfenster für den Hyperlink auswählen. Wert

Auswirkung

_self

lädt die nächste Seite in den Rahmen, in dem der Link liegt

_parent

lädt die Seite in den aktuellen Rahmen

_blank

zeigt die nächste Seite in einem neuen Browserfenster

_top

lädt die Seite auf die oberste Rahmen-Ebene

Tabelle 17.1: Die Werte für die Auswahl des Zielfensters von Get URL

358

Hochladen

E-Mails senden (mit dem mailto:-Befehl) Auch wenn es bessere Wege gibt, eine E-Mail über eine Webseite zu versenden, ist hier eine schnelle Variante: Geben Sie einfach die E-Mail-Adresse im URL-Feld von Get URL an. Damit Flash (oder besser: der Browser) auch weiß, dass es sich um eine E-Mail handelt, muss der Adresse noch ein mailto: vorangestellt werden. Das könnte dann so aussehen: mailto:[email protected]

Wenn der Anwender diese Aktion ausführt, wird ein neues E-Mail-Fenster geöffnet, in dem er nur noch den Text und eine Betreffzeile eintragen muss.

17.4 Hochladen Der wohl wichtigste Schritt in diesem Kapitel ist das Hochladen der Dateien auf einen Webserver. Auch wenn Sie auf Ihrem Computer den Flash-Film gut testen konnten, können andere Anwender den Film nur sehen, wenn Sie ihn zum Beispiel im Internet veröffentlichen. Der Vorgang des Hochladens ist bei vielen Anwendern unterschiedlich. Wenn Sie beispielsweise in einem Unternehmen arbeiten, in dem sich auch ein Webserver befindet, auf den Sie direkten Zugriff haben, brauchen Sie nur die Daten darauf zu kopieren (wie auf eine andere Festplatte). In den meisten Fällen haben Sie aber einen Online-Anbieter, bei dem Sie Ihre Homepage ablegen wollen. In diesem Fall werden die Daten mit einem speziellen Protokoll (meist FTP, was für »file transfer protocol« oder Datenübertragungsprotokoll steht) übertragen. Dazu benötigen Sie eine spezielle Software (die meist Ihr Online-Anbieter für Sie bereithält) und sowohl einen Benutzernamen (login) als auch ein Passwort. Natürlich müssen Sie auch die FTP-Adresse kennen, auf welche die Seite geladen werden soll. Da dieser Vorgang bei allen Online-Anbietern verschieden ist, habe ich an dieser Stelle keine Chance, die Vorgehensweise im Detail zu beschreiben. Bitte nehmen Sie gegebenenfalls mit Ihrem Online-Dienstanbieter Kontakt auf.

17.5 Zusammenfassung Wie Sie gesehen haben, ist das Veröffentlichen einer Flash-Seite so einfach wie auf einen Knopf zu drücken (Sie müssen es nachher noch per FTP oder Ähnlichem hochladen ...). Weitere Details werden in Anhang C besprochen. Sie haben außerdem gesehen, wie man Flash-Seiten mit HTML kombiniert, um beispielsweise Links darzustellen.

359

Filme mit dem Internet verknüpfen

17.6 Workshop F&A F

Wenn ich eine Vorschau veröffentliche, sieht alles gut aus, aber wenn ich dann die Dateien auf einen Webserver hochgeladen habe, funktioniert nichts mehr. Wieso? A

F

Das kann an etwa einer Million Dinge liegen. Bitte vergewissern Sie sich, dass alle benötigten Dateien mit hochgeladen wurden und dass Sie sich mit dem gleichen Namen in der gleichen Ordnerstruktur befinden wie auf Ihrer Festplatte.

Kann man mehr als einen Flash-Film pro Internetseite haben? A

Selbstverständlich, diese können sogar parallel ablaufen. Dazu können Sie beispielsweise Rahmen verwenden.

Übungsaufgaben 1. Wenn ich den Befehl VERÖFFENTLICHEN verwende, passiert nichts. Läuft da etwas falsch? a. Ja, denn beim Veröffentlichen gibt es einen Fehler, der in Flash 5 noch nicht beseitigt wurde. b. Möglicherweise, denn Sie müssen sich erst mit dem Internet verbinden, damit das funktioniert. c. Nein, denn diese Funktion exportiert lediglich alle nötigen Dateien. 2. Wenn man dieses Kapitel gelesen hat, sind die Grundlagen der Sprache HTML gelegt. Richtig oder Falsch? a. Richtig, ich habe mir alle Mühe gegeben, Ihnen HTML beizubringen. b. Falsch, denn Sie wissen immer noch nicht genau, wie HTML funktioniert, aber Sie haben einen Einblick in sein Potential bekommen. c. Falsch, denn erst wenn Sie dieses Buch komplett gelesen haben, können Sie sich einen HTML-Profi nennen. 3. Ist die Aktion Get URL die einzige Möglichkeit, einen Hyperlink zu erzeugen? a. Ja, außer man fügt ihn direkt in HTML ein. b. Nein, denn es gibt eine ganze Sektion von Aktionen in Flash, mit denen man Hyperlinks erstellen kann. c. Nein, denn es gibt einige Textoptionen, mit denen man automatisch Hyperlinks erstellen kann.

360

Modulare Internetseiten entwerfen

8 1

Modulare Internetseiten entwerfen

Man kann eine große Website als eine riesige Flash-Datei erstellen. Allerdings gibt es einige Vorteile, wenn man die Seite in kleine Unterabschnitte aufteilt. Nur um einige zu nennen, kann man gerade benötigte Bereiche nachladen und muss nicht jedem Anwender alles aufzwingen, wenn er einen großen Teil gar nicht sehen will. Außerdem können mehrere Mitarbeiter gleichzeitig am gleichen Projekt arbeiten, ohne dass einer die RiesenDatei blockiert. Sie brauchen zusätzlich bei Neuerungen nur einen Teil der Homepage zu überarbeiten und neu einzuspielen. Man kann sogar mehrere Sprachversionen einer Seite erzeugen, indem man den sprachlich verschiedenen Teil austauscht. Natürlich gibt es noch einige weitere Vorteile. In diesem Kapitel lernen Sie verschiedene Wege kennen, wie man in Flash eine modulare Internetseite erstellen kann. Sie werden 쐽

lernen, wie die Aktion Load Movie es Ihnen ermöglicht, einen Film in einem anderen abspielen zu lassen,

쐽

die Vorzüge und die Verwendung von geteilten Bibliotheken kennen lernen.

Auch wenn die technischen Gegebenheiten in diesem Kapitel nicht gerade schwierig sind, verzeihen die hier erzeugten Flash-Effekte keine Fehler. Wenn sie einmal funktionieren, ist das super. Die Schwierigkeit liegt allerdings nicht darin, wie man die Methoden anwendet, sonder wann. Deshalb werden wir zuerst besprechen, wie etwas funktioniert und danach ausgiebig darauf eingehen, wann und wo man es einsetzen sollte.

18.1 Die Aktion Load Movie Man kann in Flash mit der Aktion Load Movie einen Film in einem anderen abspielen lassen. Stellen Sie sich dazu einfach einen großen Hauptfilm vor, in den ein kleineres Fenster mit einem Unterfilm eingeblendet wird. Ein Grund für diese Technik ist, wenn man viele kurze Einzelfilme hat, die alle hintereinander (einer nach dem anderen) abgespielt werden sollen. Dabei kann man dem Anwender sogar die Wahl lassen, welcher Film abgespielt werden soll. Wenn er dann eine Schaltfläche anklickt, kann diese Flash befehlen, einen bestimmten Film nachzuladen und abzuspielen. Der Vorteil ist dann, dass der Anwender nur die Filmabschnitte herunterladen muss, die ihn wirklich interessieren. Es wird Zeit, dass wir uns mit einigen technischen Details von Load Movie auseinandersetzen; danach können Sie es gerne ausprobieren. Mit dieser Aktion kann man nur .swfDateien in .swf-Dateien laden. Deshalb müssen Sie den Film nicht nur testen, um das Ergebnis zu sehen, sondern beide Filme müssen schon als .swf vorliegen. Außerdem müssen Sie die Position angeben, wo der Film abspielen soll. Dafür kommt entweder eine

362

Die Aktion Load Movie

Filmsequenz als Ziel in Frage oder Sie können eine Stufe angeben. Wenn Sie einen Film in eine Filmsequenz laden, wird diese durch die .swf-Datei ersetzt. Wenn Sie als Ziel eine Stufe angeben, wird alles auf dieser Stufe durch die .swf-Datei ersetzt. Stufen sind ein Nummern-System in Flash, das angibt, in welcher Stapelanordnung sich geladene Filme befinden. Der Hauptfilm befindet sich immer in Stufe 0 (im Code heißt sie _level0). Wenn Sie einen Film nach _level1 und einen weiteren nach _level2 laden, erscheint der Film auf _level2 über allen anderen. Wenn Sie einen Film allerdings in eine Filmsequenz laden, hängt die Anordnung von der Ebene ab, in der sich die Filmsequenz befindet.

Aufgabe: Verwenden Sie Load Movie In dieser Aufgabe werden wir einen Film mit drei Unterfilmen erstellen und den Anwender entscheiden lassen, welchen der Filme er laden will. 1. Das Geheimnis hinter dieser Aufgabe heißt Organisation. Denken Sie immer daran: Wer hastet, erzeugt Müll. Erzeugen Sie einen neuen, leeren Ordner, in dem Sie alle Dateien dieser Aufgabe abspeichern. 2. Erstellen Sie einen neuen Film mit einer Breite und Höhe von 300 Bildpunkten ((Strg)+(M)). 3. Erzeugen Sie einen Tween Ihrer Wahl und färben Sie das tweenende Objekt ganz rot. Speichern Sie die Datei unter dem Namen rot.fla im soeben angelegten Ordner ab. Testen Sie den Film, damit die entsprechende Datei rot.swf erzeugt wird. 4. Ändern Sie die Objektfarbe nun in Grün und speichern Sie die Datei unter gruen.fla ab. Testen Sie auch diesen Film, um die .swf-Datei zu generieren. 5. Erstellen Sie die Datei blau.swf mit einem blauen Objekt und testen Sie wiederum. 6. Schließen Sie alle Dateien und erstellen Sie einen neuen Flash-Film namens haupt.fla, der eine Bühnengröße von 500x500 Bildpunkten hat. 7. Unser Hauptfilm soll die einzelnen Unterfilme in eine Filmsequenz laden. Deshalb zeichnen Sie bitte ein Quadrat, das exakt 300x300 Bildpunkte groß ist (ändern Sie die Größe einfach im Info-Bedienfeld). Stellen Sie sicher, dass eine Linie um das Quadrat vorhanden ist und entfernen Sie dann die Füllung. Konvertieren Sie den Rest des Quadrates in eine Filmsequenz namens Quadrat und nennen Sie die Instanz auf der Bühne dieSequenz.

363

Modulare Internetseiten entwerfen

8. Zeichen Sie in der Hauptszene ein Rechteck auf die Bühne, das Sie in eine Schaltfläche konvertieren. Öffnen Sie das Bedienfeld für Aktionen für diese Instanz. Fügen Sie eine Load Movie-Aktion ein und tragen Sie bei URL den Wert rot.swf ein. Bei Position sind die Werte Ziel und dieSequenz einzutragen, damit der neue Film in unserem Quadrat angezeigt wird (siehe Abbildung 18.1).

Abbildung 18.1: So wird ein Film in eine Filmsequenz geladen.

9. Testen Sie den Film. Es wird funktionieren, allerdings wird der Film im Quadrat zu weit rechts und zu weit unten angezeigt. Auch wenn der Film die gleiche Größe wie das Quadrat hat, wird er mit der oberen linken Ecke an der Mitte des Quadrates ausgerichtet.

Abbildung 18.2: Verändern Sie den Ausrichtungspunkt der Filmsequenz, in der ein Film geladen werden soll, damit er richtig angezeigt werden kann.

364

Wie man feststellt, wann ein Flash-Film komplett geladen wurde, und wie man ihn wieder entlädt

10. Um dieses Problem zu beheben, gehen Sie in das Master-Symbol von Quadrat. Ziehen Sie nun das Quadrat so, dass die obere linke Ecke mit dem Kreuz (das ja den Ausrichtungspunkt eines Symbols darstellt) übereinstimmt (siehe Abbildung 18.2). Sie können natürlich auch das Info-Bedienfeld verwenden und die linke obere Ecke des Quadrates nach 0,0 ausrichten. Wenn Sie nun in die Hauptszene zurückkehren, hat sich das Quadrat verschoben. Ziehen Sie es an seine ursprüngliche Stelle zurück. Nun haben Sie den Ausrichtungspunkt angepasst. 11. Erstellen Sie nun zwei weitere Schaltflächen, mit denen man die Filme gruen.swf und blau.swf laden kann.

18.2 Wie man feststellt, wann ein Flash-Film komplett geladen wurde, und wie man ihn wieder entlädt Da Sie nun wissen, wie man einen Film lädt, wäre es eine gute Idee, zu wissen, wie man ihn wieder entlädt. Vorher will ich Ihnen zeigen, wie man herausbekommt, ob ein zu ladender Film komplett geladen wurde. Das ist besonders dann wichtig, wenn es sich um einen großen Film handelt. Außerdem ist es gut, wenn man dem Anwender mitteilt (und auch demonstriert), dass der Film wirklich heruntergeladen wird. Vielleicht wollen Sie den Anwender auch solange warten lassen, bis der Film komplett geladen wurde. Um hinter den Ladezustand zu kommen, verwenden Sie die Eigenschaften _framesloaded und _totalframes. Wenn beide den gleichen Wert haben, wissen Sie, dass der Film komplett geladen wurde.

Aufgabe: Stellen Sie fest, ob ein Film komplett geladen wurde! 1. Erstellen Sie zuerst einen 300x300 Bildpunkte großen Film, der geladen werden soll. Erstellen Sie nun eine Bild-für-Bild-Animation, die in Bild 2 beginnt und etwa in Bild 60 endet. Wenn Sie einige Rastergrafiken haben, können Sie diese hier (ausnahmsweise) unbedacht verwenden, da eine größere Datei in dieser Aufgabe zu Demonstationszwecken besser ist (aber bitte nicht übertreiben). 2. Fügen Sie in das erste Bild eine Stop-Aktion ein, die von einer evaluate-Aktion gefolgt wird. Fügen Sie in dieser Aktion den Ausdruck waiting=true ein, um Flash zu befehlen, auf das vollständige Laden des Unterfilms zu warten (siehe Abbildung 18.3). 3. Fügen Sie in Bild 1 den statischen Text Lade... ein und erstellen Sie einen dynamischen Textblock mit einer 0 darin. Verknüpfen Sie ihn mit der Variablen prozent (siehe Abbildung 18.4).

365

Modulare Internetseiten entwerfen

Abbildung 18.3: Mit waiting=true wird Flash auf den Unterfilm warten, bis dieser komplett nachgeladen wurde.

Abbildung 18.4: Hier wird dem Anwender später angezeigt, wie weit der Ladevorgang fortgeschritten ist.

4. Fügen Sie in das letzte Bild des Films eine Go To-Aktion ein, die auf Bild 2 verweist. Damit wird sich die Animation wiederholen (und das erste Bild übersprungen).

366

Wie man feststellt, wann ein Flash-Film komplett geladen wurde, und wie man ihn wieder entlädt

5. Speichern Sie diesen Film in einem neuen Ordner als unterfilm.fla. Testen Sie den Film, damit die .swf-Datei erzeugt wird. Der Film wird beim Testen bei Bild 1 hängen bleiben. Das wird aber vom ladenden Film geregelt. 6. Zeichnen Sie in einer neuen Datei ein Quadrat mit der Größe 300x300 Bildpunkte und entfernen Sie die Füllung. Konvertieren Sie es in eine Filmsequenz namens Quadrat und benennen Sie die Instanz auf der Bühne mit dieSequenz. Doppelklicken Sie auf die Sequenz und richten Sie die obere linke Ecke des Quadrates mit dem Pluszeichen aus (wie in der letzten Aufgabe). Nach dem Verlassen des Master-Symbols müssen Sie das Quadrat neu positionieren. 7. Erzeugen Sie in der Hauptszene drei Schaltflächen. Fügen Sie in der ersten eine Load Movie-Aktion ein, die den unterfilm.swf in das Ziel dieSequenz laden soll. 8. Fügen Sie in den beiden anderen Schaltflächen je eine evaluate-Aktion ein. Eine soll den Ausdruck dieSequenz.play() und die andere den Wert dieSequenz.stop() haben. 9. Jetzt wird es Zeit, unserer Filmsequenz (dieSequenz) das Prozentrechnen beizubringen. Fügen Sie eine onClipEvent-Aktion ein, die auf EnterFrame reagieren soll. Jetzt benötigen wir eine evaluate-Aktion in diesem Ereignis. Sie soll den Ausdruck prozent=int(_framesloaded/_totalframes*100) auswerten. Damit wird der Prozentwert der geladenen Bilder errechnet und das int ist in diesem Fall nur für das Runden zuständig. 10. Allerdings sind Sie damit noch nicht fertig, denn Sie müssen noch abfragen, wann der Film komplett geladen wurde und ihn dann weiter spielen lassen. Erweitern Sie das Script deshalb wie in Abbildung 18.5.

Abbildung 18.5: Das fertige Script

11. Probieren Sie es aus. Wenn Sie etwas mehr Ladezeit provozieren wollen, können Sie die Filme ja einmal auf einen Webserver bringen und von dort anzeigen lassen.

367

Modulare Internetseiten entwerfen

Da Sie nun wissen, wie man einen Film lädt, und auch prüfen können, wie weit er geladen wurde, fehlt Ihnen nur noch eine Aktion: das Entladen von Filmen. Dies kann auf zwei Arten erfolgen. Die erste ist, einfach etwas anderes an dieselbe Stelle (in den vorigen Aufgaben: dieSequenz) zu laden. Die saubere Lösung wäre die Unload Movie-Aktion. Der einzige Trick dabei ist, dass Sie sich erinnern müssen, wohin Sie einen Film geladen haben, denn das müssen Sie beim Entladen wieder angeben.

18.3 Geteilte Bibliotheken Wenn Sie in einem Master-Symbol eine Veränderung vornehmen, wirkt sich das auf alle Instanzen aus. Stellen Sie sich einmal vor, Sie hätten eine Bibliothek, die von mehreren Dateien genutzt wird. Wenn Sie dort etwas ändern, werden alle anderen Dateien angeglichen. Das kann eine Menge Zeit sparen. Stellen Sie sich vor, Sie haben 100 Filme auf Ihrer Website und alle sind mit einem Symbol (Ihrem Logo) versehen. Jetzt ändert sich das Logo. Sie haben 100 Filme nachzuarbeiten und das nur wegen einer kleinen Änderung. Wenn Sie das Logo allerdings in einer geteilten Bibliothek aufgerufen hätten, würden Sie eine einzige Änderung vornehmen müssen und alle anderen Dateien hätten das mitbekommen. Andererseits können Sie auch einen Film bauen, der (je nach Sprache) unterschiedliche Bibliotheken verwendet. So können Sie im Handumdrehen Ihre Site in eine andere Sprache übersetzen und brauchen nicht alle Aktionen und Textblöcke zu durchsuchen. Eine geteilte Bibliothek wird im Grunde nur durch eine automatisierte Load Movie-Aktion realisiert. Sie können auch Schriftarten in eine solche Bibliothek einbetten und haben Download-Vorteile, wenn Sie mehrere Filme nachladen wollen, da die Schriftart nicht in jeder einzelnen Datei eingebunden wird, sondern nur einmal mit der geteilten Bibliothek herunter geladen werden muss.

Wie man geteilte Bibliotheken verwendet Die Verwendung einer geteilten Bibliothek beinhaltet zwei Schritte. Zuerst müssen Sie natürlich eine Bibliothek erstellen, die geteilt werden soll. Danach müssen Sie die Bibliothek mit jeder Datei verknüpfen, die darauf zugreifen können muss.

368

Geteilte Bibliotheken

Aufgabe: Erstellen Sie eine geteilte Bibliothek! In dieser Aufgabe werden Sie eine geteilte Bibliothek erstellen, die von anderen Dateien verwendet werden kann. 1. Erstellen Sie eine neue Datei und speichern Sie diese sofort als geteilt.fla in einen neuen Ordner namens BibTest. Importieren Sie eine Rastergrafik und löschen Sie die Instanz auf der Bühne (die Grafik bleibt ja noch in der Bibliothek). Importieren Sie auch noch eine Sound-Datei und zeichnen Sie ein Rechteck, das Sie in eine Filmsequenz namens Rechteck umwandeln. 2. In Ihrer Bibliothek befinden sich nun drei Objekte. Jede Datei kann ihre Bibliothek mit anderen teilen, wenn sie erst einmal als .swf-Datei vorliegt. Dazu müssen Sie die Datei also als .swf exportieren. Im Normalfall würden aber alle ungenutzten Bibliotheksobjekte nicht mitexportiert werden, um Speicherplatz einzusparen. Bei einer geteilten Bibliothek müssen aber alle Objekte exportiert werden, auch wenn sich der Speicherbedarf dadurch erhöht. Das machen wir dadurch wett, dass wir die Bibliothek in vielen Filmen verwenden. Damit jedes Objekt exportiert wird, erstellen wir für jedes Symbol eine Verknüpfung. 3. Damit wir eine Verknüpfung für die Sound-Datei erstellen können, wählen Sie diese bitte aus Ihrer Bibliothek aus und verwenden den Menüpunkt Verknüpfung... aus dem Optionsmenü. Standardmäßig ist hier Keine Verknüpfung eingestellt. Ändern Sie das auf Dieses Symbol exportieren. Nun wird der Sound immer mitexportiert. Sie müssen einen eindeutigen Namen angeben, damit Sie den Sound wiederfinden. Wählen Sie hier im Moment den Namen Sound 1 (siehe Abbildung 18.6).

Abbildung 18.6: Der Sound wird ab sofort mitexportiert.

4. Machen Sie so weiter und nennen Sie die Rastergrafik Bild 1 und das Rechteck Sequenz 1. Stellen Sie jeweils sicher, dass die Symbole exportiert werden. 5. Speichern Sie die Datei und testen Sie den Film, um die .swf-Datei zu generieren. 6. Die geteilte Bibliothek ist fertig und kann eingesetzt werden. Da Sie nun über eine geteilte Bibliothek verfügen, können Sie die Inhalte in einer anderen Datei auslesen und verwenden.

369

Modulare Internetseiten entwerfen

Aufgabe: Beginnen Sie, eine geteilte Bibliothek einzusetzen! Nun werden wir eine Datei erstellen, die auf geteilt zurückgreift. 1. Schließen Sie alle eventuell geöffneten Dateien. Erstellen Sie eine neue Datei und speichern Sie diese direkt als -Datei1.fla im Ordner BibTest aus der letzten Aufgabe. Wählen Sie nun DATEI / ALS GEMEINSAME BIBLIOTHEK ÖFFNEN. Wählen Sie die soeben erstellte Datei geteilt.fla aus. Es erscheint die Bibliothek, die wir in der letzten Aufgabe angelegt haben. Allerdings hat sie einen grauen Hintergrund. Nun können Sie die Symbole der geteilten Bibliothek verwenden, ohne den Speicherbedarf von Datei1 zu erhöhen. 2. Sie können nun Instanzen aus der gemeinsamen Bibliothek auf die Bühne ziehen oder auch in die Bibliothek von -Datei1 verschieben. Öffnen Sie doch einmal diese Bibliothek und fügen Sie die drei Objekte ein. Es sieht wie immer aus, allerdings befinden sich die Objekte nicht in der -Datei1-Bibliothek. Es handelt sich hier nur um Instanzen, die auf die geteilte Bibliothek verweisen (siehe Abbildung 18.7).

Abbildung 18.7: Wenn Sie Inhalte aus der gemeinsamen Bibliothek verwenden, scheinen diese auch in der normalen Bibliothek vorhanden zu sein.

370

Geteilte Bibliotheken

3. Doppelklicken Sie auf das Symbol RECHTECK in der -Datei1-Bibliothek. Es erscheint die Warnung, die Sie auch in Abbildung 18.8 finden. Klicken Sie auf Nein.

Abbildung 18.8: Diese Warnung erscheint, wenn Sie versuchen, ein gemeinsames Symbol zu bearbeiten.

4. Testen Sie den Film und betrachten Sie danach die Dateigröße. Die Datei gemeinsam.swf wird relativ groß sein, wogegen die -Datei1.swf recht klein bleibt. Wenn Sie die letzte Aufgabe noch einmal für eine Datei2.fla wiederholen würden, wäre diese auch nicht sehr groß. Ein Anwender bräuchte den Sound und das Bild nur einmal zu laden, auch wenn es mehrfach von unterschiedlichen Dateien genutzt würde.

Aufgabe: Aktualisieren Sie den geteilten Inhalt in einer Bibliothek! Jetzt kommt noch ein Vorteil an die Reihe: das Bearbeiten von Inhalten einer geteilten Bibliothek, was sich auf alle angeschlossenen Dateien auswirkt. 1. Öffnen Sie die Datei geteilt.fla und schauen Sie nach, welche Bezeichnung das Bild hat (Bild 1). Löschen Sie dieses Bild aus der Bibliothek und importieren Sie ein anderes Bild, welches das alte ersetzen soll. 2. Öffnen Sie die Eigenschaften-Symbolverknüpfung und stellen Sie wieder sicher, dass dieses Bild exportiert wird. Geben Sie ihm den gleichen Namen wie dem zuvor gelöschten Bild (Bild 1). 3. Speichern Sie den Film und testen Sie ihn, um die .swf-Datei zu aktualisieren. 4. Öffnen Sie die -Datei1 und Sie werden die Aktualisierung bemerken. Das war doch gar nicht schwer! Sie haben eine Datei erzeugt, deren Bibliothek als gemeinsame Bibliothek für viele andere Dateien dienen kann. Die Vorteile liegen klar auf der Hand. Denken Sie also bei Ihren zukünftigen Projekten darüber nach, ob eine gemeinsame Bibliothek im Einzelfall nicht Sinn macht. Man kann sogar Schriftarten teilen. Das werden wir jetzt in einer kleinen Aufgabe ausprobieren.

371

Modulare Internetseiten entwerfen

Aufgabe: Teilen Sie eine Schriftart! 1. Öffnen Sie die Datei geteilt.fla aus der letzten Aufgabe. Öffnen Sie die Bibliothek und wählen Sie aus dem Optionsmenü den Eintrag Neue Schriftart. 2. Wählen Sie eine Schriftart aus, die exotisch klingt und die wahrscheinlich nicht jeder installiert haben wird. Geben Sie Ihr einen Namen (ich schlage vor, dass Sie den Originalnamen verwenden und ein _IMPORTED anhängen, damit später klar ist, dass diese Schriftart aus der geteilten Bibliothek stammt (siehe Abbildung 18.9).

Abbildung 18.9: Wenn man an einen Originalnamen einen Zusatz (hier _IMPORTED) anfügt, kann man die geteilte Schriftart später gut von der Originalschriftart unterscheiden.

3. Jetzt müssen Sie Flash wieder überreden, die Schriftart auch zu exportieren. Das geht auf dem gewohnten Weg über die Verknüpfung. Wählen Sie als Namen bitte Schrift 1. 4. Speichern Sie die Datei und testen Sie sie auch, damit die .swf-Datei aktualisiert wird. Schließen Sie die Datei. Erstellen Sie eine neue Datei und nennen Sie diese Datei_s.swf. 5. Wählen Sie DATEI / ALS GEMEINSAME BIBLIOTHEK ÖFFNEN. Wählen Sie hier wieder geteilt.fla aus. Jetzt können Sie die Schriftart in die Bibliothek der Datei ziehen und ab sofort hier einsetzen.

18.4 Zusammenfassung In dieser Stunde haben wir mehrere Möglichkeiten kennen gelernt, Objekte zwischen mehreren Dateien zu teilen und somit Speicher zu sparen und für reibungslose Wartungen großer Projekte zu sorgen. Sie werden sicher einige Zeit benötigen, um zu lernen, wann es sinnvoll ist, eine Bibliothek zu teilen, oder wann es nur unnötigen Arbeitsaufwand verursacht. Das nötige Grundwissen haben Sie jetzt allerdings. Also legen Sie los!

372

Workshop

18.5 Workshop F&A F

Ich habe einen Unterfilm richtig verknüpft. Allerdings erhalte ich trotzdem die Meldung, dass er die Datei irgendwas.swf nicht öffnen konnte. Was ist das Problem? A

F

Meine Website wird sehr unordentlich, wenn all die Unterfilme in ihrem Stammverzeichnis liegen. Gibt es die Möglichkeit, über Unterordner die Unterfilme einzusortieren? A

F

Wenn wir eine falsche Verknüpfung ausschließen können, haben Sie eventuell vergessen, den Unterfilm als .swf-Datei zu exportieren. Testen Sie den Unterfilm und meist läuft es dann.

Ja. Wenn Sie bei loadMovie als URL einfach film.swf angeben, wird Flash direkt im gleichen Verzeichnis des Hauptfilms suchen. Sie können aber auch ein Unterverzeichnis (zum Beispiel filme/film.swf) ansprechen, indem Sie das Verzeichnis durch einen Schrägstrich (/) getrennt dem Dateinamen voranstellen. Wenn Sie in ein Verzeichnis einer höheren Ebene wechseln möchten, können Sie die ..-Notation aus HTML verwenden.

Wenn ich weiß, dass ich eine geteilte Bibliothek für ein Projekt einsetzen will, aber noch nicht über die fertigen Objekte (zum Beispiel Grafiken) verfüge, gibt es dann eine Möglichkeit, trotzdem schon anzufangen? A

Klar, nehmen Sie einfach irgendeine Grafik, die Sie als Platzhalter verwenden und ersetzen Sie diese beim Eintreffen der endgültigen Grafik durch die neue (wie besprochen).

Übungsaufgaben 1. Wie viele Filme kann man in _level3 laden? a. Keinen, da diese Stufe für Sounds reserviert ist b. So viele man will c. Einen

373

Modulare Internetseiten entwerfen

2. Wenn man den Drehwinkel (Rotation) eines zu ladenden Filmes verändern will, wohin muss man diesen dann laden? a. In eine Filmsequenz b. In eine _level-Nummer c. Entweder Sequenz oder Level 3. Wie viele Personen können gleichzeitig das Master-Symbol einer gemeinsamen Bibliothek bearbeiten? a. Eine b. So viele es wollen c. So viele, wie es Dateien gibt, die diese Bibliothek verwenden# ...

374

Eine gute Benutzeroberfläche erstellen

9 1

Eine gute Benutzeroberfläche erstellen

Wenn Sie die Herausforderung Ihrer kreativen Fähigkeiten mögen, wird dieses Kapitel eines der interessantesten dieses Buches sein. Wir betrachten das Erstellen einer Benutzeroberfläche, angefangen bei einer leeren Seite bis zu einer Struktur, die das Aussehen der gesamten Seite vorgibt. Eine gute Benutzeroberfläche zu entwerfen ist eine Herausforderung und eine dankbare Aufgabe. Es ist nicht leicht, ich hoffe jedoch, Sie stimmen darin mit mir überein, dass es Spaß macht. Sie haben auf der einen Seite den Anwender und auf der anderen Seite den Inhalt einer Internetsite. Es ist nicht das Ziel einer Benutzeroberfläche, besonders niedlich oder ausgeflippt zu sein, sie muss einfach verständlich sein. Ihr Anwender sollte in der Lage sein, den Inhalt mühelos zu erreichen. Er sollte nicht mit der Benutzeroberfläche kämpfen müssen. Außerdem sollte er den gewünschten Inhalt finden, ohne verwirrt zu werden. Es hört sich einfach an, ist jedoch eine Herausforderung, eine gute Benutzeroberfläche zu erstellen. In diesem Kapitel werden Sie 쐽

einige bewährte, wirksame Benutzeroberflächen kennen lernen und wie Sie diese für Ihre Zwecke nutzen können,

쐽

allgemeine Gefahren sehen und lernen, wie man sie vermeidet,

쐽

lernen, wie Sie Ihre Ideen schnell in einen Prototyp umsetzen, um vorab die Funktionalität zu prüfen.

Über das Thema Benutzeroberflächen sind ganze Bücher geschrieben worden. Man kann darüber theoretisch ohne vorhandene Flash-Anwendung diskutieren, dieses Kapitel konzentriert sich jedoch auf die praktische Umsetzung des Erlernten. Die Fähigkeiten, die Sie in diesem Kapitel erwerben, sind für jedes zukünftige Projekt nützlich. Natürlich sollte das Lernen hiermit nicht enden, Sie können Ihre Fähigkeit zum Entwickeln guter Benutzeroberflächen immer weiter verbessern.

19.1 Gutes Design der Benutzeroberfläche Manchmal ist das Betrachten schlechter Benutzeroberflächen die beste Methode, das Entwickeln guter Benutzeroberflächen zu lernen, egal ob es sich dabei um eigene Fehlversuche oder die Anderer handelt. Denken Sie beispielsweise an eine Internetsite oder ein bestimmtes Programm, bei dem Sie Schwierigkeiten hatten, sich zurechtzufinden. Es muss noch nicht einmal ein Programm sein. Wie oft haben Sie zum Beispiel die einzelnen Eingabefelder eines Formulars ausgefüllt, nur um am Ende herauszufinden, dass die Daten, die Sie auf der Linie oberhalb der Bezeichnung eingegeben hatten, eigentlich in das darunter liegende Feld gehört hätten? Schreiben Sie Ihren Vornamen in Abbildung 19.1 oberhalb oder unterhalb der Bezeichnung Vorname? Machen Sie sich keine Gedanken, wenn

376

Gutes Design der Benutzeroberfläche

Sie keine rechte Antwort wissen – es handelt sich um schlechte Gestaltung. Von guten Beispielen zu lernen ist weitaus schwieriger, weil man sich an eine Benutzeroberfläche, die gut funktioniert, nicht erinnert.

Abbildung 19.1: Wenn Sie jemals ein Formular ausgefüllt und sich gewundert haben, in welches Eingabefeld die Daten gehören, haben Sie Bekanntschaft mit einer schlechten Benutzeroberfläche gemacht.

Elemente, die eine gute Benutzeroberfläche ausmachen Obwohl es, wie bereits erwähnt, einfacher ist, von einer schlecht gestalteten Benutzeroberfläche zu lernen als von einer guten, gibt es doch bestimmte Elemente, die eine gute Benutzeroberfläche ausmachen. Der Maßstab für eine gute Benutzeroberfläche ist nicht, ob alle der hier aufgeführten Regeln befolgt werden, da manche davon subjektiv sind. Beurteilen Sie eine Benutzeroberfläche vielmehr danach, ob sie funktioniert oder versagt. Beobachten Sie beispielsweise jemanden, der Ihre Anfangs-Flash-Seite testet. Wenn mehrere Personen den gleichen Fehler machen, erwarten Sie nicht, dass es damit getan ist, ihnen einfach den richtigen Weg zu erklären. Nehmen Sie es als Zeichen dafür, dass Sie ein Problem haben, um das Sie sich kümmern müssen. Bedenken Sie dabei: »Der Anwender hat immer Recht.«

Entwerfen Sie Schaltflächen, die sich deutlich von anderen Elementen unterscheiden Zuerst wollte ich diesen Absatz mit der Überschrift »Entwerfen Sie Schaltflächen, die wie Schaltflächen aussehen« versehen, aber ich will nicht behaupten, dass alle Schaltflächen gleich aussehen müssen. Legen Sie los und machen Sie Ihre Schaltflächen so verrückt wie Sie mögen. Stellen Sie jedoch sicher, dass die Schaltflächen nicht mit anderen Elementen der Benutzeroberfläche identisch sind. Die Benutzeroberfläche in Abbildung 19.2 beinhaltet beispielsweise auf der linken Seite eine Reihe von Schaltflächen. Die Schaltflächen sind Rechtecke mit gerundeten Ecken. Gleichzeitig gibt es aber auch andere Elemente der Benutzeroberfläche, die eine ähnliche rechteckige Form mit abgerundeten Ecken haben. Es ist beinahe unmöglich, den Unterschied zwischen einem Gestaltungselement und einer Schaltfläche zu erkennen.

377

Eine gute Benutzeroberfläche erstellen

Abbildung 19.2: In diesem Beispiel einer Benutzeroberfläche wird die gleiche Form sowohl für Schaltflächen als auch für dekorative Elemente benutzt.

Schaltflächen sollten eine direkte und eindeutige Rückmeldung geben Wenn ein Anwender auf eine Schaltfläche klickt, sollte er wissen, dass sein Klicken funktioniert, dass die Benutzeroberfläche den Klick entdeckt und dass seine Anfrage bearbeitet wird. Im Allgemeinen gibt es zwei Gründe dafür, dass ein Anwender nicht weiß, ob sein Klicken registriert wurde. Manchmal führt ein Klick zu einer Nachfrage, die eine lange Ladezeit benötigt. So kann es zum Beispiel vorkommen, dass das Herunterladen eines Films bereits im Hintergrund begonnen hat, der Anwender während der für das Herunterladen benötigten Zeit jedoch ohne einen Hinweis darauf bleibt, dass er warten soll. Ein einfacher Ladehinweis, wie wir ihn im vorigen Kapitel erstellt haben, könnte bereits ausreichen. Der andere häufig auftretende Grund ist der, dass das Ergebnis eines Klicks bereits vorliegt, es jedoch keinen visuellen oder anders gearteten Hinweis darauf gibt. Wenn es beispielsweise eine Schaltfläche gibt, die den Ton abstellt und ein Anwender ausgerechnet dann darauf klickt, wenn der Ton unterbrochen ist, benötigt man einen visuellen Hinweis (wie eine Veränderung der Schaltfläche), um dem Anwender mitzuteilen, dass sein Klicken funktioniert hat.

Abbildung 19.3: Die Bedienfelder Farbmischer und Farbtöne beinhalten (in ihrer voreingestellten Anordnung) ein Problem mit der Oberfläche, das erst auf den zweiten Blick sichtbar wird.

378

Gutes Design der Benutzeroberfläche

Rufen Sie zum Beispiel in Flash 5 (das im Allgemeinen eine sehr gute Oberfläche hat) das Bedienfeld Farbmischer (in der voreingestellten, gekoppelten Anordnung) auf wie in Abbildung 19.3. Wählen Sie auf dem Bedienfeld Farbmischer eine beliebige Farbe aus der Farbauswahl. Nun wählen Sie mithilfe des auf dem Bedienfeld Farbmischer befindlichen Pfeils Füllmuster hinzufügen aus dem sich öffnenden Menü. Ist irgend etwas passiert?

Abbildung 19.4: Wählen Sie eine Farbe auf dem Bedienfeld Farbmischer und wählen Sie Füllmuster hinzufügen, wodurch die gewählte Farbe dem Bedienfeld Farbtöne hinzugefügt wird, das verborgen ist. Der Anwender weiß nicht, ob Füllmuster hinzufügen funktioniert hat.

Sie haben tatsächlich ein Füllmuster hinzugefügt, darüber jedoch keine Bestätigung erhalten. Entkoppeln Sie das Bedienfeld Farbtöne und scrollen Sie ganz nach unten. Wie Sie sehen, ist die letzte Farbe die von Ihnen hinzugefügte. Halten Sie die beiden Bedienfelder getrennt voneinander und versuchen Sie, ein weiteres Füllmuster hinzuzufügen (mithilfe des Bedienfelds Farbmischer). Wenn Sie das Bedienfeld Farbtöne beobachten, während Sie Füllmuster hinzufügen auswählen, sehen Sie, wie eine Farbe hinzugefügt wird. Allerdings ist dies keine sehr deutliche Bestätigung, da sie in einem anderen Bereich des Bildschirms angezeigt wird.

Definieren Sie unterschiedliche Zustände einer Schaltfläche Nachdem Sie eine Schaltfläche ausgewählt haben, die zu einer Änderung der Bildschirmanzeige führt, ist es wichtig, dem Anwender einen sichtbaren Hinweis darüber zu geben, welche Schaltfläche (und damit welcher Inhalt) aktuell ausgewählt ist. Wenn der Anwender auf eine Schaltfläche mit der Bezeichnung rotes Quadrat klickt und daraufhin ein rotes Quadrat auf dem Bildschirm erscheint, wird er sich an die zuletzt gedrückte Schaltfläche erinnern können. Normalerweise ist es jedoch nicht so eindeutig. Die Wiederholung der Schaltflächenbezeichnung und eine grafische Veränderung der Schaltfläche kann für den Anwender einen himmelweiten Unterschied in Sachen Übersicht bedeuten. Auf der leicht umgestalteten Bildschirmanzeige (siehe Abbildung 19.5) wird das Spiel in dem großen leeren Bereich gezeigt, nachdem der Anwender auf Spiele geklickt hat. Es ist jedoch nicht klar, dass der Anwender den Inhalt von Spiele vor sich hat. Wir haben in Kapitel 13 einige hoch entwickelte Schaltflächen erstellt. Sie können sehr einfach einen Zustand für das Überfahren und das Klicken einer Schaltfläche erstellen. Leider haben in Flash erstellte Schaltflächen nicht automatisch einen ausgewählten Status. Das ist in Ordnung. Wir können mit wenig Aufwand den gleichen Effekt erzielen.

379

Eine gute Benutzeroberfläche erstellen

Abbildung 19.5: Es ist nicht völlig eindeutig, dass der aktuelle Bereich Spiele ist. Ein ausgewählter Status für die Schaltfläche Spiele würde dieses Problem lösen.

Dies wird eine gute Gelegenheit, etwas komplexeres als in den meisten der bisherigen Übungen zu erstellen.

Aufgabe: Definieren Sie unterschiedliche Zustände für eine Gruppe von Schaltflächen! In dieser Aufgabe werden wir eine Reihe von Schaltflächen erstellen, wobei jede einen ausgewählten Status haben wird, so dass der Anwender zu jeder Zeit weiß, in welchem Bereich er sich befindet. 1. Erstellen Sie eine Standardschaltfläche (ohne Text), die einen Status für das Überfahren hat. Zeichnen Sie, wenn Sie wollen, ein Rechteck mit abgerundeten Ecken. Stellen Sie sicher, dass die Schaltfläche sowohl aus einer Linie als auch aus einer Füllung besteht. Aktivieren Sie nur die Füllung und konvertieren Sie diese in ein Symbol ((F8)). Nennen Sie das Symbol Schaltflächenform und versichern Sie sich, dass die Option Filmsequenz aktiviert ist. Aktivieren Sie nun alles, was sich auf der Bühne befindet (die Instanz der Schaltflächenform und die begrenzende Linie). Konvertieren Sie diese Elemente in ein Symbol ((F8)), das Sie Schaltfläche nennen und stellen Sie sicher, dass dieses Symbol als Schaltfläche definiert ist. Klicken Sie auf OK. 2. Führen Sie nun einen Doppelklick auf die Instanz der Schaltfläche aus, so dass wir die Schaltflächenvorlage bearbeiten können. Benennen Sie die Ebene mit ihrem gesamten Inhalt in Linie um. Fügen Sie eine neue Ebene ein, (EINFÜGEN / EBENE) und bezeichnen Sie die neue Ebene als Füllung. Klicken Sie auf die Instanz der Schaltflächenform, um diese auszuwählen. Schneiden Sie diese aus, klicken Sie auf die Ebene Füllung und wählen An Position einfügen ((Strg)+(ª)+(V)). Ordnen Sie die Ebenen neu an, so dass Linie an erster Stelle steht. Klicken Sie in der Linien-Ebene in das vierte Bild (unter Aktiv) und fügen Sie ein Bild ein ((F5)). Auf der Füllungs-Ebene

380

Gutes Design der Benutzeroberfläche

fügen Sie im zweiten Bild ein Schlüsselbild ein ((F6)) und wählen die Instanz der Schaltflächenform auf der Bühne aus. Rufen Sie das Bedienfeld Effekt auf und ändern Sie die Farbe dieser Instanz in eine eindeutig andere (ich habe meine hellgelb gefärbt). Betrachten Sie Abbildung 19.6, um eine Vorstellung davon zu bekommen, wie die Zeitleiste der Schaltfläche aussehen sollte.

Abbildung 19.6: Die Schaltfläche benötigt zwei Instanzen der Filmsequenz Schaltflächenform, um den Status Darüber zu definieren, jedoch nur eine Instanz des Umrisses, weshalb wir zwei Ebenen benutzen.

3. Probieren Sie den Film aus. Dies sollte eine Zusammenfassung von Kapitel 13 sein, bedenken Sie jedoch, dass alles, was wir erhielten, ein Umriss war, der seine Farbe nicht ändert. Das ist es wert. 4. Kopieren Sie in der Hauptszene zwei weitere Schaltflächen und fügen Sie diese gleichmäßig verteilt ein. Erstellen Sie drei Textblöcke, die als Bezeichnung für diese Schaltflächen dienen – z.B. Dies, Das und Anderes. Ich habe ihnen eine mittelblaue Farbe gegeben. 5. Aktivieren Sie diese drei Textblöcke und konvertieren Sie sie in ein Symbol ((F8)). Nennen Sie es Schaltflächenbezeichnung und sichern Sie es als Filmsequenz. Wählen Sie nun die Instanz der Schaltflächenbezeichnung, die wir soeben erstellt haben und konvertieren Sie sie in ein Symbol. Nennen Sie dieses Bezeichnung und Hervorhebung und sichern Sie es als Filmsequenz. Führen Sie einen Doppelklick auf die Instanz von

381

Eine gute Benutzeroberfläche erstellen

Bezeichnung und Hervorhebung aus, die Sie gerade erstellt haben (um die Vorlagenversion zu editieren), hier sollten Sie nun eine Instanz der Schaltflächenbezeichnung finden.

6. Benennen Sie Ebene 1 der Vorlagenversion Bezeichnung und Hervorhebung in Normal um. Fügen Sie eine Ebene ein und nennen diese Hervorhebung. Kopieren Sie die Instanz in die Ebene Normal, klicken Sie dann auf die Hervorhebungs-Ebene und fügen Sie die Instanz an ihrer Position ein ((Strg)+(ª)+(V)). Wir können, sobald sich eine Instanz der Filmsequenz in der Ebene Hervorhebung befindet, Effekt aufrufen, um eine andere Farbe zu wählen. Rufen Sie nun also das Bedienfeld Effekt auf, wenn Sie die Instanz in der Ebene Hervorhebung wählen. Geben Sie den drei Bezeichnungen (die zusammen ein Symbol bilden) verschiedene Farben – dies wird jeweils die auswählte Farbe sein. 7. Der normale Text wird in der grundlegenden Gestaltung die ganze Zeit über gezeigt, die Ebene Hervorhebung jedoch wird verdeckt, um jeweils nur eine Hervorhebung zu einer Zeit aufzudecken. Um die Länge eines Schaltflächen-Symbols anzupassen, sollten alle Ebenen über mindestens vier Bilder gehen. Folglich sollten Sie in das vierte Bild jeder Ebene klicken und EINFÜGEN / BILD wählen ((F5)). 8. Aktivieren Sie die Ebene Hervorhebung, wählen Sie EINFÜGEN / EBENE UND nennen Sie diese Ebene Maske. Zeichnen Sie im zweiten Bild der Ebene Maske ein Rechteck, das den Text der ersten Schaltfläche abdeckt. Ziehen Sie es besonders breit für den Fall, dass die Bezeichnung der Schaltfläche sich ändert, werden Sie dabei aber nicht zu hoch, weil die Texte der anderen Schaltflächen nicht abgedeckt werden sollen. Konvertieren Sie dieses Rechteck in ein Symbol (mit der Bezeichnung Kasten). Fügen Sie im dritten Bild der Ebene Maske ein Schlüsselbild ein ((F6)) und ziehen Sie die neue Instanz von Kasten über die Bezeichnung der zweiten Schaltfläche, um diese abzudecken. Im vierten Bild wählen Sie EINFÜGEN / SCHLÜSSELBILD ((F6)) und decken Sie mit dem Kasten die Bezeichnung der dritten Schaltfläche ab. 9. Bis zum zweiten Bild wird die Ebene Hervorhebung nicht benötigt, um etwas zu zeigen. Klicken Sie einmal in das erste Bild der Ebene Hervorhebung, um nur das Schlüsselbild auszuwählen. Klicken Sie dann auf das Schlüsselbild und ziehen Sie es zum zweiten Bild. (Siehe Abbildung 19.7.) 10. Stellen Sie abschließend die Eigenschaften für die Masken-Ebene (MODIFIZIEREN / EBENE) auf Maske. Stellen Sie dann die Eigenschaften der Ebene Hervorhebung auf maskiert. Sperren Sie nun alle Ebenen. Bevor wir die Sequenz Bezeichnung und Hervorhebung verlassen, fügen wir die Objekt-Aktion stop in das erste Bild jeder Ebene ein. Wir sorgen dafür, dass die Filmsequenz zum richtigen Bild springt, denn wir wollen nicht, dass sie sich vom Start an durch alle Ebenen zieht. 11. Gehen Sie nun zurück zur Hauptszene und geben Sie der Instanz von Bezeichnungen und Hervorhebung mithilfe des Bedienfelds Instanz den Instanznamen Bezeichnungen.

382

Gutes Design der Benutzeroberfläche

Abbildung 19.7: Die Ebene Hervorhebung braucht im ersten Bild nicht zu erscheinen, also bewegen wir das erste Schlüsselbild in das zweite Bild.

12. Wählen Sie die erste Schaltfläche und öffnen Sie das Bedienfeld Aktionen. Für die Aktion der ersten Schaltfläche fügen Sie evaluate ein. Tippen Sie Labels.gotoAndStop(2) in das Eingabefeld Ausdruck. (Vergewissern Sie sich dabei, dass die angegebene Schreibweise für gotoAndStop genau eingehalten wird.) Klickt der Anwender nun auf die Schaltfläche, bedeutet das für Flash, zu Bild zwei der Instanz Bezeichnungen zu gehen und dort zu stoppen. 13. Fügen Sie für die zweite Schaltfläche ebenfalls evaluate ein und geben Sie im Eingabefeld unter Ausdruck Folgendes ein: Labels.gotoAndStop(3), für die dritte Schaltfläche Labels.gotoAndStop(4). Sie können die jeweiligen Inhalte im Bereich Objekte kopieren, in das Eingabefeld einfügen und dann die veränderbaren Bestandteile definieren – in diesem Fall die in Klammern stehenden Ziffern. 14. Das war eine Menge, aber das war es wert. Probieren Sie es aus, indem Sie den Film testen. 15. Jetzt ist es einfach, Inhalte hinzuzufügen, die erscheinen sollen, wenn der Anwender klickt. Führen Sie einen Doppelklick auf die Instanz von Bezeichnungen und Hervorhebung aus und klicken Sie auf die obere Ebene (Maske). Fügen Sie dann eine Ebene

383

Eine gute Benutzeroberfläche erstellen

ein. Nennen Sie diese Inhalt. Fügen Sie im zweiten Bild dieser Ebene ein Schlüsselbild ein und legen Sie den gesamten Inhalt des Bereichs this (dies) hinein. Ich habe den Begriff this einfach mit dem Freihand-Werkzeug auf die Bühne gezeichnet (siehe Abbildung 19.8), Sie können allerdings auch eine Bitmap-Grafik importieren, eine andere Filmsequenz einfügen oder andere gewünschte Inhalte hinzufügen. Wenn Sie jedoch die Bezeichnung der Schaltfläche wiederholen (in diesem Fall this), wird das für den Anwender deutlicher machen, welchen Bereich er gerade betrachtet. Um die Ebene Inhalt abzuschließen, fügen Sie nun noch ein leeres Schlüsselbild in das dritte Bild ein und erstellen Sie einen Inhalt für den Bereich that (das). Abschließend fügen Sie ein weiteres leeres Schlüsselbild in das vierte Bild ein und erstellen den Inhalt für den Bereich other (anderes).

Abbildung 19.8: Wir können Inhalte zur Filmsequenz hinzufügen (die eigentlich zur Hervorhebung gedacht ist). Wir haben gerade eine Inhalts-Ebene sowie Grafiken eingefügt.

Dies war eine umfangreiche Aufgabe. Die zweite Umrisslinie der Schaltfläche war zwar nicht unbedingt erforderlich, es schaut aber besser aus. Die Form innerhalb der Schaltfläche wurde auch hauptsächlich aus funktionalen Gründen erstellt (und als Symbol definiert). Da das von uns erreichte Ergebnis aber auch auf anderem Wege erreicht werden kann, wurde bei dieser Methode auf überflüssige Formen verzichtet. Beispielsweise erscheinen die Beschriftungen nur einmal, nämlich in den Schaltflächen. Wenn eine Änderung der Bezeichnungen erforderlich wird, müssen diese nur an einer Stelle geändert werden. Alles wird dann automatisch aktualisiert.

384

Gutes Design der Benutzeroberfläche

Schließlich war es einfach, einen ausgewählten Status für die Schaltfläche zu erstellen. Unsere Absicht war es, den Text aufzuhellen und so hervorzuheben. Dies hätte man auch auf verschiedene andere Arten machen können, wie z.B. mit einem großen die Schaltfläche umschließenden Kreis . Es ist wichtig, besonders wenn Sie nur eine von zwei Schaltflächen hervorheben, auch über andere Möglichkeiten der Hervorhebung nachzudenken. Stellen Sie sich zwei Schaltflächen mit den Bezeichnungen True (wahr) und False (falsch) vor. Wenn Sie versuchen, eine davon hervorzuheben und bei der anderen nur die Farbe des Textes in Grün zu ändern, wird der Anwender lediglich wissen, dass die eine grün ist und die andere nicht. Er wird nicht wissen, dass die grüne Schaltfläche ausgewählt ist. Sie müssen mit einer grafischen Gestaltung arbeiten, die deutlich macht, welche Schaltfläche ausgewählt ist. Siehe Abbildung 19.9. Abbildung 19.9: Das linke Beispiel zeigt deutlich, dass die Schaltflächen Richtig und Falsch zwar verschieden sind, man aber nicht so genau weiß, welche ausgewählt ist.

Weniger ist mehr Alle Elemente einer Benutzeroberfläche sollten einen Zweck haben. Sie haben äußerst wenig Platz auf dem Bildschirm, mit dem Sie arbeiten können. Stellen Sie sich einen Anwender vor, dessen Monitorauflösung auf 800x600 Pixel eingestellt ist. Auch wenn sein Browser maximiert ist, lassen die Schaltflächen und andere Elemente der Benutzeroberfläche des Browsers nur etwa 750x400 Pixel zur Anzeige Ihrer Seite zu (siehe Abbildung 19.10). Wenn Sie eine einfache, zehn Pixel starke Linie um die gesamte Oberfläche legen, benötigt diese bereits fast 10% der gesamten zur Verfügung stehenden Fläche. Da Sie nur so wenig Platz haben, sollten Sie ihn nicht mit überflüssigen Verzierungen der Benutzeroberfläche verschwenden. Die gleiche Regel kann auch auf andere Elemente wie den Ton angewendet werden. Es ist besonders wichtig, den Anwendern keine Klänge zuzumuten, die Sie nicht unbedingt brauchen, weil Klänge zu einer längeren Ladezeit führen. Das Ertönen eines netten Klangs bei jedem Betreten eines Bereichs der Internetseite mag am Anfang witzig sein, auf Dauer kann es auf die Nerven gehen. Fragen Sie sich selbst, ob ein Element irgendeinen inhaltlichen Nutzen hat. Wenn das der Fall ist, überlegen Sie, wie Sie es nutzen können. Wenn es aber nichts hinzufügt, entfernen Sie es.

385

Eine gute Benutzeroberfläche erstellen

Abbildung 19.10: Bei einer Auflösung von 800x600 lässt der Browser nur etwa 750x440 für Ihre Oberfläche übrig.

Grafikdesigner mögen diese Regel nicht. Sie verwenden leere Flächen als Gestaltungselement. Diejenigen, die Erfahrung im Erstellen von Grafiken für den Print-Bereich haben, werden mit diesem Problem besondere Schwierigkeiten haben. Die Menge an Informationen, die man auf einem Computerbildschirm unterbringen kann, ist sehr begrenzt. Vor allen Dingen sollte Ihr Anliegen wahrgenommen werden. Es kann eine dem Medium angemessene Gestaltung fördern, stets den begrenzten Platz im Auge zu behalten. Wenn Sie gewohnt sind, Filme von der Länge eines Beitrags zu erstellen, könnte es für Sie schwierig sein, sich an 30 Sekunden lange Werbespots anzupassen. Ähnlich verhält es sich mit der Kommunikation im Internet: es ist nötig, Anpassungen vorzunehmen.

19.2 Zügeln Sie sich Mit Flash können Sie überraschende Effekte erzielen. Das heißt allerdings nicht, dass Sie das sollten. Wenn Sie in einer Benutzeroberfläche zu viel unterbringen, kann sie für den Anwender schwieriger zu bedienen und langsamer zu laden sein. Außerdem wird es unwahrscheinlich, dass sie ihren Zweck erfüllt. Es ist gut, zu wissen, was möglich ist, es ist aber auch gut, zu wissen, wann man besser die Finger davon lassen soll. Lassen Sie uns über einige allgemeine Fehler reden, die unterdrückt werden müssen, um auf dem richtigen Weg zu bleiben.

386

Zügeln Sie sich

Profitieren Sie von Design-Standards Die Geschichte der Computer-Software ist lang genug, um von den Gestaltungen anderer lernen zu können; außerdem gibt es Standards, die Sie auf jeden Fall berücksichtigen sollten. Ein Optionsknopf (wie in Kapitel 16 behandelt) verhält sich beispielsweise auf eine bestimmte Art und Weise. Wenn das Bedürfnis nach dieser Art von Schaltfläche zunimmt, könnten Ihre Anwender möglicherweise etwas erwarten, das wie ein Optionsknopf aussieht. Dies ist nur eine Art von Standard, nach dem Sie Ihr Programm entwickeln können. Versuchen Sie zunächst, sich die allgemein gültigen Standards anzueignen. Es gibt zahllose Bücher zu dem Thema »human computer interface design«. Es ist nicht erforderlich, dass Sie jedem Standard ausdrücklich folgen. Vielmehr können Sie, nachdem Sie die Standards einmal verstanden haben, von Fall zu Fall eigene reife Entscheidungen treffen. Nehmen Sie Rücksicht auf die Standards und machen Sie Ausnahmen, wo sie angemessen sind. Was immer Sie tun, widersprechen Sie niemals einem Standard. So können Sie z.B. Schaltflächen benutzen, die wie Standard-Kontrollkästchen aussehen, entwerfen Sie jedoch niemals Kontrollkästchen, die sich wie Optionsknöpfe verhalten.

Stellen Sie Übereinstimmung nicht über alles Eine konsistente Oberfläche ist eine gute Sache. Wenn beispielsweise die meisten Schaltflächen Ihrer Site einen gelben Status für Darüber haben und auf einen Mausklick reagieren, so sollten alle Schaltflächen dies tun. Allerdings halten sich Entwickler manchmal so sklavisch an die Übereinstimmung, dass sich der positive Effekt in das Gegenteil umkehrt. Manchmal ist es in Ordnung, Ihre eigenen Regeln zu brechen. Nehmen Sie z.B. einmal an, dass die Hauptbereiche (des Hauptmenüs) verschwinden und der Inhalt der Hintergrundinformationen den Bildschirm füllen, wenn ein Anwender Hintergrundinformationen aus einem Hauptmenü wählt. Sie würden wahrscheinlich so etwas wie eine Schaltfläche für das Hauptmenü auf jeder Inhaltsseite an irgendeine Stelle platzieren und diese würde auf jeder Seite die gleiche Bezeichnung tragen. Die Schaltfläche für das Hauptmenü sollte konsistent und stets korrekt bezeichnet sein. Nennen Sie diese Schaltfläche z.B. nicht Home, wenn Sie im Hauptmenü Hauptmenü geschrieben haben. Außerdem sollte die Schaltfläche für das Hauptmenü nach Möglichkeit stets an der gleichen Stelle positioniert sein – wählen Sie dazu eine Stelle aus, wo sie nicht im Weg stehen wird, so dass sie nicht verschoben werden muss. Sie sollten die Konsistenz jedoch nicht so weit treiben, dass Sie sagen: »Das Hauptmenü kann immer nur durch Klicken auf die Schaltfläche HAUPTMENÜ erreicht werden.«. Es sollte das Ziel sein, übereinstimmend zu sein, aber wer hat gesagt, dass es nur eine Möglichkeit geben kann, das Hauptmenü zu erreichen? Wenn beispielsweise eine Ihrer Inhaltsseiten Schaltflächen für VOR und ZURÜCK hat, würde es Sinn machen, dass das Drücken

387

Eine gute Benutzeroberfläche erstellen

der Schaltfläche ZURÜCK auf der ersten Seite oder der Schaltfläche VOR auf der letzten Seite den Anwender zum Hauptmenü führt. Verschiedene Wege zu einem Ziel sind in Ordnung. Achten Sie darauf, wie viele verschiedene Wege Sie in Ihrem Textverarbeitungsprogramm speichern können. Eine Regel zur Übereinstimmung kann gegen Sie arbeiten, wenn Sie aus dem Kontext herausgenommen ist oder ins Extreme gesteigert wird.

19.3 Überprüfen der Funktionalität Im Entwurfsprozess zur perfekten Benutzeroberfläche sollten Sie von Zeit zu Zeit die Funktionalität überprüfen, indem Sie diese von echten Menschen testen lassen. Ideal wäre es, wenn Sie eine Gruppe repräsentativer Anwender zur Verfügung hätten. Ich habe einige Vorschläge für Sie, wie Sie Ihre Gestaltung testen können, egal ob Sie nun eine Gruppe von Anwendern haben oder nicht. Jedes Mal, wenn Sie selbst irgendein Bestandteil Ihrer Benutzeroberfläche falsch deuten, betrachten Sie dies als Warnung (und einen Segen). Wenn Sie z.B. auf eine Schaltfläche klicken, die Sie zu einer Seite führen soll, und Sie landen an einer anderen Stelle, haben Sie ein Problem zu lösen. Vielleicht sollte die Schaltfläche vielmehr das tun, was Sie erwartet haben, als das, was sie derzeit macht. Tun Sie Ihre eigenen Fehler z.B. nicht mit dem Gedanken ab, dass der Anwender es schon herausfinden wird, weil die Schaltfläche ja beschriftet ist. Wie viele Anwender lesen alles? Im Übrigen, wenn Sie mehrmals den gleichen Fehler machen, können Sie sicher sein, dass der Anwender ihn auch machen wird. Eine andere Möglichkeit, zu einer guten Benutzeroberfläche zu kommen, ist die, während des Testens drastische Veränderungen vorzunehmen. Obwohl Feinheiten in der Gestaltung grundsätzlich gut sind, machen Sie offensichtliche Änderungen, um festzustellen, ob eine Änderung der Gestaltung lohnend wäre. Denken Sie daran, wie Sie eine angenehme Wassertemperatur für eine Dusche einstellen. Sie machen keine minimale Veränderung, um das Wasser heißer zu bekommen. Sie drehen über die Stelle hinaus, von der Sie annehmen, dass es die richtige ist und dann weiter zurück als Sie müssen, bis Sie die richtige Temperatur gefunden haben. Wenn Sie also eine Veränderung Ihrer Benutzeroberfläche testen, machen Sie diese drastisch. Wenn Sie zu weit gehen, nehmen Sie wieder etwas zurück. Es ist leichter, über die Wirksamkeit einer Veränderung zu urteilen, wenn diese deutlich ist. Stellen Sie schließlich sicher, dass Sie beim Testen der Anwenderfreundlichkeit einer Benutzeroberfläche diese mit einem Anwender testen und ihn dabei beobachten. Sitzen Sie nicht direkt hinter ihm und korrigieren seine Fehler. Dem ist schwer zu widerstehen, aber es ist wesentlich, wenn Sie genaue Daten sammeln wollen.

388

Zusammenfassung

19.4 Zusammenfassung Eine Benutzeroberfläche sollte den Anwender in die Lage versetzen, Zugang zu den Inhalten zu bekommen, ohne auf die Benutzeroberfläche selbst achten zu müssen. Ich habe einige Tipps bereitgestellt, die erwogen – und nicht blind befolgt – werden sollten. Wenn Sie an einem umfangreichen Projekt arbeiten, können die Hinweise in diesem Kapitel Sie davor bewahren, zu weit in die falsche Richtung zu gehen. Wenn Sie sich einer wirklich schlechten Benutzeroberfläche gegenübersehen, versuchen Sie, loszulassen und von neuem zu beginnen. Das mag nicht immer praktisch sein, aber wie gut ist die Information auf Ihrer Internetsite, wenn die Anwender sie nicht auf einfachem Wege erreichen können? Ein Neubeginn ist manchmal eben der beste Weg.

19.5 Workshop F&A F

Wo kann ich mehr zu diesem Thema erfahren? A

F

Über das Thema grafische Benutzeroberflächen (interface-design) haben mehrere Autoren geschrieben, begrenzen Sie sich jedoch nicht auf Bücher zu genau diesem Thema. Es könnte schwierig sein, spezielle Bücher über Websites zu finden. Sie können auch eine Menge vom herkömmlichen Grafikdesign lernen. Zwei namhafte Autoren, die mich beeinflusst haben, sind Edward R. Tufte und Donald Norman.

In der Aufgabe in diesem Kapitel haben wir praktisch alles in eine Filmsequenz gelegt. Vereinfacht diese Art der Verschachtelung die Handhabung einer Seite? A

Es gibt viele Möglichkeiten, die Handhabung einer Seite zu optimieren (siehe besonders Kapitel 18 und 22). Für umfangreiche Inter-Aktionen gilt jedoch: Je weniger Sie in der Hauptzeitleiste unterbringen, desto besser ist es. Wenn z.B. die Navigation zwischen einzelnen Bereichen in der Hauptzeitleiste erscheint, müssen wir vier Bilder (oder wie viele auch immer) für die vier Schaltflächen verwenden. Alle anderen Elemente in dem Film wären abhängig von diesen vier Bildern der Hauptzeitleiste. Wenn man nun alle Elemente in eine Filmsequenz packt, können die Schaltflächen freier verwendet werden. Anstatt z.B. zehn Bilder zum Bewegen der auf der Bühne befindlichen Schaltflächen zu verwenden, bis diese ihre Schlussposition erreicht haben, können wir auch einfach die gesamte Filmsequenz in die Hauptzeitleiste bewegen. Wenn Sie die Hauptzeitleiste benutzen, können Sie die Ausführung der Filmsequenz nicht abbrechen.

389

Eine gute Benutzeroberfläche erstellen

F

Die Aufgabe schien sehr aufwändig zu sein. Gibt es eine Möglichkeit, ActionScript zu verwenden, um eine Schaltfläche zu erzeugen, welche die gleichen Eigenschaften hat? A

F

Sicher, es wäre zwar (vermutlich) zu Beginn mehr Arbeit, aber Sie könnten es immer wieder verwenden. Ein gutes Beispiel dafür ist die Optionsknopf-Filmsequenz (mit der Bezeichnung RadioButton), die sich (im Menü Fenster) unter ALLGEMEINE BIBLIOTHEKEN / SMART FILMSEQUENZEN BEFINDET; PROBIEREN Sie die Filmsequenz aus.

Wie kann ich einen Gestalter davon überzeugen, dass die Anwenderfreundlichkeit wichtig ist? A

Es ist schwierig, eine gut funktionierende Gestaltung zu zerreden. Gehen Sie zu dem ursprünglichen Konzept zurück und versuchen Sie einfach, Inhalte zugänglich zu machen. Auch die schönsten Grafiken der Welt rechtfertigen keine schlechte Benutzeroberfläche. Jeder der Beteiligten sollte den Zweck eines Elements, das er hinzufügt, erklären können. Handeln Sie nach dem Grundsatz »Wenn ein Element nichts hinzufügt, verwirrt es nur – weniger ist mehr«, um überflüssige Verzierungen zu entfernen.

Übungsaufgaben 1. Was ist eine »Benutzeroberfläche«? a. Die Bilder auf dem Bildschirm b. Eine Schnittstelle zwischen Anwender und Inhalt c. Die Schaltflächen auf dem Bildschirm 2. Wie viele Schaltflächen sollten Sie in einer Benutzeroberfläche höchstens verwenden? a. Fünf oder zwei mehr oder weniger als fünf b. Weniger als zehn c. So viele, wie benötigt werden 3. Wenn der Anwender eine direkte und eindeutige Rückmeldung zum Anklicken einer Schaltfläche bekommt, gibt es darüber hinaus ein Argument dafür, einen ausgewählten Status für die Schaltfläche zu definieren? a. Nein, die Rückmeldung reicht aus. b. Ja, Sie wollen erreichen, dass der Anwender immer weiß, welche Schaltfläche er zuletzt benutzt hat, auch wenn er seinen Blick kurz vom Bildschirm abgewendet hat. c. Ja, weil Herr Kerman es sagt. Siehe Abschnitt »Definieren Sie unterschiedliche Zustände einer Schaltfläche« am Anfang dieses Kapitels.

390

Optimierung Ihrer Flash-Site

0 2

Optimierung Ihrer Flash-Site

Jetzt können Sie bereits zeichnen, animieren und eine Seite entwerfen, die sowohl interessant aussieht als auch einfach zu handhaben ist. Natürlich benutzen Sie entweder FILM TESTEN oder VORSCHAU FÜR VERÖFFENTLICHUNGEN, um eine genaue Vorstellung davon zu bekommen, wie Ihr Film aussehen wird. Es kann allerdings ein deutlicher Unterschied dazwischen bestehen, ob der Film auf Ihrer Festplatte oder bei Ihrem Internetpublikum abläuft. Dabei variiert nämlich nicht nur die Verbindungsgeschwindigkeit, auch das Verhalten der einzelnen Computer der Anwender kann sich unterscheiden. Das Ergebnis könnte ein Film sein, der auf dem Rechner eines Anwenders eine lange Ladezeit benötigt und dann beim Abspielen ruckelt, obwohl er auf Ihrem Computer sofort gleichmäßig läuft. Optimieren beinhaltet zwei voneinander unabhängige Angelegenheiten: das Verringern der Dateigröße eines Films, um die Ladezeit zu verkürzen, und das Verbessern der Filmwiedergabe, so dass sichergestellt ist, dass der Film unabhängig von der Geschwindigkeit des Prozessors auf verschiedenen Computern gleich gut läuft. Dieses Kapitel untersucht beide Themen in dem Versuch, sicherzustellen, dass Ihr Film eine kurze Ladezeit hat und auf allen Rechnern der Anwender gut läuft,. In diesem Kapitel werden wir: 쐽

die Dateigröße Ihres Films reduzieren, ohne die Qualität in Mitleidenschaft zu ziehen,

쐽

unnötige Spezialeffekte entfernen, um die Leistung zu verbessern,

쐽

geeignete Alternativen zu Flash finden.

20.1 Überlegungen zur Dateigröße Der schnellste Weg, Ihr Publikum zu verlieren, besteht darin, sie einer langen Ladezeit auszusetzen. In Kürze werden Sie erfahren, wie Sie die Dauer der Ladezeit eines Films kalkulieren können. Die einfache Formel lautet jedoch: Je schneller ein Film geladen wird, desto besser ist es. Auch wenn Internetverbindungen schneller werden (z.B. mit Technologien wie DSL und Kabelmodems), ist es eine Tatsache, dass die Mehrheit Ihres potenziellen Publikums immer noch mit einer Wählverbindung (56 Kbit/s-Modems oder langsamer) arbeitet. Selbst wenn Sie sich dafür entscheiden, sich nur an die Anwender mit schnellen Verbindungen zu richten, gibt es keinen Grund, Filme größer zu machen als absolut notwendig. Man neigt dazu, die Technologie an ihre Grenzen zu bringen und ein bisschen darüber hinaus. Wenn Sie das Fassungsvermögen eines Schranks komplett ausnutzen und dann einen neuen, größeren Schrank bekommen, füllen Sie sehr wahrscheinlich den neuen Schrank und denken dabei, dass Sie sogar noch mehr Platz benötigen – das ist normal. Die Tatsache, dass Sie sehr große Flash-Dateien erstellen können, heißt noch lange nicht, dass Sie das auch tun sollten.

392

Überlegungen zur Dateigröße

Kalkulieren von Ladezeiten Man braucht keine komplizierte Formel, um einzuschätzen, wie lange eine Datei zum Laden braucht. Sie müssen nur wissen, wie groß die Datei ist und mit welcher Geschwindigkeit der Anwender sie herunterlädt. Das ist vergleichbar mit der Schätzung, wie lange man für eine bestimmte Strecke mit dem Auto braucht; Sie müssen nur die Entfernung und die Geschwindigkeit des Autos kennen. Wenn die Entfernung z.B. 30 Kilometer beträgt und die Geschwindigkeit 60 Kilometer in der Stunde beträgt, sollte Ihre Fahrt eine halbe Stunde dauern. Die Entfernung in Kilometern dividiert durch die Geschwindigkeit in Stundenkilometern ergibt die Zeit in Stunden (Entfernung / Geschwindigkeit = Zeit). Diese Formel lässt sich einfach auf die Ladezeiten übertragen: Dateigröße / Übertragungsgeschwindigkeit = Zeit. Eine Dateigröße, die zehn Einheiten enthält, benötigt bei einer Geschwindigkeit von fünf Einheiten pro Sekunde zwei Sekunden. Das ist einfach! Wir brauchen noch nicht einmal von Bits, Bytes und Kilobytes zu sprechen. All diese Begriffe beziehen sich auf verschiedene Einheiten – wie Meter und Zentimeter oder Mark und Pfennig. Die Formel funktioniert immer, vorausgesetzt, die Einheiten für die Dateigröße und die Übertragungsgeschwindigkeit sind gleich. Ein Auto, das 100 Stundenkilometer schnell fährt, wird 50 Kilometer in einer halben Stunde schaffen. Wir werden uns später mit Bits und Bytes befassen, für den Moment merken Sie sich die Formel Größe / Geschwindigkeit = Zeit. In Wirklichkeit können Sie nur schätzen (und nicht berechnen), wie lange es dauert, mit dem Auto irgendwohin zu fahren, weil Ihre Geschwindigkeit leicht schwanken wird. Das Gleiche trifft auf Flash-Filme zu, da die Download-Geschwindigkeit schwankt. Dass Sie ein 28,8-Kbit/s-Modem besitzen (das theoretisch 3,6 Kbyte/s empfängt) bedeutet nicht, dass eine 100 Kbyte große Datei in 28 Sekunden geladen wird (also 100 Kbyte / 3,6 Kbyte/s = 28 Sekunden). Abhängig von verschiedenen Faktoren wie einem hohen Datenaufkommen im Internet und der Leistungsfähigkeit des Webservers kann die Ladezeit der Datei sich verlängern. Wenn die aktuelle Übertragungsgeschwindigkeit z.B. nur 2,3 Kbyte/s beträgt, wird die Datei von 100 Kbyte in 43 Sekunden geladen. Machen Sie sich bewusst, dass es sich immer nur um eine Schätzung handelt, wenn Sie sich an das Berechnen von Ladezeiten machen.

Was ist groß? Was ist klein? Die Formel zur Schätzung von Ladezeiten kann also wie folgt zusammengefasst werden: Je größer die Datei, desto länger ist die Ladezeit. Folglich muss die Dateigröße verringert werden, wenn eine kürzere Ladezeit das erklärte Ziel ist. In diesem Abschnitt werden Sie erfahren, welche Flash-Features dazu neigen, größere Dateien hervorzubringen, oder – was entscheidender ist – Sie werden alternative Techniken kennen lernen, um den gleichen Effekt zu erzielen, dabei aber weniger Einfluss auf die Dateigröße nehmen. Obwohl

393

Optimierung Ihrer Flash-Site

manche Flash-Features um jeden Preis gemieden werden sollten (wie MODIFIZIEREN / FORM / ECKEN ABRUNDEN), brauchen Sie nicht alles zu vermeiden, was die Datei vergrößert – Sie sollten sie eben nur dann benutzen, wenn sie wirklich benötigt werden.

Linien benötigen weniger Speicherplatz als Füllungen Egal ob Sie eine Füllung oder eine Linie zeichnen, Flash speichert einen Algorithmus, der zur Anzeige des Gezeichneten nötig ist. Im Fall von Füllungen (die z.B. mit dem PinselWerkzeug gezeichnet sind), wird die Information für alle Seiten der Fläche gespeichert. Sie können, wie in Abbildung 20.1 zu sehen ist, nur eine Seite der Füllung verändern. Linien jedoch haben gar keine Seiten oder Tiefe – Sie haben lediglich Endpunkte. Nehmen wir an, Sie zeichnen eine grüne Linie mit einer Strichstärke von 10. Flash speichert nur die Linie, die Stärke und die Farbe. Genau genommen wird von Flash nicht die tatsächliche Stärke gespeichert, sondern nur, dass eine Stärke auf die Linie angewendet werden muss. Die gleiche Form würde, wenn sie mit dem Pinsel-Werkzeug gezeichnet wäre, in Flash das Speichern von Informationen über alle Seiten der Form erforderlich machen – stellen Sie sich für diesen Fall eine einfache Linie als eine Form mit vier Seiten vor. Betrachten Sie Abbildung 20.2, in der ich zwei Linien gezeichnet, eine davon in eine Füllung umgewandelt (über MODIFIZIEREN / FORM / LINIEN IN FÜLLUNGEN KONVERTIEREN) und dann alles mit dem Unterauswahl-Werkzeug ausgewählt habe. Wie Sie sehen, gibt es in der Füllung wesentlich mehr Ankerpunkte, was bedeutet, dass sie zu einer größeren Datei führen wird.

Abbildung 20.1: Füllungen benötigen mehr Speicherplatz, weil Flash (anders als bei Linien) Informationen über alle Seiten der Form speichern muss.

394

Überlegungen zur Dateigröße

Abbildung 20.2: Die rechte Linie wurde in eine Füllung konvertiert. Das UnterauswahlWerkzeug kann benutzt werden, um die zusätzlichen Informationen der Füllung zu sehen.

Text teilen Wenn Sie ein Textfeld markieren und dann MODIFIZIEREN / TEILEN auswählen, verwandelt sich der Text in eine Form. Abgesehen davon, dass Sie einen einmal geteilten Text nicht mehr editieren können, nimmt Ihre Dateigröße in der Regel zu, weil Flash jede einzelne Biegung in jedem einzelnen Buchstaben speichert. Tatsächlich erfordert auch der reine Text, dass die Umrisse der Buchstaben gespeichert sind, dies wird allerdings von der Schrift selbst erledigt, die das im Übrigen sehr effizient tut. Der Buchstabe »i« kommt in dem Wort Phillip zum Beispiel zweimal vor, ist aber nur einmal in der Schrift gespeichert. Wenn der Text geteilt wäre, würde der Buchstabe jedes Mal wieder gespeichert. Im Allgemeinen wird geteilter Text (im Gegensatz zu normalem statischem Text) die Datei fast immer vergrößern. Stellen Sie sich einen Textabsatz vor. Wahrscheinlich wird das Teilen des Textes Ihre Datei vergrößern, da Flash die Informationen über die Form jedes einzelnen Buchstabens speichern muss. Stellen Sie sich jedoch vor, Sie haben eine besondere Schrift, die Sie nur für einen einzigen Buchstaben verwenden wollen. Wenn Sie nur diesen Buchstaben vom restlichen Text teilen, kann Ihre Datei tatsächlich kleiner werden! Das rührt daher, dass die benötigte Information, die Flash für die gesamten Schrift speichern wird, umfangreicher ist als die Information für den herausgelösten und in eine Form verwandelten Buchstaben. Die Schlussfolgerung daraus ist, dass Sie den Text nicht teilen sollten, wenn Sie die gleiche Schrift an verschiedenen Stellen Ihres Films verwenden oder einen langen Text (in der gleichen Schrift) haben. Wenn es sich nur um einen Buchstaben handelt, werden Sie ihn

395

Optimierung Ihrer Flash-Site

wahrscheinlich vom restlichen Text trennen wollen. (Zu einem späteren Zeitpunkt in diesem Kapitel werden Sie erfahren, wie Sie den Unterschied der Dateigröße messen können, so dass Sie das Ergebnis der verschiedenen Methoden einfach vergleichen können.) Natürlich müssen bei der Entscheidung zwischen geteiltem und normalem statischen Text weitere Gesichtspunkte einbezogen werden (so z.B. ob Sie absolut sicher sind, dass Sie den Text wirklich nie wieder bearbeiten müssen).

Dynamischer Text und Texteingaben mit eingebetteten Schriften können groß sein Manchmal haben Sie keine Wahl zwischen geteiltem und statischem Text. Wenn Sie dynamischen Text oder Texteingaben verwenden, gibt es keine Möglichkeit, den Text zu teilen (ansonsten wäre der Text nicht mehr veränderbar). Allerdings können Sie entscheiden, welche Schriftumrisse sie (wenn überhaupt) enthalten sollen. Abbildung 20.3 zeigt, wo Sie diese Einstellung treffen können. Weitere Angaben dazu, wie diese Einstellungen genutzt werden können, sind in Kapitel 15 erwähnt. Es ist hier noch wichtig zu erwähnen, dass Sie nicht mehr Schriftumrisse einbetten sollten, als absolut nötig sind, da dies die Datei bedeutend vergrößert.

Abbildung 20.3: Das Einbetten aller Schriftumrisse ist notwendig, wenn in einem dynamischen Feld eigene Schriften angezeigt werden sollen – allerdings vergrößert dies die Datei bedeutend.

396

Überlegungen zur Dateigröße

Verschachtelte Filmsequenzen sind kleiner als verschachtelte grafische Symbole Dieses Thema ist in Kapitel 12 ausführlich behandelt worden, soll aber hier trotzdem erwähnt werden. Einfach ausgedrückt sind grafische Symbole gut geeignet, wenn Sie die Vorschau ihrer Veränderung in der Zeitleiste benötigen. Filmsequenzen (die in anderen Filmsequenzen verschachtelt sind) werden jedoch zu einer kleineren Dateigröße führen.

Formtween, Bewegungstween und Schlüsselbilder Vergessen Sie für einen Moment die sichtbaren und funktionalen Unterschiede zwischen den verschiedenen Arten des Tweenings und der Benutzung von Schlüsselbildern für eine Animation. Im Allgemeinen vergrößern Formtweens die Datei am meisten. Der Unterschied zwischen Bewegungstweens und mehreren Schlüsselbildern ist nicht so eindeutig. Im Grunde wünschen Sie so wenig Schlüsselbilder wie möglich. Ein Bewegungstween benötigt Flash, um dazwischenliegende Schlüsselbilder zu erstellen (obwohl Sie diese nicht sehen werden). Tatsächlich ist es so, dass es im Endeffekt das Gleiche ist, ob Sie ein Bewegungstween benutzen, um mit einem Schlüsselbild im ersten Bild und einem weiteren in Bild 10 einen Kreis über den Bildschirm zu bewegen oder ob Sie dafür zehn einzelne Schlüsselbilder verwenden. (Natürlich würden Sie in einem solchen Fall eine Instanz des Kreis-Symbols benutzen, so dass es nicht zahlreiche Kopien der Form gäbe.) Im Grunde genommen sind die Einzelbild-Animation und das Bewegungstweening ungefähr das Gleiche. Allerdings kann es bei der Einzelbild-Animation vorkommen, dass Sie die gleichen Wirkungen auch dann erzielen, wenn Sie weniger Bilder verwenden. Das kann die Bewegung nicht nur realistischer und flüssiger machen, sondern kann zu einer kleineren Dateigröße führen, da weniger Bilder benutzt werden. Um es noch einmal zusammenzufassen, vermeiden Sie Formtweens und halten Sie immer nach einer Möglichkeit Ausschau, wie Sie weniger Bilder verwenden können.

Optimieren Sie behutsam Auch wenn die vorhergehenden Hinweise (es werden in diesem Kapitel noch einige folgen) wie feste Regeln erscheinen, erinnern Sie sich daran, dass Flash über nützliche Features zur Dateigrößenerstellung verfügt. So gibt es beispielsweise keine bessere Art, einen Morphing-Effekt zu erzielen als das Formtweening. Nur weil Formtweens Ihre Datei vergrößern, heißt das noch lange nicht, dass sie nicht genutzt werden können. Suchen Sie nach Alternativen, wo es angebracht erscheint, zögern Sie jedoch nicht, Formtweens zu benutzen, wenn Sie es müssen. Wenn Sie wissen, welche Features dazu neigen, die Dateigröße negativ zu beeinflussen, können Sie mit diesem Hintergrund bessere Entscheidungen treffen. Diese Hinweise stellen einen guten Ausgangspunkt dar. Zu einem späteren Zeitpunkt in diesem Kapitel werden Sie sehen, wie Sie die Auswirkung einzelner Features auf die Dateigröße berechnen können.

397

Optimierung Ihrer Flash-Site

Sound- und Bitmap-Dateien Ton-Dateien und Rastergrafiken (wie Dateien mit der Endung .jpg und .bmp) wurden im vorigen Abschnitt nicht erwähnt. Sie haben eine derart enorme Auswirkung auf die Dateigröße, dass ihnen dieser gesamte Abschnitt gewidmet ist. Die Ersparnis an Dateigröße, die Sie durch andere Tipps gemacht haben (wie z.B. Linien statt Füllungen zu benutzen und Filmsequenzen anstelle grafischer Symbole) verblasst im Vergleich zur Tragweite der Handhabung von Sound- und Bitmap-Dateien. Das soll nicht heißen, dass Text und Vektorgrafiken gar keine Rolle spielen, aber Sounds und Bitmaps sind von größerer Bedeutung. Alles, was Sie zur Verringerung ihrer Größe tun können, wird zu einer großen Einsparung der Dateigröße Ihres Films führen.

Sound-Dateien Flash bietet mehrere Möglichkeiten, Ton-Dateien und Bitmap-Dateien zu komprimieren. Sie haben bereits in Kapitel 3 und 10 gesehen, wo diese Einstellungen zur Komprimierung für jede importierte Grafik oder Ton-Datei (mithilfe des Fensters Eigenschaften in der Bibliothek) individuell getroffen werden können. In Kapitel 24 werden Sie darüber hinaus erfahren, wie Sie die Einstellungen zur Komprimierung für alle importierten Sound- und Grafik-Dateien mithilfe der EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN auf einmal festlegen können. Auch wenn Sie bereits wissen, wo die Einstellungen zur Kompression getroffen werden, können Sie jetzt noch nicht genau verstehen, wie das Ihre Filme beeinflusst. Es gibt verschiedene Arten der Kompression. Für Audio-Dateien sollten Sie stets MP3 benutzen. Obwohl Flash ADPCM unterstützt, sollten Sie es nur in dem Fall verwenden, wenn Sie Ihren Film in Flash 3 oder niedriger veröffentlichen. (Wenn der Sound in Ihrem Film auch bei Leuten laufen soll, die nur den Flash-3-Player besitzen.) Wenn Ihr Film nur auf Ihrer Festplatte laufen soll (vielleicht arbeiten Sie an einer besonderen Dia-Show, die nicht im Internet veröffentlicht wird), können Sie keine Kompression angeben (RAW). Abgesehen von diesen beiden Fällen ist MP3 die beste Wahl. Es gibt einen einfachen Zusammenhang zwischen der Qualität und der Größe einer Datei. Sie haben in Kapitel 10 erfahren, wie Sie die Einstellungen für die Kompression eines einzelnen Sounds vornehmen. Im Grunde probieren Sie eine Einstellung aus und hören sich das Ergebnis an. Während Sie die verschiedenen Arten der Kompression testen, können Sie sowohl den Unterschied hören als auch die sich ändernde Dateigröße beobachten. Es ist nur eine Sache des Ausbalancierens zwischen diesen beiden Prioritäten (gute Qualität und kleine Datei). Es gibt eine Reihe zusätzlicher Möglichkeiten, Sound-Dateien zu optimieren. Die einfachste ist, sich daran zu erinnern, dass Stereo-Sounds doppelt so groß sind wie MonoSounds. Aus diesem Grund sollten Sie Flash die Sound-Dateien immer von Stereo nach

398

Überlegungen zur Dateigröße

Mono konvertieren lassen, es sei denn, Sie benötigen wirklich Stereo. Merken Sie sich, dass Sie die Stereo-Blendeffekte auch auf Mono-Sounds anwenden können. Über den Bereich Effekt und die Schaltfläche Bearbeiten auf dem Bedienfeld Sound erreichen Sie das Fenster Hülle bearbeiten, wo Sie vordefinierte Effekte (wie z.B. Von links nach rechts) benutzen, oder einen eigenen Effekt definieren können, um einem Mono-Sound stereoartige Effekte zuzuweisen (siehe Abbildung 20.4).

Abbildung 20.4: Das Fenster Hülle bearbeiten (das über das Bedienfeld Sound erreicht wird) ermöglicht die Verwendung von Blendeffekten auch bei Mono-Sounds.

Eine weitere Möglichkeit, den Einfluss von Sound-Dateien auf die Dateigröße zu verringern, besteht darin, übermäßige Stille an Anfang und Ende des Sounds zu entfernen. Bei Toningenieuren ist es üblich, jede Sound-Datei mit etwas Stille zu polstern. Sounds benötigen für jede Sekunde, die abgespielt wird, die gleiche Speichermenge und zwar unabhängig davon, ob sie hörbar ist oder nicht. Idealerweise sollten die Sounds geschnitten werden, bevor sie importiert werden, Sie können sie aber auch innerhalb von Flash mithilfe des Fensters Hülle bearbeiten schneiden. Sie können diese Methode in Kapitel 10 nachsehen, an dieser Stelle sollten Sie bedenken, dass es zu kleineren Dateien führt. So habe ich z.B. die Größe des Beam Scan-Sounds (den Sie unter FENSTER / ALLGEMEINE BIBLIOTHEKEN / SOUNDS finden) durch Entfernen der übertriebenen Stille um zehn Prozent verringert. Das hört sich vielleicht nicht nach viel an, aber da manche Sounds sehr groß sind, können 10% einer großen Datei doch eine erhebliche Größe darstellen. Was aber viel wichtiger ist: Durch das Herausschneiden der Stille habe ich nichts verloren.

399

Optimierung Ihrer Flash-Site

Bitmap-Dateien Die Größe von Bitmap-Grafiken kann auf verschiedene Arten verringert werden. Vor allen Dingen sollten Sie erwägen, überhaupt keine Bitmap-Grafiken zu verwenden. Auch wenn sich dieser Tipp etwas merkwürdig anhört, denken Sie darüber nach. Auf jeden Fall sollten Sie jede unnötige Rastergrafik (mit den Endungen .jpg, .gif, .bmp usw.) vermeiden, da die Farbe jedes einzelnen Pixels in der Datei gespeichert wird. Im Gegensatz dazu wird bei Vektorgrafiken lediglich ein Algorithmus gespeichert, der das Anzeigen der Form ermöglicht. Allerdings gibt es bestimmte Arten von Bildern (wie z.B. Fotos), die man nur als Bitmap-Grafiken verarbeiten kann. Daher haben Sie nicht immer die Wahl. Trotzdem eine Warnung: Der Befehl MODIFIZIEREN / BITMAP NACHZEICHNEN, der in Kapitel 3 erläutert wurde, konvertiert eine Bitmap-Grafik in eine Vektorgrafik. Sie sollten diesen Befehl jedoch nur verwenden, wenn die Bitmap-Grafik klar begrenzte Bereiche enthält. Wenn Sie in dem Dialogfenster Bitmap nachzeichnen einstellen, dass viele winzige Vektorformen anstelle von großen Flächen gezeichnet werden, wie in Abbildung 20.5 gezeigt, kann es Ihnen passieren, dass Sie eine Vektorgrafik erstellen, die größer ist als die ursprüngliche Bitmap-Grafik. Viele Leute scheinen zu glauben, dass Vektorgrafiken klein und Bitmap-Grafiken groß sind, aber wenn man es übertreibt, können auch Vektorgrafiken eine beachtliche Größe annehmen. Benutzen Sie BITMAP NACHZEICHNEN also nur, wenn der Inhalt Ihrer Bild-Datei als Vektorgrafik besser gespeichert werden kann, was der Fall ist, wenn sie große geometrische Formen enthält. (Natürlich können Sie BITMAP NACHZEICHNEN nutzen, um einen bestimmten Effekt zu erzielen; machen Sie sich nur die möglichen Auswirkungen auf die Dateigröße klar.)

Abbildung 20.5: Wenn Sie Bitmap nachzeichnen auf ein Foto anwenden, müssen die Werte für die Farb- und Kantenschwelle sowie für die kleinste Fläche so klein sein, dass das Bild an Größe verliert.

400

Überlegungen zur Dateigröße

Als kleinen Rückblick will ich den Unterschied zu den Exportoptionen von Bitmap-Grafiken erwähnen.

Importieren und komprimieren von Dateien hoher Auflösung Auch wenn es widersprüchlich klingt, sollten Sie Sound- und Bitmap-Dateien zunächst in der größtmöglichen Auflösung importieren. Das wird die Größe Ihrer Flash-Datei (.fla) natürlich erhöhen. Sie können das Komprimieren vor dem Veröffentlichen Ihres Films in Flash ausführen. Sie bestimmen entweder mit den Einstellungen einzelner Sounds und Bitmap-Grafiken in der Bibliothek oder mithilfe der EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN, wie stark Flash Ihre Daten komprimiert. Beispielsweise sollten Sie, anstatt ein Bild vor dem Importieren nach Flash in ein komprimiertes .jpg umzuwandeln, besser mit der unkomprimierten .bmp- oder .png-Datei höchster Auflösung anfangen. Wenn es einmal importiert ist, können Sie festlegen, wie Flash es zum Export komprimieren soll. Sie können auf diese Art jederzeit entscheiden, ob stärker oder geringer komprimiert werden soll. Wenn Sie mit einer komprimierten Fassung (und damit schlechterer Qualität) anfangen, können Sie diese in Flash nicht verbessern. Sound-Dateien sollten im .wav- oder .aif-Format importiert werden (MP3-Dateien sind bereits komprimiert). Rastergrafiken sollten im .bmp-, .png- oder im .pct-Format vorliegen. (Beachten Sie dabei, dass .jpg-Dateien immer komprimiert sind und dass .gif-Dateien nur 256 Farben unterstützen.) Wenn Sie jedoch einen bereits komprimierten Sound oder ein Bild haben (also eine .mp3oder .jpg-Datei) und Sie entweder kein höher aufgelöstes Original bekommen können oder der Meinung sind, die derzeitige Komprimierung sei ideal, besteht keine Veranlassung für die Umwandlung in ein anderes Dateiformat. Importieren Sie die Datei wie sie ist, stellen Sie aber sicher, dass Flash sie nicht dekomprimiert. Für importierte komprimierte Bilder gibt es die Option Importierte JPEG-Daten verwenden im Dialogfenster BitmapEigenschaften der Bibliothek. Wenn Sie diese Option aktivieren, verhindern Sie, dass Flash die Datei dekomprimiert. Der einzige Fall, bei dem Sie ein bereits komprimiertes Bild in Flash dekomprimieren sollten, liegt vor, wenn Sie keinen Zugang zur OriginalDatei haben. Das Komprimieren einer bereits komprimierten Datei wird zwar tatsächlich die Dateigröße verringern, die Qualität wird dabei allerdings schlechter, als würden Sie die gleiche Komprimierungsstufe, ausgehend von einer hoch aufgelösten Datei, erreichen. Stellen Sie im Fall von MP3-Ton-Dateien sicher, dass die Dateigröße beim Auswählen einer bestimmten Kompressionseinstellung nicht zunimmt. Wenn zum Beispiel, nachdem Sie im Dialogfenster Sound-Eigenschaften auf Testen geklickt haben, 145% des Originals angezeigt wird, haben Sie die Datei vergrößert. Wenn Sie versuchen, die Datei auf diesem Weg zu dekomprimieren, wird die Datei zwar größer, die Qualität jedoch nicht verbessert.

401

Optimierung Ihrer Flash-Site

Benutzen des Bandbreiten-Profilers Jetzt, wo Sie wissen, wie Sie die Dateigröße durch Komprimieren von Sound- und BitmapDateien sowie durch die Verwendung bestimmter Zeichentechniken beeinflussen können, sollten Sie das genaue Ausmaß der einzelnen Einsparungen nachvollziehen. Es kann sein, dass Sie Sound-Dateien verwenden wollen, auch wenn Sie wissen, dass sie die Datei vergrößern. Ihre Entscheidung sollte sich allerdings danach richten, wie stark der Sound die Datei vergrößert. Wenn sich herausstellt, dass der Anwender nur ein paar Sekunden länger warten muss, kann das Hinzufügen von Sound sich lohnen. Wenn das Hinzufügen eines Sounds jedoch bedeutet, dass der Anwender zehn Minuten länger warten muss, sollten Sie ihn nicht verwenden. Um zu entscheiden, ob das Hinzufügen eines bestimmten Elements sinnvoll ist, müssen Sie wissen, wie stark es sich auf die Dateigröße auswirkt. Der Bandbreiten-Profiler hilft Ihnen, den genauen Wert festzustellen, den jedes einzelne Element zur Datei hinzufügt. Im Prinzip probieren Sie eine Technik zur Reduzierung der Dateigröße aus (wie z.B. Komprimieren) und nutzen dann den Bandbreiten-Profiler, um zu beurteilen, wie stark die Veränderung geholfen hat. Wenn Sie eine weitere Veränderung vornehmen, ziehen Sie den Bandbreiten-Profiler erneut zu Rate, um die Verbesserung nachzuvollziehen. Im vorigen Abschnitt ging es darum, herauszufinden, wodurch die Dateigröße zunimmt; der folgende Abschnitt wird erläutern, wie Sie die Auswirkungen von Veränderungen auf die Dateigröße messen können. Das Aufrufen des Bandbreiten-Profiler ist leicht, es ist allerdings etwas schwierig, die von ihm gelieferten Daten zu deuten. Die folgende Aufgabe macht Sie mit den Basisfunktionen des Bandbreiten-Profilers vertraut.

Aufgabe: Benutzen Sie den Bandbreiten-Profiler, um die Ladezeiten zu beurteilen! In dieser Aufgabe lernen Sie, wie der Bandbreiten-Profiler Ihnen helfen kann, herauszufinden, wie ein Film wohl über das Internet abgespielt wird. Folgen Sie diesen Schritten: 1. Öffnen Sie SCHLÜSSELBILD ERSTELLEN aus dem Menü HILFE / BEISPIELE. Testen Sie den Film ((Strg)+(¢)). 2. Wählen Sie ANSICHT / BANDBREITEN-PROFILER ((Strg)+(B)), während die .swf-Datei abgespielt wird. Beachten Sie, dass es sich hierbei um eine Option des Flash-Players handelt und nicht des Programms Flash. Daher können Sie ihn auch nur während des Testens sehen. 3. Wie Sie in Abbildung 20.6 sehen, stellt der Bandbreiten-Profiler Informationen zur Verfügung, während der Film abläuft. Sie sehen auf der linken Seite Daten und eine grafische Darstellung auf der rechten Seite.

402

Überlegungen zur Dateigröße

Abbildung 20.6: Im oberen linken Bereich des Bandbreiten-Profilers werden die wesentlichen Daten Ihrer exportierten .swf-Datei gezeigt.

4. Betrachten Sie nun den ersten Abschnitt der Daten mit der Bezeichnung Film. Bei den meisten dieser Informationen handelt es sich um eine kurze Zusammenfassung von Einstellungen, die Sie in Ihrem Originalfilm ändern können (wie z.B. Größe und Bildrate). Darüber hinaus werden Sie zwei veränderbare Einstellungen sehen: Größe (oder Dateigröße) und Vorausladen. Als ich diesen Film getestet habe, hatte ich eine Dateigröße von 23 Kbyte (oder genauer 23.667 Byte). Sie werden später, wenn Sie versuchen, diese Datei zu optimieren, feststellen, ob diese Größe sich verringert hat. Vorausladen zeigt an, wie viele Bilder im Voraus geladen werden müssen (und wie lange das dauert), bis der Film mit dem Abspielen beginnt. Das ist natürlich von der Internetverbindung Ihres Anwenders abhängig. Der Bandbreiten-Profiler kann z.B. die für das Vorausladen benötigte Zeit in Abhängigkeit vom verwendeten Modem (siehe Menü FEHLERSUCHE) einschätzen. 5. Fahren Sie fort und rufen Sie das Menü FEHLERSUCHE auf. Beachten Sie, dass ein Modemtyp (56K ist voreingestellt) aktiviert ist. Wählen Sie 14,4 aus (für 14,4 Kbyte/sModems), und Sie werden sehen, wie sich die Vorausladezeit von weniger als einer Sekunde auf elf Sekunden verändert! 6. Wählen Sie ANPASSEN aus dem Menü FEHLERSUCHE, woraufhin sich das Dialogfenster Benutzerdefinierte Modemeinstellungen öffnet, wie in Abbildung 20.7 zu sehen. Hier können Sie die Voreinstellungen verändern oder eigene Werte eingeben. Fügen Sie eine Einstellung für die übliche DSL-Übertragungsrate von 768 Kbit/s hinzu. Ändern Sie dazu die Beschriftung im vierten Feld Benutzerdefiniert 4 in 768 Kbit/s (DSL) und geben Sie unter Bit-Rate 96.000 Byte/s ein. Klicken Sie auf OK.

403

Optimierung Ihrer Flash-Site

Abbildung 20.7: Das Dialogfenster Benutzerdefinierte Modemeinstellungen versetzt Sie in die Lage, jede Internetverbindungsgeschwindigkeit zu simulieren.

7. Wählen Sie Ihre neuen Einstellungen aus dem Menü FEHLERSUCHE. Sie sollten feststellen können, dass die Vorausladezeit sich gegen Null bewegt hat. 8. Der Bandbreiten-Profiler ermöglicht Ihnen eine genaue Simulation, wie lange das Laden eines Films bei einer bestimmten (aus dem Menü Fehlersuche ausgewählten) Verbindungsgeschwindigkeit dauert. Wählen Sie STREAMING ANZEIGEN aus dem Menü ANSICHT. Der Film wird von vorne beginnen und oberhalb der Streaming-Grafik sehen Sie den Zeitverlauf als grünen Balken. Verändern Sie die Übertragungsrate auf 14,4 (aus dem Menü FEHLERSUCHE) und lassen Sie erneut das Streaming anzeigen. Sogar bei diesem relativ einfachen Film erreicht die Markierung, die das aktuelle Bild anzeigt (ein Pfeil), das Ende des grünen Balkens und muss gelegentlich warten, bis weiterer Inhalt geladen wird. Dies ist zwar kein erstrebenswerter Zustand, aber genau das, was ein Anwender mit einer langsamen Internetverbindung sehen wird. (Sie erfahren in der nächsten Aufgabe, wie Sie damit umgehen können, jetzt geht es nur darum, auftauchende Probleme zu erkennen.) 9. Es gibt eine weitere Einstellung, die Sie überprüfen sollten. Vergewissern Sie sich, dass im Menü ANSICHT die Option BILD-FÜR-BILD-GRAFIK aktiviert ist (oder drücken Sie (Strg)+(F)). Die Grafik zeigt einen vertikalen Balken für die Dateigröße jedes einzelnen Bildes an. Ein hoher Balken bedeutet, dass dieses Bild mehr Daten enthält. Die rote waagerechte Linie repräsentiert die derzeit unterstützte Übertragungsgeschwindigkeit, die Sie im Menü FEHLERSUCHE festgelegt haben. Das heißt mit anderen Worten, dass der Balken eines Bilds, der über die rote Linie hinausragt, dazu führen kann, dass Flash beim Abspielen an dieser Stelle anhalten muss, um auf das Laden der Daten zu warten. In dem Beispiel SCHLÜSSELBILD ERSTELLEN können Sie z.B. ein paar relativ

404

Überlegungen zur Dateigröße

hohe Balken entdecken, die etwa bei Bild 36 anfangen. Dies macht Sinn. Schließen Sie den Testfilm und gehen Sie in die Original-Datei. Genau bei Bild 36 gibt es eine Reihe von Schlüsselbildern, die in zwei Ebenen neue Inhalte haben. All diese neuen Daten bedeuten, dass mehr Daten geladen werden müssen (siehe Abbildung 20.8).

Abbildung 20.8: In Bild 36 erscheinen erstmalig zwei Ebenen mit Schlüsselbildern. Dies erfordert das Laden einer größeren Datenmenge (wie Sie im Bandbreiten-Profiler gesehen haben).

405

Optimierung Ihrer Flash-Site

In der vorigen Aufgabe haben Sie 96.000 Byte/s für eine 768 Kbit/s-DSL-Verbindung angegeben. Dies errechnet sich aus der Geschwindigkeit, die in Kilobit pro Sekunde (oder 768.000 Bit pro Sekunde) angegeben wird. Dateigrößen werden häufig in Kilobyte oder Megabyte angezeigt (nicht in Bit). Da ein Bit ein Achtel eines Bytes ist, können Sie Bit in Byte umrechnen, indem Sie durch acht dividieren. Daher sind 768.000 Bit pro Sekunde so viel wie 96.000 Byte pro Sekunde. Ein 192 Kbyte großes Bild wird mit einer DSL-Verbindung in zwei Sekunden geladen. Ein anderes Problem ist, dass eine Internetverbindung möglicherweise nicht mit einer gleich bleibenden Übertragungsrate lädt. Beachten Sie, dass die voreingestellten Werte im Menü FEHLERSUCHE für das 28,8- und 56K-Modem niedriger sind, als Sie annehmen würden (2.400 und 4.800 anstatt 3.600 und 7.000). Das liegt daran, dass die Voreinstellungen von Flash von realistischen Übertragungsgeschwindigkeiten ausgehen. Im Allgemeinen werden Sie nicht besonders viel zu rechnen haben. In diesem Fall könnte die Berechnung allerdings interessant sein. Benutzen Sie die Option STREAMING ANZEIGEN des Bandbreiten-Profilers, um zu beobachten, wie der Film abgespielt werden wird. Analysieren Sie den Film Bild für Bild, indem Sie darauf achten, bei welchen Bildern die rote Linie überschritten wird. Übrigens muss das Überschreiten der roten Linie nicht unbedingt heißen, dass das Abspielen des Films an dieser Stelle hakt. Wenn möglich beginnt Flash bereits mit dem Laden der Bilder, bevor die problematischen Stellen erreicht werden. So enthalten beispielsweise einige Bilder keine Veränderungen auf dem Bildschirm, die Übertragungsgeschwindigkeit wird aber von Flash aufrecht erhalten. Während diese Bilder gezeigt werden, kann Flash bereits damit beginnen, Bilder zu laden, die im Film an späterer Stelle vorkommen. Bilder ohne sichtbare Veränderungen brauchen keine lange Ladezeit, daher kann Flash sich schon mit dem Laden der kommenden Bilder befassen. Dieses Vorgehen ist eine Form des Streamings. Der Bandbreiten-Profiler bietet die Möglichkeit, dieses Streaming in einer ähnlichen Grafik anzuzeigen wie die Bild-für-Bild-Grafik. Wählen Sie ANSICHT / STREAMING-GRAFIK und Sie sehen, dass es wieder für jedes Bild einen Balken gibt. Im Prinzip werden die einzelnen Bilder abwechselnd als hellgraue und dunkelgraue Balken dargestellt. Die waagerechte rote Linie steht hier für die Datenmenge, die in der Zeit übertragen werden kann, in der ein Bild abgespielt wird (das ist bei einer Bildrate von zwölf Bildern pro Sekunde eine Zwölftel-Sekunde). Wenn das erste Bild (dunkelgrau) in weniger als einem Zwölftel einer Sekunde geladen werden kann, sehen Sie, dass der Balken des zweiten Bildes (hellgrau) auf den dunkelgrauen Balken des ersten Bildes gestapelt wird. Öffnen Sie als Beispiel noch einmal das Beispiel SCHLÜSSELBILD ERSTELLEN, wählen Sie ANSICHT / STREAMINGGRAFIK und im Menü FEHLERSUCHE den Eintrag 56K. In der Zeit, die zum Abspielen von Bild 2 benötigt wird, kann Flash mehr als drei weitere Bilder laden (siehe Abbildung 20.9). Im Ergebnis wird der gesamte aus 81 Einzelbildern bestehende Film in der Zeit geladen, in der 40 Bilder abgespielt werden. (Wählen Sie ANSICHT / STREAMING ANZEIGEN, um diesen Effekt in Echtzeit zu beobachten.)

406

Überlegungen zur Dateigröße

Abbildung 20.9: Die StreamingGrafik (nicht die Bild-für-Bild-Grafik) zeigt, wie schnell Flash weitere Bilder im Voraus lädt.

Der Bandbreiten-Profiler ist sehr hilfreich. Er löst keine Probleme; er hilft Ihnen nur dabei, Problemfelder zu entdecken. In erster Linie sollten Sie vor allem verhindern, dass Ihre Datei zu groß wird. Der Bandbreiten-Profiler lohnt auf jeden Fall eine Betrachtung, bedenken Sie jedoch, dass er Ihnen lediglich beim Aufspüren von Fehlern dient, die hätten vermieden werden können. In der folgenden Aufgabe werden Sie anhand eines Beispiels den Bandbreiten-Profiler schrittweise benutzen, um Probleme zu erkennen und zu beheben.

Aufgabe: Verbessern Sie eine Datei mithilfe des Bandbreiten-Profilers! In dieser Aufgabe erleben Sie eine Situation, in der Ihnen der Bandbreiten-Profiler helfen kann, eine Datei zu verbessern. Folgen Sie dieser Anleitung: 1. Wählen Sie HILFE / SCHLÜSSELBILD ERSTELLEN. Ermitteln Sie dann die Gesamtgröße des exportierten Films. Dazu müssen Sie lediglich den Film testen und auf die Anzeige im linken oberen Bereich des Bandbreiten-Profilers achten (drücken Sie (Strg)+(B), wenn er nicht geöffnet ist). Bei mir werden zum Beispiel 23.667 Byte angegeben. Schreiben Sie sich die bei Ihnen angezeigte Größe auf, um sie später vergleichen zu können. 2. Schließen Sie den Testfilm. Wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN und rufen Sie die Registerkarte Flash auf. Beachten Sie den Schieberegler für die JPEG-Qualität. Bewegen Sie ihn ganz nach links (zur niedrigsten Qualität) und klicken Sie auf OK. 3. Testen Sie den Film erneut, um zu sehen, welche Veränderung die Komprimierung nach sich gezogen hat. Normalerweise sollten Sie keine Veränderung feststellen können, da die JPEG-Kompression nur auf Rastergrafiken angewendet wird und diese Da-

407

Optimierung Ihrer Flash-Site

tei keine hat. (Wenn diese Datei Rastergrafiken hätte, würden Sie wahrscheinlich sehen, dass die getroffene Veränderung die Datei verkleinert, aber auch die Qualität verschlechtert hätte.) 4. Die Veränderung, die Sie in diesem Schritt vornehmen, wird eine andere Dateigröße zur Folge haben – Sie werden die Kurven jeder gezeichneten Form optimieren. Entsperren Sie alle Ebenen (indem Sie auf das Vorhängeschloss klicken, das sich über allen Ebenen in der Zeitleiste befindet) und klicken Sie auf das Symbol Mehrere Bilder bearbeiten (so dass Sie mehrere Bilder auswählen können). Rufen Sie dann das Menü Zwiebelschalenmarkierung ändern auf und wählen Sie daraus wie in Abbildung 20.10 zu sehen den Punkt ALLE ZWIEBELSCHALEN. Wählen Sie abschließend ALLES MARKIEREN aus dem Menü BEARBEITEN ((Strg)+(A)). Wenn alles ausgewählt ist, wählen Sie den Eintrag OPTIMIEREN aus dem Menü MODIFIZIEREN, schieben den Schieberegler zum Glätten ganz nach rechts und aktivieren beide Kontrollkästchen wie in Abbildung 20.11 zu sehen. Klicken Sie auf OK und Sie werden einen Hinweis darauf erhalten, wie groß die Verringerung sein wird. In meinem Fall konnte ich sehen, dass die Verringerung (der Anzahl an Kurven) 71% betrug.

Abbildung 20.10: Wählen Sie Alle Zwiebelschalen, nachdem Sie Mehrere Bilder bearbeiten aktiviert haben, um alle Bilder zu markieren.

5. Testen Sie den Film erneut und beachten Sie dabei die Verbesserung der Dateigröße. Ich erhalte 22.523 Byte, was einen Unterschied von beinahe 1.000 Byte ausmacht. Das ist nicht wirklich viel, aber immerhin etwas. Wichtiger ist, dass das Bild nicht schlechter aussieht.

408

Überlegungen zur Dateigröße

Abbildung 20.11: Die Optimierung der Kurven verringert die Dateigröße und vereinfacht die Formen.

Auch wenn die große Erkenntnis dieser Aufgabe sein mag, dass MODIFIZIEREN / OPTIMIEREN die Dateigröße verringert (wobei die Formen vereinfacht werden), befinden Sie sich immer noch in der Phase des Entdeckens von Problemen. Machen Sie sich jetzt klar, dass der Bandbreiten-Profiler bei der Suche von Problemen helfen kann, diese aber nicht notwendigerweise löst. Interessant ist auch die verwandte Option Größenbericht erstellen, die Sie über DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN auf der Registerkarte Flash finden. Aktivieren Sie diese Option wie in Abbildung 20.12. Wenn Sie das nächste Mal einen Film exportieren (testen Sie einfach einen Film), werden Sie eine Textfassung des Bandbreiten-Profilers im Fenster Ausgabe (das Sie im Menü FENSTER aufrufen können) erhalten. Zusätzlich wird eine Text-Datei (mit einer dem Film ähnlichen Bezeichnung) im gleichen Ordner, in dem sich der Film befindet, angelegt. Diese stellt eine dauerhafte Aufzeichnung der Daten dar, die Sie auch im Bandbreiten-Profiler erhalten. Das Beispiel Schlüsselbild erstellen stockt schließlich immer noch bei Bild 36, wenn ein 14,4-Modem simuliert wird. Wenn Sie sich nach diesem Anwender richten und keine andere Möglichkeit finden, die Dateigröße zu vermindern, müssen Sie auf einen Preloader zurückgreifen. Dieser wird den Film ganz oder teilweise auf die Festplatte des Anwenders laden, bevor er abgespielt wird. Hier finden Sie eine schnelle Art, genau das zu tun.

409

Optimierung Ihrer Flash-Site

Abbildung 20.12: Die Option Größenbericht erstellen des Dialogfensters Einstellungen für Veröffentlichungen exportiert eine Textfassung der vom Bandbreiten-Profiler erhobenen Daten.

Aufgabe: Betrachten Sie einen Preloader im Bandbreiten-Profiler! Um ein Gespür dafür zu bekommen, wie der Bandbreiten-Profiler arbeitet, werden Sie in dieser Aufgabe einen einfachen Preloader erstellen, um das Abspielen beim ersten Bild zu unterbrechen, bis der größte Teil des Films geladen ist. Nachfolgend finden Sie die erforderlichen Schritte: 1. Öffnen Sie das Beispiel Schlüsselbild erstellen (HILFE / BEISPIELE / SCHLÜSSELBILD ERSTELLEN). 2. Da Sie eine Option benutzen werden, die typisch für Flash 5 ist, wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN und Klicken Sie auf den Reiter Flash. Wählen Sie dann Flash 5 aus dem Pull-down-Menü (Diese Option wird in Kapitel 24 weitergehend erläutert.) 3. Wählen Sie SZENE aus dem Menü EINFÜGEN. Öffnen Sie das Bedienfeld Szene und nennen Sie die neue Szene Preloader. Führen Sie einen Doppelklick auf den Namen aus (Szene 2), um den bisherigen Namen zu verändern und ziehen Sie den Preloader nach oben, so dass er an erster Stelle steht. 4. Klicken Sie auf das erste Bild der Preloader-Zeitleiste und fügen Sie dort zwei Schlüsselbilder ein (zweimal (F6) drücken).

410

Überlegungen zur Dateigröße

5. Aktivieren Sie das erste Schlüsselbild, öffnen Sie das Fenster Bild-Aktionen und fügen Sie die if-Aktion ein. Tippen Sie dann _framesloaded>50 in das Eingabefeld Bedingung. Fügen Sie nun noch eine goto-Aktion ein und schreiben Sie eine 3 in das Eingabefeld Bild. 6. Schreiben Sie einen Text auf die Bühne, damit der Anwender das Preloading verfolgen kann. Benutzen Sie das Bedienfeld Textoptionen, um das Textfeld als dynamischen Text zu definieren und tippen Sie _framesloaded in das Eingabefeld Variable. Auf diese Weise wird der Anwender einen wechselnden Wert sehen, während der Film geladen wird. 7. Aktivieren Sie das zweite Bild, fügen Sie die Aktion goto ein und aktivieren Sie das Kontrollkästchen Gehe zu und abspielen. 8. Testen Sie den Film und aktivieren Sie STREAMING SICHT im Bandbreiten-Profiler.

ANZEIGEN

aus dem Menü AN-

Abbildung 20.13: Während die ersten 50 Bilder geladen werden, bleibt der Film auf einem Bild stehen, das anzeigt, wie viele Bilder bereits geladen sind.

Der Preloader, den Sie in Kapitel 18 hergestellt haben, war anspruchsvoller. Dies war jedoch eine gute Möglichkeit, mit dem Bandbreiten-Profiler zu arbeiten. Machen Sie sich abschließend klar, dass wir unseren Preloader nicht erstellt haben, um den gesamten Film zu laden. Während man auf das Laden eines großen Teils der Bilder wartet, wird Flash wahrscheinlich aufholen und die verbleibenden Bilder pünktlich laden, so dass kein Ruckeln entsteht. Es macht keinen Sinn, den Anwender warten zu lassen, bis der gesamte Film geladen ist.

411

Optimierung Ihrer Flash-Site

20.2 Performance Bis jetzt ging es in diesem Kapitel um das Optimieren in Bezug auf kleinere Dateien (damit sie schneller geladen werden können). Ein anderer Aspekt des Optimierens bezieht sich darauf, dass Ihr Film schnell abgespielt wird. Mit anderen Worten geht es darum, sicherzustellen, dass das Abspielen des Films auf allen Anwender-Computern gleichmäßig und reibungslos funktioniert. Wenn Sie Ihre Bildrate auf sagen wir mal zwölf Bilder pro Sekunde stellen, wird diese in keinem Fall überschritten werden. Auf einigen Computern wird die Bildrate sich verringern. Leider gibt es keinen »Performance-Profiler« (ähnlich dem Bandbreiten-Profiler), mit dem Sie die Leistung anderer Rechner simulieren können.

Unerwünschte Spezialeffekte Im letzten Kapitel haben Sie erfahren, wie unnötige Spezialeffekte die Anwender von Ihrem eigentlichen Anliegen ablenken können. Es gibt jedoch noch einen anderen Grund, unnötige Effekte zu vermeiden: zu viele Effekte können dazu führen, dass der Film nur langsam läuft. So ist es z.B. nicht unbedingt nötig, jeden Textabschnitt, der auf dem Bildschirm erscheint, rotieren zu lassen und mit einem Bewegungstween zu versehen. Das mag vielleicht für den ersten Textabsatz interessant sein, aber es kann ermüdend sein, darauf zu warten, bis jeder Absatz seine Animation durchlaufen hat. Wenn der Rechner eines Anwenders bei jedem Tween langsamer wird, ist dies sogar noch störender. Auch wenn ein Bewegungstween, der eine Änderung des Alpha-Effekts beinhaltet, zum Transportieren einer bestimmten Botschaft erforderlich scheint, sollte diese Art des Tweenings mit Vorsicht genossen werden. Zusätzlich zu dem sich bewegenden Objekt muss der Computer auch eine halbtransparente Version des Objekts anzeigen, was bedeutet, dass er die darunter liegende Grafik mit anzeigen muss. Einfach ausgedrückt könnten langsamere Rechner nicht in der Lage sein, mit der gewünschten Bildrate Schritt zu halten. Oft ist noch nicht einmal ein Alpha-Effekt erforderlich. Wenn Ihr Hintergrund z.B. weiß ist, wird ein einfacher Helligkeits-Effekt genauso aussehen und sich nicht so sehr auf die Geschwindigkeit auswirken. Ein weiterer Aspekt, der sich negativ auf die Leistung auswirkt, sind Tweens, die ihre Größe verändern, sich bewegen oder die Alpha-Einstellung einer Bitmap-Grafik verändern. Im Allgemeinen übertrifft sich Flash nicht gerade in der Darstellung von BitmapGrafiken. Das Verändern der Größe einer Rastergrafik ist für den Computer eine Menge Arbeit. Sie können dieses Verhalten selbst mit einem schnellen Rechner nachvollziehen, indem Sie die Bildrate zuerst auf einen hohen Wert stellen (wie zum Beispiel 60 Bilder/ Sek.) und dann ein einfaches Bewegungstween auf eine Rastergrafik anwenden. Wählen Sie ABSPIELEN aus dem Menü STEUERUNG (nicht FILM TESTEN) und betrachten Sie das Abspielen Ihres Films innerhalb Flash. Ändern Sie dann die Größe der Grafik in einem

412

Performance

der Schlüsselbilder des Tweens und spielen Sie den Film erneut ab. Sie werden feststellen, dass die tatsächliche Bildrate an der Stelle zurückgeht, wo sich das Tween mit der Vergrößerung befindet. Es gibt noch weitere Effekte, welche die Leistung verringern. Solche Leistungseinbußen können Sie in der Vorschau beobachten, indem Sie die Bildrate vorübergehend sehr hoch einstellen und dann verschiedene Einstellungen ausprobieren und feststellen, wie diese den Film verlangsamen. Vergessen Sie nicht den Vorschlag vom Anfang dieses Abschnitts, »überflüssige« Effekte einfach zu vermeiden. Wenn Sie unbedingt einen Effekt benutzen müssen, dann tun Sie das. Es ist vor allen Dingen wichtig, vorsichtig mit den Effekten umzugehen, die den Film langsamer machen, da diese dazu führen können, dass die Computer Ihrer Anwender noch langsamer werden.

Streaming von Sound-Dateien Wenn Sie Sounds in Schlüsselbilder einbinden, haben Sie die Wahl zwischen den zwei Synchronisationsoptionen Ereignis und Stream. Normalerweise sollten Sie sich immer für Ereignis (oder eine der anderen Ereignissen ähnlichen Optionen Start oder Stop) entscheiden. Diese wirken sich am wenigsten auf die Leistung aus. Stream ist hilfreich, wenn Sie die Synchronisation aufrechterhalten wollen. Wenn Sie Stream-Sounds benutzen, hören Sie die Sounds auch, wenn Sie über die Zeitleiste fahren. Stream-Sounds sind mit Grafik-Symbolen zu vergleichen, die ebenfalls eine Vorschau ihrer Animation zeigen, wenn Sie über die Zeitleiste fahren. Der Nachteil von Stream-Sounds ist jedoch, dass die sichtbaren Bestandteile Ihres Films geopfert werden, wenn der Computer nicht Schritt halten kann. Da Stream-Sounds immer synchronisiert sind, heißt das, dass Flash Bilder überspringt, wenn der Computer sie nicht pünktlich anzeigen kann (um Schritt zu halten). Daher können Stream-Sounds dazu führen, dass die Grafiken ruckeln oder ganz ausfallen. Das hängt einfach damit zusammen, dass Flash den Sound niemals langsamer abspielen wird (das würde sich eigenartig anhören). Ereignis-Sounds werden so bald wie möglich abgespielt. Wenn der Computer mithält, werden sie wie erwartet abgespielt (also dann, wenn die passenden Schlüsselbilder erreicht werden). Grafiken werden ebenfalls so bald wie möglich angezeigt. Es kann allerdings auf langsameren Rechnern passieren, dass die Grafiken langsamer sind als der Sound, so dass Grafik und Sound nicht mehr perfekt synchronisiert sind. Das soll nicht heißen, dass Sie mit Ereignis-Sounds kein annehmbares Ergebnis erzielen können. Erwägen Sie, die Sound-Dateien vor dem Importieren in kleinere Stücke zu teilen. Sie können Sounds so in der Zeitleiste platzieren, dass sie genau bei den richtigen Grafiken stehen. Das wird zwar auch nicht fehlerfrei laufen, aber wenigstens werden keine Bilder ausgelassen. Wenn Sie keine punktgenaue Synchronisation brauchen, benutzen Sie Ereignis-Sounds, weil dann die Grafiken und der Ton reibungslos abgespielt werden – es könnte höchstens passieren, dass sie nicht perfekt synchronisiert sind.

413

Optimierung Ihrer Flash-Site

Grafiken Hier sind ein paar Tipps, um die bestmögliche Leistung zu garantieren.

Grafische Symbole Trotz aller Überlegungen zu Einsparungen der Dateigröße bei Filmsequenzen (in Kapitel 12), scheinen eingebettete Grafik-Symbole besser abgespielt zu werden. Im Allgemeinen rechtfertigt die geringe Verbesserung in der Leistung nicht die signifikante Vergrößerung der Datei. Sie sollten nur dann Grafik-Symbole verwenden, wenn Sie müssen (benutzen Sie ansonsten Filmsequenzen). Die Tatsache, dass Grafik-Symbole etwas besser abgespielt werden, lohnt die Erwägung ihres Einsatzes, wenn Sie versuchen, die Leistung zu verbessern.

Verwenden Sie Kurven

optimieren

Sie haben gesehen, wie jede gezeichnete Form optimiert werden kann (über das Menü MODIFIZIEREN / OPTIMIEREN). Kurven optimieren wird Kurven aus einer Form entfernen, so dass sie glatter aussieht. Manchmal ist der sichtbare Effekt minimal, die Verringerung der Dateigröße hingegen bedeutend. Manchmal ist die sichtbare Veränderung allerdings zu groß, als dass man sie akzeptieren könnte, wie es in Abbildung 20.14 der Fall ist. Erwägen Sie das Optimieren immer, wenn die sichtbare Veränderung akzeptabel ist. Abgesehen davon, dass die Dateigröße verringert wird, wird häufig auch die Leistung verbessert (noch ein weiterer Grund, es zu verwenden).

Abbildung 20.14: Sie sehen zwei Formen vor und nach der Anwendung von Kurven optimieren. Manchmal können die Ergebnisse unannehmbar sein.

414

Performance

Verwenden Sie niemals MODIFIZIEREN / FORM / ECKEN ABRUNDEN »Niemals« ist ein hartes Wort, das in diesem Fall aber zutrifft. Es dauert nicht länger als ein paar Minuten, sowohl die Differenz der Dateigröße als auch den Unterschied der Leistung für eine gezeichnete Form, deren Ecken abgerundet wurden, festzustellen. Probieren Sie es aus, indem Sie ein einfaches Formtween erstellen. Testen Sie den Film und beachten Sie die Bildrate. Wählen Sie die Form dann einzeln an jedem Ende des Tweenings aus und wenden Sie MODIFIZIEREN / FORM / ECKEN ABRUNDEN an. Sie werden feststellen, dass die Dateigröße sprungartig zu- und die Leistung abnimmt. Ich nehme an, dass der einzige Fall, in dem Sie die Benutzung dieser Option in Erwägung ziehen könnten, das Exportieren eines feststehenden Bildes ist (das hieße, Sie würden Flash als Grafik-Werkzeug verwenden).

Vermeiden Sie bestimmte Linientypen In Kapitel 2 wurde Ihnen das Pull-down-Menü für verschiedene Linientypen im Bedienfeld Linie vorgestellt (siehe Abbildung 20.15). Versuchen Sie, nur Massiv und Haarlinie zu verwenden. Die anderen Linienarten neigen dazu, Ihre Filme stark zu vergrößern. Ich kann nicht behaupten, dass Sie in jedem Fall eine schlechtere Leistung bekommen werden, Sie werden aber sicher die Zunahme Ihrer Dateigröße feststellen.

Abbildung 20.15: Sie sollten versuchen, nur die Linientypen Haarlinie und Massiv zu verwenden.

415

Optimierung Ihrer Flash-Site

20.3 Zusammenfassung In diesem Kapitel haben Sie sich mit zwei verschiedenen Möglichkeiten befasst, Ihre Flash-Filme zu optimieren. Sie sollten die Dateigröße optimieren, um das Laden Ihrer Filme zu beschleunigen und Sie sollten die Leistung optimieren, damit sie gleichmäßiger ablaufen. Der Bandbreiten-Profiler und die Option Größenbericht erstellen ermöglichen die Untersuchung Ihrer Filme nach mehreren Gesichtspunkten. Sie können Ladezeiten simulieren und Bereiche in Ihren Filmen erkennen, die eine besondere Beachtung erfordern. Der Prozess des Optimierens wurde auch auf die Leistung angewendet. Auch wenn Ihre Filme auf Ihrem Computer mit gleichbleibend hoher Bildrate wie zum Beispiel 30 Bilder/ Sek. ablaufen, können sie sich auf den Rechnern Ihrer Anwender verlangsamen. Obschon es keinen sicheren Weg gibt, herauszufinden, wie Ihr Film aussehen wird (außer Sie testen ihn tatsächlich auf anderen Computern), besteht die einfache Annäherung an die Leistungsoptimierung darin, einfach zu wissen, welche Arten von Effekten und Techniken dazu neigen, Rechner zu verlangsamen und zu versuchen, diese zu vermeiden.

20.4 Workshop F&A F

Ich habe alle Tipps zur Optimierung der Leistung befolgt, musste aber trotzdem feststellen, dass meine Animation ruckelig aussieht. Wo liegt der Fehler? A

F

Was ist die ideale Größe für einen Film? A

416

Es kann sein, dass Sie einfach versuchen, eine Grafik über eine lange Strecke zu bewegen, dafür aber nur wenige Bilder benutzen. Versuchen Sie, die Anzahl der insgesamt verwendeten Bilder zu erhöhen. Das können Sie durch Erhöhen der Bildrate ausgleichen. Sie werden die gleiche Bewegung sehen, die jedoch in mehrere (kleinere, zahlreichere) Einzelschritte zerlegt ist, vorausgesetzt der Computer kann mit der erhöhten Bildrate mithalten.

Dies ist eine häufig gestellte Frage, aber auch eine, die unmöglich beantwortet werden kann. Ich denke, die beste Antwort ist »nicht größer als unbedingt nötig«. Überlegen Sie auch, dass Sie eine lange Ladezeit auf einfallsreiche Art überbrücken können. Sie können natürlich eine einfache Nachricht verwenden wie die in einer der Aufgaben dieses Kapitels erstellte. Besser ist es, den Anwender mit einem kleinen interaktiven Inhalt (mit einer sehr kleinen Dateigröße) zu beschäftigen.

Workshop

Bringen Sie ihn dazu, etwas Interessantes (aber Kleines) zu betrachten, während er auf das Laden des Hauptteils des Films wartet. Es gibt viele Möglichkeiten, dies erfolgreich durchzuführen. Erwägen Sie schließlich auch, den Film in einzelnen Teilen zu laden (wie in Kapitel 18 behandelt). So müssen die Anwender nur auf das Laden des Teils Ihrer Site warten, den Sie wünschen. F

Ich habe MODIFIZIEREN / OPTIMIEREN verwendet und die Dateigröße hat sich auch verringert, allerdings sieht mein Bild nicht besonders gut aus. Was soll ich tun? A

Es liegt auf der Hand, dass Sie MODIFIZIEREN / OPTIMIEREN nicht verwenden sollten, wenn es zu unbefriedigenden Ergebnissen führt. Im Grunde sollten Sie diese Option in jedem Einzelfall ausprobieren und die Einsparungen der Dateigröße gegen die Einbußen der Bildqualität abwägen. Ein unerwünschtes Ergebnis ist häufig nicht so schlecht, wie es den Anschein hat. Bedenken Sie, dass die betreffende Grafik im fertigen Film vielleicht nur für den Bruchteil einer Sekunde auf dem Bildschirm zu sehen sein wird. Die schlechte Qualität würde in diesem Fall nichts ausmachen.

Übungsaufgaben 1. Wie schnell wird eine Datei geladen, die Sie auf die Hälfte ihrer ursprünglichen Größe reduzieren? a. Das kann man unmöglich vorhersagen, weil die Verbindungsgeschwindigkeit jedes Anwenders anders ist. b. Doppelt so schnell wie die ursprüngliche Datei c. Das kann man unmöglich vorhersagen, weil man die Ausmaße des Films kennen muss (Höhe und Breite). 2. Warum sollten unnötige Spezialeffekte vermieden werden? a. Sie können den Anwender vom eigentlichen Inhalt ablenken. b. Sie können die Leistung verringern und die Ladezeiten verlängern. c. Alle Antworten sind richtig. 3. Der Bandbreiten-Profiler kann simulieren, wie ein Film auf einem langsamen Computer ablaufen wird. a. Richtig, stellen Sie nur die Geschwindigkeit im Menü FEHLERSUCHE ein. b. Falsch, der Bandbreiten-Profiler hilft nur dabei, die Größe eines Films zu beurteilen und wie schnell er geladen wird. c. Richtig, aber Sie müssen COMPUTER aufrufen.

SIMULIEREN

aus dem Menü ANSICHT

417

Animationstechniken für Fortgeschrittene

1 2

Animationstechniken für Fortgeschrittene

Im Rahmen der Kapitel dieses Buches haben Sie bisher alle in Flash eingebauten Animations-Tools kennen gelernt. Schlüsselbilder, Bewegungsabläufe, Masken und vieles mehr sollten Ihnen mittlerweile ein Begriff und ein wenig in Fleisch und Blut übergegangen sein. Was gibt es also noch zu lernen? Einen ganz wichtigen Aspekt der Animationstechniken – das Erstellen effektiv ablaufender Animationen. In diesem Kapitel werden Sie einige fortgeschrittene Animationstechniken kennen lernen, die Ihre Animationen wesentlich effektiver und professioneller ausschauen lassen und zudem die Erstellung der Animationen minimieren (dies ist jedoch nicht der wichtigste Punkt im Umgang mit den erweiterten Animationstechniken). Vieles, was Sie auf den nächsten Seiten erfahren, sind bei weitem keine neuen Animationsmethoden, sondern Anwendungen, die traditionellen Animationstechniken entlehnt wurden und die konventionelle Animationsersteller seit Jahren erfolgreich benutzen. In diesem Kapitel werden Sie Folgendes durchführen bzw. erarbeiten: 쐽

sie Erstellung einer Animation ohne Zuhilfenahme der Tween-Funktionen von Flash 5,

쐽

die Anwendung traditioneller Animationstechniken wie beispielsweise Antizipation (Voraussicht, Erwartung) und Overkill (das Ende einer Animation),

쐽

die Simulation von Tiefe und Perspektive.

Es gibt prinzipiell zwei Wege und Betrachtungsweisen, denen Flash-Anwender folgen können – die Programmierung oder die Animation. Viele Menschen sehen in dem Programmierer eher den Techniker und im Animator den Künstler. Dies ist ein Fehler bzw. ein Missverständnis, da Programmieren eine sehr kreative Tätigkeit und die visualisierte Kommunikation (Animation) eine sehr technische Angelegenheit sein kann. Eine Spezialisierung im Voraus auf eines der beiden Gebiete ist eigentlich nicht notwendig, da FlashAnwender sehr schnell erkennen werden, zu welcher Gattung sie gehören und welchem Naturell sie eher zugetan sind.

21.1 Es zählt nur das Resultat, nicht die Technologie Sicherlich haben Sie schon mal einen Zauberer im TV oder sogar live auf der Bühne gesehen, wie er seinen Assistenten in zwei Hälften zersägt und niemand dabei auch nur ansatzweise verletzt wird. Der Zauberer kreiert dabei eine Illusion, die Sie an das Resultat (in diesem Fall einen halbierten Assistenten) glauben lässt. Ähnlich verhält es sich bei einer Animation – hier bewegt sich eigentlich gar nichts. Sie sehen lediglich eine Reihe unterschiedlicher Bilder schnell hintereinander abgespielt, die bei Ihnen den Eindruck eines fließenden Bewegungsablaufes entstehen lassen. Zusätzlich zu den in Kapitel 6 beschriebenen Animationsgrundlagen kann ein Animationstechniker (übrigens nicht ganz unähnlich zum Zauberer) Tricks verwenden, um den Anwender zu täuschen und ihn glauben zu machen, Dinge zu erleben, die eigentlich gar nicht existieren.

420

Es zählt nur das Resultat, nicht die Technologie

Um jemanden beispielsweise glauben zu machen, dass sich ein Ball über den Bildschirm bewegt, ist es nicht notwendig, diesen auch wirklich über den Bildschirm bewegen zu lassen. Denkt der Anwender, dass sich der Ball über den Bildschirm bewegt, ist es egal, ob der dies auch wirklich tut. Jetzt sind Sie eigentlich schon mittendrin in den Tricks, mit denen Sie Ihre Animationen erweitern können. Behalten Sie dabei immer im Hinterkopf, dass die Techniken bei weitem nicht so wichtig sind wie die Resultate, die Sie erreichen wollen.

Einfache Techniken – sparsam angewandt Ein Trick, dem Sie des öfteren in der Fernsehwerbung begegnen, ist jener, den Bildschirm sehr schnellen Bildwechseln zu unterziehen, um die Aufmerksamkeit des Betrachters auf sich zu ziehen. Sehr oft begegnet dem geneigten Fernsehbetrachter auch ein schneller weißer Bildwechsel, was in etwa einem Stroboskop-Effekt entspricht. Dieser Trick, um Aufmerksamkeit zu erhaschen, funktioniert (wenn überhaupt) lediglich in TV-Umgebungen, da der Zuschauer oft geneigt ist, neben dem TV-Konsum noch anderen Tätigkeiten nachzugehen (lesen, schreiben, Wäsche waschen, sich unterhalten ...). Im Fall einer Website können Sie davon ausgehen, dass der Betrachter mit wesentlich mehr Aufmerksamkeit bei der Sache ist, da er ja für genau diesen Zweck zum Computer gelaufen ist, ihn angeschaltet hat, sich ins Internet eingewählt hat ... – er ist quasi freiwillig auf Du und Du mit der Website. Aus diesem Grund sollten Sie diese Blink-Effekte nur sparsam einsetzen, da die Aufmerksamkeit des Internetbesuchers sowieso schon da ist. Wollen Sie dennoch die Aufmerksamkeit des Betrachters verstärkt auf sich ziehen, können Sie einen modifizierten blinkenden Bildschirm zur Anwendung bringen. Definieren Sie dabei einfach einen kleinen Bereich Ihres Screens oder eine Schaltfläche, die dem Anwender entgegenblinkt. So ist vorstellbar, dass etwas anfängt zu blinken, wenn der Anwender mit seinem Mauszeiger darüber hinwegfährt. Sie ziehen somit die Aufmerksamkeit auf dieses entsprechende Objekt. Technisch gesehen ist dies nichts anderes als ein alternierender Bildwechsel zwischen einem ausgefüllten und einem leeren Keyframe (Schlüsselbild). Sie haben dazu bereits einiges in Kapitel 7 kennen gelernt. Es gibt jedoch noch mehr einfache Techniken zu entdecken. So ist etwa denkbar, im ersten Bild Ihres Flash-Films die entsprechenden Symbole zu ihrer letztendlichen Position auf dem Bildschirm »wandern« zu lassen, statt direkt mit der fertigen Oberfläche zu beginnen. Wenn Sie eine Oberfläche mit beispielsweise sechs Schaltflächen haben, könnte jede einzelne separat erscheinen und zu ihrer finalen Position gleiten. Beachten Sie jedoch dabei, diesen Effekt nur einmal zu bringen, da es ansonsten zu einer ziemlich zeitaufwändigen und Nerven aufreibenden Sache mutieren kann und der Anwender letztendlich genervt eine andere Seite im Internet besucht.

421

Animationstechniken für Fortgeschrittene

Diese Techniken – das Blinken und der sukzessive Aufbau der Oberfläche – sind Wege, um potenzielle Probleme zu beseitigen.

Wege, den Anwender zu täuschen Im Gegensatz zur Magie und Zauberei, wo der Schlüssel zum Erfolg in der Kunst der Verwirrung, Geschwindigkeit und vermeintlichen Überwindung physikalischer Gesetzmäßigkeiten besteht, braucht die Animation diese physikalischen Grenzen nicht mithilfe von Illusionen zu überwinden. Die Aufgabe der Animation besteht lediglich darin, Bewegung zu zeigen, wo eigentlich keine ist. Dies lässt Dinge sehr oft natürlich aussehen und zieht die Aufmerksamkeit des Betrachters auf die Flash-Anwendung. In Flash einen Hasen aus dem Hut zu zaubern ist kein Problem, viel schwieriger hingegen ist es, dem Hasen auch Leben einzuhauchen und ihn zu animieren. Es gibt drei große Ziele im Bereich der Animation: das Vortäuschen von Bewegung, eine natürliche Erscheinungsweise und das Ausnutzen der Erwartungshaltung des Anwenders. In diesem Kapitel werden wir alle drei Aspekte der Animation kennen lernen. Es gibt verschiedene Möglichkeiten, um Bewegung vorzutäuschen. Ein wesentlicher Bestandteil eines flüssigen Bewegungsablaufes besteht in der Tatsache, dass wir als Menschen schnelle Bewegungen als unscharf wahrnehmen. Unschärfe einer Bewegung setzen wir mit einer flüssigen Bewegung gleich. Ein kleines Beispiel dazu: wenn Sie eine Linie entgegengesetzt zur Bewegungsrichtung eines Objektes zeichnen, entsteht sofort der Eindruck von Bewegung – ähnlich den Kondensstreifen, die Düsenflugzeuge am Himmel abbilden. Sehen wir diese Streifen, denken wir sofort, dass sich das Flugzeug bewegt. Es gibt verschiedene Möglichkeiten, Unschärfe zu erzeugen. Sehr gut dazu zu gebrauchen sind die in Flash integrierten Features MODIFIZIEREN oder SHAPE zu den entsprechenden Objekten. Behalten Sie im Hinterkopf, dass eine unscharfe Version eines bewegten Bildes nur dann gezeigt werden soll, wenn es in Bewegung ist. Den Dingen einen natürlichen Ausdruck zu verleihen, ist vielleicht die größte Herausforderung der Animation. Es ist nicht sehr einfach, eine Figur gehend zu machen und dies auch noch so natürlich wie in der Wirklichkeit. Dies liegt vor allem in der Tatsache begründet, dass der Betrachter ja aus eigener Erfahrung und dem täglichen Leben weiß, wie so etwas auszusehen hat. Leider gibt es in Flash keine Schaltfläche, die auf Knopfdruck einem Objekt einen natürlichen Bewegungsablauf beschert. Es gibt jedoch Möglichkeiten ein Objekt natürlich zu animieren. Dazu ist es notwendig, das Objekt in der realen Welt eingehend in seinem Bewegungsablauf zu studieren. Betrachten Sie ganz genau Menschen, wie sie sich bewegen. Schauen Sie dabei nicht nur auf Beine und Füße, sondern sehen Sie die Menschen als Ganzes in ihrem kompletten Bewegungsablauf. Es gibt einen guten Trick, um Animationen natürlich aussehen zu lassen: Fügen Sie Elemente in Ihre Animation ein, die als störend empfunden werden bzw. die Fehler simulieren, wie dies etwa aus Filmen bekannt ist. So werden oft Nebel und Kratzer absichtlich

422

Das Anwenden herkömmlicher Techniken

oder auch unabsichtlich in einen Film eingefügt, um eine Animation wie einen richtigen Film aussehen zu lassen. Eine weitere Möglichkeit besteht darin, einen Film flackern zu lassen, so dass er ausschaut wie ein Film, der schon längere Zeit im Archiv zugebracht hat. Sie erreichen dies mit einem so genannten Zwei-Bild-Prinzip. Erstellen Sie dabei ein Bild mit einem großen Grauanteil und dahinter ein zweites leeres Bild. Setzen Sie beide Bilder hintereinander in eine Schleife und Sie erleben ein Flackern wie aus einem S/W-Spielfilm anno 1936. Die Erwartungshaltung des Anwenders können Sie in zwei Wegen für sich nutzen. Lassen Sie ihn denken, er sieht, was er zu sehen erwartet. Es ist jedoch dabei nicht notwendig, dies auch wirklich zu sehen. Ein Beispiel dazu: Sieht der Betrachter eine Bowling-Kugel sich auf die Kegel zubewegen, hört er irgendwann das Geräusch des Crashs, auch wenn die Kegel sich schon außerhalb des Bildes beim Betrachter befinden. Es ist gar nicht notwendig, jeden einzelnen Kegel so zu animieren, wie er fällt. Allein das Geräusch und die Erwartungshaltung des Anwenders genügen, um die Situation zu Ende zu denken.

21.2 Das Anwenden herkömmlicher Techniken Die Informationen in diesem Bereich des Buches beziehen sich auf traditionelle Animationstechniken, die mit Flash eigentlich gar nichts zu tun haben, aber dennoch in Flash hervorragend angewandt werden können. Für jede Technik werden Sie ein entsprechendes Beispiel bzw. eine Übung vorfinden.

Aufmerksamkeit und Spannungsaufbau (Antizipation) Die Blinktechnik, welche auf den vorangegangenen Seiten bereits besprochen wurde, soll die Aufmerksamkeit des Betrachters auf einen bestimmten Bereich des Bildschirms oder den dargestellten Sachverhalt ziehen. Es gibt natürlich auch noch andere Möglichkeiten, die Aufmerksamkeit des Anwenders auf bestimmte Inhalte zu ziehen. Dazu ein kleines Beispiel: Stellen Sie sich ein Auto (ohne Automatik) vor, das an einer Steigung anhält und beim erneuten Anfahren ein Stück rückwärts rollt – Bergstart mit manueller Schaltung ist für viele Menschen ein Albtraum. Wir können diesen Rückroll-Effekt in unserer Animation akzentuieren, um ein wenig Dramatik und Aufmerksamkeit zu erhaschen. Der Anwender soll etwas erwarten, wenn das Auto immer mehr zurückrollt.

423

Animationstechniken für Fortgeschrittene

Aufgabe: Benutzen Sie Aufmerksamkeit, um die Animation zu bereichern! In dieser Aufgabe fügen wir einen kleinen Touch Aufmerksamkeit hinzu, um ein effektiveres Resultat zu erhalten. Ein Kreis soll am unteren Bildschirmrand gequetscht werden (unter Druck setzen wie eine Gummikugel), so dass dieser nach dem Loslassen zum oberen Bildschirmrand springt. 1. Zeichnen Sie einen Kreis am unteren Rand der Arbeitsfläche und benennen Sie den Kreis mittels der SYMBOLEIGENSCHAFTEN bzw. IN SYMBOL KONVERTIEREN ((F8)). Benennen Sie das Objekt Kreis. 2. Fügen Sie bei Bild 10 (der Kreis soll die ersten zehn Bilder an der definierten Position ausharren) ein neues Schlüsselbild ein. Fügen Sie dann erneut ein neues Schlüsselbild bei 15 und ein weiteres bei 25 ein. Wir werden den Kreis zwischen Bild 10 und 15 zusammendrücken und ihn anschließend aufwärts bewegen (Bild 25) 3. Gehen Sie nun zu Bild 25, halten Sie die (ª)-Taste gedrückt und bewegen Sie den Kreis zum oberen Ende Ihres Arbeitsbereiches.

Abbildung 21.1: Wenn Sie den Kreis verformen (quetschen), benutzen Sie dabei bitte vertikale und horizontale Verformungsmöglichkeiten.

424

Das Anwenden herkömmlicher Techniken

4. Benutzen Sie bei Bild 15 das Skalierungs-Werkzeug, um den Kreis vertikal zu komprimieren (Abbildung 21.1). 5. Da wir den Kreis nach unten quetschen wollen, müssen Sie das Skalierungs-Werkzeug nach unten verschieben. Standardmäßig positioniert sich das Skalierungs-Werkzeug in der Mitte des entsprechenden Objektes. Siehe dazu auch Abbildung 21.1.

Abbildung 21.2: Nachdem Sie den Kreis gequetscht haben, stellen Sie bitte sicher, dass dieser die Position nicht mehr verändert.

6. Nun ist es an der Zeit, ein Bewegungstween für Bild 10 (das Quetschen des Kreises) und Bild 15 (der Kreis springt zum oberen Bildschirmrand) zu erstellen. 7. Testen Sie Ihren kleinen Film. Er sollte ganz gut ausschauen, aber es gibt etwas, was fehlt und die ganze Szenerie etwas glaubwürdiger gestalten könnte. Während der Kreis sich zum oberen Bereich bewegt, stellt er seine ursprüngliche Form wieder her – dazu benötigt er die Zeit von zehn Bildern. Viel besser wäre es, wenn er in seine normale Gestalt unmittelbar nach dem Start zurückkehren könnte.

425

Animationstechniken für Fortgeschrittene

8. Gehen Sie zu Bild 16 und fügen Sie an dieser Stelle einen Keyframe (Schlüsselbild (F6)) ein. Hier macht es sich positiv bemerkbar, dass wir bereits einen Bewegungstween für Bild 15 haben, da der neue Keyframe dann schon die richtige Position hat. Wählen Sie den Kreis in Bild 16 und aus dem Menü MODIFIZIEREN / TRANSFORMIEREN den Eintrag TRANSFORMATION ENTFERNEN aus. Sie sehen, der Kreis erhält augenblicklich seine alte, ungestauchte Form wieder zurück. 9. Testen Sie Ihren Flash-Film. Speichern Sie diesen Film ab, da wir ihn gleich wieder benötigen, um der Endsequenz mehr Leben zu verleihen. Die Technik des Spannungsaufbaus können Sie nach Herzenslust benutzen und mit mehreren Bildern zusätzlich ausbauen.

Overkill – das Ende einer Animation Während der Spannungsaufbau (anticipation) vor dem Abspielen der Animation zum Tragen kommt, bezieht sich Overkill auf das Ende einer Animation. Dazu ein kleiner Vergleich: Befinden Sie sich in einem Auto, das zum Stehen kommt, haben Sie nach dem Stillstand das Gefühl, sich für einen Moment rückwärts zu bewegen. Sie bewegen sich natürlich nicht zurück, Sie haben aber dieses Gefühl erwartet, also spüren Sie es auch. Diesen Effekt können Sie auch Ihren Animationen hinzufügen, um sie realitätsnäher zu gestalten.

Aufgabe: Benutzen Sie den Overkill-Effekt, um die Animation zu bereichern! In dieser kleinen Arbeitsaufgabe werden wir den Effekt des Overkills dem Projekt aus dem letzten Beispiel hinzufügen. 1. Öffnen Sie das im vorangegangenen Workshop erstellte Projekt des gequetschten Kreises. Wenn Sie es nicht mehr haben, erstellen Sie bitte einen einfachen Bewegungstween einer Instanz mit der Bezeichnung KREIS, der sich vom unteren Rand des Arbeitsbereiches bis zum oberen Rand des Bildschirms erstreckt. Das letzte Bild ist Bild 25. 2. Fügen Sie Schlüsselbilder bei den Bildern 26, 27, 28 und 29 ein. (Klicken Sie in Bild 26 und betätigen Sie dann die Taste (F6) dreimal hintereinander.) 3. Diese zusätzlichen Bilder beinhalten ein Bild, in dem der Kreis über das Ziel hinausschießt und einer Deformation unterzogen wird. Ein weiteres Bild sorgt dafür, dass das Bild zurückgeworfen wird und sich langsamer zum letzten Bild hinbewegt. Das letzte Bild sorgt schließlich dafür, dass der Ball seine Endposition erreicht. 4. Unterziehen Sie den Kreis in Bild 26 einem vertikalen Stretchvorgang, so dass dieser extra schmal dargestellt wird (Abbildung 21.3).

426

Das Anwenden herkömmlicher Techniken

Abbildung 21.3: Der Kreis wird einem Stretchvorgang unterzogen.

5. Bewegen Sie in Bild 27 den Kreis ein paar Bildpunkte nach unten. 6. Testen Sie den Film. Es ist wirklich erstaunlich, wie ein Quäntchen Overkill eine Animation wesentlich realistischer ausschauen lässt.

Abbildung 21.4: Der Bewegungsablauf des Kreises

427

Animationstechniken für Fortgeschrittene

Es ist wirklich eine feine Sache, den Betrachter mit einfachen Mitteln ein wenig zu täuschen. Der Kreis bewegt sich – und zwar komplett ohne Tweens. Bild 1 beinhaltet einen Kreis am unteren Ende der Bühne. Bild 10 beinhaltet ein Schlüsselbild, in dem der Kreis gequetscht wurde. Weiter geht’s mit Bild 11, hier animiert der Kreis auf halbem Weg zum oberen Bereich der Bühne wieder in seine ursprüngliche Gestalt zurück. Bei Bild 13 wird der Kreis gestaucht und passiert seine Zielposition, um in Bild 14 sein normales rundes Aussehen wiederzuerlangen. Bild 15 beendet die ganze Sache – der Kreis hat seine normale Form und Zielposition erreicht – und das alles ohne Tweens.

Die Simulation von Tiefe Obwohl Flash nur zweidimensional arbeitet, können Sie dem Anwender trotzdem einen Eindruck von räumlicher Tiefe vermitteln. Es gibt dazu verschiedene Möglichkeiten, um diesen Effekt zu erreichen. Ein paar werden wir uns einmal genauer ansehen. Der Hauptweg, um Tiefe zu erzeugen, beruht auf dem Aspekt der Perspektive. Gestalten Sie Objekte einfach kleiner, wenn diese weiter weg erscheinen sollen.

Aufgabe: Fügen Sie Perspektive zu einer einfachen Animation hinzu! In dieser Aufgabe werden wir lediglich zwei Linien der Bühne hinzufügen, um die Perspektive zu betonen. 1. Zeichnen Sie einmal ein Auto und konvertieren Sie es anschließend zu einer Filmsequenz. Im Schlüsselbild 1 platzieren Sie das Auto bitte am unteren linken Rand Ihrer Flash-Bühne. 2. Skalieren Sie das Auto größer in Bild 1 und schmaler in Bild 40. 3. Probieren Sie den Film aus. Er schaut nicht besonders gut aus. Fügen Sie nun eine neue Ebene hinzu und zeichnen Sie zwei zusammenlaufende Linien, die eine Straßenbegrenzung symbolisieren sollen. Die Animation sieht jetzt schon viel besser aus (siehe Abbildung 21.5). 4. Um den Eindruck der Überwindung großer Entfernungen zu verstärken, können zusätzlich Berge oder Wolken auf der Straßen-Ebene hinzugefügt werden. Zeichnen Sie eine Horizontlinie am oberen Rand der Flash-Bühne sowie einige Berge am Horizont. 5. Ohne eine Referenz hat der Berg jedoch kaum Perspektive. Zeichnen Sie einen zweiten Berg (unter dem Horizont) und machen Sie diesen ein wenig größer. Erstellen Sie danach einen wesentlich größeren Berg, der die Straße auf der rechten Seite teilweise blockiert. Indem Sie den nah erscheinenden Berg in Weiß ausfüllen, erscheint das Ergebnis noch ein Stück realistischer.

428

Das Anwenden herkömmlicher Techniken

Abbildung 21.5: Das Hinzufügen von Linien unterstützt in diesem Beispiel die räumliche Darstellung.

Abbildung 21.6: Eine Horizontlinie sowie ein kleiner Berg machen die Tiefe noch realistischer.

Stellen Sie sich nur vor, wie viel realistischer die ganze Situation erscheinen würde, wenn professionelle realistisch ausschauende Grafiken zum Einsatz kämen. Wir haben in unserem Beispiel nur einfache Grafiken benutzt, um einen Eindruck von Tiefe herzustellen. Die Straßenbegrenzungen und der Horizont dienen lediglich der Beschreibung der Szenerie, in welcher das Auto reist. Wir fügten Berge hinzu, die in ihrer Größe variieren, um

429

Animationstechniken für Fortgeschrittene

einen Eindruck der Entfernung zu vermitteln, die das Auto überwinden muss. Ebenso verhält es sich mit dem großen Felsen, der die Straße blockiert. Hier entsteht ein Eindruck von Tiefe, da sich das Auto hinter dem Felsen befindet. Wir können noch wesentlich mehr Spuren legen, die den Eindruck vermitteln, dass sich das Auto fortbewegt. Nicht nur, dass das Auto kleiner wird, wenn es sich wegbewegt. Es wird auch langsamer! Je weiter es weg ist, desto langsamer erscheint es dem Betrachter – ein weiteres Indiz für räumliche Tiefe. Des Weiteren können Sie ebenfalls noch Schlaglöcher in die Straße zeichnen, die ebenfalls mit zunehmender Entfernung immer kleiner werden.

Abbildung 21.7: Die zusätzlichen Berge und deren farbliche Ausfüllung verstärken den Effekt von Räumlichkeit.

Lassen Sie uns ein weiteres Beispiel anschauen, wie man Tiefe simulieren kann. Diesmal werden wir in dem Auto sitzen.

Aufgabe: Simulieren Sie perspektivische Tiefe mit Größeneinstellungen, Ebenen und relativer Geschwindigkeit! Im Rahmen der folgenden Aufgabe werden wir in einem Auto reisen und die Illusion von räumlicher Tiefe auf verschiedenen Wegen erzeugen. 1. Zeichnen Sie ein vertikales Rechteck, das einen Holzpfosten symbolisieren soll. Konvertieren Sie es zu einem Symbol mit der Bezeichnung EIN BAUM, kopieren Sie es und erstellen Sie 15 Kopien. Ordnen Sie die Kopien gleichmäßig an, so dass Sie zweimal so lang sind wie die Flash-Bühne. Wählen Sie alle Kopien aus und konvertieren Sie diese zu einer Filmsequenz (siehe Abbildung 21.8).

430

Das Anwenden herkömmlicher Techniken

Abbildung 21.8: Die Holzpfosten werden durch die Bühne laufen, so dass Sie viele Kopien des Ursprungsbaums benötigen, die weit über die Bühne hinausreichen.

2. Positionieren Sie die Holzpfosten so, dass der am weitesten links stehende Pfosten gerade noch die linke Seite der Bühne tangiert. Skalieren Sie die Bühne ein wenig größer. Kopieren Sie die Instanz und fügen Sie diese in eine neue Ebene ein. Positionieren Sie die Kopie am linken Rand der Bühne. Skalieren Sie die Version jedoch schmaler und stellen Sie sicher, dass sie etwas höher positioniert ist (siehe Abbildung 21.9). Dies werden die Pfosten für den Gartenzaun.

Abbildung 21.9: Die beiden Schichten für die Pfosten beinhalten die großen (nahe) und kleinere (in der Ferne) Bäume.

431

Animationstechniken für Fortgeschrittene

3. Zeichnen Sie in einer neuen Ebene ein sehr langes Rechteck (als Gartenzaun). Konvertieren Sie es zu einem Symbol mit der Bezeichnung Gartenzaun und kopieren Sie es in die neue Ebene. Skalieren Sie die Instanz in der zweiten Ebene proportional zu den Pfosten in der Ebene. Positionieren Sie die zwei Instanzen des Gartenzaunes in den richtigen Ebenen – die schmale ist oben und die große Instanz ist unten (großer Gartenzaun). Werfen Sie einen Blick auf Abbildung 21.10, um zu sehen, wie die Komposition auszusehen hat.

Abbildung 21.10: Bewegen Sie die kleinen Pfosten nicht so weit wie die großen.

4. Fügen Sie Bilder für alle Ebenen ab Bild 60 ein (klicken Sie in Bild 60 und betätigen Sie (F5)). In die beiden Ebenen mit Pfosten müssen Sie nun ein Schlüsselbild bei Bild 60 anlegen (klicken Sie auf Bild 60 und anschließend (F6)). Im Bild 60 der Ebene mit den großen Pfosten halten Sie die (ª)-Taste gedrückt, während Sie mit der Maus die Pfosten den ganzen Weg nach links bewegen. Für die Ebene mit den kleinen Pfosten verfahren Sie analog dazu (siehe Abbildung 21.10). 5. Setzen Sie ein Bewegungstween in Bild 1 beider Pfosten-Layer. Der Gartenzaun als Ganzes braucht nicht bewegt zu werden, da die Animation der Pfosten genügt, um einen Bewegungseindruck hervorzurufen. Erstellen Sie nun eine weitere Ebene für das Auto. Zeichnen Sie ein Auto und konvertieren Sie es zu einer Filmsequenz. Wenn Sie Lust haben, können Sie eine Version erstellen, bei der die Räder des Autos rotieren. Wenn nicht, ist es auch nicht schlimm, da der Bewegungseindruck auch so entstehen wird. Das Auto benötigt keinerlei Tween, da ja die Pfos-

432

Das Anwenden herkömmlicher Techniken

ten des Gartenzauns animiert werden. Das Auto wird immer an derselben Position erscheinen. Dies ist aber durchaus in Ordnung, da sich die Pfosten des Gartenzauns ja bewegen und somit eine rauschende Autofahrt simuliert wird. Testen Sie den Film. Sie können auch hier noch Berge und andere Elemente am Horizont positionieren, um einen räumlichen Eindruck der Perspektive hervorzurufen.

Kontrolle der perspektivischen Ansichten Die beiden Aufgaben, welche wir gerade hinter uns gebracht haben, hatten unterschiedliche perspektivische Gesichtspunkte zur Grundlage. In der ersten Aufgabe änderte sich die Perspektive nicht – wir sahen lediglich, wie sich das Auto bewegte. Im zweiten Beispiel änderte sich unser Gesichtspunkt mit der Autofahrt – Der Vorder- und Hintergrund bewegte sich ebenfalls. Dazu ein Vergleich: War im ersten Beispiel die Kamera noch fest montiert, so war sie im zweiten Beispiel in einem Helikopter untergebracht, der mit derselben Geschwindigkeit reiste wie unser Auto. Wenn Sie sich einen Film oder Animationen anschauen, werden Sie sich nur selten fragen, wo die Kamera ist – aber genau diese Frage ist häufig sehr wichtig. Ist die Kamera starken Erschütterungen unterworfen, erleben Sie einen anderen Eindruck, als wenn sich die Kamera mit der gleichen Geschwindigkeit, jedoch sehr ruhig, bewegt. Im Bereich der Animationen sind wir keinerlei physikalischen Grenzen ausgesetzt, was den Standpunkt der Kamera betrifft, ganz im Gegensatz zu einem Filmregisseur in der realen Welt. Lassen Sie uns dazu eine kleine Übung durchführen, um festzustellen, wie sich der Kamerastandpunkt auf eine Animation auswirkt.

Aufgabe: Kontrollieren Sie den perspektivischen Standort! 1. Erstellen Sie eine neue Datei. Wählen Sie anschließend aus dem Menü FENSTER / ALLGEMEINE BIBLIOTHEKEN / FILMSEQUENZEN das Symbol Doppeldecker per Drag auf Ihre Bühne. 2. Fügen Sie Schlüsselbilder (über (F6)) bei den Bildern 50 und 60 ein. Halten Sie in Bild 60 die Taste (ª) gedrückt, während Sie per Drag die Instanz des Doppeldeckers bis zum rechten Ende des Bildschirms bewegen. Setzen Sie ein Bewegungstween in das Schlüsselbild bei Bild 50. 3. Testen Sie den Film und Sie können sich ungefähr vorstellen, dass Sie den Doppeldecker von einem anderen Flugzeug aus gefilmt haben. Bei Bild 50 stoppt Ihr Flugzeug.

433

Animationstechniken für Fortgeschrittene

4. Fügen Sie nun eine neue Ebene ein (Bezeichnung Hintergrund) und verkleinern Sie diese auf 25 Prozent. Zeichnen Sie in dieser neuen Ebene eine gezackte Linie mit dem Freihand-Werkzeug und zwar weit über den Bereich der Bühne hinaus (siehe Abbildung 21.11). Wählen Sie die Linie aus, konvertieren Sie diese zu einem Symbol und benennen Sie es Berge. Positionieren Sie die Berge in der Ebene Hintergrund so weit links, dass sie gerade noch den linken Rand der Bühne berühren.

Abbildung 21.11: Zeichnen Sie einen Horizont voller Berge und nachdem Sie ein Bewegungstween erstellt haben, sieht es aus, als würde das Flugzeug fliegen.

5. Fügen Sie ein Schlüsselbild bei Bild 50 in die Ebene Hintergrund ein. Bewegen Sie die Instanz der Berge in Bild 50 den ganzen Weg von der linken zur rechten Seite, so dass Sie auf der rechten Seite gerade noch die Bühne berühren. In Bild 1 der Hintergund-Ebene setzen Sie bitte einen Bewegungstween. 6. Testen Sie den Film. Der Punkt der perspektivischen Darstellung ist ein wichtiges Instrument überall da, wo Animationen eine Tiefe bekommen sollen. Dies lernen Sie leider nicht von heute auf morgen. Schauen Sie sich Filme an, und fragen Sie sich immer wieder, wo denn eigentlich die Kamera steht. Einige wirklich gute Beispiele finden Sie unter http://www.bulbo.com.

Behalten Sie immer das Ende im Auge Viele erfolgreiche Menschen, die sich mit Animationen beschäftigen, haben von Anfang an immer das Ende der Animation im Auge. Dieses dürfen auch Sie nie aus dem Auge verlieren. Ein Beispiel dazu: Wenn Sie einen Zoom auf der Flash-Bühne erstellen, machen

434

Zusammenfassung

Sie bitte das End-Schlüsselbild zuerst, da am Endpunkt Ihres Flash-Filmes alles so skaliert ist, wie es auch sein soll. Gehen Sie dann Schritt für Schritt zurück, bis Sie beim ersten Schlüsselbild angelangen.

21.3 Zusammenfassung Im Rahmen dieses Kapitels haben Sie erfahren, wie Sie mittels weniger Handgriffe bzw. Tricks eine einfache Animation so bereichern, dass diese wesentlich ansehnlicher und realitätsnäher wird. Natürlich schauen unsere Beispiele nicht besonders professionell oder realitätsnah aus, aber der prinzipielle Weg hin zu diesen großen Zielen ist immer der gleiche. Mittels weniger professioneller Grafiken und Zeichnungen können aus den einfachen Beispielen schlagartig gute Animationen werden.

21.4 Workshop F&A F

Ich will einen Effekt erstellen, bei dem die Bühne sehr stark herangezoomt wird, um anschließend in eine andere Szene zu wechseln. Wie kann ich diesen Zoomvorgang initiieren? A

F

Benutzen Sie das Zoom-Werkzeug, können Sie lediglich die Bühne auf die Größe des Arbeitsbereiches zoomen. Was Sie benötigen, ist ein Tween, um alles auf Ihrer Bühne zu skalieren. Dies könnte relativ schwierig werden, insbesondere dann, wenn Sie über mehrere Ebenen verfügen. Sie können das Problem auf mehreren Wegen lösen. Wenn Sie alles innerhalb einer Filmsequenz erstellen, können Sie später diese Filmsequenz als Instanz ohne Probleme nach Ihren Vorstellungen skalieren. Haben Sie alles in der Hauptzeitlinie erstellt, können Sie einen so genannten Snapshot des letzten Bildes machen und ihn überall dorthin kopieren, wo er benötigt wird. Fügen Sie ein leeres Schlüsselbild in eine neue Ebene ein und betätigen Sie dann den Menüeintrag AN POSITION EINFÜGEN.

Gibt es gute Ressourcen mit weiterführenden Informationen zum Thema Animationen in Flash? A

Sie haben jetzt eigentlich alles, was Sie brauchen, zum Thema Animationen in Flash.

435

Animationstechniken für Fortgeschrittene

Übungsaufgaben 1. Als wir den Kreis stauchten, benutzten wir eine vertikale Skalierung, warum benutzen wir ebenfalls die horizontale Stauchung? a. Sie können ein Symbol nicht nur in eine Richtung skalieren. b. Wir taten es, weil es einfach gut aussah. c. Im wirklichen Leben verursacht die Komprimierung eines Balls in eine Richtung ebenfalls die Verformung in die andere Richtung – das Volumen des Balles wird sich dabei jedoch nie ändern. 2. Warum fügten wir der Bewegung des Kreises ein Zurückprallen hinzu? a. Wir dachten, das sieht einfach nicht schlecht aus. b. Bälle in der realen Welt zeigen dieses Verhalten. c. Wir wollten, dass sich der Ball nach den Vorstellungen des Anwenders verhält. 3. Ist es unredlich, mehrere Schlüsselbilder an Stelle eines langen Tweens zu benutzen? a. Ja, da nicht der korrekte physikalische Bewegungsablauf dargestellt wurde. b. Vielleicht, aber da der Effekt und das Endergebnis überzeugte, ist durchaus OK. c. Nein, da es in der realen Welt auch nur zwei Schlüsselpunkte gibt – den Anfang und das Ende.

436

Die Arbeit an großen Projekten und in Teamumgebungen

h n A

A g an

Die Arbeit an großen Projekten und in Teamumgebungen

Bisher haben Sie alles ohne weitere Unterstützung durch Dritte geschafft. Sie allein haben dieses Buch Kapitel für Kapitel durchgearbeitet. Natürlich ist es möglich, eine Flash-Site als »Einzelkämpfer« im stillen Kämmerlein zu programmieren – ein Team aus Spezialisten kann unter Umständen jedoch mehr erreichen. Besonders Unternehmen profitieren vom Team-Gedanken und der Bündelung verschiedener Fähigkeiten in diesen Teams. So ist es durchaus denkbar, dass sich eine Person speziell um die Thematik Audio kümmert, eine andere ist verantwortlich für das Design und die Grafiken und eine weitere Person zeichnet für die Programmierung verantwortlich. Die Verantwortlichkeiten können auch noch weiter untergliedert und verteilt werden. Der Vorteil an dieser Stelle: Sie erreichen nicht nur bessere Endprodukte, sondern Ihr »Output« wird sich vermehren – Sie, als Team, werden wesentlich produktiver als eine einzelne Person. Trotz eines Teams bleibt die Arbeit in einem Projekt kein Kinderspiel. Es gibt unzählige Gelegenheiten für Konflikte und zusätzliche Arbeit. Im Team jedoch lassen sich Probleme meist besser und effizienter lösen. In diesem Kapitel lernen Sie verschiedene Wege kennen, um in einer Teamumgebung zu arbeiten und wie Sie Flash in Teamumgebungen nutzen können. Genauer gesagt: 쐽

traditionelle Produktionskonzepte,

쐽

das Erstellen und Benutzen gemeinschaftlicher Bibliotheken,

쐽

das Benutzen von Smart Clips als Templates,

쐽

das Entwickeln von Namenskonventionen und anderen die Produktion steigernden Methoden

A.1

Methoden

Viele Menschen arbeiten seit vielen Jahren sehr erfolgreich in kreativen Teamumgebungen. Sie als potentieller Flash-Benutzer können von diesen traditionellen Produktionsmethoden eine ganze Menge lernen. Obwohl die Filmindustrie eine völlig eigene Welt ist, hat sie eine ganze Menge gemein mit Flash. Im Folgenden lernen Sie einige einfache Konzepte kennen und wie diese auf Flash angewandt werden können.

Definieren einer Rolle Es ist sehr wichtig, jemanden im Team zu haben, der klar für die gesamten Verantwortlichkeiten zuständig ist, Aufgaben verteilt und die Projektübersicht hat. Dieser Mensch soll nicht nur verhindern, dass zwei Mitarbeiter zum gleichen Zeitpunkt am gleichen Objekt arbeiten, er soll ebenfalls Probleme, die auftreten könnten, schon weit im Vorfeld erken-

438

Methoden

nen und entsprechende Gegenmaßnahmen einleiten. Die Verantwortlichkeiten sollen in der Hierarchie nach unten verteilt werden – auf so genannte Team- oder Projektleiter. Die Rollen können sich natürlich während des Projektes ändern. Es ist jedoch sehr wichtig, dass pro Teammitglied nicht mehr als eine Aufgabe zugewiesen wird. Viele Menschen denken, dass der Grund für die Zuweisung von Rollen und Verantwortlichkeiten vor allem darin liegt, zu sehen, welcher Mitarbeiter unter Stress aufgibt bzw. schwere Probleme hat. Dies mag vielleicht stimmen, der Vorteil liegt jedoch darin begründet, dass Schwachstellen bei Mitarbeitern erkannt werden und alle Teammitglieder an der Lösung des entsprechenden Problems mitarbeiten können.

Das Testen der Rollen und Strukturen Nachdem Sie Rollen definiert und den Mitarbeitern zugewiesen haben, sollten Sie überprüfen, ob die erstellte Teamstruktur und alle Aspekte des Systems auch funktionieren. Sendet beispielsweise eine Person eine Sprachaufnahme zum Mitarbeiter des Bereichs der Animationen, sollte sofort ein Test durchgeführt werden, ob die Aufnahme auch den Anforderungen entspricht. Ist dies nicht der Fall, muss eventuell der Toningenieur zu Rate gezogen werden, damit er die Aufnahme einer Nachbearbeitung unterzieht. Ist der Toningenieur in der Lage, die nachbearbeiteten Daten anschließend schnell und fehlerfrei per E-Mail an den Animator zu senden, und hat dieser in der Zwischenzeit daran gedacht, einen Platzhalter in die Website zu setzen? Es gibt viele Aspekte, die schief laufen und natürlich auch klappen können. Am besten ist es, Sie spielen vor dem ersten großen Projekt ein Testprojekt durch, in das alle Mitarbeiter und Abteilungen involviert sind, um Schwachstellen in der Kommunikation und Teamstruktur aufzudecken. Ein anderes Verfahren zum Aufdecken von Schwachstellen nennt sich »Full-PathReview«. Dabei nehmen Sie sich einen kleinen Teil eines Projektes vor und denken sich einmal, dass es sich um das Gesamtprojekt handelt. Anhand dieses kleinen, zum Großprojekt aufgeblasenen Teiles, werden nun die gesamten Teamstrukturen ausgetestet. Alle arbeiten an dem kleinen Teil, als würde es sich um das Gesamtprojekt handeln. Auf diese Weise werden Schwachstellen vor allem in der Kommunikation zwischen Teammitgliedern aufgedeckt.

Das Trennen von Programmiercode und Daten Ein eher technisches Konzept zur Teamarbeit in Produktionsumgebungen trägt die Bezeichnung »Code-Data-Separation«. Dabei achtet man strikt darauf, dass der Programmiercode (Script und Struktur) weitgehend von den Daten getrennt wird. Je weiter und tiefergehend die Trennung von Code und Daten voranschreitet, umso mehr Änderungen können vorgenommen werden, ohne dass diese ungewollte Auswirkungen auf Daten und

439

Die Arbeit an großen Projekten und in Teamumgebungen

Code haben. Das Entflechten des Codes einer Site trägt erheblich zur Übersichtlichkeit bei. Je besser strukturiert eine Site ist, desto besser können mehrere Mitarbeiter sich schnell zurechtfinden. Die folgende Aufgabe demonstriert ein Feature zum Thema Separation von Code und Daten.

Aufgabe: Benutzen Sie die Symbol-Wechsel-Technik zur Code-DatenTrennung! Diese Aufgabe benutzt ein eingebautes Feature des Flash-Programmes, um zu demonstrieren, wie die Bewegung einer Animation von dem entsprechenden Symbol getrennt werden kann. Folgend dazu die notwendigen Schritte: 1. Erstellen Sie einen Block mit Text und konvertieren Sie diesen zu einem Symbol. Nennen Sie das Symbol Holder Text. Generieren Sie nun ein Bewegungstween dazu. 2. Testen Sie den Film. Stellen Sie sich vor, es wäre dies die perfekte Animation mit dem besten Bewegungstween aller Zeiten für eine bestimmte Sektion Ihrer zukünftigen Website. Sie wollen nun, dass ein anderer Text diesem Tween in einer anderen Szene folgt. Klicken Sie dazu auf die Ebene 1, um alle Frames dieser Ebene auszuwählen. Wählen Sie nun aus dem Menü BEARBEITEN den Befehl BILDER KOPIEREN aus. 3. Erstellen Sie nun eine neue Szene, indem Sie aus dem Menü EINFÜGEN den Menüeintrag SZENE auswählen. Klicken Sie auf das erste Bild und wählen Sie dann aus dem Menü BEARBEITEN den Eintrag BILDER EINFÜGEN aus. Sie haben nun alles oberhalb des ersten Tweens in die neue Szene kopiert. 4. Erstellen Sie einen anderen Block mit Text. Markieren Sie den Text und konvertieren Sie ihn anschließend in ein Symbol mit der Bezeichnung Replacement. Löschen Sie nun die Instanz von Replacement auf Ihrer Bühne. Keine Sorge, das Symbol ist nach wie vor in der Bibliothek gespeichert. 5. Wechseln Sie zum Symbol mit der Bezeichnung Holder Text. Wählen Sie in Bild 1 die Instanz von Holder Text aus und klicken Sie im Bedienfeld Instanz auf das Symbol mit der Bezeichnung Symbol wechseln (siehe Abbildung A.1). Diese Schaltfläche gestattet es Ihnen, die ausgewählte Instanz zu wechseln und mit einem neuen Symbol zu versehen. Die Dialogbox Symbol Wechseln (Abbildung A.2) listet alle verfügbaren Symbole der Bibliothek auf und setzt eine Markierung vor das Symbol, welches derzeit zur entsprechenden Instanz gehört und mit dieser verbunden ist. Wählen Sie das Ersetzen-Symbol aus und klicken Sie dann auf OK. Für andere Bilder verfahren Sie analog zu der soeben beschriebenen Vorgehensweise.

440

Methoden

Abbildung A.1: Das Symbol Symbol wechseln gestattet es, die Instanz zu wechseln und diese mit einem neuen Symbol zu versehen.

Abbildung A.2: Diese Dialogbox enthält eine Liste aller für diese Instanz verfügbaren Symbole.

Die Dialogbox Symbol wechseln gestattet das Ersetzen des Symbols einer Instanz, ohne dass dabei sämtliche Attribute der entsprechenden Instanz verloren gehen. Im vorangegangenen Beispiel haben Sie lediglich die so genannte Master-Version des Textes editiert inklusive der Daten in jeder betroffenen Instanz des Films. Dabei haben Sie bereits Daten vom Inhalt getrennt behandelt. Wenn ein Kunde Änderungen in seiner Flash-Site haben will, bedeutet dies sehr oft eine ganze Menge Arbeit für alle Beteiligten. Derartige Arbeiten bedürfen einer guten Planung im Vorfeld der anstehenden Tätigkeiten, um sich nicht noch zusätzliche Arbeit während der Umstellung aufzubürden. Sehr hilfreich ist es dabei, den Code sehr gut zu strukturieren, damit Sie auch noch Monate nach der Erstellung wissen, was Sie da eigentlich programmiert haben (siehe dazu auch Kapitel 18).

441

Die Arbeit an großen Projekten und in Teamumgebungen

Die Trennung von Code und Daten ist ein sehr guter Ansatz, den Sie bei der Erstellung einer Site stets im Hinterkopf behalten sollten. Fragen Sie sich stets, ob der eigentliche Inhalt von der Struktur immer gut getrennt ist.

A.2

Angewandte Techniken

Wenn Sie einmal den Grundgedanken der Produktionsmethoden und deren Vorteile verstanden haben, stellt sich schnell die Frage, wie diese Erfahrungen nun in Flash einfließen können. Wie gestattet man beispielsweise verschiedenen Mitgliedern eines Teams an einem Projekt zu arbeiten? Genau dies werden Sie unter anderem im folgenden Kapitel kennen lernen. Sie erlernen den Umgang mit in Flash eingebauten Features, die genau jene Anforderungen unterstützen, sowie einige generelle Techniken, die sich nicht unbedingt auf Flash beziehen.

Gemeinschaftliche Bibliotheken In Kapitel 18 haben Sie bereits erfahren, wie gemeinschaftlich nutzbare Bibliotheken funktionieren. Wie Sie wissen, kann ein Bibliothekseintrag dabei von vielen Anwendern benutzt werden. Ein wichtiger Aspekt bei der Erstellung einer Website ist der enorme Aufwand an Arbeit, der notwendig ist, um ein so genanntes Artwork zu erstellen. Währen der »Künstler« mit der Erstellung der Grafiken beschäftigt ist, sitzt der Programmierer mit Kribbeln in den Fingern herum und wartet auf das Resultat der Person, welche die grafischen Elemente erstellt. Sind dann endlich die Grafiken fertig, muss alles sehr schnell gehen. Diese Situation ist besonders für die Programmierer sehr unbefriedigend. Mit gemeinschaftlich nutzbaren Bibliotheken kann der Grafiker einen Platzhalter (Grafiken ohne Inhalt, nur mit den letztendlichen Ausmaßen) für die entsprechenden Grafiken erstellen, mit denen die Programmierer arbeiten können. Somit kann die Site komplett programmiert werden. Zum Schluss ersetzt der Programmierer nur noch die Platzhalter durch die entsprechenden Grafiken. Dies hat den Vorteil, dass der Programmierer von Anfang an mit den Platzhaltern arbeiten kann, ohne auf die Resultate des Grafikers warten zu müssen.

Aufgabe: Benutzen Sie gemeinschaftliche Bibliotheken zur Erstellung eines Filmes ohne die finalen Grafiken! In dem folgenden Szenario benutzen Sie gemeinschaftliche Bibliotheken mit dem Ziel, dass Mitarbeiter mit dem Aufbau einer Website beginnen, bevor der Grafiker mit der Erstellung seiner Grafiken fertig ist. Dazu notwendig sind die erwähnten Platzhalter.

442

Angewandte Techniken

1. Stellen Sie sich vor, der Grafiker hat mit seiner Arbeit begonnen, aber die Grafik für den Hintergrund der Website ist leider noch nicht fertig. Sie als Programmierer müssen jedoch unbedingt anfangen, die Site zu programmieren. Der Grafiker kann zu diesem Zweck eine Platzhalter-Grafik erstellen und diese in der Bibliothek ablegen. 2. Erstellen Sie eine neue Datei. Zeichnen Sie einen Kasten und einen Text mit der Bezeichnung Holder. Wählen Sie alles aus und konvertieren Sie es zu einem Symbol. Benennen Sie das Symbol mit Hintergrund und speichern Sie es als Filmsequenz ab. 3. Benutzen Sie nun das Bedienfeld Info und setzen Sie die X- und Y-Position jeweils auf 0.

Abbildung A.3: Das Bedienfeld Info wird benutzt, um die X- und YPosition der Grafik festzulegen.

4. Da Sie soeben den Zentrierpunkt des Hintergrundes neu gesetzt haben, hat sich das Bild zum linken oberen Rand der Flash-Bühne bewegt. Führen Sie einen Doppelklick auf Hintergrund aus und rufen Sie das Bedienfeld Bibliothek auf. 5. Wählen Sie im Bedienfeld Bibliothek den Eintrag Background aus und rufen Sie anschließend aus dem Kontextmenü (rechte Maustaste) den Eintrag Verknüpfung auf. 6. Wählen Sie die zweite Option DIESES SYMBOL EXPORTIEREN und geben Sie dem Symbol die Bezeichnung Hintergrund. Klicken Sie dann auf die Schaltfläche OK (siehe Abbildung A.4). Diese Option sichert, dass das Symbol mit dem Film exportiert wird. Der Name wird lediglich benötigt, um das Symbol in der Bibliothek zu identifizieren. 7. Speichern Sie anschließend die Datei unter der Bezeichnung shared.fla ab.

443

Die Arbeit an großen Projekten und in Teamumgebungen

Abbildung A.4: Mit dieser Dialogbox stellen Sie sicher, dass das Symbol exportiert werden kann.

8. In einer neuen Datei kann nun der Programmierer diesen Platzhalter benutzen, um mit der Programmierung zu beginnen. Wählen Sie dazu aus dem Menü DATEI den Eintrag DATEI ÖFFNEN und öffnen Sie die Datei shared.fla. Ziehen Sie per Drag den Hintergrund auf die Bühne und wählen Sie aus dem Bedienfeld Info den Zentrierpunkt 0,0 aus. 9. Der Programmierer kann nun mit seiner Arbeit fortfahren. 10. Ist der Grafiker mit seiner Arbeit fertig, muss er lediglich das Symbol für Hintergrund in der Bibliothek editieren oder ein ganz neues Symbol anlegen. Erstellt der Grafiker ein neues Symbol, muss er das alte entfernen und sicherstellen, dass das neue Symbole über die Verknüpfungseigenschaften des alten Symbols verfügt.

Smart Clips (Smart-Filmsequenzen) Wir haben Smart Clips bereits in Kapitel 16 kennen gelernt. Ziel war es dort, komplizierte Script-Aufgaben in ein leicht zu handhabendes Format zu übersetzen. Sie sind auf einige fortgeschrittene und hilfreiche Smart Clips gestoßen, die standardmäßig mit Flash ausgeliefert werden. Smart Clips gestatten dem Anwender die Erstellung eines konsistenten Templates (Schablone oder Vorlage), das sämtliche Teamarbeiter als Grundlage ihrer Arbeit benutzen können.

Aufgabe: Erstellen Sie eine Smart-Filmsequenz, die ein Template bedient In dieser Aufgabe erstellen Sie ein Template für jeden Mitarbeiter Ihres Teams. Dabei kann jeder Mitarbeiter beliebig in seinem Template arbeiten, ohne das die Gesamtstruktur dabei zerstört wird. 1. Erstellen Sie eine neue Datei mit zwei Blöcken von Text. Formatieren Sie mit Hilfe des Bedienfelds Zeichen einen Block mit einer sehr großen Schriftart (ungefähr 36 Pixel). Der andere Textblock sollte von der Schrift her etwas kleiner ausfallen (24 Pixel).

444

Angewandte Techniken

2. Benutzen Sie die Registerkarte Textoptionen des Bedienfelds Zeichen, um den Textblock als dynamischer Text zu markieren. Stellen Sie sicher, dass das Kontrollfeld auswählbar deaktiviert ist. Klicken Sie auf die Schaltfläche Umrisse für gesamte Schrift einschliessen. Ihr Bedienfeld sollte wie aus Abbildung A.5 ersichtlich ausschauen.

Abbildung A.5: Beide Textblöcke wurden dynamisch und als nicht auswählbar markiert.

3. Geben Sie jeweils für beide Textblöcke im Eingabefeld VARIABLE Titel (großer Textblock) und Untertitel (kleiner Textblock) ein. 4. Verändern Sie nun die Position der beiden Textblöcke so, dass sich Überschrift in der Nähe der oberen linken Ecke Ihrer Bühne befindet und Untertitel genau darunter liegt. Stellen Sie die Ränder der Textblöcke so ein, dass sie sehr groß sind (siehe dazu Abbildung A.6) und etwas über den rechten Bereich der Bühne hinaus reichen. 5. Die Ausrichtung des Textes in der Box bleibt Ihnen überlassen. In unserem Beispiel habe ich die Ausrichtung der Überschrift auf links gesetzt und rechts für den Textblock mit dem Untertitel. 6. Eine direkte Konvertierung in eine Smart-Filmsequenz geht nur über den Umweg der Konvertierung in eine Filmsequenz. Markieren Sie beide Textblöcke und wählen Sie dann aus dem Menü EINFÜGEN den Menüeintrag IN SYMBOL KONVERTIEREN. Nennen Sie es Template. 7. Das Layout sollte genauso sein, wie Sie es haben wollen. Wählen Sie nun die Instanz Template, die Sie gerade erstellt haben und benutzen Sie das Info-Bedienfeld, um die Position auf 0,0 zu setzen.

445

Die Arbeit an großen Projekten und in Teamumgebungen

Abbildung A.6: Verändern Sie die Ränder der Textblöcke.

8. Wie zu erwarten, hat sich nun alles zum linken oberen Rand der Bühne bewegt. Führen Sie nun einen Doppelklick auf Template aus, um das Master-Symbol editieren zu können. 9. Um nun eine Smart-Filmsequenz zu generieren, müssen Sie die Clip-Parameter definieren. Öffnen Sie dazu den Menüeintrag BIBLIOTHEK aus dem Menü FENSTER. Klicken Sie mit Ihrer rechten Maustaste auf das Template und wählen Sie den Kontextmenüeintrag SEQUENZPARAMETER DEFINIEREN. Klicken Sie auf das Pluszeichen und geben Sie in der Spalte NAME die Bezeichnung Überschrift ein. In der dazugehörigen Spalte mit der Bezeichnung WERT geben Sie nun Geben Sie hier die Überschrift ein ein. Klicken Sie ein zweites Mal auf das Pluszeichen und geben Sie in der Spalte NAME die Bezeichnung Untertitel ein. Im dazugehörigen Eingabefeld WERT müssen Sie nun Geben Sie hier Ihren Untertitel ein eingeben. Klicken Sie abschließend auf OK. 10. Nun können Sie die Smart-Filmsequenz an alle Autoren verteilen. 11. Kehren Sie zum Hauptbildschirm zurück und löschen Sie alles, was sich auf der Bühne befindet. Ziehen Sie Template per Drag&Drop von der Bibliothek auf die Bühne.

446

Angewandte Techniken

Benutzen Sie das Bedienfeld Info, um die Zentrierungspunkte 0,0 einzugeben. Markieren Sie das Template und begeben Sie sich dann zum Bedienfeld Sequenzparameter. Führen Sie einen Doppelklick auf das Feld TITEL aus und geben Sie Das ist die Seite 1 ein. Fügen Sie ein Schlüsselbild bei Bild 2 ein und ändern Sie den Titel und Untertitel mit Hilfe des Bedienfeldes Sequenzparameter. Fügen Sie zu guter Letzt ein anderes Schlüsselbild mit einem anderen Text für das dritte Bild ein. 12. Fügen Sie eine Stop-Aktion in das erste Bild der aktuellen Ebene ein. Wählen Sie aus dem Menü EINFÜGEN den Eintrag EBENE und zeichnen Sie einen Kasten. Wählen Sie dann aus dem Menü EINFÜGEN den Eintrag IN SYMBOL KONVERTIEREN aus. Benennen Sie es mit Schaltfläche (wählen Sie abschließend das Optionsfeld SCHALTFLÄCHE). Markieren Sie die entsprechende Instanz und öffnen Sie das Bedienfeld Aktion aus dem Menü FENSTER und fügen Sie eine goto-Aktion hinzu. Modifizieren Sie die Parameter zu next frame (siehe Abbildung A.7).

Abbildung A.7: Mit einer simplen Aktion kann sich der Anwender durch die unterschiedlichen Frames bewegen.

13. Testen Sie den Film. Sie werden sicherlich feststellen, dass Sie den Text ändern können, die Formatierungen bleiben jedoch immer bestehen. Werden Änderungen an der ursprünglichen Smart-Filmsequenz vorgenommen, wirken sich diese unmittelbar auf alle anderen Templates aus.

447

Die Arbeit an großen Projekten und in Teamumgebungen

Die letzte Aufgabe versinnbildlicht eine gute Anwendung für Smart Clips. Vorteile bringen Smart Clips vor allem dann, wenn sie in einer Bibliothek gespeichert werden und dort mehreren Benutzern zur Verfügung stehen – und zwar mit all ihren Vorteilen. Es gibt jedoch auch einige Limitierungen. So kann der Autor etwa den Text erst sehen, wenn er einen Film erstellt und diesen testet. An dieser Tatsache kann man nichts ändern, da Flash erst während der Ausführung des Films auf die spezifizierten Parameter zurückgreift. Eine andere Einschränkung kann gelöst werden, es ist dazu lediglich ein wenig Programmierung notwendig. In der letzten Aufgabe hat der Flash-Autor jede Instanz eines Templates mittels des Info-Bedienfeldes positioniert. Sie können jedoch auch in das ursprüngliche Template (Master Template) hineingehen und dort diese Notwendigkeit beseitigen. Fügen Sie beim ersten Schlüsselbild bei dem Dialogfeld OBJEKTAKTIONEN eine evaluate-Aktion mit dem Parameter _x=0 ein. Fügen Sie danach eine weitere evaluate-Aktion mit dem Ausdruck _y=0 ein. Wird dann das erste Schlüsselbild aufgerufen, werden die entsprechenden Eigenschaften gesetzt, und zwar auf die Koordinaten 0,0. Nun ist der Autor in der Lage die Clips dahin zu setzen, wo er sie auch immer haben will. Die Arbeit am Code zu unserem Beispiel-Template ist relativ gering. Ein Template mit wesentlich mehr Funktionen verlangt schon ein wenig mehr Zeit von Ihnen. Bedenken Sie jedoch immer, dass sich der Aufwand lohnt.

Das Bewahren der Vollständigkeit bei umfangreichen Änderungen Beabsichtigen Sie einen großen Teil Ihrer Arbeit in eine andere Datei zu integrieren, müssen Sie einige wichtige Aspekte beachten bzw. Schritte durchführen. Vielleicht haben Sie eine Datei, die genau Ihren Vorstellungen entspricht und hervorragend funktioniert oder Sie benötigen eine andere Datei, die der ersten entsprechen soll, nur mit anderen Grafiken. Diese Szenarien für derartige Vorgänge sind vielfältig. Unglücklicherweise gibt es ebenso viele Wege, um ans Ziel zu kommen. Es gibt jedoch einige grundlegende Techniken, die für diese Zwecke gut geeignet sind. Wollen Sie einen Gegenstand kopieren oder ausschneiden und ihn später an geeigneter Stelle wieder einfügen, können Sie über das Menü BEARBEITEN und den Menüeintrag AN POSITION EINFÜGEN ((Strg)+(ª)+(V)) diesen Vorgang durchführen. Eine andere Möglichkeit bezieht sich auf das Kopieren und Einfügen von Bildern. Wollen Sie eine Reihe von Schlüsselbildern kopieren inklusive Bild-Aktionen und Tweens, müssen Sie die entsprechenden Bilder auswählen und anschließend aus dem Menü BEARBEITEN den Menüeintrag BILDER KOPIEREN auswählen. Wollen Sie dann die entsprechenden Bilder einfügen, müssen Sie zuerst eine Ebene auswählen und anschließend aus dem Menü BEARBEITEN den Eintrag BILD EINFÜGEN auswählen (diese Optionen erreichen Sie auch über das Kontextmenü der entsprechenden Objekte).

448

Angewandte Techniken

Vielleicht erinnern Sie sich noch an Kapitel 1, das sich mit der Zeitlinien-Auswahl beschäftigte. Klicken Sie auf den Namen der Ebene, um alles auszuwählen, was sich in dieser Ebene befindet. Halten Sie dabei (Strg) gedrückt, um einen Bereich mit Bildern zu markieren. (ª) und (Strg) müssen Sie gleichzeitig betätigen, um eine Auswahl hinzuzufügen oder betätigen Sie nur (ª), um einzelne Bilder zu selektieren. Wollen Sie mehrere Bilder markieren, um diese vielleicht zu entfernen, benutzen Sie am besten die (Strg)+drag-Methode. Sie haben dann die Möglichkeit mittels des Menüs EINFÜGEN und BILDER ENTFERNEN (oder (ª)+(F5)) die markierten Bilder zu entfernen. Wollen Sie den Inhalt einer Datei in eine andere kopieren, müssen Sie sich erst mit einigen Aspekten auseinandersetzen, die sich mit den Instanzen von Symbolen beschäftigen. Haben Sie mehrere Symbole innerhalb einer Datei erstellt, können Sie beispielsweise die entsprechende Bibliothek offen lassen. Öffnen oder erstellen Sie nun eine andere Datei, bleibt das alte Bibliotheksfenster weiterhin geöffnet, es wird lediglich grau hinterlegt, als Indikator, dass diese Bibliothek einer anderen Datei zugehörig ist (Abbildung A.8). Sie haben dann die Möglichkeit, per Drag&Drop Objekte zwischen den beiden Bibliotheken zu verschieben. Flash kopiert diese Objekte in die neue Bibliothek.

Abbildung A.8: Die Bibliothek einer anderen Datei wird grau hinterlegt dargestellt.

449

Die Arbeit an großen Projekten und in Teamumgebungen

Indem Sie das gleiche Symbol von der alten in die neue Bibliothek kopieren, benutzt Flash das Master-Symbol der neuen Bibliothek. Dies ist insofern wichtig, da Änderungen am Inhalt immer nur an der neuen Datei vorgenommen werden, Der Inhalt der alten Datei bleibt bestehen.

Dokumentation und Namenskonventionen Im Rahmen eines komplexen Projektes ist eine Dokumentation von sehr großer Bedeutung. Alle Media-Elemente sollten dabei klar identifiziert und falls notwendig zusätzlich auf Papier gebracht werden, wo alles detailliert aufgeführt und jede Funktion beschrieben wird. Denken Sie bei der Erstellung einer Dokumentation immer daran, dass diese aufgebaut sein soll wie ein gutes Handbuch. Es sollte von jedem Teammitglied ohne Schwierigkeiten benutzt werden können. Zudem sollten auch Außenstehende des Projektes nach kurzem Studium der Dokumentation in der Lage sein, in das Projekt einzusteigen. Bedeutung hat eine Dokumentation nicht nur für andere Mitglieder des Teams, sondern auch für einen selbst. Da Änderungen an einer Site an der Tagesordnung sind, ist es sehr hilfreich, eine Dokumentation zu haben, die erklärt, was man selbst noch vor wenigen Wochen oder Monaten getan hat. Dabei brauchen Sie nicht immer auf die Papierversion zurückzugreifen. Flash bietet die Möglichkeit, Notizen direkt im Programm zu den entsprechenden Flash-Filmen abzulegen. Eine einfache Dokumentation sollte eine Beschreibung jeder Datei enthalten, die im Rahmen des Projektes verwendet wurde. Des Weiteren sollte sie Ordnerbezeichnungen haben, welche sich selbst und den Ordnerinhalt erklären. So könnte ein Ordner etwa die Bezeichnung Sounds tragen und demnach sämtliche .swf-Dateien mit Sound enthalten. Jede Datei ist einem Projekt zugewiesen und hat einen Daseinsgrund, falls nicht, sollten Sie die entsprechenden Dateien löschen. Eine wirklich gute Dokumentation sollte auch die Beschreibung des Gesamtprozesses enthalten, die nicht unbedingt jeden Arbeitsschritt zu enthalten braucht. Finden Sie eine geschickte Balance zwischen Detailreichtum und Transparenz. Machen Sie sich nicht mehr Arbeit, als unbedingt notwendig. Die Dokumentation sollte schon während des laufenden Projektes erstellt und geführt werden und nicht am Ende des Projektes, wenn einige Details schon langsam in Vergessenheit geraten. Brillante Einfälle und Meilensteine bei der Erstellung und der Weg dahin sollten sofort dokumentiert werden. Schützen Sie die Dokumentation, sie ist Ihr Kapital. Ein weiterer wichtiger Punkt im Rahmen der Dokumentation sind die Namenskonventionen. Symbolnamen sind wichtig, da Sie mit ihnen Bibliotheken alphabetisch sortieren lassen können und die Suche bei logischen Namen wesentlich transparenter und einfacher wird. Wenn etwa jeder Teilnehmer in Ihrem Team seine Symbole mit Initialen versieht, können Sie die entsprechenden Objekte schnell den zuständigen Mitarbeitern zuordnen.

450

Angewandte Techniken

Diese Vorgehensweise finden Sie auch im Hilfeteil zu Flash (Abbildung A.9). Alle BitmapGrafiken haben Bezeichnungen, die mit Bitmap- beginnen, während Schaltflächen zur Navigation mit der Bezeichnung Nav Schaltfläche versehen sind. Sie können sich diese Bezeichnungen zu eigen machen oder neue finden – Hauptsache, Sie finden sich später damit zurecht. Namenskonventionen sind nichts anderes als eine Menge von Gesetzmäßigkeiten, an denen sich Ordner und Dateien orientieren. Sie haben die Möglichkeit, Konventionen zu spezifizieren, ohne jeden Dateinamen einzeln anzusprechen. Dazu ein kleines Beispiel: So könnte Ihre Namenskonvention SektionsNummer_UnterSektion.swf aussehen. Für die Sektion 2, Untersektion 3, würde der Name 2_3.swf lauten.

Abbildung A.9: Die Bibliothek ist sofort aufgeräumt, wenn man eine durchgängige Namenskonvention befolgt.

Zusätzlich zu den Namen der Symbole in der Bibliothek haben auch die Instanzen auf der Bühne Namen. Instanznamen haben einen Vorteil im Rahmen der Dokumentation, da Namenskonventionen sehr kritisch sein können. Haben Sie beispielsweise drei Instanzen eines Symbols mit der Bezeichnung Box, so haben die drei Instanzen nicht die gleichen Namen. Wenn Sie die Instanzen box_1, box_2 und box_3 nennen, können Sie sich ein Script erstellen, welches die Eigenschaften für jede einzelne Box zu einer bestimmten Zeit setzt. Der folgende Code setzt eine box_x an Position 10:

451

Die Arbeit an großen Projekten und in Teamumgebungen

Function move(boxNum){ root[”box_”+boxNum]._x=10; } boxNum kann die Zustände 1, 2 oder 3 annehmen. "box_"+boxNum ändert sich dynamisch zu box_1, wenn boxNum den Wert 1 hat.

A.3

Zusammenfassung

In diesem Kapitel sahen Sie verschiedene Herangehensweisen, um in Teamumgebungen zu arbeiten. Adaptieren und verinnerlichen Sie Tipps und Ratschläge und wenden Sie diese in Ihren eigenen Projekten an. Zusätzlich zu den Theorien und Methoden haben Sie einige eingebaute Features zu diesem Thema in Flash kennen gelernt, mit denen Sie Ihre Produktivität steigern können. Sie benutzen Features wie das Symbol WECHSELN oder SMART-FILMSEQUENZEN zum Erstellen von Templates. Lassen Sie sich vor allem Zeit, einmal den Informationsfluss Ihres Teams zu studieren, um den Ablauf reibungsloser zu gestalten.

A.4

Workshop

F&A F

Gibt es eine Alternative zum Symbol WECHSELN in jeder Instanz der Zeitlinie? A

452

Ja, Sie haben nicht die Möglichkeit, verschiedene Instanzen zu wählen und diese auf einen Schlag zu wechseln. Haben Sie die Absicht, auf diese Weise einen Tween zu ersetzen, können Sie ein kleines Feature der Bibliothek benutzen. Erstellen Sie in einem Film ein Symbol mit der Bezeichnung box. Halten Sie die erste Bibliothek geöffnet und erstellen Sie eine zweite Datei. Bewegen Sie per Drag&Drop box aus der ersten Bibliothek in die neue Datei. Wenn Sie nun den Inhalt von box in der neuen Datei editieren, denkt Flash, dass es sich bei box um das gleiche Symbol handelt. Editieren Sie nun den Inhalt von box in der neuen Datei. Erstellen Sie ein Tween für die erste Datei, kopieren Sie die Bilder und fügen Sie anschließend die kopierten Bilder in die zweite Datei ein. Sie haben nun das gleiche Tween für eine neue Datei.

Workshop

F

Wie viele Mitarbeiter sollten in einem Team arbeiten? A

Die vielleicht einfachste Situation ist jene, wenn lediglich eine Person an einem Projekt arbeitet. Dieser Einzelkämpfer wird jedoch früher oder später sehr stark überlastet sein. Teams mit bis zu 20 Mitarbeitern können sehr produktiv und effektiv arbeiten. Prinzipiell kann man sagen, dass die Teamstärke sehr vom Umfang des Projektes abhängig ist.

Übungsfragen 1. Welcher der folgenden Punkte ist kein Vorteil der Code-Daten-Separation? a. Fehler im Programmcode werden minimiert und beseitigt. b. Der Code kann ohne große Umstände in einem neuen Projekt verwandt werden. c. Das Artwork einer Seite kann ohne Probleme ersetzt werden, ohne dass dies Auswirkungen auf den Code hat. 2. Was versteht man unter Full-Path-Review? a. Eine Situation, in die jeder Mitarbeiter eines Teams involviert ist und in der sich alle gemeinschaftlich das Projekt anschauen b. Sie gehen Schritt für Schritt durch das ganze Projekt, um Fehler aufzudecken. c. Sie entwickeln eine Komponente von Anfang bis zum Ende komplett durch, um anhand dessen Rückschlüsse auf das gesamte Projekt zu ziehen. 3. Was passiert, wenn Sie ein Schlüsselbild auswählen und anschließend aus dem Menü BEARBEITEN den Menüeintrag KOPIEREN aufrufen? a. Es passiert gar nichts, Sie sollten den Menüpunkt BILDER KOPIEREN aufrufen. b. Der Inhalt der Ebene auf dem Bildschirm wird in die Zwischenablage kopiert. c. Flash wird beendet.

453

Vertiefen der erworbenen FlashKenntnisse

h n A

B g an

Vertiefen der erworbenen Flash-Kenntnisse

Sie sollten zum jetzigen Zeitpunkt ein solides Fundament besitzen, was den Umgang mit Flash betrifft. Das vorliegende Buch erhebt nicht den Anspruch, Flash erschöpfend behandelt zu haben. Nachdem Sie alle Lektionen und Kapitel dieses Buches durchgearbeitet haben, müssen Sie sich weiterhin in diesem Thema fit machen. Einen Schritt vorwärts bringt Sie mit Sicherheit die Wiederholung der praktischen Übungen in diesem Buch. In diesem Kapitel beschäftigen wir uns damit, wie Sie Ihre erworbenen Kenntnisse auf technischer Basis verfeinern und schneller anwenden können. In diesem Kapitel werden wir: 쐽

Lernressourcen zum Thema Flash finden,

쐽

eine Methode zum erweiterten Erwerb von Flash-Kenntnissen entwickeln,

쐽

Debugger und andere Techniken zur Steigerung der Arbeit kennen lernen.

Obwohl sich der Hauptinhalt dieses Kapitels mit der Entwicklung von Script-Technologien befasst, sind einige der neuen Aspekte auch allgemein gültig. So gibt es beispielsweise eine Vielzahl von Webseiten, die mit guten Animationstechniken im Bereich Flash, aber auch mit allgemeinen Informationen aufwarten.

B.1

Profitieren Sie von Beispiel-Dateien

Einer der besten Wege zum Erlernen von Flash ist es, die Arbeiten anderer Flash-Programmierer anzuschauen. Schauen Sie sich Flash-Sites an und werfen Sie einmal einen Blick hinter die Fassade, um zu sehen, wie alles funktioniert.

Dateien, die in Flash enthalten sind Eine der besten Dateien zum Erlernen von Flash liegt direkt vor Ihrer Nase. Im Menü HILFE finden Sie verschiedene Beispiel-Dateien, wie beispielsweise den Taschenrechner, den Mosquito Killer oder das Puzzle. Es gibt noch einige mehr, aber die drei erwähnten Beispiele benutzen auf sehr anschauliche Weise die neuen Features von Flash 5. Die Lektionen, zu erreichen über das Menü HILFE / LEKTIONEN, benutzen verschiedene Inhalte, die man hervorragend verwenden kann, um einmal einen Blick hinter die Kulissen ihrer Funktionsweise zu werfen. Die Lektionen führen Sie Schritt für Schritt durch verschiedene Themen, ohne die entsprechende Technik aus dem Auge zu verlieren. Einige interessante Dateien finden Sie ebenfalls unter FENSTER / ALLGEMEINE BIBLIOTHEKEN (beispielsweise Sounds und Bilder). Des Weiteren sind einige wirklich gute Beispiele unter FENSTER / ALLGEMEINE BIBLIOTHEKEN / SMART FILMSEQUENZEN abgelegt. Vielleicht können Sie für eigene Projekte hier einige Beispiele finden.

456

Profitieren Sie von Beispiel-Dateien

Online-Tutorials Die meisten der Flash-Programmierer sind geneigt, ihren Erfahrungsschatz mit anderen Gleichgesinnten zu teilen. So gibt es Menschen, die komplette Projekte der Allgemeinheit zur Verfügung stellen und diese auch noch dokumentiert haben. Ressourcen mit diesen so genannten Online-Tutorials finden Sie sehr häufig im Internet. Fast auf jeder Site zum Thema Flash gibt es derartige Tutorials. Viele dieser Internetseiten haben Artikel, Foren und Beispiel-Downloads zum Thema Flash. Zusätzlich gibt es so genannte E-Mail-Server, mit deren Hilfe Sie Fragen an die Flash-Gemeinde stellen können. Dieses Buch wäre nicht dieses Buch, hätte ich nicht viele Tipps und Ratschläge von unzähligen E-Mail-Flash-Kontakten erhalten. Haben Sie ein Problem, schreiben Sie dazu einfach eine E-Mail und senden Sie diese an die FlashGemeinde eines Flash-Servers – eine Antwort ist garantiert. Ein Listserver ist ein Rechner, auf dem sich so genannte Newsgruppen befinden, die sich mit einem ganz bestimmten Thema beschäftigen – so auch mit dem Thema Flash. Wenn Sie eine E-Mail zu diesem Listserver schicken – natürlich zur passenden Newsgroup – wird irgendein Teilnehmer eine Lösung für Ihr Problem haben. Wie bereits erwähnt, verfügen viele der Websites zum Thema Flash über Tutorials und die dazugehörigen .fla-Dateien. Hier haben Menschen eine Lösung oder einen Effekt erarbeitet und bieten diesen nun kostenlos der Allgemeinheit zur Nutzung an. Indem Sie die passende .fla-Datei herunterladen, können Sie diesen Effekt direkt in Flash ausprobieren. Dank dieser Dateien erlernen Sie die Arbeitsweise eines anderen Flash-Programmierers und können sich vielleicht das eine oder andere abschauen.

Wie man aus einer abgeschlossenen Arbeit lernt Haben Sie eine .fla-Datei gefunden, die Sie beeindruckt hat und von der Sie etwas lernen wollen, so öffnen Sie diese einfach in Flash und schnüffeln ein wenig darin herum – ist ja alles ganz offiziell! Handelt es sich dabei um eine sehr komplexe Datei, kommen Sie sich vielleicht vor, als würden Sie durch einen dunklen Wald wandern. Sie benötigen einige Techniken, um sich in einer derartigen Datei zurechtzufinden. Sie sollten nicht versuchen, alles auf einmal zu begreifen und zu erfassen. Beschäftigen Sie sich lieber erst einmal mit der Identifikation eines speziellen Attributes, von dem Sie etwas lernen bzw. übernehmen wollen. Dazu ein Beispiel: Sie würden sich gern einmal die Beispiel-Datei KREISBEWEGUNG anschauen. Diese öffnen Sie über das Menü HILFE und das Untermenü BEISPIELE. Spielen Sie den Film ruhig einmal ab. Nun wollen Sie vielleicht herausfinden, wie sich der Cursor verändert und was damit zusammenhängt. Auf den folgenden Seiten zeige ich Ihnen ein paar Techniken, mit denen Sie einzelne Aspekte einer Flash-Site separieren können.

457

Vertiefen der erworbenen Flash-Kenntnisse

Aufgabe: Lernen Sie von einer komplexen Beispiel-Datei! 1. Öffnen Sie im Menü HILFE das Untermenü BEISPIELE und rufen Sie die Datei KREISBEWEGUNG auf. Spielen Sie den Film ab. 2. Kehren Sie zur ursprünglichen Datei auf Ihrer Bühne zurück und öffnen Sie den FILM-EXPLORER aus dem Menü FENSTER (siehe Abbildung B.1). Der Film-Explorer gibt Ihnen eine Übersicht der aktuellen Datei inklusive aller benutzter Komponenten. Sie sehen die Schriftarten, jede Instanz, alle Aktionen und vieles mehr (siehe Abbildung B.2)

Abbildung B.1: Der Film-Explorer ist Bestandteil der Symbolleiste der Bühne.

Abbildung B.2: Der Film-Explorer zeigt eine Liste mit allen Elementen des Films auf.

3. Verändern Sie nun die Ansicht mit den Filterschaltflächen, so dass lediglich Aktionen dargestellt werden. Klicken Sie dazu auf das letzte Symbol (ganz rechts) der Filterschaltflächen (Abbildung B.3). Es öffnet sich ein Fenster mit einer detaillierten Liste aller Elemente, die angezeigt werden. Deaktivieren Sie alle Kontrollkästchen außer dem Kontrollkästchen ActionScript. Klicken Sie dann auf OK.

458

Profitieren Sie von Beispiel-Dateien

Abbildung B.3: Die letzte Filterschaltfläche gibt Ihnen Zugriff auf eine detaillierte Liste mit allen Elementen, die angezeigt werden können.

4. Sie haben nun alle ActionScripts des Films auf einen Blick. Im Film-Explorer klicken Sie einfach auf das Pluszeichen, das unterhalb der Szene 1 liegt. Daraufhin öffnet sich die gesamte Struktur des Film-Explorers inklusive aller ActionScripts. Versuchen Sie nun den Eintrag mit dem umfangreichsten Code zu finden. Sie können jede Aktion öffnen, indem Sie auf das zugehörige Pluszeichen klicken. Stöbern Sie solange herum, bis Sie die Aktion mit dem umfangreichsten Code gefunden haben. Aktionen für Bild 1 enthält eine ganze Menge Programmiercode und ist der Spitzenreiter bei diesem Film. Siehe dazu auch Abbildung B.4. 5. Sie können nun dieses ausdrucken, für unsere Zwecke genügt es jedoch erst einmal, den Code zu kopieren. Führen Sie einen Doppelklick innerhalb des Codes aus, worauf das Bedienfeld Bildaktionen erscheint. 6. Scrollen Sie zum Anfang, betrachten Sie einmal den Code und überprüfen Sie, ob er Sinn für Sie macht. Die erste Linie verbirgt einfach nur den Mauszeiger. Behalten Sie im Hinterkopf, dass der gesamte Texte blau dargestellt sein soll. Dies resultiert aus der Tatsache, das ActionScript im Code immer blau dargestellt wird. Kopieren Sie diese erste Zeile. Erstellen Sie eine neue Datei und fügen Sie diese Zeile nun in das ScriptFeld des Bedienfelds Bildaktionen für das erste Bild ein. Ihre Maus sollte jetzt erscheinen. Schließen Sie den Film und begeben Sie sich wieder zu unserem ursprünglichen Beispielfilm. 7. Vielleicht

haben Sie sich über die Zeile _root.attachMovie("pointer", "pointer",10000) gewundert. Diese Zeile benutzt die Aktion attachMovie, um eine Instanz (mit dem Namen pointer) eines Symbols der Bibliothek zu erstellen. Der entsprechende Bibliotheksgegenstand muss die Linkeigenschaft Export aktiviert haben. Die identifizierende Komponente trägt die Bezeichnung pointer.

459

Vertiefen der erworbenen Flash-Kenntnisse

Abbildung B.4: Da hier nur das ActionScript dargestellt wird, können Sie alle Elemente nach dem Eintrag mit dem umfangreichsten Code durchsuchen.

8. Kopieren Sie die dritte und vierte Zeile und fügen Sie diese wieder in die Bildaktionen des ersten Bildes des neu erstellten Films ein (siehe Abbildung B.5). Der einzige Teil des Codes, der nicht farbig ist, trägt die Bezeichnung pointer. Dieser Code bewegt eine Clip-Instanz mit der Bezeichnung pointer überall dahin, wohin sich auch der Mauszeiger bewegt. Erstellen Sie in der neuen Datei einen schmalen Kasten, konvertieren Sie ihn zu einem Symbol und benennen Sie ihn box. Benennen Sie nun die Instanz auf der Bühne mit pointer. Nehmen Sie dazu das Bedienfeld Instanz zuhilfe. 9. Testen Sie den Film. Er funktioniert nicht! Dies ist völlig normal und sollte Sie nicht beunruhigen. Gehen Sie einmal zurück zu unserem Originalfilm und schauen Sie, wie er sich von unserem neuen Film unterscheidet. 10. Zurück beim Originalfilm werden Sie schnell feststellen, was nicht stimmt – der Film benutzt zwei Bilder! Der Code des Bildes 1 führt ein weiteres Bild aus und dies immer wieder. 11. Gehen Sie zurück zu unserer neuen Datei und wählen Sie bei Bild 2 aus dem Menü EINFÜGEN den Menüeintrag BILD. Testen Sie den Film erneut. Obwohl es nun zu funktionieren scheint, ist es nicht wie im Original. Dies liegt an der Bildwiederholungsrate, die im Original wesentlich höher eingestellt ist. Korrigieren Sie das für Ihre Kopie.

460

Der Beginn eines umfangreichen Projektes

Abbildung B.5: Die drei Zeilen Code wurden aus dem Beispiel kopiert und in die neue Datei eingefügt.

Durch den Programmiercode eines Dritten zu wandern, kann sehr frustrierend sein, aber sehr oft lohnt sich die Auseinandersetzung mit den Techniken eines anderen Flash-Programmierers.

B.2

Der Beginn eines umfangreichen Projektes

Haben Sie das große Ziel, eine komplexe Website zu erstellen, denken Sie vielleicht, dass dieses Buch und die darin enthaltenen Beispiele für Ihre Zwecke zu einfach gehalten sind. Da mögen Sie recht haben. Sie haben aber die Grundlagen erlernt, um auf Basis dieses Wissens aufzubauen. Die besten, größten und schönsten Flash-Sites, die Sie jemals gesehen haben, sind nichts weiter als das Resultat von Büchern wie diesem.

Die Philosophie der kleinen Schritte Als Sie die Datei aus dem vorangegangenen Beispiel »auseinander genommen« haben, waren Sie schon auf dem richtigen Weg der Politik der kleinen Schritte. Zuerst schauten Sie nach dem Feature, welches den Mauszeiger verdeckt (mouse.hide()-Script). Danach extrahierten Sie das Script, welches für die Bewegung der Zeiger-Instanz verantwortlich war. So konnten Sie Stück für Stück den gesamten Code extrahieren und ausprobieren. Bis Sie jedoch die Funktion verstehen würden, verginge eine geraume Zeit. Deshalb folgen ein paar Ratschläge, wie Sie Ihre Nerven schonen und vor allem Zeit sparen.

461

Vertiefen der erworbenen Flash-Kenntnisse

Zuerst einmal betrachten Sie die Seite in all ihrer Herrlichkeit. Schreiben Sie dann alle Features auf, die gut funktionierten und die Ihnen gefielen. Seien Sie dabei so genau wie möglich. Ein Beispiel dazu: »Ein Glossar ist von überall aus erreichbar. Wählt der Anwender das Glossar aus, erscheint es am oberen Rand des Bildschirms. Aus dem Glossar heraus hat der Anwender Zugriff auf eine alphabetisch sortierte Liste vieler Begriffe. Hat man sich für einen Begriff entschieden, erscheint ein Textblock mit der Definition des entsprechenden Begriffs. Zu einigen Begriffen sind zusätzlich Bilder, Sounds und andere Multimedia-Elemente hinterlegt. Diese Elemente erscheinen im gleichen Kasten wie die Begriffe des Glossars. Der Anwender verlässt das Glossar über eine Schaltfläche mit der Beschriftung Schliessen.« Dies ist eine detaillierte Beschreibung eines einzigen Features. Von hier aus starten Sie Ihre Erkundung und bauen somit Stück für Stück Ihre eigene Website auf. Verzetteln Sie sich nicht, sondern wählen Sie immer Features aus, die Sie gerne auf Ihre Site übernehmen wollen. Nachdem Sie alle Features für Ihr Projekt spezifiziert haben, können Sie damit beginnen, kleine Aufgaben zu definieren. So könnte eine erste Aufgabe sein, eine Schaltfläche zu erstellen, mit welcher der Anwender das Glossar aufrufen kann. Danach könnten Sie eine zweite Schaltfläche erstellen, mit der er in der Lage ist, das Glossar zu verlassen. Erledigen Sie erst die kleinen Schritte, ehe Sie mit einer neuen, großen Aufgabe beginnen. Sie können dies mit einer Filmsequenz erreichen, die eine Schaltfläche in Bild 1 enthält. Hier könnten Sie ebenso eine Stop-Aktion implementieren (gotoAndStop(2)). Bild 2 könnte einen großen Kasten für den Hintergrund enthalten. Eine andere Schaltfläche erscheint in Bild 2, um die Funktion des Schließens zu übernehmen (gotoAndStop(1)). Die Technik, ein existierendes Projekt anzuschauen, positive Features aufzulisten und diese dann Schritt für Schritt nachzubilden, ist eine sehr gute Vorgehensmethode, um die eigene Website sukzessive aufzubauen. Sie können nicht alles auf einmal durchführen. Lassen Sie sich Zeit. Auch mit wesentlich mehr Erfahrung in Flash sollten Sie dieser Vorgehensweise stets den Vorzug geben.

Schützen Sie sich vor Fehlern Im Verlauf eines jeden großen Software-Projektes werden Fehler auftreten. Wenn Sie sich dies immer vergegenwärtigen, sind Sie besser vorbereitet, als wenn Sie sich immer sagen, dass schon alles gut gehen wird. Ein guter Weg, den Erfolg Ihrer Arbeit zu sichern, besteht in der Möglichkeit, die Früchte Ihrer Arbeit regelmäßig zu sichern. Wollen Sie signifikante Änderungen an bestehenden Dateien durchführen, erstellen Sie sich davon erst einmal eine Arbeitskopie, mit der Sie nach Herzenslust verfahren können. Eine Strategie betrifft dabei den Dateinamen. Wenn Sie beispielsweise in den Morgenstunden starten, können Sie die Datei

462

Der Beginn eines umfangreichen Projektes

meinProjekt_31okt2000-1.fla benennen. Jedes Mal, wenn Sie eine gravierende Veränderung vornehmen, können Sie die letzte Nummer hochzählen (meinProjekt_31okt20002.fla). Die aktuelle Datei wäre dann jene mit dem neuesten Datum und der höchsten

Endnummer. Des Weiteren empfiehlt sich vielleicht das Anlegen eines Logbuchs in Papierform, das zusätzlich zu den Dateinamen die Spezifikationen und Features auflistet. Eine gute Dokumentation leistet an dieser Stelle ebenfalls wertvolle Dienste.

Üben Sie Selbstkritik Wächst ein Projekt, werden Ihre Dateien und der Programmcode immer umfangreicher. Letztendlich funktioniert das Projekt genau nach Ihren Vorstellungen. Da jedoch im Laufe der Zeit immer wieder neuer Programmcode hinzugekommen ist beziehungsweise bestehender Code wesentlich verändert wurde, kann es sein, dass die Datei aus viel überflüssigem Müll-Code besteht. Durchforsten Sie Ihren eigenen Code und entkernen Sie diesen. Seien Sie dabei nicht allzu verliebt in Ihr Werk – Objektivität ist das Motto der Stunde! Natürlich sollten Sie nicht auf Biegen und Brechen Ihre Arbeit durchstöbern und Sachen löschen, die eigentlich gar nicht schaden. Nur wenn die entsprechenden Dateien nicht mehr zu handhaben sind, sollten Sie über ein Re-Design nachdenken. Denken Sie dabei jedoch immer an eine Datensicherung, damit Sie nach dem Re-Design immer noch eine Version in petto haben, die trotz aufgeblasenem Code immer noch funktioniert. Sie müssen nicht bis zum Ende Ihres Projektes warten, um in den Genuss der Vorteile der Entmüllungs-Technik zu kommen. Haben Sie beispielsweise einen Fehler entdeckt, speichern Sie diese Datei ab. Denken Sie, dass Sie eine Lösung für Ihren Fehler haben, wählen Sie aus dem Menü DATEI den Eintrag WIEDERHERSTELLEN aus (siehe Abbildung B.6).

Abbildung B.6: Wiederherstellen stellt Ihre OriginalDatei wieder her.

Ein weiterer Trick ist es, Lösungen offline zu erarbeiten. Dies bedeutet nichts anderes, als das Sie nicht jedes Feature zur Haupt-Datei hinzufügen, sondern speziell dafür eine neue Datei anlegen. Haben Sie eine Lösung, die funktioniert, können Sie den Code immer noch zur Original-Datei hinzufügen. So verfahren Sie auch im Fall von Fehlern, die Sie

463

Vertiefen der erworbenen Flash-Kenntnisse

somit nicht in der Original-Datei lösen. Haben Sie den Fehler gelöst, können Sie den sauberen Code ebenfalls in die Original-Datei kopieren. Sie erhalten so einen sauberen, gut funktionierenden Programmcode.

B.3

Man lernt niemals aus

Die Überschrift mag platt klingen, beinhaltet jedoch eine elementare Lebensweisheit. Mein Tipp als Lehrer und als Mensch: Lernen Sie immer, soviel Sie nur können. Aber verfallen Sie dabei nicht frustrierenden Perfekttionismus, indem Sie sich Ihre Ziele unerreichbar hoch stecken.

Software wird immer weiterentwickelt Es ist sehr wichtig, nur das zu lernen, was Sie auch wirklich benötigen. Flash 5 ist ein erstaunliches Produkt, aber es wird nicht die letzte Software sein, die Ihnen während Ihrer Laufbahn in die Hände fällt. Es ist wichtig zu erlernen, wie es Flash fertig bringt, das zu tun, was Sie wollen. Nur so erlernen Sie jedes Feature in Flash 5. Wenn Sie einmal die Schritte vergleichen, die notwendig waren, um eine ganz bestimmte Aufgabe mit einem Software-Produkt von vor fünf Jahren durchzuführen, werden Sie feststellen, um wie viel komplexer und komplizierter aktuelle Produkte sind, um genau dieselbe Aufgabe heute durchzuführen. Software wird immer komplexer und umfangreicher. Noch vor wenigen Jahren war es notwendig zu wissen, wie man mit Farbpaletten umgehen musste. Heutzutage können nur noch Profis mit Millionen darstellbarer Farben umgehen.

Auch die Praxis zählt Wenden Sie nicht nur die erlernte Theorie an, sondern stellen Sie sich reale Aufgaben, um eine Flash-Site oder aber auch nur Elemente dieser zu erstellen. Versuchen Sie dabei, Ihren Horizont zu erweitern, indem Sie sich Aufgaben stellen, die immer ein wenig über Ihren derzeitigen Fähigkeiten liegen. Nur auf diese Weise lernen Sie neue Aspekte von Flash kennen und vermehren Ihr Wissen, was letztendlich zu einer Leistungssteigerung im Umgang mit Flash führt. Reale Projekte zu verwirklichen ist ein sehr guter Weg, sich neues Wissen anzueignen. Nur unter dem Druck, ein Projekt zu verwirklichen, werden Sie Ihre Grenzen kennen lernen und diese letztendlich überwinden bzw. weiter nach oben verschieben. Ein anderer Weg, sein Wissen zu vertiefen ist es, andere Menschen die Aspekte zu lehren, die man gerade eben selbst erlernt hat. Teilen Sie Freunden und Bekannten Ihr Wissen mit und beobachten Sie, ob diese Ihre Erläuterungen auch verstanden haben.

464

Man lernt niemals aus

Einfache Beispiele und Aufgaben, die Sie immer wieder gebrauchen können Viele Aufgaben, die Sie im Rahmen dieses Buches kennen gelernt haben, lassen sich auch auf andere Software-Produkte anwenden. Sie werden sich immer wieder mit neuer Software oder neuen Versionen in Ihrer weiteren Karriere auseinandersetzen müssen. Sie sollten einige grundlegende Übungen versuchen, um sich mit den entsprechenden Programmen auseinanderzusetzen. Damit erreichen Sie einen einfachen Einstieg in die neue Software. Ich selbst habe, ehe ich bei Flash gelandet bin, mit Macromedias Authorware und anschließend mit Director gearbeitet und festgestellt, dass ich in all diesen Programmen sehr oft die gleichen Tätigkeiten vorgenommen habe. Führen Sie die folgenden Übungen durch, wenn Sie mit einem neuen Programm konfrontiert werden, um einen leichten Einstieg in diese neuen Produkte oder Updates zu bekommen. 쐽

Der springende Ball. Wenn es eine klassische Animation gibt, dann ist es diese. Sie können sich den ganzen Tag mit ihr beschäftigen – perfekt wird diese Animation niemals werden. Versuchen Sie zusätzliche Techniken, wie etwa dieser Animation hinzuzufügen ein Stauchen (Kapitel 21) (siehe Abbildung B.7). Näheres zu dem tanzenden Ball finden Sie in Kapitel 11.

Abbildung B.7: Das klassische Beispiel des springenden Balls mit Staucheffekt ist eine gute Übung zum Vertiefen des bereits Erlernten. 쐽

Es geht Auf und Ab. In diesem Beispiel erstellen Sie zwei Pfeiltasten. Eine zählt die angezeigte Nummer oder die Film-Instanz aufwärts, die andere Schaltfläche zählt herunter. Sie haben etwas Ähnliches bereits in Kapitel 15 kennen gelernt.

465

Vertiefen der erworbenen Flash-Kenntnisse

쐽

Hallo, Welt... Im Rahmen dieser Aufgabe wird der Anwender gebeten, seinen Namen einzugeben, und der Computer begrüßt den Anwender auf dem Bildschirm mit »Hallo, Phillip« (oder wen auch immer). Dieses Beispiel soll zeigen, wie Variablen gespeichert werden können. Wir haben es in Kapitel 15 besprochen.

쐽

Kreis, Linie, Quadrat. Die Idee hinter dieser Übung ist die Erstellung von drei Schaltflächen (mit den Bezeichnungen Kreis, Linie und Quadrat), die bei Betätigung genau diese geometrischen Figuren auf dem Bildschirm darstellen.

Aufgabe: Erstellen Sie die Übung Kreis, Linie, Quadrat 1. Zeichnen Sie einen großen Kasten, entfernen Sie die Füllfarbe und wählen Sie aus dem Menü EINFÜGEN den Menüeintrag IN SYMBOL KONVERTIEREN. Bezeichnen Sie das Symbol mit Inhalt und speichern Sie es mit der Option Filmsequenz ab. 2. Führen Sie einen Doppelklick auf die Instanz aus, um anschließend den Inhalt zu editieren. 3. Innerhalb der neuen Filmsequenz gehen Sie bitte zu Bild 4 und wählen Sie den Befehl BILD ((F5)) aus dem Menü EINFÜGEN. Erstellen Sie dann eine neue Ebene mit der Bezeichnung Grafiken. Fügen Sie bei Bild 2 ein leeres Schlüsselbild ((F6)) in die Ebene Grafiken ein und zeichnen Sie einen Kreis. Bei Bild 3 müssen Sie nun ein leeres Schlüsselbild ((F7)) erstellen und anschließend eine Linie zeichnen. Ist dies erledigt, ist es an der Zeit, das letzte Schlüsselbild bei Bild 4 der Ebene Grafiken einzufügen, um im Anschluss daran ein Quadrat zu zeichnen. Das Ergebnis sollte so ausschauen, wie aus Abbildung B.8 ersichtlich.

Abbildung B.8: Die Filmsequenz, die Sie erstellt haben, besteht aus drei Bildern mit den entsprechenden drei Figuren.

4. Im ersten Bild unseres Films müssen Sie nun eine Stop-Aktion einfügen (egal auf welcher Ebene). 5. Gehen Sie zurück zur Hauptszene und wählen Sie unsere Filmsequenz aus. Benutzen Sie das Instanz-Bedienfeld und geben Sie der Instanz den Namen derInhalt.

466

Das Beheben von Fehlern (Debugging)

6. Zeichnen Sie ein Rechteck. Markieren Sie das Rechteck und wählen Sie aus dem Menü EINFÜGEN den Eintrag IN SYMBOL KONVERTIEREN aus. Bezeichnen Sie das Rechteck mit Meine Schaltfläche und stellen Sie sicher, dass die Option SCHALTFLÄCHE beim Speichern aktiviert ist. 7. Kopieren und fügen Sie zwei weitere Instanzen von Meine Schaltfläche ein. Erstellen Sie nun Textblöcke für jede Schaltfläche mit den Bezeichnungen Kreis, Linie und Quadrat. 8. Markieren Sie die Schaltfläche für Kreis und fügen Sie eine evaluate-Aktion mit dem folgenden Argument ein: derInhalt.gotoAndStop(2). Beachten Sie dabei unbedingt die Schreibweise mit Groß- und Kleinbuchstaben. 9. Testen Sie den Film. Er sollte lediglich für den Bereich Kreis arbeiten. Fügen Sie nun der Schaltfläche LINIE ebenfalls eine evaluate-Aktion mit dem Argument derInhalt.gotoAndStop(3) hinzu. Der QUADRAT-Schaltfläche weisen Sie bitte derInhalt.gotoAndStop(4) zu. 10. Sie können die Benutzerfreundlichkeit des aktuellen Designs steigern, indem Sie die gerade aktive Schaltfläche besonders markieren. Dies zu erreichen, gibt es viele Wege. Am besten ist es jedoch, Sie zeichnen eine besondere Markierung für die entsprechende Schaltfläche in den Bildern 2, 3 und 4 der Filmsequenz Inhalt.

Abbildung B.9: Kreis, Linie und Quadrat sind klassische Übungen, um erlerntes Wissen zu vertiefen.

B.4

Das Beheben von Fehlern (Debugging)

Die Suche nach Fehlern und das Entfernen dieser kann zu einer langwierigen Arbeit werden. Wenn Sie sich lediglich Schritt für Schritt durch den von Ihnen erstellten Code hangeln, besteht die Gefahr, dass Sie Fehler nicht erkennen oder diese erneut machen. Glücklicherweise bietet Flash Features, die bei dem Prozess der Fehlersuche helfen.

467

Vertiefen der erworbenen Flash-Kenntnisse

Traditionelle Methoden Zusätzlich zu der so genannten Rohe-Gewalt-Methode der Schritt-für-Schritt-Suche nach Fehlern im Code gibt es zwei weitere Methoden, um Fehler zu finden. Stellen Sie sich vor, Sie hätten ein Script für eine Schaltfläche, Filmsequenz oder ein Bild, von dem Sie denken, dass es funktioniert. Sie können nun eine Trace-Aktion in Ihr Script einfügen, um festzustellen, ob es auch wirklich ausgeführt wird. Die folgende Aufgabe soll diese Vorgehensweise noch einmal aufzeigen.

Aufgabe: Benutzen Sie eine Trace-Aktion, um festzustellen, ob ein Script auch wirklich funktioniert! 1. Zeichnen Sie innerhalb einer neuen Filmsequenz einen Kreis und konvertieren Sie ihn in ein Symbol. Geben Sie dem Kreis die Bezeichnung Kreis und speichern Sie ihn mit der Option FILMSEQUENZ ab. Geben Sie der Instanz auf Ihrer Bühne den Namen ball. Benutzen Sie dazu das Bedienfeld Instanz. 2. Weisen Sie dem ersten Bild eine evaluate-Aktion ((Esc), (E), (V)) zu und geben Sie dann ball._x=_xmouse. 3. Testen Sie den Film. Sie erwarten, dass der Ball seine x-Eigenschaft verändert, solang Sie den Mauszeiger bewegen – es funktioniert aber nicht! 4. Gehen Sie zum ersten Bild zurück, fügen Sie eine Trace-Aktion mit der Bezeichnung bewegt im Meldungsfenster ein. Testen Sie den Film. Sie sollten nun ein Ausgabe-Popup-Fenster mit Ihrer Meldung von der Trace-Aktion erhalten. Leider folgt der Ball immer noch nicht der horizontalen Bewegung des Mauszeigers. 5. Fügen Sie nun ein zweites Bild bei Frame 2 ein. Wenn Sie jetzt den Film testen, sehen Sie im Ausgabe-Pop-up-Fenster den Ausdruck bewegt immer wieder erscheinen – und zwar in schneller Folge. Übrigens können Sie trace benutzen, um verschiedene Ausdrucke anzeigen zu lassen. Dies könnten beispielsweise trace-Nachrichten sein, die aus einer Kombination von Buchstaben und Zahlen bestehen. So zeigt trace("Die Maus befindet sich an der Position " + _xmouse) im Pop-up-Ausgabefenster Die Maus befindet sich an der Position 123,5 (oder wie auch immer Ihre aktuelle Mausposition ist). Stellen Sie sicher, dass im Dialogfenster BILDEIGENSCHAFTEN das Kontrollfeld AUSDRUCK aktiviert ist. Nur so werden auch die entsprechenden Ausdrucke im Pop-up-Fenster dargestellt (siehe Abbildung B.10).

468

Das Beheben von Fehlern (Debugging)

Abbildung B.10: Die trace-Aktionsnachricht kann aus einer Kombination von Buchstaben und Zahlen bestehen.

Das Benutzen des Debuggers Der in Flash integrierte Debugger ist ein professionelles Tool, um Fehlern in Ihrem Code auf die Schliche zu kommen. Sie haben nicht nur die Möglichkeit, Fehler zu suchen, sondern können den Flash-Film während seiner Laufzeit analysieren. Sie finden den Debugger im Menü FENSTER. Der Debugger funktioniert aber nur dann, wenn ein Flash-Film im Flash-Player läuft.

Aufgabe: Schauen Sie sich Ihren Flash-Film mit dem Debugger an! In dem folgenden Beispiel benutzen Sie den Debugger, um einen Film zu analysieren. 1. Wählen Sie aus dem Untermenü BEISPIELE des Menüs HILFE den Eintrag ZOOM aus. Klicken Sie dann mit Ihrer Maus auf das Menü STEUERUNG und den Eintrag SZENE TESTEN ((Strg)+(ª)+(¢)). Ich habe die Erfahrung gemacht, dass ich manchmal den

469

Vertiefen der erworbenen Flash-Kenntnisse

Flash-Player (nicht den Debugger) schließen muss, um anschließend zum Film zurückzukehren und SZENE TESTEN ein zweites mal aufrufen muss, ehe der Debugger richtig funktioniert. Listet Ihr Debugger nichts auf, wie aus Abbildung B.11 ersichtlich (linke Seite des Fensters), schließen Sie bitte die .swf-Datei und starten Sie den Debugger wie oben beschrieben erneut. Ihr Debugger sollte dann wie aus Abbildung B.11 (rechte Seite) ersichtlich ausschauen.

Abbildung B.11: Manchmal funktioniert der Debugger nicht korrekt. Starten Sie diesen dann erneut. Der Fehler dürfte nicht mehr auftreten.

2. Im oberen Teil des Debuggers sehen Sie alle Filmsequenzen, die in dieser Datei benutzt werden, und einen Bereich für den Hauptfilm. Dieser trägt in unserem Beispiel die Bezeichnung _level0. Für diesen Film finden Sie lediglich _level0 und den Clip _level0.target_item. Wählen Sie einen der beiden Einträge aus, um den aktuellen Status zu erfahren. 3. Klicken Sie auf _level0 und anschließend auf die Registerkarte Eigenschaften (siehe Abbildung B.12). Sie sehen sofort alle Eigenschaften des Hauptfilms. Sie können jedoch an dieser Stelle nur alle Eigenschaften ändern, die schwarz dargestellt sind. Klicken Sie einmal auf den Wert 100 neben _xscale und ändern Sie den Wert in 200 um. Nachdem Sie die (¢) betätigen, erscheint der Bildschirminhalt gedehnt. Geben Sie nun wieder den ursprünglichen Wert von 100 ein. 4. Klicken Sie auf _level0.target_item und setzen Sie die Eigenschaft _xscale auf 200. Sie werden feststellen, dass sich lediglich die Filmsequenz ändert. Geben Sie wieder den ursprünglichen Wert 100 ein. 5. Sie können nicht nur mit dem Debugger Eigenschaften ändern, sondern ebenfalls die Veränderung der Eigenschaften und Variablen während des Filmdurchlaufs beobachten. Positionieren Sie den Debugger so, dass Sie den Film und den Debugger gleichzeitig beobachten können. Beobachten Sie ganz genau die Eigenschaften zu _level0.target_item und scrollen Sie auf der Registerkarte EIGENSCHAFTEN zur Eigenschaft _x herunter. Beobachten Sie den Wert während der Film abgespielt wird.

470

Das Beheben von Fehlern (Debugging)

Abbildung B.12: Wenn Sie eine Filmsequenz oder Zeitlinie ausgewählt haben, zeigt die Registerkarte Eigenschaften die entsprechenden Eigenschaften an.

6. Eigenschaften sind elementare Bestandteile von Flash. Es gibt sehr viele Eigenschaften, die Sie alle über den Debugger erreichen können. Sie können natürlich auch Ihre eigenen Variablen erstellen und diese beobachten. Klicken Sie dazu auf _level0 und begeben Sie sich dann zur Registerkarte Variablen. Hier sehen Sie die Variablen, welche der Autor für diesen Film erstellt hat (siehe Abbildung B.13).

Abbildung B.13: Die Registerkarte Variablen zeigt alle Variablen an, die der Autor des Films erstellt hat.

Wie auch Eigenschaften können lediglich Variablen mit schwarzer Schriftfarbe editiert werden.

471

Vertiefen der erworbenen Flash-Kenntnisse

7. Da jede Variable innerhalb einer Zeitlinie einmalig ist, kann es notwendig sein, zuerst einmal die entsprechende Instanz anzuwählen, um alle Variablen dieser Instanz anzuzeigen. Wollen Sie Variablen überwachen, so markieren Sie diese und wählen aus dem Kontextmenü zu dieser Variablen Überwachen aus. Vor der entsprechenden Variablen erscheint ein blauer Punkt. Zudem finden Sie sämtliche Variablen, die einer Überwachung unterliegen, innerhalb der Registerkarte Überwachen. Der Debugger ist ein sehr interessantes und hilfreiches Tool. Sie haben die Möglichkeit, Eigenschaften und Variablen zu überwachen und diese zu verändern. Wirklich erstaunlich ist die Tatsache, dass Sie den Debugger auch für Dateien benutzen können, die bereits hochgeladen wurden und aktiv sind. Rufen Sie dazu aus dem Menü DATEI den Menüeintrag EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN auf. Klicken Sie auf die Registerkarte FLASH und aktivieren Sie das Kontrollkästchen FEHLERSUCHE ZULASSEN. Optional können Sie im daraufhin aktiv geschalteten Eingabefeld Passwort ein Kennwort für den Zugriff eingeben. Im nächsten Schritt rufen Sie den DEBUGGER aus dem Menü FENSTER auf und klicken anschließend auf den schwarzen Pfeil am rechten oberen Fensterrand. Aktivieren Sie dann den Menüeintrag REMOTE-FEHLERSUCHE AKTIVIEREN (siehe Abbildung B.14). Während nun Ihr Film abläuft, können Sie per rechter Maustaste den Debugger auswählen.

Abbildung B.14: Der Debugger kann auch auf aktiv ablaufende Filme angewandt werden.

472

Zusammenfassung

B.5

Zusammenfassung

Es mag etwas merkwürdig anmuten, dass wir uns am Ende des Buches damit beschäftigen, wie Sie Flash erlernen können. Ziel sollte sein, Sie nach Beendigung dieses Buches zu motivieren, nicht mit dem Lernen in Sachen Flash aufzuhören, sondern sich tiefer in die Materie Flash einzuarbeiten. In diesem Kapitel haben Sie erlernt, welche Wege es gibt, Ihr Flash-Wissen zu vermehren. Beschäftigen Sie sich mit den Beispiel-Dateien, die in Flash enthalten sind. Setzen Sie sich kleine Ziele und versuchen Sie nicht, eine ganze Flash-Anwendung zu verstehen, sondern nur einzelne Bestandteile dieser. Das Wissen, wie man Probleme erkennt und löst, ist viel wichtiger, als unzählige Versuche zu starten, ein Problem mittels Probierens zu lösen. Sie haben ebenfalls den Debugger als Werkzeug kennen gelernt, um den Status Ihres Films und aller darin enthaltenen Variablen zu überwachen.

B.6

Workshop

F&A F

Ich habe den gesamten Inhalt einer Flash-Beispiel-Datei in meine eigene Datei kopiert – leider funktioniert es nicht. Was könnte nicht stimmen? A

F

Meistens liegt es daran, dass Sie nicht alle Attribute der Originalanwendung kopiert haben. Vor allem scheint es wohl an der Tatsache zu haken, dass der Beispielfilm Daten von einer Datenbank empfängt und auch dahin sendet, zu der Sie in Ihrem neuen Film keine Verbindung haben. Oder der Film versucht einen Ladefilm zu laden, der nicht existiert. Schauen Sie sich den Code einmal genau an und versuchen Sie den Standort der verschiedenen Komponenten herauszufinden.

Wenn ich eine Gesamtaufgabe in kleine Schritte aufteile, ist es dabei wirklich notwendig, die so klein zu halten? A

Je kleiner, desto besser! Denken Sie immer daran, dass Sie als Mensch immer nur eine Sache erledigen können. Auch große Projekte müssen Sie Schritt für Schritt durchführen. Je kleiner dabei die Schritte sind, desto strukturierter und letztendlich erfolgreicher wird Ihre Arbeit. Auch ein Marathonläufer kann nicht zehn Schritte auf einmal machen – er kommt auch nur Schritt für Schritt zum Ziel.

473

Vertiefen der erworbenen Flash-Kenntnisse

Übungsaufgaben 1. Um sicherzustellen, dass keinerlei Fehler in Ihrem Film existieren, sollten Sie immer den Debugger zu Rate ziehen, bevor Sie die Seite veröffentlichen. a. Das ist falsch. Sie müssen den Debugger nach jeder Änderung des Films benutzen, um Fehler zu vermeiden. b. Das ist richtig. Solang Sie keinerlei Änderungen nach dem Debugger-Lauf machen, ist Ihr Film frei von Fehlern. c. Das ist falsch. Der Debugger schützt vor keinerlei Fehlern. Mit ihm lassen sich nur Eigenschaften und Variablen betrachten. 2. Es ist empfehlenswert, im Rahmen eines Projektes immer nur eine Aufgabe durchzuführen, um den Erfolg der Arbeit besser überprüfen zu können. a. Das ist richtig. Es gibt natürlich noch andere Gründe, aber prinzipiell sollte man immer erst einen ganz bestimmten Teil des Gesamtprojektes ausprobieren, ob dieser auch richtig funktioniert. b. Das ist falsch. Die Arbeit an einem Teil der Gesamtaufgabe zu einem bestimmten Zeitpunkt macht die entsprechende Datei wesentlich kleiner in Ihrem Umfang und das ist der einzige Grund, weshalb auf die Art und Weise zu arbeiten ist. c. Das ist richtig. Obwohl dies nur ein Grund ist, liegt der Hauptgrund dieser Vorgehensweise in der Tatsache begründet, dass der Flash-Film wesentlich schneller beim Endanwender abläuft. 3. Das Debugging einer Flash-Anwendung, die online ist, stellt eine gute Möglichkeit dar, seine Flash-Fähigkeiten zu vertiefen. a. Das könnte sein, aber nur jene Dateien sind mit dem Debugger online anzuschauen, bei denen das der Programmierer auch gestattet hat. b. Das ist falsch. Es ist illegal, per Debugger in fremder Leute Flash-Site zu schnüffeln. c. Das ist richtig. Das erste, was Sie tun sollten ist, festzustellen, wie Sie durch anderer Leute Dateien stöbern können.

474

Zusatzübung

B.7

Zusatzübung

Im Folgenden ist ein besserer Weg aufgezeigt, wie ein Film einer Mausbewegung folgt. Fügen Sie im ersten Bild Ihrer Filmsequenz eine Mouse-hide-Aktion ein. Diese Aktion verbirgt den Mauszeiger des Anwenders. Erstellen Sie eine Filmsequenz, die als neuer Cursor agieren soll. Wählen Sie die Filmsequenz aus und öffnen Sie das Bedienfeld Aktion. Markieren Sie nun eine evaluate-Aktion und geben Sie das Argument _x=_root._xmouse ein. Fügen Sie im Anschluss daran eine weitere evaluate-Aktion mit der Bezeichnung _y=_root._ymouse ein. Testen Sie den Film und Sie werden feststellen, dass das Ganze etwas ruckelig abläuft. Dieses Problem können Sie lösen, ohne die Frame-Rate zu erhöhen. Behalten Sie die aktuell eingestellte Frame-Rate von 12 bei. Kehren Sie zu den Aktionen zurück und fügen Sie eine weitere evaluate-Aktion am Ende mit dem Argument updateAfterEvent() hinzu. Diese Aktion erneuert den Bildschirminhalt immer dann, wenn diese aufgerufen wird.

475

Das Veröffentlichen Ihrer Flash-Anwendung

h n A

C g an

Das Veröffentlichen Ihrer Flash-Anwendung

Der letzte Schritt einer Flash-Produktion ist immer das Veröffentlichen, so dass sich die Internetgemeinde an Ihren Flash-Arbeiten erfreuen kann. In Kapitel 17 haben Sie bereits die Grundlagen kennen gelernt, die eine Veröffentlichung im Internet betreffen. Es gibt jedoch noch eine ganze Menge mehr, was Sie beachten müssen, wenn Sie an die Öffentlichkeit treten. Zusätzlich zum Export einer Flash-Datei in eine HTML-Seite haben Sie die Möglichkeit, unterschiedliche Medientypen in die verschiedenen Media-Player zu exportieren (RealPlayer, QuickTime etc.). Zudem gibt es unterschiedliche Formate wie etwa GIF oder JPG, die ebenfalls diskussionswürdig sind. In diesem Kapitel erlernen Sie das Folgende: 쐽

Sie erfahren alles über die Einstellungen, die notwendig sind, um eine Anwendung zu publizieren.

쐽

Sie benutzen Templates, um verschiedene Versionen des ursprünglichen Datenformats zu veröffentlichen.

쐽

Sie werden unterschiedliche Medientypen wie etwa QuickTime-Video benutzen.

C.1 Wie publiziert man eine Seite? Wie Sie sich vielleicht noch aus Kapitel 17 erinnern können, kann man auf relativ einfache Weise einen Publizierungsvorgang starten. Wählen Sie einfach aus dem Menü DATEI den Eintrag VERÖFFENTLICHEN. Die Praxis sieht jedoch ein wenig anders aus. Sie sollten zuerst Ihre Dateien sichern und dann Schritt für Schritt durch alle Veröffentlichungsprozesse gehen. Im Folgenden lernen Sie ein Szenario kennen, mit dem Sie eine Datei publizieren können.

Aufgabe: Setzen Sie die Publizierungseinstellungen und veröffentlichen Sie anschließend einen Film! 1. Öffnen Sie einen Film, den Sie bereits in der Vergangenheit erstellt haben, oder kreieren Sie auf die Schnelle eine neue Animation. Stellen Sie sicher, dass sich auf dem Bildschirm auch etwas tut – vielleicht ist noch ein Tween notwendig, um etwas Leben auf die Bühne zu bringen. 2. Wählen Sie aus dem Menü DATEI den Menüeintrag SPEICHERN UNTER und speichern Sie den Film in einem neuen Ordner, der keinerlei Daten enthält. 3. Begeben Sie sich dann zum Menü DATEI und klicken Sie auf den Menüeintrag EINSTELLUNGEN FÜR VERÖFFENTLICHEN. Sämtliche Änderungen, die Sie im Dialogfenster EINSTELLUNGEN FÜR VERÖFFENTLICHEN vornehmen, werden mit der Datei abgespeichert.

478

Wie publiziert man eine Seite?

4. Klicken Sie auf die Registerkarte FORMATE. Hier können Sie jene Formate definieren, in welche die Datei exportiert werden kann. Für jedes Format, das Sie auswählen, erscheint eine zusätzliche Registerkarte mit der entsprechenden Bezeichnung (siehe Abbildung C.1). Die Optionen werden Sie im Rahmen dieses Kapitels noch eingehender kennen lernen. Zum jetzigen Zeitpunkt wählen Sie bitte FLASH, HTML und GIF. Da das Kontrollkästchen STANDARDNAMEN AKTIVIEREN aktiviert ist, haben sämtliche Dateien denselben Namen. Nur die Dateiendung variiert. Sie können die Dateinamen ändern, für unsere Zwecke ist es jedoch erst einmal besser, auf die Standardbezeichnungen zurückzugreifen.

Abbildung C.1: Die Registerkarte Format gestattet die Einstellung des entsprechenden Exportformates.

5. Klicken Sie auf die Registerkarte FLASH, um diese in den Vordergrund zu holen. Werfen Sie einmal einen kurzen Blick auf das Pull-down-Fenster mit der Bezeichnung VERSION. Welche Einstellung Sie an dieser Stelle vornehmen, ist Ihre subjektive Entscheidung. Im Rahmen unserer Übungsaufgabe stellen wir uns einfach vor, dass Ihr Film für einen Anwender funktionieren soll, der in seinem Browser ein Flash-4-PlugIn hat – oder aber auch eine spätere Version. Ändern Sie die Version in Flash 4, wie aus Abbildung C.2 ersichtlich. 6. Aktivieren Sie die Registerkarte HTML. Hier treffen Sie Einstellungen zum HTMLCode, den Flash erstellt. Wählen Sie aus der Drop-down-Liste Vorlage den Eintrag Banner 4 hinzufügen. Diese Einstellung gewährleistet, dass der Flash-Film nur gespielt wird, wenn der Endanwender auch den Flash-4-Player installiert hat. Ist dies nicht der Fall, sieht er lediglich eine GIF-Version des Films. Sie können Ihre eigenen Vorlagen erstellen, wie Sie später erfahren werden.

479

Das Veröffentlichen Ihrer Flash-Anwendung

Abbildung C.2: Sie können sicherstellen, dass auch ältere Flash-Player den Film abspielen können, wenn Sie unter Version die entsprechende Version einstellen.

7. Wählen Sie im Auswahlfeld Größe den Eintrag Prozent aus und geben Sie unter Höhe und Breite jeweils 100 ein. Sie haben jederzeit die Möglichkeit, diese Änderungen neu zu definieren. Stellen Sie anschließend sicher, dass die Kontrollfelder WIEDERHOLUNG und MENÜ ANZEIGEN aktiviert sind. 8. Klicken Sie nun auf die Registerkarte mit der Bezeichnung GIF, um die Einstellungen GIF betreffend tätigen zu können. Hier gibt es einige wenige Dinge, die Ihrer Aufmerksamkeit nicht entfallen dürfen. So zum Beispiel das GIF, welches Flash exportieren soll, darf nur eine bestimmte Auflösung besitzen, da GIFs nicht in dem Maße skalieren, wie es Flash tut. Wollen Sie etwa ein animiertes GIF exportieren, wählen Sie auf dieser Registerkarte ANIMIERT aus. Der Rest aller verfügbarer Optionen bezieht sich mehr oder weniger darauf, wie das Bild erstellt wurde und spielt erst einmal eine untergeordnete Rolle. GIFs haben meistens 256 Farben und in wenigen Fällen ein paar mehr. Flash weiß genau, wie es mit der Farbpalette von GIFs umgehen muss. Jede Option, die Sie auf dieser Registerkarte einstellen können, hat ein bestimmtes Ereignis zur Folge. Dieses resultiert vor allem aus der Natur der entsprechenden Grafik – mit all seinen Vor- und Nachteilen. 9. Nun da Sie schon einmal mit allen Registerkarten Bekanntschaft geschlossen haben (für die Formate, die Sie selektiert haben), klicken Sie abschließend auf OK. Wählen Sie nun aus dem Menü DATEI den Menüeintrag VERÖFFENTLICHEN. Es sieht so aus, als würde nichts passieren, es wurden jedoch alle entsprechenden Dateien in den Export-Ordner kopiert, wohin Sie auch den ursprünglichen Film kopiert haben. Öffnen

480

Wie publiziert man eine Seite?

Sie den Ordner und führen Sie einen Doppelklick auf die HTML-Datei aus. Wenn Sie über einen Flash-4-Plug-In für Ihren Browser verfügen, sollten Sie den Flash-Film auch starten können. Wenn Sie Flash 5 benutzen und trotzdem im Flash-4-Format exportieren wollen, denken Sie bitte daran, die Einstellungen für Veröffentlichungen zu verändern, bevor Sie mit dem Export bzw. der Veröffentlichung beginnen. In diesem Fall werden alle Flash-5-Features in gelber Schrift dargestellt (siehe Abbildung C.3). Somit können Sie schnell erkennen, welche Features Sie meiden sollten, da Sie der Endanwender nicht anschauen und benutzen kann.

Abbildung C.3: Haben Sie sich entschieden, eine ältere Flash-Version zu exportieren, werden alle nicht verfügbaren Aktionen gelb dargestellt.

Sie sehen bereits an dieser Stelle, dass es eine Menge Arbeit ist, Schritt für Schritt jedes Detail zu berücksichtigen, ob und wie es publiziert werden soll. Noch eines am Rande: Der Menüeintrag VORSCHAU FÜR VERÖFFENTLICHUNGEN aus dem Menü DATEI hat das gleiche Resultat zur Folge wie der Menüeintrag VERÖFFENTLICHEN mit der Ausnahme, dass kein Exportvorgang stattfindet. In der vorangegangenen Aufgabe sind Sie Schritt für Schritt durch jede einzelne Registerkarte gegangen und haben dort die Änderungen vorgenommen, die notwendig waren. Das ist die typische Vorgehensweise. Hinter der Aufgabe, die Sie soeben durchgeführt haben, verbergen sich einige interessante Dinge, die wir einmal etwas genauer unter die Lupe nehmen wollen. Das Template BANNER 4 HINZUFÜGEN erstellt eine ziemlich komplizierte HTML-Seite. Hat der Endanwender einen Flash-4-Player in seinem Webbrowser integriert, kann er den Flash-Film

481

Das Veröffentlichen Ihrer Flash-Anwendung

ohne Probleme sehen. Hat er diesen nicht, sieht er lediglich eine GIF-Grafik. Öffnen Sie das HTML-Dokument in einem Texteditor, sehen Sie zwei Referenzen, die sich auf die Flash-Version 4 beziehen (eine für den Netscape Communicator und eine für den Microsoft Internet Explorer). Am Ende der Zeile 17 sollten Sie S>=4 und in Zeile 23 um ShockwaveFlash.ShockwaveFlash.4 vorfinden. Sie können simulieren, was Anwender ohne das entsprechende Flash-Plug-In sehen, wenn Sie beide Zahlen von 4 in 6 ändern. Sie setzen damit die Einstellungen für Flash 6, das es ja noch nicht gibt und demnach im Browser auch nicht angeschaut werden kann. Sie werden dann in Ihrem Browser ebenfalls das entsprechende GIF sehen. Obwohl Sie sehen, wie ein Anwender eine Flash-Anwendung ohne ein entsprechendes Plug-In sieht, handelt es sich dabei nur um eine Simulation. Eigentlich müssten Sie den Flash-Player deinstallieren, um nachzuspielen, welche Erfahrungen der Anwender ohne ein entsprechendes Plug-In macht. Wichtig ist an dieser Stelle die Tatsache, dass es Templates gibt, die den Flash-Player automatisch installieren. Überprüfen Sie zuerst die korrekte Deinstallation des Players! Weiterhin ist vorstellbar, die GIF-Grafik mit einem Hyperlink zu versehen. Fügen Sie dazu eine neue Schaltfläche innerhalb einer neuen Ebene des Filmes ein und weisen Sie der neuen Schaltfläche die Get URL-Aktion hinzu. Wenn der Anwender nun auf die Grafik stößt, weil er keinen geeigneten Flash-Player hat, kann er das GIF anwählen und eine Aktion ausführen, die Sie ebenfalls definieren können.

Aufgabe: Gestalten Sie ein Template individuell! 1. Erstellen Sie einen Film, der eine Animation einer Filmsequenz-Instanz beinhaltet (ein Kasten, der sich von der linken oberen Ecke der Bühne zur unteren linken Ecke bewegt). Benutzen Sie das Bedienfeld Ausrichten, um den Kasten in beiden Frames am unteren Rand der Bühne zu positionieren. 2. Wählen Sie nun aus dem Menü DATEI den Menüeintrag EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN und aktivieren Sie die Kontrollkästchen für HTML und FLASH. Klicken Sie auf der Registerkarte HTML auf die Vorlage NUR FLASH (STANDARD). Führen Sie abschließend einen Mausklick auf OK aus. 3. Betätigen Sie dann (F12), um eine Vorschau für Veröffentlichungen zu erhalten. Vielleicht haben Sie bemerkt, dass der Kasten nicht den unteren linken Rand des Fensters erreicht. 4. Schließen Sie den Browser. Speichern Sie den Film und schließen Sie Flash. Auf Ihrer Festplatte finden Sie unterhalb des Flash-5-Ordners ein Unterverzeichnis mit der Bezeichnung HTML. Erstellen Sie hier eine Kopie der Datei Default.html.

482

Optionen für das Publizieren

5. Benennen Sie nun die Kopie dieser Datei in myDefault.html um und öffnen Sie diese im Notepad von Windows. 6. Sie müssen die erste Zeile des Programmcodes von $TTFlash Only(Default) in $TTNo Padding ändern. Diese Änderung bewirkt das Umbenennen des Templates in No Padding. 7. Gehen Sie nun bitte zur neunten Zeile und ändern Sie die Zeile von . Diese Änderung bewirkt, dass alle Ränder zur Größe von 0 Bildpunkten geändert werden. 8. Speichern und schließen Sie die Datei. Starten Sie Flash und öffnen Sie den Film, welchen Sie gerade erstellt haben. Wählen Sie auf der Registerkarte die Vorlage aus, die wir soeben erstellt haben (No Padding). Klicken Sie auf OK. 9. Betätigen Sie (F12). Sie sehen eine Voransicht des Films, wie Sie sein sollte.

C.2 Optionen für das Publizieren Sie können mit den Optionen für das Publizieren spielen. Es gibt keine prinzipiellen Muss-Einstellungen – Sie können alles order gar nichts einstellen.

Die Frage nach dem Medientyp Der Vergleich der verschiedenen Medientypen auf der Registerkarte FORMATE des Bedienfeldes Einstellungen für Veröffentlichungen ist eigentlich unmöglich -Sie würden Äpfel mit Birnen vergleichen. Sie können sowohl eine JPG-Grafik als auch einen QuickTimeFilm exportieren, wobei es sich beim ersten um ein statisches Bild und beim zweiten um ein digitales Video handelt. Aus diesem Grund fällt ein Vergleich sämtlicher Medienformate sehr schwer – sie sind alle zu unterschiedlich. Lediglich JPG und PNG könnte man vergleichen, da es sich bei beiden um statische Bildformate handelt. Da es sehr schwer ist, die einzelnen Formate miteinander zu vergleichen, werden wir sie im Folgenden einmal näher kennen lernen.

483

Das Veröffentlichen Ihrer Flash-Anwendung

Flash (.swf) Diesem Format werden Sie bei Ihrer Arbeit mit Flash stets über den Weg laufen. Sie finden einige interessante Optionen auf der Registerkarte FLASH (siehe Abbildung C.4). Hinter der Option LADEREIHENFOLGE verbirgt sich die Reihenfolge, in der die Ebenen des Flash-Films während eines Downloads erscheinen. Wenn Sie den Eintrag Nach unten aktivieren, werden die untersten Ebenen für den Anwender zuerst während des Downloads sichtbar. Das Kontrollfeld GRÖSSENBERICHT ERSTELLEN exportier bei Aktivierung eine Text-Datei, welche dieselben Informationen enthält, die Sie bereits im Kapitel 20 beim Bandbreiten-Profiler kennen gelernt haben. Wenn Sie einen Film testen, sollten Sie das Kontrollkästchen TRACE-AKTIONEN ÜBERGEHEN deaktivieren, damit Sie das Popup-Fenster erhalten, in dem Sie alle Aktionen einsehen können. Das Fenster erscheint nur innerhalb von Flash und nicht im Browser des Endanwenders. Vor Import schützen verhindert, dass Anwender die .swf-Datei in ihre eigenen Flash-Dateien laden können. Es wird nur wenige Anwender geben, die eine Flash-Anwendung Bild für Bild lokal anschauen, da dies eine Menge Arbeit mit sich bringt. Zudem kann der entsprechende Anwender nicht das Action-Script herunterladen und somit mit dem Flash-Film fast nichts anfangen.

Abbildung C.4: Die Registerkarte FLASH enthält alle Exportoptionen zum Veröffentlichen eines Flash-Films.

Die voreingestellte Kompressionsrate für Rastergrafiken und Audio-Dateien (wie in Kapitel 20 besprochen) kann ebenfalls editiert werden.

484

Optionen für das Publizieren

Sehr wichtig ist die Frage, in welcher Flash-Version Sie Ihren Film veröffentlichen wollen. Diese Entscheidung sollten Sie schon sehr früh treffen. Entsprechende Einstellungen tätigen Sie unter Version. Sie können Ihre Arbeit mit Flash 5 so exportieren, dass Sie auch in einem Flash-4-Player abgespielt werden kann. Seien Sie sich jedoch bewusst, dass einige neue Flash-5-Features dann allerdings nicht zur Verfügung stehen. Verzichten Sie auf die Features, steht einem Abspielvorgang in einem Flash-4-Player nichts im Wege. Haben Sie sich für Flash 4 entschieden, sollten Sie den Film vorab auf einem Flash-4-Player ausgiebig testen. Eine Liste aller nicht unterstützten Funktionen wird gelb dargestellt (siehe Abbildung C.3).

HTML Obwohl wir die Registerkarte HTML schon mehrfach besprochen haben, finden Sie hier einige zusätzliche Einstellungsmöglichkeiten, von denen Sie profitieren können (siehe Abbildung C.5). Sämtliche Einstellungen innerhalb dieser Registerkarte beziehen sich nur auf die HTML-Datei und nicht auf Flash. Sie können die HTML-Datei in jedem beliebigen Texteditor öffnen und entsprechende Änderungen vornehmen.

Abbildung C.5: Die Registerkarte HTML beinhaltet Einstellungsmöglichkeiten, die nur die HTML-Datei betreffen.

Im Normalfall kann der Anwender einen rechten Mausklick auf den Flash-Film ausführen, um ein Kontextmenü zu erhalten, wie es in Abbildung C.6 zu sehen ist. Eine minimierte Version dieses Menüs ist verfügbar, wenn Sie das Kontrollkästchen MENÜ ANZEIGEN deaktivieren. Das Menü wurde nicht entfernt, Flash hat es nur verkleinert. DEBUGGER ist dabei nur bei jenen Anwendern aktiv, die Flash installiert haben.

485

Das Veröffentlichen Ihrer Flash-Anwendung

Abbildung C.6: Die reduzierte Version des Kontextmenüs zu einem Flash-Film

Das Kontrollkästchen GERÄTESCHRIFTART sorgt bei Aktivierung dafür, dass bestimmte Schriftarten auf den gesamten Flash-Film angewandt werden. In der Praxis bedeutet dies, das Flash den Standard-Font des Anwenders benutzt und nicht den im Flash-Film definierten. Dies hat den Vorteil, dass die Flash-Datei sehr viel kleiner ausfällt. Für größere Texte kann diese Option jedoch nicht immer die qualitativ beste Möglichkeit darstellen (siehe Abbildung C.7). Für kleinere Texte ist diese Option sinnvoll und hilfreich. In Abbildung C.7 sehen Sie einen kleinen Text, bei dem diese Option nicht aktiviert ist. Sie können diese Option individuell für einzelne Textblöcke setzen.

Abbildung C.7: Für größere Schriftarten ist die Option Geräteschriftart nicht zu empfehlen.

Unter Windows können Flash-Filme mittels des Internet Explorers ab der Version 4 angeschaut werden. Obwohl viele Anwender diesen Browser einsetzen, gibt es auch Anwender anderer Betriebssysteme und Browser. Damit auch diese in den Genuss von Flash kommen, können Sie unter Fenstermodus die beiden Optionen UNDURCHSICHTIG OHNE FENSTER und DURCHSICHTIG OHNE FENSTER aktivieren. Spielen Sie ein bisschen mit diesen Optionen, um ein Gefühl dafür zu bekommen. Zu guter Letzt bleibt noch das Kontrollkästchen WARNMELDUNGEN ANZEIGEN übrig. Dieses sollten Sie stets aktivieren, da es mittels Fehlermeldungen Inkompatibilitäten aufzeigt.

486

Optionen für das Publizieren

GIF, JPG und PNG Mit Ausnahme von GIF handelt es sich bei allen in Flash integrierten Grafikformaten um statische Bildformate. Alle drei Grafikformate haben ihre eigenen Eigenschaften. GIF verfügt im Allgemeinen über 256 Farben und ist für die meisten geometrischen Figuren sehr gut geeignet. JPG findet vor allem Einsatz, wenn es sich um fotorealistische Bilder mit einer hohen Farbanzahl handelt. Zudem verfügt JPG über sehr gute Komprimierungsmechanismen, ohne dabei allzu viel Qualitätsverlust zu erzeugen. PNG ist ein qualitativ sehr hochwertiges Format, das eine ganze Reihe zusätzlicher Informationen beinhaltet. PNG ist jedoch kein Web-Standard. Trotzdem ist PNG eine gute Wahl – erwarten Sie jedoch keine niedrige Dateigröße. Sehr häufig finden JPG und GIF Anwendung, wenn Sie Ihre FlashSite um Grafiken bereichern wollen.

Abbildung C.8: Wenn man ein Bild mit #static bezeichnet, wird Flash dieses als Bild (anstelle von Bild 1) dazu verwenden, um ein statisches Bild abzuspeichern.

PNG ist ein gutes Format, wenn es um große Dateien geht. Leider unterstützen Browser diesen Grafiktyp nicht wirklich. Trotzdem wartet dieses Format mit einigen Vorteilen auf. Sie können natürlich PNG-Dateien importieren, wie Sie dies bereits in Kapitel 3 kennen gelernt haben. Hier aber sprechen wir über den Export von Daten und das ist ein anderer Sachverhalt. Wollen Sie die höchste Grafikqualität exportieren, müssen Sie PNG wählen – eine andere Wahl haben Sie nicht. Dafür gibt es mehrere Gründe. So verfügen GIFs, die exportiert werden sollen, über umfangreiche Optionen, auf die der Anwender zurückgreifen und Einstellungen treffen kann. Haben Sie Veränderungen an einem GIF vorgenommen, müssen Sie dieses erst einmal publizieren, um die Veränderungen sehen zu können – eine unter Umständen relativ mühsame Methode, wenn sich Fehler eingeschlichen

487

Das Veröffentlichen Ihrer Flash-Anwendung

haben. Dann müssen Sie immer wieder von vorn beginnen (Grafik erstellen, publizieren, anschauen). Mit Macromedia Fireworks etwa können Sie die Ausgabeoptionen während der Darstellung ändern – Flash bietet diese Möglichkeit nicht. Es gibt jedoch dazu einen kleinen Trick: Exportieren Sie das GIF in Form einer 24-Bit-PNG-Datei (siehe Abbildung C.9). Öffnen Sie dann das entsprechende PNG-Bild in einem anderen Grafikprogramm und exportieren Sie es anschließend wieder als GIF-Datei.

Abbildung C.9: Der Export einer PNG-Datei bietet Ihnen eine wesentlich bessere Qualität als GIFs.

Nur GIF besitzt die Option mit der Bezeichnung ANIMIERT (siehe Abbildung C.10). Sie haben mehrere Optionen, wenn es darum geht, ein animiertes GIF zu erstellen. Die meisten erklären sich von selbst. Diese Option trifft nur für die Bilder zu, denen Sie diese Eigenschaften auch zuweisen – dabei ist nicht der ganze Film betroffen. Weisen Sie etwa dem ersten und dem letzten Bild diese Option zu, wird Flash lediglich das erste und das letzte Bild Ihres Filmes benutzen. Um dies zu korrigieren, müssen Sie das Bild, welches Sie zuerst benutzen wollen mit der Bezeichnung #first und das letzte Bild mit #last versehen.

Windows- und Macintosh-Projektor Um eine Flash-Datei abspielen zu können, benötigt der Anwender einen Flash-Player. Im Rahmen der Installation des Flash-Programms wird auch der Flash-Player installiert. Indem Sie einen Doppelklick auf eine Flash-Datei ausführen, starten Sie den Flash-Player. Der Anwender vor seinem Rechner zu Hause jedoch muss den Flash-Player separat installieren, wenn er mit seinem Browser Flash-Filme abspielen will.

488

Optionen für das Publizieren

Abbildung C.10: GIF verfügt über die Option Animiert, um diese Grafik im Rahmen einer Image-Map zu verwenden.

Eine andere Alternative stellt der Projektor dar. Stellen Sie sich einen Projektor als eine Art modifizierten Flash-Player vor, der jedoch nur in der Lage ist, einen Flash-Film abzuspielen, ohne den Flash-Player zu benötigen. Der Anwender benötigt dann keinen FlashPlayer, sondern kann die entsprechende Flash-Datei auch ohne Player anschauen. Starten Sie dazu den Flash-Player und öffnen Sie einen Flash-Film. Rufen Sie dann aus dem Menü DATEI den Menüeintrag PROJEKTOR ERSTELLEN auf. Geben Sie der Datei einen Namen und speichern Sie diese ab. Das ist alles. Der Flash-Player generiert eine selbst ablaufende .exe-Datei, die sehr viel größer ist als der Originalfilm. Dies ist logisch, da noch zusätzliche Routinen zum Abspielen benötigt werden – es fehlt ja bei der Zielperson ein Flash-Player. Der Projektor läuft nur auf der Plattform (Windows oder Macintosh), auf der er erstellt wurde. Um einen Projektor für eine Plattform zu erstellen, über die Sie im Moment nicht verfügen und die nur die Zielperson hat, müssen Sie lediglich die entsprechenden Kontrollkästchen auf der Registerkarte FORMATE von EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN markieren (siehe Abbildung C.11). Projektoren verwandeln Flash-Anwendungen in selbst ablaufende Demonstrationen. Sie können somit Präsentationen auf Flash-Basis einem Publikum vorführen und Flash dazu verwenden, Dias zu erstellen. Natürlich können Sie alle Funktionen und Aktionen Ihrem Projektor hinzufügen, wie Sie es auch aus Flash gewohnt sind. Sehr gut dafür geeignet ist die Aktion FSCommand. Die dafür bereitgestellten Parameter beinhalten zum Beispiel die Darstellung im Vollbildmodus. Es gibt jedoch noch eine Vielzahl weiterer Parameter (siehe Abbildung C.12). So können Sie beispielsweise eine Aktion fscommand

489

Das Veröffentlichen Ihrer Flash-Anwendung

("fullscreen","true") beim ersten Bild erstellen, damit der Projektor den ganzen Bild-

schirm nutzt. Im letzten Bild können Sie dann eine Schaltfläche platzieren – fscommand("quit") – um einen Ausgang zu markieren.

Abbildung C.11: Projektoren sind für Windows- und MacintoshPlattformen verfügbar.

Abbildung C.12: Die Aktion FSCommand beinhaltet viele Optionen, die den Projektor betreffen.

490

Optionen für das Publizieren

Unter Verwendung des Projektors können Sie auch komplette, komplexe Websites auf CD brennen, um diese als Arbeitsproben Kunden zuzusenden.

QuickTime und RealPlayer Die beiden Optionen QUICKTIME und REALPLAYER auf der Registerkarte EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN sind von großer Bedeutung. Ein massiver Einstieg in die Funktionsweise dieser beiden Media-Player würde den Rahmen dieses Buches sprengen. Erst einmal sollten Sie sich Folgendes merken – Flash ist nicht in der Lage, Videos abzuspielen. Flash ist vielmehr fähig, in verschiedene Videoformate zu exportieren. Apple QuickTime und Reals RealPlayer erlauben es einer Ebene von Flash diese Videos abzuspielen. Das mag einfach klingen, stellen Sie sich aber einmal vor, dass ein Video mehrere Spuren hat – eine für das eigentliche Video und zwei für Audio (Stereo). Die Option QuickTime ist wirklich erstaunlich. Sie können einen Flash-Film mit einer speziellen Flash-Spur erstellen, die Schaltflächen und Goto-Aktionen enthält, damit der Anwender zu einer ganz speziellen Stelle des Films springen kann. Aber auch hier gibt es Grenzen. QuickTime 4 unterstützt nur die Flash-Spur von Version 3. QuickTime 5 wird aber auf jeden Fall Flash 4 in dieser Hinsicht unterstützen. Es ist relativ einfach, einen QuickTime-Film zu einer interaktiven Ebene von Flash zu machen. Importieren Sie zuerst das Video, weisen Sie ihm einen Platz in der Zeitlinie zu, indem Sie entsprechende Bilder einfügen. Erstellen Sie eine einfache Stop- und eine Play-Aktion. Veröffentlichen Sie dann das Video (stellen Sie sicher, dass Sie die Option QUICKTIME AKTIVIERT haben). Wie aus Abbildung C.13 ersichtlich, gibt es noch weitere Einstellungsmöglichkeiten. Im Falle des RealPlayers von RealMedia kommen andere Gesetzmäßigkeiten, was die Kompatibilität betrifft, zum Tragen. Flash 2 wird von Real unterstützt; Für Flash 3 und 4 müssen Sie jedoch den RealPlayer 8 verwenden. Wenn Sie diese Limitierungen im Kopf behalten, sollte eigentlich nichts Schlimmes passieren und alles nach Ihren Vorstellungen funktionieren. Auf der Registerkarte REALPLAYER (Abbildung C.14) sehen Sie alle Einstellmöglichkeiten, die Sie den RealPlayer betreffend machen können. Verwenden Sie den RealPlayer in Kombination mit Flash, wird eine weitere HTML-Datei zusätzlich zur FlashDatei und der rm-Datei hochgeladen. Publizieren Sie ein Projekt, exportiert Flash neben den üblichen Dateien auch jene mit der Bezeichnung rm (RealMedia Sound-Datei) und SMIL (Synchronized Multimedia Integration Language). Um mehr über diese Datei zu erfahren, starten Sie doch einmal einen Texteditor und öffnen Sie darin die SMIL-Datei. Im Großen und Ganzen ähnelt sie vom Inhalt sehr der HTML-Datei, jedoch mit zusätzlichen Tags und Attributen zu der .swf- und rm-Datei.

491

Das Veröffentlichen Ihrer Flash-Anwendung

Abbildung C.13: Die Registerkarte QuickTime bietet eine Vielzahl von Einstellmöglichkeiten.

Abbildung C.14: RealPlayer-Dateien erzeugen beim Export zusätzliche Dateien im ExportOrdner.

492

Der Export anderer Medientypen

C.3 Der Export anderer Medientypen Erstaunlicherweise ist Flash in der Lage, wesentlich mehr Medientypen zu exportieren, als in Einstellungen für Veröffentlichungen verfügbar sind. Wählen Sie doch einfach mal DATEI / FILM EXPORTIEREN und Sie werden eine Liste bei Dateityp sehen, die erstaunlich lang ist (siehe Abbildung C.15).

Abbildung C.15: Neben den Exportformaten der Registerkarte Flash gibt es noch weitere unter dem Menü Film Exportieren und Dateityp.

In diesem Kapitel lernen Sie zwei Formate kennen, die ebenfalls von großer Bedeutung sind.

AVI AVI ist ein anderes digitales Videoformat. Obwohl QuickTime gegenüber AVI große Vorteile hat, so ist es doch manchmal notwendig, einen Film im AVI-Format zu exportieren. Einer der Gründe liegt im Kompressionsverfahren, das bei AVI wesentlich ausgefeilter ist.

Bitmap-Sequenzen Eine Bitmap-Sequenz exportiert eine statische BMP-Datei eines jeden Frames Ihres Films. Es sind verschiedene Sequenz-Formate verfügbar, wie aus Abbildung C.15 ersichtlich ist. Sie sind alle fast gleich bis auf das Format. Der Prozess ist genau der gleiche für jedes Format. Wählen Sie immer DATEI / FILM EXPORTIEREN und anschließend das entsprechende Format. Schließen Sie die Aktion mit der Benennung der Datei ab. Den Namen, den Sie dabei vergeben, wird aber nur als Präfix verwandt. So wird aus myMovie in Bild 1 myMovie0001.bmp. Haben Sie den Namen ausgewählt, klicken Sie auf die Schaltfläche SPEICHERN. Ist dies geschehen, erscheint ein Dialogfenster mit Details des gewählten Grafikformats.

493

Das Veröffentlichen Ihrer Flash-Anwendung

Die Philosophie hinter der Export-Sequenz ist der Import dieser Grafiken in ein anderes Zeichenprogramm, das vielleicht über bessere Grafikmöglichkeiten verfügt, als Flash bietet. Beachten Sie dabei jedoch, dass es immer zu Schwierigkeiten besonders im Bereich der Videoformate kommen kann.

C.4 Zusammenfassung In diesem Kapitel lasen und erlernten Sie mehrere Wege, um Flash-Filme zu exportieren. Zudem lernten Sie Projektoren, statische Bilder, QuickTime-Video und andere Aspekte des Exports von Videodaten kennen. Mit der Registerkarten des Dialogfensters EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN bietet Flash eine nützliche Schnittstelle zum Einstellen der Exportoptionen.

C.5 Workshop F&A F

Ich weiß, dass ich schon einmal Videos in Flash gesehen habe. Wie kann ich ein QuickTime-Video in meinen Flash-Film integrieren? A

F

Ich arbeite mit Leuten zusammen, die über HTML-Erfahrung verfügen. Wir wollen Flash innerhalb einiger sehr komplexer HTML-Seiten integrieren. Müssen die HTMLProgrammierer benutzerdefinierte Templates anlegen? A

494

Dies geht nicht. Es gibt viele Wege, in Flash schöne Effekte zu erstellen, der Import eines QuickTime-Videos ist aber nicht möglich. Sie haben lediglich die Möglichkeit, einen QuickTime-Film zu exportieren, so dass er im Rahmen eines FlashFilms in seinem eigenen QuickTime-Player abgespielt wird. Sie haben ebenfalls die Möglichkeit, eine Sequenz von Grafiken zu exportieren (die auch wieder importiert werden können), leider steht dann kein synchronisiertes Audio zur Verfügung. Was Sie vielleicht innerhalb eines Flash-Films gesehen haben, war eine Sequenz von statischen Bildern.

Nein, es ist nicht unbedingt notwendig, ein derartiges Template zu erstellen, wenn Sie nicht den massiven Einsatz eines solchen planen. Viel besser ist eine .swf-Datei zu importieren und in die HTML-Seiten zu integrieren. Die HTML-Programmierer sollten lediglich bei der Erstellung der Seite beachten, schon einmal Schnittstellen zu definieren, um später die Flash-Routine ohne Probleme einbin-

Workshop

den zu können. Anstatt das Publizieren zu benutzen (was eine HTML-Datei eventuell überschreiben könnte), benutzen Sie bitte den Menüeintrag FILM EXPORTIEREN aus dem Menü DATEI. F

Da ich nun weiß, wie ich einen Film publizieren kann, verfüge ich über alles für Flash nötige Wissen? A

Eigentlich nicht; ich denke, es ist zu früh zu sagen, dass Sie nun alles über Flash wissen. Sie haben jedoch alles erfahren, um sich auch noch weiterhin mit Flash beschäftigen zu können. Das Lernen hört niemals auf.

Übungsaufgaben 1. Wie lautet das beste Grafikformat für statische Bilder? a. JPG b. GIF c. Abhängig vom Verwendungszweck 2. Was geschieht mit Anwendern, die Ihre Flash-Site besuchen, aber über keinen FlashPlayer verfügen? a. Der Rechner stürzt ab. b. Es hängt davon ab, wie HTML die Situation abfängt. c. Der Flash-Player wird automatisch installiert, mit einer kurzen Unterbrechung, die durch den Download des Players begründet ist. 3. Sind alle Datenformate, die Flash exportieren kann, innerhalb der Registerkarte EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN sichtbar? a. Ja, hier sind alle Exportformate aufgelistet. b. Nein, Flash ist in der Lage, weitere Dateitypen zu exportieren. c. Nein, Flash ist nicht in der Lage, andere Dateitypen zu exportieren. 4. Wie integrieren Sie ein QuickTime-Video in Ihre publizierte Flash-Anwendung? a. Dies ist nicht möglich. b. Benutzen Sie einfach den Menüeintrag IMPORT aus dem Menü DATEI. c. Importieren Sie die QuickTime-Datei und stellen Sie sicher, das QuickTime auf der Registerkarte FORMATE aktiviert ist.

495

Figuren mit Auswahl, Andocken und den Ebenen

h n A

D g an

Figuren mit Auswahl, Andocken und den Ebenen

D.1 Halbkreis 1. Stellen Sie sicher, dass Andocken aktiviert ist und zeichnen Sie einen Kreis und eine vertikale Linie, die hier um einiges länger ist als der Kreis.

2. Doppelklicken Sie im Zentrum des Kreises (um sowohl die Linie des Kreises als auch sein Inneres zu selektieren) und ziehen Sie diesen nun mit einem einfachen Klick von der Mitte des Kreises (Sie sollten jetzt einen Ring um Ihren Cursor haben) zur Linie hinüber und verbinden den Kreis mit der Linie.

3. Ihre Zeichnung sollte nun wie die folgende Darstellung aussehen:

498

Halbkreis

4. Klicken Sie am unteren Ende der vertikalen Linie, um die Linie zu selektieren. Mit den Cursortasten können Sie nun die Größe der Linie verändern. Verkleinern Sie sie ein bisschen.

5. Deselektieren Sie die Linie, indem Sie woanders hinklicken. Mit dem Pfeil-Werkzeug selektieren Sie nun das obere Ende der Linie (bewegen Sie den Cursor in die Nähe der Linie, bis sich der Cursor so verändert, dass Sie das Ende der Linie verschieben können). Klicken Sie und beginnen Sie mit dem Verschieben.

6. Docken Sie das Ende nicht an den Kreis an, sondern bringen Sie es zum oberen Ende der oberen Linie.

499

Figuren mit Auswahl, Andocken und den Ebenen

7. Klicken Sie auf einen Halbkreis, um ihn auszuwählen. Löschen Sie nun den ausgefüllten Bereich des Halbkreises.

8. Klicken Sie auf die Linie des vorher gelöschten Halbkreises und entfernen Sie diese.

9. Klicken Sie auf die überstehenden Bereiche der Linie und löschen Sie diese.

10. Nun haben Sie einen Halbkreis.

500

Speichen in einem Rad

D.2 Speichen in einem Rad 1. Befolgen Sie die Schritte für den Halbkreis bis zum Schritt 6, so dass Sie ein Gebilde haben, das wie in folgender Abbildung aussieht.

2. Löschen Sie die gefüllten Bereiche des Kreises und die überstehenden Linien.

3. Kopieren Sie die vertikale Linie und fügen Sie diese außerhalb des Kreises ein.

501

Figuren mit Auswahl, Andocken und den Ebenen

4. Nutzen Sie das Rotationstool, um die Linie um 90 Grad zu drehen.

5. Deselektieren Sie die Linie, um den Drehvorgang zu beenden. Klicken Sie einmal auf die Mitte der Linie, um sie auszuwählen und verschieben Sie die Linie dann.

6. Verbinden Sie Ihre neue Linie mit der Mitte der vertikalen Linie.

502

Speichen in einem Rad

7. Fügen Sie die Linie erneut ein, um eine weitere vertikale Linie zu halten – rotieren Sie allerdings diesmal nur bis zum ersten Einrasten (was 15 Grad Drehung entspricht). Verschieben Sie diese Linie von ihrem Mittelpunkt in die Mitte des Kreises.

8. Fahren Sie fort und erhöhen Sie die Drehung der Linien jeweils um 15 Grad und verbinden Sie alle Linien mit der Mitte des Kreises, bis er wie in der folgenden Abbildung aussieht.

9. Benutzen Sie (ª) beim Klicken, um alle Linien auszuwählen. Der Kreis sollte nicht selektiert sein.

503

Figuren mit Auswahl, Andocken und den Ebenen

10. Kopieren und ziehen Sie das untere Ende der Linien und fügen Sie diese außerhalb des Kreises ein.

11. Selektieren Sie die Linien und benutzen Sie das Rotations-Werkzeug, um sie um 90 Grad zu drehen.

12. Wenn alle Linien wieder ausgewählt sind können Sie diese mit der Mitte des Kreises verbinden.

504

Fünfeckiger Stern

13. Wollen Sie einen schnellen Weg wissen, wie Sie die Anzahl der Speichen aus dem letzten Beispiel verdoppeln können? Kopieren Sie einfach das komplette Gebilde und wählen Sie MODIFIZIEREN / TRANSFORMIEREN / SKALIEREN UND DREHEN..., um eine Drehung von exakt 7,5 Grad einzustellen. Danach verbinden Sie das neue Gebilde mit dem alten, wie in der unteren Abbildung gezeigt.

D.3 Fünfeckiger Stern 1. Zeichnen Sie eine perfekt horizontale Linie. Kopieren Sie diese und fügen sie erneut in Ihren Arbeitsbereich ein.

2. Als Erstes werden wir ein Pentagramm erzeugen. Selektieren Sie hierzu die neu eingefügte Linie. Modifizieren Sie diese nun mit dem Menübefehl MODIFIZIEREN / TRANSFORMIEREN / SKALIEREN UND DREHEN... ((Strg)+(Alt)+(S)). Es sollte sich nun das Fenster Skalieren und drehen öffnen. Hier können Sie die genaue Gradzahl für eine

505

Figuren mit Auswahl, Andocken und den Ebenen

Drehung oder die prozentuale Vergrößerung für das ausgewählte Objekt einstellen. Sie können den Innenwinkel jedes beliebigen Objektes ausrechnen, indem Sie 360 (Grad) durch die Nummer der Linien in dem Objekt dividieren. Im Falle eines Pentagramms (das fünf Seiten hat) würde der Innenwinkel 72 Grad (360/5 =72) betragen. Also drehen wir die Linie um 72 Grad.

3. Selektieren Sie die Linie. Nun können Sie das untere Ende der Linie mit dem linken Ende der ersten Linie zusammenfügen.

4. Duplizieren Sie die neue Linie.

506

Fünfeckiger Stern

5. Drehen Sie die Linie um 72 Grad und verbinden sie wieder mit dem Ende der vorigen Linie.

6. Wiederholen Sie diesen Vorgang, bis Sie ein Pentagramm haben.

7. Zeichnen Sie eine Linie innerhalb des Pentagramms, das keine andere Linie berührt.

507

Figuren mit Auswahl, Andocken und den Ebenen

8. Verbinden Sie einen Endpunkt der neuen Linie mit der unteren linken Ecke des Pentagramms.

9. Verbinden Sie nun das andere Ende der neuen Linie mit dem oberen Eckpunkt des Pentagramms.

10. Zeichen Sie eine neue Linie in dem Pentagramm (in der größeren Freifläche) und verbinden Sie diese mit der unteren rechten Ecke und der oberen Ecke des Fünfecks.

11. Nachdem Sie diese Linie verbunden haben, malen Sie eine kleine Linie an dem Platz, der in der unteren Abbildung dargestellt ist, und verbinden Sie einen Endpunkt dieser Linie mit der unteren rechten Ecke des Pentagramms.

508

Fünfeckiger Stern

12. Ziehen Sie nun in einem Zug den anderen Endpunkt der Linie auf die linke mittlere Ecke des Pentagramms (wenn Sie bei dieser Aktion schrittweise vorgehen, wird die Linie mit der nächsten Linie verbunden, auf die sie stößt).

13. Malen Sie eine weitere Linie an der Stelle, die in der unteren Abbildung gezeigt ist.

14. Verbinden Sie die Endpunkte dieser Linie mit der mittleren linken und der mittleren rechten Ecke des Pentagramms. Genau wie im 12. Punkt gilt auch hier, wenn Sie die Linie abschnittsweise verbinden und stoppen, bevor sie mit einer der Ecken verbunden ist, wird die Linie unterteilt.

509

Figuren mit Auswahl, Andocken und den Ebenen

15. Zeichnen Sie die letzte Linie wie in der folgenden Abbildung dargestellt.

16. Verbinden Sie die Ecken dieser Linie mit der mittleren rechten und der unteren linken Ecke des Pentagramms.

17. Entfernen Sie nun alle Hilfslinien, bis der Stern so aussieht wie die folgende Abbildung.

510

Ein räumlicher Würfel

D.4 Ein räumlicher Würfel 1. Zeichnen Sie ein Quadrat. Löschen Sie den Inhalt des Quadrates und duplizieren Sie es.

2. Verschieben Sie ein Quadrat über das andere, so dass es rechts oberhalb des ersten Quadrates liegt.

3. Zeichnen Sie vier kurze Linien, die keines der beiden Quadrate berühren.

511

Figuren mit Auswahl, Andocken und den Ebenen

4. Verbinden Sie ein Ende einer Linie mit einer Ecke des hinteren Quadrates.

5. Verbinden Sie nun das andere Ende der Linie mit der gleichen Ecke des vorderen Quadrates.

6. Wiederholen Sie diesen Vorgang mit allen anderen Linien.

7. Wenn Sie einen durchsichtige Würfel haben wollen, lassen Sie das jetzige Bild so wie es ist. Wenn Sie allerdings einen Würfel haben wollen, der nicht durchsichtig ist, entfernen Sie einfach alle Hilfslinien innerhalb der Flächen, welche die Außenseiten des Würfels darstellen sollen. Vergleichen Sie hierzu die nachfolgende Abbildung.

512

Wellen

D.5 Wellen 1. Befolgen Sie die ersten sechs Anweisungen der Halbkreis-Übung, um einen Kreis zu erstellen, den eine Linie durchtrennt. Bei dieser Übung wird allerdings die Linie nicht vertikal sondern horizontal eingefügt.

2. Klicken Sie einmal auf die untere Hälfte des Kreises, um sie von der Linie wegzuziehen.

3. Entfernen Sie die horizontale Linie.

513

Figuren mit Auswahl, Andocken und den Ebenen

4. Klicken Sie einmal auf den unteren Halbkreis, um ihn zu markieren. Danach verbinden Sie das linke Ende des unteren Halbkreises mit dem rechten Ende des oberen Halbkreises.

5. Kopieren Sie das entstandene Gebilde und fügen Sie es erneut in Ihren Arbeitsbereich ein. Verbinden Sie nun das linke Ende des neu eingeführten Objektes mit dem rechten Ende des bereits existierenden. Wiederholen Sie diesen Vorgang, um so viele Wellen zu erzeugen, wie Sie benötigen.

514

3D-Kugel

6. Wenn Sie hiermit fertig sind, können Sie Ihr Gebilde beliebig in der Breite variieren.

D.6 3D-Kugel 1. Diese Übung ist wirklich einfach, aber sie sieht genial aus. Als Erstes selektieren Sie das Ellipsen-Werkzeug (keine Linie) und einen vordefinierten Farbverlauf.

2. Malen Sie einen Kreis.

515

Figuren mit Auswahl, Andocken und den Ebenen

3. Wählen Sie das Farbeimer-Werkzeug und klicken dann auf die Option Füllung transformieren. Wenn Sie im Kreis nun klicken, können Sie den Glanzpunkt von der Mitte zur linken oberen Hälfte verschieben (je nachdem wo sich Ihre imaginäre Lichtquelle befindet).

4. Selektieren Sie den Radius-Anfasser (der oberste der drei Punkte) und verschieben Sie ihn nach links, um den Radius zu verändern.

5. Wählen Sie den untersten Punkt, um die Drehung des Kreises zu bestimmen.

516

Das Farbrad

6. Selektieren Sie den mittleren Anfasser, um die Größe des Kreises zu verändern.

7. Verändern Sie all diese Einstellung solange, bis Sie Ihren Kreis in eine 3D-Kugel verwandelt haben.

D.7 Das Farbrad 1. Als Erstes werden wir ein Dreieck generieren. Um dieses zu erstellen, zeichnen Sie eine horizontale Linie und duplizieren Sie diese. Drehen Sie die neue Linie exakt um 120 Grad und koppeln Sie sie mit einem Ende der horizontalen Linie. Wiederholen Sie diesen Vorgang für eine dritte Linie und vervollständigen Sie das Dreieck. Kopieren Sie das Dreieck, so dass es nicht mehr mit anderen Objekten verbunden ist, wenn Sie es auswählen. Malen Sie nun einen Kreis, der deutlich größer ist als das Dreieck.

517

Figuren mit Auswahl, Andocken und den Ebenen

2. Löschen Sie die Füllung des Kreises und konvertieren Sie ihn in ein Symbol namens Durchsichtig.

3. Koppeln Sie die Mitte des neu erstellten Symbols an eine Ecke des Dreiecks an. Duplizieren Sie dieses Symbol zweimal und verbinden Sie die neu erstellten Symbole mit den anderen Ecken des Dreiecks (indem Sie die Mittelpunkte der Kreise an die Ecken andocken).

518

Das Farbrad

4. Löschen Sie das Dreieck und trennen Sie die einzelnen Kreise.

5. Nutzen Sie das Farbeimer-Werkzeug, um die Kreise mit Farbe zu füllen. Löschen Sie danach die Ränder der Kreise.

519

Fortgeschrittenes ActionScripting

h n A

E g an

Fortgeschrittenes ActionScripting

Es gibt so viele Informationen zu ActionScript, dass sie den Rahmen dieses Buches sprengen würden, selbst wenn ich den Umfang verdoppeln würde. Kapitel 14 bis 17 beinhalten einige Beispiele für ActionScripting, die allerdings nur die Spitze des Eisbergs zeigen. Dieser Anhang soll einen Überblick über zwei wichtige Dinge in Bezug auf ActionScript geben: Variablen und Funktionen.

E.1

Variablen

Variablen bieten für jegliche Art von Daten eine vorübergehende Speichermöglichkeit. Der Speicher ist vorübergehend, da die Variable selbst nur existiert, solange der Flash-Film abgespielt wird. Jede Variable hat einen Namen und einen Wert. Wenn das Script etwas in der Art benutzername="Phillip"; vorfinden würde, hieße es nichts anderes, als dass der Variablen benutzername der Wert "Phillip" zugewiesen würde. Der Wert einer Variablen kann verschiedene Formen annehmen. Stellen Sie sich eine Variable wie einen Briefumschlag vor. Sie können sowohl Papier als auch Blumen oder Sand hineingeben. Der Wert (damit ist der Inhalt des Umschlags gemeint) kann aus vielen verschiedenen Stoffen bestehen. In Flash sind folgende Datentypen erlaubt: 쐽

Zahlen

쐽

Zeichenketten (Strings)

쐽

Boolsche Ausdrücke

쐽

Objekte

쐽

Filmsequenzen

Hier sind einige Beispiele: 쐽

aktuellesAlter=35; //Zahl

쐽

Vorname="Phillip"; //Zeichenkette

쐽

Verheiratet=true; //boolean

쐽

Augenfarbe=new Color(); //color Objekt

쐽

aktuellerFilm=film_1 //Filmsequenz

Sie können jeden dieser fünf Datentypen in einer Variable speichern. Sie können den Datentyp einer Variablen über die Funktion typeof herausbekommen. Wenn Sie zum Beispiel trace(typeof(benutzername)); verwenden, wird der Datentyp der Variablen benutzername im Ausgabefenster angezeigt (in diesem Fall der Datentyp string).

522

Funktionen

E.2

Funktionen

Eine einfache Definition einer Funktion ist: »Code, der irgendetwas tut«. Solche Aktionen haben wir bereits verwendet, denn auch Stop und Play sind Funktionen. Es gibt ja auch den Bereich Funktionen im Bedienfeld für Aktionen. Außerdem gibt es einige Aktionen, die sich wie Funktionen verhalten, obwohl sie keine sind.

Funktionen verwenden Funktionen werden immer durch den Funktionsnamen, gefolgt von runden Klammern, beschrieben. In den Klammern kann man Parameter an die Funktion übergeben. Im Gegensatz zu Aktionen liefern Funktionen Werte zurück. Ein Beispiel wäre also eine Funktion wieSpaetIstEs(). Da nichts in den Klammern steht, wird dieser Funktion nichts übergeben. Allerdings gibt sie selbst die Zeit zurück. Anders wäre das bei rechneDMinEuro(20). Hier würden 20 DM in Euro umgerechnet und der Wert 10,23 zurückgegeben.

Eingebaute Funktionen Die soeben genannten Funktionen sind nicht in Flash integriert. Allerdings gibt es beispielsweise getTimer, welche die Anzahl von Millisekunden ausgibt, die seit dem Start des Films vergangen sind. Eine weitere nützliche Funktion ist Number, denn sie kann aus Strings Zahlen machen. Ein Number("2") gibt also 2 zurück. Selbstverständlich gibt es noch viel mehr Funktionen, aber wenn Sie das Prinzip verstanden haben, können Sie alle anwenden.

Hausgemachte Funktionen Wenn es Funktionen (wie die Euro-Umrechnung) nicht gibt, kann man sie kurzerhand selbst definieren. Dabei gibt es folgende Varianten: Manche Funktionen brauchen weder die Angabe eines Parameters, noch müssen Sie etwas zurückliefern. Das wäre bei der folgenden Funktion der Fall: function verschieben() { dieSequenz._x=dieSequenz._x+10; }

523

Fortgeschrittenes ActionScripting

Hier würde beim Aufruf von verschieben() die Filmsequenz dieSequenz um zehn Bildpunkte nach rechts verschoben. Man kann aber auch eine Funktion bauen, der man sagt, wie weit sie verschieben soll: function verschieben(speed) { dieSequenz._x=dieSequenz._x+speed; }

Hier wird dieSequenz um speed Punkte verschoben. Ein Rückgabewert wird mit return generiert. Die Euro-Umrechnung würde also so aussehen: function rechneDMinEuro(DM) { return DM/1,95583; }

E.3

Lernen Sie immer weiter

Sicherlich gibt es noch viel mehr zum Thema ActionScript zu sagen, aber jeder Versuch, hier weitere Punkte anzusprechen, würde scheitern, da wir uns damit nicht detailliert genug befassen können. Wenn Sie etwas Programmiererfahrung haben, werden Sie allerdings schnell den Einstieg in diese Sprache finden.

524

Netzressourcen

n a h An

a F g

Netzressourcen

Die hier aufgelisteten Internetseiten sind hauptsächlich in englischer Sprache.

F.1

Einführungen und Online-Ressourcen

Macromedia http://www.macromedia.com/support/flash/

Was kann schon besser sein als Informationen aus erster Hand?

Moock.Org http://www.moock.org

Ressourcen, die auch über Flash hinaus gehen. Alles, was zum Thema Web gehört Diese Site ist besonders interessant, da hier nicht nur das Thema Flash besprochen wird, sondern auch der Zusammenhang mit anderen Internet-Technologien klar wird.

The Flash Academy http://www.enetserve.com/tutorials

Diese Homepage bietet Anfänger- bis Fortgeschrittenen-Einführungen in Form von FlashFilmen an.

Flash Kit http://www.flashkit.com

Hier werden Einführungen als Quell-Dateien angeboten. Außerdem kann man hier Sounds herunterladen.

Virtual-FX http://www.virtual-fx.net

Hier gibt es Einführungen für jeden Wissensstand (vom Anfänger bis zum fortgeschrittenen Action-Scripter). Außerdem gibt es Quell-Dateien und Links auf weitere Flash-Seiten.

526

Seiten über Inhalte

Flashlite http://www.flashlite.net

Dies ist eine gute Quelle für Einführungen und Aktuelles über Flash.

Flash Magazine http://www.flashmagazine.com

Auf dieser Seite findet man Artikel und Nachrichten zu Flash.

We're Here http://www.were-here.com

Das wahrscheinlich aktivste Forum zu Flash im Internet

F.2

Seiten über Inhalte

Im Normalfall kann man mit eigenen Grafiken und Sounds am besten die Intention des Flash-Filmes unterstützen. Allerdings gibt es eine Vielzahl von Homepages, auf denen man Medien herunterladen kann, die Sie zu Übungszwecken gut verwenden können. Behalten Sie im Hinterkopf, dass es nie ein »kostenloses Mittagessen« gibt, denn auch Dateien, die auf den ersten Blick kostenlos aussehen, sind es in Wirklichkeit nicht. Außerdem ist mit dem Urhebergesetz nicht zu spaßen. Bedenken Sie immer, dass Sie bei einem Flash-Film, den Sie kommerziell erstellen, für die Rechte an Sounds und Grafiken zahlen sollten.

Audio- und Soundseiten Music 4 Flash http://www.music4flash.com

Dies ist eine gute Datenquelle. Hier werden kostenlose Sounds angeboten. Außerdem gibt es einige sehr hochwertige Dateien (wenn Sie dafür zahlen wollen). Man erfährt eine Menge über die Theorie von Sounds und kann über viele Links weitersurfen.

527

Netzressourcen

Wavecentral http://www.wavecentral.com

Hier findet man viele gute .wav-Dateien.

Bilder und Fotos Clip Art http://www.clip-art.com

Hier werden viele Bilder im Zeichentrick-Stil angeboten. Außerdem findet man Hinweise zur Qualität/Dateigrößenoptimierung.

Clip Art Connection http://www.clipartconnection.com

Auf dieser Seite erhält man kostenlose Bilder.

Artville http://www.artville.com

Hier findet man Bilder und Fotos.

Photodisc http://photodisc.com

Auf dieser Seite findet man günstige Bilder in niedriger Qualität.

F.3

Schriftarten und Sonstiges

T-26 http://www.t26font.com

Hier findet man kostenpflichtige Schriftarten, die hervorragende Qualität haben.

528

Inspirierende Seiten

GS Homepage http://www.hugemcgriffin.com/

Auf dieser Homepage werden einige kostenlose Schriftarten angeboten.

F.4

Inspirierende Seiten

Natürlich ist »inspirierend« sehr subjektiv. Außerdem werden Seiten, die für viele Leute inspirierend sind, schnell zum Klischee, wenn sie zu oft kopiert werden. Ich stelle Ihnen hier Seiten vor, die auf Preisträgerseiten verweisen oder Dateien enthalten, von denen man lernen kann.

Pray Station http://www.praystation.com

Diese Seite ist selbst mit Flash erstellt und bietet neben einem sehenswerten Kalender auch .fla-Dateien zum Download an.

Flash Challenge http://www.flashchallenge.com

Hier werden viele Links zu anderen Seiten aufgelistet, die zum größten Teil sehr sehenswert sind.

Flash Film Festival http://www.flashfilmfestival.com

Diese Homepage zeigt die Gewinner der FlashForward2000 Flash-Konferenz an.

Communication Arts http://www.commarts.com/interactive

Hierbei handelt es sich um die Seite eines Magazins für die Grafikgemeinde.

529

Netzressourcen

F.5

Statistiken

Macromedia http://www.macromedia.com/software/player_census/

Hier kann man den aktuellen Stand ablesen, wie viele Internetuser den Flash- oder Shockwave-Player installiert haben. Das kann besonders dann nützlich sein, wenn Sie einem Dritten darüber Bericht erstatten sollen, wie kompatibel Flash ist.

530

Glossar

h n A

G g an

Glossar

.fla-Datei. Eine Flash-Datei, die man bearbeiten kann .swf-Datei. Eine Flash-Player-Datei, die man betrachten, aber nicht bearbeiten kann

A ActionScript. Die Computersprache, die in Flash verwendet wird Aktivbereich. Der Bereich, in dem eine Schaltfläche auf einen Klick reagiert Animierte Grafiken. Bewegte Bilder jeder Art. Am häufigsten findet man Flash-Animationen und animierte GIF-Bilder im Internet.

B Bibliothek. Der Speicherbereich für alle Medien, die in einer Flash-Datei verwendet werden Bild-für-Bild-Animation. Eine Animation, in der jedes einzelne Bild ein Schlüsselbild ohne Tweening ist (ähnlich einem Daumenkino) Bildrate. Die Anzahl der Bilder, die in einer Sekunde wiedergegeben werden Bitmap-Grafik. Siehe: Rastergrafik Bühne. Das große weiße Rechteck in Flash. Nur was sich in diesem Rechteck befindet, wird der Betrachter später sehen können.

E Ebene. In Flash gibt es mehrere Ebenen. Hier können unterschiedliche Animationen zur gleichen Zeit realisiert werden. Export. Eine Datei aus Flash in einem anderen Format abspeichern als das Standardformat

F Fokus. Der Aktivitätszustand. Wenn man beispielsweise ein Bild in der Zeitleiste anklickt, liegt der Fokus auf diesem Bild. Führungsebene. Eine spezielle Ebene, die im späteren Film nicht zu sehen ist. Sie wird verwendet, um Objekte genauer ausrichten zu können.

532

G Grafik-Symbol. Ein Symbol, das nur aus Grafik besteht

H Hyperlink. Ein Objekt oder Text, auf den der Anwender klicken kann, um zu einer anderen Seite im Internet zu gelangen Hypertext Markup Language (HTML). Die Sprache, die von Internetbrowsern übersetzt wird, um Inhalte aus dem Internet anzuzeigen

I Import. Ein Objekt oder eine Datei von außerhalb in eine Flash-Datei bringen Instanz. Eine Art Kopie eines Symbols, die aber nicht so viel Speicher verbraucht. Siehe auch: Bibliothek und Symbol

K Koordinaten. Nummern, welche die Position auf dem Bildschirm angeben

L Leeres Schlüsselbild. Ein Schlüsselbild, in dem aber nichts auf der Bühne angezeigt wird. Siehe auch: Schlüsselbild Lineal. Mit diesem Werkzeug kann man Hilfslinien erzeugen. Siehe auch: Raster

M Maskierung. Eine Art von Ebenen-Eigenschaft mit mindestens zwei Ebenen. Der grafische Inhalt der Maske gibt an, welcher Bereich der maskierten Ebene durchscheint. Morph. Die Transformation einer Form in eine andere über eine gewisse Zeit

O Oberfläche. Das Design, mit dem der Anwender interagiert

533

Glossar

P Panning. Dieser Effekt lässt ein Geräusch sich scheinbar von rechts nach links bewegen (oder umgekehrt). Parameter. Eine Eigenschaft, die in AcrionScripts verwendet wird

Q QuickTime. Ein Videoformat, das von Apple generiert wurde

R Raster. Wie bei kariertem Papier wird das Raster auch in Flash dazu verwendet, Zeichen (und Zeichnungen) auszurichten. Siehe auch: Lineal Rastergrafik. Ein Bild, das für jeden Bildpunkt die Farbe definiert

S Schaltfläche. Ein Objekt, auf das der Anwender klicken kann, um eine Aktion auszulösen Schaltflächenzustand. Ein Zustand der Schaltfläche (beispielsweise beim Klicken oder wenn sich die Maus darüber bewegt) Schaltflächen-Symbol. Ein Symbol mit den Eigenschaften einer Schaltfläche. Siehe auch: Symbol Schlüsselbild. Ein Bild, in dem man haargenau angibt, was in diesem Moment auf der Bühne zu sehen sein soll Smart Filmsequenz. Eine Filmsequenz, die spezielle Parameter annehmen kann, die wiederum einzigartig für jede Instanz dieser Sequenz sind Symbol. Eine Grafik oder ein sonstiges Objekt, das sich in der Bibliothek befindet. Man kann es mehrfach als Instanz auf die Bühne bringen, ohne eine viel größere Datei zu erhalten. Szene. Ein Teil in der Zeitschiene von Flash

V Vektorgrafik. Eine Grafik, die über geografische Formeln angibt, wie das Bild auszusehen hat

534

Z Zwiebelschalen-Werkzeug. Mit diesem Werkzeug kann man ein Bild bearbeiten, während man andere leicht abgeschwächt im Hintergrund sieht.

535

Antworten zu den Übungsaufgaben

An

H g n ha

Antworten zu den Übungsaufgaben

Tag 1 1. A. Normalerweise kann man eine .swf-Datei nur betrachten. In Wirklichkeit kann man eine .swf-Datei wie in Antwort c. auch importieren. Allerdings funktioniert das nicht, wenn man die .swf-Datei so exportiert hat, dass sie importgeschützt abgespeichert wurde. Das kann man im Menü DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN in der Registerkarte Flash einstellen. Wenn Sie allerdings jemals eine .swfDatei importieren sollten, wird nur die Sequenz der Bilder importiert (und keine Interaktivität), womit die Datei dann kaum noch sinnvoll genutzt werden kann. 2. B. Obwohl das Erhöhen der Bildrate auf 120 Bilder pro Sekunde Flash veranlassen wird, sehr schnell abzuspielen, wird dies kaum auf allen Computern möglich sein. Die Antwort a. ist damit nicht grundlegend falsch. Allerdings sind spezielle Animationstechniken die beste Möglichkeit. Eine Grafik muss sich nicht in Wirklichkeit schnell bewegen, um eine schnelle Bewegung vorzutäuschen. 3. C. Dies ist keine Meinung: Bildpunkte (Pixel) sind der Standard.

Tag 2 1. B. Dieser Fall sollte eigentlich sehr selten vorkommen, denn nur beim Rechteck- und Oval-Werkzeug kann man überhaupt beide Farben auf Keine Farbe setzen. 2. C. Auch wenn B nicht verkehrt ist, kann man über die Tipps der Werkzeuge am schnellsten die Kurztasten feststellen. 3. B. Sie brauchen sich aber nicht die ganzen Orte der Farbfelder zu merken.

Tag 3 1. C. Auch wenn Vektorgrafiken mehr Vorteile gegenüber Rastergrafiken haben, hängt es im Endeffekt vom Inhalt des Bildes ab, welchen Datentyp Sie wählen. 2. A. Jedes Bild kann mit eigenen Kompressionseinstellungen versehen werden, die nicht vom eigentlichen Format abhängen. 3. C. Abbildung 3.2 zeigt das Ergebnis, wenn man versucht, eine zu neue Illustrator-Datei zu importieren.

538

Tag 4

Tag 4 1. A. Die Adressleiste ist wirklich der beste Hinweis. Achten Sie auf diesen Bereich. 2. C. Es ist möglich, einen Farbverlauf mit nur zwei von diesen Bedienfeldern zu erstellen, allerdings benötigt man normalerweise alle drei (außerdem sind die Antworten A und B absolut falsch). 3. A. Die Gruppierung eines einzelnen Objektes ist dann sinnvoll, wenn man verhindern will, dass es andere Objekte auf der Bühne »auffrisst«. Außerdem kann man die Anordnung dieser Objekte einstellen, wenn sie erst einmal gruppiert sind.

Tag 5 1. B. Man kann die Bibliothek einer anderen Datei eingeblendet haben. Außerdem kann man Symbole auch in Ordnern organisieren. 2. A. Die Adressleiste ist der Haupthinweis auf diesen Zustand. 3. C. Alpha macht nur Sinn, wenn sich etwas anderes hinter der Instanz verbirgt. Wenn das nicht der Fall ist, sollte man von Alpha absehen, da es viel Rechenzeit benötigt und ein Helligkeitseffekt an dieser Stelle viel effektiver wäre.

Tag 6 1. C. Die Anzahl der Schlüsselbilder hat eigentlich keinen Einfluss auf die Erscheinung des Films. Das hängt von vielen anderen Dingen ab (Bildrate ...). 2. A. Man kann bei einer Bildrate von zwei bps genau den Wechsel zwischen den Bildern sehen. Es handelt sich um Pausen und nicht um schwarze Lücken. 3. B. Es wäre untypisch, wenn Ihr Computer die 60 bps schaffen würde.

Tag 7 1. B. Der Inhalt eines Schlüsselbildes bleibt auf der Bühne, bis ein weiteres Schlüsselbild erscheint. 2. B. Auch wenn man normalerweise eine Animation mit etwa 24 Bildern die Sekunde gestaltet, kann man schon zwei unterschiedliche Bilder als Animation bezeichnen. 3. C. Eine Bild-für-Bild-Animation ist eine Animation. In den beiden folgenden Kapiteln werden wir allerdings lernen, wie man noch flüssigere Animationen erstellen kann.

539

Antworten zu den Übungsaufgaben

Tag 8 1. B. Speichern ist immer eine gute Idee, aber an dieser Stelle nicht notwendig. Man benötigt allerdings Symbole, um einen Bewegungstween zu erzeugen. 2. A. So überraschend es auch klingt: Viele Leute versuchen es mit B (der TelepathieMethode). Das fällt genau unter den Punkt, den ich »wissen wo man ist« nenne. Wenn man Bild 1 bearbeiten will, muss der Abspielkopf auf Bild 1 stehen. 3. C. Man stellt die Tweening-Eigenschaften im ersten Schlüsselbild ein.

Tag 9 1. C. Es gibt keinen Grund, mehr Formmarken zu verwenden als unbedingt nötig. Jedes Mal, wenn Sie eine Formmarke einfügen, sollten Sie sich vergewissern, ob das Ergebnis zufrieden stellend ist. 2. B. Es ist definitiv richtig, »Bewegungstweening« als Erzeuger von kleineren Datenmengen zu bezeichnen. Das ist besonders dann wichtig, wenn ein gewünschter Effekt sowohl per Bewegungs- als auch per Formtweening erzeugt werden kann. 3. B. Text wird zu Beginn wie eine Gruppe behandelt. Sie brauchen lediglich MODIFIZIEREN / TRENNEN wählen.

Tag 10 1. C. Sowohl AIF als auch WAV können gute Qualität für Sound-Quell-Dateien liefern. 2. B. Sounds werden immer in Schlüsselbildern abgelegt. 3. A. Auch wenn alle Antworten gleich verrückt klingen, funktioniert nur die erste Variante.

Tag 11 1. C. Auch wenn das Testen des Films die besten Ergebnisse liefert, können Sie einen Vorgeschmack auf den Effekt erhalten, wenn Sie beide Ebenen sperren. 2. B. Eine Maske kann so viele Ebenen maskieren, wie Sie wollen. 3. B. Ich denke, dass man immer effizient sein sollte, allerdings können Sie in FührungsEbenen ruhig einmal die Zügel schleifen lassen, da die Inhalte nicht die Dateigröße oder Abspielgeschwindigkeit des fertigen Films beeinflussen. Wenn Sie eine Ebene verstecken, so wird sie nur während des Arbeitens mit Flash nicht angezeigt. Im Film erscheint sie aber trotzdem.

540

Tag 12

Tag 12 1. B. Es ist egal, wie viele Bilder man in solchen Symbolen und Instanzen verwendet. Ich gebe aber zu bedenken, dass man beim Grafik-Verhalten darauf achten muss, wie lang die Hauptzeitlinie »lebt«. 2. B. Man kann Instanzen gleich benennen. Allerdings kann man diese dann nicht mehr getrennt ansprechen, sondern Aktionen wirken immer auf alle gleichnamigen Instanzen. 3. B. Man muss sich den Einsatz von Grafik-Symbolen gut überlegen, aber es gibt dennoch gute Gründe dafür.

Tag 13 1. C. Auch wenn eine Schaltfläche nur ein Bild pro Zustand zur Verfügung stellt, kann man über Filmsequenzen beliebig viele Bilder animieren. 2. A. Das lässt sich leider nur über mehrere Master-Symbole regeln, da die Einbindung des Sounds im Master-Symbol erfolgt. Aber Achtung: Die Dateigröße nimmt dabei zu! 3. B. Genauso werden unsichtbare Schaltflächen erzeugt.

Tag 14 1. C. Beachten Sie, dass man keine Aktionen in Master-Symbole einbringen kann! Natürlich kann man in Filmsequenz-Master-Symbolen Aktionen für Schlüsselbilder und Schaltflächen festlegen, aber das wird in C mit abgedeckt. 2. B. Das ist eine recht allgemeine Aussage und somit die beste Definition. Sie werden über Funktionen noch mehr in Anhang E lernen. Wenn man es genau betrachtet, sind Aktionen eher Methoden. 3. C. Es gibt wirklich keine Grenze.

541

Antworten zu den Übungsaufgaben

Tag 15 1. C. Man gibt entweder den Namen der Instanz an oder lässt Flash die aktuelle Filmsequenz auswählen, indem man das Ziel-Feld leer lässt. 2. B. Auch wenn man Variablen auf andere Weise initialisieren kann, ist das nicht notwendig. Man kann einfach loslegen, wenn man sie braucht. 3. C. Diese Frage war gemein, da es tatsächlich eine _visibility-Eigenschaft gibt, über die wir allerdings noch nichts gelernt haben. Wenn _visibility den Wert 0 hat, ist die Filmsequenz unsichtbar. Beim Wert 1 erscheint sie aber wieder. Was ich eigentlich nur zeigen wollte, ist, dass man viele Eigenschaften auch von Hand verändern kann.

Tag 16 1. A. Das ist eine perfekte Definition. Die Benutzeroberfläche aus Antwort C ist optional. 2. C. Jeder könnte eine Smart-Filmsequenz erstellen. 3. C. Der Name stammt lediglich von den alten Radioknöpfen, die eine exklusive Senderauswahl ermöglichten.

Tag 17 1. C. Sie können ja einmal VORSCHAU FÜR VERÖFFENTLICHUNGEN ausprobieren. Hier werden Sie ein Ergebnis sehen. 2. B. Sie haben nun eine Idee, was man mit HTML machen kann. 3. C. Man kann sowohl statischen Text als Hyperlink definieren als auch in dynamischem Text HTML-Code anzeigen (wodurch Hyperlinks indirekt möglich sind).

Tag 18 1. C. Man kann nur einen Film pro Level-Nummer laden. 2. C. Ja, man kann die Rotation einer Stufe genauso verändern wie die einer Filmsequenz (Beispiel: _level1._rotation=180). 3. A. Nur eine Person kann gleichzeitig die geteilte Bibliothek zur Bearbeitung öffnen.

542

Tag 19

Tag 19 1. B. Technisch gesehen sind die Antworten a und c Bestandteile der Antwort, ich will aber ausdrücklich darauf hinweisen, dass die Benutzeroberfläche zwischen Ihrem Anwender und dem Inhalt steht. Es sind einerseits die sichtbaren Elemente auf dem Bildschirm und andererseits die Funktionalität dieser Elemente. 2. C. Ich habe oft gehört, Antwort a sei richtig, ich vermute, das beruht auf einer Studie darüber, an wie viele Elemente ein Anwender sich erinnern kann. Ein Anwender kann jedoch viele Elemente »überfliegen«. Können Sie beispielsweise Ihr Lieblingsmüsli in einem Supermarktgang voller Müslis finden? Natürlich. Abhängig von der Situation können Sie so viele Schaltflächen haben, wie nötig sind. 3. B. Ich finde, dass eine Titelzeile auf dem Bildschirm, die der Bezeichnung auf der Schaltfläche entspricht, definitiv den ausgewählten Status anzeigt. Antwort c habe ich (als eine falsche Antwort) eingefügt, weil diese Hinweise nicht wie Regeln betrachtet werden sollen, denen man unbedingt folgen muss. Es sind schlicht und einfach Hinweise.

Tag 20 1. B. Antwort C ist eindeutig falsch, weil die Ladezeit von Flash-Filmen unabhängig von ihrer Größe ist. Antwort A ist nicht ganz falsch, weil man wirklich nicht genau sagen kann, wie lange eine Datei zum Laden braucht. Wenn Sie die Größe jedoch halbieren, können Sie sicher sagen, dass es doppelt so schnell gehen wird. Denken Sie an eine halbe Brotscheibe – es wird (im Gegensatz zu einer ganzen Scheibe) halb so lange dauern, sie zu essen. 2. C. Obwohl Spezialeffekte an der richtigen Stelle gut sein können, können sie doch ablenken, die Dateigröße erhöhen und die Leistung verringern. Dies sind alles gute Gründe, sie zu vermeiden. 3. B. Der Bandbreiten-Profiler berücksichtigt nur die Dateigröße und die Leistung. Wenn sich die Frage auf eine langsame Verbindung statt auf einen langsamen Computer bezogen hätte, wäre Antwort A richtig gewesen.

543

Antworten zu den Übungsaufgaben

Tag 21 1. C. Das Modell wurde der Wirklichkeit entlehnt. Stauchen Sie einmal einen Ball und Sie werden sehen, wie sich der Ball ausdehnt. 2. C. Wir haben die Bewegung nicht modifiziert, weil Sie vielleicht dann ganz gut aussieht, sondern weil das Verhalten des Balls der Wirklichkeit entsprechen soll. Es soll vor allem realistisch ausschauen. 3. B. Wir sind nicht hier, um physikalische Prinzipien akkurat aufzuzeigen. Vielmehr geht es um das Resultat – nur dieses zählt.

Anhang A 1. A. Eine gute Trennung zwischen Programmcode und Daten erleichtert die Suche nach Fehlern immens und macht das Ganze sehr viel transparenter. 2. C. Es schadet zwar niemandem, die komplette Präsentation zu sehen, es ist jedoch gemeint, dass anhand eines kleinen Projektausschnittes ein kompletter Projektdurchlauf simuliert wird, um Rückschlüsse auf den Ablauf des gesamten Projektes gewinnen zu können. 3. B. KOPIEREN aus dem Menü BEARBEITEN kopiert die markierten Daten in die Zwischenablage.

Anhang B 1. C. Der Debugger versorgt Sie nur mit Informationen, er kann nicht Ihren Film durchforsten. 2. A. Wenn Sie zwei Sachen gleichzeitig machen und beide funktionieren nicht, ist es sehr schwierig, das Problem in den Griff zu bekommen. 3. A. Behalten Sie im Kopf, dass nur jene Dateien das Potential haben, mit dem Debugger erforscht zu werden, denen der Programmierer auch die entsprechende Erlaubnis zugewiesen hat.

544

Anhang C

Anhang C 1. C. Das beste Dateiformat ist immer abhängig von der Natur der Datei und dem Einsatzzweck. Fotorealistische Grafiken schauen am besten im JPG-Format aus. Geometrische Figuren werden hingegen besser als GIF dargestellt. 2. B. Gut programmierter HTML-Code fängt die Situation ab und informiert den Anwender darüber, dass er keinen Flash-Player im Browser installiert hat. 3. C. Es ist möglich, andere Export-Formate zu definieren. 4. A. Flash ist nicht in der Lage, QuickTime-Videos in einen Flash-Film zu importieren. Sie können nur einzelne statische Bilder in Flash einfügen. Sie können weiterhin einen Flash-Film in ein QuickTime-Video importieren.

545

Die CD-ROM zum Buch

h n A

I g an

Die CD-ROM zum Buch

Diesem Buch liegt eine CD-ROM bei, in der einige der Aufgaben im Unterverzeichnis \BUCHDATEN\SOURCE als .fla-Dateien abgelegt sind. In \BUCHDATEN\EBOOKS ist das vorliegende Buch im HTML-Format abgelegt. Ordner

Datei

Aufgaben/07

Sonne.fla

Aufgaben/07

Strichmännchen.fla

Aufgaben/08

Jo-Jo.fla

Aufgaben/09

Kreisverformung.fla

Aufgaben/11

Ebenen.fla

Aufgaben/11

Text im Rahmen.fla

Aufgaben/12

Zahlen.fla

Aufgaben/13

Audio Schaltfläche.fla

Aufgaben/14

Auto.fla

Aufgaben/14

Stop Play Stop.fla

Aufgaben/14

Willkommen.fla

Aufgaben/15

Verschiebbares Quadrat.fla

Aufgaben/18

haupt.fla

Aufgaben/18

rot.fla

Aufgaben/18

gruen.fla

Aufgaben/18

blau.fla

Aufgaben/21

Auto-Perspektive.fla

Aufgaben/21

Flugzeug.fla

Aufgaben/21

Springball.fla

Aufgaben/21

Zaun.fla

Tabelle I.1: Die Quell-Dateien der Aufgaben

Die Testversionen folgender Tools finden Sie unter \PROGRAMME. 쐽

Swish 1.52

쐽

Director 8

쐽

Dreamweaver 3

쐽

Dreamweaver UltraDev 3

쐽

Fireworks 4

548

쐽

Freehand 9

쐽

Flash 5

Das Verzeichnis \DIENSTE schließlich versorgt Sie mit Free- und Shareware-Tools, die Ihnen ebenfalls bei der Erstellung von Webseiten behilflich sein werden sowie mit aktuellen Versionen gängiger Browser.

549

Stichwortverzeichnis ! _blank 358 _level0 363 _parent 342, 358 _self 358 _top 358 3D-Kugel 515

A

abbremsen 190, 198 Abspielen 229 Abspielkopf 41, 161, 173, 196 ActionScript 224, 301, 521, 532 ActionScripting-Anwendungen 315 additive Grundfarben 116 ADPCM 235 Adressierung 265 Adressleiste 42 Aktion 277 Aktionen 277, 287 –, evaluate 324 –, Get URL 304 –, Go To 292 –, gotoAndPlay 291 –, gotoAndStop 383 –, if 339 –, Load Movie 362 –, onClipEvent 301 –, onMouseEvent 298 –, Play 297 –, setProperty 327 –, startDrag 316 –, Stop 296 –, stopDrag 317 –, Tell Target 305 –, Unload Movie 368 –, with 305 Aktivbereich 532 Aktiv-Zustand 275 Alpha 117, 150, 193

Alternativen zu Flash 392 andocken 497 anfangen 199 Animationen 160, 171 –, Effekte 242 –, Grafiken 532 –, Konzept 160 –, Schaltflächen 278 –, Techniken 419 –, Tools 420 –, Typen 164 Animationstechniken, traditionelle Ansicht 31 –, breite 146 Antizipation 423 Anwender 25 –, er hat immer Recht 377 –, Erwartungshaltung 423 –, täuschen 422 Anwenderfreundlichkeit 390 Arbeitsaufwand minimieren 143 Arbeitsoberfläche 24, 136 Array 336 Artefakt 106 Audio 220 Audio-Dateien 484 Aufmerksamkeit 423 Auf-Zustand 272 ausblenden 228 ausgerichtet 250 auswählbar 70 Auswahl 497 Auswahl, darin malen 84 Auto 336 Autor 25 AVI 493

420

B

Bandbreiten-Profiler 402, 484 Basis-Aktionen 292

551

Stichwortverzeichnis

Bedienfelder 24, 33 –, Absatz 37 –, Aktion 302 –, Bild 190 –, Effekt 149, 194 –, Farbmischer 63, 115, 379 –, Farbtöne 116 –, Füllung 33f. –, Info 36 –, Instanz 262 –, Linie 72 –, Sequenzparameter 343 –, Sound 222 –, Text 24 –, Text-Optionen 322 –, Textoptionen 69 –, transformieren 79 –, Zeichen 34, 37 Bedienfeldsets 38 Bedingung 339 beenden 199 begradigen 58, 80 Beispiel-Dateien 456 Benutzerinformationen 316 Benutzername 359 Benutzeroberfläche 43, 247 –, erstellen 375 beschleunigen 190, 198 Betrachter, s. Anwender 25 Bewahren der Vollständigkeit 448 Bewegung 181, 191 –, vortäuschen 422 Bewegungsabläufe 420 Bewegungstween 189, 199, 397 –, Regeln 192 Bibliothek 39, 135, 532 –, verwenden 143 Bibliotheken, gemeinschaftliche 438, 442 Bild 161 Bilddarstellung 178 Bilder, mehrere bearbeiten 179 Bild-für-Bild-Animation 108, 172, 532 Bildmarkierung 294 Bildpunkt 105 Bildrate 46, 161, 532

552

Bitmap 52 –, Dateien 398, 400 –, Grafik 532 –, Sequenzen 107, 493 Bit-Tiefe 233 Blink-Effekte 421 boolsche Ausdrücke 522 Breiten-Höhen-Relation 26 Browserfenster 358 Brute-Force-Methode 468 Bühne 24, 532 Bühnengröße 26

C CD-ROM 547 Code-Data-Separation

439

D Darüber-Zustand 272 Dateien mit hoher Auflösung 401 Dateiformate –, .act 117 –, .ai 91 –, .aif 221 –, .aiff 221 –, .bmp 99 –, .eps 93 –, .fh9 91 –, .gif 99 –, .jpg 99 –, .mp3 221 –, .pct 99 –, .png 99 –, .swf 91 –, .wav 221 Dateigröße 88, 136, 392 Dateigröße des Films reduzieren 392 Dateitypen 24, 46 –, .fla 46 –, .htm 46 –, .html 46 –, .swf 46 Deaktivieren 235 Debugger 456 –, benutzen 469 Debugging 467

Stichwortverzeichnis

Design der Benutzeroberfläche Designer, s. Autor 25 Design-Standards 387 Digital-Audio 232 Dimmer-Cursor 123 Dimmer-Effekt 121 Dokumentation 450 Drag&Drop 316 Drehen 77, 193, 200 Drücken-Zustand 272 dynamischer Text 357, 396

E

Ebene 41, 166, 239, 497, 532 –, als Kontur anzeigen 243 –, Typen 246 Effekte 228, 288 effektive Geschwindigkeit 163 Effizienz 136, 236, 310 Eigenschaften 146 –, _alpha 326 –, _framesloaded 365 –, _rotation 326 –, _totalframes 365 –, _x 326 –, _y 326 –, hausgemachte 329 einblenden 228, 243 Einstellungen, globale 24 Einstellungen für Veröffentlichungen 48 Elemente einer guten Benutzeroberfläche 377 Ellipse 64, 122 Ende einer Animation 426 Endposition 197 Endpunkt 229 Entmüllungs-Technik 463 Ereignis 225, 277 Ereignis-Audio 233 Erschütterungen 433 Ersetzen 291 Experten-Modus 290 Export 94, 532 –, andere Medientypen 493

376

F Fabrik-Einstellungen 39 Farbe, keine 63 Farbeimer-Werkzeug 31 Farben 31 –, ersetzen 117 Farbmischer 115 Farbpalette 114 Farbrad 517 Farbschwelle 107 Farbsystem 117 Farbtöne, selbst definieren 114 Farbton 114, 149, 193f. Farbverlauf 114 Fehler, beheben 467 Fehler simulieren 422 Feintuning 197, 211 Feld 336 Fenster 33 –, anvisieren 358 Fenstermodus 486 Fernsehen 168 Fettdruck 70 Figuren 497 file transfer protocol, s. FTP 359 Film 168 –, anvisieren 305 –, Eigenschaften 45 –, Sequenz 137 –, Sequenzen 259, 305, 522 Fireworks 240 Fläche, kleinste 107 Flash –, Player 47 –, Umgebung 24 –, Version 485 Flash-4-Format 481 Flimmer-Effekt 182 Fokus 241, 532 Formmarken 206, 211 Formtweens 205, 397 –, Regeln 207 –, vermeiden 215 Fotos 88 Freehand 89, 98 FTP 359 Führungs-Ebene 240, 244, 246, 532

553

Stichwortverzeichnis

Füllung 60, 394 –, Bedienfeld 33 –, Farbe 75, 114 –, Muster duplizieren 118f. –, Muster hinzufügen 116 –, sperren 61, 120 –, transformieren 61, 84, 120 fünfeckiger Stern 505 Full-Path-Review 439 Funktionalität überprüfen 388 Funktionen 523 Funktionsweise einer abgeschlossenen Arbeit 457

H Haarlinie 59 Halbkreis 498 Hauptanimation 262 Helligkeit 149, 193 Hilfslinien 28 Hintergrundfarbe 45 Hintergrundmusik 231

554

387

I Illustrator 91 Import 87, 533 Info-Bedienfeld 36 Instanz 39, 136, 533 Instanzen von Symbolen in Symbolen verwenden 153 Interaktivität 315 interface-design 389 Internet 351 Internetfarben 114 interpolierte Bilder 209

G Geräteschriftart 486 Geräusche 220 Geschwindigkeit 198 –, relative 430 Gestaltungselement 377 Gitternetz 28 Glätten 58, 80 Glossar 531 Grafik –, Import 88 –, Symbole 259, 533 Grafiken 414 Grenzen 247 Größeneinstellungen 430 große Projekte 437 Grundbegriffe 160 Grundfarben 116 Grundlagen 23 Grundlagen der Programmierung Gruppen 38, 128 Gummiband 74

Höhen-Breiten-Relation 26 Horizontlinie 428 HTML 352, 485, 533 Hülle 228 –, Anfasser 228 –, bearbeiten 228 –, Kurve 228 human computer interface design Hyper Text Markup Language, s. HTML 352 Hyperlink 355, 533

J Jojo 197 JPG-Grafik

483

K

316

Kanal 228 Kantenschwelle 107 Kippwinkel 193 Komponenten einer Animation Kompressionsrate 484 Komprimierung 105 Kontrolle der perspektivischen Ansichten 433 Kontur, anzeigen als 248 Konturfarbe 246 Konzept der Bibliothek 137 Koordinaten 37, 533 Koordinatensystem 37 Kopieren und Transformierung anwenden 79

160

Stichwortverzeichnis

Kreis 64, 122 kreisförmiger Farbverlauf Kugel 515 kursiv 70 Kurven optimieren 414 Kurvenanpassung 107

119

L Ladezeiten 402 –, kalkulieren 393 Lasso-Werkzeug 31 leere Flächen als Gestaltungselement 386 leere Schlüsselbilder 164, 533 Leinwand, s. Bühne 25 Leinwand-Ebene 125 Leistungssteigerung 464 Lernressourcen zum Thema Flash Lineal 533 Linie 56, 58, 394 Linientypen 415 Linien-Werkzeug 31 Link 355 linker Kanal 228 Lippensynchronität 264 Liste 336 Listserver 457 Login 359 Loop-Sound 229 Lückengröße 61

456

M Mac 336 Macintosh-Projektor 488 mailto 359 Malen, innen 62 Markierungen 78 Maske 244, 253, 420, 533 Massiv 59 Master 136 Master-Symbol 136 Masterversion 140 Maus zentrieren 320 Maus-Ereignis, Stop 296 Menü –, Ansicht 26, 28f., 32, 50, 53, 55, 57, 63, 80, 83, 129, 141, 214

–, Bearbeiten 72, 83, 95, 126, 141 –, Datei 27, 30, 90, 97, 222, 233, 304, 352 –, Einfügen 41, 137, 141, 165, 167, 172, 181, 241 –, Fenster 29ff., 34f., 39f., 53, 57, 100, 223, 288, 334 –, Hilfe 27f. –, Lineale 83 –, modifizieren 45, 77, 84, 105, 124, 128, 133, 162, 182, 207, 209, 212, 214, 382 –, Optionen 145 –, Steuerung 162, 174, 248, 273 –, Zwiebelschalenmarkierung ändern 179 Menüelement, behandeln als 280 Menüpunkt –, 2 Zwiebelschalen 179 –, 5 Zwiebelschalen 179 –, abspielen 162, 174 –, Aktionen 288 –, alle Marken löschen 214 –, alle Zwiebelschalen 179 –, allgemeine Bibliotheken 223, 334 –, als gemeinsame Bibliothek öffnen 370 –, an Position einfügen 126 –, anordnen 128 –, Arbeitsbereich 26, 50, 53 –, ausrichten 57, 80, 129 –, ausschneiden 141 –, bearbeiten 30, 145 –, Bedienfelder 34, 57, 335 –, Bedienfelder-Layout speichern 39 –, Bedienfeldsätze 39 –, Beispiele 28 –, Bibliothek 40, 100 –, Bild 167, 181 –, Bild einblenden 141 –, Bild exportieren 97 –, Bitmap nachzeichnen 105 –, Ebene 41, 241, 382 –, Einstellungen 83, 95 –, Einstellungen für Veröffentlichungen 233, 353 –, Entsperren 244

555

Stichwortverzeichnis

–, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –, –,

556

Film 45, 162 Film exportieren 355 Film testen 174 Form 84, 209 Formmarke hinzufügen 212 Formmarken anzeigen 214 Gitternetz 28 gruppieren 128 Gruppierung aufheben 129, 133 Hilfslinien sperren 29 importieren 90, 222 in den Hintergrund 128 in den Vordergrund 129 in Schlüsselbilder konvertieren 182 in Symbol konvertieren 137 Kopieren 126 Lektionen 27 Lineale 29 Linie 57 Linien in Füllungen konvertieren 84, 209 Markierungen immer anzeigen 179 Markierungen verankern 179 nach hinten 129 nach vorne 129 neues Symbol 141 öffnen 27 Rotieren 79 Rückgängig 72 Schaltflächen aktivieren 273 Schleife 248 Schlüsselbild 165, 172 Sequenzparameter 335 Sequenzparameter definieren 342 skalieren 79 Skalierungen 141 Smart-Filmsequenzen 334 Sounds 223 Standard 304 Standardlayout 39 Symbolleisten 29f. teilen 124, 207 transformieren 77, 212, 214 vergrößern 63 Verknüpfung mit benutzerdefinierter Oberfläche 343 veröffentlichen 352f.

–, Vorschau für Veröffentlichungen 304, 352 –, Werkzeuge 31, 53 –, Zeitleiste 32 Menüpunkte, Bedienfelder 35 modulare Internetseiten 361 Modus, normal 290 Mono 228 Morph 206, 533 Morphing 205 mouseDown 301 mouseUp 301 MP3 235

N Namenskonventionen 438, 450f. natürlicher Ausdruck 422 Navigation 41 Newsgruppen 457 nichtlineare Filme 287

O Oberfläche 533 Oberfläche, sukzessiver Aufbau 422 Objekt 522 –, Aktionen 297 –, ausrichten als 78, 80, 211 –, auswählen 71 –, entfernen 290 –, hinzufügen 290 –, isolieren 124 Online-Anbieter 359 Online-Tutorials 457 Optimierung einer Flash-Site 391 Optionen 31 Optionsköpfe 387 Optionsmenü 138 Optionspfeil 60 Ordner, neuer 146 Overkill 426

P Panning 534 Parameter 534 Parameterbereich ein/aus Pausen integrieren 180 Performance 412

290

Stichwortverzeichnis

Perspektive, hinzufügen 428 Pfad 240, 250 –, ausrichten als 252 –, hinzufügen 244 Pfeil-Werkzeug 31 Philosophie der kleinen Schritte 461 PhotoShop 117, 240 Pinsel –, Art 62 –, Form 62 –, Größe 61 Pipette 75 PNG 483 Polygon-Modus 74 Preloader im Bandbreiten-Profiler 410 Produktionskonzepte, traditionelle 438 Produktivität 136 Programmierer 316 Projektor 489 Prozess der Fehlersuche 467 Publikation, Optionen 483 Publikum 25 Publizieren 477 Publizierungseinstellungen 478

Q Quell-Dateien 47 QuickTime 221, 478, 491, 534

R Rad 501 Radio Buttons 345 räumlicher Würfel 511 Rahmen-Ebene 358 Rahmenform 247 Raster 534 Rastergrafik 52, 88, 398, 484, 534 –, als Füllung 123 –, in Vektorgrafiken konvertieren 105 RAW 235 RealPlayer 478, 491 Rechteck 64 rechter Kanal 228 release 297 Ressourcen 525

RGB 116 Rohe-Gewalt-Technik 172 Rolle definieren 438 Rotations-Cursor 123 Rotieren 78 Ruckeleffekt 164 Rückmeldung einer Schaltfläche

378

S Sample-Rate 232 Schaltfläche 153, 271, 534 –, behandeln als 280 –, Bezeichnung 379 –, entwerfen 377 –, erweiterte 278 –, mit Sound 281 –, Symbol 534 –, Zustand 534 Schleifenstart 294 Schlüsselbilder 164, 397, 420, 534 Schriftart 24, 33 Schriftgröße 33, 291 Schrubben 162 Script-Technologien 456 Selbstkritik 463 Simulation von Tiefe und Perspektive 420, 428, 430 Skalieren 26, 77, 193 Smart Clips 438, 444 Smart-Filmsequenz 334, 444, 534 Sortierreihenfolge 146 Sound 219, 398 Soundkarte, Sound 222 Spannungsaufbau 423 Speichen in einem Rad 501 Sperren 243 Spezialeffekte –, unerwünscht 412 –, unnötige 392 Standardfarben laden 117 Standard-Kontrollkästchen 387 Standbild 161 Standpunkt der Kamera 433 Start 225 Startposition 197

557

Stichwortverzeichnis

Test-Film 174 Text –, Absatz 395 –, Begrenzung 69 –, Block 69 –, Effekte 124 –, Eingabe 322 –, Eingaben mit eingebetteten Schriften 396 –, erstellen 68 –, Optionen 69 –, teilen 395 Tinte 58 Ton 220 Ton-Dateien 398 Ton-Formate, alle 222 Trace-Aktion 468 Transparenz 117 Trennen von Programmiercode und Daten 439 Tweening 167, 191

Startpunkt 229 statischer Text 70 Stereo 228 Stern 505 Stiftart 79 Stop 225 Stopp 229 Stream 226 Stream-Audio 233 Streaming von Sound-Dateien 413 Streamline 106 Strichmännchen 172 Strings 522 Stroboskop-Effekt 421 Stufen 363 Suchen 291 Symbol 39, 136, 534 –, bearbeiten 145 –, erstellen 136 –, grafisches 414 –, neues 146 Symbolleisten 29 –, Standard 29 –, Startleiste 29 –, Status 29 –, Steuerung 29 –, Werkzeuge 29 –, Werkzeugkasten 29 Symbol-Wechsel-Technik 440 Sync 225 Syntax 290 –, farbig anzeigen 291 Szene 42, 303, 534 –, bearbeiten 145

U Uhrzeigersinn 200 Uhrzeigersinn, gegen den 200 Uhrzeigersinn, im 200 Unschärfe 422 Unterauswahl-Werkzeug 31 Urheberrecht 220 URL 304

V

T Tangente 67 Team- oder Projektleiter 439 Teamstruktur 439 Teamumgebungen 437 Techniken, herkömmliche 423 Techniken zur Steigerung der Arbeitseffizienz 456 Templates 438, 444 Territorium von Flash 195, 209 Testen von Rollen und Strukturen

558

439

Variablen 321, 522 Vektorgrafik 52, 88, 90, 534 Verantwortlichkeiten 438 Vergrößern 55, 229 Vergrößerungsanzeige 55 Vergrößerungsgrad 77 Vergrößerungs-Steuerelement 28 Vergrößerungsstufe 27 Verhalten 152 Verkleinern 229 veröffentlichen im Internet 352 Verschiebe-Cursor 121 Vertiefen der erworbenen FlashKenntnisse 455

Stichwortverzeichnis

vorgerendert 266 Vorlage 444 Vorschau 175 –, Bild 103 –, Fenster 146 –, im Kontext 175

X

W

Zahlen 522 Zeichen-Bedienfeld 37 Zeichengeräte 25 Zeichenketten 522 Zeichentechniken, fortgeschrittene 113 Zeichnen-Werkzeugleiste 27 Zeitleiste 25, 32, 165 Zeitlinie 260 Zwiebelschalen 178 Zwiebelschalenkonturen 179 Zwiebelschalen-Werkzeug 172, 535

Warnmeldungen anzeigen 486 Wdh 229 Web 117 Wellen 513 Werkzeuge 29 –, Ellipse 64 –, Farbeimer 31, 60 –, Hand 28, 54 –, Lasso 31, 71 –, Pfeil 31, 35, 53, 71 –, Pipette 75 –, Rechteck 64 –, Stift 65 –, Unterauswahl 31 –, Vergrößerung 54 –, Zwiebelschalen 172, 178 Werkzeugkasten 25, 29 Wert 322 Win 336 Windows-Projektor 488 Würfel 511

X-Achse

37

Y Y-Achse

37

Z

559