Шаг 2. Установка видеофона страницы

Автор: Александр Двораковский. Опубликовано в разделе Лендинг пейдж

Здравствуйте, друзья. В сегодняшнем видео уроке я покажу Вам первый этап по созданию лэндинг пэйдж в программе Adobe Muse, где в качестве заднего фона будет выступать видео.

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

Создание Landing Page. Установка видеофона страницы


Дополнительные материалы   Ссылка на конвертор

Подпишитесь на мой YouTube канал

 

Для начала откройте программу Adobe Muse. В пункте меню «File» выберите «Новый сайт». В открывшемся окне с настройками ничего не меняем и нажимаем кнопку «ОК». Перед нами появилась страница нашего проекта с названием «Домашняя». Двойным щелчком открываем ее. Вот здесь мы и будем создавать свою страницу для подписки.

Далее, давайте переименуем ее, и дадим ей название, которое соответствует теме нашего проекта. Так как я хочу использовать ее для рекламы проекта Topliders, то я так и назову ее – Проект Topliders.

Для переименования нажмите в любом месте холста правой кнопкой мышки и в открывшемся окне выберите пункт «Параметры». Удалите название «Домашняя» и взамен впишите Проект Topliders. Для завершения нажимаем кнопку ОК.

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

Разархивируйте скачанный архив и найдите в нем виджет с названием Musegrid Fullscreen Video. Нажмите на него два раза, и данный виджет автоматически установится в библиотеку программы Muse.

Найти его Вы можете, открыв пункт меню Библиотека. У меня этот виджет уже был установлен и, как Вы видите у меня уже два виджета Musegrid Fullscreen Video. Так что один из них я могу спокойно удалить.

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

Теперь, если мы щелкнем по этому треугольничку, откроются настройки, в которых мы указываем три файла.

Первый файл – видео в формате mp4.
Второй файл – видео в формате webM.
И третий файл – файл с изображением.

Для чего это нужно? Видео в разных форматах – это для проигрывания в разных браузерах. А файл с изображением, служит для того чтобы временно заменить видеофайл, если при медленном интернете видео долго загружается.

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

При знакомстве с виджетом, в настройках Вы видели, что там уже прописаны три файла с названием демо. Эти файлы находятся в скачанной папке. Чтобы добавить их необходимо выбрать пункт меню «Добавить файлы для передачи», и из папки Files To Upload выбрать необходимые для нас файлы с видео, файл с изображением, которые имеют название Демо. А также файлы pattern-dots и pattern-lines. Для чего нужны дополнительные файлы я объясню чуть позже.

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

Но нам для работы это видео не подходит. Нам необходимо вставить свое. Для этой цели я его уже подготовил. Оно будет находиться в папке, где будут дополнительные материалы. Кроме этого Вы можете подобрать и вставить свое видео, но с одним замечанием. Оно должно быть в формате mp4, с высоким качеством разрешения HD, и длиною не более 15-20 секунд.

Подготовив видео, его необходимо преобразовать в формат webM. Для этого я рекомендую использовать онлайн конвертор с названием Clouds Convert точка Com. Он очень удобен и тут все можно сделать очень быстро и легко.

Ссылку на него Вы найдете под этим видео.
http://cloudconvert.com

Открыв страницу конвертера, нажмите кнопку «Select Files» выберите необходимое видео. После того, как оно подгрузилось, необходимо выбрать в какой формат мы желаем его преобразовать. В пункте меню «Видео», выбираем формат webM.

Далее идем в настройки и здесь в пункте «Video Aspect Ratio» мы выставляем размер 16 на 9, а разрешение видео, в пункте «Video Resolution» ставим «Custom», то есть ручное и выставляем значение ширины 700.

С настройками мы закончили и после этого нажимаем кнопку «Start Conversion». Пошла конвертация.
Файл готов, и теперь его можно скачать себе обратно на компьютер.

Проверяем его. Все работает. Отлично.

Теперь нам нужна картинка в формате png. Для этого нам достаточно открыть видео во весь экран и дождаться когда исчезнет зона прокрутки. Нажать на клавиатуре кнопку Print Screen.

После этого закрыть видео и открыть программу Paint. Сочетанием клавиш CTRL + V вставляем изображение в программу. Дальше нажимаем «Изменить размер». Проверяем, стоит ли галочка в пункте «Сохранить пропорции» и после этого выставляем размер. Здесь ставим пиксели и пишем, – По горизонтали 700. Программа автоматически высчитывает размер по вертикали. Это получается 393.

Можно сохранять изображение. Выбираем пункт меню «Сохранить как», далее выбираем формат png, и даем ему то же название «Video», чтобы не путаться.

Теперь у нас есть все необходимые для работы файлы. Картинка и видео в двух форматах.

Далее мы выбираем все эти файлы и переносим их в папку Files To Upload.

Возвращаемся в Muse, нажимаем наш виджет, открываем его настройки и здесь прописываем то название, которое мы дали нашим файлам. В данном случае, все файлы имеют название «Video».

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

Посмотрим страницу примера. Как Вы видите, само видео как бы покрыто сеткой. Это и есть эффект перекрытия видео точками.

Завершив установку, открываем пункт меню «Файл», после чего выбираем пункт «Добавить файлы для передачи», и из папки Files To Upload выбираем необходимые для нас файлы с видео, файл с изображением, а также файлы pattern-dots и pattern-lines. То есть те файлы, которые будут служить режимом перекрытия видео, о котором я говорил несколько секунд назад.

Как только мы это сделали, мы можем посмотреть результат нашей работы. Для этого в пункте меню «Файл» выбираем «Предварительный просмотр страницы в браузере».

Как видите, страница с видеофоном готова и отлично работает.

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

На этом все. До встречи в следующем уроке.

Задайте вопрос или оставьте свой комментарий:

"Мне искренне жаль тех людей, которые инвестируют деньги в проекты мошенников и тут же их теряют!"

Поэтому считаю своей задачей показать Вам инвестиционную компанию в которой я зарабатываю КРИПТОВАЛЮТУ уже больше года!

Вложил я всего 130 Евро!
За это время заработал больше 10000 Евро!

Друзья мои, я со спокойной душой могу сказать – это то, что Вы так долго искали!