Adobe Catalyst setzt auf eine seitenbasierte Metapher, ähnlich wie Präsentationswerkzeuge. Dennoch bleibt genug Platz für hausgemachte Animationseffekte. In Teil 1 des Workshops haben wir ein statisches Interface erzeugt, in dem bis auf ein bisschen RollOver nichts passiert. Das ist natürlich erst die halbe Miete. Nun erzeugen wir verschiedene Animationsziele um einen sanften Übergang von einer Navigationsposition zur nächsten zu schaffen.
Soweit war unser Interface im Adobe Animate: Der Nachfolger von Flash des Workshops gediehen.
Kehren Sie zurück zur Normalansicht. Sie sehen links oben „Page1“. Direkt darunter finden Sie den Befehl „Status duplizieren“. Tun Sie das gleich drei Mal. Skalieren Sie nun die Karte so klein, dass sie gerade noch in das Sichtfenster passt.
Klicken Sie nun auf die „Page2“ und skalieren Sie dort die Landkarte auf ein optisch ertragbares Maximalniveau. Klicken Sie dann auf „Page3“ und später auf „Page4“ und tun Sie dort das gleiche. Natürlich verschieben Sie die Karte passend zu den jeweiligen Navigationsbegriffen auf den Buttons.
Nun klicken Sie den ersten Button an und gehen wir vorhin (in Teil 2) zum Bedienfeld „Interaktionen“. Dort wählen Sie nun den „Klick“ als Auslöser und „Übergang zu Status wiedergeben“. Nun werden Sie gefragt, welches der Zielstatus sein soll. Beachten Sie dabei die Checkbox unten. Das, was Sie hier wählen, wird automatisch auf jeden Status angewendet. Das ist gerade bei der Konfiguration von Navigationsbuttons segensreich einfach.
Ordnen Sie auch den anderen drei Buttons ihre Klickziele zu.
Weiche Bewegung
Wenn Sie jetzt die „Zeitachsen“ öffnen, Sehen Sie alle theoretisch möglichen Kombinationen von Ausgangs- und Zielseiten. Rechts daneben im eigentlichen Timeline-Fenster erscheinen je nach Auswahl die beiden Stati.
Bleiben Sie aber links im Fensterbereich mit den wie Ebenen dargestellten Übergangskombinationen. Wählen Sie alle Kombinationen aus und klicken Sie unten in der Mitte auf den Befehl „ Glatter Übergang“. Rechts in der Zeitleiste erscheint ein farbiger Balken, der genau eine halbe Sekunde einnimmt. Testen Sie den Film. Egal, welchen Button Sie klicken, die Anwendung reagiert wie gewünscht und die Animationen verzögern sogar Richtung Ende. Animateure nennen das „Easing out“.
Der Button „Glatter Übergang“ erzeugt die Animation, die Catalyst für die wahrscheinlich erwünschte hält.
Wenn Sie die einzelnen Animationen anpassen wollen, dann ziehen Sie einfach die farbigen Balken. Wenn Sie die in der Mitte „anfassen“, dann bleibt die Dauer des Effekts gleich nur Anfangs- und Endpunkt werden verschoben. Ziehen Sie am Ende, können Sie die Effekte langsamer oder schneller ausgestalten. Besonders spannend ist das bei den Animationen, die zurück auf „Page1“ zeigen, denn dort findet ja nicht nur eine Verschiebung sondern auch eine Skalierung statt. Das kann man zeitlich auch separieren.
Automatische und manuelle Weiterleitung
Man könnte jetzt auf die Idee kommen, verschiedene einander ähnelnde Zustände anzulegen, um nacheinander folgende Animationen zu realisieren und damit eine Art Dramaturgie. Das ist nicht nötig. Schmeißen Sie alle Elemente des Endzustands – in unserem Fall also einen halbtransparenten rechteckigen Rahmen (direkt auf einer Ebene gezeichnet) – und die Thumbnails auf die Bühne.
Für Elemente, die vorher noch nicht dar waren, wählt Catalyst den Effekt „Einblenden“, sobald Sie am unteren Bühnenrand die Option „Glatter Übergang“ wählen. Sie können das auch ändern und das Vorschaufenster einfach skalieren. Für den Moment aber soll das genügen.
Viel wichtiger ist, dass Sie den Wechsel auf der Karte und das Erscheinen der Vorschaubilder nacheinander ablaufen lassen. Das tun Sie im Fenster Zeitachsen. Lokalisieren Sie hier die einzelnen Zeitachsen, die für das Einblenden der Vorschaubilder verantwortlich sind. Je besser die Ebenen beschriftet sind, umso einfacher.
Nun ziehen Sie dies Achsen soweit nach rechts (Sie können sie gemeinsam markieren), bis sie erst starten, wenn die Kartenanimation bereits beendet ist. Das müssen Sie in allen Übergangssegmenten machen, die für zum Endzustand führen. Ist der Endzustand also „Page4“, so müssen Sie die Animationen drei Mal anpassen in den Kombinationen „Page1 > Page4“, „Page2 > Page4“ und Page3 > Page4“. Testen Sie den Film.
Im Gegensatz zu diesem automatischen Vorgang lösen wir das Vergrößern der Thumbnails erst bei Klick aus. Das ist also banal. Wandeln Sie die Vorschaubilder in Buttons um und erzeugen Sie zu jedem einen neuen Zustand, in dem das halbtransparente Rechteck die Bühne bedeckt und das passende große Foto angezeigt wird. Auch das ist wieder ein Button der diese Großansicht wieder schließt, also einen Übergang zurück zu „Page4“ herstellt.
Animationen manipulieren
Die Anwendung ist fast fertig. Eingangs hatte ich versprochen, dass die Animationen zwischen den einzelnen Kartenpunkten so erfolgt, dass die Karte kurz auszoomt in die Totale und sich dann wieder in die Tiefe stürzt.
Wählen Sie zum Beispiel die Zeitachse „Page2 > Page3“. Klicken Sie auf das Hintergrundbild (die Karte) dessen Ebene nicht gesperrt sein darf. Nun wählen Sie ganz unten in der Statusleiste den Befehl „Aktion Hinzufügen“ und dort die „Größenänderung“. Das machen Sie gleich nochmal.
Nun justieren Sie die beiden Zeitachsen so, dass sie jeweils die Hälfte der Zeitachse „Verschieben“ beanspruchen.
Die Zeitachsen lassen sich beliebig verlängern, verkürzen oder verschieben.
Im letzten Schritt stellen Sie die „Eigenschaften“ bei der oberen, ersten Zeitachse auf „relativ“ und „-500“ für beide Parameter. In der unteren Zeitachse hingegen stellen Sie auf „relativ“ und „500“ für beide Parameter. Testen Sie mit dem kleinen Play-Button zur Linken, wie die Animation wirkt, eventuell müssen Sie noch kleinere Justierungen vornehmen.
Wenn Sie zweimal die „Größenänderung“ wählen, weiß Catalyst bereits, was Sie vorhaben und hängt beide hintereinander.
Genau hier und nach dem gleichen Verfahren setzen Sie auch den Zischsound zum Übergang zwischen den Seiten ein. Klicken Sie bei ausgewähltem Hintergrundbild erneut auf das Plussymbol mit der Beschriftung „Aktion Hinzufügen“ dort wählen Sie Soundeffekt und dann eben den Zischsound.
Wenn Sie nach der Fertigstellung auf „Datei/Als SWF/AIR veröffentlichen“ gehen, erzeugt Catalyst eine komplett netzfertige Kombination von Dateien. Der Auswahlpunkt „Bild zum Hochladen auf den Webserver“ genügt. Freilich sollte dem Nutzer an dieser Stelle eines klar sein: Die Dateien sind nicht wirklich speicheroptimiert. Wer plant, die Files auf Dauer online einzusetzen, muss noch etwas mehr Sorgfalt beim Vorbereiten der Assets mitbringen.
(mm),(tm)
