В этом разделе я буду разбирать ExtendScript.
Многие путают экспрешены со скриптингом. Так вот, знайте: скрипты в AE называются ExtendScript и пишутся в программе, которая прилагается вместе с пакетом Аdobe - ExtendScript ToolKit.
ExtendScript используется для написания программ на разных языках для Аdobe продуктов. В данном случае мы будем писать программы для AE на языке JavaScript также и запускать скрипты сразу в АЕ. А под определением писать скрипты я подразумеваю - управление АЕ через код.
Прежде чем приступать к скриптингу нужно знать основные термины и понятия языка JavaScript. Открываем ExtendScript Toolkit и поехали.
Начнём с самого простого.
1)Чтобы закомментировать только одну строку, ставится символ // перед началом строчки.
Также есть второй вариант - /*ваш код*/. Здесь не обязательно писать всё в строчку. Всё что включено во внутрь - будет закомментированно.
2)Функия alert(); вызывает на экран сообщение при запуске скрипта
3) Знать и помнить обязательно: >(больше), <(меньше), >=(больше или равно), <=(меньше или равно), ==(равняется), ===(абсолютно равняется), !=(не равняется)
4) Чтобы создать переменную пишется var (подразумевается variable) и потом пишется название переменной. К примеру:
var firstVariable = "Hello world";
Только что мы создали переменную с именем firstVariable со значением Hello world. Чтобы вызвать скрипт в сплывающем окне нужно написать переменную в функции alert();
alert(firstVariable);
5) Массивы также имеют свою характеристику обозначения. Пишем следующие:
var myArray = new Array("Hello world", 123, "Banana");
alert(myArray);
Сначала мы создали переменную с названием myArray, и потом создали новый массив. Функция провозглашения массива Array();. Также есть второй способ провозглашения массива.
var myArray = new Array();
myArray[0] = "Hello World";
myArray[1] = 123;
myArray[2] = "Banana";
alert(myArray);
Повторюсь снова, что считать в массиве мы начинаем не с 1, а с 0. Тоесть 0, 1, 2, 3...
Я не буду пояснять основные понятия условий JavaScript. Вы можете почитать про них на этом сайте:http://www.w3schools.com/js/default.asp Самое важное, что надо знать и понимать это:
1)if(){}else{}
2)for(){}
3)while(){}
Второе, на что нужно обратить внимание это официальный справочник от Adobe по ExtendScript(для АЕ ). Тут его можно читать:http://blogs.adobe.com/aftereffects/files/2012/06/After-Effects-CS6-Scripting-Guide.pdf?file=2012/06/After-Effects-CS6-Scripting-Guide.pdf
Начнём с того, что тщательно изучим таблицу в справочнике на странице 11, которая изображает последовательность написания команд, которые приведут нас к нужному объекту в АЕ.
Забыл отметить, чтобы код запускался в АЕ нужно выбрать After Effects CS6 в ExtendScript в левом верхнем углу. А теперь создадим новую композицию и в ней создадим солид любого цвета.Я везде буду писать команду alert(), чтобы в АЕ появлялось всплывающие окно. Теперь чтобы прийти к этому солиду нам нужно проделать следующий путь:
alert(app.verison.);
app - вызывает весь проект в АЕ
version - выдаёт информацию о нашей версии АЕ
alert(app.project.);
project - вызывает открытый в АЕ проект
alert(app.project.numItems);
numItems - выдаёт информацию о количестве объектов в проекте
alert(app.project.selection);
selection - вызывает название объекта(ов),которые выделены.
alert(app.project.selection.length);
length - вызывает количество(длинну) объектов. В данном случае выдаст количество выделенных объектов.
Теперь начнём обращатся к объектам в проекте.
alert(app.project.item(1));
item() - метод, который выполняет функцию обозначения объекта
alert(app.project.item(1).layer(1));
layer() - вызывает созданный слой в нашей композиции. В данном случае появиться информация о созданном солиде.
alert(app.project.item(1).layer(3).index);
index - вызывает порядковый номер слоя
alert(app.project.item(1).layer(1).property("Transform").property("Scale").value);
property("Transform").property("Scale").value - таким же путём мы добираемся до Scale. Тоесть сначала у нас Transform идёт, потом Scale. Значение value показывает нам информацию объекта в численном виде.
Теперь попробуем подсоединиться к Render Queue и достать из неё информацию. На странице 160 мы найдём описание команды renderQueue. Напишем и запустим в АЕ следующие:
alert(app.project.renderQueue.rendering);
rendering - возвращаяет true, если в данный момент идёт рэндэр. Возвращает false, если рэндэр не запущен.
alert(app.project.renderQueue.numItems);
numItems - возвращяет количество объектов в очереди на рэндэр
Создайте любую композицию и поставьте её в очередь на рэндэр. Теперь мы попробуем достать информацию о опциях рэндэра объекта. Пишем
следующие:
alert(app.prject.renderQueue.items(1).outputModule(1).name);
items(1) - подсоединяется к первому объекту стоящему в очереди на рэндэр
outputModule(1) - подсоединяется к формату рэндэра композиции
name - выводит название формата рэндэра
alert(app.prject.renderQueue.items(1).outputModule(1).templates);
templates - выводит информацию о всех шаблонах формата рэндэра.
Теперь выведем информацию о самом файле:
alert(app.project.renderQueue.items(1).outputModule(1).file);
file - выдаёт информацию о месте сохранения файла
alert(app.project.renderQueue.items(1).outputModule(1).file.name);
name - выдаёт информацию о названии файла
Сделаем наш код более профессиональным и гибким:
var proj = app.project;
for( var i = 1, i <= proj.numItems, i++){
alert(proj.item(i).name);
}
Что мы здесь сделали так это мы провозгласили переменную proj, которая упрощает чтение кода. Если перевести наш код на русский язык, то это звучять будет так: переменная i равна 1. До тех пор пока i меньше количества объектов в проекте выводить сообщение с именем файла номер i. После увеличить i на единицу. Если в нашем проекте файлов будет 5, то наше всплывающие окно появится 5 раз, если 10 файлов в проекте, то 10 раз всплывёт окно. Удобно и динамично
alert(myList);
В данном случае мы вывели названия всех файлов через запятую. Если мы хотим вывести все названия файлов в столбик нужно лишь слегка модифицировать:
var proj = app.project.item(1);
var myList = new Array();
for(var i = 1; i <= proj.numLayers; i++){
myList[myList.length] = proj.layer(i).name;
}
var convertedList = myList.toString().replace(new RegExp(",", "g"), "\r" ); // - это строчка выглядит страшно, но самое главное работает.replace(new RegExp(",", "g"), "\r" ) - здесь говорится, чтобы все запятые заменить глобально на новую строку(\r - return)
alert(convertedList);
Всё чем мы занимались это вывод информации в виде сплывающего окна. Теперь попробуем изменять параметры в АЕ через скрипт. Но прежде нужно понять, что если мы хотим изменить ширину, то значит мы можем обращаться только к композиции. АЕ выдаст ошибку, если мы попытаемся изменить ширину музыкального файла или папки.
Создадим композицию и в ней создадим солид. Поехали:
app.project.item(1).width = 500; //- где файл номер один является композицией
В следующем примере мы передвинем курсор времени на 5 секунду.
app.project.item(1).time = 5;
Также можем легко поменять Blending mode любого файла. Для этого придётся заглянуть в справочник на страницу 42, где всё подробно написано.
app.project.item(1).layer(1).blendingMode = blendingMode.ADD;
Теперь изменим значение параметров в АЕ, к примеру изменим Scale:
app.project.item(1).layer(1).property("Transform").property("Scale").setValue([40,40]);
\\ - setValue() - это метод с помощью которого изменяется значение параметра. Также важно помнить, что для параметра Scale и Position провозглашается массив, по-этому появились квадратные скобки. А для параметра Opacity и Rotation массив не нужен. Это будет выглядеть так:
app.project.item(1).layer(1).property("Transform").property("Rotation").setValue(45);
Создадим новую папку в нашем проекте с помощъю ExtendScript:
app.project.items.addFolder("New Folder");
addFolder(); - метод, который создаёт новую папку (в скобках прописывается название папки).
Теперь создадим новую композицию с помощью ExtendScript. Для этого потребуется заглянуть в наш справочник, где на странице 82 подробно написано как создавать композицию:
И в последнюю очередь давайте создадим текстовой слой.
app.project.item(1).layers.addText("Banana")
addText("Banana") - метод, который задаёт текстовой слой. Также внутри метода прописывается исходный текст и тот же самый является названием слоя. Если нам нужно поменять некоторые опции текстового слоя, то нам нужно будет обращаться прямо к слою через property("Transform")...
Теперь напишем немножко сложнее скрипт, который создаст четыре композиции в АЕ.
var project = app.project;
var CompName = new Array("CompA", "CompB", "CompC", "CompD");
var CompWidth = new Array(50, 100, 150, 200);
var CompHeight = new Array(50, 100, 150, 200);
var CompPAR = 1;
var CompDuration = 10;
var CompFPS = 25;
var HowManyComps = CompName.length;
for(i = 0; i < HowManyComp; i++){
app.project.addComp(CompName[i], CompWidth[i], CompHeight[i], CompPAR, CompDuration, CompFPS);
}
alert("All done!");
В начале мы продекламировали 6 переменных, которые будут составлять необхъодимые параметры солида.
Затем создали переменную, которая сосчитает количество объектов в массиве переменной CompName.
После создали цикл for, который один за другим создаст солид с соответствующими параметрами. Обратите внимание, что у CompName[i], CompWidth[i], CompHeight[i] имеется индэкс, так как переменные являются массивами. У остальных параметров нету индэкса, они постоянные переменные.
P.S. Если действует на нервы всплывающие окно вызванное alert(), то можно иcпользовать writeLn(), которое выводит сообщение в инфо панэле (в правой стороне экрана).
Также, если вы обратили внимание на то, что при нажатии Ctrl+Z объекты убираются по очерёдно. Сделаем так чтобы при нажатии Ctrl+Z объекты убрались все сразу. Внесём некоторые дополнения в код:
var project = app.project;
var CompName = new Array("CompA", "CompB", "CompC", "CompD");
var CompWidth = new Array(50, 100, 150, 200);
var CompHeight = new Array(50, 100, 150, 200);
var CompPAR = 1;
var CompDuration = 10;
var CompFPS = 25;
var HowManyComps = CompName.length;
app.beginUndoGroup("Four Comps");
for(i = 0; i< HowManyComp; i++){
app.project.addComp(CompName[i], CompWidth[i], CompHeight[i], CompPAR, CompDuration, CompFPS);
}
app.endUndoGroup();
alert("All done!");
где app.beginUndoGroup("Four Comps"); и app.endUndoGroup(); - задают объекты, которые будут считаться целой группой.
Попробуем разобрать посложнее скрипт, который создаёт на всю ширину и длинну композиции солид в каждой новой композиции. Если не запутались, то приступим:
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [0, 0, 1];
var curItem, curItemLayers, compName, compWidth, compHeight, compPAR, compDUR, solidName, curSolid;
app.beginUndoGroup("Add Solids");
for (var i = 1: i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
curItemLayers = curItem.layers;
compName = curItem.name;
compWidth = curItem.width;
compHeight = curItem.height;
compPAR = curItem.pixelAspect;
compDUR = curItem.duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
}
}
app.endUndoGroup();
Теперь немножко поясню что здесь написано:
for (var i = 1, i <= itemTotal, i++ ){
curItem = proj.item(i); - вызывает все существующие объекты в проекте
if(curItem instanceof CompItem){} - проверяет по очерёдно каждый объект является ли он именно комозицией(Composition). Если да, то выполняет следующие действия
Прежде мы провозгласили переменные, теперь их будем задавать:
curItemLayers = curItem.layers;
compName = curItem.name;
compWidth = curItem.width;
compHeight = curItem.height;
compPAR = curItem.pixelAspect;
compDUR = curItem.duration;
solidName ="Blue solid in " + compName;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
В предыдущем скрипте есть некоторые нюансы из-за которых в будущем могут появиться проблемы. Сделаем скрипт грамотней, который будет всегда 100% работать.
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [0, 0, 1];
var curItem, curItemLayers, compName, compWidth, compHeight, compPAR, compDUR, solidName, curSolid, totalComps;
var itemArray = new Array();
app.beginUndoGroup("Add Solids");
for (var i = 1; i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length;
for(var c = 0; c < totalComps; c++){
curItemLayers = itemArray[c].layers;
compName = itemArray[c].name;
compWidth = itemArray[c].width;
compHeight = itemArray[c].height;
compPAR = itemArray[c].pixelAspect;
compDUR = itemArray[c].duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
}
app.endUndoGroup();
writeLn("All done");
Вот что я сделал:
for (var i = 1; i <= itemTotal; i++ ){- вывел все существующие объекты в проекте.
curItem = proj.item(i);
if(curItem instanceof CompItem){ - проверяет каждый объект является ли он композицией или нет. Если да, то объект заносится в массив.
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length; - сосчитал количество объектов в массиве.
for(var c = 0; c < totalComps; c++){
curItemLayers = itemArray[c].layers;
compName = itemArray[c].name;
compWidth = itemArray[c].width;
compHeight = itemArray[c].height;
compPAR = itemArray[c].pixelAspect;
compDUR = itemArray[c].duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
} - обращаемся через цыкл к каждому из параметров и задаём порядковый номер
Напишем простой скрипт, который проверяет является ли цвет синим, если да, то АЕ меняет цвет солида на красный.
var myLayer = app.project.item(1).layer(1).source.mainSource;
if (myLayer.color == "0,0,1") {
myLayer = [1,0,0]
}
Теперь усовершенствуем наш код, чтобы он проверял и модифицировал как нам угодно все сущестующие композиции:
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [1, 0, 0];
var curItem, curComp, curSolid, totalComps, totalLayers, curLayer, curLayerIndex, curLayerSource;
var itemArray = new Array();
app.beginUndoGroup("Add Solids");
for (var i = 1; i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length;
for(var c = 0; c < totalComps; c++){
curComp = myArray[c];
totalLayers = curComp.numLayers;
for(var k = 1; k <= totalLayers; k++){
curLayer = curComp.layer[k];
curLayerIndex = curLayer.index;
curLayerSource = curLayer.source.mainSource
if (curLayerSource instanceof SolidSource && curLayerSouce.color == "0,0,1") {
curLayerSouce.color = [1,0,0];
}
writeLn("Layer" + curLayerIndex.toString() + " updated");
}
app.endUndoGroup();
writeLn("All done");
Теперь поговорим о функциях
function(){}
Прежде чем задать функцию, нужно её прописать. После в любом месте кода мы вызываем функцию и она выполняет те действия, которые мы ей задали. Надеюсь понятно.
function checkProjectItems(itemType){
var typeOptions = new Array("Composition", "Folder", "Footage")
var proj, itemTotal, curItem, itemArray;
proj = app.project;
itemArray = new Array();
itemTotal = proj.numItems;
for(var i = 1; i <= itemTotal; i++){
curItem = proj.item(i);
if(curItem.typeName == itemType){
itemArray[itemArray.length] = curItem;
}
}
return itemArray;
}
alert(checkProjectItems("Composition"));
Из всего кода скорее всего Вам непонятно следующие:
var typeOptions = new Array("Composition", "Folder", "Footage")
и
curItem.typeName == itemType
Первая строка создаёт массив с точно совпадающим названием типа объектов в проекте. ( Footage - могут быть картинки, видео, музыка)
Вторая строка выдаёт все собранные объекты из проекта и проверяет с помощью выражения typeName является ли объект заданному типу объекта.typeName возвращяет написанный текст в код
Чтобы каждый раз нам этот код не писать, мы вызовем лишь название функции.
В этом уроке мы будем создавать GUI(Графический интэрфейс пользователя). Сделаем простые кнопки. Приступим:
var myWin = new Window("palette", "My Window", undefined);
myWin.orientation = "row";
var GroupOne = myWin.add("group", undefined, "GroupOne");
GroupOne.orientation = "column";
GroupOne.add("button", undefined, "Button");
GroupOne.add("checkbox", undefined, "CheckBox");
GroupOne.add("radiobutton", undefined, "RadioButton");
var dD = GroupOne.add("dropdownlist", undefined, ["one","two","three"]);
dD.selection = 0;
var pB = GroupOne.add("progressbar", undefined, "ProgressBar");
pB.value = 75;
myWin.center();
myWin.show();
Немножко поясню:
var myWin = new Window("palette", "My Window", undefined); - создаёт новое окно с названием My Window и с неопределённым размером. Если мы хотим задать размер, то прописываем в массиве четыре цифры [0, 0, 200, 400]. Где первые две - координаты крайней левой точки, а вторые две - координаты крайней правой точки.
myWin.orientation = "row"; - задаём ориентацию групп созданных в окне myWin
var GroupOne = myWin.add("group", undefined, "GroupOne");
GroupOne.orientation = "column";- главная группа в которой хранятся наши кнопки. Расположение вертикальное(по умолчанию горизонтальное)
GroupOne.add("button", undefined, "Button"); - создаёт обыкновенную кнопку без рамеров и с названием Button
GroupOne.add("checkbox", undefined, "CheckBox"); - создаём место для галочки
GroupOne.add("radiobutton", undefined, "RadioButton"); - создаем радио кнопку
var dD = GroupOne.add("dropdownlist", undefined, ["one","two","three"]);
dD.selection = 0; - создаём список из трёх объектов. Так как по умолчанию АЕ не выберет не один объект, нужно в ручную задать, в данном случае первый объект в массиве.
var pB = GroupOne.add("progressbar", undefined, "ProgressBar");
pB.value = 75; - создаёт горизонтальный прогресс бар. С начальным прогрессом в 75 %
Теперь создадим иного типа кнопки. Всё тоже самое только другие названия:
var myWin = new Window("palette", "My Window", undefined);
myWin.orientation = "row";
var GroupTwo = myWin.add("group", undefined, "GroupTwo");
GroupTwo.orientation = "column";
GroupTwo.add("iconbutton", undefined, "/Link_to_icon", "IconButton");
GroupTwo.add("image", undefined, "/Link_to_image");
GroupTwo.add("statictext", undefined, "My custom text");
GroupTwo.add("edittext", [0, 0, 20, 200], "My default text");
var slider= GroupTwo.add("slider", undefined, "Slider");
slider.selection = 75;
GroupTwo.add("scrollbar", undefined, "Scrollbar");
myWin.center();
myWin.show();
Здесь такой же принцип построения, только когда мы создаём iconbutton и image, то мы прописываем ещё ссылку картинки, которую хотим отображать.
Также пригодится заключать кнопки в одну группу к примеру отделять рамкой. Для этого есть панэль, которая обрамляет всё, что в ней находится.
var panelOne = myWin.add("panel", undefined, "My panel");
panelOne.add("button", undefined, "Button1");
panelOne.add("button", undefined, "Button2");
panelOne.add("button", undefined, "Button3");
panelOne.add("button", undefined, "Button4");
Создадим вкладки и в каждой вкалдке своя кнопка :
var myTab = myWin.add("tabbedpanel", undefined, "");
var tabContent1 = myTab.add("tab", undefined, "Tab1");
tabContent1.add("button", undefined, "Content button 1");
var tabContent2 = myTab.add("tab", undefined, "Tab2");
tabContent2.add("button", undefined, "Content button 2");
var tabContent3 = myTab.add("tab", undefined, "Tab3");
tabContent3.add("button", undefined, "Content button 3");
myTab без названия в скобках, потому что надпись появляется слева от вкладок, а это не красиво и занимает много места.
Сделаем простой раскрывающийся список(в будущем пригодится):
var groupThree = myWin.add("group", undefined, "GroupThree");
groupThree.orientation = "column";
var myMultiTree = groupThree.add("treeview",[0, 0, 200, 75], "MyTreeView");
var myTreeItems = myMultiTree.add("node", "Item 1");
var myNode = myTreeItems.add("node","Item 2");
myNode.add("node", "Item 3");
В предыдущих уроках мы создали панэль с кнопками. Если Вы обратили внимание, то открыв панэль в AE её нельзя прикрепить к интэрфейсу АЕ. Теперь сделаем так чтобы панэль можно было прицепить к АЕ и будет у нас уникальная панэль с кнопками. Только в начале сохраним код в определённой папке, чтобы у нас появилась конопка с названием файла скрипта в разделе Windows. Cсылка на сохранение: "...Scripts/ScriptUI Panels/MyScript.jsx"
Напишем код только для панэли, которая будет прикрепляться в АЕ.
{
function myScript(thisObj) {
function myScript_BuildUI(thisObj){
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My new window", undefined);
res = "group{}";
myPanel.grp = myPanel.add(res);
return myPanel;
}
var myScriptPanel = MyScript_BuildUI(thisObj);
if((myPanel != null) && (myScriptPanel instanceof Window)){
myScriptPanel.center();
myScriptPanel.show();
}
}
myScript(this);
}
Чтобы запустить скрипт заходим в раздел Windows и открываем MyScript.jsx
Пояснять этот скрипт я не буду, потому что это всего лишь тесто для начинки. А теперь приступим к начинке.
{
function myScript(thisObj) {
function myScript_BuildUI(thisObj){
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My new window", undefined);
res = "group{orientation:'row', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
groupOne: Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myButton: Button{text:'Button Visible Name'},\
myCheckbox: CheckBox{text:'My Checkbox'},\
myRadioButton: RadioButton {text:'My Radio Button'},\
myDropDownList: DropDownList {properties:{items:['DD Item 1', 'DD Item 2', 'DD Item 3']}},\
myProgressBar: Progressbar{text:'Progressbar'},\
}
groupTwo: Group {orientation:'column',\
myIconButton: IconButton{text:'IconButton', image:'Desktop/myImage.png'} ,\
myImage: Image{text:'Image', image:'Desktop/myImage.png'},\
myStaticText: StaticText{text:'Static text'},\
myEditText: EditText{text:'My edit text'},\
mySlider: Slider{text: 'my slider', value: 50},\
myScrollBar: ScrollBar{text:'My Scroll Bar', value: 60},\
},\
myPanel: Panel{text:'My panel', orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myPanelbutton1: Button{text:'Button 1 '},\
myPanelbutton2: Button{text:'Button 2 '},\
myPanelbutton3: Button{text:'Button 3 '},\
myPanelbutton4: Button{text:'Button 4 '},\
},\
myTabbedPanel: {type:'tabbedpanel', text:'my tabbed panel',\
myTab1: Panel{type: 'tab', text:'Tab1'
myTabContent: Button{text:'my tab button 1 '},\
},\
},\
myListBox: ListBox{properties:{items:['Item 1', 'Item2 ']}}
},\
groupThree: Group {orientation:'column',\
myListBox: ListBox{properties{items:['Item 1', 'Item 2', 'Item 3']}},\
myMultiColumnListBox: ListBox{properties{numberOfColumns:3, showHeaders: true, columnTitles:["Column Title 1", "Column Title 2", "Column Title 3"]}},\
},\
groupFour: Group {orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myTreeView: TreeView{properties{items:['Item 1', 'Item 2', 'Item 3']}},\
myMultiTreeView: TreeView{},\
},\
}";
myPanel.grp = myPanel.add(res);
// Пульт управления
myPanel.grp.groupOne.myDropDownList. selection = 2;
myPanel.grp.groupOne.myProgressBar.value = 75;
//Добавляем контэнт в ячейки таблицы
myPanel.grp.groupThree.myMultiColumnListBox.add("item", "First listbox item");
var mySecondListboxItem = myPanel.grp.groupThree.myMultiColumnListBox.add("item", "Second listbox item");
mySecondListboxItem[0].text = "Sub Item 1";
mySecondListboxItem[1].image = "~/Desktop/myImage.png";
mySecondListboxItem[1].text = "Icon text";
//Открывающийся список
var myFirstNode = myPanel.grp.groupFour.myMultiTreeView.add("node", "First node");
var mySecondNode = myFirstNode.add("node", "Second node");
// Настройка размеров панэли
myPanel.layout.layout(true);
myPanel.grp.minimumSize = myPanel.grp.size;
//Изменение размера панэли
myPanel.layout.resize();
myPanel.onResizing = myPanel.onResize = function(){this.layout.resize()};
return myPanel;
}
var myScriptPanel = MyScript_BuildUI(thisObj);
if((myPanel != null) && (myScriptPanel instanceof Window)){
myScriptPanel.center();
myScriptPanel.show();
}
}
myScript(this);
}
В переменную res, которая является содержанием нашей панэли мы заносим группы, которые расположены в ряд. А группы друг к другу расположены в колонку. И потом создаём кнопки, которые проходили в предыдущем уроке.
Cтрочки, которые выделены жёлтым цветом, служат нам как пультом для контролирования значений и дополнения необходимой информации.
alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\ - данная строка позволяет нам растягивать и сжимать нашу панэль. К тому же контэнт будет распологаться пропорционально. Также значение в массиве может быть top, bottom, right, left, center - которое делает значение статичным и ведёт себя соответственно выбраному значению
Многие путают экспрешены со скриптингом. Так вот, знайте: скрипты в AE называются ExtendScript и пишутся в программе, которая прилагается вместе с пакетом Аdobe - ExtendScript ToolKit.
ExtendScript используется для написания программ на разных языках для Аdobe продуктов. В данном случае мы будем писать программы для AE на языке JavaScript также и запускать скрипты сразу в АЕ. А под определением писать скрипты я подразумеваю - управление АЕ через код.
Прежде чем приступать к скриптингу нужно знать основные термины и понятия языка JavaScript. Открываем ExtendScript Toolkit и поехали.
Начнём с самого простого.
1)Чтобы закомментировать только одну строку, ставится символ // перед началом строчки.
Также есть второй вариант - /*ваш код*/. Здесь не обязательно писать всё в строчку. Всё что включено во внутрь - будет закомментированно.
2)Функия alert(); вызывает на экран сообщение при запуске скрипта
3) Знать и помнить обязательно: >(больше), <(меньше), >=(больше или равно), <=(меньше или равно), ==(равняется), ===(абсолютно равняется), !=(не равняется)
4) Чтобы создать переменную пишется var (подразумевается variable) и потом пишется название переменной. К примеру:
var firstVariable = "Hello world";
Только что мы создали переменную с именем firstVariable со значением Hello world. Чтобы вызвать скрипт в сплывающем окне нужно написать переменную в функции alert();
alert(firstVariable);
5) Массивы также имеют свою характеристику обозначения. Пишем следующие:
var myArray = new Array("Hello world", 123, "Banana");
alert(myArray);
Сначала мы создали переменную с названием myArray, и потом создали новый массив. Функция провозглашения массива Array();. Также есть второй способ провозглашения массива.
var myArray = new Array();
myArray[0] = "Hello World";
myArray[1] = 123;
myArray[2] = "Banana";
alert(myArray);
Повторюсь снова, что считать в массиве мы начинаем не с 1, а с 0. Тоесть 0, 1, 2, 3...
Я не буду пояснять основные понятия условий JavaScript. Вы можете почитать про них на этом сайте:http://www.w3schools.com/js/default.asp Самое важное, что надо знать и понимать это:
1)if(){}else{}
2)for(){}
3)while(){}
Второе, на что нужно обратить внимание это официальный справочник от Adobe по ExtendScript(для АЕ ). Тут его можно читать:http://blogs.adobe.com/aftereffects/files/2012/06/After-Effects-CS6-Scripting-Guide.pdf?file=2012/06/After-Effects-CS6-Scripting-Guide.pdf
Начнём с того, что тщательно изучим таблицу в справочнике на странице 11, которая изображает последовательность написания команд, которые приведут нас к нужному объекту в АЕ.
То есть, если нам необходимо соединиться с объектом layer, значит нужно проделать следующий путь: application - project - item - layer. Собственно по такой схеме надо будет каждый раз проделывать путь для нужного объекта.
Забыл отметить, чтобы код запускался в АЕ нужно выбрать After Effects CS6 в ExtendScript в левом верхнем углу. А теперь создадим новую композицию и в ней создадим солид любого цвета.Я везде буду писать команду alert(), чтобы в АЕ появлялось всплывающие окно. Теперь чтобы прийти к этому солиду нам нужно проделать следующий путь:
alert(app.verison.);
app - вызывает весь проект в АЕ
version - выдаёт информацию о нашей версии АЕ
alert(app.project.);
project - вызывает открытый в АЕ проект
alert(app.project.numItems);
numItems - выдаёт информацию о количестве объектов в проекте
alert(app.project.selection);
selection - вызывает название объекта(ов),которые выделены.
alert(app.project.selection.length);
length - вызывает количество(длинну) объектов. В данном случае выдаст количество выделенных объектов.
Теперь начнём обращатся к объектам в проекте.
alert(app.project.item(1));
item() - метод, который выполняет функцию обозначения объекта
alert(app.project.item(1).layer(1));
layer() - вызывает созданный слой в нашей композиции. В данном случае появиться информация о созданном солиде.
alert(app.project.item(1).layer(3).index);
index - вызывает порядковый номер слоя
alert(app.project.item(1).layer(1).property("Transform").property("Scale").value);
property("Transform").property("Scale").value - таким же путём мы добираемся до Scale. Тоесть сначала у нас Transform идёт, потом Scale. Значение value показывает нам информацию объекта в численном виде.
Теперь попробуем подсоединиться к Render Queue и достать из неё информацию. На странице 160 мы найдём описание команды renderQueue. Напишем и запустим в АЕ следующие:
alert(app.project.renderQueue.rendering);
rendering - возвращаяет true, если в данный момент идёт рэндэр. Возвращает false, если рэндэр не запущен.
alert(app.project.renderQueue.numItems);
numItems - возвращяет количество объектов в очереди на рэндэр
Создайте любую композицию и поставьте её в очередь на рэндэр. Теперь мы попробуем достать информацию о опциях рэндэра объекта. Пишем
следующие:
alert(app.prject.renderQueue.items(1).outputModule(1).name);
items(1) - подсоединяется к первому объекту стоящему в очереди на рэндэр
outputModule(1) - подсоединяется к формату рэндэра композиции
name - выводит название формата рэндэра
alert(app.prject.renderQueue.items(1).outputModule(1).templates);
templates - выводит информацию о всех шаблонах формата рэндэра.
Теперь выведем информацию о самом файле:
alert(app.project.renderQueue.items(1).outputModule(1).file);
file - выдаёт информацию о месте сохранения файла
alert(app.project.renderQueue.items(1).outputModule(1).file.name);
name - выдаёт информацию о названии файла
Сделаем наш код более профессиональным и гибким:
var proj = app.project;
for( var i = 1, i <= proj.numItems, i++){
alert(proj.item(i).name);
}
Что мы здесь сделали так это мы провозгласили переменную proj, которая упрощает чтение кода. Если перевести наш код на русский язык, то это звучять будет так: переменная i равна 1. До тех пор пока i меньше количества объектов в проекте выводить сообщение с именем файла номер i. После увеличить i на единицу. Если в нашем проекте файлов будет 5, то наше всплывающие окно появится 5 раз, если 10 файлов в проекте, то 10 раз всплывёт окно. Удобно и динамично
Важно: В массивах Javascript отсчёт начинается с 0, а отсчёт в АЕ с 1. По-этому мы прописали функцию for() c 1. Если бы прописали с 0, то скрипт бы не работал.
for( var i = 1, i <= myComp.numItems, i++){
Также можем обратиться и вывести определённые параметры значения, к примеру Scale:
var proj = app.project;
var myComp = proj.item(1);
for( var i = 1, i <= myComp.numItems, i++){
alert(myComp.item(i).property("Transform").property("Scale").value);
}
Рассмотрим такую ситуацию. Нам нужно отрендерить 100 файлов и каждому файлу необходимо выбрать формат сохранения и место сохрарения.Но ситуация не простая - у нас два Out Out Module. Найдётся кекс, который будет всё это делать вручную, но мы поступим иначе.
var proj = app.project;
var myRQ = proj.renderQueue;
var numOM, oldName;
var newPath = "~/Desktop/";
for( var i = 1, i <= myRQ.numItems, i++){
var newPath = "~/Desktop/";
for( var i = 1, i <= myRQ.numItems, i++){
oldName = myRQ.item(i).outputModule(1).file.name; //- вызывает название документа
myRQ.item(i).outputModule(1).file = new File(newPath + oldName);// - задаёт документу название и место сохранения файла
myRQ.item(i).outputModule(1).file = new File(newPath + oldName);// - задаёт документу название и место сохранения файла
}
numOM = myRQ.item(i).outputModule.length; //- вызывает количество outputModule. Если количество больше чем 1, то выполняется следующие:
if(numOM >1){
oldName = myRQ.item(i).outputModule(o).file.name
for(var o = 2; o <= numOM; o++){
myRQ.item(i).outputModule(o).file = new File(newPath + oldName);
}
}
Рассмотрим следующую ситуацию, что если у нас в проекте 100 файлов и нам нужно вывести в виде сплывающего окна все названия файлов. Выходит нам нужно будет 100 раз закрывать всплывающее окно. Но мы поступим иначе и выведим все файлы на экран в одном окне. Здесь понадобиться вспомнить свойства массивов.
var proj = app.project.item(1);
var myList = new Array();
for(var i = 1, i <= proj.numLayers, i++){
myList[myList.length] = proj.layer(i).name;
}
numOM = myRQ.item(i).outputModule.length; //- вызывает количество outputModule. Если количество больше чем 1, то выполняется следующие:
if(numOM >1){
oldName = myRQ.item(i).outputModule(o).file.name
for(var o = 2; o <= numOM; o++){
myRQ.item(i).outputModule(o).file = new File(newPath + oldName);
}
}
Рассмотрим следующую ситуацию, что если у нас в проекте 100 файлов и нам нужно вывести в виде сплывающего окна все названия файлов. Выходит нам нужно будет 100 раз закрывать всплывающее окно. Но мы поступим иначе и выведим все файлы на экран в одном окне. Здесь понадобиться вспомнить свойства массивов.
var proj = app.project.item(1);
var myList = new Array();
for(var i = 1, i <= proj.numLayers, i++){
myList[myList.length] = proj.layer(i).name;
}
alert(myList);
В данном случае мы вывели названия всех файлов через запятую. Если мы хотим вывести все названия файлов в столбик нужно лишь слегка модифицировать:
var proj = app.project.item(1);
var myList = new Array();
for(var i = 1; i <= proj.numLayers; i++){
myList[myList.length] = proj.layer(i).name;
}
var convertedList = myList.toString().replace(new RegExp(",", "g"), "\r" ); // - это строчка выглядит страшно, но самое главное работает.replace(new RegExp(",", "g"), "\r" ) - здесь говорится, чтобы все запятые заменить глобально на новую строку(\r - return)
alert(convertedList);
Всё чем мы занимались это вывод информации в виде сплывающего окна. Теперь попробуем изменять параметры в АЕ через скрипт. Но прежде нужно понять, что если мы хотим изменить ширину, то значит мы можем обращаться только к композиции. АЕ выдаст ошибку, если мы попытаемся изменить ширину музыкального файла или папки.
Создадим композицию и в ней создадим солид. Поехали:
app.project.item(1).width = 500; //- где файл номер один является композицией
В следующем примере мы передвинем курсор времени на 5 секунду.
app.project.item(1).time = 5;
Также можем легко поменять Blending mode любого файла. Для этого придётся заглянуть в справочник на страницу 42, где всё подробно написано.
app.project.item(1).layer(1).blendingMode = blendingMode.ADD;
Теперь изменим значение параметров в АЕ, к примеру изменим Scale:
app.project.item(1).layer(1).property("Transform").property("Scale").setValue([40,40]);
\\ - setValue() - это метод с помощью которого изменяется значение параметра. Также важно помнить, что для параметра Scale и Position провозглашается массив, по-этому появились квадратные скобки. А для параметра Opacity и Rotation массив не нужен. Это будет выглядеть так:
app.project.item(1).layer(1).property("Transform").property("Rotation").setValue(45);
Создадим новую папку в нашем проекте с помощъю ExtendScript:
app.project.items.addFolder("New Folder");
addFolder(); - метод, который создаёт новую папку (в скобках прописывается название папки).
Теперь создадим новую композицию с помощью ExtendScript. Для этого потребуется заглянуть в наш справочник, где на странице 82 подробно написано как создавать композицию:
Остаётся следовать интрукции.
app.project.items.addComp("My Composition", 200, 400, 1.0, 20, 25) ;
На странице 95 в справочнике подробно написано как создавать разные объекты( к примеру солид, камера, шейп, свет и т.д.)
Сейчас создадим Нулевой Объект(Null Object). Подробней на странице 97.
app.project.item(1).layers.addNull();
addNull() - метод создания Нулевого Объекта. В скобках прописывается время существования объекта в секундах. К примеру:
app.project.item(1).layers.addNull(8);
Чтобы создать простой солид, то нам придётся потрудиться. Необходимо задать множество параметров, которые характерезуют солид.
app.project.item(1).layers.addSolid([0.9, 0.9, 0.9], "New Solid", 640, 360, 1.0, 5);
Цвет задаётся в формате RGB, где шкала от 0.0 до 1.0. (значение берётся в квадратные скобки - [R, G, B])
И в последнюю очередь давайте создадим текстовой слой.
addText("Banana") - метод, который задаёт текстовой слой. Также внутри метода прописывается исходный текст и тот же самый является названием слоя. Если нам нужно поменять некоторые опции текстового слоя, то нам нужно будет обращаться прямо к слою через property("Transform")...
Теперь напишем немножко сложнее скрипт, который создаст четыре композиции в АЕ.
var project = app.project;
var CompName = new Array("CompA", "CompB", "CompC", "CompD");
var CompWidth = new Array(50, 100, 150, 200);
var CompHeight = new Array(50, 100, 150, 200);
var CompPAR = 1;
var CompDuration = 10;
var CompFPS = 25;
var HowManyComps = CompName.length;
for(i = 0; i < HowManyComp; i++){
app.project.addComp(CompName[i], CompWidth[i], CompHeight[i], CompPAR, CompDuration, CompFPS);
}
alert("All done!");
В начале мы продекламировали 6 переменных, которые будут составлять необхъодимые параметры солида.
Затем создали переменную, которая сосчитает количество объектов в массиве переменной CompName.
После создали цикл for, который один за другим создаст солид с соответствующими параметрами. Обратите внимание, что у CompName[i], CompWidth[i], CompHeight[i] имеется индэкс, так как переменные являются массивами. У остальных параметров нету индэкса, они постоянные переменные.
P.S. Если действует на нервы всплывающие окно вызванное alert(), то можно иcпользовать writeLn(), которое выводит сообщение в инфо панэле (в правой стороне экрана).
Также, если вы обратили внимание на то, что при нажатии Ctrl+Z объекты убираются по очерёдно. Сделаем так чтобы при нажатии Ctrl+Z объекты убрались все сразу. Внесём некоторые дополнения в код:
var project = app.project;
var CompName = new Array("CompA", "CompB", "CompC", "CompD");
var CompWidth = new Array(50, 100, 150, 200);
var CompHeight = new Array(50, 100, 150, 200);
var CompPAR = 1;
var CompDuration = 10;
var CompFPS = 25;
var HowManyComps = CompName.length;
app.beginUndoGroup("Four Comps");
for(i = 0; i< HowManyComp; i++){
app.project.addComp(CompName[i], CompWidth[i], CompHeight[i], CompPAR, CompDuration, CompFPS);
}
app.endUndoGroup();
alert("All done!");
где app.beginUndoGroup("Four Comps"); и app.endUndoGroup(); - задают объекты, которые будут считаться целой группой.
Попробуем разобрать посложнее скрипт, который создаёт на всю ширину и длинну композиции солид в каждой новой композиции. Если не запутались, то приступим:
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [0, 0, 1];
var curItem, curItemLayers, compName, compWidth, compHeight, compPAR, compDUR, solidName, curSolid;
app.beginUndoGroup("Add Solids");
for (var i = 1: i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
curItemLayers = curItem.layers;
compName = curItem.name;
compWidth = curItem.width;
compHeight = curItem.height;
compPAR = curItem.pixelAspect;
compDUR = curItem.duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
}
}
app.endUndoGroup();
Теперь немножко поясню что здесь написано:
for (var i = 1, i <= itemTotal, i++ ){
curItem = proj.item(i); - вызывает все существующие объекты в проекте
if(curItem instanceof CompItem){} - проверяет по очерёдно каждый объект является ли он именно комозицией(Composition). Если да, то выполняет следующие действия
Прежде мы провозгласили переменные, теперь их будем задавать:
curItemLayers = curItem.layers;
compName = curItem.name;
compWidth = curItem.width;
compHeight = curItem.height;
compPAR = curItem.pixelAspect;
compDUR = curItem.duration;
solidName ="Blue solid in " + compName;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
В предыдущем скрипте есть некоторые нюансы из-за которых в будущем могут появиться проблемы. Сделаем скрипт грамотней, который будет всегда 100% работать.
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [0, 0, 1];
var curItem, curItemLayers, compName, compWidth, compHeight, compPAR, compDUR, solidName, curSolid, totalComps;
var itemArray = new Array();
app.beginUndoGroup("Add Solids");
for (var i = 1; i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length;
for(var c = 0; c < totalComps; c++){
curItemLayers = itemArray[c].layers;
compName = itemArray[c].name;
compWidth = itemArray[c].width;
compHeight = itemArray[c].height;
compPAR = itemArray[c].pixelAspect;
compDUR = itemArray[c].duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
}
app.endUndoGroup();
writeLn("All done");
Вот что я сделал:
for (var i = 1; i <= itemTotal; i++ ){- вывел все существующие объекты в проекте.
curItem = proj.item(i);
if(curItem instanceof CompItem){ - проверяет каждый объект является ли он композицией или нет. Если да, то объект заносится в массив.
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length; - сосчитал количество объектов в массиве.
for(var c = 0; c < totalComps; c++){
curItemLayers = itemArray[c].layers;
compName = itemArray[c].name;
compWidth = itemArray[c].width;
compHeight = itemArray[c].height;
compPAR = itemArray[c].pixelAspect;
compDUR = itemArray[c].duration;
solidName ="Blue solid in " + compName ;
curSolid = curItemLayers.addSolid(solidColor, compName, compWidth, compHeight, compPAR, compDUR);
writeLn(solidName + " created");
} - обращаемся через цыкл к каждому из параметров и задаём порядковый номер
Напишем простой скрипт, который проверяет является ли цвет синим, если да, то АЕ меняет цвет солида на красный.
var myLayer = app.project.item(1).layer(1).source.mainSource;
if (myLayer.color == "0,0,1") {
myLayer = [1,0,0]
}
Теперь усовершенствуем наш код, чтобы он проверял и модифицировал как нам угодно все сущестующие композиции:
var proj = app.project;
var itemTotal = proj.numItems;
var solidColor = [1, 0, 0];
var curItem, curComp, curSolid, totalComps, totalLayers, curLayer, curLayerIndex, curLayerSource;
var itemArray = new Array();
app.beginUndoGroup("Add Solids");
for (var i = 1; i <= itemTotal; i++ ){
curItem = proj.item(i);
if(curItem instanceof CompItem){
itemArray[itemArray.length] = curItem;
}
}
totalComps = itemArray.length;
for(var c = 0; c < totalComps; c++){
curComp = myArray[c];
totalLayers = curComp.numLayers;
for(var k = 1; k <= totalLayers; k++){
curLayer = curComp.layer[k];
curLayerIndex = curLayer.index;
curLayerSource = curLayer.source.mainSource
if (curLayerSource instanceof SolidSource && curLayerSouce.color == "0,0,1") {
curLayerSouce.color = [1,0,0];
}
writeLn("Layer" + curLayerIndex.toString() + " updated");
}
app.endUndoGroup();
writeLn("All done");
Теперь поговорим о функциях
function(){}
Прежде чем задать функцию, нужно её прописать. После в любом месте кода мы вызываем функцию и она выполняет те действия, которые мы ей задали. Надеюсь понятно.
function checkProjectItems(itemType){
var typeOptions = new Array("Composition", "Folder", "Footage")
var proj, itemTotal, curItem, itemArray;
proj = app.project;
itemArray = new Array();
itemTotal = proj.numItems;
for(var i = 1; i <= itemTotal; i++){
curItem = proj.item(i);
if(curItem.typeName == itemType){
itemArray[itemArray.length] = curItem;
}
}
return itemArray;
}
alert(checkProjectItems("Composition"));
Из всего кода скорее всего Вам непонятно следующие:
var typeOptions = new Array("Composition", "Folder", "Footage")
и
curItem.typeName == itemType
Первая строка создаёт массив с точно совпадающим названием типа объектов в проекте. ( Footage - могут быть картинки, видео, музыка)
Вторая строка выдаёт все собранные объекты из проекта и проверяет с помощью выражения typeName является ли объект заданному типу объекта.typeName возвращяет написанный текст в код
Чтобы каждый раз нам этот код не писать, мы вызовем лишь название функции.
В этом уроке мы будем создавать GUI(Графический интэрфейс пользователя). Сделаем простые кнопки. Приступим:
var myWin = new Window("palette", "My Window", undefined);
myWin.orientation = "row";
var GroupOne = myWin.add("group", undefined, "GroupOne");
GroupOne.orientation = "column";
GroupOne.add("button", undefined, "Button");
GroupOne.add("checkbox", undefined, "CheckBox");
GroupOne.add("radiobutton", undefined, "RadioButton");
var dD = GroupOne.add("dropdownlist", undefined, ["one","two","three"]);
dD.selection = 0;
var pB = GroupOne.add("progressbar", undefined, "ProgressBar");
pB.value = 75;
myWin.center();
myWin.show();
Немножко поясню:
var myWin = new Window("palette", "My Window", undefined); - создаёт новое окно с названием My Window и с неопределённым размером. Если мы хотим задать размер, то прописываем в массиве четыре цифры [0, 0, 200, 400]. Где первые две - координаты крайней левой точки, а вторые две - координаты крайней правой точки.
myWin.orientation = "row"; - задаём ориентацию групп созданных в окне myWin
var GroupOne = myWin.add("group", undefined, "GroupOne");
GroupOne.orientation = "column";- главная группа в которой хранятся наши кнопки. Расположение вертикальное(по умолчанию горизонтальное)
GroupOne.add("button", undefined, "Button"); - создаёт обыкновенную кнопку без рамеров и с названием Button
GroupOne.add("checkbox", undefined, "CheckBox"); - создаём место для галочки
GroupOne.add("radiobutton", undefined, "RadioButton"); - создаем радио кнопку
var dD = GroupOne.add("dropdownlist", undefined, ["one","two","three"]);
dD.selection = 0; - создаём список из трёх объектов. Так как по умолчанию АЕ не выберет не один объект, нужно в ручную задать, в данном случае первый объект в массиве.
var pB = GroupOne.add("progressbar", undefined, "ProgressBar");
pB.value = 75; - создаёт горизонтальный прогресс бар. С начальным прогрессом в 75 %
Теперь создадим иного типа кнопки. Всё тоже самое только другие названия:
var myWin = new Window("palette", "My Window", undefined);
myWin.orientation = "row";
var GroupTwo = myWin.add("group", undefined, "GroupTwo");
GroupTwo.orientation = "column";
GroupTwo.add("iconbutton", undefined, "/Link_to_icon", "IconButton");
GroupTwo.add("image", undefined, "/Link_to_image");
GroupTwo.add("statictext", undefined, "My custom text");
GroupTwo.add("edittext", [0, 0, 20, 200], "My default text");
var slider= GroupTwo.add("slider", undefined, "Slider");
slider.selection = 75;
GroupTwo.add("scrollbar", undefined, "Scrollbar");
myWin.center();
myWin.show();
Здесь такой же принцип построения, только когда мы создаём iconbutton и image, то мы прописываем ещё ссылку картинки, которую хотим отображать.
Также пригодится заключать кнопки в одну группу к примеру отделять рамкой. Для этого есть панэль, которая обрамляет всё, что в ней находится.
var panelOne = myWin.add("panel", undefined, "My panel");
panelOne.add("button", undefined, "Button1");
panelOne.add("button", undefined, "Button2");
panelOne.add("button", undefined, "Button3");
panelOne.add("button", undefined, "Button4");
Создадим вкладки и в каждой вкалдке своя кнопка :
var myTab = myWin.add("tabbedpanel", undefined, "");
var tabContent1 = myTab.add("tab", undefined, "Tab1");
tabContent1.add("button", undefined, "Content button 1");
var tabContent2 = myTab.add("tab", undefined, "Tab2");
tabContent2.add("button", undefined, "Content button 2");
var tabContent3 = myTab.add("tab", undefined, "Tab3");
tabContent3.add("button", undefined, "Content button 3");
myTab без названия в скобках, потому что надпись появляется слева от вкладок, а это не красиво и занимает много места.
Сделаем простой раскрывающийся список(в будущем пригодится):
var groupThree = myWin.add("group", undefined, "GroupThree");
groupThree.orientation = "column";
var myMultiTree = groupThree.add("treeview",[0, 0, 200, 75], "MyTreeView");
var myTreeItems = myMultiTree.add("node", "Item 1");
var myNode = myTreeItems.add("node","Item 2");
myNode.add("node", "Item 3");
В предыдущих уроках мы создали панэль с кнопками. Если Вы обратили внимание, то открыв панэль в AE её нельзя прикрепить к интэрфейсу АЕ. Теперь сделаем так чтобы панэль можно было прицепить к АЕ и будет у нас уникальная панэль с кнопками. Только в начале сохраним код в определённой папке, чтобы у нас появилась конопка с названием файла скрипта в разделе Windows. Cсылка на сохранение: "...Scripts/ScriptUI Panels/MyScript.jsx"
Напишем код только для панэли, которая будет прикрепляться в АЕ.
{
function myScript(thisObj) {
function myScript_BuildUI(thisObj){
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My new window", undefined);
res = "group{}";
myPanel.grp = myPanel.add(res);
return myPanel;
}
var myScriptPanel = MyScript_BuildUI(thisObj);
if((myPanel != null) && (myScriptPanel instanceof Window)){
myScriptPanel.center();
myScriptPanel.show();
}
}
myScript(this);
}
Чтобы запустить скрипт заходим в раздел Windows и открываем MyScript.jsx
Пояснять этот скрипт я не буду, потому что это всего лишь тесто для начинки. А теперь приступим к начинке.
{
function myScript(thisObj) {
function myScript_BuildUI(thisObj){
var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My new window", undefined);
res = "group{orientation:'row', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
groupOne: Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myButton: Button{text:'Button Visible Name'},\
myCheckbox: CheckBox{text:'My Checkbox'},\
myRadioButton: RadioButton {text:'My Radio Button'},\
myDropDownList: DropDownList {properties:{items:['DD Item 1', 'DD Item 2', 'DD Item 3']}},\
myProgressBar: Progressbar{text:'Progressbar'},\
}
groupTwo: Group {orientation:'column',\
myIconButton: IconButton{text:'IconButton', image:'Desktop/myImage.png'} ,\
myImage: Image{text:'Image', image:'Desktop/myImage.png'},\
myStaticText: StaticText{text:'Static text'},\
myEditText: EditText{text:'My edit text'},\
mySlider: Slider{text: 'my slider', value: 50},\
myScrollBar: ScrollBar{text:'My Scroll Bar', value: 60},\
},\
myPanel: Panel{text:'My panel', orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myPanelbutton1: Button{text:'Button 1 '},\
myPanelbutton2: Button{text:'Button 2 '},\
myPanelbutton3: Button{text:'Button 3 '},\
myPanelbutton4: Button{text:'Button 4 '},\
},\
myTabbedPanel: {type:'tabbedpanel', text:'my tabbed panel',\
myTab1: Panel{type: 'tab', text:'Tab1'
myTabContent: Button{text:'my tab button 1 '},\
},\
myTab2: Panel{type: 'tab', text:'Tab2',\
myTabContent: Button{text:'my tab button 2'},\
},\
myTab3: Panel{type: 'tab', text:'Tab3',\},\
myListBox: ListBox{properties:{items:['Item 1', 'Item2 ']}}
},\
groupThree: Group {orientation:'column',\
myListBox: ListBox{properties{items:['Item 1', 'Item 2', 'Item 3']}},\
myMultiColumnListBox: ListBox{properties{numberOfColumns:3, showHeaders: true, columnTitles:["Column Title 1", "Column Title 2", "Column Title 3"]}},\
},\
groupFour: Group {orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
myTreeView: TreeView{properties{items:['Item 1', 'Item 2', 'Item 3']}},\
myMultiTreeView: TreeView{},\
},\
}";
myPanel.grp = myPanel.add(res);
// Пульт управления
myPanel.grp.groupOne.myDropDownList. selection = 2;
myPanel.grp.groupOne.myProgressBar.value = 75;
//Добавляем контэнт в ячейки таблицы
myPanel.grp.groupThree.myMultiColumnListBox.add("item", "First listbox item");
var mySecondListboxItem = myPanel.grp.groupThree.myMultiColumnListBox.add("item", "Second listbox item");
mySecondListboxItem[0].text = "Sub Item 1";
mySecondListboxItem[1].image = "~/Desktop/myImage.png";
mySecondListboxItem[1].text = "Icon text";
//Открывающийся список
var myFirstNode = myPanel.grp.groupFour.myMultiTreeView.add("node", "First node");
var mySecondNode = myFirstNode.add("node", "Second node");
// Настройка размеров панэли
myPanel.layout.layout(true);
myPanel.grp.minimumSize = myPanel.grp.size;
//Изменение размера панэли
myPanel.layout.resize();
myPanel.onResizing = myPanel.onResize = function(){this.layout.resize()};
return myPanel;
}
var myScriptPanel = MyScript_BuildUI(thisObj);
if((myPanel != null) && (myScriptPanel instanceof Window)){
myScriptPanel.center();
myScriptPanel.show();
}
}
myScript(this);
}
В переменную res, которая является содержанием нашей панэли мы заносим группы, которые расположены в ряд. А группы друг к другу расположены в колонку. И потом создаём кнопки, которые проходили в предыдущем уроке.
Cтрочки, которые выделены жёлтым цветом, служат нам как пультом для контролирования значений и дополнения необходимой информации.
alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\ - данная строка позволяет нам растягивать и сжимать нашу панэль. К тому же контэнт будет распологаться пропорционально. Также значение в массиве может быть top, bottom, right, left, center - которое делает значение статичным и ведёт себя соответственно выбраному значению
No comments:
Post a Comment