Animationsschnickschnack mit Googles Hilfe

Ich habe mir seit einiger Zeit vorgenommen, den Web Designer von Google anzusehen. Unter google.com/webdesigner wird es für Windows und Mac angeboten, und es «macht Ideen über alle Bildschirme hinweg lebendig», wie Google verspricht. Also endlich ein neues Tool für Kreative im Web?

Wer als GoLive-Nachtrauerer und Dreamweaver-Verachter auf eine Alternative hofft, wird allerdings enttäuscht. Der Name impliziert zwar, man habe es mit einem vollwertigen HTML-Editor zu tun. Doch normale Webseiten kann man mit dem Programm nicht vernünftig bearbeiten. Web Designer ist vielmehr eine Alternative zu Flash. Konkurrenziert wird nicht nur Adobes Flash-Editor, sondern auch das Format. Web Designer erstellt Animationen in HTML5 in Kombination mit JavaScript und CSS3. Adobe selbst hat ein Programm namens Edge im Portfolio.

Es besteht aus den vier Komponenten Animate, Reflow, Code und Inspect und kommt laut Wikipedia bei vielen Webentwicklern nicht gut an. Adobe hat mit Muse aber noch ein Programm im Portfolio, das HTML5 kann. Fragt mich jetzt aber bloss nicht, warum es diese Vielfalt gibt.

Bei den Unterschieden zwischen den Programmen – und generell bei Adobes Produktepalette –, blicke ich längst nicht mehr durch. Und aus Adobes Erklärungen unter How is Edge Reflow different from Adobe Muse CC or Dreamweaver CC wird man auch nicht so richtig schlau.

Die Vorteile gegenüber Flash

Die Vorteile von HTML5 gegenüber Flash sind so offensichtlich, dass ich hier nicht auf ihnen herumreiten muss, zumal Wikipedia im Beitrag Comparison of HTML5 and Flash in extenso darlegt. Der zweitwichtigste Vorteil ist die «Herstellerneutralität». Bei Flash ist man an Adobe gekettet.

HTML5 ist ein offener Webstandard, den jeder Softwareentwicker unterstützten kann, wenn ihm danach ist. Flash verwendet ein binäres Format. Bei HTML5, CSS und JavaScript sind es reine Textdateien, die man zur Not (und mit dem entsprechenden Fachwissen) auch in einem ganz normalen Texteditor bearbeiten darf.

Der überhaupt wichtigste Vorteil ist die Unterstützung bei Mobilgeräten. Bei Flash sieht es diebezüglich mau aus. iOS hat Flash noch nie unterstützt und bei Android hat Adobe im August 2012 den Stecker gezogen. Flash hat ausserdem viele Sicherheitslücken, einen oft übertriebenen Ressourcenhunger und ist nicht auf die Touch-Bedienung ausgelegt.

Keine Frage: Wenn man heute interaktive Elemente baut, dann wird man Flash nur aus triftigen Gründen wählen – beispielsweise, weil man damit Dinge realisieren kann, die in HTML5 noch nicht gehen. Ohne ein Experte zu sein, vermute ich, dass man bei komplexen Interaktionen bei HTML5 deutlich schneller an die Grenzen stösst, als bei Flash. Da hat Flash als Produkt, dass es seit 1996 gibt, natürlich einen Vorsprung.

Google Web Designer steckt noch in der Beta-Phase und ist nur für relativ simple Projekte geeignet. Beim ersten Start bleibt kein Zweifel daran, auf welche Art von Projekten Google das Programm ausgelegt hat: Es werden einem Vorlagen für Google Ads angeboten: Banner, erweiterbare Banner – Expandables sind solche Banner, die beim Überfahren mit der Maus grösser werden, und mir ehrlich gesagt ziemlich auf den Wecker gehen – und Interstitial. Letzteres legt sich für einige Sekunden über den Inhalt einer Website, und geht mir entsprechend genauso auf den Wecker wie das Expandable. Jedenfalls ist Web Designer auf die Ad-Sense-Kunden zugeschnitten, die mit dem Programm hübsche Banner kreieren können, die dann über Googles Werbenetz geschaltet werden.

Auch für Nichtwerbung geeignet

Man kann das Programm aber durchaus auch für nicht-werberische Zwecke verwenden. Die Oberfläche (die, wie bei Adobe, inzwischen weiss auf schwarz gehalten ist) hat man schnell erkundet: Links gibt es eine Werkzeugleiste mit einem Zeichen- und einem Textwerkzeug.

Plus einem Auswahl-Tool und einem Werkzeug, um die Ansicht dreidimensional zu rotieren. Web Designer beherrscht nämlich auch die Animation im dreidimensionalen Raum. In der Leiste oben stellt kontextsensitive Werkzeuge zur Verfügung. Beim Auswahlwerkzeug sind das beispielsweise die Tools fürs Ausrichten, Anordnen und Transformieren (Transform control oder deutsch Umwandlungssteuerung).

Rechts finden sich die Eigenschaften-Panels, über die man Farbe, Position, CSS-Stile und die Komponenten verwaltet. Am unteren Rand klebt die Zeitleiste, über die man Objekte animiert. Ausserdem gibt es hier die Möglichkeit, von der standardmässigen Design View (WYSIWYG-Ansicht) auf die Code-Ansicht umzuschalten. Und via Play startet man die Animation.

Die Arbeit mit Web Designer ist einfach, selbst wenn man noch nie mit einer Zeitleiste gearbeitet hat. Um einen Kreis von oben nach unten über den Bildschrim wandern zu lassen, greift man zum Oval Tool – es ist zusammen mit dem Rectangle Tool und Line Tool in dem Flyout-Menü enthalten. Es erscheint, wenn man etwas länger auf das Pen Tool klickt.

Damit zeichnet man seinen Kreis und füllt ihn über die Color-Palette rechts mit einer hübschen Farbe. Dann klickt man in der Animationspalette auf das Plus-Symbol, um ein neues Schlüsselbild (Keyframe) hinzuzufügen und versetzt den Kreis nach unten. Das wars schon: Bei einem Klick auf Play fällt der Kreis quasi von oben nach unten. Man kann ihn im zweiten Schlüsselbild via Transform control auch vergrösern oder verkleinern oder mit dem 3D rotate tool im Raum drehen. Die Phasen zwischen dem Anfangs- und Endstadium interpoliert die Software automatisch.

Hüpfende Bälle

Die Dauer der Animation lässt sich auch anpassen. Das geschieht über das Symbol mit den zwei mit den Spitzen aufeinander zeigenden Dreiecken, das zwischen den Keyframes steht. Im Dialog ist die Dauer standardmässig auf eine Sekunde gesetzt. So lange dauert die Interpolation zwischen den beiden Schlüsselbildern. Für einen herunterfallenden Ball würde 0,3 Sekunden passen. Standardmässig erfolgt die Bewegung linear. Über das Kurvensymbol kann man sie aber auch anpassen. Da der nach unten fallende Ball schneller wird, wählen wir eine durchhängende Kurve – so fängt die Bewegung langsam an und wird dann zunemend schneller.

Nun kann man die Bewegung fortführen. Dazu legt man ein neues Schlüsselbild an, bei dem die Bälle wieder nach oben hüpfen. Da sie dabei langsamer werden, muss die Beschleunigungskurve nun nicht durchhängen, sondern nach oben gewölbt sein.

Ich habe in meinem Beispiel nun zwei weitere Bälle platziert. Der Fussball ist eine Grafik aus dem Web. Web Designer erlaubt es einem, Grafiken per Maus auf die Zeichenfläche ziehen. Sie können hinterher wie selbst gezeichnete Objekte animiert werden. Das funktioniert sogar mit SVG-Grafiken (also Vektorformaten), zumindest, wenn sie nicht zu komplex sind. Bei der Beispielanimation habe ich den Fussball auf diese Weise platziert.

Nun sieht die Grafik mit den drei völlig synchron hüpfenden Bällen etwas gar künstlich aus. Das liegt am Animationsmodus Quick. Er verwendet die gleichen Schlüsselbilder für alle Objekte. Das ist dann praktisch, wenn man nur ein Objekt animieren möchte oder alle Objekte im gleichen Takt steuern will. In meinem Fall ist das nicht gewünscht. Daher wechsle ich über die Advanced-Taste zum Fortgeschrittenenmodus. Er stellt für jedes Objekt eine eigene Zeitleiste zur Verfügung, sodass sich die Objekte unabhängig voneinander bewegen können.

Asynchrone Bewegungen

In der Zeitleiste erscheinen nun die einzelnen Objekte. Um sie zu unterscheiden, ist es sinnvoll, sie via Properties-Palette zu benennen. Beim kleinen, blauen Ball ziehe ich die als Rauten dargestellten Schlüsselpunkte nach links. Weil er klein ist, soll er schneller hüpfen. Beim grünen Ball versetze ich die Schlüsselpunkte ein bisschen nach rechts. Er ist offensichtlich ziemlich gummig und dementsprechend etwas träge.

Das Beispiel mit meinen hüpfenden Bällen – wobei die Animation nur in Chrome zu funktionieren scheint.

Übrigens: Falls die Zeitleiste oder ein Objekt nicht reagiert, liegt das daran, dass die Animation noch läuft. In diesem Fall einfach auf Stop klicken!

Über die Palette Components (Komponenten) fügt man Dinge wie Tap areas (für die Gestensteuerung), Videos oder Galerien hinzu. Diese Elemente stehen aber anscheinend nur dann zur Verfügung, wenn man eine der Vorlagen aus Google Ads (Google Anzeigen) gewählt hat. Auch die Event-Palette (Ereignisse) ist bei den Nicht-Google-Ad-Projekten nicht aktiv. Das ist etwas seltsam. Sollte man diese Funktionen verwenden wollen, kann man indes einfach eine der Werbevorlagen zweckentfremden…

Fazit: Ein interessantes Werkzeug, das man für die eine oder andere Spielerei gut nutzen kann. Der Nachteil ist allerdings schon die (fehlende) Kompatibilität. Die Animation meines kleinen Beispiels war nur in Google Chrome und in Safari (Mac und iOS) ersichtlich. Firefox und Internet Explorer fühlen sich nicht bemüssigt, die Bälle in Bewegung zu setzen; und der eingebettete SVG-Fussball taucht ebenfalls nicht auf. Ob das der bislang fehlenden Kompatibilität von HTML5 oder Web Designer anzulasten ist, konnte ich nicht definitiv abklären…