Flash MX Daniel Winter Jan Kozik
Flash MX
1
Alle Rechte vorbehalten. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jeder Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Das gilt insbesondere für die Vervielfältigung, Übersetzung, Mikroverfilmung und die Einspeicherung und Verbreitung in elektronischen Systemen.
© Comelio GmbH Rellinghauser Straße 10, D-45128 Essen Tel (0201) 437517-0, Fax (0201) 437517-10 www.comelio-medien.com,
[email protected]
Umschlaggestaltung: Daniel Winter Satz: Marcel Walla Comelio-Grafiken: Daniel Winter Printed in Germany
ISBN 3-939701-20-3 | 978-3-939701-20-0 |
Flash MX
2
Flash MX Daniel Winter Jan Kozik Website zum Buch: http://www.comelio-medien.com/dedi3_562
© 2007 Comelio Medien
Flash MX
3
Flash MX
4
INHALT
Inhalt Inhalt
5
Einleitung
9
Aufbau des Buches 9 Autoren 1
2
3
4
5
10
Grundlagen der Animation und der Programmoberfläche 1.1
Zu diesem Training... 13
1.2
Animation verstehen
1.3
Die Arbeitsumgebung 21
1.4
Bühne einrichten
1.5
Testen Sie Ihr Wissen! 31
11
14
24
Zeichnungen mit Formen und Pfaden erstellen
33
2.1
Von geometrischen Grundformen ausgehen
2.2
Form und Farbe verändern
2.3
Objekte duplizieren, transformieren und ausrichten
48
2.4
Linien zeichnen und als Bézierkurven bearbeiten
57
2.5
Testen Sie Ihr Wissen! 63
42
Text eingeben, formatieren und verlinken 3.1
Text erstellen 67
3.2
Hyperlinks einbinden 74
3.3
Objekte / Text teilen
3.4
Testen Sie Ihr Wissen! 78
35
65
76
Mit Schlüsselbildern, Symbolen und Bibliothek Animationen erstellen 4.1
Mit Schlüsselbildern die Zeitleiste nutzen
4.2
Arbeitserleichterung mit Bewegungs-Tweening 87
4.3
Bibliothek und Instanzen
93
4.4
Form-Animation mit Tween
101
4.5
Automation mit Pfadebene
107
4.6
Testen Sie Ihr Wissen! 113
79
81
Grafik, Video und Audio importieren 115 5.1
Grafiken importieren und einbinden
117
5.2
Videos importieren und verarbeiten
125
Flash MX
5
INHALT
6
7
8
9
5.3
Audio-Daten integrieren
5.4
Testen Sie Ihr Wissen! 133
129
Komplexe Animationen mit Szenen und Movieclips koordinieren 6.1
Movieclips erstellen und verwenden
6.2
Einen Film in Szenen zerlegen 142
6.3
Controlling über den Film-Explorer
6.4
Testen Sie Ihr Wissen! 149
137
146
Interaktion und Schaltflächen mit ActionScript einrichten
151
7.1
Schaltflächensymbol einsetzen
7.2
Pop-up-Menüs und komplexe Schaltflächen erstellen 160
7.3
Vorlagen für Schaltflächen verwenden 166
7.4
Schaltflächen mit Ton versehen
7.5
Testen Sie Ihr Wissen! 169
153
168
Visuelle Effekte und Animationen mit Masken 8.1
Grundprinzip der Maskierung 172
8.2
Einfache Masken erstellen und animieren
8.3
Movieclips für Maskierungen benutzen 177
8.4
Verschachtelte Masken
8.5
Testen Sie Ihr Wissen! 188
170
174
184
Dokument-Vorlagen nutzen, ändern und erstellen
190
9.1
Dropdown-Menü mit einem XML-Dokument erstellen
9.2
Eigene Vorlage speichern
9.3
Registerkarten-Menü mit XML-Dokument gestalten
9.4
Ein Foto-Album einrichten
208
9.5
Testen Sie Ihr Wissen?
212
10 Text- und 3D-Effekte importieren
192
200 205
214
10.1
Texteffekte in Swish erstellen
10.2
Swish-Dateien in Flash einlesen und verarbeiten
10.3
3D-Objekte zeichnen und importieren
10.4
Testen Sie Ihr Wissen!
216 223
225
228
11 Erweiterte Text-Optionen mit ActionScript und Komponenten 11.1
Text als rollbar und auswählbar definieren
11.2
Text aus externer Datei laden
Flash MX
135
230
232
236
6
INHALT
11.3
HTML-Tags beibehalten
237
12 Veröffentlichung für WWW und Druck
240
12.1
Veröffentlichungsformen als eigenständiges Objekt 242
12.2
Dynamische HTML-Vorlagen nutzen und ändern
249
12.3
Größenbericht lesen und Speicherplatz optimieren
255
12.4
Druckoptionen einrichten und Druckausgabe steuern
12.5
Testen Sie Ihr Wissen!
258
264
13 Lösungen 266
Flash MX
7
Flash MX
8
EINLEITUNG
Einleitung Aufbau des Buches
Dieses Buch ist in Projekte aufgeteilt, die grundsätzlich voneinander losgelöst sind. Es ist also nicht notwendig, das Buch linear von der ersten bis zur letzten Seiten zu lesen. Vielmehr wurde darauf geachtet, immer wieder neue Beispiele zu verwenden, um diesen schnellen, themenbezogenen Zugriff zu erleichtern. Sollten dennoch einmal Dateien eines anderen Themas weiter verar-beitet werden, wird ausdrücklich darauf hingewiesen und das entsprechende Zwischenergebnis zur Verfügung gestellt. In einer Zusammenfassung finden Sie dann die wichtigsten Erkenntnisse eines Projekts noch einmal übersichtlich aufbereitet, während die wesentlichen Inhalte dann in Form von Übungen trainiert werden. Diese Übungen stellen auch weitere Beispiele der im Projekt gezeigten Techniken und Verfahren dar, die inhaltlich teilweise auch für die folgenden Projekte re-levant sind. Hier finden Sie gerade auch in den Lösungen weitere Hinweise, wie die Lösung ent-standen ist.
Das erste Kapitel führt das Programm in seinen Grundzügen vor und erklärt die ersten Schritte, um eine Datei zu öffnen und zu bearbeiten. Insbesondere die umfangreichen Paletten, die opti-schen Hilfsmittel wie Raster und Lineale und das Konzept der Ebenen wird hier in einer Tour durch Photoshop erläutert. Das zweite Kapitel beschäftigt sich mit allgemeinen Grundfunktionen des Programms und geht kurz auf die verschiedenen Farbmodelle ein, die in Photoshop verfügbar sind. Das dritte Kapitel zeigt dann auch sofort an praktischen Beispielen, wie man ein Bild hinsicht-lich seiner Helligkeit und Farbgebung untersucht und bearbeiten kann. Dabei werden solche Begriffe wie Farbton, Sättigung und Alphakanäle erklärt und in unterschiedlichen Beispielen auch mit Leben gefüllt. Das vierte Kapitel geht nach der allgemeinen Korrektur von Farbe und Licht auf Manipulation und Verfremdung ein. Hier lernen Sie eine Reihe von Werkzeugen kennen, mit denen Sie auf variantenreiche Art und Weise Bildbereiche wählen, Farbstärken beeinflussen, Masken einset-zen und Filter und Verfremdungen verwenden. Das fünfte Kapitel beginnt nicht mit einem geöffneten Foto, sondern erstellt über die umfangreichen Malwerkzeuge von Grund auf ein neues Bild bzw. eine Zeichnung. In diesen Beispielen werden Sie vertraut im Umgang mit den Mal- und Farbwerkzeugen sowie den verschiedenen Optionen bei der Erstellung von eigenen Zeichnungen mit Flächen, Pfaden und Formen. Das sechste Kapitel kombiniert eigene Zeichnungen und bearbeitete Fotos mit Textebenen und textuellen Effekten. Lernen Sie hier, wie man in Photoshop auch Text-Layout für Anzeigen, Flyer und Plakate entwickeln kann. Das siebte Kapitel verlässt den Bereich Druck und konzentriert sich mit dem Zusatzprogramm ImageReady auf die Erstellung von Webgrafiken. Ausgehend von der allgemeinen Oberfläche lernen Sie in zwei großen Projekten, interaktive Layouts für Webseiten und Animationen mit GIF-
Flash MX
9
EINLEITUNG
Bildern zu entwickeln. Sehen Sie hier, wie Sie ganze Webseiten grafisch in ImageReady gestalten und dann in HTML mit JavaScript exportieren. Hier finden Sie Anleitungen, wie Sie interaktive ImageMaps und animierte GIFs direkt in einer vertrauten Arbeitsumgebung gestal-ten. Das achte Kapitel führt die verschiedenen Möglichkeiten für die Arbeitsaufgaben Export, Druck und Scannen vor. Das neunte Kapitel zeigt fortgeschrittene Techniken der Bildbearbeitung mit Aktionen (Makros), Stapelverarbeitung von Bildern in Photoshop und dynamische Grafiken in ImageReady. Das zehnte Kapitel enthält ein Glossar mit wichtigen Fachbegriffen, die im ganzen Buch immer wieder vorkommen. Das elfte Kapitel enthält die Lösungen zu den Übungsaufgaben am Ende der einzelnen Kapitel. Schließlich folgt der Index zur einfachen Verwendung des Buchs.
Autoren
Jan Kozik arbeitet als Anwendungsentwickler und Dozent für betriebliche Informationssysteme und verwendet .NET und VBA. Er interessiert sich auch für Multimediaentwicklung auf Basis von Macromedia Flash und PHP/ActionScript. Er setzt speziell XML für die Datenhaltung und – übertragung in Multimediaanwendungen ein. Zu seinen Veröffentlichungen gehören Bücher zu XSL-FO, XSL und MS SQL Server.
Daniel Winter (M.A.) studierte Medienwissenschaft und Anglistik/Amerikanistik in Bochum und ist in der Comelio GmbH verantwortlich für die Mediengestaltung. So ist er beispielsweise für das Corporate Design der Comelio GmbH und des Verlags Comelio Medien verantwortlich, wozu auch das Maskottchen des Unternehmens – der kleine grüne Drache – gehört. Sein Aufgabengebiet umfasst sowohl Webdesign als auch Printmedien in den Bereichen Unternehmenskommunikation/Marketing und grafische Benutzerschnittstellen. Als Seminarleiter unterrichtet er im deutschsprachigen Raum Programme wie Photoshop, Dreamweaver, InDesign und Fireworks sowie HTML/CSS und Flash/ActionScript.
Flash MX
10
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
1 Grundlagen der Animation Programmoberfläche
Flash MX
und
der
11
GRUNDLAGEN
Flash MX
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
12
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Grundlagen der Animation und der Programmoberfläche Wir gehen einmal davon aus, dass Ihre Motivation keine Grenzen kennt und Sie förmlich danach gieren, in wenigen Schritten die ehernen Grenzen des Internets zu sprengen und mit größtmöglicher Geschwindigkeit in die vierte Dimension vorzustoßen. Die vierte Dimension steht für die Zeit bzw. in unserem speziellen Fall für tickende Uhrzeiger in Form einer Zeitleiste mit vielen Bildern (wer braucht noch Standbilder?). Ihre kontinuierliche Abfolge erzeugt die perfekte Illusion filmischer Bewegung. Bevor wir Sie jedoch zum Zeit-Meister transformieren, benötigen Sie einen kurzen Überblick über die wichtigsten Kontrollinstrumente und Arbeitsgeräte, die an Bord bereit stehen. Zeitökonomisch also höchst sinnvoll, erleben Sie diese Geräte bereits bei Ihrer ersten Animation in Aktion. Anschnallen, bitte – denn gleich nach der Einführung ins Trainingskonzept startet die Reise in die Welt der lebenden Bilder.
1.1
Zu diesem Training...
Sich zu diesem Zeitpunkt mit Flash zu beschäftigen, ist eine hervorragende Terminierung, da wohl die meisten Internetsurfer einen Flash-tauglichen Browser verwenden und nicht einmal mehr Unsicherheit bei der Installation eines Plug-Ins das Sehvergnügen erschweren sollte. Darüber hinaus sorgen schnellere Internetverbindungen für die weitere Durchsetzung dieses wunderbaren Werkzeugs. Neben dem steigenden Interesse an Flash-Seminaren von haupt- und nebenberuflichen oder privaten Webdesignern wünschen sich auch immer mehr Unternehmen eine grafikintensive Seite mit weichen Bewegungen, kontextsensitiven Menüs oder einer Umsetzung ihrer Unternehmensphilosophie als Film. Flash ist ein Autorenprogramm, d.h. es ermöglicht gleichzeitig die Gestaltung von Filmen mit programmeigenen Werkzeugen (Objektzeichnungen, Textfunktionen) und die Integration von programmfremden Elementen wie Grafiken anderer Programme, Ton und Video. Damit stellt Flash wie ein Programm zur Webseitengestaltung eine Möglichkeit dar, diese unterschiedlichen Formate zusammenzuführen und ein umfangreiches Produkt zu erstellen. In den ersten Projekten werden Sie alle Werkzeuge kennen lernen, die Flash zur Grafikgestaltung bietet. Viele werden Ihnen schon aus anderen Grafikprogrammen bekannt vorkommen. Ein größerer Teil dieses Buchs lenkt dann den Fokus auf den Import anderer Formate. Im Grunde liegt darin auch die Stärke und Faszination dieses Programms: ehemals leblose Grafiken können mit Flash zu Leben erweckt werden. Für die Beschäftigung mit einem Grafikprogramm ist ein Buch sicherlich eine gute Plattform, da Bilder wunderbar gedruckt werden können. Animierte Bilder dagegen erschweren ein wenig das Verständnis, da es wohl noch ein wenig dauern wird, bis auch Bilder in Büchern das Laufen lernen. Um diesem Problem zu begegnen haben wir einen Kompromiss gefunden, der aus der Schwäche möglicherweise eine Stärke macht. Unter unserer Firmenadresse www.comelio-medien.com können Sie die in diesem Buch erstellten Flash-Dateien und Grafiken kostenlos herunterladen. Damit die Animationen nicht nur als fertiges Ergebnis vorliegen, deren Entwicklung man vielleicht nicht mehr nachvollziehen kann, gibt es zusätzlich noch die Zwischenetappen in fortlaufender Nummerierung. In den einzelnen Projekten weisen wir am Rand darauf hin, welche Datei für den aktuellen Abschnitt das Resultat bildet.
Flash MX
13
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Autoren sind wir in Wirklichkeit nur im Nebenberuf. Zu unseren täglichen Hauptaufgaben zählen einerseits Seminare zu Programmierung, Webdesign und Netzwerken und andererseits die Unterstützung von Unternehmen bei der Lösung ihrer IT-Probleme. Dabei kann es sich um Programmierung unternehmensspezifischer Lösungen, die Weiterentwicklung von bestehenden Anwendungen, Datenbankmigration oder – ganz klassisch – Webdesign und E-Commerce handeln. Hinweise und Beispiele kommen aus den Seminaren und in den späteren Beispielen aus unserer Dienstleistungspraxis.
1.2
Animation verstehen
Wenn Sie bereits mit anderen Produkten aus der Mac-Welt bzw. aus dem Haus Macromedia getüftelt haben, dürfte Ihnen der Anblick überquellender Menüs und kleiner Fenster auf dem Bildschirm bereits vertraut sein. Gerade in der neuen Version ist Funktion und Aufbau auch mit anderen Programmen von Macromedia noch vergleichbarer geworden, sodass ein schnelles Zurechtfinden eigentlich garantiert ist. Sollte dies allerdings Ihr erster Kontakt mit einer derartigen Oberfläche sein (deren Vorteile Sie noch zu schätzen wissen werden), fokussieren Sie Ihren Blick auf den weißen Bereich in der Mitte des Fensters und lassen sich nicht vom Sirenengesang der kolorierten Schaltflächen betören. Das Ergebnis dieses Abschnitts finden Sie in der Datei dimension1.fla.
1.2.1
1.
Wählen Sie MODIFIZIEREN / DOKUMENT, um die Filmeigenschaften zu ändern.
Einstellungen für den gesamten Film können über diese Aktion geändert werden. Insbesondere die Größe und die Bildfrequenz stellen überaus wichtige Filmeigenschaften dar. Noch sind nicht alle Besucher mit schnellsten Internetzugängen ausgestattet, sodass trotz der vielen Möglichkeiten ein wenig Zurückhaltung, was die Dateigröße anbetrifft, weiterhin sinnvoll ist. Dateien werden als Filme gespeichert.
1.2.2
2.
Verändern Sie die Größe der Bühne auf 400 x 400 Pixel und die Hintergrundfarbe in
#0099FF. Die Animation wird wie bei herkömmlichen Filmen oder wie bei Zeichentrick über die schnelle Abfolge von Einzelbildern erstellt. Sie ist so schnell, dass das Auge nicht in der Lage ist, die Einzelbilder voneinander zu unterscheiden, sodass das Gehirn eine Bewegung erkennt. Der voreingestellte Wert von 12 Bildern pro Sekunde (zum Vergleich: Fernsehen verwendet 25 BpS, Kino 24 Bp) entspricht einer durchschnittlich flüssigen Bewegung und kann einfach übernommen werden. Eine höhere Rate verbessert die Animation, erhöht allerdings auch den Speicherplatz. Lediglich die Größe der Grafik sollten Sie für dieses Beispiel auf 400x400 Pixel verkleinern. •
INHALT verkleinert den Arbeitsbereich auf die auf der Bühne liegenden Elemente. Dadurch werden die Elemente in die Mitte der verkleinerten Bühne gerückt. Positionieren Sie Ihre Objekte in der linken oberen Ecke, minimieren Sie die Filmgröße.
•
DRUCKER passt das Bühnenformat für einen Papierausdruck an, wobei die Referenzdaten unter DATEI / SEITE EINRICHTEN eingestellt werden können. Dabei berücksichtigt das Programm die dort eingestellten Seitenränder.
Flash MX
14
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
•
STANDARD lädt die Standardeinstellungen für die Größe.
•
ALS STANDARD übernimmt die vorgegebenen Werte als neue Standardwerte für neue Dokumente.
Der Arbeitsbereich heißt Bühne.
1.2.3
3.
Positionieren Sie das Textwerkzeug unten links auf die Bühne.
1.2.4
4.
Schreiben Sie Die 4te Dimension.
Das Ergebnis dieses Abschnitts finden Sie in der Datei dimension2.fla.
1.2.5
5.
Verändern Sie die Schrifteigenschaften.
Standardmäßig befindet sich das Bedienfeld für die Schrifteigenschaften auf der unteren Seite des Bildschirms. Sollte es bei Ihnen ausgeblendet sein, können Sie es über FENSTER / EIGENSCHAFTEN einblenden. Dort erhöhen Sie entweder mit Hilfe des Textfeldes neben Schriftgröße oder des Schiebereglers die Textgröße auf 30. Damit der Text vor dem blauen Hintergrund gut lesbar ist, färben Sie ihn zusätzlich über das Textfarbe-Kontrollkästchen schwarz ein.
Flash MX
15
GRUNDLAGEN
1.2.6
6.
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Wählen Sie den Text aus und drücken Sie F8.
Alternativ können Sie für die Umwandlung eines Objekts in ein Symbol auch EINFÜGEN / IN SYMBOL verwenden. Auf das Problem der Dateigröße hatten wir ja bereits ganz zu Anfang hingewiesen. Bei einer Animation, die aus vielen Einzelbildern besteht, ist dies nicht nur ein buchhalterisches Problem, bei dem die Summe der Pixel der Einzelbilder addiert werden könnte, sondern auch ein filmpraktisches. Flash bietet hier einen Weg an, der dem Zeichentrickfilm besonders nahe steht: man verwendet Symbole, die aus den erstellten Objekten generiert werden. Sie werden nur einmal gespeichert, können aber beliebig oft im Film auftreten, wobei nur die Regieanweisungen gespeichert werden. Dies reduziert den Gesamtspeicherbedarf erheblich.
KONVERTIEREN
Symbole stellen die Schauspieler in einem Film dar, verbrauchen weniger Speicherplatz, da sie mehrfach in einem Film spielen. Nur sie können animiert werden.
1.2.7
7. Als Symboleigenschaften legen Sie den Namen Dimension und das Verhalten GRAFIK fest und quittieren das mit OK.
Für die Animationen unterscheidet Flash verschiedene Symbol-Formate mit relativ eindeutigen Namen. Da wir gerade keine Schaltfläche und auch keine Filmsequenz (Movieclip) erzeugen wollen, bleibt als einzige Auswahl nur GRAFIK. •
BEARBEITEN bringt Sie in den Bearbeitungsmodus für Symbole.
•
ERWEITERT eröffnet Symbol-Einstellungen für die Verwendung in z.B. ActionScripts.
Flash MX
16
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Symbole können in einer eigenen Bearbeitungsumgebung modifiziert werden.
1.2.8
8.
Fügen Sie in der Zeitleiste bei Bild 30 ein neues Schlüsselbild mit F6 hinzu.
Die Zeitleiste ist die Synopse von Vergangenheit, Gegenwart und Zukunft eines Symbols auf einer Ebene. Jedes Symbol erhält eine solche Zeitleiste, sodass sie sich im Laufe eines größeren Projekts zu einer Art Zeittabelle entwickeln kann, die Aufschluss über die gesamte Filmhandlung gibt. Die Zeitleiste des gesamten Films setzt sich also aus den einzelnen Symbolzeitleiste zusammen. Über EINFÜGEN / SCHLÜSSELBILD oder F6 können Sie ein Schlüsselbild hinzufügen, wenn Sie eine bestimmte Bildnummer ausgewählt haben. Das Schlüsselbildkonzept stellt ein weiteres Basiselement dar.
1.2.9
9.
Verschieben Sie den Schriftzug in die rechte obere Ecke.
Um das Objekt wieder auszuwählen, benötigen Sie das Auswahlwerkzeug, da Sie ja nicht erneut Text eingeben wollen. Für die Auswahl innerhalb eines Objekts steht zusätzlich mit der weißen Pfeilschaltfläche ein Unterauswahlwerkzeug zur Verfügung. Das ausgewählte Objekt erhält einen hellblauen Rahmen und ein Mittelpunktsymbol. 1.2.10
10.
Drehen Sie den Schriftzug um 90 Grad gegen den Uhrzeigersinn.
Es stehen Möglichkeiten für freies und festes Transformieren zur Verfügung. Genau 90 Grad erhalten Sie über MODIFZIEREN / TRANSFORMIEREN / UM 90 GRAD NACH LINKS. Richten Sie das Objekt ordentlich am rechten oberen Bühnenrand aus, damit es während der Animation nicht abgeschnitten wird.
Flash MX
17
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
1.2.11
11.
Markieren Sie das Schlüsselbild auf der Zeitleiste.
1.2.12
12.
Klicken Sie bei gedrückter Umschalt-Taste auf das erste Bild der Animation.
Für eine einfache Animation wie z.B. unsere geplante Reise der vierten Dimension durch den zweidimensionalen Raum kann man mühelos auf vorbereitete Animationshilfen zurückgreifen. Wichtig ist dabei zunächst, mit Hilfe von Zwischenphasen dem Programm mitzuteilen, in welchem Bereich die Animation erstellt werden soll und was Urzustand und Ergebnis sein sollen. Der Bereich der Zwischenphasen ergibt sich aus dem markierten Bereich der Zeitleiste, während Beginn und Ende die beiden Schlüsselbilder repräsentieren. Es sollte also nun die gesamte Strecke zwischen Bild 1 und 30 ausgewählt sein. Zwischenphasen bezeichnen den Bereich der Zeitleiste, in dem eine Animation zwischen zwei Schlüsselbildern ablaufen soll.
1.2.13
13.
Wählen Sie unter TWEENING die Einstellung BEWEGUNG aus.
Über die Tweening-Funktion im automatisch aufspringenden Eigenschaften-Inspektor wird die Animation automatisch erstellt. Da es sich hier nicht um eine Formänderung handelt, sondern die Verschiebung des Symbols eine Ortsveränderung auf der Bühne darstellt, ist eine sinnvolle Animation die Funktion Bewegung. Hier werden passende Zwischenstufen der Animation vom
Flash MX
18
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Programm erstellt, die nötig sind, damit sich der Schriftzug von der linken zur rechten Ecke bewegt und sich um 90 Grad gegen den Uhrzeigersinn dreht. Alternativ können Sie dies auch über EINFÜGEN / BEWEGUNGS-TWEEN ERSTELLEN erreichen. Sobald die Animation eingerichtet ist, öffnet sich der Animation-Inspektor mit weiteren Einstellungen wie z.B. einer automatischen Drehung, die das Objekt während der Animation zusätzlich rotiert. Tweening ist die automatische Berechnung von Zwischenbildern bei Form- und Bewegungsanimationen.
1.2.14
14. Wählen Sie die Schaltfläche ZWIEBELSCHALE direkt unter der Zeitleiste und vergrößern Sie die Ansicht über die gesamte Animation.
Um einen Eindruck von der gesamten Animation zu erhalten bzw. um die Arbeitsweise der Tweening-Funktion zu verstehen, kann man die einzelnen Bilder alle gleichzeitig auf der Bühne sichtbar machen. Diese Ansicht nennt man Zwiebelschalen, weil die Animation wie eine Zwiebel geschält wird und somit ihre einzelnen Hautschichten sichtbar werden.
Flash MX
19
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
1.2.15
15.
Beobachten Sie die Entwicklung der Animation.
1.2.16
16.
Testen Sie den Film über Enter.
Flash MX
20
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Um eine schnellen Eindruck von der geleisteten Arbeit zu bekommen, können Sie entweder über die Eingabetaste oder STEUERUNG / ABSPIELEN eine Animationsvorschau erhalten.
Pixel- und Vektorgrafiken im Vergleich In einer Pixelgrafik (Bitmap) werden Farben in Flächen gespeichert, die in einem Gitternetz untergebracht sind. Dadurch entstehen bei Vergrößerungen Treppeneffekte an Bögen. Vektorgrafiken speichern dagegen Bildinformationen in mathematischen Formeln für Geraden und Kurven. Dadurch können Sie beliebig vergrößert werden, ohne dass Bildmängel auftreten. Typischerweise wirken Pixelgrafiken bei Fotos wesentlich natürlicher, während Vektorgrafiken für geometrische Formen und comicähnliche Strichzeichnungen sehr geeignet sind.
1.3
Die Arbeitsumgebung
Nach der letzten bzw. gleichzeitig auch der ersten Animation haben Sie bereits einige wesentliche Elemente kennen gelernt und wissen, wie Flash Animationen erstellt und welche typischen Schritte (Objekte erstellen, aus ihnen Symbole erzeugen, Animation einrichten) dabei befolgt werden müssen. Daher wird es Ihnen sicherlich leichter fallen, nun kurz Ihre Arbeitsumgebung kennen zu lernen.
1.3.1 Menüleiste Für Benutzer aus der Windows-Welt, die vielleicht zum ersten Mal mit Werkzeugen wie einem Eigenschaften-Inspektor oder Bedienfeldern umgehen, ist es wichtig zu wissen, wo eventuell gesuchte Schaltflächen sich versteckt halten. Nicht alles ist in der Werkzeugleiste untergebracht, sondern z.B. in den kontextsensitiven Inspektor ausgelagert. Im Menü FENSTER logieren sämtliche Bedienfelder, die man nur dort ein- und ausblenden kann.
Menü
Funktion
Datei
•
Neue Datei oder von Vorlage öffnen
•
Möglichkeiten Dateien
•
Exportfunktionen für einzelne Bilder oder ganzen Film
•
Importfunktionen Programmen
Flash MX
zum
für
(Zwischen-)Speichern
Objekte
aus
von
anderen
21
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
•
Druckeinstellungen Druckereinrichtung
•
Liste der letzten Dokumente
•
Zwischenablagefunktionen für einzelne Objekte
•
Zwischenablage für Bilder
•
Programmeinstellungen
•
Navigation innerhalb der Animation
•
Änderungsmöglichkeiten für Größeneinstellungen
•
Lineale, Raster, ausblenden
•
Ansicht von Text und Objekte (Konturen und AntiAlias)
•
Symbole erstellen
•
Schlüsselbilder einfügen und löschen
•
Einfügen von Szenen, Ordnern, Pfaden
•
Einstellungen für Szene, Ebene und Dokument
•
Formänderungen und Ausrichtungen
•
Objekte gruppieren und teilen
•
Nachbearbeiten von importierten Bitmaps
Text
•
Schrift- und Absatzformatierungen
Steuerung
•
Animationsvorschau auf der Bühne oder im Flash Player
•
Abspielmöglichkeiten für einzelne Szene oder ganzen Film
•
Richtungsanweisungen für Wiedergabe
•
Möglichkeiten zum Ein- und Ausschalten von Eigenschaften-Inspektor, Bedienfeldern und Werkzeugleiste
•
Ein- und Ausschalten der Action-Script-Moduls
•
Fenstereinstellungen nebeneinander)
•
Allgemeine Hilfefunktionen
•
Action-Script-Referenz
Bearbeiten
Ansicht
Einfügen
Modifizieren
Fenster
Hilfe
wie
Hilfslinien
Seiten-
einrichten
(überlappend
und
und
vs.
Tabelle 1.1: Die Menüleiste und ihre Einträge
Flash MX
22
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
1.3.2 Objekte im Arbeitsbereich Objekte und Bedienfelder können über unterschiedliche Schaltflächen •
verschoben (punktierte Schaltfläche links oben)
•
geschlossen (Schließen-Schaltfläche rechts oben)
•
reduziert und ausgefahren (weiße Pfeilschaltflächen links neben Titel und ggf. unten rechts) sowie
•
in ihren Eigenschaften oder Funktionen beeinflusst werden (gestrichelte Schaltfläche rechts oben).
Im abgebildeten Fall des FARBMISCHERS bedeutet das u.a., dass das Farbauswahlfenster noch einmal über die rechte untere Schaltfläche verkleinert werden kann, bevor die Schaltflächen komplett verborgen werden. Als weitere Einstellungen kann man z.B. zwischen verschiedenen Farbmodellen wählen oder die Bedienfeldansicht zusätzlich beeinflussen.
Objekt
Bedeutung
Zeitleiste
In der Zeitleiste werden die Animationen in einzelnen Bildern verwaltet. Gleichzeitig erlaubt sie den Zugriff auf die verschiedenen Ebenen innerhalb einer Animation bzw. auf der Bühne. Neue Ebenen können hinzugefügt, andere gelöscht werden.
Bedienfelder
In den Bedienfeldern befinden sich Schaltflächen für Objekt- und Textänderungen.
EigenschaftenInspektor
Der Eigenschaften-Inspektor reagiert kontextsensitiv mit unterschiedlichen Schaltflächen auf aktuell ausgewählte Objekte und lässt ebenfalls Änderungen von z.B. Text oder Animationen zu.
Werkzeugleiste
Auswahl-, Text- und Objektwerkzeuge zum Erstellen und Bearbeiten von Objekten auf der Bühne sowie Farbfelder für Farbänderungen.
Flash MX
23
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Film-Explorer
Der Film-Explorer strukturiert die im Film auftretenden Objekte und Einheiten wie z.B. Schaltflächen oder Szenen in einer hierarchischen Ordnung und ermöglicht darüber schnellen Zugriff auf einzelne Objekte in komplexen Projekten.
Bibliothek
Die Bibliothek verwaltet Symbole, also alle animationsfähigen Objekte und lässt sich durch Ordner strukturieren.
Aktionen
Im Bedienfeld Aktionen lassen sich Action-ScriptProgramme verfassen. Im Gegensatz zu den anderen Bedienfeldern öffnet es eine ganz neue Welt. Es reagiert ebenfalls kontextsensitiv, da sich Aktionen auch einzelnen Objekten zuweisen lassen.
Tabelle 1.2: Objekte in der Arbeitsumgebung Alle Objekte lassen sich über das Menü Fenster ein- und ausblenden. Zusätzlich werden über FENSTER / BEDIENFELDSÄTZE Layouts für verschiedene Benutzergruppen wie beispielsweise Designer oder Entwickler (Programmierer) vorgeschlagen. Da bei größeren Projekten häufig der Bereich Grafik und die Programmierung von interaktiven Elementen personell getrennt werden, werden einzelne Bedienfelder für die jeweils eine oder andere Benutzergruppe unwichtig oder bedeutsam. Wenn Sie sich auch mit ActionScript beschäftigen wollen, werden Sie schnell feststellen, dass phasenweise verschiedene Werkzeuge auf dem Arbeitsplatz an Bedeutung gewinnen und wieder verlieren. Werden z.B. Grafiken standardmäßig in einem anderen Programm entwickelt und über die Import-Funktion wieder eingebunden, was gewisse Bedienfelder vollkommen arbeitslos macht, lässt sich ein individuelles Standardlayout über FENSTER / BEDIENFELDER-LAYOUT SPEICHERN auch als Voreinstellung konfigurieren. Action Script Macromedia stellt zusätzlich eine Skript-Sprache zur Verfügung, deren hauptsächliches Einsatzgebiet darin besteht, Animationen interaktiv zu gestalten. Damit ist es beispielweise möglich, auf Benutzereingaben zu reagieren und komplette Programmstrukturen zu erstellen. Ein weiteres Einsatzfeld erschließt sich, wenn ActionScript z.B. für zufallsgenerierte Ereignisse in Animationen eingearbeitet wird. Quelltext kann entweder im so genannten Normalmodus über Schaltflächen (Bedienfeld AKTIONEN) eingerichtet oder im Expertenmodus direkt über die Tastatur eingegeben werden. Grundzüge dieses beeindruckenden Hilfsmittels lernen Sie auch im Rahmen dieses Trainings kennen.
1.4
Bühne einrichten
Das schillernde Panoptikum des WWW mit seinen Auswüchsen wie Bannern, Menüs und Filmen lässt sich selbstverständlich in Flash nicht auf einen einfachen Arbeitsbereich oder Hintergrund reduzieren. Was Sie bei Programmstart also in blütenreinem Weiß begrüßt, stellt die so genannte Bühne dar. Dies ist nicht nur eine sprachlich andere Bezeichnung, um mit der programmeigenen Grundmetapher Film dieses notwendige Werkzeug zu klassifizieren. Vielmehr entspricht sie ja auch der Funktion des Arbeitsbereichs, weil durch das Markieren einzelner Bilder in der Zeitleiste verschiedene Zustände der Animation auf der Bühne sichtbar gemacht werden können. Durch den
Flash MX
24
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Einbezug der vierten Dimension ist es also mit steigender Komplexität (und vermutlich auch Unterhaltungswert) einer Animation nicht mehr wie in einem statischen Grafikprogramm so simpel, Ausrichtungen und Platzierungen von Schauspielern auf der Bühne per Augenmaß zu koordinieren. Daher verfügt natürlich auch Flash über Lineale, Hilfslinien und ein Gitternetz, um Ihre Regieanweisungen beflissen in konkrete Pixelwerte zu übertragen. Wir möchten Ihnen den intensiven Gebrauch dieser Hilfsmittel ans Herz legen, um Schwierigkeiten wie unschöne Objektverteilung, nicht perfekt anschließende Objekte oder plötzliches Springen von Objekten bei Benutzeraktionen zu vermeiden. Nichts ist in diesem Zusammenhang unangenehmer, als wenn man nachträglich gezwungen ist, in jedem Schlüsselbild Positionsänderungen durchzuführen, die man sich vorher mit passenden Hilfslinien hätte ersparen können. Setzen Sie Raster und Hilfslinien ein, um ruckelnde Übergänge zwischen Schlüsselbildern zu vermeiden.
1.4.1 Lineale, Gitternetz, Hilfslinien einrichten Das Ergebnis dieses Abschnitts finden Sie in zeit1.fla
1.4.2
1.
Wählen Sie ANSICHT / LINEALE.
Die Lineale starten in der linken oberen Ecke des Arbeitsbereichs bei negativen Werten, da die Bühne bei Programmstart nicht vollständig den gesamten Bildschirm ausfüllt. Der Koordinatenursprung liegt dann natürlich in der linken oberen Ecke der Bühne.
1.4.3
2.
Öffnen Sie mit FENSTER / INFO das Informationsbedienfeld.
1.4.4
3.
Vergleichen Sie Mausbewegung und Positionsangabe im Bedienfeld INFO.
Zur genauen Positionierung mit der Maus ohne weitere Werkzeuge können Sie also für eine Groborientierung die Lineale und dann für eine Feinjustierung die Einträge im Bedienfeld INFO
Flash MX
25
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
verwenden. Es informiert zusätzlich bei Objekten über Ihre Ausdehnung und ihre Position. Über linke obere Ecke und den Mittelpunkt können entsprechende Koordinaten abgerufen werden. Standardmäßig ist immer die linke obere Ecke ausgewählt (im Bild nicht aktiv). 1.4.5
4.
Wählen Sie ANSICHT / RASTER / RASTER EINBLENDEN.
Das Raster dient dazu, ein gleichmäßiges Koordinatensystem über die Bühne zu legen.
1.4.6
5.
Wählen Sie ANSICHT / RASTER / AM RASTER AUSRICHTEN.
Dies ist die so genannte magnetische Einstellung des Rasters. Pixelgenaue Ausrichtung mit Maus oder Tastatur ist ja letztendlich nur bei sehr hoher Vergrößerung wirklich sicher einzurichten, sodass letztendlich ein Unsicherheitsfaktor bleiben würde. Den können Sie mit dieser Einstellung getrost unberücksichtigt lassen, weil die jeweils nächste Gitternetzlinie an einem Objekt dasselbe gleichsam magnetisch zu sich zieht. Wenn Sie diese Einstellung bereits aus anderen Grafikprogrammen kennen, wissen Sie natürlich, dass diese Eigenschaften bei sehr feiner Auflösung oder gerade dann, wenn man absichtlich nicht im Gitter ausrichten möchte, störend wirken kann. Mit diesem Befehl können Sie die Eigenschaft auch wieder (für diesen besonderen Arbeitsschritt) blockieren. 1.4.7
6.
Wählen Sie ANSICHT / RASTER / GITTERNETZ BEARBEITEN.
Dieses kleine Dialogfenster verwaltet alle Einstellungen für die Benutzung des Gitternetzes. Standardmäßig ist die Breite von 18 Pixel und die Farbe auf Grau eingestellt, was sie über die Textfelder und die übliche Farbauswahl ändern können. In diesem Fall reduzieren wir nur die Spannweite auf jeweils 10 Pixel, um feinere Maschen zu erhalten. Die Gitternetzspannweite können Sie auch in anderen Maßeinheiten (z.B. cm) eintragen. Sie werden mit Klicken der OKSchaltfläche in Pixel umgerechnet.
Flash MX
26
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Speichern Sie ein für Sie nützliches Gitternetz als Standard über STANDARD SPEICHERN ab.
1.4.8
7.
Bestätigen Sie die Änderungen mit der OK-Schaltfläche.
1.4.9
8.
Wählen Sie ANSICHT / HILFSLINIEN / HILFSLINIEN ANZEIGEN.
Zusätzlich oder auch als einzige Positionierungshilfe können Sie Hilfslinien in die Bühne ziehen, die mit gleichen Eigenschaften für die Ausrichtung ausgestattet sind wie das Gitternetz. Ihr Vorteil liegt darin, dass mit ihnen Bühnenbereiche genau abgegrenzt werden können. Normalerweise ist standardmäßig die Hilfslinienanzeige aktiv, aber über diesen Menüpunkt können Sie sich dessen noch einmal vergewissern.
1.4.10
9.
Wählen Sie ANSICHT / HILFSLINIEN / AN HILFSLINIEN AUSRICHTEN.
Wie das Raster, so besitzen auch die Hilfslinien eine magnetische Eigenschaft.
Flash MX
27
GRUNDLAGEN
1.4.11
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
10. Klicken Sie auf das obere Lineal und ziehen Sie mit gedrückter linker Maustaste eine Hilfslinie nach (0, 200).
Die Position von Hilfslinien kann nicht über Textfelder vorgegeben werden.
1.4.12
11. Klicken Sie auf das linke Lineal und ziehen Sie mit gedrückter linker Maustaste eine Hilfslinie nach (100, 0).
1.4.13
12.
Wählen Sie ANSICHT / HILFSLINIEN / HILFSLINIEN SPERREN.
Eine gelungene Eigenschaft ist, dass die Hilfslinien immer problemlos mit der Maus verschoben werden können – bis man durch Zufall statt ein Objekt die allerwichtigste Hilfslinie verschiebt. Um nach vollbrachter Planungs- und Logistikarbeit diese nicht im kreativen Chaos versinken zu lassen, können die Hilfslinien in ihrer Bearbeitung gesperrt werden. Wenn Sie dann doch eine Hilfslinie verschieben wollen, deaktivieren Sie einfach diese Einstellung. Sperren Sie Hilfslinien, um sie vor ungewollten Änderungen zu schützen.
1.4.14
13.
Wählen Sie ANSICHT / HILFSLINIEN / HILFSLINIEN BEARBEITEN.
In diesem Dialogfenster können Sie sämtliche Eigenschaften verändern, so wie Sie dies bereits für das Gitternetz gemacht haben. Da wir in diesem Beispiel beide Möglichkeiten verwenden, sollten die Hilfslinien in jedem Fall in einer andere Farbe (vielleicht ein frisches Grün) dargestellt werden. Wie Sie sehen, können Sie auch die anderen beiden Eigenschaften in den mittleren Kontrollkästchen aufrufen.
Flash MX
28
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
1.4.15 Hilfslinien und Gitter verwenden 1.4.16
1. Erstellen Sie linksbündig den Text Die Zeit spielt mit in drei Absätzen beim Punkt (200, 100)
Das Ergebnis dieses Abschnitts finden Sie in zeit2.fla
1.4.17
2. Fügen Sie in einem neuen Schlüsselbild bei 10 den gleichen Text beim Punkt (200, 100) rechtsbündig ein
1.4.18
3. Fügen Sie in einem neuen Schlüsselbild bei 20 den gleichen Text in einem einzigen Absatz rechts oberhalb von (200, 100) ein
Für diesen Punkt benötigen Sie im Bedienfeld INFO die Koordinaten (200, 48),wenn von der linken oberen Ecke aus gezählt wird.
Flash MX
29
GRUNDLAGEN
1.4.19
4.
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Fügen Sie Bewegungs-Tweens ein
Kompatibilität zur Vorgängerversion In der Übergangsphase des Umstiegs der Version 5 zur Version MX sollten Sie beachten, dass einmal unter MX gespeicherte Daten nicht mehr in der Version 5 geöffnet werden können. Darüber werden Sie mit Hilfe des gezeigten Dialogfensters in Kenntnis gesetzt.
Flash MX
30
GRUNDLAGEN
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
Abbildung 1.1:
1.5
Testen Sie Ihr Wissen!
Worin unterscheiden sich Pixel- und Vektorgrafiken Wie hilft Flash bei Form- und Bewegungsanimationen? Welche Technik oder welche Grundüberlegung stand Pate für die Konzeption des Programms? Wo befinden sich die Einzelbilder einer Animation? Müssen Sie bei einem hüpfenden Ball diesen Ball für hundert Bilder hundert Mal zeichnen oder über die Zwischenablage einfügen? Gibt es eine Möglichkeit, sich mehr als nur ein Zwischenbild einer Animation anzuschauen, um den Bewegungsablauf zu studieren? Wie erzeugen Sie Anfang und Ende einer Animation oder wichtige Zwischenstationen?
Flash MX
31
GRUNDLAGEN
Flash MX
DER
ANIMATION
UND DER
PROGRAMMOBERFLÄCHE
32
ZEICHNUNGEN
2 Zeichnungen erstellen
Flash MX
MIT
FORMEN
mit
UND
PFADEN
Formen
ERSTELLEN
und
Pfaden
33
ZEICHNUNGEN
Flash MX
MIT
FORMEN
UND
PFADEN
ERSTELLEN
34
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Zeichnungen mit Formen und Pfaden erstellen Flash bietet für die meisten einfachen Anwendungsfälle eine Vielzahl an Möglichkeiten, Hintergründe, Szenerien und komplexe Zeichenobjekte mit programmeigenen Mitteln zu erschaffen. Je umfangreicher die benötigten Hintergründe gerade im Filmbereich werden, desto notwendiger wird der Import von in anderen Programmen erstellten Vorlagen. Auf diese Möglichkeiten wird in späteren Projekten eingegangen, denn jetzt gilt es zunächst einmal, die in Flash vorhandenen Zeichen- und Änderungsmöglichkeiten auszunutzen. In diesem Projekt kreieren Sie auf der Basis von Rechtecken und Ellipsen einen Himmel, eine Wiese und einen Baum, greifen dann für weiche Wolken zum Zeichenstift und verleihen dieser Kinderzeichnung mit Farbverläufen Tiefenwirkung. Dabei greifen Sie auf fast alle Zeichen- und Änderungswerkzeuge zurück.
2.1
Von geometrischen Grundformen ausgehen
In dieser Lektion erstellen Sie eine Vorlage für eine Animation, die verschiedene Objekte wie einen Hintergrund (Wiese und Himmel), einen Baum (mit Stamm, Fuß und Krone) und Wolken verwendet. Zunächst werden mit verschiedenen Techniken wie programmeigenen geometrischen Formen oder dem Zeichenstift die Objekte erstellt, bevor sie in weiteren Abschnitten durch eine Gruppierung zusammengefügt und schließlich eingefärbt werden.
2.1.1 Ebenen erstellen und verwalten Wie bei der Zeichentrickfilmproduktion benutzt man in Flash die Folientechnik, um einen Film zu komponieren. Ausgehend von einem für eine gewisse Zeit (Szene, Einstellung) statischen Hintergrund legt man Elemente, Mit Ebenen werden Objekte angeordnet. Sie lassen sich mit transparenten Folien vergleichen.
•
die im Laufe des Films auftauchen (zeitlicher Bezug)
•
oder sich zu komplexen Objekten zusammenfügen (inhaltlicher Bezug)
•
oder animiert werden (räumlicher und förmlicher Bezug)
über diese Hintergrundebene. Damit ist auch der entscheidende technische Begriff bereits gefallen: Objekte werden wie auf transparenten Folien mit Hilfe von Ebenen übereinander gelegt. Im Ebenenfenster kann man sie mit aussagekräftigen Namen versehen, anordnen und übersichtlich verwalten. Durch die Anordnung der Ebenen (voreinander, hintereinander) werden räumliche Effekte erzeugt. So liegt z.B. die Hintergrundebene immer zuunterst im Folienstapel, da sich vor ihr die gesamte Handlung abspielt.
Flash MX
35
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Organisation von Objekten Flash stellt unterschiedliche Möglichkeiten bereit, um Objekte zu organisieren. Dabei fungieren Ebenen als grobe Vorstruktur gemäß den oben genannten zeitlichen, inhaltlichen und räumlich/förmlichen Bezügen, die Objekte zueinander haben können. Generiert man aus geometrischen Grundformen komplexe Formen, schließt man die Arbeit normalerweise zusätzlich mit einer Gruppierung ab, in der die einzelnen Formelemente zusammengefasst werden. Animierbare Objekte sind nur Symbole, die in der Bibliothek gespeichert und dort nachträglich bearbeitet oder unmittelbar erzeugt werden können. In der Bibliothek kann man darüber hinaus in einer selbst definierten Ordnerhierarchie einzelne Objekte nach beliebigen Kriterien zusammenfassen. Auf der Ebene der Symbole unterscheidet man die bereits bekannten Grafiken sowie zwei weitere Typen: Schaltflächen und Movieclips. Schaltflächen weisen bereits Zustände für Mausereignisse (darüber, gedrückt, normal und aktiver Bereich) auf, die in vier Schlüsselbildern geändert werden können. Movieclips (Filmsequenzen) dagegen haben eine eigene Zeitleiste, die sich von der Hauptzeitleiste der Szene oder des Films unterscheiden kann. Innerhalb aller drei Symboltypen können wiederum Ebenen eingerichtet werden, um Formen zu entwickeln.
2.1.2
1. Erstellen Sie einen Filmhintergrund der Größe 400x300 Pixel und mit #0099FF eingefärbt.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken1.fla.
2.1.3
2. Doppelklicken Sie neben der Zeitleiste den Eintrag EBENE 1 und benennen Sie ihn um in Himmel / Wiese.
2.1.4
3.
Erstellen Sie mit der Schaltfläche EBENE EINFÜGEN eine Ebene namens Wolken.
Alternativ können Sie auch über das Menü EINFÜGEN mit EINFÜGEN / EBENE neue Ebenen, Pfade oder Ordner erstellen.
Flash MX
36
ZEICHNUNGEN
2.1.5
4.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Erstellen Sie eine Ebene namens Baum.
Über MODIFIZIEREN / EBENE oder mit Hilfe des Kontextmenü der neu eingefügten Ebene und EIGENSCHAFTEN gelangen Sie in das Dialogfeld EBENENEIGENSCHAFTEN, in dem Sie ebenfalls sämtliche Änderungen, die Ebenen betreffen, vornehmen können.
2.1.6
5.
Sperren Sie die Ebenen BAUM und WOLKEN.
Zunächst soll nur der Hintergrund erstellt werden. Eine fälschliche Bearbeitung einer anderen Ebene kann am leichtesten durch eine Sperrung ausgeschlossen werden.
Flash MX
37
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Bereits gefüllten Ebenen können Sie zusätzlich auch über das Augen-Symbol ausblenden.
2.1.7 Objekte erstellen In diesem Abschnitt erstellen Sie zunächst die Objekte mit grundlegender Einfärbung (Baumstamm in brauner Farbe, Wiese in Grün usw.), wobei weitere Farbeinstellungen in einem eigenen Abschnitt folgen werden. In Flash können Sie Objekte aus elementaren geometrischen Grundformen wie Rechtecke und Kreise oder auch mit Hilfe eines Zeichenstifts erstellen. Dazu kommen verschiedene Möglichkeiten, gerade Linien in diversen Linienarten zu ziehen. Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken2.fla.
2.1.8
1.
Wählen Sie die Ebene HIMMEL / WIESE aus.
2.1.9
2.
Wählen Sie für Füllfarbe und Zeichenfarbe die grüne Farbe #00FF33 aus.
In Vektorgrafiken unterscheidet man zwischen Rand- und Füllfarbe.
2.1.10
3. Erstellen Sie ein grünes Rechteck über die gesamte Breite ab (0, 220) über die gesamte Breite.
Verwenden Sie dazu das Rechteckwerkzeug aus der Werkzeugleiste.
Flash MX
38
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
2.1.11
4.
Entsperren Sie die Ebene BAUM und wählen Sie aus.
2.1.12
5.
Fügen Sie in diese Ebene (60, 140) bis (80, 240) ein Rechteck (den Baumstamm) ein.
2.1.13
6.
Markieren Sie das Rechteck durch einen Klick.
Da Flash ein Vektorgrafikprogramm ist, wird zwischen Füllung und Kontur bzw. Rand eines Objekts unterschieden. Man kann demnach verschiedene Objektbereiche gemäß folgendem Schema auswählen: Doppelklick auf ein Objekt wählt Rand und Füllung aus.
Klick
markierter Bereich
einmal auf den Rand
Teistück des Randbereichs
doppelt auf den Rand
gesamter Randbereich
Flash MX
Beispiel
39
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
einmal in die Füllfläche Füllfläche
doppelt in die Füllfläche
Füllfläche und Randbereich
Tabelle 2.1: Auswahlbereiche und Mausaktionen für die Auswahl 2.1.14
7.
Wählen Sie für Füllfarbe und Zeichenfarbe #663300 (Braun) aus.
Durch diese Reihenfolge wird dem markierten Objekt die gewählte Farbe zugewiesen. Dies ist eine Alternative zu der in Schritt 14 gezeigten Methode über das Farbeimerwerkzeug. 2.1.15
8.
Klicken Sie neben den Baumstamm, um die Markierung aufzuheben.
2.1.16
9.
Wählen Sie die für Füllfarbe und Zeichenfarbe erneut #00FF33 aus.
Dies ist die Reihenfolge, wenn man zunächst eine Farbe auswählen möchte, um dann Objekte in der gewünschten Farbe zu erstellen. 2.1.17
10.
Erstellen Sie mehrere Ellipsen für die Baumkrone.
Bei einer solchen Baumkonstruktion ist wichtig, dass die runde Form der Baumkrone nur durch die Ellipsenkreise angenähert wird. Vollkommen stilisiert wäre ein einfacher Kreis.
Flash MX
40
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolke3.fla.
2.1.18
11.
Wählen Sie als Zeichenfarbe und Füllfarbe WEIß aus.
2.1.19
12.
Wählen Sie das Stiftwerkzeug aus.
2.1.20
13.
Wählen Sie bei den Optionen GLÄTTEN aus.
Nicht bei allen Werkzeugen gibt es zusätzliche Optionen.
2.1.21
14.
Zeichnen Sie Wolken.
Sollten Sie – wie wir – das Naturphänomen von messerscharfen Wolkenkanten auf dem Bildschirm sehen, verzagen Sie nicht: Wir befinden uns in der Vektorgrafikwelt mit Tricks und Kniffen, die gleich aus Berner Bügelfaltenwolken Schleswiger Schäfchenwolken machen können.
Flash MX
41
ZEICHNUNGEN
2.1.22
15.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Füllen Sie mit dem Farbeimerwerkzeug die Wolken auf.
Dies ist die Alternative zu der in Schritt 7 gezeigten Methode über die Auswahl. Dabei müssen Sie lediglich mit dem Farbeimerwerkzeug in jede Form klicken.
2.2
Form und Farbe verändern
Auch die Möglichkeiten, einmal gezeichnete Objekte in ihrem Aussehen oder ihrer Form nachträglich zu verändern, dürften Ihnen vermutlich aus anderen Grafikprogrammen bekannt erscheinen. Es gibt Möglichkeiten zur Skalierung genauso wie zur Farbveränderung. Interessant ist hier erneut, dass wie in jedem Vektorgrafikprogramm zwischen Rand und Füllung unterschieden wird und beide Objektbereiche z.B. farblich unabhängig voneinander geändert werden können.
2.2.1 Formänderungen über Pfadpunkte bewirken 2.2.2
1.
Wählen Sie die Ebene BAUM aus.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken4.fla.
2.2.3
2.
Wählen Sie MODIFIZIEREN / FORM / ECKEN ABRUNDEN.
Der Baumstamm sieht noch ein bisschen zu sehr so aus, als hätte man zu seiner Pflanzung ein Rechteck verwendet oder als sei er direkt von Schloss Versailles in die Animation übertragen worden. Also sollte er ein wenig abgerundete Ecken erhalten.
Flash MX
42
ZEICHNUNGEN
2.2.4
MIT
FORMEN
UND
PFADEN
ERSTELLEN
3. Wählen Sie als Breite 8 Pixel, geben Sie als ANZAHL DER SCHRITTE den Wert 1 ein und wählen Sie die Richtung VERGRÖßERN aus.
Über die Breiteneinstellung wird die zusätzliche Fläche des Objekts angesprochen, wobei natürlich zwangsläufig gilt, dass mit steigender Breite auch die Rundung zunimmt und deutlicher wird. Möchte man eine Farbmischung mit dem Hintergrund erzeugen, sollte man eine hohe Schrittzahl auswählen, da dann das Verfahren iterativ nacheinander angewandt wird. Die Richtungswahl bestimmt, ob die eingetragenen Pixel an das Objekt angefügt werden (Vergrößerung) oder ob der Rand vom aktuellen Objektrand abgezogen wird (Verkleinerung). Im Falle des Baums ist es wohl besser, ihn nicht noch um 16 Pixel zu schmälern, sondern die Last der Baumkrone auf mehr Pixel als bisher zu verteilen.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken5.fla.
2.2.5
4.
Wählen Sie in der Ebene WOLKEN die erste Wolke durch Doppelklick aus.
2.2.6
5. Verändern Sie auch diese Form mit 5 Pixel Breite, 5 Anwendungsschritten und der Richtung VERKLEINERN.
Damit die Wolken nicht wie gemeißelt am Himmel stehen, sondern ein wenig wattiert erscheinen – wie es sich für solch schöne Wolken gehört -, sind hier mehr als ein Anwendungsschritt nötig, um einen leichten Übergang zum Himmelsblau zu erreichen. Damit die eventuell von Ihnen penibel gezeichneten und filigranen Ausbuchtungen nicht durch eine Vergrößerung verschwinden, ist die Richtung VERKLEINERUNG hier genau richtig.
Flash MX
43
ZEICHNUNGEN
2.2.7
6.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Verändern Sie auch die anderen Wolken nach diesem Muster.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken6.fla.
2.2.8
7. Führen Sie den Mauszeiger zum Rand der Baumkrone und verändern Sie die Kurvenform.
Möglicherweise haben Sie einen grünen Daumen oder eine grüne Maus, sodass Sie eine wohlgeformte Baumkrone besitzen, während unsere nur auf der linken Seite relativ natürlich wirkt. Rechts oben ragt dagegen ein großes Bogenstück einer Ellipse heraus. Um dieses Bogenstück verschwinden zu lassen, ist man versucht, weitere Ellipsen einzufügen. Dieser Trick könnte aber bei schlechter Planung schnell dazu führen, dass wie bei einem zu kurzen Tischbein eine Verschlimmbesserung der nächsten folgt - wenn auch in umgekehrter Richtung. Schneidet in der Geschichte der Heimbastler die drei anderen Tischbeine immer zu kurz, so könnte der Baum hier immer mehr an Blattwerk gewinnen. Also zeigen wir Ihnen lieber, wie Sie direkt (wozu arbeiten wir schon mit einem Vektorgrafikprogramm?) auf den Pfad zugreifen. Sobald der Mauszeiger einen Viertelkreis unten rechts anzeigt, können Sie die Linie verformen. Erhalten Sie dagegen einen rechten Winkel, ergibt sich die Situation in Schritt 10: Eckpunkte entstehen, und Sie können diese verschieben.
2.2.9
8.
Verfahren Sie ebenso an den Wurzeln.
Sehr realistisch wirkte auch der abgerundete Baumfuß nicht, sodass man nun dank der runden Form und der zwei eingefügten Pfadpunkte zwei Wurzeln zur Seite ziehen kann. So entsteht dann viel eher der Eindruck, es handele sich um einen natürlich gewachsenen Baum in unberührter Flora.
Flash MX
44
ZEICHNUNGEN
2.2.10
9.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Bringen Sie nun die gesamte Baumkrone in eine natürliche Form.
Sollten Sie jetzt das Ergebnis der sehr einfachen Ellipsenmethode gar nicht mehr leiden könnten, sollten Sie mit dieser Technik die gesamte Baumkrone überarbeiten.
2.2.11 Mehrere Objekte durch Gruppierung zusammenfassen Wenn man ein komplexes Objekt aus verschiedenen Einzelobjekten konstruiert, möchte man typischerweise den Zusammenhalt der Objekte nicht durch einen zufällig ausgeführten Mausklick wieder auseinanderreißen. Ein solches Objekt stellt der Baum dar, der aus mehreren Einzelobjekten besteht. Interessant ist eine Gruppierung dann, wenn Änderungen (wie z.B. der Farbverlauf in einem der nächsten Abschnitte) auf sämtliche Objekte angewendet werden sollen. Gerade bei einem Farbverlauf ist es ja nicht interessant, dass sieben Ellipsen eine Schattierung haben, und man damit wieder sieht, wie simpel die Baumkrone konstruiert wurde, sondern dass die Baumkrone als Ganzes eine passende Schattierung erhält. Gruppierung ist die Zusammenfassung mehrerer Einzelobjekte zu einem einzigen.
2.2.12
1. Doppelklicken Sie mit gedrückter Umschalt-Taste die einzelnen Ellipsen der Baumkrone und den Baumstamm.
2.2.13 2.
Erzeugen Sie eine Gruppe mit Strg+G.
Elemente, die zu einer Gruppe zusammengefasst werden, müssen in derselben Ebene liegen. Alternativ können Sie auch den Menübefehl MODIFIZIEREN / GRUPPIEREN verwenden.
Flash MX
45
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei dimension7.fla.
2.2.14
3.
Wählen Sie die Gruppe durch Doppelklick aus.
Wenn Sie nur einen einfachen Klick ausführen, wird eine Gruppe immer durch einen blauen Rand dargestellt. Damit befindet man sich aber noch nicht im Bearbeitungsmodus für Gruppen. Diesen müssen Sie durch Doppelklick aufrufen. Hier wird kein Rahmen angezeigt, sondern die Farben der nicht gruppierten Bereiche werden stark aufgehellt. Wird eine Gruppe in diesem Modus angezeigt, lässt sie sich auch nachträglich bearbeiten. 2.2.15
4.
Markieren Sie die Ellipsen der Baumkrone durch Doppelklick und gedrückter
Umschalt-Taste. 2.2.16
5.
Wählen Sie erneut Strg+G aus.
Nun entsteht ein blauer Rahmen um die Baumkrone, die damit eine Untergruppe darstellt.
Verwenden Sie die Schaltfläche GRUPPE oberhalb der Bühne zur Navigation.
2.2.17
6.
Wählen Sie das Radiergummiwerkzeug mit den Optionen WASSERHAHN und LINIEN aus.
RADIEREN
Um die einzelnen Ellipsen innerhalb der untergeordneten Gruppe miteinander zu verschmelzen, müssen noch die Vektorinformationen ihrer Ränder, die sich innerhalb der Baumkrone befinden, entfernt werden. Würde man den einzelnen Ellipsen wie im nächsten Abschnitt jeweils den Farbverlauf zuweisen, wäre das ein schönes Tohuwabohu. Wenn Sie die gesamte Fläche ausfüllen, würde nur wieder sichtbar werden, dass die Krone aus einzelnen Objekten zusammengesetzt ist. Sie sehen: die Fallstricke sind reich gesät und drohen den Entwickler in den Abgrund der lachenden Öffentlichkeit zu reißen. Die Option WASSERHAHN sorgt dafür, dass im gesamten Bereich (Gruppe) gelöscht wird, als gösse man einen Eimer Wasser über ein frisch gemaltes Bild, während die Option LINIEN RADIEREN dafür Sorge trägt, dass nur die Linien innerhalb der Gruppe entfernt werden. Man möchte ja nicht zusätzlich die Füllungen entfernen und damit die Baumkrone durchlöchern. Sollten Sie die falschen Einstellungen verwenden, werden Sie rasch durch den durchscheinenden Himmel darauf aufmerksam gemacht.
Flash MX
46
ZEICHNUNGEN
2.2.18
7.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Klicken Sie in die Baumkrone, um die Linien zu löschen.
Das Ergebnis ist eine Baumkrone, die nun ein einziges Objekt darstellt und zusätzlich unabhängig vom Baumstamm – obschon in der gleichen Ebene und in der gleichen Gruppierung – bearbeitet werden kann. 2.2.19
8. Um die Gruppe zu verlassen, klicken Sie auf den Eintrag SZENE1 oberhalb der Zeitleiste.
2.2.20 Farbverläufe erstellen Viel angenehmer und weniger einer Kinderzeichnung ähnlich ist ein Farbverlauf. Er schafft auch ein klein wenig Dreidimensionalität und Schatten in einer solchen Zeichnung. Um einen passenden Farbverlauf – z.B. von einem helleren zu einem dunkleren Grün – auf die Baumkrone anzuwenden, musste sie zunächst gruppiert werden. Das haben wir zum Glück schon erledigt, sodass wir uns jetzt ganz der farblichen Gestaltung widmen können. Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken8.fla bzw. in wolken9.fla.
2.2.21
1. Wählen Sie FENSTER / FARBTÖNE und klicken Sie im Bedienfeld unten rechts auf den Weiß-Schwarz-Farbverlauf.
Sobald Sie einen Farbverlauf auswählen, springen im Farbmischer die entsprechenden Einstellungen auf. Evtl. müssen Sie dafür vorher noch mit FENSTER / FARBMISCHER dieses Bedienfelder öffnen. Alternativ können Sie auch direkt im Auswahlmenü im Farbmischer einen Farbverlauf (linear, radial oder sogar eine Grafik über BITMAP) auswählen.
Flash MX
47
ZEICHNUNGEN
2.2.22
MIT
FORMEN
UND
PFADEN
ERSTELLEN
2. Erstellen Sie einen Farbverlauf von #33FF00 (Wiesengrün) nach #006600 (Blattgrün) für die Baumkrone und die Wiese.
Wie Sie sehen, gibt es verschiedene Möglichkeiten für Farbverläufe. Man kann einen Farbverlauf über beliebig viele Farben (theoretisch) erstellen. Im Dialogfenster muss man zunächst auf einen der beiden Farbeimer klicken, der dann leicht eingeschwärzt wird, dann eine Farbe auswählen. Einen neuen Farbeimer erstellen Sie mit einem Klick auf die Vorschauschiene. Möchten Sie ihn wieder löschen, ziehen Sie ihn wieder von der Vorschauschiene. Da die Farbe von Hellgrün nach Dunkelgrün verlaufen soll, muss in diesem Fall die hellere Farbe auf der linken Seite eingetragen sein. Der Einfärbevorgang erfolgt dann erneut mit dem Farbeimerwerkzeug.
2.3
Objekte duplizieren, transformieren und ausrichten
Zeichnungen gelingen Ihnen mit diesen Grundtechniken sicherlich auch dann, wenn Sie keine Zeichenausbildung haben (ein Grund für unsere Begeisterung für solche Hilfsmittel...). Vielleicht
Flash MX
48
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
haben Sie sich aber auch schon missmutig gefragt, was es wohl für ein Aufwand wäre, einen ganzen Wald zu konstruieren, wenn der erste Baum doch vielleicht ein wenig arbeitsintensiv erschien. Andere Schöpfer sollen derartige Aufgabe ja an einem einzigen Tag erledigt haben... Abgesehen von der Möglichkeit, aus diesem Baum ein Symbol zu erstellen und es über die so genannte Bibliothek mehrfach zu verwenden, erlaubt es Flash natürlich auch, Objekte mit wenigen Befehlen zu duplizieren. Damit es dann nicht so auffällt, dass man für unberührte Natur rein technisches „Kopieren+Einfügen“ verwendet hat, kann man über Größenänderungen oder Spiegelungen versuchen, den Bäumen ein individuelleres Profil zu verleihen.
2.3.1 Doppelgänger von Objekten erzeugen 2.3.2
1.
Klicken Sie doppelt auf den Baum.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken10.fla.
2.3.3
2.
Wählen Sie BEARBEITEN / DUPLIZIEREN.
Alternativ können Sie auch die Tastenkombination Strg+D verwenden. 2.3.4
3.
Verschieben Sie den Doppelgänger des Baums ein wenig.
Vielleicht ist es schon passiert, dass Sie das überlappende Stück des Objekts der darunter liegenden Ebene ausgeschnitten haben, wenn Sie ein Objekt verschoben haben. Hier kann dies auch passieren, sobald Sie vor dem Verschieben erst auf einen andere Bildbereich klicken und damit die Markierung des Doppelgängers verlassen. Verschieben Sie den Doppelgänger, bevor Sie die Markierung aufgeben. Sie schneiden sonst die darunter liegende Bildfläche aus.
2.3.5
4.
Erzeugen Sie drei weitere Bäume mit Strg+D.
Wichtig ist eine Verteilung hier noch nicht. Es reicht, wenn ein Gebilde entsteht, das man auch in Zeiten der Gentechnologie nicht mit „Baumfabrik“, sondern mit „Baumgruppe“ bezeichnen würde.
Flash MX
49
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Die neuen Objekte werden ebenfalls in die Gruppierung des bestehenden Objekts aufgenommen.
2.3.6 Objekte pixelgenau ohne Hilfslinien ausrichten Für die Fälle, dass nicht eine natürlich wachsende Baumgruppe als Schauspieler in einem Werbebanner für unberührte Landschaften und laue Sommerabende auftreten soll, sondern vielmehr ostdeutsche Herrschaftlichkeit alter Alleen in Sommerfrische animiert werden muss, gibt es ein umfangreiches Ausrichtungswerkzeug. Es ersetzt für typische Fälle wie Schaltflächen, Textfelder oder andere Formularelemente den Einsatz von Hilfslinien. Anstatt nämlich horizontal und vertikal Ausrichtungsmanöver mit der Maus und magnetischen Linien zu koordinieren – dies könnte nämlich tatsächlich für vier kleine Buttons zu viel Planungsaufwand sein -, genügen folgende Schritte: Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken11.fla bzw. wolken12.fla.
2.3.7
1.
Öffnen Sie wolken9.fla.
2.3.8
2. Bringen Sie einen duplizieren Baum in eine Anfangs- und einen zweiten in eine Endposition.
Die Ausrichtungsfunktion richtet die Objekte später genau zwischen diesen beiden Elementen aus. 2.3.9
3.
Erzeugen Sie weitere Bäume, ohne sie bewusst auszurichten.
2.3.10
4.
Markieren Sie sämtliche Bäume mit einem Rahmen.
Die unbeeindruckt auf der Wiese thronende Baumgruppe lässt sich freilich einfach mit einem Rahmen auswählen, weil die auszurichtenden Objekte eng beieinander liegen – typisch für eine Baumgruppe. Achten Sie darauf, dass nur die Ebene zur Bearbeitung freigegeben ist, die Sie auch bearbeiten wollen. Ist beispielsweise die Ebene HIMMEL / WIESE nicht gesperrt, markieren Sie mit der Rahmenmethode zwangsläufig auch einen Teil der Wiese oder verschieben die in diese Ebene angesiedelten Objekte. Hätten wir aber einzelne, versprengte Kakteen in der Sahara gezeichnet, könnte man sie ungeachtet der Stacheln mit gedrückter Umschalt-Taste doppelklicken, um sie in eine gemeinsame Auswahl aufzunehmen.
Flash MX
50
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Eine Auswahl heben Sie mit BEARBEITEN / AUSWAHL AUFHEBEN auf.
2.3.11
5. Öffnen Sie das AUSRICHTEN-Bedienfeld über die AUSRICHTEN-Schaltfläche auf der Symbolleiste.
Wie Sie feststellen, sind die Möglichkeiten sehr umfangreich und von der jeweiligen Situation abhängig. Eine globale Einstellung finden Sie in der Schaltfläche AN BÜHNE, die die Ausrichtungsfunktion so beeinflusst, dass nun die Bühnenbegrenzung als Anhaltspunkt für die Ausrichtung verwendet wird.
2.3.12
6.
Wählen Sie HORIZONTAL AUFGETEILT.
Wenn Sie die Bäume wie in der Datei wolken16.fla verteilt haben, werden die Bäume nun in der Horizontalen in einem gleichen Abstand zueinander aufgeteilt, wobei sie sich aber dennoch
Flash MX
51
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
überschneiden und nicht auf einer Linie stehen. Eine andere Möglichkeit bietet die Schaltfläche VERTIKAL AUFGETEILT, die die Objekte übereinander anordnet. Bei der Ausrichtung können Sie auch automatisch Größenveränderungen vornehmen lassen, um den Objekten gleiche Ausdehnungen zuzuweisen.
2.3.13
7.
Wählen Sie alternativ über das Menü MODIFIZIEREN / AUSRICHTEN / UNTERKANTE.
Alternativ können Sie auch die Einträge im Menü verwenden, mit denen nun Ordnung in die grünen Wipfel kommt, denn die Bäume rücken auf einer horizontalen Linie preußisch ordentlich nebeneinander. Weitere Möglichkeiten bieten die Einträge •
VERTIKAL ZENTRIERT: Ausrichtung auf einer horizontalen Linie in der Mitte der Objekte, interessant für unterschiedlich große Objekte
•
OBERKANTE: Ausrichtung an der oberen Objektbegrenzung, sodass die Objekte unter einer horizontalen Linie hängen
•
alle drei Varianten in vertikaler Form zur übereinander liegenden Ausrichtung an linker, rechte Kante und vertikal zentriert
Flash MX
52
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
2.3.14 Spiegelung von Objekten Die Änderung der Zeichnung im letzten Abschnitt diente nur dem Ausflug in die Möglichkeiten der automatischen Anordnung. Interessant ist die Ausrichtung der Objekte nicht mehr, da ja gerade mit einfachsten Mitteln eine möglichst realistische Baumgruppe gezeichnet werden sollte. Daher setzen wir die Arbeit nicht mit den jetzt militärisch ausgerichteten Bäumen fort, sondern verändern die Duplikate möglichst geschickt, um jedem ein individuelles Aussehen zu verleihen. Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken13.fla bzw. wolken14.fla.
2.3.15
1.
Öffnen Sie die Datei wolken10.fla.
2.3.16
2.
Wählen Sie den vorderen Baum aus.
2.3.17
3.
Wählen Sie MODIFIZIEREN / TRANSFORMIEREN / HORIZONTAL SPIEGELN.
Wie Sie im Menü sehen, können Sie natürlich auch eine vertikale Spiegelung und verschiedene Skalierungen vornehmen.
Flash MX
53
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
2.3.18
4.
Wählen Sie MODIFIZIEREN / TRANSFORMIEREN / SKALIEREN.
2.3.19
5.
Ziehen Sie den Baum mit dem oberen rechten Anfasser proportional kleiner.
2.3.20
6.
Wählen Sie den rechten Baum.
Vielleicht erschien Ihnen die Vorgehensweise umständlich, dass man zunächst in einen Skalierungsmodus schalten muss, um Größenänderungen vorzunehmen, dies hat jedoch den Vorteil, dass nicht ständig die neun Anfasser erscheinen, wenn Sie ein Objekt markieren. Nicht immer möchte man nämlich bei Auswählen eines Objekts auch die Größe ändern, sodass gerade bei kleineren Objekten die Anfasser oft die Sicht nehmen würden.
2.3.21
7.
Wählen Sie FENSTER / TRANSFORMIEREN.
Oft möchte man lieber genaue Prozentwerte für Größenänderungen und exakte Gradwerte für Dreh- und Neigeaktionen vorgeben. Im Transformieren-Bedienfeld finden Sie dazu die nötigen Kontrollkästchen und Textfelder.
Flash MX
54
ZEICHNUNGEN
2.3.22
8.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Wählen Sie PROPORTION und jeweils 60 % Größe aus.
Dieser Baum sollte noch einmal die gleichen Größenverhältnisse aufweisen. Ohne das Kontrollkästchen PROPORTION sind selbstverständlich auch davon unabhängige Einstellungen möglich. Wie Sie sehen, finden Sie in diesem Bedienfeld auch Einstellungen, um Objekte gradgenau zu neigen und zu drehen.
2.3.23
9.
Wählen Sie KOPIEREN UND TRANSFORMIERUNG ANWENDEN.
Diese Variante stellt eine weitere Vereinfachung dar, wenn man genau mit dieser Vorgehensweise „mehr Inhalt“ vortäuschen möchte. Anstatt zunächst die Duplikate zu erzeugen, kann man genauso gut die Änderungen vorgeben, dann jedoch diese nicht auf das Original anwenden, sondern einen modifizierten Doppelgänger generieren. 2.3.24
10.
Wählen Sie die Baumkrone des rechten Baums aus.
2.3.25
11.
Wählen Sie MODIFZIEREN / TRANSFORMIEREN / DREHEN.
2.3.26
12.
Geben Sie eine Neigung von 5 Grad vor.
Wie Sie sehen, können Sie natürlich auch eine Drehung erzeugen oder ganz auf das TRANSFORMIEREN-Bedienfeld verzichten und mit der Maus an den runden Anfassern per Augenmaß eine Objektänderung erzielen.
Flash MX
55
ZEICHNUNGEN
2.3.27
13.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Betätigen Sie die Enter-Taste, um die Änderung dem Original zuzuweisen.
2.3.28 Anordnung in der Tiefe bestimmen Bis jetzt konnte man nicht gerade behaupten, dass wirklich viel in den einzelnen Ebenen passierte, denn schließlich ruhten nur kleine Sommerwölkchen über einer Baumgruppe. Damit diese Baumgruppe aber nun – kunstvoll arrangiert – vollends realistisch wirkt, sollten die Bäume auch innerhalb der Ebene perspektivisch geordnet werden. 2.3.29
1.
Markieren Sie einen der kleineren Bäume durch einfachen Klick.
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken15.fla.
2.3.30
2.
Wählen Sie MODIFIZIEREN / ANORDNEN / IN DEN HINTERGRUND.
In diesem Menüpunkt finden Sie alle Möglichkeiten zur Objektanordnung innerhalb einer Ebene. Folgende weitere Möglichkeiten decken das Spektrum ab: •
IN DEN VORDERGRUND: setzt Objekt vor alle anderen Objekte
•
NACH VORNE: setzt Objekt eine Stufe nach vorne
•
NACH HINTEN: setzt Objekt eine Stufe nach hinten
•
IN DEN HINTERGRUND: setzt Objekt hinter alle anderen Objekte
2.3.31
3.
Schieben Sie ihn näher zum Horizont.
Wichtig ist, dass Sie in Ihrer selbst erstellten Zeichnung eine angenehme Verteilung erreichen: Baumstämme sollten nicht direkt übereinander liegen, damit nicht der Eindruck eines überlangen Stamms mit herausragenden Wurzeln entsteht. Auch sollte immer ein Stückchen Himmel zwischen
Flash MX
56
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
den einzelnen Stämmen zu sehen sein, damit nicht der Eindruck eines überbreiten Stamms entsteht oder die Braunfärbung zu konzentriert wirkt. 2.3.32
4.
Markieren Sie den nächsten kleineren Baum.
2.3.33
5.
Wählen Sie MODIFIZIEREN / ANORDNEN / NACH HINTEN.
2.3.34
6.
Skalieren Sie den letzten verbleibenden Baum auf zwei Drittel seiner Größe.
Damit ist auch die letzte Änderung der Baumgruppe erfolgreich abgeschlossen.
2.4
Linien zeichnen und als Bézierkurven bearbeiten
Wenn Ihr Blick schon stetig zu den Schaltflächen der Werkzeugleiste gewandert ist (so wie wir durch die unberührte Natur), ist Ihnen vermutlich nicht entgangen, dass nur noch wenige nicht verwendet wurden. Das holen wir mit dieser Lektion nach, weil wir uns nicht mehr über zittrige Hände, ruckelnde Mäuse oder sonstige Widrigkeiten der Freihandzeichnung ärgern wollen. Flash stellt zwei Linienwerkzeuge zur Verfügung sowie zwei grundlegende Optionen für Ihre Weiterverarbeitung. Den Zugriff auf frei gezeichnete oder über geometrische Formen erzeugte Linien haben Sie bereits mit der Bearbeitung der Pfadpunkte kennen gelernt.
2.4.1 Strecken erzeugen mit Stift- und Linienwerkzeug 2.4.2
1.
Erzeugen Sie eine neue Ebene namens Schiff.
Vermutlich haben Sie gedacht, eine Straße würde der Zeichnung den Sprung in die Top Ten der schönsten Kinderzeichnungen verhelfen, doch unsere Straße störte nur die unberührte Natur. Eine solch anmutige Szenerie verlangt einfach nach einem grotesken Element, und wenn schon nicht eine Straße am Horizont verschwindet, dann sollte wenigstens ein Schiff am Horizont vorbeifahren.
Flash MX
57
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken18.fla.
2.4.3
2.
Wählen Sie das Linienwerkzeug.
2.4.4
3.
Wählen Sie im Eigenschaften-Inspektor eine massive Linie der Stärke 1.
Hier haben Sie die Möglichkeit, Attribute für die zu zeichnenden Linien einzustellen. Im Auswahlmenü kann man zwischen verschiedenen Linienarten wählen, deren Stärke über das Textfeld bzw. den Schieberegler rechts daneben beeinflusst werden kann. Eine entsprechende Färbung wie z.B. ein passendes Schiffsgrau finden Sie im rechts nebenstehenden Farbauswahlmenü.
2.4.5
4.
Ziehen Sie die Umrisse eines Dampfers nach.
Um mit dem Linienwerkzeug zu arbeiten, setzen Sie zunächst den Anfangspunkt der gewünschten Linie in das Bild und ziehen dann die Linie mit dem Mauszeiger zu ihrem Endpunkt. Diese Technik dürfte Ihnen aus anderen Programmen bereits vertraut sein. Anschlüsse gelingen am besten, wenn die Maus nach dem Klick, um die Linie zu beenden, nicht bewegt wird, sondern stattdessen der nächste Anfangspunkt gesetzt wird. 2.4.6
5.
Wählen Sie das Stiftwerkzeug.
2.4.7
6.
Zeichnen Sie die Aufbauten.
Um mit dem Stiftwerkzeug Linien zu ziehen, müssen Sie die jeweiligen Verbindungspunkte in die Zeichnung setzen. Jeder zweite erzeugt dann eine Linie zwischen sich und dem zuvor gesetzten. Es ist mit dieser Technik nicht ganz einfach, wirklich gerade Linien zu ziehen, aber man kann sich am Gitter orientieren.
Flash MX
58
ZEICHNUNGEN
2.4.8
7.
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Zeichnen Sie nun mit dem Linienwerkzeug zwei Schornsteine.
2.4.9 Linien umformen und nachbearbeiten Ein Problem ist natürlich zuerst, wie man aus solchen Streckenzügen Formen generiert. Es ist z.B. in diesem Zustand gar nicht möglich, das Farbeimerwerkzeug zu verwenden, da für Flash zunächst lediglich Linien vorliegen und keine Formen. Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken19.fla.
Flash MX
59
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
2.4.10
1.
Wählen Sie mit gedrückter Umschalt-Taste alle erzeugten Linien des Schiffes aus.
2.4.11
2.
Wählen Sie MODIFIZIEREN / FORM / LINIEN IN FÜLLUNGEN KONVERTIEREN.
2.4.12
3. Färben Sie das Schiff ein: #CCCCCC (hellgrau) für den Rumpf, #666666 (grau) für die Aufbauten und #333333 (dunkelgrau) für die Schornsteine.
Für das Einfärben von derart erzeugten Füllungen oder Formobjekten können Sie ganz wie gewohnt auf das Farbeimerwerkzeug zurückgreifen, das jetzt seine treuen Dienste anbieten kann.
2.4.13 Bézierkurven erzeugen 2.4.14
1.
Wählen Sie das Werkzeug UNTERAUSWAHL.
Sollte Sie bereits die Frage gequält haben, bei welch spektakulärer Gelegenheit das Unterauswahlwerkzeug seine Premiere feiert, so ist dieser Moment nun gekommen. Während man mit dem einfachen Auswahlwerkzeug nur das Objekt an sich auswählen kann, muss man auf das Unterauswahlwerkzeug als Spezialgerät zurückgreifen, um Pfadpunkte zu bearbeiten. Sie werden durch einen einfachen Klick auf den Objektrand (in diesem Fall Bug oder Heck) aktiviert.
Flash MX
60
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken20.fla.
2.4.15
2.
Markieren Sie den Bug des Schiffs bzw. den Eckpunkt.
2.4.16
3. Ziehen Sie bei gedrückter Alt-Taste die Maus ein wenig nach unten, schlagen einen Halbkreis im Uhrzeigersinn.
Es entsteht eine Tangente, die so lange gedreht werden muss, bis ein abgerundeter Bug entsteht. Dieses Werkzeug dürfte ein wenig gewöhnungsbedürftig sein, wenn Sie es noch nicht aus anderen Programmen kennen. Experimentieren Sie also ruhig ein wenig, bis die Linie auf der rechten Seite den gewünschten gekrümmten Verlauf erhält.
2.4.17
4.
Verfahren Sie ebenso auf der anderen Seite.
Wenn mehrere Punkte nebeneinander liegen, ist es oft schwierig, den richtigen für eine Bézierkurve zu markieren. Eventuell kann nur die Linie markiert werden, die die Reling markiert, sodass man ein Dreieck konstruieren könnte. In diesen Fällen, wo man also doch die Maus beim Anschluss der Linien um ein Pixel bewegt, hilft nur die Lupenfunktion, um den benötigten Punkt auszuwählen. 2.4.18
5.
Erzeugen Sie mit der punktierten Linie Bullaugen.
Mit Hilfe der regelmäßig punktierten Linie lassen sich wunderschön blaue Bullaugen generieren. Für Rauchfahnen dagegen bietet sich die unregelmäßig punktierte Linie in einem rauchigen Grau an. Den kecken Bogen erzeugt dann das Stiftwerkzeug: wolken21.fla.
Flash MX
61
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Als Erholung für die Erarbeitung der gesamten Zeichenwerkzeuge inklusive Bézierkurven-Akrobatik können Sie die Animation, in der das Schiff seine Runden dreht, in der Datei wolken21.fla betrachten. Endlich kommen auch die Wolken zum Einsatz und schweben am Himmel vorbei.
Flash MX
62
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Weitere Zeichenwerkzeuge Obgleich die meisten Werkzeuge während dieses Projekts vorgestellt wurden, gibt es noch einige wenige, deren Funktionsweise hier kurz umrissen wird: Tintenfasswerkzeug: ändert Farbe, Breite und Art der Linien und Formen gemäß vorher eingestellten Eigenschaften und Auswahl des zu ändernden Objekts auf der Bühne Freihandwerkzeug: erzeugt Striche gemäß der Linienarten freihändig durch Mausbewegung Pinselwerkzeug: erzeugt wie das Freihandwerkzeug breite, gepinselte Striche gemäß verschiedener Pinselarten ziehen Pipettenwerkzeug: erfasst durch Markieren einer Farbe/Füllung die Farbeigenschaften eines Objekts und überträgt sie auf ein anderes Füllungstransformationswerkzeug: verschiebt Größe, Richtung oder Schwerpunkt einer Farbfüllung durch Markierung des zu ändernden Objekts und Ziehen / Drehen an den entstehenden Anfassern
2.5
Testen Sie Ihr Wissen!
Gibt es Einschränkungen beim Gruppieren? Wie können Sie ein komplexes Objekt aus einzelnen Strichen zeichnen und nachher zu einer Form zusammenfügen? Mit welchen Methoden können Sie Linien nachbearbeiten?
Flash MX
63
ZEICHNUNGEN
MIT
FORMEN
UND
PFADEN
ERSTELLEN
Wie organisieren Sie einzelne Objekte in einem Film? Welche Besonderheit bei der Markierung von Objekten muss bei Vektorgrafiken beachtet werden? Sie haben verschiedene Objekte erzeugt, die Sie ausrichten möchten, ohne das Gitternetz oder Hilfslinien einzusetzen. Wie können Sie vorgehen? Was müssen Sie bei der Auswahl von Linien und Füllungen beachten? Wie können Sie „runde Ecken“ erzeugen, wenn „eckige Ecken“ bereits vorliegen? Wie können Sie mehrere Objekte auf einmal auswählen, um sie z.B.. auszurichten?
Flash MX
64
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
3 Text eingeben, formatieren und verlinken
Flash MX
65
TEXT
Flash MX
EINGEBEN, FORMATIEREN UND VERLINKEN
66
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Text eingeben, formatieren und verlinken Überall im Netz kann man aufwändige Flash-Animationen finden, die im Wesentlichen durch Grafikeffekte und komplizierteste Zeichnungen bestechen. Doch für den Alltagsgebrauch auf all den anderen vielen Seiten, die Flash als Gestaltungsmittel einsetzen, findet man überwiegend Text vor: in Menüs, in Bannerwerbung, in Hinweistexten, in Intros und dergleichen mehr. Nach den umfangreichen Beschreibungen zum Erstellen und Verändern von Objekten, wird dieses Projekt wie ein beschwingter Spaziergang am Strand wirken. Da Flash kein Textprogramm ist, sind die Möglichkeiten überschaubar, sodass wir Ihnen im Folgenden alle Techniken vorstellen können.
3.1
Text erstellen
Sie können Text – wie bereits im Einführungsprojekt trainiert – entweder direkt über die Tastatur oder – wie in ähnlichen Programmen auch – über die Zwischenablage einfügen. Darauf wollen wir nicht speziell eingehen, da die Schaltflächen, Befehle und Tastaturkürzel dem Standard entsprechen. Als einziger Hinweis ist nur notwendig, dass Formatierungen beim Einfügevorgang mit Hilfe der Zwischenablage verloren gehen. Sobald Sie Texte eingeben oder kopieren, werden Sie im Eigenschaften-Inspektor feststellen, dass man zwischen dynamischen und statischem Text wählen kann. Statisch bedeutet in diesem Zusammenhang, dass der Text von Ihnen vorgegeben und vom Publikum nicht geändert werden kann. Anders verhält es sich mit dynamischen Text, der für Formulare mit Texteingabe reserviert ist. Hier muss zusätzlich über ActionScript die entsprechende Formularbehandlung programmiert werden, z.B. ein Eintrag, der ausgefüllten Textfelder in eine Datenbank einliest, oder ein Vergleich von Login und Passwort. In diesem Projekt behandeln wir daher nur statischen Text.
3.1.1 Zeichenformatierungen 3.1.2
1.
Öffnen Sie versicherungen1.fla.
Die Datei ist bereits fertig vorbereitet: Der Film hat eine Größe von 300 Pixel (Breite) x 200 Pixel (Höhe), rot eingefärbte Hilfslinien für die Textausrichtung und einen Hintergrund, der Ihnen einen kleinen Vorgeschmack auf das Projekt zum Grafikimport geben soll. Es ist die Vektorvariante einer überarbeiteten Pariser Seine-Brücke, die Sie im Original in der Datei bruecke.jpg finden. Das Ergebnis dieses Abschnitts finden Sie in der Datei versicherung2.fla.
Flash MX
67
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
3.1.3
2.
Erstellen Sie eine neue Ebene namens titel.
3.1.4
3.
Setzen Sie das Textwerkzeug in den mittleren oberen Bereich.
3.1.5
4. Wählen Sie die Schriftart Roman, Schriftgröße 18, Laufweite 2, Farbe Schwarz und UNTERSCHNEIDEN aus.
Die gesamten Zeichenformatierungen sind im Eigenschaften-Inspektor zusammengefasst. Die Größeneinstellungen lassen sich entweder über die Tastatur oder die Schieberegler einstellen. Um Textattribute zu ändern, genügt ein Klick mit dem Auswahlwerkzeug auf den Textblock.
3.1.6
5.
Schreiben Sie La Mano Versicherungen AG.
Geräteschrift und eingebettete Schriften Die Problematik der Schriftarten ist auch in Flash nicht vollkommen gelöst. True-Type-Schriften werden beim Export des FlashFilms einfach in die Datei eingebettet, sodass die Schrift beim Benutzer richtig dargestellt wird. Voraussetzung dafür ist, dass die
Flash MX
68
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Schriftzeichen durch einen Pfad umschlossen werden, als seien sie Objekte. Dadurch können Formveränderungen insbesondere der Größe realisiert werden. Dies ist jedoch bei vielen Post-Script-Fonts nicht der Fall, weshalb Text in diesen Schriftarten nicht richtig (z.B. ausgefranst oder in einer ganz anderen Schrift) dargestellt wird. Da ohnehin die Einbettung der Schrift die Dateigröße stark in die Höhe treibt, sollte man bei aufwändigen Animationen auf die Schrifteinbettung verzichten und stattdessen – wie bei HTML-Seiten – Geräteschriften verwenden. Dabei werden ähnliche Schriften zu Schriftfamilien zusammengefasst, damit zumindest sichergestellt wird, dass die Art der Darstellung ähnlich ist: sans (wie Helvetica oder Arial), serif (wie Times Roman) und typewriter (wie Courier). Um Probleme mit Schriften zu vermeiden, informieren Sie sich, welche der Ihnen zur Verfügung stehenden Schriften True-TypeSchriften und welche Post-Script-Schriften sind. Bei der Arbeit können Sie über ANSICHT / ANTI-ALIAS-TEXT überprüfen, ob der Text ausgefranst dargestellt wird. In diesem Fall zeichnet Flash die Konturen nicht nach.
3.1.7 Textblöcke Nicht immer ist der Text so schön kurz. In den seltenen Fällen, in denen längere Textpassagen übernommen werden sollen, oder in denen in einem bestimmten Bereich Text ausgerichtet sein soll, kann man auch Textblöcke aufziehen. Sie haben den Vorteil, dass – wie in diesem Beispiel – zwischen zwei Hilfslinien ein Textbereich erzeugt wird, in dem Absatzausrichtungen festgelegt werden können. Ein solcher Textblock verhindert, dass Text die Grenzen der Bühne verlässt und nicht mehr lesbar ist. Die mit der oben gezeigte Variante eingefügten Textteile stehen in einem Textblock mit variabler Breite, der also mit zunehmender Textgröße mitwächst. Das Ergebnis dieses Abschnitts finden Sie in der Datei versicherung3.fla.
3.1.8
1.
Erstellen Sie eine neue Ebene namens vision1.
Ziehen Sie mit dem Textwerkzeug ein Rechteck auf, das genau zwischen den beiden mittleren Hilfslinien liegt. Der Textblock erhält nun an der rechten oberen Ecke ein Quadrat, das den Kreis als Zeichen für die variable Breite ersetzt. Viele Einstellungen finden Sie auch im Menü TEXT.
3.1.9
2.
Wählen Sie als _sans als Geräteschrift mit der Größe 12 aus.
Ganz oben in der Liste der Schriftarten finden Sie die Geräteschriften. Durch den jeweils vorgestellten Unterstrich werden sie alphabetisch ganz vorne aufgelistet.
Flash MX
69
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
3.1.10
3.
Schreiben Sie aufbrechen zu neuen Ufern.
3.1.11
4.
Verfahren Sie ebenso mit den Texten alte Pfade verlassen (vision2) und den
eigenen Weg gehen (vision3).
3.1.12 5.
Erzeugen Sie die Ebenen werbespruch und leistungen.
3.1.13
Erstellen Sie in der Ebene leistungen in einem Textblock mit fester Breite den Text
6.
Leben, Feuer, Tod, Arbeitsunfähigkeit, Haftpflicht, Rechtschutz, Diebstahl, Ausbildung, Kraftfahrzeug...
Flash MX
70
TEXT
3.1.14
7.
EINGEBEN, FORMATIEREN UND VERLINKEN
...in der Ebene werbespruch: Kommen Sie mit uns sicher ans Ziel. Wir zeigen
Ihnen neue und offene Wege.
3.1.15 Absatzformatierungen Es ist das Ziel, mit den drei Visionen den Brückenverlauf ein wenig nachzustellen. Daher soll die Ebene vision1 linksbündig, der Text von vision2 zentriert und der von vision3 rechtsbündig ausgerichtet sein. Die anderen beiden werden dann mit Hilfe von Einrückungen sinnbildlich unter diese Brückentexte gelegt. Das Ergebnis dieses Abschnitts finden Sie in der Datei versicherung4.fla.
3.1.16
1.
Markieren Sie den Text der Ebene vision2 durch das Auswahlwerkzeug.
3.1.17
2.
Wählen Sie die Ausrichtung ZENTRIERT aus dem Bedienfeld ABSATZ aus
Wie Sie sehen, ist standardmäßig eine linksbündige Ausrichtung aktiv, sodass der Text der Ebene vision1 nicht ausgewählt werden braucht. Er ist bereits richtig ausgerichtet. 3.1.18
3.
Richten Sie den Text der Ebene vision3 rechtsbündig aus.
Deutlich können Sie nun auch auf der Bühne den Nutzen der festen Textblöcke im Zusammenspiel mit den Hilfslinien erkennen. Obwohl die drei Textblöcke auf einzelnen Ebenen untergebracht werden, haben Sie durch die Definition als fester Textblock die gleiche Breite. Die Absatzformate richten sie dann ordentlich zwischen den Hilfslinien aus.
Flash MX
71
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Wählen Sie den Text der Ebene werbespruch aus.
3.1.19
4.
3.1.20
5. Richten Sie ihn mit Blocksatz aus und fügen Sie eine beidseitige Einrückung von 5 Pixel hinzu.
Die Brücke soll nur durch die drei Visionen symbolisiert werden, sodass natürlich für die beiden anderen Texte jeweils der übrig bleibende Blocksatz verwendet werden muss. Damit der Eindruck einer Brücke oder einem Gang über die im Hintergrund sichtbare Brücke verstärkt wird, sollten die Textgrenzen nicht mit denen der Visionen übereinstimmen. Dies gewährleisten die Einrückungen. Ein Einzug der ersten Zeile oder eine Veränderung des Zeilenabstands sind prinzipiell möglich, für dieses Beispiel aber nicht sinnvoll. Experimentieren Sie damit bei Bedarf und Gelegenheit. Die Absatzformatierungen stellen Sie ein, indem Sie auf die Schaltfläche FORMAT klicken und im sich öffnenden Dialogfeld die in der Abbildung gezeigten Einstellungen vornehmen. Die Maßeinheiten sind px oder Pkt (nur bei Zeilenabstand) und brauchen nicht extra eingetragen zu werden, während die Werte selbst über die Schieberegler oder die Tastatur bestimmt werden können. Wie Sie in der Abbildung erkennen, können in diesem Dialogfenster auch die Vorgaben für eine evtl. Zeileneinrückung der ersten Zeile und die Zeilenhöhe eingetragen werden.
Flash MX
72
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Über die Schaltfläche TEXTRICHTUNG ÄNDERN kann die Schriftrichtung geändert werden.
3.1.21
6. Richten Sie den Text der Ebene leistungen ebenfalls im Blocksatz, aber mit einer Einrückungen von 25 Pixel aus
Je kleiner die Einrückung ist, desto mehr werden die Buchstaben der ersten Zeile auseinandergezogen, da leider keine Silbentrennung vorhanden ist. Hier muss man sich entweder mit anderer Wortstellung oder einer höheren Einrückung behelfen.
Ersatzschriftarten Sobald ein Dokument geöffnet wird, das unbekannte Schriften verwendet, öffnet sich beim Laden des Films ein Dialogfenster, in dem die fehlenden Schriften in der linken Spalte aufgeführt werden. Über das unten rechts liegende Auswahlmenü SCHRIFT ERSETZEN kann man eine Ersatzschrift festlegen. Alternativ kann man die Standardschrift des Systems über die Schaltfläche SYSTEMSTANDARD
Flash MX
73
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
zuweisen. Diesen Standard können Sie unter BEARBEITEN / VOREINSTELLUNG / ALLGEMEIN im Auswahlmenü SCHRIFTZUORDNUNGSSTANDARD vorgeben. Normalerweise ist hier _sans eingetragen. Sie gelangen in das gleiche Fenster wie bei Öffnen eines Dokuments mit unbekannter Schriftart, wenn Sie ein Dokument speichern wollen, das eine unbekannte Schrift enthält, oder über BEARBEITEN / SCHRIFTZUORDNUNG.
3.2
Hyperlinks einbinden
Flash-Filme sollten nicht nur wie ein Film ablaufen, sondern dem Benutzer auch die Möglichkeit geben, selbst aktiv zu werden. Dies entspricht der Philosophie des Internets als begreifbares und aktiv erlebbares Medium. Eine ganz simple Methode, mit der Animationen für den Benutzer interaktiv gemacht werden können, stellt die Einbettung von URL´s dar. Dabei kann man sowohl HTML-Seiten öffnen als auch E-Mail-Adressen verlinken. Durch die fast schon inflationäre Verbreitung von Werbebannern ist dies eine überraschend wenig genutzte Möglichkeit. Normalerweise wird einfach die entsprechende Webseite der beworbenen Firma komplett mit der Animation verlinkt. Dies stellt den Standard dar, wirkt aber auf manche Benutzer ein wenig abschreckend. Man wüsste doch ganz gerne, wohin die Reise führen soll, wenn die Maus einen Link anzeigt. Als Alternative kann man sozusagen auch ganz transparent und ehrlich sein, indem die WWW-Adresse als Text eingetragen und verknüpft wird. Nicht alle Benutzer möchten auch sofort den Werbebannern wie der Fliege einer Spinne ins Netz folgen, sodass ein angenehmer Zusatzeffekt ist, dass die Webadresse überhaupt (ständig) eingeblendet wird, sodass der Besucher sich vielleicht später noch an die Adresse erinnert. Es nützt eigentlich gar nichts, wenn der Besucher sich an den Banner erinnert, eine Kontaktadresse aber nicht kennt. Das Ergebnis dieser Lektion finden Sie in der Datei versicherung5.fla.
3.2.1
1.
Öffnen Sie die Datei versicherungen2.fla.
3.2.2
2.
Öffnen Sie einen Textblock unterhalb des Firmennamens.
3.2.3
3.
Schreiben Sie die beiden Kontaktadressen in einen zentrierten Absatz.
[email protected] www.lamano.biz
Kontaktadressen von La Mano AG Dieser Text muss ebenfalls statisch und nicht auswählbar sein. 3.2.4
4.
Markieren Sie www.lamano.biz.
3.2.5
5.
Tragen Sie im Textfeld URL ein: www.lamano.biz.
Auf die Verwendung von http:// können Sie bei Internetadressen im Gegensatz zu anderen Programmen verzichten. Im Auswahlmenü ZIEL müssen Sie dann dem Browser mitteilen, wie er das zu ladende Dokument behandeln soll: •
_blank: lädt diesen Link immer in einem neuen Fenster.
•
_self: lädt diesen Link anstelle des aktuellen Dokuments im aktuellen Fenster.
•
_parent: lädt diesen Link anstelle des übergeordneten Frame, wenn Frames vorhanden sind.
Flash MX
74
TEXT •
EINGEBEN, FORMATIEREN UND VERLINKEN
_top: lädt diesen Link auf der obersten Ebene.
Im Beispiel soll der Browser das aktuelle Dokument gegen die Startseite von La Mano austauschen, sodass als Ziel _self notwendig ist.
3.2.6
6.
Markieren Sie
[email protected].
3.2.7
7.
Tragen Sie im Register ZEICHEN im Textfeld URL ein: mailto:
[email protected].
Zusätzlich können Sie auch noch mit JavaScript einen automatischen Betreff in der E-Mail vorgeben, wenn Sie den Link so erweitern: mailto:
[email protected]?subject=Versicherungen 3.2.8
8.
Kontrollieren Sie die Übernahme der Einstellungen auf der Bühne.
Die verlinkten Textstellen erhalten eine gestrichelte Unterstreichung. Darüber hinaus reagiert der Mauszeiger (wie das bei Links typisch ist) auf diese so geänderten Textstellen. Die Animation finden Sie in versicherung6.fla.
Betreff automatisch vorgeben Die Möglichkeit, direkt in das Betrefffeld zu schreiben, wird im Netz eigentlich viel zu selten benutzt. Es nimmt dem Benutzer ein wenig Arbeit ab und gibt Ihnen Zusatzinformationen. So können Sie bei verschiedenen Bannern den Bannererfolg messen, der sich aus der eingehenden Menge an E-Mails mit dem entsprechenden Betreff ergibt. Zusätzlich gibt eine gut organisierte Verwendung automatischer Betreffs die Gelegenheit, mit automatischen Regeln in z.B. MS Outlook die eintreffenden E-Mails gezielt an spezielle
Flash MX
75
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Mitarbeiter weiterzuleiten. Auch im privaten Bereich ist das nützlich, wenn Sie auf Ihrer Homepage verschiedene Bereiche (Ihre Plattensammlung, Bewerbungsinformationen usw.) präsentieren und über diesen kleinen Befehl Ihre E-Mails vorsortieren können.
3.3
Objekte / Text teilen
Eine weitere Bearbeitungsform für Texte und Objekte stellt die Teilung dar. Sie wirkt sich auf die einzelnen Objekte folgendermaßen aus: •
Auflösung von Gruppierungen
•
Text wird zu Vektorformen
•
Bitmapgrafiken werden in Farbbereiche aufgeteilt
•
Symbole verlieren ihren Symbolstatus
Das Ergebnis dieser Lektion finden Sie in der Datei ohr3.fla.
3.3.1
1.
Öffnen Sie die Datei ohr1.fla.
Sie enthält vier Ebenen für das Ohr (ohr), den Text Am Ohr der Zeit (text), das Firmenlogo (firma) und die Beschreibung der Firma Lösungen mit Telefonmarketing (beschreibung). Es handelt sich also offensichtlich um den Vorentwurf eines möglichen Banners für die Firma Hear OHG, die sich mit Telefonmarketing beschäftigt und vermutlich mit dem Teilen von Objekten und Text ein wenig mehr Würze in diesen Entwurf packen möchte.
3.3.2
2.
Markieren Sie den Text Ohr mit dem Auswahlwerkzeug.
3.3.3
3.
Wählen Sie MODIFIZIEREN / TEILEN.
Dieser Punkt ist nur auszuwählen, wenn in der aktuell gewählten Ebene ein Objekt vorhanden ist, dass geteilt werden kann. Als Ergebnis erhält man eine komplette Auswahl bzw. Markierung des geteilten Objekts. In diesem Zusammenhang sind dies alle Buchstaben in einzelnen Rahmen, die man nun verschieben oder animieren könnte, wenn man beispielweise hüpfende Buchstaben erzeugen wollte.
Flash MX
76
TEXT
EINGEBEN, FORMATIEREN UND VERLINKEN
Als weitere Alternative steht direkt unterhalb des Menüs TEILEN der Befehl AUF EBENEN VERTEILEN zur Verfügung. Er sorgt dafür, dass der Text in seine Buchstabenbestandteile zerlegt wird und diese in je eine eigene Ebene kopiert werden. Text wird zunächst in einzelne Buchstaben geteilt.
3.3.4
4.
Wählen Sie erneut MODIFIZIEREN / TEILEN, um die Buchstaben in Pfadpunkte zu zerlegen.
3.3.5
5. sie.
Aktivieren Sie mit dem Unterauswahlwerkzeug die Pfadpunkte und verschieben Sie
Alternativ oder als Ergänzung zum direkten Zugriff auf die Pfadpunkte könnten Sie genauso gut erst die Füllungen oder Linien mit dem Radiergummi oder dem Wasserhahn entfernen. Wenn Kurvenverläufe geändert werden sollen, wären die Bézierkurven das geeignete Werkzeug.
Flash MX
77
TEXT
3.3.6
3.4
EINGEBEN, FORMATIEREN UND VERLINKEN
6. Ziehen Sie alle Buchstaben so auseinander, dass die jeweiligen Eckpunkte von den Buchstaben wegtreiben.
Testen Sie Ihr Wissen!
Was sind die Symbole für Textblöcke mit variabler und fester Breite? Wo liegen Vor- und Nachteile der verschieden Textblockarten? Wie fügen Sie Internet- und Mail-Adressen ein? Wie können Sie einen automatisch erzeugten Betreff vorgeben? Welche Schwierigkeiten gibt es bei Schriftarten? Wie können Sie die Schwierigkeiten im Umgang mit Schrift lösen? Worauf beziehen sich die Absatzformate wie linksbündig oder auch Einrückungen? Wie können Sie überprüfen, von welchem Typ eine von Ihnen verwendete Schrift ist?
Flash MX
78
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
4 Mit Schlüsselbildern, Symbolen Bibliothek Animationen erstellen
Flash MX
und
79
MIT SCHLÜSSELBILDERN, SYMBOLEN
Flash MX
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
80
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Mit Schlüsselbildern, Symbolen und Bibliothek Animationen erstellen Objekte und Text können mit den hier in diesem Projekt vorgestellten Grundtechniken animiert werden. Weitere Möglichkeiten wie Rollover oder die Organisation von komplexen Filmen basieren ebenfalls auf den hier vorgestellten Hilfsmitteln. Diese richten sich nach der Technik im Trickfilm, in dem ebenfalls Bewegungen durch die leichte Veränderungen vieler aufeinander folgender Bilder simuliert werden. Flash übernimmt wie z.B. mit der Tweening-Funktion einige Arbeit bei dieser Bilderstellung ab, während man aber natürlich immer noch bei ausgefeilten Anwendungen um eine Bild-für-Bild-Bearbeitung nicht umhin kommt. In einer eigenen Lektion lernen Sie dann die Bibliothek der animierten Elemente eines Films sowie weitere Techniken kennen, umfangreiche Animationen zu strukturieren, um sie nachher für eine weitere Bearbeitung wieder verständlich zu machen.
4.1
Mit Schlüsselbildern die Zeitleiste nutzen
Die Zeitleisten, die für jede Ebene oberhalb der Bühne eingerichtet werden, sind Ihnen ja schon seit der Einführung bekannt. Hier wird die Animation im Zeitablauf eingerichtet, verwaltet und natürlich auch nachträglich geändert. Sie kann und wird im weiteren Verlauf der nächsten Projekte sehr umfangreich werden, sodass wir uns zu gegebener Zeit auch um eine Reduzierung der Komplexität dieser „Zeittabelle“ kümmern werden. Vermutlich sind Ihnen auch schon die mit einem Punkt und einer schwarzen Umrandung versehenen Kästchen am Anfang der Zeitleiste aufgefallen. Jedes Kästchen in der Zeitleiste repräsentiert ein Bild, da ja ein Film – wie schon erwähnt – die schnelle Abfolge von Einzelbildern ist. Die so mit einem Rahmen und einem gefüllten Kreis markierten Bilder stellen die bedeutsamsten Bilder dar: die so genannten Schlüsselbilder. Schlüsselbild heißt das Bild, in dem eine Zustandsänderung eintritt.
Die kleinste oder einfachste Animation würde aus zwei Schlüsselbildern bestehen, von denen das eine einen Anfangszustand (Flugzeug befindet sich links auf der Bühne) und das anderen einen Endzustand (Flugzeug befindet sich rechts auf der Bühne) repräsentiert. Da diese beiden Bilder zwei verschiedene Zustände darstellen, wirken sie als Schlüsselbilder (engl. key frames). Mögliche Animationen könnten eine gerade Bewegung (Bewegungs-Tween), eine Kurve (Pfadanimation) oder, wenn zusätzlich eine Formänderung eintritt, eine Formanimation (Form-Tween). Die Bilder zwischen diesen zwei Schlüsselbildern nennen sich Zwischenphasen, weil ihr einzige Funktion darin besteht, die kleinen Veränderungen zwischen „Flugzeug links“ und „Flugzeug rechts“ zu erzeugen. Über die Zwiebelschalen-Ansicht ist es dann möglich, die Entwicklung der Bewegung oder der Formänderung wie bei übereinander liegenden Transparentfolien zu kontrollieren. Zwischenphasen heißen die Bilder zwischen zwei Schlüsselbildern.
Um mit der Schlüsselbild-Technik vertraut zu werden, verwendet die Animation in dieser Lektion ausschließlich Schlüsselbilder und keine weiteren Hilfsmittel. Das Beispiel der Abbildung finden Sie in der Datei flugzeug.fla.
Flash MX
81
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
4.1.1 Symbole erzeugen Objekte können nur animiert werden, wenn sie vorher zu Symbolen modifiziert wurden. Man unterscheidet drei verschiedene Symbol-Typen, von denen wir in diesem Projekt zunächst nur das Grafik-Symbol kennen lernen werden: •
GRAFIK: Grafiken sind die einfachsten animationsfähigen Objekte, denen man keine Interaktivität oder Ton zuweisen kann. Sie orientieren sich allein an der Zeitleiste.
•
MOVIECLIP: Filmsequenzen verfügen über eine eigene Zeitleiste, sodass sie eine Art Unterfilm (Film im Film) und damit eine gute Möglichkeit zur Organisation komplexer Animationen darstellen. Sie werden bei der Erstellung animierter Schaltflächen eingesetzt.
•
SCHALTFLÄCHE: Schaltflächen sind animationsfähige Objekte, die aus vier Einzelgrafiken bestehen und auf Mausaktionen (Berührung, Drücken usw.) reagieren, indem der Film z.B. zu der gespeicherten Stelle in der Zeitleiste springt.
Nur Symbole können animiert werden.
4.1.2
1.
Öffnen Sie die Datei börd1.fla
Da es in diesem Projekt um die Animationstechniken und nicht um eine Wiederholung des vorangegangen geht, haben wir Ihnen die Arbeit erspart, selbst die Ebenen zu erzeugen, die animiert werden sollen. In der geöffneten Datei finden Sie insgesamt 6 Ebenen, von denen zwei Textblöcke enthalten. Der Rest verteilt sich auf Grafikobjekte, die aus anderen Programmen eingebunden oder in Flash erstellt wurden. Inhaltlich soll die Animation Werbung für das Börsenmagazin mit der treffenden Bezeichnung Börd machen, dem man für die Informationen über die Gestaltung seines finanziell abgesicherten Lebensabends unbedingt Vertrauen schenken sollte – laut Werbung. Das Ergebnis dieses Abschnitts finden Sie in der Datei börd2.fla.
Flash MX
82
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
4.1.3
2.
Wählen Sie die Ebene text1 aus
4.1.4
3.
Erzeugen Sie ein Symbol mit F8
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Der alternative Menübefehl lautet EINFÜGEN / IN SYMBOL KONVERTIEREN. Da man jedoch ständig Symbole erzeugen wird, lohnt sich, das Tastaturkürzel zu merken. Wenn Sie eine Animation vollständig im Kopf oder auf Konzeptpapier haben, sollten Sie evtl. sofort die einzelnen Symbole in der so genannten Bibliothek erstellen, die Sie gleich kennen lernen werden. Mit EINFÜGEN / NEUES SYMBOL können Sie auch direkt ein neues Symbol erstellen.
4.1.5
4.
Wählen Sie VERHALTEN: GRAFIK und vergeben Sie den Namen text1
Wenn Sie pro Ebene nur ein Objekt verwalten, wie es im vorliegenden Beispiel der Fall ist, empfiehlt sich eigentlich der Ordnung halber, die gleichen Namen zu verwenden. Im umgekehrten Fall wäre dies natürlich nicht geschickt. Wichtig ist nur, dass eindeutige Namen vergeben werden, damit Sie auch bei vielen Symbolen die Übersicht behalten (wo Sie das machen oder wo Sie sie verlieren können, erfahren Sie später noch – alles zu seiner Zeit).
4.1.6
5.
Bestätigen Sie die Wahl mit OK
4.1.7
6.
Verfahren Sie ebenso mit text2, liniehoch und linietief
Flash MX
83
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
4.1.8 Animation über Schlüsselbilder einrichten Das Ergebnis dieses Abschnitts finden Sie in der Datei boerd3.fla.
4.1.9
1.
Erstellen Sie ein Drehbuch für die Animation der einzelnen Symbole
Zur Koordination der einzelnen Aktionen hilft immer ein Drehbuch, das in den einfachen Fällen dieser Lektion noch in eine Tabelle passt. Bei mehreren Handlungssträngen, die z.B. bei einer Schaltfläche nur bedingt ablaufen können, muss dann schon eine Art Netzplan verwendet werden. Wenn Sie schon einmal den Urlaubsplan für eine ganze Multimediaabteilung gesehen haben und diesen mit einem Messeplan abgleichen wollen, gewinnen Sie eine gute Vorstellung von de Problematik. Die Animation in diesem Fall soll folgendermaßen ablaufen:
Symbol Bild
Aktion
01 – 30
Der Kurvenverlauf kurve wird eingeblendet.
liniehoch 10 20
Der steigender Kurvenverlauf liniehoch wird eingeblendet.
kurve
linietief
21 30
Der fallende Kurvenverlauf linietief wird eingeblendet.
text1
31 40
Der Textblock text1 „Kursverläufe sind verschieden“ wird eingeblendet.
text2
41 50
Der Textblock text2 „Überlassen Sie Experten das Management Ihres Portfolios“ wird eingeblendet.
börd
51 65
Das Logo börd des Wirtschaftsmagazins Börd wird eingeblendet.
Tabelle 4.1: Drehbuch von Börd.fla 4.1.10
2.
Wählen Sie die Ebene kurve aus
4.1.11
3.
Setzen Sie den Mauszeiger auf Bild 30 der Zeitleiste von kurve
4.1.12
4.
Betätigen Sie F6, um ein Schlüsselbild einzufügen
Alternativ können Sie auch EINFÜGEN / SCHLÜSSELBILD oder das Kontextmenü verwenden. In der Abbildung ist das Kontextmenü eingeblendet. Der Bereich zwischen beiden Schlüsselbildern wird schattiert dargestellt, da automatisch Zwischenphasen eingerichtet wurden. In diesem Fall bestehen Sie aus immer dem gleichen Bild: der eingeblendeten Ebene. Nach diesem Bild wird das Symbol nicht mehr eingeblendet. Um ein Schlüsselbild zu entfernen, können Sie EINFÜGEN / SCHLÜSSELBILD LÖSCHEN oder das Kontextmenü verwenden.
Flash MX
84
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.1.13
5.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Verschieben Sie das automatisch erzeugte Schlüsselbild von liniehoch auf Bild 10
Wenn Sie Objekte oder Text direkt auf der Bühne erstellen wie bisher, dann erzeugt dieses Vorgehen automatisch ein entsprechendes Schlüsselbild in der Zeitleiste. Das Verschieben dieses Schlüsselbildes erspart dann die Einrichtung eines neuen, ersten Schlüsselbilds und bedeutet, dass das Objekt erst dann auf der Bühne erscheint, wenn in der Zeitleiste die zu diesem verschobenen Schlüsselbild gehörige Stelle erreicht wird. 4.1.14
6.
Fügen Sie bei Bild 20 ein neues Schlüsselbild für liniehoch ein
Nun wird die Linie mit dem die Anleger verzückenden Kursverlauf von Bild 10 bis 20 angezeigt.
Flash MX
85
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
4.1.15
7.
Verfahren Sie ebenso für linietief und den Bildern 21 und 30
4.1.16
8.
Blenden Sie gleichermaßen text1 zwischen 31 und 40 ein
4.1.17
9.
Wiederholen Sie den Schritt für text2 zwischen 41 und 50...
4.1.18
10.
...und für börd zwischen 51 und 65
ERSTELLEN
Wie Phoenix aus der Asche für geprellte Anleger am Neuen Markt taucht zu guter letzt und vollkommen unpathetisch das Börd-Logo auf. In der Abbildung sehen Sie zusätzlich die komplette Zeitleiste, wie sie für die komplette Animation notwendig ist.
Flash MX
86
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Bilder pro Sekunde
BpS
1 Sekunde 10 Sekunden
20 Sekunden
30 Sekunden
60 Sekunden
12
12
120
240
360
750
15
15
150
300
450
900
Tabelle 4.2: Umrechnungstabelle
4.2
Arbeitserleichterung mit Bewegungs-Tweening
Über die Tweening-Funktionen werden die benötigten Zwischenphasen zwischen zwei Schlüsselbildern selbstständig vom Programm gezeichnet, was natürlich entsprechend viel Arbeit spart. Darüber hinaus werden auch Änderungen wie ein Verschieben der Schlüsselbilder auf der Zeitleiste zur Veränderung der Geschwindigkeit in Echtzeit berücksichtigt und sofort in neue Zwischenbilder berechnet. Dadurch kann man sehr leicht Geschwindigkeiten auf ein gewünschtes Maß ändern, wenn man im Kopf noch nicht anhand der Bildanzahl pro Sekunde eine entsprechende Geschwindigkeit abschätzen kann. Allgemein bedeutet hierbei eine Vergrößerung des Abstandes zwischen zwei Schlüsselbildern, dass die Geschwindigkeit der Animation verlangsamt wird, da mehr Bilder und damit mehr Zeit für die Bewegung (entlang der gleichen Strecke) zur Verfügung steht. Analog bedeutet eine Verkürzung der Distanz auf der Zeitleiste eine Verringerung der Bildanzahl, sodass die Animationsgeschwindigkeit erhöht wird. Jedes Mal errechnet dann die vorgegebene Tweening-Funktion die benötigten Zwischenphasen. Flash bietet zwei verschiedene Tweening-Funktionen, von denen wir Ihnen in dieser Lektion zunächst den Bewegungs-Tween zeigen. Dabei geben mindestens zwei Schlüsselbilder verschiedene Positionen eines Symbols vor. Durch die Tweening-Funktion werden dann die Zwischenphasen von der ersten bis zur folgenden Position erzeugt. Als Abwandlung steht Ihnen noch die Möglichkeit zur Verfügung, Größenänderungen zu animieren. Für Formveränderungen dagegen lernen Sie noch den Form-Tween kennen.
Flash MX
87
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.2.1
1.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Öffnen Sie die Datei skyjet1
In dieser Animation stehen Ihnen bereits auf vier Ebenen verschiedene Objekte zur Verfügung, mit denen eine Animation für die Werbung der Fluggesellschaft Skyjet umgesetzt werden soll. Das Ergebnis dieses Abschnitts finden Sie in der Datei skyjet3.fla.
4.2.2
2.
Erstellen Sie ein Drehbuch für die Animation
Nach dem Bild einer trostlosen grauen Stadtansicht taucht aus der Ferne eine wunderschöne Insel in typischen, kräftigen Südseefarben auf. Das Logo von Skyjet bewegt sich wie ein startendes Flugzeug von links unten nach rechts oben über die Bühne, bis dann zum Schluss der Text mit den fünf Mallorca-Flügen für 99 Euro und Kontaktdaten für kurze Zeit in der Bühnenmitte steht.
Symbol Bild
Aktion
stadt
01 - 19
Objekt stadt wird eingeblendet.
insel
20 - 35
Objekt insel wächst von einer verkleinerten Version zu einer bildfüllenden.
skyjet
36 - 50
Objekt skyjet bewegt sich von links unten zur Mitte.
skyjet
50 – 55
Objekt skyjet bleibt in der Mitte
text
46 - 65
Objekt text bewegt sich von links oben zur Mitte.
skyjet
55 - 75
Objekt skyjet verlässt über die rechte obere Ecke die Bühne.
text
65 – 80
Objekt text bleibt in der Mitte stehen.
Tabelle 4.3: Drehbuch von skyjet6.fla 4.2.3
3.
Blenden Sie stadt zwischen 0 und 19 ein
Beachten Sie bitte, dass sich immer nur ein animiertes Objekt bei Tweening auf einer Ebene befinden darf. 4.2.4
4.
Setzen Sie das Schlüsselbild für insel auf Bild 20
Die beiden restlichen Ebenen schieben Sie am besten immer auf einen Platz, der genügend weit entfernt auf der Zeitleiste liegt, damit die auf ihr liegenden Objekte nicht in de Ansicht erscheinen.
Flash MX
88
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.2.5
5.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Verkleinern Sie das Objekt insel auf ein Viertel
Ziel ist ja, dass die Insel sich wie in einem Traum von fern her in die Animation schiebt. Dazu muss natürlich im ersten Bild eine möglichst kleine Insel vorgegeben werden. Über den BewegungsTween wird dann die Vergrößerung(-sbewegung) automatisch animiert. 4.2.6
6.
Setzen Sie ein Schlüsselbild für insel auf Bild 35
4.2.7
7.
Vergrößern Sie das Objekt insel bildfüllend
4.2.8
8.
Markieren Sie den Bereich 20 bis 35
4.2.9
9.
Wählen Sie TWEENING: BEWEGUNG und SKALIEREN
Im sich automatisch öffnenden Eigenschaften-Inspektor werden sämtliche Einstellungen für die Tweening-Funktionen vorgegeben. Um eine einfache Bewegung mit der Tweening-Unterstützung einzurichten, genügt die Auswahl BEWEGUNG im Tweening-Auswahlmenü. SKALIEREN ist hierbei von Bedeutung, da ja zusätzlich zur Bewegung auch noch die Größenveränderung berücksichtigt werden soll. Diese Aktion tauscht die hellgrau unterlegten Zwischenphasen in der Zeitleiste gegen eine violett schattierte Fläche mit einem durchgezogenen Pfeil aus. Durch die Größenveränderung wirkt die Zwiebelschalenansicht wie eine Unschärfe, da die Bewegung sich hier eben in Wirklichkeit auf die Skalierung bezieht.
Flash MX
89
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Tweening-Optionen
Option
Bedeutung
Abbremsen
Positive Werte zwischen 1 und 100 ein verlangsamen die Animation zum Ende hin. Negativen Werte zwischen -1 und -100 beschleunigen die Animation zum Ende hin.
Effekt (nur geeignet für eckige Formen) Drehen
Verteilt stellt die Formen in den Zwischenbildern weicher dar. Winkelförmig stellt die Formen in den Zwischenbildern mit mehr Ecken und geraden Linien dar.. Drehungen der animierten Form im/gegen den Uhrzeigersinn (UZS) gemäß der eingetragenen Umdrehungszahl. Automatisch wählt die Drehung mit der kleinsten Bewegung.
Synchronisieren Entspricht die Animationsdauer der Grafikinstanz (bei Movieclips oder Schleifen) keinem geraden Vielfachen der für die Animation vorgesehen Dauer in der Hauptzeitleiste (z.B. Szene 1), wird dies entsprechend berücksichtigt. Tabelle 4.4: Optionen im Eigenschaften-Inspektor Das Ergebnis dieses Abschnitts finden Sie in der Datei skyjet4.fla.
4.2.10
10. Richten Sie bei Bild 35 ein Schlüsselbild für skyjet ein, das in der rechten unteren Ecke liegen soll
Direkt nach dem Erscheinen der Insel stellt sich zwangsläufig die Frage, wie man denn vor dem grauen, tristen und abgasverhangenen Großstadtdschungel an diesem Traumstrand Zuflucht finden kann. Glücklicherweise verfügt diese Stadt über die Fluglinie Skyjet, deren Logo sich nun ganz bescheiden wie ein startendes Flugzeug über die Bühne bewegen soll. Daher startet diese Bewegungsanimation erst einmal in der linken unteren Ecke.
Flash MX
90
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
4.2.11
11. Richten Sie bei Bild 50 ein Schlüsselbild für skyjet ein, in dem das Objekt in der Mitte der Bühne steht
4.2.12
12. Erzeugen Sie einen Bewegungs-Tween zwischen den Schlüsselbildern bei Bild 50 und Bild 35
4.2.13
13. Richten Sie bei Bild 45 ein Schlüsselbild für text ein, in dem das Objekt an der rechten oberen Bühnenecke erscheint
Interessant wird es hier nun deswegen, weil sich zwei Bewegungs-Tweens kreuzen sollen. Während sich das Objekt skyjet noch wenige Bilder über die Bühne bewegt, beginnt auch text mit seinem Anflug auf die Bühne. In diesem Text macht nun die Heil bringende Luftfahrtgesellschaft sachlich und prägnant deutlich, wie oft und für wie viel Gegenwert ein jeder Großstadtgeplagte zur Trauminsel – die sich hier als Mallorca entpuppt – entschweben kann. 4.2.14
14. Richten Sie nun ein Schlüsselbild für text bei Bild 65 ein, in dem der Text in der Mitte der Bühne steht
4.2.15
15.
Erzeugen Sie einen Bewegungs-Tween zwischen Bild 65 und Bild 45 für text
Die Zwiebelschalenansicht in der Abbild zeigt deutlich, dass die Tween-Funktion für den Text deutlich mehr bewegte Zwischenphasen erzeugt als für das Logo. Während bei Bild 50 das Logo bereits in der Mitte der Bühne sein Ziel erreicht hat, bewegt sich der Text mit deutlich langsamerer Geschwindigkeit und wird den Mittelpunkt erst 15 Bilder später erreichen. Im nächsten Bild ist dann das Logo auch gar nicht mehr zu sehen.
Flash MX
91
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei skyjet5.fla.
4.2.16
16. Richten Sie bei Bild 75 ein Schlüsselbild für skyjet ein, in dem das Objekt sich an der rechten oberen Bühnenecke befindet
Zum Schluss benötigen wir noch die Flugbewegung des Logos aus der Animation heraus. Der Endpunkt befindet sich dementsprechend in der rechten oberen Ecke. 4.2.17
17.
Erzeugen Sie einen Bewegungs-Tween für skyjet zwischen Bild 55 und Bild 75
Nachdem das Logo nun also eine Weile in der Mitte der Bühne gewartet hat, verschwindet das wieder, wobei es seine ursprüngliche Richtung beibehält. 4.2.18
18.
Fügen Sie für text ein Schlüsselbild bei Bild 80 ein
Hier soll der Text einfach bis genau Bild 80 (dem Ende der gesamten Animation) auf der Bühne lesbar sein, ohne dass er sich bewegt. Wie Sie sehen, wird automatisch ein Bewegungs-Tween eingefügt. Weil wir vorher bereits die Bewegung für das Logo erzeugt haben und sich Beides nun überlagert, wird das Standbild des Textes ebenfalls durch Zwischenphasen erzeugt. Zusätzlich wird auch ein weiteres Schlüsselbild bei Bild 75 eingefügt, wo das Logo die Bühne komplett verlässt. Diese automatisch erzeugten Schlüsselbilder und Zwischenphasen dienen dazu, Animationen für weitere Veränderungen (z.B. Geschwindigkeitsmodifikationen) bereit zu halten.
Flash MX
92
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Bei überlappenden Bewegungen werden „Standbilder“ anderer Symbole ebenfalls durch Tweens erzeugt.
4.3
Bibliothek und Instanzen
In den zurückliegenden Animationen haben wir (natürlich) ein paar Geheimnisse verschwiegen. Nicht, damit diese Geheimnisse auf immer geheim blieben, aber damit Sie Anknüpfungspunkte an Ihre Erfahrungen mit z.B. animierten GIFs oder Grafikerstellung mit verschiedenen Ebenen hatten, werden wir jetzt ins Spinnennetz von Bibliotheken und Instanzen einsteigen. Vermutlich waren Sie schon misstrauisch und haben sich gefragt, wohin die Symbole eigentlich verschwinden, die Sie mit F8 erzeugt haben. Oder Sie haben sich gewundert, ob es wirklich eine gute Programmorganisation ist, sämtliche Objekte, die animiert werden sollen, auf einzelnen Ebenen zu verteilen. Um also komplexe Animationen oder den einfachen Form-Tween zu erstellen, benötigen Sie so genannte Instanzen von Symbolen. Wenn Sie programmieren können, dann sollte Ihnen der Hinweis genügen, dass ein Symbol als Klasse fungiert, während die Instanzen mit den Objekten vergleichbar sind. Nachdem Sie ein Objekt auf der Bühne gezeichnet haben und zu einem Symbol transformiert - oder wie in dieser Lektion direkt erstellt – haben, wird es in die Bibliothek eingeordnet. Dort steht es dann als Schablone für den Einsatz im Film zur Verfügung. Im Film wird also nicht das gezeichnete Objekt, sondern eine Instanz des Symbols verwendet. Dies hat den Vorteil, der schon bei der Einführung der Symbole erwähnt wurde, dass der Speicherplatz verringert wird. Farbe, Größe und Funktion einer Instanz dürfen vom Symbol abweichen. Ändert man die Eigenschaften eines Symbols im so genannten Symbol-Bearbeitungsmodus, werden automatisch auch die Instanzen aktualisiert. Änderungen der Instanz hingegen haben keine Auswirkung auf das in der Bibliothek abgelegte Symbol. Symbole werden in der Bibliothek gespeichert. Instanzen sind Symbol-Kopien im Film.
4.3.1 Symbole in der Bibliothek neu erzeugen Da wir oben bereits vom Spinnennetz gesprochen haben, trainieren Sie den Umgang mit der Bibliothek und den Instanzen auch mit einer passenden Animation – mit Spinnen und einem Spinnennetz. Im Symbol-Bearbeitungsmodus treffen Sie auf den gleichen Hintergrund wie im Film. Anstatt nur mit einer Ebene können Sie wie in der nächsten Lektion auch mit mehreren Ebenen
Flash MX
93
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
arbeiten. Wenn Sie ein aus mehreren Ebenen bestehendes Symbol nachher in einem Film als Instanz einfügen, erhalten Sie ein Gruppierung. Das Ergebnis dieses Abschnitts finden Sie in der Datei spinne1.fla.
4.3.2
1. Erstellen Sie einen neuen Film mit 300 Pixel Breite / 150 Pixel Höhe, weißen Hintergrund und 12BpS
4.3.3
2.
Legen Sie zwei Ebenen namens spinne und spinnennetz an
Als Schmankerl oder als Novum werden wir nun keine Objekte direkt in diesen Ebenen erstellen, sondern sie lediglich für die Animation benutzen. 4.3.4
3.
Wählen Sie FENSTER / BIBLIOTHEK
In dieser Ansicht werden sämtliche Symbole abgespeichert und können Änderungen an Ihnen vorgenommen werden. Zurzeit ist sie natürlich leer. Sobald die Bibliothek ein wenig unübersichtlich wird, kann man über Ordner wieder für eine gute Sortierung sorgen. •
Symbole und Ordner werden über die entsprechenden Schaltflächen am unteren Fensterrand der Bibliothek erzeugt.
•
Elemente und Ordner, die im Laufe der Arbeit bedeutungslos geworden sind, können über Entf oder die Papierkorb-Schaltfläche gelöscht werden.
•
Symboleigenschaften können eingesehen und nachträglich verändert werden.
4.3.5
4.
Wählen Sie NEUES SYMBOL erstellen
Für die Erstellung eines Symbols können Sie alternativ auch EINFÜGEN / NEUES SYMBOL wählen, wenn Sie die Bibliothek noch nicht geöffnet haben. Symbole können ohnehin nur im SymbolBearbeitungsmodus geändert werden, da sie auf der Bühne lediglich als Schauspieler arbeiten. Daher ist es bei komplexen Animationen gar nicht nötig, sie direkt auf der Bühne zu erstellen. Der Vorteil bestand allerdings zu Anfang darin, dass die Größenverhältnisse einfacher zu überschauen waren. 4.3.6
5.
Erstellen Sie in einem Textfeld eine Spinne
Im Webdings-Zeichensatz befindet sich ein Spinnensymbol und ein passendes, elegant-maschiges Eigenheim, das Sie am über Umschalt-1 und Umschalt-2 einfügen. Verwenden Sie ein dunkles Grau für unsren neuen, achtbeinigen Freund, denn das Spinnennetz soll in einem hellen Grau erzeugt werden. Über SZENE1 in der Titelleiste kehren Sie zur Szene 1 zurück.
Flash MX
94
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.3.7
6.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Richten Sie den Mittelpunkt genau zentriert im Symbol aus
Wie Sie bereits gesehen haben, existiert im Symbol-Bearbeitungsmodus das gleiche Kreuz, das Symbole erhalten. Es zeigt den Mittelpunkt, um den das Objekt gedreht werden kann. Nur hier können Sie den Mittelpunkt verändern, indem Sie einfach das Objekt mit der Maus oder den Pfeiltasten genau positionieren. Da die Instanzen der Spinne sich gleich im Netz bewegen sollen und dazu an den Kreuzungen gedreht werden müssen, ist es hier zweckmäßig, den Mittelpunkt genau kurz unterhalb des Spinnenkopfs zu setzen. In Symbolen können ebenfalls mehrere Ebenen verwendet werden.
4.3.8
7.
Fügen Sie in einem neuen Grafik-Symbol das Spinnennetz ein
Natürlich wäre es für die Animation am schönsten, wenn das Spinnennetz sich über die Breite der Bühne erstrecken würde, obwohl das Spinnennetz-Zeichen des Zeichensatzes ursprünglich quadratisch ist. Dies könnten Sie entweder jetzt bereits im Symbolbearbeitungsmodus erledigen, wenn das Netz mehrfach eingefügt werden sollte, da sich ja diese Änderung auf alle Instanzen auswirkt, oder erst später im Film. Dies hätte den Vorteil, das man verschiedene Netze benutzen könnte, da sie ja alle noch geändert werden könnten.
4.3.9 Instanzen erzeugen und ändern Eine andere Möglichkeit als die der vorherigen Projekte, die sich mehr an die Erstellung von animierten GIFs anlehnte, besteht nun darin, dass die Symbole aus der Bibliothek direkt in die Bühne gezogen werden. Dabei werden sie zu Instanzen.
Flash MX
95
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei spinne2.fla.
4.3.10
1.
Wechseln Sie in die Szene1 von spinne1.fla
Achten Sie darauf, dass bereits ein Schlüsselbild angelegt ist, da nur in ein bereits existierendes Schlüsselbild Instanzen abgelegt werden können. 4.3.11
2. Ziehen Sie per Drag&Drop das Symbol Spinnennetz in die Ebene spinnennetz beim Punkt (150, 75)
Hier müssen Sie darauf achten, dass vorher die Ebene markiert wurde, da sonst natürlich in eine andere markierte Ebene die Instanz eingefügt würde. Es ist wichtig, dass die Instanz des Spinnennetzes zentriert ist, da bei der Animation ein kleiner Einblendeeffekt erzeugt werden soll. Dazu werden die Instanzen der einzelnen Zwischenphasen einzeln geändert und müssen sich natürlich genau überlagen. Eine Ausrichtung erfolgt hier am Mittelpunkt der Instanz. Über AUSTAUSCHEN können Sie eine Instanz gegen eine andere austauschen.
Im Eigenschaften-Inspektor finden Sie verschiedene Informationen, die die erzeugte Instanz betreffen wie z.B. der Name des Bibliothekelements, auf das sie sich bezieht sowie die aktuellen Skalierungs- und Positionierungsdaten im linken Bereich. Diese Textfelder ersetzen das InfoBedienfeld. Beachten Sie allerdings, dass die Informationen für die Positionierung den Daten entsprechen, die das Info-Bedienfeld nur anzeigt, wenn sie vom Zentrum aus abgerufen werden: (150, 75). Sobald Sie die linke obere Ecke positionieren wollen, müssen Sie also wieder auf das Info-Bedienfeld zurückgreifen.
4.3.12
3. Kopieren Sie das erzeugte Schlüsselbild vier Male in der Zeitleiste der Ebene spinnennetz
4.3.13
4.
Wechseln Sie zum ersten Schlüsselbild
4.3.14
5.
Verändern Sie die Helligkeit der einzelnen Instanzen zu 80, 60, 40 und 20 %
Wie Sie im Eigenschaften-Inspektor sehen, haben Sie verschiedene Möglichkeiten, die Farbeinstellungen einer Instanz zu ändern. Es ist nicht nur möglich, Helligkeiten zu verändern, sondern auch den Farbton, wobei verschiedene Möglichkeiten zur Verfügung stehen, auf die einzelnen Farben zuzugreifen. Bei der Animation werden Sie später noch sehen, dass auch Skalierungen und Drehungen möglich sind.
Flash MX
96
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
•
AUS schaltet die Schaltflächen für Farbänderungen komplett aus
•
HELLIGKEIT erzeugt einen Schieberegler für die Helligkeitsänderungen (positive Zahl: helle Instanz)
•
FARBTON öffnet ein Farbauswahlfeld und RGB-Textfelder für die Farbauswahl
•
ALPHA erzeugt einen Schieberegler für Helligkeitsänderungen
•
ERWEITERT öffnet ein Dialogfenster mit RGB- und Alpha-Kanal-Schiebereglern
Da das Spinnennetz dramatisch eingeblendet werden soll, stellen Sie wie in der Abbildung für das erste Schlüsselbild die Helligkeit auf 80 und verringern diese Zahl in Zwanziger-Schritten bis 20. Im letzten Schlüsselbild beträgt sie dann 0, was dem Originalzustand in der Bibliothek entspricht und für die restliche Animation nicht mehr geändert werden soll.
4.3.15 Symbole nachträglich bearbeiten Jetzt haben wir so viele Instanzen erzeugt, dass es nicht gerade angenehm wäre, die Größenanpassung auf eine bildfüllende Ansicht einzeln für jede Instanz vorzunehmen. Zum Glück ist dies ganz einfach über eine Änderung des Symbols zu lösen. Das Ergebnis dieses Abschnitts finden Sie in der Datei spinne3.fla.
4.3.16
1.
Doppelklicken Sie in der Bibliothek auf das Grafik-Symbol-Zeichen
Wenn Sie stattdessen auf den Eintrag klicken, können Sie den Namen des Symbols ändern. Alternativ gelangen Sie in den Bearbeitungsmodus über das Kontextmenü oder BEARBEITEN / SYMBOLE BEARBEITEN. 4.3.17
2.
Verändern Sie die Größe des Symbols zu 300 Pixel Breite und 150 Pixel Höhe
Verwenden Sie dazu das Bedienfeld Info oder die beiden Textfelder für die Ausdehnung im Eigenschaften-Inspektor. Wichtig ist hier, dass der Mittelpunk nicht verschoben wird. Den könnten Sie dann wieder über den Eintrag im Koordinatensystem ändern.
Flash MX
97
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.3.18
3.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Verlassen Sie den Bearbeitungsmodus und kehren Sie zur Szene1 zurück
Dort können Sie sich nun über die geänderten Instanzen in unterschiedlichen Helligkeitsstufen freuen, die sich bühnenfüllend als Hintergrund für die Animation ausbreiten. Gerade für NichtSpinnen ist so ein schnelles Änderungsverfahren bei Netzgrößen wie in diesem konkreten Beispiel sehr praktisch.
4.3.19 Instanzen animieren Über die Animation von Instanzen rücken nun speicherschonend ganz neu Möglichkeiten in greifbare Nähe. Das Ergebnis dieses Abschnitts finden Sie in der Datei spinne5.fla.
4.3.20
1.
Fügen Sie für die Ebene spinnennetz ein Schlüsselbild bei Bild 35 ein
Das Spinnennetz soll unanimiert im Hintergrund erhalten bleiben, während die Spinne über ihr Netz läuft.
Flash MX
98
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
4.3.21
2.
Fügen Sie ein leeres Schlüsselbild bei Bild 5 für die Ebene spinne ein
4.3.22
3.
Ziehen Sie das Symbol Spinne an den rechten Zipfel des Netzes
4.3.23
4.
Drehen Sie die Instanz, sodass die Spinne passend auf dem Faden sitzt
4.3.24
5. Fügen Sie bei Bild 15 ein neues Schlüsselbild ein, in dem die Spinne an der zweiten Gabelung steht
4.3.25
6.
4.3.26
7. Drehen Sie die Instanz in einem neuen Schlüsselbild bei Bild 16, sodass die Spinne den Faden entlang nach oben laufen kann
Flash MX
Erzeugen Sie einen Bewegungs-Tween zwischen Bild 5 und 15
99
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.3.27
8.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Lassen Sie die Spinne über das Netz laufen
Bei diesem Richtungswechsel verläuft die Grundstruktur immer über die gleichen zwei Schritte: Zunächst wird der Endzustand der vorhergehenden Bewegung in einem Schlüssel festgelegt. Die Bewegung wird über den Bewegungs-Tween erzeugt. Dann muss die Spinnen-Instanz in einem direkt anschließenden Schlüsselbild die nächste Bewegungsrichtung annehmen über eine Drehung. Als Ergebnis erhält man in der Zeitleiste immer zwei direkt nebeneinander liegende Schlüsselbilder, wobei zwischen diesen Schlüsselbildpaaren (Ankunft, Drehung) ein BewegungsTween liegt.
4.3.28
9.
Erstellen Sie die Bewegung gemäß der Abbildung
4.3.29 Zusätzliche Bibliotheksfunktionen Die Bibliothek bietet Ihnen verschiedene weitere Funktionen für den Austausch von Symbolen zwischen Filmen und innerhalb der Animation.
Flash MX
100
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
1. Um von einem Quellfilm die Bibliothekselemente als Bestand in einen Zielfilm einzufügen, stehen drei einfache Techniken zur Verfügung:
Funktion
Vorgehensweise
Zwischenablage •
Drag&Drop
Import
auswählen der Elemente auf der Bühne im Quellfilm
•
BEARBEITEN / KOPIEREN
•
im Zielfilm die Elemente über BEARBEITEN / EINFÜGEN in die Bühne einfügen
•
beide Bibliotheken nebeneinander positionieren
•
benötigte Elemente per Drag&Drop vom Quell- zum Zielfilm bringen
•
im Zielfilm wählen DATEI / ALS BIBLIOTHEK ÖFFNEN
•
wählen des Quellfilms
•
per Drag&Drop benötigte Symbole aus der Bibliothek des Quellfilms in die Bühne oder die Bibliothek des Zielfilms ziehen
Tabelle 4.5: Bestände von einem Quell- zu einem Zielfilm übertragen 2. Sie können Instanzen in der Animation durch andere Instanzen austauschen, indem Sie im Eigenschaften-Inspektor der Instanz auf die Schaltfläche AUSTAUSCHEN klicken und ein anderes Symbol wählen. Die Animationseigenschaften werden dabei komplett übernommen. 3. In der Bibliothek können Sie über einen Doppelklick und ERNEUTES IMPORTIEREN das komplette (Bild-)Symbol ersetzen. Dies eignet sich gerade für Aktualisierungen. 4. Über so genannte Shared Libraries können Bibliotheksbestände für verschiedene Filme gleichzeitig genutzt werden. Dies eignet sich für Teams und größere Projekte, insbesondere bei automatischen Aktualisierungen.. Die Symbole sollten dabei allerdings wieder in den Zielfilm importiert werden, sobald die Dateien versendet werden, da nur Verknüpfungen existieren.
4.4
Form-Animation mit Tween
Die zweite große Hilfe des Tweening besteht in den Form-Tweens, wobei der Zustand in zwei Schlüsselbildern ineinander überläuft. In den Zwischenphasen erstellt die Tweening-Funktion automatisch die kleinschrittigen Formveränderungen bzw. die Morphing-Stadien. Wenn Sie nicht schon die kleine Spinne bei ihrem Lauf über das Spinnennetz in einen Erschöpfungszustand getrieben haben, können Sie nun Ihre Begeisterung gleich mit der ganzen Welt teilen und die Welt in das Logo der Zeitung globus transformieren und – gnädigerweise – wieder zurück.
4.4.1 Einfaches Morphing Da bei der Verwendung des Form-Tweens mehr Schritte als sonst zu durchlaufen sind, lernen Sie zunächst die Grundstruktur in diesem Abschnitt kennen, ehe Sie dann mit so genannten Formmarken auf die Bilddetails zugreifen. Der grundlegende Unterschied zum Bewegungs-Tween
Flash MX
101
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
liegt darin, dass die Instanzen über (ggf. mehrfaches) MODIFZIEREN / TEILEN wieder in ihre Bestandteile aufgelöst werden müssen. Nur so ermöglichen Sie der Funktion, auf die einzelnen Pfadpunkte zuzugreifen. Das Ergebnis dieses Abschnitts finden Sie in der Datei welt4.fla.
4.4.2
1.
Öffnen Sie globus1.fla
In dieser Datei befindet sich zunächst nur ein ozeanblauer Hintergrund und Bibliothek mit zwei Symbolen: welt und logo. Sie können diese beiden Objekte auch wiederum selbst mit Hilfe des Zeichensatzes Webdings erzeugen, indem Sie eine grüne Weltkarte und für das Logo der Zeitschrift den Kreis, den Haken und den Text globus erstellen. Interessant an diesem Symbol ist, dass es aus drei Ebenen besteht, die jeweils eines der drei Objekte enthalten.
4.4.3
2.
Fügen Sie eine Instanz des Symbols welt in ein Schlüsselbild bei Bild 1 ein
Die Welt sollte möglichst zentriert im Weltmeer ausgerichtet sein. Hoffnungen, nachträgliche Positionsänderungen würden sich auf die beim Tweening erstellten Zwischenphasen auswirken, sind nur unter besonderen Bedingungen begründet. Da gleich die komplexe Weltkarte geteilt wird, muss man bei nachträglichen Änderungen sicher sein, auch die gesamte Form (in diesem Fall alle Inseln) ausgewählt zu haben. Dies kann bei mehrfarbigen Objekten problematisch werden, wie Sie schon im zweiten Projekt gesehen haben.
Flash MX
102
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.4.4
3.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Wählen Sie MODIFIZIEREN / TEILEN
Da der Form-Tween sämtliche Pfadpunkt und Füllbereiche verändert, können nur vollständig geteilte Objekte animiert werden. Dadurch gehen leider der Bezug zur Bibliothek und die Vorteile einer Instanz verloren.
4.4.5
4.
Erstellen Sie ein neues, leeres Schlüsselbild bei Bild 45
Es ist hier wichtig, dass ein leeres Schlüsselbild erzeugt wird, damit nicht der gleiche Inhalt, also die geteilte Weltkarte, hier wieder erscheint. Stattdessen soll ja als Endstadium das Logo der Zeitschrift einzufügen. 4.4.6
5.
Fügen Sie eine Instanz von logo ein
4.4.7
6.
Wählen Sie zwei Mal MODIFZIEREN / TEILEN
Beim ersten Teilen wird die Gruppierung gelöst, sodass man nun auf die einzelnen Objekte (Text, Kreis und Häkchen) zugreifen könnte. Das reicht für den Form-Tween allerdings nicht, sodass alle drei Objekte noch einmal geteilt werden müssen, um Pfade und Füllungen auszuwählen. Dies entspricht dem Teilen bei Text, das Sie bereits kennen gelernt haben. Auch zusammengesetzte Objekten werden beim ersten Teilen nur in ihre Bestandteile aufgelöst.
Flash MX
103
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.4.8
7.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Markieren Sie den Bereich und wählen Sie TWEEN: FORM
Die markierten Zwischenphasen werden nun grün unterlegt.
4.4.9
8. Verfolgen Sie mit Zwiebelschalen oder einem Einzelbildvergleich die Entwicklungsstadien
Interessant ist besonders, wie das l von global sich aus Hawaii und Australien zusammensetzt und leider durch die Zeichenform wie eine Wand auf der Bühne steht. Dies wird natürlich noch durch die unscharfen Ränder in der Breite verstärkt. Sehr schön dagegen ist die Entstehung des Häkchens aus Asien heraus. Weil es sozusagen einfach aus den grünen Weiten entsteht und langsam bis zur Endgröße wächst, sammelt sich viel Interesse auf dieses Detail. Dies harmoniert auch schön mit dem helleren Grün, das sich dann – aus Afrika kommend – zum grauen Kreisbogen formt. Und besonders nett ist sicherlich auch, wie die beiden amerikanischen Kontinente langsam kleiner werdend im unteren S-Bogen verschwinden. Vermutlich sind Sie, soweit Sie diese Zeilen trotz Ihrer Begeisterung überhaupt gelesen haben, fest von Ihren Fähigkeiten überzeugt, aber – mal ehrlich – Flash hat schon ein wenig nachgeholfen...
Flash MX
104
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.4.10
9.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Lassen Sie die Animation bis zum Bild 90 umgekehrt ablaufen
Kopieren Sie dazu einfach das erste Schlüsselbild (enthält die Weltkarte) an die Position 90 und fügen Sie einen analogen Form-Tween ein wie zuvor. Da sich die beiden Weltkarten im Anfangund Endbild überlagern, entsteht der Eindruck einer wirklich fließenden Schleifenbewegung.
4.4.11 Mit Formmarken die Transformation beeinflussen Wie Sie im letzen Abschnitt schon gesehen haben, sind die Ergebnisse sehr beeindruckend. Aber ein paar Zwischenphasen stellten sich ja nicht gerade als überzeugend heraus. Für eine schnelle Animation kurz vor der Pause ist das sicherlich in Ordnung, aber bei genauen Kundenwünschen muss man schon mal genauer festlegen, wie die Transformation ablaufen soll. Diesen gezielten Eingriff erlauben Formmarken. Da für das Setzen solcher Formmarken bereits ein Form-Tween vorhanden sein muss, setzen wir die Werbung für globus fort. Bereits wenige Formmarken verändern die Transformation erheblich, da die durch eine Marke herausgehobenen Punkte nicht geändert werden. Flash stellt insgesamt 26 Formmarken zur Verfügung, die als automatischen Namen die Buchstaben des Alphabets tragen. Sollten auch Formmarken nicht die gewünschte Wirkung erzielen, empfiehlt es sich stets, über spezielle Schlüsselbilder gewünschte Zwischenstadien einzurichten und danach die Transformation fortzuführen. Das Ergebnis dieses Abschnitts finden Sie in der Datei globus4.fla.
4.4.12
1.
Suchen Sie störende Animationsverläufe
Im vorliegenden Fall störte ja ein wenig, dass das l sich durch seinen unscharfen Rand so überaus deutlich in den Vordergrund schob. Da es – vergleichen Sie es einmal durch ein Übereinanderschieben beider Objekte – aber direkt über Nordamerika liegt, besteht kein Grund zu dem mehrfach erzeugten Rand beim Morphing. Hier wäre also eine sinnvolle Möglichkeit, mit einer Formmarke das l wie mit einer Reißzwecke auf der Bühne zu befestigen.
Flash MX
105
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Das Ergebnis dieses Schritts finden Sie in der Datei globus5.fla.
4.4.13
2. Setzen Sie Formmarken über MODIFZIEREN / TRANSFORMIEREN / FORMMARKE HINZUFÜGEN in die Grafik
Wählen Sie zunächst einfach den Befehl. Die Formmarke in Gestalt eines roten Punktes wird an einer beliebiger Stelle auf der Bühne eingefügt. Sie müssen sie danach an die gewünschte Position verschieben. 4.4.14
3.
Verschieben Sie die Formmarken an die gewünschten Punkte
Mit Bedacht haben wir für dieses Beispiel eine Weltkarte und nicht eine Pergamentrolle mit verwaschenen Hieroglyphen ausgewählt. Die erste Formmarke platzieren Sie also in Winnipeg und die zweite dagegen in Acapulco. Diese beiden Punkten werden also fixiert, was die Animation deutlich verbessern wird. Zum Vergleich können Sie ja die umgekehrte ablaufende Transformation ab Bild 45 unverändert als Vergleich lassen.
4.4.15
4.
Kontrollieren Sie die neuen Zwischenphasen
Die Animation verläuft nun komplett anders. Das Ziel, das l direkt aus Nordamerika entstehen zu lassen, ist unter Einsatz der zwei Formmarken erreicht. Zusätzlich bildet sich recht ansehnlich das g aus Hawaii heraus, während ganz Eurasien im Häkchen und Kreis verschwindet.
Flash MX
106
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.5
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Automation mit Pfadebene
Nach diesem Eintauchen ins Spinnennetz der automatische Animation, wird es nun deutlich harmloser, ja, fast müsste man in Ferienstimmung geraten, denn mit dem letzten Animationswerkzeug erspart sich das lästige Ausrichten von Instanzen. Sollten Sie sich gefragt haben ob es nicht einfacher wäre, unseren neuen achtbeinigen Freund mit Hilfe einer vorgezeichneten Linie über das Spinnennetz zu navigieren, werden Sie hier in keinem Fall enttäuscht. Die Pfadebene enthält nämlich genau diesen vorgezeichneten Weg, mit dem dann die zu animierende Instanz verknüpft wird. Dies bietet sich natürlich gerade bei runden und weichen Formen besonders gut an, da hier der normale Bewegungs-Tween mit seiner linearen Bewegung nicht mehr aushelfen kann. Das Ergebnis dieses Abschnitts finden Sie in der Datei wetter2.fla.
4.5.1
1.
Öffnen Sie die Datei wetter1.fla
Als Erholung nach der schweren Arbeit mit Spinnen und Globaltransformationen dreht sich nun alles wieder um Urlaub, und dieses Mal geht es nicht nach Mallorca, sondern in den Süden Frankreichs. Dort hat eine Multimedia-Firma eine Animation entwickelt, die eiskalt behauptet, heiße Sonne könne man im Städtchen Ville-Soleil garantieren. In der Bibliothek finden Sie verschiedene Elemente wie eine kleine Regenwolke, eine Schäfchenwolke, die Sonne und ein paar Textbrocken, die in der Zeitleiste bereits mit einfachen, linearen Bewegungs-Tweens animiert sind. Wenn Sie die komplette Animation nachbauen wollen, finden Sie die kleinen Grafiken wiederum in den Webdings.
Symbol
Bild
Aktion
sonne
01 - 29
Objekt sonne wird eingeblendet.
Flash MX
107
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
urlaub...
01 - 09
Objekt urlaub... wird links unterhalb der Sonne eingeblendet.
regenwolke
01 - 09
Objekt regenwolke bewegt sich größer werdend von lins oben zur Sonne.
regenwolke
10 - 16
Objekt regenwolke verdeckt kurz die Sonne.
regen?!
10 - 19
Objekt regen?! wird rechts von der Sonne in dramatischem Rot eingeblendet.
schaefchenwolke 17 – 44 Objekt regenwolke verliert die Regentropfen dank heißer Sonne. Objekt schaefchenwolke wandert gemütlich nach links unten. werbung
20 - 45
Objekt werbung wird unten rechts eingeblendet.
sonne
30 - 35
Objekt sonne wandert sonnentypisch nach rechts unten und platziert sich kurz vor der Werbung..
Tabelle 4.6: Drehbuch für die Animation wetter3.fla
4.5.2
2.
Richten Sie eine Pfadebene ein
Vorausgesetzt wird, dass bereits eine Bewegung bzw. eine Animation auf einer Ebene vorhanden ist. Das ist genau der Fall, denn die Regenwolke bewegt sich bereits mit zunehmendem Volumen auf die Sonne zu. Um nun für eine Ebene, die bereits eine Animation enthält, eine Führungsebene hinzuzufügen, wählen Sie entweder die Schaltfläche PFAD-EBENE EINFÜGEN oder EINFÜGEN / PFAD. Die Ebene regenwolke wird als Resultat unter einer neuen Ebene Pfad:regenwolke eingerückt, wobei die Ebene sich über die gesamte Zeitleiste bis zum Bild 45 erstreckt.
Flash MX
108
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.5.3
3.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Zeichnen Sie den Bewegungspfad in die Führungsebene
Prinzipiell können Sie auch an bereits existierenden Objekten (Raupe bewegt sich an einem Ast entlang) die Bewegungsanimation ausrichten. Wichtig ist da jedoch wie bei einer Bewegung ohne Bodenkontakt, dass in der Führungsebene die genaue Bewegung nachgezeichnet wir. Dazu verwenden Sie am besten den Zeichenstift und eine klare Linie. Wenn wie vielleicht in diesem Fall nicht ganz klar sein sollte, wo die Bewegung enden soll, ist es problemlos möglich, über das Einblenden der anderen Objekte wie z.B. den Werbungstext die genaue Endposition zu ermitteln.
4.5.4
4.
Verknüpfen Sie bei Bild 17 die Schäfchenwolke mit dem Pfad
Setzen Sie im ersten Bild der Animation den Mittelpunkt des Objekts schaefchenwolke genau auf den Anfangspunkt des Pfads. Analog verknüpfen Sie den Mittelpunkt im letzen Bild mit dem Endpunkt des Animationspfads.
4.5.5
5.
Vergleichen Sie die Wolkenbewegung mit dem Animationspfad
Sofern man alle anderen Ebenen ausblendet und die Zwiebelschalenansicht auf die nun weiche Wolkenbewegung begrenzt, stellt man fest, dass von der ehemals linearen Bewegung nichts mehr zu merken ist, sondern sich die Zwischenphasen akribisch genau am Pfad ausrichten. Da der
Flash MX
109
MIT SCHLÜSSELBILDERN, SYMBOLEN
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Mittelpunkt der Wolke unterhalb der sichtbaren Wolkenbegrenzung liegt, bewegt sich die Wolke oberhalb des Pfads entlang.
4.5.6 Pfad-Optionen im Eigenschaften-Inspektor Aus der Perspektive eines Animationspfads (und das kann an gewissen Tagen eine bedeutsame Perspektive sein) teilt sich die Welt in drehende und nicht-drehende Objekte auf. Die Schäfchenwolke in Urlaubsstimmung aus Ville-Soleil gehört bspw. zu den nicht-drehenden Objekten. Während sie dem Pfad folgt, bleibt die gerade Unterseite weiterhin horizontal. Für animierte Wolken ist dies ein akzeptabler Zustand, aber für Autos, die z.B. zu den drehenden Objekten gehören, wäre es untragbar. Folgendes Beispiel wird dieses Grundproblem erläutern und selbstverständlich lösen. Das Ergebnis dieses Abschnitts finden Sie in der Datei krankenwagen2.fla.
4.5.7
1.
Öffnen Sie krankenwagen1.fla
In dieser Animation soll ein Krankenwagen vor der uns bekannten Stadtsilhouette vorüberfahren, dies natürlich nicht linear, sondern über Berg und Tal. In der Bibliothek finden Sie die notwendigen Elemente wie den bereits eingefügten Hintergrund und den Krankenwagen. Die Zeitleiste ist schon weitestgehend präpariert, damit nur noch die Besonderheiten der Pfadoptionen eingerichtet werden müssen. Die einzige Besonderheit besteht darin, dass für die Bewegungsanimation bereits leere Schlüsselbilder eingerichtet sein. Sie werden wie gewöhnlich eingefügt, zeigen aber unausgefüllte Kreise, da sie ja noch kein Objekt enthalten.
Symbol
Bild
Aktion
hintergrund
01 - 45
Objekt hintergrund wird eingeblendet.
krankenwagen 01 - 19 werbung
20 - 35
Objekt krankenwagen fährt über Berg und Tal von links nach rechts. Objekt werbung wird eingeblendet.
Tabelle 4.7: Drehbuch von krankenwagen2.fla
Flash MX
110
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.5.8
2.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Fügen Sie krankenwagen in das erste Schlüsselbild ein
Wie Sie sehen, wird der Krankenwagen als Grafik eingefügt.
4.5.9
3.
Wählen Sie EINFÜGEN / BEWEGUNGS-TWEEN ERSTELLEN
4.5.10
4.
Fügen Sie krankenwagen in Bild 19 ein und erstellen Sie den Bewegungs-Tween
Sie haben gesehen, dass aus dem gestrichelten Pfeil nach dem ersten Erstellen der Bewegung nun die gewohnte durchgezogene Linie wird. 4.5.11
5.
Fügen Sie eine Pfadebene für krankenwagen ein
4.5.12
6.
Erstellen Sie den Pfad in der Pfadebene
Verwenden Sie erneut den Zeichenstift. Wenn Sie gut zeichnen können, dann gelingen Ihnen natürlich Berg und Tal besonders leicht. Wenn nicht, dann können Sie sich zusätzlich behelfen, indem Sie den verwackelten (also nicht ganz so optimalen) Pfad markieren und über die GlättenSchaltfläche optimieren.
Flash MX
111
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.5.13
7.
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Richten Sie die Animation am Pfad aus
Als Novum wählen Sie nun für die eigentliche Animation nach dem Zuweisen der Instanzen für End- und Startpunk des Pfades die Optionen AUSRICHTEN und AN PFAD AUSRICHTEN im Eigenschaften-Inspektor aus.
4.5.14
8.
Vergleichen Sie die beiden Optionen
Das Ergebnis ist tatsächlich beeindruckend: Nicht nur, dass der Krankenwagen dem Pfad folgt, er bewegt sich tatsächlich wie ein Fahrzeug, indem er bei Steigungen und Gefälle passend um den Schwerpunkt gedreht wird. Dadurch wird der Eindruck von wirklichem Fahren erweckt, während die Wolke eher schwebte. Am besten schalten Sie als kleines Experiment beide Optionen aus und vergleichen die Wirkung. Auch in der Zwiebelschalenansicht erkennt man den Unterschied überaus deutlich.
Flash MX
112
MIT SCHLÜSSELBILDERN, SYMBOLEN
4.6
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
Testen Sie Ihr Wissen!
Können Sie das Grundprinzip der Animation erläutern? Welche beiden Techniken können Sie bei einer Pfad-Animation einsetzen? Sie haben einen gelben Krankenwagen als Instanz eingefügt, wollen aber lieber einen roten. Was ist zu tun, wenn Sie die Animationsarbeit nicht wiederholen wollen? Wo stecken animationsfähige Symbole? Wo können Symbole bearbeitet werden? Wie werden / können Symbole erzeugt werden? Wie werden Sie verwendet? Welche Animationshilfen bietet Flash? Wo liegt der Unterschied zwischen Instanzen und Symbolen? Wie kann man die Ergebnisse bei Morphing nach seinen Wünschen beeinflussen?
Flash MX
113
MIT SCHLÜSSELBILDERN, SYMBOLEN
Flash MX
UND
BIBLIOTHEK ANIMATIONEN
ERSTELLEN
114
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
5 Grafik, Video und Audio importieren
Flash MX
115
GRAFIK, VIDEO
Flash MX
UND
AUDIO
IMPORTIEREN
116
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Grafik, Video und Audio importieren Nachdem Sie bereits die grundlegenden Formen der Animation mit Flash kennen gelernt haben, ist Ihnen auch klar geworden, dass Flash sich wohl wesentlich besser für das Arrangement und die Konzeption einer Animation eignet, als für die direkte Gestaltung von Grafik. An Zeichenfunktionen bietet die Werkzeugleiste zwar eine große Auswahl, doch im Bereich der Bildnachbearbeitung (insbesondere Farbmanipulation, Effekte) gibt es im Vergleich zu anderen Programmen so gut wie keine Funktionen. Gleiches gilt für die Videonachbearbeitung oder gar Audio. Man kann und sollte auch nicht erwarten, dass ein einzelnes Programm andere Programme wie Fireworks, Photoshop oder Premiere ersetzt. Was Flash dagegen zu Genüge anbietet, sind Importfunktionen und dementsprechende Filter für alle bekannten Dateiformate. Da der Importvorgang für die einzelnen Bereiche Grafik, Video und Audio strukturell immer auf die gleichen Handlungsabläufe hinausläuft, wählen wir aus dem unerschöpflichen Vorrat an Möglichkeiten einige typische Dateiformate aus, die Sie entweder sicherlich schon kennen oder die Sie bestimmt in der Zukunft mit Flash kombinieren möchten. Sollte dennoch Ihr spezielles Dateiformat nicht vorhanden sein, müssen Sie die gleichen Schritte ausführen wie die hier gezeigten.
5.1
Grafiken importieren und einbinden
In den zurückliegenden Projekten haben Sie bereits verschiedene Formen von importierten Grafiken als Hintergrund (die Stadtsilhouette, vor der ein Krankenwagen der Firma MedRapid eilig ins Hospital steuerte) oder als Akteur (der Krankenwagen selbst) kennen gelernt. Grundlegend stellt sich dabei immer die Frage, ob die Grafikdatei als einfache Grafik im Film verwendet wird oder ob sie in Vektorform nachgezeichnet werden soll. Krankenwagen und Stadtsilhouette waren Beispiel für Grafiken, die als Bitmap im Film auftraten, während dagegen das Ohr im Hintergrund des unfertigen Hear OHG-Banners erst importiert und dann durch Nachzeichnen in eine Vektorform überführt wurde. Folgende Grafikformate werden unterstützt:
Dateityp
Dateiendung
Dateityp
Dateiendung
Adobe Illustrator .eps, .ai
GIF und animiertes GIF
.gif
AutoCAD DXF
.dxf
JPEG
.jpg
Bitmap
.bmp
PICT
.pct, .pic (Windows nicht)
Enhanced Windows Metafile
.emf (Mac nicht)
PNG
.png
FreeHand
.fh7, .fh7, .fh8, .fh8, .fh9, .fh9, .fh10
Flash Player 6
.swf
FutureSplash Player
.spl
Windows Metafile
.wmf (Mac nicht)
Tabelle 5.1: Unterstützte Dateiformate beim Grafikimport Einige Dateiformate können nur importiert werden, wenn QuickTime 4 bereits installiert ist:
Flash MX
117
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Dateityp
Dateiendung
Dateityp
Dateiendung
MacPaint
.pntg
Silicon Graphics .sgi Image
Photoshop
.psd
TGA
.tga
PICT
.pct, .pic (Windows als Bitmap, Mac nicht)
TIFF
.tif
QuickTime Image
.qtif
Tabelle 5.2: Dateiformate, die QuickTime 4 benötigen
5.1.1 Import durchführen Es stehen verschiedene Möglichkeiten bereit, Grafiken in eine Animation einzubinden: •
direkt in die Bibliothek für z.B. Elemente, die später animiert werden sollen.
•
direkt auf die Bühne für z.B. Elemente, die unmittelbar benötigt werden.
•
direkt über die Zwischenablage.
5.1.2
1.
Richten Sie ein neues Dokument ein.
Ziel ist nun, die Vorlagendatei für die Animation der Firma MedRapid nachzubauen. Sie ist 295 Pixel breit und 185 Pixel hoch, besitzt drei Ebenen (werbung, krankenwagen und hintergrund). 5.1.3
2.
Wählen Sie die Ebene hintergrund und Datei / Importieren und skyline.gif.
Da die Stadtsilhouette nicht animiert werden soll, sondern statisch im Hintergrund verbleibt, empfiehlt es sich, sie direkt in die Bühne zu importieren. Wenn Sie gleichzeitig die Bibliothek geöffnet haben, sehen Sie, dass dennoch – wie für jedes Bilddokument – ein Grafiksymbol in der Bibliothek eingerichtet wird. Im Eigenschaften-Inspektor können Sie sehen, dass mit DATEI / IMPORTIEREN auch der Einfügevorgang als Instanz vom Programm automatisch durchgeführt wird. Zusätzlich erkennen Sie, dass Flash als Symbolname den Dateinamen verwendet. Es ist also ratsam, von vorneherein sinnvolle Dateinamen zu vergeben, um sich nachher Umbenennungsarbeiten zu ersparen. Über den Befehl BEARBEITEN im Eigenschaften-Inspektor gelangen Sie in das Programm, das mit der entsprechenden Dateiendung verknüpft ist. Jede importierte Grafik wird in die Bibliothek aufgenommen.
Flash MX
118
GRAFIK, VIDEO
5.1.4
3.
UND
AUDIO
IMPORTIEREN
Importieren Sie den Krankenwagen direkt in die Bibliothek.
Wählen Sie immer DATEI / IN BIBLIOTHEK IMPORTIEREN..., wenn das Bild nicht unmittelbar auf der Bühne benötigt wird. Dies trifft meistens für Objekte zu, die man nachher animieren möchte. So erspart man sich, die bereits auf der Bühne befindlichen Objekte evtl. erst noch einmal zu löschen. Man könnte sich bspw. für diese Animation überlegen, erst den Animationspfad für den Krankenwagen einzuzeichnen, ehe man eine Instanz auf die Bühne zieht. 5.1.5
4.
Wählen Sie die Schaltfläche EIGENSCHAFTEN in der Bibliothek.
Importierte Grafiken haben nicht die Möglichkeit, andere Symboleigenschaften wie Schaltfäche oder Movieclip anzunehmen. Sie besitzen dagegen ein eigenes Eigenschaftenfenster mit Informationen über ihren originären Speicherort, die Größe oder das Erstellungsdatum. Über die Schaltfläche IMPORTIEREN gelangt man erneut in das Dateiauswahlfenster und kann entweder eine andere oder eine geänderte Fassung der Grafik importieren. Da diese Änderung in der Bibliothek vorgenommen wird, erneuern sich damit auch alle Instanzen auf der Bühne.
Flash MX
119
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
5.1.6 Bitmaps in Vektorgrafiken umwandeln Im zurückliegenden Beispiel wurden Skyline und Krankenwagen als Bitmaps eingebunden und nicht eigens in Vektorgrafiken transformiert. Das verbietet sich fast automatisch für alle Arten von Fotos, doch bei Zeichnungen lohnt es sich, darüber nachzudenken. Der Vorteil bei nachgezeichneten Bildern liegt darin, dass eine Vergrößerung der Darstellung im Flash Player oder auf einer Webseite nicht mit einer gepixelten Darstellung einhergeht. Belässt man die importierten Dateien in ihrem Originalzustand, wird gerade bei filigranen Zeichnungen der Speicherbedarf nicht unnötig erhöht. Um nämlich eine möglichst genaue Vektordarstellung zu erhalten, muss man die entsprechenden Parameter für die Transformation sehr viel genauer einstellen, um abgerundete Ecken und Kanten zu vermeiden. Das Ergebnis kann dann aber teilweise mehr Speicher kosten als die ursprüngliche kleine Gif-Datei.
5.1.7
1.
Öffnen Sie die Datei ohr4.fla
Es handelt sich dabei um die Animationsvorlage für die Hear OHG, die Sie bereits erstellt haben sollten –allerdings ohne Ohr. Dieses fügen Sie mit den nächsten Schritten ein und wandeln es in eine Vektorgrafik um. 5.1.8
2.
Importieren Sie ohr.gif mit DATEI / IMPORTIEREN in die Ebene logo.
Man kann nicht direkt sagen, dass dieses Ohr weniger schön sei als das Ihnen bereits vertraute. Doch von einem gewissen metaphysischen Standpunkt aus betrachtet, gehören die Ohren zu den
Flash MX
120
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
runden Objekten, was sie automatisch als problematisch klassifiziert, wenn sie denn einmal auf 300 % Größe anschwellen sollen. Solcherlei könnte dem Ohr ja in einer Animation über ein MarketingInstitut, das immer mit dem Ohr nahe beim Kunden ist, durchaus widerfahren: entweder auf der Videowand einer Marketing-Messe oder durch entsprechende Form-Tweens. Spätestens hier würden sich also die durch Treppenstufen fabrizierten Windungen und Drehungen unschön bemerkbar machen. Damit ist dieses Ohr ein klassischer Fall für die Transformation in eine Vektorgrafik.
5.1.9
3.
Wählen Sie MODIFZIEREN / BITMAP NACHZEICHNEN...
Es öffnet sich ein Dialogfenster mit allerlei Optionen. Wahrscheinlich erwarten Sie nun drei Faustregeln, wie am besten welche Grafik in ein akzeptables Aussehen umgewandelt wird. Wir können Sie beruhigen: Es gibt nicht drei Faustregeln, sondern nur eine: ausprobieren. Mit den Einstellungen FARBSCHWELLE: 10, KLEINSTE FLÄCHE: 1 Pixel, KURVENANPASSUNG: PIXEL UND KANTENSCHWELLE: Viele Ecken erhalten Sie eine möglichst genaue Vektorgrafik, die allerdings bei vielen Farben unglaublich viel Speicherplatz benötigt.
Option
Bedeutung und Funktionsweise
FARBSCHWELLE
Diese Option bestimmt die RGB-Farbwerte zweier benachbarter Pixel. Ist diese Differenz niedriger als der für die Farbschwelle eingetragene Wert, gelten die beiden Pixel als gleichfarbig .Insgesamt akzeptiert die Option Werte zwischen 1 und 500, wobei höhere Werte die Wahrscheinlichkeit senken, dass zwei benachbarte Pixel als gleichwertig aufgefasst werden.
KLEINSTE FLÄCHE
Diese Option legt die Größe der Fläche fest, die beim Farbvergleich der Farbschwelle einbezogen werden. Akzeptierte Werte liegen zwischen 1 und 1000.
KURVENANPASSUNG Für die Umwandlung von Kurven aus ehemaligen Treppenstufen stehen im Auswahlmenü verschiedene Möglichkeiten zur Verfügung. KANTENSCHWELLE
Flash MX
Für die Übernahme von eckigen Formen kann man im Auswahlmenü festlegen, ob eher viele – und damit auch kleinere – Ecken beibehalten werden sollen oder nicht.
121
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Tabelle 5.3: Optionen für die Umwandlung in eine Vektorgrafik Das Ohr ist in Adobe PhotoShop über den Zeichensatz Wingdings erstellt. Aus Erfahrung könnte man wissen, dass beim Export in eine Gif-Datei an den Rändern auch bei Buchstaben weitere Farben verwendet werden, um die Rundungen schön herauszuarbeiten. In Verbindung mit einer Hintergrundfarbe für den nahtlosen Einsatz auf entsprechend gefärbtem Hintergrund würde dies selbstverständlich noch verstärkt werden. Daher scheint die Differenz 3 bei der Option FARBSCHWELLE nützlich. Um die Kurven ordentlich zu übertragen, sind 5 Pixel als Vergleich bei der KLEINSTEN FLÄCHE groß bzw. klein genug. Da das Ohr zu den runden Objekten gehört, ist enge KURVENANPASSUNG und wenige Kanten bei der KANTENSCHWELLE (die Kurven lagen ja in der GifDatei als Treppenstufen vor) ebenfalls eine gute Tendenz.
5.1.10
4.
Gruppieren Sie die Form sofort mit MODIFZIEREN / GRUPPIEREN.
Im Normalfall möchten Sie vielleicht nicht einzelne Bereiche über die Pfadpunkte verzerren, sondernd die gerade nachgezeichnete Form als Ganzes skalieren. Daher empfiehlt es sich, als ersten Schritt die noch markierte Form zu gruppieren. Später kann man dies immer noch aufheben.
Flash MX
122
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
In folgender Abbildung finden Sie im Ganzen und in Ausschnitten das Ohr im Original und in einer sehr genauen und in einer weichen Darstellung. Interessant ist an diesem speziellen Beispiel vor allen Dingen, dass die sehr genaue Darstellung bei sehr kleiner Farbschwelle dazu führt, die Pixelstruktur der Grafik noch deutlicher als zuvor in Vektoren zu zerlegen. Zusätzlich eignet sich das Nachzeichnen auch für visuelle Effekte wie im zweiten Versuch, in dem der Eindruck entsteht, man hätte eine eigene Zeichnung verwendet und nicht etwa das Wingdings-Ohr.
Flash MX
123
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
5.1.11 Visuelle Effekte mit Bitmaps erzeugen Interessante visuelle Effekte lassen sich mit Bitmaps und Pipette bzw. Zauberstab erzeugen. Über die Pipette kann man eine Bitmapfüllung als Füllfarbe übernehmen und Objekten oder geteiltem Text zuweisen. Das Ergebnis dieses Abschnitts finden Sie in der Datei himmel3.fla.
5.1.12
1.
Importieren Sie in ein neues Dokument die Datei himmel.jpg.
5.1.13
2.
Wählen Sie mit der Pipette die Füllung als Füllfarbe aus.
Mit der Pipette können Sie nicht nur einfache Farbe auswählen, sondern in diesem Spezialfall auch gleich die gesamte Füllung, die als kleines Abbild im Vorschaufeld für die Füllfarbe erscheint. 5.1.14
3.
Erzeugen Sie eine Wolke auf einer neuen Ebene.
5.1.15
4.
Weisen Sie der geteilten Wolke über mit dem Farbeimer-Werkzeug die Füllung zu.
Der Inhalt der Datei himmel.jpg wird als Füllung für die Form verwendet. Da technisch gesehen die Grafik quasi als gekachelter Hintergrund für Objekte und Text verwendet wird, wobei man auf diesen Hintergrund wie durch ein Schlüsselloch schaut, entstehen Anschnittkanten, wenn die Objekte größer als die Grafik werden. Über die Füllungstransformation können Sie auch diese Füllungen nachträglich drehen und neigen, indem Sie mit dem Werkzeug in die Füllung klicken.
Flash MX
124
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Füllbitmaps werden gekachelt, sodass Anschnittkanten entstehen können.
Füllungen einer Bitmap ändern
Eine Zusatzfunktion bietet noch der Zauberstab, der Ihnen vermutlich aus Grafikprogrammen bekannt ist. Nachdem eine Bitmap geteilt ist, kann man über das Lasso-Werkzeug als Option den Zauberstab einsetzen und bestimmte Farbbereiche einer Bitmap auswählen. Diese können dann über das normale Füllwerkzeug wieder geändert werden. Eventuell sollten Sie diese Aktionen besser in einem Grafikprogramm vornehmen.
Option
Bedeutung und Funktionsweise
SCHWELLENWERT Über die Differenz der RGB-Farben bestimmt der Zauberstab, welche benachbarten Pixel noch zur Auswahl hinzugenommen werden sollen. Mit Werten zwischen 1 und 200 können Sie den Schwellenwert für diesen Vergleich vorgeben. Im Spezialfall 0 werden nur Pixel mit exakt der gleichen Farbe ausgewählt. GLÄTTEN
Über das Auswahlmenü regeln Sie, wie die Kanten des Auswahlbereichs geglättet werden sollen.
Tabelle 5.4: Optionen des Zauberstabs
5.2
Videos importieren und verarbeiten
Flash bietet auch für die meisten hausgebräuchlichen Videoformate eine Importfunktion, die über Sorenson Spark Codec erreicht wird. Damit ist ein Videokompressions- und – dekompressionsmodul gemeint, das den Speicherbedarf von importierten Filmen in Grenzen halten soll. Während im Flash-Programm beide Module (Komprimierung, Dekomprimierung) arbeiten, besitzt der Flash Player verständlicherweise nur das Dekompressionsprogramm. Durch die Fähigkeit des Flash Players, komprimierte Videodaten wieder zu dekomprimieren, sollen gerade die Übertragungsraten und die notwendige Bandbreite für z.B. Internetanimationen stark verkleinert werden. Das Modul erzeugt Schlüsselbilder nach der Ihnen bereits bekannten Vorgehensweise, indem jeweils Änderungen zwischen zwei Videobildern verglichen werden und ein Schlüsselbild nur dann erzeugt wird, wenn die Änderungen hinreichend groß sind. Die restlichen Bewegungen werden über entsprechende Berechnungen erzeugt.
Dateityp (Quick Time 4 installiert)
Flash MX
Dateiendung Dateityp (DirectX 7 Dateiendung installiert, nur Windows)
125
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Audio Video Interleaved
.avi,
Audio Video Interleaved
.avi,
Digital Video
.dv
Motion Picture Experts Group
.mpg, .mpeg
Motion Picture Experts Group
.mpg, .mpeg
Windows Media File .wmv, .asf
QuickTime Movie
.mov
Tabelle 5.5: Unterstützte Dateiformate beim Videoimport Videos können direkt in einen Flash-Film eingebettet werden. Dadurch stellen sie nachher einen Teil des Films dar. Sie werden mit einem speziellen Symbol in die Bibliothek aufgenommen und verhalten sich genauso wie Grafiken. Das bedeutet, man kann sie auch bei Änderungen über die Schaltfläche AKTUALISIEREN leicht anpassen und über die Schaltfläche IMPORTIEREN erneut einlesen, wobei die Inhalte auf der Bühne jeweils ersetzt werden. Das Ergebnis dieses Abschnitts finden Sie in der Datei vogel1.fla.
5.2.1
1.
Legen Sie ein neues Dokument mit der Größe 320 Pixel Breite und 240 Pixel Höhe an.
5.2.2
2.
Wählen Sie DATEI / IMPORTIEREN und die Datei vogel1.mpg.
Option
Bedeutung und Funktionsweise
QUALITÄT
Über den Schieberegler oder das Textfeld können Sie die Qualität des Ergebnisses beeinflussen. Je niedriger der Wert, desto geringer die Dateigröße und demzufolge auch desto schlechtere Qualität, was z.B. die Auflösung anbetrifft.
SCHLÜSSELBILDINTERVALL Mit dieser Option kann man den Abstand zwischen zwei Schlüsselbildern, die in jedem Fall geladen werden sollen, eingetragen. Für diese Bilder verwendet das Programm die genauen Videodaten, während für die Zwischenbilder ausschließlich die Abweichungen zum vorhergehenden Bild gespeichert. Bei einem Intervall von 2 wird also jedes zweite Bild exakt geladen. SKALIEREN
Über diese Option beeinflusst man die Größe des Films auf der Bühne. Je geringer die Größe, desto weniger Speicherplatz wird belegt und desto kleiner wird die Ausgabe.
VIDEO MIT BILDRATE DES MACROMEDIA FLASHDOKUMENTS
Wenn der Film mit der BpS-Rate der Zeitleiste synchronisiert wird, erzeugt das Programm automatisch Duplikate von Bildern oder überspringt einzelne. Dies kann beides gleichermaßen zu ruckelnden Bewegungen führen.
SYNCHRONISIEREN
ANZAHL DER ZU KODIERENDEN
VIDEOBILDER PRO
Flash MX
Hier werden die Anzahl der verfügbaren Originalbilder im Video mit deren Anzahl im FlashFilm verglichen. 1:1 bedeutet, dass in jedem
126
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
MACROMEDIA FLASH-BILD Zeitleistenbild auch ein Videobild sitzt, während dies bei der Einstellung 1:2 nur in jedem zweiten Zeitleistenbild der Fall ist. Dies führt ebenfalls zu dem oben erwähnten Ruckeln. AUDIO IMPORTIEREN
Wenn die Audiodaten übernommen werden sollen, muss dies hier markiert werden.
Tabelle 5.6: Optionen beim
Videoimport 5.2.3
3.
Erweitern Sie die Zeitleiste wie gefragt.
Typischerweise werden Sie nicht wissen, wie viele Einzelbilder Ihr Film enthält, sodass die Zeitleiste auch dementsprechend unvorbereitet den Dingen harrt, die kommen mögen. Um den gesamten Film anzeigen zu lassen, quittieren Sie diese Meldung mit OK, ansonsten verkürzt ihn Flash auf die verfügbaren Bilder. Keine Sorge: sobald die Zeitleiste erweitert wird, verlängert sich auch die Abspieldauer des Films.
Flash MX
127
GRAFIK, VIDEO
5.2.4
4.
UND
AUDIO
IMPORTIEREN
Kontrollieren Sie das Ergebnis im Flash Player und über die Zeitleiste.
Die Vorstellung, die Figur per Einzelbildanimation über 12 Sekunden lang so in Szene zu setzen, zeigt, wie einfach die Video-Importfunktion ist. Einige Bilder wiederholen sich, wie Sie erkennen können, sobald Sie die Zeitleiste entlang fahren. Plötzlich aber verstummen die Vögel. Das ist nur zu verhindern, wenn das Verhältnis von Video-Bildern in der Zeitleiste und im Original 1:1 beträgt und jedes Bild eingefügt wird. Über eine Verringerung der Größe auf 50 % kann man die Dateigröße wieder herunterdrücken. Das Ergebnis mit durchgehendem Ton finden Sie in vogel2.fla. Vergleichen Sie zusätzlich die Dateigrößen und bewundern Sie Sorenson Spark Codec: •
Original: vogel1.mpg mit 1,1 MB.
•
Flash-Datei mit durchgehendem Ton: vogel2.fla mit 1,2 MB.
•
SWF-Datei für Flash Player: vogel2.swf mit 0,077 MB (77,2 KB).
Quick-Time-Videos verknüpfen Eine Besonderheit stellen Quick-Time-Videos dar, da sie über eine Verknüpfung nicht zu einem Teil des Films werden müssen. Stattdessen verweist ein entsprechender Pfad zu ihrem Speicherort auf der Festplatte. Der einzige Unterschied zu der oben beschriebenen Verfahrensweise besteht darin, dass Sie bei den Video-Optionen im Dialogfeld VIDEO
Flash MX
IMPORTIEREN
die Option MIT
128
GRAFIK, VIDEO
EXTERNER
VIDEODATEI
VERKNÜPFEN
UND
AUDIO
IMPORTIEREN
wählen. Die Pfadeigenschaften können Sie dann in der Bibliothek unter dem Punkt EIGENSCHAFTEN
ändern bzw. neu einstellen.
5.3
Audio-Daten integrieren
Ton kann alternativ in eine Animation integriert werden: Zum einen können Sie festlegen, dass der Ton ständig abgespielt wird. Zum anderen können Sie ihn mit der Zeitleiste synchronisieren, was Ihnen erlaubt, zu bestimmten Ereignissen Tonsequenzen einzuspielen. Dabei verwaltet Flash Ton in zwei Formaten, das Ihnen aus dem Internet in anderen Zusammenhängen sicherlich schon begegnet ist: Streaming-Sound sind Ton-Informationen, bei denen versucht wird, sie zeitgleich mit den anderen Informationen wie der Animation zu übertragen. Stehen also ausgehend von den Bildern für die ersten 5 Sekunden genügend Ton-Informationen bereit, werden sie abgespielt, während (theoretisch) in der Zwischenzeit der Ton für die nächste Zeiteinheit heruntergeladen wird. Im Gegensatz dazu stützt sich Ereignis-Sound darauf, dass die mit dieser Eigenschaft versehenen Ton-Daten zunächst komplett heruntergeladen werden, ehe der Ton abgespielt wird. Wie immer, so haben auch diese Verfahren unterschiedliche Vor- und Nachteile: Während Streaming-Sound den Besucher am Anfang nicht so lange warten lässt, kann es später zu Verzögerungen kommen. Bei der Animation mit Ereignis-Sound wird dieses Phänomen zwar vermieden, doch wartet der Besucher ganz zu Anfang alle denkbaren Verzögerungen sozusagen bereits vorher ab. Flash akzeptiert auch hier eine große Variation an Tonformaten, wobei wie bei Video bzw. wie immer bei Ton die Dateigröße eine entscheidende Rolle spielt. WAV-Ton mit 16 Bit, 44khz und in Stereo sollte Ihnen daher rein theoretisch niemals in einem Film begegnen. Auch für Ton stellt die Bibliothek Instanzen der importierten Ton-Dateien für eine wiederholte, Dateigrößen schonende Verwendung auf der Bühne zur Verfügung.
Allgemein
QuickTime 4 installiert
•
WAV (nur Windows)
•
AIFF (Windows oder Macintosh)
•
AIFF (nur Macintosh)
•
Sound Designer II (nur Macintosh)
•
MP3 (Windows oder Macintosh)
•
QuickTime-Filme, nur Sound (Windows oder Macintosh)
•
Sun AU Macintosh)
•
System 7 Sounds (nur Macintosh)
•
WAV (Windows oder Macintosh)
(Windows
oder
Tabelle 5.7: Importierbare Ton-Formate
5.3.1 Ton-Import und Exporteinstellungen 5.3.2
1.
Wählen Sie DATEI / IMPORTIEREN und uhrenticken.wav.
Zwar hatten wir uns gerade hämisch über das WAV-Format lustig gemacht, aber viele Rohdaten, die Sie selbst herstellen, dürften vielleicht in diesem Format vorliegen. Zudem kann man verschiedene Kompressionsformate einsetzen, um für die SWF-Datei z.B. über MP3 eine deutliche Verkleinerung des Speicherbedarfs nachträglich festzulegen.
Flash MX
129
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Das Ergebnis dieses Abschnitts finden Sie in der Datei krankenwagen4.fla.
5.3.3
2.
Kontrollieren Sie den erfolgreichen Import in der Bibliothek.
Ton-Dateien werden in einem Soundsymbol in Form eines Lautsprechers repräsentiert. In den Symboleigenschaften finden Sie die zugehörigen Informationen der Originaldatei wie z.B. die Länge von 4,5 Sekunden. Im unteren Bereich legen Sie fest, wie die Daten bei einem Export für den Flash-Player komprimiert werden sollen. Als Beispiel haben wir das MP3-Format ausgewählt. Hinter dem Auswahlmenü mit den anderen Formaten öffnen sich Optionen für das gewählte Format, mit denen der Export gesteuert wird. Wie bei allen anderen importierten Objekten finden Sie auch hier die Schaltflächen AKTUALISIEREN und IMPORTIEREN. Mit TESTEN bzw. STOPP können Sie sich die Ton-Datei anhören.
Exporteinstellungen für Ton
Neben DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN können die Exporteinstellungen für Ton individuell im Eigenschaftenfenster der Bibliothek festgelegt werden. Diese Einstellungen können in den Veröffentlichungseinstellungen auch wieder global durch SOUNDEINSTELLUNGEN ÜBERGEHEN deaktiviert werden. Sampling-Raten: •
5 kHz: kann unter Umständen für Sprache eingesetzt werden.
•
11 kHz: sehr niedrige Musik-Qualität für kurze Einspieldauer.
•
22 kHz: durchschnittliche Qualität (halbe CD-Qualität) für Internet-Veröffentlichung.
•
44 kHz: Standard-CD-Qualität, Top-Niveau für Klang.
Typ
Beschreibung
STANDARD übernimmt die globalen Einstellungen ADPCM
Flash MX
•
geeignet für kurze Töne in 8 Bit und 16 Bit wie Tastenklicks, Bestätigungen, Warnungen
•
VORVERARBEITUNG kann Stereo- in Mono-Ton konvertieren
•
Samplingraten wie oben
130
GRAFIK, VIDEO
MP3
UND
AUDIO
IMPORTIEREN
•
QUALITÄTSEINSTELLUNG weitere Möglichkeit
•
Bitrate zwischen 8 und 160 Kbit/s
•
VORVERARBEITUNG kann Stereo- in Mono-Ton konvertieren
•
QUALITÄT stellt Kompressionsgeschwindigkeit und Klangqualität in drei Stufen ein
DES IMPORTIERTEN
MP3
VERWENDEN
als
RAW
übernimmt Ton ohne Komprimierung, einstellbar nur Vorverarbeitung und Samplingrate
SPRACHE
speziell für Sprache einsetzbare Komprimierung, einstellbar ist die Samplingrate
Tabelle 5.8: Exporteinstellungen für Ton
5.3.4 Ton im Film einsetzen Mit Konsequenz kommt man im Leben auch in Flash weiter: Alles, was irgendwie zur Unterhaltung des Besuchers seinen Anteil beisteuern soll, gehört auf die Bühne – also auch der Ton. Alles, was auf die Bühne gelangt, verlangt nach einem Platz in einer Ebene – im Fall der Ton-Elemente aus der Bibliothek verwandelt sich die Ebenen in Ton-Spuren, sodass der Ton lediglich wie ein Objekt aus der Bibliothek in die Zeitleiste eingefügt werden muss. Das Ergebnis dieses Abschnitts finden Sie in der Datei krankenwagen5.fla.
5.3.5
1.
Richten Sie eine neue Ebene hintergrundton ein.
5.3.6
2.
Ziehen Sie eine Instanz von uhrenticken auf die Bühne.
Der Ton ist trotz der fast schon unspektakulären Behandlung auf der Bühne unsichtbar und macht sich nur durch einen blauen Strich in der Zeitleiste bemerkbar. Wenn Sie den Film testen, hören Sie, dass sich die Tonspuren überlagern, weil sie nicht genau der Länge des Film entsprechen.
5.3.7
3.
Wählen Sie im Eigenschaften-Inspektor Stream.
Alle möglichen Ton-Einstellungen finden Sie im Eigenschaften-Inspektor: •
Sind mehrere Klang-Elemente vorhanden, können Sie über das Auswahlmenü TON ausgewählt werden.
•
Ton-Effekte wie ein-/ausblenden, Kanalzuweisungen Auswahlmenü EFFEKT zur Verfügung
Flash MX
oder
Kanalwechsel
stehen
im
131
GRAFIK, VIDEO •
UND
AUDIO
IMPORTIEREN
Synchronisation mit dem Auftreten von Bildern (EREIGNIS), dem Starten oder Enden von Abspielvorgängen (START, STOPP) oder mit der Länge des Films (STREAM) können im Auswahlmenü SYNC eingerichtet werden.
Für das aktuelle Problem empfiehlt sich die Stream-Synchronisation, weil damit verhindert wird, dass beim Abspielen der Animation in einer Schleife Tonüberlagerungen entstehen. Wäre der Film wesentlich länger als die 4,5 Sekunden Ton, dann würde sich Stream verbieten, weil die Dateigröße zunimmt und zusätzliche Bilder in der Datei verwendet werden. Stattdessen sollte man eine genügend große Zahl Wiederholungen in das Textfeld WIEDERHOLEN eintragen. Würde der Krankenwagen also 30 Sekunden lang durch die Stadtschluchten Frankfurts donnern, wären 7 Wiederholungen ausreichend.
5.3.8
4.
Blenden Sie den Ton über der gesamten Zeitleiste ein.
Als dramatischer Effekt soll nun das Uhrenticken auch noch im Filmverlauf eingeblendet werden. Dadurch wird der Werbetext „Wenn es schnell gehen muss...“ deutlicher herausgehoben. Diese Einstellung nehmen Sie im Auswahlmenü EFFEKT vor.
5.3.9
5.
Wählen Sie BEARBEITEN, um den Ton einzustellen.
Als letzte Einstellmöglichkeit stellt Flash auch noch ein eigenes Fenster mit einer linken und einer rechten Tonspur zur Verfügung, das man über die Schaltfläche BEARBEITEN im EigenschaftenInspektor erreicht. In einem Auswahlmenü oben links kann man noch einmal zwischen den einzelnen Grundeinstellungen wählen. Sobald man eigene Änderungen vornimmt, stellt sich der Eintrag BENUTZERDEFINIERT ein. Unten rechts wechseln Sie zunächst aus Gründen der Einfachheit in die Bilderansicht. Alternativ stehen auch Sekunden über die Schaltfläche ZEIT zur Verfügung. Ganz links kann man über die ANFANGSPUNKTSTEUERUNG (grauer Schieber) den Startpunkt für den Ton bestimmen. Diesen lassen wir unverändert. Stattdessen richten wir über die HÜLLENGRIFFE (weiße Quadrate) den Beginn der Blende bei Bild 5 ein. So ist der Ton spätestens bei der Textblende am lautesten Punkt angelangt. Unten rechts kann man sich den Ton vorspielen lassen bzw. den Spielvorgang beenden. Hat man sehr diffizile Wave-Formen oder lange Animationen kann man über die Lupenfunktion im unteren Bereich zusätzlich andere Ansichten erreichen.
Flash MX
132
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Sie können auch Schaltflächen Ton hinzufügen.
Schlüsselbildern Ton hinzufügen
Das bisherige Beispiel hat einen Hintergrundton für den gesamten Film eingerichtet und dabei die einzelnen Tonmodifikationen vorgestellt. Diese bleiben erhalten, wenn man einem Schlüsselbild (Erscheinen des Krankenwagens, Krabbeln der Spinne um eine Ecke usw.) Ton hinzugefügt. Dafür benötigt man lediglich eine Ton-Datei in der Bibliothek, die dann im Auswahlmenü TON im Eigenschaften-Inspektor angezeigt wird. Sobald sie ausgewählt wird, aktiviert man damit die anderen Schaltflächen und Auswahlmenüs, die oben beschrieben werden.
5.4
Testen Sie Ihr Wissen!
Welche drei Techniken können Sie einsetzen, um Grafiken einzubinden? Welche Möglichkeiten haben Sie beim Einsatz von Grafiken? Welche Vor- und Nachteile haben Vektorgrafiken, die aus Bitmap-Grafiken erstellt werden? Welche Technik verwendet Flash prinzipiell, um Video-Daten einzubinden? Worauf müssen Sie achten, wenn Ihnen Videodaten mit einer Audiospur vorliegen? Müssen Sie sich bereits beim Ton-Import Gedanken um die Dateigröße machen?
Flash MX
133
GRAFIK, VIDEO
UND
AUDIO
IMPORTIEREN
Wo können Sie global Einstellungen festlegen, die den Ton-Export betreffen? Wie schalten Sie zusätzlich individuelle Einstellungen aus? Mit welcher Grundtechnik fügen Sie Ton in eine Animation ein? Wie weisen Sie Objekten bzw. Schlüsselbildern Ton zu? Welche Optionen stellt Ihnen Flash zur Seite, um Ton nachzubearbeiten? Bei einer geschleiften Animation darf sich zu langer Ton nicht überlagern. Wie gehen Sie vor? Dürfen oder sollten Sie Stream mit Wiederholungen kombinieren? Sind Sie auf die Voreinstellungen im EFFEKT-Auswahlmenü beschränkt?
Flash MX
134
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
6 Komplexe Animationen mit Szenen und Movieclips koordinieren
Flash MX
135
KOMPLEXE ANIMATIONEN
Flash MX
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
136
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Komplexe Animationen mit Szenen und Movieclips koordinieren Der Titel mag etwas zu vielversprechend klingen. Es ist schon wegen der großen Anzahl an Schritten nicht möglich, schriftlich die komplexen Animationen zu erklären, die man mit dem Begriff komplex meint. Aber je länger Sie mit dem Programm arbeiten, desto umfangreicher werden zwangsläufig Ihre Animationen werden. Genau für diese Fälle jedoch gibt es verschiedene Grundtechniken, um trotz gefüllter Bibliothek und Zeitleiste die Übersicht zu behalten. Diese Koordination können Sie z.B. erreichen, indem Sie den gesamten Film in einzelne Häppchen aufspalten, die fast zwangsläufig Szenen genannt werden. Noch kleinere Häppchen kann man einrichten, indem so genannte Movieclips (Filmsequenzen) mit einer eigenen Zeitleiste kleine Animationsbrocken verwalten, die dann als Ganzes in eine Szene bzw. den Film eingebunden werden. Zu guter letzt kann man über verschiedene Ansichten wie den Film-Explorer oder das Bedienfeld Szene durch die Inhalte eines Films navigieren. Als Beispiel setzt dieses Projekt eine längere Animation ein, die aber nur in ihren Grundzügen fertiggestellt wird. Die weitergehende Arbeit könnten Sie mit den bereits erlernten Arbeitstechniken zu Ende bringen. Das Ergebnis dieses Abschnitts finden Sie in der Datei praesentation1.fla.
6.1
Movieclips erstellen und verwenden
Möglicherweise haben Sie bereits versucht, die Animationen der vergangenen Projekte weiter auszubauen. Wie wäre es, wenn die Spinne nicht nur majestätisch über das Spinnennetz glitte, sondern ihre Beine auch noch passend bewegen müsste. Abgesehen davon, dass uns das zunächst biologische Bewegungsstudien im Garten abverlangen würde, müssten wir die Beobachtungen auch noch mit kleinen Beinchen nachbilden. Man könnte die Spinne teilen (vielleicht wäre es appetitlicher gewesen, sich über die wehenden Rauchwolken des Schiffs am Horizont Gedanken zu machen), die Beine mit Hilfe des Radiergummis entfernen und eines davon als Grafiksymbol in die Bibliothek aufnehmen. Solange die Narkose noch anhält, müsste man dann die acht fehlenden Beine durch das Grafiksymbol Beinchen ersetzen und diese acht Instanzen erst einmal passend skalieren bzw. drehen und neigen, bis der Originalzustand wieder hergestellt wurde. Die Spinne hätte dann von der ungewöhnlichen Operation zunächst keine Notiz genommen und würde so wie sonst majestätisch gleiten. Stattdessen aber würde jede Instanz von Beinchen auf einer eigenen Idee nach den Studien im Garten in einem spinnentypischen Bewegungsmuster animiert werden. Ihr grausamer Verdacht, dies ließe sich nur über eine Einzelbildanimation oder relativ kurze Bewegungs-Tweens einrichten, muss von uns ebenso grausam erhärtet werden. Was dies für eine Arbeit bei acht Beinchen auf acht Ebenen bei einer Strecke über ein ganzes Spinnennetz bedeutet, möchte man sich gar nicht vorstellen. Ein Movieclip besitzt eine eigene Zeitleiste und ist damit ein Film im Film.
Genau an dieser Stelle, wo es nicht an die Beinchen von Spinnen geht, sondern unsere Bewegungs-Tweens-einrichtenden Finger betrifft, interessiert wir uns natürlich sehr für humane Lebensbedingungen. Mit dem gehörigen Paukenschlag betritt also der rettende Oberarzt in Gestalt einer Filmsequenz die Bühne. In so einer Filmsequenz könnte man beispielsweise ein bewegendes Beinchen erstellen und achtfach dem Spinnenkörper auf der Bühne ankleben. Alternativ könnte
Flash MX
137
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
man nur einmal die Spinne quasi auf dem Trockendock mit einer typischen Bewegungssequenz erstellen und diese Filmsequenz als Instanz über die seidenen Fäden manövrieren. Eine Filmsequenz besitzt eine eigene Zeitleiste, sodass Animationsteile komplett ausgelagert werden können. Die Animation innerhalb eines Movieclips wird nun so lange abgespielt, wie sie auf der Bühne benötigt wird. Die krabbelnde Spinne also würde in einer Schleife ständig wie vorher einmal festgelegt die Beine bewegen, bis sie den gesamten Weg hinter sich gebracht hat und aus dem Netz wieder verschwindet. Das bedeutet natürlich auch, dass bereits im Rahmen der Arbeit an der Filmsequenz daran gedacht werden muss, dass die Schleife wohlgeformt ist. Nicht zusammen passende End- und Startbilder (meistens dürften sie einfach gleich sein) erzeugen jedes einmal einen unangenehmen Sprung. Hier greift wie immer die grundlegende Schleifentechnik, die schon bei animierten GIFs angewendet werden musste, um angenehme Schleifenübergänge zu erreichen. In der Animation für die Zeitung globus haben Sie das bereits so gelöst, dass die Animation einfach noch einmal rückwärts abgespielt wird. Movieclips, die in Schleifen abgespielt werden, müssen auch schleifentauglich eingerichtet werden.
Wem das immer noch nicht genügt (die Spinne strickt während ihrem Erkundungsgang auch noch an einem neuen Winterpullover), der kann Movieclips ineinander verschachteln. Um den Strickvorgang des Winterpullis weiter auszubauen, könnte man sich vorstellen, dass die Spinne mit den beiden ersten Beinchen zwei Stricknadeln auf und ab bewegt. Diese klappernden Nadeln könnten auch wieder eine ganz simple Filmsequenz sein, die lediglich in die Spinnen-Filmsequenz einkopiert wird. Sie wird dann mit der Bewegung des Eltern-Movieclip (Spinne) als Kind-Movieclip (Stricknadeln) während der Silberfadenpromenade mitgenommen.
6.1.1 Einen Movieclip erstellen Das Wichtigste vorweg: Sollten Sie jetzt bereits arge Befürchtungen gehabt haben, sich weiterhin mit unserem achtbeinigen Freund zu beschäftigen, so dürfen wir Ihnen versichern, dass er direkt nicht mehr in Erscheinung treten wird. Stattdessen bereiten wir die Grundkonzeption für eine Firmenpräsentation vor. Innerhalb dieser Filmpräsentation taucht u.a. ein Movieclip auf, in dem Füße (allerdings Menschenfüße - die Monsterfüße, die wir für diese Übung geplant haben, sind leider ausgebüxt) einen Animationspfad entlang gehen. Während der Animationspfad und der zugehörige Bewegungs-Tween die Grundbewegung bewirken, ist im Movieclip der Wechsel vom linken zum rechten Fuß einmal animiert. Die Filmsequenzfunktion sorgt dann in der Hauptzeitleiste dafür, dass die Füße sich nacheinander bewegen bzw. der Movieclip in einer Schleife abgespielt wird.
Flash MX
138
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
6.1.2
1. Richten Sie ein neues Dokument mit 500 Pixel Breite und 300 Pixel Höhe und der Hintergrundfarbe #99999 ein.
6.1.3
2.
Importieren Sie in die Bibliothek die Dateien fusslinks.gif, fussrechts.gif.
6.1.4
3.
Erstellen Sie ein neues Symbol mit der Eigenschaft MOVIECLIP namens gehendefuesse.
6.1.5
4.
Richten Sie die Bewegung der beiden Füße ein.
Da nur die Fußspuren betrachtet werden, genügt ein ganz simple Animation: Je eine Instanz des Fuß-Symbols wird auf der Bühne in einer separaten Ebene eingerichtet. Die Bewegung täuscht eine zeitweise Einblendung des einen und dann des anderen Fußes vor. Im konkreten Fall blenden Sie den linken Fuß in den Bildern 1 bis 3 und den rechten Fuß in den Bildern 4 bis 6 ein. Um das Gehen zu verdeutlichen und nicht etwa ein Treten auf der Stelle zu simulieren, versetzen sie beide Instanzen so, dass der linke Fuß links unterhalb des Mittelpunkts und der rechte dagegen rechts oberhalb des Mittelpunkts liegt. Als Zwischenraum sollte ein angemessener (orthopädisch korrekter) Abstand eingehalten werden. Über die Zwiebelschalenansicht können Sie diesen Abstand und die richtige Ausrichtung kontrollieren. Die Schleifenproblematik existiert praktisch nicht bzw. wird von Ihnen schon im Ansatz richtig gelöst... Da bei der zweibeinigen Planetenbevölkerung typischerweise ein Fuß nach dem anderen aufgesetzt wird, passen Start- und Endbilder wunderbar zusammen. Ausnahmen ergeben sich nur, wenn Sie z.B. Tanzschritte,Sportarten oder ähnliches nachbilden wollen. Hier sollen schon einmal die physikalischen Gesetze außer Kraft gesetzt worden sein.
Flash MX
139
KOMPLEXE ANIMATIONEN
6.1.6
5.
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Testen Sie die Filmsequenz über STEUERUNG / ABSPIELEN.
Um die Schleifenwirkung ohne Fortbewegung zu überprüfen, können Sie zusätzlich STEUERUNG / IN SCHLEIFE ABSPIELEN markieren.
6.1.7 Fertigen Movieclip auf der Bühne einfügen Movieclips verhalten sich genauso wie alle anderen Objekte und werden wie ein Grafiksymbol auf die Bühne gezogen. Lediglich das Abspielverhalten kann nicht über die Zeitleiste kontrolliert werden. 6.1.8
1.
Importieren Sie nachoben,gif und richten Sie eine Instanz in einer eigenen Ebene ein.
In der unten erklärten Animation soll sich dieser Schriftzug zusätzlich drehend von links unten zur Mitte und dann in die andere Richtung drehend nach rechts oben bewegen. In der Zeit, während er in der Bühnenmitte angezeigt wird, sollen sich die Füße an ihm entlang nach oben bewegen.
Flash MX
140
KOMPLEXE ANIMATIONEN
6.1.9
2.
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Ziehen Sie den Movieclip in eine eigene Ebene.
Wie Sie sehen, zeigt das Programm auf der Bühne nur das erste Bild von einem Movieclip an. In diesem Fall ist das der linke Fuß. 6.1.10
3.
Erzeugen Sie eine Pfadebene für den Movieclip.
Ein Movieclip kann wie ein Grafiksymbol animiert werden. In diesem Fall verknüpfen Sie es wie gewohnt mit den Animationspfad über die Optionen AUSRICHTEN, AN PFAD AUSRICHTEN und SYNC.
6.1.11
4.
Vervollständigen Sie die Animation.
Wenn Sie wollen, können Sie die gesamte Animation nach folgendem Drehbuch vervollständigen. Zuvor müssen Sie in die Bibliothek noch das Bild logotransparent.gif importieren und insgesamt vier Ebenen namens motto (für den Werbetext), logo und füsse sowie die dazugehörigen Animationsebene.
Symbol
Bild
Aktion
nachoben
01 – 30
Der Werbetext nachoben dreht sich im UZS aus der linken unteren Ecke in die Bühnenmitte.
nachoben
30 60
Der Werbetext nachoben wird in der Bühnenmitte eingeblendet.
fuesse
30 -
Der Movieclip fuesse bewegt sich am Animationspfad
Flash MX
141
KOMPLEXE ANIMATIONEN
60
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
entlang und am Werbetext nach oben.
logotransparent 55 70
Das Logo logotransparent bewegt sich an der unteren Bühnenkante nach rechts.
logotransparent 70 85
Das Logo logotransparent steht unten rechts an der Bühnenkante.
75 85
Der Werbetext nachoben dreht sich gegen den UZS aus Bühnenmitte in die rechte obere Ecke.
nachoben
Tabelle 6.1: Drehbuch für praesentation1.fla Während in der Zwiebelschalenansicht der Movieclip noch den Anschein erweckt, als hüpfe der linke Fuß am Animationspfad entlang, werden Sie in der Vorschau deutlich erkennen, dass die Fußbewegung tatsächlich abwechselnd links-rechts verläuft.
6.2
Einen Film in Szenen zerlegen
Der erste Teil der Firmenpräsentation, die Sie in der letzten Lektion erstellt haben, besaß nicht viel Szenen, dauert aber bereits 85 Bilder, sodass die Zeitleiste schon gut besetzt wurde. Probleme kann es also geben, wenn eine zweiminütige Präsentation in einer Zeitleiste erstellt wird. Zwei Minuten sind 120 Sekunden, was bei 12 BpS bereits 1440 Bilder in der Zeitleiste macht. Stellen Sie sich dann nur einmal vor, was für ein Aufwand eine Verlängerung der Einblendzeit vom Logo bedeuten würde, das Sie gerade unten rechts auf der Bühnenkante ausgerichtet haben. Nur um das Logo bis Bild 90 einzublenden, müssten alle folgenden Objekte auf anderen Ebenen ebenfalls um 5 Bilder verschoben werden. Das Ergebnis dieses Abschnitts finden Sie in der Datei praesentation2.fla.
Inhaltlich erzeugt man bei einem Film, der eine Geschichte oder einzelne Gedanken in Einheiten präsentiert, immer schon gedanklich Szenen. Ob diese Einheiten nun linear ablaufen oder ob der
Flash MX
142
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Zuschauer wie im Projekt zur Interaktivität selbst eingreift, ist irrelevant. Wichtig ist ausschließlich, dass verschiedene Einheiten in einer vom Designer oder vom Besucher festgelegten Reihenfolge betrachtet werden. Diese Einheiten können in Szenen mit eigenen Ebenen und unabhängig voneinander eingerichtet werden. Lediglich die Dokumenteigenschaften Größe, Hintergrundfarbe und BpS-Rate sind für alle Szenen gleich. Szenen stellen unabhängige Einheiten des Hauptfilms dar.
6.2.1
1.
Wählen Sie FENSTER / SZENE und richten Sie neue Szenen ein.
Es öffnet sich das Bedienfeld SZENE, in dem die Szenen in der Reihenfolge ihres Auftretens im Film angeordnet sind. Über die Schaltfläche SZENE HINZUFÜGEN unten rechts wird eine neue, automatisch nummerierte Szene angehängt. Alternativ kann man eine bereits existierende Szene mit Hilfe der Schaltfläche SZENE DUPLIZIEREN auch kopieren, wenn Grundzüge (z.B. der Hintergrund) in der neuen Szene Verwendung finden. Ein Doppelklick auf den Namenseintrag öffnet wie immer ein Textfeld, in das man einen aussagekräftigen Namen eintragen kann. In diesem Fall benötigen Sie die Namen: Start (für die bereits erstellte erste Szene), Seminare, Medien, Consulting (für je einen Geschäftsbereich) und Adresse (für die Webadresse und Kontaktmöglichkeit). Mit der Schaltfläche PAPIERKORB können komplette Szenen mit all ihren Inhalten unwiderruflich (wie alle Papierkörbe in diesem Programm auch hier sehr umfassend) gelöscht werden.
6.2.2
2.
Wechseln Sie über die Schaltfläche SZENE BEARBEITEN in die Szene Seminare.
Wie Sie sehen, können Sie die Ebenen in der Szene Start nicht sehen, sondern erhalten eine neue, leere Zeitleiste. Änderungen, die Sie hier vornehmen, wirken sich nicht auf die anderen Szenen aus, da jede Szene autark bearbeitet werden kann. 6.2.3
3.
Erstellen Sie die Grundgerüste für die einzelnen Szenen.
In diesem Projekt soll es nicht darum gehen, eine komplette Animation zu erzeugen. Die notwendigen Basiswerkzeuge kennen Sie bereits. Vielmehr soll Ihnen deutlich werden, wie Sie über die Szenentechnik Vorarbeiten erledigen können, die in jeder Szene bearbeiten
Flash MX
143
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Szene einen anderen Inhalt haben. Daher könnten Sie auch nicht über einen Movieclip einfach eingefügt werden, denn das würde eine volle und unüberschaubare Zeitleiste hervorrufen.
Szene
Objekte
Inhalt
Seminare
blume.jpg
•
Hintergrund: #CEC6BD
logo.gif
•
logo.gif steht rechts unten
•
blume.jpg bewegt sich von Bild 1 bis 20 von links oben nach rechts unten
drache.jpg
•
Hintergrund: #BCB6AC
logo.gif
•
logo.gif steht rechts unten
•
drache.jpg bewegt sich von Bild 1 bis 20 von rechts unten nach links oben
•
Hintergrund: #A5A5A5
•
logo.gif steht rechts unten
•
tempel.jpg bewegt sich von Bild 1 bis 20 von links oben nach rechts oben
Medien
Consulting tempel.jpg logo.gif
Adresse
flugzeug.jpg • Textfeld • WebAdresse •
Hintergrund: # A5A5A5 Textfeld Web-Adresse ist in oberer Hälfte zentriert ausgerichtet flugzeug.jpg füllt untere Hälfte komplett
Tabelle 6.2: Restliches Drehbuch für die Grundlage von praesentation2.fla
Flash MX
144
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
6.2.4
4. Importieren Sie die Bilder in einen Ordner fotos und richten Sie die nötigen Bewegungs-Tweens ein.
6.2.5
5.
Testen Sie die einzelnen Szenen über STEUERUNG / SZENE TESTEN
Bei längeren Projekten ist es ohnehin lästig, wenn man sich ständig den gesamten Film ansehen muss, weshalb Sie diesen Menübefehl sicherlich häufig einsetzen werden. Es öffnet sich der FlashPlayer mit dem Szenennamen in der Titelleiste. In unten angegebener Abbildung wird demnach also gerade die Szene Adresse getestet, in der nichts passiert, außer dass 25 Bilder lang die Kontaktadresse eingeblendet wird. Zusätzlich wird eine eigene SWF-Datei erzeugt, die nur diese eine Szene enthält.
Flash MX
145
KOMPLEXE ANIMATIONEN
6.3
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Controlling über den Film-Explorer
Bei so viel hierarchischem Aufbau, der Szenen mit eigener Ebenenstruktur generiert, Movieclips mit eigener Zeitleiste zulässt und innerhalb von Movieclips noch Kinder-(untergeordnete) Movieclips gestattet, fragt sich natürlich jeder, der von der Buchhaltung zum Webdesign gefunden hat: Wo kann ich die totale Kontrolle ausüben? Ein solches Werkzeug ist der Film-Explorer. Er erlaubt Ihnen, in einer Gliederung, sämtliche in einem Flash-Dokument auftretenden Elemente zu betrachten. Die Gliederung erfolgt mittels Filter wie Text, Grafiken, Movieclips oder importierte Daten, auf die Sie direkt Einfluss haben und so z.B. nur Grafiksymbole anzeigen lassen können. Darüber hinaus kann man bei sehr großen Projekten eine Suchen-Funktion einsetzen oder global Änderungen an Texten vornehmen. Über die typischen Plus- und Minus-Zeichen kann man die Anzeigentiefe des Explorers beeinflussen. Der Film-Explorer zeigt alle Film-Elemente in einer Typengliederung an.
6.3.1
1.
Wählen Sie FENSTER / FILM-EXPLORER, um den Explorer zu öffnen.
Sie erhalten ein Fenster mit verschiedenen Schaltflächen und einer Gliederungsansicht, in der Sie die importierten Grafiken oder Texte wiederfinden. Die ersten vier Schaltflächen erlauben es, gewisse Elemente ein- oder auszublenden. Als Beispiel ist in der Abbildung das Flugzeug der Szene Adresse ausgewählt. Es handelt sich um die Kategorie Bitmap, weswegen die Anzeige über die Schaltfläche VIDEO, TÖNE UND BITMAPS EINBLENDEN beendet werden kann. Wenn der FilmExplorer dieses Objekt anzeigt, erfahren wir, dass es von Bild 1 bis 25 in einer Ebene namens flugzeug angezeigt wird. Diese Ebene wiederum liegt in der Szene Adresse, die ganz oben mit dem typischen Szene-Symbol angezeigt wird. Unten in der Statuszeile erfährt man den genauen Pfad zu dieser Instanz: Adresse -> flugzeug -> Bild 1 -> flugzeug. Da Ebenenname und Objektname gleich sind, taucht der Begriff flugzeug doppelt auf. Wenn man ein beliebiges Element sucht, kann man über diese Adresse auch in einem großen Projekt mit vielen Ebenen, Szenen oder Movieclips (in denen ja auch wieder Ebenen vorhanden sind) auf einzelne Objekte zugreifen.
Flash MX
146
KOMPLEXE ANIMATIONEN
6.3.2
2.
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Öffnen Sie die Ansichtsoptionen.
Wenn Ihnen die Schaltflächen zu global sind, können Sie wesentlich differenzierter einzelne Objektkategorien ein- und ausschalten, indem Sie die (un)gewünschten Kontrollkästchen markieren. Der Vorteil besteht darin, dass in der normalen Film-Explorer-Ansicht nur sehr grob unterschieden wird, ob z.B. Video / Töne / Bitmaps eingeblendet werden sollen. In den Ansichtsoptionen können Sie jede der drei Unterkategorien erneut ausschalten. Befinden sich ohnehin nur wenige Ebenen in einer Szene wie z.B. in der Szene Adresse, dann könnte man sie auch direkt ausschalten.
6.3.3
3.
Öffnen Sie das Optionsmenü und wählen Sie ALLE SZENEN EINZEIGEN.
Beim Film-Explorer ist ein Blick in das Optionsmenü besonders interessant und einfach zu bedienen, da die Einträge weitestgehend für sich selbst sprechen. Standardmäßig öffnet sich bspw. nur die Gliederung der aktuellen Szene. Wenn man aber auf den gesamten Film zugreifen möchte, kann man hier ALLE SZENEN ANZEIGEN wählen. Das Ergebnis sehen Sie in der untenstehenden Abbildung: Wie im Bedienfeld SZENE reiht der Film-Explorer die einzelnen Szenen nacheinander auf.
Flash MX
147
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
•
Zwar existiert in dieser Animation nur ein einziges kleines Textfeld, doch wenn Sie eine komplette Präsentation z.B. auch in einem anderen Programm weiterverarbeiten möchten und auf die Texte zugreifen wollen, können Sie sämtliche Texte über die Schaltfläche GESAMTEN TEXT IN ZWISCHENABLAGE KOPIEREN über die Zwischenablage in das andere Programm übertragen.
•
Um direkt zu einem gewählten Element zu springen, können Sie entweder GEHE ZU STELLE wählen oder sich dazu entscheiden, es unmittelbar zu bearbeiten. Dazu stehen Ihnen die Einträge AN POSITION BEARBEITEN (direkt auf der Bühne bearbeiten) oder IN NEUEM FENSTER BEARBEITEN zur Verfügung.
•
Um für eine Besprechung oder für sich selbst als Übersicht alle Element einer Animation im Blick zu haben, können Sie diese Übersicht mit DRUCKEN auf Papier bringen. Beachten Sie hier, dass nur die aktuelle Ansicht des Film-Explorers verwendet wird und Sie die Druckoptionen nur hier festlegen können.
Flash MX
148
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Die meisten Einträge sind auch im Kontextmenü enthalten.
Bilder oder Animationen benennen Eine weitere Möglichkeit zur Ordnung und Übersicht ist, Bildern oder Animationen Namen zu geben, um bereits an der Zeitleiste Sinn oder Inhalt zu erkennen. Dieser Name wird einfach im Eigenschaften-Inspektor im Textfeld BILDBEZEICHNUNGeingetragen. Er erscheint dann mit einem kleinen Fähnchen in der Zeitleiste, wobei das Fähnchen das benannte Bild markiert.
6.4
Testen Sie Ihr Wissen!
Können Sie den Begriff Movieclip definieren? Worauf muss bei der Verwendung von Movieclips in einer geschleiften Wiederholung geachtet werden? Wie können Sie ein Auto mit drehenden Reifen animieren?
Flash MX
149
KOMPLEXE ANIMATIONEN
MIT
SZENEN
UND
MOVIECLIPS
KOORDINIEREN
Wie können Sie die Einheiten einer Animation sinnvoll ordnen, um eine allzu lange Zeitleiste oder zu viele Ebenen zu vermeiden? Wie können Sie innerhalb der Szenenstruktur navigieren? Müssen Sie immer den ganzen Film ansehen, wenn Sie mehrere Szenen verwenden? Was ist der Film-Explorer?. Wie blenden Sie im Film-Explorer einzelne Objektkategorien wie Töne aus, wenn aber Videos weiterhin angezeigt werden sollen? Sie möchten den gesamten Text einer Animation in einem anderen Programm oder per E-Mail verschicken. Wie kommen Sie unmittelbar an sämtliche Textbausteine heran?
Flash MX
150
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
7 Interaktion und Schaltflächen ActionScript einrichten
Flash MX
mit
151
INTERAKTION
Flash MX
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
152
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Interaktion und Schaltflächen mit ActionScript einrichten Bis jetzt bestanden die Animationen aus einem mehr oder minder langem Bilderfluss, den der Zuschauer betrachten durfte, sollte oder musste. Interessant für das Publikum werden Animationen aber gerade dann, wenn Sie die Möglichkeit schaffen, direkt auf den Inhalt Einfluss zu nehmen. Eine der einfachsten Lösungen für dieses Ziel besteht darin, Schaltflächen in einem Film einzubinden, über die man von einer Szene zu einer anderen springen kann. Einerseits stellt Flash hier ein von uns noch nicht benutztes Symbol mit dem bedeutungsvollen Namen Schaltfläche zur Verfügung, andererseits werden Sie für dieses Beispiel auch zum ersten Mal mit ActionScript arbeiten. Es gibt unglaublich viele Möglichkeiten, Schaltflächen bzw. interaktive Filme zu gestalten, sodass die entsprechende Lektion mehr als Beispiel denn als einzig oder gar beste Lösung für alle denkbaren Fälle gelten kann.
7.1
Schaltflächensymbol einsetzen
Mit besonderer Spannung dürften Sie schon auf die Vorstellung des letzten Symbols gewartet haben, wenn Sie nicht schon probehalber einen Blick über den bisherigen Tellerrand hinaus gewagt und als Symboleigenschaften eben Schaltfläche markiert haben. Die Schaltflächen sind natürlich nicht die einzige Möglichkeit, Interaktion in Filme einzubinden, stellen aber bereits eine leichte und vorgefertigte Form für diesen speziellen Einsatz dar. In ihrer Zeitleiste befinden sich insgesamt vier Schlüsselbilder (weitere werden auch gar nicht erst angezeigt), die für die unterschiedlichen Mauszustände bei Schaltflächen als Container dienen. Das Ergebnis dieses Abschnitts finden Sie in der Datei menueoben2.fla.
Es soll eine Menüleiste für die Firma SeMeCon erstellt werden, die sich mit Seminaren und Dienstleistungen rund um Webdesign, E-Commerce, Programmierung und dergleichen beschäftigt. Eine entsprechende Menüleiste für diese Geschäftsbereiche werden Sie in der nächsten Lektion erstellen. Zunächst beschäftigt sich diese Lektion mit einer Menüleiste, die allgemeine Links für das Unternehmen enthält. Sie weist Links wie Partner, Kontakt, Forum und Start auf. 7.1.1
1.
Öffnen Sie die Datei menueoben1.fla.
Das Dokument wartet nur darauf, mit verschiedenen Schaltflächen bestückt zu werden, da alles andere bereits fertig ist. Wenn Sie es dennoch selbst einrichten wollen, beachten Sie folgendes: Es ist 750 Pixel breit und 160 Pixel hoch, weist drei Ebenen namens texte (für die Links), logo (für das von links nach rechts fahrende Logo) und hintergrund (für das Hintergrundbild) auf. Das Logo befindet sich in der Datei logosemecon.gif, während die Flugzeug im Bild flugzeug.jpg zu sehen ist. Diese Dateien müssten Sie zunächst in die Bibliothek importieren. In einem Movieclip bewegen sich zwei Striche aufeinander zu und wieder voneinander weg. Sie sollen immer dann eingeblendet werden, wenn die Maus über einen der Links fährt.
Flash MX
153
INTERAKTION
7.1.2
2.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Erstellen Sie in der Bibliothek Ordner für die Schaltflächen.
Schaltflächen werden typischerweise nur einmal eingesetzt, sodass es sich meistens lohnt, entweder einen Ordner mit sämtlichen Schaltflächen anzulegen oder für jede Schaltfläche einen eigenen. In diesem Fall sind wir besonders ordentlich und erstellen die Ordner SF Kontakt, SF Partner, SF Start und SF Forum. 7.1.3
3.
Erstellen Sie die einzelnen Einträge der Schaltflächen.
Für jede der vier Schaltflächen benötigen Sie den Eintrag, der auf die Schaltfläche verweisen soll. Wie in der Abbildung dargestellt, verwenden Sie für die Texte Kontakt, Forum, Partner und Start den Zeichensatz Verdana, Schriftgröße 13 und eine weiße Zeichenfarbe. Über die Zwischenablage können Sie die anderen Einträge kopieren und müssen dafür lediglich anschließend den Text austauschen.
Flash MX
154
INTERAKTION
7.1.4
4.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Erzeugen Sie ein neues Symbol Kontakt mit der Eigenschaft SCHALTFLÄCHE.
Schaltflächen können keine weiteren Schaltflächen enthalten, d.h. eine Verschachtelung wie bei Movieclips ist nicht möglich
7.1.5
5.
Erstellen Sie die drei Mauszustände und den aktiven Bereich.
Sobald man den Bearbeitungsmodus für ein Schaltflächensymbol öffnet, gelangt man in eine besondere Zeitleiste, in der nur diese vier Schlüsselbilder bearbeitet werden können: •
Auf für den allgemeinen Linkzustand: einfacher Text
•
Darüber für den Zustand, wenn die Maus die Schaltfläche überfährt: hier Abspielbeginn für den Movieclip Striche
•
Drücken für den Mausklick: hier Fortsetzung des Movieclips Striche
•
Aktiv für den Bereich, der auf die Maus reagiert: hier ein größerer Bereich um den Text
Alle individuellen Einstellungen für Ihre Schaltflächen können Sie hier in diesen vier Schlüsselbildern einrichten: Ob der Text im normalen Zustand schwarz und im Zustand Darüber rot angezeigt werden soll, müssen Sie durch entsprechende Textobjekte in den Schlüsselbildern definieren. Damit in diesem Fall nicht noch weitere Farben in der Animation erscheinen, die nicht schon im dreifarbigen Logo enthalten sind, soll ganz auf farbliche Hervorhebung verzichtet werden. Stattdessen wird in einer zweiten Ebene der Movieclip mit den beiden hin und her tanzenden Strichen eingesetzt. Sobald die Maus also die aktive Zone der Schaltfläche erreicht, beginnt die Filmsequenz, da die Animation in das zweite Schlüsselbild springt. Es empfiehlt sich, als aktive Zone einen rechteckigen Bereich im vierten Schlüsselbild rund um die Schaltfläche festzulegen, der im Film nicht sichtbar ist. Sie könnten sich auch auf die einzelnen Buchstaben des Textes beschränken, was den Zugriff des Benutzers auf diese Schaltfläche allerdings erschwert, da nur wenige Pixel durch Mausberührung die Animation in das zweite Schlüsselbild springen lassen. Im Film werden nur die vier angegebenen Schlüsselbilder gezeigt.
Flash MX
155
INTERAKTION
7.1.6
6.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Richten Sie die Schaltfläche auf der Bühne ein.
Das Dokument enthält in der Hauptzeitleiste bereits eine noch leere Ebene namens texte, in die unterhalb des zweiten Strichs des einfahrenden Logos die einzelnen Schaltflächen eingesetzt werden sollen. Richten Sie sie entweder über die Ausrichtungsfunktionen oder durch die magnetische Wirkung des Bühnenrandes aus.
7.1.7
7.
Weisen Sie den Schaltflächen Aktionen zur Filmsteuerung zu.
Eventuell haben Sie sich gewundert, warum vorhin bei der Texterstellung kein Hyperlink für die einzelnen Texte eingesetzt worden ist. In dieser Konstruktion muss man vielmehr jeder einzelnen Schaltfläche Filmsteuerungsaktionen zuweisen, die zusätzlich regeln, was Mausereignisse bewirken sollen. Für den Fall, dass Sie nicht über einen Bildschirm mit einem Quadratmeter Anzeigfläche verfügen, könnte man Zeitleiste und Eigenschaften-Inspektor schließen, damit man im Bedienfeld Aktionen besser arbeiten kann. Für die markierte erste Schaltfläche namens Forum wählen Sie bei den Aktionen für die Filmsteuerung den Befehl ON durch einen doppelten Mausklick aus. Sofort springen oberhalb des Skriptanzeigebereichs die verschiedenen Optionen auf, die für diesen Befehl vorhanden sind. Hier ist nur das Ereignis DRÜCKEN von Bedeutung, da ja andere Ereignisse wie ROLLOVER oder WEGZIEHEN bereits im Schaltflächensymbol unter Einsatz der Schlüsselbilder konfiguriert wurden.
Flash MX
156
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Mausereignis on
Wenn ein einstellbares Mausereignis eintritt, sollen die folgenden Anweisungen ausgeführt werden: on(mausereignis) { anweisung(en); }
Listing 7.1: Ereignis on Wenn Sie regelmäßig Held in Computerspielen sind, werden Ihnen auch für die seltenen Parameter wie z.B. dragOver passende Situationen einfallen. In Kombination mit releaseOutside könnte man das Ablegen eines gefangenen Objekts innerhalb eines Spiels mit Anweisungen verknüpfen. Hier würde das Ablegen wie bei Drag&Drop nur funktionieren, wenn die Maustaste bereits vor der Schaltfläche gedrückt wurde. dragOver stellt dann sicher, dass auch bei fahriger Handbewegung das Objekt noch richtig abgelegt wird und der Spieler die nächste Ebene erreicht.
Werte für Mausereignisse
Beschreibung
press
Die Maustaste wird gedrückt, während die Maus sich über der Schaltfläche befindet.
release
Die Maustaste wird losgelassen, während die Maus sich über der Schaltfläche befindet.
releaseOutside
Die Maustaste wird losgelassen, während sich der Mauszeiger außerhalb der Schaltfläche befindet. Vorher wurde die Maustaste gedrückt, als der Mauszeiger die Schaltfläche berührte.
rollOut
Der Mauszeiger verlässt die Schaltfläche.
rollOver
Der Mauszeiger fährt über die Schaltfläche.
dragOut
Die Maustaste wird gedrückt, während der Mauszeiger über der Schaltfläche steht. Danach verlässt die Maus die Schaltfläche.
dragOver
Bei gedrückter linker Maustaste verlässt die Maus den Schaltflächenbereich und kehrt dann wieder zurück.
keyPress ("taste")
Die eingetragene Taste wird gedrückt. Tastenbezeichnungen befinden sich in OBJEKT /
Flash MX
157
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
FILM / TASTE / KONSTANTEN. Tabelle 7.1: Parameter für Mausereignisse 7.1.8
8.
Bestimmen Sie nun die Aktion, die bei diesem Mausereignis ausgelöst werden soll.
Nachdem die Maustaste gedrückt wurde, soll der Browser vom Server eine entsprechende Seite anfordern – wie das so bei einem Link üblich ist. Diesen Befehl finden sie direkt im Verzeichnis unter FILMSTEUERUNG bei BROWSER/NETZWERK. Klicken Sie auf GETURL und tragen Sie im Textfeld URL das benötigte Dokument (evtl. inklusive relativen Pfad) ein. Ob ein Dokument im aktuellen Browser unter Ersetzen des aktuellen Inhalts geladen werden soll, bestimmen Sie im Auswahlmenü FENSTER.
Browseraktion getURL
Diese häufig eingesetzte Browseraktion lässt eine Seite im Browser laden, wobei die HTMLüblichen Ziele zur Verfügung stehen. on (release) { getURL(http://www.mut.de), "_blank"); }
Listing 7.2: Browseraktion getURL Der vollständige Befehl mit dem Parameter Variablen in der Form getURL(url [, fenster [, "variablen"]]) dient dazu, z.B. beim Klicken auf eine Schaltfläche bestimmte Variablen wie bei HTML-Formularen über die Methode GET (Anhängen der Variablen am Ende der URL) oder POST (HTTP-Header bei mehr als 2000 Zeichen) an die nächste Szene oder Seite zu senden. Beides können Sie dann auch mit JavaScript, PHP oder anderen Programmiersprachen auslesen und weiterverarbeiten. 7.1.9
9.
Fügen Sie analog Skripte für die anderen Schaltflächen hinzu.
on (release) { getURL("kontakt.html", "_self"); } on (release) { getURL("partner.html", "_self");
Flash MX
158
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
} on (release) { getURL("http://www.semecon.de", "_self"); }
Listing 7.3: Maus- und Browseraktionen für Schaltflächen 7.1.10
10.
Testen Sie die Schaltflächen.
Sofern keine Movieclips in den Schaltflächen vorhanden sind, können Sie Schaltflächen mit einfachen Rollovern auch über STEUERUNG / SCHALTFLÄCHEN AKTIVIEREN direkt auf der Bühne testen. Da wir uns natürlich nicht mit einfachen Rollovern zufrieden geben, müssen wir in die Vorschau wechseln. Dort stellen Sie fest, dass bei Fahren über die Links die Filmsequenz mit den beiden pendelnden Strichen abläuft.
Schaltflächen im Bedienfeld AKTIONEN Die wichtigsten Funktionen des Bedienfelds AKTIONEN beschränken sich auf wenige Punkte. Man kann entweder im sich automatisch öffnenden Normalmodus arbeiten oder über die ANSICHTSOPTIONEN in den Expertenmodus wechseln, wo man über die Tastatur direkt Quelltext eintippen kann. Im Normalmodus kann man lediglich Quelltext über die Zwischenablage und natürlich über das Syntaxverzeichnis einsetzen. Daher gibt es auch eine spezielle Taste, um einen komplette Befehl oder eine komplette Anweisung wieder aus dem Skript zu entfernen. Möchte man gleichzeitig verschiedene Objekte oder Bilder, die mit Aktionen belegt sind, ändern, listet das Auswahlmenü im oberen Bereich sämtliche Stellen im Dokument auf, an denen ActionScript eingesetzt wird.
Flash MX
159
INTERAKTION
7.2
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Pop-up-Menüs und komplexe Schaltflächen erstellen
Die bislang vorgestellten gewöhnlichen Schaltflächen haben vielleicht in Ihren Augen nicht gerade den schlagenden Design- oder Arbeitszeitvorteil, den Sie sich erträumt haben. Im Grunde genommen könnte man sie so oder anders auch mit typischen statischen Grafikprogrammen erzeugen und in eine Webseite einbinden. Ganz anders (und darum natürlich auch ein wenig verzwickter in der Herstellung) verhält es sich mit Pop-up-Menüs oder komplexen Schaltflächen. Diese sind in statischen Grafikprogrammen nicht ohne Weiteres zu realisieren, da sie mindestens einen sekundären Anzeigebereich aufweisen, in dem erneut wählbare Bereiche liegen. Typisches Beispiel ist eine Schaltfläche, die bei Mausberührung den Blick freigibt für eine zweite Linkliste. Erst hier kann der Besucher weitere Informationen wählen und innerhalb der Webpräsenz navigieren. Verlässt er diesen Bereich wieder, verschwindet auch diese Linkliste. Den letzten Schliff erhalten diese komplexen Schaltflächen dann, wenn zusätzlich innerhalb des sekundären Auswahlbereichs jeder Link ebenfalls animiert ist. Das Ergebnis dieses Abschnitts finden Sie in der Datei menuelinks2.fla.
7.2.1
1.
Öffnen Sie die Datei menuelinks1.fla
Um die Besonderheiten bei komplexen Schaltflächen deutlich hervorzuheben, ist bereits alles, was auf der vorherigen Lektion fußt, in der Bibliothek erstellt und in der Zeitleiste eingerichtet. Die Firma differenziert ihre Dienstleistungen in drei Geschäftsbereiche: Seminare, Medien und Consulting, denen je ein Foto und eine Farbe zugeordnet wurde. In den freien Flächen neben den Grafiken sollen im Ergebnis die Geschäftsbereichstitel stehen. Fährt die Maus über einen solchen Titel, sollen die zugehörigen Links angezeigt werden. Werden diese wiederum vom Mauszeiger berührt, soll ganz klassisch ein Dreieck vor dem Eintrag seine Auswahl signalisieren. Die Geschäftsbereichstitel befinden sich in drei Grafiksymbolen, die ebenfalls ein Dreieck ausweisen, um dem Besucher mitzuteilen, dass hier ein anklickbarer Bereich auf ihn wartet. Die Bestandteile für die Linklisten für jedes einzelne Geschäftsfeld befinden sich in je einem Ordner. Sie bestehen wieder aus einer Schaltfläche und einem zugehörigen Text. Im Zustand Darüber und Drücken wird auf einer zweiten Ebene in der Schaltfläche das Dreieck direkt vor dem Eintrag eingeblendet.
Flash MX
160
INTERAKTION
7.2.2
2.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Erstellen Sie Movieclips für jede Linkliste.
Wenn die einzelnen Schaltflächen ordentlich mittels einer Hilfslinie in einem eigenen Movieclip angeordnet werden, können Sie nachher sehr schnell mit Aktionen versehen und entsprechend aktualisiert werden. Zudem bedeutet es weniger Arbeit, die gesamte Konstruktion nachher auf der Hauptzeitleiste zu arrangieren. Abgesehen von der Linkliste für den Geschäftsbereich Medien, die Sie in der Abbildung sehen, benötigen Sie eine solche Liste auch für Seminare (Themen, Termine, Ablauf, Firmen) und Consulting (Bücher, Animation, Design). Organisieren Sie Menüeinträge in Movieclips.
7.2.3
3.
Verlinken Sie die einzelnen Einträge mit ihren zugehörigen Seiten.
Wie bereits zuvor erstellen Sie für jede einzelne Schaltfläche im Bedienfeld AKTIONEN Skripte zur Verlinkung. on (press, release) { getURL("ecommerce.php", "_self"); } on (press, release) {
Flash MX
161
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
getURL("netzwerke.php", "_self"); } ...
Listing 7.4: Auszug aus den Skripten für die einzelnen Schaltflächen 7.2.4
4.
Erstellen Sie einen Rollover-Bereich.
Als letzte Vorarbeit in der Bibliothek und als abschließender Clou benötigt man noch eine Spezialschaltfläche, die bis auf den Zustand Aktiv leer ist. Im vierten Bild befindet sich darum ein Rechteck, das nachher über Skalierungen die Bereiche überdeckt, die auf Mausereignisse mit Sprüngen innerhalb der Zeitleiste reagieren sollen.
7.2.5
5.
Richten Sie die Bibliothekselemente auf einzelnen Ebenen ein.
Zunächst muss man eine Struktur entwickeln, die reflektiert, was genau in diesem Menü passieren soll, wobei die Zeitleiste nicht mehr primär für die Zeit zuständig ist, sondern für unterschiedliche Darstellungen, welche über die verschiedenen Objekte eingerichtet werden: •
Normalzustand ohne Mausereignisse: nur die Geschäftsbereich auf der Ebene bereiche sind zu lesen
•
Maus überfährt Schaltfläche Seminare: Linkliste Seminare wird in seminare eingeblendet
•
Maus überfährt Schaltfläche Medien: Linkliste Medien wird in medien eingeblendet
•
Maus überfährt Schaltfläche Consulting: Linkliste Consulting wird in consulting eingeblendet
•
allgemeiner Zustand bei diesen Mauereignissen: Geschäftsbereiche werden ausgeblendet
Zunächst muss nicht beachtet werden, wie diese Zustände programmiert oder wie die Mausereignisse abgefangen werden. In einem ersten Schritt ist nur interessant, welche Ansichten innerhalb der Menüleiste eingenommen werden können. Der Hintergrund bspw. ist immer vorhanden, sodass er während aller anderen Zustände stets eingeblendet und daher auch der nötigen Zwischenphasen über die gesamte Zeitleiste bedarf. Der Normalzustand wie die anderen Zustände für die Mausbewegungen benötigen dagegen je ein eigenes Schlüsselbild, in dem die oben beschriebenen Objekte eingeblendet werden. Während Sie auf der Ebene bereiche die von oben nach unten in je einem freien Rechteck die Grafiksymbole GF seminare, GF medien und GF consulting anordnen (Bild 1), benötigen Sie ebenfalls je ein Schlüsselbild für die Linklisten (Bild3, 4 und 5).
Flash MX
162
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Abstände oder Reihenfolge der einzelnen Zustände sind beliebig. Achten Sie gerade bei Menüs mit noch mehr Funktionen jedoch auf eine sinnvolle, typischerweise treppenartige Struktur innerhalb der Zeitleiste. Alternativ können Sie auch auf Ebenen-Ordner zurückgreifen, wenn zu viele Ebenen entstehen.
7.2.6
6.
Richten Sie die Rollover-Bereiche ein.
Für jeden Bereich eines Geschäftsfeldes, der auf das Mausereignis ROLLOVER reagieren soll, fügen Sie eine Instanz des Elements ROLLOVER aus der Bibliothek ein. Über die Skalierungsfunktion schieben Sie die drei übereinander liegenden Objekte genau über ein Bild und den freien Bereich inklusive den Titel des Geschäftsbereichs. Dabei dürfen sich natürlich die Rollover-Bereiche nicht überlagern, um Filmfehler durch unklare Anweisungen zu vermeiden. In untenstehender Abbildung passt sich das skalierte Objekt den Hilfslinien an und liegt genau über der Blüte und GF Seminare.
7.2.7
7.
Erstellen Sie Schlüsselbilder für die Rollout-Bereiche.
Wenn der Benutzer aus einem der Geschäftsbereichsmenüs zurückkehren möchte zum Hauptmenü – wenn ihm das auch so vielleicht nicht bewusst werden wird -, müssen Bereiche innerhalb der Bühne definiert sein, die ein Verlassen der Maus abfangen. Diese Bereiche können nur in einem Schlüsselbild positioniert werden, das die gleiche Bildnummer trägt wie die Anzeige der Menüleiste selbst. Richten Sie zusätzlich diese Schlüsselbilder auf einer eigenen Ebene rollout ein, damit Sie die Konstruktion besser durchschauen.
Flash MX
163
INTERAKTION
7.2.8
8.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Erstellen Sie jeden einzelnen Rollout-Bereich.
Ausgehend von der Frage „Wohin kann sich die Maus bewegen, wenn sie sich fortbewegt?“ sind drei Bereiche nötig, wenn die Menüleiste direkt rechts vom Browserfensterrand liegt. Für Schaltflächen, die mitten auf der Bühne liegen, müsste ein kreisförmiger Bereich gezogen werden. Insgesamt ziehen Sie das Objekt rollover drei Mal aus der Bibliothek und skalieren es passend, sodass oben, unten und rechts ein Bereich entsteht, der die austretende Maus bemerkt und gleich mit einem passenden Skript darauf reagiert.
7.2.9
9.
Stoppen Sie den Film-Ablauf.
Bis jetzt handelte sich bei diesem Menü noch um einen Film, der der Reihe nach die einzelnen Zustände darstellte, ohne dem Besucher ausreichend Gelegenheit zu geben, eine Auswahl zu treffen. Die Standardlösung für alle ähnlich gelagerten Fälle ist es, den Film von vorneherein nach dem ersten Schlüsselbild zu stoppen. Dazu fügt man über das BEDIENFELD-AKTIONEN / FILMSTEUERUNG / STOP den Befehl...
Flash MX
164
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
stop();
Listing 7.5: Stoppt einen Film ... jedem Schlüsselbild zuzuweisen, das einen statischen Zustand darstellt: Bild 1, 3, 4 und 5. Da diese Aktionen nicht einzelnen Objekten, sondern dem ganzen Bild zugewiesen wurden, erhält es ein kleines „a“ als Markierung.
7.2.10
10.
Aktivieren Sie die Geschäftsbereiche.
Aus den Aktionen zur Filmsteuerung rufen Sie zunächst die Mausereignisse press und rollOver ab. Da man nie weiß, ob der Besucher eine Schaltfläche sofort drückt oder davon ausgeht, es handele sich nur um eine Rollover-Schaltfläche, fängt man am besten beide Ereignisse ab. Mit dem Befehl gottoAndPlay wechselt man zu Bild 4, was man in das Textfeld BILD einträgt. Alternativ kann man auch zum nächsten oder vorherigen Bild wechseln oder von Szene zu Szene springen. on (press, rollOver) { gotoAndPlay(4); }
Listing 7.6: Sprung zu einem Bild
7.2.11
11.
Legen Sie die Aktionen beim Verlassen der Linkliste fest.
Mit den gleichen Befehlen, allerdings einem Sprung zu Bild 1, reagieren die drei Rollout-Bereiche in Bild Nr.4, sobald die Maus sie berührt und damit die Linkleiste verlässt. on (press, rollOver) {
Flash MX
165
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
gotoAndPlay(1); }
Listing 7.7: Verlassen der Linkliste
7.3
Vorlagen für Schaltflächen verwenden
Bestimmt ist Ihnen schon aufgefallen, dass in unmittelbarer Nähe von FENSTER / BIBLIOTHEK auch ein Eintrag namens FENSTER / ALLGEMEINE BIBLIOTHEKEN auszuwählen ist. Hinter diesen allgemeinen Bibliotheken verbergen sich drei Vorlagenordner mit bereits fertigen, sehr gelungenen Elementen, die man einfach in eine bereits bestehende Seite hineinkopieren kann. Dabei sind natürlich die notwendigen Schritte immer die gleichen, sodass wir nur für den Fall der Schaltflächen und innerhalb der großen Auswahl auch wiederum nur für einige Steuerungsknöpfe demonstrieren, wie Sie diese sehr guten Vorlagen für sich nutzbar machen können. Das Ergebnis dieses Abschnitts finden Sie in der Datei praesentation5.fla.
7.3.1
1.
Öffnen Sie die Datei praesentation4.fla.
Diese Datei ist eine Erweiterung der Firmenpräsentation, die Sie im Projekt zu den komplexen Animationen erstellt haben. Ziel soll nun sein, zwei Schaltflächen während des gesamten Films einzublenden, mit denen die Animation gestoppt und wieder abgespielt werden kann. 7.3.2
2.
Erweitern Sie das Dokument auf eine Höhe von 350 Pixel.
Um die jeweils anderen Hintergrundfarben in den einzelnen Szenen noch über die gesamte Ansicht zu verteilen, reicht es, einfach das Rechteck in der Ebene hintergrund mit der Schaltfläche FREI TRANSFORMIEREN passend zu skalieren. In diesen freien Raum sollen später beide Schaltflächen eingesetzt werden. 7.3.3
3. Wählen Sie FENSTER / ALLGEMEINE BIBLIOTHEKEN / SCHALTFLÄCHEN und kopieren Sie die benötigten Schaltflächen in Ihre Animation.
Sie sehen bereits, dass sehr viele Ordner mit jeweils mehreren Schaltflächen in der allgemeinen Bibliothek vorhanden sind. Einige Schaltflächen sind extra so konzipiert, dass Sie einen individuellen Text in eine Ebene platzieren können, andere – wie die jetzt verwendeten – müssen sie komplett auseinander schrauben, um Änderungen vorzunehmen. Im Ordner CIRCLE BUTTONS finden Sie Steuerungsknöpfe für Animationen in Form von Gerätetasten mit den weltbekannten Dreiecken, Quadraten und Strichen. Um z.B. die beiden Schaltflächen Stopp und Play in die Animation praesentation4.fla einzufügen, haben Sie verschiedene Möglichkeiten. Wenn Sie schon wissen, an welcher Stelle sie eingesetzt werden sollen, können Sie die Elemente direkt auf die Bühne ziehen. Automatisch trägt das Programm sie als Symbole auch in die Dateibibliothek ein. Wenn Sie dagegen zunächst nur im Film einsatzfähige Objekte sammeln und direkt in Ihre Bibliothek einsortieren wollen, genügt einfaches Drag&Drop. Der Ordnung sollten Sie sie auch umgehend in einem eigenem Order speichern.
Flash MX
166
INTERAKTION
7.3.4
4.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Richten Sie beide Schaltflächen in einem Grafiksymbol steuerung ein.
Da die beiden Schaltflächen im Rahmen einer Steuerleiste in allen Szenen funktionsfähig sein sollen, lohnt es sich, ein eigenes Symbol dafür in der Bibliothek zu erstellen. In zwei separaten Ebenen können dann die beiden Schaltflächen platziert werden. Änderungen an den vorbereiteten Elementen können Sie so wie sonst im Symbol-Bearbeitungsmodus vornehmen.
7.3.5
5.
Richten Sie die nötigen ActionScript-Befehle ein.
on (press, release) { play(); } on (press, release) {
Flash MX
167
INTERAKTION
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
stop(); }
Listing 7.8: Abspielen und Stoppen des aktuellen Filmbereich Damit der Film nicht sofort startet, sondern man erst auf die Schaltflächen klicken muss, müssen Sie noch eine stop(); - Aktion für das erste Bild der Animation in der Szene Intro einfügen. 7.3.6
6.
Testen Sie die Animation.
Als Resultat sollte sich die Animation jetzt so verhalten, dass sie erst beim Drücken des PlayKnopfs beginnt und jederzeit über die Stop-Taste angehalten werden kann, um z.B. die Texte langsamer zu lesen als die Animation vorgibt.
7.4
Schaltflächen mit Ton versehen
Dass es sich vom Prinzip her immer lohnt, bei Flash-Animationen im Web auch mal die Lautsprecher einzuschalten, hatten wir bereits im Projekt über die Importfunktionen gesehen. Besonders häufig wird Ton für Schaltflächen eingesetzt. Dabei muss lediglich wie sonst eine eigene Tonspur in Form einer Ebene in die Schaltfläche gesetzt werden. Konsequent müssen Sie dann mit Hilfe der Schlüsselbilder die nötigen Ton-Einstellungen über Schlüsselbilder vornehmen. Das Ergebnis dieses Abschnitts finden Sie in der Datei praesentation6.fla.
7.4.1
1.
Importieren Sie den Ton zisch.wav in die Bibliothek.
Der Ordnung halber gehört diese Datei ebenfalls in den Ordner steuerleiste zu den anderen Elementen. 7.4.2
2.
Richten Sie eine neue Ebene namens ton in der Schaltfläche play ein.
7.4.3
3.
Richten Sie für den Zustand Gedrückt ein leeres Schlüsselbild ein.
Typischerweise erklingt ein Ton bei Schaltfläche im Zustand Gedrückt, sodass dort ein leeres Schlüsselbild in der Zeitleiste benötigt wird.
Flash MX
168
INTERAKTION
7.4.4
4.
UND
SCHALTFLÄCHEN
MIT
ACTIONSCRIPT
EINRICHTEN
Ziehen Sie die Ton-Datei auf die Bühne.
Im Schlüsselbild wird nun so wie sonst mit einer blauen Linie die Tonspur angezeigt.
7.5
Testen Sie Ihr Wissen!
Welches spezielle Bibliothekelement steht Ihnen zur Verfügung, um einfache Schaltflächen zu entwickeln? Sie verlinken den Text innerhalb einer Schaltfläche mit einer Seite. Genügt das, um zufriedenstellende Rollover-Effekte auszulösen? Wie verhindern Sie den Abspielvorgang eines Films oder einer Szene? Mit welchem Standardprogramm navigieren Sie innerhalb von Filmen? Mit welchen Grundtechniken erstellen Sie komplexe Schaltflächen mit mehreren Auswahlebenen? Mit welchem Befehl kann der Besucher zu anderen Seiten wechseln? Wie können Sie Schaltflächen mit Ton versehen?
Flash MX
169
VISUELLE EFFEKTE
8 Visuelle Masken
Flash MX
Effekte
UND
ANIMATIONEN
und
MIT
MASKEN
Animationen
mit
170
VISUELLE EFFEKTE
Flash MX
UND
ANIMATIONEN
MIT
MASKEN
171
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
Visuelle Effekte und Animationen mit Masken In diesem Projekt stellen wir Ihnen ein besonderes Hilfsmittel vor, mit dem ganz ungewöhnliche visuelle Effekte in Standbildern aber auch oder insbesondere in Animationen erzielt werden können. Es lässt sich mit den anderen bereits vorgestellten Techniken wie Tween-Animation oder Movieclips kombinieren, sodass dieses Projekt quasi als Sahnehäubchen für diese Techniken betrachtet werden kann. Bei diesem Kuchen wurde nur der Teig zuerst gegessen, ehe Früchte und Sahne ein ähnliches Schicksal erleiden mussten. Die Rede ist auf der einen Seiten von so genannten maskierten Ebenen bzw. Maskenebenen. Maskenebenen erlauben durch erstellte Figuren (Formen oder Texte) einen Schlüssellochblick auf eine darunter liegende Ebene. Diese wird dann zu einer maskierten Ebene. Interessant ist nicht nur, dass dadurch gerade bei Fotos ungewöhnliche visuelle Effekte möglich sind (der Schriftzug „Berlin“, durch den das Brandenburger Tor hindurchschimmert), sondern gerade auch bei Animationen möglich werden. In diesem Projekt stellen wir Ihnen die einzelnen Möglichkeiten anhand eines kleinen Fotoalbums vor, das aus Bildern besteht, die vom Münchner Olympiaturm geschossen wurden. Dabei lernen Sie auch ineinander verschachtelte Masken kennen.
8.1
Grundprinzip der Maskierung
Masken lassen sich am einfachsten mit Schlüssellöchern vergleichen. Auf einer Ebene wird eine Form wie z.B. ein Text oder eine Form (Quadrat, Kreis usw.) erzeugt. Eine direkt darunter liegende Ebene enthält dagegen wesentlich mehr Inhalt in Form eines komplexen Bildes oder eines längeren Textes. In der Abbildungen sehen Sie die einfachste Konstellation, bestehend aus einer Hintergrundebene, die ein Bild enthält, und einer Vordergrundebene, die den Namen der Stadt enthält, die das ungewöhnlichste Verkehrsmittel der Republik unterhält. Maskenebene heißt die Ebene, die das Schlüsselloch enthält. Maskierte Ebene ist die Ebene, die durch das Schlüsselloch betrachtet wird.
Flash MX
172
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
Das Ergebnis dieses Beispiels finden Sie in der Datei wuppertal1.fla.
Sobald die Maskenebene als solche definiert wird, bestimmt das Programm automatisch die unmittelbar darunter liegende Ebene zu einer maskierten Ebene. Dabei kann der Betrachter von der maskierten Ebene nur noch die Bildinhalte wahrnehmen, die von der Form in der Maskenebene freigelegt werden. Die Farbe der Form in der Maskenebene ist damit vollkommen egal, da bei der Definition einer Ebene zur Maskenebene nur die Form als Schlüsselloch verwendet wird, während alle anderen Bereiche die Farbe des Filmhintergrunds annehmen. Diese Schlüssellochtechnik lässt sich daher vielleicht auf den ersten Anschein nicht sehr fachmännisch, auf den zweiten (Schlüsselloch-)Blick aber sehr treffend mit der Analogie eines Schlüsselbilds erklären. Im vorliegenden Beispiel also verdient natürlich die Schwebebahn den nötigen dramatischen Auftritt, sodass eine Maskierung des Hintergrunds (maskierte Ebene) durch den Vordergrund mit dem Schriftzug Wuppertal (Maskenebene) nur innerhalb der Umrisse den Blick auf den Hintergrund freigibt. In der Zeitleiste erhalten beide Ebenen eine besondere Darstellung, nämlich zunächst eine türkise Schraffierung. Die Maskenebene wird zusätzlich durch ein schwarzes, ausgestanztes Oval gekennzeichnet, während die maskierte Ebene automatisch eingerückt wird. In dieser Hinsicht ähnelt sich die Darstellung der Situation einer Führungsebene. Wichtig ist, die automatische Sperrung. Sobald man die Ebenen wieder entsperrt, verschwindet auch der Maskeneffekt.
Flash MX
173
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
Die Ergebnisse dieses Beispiels finden Sie in der Datei wuppertal2.fla und wuppertal3.fla.
Der Clou besteht nun nicht nur darin, für solche statischen Bilder einen passenden visuellen Effekt parat zu haben, sondern den Schriftzug geschickt zu animieren, sodass er wie eine Lupe über den Hintergrund gleitet. Dieses Grundmuster finden Sie in der Datei wuppertal3.fla, in der der Schriftzug sich von unten kommend drehend an den oben gezeigten Platz bewegt. Eine mögliche Verfeinerung stellt dann der Einsatz von Movieclips dar, die selbstverständlich komplexere Bewegungen erlauben.
8.2
Einfache Masken erstellen und animieren
Diese und die nächste Lektion verwenden wie eingangs erwähnt, ein kleines Bilderbuch mit Bildern in allen vier Himmelsrichtungen vom Münchner Olympiaturm. Das Bilderbuch könnten Sie selbst mit den bisherigen Trainingseinheiten erstellen, liegt Ihnen aber (glücklicherweise) als Vorlage vor. Wie bei einem im Supermarkt heimlich gekauften Tortenboden müssen Sie nur noch die Früchte und die Sahne kreativ hinzufügen. Das Ergebnis dieses Abschnitts finden Sie in der Datei muenchen2.fla.
8.2.1
1.
Öffnen Sie die Datei muenchen1.fla.
Die Datei (600 Pixel breit, 400 Pixel hoch, Hintergrundfarbe: #CECECE) besteht aus zwei Ebenen, die einerseits ein Luftbild der Olympiahalle zeigen und andererseits für die Navigation innerhalb des Bilderbuchs sorgen sollen. Die Schaltknöpfe stammen aus ALLGEMEINEN BIBLIOTHEKEN / SCHALTFLÄCHEN / ARCADE BUTTONS in Orange. Die Schriftfarbe der Beschriftungen für die einzelnen Schaltflächen ist daher auch Orange bzw. #EF5900. Die in der Mitte jeweils einzufügenden Bilder, auf die später verschiedene Maskeneffekte angewandt werden sollen, heißen norden.jpg, sueden.jpg, westen.jpg und osten.jpg und sind alle 400 Pixel breit und 300 Pixel hoch.
Flash MX
174
VISUELLE EFFEKTE
8.2.2
2.
UND
ANIMATIONEN
MIT
MASKEN
Erstellen Sie eine neue Ebene streifenquer für die Maske.
Die erste Phase bei der Verwendung von Masken ist immer ein Einrichtung der Maskenebene bzw. die Form (Schlüsselloch). In diesem Fall sollen die Bilder maskiert werden, sodass Sie eine Ebene benötigen, die direkt oberhalb der Bildebene liegen muss. 8.2.3
3.
Erstellen Sie in der Bibliothek eine rechteckige Form namens streifen.
Da in diesem Fall zwar offensichtlich später immer nur ein Streifen des Bildes zu sehen sein soll, benötigt man zunächst einmal diesen Streifen, den Sie ganz einfach über ein Rechteck erzeugen. Interessant ist jedoch nicht, von einem Luftbild 20 Pixel zu sehen, sondern in einer angemessenen Zeit das ganze Bild durch dieses Schlüsselloch zu betrachten. Da dieser Streifen später animiert wird, müssen Sie ihn entweder direkt in der Bibliothek erstellen oder mit F6 zu einem GrafikSymbol transformieren. Die Farbe einer solchen Form ist vollkommen belanglos, da allein ihr Umriss für die Maske bedeutsam ist. Beachten müssen Sie ausschließlich ihre Form.
Flash MX
175
VISUELLE EFFEKTE
8.2.4
4.
UND
ANIMATIONEN
MIT
MASKEN
Richten Sie eine Bewegung von oben nach unten in den Bildern 1 bis 30 ein.
Das Ergebnis dieses Abschnitts finden Sie in der Datei muenchen3.fla.
8.2.5
5.
Wandeln Sie die Ebene streifenquer in eine Maskenebene um.
Die einfachste Möglichkeit, eine Maskenebene einzurichten, finden Sie im Kontextmenü der Ebenen mit dem Eintrag MASKE. Alternativ, wie Sie auch in der Abbildung sehen, können in den Ebenen-Einstellungen eine Masken-Ebene erzeugen. Automatisch wird dabei die direkt darunter liegende Ebene als maskierte Ebene definiert und eingerückt. Beide Ebenen werden zusätzlich gesperrt. Sobald Sie eine der Sperrungen lösen, verschwindet der Maskierungseffekt. Ohne Sperrung beider Ebenen ist der Maskierungseffekt unsichtbar. Lösen Sie die Sperrungen nur, um alle Bildinformationen zu sehen.
Flash MX
176
VISUELLE EFFEKTE
8.2.6
6.
UND
ANIMATIONEN
MIT
MASKEN
Testen Sie den Film mit dem Maskeneffekt.
Die Maskierung sorgt dafür, dass während der Bewegung des Rechtecks in der Maskenebene nur dieser Streifen vom Hintergrundbild zu sehen ist.
8.3
Movieclips für Maskierungen benutzen
Eine nächste Steigerung besteht darin, sich Movieclips zu Nutze zu machen, um mehr Inhalte des Bildes zu zeigen bzw. auch die Form des Bildausschnitts zu beeinflussen. Da Movieclips eine eigene Zeitleiste besitzen bzw. sämtliche Animationsmöglichkeiten wie Bewegung oder Form aufweisen, bieten sie sich für umfangreichere Maskierungen an als es eine simple Form vermag. Das Grundschema bleibt dabei weitestgehend erhalten.
8.3.1 Vervollständigen des Films Damit das Bilderbuch nachher auch funktionstüchtig ist, müssen Sie zwei Dinge beachten, die Sie aber bereits in den anderen Projekten kennen gelernt haben: Damit die Navigation innerhalb des Bilderbuchs gelingt, weisen Sie allen Schaltflächen das übliche Skript zu: on (press, release) { gotoAndPlay("Westen", 1); }
Flash MX
177
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
Listing 8.1: Steuerung der Navigationsschaltflächen Am einfachsten ist es, wenn Sie für jede Station im Bilderbuch eine eigene Szene einrichten. So bleibt die Zeitleiste überschaubar und der ActionScript-Quelltext minimal, da Sie nicht gezwungen sind, etwaige Bildnummern zu vergeben. Stattdessen können Sie ja ganz einfach den SzenenNamen aus dem Auswahlmenü wählen. Als weiteres kleines Detail müssen Sie die stop() Aktion für jedes letzte Bild einer Szene zuweisen, wenn Sie verhindern wollen, dass der Film einfach weiterläuft, ohne dass der Betrachter eine Schaltfläche geklickt hat. Diese Hinweise galten für alle Szenen, sodass wir sie im folgenden nicht wiederholen, sondern uns ganz auf die Maskierungen konzentrieren.
8.3.2 Movieclip-Masken erstellen 8.3.3
1. Erstellen Sie in einem Grafik-Symbol mehrerestreifen sechs nebeneinander liegende Streifen.
Das Ziel soll eine sehr starke Abwandlung des ersten Effekts sein, wobei nicht ein Streifen, sondern mehrere eingesetzt werden, und diese zusätzlich über eine Drehung animiert werden. Eine solche Drehung lässt sich am einfachsten in einem Movieclip realisieren. Dazu benötigt man zunächst die Streifen, die Ausmaße von ungefähr 200 Pixel Breite und 500 Pixel Höhe haben sollten. Das Ergebnis dieses Abschnitts finden Sie in der Datei muenchen4.fla in der Szene Norden.
8.3.4
2.
Erstellen Sie in einem Movieclip eine Drehung des Grafik-Symbols mehrerestreifen.
Zwischen Bild 1 und 60 soll über eine einfache Bewegungs-Animation, die keine Ortsänderung zur Folge hat, eine Drehung eingerichtet werden. Dazu markieren Sie im Eigenschaften-Inspektor zunächst den Bewegungs-Tween, ehe Sie dann bei DREHUNG den Eintrag USZ auswählen. Die Anzahl der Drehung können Sie beliebig bestimmen. In der Ergebnisdatei liegt sie bei lediglich einer Umdrehung in den gesamten 60 Bildern. In der Abbildung können Sie in der Bibliothek zunächst die einzelnen Komponenten mehrerestreifen und streifen erkennen, während auf der Bühne die ersten fünf Zwiebelschalen eingeblendet werden.
Flash MX
178
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
8.3.5
3.
Richten Sie in eine Szene Norden eine Ebene für das Bild norden.jpg ein.
8.3.6
4.
Fügen Sie in eine Ebene streifen den Movieclip streifen ein.
8.3.7
5.
Definieren Sie die Ebene streifen zu einer Maske.
Wie sonst auch, war die Farbe der Streifen egal, denn nur die Streifenumrisse bleiben erhalten, während der Rest der Ebene durch die Hintergrundfarbe des gesamten Films ersetzt wird. Zunächst definieren Sie die Ebene streifen zu einer Maskenebene, was automatisch dazu führt, dass das Programm automatisch die darunter liegende Ebene als maskiert betrachtet.
8.3.8
6.
Testen Sie den Film.
Wie bei allen Movieclips können Sie den Test nur im Flash Player oder in der Vorschau durchführen und nicht über die Zeitleiste. Erst hier sehen Sie dann die Drehung der einzelnen Streifen, die nach und nach Bildbereiche offen legen.
Flash MX
179
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
8.3.9 Einsatz von komplexen Movieclips Dieser Abschnitt soll Ihnen zeigen, wie Sie mit einfachen Mitteln auch anspruchsvolle Effekte erzeugen können. Alternativ stehen Ihnen natürlich auch die verschachtelten Masken zur Verfügung, die Sie in der nächsten Lektion kennen lernen werden. Ihre Planung kann aber manchmal etwas schwieriger sein, als ganz konsequent komplexe, mehrschichtige Movieclips zu erzeugen. Das Ergebnis dieses Abschnitts finden Sie in der Datei muenchen4.fla in der Szene Westen.
8.3.10
1.
Malen Sie vier Kreise um einen großen in einem neuen Grafik-Symbol.
Das Ergebnis sollen nachher zwei sich umeinander bewegende und selbst rotierende Kreissysteme sein, die wie zufällig über das Hintergrundbild schwirren. Dazu benötigt man zunächst ein GrafikSymbol der Hauptkomponente, die dann im nächsten Schritt in einem Movieclip mit der benötigten Bewegung versehen wird.
Flash MX
180
VISUELLE EFFEKTE
8.3.11
UND
ANIMATIONEN
MIT
MASKEN
2. Richten Sie Ebenen für zwei Pfadanimationen der zwei Kreissysteme in einem Movieclip ein.
Um die Bewegung so komplex wie möglich zu machen, bietet sich als leichtes Herstellungsverfahren für jedes Kreissystem eine Pfadebene an. Welches Objekt das andere überlagert, spielt bei einer späteren Verwendung als Maske keine Rolle, da auch nur die beiden Formen übrig bleiben. Das bedeutet, dass bei einer Überlappung Teile des Kreissystems miteinander verschmelzen und sich wieder trennen. Diesen Effekt wird man nachher bei der Geschwindigkeit der Rotation und der Bewegung am Pfad entlang gar nicht wahrnehmen, aber es könnte ein weiterer Animationseffekt sein.
8.3.12
3.
Erstellen Sie eine gespiegelte Pfadanimation mit je einem Kreissystem.
Mit Worten kann man die dieser Bewegung zu Grunde liegende Strichführung wohl kaum beschreiben. Wichtig ist nur, dass das in der Abbildung rechts oben stehende Kreissystem auf dem Pfad liegt, der rechts oben beginnt und sich dann in arabischer Lesrichtung nach unten bewegt. Das andere Kreissystem bewegt sich dagegen in deutscher Lesrichtung, wobei der imaginäre Text um 90 Grad nach links gekippt wurde – wie gesagt: sprachlich nicht zu beschreiben.
Flash MX
181
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
Zum Schluss soll zusätzlich für eine flüssige Bewegung ohne Sprünge der Ausgangspunkt von jedem Kreissystem wieder erreicht werden.
8.3.13
4.
Richten Sie die Maskierung ein.
Technisch entspricht diese Arbeit den anderen Beispielen, da lediglich der Inhalt der Filmsequenz um eine Ebene und zwei eigenwillige Pfadanimationen erweitert wurde. Auch wenn Sie als Ergebnis auf der Bühne nur ein Kreissystem erhalten, funktioniert die Animation dennoch. Definieren Sie einfach die Ebene kreise als Maskenebene, sodass die Ebene westen, die das Bild westen.jpg enthalten soll, automatisch als maskierte Ebene eingerückt erscheint.
Flash MX
182
VISUELLE EFFEKTE
8.3.14
5.
UND
ANIMATIONEN
MIT
MASKEN
Testen Sie den Film.
Laut Plan sollten sich jetzt beide Kreissysteme wild umeinander drehen und als eigenes Objekt noch einmal selbst rotieren. Sollten Sie meinen, dass man vom Hintergrund nicht genug sieht, müssen Sie lediglich das Grafik-Symbol für das Kreissystem vergrößern. Diese Änderungen wirken sich dann auf die abgeleiteten Objekte aus.
Weitere Einsatzmöglichkeiten Die Kombination aus Masken und Movieclips bietet wegen der Flexibilität ihrer Komponenten unglaublich viele Möglichkeiten. In der Beispieldatei muenchen4.fla lernen Sie ausschließlich den Einsatz von Movieclips kennen, die im aktuellen Fall dieser Lektion höchstens mehrere Ebenen und Bewegungs-Animationen verwenden. Wesentlich mehr Optionen erhalten Sie, wenn Sie berücksichtigen, dass Sie innerhalb eines Movieclips natürlich auch mehrere Animationen aneinanderfügen können. Damit ließe sich u.a. realisieren, dass über einen Form-Tween aus einem Kreis ein Dreieck
Flash MX
183
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
und danach ein Quadrat wird, das den gesamten Blick auf die maskierte Ebene freigibt. Nach dem Ablauf des zugehörigen Movieclips könnte dann einer neuen Szene das Hintergrundbild komplett eingeblendet bleiben. Über rechteckige Formen, die sich in einem Movieclip von oben nach unten schieben, können Sie ein herunter fallendes Menü einrichten. Anstatt mühsam die einzelnen Einträge über einen Einblendevorgang in einzelnen Schlüsselbildern zu realisieren, ist die Menüleiste prinzipiell immer vorhanden, wird jedoch nur von einer Maske verdeckt. Sobald der Mauszeiger den Titeleintrag des Menüs berührt, springt die Animation zu dem Bild, in dem die Animation oder der Movieclip abläuft, die den Blick auf die darunter liegenden Einträge freigibt. Wenn Sie die Maskentechnik umkehren, können Sie in einer Maskenebene Bereiche anlegen, die dann nachher mit Text versehen werden können. Hier muss man nur gedanklich den Sprung schaffen, dass man nachher auf den in der Maskenebene nicht benutzten Freiflächen weiterarbeiten möchte, während durch die Füllformen der Hintergrund hindurchschimmert. Dies ändert nichts an der normalen Vorgehensweise und stellt auch keine besondere Fähigkeit der Maskentechnik dar, kann aber ein interessanter Layouteffekt sein.
8.4
Verschachtelte Masken
Das Grundprinzip einer verschachtelten Maske besteht in Wahrheit darin, dass sie selbst überhaupt nicht miteinander verschachtelt werden, sondern dass ein Movieclip, der eine Maske enthält, wiederum maskiert wird. In dieser Lektion soll als Ergebnis eine aus Dreiecken bestehende Maske über dem Bild osten.jpg teilweise ihrer Maskierung behoben werden, indem die uns bereits bekannten Streifen darüber gelegt werden. Wenn sich dann die Dreiecke noch entgegen gesetzt zu den Streifen drehen, wird der Blick auf das Hintergrundbild prinzipiell durch vier Dreiecke bestimmt. Die Streifen jedoch legen sich wiederum über diese Dreiecke und schraffieren sie damit. Masken können nur über Movieclips verschachtelt werden.
Das Ergebnis dieses Abschnitts finden Sie in der Datei muenchen4.fla in der Szene Osten.
8.4.1
1.
Zeichnen Sie ein Dreieck in einem eigenen Grafik-Symbol.
Wie sonst auch, wird die Grundkomponente dieser Maskierung in einem eigenen Grafik-Symbol namens dreieck erstellt. Es sollte mindestens 150 Pixel breit und 200 Pixel hoch sein.
Flash MX
184
VISUELLE EFFEKTE
8.4.2
2.
UND
ANIMATIONEN
MIT
MASKEN
Bringen Sie vier Instanzen des Dreiecks in einem Movieclip zusammen.
Da die vier Dreiecke sich wie eine Windmühle drehen sollen, müssen Sie alle Instanzen in einer gemeinsamen Ebene erzeugen. Diese vier Instanzen müssen Sie dann gruppieren, bevor die Drehbewegung erzeugt werden kann. 8.4.3
3.
Animieren Sie alle vier Dreiecke in einer Drehbewegung gegen den Uhrzeigersinn.
Damit diese Animation nicht zu schnell abläuft, erzeugen Sie erst bei Bild 45 ein neues Schlüsselbild für die Gruppierung. Dann richten Sie einen Bewegungs-Tween ein, dem aber keine Ortsänderung zu Grunde liegt. Stattdessen benötigen Sie erneut die Drehungseinstellung im Eigenschaften-Inspektor. Hier wählen Sie USZ für eine einmalige Umdrehung.
Flash MX
185
VISUELLE EFFEKTE
8.4.4
UND
ANIMATIONEN
MIT
MASKEN
4. Führen Sie in einem neuen Movieclip Hintergrundbild und die drehenden Dreiecke zusammen.
Als Novum fügt man nun nicht wie in den anderen Beispielen das Hintergrundbild direkt in die Szene ein, sondern konstruiert zunächst mit ihm und dem gerade erstellten Movieclip einen weiteren. In diesem fungiert dann später die drehende Dreieckskonstruktion als Maske. 8.4.5
5.
Maskieren Sie das Hintergrundbild.
Den Movieclip drehendedreiecke muss man nun als Maske definieren, damit nur noch durch die Windmühlenflügel der Bildhintergrund ersichtlich ist. In der Abbildung sehen Sie den Zustand bei entsperrten Ebenen, sodass Sie die Proportionen und die Ausrichtung von drehendedreiecke erkennen können. Vor Beendigung der Arbeiten an diesem neuen Movieclip ostenmaskiert darf nur noch ein dreieckiges Stückchen Hintergrundbild zu sehen sein bzw. müssen die Ebenen gesperrt werden.
Flash MX
186
VISUELLE EFFEKTE
8.4.6
6.
UND
ANIMATIONEN
MIT
MASKEN
Fügen Sie die Filmsequenz ostenmaskiert in die Szene Osten ein.
In den anderen Beispielen hatten Sie an dieser Stelle immer das Originalbild eingefügt. Hier jedoch ist es bereits vorher in einem Movieclip maskiert worden. 8.4.7
7.
Fügen Sie als Maskierungsebene den Movieclip drehendestreifen ein.
Die Abbildung zeigt den Zustand, bevor die Streifen als Maskenebene definiert werden und sich diese Maskierung auf die darunter liegende Ebene mit dem Movieclip ostenmaskiert ausgewirkt hat.
8.4.8
8.
Testen Sie das Ergebnis.
Erst in der Vorschau oder im Flash Player ergibt sich das Ergebnis in seiner ganzen Pracht: Die gegeneinander rotierenden Objekte richten einerseits (ostenmaskiert) ein Schlüsselloch ein, das
Flash MX
187
VISUELLE EFFEKTE
UND
ANIMATIONEN
MIT
MASKEN
andererseits (drehendestreifen) wieder aufgehoben wird. Durch die ungleichmäßige Verteilung der Dreiecke kommt zusätzlich eine Strukturvariation hinzu.
8.5
Testen Sie Ihr Wissen!
Können Sie das Grundprinzip der Maskierung erläutern? Kann man die Maskierung ein- und ausschalten? Was ist dabei prinzipiell zu beachten? Warum haben die Streifen oder die Dreiecke nicht auch die Schaltflächen verdeckt? Insbesondere die Abbildung, die die eingefügten Streifen vor der Maskierung zeigt, lässt vermuten, dass die Streifen die anderen Elemente verdecken würden. Wie verhalten sich überlappende Objekte in Movieclips, die nachher als Masken eingesetzt werden? Wie kann man Movieclips für Menüs einsetzen? Welche Objekte können für eine Maske eingesetzt werden? Können Masken verschachtelt werden?
Flash MX
188
VISUELLE EFFEKTE
Flash MX
UND
ANIMATIONEN
MIT
MASKEN
189
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
9 Dokument-Vorlagen nutzen, ändern und erstellen
Flash MX
190
D O K U M E N T -V O R L A G E N
Flash MX
NUTZEN, ÄNDERN UND ERSTELLEN
191
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Dokument-Vorlagen nutzen, ändern und erstellen Flash bietet verschieden Vorlagen für ganz unterschiedlich Einsatzbereiche an, die von einem Fotoalbum über ein Menü bis hin zu einem Quiz führen. Die einzelnen Dateien enthalten eine recht detaillierte Anweisung, sodass wir auf die Grundfunktion der Vorlagen nur knapp eingehen werden. Interessant dagegen ist natürlich vielmehr die Veränderung der Vorlagen, um sich die umfangreiche ActionScript-Programmierung zu Nutze zu machen, ohne auf ein vorgegebenes Design zurückgreifen zu müssen. Dieser Bereich wird sicherlich in der Zukunft noch deutlicher ausgebaut, um Flash zu einem Instrument für mehr Veröffentlichungen zu nutzen wie z.B. auch Präsentationen. Insgesamt sollen auch dem Benutzer, der (noch) kein ActionScript programmieren kann, ein einfaches Werkzeug in die Hand gegeben werden, um schnell interaktive Filme zu erstellen.
9.1
Dropdown-Menü mit einem XML-Dokument erstellen
Selbstverständlich bereitet es Ihnen keine Schwierigkeiten mehr, Ihre eigenen Menüs mit Hilfe geeigneter Bilder, Movieclips und dem zugehörigen ActionScript-Quelltext zu erstellen. Alternativ haben Sie vielleicht auch schon mit Hilfe der Maskentechnik, komplex animierte Menüstrukturen erstellt. Schön wäre dagegen, man könnte in kürzerer Zeit und ohne große Vorbereitung Menüs erstellen. Die zwei Vorlagen für derartige Menüs rufen ihre Einträge aus einer XML-Datei ab, sodass Sie dort in einem einzigen Dokument die erforderlichen Einstellungen wie Kategorien und Unterkategorien eintragen können. Neben dem Effekt, dass Sie dabei einen dynamischen FlashFilm erhalten, der auf jede Änderung in der XML-Datei reagiert, haben Sie zusätzlich das komplette Menü in einem Dokument ordentlich zusammengefasst.
9.1.1 Dropdown-Menü mit Vorlage erstellen Insgesamt existieren zwei verschiedene, klassische Menüstrukturen mit der oben beschriebenen Technik, die wir Ihnen beide auch vorstellen wollen. In der ersten Variante erhalten Sie als Ergebnis ein Menü, das wie in dem Ihnen bekannten Windows-Explorer bei Auswahl eines Eintrags die diesem Eintrag zugeordneten Untereinträge öffnet. Diese wiederum führen über einen Klick und der bereits vorprogrammierten getURL()-Funktion zum gewünschten Dokument. Das Ergebnis dieses Abschnitts finden Sie in der Datei dropdown1.fla.
9.1.2
1.
Wählen Sie DATEI / NEU AUS VORLAGE.
9.1.3
2.
Wählen Sie MENÜS / V_DROPDOWN / ERSTELLEN.
Das abgebildete Menü-Fenster wird in diesem Projekt nur hier im ersten Anwendungsfall gezeigt, da natürlich die anderen Beispiele ebenfalls zunächst über die Auswahl einer geeigneten Vorlage führen. In der linken Spalte stehen die einzelnen Kategorien, für die bereits Vorlagen erstellt wurden. Ganz oben kann man auch ein neues, leeres Dokument auswählen. Sobald man eine der Kategorien auswählt, erscheinen in der mittleren Spalte die verschiedenen, in dieser Kategorie vorhandenen einzelnen Vorlagen. Normalerweise liegt die Auswahl bei unter fünf Vorlagen. Lediglich für den Bereich Werbungen, der unterschiedlichste Bannerformen für den Webeinsatz bereit hält, reicht der Platz in der Spalte kaum aus. Neben dem sich selbst erklärenden
Flash MX
192
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Vorschaufenster erhalten Sie bei Auswahl einer Vorlage eine kurze Beschreibung für die Funktionsweise der jeweiligen Vorlage. Als Ergebnis erhalten Sie eine leere Datei mit Erklärungen zur Verwendung und einem blau umrandeten Objekt. Dieses Objekt ist der Movieclip, der seine Einträge aus der bereits erwähnten XML-Datei bezieht. Er kann dann nachher genau dort positioniert werden, wo das Menü seinen Platz erhalten soll.
9.1.4
3.
Öffnen Sie die Datei FLASH MX / FIRST RUN / TEMPLATES / MENÜS / MENU_DROPDOWN.XML.
Im einfachsten Fall verwenden Sie einen simplen Text-Editor, um die Datei zu ändern. Ansonsten haben Sie vielleicht Macromedia Dreamweaver, das sich bei Doppelklick ohnehin automatisch öffnen würde, wenn XML-Dokumente mit diesem Programm verknüpft sind. In der Abbildung können Sie die einfache Menüstruktur erkennen. Innerhalb des Tags -Tags befinden sich zum einen ein Tag für die Kategorie der ersten Ebenen und zum anderen ein Tag für die Unterpunkte . Beide haben unterschiedliche Attribute, die in den nächsten Schritten geändert werden, und natürlich die Texteinträge, die im Flash-Film erscheinen. Über das Attribut expand=false in den Unterpunkten wird z.B. sicher gestellt, dass sie als Standardeinstellung nicht angezeigt werden. Erst eine Auswahl der ihnen zugehörigen Kategorie wird diesen Wert auf TRUE ändern.
Flash MX
193
D O K U M E N T -V O R L A G E N
9.1.5
4.
NUTZEN, ÄNDERN UND ERSTELLEN
Speichern Sie die Datei unter dropdown1.xml ab.
Verwenden Sie dabei den gleichen Ordner wie für die Datei, die das Menü enthalten soll, damit die Verknüpfung nachher funktioniert und die Einträge gelesen werden können. Menü-Datei und Flash-Film müssen im gleichen Ordner gespeichert sein.
9.1.6
5.
Ändern Sie die Farben des Menüs.
In der XML-Datei finden Sie neben den oben beschriebenen Tags auch speziell für die Vorlage definierte Attribute, die vom ActionScript-Programm in der Vorlage ausgewertet werden. Beide Menü-Vorlagen verwenden die gleichen Formatierungsattribute.
•
Schriftfarben können wie in anderen HTML/XML-Dokumenten über Hexadezimalwerte modifiziert werden: •
main_onColor regelt die Farbe der Hauptmenüelemente, wenn sie die Maus überfährt.
•
main_offColor regelt die Farbe der Hauptmenüelemente, wenn die Maus sie nicht überfährt (normaler Zustand).
•
sub_onColor und sub_offColor regeln analog die Farbe der Unterpunkte.
•
Die Breite des gesamten Menüs (Movieclips) tragen Sie als Pixelwert in das Attribut navWidth ein.
•
fadeTime bestimmt in Millisekunden die Geschwindigkeit, mit der die Unterpunkte eingeblendet werden. Sollen die Elemente einfach erscheinen, verwenden Sie die Zahl 0.
•
Die Kategorien werden von einer horizontalen Linie getrennt. Deren Breite wird vom Attribut lineWidth in Pixel bestimmt. Auch hier kann über den Wert 0 eine Linie komplett ausgeschlossen werden.
•
main_y_padding und sub_y_padding regelt auf der Vertikalen (daher das Y für die Analogie zur y-Achse) den Abstand zwischen den Elementen des Menüs und kann nach Kategorien (main) und Unterpunkten (sub) differenziert werden.
•
Die Unterpunkte erscheinen um den im Attribut sub_indent vorgegebenen Wert unter den jeweiligen Kategorienamen eingerückt.
Als Beispiel soll hier eine Menüleiste für ein Internet-Portal erstellt werden, das Sie auch im nächsten Schritt mit der geänderten Menüleiste garnieren werden. In diesem Internet-Portal sollen Informationen zum Thema dynamische Webanwendungen erhältlich sein, sodass sich die Einträge auch aus diesem Bereich rekrutieren.
Flash MX
194
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Listing 9.1: Farbschema des Auswahl-Menüs von dropdown1.fla in dropdown.xml 9.1.7
6.
Ändern Sie die Einträge in den Kategorien und Unterpunkten.
Die Texte der Einträge werden in das Attribut text eingetragen, während die Verknüpfung im Attribut URL festgelegt wird. Hier verwenden Sie die ganz normale Syntax wie im HTML-Tag , wobei in nachfolgendem Listing sowohl Dateien der Webpräsenz wie actionscript.html als auch auf andere Internet-Adressen verwiesen wird. Hier können Sie dann optional die Ziele wie für alle anderen Links über das Attribut target festlegen. In der mitgelieferten XML-Datei, die Sie nun ändern sollen, ist bereits der erste Eintrag geöffnet, sobald Sie den Flash-Film testen. Damit dies nicht passiert, müssen Sie den Wert true für die erste Kategorie im Attribut expand wie in den anderen Kategorien auf false ändern. Bereits geöffnete Menüs müssen im Attribut expand den Wert true aufweisen.
Flash MX
195
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Listing 9.2: Menüeinträge des Auswahl-Menüs von dropdown1.fla in dropdown.xml 9.1.8
7.
Verknüpfen Sie den Film mit der XML-Datei.
Zum guten Schluss muss dem Movieclip noch mitgeteilt werden, aus welcher Datei er eigentlich die Einträge beziehen soll. Markieren Sie ihn dazu einfach mit einem Mausklick, um den Eigenschaften-Inspektor zu öffnen. Der besitzt in der Registerkarte Parameter einen Eintrag namens DATASOURCE, in den Sie über einen weiteren Klick den Dateinamen dropdown1.xml eintragen können.
9.1.9
8.
Testen Sie den Flash-Film.
Da für die Schriftfarbe sowohl für Kategorien (rollOn) als auch für die Unterpunkte (rollOut) Weiß eingestellt wurde, empfiehlt es sich, für einen erfolgreichen Test zunächst die Hintergrundfarbe des gesamten Films mit #9999CC vorzugeben. Die Erklärungen in der Ebene Instructions können Sie ausblenden. Sie werden aber ohnehin nicht im endgültigen Film angezeigt. Änderungen an der XML-Datei werden erst nach dem Speichern im Flash-Film wirksam.
9.1.10 Menü mit einem Film kombinieren Im nächsten Abschnitt werden wir uns ausgiebig mit der Bibliothek beschäftigen und über ihre Eigenschaften Änderungen an der Vorlage vornehmen. Eine weitere nützliche Eigenschaft hilft auch beim Einsatz der Menüleiste in einem Flash-Film. Natürlich könnte man einfach die Ebene Instructions löschen und dann seinen Flash-Film in dem aus der Vorlage erstellten Film gestalten. Manchmal hat man aber vielleicht auch schon allerhand fertig animierten Objekte auf vielen Ebenen oder in mehreren Szenen in einem anderen Film komponiert. In diesem Fall ist die Arbeit nur um eine Winzigkeit umfangreicher als im ersten konstruierten Fall. Die Kopierfunktion in Flash sorgt dafür, dass alle Objekte, die für die Animation eines Objekts notwendig sind, aus der Bibliothek des Quellfilms in die Bibliothek des Zielfilms kopiert werden, wenn das Objekt selbst kopiert wird.
Flash MX
196
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Das Ergebnis dieses Abschnitts finden Sie in der Datei dropdown2.fla.
9.1.11
1.
Markieren Sie den leeren Movieclip auf der Bühne im Quellfilm (Vorlage).
9.1.12
2. Übertragen Sie den Movieclip über das Kontextmenü oder BEARBEITEN / KOPIEREN in die Zwischenablage.
9.1.13
3.
Fügen Sie den Movieclip in das Zieldokument aus der Zwischenablage ein.
Ein Blick in die Bibliothek sollte Ihnen nun Einblick darüber geben, das auch alle benötigten Vorlagen für das Menü den Wandervorgang begleitet haben. Dazu zählt einmal der Ordner _templateAssets, in dem alle Einzelbausteine zu finden sind und mc, ddMenu_clip (Movieclip mit der Menüleiste) und mc,ddMenu_line (graue Linie zwischen den Kategorien). In der Abbildungen sehen Sie die Kontrolle nach dem Einfügevorgang in das Dokument dropdown2.fla. Es enthielt bereits eine Ebene mit einem Hintergrundbild (dynamischewebanwendungen.gif) und wartet nur noch auf weitere Inhalte, die über das Menü verbunden werden sollten.
9.1.14 Dropdown-Menü nach eigenen Wünschen anpassen Zwar bietet das XML-Dokument allerhand Möglichkeiten für das Layout der Menüstruktur, aber evtl. gefällt Ihnen nicht, dass ein Pluszeichen für das Öffnen der Unterpunkte angezeigt wird. Möglicherweise halten Sie auch nicht viel von Linien, sondern schwören vielmehr auf den Einsatz von Wellen, Kreuzen oder Sternchen. Diese Änderungen können leicht mit Hilfe der Bibliothek vorgenommen werden, sodass man nicht komplett auf die Vorgaben der Vorlage angewiesen ist. Das Ergebnis dieses Abschnitts finden Sie in der Datei dropdown3.fla.
9.1.15
1.
Öffnen Sie das Element mc, bulletMain.
Die Grundstruktur der Änderung besteht daraus, dass man die Bibliothekselemente ändert. Da sich die Vorlagenanimationen aus verschiedenen Bausteinen zusammensetzen, genügt es also bspw. das kleine Pluszeichen zu modifizieren, damit es in das Menü an allen Stellen angezeigt wird, wo eine Kategorie erscheint. Die einzige Schwierigkeit besteht in der praktischen Arbeit darin, die Struktur der Animation bzw. der Bibliothek so zu verstehen, dass man zielsicher das Wurzelelement öffnet. In einigen Vorlagen wird das gleiche Wurzelelement in anderen Wurzelelementen eingesetzt, sodass man fälschlicherweise bereits abgeleitete Objekte ändern
Flash MX
197
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
könnte. Im vorliegenden Fall jedoch befindet sich das Pluszeichen ausschließlich im Objekt mc; bulletMain und wird von dort aus in die Menü geladen. Achten Sie darauf, immer das Wurzelelement zu öffnen, damit sich die Änderungen auf alle Objekte auswirken, die es ebenfalls benutzen.
9.1.16
2. Ändern Sie das Pluszeichen in ein nach unten zeigendes Dreieck vor dunklem Hintergrund.
Sowohl Hintergrund als auch Pluszeichen samt Knopfformen befinden sich in der Ebene icon, die Sie nach vollbrachter Änderungsarbeit entfernen können. In einer Ebene _actions gibt es für jedes Schlüsselbild eine stop()-Aktion. Diese Ebene lassen Sie weiterhin im Objekt, da Sie verhindert, dass beide Schlüsselbilder nacheinander gezeigt werden. Im Vorlagenprogramm wird dagegen geregelt, dass bei Klicken einer Kategorie nicht nur die Unterpunkte angezeigt werden sollen, sondern die Animation in diesem Movieclip von Bild 1 nach Bild 2 springt. Fügen Sie weiterhin zwei neue Ebenen namens hintergrund und dreieck ein. Ziehen Sie ein Rechteck mit der Füllfarbe #333333 über das Rechteck der eingeblendeter Ebene icon, sodass die Größenverhältnisse der Umrandung auch in der Änderung bestehen. Die Ebene dreieck benötigt ebenso wie die Ebene icon zwei Schlüsselbilder: eines für ein Dreieck, das nach unten zeigt (Wingdings 4) in Bild 1, und eines für ein Dreieck, das nach oben zeigt (Wingdings 5) in Bild 2. Im Endeffekt soll also das nach unten zeigende Dreieck bedeuten, dass noch weitere Unterpunkte zu dieser Kategorie aufgerufen werden können. Über das nach oben zeigende soll dagegen gezeigt werden, dass man das Untermenü auch wieder schließen kann.
Flash MX
198
D O K U M E N T -V O R L A G E N
9.1.17
3.
NUTZEN, ÄNDERN UND ERSTELLEN
Öffnen Sie das Element mc, ddMenu_line.
Höhe und Breite dieses Objekts werden als Skalierungsfaktoren im Vorlagenprogramm eingetragen, sodass man Objekte statt der Linie verwenden sollte, die sich leicht skalieren lassen. 9.1.18
4.
Tragen Sie Punkte statt der Linie ein.
Profane Punkte mit Arial, Größe 10 lassen sich wegen ihrer quadratischen Form leicht skalieren und sollen im Folgenden die Linie ersetzen.
9.1.19
5.
Testen Sie das Ergebnis.
Statt der Plus- und Minuszeichen zeigt das Menü nun die Dreiecke an. Ebenso wurde die Linie gegen die Punkte ausgetauscht.
Flash MX
199
D O K U M E N T -V O R L A G E N
9.2
NUTZEN, ÄNDERN UND ERSTELLEN
Eigene Vorlage speichern
Nachdem jetzt eine mitgelieferte Vorlage geändert wurde, könnte man sich fragen, ob es denn möglich sei, diese Vorlage wiederum als Vorlage zu speichern. Und wenn man schon geänderte Vorlagen speichern möchte, ist der Wunsch nicht weit, eigene Vorlage zu entwickeln, zu speichern und nachher ganz simpel über das Auswahlmenü zu öffnen. Immerhin befindet sich in den drei Spalten genügend Platz für allerhand eigene Vorlagen mit ihren Vorteilen: über ihr Netz laufende Spinnen könnten gegen die kleine Schwester ausgetauscht werden, hüpfende Krankenwagen machen sich noch besser, wenn es der fotografierte Hamster ist, der vor Frankfurter Stadtkulisse seien Froschsprünge präsentiert und dergleichen mehr. Das Ergebnis dieses Abschnitts finden Sie in der Datei webanwendungen_vorlage.fla.
9.2.1 Führungsebenen definieren und gestalten Zusätzlich lernen Sie einen weiteren – jetzt aber letzten – Ebenentyp kennen. Sicherlich hatten Sie schon bereits vorhin bei der Verwendung der mitgelieferten Vorlage die erklärenden Texte von Macromedia gelesen. Solche Erklärungen finden Sie auch in den anderen Vorlagen, weswegen wir Ihnen hier auch nicht alle vorstellen werden. Die Erklärungen befinden sich auf einer so genannten Führungsebene, deren Schaltflächen als einzige nicht nur aktiviert werden können, sondern darüber hinaus auch auf der Bühne schon funktionstüchtig sind. 9.2.2
1. Bereiten Sie die Vorlage vor, indem Sie eine neue Ebene einfügen und sie zu einer Führungsebene definieren.
Diese neue Ebene könnte anweisung heißen, weil die gleiche Ebene in den mitgelieferten Vorlagen immer _instructions heißt. Wie immer können Sie das Kontextmenü der Ebenen oder die EbenenEigenschaften verwenden, um mit dem entsprechenden Eintrag den Ebenentyp festzulegen. In diesem Fall heißt er Führungsebene. Sobald die Ebene als solche definiert wurde, erhält sie als Symbol einen Hammer. Eine Führungsebene kann vor allen Dingen dort eingesetzt werden, wo Sie Kommentare oder Hinweise zum jeweiligen Film eingeben wollen, die (natürlich) nachher nicht veröffentlicht werden sollen. Sowohl in den Vorlagen als auch in den von Macromedia erstellten Beispieldateien, die Sie über HILFE / BEISPIELE aufrufen und im Ordner SAMPLES finden können, treffen Sie immer wieder
Flash MX
200
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
auf Führungsebenen mit Informationen zum Herstellungsverfahren der meist komplexen und umfangreichen Dateien. Eine Führungsebene ist eine Informationsebene, die z.B. auch funktionsfähige Schaltflächen enthalten kann. Sie ist im späteren Film unsichtbar.
9.2.3
2.
Erstellen Sie die erste Seite des Erklärungstextes.
Um eine Führungsebene mit allen Schikanen auszustatten, benötigen Sie zunächst eine Form, in der Sie Texte oder sogar Bilder einfügen können. In diesem Fall haben wir uns einfach für ein Rechteck mit abgerundeten Ecken entschieden. In dieses Rechteck tragen Sie sämtliche benötigten Informationen ein, die für den erfolgreichen Einsatz Ihrer Vorlage von Belang sind. Ein hervorragendes Beispiel sind die umfassend dokumentierten mitgelieferten Vorlagen. Als Schmankerl sollten Sie auch testen, dass man tatsächlich innerhalb des Films navigieren kann, obwohl man sich nicht in der Vorschau befindet. Also setzen Sie in die gleiche Ebene Schaltflächen, die Sie z.B. aus FENSTER / ALLGEMEINE BIBLIOTHEKEN / SCHALTFLÄCHEN beziehen können. In diesem Beispiel sehen Sie den bereits bekannten circle button – next, der auf der folgenden Seite von circle button – previous abgelöst wird. Zu einem nächsten Schlüsselbild, das sich am besten direkt in Bild 2 befindet und von Ihnen noch eingerichtet werden muss, können Sie dann mit dem beliebten ActionScript-Code für Schaltflächen gelangen, wobei als Ziel das Bild Nr. 2 angegeben wird. Auch wenn Sie nicht sofort nach Lektüre des Buchs zum Maketing Director befördert werden sollten, ist dies eine gute Möglichkeit, einen Wechsel in der Führungsebene zu inszenieren. on (press, release) { gotoAndPlay(2); }
Listing 9.3: Wechsel in der Führungsebene
Flash MX
201
D O K U M E N T -V O R L A G E N
9.2.4
3.
NUTZEN, ÄNDERN UND ERSTELLEN
Erstellen Sie eine zweite Seite mit Datei-Infos.
In Bild 2 erwartet den zukünftigen Benutzer der Vorlage dann ein Hinweis, wer diese bezaubernde Vorlage entwickelt hat und an wen man sich wenden sollte, wenn man dafür sorgen möchte, dass Verbesserungsvorschläge der Karriere des Vorlagenentwicklers dienlich sein sollen. Zusätzlich befindet sich hier aus Gründen der Logik nur eine Zurück-Schaltfläche, die über den analogen Quelltext wie im vorherigen Schritt zu Bild 1 führt.
9.2.5
4. Aktivieren Sie die Schaltflächen über STEUERUNG / SCHALTFLÄCHEN AKTIVIEREN und testen Sie die Führungsebene.
Um den Wechsel in der Führungsebene zu testen, müssen Sie die Revolutionsmaschine erst einmal in Gang setzen. Da die Schaltflächen auf einer Führungsebene platziert wurden, funktioniert nicht nur der Rollover-Effekt der Schaltfläche, sondern auch die Steuerung zwischen den zwei Schlüsselbildern.
Flash MX
202
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Speichern Sie die Datei mit aktivierten Schaltflächen ab, damit der zukünftige Benutzer sie auch zur Navigation einsetzen kann.
9.2.6
5.
Kontrollieren Sie die Funktion der Führungsebene beim Export.
Über STEUERUNG / FILM TESTEN sollten Sie sich abschließend vergewissern, dass tatsächlich Ihre Firmeninterna nicht den geheimen Kreis des Intranets verlassen. Da abgerundete Rechtecke und Texte nebst Schaltflächen allesamt auf der Führungsebene beheimatet sind, machen Sie sich gar nicht erst die Mühe, sich den Aktionären zu stellen, sondern bleiben beim Export geschickt im Hintergrund. Alle Ebenenelemente dürfen also bei einem Filmexport nicht sichtbar werden.
9.2.7 Vorlage kennzeichnen und speichern Zum Schluss ist es dann ein Leichtes, die so perfekt präparierte Vorlage unwissenden Kollegen, Vereinskollegen oder Familienmitgliedern in die Hand, den E-Mail-Briefkasten oder in den Netzwerk-Ordner zu übermitteln. 9.2.8
1.
Wählen Sie DATEI / ALS VORLAGE SPEICHERN.
Nicht nur die in der vorherigen Lektion erzeugte Vorlage kann gespeichert werden. Jede andere Datei, die Sie evtl. so oder mit nur ausgetauschten Elementen wiederverwenden wollen, können Sie als Vorlage speichern. Alternativ hätten wir also auch eine andere, beliebige Datei erstellen und diese als Vorlage speichern können. Die von Macromedia bereits gefertigten Vorlagen haben als Bonbon jedoch umfangreiche ActionScript-Programmierung, die es interessant macht, sie hier vorzustellen. Andere Vorlagen dagegen wie z.B. die für Werbebanner gedachten, haben lediglich im Internet häufig vermietete Bannerflächengröße. Sie können jede beliebige Datei als Vorlage speichern.
9.2.9
2.
Geben Sie die Vorlagendaten ein.
Es öffnet sich ein einziges Dialogfenster, mit dem sämtliche Daten erfasst werden können, die für die Verwaltung der Vorlage benötigt werden. Aus dem gerade markierten Schlüsselbild wird ein Foto für die Vorlagevorschau geschossen. Möchten Sie also einen speziellen Zustand als Vorschaugrafik übernehmen, müssten Sie zunächst über den Abspielknopf das gewünschte Bild markieren. •
NAME verlangt nach einem klaren Namen, der die Vorlage gut identifiziert.
•
Unter KATEGORIE können Sie entweder unter den bereits bestehenden Kategorien eine auswählen, der Sie die neue Vorlage hinzufügen, oder eine neue Kategorie eintragen.
•
Über BESCHREIBUNG speichern Sie eine kurze Definition der Vorlage mit den Besonderheiten, die sie besitzt.
Wählen Sie zunächst ein aussagekräftiges Bild für die Vorlage in der Zeitleiste aus.
Flash MX
203
D O K U M E N T -V O R L A G E N
9.2.10
3.
NUTZEN, ÄNDERN UND ERSTELLEN
Kontrollieren Sie die gespeicherte Vorlage mit DATEI / NEU VON VORLAGE.
Um zu kontrollieren, ob die Vorlage auch wirklich im Programm verfügbar ist, rufen Sie einfach das Dialogfenster zur Vorlagenauswahl auf. In Ihrer neu vergebenen oder in der verwendeten Kategorie sollten Sie dann wie in der Abbildung die vorhin eingegebenen Daten nebst ausgewählten Schlüsselbild als Vorlagenvorschau finden.
9.2.11
4.
Kontrollieren Sie den Speicherort.
Vermutlich möchten Sie Vorlagen nicht nur im Programm sichern, sondern auch für längere Zeit speichern oder zusammen mit dem Ergebnis für einen Kunden oder sich selbst auf einen anderen Datenträger speichern. Je nach Betriebssystem finden Sie Ihre gespeicherte Vorlage unter dem
Flash MX
204
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
gerade vergebenen Namen (dynamischewebanwendungen.fla) in Ihren Anwendungsdaten oder im Vorlagen-Ordner des Programms wieder. Sollten Sie auf Schwierigkeiten bei der Suche stoßen, können Sie die Windows-Suche über START / SUCHE zu Rate ziehen.
9.3
Registerkarten-Menü mit XML-Dokument gestalten
Wie Sie schon gesehen haben, werden Ihnen zwei verschiedene Menüs angeboten, von denen wir Ihnen auch das zweite nicht verschweigen wollen. Es handelt sich dabei um eine Flash-Variante von Registerkarten, die genauso bearbeitet werden können wir zuvor gesehen, sodass Sie sich nicht groß umstellen müssen. 9.3.1
1.
Wählen Sie DATEI / NEU AUS VORLAGE / MENÜS / V_REGISTERKARTEN.
Die Ergebnisse dieses Abschnitts finden Sie in den Dateien registerkarten2.fla und registerkarten1.xml.
9.3.2
2.
Erstellen Sie die XML-Datei.
Alternativ können Sie die ebenfalls im gleichen Ordner gespeicherte XML-Datei menu_tabs einsetzen und ändern oder die Unterschiede zur bereits erstellten XML-Datei der vorherigen Lektion weiter verwenden. Der Pfad zu diese Datei lautet FLASH MX / FIRST RUN / TEMPLATES / MENÜS / MENU_TABS.XML Die Schriftformatierung bleibt gleich. Lediglich die Menüstruktur wird notwendigerweise durch andere Attribute eingerichtet. •
Die Schriftfarben werden erneut über main_onColor, main_offColor, sub_onColor und sub_offColor bestimmt.
•
Die Breite des gesamten Menüs (Movieclips) tragen Sie ebenfalls als Pixelwert in das Attribut navWidth ein.
•
Die Breite der Registerkarten richtet sich nach der eingegebenen Textlänge. Zusätzlich steuern x_padding und y_padding die horizontale und die vertikale Auffüllung zwischen den Einträgen in Pixel.
Die Verwendung der Links funktioniert genauso wie im vorherigen Menü, wobei allerdings das expand-Attribut entfällt und man unter Einsatz einer URL und Weglassen der Unterpunkte auch direkt von einer Kategorie zu einer Seite springen kann. Da die anderen Einträge mit denen des vorherigen Beispiels weitestgehend übereinstimmen, können Sie dorthin zurückblättern.
Flash MX
205
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Diese Datei speichern Sie ebenso im gleichen Ordner wie die gesamte FLA-Datei unter dem Namen registerkarten1.xml.
Listing 9.4: Beginn der Menüdefinition in registerkarten1.xml 9.3.3
3.
Verknüpfen Sie den Menü-Movieclip mit der XML-Datei.
Markieren Sie den Movieclip auf der Bühne und tragen Sie dann im Register Parameter des Eigenschaften-Inspektors den Dateinamen registerkarten1.xml ein. 9.3.4
4.
Passen Sie die Schriftart im Objekt mc, tabs_clip an.
Suchen Sie in der Bibliothek das Objekt mc; tabls_clip, welches die Schriftdarstellung regeln kann, indem Sie es mit einem Klick markieren und im Eigenschaften-Inspektor eine andere Schriftart wie z.B. Tahoma auswählen. Änderungen, die Sie hier an der Farbe vornehmen, bleiben wirkungslos, da die Einträge in der XML-Datei überwiegen. 9.3.5
5.
Testen Sie das vorläufige Ergebnis.
Um einen vorläufigen Eindruck von dem Erreichten zu bekommen, testen Sie die Navigationsleiste über Steuerung / Film testen. Wie Sie sehen, besteht zwischen allen Einträgen ein gleich großer Abstand in vertikaler und horizontaler Richtung, der über die beiden Auffüllwerte in der XML-Datei eingerichtet wurde. Dass die Einträge ebenfalls aus der Datei stammen, wird Sie vermutlich nicht weiter überraschen.
Flash MX
206
D O K U M E N T -V O R L A G E N
9.3.6
NUTZEN, ÄNDERN UND ERSTELLEN
6. Übertragen Sie diese Menü in eine neue Datei mit dem Hintergrund dynamischewebanwendungen.gif.
Ziel sollte sein, eine Menüstruktur zu finden, die ein wenig besser zur Vorlage passt. Die mehr horizontale Registerkartenarchitektur ist sicherlich der breiten Hintergrundgrafik angemessen. Was jedoch fehlt, sind passende Farben.
9.3.7
7.
Ändern Sie die Bausteine der Menüleiste.
Die änderbaren Bestandteile der Menüleiste sind im Vergleich zur ersten erfrischend übersichtlich und lassen sich ebenso leicht ändern. •
mc, tabs_line: ist ein Movieclip, dessen einziges Schlüsselbild die Trennlinie zwischen den Einträgen in der oberen und unteren Menüleiste repräsentiert. Sie ist wiederum aus zwei sehr kleinen hochkantigen Rechtecken zusammengesetzt.
•
mc, tabs_rule: ist die Linie zwischen den Kategorien und den Unterpunkten. In der einzig vorhandenen Ebenen line steht eine hauchdünne Linie.
•
btn, tabs_buttonMain: ist die Schaltfläche, die für den Hintergrund der Kategorien zuständig ist. Er speichert in einer Ebene highlight den Lichteffekt und in einer Ebene color die Färbung der Menüleiste.
•
btn, tabs_buttonSub: ist die Schaltfläche zur Darstellung der Unterpunkte und weist die gleiche Ebenenstruktur und Funktionsweise auf wie die Schaltfläche für die Kategorien.
Alle Grau- und Orangetöne in der automatisch erzeugten Menüleiste sollen gegen die Farben #9CA2B5 (helle Farbe) und #636D84 (dunkle Farbe) ausgetauscht werden, die Sie wahlweise auch mit der Pipette aus dem Hintergrundgrafik bestimmen können. Für die Linie soll also weiterhin
Flash MX
207
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
rechts ein dunkler Bereich als Schatten fungieren, wobei Sie bloß mit dem Auswahlwerkzeug diesen Bereich der Grafik doppelklicken und die Farbe im Eigenschaften-Inspektor austauschen müssen. Genauso verfahren Sie mit dem rechten Bereich. In den Schalflächen tauschen Sie mit der gleichen Technik die Farben in den einzelnen Zuständen aus. Für jede Schaltfläche müssen Sie je zwei Füllformen anders einfärben.
9.3.8
8.
Testen Sie das Ergebnis.
Das neue Resultat kann sich deutlich besser in die gesamte Seite integrieren, da die Farben nicht so offensichtlich machen, dass entweder jemand von Farben keine Ahnung hat oder unbesehen und unkritisch die Flash-Vorlage eingesetzt hat. In weiteren Schritten könnte man nun diese Seite mit Leben füllen.
9.4
Ein Foto-Album einrichten
Wie bereits in der Einleitung erwähnt, können wir aus Platzgründen nicht alle Vorlage vorführen, was bei den meisten auch nicht notwendig ist, da sie mit Hilfe der Führungsebenen gut erklärt
Flash MX
208
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
werden. Das Foto-Album – obschon eine einfache Anwendung – ist insoweit interessant, als dass vom Prinzip her sehr ähnlich wie die Präsentationsvorlage funktioniert und das Prinzip der Vorlagen besser verdeutlicht als die speziellen Anwendungsfälle wie bei den bereits vorgestellten Menüs. Zudem könnten Sie dieses Fotoalbum wiederum mit den im Masken-Projekt gezeigten Effekten ergänzen und sich damit eine ganz eigene Vorlage für Präsentationen oder eben eine Fotoschau gestalten. Das Ergebnis dieses Abschnitts finden Sie in der Datei fotoalbum1.fla.
9.4.1
1. Wählen Sie DATEI / NEU VON VORLAGE.../ FOTOVORFÜHRUNG / FOTOVORFÜHRUNG_STIL1.
9.4.2
2. Blenden Sie die Führungsebene aus und richten Sie eine neue Ebene für Ihre Fotos ein.
Die Fotos müssen auf der untersten Ebene eingerichtet werden. Die Ebene für die in der Vorlage verwendeten Fotos old_photos können Sie damit einfach löschen.
9.4.3
3.
Importieren Sie Ihre Fotos über Datei / Importieren.
Am einfachsten machen Sie es sich, wenn Ihre Fotos in Dateien vorliegen, die nummeriert sind. Erneut soll es um die Luftbilder von München gehen, die dieses Mal nicht ungünstig in Form von Himmelsrichtungen vorliegen, sondern stattdessen mit Namen wie muenchen01.jpg usw. Im Ergebnis legt die Vorlage die Bilder in jeweils ein Schlüsselbilder der ausgewählten Ebene Neue Fotos ab. Nummerieren Sie Ihre Fotos für einen einfachen Import.
Flash MX
209
D O K U M E N T -V O R L A G E N
9.4.4
4.
NUTZEN, ÄNDERN UND ERSTELLEN
Bestätigen Sie die Frage nach dem Serienimport mit JA.
In der Vorlage existieren nur vier Schlüsselbilder. Wenn die Diaschau mehr als vier Bilder umfassen soll, müssen die anderen Ebenen ebenfalls länger angezeigt werden.
9.4.5
5.
Ergänzen Sie die Textbausteine für Titel, Datum und Bildunterschrift.
Die Anzahl der Fotos wird automatisch ermittelt und ausgegeben. Das Einblenden des Titels wird lediglich durch eine Einblendung der Ebene für den Titel über die gesamte Diaschau hinweg geregelt. Wenn Sie einzelne Abschnitte präsentieren möchten, können Sie diese Ebene einfach mit einem neuen Schlüsselbild und einem neuen (Unter)Titel versehen.
9.4.6
6.
Testen Sie das Ergebnis.
Über die Schaltflächen sollten Sie nun innerhalb der vier Bilder navigieren können, wobei die jeweilige Bildunterschrift und Bildnummer in den Textfelder angezeigt werden.
Flash MX
210
D O K U M E N T -V O R L A G E N
9.4.7
7.
NUTZEN, ÄNDERN UND ERSTELLEN
Stellen Sie eine Verzögerungszeit für eine automatische Diaschau ein.
Alternativ ist es möglich, sich nicht auf das eigene Schaltflächenklicken zu verlassen, sondern die Fotopräsentation selbstständig ablaufen zu lassen. Dazu müssen Sie im Parameter DELAY der Menüleisten oben rechts eine Zahl eintragen, die eine Einblendung in Sekunden bedeutet. Ein Eintrag von vier wie in der Abbildung bedeutet also, dass nach jeweils vier Sekunden ein neues Bild gezeigt wird. Gerade für eine unbetreute Anzeige im Rahmen eine Konferenz, Tagung oder Werbeveranstaltung kann das interessant sein.
9.4.8
8.
Löschen Sie die Platzhalterbilder aus der Bibliothek.
Die Bilder werden zwar nicht in einer veröffentlichten Datei gespeichert und kosten somit keinen Speicherplatz, sind aber für die Verwaltung innerhalb der Bibliothek sicherlich nicht nützlich. Markieren Sie einfach die überzähligen Platzhalterbilder und befördern Sie sie in den Papierkorb.
Flash MX
211
D O K U M E N T -V O R L A G E N
9.4.9
9.
NUTZEN, ÄNDERN UND ERSTELLEN
Ändern Sie die Vorlage.
Die Wurzelelemente zur Veränderung der Farben befinden sich in verschiedenen Schaltflächen in der Bibliothek, wobei sie – was die Programmierung anbetrifft – in Movieclips weiter verwendet werden. Diese Elemente wie btn, next oder btn, play können Sie im Symbol-Bearbeitungsmodus ändern und Ihren Wünschen gemäß farblich anpassen. In der Abbildung sehen Sie ein mögliches Ergebnis, wo versucht wurde, die allzu dunklen Farbe der Vorlage herausnehmen. Weitere Änderungen könnte ein Logo sein, das wie der Titel ständig mit Hilfe einer eigenen Ebene eingeblendet wird. Sie könnten auch auf Basis der hier vorliegenden Fotoalbum-Vorlage eine komplett eigene Vorlage mit Logo und eigenen Farben erzeugen, indem Sie lediglich die von Ihnen benötigten Elemente in diese Datei hineinziehen. Die Programmierung liegt wie sonst auch in den Movieclips, die automatisch in die Bibliothek der neuen Datei kopiert werden. In diesem Sinne bieten die Vorlagen – und sogar eine so einfache wie das Fotoalbum – eine große Anzahl Möglichkeiten, wenn man Sie mit dem in diesen Buch gezeigten Techniken kombiniert. Das Ergebnis dieses Abschnitts finden Sie in der Datei fotoalbum3.fla.
9.5
Testen Sie Ihr Wissen?
Wie können im allgemeinen Fall Vorlagen Ihren Farbwünschen angepasst werden? Wie können Sie Informationen in eine Datei schreiben, sodass sie auf der Bühne zu lesen sind, aber nicht veröffentlicht werden?
Flash MX
212
D O K U M E N T -V O R L A G E N
NUTZEN, ÄNDERN UND ERSTELLEN
Wie können Sie eine Führungsebene navigierbar gestalten? Wie können Sie einen Flash-Film als Vorlage speichern? Wie wählen Sie für eine Vorlage eine aussagekräftige Vorschaugrafik? Wie können Sie Vorlagen auch für eine längere Zeit sichern? Wie können Sie die Vorlage für die dynamischen Menüleisten nutzen?
Flash MX
213
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
10 Text- und 3D-Effekte importieren
Flash MX
214
TEXT-
Flash MX
UND
3D -E F F E K T E
IMPORTIEREN
215
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
Text- und 3D-Effekte importieren Importfunktionen hatten wir bereits im fünften Projekt vorgestellt. Da ging es um die vielen verschiedenen Formate, die in Flash einsatzfähig sind, wobei nicht von Belang war, wie sie entstanden sind. Auf geheimnisvolle Weise existierten Video-, Ton- und Grafikdateien, die man durch den Importfilter direkt in Flash weiterverarbeiten konnte. In diesem Projekt soll es um die Lösung von zwei Problemen gehen, auf die man über kurz oder lang vermutlich immer stoßen wird: Woher kommen die ganzen Texteffekte im Web, die man so schön für Überschriften nutzen kann? Ab und an findet sich eine schmale Animation im Netz, in der ein dramatisches Willkommen mit tanzenden, verblassenden, explodierenden oder wie von Schreibmaschinenhand sich auf der Bühne bewegen. Natürlich kann man diese Animationen in mühevoller Kleinarbeit in einzelnen Schlüsselbilder mit Hilfe von Bild-für-Bild-Animationen gestalten. Eine geradezu unverschämt einfache Lösung dieses Problems bietet das Programm Swish (www.swishzone.org), das derartige Texteffekte mit einer Reihe von Dialogfenster überaus einfach gestalten kann. Interessant für uns ist nicht, statt Flash ein anderes Programm zu lernen, sondern die Ergebnisse wieder in Flash zu importieren. Damit trainieren Sie auch gleichzeitig, SWF-Dateien in Flash zu importieren und mit ihnen weiterzuarbeiten. Eine andere typische Frage kümmert sich darum, wie und ob 3D-Effekte schnell und simpel animiert werden können. Hier kommt man zwar um Bild-für–Bild-Animationen nicht ganz herum, hat aber mit den Zeichenkünsten von MS Word und der allseits beliebten Zwischenablage bereits die halbe Arbeit gespart. Während also im fünften Projekt die Frage im Vordergrund stand, existierende Dateien einzubinden, sollen diese Dateien in diesem Projekt zunächst entwickelt werden, um unangenehme Arbeit zu ersparen.
10.1 Texteffekte in Swish erstellen Das SWF-Format ist ein offener Standard, den auch andere Programme erzeugen können. Eines von diesen Programmen ist Swish, dessen Stärke u.a. daran liegt, kleine Spielereien und Effekte in einem speziellen Menü kinderleicht auf existierende Textobjekte anzuwenden. Eine Demoversion finden Sie regelmäßig auf verschiedenen CDs in Computermagazinen oder auf der SwishInternetseite. Für uns ist das Programm nur für die Texteffekte interessant, sodass wir auf alle anderen Funktionen nicht eingehen werden. Ziel ist, die im Projekt über komplexe Animationen begonnene Firmenpräsentation so fertig zu stellen, wie sie im letzten Kapitel mit Schaltflächen und Interaktion besetzt wurde. Sämtliche Texte über die einzelnen Geschäftsbereiche sollen mit interessanten Effekten (Ein-, Ausblenden, Explosion usw.) versehen werden. Swish erstellt SWF-Dateien, die in Flash wieder importiert werden können.
10.1.1 Grundüberlegungen für die Arbeit Da Swish keine Tweens unterstützt und intern – wie Sie auch an de Zeitleiste später in Flash sehen werden – jede Animation als Bild-für-Bild-Animation verwaltet, muss man einige Regeln beachten, um nachher unkompliziert die Inhalte zu übertragen. Natürlich wird später in der Flash-Datei eine eigene Ebene für die importierten Inhalte eingerichtet. Entspricht nun aber die Position der Objekte in der Swish-Datei nicht der Raumaufteilung in Flash, gibt es Schwierigkeiten, Objektgruppen zu trennen, wenn auf einer Ebene unterschiedliche Animationen als Bild-für-Bild-Animationen
Flash MX
216
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
ablaufen. Man dieses Problem umgehen, indem man jede einzelne Animation extra erzeugt, in einer separaten Datei speichert und schließlich in eine eigene Ebene importiert. Dies erfordert allerdings relativ hohe Nacharbeit, weil das Layout durch Gruppieren und Verschieben korrigiert werden muss. Manchmal kann es auch sein, dass dies die einzige Möglichkeit ist, umfangreiche Mischdateien zu erstellen. In diesem Fall aber zeigen wir Ihnen eine kurze Fassung, die zunächst nur etwas mehr Überlegungen abverlangt, dann aber beim Import sehr viel zügiger ist: Die Inhalte werden von Flash nachher immer so importiert, dass die beiden Koordinatensysteme der Dateien übereinander liegen. Anders ausgedrückt: es ist nicht möglich, Flash mitzuteilen, es möge ein Objekt zentriert einfügen. Im Import-Projekt stellte dies kein Hindernis dar, da die Dateien erstens ohnehin kleiner waren als die Bühne und da sie zweitens auch nicht mehrere Bilder umfassten. Ein einzelnes Objekt kann man sehr schön bewegen. Einen Text wie Willkommen muss man aber zunächst einmal gruppieren und dann in allen Bildern verschieben, ohne auch nur einen Buchstaben zu vergessen. Gerade bei Explosionseffekten kann es aber schon einmal passieren, dass man genau den kleinsten Buchstaben vergisst, der dann plötzlich wie aus dem Nichts geschossen sich noch kurz vor dem endgültigen Zusammensetzen in den Text einfügt. Ein solches Ergebnis kann man eigentlich nur noch löschen, weil man sonst in allen betroffenen Bildern den kleinen Buchstaben Schritt für Schritt verschieben müsste. Damit wäre man wieder bei der ungeliebten Einzelbildanimation angelangt, die ja gerade vermieden werden soll. Im einfachsten Importfall sind beide Dokumente gleich groß, und die Bereiche, die in der Flash-Datei nicht verdeckt werden sollten, wurden in Swish nicht benutzt.
Am besten fährt man also damit, wenn beide Filmdokumente die gleiche Größe haben und man schon vorab in Swish immer daran denkt, wo Texte (wie in diesem Fall) Platz haben und wo nicht. Ganz konkret gesagt: In jeder Szene, die einen Geschäftsbereich behandelt, gibt es Bühnenbereiche, die für eine diesbezüglicheVerwendung Tabu sind bzw. Tabu sein sollen. Text sollte also z.B. nicht über den beiden Bildobjekten stehen. Die einzige Schwierigkeit besteht darin, diese Bildbereiche für jede Szene herauszufinden und sie dann während der Arbeit mit Swish nicht zu benutzen.
Flash MX
217
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
Dann muss man später die Inhalte lediglich in einer neuen Ebene importieren, ohne die einzelnen Grafiken erneut auszurichten.
10.1.2 Texte erstellen und animieren 10.1.3
1.
Richten Sie ein neues Dokument ein.
Um das Layout zu kontrollieren, muss die Bühne also genau die gleichen Maße wie das FlashDokument haben: 500 mal 300 Pixel. Als Hintergrundfarbe sollte ebenfalls #cec6bd über das Farbauswahlwerkzeug bzw. die sich dann öffnenden Textfelder verwendet werden. Über die gesamte Animation werden wir die Texte in weißer Schrift benutzen, doch damit man die Effekte von weißer Schrift nicht auf weißem Hintergrund testen muss, sollte zumindest der Hintergrund die gleiche Farbe wie in der Zieldatei aufweisen. Zur Orientierung können Sie ebenfalls ein Gitter einrichten. Das Ergebnis dieses Abschnitts finden Sie in der Datei seminare.swi
10.1.4
2.
Wählen Sie das Textwerkzeug und fügen Sie den Titel Seminare ein.
In der Werkzeugleiste befinden sich für alle Objekte, die auf der Bühne eingefügt werden können, entsprechende Schaltflächen. Aus dem reichhaltigen Angebot genügt das Textwerkzeug für die aktuellen Bedürfnisse. Klicken Sie einfach in die Bühne und überschreiben Sie den Blindtext Text mit dem Begriff Seminare. Die Einstellungen für den Text nehmen Sie in der Registerkarte TEXT im rechten Menü vor. Standardmäßig sind Absätze zentriert ausgerichtet, was bei einzeiligem Text allerdings egal ist. Alle anderen Einstellungen lassen wir bis auf die Schriftfarbe und die Größe unverändert.
Flash MX
218
TEXT-
10.1.5
3.
UND
3D -E F F E K T E
IMPORTIEREN
Setzen Sie die anderen Texte ein.
Jedes Mal, wenn Sie das Textwerkzeug wählen, öffnen Sie auch eine neue Ebene in der ebenfalls oben befindlichen Zeitleiste, die im Fall von Text die ersten Wörter anzeigt. Sie zeigt natürlich auch mehr an, aber nicht jeder Bildschirm hat Platz für 200 Zeichen Text und 400 Bilder Zeitleiste... Als weitere Informationen geben Sie die Orte (Bochum, Düsseldorf, Berlin) an, wo Seminare stattfinden und welche Bereiche mit Seminaren abgedeckt werden (Programmierung, Netzwerke, Grafik / Webdesign, Animation, Office). Die Textbereiche werden so platziert, dass sie nach Ablauf der kleinen Bewegungsanimation in der Szene weder das Foto noch das Logo verdecken. Neue Textobjekte bewirken auch neue Ebenen.
10.1.6
4.
Schreiben Sie das Drehbuch für die Animation.
In den Dateien medien.swi und consulting.swi finden Sie analoge Drehbücher.
Flash MX
219
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
Objekt
Bild
Aktion
Seminare
01 - 19
Seminare wird eingeblendet und bewegt sich in einem Bogen von links unten zur Mitte.
Seminare
20 – 38
Seminare wird ausgeblendet.
Entfalten Sie sich!
38 – 58
Entfalten... wird in der Mitte eingeblendet.
Entfalten Sie sich!
59 – 88
Entfalten... verwischt und wird dabei ausgeblendet.
Programmierung... (Seminarthemen)
85 – 115
Seminarthemen implodiert und kommt rechts oben zum Stillstand.
Programmierung... (Seminarthemen)
116 135
Seminarthemen bleibt stehen.
Bochum... (Seminarorte)
97 - 118 Seminarorte fährt von links nach links oben.
Bochum... (Seminarorte)
119 – 133
Seminarorte bleibt stehen.
Bochum (Seminarorte) 134 – 143
Seminarorte fährt nach oben von der Bühne.
135 – 155
Seminarthemen fährt rechts aus dem Bild.
Programmierung... (Seminarthemen)
Tabelle 9.1: Drehbuch für seminare.swi 10.1.7
5.
Wählen Sie INSERT / EFFECT / FADE IN und blenden Sie Seminare über 20 Bilder lang ein.
Bevor Sie einen Effekt auswählen, müssen Sie das Bild auswählen, dessen Objekt der Effekt zugewiesen werden soll. In diesem Fall ist dies Bild 1 in der Zeitleiste für das Objekt Seminare. Die Effekte befinden sich alle bei INSERT / EFFECT und können dann ausgewählt werden. Wir beschränken hier die Darstellung auf ein paar wenige der großen Auswahl. Bestimmt werden Sie auch den einen oder anderen Effekt wiederfinden, den Sie bereits im Netz gesehen haben. Jeder Effekt hat wiederum verschiedene Spezialoptionen, mit denen Abwandlungen des Grundschemas getroffen werden können. Für die einfache Einblendung benötigen Sie nur die Voreinstellungen, während Sie im Textfeld die Dauer in Bildern eintragen müssen. Zusätzlich können Sie auch einen individuellen Namen im Textfeld NAME vergeben. Standardmäßig steht hier der Effektname. Als Ergebnis wird ein weißes Rechteck über die betroffenen Schlüsselbilder eingeblendet, in denen der Effektname steht. Über die Schaltfläche ABSPIELEN können Sie die Effekte direkt testen.
Flash MX
220
TEXT-
10.1.8
6.
UND
3D -E F F E K T E
IMPORTIEREN
Verschieben Sie Seminare in die Bühnenmitte und blenden Sie es ab Bild 20 aus
Das Verschieben in die Bühnenmitte wird von einer blauen Linie nachgezeichnet, die Sie oben in einer Abbildung sehen können. Über die deutlich hervorgehobenen Pfadpunkte können Sie auch hier runde Bewegungen erzeugen. Von Bild 20 bis 40 soll der Begriff Seminare wieder ausgeblendet werden, was Sie über INSERT / EFFECT / FADE OUT und die Bilderzahl 20 bestimmen. Wählen Sie als erstes Bild das Bild 21 aus. Bewegungen werden von einem Pfad nachgezogen, der über Pfadpunkte modifiziert werden kann.
10.1.9
7.
10.1.10 8.
Blenden Sie Entfalten Sie sich! zwischen 39 und 58 ein.
Wählen Sie INSERT / EFFECT / BLUR für das Motto.
Der Wischeffekt soll für alle Mottos der einzelnen Geschäftsbereiche eingesetzt werden. Damit er nicht zu abrupt abläuft, benötigt man durchaus einige Bilder, sodass Sie 30 Bilder für den Effekt reservieren. Unten rechts müssen Sie noch das Optionsfeld VISIBLE markieren, damit mit dem sichtbaren Text begonnen wird. So wird gleichzeitig auch ein Ausblendeffekt generiert.
Flash MX
221
TEXT-
10.1.11 9.
UND
3D -E F F E K T E
IMPORTIEREN
Wählen Sie INSERT / EFFECT / EXPLODE für die Seminarthemen.
Einer der auffälligsten Effekte dürfte die Explosion sein, die auch besonders viele Optionen besitzt. Wichtig ist hier für den Anfang nur, dass die Explosion keine ist, sondern eine Implosion, bei der über 30 Bilder zwischen Bild 85 und 114 die Buchstaben der Seminarthemen aus allen Richtungen in der rechten oberen Ecke zusammenkommen.
10.1.12 10.
Wählen Sie INSERT / EFFECT / PLACE für die Seminarthemen.
Der PLACE-Effekt dient dazu, ein Objekt über eine vorgegebene Zeit eingeblendet zu lassen. Wenn die Seminarthemen also 20 Bilder eingeblendet sein sollen, darf der nächste Effekt erst 20 Bilder später aktiv werden. Es werden dabei keine weiteren sichtbaren Zwischenphasen eingefügt, sondern nur ein spezielles Symbol mit einem grünen und schwarzen Punkt. Im aktuellen Fall beginnt die statische Phase bei Bild 115 und dauert bis 135. Bei Bild 136 soll dann über 20 Bilder der Effekt SLIDE TO RIGHT die Seminarthemen nach rechts befördern. Standbilder werden über den PLACE-Effekt und leere Zwischenphasen erzeugt.
Flash MX
222
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
10.1.13 11.
Komplettieren Sie die Animation gemäß obigen Drehbuch.
10.1.14 12.
Speichern Sie die Datei unter seminare.swi und exportieren Sie sie zu seminare.SWF.
Die SWI-Datei benötigen Sie verständlicherweise für die Arbeit mit dem Programm. Sie erzeugen Sie mit FILE / SAVE AS... wie in anderen Programmen auch. ÜBER FILE / EXPORT / SWF dagegen erzeugen Sie die in Flash benötigten SWF-Datei.
10.2 Swish-Dateien in Flash einlesen und verarbeiten Wie Sie gesehen haben, bietet Swish sehr viele verschiedene Texteffekte und lässt sich mit dem Wissen aus Flash ebenfalls recht gut bedienen. In vielen anderen Animationsprogrammen werden die gleichen Techniken wie z.B. Pfadpunkte eingesetzt, da hier Flash wirklich einen Standard geschaffen hat. Das Grundprinzip, wie Swish-Dateien weiterverarbeitet werden, besteht darin, dass einfach die komplette Datei in eine neue Ebene eingelesen wird, deren Bilder jeweils mit einem Schlüsselbild aufgefüllt werden. Die Symbole für diese Animationen werden automatisch nummeriert in der Bibliothek gespeichert und verschwinden am besten in einem eigenen Ordner. Man kann sie natürlich auch sinnvoll benennen, aber bei mehr als 150 Objekten ist auch etwas weniger Perfektion ausreichend. Beachten Sie die Hinweise in dieser Lektion für alle Situationen, in denen Sie SWF-Dateien importieren.
10.2.1
1.
Verlängern Sie die gesamte Animation auf 155 Bilder.
Beide Animationen sollen übereinander gelegt werden, damit die jetzt noch viel zu kurze Zeitleiste der in Flash bereits befindlichen Animation auf die Länge der zu importierenden gebracht werden kann. Die importierte Animation wird ohnehin im ersten Bild geladen, auch dann, wenn Sie zuvor ein anderes markiert haben. Wenn Sie bei anderen Gelegenheiten nicht die gesamte Zeitleiste einsetzen wollen, können Sie die importierten Schlüsselbilder am Stück verschieben, indem Sie erstes und letztes mit gedrückter Umschalt-Taste markieren und dann die gesamte Auswahl verschieben. Markieren Sie sämtliche Schlüsselbilder in allen betroffenen Ebenen und verschieben sie diese kollektiv.
10.2.2
2.
Fügen Sie eine neue Ebene texte an oberster Stelle ein.
10.2.3
3.
Wählen Sie DATEI / IMPORTIEREN und dann seminare.swi.
Für den Import müssen Sie zuvor die Ebene auswählen, in welcher die Bilder ihren Platz finden sollen. Sobald der Importvorgang abgeschlossen ist, steht in jedem Bild der Ebene texte ein Schlüsselbild. Wenn Sie die importierten Texte betrachten, fällt auf, dass z.B. der gesamte Block mit den Seminarorten ein Symbol ist, während die implodierenden Buchstaben für die Seminarthemen alle einzeln verarbeitet werden.
Flash MX
223
TEXT-
10.2.4
4.
UND
3D -E F F E K T E
IMPORTIEREN
Ordnen Sie die neu importierten Symbole in einen Ordner der Bibliothek ein.
Beim Import nummeriert die Bibliothek die hineinstürzenden Elemente eilig durch und schafft damit natürlich nur bedingt Ordnung. Wenn Sie mit einem Einfügevorgang nicht zufrieden sind, möchten Sie vielleicht alle Elemente wieder entfernen. Ein eigener Ordner, den man dann komplett über die Schaltfläche PAPIERKORB löschen kann, ist da viel einfacher zu bedienen als 150 Symbole, deren Nummern man nicht unbedingt ansieht, ob sie noch zum ersten oder schon zum zweiten Import gehören.
Flash MX
224
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
10.3 3D-Objekte zeichnen und importieren Natürlich ist es auch mit dem kleinen Trick, den wir Ihnen hier zeigen wollen, nicht möglich, 3DObjekte direkt in Flash zu erzeugen, aber bevor wir auf die Schnelle irgendein teures Grafikprogramm in sieben Schritten erklären oder darauf verweisen, dass die besten 3D-Objekte in AutoCAD erzeugt werden und man dafür am besten eine entsprechend handwerkliche Ausbildung benötigt, zeigen wir Ihnen den Import aus einem Programm, das man vermutlich nicht allzu schnell mit Flash in Verbindung bringt. MS Word eignet sich hervorragend, um zumindest Grundtypen vieler Formen aus verschiedenen 3D-Perspektiven mit Füllfarbe, Farbverlauf, Schatten, Lichteinstellungen und Drehungen zu erzeugen. Es erspart einem im Arbeitsfluss nicht, eine zusammenhängende Bewegung über Einzelbilder zu realisieren, aber zumindest die Formen und die 3D-Ansichten sind fast problemlos erhältlich. Das Ergebnis dieses Abschnitts finden Sie in der Datei eckpfeil.fla.
10.3.1
1.
Öffnen Sie in MS Word die Symbolleiste ZEICHNEN.
10.3.2
2.
Zeichnen Sie beliebige Autoformen mit 3D-Effekten.
Abgesehen davon, dass diese Malkünste eher ein Word-technisches Problem sind, sollten Sie schon bei der Gestaltung darauf achten, wie Sie z.B. einen drehenden Pfeil nachher animieren wollen, damit Sie bereits die Einzelbilder in einem Dokument einrichten können. Über die Schaltfläche DREHEN kann man bspw. ein Objekt zusätzlich kippen; über die 3D-Einstellungen dagegen grundlegend andere Neigungswinkel vorgeben.
Flash MX
225
TEXT-
10.3.3
3.
UND
3D -E F F E K T E
IMPORTIEREN
Kopieren Sie die Objekte in die Zwischenablage.
Markieren Sie einfach ein Objekt drücken Sie Strg + C. 10.3.4
4.
Legen Sie ein neues Flash-Dokument an.
Am besten verwenden Sie auch sofort eine Hintergrundfarbe, damit die Leichtigkeit des Imports noch deutlicher hervorsticht. 10.3.5
5.
Wählen Sie BEARBEITEN / INHALTE EINFÜGEN.
Sie haben zwei verschiedene Möglichkeiten, ein solches Objekt einzufügen: entweder als Bitmap oder als PNG-Grafik. Wenn Sie mit dem PNG-Format häufiger arbeiten, weil Sie z.B. Menüs und Texteffekte bis jetzt immer in Macromedia Fireworks erstellt haben, dann könnte diese Option für Sie interessant sein. Es empfiehlt sich auf jeden Fall dann, wenn Sie das gesamte Dokument nachher als PNG exportieren wollten. In allen andern Fällen können Sie auf das Standardformat Bitmap zurückgreifen. Sollten Sie regelmäßig oder mehrere Male hintereinander eine in MS Word erstellte Form über die Zwischenablage als Bitmap einfügen wollen, können Sie auf dieses Dialogfeld verzichten, da bei Strg + V oder BEARBEITEN / EINFÜGEN der Inhalt direkt als Bitmap eingefügt wird. Das Ergebnis beeindruckt in jedem Fall, da die Qualität der eingefügten Objekte der in MS Word entspricht, die Farbverläufe sehr schön wiedergegeben werden und – daher auch der gefärbte Hintergrund – um die Objekte transparente Bereiche liegen, sodass man sie vor beliebigem Hintergrund oder vor beliebigen anderen Objekten verwenden kann.
Flash MX
226
TEXT-
10.3.6
6.
UND
3D -E F F E K T E
IMPORTIEREN
Benennen Sie die Objekte in der Bibliothek um.
Bei aller Leichtigkeit muss zwangsläufig irgendwo ein kleiner Haken im System verborgen sein: Er findet sich in der Bibliothek. Wohingegen bei allen bisherigen Importaktivitäten zumindest Nummern für die neu eintreffenden Elemente vergeben wurden, so nennt der Bibliothekar bei dieser – wie wir oben erfahren haben – unbenannten Quelle die Symbole alle flash0. Sie können sich vorstellen, dass es nicht gerade ein Leichtes, ist 10 gleich benannte Symbole so zu animieren, dass keine Fehlermeldung auftaucht oder man sich selbst nicht mehr zurechtfindet. Um diese Elemente animieren zu können, müssen sie alle eindeutige Namen haben. Am einfachsten dürfte sein, wenn man einen Ordner für die so erzeugten Elemente einrichtet und die Elemente dann der Reihe ihres Auftretens im Film nach nummeriert. Die eingefügten Objekte erhalten alle den gleichen Namen in der Bibliothek und können unter diesen Umständen nicht animiert werden. Man muss sie erst umbenennen.
Flash MX
227
TEXT-
UND
3D -E F F E K T E
IMPORTIEREN
10.4 Testen Sie Ihr Wissen! Was können Sie nach der Arbeit mit z.B. Swish in Flash importieren? Mit welchem Grundprinzip können Sie in Swish Texteffekte erzeugen? Wie können Sie ein Textobjekt in Swish statisch einblenden?. Wie sollten Sie beim Import von SWF-Dateien vorgehen? Wie gehen Sie vor, wenn Sie in einen Film der Länge 100 eine extern erstellte Animation der Länge 20 Bilder einfügen wollen und diese 20 Bilder am Ende des Quellfilms ablaufen sollen? Wie verarbeitet Flash Grafiken aus MS Word? Sie wissen, dass importierte Bilder direkt in die Bibliothek aufgenommen werden. Können Sie importierte Bilder aus MS Word direkt animieren?
Flash MX
228
TEXT-
Flash MX
UND
3D -E F F E K T E
IMPORTIEREN
229
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
11 Erweiterte Text-Optionen mit ActionScript und Komponenten
Flash MX
230
ERWEITERTE TEXT-OPTIONEN
Flash MX
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
231
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
Erweiterte Text-Optionen mit ActionScript und Komponenten Im Rahmen dieses Buchs werden wir aus Platzgründen nicht auf die grundlegende Sprachsyntax von ActionScript eingehen, aber mit diesem kleinen Projekt sollen Sie die aus unserer Sicht nach letzten kleinen Tricks kennen lernen, die auch ohne Programmierkenntnisse möglich sind. Es handelt sich dabei um die Themen, die wir im Projekt zur Texterfassung nicht vorstellen konnten, da zu diesem Zeitpunkt Voraussetzungen wie Movieclips oder das Aktionen-Fenster noch nicht bekannt waren. Möglicherweise haben Sie auch im Netz schon Flash-Dokumente getroffen, deren Text keine Grafik, sondern markierbar und scheinbar HTML-Text war. Vielleicht haben Sie sich auch schon gefragt, wie es möglich sein könnte, ohne Zwischenleiste, Ihre bereits fertigen, mehrbändigen Memoiren unkompliziert über eine kleine Aktion direkt aus dem Textdokument in Flash zu veröffentlichen. Und im Zusammenhang damit stellt sich ohnehin sofort die Herausforderung, wie mehrbändige Memoiren auf 300 Pixel Bannerhöhe untergebracht werden können bzw. ob und wie man Bildlaufleisten einbauen kann. Das Thema Bildlaufleisten führt dann zu Flash-Werkzeugen, für die man in jedem Fall Programmierkenntnisse haben muss, sodass wir nur kurz darauf verweisen werden, wohin Ihre Reise noch gehen kann.
11.1 Text als rollbar und auswählbar definieren Bis jetzt waren die Textstücke immer relativ kurz, bestanden vielleicht nur aus wenigen Wörtern für einen Titel, eine Kontaktadresse oder den Werbeslogan der jeweiligen Firma. Das letzte Projekt jedoch wies schon mehr in die Richtung, gleich eine ganze Webpräsenz ausschließlich mit Flash zu erstellen. Prinzipiell ist das mit den Themen, die Sie bis jetzt erarbeitet haben, kein Problem. Allerdings würden dann sozusagen Grafiken das Ergebnis sein. Man könnte also bspw. eben keinen Text auswählen, markieren und damit in die Zwischenablage kopieren, um ihn in einer EMail oder einem anderen Textdokument zu speichern. Dies kann aber durchaus eine interessante Funktion für einen Benutzer sein und wird von Fließtext grundsätzlich immer erwartet. Wenn man schon Fließtext einsetzt, dann kann man nicht das gesamt Flash-Dokument unglaublich groß oder die Schrift eines Textfelds unglaublich klein werden lassen, wenn man an eine Stelle umfangreichen Text einfügen möchte. Daher werden jetzt die Textoptionen vervollständigt, um für beide Situationen eine passende Lösung parat zu haben. Übersicht über in Flash verwendbare Textfelder Statische Textfelder zeigen Text an, der nicht auswählbar oder scrollfähig ist, wirkt im Ergebnis wie Grafiktext. Dynamische Textfelder können auswählbaren und scrollfähigen Text anzeigen und dienen als Container für über ein entsprechendes Programm dynamisch erzeugten Text (Ergebnisse einer Datenbankabfrage). Texteingabefelder stellen klassische Formularelemente dar, in die ein Benutzer Inhalte eintragen kann, die dann als Variablen vom einem entsprechenden Programm verarbeitet werden können.
11.1.1 Einfacher, scrollfähiger Textblock In diesem ersten Abschnitt greifen wir nur auf die Text-Optionen im Eigenschaften-Inspektor zurück, um einen Textblock über die Pfeiltasten oder die Maus rollbar zu machen. Eine große und
Flash MX
232
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
bessere Alternative stellt natürlich eine richtige Bildlaufleiste dar, wie Sie im nächsten Abschnitt sehen werden. Das Ergebnis dieses Abschnitts finden Sie in der Datei webanwendungen2.fla.
11.1.2
1.
Öffnen Sie die Datei webanwendungen1.fla.
Ziel soll sein, für die bereits im Vorlagen-Projekt eingeführte Seite über dynamische Webanwendungen einen Banner zu entwickeln, der auf wenig Raum besonders viel Text bietet. Im weiteren Verlauf dieses Projekts werden dann noch weitere Elemente hinzukommen. Auf einer eigenen Ebene titel befindet sich der Titel der Seite in einem abgerundeten Rechteck, das aus den Farben der Webpräsenz besteht. 11.1.3
2.
Erstellen Sie einen Textblock fester Größe und der Zielsetzung der Webseite.
In der Datei zielsetzung.txt finden Sie den Text, den Sie über die Zwischenablage in den Textblock einfügen sollen: dynamische-webanwendungen.de informiert über Webprogrammierung: Programmiersprachen, Software und Anwendungsbeispiele aus den Bereichen E-Commerce, EMarketing, E-Procurement und E-Government. In Kürze informieren wir auch über UMTSAnwendungen. In einem ersten Schritt ziehen Sie wie üblich einen Textblock so auf, dass ungefähr ein Drittel der Bannerbreite eingenommen wird. Sobald Sie den Text aus der Zwischenablage eingefügt haben, sehen Sie schon, dass er die Bannermaße bei Weitem übersteigt und man auch durch ein Verkleinern der Schrift keine Fortschritte erzielt, da er dann vollkommen unleserlich wird. Ein ganz dramatischer Fall also, den wir uns da ausgesucht haben.
11.1.4
3.
Bestimmen Sie die Attribute für die Textoptionen.
Im Eigenschaften-Inspektor lauern einige Schaltfläche, die bis jetzt noch nicht zu ihrem Einsatz gekommen sind. Zum einen wählen Sie als Typ für den Textblock dieses Mal den Eintrag DYNAMISCHER TEXT aus, da er sich ja – bedingt durch das Scrollen – bewegen soll. Als zweites wählen Sie die Schaltfläche AUSWÄHLBAR aus, damit der Text auch wird, was die Schaltfläche verspricht.
Flash MX
233
ERWEITERTE TEXT-OPTIONEN
11.1.5
4.
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
Verkleinern Sie das Textfeld passend zur Bühnengröße.
Damit einerseits der Scroll-Effekt sichtbar wird und man andererseits auch den gesamten Text auf der Bühne hat, müssen Sie das Textfeld nach einem Klick auf den Griff verkleinern. Der Griff muss sich dabei zu einem schwarzen Quadrat wandeln. Normalerweise haben dynamische Textblöcke mit fester Höhe und Breite einen weißes oder unausgefülltes Quadrat als Griff-Symbol an dieser Stelle. In dem Augenblick, in dem ein Textbock jedoch rollbar gemacht wird, wird der jeweilige Griff ausgefüllt.
Symbole bei Textfeldern
Der Griff in der Ecke eines Textblocks kennzeichnet den Typ, dem der jeweilige Textblock zugehört.
Typ
Eigenschaften
Merkmal
Statisch horizontal
variable Breite
rundern Griff in der rechten oberen Ecke
Statisch horizontal
feste Höhe
quadratischer Griff in der rechten oberen Ecke
Statisch vertikal
variable Höhe und Rechts-LinksAusrichtung
runder Griff in der linken unteren Ecke
Statisch vertikal
feste Höhe und Rechts-LinksAusrichtung
quadratischer Griff in der linken unteren Ecke
Statisch vertikale
variable Höhe und Links-RechtsAusrichtung
runder Griff in der rechten unteren Ecke
Statisch vertikal
feste Höhe und LinksRechts-Ausrichtung
quadratischer Griff in der rechten unteren Ecke
Dynamischer Textblock oder
variable Breite
runder Griff in der rechten unteren Ecke
Flash MX
234
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
Eingabetextblock Dynamischer Textblock oder Eingabetextblock
feste Höhe und Breite
quadratischer Griff in der rechten unteren Ecke
Dynamischer Textblock oder Eingabetextblock
scrollbar
schwarz ausgefüllten Griff in der jeweiligen Ecke
Tabelle 11.1: Textblöcke und ihre Kennzeichnen 11.1.6
5.
Kontrollieren Sie die Rollbarkeit.
Eine Alternative zur vorhergehenden Technik ist auch die Auswahl des gesamten Textblocks mit dem Auswahlwerkzeug, sodass man im Kontextmenü die Möglichkeit hat, den Eintrag ROLLBAR auszuwählen. Wenn der Textblock tatsächlich rollbar sein sollte, dann muss notwendigerweise diesen Eintrag im Kontextmenü aktiv sein. In der Abbildung können Sie auch bereits erkennen, dass der Text auf der Bühne einfach am Ende des Blocks abbricht und offensichtlich dort endet. Dies ist schon mal ein gutes Zeichen, dass alles funktioniert hat.
11.1.7
6.
Kontrollieren Sie die neuen Fähigkeiten des Textfelds.
In der Vorschau können Sie nun entweder mit dem Kontextmenü und dem Eintrag Alles auswählen den gesamten Text markieren oder ihn mit der Maus überfahren, um nur – wie in der Abbildung – einen Teil auszuwählen. Zusätzlich könnten Sie über die Pfeiltasten oder mit gedrückter linker Maustaste im Text nach oben und unten scrollen.
Flash MX
235
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
11.1.8 Bildlaufleiste in einen Textblock einfügen
11.2 Text aus externer Datei laden
Unicode-Zeichenkodierung Bei der Verwendung von externen Text-Dokumenten sowohl für den aktuellen Anwendungsfall als auch für die weiter gehende Programmierung können nur Dateien geladen werden, deren Inhalte mit dem Unicode-Zeichenkodierungsformat geschrieben wurden. Eine Ausnahme bilden XMLDokumente, die auch in Latin-1 oder Shift-JIS gespeichert sein können. Ansonsten kann es z.B. passieren, dass deutsche Umlaute mit einem kleinen Kasten und nicht als Buchstaben wiedergegeben werden. Unicode stellt einen Standard der Zeichenkodierung dar, der nahezu auf allen Plattformen lesbar ist. Dabei besitzt jedes Zeichen einen eindeutigen numerischen Wert, sodass Sprachen aus den meisten Sprachräumen verschlüsselt werden können. Unicode beschreibt ebenso Satzzeichen oder mathematische und technische Symbole. Üblicherweise werden zwei Unicode-Formate verwendet, die sich nur in der Art der Speicherverwaltung unterscheiden: •
UTF-16 (Unicode Transformation Format) speichert die Code-Bestandteile im 16-Bit-Format, wobei Textzeichen, Akzente und weitere Informationen jeweils als 2-Bytes-Sequenzen verarbeitet werden.
•
UTF-8 speichert die Code-Bestandteile des 16-Bit-Formats in Sequenzen aus einem bis vier Bytes. Dadurch wird ein geringerer Speicherplatz verwendet und eignet sich für z.B. Netzwerkübertragungen.
Bei der Veröffentlichung von Flash-Filmen wird Text mit Unicode UTF-8 kodiert. Der Flash Player kann Text auch im UTF-16-Format speichern.
Flash MX
236
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
11.3 HTML-Tags beibehalten
Rich-Text-Formatierung beibehalten Flash bietet Unterstützung für Rich-Text-Formatierung in dynamischen und Eingabetextfeldern. Wenn Sie im Eigenschafteninspektor die Option Text als HTML wiedergeben aktivieren oder die Eigenschaft html des TextField-Objekts auf true setzen, behält Flash grundlegende Textformatinformationen (z. B. Schriftart, Stil, Farbe und Größe) und Hyperlinks beim Exportieren der SWF-Datei bei, indem es automatisch die entsprechenden HTML-Tags einsetzt. Zu diesem Zweck müssen Sie den Textfeldern entweder im Wert einer Textfeldvariablen oder als Wert der Eigenschaft htmlText des TextField-Objekts HTML-Tags zuweisen. Folgende HTML-Tags werden in Textfeldern unterstützt: , , , und . Folgende
HTML-Attribute werden RIGHTMARGIN, ALIGN, INDENT und LEADING.
in
Textfeldern
, , ,
unterstützt:
LEFTMARGIN,
So behalten Sie die Rich-Text-Formatierung mithilfe der Textfeldvariablen bei: 1 Wählen Sie auf der Bühne ein Textfeld aus. 2 Weisen Sie dem Textfeld im Eigenschafteninspektor einen Variablennamen zu. 3 Führen Sie einen der folgenden Schritte aus:
Aktivieren Sie wiedergeben.
im
Eigenschafteninspektor
die
Option
Setzen Sie im Bedienfeld Aktionen die Eigenschaft auf true.
html
Text
als
HTML
des TextField-Objekts
4 Weisen Sie der Textfeldvariablen einen Wert zu, der HTML-Tags enthält.
Der folgende Code beispielsweise weist einem Textfeld mit dem Variablennamen txt einen Wert zu. Wenn Sie im Eigenschafteninspektor die Option Text als HTML wiedergeben aktivieren oder die Eigenschaft html auf true setzen, wird der Text fett dargestellt: txt = "Chris";
Flash MX
237
ERWEITERTE TEXT-OPTIONEN
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
Im folgenden Beispiel lautet der Variablenname des Textfelds ebenfalls txt. Da der Wert der Eigenschaft html des TextField-Objekts auf true gesetzt ist, können Sie den Inhalt des Textfelds mithilfe des Variablennamens ebenfalls fett darstellen, ohne im Eigenschafteninspektor die Option Text als HTML wiedergeben zu aktivieren: instName.html = true; txt = "Chris";
So behalten Sie die Textfeldinstanznamens bei:
Rich-Text-Formatierung
mithilfe
des
1 Führen Sie einen der folgenden Schritte aus:
Ziehen Sie auf der Bühne mit dem Textwerkzeug ein Textfeld auf, und weisen Sie ihm im Eigenschafteninspektor einen Instanznamen zu. Erstellen Sie mithilfe der ActionScript-Methode createTextField auf dynamische Weise ein Textfeld, und weisen Sie ihm einen Instanznamen in Form eines Parameter der Methode createTextField zu. 2 Führen Sie einen der folgenden Schritte aus:
Aktivieren Sie wiedergeben.
im
Eigenschafteninspektor
die
Option
Setzen Sie im Bedienfeld Aktionen die Eigenschaft auf true:
html
Text
als
HTML
des TextField-Objekts
instanceName.html = true;
Flash MX
238
ERWEITERTE TEXT-OPTIONEN
Flash MX
MIT
ACTIONSCRIPT
UND
KOMPONENTEN
239
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
12 Veröffentlichung für WWW und Druck
Flash MX
240
VERÖFFENTLICHUNG
Flash MX
FÜR
WWW
UND
DRUCK
241
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Veröffentlichung für WWW und Druck Bis jetzt war es kein Problem, erstellte Animationen im Vorschaufenster so zu sehen wie das Publikum. Möglicherweise ist Ihnen auch längst aufgefallen, dass eine gleichnamige SWF-Datei im selben Ordner erzeugt wird, in dem auch das Dokument gespeichert ist. Auf die genauen Ausgabebedingungen allerdings kann man gezielt Einfluss nehmen, was gerade bei steigendem Dateiumfang zwecks Ladezeitoptimierung immer wichtiger wird. Flash bietet allerdings zusätzlich einige andere Exportformate an, die Flash-Designer gerne einsetzen, um vom Flash Player im Browser unabhängig zu werden. Eine weitere Variante,gerade für Informationsseiten größeren Stils, besteht in den umfangreichen Optionen für eine Druckausgabe, die zusätzlich über eine entsprechende Schaltfläche gestartet werden kann.
12.1 Veröffentlichungsformen als eigenständiges Objekt Sobald Sie STEUERUNG / FILM TESTEN wählen, exportiert das Programm die aktuelle Datei automatisch in das SWF-Format und spielt es im integrierten Flash Player ab. Dies ist eine von mehreren Varianten, mit denen dieses offene Datei-Fomat erstellt wird. Programme wie SWISH bspw. erzeugen auch SWF-Dateien und zeichnen sich weniger durch die Bereitstellung von einer Entwicklungsumgebung ab, als durch viele vorgefertigte Effekte. Als Ergebnis produziert auch dieses Programm Dateien im SWF-Format. Betrachten kann man SWF-Dateien mit folgenden Hilfsmitteln: •
Flash Player entweder als eigenständiges Programm oder als Modul eines Internetbrowsers
•
Flash Xtra-Modul in Director und Authorware
•
Flash ActiveX-Steuerung für z.B. MS Office-Produke
•
in Quick Time als spezielles Quick-Time-Format
Es gibt verschiedene Gründe, warum man welches Format nehmen sollte, und wenn Sie sich über dieses Thema noch keine weiteren Gedanken gemacht haben, sollten Sie die Vor- und Nachteile anderer Formate außer des typischen SWF-Formats kennen lernen und bei Bedarf einsetzen. Doch die Auswahloptionen sind nur für bestimme Sonderfälle relevant, während die volle Funktionalität des Films, wie z.B. Menüs etc. nur durch das SWF-Format gewährleistet wird. Folgende kurze Liste soll Ihnen daher Anhaltspunkte geben, wann vielleicht doch auch einmal ein animiertes GIF ein geeignetes Medium sein könnte. 1. Das wohl wichtigste Format dürfte das SWF-Format darstellen, das bei komplexen Animationen mit Interaktion als einziges brauchbare Ergebnisse liefert. Ähnliches gilt auch für komplexe Bewegungsanimationen, die so weich und fließend nur hier erstellt werden können. Nachteilig könnte gerade in der Anfangsphase einer neuen Version sein, dass noch nicht alle Besucher bereits den neuesten Fash Player heruntergeladen haben. Gerade Menüs sollten unbedingt abwärts kompatibel sein, um sich nicht durch zu exklusive Funktionalität einem Teil der Besucher zu versperren. Hierbei kann ein einfacher Export in die zurückliegende Version helfen. 2. Die Einbettung in ein fertiges HTML-Dokument ist dann vorzunehmen , wenn auf keine äußeren Umstände wie z.B. eine Website in Dreamweaver mit entsprechrechender Vorlagenfunktion Rücksicht genommen werden muss. Gerade für sehr große, bildschirmfüllende Animationen, die evtl. sogar die ganze Webpräsenz darstellen, ist dies ein
Flash MX
242
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
nützliches Plus. HTML-Dokumente sind zwar für die Veröffentlichung notwendig, spielen aber für die Darstellung keine bedeutsame Rolle. 3. Ein Großteil der Banner und kleinen Werbeanimationen im Netz schöpfen die Möglichkeiten von Flash hinsichtlich weichen Bewegungen oder Interaktivität nicht aus, sind aber für wirklich alle Besucher sichtbar, da sie als animiertes GIF herausgegeben werden. Trotz der sehr einfachen Gestaltung in z.B. Adobe ImageReady haben die animierten GIFs durch diese Exportmöglichkeit von Flash Aufstieg und Renaissance erlebt. Einzige Nachteil besteht darin, dass man die oben erwähnten Vorteile von Flash nicht nutzen kann: oft werden nur Standbilder wie früher hintereinander geschaltet, ohne dass sich komplexe Bewegungsstrukturen ergeben. Je fließender die Bewegung, desto ruckelnder wird die Darstellung später im Netz sein. Des Weiteren sollte man sich schon vorher genau der Begrenzung auf 256 Farben bewusst sein, damit nicht plötzlich ungewollte Farbnuancen oder hässliche Farbeffekte ausgegeben werden. Letzter Nachteil ist die Dateigröße, die verständlicherweise mit steigender Komplexität zunimmt. Dies wird aber durch die zuvor benannte Einschränkung ausgemerzt, sodass die animierten GIFs wohl noch in den nächsten Jahren überall anzutreffen sein werden. 4. Als Screenshot-Ersatz dient die Veröffentlichung des aktuell gewählten Bildes in eine JPEGDatei. Es gibt vermutlich nur selten Situationen, in denen man eine geplante oder durchgeführte Animation in ausgewählten Einzelbildern benötigt, doch dank dieses kleinen Werkzeugs erspart man sich Nachbearbeitungen im Grafikprogramm. Ähnliches gilt für die PNG-Datei.
12.1.1 SWF-Veröffentlichung durchführen Im Rahmen der allgemeinen Programmvoreinstellungen existiert auch ein eigenes Dialogfenster für Informationen zu Exporteinstellungen, das man bei einer ersten Veröffentlichung auf jeden Fall aufrufen sollte, um die benötigten Vorgaben zu treffen. In diesem Fall eignet sich eigentlich die Animation mit Wolken, Schiff und Weide gerade wegen der Bewegungen eher für das SWF-Format statt für ein animiertes GIF. Das Ergebnis dieses Abschnitts finden Sie in der Datei wolken.swf.
12.1.2
1.
Wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN
In diesem Menü sind standardmäßig nur die beiden ersten Kontrollkästchen, nämlich für Flash und HTML, aktiviert. Passend zur Auswahl in diesem Dialogfeld, erscheinen je nach Formatauswahl weitere Register mit den Bezeichnungen der hier ausgewählten Grafikformate an. Flash und HTML meint, dass natürlich zum einen eine Flash-Player (SWF also) – Datei erzeugt werden soll, während über die Einstellung HTML zusätzlich noch eine eigene HTML-Seite mit speziellen voreingestellten Tag-Attributen generiert werden kann, die dann die SWF-Datei enthält. Dieser erste Schritt ist für alle weitere Formate gleich.
Flash MX
243
VERÖFFENTLICHUNG
12.1.3
2.
FÜR
WWW
UND
DRUCK
Deaktivieren Sie das Kontrollkästchen STANDARDNAMEN VERWENDEN.
Sofern Ihre erste Fassung bereits den richtigen Dateinamen trägt oder es Sie nicht stört, im Explorer noch einmal nachträglich den Dateinamen zu ändern, so haben Sie hier die Möglichkeit, einen anderen als den aktuellen für die SWF-Datei zu bestimmen. In diesem Fall wäre wolken.swf wohl genau das Richtige. 12.1.4
3.
Öffnen Sie die Registerkarte FLASH und geben Sie die Einstellungen vor.
Sofern Sie wissen (wie bei diesem Film), dass Sie keine speziellen Version-6-Tricks und Kniffe für den animierten Augenschmaus eingesetzt haben, können Sie zunächst eine andere Version des Flash Players wählen, für die der Film erstellt werden soll.
Flash MX
244
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Flash Player 6-Filme können nur im FP6 abgespielt werden.
•
LADEREIHENFOLGE organisiert die Reihenfolge, in der die einzelnen Ebenen geladen werden. Belassen Sie es einfach bei der Voreinstellung. NACH OBEN meint, dass ausgehend von der untersten Ebene (Hintergrund z.B.) die andere Ebenen geladen werden.
•
Der Größenbericht bei GRÖßENBERICHT ERSTELLEN kann dagegen bei größeren Projekten sehr wichtig sein, da er relativ detailreich über die Speicherplatzbelegung der einzelnen Bilder informiert.
•
Wenn Sie ActionScript einsetzen, sind die Optionen für das Debuggen sinnvoll. Gleiches gilt für die Trace-Aktionen. Dieser Befehl kann überall dort in ein Skript eingesetzt werden, zu dessen Abarbeitung eine Ausgabe erscheinen soll mit z.B. Informationen darüber, ob Variablen ordnungsgemäß existieren. Möchte man auf diese Informationen verzichten, kann man sie einfach nicht anzeigen lassen.
•
VOR IMPORT SCHÜTZEN ist dagegen wieder interessanter, da hiermit eine Rückkonvertierung in Flash verhindert wird.
•
Auch ein REMOTE (nicht am aktuellen Arbeitsplatz) DEBUGGING ist für uns zurzeit nicht bedeutsam. Sollte dies jedoch möglich sein, ist dringend zu empfehlen, das Dokument per Kennwort zu schützen.
•
FILM KOMPRIMIEREN und JPEG-QUALITÄT beeinflussen direkt die Dateigröße Im Flash Player 6 ist ganz neu ein weiteres (De)Kompressionswerkzeug für Text und ActionScript eingearbeitet, das Dateien mit vielen solcher Inhalte stärker komprimiert. JPEG-Qualität beeinflusst dagegen das direkte Aussehen wie bei einer normalen JPEG-Kompression. 100 liefert das schönste Ergebnis, aber keine Kompression. 80 entspricht ungefähr dem Standard wie 10 in Adobe Photoshop.
•
Über die beiden Schaltflächen EINSTELLUNGEN gelangen Sie in Dialogfelder für die AudioEinstellungen Streaming-Sound und Ereignissound, die Ihnen aus den Sound-Voreinstellungen bereits bekannt vorkommen werden. Hier ist nun der Punkt, an dem Sie die vorher im Eigenschaften-Inspektor getroffenen Einstellungen mit SOUNDEINSTELLUNGEN ÜBERGEHEN deaktivieren können, um für jeden Ton im Film global gültige Einstellungen vorzunehmen
12.1.5
4.
Klicken Sie auf OK, um die Einstellungen für diese Datei zu speichern.
Sind die Einstellungen in diesem Dialogfeld definiert, kann man die Datei später über DATEI / VERÖFFENTLICHEN exportieren, wobei das Programm die aktuellen Einstellungen berücksichtigt. 12.1.6
5.
Klicken Sie auf VERÖFFENTLICHEN, um die Datei sofort zu veröffentlichen.
Das Ergebnis ist wirklich beeindruckend: Während die Original-Datei noch 162 KB umfasst, reduziert die Kompression sie auf 10 KB für die SWF-Datei.
12.1.7 Animiertes GIF erzeugen Für ein animiertes GIF eignen sich vor allen Dingen Animationen mit wenigen Bewegungen, die wie z.B. die Animation für die Wirtschaftszeitung Börd nur ein paar statische Bilder nacheinander ausgeben.
Flash MX
245
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Das Ergebnis dieses Abschnitts finden Sie in der Datei boerd.gif.
12.1.8
1.
Öffnen Sie boerd3.fla und wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN.
12.1.9
2.
Geben Sie die Datei- und Animationseinstellungen vor.
Wenn Sie bereits öfters mit anderen Programmen animierte GIFs erzeugt haben, werden Ihnen die Exporteinstellungen hier bekannt vorkommen: •
Die beiden Textfelder GRÖßE bestimmen die Größe der zu erzeugenden GIF-Datei, wobei Sie vermutlich im Standardfall immer genau die gleiche Größe wie im Film benötigen. Akzeptieren Sie daher die Einstellung AN FILM ANPASSEN.
•
Unter ABSPIELEN können Sie festlegen, wie oft die Animation im GIF ablaufen soll: STATISCH (Standbild des markierten Bildes in der Zeitleiste) oder ANIMIERT (animiertes GIF der gesamten Sequenz). Sobald Sie ANIMIERT gewählt haben, werden die beiden rechten Kontrollkästchen aktiviert, mit denen Sie die Wiederholungsrate festlegen. Gerade für einen kleinen Effekt, der nicht die gesamte Zeit (AUTOMATISCH) ablaufen soll, kann es sinnvoll sein, eine Animation vielleicht nur drei Male (WIEDERHOLEN) ablaufen zu lassen.
12.1.10 3.
Beschreiben Sie die Farbverwaltung.
Wenn Sie vorher wissen, dass Sie eine Animation als GIF exportieren, vermeiden Sie Farbverläufe und beschränken sie sich auf websichere Farben.
•
Unter OPTIONEN legen Sie die Farbverwaltung des Exports fest: •
FARBEN OPTIMIEREN reduziert die Farbtabelle, die mit dem GIF gespeichert wird, auf die wirklich in der Datei eingesetzten Farben.
Flash MX
246
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
•
INTERLACED erzeugt im Browser eine unscharfes Vorschaubild, das im Zuge der Übertragung durch die exakten Bilddaten ersetzt wird. Für Standbilder ist das sehr zu empfehlen, bei animierten GIFs macht es keinen Sinn.
•
GLÄTTEN verschärft die Ansicht von evtl. sonst unscharfen Objekten wie z.B. Text. Normalerweise vergrößert sich dabei die Dateigröße und kann die verbessernde Wirkung bei transparenten Bildbereichen und farbigen Hintergründen zu unschönen Umrandungen führen.
•
RASTERN UND FARBEN rastern erzeugt nicht in der Farbtabelle vorhandene Farben durch ähnliche Farben oder die Zusammenstellung bestimmter gefärbter Pixel innerhalb kleiner Flächen. Die Farbdarstellung kann dadurch teilweise verbessert werden. Die Rasterqualität steigt von Keine über Geordnet bis Diffus das nur mit den Standardfarben Web 216 aktiv ist.
•
FARBVERLÄUFE ENTFERNEN reduziert von vorneherein das Problem unschöner Muster durch schlechtes Nachbilden der Verläufe oder zu wenig verfügbare Farben. Dabei gilt die erste Farbe im Farbverlauf für alle anderen Farben.
•
Für die Transparenzeinstellungen haben Sie drei Möglichkeiten: UNDURCHSICHTIG (einfarbiger Hintergrund), TRANSPARENT (komplett durchsichtiger Hintergrund) oder ALPHA (Zwischenwerte der Transparenz von 0 bis 255, wobei 0 komplett durchsichtig meint).
•
Unter PALETTENTYP legen Sie die benötigte Farbpalette fest:
•
•
WEB 216 greift auf die Standardfarben des Browsers zurück und erzeugt schnell ladbare, kleine Dateien.
•
ADAPTIV erzeugt eine eigene Farbtabelle und erlaubt natürlich nahezu alle Farben in die Auswahl von max. 256 Farben zu übernehmen. Kurze Animationen werden damit nur unwesentlich größer und haben eine bessere Farbqualität.
•
WEB SNAP ADAPTIV konvertiert ähnlich Farben aus der ansonsten unter ADAPTIV erzeugten eigenen Farbtabelle in die Web 216 Tabelle.
Eine Angabe über die Anzahl Farben im GIF (maximal 256) können Sie nur machen, solange Sie nicht Web 216 als Palettentyp verwenden, da ja hier die Anzahl schon feststeht. Bei zweifarbigen GIFs wäre dies natürlich nicht günstig.
12.1.11 4.
Testen Sie die Datei.
Bei so vielen Einstellungen darf man auch bei kleinen Animationen nicht alle Arbeit dem Programm überlassen, denn das Ergebnis ist diskussionswürdig. Die Dateigröße ist mit 9,73 KB hervorragend klein, aber an der entscheidenden Stelle waren die Einstellungen suboptimal: der in Photoshop so nett ausschauende Schatten im Logo erweist sich hier wegen der Rasterung als hässlicher Rand um den Begriff Börd. Zusätzlich wurden sämtliche Rot-Töne angeglichen, sodass der farbliche Unterschied zwischen dem Schriftzug und der Grafik vollkommen untergeht. In der Abbildung sehen Sie daher zum Vergleich das Ergebnis mit RASTERN: DIFFUS und PALETTENTYP: ADAPTIV. Die Dateigröße hat sich zwar prozentual erheblich, aber letztlich doch unbedeutend auf 13,4 KB erhöht. Bei längeren Animationen hätte dies natürlich durchaus eindrucksvolle Unterschiede erzeugt.
Flash MX
247
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Wählen Sie im Kontextmenü des Windows Explorers der Datei ÖFFNEN MIT und dann einen Internetbrowser.
Exportauswahl mit Schlüsselwörtern Besonders raffiniert ist es, wenn man nur einen Teil der Animation in ein animiertes GIF exportieren möchte. Traditionell denkend, könnte man sich überlegen, entweder vorher die entsprechenden Bereiche der Animation zu entfernen oder nachher in einem Grafikprogramm die überzähligen Bilder zu entfernen. Flash bietet aber genau für diese Problematik eine Bereichsauswahl an, die mit Hilfe der Bildbezeichnungen funktioniert. Möchten man bspw. die Animation auf die zwei Textteile und die Logo-Einblendung reduzieren, trägt man in das erste Bild, mit dem die Animation beginnen soll #First als Bildbezeichnung ein. #Last kennzeichnet dann das letzte Bild, wobei der Bildname in der Zeitleiste nicht angezeigt wird, weil es auch das letzte Bild ist.
Für den Export als JPEG-Datei genügt die Markierung des zu exportierenden Bildes.
Schlüsselwort Funktion #First
erstes zu exportierendes Bild
#Last
letztes zu exportierendes Bild
#Static
einziges zu exportierendes Bild
#Map
erzeugt aus den Schaltflächen im so bezeichneten Bereich eine Imagemap
#p
druckbares Bild
!#p
unterbindet das Drucken im Flash Player
#b
Druckbereich
Tabelle 10.1: Schlüsselwörter für den Export
Flash MX
248
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
12.2 Dynamische HTML-Vorlagen nutzen und ändern Wenn man die fertigen Animationen nicht z.B. per E-Mail versendet oder als Zusatzinformation zum Download anbietet, wird man sie wohl direkt in eine HTML-Seite einbinden, damit die Ausgabe in einem Browser ermöglicht wird. Als HTML-Tags muss dafür für MS Internet Explorer und für Netscape Navigator mit ihren jeweiligen Attributen für z.B. Anzeigequalität und Wiederholung / Schleife einsetzen, die im folgenden Beispiel eine Datei namens menueoben.swf einbinden:
Listing 10.1: Einbinden einer SWF-Datei in eine HTML-Seite Dieses Tag kann von Flash automatisch erzeugt werden, sofern Sie die Datei nicht ohnehin über ein Webdesign-Programm verknüpfen wollen. Es bleibt dem Designer überlassen, ob er den fertigen Quelltext anschließend in eine neue Seite kopiert oder die komplett erzeugte Seite weiterverarbeitet.
12.2.1 In HTML exportieren Das Ergebnis dieses Abschnitts finden Sie in der Datei globus.html
Flash MX
249
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
12.2.2
1.
Öffnen Sie globus4.fla und wählen Sie DATEI / EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN.
12.2.3
2.
Geben Sie den Seitentitel in der Registerkarte FORMATE vor.
Sobald Sie hier das Kontrollkästchen STANDARDNAMEN VERWENDEN deaktivieren, haben Sie Zugriff auf die Textfelder und können z.B. auch verschiedene Namen für die zu erzeugende SWF- und HTML-Datei vergeben. 12.2.4
3.
Geben Sie in der Registerkarte HTML die Dokument-Einstellungen vor.
Die Datei für NUR VORLAGE heißt default.html
Verschiedene Vorlagen liegen im Auswahlmenü VORLAGE bereit, wovon NUR FLASH eine einfache HTML-Seite erzeugt, in die der Film eingebettet wird. Über die Schalfläche INFO erhält man eine kurze Definition über den Verwendungszweck der jeweiligen Vorlage. Darüber hinaus finden Sie für die Vorgängerversionen des Flash Players spezielle Seiten sowie eine Seite für die Darstellung im Pocket PC oder verschiedene Vorlagen für die Generierung von Lerninhalten. Diese verlangen aber Kenntnisse in ActionScript, um sie wirklich sinnvoll nutzen zu können. Sofern alle Inhalte im Flash-Film in Vektorform vorliegen, können Sie den Film beliebig skalieren. Eine Skalierung ist natürlich auch in den anderen Fällen möglich, erzeugt aber unschöne Ergebnisse. Unter GRÖßE können Sie entweder die exakten Dokumentmaße verwenden oder mit PIXEL oder PROZENT in den dann aktivierten Textfeldern andere Werte notieren. Dies entspricht den Attributen HEIGHT und WIDTH in den Tags und .
12.2.5
4.
Bestimmen Sie das Abspielverhalten...
Man hat nicht nur über den Befehl stop();, sondern auch über HTML-Attribute die Möglichkeit, das Abspielverhalten zu beeinflussen. Beispielsweise kann es sinnvoll sein, für ein Menü, das eine kleine Animation zu Beginn enthält (Schriften werden eingeblendet), diese Animation nur einmal beim Öffnen der Seite abspielen zu lassen. Eine ständige Schleife würde nur dazu führen, dass der Effekt den Besucher schlicht und einfach nervt. •
BEIM BEGINN ANHALTEN startet den Film erst, sobald der Benutzer eine Schaltfläche im Film anklickt oder im Kontextmenü ABSPIELEN wählt. Sofern keine solche Schaltfläche vorgegeben ist, wird allerdings kein Besucher auf die Idee kommen, das Kontextmenü zu verwenden.
Flash MX
250
VERÖFFENTLICHUNG •
FÜR
WWW
UND
DRUCK
WIEDERHOLUNG spielt den Film in einer Schleife ab. Deaktiviert man diese Funktion, wird der Film genau einmal wiedergeben.
12.2.6
5.
...und die Anzeige...
•
MENÜ ANZEIGEN lässt das übliche Kontextmenü bei Animationen zu, mit denen der Besucher z.B. eigene Steuerungsmöglichkeiten besitzt.
•
GERÄTESCHRIFTART verwendet bei statischem Text, für den Geräteschriftarten festgelegt wurde, die auf dem Benutzersystem installierten Schriftarten.
•
QUALITÄT regelt das Verhältnis zwischen der Verarbeitungszeit und der Bildglättung (AntiAliasing): •
NIEDRIG lässt die Wiedergabegeschwindigkeit auf Kosten der Anzeigequalität dominieren.
•
AUTOMATISCH NIEDRIG lässt zunächst der Wiedergabegeschwindigkeit den Vorrang, passt sich aber einer evtl. vorhandenen Kapazität auf dem Wiedergabegerät an und setzt dann die Anzeigequalität höher.
•
AUTOMATISCH HOCH verringert die Anzeigequalität, wenn das Wiedergabegerät nicht genügend Kapazität besitzt, um die Geschwindigkeit zu erhöhen.
•
MITTEL verteilt keine Vorzüge, sondern versucht einen Ausgleich.
•
HOCH gibt der Anzeigequalität immer den Vorzug vor der Wiedergabegeschwindigkeit.
•
OPTIMAL sorgt für beste Qualität und berücksichtigt die Geschwindigkeit nicht.
12.2.7
6.
...und die Ausgabeattribute
•
Die Einstellungen unter FENSTERMODUS gelten nur für die Windows-Version von Internet Explorer 4.0 mit Flash-ActiveX-Steuerung. Sie regeln, wie und ob ein eigenes Fenster für das Objekt auf der Seite eingerichtet wird.
•
HTML-AUSRICHTUNG definiert die Ausrichtung gemäß der Einträge im Auswahlmenü in Bezug auf den Browserrand wie sonst bei Objekten in HTML üblich.
•
SKALIEREN bietet die Möglichkeit, den Film innerhalb seiner Grenzen zu vergrößern, was allerdings die Randbereiche abschneidet. So kann man räumlich zentrale Animationsausschnitte heranzoomen:
•
•
ALLES ZEIGEN definiert keine Skalierung, sondern zeigt die Originalgröße.
•
KEIN RAND skaliert die Filminhalte so, dass sie nicht abgeschnitten werden (theoretisch). Dies funktioniert vor allen Dingen bei Randbereichen innerhalb der Animation.
•
GENAU PASSEND berücksichtigt zwar den zur Verfügung stehenden Platz, vernachlässigt jedoch bei der Skalierung das Seitenverhältnis.
•
KEINE SKALIERUNG unterbindet die automatische Skalierung durch Größenveränderung des Flash Players.
Normalerweise entspricht das Filmfenster der Dokumentgröße, doch bei Skalierungen, wie Sie im vorherigen Punkt beschrieben wurden, ist es hier möglich, den Film innerhalb seines
Flash MX
251
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Fensters über das Auswahlmenü FLASH-AUSRICHTUNG auszurichten. Die korrespondieren mit den analogen HTML-Attributen.7. Testen Sie das Ergebnis.
Einträge
Im Ordner, der auch das Flash-Dokument enthält, wird neben der SWF-Datei eine HTML-Datei gespeichert, die den vergebenen Namen trägt. Als Hintergrundfarbe für die gesamte Seite wählt das Exportmodul automatisch die Hintergrundfarbe des gesamten Dokuments aus, weswegen die gemorphten Erdteile mitten im blauen Weltmeer transformiert werden.
12.2.9 Grundprinzip der HTML-Vorlagen Die oben erzeugte Datei basiert auf Vorlagendateien, die bei einer Standardinstallation unter C:\Programme\Macromedia\Flash MX\First Run\HTML\Default.html zu finden ist. Wenn Sie in diesen Ordner wechseln, sehen Sie allerhand andere Dokumente wie z.B. DetectVersion5.html, die – wie in der INFO nachzulesen ist – folgende Eigenschaften hat: „Verwendet Browserskripts, um zu ermitteln ob der Macromedia Flash Player installiert ist. Falls Flash Player 5 oder neuer nicht vorhanden ist, wird ein Alternativbild geladen.“ Die restlichen Dateien testen entweder andere Browser oder arbeiten mit dem Lerninhaltekonzept zusammen, das wir hier wegen der ActionScript-Programmierung nicht behandeln. Beim Export werden anstelle der Variablen die entsprechenden Inhalte eingetragen. Zwei Elemente, die Ihnen bekannt vorkommen sollten, sehen Sie gleich schon zu Beginn: Der Vorlagentitel $TT (template title) hat den Wert Nur Flash. Aus dieser Variable wird z.B. in Flash später der Eintrag im Auswahlmenü VORLAGE gemacht. Analog verhält es sich mit der Variable $DS (description), in der die Erklärung für die Schaltfläche INFO gespeichert wird. Neben diesen Vorlagen, die im Programm ausgelesen werden, gibt es eine Reihe von Variablen, die vom Programm in der Vorlage ersetzt werden, bevor die so erzeugte HTML-Seite in Ihrem Arbeitsordner gespeichert wird. So finden Sie die Variable $TI z.B. im Tag , in der der Dokumenttitel verwendet wird, den Sie – man höre und staune – in der Registerkarte FORMATE eingetragen haben. Sie finden im nächsten Abschnitt eine Tabelle mit sämtlichen Variablen, die Sie dann in einer eigenen Vorlage verwenden können.
Flash MX
252
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
Eine Liste der ca. 30 Vorlagenvariablen finden Sie unter dem Stichwort Vorlagenvariablen in den Hilfetexten.
$TTNur Flash $DSZeigt Macromedia Flash-Film in HTML an. $DF $CS $TI $MU $MT $PO
Listing 10.2: Kompletter Quelltext von default.html
Variablen für Texte und Links Speziell für Suchmaschinen, die natürlich keine Animationen sehen können, kann es nützlich sein, über den URL- oder Text-Bericht die jeweiligen Informationen vorliegen zu haben. HTMLKommentare in der Vorlagendatei weisen auf die mit ihren jeweiligen Variablen ausgelesenen Werte hin.
Kommentar
Variable
Funktion
$MU
Im URL-Bericht werden alle Links ausgegeben, die im Film durch Schaltflächen
Flash MX
253
VERÖFFENTLICHUNG
FÜR
WWW
UND
DRUCK
aufgerufen werden können.
