Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 13. April 2015

WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen

Kein Beitragsbild

Bis vor einigen Jahren war Flash fester Bestandteil des Webs – vor allem, wenn es darum ging, Animationen zu erstellen und diese auf einer Website bereitzustellen. Abgesehen davon, dass Flash damals fast die einzige Möglichkeit war, um Bewegung in eine Website zu bringen, trug sicher auch die grafische Oberfläche zum Erfolg bei. Animationen ließen sich ohne Programmierkenntnisse erstellen. Mit HTML5 und CSS3 hat sich die Welt der Webanimationen verändert. Mit dem WebAnimator Plus gibt es jedoch eine Anwendung, welche die Vorteile von Flash aufgreift und ins zeitgemäße Web rund um HTML5 und CSS3 überführt.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

webanimator

Anzeige

Oberfläche erinnert an Flash

Wer bereits Erfahrungen mit Adobe Flash gemacht hat, wird sich schnell zurechtfinden in der Programmoberfläche von WebAnimator Plus. Auch die Bezeichnungen sind teils identisch. So sind die zentralen Bereiche die Bühne sowie die Hauptzeitleiste. Auf der Bühne werden grafische Elemente platziert und gestaltet und in der Hauptzeitleiste animieren Sie diese. Wie auch bei Flash können unterschiedliche Szenen angelegt werden, die sich losgelöst voneinander gestalten und mit Animationen versehen lassen.

webanimator-plus_oberflaeche
Die Oberfläche und Funktionalität von WebAnimator Plus erinnert an die von Flash

Neben einfachen geometrischen Figuren wie Recht- und Dreiecken sowie Ellipsen können auch Grafiken in unterschiedlichen Bitmapformaten auf der Bühne platziert werden. Unterstützt werden JPEG-, PNG- und GIF-Dateien. Schön wäre es, wenn auch Vektorformate wie das in HTML5 etablierte SVG-Format eingebunden werden könnten, was derzeit zumindest noch nicht der Fall ist.

Natürlich können auch Texte auf der Bühne platziert werden. Neben der Auswahl von Systemschriften hat man über den WebAnimator Plus Zugriff auf Googles Webfonts und bindet diese direkt ein, ohne mit CSS hantieren zu müssen. In einer Vorschau erhält man schnell einen Überblick über das Aussehen der Schriften in verschiedenen Größen.

Zusätzlich lassen sich auch Video- und Audiodateien in einem Projekt verwenden. WebAnimator Plus berücksichtigt hierbei die unterschiedlichen erforderlichen Dateiformate, um alle Browser abdecken zu können. Zwar ist keine Konvertierung der Formate mit der Anwendung möglich. Aber es lassen sich für ein und dasselbe Video- beziehungsweise Audioelement verschiedene Formate hinterlegen. Auf Wunsch wird bei Videos auch eine Steuerleiste dargestellt.

webanimator-plus_video
HTML5-Videos einfach in WebAnimator Plus einbinden

Elemente gestalten und ausrichten

Jedes auf der Bühne platzierte Element kann individuell gestaltet werden. Hier stehen einem je nach Elementtyp unterschiedliche Eigenschaften zur Verfügung, mit denen man Größe und Aussehen eines Elementes anpassen kann. Dazu gehören unter anderem Füll- und Rahmenfarbe, Rahmenstärke, Deckkraft, Drehung und Neigung. Auch Schlagschatten sind verwendbar. Leider werden Schlagschatten immer als Rechteck dargestellt, wie man es von der CSS-Eigenschaft „box-shadow“ kennt. Daher sind die Schlagschatten nur für rechteckige Elemente geeignet, nicht aber für elliptische oder andere nicht rechteckige Formen.

Dafür gibt es aber als besonderen Effekt die Möglichkeit, ein Element auf der Bühne reflektieren zu lassen. Dazu wird der Abstand der Reflexion zum Element sowie die Tiefe der Reflexion festgelegt. Dieser Reflexionseffekt lässt sich per HTML5 und CSS3 so nicht realisieren. Somit hat der WebAnimator Plus hier ein nettes Alleinstellungsmerkmal.

webanimator-plus_reflexion
Reflexionen als besonderen Effekt zu Elementen hinzufügen

Alle Änderungen, die man vornimmt, werden direkt auf der Bühne dargestellt. Außerdem gibt es eine Vorschaufunktion, welche das Projekt im Browser öffnet. Dabei ist es möglich, einen beliebigen installierten Browser für die Vorschauansicht voreinzustellen.

Animationen erstellen

Der eigentliche Schwerpunkt der Anwendung sind natürlich die Animationen. Auch hier müssen sich Flash-Nutzer nicht groß umgewöhnen. Jedes Element auf der Bühne ist auch im Hauptzeitstrahl vorhanden. Für jede Eigenschaft, die per Animation verändert werden soll, wird auf dem Zeitstrahl eine eigene Zeile angelegt. Standardmäßig sind die Eigenschaften „Links“ und „Oben“ vorhanden, um ein Element auf der Bühne bewegen zu können.

webanimator-plus_zeitleiste
Die Zeitleiste in WebAnimator Plus ermöglicht einfache und komplexe Animationen

Es lassen sich weitere Eigenschaften zum Zeitstrahl hinzufügen. So können Elemente skaliert und gedreht werden. Füll- und Rahmenfarben können ebenso wie Schatteneffekte verändert werden. Es stehen mehrere Dutzend Eigenschaften zur Verfügung. Um eine Eigenschaft zu verändert, platziert man auf dem Zeitstrahl zwei Schlüsselbilder – eines für den Beginn und eines für den Schluss der Animation. Dann werden für beide Schlüsselbilder die jeweiligen Eigenschaften verändert. Das geschieht entweder durch Verschieben eines Elementes auf der Bühne oder über das Eigenschaften-Fenster.

Über die Timing-Funktion kann die Art der Animation festgelegt werden. Hier stehen einem die bekannten Funktionen zur Verfügung, die CSS3 für die „transitions“- und „animations“-Eigenschaft verwendet – zum Beispiel „Linear“, „Ease in“ und „Ease out“. Es kann auch eine individuelle Timung-Funktion definiert werden. Hierzu wird eine Bézierkurve angelegt, welche die Beschleunigung der Animation visualisiert.

webanimator-plus_easing-funktion
Individuelle Timing-Funktionen werden als Bézierkurve angelegt

Über eine Wiedergabesteuerung spielen Animationen direkt in der Anwendung ab. Ein Wechsel zwischen WebAnimator Pro und dem Browser zum Testen der Animation ist also nicht nötig.

Live-Animationen

Eine Besonderheit des WebAnimator Plus stellen die sogenannten Live-Animationen dar. Dabei handelt es sich um fertige Animationsvorlagen, die man einfach auf ein Element anwendet. Mit diesen Live-Animationen lassen sich Elemente beispielsweise um die eigene Achse drehen oder fliegen von links nach rechts oder oben nach unten über die Bühne.

Live-Animationen können auch mit den Animationen auf dem Zeitstrahl kombiniert werden. So gibt es beispielsweise einen Federeffekt, der beim Ende einer Animation dazu führt, dass das Element abgefedert wird.

webanimator-plus_live-animationen
Animationseffekte einfach per Live-Animationen hinzufügen

Außerdem stehen spezielle Live-Animationen für Texte bereit. Damit werden Texte wie ein Gummiband oder Akkordeon auseinander gezogen. Alternativ lassen sich Texte etwa als pulsierendes Herz darstellen. Mit den Live-Animationen sind viele Effekte möglich, die nett anzusehen sind, aber nicht überladen wirken.

Elementen Ereignisse hinzufügen

Nicht immer will man einfach nur Animationen abspielen. Dank der Ereignisse in WebAnimator Plus hat man die Möglichkeit, auf Nutzereingaben zu reagieren. So können per Klick oder Hover auf ein Element bestimmte Ereignisse ausgeführt werden. Dabei ist es möglich, eine URL oder eine andere Szene aufzurufen. Man kann auch zusätzliche Zeitleisten mit Animationen unabhängig der Hauptzeitleiste erstellen. Diese Zeitleisten können dann ebenfalls per Klick abgespielt werden.

webanimator-plus_ereignisse
Mit Ereignissen wird die Animation zu einer interaktiven Seite

Für individuelle Ereignisse können eigene Funktionen per JavaScript programmiert werden. Für die meisten Anwendungsfälle sind jedoch keine Programmierkenntnisse erforderlich, da WebAnimator Plus bereits viele Anwendungsfälle abdeckt.

Animation per HTML5-Export bereitstellen

WebAnimator Plus speichert Projekte in einem eigenen Dateiformat ab. Das fertige Animationsprojekt muss anschließend noch per HTML5-Export bereitgestellt werden. WebAnimator Plus erstellt dann eine HTML-, sowie CSS- und JavaScript-Dateien. Die HTML-Datei ist hier recht übersichtlich. Sie bindet lediglich die CSS- und JavaScript-Dateien ein. Sämtliche Animationen werden per JavaScript bereitgestellt. Hierbei wird jedoch auf CSS3-Animationen gesetzt. Außerdem wird jQuery verwendet und auf Modernizr zurückgegriffen. Beide Bibliotheken werden von WebAnimator Plus automatisch für jedes Projekt mit exportiert.

Alle aktuellen Browser können mit WebAnimator Plus erstellte Animationen darstellen, beziehungsweise abspielen. Der Internet Explorer wird ab Version 10 unterstützt. Auf Wunsch kann bei allen Browsern, die nicht unterstützt werden, eine Grafik angegeben werden, die anstelle der Animation angezeigt wird.

Animationen in WebSite X5 Professional 11 integrieren

Wer Webprojekte mit WebSite X5 Professional 11 realisiert, kann per WebAnimator Plus erstellte Animationen direkt in ein Webprojekt integrieren. WebSite X5 Professional 11 ist eine Anwendung, mit der sehr einfach umfangreiche und individuelle Websites gestaltet und mit Inhalt gefüllt werden können. Die Anwendung stellt sogenannte Objekte zur Verfügung, mit denen verschiedene Inhalte auf einer Seite platziert werden. Dazu gehören einfache Inhalte, wie Texte und Bilder.

websitex5
Animationen einfach in WebSite X5 Professional 11 integrieren

Es gibt aber auch Objekte, mit denen beispielsweise multimediale Inhalte, sowie Galerien, Karten und Tabellen platziert werden können. Wer WebSite X5 Professional 11 zusammen mit dem WebAnimator Plus verwendet, integriert Animationsprojekte ebenfalls als Objekt auf einer Seite. So muss man sich nicht mit dem Quelltext der Animation auseinandersetzen. WebSite X5 Professional 11 sorgt dafür, dass die Animation samt der erforderlichen Dateien korrekt in das Webprojekt integriert wird.

Fazit und Link zum Beitrag

Der WebAnimator Plus ist eine umfangreiche Anwendung zum Erstellen komplexer und individueller Animationen. Der Funktionsumfang der Anwendung erlaubt es, komplette Webprojekte zu realisieren – ähnlich wie es mit Adobes Flash möglich ist. Anders als Flash setzt WebAnimator ganz auf HTML5 und CSS3, sowie auf JavaScript. Das sorgt dafür, dass Projekte auch auf mobilen Geräten laufen – und das ganz ohne Plug-ins.

WebAnimator Plus läuft auf Windows-Systemen, ist für 89,99 Euro erhältlich und kann vorab für zwei Wochen getestet werden. Hier geht es zum Download der Testversion. Es gibt eine ausführliche Dokumentation sowie ein deutschsprachiges Forum zum Austausch mit anderen Anwendern.

(pot/dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

5 Kommentare

  1. Hype Pro ist absolut der Hammer – http://tumult.com/hype/pro

  2. Habe bisher immer mit Edge von Adobe gearbeitet und war soweit mit den Möglichkeiten auch zufrieden, aber in letzter Zeit lese ich viel positives über den Javascript Editor im WebAnimator. Ich werde mal das Tool vielleicht bald mal ansehen :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.