WireWax

Автор инструкции по работе с сервисом

 

Орешко Марина Анатольевна,

 

 заведующая сектором литературного краеведения Библиотеки-музея имени Н.Н. Блинова г. Мурманск

Название сервиса: WireWax

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

Язык: английский

Ссылка: http://www.wirewax.com

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

Возможность организации групповой работы в сервисе

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

Возможности сервиса для образовательной деятельности

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

Где можно делиться материалами с сервиса

 Видеоурок можно встроить на страницу сайта или блога (пример размещения в блоге - http://moya-pesochnitsa.blogspot.ru/2016/10/wirewax.html).

 Алгоритм работы в сервисе

Регистрация

Для работы в сервисе необходима регистрация. Для этого заходим на сайт https://studio.wirewax.com/ и нажимаем «Sign up». В дальнейшем можно заходить на сервис, используя клавишу «Log in».

Зарегистрироваться можно, используя аккаунт Facebook или адрес электронной почты. При регистрации по адресу электронной почты щёлкаем по надписи «Email» и вводим адрес электронной почты, придумываем и подтверждаем пароль. Нажимаем «Enter». Регистрация завершена.

Загрузка видео и добавление тегов

После регистрации открывается рабочее поле для создания и редактирования видео.

Чтобы загрузить видео, нажимаем на значок «облако со стрелкой» слева вверху. Добавить видео можно по ссылке с видеохостинга или загрузить с ПК (в бесплатном аккаунте - видео не должно превышать 10 минут; для этого нажимаем «Drop file»). Процесс загрузки видео может занять какое-то время.

Чтобы начать редактировать видео, нажимаем на значок «Add tags». Откроется новая вкладка для добавления к видео заметок и аннотаций.

В открывшейся вкладке справа во вкладке «Settings» находятся окна для внесения названия видео (Video Title) и его описания (Video Description).

Начинаем добавлять метки. Видео запускается. В момент, когда необходимо вставить заметку, нажимаем на «паузу» и далее на значок «плюс» в левом углу видео

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

Для добавления статического тега нажимаем на значок «New Static Tag», для добавления динамического тега - «New Sticky Tag». Далее щёлкаем в необходимом месте видео, выделяем область для метки (например, обводим какой-либо объект на экране) и переходим к её редактированию. Окно для редактирования находится справа.

В окно «Tag Label» вносим название метки: это информация, которая будет появляться рядом при нажатии на неё. В окне «Tag In Point», если необходимо, устанавливаем время появления метки на экране. В окне «Tag Out Point» определяем время исчезновения её с экрана. По умолчанию время нахождения метки на экране – 2 секунды.

В разделе «Tag Interaction Behavior» определяем, что происходит, когда пользователь нажмёт на метку.

1. Display on overlay – открыть окно с дополнительной информацией.

2. Open URL in new window – прикрепить к видео ссылку и открыть её в новом окне.

3. Do nothing – при нажатии на метку ничего не происходит, метка в этом случае выступает просто как текстовая аннотация: может называть какое-то явление, содержать термин, перевод иностранного слова, имя и т.д.

Добавление дополнительных окон на основе шаблонов

Чтобы прикрепить к метке дополнительное окно с информацией, нажимаем «Display on overlay» в разделе «Tag Interaction Behavior». Далее нажимаем «Save Settings».

Открывается список шаблонов для оформления дополнительного окна:

- Recipe – рецепт приготовления блюда;

- Map – карта;

- Album – фотоальбом с комментариями;

- Shoppable – информация о стоимости какого-либо товара;

- СV – рекламный шаблон (предложение услуг);

- Carousel – слайд-шоу;

- Iframe – встроенный объект (например, презентация);

- Video – видео;

- Blank – пустое окно для добавления информации.

Любой шаблон можно просмотреть, наведя на него курсор и нажав «Preview». Выбираем шаблон нажатием «Use». Если шаблон не подходит для использования, возвращаемся обратно в библиотеку шаблонов, нажав «Back to template picker».

Шаблон Recipe подходит для добавления каких-либо списков, описания последовательности действий.

Можно удалять тексты и изображения и вместо них добавлять новые, нажав «Edit». К текстам можно применить дополнительные настройки: изменить цвет фона (Сolor), размер и прозрачность букв (Settings).

Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той клавиши внизу справа. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Справа – панель инструментов для изменения способа показа шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет.  В качестве виджета доступно добавление карты (Map) и встроенного объекта (iframe).

Шаблон «Map»

Для добавления необходимого фрагмента карты, нажимаем «Edit». В открывшееся поле вносим название населённого пункта, кириллица поддерживается. В разделе «Settings» устанавливаем масштаб карты и при необходимости делаем ее черно-белой.

Среди дополнительных настроек – изменение цветового фона шаблона, добавление ссылок на веб-ресурсы. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «Album» предназначен для прикрепления к метке нескольких фотографий с общим описанием. Чтобы прикрепить к метке слайдер, выбираем шаблон «Album» и нажимаем «Use». Открывается окно для редактирования шаблона. Для добавления своих изображений, выбираем «Edit image».

Далее загружаем изображения. Нажимаем значок с изображением облака и стрелки, если хотим загрузить картинку с ПК. Также можно добавить изображение по ссылке из Сети. Отмечаем необходимые для показа изображения «галочкой» справа внизу и для подтверждения нажимаем вверху «Confirm» (значок «галочка»). Ненужные изображения можно удалить (значок «корзина» слева внизу).

В разделе «Settings» можно настроить показ изображений – включить несколько опций (On – включить, Off – отключить):

- Автопоказ (Autoplay);

- Показ картинок-миниатюр внизу (Thumbnails);

- Показ порядкового номера изображения (Numbers);

- Возможность перехода от автопоказа к регулируемому зрителем (Controls).

Текст подписи к изображениям также редактируется (нажимаем «Edit»). Вкладка «Color» выбирает цвет текста. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «Shoppable» можно использовать для прикрепления к метке информации о каком-либо объекте (описание, изображение) и активной «кнопки» со ссылкой на веб-ресурс.

Редактирование шаблона такое же, как и в случае в шаблоном «Album». Для добавления своих изображений, выбираем «Edit image». Загрузить изображение можно с ПК или по ссылке. В разделе «Settings» можно настроить показ изображений – включить несколько опций (On – включить, Off – отключить):

- Автопоказ (Autoplay);

- Показ картинок-миниатюр внизу (Thumbnails);

- Показ порядкового номера изображения (Numbers);

- Возможность перехода от автопоказа к регулируемому зрителем (Controls).

Текст подписи к изображениям редактируется нажатием «Edit». Вкладка «Color» выбирает цвет текста. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность.

К активной кнопке «Buy» добавляется ссылка на веб-ресурс – для этого нажимаем «Edit». Текст кнопки можно изменить, для этого кликаем «мышью» название кнопки. Вкладка «Color» выбирает цвет фона. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность.Справа находится инструмент для изменения способа показа изображений.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «CV» подходит для описания какого-либо объекта с использованием изображений, небольшого текста и двух ссылок на веб-ресурсы.

Для загрузки изображения и текста выбираем «Edit» рядом с ними. Загрузить изображение можно с ПК или по ссылке. В разделе «Settings» можно настроить показ изображений – включить несколько опций (On – включить, Off – отключить):

- Автопоказ (Autoplay);

- Показ картинок-миниатюр внизу (Thumbnails);

- Показ порядкового номера изображения (Numbers);

- Возможность перехода от автопоказа к регулируемому зрителем (Controls).

При редактировании текста вкладка «Color» выбирает цвет фона. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность.

К двум активным кнопкам добавляются ссылки на веб-ресурс – для этого нажимаем «Edit». Текст кнопки можно изменить, для этого кликаем «мышью» название кнопки. Вкладка «Color» выбирает цвет фона. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность. Справа находится инструмент для изменения способа показа изображений.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «Карусель» (Carousel) – это слайдер из нескольких фотографий с подписью из нескольких слов и ссылкой на веб-ресурс.

Для загрузки изображения и текста выбираем «Edit» рядом с ними. Загрузить изображение можно  ПК и по ссылке. В разделе «Settings» можно настроить показ изображений – включить несколько опций (On – включить, Off – отключить):

- Автопоказ (Autoplay);

- Показ картинок-миниатюр внизу (Thumbnail);

- Показ порядкового номера изображения (Numbers);

- Возможность перехода от автопоказа к регулируемому зрителем (Controls).

При редактировании текста вкладка «Color» выбирает цвет фона. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность.

К кнопке «See more» добавляется ссылка на веб-ресурс – для этого нажимаем «Edit». Текст кнопки можно изменить, для этого кликаем «мышью» название кнопки. Вкладка «Color» выбирает цвет фона. В разделе «Settings» можно отрегулировать размер шрифта, его яркость и прозрачность. Справа находится инструмент для изменения способа показа шаблона.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «Iframe» помогает прикрепить к метке какой-либо встроенный объект, например, презентацию или страницу сайта с помощью ссылки.

Для добавления объекта, нажимаем «Edit» и в открывшееся окно вносим ссылку. Встраиваемый объект можно будет увидеть на предварительном просмотре.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Справа находится инструмент для изменения способа показа шаблона.

Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Для прикрепления к метке видео выбираем одноимённый шаблон (Video).

Для добавления объекта, нажимаем «Edit» и в открывшееся окно вносим ссылку на видео из YouTube или Vimeo.

Среди дополнительных настроек – изменение цветового фона шаблона. Слева находится дополнительная панель инструментов. С её помощью можно добавить в шаблон текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Справа находится инструмент для изменения способа показа шаблона.

Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той клавиши внизу справа. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Шаблон «Blank» - это пустая карточка, на которую можно добавить любое содержание, используя панель инструментов слева: текст, ссылку, изображение, видео и виджет (карта (Map) и встроенный объект iframe). Справа находится инструмент для изменения способа показа шаблона. Предварительный просмотр запускается клавишей «Preview», возвращение к редактированию – повторным нажатием той же клавиши. Чтобы сохранить шаблон, нажимаем на значок «галочка» (Save&exit).

Добавление ссылок на веб-ресурсы

Для прикрепления к метке ссылки на веб-ресурс, выбираем справа в разделе «Tag Interaction Behavior» опцию «Open URL in new window».

В открывшееся окно вносим ссылку на веб-ресурс и нажимаем «Save settings».

Важно! Ссылку добавляем без приставки «https://».

Дополнительные настройки

На панели инструментов справа доступно несколько дополнительных настроек для видео и аннотаций.

Раздел «Video Behavior» определяет, будет ли остановлено видео при нажатии на метку. Если поставить «точку» напротив «Prevent video from pausing on tag click», то видео будет воспроизводиться без паузы во время нажатия на метку.

В разделе «Tag Design» можно выбрать тип метки:

- Invisible – невидимая метка;

- Default Tag – тег по умолчанию;

- Pulse – пульсирующая точка;

- Direct Sum – тег в виде крестика;

- Countdown Tag – тег с обратным отсчетом.

 Если выбраны «Pulse», «Direct Sum», «Countdown Tag», то тег появится на экране, необходимо перенести его на нужно место на экране «мышью». В разделе «Tag Position» можно указать его точное местоположение на экране.

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

Текст метки можно немного отформатировать, для этого во вкладке «Advanced» выбираем вариант расположения аннотации в кадре (Tag Type). По умолчанию надпись располагается по центру - «Сenter».

Варианты расположения текста:

Top Right – вверху справа;

Top Left – вверху слева;

Bottom Right – внизу справа;

Bottom Left – внизу слева

Публикация и распространение

После добавления меток полученное интерактивное видео можно просмотреть (Preview video) и сохранить (Save). При необходимости можно вернуться к редактированию меток (Manage Tags).

Для публикации видео нажимаем «Publish Settings». Справа появится окно для публикации видео в социальных сетях (Twitter, Facebook).

Если необходимо получить прямую ссылку на видео, нажимаем «Watch on WIREWAX». Ниже находится код для встраивания видео на страницу блога или сайта.

Примеры работ


Полезные ссылки

  • Баданов А.Г. Wirewax manual [Электронный ресурс] // Google Презентация. - Режим доступа: https://goo.gl/KjMnIR

  • Баданов А.Г. Работаем с видео в сети онлайн. Несколько простых инструментов  [Электронный ресурс] // Сообщество учителей Intel Education Galaxy. - Режим доступа: https://edugalaxy.intel.ru/?automodule=blog&blogid=7264&showentry=10084