Erstellen Sie animierte Layouts

Seit dem Start von InDesign hat Adobe hart daran gearbeitet, es zur ersten Wahl beim Entwerfen für den Druck zu machen. Die kreative Welt hat sich seitdem jedoch in beispiellosem Tempo weiterentwickelt, und wie viele von uns festgestellt haben, geben Kunden häufig Arbeiten für den Bildschirm und nicht für den Druck in Auftrag.

Adobe hat jedoch noch kein Nickerchen gemacht und mit CS5 eine Vielzahl von Tools zum Hinzufügen von Rich Media zu Ihren Layouts eingeführt, die sowohl in Flash als auch in PDF exportiert werden können. Der wahre Vorteil ist, dass der Workflow für jeden InDesign-Veteranen intuitiv ist und selbst Neulinge die Tools schnell in den Griff bekommen können.

In diesem Tutorial werden die Grundlagen zum Animieren von Objekten, Erstellen von Schaltflächen und Auslösen einer Aktion erläutert. Wir werden nur die Oberfläche der Möglichkeiten dieser neuen Tools zerkratzen, aber sobald Sie die Grundlagen haben, können Sie alle Optionen erkunden.



Klicken Sie hier, um die Support-Dateien herunterzuladen (3,85 MB)

Interaktive Arbeitsbereichmenüs

Laden Sie die Snapchat-Geofilter-Vorlage für Adobe Photoshop herunter
Interaktiver Arbeitsbereich

01 Eine der handlichsten Funktionen von InDesign CS5 ist die Möglichkeit, Ihren Arbeitsbereich schnell zu ändern. Wir werden hauptsächlich die Suite interaktiver Tools verwenden. Gehen Sie also zu Fenster> Arbeitsbereich> [Interaktiv], kehren Sie zum selben Menü zurück und klicken Sie auf Interaktiv zurücksetzen. Dadurch wird der Arbeitsbereich auf die ursprünglichen Standardeinstellungen zurückgesetzt, sodass keine zusätzlichen Menüs geöffnet sind, die Sie ablenken könnten.

Bewegungsgrafik Überschrift,

Überschrift der Bewegungsgrafiken

02 Öffnen Sie shakespeare.indd im Shakespeare_Folder in den Support-Dateien. Beginnen wir, indem wir dem Überschriftentext zunächst etwas Bewegung hinzufügen. Wählen Sie den gruppierten Text 'Shakespeares Sonette' aus und öffnen Sie das Animationsfenster. Wenn Sie sich das Feld Name ansehen, werden Sie feststellen, dass InDesign es automatisch als 'Gruppe' bezeichnet hat. Es ist ratsam, sich daran zu gewöhnen, Ihre Elemente zu benennen, da sonst die Dinge sehr verwirrend werden können, insbesondere wenn Sie viele verschiedene Elemente verwalten müssen. Geben Sie den Namen 'Überschrift' ein.

Voreingestellte Animationsüberschriften

Voreingestellte Animation

03 Klicken Sie auf das Menü 'Voreinstellung', um die von Adobe bereitgestellten voreingestellten Animationen anzuzeigen. Sobald Sie Erfahrung mit diesen haben, können Sie Ihre eigenen erstellen, aber jetzt wählen wir 'Von links einfliegen'. Überprüfen Sie, ob Event (s) auf On Page Load eingestellt ist. InDesign wählt dies automatisch aus, was verwirrend sein kann, aber in diesem Fall ist es das, was wir wollen. Belassen Sie die restlichen Einstellungen auf ihren Standardeinstellungen.

Vorschau des Bewegungspfads der Animation ausführen

Bewegungspfad

04 Beachten Sie, dass jetzt eine grüne Linie an das Objekt angehängt ist. Dies ist der Bewegungspfad und zeigt die Richtung an, der die Animation folgen wird. Zum Glück müssen Sie die Datei nicht jedes Mal exportieren, wenn Sie Ihre Animationen überprüfen möchten. Öffnen Sie das Vorschaufenster und Sie sehen eine kleine Vorschau Ihrer Datei. Um die Animation auszuführen, drücken Sie auf das Symbol Dreieck abspielen in der unteren linken Ecke des Vorschaufensters. Sie sollten sehen, wie der Text von links eingezogen wird. Das Standard-Vorschaufenster ist sehr klein. Nehmen Sie also die untere linke Ecke und ziehen Sie sie heraus, um ein Fenster mit angemessener Größe zu erhalten.

Trigger Button Animation

Animation auslösen

05 Jetzt erstellen wir eine weitere Animation und erstellen eine Schaltfläche, um sie auszulösen. Wählen Sie den Textrahmen mit dem Sonett aus und öffnen Sie das Animationsfenster. Überprüfen Sie, ob der Name 'Sonnet XIX' lautet, und wählen Sie im Menü 'Voreinstellung' die Option 'Einblenden'. Deaktivieren Sie die Option Beim Laden der Seite, indem Sie im Menü Ereignis (e) darauf klicken. Diesmal erstellen wir unseren eigenen Trigger. Reduzieren Sie dann die Dauer auf 0,75 Sekunden.

Verdecktes Objekt zum Hintern

Verdeckter Hintern

06 Wählen Sie anschließend mit dem Auswahlwerkzeug (schwarzer Pfeil) das Kreissymbol mit der Nummer XIX aus. Dies wird unser Knopf sein. Öffnen Sie das Schaltflächenbedienfeld und klicken Sie unten auf das Symbol 'Objekt in eine Schaltfläche konvertieren'. Sie sehen, dass der Status [Normal] mit dem Symbol geladen wird. Klicken Sie auf [Rollover], um einen zweiten Status zu erstellen.

Überschlag und Normalzustand

Rollover Normal

07 Wir möchten, dass der Leser zwischen den beiden Zuständen unterscheiden kann, und InDesign hätte dies nicht einfacher machen können. Wenn der Status [Rollover] noch markiert ist, ändern Sie die Deckkraft der Schaltfläche auf 100%. Wenn Sie zwischen den beiden Status klicken, sollte nun eine Schaltfläche angezeigt werden, die die Deckkraft beim Rollover ändert. Sehen Sie sich das Vorschaufenster an, um eine bessere Vorstellung davon zu erhalten, wie dies beim Export aussehen wird.

Rollover Event Web Design

Rollover-Ereignis

08 Jetzt, wo wir unseren Knopf haben, müssen wir ihm etwas zu tun geben. Zurück im Menü Schaltflächen, unter dem Feld Name, sehen Sie das Menü Ereignis. Dies sind die Instanzen, die ein Ereignis auslösen. Wenn Sie mit dem Entwerfen für das Web vertraut sind, erkennen Sie die verschiedenen Optionen. Wählen Sie On Roll Over und klicken Sie auf das kleine Plus-Symbol darunter, um das Menü Aktionen anzuzeigen.

Reverse On Roll Off Export Flash

Rückwärts beim Abrollen

09 Dieses Menü ist in drei Kategorien unterteilt. Einige der Aktionen werden nur nach Flash exportiert, andere nur nach PDF und andere nach beiden. In diesem Fall exportieren wir nach Flash. Wählen Sie also Animation aus. Wählen Sie im angezeigten Dropdown-Menü 'Animation' die von uns erstellte Sonnet XIX-Animation aus und lassen Sie 'Wiedergabe' als Option. Aktivieren Sie das Kontrollkästchen 'Beim Abrollen umkehren'.

Vorschau aller Ebenen

Vorschau

10 Starten Sie nun das Vorschaufenster, um sicherzustellen, dass alle Ihre Animationen korrekt sind. Der Überschriftentext sollte von links einfliegen, die Schaltfläche sollte beim Rollover hervorgehoben werden und das Sonett sollte ein- und ausgeblendet werden, wenn Sie die XIX-Schaltfläche ein- oder ausschalten. Wenn Sie mit allem zufrieden sind, exportieren wir die Datei nach Flash.

In Flash-SWF exportieren

In Flash exportieren

elf Gehen Sie zu Datei> Exportieren. Im angezeigten Dropdown-Menü Format werden zwei Flash-Optionen angezeigt: FLA und SWF. FLA sollte ausgewählt werden, wenn Sie die Dateien an einen Flash-Entwickler übergeben: Es werden alle Animationen ausgegeben, die wir gerade hinzugefügt haben, aber die Dateien könnten zur weiteren Arbeit in Flash importiert werden. Mit der SWF-Option wird eine einzelne Flash-Datei erstellt, die in den meisten Browsern oder im eigenständigen Flash Player abgespielt werden kann. Dies ist die Option, die wir wollen.

html, swf, speichern

HTML generieren und SWF SPEICHERN

12 Klicken Sie auf Speichern, um das Fenster SWF exportieren anzuzeigen. Stellen Sie sicher, dass Exportieren auf Alle Seiten eingestellt ist, und aktivieren Sie die Kontrollkästchen 'HTML-Datei generieren' und 'SWF nach Export anzeigen'. Behalten Sie die restlichen Standardeinstellungen bei, stellen Sie jedoch im Bereich 'Erweitert' sicher, dass 'Text' auf 'Flash Classic' und die Auflösung für die Bildverarbeitung auf 72 ppi eingestellt ist. Klicken Sie auf OK, und Ihr Standardbrowser wird mit der Flash-Datei gestartet, die bereit ist und wartet. Herzlichen Glückwunsch: Sie haben jetzt ein bewegliches Layout erstellt.