[English version]

Установка Extendscript Toolkit

Для написания скриптов можно использовать любой текстовый редактор – даже блокнот. Я лично использую оригинальный Extendscript Toolkit (далее ESTK). Он имеет необходимый мне функционал и встроенный отладчик скриптов – что очень упрощает разработку. Хотя многие профессиональные программисты очень его не любят. По их словам он ну очень кривой и неудобный :)

Если Вы планируете разрабатывать скрипты в ESTK – то нужно убедиться, что он установлен. Под Windows обычно его можно найти в меню “Пуск” и в директории “C:\Program Files (x86)\Adobe” .

Если инструментарий ESTK не установлен – то проще всего его установить через Adobe Creative Cloud. Но на одном из компьютеров была проблема с такой установкой (в списке приложений просто не было ESTK). Если Вы столкнетесь с такой проблемой – ссылку на загрузку можно найти на официальном сайте тут:
https://helpx.adobe.com/ru/creative-cloud/kb/creative-cloud-apps-download.html

Для полного счастья нужно убедиться, что есть возможность подключиться Adobe Illustrator. Он должен появиться выпадающем списке, как на картинке.

01-подключение к Illustrator

Документация

Документация по особенностям работы JavaScript под Illustrator находится тут:
https://www.adobe.com/devnet/illustrator/scripting.html

Вам понадобятся в основном следующая информация:

  1. Adobe Illustrator CC 2017 Scripting Guide – основы работы со скриптами в Иллюстраторе. Если английский знаете хорошо – читать обязательно
  2. Adobe Illustrator CC 2017 Reference: JavaScript – список почти всех объектов и методов , которые есть в Illustrator с описанием и большим количеством примеров
  3. Object Model Viewer, расположенный в меню Help ESTK. Во многом содержимое пересекается с Reference, но некоторые моменты отличаются. Что-то есть только здесь, что-то только в Reference
  4. JavaScript Tools Guide – тоже расположен в меню Help ESTK. Описывает среду разработки. Много интересных нюансов. Среди прочего также рассказывает как правильно работать с файловой системой, создавать пользовательские окна с кнопками и подключать внешние DLL.
  5. Форум разработчиков скриптов на сайте Adobe:
    https://forums.adobe.com/community/illustrator/illustrator_scripting
  6. Примеры скриптов в ESTK, показывают как работать с пользовательским интерфейсом. На моем компьютере они расположены тут:
    C:\Program Files (x86)\Adobe\Adobe ExtendScript Toolkit CC\SDK\Samples\javascript
  7. Примеры скриптов в Illustrator, показывают как работать с некоторыми типами объектов.
    C:\Program Files\Adobe\Adobe Illustrator CC 2018\Scripting\Sample Scripts\JavaScript

Если на ваш взгляд, есть что-то еще полезное – пишите, будем вместе дополнять список )

Первый скрипт Hello World

Если дальнейший материал вызывает трудности – рекомендую ознакомиться с этим учебником: https://learn.javascript.ru/

В нем доступным языком описаны основы программирования на JavaScript. Обычно этот язык используется для написания программ на сайтах, которые запускаются внутри браузера пользователя (Chrome, Firefox и т.д.). Вас в первую очередь интересуют разделы “Введение” и “Основы JavaScript”.

Следующий пример взят из официального Scripting Guide – он хорош для начала.

По традициям программирования создадим скрипт, который пишет Hello World на экране.

//Hello World!
var myDocument = app.documents.add();
//Создаем новый текстовый фрейм и присваиваем его переменной "myTextFrame"
var myTextFrame = myDocument.textFrames.add();
// Устанавливаем текст во фрейме и его местоположение
myTextFrame.position = [200,200];
myTextFrame.contents = "Hello World!"

Запустить скрипт можно напрямую из ESTK (например, кнопкой F5 или через меню Debug) или сохранить скрипт под отдельным именем и запустить уже напрямую, открыв в Illustrator (например, через CTRL+F12 или меню File->Scripts->Other scripts).

Давайте теперь напишем скрипт, который поменяет цвет и размер у имеющейся надписи.

Как происходит написание скриптов:

  1. Необходимо разбить задачу на подзадачи. Детализировать настолько мелко, чтобы каждый шаг можно было описать одной строчкой
  2. Написать саму программу.

Давайте попробуем:

  1. Найти текущий документ
  2. Найти надпись в нем
  3. Изменить параметры надписи

Чтобы понимать как это сделать – давайте начнем с иерархии объектов в Иллюстраторе.

02-иерархия объектов

На самом верхнем уровне у нас находится Application . Обратиться к нему можно через объект по имени app

Все открытые документы хранятся в массиве app.documents

К активному документу можно обратиться через через app.activeDocument

Внутри документа есть слои. Находятся они в массиве Document.layers

Внутри слоев могут быть объекты разных видов – слои, группы, пути, меши и т.д. Объекты группируются по типам в массивы с соответствующими названиями. Текстовые объекты находятся в массиве textFrames

Информацию об остальных типах объектов – ждите в последующих уроках. Самостоятельно изучить их можно, почитав Reference и Scripting Guide.

Каждый объект (путь, текст и т.д.) находится в массиве соответствующего типа , а также в массиве pageItems.

Нумерация элементов в массивах начинается с 0.

Теперь поехали

//обратиться к текущему документу
var docRef = app.activeDocument;
//Обратиться к надписи в документе
var myTextFrame = docRef.textFrames[0];
//Изменить цвет

Чтобы разобраться как поменять цвет символов – давайте обратимся к Reference (раздел TextFrameItem). Если просмотреть все свойства и объекты – то с первого взгляда непонятно, где искать цвет текста. В таких случаях можно либо спросить у кого-то, либо найти готовый пример на форуме Adobe, либо просмотреть подробно все свойства в Reference , относящиеся к объекту TextFrameItem. Если зайти в тип объекта TextRange, то там можно увидеть свойство characterAttributes, внутри которого есть свойство fillColor. И если дальше пощелкать по ссылкам, можно увидеть как создавать RGBColor. В результате код у нас станет следующим:

//обратиться к текущему документу
var docRef = app.activeDocument;
//Обратиться к надписи в документе
var myTextFrame = docRef.textFrames[0];
//Получить основной textRange
var range = myTextFrame.textRange;
//Обратиться к атрибутам символов
var attributes = range.characterAttributes;
//Создать новый цвет
var newRGBColor = new RGBColor();
newRGBColor.red = 255;
newRGBColor.green = 255;
newRGBColor.blue = 0;
//Изменить цвет
attributes.fillColor = newRGBColor;

Запустите скрипт и посмотрите, что получится в результате.

А теперь маленькое домашнее задание: напишите скрипт, которые будет создавать три надписи с различным текстом, в разных местах, разного цвета и с разным размером шрифта.

Если у вас появились вопросы или трудности при выполнении, пишите к нам в группу в ВК – https://vk.com/topic-159903417_38752810. По возможности постараемся помочь всем.