Scripting Tutorials for Beginners

Participant ,
Nov 29, 2019 Nov 29, 2019

Copy link to clipboard

Copied

Hey Guys,

 

I am starting to learn Javascript to code some tools for both Illustrator and After Effects (I primarly work in AE).

 

There appears to be a wealth of information and tutorials for scripting in After Effects but very little for Illustrator.

 

Does anyone know of any good sites dedicated to learning scripting for Illustrator?

 

I have googled and searched Youtube but there isn't too much out there.

 

I do have the Scripting PDFs from Adobe but ideally I am looking for some Illustrator specific tutorials.

 

Thanks for your time.

 

Liam

TOPICS
Scripting

Views

951

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 29, 2019 Nov 29, 2019

Copy link to clipboard

Copied

I don't think there are any web sites dedicated to illustrator scripting. I remember seeing a intro tutorial video on youtube but I couldn't find it. 

All you need is the official references and this forum, if you have questions just post them here and we'll do our best to help you get started.

 

if you're into books, there are 2 of them. They're super old but so is the Scripting DOM, they're still relevant.

 

https://www.amazon.com/Adobe-Illustrator-Scripting-Visual-AppleScript/dp/0321112512

 

https://www.amazon.com/dp/0764524550/ref=rdr_ext_tmb

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

Hey Carlos, there is ai.aenhancers, which is online Read-The-Docs format for Illustrator's DOM with a bunch of examples. I prefer this to PDFs and books because it's so easily searchable

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

Hello, I made an online code editor with typescript support for all Adobe apps (shows the app DOM as you type):

GrizzledGlitteringBubblefish-size_restricted

 

Also has a curated list of resources per app in the drawer, though there's a lot more for AE than AI:

 

BothKeyIberianchiffchaff-size_restricted

 

My personal favorite for both AE and AI scripting is aeenhancers, here's the Illustrator version with a lot of examples per method/property.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

ah I totally forgot about your editor, it's wonderful. But I was thinking more of a Tutorial type of resource were users with no programing skills could learn how to start with Illustrtor scripting.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

True! The editor is completely lacking there, though it'd make finding possibilities a lot easier rather than digging through documentation. The aenhancers site does have a few beginner-friendly sections and examples, though to be honest I had a hard time learning scripting until I just spent a few months in general web dev and Javascript. Once you get the basics of Javascript all together (where there's no shortage of beginner friendly material) it isn't hard to jump into Adobe scripting, but it's understandable if curious artists aren't willing to make that big of a leap.

 

I've kept this in mind and would like to start doing beginner friendly tutorials eventually

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 02, 2019 Dec 02, 2019

Copy link to clipboard

Copied

Hey Guys
 
Thank you for your replies.
 
Carlos these books look great. I’ll look into getting a copy of Adobe Scripting: Your visual blueprint for scripting in Photoshop and Illustrator as it mentions Javascript.
 
Yeah I imagined there would of been some videos on YouTube as I assumed Illustrator is more widely used that After Effects.
 
Invensable. This code editor looks great. Thanks for sharing. I had no idea this existed either. I have been setting up VSC but struggling to get the typescript definitions to work.
 
You mention this…
 
I had a hard time learning scripting until I just spent a few months in general web dev and Javascript. Once you get the basics of Javascript all together (where there's no shortage of beginner friendly material) it isn't hard to jump into Adobe scripting, but it's understandable if curious artists aren't willing to make that big of a leap.
 
That is currently where I am at. I’m just not quote making sense. Which resources did you learn for Javascript? w3 schools?
 
Thanks for your time.
 
Liam

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 03, 2019 Dec 03, 2019

Copy link to clipboard

Copied

Hi Liam,

 

Here's the typescript setup that I use along with my tsconfig file. I generally write all my code in a "host.ts" file, then have my setup compile to host.jsx on every save. For this to work, you'll need to run "npm install types-for-adobe", and then press Control + Shift + B to run "tsc: watch - [path to tsconfig]" in VSCode. I also have a dedicated sandbox for Typescript here, though the repo is old and I think pravdomil's original repo is deprecated (which is why I use @Ten-A's fork). If you have trouble setting it up feel free to post here.

 

I took a codecademy class for HTML/CSS, then went on to their Javascript class but fell out of it because it was overwhelming and, in retrospect, really poorly designed since they try teaching you JQuery and React just a lesson or two after you learn what a function is. I don't remember the exact path after this beyond trying scripts out here in the forum, asking a lot of questions, taking a couple cheap Udemy classes, and Silly-V turning me onto Vue, the Javascript framework, which is fantastic and very beginner friendly -- it really abstracted a lot of the tedium from Javascript away and let me produce things quicker which let me practice more often, and then I became comfortable enough to branch into pure vanilla DOM manipulation and ES6+ methods like arrow functions.

 

I understand the value of books but feel that my learning style isn't always compatible with the heavy literary one -- sometimes it feels like the burden to entry is very high and the abstraction needed to understand all the between-the-lines implications of taking text from the page to it working on screen isn't straightforward, so I've always opted for browser-based code editor resources, like codecademy, the Odin Project, and Scrimba, and take a bunch of Udemy classes for anything that interests me (like Vue).

 

If it helps I have a panel version of that code editor which lets you write, run, save and open scripts while still inside Illustrator. The ZXP to install is located in the ./archive folder. It's based on Monaco so it shares the same foundation as VSCode itself does, though it was a quick project and there are graphical errors with the console drawer that I never addressed (plus syntax highlighting -- I couldn't get it to work alongside typescript definitions, so I chose typescript over syntax highlighting).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 04, 2019 Dec 04, 2019

Copy link to clipboard

Copied

LATEST

Hello again Liam, I made a quick CLI generator to set up Typescript if you're interested:

 

UnconsciousCommonHarvestmouse-size_restricted

 

It does all the heavy lifting for you, and is very quick when the types are already installed at some point in the parent:

 

CrispShorttermGermanspitz-size_restricted

 

To install:

 

npm install -g scriptopia

 

Then to use, any of the following:

 

// With CLI prompts:
scriptopia

// With shorthands, no prompt:
scriptopia ai test.jsx
scriptopia ilst helloworld.ts
scriptopia illustrator myScript.js

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines