Javascript SVG-Animation aus Illustrator

Javascript, das eine SVG-Animation direkt aus Illustrator erstellt, in dem Zeichenflächen für eine Bild für Bild Animation (frame by frame) benutzt werden.

INFO: (Neue Version 1.7 des Javascripts.) Eine SVG-Animation aus Illustrator zu erstellen, liegt eigentlich nahe. Denn Adobe Illustrator ist ein gutes Werkzeug, um Vektorgrafiken zu erstellen. Das W3C hat im Jahr 2001 das Vektorgrafikdateiformat SVG (Scalable Vector Graphics, auf Deutsch skalierbare Vektorgrafik) veröffentlicht. Der Vorteil gegenüber Bitmap- oder Rastergrafiken wie im GIF, PNG oder WebP-Dateien ist, dass sich SVG-Datei ohne Qualitätsverluste in der Größe verändern lassen. Außerdem ist die Anzeige bei grafischen Elementen immer scharf und die Dateien sind meist kleiner als GIF-Animationen. Doch leider verfügt der Illustrator über keine Animationsfähigkeiten. Trotzdem ist es machbar, dazu braucht es nur ein Javascript (missing feature #6).

Javascript um eine SVG-Animation aus Illustrator zu erstellen

TIPP: Download des Javascripts »FrameByFrameSVG« (28,5 MByte)neue Version 1.7 – mit PDF-Datei und Beispielen (AI- und SVG-Dateien).
 
Das Skript wurde mit Adobe Illustrator CC 2021 (v25.4) unter macOS 10.14 und Windows 10 getestet.

Beispiele für SVG-Animationen

Die folgenden Beispiele wurden in Adobe Illustrator CC 2021 (Version 25.4.) erstellt mithilfe des Javascripts FrameByFrame.jsx als animierte SVG-Dateien exportiert.

ACHTUNG: Sollten die Beispiele nicht korrekt dargestellt werden. Dann liegt es wohl an WordPress 🙁
Die zwei Beispiele in reinem HTML: zur alternativen Darstellung.

Beispiel 'Flag waving / Flagge wehen' für eine SVG-Animation, erstellt mit Javascript 'FrameByFrameSVG.jsx' direkt aus Adobe Illustrator.
Wehende Flagge als endlos Animation.
Beispiel 'Crazy Clock' für eine SVG-Animation, erstellt mit Javascript 'FrameByFrameSVG.jsx' direkt aus Adobe Illustrator.
Crazy Clock (Hommage an die TV-Serie »Loki«, 2021).
Beispiel 'Checker / Mühle' für eine SVG-Animation, erstellt mit Javascript 'FrameByFrameSVG.jsx' direkt aus Adobe Illustrator.
Szene aus einer Partie »Mühle«: Blau gewinnt.
Beispiel 'Blending' für eine SVG-Animation, erstellt mit Javascript 'FrameByFrameSVG.jsx' direkt aus Adobe Illustrator
Formen anpassen (blending) in Illustrator.

MAC: SVG-Animationen werden im Webbrowser Safari erst ab macOS 11 fehlerfrei dargestellt. In anderen Webbrowsern wie Firefox, Chrome, Opera oder Vivaldi konnte ich ab macOS 10.14.6 keine Probleme feststellen.

Über das Javascript

FRAGE: Was ist neu im Skript?

  • 1.7 Befehle wie »pattern, symbol, linearGradient, radialGradient«, die in mehreren Frame einen identischen Inhalt haben, werden zusammengefasst vor die Frames geschrieben, um eine kleinere Datei zu erhalten.
  • 1.6 Die einzelnen SVG-Dateien, die das Skript speichert, löscht das Skript auf Wunsch automatisch wieder. Die Einstellungen finden Sie ab Zeile 62 im Skript.
  • 1.5 Meldungen erscheinen entweder in Englisch oder in Deutsch. Kein Sprachmix mehr.

FRAGE: Was macht das Skript?

Das Skript erstellt aus mindestens zwei Grafiken, die auf großen Zeichenflächen liegen, eine endlos ablaufende Animation im Dateiformat SVG direkt auf dem Illustrator heraus. Dabei kann der Anwender bestimmen, wie lang jeweils die Bilder in der Animation sichtbar sein sollen. Diese Bild-für-Bild-Animation nennt man auch Cel-Animation. Das stammt aus der Zeit als (Trick-)Filme noch Bild für Bild gezeichnet und abfotografiert wurden, um einen Film draus zu machen.

FRAGE: Für wen ist das Skript?

Das Skript ist für jeden Illustrator-Benutzer, der einfache Bild-für-Bild-Animationen als SVG-Dateien erstellen will.

ACHTUNG: Hinweise:

  • Das Skript kann nur auf eine .AI-Datei angewendet werden, die bereits gespeichert wurde. Die Animation (mit der Endung »_anim.svg«) wird in den gleichen Ordner, wie die Originaldatei gespeichert. Die nummerierten Einzelbilder werden auf Wunsch wieder gelöscht (siehe Anpassung mit Version 1.6)
  • Es gibt Effekte in Illustrator, die werden beim Export in SVG durch Bilder (PNG) dargestellt und mit der SVG-Datei verknüpft. Sie, als Anwender, können diese Effekte nutzen. Das Skript erstellt dann einen extra Ordner für die PNG-Dateien und passt in der SVG-Datei die Verknüpfungen entsprechend an. Jedoch müssen Sie die Bilder (PNG) von Hand in diesen Ordner schieben.
  • Wenn Sie mit Symbolen im Illustrator arbeiten, dann müssen diese »dynamisch« sein, damit das Skript diese zusammenfassen kann (siehe Anpassung mit Version 1.7).

TIPP: Wenn Sie noch nie mit Zeichenflächen gearbeitet habe, dann finden Sie im Kapitel 2: Zeichenflächen verwenden eine kurze Einführung.

FRAGE: Fehler oder Problem? Das Thema und die Möglichkeiten von SVG sind umfangreich. Daher sollten Sie beim Benutzen meines Skripts einen Fehler finden oder auf ein Problem stoßen, dann schicken Sie mir einfach Ihre Originaldatei mit kurzer Erläuterung per E-Mail an feedback@cg4u.de zu und ich versuche das Problem zu beheben.

Kapitel 1: So verwenden Sie »FramebyFrameSVG.jsx«

0 Speichern Sie Ihre Datei in Adobe Illustrator als ».ai«-.Datei ab. Die Datei sollte mindestens zwei Zeichenfläche besitzen, die Beide die gleiche Größe habe.

1 Starten Sie das Skript z.B. durch Ziehen auf den Illustrator.

TIPP: siehe auch »Wo werden Javascript in Illustrator gezeigt und gestartet?«

2 Wenn das Skript Sie fragt, geben Sie an, wieviele Bilder pro Sekunde gewünscht sind (Standardwert ist »2« Bilder pro Sekunde.)

TIPP: Zum Beispiel benötigen Sie eine sehr langsame Animation, dann können Sie auch weniger als 1 Bild pro Sekunde angeben, z.B. »0,5«. Dann ist jedes Bild 2 Sekunden sichtbar.

3 Das Javascript legt die Einzelbilder als SVG-Dateien in den Ordner der Originaldatei (hier auf den Schreibtisch) und …

4 erstellt die Animation mit der Endung »_anim.svg«.

TIPP: Zum Betrachten der Animation öffnen Sie diese Datei mit Ihrem Webbrowser. Enthielt die AI-Datei bestimmte Effekte, wie der Schlagschatten, diese werden zu PNG-Dateien, so finden Sie auch ein passender Ordner mit der Endung »_images«. Bitte ziehen Sie die PNG-Dateien in diesen Ordner.

Eine einfache SVG-Animation in Illustrator mit nur zwei Zeichenflächen erstellen und mit dem Javascript FrameByFrameSVG.jsx exportieren
Eine SVG-Animation in Illustrator mit zwei Zeichenflächen wird mit dem Javascript FrameByFrameSVG.jsx erstellt.

Kapitel 2: Von Zeichenflächen zur SVG-Animation

Adobe Illustrator erlaubt es auf mehr als nur einer Zeichenfläche zu zeichnen. Das ist für Bild-für-Bild-Animationen ideal. Als kleines Beispiel werden Sie eine Ampel zeichnen, die im ersten Bild (Zeichenfläche 1) rot ist und im zweiten Bild grün. Danach können Sie das Javascript »FramebyFrameSVG« darauf anwenden. Los geht’s.

2.1 Eine Ampel mit zwei Zuständen zeichnen

A Erstellen Sie in Adobe Illustrator ein neues Dokument in der Größe 200 px hoch und 100 px breit. 

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Ein neues Illustrator Dokument anlegen.

B Für das Gehäuse der Ampel erstellen Sie ein Rechteck mit der Breite »98 px« und der Höhe »198 px«.

C Wählen Sie als Kontur »2 px« und eine schwarze Farbe.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Das Gehäuse der Ampel zeichnen.

D Für die Lichter der Ampel erstellen Sie zwei Kreise (Ellipsen) mit der Breite und Höhe von »80 px“.

E Geben Sie den Kreisen ebenfalls eine schwarze Kontur von »2 px«.

F Benennen Sie im Fenster »Ebenen« die Objekte »rot« für den oberen Kreis, »grün« für den unteren Kreis und »Ampel« für das Rechteck.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Zeichnen der Ampellichter »rot« und »grün«.

G Weisen Sie dem Kreis »rot« die rote Flächenfarbe zu. Da das rote Licht im ersten Bild leuchten soll.

H Dem Kreis »grün« und der »Ampel« geben Sie einen dunkelgraue Farbe.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Rotes Licht in Bild 0 einstellen.

I Wechseln Sie in das Fenster »Zeichenfläche« und klicken Sie auf die einzige Zeichenfläche, um sie zu aktivieren.

J Wählen Sie mit Klick auf die drei Striche (oben rechts) …

K … das Kontextmenü »Zeichenfläche duplizieren« aus.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Die erste Zeichenfläche duplizieren, um das zweite Bild zu erstellen.

L Gehen Sie zurück ins Fenster »Ebenen«.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Zwei identische Zeichenfläche und die zweite muss nun verändert werden.

M Wählen Sie in der rechten Zeichenfläche den Kreis »grün« aus und geben Sie ihn eine grüne Flächenfarbe. Außerdem ändern Sie in der gleichen Zeichenfläche die Farbe des Kreis »rot« in das Dunkelgrau. So leuchtet im zweiten Bild statt des roten nun das grüne Licht.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Schalten Sie in der zweiten Zeichenfläche das rote Licht »aus« und das grüne »ein«.

N Speichern Sie das Dokument mit »Datei > Speichern unter…« und dem Namen »Ampel.ai« ab.

2.2 Die SVG-Animation mithilfe des Javascripts erstellen

O Ziehen Sie das Javascript »FrameByFrame.jsx« in den Illustrator.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Um die SVG-Animation zuerstellen, ziehen Sie das Javascript »FrameByFrameSVG.jsx« in den Illustrator.

P Das Skript fragt Sie nun, nach der Anzahl der Bilder pro Sekunde. Geben Sie »1« ein.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Geben Sie die Anzahl der Bilder pro Sekunde an, hier »1«.

ø Wenn das Skript fertig ist, bekommen Sie eine entsprechende Rückmeldung. Oder wenn etwas nicht geklappt hat, eine Fehlermeldung mit der Beschreibung des Problems. 

Q Am gleichen Speicherort wie die Originaldatei finden Sie die durch nummierten Einzelbilder als SVG-Dateien.

R Auch finden Sie dort als Ergebnis die SVG-Animation, deren Endung auf »_anim.svg« endet.

Tutorial, Anleitung, Von Null auf …, Aus den Elementen von Zeichenflächen eine SVG-Animation direkt aus Adobe Illustrator erstellen mithilfe des Javascript FrameByFrameSVG.jsx
Sie erhalten die Einzelbilder als SVG-Dateien und die Animation mit der Endung »_anim.svg«.

ø Um die SVG-Animation anzuschauen, öffnen oder ziehen Sie diese mit/in Ihren Webbrowser. 

MAC: Bitte verwenden Sie dafür Safari nur unter macOS 11, da sonst die SVG-Animation fehlerhaft wiedergegeben wird. Andere Webbrowser wie Firefox, Chrome, Opera und Vivaldi funktionieren ab macOS 10.14.6 ohne Probleme.

ENDE


HILFE: Wenn Sie eine Funktion in Illustrator benötigen, jedoch nicht selbst programmieren, dann sprechen Sie mich an. Ich übernehme gerne kleine Aufträge: Zum Kontaktformular.
 

Jetzt sind Sie gefragt!

FAQ: Klicken Sie auf den Link »Kontakt«, wenn Sie eine Anregungen, Ergänzungen oder einen Fehler gefunden haben.

Obacht Klicken Sie auf den Link »Newsletter«, wenn Sie wollen gerne auf dem Laufenden bleiben?

OK Klicken Sie auf den Link »Spende«, wenn Sie die Website mit einer kleinen Zuwendung unterstützen möchten.