Редактор интерфейсов (Interface Editor): описание, настройка сцен и слоев

Общее описание

Компонент «Редактор интерфейсов» предназначен для создания интерфейсов, с которыми будут взаимодействовать пользователи при работе с шаблонами проектов на точках вещания.

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

Редактор компонента включает в себя:

1. панель сцен для управления экранами интерфейса;
2. панель свойств;
3. основная рабочая область для создания интерфейса;
4. кнопки добавления слоев;
5. панель слоев для отображения и настройки всех элементов, используемых на экране, панель зон для настройки видеостен.

Для добавления экрана нажмите кнопку «Добавить сцену».

Экран будет добавлен на панель сцен.

Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для изменения названия на панели сцен дважды нажмите на названии экрана и введите новое значение.

Название экрана будет изменено.

Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для настройки цвета фона экрана: 

1. На панели сцен выберите экран.          
2. На вкладке «Настройки» нажмите «Фон» и выберите цвет.
3. Фон экрана будет изменен.
4. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Компонент обеспечивает возможность установки времени, по истечению которого текущий экран будет автоматически переключен на другой экран компонента либо на другой компонент шаблона.

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

Включение смены экрана (сцены) на другой экран:

1. На панели сцен выберите экран.
2. На вкладке «Настройки» в поле «Длительность» введите значение времени, по истечению которого экран должен переключиться.                                 
3. Нажмите кнопку добавления ссылки и выберите экран, на который нужно переключиться.
4. Автоматическое переключение будет активировано.
5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Выключение смены экрана (сцены) на другой экран:

1. В поле «Длительность» введите значение «0».
2. Нажмите кнопку добавления ссылки и выберите значение «нет».
3. Настройка будет выключена.
4. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Включение смены экрана (сцены) на другой компонент:

1. На панели сцен выберите экран.
2. На вкладке «Настройки» в поле «Длительность» введите значение времени, по истечению которого экран должен переключиться.       
3. 
4. Нажмите кнопку добавления ссылки на компонент и выберите компонент, на который нужно будет переключиться.

1. Автоматическое переключение будет активировано.
2. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Выключение смены экрана (сцены) на другой компонент:

1. В поле «Длительность» введите значение «0».
2. Нажмите кнопку добавления ссылки на компонент. На открывшемся рабочем столе нажмите кнопку удаления ссылки на компонент.
3. Настройка будет выключена.
4. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для включения анимации при появлении экрана:

1. На панели сцен выберите экран.
2. На вкладке «Настройки», в первом поле «Анимация перехода» выберите одно из доступных значений:

• нет – без анимации;
• Слева – появление слева-направо;
• Справа – появление справа-налево;
• Сверху – появление сверху-вниз;
• Снизу – появление снизу-вверх;
• Проявление.

     3. Во втором поле «Анимация перехода» выберите одно из доступных значений эффекта появления экрана:

• Назад легко;
• Отскок легко;
• Эластично легко;
• Линейно легко;
• Обычно легко;
• Сильно легко.

     4. В поле «Длительность анимации» введите продолжительность анимации в секундах.

     5. Анимация будет настроена.

     6. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для изменения порядка на панели сцен перетащите экран в нужное местоположение списка. Порядок будет изменен. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для копирования сцены:

1. На панели сцен выберите сцену.
2. Нажмите кнопку копирования.                             
3. Сцена будет скопирована со всеми настройками и элементами.
4. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для удаления сцены:

1. На панели сцен выберите экран.
2. Нажмите кнопку удаления.                             
3. Сцена будет удалена.
4. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

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

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

Для добавления слоя нажмите на соответствующую кнопку.

При добавлении некоторых слоев на экран (сцену) будет выведено всплывающее окно для выбора фонового изображения слоя.

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

Редактор интерфейсов обеспечивает возможность импорта слоев из файлов, подготовленных в Adobe Photoshop CC и Illustrator CC, которые были сохранены в режиме совместимости.

При импорте сохраняются свойства графики – графика переносится в идентичном источнику виде с сохранением порядка слоев и координат объектов.

Для импорта слоев из Photoshop:

1. В панели сцен выберите нужный экран (сцену).
2. Перетащите импортируемый PSD-файл из каталога операционной системы в основную рабочую область компонента.
3. Если требуется импорт текстовых надписей в виде текстовых слоев, а не изображений (медиаслой), в открывшемся окне установите флажок «Импортировать все тексты как текстовые слои». Для импорта слоев воспользуйтесь кнопкой «Импорт».
4. Слои будут импортированы на выбранный экран (сцену) и доступны для настройки.

Каждый слой содержит свойства для настройки его внешнего вида, функционирования и содержимого. Настройка слоев осуществляется на панели слоев и панели свойств.

Слой может быть одновременно размещен на одном или нескольких экранах интерфейса. Размещение может быть выбрано:

• на панели слоев;
• на панели свойств.

Для выбора размещения слоя на экранах (сценах):

1. На панели слоев или в основной рабочей области выберите слой.
2. Нажмите кнопку выбора экрана.
3. Установите флажки в строках с экранами, на которых должен присутствовать слой. Для размещения слоя на всех экранах выберите пункт «Отобразить на всех сценах».
4. Слой будет размещен на выбранных экранах. При размещении на нескольких экранах, изменение настроек слоя на одном экране приведет к идентичным изменения слоя на других экранах, на которых он размещен.
5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для настройки видимости слоя:

1. На панели слоев или в основной рабочей области выберите слой.
2. На панели слоев нажмите кнопку изменения видимости.
3. Видимость слоя будет изменена.
4. Для одновременной настройки видимости всех слоев, нажмите кнопку изменения видимости, расположенную над списком.
5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

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

1. На панели слоев или в основной рабочей области выберите слой.
2. На панели слоев нажмите кнопку запрета редактирования.
3. Запрет на редактирование слоя будет изменен.
4. Для одновременной настройки доступности редактирования всех слоев, нажмите кнопку запрета редактирования, расположенную над списком.
5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Настройки размера и местоположения слоя включают в себя:

• кнопка включения/выключения пропорционального изменения размера слоя;
• поля «Ш» и «В» – ширина и высота;
• поля X и Y – координаты слоя на экране (сцене);
• кнопка установки размера слоя по умолчанию (для всех слоев кроме графических примитивов и вебфреймов);
• поле «Регистрация» – точка отсчета координат слоя, относительно этой точки отсчитываются координаты экрана, указанные в полях X и Y.

Для настройки размера и местоположения слоя на панели свойств откройте вкладку «Позиция» и внесите соответствующие изменения. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для настройки привязки слоя:

1. На панели свойств откройте вкладку «Позиция».
2. В поле «Привязка» выберите одно из доступных значений:

• Сцена – привязка положения слоя к экрану (сцене);
• Курсор – привязка положения слоя к курсору;
• Контейнер – привязка положения слоя к другому слою экрана.

    3. Если в поле «Привязка» было выбрано значение «Контейнер», в поле «Контейнер» выберите слой, к которому должен быть привязан текущий.

    4. Привязка слоя будет настроена.

    5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Доступные эффекты:

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

Для добавления эффекта слоя:

1. На панели свойств откройте вкладку «Эффекты».
2. Нажмите кнопку добавления эффекта и выберите нужный.
3. Внесите изменения в настройки эффекта.       
4. Для удаления эффекта, воспользуйтесь соответствующей кнопкой.

5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.

Для настройки анимации слоя:

1. На панели свойств откройте вкладку «Анимация».
2. В полях «Проявление на» и «секунде за» введите на какой секунде должен появиться слой и за какое время он должен появиться.
3. В полях «Скрытие на» и «секунде за» введите на какой секунде должен исчезнуть слой и за какое время он должен исчезнуть.
4. Анимация слоя будет настроена.
5. Нажмите кнопку «ОК» или «Применить» для сохранения внесенных изменений.