49
1 Оглавление Последнее обновление: 27.07.2019 Создание пакета.......................................................................................................................................... 2 Основные настройки ............................................................................................................................... 2 Специальные настройки пакета ...................................................................................................... 4 Стилизация пакета ............................................................................................................................ 8 Файлы предварительного просмотра .................................................................................................10 Структура пакета ....................................................................................................................................11 Элементы шаблона .........................................................................................................................14 Параметры группы ..........................................................................................................................18 Проверка кода покупки ........................................................................................................................24 Проверка кода покупки [VideoHive] ..............................................................................................25 Проверка кода покупки [Gumroad] ...............................................................................................26 Проверка кода покупки [Своя система] ........................................................................................26 Тестирование пакета ................................................................................................................................27 Зачем нужен режим тестирования? ....................................................................................................27 Как включить режим тестирования? ...................................................................................................28 Как выключить режим тестирования? .................................................................................................28 Приложение для создания структуры и компиляции пакета .............................................................29 Авторесайз (создание адаптивных размеров для композиций).......................................................30 Добавление специальных отметок для привязки к Атому ................................................................36 Метка-комментарий для слоя настройки (Customizer Layer)......................................................38 Метка-комментарий для текстовых слоев ...................................................................................39 Метка-комментарий для указателей настроек времени ............................................................40 Быстрое создание и добавление меток-комментариев (цикл) ..................................................41 Создание структуры проекта (указывая нужные опции) ...................................................................42 Groups...............................................................................................................................................43 Items .................................................................................................................................................43 Custom Args ......................................................................................................................................44 Group Options ..................................................................................................................................44 Компиляция пакета (создание финальной версии) ...........................................................................47 Пакет готов. Что дальше? ........................................................................................................................49

Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

  • Upload
    others

  • View
    15

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

1

Оглавление Последнее обновление: 27.07.2019

Создание пакета .......................................................................................................................................... 2

Основные настройки ............................................................................................................................... 2

Специальные настройки пакета ...................................................................................................... 4

Стилизация пакета ............................................................................................................................ 8

Файлы предварительного просмотра ................................................................................................. 10

Структура пакета .................................................................................................................................... 11

Элементы шаблона ......................................................................................................................... 14

Параметры группы .......................................................................................................................... 18

Проверка кода покупки ........................................................................................................................ 24

Проверка кода покупки [VideoHive] .............................................................................................. 25

Проверка кода покупки [Gumroad] ............................................................................................... 26

Проверка кода покупки [Своя система] ........................................................................................ 26

Тестирование пакета ................................................................................................................................ 27

Зачем нужен режим тестирования? .................................................................................................... 27

Как включить режим тестирования? ................................................................................................... 28

Как выключить режим тестирования? ................................................................................................. 28

Приложение для создания структуры и компиляции пакета ............................................................. 29

Авторесайз (создание адаптивных размеров для композиций)....................................................... 30

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

Метка-комментарий для слоя настройки (Customizer Layer). ..................................................... 38

Метка-комментарий для текстовых слоев ................................................................................... 39

Метка-комментарий для указателей настроек времени ............................................................ 40

Быстрое создание и добавление меток-комментариев (цикл) .................................................. 41

Создание структуры проекта (указывая нужные опции) ................................................................... 42

Groups............................................................................................................................................... 43

Items ................................................................................................................................................. 43

Custom Args ...................................................................................................................................... 44

Group Options .................................................................................................................................. 44

Компиляция пакета (создание финальной версии) ........................................................................... 47

Пакет готов. Что дальше? ........................................................................................................................ 49

Page 2: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

2

Создание пакета Откройте файл с примером пакета (Example Package.atom) в редакторе Notepad++/Sublime Text

или любом другом что имеет подсветку синтакса, и укажите синтакс кода как JavaScript (так будет

удобно и понятно работать с пакетом).

Примеры открытого пакета (редактор Sublime Text):

Без подсветки синтакса С подсветкой синтакса (JavaScript)

Основные настройки

Секция: pack_object.settings

Параметр Описание

name Название пакета Пример: “InstaManiac”

version Версия пакета с точкой (для бесплатной версии нужно ввести – DEMO, или выберите опцию в компиляторе). Если версия пакета DEMO, то при установке всегда будет присутствовать кнопка (при нажатии перейдет на нужную вам ссылку для получения полной версии пакета). В платных версиях такая кнопка отсутствует.

Пример: “1.4”

required_app_version Требуемая версия Атома для установки пакета. Актуальную версию смотрите на сайте. Пакет не будет установлен на версию ниже требуемой и попросит обновление расширения.

Page 3: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

3

Пример: “2.0”

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

• _COMPOSER – Шаблоны After Effects/Audio Files/…

• _TEXT_PRESETS – Текстовые пресеты (создаются специальным интерпретатором)

Пример: “_COMPOSER”

inside_security Внутренний код безопасности (укажите TEST_MODE для тестирования пакета). Будет установлен специальный код в компилированной версии пакета. Пример: “TEST_MODE”

required_purchase_code Требовать код покупки при установке пакета? Покупая проект с videohive.net / gumroad.com или иных магазинов, покупатель получает код покупки, который ему потребуется ввести в расширение чтобы установить пакет. Вы так-же можете генерировать временные коды активации с помощью админ-центра Атома, либо написав разработчику. Мы можем добавить дополнительную систему проверки покупки для ваших пакетов (оплачивается отдельно).

Page 4: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

4

Выбор системы для проверки покупки указывается в админ-центре Атома, либо сообщив о нужной системе разработчику. По умолчанию - VideoHive. Подробнее читайте здесь.

• true – Запрашивать

• false – Не запрашивать (укажите это для бесплатных пакетов и во время тестирования пакета)

Пример: true

cc_author_username Никнейм автора который будет отображаться для пакета. Может быть не связано с VideoHive или иными системами оплаты. Так-же будет использован для входа в админ-центр Атома. Пример: “aniom”

С основной настройкой пакета мы закончили, теперь перейдем в настройки связанные с

проектами After Effects.

Специальные настройки пакета

Данные настройки находятся внутри:

inside_option_sets: { здесь }

Параметр Описание

auto_size_composition Авто-изменение размера композиции (из примененного шаблона) на ту которая задана у активной композиции пользователя.

• NONE – не применять

Page 5: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

5

• ONLY_MAIN – только для главной композиции (которую применяем – предпочтительный вариант для авто-изменения размера композиции)

• ALL_COMPS – для всех композиций Пример: “ONLY_MAIN”

auto_fps_composition Авто-изменение кадров в секунду (FPS) композиции (из примененного шаблона) на ту которая задана у активной композиции пользователя.

• NONE – не применять

• ONLY_MAIN – только для главной композиции (которую применяем)

• ALL_COMPS – для всех композиций Пример: “ONLY_MAIN”

duplicate_origin_setting Дублирование композиции (которую применяем). Для того чтобы не нарушить целостность импортированной. Нельзя не использовать.

• ONLY_MAIN – только для главной композиции (которую применяем)

• ALL_COMPS – для всех композиций Пример: “ONLY_MAIN”

use_start_timeline_pointer Слой на временной шкале (примененной композиции)

• NONE или START_POINT – самое начало временной шкалы

• FOLLOW_CURSOR – на месте курсора (предпочтительно)

• IN_MARKER_POINT – на месте курсора и IN маркера (если имеется)

Пример: “FOLLOW_CURSOR”

layer_index_position Индекс добавленного элемента (слоя/композиции) на временной шкале

• NONE или MOVE_BEGIN – первый индекс (самый верх слоев)

• MOVE_BELOW – добавить элемент ниже выделенного слоя (есть есть выделение)

• MOVE_ABOVE - добавить элемент выше выделенного слоя (есть есть выделение)

• MOVE_END – добавить элемент в конец слоев (последний индекс)

Page 6: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

6

Пример: “MOVE_ABOVE”

customizer_action Использование настройщика.

Чтобы использовать настройщик нужно добавить специальный комментарий (ATOM_CUSTOMIZER_LAYER)

для слоя с контроллерами (слайдерами, цветами и тд) внутри вашей композиции.

Укажите действие при нажатии на кнопку настройщика.

• SIMPLE – переход на слой с контроллерами

• EDITOR – редактор контроллеров и текста (если включено) прямо внутри расширения

Пример: “EDITOR”

customizer_text_editor Возможность редактирования текста прямо через расширение при нажатии на кнопку настройщика.

Page 7: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

7

Ищет текстовые слои во всех композициях внутри основной, у которых добавлен специальный комментарий (ATOM_TEXT_EDITOR_LAYER)

Работает при условии, что значение выше (customizer_action) равно – EDITOR.

• true – Включить редактор текта

• false – Выключить Пример: true

Page 8: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

8

Стилизация пакета Теперь давайте настроим последние параметры – стилизация для пакета (шапка расширения).

Данные настройки находятся внутри:

stylization: { здесь }

Параметр Описание

header_image_bytes Ваша личная картинка для шапки расширения в байтовом виде. Добавляется через программу Atom Toolkit Helper, которая поставляется специально для авторов. Картинка для шапки должна иметь формат .PNG Размеры: 282x75 (PSD файл для примера шапки добавлен в архив) Если вы понимаете как работать с байтами, и хотите добавить эти данные вручную то введите их здесь:

или в секции выше

header_color_hex Цвет продолжения фона шапки (правая часть) в формате HEX (включая знак # в

начале).

Page 9: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

9

Пример: “#35AEDB”

Page 10: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

10

Файлы предварительного просмотра Для предварительного просмотра одного элемента требуются два типа файлов:

• Статическая иконка элемента (формат .PNG)

• Предварительный просмотр элемента - анимация (формат .GIF)

Доступные варианты для предварительного просмотра элементов (размеры в пикселях):

240 x 135 (альбомные) 135 x 240 (портретные –для Instagram

и тд.)

240 x 240 (квадратная с равными пропорциями)

135 x 135 (уменьшенная

версия квадратной)

Размеры (в пикселях) и названия файлов должны быть одинаковыми для PNG и GIF.

О том как использовать эти файлы в структуре проекта – читайте ниже.

Page 11: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

11

Структура пакета Секция: pack_object.structure

Структура пакета представляет собой иерархическую модель групп и шаблонов.

При нажатии на группу/шаблон:

• Группу – она открывается и показываются другие группы или шаблон.

• Шаблон – показываются все композиции/элементы шаблона (превью) справа.

Пример кода структуры (внутри секции pack_object.structure):

"Группа 1": { "Название шаблона": { preview: { Элементы шаблона }, Параметры шаблона } }, "Группа 2": { "Подгруппа 1": { "Название шаблона": { preview: { Элементы шаблона }, Параметры шаблона } } }

Примеры структуры:

Шаблон без группы

Шаблон Brush внутри группы Typography

Page 12: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

12

Шаблон Basic внутри группы Kinetic (которая внутри группы Typography).

Может возникнуть вопрос: как подгружаются файлы предварительного просмотра?

Названия групп и шаблонов имитируют собой папки (с текущими названиями) на вашем

компьютере.

Рядом с вашим пакетом (.ATOM) должны быть 2 папки (всё это вместе и есть пакет):

• Atom After Effects – Шаблоны After Effects

• Atom Preview Assets – Файлы предварительного просмотра

К примеру, если структура вашего пакета такая:

Page 13: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

13

То папка с файлами предварительного просмотра должна выглядеть так:

Папка Atom Preview Assets -> Instagram Stomp -> наши файлы

В данном примере для названий файлов используются их идентификационные номера (однако

добавив специальный параметр вы можете использовать их обычные имена, информация об

этом в параметрах группы).

Тогда шаблон должен быть здесь:

Папка Atom After Effects -> наши файлы

Чем сложнее иерархия, тем больше папок и вложенных файлов в них. Так-же за счет специальных

параметров вы можете использовать любые другие имена для папок и проектов After Effects.

Читайте об этом в разделе параметры группы.

Page 14: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

14

Элементы шаблона Элемент шаблона выглядит следующим образом:

“UNIQUE_ID”: { параметры элемента – смотрите о них ниже }

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

просмотра (можно изменить эту опцию) и других задач – должно быть любое уникальное

значение (не повторяемое более одного раза в текущем пакете).

ВНИМАНИЕ! Уникальный идентификатор не должен содержать специальных символов (точек,

запятых, пробелов и так далее).

Пример написания: MYSC_ID_1

Параметр Описание

enabled Показывать данный элемент в расширении или нет

• true – показывать

• false – скрыть Пример: true

name Название элемента (отображается в расширении). Это должно быть названием композиции внутри шаблона After Effects (но это можно изменить благодаря параметрам ниже – custom_args, параметр comp_name).

options [Необязательный параметр] Специальные иконки для элемента.

ICON:TEXT (иконка из списка ниже и текст для неё, если указать только иконку ICON – без указания текста и знака :, то будет добавлен стандартный текст, если же указать только текст без иконки – то будет добавлена иконка info). Если не требуется можно удалить параметр или указать его как options: false

ИКОНКА ВИД СТАНДАРТНЫЙ ТЕКСТ

threeD 3D Animation

puzzlePart Mask Path

diamondPick Our choice

plugIn Need Plug-in

pen Font

Page 15: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

15

pen2 Font Mix

winner_cup Fresh Item

info Собственный текст

Пример: “winner_cup:I like it!”

custom_args [Необязательный параметр] Специальные аргументы для элемента (через запятую), отдельный блок: custom_args: { аргументы }, внутри основного блока элемента. Параметры смотрите ниже. Пример: custom_args:{ параметры }

Параметры custom_args:

Параметр Описание

parent_folder [Необязательный параметр] Название родительной папки для композиции (внутри After Effects шаблона). Используется на случай похожих названий композиций в одной категории, но с другими названиями папок. Пример: “Typo Assets”

comp_name [Необязательный параметр] Своё название для композиции (если нужно использовать отличающееся от имени элемента в структуре пакета). Информация: Используется если имя в структуре пакета должно быть иным нежели у композиции в проекте After Effects). Пример: “Other Comp Name”

layer_sets [Необязательный параметр] Настройки для слоя композиции (можно включить несколько, если написать их в линию через разделитель “:” для каждой).

• 3D – использовать 3D для слоя

• ADJUSTMENT – использовать

корректирующий слой

• COLLAPSE_TRANS – коллапс

трансформация слоя

Page 16: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

16

• MO_BLUR – включить размытие для слоя

(motion blur)

Пример: “3D:MO_BLUR”

layer_timing [Необязательный параметр] Создание маркеров (IN/OUT, Duration, и др.) для управления временем с помощью Time Remapping (специальное выражение). Чтобы использовать данный параметр в полной мере нужно создать любой слой (Null объект, Shape, Adjustment, или Solid) внутри вашей композиции After Effects проекта – в будущем он будет называться как слой контроля времени. И добавить ему комментарий (ATOM_TIMING_CONTROL_LAYER),

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

• COPY_MARKERS – просто скопировать маркеры (включая заданные ранее имена маркеров) со слоя контроля времени, не добавляя Time Remapping.

• TIME_REMAP_ONLY – просто добавить Time Remapping но без маркеров и специального выражения.

• TIME_REMAP_LAYER_DURATION – добавить Time Remapping со специальным выражением для контроля времени слоя (чем длинее слой, тем он больше растянут по времени).

• TIME_REMAP_IN_OUT – добавить Time Remapping со специальным выражением и маркерами (IN & OUT) для контроля времени слоя. Принцип действия: На заданной маркером точке (слоя контроля времени) разделяет (создает пустую зону между маркерами IN & OUT) и дальше продолжает анимацию (при выходе за пределы маркера OUT). Требует слой контроля времени.

• TIME_REMAP_IN_OUT_REVERSE – принцип действия тот-же что у параметра выше, только вместо продления анимации – реверсирует её (с маркера OUT анимация идет в обратном

Page 17: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

17

направлении). Требует слой контроля времени.

• TIME_REVERSE – реверсировать время слоя без добавления маркеров и специальных выражений.

Пример: “TIME_REMAP_IN_OUT_REVERSE”

Page 18: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

18

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

обязательным параметром.

Пример (настройки для шаблона Brush, пишутся через запятую):

Параметр Описание

custom_folder [Необязательный параметр] Ключевая папка [Atom Preview Assets] Собственное название папки (проводник файлов) для файлов предварительного просмотра. Если вы хотите чтобы название папки с файлами не совпадало с названием группы внутри расширения, то используйте данный параметр введя своё название. Пример: В структуре пакета указано название для шаблона как Instagram, однако папка с файлами предварительного просмотра (PNG/GIF) называется иначе и вы не хотите давать ей тоже имя. То просто введите здесь имя папки с файлами.

aep_file_name [Необязательный параметр]

Ключевая папка [Atom After Effects] Похож на параметр выше – только работает для шаблона After Effects. Если вы хотите чтобы имя шаблона отличалось от указанного имени в структуре пакета, то используйте данный параметр. Пример: В структуре пакета указано название для шаблона как Stomp, однако файл с шаблоном (AEP) называется иначе и вы не

Page 19: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

19

хотите давать ему тоже имя. То просто введите здесь имя шаблона.

label_color_num [Необязательный параметр] Цвет слоя на временной шкале.

Введите число для указания цвета (от 0 до 16).

Пример: 3

Page 20: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

20

preview_name_instead_id [Необязательный параметр] Использовать имя элемента вместо его идентификационного номера (для файлов предварительного просмотра – PNG/GIF).

Если данный параметр выключен или отсутствует, то вместо имён используются эти идентификационные номера элементов:

• true – использовать имена вместо ID

• false – использовать ID вместо имён Пример: true

change_engine [Необязательный параметр] Изменение глобального параметра для engine_pack – смотрите об этом здесь. Используйте те же значения что указаны для глобального параметра, они будут работать для текущей группы заменяя глобальные настройки параметра.

Page 21: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

21

change_auto_size_composition [Необязательный параметр] Изменение глобального параметра для auto_size_composition – смотрите об этом здесь. Используйте те же значения что указаны для глобального параметра, они будут работать для текущей группы заменяя глобальные настройки параметра.

change_duplicate_origin_setting [Необязательный параметр] Изменение глобального параметра для duplicate_origin_setting – смотрите об этом здесь. Используйте те же значения что указаны для глобального параметра, они будут работать для текущей группы заменяя глобальные настройки параметра.

change_use_start_timeline_pointer [Необязательный параметр] Добавлен в версии 2.1.5 Изменение глобального параметра для use_start_timeline_pointer – смотрите об этом здесь. Используйте те же значения что указаны для глобального параметра, они будут работать для текущей группы заменяя глобальные настройки параметра.

change_layer_index_position [Необязательный параметр] Добавлен в версии 2.1.5

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

custom_preview_res_thumbnail [Необязательный параметр] Вид отображения предварительного просмотра.

• DEFAULT – стандартный вид (альбомная – 240x135), чтобы использовать стандартный вариант – просто удалите этот параметр.

Page 22: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

22

• VERTICAL – вертикальный вид (портретная - 135x240).

• BOX_MAX – вид коробки максимальный (240x240)

• BOX_MIN – вид коробки уменьшенной (135x135)

Больше информации о вариантах предварительного просмотра смотрите здесь. Пример: “VERTICAL”

is_audio [Необязательный параметр] Указатель что все элементы в данной группе это аудио-файлы. Часть настроек что связаны с шаблонами After Effects (сделать слой 3D, тайминги и тд.) перестают работать когда включена эта опция. Все аудио-файлы придерживаются единой стилистике (иконка и превью) которая уже вшита в расширение. Основной выбор стилизации это вид отображения для параметра custom_preview_res_thumbnail: BOX_MAX или BOX_MIN, если не укажите свое – будет выбран BOX_MIN Так-же во время проигрывания аудио-файлов появляется эквалайзер

(можно отключить в настройках ), и дополнительная информация о времени аудио.

Page 23: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

23

Аудиофайлы должны располагаться внутри папки (Atom Preview Assets) по пути структуры вместо файлов предварительного просмотра. Аудиофайлы должны иметь формат .WAV В файловом менеджере:

В структуре пакета:

• true – данная группа только с аудио-файлами

• false – не использовать как группу только для аудио-файлов Пример: true

Page 24: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

24

Проверка кода покупки Вы можете проверять покупку пакета при его установке (покупатель должен будет ввести код

полученный при покупке), если продаете его на различных агрегаторах (магазинах), или же

использовать свою систему.

Главное — это генерировать код покупки при продаже, агрегаторы это делают сами, или же

можете настроить свой сервис.

К тому же с помощью админ-панели Атома (или написав разработчику) вы можете генерировать

временные коды покупки (на определенное кол-во активаций, истечение времени).

Это очень удобно!

Доступные варианты получения и проверки кода покупки:

• VideoHive (videohive.net)

• Gumroad (gumroad.com)

• Своя система

Page 25: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

25

Проверка кода покупки [VideoHive] Для проверки покупок нам требуется ваш личный токен, чтобы его создать перейдите на

официальный сайт Envato: https://build.envato.com/create-token

Авторизуйтесь, введите название токена (любое) и установите необходимые разрешения:

Тем самым вы даете своё согласие на просмотр истории ваших продаж (тем самым система

может проверять код покупки).

Нажмите кнопку чтобы создать токен и скопируйте его код (он будет показан лишь один раз, если

забудете, то придется создавать новый).

Отправьте записанный код токена нам (средства связи через сайт), или же введите его сами в

админ-панели Атома (полная информация будет доступна позже).

Page 26: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

26

Проверка кода покупки [Gumroad] Включите генерацию ключей вашего товара:

Вместо токена (как для VideoHive) нам требуется только адрес вашего товара (без самого сайта,

только ID товара) на сайте Gumroad:

Отправьте его нам, или укажите сами в админ-центре Атома. В отличие от токена для VideoHive,

адрес страницы (ID товара) требуется добавлять не в профиль а в настройки пакета где

используется данный вид активации.

Проверка кода покупки [Своя система] Мы можем соединить расширение с вашей собственной системой проверки покупок.

Для этого свяжитесь с нами по E-mail (форма на сайте) для дальнейшего обсуждения.

Данная возможность доступна если вы приобрели тариф Enterprise или Special, иначе

оплачивается отдельно.

Page 27: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

27

Тестирование пакета Для того что протестировать пакет вам нужно:

1) Иметь актуальную версию расширения (проверьте актуальность на сайте).

2) Включить режим тестирования в расширении

Зачем нужен режим тестирования? Для того чтобы тестировать свои собственные пакеты в любой момент и настраивать их как

удобно.

В режиме тестирования можно будет установить только ваш пакет, у которого в параметре

inside_security написано - TEST_MODE.

Нюансы режима тестирования:

• В режиме тестирования нельзя установить или запустить чужой пакет.

• Работают только основные функции (визуальная часть вашего пакета, применение

шаблонов и тд) – не работает раздел добавления в избранное, поиск и прочие мелочи.

• Ваш добавленный пакет не будет никуда установлен (скопирован и тд.) и после

перезагрузки расширения он исчезнет из него.

• Чтобы увидеть собственную шапку пакета, файл-картинка с шапкой должна быть рядом с

пакетом (название шапки custom_header_name, формат PNG).

Page 28: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

28

Как включить режим тестирования? Откройте расширение, нажмите вкладку параметров и выберите Tester Mode:

После этого появится уведомление о том, что режим включен

А так-же нижняя часть расширения будет вам напоминать об этом

Как выключить режим тестирования? Так-же как включали.

Page 29: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

29

Приложение для создания структуры и компиляции

пакета Для всех авторов Атома (после оплаты тарифа) предоставляется программа (скрипт панель) для

After Effects. Программа постоянно улучшается, поэтому некоторые скриншоты могут быть

более устаревшими чем текущая версия программы.

Её можно добавить в папку ScriptUI Panel вашего After Effects (для закрепления внутри программы

и удобства использования), или просто запустить с помощью вкладки File -> Scripts -> Run Script

File… -> Atom Toolkit Helper [version].jsxbin

Что может программа? Помочь создать авто-изменяемые размеры композиции, легко применять

настройки, которые нужны в пакете (указатели для текстов, временных меток, слоев с

контроллерами), а так-же самое главное – создание структуры вашего проекта с выбором нужных

опций (и циклом нумерации элементов) и компиляция (создание финальной версии пакета).

Page 30: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

30

Авторесайз (создание адаптивных размеров для композиций)

Левая колонка Add Nulls For, это кнопки для создания изменяемых размеров:

• Save Aspect Ratio – галочка указывающая нужно ли поддержать пропорции (к примеру

если вы используете видео элементы, текст и прочее). Работает только для Background.

• New Group – Создать новую группу (нуль объект). До создания требуется нажать на Global

Group (требуется до начала обычных групп).

• Global Group – Глобальная группа композиции

• Background – Добавить нуль объект для заднего фона

Правая колонка Change Comp Size, позволяет быстро увидеть результат, требуется лишь выбрать

нужный размер и нажать на кнопку.

Если заранее выбрать слой и нажать на кнопку из левой колонки, выбранный слой будет

автоматически привязан к созданному нуль объекту (это можно использовать, либо нет).

Как это работает детальнее?

Пример работы скрипта (иной интерфейс, но работа равноценна):

https://www.youtube.com/watch?v=zbKd6BroygA

Создадим нуль объект (с помощью скрипта) для заднего фона (Background).

Выберем нужный фон (один слой или несколько разом) и нажмем на кнопку Background. После

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

Давайте поменяем размеры композиции чтобы проверить работу:

Page 31: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

31

1920x1080 (наши пропорции)

1080x1920 (вне наших пропорций)

Теперь давайте создадим группы, но, чтобы создать новые группы (New Group), создайте

глобальную группу композиции (Global Group).

Page 32: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

32

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

этого делать не нужно если потребуются собственная централизация объектов), и нажмите на

кнопку.

После этого создайте нужные для вас элементы и расположите их тех местах где нужно, на

примере 2 текстовых слоя:

И нажмите на создание новой группы (New Group). Так как у нас два элемента которым мы хотим

добавить централизацию то снимите выделения со всех слоев, и кликните 2 раза на кнопку

создания группы.

Первый созданный нуль объект перенесите в точку первой буквы слоя Left – теперь он будет стоят

в этой точке даже при смене пропорций.

Page 33: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

33

А второй нуль объект к последней букве слоя с текстом Right.

Теперь привяжите текстовые слои к нуль объектам (каждый к своему):

Готово!

Изменим пропорции на 1080x1920:

Page 34: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

34

Ну как? Думаю отлично!

Еще поиграем с размерами (кликните на ++), надписи на кнопках изменяться, и вы можете

выбрать иные размеры:

Выберем 2160x2160:

Page 35: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

35

Всё идеально! Элементов может быть огромное множество!

Page 36: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

36

Добавление специальных отметок для привязки к Атому Вы можете добавлять специальные отметки (комментарии) к слоям с помощью рук, а можете

упростить задачу и использовать наш скрипт. Перейдите во вкладку Atom Sets.

Левая колонка позволяет добавить комментарий к выбранному слою (слоям). Комментарии для

того, чтобы указать для Атома что это

• Text Layers - текстовые слои (которые можно редактировать через Атом)

• Customizer Layer - слой с настройками (эффектами контроллерами, которые должен

подхватит Атом – чтобы настраивать в нём)

• Timing Layer (with Marker)- слой с указателями времени (с помощью маркеров)

Правая колонка позволяет очень быстро сделать много действий – выделить все слои

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

Начнем добавлять специальные метки слоям (комментарии для Атома), но для начала давайте

сделаем так чтобы комментарии слоев отображались:

Правый клик мышкой на этом пространстве:

Далее:

Page 37: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

37

Включите комментарии.

Page 38: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

38

Метка-комментарий для слоя настройки (Customizer Layer). Давайте создадим нуль объект, выделим его и нажмем на кнопку Customizer Layer.

На слой добавился специальный комментарий ATOM_CUSTOMIZER_LAYER (информация о всех

спец.комментариях указана в разделе – создание пакета), а так-же маркер (просто маркер с

небольшим описанием слоя).

Теперь данный слой будет являться контрольным для эффектов и Атом будет его подхватывать

для настройки. Давайте убедимся в этом, добавьте на слой парочку контрольных эффектов (Color

Control, Slider Control и дайте им свои имена).

Теперь откроем Атом и нажмем на кнопку Customizer пока мы находимся в нашей

композиции (слой выделять не обязательно, Атом подхватит его, когда мы находим в текущей

композиции или же когда мы выделим слой как композицию находясь в другой композиции –

проверьте эти моменты сами).

Атом успешно подхватил наш контрольный слой. Здесь вы можете указывать любые контроллеры,

которые хотите увидеть в Атоме (при нажатии на Customizer, при условии, что данные параметры

включены в настройке пакета).

Page 39: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

39

Метка-комментарий для текстовых слоев Теперь давайте дадим метки текстовым слоям. Для примера создайте два текстовых слоя, и

выделите лишь один из них:

Теперь нажмите на кнопку Text Layers (и к нашему тексту добавится комментарий

ATOM_TEXT_EDITOR_LAYER) благодаря которому Атом будет видеть этот слой с текстом.

Теперь снова запустим Атом и благодаря нашему слою выше (настройщику – Customizer Layer, он

нужен для того, чтобы Атом мог подхватывать дальнейшие параметры), мы можем нажать на

кнопку Customizer и увидеть наш слой для редактирования:

Но почему слой один? У нас ведь их два! Дело в том, что специальный комментарий добавлен

только на один слой, поэтому был найден только он. Стоило нам добавить второму – был бы и

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

не было). Главное, чтобы у них был специальный комментарий, указывающий Атому что с ним

делать.

Page 40: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

40

Метка-комментарий для указателей настроек времени Давайте настроим указатели времени. Создадим нуль объект, добавим к нему маркер (с любым

названием, однако для некоторых параметров в структуре Атома – название будет копироваться

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

композиции (длина композиции в этом плане не имеет значения, она может быть как в точке

маркера, так и очень длинная). После чего выделим наш нуль-объект и нажмем на кнопку:

И к слою добавится специальный комментарий ATOM_TIMING_CONTROL_LAYER

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

Page 41: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

41

Быстрое создание и добавление меток-комментариев (цикл) Как же быстро добавить всем текстовым слоям метки, или создать нуль объект для настройщика

или времени?

Легко! Правая колонка нам поможет:

• Create Customizer with Fx – создает нуль объект с парой эффектов (для примера), и меткой-

комментарием.

• Create Timing Layer – создает нуль объект с маркером (ставит маркер с той точке где

курсор мыши), и специальным комментарием.

• Select All Text Layers – Выделить все текстовые слои с текущей композиции (дабы потом

одной кнопкой добавить всем метки-комментарии).

• Add Mark to All Texts in Comps – Добавить всем текстовых слоям метки-комментарии для

каждой выбранной композиции (в структуре проекта).

• Save Screenshots (timing layer) – поставить на рендер скриншоты (.PNG) для выбранных

композиций (в структуре проекта) по точке указателю Timing Layer.

• Save Screenshots (simple) – тоже что и выше только без слоя времени, берется % времени

от композиции (.PNG)

Page 42: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

42

Создание структуры проекта (указывая нужные опции) Вы можете очень быстро сгенерировать структуру проекта во вкладке Create Pack Structure:

Внутри находятся еще вкладки, но уже с параметрами.

• Groups – позволяет добавить группы (или не добавлять), а так-же указать название

шаблона.

• Items – основные параметры (ID, название элемента, опции).

• Custom Args – собственные аргументы элементов (Parent Folder, Comp Name и так далее).

• Group Options 1 и Group Options 2 – настройки для текущей группы элементов в структуре

пакета.

А так-же панель Output:

В ней можно настроить кол-во генерации элементов с отсчётом, и нажать на кнопку Create

Structure – нажать на неё можно в любой момент и даже со стандартными настройками.

• Counter – кол-во элементов которое нужно сгенерировать

• Count From – нумерация элементов с установленного числа

• For – для каких параметров нужно использовать счётчик

• Num Style – стиль генерации счётчика

Page 43: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

43

Groups

1. Включить всю эту панель и её настройки (без включения код будет меньше и без указания

шаблона/групп и их структуры)

2. Добавить новую группу и её название справа

3. Тоже самое что выше (если добавить обе группы, то одна группа будет находится в другой,

глобальная группа будет под номером один)

4. Название шаблона (для структуры меню Атома – название AEP проекта без формата) –

можно использовать любое, и указать название к шаблону AEP в настойках группы (будет

далее).

Items Указываем основные параметры для элементов:

1. Указываем уникальный ID (без нумерации так как она будет добавлена автоматически)

2. Название для элемента (будет добавлена нумерация)

3. Опции (выбор иконки и ввод текста)

Page 44: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

44

Custom Args Собственные аргументы для каждого элемента (подробнее о них смотрите в разделе создание

структуры проекта):

1. Родительская папка для композиции внутри шаблона (если нужно)

2. Название композиции (по стандарту используется название, указанное в структуре).

Однако если название в структуре иное, то здесь вы можете указать оригинальное

название композиции.

3. Настройки слоя (выберите если нужно один и более опций)

4. Настройки времени для примененного слоя (любой параметр если нужно)

Group Options Настройки для группы элементов (единые)

1. Собственная папка (название) для файлов предварительного просмотра (если отличается

от названия в структуре меню)

2. Название шаблона без указания формата (по стандарту используется название указанное в

структуре меню, оно и будет названием шаблона). Однако если название в структуре меню

иное, то здесь вы можете указать оригинальное название.

3. Цвет для слоя от 0 до 16

4. Использовать названия вместо ID (для файлов предварительного просмотра)

5. Изменить тип движка (указать иное для группы, отличающееся от глобального)

Page 45: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

45

След вкладка с параметрами группы (Group Options 2):

1. Собственные параметры авто-изменения размера для группы (другие параметры нежели

глобальные)

2. Собственные параметры дублирования оригинальной композиции для текущей группы

(другие параметры нежели глобальные)

3. Собственные параметры для начала слоя на временной шкале (другие параметры нежели

глобальные)

4. Собственные параметры для позиции индекса слоя на временной шкале (другие

параметры нежели глобальные)

5. Собственные параметры соотношения сторон для предварительного просмотра (другие

параметры нежели глобальные)

6. Использовать данную группу для аудиофайлов – данная группа станет работать только с

аудиофайлами. Смотрите информации о данных параметрах здесь.

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

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

ва 1-2. Указываем старт нумерации (пока что оставим 0), и нажмем кнопку Create Structure.

На данном примере был сгенерирован код со стандартными настройками.

Если же мы уберем первый параметр в первой вкладке:

Page 46: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

46

И попробуем сгенерировать снова, то получится код без указания названия шаблона, только его

структура (включая блок preview):

Однако если мы вновь включим эту опцию и добавим еще группу:

Группа будет указана в структуре кода (и в меню пакета Атома).

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

Итог: благодаря генерации с помощью скрипта, вы можете увидеть и понять, как составляется

структура пакета. Собрав нужную, вы можете её скопировать и добавить в пакет.

Page 47: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

47

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

Перейдите во вкладку Build Package:

Здесь нам нужно выбрать компилятор (программа ExtendScript Toolkit – её можно скачать

бесплатно на сайте Adobe – через Creative Cloud или напрямую, скорее всего данная программа

уже имеется у вас на компьютере – так как она устанавливается вместе с установкой After Effects).

Примерный путь к программе уже указан (для Windows), при изменении сохранится

автоматически для текущей версии AE.

Следующим шагом нам нужно выбрать ваш пакет (.ATOM).

Теперь укажем параметры для Image Header:

Выберите необходимый тип:

• Default – не изменять параметры (если не указывали вручную то шапка будет пустой)

• Add New – добавить новую шапку

Page 48: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

48

• Remove Header – удалить шапку (если указана вручную байтами, при удалении шапки

вместо неё будет стандартный вид)

При выборе Add New – укажите путь к картинке .PNG. Информация по созданию шапки

смотрите здесь.

Теперь укажем параметры для Change Package Options:

Вы можете изменить (заменить) уже указанные параметры в пакете на новые:

• Default – оставить параметры без изменений (если указали вручную в пакете и не

хотите изменять)

• DEMO – установить как демонстрационную версию для пакета (версия будет

изменена, не будет запрашивать код покупки если был включен ранее).

• PREMIUM – установить как платную версию для пакета (возможность изменить

версию для пакета – укажите с точкой, и выбрать вариант активации пакета – с

кодом покупки, или без кода).

Подробнее о версиях смотрите здесь.

После всех настроек нажмите на кнопку Compile the Package. Если все параметры верны то

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

Теперь, когда финальная версия пакета создана (можете создать отдельные версии для

бесплатного демонстрационного пакета - DEMO и платного для продажи – PREMIUM) вы можете

его начать продавать вместе с расширением Атом.

p.s: любые манипуляции с пакетами теперь реализуемы с помощью программы (создание демо

версий, полноценных, обновление версий, добавление шапки пакета и так далее…)

Page 49: Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка

49

Пакет готов. Что дальше? Пакет протестирован, и вы удовлетворены тем, как он выглядит? Скомпилирована финальная

версия?

Тогда я вас поздравляю с успешным созданием и тестированием пакета!

После того как вы получили финальную версию пакета, сможете делать с ним что душе угодно –

продавать, раздавать бесплатно и так далее!

Отправьте нам ваш демонстрационный пакет (если он имеется), или добавьте его через админ-

панель Атома для размещения пакета на нашем сайте.

Так-же ваш пакет будет добавлен в Atom Market, вы получите доступ к статистике скачиваний

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

получить в админ-панели Атома (информацию и параметры для входа вы получите по эл.почте).

Добро пожаловать в команду!