Ganz fix eindrucksvolle Web-Animationen erstellen, welche neben Webbrowsern auch auf Mobilgeräten perfekt laufen. Mit dem einst üblichen Flash wird das nicht wirklich befriedigend funktionieren. Der WebAnimator geht hier den Weg über HTML5 und JavaScript und optimiert den erzeugten Code für alle modernen Browser. Trotzdem bietet die Software laut Hersteller, eine intuitive und komfortable Benutzeroberfläche mit Zeitleiste, Keyframes usw. und eigenes Coden ist nicht notwendig, wenngleich aber möglich. Wir haben eine Vollversion des WebAnimator Plus inklusive Template Collection I und II vom Hersteller erhalten und ausführlich getestet. Somit kann der folgende Bericht sowohl als Tutorial, wie auch als Entscheidungshilfe begriffen werden.
Animations-Software für moderne Webbrowser und Mobilgeräte!
Mit dem hier getesteten WebAnimator Plus lassen sich interaktive Filme, Werbebanner und Spiele erstellen. Dafür stellt die Software jede Menge Funktionen bereit. So ist es auch möglich, animierte Schaltflächen und Menüs zu erstellen, welche zb. auf bestimmte Ereignisse reagieren.
ActionScript oder JavaScript bzw. Frameworks wie jQuery usw. muss man dabei nicht im geringsten verstehen. Zwar hat man die Möglichkeit, auch JavaScript zu verwenden, jedoch ist dies nicht wirklich notwendig. Ganz ohne Kenntnisse in der Programmierung lassen sich nach kurzer Einarbeitung in das Programm sogar Spiele realisieren.
Interessant ist der WebAnimator auch, wenn man es eilig hat. Diverse bereits mitgelieferte vorgefertigte Templates werden einfach mit eigenem Content angereichert. Zusätzlich werden weitere Template Collections angeboten, womit die meisten Vorhaben schnell in die Tat umgesetzt werden können.
Die Highlights
- Interaktive Filme, Werbebanner und Spiele
- Filme mit mehreren Szenen
- Optimierter Code für alle Geräte
- Vorgefertigte Templates
- Keyframing und Events
- Hintergrundanimationen
- JavaScript Editor
Rabatt
Der Hersteller Incomedia gewährt speziell für diesen Bericht sogar einen Rabatt auf den WebAnimator Plus von 35%. Dazu muss nur der Gutscheincode "WAHADS15" nach dem Aufruf des folgenden Links angegeben werden.
Rabattaktion beendet. Der Link wurde entfernt.
Diese exklusive Rabattaktion ist gültig bis zum 30.09.2015. Vielen Dank dafür an Incomedia.
Aber genug der Vorrede. Nun soll es losgehen mit dem Test.
Programmoberfläche
Nach dem Starten erscheint eine in mehrere Bereiche aufgeteilte Oberfläche. Ganz oben sind wie zu erwarten, die Menüs und die Möglichkeit, Schritte rückgängig zu machen, oder zu wiederholen. Auf der linken Seite werden die Szenen gelistet. Die rechte Leiste zeigt die Bibliothek mit ihren Inhalten. Beide Leisten können mit einem Klick auf ihre Bezeichnungen schnell platzsparend eingeklappt werden.
Unter der linken Leiste werden Objekte aufgeführt und rechts daneben die wichtige Zeitleiste. In der Mitte befindet sich die Bühne, hier mit aktivierter Rasteransicht.
Im hier gezeigten Screenshot sind noch die Fenster für Objekte, JavaScript und Eigenschaften geöffnet, dessen Anzeige genau wie das Raster und die Hilfslinien, im Menü über Ansicht gesteuert werden können.
Diese Fenster sind schwebend und können somit frei auf der gesamten Programmoberfläche verschoben werden. Soweit der erste Eindruck direkt nach dem Programmstart.
Ein Blick in das Handbuch ist empfehlenswert. Dieses kann im Menü "Über" und dann einem Klick auf "Hilfe" abgerufen werden. Es öffnet sich ein PDF-File.
Einstellungen
Unter Ansicht blende ich zur besseren Übersicht erstmal das JavaScript-Fenster aus. Außerdem gehe im Menü zu den "Einstellungen".
Hier kann die Sprache und die Weite für das Raster definiert werden. Außerdem lassen sich hier neben dem Standardbrowser, noch drei weitere beliebige Browser für die Vorschau von Animationen wählen, welche mit der Tastenkombination STRG + ALT + 1, 2 oder 3 gestartet werden können. So kann gut überprüft werden, ob und wie die Animation im jeweiligen Browser läuft.
Eigenschaften für Projekt und Szene
Nun kann ich mit dem neuen leeren Projekt starten. Hierfür kann ich im Eigenschaftenfenster, welches zunächst die Bereiche "Projekt" und "Szene" enthält, gleich wichtige Vorgaben machen. Sinnvollerweise ist unter "Projekt" bereits "Vorladen aktivieren" angehakt.
Für das Vorladen kann eine von sechs vorgefertigten, oder auch keine Animation gewählt werden. Die Vorschau-Animation läuft dann, bis die eigentliche Animation abspielbereit ist. Eine sinnvolle Sache, wenn umfangreichere Projekte im Browser geladen werden.
Sehr wichtig ist natürlich auch die Größe der Szenen. Hier können Breite und Höhe exakt eingetragen werden. Es gibt aber auch hier schon fertige Vorlagen wie diverse Bannergrößen, Rechtecke, SVGA, SXGA, FullHD usw.
So wird mir zb. bei "Full Banner" automatisch die richtige Größe von 468x60 Pixel vorgegeben und sofort die Bühne angepasst. Ich muss nicht erst Standardabmessungen recherchieren. Ich trage mir hier selbst eine Breite und Höhe von 500 Pixel ein.
Jeder der schon einmal eine Website erstellt hat, wird die Probleme vor allem mit den älteren Internet Explorern von Microsoft kennen. Die ticken einfach anders und können viele Dinge oft gar nicht. Inzwischen ist die Verbreitung zum Glück doch sehr zurückgegangen.
Dennoch kann für solche Browser "Chrome Frame" benutzt werden. Hier in den Projektoptionen habe ich auch die Möglichkeit, nur bei Problembrowsern, eine Aufforderung zur Installation von Chrome Frame erscheinen zu lassen. Auf Wunsch auch mit selbst gewähltem Bild.
Im Bereich "Szene" des Eigenschaftenfensters ändere ich den Namen zu "Animation 1" und ändere den Hintergrund passend zur Ahadesign-Seite auf den Farb-Wert F9F9FF.
Die Animation soll automatisch starten, was bereits abgehakt ist. Auch das Ereignis "On scene load" ist bereits so in Ordnung.
Auf Wunsch können hier weitere Events definiert und zeitliche Funktionsaufrufe hinzugefügt werden.
Komplett unterschiedliche, oder aufeinander aufbauende Animationen können also in diversen Szenen untergebracht werden.
Mit den Events und Funktionsaufrufen kann dann bestimmt werden, wie der Übergang zur nächsten Szene stattfinden soll. Zb. kann es mit einem Tastendruck weitergehen, ein Übergangseffekt genutzt werden usw.
Objekte
Um die Bühne mit Elementen zu versorgen, bediene ich mich jetzt dem Objektfenster.
Einfügen lassen sich hier Texte, Bilder, Videos, Audiodateien, Rechtecke, Kreise, Dreiecke, Linien und Schaltflächen.
Zum Einfügen wird einfach das gewünschte Objekt mit der Maus auf die Bühne gezogen.
Sofort erweitert sich das Eigenschaftenfenster. Dort lassen sich dann je nach Objekt, zb. Rahmen, Drehung, Neigung, Sichtbarkeit, Schatten und Reflexion einstellen.
Das Objekt selbst, kann frei auf der Bühne umhergeschoben werden. Und auch die Abmessungen lassen sich intuitiv und schnell mit der Maus verändern. Über das Eigenschaftenfenster kann die Bemaßung jedoch auch ganz exakt eingetragen werden.
Text
Im Bereich "Text" kann logischerweise eine andere Schriftart gewählt werden.
Die Auswirkungen sind dann sofort sichtbar. Allerdings nicht, wenn eine der sehr zahlreich verfügbaren Webfonts genutzt wird.
Dann wird das veränderte Aussehen erst über die Vorschau im Browser erkennbar.
Nach dem Textobjekt hole ich mir jetzt eine Grafik. In meinem Fall ist das die Ahadesign-Weltkugel. Nach dem das Grafikobjekt auf die Bühne gezogen wurde, öffnet sich der Dateibrowser und ich kann das entsprechende Bild wählen. Jetzt als Objekt vorhanden, kann es über die Eigenschaften natürlich wieder wie gewünscht verändert werden.
Objektpalette
Die beiden Objekte Text und Bild, sind nun unten links neben der Zeitleiste gelistet.
Hier kann ich die Anordnung über das Kontextmenü der rechten Maustaste, oder einfach durch Ziehen mit der Maus ändern.
In meinem Fall soll die Weltkugel im Hintergrund liegen, also ziehe ich sie einfach unter die Textbox. Ich kann also Ebenenbasiert arbeiten.
Farbwähler
Jetzt ist die Schrift allerdings nicht mehr gut zu lesen. Aber dazu ändere ich einfach die Schriftfarbe in den Eigenschaften.
Hier habe ich bezüglich der Farben keinerlei Einschränkungen. Ich kann auch einen im Webdesign üblichen hexadezimalen Farbwert eintragen.
An dieser Stelle muss ich allerdings etwas Kritik üben. Leider wird mir hier keine Pipette angeboten, mit der ich Farben aus der Bühne, aus einem Browser, oder einem anderen Programmfenster aufnehmen kann.
So bin ich gezwungen, die Farbe mit einem externen Tool zu ermitteln, sofern ich den Wert nicht auswendig kenne. Da der WebAnimator jedoch ständig weiterentwickelt und verbessert wird, darf man berechtigte Hoffnung auf ein Update haben, welches Besserung bringt. Ich wähle jetzt einfach eine Farbe nach Augenmaß. Der Text bekommt außerdem noch einen schwarzen Schatten mit dem Wert 2 für X, Y und Radius.
Die Bühne mit beiden Objekten sieht jetzt wie folgt aus:
Wie man weiter oben im Screenshot sieht, haben die Objekte standardmäßig immer zwei Eigenschaften. Also die Positionen "Links" und "Oben".
Ein Doppelklick auf eine Eigenschaft öffnet ein kleines Fenster mit den Werten. Um sie ändern zu können, muss jedoch wieder das Eigenschaften-Fenster und dort der Bereich "Maße" aufgerufen werden, sofern das Objekt nicht direkt mit der Maus verändert wird.
Hier können dann wieder ganz exakt die Werte für Links, Oben, Breite und Höhe eingegeben werden.
Was auch nicht fehlt, ist der Z-Index. Dieser beschreibt wie im Webdesign üblich, die Stapelreihenfolge der Objekte.
So hat in meinem Beispiel die Weltkugel einen Wert von 1 und die darüberliegende Textbox einen Wert von 2.
Genauso wie man rechts neben der Bezeichnung im Objektbereich neben der Zeitleiste ein Element sperren oder ausblenden kann, lassen sich auch viele weitere Eigenschaften mit Klick auf das jeweilige Icon hinzufügen.
Die Checkboxen der bereits verwendeten Eigenschaften sind natürlich schon abgehakt. Damit sind bisher nur der Hintergrund und ein Text vorhanden, was für eine erste kleine Animation aber schon ausreicht. Zuvor speichere ich zur Sicherheit das Projekt aber erst mal ab. Es wird dann mit der Dateiendung "wap" gesichert.
Erste Animation
Jetzt soll der Text von oben hereinfliegen, sich vergrößern und dann die volle Deckkraft bekommen. Dazu schiebe ich den Text jetzt erst mal nach links oben, außerhalb der Bühne und verringere die Schriftgröße von 20 auf 10. Und ich stelle die Deckkraft über die Eigenschaftenpalette im Bereich Element voll zurück. In der Zeitleiste schiebe ich den Pfeil auf 2 Sekunden.
Bei jetzt aktivierter Textbox klicke ich rechts über der Zeitleiste auf "Aufnehmen". Das Arbeitsfenster erhält damit einen roten Rahmen. So ist eine laufende Aufnahme immer sofort erkennbar.
Nun ziehe ich den Text wieder an die ursprüngliche Stelle. Das Programm unterstützt mich dabei sehr gut, um genau in der Mitte einzurasten. Dann erhöhe ich wieder die Schriftgröße und Deckkraft auf den ursprünglichen Wert und beende die Aufnahme genauso, wie ich sie vorher gestartet habe.
Auf diese Weise hat der WebAnimator jetzt die Bewegung berechnet und automatisch Schlüsselbilder erzeugt.
Das Ergebnis kann ich jetzt über die Vorschau im Browser ansehen. Oder ich nutze den Abspielknopf über der Zeitleiste.
Easing
Mit Rechtsklick auf eine Schlüsselbild-Leiste kann eine Timingfunktion wie zb. Ease in/out für ein natürlicheres Verhalten genutzt werden.
So ist also die Geschwindigkeit nicht während der gesamten Animation völlig gleich und eventuell langweilig.
Es ist sogar möglich, ganz eigene Effekte zu kreieren.
Über den Menüpunkt "Eigene Bearbeiten..." öffnet sich ein Easing Editor, mit dem sich beliebig neue Easing Funktionen erstellen und abspeichern lassen.
Und dazu muss keine einzige Zeile Code geschrieben werden. Ähnlich wie bei einem Vektor-Programm, wird ein Pfad angepasst, um unterschiedliche Start- und Endgeschwindigkeiten realisieren zu können.
Somit sind keine Grenzen gesetzt. Natürlich lassen sich die Schlüsselbildleisten jetzt noch verkleinern, vergrößern und verschieben. Alle Leisten lassen sich auch gleichzeitig markieren, indem mit der Maus ein Rahmen darum gezogen wird. So kann die Animation über das Kontextmenü der rechten Maustaste auf einen Schlag auch wieder gelöscht werden, was ich hier mache, da dieser Text doch auf andere Weise animiert werden soll.
Button erstellen
Normalerweise startet diese erste Animation mit dem Laden der Webseite. Das wäre hier in diesem Artikel nicht sehr praktikabel. Deshalb soll die Animation erst mit Klick auf einen Button ablaufen. Bei meinem ersten Test hatte ich zuerst die Animation inklusive Button fertiggestellt und danach die Szene kopiert und dort alles gelöscht, bis auf den Button. Diese Szene hatte ich dann an die oberste Stelle geschoben. Leider ließ sich daraufhin der Button in der jetzt zweiten Szene nicht mehr löschen, oder sonst irgendwie bearbeiten. Die Software hat sich jedesmal aufgehängt. Wahrscheinlich lag das an dem doppelten Button mit dummerweise gleicher Bezeichnung. Man hat also besser schon vorher einen Plan und vermeidet damit solche Fehler. Ich starte also ganz neu und beginne jetzt gleich mit nur dem Button in Szene 1.
Für den Button verwende ich das unterste Objekt aus der Objektpalette. Man könnte aber auch zb. ein Bild dafür verwenden.
Hier kann jedoch ganz ohne Grafik, ein Button in der Eigenschaftenpalette im Bereich "Element" erstellt werden.
Hier könnte der Button umbenannt und die ID geändert werden, was man bei Verwendung von zusätzlichem eigenen JavaScript vielleicht machen möchte.
Auch lassen sich unterschiedliche Arten des Hintergrunds wählen. Ich nutze hier einen Verlauf.
In diesem Fall können nun zwei Farben für den Verlauf und der Winkel definiert werden.
Dann folgen die Einstellungen für den Rahmen des Buttons. All diese Einstellungen lassen sich für drei Button-Zustände definieren. In der Eigenschaftenpalette im Bereich "Text" kann nun für jeden der Zustände der Text angepasst werden. Ich trage hier "Start/Stop" ein, wähle Fettschrift und eine zentrierte Ausrichtung. Auch vergebe ich eine etwas dunklere Farbe, als für den Rahmen. Als Schriftart kommt Tahoma zum Einsatz.
Im Menü wähle ich jetzt Szene -> Szene hinzufügen. Dann aktiviere ich wieder die vorherige Szene 1 und dort den Button.
Ereignis hinzufügen
Jetzt wähle ich in der Eigenschaftenpalette unter "Ereignisse" die Option "On Mouse click" und klicke auf das rechte Plus-Zeichen.
Als Aktion belasse ich "Szene laden" und wähle darunter Szene 2. Bei Übergang und Dauer stelle ich nichts ein.
Über das Menü Projekt -> Projekt speichern unter, sichere ich diese neue Arbeit erstmal auf der Festplatte.
Jetzt aktiviere ich Szene 2 und erstelle die eigentliche Animation nochmal neu. Durch die Vorarbeit in Szene 1, wird die Animation auf der Webseite dann erst durch Klick auf den Button gestartet.
Ich erstelle also wieder den Text wie oben, ändere die Textfarbe und ziehe die Deckkraft auf Null. Dann schiebe ich den Pfeil in der Zeitleiste wieder auf zwei Sekunden, starte die Aufnahme und stelle wieder auf volle Deckkraft. Schließlich beende ich die Aufnahme. Wieder wurden automatisch die Schlüsselbilder erzeugt. Diesmal eben nur für die Deckkraft.
Jetzt möchte ich noch nachträglich weitere Objekte nutzen, was natürlich auch überhaupt kein Problem ist. Außerdem soll die Ahadesign-Kugel diesmal anders zum Einsatz kommen.
Live-Animation
Ich bereite auch diese Objekte zunächst wieder vor. Die Kugel wird geladen und markiert und die Maße erhalten eine Breite und Höhe von 100 Pixel. Dann wird die Kugel nach oben links außerhalb der Bühne verschoben.
Nun hole ich mir aus der rechten Seitenleiste die Live-Animation "Bewegen/Wachsen/Schrumpfen" und ziehe sie mit der Maus direkt auf die Weltkugel. Markieren und auf "Anwenden" klicken, hätte genauso funktioniert.
Der Zeitleistenpfeil war noch auf 2 Sekunden positioniert. Ohne Aufnahme zu klicken, wurden jetzt automatisch Schlüsselbilder für Breite, Höhe, Links und Oben bis 6,5 Sekunden angelegt.
Im Arbeitsfenster bzw. auf der Bühne sieht es jetzt so aus:
Wie man sieht, hat die Live-Animation einen fertigen Pfad angelegt, dem jetzt die Weltkugel folgt. Dieser Pfad kann leicht mit der Maus direkt auf der Bühne, oder auch durch Anwählen der Schlüsselbilder in der Zeitleiste, durch verschieben des Objekts, geändert werden. Sind unerwünschte Richtungsänderungen vorhanden, werden einfach die zugehörigen Schlüsselbilder mit der rechten Maustaste gelöscht. Und natürlich können die Schlüsselbilder markiert und verlängert, oder verkürzt werden. Beim Verlängern dauert die Animation zb. länger und wird dadurch langsamer.
Ich achte hier darauf, dass die Kugel nicht über 500 x 500 Pixel erscheint. Ist ein Pfadteil nicht sichtbar, soll aber bearbeitet werden, schiebe ich den Zeitleistenpfeil bis zum entsprechenden Schlüsselbild und kann dann das Objekt zb. mit den Pfeiltasten der Tastatur anders positionieren.
Ich mache hier einige Anpassungen und verkürze durch markieren der äußeren rechten vier Schlüsselbilder auf 6 Sekunden. Ich könnte dann alle Schlüsselbilder der Weltkugel markieren und über die rechte Maustaste über das Kontextmenü "Timing Funktion - Ease in/out", für eine natürlichere Bewegung wählen, was mir in diesem Fall aber nicht so gut gefällt.
Jetzt liegt noch mein Text unter der Kugel. Deshalb ziehe ich sie links von der Zeitleiste wieder ganz nach oben.
Der Zeitleistenpfeil steht bei 6 Sekunden und ich ziehe ein neues Textobjekt in die Bühne. Der gewünschte Text muss nicht im Objektbereich eingetragen werden. Das geht auch über das Eigenschaftenfenster, wo sogar HTML-Tags verwendet werden können. Ich entscheide mich hier einfach mal für eine H3-Überschrift.
Das mache ich jetzt mit mehreren einzelnen Textobjekten und verschiebe sie an unterschiedliche Stellen. Alle Objekte bekommen unterschiedliche Drehungen und die Schlüsselbilder werden nach Wunsch verschoben.
Umso mehr Objekte es werden, desto unübersichtlicher kann es auch sein. Es lassen sich aber weitere Zeitleisten mit jeweils eigenen Animationen anlegen. Dazu wird einfach auf den Namen "Hauptzeitleiste" geklickt.
HTML5 Export
Nun möchte ich die Animation in die Webseite einbinden. Dazu gehe ich im Menü auf "HTML5 Export".
Ich wähle einen Ordner aus, oder erstelle mir einen neuen Ordner, indem jetzt alle benötigten Dateien eingefügt werden. Dabei öffnet sich auch gleich der Browser mit der Animation.
Die Animation befindet sich jetzt in einer eigenen HTML-Datei, sie soll jedoch hier in diesem Artikel erscheinen. Es sind also ein paar Anpassungen nötig.
Mit einem Editor wie zb. Notepad++ öffne ich die Datei "animation1.html. Hier ist zu erkennen, dass jQuery 1.7 verwendet wird. Sollte man eine Webseite oder auch ein CMS verwenden, welches das Ajax-Framework jQuery bereits geladen hat, braucht man sich um den Code im Head-Bereich nicht weiter zu kümmern. Wichtig ist für mich dann der Code innerhalb des Body-Tags.
Ich kopiere somit alles nach dem öffnenden Body-Tag bis vor dem schließenden Body-Tag und füge es unterhalb des gerade geschriebenen Textes im Quellcode zb. dieses Artikels ein.
Der Div-Container dürfte nirgendwo Ärger machen. Allerdings lassen manche Systeme wie auch Joomla, nicht so einfach JavaScript-Code zu und zerstückeln oder kürzen ihn. Dann könnte es helfen, den Editor im Backend zu deaktivieren, bis der Quellcode des Artikels gespeichert wurde. Eine andere Lösung für Joomla wäre die Verwendung eines Moduls innerhalb des Artikels mittels "loadposition".
Trotzdem kann es möglicherweise nicht gelingen. Zb. wird bereits ein anderes Framework wie Mootools geladen, was einen Konflikt erzeugen könnte. Auch in meinem Fall gelingt es leider nicht so einfach.
Es gibt aber eine Lösung, welche mit sehr vielen Contentmanagement-Systemen funktioniert. Es muss sich nur ein Wrapper bzw. ein IFrame einbinden lassen. Im Falle von Joomla geht das auch sehr gut mit Loadposition. Ich lege über Erweiterungen -> Module also ein neues Modul vom Typ Wrapper an und weise diesem Modul eine Position zu, welche das Template noch nicht verwendet. Zb. wani1.
Dann lege ich auf dem Webspace einen Ordner an, in welchem der Webanimator-Exportordner gespeichert wird. Hier ist ja auch die HTML-Datei mit dabei. Nun gebe ich den URL im Wrapper an und auch die richtigen Abmessungen, wie sie eben für die Szene im Webanimator eingestellt wurde. Jetzt kann ich im Joomla-Artikel an der gewünschten Stelle den Wrapper mit loadposition und einem Leerzeichen, gefolgt vom Namen wie zb. wani1 aufrufen. Der loadposition-Aufruf ist dabei von geschweiften Klammern umgeben. Die genaue Syntax kann in Joomla auch unter Erweiterungen -> Plugins -> Inhalt - Modulpositionen laden nachgelesen werden. Damit klappt es in meinem Fall jetzt und die Animation erscheint, wie man hier sieht. Sehr viel einfacher klappt die Einbindung natürlich mit dem ebenfalls von Incomedia stammenden Programm WebSite X5, welches ebenfalls hier unter WebSite X5 Professional 11 im Test! getestet wurde.
Hier wurde in Szene 2 ein weiterer Button eingebaut, um die Animation auf Klick wiederholen zu können. Mit etwas mehr Mühe bekommt man sicher ein schöneres Ergebnis als hier.
Vieles was über die rechte Maustaste erreichbar ist, findet sich auch in den Menüs des WebAnimator. Und eigentlich alles erklärt sich dort von selbst, so dass hier nicht weiter darauf eingegangen werden muss.
Vorlagen
Eine wichtige Sache muss aber unbedingt noch angesprochen werden. Und das sind die Vorlagen. Was sich dahinter verbirgt, erfährt man im Menü Vorlagen -> Vorlage wählen. Es öffnet sich dann ein Fenster mit vier Standardvorlagen. Es handelt sich hier um bereits fertige Animationen, welche nur noch mit eigenen Inhalten wie Texte und Bilder bestückt werden.
Ich aktiviere hier mit der Maus mal Zoomen & Drehen und klicke auf OK. Jetzt öffnet sich ein Fenster mit Vorgaben für diverse Größen von Bannern, Rechtecken, oder Skyscraper. Ich wähle einfach mal Large rect.
Mit einem Klick auf "Weiter" öffnet sich jetzt das Fenster um Folien einzufügen.
Mit einem Klick auf den entsprechenden Button öffnet sich der Dateimanager von Windows, wo ich mir ein Bild aussuche. Auf diese Weise füge ich nun mehrere Bilder ein.
Ich habe hier vier Bilder verwendet und für jedes Bild eine Überlagerung eingefügt. Dabei handelt es sich einfach um einen passenden Text, für den die Farben für Hintergrund und Vordergrund, sowie Schriftart und Schriftgröße definiert werden können.
Und auch ein URL, welcher zb. direkt zur hier vorgestellten Seite führt, kann angegeben werden. Das geht für einen Klick auf die Textüberlagerung, oder auch für einen Klick auf das gesamte Bild. Die Dauer der Sichtbarkeit kann für jede Folie auch unterschiedlich eingestellt werden. Ich habe mich hier bei jeder Folie für 3 Sekunden entschieden.
Der Klick auf "Fertigstellen" öffnet zunächst ein Hinweisfenster. Ich kann die gemachten Einstellungen zur späteren Verwendung abspeichern, was ich auch mache.
Nach dem Speichern wird nun die fertige Animation in der Zeitleiste und in der Bühne angezeigt. Ich habe jetzt also wieder alle Möglichkeiten für weitere Anpassungen, oder der Vorschau und dem HTML5-Export.
In der Vorschau im Browser überprüfe ich die angegebenen Links. Die Links der Überlagerungen stimmen. Allerdings wird für alle Folien immer die gleiche Adresse zu den Bildbearbeitungstutorials verwendet. Ich gehe also nochmals in die Vorlage und lade meine zum Glück abgespeicherten Einstellungen. Jetzt kann ich ganz schnell den Klick-URL für die Folien auf die übergeordnete Tutorialseite ändern. Ich prüfe erneut im Browser und jetzt klappt es. Hier scheint es also einen kleinen Bug zu geben, womit ich aber gut leben kann.
Wie schon bei der ersten Animation, starte ich wieder den HTML5-Export.
Da ich auch diese Animation wieder als IFrame einbinden werde, speichere ich im gleichen Ordner. So habe ich später für den IFrame immer die fast gleiche Webadresse. Lediglich die HTML-Datei ändert sich.
Das mit diesen Vorlagentemplates ist schon eine tolle Sache und sie sind alle auch recht brauchbar. Dennoch könnte man sich für noch mehr Flexibilität, weitere von diesen fertigen Animationen wünschen. Und glücklicherweise sind auch weitere Vorlagen für den WebAnimator erhältlich.
Template-Collections
Die Firma Incomedia bietet auf ihrer Website zum WebAnimator noch zwei interessante Template-Collections für jeweils 19,99 Euro an. Auf der Seite wird auch eine Vorschau angeboten. So ist man sich gleich im Klaren, was man da kauft. Netterweise hat uns Incomedia die beiden Template-Collections ebenfalls zukommen lassen.
Es handelt sich um zwei EXE-Dateien, mit denen sich das Setup ausführen lässt. Nach einem Doppelklick auf die EXE-Datei startet die Installation mit dem Hinweis, möglichst alle anderen Anwendungen zu beenden. Ich beende also auch den WebAnimator erstmal und fahre dann fort.
Die Installation ist in Windeseile erledigt. Das Gleiche mache ich auch mit der zweiten Collection und starte danach wieder den WebAnimator.
Natürlich öffne ich wieder die Vorlagen. Jetzt befinden sich zehn zusätzliche Templates im Fenster.
Ich probiere gleich mal "Pop-Up Info" aus der Template Collection 2 aus. Als Größe kommt nun das Full Banner mit 468 x 60 Pixel zum Einsatz. Zusätzlich zum Einstellungsfenster öffnet sich jetzt auch ein Vorschaufenster.
Wie man sieht, habe ich hier bereits Einstellungen vorgenommen.
Wurden wie hier, mehrere Texte eingefügt, können die einzelnen Folien mit den Pfeilen im Vorschaufenster durchgesehen werden. Und jede Folie kann auch wieder einen eigenen URL bekommen.
Nun klicke ich wieder auf "Fertig", speichere das Projekt und exportiere schließlich auch diese dritte Animation zur Veröffentlichung hier auf der Seite.
Wie man sieht, ist mit dem WebAnimator ziemlich viel möglich und es wurde hier längst nicht alles angesprochen. Das ist aber auch nicht nötig, denn hier soll ja nur das Prinzip verdeutlicht und aufgezeigt werden, zu was die Software in der Lage ist und was vielleicht nicht so gut klappt. Den Rest erklärt das umfangreiche Handbuch sehr gut.
Achtung Update!!!
Mittlerweile gibt es neue Versionen und Preismodelle. Nachfolgend die aktuellen Links zu WebSite X5 und WebAnimator 3 von Incomedia mit Stand Dezember 2020.
- Webseite zu WebSite X5
- Die Unterschiede zwischen WebSite X5 Evo und Pro
- Gratis WebSite X5 go sowie WebSite X5 evo und pro im Vergleich
- Kostenlose Demo-Website mit WebSite X5 evo und pro erstellen
- Webseite zum WebAnimator
WebSite X5 evo und pro können bis 31. Dezember 2020 mit dem Gutscheincode aff2020 mit 30 Prozent Rabatt erworben werden. Diesen Rabattcode einfach bei der Bestellung über nachfolgend genannte Links eingeben.
WebSite X5 pro zum Preis von 139,30 Euro statt 199 Euro erwerben
Das ergibt eine Ersparnis von 59,70 Euro.
WebSite X5 evo zum Preis von 48,99 Euro statt 69,99 Euro erwerben.
Das ergibt eine Ersparnis von 21 Euro.
WebAnimator plus 3 und now 3 können bis 31. Dezember 2020 mit dem Gutscheincode affwa2020 mit 60 Prozent Rabatt erworben werden. Diesen Rabattcode einfach bei der Bestellung über nachfolgend genannte Links eingeben.
WebAnimator plus 3 zum Preis von 35,99 Euro statt 89,99 Euro erwerben
Das ergibt eine Ersparnis von 53,99 Euro.
WebAnimator now 3 zum Preis von 24 Euro statt 59,99 Euro erwerben
Das ergibt eine Ersparnis von 35,99 Euro.
Fazit!
Der WebAnimator bietet wirklich vielfältige Möglichkeiten für die Erstellung toller Animationen. Durch den Einsatz des JavaScript-Frameworks jQuery und den HTML5-Export sind die Animationen auch Suchmaschinenfreundlich, was man bei Flash nicht behaupten kann. Das merkt man zb. daran, weil sich Texte auch während der laufenden Animation markieren lassen. Um mit der Software zurechtzukommen, sollte man das Handbuch lesen und sich die Videotutorials zu Gemüte führen. Dann dürfte jeder Anwender recht gut mit dem WebAnimator zurecht kommen. Programmierkenntnisse sind zu keiner Zeit wirklich notwendig. Sehr gut sind die angebotenen Vorlagen, mit denen man auch ohne Anleitung sofort zurechtkommt. Der WebAnimator ist ein sehr nützliches Programm zu einem absolut fairen Preis und ohne Abo-Zwang, wie das bei so manchem Konkurrenzprodukt der Fall ist. Und auch die beiden Template-Collections sind wirklich empfehlenswert.
