Sie sind auf Seite 1von 165
Flash & Actionscript 2 Version 2.6 Stand 29.Juni 2008 DI Brigitte Jellinek Skriptum für meine

Flash

&

Actionscript 2

Version 2.6 Stand 29.Juni 2008

DI Brigitte Jellinek

Skriptum für meine Lehrveranstaltungen im Rahmen des Sommerstudiums informatica feminale in Bremen, des Sommerstudium ditact in Salzburg und des Studiengangs MultiMediaArt der Fachhoch- schule Salzburg

Inhaltsverzeichnis

1 GRUNDLAGEN UND USP

5

1.1 USP: Vektorgrafik

6

1.2 USP: Animation

7

1.3 USP: Interaktion

8

1.4 USP: Multimedia

12

1.5 Überlegter Einsatz von Flash

13

2 FLASH GUI UND ZEICHNEN

14

2.1 Überblick über die Flash-GUI

14

2.2 Zeichnen mit Flash

15

2.3 Gruppieren und Teilen

19

2.4 Grafiken und Bilder importieren

20

2.5 Flash-Film testen und exportieren 21

2.6 Flash im Web

23

24

25

25

26

2.8 Andere Export-Formate

2.7 Swf Object statt HTML

21

3 EBENEN UND MASKEN

3.1 Ebenen in Flash

3.2 Masken in Flash

4 WIEDERVERWERTUNG MIT SYMBOLEN 28

4.1 Symbole

4.2 Die Bibliothek

4.3 Austausch von Daten

5 ZEIT UND ANIMATION

5.1 Die Zeitleiste

5.2 Bild-für-Bild Animation

5.3 Bewegungstween

5.4 Komplexe Bewegungen

5.5 Formtween

6 MOVIECLIPS – FILM IM FILM

6.1 Einsatz von MovieClips

7 BUTTONS

7.1 Buttons in Flash

7.2 Wiederverwertung

8 AUDIO UND VIDEO EINBINDEN

8.1 Audiodatei einbetten

8.2 Video Streaming

8.3 FLV-Video abspielen

9 ACTIONSCRIPT

28

30

32

33

33

35

36

39

41

42

45

46

46

48

50

50

51

52

54

9.1 Entwicklungsumgebung 55

9.2 Hilfe

58

9.3 Wo ist der Code?

59

9.4 Namen

60

9.5 Hilfsmittel für die Fehlersuche

61

9.6 Fragen und Übungsaufgaben

64

10.1 Navigation

66

10.2 Drag and Drop

67

10.3 Andere Flash-Filme laden

68

10.4 Fragen und Übungsbeispiele

69

11 STEUERUNG VON ZEITLEISTEN

70

11.1 Stop und Play

70

11.2 Film mit alternativem Ende

71

11.3 Objekte, Methoden, Eigenschaften 74

11.4 Spielfigur steuern

76

11.5 Weitere Übungsbeispiele

78

12 VARIABLEN UND VERZWEIGUNGEN

79

12.1 Variablen

79

12.2 Verzweigungen

83

12.3 Puzzle mit Erfolgskontrolle

84

12.4 Preloader

86

12.5 Fragen und Übungsaufgaben

87

13 ZEICHNEN, FARBEN UND FUNKTIONEN 90

13.1 Zeichnen mit Actionscript

90

13.2 Funktionen

92

13.3 Farbe auf ein MovieClip übertragen

94

13.4 Extra –für Actionscript-Profis:

97

14 MEHR ZEICHNEN MIT SCHLEIFEN

98

14.1 Ein Muster aus Linien Zeichnen

98

14.2 Übungsaufgaben

101

15 MOVIECLIPS ERZEUGEN

104

15.1 Beispiel „Tapete“

104

15.2 Instanzen dynamisch erzeugen

104

15.3 Lösungsansatz

106

15.4 Objekte mit variablem Namen

106

15.5 Verschachtelte Schleife

108

15.6 Für Profis: 2d ohne Verschachtelung

109

15.7 Übungsaufgaben

110

16 ONENTERFRAME UND HITTEST

112

16.1 Zeichnung neu aufbauen

114

16.2 Uhr

114

16.3 Bühne und Maus

115

16.4 Ball im Spielfeld

115

16.5 Ball und Hittest

118

16.6 Viele Projekte

119

17 AUDIO UND VIDEO ASYNCHRON

120

17.1 Audio streamen

120

17.2 Variablen für Flash in HTML setzen

123

17.3 Video steuern

124

18 ARRAYS

126

18.1 Beispiele: Glückskeks + Quiz

126

18.2 Arrays

127

18.3 Lösungsansatz Glückskeks

131

18.4 Übungen

132

18.5 Lösungsansatz Quiz

132

18.6 Übungsaufgaben

136

19 VOM SERVER LADEN

137

19.1 Einfache Daten laden

138

19.2 XML für Slideshow

139

20 AUSBLICK

142

ANHÄNGE

144

Zielpublikum und Lesetechnische Hinweise

20.1 Literatur

144

20.2 Online-Quellen

144

20.3 Abbildungsverzeichnis

145

20.4 Index

147

20.5 Lösungen zu Kapitel 9

149

20.6 Lösungen zu Kapitel 10

152

20.7 Lösungen zu Kapitel 11

153

20.8 Lösungen zu Kapitel 12

154

20.9 Lösungen zu Kapitel 13.1

157

20.10 Lösungen zu Kapitel 13.2

158

20.11 Lösungen zu Kapitel 14

160

20.12 Lösungen zu Kapitel 15

163

20.13 Lösungen zu Kapitel 16

165

Dieses Dokument entstand über mehrere Jahre als Begleitung für verschiedene Lehrveranstaltungen. Ich danke meinen StudentInnen – insbesondere am Studiengang MultiMediaArt – für Fragen und Hin- terfragen.

Dieses Skriptum setzt die professionelle Anwendung der Betriebssysteme Windows bzw. MacOS, Er- fahrung in der Erstellung von Webseiten mit HTML und CSS, und Erfahrung im Umgang mit Grafik- Programmen und Multimedia-Daten voraus. Die Handhabung von Maus und Tastatur, von Menüs und Standard-Dialogen ist daher nicht Inhalt dieses Skriptums.

Die Illustrationen im Skriptum stammen aus verschiedenen Versionen von Flash für Windows und Flash für Apple.

Programmierkenntnisse werden nicht vorausgesetzt.

Grundlagen und USP:

USP: Vektorgrafik

1 Grundlagen und USP

Was ist Flash, was kann Flash, für welche Aufga- benstellungen ist der Einsatz von Flash sinnvoll?

Flash ist ein Programm der amerikanischen Adobe (seit diese im Jahr 2005 Macromedia aufgekauft hat). Dieses Programm ist eine Authoring-Umgebung, die letztlich Dateien mit der Endung *.swf 1 generiert. Wenn diese sog. Small-Web-Format-Dateien mit Hilfe eines Plugins in einem Webbrowser angezeigt werden, sind sie interaktive, multimediale Applikationen.

A KTUELLE V ERSION:

multimediale Applikationen. A KTUELLE V ERSION : Die im Alltag übliche Bezeichnung „Flash“ wird

Die im Alltag übliche Bezeichnung „Flash“ wird sprachlich für unterschiedliche Inhalte angewandt:

1. Das Programm „Macromedia Flash“, also die Authoring-Umgebung mit der Flash- Applikationen erstellt werden.

mit der Flash- Applikationen erstellt werden. 2. Die mit diesem Programm erzeugten Da- teien, erkennbar

2. Die mit diesem Programm erzeugten Da- teien, erkennbar am Symbol oder an der En- dung *.fla. Diese Dateien sind das Basisma- terial und dienen der weiteren Bearbeitung.

das Basisma- terial und dienen der weiteren Bearbeitung. 3. Die mit diesem Programm erzeugten Endprodukt-Dateien,

3. Die mit diesem Programm erzeugten Endprodukt-Dateien, man erkennt Sie am Symbol oder an der Endung *.swf. Diese Da- teien sind für die Publikation im Web gedacht. In diesem Skriptum werden diese Dateien auch „Flash-Movies“ genannt.

4. Das Plugin, das zusätzlich zum Webbrowser installiert sein muss, um das Abspielen von Flash-Applikationen im Webbrowser zu er- möglichen.

5. Die gesamte Technologie, also die Gesamtheit der Punkte 1 bis 4.

1 Auf Englisch manchmal als „swiff“ ausgesprochen

Grundlagen und USP:

Als Web-Technologie steht Flash in Konkurrenz zu HTML und Javascript, den im Web verwendeten Bild- formaten gif, jpg, png und dem Vektorgrafikformat SVG. In diesem Kapitel werden die wichtigsten Fä- higkeiten von Flash beschrieben, und jeweils die al- ternativen Technologien vorgestellt und diskutiert.

1.1 USP: Vektorgrafik

V EKTORBASIERT

Flash war und ist das am weitesten verbreitete vek- torbasierte Bild-Format im Web. Ein Flash-Movie, das nur Vektor-Grafiken (keine importierten Bitmaps, Audio- oder Video-Daten) enthält, ist von der Daten- menge her sehr klein. Vektorgrafik heißt auch, dass die in Flash gezeichneten Bilder skalierbar sind – also in verschiedenen Größen ohne Qualitätsverlust ver- wendbar ist.

Größen ohne Qualitätsverlust ver- wendbar ist. Abbildung 1: Beispiel Flash-Movies: Stern als Standbild,

Abbildung 1: Beispiel Flash-Movies: Stern als Standbild, Stern als einfach Animation

Ein Beispiel zur Veranschaulichung der geringen Da- tenmengen im Vergleich zu gif und jpg: Abbildung 1 zeigt einen fünfzackigen Stern, einfärbig gelb mit schwarzer Kontur, einmal als Standbild, einmal als einfache Animation mit sich drehendem Stern:

 

Standbild

 

Animation

Bild-Grösse

Gif

Jpg

Flash (swf)

Flash (swf)

200

x 200 Pixel

1.729

Byte

3.830 Byte

138

Byte

410

Byte

600

x 600 Pixel

5.466

Byte

15.780 Byte

138

Byte

410

Byte

Abbildung 2: Dateigrößen der Flash-Movies in Abbildung 1 im Vergleich zu gif und jpg

USP: Animation

Beachten Sie, dass dieselbe swf-Datei für 200x200 und für 600x600 Pixel verwendet wurde! Die swf-Datei ist ohne Mehrdaten skalierbar.

Abbildung 3 veranschaulicht die Möglichkeit der Ska- lierung ohne Qualitätsverlust. Sie zeigt ein Flash- Movie im Vergleich zu einem gif. Beide Bilder wurden von 200x200 auf 600x600, also auf die 3-fache Höhe und Breite, bzw. 9-fache Fläche skaliert:

3-fache Höhe und Breite, bzw. 9-fache Fläche skaliert: Abbildung 3: Stern, skaliert SVG („scalable vector

Abbildung 3: Stern, skaliert

SVG („scalable vector graphics“), ein XML-basiertes, vom w3c entwickeltes und empfohlenes Format, ist ebenfalls – wie der Name sagt – skalierbar.

A LTERNATIVE SVG

Das SVG-Plugin, das zur Darstellung notwendig ist, ist jedoch wenig verbreitet. SVG hatte eine Zeit lang die Unterstützung von Adobe, um es als Konkurrenz zu Flash zu etablieren, seit Adobe Flash aufgekauft hat ist das hinfällig.

1.2 USP: Animation

Mit Flash lassen sich einfache Filme erstellen und sehr datensparend abspeichern. In diesem Skriptum werden die verschiedenen Arten der Animation in Flash vorgestellt. Neben der klassischen „Bild für Bild“-Animation sind das der Bewegungstween und der Formtween.

Im Falle der „Bild für Bild“-Animation“ gibt es eine Alternative zu Flash: das animierte Gif. Abbildung 4 zeigt die einzelnen Bilder eines solchen animierten

Grundlagen und USP:

Gifs, so wie sie im Programm „Animation Shop“ darge- stellt werden.

sie im Programm „Animation Shop“ darge- stellt werden. Abbildung 4: (historisches 2 ) Beispiel für eine

Abbildung 4: (historisches 2 ) Beispiel für eine „Bild-für-Bild“- Animation

Um aus einzelnen Bildern ein animiertes Gif zusam- men zu stellen, können Sie verschiedene Grafikpro- gramme verwenden, u.a. Animation Shop, Macrome- dia Fireworks, Adobe ImageReady. Das Ergebnis ist jeweils eine einzige Gif-Datei.

Animierte gifs werden von einem größeren Teil der Browser im Internet korrekt dargestellt als Flash- Animationen. Aber: Sie haben meist eine größere Da- teigröße. Bei der Entscheidung zwischen Animiertem gif und Flash müssen Sie diese beiden Argumente gegeneinander abwägen.

1.3 USP: Interaktion

Das Web ist an und für sich schon eine interaktive Technologie: die NutzerIn ist eben nicht nur LeserIn der Seite, sie kann Links anklicken (oder auf eine an- dere Art aktivieren) um zu navigieren, sie kann For- mulare ausfüllen und einsenden. Links sind von An- fang an, Webformulare seit HTML Version 2.0 (1995)

MEHR ALS LINKS UND FORMULARE

Teil des HTML-Standards.

Als „interaktive Webseite“ bezeichnen wir im Fol- genden also Webseiten, die mehr Interaktionsmög-

2 Im Jahre 1995 stellte die Firma Netscape zwei Technologien für Animation vor: Server Push und Client Pull. Die hier gezeigte Ani- mation war das erste Beispiel. Beide Technologien werden übrigens von aktuellen Browser-Versionen nicht mehr unterstützt, sie wur- den von animierten gifs verdrängt.

USP: Interaktion

lichkeiten als Links und Formulare anbieten. Dazu gehören insbesondere alle Interaktionen die zwischen BenutzerIn und Browser erfolgen, ohne daß – wie beim Aktivieren eines Links oder beim Einsenden eines Formulars - eine Netzwerkverbindung zum Web- server benutzt wird.

Ein einfaches Beispiel ist ein „Rollover-Bild“, das sich verändert, wenn die NutzerIn die Maus über das Bild bewegt.

Eine negative Eigenschaft von interaktiven Webseiten kann die verminderte Barrierefreiheit (Accessability) sein: Diese fortgeschrittene Interaktion ist nur mit grafischen Webbrowsern möglich, nicht aber mit text- basierten, solchen mit besonders kleinem Display, solchen die die Seite nicht grafisch sondern auditiv darstellen (vorlesen) oder als Braille-Schrift ausgeben. Interaktion bedeutet also für viele UserInnen eine interessantere Website, und für einige UserInnen eine nicht mehr lesbare, nicht mehr zugängliche Website.

eine nicht mehr lesbare, nicht mehr zugängliche Website. Abbildung 5: Rollover-Bild als Beispiel für einfache

Abbildung 5: Rollover-Bild als Beispiel für einfache Interaktion

ZUGÄNGLICHKEIT = A CCESSABILITY

Interaktive Webseiten können Sie auch mit HTML und Javascript (und CSS) gestalten. Diese Technologi- en haben eine wechselhafte Geschichte hinter sich. Javascript wurde ursprünglich von der Firma Netsca- pe erfunden und dann von anderen Browserherstel- lern übernommen. In den verschiedenen Browsern und Versionen gab es immer wieder Unterschiede in der Interpretation der Javascript-Programme. Ein Beispiel: um die Breite des Browser-Fensters auszu- messen gibt es mehrere Varianten:

funktioniert in Netscape und Mozilla

funktioniert in Internet Explorer

ALTERNATIVE DHTML

x

x

= window.innerWidth;

= document.body.clientWidth;

Im Gegensatz zu HTML, wo kleine Unterschiede in der Interpretation durch die Browser zu kleinen Dar- stellungsunterschieden führen (ein Bild wird einen Millimeter weiter links oder weiter rechts dargestellt, ein Link ist unterstrichen oder nicht,…), führen Un- terschiede in der Interpretation von Javascript zu Fehlermeldungen (siehe Abbildung 6) und nicht mehr funktionierenden Interaktionen – die Seite wird also unbrauchbar.

Grundlagen und USP:

Grundlagen und USP: Abbildung 6: Javascript Fehlermeldungen Um diese Probleme zu beheben wurde Javascript auf zwei

Abbildung 6: Javascript Fehlermeldungen

Um diese Probleme zu beheben wurde Javascript auf zwei Arten Standardisiert. Die Syntax, also die all- gemeine Schreibweise der Sprache, wurde als EC- MASkript 3 von der „European Computer Manufactu- rers Association“ standardisiert. Der zweite Teil der Standardisierung ist das Document Object Model (DOM), ein allgemeines Modell wie die Webseite (das Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden kann. Dabei wird ein HTML- (oder XML-)Dokument als Baum interpretiert, wie in Abbildung 7 gezeigt.

als Baum interpretiert, wie in Abbildung 7 gezeigt. <html> <head> <title>WWW und

<html> <head> <title>WWW und Multimedia</title> </head> <body>

<h1>Bestell-Formular</h1>

<div id="vorne"> <img id="picvorne" src="nix.gif" alt="tshirt" width="250" height="250" />

</div> <div id="hinten"> <img id="pichinten" src="nix.gif" alt="tshirt"

width="250" height="250" />

</div>

</body>

</html>

Abbildung 7: HTML-Dokument und DOM, dargestellt im Firefox DOM Inspector

Doch selbst bei Verwendung des DOM gibt es immer noch kleine Unterschiede zwischen den Browsern. Eine gute Informationsquelle dazu ist quirksmo-

de.org von Peter-Paul. Auf jeden Fall ist die Situati-

on durch die Einführung des DOM besser geworden, wenn die Veränderung auch sehr, sehr langsam ge- schah. Es reicht ja nicht, wenn ein Browser-Hersteller den neuen Standard umsetzt. Es reicht auch nicht, wenn die neueste Versionen der Browser den Stan- dard unterstützen. Erst wenn genug von den „alten

3 http://www.ecma-international.org/publications/standards/Ecma-

262.htm

USP: Interaktion

Versionen“ ausgetauscht wurden, wenn wirklich ge- nug Leute die neuen Versionen installiert haben, erst dann kann man den neuen Standard auch benutzen.

Für Javascript+DOM war ca. 2005 dieser kritische Level an Verbreitung erreicht. Es erschienen immer mehr Webapplikationen die Javascript und die DOM konsequent einsetzten. In Kombination mit dem XMLHTTPRequestObject, das das asynchrone Nach- laden von Daten ermöglicht, konnte so eine neue Qua- lität von Interaktion erreicht werden. Ein Beispiel für diese Art von Interaktivität ist das in Abbildung 8 gezeigt Autocomplete-Eingabefeld.

AJAX

das in Abbildung 8 gezeigt Autocomplete-Eingabefeld. AJAX Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us In

Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us

In diesem Beispiel hat die Leserin erst einen Buchsta- ben in das Eingabefeld eingetippt: „a“. Diese Eingabe wurde über das XMLHTTRequestObject an ein server- seitiges Skript gesandt, dass eine Datenbankabfrage durchführt. Das serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste von Na- men:

<ul>

<li>ameier</li>

<li>amüller</li>

<li>ahuber</li>

<li>achovski-grauhuber</li>

</ul>

Dieses HTML-Fragment wird vom Javascript- Programm im Client mittels DOM in die Webseite eingefügt. Durch ein Stylesheet erscheint die HTML- Liste nicht als Liste sondern wie in der Abbildung gezeigt.

Im Februar 2005 verwendete Jesse James Garrett für diese Kombination von Javasript und Nachladen vom

Grundlagen und USP:

Server zum ersten Mal die Abkürzung AJAX 4 . Seither entstanden viele Webseiten die diese Technologie- Kombination nützen, und eine Reihe von Program- mierhilfe, die die Entwicklung unterstützen.

V ERGLEICH F LASH AJAX

AJAX hat Flash an einigen Stellen wieder verdrängt.

Flash hat im Vergleich zu AJAX weniger Kompatibili- täts-Probleme: es gibt nur ein Flash-Plugin, es wird von der Firma Adobe herausgegeben und funktioniert in allen Browsern, auf den Plattformen Windows, Mac OS und Linux gleich. Alte Flash-Filme funktionieren bei der Betrachtung mit einem neuen Flash-Plugin immer.

Die Entscheidung zwischen AJAX oder Flash für eine interaktive Website ist also eine Entscheidung zwi- schen proprietärer Technologie und Stabilität auf der einen Seite, und einer standardisierten, aber instabi- leren Technologie auf der anderen Seite.

1.4 USP: Multimedia

Es gibt verschiedene Methoden Audio und Video in Webseiten einzubinden.

Mit einem einfachen Link zu einer Audio- oder Video- Datei kann diese Datei zum Download und zum Ab- spielen angeboten werden. Das funktioniert meist sehr gut, es gibt dabei kaum etwas zu gestalten.

Mit den HTML-Tags <EMBED> oder <OBJECT>, können Dateien jedes Formats direkt in ein HTML-Dokument eingebunden werden. Die Darstellung übernimmt dann ein Browser-Plugin. Da auf den verschiedenen Computern im Web verschiedene Plugins installiert sind, ist es nicht möglich vorherzusagen wie die Dar- stellung genau erfolgen wird. Diese Methode ist also fehleranfälliger (bei fehlendem Plugin) und bietet trotzdem kaum mehr Gestaltungsmöglichkeiten als ein Link.

4

http://www.adaptivepath.com/publications/essays/archives/000385.p

hp

Überlegter Einsatz von Flash

Mit dem Format SMIL, das vor allem von Real Player unterstützt wird, können Audio- und Video-Dateien (synchronisiert) abgespielt werden.

In einem Flash-Movie können Audio- und Video-Daten entweder eingebettet werden, oder als externe Datei mittels Streaming abgespielt werden.

Flash bietet mit der FLVPlayback-Komponente eine einfache Art einen ‚Standard-Player’ zu erstellen, aber auch alle Möglichkeiten, die Oberfläche und die Inter- aktion zu gestalten. Die Möglichkeiten der Synchroni- sation sind zwar beschränkt, aber im Vergleich zu den anderen besprochenen Methoden noch immer am Be- sten.

1.5 Überlegter Einsatz von Flash

Die bisher angeführten USPs von Flash sollten Sie nicht falsch verstehen. Flash ist für gewisse Aufga- benstellungen sehr gut oder am Besten von allen aktuellen Technologien geeignet. Das heißt nicht, dass Flash für jede Aufgabenstellung geeignet ist.

Sie müssen bei jedem Projekt einzeln entscheiden (und argumentieren können), ob ein Einsatz von Flash sinnvoll oder störend wäre.

Bedenklich ist der Einsatz von Flash insbesondere bei Informationsseiten und bei Seiten mit hohem An- spruch an Barrierefreiheit. Alle Flash-Seiten haben das Problem, dass Sie in Suchmaschinen nicht gefun- den bzw. nicht einzelne Seiten annavigiert werden können.

Argumente für den Einsatz von Flash sind die oben angeführten USPs.

In manchen Fällen mag es sinnvoll sein, eine Flash- Version und eine Flash-lose Version einer Website zu entwickeln. Aber Achtung: dieser Ansatz bedeutet die doppelte Arbeit in der Entwicklung, und wieder dop- pelte Arbeit in der Wartung der Site. Es besteht die Gefahr, dass die „zweite Version“ nie fertig entwickelt wird und/oder nicht gewartet wird. Das ist dann schlimmer, als nur eine Version zu haben.

nicht gewartet wird. Das ist dann schlimmer, als nur eine Version zu haben. Abbildung 9: FLVPlayback

Abbildung 9: FLVPlayback Komponente

Flash GUI und Zeichnen:

2 Flash GUI und Zeichnen

Flash funktioniert weder wie ein klassisches bit- map-orientiertes Grafikprogramm, noch wie ein klassisches vektor-orientiertes Grafikprogramm. Flash zu lernen, heißt also ein neues Zeichen- Modell zu lernen.

2.1 Überblick über die Flash-GUI

Ebenen und Zeitleiste Diverse Fenster Werkzeuge Bühne Eigentschaften Hinterbühne
Ebenen und
Zeitleiste
Diverse
Fenster
Werkzeuge
Bühne
Eigentschaften
Hinterbühne

B ÜHNE + H INTERBÜHNE

W ERKZEUGE

E IGENSCHAFTEN

Abbildung 10: Die Teile der Flash GUI

Die Bühne ist Ihr erster Orientierungspunkt. Auf der Bühne zeichnen Sie. Anders als in anderen Program- men können Sie in Flash auch „neben“ der Bühne zeichnen. Ein Beispiel für einen sinnvollen Einsatz:

ein Auto soll „durch das Bild fahren“. Sie zeichnen es also neben der Bühne, und erstellen dann die Anima- tion, die das Auto durch die Bühne bewegt.

Wie in den meisten Grafik-Programmen finden Sie am linken Rand des Programms die Werkzeug-Leiste. Aber Achtung: Die Werkzeuge funktionieren etwas anders als in anderen Grafikprogrammen.

Im unteren Teil des Fensters können Sie die Eigen- schaften des jeweils auf der Bühne markierten Ob- jekts verändern. Das Eigenschafts-Fenster funktio- niert also wie im Programm Dreamweaver. Je nach- dem welches Objekt markiert ist, sieht das Eigen- schafts-Fenster auch unterschiedlich aus.

Zeichnen mit Flash

Am rechten Rand des Programms können verschiede- ne Fenster eingeblendet werden. Über das Menü „Fenster“ können Sie Fenster einblenden und aus- blenden. Wenn Sie eine gute Zusammenstellung von Fenstern gefunden haben, können Sie diese Zusam- menstellung mit dem Menüpunkt FENSTER BEDIENFELDSATZ SPEICHERN unter einem Namen abspei- chern.

Dieser Teil der GUI ist komplex. Zuerst werden Sie nur die Ebenen verwenden. Sie funktionieren ähnlich wie in anderen Grafik-Programmen. Die Zeitleiste verwenden Sie zur Erstellung von Animationen und für verschiedene Zustände von interaktiven Applika- tionen.

Die Menüs von Flash entsprechen den üblichen Kon- ventionen. Besonderes Augenmerk sollten Sie dem Menü MODIFIZIEREN schenken. Im Zweifelsfall finden Sie hier alles was Sie brauchen und nicht finden kön- nen.

2.2 Zeichnen mit Flash

FENSTER

E BENEN + ZEITLEISTE

MENÜS

Kommen wir nun zur Vorstellung des speziellen Zei- chen-Modells von Flash. Für eine detailliertere Be- schreibung der verschiedenen Werkzeuge verwenden Sie bitte die Flash-Hilfe bzw. eines der unzähligen Bücher über die Handhabung von Flash.

Wenn Sie in Flash einen Kreis zeichnen, besteht die- ser aus einer Füllung und einer Kontur. Diese beiden Elemente haben unterschiedliche Aufgaben. Sie müs- sen mit beiden gezielt arbeiten können. Abbildung 11 zeigt wie Flash es darstellt, wenn die Füllung mar- kiert ist, bzw. wenn die Kontur markiert ist.

FÜLLUNG VS. KONTUR

darstellt, wenn die Füllung mar- kiert ist, bzw. wenn die Kontur markiert ist. F Ü L

Flash GUI und Zeichnen:

Abbildung 11: Füllung markiert vs. Kontur markiert

Beim Erstellen des Kreises passen Füllung und Kon- tur ineinander. Im Verlauf der weiteren Arbeit können Sie beide trennen. Dabei werden Sie bemerken, dass Flash sich nicht wie andere vektororientierte Pro- gramme verhält: Wenn Sie die Füllung auf die Kontur legen, und dann noch einmal verschieben, dann wird die Kontur „abgebissen“ wie Abbildung 12 zeigt.

wird die Kontur „abgebissen“ wie Abbildung 12 zeigt. O BJEKTZEICHNUNG (J) Abbildung 12: Die Füllung hat
wird die Kontur „abgebissen“ wie Abbildung 12 zeigt. O BJEKTZEICHNUNG (J) Abbildung 12: Die Füllung hat

O BJEKTZEICHNUNG (J)

Abbildung 12: Die Füllung hat einen Teil der Kontur gelöscht

Dieses Verhalten von Flash können Sie gezielt für die Gestaltung einsetzen. Wenn Sie dieses Zeichnungsmo- dell nicht verwenden wollen, können Sie auf das Ob- jektzeichnungsmodell umschalten. Dann wird beim Zeichnen z.B. eines Kreises die Füllung und die Kon- tur automatisch gruppiert. Die dabei entstandene Gruppe erkennt man an der blauen Box, die angezeigt wird, sobald die Gruppe selektiert wird. Von einer Gruppe wird nichts „abgebissen“, das in Abbildung 12 gezeigte Phänomen tritt nicht auf.

das in Abbildung 12 gezeigte Phänomen tritt nicht auf. Abbildung 13: der rechte Kreis wurde mit

Abbildung 13: der rechte Kreis wurde mit dem Objektzeich- nungsmodell gezeichnet

Zeichnen mit Flash

Mit dem Auswahlwerkzeug (Tastaturkürzel: V) kön- nen Sie die Kontur verformen wie in Abbildung 14 gezeigt.

KONTUR BEARBEITEN

verformen wie in Abbildung 14 gezeigt. K ONTUR BEARBEITEN Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug

Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug

Wenn eine Kontur markiert ist, und das Auswahl- werkzeug ausgewählt ist, dann werden am unteren Rand des Werkzeug-Fensters die Symbole für „glät- ten“ und „begradigen“ aktiv, mit dem Sie die Kontur schrittweise verformen können.

KONTUR GLÄTTEN / BEGRADIGEN

verformen können. K ONTUR GLÄTTEN / BEGRADIGEN Abbildung 15: Kontur glätten bzw. begradigen Mit dem

Abbildung 15: Kontur glätten bzw. begradigen

Mit dem Unter-Auswahl-Werkzeug (Tastaturkürzel A) können Sie eine Kontur auch bearbeiten. Dann verhält sich die Kontur wie in einem vektor-orientierten Pro- gramm. Die Kontur ist durch Ankerpunkte und Tan- genten definiert, sie können die Ankerpunkte ver- schieben, und die Tangenten verändern wie in Abbildung 16 gezeigt.

KONTUR VEKTORBASIERT BEARBEITEN

in Abbildung 16 gezeigt. K ONTUR VEKTORBASIERT BEARBEITEN Abbildung 16: Kontur mit Ankerpunkten und Tangenten bear-

Abbildung 16: Kontur mit Ankerpunkten und Tangenten bear- beiten

Flash GUI und Zeichnen: Die Unterscheidung zwischen Kontur und Füllung zieht sich durch die gesamte

Flash GUI und Zeichnen:

Die Unterscheidung zwischen Kontur und Füllung zieht sich durch die gesamte Werkzeugleiste: Es gibt ein Werkzeug um eine Kontur zu Zeichnen (das Frei- handwerkzeug, Tastaturkürzel Y) und eines um eine Füllung zu zeichnen (das Pinselwerkzeug, Tastatur- kürzel B)

Mit dem Tintenfaßwerkzeug (Tastaturkürzel S) kön- nen Sie um eine Füllung eine neue Kontur legen. Mit dem Farbeimerwerkzeug (Tastaturkürzel K) können Sie in eine Kontur eine Füllung einfüllen, wie in Abbildung 17 gezeigt.

eine Füllung einfüllen, wie in Abbildung 17 gezeigt. L INIEN IN F ÜLLUNGEN UMRECHNEN Abbildung 17:

L INIEN IN F ÜLLUNGEN UMRECHNEN

Abbildung 17: Tintenfass- und Farbeimer-Werkzeug

Es gibt auch eine Möglichkeit eine Kontur (insbeson- dere eine Kontur mit hoher Strichstärke) in eine Fül-

lung zu verwandeln: MODIFIZIEREN FORM LINIEN IN

FÜLLUNGEN KONVERTIEREN. In Abbildung 18 sehen Sie den Effekt dieser Umwandlung.

. In Abbildung 18 sehen Sie den Effekt dieser Umwandlung. Abbildung 18: Kontur und Füll ung

Abbildung 18: Kontur und Füllung (konvertiert), Verformung beider

Diese Umwandlung hat auch zur Folge, dass andere Arten der Verformung möglich sind. In Abbildung 18 sehen Sie auch den Effekt des Auswahlwerkzeuges auf die Kontur und die Füllung, die aus der Kontur ent- stand. Einmal wird die Linie verbogen, einmal wird die Begrenzung der Fläche verformt.

Gruppieren und Teilen

Abschließend noch einmal der Hinweis auf die Flash Hilfe, und auf die vielen Bücher, die die Handhabung von Flash im Detail erklären. Aber es gilt natürlich:

Wirklich erlernen können Sie das Zeichnen mit Flash nur durch die praktische Arbeit mit dem Tool.

Falls Sie ein Zeichenbrett – insbesondere ein druck- empfindliches Zeichenbrett – besitzen, können Sie dieses für die Arbeit mit Flash verwenden.

Was Sie auf jeden Fall verwenden können und sollten ist die Tastatur: Die Verwendung der Tastaturkürzel zum Wechseln des Werkzeuges beschleunigt die Arbeit mit Flash enorm, da Sie den Maus-Zeiger dadurch auf der Bühne belassen, und schneller Zeichnen können. Links sehen Sie die Tastaturkürzel aller Werkzeuge.

2.3 Gruppieren und Teilen

Wie in vielen Grafikprogrammen gibt es in Flash die Möglichkeit verschiedene Objekte zu einer Gruppe zusammen zu fassen – zu gruppieren. Diese Möglich- keit wird relativ selten genutzt, da bessere Methoden zur Strukturierung zur Verfügung stehen – Symbole, insbesondere MovieClips (siehe Kapitel 0).

Um eine Gruppe wieder in die einzelnen Objekte zu zerlegen, benutzen Sie die Funktion MODIFIZIEREN ->

GRUPPIERUNG AUFHEBEN oder RECHTE MAUSTASTE ->

TEILEN. Diese Funktion hat noch eine andere Verwen- dung: Sie können damit Texte teilen, wie in Abbildung 19 gezeigt.

H

ILFE

E

INGABEGERÄTE

in Abbildung 19 gezeigt. H ILFE E INGABEGERÄTE G RUPPIEREN STRG-G T EILEN S TRG -B

GRUPPIEREN

STRG-G

TEILEN

STRG-B

E INGABEGERÄTE G RUPPIEREN STRG-G T EILEN S TRG -B Abbildung 19: Text, einmal geteilter Text,

Abbildung 19: Text, einmal geteilter Text, zweimal geteilter Text, veränderte Form des Texts

Wird ein Text einmal geteilt, dann wird er dadurch in einzelne Buchstaben zerlegt, die aber immer noch Text-Objekte sind. Wird er daraufhin noch einmal geteilt, werden die Buchstaben in Formen, um genau

Flash GUI und Zeichnen:

zu sein: in Füllungen verwandelt. Danach können Sie die üblichen Werkzeuge verwenden um die Füllung zu verformen.

2.4 Grafiken und Bilder importieren

V EKTORGRAFIK

Sie können Grafiken die Sie in einem anderen Grafik- programm gezeichnet haben in Flash importieren, so können Sie die Stärken der verschiedenen Programme kombinieren.

Wenn Sie Bitmap-Bilder in Flash importieren, dann bleiben sie Bitmap-Bilder.

Bitmap-Bilder können von Flash in Vektor-Bilder um- gewandelt werden, dieser Prozess wird als „Nach- zeichnen“ bezeichnet, Sie starten ihn mit

MODIFIZIEREN BITMAP NACHZEICHNEN:

starten ihn mit M ODIFIZIEREN B ITMAP N ACHZEICHNEN : Abbildung 20: Bitmap, Detail, Vektor-Nachzeichnung dieses

Abbildung 20: Bitmap, Detail, Vektor-Nachzeichnung dieses Details

Abbildung 20 zeigt eine Bitmap mit Dimensionen 640x480 die in Flash eingefügt und nachbearbeitet wurde (die Figur wurde schwarz übermalen). Die swf- Datei mit der Bitmap ist 47 KB groß. Dann wurde die Bitmap als Vektor nachgezeichnet. Die swf-Datei mit Vektorgrafik ist nur 11 KB groß. Sie enthält – wie man in der Abbildung sieht – viel weniger Details.

PNG

Wenn Sie png-Dateien importieren können bleibt der Alpha-Kanal auch in Flash aktiv.

Flash-Film testen und exportieren

2.5 Flash-Film testen und exportieren

Wie auf Seite 5 erwähnt, generiert Flash zwei ver- schiedene Dateien: fla-Dateien für die weitere Bear- beitung, und swf-Dateien als Endprodukt. Wenn Sie eine Datei speichern erzeugen Sie damit eine fla- Datei.

Die schnellste Möglichkeit eine swf-Datei zu erstellen, ist die Tastenkombination STRG-ENTER. bzw. mit

dem Menüpunkt DATEI VORSCHAU FÜR

VERÖFFENTLICHUNG FLASH. Abbildung 21 zeigt links die Statusanzeige während der Vorbereitung der Vor- schau (Export des Films).

STRG-ENTER

Vorbereitung der Vor- schau (Export des Films). STRG-ENTER Abbildung 21: Film wird export iert, GUI für

Abbildung 21: Film wird exportiert, GUI für den Wechsel zu- rück zum Editor

Bei dieser Art der Vorschau wird die Applikation di- rekt im Flash Editor dargestellt – der Editor fungiert hier also als Player. Sie können das Player-Fenster wieder schließen, oder mit dem in Abbildung 21 rechts gezeigten GUI-Element zurück zum Editor wechseln.

2.6 Flash im Web

Bei der Vorschau für die Veröffentlichung wird neben der swf-Datei auch eine HTML-Datei erstellt. Diese Datei können Sie direkt im Browser öffnen, oder in einem Web-Editor wie Dreamweaver weiter bearbei- ten.

Achtung: in der HTML-Datei befinden sich die HTML- Tags <object>, <param> und <embed>, mit deren Hilfe die swf-Datei eingebunden wird. (Analog zum <img>– Tag und einer Bild-Datei) Die HTML-Datei alleine enthält nicht den Flash-Film! Beim Upload auf den Webserver muss auch die swf-Datei hochgeladen wer- den!

Betrachten wir die Kommunikation zwischen Client und Server im Web genauer:

Flash GUI und Zeichnen:

Flash GUI und Zeichnen: Abbildung 22: Kommunikation zw ischen Webbrowser (mit und Flash Player) und Webserver

Abbildung 22: Kommunikation zwischen Webbrowser (mit und Flash Player) und Webserver

Der Webbrowser stellt eine Anfrage an den Webserver (Pfeil 1 in Abbildung 23). Der Webserver antwortet in dem er z.B. HTML-Daten sendet (Pfeil 2).

Der Browser liest die HTML-Daten und stellt sie dar. Wenn ein <object> Tag enthalten ist der auf eine swf- Datei verweist dann stellt der Webbrowser eine weite- re Anfrage an den Server (Pfeil 1) um die swf-Datei zu laden. Der Server sendet die swf-Datei (Pfeil 2).

Nun startet der Browser den Flash Player als Plugin, und übergibt ihm die Kontrolle über einen Bereich des Browser-Fensters. Der Flash Player erhält die swf- Datei und stellt diese dar.

1.6.2 Flash und HTML

Abbildung 23 zeigt die Bearbeitung des für HTML- Codes für die Flash-Einbindung in Dreamweaver.

für HTML- Codes für die Flash-Einbindung in Dreamweaver. Abbildung 23 Bearbeitung des eingebundenen Flash-Films in

Abbildung 23 Bearbeitung des eingebundenen Flash-Films in Dreamweaver

Swf Object statt HTML

Eine Größenveränderung des Flash-Films, ist durch die Angabe von width- und height-Attributen im Co- de, oder durch Eingabe von Werten in die Felder B und H am Eigenschaftsfenster von Dreamweaver mög- lich. So eine Größenänderung mindert die Qualität nicht solange der Flash-Film keine Bitmaps enthält (siehe auch Kapitel 2.4, auf Seite 20).

GRÖSSE

Weitere Einstellungen die Sie im HTML-Code bzw. in Dreamweaver vornehmen können:

Die Hintergrundfarbe des Films

ob der Film in einer Endlos-Schleife wieder- holt werden soll

Wie der Film auf Verzerrungen bei einer Skalierung reagiert (siehe Abbildung 24)

bei einer Skalierung reagiert (siehe Abbildung 24) Abbildung 24: Skalierung des Flashfilms bei der Einbindung

Abbildung 24: Skalierung des Flashfilms bei der Einbindung in die Webseite

Normalerweise (SKALIEREN: STANDARD) wird der Flash- Film so weit verkleinert, dass er ohne Verzerrung in der zur Verfügung gestellten Fläche Platz hat. Mit SKALIEREN: KEIN RAHMEN wird der Film möglichst groß dargestellt, dabei werden eventuell Teile des Films abgeschnitten. Mit SKALIEREN: GENAU PASSEND wird der Film verzerrt.

2.7 Swf Object statt HTML

Mit diesem kleinen Javascript können Sie Flash noch bequemer einbinden.

Flash GUI und Zeichnen:

<script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> Hier würde ein kleiner Animations-Film angezeigt werden – wenn Ihr Browser Flash anzeigen könnte. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "flashcontent", "200", "100", "7", "#336699"); so.write("flashcontent"); </script>

so.write("flashcontent"); </script> Bei der Erzeugung des neue n SWFObjects müssen Sie

Bei der Erzeugung des neuen SWFObjects müssen Sie folgende Parameter angeben:

movie.swf – dieser Flash-Film wird angezeigt.

flashcontent – verweist auf die ID des HTML-Elements das durch den Flash-Film er- setzt wird.

200 – Breite in der der Flash-Film angezeigt wird

100 – Höhe in der der Flash-Film angezeigt wird

7 – Mindest-Anforderung an die Version des Flash-Plugins. Hier eine möglichst niedrige Zahl angeben! Kann bis auf die Revision an- gegeben werden, z.B. "6.0.65".

#336699 – Hintergrundfarbe

2.8 Andere Export-Formate

Sie können im Fenster DATEI EINSTELLUNGEN FÜR

VERÖFFENTLICHUNG auch andere Formate für die Publi- kation festlegen: swf und html sind die Standard- Formate.

gif, jpeg, png für Standbilder. In den Formaten exe (für Windows) bzw. hqx (für Mac) können Sie die Flash-Applikation als eigenständiges Programm exportieren. Das ist sinnvoll wenn auf dem Ziel- Computer kein Flash-Player installiert ist. Der Export als Quicktime ist nur möglich wenn die entsprechen- den Quicktime-Komponenten auf dem Computer mit der Authoring-Umgebung installiert sind.

Ebenen in Flash

3 Ebenen und Masken

Ebenen sind ein wichtiges Ordnungssystem für die Arbeit in Flash. Für Animationen mit Tweens werden Sie jeweils eigene Ebenen brauchen.

3.1 Ebenen in Flash

Das Ebenen-System von Flash unterscheidet sich in einem wichtigen Punkt vom Ebenen-System z.B. in Photoshop: Das Ausblenden einer Ebene hat in Flash nur im Editor eine Bedeutung, aber keine Auswir- kung auf das Endprodukt: im fertigen Flash-Film sind alle Ebenen sichtbar.

Jede Ebene kann einzeln ausgeblendet, gesperrt oder als Kontur dargestellt wer- den

Jede Ebene hat einen Namen

als Kontur dargestellt wer- den Jede Ebene hat einen Namen Ebenen-Ordner ein- fügen Pfad-Ebene einfü- gen

Ebenen-Ordner ein- fügen

Pfad-Ebene einfü-

gen

Ebene einfügen

ein- fügen Pfad-Ebene einfü- gen Ebene einfügen Ebenen im Editorausblenden Ebenen im Editor sperren Ebenen

Ebenen im Editorausblenden

einfü- gen Ebene einfügen Ebenen im Editorausblenden Ebenen im Editor sperren Ebenen im Editor nur als

Ebenen im Editor sperren

Ebenen im Editor nur als Kontur darstellen

Editor sperren Ebenen im Editor nur als Kontur darstellen Diese Ebenen wird derzeit bearbeitet A usgewählte

Diese Ebenen wird derzeit bearbeitet

Ausgewählte Ebene(n) löschen

Abbildung 25: Ebenen

O

RDNUNG

E

NTWICKLUNG

Ebenen und Masken:

Für die Arbeit an größeren Projekten sind Ebenen- Namen und Ebenen-Ordner wichtige Ordnungs- Werkzeuge. Da jede Animation eine eigene Ebene braucht wird die Zahl der Ebenen sehr schnell sehr groß.

Durch das Sperren einer Ebene wird verhindert, dass Objekte in dieser Ebene ausgewählt werden können. Häufig sperrt man alle Ebenen, und entsperrt dann nur eine mit der man arbeiten will.

3.2 Masken in Flash

In vielen Grafikprogrammen existiert das Konzept der Maske. Eine Maske ist eine Ebene die nicht selbst dargestellt wird. Der Maske sind andere Ebenen zuge- ordnet, die von der Maske beeinflusst werden. Diese Ebenen werden unsichtbar, außer an den Stellen, an denen in der Maskenebene etwas sichtbar ist.

In Abbildung 26 befinden sich in der Maskenebene zwei Kreise. In der linken Hälfte der Abbildung ist die Maske sichtbar. In der rechten Hälfte der Abbildung ist die Wirkung der Maske dargestellt.

der Abbildung ist die Wirkung der Maske dargestellt. Abbildung 26: Effekt einer Maske Um eine Maske

Abbildung 26: Effekt einer Maske

Um eine Maske in Flash zu erstellen, erstellen Sie zuerst eine normale Ebene, und weisen Ihr dann mit Rechtsklick im Fenster Eigenschaften die Eigenschaft „Maske“ zu, wie in Abbildung 27 gezeigt. Welche Ebe- nen der Maske untergeordnet sind und welche nicht könne Sie mit „Drag-and-Drop“ bestimmen: Ziehen Sie

Masken in Flash

eine Ebene nahe unterhalb die Maskenebene, dann wird sie dieser untergeordnet.

die Maskenebene, dann wird sie dieser untergeordnet. Abbildung 27: Erstellen einer Maske In einer Maske können

Abbildung 27: Erstellen einer Maske

In einer Maske können Sie später mit Bewegungs- und Form-Tweens für Bewegung sorgen.

Wiederverwertung mit Symbolen:

4 Wiederverwertung mit Symbolen

Ein wichtiges Ziel beim Erstellen eines Flash- Films ist es, die swf-Datei so klein wie möglich zu halten. Eine größere swf-Datei bedeutet längere Wartezeit für die BenutzerInnen.

Die Art mit der Sie bisher gezeichnet haben erzeugt „Originale“, und Originale tragen erheblich zur Da- teigröße der swf-Datei bei. Abbildung 28 zeigt ein Bei- spiel für einen Flash-Film der 18 sehr ähnliche Origi- nale enthält.

4.1
4.1

Abbildung 28: Beispiel für einen Film mit wiederholten Elementen

Die swf-Datei dieses Beispiels ist 1.148 Bytes groß. (Mit einem Stern war sie übrigens 108 Bytes groß).

Symbole

Flash bietet eine Alternative an, die Platz spart: Der Stern wird in ein „Symbol“ verwandelt. Dieses Symbol kann nun wiederholt im Film verwendet werden, braucht aber wesentlich weniger Speicherplatz. In diesem Beispiel: 347 Byte statt 1.148 Byte. Wird ein Symbol öfter wieder verwendet, verstärkt sich der Effekt, Abbildung 29 zeigt die Mess-Ergebnisse für 18 und 54 Wiederholungen eines Originals bzw. eines Symbols.

 

1 Stern

18 Sterne

54 Sterne

Mit Formen

108

Byte

1.148 Byte

3.440 Byte

Mit Symbolen

133

Byte

347 Byte

654 Byte

Abbildung 29: Größe von swf-Dateien im Vergleich bei Ver- wendung von Formen oder Symbolen 5

5 Konkret: bei Verwendung von MovieClip-Symbolen. Im Anhang finden Sie auch die Daten für Grafik-Symbole und Schaltflächen- Symbole

Symbole

Um ein Original in ein Symbol zu verwandeln ver- wenden Sie den Menüpunkt MODIFIZIEREN IN SYMBOL KONVERTIEREN oder die Taste F8. Sie müssen dem Symbol einen Namen geben. Flash unterscheidet drei Arten von Symbolen: MovieClip, Schaltfläche und Grafik. In einem späteren Kapitel werden Sie die spe- zielle Verwendung von Schaltflächen und MovieClips kennenlernen, Grafik-Symbole sind für die reine Wie- derverwertung von Formen gedacht. Abbildung 28 zeigt das entsprechende Fenster.

E RZEUGEN EINES SYMBOLS

zeigt das entsprechende Fenster. E RZEUGEN EINES S YMBOLS Abbildung 30: Dialog „i n Symbol konvertieren“

Abbildung 30: Dialog „in Symbol konvertieren“

Bei der Arbeit in Flash können Sie Originale und Symbole einfach unterscheiden: Wenn Sie ein Original selektieren wird es „gepunktet“ dargestellt. Wenn Sie ein Symbol auswählen erscheint ein Kasten rund um das Symbol und der „Registrierungs-Punkt“ des Sym- bols wird als kleines Plus angezeigt (meist mit einem Kreis darum, dem „Transformation-Punkt“). Siehe Abbildung 31.

darum, dem „Transformation-Punkt“). Siehe Abbildung 31. Abbildung 31: Original und Instanz eines Symbol, beide aus-

Abbildung 31: Original und Instanz eines Symbol, beide aus- gewählt

Von einem Symbol kann es mehrere Kopien auf der Bühne geben, diese nennt man dann Instanzen des Symbols. Die Instanzen können sich vom Symbol un- terscheiden: sie können eine andere Größe haben, sie können gedreht und/oder gespiegelt sein, sie können umgefärbt bzw. transparent bzw. heller oder dunkler sein.

I NSTANZEN

I NSTANZNAMEN

Wiederverwertung mit Symbolen:

I NSTANZNAMEN Wiederverwertung mit Symbolen: Verwenden Sie zum Verändern einer Instanz das Werkzeug „Frei

Verwenden Sie zum Verändern einer Instanz das Werkzeug „Frei transformieren“ (Tastaturkürzel Q) und das Eigenschafts-Fenster.

Die einzelnen Instanzen können einen Namen erhal- ten. Dies geschieht im Eigenschafts-Fenster, wie links in Abbildung 32 gezeigt. Rechts in der Abbildung 32 sehen Sie einen Ausschnitt aus dem Fenster FILM- EXPLORER. Hier sieht man, daß sich auf der Bühne vier Instanzen der Symbols Smilie befinden, die vier In- stanzen haben verschiedene Namen: maria_mc, han-

si_mc, peter_mc und susi_mc.

a _ m c , h a n - si_mc, peter_mc und susi_mc . Abbildung 32:

Abbildung 32: Symbolnamen und Instanznamen in den Eigen- schaften und im Film-Explorer

4.2 Die Bibliothek

Alle Symbole, die in einem Flash-Film enthalten sind, finden Sie in der Bibliothek. Die Bibliothek ist ein Fenster, das Sie mit dem Tastaturkürzel STRG-L oder mit F11 anzeigen können.

Options- Menü der Bibliothek
Options-
Menü der
Bibliothek

Abbildung 33: Das Bibliotheks-Fenster

Die Bibliothek

Im Bibliotheks-Fenster sollten Sie mindestens: Ein Symbol umbenennen können, die Eigenschaften eines Symbols ändern können, und (mit dem Optionsmenü) herausfinden können, welche Symbole gar nicht im Film verwendet werden.

Mit einem Doppelklick auf ein Symbol in der Biblio- thek können Sie das Symbol bearbeiten. Achtung: Das ist nicht das Gleiche wie eine Instanz auf der Bühne zu bearbeiten. Ob Sie gerade die Instanzen auf der Bühne bearbeiten oder ein bestimmtes Symbol bear- beiten, erkennen Sie an der Bearbeitungsleiste ober- halb der Ebenen:

SYMBOL BEARBEITEN

ober- halb der Ebenen: S YMBOL BEARBEITEN Abbildung 34: Bearbeiten des Dokuments vs. Bearbeiten des

Abbildung 34: Bearbeiten des Dokuments vs. Bearbeiten des Symbols „Stern“

Das linke Bild in Abbildung 34 zeigt die Bearbeitung der Haupt-Zeitleiste. Das rechte Bild zeigt die Bear- beitung des Symbols „Stern“ aus der Bibliothek. Mit derselben Bearbeitungsleiste können Sie auch zurück zum Bearbeiten des Dokuments wechseln, entweder mit dem „Zurück“-Pfeil oder indem Sie auf „Szene 1“ klicken.

Wenn Sie das Symbol verändern, verändern Sie damit auch alle Instanzen des Symbols wie Abbildung 35 zeigt: werden dem „SmilieMC“ in der Bibliothek Haare gezeichnet, dann wachsen allen „SmilieMC“-Instanzen auf der Bühne auch Haare.

a llen „SmilieMC“-Instanzen auf der Bühne auch Haare. Abbildung 35: Eine Veränderung des Symbols verändert alle

Abbildung 35: Eine Veränderung des Symbols verändert alle Instanzen

Wiederverwertung mit Symbolen:

4.3 Austausch von Daten

Die Bibliothek können Sie auch zum Austausch von Daten zwischen verschiedenen fla-Dateien verwenden:

Sie können zwei fla-Dateien im Flash-Editor öffnen und zwischen den beiden Bibliotheken wechseln wie in Abbildung 36 gezeigt.

Bibliothek auswählen Bibliothek vonplayers.fla
Bibliothek
auswählen
Bibliothek
vonplayers.fla

Bühne von

smilie.fla

Abbildung 36: Arbeiten mit einer fremden Bibliothek

Nun können Sie aus der „fremden“ Bibliothek ein Symbol auf die Bühne ziehen. Es wird dabei automa- tisch in die Bibliothek Ihrer fla-Datei übernommen.

Eine Besonderheit tritt auf, wenn das Symbol aus der anderen Bibliothek den gleichen Namen hat wie ein Symbol der eigenen Bibliothek. Es kann jeden Namen in der Bibliothek nur einmal geben. Flash zeigt den in Abbildung 37 gezeigten Dialog an, um dieses Dilemma zu lösen.

37 gezeigten Dialog an, um dieses Dilemma zu lösen. Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol

Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt

Wenn Sie das vorhandene Element ersetzten, bedeutet das, daß alle Instanzen des Symbols ersetzt werden. Wenn Sie es nicht ersetzen wird das Symbol aus der anderen Bibliothek nicht eingefügt.

Wenn Sie also an einem größeren Projekt - vielleicht mit mehreren Personen - arbeiten, dann sollten Sie bereits zu Beginn die Namen der wichtigen Symbole festlegen. Dieser Vereinbarung über die Symbol- Namen und die Symbol-Hierarchie kommt die gleiche Bedeutung zu wie der Vereinbarung über Dateinamen und Ordner in einem HTML-Projekt.

Die Zeitleiste

5 Zeit und Animation

Die Zeitleiste und die verschiedenen Animations- arten, die hier für Flash dargestellt werden, fin- den Sie auch in anderen Schnitt- und Animations- Programmen wie Aftereffects, Maya, FinalCut ähnlich wieder.

Flash unterteilt die Zeit in einzelne Bilder (auf Eng- lisch: Frames). Für den gesamten Flash-Film wird einmal die Bildrate (Bilder pro Sekunde / Frames per second) festgelegt, der Standardwert ist 12 Bps. In einem Flash-Film mit 12 Bps gibt es keine weitere Unterteilung der Zeit, es kann also in diesem Film keine Animation geben, bei der 25 verschiedene Bilder in einer Sekunde angezeigt werden.

5.1 Die Zeitleiste

Die Zeitleiste ist das Werkzeug mit dem Sie Animatio- nen erstellen.

ist das Werkzeug mit dem Sie Animatio- nen erstellen. Abbildung 38: Zeitleiste ohne Zeit und mit

Abbildung 38: Zeitleiste ohne Zeit und mit Zeit

In Abbildung 38 sehen Sie in der linken Hälfte den Zustand der Zeitleiste in einem neuen Flash- Dokument, die Zeitleiste enthält nur ein Bild. In der rechten Hälfte sehen Sie die Zeitleiste einer kleinen Animation.

Am oberen Rand der Zeitleiste sind die Bilder numme- riert, hier von 1 bis 10. Ein roter senkrechter Strich repräsentiert den Abspielkopf, der von links nach rechts von Bild zu Bild läuft. Sie können den Abspiel- kopf durch einen Klick auf ein bestimmtes Bild setzen, die Bühne zeigt dann den Zustand zu diesem Zeit- punkt, in diesem Bild an.

A BSPIELKOPF

S CHLÜSSELBILD

S CHLÜSSELBILD Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder Zeit und

Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder

Zeit und Animation:

In der Zeitleiste müssen Sie zwei Arten von Bildern unterscheiden: ein Schlüsselbild (markiert durch einen Kreis) kann eine Veränderung enthalten, ein normales Bild (ohne Kreis) bringt keine Veränderung gegenüber dem vorhergehenden Bild. Wie Sie in Abbildung 38 auch sehen können, kann jede Ebene eine andere Folge von Bildern und Schlüsselbildern enthalten.

Voraussetzung für die Arbeit mit der Zeitleiste ist, dass Sie die Bedeutung der Anzeige in der Zeitleiste lesen können.

Das erste Bild in Abbildung 39 ist grau und enthält einen schwarzen Kreis. So wird ein Schlüsselbild mit Inhalt dargestellt. Bild 2 ist weiß und enthält einen weißen Kreis, es ist ein leeres Schlüsselbild. Das heißt: der Inhalt, der in Bild 1 dargestellt wurde, verschwindet hier. Bild 3 ist ein leeres, normales Bild, es gibt also keine Veränderung zu Bild 2 (nix bleibt nix). Bild 4 ist ebenfalls ein leeres, normales Bild, da es aber das letzte normale Bild vor einem Schlüssel- bild ist, wird hier ein weißes Rechteck dargestellt (an- gezeigt wird immer noch nix).

Bild 5 ist wieder ein Schlüsselbild mit Inhalt, hier wird also ein neuer Inhalt dargestellt. Bild 6 ist ein normales Bild, der Inhalt von Bild 5 wird also weiter angezeigt. Bild 7 ist ein leeres Schlüsselbild, der In- halt verschwindet also. Danach gibt es keine Verände- rung mehr bis zum Ende des Films bei Bild 10.

Wenn Sie nun wissen wollen, welche Inhalte jeweils dargestellt werden, müssen Sie den Abspielkopf ent- sprechend setzen, und eventuell noch Ebenen ein- und ausblenden um herauszufinden, welche Elemente sich auf welcher Ebene befinden.

en, welche Elemente sich auf welcher Ebene befinden. Abbildung 40: Das Ende der Zeit – in

Abbildung 40: Das Ende der Zeit – in zwei Ebenen der Zeitleiste

Am „Ende der Zeit“ verschwinden alle Elemente auf Ebenen, die keine Bilder mehr enthalten. In Abbildung 40 ist im Bild Nr. 20 also der Inhalt von Ebene 1 und Ebene 2 schon verschwunden, nur Ebe- ne 3 ist noch sichtbar.

Bild-für-Bild Animation

Mit der Zeitleiste können Sie auf verschiedene Arten arbeiten:

Rechte Maustaste KONTEXTMENÜ

Menü EINFÜGEN ZEITLEISTE

(SCHLÜSSEL)BILD

Taste [F5] fügt ein Bild ein

Taste [F6] fügt ein neues Schlüsselbild ein

Taste [F7] fügt ein leeres Schlüsselbild ein

Mit der Maus

Das Bearbeiten der Zeitleiste verändert den Film:

ZEITLEISTE UND GESCHWINDIGKEIT

Bild einfügen = Zeit einfügen = Langsamer machen

Bild löschen = Zeit löschen = Schneller machen

Schlüsselbild einfügen = Bild kann sich ändern

Schlüsselbild löschen = Keine Änderung mehr

Die Zeitleiste ist die Grundlage für die verschiedenen Arten der Animation in Flash.

5.2 Bild-für-Bild Animation

Arten der Animation in Flash. 5.2 Bild-für-Bild Animation Abbildung 41: Zeitleiste einer Bild-für-Bild Animation Die

Abbildung 41: Zeitleiste einer Bild-für-Bild Animation

Die Bild-für-Bild Animation entspricht im Arbeitsauf- wand und in den Möglichkeiten dem Daumenkino: Sie zeichnen jedes Bild einzeln.

Unterstützung beim Zeichnen bietet die Darstellung mit Zwiebelschalen. Dabei werden wie in Abbildung 42 gezeigt die Bilder vor und nach dem aktuellen Bild auch dargestellt, aber etwas abgeschwächt.

Zeit und Animation:

Aktivieren der Darstellung
Aktivieren der
Darstellung

Abbildung 42: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung

Die Einzelbilder für die Bild-für-Bild Animation kön- nen z.B. aus einem Video entnommen sein, wie im Projekt „Bujaka“ von Herrmann, Hohnheiser und Scherr (MMA2005), das im Abbildung 43 gezeigt.

und Scherr (MMA2005), das im Abbildung 43 gezeigt. Abbildung 43: Bild-für-Bild Animation aus Einzelbildern

Abbildung 43: Bild-für-Bild Animation aus Einzelbildern eines Videos

Im klassischen Trickfilm gab es eine Arbeitsteilung:

Der Chef zeichnet einige wichtige Keyframes. Die Hilfszeichner zeichnen die Bilder dazwischen (auf Englisch: „in between“). Diese Leute nannte man „In- betweener“. Diesen Job übernimmt jetzt Flash für Sie. Die automatisch erstellen Bilder nennt man immer noch „Tween“. Flash unterstützt zwei Arten von Tweens: den Bewegungstween und den Formtween

5.3

Bewegungstween

Der Bewegungstween dient nicht nur der Bewegung, er kann auch für die Veränderung von Alpha (Grad der Transparenz), Farbton, Größe, Drehung und Ver- zerrung eines Symbols eingesetzt werden.

Bewegungstween

Abbildung 44 zeigt einen Bewegungstween, der wirk- lich für Bewegung eingesetzt wird. Auf der Abbildung sind die drei Positionen des Symbols gleichzeitig ange- zeigt: ganz links für Bild 1, das erste Schlüsselbild. Ganz rechts für Bild 15, das zweite Schlüsselbild. Die Position bei Bild 8 wird durch den Tween automatisch berechnet.

bei Bild 8 wird durch den Tween automatisch berechnet. Abbildung 44:Bewegungstween Zur Erstellung eines

Abbildung 44:Bewegungstween

Zur Erstellung eines Bewegungstweens brauchen Sie eine Ebene die nur ein Symbol enthält, mit zwei Schlüsselbildern. Zwischen diesen beiden Schlüssel- bildern kann dann auf zwei Arten ein Tween erstellt werden, wie in Abbildung 45: Entweder durch Rechts- Klick in die Zeitleiste oder im Eigenschaften-Fenster.

Klick in die Zeitleiste oder im Eigenschaften-Fenster. Abbildung 45: Erstellung eines Tweens Ob die Erstellung des

Abbildung 45: Erstellung eines Tweens

Ob die Erstellung des Tweens gelungen ist, können Sie an der Zeitleiste und im Eigenschaftsfenster er- kennen, wie in Abbildung 46 gezeigt.

Zeit und Animation:

Zeit und Animation: Abbildung 46: Darstellung von korrektem und defektem Tween Gründe, warum die Erstellung des

Abbildung 46: Darstellung von korrektem und defektem Tween

Gründe, warum die Erstellung des Tweens fehlschla- gen könnte, sind:

- mehr als ein Symbol auf der Ebene

- kein Symbol, sondern ein Original auf der Ebene

- kein Schlüsselbild am Ende des Tweens

Wenn Sie diese Fehler korrigieren, wird der Tween funktionieren.

Wie anfangs erwähnt kann der Bewegungstween auch für die Veränderung von Alpha (Grad der Transpa- renz), Farbton, Größe, Drehung und Verzerrung eines Symbols eingesetzt werden, wie in Abbildung 47.

Der Bewegungstween dient nicht nur der Bewegung, er kann auch für die Veränderung von Alpha (Grad der Transparenz), Farbton, Größe und Verzerrung eines Symbols eingesetzt werden, wie in Abbildung 47 gezeigt.

Symbols eingesetzt werden, wie in Abbildung 47 gezeigt. Abbildung 47: Bewegungstween mit veränderter Helligkeit

Abbildung 47: Bewegungstween mit veränderter Helligkeit und Skalierung

Komplexe Bewegungen

Da in Abbildung 47 das Symbol dunkler wird, an Grö- ße zunimmt, und sich im Sichtfeld nach unten bewegt, entsteht der Eindruck einer perspektivischen Bewe- gung, der rote Kreis scheint näher zu kommen. Da Flash nicht wirklich dreidimensional modelliert, muß man die Tricks der Darstellung von 3d in 2d anwen- den.

Dazu gehört auch der Einsatz von verschiedenen „Ka- meraperspektiven“. Wird ein Hintergrundbild vergrö- ßert, entsteht der Eindruck eines Zooms. Wird ein Hintergrundbild bewegt, entsteht der Eindruck einer Kamerafahrt. Sie müssen also die Wirkung einer Ka- mera nachbauen, es gibt in Flash kein Kamera-Objekt.

5.4 Komplexe Bewegungen

P ERSPEKTIVE

KAMERA

Wenn Sie eine Folge von Schlüsselbildern erstellen, und dazwischen jeweils Bewegungstweens, dann er- halten Sie eine flüssige Bewegung entlang gerader Strecken, wie in der linken Hälfte von Abbildung 48 gezeigt. Wenn die Bewegung nicht entlang gerader Strecken, sondern entlang einer Kurve erfolgen soll, benützt man einen Pfad, wie in der rechten Hälfte von Abbildung 48 gezeigt.

Pfad, wie in der rechten Hälfte von Abbildung 48 gezeigt. Abbildung 48: Bewegungstween mit mehreren Schlüsselbilder,

Abbildung 48: Bewegungstween mit mehreren Schlüsselbilder, Bewegungstween entlang eines Pfades

Die Erstellung der Pfadebene funktioniert analog zur Erstellung der Masken-Ebene (siehe Kapitel 3.2). Die Pfadebene darf nur eine Kontur enthalten, keine Fül- lung und kein Symbol, diese Kontur ist dann der Pfad. Das Symbol im Start-Schlüsselbild und End- Schlüsselbild müssen mit dem Pfad verbunden wer- den, wie in Abbildung 49 gezeigt.

Zeit und Animation:

Zeit und Animation: D REHUNG Abbildung 49: Das Symbol wird am Pfad angebracht Das Symbol mit

D REHUNG

Abbildung 49: Das Symbol wird am Pfad angebracht

Das Symbol mit der Maus an seinem Registrierungs- punkt nehmen, und zum Pfad ziehen. Der Registrie- rungspunkt springt automatisch auf den Pfad, man kann dann das Symbol nur noch entlang des Pfades bewegen.

Mit einem Bewegungstween können Sie ein Symbol auch drehen. Verwenden sie das Werkzeug „frei trans- formieren“ um den „Transformationspunkt“ (ein klei- ner Kreis) zu positionieren. Er befindet sich über dem Registrierungspunkt des Symbols, wenn er noch nicht verschoben wurde. In Abbildung 50 wurde der Trans- formierungspunkt ausserhalb des Symbols positio- niert. Im Eigenschaftsfenster können Sie die Drehung genau spezifizieren, falls die automatische Einstellung nicht funktioniert.

falls di e automatische Einstellung nicht funktioniert. Abbildung 50: Werkzeuge, B ühne, Eigenschaften eines Bewe-

Abbildung 50: Werkzeuge, Bühne, Eigenschaften eines Bewe-

GESCHWINDIGKEIT

gungstween mit Drehung

Die Geschwindigkeit der Bewegung können Sie durch Setzen von Zwischen-Schlüsselbildern steuern. Die Geschwindigkeit ergibt sich als Verhältnis zwischen zurückgelegtem Pfadabschnitt und verflossener Zeit.

Formtween

Formtween Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween Die

Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween

Die Animationsmöglichkeiten in Flash mit Bewe- gungstweens sind nur ein kleiner Vorgeschmack auf die Fähigkeiten von Maya oder Aftereffects.

5.5

Formtween

Der Formtween wird wesentlich seltener verwendet als der Bewegungstween. Ein Formtween kann eine Füllung in eine andere Füllung überführen. Dabei verändert Flash nicht nur die Form, sondern auch die Farbe der Füllung, wie in Abbildung 52 gezeigt.

auch die Farbe der Füllung, wie in Abbildung 52 gezeigt. Abbildung 52:Formtween, defekter Formtween Typische Gründe

Abbildung 52:Formtween, defekter Formtween

Typische Gründe warum die Erstellung des Formt- weens fehlschlagen könnten sind:

E RFOLGSKRITERIEN FÜR DEN FORMTWEEN

- Nicht nur Füllung, sondern auch Kontur auf der Ebene

- Nicht Füllung (Original!) sondern Symbol auf der Ebene

Sie sollten den Formtween nur in seltenen Fällen ver- wenden, meist ist ein Bewegnungstween effizienter.

MovieClips – Film im Film:

6 MovieClips – Film im Film

MovieClips sind wichtig um das Flash-Projekt zu

Film im Film MovieClips sind wichtig um das Flash-Projekt zu A BBILDUNG 53: E IN M

A BBILDUNG 53: E IN MOVIE C LIP IN DER B IBLIOTHEK

strukturieren.

Ein MovieClip ist ein Symbol mit einer eigenen Zeit- leiste, also ein kleiner „Film-im-Film“. In der Biblio- thek wird neben dem Vorschaubild des MovieClips ein Play-Button dargestellt, mit dem man diesen Film ablaufen lassen kann.

Es ist üblich 6 den MovieClips in der Bibliothek einen Namen zu geben, der auf MC endet, im Beispiel in Abbildung 53 sind das AlgeMC, FischMC und Okto-

pusMC.

Sie können ein Grafiksymbol im nachhinein in ein MovieClip umwandeln, mittels eines Rechts-Klicks auf die Zeile des Symbols in der Bibliothek.

6 Um genau zu sein: es ist üblich eine Namens-Konvention zu ver- wenden. Wie die Konvention aussieht ist von Team zu Team ver- schieden. Wichtig ist, dass alle Leute in einem Projekt sich daran halten.

Formtween

Das betrifft aber nur neue Instanzen die sie erstellen, alle Instanzen die sich schon auf der Bühne befinden müssen Sie händisch auf MovieClip umstellen (im Eigenschafts-Fenster)

Die Wirkung der Hauptzeitleiste und der Zeitleiste im MovieClips kann man kombinieren. Dies sei am Bei- spiel eines Fisches erläutert, der von links nach rechts schwimmt, und dabei mit den Flossen schlägt. Die „grobe“ Bewegung findet auf der Hauptzeitleiste statt, wie in Abbildung 54 gezeigt: Im Zeitraum von 60 Bil- dern bewegt sich der Fisch 500 Pixel weit.

von 60 Bil- dern bewegt sich der Fisch 500 Pixel weit. Abbildung 54: Bewegung der MovieClip

Abbildung 54: Bewegung der MovieClip Instanz auf der Haupt- bühne (Hauptzeitleiste)

Die Bewegung der Flossen findet in der Zeitleiste des MovieClips statt, wie in Abbildung 55 gezeigt. Diese Zeitleiste enthält 12 Bilder.

Abbildung 55 gezeigt. Diese Zeitleiste enthält 12 Bilder. Abbildung 55: Zeitleiste im MovieClip Während des 60

Abbildung 55: Zeitleiste im MovieClip

Während des 60 Bilder langen Tweens auf der Haupt- zeitleiste werden die 12 Bilder des MovieClips 60 / 12 = fünf mal wiederholt. Abbildung 56 versucht das dar- zustellen.

MovieClips – Film im Film:

MovieClips – Film im Film: Abbildung 56: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert Da in

Abbildung 56: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert

Da in diesem Fall die Rechnung genau aufgeht (5 mal 12 = 60) sieht die Bewegung bei jedem Durchlauf ge- nau gleich aus. Geht die Rechnung nicht auf (z.B. 11 Frames im MovieClip), dann sieht die Bewegung erst nach vielen Durchläufen wieder gleich aus.

Einsatz von MovieClips

6.1 Einsatz von MovieClips

MovieClips sind die wichtigste Strukturierungs- Einheit von Flash. Wenn man die MovieClips richtig wählt, kann man sie vielseitig einsetzen. Damit sind Änderungen im Konzept auch nach Beginn der Um- setzung noch möglich. Wenn man sie ungeschickt wählt ist man unflexibel.

Ein paar Tipps zur Auswahl von MovieClips:

Was sich über die Bühne bewegt, ist ein Mo- vieClip (nicht zwei oder drei)

Bewegung eines Objekts unabhängig machen von Veränderung eines Objekts: die „innere“ Zeitleiste des MovieClips wird für innere Be- wegungen verwendet wie blinzeln, mit den Flossen schlagen, Beine bewegen. Die „äusse- re“ Zeitleiste wird für die Bewegung quer über die Bühne verwendet.

wird für die Bewegung quer über die Bühne verwendet. Abbildung 57: Bild-für-Bild Animation wird zu einem

Abbildung 57: Bild-für-Bild Animation wird zu einem MovieClip

7

Buttons

Buttons:

Bisher waren alle Ihre Flash-Werk nur „Filme“. Nach dem Start liefen sie jedes Mal gleich von Anfang bis zum Ende ab. Mit Buttons können Sie ihren Film jetzt interaktiv machen: die UserIn kann durch anklicken von Buttons den Ablauf des Filmes beeinflussen – stoppen, starten, Alternati- ven auswählen.

Die korrekte Übersetzung des englischen Begriffes „Button“ wäre „Schaltfläche“. Dieser Begriff ent- spricht zwar der DIN-Norm, ist aber nicht sehr ge- bräuchlich. Deswegen wird in diesem Skriptum der gängigere Betriff „Button“ verwendet.

Ein Button in Flash braucht nicht so auszusehen wie ein Button der Betriebssystem-Oberfläche (wie in Abbildung 58 gezeigt). Das Aussehen von Buttons in Flash ist völlig frei gestaltbar.

Aussehen von Buttons in Flash ist völlig frei gestaltbar. Abbildung 58: Standard-Buttons von Windows, Mac OS

Abbildung 58: Standard-Buttons von Windows, Mac OS X, Gnome (Linux)

7.1 Buttons in Flash

Ein Button ist eine Art Mini-MovieClip mit nur vier Frames mit den Namen Auf, Darüber, Drücken und Aktiv. Der Frame Auf wird dargestellt, wenn die Maus sich nicht über dem Button befindet. Ist die Maus über dem Button wird der Frame Darüber dargestellt. Wird dabei der Maus-Button gedrückt wird Drücken dargestellt.

Buttons in Flash

Buttons in Flash Abbildung 59:Aktiver Bereich eine s Buttons gleich sichtbarer Bereich Wenn man also die

Abbildung 59:Aktiver Bereich eines Buttons gleich sichtbarer Bereich

Wenn man also die Maus über die Schatzkiste in Abbildung 59 bewegt, dann öffnet sie sich.

Die Größe des Buttons ist frei festlegbar. Sie können also einen kleinen 50 mal 20 Pixel Button ebenso er- stellen, wie einen Button der die gesamte Bühne über- deckt. Schwierigkeiten macht das nur, wenn mehrere Buttons den gleichen Raum auf der Bühne beanspru- chen. Es kann immer nur ein Button „die Maus be- merken“, wie in Abbildung 60 gezeigt.

GRÖßE

Maus be- merken“, wie in Abbildung 60 gezeigt. G RÖßE Abbildung 60: Drei Buttons mit Überlappung,

Abbildung 60: Drei Buttons mit Überlappung, nur eine ist je- weils aktiv

Im mittleren Bild ist die Maus an einer Position an der sich der runde und der quadratische Button über- lappen. Der quadratische Button ist weiter vorne, deswegen „bemerkt“ nur er die Maus, und geht in den Darüber Zustand.

Der Frame Aktiv entscheidet darüber, in welchem Bereich der Button auf die Maus reagiert. In Abbildung 59 ist dieser aktive Bereich gleich dem sichtbaren Button. Das muss aber nicht so sein. In Abbildung 61 ist der aktive Bereich sehr klein: nur das Schloss der Schatzkiste. Hier öffnet sich die Schatzki- ste also nur, wenn man auf das Schloss klickt.

A KTIVER

B EREICH

Buttons:

Buttons: Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet 7.2 Wiederverwertung

Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet

7.2

Wiederverwertung

Auch beim Erstellen von Buttons sollten Sie an Wie- derverwertung denken: Um eine Navigationsleiste zu erstellen wie in Abbildung 62 gezeigt, brauchen Sie nur einen einzigen Button, von dem mehrere In- stanzen verwendet werden. Die Beschriftung ist nicht Teil des Buttons, sondern wird mit separaten Textfel- dern realisiert.

sondern wi rd mit separaten Textfel- dern realisiert. Abbildung 62: Wiederverwendung eines Buttons mit verschie-

Abbildung 62: Wiederverwendung eines Buttons mit verschie- denen Beschriftungen

Abbildung 62 zeigt eine Mischung aus verschiedenen Ansichten des Flash Editors und des Flash Players (So werden Sie das nie am Bildschirm sehen). In der lin- ken Hälfte der Abbildung sehen Sie einen Ausschnitt aus dem Film Explorer (Tastenkürzel [ALT]-[F3]) des Flash Editors. Hier sehen Sie einen Überblick über die

Wiederverwertung

Buttons und Textfelder des Flash-Films. In der rech- ten Hälft der Abbildung sehen Sie einerseits den gan- zen Film im Flash Player, und als kleinen Ausschnitt darüber gelegt einen Teil der Bühne aus dem Flash- Editor.

Im Film-Explorer können Sie sehen, dass sich vier Instanzen des Buttons mit dem Namen KnopfBtn auf der Bühne befinden, die Instanzen tragen die Namen a_btn, b_btn, c_btn und d_btn. Ein blauer Pfeil in der Abbildung weist von a_btn zu der Darstellung von a_btn auf der Bühne. Wie sie sehen können ist der Button rechteckig, und scheint einen gelben Kreis und den Buchstaben A zu beinhalten.

Ebenfalls im Film-Explorer können Sie vier Textfelder erkennen. Ein blauer Pfeil verweist vom Textfeld mit dem Buchstaben B auf die Darstellung dieses Textfel- des auf der Bühne. Was für die UserIn also wie vier Schalter mit Beschriftung aussieht besteht aus vier- mal demselben Button und vier verschiedenen Be- schriftungen. Der Buchstabe A gehörte auch nicht wirklich zu a_btn, sondern befindet sich auch in ei- nem separaten Textfeld.

Audio und Video einbinden:

8 Audio und Video einbinden

In diesem Kapitel lernen Sie die verschiedenen Methoden kennen, wie man Audio und Video in Flash einbindet. Das Abspielen von Audio und Video mit einer selbst gestaltbaren Oberfläche ist ein USP von Flash.

8.1 Audiodatei einbetten

Flash arbeitet prinzipiell mit folgenden Audio- Dateiformaten:

WAV (nur Windows)

AIFF (nur Macintosh)

MP3 (Windows oder Macintosh)

Eine in die fla- und swf-Datei eingebettete Sounddatei nennt man auch „Sound-Ereignis“. Ein solches Sound- Ereignis muss, bevor es abgespielt werden kann, erst vollständig geladen sein.

A UDIO

IMPORTIEREN

kann, erst vollständig geladen sein. A UDIO IMPORTIEREN Abbildung 63: Importierte Sounddatei in der Bibliothek

Abbildung 63: Importierte Sounddatei in der Bibliothek

Entweder zieht man die Sounddatei direkt in die Bi- bliothek oder man fügt sie über DATEI -> IMPORTIEREN -

> IN BIBLIOTHEK IMPORTIEREN ein.

Abbildung 63 zeigt eine Sounddatei namens loop01.mp3 die in die Bibliothek importiert wurde. Mittels des in der Abbildung rot markierten Play- Buttons kann man sich noch einmal vergewissern, ob die Sounddatei wirklich abgespielt werden kann.

Diese Sounddatei wird nun beim Exportieren in die swf-Datei mit eingebunden. Dadurch vergrößert sich jedoch die swf-Datei. Die Alternative dazu wäre das Streaming

sich jedoch die swf-Datei. Die Alternative dazu wäre das Streaming Abbildung 64: Audio in der Zeitleiste

Abbildung 64: Audio in der Zeitleiste

Video Streaming

Sie können nun die Audio-Datei auf die Bühne ziehen. Auf der Bühne selbst ist Audio nicht sichtbar, aber in der Zeitleiste. Hier sehen Sie auch wie viele Frames lang der Sound andauert. In Abbildung 64 wurde ein Klingelton in das MovieClip einer Klingel importiert. Wenn das MC abgespielt wird ertönt auch der Klingel- ton.

Im Eigenschaften-Fenster können Sie die Details ein- stellen: Hier können Sie einen andern Sound auswäh- len, den Sound wiederholen lassen oder in Endlos- schleife laufen lassen. Sie können sogar sehr einfache Bearbeitung wie Lautstärkenveränderungen vorneh- men.

Unter DATEI EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN

findet man Möglichkeiten, die Audiodateien innerhalb von Flash neu zu komprimieren, siehe Abbildung 66. Dies lässt sich für „Audio-Ereignisse“ sowie für „Au- dio-Streams“ getrennt einstellen.

Hierbei muss man beachten, dass mit „Audio-Stream“ nur ein Flash-interner Audio-Stream gemeint ist. D.h. eine Audiodatei ist eingebettet, wird aber gestreamed und nicht vorher geladen. Sollte die Datei extern ge- streamed werden, hängt die Qualität allein von der externen Datei ab.

8.2 Video Streaming

Bei Video ist Streaming eindeutig das einzig sinnvolle Verfahren – Videos sind immer zu groß um sie einzu- betten.

Video Streaming funktioniert mit Dateien im flv- Format. Dabei wird also die swf-Datei und die flv- Datei auf den Webserver geladen, die swf-Datei wie üblich in die Webseite eingebaut. Das Laden und Ab- spielen der flv-Datei erledigt dann Flash.

Der erste Schritt ist also immer die Erzeugung der flv- Datei. Manche Programme (besonders aus dem Hause Adobe) können flv bereits exportieren. Falls die Datei

Adobe) können flv bereits ex portieren. Falls die Datei Abbildung 65: Eigenschaften einer Audio- Datei auf

Abbildung 65: Eigenschaften einer Audio- Datei auf der Bühne

65: Eigenschaften einer Audio- Datei auf der Bühne Abbildung 66: Einstellungen für Veröffentli- chungen:

Abbildung 66: Einstellungen für Veröffentli- chungen: Audio-Qualität

einer Audio- Datei auf der Bühne Abbildung 66: Einstellungen für Veröffentli- chungen: Audio-Qualität 51

Audio und Video einbinden:

in einem andern Video-Format vorliegt kann sie mit dem Flash Video Encoder konvertieren.

8.3 FLV-Video abspielen

Flash Video Encoder konvertieren. 8.3 FLV-Video abspielen Für das Abspielen der Videos gibt es eine fertige

Für das Abspielen der Videos gibt es eine fertige flv- Komponente. Wenn man diese (ähnlich wie ein Sym- bol) auf die Bühne zieht, dann hat die Instanz auf der Bühne nicht nur Eigenschaften sondern auch Parame- ter:

Bühne nicht nur Eigenschaften sondern auch Parame- ter: Abbildung 67: Eigenschaften und Parameter eine Komponen-

Abbildung 67: Eigenschaften und Parameter eine Komponen- ten-Instanz

Als Parameter contentPath den Pfad zur flv-Datei eingeben.

Der Parameter skin ist besonders bequem: hier bietet Flash viele fertige Skins an.

besonders bequem: hier bietet Flash viele fertige Skins an. Abbildung 68: Skins für den FLVPlayer Zusammenfassend

Abbildung 68: Skins für den FLVPlayer

Zusammenfassend ist das erstellen eines Players ein- fach und schnell erledigt.

FLV-Video abspielen

9

Actionscript

Actionscript:

Beispiel 1)

Link zu einer anderen Webseite.

66

Beispiel 2)

Ein einfaches Puzzle, bei dem die UserIn Teile bewegen kann.

67

Beispiel 3)

Eine Navigationsleiste die zwischen verschiedenen Flash-Filmen hin und her schalten

kann. Die einzelnen Flash-Filme müssen nur als swf-Datei zur Verfügung stellen, müssen nicht verändert werden um verwendet zu werden.

68

Beispiel 4)

Eine Animation kann angehalten und von der UserIn neu gestartet werden.

70

Beispiel 5)

Ein interaktiver Film mit zwei alternativen Enden. Die UserIn entscheidet mit einem

Klick wie der Film endet.

71

Beispiel 6)

Eine Spielfigur, die durch ein MovieClip dargestellt wird, wird gesteuert.

76

Beispiel 7)

Eine kleine verrückte Maschine: wenn man verschiedene Knöpfe drückt passieren

verschiedene Dinge.

78

Beispiel 8)

Ein Puzzle, das Fehlversuche und richtig gelegt Puzzlesteine mitzählt.

84

Beispiel 9)

Ein Preloader zeigt an wie viel Prozent der swf-Datei schon geladen sind. Erst wenn 100%

erreicht sind startet der Film.

86

Beispiel 10)

Mehrere Sterne werden auf die Bühne gezeichnet

92

Beispiel 11)

Ein MovieClip soll interaktive eingefärbt werden: Die BenutzerIn klickt auf einen von

mehreren Farb-Auswahl-Buttons, und die Farbe wird übernommen.

94

Beispiel 12)

Der Hintergrund des Flash-Films wird mit einem Muster aus Linien bedeckt: lauter

senkrechte Linien mit 10 Pixel Abstand.

98

Beispiel 13)

Generative Tapete: Die gesamte Flash-Bühne wird mit zwei Grundformen „tapeziert“.

Welche der beiden Formen verwendet wird entscheidet der Zufall, dadurch entsteht jedes Mal ein anderes Muster.

104

Beispiel 14)

Eine Zeichnung wird Schritt für Schritt aufgebaut.

113

Beispiel 15)

Eine Kurve wird angezeigt, mit Anfangs- End- und Kontrollpunkt. Die drei Punkte kann

man mit Drag-and-Drop positionieren, die Kurve wird dabei immer wieder neu gezeichnet, sie scheint sich mit zu bewegen.

114

Beispiel 16)

Die aktuelle Uhrzeit wird grafisch angezeigt.

114

Beispiel 17)

Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab

115

Beispiel 18)

Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen.

118

Beispiel 19)

Ein Audio-Player soll mp3-Dateien abspielen, steuern und den Namen des Stücks in einem

dynamischen Textfeld anzeigt. Die mp3-Dateien müssen die Dateinamen 1.mp3, 2.mp3, 3.mp3, … haben.

120

Beispiel 20)

Ein allgemeiner Videoplayer soll verschiedene ein flv-Videos abspielen können, diese

werden bei der Einbindung der swf-Datei in den HTML-Code angegeben.

124

Beispiel 21)

Glückskeks: Aus einem großen Vorrat von ewigen Weisheiten wird eine zufällig

ausgewählt und angezeigt.

126

Beispiel 22)

Quiz: Eine Frage mit zwei möglichen Antworten wird angezeigt, die UserIn klickt auf eine

Antwort und erhält sofort eine Rückmeldung ob die Antwort richtig war.

126

Entwicklungsumgebung

Was ist Actionscript

Actionscript ist die Programmiersprache von Flash. Actionscript hat eine lange Geschichte hin- ter sich. Deshalb eine Warnung: oft findet man alte, umständliche, lange Skripts am Web, die für eine frühere Version von Flash programmiert wurden. Hier sollte man also auf die Versions- Angabe achten.

Die akutellen Versionen sind „Actionscript 2“ (AS2) und „Actionscript 3“ (AS3). AS3 bietet fortgeschritte- nere Programmiermöglichkeiten für fortgeschrittene ProgrammiererInnen. Wir bleiben bei der Version AS2 die leichter zu erlernen ist.

Actionscript-Programme können Sie im Fenster AKTIONEN (Tastatur-Kürzel F9) schreiben.

9.1

Entwicklungsumgebung

Für EinsteigerInnen die das direkte Eintippen des Codes scheuen gibt es Unterstützung durch die Flash Umgebung: Verhaltensweisen, Werkzeugleiste für Aktionen, Automatische Codeformatierung, Tooltipps. Diese Hilfsmittel werden hier in einem ersten Schritt vorgestellt.

Das Fenster VERHALTEN wurde in Anlehnung an Dreamweaver gestaltet. Abbildung 69 zeigt dieses Fenster. Die gezeigte Situation wurde in drei Schrit- ten erstellt:

1)

Auf der Bühne wurde der Button mit dem In- stanznamen weiter_btn ausgewählt. Im VERHALTEN -Fenster wird das in der Kopfzeile angezeigt.

2)

Mit dem Plus-Zeichen in der linken oberen Ec- ke des VERHALTEN-Fensters wurde die Aktion

ANSTEUERN UND ABSPIELEN BEI BILD eingefügt.

Dadurch entstand die Zeile im Fenster.

UND ABSPIELEN BEI B ILD eingefügt. Dadurch entstand die Zeile im Fenster. H ILFSMITTEL F ENSTER

H ILFSMITTEL

FENSTER VERHALTEN

F ENSTER AKTIONEN

Actionscript:

3)

Mit einem Klick auf die linke Hälfte der Zeile wurde das Ereignis festgelegt, bei dem die Ak- tion ausgeführt wird.

Als „Nebenwirkung“ der Arbeit im VERHALTEN-Fenster wurde im AKTIONEN-Fenster 5 Zeilen Actionscript-Code eingefügt, wie in Abbildung 69 rechts gezeigt.

eingefügt, wie in Abbildung 69 rechts gezeigt. Abbildung 69: Fenster V ERHALTEN erzeugt auch

Abbildung 69: Fenster VERHALTEN erzeugt auch Actionscript, siehe Fenster AKTIONEN

Übung 1) Betrachten Sie die Abbildung 69 genau:

Woran können Sie erkennen wo der Code positioniert ist? Welches Ereignis den Code auslöst? Welcher Befehl ausgeführt wird? (Antworten auf Seite 149).

Sie können ein Programm im VERHALTEN-Fenster er- stellen, und dann im AKTIONEN-Fenster weiter bearbei- ten.

W ERKZEUGLEISTE UND

S KRIPT -N AVIGATOR

Das Aktionen-Fenster besteht wie in Abbildung 70 gezeigt aus drei Teilen: Rechts wird der Programmco- de angezeigt. Links oben in der WERKZEUGLEISTE sind alle Actionscript-Befehle verzeichnet, und können durch einen Klick in den Code eingefügt werden. Links unten befindet sich der SKRIPT-NAVIGATOR. Hier kann man sehen an welchen Stellen in der Flash-Datei Actionscript eingefügt ist, und durch einen Klick diese Stelle im Code-Fenster anzeigen lassen.

Entwicklungsumgebung

weiter_btn Skript- Werk- Navigator zeugleiste Code Ansichts- Popup- Optionen Menü
weiter_btn
Skript-
Werk-
Navigator
zeugleiste
Code
Ansichts-
Popup-
Optionen
Menü

Abbildung 70: AKTIONEN-Fenster mit Werkzeugleiste und Skript-Navigation

Wenn Sie Code direkt in das Code-Fenster eintippen erhalten Sie noch Unterstützung durch Tooltipps, wie in Abbildung 71 gezeigt: Mit einem Dropdown-Menü bietet Flash Ergänzungen zum Code an (unterer Teil der Abbildung), mit einem kleinern Popup Informatio- nen zum ausgewählten Befehl (oberer Teil der Abbil- dung).

TOOLTIPPS

Befehl (oberer Teil der Abbil- dung). T OOLTIPPS Abbildung 71: Tooltipps im A KTIONEN -Fenster Sie

Abbildung 71: Tooltipps im AKTIONEN-Fenster

Sie können Ihre Actionscript-Programme auch außer- halb von Flash erstellen. Mit dem #include Befehl

können Sie ein Actionscript-Programm, das als eigene Datei gespeichert ist herein laden.

A CTIONSCRIPT AUßERHALB VON FLASH

Achtung: der #include Befehl ist ungewöhnlich: am

Ende der Zeile darf kein Semikolon/ Strichpunkt ste- hen!

#include "mehrcode.as"

Actionscript:

9.2

Hilfe

Das Flash-Fenster HILFE können Sie mit dem Tasten- kürzel [F1] öffnen. Wenn der Cursor sich im AKTIONEN-Fenster befand, wird in der Flash-Hilfe au- tomatisch eine passende Seite zum aktuellen Befehl angezeigt. In Abbildung 72 sehen Sie die Seite in der Flash-Hilfe zum Thema on().

Versions- Parameter Hinweise Pseudo-Code. Beispie- Links zu wei- teren Seiten in der Flash-
Versions-
Parameter
Hinweise
Pseudo-Code.
Beispie-
Links zu wei-
teren Seiten in
der Flash-

Abbildung 72: Flash-Hilfe zum Befehl on()

Das Lesen der Flash-Hilfe braucht einige Übung. Es wird hier sehr viel Programmier-Fachvokabular ver- wendet, das man sich erst aneignen muss. Besonders gefährlich am Anfang: Unter der Überschrift Ver- wendung findet man „Pseudo-Code“, das ist eine Mi- schung aus echtem Computerprogramm und Teilen die man erst ersetzen muss. Diesen Code kann man also nicht direkt ins AKTIONEN-Fenster kopieren! Fer- tige, kopierbare Beispiele finden Sie am Ende der Hil- fe, unter der Überschrift Beispiel.

In der Abbildung 72 sieht dieser Pseudo-Code zum Beispiel so aus:

Wo ist der Code?

Das kursiv gestellte Wort mausereignis ist nicht

wörtlich gemeint, hier muss man erst den Namen ei- nes Mausereignisses einfügen. Welche Mausereignisse es gibt ist unter der Überschrift Parameter nachzule- sen, ein Mausereignis wäre zum Beispiel release.

on(mausereignis ) { // Anweisungen hier // einfügen

}

Zeilen die mit zwei Schrägstrichen „//“ beginnen sind

Kommentare, kein Actionscript-Code. An dieser Stelle muss man statt der Kommentar-Zeile einen oder meh- rere Befehle einfügen. Ein korrektes Actionscript- Programm mit dem on()-Befehl könnte also so ausse-

hen:

on(release) {

play();

}

Was der on()-Befehl wirklich bewirkt sehen Sie im

Kapitel 11.1 ab Seite 70.

All diese Hilfsmittel erleichtern das Eintippen des Codes, ersetzen aber nicht das Verständnis! Wenn Sie programmieren wollen, müssen Sie den Code verste- hen – bis zum letzten Punkt und Komma. Denn jeder Punkt und jedes Komma hat eine Bedeutung.

9.3 Wo ist der Code?

Die Frage „Wo ist der Code“ bezieht sich hier nicht auf das VERHALTEN- oder das AKTIONEN-Fenster. Unabhän- gig davon auf welche Art Sie den Code erstellen: der Code ist immer entweder einem bestimmten Bild einer Zeitleiste, oder einer bestimmten Instanz eines Sym- bols (nur MovieClip oder Button) zugeordnet, wie in Abbildung 73 gezeigt.

oder Button) zugeordnet, wie in Abbildung 73 gezeigt. Abbildung 73: Actionscript auf Bildern der Zeitleiste oder

Abbildung 73: Actionscript auf Bildern der Zeitleiste oder auf Instanzen auf der Bühne

Ist Actionscript-Code auf einem Bild der Zeitleiste gespeichert, dann wird dieses Faktum als kleiner Buchstabe „a“ in der Zeitleiste dargestellt. Ob an einer (Button- oder MovieClip-) Instanz auf der Bühne Ac-

Actionscript:

tionscript-Code gespeichert ist kann man nicht auf den ersten Blick erkennen.

ist kann man nicht auf den ersten Blick erkennen. Abbildung 74: Der Skriptnavigator 9.4 In beiden

Abbildung 74: Der Skriptnavigator

9.4

In beiden Fällen gilt: Im Fenster AKTIONEN wird der Actionscript-Code des jeweils ausgewählten Bildes bzw. der jeweils ausgewählten Instanz angezeigt.

Der SKRIPT-NAVIGATOR im AKTIONEN-Fenster gibt einen Überblick über den gesamten Code, eine ähnliche Dar- stellung finden Sie auch im FILM-EXPLORER.

In Abbildung 74 ist derzeit das erste Bild auf der Ebe- ne zwei ausgewählt, hier kann gerade Code eingetippt werden. Insgesamt ist an zwei verschiedenen Stellen Code gespeichert: auf dem 13. Bild der Hauptzeitleiste in Ebene 2. Und auf dem Button mit dem Instanz- Namen weiter_btn, der sich auf der Hauptzeitleiste befindet.

Namen

Bei der Programmierung mit Actionscript ist es wich- tig, dass allen Ressourcen (Symbole, Instanzen, Bilder) aussagekräftige Namen haben. Diese Namen „im Nachhinein“ zu verändern würde viel Arbeit nach sich ziehen: die Namen werden wieder und wieder im Pro- grammcode verwendet. Deswegen gehört zur Planung eines Flash-Projekts auch die Festlegung der wichtig- sten Namen, und einer Namens-Konvent