Вот и настала пора рассказать про один из самых известных и популярных сервисов для создания интерактивного контента. И имя ему — Genial.ly.

Чего он только не умеет создавать! Инфографику, презентации, игры,  викторины, инструкции,  видеопрезентации,  квесты, флеш-карточки и многое другое… 

Работать в сервисе совсем несложно, ведь он предлагает большое количество разнообразных шаблонов. Но самое замечательное — это интерактивность: она позволяет давать комментарии к объектам, открывать всплывающие окна, делать гиперссылки.

Также платформа поддерживает совместную работу. А в бесплатном аккаунте можно создавать неограниченное количество ресурсов.

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

Читатель может нажимать на эти метки и просматривать дополнительные материалы, рассматривать объекты более подробно, смотреть видео, переходить на другие веб-ресурсы.

Вот пример такого интерактивного плаката — виртуальная выставка «Война прошла сквозь наши души»

Регистрация

Заходим на сайт Genially, нажимаем «Sign Up» или «Get started — it’s free!» — и сразу заполняем форму для регистрации. В дальнейшем для входа на сайт можно нажимать «Login».

Обладатели аккаунтов Google могут зарегистрироваться в сервисе через них.

А можно пойти традиционным путём — зарегистрироваться с помощью электронной почты (Sign up with your email).

При регистрации надо указать адрес электронной почты, придумать пароль, поставить галочку напротив «I have read and accept Genially’s terms of use and privacy policy», а потом нажать «Sign up».

После этого ищем на почте письмо от создателей сервиса для подтверждения аккаунта: нужно перейти по указанной в нём ссылке.

Дальше нажимаем на кнопку «You’re all set». 

А дальше придётся ответить на несколько вопросов.

Во-первых: какой аккаунт будет создан – образовательный или корпоративный. Выбираем «Education» и нажимаем «Continue».

Указываем свою профессию, например, «Teacher».

Выбираем учебное заведение, в котором работаем.

Ещё сервис предложит назвать свою организацию, но можно этот шаг пропустить (Skip this step), что я и сделала.

И вот теперь можно наконец приступить к созданию первого проекта: нажимаем «Start».

Загружаем изображение

А дальше из меню выбираем шаблон для создания интерактивных плакатов — «Interactive Image».

Можно для работы взять один из шаблонов, но мы попробуем создать плакат «с нуля». Нажимаем «Create Interactive Image».

Шаг второй — загружаем фоновое изображение, на котором будем размещать интерактивные метки. Можно с ПК, а можно и по ссылке.

На стадии загрузки картинку можно развернуть по вертикали и горизонтали, масштабировать и обрезать.

Теперь приступаем к самому вкусненькому.

Интерактивные метки 

Давайте-ка осмотримся. В центре экрана — загруженное фоновое изображение.

Слева сбоку — инструменты для добавления разных интерактивностей. В правом верхнем углу — очень полезная кнопка «Предпросмотр» (с изображением глаза) для предварительного просмотра плаката.

В графу «Interactive image» вписываем название плаката или выставки.

Можно добавить к плакату фоновую музыку. Для этого нажимаем на кнопку «Add background audio».

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

Мы будем работать с разделом «Interactive elements». Он добавляет на плакат разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, маркеры с текстом и цифрами, логотипы. 

Две метки уже добавлены самим сервисом. Можно их удалить и добавить свои. Чтобы открытьвесь набор меток, нажимаем на надпись «Show more».

Метки можно перекрашивать, копировать, удалять, делать прозрачными и закреплять на изображении.

Можно даже невидимые метки создавать! Делается это в разделе «Interactive area».

Вот как выглядит плакат с такими метками.

Добавляем интерактивность

Теперь метки, которые мы добавили на плакат, сделаем интерактивными. Для этого щёлкаем по нему «мышкой» — и сразу появляются изображения «пальца» и «кометы» (ну я так думаю, что это комета, может, и ошибаюсь, может, это метеорит).

Если нажать на «пальчик» – можно перейти к добавлению контента. Если на значок с «кометой» – анимировать этот объект.

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

Итак, какие интерактивности нам предложит Genially? Интерактивностей несколько, но для создания плаката нам подойдут три из них.

«Tooltip» поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).

«Window» создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.

«Link» превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.

Это конструктор для добавления всплывающего окошка (Tooltip).

Вверху находится поле для редактирования текста и добавления медиа. Можно вставить гиперссылку, картинку, таблицу, видео.

Если мы выбрали интерактивность «Window», то придётся дополнительно выбирать шаблон оформления окна, который предложит сервис или начать «с чистого листа» (Blank). По опыту, лучше выбирать готовый шаблон.

Выбираем подходящий шаблон и нажимаем «Edit window».

Дальше изменяем шаблон по своему вкусу. Это как слайд внутри слайда. Можно стирать надписи и заменять их на свои, загружать изображения. Можно даже добавлять интерактивные метки,  используя инструменты на панели слева (о них я рассказывала выше). Вот такая «матрёшка в матрёшке» получается.

Чтобы вернуться назад, нажимаем на кнопку «Back to page».

А эта опция «Link», которая добавляет ссылки на веб-ресурсы. Не забываем нажать «Save».

Настраиваем анимацию

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

Анимация может быть разная: появление (Enter), исчезание (Exit), совершение каких-то действий, например, вращение (Continuous), действия при наведении курсора (Hover mouse) и клике «мышкой» (Click).

Внутри каждого раздела большое количество видов анимации (Effect). 

Публикация

Интерактивный плакат создан. Чтобы опубликовать работу и получить ссылку на неё, нажимаем справа вверху на кнопку «Share».

В открывшемся окошке даём название плакату, добавляем описание и, если нужно, даём разрешение другим пользователям сервиса создавать ремиксы на нашу работу. Снова нажимаем «All set!»

Можно получить ссылку (вкладка «Link») или код, чтобы встроить плакат на страницу блога или сайта (вкладка «Insert»).

Но это ещё не всё!

Среди «плюсов» сервиса — возможность устроить коллективную работу по созданию интерактива. Можно добавить других участников и пригласить их для работы (только чур — пусть сначала зарегистрируются в сервисе). Как это сделать?

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

В открывшееся окошко вносим адреса электронной почты своих будущих соавторов и нажимаем «All set».

Готово! Приглашенный участник получит ссылку для редактирования и… море удовольствия от работы в сервисе.

Здесь же, в личном кабинете, нажав на значок с тремя точками (Options), можно вернуть работу в состояние черновика, переименовать, дублировать её или удалить. 

Чтобы вернуться к редактированию работы, наводим на неё курсор и нажимаем «Edit».

И напоследок — ещё один интерактивный плакат.