Erstellen eines ersten Edge Animate-Projekts

Das Erstellen eines neuen Edge Animate-Projekts kann auf zwei Arten erfolgen. Eine Möglichkeit ist, im Begrüßungsbildschirm einfach auf „Neu erstellen“ zu klicken. Dadurch wird ein neues Edge Animate-Projekt mit leerer Bühne erstellt. Die zweite Methode zum Erstellen eines neuen Edge Animate-Projekts verläuft über das Dateimenü. Wenn Sie einfach auf „Datei“ und dann auf „Neu“ klicken, hat das denselben Effekt.

Unabhängig von der Methode wird in Edge Animate nun ein neues Projekt geöffnet. Zunächst umfasst das Projekt keine Elemente, da es nur aus einem einzelnen, leeren Bühnensymbol besteht. Diese Bühne steht für das HTML-Element, das Sie auch in der HTML-Datei finden, die in Edge Animate beim Speichern erstellt wird. Dies wird in der folgenden Abbildung dargestellt:

Mithilfe dieser Option wird entweder das aktuelle Dokument gespeichert, sofern es bereits im Dateisystem abgespeichert wurde, oder der Benutzer wird aufgefordert, einen Dateinamen und einen Speicherort anzugeben, wenn es sich um ein neues Projekt handelt, das noch nicht gespeichert wurde.

Speichern unter…

Die Funktion dieser Option entspricht derjenigen der Option „Speichern“. Allerdings wird der Benutzer jedes Mal in einem Systemdialogfeld nach einem Dateinamen und Speicherort gefragt. Verwenden Sie diese Option, wenn Sie unterschiedliche Versionen desselben Projekts oder das Projekt an einem anderen Ort speichern möchten.

Im Fall eines neuen Projekts wird bei beiden Optionen ein Dateisystemdialogfeld angezeigt. Wie aus der obigen Abbildung hervorgeht, wird tatsächlich eine HTML-Datei gespeichert. Dies ist ein wichtiger Aspekt der Arbeit mit Edge Animate-Projekten: Die Arbeit am produzierten Inhalt in der Authoring-Umgebung von Edge Animate findet in Echtzeit statt.

Werkzeuge für Layout und Benutzerführung

Wenn Sie auf der Bühne mit beliebigen Elementen arbeiten, stehen Ihnen Werkzeuge zur Verfügung, die Sie beim Layout und bei der Positionierung der fraglichen Elemente unterstützen. Edge Animate bietet eine Reihe von Werkzeugen für diese Aufgabe: das Werkzeug „Layoutvoreinstellungen“, Lineale und Hilfslinien.

Werkzeug „Layoutvoreinstellungen“

Mit dem Werkzeug „Layoutvoreinstellungen“ können Sie einige Entscheidungen bezüglich der Standardeigenschaften eines bestimmten Elementtyps treffen, die das betreffende Element annimmt, wenn es erstellt oder importiert wird. Das Werkzeug selbst befindet sich in der Symbolleiste rechts neben den Standardfarbfeldern. Es wird als kleines Lineal symbolisiert, das den Layoutmodus anzeigt:

Wird das Werkzeug aktiviert, erscheint eine kleine Überlagerung, mit deren Hilfe Sie eine Reihe von Layoutvoreinstellungen für das aktuelle Projekt vornehmen können. Die meisten dieser Voreinstellungen beziehen sich auf die Maßeinheit von Elementen, wobei entweder Pixel oder Prozentwerte verwendet werden:

In der folgenden Tabelle finden Sie Einzelheiten zu den Auswahlmöglichkeiten bei den Layoutvoreinstellungen einer Edge Animate-Komposition. Obwohl sie anscheinend die gleiche Beschreibung aufweisen, handelt es sich bei den Einheiten für die horizontale und vertikale Position sowie für die Breite und Höhe um separate Werte. Dies erkenne Sie, wenn Sie die entsprechenden Parameter auf der Bühne anpassen.

Lineale

Wenn die Lineale aktiviert sind, werden sie wie bei anderen Kreativapplikationen von Adobe entlang der oberen und linken Seite der Projektbühne angezeigt. Lineale unterstützen Sie bei der Visualisierung der Abstände zwischen Elementen, beim Abschätzen des Verhältnisses zum Registrierungspunkt der Bühne, bei der Ausrichtung von Elementen usw.

Lineale dienen auch zum Generieren und Positionieren manueller Hilfslinien, die im nächsten Abschnitt behandelt werden.

Hilfslinien

Hilfslinien werden neben Linealen verwendet, um Elemente auf der Bühne mit größerer
Genauigkeit zu platzieren. Sie können außerdem verwendet werden, um Bereiche festzulegen, in denen Elemente
mithilfe von Werkzeugen wie dem Rechteckwerkzeug oder dem Abgerundetes-Rechteck-Werkzeug gezeichnet werden können:

Wenn Sie eine neue Hilfslinie erstellen möchten, stellen Sie sicher, dass die Lineale aktiviert und im Bühne-Bedienfeld sichtbar sind. Klicken Sie auf ein Lineal und ziehen Sie eine neue Hilfslinie entlang der entsprechenden Achse auf die Bühne. Sobald Sie die Hilfslinie an der gewünschten Stelle positioniert haben, lassen Sie die Maustaste los, um die Hilfslinie an dieser Stelle abzulegen.

Wenn Sie die Hilfslinie platziert haben, können Sie sie als pixelbasierte Hilfslinie belassen oder sie in eine prozentwertbasierte Hilfslinie umwandeln, wenn Sie mit Responsive-Layouts arbeiten. Um eine Hilfslinie von Pixeleinheiten auf Prozentwerte umzustellen, bewegen Sie den Mauszeiger über die Hilfslinie und führen Sie einen Rechtsklick aus. Die Option Hilfslinie in Prozent konvertieren ist jetzt verfügbar. Die normalerweise violette Hilfslinie erscheint nun in Blaugrün, um die Unterscheidung von einer pixelbasierten Hilfslinie zu erleichtern. Wenn Sie die Größe der Bühne ändern, wird auch die Hilfslinie verschoben, da sie nun auf Prozentwerten und nicht mehr auf absoluten Pixeln basiert.

Um eine Hilfslinie zu entfernen, klicken Sie sie einfach an und ziehen Sie sie zurück auf das Lineal. Hilfslinien können über den Bereich „Ansicht“ des Applikationsmenüs gesperrt werden. Auch das Einrasten kann über das Menü „Ansicht“ gesteuert werden.

Intelligente Hilfslinien

Wenn Intelligente Hilfslinien aktiviert sind, werden beim Umpositionieren von Elementen auf der Bühne temporäre Hilfslinien angezeigt, die beim Platzieren von Elementen hilfreich sind. Diese Hilfslinien sind an anderen Elementen oder Aspekten der Bühne selbst ausgerichtet. In der folgenden Abbildung beispielsweise werden Intelligente Hilfslinien bei einem Element angezeigt, das zur Bühnenmitte gezogen wird, was darauf hinweist, dass dieses Objekt zentriert werden kann, wenn es an dieser Stelle abgelegt wird.

Importieren externer Elemente

Neben der Erstellung einfacher Vektor- und Textelemente im Rahmen einer Edge Animate
-Komposition besteht auch die Möglichkeit, externe Elemente zur Verwendung im Projekt zu importieren.
Diese Elemente können aus einer anderen Applikation wie Adobe
Photoshop, Illustrator oder Fireworks stammen. Üblicherweise werden eher diese
importierten Elemente als die einfachen, in Edge Animate erstellten Formen verwendet. Dies
hängt allerdings vom Projekt ab.
Zu den Dateitypen, die in Edge Animate importiert werden können, zählen:

• SVG: Scalable Vector Graphics
• PNG: Portable Network Graphics
• JPEG: Joint Photographic Experts Group
• GIF: Graphics Interchange Format
  

Importieren von Bitmapbildern

Sobald eine Bilddatei in ein Edge Animate-Projekt importiert wird, kann sie wie jedes andere Element auch bearbeitet, animiert und mit einem Skript versehen werden. Um eine Bitmapdatei in Edge Animate zu importieren, gehen Sie wie folgt vor:

1. Navigieren Sie zum Edge Animate-Applikationsmenü.
2. Wählen Sie „Datei“ | Importieren…. aus.
3. Ein Systemdialogfeld zum Auswählen der Datei wird angezeigt. Navigieren Sie zu der PNG-, GIF oder JPG
   -Datei, die Sie importieren möchten.
4. Wählen Sie die Datei aus und klicken Sie auf Öffnen.
5. Die Datei wird nun auf der Bühne platziert und außerdem der Bibliothek des Projekts unter Elemente hinzugefügt. Von dort aus lassen sich der Bühne mehrere Instanzen dieses Elements hinzufügen.

Da nun das Bitmapbildelement importiert wurde und sich eine Instanz dieses Elements auf der Bühne befindet, können Sie es mithilfe des Auswahl- und des Transformationswerkzeugs genau wie Text- oder Rechteckelemente bearbeiten, z. B. die Größe ändern, es skalieren und neigen. Im Gegensatz zu vektorbasierten Elementen werden bei Bitmapobjekten allerdings sichtbare Artefakte, Blockbildung und andere Verzerrungen auftreten.

Animationen in Edge Animate

Es sind viele Applikationen verfügbar, mit denen Benutzer Kompositionen animierter Sequenzen erstellen können. Benutzer von Adobe Edge Animate haben vielleicht schon Erfahrungen mit anderen Programmen wie Director, Flash Professional, After Effects oder auch Photoshop machen können. In jeder von diesen Applikationen verläuft der Animationsprozess etwas anders, in einigen Aspekten gleichen sich Animationstechniken und Werkzeuge allerdings.

Wie bei vielen anderen digitalen Animationsprogrammen kommt in Edge Animate das Konzept des „Tweenings“ zwischen Schlüsselbildern zur Anwendung. Bei der traditionellen, zellbasierten Animation zeichnet ein Chefanimator bestimmte Schlüsselbilder für eine Animationssequenz und die Bilder zwischen diesen Schlüsselbildern werden von Mitgliedern des Animationsteams erstellt. Das Ziel war dabei stets, einen weichen Übergang zwischen den vom Chefanimator gestalteten Schlüsselbildern zu erreichen, um eine
fertige Animationssequenz zu erhalten.

Dieser Prozess wird in Edge Animate durch das Programm ausgeführt. Während Schlüsselbilder entlang der Zeitleiste platziert werden, werden in Edge Animate Veränderungen von Eigenschaftswerten als Übergänge an der Position des Abspielkopfs (einem bestimmten Zeitpunkt) aufgezeichnet. Autoren verfügen zusätzlich über die Fähigkeit, der Tweening-Engine eine Reihe von Anweisungen zu geben, die auf einer Vielzahl von Abschwächungsgleichungen beruhen. Dies ermöglicht eine natürlichere Bewegung zwischen den Schlüsselbildern und kann außerdem verwendet werden, um bestimmte Effekte zu erzielen, beispielsweise eine elastische oder springende Bewegung.

Die Zeitleiste von Edge Animate

Über die Zeitleiste werden Animationen in einer Edge Animate-Komposition gesteuert. Die Zeitleiste selbst ist verwandt mit Konzepten und Konstrukten anderer Applikationen von Adobe, insbesondere von Flash Professional und After Effects.

Wiedergabesteuerung

Die Wiedergabesteuerung in Edge Animate befindet sich in der oberen linken Ecke des Zeitleisten-Bedienfelds. Diese Steuerung bietet schnellen Zugriff auf viele der Wiedergabeoptionen, die über die Zeitleiste verfügbar sind.

Zeit

Die Zeit wird in Edge Animate als dezimaler Standardzeitcode gemessen (mm:ss.ddd) und in der Zeitsteuerung entsprechend angezeigt. Bewegt sich der Abspielkopf entlang der Zeitleiste, werden die Informationen in dieser Anzeige entsprechend aktualisiert. Der Benutzer kann die Steuerung nach links oder rechts verschieben, um die Zeitleistenposition anzupassen, oder einfach auf die Zeitleiste klicken, um sie zu bearbeiten.

Die Zeitsteuerung in Edge Animate ist an die Bühne angedockt und befindet sich direkt unter diesem Bedienfeld. Die Steuerungselemente sind außerdem aufgeteilt, um die gesonderte Bearbeitung der Abspielkopfzeit (gelb) und der Stecknadelzeit (blau, wenn aktiviert) zu ermöglichen.

Zeitleistenoptionen

Diese Optionen können nach Bedarf aktiviert bzw. deaktiviert werden, wobei eine Reihe von Zeitleistenfunktionen ausgeführt werden kann.

Zu diesen Optionen gehören die folgenden:

• Automatischer Schlüsselbildmodus (K): Ist diese Option aktiviert, werden in Edge Animate Schlüsselbilder für verschiedene Eigenschaften automatisch generiert, während diese entlang der Zeitleiste angepasst werden. Ist sie deaktiviert, müssen alle Schlüsselbilder manuell eingefügt werden.
• Automatischer Übergangsmodus (X): Wenn diese Option aktiviert ist, werden in Edge Animate unmittelbare Übergänge zwischen Anpassungen von Elementeigenschaften vorgenommen, während diese im Zeitverlauf animiert werden.
• Stecknadel umschalten (P): Mit dieser Option wird die Stecknadel aktiviert bzw. deaktiviert. Wir betrachten die Stecknadel weiter unten eingehender.
  

An der Unterseite der Zeitleiste finden Sie einige weitere Optionen:

• Nur animierte Elemente anzeigen: Wenn diese Option ausgewählt ist, werden auf der Zeitleiste nur solche Elemente angezeigt, deren Eigenschaften animiert werden. Statische Elemente, wie z. B. ein Hintergrundbild, sind ausgeblendet.
• An Zeitleiste ausrichten: Mit dieser Option wird die Ausrichtung an der Zeitleiste aktiviert bzw. deaktiviert.
• Raster einblenden: Hiermit wird das Zeitleistenraster aktiviert bzw. deaktiviert. Außerdem lassen sich die Einheiten des Rasterabstands einstellen.
  

Weitere Informationen zur Steuerung „Raster einblenden“

Der Rasterabstand kann eingestellt werden, indem Sie auf den kleinen Pfeil klicken, der sich rechts neben diesem Symbol befindet. Dann wird eine kleine Liste mit Optionen eingeblendet. Verschiedene Maße stehen für die Abstände der Rasterlinien auf der Zeitleiste zur Verfügung.

Steuerelemente der Zeitleiste

Vier verschiedene Steuerelemente innerhalb der Zeitleiste sind für uns an dieser Stelle von Bedeutung: der Abspielkopf, die Stecknadel, die Zoomfunktion und die Rastersteuerung. Diese Steuerelemente unterscheiden sich stark in ihrer Funktionalität: Mit manchen lässt sich die Wiedergabe steuern, andere beziehen sich auf die Animation und wieder andere verbessern den Arbeitsablauf im Allgemeinen. Alle erfüllen eine nützliche Funktion.

Der Abspielkopf

Der Abspielkopf ist das größere der beiden Elemente auf der Zeitleiste. Er wird durch eine durchgehende rote Linie dargestellt und steht für die aktuelle Zeit. Sie können auf den Abspielkopf klicken und ihn vorwärts und rückwärts verschieben, um die aktuelle Zeit anzupassen. Wird in Edge Animate eine Animation wiedergegeben, bewegt sich der Abspielkopf entlang der aktuellen Zeit.

Die Stecknadel

Die Stecknadel als Steuerelement steht nur in Edge Animate zur Verfügung. Mit der Stecknadel kann der aktuelle Zustand von Elementeigenschaften an einem bestimmten Zeitpunkt verankert werden, während mit dem Abspielkopf festgelegt wird, zu welcher Zeit die Animation abgeschlossen sein soll. Die Stecknadel kann entweder vor oder nach dem Zeitpunkt, der mit dem Abspielkopf festgelegt wurde, positioniert werden. Sie gibt aber stets den Startpunkt der Animation wieder, während der Abspielkopf den Endpunkt markiert. Werden Elementeigenschaften verändert, während die Stecknadel nicht synchron ist, werden diese Eigenschaften animiert, und zwar beginnend mit der Stecknadel und endend mit der Abspielkopfposition. Auf diese Weise können Sie über die Zeitleiste schnell und einfach kontrollierte Animationen erstellen.

Ist die Stecknadel aktiviert, wird die Richtung der Animation auf der Zeitleiste durch ein farbiges Band mit Pfeilen dargestellt. Die Farbe – Gelb oder Blau – hängt von der Bewegungsrichtung ab. Ein blaues Band steht für eine Bewegung von der Stecknadel aus nach links, ein gelbes Band für eine Bewegung nach rechts.

Zoomsteuerung

In Edge Animate gibt es zwei Steuerelemente für den Zoom, mit denen die Zeitleiste erweitert und verkleinert werden kann. Das erste Steuerelement ist die Schaltfläche „Zeitleistengröße anpassen“, die als Doppelpfeil angezeigt wird und sich in der unteren rechten Ecke der Zeitleiste befindet. Damit lässt sich die gesamte Spanne der sichtbaren Zeitleiste so erweitern oder verkleinern, dass sie der aktuellen Breite des Zeitleisten-Bedienfelds entspricht. So gewinnen Sie einen guten Überblick über die Animation als Ganzes.

Das zweite Steuerelement ist ein Regler, der rechts daneben angezeigt wird. Damit können Benutzer den Zoomfaktor der Zeitleiste manuell steuern, um spezifische Aufgaben auszuführen.

Schlüsselbilder

Wie auch in After Effects werden Schlüsselbilder in Edge Animate auf der Zeitleiste als kleine Raute angezeigt. Im Gegensatz zu den Schlüsselbildern in Flash Professional sind diese in Edge Animate direkt an die Eigenschaft gebunden, die verändert wird, statt an das Element selbst. Dadurch lassen sich Eigenschaften beliebiger Elemente entlang der Zeitleiste sehr genau anpassen. Ausgewählte Elementeigenschaften können so flexibel und leistungsstark animiert werden.

Schlüsselbildnavigation

Eine Reihe von Tastaturbefehlen kann in Edge Animate zur Navigation auf der Zeitleiste verwendet werden – insbesondere zum Navigieren zwischen Schlüsselbildern.

Erstellen einer Bewegung

Elementeigenschaften lassen sich in Edge Animate ganz einfach animieren. In diesem Abschnitt beschäftigen wir uns mit einer Reihe von grundsätzlichen Möglichkeiten, Elemente entlang der Edge Animate-Zeitleiste zu animieren. Einmal werden wir dabei nur den Abspielkopf und einmal den Abspielkopf in Kombination mit der Stecknadel verwenden. Indem wir dieselbe Animation sowohl mit der einen als auch mit der anderen Methode erstellen, gewinnen wir einen guten Einblick in die verschiedenen Arbeitsabläufe, die in Edge Animate zur Verfügung stehen, um Elementeigenschaften über die Zeit zu animieren.

Einfügen von Schlüsselbildern

Für das Einfügen von Schlüsselbildern in eine Komposition lassen sich verschiedene Mechanismen verwenden: das Eigenschaften-Bedienfeld, das Applikationsmenü, die Schlüsselbildschaltflächen der Zeitleiste und das Kontextmenü. Werfen wir zunächst einen Blick auf diese Methoden.

Hinzufügen von Schlüsselbildern über das Eigenschaften-Bedienfeld

Wenn ein beliebiges Element ausgewählt ist, können Sie den Abspielkopf auf der Zeitleiste positionieren und dann über das Eigenschaften-Bedienfeld Schlüsselbilder einfügen. Wie Sie sehen, wird neben den meisten Eigenschaftswerten eine kleine Raute angezeigt. Wenn Sie auf dieses Steuerelement für Schlüsselbilder klicken, fügen Sie damit ein Schlüsselbild für diese Eigenschaft des ausgewählten Elements an der aktuellen Position des Abspielkopfs ein.

Hinzufügen von Schlüsselbildern über das Applikationsmenü

Wenn ein beliebiges Element ausgewählt ist, können Sie den Abspielkopf auf der Zeitleiste positionieren und dann über das Applikationsmenü Schlüsselbilder einfügen. Rufen Sie einfach das Menü auf und wählen Sie Zeitleiste | Schlüsselbild hinzufügen aus. Wählen Sie dann entsprechend der gewünschten Eigenschaft den Schlüsselbildtyp aus, den Sie hinzufügen möchten.

Verwenden der Schlüsselbildschaltflächen der Zeitleiste

Wenn ein beliebiges Element ausgewählt ist, können Sie den Abspielkopf auf der Zeitleiste positionieren und dann über den linken Bereich des Zeitleisten-Bedienfelds Schlüsselbilder einfügen. Jede Eigenschaft, der aktuell ein Schlüsselbild zugeordnet ist, wird unter einem Element auf der Zeitleiste gruppiert angezeigt. Diese bestehenden Eigenschaften verfügen über ein kleines Symbol, das sich rechts neben dem Eigenschaftsnamen befindet, über das neue Schlüsselbilder für diese Eigenschaft hinzugefügt werden können.

Um einer Eigenschaft, die nicht unter einem Element angezeigt wird, neue Schlüsselbilder hinzuzufügen, führen Sie einen Rechtsklick auf den Elementnamen aus und wählen Sie „Schlüsselbild hinzufügen“.

Einfügen eines Schlüsselbilds mit einem Rechtsklick

Wenn ein beliebiges Element ausgewählt ist, können Sie den Abspielkopf auf der Zeitleiste positionieren und dann über die Bühne Schlüsselbilder einfügen. Führen Sie an der gewünschten Stelle der Zeitleiste einfach einen Rechtsklick auf ein beliebiges Element auf der Bühne aus und wählen Sie „Schlüsselbild hinzufügen“, um eine beliebige der für dieses Element verfügbaren Eigenschaften einzufügen.

Animieren mit dem Abspielkopf

Mithilfe des Abspielkopfs und des Bedienfelds „Eigenschaften“ werden wir nun eine einfache Animation eines Elements erstellen, das sich von der einen Seite der Bühne zur anderen bewegt, während es rotiert und die Farbe wechselt.

Animieren mit der Stecknadel

Wir werden diese Übung nun erneut ausführen, aber dieses Mal die Stecknadel verwenden, um einen alternativen Weg zu betrachten, wie Bewegung in Edge Animate erstellt werden kann.

Bearbeiten von Übergängen

Sobald ein Übergang vorhanden ist, können Anpassungen daran per Mausinteraktion über die Zeitleiste vorgenommen werden. Um Verzögerung, Dauer und Ende des Übergangs anzupassen, klicken Sie einfach auf die sichtbaren Übergangsindikatoren auf der Zeitleiste und ziehen Sie sie in die gewünschte Richtung.

Übergangsverzögerung

Hiermit wird festgelegt, wann der Übergang gemessen am Startpunkt der Zeitleiste insgesamt beginnen soll. Dieser Wert lässt sich entweder durch Verschieben des gesamten Übergangs oder durch Ziehen der äußersten rechten Ecke anpassen.

Übergangsdauer

Übergangsdauer bezeichnet die für den gesamten Übergang benötigte Zeit. Übergänge lassen sich leicht durch Ziehen der äußersten rechten Ecke verlängern oder verkürzen.

Übergangsende

Dies ist der Zeitpunkt auf der Zeitleiste, an dem der Übergang abgeschlossen ist.

Bearbeiten von Elementeigenschaften mit Übergängen

Wenn Sie einen Übergang auswählen möchten, um Elementeigenschaften im Bearbeiten-Bedienfeld anzupassen, wählen Sie mit der Maus einen Übergangsblock auf der Zeitleiste aus. Der Cursor sollte die Form einer kleinen Greifhand annehmen. Beim Klicken auf den Übergang wird dieser zusammen mit den zugehörigen Schlüsselbildern hervorgehoben.

Das Element ist nun ausgewählt und im Bearbeiten-Bedienfeld werden die entsprechenden Eigenschaften dieses Elements an der Position des Abspielkopfs angezeigt. Um eine Eigenschaft im zeitlichen Verlauf anzupassen, verschieben Sie einfach den Abspielkopf und verfolgen Sie die Änderungen im Bearbeiten-Bedienfeld.

Steuerung der Übergangsabschwächung

Vielleicht ist Ihnen aufgefallen, dass die Bewegung in den Beispielen bisher durch einfache, lineare Übergänge von einem Wert zum anderen erreicht wurde. Um einzelnen Übergängen ein realistischeres Aussehen und mehr Dynamik zu verleihen, kann ihnen eine Reihe von Abschwächungsgleichungen zugewiesen werden.

Adobe Edge Animate bietet viele Abschwächungsoptionen. Standard ist „Linear“, d.h., es wird einfach ein gleichmäßiger Übergang von A nach B ausgeführt. Oft wird ein dynamischerer Abschwächungs-Algorithmus benötigt, um der Bewegung mehr Realismus zu verleihen oder einen bestimmten Effekt zu erzielen. Edge Animate bietet 32 Abschwächungstypen, um Benutzern eine Vielzahl von Optionen für die Übergangsabschwächung zur Verfügung zu stellen.

Arten der Übergangsabschwächung

Da Edge Animate eine große Anzahl an Abschwächungstypen bietet, ist die Funktion jedes einzelnen für Benutzer auf den ersten Blick vielleicht nicht ersichtlich. Wenn Sie diese Übergangstypen in einem Edge Animate-Projekt einzeln einem einfachen Übergang zuweisen, können Sie deren Funktionen visualisieren und anpassen.

Verschieben von Übergängen

In Edge Animate ist es leicht, Übergänge entlang der Zeitleiste hin und her zu verschieben. Klicken Sie auf einen Übergang und halten Sie die Maustaste gedrückt. Bewegen Sie dann die Maus in gewünschter Richtung entlang der Zeitleiste, bis der Übergang an der richtigen Stelle ist. Lassen Sie dann die Maustaste los – fertig.

Ändern der Übergangsdauer

Wenn Sie die Dauer eines Übergangs ändern möchten, zeigen Sie mit der Maus auf Anfang oder Ende eines Übergangsblocks, sodass Sie am Cursor erkennen, dass Anpassungen möglich sind. Klicken Sie auf den Block und ziehen Sie ihn dann entlang der Zeitleiste, um die Länge des Übergangs anzupassen. In derselben Weise können Sie auch mehrere Übergänge auswählen, wenn Sie beim Auswählen auf der Zeitleiste die Umschalttaste gedrückt halten.

Auswahl von Übergangsschlüsselbildern

Um für beliebige Bearbeitungen einzelne Schlüsselbilder auszuwählen, klicken Sie einfach auf das gewünschte Schlüsselbild. Sie können z. B. auf der Tastatur die Entf-Taste drücken, um das ausgewählte Schlüsselbild zu löschen, oder den Übergang mit dem Kontextmenü bearbeiten.

Auswählen mehrerer Übergänge

Wird die Umschalttaste bei der Auswahl von Schlüsselbildern gedrückt halten, lassen sich mehrere Schlüsselbilder auswählen. Alternativ ließe sich auch ein Auswahlrechteck über mehrere Schlüsselbilder ziehen. Dies ist allerdings ungenau, da ganze Übergänge wahrscheinlich unbeabsichtigt mit ausgewählt würden.

Kopieren und Einfügen von Schlüsselbildern

Wenn Schlüsselbilder ausgewählt sind, können sie einfach kopiert und nach Bewegen des Abspielkopfs an einer anderen Position auf der Zeitleiste wieder eingefügt werden. Diese Methode eignet sich für das Wiederverwenden einmal festgelegter Eigenschaften zu einem späteren Zeitpunkt auf der Zeitleiste.

Generieren von Übergängen mit Schlüsselbildern

Bei mehreren ausgewählten Schlüsselbildern können durch Rechtsklick Übergänge zwischen diesen Bildern erstellt bzw. entfernt werden. Diese Möglichkeit bietet sich z. B. an, wenn Sie den automatischen Übergangsmodus verwendet haben, dann aber die Schlüsselbilder beibehalten und den weichen Übergang zwischen diesen Bildern entfernen möchten.

Animieren eines Website-Header

Adobe Edge Animate wird häufig verwendet, um einen Website-Header ganz einfach zu animieren. Wir werden nun eine solche Komposition umsetzen, und zwar für das Recording-Projekt „An Early Morning Letter, Displaced“. Dabei sollen Bilder von jedem Release als Animation im Header angezeigt werden. Alle nötigen Elemente stehen bereits zur Verfügung, sodass wir gleich mit der Header-Animation beginnen können.

Projekteinrichtung, Ressourcenimport, allgemeines Layout

Im ersten Schritt dieser Komposition richten wir unser Edge Animate-Projekt ein, importieren die Ressourcen und ordnen sie auf der Bühne an. Wir beginnen, indem wir die Ressourcen so anordnen, wie sie am Ende der Animation angeordnet sein sollen, wenn die Wiedergabe beendet ist. Mit der Stecknadel ist es leicht, die Animation „vom Ende her“ zu erstellen.

Ausführen der Animation von Elementen

Jetzt werden wir eine Animation aller Elemente auf der Bühne umsetzen. Dafür verwenden wir den Abspielkopf, die Markierung und das Eigenschaften-Bedienfeld.

Animieren des Hintergrunds

Der Übergang soll 00:07.000 dauern und das Hintergrundelement soll bei leichter Skalierung eingeblendet werden.

Animieren der Covergrafik (diesen Schritt bei jedem Bild ausführen)

Wir erstellen jetzt für jedes Bild einen Übergang von 00:02.000 Dauer. Das Bild soll von außerhalb des Bildschirms hereingleiten, dabei springen und dann zur Ruhe kommen. Wir werden die Übergänge der aufeinanderfolgenden Bilder so staffeln, dass sie bereits zum Mittelpunkt des vorigen Übergangs gestartet werden. So lässt sich ein Windstoßeffekt in der Komposition erreichen.

Animieren des Titeltexts

Der Übergang soll 00:05.500 dauern und das Titeltextelement soll eingeblendet werden.

Abschluss

Wenn Sie der Bühne all diese Elemente hinzugefügt, sie richtig positioniert und mit Übergängen animiert haben, wird die Edge Animate-Zeitleiste wie in der folgenden Abbildung aussehen:

Die folgende Abbildung zeigt unser fertiges animiertes Banner in einem Webbrowser. Für eine Veröffentlichung der Edge Animate-Komposition im Browser wählen Sie im Applikationsmenü Datei | Vorschau im Browser aus.

Zusammenfassung

In diesem Kapitel haben Sie gelernt, wie in Adobe Edge Animate Bewegung erzeugt wird. Dabei haben Sie die Zeitleiste, den Abspielkopf, die Stecknadel und das Eigenschaften-Bedienfeld verwendet. Benutzer mit Erfahrung mit Flash Professional oder After Effects haben vielleicht bemerkt, wie ähnlich sich viele Konzepte sind, die in der Benutzeroberfläche von Edge Animate weiterentwickelt und ausgefeilter implementiert wurden. In einer Edge Animate-Komposition lassen sich Animationen im Handumdrehen erstellen und bearbeiten.