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.

Hinweis:

Alternativ können Sie dazu auch den Tastaturbefehl Strg+N (Windows) oder Befehl+N (Mac) verwenden.

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:

Speichern

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.

Hinweis:

Der Tastaturbefehl für diese Option lautet Strg+S (Windows) oder Befehl+S (Mac).

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.

Hinweis:

Der Tastaturbefehl für diese Option lautet Strg+Umschalt+S (Windows) oder Befehl+Umschalt+S (Mac).

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:

Hinweis:

Diese Auswahlmöglichkeiten gelten nur für Elemente, die in der Komposition neu erstellt oder in diese importiert werden. Bereits vorhandene Elemente behalten ihre Einstellungen.

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.

Voreinstellung Beschreibung
Eckausrichtung Bestimmt, an welcher Ecke das Element standardmäßig ausgerichtet wird
Einheiten für die horizontale Position Schaltet zwischen Pixel und Prozent für neue
Elemente um
Einheiten für die vertikale Position Schaltet zwischen Pixel und Prozent für neue
Elemente um
Breiteneinheiten Schaltet zwischen Pixel und Prozent für neue
Elemente um
Höheneinheiten Schaltet zwischen Pixel und Prozent für neue
Elemente um
„img“-Tag für Bilder verwenden Beim Importieren von Bildern „img“-Tag-Typ verwenden
„auto“ für Bildbreite Breite beim Importieren von Bildern auf „auto“ festlegen
„auto“ für Bildhöhe Höhe beim Importieren von Bildern auf „auto“ festlegen

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.

Hinweis:

Um die Lineale zu aktivieren oder zu deaktivieren, wählen Sie in der Applikation im Menü „Ansicht“ die Option „Lineale“ oder verwenden den Tastaturbefehl Strg+R (Windows) bzw. Befehl+R (Mac).

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.

Hinweis:

Intelligente Hilfslinien können über das Applikationsmenü unter „Ansicht“ | Intelligente Hilfslinien deaktiviert werden. Tastaturbefehl: Strg+U (Windows) und Befehl+U (Mac)

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.

Hinweis:

Wie bei SVG-Dateien nimmt die auf der Bühne platzierte Instanz der Bitmapdatei die Abmessungen der importierten Datei selbst an. Es kann daher vorkommen, dass sie die Ränder der Bühne überlappt. Dies lässt sich vermeiden, indem das Element mit dem Eigenschaften-Bedienfeld bearbeitet wird.

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.

Hinweis:

Möglich ist auch, eine JPG-, PNG- oder GIF-Datei einfach aus dem Datei-Explorer des Betriebssystems per Drag & Drop auf die Bühne zu stellen. Das Ergebnis dieser Aktion ist das gleiche wie bei dem oben beschriebenen Applikationsbefehl Importieren…, wobei es bei Drag & Drop möglich ist, das importierte Bild präzise auf der Bühne zu platzieren.

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.

Hinweis:

Im Gegensatz zur Frame-basierten Zeitleiste in Flash Professional ist die Zeitleiste in Edge Animate rein zeitbasiert.

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.

Hinweis:

Normalerweise sind Abspielkopf und Stecknadel synchronisiert. Wenn nicht, können sie über das Applikationsmenü erneut synchronisiert werden: Zeitleiste | Stecknadel umschalten.

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.

Hinweis:

Um die Synchronisation der Stecknadel mit dem Abspielkopf schnell herzustellen oder aufzulösen, können Sie einen Doppelklick auf den Abspielkopf ausführen, was ein Umschalten zwischen diesen Zuständen bewirkt. Sie können dafür auch den Tastaturbefehl (P) oder das entsprechende Steuerelement auf der Zeitleiste verwenden.

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.

Befehl Tastaturbefehl
Zum vorherigen Schlüsselbild Strg+Pfeil-nach-links (Windows), Befehl+Pfeil-nach-links (Mac)
Zum nächsten Schlüsselbild Strg+Pfeil-nach-rechts (Windows), Befehl+Pfeil-nach-rechts
(Mac)

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.

Hinweis:

Hinweis: Die meisten Elemente werden erst auf der Zeitleiste angezeigt, wenn Eigenschaften im Zeitverlauf tatsächlich verändert werden. Der Grund: Solange keine Animation stattfindet, würde die Zeitleiste unnötig
überladen werden.

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.

Hinweis:

Nicht alle Eigenschaften verfügen standardmäßig über eigene Tastaturbefehle. Diese lassen sich allerdings für schnellen Zugriff auf häufig verwendete Eigenschaften zuweisen. Die Zuweisung erfolgt über das Applikationsmenü: Bearbeiten | Tastaturbefehle….

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.

  1. Erstellen Sie ein neues Edge Animate-Projekt und speichern Sie es auf der lokalen Festplatte.

  2. Passen Sie die Bühne über das Eigenschaften-Bedienfeld wie folgt an:

    • Bühne B: 600 px
    • Bühne H: 350 px
    • Hintergrundfarbe: #000000
    • Überlauf: hidden
  3. Zeichnen Sie mithilfe des Rechteckwerkzeugs ein Element auf der Bühne. Da wir im nächsten Schritt dessen Eigenschaften anpassen, kommt es nicht auf Form oder Abmessungen an.

  4. Nehmen Sie für jede aufgeführte Eigenschaft über das Eigenschaften-Bedienfeld die entsprechende Anpassung vor:

    • Position X: 20 px
    • Position Y: 230 px
    • Größe B: 100 px
    • Größe H: 100 px
    • Hintergrundfarbe: #c0c0c0
  5. Klicken Sie im Eigenschaften-Bedienfeld neben den Eigenschaften für Position, Hintergrundfarbe und Drehung auf die Schlüsselbild-Raute. Dadurch fügen Sie für jede Eigenschaft ein Schlüsselbild in die Zeitleiste ein.

  6. Stellen Sie sicher, dass die Eigenschaften für automatische Schlüsselbilder auf der Zeitleiste aktiviert sind. Da Sie jede dieser Eigenschaften bereits mit ersten Schlüsselbildern markiert haben, werden alle im zeitlichen Verlauf vorgenommenen Änderungen automatisch mit Schlüsselbildern versehen.

  7. Das Projekt sollte nun wie in der folgenden Abbildung aussehen. Nun können wir mit dem Rest der Übung fortfahren.

  8. Ziehen Sie den Abspielkopf zur Linealmarkierung mit der Beschriftung „0:04“ und lassen Sie die Maustaste los.

  9. Wählen Sie nun mit dem Auswahlwerkzeug das Element aus und passen Sie im Eigenschaften-Bedienfeld die folgenden Eigenschaften an:

    • Position X: 480 px
    • Hintergrundfarbe: #900000
    • Drehung: 480 Grad
  10. Wie Sie sehen, werden nun Übergangsleisten auf der Zeitleiste zusammen mit einem anderen Satz an Schlüsselbildern am Ende der Animationssequenz angezeigt.

  11. Nun können Sie entweder den Abspielkopf über der Zeitleiste hin- und herziehen oder auf die Schaltfläche „Abspielen“ klicken, um die gesamte Sequenz zu betrachten. Bei der Wiedergabe sollte das Element die Bühne von links nach rechts entlangrollen und einen Farbübergang von Grau nach Rot aufweisen. Der Endzustand wird in der folgenden Abbildung dargestellt:

    Hinweis:

    Hinweis: Alle Eigenschaften eines Elements können mit Schlüsselbildern versehen und so im Lauf der Zeit verändert werden.

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.

  1. Erstellen Sie ein neues Edge Animate-Projekt und speichern Sie es auf der lokalen Festplatte.

  2. Passen Sie die Bühne über das Eigenschaften-Bedienfeld wie folgt an:

    • Bühne B: 600 px
    • Bühne H: 350 px
    • Hintergrundfarbe: #000000
    • Überlauf: hidden
  3. Zeichnen Sie mithilfe des Rechteckwerkzeugs ein Element auf der Bühne. Da wir im nächsten Schritt dessen Eigenschaften anpassen, kommt es nicht auf Form oder Abmessungen an.

  4. Nehmen Sie für jede aufgeführte Eigenschaft über das Eigenschaften-Bedienfeld die entsprechende Anpassung vor:

    • Position X: 20 px
    • Position Y: 230 px
    • Größe B: 100 px
    • Größe H: 100 px
    • Hintergrundfarbe: #c0c0c0
  5. Ziehen Sie den Abspielkopf auf der Zeitleiste zu „0:04“.

  6. Rufen Sie das Applikationsmenü auf und wählen Sie Zeitleiste | Stecknadel umschalten aus. Dadurch wird die Synchronisation zwischen Stecknadel und Abspielkopf aufgehoben. Die Stecknadel ist das kleine Steuerelement unter dem Abspielkopf (bei aufgehobener Synchronisation).

  7. Ziehen Sie die Stecknadel auf der Zeitleiste zu „0:00“. Dadurch werden die aktuellen Eigenschaften der Elemente am Punkt „0:00“ fixiert, ohne dass manuell Schlüsselbilder eingefügt werden müssten. Belassen Sie den Abspielkopf bei „0:04“.

  8. Wählen Sie nun mit dem Auswahlwerkzeug das Element aus und passen Sie im Eigenschaften-Bedienfeld die folgenden Eigenschaften an:

    • Position X: 480 px
    • Hintergrundfarbe: #900000
    • Drehung: 480 Grad

    Wie Sie sehen, werden nun Übergangsleisten auf der Zeitleiste angezeigt, ohne dass Schlüsselbilder festgelegt werden müssten.

  9. Rufen Sie das Applikationsmenü auf und wählen Sie Zeitleiste | Stecknadel umschalten aus, um die Stecknadel zu synchronisieren. Die Stecknadel lässt sich auch per Tastaturbefehl umschalten (siehe oben).

  10. Nun können Sie entweder den Abspielkopf über der Zeitleiste hin- und herziehen oder auf die Schaltfläche „Abspielen“ klicken, um die gesamte Sequenz zu betrachten. Bei der Wiedergabe sollte das Element die Bühne von links nach rechts entlangrollen und einen Farbübergang von Grau nach Rot aufweisen.

    Hinweis:

    Hinweis: In diesem Beispiel haben wir die Stecknadel auf der Zeitleiste an einem relativ zum Abspielkopf früheren Zeitpunkt platziert. Dies ist jedoch nicht zwingend der Fall. Die Stecknadel kann auch an einem späteren Zeitpunkt in Relation zum Abspielkopf platziert werden und dasselbe Verhalten zeigen: Die aktuellen Eigenschaften werden an der Position der Stecknadel, die angepassten Eigenschaften hingegen an der Position des Abspielkopfs fixiert.

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.

Hinweis:

Hinweis: Übergänge können auf Basis von Objekten oder von Eigenschaften angepasst werden, was eine große Flexibilität beim Festlegen des Bewegungsverhaltens ermöglicht.

Ü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.

Hinweis:

Wenn Sie das Abschwächungsverhalten eines Übergangs ändern möchten, können Sie den Übergangsblock des Elements insgesamt oder einzelne Eigenschaftsübergänge auswählen, um demselben Element eine Reihe von Übergangstypen zuzuweisen. Dies ist ganz flexibel möglich.

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.

Hinweis:

Die in Edge Animate enthaltenen Algorithmen für die Übergangsabschwächung lassen sich in ähnlicher Form in vielen ActionScript-Bibliotheken für die Animation von Flash Professional-Inhalten finden. Im Gegensatz zu Flash Professional können die Vorgaben in Edge Animate noch nicht durch Benutzer angepasst werden.

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.

Hinweis:

Fast alle diese Übergangstypen liegen in drei Varianten vor: Beschleunigung, Abbremsen und Beschleunigung/Abbremsen.

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.

Hinweis:

Wenn Sie mit der Maus auf einen Übergang zeigen, der auf diese Art verändert werden kann, nimmt der Cursor die Form zweier Linien mit zwei in entgegengesetzte Richtung zeigenden Pfeilen an.

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.

Hinweis:

Wenn ein Schlüsselbild ausgewählt werden kann, nimmt der Cursor die Form einer kleinen deutenden Hand an. Eine Interaktion mit Schlüsselbildern von gesperrten Elementen ist nicht möglich.

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.

Hinweis:

Diese Ressourcen sind Teil der Dateien für dieses Kapitel und befinden sich im Ordner banner_assets.

Projekt einrichten, Ressourcen importieren, 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.

  1. Erstellen Sie ein neues Edge Animate-Projekt und speichern Sie es auf der lokalen Festplatte.

  2. Passen Sie die Bühne über das Eigenschaften-Bedienfeld wie folgt an:

    • Bühne B: 940 px
    • Bühne H: 198 px
    • Hintergrundfarbe: #000000
    • Überlauf: hidden
  3. Rufen Sie das Applikationsmenü auf und wählen Sie Datei | Importieren… aus, um den Dateibrowser aufzurufen.

  4. Wählen Sie alle PNG-Dateien im Ressourcen-Ordner aus und klicken Sie auf Öffnen. Die ausgewählten Dateien werden nun auf der Bühne platziert und außerdem der Bibliothek des Projekts hinzugefügt.

  5. Das Hintergrundbild ist genauso groß wie die Bühne und sollte sie ganz ausfüllen.

  6. Ordnen Sie die Albumsgrafik gleichmäßig am Bühnenboden an, wie aus der folgenden Abbildung hervorgeht. Das Bildmaterial kann mit der Maus oder dem Bearbeiten-Bedienfeld angeordnet werden. Die Abstände sollten gleich sein.

  7. Es fehlt noch ein Titel für diese Header-Animation. Wir verwenden das Textwerkzeug, um oben auf dem Header einen Namen einzufügen. Rufen Sie jetzt das Textwerkzeug (T) auf.

  8. Fügen Sie der Bühne ein neues Textelement hinzu und geben Sie die Bezeichnung An Early Morning Letter, Displaced in das Feld ein.

  9. Klicken Sie bei ausgewähltem Textelement in das Eigenschaften-Bedienfeld und nehmen Sie die
    folgenden Anpassungen vor:

    • ID: Titel
    • Position X: 16 px
    • Position Y: 11 px
    • Schriftart: Arial Black, Gadget, sans-serif
    • Schriftgrad: 40 px
    • Schriftfarbe: #bbbbbb
  10. Die Komposition sollte nun wie in der folgenden Abbildung aussehen:

Animation von Elementen ausführen

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.

  1. Klicken Sie mithilfe des Auswahlwerkzeugs auf das Hintergrundbild, um dessen Eigenschaften aufzurufen.

  2. Verschieben Sie die Stecknadel auf der Zeitleiste zu 00:07.000 und den Abspielkopf zu 00:00.000.

  3. Nehmen Sie im Eigenschaften-Bedienfeld die folgenden Anpassungen vor:

    • Skalierung (verknüpft): 115 %
    • Deckkraft: 25 %
  4. Klicken Sie auf der Zeitleiste auf den gerade erstellten Übergang, um ihn auszuwählen.

  5. Ändern Sie auf der Zeitleiste die Abschwächungseinstellung in Abbremsen | Sinus. Damit legen Sie fest, wie der Übergang bei der Wiedergabe verläuft. Lassen Sie die Skalierungsübergänge auf Linear eingestellt.

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.

  1. Klicken Sie mithilfe des Auswahlwerkzeugs auf das Element fvm001, um dessen Eigenschaften aufzurufen.

  2. Verschieben Sie die Stecknadel auf der Zeitleiste zu 00:02.090 und den Abspielkopf zu 00:00.000.

  3. Nehmen Sie im Eigenschaften-Bedienfeld die folgende Anpassung vor:

    • Position X: 986 px
  4. Klicken Sie auf der Zeitleiste auf den gerade erstellten Deckkraft-Übergang, um ihn auszuwählen.

  5. Ändern Sie die Abschwächungseinstellung auf der Zeitleiste in Abbremsen | Springen. Damit legen Sie fest, wie der Übergang bei der Wiedergabe verläuft.

  6. Wiederholen Sie diese Schritte für jedes der Albumbilder.

    Hinweis:

    In Edge Animate ist es auch möglich, verschiedene Elemente eines Übergangs aus einem Objekt in ein anderes einzufügen. Für wiederholbare Übergänge wie hier eignen sich die Befehle „Inhalte einfügen“
    im Menü „Bearbeiten“ der Applikation.

Animieren des Titeltexts

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

  1. Klicken Sie mithilfe des Auswahlwerkzeugs auf das Element Titel, um dessen Eigenschaften aufzurufen.

  2. Verschieben Sie die Stecknadel auf der Zeitleiste zu 00:06.000 und den Abspielkopf zu 00:05.000.

  3. Nehmen Sie im Eigenschaften-Bedienfeld die folgende Anpassung vor:

    • Deckkraft: 0 %
  4. Klicken Sie auf der Zeitleiste auf den gerade erstellten Übergang, um ihn auszuwählen.

  5. Ändern Sie die Abschwächungseinstellung auf der Zeitleiste in Beschleunigung | Kubisch. Damit legen Sie fest, wie der Übergang bei der Wiedergabe verläuft.

Wir kommen zum Schluss.

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:

Hinweis:

In Edge Animate ist es leicht, schnell einen Überblick über eine Komposition zu gewinnen. Dafür stehen detaillierte Übergangsindikatoren zur Verfügung, die den bestimmten Elementeigenschaften entsprechen.

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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie