201103Aug

Radi: HTML5-Animationen und -Videos erstellen

Die Verbreitung von HTML5/CSS3-Animationen ist in vollem Gange und durch Werkzeuge wie Adobe Edge oder den Sencha Animator ist es noch einfacher, derartige Animationen zu erstellen, da die DOM-Elemente per WYSIWYG-Editor bewegt werden können. Eher zufällig bin ich gestern auf ein Projekt gestoßen, das einen ähnlichen Ansatz verfolgt, aber den Fokus auf die Erstellung von HTML5-Videos und Canvas-Animationen legt. Leider ist die Beta-Software derzeit nur für Mac OS X zu haben, doch wer die Gelegenheit hat, sollte sich die Anwendung in jedem Fall ansehen. Es handelt sich um das Tool Radi, das wie eine klassische Animationssoftware aufgebaut ist: Es gibt eine Zeitliste und Objekte können mittels Keyframes animiert werden. Über die Werkzeugleiste lassen sich Rechtecke, Kreise, Pfade oder Texte auf der Bühne zeichnen und dank Canvas darstellen und animieren. Die Besonderheit liegt nun darin, dass dem Benutzer die Wahl gelassen wird, ob eine Animation im Canvas-Format oder als HTML5-Video ausgegeben wird.

Radi - Animationswerkzeug für Canvas-Animationen und HTML5-Videos

So können verschiedene "Top-Level"-Elemente erstellt werden (img, canvas, video und div), auf denen dann wiederum Unterobjekte wie Shapes, Bilder, Videos, Texte und auch JavaScript- oder HTML-Bausteine platziert werden können. Radi bietet einen Skript-Editor, mit denen Animationen (oder auch Interaktionen) nur durch die Programmierung von Canvas-Elementen erzeugt werden können. Weiterhin ist in Radi die Verwendung von "Conduit"-Effekten möglich: Bei der Conduit Suite handelt es sich um eine Compositing-Software des Entwicklers, die mit Nodes arbeitet und verschiedene Effekte ermöglicht. Dieses Modul ist in Radi integriert und so können Animationen mit erweiterten Video-Effekten versehen werden. Zudem ist ein Kurven-Editor integriert, der das Beschleunigen und Abbremsen von Animationen ermöglicht.

Radi - Animationswerkzeug für Canvas-Animationen und HTML5-Videos

Die Conduit-Effekte sind nur möglich, wenn die animierten Objekte einem Top-Level-Element des Typs "Video" untergeordnet sind. Die Anwendung exportiert fertige Projekte automatisch als gescriptete Canvas-Animationen oder als HTML5-Videos in den Formaten MP4, OGV und WebM. Optional können auch die Bedienelemente des video-Tags eingeblendet werden.
Damit ist Radi eine interessante Anwendung, die (obwohl noch in der Beta-Phase) schon jetzt richtungsweisende Möglichkeiten bietet und zukünftig sicherlich Verwendung finden wird, wenn es um die Erstellung von HTML5-Videos geht.

Kommentare

Jonas schrieb am 25.08.2011 #1

Gefällt! Danke für den Beitrag :)