Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Videos per App in interaktive Animationen umwandeln

    Videos per App in interaktive Animationen umwandeln
Phosphor wandelt Videos in Grafiken und Javascript-Quellcode um.

Ein neues Tool namens Phosphor erstellt aus Video-Dateien automatisch Animationen für den Browser auf Basis von JavaScript und CSS. Die Animationen unterstützen Transparenz, lassen sich interaktiv gestalten und verzeichten komplett auf Flash oder das GIF-Format.

Phosphor wandelt Videos in Grafiken und Javascript-Quellcode um.

Phosphor verwandelt Videos in Quellcode

Die Funktionsweise von Phosphor ist schnell erklärt: Der Nutzer lädt eine Videodatei in das Tool. Phosphor teilt das Video in kleine Blöcke auf und untersucht die Änderung zwischen einzelnen Frames. Alle benötigten Bildstücke werden anschließend in mehreren großen Grafiken gespeichert und per JavaScript in einem Canvas-Element dargestellt, so dass eine flüssige Bewegung entsteht, die alle gängigen Browser abspielen. Allerdings sollte man nur Videos verarbeiten, deren Inhalt sich nur geringfügig verändert, ansonsten ufert der Speicherbedarf der Phosphor-Animationen schnell aus.

Phosphor-Animationen unterstützen auch Transparenz und sind mit allen Browsern kompatibel.

Interaktive und manipulierbare Animationen

Dank der Zusammensetzung aus JavaScript und CSS lassen sich die Animationen auch erweitern und bearbeiten. So ließe sich zum Beispiel eine Rotation mit der Maus realisieren, wie man sie oft in Shop-Systemen vorfindet. Ideal eignet sich Phosphor auch zur Umsetzung kurzer Screencasts, etwa zur Demonstration von Funktionen einer Smartphone-App. Auf der Herstellerseite finden sich tolle Anwendungsbeispiele. Phosphor ist ab sofort im Mac App Store für 9 Euro erhältlich.

Weiterführende Links:

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

Alle Jobs zum Thema JavaScript, Webdesign
Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen