So verwenden Sie Bildlaufeffekte in Adobe Muse

In diesem Abschnitt werden Ihnen einige der vielen Einsatzbereiche von Bildlaufeffekten vorgestellt, um interaktive Funktionen, eine besondere Site-Navigation und ausdrucksstarke bewegte Grafiken zu Ihren Muse-Sites hinzuzufügen.

Gehen Sie zu Beginn wie folgt vor:

1. Besuchen Sie die Site mit Live-Beispielen und klicken Sie auf jeden Abschnitt, um Beispiele für die einzelnen Verwendungszwecke anzuzeigen. Führen Sie auf jeder Beispielseite einen Bildlauf nach unten durch, um zu sehen, wie mit Bildlaufeffekten die Anzeige der Seitenelemente gesteuert wird.
2. Führen Sie einen Bildlauf zum Ende der Live-Beispiel-Site durch, um die MUSE-Datei herunterzuladen.
3. Öffnen Sie die Beispiel-Site und überprüfen Sie das Projekt im Muse-Arbeitsbereich.
4. Öffnen Sie das Ebenenbedienfeld und erweitern Sie den Abschnitt „Inhalt“, um die Elemente anzuzeigen, die zum Erstellen der einzelnen Beispiele verwendet wurden.

Stück-für-Stück-Effekt

Bei diesem Effekt fliegt ein Satz einzelner Elemente ein und wird auf der Seite wieder zusammengesetzt, während der Besucher einen Seitenbildlauf nach unten durchführt. Grafiken und Textrahmen werden mithilfe von Bildlaufeffekten gesteuert, bei denen eine interaktive Sammlung erstellt wird, als ob die Teile eines Puzzles zusammengesetzt werden würden. Dies ist eine faszinierende Möglichkeit, um Produktdetails auf einer Webseite zu präsentieren.

Für dieses Beispiel wird der Abschnitt „Erste Bewegung“ auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds verwendet, damit die Elemente zu einem konsolidierten Design zusammengefügt werden. Nachdem alle Teile die vorgesehene Position erreicht haben, werden die Einstellungen „Letzte Bewegung“ auf 0 gesetzt, um ein Verschieben der vorhandenen Elemente zu verhindern, während neue Elemente einfliegen.

Führen Sie folgende Schritte aus, um einen ähnlichen Stück-für-Stück-Effekt 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 14,120 Pixel festgelegt.
2. Verwenden Sie das Textwerkzeug, um einen Textrahmen zu erstellen, und geben Sie den gewünschten Text ein.
3. Öffnen Sie die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds und aktivieren Sie das Kontrollkästchen „Bewegung“. In diesem Beispiel bewirken die Einstellungen im Abschnitt „Erste Bewegung“, dass der Textrahmen mit der 0,25-fachen (d. h. 1/4) Bildlaufgeschwindigkeit nach unten an die Position verschoben wird. Wenn die Seite die Ankerposition für den Textrahmen erreicht, gelangt der Textrahmen an die Position in der Entwurfsansicht. Dank der Einstellungen „Letzte Bewegung“ (0 für beide Richtungen) bleibt das erste Element an Ort und Stelle, als wenn es fixiert wäre.
4. Eine PNG-Datei mit Transparenz (Kontur eines Mobiltelefons) wird unter dem Textrahmen platziert. Dieses Element nutzt die Einstellungen in der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds, um von der linken Seite der Seite einzufliegen, sich in Position zu bringen und dort zu bleiben.
5. Kurz darauf folgt ein kleineres weißes Element der Telefonkontur mit einem ähnlichen Bewegungsmuster, indem es vom linken Rand der Seite einfliegt und dann an der Position verankert wird. Die weiße Grafik simuliert dabei die Hörmuschel am oberen Ende eines Mobiltelefons. Dieses Element (phone-earpiece.png) wird über der Mobiltelefonkontur im Ebenenbedienfeld angeordnet, sodass es im Entwurf über der Telefonkontur angezeigt wird. 
6. Direkt hinter der Hörmuschel fliegt ein kleines weißes Element, das die Home-Taste des Telefons simuliert, von rechts ein, imitiert dabei das Verhalten der Hörmuschel und wird im Entwurf ebenfalls über der Mobiltelefonkontur angezeigt.
7. Als Nächstes verwendet eine hellfarbige rechteckige Grafik mit einem leichten vertikalen Weiß-zu-Hellgrau-Verlauf die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds, um an die Position zu gelangen, damit sie genau in den transparenten Mittelbereich der Mobiltelefonkontur passt. Sobald die Grafik die Position erreicht hat, bleibt sie dort, und erweckt den Anschein eines Telefon-Displays. Das Display-Element (phone-screen.png) wird im Ebenenbedienfeld unten angeordnet, sodass es im Seitendesign hinter allen anderen Elementen angezeigt wird.
8. Eine Gruppe aus vier Rechtecken (homogen gefüllt mit Blau, Grün, Gelb und Rot) wird dann als Nächstes an die richtige Position verschoben. Um einen Effekt von verstreuten Teilen, die aufeinander zu fliegen, zu erzielen, wird auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds für jedes Rechteck eine andere Richtung und Geschwindigkeit festgelegt. Das blaue Rechteck fliegt nach unten rechts, das grüne und gelbe Rechteck fliegen nach oben rechts und das rote Rechteck fliegt nach oben links im Abschnitt „Erste Bewegung“. Im Abschnitt „Letzte Bewegung“ wurde für alle Rechtecke der Wert 0 für beide Richtungen festgelegt, dadurch verhält sich jedes Element so, als wäre es an einer Position verankert, sobald es seine Zielposition über dem Mobiltelefon-Display erreicht hat.
9. Nachdem alle anderen Teile zusammengesetzt wurden, wird ein zweites Textfeld nach oben bewegt und befindet sich unterhalb des ersten Textfelds. Dieses Textfeld bewegt sich mit der halben (0,5) Geschwindigkeit der Seitenbildlaufgeschwindigkeit.

Es sind noch zwei Elemente am unteren Rand übrig: ein einfarbiges Rechteck, das mit derselben homogenen Farbe gefüllt ist wie die Seite (sodass es im Design unsichtbar ist), und dahinter eine Gruppe von Objekten (ein gelbes Rechteck mit einer Glühlampengrafik).

Das einfarbige Rechteck dient dazu, die Gruppe auszublenden, die dahinter angeordnet ist.

10. Das Rechteck wird im Grunde an der Position verankert und bewegt sich nie, da alle Werte in den Feldern „Erste Bewegung“ und „Letzte Bewegung“ auf 0 gesetzt werden. Während ein Seitenbildlauf an die Ankerposition der Gruppe durchgeführt wird, die die Glühlampengrafik enthält, wird sie nach links verschoben wird und ist sichtbar, da sie nicht mehr vom Rechteck darüber verdeckt wird. Die Glühlampengruppe befindet sich auf einer Ebene über dem Display-Element des Mobiltelefons aber unter der Mobiltelefonkontur, sodass die Glühlampengrafik mit einer Wischbewegung an die Position zu gelangen scheint (ganz so wie bei einem echten Telefon bei einem horizontalen Wischvorgang). Die Glühlampengruppe verdeckt das Verlaufsrechteck, das zuvor das Display des Telefons dargestellt hat.

Wie Sie anhand dieses einfachen Beispiels sehen, können Sie eine Kombination aus einer sehr hohen Seite, einer Reihe von Elementen, die im Ebenenbedienfeld strategisch in Ebenen angeordnet werden, und der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds verwenden, um den Eindruck zu vermitteln, dass Einzelteile bei einem Seitenbildlauf nach unten in einer Animation zusammengeführt werden.

Schiebe-Menü

Der Schiebe-Menü-Effekt verwendet viele derselben Konventionen, die bereits für den Stück-für-Stück-Effekt beschrieben wurden. Mithilfe der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds scheinen die Elemente einzufliegen und Rechtecke verdecken einige der Elemente, bis sie auf dem Seitendesign eingeblendet werden sollen.

In diesem Beispiel werden strategisch positionierte Rechteckgruppen verwendet, um den Eindruck eines komplexen winkligen Designs zu vermitteln.

Schauen Sie sich die Beispiel-Site in einem Browser an, um das Flugzeug horizontal von rechts nach links über die Seite fliegen zu sehen, gefolgt von einem Satz stilisierter Menüoptionen und von einem Verlaufshintergrund mit Schrägstreifen.

Führen Sie folgende Schritte aus, um einen ähnlichen Schiebe-Effekt 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 4.665 Pixel festgelegt.
2. Das Flugzeugbild befindet sich auf einer Ebene über allen anderen Inhalten der Seite, sodass es an oberster Stelle in der Liste im Ebenenbedienfeld angezeigt wird. Auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds wird das Bild so eingerichtet, dass es vor und nach der Ankerposition nach links bewegt wird.
   

3. Vier Textrahmen sind so konfiguriert, dass sie nach links einfliegen und vertikal gestapelt werden, um zu einem Navigationsmenü zusammengefügt zu werden. Auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds wird für jeden Textrahmen im Abschnitt „Erste Bewegung“ dieselbe Geschwindigkeit (1,25-fache Bildlaufgeschwindigkeit) festgelegt. Jeder Textrahmen hat auch eine andere Ankerposition. Beim Seitenbildlauf nach unten wird jeder Textrahmen an die Position geschoben und links im Design ausgerichtet. Alle Textrahmen weisen im Abschnitt „Letzte Bewegung“ die Werte 0,0 auf, wodurch die Menüelemente, sobald sie die Position erreicht haben, dort verankert werden.
4. Die Textrahmen werden mit einer homogenen Hintergrundfarbe gefüllt, auch wenn sie auf den ersten Blick wie Bilder aussehen, da sie diagonal zugeschnittene Seiten anstelle von geraden, vertikalen Kanten haben. Dieser Effekt wird erzielt, indem eine Gruppe aus drei Rechtecken in einer Ebene über dem Textrahmen angeordnet wird, die mit der Farbe der Browser-Füllung gefüllt sind.

5. Die Textrahmen-Animation ist anfänglich von einer anderen Rechteckgruppe verdeckt, da die Textrahmen unter der Gruppe im Ebenenbedienfeld angeordnet sind. Die Gruppe ist eine Kombination aus drei Rechtecken: ein größeres Rechteck mit einem vertikalen Verlauf und zwei andere kleinere Rechtecke (ein Quadrat und ein gedrehtes Rechteck), die mit einer homogenen Farbe gefüllt sind, die der Hauptfarbe des Verlaufs entspricht.

6. Wenn Sie einen Bildlauf nach unten durchführen, um den unteren Rand der Gruppe zu überprüfen, finden Sie vier weitere Rechtecke mit unterschiedlicher Breite, die gedreht sind und über der unteren rechten Ecke des größeren Verlaufsrechtecks ausgerichtet sind.
   

Gruppen sind gut geeignet, um mehrere Elemente zu kombinieren und um sie als einzelnes Element zu steuern. In diesem Beispiel wurden auf Gruppen mit verschiedenen Rechtecken Bewegungsbildlaufeffekte angewendet, sodass die Gruppe als Einheit verschoben wird.

Dieses Beispiel zeigt auch den kreativen Einsatz von negativem Raum. Wenn als Browser-Füllung eine homogene Hintergrundfarbe angewendet wurde, können Sie viele interessante Ausschnitteffekte kreieren, indem Sie Rechtecke, die mit derselben Farbe gefüllt sind, über anderen Rechtecken in Ebenen anordnen. Anstatt Grafiken in einem Bildbearbeitungsprogramm zu entwerfen und ein einzelnes Bild zu platzieren, können Sie Rechtecke verwenden, um Grafiken im Muse-Arbeitsbereich zu erstellen.

Verblassen

Dieses Beispiel eines animierten Sonnenaufgangs und Sonnenuntergangs wird mithilfe einer Kombination aus zwei Bildlaufeffekten erzielt: Bewegung und Deckkraft. In diesem Beispiel wird ein Seitenhintergrund mit einer Verlaufsfüllung und mit einem einzelnen platzierten PNG-Bild einer Sonne verwendet. Das PNG-Bild enthält transparente Bereiche, sodass die Flächenfarbe des Seitenhintergrunds sichtbar ist.

Überprüfen Sie die Beispiel-Site in einem Browser, um zu sehen, wie die Sonne von anfänglich 100 % Transparenz langsam eingeblendet wird und über die Seite wandert. An der höchsten Stelle ist sie vollständig deckend, wenn Sie jedoch den Bildlauf weiter nach unten fortsetzen, geht die Sonne unter und wird erneut schrittweise transparent, bis sie letztlich vollständig verschwindet.
Führen Sie folgende Schritte aus, um einen ähnlichen Verblasseneffekt zu erzielen:

1. Wählen Sie in der Entwurfsansicht „Seite“ > „Seiteneigenschaften“. Legen Sie als Mindesthöhe einen größeren Wert fest als der, der auf einem durchschnittlichen Bildschirm angezeigt werden kann, sodass ein Seitenbildlauf möglich ist. Im Site-Beispiel ist die Mindesthöhe der Seite auf 2.988 Pixel festgelegt.
2. Das Sonnenbild wird in der Mitte der Seite platziert. Auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds wird die Ankerposition auf 1.410 Pixel festgelegt. Beachten Sie auch die Einstellungen für die Abschnitte „Erste Bewegung“ und „Letzte Bewegung“.

Durch diese Einstellungen bewegt sich die Sonne entlang eines halbkreisförmigen Pfads von der unteren linken Ecke der Seite bis zur oberen Mitte des Bogens (wo die Ankerposition erreicht ist) und dann zurück nach unten in die untere rechte Ecke der Seite.

3. Klicken Sie bei ausgewählter Sonne auf die Registerkarte „Deckkraft“, um die Einstellungen zu überprüfen. Verblassen-Position 1 ist auf 726 Pixel (über der Sonne) festgelegt. Verblassen-Position 2 ist auf 1925 Pixel (unter der Sonne) festgelegt. Die Sonne hat anfangs eine Deckkraft von 0 % (vollständig transparent) und wird dann vollständig deckend, während ein Seitenbildlauf bis zur Ankerposition durchgeführt wird. Wenn ein Seitenbildlauf unter die Ankerposition der Sonne durchgeführt wird, ändert sich die Deckkraft von 100 % in 0 %, um die Sonne mittels des Verblassen-Effekts ein- und auszublenden.
   

4. Testen Sie die Seite, indem Sie „Datei“ > „Seitenvorschau in Browser“ wählen. Führen Sie einen Seitenbildlauf durch, um die Sonne aufgehen zu sehen, während sie eingeblendet wird, und dann wieder rechts unten untergehen zu sehen, während sie ausgeblendet wird.
5. Schließen Sie den Browser und kehren Sie zum Muse-Arbeitsbereich zurück.

Edge Animate

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.

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.

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.

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

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.

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

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.

Diashow-Effekt

Sie können steuern, wie ein Bildersatz in Bezug auf den Seitenbildlauf in einem Diashow-Widget angezeigt wird. Dazu muss ein Diashow-Widget auf einer Seite eingefügt werden, um dann über die Registerkarte „Diashow“ des Bildlaufeffekte-Bedienfelds die Diashow-Optionen zu aktualisieren.

In diesem Beispiel wird die Diashow mit einer Reihe von Bildern gefüllt, die eine 360-Grad-Rundumansicht eines Rucksacks ergeben. Sie können ähnliche Diashowbilder aufnehmen, indem Sie ein Stativ aufstellen und Fotos eines Objekts machen, das auf einer Drehplatte steht. Dieser Effekt ist nützlich, um eine interaktive Produktbeschreibung anzubieten, die es potenziellen Kunden ermöglicht, einen Artikel vor dem Kauf aus allen Richtungen zu betrachten.

Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit einem Diashow-Widget 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 7.465 Pixel festgelegt.
2. Es wird ein Textrahmen mit dem Wort „Superpack“ und mit Bildlaufeffekten eingerichtet. Konfigurieren Sie in der Registerkarte „Bewegung“ die Einstellungen für „Erste Bewegung“, um den Text in derselben Geschwindigkeit wie der Seitenbildlauf von links nach rechts zu verschieben. Unter „Letzte Bewegung“ sind beide Richtungen auf 0 gesetzt, daher bleibt der Textrahmen an der Position, als wäre er auf der Seite verankert worden.
    

3. Öffnen Sie die Widgets-Bibliothek und ziehen Sie ein Diashow-Widget in die Mitte der Seite, rechts neben der Endposition des Textrahmens.
4. Verwenden Sie die Option „Bilder hinzufügen“ im Menü „Optionen“, um die Diashow mit Bilddateien zu füllen. 

Sie können bei ausgewählter Diashow das Diashow-Widget auswählen und die Verankerungsschnittstelle im Steuerungsbedienfeld verwenden, um die Diashow an der Position zu verankern. Sie können auch etwas experimentieren, indem Sie ein Vollbild-Diashow-Widget hinzufügen und es mit Bildlaufeffekte steuern. 

5. Öffnen Sie bei ausgewählter Diashow die Registerkarte „Diashow“ des Bildlaufeffekte-Bedienfelds und aktivieren Sie das Kontrollkästchen „Diashow“.
6. Ziehen Sie den Quergriff oder geben Sie einen Wert in das Feld ein, um die Ankerposition festzulegen. In diesem Beispiel ist die Ankerposition auf 1066 Pixel festgelegt.
7. Aktivieren Sie die Optionsschaltfläche „Wechseln der Folien jede“ und legen Sie im Feld darunter 50 Pixel fest.
   

8. Testen Sie die Seite in der Vorschau oder in einem Browser. Führen Sie einen Seitenbildlauf nach unten durch, sodass der Rucksack sich zu drehen scheint. Sie können auch Bilder erstellen, die nach oben zu fliegen oder nach unten zu fallen scheinen, indem Sie die Diashow mit mehreren ähnlichen, jedoch leicht unterschiedlichen Bilddateien füllen, in etwa wie bei Frames in einer animierten GIF-Datei.
9. Nachdem Sie die Bildlaufeffekte getestet haben, wechseln Sie zur Entwurfsansicht in Muse zurück, um mit der Bearbeitung der Seiten fortzufahren.
   

Aufrollen

Mithilfe der Bildlaufeffekte können Sie eine sehr lange Seite erstellen, die in mehrere Abschnitte mit extrem unterschiedlichem Erscheinungsbild unterteilt wird. Wenn der Besucher einen Seitenbildlauf nach unten durchführt, scheinen die Seitenabschnitten aufzurollen und weisen animierte Texteffekte und Trennrahmen auf, die mithilfe von Schatteneffekten erstellt wurden.

Sie können Anker-Tags verwenden oder einen Hinweis einfügen, um die Besucher dazu anzuregen, einen Seitenbildlauf nach unten durchzuführen, um die einzelnen Abschnitte anzuzeigen. Wenn Sie am unteren Rand der Beispiel-Site angekommen sind und auf die Schaltfläche „Zurück zum Seitenanfang“ klicken, sehen Sie wie die gesamte Seite vorbeiläuft, während die Ankerverknüpfung zum oberen Rand des Seitendesigns zurückkehrt.

Führen Sie folgende Schritte aus, um einen ähnlichen Aufrolleffekt 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 16.990 Pixel festgelegt.
2. Legen Sie im Menü „Browser-Füllung“ die Farbe der Browser-Füllung auf Blau fest.

3. Verwenden Sie bei ausgewählter Seite das Menü „Fläche“, um die Seitenfarbe auf „Ohne“ festzulegen, sodass die blaue Browser-Füllung hindurch scheint.
4. Führen Sie einen Seitenbildlauf nach unten durch, bis Sie etwa 2248 Pixel vom oberen Seitenrand entfernt sind. Verwenden Sie das Rechteckwerkzeug, um ein Rechteck zu zeichnen, das Pixel 3000 Pixel breit und 2000 Pixel hoch ist. Verwenden Sie das Auswahlwerkzeug, um das Rechteck auf der Seite zu zentrieren, wobei beide Seiten über die Seiten des Browserfensters hinausragen.
5. Während das Rechteck noch ausgewählt ist, verwenden Sie das Menü „Fläche“, um eine homogene grüne Flächenfarbe festzulegen. Verwenden Sie das Menü „Effekte“, um einen Schatteneffekt festzulegen.

6. Aktivieren Sie, während das grüne Rechteck ausgewählt ist, das Kontrollkästchen „Bewegung“ in der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Klicken Sie auf den Quergriff und ziehen Sie ihn auf die Ankerposition am oberen Rand des Rechtecks, die in der Beispiel-Site bei 2.248 Pixel liegt.

7. Legen Sie im Abschnitt „Erste Bewegung“ das Rechteck so fest, dass es sich mit 1,5-facher Bildlaufgeschwindigkeit nach oben bewegt. Setzen Sie alle anderen Richtungen auf 0.
8. Verwenden Sie das Textwerkzeug, um ein Textfeld in der Nähe des grünen Rechtecks zu erstellen. In diesem Beispiel steht Folgendes im Textfeld: „This is the roll-up“. Sie können jedoch einen beliebigen Text eingeben und die gewünschte Textformatierung anwenden.
9. Aktivieren Sie bei ausgewähltem Textrahmen die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Ziehen Sie den Quergriff, um ihn am oberen Rand des grünen Rechtecks auszurichten und um die Einstellungen zu aktualisieren, um zu steuern, wie der Textrahmen beim Seitenbildlauf angezeigt wird.

10. Setzen Sie unter „Erste Bewegung“ die nach unten gerichtete Bewegung auf die 1,5-fache Bildlaufgeschwindigkeit. Setzen Sie alle anderen Werte im Bedienfeld auf 0. Dadurch wird das Textfeld nach unten verschoben und bewegt sich in dieselbe Richtung und mit derselben Geschwindigkeit wie das grüne Rechteck. Das Rechteck und der Textrahmen bleiben an der Position, wenn ein Seitenbildlauf über die Ankerpositionen hinaus durchgeführt wird.
11. Wenn Sie auf „Vorschau“ klicken, können Sie einen Bildlauf nach unten durchführen, wobei das grüne Rechteck und das Textfeld von oben nach unten rollen. Klicken Sie auf „Entwurf“, wenn Sie die Prüfung abgeschlossen haben, um mit der Bearbeitung fortzufahren.
12. Verwenden Sie das Menü „Ansicht“, um das Site-Design um 10 % auszuzoomen. Wählen Sie das grüne Rechteck und das Textfeld aus. Halten Sie die Options- bzw. die Alt-Taste gedrückt, während Sie die beiden Elemente auf der Seite weiter nach unten ziehen, um sie zu kopieren. Legen Sie als Flächenfarbe des duplizierten Rechtecks Dunkelblau fest und verwenden Sie das Textwerkzeug, um den Textinhalt zu aktualisieren.

In diesem Beispiel enthält der duplizierte Textrahmen den Text: „Use it to drastically alter the appearance of your website“ (Verwenden Sie dies, um das Erscheinungsbild Ihrer Website maßgeblich zu verändern). Sie können jedoch einen beliebigen Text eingeben, um den dunkelblauen Bereich der Seite zu identifizieren.

13. Mithilfe des Auswahlwerkzeugs positionieren Sie das duplizierte Rechteck und den Textrahmen etwa 5.448 Pixel unterhalb des oberen Rands der Seite.
14. Überprüfen Sie, während das dunkelblaue Rechteck ausgewählt ist, die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Die Ankerposition wurde automatisch mit der neuen Position des Rechtecks (5448px) aktualisiert und die Abwärtsrichtung im Abschnitt „Erste Bewegung“ ist weiterhin so eingerichtet, dass es mit der 1,5-fachen Bildlaufgeschwindigkeit bewegt wird, (und alle anderen Werte sind auf 0 gesetzt). Wenn Sie den duplizierten Textrahmen prüfen, können Sie sehen, dass die Bildlaufeffekte auch für das kopierte Objekt beibehalten wurden.
15. Wiederholen Sie die Schritte 12 und 13 weitere vier Mal, um sechs verschieden große Rechtecke mit Textrahmen darüber zu erstellen. Auf jedes Rechteck wurden der Schatteneffekt und die Bildlaufeffekteinstellungen bereits angewendet. Positionieren Sie die letzten vier Rechtecke an den folgenden Ankerpositionen: 8.648 Pixel, 11.852 Pixel, 15.058 Pixel und 18.251 Pixel, sodass jeder Abschnitt durch etwa 1.200 Pixel voneinander getrennt ist.
16. Verwenden Sie das Menü „Fläche“, um die Flächenfarbe der Rechtecke festzulegen und um andere Farben anzuwenden. Experimentieren Sie, indem Sie sowohl homogene Farben als auch Verlaufsfarben auf die Fläche anzuwenden, sodass alle Abschnitte auf der Seite sich von den anderen unterscheiden und einen Kontrast bilden.
17. Verwenden Sie das Textwerkzeug, um den Textinhalt für jeden Abschnitt zu aktualisieren. Beispielsweise können Sie Text eingeben, sodass die Hintergrundfarbe des Rechtecks darunter angegeben wird, z. B.: „This is the blue section“ (Dies ist der blaue Abschnitt).
18. Testen Sie die Seite, indem Sie „Datei“ > „Seitenvorschau in Browser“ wählen. Führen Sie einen Bildlauf der Seite durch, um die verschiedenen Seitenabschnitte anzuzeigen, die dann durch den nächsten Seitenabschnitt ersetzt werden.
19. Schließen Sie den Browser und kehren Sie zum Muse-Arbeitsbereich zurück.
    

Dynamischer Text

Sie können ungewöhnliche typografische Designs durch eine Kombination aus Bewegungsbildlaufeffekten und Adobe Edge Web Fonts erstellen. Mithilfe von Webschriften können Sie Text mit einer breiten Palette von Schriften gestalten, die beim Laden der Seite geladen werden. Anstatt Bilder von Text, die in einem Bildbearbeitungsprogramm erstellt wurden, zu platzieren und zu animieren, können Sie großartig aussehende Seiten erstellen, die sich einfacher mit Edge Web Fonts aktualisieren lassen. Die Bildlaufeffekte erzeugen darüber hinaus einen dramatischen Eindruck einer Animation, wenn ein Seitenbildlauf durchgeführt wird.

Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit dynamischem Text 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 4.854 Pixel festgelegt.
2. Legen Sie die Flächenfarbe für die Seite auf „Ohne“ fest. Die Farbe der Browser-Füllung ist nicht von Bedeutung, da die Seite im nächsten Schritt durch ein langes Rechteck verdeckt wird.
3. Verwenden Sie das Rechteckwerkzeug, um ein großes Rechteck zu zeichnen, das etwa 1.159 Pixel breit und 4.854 Pixel hoch ist. Verwenden Sie das Menü „Fläche“, um das Rechteck mit einer homogenen Farbe oder einem Farbverlauf zu füllen. In diesem Beispiel wird ein Verlauf von Blaugrün zu Pink als Füllung angewendet. Verwenden Sie das Auswahlwerkzeug, um das Rechteck zu zentrieren, damit es den gesamten Browserbereich füllt. Falls gewünscht, können Sie die Ansicht verkleinern, um sicherzustellen, dass das Rechteck auf der Seite zentriert ist.

4. Nachdem Sie das Rechteck zentriert haben, setzen Sie den Zoomfaktor im Menü „Ansicht“ wieder auf 100 %.
5. Verwenden Sie das Textwerkzeug am linken Rand der Seite, um mehrere Textrahmen zu erstellen. In diesem Beispiel gibt es insgesamt fünf Textrahmen. Der Inhalt der einzelnen Textrahmen wird unten angezeigt, aber Sie können einen beliebigen Text in jeden Textrahmen eingeben:
   • Five Frames (Fünf Rahmen)
   • Scrolling (Bildlauf)
   • At Different Speeds Will (Mit unterschiedlicher Geschwindigkeit)
   • Create (Erstellen)
   • Dynamic Tension (Dynamische Spannung)

Als optionalen zusätzlichen Schritt können Sie einige der Textrahmen kopieren und dann leicht unterschiedliche Stile anwenden. In diesem Beispiel wurde der Textrahmen mit dem Wort „Create“ (Erstellen) kopiert und dann wurden die beiden Versionen übereinander angeordnet, um einen hellblauen Schlagschatteneffekt zu erzielen.

6. Verwenden Sie das Textwerkzeug, um die einzelnen Textrahmen auszuwählen. Verwenden Sie das Textbedienfeld (oder die Textformatierungsoptionen im Steuerungsbedienfeld), um verschiedene Webschriften, Schriftgrößen, Schriftfarben sowie andere Typografie-Einstellungen anzuwenden, um eindrucksvolle Textrahmen zu erstellen.
7. Wählen Sie alle Textrahmen aus. Öffnen Sie bei ausgewählten Textrahmen die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Geben Sie denselben numerischen Wert ein, um die Ankerposition für alle ausgewählten Textrahmen sofort festzulegen. (In diesem Beispiel ist die Ankerposition auf 1372 Pixel gesetzt.) Legen Sie auch die horizontale Richtung für beide Abschnitte „Erste Bewegung“ und „Letzte Bewegung“ auf „Rechts“ fest. Legen Sie alle vertikale Richtungen für die Abschnitte „Erste Bewegung“ und „Letzte Bewegung“ auf 0 fest, damit die Textrahmen nicht vertikal verschoben werden.
8. Klicken Sie außerhalb des Textrahmens und dann auf jeden Textrahmen einzeln. Geben Sie leicht unterschiedliche Werte für jeden Textrahmen ein. In der unten stehenden Liste steht der erste Wert für die Geschwindigkeit der ersten Bewegung und der zweite Wert für die Geschwindigkeit der letzten Bewegung für die horizontale Richtung (rechts):
   • Five Frames (Fünf Rahmen): .9x, .1x
   • Scrolling (Bildlauf): .12x, .5x
   • At Different Speeds Will (Mit unterschiedlicher Geschwindigkeit): .7x, .17x
   • Create (Erstellen): 1.1x, .005x
   • Dynamic Tension (Dynamische Spannung): 1x, .01x
     

9. Verwenden Sie das Textwerkzeug, um ein Textfeld zu erstellen, und geben Sie die Zahl 5 auf der rechten Seite der Seite ein. Auch hier können Sie sich dazu entscheiden, den Textrahmen zu kopieren, und dann andere Farben und Textformatierungen anwenden, um den Eindruck von abgeflachten Kanten und Schlagschatten zu verleihen. Wenn Sie zu Designzwecken Duplikate eines Textrahmens erstellen, gruppieren Sie die Textrahmen, sodass Sie Bildlaufeffekte auf die Gruppe anwenden können.
10. Aktivieren Sie bei ausgewähltem Textfeld mit der Nummer 5 das Kontrollkästchen „Bewegung“ in der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Legen Sie die Ankerposition numerisch fest oder ziehen Sie den Quergriff (in diesem Beispiel liegt die Position bei 1425 Pixel). Richten Sie im Abschnitt „Erste Bewegung“ das Element so ein, dass es mit der gleichen Geschwindigkeit wie die Bildlaufgeschwindigkeit nach links bewegt wird. Richten Sie im Abschnitt „Letzte Bewegung“ das Element so ein, dass es mit der 0,01-fachen Bildlaufgeschwindigkeit nach links bewegt wird.
11. Testen Sie die Seite, indem Sie „Datei“ > „Seitenvorschau in Browser“ wählen. Führen Sie einen Bildlauf der Seite durch, sodass die fünf Textrahmen von links auf die Seite bewegt werden, während der Textrahmen mit der Nummer 5 von rechts in die Anzeige hereinkommt. Führen Sie einen Bildlauf von oben und unten durch, um eine Animation der Textrahmen zu beobachten.
12. Schließen Sie den Browser und kehren Sie zum Muse-Arbeitsbereich zurück.
     

Gestapeltes Menü

Sie können eine ansprechende interaktive Site-Navigation mithilfe von Bildlaufeffekten erstellen, sodass die verschiedenen Schaltflächen in den sichtbaren Bereich auf der Seite einfliegen und sich dann zu einer Menüleiste ausrichten. In diesem Beispiel bewegen sich vier Rollover-Schaltflächen beim Bildlauf vom unteren Rand der Seite nach oben und werden an der Position fixiert, um eine vertikale Menüleiste anzuzeigen.

Sobald die vier Schaltflächen ausgerichtet sind, fliegt der Hintergrundinhalt (in Form einer Glühlampengrafik, von farbigen Hintergrundbereichen, eines Textrahmens und von diagonalen Eckstreifen) von beiden Seiten der Seite ein, um einen Site-Abschnitt zu erstellen.

Obwohl die Schaltflächen in diesem Beispiel nicht verknüpft sind, können Sie, falls gewünscht, Verknüpfungen über das Dropdown-Menü „Hyperlink“ hinzufügen, damit Besucher darauf klicken können, um eine neue Seite zu laden, oder Anker-Tags verwenden, um zu einer anderen Position auf der aktuellen Seite zu springen.

Führen Sie folgende Schritte aus, um einen ähnlichen Effekt eines gestapelten Menüs 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. Setzen Sie die Flächenfarbe der Seite auf „Ohne“ und legen Sie die Browser-Füllung auf eine homogene Flächenfarbe fest. In der Beispiel-Site wird die Browser-Füllung auf eine helle Farbe festgelegt.
3. Verwenden Sie das Textwerkzeug, um einen neuen Textrahmen zu erstellen. Geben Sie das Wort „Home“ ein. Verwenden Sie die Formatierungsoptionen im Steuerungsbedienfeld, um dem Textrahmen eine Hintergrundfarbe hinzuzufügen. Aktualisieren Sie auch die Formatierungsoptionen, um den Text wie gewünscht zu formatieren. Verwenden Sie die Griffe an den Seiten der Schaltfläche, um die Breite auf etwa 300 Pixel und die Höhe auf etwa 115 Pixel zu erweitern.

4. Öffnen Sie das Statusbedienfeld. Wählen Sie den Rollover-Status aus und fügen Sie eine andere Flächenfarbe hinzu (oder wenden Sie das gewünschte Format an), um eine Rollover-Schaltfläche zu erstellen.

5. Nach Aktualisierung des Rollover-Status, wählen Sie den Status „Normal“ erneut aus.
6. Öffnen Sie die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Aktivieren Sie bei ausgewählter Schaltfläche das Kontrollkästchen „Bewegung“. Legen Sie die Ankerposition fest, indem Sie den Quergriff ziehen oder einen numerischen Wert eingeben. Legen Sie im Abschnitt „Erste Bewegung“ fest, dass die Bewegung nach oben in 0,75-facher Bildlaufgeschwindigkeit erfolgt. Lassen Sie alle anderen Felder auf 0 gesetzt.

7. Halten Sie beim Ziehen der „Home“-Schaltfläche an eine Stelle weiter unten auf der Seite die Options- bzw. die Alt-Taste gedrückt. Dadurch wird eine Kopie der ausgewählten Schaltfläche erstellt. Stellen Sie sicher, dass die Kopie vertikal an der ursprünglichen „Home“-Schaltfläche ausgerichtet ist. Wenn die beiden Elemente ausgerichtet sind und die Kopie weiterhin ausgewählt ist, wird vorübergehend eine dunkelblaue intelligente Hilfslinie in der Mitte angezeigt.

8. Verschieben Sie die duplizierte Schaltfläche auf der Seite nach unten, etwa 460 Pixel unterhalb der ursprünglichen Schaltfläche.
9. Wiederholen Sie die Schritte 7 und 8, um die Schaltfläche weitere zwei Mal zu kopieren, um insgesamt vier Schaltflächen zu erstellen, die gleichmäßig auf der Seite verteilt werden. Verwenden Sie das Textwerkzeug, um die zweite, dritte und vierte Schaltfläche von oben zu bearbeiten, um den Textinhalt mit diesen Beschriftungen zu aktualisieren: Products (Produkte), Photos (Fotos) und Contact Us (Kontakt).

Wenn Sie die erste „Home“-Schaltfläche kopiert haben, haben Sie auch die Formatierung des Textrahmens und dessen Inhalts sowie die Bildlaufeffekteinstellungen kopiert. Wenn Sie eine der kopierten Schaltflächen auswählen und das Bildlaufeffekte-Bedienfeld öffnen, erkennen Sie, dass die Einstellungen in der Registerkarte „Bewegung“ den Einstellungen entsprechen, die auf die „Home“-Schaltfläche angewendet wurden, und dass die Ankerposition für jede Schaltfläche 460 Pixel unter der vorherigen Schaltfläche liegt (d. h. im gleichen Abstand wie zwischen den einzelnen Schaltflächen auf der Seite).

10. Berechnen Sie die Gesamthöhe der vier Schaltflächen, wenn sie an den endgültigen Positionen ausgerichtet sind, indem Sie die Höhe und Abstände addieren. In der Beispiel-Site sind die Schaltflächen jeweils 116 Pixel hoch und haben jeweils 4 Pixel Abstand. Das bedeutet, dass die Gesamthöhe der vertikalen Menüleiste (nach Zusammensetzung) 476 Pixel beträgt. Verwenden Sie das Rechteckwerkzeug, um ein Rechteck zu zeichnen, das die gewünschte Breite des Seitenbereichs und dieselbe Höhe wie die Menüleiste hat. In diesem Beispiel ist das Rechteck 931 Pixel breit und 476 Pixel hoch.
11. Wenn Sie das Design in der Beispiel-Site replizieren möchten, können Sie für die Flächenfarbe des Rechtecks ein blasses Pink auswählen, in einem helleren Farbton als der Normal-Status der Schaltflächen. Sie können bei Bedarf auch abgerundete Ecke erstellen, indem Sie einen Eckradiuswert im Steuerungsbedienfeld eingeben. In diesem Beispiel werden alle vier Ecken auf 10 Pixel gesetzt.

12. Verwenden Sie das Auswahlwerkzeug, um das Rechteck an der Oberkante auszurichten, sodass es etwa 5094 Pixel vom oberen Seitenrand entfernt ist. Stellen Sie auch sicher, dass die linke Seite des Rechtecks vertikal an der linken Seite der Schaltflächen ausgerichtet ist. In der Beispiel-Site sind das Rechteck und alle Schaltflächen 14 Pixel vom linken Rand der Seite entfernt. Sie können diese Einstellungen sehen, indem Sie ein Element auswählen und das Transformierenbedienfeld öffnen. Der x-Wert ist der Abstand vom linken Rand (14 Pixel) und der y-Wert ist der Abstand vom oberen Seitenrand (5094 Pixel).
13. Während das Rechteck noch ausgewählt ist, öffnen Sie das Bildlaufeffekte-Bedienfeld und aktivieren Sie das Kontrollkästchen „Bewegung“ in der Registerkarte „Bewegung“. Legen Sie die Ankerposition auf 4979 fest.
14. Legen Sie die „Erste Bewegung“ fest, damit eine Bewegung nach rechts in der gleichen Geschwindigkeit wie der Bildlauf erfolgt. Lassen Sie alle anderen Felder in der Registerkarte „Bewegung“ auf 0 gesetzt.

15. Um sicherzustellen, dass das Rechteck hinter den vier Schaltflächen angeordnet wird, wählen Sie bei ausgewähltem Rechteck „Objekt“ > „In den Hintergrund“.
16. Wählen Sie „Datei“ > „Platzieren“ und wählen Sie eine Bilddatei aus. Klicken Sie dann einmal auf die Seite, um sie zu platzieren. In diesem Beispiel wird eine PNG-Datei mit Transparenz platziert, um ein Glühlampenbild anzuzeigen. Die Glühlampe wird auf dem großen Rechteck platziert, d. h. auf der rechten Seite, weg von dem Bereich, der von den Menüschaltflächen verdeckt werden wird. In diesem Beispiel ist das Bild 501 Pixel vom linken Rand (x-Position) und 5245 Pixel vom oberen Rand der Seite (y-Position) entfernt.
17. Damit das platzierte Bild hinter den vier Schaltflächen angeordnet wird, wählen Sie „Objekt“ > „In den Hintergrund“, während das Bild ausgewählt ist. Das Ziel ist die Anzeige des platzierten Bilds über dem großen Rechteck jedoch hinter den vier Schaltflächen.
18. Öffnen Sie die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds, solange das platzierte Bild ausgewählt ist, und aktivieren Sie das Kontrollkästchen „Bewegung“. Stellen Sie die Ankerposition auf den gewünschten Wert ein. In der Beispiel-Site ist er auf 4979 Pixel festgelegt.
19. Im Abschnitt „Erste Bewegung“ legen Sie den Wert „Rechts“ so fest, dass er mit 0,75-facher Bildlaufgeschwindigkeit verschoben wird. Setzen Sie alle anderen Richtungswerte auf 0.

20. Verwenden Sie das Textwerkzeug, um einen Textrahmen zu erstellen. In der Beispieldatei enthält der Textrahmen den folgenden Inhalt: mit Stapeln verknüpfte Textrahmen mit kontrastreichen Rollovers, um ungewöhnliche Menüs zu erstellen. Sie können jedoch einen beliebigen Text eingeben. Verwenden Sie die Formatierungsoptionen im Steuerungsbedienfeld, um den Text bei Bedarf zu formatieren. In diesem Beispiel wurde auf den Textrahmen keine Hintergrundflächenfarbe angewendet.
21. Verwenden Sie das Auswahlwerkzeug, um den Textrahmen rechts vom platzierten Bild zu positionieren. In diesem Beispiel wird der Textrahmen auf einen x-Wert von 357 Pixel (von links) und einen y-Wert von 5136 Pixel (von oben) festgelegt. Die tatsächliche Position hängt vom Textinhalt und den Formatierungsoptionen ab, die Sie auf den Textrahmen anwenden.
22. Verwenden Sie bei ausgewähltem Textrahmen entweder „Objekt“ > „Schrittweise nach hinten“, um ihn anzuordnen, oder verschieben Sie ihn im Ebenenbedienfeld, sodass der Textrahmen hinter den vier Schaltflächen, jedoch über dem großen Rechteck, angezeigt wird.
23. Aktivieren Sie das Kontrollkästchen „Bewegung“ im Bildlaufeffekte-Bedienfeld. Legen Sie die Ankerposition fest, indem Sie den Quergriff ziehen oder einen Wert eingeben. In der Beispiel-Site ist die Ankerposition auf 4979 Pixel festgelegt, derselbe Ankerpositionswert, der von dem platzierten Bild verwendet wird (Glühlampengrafik).
24. Legen Sie im Abschnitt „Erste Bewegung“ den Textrahmen so fest, dass er mit der halben (0,5-fachen) Bildlaufgeschwindigkeit nach links verschoben wird. Setzen Sie alle anderen Felder auf 0.

Der grundlegende Abschnitt mit dem gestapelten Menü ist jetzt fertig. Es gibt jedoch ein weiteres Grafikelement, das Sie hinzufügen können. Dazu müssen Sie mehrere gedrehte Rechtecke über der unteren rechten Ecke des großen Rechtecks hinzufügen, genauso wie beim Schiebemenü-Beispiel gedrehte Rechtecke verwendet wurden, um einen Schrägstreifeneffekt hinzuzufügen.

25. Verwenden Sie das Rechteckwerkzeug, um mehrere Rechtecke mit unterschiedlicher Breite zu zeichnen. Füllen Sie die Rechtecke mit derselben Farbe wie der des Hintergrunds, die auf die Browser-Füllung angewendet wurde. Auf diese Weise sind die Rechtecke nicht mehr sichtbar, bis das große Rechteck nach rechts hinter ihnen in Position geschoben wird. Falls gewünscht, können Sie den Satz diagonaler Rechtecke gruppieren, um mit ihnen als einzelnes Element arbeiten zu können.

26. Verwenden Sie, falls erforderlich, das Ebenenbedienfeld oder wählen Sie „Objekt“ > „In den Hintergrund“, um das größere Rechteck im Hintergrund anzuordnen, hinter allen anderen Elementen auf der Seite.
27. Achten Sie darauf, den Fortschritt regelmäßig zu testen, indem Sie auf „Vorschau“ klicken oder eine Seitenvorschau in einem Browser anzeigen und einen Bildlauf nach unten durchführen, um die Bewegung des gestapelten Menüs zu beobachten. Kehren Sie zu Muse zurück, wenn Sie die Prüfung abgeschlossen haben. 

Bewegter Hintergrund

Um den Effekt eines bewegten Hintergrunds zu erstellen, können Sie mehrere große Rechtecke erstellen, die mit gekachelten Hintergrundbildern gefüllt sind, die die Länge einer langen Seite abdecken. In diesem Beispiel wird die Registerkarte „Bildlauf“ des Menüs „Fläche“ (anstelle der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds) verwendet, um die Bewegungseinstellungen anzuwenden.

Führen Sie folgende Schritte aus, um einen ähnlichen Effekt eines bewegten Hintergrunds 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 6254 Pixel festgelegt.

2. Verwenden Sie das Rechteckwerkzeug, um am Anfang der Seite ein großes Rechteck zu zeichnen. In der Beispiel-Site ist das Rechteck 1159 Pixel breit und 1312 Pixel hoch. Verwenden Sie das Auswahlwerkzeug, um das Rechteck auf der Seite zu zentrieren, wobei beide Seiten über die Seiten des Browserfensters hinausragen.
3. Verwenden Sie bei ausgewähltem Rechteck das Menü „Fläche“, um ein Hintergrundbild festzulegen. Wählen Sie im Menü „Anpassen“ die Option „Neben-/Untereinander“ aus, um das Bild zu kacheln.

4. Falls gewünscht, können Sie das Menü „Effekte“ verwenden, um einen Schatteneffekt festzulegen, um einen eindrucksvollen Rahmen um das Rechteck zu erstellen.
5. Öffnen Sie die Registerkarte „Bildlauf“ des Menüs „Fläche“, während das gefüllte Rechteck ausgewählt ist. Aktivieren Sie das Kontrollkästchen „Bewegung“ und klicken Sie dann auf den Quergriff und ziehen Sie ihn oder geben Sie einen Wert in das Feld ein, um die Ankerposition festzulegen. In der Beispiel-Site wird die Ankerposition auf 512 Pixel festgelegt. Sie können jedoch, falls gewünscht, den Griff an der oberen Kante des Rechtecks ausrichten und dort ablegen.
6. Legen Sie im Abschnitt „Erste Bewegung“ die Richtung nach unten und links fest und setzen Sie beide Geschwindigkeiten auf die 0,2-fache Bildlaufgeschwindigkeit. Wiederholen Sie dieselben Einstellungen im Abschnitt „Letzte Bewegung“. 

7. Wiederholen Sie die Schritte 2 bis 6, um ein anderes gefülltes Rechteck zu erstellen. Positionieren Sie das neue Rechteck direkt unterhalb des ersten Rechtecks, das Sie erstellt haben, damit kein Browserfüllbereich sichtbar und somit kein Freiraum zwischen den beiden Rechtecken vorhanden ist. Füllen Sie das neue Rechteck mit einer anderen Hintergrundfüllung mit gekachelten Bildern.
8. Wiederholen Sie Schritt 7, um ein weiteres großes Rechteck zu erstellen, das direkt unter dem zweiten Rechteck positioniert wird. Verwenden Sie das Menü „Fläche“, um ein anderes gekacheltes Hintergrundbild festzulegen. Vielleicht ist es hilfreich, wenn Sie die Ansicht über das Menü „Ansicht“ verkleinern, um alle Rechtecke anzuzeigen und vertikal auf der Seite auszurichten.

9. Öffnen Sie, während das zweite Rechteck ausgewählt ist, die Registerkarte „Bildlauf“ des Menüs „Fläche“. Aktualisieren Sie den Abschnitt „Erste Bewegung“, um das Rechteck mit der 0,3-fachen Bildlaufgeschwindigkeit nach rechts zu verschieben. Wenden Sie im Abschnitt „Letzte Bewegung“ dieselben Einstellungen an, um das Rechteck mit der 0,3-fachen Bildlaufgeschwindigkeit nach rechts zu verschieben. Lassen Sie beide Felder für die vertikale Richtung auf 0 gesetzt.

10. Wählen Sie das dritte Rechteck aus und aktualisieren Sie die Einstellungen in der Registerkarte „Bildlauf“ des Menüs „Fläche“. Geben Sie im Abschnitt „Erste Bewegung“ die Einstellungen so ein, dass die Bewegung mit der 0,25-fachen Bildlaufgeschwindigkeit nach oben und mit 0,6-fachen Bildlaufgeschwindigkeit nach links erfolgt. Verwenden Sie für das dritte Rechteck die gleichen Einstellungen im Abschnitt „Letzte Bewegung“.
11. Testen Sie die Seite, indem Sie „Datei“ > „Seitenvorschau in Browser“ wählen. Führen Sie einen Seitenbildlauf durch, um die diagonale Verschiebung der einzelnen gekachelten Rechtecke anzuzeigen, bis Sie einen Bildlauf zum unteren Rand der Seite durchführen. Beim Bildlauf bewegen sich auch die Rechtecke.
12. Schließen Sie den Browser und kehren Sie zum Muse-Arbeitsbereich zurück.

Masken

In diesem Beispiel wird ein Balkendiagramm an der vorgegebenen Position animiert. Eine rosafarbene Pfeilgrafik dehnt sich nach oben aus und windet sich um die Balken des Diagramms. Obwohl die Balken im Diagramm vom unteren Rand des Diagramms größer zu werden scheinen, handelt es sich tatsächlich um einfarbige Rechtecke, auf die Bewegungsbildlaufeffekte angewendet wurden, die hinter größeren weißen Rechtecken hervorkommen (die in dem gleichen Weißton wie der Seitenhintergrund gefüllt sind).

In diesem Beispiel werden zusammen mit Bildlaufeffekten mehrere Techniken verwendet. Die Elemente werden mithilfe des Ebenenbedienfelds vor- und hintereinander angeordnet. Weiße Rechtecke werden über den Diagrammelementen gezeichnet. Wenn die weißen Rechtecke das Balkendiagramm abdecken, sind die Balken und der Pfeil nicht mehr sichtbar, so als wären sie maskiert. Für die Bewegungsbildlaufeffekte der weißen Rechtecke und der Diagrammtabelle wird die Einstellung „0“ verwendet, damit sie beim Seitenbildlauf an der vorgegebenen Position bleiben. Auf die Balken und die rosafarbene Pfeilgrafik, die darunter angeordnet sind, wurden Bewegungsbildlaufeffekte angewendet, sodass sie in den Vordergrund rücken und somit sichtbar werden, während das Balkendiagramm aufgebaut wird.

Führen Sie folgende Schritte aus, um einen ähnlichen Maskierungseffekt 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 6076 Pixel festgelegt.
2. Legen Sie für die Seiten- und die Browser-Füllung die Farbe Weiß fest (oder jede andere gewünschte Farbe; verwenden Sie jedoch dieselbe Farbe, um damit später die Maskenrechtecke zu füllen).
3. Verwenden Sie das Rechteckwerkzeug, um ein großes Rechteck auf der Seite zu zeichnen. Das Rechteck in der Beispiel-Site ist 804 Pixel breit und 489 Pixel hoch.
4. Legen Sie die Flächenfarbe des Rechtecks auf „Ohne“. Legen Sie eine Konturfarbe Ihrer Wahl fest. Legen Sie im Menü „Kontur“ fest, dass die linke und die untere Seite des Rechtecks eine Kontur mit einer Stärke von 20 aufweisen, während die obere und die rechte Seite auf 0 gesetzt sind, um die Kontur auszublenden. Dies stellt die Grundlage des Balkendiagramms dar.
    

5. Öffnen Sie bei ausgewähltem Rechteck die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Legen Sie die Ankerposition fest und geben Sie in allen vier Felder 0 ein. Diese Einstellung bedeutet, dass das Rechteck nicht bewegt wird, bevor oder nachdem die Ankerposition erreicht wurde, sodass das Element an der Position bleibt.

6. Verwenden Sie das Rechteckwerkzeug, um zwei größere Rechtecke zu zeichnen. Zeichnen Sie das erste Rechteck, das an der linken Seite des Diagramms ausgerichtet ist. In der Beispiel-Site ist das Rechteck 657 Pixel breit und 1810 Pixel hoch.
7. Zeichnen Sie das zweite Rechteck unterhalb des Diagramms, um es am unteren Rand auszurichten. In der Beispiel-Site ist das Rechteck 1002 Pixel breit und 1541 Pixel hoch.
8. Legen Sie die Flächenfarbe beider Rechtecke auf Weiß (oder dieselbe Farbe wie die der Browser-Füllung) und die Kontur auf 0 fest. Verwenden Sie das Auswahlwerkzeug, um die Rechtecke an den beiden Seiten des Diagramms auszurichten.
   

9. Klicken Sie, während beide Rechtecke ausgewählt sind, mit der rechten Maustaste und wählen Sie „Objekt“ > „Gruppieren“, um die beiden Maskenrechtecke zu gruppieren.
10. Öffnen Sie bei ausgewählter Rechteckgruppe die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds. Legen Sie die Ankerposition (in diesem Beispiel 1516 Pixel) fest und geben Sie in alle vier Felder 0 ein. Dies bedeutet, dass die Gruppe der weißen Rechtecke sich nicht bewegt, bevor oder nachdem die Ankerposition erreicht wurde. Die Gruppe bleibt an der Position genauso wie die äußere Tabelle für das Diagramm.
11. Verwenden Sie das Ebenenbedienfeld, um die Gruppe vorübergehend auszublenden und zu sperren.
12. Führen Sie einen Bildlauf nach unten bis zu dem Bereich unter der Gruppe durch und verwenden Sie das Rechteckwerkzeug, um insgesamt fünf Rechtecke zu zeichnen, die alle dieselbe Breite haben. In der Beispiel-Site sind alle Balken 74 Pixel breit und haben unterschiedliche Höhen. Von links nach rechts haben die fünf Rechtecke im Beispiel die folgenden Höhenwerte: 141, 188, 292, 444 und 583. Alle Rechtecke werden mit derselben grünen Farbe wie die Kontur gefüllt, die den linken und unteren Rand des Diagramms definiert.

13. Die Positionen der Rechtecke (von links nach rechts) sind nachfolgend durch Angabe ihres x- und y-Werts aufgeführt:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
14. Wählen Sie als Nächstes jedes Rechteck aus, beginnend mit dem Rechteck auf der linken Seiten bis hin zu dem auf der rechten Seite. Wählen Sie die einzelnen Rechtecke aus, aktivieren Sie das Kontrollkästchen „Bewegung“ in der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds und legen Sie die folgenden Ankerpositionen fest:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. Aktualisieren Sie, während alle Rechtecke ausgewählt sind, die Einstellungen im Bildlaufeffekte-Bedienfeld, damit der „Erste Bewegung“-Abschnitt mit derselben Geschwindigkeit wie der Bildlauf nach oben verschoben wird. Setzen Sie alle anderen Felder auf 0.
     

16. Platzieren Sie eine PNG-Datei mit Transparenz auf der Seite. In der Beispiel-Site ist die PNG-Datei eine Grafik eines rosafarbenen Blitzpfeils nach oben. Die für dieses Beispiel verwendete PNG-Datei ist 695 Pixel breit und 443 Pixel hoch. Verschieben Sie sie, nachdem Sie sie auf der Seite platziert haben, an die Position X: 78 und Y: 3427.
17. Ordnen Sie die PNG-Datei im Ebenenbedienfeld an, sodass sie sich unter dem ersten und dritten Balkenrechteck (von links), jedoch über dem zweiten, vierten und fünften Balken befindet.

18. Öffnen Sie bei ausgewähltem Pfeilbild die Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds und aktivieren Sie das Kontrollkästchen „Bewegung“. Legen Sie die Ankerposition fest (in diesem Beispiel 3238 Pixel). Legen Sie für den Abschnitt „Erste Bewegung“ die Richtung der Bewegung nach oben und nach rechts fest und geben Sie die 0,25-fache Bildlaufgeschwindigkeit in den beiden Feldern „Erste Bewegung“ ein. Setzen Sie beide Felder im Abschnitt „Letzte Bewegung“ auf 0.

19. Zeigen Sie die Gruppe der beiden weißen Rechtecke an, die Sie zuvor ausgeblendet und gesperrt haben, und entsperren Sie sie im Ebenenbedienfeld. Verschieben Sie die Gruppe über die anderen Elemente, damit sie über den anderen Inhalten auf der Seite angezeigt wird. Da die Gruppe im Vordergrund ist, fungiert sie als Maske, um die Balken und die Pfeilgrafiken nur anzuzeigen, wenn sie im Rahmen des Diagramms nach oben geschoben werden.
20. Testen Sie die Seite, indem Sie „Datei“ > „Seitenvorschau in Browser“ wählen. Führen Sie einen Seitenbildlauf durch, um anzuzeigen, wie das Balkendiagramm an die Position bewegt wird, während die beiden weißen Rechtecke, die die Balken maskieren, die Balkendiagrammelemente ausblenden, bis sie innerhalb des Diagramms sind.
21. Schließen Sie den Browser und kehren Sie zum Muse-Arbeitsbereich zurück.

Beispiele für Site-Designs mit Bildlaufeffekten

Sehen Sie sich die Demential Lab-Website an, um die Bildlaufeffekte-Funktion in Aktion zu erleben.