Drücke die Tasten ◄ ► für weitere Artikel  

Videos per App in interaktive Animationen umwandeln

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.

Videos per App in interaktive Animationen umwandeln
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 in einem Canvas-Element dargestellt, so dass eine flüssige Bewegung entsteht, die alle gängigen 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 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:

54 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
4 Antworten
  1. von Ludwig König via facebook am 30.01.2013 (16:10Uhr)

    wie geil ist das denn?? :-)

  2. von Tom Kirschner via facebook am 30.01.2013 (16:16Uhr)

    http://www.divergentmedia.com/phosphor/galleryFunktioniert ja prächtig. Wieviel Speicherplatz wohl so ein phospor "video" benötigt?

  3. von Thomas Quensen via facebook am 30.01.2013 (17:20Uhr)

    Die Beispielgalerie kommt auf ganze 14MB :(

  4. von Maik Reinke via facebook am 30.01.2013 (20:41Uhr)

    Ich checke noch nicht ganz den Sinn. Für meine Filme nutze ich VIMEO.

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor
Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor

Auf ihrer Entwicklerkonferenz //build/ 2014 hat Microsoft Universal Windows Apps vorgestellt. Dank einer vereinheitlichen Windows-Runtime sollen Entwickler auf einfache Art und Weise Apps für die... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen