Animationen haben zweifellos einen gewissen Reiz. Sie ziehen die Aufmerksamkeit des Betrachters an und lassen, wenn sie professionell gestaltet und gut implementiert sind, die Seiten von Internetauftritten interessanter wirken.

Mit einer Software wie WebAnimator kann wirklich jeder eine ansprechende Animation gestalten. Man muss keinerlei Code schreiben, die Anwendung unterstützt Timelines und Keyframes, enthält vorprogrammierte Effekte und Live-Animations und bietet desweiteren zahlreiche Funktionen, mit denen optimale Ergebnisse erzielt werden können. Der interessanteste Aspekt ist jedoch, dass WebAnimator Animationen sowohl mit Hilfe von HTML5 als auch mit CSS und JavaScript erstellt. Durch den Verzicht auf Flash werden die Animationen auf allen Browsern und Mobilgeräten, einschließlich iPhone und iPad, korrekt dargestellt.

Sollten Sie es noch nicht ausprobiert haben, empfehlen wir Ihnen, die Testversion von WebAnimator herunterzuladen, mit der Sie die Anwendung für 14 Tage testen können. Den Link zum Download finden Sie auf der Website der Anwendung: http://www.webanimator.com

Wie kann nun eine mit WebAnimator realisierte Animation in die Seiten unserer mit WebSite X5 erstellten Websites eingefügt werden?

Das Verfahren ist sehr einfach und wurde in der FAQ „Wie kann ich eine HTML5-Animation, die mit WebAnimator erstellt wurde, in WebSite X5 einfügen?“ [https://helpcenter.websitex5.com/post/102556 ] bereits detailliert beschrieben. Doch jetzt ist die Integration dank der Einführung eines neuen, optional verwendbaren Objekts im Release 11.0.2.13 von WebSite X5 noch einfacher und schneller.

Realisieren der Animation in WebAnimator

Starten Sie WebAnimator und erstellen Sie die Animation, die in die Website eingefügt werden soll. Speichern Sie das Projekt mit einem Namen (z. B. WA_Animation). Klicken Sie nun auf die Option In HTML5 exportieren in der Menüleiste und wählen Sie das Verzeichnis, in das die Animation exportiert werden soll. Bestätigen Sie mit OK, um den Export zu starten.

WebAnimator speichert in dem angegebenen Zielverzeichnis sowohl die generierte HTML-Datei, die die Animation enthält (z. B. WA_Animation.html) als auch einen separaten Ordner, der die entsprechenden Ressourcen wie Bilder, Scripts usw. enthält (z. B. WA_Animation_resources).

Integrieren der Animation in WebSite X5

Vergewissern Sie sich, bevor Sie fortfahren, dass Sie die aktuelle Version von WebSite X5 installiert haben. Immer wenn ein Update verfügbar ist, wird gleich nach dem Öffnen des Programms auf der Startseite eine entsprechende Meldung angezeigt. Alternativ finden Sie die Update-Dateien auf der Seite „Meine Downloads“ in Ihrem Nutzerprofil von WebSite X5 Answers.

Öffnen Sie nach dieser Kontrolle Ihr Projekt und gehen Sie  in Schritt 3 und auf die Seite, in die die mit WebAnimator erstellte Animation eingefügt werden soll.

Klicken Sie die Schaltfläche an, um die Ansicht Objektverwaltung zu öffnen. Wählen Sie hier das Objekt WebAnimator Animation aus der Kategorie Widgets. Klicken Sie auf die Schaltfläche Gratis/Installieren  und geben Sie das Passwort an, das Sie für Ihre Anmeldung bei WebSite X5 Answers verwenden. Das Objekt ist nun installiert. Wenn Sie zur Ansicht Erstellen der Seiten zurückkehren, finden Sie es in der Kategorie Widgets der Objektliste.    

Markieren Sie das Objekt WebAnimator Animation, ziehen Sie es in eine Zelle des Layout-Schemas und öffnen Sie per Doppelklick den Einstellungsdialog.

Klicken Sie auf die Schaltfläche Hinzufügen und wählen Sie die Dateien aus dem Ordner der Ressourcen, die Sie aus WebAnimator exportiert haben (in unserem Beispiel: WA_Animation_resources). Legen Sie nun die Maße für die Animation fest. Bestätigen Sie die Einstellungen mit Klick auf OK und zeigen Sie die lokale Vorschau an, um das grafische Ergebnis zu prüfen.

Das Objekt WebAnimator Animation ist eins unserer neuesten optionalen Objekte, von denen wir im Verlauf der Zeit weitere entwickeln und anbieten werden. Schauen Sie daher regelmäßig in die Objektliste und installieren Sie die Objekte, die für die Gestaltung Ihrer Projekte nützlich sind. Wir wünschen Ihnen viel Erfolg bei der Arbeit!

-------------------------------------------------------------------

Weitere Beiträge zu diesem Thema:

• Wie kann ich eine HTML5-Animation, die mit WebAnimator erstellt wurde, in WebSite X5 einfügen? [https://helpcenter.websitex5.com/post/102556 ]
• Wie kann ich eine mit WebAnimator erstellte HTML5-Animation in den Bereich Header / Fußzeile einer mit WebSite X5 erstellten Website einfügen? [https://helpcenter.websitex5.com/post/108815 ]