Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

Luminar 2018 gewinnen

SeedingUp | Digital Content Marketing

Ahadesign Tutorials

webanimatorgoÜblicherweise werden Web-Animationen heute mit HTML5 realisiert. Mit dem WebAnimator GO hat Incomedia ein Tool für solche Animationen herausgebracht, welches einfacher nicht sein könnte. Schritt für Schritt durchläuft man wenige unkomplizierte Aufgaben. Bereits vorgefertigte und sehr hochwertige Animationen werden dann auf eigene Bilder, Grafiken und Text angewandt. Kenntnisse im Webdesign sind an keiner Stelle notwendig, wie nachfolgender Test zeigt.

Schnell und unkompliziert, animierte Inhalte für die Website erzeugen!

webanimatorgo-boxDer WebAnimator GO ist perfekt für alle Webseiten-Betreiber, welche mit HTML5, jQuery und Co. so gar nichts am Hut haben. Tatsächlich ist in wenigen Schritten, ansprechende Bewegung auf die eigene Website gebracht.

Damit das funktioniert, setzten die Entwickler auf die von der hier bereits getesteten Webdesign-Software WebSite X5 bekannte und offensichtlich bewährte Schritt-für-Schritt-Benutzerführung. Interessant ist hierzu sicher auch der Bericht zu WebSite X5 Version 12.

Stets an die Hand genommen, lässt sich einfach nichts falsch machen. Komplizierte Animationen müssen nicht selbst erstellt werden. Sie sind bereits vorhanden und werden lediglich mit eigenen Inhalten wie Fotos, Grafiken und Text befüllt.

Dazu enthält der WebAnimator GO die Standard-Vorlagen und die Template-Collection 1 aus dem großen Bruder WebAnimator Plus, welcher hier ebenfalls ausführlich unter "Animationen ohne Flash mit WebAnimator Plus im großen Test" unter die Lupe genommen wurde. Somit stehen diverse Effekte wie Schrift-Übergänge, Slider und animierte Bilder, sofort zur Verfügung.

Wie die GO-Version zu verwenden ist, kann also in dem oben genannten Testbericht unter der Überschrift "Vorlagen" bereits nachvollzogen werden. Dort sind auch einige fertige Animationen zu sehen. Dennoch wird auch hier ein kleines Beispielprojekt durchgegangen.

Der WebAnimator GO ist im Prinzip auf den Bereich "Vorlagen" des sehr umfangreichen WebAnimator Plus vereinfacht. Für viele Anwender sind die gegebenen Möglichkeiten ausreichend und es bleibt extrem unkompliziert. Um bei den Extremen zu bleiben, sei auch der Preis erwähnt. Mit derzeit 19,99 Euro ist die Software angesichts der Möglichkeiten, fast geschenkt. Und es gibt eine kostenlose 14-Tage-Testversion sowie weitere Informationen auf der Produktseite zum WebAnimator GO.

Der Funktionsumfang des WebAnimator GO

  • 4 Standardvorlagen
  • Template Collection 1
  • Beliebige Bildformate wie jpg, png, gif
  • Farben, Overlays und Text individuell gestalten
  • Moderner HTML5-Code
  • Export auch als animierte Gif-Datei
  • Export nach WebAnimator Standard und Plus
  • Kompatibel mit WebSite X5

 

Schon ab Windows XP und mit lediglich 2 GB RAM funktioniert die Software. Aber auch der Betrieb unter Windows 10 stellt kein Problem dar. Das Programm ist in den Sprachen Deutsch, Englisch und Italienisch nutzbar.

Programmübersicht

Nach dem Start der Software unterscheidet sich zunächst das Aussehen etwas gegenüber der Plus-Variante. Und es ist sofort die bewährte Schritt-für-Schritt-Struktur erkennbar.

webanimatorgo-startfenster

In der unteren linken Ecke befindet sich ein kleines Icon, über welches die Grundeinstellungen vorgenommen werden können.

webanimatorgo-einstellungen

Wie man sieht, werden hier lediglich die Sprache und die Browser für die Vorschau definiert.

Im ersten Schritt wird eine Projektbezeichnung eingetragen bzw. ein bestehendes Projekt geöffnet. Dann kann es über das Start-Icon in der rechten oberen Ecke weitergehen. Alternativ kann der nächste Schritt auch direkt in der linken Spalte angeklickt werden. Und natürlich lässt sich so auch jederzeit zurückspringen.

webanimatorgo-template-auswahl

Hier stehen nun die Standard-Vorlagen und die Vorlagen der Template-Collection 1 zur Wahl. Nach dem Anklicken einer Vorlage wird sofort die Animation im rechten Vorschaubereich angezeigt.

webanimatorgo-vorschau-animation

Je nach Vorgabe sind beispielhafte Text- und Bildbereiche zu sehen, welche im nächsten zweiten Schritt die gewünschten Abmessungen bekommen und danach mit eigenen Inhalten versehen werden können.

webanimatorgo-abmessungen

Da bereits vorgegeben, braucht man keinerlei Kenntnisse zu den üblichen Größen. Ein simpler Klick und es passt. Die folgende Auswahl hängt natürlich immer von der gewählten Vorlage ab. Das Prinzip ist aber immer ähnlich einfach.

webanimatorgo-folie-einfuegen

 

In diesem Beispiel wird zunächst eine Folie eingefügt. Passend zum Thema, wird hier eine Empfehlungsgrafik für den WebAnimator geladen.

Es stellt übrigens kein Problem für die spätere Ansicht dar, wenn die Grafik deutlich größer ist, als z.B. hier der Square Button mit 125x125 Pixel. Allerdings hebt das die Dateigröße unnötig an, was im Internet nicht wirklich angebracht ist.

Danach wird eine Überlagerung eingefügt und definiert. Dabei handelt es sich einfach um Text mit Hintergrundfarbe.

webanimatorgo-ueberlagerung

Mit Vordergrundfarbe ist hier die Textfarbe gemeint. Idealerweise kann sowohl für die Grafik, als auch für den Text, eine Verlinkung vorgenommen werden. Damit landet der Seitenbesucher je nach Folie, auf der gewünschten Webseite. Für jede Folie lässt sich getrennt definieren, welche Art der Animation und wie lange sie angezeigt werden soll. Neben Slide, gibt es noch Fade, Reißverschluss und Blöcke.

Sind mehrere Folien geladen, lassen sich diese mit den Pfeilsymbolen neben der Vorschaugrafik durchschalten bzw. anwählen und z.B. noch mal ändern. Und auch für die Reihenfolge nach oben und unten, sind Schaltflächen vorhanden. Wirklich sehr einfach alles.

Jetzt kommt auch schon der dritte und letzte Schritt. Die Animation wird exportiert. Dazu werden einige Optionen angeboten, welche ebenso einfach zu verstehen sind, wie die gesamte Programmlogik.

webanimatorgo-export

Hier muss sicher nicht viel erklärt werden. In diesem Beispiel wird der Export als animiertes GIF gewählt. Damit ist eine Einbindung in die Webseite dann genauso simpel, wie mit jedem anderen einfachen Bild.

webanimatorgo-zielpfad

Es wird ein Speicherort sowie die Animationsqualität und Dauer definiert.

webanimatorgo-laufender-exportWeniger Bilder pro Sekunde machen die Datei kleiner, aber das kann auch zu unschönem Ruckeln führen.

Der Export kann jetzt je nach Umfang der Animation etwas Zeit beanspruchen.

Im Vorschaubereich ist während des Exports immer zu sehen, was gerade gerendert wird.

Schließlich öffnet sich der Dateibrowser des Betriebssystems mit dem fertig animierten GIF. Jetzt funktionieren allerdings die Verlinkungen nicht, da es sich um interaktive Elemente handelt. Und das geht mit einem GIF eben nicht. Wer sich nicht sicher ist bezüglich der Einbindung, findet über das Hilfe-Icon zur Webanimator-Seite, kompetente Hilfe zu allen relevanten Themen. In oben genannten Testbericht zum WebAnimator Plus ist ebenfalls die Einbindung z.B. auch für das CMS Joomla erklärt.

Fazit

aha-empfehlung-webanimatorgoSchon der WebAnimator Standard und Plus waren relativ unkompliziert zu bedienen. Beim WebAnimator GO geht es aufgrund der bewährten Schritt-für-Schritt-Benutzerführung tatsächlich noch mal einfacher. Die zur Verfügung gestellten Animationsvorlagen sind erstklassig, werden kurz mit eigenen Inhalten befüllt und schon ist die Animation fertig für den flexiblen Export. Damit ist den Entwicklern ein sehr preiswertes und ausreichend umfangreiches Tool für Laien, als auch für zeitbewusste Profis gelungen. Hierfür gibt es natürlich eine Empfehlung.

Cookies erleichtern die Bereitstellung unserer Dienste. Über deren Verwendung kann hier frei entschieden werden.
Datenschutzerklärung Ok Ablehnen