WebAnimator 4 Animationen | Test & Download mit Rabatt

WebAnimator 4 von Incomedia für HTML5-Animationen ohne Programmierkenntnisse hier im Test + Rabatt für den Download.

Der hier dauerhaft mit Rabattcode im Angebot günstig zum Kauf erhältliche WebAnimator 4 von Incomedia, dürfte die beste am Markt verfügbare Animationssoftware für interaktive und auf allen Browsern und Endgeräten optimal dargestellte Web-Inhalte sein. Egal, ob animierte Banner, Menüs, Schaltflächen, Hintergründe, Minispiele, animierte Texte oder sonstige HTML5-Animationen und Gifs, z. B. für interaktive Präsentationen, Werbung und mehr, der WebAnimator 4 macht es dank seiner einfachen und intuitiven Benutzeroberfläche relativ leicht, ganz ohne Code verstehen und schreiben zu müssen, eigene Animations-Projekte umzusetzen. Im folgenden Test gehen wir detailliert auf die vielen professionellen Möglichkeiten des WebAnimator 4 für kreative Websites, Blogs, Onlineshops etc. ein und beantworten häufige Fragen. Zudem ist der günstigste Deal für den Erwerb des WebAnimator 4 sowie der Download der kostenlosen Testversion aufgeführt. Im Laufe des Tests wird ein Projekt erstellt, welches am Ende gezeigt wird.

Inhaltsverzeichnis:

• Anleitungen, Testberichte und Tutorials zum WebAnimator
• Preis und Rabattcode für den WebAnimator 4
• Kostenlose Testversion des WebAnimator 4
• Was kann der WebAnimator 4 und wer braucht ihn?
• Zahlreiche Funktionen für kreative Animationen
• Ein erstes Projekt mit dem WebAnimator 4
• Nicht-responsives Layout im WebAnimator 4
• Responsives Layout im WebAnimator 4
• Gleicher Hintergrundverlauf für alle Haltepunkte im responsiven Layout
• Hintergrund für Text einbauen
• Text über den Formhintergrund legen und für Haltepunkte anpassen
• Animierten Text für Basis-Layout und Haltepunkte vorbereiten
• Starttext und Textlauf animieren
• Ressourcen für die Animation importieren
• Grafiken platzieren und animieren
• Die fertige Animation speichern und veröffentlichen
• Abschließende Bemerkungen zum Incomedia WebAnimator 4
• Fragen und Antworten zum WebAnimator 4
• Informationen zum Unternehmen Incomedia

Anleitungen, Testberichte und Tutorials zum WebAnimator

Das Unternehmen Incomedia s.r.l. aus Ivrea in Italien bietet bereits seit 1998 Software-Lösungen. Unter anderem sind das seit dem Jahr 2000 die Webdesign-Software für den Desktop, WebSite X5 zur Erstellung von Webseiten, Blogs und Onlineshops, sowie seit dem Jahr 2014 das Animationsprogramm WebAnimator 4, welches sich gegenüber dem Vorgänger WebAnimator plus aufgrund enormer Verbesserungen und Modernisierungen stark unterscheidet. Als Partner von Incomedia können wir seit vielen Jahren ganz besonders intensiv die Software-Entwicklung des italienischen Unternehmens verfolgen, welche stets darauf abzielt, Applikationen für Anwender zur Verfügung zu stellen, die einfach zu nutzen sind und schnelle sowie professionelle Resultate bringen. Entsprechend sind hier im Bereich Tutorials -> Webdesign diverse Anleitungen, Testberichte und Tutorials zu WebSite X5 und dem WebAnimator zu finden.

Preis und Rabattcode für den WebAnimator 4

Das für Windows 10 und 11 mit 64-Bit sowie macOS 10.14, macOS 10.15, macOS 11, macOS 12 und macOS 13 flexible Tool für Web-Animationen mit HTML5, ist mit Stand August 2023 regulär zum einmaligen Preis von 89,95 Euro erhältlich. Da die Preise bei Incomedia recht stabil sind, dürfte sich auch längerfristig nichts an den Kosten ändern. Es handelt sich um kein Abonnement, sondern um eine lebenslange Dauerlizenz. Mit unserem exklusiven Rabattcode lassen sich bis auf Weiteres satte 15% sparen. Der Preis beträgt somit nur noch 76,46 Euro. Das ist eine Preisersparnis von 13,49 €. Sollten sich Änderungen ergeben, sind diese stets aktuell in der etwas weiter unten angegebenen Angebotsseite aufgeführt.

Hier zum WebAnimator 4 für 76,46 € statt 89,95 €

Bei Verwendung des hier angegebenen Links, ist der Gutscheincode bzw. Rabattcode bereits automatisch im Warenkorb eingetragen und der Preis ist wie angegeben reduziert.

Der aktuelle Gutscheincode für den WebAnimator 4 von Incomedia lautet: affwa2023

Der Kauf des WebAnimator 4 erfolgt sicher über 2Checkout. Zahlungsmethoden sind Banküberweisung, Lastschrift, Giropay, Echtzeitüberweisung bzw. Instant Payment, Skrill Wallet und Neteller.

Der Rabattcode affwa2023 gilt mindestens bis einschließlich 31. Dezember 2023. Es ist davon auszugehen, dass wir auch danach einen ganzjährigen Promo-Code anbieten können und manchmal gibt es auch besondere Aktionen mit Deals, die eine noch höhere Preisreduzierung bringen. In solchen Fällen müssen die Rabattcodes eventuell selbst ins Bestellformular eingetragen werden. Dazu im Warenkorb das Häkchen bei »Ich habe einen Gutscheincode« setzen, worauf sich das Eingabefeld für die Eintragung des Gutscheincodes öffnet. Der Preis reduziert sich dann sofort. Sobald sich Änderungen ergeben, wird dies natürlich hier kommuniziert, weshalb es sich immer lohnt, unsere News zu verfolgen.

Eine gute Anlaufstelle für die besten Schnäppchen und Rabattaktionen zum WebAnimator sowie für WebSite X5 von Incomedia mit stets den günstigsten Preisen mit Rabattcode, ist das ganze Jahr über mit dem Bericht „WebSite X5 + WebAnimator Angebote, Gutschein und Rabatt“ in unserer Rubrik unter „Angebote“ zu finden.

Kostenlose Testversion des WebAnimator 4

Nach einer kurzen Registrierung mit Name und E-Mail-Adresse versendet Incomedia den Link zum Download des WebAnimator 4. Dieser kann dann für 30 Tage mit allen Funktionen ausgiebig probiert werden.

Hier zur kostenlosen Testversion des WebAnimator 4

Animationen können auch mit der Testversion exportiert werden. Die Animationen enthalten jedoch ein Wasserzeichen. Das Wasserzeichen kann aus bereits mit der Testversion erstellten Animationen nach dem Erwerb einer Lizenz entfernt werden.

Was kann der WebAnimator 4 und wer braucht ihn?

Der WebAnimator 4 von Incomedia ist eine Animationssoftware für den Desktop auf einem Computer mit dem Betriebssystem macOS oder Windows. Das Programm ist übersichtlich und leicht verständlich und gedacht für die Erstellung von Animationen in modernem HTML5 und für interaktive Web-Inhalte wie Präsentationen, Banner, Hintergründe, animierte Texte und mehr. Aufgrund der übersichtlichen und logischen Programmoberfläche sowie unterstützenden Funktionen und Werkzeugen, ist der WebAnimator 4 sehr gut für Anwender geeignet, die keine Programmierkenntnisse besitzen.

Das Animationsprogramm eignet sich jedoch auch ganz hervorragend für Profis, die selbst Code für kompliziertere Anforderungen oder ganz spezielle Animations-Resultate einfügen können. Der WebAnimator 4 besticht mit einer sehr guten Performance und bietet sich beispielsweise an, um mit Animationen ganz besondere Aufmerksamkeit in Beruf, Schule und Freizeit zu erregen. Mit den Animationen des WebAnimator 4 kann durchaus mehr Traffic generiert und der Umsatz mit Bannern für Onlineshops oder Websites gesteigert werden. Auch für die Wissensvermittlung eignen sich die Animationen perfekt, denn sie halten die Betrachter sicher mit mehr Interesse bei der Sache, als mit konventionellen Lerninhalten. Es kann aber auch einfach um Spaß und gute Laune gehen, indem Freunde und Bekannte mit den Animationen unterhalten werden.

Objekte können ganz leicht via Drag & Drop auf die Bühne gebracht und in unterschiedlichen Szenen genutzt werden. Keyframes lassen sich einfach auf die Timeline bringen oder automatisch einfügen. Es stehen zahlreiche, fertig vorbereitete und jederzeit anpassbare Animationen und Effekte zur Verfügung, mit denen beispielsweise eine Website aufgewertet werden kann. Ein gerade in der heutigen Zeit sehr wichtiges Merkmal des WebAnimator 4, ist das responsive Design. Damit ist gewährleistet, dass Animationen und interaktive Objekte auf allen Endgeräten optimal dargestellt werden.

Mit dem WebAnimator 4 animierte Hintergründe und Vordergründe können eine Website positiv aus der Masse hervorheben. Ganz besondere Hingucker lassen sich mit der Loop-Funktion erzielen. Oft machen sich auch mit dem WebAnimator 4 animierte Menüs, Symbole und Schaltflächen sowie Banner recht gut und inspirieren nicht selten potenzielle Kunden zum Kauf im eigenen Online-Shop. Einzigartige und professionelle Videopräsentationen sowie kreative Websites oder Logos, worüber die Betrachter interaktiv mit einbezogen werden, können so auch von Einsteigern schnell und einfach verwirklicht werden.

Einige wichtige Features des WebAnimator 4 kurz zusammengefasst:

• Perfekte Darstellung der Animationen für alle Browser und Geräte dank Responsive Design
• Animationen in 3D
• Event-Management
• Export von Animationen als Videos
• Line Length für den Effekt handgezeichneter Linien
• Automatisches Einfügen von Keyframes
• Selbst definierbare Preloader
• Inhalte zeitsparend als Symbole nutzen
• Eine Vielzahl freier und vorgegebener Formen und Effekte
• Morphing-Animationen für den fließenden Übergang zwischen Formen
• Sequenzen mehrerer Bilder innerhalb einer Bitmap-Datei mit Sprites
• Methoden für Easing
• Auf die eigenen Bedürfnisse zugeschnittene Elemente
• Integrierter JavaScript-Editor für JavaScript, CSS, HTML sowie externe Scripts

Zahlreiche Funktionen für kreative Animationen

Der WebAnimator 4 bietet Szenen, die wie Ebenen in einem Bildbearbeitungsprogramm wie Adobe Photoshop oder Affinity Photo etc. oder vielleicht noch besser, wie Folien in einer Präsentation betrachtet werden können. Die Szenen sind für die Steuerung von Abläufen und für die Erzeugung von Effekten relevant. Diverse Zeitachsen können genutzt werden, auf denen Szenen verlaufen. Das erlaubt die Kombination zahlreicher Elemente, Animationen und Interaktionen für komplexe Projekte. Seit Version 4 des WebAnimator gibt es die Funktion Auto-Keyframe, welche für eine leichtere und beschleunigte Arbeit automatisch Keyframes einfügt, sofern das gewünscht ist.

Der WebAnimator 4 erlaubt den Import sowie die Erstellung eigener Vektorelemente, die dann für Animationen genutzt werden können. Es stehen aber auch viele Formen zur Verfügung, die bereits vorgefertigt und sofort einsatzbereit sind. Auch vordefinierte Formen lassen sich jederzeit nach Wunsch anpassen, wofür diverse Werkzeuge für die Bearbeitung von Rahmen sowie dem Hinzufügen, Entfernen und Anpassen von Ankerpunkten zur Verfügung stehen. Eine Form kann mit dem Morphing-Effekt mit fließendem Übergang in eine andere Form übergehen, ohne dafür eine Zeile Code schreiben zu müssen.

Ein besonders interessanter Effekt ist Keyframe Line Length. Mit diesem Effekt wird der Eindruck von in Echtzeit mit der Hand gezeichneten Linien erweckt. Für Effekte gibt es eine sehr umfangreiche Bibliothek. Die Effekte sind bereits fertig nutzbar, können aber wie die vordefinierten Formen, ganz nach Wunsch angepasst und dann sogar als eigene Effekte dauerhaft gespeichert werden. So lassen sich selbstdefinierte Effekte immer wieder mit weiteren Projekten nutzen. Buchstaben und Wörter können ebenfalls ansprechend in Bewegung gebracht werden, um tolle Textanimationen zu verwirklichen.

Um einheitliche Animationen in Browsern und unterschiedlichen Geräten zu gewährleisten, können hunderte von Schriften aus dem eigenen System und von Google Fonts in die HTML5-Datei eingebunden werden. Animierte Figuren lassen sich wunderbar mit Sprites erstellen. Dabei werden eine oder mehrere Sequenzen mit einer einzigen Bitmap-Datei geladen. Symbole sind hilfreich, um gleiche Elemente, Szenen, Zeitachsen und Animationen in unterschiedlichen Szenen sowie in einer Szene, an verschiedenen Positionen einzufügen. Für Bewegungseffekte gibt es das Feature Motion Path. Mit der Funktion lassen sich Objekte aus komplexen Kurven erstellen und auf natürliche Weise animieren.

Der WebAnimator 4 enthält 40 unterschiedliche Easing-Methoden, um fließende und natürlich wirkende Animationen mit in der Geschwindigkeit angepassten Übergängen zu erreichen. Wiederkehrende Elemente erlauben die Verwendung von einem Element in allen Szenen, das auf Wunsch jedesmal unterschiedlich animiert ist. Animationen sollen natürlich auf allen Geräten und mit allen Browsern korrekt angezeigt werden. Dafür bietet der WebAnimator 4 das responsive Design, welches alle Browser sowie Displays und Größen für eine korrekte Darstellung berücksichtigt. Eine hohe Aufmerksamkeit bei Betrachtern erzeugen ausgeführte Aktionen beim Klick auf Schaltflächen, die sich mit dem WebAnimator 4 sehr einfach zuweisen lassen.

Personalisierte Elemente können mit eigenen HTML-Tags erstellt werden und wenn es komplizierter werden soll oder muss, dann hilft die Script-Unterstützung mit dem JavaScript-Editor des WebAnimator 4. Im Editor erstellte Funktionen können gesichert und immer wieder verwendet werden. Es ist auch möglich, HTML-Dateien, URLs, CSS sowie JavaScript aus externen Quellen zu importieren und zu verarbeiten. Man muss ja nicht immer das Rad neu erfinden, wenn kluge Leute bereits eine Lösung gefunden haben und vielleicht sogar kostenlos im Internet zur Verfügung stellen. Interessant ist auch die Möglichkeit, Animationen als Videodatei zu exportieren. Das ist beispielsweise sinnvoll, um eine Vorschau auf eigene Projekte zu bieten.

Ein erstes Projekt mit dem WebAnimator 4

Beim ersten Umgang mit dem WebAnimator 4 ist es sehr hilfreich, zunächst die Ressourcen im Startfenster aufzurufen, bevor ein erstes Projekt gestartet wird. Dort sind viele hilfreiche Bereiche zugänglich und man kann die Online-Demos in Aktion sehen sowie sich inspirieren lassen. Diese Demos stehen unter Beispiele ebenfalls zur Verfügung und können von dort als Projekt in WebAnimator 4 geladen werden. Die Demos sind sehr nützlich, um die Animations-Software kennenzulernen und direkt im Animationsprogramm zu sehen, wie diverse Möglichkeiten umgesetzt werden können. Außerdem ist es gar keine schlechte Idee, diese Demos nach eigenen Wünschen zu modifizieren, um noch schneller zum Ziel zu kommen. Zunächst sind aber die Videoanleitungen sicher ein guter Beginn.

Um nun ein neues Projekt zu starten, kann im linken Bereich oder oben in der Werkzeugleiste auf »Neu« geklickt oder das Datei-Menü bemüht werden. Ganz schnell geht es mit dem Tastaturkürzel »STRG +N«. Ebenso einfach lassen sich vorhandene Projekte öffnen, von denen 10 für ganz schnelles Öffnen in der linken Spalte sowie über das Menü aufgelistet sind. Bei neuen Projekten öffnet sich ein Fenster, in dem das neue Projekt definiert wird. Angegeben wird ein Name, ein Speicherort, der über eine Checkbox auch als Standard-Speicherort verwendet werden kann, in dem dann alle weiteren Projekte gespeichert werden, die Breite und Höhe für den Container des Projekts, wofür es auch diverse übliche Vorgaben über ein Aufklappmenü gibt und die Anzahl der leeren Szenen. Für den Anfang kann man mit einer einzigen Szene starten. Weitere Szenen lassen sich jederzeit auch nachträglich hinzufügen und auch die Größe des Containers lässt sich im Nachhinein ändern. Im Prinzip kann man alles hinterher noch wunschgemäß anpassen.

Die Größe betrifft den HTML5-Container der Animation und kommt auf Geräten wie eingestellt zum Tragen, wenn kein responsives Projekt erstellt wird, welches dann Ergebnisse bringt, die in jedem Browser und auf jedem Gerät optimal dargestellt werden. Ein nicht-responsives Projekt kann man beispielsweise für Präsentationen, feste Bannergrößen oder Animationen mit exakt gleichen Abläufen, Positionen und Proportionen usw. nutzen. Wird ein responsives Projekt erstellt, sind die Haltepunkte von großer Bedeutung, die das Verhalten der Animation beim Übergang zu einer anderen Größe genauso beeinflussen, wie man das von den Breakpoints einer modernen Website kennt. Die Schaltfläche »Haltepunkte« wird aktiv, wenn »Reaktionsschnelles Layout« für ein neues Projekt aktiviert wird, was auch nachträglich noch im Projekt gemacht werden kann, wie weiter unten genau gezeigt wird. Für ein modernes Design erstellt man Haltepunkte normalerweise mit einer Auflösung für Mobilgeräte wie Smartphones und definiert dann Tabletgrößen bis hin zu verschiedenen Desktopgrößen.

Nicht-responsives Layout im WebAnimator 4

Zunächst soll es hier für einen ersten Versuch ein nicht-responsives Projekt ohne Haltepunkte sein, welches nach den gewünschten Definitionen mit einem Klick auf OK geöffnet wird. Verwendet werden beispielhaft die Abmessungen 1024 x 768 Pixel.

Die Werte für die Szene sind nun in der rechten Spalte sowie oben in der Kontextleiste bei Containergröße ersichtlich, wo sie natürlich auch abgeändert werden können. Für feste Abmessungen kann Pixel gewählt werden. Wird eine Prozenteinheit genutzt, hat man für das betreffende Element praktisch auch eine responsive Darstellung, was sich beispielsweise bei 100 Prozent für Hintergrundverläufe- und Farben empfehlen kann. Die rechte Spalte bietet ganz oben, je nach aktiven Elementen, weitere anklickbare Eigenschaften mit entsprechenden Einstellungsmöglichkeiten. Oberhalb der Szenen-Einstellungen bei den Eigenschaften, kann mit Klick auf das Spraydosen-Symbol von Szene nach Stile gewechselt werden, wo Füllungen einfarbig, als Verlauf oder als Bild für den Container bestimmt werden können. Standardmäßig ist hier die Farbe Weiß eingestellt. Je nach verwendeten Elementen gibt es weitere Eigenschaften, die bei einem leeren Projekt natürlich noch nicht vorhanden sind. Dazu weiter unten noch mehr.

Mit Klick auf das Bild-Symbol oben in den Eigenschaften, geht es natürlich wieder zu den Szene-Einstellungen. Sollte die Animation aufgrund der verwendeten Werte für ein Gerät bzw. einen Browser zu breit oder zu hoch sein, kann das Verhalten des Geräts bzw. Browsers für den dann entstehenden Überlauf auf Sichtbar, Versteckt, Scrollen oder Auto eingestellt werden. Der Button »Ereignis-Handler« erlaubt das Hinzufügen von Aktionen wie z. B. das Abspielen der Zeitleiste bei Mausklick, Größenänderung des Fensters nach einer Aktion und vieles mehr. Der WebAnimator 4 enthält eine ganze Menge fertiger Aktionen, die sofort genutzt werden können und wofür keine einzige Zeile Code selbst geschrieben werden muss. Für komplexere oder ganz besonders individuelle Aktionen kann aber ganz unten in der rechten Spalte im Reiter Funktionen, jederzeit auch selbst programmiert und sich dann grenzenlos ausgetobt werden.

Responsives Layout im WebAnimator 4

Möchte man nun doch responsiv weitermachen, muss nicht unbedingt ein neues Projekt gestartet werden, denn die Option »Reaktionsschnell« kann auch ganz links in der oberen Kontextleiste des WebAnimator 4 mit einem Klick auf das Bildschirme-Symbol aktiviert werden.

Für das geänderte Projekt sollen es nun 1920 Pixel x 1080 Pixel für den Container sein, was in die entsprechenden Felder oben in der Kontextleiste eingetragen wird. Die Werte lassen sich auch mit dem Mausrad pixelweise ändern, wofür nicht einmal in ein Wertefeld geklickt werden muss. Für feine Anpassungen ist das super. Für die Abmessungen des Containers gibt es über diesen Weg allerdings keine Vorgaben, wie das beim Erstellen eines neuen Projekts der Fall ist. Um den Container in seinen vollen Abmessungen zu nutzen, muss nun auch darauf geachtet werden, die Breite in den Szene-Einstellungen in der rechten Spalte auf beispielsweise 1920 Pixel oder 100 Prozent sowie die Höhe auf z. B. 1080 Pixel oder 100% zu stellen.

In den Einstellungen können die Werte mit einem simplen Klick auf das Prozentzeichen auch auf Pixel umgestellt werden. Für ein dynamisches Layout, bei dem beispielsweise der Hintergrund oder Div-Container mit einem Rechteck usw. automatisch in der vollen Breite mitwachsen sollen, ist eine 100%-Angabe für das Basis-Layout die richtige Wahl, was dann Haltepunkte zumindest für den Hintergrund überflüssig macht. Sollen auch für den Hintergrund Haltepunkte verwendet werden, können für diese Breakpoints Pixelangaben gemacht werden. Würde man auf Prozent wechseln, müsste man immer den vollen Wert von 100 verwenden, um den Container des Haltepunkts nicht ungewollt zu verkleinern, was dann aber ein dynamisches Anwachsen bei jeder Breite zur Folge hätte und damit den horizontalen Haltepunkt ebenfalls überflüssig macht. Für Haltepunkte sind Pixelwerte also generell die richtige Wahl. Auch wenn sich Abmessungen von Objekten der Szene bei jedem Haltepunkt proportional ändern sollen, ohne dass sich diese verzerren, sind Pixel die passende Einheit.

In der linken Spalte kann über die unteren Reiter des obersten Panels von der Szene auf Dokument umgestellt werden. Hier ist es nun möglich, die Ansichtsfensterbreite und Ansichtsfensterhöhe einzustellen, die sich auf den Viewport, also auf den Ansichtsbereich für Geräte bezieht. Für ein responsives Layout empfiehlt sich auf jeden Fall die Option »Gerätebreite«. Die Höhe wird man in vielen Fällen nicht unbedingt definieren wollen und auf »Nicht eingestellt« belassen, was aber auch auf die Animation ankommt.

In den Dokumentoptionen können noch Titel, eine Beschreibung, Schlüsselwörter für das HTML-Dokument und der Autor usw. angegeben werden und HTML sowie CSS lassen sich bearbeiten. Schön, dass man Zugriff auf HTML und CSS hat, man kommt aber auch ohne zum Ziel. Auch der Ordnername für die Ressourcen der HTML5-Ausgabe, also die Inhalte wie Bilder, Grafiken, Schriften usw. sowie eine eindeutige und vom WebAnimator 4 bereits automatisch vorgegebene Container-ID, die dann vom Programm und für die Programmierung genutzt werden kann, lässt sich frei eingetragen bzw. ändern. Bei aktivierter Auto-Anpassung wird das Dokument automatisch für die Einpassung in den Behälter bzw. Container auf der Leinwand skaliert, ohne die Proportionen zu ändern. Für die Erstellung einer responsiven Animation könnte es möglicherweise sinnvoll sein, dies zunächst nicht zu aktivieren. Ebenso ist es möglich, Systemschriften, die auf dem eigenen Rechner liegen, für den späteren Export einzubetten. Das macht für eine Weitergabe an andere Anwender des WebAnimator 4 Sinn, denn nicht jeder hat die gleichen Schriften auf dem Computer installiert.

Der Behälter bzw. Container, kann auch manuell mit der Maus angepasst werden, wenn das Symbol rechts neben den Angaben für die Containergröße in der oberen Kontextleiste aktiviert ist, wie weiter unten in der nächsten Abbildung noch zu sehen ist. In die Ansicht der Leinwand in der Mitte, lässt sich mit dem Mausrad bei gedrückter STRG-Taste ein- und auszoomen. Ebenso kann »STRG + 0« oder das Symbol in der oberen Kontextleiste ganz rechts, zum Einpassen in die Bildschirmgröße genutzt werden.

Direkt rechts neben der ganz links in der oberen Kontextleiste befindlichen Option »Reaktionsschnell« über das Plus-Symbol, können die oben schon kurz angemerkten Haltepunkte hinzugefügt werden, die dann in der rechten Spalte ganz unten aufgeführt sind. Eine Abbildung folgt etwas weiter unten. Oft wird man übliche, horizontale Standardwerte verwenden, die dann bequem als Vorlage angeklickt werden können. Um die gewünschten Werte zu nutzen, wird in diesem Beispiel nach dem Klick auf das Plus-Symbol, zunächst »Horizontal« gewählt und im dann erscheinenden Eingabefeld beispielsweise manuell der Wert 600 eingetragen.

Rechts unten im Reiter »Haltepunkte« wird dann 0 -> 600 angezeigt. Nun geht es wieder über das Plus-Symbol in der oberen Kontextleiste weiter mit der horizontalen Voreinstellung z. B. 1024 und nochmal mit 1280. Zuletzt wird dann 1280 -> ... angezeigt. Für alle Geräte, die eine breitere Anzeige als 1280 Pixel bieten, kommt logischerweise immer der letzte Haltepunkt zum Tragen bzw. wird kein weiterer Haltepunkt mehr verwendet. Das Layout ändert sich ab dieser Breite also nicht mehr, weil es keinen folgenden Haltepunkt mehr gibt, für den die Szene angepasst werden könnte. Die vertikalen Haltepunkten funktionieren genauso, wie die horizontalen, nur eben für die Höhe. Bei den meisten Projekten wird man wohl eine feste Höhe ohne Haltepunkte nutzen wollen.

Das Prinzip ist also ganz einfach und unterscheidet sich praktisch nicht von dem bei Webseiten. Werden nun die Haltepunkte rechts unten angeklickt, ändern sich sofort die Abmessungen des Containers auf der Leinwand. In diesem Beispiel ändert sich jedoch nur die Breite, weil in der linken Spalte im Reiter Dokument, für die Ansichtsfensterbreite, die Gerätebreite als Vorgabe eingestellt ist. Die Höhe bleibt in diesem Beispiel immer auf 1080 Pixel, weil die Ansichtsfensterhöhe nicht dynamisch definiert ist.

Wird im unteren rechten Fenster im Reiter »Haltepunkte« ein Haltepunkt angeklickt, wird nicht exakt dessen Startwert der Breite, sondern etwas mehr dargestellt, was allerdings nicht genau dem Mittelwert entspricht. Zum Beispiel wird bei 375 -> 667 der Wert 567 angezeigt. Der genaue Mittelwert wäre 521.

Sofern das Symbol zum Einpassen in die Bildschirmgröße oben in der Kontextleiste ganz rechts aktiv ist, sieht man beim Klicken der Haltepunkte immer den kompletten Container in unterschiedlicher Größe auf der Leinwand. Alternativ kann auch das Symbol rechts der Angaben für die Containergröße in der oberen Kontextleiste angeklickt und dann die Größe mit der Maus verändert werden, wie etwas weiter oben bereits erwähnt wurde. Auch beim manuellen Skalieren des Behälters, wird auf Haltepunkte reagiert.

Die Haltepunkte lassen sich auch in einem Browser überprüfen, wofür links in der oberen Werkzeugleiste, also noch oberhalb der Kontextleiste, das vierte Icon von links angeklickt werden kann. Dieses Symbol bietet über einen kleinen Pfeil die Wahl, die Szene oder das aktuelle Projekt im Browser anzusehen. Natürlich sollte das Projekt dann bereits irgendeinen Inhalt wie beispielsweise ein Hintergrundbild oder einen Verlauf aufweisen, um Auswirkungen zu sehen.

Die Haltepunkte werden in ihren Abmessungen im oberen und linken Lineal farblich hervorgehoben, sofern das Symbol »Reaktionsschnell« oben links in der Kontextleiste aktiv ist oder unten in der rechten Spalte im Reiter »Haltepunkte« zwischen den Breakpoints gewechselt wird. Angeklickte Haltepunkte zeigen den Container in den entsprechenden Abmessungen. Auch von den Haltepunkten abweichende Größen sind durch Klicken in die Lineale möglich. Haltepunkte lassen sich zudem auch via Rechtsklick auf ein Lineal hinzufügen oder entfernen. Die definierten Breakpoints werden nicht umdefiniert, wenn nur die Darstellung geändert wird. Wechselt man unten rechts im Reiter »Haltepunkte« erneut zwischen den Breakpoints oder klickt auf die Schaltfläche »Basis-Layout«, erhält man nach einer abweichenden Darstellung wieder die definierten Abmessungen für die Containergröße. Die Haltepunkte können auch oben in der Kontextleiste, rechts neben dem Plus-Symbol aufgeklappt, angewählt und bei Bedarf einzeln entfernt werden. Leider lassen sich nicht alle Breakpoints auf einmal entfernen.

Über die im Programm verfügbare Vorschau lässt sich sofort prüfen, wie sich eine Animation bei bestimmten Größen verhält und ob vielleicht Anpassungen nötig sind, damit das Projekt überall vernünftig dargestellt wird. Damit wäre nun ein responsives Layout mit leerer Szene erstellt, welches nur noch mit Inhalten und Aktionen gefüllt werden muss. Das Projekt kann nun über die Werkzeugleiste oder das Datei-Menü gespeichert werden, was über das Menü auch als komprimiertes Paket möglich ist, um Speicherplatz zu sparen und das Projekt bequem beispielsweise an Kollegen weitergeben zu können. Die Sicherung ist auch als anderes Projekt möglich, wenn man z. B. eine Sicherungskopie haben möchte.

Ein paar Grundlagen muss man sich also schon drauf schaffen, um mit dem WebAnimator 4 richtig loslegen zu können, was sich jedoch in Grenzen hält und sicher schnell verinnerlicht ist. Mit diesem Grundwissen kann es nun mit der Erstellung einer Animation losgehen.

Gleicher Hintergrundverlauf für alle Haltepunkte im responsiven Layout

Nun geht es darum, einen gleichen Hintergrund für alle Haltepunkte für die Szene zu erstellen. Wer einfach nur einen weißen Hintergrund haben möchte, muss gar nichts machen, denn der ist voreingestellt. Zunächst wird hier das Projekt etwas abgeändert, um die optimale Darstellung auf der gewünschten Website zu garantieren. In diesem Fall wird im Basis-Layout zunächst die Containergröße auf 1047 x 600 px geändert, weil das die maximale Breite des Contentbereichs der Website ist, auf der die Animation dargestellt werden soll und die Animation nicht höher als 600 Pixel sein soll. Das geht oben in der Kontextleiste oder rechts bei den Eigenschaften für die Szene. Auch die Haltepunkte werden nun neu zugewiesen.

Die Animation wird auch bei Geräten mit größerer Darstellung nicht breiter, als das beim letzten Haltepunkt im Container, mit der maximalen Breite definierte Layout, da ja kein weiterer Haltepunkt mit anderen Layout-Definitionen mehr folgt. Die Breite der angegebenen Containergröße erhöht sich beim letzten Haltepunkt im WebAnimator 4 gegenüber den gemachten Einstellungen trotzdem immer um einige Pixel, wenn auf »Basis-Layout« geklickt oder zwischen den Haltepunkten gewechselt und danach wieder das Basis-Layout aktiviert wird. Der WebAnimator gibt also etwas Fleisch dazu, wie weiter oben schon kurz erläutert wurde.

Beim Erreichen eines Haltepunkts greifen natürlich dessen Werte und nicht die Containergröße des Basis-Layouts. In diesem Beispiel werden einfach die vorgegebenen horizontalen Haltepunkte bis 1024 Pixel und ein manuell hinzugefügter Haltepunkt mit 1047 Pixel verwendet. Bei breiteren Bildschirmen soll die Darstellung also nicht mehr angepasst werden. In vielen Fällen und natürlich auch je nach Animation, kommt man sicher auch mit weniger oder gar keinen Haltepunkten aus.

Achtung, die nachfolgenden Erläuterungen zu Basis-Layout und Haltepunkten sollten unbedingt verinnerlicht werden. Die Unterschiede und der Umgang damit, sind sehr wichtig für jede Animation.

Im nächsten Schritt wird unten in der rechten Spalte im Haltepunkte-Fenster auf Basis-Layout geschalten und der Container soll eine Hintergrundfarbe bekommen. Leider passiert es schnell, dass man den Überblick darüber verliert, ob nun das Basis-Layout oder ein Haltepunkt aktiv ist. Das liegt daran, weil die Schaltfläche mal farblich hervorgehoben ist, wenn ein Haltepunkt gewählt ist und mal nicht. Das ist zumindest für Einsteiger sehr verwirrend und ein echter Kritikpunkt an die Entwickler des ansonsten sehr guten WebAnimator 4.

Ein Haltepunkt ist also immer dann aktiv, wenn er mit einem grauen Balken versehen ist. Dabei kann die Schaltfläche für das Basis-Layout auch nicht farblich hervorgehoben sein. Die Schaltfläche für das Basis-Layout ist nur dann farblich hervorgehoben, wenn bei bereits aktivem Basis-Layout nochmals auf die Schaltfläche geklickt wird, wodurch der zuletzt aktive Haltepunkt angewählt wird. Wird dann zu einem anderen Haltepunkt gewechselt, ist die Hervorhebung der Schaltfläche wieder verschwunden und bleibt auch verschwunden, wenn dann die Schaltfläche für das Basis-Layout erneut angeklickt wird. Dies zu wissen und zu verinnerlichen, ist enorm wichtig, wie gleich erkennbar wird.

Es geht nun also oben rechts bei den Eigenschaften über das Spraydosen-Symbol zum Füllen. Um genau den gleichen Hintergrund für alle Haltepunkte zu bekommen, muss nun zwingend das Basis-Layout aktiv sein. Kein Haltepunkt darf also mit einem grauen Balken versehen sein, wie es fälschlicherweise in obiger Abbildung der Fall ist. Wäre ein Haltepunkt aktiv, würde nur dieser verändert werden. Wird eine Farbe oder ein Verlauf nur für einen Haltepunkt verändert, wird das entsprechende Symbol zum Füllen, mit einem orangenen Balken unterlegt. Auch wenn nun die Farbe oder der Verlauf für das Basis-Layout geändert wird, behält der Haltepunkt die vorher zugewiesene Farbe bei, weil er die Einstellungen des Basis-Layouts überschreibt. Haltepunkte haben demnach eine höhere Priorität.

Der orange Balken symbolisiert also, dass das Basis-Layout für diesen Haltepunkt überschrieben wird. Dies ändert sich jedoch, wenn der orange Balken angeklickt wird. Es erscheint dann eine Schaltfläche mit der Bezeichnung »Entfernen Sie die Eigenschaft überschreiben«. Diese Bezeichnung ist etwas unglücklich, wenngleich schon das Richtige gemeint ist. »Wiederherstellen der Basis-Eigenschaften« wäre vielleicht verständlicher gewesen. Mit einem Klick auf die Schaltfläche, wird einfach die Farbe oder der Verlauf des Basis-Layouts übernommen und der Haltepunkt hat keinen separaten Hintergrund mehr. Ähnlich verhält sich das mit anderen Parametern im WebAnimator 4. Oft sind es dann Zahlen oder Texte, die orange dargestellt werden, anklickbar sind und damit eine Überschreibung der Basis-Werte aufgehoben werden kann. Alles was orange ist, sollte also unbedingt beachtet werden, weil ein Override bzw. eine Überschreibung eben auch mal versehentlich passieren kann.

Hier wird nun ein linearer Verlauf gewählt. Ein strahlenförmiger bzw. radialer Verlauf wäre auch möglich. Wird eine einfarbige Füllung verwendet, ist diese sogar animierbar und es ist ebenso möglich, mit »Keine Füllung« einen transparenten Hintergrund zu wählen. Das macht z. B. Sinn, wenn mehrere Szenen in einem Projekt verwendet werden. Mit Klick auf das kleine Farbfeld lassen sich Farben definieren und ebenso eine Pipette wählen, mit der Farben auch außerhalb des WebAnimator 4 aufgenommen werden können. Ebenso ist es möglich, Hex-Werte wie #000000 für Schwarz usw. einzutragen, die normalerweise in CSS-Angaben oder direkt in HTML vorkommen.

Hier im Beispiel hat der Verlauf einen Winkel von 90 Grad, um sich von links nach rechts zu erstrecken. Für feinere Farbübergänge von dunkel nach hell werden fünf Farbfelder im Abstand von 25 Prozent verwendet, die mit dem Pluszeichen oder durch Klick mit der Maus unter dem Farbbalken eingefügt werden können. Bitte nicht von der nachfolgenden Abbildung verwirren lassen, auch da ist ein Haltepunkt aktiv, was für einen gleichen Hintergrund aller Haltepunkte falsch wäre, wie weiter oben bereits angemerkt ist.

Natürlich könnte man für jeden Haltepunkt auch jeweils einen anderen Hintergrund einstellen wollen, was wie schon erläutert, mit Overrides bzw. Überschreibungen, kein Problem ist. Für alles, was in jedem Haltepunkt gleich vorkommen soll, ist es wichtig, unbedingt vorher zu prüfen, dass kein Haltepunkt, sondern das Basis-Layout aktiv ist.

Hintergrund für Text einbauen

Nun soll noch ein Hintergrund für Text unten in die Szene eingefügt werden. Dazu wird über die obere Werkzeugleiste ein Div-Rechteck genutzt, welches aus reinem HTML-Code besteht und die Speichergröße des Projekts so gut wie gar nicht anwachsen lässt. Dieses Div-Rechteck gesellt sich in der oberen Werkzeugleiste zum abgerundeten Div-Rechteck und der Div-Ellipse, die sich links neben dem T-Symbol für Text befinden. Bei den in der oberen Abbildung aufgeklappten Grundformen dagegen, handelt es sich nicht um Div-Elemente, sondern um Vektorgrafiken, die über mathematische Berechnungen zustande kommen, die deshalb ebenfalls kaum Ressourcen verbrauchen und die natürlich ebenso für einen weiteren Hintergrund und viele andere Vorhaben verwendet werden können. Auf diese Formen wird man sicher öfter zurückgreifen, denn die meisten davon sind nicht als Div-Form verfügbar, weil HTML5 und die Fähigkeiten von Browsern natürlich Beschränkungen haben.

Man könnte jederzeit auch eine komplexere Grafik für den Texthintergrund importieren, die dann natürlich etwas mehr Speicherplatz verbraucht. Nachdem sichergestellt ist, dass das Basis-Layout aktiv ist, wird das gewählte Rechteck mit der Maus in der gewünschten Größe aufgezogen und positioniert. Hier soll es sich ganz unten über die komplette Breite der Szene erstrecken und 100 Pixel hoch sein. Sehr hilfreich ist hierbei das magnetische Raster, welches sich oberhalb der Zeitleiste befindet und mehrere aktivierbare Optionen bietet.

Rechts daneben kann auch ein Raster mit Sekunden-Abständen eingeblendet werden. So können alle verwendeten Elemente sinnvoll andocken und schnell sowie genau positioniert werden. Mit dem Schieberegler rechts vom Raster kann die Zeitleiste gezoomt, daneben der Zoom eingepasst und schließlich die Zeitleiste als schwebendes Fenster abgedockt werden. Um sie wieder anzudocken, wird ein Doppelklick auf die Fensterleiste ausgeführt.

Das Rechteck ist nun auch in der Zeitleiste unten links aufgeführt und kann mit einem Doppelklick nach Wunsch benannt werden, sofern nicht rechts oben die Eigenschaften unter »Allgemein« für die Namensvergabe genutzt werden. Die Eigenschaften können natürlich nur definiert werden, wenn ein Objekt aktiv ist, was durch einfaches Anklicken nicht nur in der Zeitleiste, sondern ebenso direkt auf der Bühne erledigt ist.

Jeder Haltepunkt ist für die Szene bisher in Pixelwerten angegeben. Für das Div-Rechteck werden ebenfalls Pixelwerte in den Eigenschaften, über das zweite Symbol oben rechts, bei der Breite und Höhe angegeben. Für Geräte mit unterschiedlichen Abmessungen muss jetzt natürlich vom Basis-Layout zu den Haltepunkten gewechselt werden, was ja weiter oben schon ausführlich beschrieben ist. Am einfachsten ist es, einen Haltepunkt zu aktivieren und die Breite der Form dann mit der Maus anzupassen und die Höhe in den Eigenschaften einzutragen, falls sich diese nicht so genau mit der Maus ziehen lässt.

Man hätte das Rechteck statt mit der Maus, auch in den Eigenschaften im Bereich »Transformieren« ebenfalls über Werte für X und Y positionieren und den Ursprungspunkt des Objekts über die Parameter »Links« und »Unten« bestimmen können, worauf sich dann die Werte der Achsen beziehen. Auch drehen, skalieren und eine Schräglage wären über exakte Werte möglich. Für 3-dimensionale Objekte kann zudem die Z-Achse definiert werden.

Nach dem Wechsel in das Basis-Layout bekommt also auch das Rechteck einen Farbverlauf, diesmal jedoch mit nur 3 Farben und im Winkel von 180 Grad. Die Farben verlaufen im Gegensatz zum Szenenhintergrund somit vertikal, was bei jeder Breite gleich aussieht. Aus diesem Grund muss der Verlauf nicht auch noch für jeden Haltepunkt angelegt werden. Es sollte also für den Verlauf weder im Basis-Layout noch für die Haltepunkte, eine durch einen orangen Balken signalisierte Überschreibung geben, wie sie im nachfolgenden Screenshot zu sehen ist. Sollte das doch der Fall sein, ist die Überschreibung mit Klick auf den orangen Balken schnell aufgehoben, wie ja bereits weiter oben beschrieben wurde. Objekte können also immer global oder für jeden Haltepunkt definiert werden, was ansich ein gutes Konzept ist, das man allerdings auch erst einmal verinnerlicht haben muss.

Text über den Formhintergrund legen und für Haltepunkte anpassen

Text lässt sich ganz einfach einbauen, indem auf das T-Symbol in der oberen Werkzeugleiste geklickt wird. Sofort erscheint dann ein Textrahmen auf der Bühne. In der Zeitleiste wird das Textobjekt damit innerhalb der Szene ganz oben eingefügt. Wie Ebenen in einem Bildbearbeitungsprogramm wie Adobe Photoshop oder Affinity Photo usw. können die Elemente in der Zeitleiste jederzeit nach oben und unten verschoben werden. Würde sich der Textrahmen unterhalb der Form für den Texthintergrund befinden, wäre er nicht zu sehen, weil er dann verdeckt ist. Der Textrahmen ist natürlich im Basis-Layout und auch für alle Haltepunkte sichtbar.

Es empfiehlt sich immer, mit dem Basis-Layout zu beginnen und erst danach die Haltepunkte anzupassen. Der Textrahmen wird nun auf die Textform gezogen und die Breite sowie Höhe wunschgemäß angepasst. Hier über die gesamte Breite und Höhe des Textrahmens. Eine vertikal mittige Positionierung erübrigt sich somit. Wie vom WebAnimator 4 schon hingewiesen, wird mit einem Doppelklick der Text bearbeitet. Es erscheint dann eine beliebig bewegliche Textformatsymbolleiste direkt über dem Textobjekt auf der Bühne. Diese kann über das rechte untere Symbol der Leiste auch ausgeblendet werden, was aus Platzgründen sinnvoll sein könnte. Alle Einstellungen können auch immer über die Eigenschaften im Bereich »Text« vorgenommen werden. Um die Textformatsymbolleiste wieder einzublenden, kann das Kontextmenü der rechten Maustaste bemüht werden, solange man sich im Bearbeitungsmodus für den Text befindet.

Die Möglichkeiten der Formatleiste dürften von vielen anderen Anwendungen geläufig sein, weshalb hierzu sicher keine Erläuterungen nötig sind. Nun geht es also an die Texteingabe und Textformatierung über die Formatleiste oder in den Eigenschaften. Zur Anwendung kommt der einfache Text »Ahadesign.eu testet den WebAnimator 4« mit der Schriftart Roboto bei 48 Pixel Schriftgröße und Fettschrift. Für die Farbe des Textes wird das A-Symbol in der Formatleiste genutzt, welches wie die Farbfelder beim Verlauf auch eine Pipette bietet. So kann die Farbe beispielsweise direkt von einer Webseite aufgenommen werden. Schließlich wird das Textobjekt in der Zeitleiste noch sinnvoll umbenannt. Hier einfach zu Starttext, weil noch ein weiterer Text kommen soll, der nicht gleich zu Beginn sichtbar ist.

Nun geht es wieder an die Haltepunkte. Je nach Breakpoint wird der Textrahmen sowie die Größe des Textes angepasst. Für den kleinsten Haltepunkt sind es hier 28 Pixel. Weiter geht es mit 36, 42 und für die restlichen Haltepunkte mit den ursprünglichen 48 Pixel.

Animierten Text für Basis-Layout und Haltepunkte vorbereiten

Nun ist es fast soweit, endlich Bewegung in die Sache zu bringen, wobei es noch ein paar wenigen Vorbereitungen bedarf. Der Starttext soll langsam ausblenden, während ein weiterer und sehr viel längerer Text von rechts hereinschwebt und schließlich links wieder verschwindet, wobei der Starttext dann wieder eingeblendet werden soll. Dies kann sich auf Wunsch auch ständig wiederholen. Da beide Texte bei der Animation aufeinander abgestimmt sein sollen, wird nun der zweite Text mit der Bezeichnung »Textlauf« erstellt. Der zweite Text soll ebenso im Textrahmen sein, wie der erste Text.

Es handelt sich hier um folgenden Text: »Die Top-Software von Incomedia bei Ahadesign.eu ganzjährig immer zum günstigsten Preis. | Ausführliche Tutorials und Anleitungen zur Webdesign-Software für den Desktop WebSite X5 sowie zur Animationssoftware für interaktive Webinhalte, WebAnimator 4 | Stets aktuelle News zu allen Incomedia-Produkten«.

Dafür empfiehlt es sich, den Starttext zunächst auszublenden, was in der Zeitleiste mit Klick auf das Augensymbol geschieht. Im Anschluss wird der zweite Text ganz links in der Textform angedockt und für Basis-Layout sowie Haltepunkte formatiert, wie schon beim ersten Text. Diesmal wird allerdings nur die Höhe des Textrahmens an die Textform bzw. das Div-Rechteck angepasst. Der Textrahmen wird nach der Textformatierung in Roboto Normalschrift mit einer Größe von 64 Pixel solange in die Breite gezogen, bis er einzeilig ist. Hier ist es sehr hilfreich, mit STRG + Mausrad auszuzoomen, um den gesamten Text im Blick zu haben.

Für den ersten Haltepunkt muss der Text mit 34 Pixel allerdings deutlich kleiner werden, um auch ohne Bewegung noch ganze Wörter angezeigt zu bekommen, ansonsten wäre der Lesefluss arg gestört. Dabei muss auch der Textrahmen entsprechend zusammengeschoben werden, weil sonst zuviel Leerraum links und rechts entstehen würde. Die Texteinblendung- und Ausblendung zur genau richtigen Zeit wäre dann schwieriger. Besser ist es immer, wenn ein Textrahmen nur so breit ist, wie wirklich benötigt. Für die anderen Haltepunkte wird der zweite Text gar nicht verändert.

Damit der Text nicht gleich zu Beginn der Animation sichtbar ist, wird er rechts an der Textform außerhalb der Szene angedockt. Natürlich könnte man den Textrahmen auch noch weiter nach rechts verschieben, wenn er nicht sofort zum Zeitpunkt erscheinen soll, wo das Schlüsselbild gesetzt wurde, wozu es gleich weiter unten weitere Erläuterungen gibt. So wird nun auch für jeden Haltepunkt vorgegangen. Zum Schluss wird der Starttext ebenfalls wieder eingeblendet.

Damit ist die Vorbereitung für die animierten Texte abgeschlossen und es kann Bewegung ins Spiel gebracht werden.

Starttext und Textlauf animieren

Für eine Animation braucht es für den Beginn und das Ende zusammen immer mindestens zwei Schlüsselbilder, was eigentlich logisch ist. Diese können manuell und genialerweise auch automatisch eingefügt werden. Mehrere Wege führen zum Ziel. Hier soll im Basis-Layout zunächst die Deckkraft des Starttextes von 0 bis 5 Sekunden gleichmäßig verringert werden, bis der Text nicht mehr sichtbar ist. Dafür muss für dieses Beispiel unbedingt sichergestellt sein, dass sich der Zeitleisten-Marker ganz links am Anfang befindet. Ein schneller Weg ist nun ein Rechtsklick auf den Starttext in der Zeitleiste. Im Kontextmenü kann nun »Schlüsselbild hinzufügen -> Allgemein -> Deckkraft« gewählt werden. Damit wird bereits das Schlüsselbild für den Beginn der Animation in die Timeline eingefügt. Unter dem Starttext befindet sich jetzt die Option Deckkraft.

Nun kann der Zeitleisten-Marker auf 5 Sekunden positioniert werden. Angezeigt wird 00:05 im Zeitleisten-Lineal unterhalb der Animationssteuerung. Um die 5 Sekunden genau zu treffen, sollte mit dem rechts oben in der Zeitleiste befindlichen Schieberegler oder dem Plus-Symbol entsprechend eingezoomt werden. Oberhalb des Zeitleisten-Lineals, also in der Leiste für die Animationssteuerung, lässt sich die Zeit auch direkt eingeben, was oft einfacher ist, wenn ganz exakte Werte benötigt werden. Anschließend wird bei den in der rechten Spalte des WebAnimator 4 befindlichen Eigenschaften unter »Allgemein« die Deckkraft auf 0 gesetzt und die links vom Schieberegler befindliche Raute angeklickt. Der Deckkraftregler und die Raute sind in der oberen Abbildung ersichtlich. Damit ist der Endpunkt für die Animation gesetzt. Alternativ zum Kontextmenü der rechten Maustaste, hätte man in den Eigenschaften bei Position 0 auch manuell schon ein Schlüsselbild für die Deckkraft setzen können.

Im Resultat wird nun der Text langsam und gleichmäßig ausgeblendet und ist nach 5 Sekunden dann gar nicht mehr zu sehen. Im Aktionen-Panel links in der Zeitleiste wird bei der Deckkraft immer der Wert der Opazität bzw. Transparenz zu der Zeit angezeigt, wo sich der Marker befindet. Das ist aber nur der Fall, wenn der Marker von Hand an eine bestimmte Zeitposition gesetzt oder die Animation gestoppt wird, nicht bei laufender Animation. Animationen lassen sich mit den Pfeil-Symbolen in der Animationssteuerung bequem abspielen, stoppen sowie an den Anfang oder das Ende springen. Direkt rechts daneben befindet sich das Symbol für die Loop-Wiedergabe bzw. für endloses Wiederholen, falls man das möchte. Bei einem späteren Export als Video wäre das nicht sinnvoll. Die weiteren Symbole daneben, beziehen sich auf Beschleunigung, Schlüsselbilder und Effekte.

Auch das Deckkraft-Verhalten ließe sich für jeden Haltepunkt individuell einstellen, was in diesem Beispiel jedoch nicht gemacht wird. Im nächsten Schritt geht es nun darum, den Textlauf von rechts nach links hereinfahren zu lassen. Diesmal jedoch mit dem automatischen Schlüsselbild-Modus, der in der Werkzeugleiste der Zeitleiste aktiviert werden kann. Der Textlauf wird also in der Zeitleiste oder der Bühne markiert. Dann wird auf das Kreissymbol mit Punkt für den automatischen Schlüsselbildmodus geklickt. Der Punkt im Symbol wird nun Rot. Der Zeitleisten-Marker wird auf 3 Sekunden gesetzt.

Nun wird der Textlauf nach links gezogen, bis er wieder außerhalb der Bühne an die Textform angedockt ist. Der Schlüsselpunkt wurde auf diese Weise automatisch an den Beginn, also bei Null Sekunden und für das Ende bei 3 Sekunden gesetzt. Die gesamte Wegstrecke wird durch eine roten Linie dargestellt. Natürlich könnte man auch anders vorgehen, aber so kann der gesamte Bewegungsbereich mit dem Anfangs-Schlüsselpunkt sehr leicht bei 3 Sekunden eingerastet werden. Dazu wird der Bereich durch Klicken in seine Mitte verschoben, wofür ein Symbol mit ausgestreckter Hand erscheint. Ist das geschehen, wird der untere End-Schlüsselpunkt markiert und bis Sekunde 40 geschoben, damit der Text später auch bei den Haltepunkten nicht zu schnell läuft, die nicht extra angepasst werden sollen.

Der Animationsbalken rastet automatisch bei allen 5 Sekundenmarken ein. Es ist also nicht nötig, unbedingt den Marker zu Hilfe zu nehmen, wenn solche Sprünge erwünscht sind. Zum Verlängern oder Verkürzen des Bereichs wird eine Raute angeklickt und in die gewünschte Richtung gezogen. Der Bereich muss dabei nicht aktiv sein. Interessant ist auch der automatische Schlüsselbildbereich, der rechts neben dem Symbol für den automatischen Schlüsselbildmodus aktiviert werden kann. Ist der automatische Schlüsselbildbereich aktiv, ist der gesamte Bereich von 0 Sekunden bis zur Markerposition markiert.

Um den Schlüsselbildbereich zu demonstrieren, wurde hier ein weiterer Text hinzugefügt und dann der Schlüsselbildbereich aktiviert. Anschließend wurde ebenfalls die Deckkraft auf Null Prozent reduziert. Automatisch hat der WebAnimator 4 dann ein Schlüsselbild an den Anfang und an das Ende gesetzt. So geht es in diesem Fall also noch einfacher, als alleine mit dem Schlüsselbildmodus. Soll ein Element abrupt ausgeblendet werden, kann die Funktion »Anzeige« genutzt werden, die ebenfalls über das Kontextmenü der rechten Maustaste unter »Schlüsselbild hinzufügen -> Allgemein -> Anzeige« und in den allgemeinen Eigenschaften zu finden ist.

In den Eigenschaften lassen sich die Zustände von »An« nach »Aus« umschalten. Und natürlich spricht auch nie etwas dagegen, viele weitere Schlüsselbilder für ein oder mehrere Elemente zu verwenden. Der zu Demonstrationszwecken eingebaute Text wird nun wieder gelöscht. Jederzeit können auch nachträglich Einstellungen gezielt und separiert geändert werden. Es müssen nur die richtigen Schlüsselbilder markiert sein.

Nun soll der Starttext, kurz bevor der Textlauf beendet ist, wieder gleichmäßig eingeblendet werden. Dazu wird über das Kontextmenü der rechten Maustaste einfach das Animationssegment des Starttextes mit der Deckkrafteinstellung kopiert und wo der Textlauf endet, also ganz rechts, nochmal eingefügt. Über einen weiteren Rechtsklick wird schließlich das Animationssegment umgekehrt. Damit der Starttext ebenso wie vorne beim Ausblenden, auch am Ende bereits sanft eingeblendet wird, während noch der Textlauf zu sehen ist, wird der Starttext um 3 Sekunden nach links eingerückt.

Ressourcen für die Animation importieren

Nachdem die Textanimation nun steht, soll natürlich auch im restlichen Bereich der Bühne etwas passieren. Hier für dieses Beispiel bietet es sich an, die Software-Boxen und Logos der Incomedia-Programme einzubauen. Diese werden rechts unten im Bereich »Ressourcen« über das Plussymbol »Aus Datei« importiert.

Es öffnet sich der Dateimanager des Betriebssystems, worüber die Grafiken ausgewählt und importiert werden können. Alternativ können die Grafiken unter Windows auch direkt aus dem Windows-Explorer oder einem anderen Dateimanager wie beispielsweise dem SpeedCommander usw. in den Ressourcen-Bereich des WebAnimator 4 gezogen und fallen gelassen werden. Ähnlich funktioniert es natürlich auch auf dem Mac.

Eine Ressource kann nun entweder direkt in die Bühne gezogen und fallen gelassen werden oder über die rechte Maustaste über »Zur Scene hinzufügen« eingefügt werden. Das jeweilige Element wird natürlich immer an der Stelle in der Zeitleiste eingefügt, an der sich der Zeitleisten-Marker befindet.

Grafiken platzieren und animieren

Da die Haltepunkte für ein responsives Projekt bereits ausführlich behandelt wurden, werden diese in den weiteren Ausführungen nicht mehr behandelt, müssten aber natürlich weiterhin berücksichtigt werden. Hier im Beispiel wird als erstes der Boxshot, also die Software-Packung des WebAnimator 4 an Position Null in der Bühne platziert. Der Boxshot befindet sich jetzt ganz oben in der Zeitleiste. Im rechten Bereich der oberen Werkzeugleiste können nun Symbole für die horizontal und vertikal mittige Ausrichtung verwendet werden. In obiger Abbildung sind diese ausgegraut, weil die Grafik nicht selektiert ist.

Nun wird der Zeitleistenmarker auf 3 Sekunden gesetzt und über die rechte Maustaste auf dem Boxshot in der Scene über Schlüsselbild hinzufügen -> Skala Z ein entsprechendes Schlüsselbild eingesetzt. Bei den Eigenschaften, rechts unter Position & Größe, wird nun bei Skala für X und Y jeweils 20 Prozent gewählt. Damit wandert und verkleinert sich der Boxshot in den ersten 3 Sekunden nach hinten.

Um die Z-Skalierung noch etwas interessanter zu machen, wird nun in der rechten Spalte des WebAnimator 4 bei den Eigenschaften ganz hinten unter Effekte, der Unschärferegler auf 50 px gestellt. Anschließend wird in der Werkzeugleiste der Zeitleiste, der automatische Schlüsselbildmodus aktiviert, der Zeitleistenmarker auf 3 Sekunden verschoben und die Unschärfe auf Null Pixel gestellt. Mit dem Wandern von vorne nach hinten, wird der anfangs unscharfe Boxshot nun kontinuierlich schärfer.

Im nächsten Schritt wird das Logo des WebAnimator 4 auf die Bühne gezogen und an die Breite des Boxshots angepasst sowie horizontal mittig gesetzt. Dann wird das Logo nach oben außerhalb der Bühne gesetzt. Der Zeitleistenmarker befindet sich an Sekunde 3. Nun wird wieder der automatische Schlüsselbildmodus aktiviert, der Zeitleistenmarker auf Sekunde 5 gesetzt und das Logo über den Boxshot gesetzt.

Der Boxshot und das Logo für den WebAnimator werden zusammen markiert und über das Kontextmenü der rechten Maustaste zur besseren Übersicht und Handhabbarkeit zu einer Gruppe zusammengefasst.

Nun wird ein Konstrukt aus Logo ohne Schriftzug und Boxshot für WebSite X5 Evo und anschließend auch für WebSite X5 Pro gebaut. Logo und Boxshot werden kleiner skaliert und zwischen beiden Elementen zwei Linien eingefügt, die zum Beispiel über die rechte Maustaste als Freiform gewählt werden können. Leider gab es mit diesen freien Vektorformen bei der Ausgabe als Video das Problem, dass sie die vorgesehene Bewegung nicht korrekt ausgeführt haben. Ganz unfehlbar ist der WebAnimator 4 also auch nicht. Eine Lösung dafür konnten wir leider nicht finden.

Eigentlich sollte man die Boxshots und Logos vor dem Importieren in den WebAnimator 4 mit einem Bildbearbeitungsprogramm gleich auf die passende Größe bringen, um nicht unnötig Ressourcen zu verbrauchen.

Über die Eigenschaften wird alles angepasst und schließlich gruppiert. Dann kann die ganze Gruppe außerhalb der Bühne zu dem Ort gezogen werden, von wo die Animation starten soll. Die Elemente sollen einfach von schräg oben in die Bühne fliegen.

Natürlich wird dafür wieder der automatische Schlüsselbildmodus genutzt, einfach weil es schnell und simpel ist. Gestartet wird mit der Gruppe für WebSite X5 Evo bei Sekunde 9. Hier wird manuell ein Schlüsselpunkt für »Anzeige An« über die Eigenschaften gesetzt. Dann wird die Automatik eingeschaltet, der Zeitleistenmarker auf Sekunde 25 gesetzt und die Gruppe von links oben schräg nach unten gezogen. Anschließend wird der automatische Schlüsselbildmodus wieder deaktiviert. Ebenso wird es mit der Gruppe für WebSite X5 Pro gemacht, nur dass diese bei Sekunde 20 startet und bei Sekunde 35 endet. Wie bereits erwähnt, kann mit den Schlüsselpunkten auf verschiedene Weise umgegangen werden.

Natürlich hätte man hier noch viele Verbesserungen einbringen können z. B. mit Parametern für die Beschleunigung usw. Und nicht alles in diesem Testprojekt ist plausibel, wie die Schatten der Boxshots beim Fliegen. Sicher könnte man auch kreativer sein und noch zahlreiche weitere Features nutzen. Das Prinzip und zumindest einige der vielen Möglichkeiten, dürften so aber deutlich geworden sein. Man könnte so viel mit dem WebAnimator 4 machen, dass man für dessen Beschreibung auch ein ganzes Buch füllen könnte.

Die fertige Animation speichern und veröffentlichen

Bevor die Animation veröffentlicht wird, sollten natürlich ungenutzte Elemente aus dem Bereich Ressourcen entfernt werden. Hier sind es die Logos mit Schrift für WebSite X5 Evo und Pro. So bleiben in diesem Fall noch sechs Grafiken übrig. Nun lässt sich die Animation im Browser betrachten oder als Video oder als HTML5 exportieren, was über die obere Werkzeugleiste des WebAnimator 4 geht. Am einfachsten ist es, ein Video zu erstellen, denn das kann praktisch überall abgespielt werden. Mögliche Formate für die Videoausgabe sind MP4, WEBM und MKV. Die Berechnung erfolgt bei diesem Beispiel auf einem durchschnittlichen Rechner in ca. 20 Sekunden.

Interessant ist die Möglichkeit, die Animation als HTML5 exportieren und in moderne Webseiten integrieren zu können. Bei manchen Contentmanagement-Systemen wie WordPress oder Joomla usw. ist jedoch zusätzlicher Aufwand nötig. Es müssen eventuell Plugins bzw. Erweiterungen installiert werden, damit die Animation abgespielt werden kann. Ein zusätzliches Thema, das durchaus umfangreich werden kann und nach einer extra Anleitung verlangt, weshalb an dieser Stelle nicht weiter darauf eingegangen wird, sonst wird das hier tatsächlich noch ein Roman. Sehr viel einfacher ist das für Nutzer der Webdesign-Software WebSite X5. Diese Web-Software hat alles an Bord, um mit WebAnimator 4 erstellte Animationen als HTML5 abspielen zu können und die Animationen können auch direkt aus dem WebAnimator 4 für WebSite X5 im Format iwax5 exportiert werden.

Wie weiter oben bereits angemerkt wurde, hat der WebAnimator 4 mit den beiden Linien bzw. den freien Vektorformen für die Gruppe von WebSite X5 Pro einen Fehler gemacht hat, der sich offensichtlich auch nicht korrigieren lässt. Zumindest haben wir keinen Workaround gefunden, der das Problem mit den Linien löst. Die Linien laufen an falschen Positionen mit. Eventuell wäre es doch besser, eine einzelne Grafik vorab zu erstellen und nicht einzelne Linien mitlaufen zu lassen. Nachfolgend ist die Animation als Video zu sehen, die bewusst nicht von dem genannten Fehler durch Verwendung einer einzelnen Grafik befreit wurde. Für die Veröffentlichung als Video ist es natürlich nicht nötig, zusätzlich mit Haltepunkten zu arbeiten.

Das fertige Ergebnis sollte natürlich immer vor einer Veröffentlichung idealerweise in mehreren Browsern getestet werden, wenn als HTML5 exportiert wird. In den meisten Fällen dürfte es keine Probleme geben. Auch ein eigenes Video sollte responsiv in den Webauftritt eingebunden werden. Eine Anleitung dazu ist erschienen unter „Eigene HTML5 Videos responsiv in Website oder CMS“.

Abschließende Bemerkungen zum Incomedia WebAnimator 4

Der WebAnimator 4 von Incomedia ist wirklich unglaublich vielseitig und modern. Es gibt praktisch kein Vorhaben, was sich nicht umsetzen lässt. Die weitgehend visuelle Arbeit macht es auch Einsteigern ohne Kenntnisse bei Webdesign, Animationen oder Programmierung leicht, richtig beeindruckende Inhalte in bewegter Form darzustellen. Die Animationssoftware von Incomedia ist intuitiv zu bedienen, läuft performant und bis auf eine Kleinigkeit, fehlerfrei. Lediglich bei der Ausgabe von Formen konnten wir einen kleinen Fehler feststellen, der sich jedoch leicht umgehen lässt.

Natürlich wird ein komfortabler Export für die Webdesign-Software WebSite X5 angeboten, die aus dem gleichen Hause stammt. Ansonsten können die Animationen auch als HTML5 ausgegeben und auf jeder zeitgemäßen Website genutzt werden. Noch flexibler und überaus einfach, ist die Präsentation von Animationen als Video. Abschließend lässt sich sagen, dass der Incomedia WebAnimator 4 das vielleicht beste Animationsprogramm nicht nur für die Präsentation auf Websites ist, welches zudem ohne Abo zum attraktiven Preis erhältlich ist. Zudem macht die Animationssoftware riesen Spaß. Das gibt eine ganz klare Empfehlung von uns.

Fragen und Antworten zum WebAnimator 4

Frage: Was ist beim Kauf des WebAnimator 4 enthalten?

Antwort: Mit dem Erwerb der Animationssoftware wird der Zahlungseingang via E-Mail bestätigt, die den Link für den Download des WebAnimator 4 sowie den Lizenzschlüssel für die Programmaktivierung enthält.

Frage: Für wieviele Rechner gilt eine Lizenz des WebAnimator 4?

Antwort: Eine Lizenz für den WebAnimator 4 gilt für einen Computer unter macOS oder Windows.

Frage: Kann der WebAnimator 4 vor dem Kauf zunächst ausprobiert werden?

Antwort: Ja, es steht eine kostenlose Testversion zur Verfügung, die 30 Tage lang auf Herz und Nieren überprüft werden kann. Mehr zur gratis Testversion mit Link dazu, ist oben in diesem Bericht zu erfahren.

Frage: Können professionelle Animationen wirklich ohne Programmierkenntnisse erstellt werden?

Antwort: Es reicht, sich ein paar Grundkenntnisse des WebAnimator 4 anzueignen, um professionelle und kreative Animationen zu verwirklichen. Programmierkenntnisse werden nicht benötigt. Dennoch ist es möglich, auch Code, beispielsweise für sehr komplexe Bewegungsabläufe, zu schreiben und einzufügen.

Frage: Gibt es einen Treue-Rabatt für Besitzer der Vorversion des WebAnimator?

Antwort: Wer bereits eine ältere Version des WebAnimator besitzt, erhält die aktuelle Software-Lizenz im Sonderangebot zum günstigeren Preis, wofür einfach eine kurze Nachricht an den Incomedia-Kontakt gesendet wird.

Frage: Erhält man bei Nichtgefallen sein Geld zurück?

Antwort: Die Bestellung lässt sich innerhalb von 30 Tagen ohne Angabe von Gründen jederzeit rückgängig machen. Der volle Kaufpreis wird dann zurückerstattet.

Frage: In welchen Sprachen gibt es den WebAnimator 4?

Antwort: Unterstützte Sprachen für die Animationssoftware sind Deutsch, Englisch, Spanisch, Französisch, Italienisch und Polnisch.

Frage: Welche Systemvoraussetzungen hat der WebAnimator 4?

Antwort: Es sollte mindestens ein Prozessor mit 2 GHz mit Unterstützung für 64-Bit verwendet werden. 4 GB RAM werden vorausgesetzt und 8 GB RAM empfohlen. Außerdem ist eine Internetverbindung sowie ein E-Mail-Konto für die Produktaktivierung nötig. Der WebAnimator 4 läuft bereits ab Windows 7 mit 64-Bit und höher. Beim Apple-Betriebssystem muss mindestens macOS 10.13 oder höher, mit 64-Bit-Intel-CPU verwendet werden.

Informationen zum Unternehmen Incomedia

Es begab sich im Jahre 1998, als die von Technologie begeisterten Brüder Federico und Stefano Ranfagni aus Italien das Unternehmen Incomedia gründeten. Incomedia s.r.l. hat heute seinen Sitz in der Via Burolo 22/A in 10015 Ivrea Italien. Nach zwei Jahren erschien dann im Jahr 2000 Version 1 der Webdesign-Software WebSite X5, mit der direkt auf dem Desktop Webseiten und Onlineshops realisiert werden konnten. Bis der WebAnimator das Licht der Welt erblickte, sollten noch ganze 14 Jahre vergehen. Zum 25. Jubiläum im Jahr 2023 hat Incomedia den grundlegend erneuerten WebAnimator 4 zum Kauf und als Testversion zum Download bereitgestellt. Seit Anbeginn der Unternehmensgründung ist Incomedia stets darauf bedacht, einfach zu nutzende Software anzubieten, mit der auch Laien schnell zurecht kommen, ohne Fachwissen zu benötigen oder dicke Handbücher lesen zu müssen und dennoch professionelle Resultate erreichen können.