Добавление видео в Adobe Muse
Действительно интересный аспект Adobe Muse заключается в том, что он позволяет создавать веб-страницы с использованием аналогичного рабочего процесса для публикации публикаций. Вам не нужно глубокое понимание кода, который создает сайт или страницу, но знакомство с HTML5, CSS и JavaScript не повредит.
Хотя традиционное веб-видео обычно добавляется с помощью API-интерфейса HTML5, Adobe Muse выполняет то же самое, что и «виджеты». Виджеты создают HTML 5, необходимый для определенных задач, но используют интерфейс на языке простой в Muse для написания кода при публикации этой страницы.
В этом упражнении мы будем использовать виджет, который вы можете бесплатно загрузить из Muse Resources. Когда загружается виджет, все, что вам нужно сделать, это открыть ZIP-файл и дважды щелкнуть файл .mulib в папке полноэкранного видео. Это установит его в вашу копию Adobe Muse.
Как подготовить страницу для фонового видео в Adobe Muse CC
После установки виджета вы можете создать страницу, в которой будет использоваться видео.
Прежде чем начать, создайте папку для вашего сайта Muse. Внутри этой папки создайте другую папку - я использую " средства массовой информации "- и переместите ваши версии mp4 и webm видео в эту папку.
Когда вы запускаете Muse select Файл> Новый сайт, Когда откроется диалоговое окно «Макет» рабочий стол как Первоначальный макет и изменить Ширина страницы а также Высота страницы значения для 1200 а также 900, Нажмите Хорошо.
Дважды щелкните главную страницу в представлении «План», чтобы открыть главную страницу. Когда откроется главная страница, переместите направляющие верхнего и нижнего колонтитула в верхнюю и нижнюю части страницы. Для этого примера вам не нужен верхний и нижний колонтитулы.
03 из 05Как использовать полноэкранный фоновой видео виджет в Adobe Muse CC
Использование виджета мертво просто. Первое, что вам нужно сделать, это вернуться в представление плана, выбрав Просмотр> Режим планирования, Когда открывается вид в плане, дважды щелкните Главная страница чтобы открыть его.
Откройте панель «Библиотека» - если она не открыта с правой стороны интерфейса, выберите Окно> Библиотека - и верните MR Полноэкранное фоновое видео папка. Перетащите виджет в папку на страницу.
Вы заметите, что Опции попросите ввести имена версий mp4 и webm видео. Введите имена точно так же, как они написаны в папке, где вы их разместили. Один маленький трюк, чтобы вы не ошиблись, - это скопировать имя видео mp4 и вставить его в MP4 а также WEBM областях Меню опций.
Еще один трюк: весь этот виджет - это написать код HTML 5 для вас. Вы можете это сказать, потому что видите <> в виджетах. В этом случае вы можете поместить виджет на веб-страницу в картотеку, и он все равно будет работать. Таким образом, это не помешает любому контенту, который вы разместите на странице.
04 из 05Как добавить видео и проверить страницу в Adobe Muse CC
Хотя вы добавили код, который будет воспроизводить видео, Muse все еще не знает, где находятся эти видео. Чтобы исправить это, выберите Файл> Добавить файлы для загрузки, Когда Диалоговое окно загрузки откроется переход к папке, содержащей ваши видео, выберите их и нажмите открыто, Чтобы они были загружены, откройте Панель «Активы» и вы должны увидеть свои два видео. Просто оставьте их в панели. Их не нужно размещать на странице.
Чтобы проверить выбор проекта Файл> Предварительный просмотр страницы в браузере или, потому что это одна страница, Файл> Предварительный просмотр сайта в браузере, Ваш браузер по умолчанию откроется, и видео - в моем случае - тропический ливень - начнет играть.
На этом этапе вы можете обрабатывать файл Muse как обычную веб-страницу и добавлять контент на главную страницу, и видео будет воспроизводиться под ним.
05 из 05Как добавить рамку видео-плаката в Adobe Muse CC
Это сеть, о которой мы говорим здесь, и, в зависимости от скорости соединения, есть хороший шанс, что ваш пользователь может открыть страницу и смотреть на пустой экран во время загрузки видео. Это не хорошая вещь. Вот как справиться с этим немного гадости.
Это «Лучшая практика», чтобы включить рамку плаката видео, которая появится во время загрузки видео. Обычно это полноэкранный снимок кадра из видео.
Чтобы добавить рамку плаката, нажмите один раз на Заполнение браузера в верхней части страницы. Нажмите Ссылка на изображение и перейдите к изображению, которое будет использоваться. в примерка область, выберите Масштаб для заполнения и нажмите Центральная точка в Позиция площадь. Это обеспечит, чтобы изображение всегда масштабировалось из центра изображения, когда изменяется размер видового экрана браузера. Вы также увидите, что изображение заполнит страницу.
Еще один маленький трюк заключается в том, чтобы, по крайней мере, иметь сплошной, а не белый цвет, только в том случае, если рамка плаката занимает некоторое время. Для этого щелкните Чип Color, чтобы открыть Muse Color Picker. Выберите инструмент пипетки и нажмите на основной цвет изображения. По завершении нажмите на страницу, чтобы закрыть диалоговое окно «Заливка браузера».
На этом этапе вы можете сохранить проект или опубликовать его.
Заключительная часть этой серии показывает вам, как написать HTML5-код, который слайд-видео на фоне веб-страницы.
