Videolektionen VIDEO-LEKTIONEN. 16 Video-Lektionen

VIDEO-LEKTIONEN Videolektionen Die Video-Lektionen auf der Buch-DVD entstammen unserem Video-Training»Adobe Flash CS3 Animation, Interaktion, Webdesign«von Sonja Vieten (ISBN 978-3-8362-1079-9). Sie finden 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 Interaktion 2.1 Einzelbild-Animation (13:44 min) 2.2 Drag & Drop-Animation (04:21 min) Kapitel 3: Eine Website mit Flash erstellen 3.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 anwenden 4.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) 16 Video-Lektionen

Workshops Arbeitsumgebung Eigene Tastenkürzel definieren... 53 Zeichnen WORKSHOPS Farben einer umgewandelten Bitmap-Grafik austauschen... 74 Symbole, Instanzen und die Bibliothek Instanzeigenschaften ändern... 94 Eine Schaltfläche erstellen... 99 Animation Die Animation anlegen... 123 Dokumenteigenschaften ändern... 125 Animation in Movieclip verschachteln... 128 Geschwindigkeit ändern... 130 Ein Bewegungstweening erstellen... 135 Tweening verlängern... 137 Bewegungstweening an Pfad ausrichten... 141 Bewegungstweening mit Beschleunigung und Abbremsen... 144 Bewegungstweening mit benutzerdefinierter Beschleunigung (1)... 147 Bewegungstweening mit benutzerdefinierter Beschleunigung (2)... 149 Bitmap in Vektoren umwandeln... 155 Formmarken für ein Formtweening einsetzen... 157 Verschachtelte Animation... 161 Masken-Animation... 166 Verlaufsmaske erstellen... 168 Text Maskierung von Geräteschriften... 190 Veröffentlichung FlashVars einsetzen... 224 Flash-Film mittig im Browser zentrieren... 229 Workshops 17

Action Script-Grundlagen Eine Webseiten-Navigation... 273 Flash-Filme laden... 279 Den Ladefortschritt ermitteln und einen Preloader erstellen... 281 Einen entfernten (remote) Flash-Film debuggen... 290 Animation mit Action Script 1 und 2 Animation mit onenterframe... 297 Animation mit onmousemove... 299 Bewegung mit Easing... 304 FadeOut mit Easing... 305 Animation beenden... 307 Fading-Animation loopen... 308 Schwingende Bewegung auf der x-achse... 313 Schwingende Bewegung auf der y-achse... 316 Kreis- und ellipsenförmige Bewegung... 318 Spiralenförmige Bewegung... 319 Movieclip in Mausrichtung drehen... 320 Movieclip in Mausrichtung bewegen... 321 Einführung in die objektorientierte Programmierung Klasse und Objekt erstellen... 329 Objekt-Eigenschaften abfragen und zuweisen... 331 Die Math-Klasse erweitern... 341 Klassenpaket und -pfad anlegen... 351 Sound Eine Schaltfläche mit Ereignissound versehen... 415 Einen Streaming-Sound ein- und ausblenden... 418 Mehrere Sounds zuweisen, abspielen und stoppen... 425 Sound pausieren und abspielen... 427 Soundlautstärke über einen Slider steuern... 430 Video Ein eingebettetes Video über die Zeitleis te steuern... 445 Ein Video über Action Script abspielen und steuern... 449 Ereignis-Cue-Points einsetzen... 456 Navigation-Cue-Points einsetzen... 459 Dynamischer Text Texteingabe abfragen und ausgeben... 469 18 Workshops

onsetfocus und onkillfocus für die Hervorhebung von Eingabefeldern einsetzen... 473 Textdokument laden und ausgeben... 478 Flash, PHP und MySQL Serverseitiges Datum und Zeit in Flash ausgeben... 502 Kontaktformular Eingabe überprüfen und zurücksetzen... 508 Kontaktformular Kontaktdaten an PHP-Skript senden... 510 Kontaktformular: PHP-Skript für den Mailversand erstellen... 512 Gästebuch Datensätze auslesen und in Flash darstellen... 527 Gästebuch Daten von Flash an PHP übergeben und Datensätze erstellen... 532 Spieleprogrammierung Tastatursteuerung... 539 Kollisionserkennung mit Begrenzungsrahmen... 543 Kollisionserkennung an einem bestimmten Punkt... 545 Kollisionserkennung von zwei Kreisformen... 547 Kollisionserkennung mit Bühnenrändern... 550 Kollisionserkennung mit Randbereichen und Bouncing... 552 Kollisionserkennung von Kreis- und Rechteck-Form... 555 Spielername lokal speichern und lesen... 559 Highscore: XML-Dokument laden und Daten ausgeben... 564 Highscore aktualisieren und XML-Struktur erzeugen... 569 Highscore: XML-Struktur an PHP-Skript übergeben und XML-Dokument serverseitig erzeugen... 571 Ein Blick über den Tellerrand Flash-Film für Desktop-Anwendung erstellen... 587 Desktop-Anwendung mit ZINC erzeugen... 590 Workshops 19

5 Animation KAPITEL 5 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 unterschiedlichen Animationstechniken kennen und erfahren, wie Sie selbst Instanzeigenschaften wie Position und Farbe animieren können. [Animation] Animation ist die Veränderung einer Objekteigenschaft über einen gewissen Zeitraum. Es gibt zwei wesentliche Faktoren, die eine Animation beeinflussen: die sich ändernde Eigenschaft (wie z. B. die Position, Farbe oder die Größe) und die Zeit. 5.1 Zeitleiste Die Zeitleiste ist das Mittel, um den zeitlichen Ablauf eines Flash- Films zu steuern. Vergleicht man einen Flash-Film mit einem echten 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 Geschwindigkeit (bei Filmen: 24 Bilder pro Sekunde) an. 3 2 1 F Abbildung 5.1 Die Zeitleiste 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 Entwicklungsumgebung an. Abspielrichtung Der Abspielkopf bewegt sich beim Abspielen der Zeitleiste von links nach rechts, um die einzelnen Bilder der Zeitleiste und deren Inhalt darzustellen. 5.1 Zeitleiste 111

5.1.1 Ebenenmodell Ebenen sind vergleichbar mit transparenten Folien. Auf der transparenten Fläche einer Folie lassen sich verschiedene Elemente anlegen. Die Folien werden dann in einer bestimmten Reihenfolge, der Ebenenreihenfolge, übereinandergelegt und ergeben so ein Gesamtbild. 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. Jeder Flash-Film kann beliebig viele Ebenen besitzen mithilfe von Ebenen können Sie die Bestandteile eines Flash-Films hierarchisch anordnen, inhaltsbezogen verteilen und strukturieren. 5.1.2 Mit Ebenen arbeiten 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. Abbildung 5.3 E Ebene einfügen 1 Sie sollten Ebenen möglichst eindeutige Namen zuweisen, damit Sie später einen Hinweis darauf haben, was sich auf den entsprechenden Ebenen befindet. Klicken Sie dazu auf den Ebenennamen 2. Anschließend können Sie einen neuen Namen eingeben. 112 5 Animation

2 F Abbildung 5.4 Ebenennamen ändern 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 benennen die Übersicht geht sonst schnell verloren. 3 F Abbildung 5.5 Ein Negativbeispiel. Wo ist was? Das Rätseln beginnt. 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 liegen sollen. Ein möglicher Ebenenaufbau einer Webseite könnte so aussehen: Unten: eine Ebene mit Hintergrundelementen (Grafiken, Fenster für Textbereiche etc.) Im mittleren Bereich: Ebenen mit Hauptinhalten der Webseite (Texte, Grafiken, Logo etc.) Oben: eine Ebene mit Bildbezeichnern und Aktionen (diese Ebenen haben keinen sichtbaren Inhalt sie dienen zur Steuerung und Strukturierung des Flash-Films üblicherweise werden sie ganz oben positioniert) Reihenfolge Objekte auf der obersten Ebene überlagern alle Objekte, die auf Ebenen darunter liegen. 5.1 Zeitleiste 113

Abbildung 5.6 E Ein klassischer Aufbau einer Webseite Strukturierung Am Anfang fällt es nicht immer leicht, eine gute Struktur für einen 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 aufzubauen. 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. 1 Abbildung 5.7 E Die Ebene Hintergrund wird nach unten verschoben. Ebenen auswählen Halten Sie bei der Auswahl statt (ª) die (Strg)/( )-Taste gedrückt, um eine Mehrfachauswahl von Ebenen vorzunehmen, die nicht hintereinanderliegen. Ebenenordner Ebenen lassen sich in ein- und ausklappbaren Ebenenordnern strukturieren. Mithilfe von Ebenenordnern können Sie Ebenen z. B. nach ihrem Inhalt sortieren und strukturieren. 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 Zeitleiste 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. 114 5 Animation

3 2 G Abbildung 5.8 Ebenenordner einfügen G Abbildung 59 5.9 Ebenen in Ordner verschieben Sie können jetzt auf einen Blick erkennen, welche Ebenen zur Navigation gehören. Ein weiterer Vorteil ist, dass Sie Ebenenordner 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 hilfreich, 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. 4 Ebenenordner steuern Die Steuerungsfunktionen, die im folgenden Abschnitt erläutert werden, können auch auf Ebenenordner angewandt werden. So ist es z. B. möglich, alle Ebenen eines Ordners gleichzeitig auszublenden oder zu sperren. G Abbildung 5.10 510 Ebenen des Ordners ausblenden H Abbildung 5.11 Die Ebene content ist links ausund rechts eingeblendet. 5.1 Zeitleiste 115

Mehrere Ebenen steuern Sie können auch mehrere Ebenen gleichzeitig steuern. Wählen Sie dazu die Ebenen, für die Sie einen Modus aktivieren möchten, aus, und klicken Sie oberhalb der Ebenen auf eines der Symbole Auge, Schloss oder Rahmen 8. Ein Schlosssymbol 6 wird angezeigt, wenn die Ebene gesperrt wurde. Wenn Sie die Ebene anwählen, zeigt Ihnen zusätzlich ein durchgestrichener Stift 7, dass auf dieser Ebene nicht gearbeitet werden kann. 7 5 6 Abbildung 5.12 E Die Ebene Vordergrund wurde gesperrt. 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 finden die entsprechende Option im Menü Datei N Einstellungen für Veröffentlichungen... im zweiten Reiter Flash unter Ausgeblendete Ebenen exportieren. Gelegentlich kommt es vor, dass Objekte aneinander ausgerichtet werden sollen, bestimmte Teile der Objekte sich aber so überlagern, dass der Überblick verloren geht. Per Mausklick 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. Abbildung 5.13 E Normale Ansicht und Konturansicht im Vergleich 8 5.1.3 Bilder und Schlüsselbilder 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 befindet 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 derselbe, die Bedeutung aber eine andere. 116 5 Animation

1 2 Um den Inhalt eines Schlüsselbildes im weiteren Verlauf der Zeitleiste 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 Zeitleiste N Bild oder nutzen das Tastenkürzel (F5). G Abbildung 5.14 Links: leeres Schlüsselbild, rechts: Schlüsselbild 3 F Abbildung 5.15 Ein Schlüsselbild und neun Bilder dahinter 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 stattfinden 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 zeichnen oder das bestehende Objekt verändern, sehen Sie, was passiert: Der Bereich 5 vor dem neuen Schlüsselbild bleibt unverändert. 5.1 Zeitleiste 117

5 4 Abbildung 5.16 E Ein neues Schlüsselbild wurde in Bild 10 angelegt. Leere Schlüsselbilder In leeren Schlüsselbildern befindet 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) einfügen. 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 bewegen die Maus, um es auf der Zeitleiste zu verschieben. Wenn Sie dabei (Alt)/(±) gedrückt haben, wird eine Kopie des Schlüsselbildes angelegt. Schlüsselbild löschen Um ein Schlüsselbild zu löschen, wählen Sie dieses zunächst aus, öffnen per Klick mit der rechten Maustaste das Kontextmenü und wählen den Menüpunkt Schlüsselbild löschen. Abbildung 5.17 E Menübefehl Schlüsselbild löschen 118 5 Animation

Darstellungsweise Darstellungsweise und Symbole von Bildern (Inhalten), Animationen und Ebenen auf der Zeitleiste zeigen Ihnen bereits auf den ersten Blick, was sich auf dem entsprechenden Bild oder der Ebene befindet bzw. was dort abläuft. Die folgende Übersicht zeigt Ihnen, wie unterschiedliche Bereiche in der Zeitleiste dargestellt werden. Bilder der Zeitleiste G Abbildung 5.18 Ein leeres Schlüsselbild ohne Inhalt auf der Bühne G Abbildung 5.19 Ein Schlüsselbild und dahinter neun Bilder G Abbildung 5.20 Ein leeres Schlüsselbild, dem eine Aktion zugewiesen wurde ein kleines a zeigt diese Zuweisung an. G Abbildung 5.21 Die Ebene Labels besitzt zwei Schlüsselbilder, denen Bildbezeichner zugewiesen wurden. G Abbildung 5.22 Zwei Schlüsselbilder in Bild 1 und Bild 10, dazwischen ein Bewegungstweening G Abbildung 5.23 Zwei Schlüsselbilder, dazwischen ein Formtweening G Abbildung 5.24 Die Maskenebene Maske maskiert die Ebene Inhalt. G Abbildung 5.25 Ein Bewegungstweening auf der Ebene Animation, das an der Führungsebene Animationspfad ausgerichtet ist. 5.1.4 Darstellungsoptionen der Zeitleiste Ü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. 5.1 Zeitleiste 119

Abbildung 5.26 E Darstellungsoptionen der Zeitleiste Abbildung 5.27 EE Darstellungen im Vergleich (von oben nach unten): Normal und Reduziert, Groß, Vorschau im Kontext Aufbau eines Flash-Spiels Bei einem Spiel gäbe es Bereiche, wie die Spielanleitung, verbunden mit der Eingabe eines Spielernamens, das Spiel selbst und ggf. einen Highscore. 5.1.5 Szenen und Bildbezeichner Komplexere Flash-Filme bestehen meist aus mehrteiligen Bereichen. 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 Fenster zur Verwaltung von Szenen über Fenster N Andere Bedienfelder 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. 2 1 3 G Abbildung 5.28 Im Fenster Szene können Sie die Szenen Ihres Films verwalten. Vor- und Nachteile Auf den ersten Blick erscheinen Szenen sehr vielversprechend, da sich Bereiche mittels Szenen inhaltlich sichtbar trennen lassen. In der Praxis ergeben sich allerdings häufig Probleme, die einem meist erst später auffallen. So ist es z. B. nicht möglich, ein grafisches Element auf mehreren Szenen gleichzeitig anzuzeigen, da jede Szene eine eigene Hauptzeitleiste besitzt und die Zeitleisten von zwei Szenen in keiner Weise miteinander verbunden sind. Wenn Szenen verwendet werden, führt das oft dazu, dass Ebenen und Elemente mehrmals angelegt werden müssen. Häufig 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 120 5 Animation

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 Bildbezeichner. Szenen-Reihenfolge ändern Ähnlich wie Ebenen können Sie die Reihenfolge der Szenen per Drag & Drop ändern. Bildbezeichner Mithilfe von Bildbezeichnern können Sie verschiedene Bereiche eines Flash-Films visuell auf der Hauptzeitleiste oder auch auf der Zeitleiste eines Movieclips voneinander trennen. Bildbezeichner können nur Schlüsselbildern zugeordnet 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 Bildbezeichner zuzuweisen. Da Bildbezeichner über Action Script bildunabhängig angesteuert werden können, können Sie Schlüsselbilder mit Bildbezeichnern nachträglich beliebig verschieben, ohne dass dies die Ansteuerung per Action Script negativ beeinflusst. 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. 1 4 2 3 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 Szenen wird daher mittlerweile von vielen Flash-Nutzern vermieden. 5 6 F Abbildung 5.29 Getrennte Bereiche mit Bildbezeichnern Um einem Schlüsselbild einen Bildbezeichner zuzuweisen, wählen Sie das Schlüsselbild in der Zeitleiste aus und öffnen das Eigenschaften-Fenster. Tragen Sie den Bildbezeichner im Eigenschaften-Fenster unter Bild 7 ein. Bildbezeichner mit Leerzeichen sind zwar gültig, sollten aber vermieden werden. Film stoppen Meistens soll der Flash-Film an Stellen mit Bildbezeichnern stoppen. Dazu werden auf einer eigenen Ebene, z. B. einer Ebene Actions, 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«. 7 F Abbildung 5.30 Bildbezeichner zuweisen 5.1 Zeitleiste 121

Ansteuerung von Bildern Weitere Beispiele zur Ansteuerung von Bildern der Zeitleiste finden Sie in diesem Kapitel in Abschnitt 5.7,»Verschachtelung«. Ansteuerung von Szenen und Bildbezeichnern Sie können Szenen 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"); 5.2 Bild-für-Bild-Animation Link-Tipp: Flash-Fight Unter http://www.yonkis.com/ mediaflash/animacionflashera.htm finden Sie eine witzige Zeichentrick-Animation, die in großen Teilen mit Bild-für-Bild-Animationen verwirklicht wurde. Auf der Buch-DVD finden Sie eine Video-Lektion zur Bildfür-Bild-Animation (Lektion 2.1). Animationen können in Flash über verschiedene Techniken verwirklicht 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 Dateigröß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-Bitmap-Animation oder zum Teil bei animierten Comic-Zeichnungen, bei denen meist zwei verschiedene Techniken zum Einsatz kommen. G Abbildung 5.31 Bild für Bild: 3D-Bitmap- Animation Essenziell für Bild-für-Bild-Animationen ist die Arbeit mit Schlüsselbildern. Nachdem Sie einen Inhalt in einem Schlüsselbild 122 5 Animation

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 Modifizieren N Dokument. In den Dokumenteigenschaften können Sie die Bildrate 1 einstellen. Die standardmäßig eingestellte Bildrate von zwölf Bildern pro Sekunde ist meist viel zu niedrig. Grundsätzlich empfiehlt es sich, als Erstes die Bildrate zu erhöhen. Die richtige Bildrate Die richtige Bildrate hängt vom Projekt ab, bei Spielen z. B. werden oft sehr hohe Bildraten zwischen 40 und 60 Bildern pro Sekunde verwendet. Bei gewöhnlichen Animationen reichen 31 Bilder pro Sekunde in der Regel aus. Da sich bestimmte Bildraten bei Macs und PCs in einigen Flash-Player-Versionen unterschiedlich 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. 1 F Abbildung 5.32 Dokumenteigenschaften ändern 5.2.1 Eine perfekte Bild-für-Bild-Animation Ein erstes Beispiel soll Ihnen die Erstellung einer Bild-für-Bild- Animation zeigen. Wir werden dazu praxisnah einzelne Bitmap- Bilder verwenden. Schritt für Schritt: Die Animation anlegen 1 Neues Dokument erstellen Legen 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.fla ab. Bildrate sofort festlegen Sie sollten die Bildrate immer direkt, nachdem Sie einen neuen Flash-Film erstellt haben, ändern, da sie für den ganzen Flash-Film gilt und die Länge einer Animation nach ihr ausgerichtet wird. Eine nachträgliche Änderung würde bedeuten, dass Sie jede zuvor erstellte Animation entsprechend an die neue Bildrate anpassen müssten. 5.2 Bild-für-Bild-Animation 123

Abbildung 5.33 E Ein Action Script-2.0-Dokument anlegen Kapitel_05 N Bild-für-Bild N 01.png 2 Bitmap-Bilder importieren Ausgangsbasis sind zwölf Bitmap-Bilder, die mit Blender (http:// www.blender.org), einem freien 3D-Modellierungs- und Animationsprogramm, 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 Dialogfenster, 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. Abbildung 5.34 E Dialogfenster beim Import der Bildsequenz Abbildung 5.35 E Flash nach dem Import der Bildsequenz 3 Film testen Ergebnis der Übung: Kapitel_05 N Bild-für-Bild N step01.fla Testen 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 124 5 Animation

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. Schritt für Schritt: Dokumenteigenschaften ändern In 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ü Modifizieren 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. Schlüsselbilder Für jede Änderung auf der Bühne wird ein Schlüsselbild benötigt. Über Schlüsselbilder steuern Sie das Auftauchen, das Verschwinden 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 Inhalt wird durch einen leeren, nicht gefüllten Kreis dargestellt. 2 1 F Abbildung 5.36 Dokumenteigenschaften ändern 2 Bildsequenz erweitern Die 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 Animation einen runden Übergang bildet. Klicken Sie auf das erste Schlüsselbild der Zeitleiste, halten 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 Kapitel_05 N Bild-für-Bild N step02.fla 5.2 Bild-für-Bild-Animation 125

Kontextmenü wählen Sie den Menüpunkt Bilder kopieren 1, wodurch alle ausgewählten Bilder in die Zwischenablage kopiert werden. 1 Abbildung 5.37 E Bilder kopieren Abbildung 5.38 E Bilder kopieren auf die schnelle Art 2 Bilder kopieren Noch schneller geht das Kopieren, wenn Sie die Bilder auswählen, (Alt)/(±) gedrückt halten und dann verschieben. Ein kleines Pluszeichen 2 zeigt an, dass es sich um einen Kopiervorgang handelt. Anschließend wird Bild 13 der Zeitleiste markiert, das Kontextmenü 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 Bildsequenz 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 umkehren. 126 5 Animation

F Abbildung 5.39 Bildreihenfolge umkehren 4 Überflüssige Bilder löschen Die Bitmaps in Bild 12 und 13 sind identisch zwei gleiche Bilder hintereinander stören den flüssigen Ablauf. Das Schlüsselbild in Bild 13 wird deshalb über das Kontextmenü Schlüsselbild löschen entfernt. F Abbildung 5.40 Schlüsselbild löschen Das Schlüsselbild wurde entfernt, stattdessen befindet 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. Bilder der Zeitleiste Zwischen Schlüsselbildern befinden sich oft»normale«bilder (engl. Frames), die dafür sorgen, dass der Inhalt eines zuvor erstellten Schlüsselbildes unverändert angezeigt wird. Erst das nächste Schlüsselbild sorgt für eine Veränderung. F Abbildung 5.41 Bild entfernen 5 Film testen Testen Sie den Film über (Strg)/( )+( ). Die Animation läuft immer noch nicht ganz rund das letzte Bild zeigt dieselbe 5.2 Bild-für-Bild-Animation 127

Ergebnis der Übung: Kapitel_05 N Bild-für-Bild N step03.fla 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. Abbildung 5.42 E Die Zeitleiste mit 22 Bildern, nachdem auch das letzte Schlüsselbild entfernt wurde 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 Movieclips ändern. Zusätzlich können Sie den Movieclip unabhängig von der Hauptzeitleiste steuern. Kapitel_05 N Bild-für-Bild N step03.fla Schritt für Schritt: Animation in Movieclip verschachteln In diesem Workshop wird gezeigt, wie sich eine Bild-für-Bild- Animation in einem Movieclip verschachteln lässt. Verschachtelung Wie Sie Movieclips verschachteln können, wird in diesem Kapitel in Abschnitt 5.7,»Verschachtelung«, näher erläutert. 1 In Movieclip konvertieren Markieren 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 1 Abbildung 5.43 E In Movieclip konvertieren 2 Bilder kopieren und löschen Markieren 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. 128 5 Animation

F Abbildung 5.44 Bilder kopieren Die Bilder befinden 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ügen Wä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. F Abbildung 5.45 Bilder einfügen Positionierung 4 Bitmaps positionieren Leider 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). Die Positionierung über das Fenster Ausrichten bezieht sich innerhalb eines Symbols auf den Registrierungspunkt des Symbols im Beispiel liegt der Registrierungspunkt links oben, dementsprechend werden die Bilder an der linken oberen Kante positioniert. 5.2 Bild-für-Bild-Animation 129

4 5 3 Abbildung 5.46 E Bitmaps positionieren Ergebnis der Übung: Kapitel_05 N Bild-für-Bild N step04.fla 5 Film testen Testen 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 realistischer zu machen, wird die Geschwindigkeit im Folgenden durch Einfügen zusätzlicher Bilder angepasst. Schritt für Schritt: Geschwindigkeit ändern In diesem Workshop lernen Sie, wie Sie durch das gezielte Einfügen von Bildern die Geschwindigkeit einer Animation steuern können. 1 Bilder einfügen Die 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 eingefügt. Wählen Sie zunächst das erste Bild aus, und drücken Sie zweimal (F5), um zwei Bilder hinter dem ersten Schlüsselbild einzufügen. Wählen Sie dann jeweils das nächste Schlüsselbild aus, und wiederholen Sie den Vorgang. Abbildung 5.47 E Die Zeitleiste des Movieclips 2 Auf die Hauptzeitleiste wechseln Wechseln Sie per Mausklick auf Szene 1 zurück zur Hauptzeitleiste. 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 abgespielt werden da die Zeitleiste eines Movieclips jedoch unabhängig von der Hauptzeitleiste abgespielt wird, läuft die vollständige Animation ab. 130 5 Animation

3 Animation positionieren Da die Animation in einem Movieclip verschachtelt wurde, können Sie diese ganz einfach positionieren im Beispiel wird der Movieclip über das Fenster Ausrichten an der linken unteren Kante der Bühne platziert. F Abbildung 5.48 Positionierung des Movieclips 4 Film testen Glü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)/( )+( ). Ergebnis der Übung: Kapitel_05 N Bild-für-Bild N step05.fla N F Abbildung 5.49 Die fertige Animation im Flash Player 5.3 Zwiebelschaleneffekt Standardmäßig wird in der Entwicklungsumgebung jeweils nur ein Bild der Zeitleiste auf der Bühne angezeigt. Mithilfe des Zwiebelschaleneffekts lassen sich jedoch auch mehrere Bilder gleichzeitig auf der Bühne anzeigen. Anwendungsbereich Der Zwiebelschaleneffekt ist besonders bei Bild-für-Bild-Animationen sehr nützlich, wenn Sie einzelne Objekte von Bild zu Bild vergleichen und verändern möchten. 5.3 Zwiebelschaleneffekt 131

Zwiebelschaleneffekt aktivieren Per Mausklick auf die Schaltfläche Zwiebelschale 1 können Sie die Zwiebelschalenansicht in der Zeitleiste aktivieren bzw. deaktivieren. 3 2 1 Abbildung 5.50 E Der Zwiebelschaleneffekt wurde aktiviert. Anfasser verankern Über die Schaltfläche Zwiebelschalenmarkierung ändern 5 können Sie die Anfasser verankern. Dies führt dazu, dass sie, unabhängig vom ausgewählten Bild, immer auf der gleichen Position bleiben. 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 dargestellt werden. Die Anfasser können per Drag & Drop verschoben werden 4, um den angezeigten Bereich zu vergrößern oder zu verkleinern. 4 5 G Abbildung 5.51 Markierungen verankern Abbildung 5.52 E Der Bereich der Zwiebelschalenansicht wird vergrößert. Transparenz in der Zwiebelschalenansicht Je weiter das Bild vom aktuellen Bild entfernt ist, desto stärker scheint das Objekt durch so lässt sich der zeitliche Ablauf visuell nachvollziehen. Konturansicht Normalerweise werden Formfüllungen von Bildern, die im Bereich des Zwiebelschaleneffekts liegen, mit verschiedenen Transparenzstärken dargestellt. Wenn Sie nach der Aktivierung des Zwiebelschaleneffekts auf Zwiebelschalenkonturen 6 klicken, werden stattdessen nur die Konturen der Formen angezeigt. 132 5 Animation

6 F Abbildung 5.53 Zwiebelschalenkonturen Mehrere Bilder gleichzeitig bearbeiten Der Modus Mehrere Bilder bearbeiten 7 ermöglicht es, mehrere Bilder der Zeitleiste, die im Zwiebelschalenbereich liegen, gleichzeitig zu modifizieren. Nachdem der Modus aktiviert wurde, können Sie die Bilder in der Zeitleiste auswählen und dann gemeinsam modifizieren. 7 F Abbildung 5.54 Die Elemente mehrerer Schlüsselbilder wurden ausgewählt und werden gleichzeitig verschoben. Diese Funktion ist sehr nützlich Sie können z. B. auch alle Elemente 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 verschieben möchten die Elemente werden automatisch ausgewählt. Bereich des Zwiebelschaleneffekts Beachten Sie, dass nur die Elemente gleichzeitig modifiziert werden, die innerhalb des definierten Zwiebelschalenbereichs liegen. Sollte ein Bild der Zeitleiste außerhalb liegen, wird es nicht modifiziert; auch dann nicht, wenn es ausgewählt wurde. F Abbildung 5.55 Alle Elemente der ausgewählten Ebene werden gleichzeitig verschoben. 5.3 Zwiebelschaleneffekt 133

Generell sollten Sie den Zwiebelschalen-Modus nur partiell nutzen und denken Sie daran, den Modus zu deaktivieren, nachdem Sie ihn verwendet haben. Es kommt gelegentlich vor, dass man die Deaktivierung vergisst und dann unerwünschte Mehrfachauswahlen zu unerwarteten Ergebnissen führen. 5.4 Bewegungstweening Nur mit Symbolen Bewegungstweenings funktionieren nur mit Symbolinstanzen Formen müssen Sie vorher also z. B. in ein Movieclip-Symbol umwandeln. Neben der Bild-für-Bild-Technik lassen sich Animationen in Flash über ein so genanntes Tweening verwirklichen. Es gibt Bewegungstweenings und Formtweenings. Zunächst werden im Folgenden Bewegungstweenings erläutert. Beide Methoden basieren auf derselben Technik: Bei einem Tweening werden Schlüsselbilder nur an bestimmten signifikanten Stellen platziert. Bilder, die zwischen den Schlüsselbildern liegen, werden automatisch von Flash berechnet. G Abbildung 5.56 Bewegungstweening aktivieren Ausgangs- und Endbild Im Gegensatz zur Bild-für-Bild- Animation benötigt ein Bewegungstweening nur zwei Schlüsselbilder, die den Ausgangspunkt und den Endpunkt der Animation definieren. An Pfad ausrichten/ausrichten Erläuterungen zu den Einstellungen An Pfad ausrichten und Ausrichten finden Sie in diesem Kapitel in Abschnitt 5.4.2,»An Pfad ausrichten«. Bewegungstweening aktivieren Um ein Bewegungstweening zwischen zwei Schlüsselbildern zu definieren, 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 stehen 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 deaktiviert, 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 beeinflussen, indem Sie das Tweening entweder zu Beginn oder am Ende der Animation abbremsen. Bearbeiten 3: Ermöglicht ein benutzerdefiniertes Beschleunigen 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 getweenten Objekts erstellt wurde, wird an die Dauer des Bewegungstweenings angepasst. 134 5 Animation

2 1 3 Eine Ebene Elemente, die über ein Tweening animiert werden, müssen allein auf einer eigenen Ebene platziert werden. 4 5 G Abbildung 5.57 Bewegungstweening-Optionen Schritt für Schritt: Ein Bewegungstweening erstellen In diesem Workshop lernen Sie, wie Sie ein Bewegungstweening erstellen können. 1 Film öffnen Öffnen Sie den Flash-Film step01.fla aus dem Ordner Bewegungs_Tweening. Ausgangsbasis ist eine Bild-für-Bild-Animation, 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. G Abbildung 5.58 Die gestrichelte Linie zeigt einen Fehler im Tweening an der Grund: Zwei Elemente wurden auf der Ebene platziert. Kapitel_05 N Bewegungs_ Tweening N step01.fla 6 F Abbildung 5.59 Eine neue Ebene erstellen 2 Bitmap importieren Wä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 gras_hopper_02.png F Abbildung 5.60 Flash nach dem Import der Bitmap 5.4 Bewegungstweening 135

3 Bitmap in Movieclip konvertieren Wählen Sie den Grashüpfer auf der Bühne aus, und konvertieren Sie ihn über (F8) in den Movieclip»hüpfer_mc«. Abbildung 5.61 E In Movieclip konvertieren Bewegungstweening mit Symbolinstanzen Objekte, die über ein Bewegungstweening animiert werden, müssen vorher in ein Grafikoder Movieclip-Symbol umgewandelt werden. Wenden Sie ein Bewegungstweening fälschlicherweise auf ein anderes Objekt an, wird dieses automatisch in ein Grafiksymbol konvertiert. 4 Ausgangspunkt festlegen Zunä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. Abbildung 5.62 E Positionierung im ersten Bild 5 Endzustand bestimmen Am Ende der Animation soll er sich rechts außerhalb der Bühne befinden. Fügen Sie dazu in Bild 15 ein Schlüsselbild ein, und verschieben Sie die Movieclip-Instanz entsprechend. Abbildung 5.63 E Das Endbild der Animation 136 5 Animation

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 Eigenschaften-Fenster, und aktivieren das Bewegungstweening 1. 1 F Abbildung 5.64 Bewegungstweening aktivieren 7 Film testen Testen Sie den Film über (Strg)/( )+( ). Ein Problem bleibt noch zu lösen: Die Gras-Animation wird nicht wie erwartet abgespielt. Sie wird nur kurz im ersten Bild eingeblendet. 8 Bilder einfügen Der 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 angezeigt. Um das Problem zu beheben, werden zwischen Bild 2 und Bild 15 weitere Bilder eingefügt. Markieren Sie die entsprechenden Bilder in der Zeitleiste, und drücken Sie (F5). F Abbildung 5.65 Bilder einfügen 9 Film erneut testen Testen 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 Geschwindigkeit durch eine Verlängerung des Tweenings angepasst. Schritt für Schritt: Tweening verlängern In diesem Workshop erfahren Sie, wie Sie ein Bewegungstweening verlängern können. Kapitel_05 N Bewegungs_ Tweening N step02.fla 5.4 Bewegungstweening 137

1 Film öffnen Öffnen Sie den Flash-Film step02.fla aus dem Ordner Bewegungs_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 Bilder 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 verschieben Sie die Bilder auf Bild 40. Abbildung 5.66 E Verschieben der Endbilder auf Bild 40 Ergebnis der Übung: Kapitel_05 N Bewegungs_Tweening N step03.fla 3 Film testen Testen Sie den Film im Flash Player über (Strg)/( )+( ). Abbildung 5.67 E Das Bewegungstweening im Flash Player N Anwendung Die Funktion Bewegung kopieren ist sehr nützlich, wenn Sie mehrere Objekte, z. B. an verschiedenen Positionen, auf die gleiche Art und Weise animieren möchten. 5.4.1 Animation kopieren und einfügen 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. 138 5 Animation

F Abbildung 5.68 Bewegung kopieren Anschließend können Sie die Bewegung auf eine andere Symbolinstanz 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üsselbild löschen anschließend entfernen. 1 F Abbildung 5.69 Löschen Sie die überflüssigen Bilder und das Schlüsselbild. Werden innerhalb eines Bewegungstweenings mehrere Instanzeigenschaften, 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. 5.4 Bewegungstweening 139

Abbildung 5.70 E Spezielle Bewegung einfügen 5.4.2 An Pfad ausrichten Ü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 definierter Bewegungspfad, an dem sich das bewegte Objekt orientiert. Um ein Bewegungstweening an einem solchen Pfad auszurichten, 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-Werkzeug anlegen. G Abbildung 571 5.71 Pfad hinzufügen Abbildung 5.72 E Führungsebene in der Zeitleiste Damit das getweente Objekt sich nun auch an diesem Pfad entlangbewegt, 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 befindet. Lassen Sie die Maustaste dann los, damit das Objekt am Pfad einrastet. 140 5 Animation

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, sondern sich auch in Pfadrichtung dreht. 2 1 F Abbildung 5.73 Pfadoptionen im Eigenschaften- Fenster Schritt für Schritt: Bewegungstweening an Pfad ausrichten Im Folgenden wird erläutert, wie Sie ein Bewegungstweening an einem Pfad ausrichten. Kapitel_05 N Bewegungs_ Tweening_Pfad N step01.fla 1 Flash-Film öffnen Öffnen Sie den Flash-Film step01.fla aus dem Ordner Bewegungs_Tweening_Pfad. Der Grashüpfer wird zusätzlich zur Gras- Animation mithilfe von vier Bewegungstweenings animiert. F Abbildung 5.74 Die vorbereitete Flash-Datei 2 Schlüsselbilder erstellen Fügen Sie dazu zunächst in Bild 10 und 30 weitere Schlüsselbilder ein. 5.4 Bewegungstweening 141