Von Howard Pinsky
Hallo an alle! Ich bin Howard Pinsky, Senior XD Evangelist bei Adobe. Heute zeige ich, wie ihr euren Prototypen Video- und Animationsdateien hinzufügt, um sie umfassend weiterzuentwickeln. Legen wir los.
Hier sind wir in Adobe XD und das ist eine von mir entworfene Gaming-Plattform. Um diese noch lebendiger zu machen, möchte ich Video- und Lottie-Animationen hinzufügen. Hier auf der Startseite habe ich schon ein schönes großes Bild, das aber viel zu statisch ist. Das Hinzufügen von Videos zu einem XD Projekt ist dem Prinzip bei Fotos sehr ähnlich. Sie können direkt auf die Arbeitsfläche gezogen werden oder in eine leere Form, die später maskiert wird. Wenn ihr das Video hinzugefügt und ausgewählt habt, seht ihr im Eigenschafteninspektor die Optionen für die Videowiedergabe. Hier könnt ihr nicht nur festlegen, wann das Video abgespielt wird – in diesem Fall automatisch mit Start der Vorschau. Durch Klicken auf das Symbol links erhaltet ihr zudem weitere Optionen, z. B. Festlegen einer benutzerdefinierten Miniaturansicht, Scrubben und Anzeigen der Videovorschau, Ein- oder Ausschalten des Tons, Zuschneiden – hierzu gleich mehr – und Endloswiedergabe.
Nachdem ich nun ein Video hinzugefügt und die Wiedergabe eingestellt habe, kann ich es mir in der Vorschau in Aktion ansehen. Und schon wirkt der Prototyp viel lebendiger. Bevor wir uns mit dem Hinzufügen von Lottie-Animationen befassen, wechsle ich zu einem der anderen Zustände innerhalb der eingefügten Komponente. Hier ist ein weiteres Video, das automatisch abgespielt wird. Wie ihr in der Vorschau sehen könnt, dauert es ein paar Sekunden, bis das Flugzeug erscheint. Als es eben um die weiteren Optionen ging, erwähnte ich die Möglichkeit zum Zuschneiden von Videos. In diesem Modus könnt ihr den Anfangs- und Endpunkt festlegen, indem ihr den Rahmen verschiebt. In diesem Fall möchte ich die Wiedergabe starten, bevor etwas passiert. Wenn ihr alles eingestellt habt, speichert ihr eure Änderungen mit dem Häkchen. Ein wichtiger Hinweis: Das Zuschneiden ist nicht destruktiv. Ihr könnt eure Änderungen also jederzeit rückgängig machen oder erneut ändern.
Zurück im Standardzustand starte ich die Vorschau erneut. Und im zweiten Zustand wird das Video nun automatisch ab dem neuen Startpunkt wiedergegeben. Ich habe auch ein drittes Video verdrahtet. Wenn ich zum ersten Video zurückgehe, wird eine erweiterte Ansicht angezeigt, die weitere Informationen enthält. Euch fällt vielleicht auf, dass die Videos zwischen den Auto-Animate-Zuständen kontinuierlich wiedergegeben werden.
Okay. Nun zu Lottie. Im Community-Bildschirm habe ich eine Komponente eingerichtet, die beim Draufzeigen mit der Maus angezeigt wird. Und darin habe ich einen weiteren Bereich festgelegt, den ich gerne für eine animierte Emoji-Auswahlfunktion verwenden möchte. Ich bearbeite die Hauptkomponente, um den Inhalt einzufügen. In der gestapelten Gruppe dupliziere ich die vorhandene Ebene ein paar Mal. Dann wechsle ich zum Finder, wo ich entzückende Lottie-Animationen verschiedener Emojis habe, die Anna Movin auf ui8.net erstellt hat. Wie Videos können Lottie-Dateien direkt auf eine vorhandene Lottie-Ebene oder die Arbeitsfläche gezogen werden. Oder ihr maskiert sie in Formen, um ihre Größe zu definieren. Wenn die Ebenen ausgewählt sind, kann auf der rechten Seite die Wiedergabe eingestellt werden. Alle Emojis sollen automatisch wiedergegeben werden. Im Gegensatz zu Videos ist das Symbol links nur darauf ausgerichtet, die Endloswiedergabe zu steuern – genau das, was bei diesen Interaktionen passieren soll. Perfekt.
Wenn ich wieder zum Standardzustand für diese Komponente wechsle, kann ich jetzt eine Vorschau des Community-Bildschirms anzeigen. Ich bewege den Mauszeiger über die Mitteilung, und dann über das Emoji-Symbol, um die Lottie-Animationen anzuzeigen und sie in Aktion zu sehen.
Bevor ich euch den vollständigen Prototyp zeige, sehen wir uns den Trigger für das Ende der Wiedergabe an. Dieser kann bei der Automatisierung einiger Video- und Lottie-Animationen eine große Hilfe sein. Ihr habt eben kurz den erweiterten Zustand der eingefügten Komponente gesehen. In diesem Abschnitt ist eine Schaltfläche, die zu einem Download-Zustand führt. Hier habe ich eine Lottie-Animation integriert, die sofort nach dem Übergang gestartet wird. Vielleicht fragt ihr euch jetzt: Was passiert denn, nachdem die Animation abgeschlossen ist?
Im Prototypmodus seht ihr, dass derzeit ein Zeit-Trigger angehängt ist. Ich kann hier eine zweite Interaktion hinzufügen, indem ich auf das blaue Pluszeichen klicke. Jetzt kann ich im Eigenschafteninspektor den Trigger „Ende der Wiedergabe“ auswählen, der XD anweist, den Übergang nach Abschluss der Video- oder Lottie-Animation durchzuführen. Und bei dieser Interaktion sollte ein einfacher Übergang in den Wiedergabezustand ausreichen. Dieser Trigger funktioniert auch über Zeichenflächen hinweg. Innerhalb des Ladezustands derselben Komponente habe ich eine weitere Lottie-Animation hinzugefügt. Zusätzlich zum Trigger „Zeit“ gibt es den Trigger „Ende der Wiedergabe“, der zum Spielbildschirm führt. Natürlich ist all das ohne Animation nicht weiter bedeutend. Wieder im Standardzustand starte ich die Vorschau, erweitere diese Ansicht und starte die Download-Interaktion. Dank des Triggers „Ende der Wiedergabe“ geht die Komponente nun automatisch in den Wiedergabezustand über, wo ich die Ladeanimation durch Klicken starten kann. Wenn der Vorgang abgeschlossen ist, erfolgt der Übergang zur Zeichenfläche.
Diese Beispiele sind nur die Spitze des Eisbergs der Möglichkeiten, die Video und Lottie bieten. In zukünftigen Tutorials werde ich viele weitere Anwendungsfälle behandeln. Zum Schluss zeige ich euch natürlich noch die gesamte Experience. Viel Spaß.
Verhelfe deinen Prototypen mit Animationen zu neuem Leben. In diesem Tutorial erfährst du, wie du eine Gaming-Plattform mit Video- und Lottie-Animationen entwirfst. Ziehe Video- und Lottie-Dateien direkt auf die Design-Arbeitsfläche oder auf eine leere Form als Maske. Passe die Optionen für die Videowiedergabe im Eigenschafteninspektor an. Füge eine Miniaturansicht hinzu, scrubbe Videos oder zeige die Vorschau an, schalte den Ton ein, schneide Videoclips zu und stelle die Endloswiedergabe ein. Verbinde die Interaktionen durch Auto-Animate-Übergänge und ermögliche die kontinuierliche Wiedergabe von Videos. Nutze den Trigger „Ende der Wiedergabe“ für Interaktionen, um von einer Lottie-Animation automatisch in einen anderen Zustand überzugehen.
