Vom Screenshot zum Launch-Video: App-Mockups animieren

Ein Store-Screenshot erklärt, was deine App ist. Ein kurzer Clip zeigt, wie sie sich anfühlt: Das Handy fliegt herein, die Kamera fährt an den Knopf, auf den es ankommt, der Screen wechselt, Musik drunter, fertig. Dafür brauchst du weder ein Schnittprogramm noch ein 3D-Studium. So baust du in Showoff aus Screenshots ein Launch-Video.

Film statt Standbild

Beim Anlegen fragt Showoff: „Standbild“ oder „Film“? Für ein Video nimmst du „Film“ oder eine Animation aus den Vorlagen. Die Wahl steht danach fest. Klingt streng, spart aber Nerven: Es gibt keinen Schalter, der mitten in der Arbeit die Bedeutung jedes Feldes umdreht.

Ein Film hat einen Takt — seine Länge in Sekunden — und eine Bühne. Unten liegt die Zeitachse: eine Spur für die Kamera, darunter eine je Objekt. Der ganze Takt passt immer ins Bild, waagerecht scrollen musst du nie.

Wie lang? 10 bis 20 Sekunden

Launch-Clips funktionieren kurz. Zehn bis zwanzig Sekunden reichen für einen Auftritt, zwei, drei Nahaufnahmen und ein ruhiges Ende. Eine Aufteilung für 15 Sekunden, die fast immer trägt:

• 0 bis 2 s: Das Gerät kommt herein.
• 2 bis 12 s: Zwei, drei Stellen im UI, auf die die Kamera fährt, dazwischen ein Screenwechsel.
• 12 bis 15 s: Die Kamera fährt zurück in die Totale. Zeit für Name und Claim als Text daneben.

Auftritt, Abgang, Dauerbewegung

Jedes Objekt auf der Bühne — Gerät, Bild oder Text — bekommt bis zu drei Bewegungen, von jeder Art eine:

• Auftritt: Fliegen (von unten herein), Federn (mit Nachschlag am Ziel), Auftauchen (fliegt herein und wächst dabei), Drehen oder Rollen (von der Seite).
• Abgang: das jeweilige Gegenstück, vom Hinausfliegen bis zum Verschwinden.
• Dauerbewegung: Schweben, Wiegen, Kreiseln, Kippen oder Pulsieren. Beim MacBook kommt die Klappe dazu, die sich öffnet.

Gut zu wissen: Position und Drehung eines Objekts sind seine Ruhelage. Die Bewegung rechnet von dort aus, statt sie zu ersetzen. In den Modi „Verschieben“ und „Drehen“ siehst du das Gerät deshalb so, wie es ohne Animation dastünde, und kannst es jederzeit zurechtrücken. „Warum kann ich das Handy bei Sekunde sieben nicht bewegen?“ ist hier keine Frage.

Was auf dem Display läuft

Im Film kann ein Gerät mehrere Screenshots nacheinander zeigen. Solange du keine Zeiten festlegst, teilen sie sich den Takt gleichmäßig; fasst du eine Grenze an, gilt genau die. Der Bildstreifen liegt in der Zeitachse direkt hinter der Gerätespur — du siehst also auf einen Blick, welcher Screen drauf ist, während das Gerät hereinfliegt.

Statt Screenshots geht auch Video: eine Aufnahme deiner App, ein exportierter Prototyp, ein Screencast. Hast du keine, nimmst du sie direkt im Editor auf. „Bildschirm aufnehmen“ im Bestand nutzt die Bildschirmfreigabe deines Browsers, und das Ergebnis liegt danach als Clip im Projekt.

Kamerafahrt, ohne Kameramann zu sein

Die Kamera führt die Auto-Bewegung. Statt Winkel und Wege einzustellen, ziehst du auf dem Display Rechtecke auf: um den Knopf, die Überschrift, das Diagramm. Jedes ist ein Fokusbereich mit eigenem Anfang und Ende in der Kameraspur. Die Kamera fährt hin, höchstens zwei Sekunden lang, und hält die Einstellung, bis der Bereich endet.

• Lücken zwischen Bereichen sind erlaubt. Dort bleibt die Kamera, wo sie zuletzt war.
• Ein neuer Bereich reiht sich hinter dem letzten Auftritt ein. So fährt die Kamera nicht auf ein Gerät zu, das gerade noch hereinfliegt.
• Nach dem letzten Bereich fährt die Kamera zurück auf den eingestellten Blick. Willst du auf der Nahaufnahme enden, ziehst du den letzten Bereich bis ans Ende des Takts.
• „3D“ stellt die Kamera leicht versetzt vor den Ausschnitt, mit sichtbarer Tiefe. „2D“ schaut senkrecht aufs Display — eine ruhige Fahrt über den Screenshot, richtig für Screens mit viel Text.

Ton drunter

Musik oder ein Voice-over ziehst du wie Bilder ins Editorfenster; im Film nimmt der Bestand auch Ton auf. Auf der Tonspur legst du fest, wann ein Stück einsetzt, wann es endet und ab welcher Stelle darin gespielt wird, dazu die Lautstärke. Anfang und Ende jedes Clips werden sanft geblendet, damit nichts knackt. Gemischt wird beim Export im Browser, in Stereo mit 48 kHz.

Schleifen für Website und Social

Für den Aufmacher einer Website oder einen Post, der endlos läuft, schaltest du „Schleife“ ein. Dann passiert zweierlei: Zu jedem Auftritt kommt der passende Abgang ungefragt dazu, damit das Ende zum Anfang passt. Und weil die Kamera nach dem letzten Fokusbereich zurück in ihre Ausgangslage fährt, springt das Bild an der Naht nicht. Ohne Schleife darf ein Film dagegen auf dem letzten Bild stehen bleiben — einen Abgang holst du dann nur, wenn du ihn willst.

Die passenden Formate stehen in den Einstellungen der Bühne schon bereit:

• „Hochformat 9:16 — 1080 x 1920“ für Stories und Reels.
• „Quadratisch — 1080 x 1080“ für den Feed.
• „Website-Hero — 2560 x 1440“ für die große Fläche oben auf der Seite.

Ein Hinweis zur Website: Browser spielen Videos meist nur dann von selbst ab, wenn sie stumm sind. Für den Loop im Seitenkopf lässt du den Ton also weg; für den Launch-Post auf Social nimmst du ihn mit.

Export als Video

Der Export rechnet Bild für Bild. Nichts wird in Echtzeit mitgeschnitten, deshalb hängt das Ergebnis nicht davon ab, wie schnell dein Rechner gerade ist. Du wählst:

• Format: MP4 mit H.264 für überall, oder WebM mit VP9. Nur WebM kann einen durchsichtigen Hintergrund, etwa um das Gerät später über ein eigenes Layout zu legen.
• Bildrate: 24, 30 oder 60 Bilder pro Sekunde. Bei sehr großen Auflösungen begrenzt Showoff die Rate für MP4 auf das, was Player zuverlässig abspielen, und sagt dir das.
• Bewegungsunschärfe: aus, kurz (90°), normal (180°) oder lang (306°). „Normal“ ist der Look, den man aus Filmen kennt; ohne wirkt schnelle Bewegung leicht stroboskopisch.
• Auflösung: 1x, 2x oder 4x des eingestellten Formats.

Kodiert wird im Browser selbst — in Chrome, Edge oder Safari ab Version 16.4. Der Dialog zeigt, bei welchem Bild der Export gerade ist, und „Schließen“ bricht ab, ohne eine halbe Datei zu hinterlassen.

Der schnellste Weg

Nimm eine Animation aus den Vorlagen, tausch den Screenshot aus, schieb die Fokusbereiche auf deine wichtigsten Stellen und exportiere. Für das erste Video ist das eine Sache von Minuten. Noch kein Konto? Hier geht es los.