Erfahren Sie, wie Sie interaktive Muse-Websites mit Animationen und Rolleffekten, die mit Adobe Edge Animate erstellt wurden, erstellen.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Adobe Edge Animate ist ein Designwerkzeug für Interaktion im Web, mit dem Sie mithilfe von Webstandards wie HTML5 animierte Inhalte für Websites erstellen können. Über die intuitive Zeitleisten-Schnittstelle in Animate können Sie visuell überzeugende HTML5-Animationen erstellen, die in allen modernen Browsern wiedergegeben werden.

Vorbereiten von Animationen in Animate

Bevor Sie Animate-Inhalte in Muse verwenden, können Sie einige Änderungen vornehmen, um die Animate-Datei für ein nahtloses Einbetten in Muse vorzubereiten. Führen Sie die folgenden Schritte durch:

  1. Starten Sie Animate. Das Startfenster wird angezeigt.

  2. Klicken Sie auf „Datei öffnen“ und wählen Sie dann die heruntergeladenen Beispielprojektdateien aus (sie sind an der Dateierweiterung „.an“ erkennbar). Wenn Sie möchten, können Sie auch eine von Ihnen selbst erstellte Animate-Datei öffnen.

    In Adobe Muse können Sie Edge Animate-Animationen einbetten.
    Klicken Sie auf die Verknüpfung „Datei öffnen“ im Startfenster.

  3. Klicken Sie auf „Öffnen“, um die „.an“-Datei zu öffnen und schließen Sie das Dialogfeld „Öffnen“. Das Projekt wird im Arbeitsbereich von Animate angezeigt.

    Projekt wird
    Das Animate-Projekt wird auf der Bühne angezeigt.

    Die Animationen, die mit Animate erstellt wurden, werden entweder automatisch abgespielt („Automatisch abspielen“) oder müssen durch Klick auf ein unbewegtes Bild während des Ladevorgangs aktiviert werden. Das Beispiel „SkyScraper“ wird automatisch abgespielt und erfordert keine weitere Benutzer-Interaktion. Wenn das automatische Abspielen deaktiviert ist, wird ein statisches Bild auf der Seite angezeigt, bis auf die Animation geklickt wird. Wenn Sie ein Beispiel einer Animation, die nicht automatisch abgespielt wird, anzeigen möchten, dann besuchen Sie „Animate Showcase“.

    Hinweis:

    Wenn Sie steuern möchten, ob eine Animation sofort abgespielt wird, wählen Sie die Bühne aus und aktivieren bzw. deaktivieren Sie anschließend das Kontrollkästchen für die Option „Automatisch abspielen“ im Bedienfeld „Eigenschaften“.

    Wiedergabe-OPTION
    Aktivieren Sie „Automatisch abspielen“, um die Animation automatisch abzuspielen.

  4. Klicken Sie auf das Hintergrundbild, um es auf der Bühne auszuwählen. Während es ausgewählt ist, wird ein blauer Begrenzungsrahmen angezeigt, und das Bedienfeld „Eigenschaften“ auf der linken Seite zeigt die Eigenschaften des Bildes an (Image2 in diesem Beispiel). Drücken Sie die Rücktaste (Windows) bzw. die Rückschritttaste (Mac OS), um die Hintergrundbilddatei zu entfernen.

    Blauer Begrenzungsrahmen
    Wählen Sie das Hintergrundbild aus und löschen Sie es.

  5. Während die Bühne noch ausgewählt ist, klicken Sie auf das Farbfeld für die Bühne im Bedienfeld „Eigenschaften“ und wählen Sie die Option „Transparent“.

    Wahl
    Stellen Sie die Hintergrundeigenschaft der Bühne auf „Transparent“ ein.

    Hinweis:

    Der Inhalt auf der Bühne wird mit einem weißen Hintergrund angezeigt. Der transparente Hintergrund ist auf der Bühne nicht sichtbar, es sei denn, Sie exportieren die Animation oder zeigen sie in der Vorschau an.

  6. Wählen Sie „Datei“ > „Speichern“ aus, um die zuletzt vorgenommenen Änderungen zu speichern.

  7. Wählen Sie „Datei“ > „Einstellungen für Veröffentlichungen“ aus, um das Dialogfeld „Einstellungen für Veröffentlichungen“ zu öffnen.

  8. Navigieren Sie zur Spalte „Veröffentlichungsziel“ auf der linken Seite, deaktivieren Sie das Kontrollkästchen „Online“ und wählen Sie dann die Option „Animate-Bereitstellungs-Paket“ aus.

  9. Klicken Sie auf „Speichern“, um die vorgenommenen Änderungen zu speichern und schließen Sie das Dialogfeld „Einstellungen für Veröffentlichungen“.

  10. Wählen Sie „Datei“ > „Veröffentlichen“ aus, um das Projekt zu veröffentlichen.

  11. Beenden Sie Animate. Verwenden Sie den Windows Explorer (oder den Mac OS-Finder), um zum Animate-Projektordner auf der Festplatte zu navigieren. Nachdem Sie das Projekt veröffentlicht haben, finden Sie einen Ordner namens „Animate-Paket“. Die OAM-Datei in diesem Ordner wird verwendet, um Ihrer Muse-Site Animate-Inhalte hinzuzufügen.

  12. Kopieren Sie die OAM-Datei und speichern Sie sie im Ordner auf Ihrem Desktop, der alle anderen Bilder und Site-Elemente für Ihre Website enthält. Nachdem Sie die Animation veröffentlicht und die Datei in Ihrem Site-Ordner gespeichert haben, fahren Sie mit dem nächsten Abschnitt fort, um den Animate-Inhalt in eine Seite einzufügen.

Einfügen von mit Animate erstellten Animationen in eine Muse-Webseite

Führen Sie die folgenden Schritte aus, um die Animation in eine Seite Ihrer Muse-Website einzufügen:

  1. Starten Sie Adobe Muse und öffnen Sie die Site, die Sie bearbeiten möchten.

  2. Doppelklicken Sie in der Ansicht „Planung“ auf den Namen der Seite, in die Sie die Animation einfügen möchten.

  3. Wählen Sie zuerst „Datei“ > „Platzieren“ und dann die OAM-Datei in Ihrem Site-Ordner aus.

  4. Klicken Sie einmal auf die Seite, um die Animation zu platzieren.

    Hinweis:

    Anders als beim Platzieren von Bildern ist es bei Animationen in Animate nicht möglich, durch Klicken und Ziehen die Größe zu ändern. Wenn Sie den Inhalt in einer anderen Größe platzieren möchten, aktualisieren Sie das Edge-Projekt und veröffentlichen Sie die OAM-Datei erneut.

  5. Verwenden Sie das Werkzeug „Auswahl“, um die Animation an der gewünschten Position in die Seite einzufügen. Obwohl der Animationshintergrund in Muse deckend zu sein scheint, ist der Hintergrund transparent, wenn Sie die Seite in der Vorschau anzeigen oder veröffentlichen.

  6. Wählen Sie „Datei“ > „Seitenvorschau in Browser“ aus, um sicherzustellen, dass die Animation wie erwartet angezeigt wird. Wenn Sie Änderungen vornehmen möchten, kehren Sie zu Muse zurück und ordnen Sie die Seitenelemente neu an. Wenn Sie sich das Bedienfeld „Elemente“ ansehen, werden Sie feststellen, dass die OAM-Datei jetzt als Element angezeigt wird. Animationen, die mit Edge Animate erstellt wurden, können wie jedes andere Site-Element neu verknüpft und aktualisiert werden.

    Wenn Sie beispielsweise zu Animate zurückkehren, können Sie das Projekt öffnen und ändern. Wenn Sie später die OAM-Datei erneut veröffentlichen und die Version in Ihrem Site-Ordner ersetzen, zeigt das Bedienfeld „Elemente“ das Symbol für veraltete Verknüpfungen an. Das bedeutet, dass die Originaldatei bearbeitet wurde, seit das Element auf einer Seite platziert wurde.

    Um die von Ihnen eingefügte Datei zu aktualisieren, klicken Sie mit der rechten Maustaste auf den OAM-Dateinamen im Bedienfeld „Elemente“ und wählen Sie dann „Erneut verknüpfen“ aus.

    Die Option „Erneut verknüpfen“ aktualisiert das eingefügte Element, damit es mit der bearbeiteten Quelldatei übereinstimmt. Dies ist eine einfache Möglichkeit, um die Animation schnell zu aktualisieren, im Gegensatz zum manuellen Löschen und Ersetzen der Dateien.

  7. Klicken Sie auf den Link „Veröffentlichen“ im Steuerungsbedienfeld. Wählen Sie die gewünschten Optionen aus und klicken Sie dann auf „OK“, um die Site-Updates zu veröffentlichen.

Weitere Informationen zum Erstellen von HTML5-Webinhalten und -Animationen mithilfe von Adobe Edge Animate finden Sie unter Ressourcen für Adobe Edge Animate. Weitere Tipps für das Arbeiten mit Muse finden Sie auf der Seite Hilfe und Tutorials für Muse in Form von Tutorials oder der Seite mit Muse-Events in Form von Live-Webinaren und aufgezeichneten Videotutorials.

Einbetten von Rich-Media-Inhalt für die Animation von Site-Elementen

  1. Doppelklicken Sie in der Planungsansicht auf das Miniaturbild von MasterFlash, um sie zum Bearbeiten in der Entwurfsansicht zu öffnen. Beachten Sie, dass weiterhin das statische Logo vorhanden ist, da Sie zuvor die A-Musterseite dupliziert haben. Mithilfe des statischen Bildes können Sie leichter die Platzierung des Animationsrechtecks bestimmen. Denken Sie jedoch daran, das statisch platzierte Logo nach dem Einbetten des Rich-Media-Elements zu löschen.

  2. Wählen Sie „Datei“ > „Platzieren“. Navigieren Sie im Dialogfeld „Importieren“ zum Ordner „Kevins_Koffee_Kart“ und wählen Sie die Datei „logo.swf“ aus.

  3. Platzieren Sie die SWF-Datei in der oberen linken Ecke, d. h. der Position der vorhandenen Logobilddatei.

  4. Nachdem Sie das neue SWF-Fenster ausgerichtet haben, das Sie mit dem älteren statischen Logo platziert haben, löschen Sie das statische Logo, indem Sie es auswählen und die Entf-Taste drücken.

  5. Um zu überprüfen, wie die gesamte Site mit den neuen Änderungen an der Homepage aussehen wird, wählen Sie „Datei“ > „Site-Vorschau in Browser“, um die Anzeige des Logos auf verschiedenen Seiten zu testen. Ohne die Site zu veröffentlichen, können Sie lokal auf Ihrem Computer arbeiten und dann die Site in einem Browser in der Vorschau anzeigen, um über die Site-Navigation die einzelnen Seiten zu durchlaufen. Beachten Sie, dass die Animation (SWF-Datei) auf der Homepage einmal angezeigt wird und dann endet. Wenn Sie auf andere Seiten klicken, wird nur das statische Logo angezeigt.

    Hinweis:

    Wenn Sie „Datei“ > „Seitenvorschau in Browser“ wählen, wird das neue Browserfenster schneller geladen, um die Homepage anzuzeigen, aber es wird nur die aktive Seite (Homepage) in der Vorschau angezeigt. Wählen Sie diese Option, wenn Sie nur eine Seite der Site überprüfen möchten und nicht die gesamte Website.

Hinzufügen von Bildlaufeffekten zu Animationen

Adobe Muse ermöglicht Ihnen, Animationen zu Webseiten hinzuzufügen, die mit Adobe Edge Animate erstellt wurden. Der erste Schritt bei der Verwendung der Funktion „Bildlaufeffekte“ von Adobe Edge Animate besteht darin, eine Animation speziell für diesen Zweck zu erstellen.

Adobe Muse ermöglicht es Ihnen, Bildlaufeffekte zu OAM-Dateien hinzuzufügen, die sich auf die Animationen auswirken, die auf der Hauptzeitleiste platziert werden. Sie können die Animation strategisch gestalten, sodass sich nur Elemente, die Sie beim Seitenbildlauf verschieben möchten, in der Hauptzeitleiste befinden. Sie können interaktive Animationen erstellen. Die logische Folge ist, dass die restlichen Elemente in den verschachtelten Zeitleisten platziert werden müssen. Beim Durchführen des Bildlaufs steuern die Bildlaufeffekt-Einstellungen nur die Wiedergabe der animierten Elemente auf der Hauptzeitleiste.

Weitere Informationen zu Bildlaufeffekten in Adobe Muse finden Sie unter Bildlaufeffekte.

Führen Sie folgende Schritte aus, um mit der Registerkarte „Diashow“ im Bildlaufeffekte-Bedienfeld zu arbeiten:

  1. Exportieren Sie die OAM-Datei aus Animate und speichern Sie sie in Ihrem Site-Ordner. Weitere Informationen zum Exportieren von OAM-Dateien aus Animate finden Sie unter Platzieren von Animationen in Adobe Muse.
  2. Starten Sie Muse und doppelklicken Sie auf eine Seite, um sie in der Entwurfsansicht zu öffnen. Stellen Sie sicher, dass die Seite lang genug ist, um einen Bildlauf durchzuführen, indem Sie die Einstellungen für die Mindesthöhe im Dialogfeld „Seiteneigenschaften“ aktualisieren.
  3. Wählen Sie Datei > Platzieren und navigieren Sie zur OAM-Datei im Site-Ordner.
  4. Öffnen Sie das Bildlaufeffekte-Bedienfeld. Klicken Sie auf die Registerkarte „Adobe Edge Animate“ (vierte Registerkarte von links), um die Einstellungen für diesen Abschnitt zu überprüfen.
  5. Aktivieren Sie bei ausgewählter OAM-Datei das Kontrollkästchen „Edge Animate“.
Das erweiterte Bedienfeld für Bildlaufeffekte
Legen Sie die Edge Animate-Animation so fest, dass sie abgespielt wird, wenn ein Seitenbildlauf zu einer bestimmten Position durchgeführt wird, oder richten Sie sie so ein, dass der Frame bei jedem Seitenbildlauf um eine bestimmte Pixelanzahl wechselt.

Im Bild oben wird die Ankerposition auf 700 Pixel festgelegt. Sie können den Quergriff ziehen oder einen anderen Wert in das Feld „Ankerposition“ eingeben, um sie anzupassen.

Nach dem Einstellen der Ankerposition können Sie die Wiedergabe der Animation mithilfe von zwei Optionen steuern:

  • Automatisch abspielen: Wenn diese Option aktiviert ist, wird die Animation in der Hauptzeitleiste abgespielt, sobald im Browser ein Bildlauf an die Ankerposition durchgeführt wird, unabhängig von der Anzahl der Frames in der Hauptzeitleiste. Die Animation wird so lange weiter abgespielt, bis ein Seitenbildlauf an eine Position über der Ankerposition durchgeführt wird.
  • Anzeige wechseln alle: Wenn diese Option ausgewählt ist, wechselt die Hauptzeitleistenanimation ein Frame weiter, sobald ein Seitenbildlauf an eine Stelle hinter einer bestimmten Anzahl Pixel durchgeführt wird. Wenn Sie beispielsweise eine Seite mit einer Höhe von 3000 Pixel erstellen und den Wert 10 eingeben, wird die Hauptzeitleistenanimation beim Seitenbildlauf mit einer Geschwindigkeit von 1 Frame alle 10 Pixel abgespielt. Wenn der Besucher den Seitenbildlauf schneller durchführt, erhöht sich die Animationsrate.

Hinweis:

Bildlaufeffekt-Einstellungen wirken sich nicht auf animierte Objekte aus, die von der Hauptzeitleiste in der Animate-Komposition verknüpft oder eingebettet sind. Daher können Sie sich entweder für einen statischen Hintergrund entscheiden oder verschachtelte Elemente in einer kontinuierlichen Schleife schalten, die sich konsistent bewegen, unabhängig vom Eingriff des Benutzers, der den Seitenbildlauf durchführt.

  1. Nachdem Sie die Einstellungen in der Registerkarte „Edge Animate“ des Bildlaufeffekte-Bedienfelds ausgewählt haben, wählen Sie „Datei“ > „Seitenvorschau in Browser“ (oder klicken Sie auf die Schaltfläche „Vorschau“). Testen Sie die Seite, indem Sie einen Bildlauf nach oben und nach unten durchführen, um die Wiedergabe des Inhalts der Edge Animate-Animation (die der Hauptzeitleiste hinzugefügt wurde) anzuzeigen.
  2. Wenn Sie Änderungen vornehmen müssen, kehren Sie zu Muse zurück (oder klicken Sie auf die Schaltfläche „Entwurf“) und aktualisieren Sie die Einstellungen im Bildlaufeffekte-Bedienfeld.

Beispiel

Dieses Beispiel zeigt, wie Sie mithilfe von Bildlaufeffekten OAM-Dateien steuern können, die aus Adobe Edge Animate exportiert wurden. In diesem Beispiel ist die Seite mit einem vertikalen Verlauf gefüllt, der mit einer Helltürkis beginnt und dann in Dunkelblau übergeht. Sie können die Beispieldatei von ScrollEffects.com herunterladen.

Dieser animierte Effekt wird durch eine Kombination aus Einstellungen erzielt, die auf den Registerkarten „Bewegung“ und „Edge Animate“ angewendet werden.

Drei Instanzen derselben OAM-Datei werden horizontal nebeneinander platziert, um eine Reihe von animierten Kompassen zu erstellen. Wenn Sie die Beispiel-Site in einem Browser anzeigen, werden alle drei Kompasse sichtbar und bleiben an der Position. Jeder der drei Kompasse scheint sich mit einer anderen Geschwindigkeit zu drehen. Es sind jedoch die Einstellungen im Bildlaufeffekte-Bedienfeld, nicht der Aufbau der Edge-Animation-Datei, die dafür sorgen, dass sie sich mit unterschiedlichen Geschwindigkeiten drehen.

Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit drei platzierten OAM-Dateien zu erzielen:

  1. Wählen Sie in der Entwurfsansicht Seite > Seiteneigenschaften. Legen Sie für die Mindesthöhe einen wesentlich höheren Wert fest. Im Site-Beispiel ist die Mindesthöhe der Seite auf 7465 Pixel festgelegt.
  2. Wählen Sie alle drei Instanzen des Kompasses auf der Seite aus. Auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds können Sie sehen, dass alle drei OAM-Dateien dieselbe Ankerposition und dieselben Bewegungseinstellungen haben, da alle Werte angezeigt werden.
Die gleiche Ankerpositionen und dieselben Bewegungseinstellungen
Die Kompasse werden nach oben verschoben, bis die Seite beim Bildlauf ihre Ankerposition erreicht. Dann bleiben sie an ihrer Position, während der Seitenbildlauf nach unten fortgesetzt wird.

Wenn Sie eine Vorschau des Beispiels in einem Browser anzeigen, sehen Sie alle drei OAM-Elemente übereinstimmend nach oben springen, um dann in einer Reihe zum Stehen zu kommen, ganz so als wenn sie verankert wären.

  1. Klicken Sie außerhalb der Kompasse, um die Auswahl aller drei aufzuheben, und wählen Sie dann nur den linken Kompass aus. Halten Sie die Umschalttaste gedrückt und wählen Sie den rechten Kompass aus, um beide auszuwählen. Öffnen Sie die Registerkarte „Edge Animate“ des Bildlaufeffekte-Bedienfelds, um die Einstellungen zu überprüfen.
Schalterbilder alle 350 Pixel
Die Kompasse auf beiden Seiten sind so eingestellt, dass die Frames alle 350 Pixel wechseln.

Die beiden seitlichen Kompasse wurden so konfiguriert, dass sie die Zeitleistenanimation in einer Schleife durchlaufen und jedes Mal zum nächsten Frame wechseln, wenn ein Seitenbildlauf von 350 Pixel durchgeführt wird.

  1. Heben Sie die Auswahl der beiden äußeren Kompasse auf. Wählen Sie den mittleren Kompass aus und öffnen Sie erneut die Registerkarte „Edge Animate“, um zu überprüfen, dass in jedem Feld „Anzeige wechseln alle“ 400 Pixel angezeigt wird. Diese Einstellung sorgt dafür, dass die mittlere Animation im Vergleich zu den beiden äußeren Kompassen sich langsamer bewegt.
Schalterbilder alle 400 Pixel
Die mittlere OAM-Datei wurde so eingestellt, dass die Frames alle 400 Pixel gewechselt werden.

Sie können interessante Animationseffekte erstellen, indem Sie die Geschwindigkeit von mehreren platzierten Edge Animate-Animationen im Vergleich zur Seitenbildlaufgeschwindigkeit variieren. Sie können beispielsweise einen Fischschwarm, einen Himmel mit sich bewegenden Wolken oder andere Effekte erstellen, indem Sie mehrere Versionen der gleichen OAM-Datei hinzufügen, auf die unterschiedliche Bildlaufeffekteinstellungen angewendet wurden.

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