Videos per App in interaktive Animationen umwandeln

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.
phosphor 1
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 2
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:

Weitere Artikel zu CSS, JavaScript, Browser und Apps

Empfehlen

bewerten
VN:F [1.9.22_1171]
Bewertung: 2.0/5 (3 Bewertungen)
Das interessiert dich bestimmt auch
Chrome: Wie Google uns heimlich ein Chromebook unterschiebt
Chrome: Wie Google uns heimlich ein Chromebook unterschiebt
Wer die Entwicklungen von Google rund um den weit verbreiteten Chrome-Browser beobachtet, merkt, dass dieser...
Transit: CSS-Transitions und -Transformationen für jQuery
Transit: CSS-Transitions und -Transformationen für jQuery
Mit Transit sollen deutlich bessere Ergebnisse als mit der normalen Animate-Funktion von jQuery möglich sein.
Hook.js: Pull to refresh für das Web
Hook.js: Pull to refresh für das Web
Wir alle kennen das bequeme „pull-to-refresh“-Feature von Apps auf unseren mobilen Endgeräten.
4 Antworten
  1. von Ludwig König via facebook 30.01.2013 (16:10Uhr) 1.

    wie geil ist das denn?? :-)

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

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

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

    Die Beispielgalerie kommt auf ganze 14MB :(

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

    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

Kennst Du schon unser t3n Magazin?

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