Сегодня мы протестируем довольно интересный сервис для создания анимированных презентаций под названием Moovly

С его помощью в бесплатном тарифе можно создавать видео и анимацию длиной до 2 минут и в качестве 480р.

Вот такой видеоролик я создала с помощью этого инструмента.

Регистрация

Для начала заходим на сайт и регистрируемся. Вот так выглядит стартовая страница Moovly. Нажимаем на кнопку «Sign up» или «Start now».

В дальнейшем для входа на сайт нам пригодится кнопка «Login».

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

После регистрации на электронную почту придёт письмо для активации аккаунта. Переходим по присланной ссылке, нажав на кнопку «Activate».

Осталось придумать себе пароль: не менее 8 букв, одна — заглавная, одна — цифра. И нажать «Continue».

Шаблоны

И вот мы в личном кабинете. Можно сразу нажимать «Create project» и начинать творить! 

Интересная штука. Если нажать на кнопку в центре, сразу откроется редактор. Если нажать на кнопку вверху, сервис сначала поинтересуется, как именно мы планируем создавать видео: «с нуля», на основе шаблона или на основе презентации PowerPoint.

Про презентацию поговорим в конце статьи, а пока про шаблоны. Их немного, для простоты их рассортировали по категориям. Кое-какие — платные (помечены специальным значком в верхнем углу). Чтобы просмотреть подходящий шаблон, щёлкаем по нему «мышкой».

Чтобы открыть видеоредактор, нажимаем «Use template». Можно вызвать «быстрый редактор», который пошагово подскажет, что именно надо поменять в шаблоне. 

Загружаем картинки, вписываем тексты. Пять минут — видео готово.

Нажимаем «Finish».

Как устроен видеоредактор?

Но интереснее, конечно, поработать в видеоредакторе. Давайте попробуем создать что-нибудь «с нуля», а заодно и разобраться в хитростях сервиса.

Принцип работы очень простой: у автора презентации есть всего один (!) слайд, на котором и будет разворачиваться действо. Один персонаж появляется, другой исчезает… Минимализм, однако.

Для начала даём название проекту, нажав на значок-карандаш вверху.

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

1. Moovly Library (библиотека сервиса) — набор картинок (Graphics), фонов (Background) и музыкальных файлов (Soundstripe music), которые можно добавлять в проект.

2. Personal Library — картинки, которые можно загрузить самостоятельно с ПК и использовать в своё удовольствие. Здесь же будут располагаться аудио- и видеофайлы, которые будем загружать в презентацию — с помощью кнопки «Upload media».

Справа находятся разные дополнительные настройки. Во вкладке «Stage Properties» можно поменять фон слайда (по умолчанию — белый), выбрать вид проекта (видео или презентация) и установить формат готового проекта (16:9, 1:1, 4:3 и ещё множество разных форматов).

Вверху — кнопка для добавления текста и фигур, а также традиционные клавиши из серии «вперёд-назад» и «копировать-вырезать-вставить».

Внизу — лента времени для определения времени появления и исчезания объектов в кадре, а также для выбора разных «анимашек».

Что написано пером…

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

На слайде появится окошко для размещения текста с надписью «Type Here». А справа — во вкладке «Style» разнообразные инструменты для редактирования (шрифт, размер, цвет, фон и т.д.).

Опция «Fixed text box size» — выбор окошка для текста строго определенного размера: по ширине и длине (не иначе, для перфекционистов).

Настройки более, чем подробные. Например, если мы выбрали добавление тени, то, нажав на значок-шестерёнку, можно отредактировать эту самую тень, выбрав цвет, интенсивность и т.д.

Чтобы распределить текст на нескольких строчках, нажимаем «Enter» после окончания каждой строки. А ещё с помощью «мыши» можно развернуть надпись под любым углом прямо на слайде. Удаляем текст с помощью «Delete» на клавиатуре.

Визуализируй это!

Теперь начинаем добавлять картинки. В Moovly Library довольно много изображений: цветные, черно-белые, рисованные, инфографичные и даже готовые мини-клипы с анимацией (что-то вроде готовых шаблонов в разделе «Clips»).

Для ускорения процесса можно воспользоваться поиском (значок с лупой). Правда, он на английском языке (есть повод попрактиковаться?)

Вставить нужную картинку очень просто. Нажимаем на неё левой клавишей «мыши» и открываем в предварительном просмотре (Preview). Чтобы вставить картинку на слайд, нажимаем «Insert in Project».

А чтобы подредактировать изображение, жмём «Edit object».

При редактировании картинку можно перекрашивать, а можно добавить к ней какие-либо элементы, например, для моей звёздочки предложили добавить «лицо».

Чтобы сохранить модифицированную картинку, придумываем ей имя и нажимаем «Save and insert». Изображение добавится в проект и сохранится в персональной библиотеке.

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

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

При добавлении фотографий их нельзя перекрасить (это платная опция), но можно обрезать (Crop).

Чтобы добавить своё изображение, нажимаем «Upload media», а дальше — «Upload files». Можно добавить файлы из хранилищ Google Drive и Dropbox.

Картинка попадает в «Personal Library», откуда на слайд её можно перетянуть «мышью». Размер загруженного изображения можно изменить (Crop), а вот перекрасить, увы, уже не получится.

Как добавить видео?

На слайде можно разместить небольшой видеоролик — или из библиотеки сервиса (Video) или загрузив с ПК или из хранилища. 

Видеоролик можно обрезать по формату (Crop) и укоротить по длине (Trim).

Это окошко для укорачивания видео. Делаем это с помощью маркера на ленте времени. Часть видео, отмеченная зелёным цветом, сохраняется, остальная — удаляется.

Даём модифицированому видеоклипу название, сохраняем в персональной библиотеке и добавляем в проект.

Как только видеоклип добавится в проект, справа появятся настройки для него. В разделе «Style» можно применить к нему размытие, тень, контур, добавить фильтр или рамку. 

А в разделе «Playback» устанавливаем скорость воспроизведения и громкость видео.

Звуки музыки

С добавлением музыкального сопровождения дела обстоят так. Сервис предлагает небольшую коллекцию аудиотреков (Soundstripe music). Это хорошо.

Но добавлять в проект можно только треки длиной до двух минут. А в библиотеке сервиса таких треков совсем немного, и надо ещё постараться их найти. Это плохо.

Поэтому обходимся своими силами. Находит музыкальный файл нужной длины, загружаем его в персональную библиотеку через кнопку «Upload media». 

Дальше «вызываем» трек на предварильный просмотр (Preview) и добавляем в проект.

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

«Слоёная» лента времени

Внизу под слайдом находится знаменитая лента времени, которая отвечает за время нахождения объекта в кадре. Как только мы добавляем объект или текст в презентацию, он тут же отображается в ленте в виде «слоя». Чем больше объектов, тем «толще» и «слоёнее» получается лента времени.

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

Например, луна на слайде появляется на 1,5 секунде видео и исчезают на шестой. Чтобы изменить ситуацию, горизонтальные полоски можно перемещать по ленте времени, а можно «растягивать» или «сжимать», удлиняя / укорачивая время «проживания» объекта на слайде. Левая клавиша «мыши» нам в помощь!

Лента времени «отвечает» и за всякие анимационные эффекты. Предмет или текст в кадр может въезжать, влетать, разворачиваться, выноситься на ладони, выталкиваться анимированной рукой и т.д. И так же эффектно исчезать из кадра.

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

Ко всем текстам можно добавить эффект «пишущей руки». Называется он «Hands» — «Write». Раньше можно было заставить «руку» еще и рисовать картинки, но теперь… увы.

После добавления эффекта под горизонтальной полоской появляется новый «слой» — отрезок с двумя круглыми штучками по краям.

Это длительность анимации. Именно столько по времени рука будет писать, картинка будет выезжать и т.д. Вот луна (Moon), например, будет красиво возникать в кадре с 33 по 34 секунду. С помощью «мыши» этот отрезок можно удлинить или укоротить.

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

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

Рядом с названием объекта из презентации находится значок — «замочек». Его нажимаем, если хотим окончательно зафиксировать элемент на слайде. Повторное нажимание отменяет фиксацию.

Как только закончили работу над одной мизансценой, передвигаем красную вертикальную линию вправо, объекты исчезают со слайда — и начинаем создавать новый эпизод нашей будущей «нетленки»…

Публикация

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

А дальше нажимаем «Save» — «Save and exit».

И оказываемся в личном кабинете. Для просмотра щёлкаем на кнопку «Play» (стрелка в центре видео).

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

Если выбрали вариант с публикацией в «Moovly Gallery», то соглашаемся, что публикация будет с водяным знаком.

Придумываем название анимации и добавляем описание из не менее чем 5 слов. Нажимаем «Publish».

И потом ещё раз «Publish». 

И на этом всё. Ссылку на видео копируем из строки браузера, а код берём, нажав на кнопку «Embed video».

Видео на основе презентации

В начале статьи я говорила, что с помощью Moovly можно создать видео на основе презентации PowerPoint.

Делается это так: в личном кабинете нажимаем на кнопку вверху «Create project» и выбираем «Import PowerPoint file».

Загружаем файл с презентацией с помощью кнопки с таким же названием.

После загрузки файл PPT будет преобразован в проект Moovly с тем же именем. Изображения из файла будут загружены в личную библиотеку в редакторе сервса.

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

После импорта можно редактировать видео: например, изменять время, добавлять музыку, настраивать шрифты и цвета, добавлять другие медиафайлы…

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

Большую презентацию загрузить не получится: действует ограничение на двухминутное видео. Один слайд примерно занимает 6 секунд.

После загрузки нажимаем на кнопку «Go to project», чтобы перейти к получившемуся проекту.

Получившийся видеоролик можно просмотреть и сразу опубликовать (Publish), а можно его сначала отредактировать, открыв уже знакомый нам конструктор (Edit project).