How To Self-Learn To Start Programming In Adobe Illustrator?

I just want to warn you that this series of posts is not for experienced programmers and not even for programmers in general. I understand that this sounds extremely defiant, given the IT theme of the resource, and yet let me explain.

As an audience, I see ordinary designers who would like to start programming in the Adobe environment, but for some reason (because of the fear of the unknown, lack of confidence in their capabilities or lack of knowledge of the language) cannot take the first steps in this direction. I see my modest task in helping them to understand that “not the gods are burning pots” and anyone who is sufficiently motivated can learn how to write working program code. It is possible that some of them will be so enthusiastic about this game that they decide to become real developers. What code is not joking?

This post will show you how to create your own unique tool in Adobe Illustrator through writing a small program in JavaScript, which will not only reduce your time but also improve interaction with this wonderful graphical editor. First, I will formulate the task, then I will show the code that solves it and, further, I will tell you in detail about how it was created. JavaScript basics, the features of the Illustrator object model, or various editors for writing/debugging code will not be discussed here. You can find this information yourself if you wish. The main thing, in my opinion, is an understanding of the basic principles of writing programs, which is the main focus of this article. If you are ready to jump a little above your head, welcome to the cut!

Adobe Illustrator has a Clipping Mask tool that works with clipping masks. Clipping Mask contains three commands: Make, Release and Edit Mask. The first creates a mask, the second – parses, the third – allows editing. We are interested in the second command, which breaks the Clipping Mask object into the contour and the contents of the mask. Very often it is necessary not only to disassemble the mask but also to get rid of the contour of the mask itself, leaving only the contents. The regular Release Clipping Mask team does not do this, so after applying it, you need to perform three more steps:

1. Remove the selection from objects
2. Select only the outline of the mask
3. Delete mask outline

If this sequential operation has to be performed quite often throughout the day, then the question arises: is it not possible to somehow reduce the number of these actions to get the same result? And the point here is not at all in laziness but in the absence of the necessary tool. Now imagine for a second that you have such a tool.

Here you are briefly distracted from work and immersed in thoughts about how it would be great if in the arsenal of Adobe Illustrator there was such a team as Expand Clipping Mask, which performed all these actions for you. Cool idea! You need to write to Adobe technical support, you think. Next thought: what if they have already written about it many times? And if someday and maybe they add such a tool, then what do you need from this? This team is needed here and now!

And here comes the moment of truth – you can write the script yourself!

See the Pen Adobe Illustator Programming Part 1 by Mr Bons (@Sanchous) on CodePen.0

• Such a small code will help solve this problem. Instead of several, already rather annoying actions, you only need to do one thing — run the Expand Clipping Mask script. Now you have a handy tool for working with masks, also made with your own hands.

Of course, here I am a little cunning. First, the script was not written by you, and secondly – it is not as universal as we would like. However, if you are interested in how it works, and most importantly, how to learn to write such programs yourself, then I will be happy to tell you about it in order and with detailed comments.

To begin with, any script (script/program/JavaScript code) consists of several basic code blocks: declarations (initialization) of variables, basic checks (conditions) and, let’s say, the “program engine” – a code that implements the main working functionality the script. Of course, this division is very conditional, as in the functional part there are also checks, but the structural principle is as follows. Naturally, the larger the program, the more difficult it will be to divide it into similar blocks. But in our case, it is possible. Lines 8 through 16 are the script engine, the remaining lines are variable declarations and various basic checks with their processing. If you calculate, it turns out that the number of rows of the block of checks is more than the number of rows of the function block. Are these checks really important?

Why do we need checks?

Serious programmers will understand me, but it will be useful for novice developers to learn about it. Checks are needed in order to ensure the normal operation of the functional part of the program. If you do not write them, then an error when executing the script will lead to a software failure. And this is not good.

• Of course, the serious comrades mentioned above use the try/catch construct for such purposes, but I decided that the usual if/else would be a concise and more understandable construct. Especially for beginner scriptwriters.

Consider in detail what these lines do. The first line is responsible for the fact that even if the script is not run from Adobe Illustrator, it will be executed exactly in it. Accordingly, if you run the script from Illustrator, this line can be omitted.

#target illustrator

Next, it checks for open documents in Adobe Illustrator at the time of the script launch. It is necessary to read these lines as follows: if (if) in an application (app) the number of documents (documents.length) is greater than zero (> 0), then the code contained in {...} should be executed. Otherwise (else), display the message (alert) ‘No open documents!’ and complete the script.

See the Pen Programming In Adobe Illustrator Code 2 by Mr Bons (@Sanchous) on CodePen.0

The following code block checks for a selection in a document.

See the Pen Programming In Adobe Illustrator Code 3 by Mr Bons (@Sanchous) on CodePen.0

It should be noted that if in the previous examples we used reserved names (such as app or documents), here we use the variable sel, which we defined ourselves in lines 3 and 4.

var doc = app.activeDocument;
var sel = doc.selection;

where the doc is the link to the active Illustrator document, and sel is the link to the selected object/objects in the active document.

A link (or reference) is a pointer to a specific object. Of course, I am well aware that the completely innocuous Russian word “pointer” is capable of introducing into a stupor any person who is not familiar with OOP (object-oriented programming). But take my word for it, everything is not as difficult as it seems.

• References are stored in variables and used to refer to objects. In the doc variable, we save (assign it a value using the assignment operator =) a pointer to the active document (activeDocument) of the application (app), and in the sel variable, we save a pointer to the selection (selection) in the active document (activeDocument) of the application (app). Just to not write again the app. InactiveDocument, we use instead of the variable doc, in which this code is already contained. That’s why the link will look like sel = doc.selection. I hope I clearly explained.

Thus, in this condition if (sel.length> 0) it is checked whether there are selected objects in the active document, and if not, the message is displayed: ‘There are no selected objects!’

The following lines check the veracity, sorry for the pun, just two conditions. The first that the selected object is a group (GroupItem) and (&&) is the second that this group is really a clipping mask (the clipped property of this object is true).

See the Pen Programming In Adobe Illustrator Code 4 by Mr Bons (@Sanchous) on CodePen.0

Here we need a little explanation.

• What is a mask object? This is a group, but not normal. A normal group is a collection of various objects that is subordinate to, say, the “main” or “parent” object. As for the mask object, it is also a group, but unlike the usual one, it consists of two parts – the contour of the mask and its contents. So, to determine from the script that in front of you is a regular group or mask group, its property is clipped. If the value of the clipped property is  (false), then this is a normal group, if (true), then this is a clipping group.

Inquiring minds will notice that instead of the variable sel, which we defined earlier, the construct sel [0] is used. This is explained by the fact that the selection, from the point of view of the script, is a collection (collection) of elements, and not a specific object (even if only one object is selected). And to check the type (typename) of this object for compliance with the type of the selected collection element, the sel [0] construction is used, which refers to the first [0] the element of the collection, that is, in our case, the selected group.

As a result, if the selected object is both a group and a mask, then the following code is executed, otherwise, the message is displayed: ‘The selection is not a mask object!’

How was the main code created?

In this part of the article, I will try not just to comment on how the code works, but to describe the process of its creation. If not the whole process, then at least some key points. Let’s start!

Previously described three steps that must be performed to solve the problem of “sorting out” the Clipping Mask and then removing the mask outline. One more action will be added to them (the Release command), from which our algorithm will begin. I will repeat them here to refresh the context.

1. Run the command Release Clipping Mask
2. Remove the selection from objects
3. Select only the outline of the mask
4. Delete mask outline

If we implement this sequence of actions strictly according to the list, then the first two points can be easily solved by calling the executeMenuCommand () method. But then, on the third point, we will face an unsolvable problem. How to get a link to the mask outline, if after the first action (Release Clipping Mask) there is no longer any mask, but there is only a set of selected objects? And he is already structurally not the same as before performing this operation.

In general, the logic suggests that you first need to create a link (reference) to the object of the mask contour. Thinking over what is so unique about the contour of the mask compared to the usual contour, we find the clipping property of the class PathItem. Now we just have to loop through all the objects of the mask group and find the PathItem with the property clipping = true. This will be the desired circuit. As a result of executing this code, we will get a reference to the mask outline object and save it in the variable clipPath.

See the Pen Programming In Adobe Illustrator Code 5 by Mr Bons (@Sanchous) on CodePen.0

What’s next? Let’s go back to the algorithm and write the code for point 1. This line executes the Release Clipping Mask command, but not through the user interface, but from the script. Yes, that simple!

app.executeMenuCommand('releaseMask');

We skip points 2 and 3 (because we already have the selection of the mask outline, or rather the link to the clipPath object) and immediately go to step 4. Here we call the remove () method of the clipPath object. This method removes the mask outline.

clipPath.remove();

On this, in fact, for now. Thanks for attention!

I hope you now understand that it is not as difficult to start programming in Adobe Illustrator as it seems at first glance.

Of course, the resulting script is far from perfect. It does not work with masks whose outlines are represented by CompoundPath, CompoundShape, or TextFrame objects. How to modify the script so that it becomes a truly valuable tool, read in the second part.