Webdesign

Mit A5 HTML5 Animator animierte Webseiten-Elemente erstellen

Dienstag, 09.10.2012 | 12:42 von Hans-Christian Dirscherl
Mit dem A5 HTML5 Animator sollen Sie vergleichsweise einfach Ihre Webseiten mit interaktiven Inhalten aufpeppen können.
Vergrößern Mit dem A5 HTML5 Animator sollen Sie vergleichsweise einfach Ihre Webseiten mit interaktiven Inhalten aufpeppen können.
© Data Becker
Mit dem A5 HTML5 Animator von Data Becker können Sie interaktive Elemente für Ihre Webseite erstellen. Ohne Programmierkenntnisse. Profis können den Quellcode jedoch auch von Hand optimieren.
A5 HTML5 Animator von Data Becker nutzt das Dreigespann HTML5, CSS und Javascript für die Erstellung interaktiver Webseiten. Mit dem Windows-Programm können Sie Animationen für Ihren Webauftritt kreieren, ohne dass dafür Programmier- oder Flashkenntnisse erforderlich sind.

Das Herzstück des Animationswerkzeugs bildet eine Bühne, auf der verschiedene Objekte, etwa Fotos und Texte, mit Hilfe von Keyframes und Timeline animiert werden. Die Animation wird als Quellcode ausgegeben, den Sie dann in Ihren Webauftritt einbinden können. Dargestellt werden die Animationen dank HTML5 in allen modernen Browsern, sowohl auf Smartphone, iPhone und iPad als auch auf dem PC.

Der A5 HTML5 Animator bietet Data Becker zufolge Anwendern unter anderem die Möglichkeit, kurvenförmige Animationspfade mit einer Bézier-Kurve zu erstellen. Hierzu wird ein bogenförmiger Pfad angelegt, an dem sich ein Objekt entlang bewegt. Aufwendige Animationen lassen sich darüber hinaus in verschiedene Szenen unterteilen. Übergänge können animiert und Szenenwechsel durch vorher festgelegte "Trigger"-Aktionen ausgelöst werden.

Für zusätzliche Interaktivität sorgen Nebenzeitleisten, in denen Animationen festgelegt werden, die durch bestimmte Ereignisse auf der Hauptzeitleiste ausgelöst werden können. Für komplexere Interaktionen lässt sich mit Hilfe des integrierten Javascript-Editors die Animation auf Code-Ebene modifizieren – in diesem Fall ist dann aber doch programmieren angesagt. In den Editor integriert ist eine Schnittstelle, die den Zugriff auf interne Programmfunktionen vereinfachen soll. Eigene Skripte, die etwa der Manipulation von Objekten mit Hilfe des jQuery-Frameworks dienen, lassen sich somit über die API mit A5-Funktionen wie Play, Stop, Timeline- und Szenenwechsel verzahnen.

Der A5 HTML5 Animator enthält ein Vorlagen-System, mit dessen Hilfe sich assistentengestützte Animationen erstellen lassen. Wer etwa eine Diashow und eine Produktpräsentation realisieren möchte, wählt die entsprechende Vorlage und importiert die gewünschten Bilder. Szenen, Übergänge und Animationen werden anschließend automatisch erstellt, wie Data Becker verspricht. Für den Schnelleinstieg enthält der A5 HTML5 Animator zudem mehrere vorgefertigte Animationen und Effekte, die per Drag & Drop einem Objekt zugewiesen werden können.

Gesteuert werden die Animationen über die Timeline, in die Keyframes von Hand hinzugefügt werden. Alternativ kann der Nutzer eine Aufnahme-Funktion aktivieren, die Keyframes automatisch erstellt, wenn Objekte bewegt oder deren Eigenschaften modifiziert werden. Effektgeladene Kompositionen entstehen, indem Texte, Bilder, Soundfiles und Videos einfach via Drag & Drop auf der Bühne arrangiert werden. Zudem lassen sich in den Eigenschaften der eingebetteten Objekte Farbe, Rahmen, Drehungen, Neigungen, Schattierungen und Reflexionen einstellen und modifizieren.

Preis, Verfügbarkeit und Erweiterungen

Der "A5 HTML5 Animator" ist ab sofort für 119,95 Euro im Onlineshop von Data Becker erhältlich. Eine zeitlich begrenzte Testversion des A5 HTML5 Animators kann auf www.a5-animator.de heruntergeladen werden. Auf der Webseite haben Interessierte zudem Zugang zu Tutorials und Beispielen.

Ergänzend erhältlich sind zwei kostenpflichtige Zusatzpakete, in denen sich Grafiken und Sounds für die Gestaltung von Animationen befinden. Das Grafik-Paket kostet 19,95 Euro und umfasst um die 2500 Icons und Bilder. Das Sound-Add-on beinhaltet Effektsounds und Loops zur musikalischen Untermalung einer Animation. Das Soundpaket kostet 39,95 Euro.

A5 HTML5 Animator in Stichworten

* Timeline mit Keyframe-Animationen: Realisierung von Animationen durch manuelles Setzen von Keyframes auf der Zeitleiste oder mithilfe der Aufnahme-Funktion.
* HTML5- und CSS3-Fähigkeiten: Spiegelungen, Schatten, Rahmen, 3D-Rotationen
* Szenen- und Multi-Timeline Unterstützung: Animationen lassen sich in verschiedene Szenen und auf mehrere Zeitleisten aufteilen, die durch festgelegte Ereignisse ausgelöst werden.
* Bézier-Animation: Erstellen von bogen- bzw. kurvenförmigen Animationspfaden.
* Javascript-Editor mit API: Zugriff auf interne Programmfunktionen wie beispielsweise Szenenwechsel, Timelinewechsel, Play, Stop etc. möglich
* Integriertes Template-System: Assistentengestützte Erstellung von Animationen durch fertige Vorlagen.

Dienstag, 09.10.2012 | 12:42 von Hans-Christian Dirscherl
Kommentieren Kommentare zu diesem Artikel (0)
1600726