Kuratierte Linksammlung für Webdesigner und -entwickler.
Erstelle beeindruckende HTML5 Web-Animationen ohne Flash!

Data Becker stellt Software für HTML5 Webanimation vor: A5 HTML5 Animator

Der A5 HTML5 Animator ist die umfassende Software-Lösung zur Erstellung moderner Web-Animationen im neuen Format-Standard HTML5. Packende, interaktive Inhalte ohne Programmierkenntnisse und natürlich ohne das aussterbende Flash-Format – das ist die Zukunft.

Mit der Windows-Software „A5 HTML5 Animator“ lassen sich animierte Inhalte für das Web in offenen Standards wie HTML5, JavaScript und CSS3 spielerisch erstellen. Die Ergebnisse funktionieren auf allen modernen Browsern und mobilen Geräten. Die Software kann ab sofort in einer Vorab-Version (Beta) auf www.a5-animator.de kostenlos heruntergeladen und ausprobiert werden.

Anzeige

Sprungmarken:

Schon mit der stabilen Beta-Version lassen sich mit geringem Aufwand erstaunliche Ergebnisse erzielen, ohne auch nur eine einzige Zeile Programmiercode selbst zu schreiben. Im Rahmen dieses öffentlichen Beta-Tests soll das Feedback der Nutzer eingesammelt und genutzt werden, um die Software in den kommenden Wochen um weitere Funktionen zu ergänzen.

Anmeldung zum Beta-Test

Dieser Artikel richtet sich also an all diejenigen, die Ihre Interesse zum Webdesign und -entwicklung ausleben und nach einer Workflow optimierten Lösung für das Erstellen von HTML5 basierten Web-Animationen suchen.

Wenn Du an diesem Beta-Test teilnehmen und die Software mitgestalten möchtest, kannst Du dich auf der Webseite www.a5-animator.de anmelden. Nach der Registrierung und Freischaltung erhältst Du Zugang zum internen Testbereich, wo Du dir die aktuellste Basisversion und Programm-Aktualisierungen herunter laden kannst.

A5 HTML5 Animator

Deine Vorteile im Überblick:

  • Flash war gestern: HTML5-Animationen werden auch auf mobilen Geräten wie iPhone und iPad perfekt ausgegeben und sind somit Flash-Inhalten klar überlegen
  • Ausgereifter WYSIWYG-Editor zum einfachen Platzieren von Objekten (z.B. Texte, Bilder, Videos) per Drag & Drop
  • Intuitive Steuerung des zeitlichen Ablaufs der Animationen dank übersichtlicher Timeline; zudem auch Multi-Time-Unterstützung für noch mehr Interaktivität
  • Realisierung der Bewegungsabläufe durch manuelles Einfügen von Keyframes oder durch den Einsatz der komfortablen Aufnahme-Funktion: Die Keyframes werden automatisch erzeugt, wenn Position oder Eigenschaften eines Objekts verändert werden
  • Eine Vielzahl vorgefertigte, bereits integrierte Animationen und Effekte können bequem auf jedes Objekt angewandt werden
  • Für Profi s: Komplexere Interaktionen können mit dem integrierten JavaScript-Editor realisiert werden (inkl. Syntax-Highlighting)

Features

Der A5 HTML Animator verspricht komfortable und einfach zu bedienende Werkzeuge, mit denen Du interaktive Inhalte für Deine Website erstellen kannst.

Timeline

Die Timeline dient als zentrales Steuerelement, mit der Du den Ablauf Deiner Animationen über Keyframes definieren kannst.

Timeline

Die Keyframes beinhalten sämtliche Funktionen der Start- und Endpunkte einzelner Objekte. Keyframes (Schlüsselbilder) können somit über die Timeline in eine Szene eingebunden werden. Das nachträgliche Verschieben der Keyframes sowie “Easing” (z. B. linear, ease-in, ease-out) können hierüber für den Feinschliff ebenfalls gesteuert werden.

Szenen- und Objekt-Eigenschaften

Szenen- und Objekt-Eigenschaften

Die Szenen-Eigenschaften legen Hintergrundfarbe, -bilder und die Größe der Szene fest.

Durch Objekt-Eigenschaften können die Eigenschaften von Elementen auf unterschiedliche Weise verändert werden:

  • Größe und Position
  • Rahmen
  • Farben und Verläufe
  • Hintergrundbilder
  • Schatten
  • Reflektion,
  • Skalierung
  • Rotation
  • Deckkraft
  • etc.

In Kombination der Keyframes auf der Timeline wird Dir ermöglicht, die Veränderungen der Objekte (Farbveränderung, Ausblenden, Größenänderungen usw.) in der Animation darzustellen.

Objekte

Mit Hilfe der links angebrachten Objektleiste kannst Du Texte, Bilder, Videos, Sounds und geometrische Formen Deiner Animation hinzufügen.

Objekte

Per Drag and Drop werden die Objekte bequem auf die Arbeitsfläche platziert. Nun können die Objekteigenschaften nach kreativen Ergüssen modifiziert- und über die Timeline animiert werden.

Live-Animationen und Effekte

Auf jedes beliebige Objekt können vorgefertigte Live-Animationen angewendet werden, z.B diverse Bewegungsabläufe. Zudem können Effekte, wie z. B. Fallende Blätter, ebenfalls den Objekten hinzugefügt werden.

Live-Animationen und Effekte

A5 HTML5 Animator Tutorials

1. Arbeiten mit der Timeline

In diesem Video-Tutorial wird Dir gezeigt, wie Du mit „A5 HTML5 Animator“ einfache und eindrucksvolle HTML5-Animationen erstellen kannst

2. Live-Animationen und Effekte

Dieses Video-Tutorial zeigt Dir,  wie Du mit dem HTML5 Animator Live-Animationen und Effekte erstellen kannst.

3. Szenen & Interaktion

In diesem Tutorial wird Dir gezeigt, wie Du mit unterschiedlichen Szenen arbeitest, verschiedene Timelines nutzt und Ereignisse einsetzen kannst.

Beispiele:
  1. Typo-Animation mit unterschiedlichen Texteffekten
  2. Animierte Menüleiste mit Mouse-over-Effekten
  3. Schicker Slider mit Timeline-basierten Animationen
  4. Animiertes Werbebanner
  5. Hüpfender Ball
  6. Fahrendes Auto

Zukunftsorientiert

Webdesign hat sich in den letzten Jahren sehr geändert und Komplexität der Web-Branche stellt uns Webdesigner und Entwickler vor neue Herausforderungen. Der A5 HTML5 Animator bietet dazu eine hervorragende HTML5-Lösung für das Erstellen von Animationen, die komplexere Projekte kundenorientiert auch für Designer ohne Programmierkenntnisse ermöglicht. Zudem gewährleistet der A5 HTML5 Animator eine Plattformübergreifende Funktionalität – Animationen werden auf mobilen Geräten ebenso fehlerfrei dargestellt wie auf dem PC und Notebook.

Beta-Test Teilnahme

Nehme jetzt kostenlos am „A5 HTML5 Animator“-Betatest teil → www.a5-animator.de

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

8 Antworten auf "Data Becker stellt Software für HTML5 Webanimation vor: A5 HTML5 Animator"
  • Avatar

    Jetzt können die ganzen Firmenwebsites endlich wieder mit einer Introseite versehen werden, ohne dass man beim SEO verliert :D hehe

    Aber ehrlich. Sieht nach einem interessanten Programm aus. Könnte man mal testen ;-)

  • Avatar
    ryxo:

    Sieht aus als hätte jemand Adobe Edge kopiert?

    Die Argumentation hinsichtlich Flash ist aber doch reißerisch und kurz geraten. Das man mit HTML5 und Canvas Animationen bei weitem nicht das abbilden kann was in Flash möglich ist sollte klar sein, gerade hinsichtlich 3D. DRM ist genauso ein offenes Thema.

    Ich bin mir ehrlich gesagt nicht sicher welche Zielgruppe das Tool bedienen soll? Sicherlich erleichtert es die Arbeit an einigen Stellen, aber ich vermute das die Software das gleiche Problem wie Edge hat und der Code einfach unperformant und unsauber ist, seien wir mal ehrlich, wer sich ernsthaft mit HTML5 und Webentwicklung auseinandersetzt programmiert was er braucht sauber und ordentlich.

    Firmenseiten brauchen keine Intros.

    • Jonathan

      Die Argumentation hinsichtlich Flash ist aber doch reißerisch und kurz geraten.

      Um das Argumentieren hinsichtlich Flash sollte es bei dieser Produkt-Übersicht auch nicht gehen.

      … wer sich ernsthaft mit HTML5 und Webentwicklung auseinandersetzt programmiert was er braucht sauber und ordentlich.

      Und doch nimmt die Komplexität der Webbranche zu. Wenn man auf zuverlässige Tools zurückgreifen kann, die den Workflow optimieren, sollte man dies tun.

      Lieben Gruß

      • Avatar
        ryxo:

        So war das auch nicht gemeint, eine weiter Flash, HTML5 Debatte ist auch gar nicht nötig ;)
        Die Aussage „Flash war gestern: HTML5-Animationen werden auch auf mobilen Geräten wie iPhone und iPad perfekt ausgegeben und sind somit Flash-Inhalten klar überlegen“ stimmt so aber nur bedingt.

        Ich kann jetzt nur von Adobe Edge sprechen, aber da beide Tools schon in der Userinterface nahezu identisch sind vermute ich auch mal das der generierte Code nicht wesentlich besser ist. Das arbeiten mit Edge erleichtert höchstens dem an einem Projekt arbeitenden Designer die Arbeit oder falls etwas Quick & Dirty erledigt werden soll. Der generierte Code ist extrem schlecht zu warten und mit viel unnötigen Code zugemüllt, er ist halt maschinell generiert. Ich kann da nur aus meinen Erfahrungen sprechen, aber mit Edge erstellte Projekte haben mir bisher nur das leben schwerer gemacht. Mir erschließt sich einfach nicht der nutzen eines HTML5 WSIWYG Tools, bzw. die Zielgruppe die man mit einem solchen erreichen möchte?

        • Jonathan

          Für den ganz individuellen und sehr komplexen Einsatz werden solche Programme wohl derzeit an ihre Grenzen stoßen. Dennoch lässt sich eine Menge aus diesen Tools herausholen, gerade für Designer, die nicht coden können oder dies einfach nicht möchten. Dann ist die Kreativität des Anwenders gefragt, die Grenzen zu überwinden.

          Aus meiner Erfahrung ziehe ich Ähnliches wie du: Je individueller ein Projekt oder Kundenwunsch, desto mehr muss man selbst coden. ‚Finde ich gut, denn ich habe die Kontrolle über den Code! Selbermachen, ja :-)

          Aber das ist alles auch einfacher gesagt, als getan, wenn man sein Tagesgeschäft hinterherkommen muss. Denn auf der anderen Seite frisst Selbercoden oder Unwissenheit eine Menge Zeit. Und wenn man dann einfach nicht das Budget zum outsourcen hat, kommen solche Tools für einfache Projekte gerade recht. Dabei wird es sicherlich vielen Nicht-Codern völlig egal sein, wie unnötig zugemüllt der Code ist. Und diese Leute kann ich sogar verstehen. Es zählt, was funktioniert.

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige