Adobe Animate – so «flashy» wie eh und je

Können Sie sich an die «Kinderüberraschung»-Werbung erinnern, in der das Kind den Vater fragt, ob er ihm etwas von der Geschäftsreise mitbringen könne? Was Spannendes soll es sein, was zum Spielen … und Schokolade.

Der Vater sagt dann so schön: «Aber das sind ja gleich drei Wünsche auf einmal!»

Wenn es in diesem Blog-Beitrag um Adobe Animate geht, möchte ich zeigen, wie die Software für 2D-Animationen auch gleich drei Wünsche auf einmal erfüllt, zumindest Leuten, die ein Werkzeug suchen, mit dem sich in Adobe-Style hochwertige Animationen erstellen lassen … nicht nur für’s Web.

Vorab

In meinen Blogbeiträgen habe ich schon so einiges zum Thema Adobe Animate geschrieben. Einerseits habe ich schon den Lern-Aufwand für die Erstellung von Web-Animationen beleuchtet (https://www.digicomp.ch/…/javascriptjquery-vs-adobe-flash-annaeherungen-eines-kursleiters) und auch die Vorteile von HTML5-Canvas-Animationen aufgezeigt (https://www.digicomp.ch/…/banner-fur-das-www-animierte-gifs-vs-html5-canvas).

So soll dieser Beitrag von einer etwas anderen Seite an das Thema Adobe Animate heranführen.

Die Herausforderung

Werbung im Internet ist beinahe omnipräsent und als Grafik- bzw. Medien-Agentur kommt man heute mit der Erstellung von Visitenkarten allein kaum mehr über die Runden. Eine Werbekampagne macht heute nicht mehr beim Zeitungsinserat Schluss, sondern will – wie gesagt – auch im Internet und auf den Nachfolgern der Litfasssäule, den Multimedia-Screens, verankert sein.

Kurz: es müssen 2D-Animationen her.

Als Grafiker, Mediamatiker oder Polygraf bedient man die visuelle Kommunikation einer Organisation oder Unternehmung heute in der Regel mit Produkten von Adobe: Illustrator, Photoshop und InDesign gehören vielerorts zur Grundausstattung.

Wie das zu Beginn erwähnte Kind in der Werbung, formulieren wir also unsere Wünsche: «Was zum Erstellen von Internet-Bannerwerbungen, was zum Erstellen von Animationen für Multimedia-Screens und einfach bzw. bekannt soll es sein!»

Ja, das sind gleich drei Wünsche auf einmal!

Etwas Spannendes: Animationen für Internet-Werbe-Banner

Werbe-Netzwerke im Internet setzen (vermehrt) auf die HTML5-Technologie und verlangen nach Daten im HTML-/CSS-/JavaScript-Format. Diese Technologien im Detail zu erlernen, dauert relativ lange im Verhältnis zum Erlernen von Adobe Animate.

Mit Adobe Animate lassen sich 2D-Animationen verhältnismässig einfach erstellen und im gewünschten Format exportieren. Sogar ein Code-Assistent steht zur Verfügung, der einem das Schreiben von JavaScript-Code abnimmt und so auch Interaktivität (beispielsweise den Klick auf einen Button, der zu einer Website führt) und Logik (beispielsweise am richtigen Ort anzuhalten oder wieder an den Anfang zu springen) in den Animationen zulässt.

Ein kleines, aber feines Detail: Dabei arbeitet Adobe Animate sehr effizient und exportiert auf Wunsch alle Bilder nicht einzeln, sondern als Sprite.

Etwas zum Spielen: Animationen für Multimedia-Screens

Wie eh und je – also als Adobe Animate noch «Flash» hiess – unterstützt das Tool immer noch die Erstellung von Animationen im FLA-Format mit ActionScript. Im Vergleich zu den HTML5-Canvas-Animationen bietet diese Variante folgende Vorteile:

1. Einfärben von Instanzen
Jedes Element in Animate auf der sogenannten «Bühne» ist eine «Instanz» einer Vorlage in der Objekt-Bibliothek. (Lieben Sie solche Sätze auch so wie ich?! In meinen Animate-Kursen gibt’s noch mehr davon. 🙂 ). In FLA-Animationen lassen sich diese Instanzen direkt auf der Bühne neu einfärben, ohne das Original zu verändern. In HTML5-Canvas-Animationen lassen sie sich zwar auch einfärben, bewegen sich dann aber unter Umständen nicht mehr. Wahrscheinlich ein Bug! …?

2. Sound streamen
In HTML5-Canvas-Animationen können Sie wunderbar mit Sound arbeiten. Sie importieren die Tondatei in Animate und definieren, wann er abgespielt werden soll. Mehr aber auch nicht. In FLA-Animationen können Sie einen Sound auch wieder stoppen oder gar der Animation sagen, dass sie sich mit dem Sound synchronisieren soll. So sind Animationen möglich, die z.B. exakt passend zur Musik ablaufen.

3. Diverse Exportformate
Die FLA-basierten Animationen lassen sich nicht nur als .swf-Datei exportieren, die dann in Webseiten eingebunden werden können. Es lassen sich nebst animierten GIFs, MOV- oder AVI-Filmen auch ausführbare Dateien für MacOS und Windows kompilieren, die dann als selbstständiges Programm auf einem PC laufen können. Dies bringt z.B. für Präsentations-Screens oder Kiosk-Systeme diverse Vorteile mit sich. Früher hat man diese Dateien auf kleine CD-ROMs im Kreditkartenformat gebrannt und per Post verschickt. Das waren noch Zeiten …

Wo bleibt das «Spielen»? – Kleiner Exkurs zum Thema GPU-Unterstützung

Ob eine Animation auf einem HTML5-Canvas vom Hauptprozessor (CPU) oder vom besser dafür geeigneten Grafikprozessor (GPU für Graphics Processing Unit) hängt vom Browser ab, der die Animation anzeigt. Und vom Einstellungs-Können des Anwenders. Cameron Laird beschreibt das hervorragend in einem seiner Blogbeiträge. Wer also behauptet, gute und flüssige Games liessen sich nur mit der FLA-ActionScript-Variante umsetzen, muss (langsam aber sicher) umdenken! Und: Wer schon einmal von «WebGL« gehört hat, dessen Herz schlägt höher, wenn Animate beim Erstellen eines neuen Projekts fragt, ob es denn vom Typ «WebGL» sein dürfe … wenn auch vorläufig «nur» als Vorschau.

Und die Schokolade?

In der Werbung mit der Kinderüberraschung will das Kind auch noch Schokolade.

Für mich ist diese «Schokolade», wenn es um Adobe Animate geht, die Integration in die Adobe-Produkte-Familie:

• Wer mit Illustrator und Photoshop arbeitet, kann Originaldateien grad direkt importieren und sogar die Ebene wählen, wenn gewünscht.
• Wer das Werkzeugkonzept der Adobe-Produkte beherrscht, findet sich in Animate schnell zurecht.
• Wer aus After Effects oder Premiere das Konzept der Keyframes (dt. Schlüsselbilder) verstanden hat, wird sich in Animate schnell zurechtfinden, da die Grundidee schliesslich aus dem Animate-Vorgänger «Flash» stammt.

Zugegeben: Ein bisschen herb ist die Schokolade aber schon. Wer z.B. das Synchronisieren von Paletten in der Creative Cloud lieben gelernt hat, muss bei Animate leider verzichten.

Fazit

Adobe Animate ist «flashy» wie eh und je! Grundsätzlich fokussiert sich das Tool immer noch auf die Erstellung von professionellen und hochwertigen Animationen – unabhängig vom Endformat. Es bietet dazu diverse – unter anderem geniale – Werkzeuge, wie beispielsweise das «Bone Tool».

Dass die Internet-Welt heute vermehrt nach HTML5-Canvas-Animationen verlangt, bedient Animate mit der Möglichkeit, auch solche zu erstellen – zwar mit Abstrichen gegenüber der FLA-Variante, aber für das herkömmliche Werbebanner reicht es allemal. Wer also professionelle Animationen für das Web erstellen will, ist mit Animate gut bedient.

Dass Animate für die Zukunft gerüstet zu sein scheint, zeigt sich in der Variante von Animationen für WebGL. Dass diese Option (schon seit Jahren) als «Vorschau» betitelt wird, lässt etwas von der Priorisierung im Hause Adobe erahnen. Animate steht bezüglich Updates ganz bestimmt nicht an oberster Stelle.

Es bleibt spannend und spielerisch … geniessen wir die «Schokolade»! 🙂