Adobe Flash CS3 - christiani.de · 116 | 5 Animation Ein Schlosssymbol 6 wird angezeigt, wenn die...

16 | Video-Lektionen

VID

EO

-LE

KT

ION

EN

Videolektionen

Die Video-Lektionen auf der Buch-DVD entstammen unserem Video-Training »Adobe Flash CS3 – Animation, Interaktion, Web-design« von Sonja Vieten (ISBN 978-3-8362-1079-9). Sie fi nden folgende Filme:

Kapitel 1: Zeichnen mit Flash 1.1 Freihandzeichnen (07:07 min)1.2 Geometrische Grundformen zeichnen (04:37 min)1.3 Transformieren mit »9-slice-Scaling« (07:38 min)

Kapitel 2: Animation und Interaktion2.1 Einzelbild-Animation (13:44 min)2.2 Drag & Drop-Animation (04:21 min)

Kapitel 3: Eine Website mit Flash erstellen3.1 Eine Navigation erstellen (06:56 min)3.2 Videos in die Website einbinden (06:10 min)3.3 Die Website veröffentlichen (09:09 min)

Kapitel 4: ActionScript anwenden4.1. Anweisungen mit Schleifen wiederholen (06:08 min)4.2. If-else-Bedingungen (09:37 min)4.3 Ein Rechenspiel mit Arrays (05:18 min)

Workshops | 17

WO

RK

SH

OP

S

Workshops

Arbeitsumgebung

Eigene Tastenkürzel defi nieren � ...................................... 53

Zeichnen

Farben einer umgewandelten Bitmap-Grafi k �

austauschen .................................................................. 74

Symbole, Instanzen und die Bibliothek

Instanzeigenschaften ändern � ......................................... 94Eine Schaltfl äche erstellen � ............................................. 99

Animation

Die Animation anlegen � ................................................. 123Dokumenteigenschaften ändern � ................................... 125Animation in Movieclip verschachteln � ........................... 128Geschwindigkeit ändern � ............................................... 130Ein Bewegungstweening erstellen � ................................. 135Tweening verlängern � ..................................................... 137Bewegungstweening an Pfad ausrichten � ........................ 141Bewegungstweening mit Beschleunigung und �

Abbremsen ................................................................... 144Bewegungstweening mit benutzerdefi nierter �

Beschleunigung (1) ....................................................... 147Bewegungstweening mit benutzerdefi nierter �

Beschleunigung (2) ....................................................... 149Bitmap in Vektoren umwandeln � .................................... 155Formmarken für ein Formtweening einsetzen � ............... 157Verschachtelte Animation � ............................................. 161Masken-Animation � ....................................................... 166Verlaufsmaske erstellen � ................................................. 168

Text

Maskierung von Geräteschriften � .................................... 190

Veröffentlichung

FlashVars einsetzen � ....................................................... 224Flash-Film mittig im Browser zentrieren � ........................ 229

18 | Workshops

Action Script-Grundlagen

Eine Webseiten-Navigation � ........................................... 273Flash-Filme laden � ......................................................... 279Den Ladefortschritt ermitteln und einen Preloader �

erstellen ....................................................................... 281Einen entfernten (remote) Flash-Film debuggen � ............ 290

Animation mit Action Script 1 und 2

Animation mit onEnterFrame � ........................................ 297Animation mit onMouseMove � ...................................... 299Bewegung mit Easing � .................................................... 304FadeOut mit Easing � ...................................................... 305Animation beenden � ...................................................... 307Fading-Animation loopen � ............................................. 308Schwingende Bewegung auf der x-Achse � ...................... 313Schwingende Bewegung auf der y-Achse � ...................... 316Kreis- und ellipsenförmige Bewegung � ........................... 318Spiralenförmige Bewegung � ............................................ 319Movieclip in Mausrichtung drehen � ................................ 320Movieclip in Mausrichtung bewegen � ............................. 321

Einführung in die objektorientierte Programmierung

Klasse und Objekt erstellen � ........................................... 329Objekt-Eigenschaften abfragen und zuweisen � ............... 331Die Math-Klasse erweitern � ............................................ 341Klassenpaket und -pfad anlegen � .................................... 351

Sound

Eine Schaltfl äche mit Ereignissound versehen � ................ 415Einen Streaming-Sound ein- und ausblenden � ................ 418Mehrere Sounds zuweisen, abspielen und stoppen � ....... 425Sound pausieren und abspielen � ..................................... 427Soundlautstärke über einen Slider steuern � .................... 430

Video

Ein eingebettetes Video über die Zeitleis te steuern � ....... 445Ein Video über Action Script abspielen und steuern � ....... 449Ereignis-Cue-Points einsetzen � ....................................... 456Navigation-Cue-Points einsetzen � .................................. 459

Dynamischer Text

Texteingabe abfragen und ausgeben � .............................. 469

Workshops | 19

onSetFocus und onKillFocus für die Hervorhebung �

von Eingabefeldern einsetzen ....................................... 473Textdokument laden und ausgeben � ............................... 478

Flash, PHP und MySQL

Serverseitiges Datum und Zeit in Flash ausgeben � .......... 502Kontaktformular – Eingabe überprüfen und �

zurücksetzen ................................................................. 508Kontaktformular – Kontaktdaten an PHP-Skript senden � ... 510Kontaktformular: PHP-Skript für den Mailversand �

erstellen ....................................................................... 512Gästebuch – Datensätze auslesen und in Flash �

darstellen ..................................................................... 527Gästebuch – Daten von Flash an PHP übergeben und �

Datensätze erstellen...................................................... 532

Spieleprogrammierung

Tastatursteuerung � ......................................................... 539Kollisionserkennung mit Begrenzungsrahmen � ................ 543Kollisionserkennung an einem bestimmten Punkt � ......... 545Kollisionserkennung von zwei Kreisformen � ................... 547Kollisionserkennung mit Bühnenrändern � ....................... 550Kollisionserkennung mit Randbereichen und Bouncing � ... 552Kollisionserkennung von Kreis- und Rechteck-Form � ...... 555Spielername lokal speichern und lesen � .......................... 559Highscore: XML-Dokument laden und Daten ausgeben � ... 564Highscore aktualisieren und XML-Struktur erzeugen � ...... 569Highscore: XML-Struktur an PHP-Skript übergeben �

und XML-Dokument serverseitig erzeugen .................... 571

Ein Blick über den Tellerrand

Flash-Film für Desktop-Anwendung erstellen � ................ 587Desktop-Anwendung mit ZINC erzeugen � ...................... 590

5.1 Zeitleiste | 111

KA

PIT

EL

5

Animation5

Animationen (aus dem lat. animare, »zum Leben erwecken«) sind ein Gestaltungsmittel, um Inhalte in Bewegung zu versetzen und lebendiger erscheinen zu lassen. Animationen sind seit der ersten Flash-Version bis heute eine der größten Stärken von Flash.

In diesem Kapitel lernen Sie die Grundlagen, um Animationen in Flash zu erstellen und zu steuern. Sie lernen die unterschied-lichen Animationstechniken kennen und erfahren, wie Sie selbst Instanzeigenschaften wie Position und Farbe animieren können.

Zeitleiste5.1

Die Zeitleiste ist das Mittel, um den zeitlichen Ablauf eines Flash-Films zu steuern. Vergleicht man einen Flash-Film mit einem ech-ten Film, würde die Zeitleiste der Filmrolle entsprechen, auf der die Einzelbilder eines Films in bestimmten Abständen in einer bestimmten Reihenfolge hintereinanderliegen. Ein Abspielgerät zeigt die Einzelbilder des Films in einer bestimmten Geschwin-digkeit (bei Filmen: 24 Bilder pro Sekunde) an.

Auf der linken Seite der Zeitleiste werden die Ebenen 1 und auf der rechten Seite die Bilder der Zeitleiste 2 dargestellt. Der rote Zeiger 3 gibt die aktuelle Position des Abspielkopfes in der Ent-wicklungsumgebung an.

[Animation]Animation ist die Veränderung ei-ner Objekteigenschaft über einen gewissen Zeitraum. Es gibt zwei wesentliche Faktoren, die eine Animation beeinfl ussen: die sich ändernde Eigenschaft (wie z. B. die Position, Farbe oder die Größe) und die Zeit.

F Abbildung 5.1Die Zeitleiste

Abspielrichtung Der Abspielkopf bewegt sich beim Abspielen der Zeitleiste von links nach rechts, um die einzelnen Bil-der der Zeitleiste und deren Inhalt darzustellen.

1

3 2

112 | 5 Animation

Ebenenmodell5.1.1 Ebenen sind vergleichbar mit transparenten Folien. Auf der trans-parenten Fläche einer Folie lassen sich verschiedene Elemente anlegen. Die Folien werden dann in einer bestimmten Reihen-folge, der Ebenenreihenfolge, übereinandergelegt und ergeben so ein Gesamtbild.

Jeder Flash-Film kann beliebig viele Ebenen besitzen – mithilfe von Ebenen können Sie die Bestandteile eines Flash-Films hierar-chisch anordnen, inhaltsbezogen verteilen und strukturieren.

Mit Ebenen arbeiten5.1.2 Nachdem ein neuer Flash-Film erstellt wurde, gibt es zunächst nur eine einzige Ebene mit dem Namen Ebene 1. Um eine neue Ebene anzulegen, klicken Sie in der Zeitleiste auf Ebene einfügen 1.

Sie sollten Ebenen möglichst eindeutige Namen zuweisen , damit Sie später einen Hinweis darauf haben, was sich auf den entspre-chenden Ebenen befi ndet. Klicken Sie dazu auf den Ebenennamen 2. Anschließend können Sie einen neuen Namen eingeben.

Abbildung 5.2 E

Funktionsweise von Ebenen auf einen Blick

Ebenen und Animation

Grundsätzlich gilt, dass Objekte, die animiert werden, auf einer eigenen Ebene platziert werden müssen – es sollten also keine anderen Elemente auf der Ebene platziert werden, da es sonst zu Fehlern kommt. Die Ausnahmen dieser Regel sind Bild-für-Bild-Animationen und geskriptete Animationen, bei denen auch mehrere Elemente auf einer Ebene platziert werden können.

Abbildung 5.3 E

Ebene einfügen1


Flash-Filme mit vielen Objekten und Animationen können sehr viele Ebenen beinhalten. Je mehr Ebenen der Flash-Film hat, desto wichtiger ist es, sich die Zeit zu nehmen, Ebenen zu benen-nen – die Übersicht geht sonst schnell verloren.

Um eine Ebene zu löschen , wählen Sie diese aus und klicken auf das Papierkorb-Symbol Ebene löschen 3.

Ebenenreihenfolge | Über die Ebenenreihenfolge legen Sie fest, welche Objekte im Vordergrund und welche im Hintergrund lie-gen sollen.

Ein möglicher Ebenenaufbau einer Webseite könnte so aus-sehen:

Unten: � eine Ebene mit Hintergrundelementen (Grafi ken, Fenster für Textbereiche etc.)Im � mittleren Bereich: Ebenen mit Hauptinhalten der Web-seite (Texte, Grafi ken, Logo etc.)Oben: � eine Ebene mit Bildbezeichnern und Aktionen (diese Ebenen haben keinen sichtbaren Inhalt – sie dienen zur Steu-erung und Strukturierung des Flash-Films – üblicherweise werden sie ganz oben positioniert)

F Abbildung 5.4Ebenennamen ändern

F Abbildung 5.5Ein Negativbeispiel. Wo ist was? Das Rätseln beginnt.

ReihenfolgeObjekte auf der obersten Ebene überlagern alle Objekte, die auf Ebenen darunter liegen.

2

3

114 | 5 Animation

Natürlich können Sie die Ebenenreihenfolge auch jederzeit ändern. Wählen Sie dazu die Ebene per Mausklick aus, halten Sie die Maustaste gedrückt, und verschieben Sie die Ebene an die gewünschte Position. Eine gestrichelte Linie 1 zeigt die neue Position der Ebene während des Vorgangs an.

Ebenenordner | Ebenen lassen sich in ein- und ausklappbaren Ebenenordnern strukturieren. Mithilfe von Ebenenordnern kön-nen Sie Ebenen z. B. nach ihrem Inhalt sortieren und strukturie-ren. So wäre es z. B. sinnvoll, Ebenen mit Navigationselementen in einem Ebenenordner Navigation zu platzieren. Das lohnt sich meist aber erst, wenn Sie insgesamt mehr als 15 Ebenen haben und sonst in der Zeitleiste oft scrollen müssten.

Um einen Ebenenordner anzulegen, klicken Sie in der Zeit-leiste auf Ebenenordner einfügen 2.

Nachdem der Ordner angelegt wurde, sollten Sie ihm durch einen Mausklick auf den Ordnernamen einen eindeutigen Namen zuweisen.

Anschließend wählen Sie alle Ebenen aus, die Sie in den Ordner verschieben möchten. Wenn diese Ebenen hintereinanderliegen, wählen Sie erst die unterste oder oberste Ebene aus, halten (ª) gedrückt und wählen dann die oberste oder unterste Ebene aus. Alle Ebenen dazwischen werden automatisch ausgewählt. Klicken Sie dann auf eine ausgewählte Ebene, halten Sie die Maustaste gedrückt, und ziehen Sie die Ebenen in den Ordner.

Abbildung 5.6 E

Ein klassischer Aufbau einer Webseite

StrukturierungAm Anfang fällt es nicht immer leicht, eine gute Struktur für ei-nen Flash-Film festzulegen. Je mehr Sie mit Flash arbeiten, desto einfacher wird Ihnen das mit der Zeit fallen, da Sie fast wie von selbst lernen, bestimmte Inhalte nach bestimmten Schemata auf-zubauen.

Abbildung 5.7 E

Die Ebene Hintergrund wird nach unten verschoben.

Ebenen auswählen

Halten Sie bei der Auswahl statt (ª) die (Strg)/(°)-Taste ge-drückt, um eine Mehrfachaus-wahl von Ebenen vorzunehmen, die nicht hintereinanderliegen.

1


Sie können jetzt auf einen Blick erkennen, welche Ebenen zur Navigation gehören. Ein weiterer Vorteil ist, dass Sie Ebenenord-ner ein- und ausklappen können, was Platz in der Zeitleiste spart. Sie müssen dann seltener in der Zeitleiste scrollen. Um einen Ebenenordner ein- bzw. auszuklappen, klicken Sie einfach auf den Pfeil 3 auf der linken Seite der Ebene.

Ebenen steuern | Sie können Ebenen über drei verschiedene Modi steuern:

Per Mausklick auf einen der kleinen Kreise unter dem Auge �

4 können Sie Ebenen ein- und ausblenden . Das ist sehr hilf-reich, wenn sich Bereiche in der Arbeitsfl äche überlagern und Sie zeitweise nur bestimmte Teile des Flash-Films betrachten möchten.Klicken Sie auf den Kreis unterhalb der Spalte mit dem Schloss �

5, um eine Ebene zu sperren oder zu entsperren . Wenn eine Ebene gesperrt ist, können Elemente auf dieser Ebene nicht mehr ausgewählt werden. Dadurch wird verhindert, dass Objekte unbeabsichtigt verschoben oder verändert werden.

Ebenenordner steuernDie Steuerungsfunktionen, die im folgenden Abschnitt erläutert werden, können auch auf Ebe-nenordner angewandt werden. So ist es z. B. möglich, alle Ebenen eines Ordners gleichzeitig auszu-blenden oder zu sperren.

G Abbildung 5.9Ebenen in Ordner verschieben

G Abbildung 5.8Ebenenordner einfügen

G Abbildung 5 9

3

2

G Abbildung 5.10Ebenen des Ordners ausblendenG Abbildung 5 10

H Abbildung 5.11Die Ebene content ist links aus- und rechts eingeblendet.4

116 | 5 Animation

Ein Schlosssymbol 6 wird angezeigt, wenn die Ebene gesperrt wurde. Wenn Sie die Ebene anwählen, zeigt Ihnen zusätz-lich ein durchgestrichener Stift 7, dass auf dieser Ebene nicht gearbeitet werden kann.

� Gelegentlich kommt es vor, dass Objekte aneinander ausge-richtet werden sollen, bestimmte Teile der Objekte sich aber so überlagern, dass der Überblick verloren geht. Per Maus-klick auf den kleinen Kreis unter dem rechteckigen Rahmen 8 können Sie die Konturansicht aktivieren bzw. deaktivieren. Es werden dann nur die Konturen der Objekte auf der Ebene dargestellt.

Bilder und Schlüsselbilder5.1.3 auf der Zeitleiste Nachdem Sie einen neuen Flash-Film erstellt haben, besitzt der Flash-Film ein einziges Bild. Am Anfang steht Ihnen in Bild 1 der Zeitleiste ein leeres Schlüsselbild zur Verfügung 1. In leeren Schlüsselbildern befi ndet sich nichts auf der Bühne. Sie können an dieser Stelle Inhalte einfügen, was dazu führt, dass aus dem leeren Schlüsselbild ein Schlüsselbild 2 wird.

Der Begriff »Bild« ist nicht eindeutig, da er für zweierlei Dinge verwendet wird: Einerseits wird üblicherweise von einem Bild der Zeitleiste (oder auch vom Inhalt »an bzw. in Bild X«) gesprochen. Dies bezieht sich auf die Position innerhalb der Zeitleiste.

Andererseits gibt es Bilder in der Zeitleiste, die den Inhalt des vorangehenden Schlüsselbildes darstellen. Der Begriff ist der-selbe, die Bedeutung aber eine andere.

Abbildung 5.12 E

Die Ebene Vordergrund wurde gesperrt.

Mehrere Ebenen steuern

Sie können auch mehrere Ebenen gleichzeitig steuern. Wählen Sie dazu die Ebenen, für die Sie ei-nen Modus aktivieren möchten, aus, und klicken Sie oberhalb der Ebenen auf eines der Symbole Auge, Schloss oder Rahmen 8.

Abbildung 5.13 E

Normale Ansicht und Konturan-sicht im Vergleich

Neu in Flash CS3

Wenn Sie bestimmte Ebenen ausblenden, können Sie Flash dazu veranlassen, diese Ebenen bei der Veröffentlichung des Flash-Films zu ignorieren. Diese Option ist neu in Flash CS3 und nützlich in der Entwurfsphase. Sie fi nden die entsprechende Option im Menü Datei N Einstel-

lungen für Veröffentlichun-

gen ... im zweiten Reiter Flash unter Ausgeblendete Ebenen exportieren.

7

8

56


Um den Inhalt eines Schlüsselbildes im weiteren Verlauf der Zeit-leiste unverändert darzustellen, können Bilder 3 (engl. Frames) hinter dem Schlüsselbild eingefügt werden. Diese zeigen dann den Inhalt des vorangehenden Schlüsselbildes in unveränderter Form an. Um weitere Bilder einzufügen , klicken Sie auf das (noch gänzlich leere) Bild in der Zeitleiste und wählen Einfügen N Zeit-

leiste N Bild oder nutzen das Tastenkürzel (F5).

Schlüsselbild einfügen | Wenn sich der Inhalt auf der Bühne ver-ändern soll, sei es durch die Änderung der Position, der Größe etc. des Inhalts oder durch einen neuen Inhalt, muss dazu ein neues Schlüsselbild 4 auf der Zeitleiste angelegt werden (siehe Abbildung 5.16).

Klicken Sie dazu auf das Bild in der Zeitleiste, an dem die Ver-änderung stattfi nden soll, und wählen Sie Einfügen N Zeitleiste N Schlüsselbild. Wer lieber mit Tastenkürzeln arbeitet, kann sich (F6) merken.

Flash fügt daraufhin ein neues Schlüsselbild ein – auf der Bühne sehen Sie noch keine Veränderung. Erst wenn Sie auf der Bühne eine Veränderung vornehmen, also z. B. ein weiteres Objekt zeich-nen oder das bestehende Objekt verändern, sehen Sie, was passiert: Der Bereich 5 vor dem neuen Schlüsselbild bleibt unverändert.

F Abbildung 5.15Ein Schlüsselbild und neun Bilder dahinter

1 2

3

G Abbildung 5.14Links: leeres Schlüsselbild, rechts: Schlüsselbild

118 | 5 Animation

Schlüsselbilder verschieben/kopieren

Um ein Schlüsselbild auf der Zeitleiste zu verschieben, wählen Sie es zunächst aus, halten die Maustaste gedrückt und bewe-gen die Maus, um es auf der Zeitleiste zu verschieben. Wenn Sie dabei (Alt)/(±) gedrückt ha-ben, wird eine Kopie des Schlüs-selbildes angelegt.

Leere Schlüsselbilder | In leeren Schlüsselbildern befi ndet sich nichts auf der Bühne. Ein leeres Schlüsselbild können Sie über das Menü Einfügen N Zeitleiste N Leeres Schlüsselbild (F7) ein-fügen.

Schlüsselbild löschen | Um ein Schlüsselbild zu löschen, wählen Sie dieses zunächst aus, öffnen per Klick mit der rechten Maus-taste das Kontextmenü und wählen den Menüpunkt Schlüssel-

bild löschen.

Abbildung 5.16 E

Ein neues Schlüsselbild wurde in Bild 10 angelegt.

Abbildung 5.17 E

Menübefehl Schlüsselbild löschen

5 4


Darstellungsweise | Darstellungsweise und Symbole von Bildern (Inhalten), Animationen und Ebenen auf der Zeitleiste zeigen Ihnen bereits auf den ersten Blick, was sich auf dem entspre-chenden Bild oder der Ebene befi ndet bzw. was dort abläuft. Die folgende Übersicht zeigt Ihnen, wie unterschiedliche Bereiche in der Zeitleiste dargestellt werden.

Darstellungsoptionen der Zeitleiste5.1.4 Über das Optionsmenü der Zeitleiste lassen sich die Darstellung und die Position der Zeitleiste einstellen.

Bei einem Flash-Film mit sehr vielen Ebenen bietet z. B. eine kleinere Darstellung der Zeitleiste einen besseren Überblick – meine persönliche Empfehlung ist, die Ansicht Normal und Reduziert zu aktivieren – Sie können so möglichst viele Ebenen auf kleinster Fläche darstellen.

Die Einstellung Vorschau und Vorschau im Kontext zeigt inner halb der Zeitleiste eine kleine Vorschau des jeweiligen Bildes an.

Bilder der Zeitleiste

G Abbildung 5.18Ein leeres Schlüsselbild ohne Inhalt auf der Bühne

G Abbildung 5.19Ein Schlüsselbild und dahinter neun Bilder

G Abbildung 5.20Ein leeres Schlüsselbild, dem eine Aktion zugewiesen wurde – ein kleines a zeigt diese Zuweisung an.

G Abbildung 5.21Die Ebene Labels besitzt zwei Schlüsselbilder, denen Bildbezeichner zugewiesen wurden.

G Abbildung 5.22Zwei Schlüsselbilder in Bild 1 und Bild 10, dazwi-schen ein Bewegungstweening

G Abbildung 5.23Zwei Schlüsselbilder, dazwischen ein Formtweening

G Abbildung 5.24Die Maskenebene Maske maskiert die Ebene Inhalt.

G Abbildung 5.25Ein Bewegungstweening auf der Ebene Animation, das an der Führungsebene Animationspfad ausge-richtet ist.

120 | 5 Animation

G Abbildung 5.28Im Fenster Szene können Sie die Szenen Ihres Films verwalten.

12 3

Szenen und Bildbezeichner5.1.5 Komplexere Flash-Filme bestehen meist aus mehrteiligen Berei-chen. Bei einer Webseite hätte man zu Beginn eventuell eine kurze Animationssequenz, z. B. für einen animierten Aufbau der Webseite, und anschließend die einzelnen Inhaltsbereiche der Webseite.

Für einen solchen Aufbau können Sie Szenen verwenden. Jede Szene besitzt eine eigene Hauptzeitleiste. Sie erreichen das Fens-ter zur Verwaltung von Szenen über Fenster N Andere Bedien-

felder N Szene.

Szenen verwalten | Um eine neue Szene zu erstellen, klicken Sie auf das Plussymbol 1. Per Doppelklick auf die Szene 2 können Sie der Szene einen individuellen Namen geben. Eine vorhandene Szene können Sie per Mausklick auf den Papierkorb 3 löschen.

Vor- und Nachteile | Auf den ersten Blick erscheinen Szenen sehr vielversprechend, da sich Bereiche mittels Szenen inhalt-lich sichtbar trennen lassen. In der Praxis ergeben sich allerdings häufi g Probleme, die einem meist erst später auffallen. So ist es z. B. nicht möglich, ein grafi sches Element auf mehreren Szenen gleichzeitig anzuzeigen, da jede Szene eine eigene Hauptzeit-leiste besitzt und die Zeitleisten von zwei Szenen in keiner Weise miteinander verbunden sind.

Wenn Szenen verwendet werden, führt das oft dazu, dass Ebe-nen und Elemente mehrmals angelegt werden müssen. Häufi g möchte man den Übergang zwischen zwei Bereichen eines Flash-Films über Transition-Effekte, wie ein Überblenden oder das Auf- und Abbauen von Elementen, animieren. Einen Übergang

Abbildung 5.27 EE

Darstellungen im Vergleich (von oben nach unten): Normal und Reduziert, Groß, Vorschau im Kontext

Aufbau eines Flash-SpielsBei einem Spiel gäbe es Bereiche, wie die Spielanleitung, verbunden mit der Eingabe eines Spielerna-mens, das Spiel selbst und ggf. einen Highscore.

Abbildung 5.26 E

Darstellungsoptionen der Zeitleiste


zwischen zwei Szenen zu animieren ist sehr umständlich, da eine Szene immer abrupt mit einem Endbild endet und die nächste Szene mit einem Startbild anfängt.

Eine Alternative zur Strukturierung bieten so genannte Bild-bezeichner.

Bildbezeichner | Mithilfe von Bildbezeichnern können Sie ver-schiedene Bereiche eines Flash-Films visuell auf der Hauptzeit-leiste oder auch auf der Zeitleiste eines Movieclips voneinander trennen. Bildbezeichner können nur Schlüsselbildern zugeord-net werden – gängige Praxis ist, es eine eigene Ebene speziell für Bildbezeichner zu erstellen, an den gewünschten Stellen leere Schlüsselbilder anzulegen und diesen Schlüsselbildern dann Bild-bezeichner zuzuweisen. Da Bildbezeichner über Action Script bildunabhängig angesteuert werden können, können Sie Schlüs-selbilder mit Bildbezeichnern nachträglich beliebig verschieben, ohne dass dies die Ansteuerung per Action Script negativ beein-fl usst. Die Nutzung von Bildbezeichnern kann die Steuerung und nachträgliche Veränderungen vereinfachen.

Sie können die Position einzelner Bereiche eines Flash-Films dann auf einen Blick erkennen 1, 2, 3. Animierte Übergänge 4 sind ebenso möglich wie mehrfach verwendete Elemente 5, 6, die einfach mithilfe von Ebenen über mehrere Bereiche verteilt werden.

Um einem Schlüsselbild einen Bildbezeichner zuzuweisen , wäh-len Sie das Schlüsselbild in der Zeitleiste aus und öffnen das Eigenschaften-Fenster. Tragen Sie den Bildbezeichner im Eigen-

schaften-Fenster unter Bild 7 ein. Bildbezeichner mit Leerzei-chen sind zwar gültig, sollten aber vermieden werden.

F Abbildung 5.29Getrennte Bereiche mit Bildbezeichnern

Film stoppenMeistens soll der Flash-Film an Stellen mit Bildbezeichnern stop-pen. Dazu werden auf einer eige-nen Ebene, z. B. einer Ebene Ac-

tions, Schlüsselbilder angelegt, und den Schlüsselbildern wird die Aktion stop(); zugewiesen. Mehr zur Steuerung von Flash-Filmen erfahren Sie in diesem Kapitel in Abschnitt 5.7, »Verschachtelung«.

F Abbildung 5.30Bildbezeichner zuweisen

1 4 2 3

5

6

7

Szenen-Reihenfolge ändernÄhnlich wie Ebenen können Sie die Reihenfolge der Szenen per Drag & Drop ändern.

Szenen vermeiden

Hat man einen Film erst mal in Szenen unterteilt, ist es sehr mühselig, die Struktur wieder abzuändern. Alles in allem führt der Einsatz von Szenen in der Praxis oft zu vielen vermeidbaren Problemen. Der Einsatz von Sze-nen wird daher mittlerweile von vielen Flash-Nutzern vermieden.

122 | 5 Animation

Ansteuerung von Szenen und Bildbezeichnern | Sie können Sze-nen und Bildbezeichner über Action Script ansteuern. Um z. B. am Ende einer Szene eine andere Szene mit dem Namen webpage anzuspringen, wird einem Schlüsselbild im letzten Bild der Szene folgender Code zugewiesen:

gotoAndStop("webpage", 1);

In diesem Codebeispiel entspricht webpage dem Namen der Szene und 1 der Bildnummer des Bildes, das angesprungen wird. Ein Bild mit dem Bildbezeichner game kann durch folgenden Code angesprungen werden:

gotoAndStop("game");

Bild-für-Bild-Animation5.2

Animationen können in Flash über verschiedene Techniken ver-wirklicht werden. Die Voraussetzungen und die Anforderungen an die Animation bestimmen die Wahl der Technik.

Anwendungsbereiche | Bild-für-Bild-Animationen werden recht selten eingesetzt, da sie in vielen Fällen zu einer großen Datei-größe des Flash-Films führen und vergleichsweise zeitaufwendig sind. Für jede Änderung wird ein eigenes Schlüsselbild benötigt. Daher werden sie meist nur dann verwendet, wenn eine der anderen Animationsmöglichkeiten für das gewünschte Resultat nicht ausreichend geeignet ist. Das ist z. B. der Fall bei 3D-Bit-map-Animation oder zum Teil bei animierten Comic-Zeichnun-gen, bei denen meist zwei verschiedene Techniken zum Einsatz kommen.

Essenziell für Bild-für-Bild-Animationen ist die Arbeit mit Schlüs-selbildern. Nachdem Sie einen Inhalt in einem Schlüsselbild

Ansteuerung von BildernWeitere Beispiele zur Ansteue-rung von Bildern der Zeitleiste fi n-den Sie in diesem Kapitel in Ab-schnitt 5.7, »Verschachtelung«.

Link-Tipp: Flash-FightUnter http://www.yonkis.com/ mediafl ash/animacionfl ashera.htm fi nden Sie eine witzige Zeichen-trick-Animation, die in großen Teilen mit Bild-für-Bild-Animatio-nen verwirklicht wurde.

Auf der Buch-DVD fi nden Sie eine Video-Lektion zur Bild-für-Bild-Animation (Lektion 2.1).

G Abbildung 5.31Bild für Bild: 3D-Bitmap-Animation

5.2 Bild-für-Bild-Animation | 123

platziert haben, werden für eine Bild-für-Bild-Animation in den darauf folgenden Bildern der Zeitleiste weitere Schlüsselbilder angelegt.

Bildrate | Die Bildrate eines Flash-Films ist die Geschwindigkeit der pro Sekunde angezeigten Bilder. Die Bildrate wird in Bildern pro Sekunde (BpS) gemessen und ist für die Geschwindigkeit, mit der eine Animation abläuft, ein wesentlicher Faktor.

Um die Bildrate eines Flash-Films zu ändern, wählen Sie Modifi zieren N Dokument. In den Dokumenteigenschaften können Sie die Bildrate 1 einstellen. Die standardmäßig einge-stellte Bildrate von zwölf Bildern pro Sekunde ist meist viel zu niedrig. Grundsätzlich empfi ehlt es sich, als Erstes die Bildrate zu erhöhen.

Eine perfekte Bild-für-Bild-Animation5.2.1 Ein erstes Beispiel soll Ihnen die Erstellung einer Bild-für-Bild-Animation zeigen. Wir werden dazu praxisnah einzelne Bitmap-Bilder verwenden.

Die Animation anlegenSchritt für Schritt:

1 Neues Dokument erstellenLegen Sie einen neuen Flash-Film über das Menü Datei N Neu an. Wählen Sie im Reiter Allgemein den Dokumenttyp Flash-Datei (Action Script 2.0) aus, und klicken Sie auf OK. Speichern Sie das Dokument anschließend über das Menü Datei N Speichern unter ... in ein beliebiges Verzeichnis mit dem Dateinamen step01.fl a ab.

F Abbildung 5.32Dokumenteigenschaften ändern

1

Bildrate sofort festlegenSie sollten die Bildrate immer di-rekt, nachdem Sie einen neuen Flash-Film erstellt haben, ändern, da sie für den ganzen Flash-Film gilt und die Länge einer Anima-tion nach ihr ausgerichtet wird. Eine nachträgliche Änderung würde bedeuten, dass Sie jede zuvor erstellte Animation entspre-chend an die neue Bildrate anpas-sen müssten.

Die richtige Bildrate

Die richtige Bildrate hängt vom Projekt ab, bei Spielen z. B. wer-den oft sehr hohe Bildraten zwi-schen 40 und 60 Bildern pro Se-kunde verwendet. Bei gewöhn-lichen Animationen reichen 31 Bilder pro Sekunde in der Regel aus. Da sich bestimmte Bildraten bei Macs und PCs in einigen Flash-Player-Versionen unter-schiedlich auswirken, ist eine Bildrate von 31 BpS (Bildern pro Sekunde) empfehlenswert. Die Differenz von Mac zu PC fällt bei dieser Bildrate sehr gering aus.

124 | 5 Animation

2 Bitmap-Bilder importierenAusgangsbasis sind zwölf Bitmap-Bilder, die mit Blender (http://www.blender.org), einem freien 3D-Modellierungs- und Anima-tionsprogramm, gerendert wurden. Die Einzelbilder zeigen eine Grasfl äche – der Wind weht, und die Grashalme bewegen sich von Bild zu Bild. Importieren Sie das Bitmap-Bild 01.png aus dem Ordner Bild-für-Bild über (Strg)/(°)+(R).

Da in dem Verzeichnis weitere Bilder mit einer fortlaufenden Nummerierung 02.png, 03.png etc. liegen, erscheint ein Dialog-fenster, das Sie auf eine mögliche Bildsequenz hinweist. Klicken Sie auf Ja, um alle Bilder zu importieren – jede Bitmap wird dann automatisch auf einem eigenen Schlüsselbild positioniert.

3 Film testenTesten Sie den Flash-Film über (Strg)/(°)+(¢). N

Die jetzige Animation besteht aus zwölf Einzelbildern, die mit einer Abspielgeschwindigkeit von zwölf Bildern pro Sekunde abgespielt werden. So entspricht die Länge der Animation jetzt

Abbildung 5.33 E

Ein Action Script-2.0-Dokument anlegen

Kapitel_05 N Bild-für-Bild N 01.png

Abbildung 5.34 E

Dialogfenster beim Import der Bildsequenz

Abbildung 5.35 E

Flash nach dem Import der Bildsequenz

Ergebnis der Übung: Kapi-

tel_05 N Bild-für-Bild N step01.fl a


genau einer Sekunde. Wie Sie sehen, wirkt die Animation nicht fl üssig – die Abspielgeschwindigkeit ist zu niedrig. Im nächsten Workshop erfahren Sie, wie Sie das ändern können.

DokumenteigenschaftenSchritt für Schritt: ändernIn diesem Workshop wird gezeigt, wie sich die Änderung der Bildrate auf eine Animation auswirkt und wie Sie eine Animation durch Verteilung von Schlüsselbildern abrunden können.

1 Bildrate und Größe des Films ändernÖffnen Sie die Dokumenteigenschaften über das Menü Modifi -

zieren N Dokument ..., und stellen Sie die Bildrate auf 31 Bps 1 (Bilder pro Sekunde). Auch die Breite der Bühne ist zu klein – sie wird auf 600 Pixel 2 erhöht.

2 Bildsequenz erweiternDie Animation wird jetzt deutlich schneller abgespielt – sie wirkt aber noch nicht rund. Die sich im Wind sträubenden Grashalme bewegen sich von links nach rechts. Am Ende der Bildsequenz, in Bild 12, springt der Lesekopf der Zeitleiste wieder auf Bild 1 zurück – die Animation beginnt von vorn. Um die Animation abzurunden, muss die Animation ab Bild 13 nochmals rückwärts ablaufen, sodass das letzte Bild mit dem ersten Bild der Anima-tion einen runden Übergang bildet.

Klicken Sie auf das erste Schlüsselbild der Zeitleiste, hal-ten Sie die Maustaste gedrückt, und verschieben Sie die Maus nach rechts, um alle zwölf Bilder der Zeitleiste zu markieren. Lassen Sie die Maustaste los, und öffnen Sie mit einem Klick auf die rechte Maustaste das Kontextmenü der Zeitleiste. Im

F Abbildung 5.36Dokumenteigenschaften ändern

Kapitel_05 N Bild-für-Bild N step02.fl a

1

2

SchlüsselbilderFür jede Änderung auf der Bühne wird ein Schlüsselbild benötigt. Über Schlüsselbilder steuern Sie das Auftauchen, das Verschwin-den und die Veränderung von Objekten. Ein Schlüsselbild mit Inhalt wird in der Zeitleiste durch einen gefüllten Kreis symbolisiert. Ein leeres Schlüsselbild ohne In-halt wird durch einen leeren, nicht gefüllten Kreis dargestellt.

126 | 5 Animation

Kontextmenü wählen Sie den Menüpunkt Bilder kopieren 1, wodurch alle ausgewählten Bilder in die Zwischenablage kopiert werden.

Anschließend wird Bild 13 der Zeitleiste markiert, das Kontext-menü der Zeitleiste geöffnet und der Menüpunkt Bilder einfü-

gen ausgewählt.

3 Bilder umkehren Vergleichen Sie jetzt Bild 12 und 13 miteinander. Zwischen den Bildern ist ein harter Bildwechsel, da die Reihenfolge der Bildse-quenz ab Bild 13 noch nicht stimmt.

Die Reihenfolge der Bilder 13 bis 24 wird jetzt umgekehrt. Wählen Sie dazu zunächst die Bilder 13 bis 24 aus, öffnen Sie das Kontextmenü, und wählen Sie den Menüpunkt Bilder umkeh-

ren.

Abbildung 5.37 E

Bilder kopieren

1

Bilder kopieren

Noch schneller geht das Kopie-ren, wenn Sie die Bilder auswäh-len, (Alt)/(±) gedrückt halten und dann verschieben. Ein klei-nes Pluszeichen 2 zeigt an, dass es sich um einen Kopiervorgang handelt.

Abbildung 5.38 E

Bilder kopieren auf die schnelle Art 2


4 Überfl üssige Bilder löschenDie Bitmaps in Bild 12 und 13 sind identisch – zwei gleiche Bil-der hintereinander stören den fl üssigen Ablauf. Das Schlüsselbild in Bild 13 wird deshalb über das Kontextmenü Schlüsselbild löschen entfernt.

Das Schlüsselbild wurde entfernt, stattdessen befi ndet sich aber immer noch ein Bild in Bild 13. Das Bild zeigt die Bitmap des davor stehenden Schlüsselbildes – also des Schlüsselbildes in Bild 12 an – es muss ebenfalls entfernt werden. Markieren Sie das Bild, und klicken Sie im Kontextmenü auf Bild entfernen.

5 Film testenTesten Sie den Film über (Strg)/(°)+(¢). Die Animation läuft immer noch nicht ganz rund – das letzte Bild zeigt dieselbe

F Abbildung 5.39Bildreihenfolge umkehren

F Abbildung 5.40Schlüsselbild löschen

Bilder der ZeitleisteZwischen Schlüsselbildern befi n-den sich oft »normale« Bilder (engl. Frames), die dafür sorgen, dass der Inhalt eines zuvor erstell-ten Schlüsselbildes unverändert angezeigt wird. Erst das nächste Schlüsselbild sorgt für eine Verän-derung.

F Abbildung 5.41Bild entfernen

128 | 5 Animation

Bitmap wie das erste Bild der Sequenz – es muss entfernt werden. Markieren Sie das letzte Schlüsselbild, und entfernen Sie es über das Kontextmenü Schlüsselbild löschen.

N

Die Animation ist jetzt fl üssig, allerdings sollte sie im unteren Bereich der Bühne ablaufen. Dazu muss die Position geändert werden. Sie könnten jetzt jede Bitmap in jedem Bild einzeln nach unten verschieben – besser ist es jedoch, wenn Sie die Animation in einem Movieclip verschachteln. Die Position der Bitmaps auf der Bühne lässt sich dann durch die Positionierung des Movie-clips ändern. Zusätzlich können Sie den Movieclip unabhängig von der Hauptzeitleiste steuern.

Animation in Movieclip verschachtelnSchritt für Schritt: In diesem Workshop wird gezeigt, wie sich eine Bild-für-Bild-Animation in einem Movieclip verschachteln lässt.

1 In Movieclip konvertierenMarkieren Sie zunächst die Bitmap im ersten Schlüsselbild und wandeln sie über (F8) in ein Movieclip-Symbol um. Achten Sie darauf, dass die Option Movieclip 1 aktiviert ist, und vergeben Sie den Namen »grassAni_mc« 2.

2 Bilder kopieren und löschenMarkieren Sie alle Bilder ab dem zweiten Schlüsselbild (Bild 2 bis 22), öffnen Sie das Kontextmenü der Zeitleiste, und wählen Sie den Menüpunkt Bilder kopieren.

Abbildung 5.42 E

Die Zeitleiste mit 22 Bildern, nachdem auch das letzte Schlüs-selbild entfernt wurde



Kapitel_05 N Bild-für-Bild N step03.fl a

Verschachtelung Wie Sie Movieclips verschachteln können, wird in diesem Kapitel in Abschnitt 5.7, »Verschachtelung«, näher erläutert.

Abbildung 5.43 E

In Movieclip konvertieren

1

2


Die Bilder befi nden sich jetzt in der Zwischenablage. Entfernen Sie die immer noch ausgewählten Bilder der Hauptzeitleiste anschließend über das Kontextmenü Schlüsselbild löschen.

3 Bilder in Movieclip einfügenWählen Sie die Movieclip-Instanz im ersten Schlüsselbild aus, und wechseln Sie per Doppelklick auf die Instanz in den Symbol-Bearbeitungsmodus. Wählen Sie das zweite Bild der Zeitleiste aus, öffnen Sie das Kontextmenü, und fügen Sie die Bilder über Bilder einfügen ein.

4 Bitmaps positionierenLeider werden die Bitmaps ab Bild 2 nicht automatisch richtig positioniert. Öffnen Sie Fenster N Ausrichten, aktivieren Sie die Option An Bühne ausrichten 3, wählen Sie die Bitmap in Bild 2 aus, und positionieren Sie diese per Mausklick auf Linke Kante 4 und Oberkante 5 links oben. Wiederholen Sie den Vorgang anschließend für die Bitmaps der anderen Bilder (Bild 3 bis 22).

F Abbildung 5.44Bilder kopieren

F Abbildung 5.45Bilder einfügen

Positionierung

Die Positionierung über das Fenster Ausrichten bezieht sich innerhalb eines Symbols auf den Registrierungspunkt des Symbols – im Beispiel liegt der Registrie-rungspunkt links oben –, dem-entsprechend werden die Bilder an der linken oberen Kante posi-tioniert.

130 | 5 Animation

5 Film testenTesten Sie den Film über (Strg)/(°)+(¢). N

Die gewählte Geschwindigkeit der Bild-für-Bild Sequenz führt zu einer unruhig wirkenden Animation. Um die Animation realisti-scher zu machen, wird die Geschwindigkeit im Folgenden durch Einfügen zusätzlicher Bilder angepasst.

Geschwindigkeit ändernSchritt für Schritt: In diesem Workshop lernen Sie, wie Sie durch das gezielte Ein-fügen von Bildern die Geschwindigkeit einer Animation steuern können.

1 Bilder einfügenDie Animation wirkt jetzt fl üssig, die Grashalme bewegen sich jedoch noch viel zu schnell hin und her. Um das zu korrigieren, werden zwischen allen Schlüsselbildern jeweils zwei Bilder ein-gefügt. Wählen Sie zunächst das erste Bild aus, und drücken Sie zweimal (F5), um zwei Bilder hinter dem ersten Schlüsselbild ein-zufügen. Wählen Sie dann jeweils das nächste Schlüsselbild aus, und wiederholen Sie den Vorgang.

2 Auf die Hauptzeitleiste wechselnWechseln Sie per Mausklick auf Szene 1 zurück zur Hauptzeit-leiste. Beachten Sie, dass die Zeitleiste des Movieclips »grasAni_mc« 66 Bilder besitzt – die Hauptzeitleiste jedoch nur 22 Bilder. Vielleicht würde man erwarten, dass deshalb nur 22 Bilder abge-spielt werden – da die Zeitleiste eines Movieclips jedoch unab-hängig von der Hauptzeitleiste abgespielt wird, läuft die vollstän-dige Animation ab.

Abbildung 5.46 E

Bitmaps positionieren



Abbildung 5.47 E

Die Zeitleiste des Movieclips

4 5 3

5.3 Zwiebelschaleneffekt | 131

3 Animation positionierenDa die Animation in einem Movieclip verschachtelt wurde, kön-nen Sie diese ganz einfach positionieren – im Beispiel wird der Movieclip über das Fenster Ausrichten an der linken unteren Kante der Bühne platziert.

4 Film testenGlückwunsch! Sie haben jetzt bereits sehr viel über Bild-für-Bild Animationen und das Arbeiten mit Bildern in der Zeitleiste gelernt – die Animation ist fertig gestellt. Testen Sie den Flash-Film über (Strg)/(°)+(¢).

N

Zwiebelschaleneffekt5.3

Standardmäßig wird in der Entwicklungsumgebung jeweils nur ein Bild der Zeitleiste auf der Bühne angezeigt. Mithilfe des Zwie-belschaleneffekts lassen sich jedoch auch mehrere Bilder gleich-zeitig auf der Bühne anzeigen.

F Abbildung 5.48Positionierung des Movieclips



F Abbildung 5.49Die fertige Animation im Flash Player

Anwendungsbereich

Der Zwiebelschaleneffekt ist be-sonders bei Bild-für-Bild-Anima-tionen sehr nützlich, wenn Sie einzelne Objekte von Bild zu Bild vergleichen und verändern möchten.

132 | 5 Animation

Zwiebelschaleneffekt aktivieren | Per Mausklick auf die Schalt-fl äche Zwiebelschale 1 können Sie die Zwiebelschalenansicht in der Zeitleiste aktivieren bzw. deaktivieren.

Im oberen Bereich der Zeitleiste werden nach der Aktivierung des Modus zwei Anfasser sichtbar 2 und 3, die den Anfang bzw. das Ende der Zwiebelschalenansicht zeigen. Sie sehen anhand der Anfasser, welche Bilder der Zeitleiste auf der Bühne darge-stellt werden. Die Anfasser können per Drag & Drop verschoben werden 4, um den angezeigten Bereich zu vergrößern oder zu verkleinern.

Konturansicht | Normalerweise werden Formfüllungen von Bil-dern, die im Bereich des Zwiebelschaleneffekts liegen, mit ver-schiedenen Transparenzstärken dargestellt.

Wenn Sie nach der Aktivierung des Zwiebelschaleneffekts auf Zwiebelschalenkonturen 6 klicken, werden stattdessen nur die Konturen der Formen angezeigt.

Abbildung 5.50 E

Der Zwiebelschaleneffekt wurde aktiviert.

Abbildung 5.52 E

Der Bereich der Zwiebelschalen-ansicht wird vergrößert.

Transparenz in der Zwiebel-schalenansichtJe weiter das Bild vom aktuellen Bild entfernt ist, desto stärker scheint das Objekt durch – so lässt sich der zeitliche Ablauf visu-ell nachvollziehen.

23

4 5

1

Anfasser verankern

Über die Schaltfl äche Zwiebel-

schalenmarkierung ändern 5 können Sie die Anfasser veran-kern. Dies führt dazu, dass sie, unabhängig vom ausgewählten Bild, immer auf der gleichen Po-sition bleiben.

G Abbildung 5.51Markierungen verankern

5.3 Zwiebelschaleneffekt | 133

Mehrere Bilder gleichzeitig bearbeiten | Der Modus Mehrere Bilder bearbeiten 7 ermöglicht es, mehrere Bilder der Zeitleiste, die im Zwiebelschalenbereich liegen, gleichzeitig zu modifi zieren. Nachdem der Modus aktiviert wurde, können Sie die Bilder in der Zeitleiste auswählen und dann gemeinsam modifi zieren.

Diese Funktion ist sehr nützlich – Sie können z. B. auch alle Ele-mente einer Ebene gleichzeitig verschieben. Aktivieren Sie dazu den Modus, verschieben Sie die Anfasser des Zwiebelschalen-Modus und klicken Sie auf die Ebene, deren Elemente Sie ver-schieben möchten – die Elemente werden automatisch ausge-wählt.

F Abbildung 5.53Zwiebelschalenkonturen

F Abbildung 5.54Die Elemente mehrerer Schlüssel-bilder wurden ausgewählt und werden gleichzeitig verschoben.

Bereich des Zwiebelschalen-effektsBeachten Sie, dass nur die Ele-mente gleichzeitig modifi ziert werden, die innerhalb des defi -nierten Zwiebelschalenbereichs liegen. Sollte ein Bild der Zeit-leiste außerhalb liegen, wird es nicht modifi ziert; auch dann nicht, wenn es ausgewählt wurde.

F Abbildung 5.55Alle Elemente der ausgewählten Ebene werden gleichzeitig ver-schoben.

6

7

134 | 5 Animation

Generell sollten Sie den Zwiebelschalen-Modus nur partiell nut-zen – und denken Sie daran, den Modus zu deaktivieren, nach-dem Sie ihn verwendet haben. Es kommt gelegentlich vor, dass man die Deaktivierung vergisst und dann unerwünschte Mehr-fachauswahlen zu unerwarteten Ergebnissen führen.

Bewegungstweening5.4

Neben der Bild-für-Bild-Technik lassen sich Animationen in Flash über ein so genanntes Tweening verwirklichen. Es gibt Bewe-gungstweenings und Formtweenings. Zunächst werden im Fol-genden Bewegungstweenings erläutert. Beide Methoden basieren auf derselben Technik: Bei einem Tweening werden Schlüsselbil-der nur an bestimmten signifi kanten Stellen platziert. Bilder, die zwischen den Schlüsselbildern liegen, werden automatisch von Flash berechnet.

Bewegungstweening aktivieren | Um ein Bewegungstweening zwischen zwei Schlüsselbildern zu defi nieren, wählen Sie das erste Schlüsselbild aus, öffnen das Eigenschaften-Fenster und wählen unter Tween den Eintrag Bewegung aus.

Bewegungstweening-Optionen | Im Eigenschaften-Fenster ste-hen Ihnen folgende Optionen für das Bewegungstweening zur Auswahl:

Skalieren � : Wenn Sie das Optionsfeld 1 aktivieren, wird das Objekt während des Tweenings skaliert – ist die Option deak-tiviert, wird das Objekt nicht skaliert. Wenn Sie die Option deaktivieren, würde eine Größenänderung nur im Endbild sichtbar sein.Beschleunigung � 2: Hier können Sie den zeitlichen Ablauf der Animation beeinfl ussen, indem Sie das Tweening entwe-der zu Beginn oder am Ende der Animation abbremsen.Bearbeiten � 3: Ermöglicht ein benutzerdefi niertes Beschleu-nigen oder Abbremsen. Mehr zum Thema Beschleunigen und Abbremsen erfahren Sie in diesem Kapitel in Abschnitt 5.4.3, »Das richtige Timing«.

� Drehen 4: Über das Listenfeld legen Sie fest, ob das getweente Objekt rechts, links oder nicht gedreht werden soll. Die Option Automatisch führt dazu, dass das Objekt nur so weit wie nötig gedreht wird.Sync � 5: Eine mögliche Animation, die innerhalb des getween-ten Objekts erstellt wurde, wird an die Dauer des Bewe-gungstweenings angepasst.

Nur mit SymbolenBewegungstweenings funktionie-ren nur mit Symbolinstanzen – Formen müssen Sie vorher also z. B. in ein Movieclip-Symbol um-wandeln.

Ausgangs- und Endbild

Im Gegensatz zur Bild-für-Bild-Animation benötigt ein Bewe-gungstweening nur zwei Schlüs-selbilder, die den Ausgangspunkt und den Endpunkt der Anima-tion defi nieren.

An Pfad ausrichten/AusrichtenErläuterungen zu den Einstellun-gen An Pfad ausrichten und Ausrichten fi nden Sie in diesem Kapitel in Abschnitt 5.4.2, »An Pfad ausrichten«.

G Abbildung 5.56Bewegungstweening aktivieren

5.4 Bewegungstweening | 135

G Abbildung 5.57Bewegungstweening-Optionen

Ein Bewegungstweening erstellenSchritt für Schritt: In diesem Workshop lernen Sie, wie Sie ein Bewegungstweening erstellen können.

1 Film öffnenÖffnen Sie den Flash-Film step01.fl a aus dem Ordner Bewe-

gungs_Tweening. Ausgangsbasis ist eine Bild-für-Bild-Anima-tion, die im Folgenden durch eine weitere Animation ergänzt werden soll. Das Objekt wird auf einer eigenen Ebene platziert. Erstellen Sie dazu per Mausklick auf Ebene einfügen 6 eine neue Ebene grasHüpfer.

2 Bitmap importierenWählen Sie das leere Schlüsselbild in Bild 1 auf der Ebene gras-

Hüpfer aus, und importieren Sie die Bitmap gras_hopper_02.

png über (Strg)/(°)+(R).

Kapitel_05 N Bewegungs_

Tweening N step01.fl a

F Abbildung 5.59Eine neue Ebene erstellen


Tweening N gras_hopper_02.png

F Abbildung 5.60Flash nach dem Import der Bitmap

2 1 3

4 5

6

Eine Ebene

Elemente, die über ein Tweening animiert werden, müssen allein auf einer eigenen Ebene platziert werden.

G Abbildung 5.58Die gestrichelte Linie zeigt einen Fehler im Tweening an – der Grund: Zwei Elemente wurden auf der Ebene platziert.

136 | 5 Animation

3 Bitmap in Movieclip konvertierenWählen Sie den Grashüpfer auf der Bühne aus, und konvertieren Sie ihn über (F8) in den Movieclip »hüpfer_mc«.

4 Ausgangspunkt festlegenZunächst wird der Grashüpfer in Bild 1 nach unten und etwas nach links verschoben, sodass er zu Beginn links außerhalb der der Bühne positioniert ist – der Hüpfer soll sich dann von links nach rechts bewegen.

5 Endzustand bestimmenAm Ende der Animation soll er sich rechts außerhalb der Bühne befi nden. Fügen Sie dazu in Bild 15 ein Schlüsselbild ein, und verschieben Sie die Movieclip-Instanz entsprechend.

Abbildung 5.61 E

In Movieclip konvertieren

Abbildung 5.62 E

Positionierung im ersten Bild

Abbildung 5.63 E

Das Endbild der Animation

Bewegungstweening mit Symbolinstanzen

Objekte, die über ein Bewe-gungstweening animiert werden, müssen vorher in ein Grafi k- oder Movieclip-Symbol umge-wandelt werden. Wenden Sie ein Bewegungstweening fälschli-cherweise auf ein anderes Ob-jekt an, wird dieses automatisch in ein Grafi ksymbol konvertiert.


6 Bewegungstweening aktivierenÜber ein Bewegungstweening werden die Zwischenstände beider Punkte zur Laufzeit automatisch generiert – das führt dann zur gewünschten Bewegung. Wählen Sie Bild 1 aus, öffnen das Eigen-

schaften-Fenster, und aktivieren das Bewegungstweening 1.

7 Film testenTesten Sie den Film über (Strg)/(°)+(¢). Ein Problem bleibt noch zu lösen: Die Gras-Animation wird nicht wie erwartet abge-spielt. Sie wird nur kurz im ersten Bild eingeblendet.

8 Bilder einfügenDer Movieclip »grasAni_mc«, der die Gras-Animation enthält, ist nur im ersten Bild sichtbar. Ab Bild 2 sind auf der Ebene gras-

Animation leere Bilder. Ein Movieclip wird unabhängig von der Hauptzeitleiste des Flash-Films abgespielt – da der Movieclip ab Bild 2 jedoch nicht mehr existiert, wird die Animation nicht ange-zeigt. Um das Problem zu beheben, werden zwischen Bild 2 und Bild 15 weitere Bilder eingefügt. Markieren Sie die entsprechen-den Bilder in der Zeitleiste, und drücken Sie (F5).

9 Film erneut testenTesten Sie den Film erneut über (Strg)/(°)+(¢). Jetzt sollte auch die Gras-Animation die ganze Zeit zu sehen sein. N

Die Bewegung des Grashüpfers ist noch zu schnell – die Animation wirkt nicht realistisch. Im folgenden Workshop wird die Geschwin-digkeit durch eine Verlängerung des Tweenings angepasst.

Tweening verlängernSchritt für Schritt: In diesem Workshop erfahren Sie, wie Sie ein Bewegungs-tweening verlängern können.

F Abbildung 5.64Bewegungstweening aktivieren

F Abbildung 5.65Bilder einfügen


Tweening N step02.fl a

1

138 | 5 Animation

1 Film öffnenÖffnen Sie den Flash-Film step02.fl a aus dem Ordner Bewe-

gungs_Tweening. Der kleiner Grashüpfer bewegt sich im Moment untypisch für seine Art eher mit der Geschwindigkeit eines Formel-1-Autos. Um ein Tweening zu verlangsamen , wird die Anzahl der Bilder des Tweenings erhöht – da dann mehr Bil-der für dieselbe Strecke der Bewegung eingesetzt werden, wird die Distanz, die der Hüpfer zurücklegt, von Bild zu Bild kürzer und die Bewegung langsamer.

2 Schlüsselbild verschieben Wählen Sie dazu die letzten Bilder beider Ebenen durch (ª)+Mausklick aus, halten Sie die Maustaste gedrückt, und ver-schieben Sie die Bilder auf Bild 40.

3 Film testenTesten Sie den Film im Flash Player über (Strg)/(°)+(¢).

N

Animation kopieren und einfügen5.4.1 In Flash CS3 wurde die Möglichkeit, ein Bewegungstweening zu kopieren und auf eine andere Symbolinstanz anzuwenden, integriert. Um eine Bewegung zu kopieren, müssen Sie zunächst die Bilder des Bewegungstweenings auswählen. Öffnen Sie dann das Kontextmenü, und wählen Sie den Menüpunkt Bewegung kopieren.

Abbildung 5.66 E

Verschieben der Endbilder auf Bild 40


tel_05 N Bewegungs_Tweening N step03.fl a

Abbildung 5.67 E

Das Bewegungstweening im Flash Player

AnwendungDie Funktion Bewegung kopieren ist sehr nützlich, wenn Sie meh-rere Objekte, z. B. an verschiede-nen Positionen, auf die gleiche Art und Weise animieren möchten.


Anschließend können Sie die Bewegung auf eine andere Symbol-instanz anwenden. Wählen Sie dazu das Schlüsselbild mit der Instanz aus, öffnen Sie das Kontextmenü, und wählen Sie den Menüpunkt Bewegung einfügen.

Überfl üssige Bilder | Flash legt beim Einfügen einer Bewegung automatisch ein zusätzliches Schlüsselbild und weitere Bilder 1 an, die nicht benötigt werden. Diese sollten Sie über Schlüssel-

bild löschen anschließend entfernen.

Werden innerhalb eines Bewegungstweenings mehrere Instanz-eigenschaften, wie z. B. die Skalierung, die Position oder der Alphawert, geändert, können Sie die zuvor kopierte Bewegung auch über das Menü Spezielle Bewegung einfügen ... einfügen. In dem darauf erscheinenden Dialogfenster (siehe Abbildung 5.70) können Sie explizit die Instanzeigenschaften auswählen, die aus der ursprünglichen Animation übernommen werden sollen.

F Abbildung 5.68Bewegung kopieren

F Abbildung 5.69Löschen Sie die überfl üssigen Bilder und das Schlüsselbild.

1

140 | 5 Animation

An Pfad ausrichten5.4.2 Über ein normales Tweening können Sie ein Element nur auf einer geraden Linie bewegen. Kurven und Kreisbewegungen sind so nicht möglich. Die Lösung für solche Bewegungen ist ein von Ihnen defi nierter Bewegungspfad , an dem sich das bewegte Objekt orientiert.

Um ein Bewegungstweening an einem solchen Pfad auszurich-ten, wählen Sie die Ebene mit dem Tweening aus, öffnen das Kontextmenü und wählen den Menüpunkt Pfad hinzufügen.

Es wird automatisch eine neue so genannte Führungsebene erstellt, über die Sie den Verlauf der Bewegung durch einen Pfad bestimmen. Den Pfad selbst können Sie z. B. mit dem Stift-Werk-zeug anlegen.

Damit das getweente Objekt sich nun auch an diesem Pfad ent-langbewegt, muss es jeweils im ersten und im letzten Schlüsselbild des Tweenings am Pfad ausgerichtet werden. Dazu positionieren Sie das Objekt in den beiden Schlüsselbildern entsprechend. Ein Kreis erscheint neben dem Mauszeiger, wenn sich das Objekt über dem Pfad befi ndet. Lassen Sie die Maustaste dann los, damit das Objekt am Pfad einrastet.

Abbildung 5.70 E

Spezielle Bewegung einfügen

Abbildung 5.72 E

Führungsebene in der Zeitleiste

G Abbildung 5.71Pfad hinzufügenG Abbildung 5 71


Im Eigenschaften-Fenster stehen Ihnen zusätzlich zwei weitere Einstellungen für das am Pfad ausgerichtete Tweening zur Verfü-gung:

Ausrichten � 1: Bei einem Bewegungstweening, das an einem Pfad ausgerichtet wurde, richtet sich das Objekt automatisch an den Pfadpunkten aus.An � Pfad ausrichten 2: Die aktivierte Option führt dazu, dass das Objekt sich nicht nur an einem Pfad entlangbewegt, son-dern sich auch in Pfadrichtung dreht.

Bewegungstweening an Pfad ausrichtenSchritt für Schritt: Im Folgenden wird erläutert, wie Sie ein Bewegungstweening an einem Pfad ausrichten.

1 Flash-Film öffnenÖffnen Sie den Flash-Film step01.fl a aus dem Ordner Bewe-

gungs_Tweening_Pfad. Der Grashüpfer wird zusätzlich zur Gras-Animation mithilfe von vier Bewegungstweenings animiert.

2 Schlüsselbilder erstellenFügen Sie dazu zunächst in Bild 10 und 30 weitere Schlüsselbil-der ein.

F Abbildung 5.73Pfadoptionen im Eigenschaften-Fenster


Tweening_Pfad N step01.fl a

F Abbildung 5.74Die vorbereitete Flash-Datei

2 1

142 | 5 Animation

3 Positionen verändernDer Grashüpfer wird in Bild 10 im Bühnenbereich etwas nach rechts verschoben. In Bild 30 wird er weiter nach rechts an den rechten Bühnenrand verschoben.

4 Bewegungstweening einstellenDie Schlüsselbilder werden schrittweise in der Zeitleiste aus-gewählt, und im Eigenschaften-Fenster werden Bewegungs-tweenings eingestellt.

5 Führungsebene anlegenIn der Zeitleiste wird eine neue Ebene Pfad erstellt. Anschließend wird per Klick mit der rechten Maustaste das Kontextmenü geöff-net, und die Ebene wird über den Menüpunkt Führungsebene in eine Führungsebene umgewandelt.

6 Schlüsselbilder anlegenIn Bild 10 wird auf der Ebene Pfad ein leeres Schlüsselbild ein-gefügt. Ab hier soll sich das Objekt an der Führungsebene orien-tieren.

Abbildung 5.75 E

Weitere Schlüsselbilder einfügen

Abbildung 5.76 E

Bewegungstweenings defi nieren

Abbildung 5.77 E

Ebene in Führungsebene umwandeln


7 Führungspfad zeichnenMit dem Stift-Werkzeug wird auf Bild 10 der Führungspfad eingezeichnet. Die Pfadform gibt die Bewegung des Objekts vor – in diesem Fall eine Flugkurvenform. Achten Sie beim Zeichnen darauf, dass der erste Punkt des Pfads in etwa an der Stelle des Grashüpfers positioniert wird.

Die Endposition des Pfads sollte in etwa der Position des Hüpfers auf Bild 30 entsprechen. Fügen Sie in Bild 31 ein lee-res Schlüsselbild ein – ab hier soll die Pfadebene keinen Einfl uss mehr auf die Bewegung nehmen.

8 Objekt an Pfad einrastenDamit der Grashüpfer sich an dem eben erstellten Führungspfad entlangbewegt, muss er an den Enden des Pfads einrasten. Wäh-len Sie den Hüpfer jeweils in Bild 10 und Bild 30 aus, halten Sie die Maustaste gedrückt, und verschieben Sie die Movieclip-Instanz so, dass der Kreis 1 in der Mitte am Pfad einrastet.

F Abbildung 5.78Das Schlüsselbild defi niert den Anfang der Pfad-Animation.

F Abbildung 5.79Zeichnen Sie den Bewegungspfad, an dem der Grashüpfer »entlang-hüpfen« soll.

144 | 5 Animation

9 Film testenTesten Sie den Film über (Strg)/(°)+(¢). Der Grashüpfer sollte zu Beginn von links nach rechts in den Bühnenbereich eintreten, einen kurzen kräftigen Sprung machen und wieder aus der Bühne hinauslaufen. Sollte der Sprung nicht funktionieren, überprüfen Sie nochmals, ob der Movieclip in den Bildern 10 und 30 am Pfad eingerastet ist. N

Das richtige Timing5.4.3 Ein wesentlicher Faktor für eine gute Animation ist das richtige Timing. Die Geschwindigkeit einer Animation wird durch zwei Faktoren beeinfl usst:

Die Bildrate des Flash-Films �

Die Anzahl der Bilder der Animation �

Stimmen Sie daher die Bildrate und die Anzahl der Bilder der Animation aufeinander ab. Üblicherweise wird zuerst die Bildrate für den gesamten Flash-Film defi niert und dann die Anzahl der Bilder der jeweiligen Animation. Die richtige Auswahl der Werte, das richtige Timing, entscheidet oft darüber, ob eine Animation glaubhaft wirkt oder nicht.

Neben diesen beiden Faktoren lässt sich das Timing auch durch einen dritten Faktor beeinfl ussen – durch Beschleunigung und Abbremsen.

Bewegungstweening mit Beschleuni-Schritt für Schritt: gung und Abbremsen In diesem Workshop erfahren Sie, wie Sie das Timing eines Bewe-gungstweenings über Beschleunigung und Abbremsen beeinfl us-sen können.

Abbildung 5.80 E

Am Pfad einrasten


tel_05 N Bewegungs_Tweening_

Pfad N step02.fl a

1


1 Flash-Film öffnenÖffnen Sie zunächst das Beispiel step01.fl a aus dem Ordner Beschleunigung_Abbremsen.

2 Beschleunigung am AnfangAusgangsbasis ist ein Bewegungstweening, in dem ein Herz von klein auf groß skaliert wird. Die Animation wirkt so nicht beson-ders realistisch.

Wählen Sie das Schlüsselbild in Bild 1 aus, und stellen Sie die Beschleunigung auf –50 1. Durch diese Einstellung wird das Herz zunächst langsamer und dann immer schneller skaliert.

3 Beschleunigung am EndeWählen Sie das Schlüsselbild in Bild 10 aus, und stellen Sie die Beschleunigung auf 100 (am Ende) 2, wodurch die Skalierung des Herzens ab Bild 10 am Ende abgebremst wird. Durch die gegeneinander wirkenden Beschleunigungen wirkt die Anima-tion schon deutlich besser – mit einem synchron laufenden Herz-schlagsound dazu würde die richtige Stimmung entstehen.

Kapitel_05 N Beschleuni-

gung_Abbremsen N step01.fl a

F Abbildung 5.81Ein schlagendes Herz

F Abbildung 5.82Beschleunigung am Anfang

1

146 | 5 Animation


Benutzerdefi nierte Beschleunigung und Abbremsen | Seit Flash 8 lässt sich der zeitliche Ablauf eines Bewegungstweenings noch differenzierter steuern. Nachdem Sie ein Schlüsselbild oder ein Zwischenbild eines Tweenings ausgewählt haben, erreichen Sie über Bearbeiten... 3 ein Dialogfenster zur Steuerung des zeitli-chen Ablaufs.

Das Dialogfenster ermöglicht es Ihnen, die Bewegung bzw. die Änderung des getweenten Objekts zwischen Anfangs- und End-zustand zu steuern. Die horizontale Achse gibt die Bilder des Tweenings wieder. Die vertikale Achse zeigt den Veränderungs-grad in Prozent.

Abbildung 5.83 E

Beschleunigung am Ende

Ergebnis der Übung: Kapitel_05 N Beschleunigung_

Abbremsen N step02.fl a

Lineares TweeningStandardmäßig liegt der Wert des ersten Schlüsselbildes bei 0 % und der Wert des letzten Schlüsselbil-des bei 100 % – dies entspricht einem linearen Tweening.

Abbildung 5.85 E

Benutzerdefi nierte Beschleuni-gung und Abbremsen

Beschleunigung

Der Ausdruck »Beschleunigung » ist hier etwas unglücklich ge-wählt. Stellen Sie sich den Wert als »Abbremsung« vor. Ein Wert wie 40 am Ende bedeutet also, dass die Bewegung am Ende um den Wert 40 abgebremst wird. Ein Wert wie 30 am Anfang würde bedeuten, dass die Bewe-gung am Anfang abgebremst werden würde.

45

2

Abbildung 5.84 E

Klicken Sie auf Bearbeiten ..., um das Dialogfenster zu öffnen.

3


Über das Optionsfeld 4 können Sie festlegen, ob sich der Graph auf eine einzige Eigenschaft des getweenten Objekts oder auf alle Eigenschaften auswirkt. Wenn das Optionsfeld deaktiviert wird, lässt sich eine Eigenschaft im Listenfeld 5 auswählen. Folgende Eigenschaften lassen sich so getrennt voneinander steuern:

Position (leider nicht getrennt in X- und Y-Position) �

Drehung des Objekts �

Größe bzw. Skalierung des Objekts �

Farbe �

Filter(effekte) �

Die Kurve selbst lässt sich durch Auswahl der Scheitelpunkte, die ähnlich wie Ankerpunkte eines Kurvensegments agieren, beeinfl ussen. Per Mausklick auf die Linie können Sie einen neuen Ankerpunkt erzeugen.

Um einen Scheitelpunkt zu entfernen, wählen Sie ihn mit der Maus aus und drücken (Entf), um ihn zu löschen. Per Mausklick auf die Schaltfl äche Zurücksetzen stellen Sie den ursprünglichen Graphen wieder her.

Bewegungstweening mit benutzerdefi -Schritt für Schritt: nierter Beschleunigung (1) In diesem Workshop wird gezeigt, wie Sie das Timing eines Bewe-gungstweenings über die Beschleunigung beeinfl ussen können.

1 Flash-Film öffnenÖffnen Sie dazu den Flash-Film step01.fl a aus dem Ordner Benutzerdefi nierte_Beschleunigung. Ausgangsbasis ist ein sich von links nach rechts bewegendes Motorrad.

F Abbildung 5.86Ein zusätzlicher Ankerpunkt wurde in der Mitte angelegt.

Kapitel_05 N Benutzer-

defi nierte_Beschleunigung N step01.fl a

148 | 5 Animation

2 Benutzerdefi nierte Beschleunigung einstellenKlicken Sie im Eigenschaften-Fenster auf Bearbeiten... 1. Erstel-len Sie zwei zusätzliche Scheitelpunkte in Bild 6 2 und Bild 33 3, und verschieben Sie diese vertikal, wie in der folgenden Abbil-dung zu sehen. Um den Verlauf der Linie zwischen den Punkten zu ändern, wählen Sie die Scheitelpunkte aus und verschieben einen oder beide Anfasser 4 und 5 der Tangente.

Der erste Abschnitt zwischen den Punkten 6 und 2 erstreckt sich über die ersten sechs Bilder der Zeitleiste. Sie sehen das anhand der horizontalen Achse. Bis Bild 6 werden 30 % der Stre-cke zurückgelegt – die vertikale Achse zeigt das. Da das Tweening aus insgesamt 40 Bildern besteht, stellen diese sechs Bilder eine vergleichsweise kurze Zeit dar. Das Motorrad bewegt sich zu Beginn also entsprechend schnell. Ab Bild 6 verläuft die Kurve wesentlich fl acher über einen längeren Zeitraum, was zur Folge hat, dass sich das Motorrad deutlich langsamer bewegt. Zu guter Letzt beschleunigt es wieder ab Bild 33, die Kurve steigt hier deutlich an.

Abbildung 5.87 E

Die Animation des Motorrads

Abbildung 5.88 E

Die erste benutzerdefi nierte Beschleunigung

1

3

4

25

6



Im letzten Workshop haben Sie gelernt, wie Sie eine Bewegung gezielt abbremsen und beschleunigen können. Mithilfe der benutzerdefi nierten Beschleunigung können Sie zusätzlich die Bewegungsrichtung steuern. So sind auch rücklaufende Bewe-gungen möglich. Dies wird im folgenden Workshop erläutert.

Bewegungstweening mit benutzerdefi -Schritt für Schritt: nierter Beschleunigung (2)In diesem Workshop wird gezeigt, wie Sie die Bewegungsrichtung mithilfe einer benutzerdefi nierten Beschleunigung und Abbrem-sung umkehren können.

1 Film öffnenÖffnen Sie den Flash-Film step02.fl a aus dem Ordner Benutzer-

defi nierte_Beschleunigung.

2 Benutzerdefi nierte Beschleunigung einstellenWählen Sie das erste Schlüsselbild des Bewegungstweenings aus, klicken Sie im Eigenschaften-Fenster auf Bearbeiten, und verändern Sie den Graphen, wie in der folgenden Abbildung zu sehen.

3 Film testenTesten Sie den Film über (Strg)/(°)+(¢). Die Bewegungsrich-tung des Balls verläuft von oben nach unten – das bedeutet, dass sich der Ball bei 100 % auf der y-Achse am niedrigsten Punkt befi ndet – in Bild 10. Im zweiten Abschnitt, der sich zwischen Bild 10 und Bild 20 befi ndet, bewegt sich der Ball rückläufi g. Der Ball bewegt sich von unten nach oben. Der Vorgang wiederholt

Kapitel_05 N Benutzer-

defi nierte_Beschleunigung N step02.fl a

F Abbildung 5.89Der Graph der Ball-Animation

150 | 5 Animation

sich anschließend – der Ball bewegt sich abwechselnd weiter von oben nach unten, wobei die Auslenkung nach oben immer gerin-ger wird.

N

Instanzeigenschaften5.4.4 animierenNeben der Position einer Symbolinstanz lassen sich folgende wei-tere Eigenschaften einer Symbolinstanz animieren:

Skalierung | Sie können die Breite und Höhe einer Instanz ani-mieren. Als Eingabe können sowohl absolute Werte über das Eigenschaften-Fenster verwendet werden (z. B. unter Breite 1 200 Pixel) als auch prozentuale Werte über das Transformieren-Fenster (z. B. 250 % 2).

Abbildung 5.90 E

Rückläufi ge Bewegung des Balls

Beispiele auf DVDBeispiele fi nden Sie auf der DVD im Verzeichnis Kapitel_05 N Instanz eigenschaften.

G Abbildung 5.92Skalierung im Transformieren-Fenster festlegen

G Abbildung 5.91Skalierung im Eigenschaften-Fenster ändern

Abbild

21


Rotation | Symbolinstanzen können mithilfe des Frei-transfor-mieren-Werkzeugs oder über das Transformieren-Fenster per Eingabe rotiert 3 und geneigt 4 werden.

Helligkeit | Der Helligkeitswert einer Instanz lässt sich im Eigen-

schaften-Fenster einstellen. Wählen Sie dazu im Dropdown-Menü Farbe den Eintrag Helligkeit 1 aus. Anschließend können Sie mit dem Schieberegler rechts daneben 2 oder per Eingabe in das Feld den Grad der Helligkeit bestimmen.

Farbton | Nachdem Sie im Eigenschaften-Fenster im Bereich Farbe die Einstellung Farbton gewählt haben, können Sie per Mausklick auf das Farbfeld 3 einen Farbton und im Feld rechts daneben 4 die Helligkeit des Farbtons auswählen (siehe Abbil-dung 5.96).

Im Bereich RGB 5 können Sie alternativ über den RGB-Farb-wert (Rot, Grün, Blau) durch Mischung einen Farbton erzeugen. Die jeweils eingestellte Farbe überlagert die Instanz fl ächende-ckend.

F Abbildung 5.93Rotation im Transformieren-Fenster einstellen

F Abbildung 5.95Helligkeit auf 100 %, der Movie-clip erscheint komplett weiß.

TippDie Veränderung des Helligkeits-werts mit einem Tweening benö-tigt deutlich weniger CPU-Last als die Veränderung des Alphawerts. Bei einem schwarzen oder weißen Hintergrund lässt sich der Hellig-keitswert nutzen, um ein Alpha-tweening zu simulieren.

Drehung animieren

Unter Drehen im Eigenschaf-

ten-Fenster lässt sich eine Dre-hung auch auf ein ganzes Tweening anwenden. Sie können dabei sowohl die Richtung 6 als auch die Anzahl der Drehungen bestimmen 7.

G Abbildung 5.94Tweening-Einstellung: Drehen

6 7

1 2

43

152 | 5 Animation

Transparenz | Der Alphawert einer Instanz defi niert die Trans-parenz. Der Wert 100 % entspricht einer vollen Deckkraft der Instanz. Der Wert 0 % sorgt dafür, dass das Objekt vollständig durchscheint.

Erweiterte Farbeinstellungen | Wenn Sie im Eigenschaften-Fenster im Dropdown-Menü Farbe den Eintrag Erweitert wäh-len, können Sie über die Schaltfl äche Einstellungen den Farbton und gleichzeitig auch die Transparenz über den Alphawert mit einem einzigen Schritt festlegen.

Die Farbe und die Transparenz werden hierbei über einen RGBA-Wert (Rot, Grün, Blau, Alpha) festgelegt.

Abbildung 5.96 E

Auch die Instanzeigenschaft Farb-

ton lässt sich im Eigenschaften-Fenster ändern.

Abbildung 5.97 E

Der Alphawert des Movieclips »mc« wurde auf 0 % gestellt – er wird unsichtbar 1.

1

435

1


Mischmodi5.4.5 Über so genannte Mischmodi können Sie die Darstellung einer Symbolinstanz, die andere Objekte überlagert, beeinfl ussen – Sie kennen vielleicht Ebenenmodi aus Photoshop, die ähnlich funk-tionieren.

In Flash können Mischmodi hingegen nur auf einzelne Symbol-instanzen und nicht auf Ebenen angewandt werden. Ein Misch-modus setzt sich aus Misch- und Grundfarbe zusammen. Die Mischfarbe ist die Farbe des Objekts, auf die der Mischmodus angewandt wird. Die Grundfarbe ist die Farbe der Objekte, die sich unterhalb der Mischfarbe befi nden.

Folgende Mischmodi stehen Ihnen im Eigenschaften-Fenster zur Auswahl:

F Abbildung 5.98Erweiterte Farbtoneinstellungen

Experimentieren Sie ...Das Resultat einer Mischung fällt sehr unterschiedlich aus, da es auch von der Transparenz eines Objekts abhängig ist. Probieren Sie einfach verschiedene Modi aus.

F Abbildung 5.100Verschiedene Mischmodi im Flash Player

G Abbildung 5.99Die verfügbaren Mischmodi im Eigenschaften-Fenster

bbild

1

2

6

J

N

5

9

M

3

4

8

L

7

K

154 | 5 Animation

1 Normal: Die Farben werden nicht gemischt (Standard).2 Ebene: Der Modus nimmt keinen Einfl uss auf die Darstel-

lung des Objekts – er ist notwendig, um die Modi Alpha und Löschen anwenden zu können.

3 Abdunkeln: Bereiche, die heller sind als die Mischfarbe, wer-den ersetzt. Bereiche, die dunkler als die Mischfarbe sind, blei-ben unverändert, was insgesamt zu einer Abdunklung führt.

4 Multiplizieren: Grundfarbe und Mischfarbe werden multipli-ziert, was zu dunkleren Farbtönen führt.

5 Aufhellen: Bereiche, die dunkler sind als die Mischfarbe, werden ersetzt. Hellere Bereiche bleiben unverändert.

6 Bildschirm: Die Umkehrfarbe der Mischfarbe wird mit der Grundfarbe multipliziert. Dies führt zu helleren Farbtönen.

7 Überlagern: Die Farben werden je nach Grundfarbe multipli-ziert oder gefi ltert.

8 Hartes Licht: Die Farben werden abhängig von der Misch-farbe multipliziert oder gefi ltert. Der erzielte Effekt ist ver-gleichbar mit einem Strahler, der das Objekt beleuchtet.

9 Hinzufügen: Grund- und Mischfarbe werden addiert.J Subtrahieren: Die Mischfarbe wird von der Grundfarbe sub-

trahiert.K Differenz: Die Farbe mit dem größeren Helligkeitswert wird

von der anderen Farbe abgezogen.L Umkehren: Kehrt die Grundfarbe um.M Alpha: Die überlagernde Instanz wird als Alphamaske auf die

untere angewandt.N Löschen: Alle Pixel, die mit der Grundfarbe eingefärbt sind,

werden gelöscht.

Formtweening5.5

So genannte Formtweenings werden dazu verwendet, Vektorfor-men über einen bestimmten Zeitraum umzuformen, so kann z. B. aus einem Kreis ein Stern entstehen. Ein Formtweening funktio-niert ausschließlich mit Vektorformen – es können keine Symbole und auch keine Bitmaps verwendet werden.

Bitmaps in Vektoren umwandeln5.5.1 Gelegentlich möchte man Bitmap-Grafi ken als Ausgangsbasis für ein Formtweening nutzen. Dazu muss die Bitmap zunächst in Vektoren umgewandelt werden. Sie können eine ausgewählte Bitmap über das Menü Modifi zieren N Bitmap N Bitmap nach-

zeichnen in eine Vektorform umwandeln.

Alpha & LöschenBei diesen Modi muss für die un-ten liegende Instanz jeweils der Mischmodus Ebene aktiviert sein.

DateigrößeNicht jede Bitmap eignet sich für die Umwandlung in Vektoren. Sehr komplexe Formen würden zu einer sehr hohen Dateigröße füh-ren. Behalten Sie die Dateigröße des Flash-Films also immer im Auge, wenn Sie eine Bitmap in Vektoren umwandeln.

Index | 691

IND

EX

Symbole3D-Animationen 583

Swift 5839-teiliges-Segmentraster 82.aiff 409_alpha (Movieclip-Eigenschaft)

295.asf 435.au 409.avi 435_blank 102.dv 435.dvi 435.fl v 435_global 251_height (Movieclip-Eigenschaft)

295.mov 435.mp3 409.mpeg 435.mpg 435_parent 271_root 271_rotation (Movieclip-Eigenschaft)

295_visible 82_width (Movieclip-Eigenschaft)

295.wav 409.wmf 435_x (Movieclip-Eigenschaft) 295_xmouse 298_xscale (Movieclip-Eigenschaft)

295_y (Movieclip-Eigenschaft) 295_ymouse 298_yscale (Movieclip-Eigenschaft)

295

AAbbremsen 144Absatztext 175Abdunkeln (Mischmodus) 154Abschluss 62Abspielkopf 111Abspielrichtung 111Abspielvorgang

steuern 276Abtastrate 407

Abwärtskompatibilität 206AC_RunActiveContent.js 212ActionScript

Addition 257Bild maskieren 169Division 257Ellipse zeichnen 371erstellen 245Groß- und Kleinschreibung 247Modulo-Operator 257Multiplikation 257Subtraktion 257Syntax 244zuweisen 241

ActionScript 1 239ActionScript 1/2

Formen zeichnen 372ActionScript 2 240ActionScript 3 240, 355

Bitmap-Grafi k laden 367Datentypen 377Datentyp überprüfen 361Farbverlaufsfüllungen 372Farbverlaufslinien 372Formen löschen 370Füllungen und Formen erzeugen

370Klassendiagramm 379Klassen-Hierarchie 378Klasse importieren 362Konstanten 378Kreis zeichnen 371Linien zeichnen 369neue Datentypen 378Rechteck zeichnen 370Textfelder 376Variablen 377void 374Wertebereich von Eigenschaften

370ActionScript-3.0-Einstellungen 357ActionScript-Datei 327ActionScript-Editor 241

Auto-Format 244Code ein-/ausblenden 244Experten-Modus 241Kommentare 245Skripthilfe 241Suchen und Ersetzen 243

Syntax überprüfen 244Zielpfad einfügen 244

ActionScript-Grundlagen 239ActionScript-Referenz 241ActionScript-Versionen 208, 239,

376addChild 362addChildAt 362addEventListener 374, 387Adobe Device Central CS3 576Adobe Exchange 42ADPCM 410AIR 586Aktualisierungen 42allowFullScreen 450Alpha 58Alpha (Mischmodus) 154Alphawert 152Anfangs-Sound 414An Hilfslinie ausrichten 88Animation 111

an Pfad ausrichten 140beenden 307Bewegungsrichtung 302Farbton und Transparenz 152Geschwindigkeit ändern 130in Movieclip verschachteln 128Intervall defi nieren 300kopieren und einfügen 138loopen 306, 308mehrere Eigenschaften gleich-

zeitig 152mit ActionScript 295mit onMouseMove 299schwingende Bewegung 313,

316Timing 144

An Hilfslinien ausrichten 90Ankerpunkte

an Hilfslinien ausrichten 88An Objekt ausrichten 60An Pfad ausrichten 141Ansicht

an Fenster anpassen 45Vergrößerung 45zentrieren 45

Anti-Aliasing 187Anwendungsbereich 30

aktuelle Meldungen 30

Index

692 | Index

Animationen 30Benutzeroberfl ächen 30E-Learning 32Präsentationen 31Rich Internet Applications 32Spiele 31Video-Anwendungen 32

Anzeigeliste 361Anzeigeobjekt-Container 358,

359, 366Anzeigeobjekte 358

entfernen 362hinzufügen 361in der Anzeigeliste 361Reihenfolge ändern 363

Apache 492Apollo 586appendChild 567Arbeitsbereich

auf einen anderen Computer übertragen 50

speichern 50Arbeitsumgebung 37

laden 50Linealeinheit 46speichern 50

Argumente 269Arithmetische Operatoren

Kurzschreibweise 258Arrays 252

absteigend sortieren 255alphabetisch sortieren 256assoziativ 253concat 254indiziert 252join 254mehrdimensional 253mehrdimensionales Array sortie-

ren 256numerisch sortieren 255pop 254push 254reverse 254shift 254slice 254sort 254sortieren 255Sortierungsoptionen 256sortOn 254splice 255toString 255unshift 255

attachMovie 284

attachSound 421Audio 441Audio-Editoren 413Audio-Ereignis 409Audio-Stream 409Auf Bühne platzieren 438Auf Ebenen verteilen 195Aufhellen (Mischmodus) 154Ausfaden 305Ausgabe-Fenster 245Ausrichten

an Pixeln 62Registrierungspunkt 129

Ausrichten-Fenster 129Auswählen

ähnliche Farben 74Auswahlwerkzeug 71Auszeichnungen 181

Fettdruck 181Kapitälchen 182Kursiv 181

auto_increment 519Automatisch unterschneiden 184AVM2 355

BBandbreiten-Profi ler 227

Bild-für-Bild 228Download-Einstellungen 228Optimierung des Laderverhal-

tens 228Streaming-Grafi k 227

Barrierefreiheit 234Basisklasse 340, 364Batch-Verfahren 436Bedingung 259, 260beginFill 370beginGradientFill 372Begrenzungsrahmen 98, 542Begrüßungsbildschirm 37Benutzerdefi nierte Beschleunigung

und Abbremsen 146einfügen 138Endzustand 136erstellen 135kopieren 138Optionen 134Skalieren 134

Benutzerdefi niertes Anti-Aliasing 194

Beschleunigung 144, 146abbremsen 303nicht-lineare 303

über ActionScript 301, 302Bewegung

abbremsen 303kopieren 138mit Easing 304nicht-linear 303

Bewegungspfad 140Bewegungsrichtung umkehren 149Bewegungs-Tweening 134

An Pfad ausrichten 140Ausgangspunkt 136Benutzerdefi nierte Beschleuni-

gung 147Bibliothek 103

bereinigen 105Elemente löschen 103externe 108neues Video erstellen 447Ordner 106Ordnung und Struktur 105speichern und komprimieren

106Bildbezeichner 120, 121

ansteuern 122Bild-für-Bild-Animation 122Bildlauf 486Bildrate 123, 441

ändern 125empfehlenswerte 122

Bildschirm (Mischmodus) 154Bildschirmleseprogramme 234Bildschirmschoner 577Bitmap 395

Darstellungsfehler 396Eigenschaften 196Füllung 80Import-Formate 395importieren 395in Vektoren umwandeln 154Komprimierung 397nachzeichnen 154Standardqualität 397Verknüpfungseigenschaften 365

Bitmap (ActionScript 3) 359, 365Bitmap-Filter 159

animieren 160Bitmap-Grafi k 29Bitmap in Vektoren umwandeln

74Bitmaps

nachzeichnen 404Bitmap-Text 194Bitrate 411

Index | 693

Bitweise OperatorenNACH LINKS 263NACH RECHTS 263NICHT 263ODER 263UND 262XOR 263

Bleistift-Werkzeug 62Blocksatz 183BMP-Format 395Boolean 248Bouncing 551Boundingbox 98BpS 122break 261Browser-Caching verhindern 504Bühne 44

Größe einstellen 46Button 645bytesLoaded 454bytesTotal 454

CCall Stack 289case 261CheckBox 646childNodes 564chmod 507class 340clear 559ClipEvents 272ColorPicker 647ComboBox 649const 378createClassObject 384createElement 567createEmptyMovieClip 284createTextField 480CSS 228Cue-Point 442, 454

Ereignis 455Navigation 458hinzufügen 455

DDarstellungsfehler 396data 559DataGrid 651date 497Dateigröße

analysieren 208Dateirechte 506Daten

an PHP senden 505lokal speichern 558von PHP empfangen 505

DatenbankDatensätze einfügen 520erstellen 517Felder bearbeiten 520Zugriff herstellen 522

Datenbankabfrage 524Datenbank-Tabelle

Attribute 518Extra 519Feld 518Länge/Set 518Null 519Primärschlüssel 519Typ 518

Datentypen 247Array 248Boolean 248Fehler 250MovieClip 248Number 248Object 248String 248TextField 248umwandeln 250

Debuggenentfernten Flashfi lm 290

DebuggerCodezeilen durchlaufen 289Eigenschaften 286Haltepunkte einfügen/entfernen

288Remote 290Variablen überwachen 288verwenden 286

DebuggingFehlerursachen 292

Decompiler 208Deinterlace 441Delegate-Klasse 347Desktop-Anwendungen 586Device Central CS3 577devicefont -> siehe Geräteschrift-

artenDifferenz (Mischmodus) 154DisplayObject 358DisplayObjectContainer 359DisplayObject-Klasse

Eigenschaften 360docTypeDecl 566Dokumenteigenschaften 45

ändern 125Bildrate 123

DokumentfensterAnsicht vergrößern/verkleinern

45Ansicht verschieben 45

Dokumentklasse 356defi nieren 356eigene anlegen 356

do-while-Schleife 266Download-Einstellungen 228Download simulieren 228dragOut 272dragOver 272drawCircle 371drawEllipse 371drawRect 370drawRoundRect 370duplicateMovieClip 285dynamic 330Dynamische Klassen 330Dynamischer Text 463Dynamische Textfelder 179, 463

Eigenschaften 464eingebette Schriftart 485entfernen 480Text als HTML wiedergeben 465Variable 465Zeilentyp 464

Dynamische Typisierung 249

EEasing 303Ebene 112

einfügen 112ein- und ausblenden 115entsperren 115in Führungsebene umwandeln

142in Masken-Ebene umwandeln

166Konturansicht 116löschen 113Mischmodus 154Namen zuweisen 112Ordner einfügen 114Reihenfolge 113sperren 115steuern 115verschieben 114

Ebenenmodell 112Ebenenreihenfolge

ändern 114

694 | Index

echo 496Echte Kursive 181Eckrundungen 66ECMA 239Effekte 171Eigenschaften

Zugriffsbeschränkung 333Einbettung

in HTML 211mit dem SWFObject 218mittig positionieren 229

EingabefeldHervorhebung des Fokus 473

Eingabehilfe 234Symbole 234

Eingabetextfelder 463abfragen 469Eigenschaften 464Fokus steuern 472Maximale Zeichenanzahl 464mit Tabulator steuern 472Text als HTML wiedergeben 465Variable 465Zeilentyp 464

Eingebettete Schriften 193Eingebette Videos 445Einstellungen

für Adobe Flash Player 558für VeröffentlichungenKlassenpfad 350

Elementegemeinsam nutzen 108in anderen Flash-Filmen nutzen

108Ellipse 201Ellipsengrundform 68Ellipsen-Werkzeug 67E-Mail-Link 186E-Mail-Verknüpfung 185EMBED-Tag 218Encoding 439endFill 370Endlosschleife 265, 415Entwicklungsumgebung 27, 38

anpassen 47Eolas-Patentverletzung 218Ereignis-Cue-Points 456Ereignisprozeduren 296Ereignis-Sound 414

Komprimierung 210Escape-Sequenz 469Explodieren 172Export 232

Bild exportieren 232Film exportieren 232für ActionScript 284für gemeinsame Nutzung zur

Laufzeit 108Exportformate 233extends 340Extensible Markup Language

(XML) 561Externe Bibliothek 108

öffnen 108Externes Video

integrieren 449steuern 449streamen 447über ActionScript abspielen 449

FFadeOut 305false (Datentyp) 256Fallentscheidung 258Farbe anpassen (Bitmap-Filter) 159Farbeimer 76

Füllung sperren 77Lückengröße 77

Farbschwellenwert 405Farbton animieren 151Farbverlauf 78

Farbe einfügen 79Farbe entfernen 79linear 79mit transparenter Farbe 169radial 79über mehrere Formen 77

Farbverlauf-Geschliffen (Bitmap-Filter) 159

Farbverlauf-Glühen (Bitmap-Fil-ter) 159

Fehlende Schriften ersetzen 199Fehlersuche 286Fehlerursachen 292Fenster

auf Symbole reduzieren 48maximieren 47minimieren 47schließen 47verankern 48Werkzeuge 42

Film exportierenDateiformate 233

Film komprimieren 210Film testen

Tastaturbefehle deaktivieren 538

Film vorausladen 281Filter 159

animieren 160hinzufügen 159Qualität 160

fi rstChild 563FLA-Datei 27Flash-Datei (Mobile) 577Flashdetection 219Flash Export 206

ActionScript-Version 208Audio-Ereignis 210Audio-Stream 210Ausgeblendete Ebenen expor-

tieren 210Debugging erlauben 209Film komprimieren 210Für FlashPlayer ab Version 6r65

optimieren 210Geräte-Sound exportieren 211Größenbericht 208JPEG-Qualität 210Ladereihenfolge 207Sicherheit bei lokaler Wieder-

gabe 211Skript-Höchstzeit 210Soundeinstellungen übergehen

211SWC exportieren 210Trace-Aktionen übergehen 209Version 206Vor Import schützen 209

Flash-FilmAufbau 120Bildrate 46Größe 46Hintergrundfarbe 46in Bereiche unterteilen 121laden 279mittig im Browser 229mittig im Browser am oberen

und unteren Rand 231Struktur 114strukturieren 160testen 41transparent 224

Flash Lite 575Entwicklung 577

Flash Media-Server 437Flash Player 28

Kontextmenü 222Lokaler Speicher 558Version 206

Index | 695

Flash Player 6r65 210Flash Player 9 355Flash-Track 217FlashVars 224

einsetzen 224Flash-Version

aktivieren 42deaktivieren 42feststellen 212registrieren 42

Flash-Versionen 27Flash Video 435Flex 355, 579

Anwendung kompilieren und testen 583

eine erste Anwendung 580FlexBuilder 579Flex Charting-Komponenten 580Flex-Framework 579fl ush 559FLV 435FLV-Playback-Komponente 448for-Schleife 267for-in-Schleife 267Formatierungen 482Formen

Arten 58Formmarke 157

anzeigen 158hinzufügen 157

Form-Tweening 154Fortschrittsbalken 282Freihand-Werkzeug 62

begradigen 63glätten 63

Führungsebene 140Füllfarbe 58Füllung

Strichlinie hinzufügen 76Funktionen 268

Argumente 269mehrere Argumente 269Parameter 269Rückgabewert 269

Future Wave 27

GGästebuch

Daten an PHP übergeben und Datensätze erstellen 532

Datensätze auslesen und in Flash darstellen 527

Gedankenstrich 201

Geltungsbereich (Variablen) 251Gemeinsam genutzte Bibliothek

107Geräte-Emulator 576Geräteschriftarten 188

Mac 189Maskierung 190Vorteil 190

Geräte-Sound 410Geschliffen (Bitmap-Filter) 159Geschwindigkeit

ändern 130über ActionScript 301

get 339getChildAt 361getChildByName 361getChildIndex 362getCode 538, 677getLocal 558GET-Methode 505

Datentypen 505getNextHighestDepth 285Getter-/Setter-Methoden 337, 339getTimer 557getVolume 429GIF-Export 214GIF-Format 395Globale Variable 251Glühen (Bitmap-Filter) 159gotoAndPlay 276gotoAndStop 276GradientType 372Grafi kformate 395Grafi ksymbole 91Graphics-Klasse 369Größenbericht 208Gruppierung

aufheben 84

HHaarlinie 62Haltepunkte 288Hartes Licht (Mischmodus) 154Helligkeit animieren 151Highscore 558

aktualisieren 569mit XML und PHP 561XML-Struktur erzeugen 569

Hilfslinieanzeigen 87bearbeiten 87entfernen 87sperren 88

Hilfswerkzeuge 819-teiliges-Segmentraster 82Handwerkzeug 85Hilfslinien 87Raster 88Zoomwerkzeug 85

Hintergrundfarbe 46Hinzufügen (Mischmodus) 154hitTest 542HTML

Variablen übergeben 224HTML-Export 211HTML-Textfelder 467Hüllkurve bearbeiten 417

IIf-Anweisung 258if-else-Anweisung 260ignoreWhite 566Illustrator-Import

Bildebenen 403Inkompatiblitätsbericht 401Pfade 404

import-Anweisung 362In Bühne importieren 395include 523In Raster kopieren 170INSERT 531Inspiration 32Instanz 94Instanz-Eigenschaften

ändern 335animieren 150, 296, 305drehen 151erweiterte Farbeinstellungen

152Farbton animieren 151Helligkeit 151Rotation animieren 151Skalierung animieren 150Transparenz animieren 152

Instanziierung 326Instanzmitglied 335Instanzname 270In Symbol konvertieren 93

erweitert 82int 378InteractiveObject 359, 373InteractiveObject-Klasse

Ereignisse 374, 376Interaktion 537

Drag & Drop 541Tastatursteuerung 537

696 | Index

Internet Explorer 7 218Intervall 300

defi nieren 300löschen 301

JJava 579JavaScript 601JavaScript-Flash 41JPEG-Export 215JPEG-Format 395JSFL-Format 41

KKantenglättung 187Kantenschwelle 405Kapitälchen 182Kennwort 464Kerning 184Key 537Key-Klasse 538Klasse 326

erstellen 329erweitern 341Instanzen 326Ordnerstruktur 351Pakete 349verwalten 348

Klassenbezeichner 327Klassendefi nition 328Klasseneigenschaften

überschreiben 343Klassen-Methoden

überschreiben 343Klassenmitglied 335Klassen-Pakete

in ActionScript 3 364Klassenpfad

Film-basiert 350global defi nieren 351

Klassen und Objekte erstellen 327Kleinste Fläche 405Knoten 561Kodierung 439Kodierungsprofi le 440Kollisionserkennung 542

abprallen 551Begrenzungsrahmen 542Bouncing 551mit Bühnenrändern 550positionsbasiert 548Ränder der Bühne 548Rechteck und Kreis 553

von bestimmten Punkten 545von zwei Kreisen 546

Kommentare im Code 245Komponente 381

ActionScript 2 384ActionScript 3 384anpassen 387Anwendung 382Eigenschaften 386Eigenschaften zuweisen 383Einführung 381Ereignisse 386Größe 384in der Entwicklungsumgebung

383Instanzen anpassen 388Methoden 386mit ActionScript einfügen 383Skin 34, 389Skin einer Komponenten-

Instanz anpassen 390Skin eines Komponenten-Typs

anpassen 390Stile verwenden 388Textscroller 486Typ anpassen 389über ActionScript ansteuern 385UIScrollbar 486Unterschiede ActionScript 2/3

381von Drittanbietern 382

Komponenten-Inspektor 383Komponenten-Kurzreferenz

Button 645CheckBox 646ColorPicker 647ComboBox 649DataGrid 651Label 656List 657NummericStepper 660ProgressBar 661RadioButton 663ScrollPane 664Slider 665TextArea 666TextInput 668TileList 670UILoader 673UIScrollBar 675

KomprimierungStandardqualität 397

Konstruktor-Methode 328

Rückgabewert 328Kontakformular 508

Daten an PHP-Skript senden 510Eingabe überprüfen 508erstellen 508zurücksetzen 508

Kontextmenü 42Koordinatensystem 309Kosinus 313Kreisbewegung 317Kreis- und ellipsenförmige Bewe-

gung 318Kurvenanpassung 405Kurvensegment 70

LLabel 656Ladefortschritt ermitteln 281Ladereihenfolge 207Ladestatus ermitteln 278Ladeverhalten von Flashfi lmen 226Lasso 73

Auswahl abschließen 74Lautstärke 429Layout

Spaltenbreite anpassen 49Zeilenhöhe anpassen 49

Leere Schlüsselbilder 118Leserichtung 182, 185Level 283Lineal 86

anzeigen 87Linearer Farbverlauf 79lineGradientStyle 372lineStyle 369Linie

gerade Linie erzeugen 70Kurve erzeuigen 70

Linien verbinden 62Liniensegment 70Linien-Werkzeug 59List 657ListBox-Komponente 386Listener 277LiveConnect 221, 224load 367Loader 359LoaderInfo 367LoaderInfo-Objekt

Ereignisse 368, 369Loader-Klasse 367

Ladevorgang kontrollieren 367loadMovie 283

Index | 697

loadMovieNum 283loadSound 421Loadvariables 477Loadvariablesnum 477loadVars 477, 498LoadVars-Objekt 498LocalSharedObject 558Lokale Daten lesen 559Lokale Variable 251Löschen (Mischmodus) 154

MMacromedia 27Mailto 185Maske 164

animieren 166Füllfarbe 165über ActionScript 169Verlaufsmaske 167

Masken-Ebene erstellen 165Maskierung 165Math-Klasse

erweitern 341Methoden 323

Mausrichtung 320Maussteuerung 540Mauszeiger

ausblenden 299einblenden 299

Mediävalziffern 202Medien

dynamisch laden 276Flash-Player-Version 283

Mehrere Bedingungen überprü-fen 260

MenüAnsicht 40Bearbeiten 39Befehle 41Datei 39Debuggen 41Einfügen 40Fenster 41Hilfe 42Modifi zieren 40Steuerung 41Text 41

Menüleiste 39Methoden 332

öffentliche und private 334Rückgabewert 333Zugriffsbeschränkung 333

MIME-Format 500

Minuskelziffern 202Mischmodi 153Mobile Endgeräte

Sound 411Video 437

Modulo-Operator 257MorphShape 359mouseDown 272Mouse-Klasse 540mouseMove 272mouseUp 272Movieclip

an Mauszeiger ausrichten 299ausblenden 305Container 276duplizieren 285dynamisch auf der Bühne plat-

zieren 284dynamisch entfernen 286dynamisch erzeugen 284Ereignisprozeduren 272in Mausrichtung bewegen 321in Mausrichtung drehen 320Instanzeigenschaften 295

MovieClip (ActionScript 3) 358, 363

MovieClip-Eigenschaften 295_alpha 295_height 295_rotation 295_width 295_x 295_xscale 295_y 295_yscale 295

Movieclip-Ereignisprozeduren 296MovieClipLoader 276

Inhalt entladen 278Ladestatus 277Prozent ermitteln 278

MP3 410importieren 411Stärke der Komprimierung 411

Multiplizieren (Mischmodus) 154MXML 580MySQL 515

Datensätze einfügen 520Datensätze sortieren 524Datentypen 519Felder bearbeiten, löschen und

hinzufügen 520GUI-Tools 515Kollation 517

Tabellen exportieren 521Tabellen importieren 521

NNavigation-Cue-Points 458Navigation erstellen 273NetConnection 449NetStream 449NetStream-Klasse

Eigenschaften 453Neue Schriftart 484Neues in Flash CS3

ActionScript 3 34Adobe Device Central CS3 36Animationen kopieren/einfügen

35Animation in ActionScript 3

konvertieren 35Benutzeroberfl äche 33Detailverbesserungen 36Erweiterter ActionScript-Editor

34Komponenten 34Vektorbasierte Grundformen 33Verbesserter Import 35

nextFrame 276nodeValue 563Normal (Mischmodus) 154Number 248NummericStepper 660

Oobject-Tag 218Objekt

Eigenschaften 330Eigenschaften defi nieren 331Eigenschaften zur Laufzeit

zuweisen 331erstellen (OOP) 329initialisieren 328Methoden 332

Objekte 325anordnen 84, 113gruppieren 84positionieren 129

Objektorientierte Programmierung -> siehe OOP 325

Objektzeichnung 58on (Schaltfl ächenereignis) 102On2 VP-6 Codec 439onClipEvent 272onDragOut 272onDragOver 272

698 | Index

onEnterFrame 296Animation 297

onKillFocus 473onLoadComplete 278onLoadError 278onLoadInit 278onLoadProgress 278onMouseDown 272onMouseMove 272, 298onPress 273onRelease 273onReleaseOutside 273onRollOut 273onRollOver 273onSetFocus 473OOP 325

Einführung 325Ereignisprozeduren 346in ActionScript 3 326Pakete 349Zugriff auf Symbole in der

Bibliothek 345Zugriff auf Symbole und

Instanzen 343Operatoren

arithmetische 257bitweise 262einfache 257logische 261

PPackages 348Perfekte Bild-für-Bild-Animation

123Pfad

Ankerpunkte entfernen 70Ankerpunkte hinzufügen 70schließen 70

Photoshop-Import 398Bildebenen 399Gruppen 400Masken 399Textebenen 400

PHP 491, 561Daten an Flash übergeben 525Datenbanksätze einfügen 531Datenformat 500Daten in Flash empfangen 498Datensätze aktualisieren 534Datensätze auswählen 524Daten von Flash an PHP senden

und empfangen 505Datum- und Zeitfunktion 497

Datum und Zeit in Flash ausge-ben 502

Fehlermeldungen 514foreach-Schleife 496for-Schleife 496Funktionen 497if-Anweisung 495Kommentare 495mehrere Werte übergeben 500Operatoren 495Schreibweisen 492Sonderzeichen 501Sprachelemente und Syntax

494Stringwerte verketten 495switch 496Tabelle auswählen 523testen 514Text kodieren 501Text richtig darstellen 501Umlaute 501Variablen 494Voraussetzungen 492while-Schleife 496

phpinfo 492phpMyAdmin 516

Datenbank erstellen 517Datenbank-Tabelle erstellen 518Tabellenspalten defi nieren 518

PHP-Skriptaufrufen 499Ausgabe formatieren 499

PHP und MySQL 491, 522Datenbank-Login 522

Pi 310Pinselmodus 64Pinsel-Werkzeug 63

Glätten 63Pixelfont 197

Positionierung 198Regeln 197Schriftgröße 197Textausrichtung 198Textauszeichnung 198

Pixelgrafi k 29, 395Plug-in 28PNG-Export 216PNG-Format 395Polygon 69Polystern-Werkzeug 69Positionierung 129

via CSS 228POST-Methode 506

Preloader 226erstellen 281

press 273prevFrame 276Primärschlüssel 519private 333ProgressBar 661Projektor 27public 333Punktsyntax 270Punkttext 175

QQueryString 505Quality 221QuickTime-Export

mit Flash-Track 217

RRadialer Farbverlauf 79Radiant 310Radiergummi 65

Form 65Größe 65

RadioButton 663Raster 88

bearbeiten 88einblenden 70

Rastergrafi k 29, 395RAW 411Rechteck

ohne Außenlinie 66Rechteckgrundform 67Rechteck-Werkzeug 66Rechtschreibprüfung 202Rechtwinkliges Dreieck 311Referenzierung 271register_globals 505Registrierunspunkt 98Reguläre Ausdrücke 207release 273releaseOutside 273Remote-Debug 290Remote-Debugging 209removeChild 362removeMovieClip 286RGB 152RIA 579Rich-Internet-Application 32, 579rollOut 273rollOver 273Rotation animieren 151Rückgabewert 269

Index | 699

SSamplingrate 407Samplingtiefe 408sans 189Schaltfl äche 99

Aktiv 99Auf 99Darüber 99erstellen 99Gedrückt 99mit Ereignis-Sound 415

Schlagschatten 160Schleifen 264

do-while 266for 267for-in 267while 265

Schlüsselbild 116Bildbezeichner zuweisen 121einfügen 117kopieren 119löschen 118verschieben 119, 138

Schlüsselbildplatzierung 441Schreibregeln 200Schrift

Darstellung 187in Klammern angezeigt 180

Schriftarten-Symbol 484Schriftfarbe 180Schriftgröße 180Schriftwarnung 199Schriftzeichen

in Vektoren umwandeln 194Schriftzuordnung 199Schwingende Bewegung 312

auf der x-Achse 313auf der y-Achse 316

Schwingung 312, 313, 316Screenreader 234ScrollPane 664SELECT 524sendAndLoad 507Serifen 189Serverseitige Skriptsprachen 491set 337setBufferTime 449setChildIndex 363setComponentStyle 389setInterval 300, 557setStyle 389Setter-Methode 337setVolume 429, 430

Shape 359, 369Shared Library 107Silbentrennung 183SimpleButton 359Sinus 315Skalierbarkeit 29Skalieren

proportional 162Skalierung animieren 134, 150Skin 389Skins für Video-Komponente 443Skript erstellen 245Skripthilfe 241Skript-Höchstzeit 210Slider 665Small Web Format 28sol-Dateien 560Sorenson Spark 439Sound 407, 421

abspielen 423Abspielposition 427Anfang 414attachSound 433aus der Bibliothek laden 421Eigenschaften 410, 414ein/-ausblenden 418Ereignis 414externen laden 422getBytesLoaded 433getBytesTotal 433getPan 433getVolume 434id3 434Import-Formate 409importieren 409in der Zeitleiste 414Komprimierung testen 412Ladefortschritt 423Lautstärke 429loadSound 434mehrere gleichzeitig abspielen

414mit ActionScript 421pausieren 427setPan 434setVolume 434Slider 430start 434steuern 425Stopp 415Stream 414Tipps für den Import 413Veröffentlichung 409

Veröffentlichungseinstellungen 409

Wiederholungen 415wird nicht abgespielt 423zuweisen 414

Sounddatei ersetzen 412Soundeffekte 417

benutzerdefi niert 417Sound-Klasse

Methoden 434Soundloops als MP3 424Sound-Objekt 421Sound.onLoad 423Sound.stop 434Soundtypen 414Speichern und komprimieren 106Spezielle Bewegung einfügen 139Spiele

Spielername lokal speichern und lesen 559

Zeitanzeige 557Spieleprogrammierung 537Spiralenförmige Bewegung 319Sprite 359SQL-Anfrage 524SQL-Injektion 531Stage 359Stage-Objekt

Geltungsbereich 366Standardlayout

wiederherstellen 49Stapelreihenfolge 84startDrag 541static 335Statische Textfelder 179Sternform erstellen 69Stift-Werkzeug 70

Ankerpunkte entfernen 70Ankerpunkte hinzufügen 70Ankerpunkte umwandeln 71Pfad schließen 70

stop 276stopallsounds 421stopDrag 541Streaming-Sound 414

ein- und ausblenden 418Komprimierung 210

Strichfarbe 58, 60Strichhöhe 60Strichlinie

Abschluss 61begradigen 71glätten 71

700 | Index

Verbindung 62Strichstil 61

benutzerdefi niert 61Strikte Typisierung 248String 248Strong Typing 248Subtrahieren (Mischmodus) 154Strukturierung eines Flashfi lms 366Suchmaschinen 219super 341Superklasse 340

Methoden und Eigenschaften ansteuern 341

swapChildren 363SWC-Dateien 210SWD-Dateien 209SWF-Datei 28SWF-Object 218

align 222Flashdetection 219FlashVars 224menu 222quality 222scale 222weitere Einstellungen 221wmode 223

Swift 3D 583switch 260Symbol 91

An Position bearbeiten 95bearbeiten 95Begrenzungsrahmen 98duplizieren 96erstellen 92Grafi ksymbole 91Instanzeigenschaften 94Instanzen 93Instanzen und die Bibliothek 91In Symbol konvertieren 93Movieclip-Symbole 91Positionierung 98Registrierung 98Schaltfl ächensymbole 92Schriftartensymbole 92

Symbolinstanz 93, 94Symboltyp 438Szene 120

ansteuern 122verwalten 120

TtabIndex 472Tabulator-Reihenfolge 472

Tastaturkurzbefehle 51defi nieren 53drucken 53Menü 51Standard wiederherstellen 54

Tastatursteuerung 537Teilen 195Text 175

abfragen 467als Grafi k einfügen 196Anti-Aliasing 187Ausrichtung 182auswählbar 187Auszeichnungen 181Blocksatz 183Eigenschaften 178Eingabe beenden 176E-Mail-Verknüpfung 185Farbe 180fehlende Schriften ersetzen 199feste Breite 175formatieren 179Größe 180hoch-/tiefstellen 184Kontrast 180linksbündig 182mehrzeilig 175Methoden zur Schriftwieder-

gabe 188mit Anti-Aliasing 193mit LoadVars laden 477mittig 183ohne Anti-Aliasing 195rechtsbündig 182Schriftart 180transformieren 177Zeichenabstand 184Zeilenabstand 183Zeilenlänge 184zuweisen 467

TextArea 666Textbreite 176Textdokument

Aufbau 477ausgeben 475laden 475laden und ausgeben 478

Texteingabeabfragen und ausgeben 469

Texteingabefelder 179Textfeld

dynamisch erzeugen 479Eigenschaften steuern 480

Formatierungen 482Hintergrundfarbe 465HTML-Formatierung 467, 468Rahmen 465

Textfeld-Eigenschaften 178backgroundColor 481

Textfeld-Typen 178TextField (ActionScript 3) 359TextFormat 482

align 483bold 483bullet 483color 483font 483italic 483leading 483setNewTextFormat 482setTextFormat 483size 483underline 483url 483

TextFormat-Objekt 482TextInput 668Textknoten 561Textrichtung 185Text-Scroller 486

Bildlauf aktivieren 486Textbereich defi nieren 486UIScrollbar-Komponente ein-

fügen 487Ziel der Scroller-Komponente

festlegen 488Text transformieren

Neigung 178Rotation 177Skalierung 177

Texttyp auswählen 463Text-Werkzeug 175Third-Party-Komponenten 382this 271TIFF-Format 395TileList 670time 454Timing von Animationen 144Tintenfass 76trace 246Transformieren/Übergang 173Transparenz 58

animieren 152Trigonometrie 309

Grad-/Bogenmaß 310Winkelangabe 309

true (Datentyp) 248

Index | 701

Tweeningausrichten 141Bewegungsrichtung 149Fehler 135verlangsamen 138

Typenkonfl ikt 250typewriter 189

UÜbergang 173Überlagern (Mischmodus) 154UI-Komponenten-Kurzreferenz

643UILoader 673uint 378UIScrollBar 472, 486, 675Umkehren (Mischmodus) 154undefi ned 247Unicode 475Unterauswahl-Werkzeug 72Unterklasse 340

erzeugen 341Unterschiede

ActionScript 1/2 und 3 376Unterschneidung 184UPDATE 534updateAfterEvent 300urlencode 500URL-Kodierung 476URLRequest 367utf8_decode 500utf8_encode 500

Vvar

ActionScript 3 377Variablen 246

aus PHP auslesen 499dynamische 248Geltungsbereich 251ohne Geltungsbereich 251

Variablenwerte 246VBR 411Vektoren und Pixel 29Vektorgrafi ken 29

über ActionScript erzeugen 369Vererbung 339Vergleichsoperatoren 258

Übersicht 259Vergrößern 85Verkleinern 86Verknüpftes QuickTime-Video 437Verknüpfungsbezeichner 103, 284

zuweisen 284Verlaufsmaske 167Veröffentlichen 205

ActionScript-Version 207, 208Flash 206GIF 214HTML 211HTML-Ausrichtung 222JPEG 215PNG 216QuickTime 217Skalierung 222Version 206

Veröffentlichungseinstellungen 205

Verschachtelte Animation 161Verschachtelung 128, 160Verteiltes Duplikat 171Video 435

Abspielzeit anzeigen 454Als Video für Mobilgeräte in

SWF zusammengefasst 437Audiospur kodieren 441Audiospur steuern 452Bildrate 441Encoding 439importieren 435in Movieclip verschachteln 445in SWF einbetten 438in verschiedenen Qualitätsein-

stellungen kodieren 444kodieren 440Ladefortschritt ermitteln 453Skin auswählen 443teilen 439über die Zeitleiste steuern 445Video in SWF einbetten und in

Zeitleiste abspielen 438Vom Flash Video Streaming

Service streamen 437Von einem Webserver progres-

siv herunterladen 437zuerst bearbeiten 439zuschneiden und Größe ändern

442Video (ActionScript 3) 359Video-Anwendungen 445Video-Codec 441Video-Einstellungen 440Video-Encoder 435, 443Video-Formate 435Videogröße festlegen 447Video-Import 435

Bereitstellung 437Video auswählen 436

Video-Import-Assistent 436Void 269, 328

ActionScript 3 374Vollbild-Modus 450Voreinstellungen

ActionScript 244Klassenpfad festlegen 351

Vorlagen 38

WW3C -> s. World Wide Web

Consortium 214W3C-Validator 213Wasserhahn 66Webseiten-Navigation erstellen

273Weichzeichnen 172Werkzeugleiste 42

Darstellung 42while 265Winkel

zwischen zwei Punkten berech-nen 320

wmode 223World Wide Web Consortium 214Wurzelknoten 561

XXAMPP 493XML 561

Attribut 562Aufbau 561laden 562Struktur in Flash erzeugen 566Textknoten 563Textknoten erzeugen 567Zeichenkodierung 562Zugriff 563

XML-DokumentDaten ausgeben 564laden 564serverseitig erzeugen 571

XML-Klasse 562XML-Struktur

an PHP-Skript übergeben 571

ZZauberstab 74

Einstellungen 75Zeichenabstand 183Zeicheneinbettung 465

702 | Index

Zeichenkodierung 475Zeichenmodi 57

Objektzeichnung 58Zeichenverbindung 57

Zeichentablett 63Zeichenverbindung 57Zeichen-Werkzeug

Auswahlwerkzeug 71Eigenschaften ändern 60Ellipsen-Werkzeug 67Farbeimer-Werkzeug 76Farbverlauf-Werkzeug 80Freihand-Werkzeug 62Lasso-Werkzeug 73Linien-Werkzeug 59Pinsel-Werkzeug 63Pipette 78Polystern-Werkzeug 69Radiergummi 65Rechteck-Werkzeug 66Stift-Werkzeug 70Stricheigenschaften 60Tintenfass-Werkzeug 76Unterauswahl-Werkzeug 72Werkzeug für Ellipsengrundform

68Werkzeug für Rechteckgrund-

form 67Zeichnen 57

Zeichnungs-API 369Zeilenabstand 183Zeilenfall 182Zeilenlänge 183

Richtwert 184Zeitfunktionen 557Zeitleiste 44, 111

bei Bedarf erweitern 438Bild einfügen 117Bilder kopieren 126Bilder umkehren 126Darstellungsoptionen 119Schlüsselbilder 116Vorschau im Kontext 119

Zeitleisten-Effekte 170Assistenten 170

Zeitlimit 557Zinc 586

Flashfi lm als Desktop-Anwen-dung 588

Flashfi lm erstellen 587Zufallsmethode defi nieren 342Zufallszahl 323, 342Zugänglichkeit 234Zwiebelschalen-Effekt 131

aktivieren 132Konturansicht 132Mehrere Bilder bearbeiten 133

Zwischenablage 126

Adobe Flash CS3 - christiani.de · 116 | 5 Animation Ein Schlosssymbol 6 wird angezeigt, wenn die...

Documents

Transcript of Adobe Flash CS3 - christiani.de · 116 | 5 Animation Ein Schlosssymbol 6 wird angezeigt, wenn die...