Ausgabe von Web-Animationen

SCHRITT 5.

Mit dem Befehl Frames aus Ebenen erstellen aus dem Optionen-Menü des Bedienfeldes Animation im Arbeitsmodus Frame-Animation verwandeln Sie jede der einzelnen Ebenen in einen einzelnen Frame. Damit bekommt allerdings auch die Hintergrundebene einen eigenen Frame, der überhaupt nicht benötigt wird. Entfernen Sie diesen Frame und aktivieren Sie stattdessen die Sichtbarkeit der betreffenden Ebene für jeden der einzelnen Frames der Animation, damit der Hintergrund durchgängig sichtbar ist.SCHRITT 6.

Testen Sie die Animation in Photoshop. Um die Bewegung des Motivs noch flüssiger zu gestalten kann es erforderlich sein, neue Ebenen für zusätzliche Zwischenframes mit Hilfe des Formgitters zu gestalten. Tweening kommt hier leider nicht infrage, denn mit dieser Funktion würden Sie den gewünschten Effekt der Verformung weder in Photoshop noch in Flash Professional erzielen.SCHRITT 7.

Falls Sie nun noch weitere Attribute auf der Zeitleiste verändern möchten oder mehr Kontrolle über den Verlauf der Bewegung benötigen, können Sie jetzt die Frame-Animation in eine zeitleistenbasierte Animation konvertieren.SCHRITT 8.

Ob Sie jetzt im weiteren Verlauf präzise Optimierungen des Tempos vornehmen hängt davon ab, mit welcher Methode Sie Ihr neues Werk für das Web ausgeben.Falls Sie sich nun für das SWF-Format entscheiden sollten, müssen Sie einen Umweg über Flash Professional einschlagen. Denn etwaige Optimierungen des Timings aus Photoshop können beim Import der Ebenen in Flash leider nicht berücksichtigt werden. Das Tempo müssen Sie in Flash vorgeben.

Ausgabe von Web-Animationen

Adobe Photoshop CS5 bietet mehrere Wege zur Ausgabe von Web-Animationen, doch der optimale Workflow erschließt sich dem Animationsdesigner hier nicht von selbst.Zum einen können Sie die gesamte Zeitleiste über die eingebaute Quicktime- Ausgabe in eine Videodatei rendern. Diese Funktion erreichen Sie über den Menüpunkt Datei/Exportieren. Zu den unterstützten Video-Standards zählen neben dem bevorzugten MPEG-4 die Container- Formate AVI, FLC, QuickTime-Movie und DV-Stream.Zum anderen besteht natürlich die Möglichkeit, über die Funktion Datei/Für Web und Geräte speichern aus Photoshop CS5 eine GIF-basierte Animation auszugeben. Photoshop CS5 bietet keine direkte Ausgabe von SWF. Um SWF-Animationen auf Basis von Ebenen zu erzeugen, können Sie am einfachsten die PSD-Animation mit dem Befehl Öffnen aus dem Menü Datei in Flash Professional CS5 einlesen. Windows-Benutzer müssen hierzu im Dateiauswahlfenster statt der Einstellung Alle Formate die Einstellung Alle Dateien aktivieren, um wirklich alle Formate sichtbar zu machen.Im Import-Dialog wählen Sie anschließend die Einstellung Ebenen umwandeln in: Schlüsselbilder und aktivieren gegebenenfalls die Option Ebenen auf ursprünglicher Position platzieren. Lediglich die Hintergrundebene müssen Sie separat mit dem Befehl Importieren/In Bühne importieren/In Bibliothek importieren aus dem Menü Datei einlesen. Eventuelle Anpassungen des Tempos einzelner Frames können erst in Flash Professional vorgenommen werden.

Web-Animationen auf Basis von Ebenen

Adobe Illustrator CS5 bietet Ihnen mehrere verschiedene Möglichkeiten zum Animieren von Formen. Zum einen können Sie einzelne Illustrator-Ebenen in einzelne Frames einer SWF-Animation konvertieren. Zum anderen können Sie mehrere Formen wie etwa Textbuchstaben (nachdem Sie diese in Pfade konvertiert haben) im Warp- Verfahren ineinander verschmelzen lassen. Sehr interessante und eindrucksvolle Effekte lassen sich mit sehr einfachen Mitteln bei vergleichsweise geringem Arbeitsaufwand realisieren, ohne Illustrator zu verlassen. Eine Form in Illustrator basiert auf einem Pfad, dem standardmäßig nur eine einzige Fläche und auch nur eine einzige Kontur zugewiesen sind.Eine Form kann aber auch mehrere Konturen und mehrere Flächen besitzen, obwohl sie immer noch aus einem einzigen Pfad besteht. Es handelt sich hierbei also nicht um eine Gruppe von Objekten, sondern um ein einziges, eigenständiges Objekt mit mehreren Flächen und mehreren Konturen als Attribute der Eigenschaft Aussehen. Den Zugriff auf diese Funktionalität gewährt die Palette Aussehen. Illustrators Unterstützung für mehrere Flächen und Konturen pro Pfad können Sie sich bei der Gestaltung von Web-Animationen wie folgt zunutze machen.

SCHRITT 1.

Zeichnen Sie eine Basisform, zum Beispiel einen Stern. Verleihen Sie dem neuen Objekt die gewünschten Eigenschaften seiner Standardfläche und seiner Standardkontur.

SCHRITT 2.

Zum Anlegen einer zusätzlichen Kontur öffnen Sie das Bedienfeld Aussehen, greifen Sie darin den Eintrag der Standardkontur mit der Maus und ziehen Sie ihn auf das Symbol Ausgewähltes Objekt duplizieren in der unteren Leiste der Palette. Selbstverständlich können Sie die Attribute der beiden Konturen dann aber unabhängig voneinander bearbeiten. Gleiches gilt für die Fläche.

SCHRITT 3.

Wiederholen Sie den zweiten Schritt mehrmals. Verleihen Sie den einzelnen Konturen unterschiedliche Breiten und Farben. Experimentieren Sie mit unterschiedlichen Eigenschaften der Kontur, einschließlich verschiedener Formen (mittels der Palette Kontur), und mit verschiedenen Eigenschaften der Fläche für jeden der einzelnen Einträge im Bedienfeld Aussehen. Die entstehenden Einträge sind nun lediglich Attribute des Aussehens der Form, keine neuen Objekte.

SCHRITT 4.

Mit dem Befehl Aussehen umwandeln aus dem Menü Objekt von Illustrator können Sie jetzt die einzelnen Konturen und Flächen der Form in ganz unabhängige Objekte aufsplitten, von denen jedes von nun an auf einem eigenen Pfad aufsetzt. Diese Objekte sind allerdings noch gruppiert (für den Fall, dass Sie diese auf der Leinwand an eine neue Position verschieben wollten).

SCHRITT 5.

Heben Sie die Gruppierung auf (Befehl Objekt/ Gruppierung aufheben).

SCHRITT 6.

Wählen Sie den Eintrag der Ebene, auf der sich die soeben erstellten Objekte befinden, in der Ebenenpalette aus und rufen Sie den Befehl Ebenen für Objekte erstellen (Sequenz) auf. Illustrator nummeriert die neu erzeugten Ebenen automatisch durch.

SCHRITT 7.

Jetzt können Sie die Illustration bereits exportieren. Wählen Sie hierzu den Exportieren- Befehl aus dem Menü Datei und stellen Sie als Dateityp Flash(*.SWF) ein. Im folgenden Dialogfenster der Exportoptionen wählen Sie aus dem Menü Exportieren als: den Eintrag AI-Ebenen in SWF-Frames aus. Stellen Sie die gewünschte Kompatibilitätsstufe (zum Beispiel "Flash Player 9") ein und passen Sie gegebenenfalls andere Veröffentlichungsoptionen Ihren speziellen Wünschen an. Danach klicken Sie auf die Schaltfläche Erweitert.

SCHRITT 8.

Im Dialog der erweiterten Exportoptionen deaktivieren Sie die Option Angleichungen minimieren und aktivieren Sie, falls gewünscht, die Option Wiederholschleife. Mit einem Klick auf die Schaltfläche Webvorschau können Sie die Einstellungen der resultierenden SWF-Datei vorab in einem Webbrowser testen. Nach dem Export ist die SWF-Animation sofort einsatzbereit.