MixaPixa FAQ
Термины
  • Слайд - Сценарная единица ролика, один логический эпизод ролика. В редакторе также этим термином обозначается визуальный результат представляющий будущий ролик или баннер который можно наблюдать в окне редактора.

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

  • Шаблон - (шаблон слайда) это проект опубликованный в сервисе доступный другим пользователям.

  • Ролик - результат рендера (экспорта) проекта в конечный формат видео или баннера.

  • Граф - логическая схема(сеть) отражающая внутреннее устройство слайда , позволяющая проследить связи объектов и эффектов образующих слайд. Наглядно демонстрируя весь слайд в сборе и одновременно давая возможность просматривать и менять любоу часть слайда. Граф(математика)

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

  • Связи - направления передачи информации от ноды к ноде в графе. По связям передается информация о положении и габаритном размере визуального образа.

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

  • Порты - части ноды необходимые для формирования связей.

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

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

  • Параметры - это значения влияющие на логику нода. Значения параметров могут меняться во времени это называется анимация.

  • Точки - это точки анимации, ключевые точки, задающие определенное значение параметра в определенное время. Значение параметра между точками рассчитывается по формуле.

  • Формула - форма, правило, по которому значение изменяется во времени между двумя точками.

  • Габаритный размер - предельное очертание изображения.
Концепт
MixaPixa - это комплексное моделирование процессов, анимации, эффектов, компоновки и композиции.

MixaPixa позволяет создавать видеоролик используя граф. С помощью графа можно создавать и связывать ноды в логические цепочки и управлять их поведением за счет параметров. Такой подход к созданию анимированных роликов принято называть визуальным программированием.

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


Превосходство MixaPixa основано именно на нодовой структуре видео ролика. Работа в MixaPixa предполагает создание графов из нод , связанных друг с другом, которые описывают шаги для выполнения задачи. Например, нода, которая создает текст, может быть подключена к ноде, которая создает вокруг подложку, затем нода, которая выравнивает композицию, а затем нода, который редактирует позиции. Это дает вам огромную силу:


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

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

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

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

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

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


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


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

  • Удалить

  • Клонировать

  • Копировать параметры

  • Вставить параметры

  • Сделать активной



  1. Окно работы с слайдом

  2. Окно работы с графом и нодами

  3. Окно параметров ноды

  4. Окно работы с анимацией и точками

Анимация
Анимация это изменение значений параметров нод во времени.

Временем управляет ползунок времени. Изменяя его положение можно наблюдать слайд в состоянии соответствующем этому времени.

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

Формула хранится в точке и управляет характером изменения значения в промежутке перед этой точкой.


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

  • rotate Угол поворота, градусы

  • translate X Относительное смещение по оси х , пиксели

  • translate Y Относительное смещение по оси y , пиксели

  • scale X Относительный масштаб по оси х , доли

  • scale Y Относительный масштаб по оси х , доли

  • origin X Относительное положение центра по оси х , проценты от размера трансформируемого.

  • origin Y Относительное положение центра по оси y , проценты от размера трансформируемого.

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

Группа параметров Paddings (Отступы)
Paddings

  • padding left Отступ слева, пиксели

  • padding right Отступ справа, пиксели

  • padding top Отступ сверху, пиксели

  • padding bottom Отступ снизу, пиксели
Группа параметров Additional (Дополнительные)
  • bounding box
  • bounding box input
  • hide source
  • cut object
bounding box [start current end] Параметр позволяющий выбрать в какой момент анимации рассчитывать габаритный контейнер ноды.
Start - габаритный контейнер ноды будет рассчитан в начальный момент анимации, и не будет меняться в процессе анимации.
End - габаритный контейнер ноды будет рассчитан в конечный момент анимации, и не будет меняться в процессе анимации.
Current - габаритный контейнер ноды будет рассчитан в каждый момент анимации, и будет меняться в процессе анимации.

bounding box input В случае если у ноды несколько входящих портов данный параметр позволяет выбрать на основе какого инпута рассчитывать габаритный контейнер этой ноды. Значение All означет что габаритный контейнер будет рассчитан на основе ссумы всех инпутов.

hide source - Скрыть источник, в случае если у ноды есть входящее соединение используещеся как дополнительное, например для выравнивания, то данный параметр позволяет визуально скрыть обьект подключенный к инпуту с названием source

cut object - Позволяет обрезать изображение подключенное на вход с названием object по размерам габаритного контейнера изоборажения подключенного на вход с названием source.

Нода Text (Текст)
Входные порты = 1

Рисует текст, с определенными характеристики и положением.

Если к первому порту ничего не подключено то текст рисуется посередине экрана.

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

Смотреть видео-урок.
text - Текст
General

  • font family - Шрифт

  • font size - Размер шрифта, пиксели

  • fil - Заливка, RGB

  • opacity - Непрозрачность , 0- прозрачный 1- непрозрачный

  • interline - Межстрочное расстояние, проценты от размеров шрифта

  • interletter - Межбуквенное расстояние, пиксели

  • align [right,center,left] - Выравнивание строк текста относительно друг друга
Transform
Animation

  • animation type - тип побуквенная анимация

  • animation value - значение побуквенной анимации

  • direction - направление побуквенной анимации

  • animation function - направление побуквенной анимации

  • offset (сдвиг) - сдвиг букв при побуквенной анимации
Additional

  • bounding box

Нода Plate (Плашка)
Входные порты = 1

Рисует плашку(прямоугольник), с определенными характеристики и положением.

Если к первому входу ничего не подключено то прямоуголько изначально помещается в центр слайда и его размеры соответствуют параметрам width height.

Если к первому входу подключено чтото то прямоугольник рисуется вокруг того что подключено в точности повторяя габаритный контейнер того что подключено, параметры width height игнорируются.

Смотреть видео-урок.

  • General

    • fill Заливка, RGB

    • opacity - Непрозрачность , 0- прозрачный 1- непрозрачный

    • roundness - Скругление краев, пиксели

    • width - Ширина, пиксели

    • height - Высота, пиксели

  • Paddings

  • Transform

  • Additional

    • hide source

    • cut object

    • bounding box

Нода Border(рамка)
Входные порты = 1

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

Если к первому входу ничего не подключено то прямоуголько изначально помещается в центр слайда и его размеры соответствуют параметрам width height.

Если к первому входу подключено чтото то прямоугольник рисуется вокруг того что подключено в точности повторяя габаритный контейнер того что подключено, параметры width height игнорируются.

Смотреть видео-урок.

  • General

    • fill - Заливка, RGB

    • opacity - Непрозрачность , 0- прозрачный 1- непрозрачный

    • roundness - Скругление краев, пиксели

    • thickness - Толщина границы, пиксели

    • width - Ширина, пиксели

    • height - Высота, пиксели

  • Paddings

  • Transform

  • Additional

    • hide source

    • cut object

    • bounding box

Нода Media (Медиа)
Входные порты = 0

Загружает и рисует фото или видео, с определенными характеристики и положением.

Смотреть видео-урок.

  • file - сам файл медиа

  • General

    • opacity - Непрозрачность , 0- прозрачный 1- непрозрачный

    • start time - Время начала проигрывания видео, сек

    • speed - Скорость проигрывания видео, сек

    • freeze start frame - Закрепить первый кадр видео до начала проигрывания

    • freeze end frame - Закрепить последний кадр видео до начала проигрывания

  • Transform

  • Additional

    • bounding box

Нода Transform (Трансформация)
Входные порты = 1

Изменяет позицию, масштаб, поворот .

Смотреть видео-урок

  • Transform

  • Additional

    • bounding box

Нода Mask (Маска)
Входные порты = 2

Маскирует

Подключенное на первый вход это маска(mask) (чем маскируется) .

Подключенное на второй порт это объект(object) (то что маскируется).

Если ничего не подключено на порт маски то маской является слайд.

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

Маскирование по luma означает что сумма RGB/3 одного изображения переносится какбудто это прозрачность на другое изображение.

Инвертирование означает что все что было невидимым становится видимым и наоборот, пропорционально.

Смотреть видео-урок.

  • General

    • mask type [alpha, luma]- Тип маски

    • invert - инвертировать маску

  • Transform

  • Additional

    • bounding box input

    • bounding box

Нода Group (Группа)
Входные порты = 2...N

Группирует

Подключенное на порт 1 помещает в самый низ

Подключенное на прот 2 помещает выше

итд...

Смотреть видео-урок.

  • Transform

  • Additional

    • bounding box input

    • bounding box

Нода Shadow (Тень)
Входные порты = 1

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

Смотреть видео-урок.

  • General

    • fill

    • opacity

    • angel

    • distance

    • blur

  • Transform

  • Additional

    • hide source

    • bounding box

    • bounding box input

Нода Align (Выравнивание)
Входные порты = 2

Выравнивает.

То что подключено на первый порт источник(source) (это то относительно чего выравнивает)

То что подключено на второй порт (это то что выравнивается)

Если ничего не подключено на порт источника то выравнивание происходит относительно слайда.

Смотреть видео-урок.

  • General

    • horizontal - выравнивание по вертикали

    • vertical - выравнивание по горизонтали

  • Transform

  • Additional

    • hide source

    • bounding box

    • bounding box input

Нода Fit (Вписывание)
Входные порты = 2

Вписывает.

То что подключено на первый порт источник(source) (это то относительно чего вписывается)

То что подключено на второй порт (это то что вписывается)

Если ничего не подключено на порт источника то вписывание происходит относительно слайда.

Смотреть видео-урок.

  • General

    • fit type - тип подгонки

  • Paddings

  • Transform

  • Additional

    • hide source

    • bounding box

    • bounding box input


Нода Transition (Переход)
Входные порты = 2...N

Последовательно убирает с экрана то что подключено на предыдущий порт и появляет на экране то что подключено на следующий

Смотреть видео-урок.

  • General

    • fill

    • opacity

    • angel

    • distance

    • blur

  • Transform

  • Animation

    • animation type - тип анимации перехода

    • animation value - значение анимации перехода

    • direction - направление анимации перехода

    • animation function - направление анимации перехода

    • offset (Смещение начала анимация) - сдвиг

    • opacity - прозрачность при переходе

  • Additional

    • bounding box

Входные порты = 2...N

Последовательно убирает с экрана то что подключено на предыдущий порт и появляет на экране то что подключено на следующий


Нода Previous(Предыдущий)
Входные порты = 0

Рисует в текущем слайде часть предыдущего слайда.

Входные порты = 0

Загружает и рисует фото или видео, с определенными характеристики и положением.

Смотреть видео-урок.

  • General

    • opacity - Непрозрачность , 0- прозрачный 1- непрозрачный

    • end time - Время завершения проигрывания предыдущего слайда, сек

    • freeze end frame - Закрепить последний кадр видео до начала проигрывания

  • Transform

  • Additional

    • bounding box

Видео-уроки
Основы, интерфейс, принципы работы в MixaPixa

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

В этом видео показаны возможности MixaPixa на примере простых и более сложных слайдов.
От простого к сложному
Анимация в MixaPixa

В этом видео на примере простого слайда показан процесс создания анимации
От простого к сложному
Работа в MixaPixa, создание слайда с нуля

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

Миксапикса предоставляет множество простых и удобных инструментов для работы с изображением.
Один из самых частых и востребованных вопросов: Как обрезать изображение? Скрыть ненужные части фотографии.

МиксаПикса позволяет легко добиться этого при помощи графа, а результат работы удивит своими возможностям и удобству.
Как обрезать фотографию.
Как сделать подложку под текст

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

Часто необходимо чтобы текст не выходит за границу подложки и не разрушал композицию слайда.
Благодаря графу в МиксаПикса это стало возможно!




Как сделать чтобы текст не заходил за границы подложки.
Анимация текста

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




Анимация текста
Подложка из фотографии

Использовать фотографию в качестве подложки под текст, так чтобы ее размер всегда соответствовал тексту.
Подложка из фотографии
Подложка под текст в виде кисти

Оригинальная подложка под текст в виде кисти. И использование текста для создания отверстия в подложке.
Подложка из фотографии