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
49
Embed
Оглавление - Aniom Atom...3 Пример: “2.0” engine_pack Тип движка для всех элементов шаблона. В следствии смены движка
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Оглавление Последнее обновление: 27.07.2019
Создание пакета .......................................................................................................................................... 2
Основные настройки ............................................................................................................................... 2
Специальные настройки пакета ...................................................................................................... 4
Структура пакета .................................................................................................................................... 11
Элементы шаблона ......................................................................................................................... 14
Параметры группы .......................................................................................................................... 18
Пакет готов. Что дальше? ........................................................................................................................ 49
2
Создание пакета Откройте файл с примером пакета (Example Package.atom) в редакторе Notepad++/Sublime Text
или любом другом что имеет подсветку синтакса, и укажите синтакс кода как JavaScript (так будет
удобно и понятно работать с пакетом).
Примеры открытого пакета (редактор Sublime Text):
Без подсветки синтакса С подсветкой синтакса (JavaScript)
Основные настройки
Секция: pack_object.settings
Параметр Описание
name Название пакета Пример: “InstaManiac”
version Версия пакета с точкой (для бесплатной версии нужно ввести – DEMO, или выберите опцию в компиляторе). Если версия пакета DEMO, то при установке всегда будет присутствовать кнопка (при нажатии перейдет на нужную вам ссылку для получения полной версии пакета). В платных версиях такая кнопка отсутствует.
Пример: “1.4”
required_app_version Требуемая версия Атома для установки пакета. Актуальную версию смотрите на сайте. Пакет не будет установлен на версию ниже требуемой и попросит обновление расширения.
engine_pack Тип движка для всех элементов шаблона. В следствии смены движка меняются кнопки, Toolbar, настройщик и прочие параметры присущие типу движка. Для разных шаблонов может быть использованы разные типы движков. Под ваши нужды могут быть созданы новые или доработанны существующие (опции оплачиваются отдельно).
inside_security Внутренний код безопасности (укажите TEST_MODE для тестирования пакета). Будет установлен специальный код в компилированной версии пакета. Пример: “TEST_MODE”
required_purchase_code Требовать код покупки при установке пакета? Покупая проект с videohive.net / gumroad.com или иных магазинов, покупатель получает код покупки, который ему потребуется ввести в расширение чтобы установить пакет. Вы так-же можете генерировать временные коды активации с помощью админ-центра Атома, либо написав разработчику. Мы можем добавить дополнительную систему проверки покупки для ваших пакетов (оплачивается отдельно).
Выбор системы для проверки покупки указывается в админ-центре Атома, либо сообщив о нужной системе разработчику. По умолчанию - VideoHive. Подробнее читайте здесь.
• true – Запрашивать
• false – Не запрашивать (укажите это для бесплатных пакетов и во время тестирования пакета)
Пример: true
cc_author_username Никнейм автора который будет отображаться для пакета. Может быть не связано с VideoHive или иными системами оплаты. Так-же будет использован для входа в админ-центр Атома. Пример: “aniom”
С основной настройкой пакета мы закончили, теперь перейдем в настройки связанные с
проектами After Effects.
Специальные настройки пакета
Данные настройки находятся внутри:
inside_option_sets: { здесь }
Параметр Описание
auto_size_composition Авто-изменение размера композиции (из примененного шаблона) на ту которая задана у активной композиции пользователя.
• NONE – не применять
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 – добавить элемент в конец слоев (последний индекс)
6
Пример: “MOVE_ABOVE”
customizer_action Использование настройщика.
Чтобы использовать настройщик нужно добавить специальный комментарий (ATOM_CUSTOMIZER_LAYER)
для слоя с контроллерами (слайдерами, цветами и тд) внутри вашей композиции.
Укажите действие при нажатии на кнопку настройщика.
• SIMPLE – переход на слой с контроллерами
• EDITOR – редактор контроллеров и текста (если включено) прямо внутри расширения
Пример: “EDITOR”
customizer_text_editor Возможность редактирования текста прямо через расширение при нажатии на кнопку настройщика.
7
Ищет текстовые слои во всех композициях внутри основной, у которых добавлен специальный комментарий (ATOM_TEXT_EDITOR_LAYER)
Работает при условии, что значение выше (customizer_action) равно – EDITOR.
• true – Включить редактор текта
• false – Выключить Пример: true
8
Стилизация пакета Теперь давайте настроим последние параметры – стилизация для пакета (шапка расширения).
Данные настройки находятся внутри:
stylization: { здесь }
Параметр Описание
header_image_bytes Ваша личная картинка для шапки расширения в байтовом виде. Добавляется через программу Atom Toolkit Helper, которая поставляется специально для авторов. Картинка для шапки должна иметь формат .PNG Размеры: 282x75 (PSD файл для примера шапки добавлен в архив) Если вы понимаете как работать с байтами, и хотите добавить эти данные вручную то введите их здесь:
или в секции выше
header_color_hex Цвет продолжения фона шапки (правая часть) в формате HEX (включая знак # в
начале).
9
Пример: “#35AEDB”
10
Файлы предварительного просмотра Для предварительного просмотра одного элемента требуются два типа файлов:
• Статическая иконка элемента (формат .PNG)
• Предварительный просмотр элемента - анимация (формат .GIF)
Доступные варианты для предварительного просмотра элементов (размеры в пикселях):
240 x 135 (альбомные) 135 x 240 (портретные –для Instagram
и тд.)
240 x 240 (квадратная с равными пропорциями)
135 x 135 (уменьшенная
версия квадратной)
Размеры (в пикселях) и названия файлов должны быть одинаковыми для PNG и GIF.
О том как использовать эти файлы в структуре проекта – читайте ниже.
11
Структура пакета Секция: pack_object.structure
Структура пакета представляет собой иерархическую модель групп и шаблонов.
При нажатии на группу/шаблон:
• Группу – она открывается и показываются другие группы или шаблон.
• Шаблон – показываются все композиции/элементы шаблона (превью) справа.
Пример кода структуры (внутри секции pack_object.structure):
Шаблон Basic внутри группы Kinetic (которая внутри группы Typography).
Может возникнуть вопрос: как подгружаются файлы предварительного просмотра?
Названия групп и шаблонов имитируют собой папки (с текущими названиями) на вашем
компьютере.
Рядом с вашим пакетом (.ATOM) должны быть 2 папки (всё это вместе и есть пакет):
• Atom After Effects – Шаблоны After Effects
• Atom Preview Assets – Файлы предварительного просмотра
К примеру, если структура вашего пакета такая:
13
То папка с файлами предварительного просмотра должна выглядеть так:
Папка Atom Preview Assets -> Instagram Stomp -> наши файлы
В данном примере для названий файлов используются их идентификационные номера (однако
добавив специальный параметр вы можете использовать их обычные имена, информация об
этом в параметрах группы).
Тогда шаблон должен быть здесь:
Папка Atom After Effects -> наши файлы
Чем сложнее иерархия, тем больше папок и вложенных файлов в них. Так-же за счет специальных
параметров вы можете использовать любые другие имена для папок и проектов After Effects.
Читайте об этом в разделе параметры группы.
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
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 – коллапс
трансформация слоя
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 анимация идет в обратном
17
направлении). Требует слой контроля времени.
• TIME_REVERSE – реверсировать время слоя без добавления маркеров и специальных выражений.
Пример: “TIME_REMAP_IN_OUT_REVERSE”
18
Параметры группы Это настройки что действуют на все элементы (композиции) для заданного шаблона. Не являются
обязательным параметром.
Пример (настройки для шаблона Brush, пишутся через запятую):
Параметр Описание
custom_folder [Необязательный параметр] Ключевая папка [Atom Preview Assets] Собственное название папки (проводник файлов) для файлов предварительного просмотра. Если вы хотите чтобы название папки с файлами не совпадало с названием группы внутри расширения, то используйте данный параметр введя своё название. Пример: В структуре пакета указано название для шаблона как Instagram, однако папка с файлами предварительного просмотра (PNG/GIF) называется иначе и вы не хотите давать ей тоже имя. То просто введите здесь имя папки с файлами.
aep_file_name [Необязательный параметр]
Ключевая папка [Atom After Effects] Похож на параметр выше – только работает для шаблона After Effects. Если вы хотите чтобы имя шаблона отличалось от указанного имени в структуре пакета, то используйте данный параметр. Пример: В структуре пакета указано название для шаблона как Stomp, однако файл с шаблоном (AEP) называется иначе и вы не
19
хотите давать ему тоже имя. То просто введите здесь имя шаблона.
label_color_num [Необязательный параметр] Цвет слоя на временной шкале.
Введите число для указания цвета (от 0 до 16).
Пример: 3
20
preview_name_instead_id [Необязательный параметр] Использовать имя элемента вместо его идентификационного номера (для файлов предварительного просмотра – PNG/GIF).
Если данный параметр выключен или отсутствует, то вместо имён используются эти идентификационные номера элементов:
• true – использовать имена вместо ID
• false – использовать ID вместо имён Пример: true
change_engine [Необязательный параметр] Изменение глобального параметра для 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), чтобы использовать стандартный вариант – просто удалите этот параметр.
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 Так-же во время проигрывания аудио-файлов появляется эквалайзер
(можно отключить в настройках ), и дополнительная информация о времени аудио.
23
Аудиофайлы должны располагаться внутри папки (Atom Preview Assets) по пути структуры вместо файлов предварительного просмотра. Аудиофайлы должны иметь формат .WAV В файловом менеджере:
В структуре пакета:
• true – данная группа только с аудио-файлами
• false – не использовать как группу только для аудио-файлов Пример: true
24
Проверка кода покупки Вы можете проверять покупку пакета при его установке (покупатель должен будет ввести код
полученный при покупке), если продаете его на различных агрегаторах (магазинах), или же
использовать свою систему.
Главное — это генерировать код покупки при продаже, агрегаторы это делают сами, или же
можете настроить свой сервис.
К тому же с помощью админ-панели Атома (или написав разработчику) вы можете генерировать
временные коды покупки (на определенное кол-во активаций, истечение времени).
Это очень удобно!
Доступные варианты получения и проверки кода покупки: