Sozi

О программе

Sozi – легкая программа для создания презентаций с анимированными переходами между слайдами (кадрами). Идеология работы состоит в том, чтобы загрузить в программу один SVG файл, созданный заранее, в котором почти в произвольном порядке будут размещены композиции для каждого слайда будущей презентации. А в Sozi пользователю останется создать серию слайдов, на каждый слайд назначить отдельный участок svg-изображения, назначить тип и время перехода между слайдами и сохранить в один из форматов: HTML (для демонстрации в браузере), PPTX (презентация в PowerPoint) или MP4 (видео).
Результат работы очень похож на то, что создается в программах Prezi или HelpXplain. Т.е., получается презентация с красивыми перелетами камеры между слайдами. Есть русский интерфейс.

В чём создавать заготовку

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

Создаются svg-файлы в программах векторной графики. Самые известные – Adobe Illustarator и Corel Draw. Можно также выделить Affinity Designer, одну из самых современных и креативных программ, а также Inkskape, являющуюся open sourse приложением. Кроме того, в интернете можно встретить онлайновые векторные редакторы, о которых читайте в обзоре и получайте ссылки.

Наверняка, во время работы в Sozi вам понадобится время от времени возвращаться в векторный редактор и править SVG-файл. При этом изменения в Sozi будут отображаться мгновенно, если это задано в настройках параметром "Загрузить вновь SVG документ".

Как работать

Итак, SVG файл создан. Теперь его надо загрузить в Sozi – нажмите кнопку [Откройте SVG файл на Вашем компьютере]. Впрочем, при запуске программы, сразу предлагается окно для выбора и открытия такого файла. Далее под основным экраном нажмите кнопку [+] для добавления слайда (кадра). После этого дайте ему название в поле "Название" справа вверху, и в окне файла отрегулируйте участок, который должен соответствовать первому слайду, т.е., создать нужное перемещение, масштабирование и поворот.

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

Интересная настройка в поле "Относительное увеличение", которая указывает, на сколько процентов камера должна отдалить всю сцену или приблизить всю сцену в середине перехода. Если этот параметр не трогать (по умолчанию 0), то анимация будет протекать в одной плоскости.

Еще более интересно понять как работать со слоями. Когда вы создаете SVG файл советую размещать фигуры или наборы фигур, которые в Sozi планируете анимировать отдельно от всей сцены, в отдельных слоях верхнего уровня. Sozi видит эти слои и по кнопке [Добавить слой] может вытащить слои на таймлайн по отдельности и применить к каждому слою перемещение, масштабирование, поворот также по отдельности.
Также слою можно задавать прозрачность на каждом слайде свою.

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

Навигация по слайдам

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

В браузере в вашей результирующей презентации переход будет осуществляется по клику мыши (ЛКП – вперед, или ПКП – назад) в любом месте слайда. Также можно в настройках презентации в разделе Player, разрешить навигацию с помощью кнопок клавиатуры – переходы будут начинаться по клавишам-стрелкам или по Enter и [Пробел].

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

Еще программа генерит интерактивное меню из "Названий" кадров, а в настройках ползунком Title level in frame list можно отрегулировать иерархический уровень в этом меню.

Как сохранять

По кнопке сохраняется проект и HTML5 презентация. Имена этих файлов привязываются к имени SVG файла и сохраняются в ту же папку, где лежит SVG. Проект состоит из трех файлов:

   <имя_svg_файла>.svg
   <имя_svg_файла>-presenter.sozi.html
   <имя_svg_файла>.sozi.json

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

   <имя_svg_файла>.sozi.html

Обратите внимание, чтобы открыть проект, над которым вы работали, и продолжить редактирование, надо открывать SVG-файл!

Пользователю при просмотре в браузере будет доступно меню всей презентации, которое открывается по кнопке-цифре в верхнем левом углу любого слайда. Кстати, то или иное "Название" можно исключить из этого меню кнопкой [Показать в списке кадра] в параметрах слайда. Это будет уместно сделать для промежуточных кадров при создании последовательной анимации слоев, у которых будет включен параметр "Временная задержка".

Меню выплывает на время, как сказано, по клику на кнопку-цифру. Ширина меню по умолчанию составляет 33% от ширины экрана. Мне кажется, это не очень красиво в большинстве случаев, поэтому, в файле <имя_svg_файла>.sozi.html я этот параметр корректирую в css-классе .sozi-frame-list и ставлю width в пикселах, ориентируясь на длину заголовков слайдов.
Кроме HTML можно сохранить в видео или презентацию PowerPoint – для этого воспользуйтесь кнопкой .

Пример презентации, созданной в Sozi (клик левой или правой кнопкой мыши для движения вперед или назад):

Скачать, посмотреть

📥 Программа официально бесплатная. Установочные файлы скачиваются с сайта разработчика. Поддерживаемые операционные системы: Windows, Linux, MacOS.
📥 Также предлагается портабельная сборка Sozi 22.03.25. Пароль для разархивирования: newart.ru

Видео:
📺 Процедура работы в Sozi.
📺 Работа со слоями в Sozi.