Adobe Flash CC Pro Grundlagen

Transkript

1 webmasters press Frank Schad Adobe Flash CC Pro Grundlagen Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

2

3 webmasters press Frank Schad Adobe Flash CC Pro Grundlagen Art.-Nr Version 4.0 vom Autor: Frank Schad webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 Inhalt 5 Inhalt Einführung Flash verstehen Was ist Flash? Anwendungsmöglichkeiten von Flash Vektorgrafiken für das Internet Die Film-Metapher Die Oberfläche von Flash Erstellen eines neuen Dokuments Ein erster Blick auf Flash Werkzeuge Die Bühne Ändern der Bühneneigenschaften Zoomen der Bühnenansicht Flash-Projekte speichern und testen Zeichnen mit Flash Formen zeichnen Anpassen von Kontur und Füllung Verbinden von Kontur und Füllung Konturen und Füllungen entfernen oder hinzufügen Weitere geometrische Formen Grundformen Freihand zeichnen Teilbereiche löschen Löschen durch Auswählen Löschen mit dem Radiergummi...31

6 6 Inhalt 3.4 Gruppieren von Objekten Boole sche Operationen Arbeiten mit Farben Die Farbwähler in der Werkzeugleiste Die Farbwähler im Eigenschaftsinspektor Die Palette»Farbfelder« Die Palette»Farbe« Objekte transformieren und positionieren Das Werkzeug»Frei transformieren« Numerische Transformation Objekte mit dem Auswahlwerkzeug ändern Klassische Vektorbearbeitung Ankerpunkte bearbeiten Das Stiftwerkzeug Objekte positionieren und ausrichten Hilfslinien und Raster Automatische Ausrichtung Die Ausrichten-Palette Numerische Positionierung Arbeiten mit Ebenen Das Ebenenprinzip Erweiterte Ebeneneigenschaften Objekte auf eine andere Ebene bewegen Text in Flash Besonderheiten von Text in Flash Textformatierung Schriftarten einbetten Text teilen... 72

7 Inhalt 7 7 Importieren von Grafiken Bilder auf der Bühne platzieren Grundlagen Importieren von PSD- und AI-Dateien Die Bibliothek Überblick Kompressionseinstellungen für Pixelbilder Verwalten von Bibliothekselementen Mit mehreren Bibliotheken arbeiten Pixelgrafiken teilen Pixelbilder als Füllung verwenden Pixelbilder in Vektorgrafiken konvertieren Symbole und Instanzen, Teil Was sind Symbole? Grafiksymbole Symbole bearbeiten Neue Symbole erstellen Animationen Grundlagen der Animation Die Zeitleiste Einstellen der Bildrate Stop-Motion-Animationen Schlüsselbilder und Füllbilder Tweening-Animationen Form-Tweening Bewegungs-Tweening Tricks mit Maskenebenen Das Prinzip von Maskenebenen Text als Maske...125

8 8 Inhalt 11 Sounds Sounds importieren Sounds synchronisieren Soundeigenschaften Flash-Filme veröffentlichen Die Wahl der Exportformate Optionen für den SWF-Export Optionen für den HTML-Export Die bessere Lösung: Manuelle Einbindung in HTML mit swfobject Symbole und Instanzen, Teil Symbole animieren Movieclips Animationen in Movieclips Movieclip-Instanzen animieren Movieclips dreidimensional bearbeiten Das Schaltflächen-Symbol Filmsteuerung mit ActionScript Wo wird ActionScript-Code eingefügt? Wann werden Aktionen ausgeführt? Zeitleisten-Ereignisse Benutzer-Ereignisse Instanznamen vergeben Event-Listener hinzufügen Funktion definieren Mausereignisse im Überblick Kommentare einfügen Szenen Lösungen Index

9 Einführung 9 Einführung We imitate also motions of living creatures, by images, of men, beasts, birds, fishes, and serpents We have also houses of deceits of the senses; where we represent all manner of feats of juggling, false apparitions, impostures, and illusions; and their fallacies. Francis Bacon, New Atlantis, London 1627 Bereits im April 2010 verbannte Steve Jobs die Flash-Technologie offiziell von allen iphones und ipads. Etwa eineinhalb Jahre später gab Adobe kleinbei und stellte die Weiterentwicklung von Flash auch für Android-Systeme und andere mobile Geräte komplett ein. Letztlich ein vernünftiger Schritt, denn für Smartphones und Tablets ist Flash schlichtweg nicht geeignet: Animationen und Videos ruckeln, und der Akku ist bei Flash-Nutzung wesentlich schneller leer. Gleichzeitig werden alternative Technologien wie HTML5 und CSS3 als»flash-killer«gehypt. Ist Flash also tot? Ganz so schlimm ist es nicht, denn der ganze Hype beruht auf einer falschen Einschätzung dessen, was Flash ist und wofür es ursprünglich gedacht war: In Ermangelung von Alternativen galt Flash lange Zeit als Universallösung für alle gestalterischen Anforderungen, die nur ein wenig über HTML und Photoshop hinausgingen. Es wurden damit Slideshows produziert, Navigationsleisten gestaltet und sogar Videos publiziert. Für all das war Flash nie gedacht! Flash ist kein Video-Player. Das Einbinden von Videos in eine Website mit Flash ist sogar ausgesprochen kompliziert. Flash ist eine Authoring-Umgebung für interaktive, animierte Multimedia-Anwendungen. Mit Flash lassen sich auf einfache Weise bewegte Bilder wie etwa Trickfilme erstellen, nahtlos mit Sounds oder Videos kombinieren und interaktiv gestalten. Ein komplexes Online-Spiel mit HTML5, CSS3 und JavaScript zu gestalten ist auch heute noch eine Herausforderung. Gerade das ist die Stärke von Flash, denn Flash hat vor allem eines: eine grafische Benutzeroberfläche zur einfachen Erstellung von Animationen! Und mit der integrierten Programmiersprache ActionScript sind bereits mit wenigen Grundkenntnissen beeindruckende Ergebnisse möglich. Zudem spaltet Flash die Internetgemeinde schon immer wie kaum eine andere Technologie in glühende Anhänger und erbitterte Gegner, sowohl unter Webdesignern als auch unter Web-Benutzern. Und mehr als andere Web-Technologien ist Flash seit jeher auch Designtrends und Modeströmungen unterworfen. In diesem Grundlagenkurs lernen Sie Schritt für Schritt die vielfältigen Möglichkeiten von Flash CC als Designer-Werkzeug kennen. Sie lernen, Grafiken zu erstellen und zu animieren und Ihre Animationen mit Sound zu unterlegen. Am Ende werfen Sie dann noch einen kleinen Blick auf die Grundlagen der ActionScript-3-Programmierung, was es Ihnen ermöglicht, Ihre Animationen interaktiv zu machen.

10 10 Einführung demo.swf f Dieses Schulungsskript enthält zahlreiche Übungen und Praxisbeispiele. Zum besseren Verständnis mancher Übungen finden Sie Demonstrationsdateien im Übungsordner Demos. Einen Hinweis auf die jeweilige Demo-Datei finden Sie wie hier links am Rand der entsprechenden Übungen. An vielen Stellen im Text finden sich Hinweise und Warnungen vor Stolperfallen. Diese sind besonders hervorgehoben. Q Auch Tips und Zusatzinfos sind mit einem besonderen Symbol gekennzeichnet. Bleibt nur noch, Ihnen viel Spaß zu wünschen im Fun House von Flash. Frank Schad Nürnberg, im November 2013

11 Was ist Flash? 11 Flash verstehen In dieser Lektion lernen Sie: die Anwendungsmöglichkeiten von Flash und die Vor- und Nachteile von Flash kennen. 1.1 Was ist Flash? Adobe Flash ist nicht einfach nur ein Programm oder ein Dateiformat, sondern eine vollständige Technologie zur Erstellung und Publikation vektorbasierter, multimedialer und interaktiver Inhalte im Web, sogenannter Flash-Filme. Dabei bezieht sich die Bezeichnung Film hier in keiner Weise auf Videos, sondern auf jede Art von Animation. Flash-Filme sind äußerst vielseitig einsetzbar, sei es als Teaser-Animation, Werbebanner, Produktpräsentation oder in Form komplexer Online-Games. Kernstück der Technologie ist die Autoren- und Entwicklungsumgebung Flash CC. Die damit erstellten Projekt- oder Quelldateien (Dateiformat FLA) müssen zur Veröffentlichung auf einem Webserver zunächst in SWF-Dateien exportiert (kompiliert) werden. Die FLA-Dateien werden nur von den Autoren während der Entwicklung verwendet und sind editierbar. Die kompilierten SWF-Dateien sind für die Anzeige im Webbrowser gedacht und können in dieser Form nicht mehr so einfach verändert werden. Um SWF-Dateien betrachten zu können, ist der proprietäre Flash Player erforderlich, der sowohl als Browser-Plug-in als auch als eigenständige Abspielsoftware auf dem Desktop verwendet werden kann. Die aktuelle Version des Flash Players ist für Windows, Mac OS X und Linux verfügbar. 1.2 Anwendungsmöglichkeiten von Flash Da Flash ursprünglich ein reines Animationswerkzeug war, wurde es in der Vergangenheit hauptsächlich für Webseiten-Intros oder animierte Werbebanner eingesetzt. Mit Version 4 wurde Flash um die Programmiersprache ActionScript erweitert und erlaubt seitdem die Programmierung komplexer, interaktiver Webanwendungen, über Online-Spiele bis hin zu ganzen Shopsystemen. Nachstehende Anwendungsbeispiele zeigen die universelle Einsetzbarkeit von Flash: Animierte Produkt- und Werbepräsentationen Online-Kataloge und Shopsysteme Jingles und Trailer

12 12 Flash verstehen Spiele Werbebanner Online-Lernsysteme Standalone- und Kiosk-Anwendungen u. v. m. Dabei können die Flash-Dateien entweder direkt in Websites eingebunden oder aber als eigenständige Programme (Adobe AIR) kompiliert werden. Vorteile: freie Skalierbarkeit der Flash-Filme aufgrund der Vektoren plattformunabhängige Darstellung keine Abhängigkeit vom HTML-Code freies Layouten der Website Verwendung beliebiger Schriftarten Integration von Pixelbildern, Audio- und Videoelementen Zusammenspiel mit PHP, ASP, XML und JavaScript Erstellung ausführbarer Programmdateien (AIR) Für vektorbasierte, interaktive Animationen im Web war Flash jahrelang nahezu konkurrenzlos. Erst in jüngerer Zeit unterstützen die gängigen Webbrowser vermehrt auch den offenen Standard SVG (Scalable Vector Graphics), der es erlaubt, im Zusammenspiel mit HTML5, CSS3 und JavaScript teilweise ähnliche Ergebnisse zu erzielen. Nachteile: Der gravierendste Nachteil von Flash ist sicherlich die fehlende Unterstützung auf Mobilgeräten (ios, Android), was die Einsatzmöglichkeiten und Zielgruppen natürlich einschränkt. Um Flash-Dateien auf Desktop-Rechnern betrachten zu können, ist ein Plug-in erforderlich, das vom Anwender separat heruntergeladen und installiert werden muss. Dadurch bleiben Flash-Elemente bis zu einem gewissen Grad»Fremdkörper«auf Websites. Dies muss natürlich bei der Konzeption berücksichtigt werden. 1.3 Vektorgrafiken für das Internet Die meisten Grafiken, die Sie im Web finden, sind noch immer Pixelgrafiken (GIF, JPG und PNG). Flash jedoch erstellt Vektorgrafiken. Eine Vektorgrafik ist im Gegensatz zu einer Pixelgrafik nicht durch eine bestimmte Menge von Bildpunkten (Pixeln) definiert, sondern durch mathematische Kurven. Erst wenn die Vektorgrafik auf dem Monitor dargestellt wird, erfolgt die Berechnung von Größe und Form in Echtzeit. Dadurch sind Vektorgrafiken ungemein exakt und sehr speicherschonend. Vor allem aber bieten Vektorgrafiken den Vorteil, jederzeit beliebig skalierbar zu sein, ohne an Qualität zu verlieren. Wenn Sie allerdings ein Bild mit sehr vielen Farben und vielen kleinen Details darstellen möchten (z. B. ein Foto), werden Sie schnell feststellen, dass Vektorgrafiken durchaus ihre Grenzen haben. Sie müssten eine schier unglaubliche Zahl von Vektoren einsetzen, um das Bild annähernd detailgetreu darstellen

13 Die Film-Metapher 13 zu können. Je mehr Vektoren eine Grafik enthält, desto mehr Rechenleistung und Speicherbedarf ist notwendig, womit der Vorteil der Vektorgrafik verloren ginge. Deshalb ist es in Flash auch möglich, Pixelbilder zu importieren. Die Verwendung von Pixel- oder Vektorgrafiken ist also abhängig vom darzustellenden Inhalt: Bei flächigen Grafiken, Comics, technischen Zeichnungen und Animationen sollten Sie dem Vektorformat auf jeden Fall den Vorzug zu geben. Bei Fotos, Gemälden und Composings greift man jedoch eher auf Pixelgrafiken zurück. 1.4 Die Film-Metapher Die Autorensoftware Flash nutzt Begriffe aus Film und Theater als Metaphern: Auf der Bühne agieren Darsteller in verschiedenen Szenen, sodass am Ende der Dreharbeiten ein kompletter Film entsteht. Im Laufe dieses Kurses werden Sie die verschiedenen Arbeitsschritte kennenlernen. Vergleichen Sie die Software mit einem Studio: Bei jeder Produktion gibt es Regisseur/in und Kameramann/-frau. In diesem Fall sind Sie beides zugleich. Betreten Sie also das Studio und starten Sie das Programm Flash.

14 94 Animationen Animationen In dieser Lektion lernen Sie: die Grundlagen von Flash-Animationen kennen. Stop-Motion- und Tween-Animationen zu erstellen. die Unterschiede zwischen Form- und Bewegungs-Tweens kennen. 9.1 Grundlagen der Animation Nachdem wir nun in der Lage sind, Darsteller zu zeichnen und zu importieren, wird es Zeit, diese auch zu animieren. Denn schließlich ist die Animation neben der ActionScript-Programmierung nach wie vor einer der Haupt-Daseinszwecke von Flash und wahrscheinlich auch einer der Hauptgründe dafür, warum Sie sich für diesen Kurs entschieden haben. Die Animation in Flash funktioniert grundsätzlich nach dem gleichen Prinzip, das Sie auch aus anderen Bereichen Film, Video oder auch GIF-Animationen kennen: Einzelbilder werden in einem bestimmten Zeitintervall nacheinander abgespielt und erzeugen so den Eindruck von Bewegung. Diese Einzelbilder nennt man auch Frames. In Flash haben Sie zwei Möglichkeiten, eine solche Animation zu realisieren: 1. Sie erzeugen die Animation nach dem Daumenkino- oder Stop-Motion-Prinzip, d. h. Sie zeichnen jedes Frame von Hand. Auf dieselbe Weise werden auch Zeichentrickfilme bis heute produziert. Dies ist für komplexe Animationen wie etwa die Bewegung einer Figur auch die einzige Möglichkeit. 2. Sie erzeugen nur den Anfangs- und Endzustand einer Animation und lassen Flash die einzelnen Zwischenschritte automatisch berechnen. Dieses Vorgehen nennt man Tweening (v. engl. between, dazwischen), und es ist die am weitaus häufigsten verwendete Methode in Flash. Allerdings lassen sich damit nur relativ gleichförmige Bewegungen erzeugen Die Zeitleiste Animationen erzeugen Sie in Flash in der Zeitleiste. Dort werden für jede Ebene separat die einzelnen Frames Ihrer Animationen dargestellt. Darüber befindet sich die Frame-Nummerierung. Ein Flash- Film kann nahezu beliebig viele unabhängige Animationen enthalten, die Sie auf verschiedenen Ebenen platzieren können.

15 Grundlagen der Animation 95 Abb. 83: Die Zeitleiste mit zwei Ebenen. Auf jeder Ebene kann eine unabhängige Animation stattfinden Einstellen der Bildrate Bevor Sie Animationen in Flash erstellen, müssen Sie definieren, mit welcher Geschwindigkeit diese abgespielt werden sollen. Diese Einstellung ist global und gilt für sämtliche Animationen eines Flash-Dokuments! Sie nehmen sie im Eigenschaftsinspektor der Bühne vor: Klicken Sie mit dem Auswahlwerkzeug auf einen freien Bereich der Bühne. Der Eigenschaftsinspektor zeigt nun die Bühneneigenschaften an. Dort können Sie unter Eigenschaften die Bildrate Ihres Films bestimmen. Abb. 84: Einstellen der Bildrate eines Films im Eigenschaftsinspektor der Bühne. Die Bildrate wird in BpS (Bilder pro Sekunde) oder englisch fps (frames per second) gemessen. Je höher der Wert, desto flüssiger, aber auch schneller laufen die Animationen. Bei niedrigen Werten läuft Ihr Film langsamer und ruckeliger ab. Sinnvolle Werte liegen zwischen 12 und 25 bps. 25 BpS (Standardeinstellung) entsprechen der Bildwiederholrate der europäischen Fernsehnorm PAL. 12 BpS gelten als Untergrenze dessen, was das menschliche Auge noch als flüssige Bewegung wahrnimmt. Höhere Bildraten erhöhen gleichzeitig die Leistungsanforderungen Ihres Films! f

16 96 Animationen 9.2 Stop-Motion-Animationen Bei einer Stop-Motion-Animation zeichnen Sie jedes Einzelbild von Hand. Die Schwierigkeit dabei ist zu entscheiden, wie groß die Veränderungen zwischen den einzelnen Frames sein müssen. Soll z. B. eine Figur den Kopf drehen, so könnten Sie diese Bewegung sowohl mit zwei als auch mit zwanzig Einzelbildern realisieren. Im ersten Fall wäre das Resultat eine ruckartige, im zweiten eine sehr geschmeidige, langsame Bewegung. Die Einzelbilder einer Stop-Motion-Animation können Sie sowohl mit den Zeichenwerkzeugen von Flash als auch in einem externen Programm wie Photoshop auf Pixelbasis erstellen. Die Skizzen dafür können Sie auch von Hand z. B. auf Transparentfolie zeichnen und anschließend einscannen. Die Einzelbilder im folgenden Beispiel sind auf dem letztgenannten Weg entstanden. Zum Importieren der einzelnen Frames einer Animation stellt Flash einige Hilfsmittel zur Verfügung. Übung Erstellen Sie ein neues Flash-Dokument mit einer Bildrate von 12 bps. 2. Wählen Sie im Menü Datei Importieren In Bühne importieren und gehen Sie zum Ordner henker. Darin befinden sich 8 durchnummerierte Dateien. 3. Wählen Sie lediglich die erste dieser Dateien aus (henker_1.jpg) und klicken Sie auf Importieren. Flash präsentiert Ihnen folgenden Dialog: Abb. 85: Der Dialog zum Import einer Animation 4. Klicken Sie auf Ja. Flash erkennt anhand der Nummerierung im Dateinamen, dass es sich um Einzelbilder einer Animation handelt. Es spielt dabei keine Rolle, wie die Dateinamen durchnummeriert sind (henker_1.jpg, henker_2.jpg oder 01_henker.jpg, 02_henker.jpg oder auch nur 01.jpg, 02.jpg ). Es muss sich lediglich um eine einheitliche Nummerierung handeln. Flash erzeugt nun in der Zeitleiste für jedes Einzelbild der Animation ein neues Schlüsselbild (engl. Keyframe). Schlüsselbilder sind spezielle Frames einer Animation, an denen eine Änderung des Bühneninhalts möglich ist. In unserem Beispiel wurde in jedem Schlüsselbild eine der acht Dateien auf der Bühne platziert.

17 Stop-Motion-Animationen 97 Abb. 86: Die Schlüsselbilder der Animation in der Zeitleiste 5. Klicken Sie die einzelnen Keyframes nacheinander an. Sie sehen, dass sich auf der Bühne jedesmal ein anderes Bild befindet. Zum Navigieren in der Zeitleiste dient in der Flash-Entwicklungsumgebung der rote Abspielkopf. Er zeigt an, welcher Zeitpunkt der Animation gerade auf der Bühne zu sehen ist. 6. Testen Sie die Animation mit ±r (Windows) bzw. c±r (Mac). Wie Sie sehen, werden Animationen in Flash standardmäßig in einer Endlosschleife (Loop) abgespielt, ein Umstand, den wir uns noch häufig zunutze machen werden. Allerdings hat unsere Animation noch einen Fehler: Sie läuft rückwärts. Offensichtlich wurden die Dateien falsch durchnummeriert. Dieses Problem lässt sich in Flash schnell beheben: 7. Klicken Sie in der Zeitleiste auf eine freie Stelle rechts neben der Animation, um sicherzustellen, dass kein Keyframe ausgewählt ist. 8. Klicken Sie dann auf das letzte Keyframe der Animation und lassen Sie die Maustaste nicht mehr los. Ziehen Sie nun die Maus mit gedrückter Maustaste nach links, um alle Keyframes auszuwählen. Wenn Sie in der Zeitleiste mehrere Keyframes auswählen möchten, darf kein Keyframe bereits vorher ausgewählt sein. Ansonsten würden Sie das ausgewählte Keyframe verschieben! 9. Klicken Sie nun mit der rechten Maustaste auf eines der ausgewählten Keyframes und wählen Sie im Kontextmenü Bilder umkehren. 10. Testen Sie den Film erneut. Die Animation sollte nun korrekt abgespielt werden. 11. Stellen Sie nun noch die Bühnenfarbe auf Schwarz. 12. Testen Sie verschiedene Bildraten: 12 bps, 15 bps, 25 bps 13. Speichern Sie die Datei mit 12 bps als henker.fla.

18 98 Animationen f Besonderheiten im Überblick: Durchnummerierte Dateien einer Bildsequenz importieren Sie mit Datei Importieren In Bühne importieren. Wählen Sie dort nur die erste Datei aus. Mehrere Schlüsselbilder auswählen: Klicken Sie auf ein nicht ausgewähltes Schlüsselbild und lassen Sie die Maustaste nicht mehr los. Ziehen Sie dann über die Schlüsselbilder. Animation umkehren: Klicken Sie mit der rechten Maustaste auf ausgewählte Keyframes und wählen Sie im Kontextmenü Bilder umkehren. 9.3 Schlüsselbilder und Füllbilder Wie wir gesehen haben, ist der Inhalt der Bühne relativ, sobald wir mit Schlüsselbildern arbeiten. In verschiedenen Schlüsselbildern können auf einer Ebene vollkommen verschiedene Objekte sichtbar sein. Um also zu einem bestimmten Zeitpunkt Darsteller auf der Bühne zu platzieren oder zu ändern, benötigen Sie Schlüsselbilder. Wenn Sie eine neue Flash-Datei anlegen, ist das erste Schlüsselbild bereits vorhanden. Dort können Sie Darsteller platzieren: Abb. 87: Das erste Schlüsselbild in einer neuen Datei Beim Anlegen einer neuen Datei ist die Bühne noch leer. Deshalb zeigt Flash hier ein leeres Schlüsselbild, erkennbar an dem kleinen Kreis. Sobald Sie auf dieser Ebene ein Objekt auf der Bühne platzieren, wird der Kreis zu einem schwarzen Punkt: Abb. 88: Der schwarze Punkt im Schlüsselbild zeigt an, dass sich hier Objekte auf der Bühne befinden. Nun wollen wir unserer Animation noch etwas Text hinzufügen:

19 Schlüsselbilder und Füllbilder 99 Übung Erstellen Sie in der Datei henker.fla eine zweite Ebene über der Animation und markieren Sie dort das erste Schlüsselbild. 2. Wechseln Sie in das Textwerkzeug und schreiben Sie beliebigen statischen Text. Die hier verwendete Schrift ist Lucida Blackletter 60 pt. Zentrieren Sie den Text mit der Ausrichten- Palette horizontal auf der Bühne. 3. Testen Sie den Film mit ±r (Windows) bzw. c±r (Mac). Wie Sie sehen, hat Flash in Ebene 2 automatisch dafür gesorgt, dass der Text über die gesamte Animation hinweg sichtbar ist. Dafür sind jedoch keine Schlüsselbilder nötig, da sich der Text ja nicht ändern soll, sondern es wurden sogenannte Füllbilder verwendet. Füllbilder dienen dazu, die Sichtbarkeit des vorangehenden Keyframes über die Zeitleiste hinweg auszudehnen. An Füllbildern sind keine Änderungen der Animation möglich! Füllbilder werden in der deutschen Version von Flash schlicht als Bilder bezeichnet, eine etwas unglückliche Übersetzung der englischen Frames. Sie werden in der Zeitleiste als graue Flächen dargestellt. Das letzte Füllbild einer Sequenz enthält zusätzlich ein kleines Rechteck. Damit haben wir nun alle Bild-Arten kennengelernt, die in der Zeitleiste von Flash möglich sind:

20 100 Animationen Abb. 89: V. l. n. r.: Schlüsselbild mit Inhalt, leeres Schlüsselbild, Füllbild, letztes Füllbild Mehrere Bilder bearbeiten Momentan klebt die Animation des Henkers noch zu stark am Text. Deshalb soll sie etwas nach oben verschoben werden: 4. Klicken Sie auf das erste Keyframe in Ebene 1 oder bewegen Sie den Abspielkopf an den Beginn der Animation. 5. Markieren Sie mit dem Auswahlwerkzeug die erste Henker-Grafik auf der Bühne und bewegen Sie sie etwas nach oben. 6. Testen Sie den Film. Sie sehen, dass die Animation jetzt»springt«, da wir nur das erste Bild verschoben haben. Auf diese Weise alle Bilder zu verschieben, wäre schwierig und umständlich. Machen Sie deshalb diesen Schritt rückgängig! 7. Klicken Sie stattdessen unterhalb der Zeitleiste auf die unscheinbare Schaltfläche Mehrere Bilder bearbeiten, zu erkennen an der Darstellung zweier winziger, überlappender Keyframes. Abb. 90: Die Schaltfläche»Mehrere Bilder bearbeiten«8. Über der Zeitleiste werden nun, wie in Abb. 90 zu erkennen, zwei»klammern«mit runden Anfassern eingeblendet. Ziehen Sie diese Klammern mit der Maus so weit auf, dass sie wie in der Abbildung gezeigt die gesamte Animation einschließen. 9. Ziehen Sie nun auf der Bühne einen Auswahlrahmen um die Henker-Grafik. Dadurch werden die Bilder in allen Frames ausgewählt.

21 Schlüsselbilder und Füllbilder Bewegen Sie den Henker erneut nach oben. 11. Testen Sie den Film. Diesmal wurden alle Bilder gleichmäßig verschoben. Die Animation springt jetzt nicht mehr. 12. Deaktivieren Sie zum Schluss die Option Mehrere Bilder bearbeiten wieder. Falls Sie auch den Text verschieben möchten, ist die Option Mehrere Bilder bearbeiten nicht notwendig, da zur Anzeige des Textes keine Schlüsselbilder, sondern lediglich Füllbilder verwendet werden. Es reicht, wenn Sie vor dem Verschieben das erste Schlüsselbild auswählen. Die Änderungen in einem Schlüsselbild wirken sich auf alle folgenden Füllbilder aus! f Die Zwiebelschalenfunktion Auch die anderen Optionen unterhalb der Zeitleiste können Ihnen bei der Arbeit mit Stop-Motion-Animationen behilflich sein: Mit der Zwiebelschalenfunktion haben Sie die Möglichkeit, mehrere Frames gleichzeitig auf der Bühne anzuzeigen, um sie leichter positionieren und bearbeiten zu können. Das Bild, in dem sich der Abspielkopf befindet, wird in der Originalfarbe dargestellt, während die umgebenden Bilder abgeblendet erscheinen, so dass sie wie auf durchscheinendem Pauspapier gezeichnet aussehen. Dadurch erkennen Sie den Animationsweg, den das Objekt zurücklegt. Die abgeblendeten Bilder können nicht bearbeitet werden.

22 102 Animationen Abb. 91: Optionen der Zwiebelschalenfunktion (v. l. n. r.): Aktivieren/deaktivieren des Zwiebelschaleneffekts, umschalten der Konturansicht, mehrere Bilder bearbeiten (s. o.), erweiterte Optionen. f Ebenen dürfen nicht gesperrt sein, wenn Sie die Zwiebelschalenfunktion nutzen wollen. 9.4 Tweening-Animationen Tweening-Animationen sind die weitaus häufigere und auch einfachere Animationsart in Flash. Beim Tweening erstellen sie lediglich den Anfangs- und den Endzustand Ihrer Animation und lassen Flash die benötigten Zwischenschritte automatisch berechnen. Man unterscheidet zwei Arten des Tweenings: Form-Tweening und Bewegungs-Tweening. Trotz der etwas irreführenden Bezeichnungen können Sie mit beiden Tweening-Arten Objekte bewegen! Der Unterschied liegt vielmehr darin, welche Art von Objekten sie animieren möchten. Abhängig von der Art des Objekts sind Sie auf eine der beiden Tweening-Arten beschränkt: Form-Tweening können Sie nur auf offene,»gerasterte«vektorformen und Objektzeichnungen anwenden, Bewegungs-Tweening nur auf Symbolinstanzen. Allerdings können Sie jedes beliebige Objekt in ein Symbol konvertieren. Hier ein Überblick, für welche Objekte Sie welches Tweening verwenden können: Objektart Form-Tweening Bewegungs-Tweening Offene Vektorformen Objektzeichnungen, Rechteck- und Ellipsengrundformen Gruppierte Objekte Pixelbilder nur, wenn sie zuvor geteilt wurden Symbolinstanzen

23 Tweening-Animationen Form-Tweening Wenn Sie offene (nicht gruppierte) Vektorformen animieren möchten, können Sie das Form-Tweening wählen. Übung Erstellen Sie einen neuen Flash-Film mit einer Bildrate von 12 bps. 2. Zeichnen Sie im linken Bereich der Bühne einen beliebigen Kreis ohne Kontur. Dies ist die Anfangsposition Ihrer Animation. Im ersten Frame der Ebene 1 wird nun ein gefülltes Schlüsselbild dargestellt. Die gesamte Animationsdauer soll eine Sekunde betragen. Bei einer Bildrate von 12 bps benötigen Sie also 12 Frames. 3. Klicken Sie mit der Maus in der Zeitleiste auf Frame 12, um es zu markieren, und wählen Sie im Menü Einfügen Zeitleiste Schlüsselbild oder drücken Sie die Taste. Automatisch wird in Frame 12 ein Schlüsselbild eingefügt und die Frames 2 11 werden mit Füllbildern belegt, sodass der Kreis die ganze Zeit über sichtbar ist.

24 104 Animationen Der Befehl Schlüsselbild einfügen bewirkt, dass der Inhalt der Bühne (der Kreis) von Frame 1 nach Frame 12 kopiert wird. Dort definieren Sie nun den Endzustand Ihrer Animation. 4. Wählen Sie mit der Maus das Schlüsselbild in Frame 12 aus und verschieben Sie den Kreis auf der Bühne nach rechts. Achten Sie darauf, dass Sie diese Aktion tatsächlich in Frame 12 ausführen! 5. Bewegen Sie mit der Maus den Abspielkopf über alle Frames hinweg. Von Frame 1 bis Frame 11 bewegt sich der Kreis nicht von der Stelle. Nur in Frame 12 ändert er plötzlich seine Position. Diese Positionsänderung wurde durch das Schlüsselbild in Frame 12 ermöglicht. Die Vorbereitungen sind erledigt, nun fehlt nur noch die Animation. 6. Markieren Sie Frame 1 und wählen Sie dann im Menü Einfügen Form-Tween. Alternativ dazu können Sie auch mit der rechten Maustaste auf das Frame klicken und den entsprechenden Befehl im Kontextmenü auswählen. Die Füllbilder in der Zeitleiste werden nun grün unterlegt und ein Pfeil verbindet Frame 1 mit Frame 12. Fertig! Befindet sich ein Fehler in der Animation, wird anstelle des Pfeils eine gestrichelte Linie dargestellt. In diesem Fall funktioniert die Animation nicht. f Erstellen Sie ein Tweening immer im Anfangsframe einer Animation, niemals im Endframe! 7. Testen Sie den Film. Der Kreis sollte sich nun von links nach rechts über die Bühne bewegen. Flash-Filme werden im Loop abgespielt. Daher springt der Kreis am Ende der Animation wieder zurück zum Anfang. Leider sind in Flash zumindest ohne ActionScript keine Palindrome (alternierende Animationen vor und zurück) möglich, deshalb müssen wir die Animation von Hand erweitern:

25 Tweening-Animationen Markieren Sie in der Zeitleiste Frame 24 und erstellen Sie ein leeres Schlüsselbild über das Menü Einfügen Zeitleiste Leeres Schlüsselbild oder drücken Sie die Taste. Dadurch wird der Kreis nicht aus dem vorangehenden Schlüsselbild 12 kopiert, sondern der Bühneninhalt wird an dieser Stelle gelöscht. Natürlich hätten wir auch mit ein Schlüsselbild erzeugen können, das den Kreis von Frame 12 nach Frame 24 kopiert. Dann hätten wir ihn aber von Hand an exakt dieselbe Stelle verschieben müssen, an der er in Frame 1 steht. Besser ist die folgende Methode: 9. Markieren Sie in der Zeitleiste Frame 1 und wählen Sie im Menü Bearbeiten Kopieren oder drücken Sie ±C bzw. c±c. 10. Markieren Sie nun das leere Schlüsselbild in Frame 24 und wählen Sie im Menü Bearbeiten An Position einfügen oder drücken Sie ±s±v bzw. c±s±v. Damit stellen Sie sicher, dass der Kreis in Frame 24 an exakt derselben Stelle wie in Frame 1 steht. 11. Markieren Sie zum Schluss Frame 12 und erzeugen Sie dort ein zweites Form-Tweening. 12. Testen Sie den Film. Der Kreis bewegt sich nun in einer Endlosschleife auf der Bühne vor und zurück.

26 106 Animationen f Besonderheiten im Überblick: Schlüsselbild einfügen: Leeres Schlüsselbild einfügen: Tweening erstellen: Erstes Frame der Animation auswählen, dann im Menü Einfügen gewünschtes Tweening auswählen. Form-Tweening können Sie nur auf offene (nicht gruppierte) Vektorformen anwenden! Animationsfehler erkennen Sie an einer gestrichelten Linie in der Zeitleiste. Morphing Mit dem Form-Tweening haben Sie die Möglichkeit, nicht nur die Position, sondern auch die Form und sogar die Farbe des Objekts im Verlauf der Animation zu ändern. Man spricht bei einer solchen Formänderung auch von Morphing (v. gr. morphé, Gestalt, Form). Je nach Komplexität der Form können die Ergebnisse allerdings unerwartet ausfallen. Verwenden Sie daher eher einfache Formen. Übung Erstellen Sie ein neues Flash-Dokument, Bühnengröße 150 x 150 px, Hintergrundfarbe Weiß. 2. Zeichnen Sie in Schlüsselbild 1 ein blaues Quadrat ohne Kontur. 3. Markieren Sie das Quadrat auf der Bühne. Der Eigenschaftsinspektor zeigt die aktuelle Größe und Position des Objektes an. Ändern Sie die Größe auf 80 x 80 px. 4. Zentrieren Sie das Quadrat auf der Bühne mit Hilfe der Ausrichten-Palette.

27 Tweening-Animationen Setzen Sie in Frame 10 ein leeres Schlüsselbild. Zeichnen Sie dort einen Kreis in derselben Farbe wie das Quadrat. 6. Skalieren Sie den Kreis auf 80 x 80 px und zentrieren Sie ihn ebenfalls auf der Bühne. 7. Erstellen Sie in Frame 1 ein Form-Tweening. 8. Bewegen Sie den Abspielkopf über die Zeitleiste. Die Form des Quadrates wird sukzessive in eine Kreisform verwandelt. Auf welche Weise dies geschieht, entscheidet Flash. 9. Verlängern Sie nun die Animation von 10 auf 20 Frames. Wählen Sie dazu das letzte Schlüsselbild aus, lassen Sie die Maustaste kurz los und verschieben Sie dann das Schlüsselbild in der Zeitleiste nach hinten auf Frame 20.

28 108 Animationen 10. Testen Sie die Animation. Im nächsten Schritt soll sich der Kreis in ein Dreieck verwandeln. Der neue Animationsabschnitt soll ebenfalls 20 Frames dauern. 11. Setzen Sie in Frame 40 ein leeres Schlüsselbild. 12. Markieren Sie das Quadrat in Schlüsselbild 1 und kopieren Sie es in die Zwischenablage. 13. Markieren Sie Frame 40. Durch das leere Schlüsselbild ist dort die Bühne leer. 14. Wählen Sie im Hauptmenü Bearbeiten An Position einfügen. Das Objekt aus der Zwischenablage wird nun auf genau derselben Position wie in Frame 1 eingefügt. 15. Löschen Sie mit dem Unterauswahlwerkzeug einen Ankerpunkt des Quadrats.

29 Tweening-Animationen Verschieben Sie den verbleibenden Ankerpunkt in die Mitte. 17. Erstellen Sie in Frame 20 ein Form-Tweening und testen Sie den Film. Sie können bestehende Tweening-Animationen jederzeit nachbearbeiten und ändern. Auf diese Weise wollen wir nun noch eine Farbänderung hinzufügen: 18. Füllen Sie das Quadrat in Frame 1 mit Orange. 19. Gehen Sie zu Frame 40 und färben Sie dort das Dreieck gelb. 20. Testen Sie den Film. Auch die Farben werden nun im Verlauf der Animation angeglichen. Auf dieselbe Weise können Sie nun noch weitere Änderungen hinzufügen, indem Sie z. B. eines der drei Objekte verschieben: Auch diese Positionsänderung wird sofort animiert. Optionen für Form-Tweening Im Eigenschaftsinspektor stehen Ihnen noch einige zusätzliche Tweening-Optionen zur Verfügung: Mit Beschleunigung können Sie die Animationsgeschwindigkeit anpassen, indem Sie sie am Anfang allmählich beschleunigen oder am Ende abbremsen. Diese nonlineare Bewegung lässt manche Animationen realistischer erscheinen. Wählen Sie im Drop-down-Menü Mischen die Option Verteilt, um die Formen in den Zwischenbildern weicher und unregelmäßiger darzustellen. Wählen Sie Winkelförmig, um die getweenten Formen mit allen Ecken und geraden Linien darzustellen, die durch das Tweenen entstehen können. Diese Einstellung eignet sich nur für das Tweenen von Formen, die spitze Ecken und gerade Linien aufweisen. Wenn die gewählten Formen keine Ecken aufweisen, führt Flash automatisch ein verteiltes Form-Tweening durch.

30 110 Animationen Form-Tweening mit Formmarken optimieren Bisher war es dem Flash-Player überlassen, die einzelnen Animationsschritte des Form-Tweenings zu berechnen. Mit Hilfe von Formmarken können Sie diesen Prozess ein wenig beeinflussen. Mit Formmarken definieren Sie an einem Objekt Bezugspunkte, die während des Morphings ihre Position nicht ändern. Dadurch vermeiden Sie unbeabsichtigte Drehungen oder Verzerrungen. In der letzten Übung fand während der Animation eine zusätzliche Drehbewegung statt. Diese wollen wir nun verhindern. 21. Wählen Sie im ersten Schlüsselbild das Quadrat aus. Wählen Sie im Menü Modifizieren Form Formmarke hinzufügen. Dem Quadrat wird ein rotes Kreissymbol mit dem Buchstaben a hinzugefügt. 22. Verschieben Sie die Marke an die gewünschte Feststellposition. 23. Dieselbe Marke a erscheint auch in Schlüsselbild 20. Positionieren Sie auch dort die Marke an der korrespondierenden Stelle. 24. Testen Sie den Film. Eine einzige Formmarke bringt noch nicht das gewünschte Ergebnis. 25. Fügen Sie in Schlüsselbild 1 weitere Formmarken hinzu und positionieren Sie diese an»neuralgischen Stellen«. Passen Sie ihre Position auch in Schlüsselbild 20 an.

31 Tweening-Animationen Nun folgt die Verwandlung des Kreises in ein Dreieck. Gehen Sie analog der letzten Schritte vor: Erzeugen Sie in Frame 20 drei neue Marken und passen Sie diese auch in Frame 40 an. Optimieren Sie dadurch den Morphing-Effekt. Pro Ebene können Sie maximal 26 Formmarken (a z) setzen. Häufige Fehler beim Form-Tweening Als Indikator für eine funktionierende Tween-Animation dient der durchgezogene Pfeil in der Zeitleiste. Liegt ein Fehler vor, wird dies durch eine gestrichelte Linie angezeigt. Ein häufiger Grund für einen solchen Fehler ist, dass eines der beiden Schlüsselbilder keine offene Form enthält, sondern z. B. eine Gruppe. Überprüfen Sie also als erstes die Eigenschaften der Objekte, die Sie animieren möchten. Ein weiterer Fehler tritt auf, wenn sich auf einer Ebene mehrere Objekte befinden. Sie können pro Ebene immer nur ein Objekt zur gleichen Zeit animieren. Verteilen Sie also die Objekte auf mehrere Ebenen. Ein Warnhinweis im Eigenschaften-Inspektor (gelbes Dreieck) macht Sie darauf aufmerksam. Besonderheiten im Überblick: Hier noch einmal die wichtigsten Schritte für die Arbeit mit Tweenings: f Schlüsselbild einfügen Leeres Schlüsselbild einfügen Schlüsselbild löschen s± Füllbild einfügen Füllbild löschen s± Schlüsselbild verschieben: Schlüsselbild auswählen, Maustaste loslassen, dann ausgewähltes Schlüsselbild in der Zeitleiste verschieben. Mehrere Schlüsselbilder auswählen: Auf ein nicht ausgewähltes Schlüsselbild klicken, Maustaste nicht mehr loslassen und über die Schlüsselbilder ziehen. Tweening erstellen: Erstes Frame der Animation auswählen, dann im Menü Einfügen gewünschtes Tweening auswählen. Ob Sie den Animationstyp Bewegungs- oder Form-Tweening wählen, hängt allein davon ab, welche Eigenschaften das Objekt, das Sie animieren, aufweist. Offene Formen (gerasterte Darstellung) erfordern ein Form-Tweening. Das Bewegungs-Tweening kann für alle Objekte gewählt werden, sofern diese zuvor in ein Symbol konvertiert wurden.

32 182 Index Index Bedienfelder Siehe Paletten Begrüßungsbildschirm 14 Bewegungspfad 112, 114 bearbeiten 117 zeichnen 118 Bézierkurven 50 Bibliothek 77 externe 80 verwalten 80 Bilder (Frames) Siehe Füllbilder Bildrate 95 Boole sche Operationen 32 verhindern 35 bps Siehe Bildrate Bühne 16 Eigenschaften 18 Compiler-Fehler (Fenster) 164 Dynamischer Text 66 Ebenen 59 Eigenschaften 60 ECMAScript 161 Eigenschaftsinspektor 16 Eingabetext 66 Einstellungen für Veröffentlichungen Siehe Veröffentlichen Ellipsengrundform (Werkzeug) 26 Ellipsenwerkzeug 26 Ereignisse 163, 165 Maus 171 Event-Listener 167 3D-Werkzeuge 152 Fluchtpunkt 153 Perspektive 153 a (Bildbezeichnung) 164 Abspielkopf 97 ActionScript 15, 136, 161 Siehe auch Aktionen Aktionen 161 Bedienfeld 17, 162 Animationen 94 Siehe auch Tweening Ankerpunkte 50 Eckpunkte 51 einfügen 53 Kurvenpunkte 51 löschen 53 Ankerpunkt-umwandeln-Werkzeug 51 Anti-Aliasing (Text) 67 Arbeitsbereich 16 speichern 17 Audio 126 Abtastrate 132 Bitrate 132 Eigenschaften 130 importieren 126 Optionen 130 synchronisieren 128 Ausrichten (Menü) 55, 56 Ausrichten (Palette) 56 Auswählen von Objekten 23 Farbeimer 25 Farbe (Palette) 39 Farbfelder löschen 38 Palette 38 speichern 38 Farbverläufe Siehe Verläufe Farbwähler 22, 23, 25, 36, 37 Filter 152 FLA 20 Formmarken 110 fps Siehe Bildrate Framerate Siehe Bildrate Frames Siehe Füllbilder Freihandwerkzeug 29 Frei transformieren 43 Füllbilder 99 Füllfarbe 23 Funktion 167, 168 Grafik-Symbol 86, 91 Gruppieren 31 Hilfslinien 55 Hyperlinks 69 Importieren 74 AI 76 Bildsequenzen 96, 148 GIF 75 in Bibliothek 77 in Bühne 74 PSD 75 Info-Palette 57

33 Index 183 Instanzen 87 Effekte 150 Instanzname 166 Keyframes Siehe Schlüsselbilder Kommentare 171 Kompression Audio 131 Pixelbilder 79 Konturfarbe 23 Pinsel 29 Optionen 29 Pinselart 29 Wasserhahn 31 Polygon-Lasso 81 Polysternwerkzeug 26 Radiergummi 31 Modus 31 Raster 55 Rechteckgrundform (Werkzeug) 26 Rechteckwerkzeug 22 Tracing Siehe Nachzeichnen Transformieren 45, 48 Siehe auch Frei transformieren Palette 45 Tweening 102 bearbeiten 117 Bewegung 112 Form 103 Optionen 117 Unterauswahlwerkzeug 49, 50 Lasso 30, 81 Linienwerkzeug 26 Maskenebenen 121 Mehrere Bilder bearbeiten 100 Methoden 164 Montagefläche 16 Morphing 106 Movieclip 147 MP3 132 Nachzeichnen 82 Neues Dokument 15 Schaltflächen-Symbol 154, 165 deaktivieren 179 Zustände 154, 155, 158 Schlüsselbilder 96, 98 Sound Siehe Audio Statischer Text 66 Stiftwerkzeug 49, 52 Symbole 84 animieren 144 austauschen 169 Bearbeitungsmodus 87, 91 erzeugen 85, 90, 147 Registrationspunkt 85, 89 Typen 84 Szenen 175 Variablen 168 Vektorgrafiken 49 Verläufe 40 transformieren 40 Veröffentlichen 133 HTML 138 SWF 135 Versionserkennung 139 Verzerrungshülle 44 Werkzeugpalette 16, 17, 21 Objektzeichnung 24, 159 Paletten 16 Anordnung 17 Palindrom 104 Tangenten 51 Teilen 32, 72, 81, 90 Textformatierung 67 Textrahmen 66 mit fester Breite 66 mit variabler Breite 66 umschalten 67 Textwerkzeug 65 Tintenfass 25 Zauberstab 81 Siehe auch Lasso Zeichnungsausrichtung 55 Zeitleiste 16, 94 Zoomwerkzeug 19 Zwiebelschalenfunktion 101