Highlighted

JavaScript beginner for Illustrator

Community Beginner ,
May 14, 2020

Copy link to clipboard

Copied

Hello, everyone. I am a graphic designer, and the company I work for uses Illustrator for production work. Things are very slow right now, so I am learning JavaScript to automate some actions in Illustrator.

 

We send proofs as PDF files to customers, and they show the customer's art placed on an illustration of our product, with all the relevant information, such as the client's name, representative's name, email address, etc.

 

What I would like to do is to use JavaScript to enter the order's information and put it into the appropriate text boxes on the artboard.

 

I am brand new to programming, but have started at the very beginning with some online courses from Code Academy, but I do have a good amount of experience with actions in Illustrator.

 

My question is how can I point the JavaScript to specific text boxes on the Illustrator page? I suppose I can put each box on its own layer and identify it like that, or select each text box and give it a label in the notes section of Illustrator. Can anyone recommend a learning resource for JavaScript specifically working with Illustrator? I checked out the scripting guides, but I don't have enough experience yet to make sense of them.

 

Thanks!

TOPICS
Import and export, Scripting, Type

Views

1.3K

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

JavaScript beginner for Illustrator

Community Beginner ,
May 14, 2020

Copy link to clipboard

Copied

Hello, everyone. I am a graphic designer, and the company I work for uses Illustrator for production work. Things are very slow right now, so I am learning JavaScript to automate some actions in Illustrator.

 

We send proofs as PDF files to customers, and they show the customer's art placed on an illustration of our product, with all the relevant information, such as the client's name, representative's name, email address, etc.

 

What I would like to do is to use JavaScript to enter the order's information and put it into the appropriate text boxes on the artboard.

 

I am brand new to programming, but have started at the very beginning with some online courses from Code Academy, but I do have a good amount of experience with actions in Illustrator.

 

My question is how can I point the JavaScript to specific text boxes on the Illustrator page? I suppose I can put each box on its own layer and identify it like that, or select each text box and give it a label in the notes section of Illustrator. Can anyone recommend a learning resource for JavaScript specifically working with Illustrator? I checked out the scripting guides, but I don't have enough experience yet to make sense of them.

 

Thanks!

TOPICS
Import and export, Scripting, Type

Views

1.3K

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
May 14, 2020 1
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

Ooooh. You're in for such a fun and rewarding and... at times infuriating.. but mostly rewarding, journey! Welcome aboard!

 

First step is to familiarize yourself with the Illustrator Javascript DOM (Document Object Model). A good place to start is the "container objects" as I call them. These are the objects that can hold other objects. Examples: Document, Layer, Group. 

illustrator_dom.png

 

Let's start as basic as possible. Open a new document and create a single text frame on the artboard. Then open up your IDE or debugger of choice. Paste this into your IDE:

 

 

function test()
{
    var myText = app.activeDocument.layers[0].textFrames[0];
    alert(myText.contents);
}
test();

 

Wow! what a mess. What's going on there? Let's break down that big long string of nonsense. You can usually do this by separating the line at each "."

 

app  -  activeDocument  -  layers[0]  -  textFrames[0]

app is the application constant

activeDocument refers to the currently active document object.

    (You could access items at this scope if you'd like, but trust me, it's a better idea to get used to utilizing narrower scopes.)

layers[0] is the first layer object in the active document.

    (in javascript, counting starts at 0, so when you want the first layer, you reference it by 0, and when you want the 3rd layer, you reference it by 2, etc.)

textFrames[0] as you might guess, refers to the first text frame in the first layer of the document.

    (textFrame is the generic name for any kind of text object in illustrator.. regular point text, area text, text on a path, etc.)

 

Ok. So we've broken down the components of that variable declaration. So, at the end of that line, the myText variable will hold the text object you created in your document. Now, in the next line, we're using the alert() method to display the "contents" of the myText variable. The contents property of a textFrame is the text that is displayed in illustrator.

    (To view the other properties of the textFrame object.. or... any other object in the dom, look here.)

Try to make some edits to my snippet above. Use the documentation in the link above to change or view some other properties of the textFrame object. Maybe use the textFrames.add() method to create and edit some new text frames. 

 

By all means come on back with any questions you come up with. But the best thing you can do is to experiment and have fun!

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
Reply
Loading...
May 14, 2020 4
Community Beginner ,
May 14, 2020

Copy link to clipboard

Copied

Thanks so much! This is very encouraging. When I first started this, I was just looking for already made scripts to run, but then I thought I would go ahead and learn it. Then I thought I may as well start at the very beginning to build a solid foundation and started with the very basics of arithmetic. The order of operations and stuff like that, and then moved into programming basics. Hopefully this will make learning JavaScript (and maybe Python) a little easier to assimilate. I have my notes together. If you would like to take a look and pass them around, you are welcome to.

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
Reply
Loading...
May 14, 2020 0
Contributor ,
May 14, 2020

Copy link to clipboard

Copied

Hi Radiosity,

 

You are right to look for a good javascript tutorial. Many tutorials are geared towards web development which can be confusing. Also one important gotcha is that the "javascript" you want for scripting Illustrator is actually "ExtendScript", which is like javascript 3 from 1999. Javascript itself has evolved considerably, while ExtendScript has not, so a modern javscript tutorial will cover many things that won't work for us.

 

Here is one way to target text items (or any page items): Create text in the normal way and change its name in the Layers palette to something your script will use to target it (I've used "job-number" in my example).

 

Example script snippet:

 

 

var jobNumber = 'ABC1234';
var jobNumberTextFrame = app.activeDocument.textFrames.getByName("job-number");
if (jobNumberTextFrame != undefined) {
    jobNumberTextFrame.contents = jobNumber;
}​

 

 

Screen Shot 2020-05-15 at 8.31.14 am.png

 

Regards,

Mark

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
Reply
Loading...
May 14, 2020 1
Community Beginner ,
May 14, 2020

Copy link to clipboard

Copied

Thanks, Mark! I will give this a try tomorrow at work. I noticed during my adventures in learning this is that it is way too easy to get in over my head, and a couple of times I had to pull back and just work on the basics.

I did have a question, though. It seems the commonly accepted way of writing JavaScript out is like this:

let A = 5;

let B = 10;

if (A<B) {

console.log(A + " is less than " + B)

}

 

I'm wondering why the curly braces are not on the same line as the code block:

if (A<B)

{console.log(A + " is less than " + B)}

 

Thanks again, and I will keep you posted on my progress!

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
Reply
Loading...
May 14, 2020 0
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

curly braces psition is a matter of taste, it won't affect how the program works.

 

but it's important to follow "best practices" for readability. It helps a lot to have them separate, the reason is that it clearly shows the beginning and end of a block. 

 

It's also very important to indent everything in between the braces

 

Lastly, Let and Console.log won't work in illustrator. You can keep using it while you learn and practice generic JS with modern tutorials but you'll have to change to Var and $.writeln when you're ready to use it in illustrator.

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
Reply
Loading...
May 14, 2020 2
Contributor ,
May 14, 2020

Copy link to clipboard

Copied

Both ways work, as far as I know. It is matter of personal style, or convention.

 

In my experience it is common to start a code block with nothing after the opening brace, and finish the code block with nothing before the closing brace on the line. The code block is the code that appears inside the braces.

 

In ExtendScript, it would look like this:

var a = 5;
var b = 10;
if (a < b) {
   $.writeln(a + " is less than " + b);
}

 

Note that I have changed 'let' to 'var' because ExtendScript doesn't support constant declaration. I've changed A and B to a and b because it is a convention (at least my convention) to use capitalization for enumerated constants or class names. And I've changed console.log to $.writeln which is the ExtendScript equivalent function.

 

(I see Carlos has answered while I was typing this. Oh well, the repeat info can't hurt. 🙂

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
Reply
Loading...
May 14, 2020 1
Contributor ,
May 14, 2020

Copy link to clipboard

Copied

On another note, what's your script editing setup? I ask because in Visual Studio Code (my editor of choice), the alt-shift-F format function works pretty well and tidies up "badly" formatted code instantly.

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
Reply
Loading...
May 14, 2020 1
Adobe Community Professional ,
May 15, 2020

Copy link to clipboard

Copied

Lots of great points here. It is an unfortunate truth for those looking to get started with illustrator automation that ExtendScript hasn't kept up with JavaScript. Watching modern JavaScript tutorials is essentially useless because, at this point, these are two separate languages with similar syntax.

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
Reply
Loading...
May 15, 2020 3
Community Beginner ,
May 15, 2020

Copy link to clipboard

Copied

I just downloaded Visual Studio Code as a scripting environment, since it was so highly recommended. I am going to continue with my online JavaScript, keeping in mind that it is only closely related to ExtendScript. I really do want to get a grasp of the fundamental basics of programming first. I am thinking that might make it easier when small differences in how JavaScript and ExtendScript (and eventually, Python perhaps) show up.

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
Reply
Loading...
May 15, 2020 1
Contributor ,
May 15, 2020

Copy link to clipboard

Copied

Sounds good! Try a google search of "using visual studio code with extendscript". You'll want the ExtendScript Debugger extension for Visual Studio Code.

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
Reply
Loading...
May 15, 2020 1
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Hi Radiosity,

I undestand you, I work for production artwork as well, the best you can do is make your script according your process

Actually, i do same process all day so I have some script that make everything for me,

Be carefull, Dont learn everything at the same time, prioritize Javascript 

any concern during your Learning just let me know!! 🙂

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
Reply
Loading...
May 20, 2020 1
Adobe Community Professional ,
May 22, 2020

Copy link to clipboard

Copied

this is a good point about not trying to learn everything at once. it's going to be very difficult to keep track of the new concepts being learned if someone is constantly switching between different languages, syntaxes and formatting norms. That's difficult for veteran programmers. Best to stick to one thing at a time.

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
Reply
Loading...
May 22, 2020 0
New Here ,
Jun 08, 2020

Copy link to clipboard

Copied

Hello, everyone! This is me, the original poster. There were some problems with my account, so I created a new one. This is now me!

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
Reply
Loading...
Jun 08, 2020 0
Adobe Community Professional ,
Jun 08, 2020

Copy link to clipboard

Copied

Welcome back. I was worried we all scared you away. 😜

 

By all means come on back any time with any questions you have. Let us know what you're working on and we'll find a way to help. 😃

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
Reply
Loading...
Jun 08, 2020 0