Dieter Petereit 22. Januar 2013

AI -> Canvas: HTML5 Canvas direkt aus Adobe Illustrator bestücken

Mike Swanson war über 11 Jahre bei Microsoft beschäftigt und hat dort neben vielen anderen Produkten ein Plugin für Adobe Illustrator erschaffen, das wie guter Wein ist. Je älter es wird, desto besser wird es. Vor knapp zwei Jahren, als Swanson die erste Version von AI -> Canvas noch für seinen damaligen Arbeitgeber veröffentlichte, war Canvas zwar schon ein Thema, aber wer nutzte das Element bereits produktiv? Heutzutage sieht die Sache anders aus. In jeder Hinsicht…

AI -> Canvas jetzt auch für CS6 verfügbar

Was hat sich geändert? Swanson ist nicht mehr bei Microsoft, sondern stolzer Besitzer eines eigenen Startup. Microsoft hat das Plugin zwar weiterhin im Angebot, pflegt es aber naheliegenderweise (?) nicht mehr. Mit Version CS6 kann AI -> Canvas nicht mehr genutzt werden. Jedenfalls gilt das für die Version, die auf den offiziellen Microsoft-Seiten zum Download bereit steht.

Swanson sah sich persönlich in der Verantwortung, seinem Plugin ein Leben nach Microsoft und auch nach CS5 zu ermöglichen. Sprachs, ging hin und beschäftigte sich mit den neuen Erfordernissen des SDK zu CS6. Auf seinem privaten Blog stellt er seither die aktuelle Version 1.1 des Plugins zur freien Verfügung. Das kann nicht mehr und nicht weniger als die Version 1, die weiterhin über Microsoft kostenlos bezogen werden kann. Aber, und das ist der entscheidende Unterschied. Es läuft auf den Plattformen Windows 7 und Windows 8, Mac OS X v10.7 (Lion) und v10.8 (Mountain Lion) und bedient sowohl die 32-, wie auch die 64-bit Ausgabe des of Illustrator CS6.

Die Installation ist simpel. Aus dem einzelnen Zip-File, welches alle Versionen enthält, sucht man sich die passende heraus und speichert sie je nach Plattform hier:

  • Ai2Canvas64.aip (\Program Files\Adobe\ Adobe Illustrator CS6 (64 Bit) Plug-ins)
  • Ai2Canvas32.aip (\Program Files (x86)\Adobe\Adobe Illustrator CS6\Plug-ins)
  • Ai2CanvasMac.aip (/Applications/Adobe Illustrator CS6/Plug-ins)

Zu beachten ist, dass Version 1.1 die CS6 voraussetzt. Alle Creative Suites darunter, namentlich CS3, 4 und 5, können mit der bisherigen Version des Plugin kooperieren.

Was kann AI -> Canvas?

Das Canvas-Element ist nicht viel mehr als ein Container für komplexere grafische Anwendungen und Abläufe. Programmiert werden Abläufe und Darstellungen unter Verwendung von JavaScript. Damit dürfte schon deutlich werden, dass Grafiker, Illustratoren und Zeichner eher nicht die Beschicker dieses Elements sind, zumindest nicht ohne programmierende Mittelsmänner.

Mit AI -> Canvas kann jeder Illustrator-Aficionado funktionierende grafische Anwendungen für das Canvas-Element schreiben, ohne auch nur eine Zeile JavaScript schreiben zu müssen; was im Übrigen in der Regel schon an den entsprechenden Fähigkeiten scheitern dürfte. AI -> Canvas kümmert sich über einen simplen Export aus Adobe Illustrator heraus um die Erstellung des gesamten erforderlichen Codes nebst sämtlicher, etwa erforderlicher zusätzlicher Dateien. Vektordarstellungen, die das Canvas-Element nicht korrekt umsetzen könnte, wandelt das Plugin automatisch in Rastergrafik um und verlinkt die entsprechenden Bilddateien an den korrekten Stellen. Sogar Animationen, wie Übergänge, Bewegungen, Easings, Verläufe und einiges mehr können direkt aus der vertrauten Illustrator-Umgebung heraus erzeugt werden.


Beispiele für unmodifizierte Export-Ergebnisse

Wie bereits eingangs erwähnt, ist AI -> Canvas, völlig software-atypisch, wie guter Wein. Zum Zeitpunkt seiner Entstehung war die Funktionalität schon beeindruckend, wenn auch von geringem praktischen Nutzwert. Die zunehmenden HTML5-Fähigkeiten gängiger Browser machen das zwei Jahre alte Plugin immer wertvoller. Und Swansons Update für die aktuelle Illustrator-Version könnte AI -> Canvas zu einem späten Durchbruch verhelfen.

Nein, für Inkscape steht das Plugin nicht zur Verfügung…

Links zum Beitrag:

  • Illustrator to HTML5 Canvas Plug-In Updated for CS6 – Mike Swanson’s Blog
  • AI -> Canvas V1 – Mix-Labs
  • Kurze Video-Einführung zum Plugin – Mix-Labs

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Hallo
    Ich habe die Datei in folgendes Verzeichnis gelegt,
    \Program Files\Adobe\ Adobe Illustrator CS6\Zusatzmodule\erweiterungen \Ai2Canvas64.aip
    kann aber das Modul nicht öffnen.
    Ich müßte es ja im AI unter Fenster, zusammen mit Kuhler finden.
    Für einen Rat wäre ich dankbar.
    Beste Grüße
    Peter Garcia

  2. Sehr interessanter Artikel, vielen Dank dafür!

    Hört sich für mich wie das Pedant zu Adobe Edge Animate an, dieses stellt die Animationen nicht als Canvas bereit sondern arbeitet mit reine html5,css3 und javascript ausgabe.

    Man könnte es also als super Ergänzung zu EA nutzen an den Stellen wo dieses versagt.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück