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).
(Update:) 27.04.2022 – Für den Artikel »Geheimschrift Fernschreibcode« habe ich eine SVG-Animation erstellt, die eine schematische Darstellung des Clavier de Baudot in Aktion zeigt. Jede der fünf Tasten (gedrückt oder ungedrückt) erzeugt ein Bit des Codes. Die CCITT-1-Symbole erscheinen oben rechts in der Halterung für die Textvorlage. Geschrieben wird das Wort »Code«.
(Hilfe:) Sie wollen oder können nicht selbst programmieren? Sie brauchen kurzfristig ein Javascript für eine Automatisierung für ein aktuelles Problem in Illustrator oder einem anderen Adobe Programm? Dann helfe ich Ihnen gerne als JavaScript-Entwickler mit meiner jahrzehntelang Programiererfahrung.
Schreiben Sie mir einfach und unverbindlich per Kontaktformular.
Inhaltsverzeichnis
- Kurzanleitung zum Javascript
- Javascript um eine SVG-Animation aus Illustrator zu erstellen – missing feature #8
- Kapitel 1: So verwenden Sie »FramebyFrameSVG.jsx«
- Kapitel 2: Von Zeichenflächen zur SVG-Animation
Kurzanleitung zum Javascript
(A:) Mit den fünf Zeichenflächen, die jeweils ein Einzelbild zeigen, klicken Sie auf das Javascript »FrameByFrameSVG«.
(B:) Das Javascript fragt Sie dann nach der Anzahl der Sekunden, die vergehen muss, bis das nächste Bild gezeigt wird. Danach wird die SVG-Animation auf den Schreibtisch gespeichert.
zu der oben gezeigten SVG-Animation.
Javascript um eine SVG-Animation aus Illustrator zu erstellen – missing feature #8
Download des Javascripts
RECHT Für den privaten Gebrauch ist das Javascript kostenlos. Wollen Sie es kommerziell einsetzen, dann benötigen Sie eine Lizenz, die auf Ihre Bedürfnisse speziell angepasst werden kann. Fragen Sie mich unverbindlich per Kontaktformular. Copyright: Die Javascripts sind urheberrechtlich geschützt. Enthaftungserklärung: Der Einsatz der folgenden Javascripts geschieht auf eigene Gefahr. Der Autor übernimmt keine Haftung für eventuell auftretende Schäden.
(Hilfe:) Probleme beim Download?
(Download:) Rechts können Sie den Link zum Download des Javascripts »FrameByFrame.jsx« (28,5 MByte) Version 1.7 anfordern. Enthalten im ZIP-Archiv (Entpacker für macOS oder Windows) sind das Javascript, Beispieldateien und das Handbuch in Deutsch und Englisch als PDF-Datei.
(Rechtlich:) Mit Klick auf den Button »Send Download Link« stimmen Sie den Datenschutzbestimmungen dieser Website zu.
Wenn Sie an dem unverschlüsselten Quellcode interessiert sind, dann schreiben Sie mir bitte via Kontaktformular.
- zu Kapitel 1: So verwenden Sie »FramebyFrameSVG.jsx«
- zu Kapitel 2: Von Zeichenflächen zur SVG-Animation
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.
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.
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.
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.
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.
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.
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.
L Gehen Sie zurück ins Fenster »Ebenen«.
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.
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.
P Das Skript fragt Sie nun, nach der Anzahl der Bilder pro Sekunde. Geben Sie »1« ein.
ø 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.
ø 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 zum Automatisieren in Illustrator benötigen, jedoch nicht selbst programmieren, dann sprechen Sie mich an. Ich übernehme gerne kleine Aufträge: Zum Kontaktformular.