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

Масштабирование и повороты изображения в презентациях Sozi

Дорабатываем презентацию с прошлого урока.

Чтобы применить масштабирование достаточно создать фрейм меньшего или большего размера по сравнению с предыдущим. Создайте дубликат существующей рамки и измените ее размер.

Удобно применять модификаторы Ctrl и Shift при изменении размера объекта. Зажмите Ctrl при модификации  - это позволит сохранить его оригинальные пропорции. Зажмите Shift и растяните объект относительно его центра. Зажатие комбинации  Ctrl + Shift позволит пропорционально растянуть или сжать объект относительно его центра.

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

Теперь нужно выделить новую рамку и создать новый фрейм ("Круг - зум" / "circle-zoom") в Sozi. Так получается, что новый фрейм всегда внизу списка -для его перемещения воспользуйтесь дополнительной кнопкой ">>" на панели инструментов (правее кнопки "Delete"). При помощи кнопок "Move frame up" переместите новый фрейм под фрейм "Круг".

Масштабирование элементов Sozi

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

Масштабирование элементов Sozi

Аналогично я создал фрейм "Треугольник - зум" / "triangle-zoom" и поставил его третьим в списке. Теперь презентация показывает круг, увеличивает текст, переводит рамку на второй текст и уменьшает его, показывая треугольник.

Вращение элементов Sozi

Повороты тоже могут внести определенный эффект, но он все-таки больше проявляется в других условиях и примитивы тут подходят, пожалуй, меньше всего. Но, для наглядности, давайте повернем рамку четвертого фрейма "Треугольник" на 45 градусов против часовой стрелки и сместим её так, чтобы треугольник располагался в центре.

Повернуть объект можно несколькими способами:

  1. Выделить объект кликом ЛКМ и повторно кликнуть ЛКМ по объекту - маркеры изменят форму, показывая возможность вращения. При зажатии Ctrl вращение будет выполняться шагово по 15 градусов, это очень удобно, чтобы получить 45.
  2. Выделить объект и вызвать меню "Объект - Трансформировать" (или сочетание Shift + Ctrl + M) и на панели параметров выбрать вкладку "Вращение". Там можно указать направление и величину, а потом нажать кнопку "Применить"

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

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

Работа со слоями в Sozi

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

Пример такой анимации я выложил в первой статье о Sozi. Там видно, как движется транспорт и солнце, при этом движения эти имеют разные направления и сложность.

Создайте новый файл SVG, если не хотите продолжить работу над предыдущей презентацией. Я же буду творить с чистого листа, чтобы не вносить путаницы.

В Inkscape управление слоями можно производить на панели, которая вызывается из меню "Слой - Слои…" (Shift + Ctrl + L). Работать будем снова с примитивами, но теперь сделаем это с помощью слоев.

Работа со слоями Sozi

Создадим два дополнительных слоя, так как "Layer 1" уже имеется (Кнопка "+" - Создать новый слой или Shift + Ctrl + N). Слоям следует давать осмысленные названия и лучше латиницей, чтобы не заблудиться в процессе. Мои слои в порядке от верхнего к нижнему:

  1. Text
  2. Primitives
  3. Primitives-name

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

На нижнем слое будут подписи примитивов, сделаем им отдельную анимацию. Разумеется для самих примитивов нужно придумать тоже свой "выход", а верхний слой - статичный, просто название презентации.

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

Выделите слой "Text" и разместите на нем название презентации. Можно просто "Изучаем графические примитивы". Поместите на этом же слое одну рамку и создайте фрейм в Sozi с использованием одной этой рамки с названием "Заголовок" / "Title" (через слеш я указываю сразу title и id фрейма). Сохранитесь и убедитесь, что фрейм показывается в браузере.

image012

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

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

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

Работа со слоями в Sozi

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

Работа со слоями в Sozi

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

По моему плану в презентации хочется сначала видеть заголовок - потом чередование примитивов с подписями. Но так как заголовок занимает всю область экрана - его следует или убрать, или уменьшить и сместить. Именно это я и сделал при помощи второй большой рамки.

Теперь нужен выход геометрических фигур. Так как самое главное - научиться работать со слоями, заморачиваться с анимацией пока не буду. Но перед этим делом нужно нарисовать примитивы на нужном нам слое или нарисовать где попало и затем переместить их (ПКМ по объекту - "Переместить на слой…" - в списке выбрать определенный слой).

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

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

1. На слое "Primitives" нарисовать круг прямо внутри второй рамки слоя "Text"

2. На слое "Primitives-name" расположить текст "Круг" тоже внутри второй рамки слоя "Text"

3. Выровнять объекты внутри рамки относительно друг друга и границ фрейма

4. Выделить вторую рамку (бОльшую) слоя "Text" и создать два ее дубликата (Ctrl + D)

5. Выделить верхний дубликат (он всегда последний), ПКМ по этой рамке - перенести на слой  "Primitives"

6. Выделить второй дубликат (он снова будет верхним, так как слой "Text" выше остальных), ПКМ по этой рамке - перенести на слой  "Primitives-name"

Позиционирование элементов презентации Sozi

Так мы растащили рамки с объектами по нужным нам слоям и тем самым обеспечили точное позиционирование объектов как задумали изначально. Убедитесь, что все правильно сделали, выключив видимость слоев и поочередно включая её обратно у каждого слоя. На слое "Primitives" должна быть красная рамка и круг, а на слое "Primitives-name" надпись "Круг" и красная рамка.

Обязательно проверьте по имени объекта вторую рамку слоя "Text", что вы не перенесли её случайно на другой слой вместо дубликата.

7. Теперь оставьте видимость только у слоя  "Primitives"

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

9. Сместите обе фигуры вниз и включите слой "Text", убедившись, что они не пересекаются

Позиционирование элементов презентации Sozi

10. Проделайте то же самое с объектами слоя "Primitives-name" чтобы они не пересекались с объектами других слоев (не обязательно как у меня, можно растащить их далеко относительно друг друга, чтобы вокруг было место для новых рамок, которые мы применим для анимации)

Позиционирование элементов презентации Sozi

Снова работаем со слоем "Primitives", остальные невидимые.

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

Позиционирование элементов презентации Sozi

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

Позиционирование элементов презентации Sozi

  1. Крайняя левая рамка - для начального положения фокуса слоя. Она должна быть пустой, так как в это время там будет большой текст названия презентации.
  2. Вторая рамка с кругом - он появится, когда уменьшится заголовок презентации.
  3. Следующая рамка с треугольником, который сменит круг.
  4. Последняя рамка снова пустая для выхода из анимации - там будет типа контактные данные и "спасибки" за внимание и всякая фигня, которую пишут в заключении, если надо.

Cоздадим анимацию слоя "Primitives":

  1. Выделите первую (левую) рамку, перейдите в Sozi и выделите первый фрейм. Рядом с кнопкой "New" нужно нажать стрелочку вниз и в появившемся списке выбрать "Add layer Primitives". Это мы установили начальное положение рамки слоя.
  2. Аналогично выделяя следующие рамки второго слоя добавлять их последовательно к оставшимся трем фреймам.

Натройка анимации слоев Sozi

Натройка анимации слоев Sozi

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

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

  • Изначально следует полностью нарисовать все сцены, которые будут в презентации и только потом заниматься анимацией.
  • В процессе создания следует чаще сохранять и пересохранять файл с разными названиями, так технология еще сыровата и бывает сбоит (было даже пару раз, что презентация после каких-то махинаций даже на редактирование не открылась ни в одном редакторе графики).
  • Эксперименты по анимации отдельных сцен презентации лучше проводить в отдельных svg-файлах: во-первых - безопаснее, во-вторых - быстрее, так как чем больше размер презентации, тем больше тормозит Sozi.
  • Входящие (пустые) рамки для слоев всегда нужно располагать в первом фрейме, чтобы потом избежать пересечения движения элементов.
  • Избегайте сложных градиентных векторных композиций, так как это сильно понизит производительность. Иногда лучше вставить растровый рисунок хорошего разрешения, чем издеваться над сложным вектором.
  • Изучайте особенности редактора, чтобы быстро создавать и изменять графику.
  • Переведите все объекты в кривые, особенно касается шрифтов - если на ПК, где проигрывается презентация нет шрифтов, которые использовал автор, будут использованы другие шрифты автоматически и весь дизайн "коту под хвост".
  • Всегда располагайте элементы и рамки вне рабочей области (лист в редакторе по центру), так как до запуска сценария Sozi будет показана в браузере именно эта область со всеми там рамками, но закулисье должно оставаться за кулисами.
  • Управляющий слой (где рамки фреймов) всегда должен располагаться поверх остальных слоев, которые вы намерены показать в презентации (иначе работать оно будет, но до поры до времени…).
  • Если во время выполнения скрипта Sozi Inkscape завис, глюкнуло окно применения эффектов - убейте все экземпляры процесса gspaun-win32-helper.exe при помощи диспетчера задач.

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле