Vorheriger Artikel Nächster Artikel

Videos per App in interaktive Animationen umwandeln

Ein neues Tool namens Phosphor erstellt aus Video-Dateien automatisch Animationen für den auf Basis von und . 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 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:

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 545

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Mobile SEO: Die 5 häufigsten Fehlerquellen
Mobile SEO: Die 5 häufigsten Fehlerquellen

Der Suchanteil über Mobilgeräte steigt. Neue Herausforderungen warten auf Marketer, erst recht nach dem jüngsten Google-Update. Worauf sie jetzt achten müssen, klärt dieser Artikel von Eva Wagner. » weiterlesen

Apps für Gmail: Mit InboxSDK für Googles E-Mail-Dienst entwickeln
Apps für Gmail: Mit InboxSDK für Googles E-Mail-Dienst entwickeln

InboxSDK gibt euch die Möglichkeit, auf Basis von Browser-Erweiterungen eigene Apps für Gmail zu entwickeln. Wir verraten euch, was das Software-Development-Kit alles kann. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

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