WireWax

Автор инструкции:

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

методист ЦДО “Снейл”

  1. Информация о сервисе

WireWax (http://www.wirewax.com/home/create-own) - онлайн-сервис для создания интерактивного видео. С его помощью можно оставлять пометки в нужных частях видеосюжета, добавить к ним текст, изображения, видео, карты, встроенные объекты, ссылки на веб-ресурсы.

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

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

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

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

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

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

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

Регистрация

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

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

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

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

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

Регистрация

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

1.jpg

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

2.jpg

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

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

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

3.jpg

4.jpg

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

5.jpg

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

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

6.jpg

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

7.jpg

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

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

8.jpg

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

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

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

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

9.jpg

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

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

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

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

- Map – карта;

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

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

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

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

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

- Video – видео;

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

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

10.jpg

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

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

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

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

11.jpg

12.jpg

Шаблон «Map»

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

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

13.jpg

14.jpg

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

15.jpg

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

16.jpg

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

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

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

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

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

17.jpg

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

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

18.jpg

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

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

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

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

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

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

19.jpg

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

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

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

20.jpg

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

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

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

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

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

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

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

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

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

21.jpg

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

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

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

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

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

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

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

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

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

22.jpg

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

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

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

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

23.jpg

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

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

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

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

24.jpg

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

25.jpg

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

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

26.jpg

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

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

27.jpg

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

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

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

28.jpg

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

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

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

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

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

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

29.jpg

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

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

30.jpg

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

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

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

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

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

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

31.jpg

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

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

32.jpg

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

33.jpg

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

34.jpg