2. Специальная часть

В данном разделе будет более подробно разобрана основная задача проекта, его структура, его алгоритм работы, а также написанные функции, которые участвуют при работе.

2.1. Постановка задачи

Требовалось изучить среду Adobe After Effects для создания проекта-макета, который будет упрощать и ускорять дальнейшую работу как дизайнера-профессионала, так и начинающего пользователя. Освоить встроенный язык программирования, создать проект-макет, написать необходимые функции (экспрешены) для создания различной анимации графических объектов.

Поставленная задача - создание проекта-макета видеоролика на тему инфографики (это графический способ подачи информации, данных и знаний) в программе Adobe After Effects CS5, который будет ускорять и упрощать работу при создании видеопродуктов. После, на основе уже имеющегося проекта разработать дополнительный проект о Санкт-Петербургском колледже информационных технологий.

2.1.1 . Назначение задачи

Данный проект-макет предназначен как для видеодизайнера, так и для обычного пользователя для создания видеороликов на тему инфографики в сжатые сроки. От человека, начинающего работу с проектом, требуется: 64-битная операционная система, программа Adobe After Effects CS5 и базовые знания этой программной среды.

2.1.2. Технико-математическое описание задачи

Проект-макет содержит в себе большое количество экспрешенов. Каждый из них написан для отдельно взятого слоя. Получение числового результата, для присвоения к параметру, происходит путем вычисления персональным компьютером математических функций, выраженных через встроенный язык программирования в Adobe After Effects.

Каждое вычисление происходит в реальном времени при просчете изображения. Как только нажимается кнопка Play (быстрая клавиша [SPACE]) на панели Preview или RAM Preview (быстрая клавиша [NUM 0]), начинается просчет процессором или графическими ядрами CUDA (только на видеокартах NVidia) анимации (ключи анимации, экспрешены ) и эффектов, примененных к слоям и композициям. Присвоение нового значения к параметру происходит по-кадрово.

2.1.3. Требования к программе

В данном разделе будут рассмотрены программные, аппаратные и технические требования к проекту-макету, а также требования к пользователю для дальнейшей работы.

2.1.3.1. Требования к функциональным характеристикам

Данный проект-макет был разработан специально для ускорения и автоматизирования работы видеодизайнеров и обычных пользователей.

Все внутрипроектные вычисления связаны со слоями, композициями и эффектам, примененными к ним.

Вычисления могут быть основаны, как на анимации, созданной вручную, так и на базе выражений (экспрешенов).

2.1.3.2. Требования к программным и аппаратным средствам

Рекомендуемые требования для персонального компьютера:

Процессор: Pentium Dual Core 2.1 МГц

ОЗУ: 2 ГБ

Операционная система: 64 бит

Видеокарта: 256 МБайт

Программа: Adobe After Effects CS5

2.1.3.3. Требования к пользователю

Базовые знания программы Adobe After Effects CS5. Достаточно пройти базовый курс, пользуясь встроенным справочником-помощником (Help), или обратиться на официальный сайт http://www.adobe.com/support/aftereffects

Рис. 9. Окно интерактивной помощи Adobe After Effects

2.2. Описание алгоритма

В данном разделе будет описан алгоритм работы проекта, последовательность его выполнения, будут представлены экспрешены, написаные для эффектов, слоев и композиций.

Работа начинается с запуска программы Adobe After Effects CS5 и загрузки проекта-макета.

Рис. 10. Открытие проекта

После его открытия на экране появляется основная композиция (main), в которой собраны все необходимые слои и подкомпозиции. Во вьюпорте отображается произвольный кадр композиции, который был просчитан при запуске проекта-макета.

Рис. 11. Композиция “Main”

Дальнейший просчет изображения начитается только в случае: перехода к другому кадру, быстрого просчета композиции (кнопка RAM Preview или клавиша [NUM 0]), обычного воспроизведения (кнопка Play или клавиша [Space]), изменения параметров слоя (положение, поворот, ориентация, прозрачность, цвет и т.д.), изменения эффекта или эффектов слоя или изменения настроек композиции.

Т.к. на таймлайне были заранее расставлены и порезаны слои и композиции в соответствии с монтажной историей - отображение слоев во вьюпорте будет происходить ровно по порядку.

Рис. 12. Смонтированный материал на таймлайне

Если же к параметру слоя, композиции или эффекта был написан экспрешен (или более), то его выполнение начнется ровно в то время, когда будет произведен переход к этому слою вручную или путем воспроизведения. Т.к. функция выполняется ровно сначала временного отрезка слоя, то при переходе и просчете следующего кадра изображения будет изменено и значение параметра в соответствии с математической функцией в экспрешене.

При переходе к нужному объекту на таймлайне (или автоматический переход при воспроизведении) может произойти: отображение и просчет слоя (или нескольких слоев в соответствии с монтажом) или же просчет подкомпозиции. В случае перехода на композицию будет произведена обработка вложенных в нее слоев, их параметров и эффектов.

Таким образом, структура и алгоритм обработки, просчета проекта представляет из себя "матрешку" - самая главная композиция, в которую вложены другие под композиции и слои.

В макете-проекте использовалось большое количество экспрешенов, которые были написаны для различных параметров разных слоев и композиций. Они представлены ниже. Большая часть из них отвечает за анимацию того или иного элемента.

• Экспрешн, отвечающий за появление графического объекта в композиции - эффект затухающего колебания. Было использовано большое количество вариантов данной функции много раз для различных объектов.

amp = .06; //амплитуда колебания

freq = 3.0; //сила колебания

decay = 8.0; //время затухания

if (numKeys > 0)//выполнение с начала установленного ключа

{

n = nearestKey(time).index;//индексация ключа анимации

if (key(n).time > time)//проверка прошедшего времени (по-секундно)

{

n--;//значение колебание уменьшается

}

}

if (n==0)//если значение колебания равно 0

{

t=0;//приостанавливается выполнения колебания

}

else

{

t=time-key(n).time;//значение ключа анимации уменьшается во времени

}

if (n > 0) //если значение колебания больше нуля

{

v = velocityAtTime(key(n).time - 0.04);//вычисление колебания граф. элемента во времени (продолжительность одного кадра = 0.04)

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

//получение значения параметра в соответствии с математической функцией (y=sin*2*PI/exp(x))

}

else

{

value;

}

• Экспрешн, отвечающий за основной таймер (просчет времени) в композиции (отсчет с нуля) main + cc + sound.

Рис. 13. Пример использования экспрешена для создания универсального таймера

rate = 1; //скорость таймера (1 – обычная скорость)

clockStart = 0; //начало отсчета

function padZero(n) //конвертирование целого числа, например: число «7» превратится в «07»

{

if (n < 10)

return "0" + n

else

return "" + n

}

clockTime = clockStart + rate*(time - inPoint); //вычисление значения таймера

if (clockTime < 0) //проверка таймера на отрицательное значение, в случае чего будет установлен знак «-»

{

sign = "-";

clockTime = -clockTime;

}else{

sign = "";

}

t = Math.floor(clockTime); //округление значения времени

hr = Math.floor(t/3600); //вычисление значения часа

min = Math.floor((t%3600)/60); // вычисление значения минуты

sec = Math.floor(t%60); // вычисление значения секунды

ms = clockTime.toFixed(3).substr(-3); //вычисление значения миллисекунд

sign + "[" + padZero(hr) + ":" + padZero(min) + ":" + padZero(sec) + "." + ms + "]" //вывод полученного текста в качестве таймера на основе полученных значений

• Экспрешн, отвечающий за плавное хаотичное движение камеры, установленной в различных композициях (эффект морской качки).

xAmp = 3; //высота колебаний

xFreq = .3; //количество колебаний за секунду

xSpeed = 150; //скорость волны колебания

wl = xSpeed/xFreq; //вычисление длины волны

phaseOffset = ((position[0]%wl)/wl)*2*Math.PI; //смещение позиции

y = xAmp*Math.sin(2*Math.PI*xFreq*time + phaseOffset); //вычисление «y» позиции

value + [0,y] //присвоение значения

• Экспрешн, отвечающий за плавное движение элементов графика в пространстве по осям X и Y в композиции Grafik.

segMin = .3; //минимальная продолжительность движения

segMax = .7; //максимальная продолжительность движения

minVal = 0; //минимальное значение

maxVal = 10; //максимальное значение

end = 0; //переменная окончания движения

j = 0; //переменная для вычисления значения генератора случайных чисел

while ( time >= end) //проверка временного значения

{

j += 1;

seedRandom(j,true); //генерирование случайного числа

start = end; // начало выполнения функции

end += random(segMin,segMax); //увеличение значения на случайное число в диапазоне значений продолжительности движения

}

endValx = random(minVal,maxVal) + 1050; //получение конечного значения «x»

endValy = random(minVal,maxVal) + 500; // получение значения конечного «y»

seedRandom(j-1,true);

dummy=random(); //выбрасываемое значение

startValx = random(minVal,maxVal) + 1050; //получение конечного значения «x»

startValy = random(minVal,maxVal) + 500; // получение конечного значения «y»

y = position[1];

ease(time,start,end,[startValx,startValy],[endValx,endValy]) //присвоение значения в соответствии с «мягкими» ключами анимации

Экспрешн, отвечающий за движение объектов композиции Network в 3d пространстве.

xAmplitude = 4; //амплитуда движения

xFrequency = .24; //частота движения

xSpeed = 120; //скорость движения

wl = xSpeed/xFrequency; //длина волны движения

phaseOffset = ((position[0]%wl)/wl)*2*Math.PI; //смещение позиции

y = xAmplitude*Math.sin(2*Math.PI*xFrequency*time + phaseOffset);

//вычисление позиции по оси «y»

value + [0,y] //присвоение значения

Экспрешн, позволяющий соединять между собой два конца (например ,1-й и 2-й) луча эффекта Beam примененного к слою, который используется в композиции Network.

Эти два экспрешена были применены для соединения восьмы элементов рисунка локальной сети.

layer = thisComp.layer("1") //выбор нужного нуль объекта

layer.toComp([50,50,0]) //соединение с точкой с выравниванием 50х50

---

Определение второй точки

layer = thisComp.layer("2")

layer.toComp([50,50,0])

Экспрешн, анимирующий график в композиции Graph_Fade.

amp = .09; //амплитуда

freq = 2.5; //частота, сила

decay = 5.0; //затухание

if (numKeys > 0)

{

n = nearestKey(time).index;

if (key(n).time > time)

{

n--;

}

}

if (n==0)

{

t=0;

}

else

{

t=time-key(n).time;

}

if (n > 0)

{

v = velocityAtTime(key(n).time - 0.04);

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}

else

{

value;

}

Экспрешн, создающий текст в виде сложного бинарного кода (в виде нулей и единиц).

Рис. 14. Пример применения экспрешена для создания бинарного кода

stroki = 22; //количество строк

stolbiki = 80; //количество столбцов

frequency = 5; //частота смены чисел

posterizeTime(frequency); //вычисление количества кадров в секунду

randMin = Math.pow(2,stolbiki); //вычисление минимального значения появления

randMax = randMin*2; //вычисление максимального значения появления

str = ""; //текст на данный момент ничего присваивает

for(i =0; i < stroki; i++)

{

str += random(randMin,randMax).toString(2).substr(1) + "\r"; //вывод числовых значений в текстовом слое

}

str

• Экспрешн, позволяющий создать систему частиц, используя только стандартную форму в виде сферы

Рис. 15. Пример использования экспрешена для создании системы частиц, связанных между собой эффектом Beam

origin = [10,10,10]; //описываем стандартный размер массива (таблица)

dimX = 10; //к-во ячеек по X

dimY = 10; //к-во ячеек по Y

dimZ = 10; //к-во ячеек по Z

gap = 50; //максимально расстояние между ячейками

gridRate = 500; //скорость движения частиц

holdTime = .1; //максимальная задержка по времени

//описываем необходимые переменные, заранее обнулив их

start = 0; //начальный отсчет

startX = 0; //начальная позиция по X

startY = 0; //начальная позиция по Y

startZ = 0; //начальная позиция по Z

endX = 0; //конечная позиция по X

endY = 0; //конечная позиция по Y

endZ = 0; //конечная позиция по Z

deltaX = 0; //разница в смещении между началом и концом по X

deltaY = 0; //разница в смещении между началом и концом по Y

deltaZ = 0; //разница в смещении между началом и концом по Z

end = 0; //конец отсчета

j = 0;

while (time >= end)

{

seedRandom(j,true); //генератор случайных чисел

//задаем начальные позиции элемента

startX = Math.floor(random(dimX))*gap + origin[0]; //по X

startY = Math.floor(random(dimY))*gap + origin[1]; //по Y

startZ = Math.floor(random(dimZ))*gap + origin[2]; //по Z

j +=1;

произойдет новое перемещение объекта

seedRandom(j,true) //генератор случайных чисел

start = end; //присваиваем значению "end" значение "start" для просчета

конечной позиции элемента

//аналог кода, как у start

endX = Math.floor(random(dimX))*gap + origin[0];

endY = Math.floor(random(dimY))*gap + origin[1];

endZ = Math.floor(random(dimZ))*gap + origin[2];

deltaX = Math.abs(endX - startX);

deltaY = Math.abs(endY - startY);

deltaZ = Math.abs(endZ - startZ);

//теперь конечная позиция будет менятся в каждом новом цикле

end += (deltaX + deltaY + deltaZ)/gridRate + 3*holdTime;

}

p1 = start + deltaX/gridRate; //определено случайное расположение объекта и первое движение по X

p2 = p1 + holdTime; //второе движение c задержкой

p3 = p2 + deltaY/gridRate; //третье со смещением по Y

p4 = p3 + holdTime; //четвертое с задержкой

p5 = p4 + deltaZ/gridRate; //пятое со смещением по Z

//проверка на порядок действий (порядок движения) и движение по-этапное

if (time < p1)

{

ease(time,start,p1,[startX,startY,startZ],[endX,startY,startZ]) //изменение позиции с мягким ключом анимации

}

else if (time < p2)

{

[endX,startY,startZ] //первое смещение

}

else if (time < p3)

{

ease(time,p2,p3,[endX,startY,startZ],[endX,endY,startZ]) //третье движение

}

else

if (time < p4)

{

[endX,endY,startZ] //четвертое

}

else

if (time < p5)

{

ease(time,p4,p5,[endX,endY,startZ],[endX,endY,endZ]) //пятое

} else

{

[endX,endY,endZ]

}

//движение элемента теперь будет происходить в случайном порядке по сетке по направлениям X,Y и Z

• Экспрешн, создающий эффект спирографа

Рис. 16. Пример использования экспрешена по созданию эффекта спирографа

r1 = 43; //радиус 1

r2 = -14; //радиус 2

o = 53; //смещение

speed = 15; //скорость

s = 2.5; //размер

r = r1 + r2; //общ. радиус

x = r*Math.cos(time*speed) - (r2 + o)*Math.cos(r*time*speed/r2); //движение по X

y = r*Math.sin(time*speed) - (r2 + o)*Math.sin(r*time*speed/r2); //движение по Y

[s*x + thisComp.width/2, s*y + thisComp.height/2]; //присвоение значения по X и Y

• Экспрешн, создающий эффект счетчика

val = thisComp.layer("Slider").effect("Slider Control")("Slider"); //переменной val присваивается значение вспомогательного эффекта Slider Control, присвоенного к текстовому слою

numDec = 0; // количество цифр справа

numDigit = 2; // количество цифр слева

if (val < 0) //проверка на отрицательное значение

sign = "-" else sign = ""; //если значение меньше 0, то перед числом поставится знак -

s = Math.abs(val).toFixed(numDec); //получение фиксированного значения

while (s.length < numDigit + numDec + 1)

s = "0" + s; //присвоение значения

sign + s //вывод числа

2.3. Описание программы

В данном разделе будет более подробно описан проект-макет, выполняемый в программе Adobe After Effects CS5.

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

2.3.1. Описание структуры программы

Рис. 17. Раскрытый браузер объектов (структура)

Структура выглядит таким образом:

- Compositions (все 30 композиций)

- Music (музыка)

- Photos (фотографии,)

- PNG (PNG изображения: иконки, логотипы)

- PSD (PSD изображения)

- Render Videos (видеозаписи, отрендеренные (просчитанные и сохраненные на ПК), которые участвуют в редактировании подготовленного видеоматериала на основе обработанных композиций)

Пользователь также может изменять структуру на свое усмотрение, каждая папка (подраздел) может быть переименована. Возможно добавление новых подразделов, удаление выбранных или изменение старых, уже существующих. Однако следует помнить, что удаление файлов, находящихся в подкаталогах, может повлечь за собой нарушение ли разрыв связей между графическими объектами, слоями, композициями и т.д.

Связь создается при написании экспрешена. Поэтому, если необходимо все-таки удалить ненужный элемент в структуре, то сначала следует удалить связь (удалить экспрешн). После этого произойдет остановка изменения параметров слоя, с которым был связан удаленный элемент. Поэтому будет необходимо всю анимацию устанавливать вручную (выставление ключей на временной линейке).

Стоит отметить, что такое действие является крайней мерой, так что, чтобы избежать вышеописанных последствий, следует просто заменить необходимый файл в структуре (Replace footage -> From File).

Композиции удалять крайне нежелательно, т.к. обычно в больших проектах они находятся во многих подкомпозициях. Поэтому следует в таком случае проводить редактирование нужной композиции. Удаление может быть проведено на ранней стадии разработки проекта, в данном проекте-макете это неприемлемо.

2.3.2. Входные и выходные данные

В качестве входных данных в проекте выступают значения параметров отдельно взятых слоев, композиций и эффектов. Значение может быть как отрицательным, так и положительным.

Рис. 18. Параметр графического объекта

После покадрового просчета видеопроекта экспрешен, написанный для параметра, будет заменять старое числовое значение на новое для параметра текущего элемента или для другого, если два элемента были связаны между собой выражением.

2.3.3. Организация данных в программе

Под каждый отдельный элемент в проекте выделяется отдельный вычислительный поток при просчете видео.

Вычисление происходит в реальном времени. Пользователь может установить диапазон просчета на свое усмотрение, изменяя и двигая отрезок рабочей области на таймлайне, временной линейке.

2.4. Инструкция пользователя

Работа с проектом начинается с записи его на персональный компьютер, предварительно распаковав прилагаемый zip архив.

Следующий этап - запуск программы Adobe After Effects CS5.

Рис. 19. Запуск программы Adobe After Effects

Для открытия проекта необходимо щелкнуть по File -> Open Project (рис. 9.) основной панели меню; найдя, выбрав и загрузив проект, можно приступать к работе с ним.

Итак, разберем структуру нашего проекта - это необходимо для дальнейшей работы.

Во вкладке Project (браузер объектов проекта) мы видим несколько категорий, которые были созданы для быстро поиска необходимых файлов, прикрепленных к проекту (рис. 12).

• Compositions - здесь лежат все композиции, созданные в проекте

• Music - музыка, которая была добавлена заранее

• Photos - фотографии, заранее отснятые; так же могут быть заменены

• PNG - PNG изображения: иконки, логотипы, клипарты

• PSD - PSD изображения

• Render Videos - готовые отрендеренные видео

Каждая из этих категорий может быть пополнена путем добавления новых файлов (File -> Import File). Каждый прикрепленный файл может быть заменен на новый, однако футажи желательно заменять на файлы одинакового разрешения - в этом случае ничего в проекте не нужно будет изменять: позиция элемента, размер и т.д.

Если необходимо заменить существующий текст - щелкните по необходимому объекту во вьюпорте (рис. 4) или выбрав его на таймлайне (рис. 6), далее двойной щелчок по нему, и вы уже можете вводить новый текст. Для изменения шрифта, размера, выравнивания необходимо обратиться к вкладке Character (рис. 5). Из списка выбрать нужный шрифт (все сведения о доступных, установленных шрифтах берутся из ОС), далее можно сделать с текстом все что угодно: размер, толщина, цвет, контур и т.д.

Для изменения цвета форм (Shape), достаточно его выбрать и на панели инструментов (рис.2), щелкнув по появившейся иконке цвета, изменить его на необходимый.

Для замены цвета фона основной композиции (слой BG), выберите его на таймлайне, зайдите во вкладку основного меню Layer -> Layer Settings, в появившемся окне щелкните по цвету и замените его (для вызова окна настроек слоя можно также воспользоваться быстрым сочетанием клавиш [CTRL] + [SHIFT] + [Y]).

Рис. 20. Окно свойств слоя

Для перехода к другой композиции, обратитесь ко вкладке Project, в категории Compositions выберите необходимую и двойном щелчком левой кнопки мыши откройте ее, после чего она автоматически откроется и добавится новой вкладкой на таймлайне. Теперь Вы можете продолжить работу с проектом.

Экспрешены:

Функции были применены к различным параметрам разных слоев, композиций и эффектов.

Чтобы узнать были ли написаны какие либо экспрешены для того или иного параметра, достаточно раскрыть свойства объекта на таймлайне. Если функция была написана для параметра, то его значения будут отмечены красным цветом.

Рис. 21. Определение статуса параметра слоя

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

Написанные экспрешены были рассмотрены и разобраны в разделе 2.2.