Дел 3 за тоа како да креирате видео во позадина

01 од 05

Додавање на видео на Adobe Muse

Фоно видео е лесно да се додаде во Muse благодарение на бесплатен елемент.

Навистина интересен аспект на Adobe Muse е тоа што ви овозможува да креирате веб-страници со користење на сличен работен процес на оној што се користи за поставување публикации. Вие не треба длабоко разбирање на кодот кој гради сајт или страница, но блискоста со HTML5, CSS и JavaScript нема да му наштети.

Иако традиционалното веб-видео обично се додава преку употребата на HTML5 Video API, Adobe Muse го постигнува истото преку она што го нарекува "додатоци". Додатоците создаваат HTML 5 потребни за специфични задачи, но користат интерфејс со обичен јазик во Muse за да го напишат кодот кога страницата е објавена.

Во оваа вежба, ние ќе се обидеме да користиме графичка контрола која можете да ја преземете, бесплатно, од Muse Resources. Кога преземањето на графичка контрола, се што треба да направите е да ја отворите .zip датотеката и двоен клик на .mulib датотеката во папката Full-Screen Video. Ова ќе го инсталира во вашата копија на Adobe Muse.

02 од 05

Како да се подготви страница за позадина Видео во Adobe Muse CC

Почнуваме со создавање нова страница и поставување на димензиите на страницата.

Со инсталираниот елемент, сега можете да ја креирате страницата која ќе го користи видеото.

Пред да започнете, креирајте папка за вашата веб страница на Muse. Внатре во таа папка создадете друга папка - јас користам " медиум " - и преместете ги вашите mp4 и webm верзии на видеото во таа папка.

Кога ќе ја стартувате Muse, изберете File> New Site . Кога полето за дијалог Layout отвора изберете Desktop како почетна распределба и ги промените вредностите на Ширина на страната и страницата до 1200 и 900 . Кликнете ОК .

Двоен клик на главната страница во приказот на Планот за да ја отвориш страницата Master. Кога Master Page се отвора, поместете го водичот и подножјето на водичот до горниот и долниот дел од страната. Навистина не ви треба заглавје и подножје за овој пример.

03 од 05

Како да го искористите видео виџетот за целосна екран во Adobe Muse CC

Се што треба да направите е да ги додадете имињата на видеата и да дозволите графикот да се справи со останатите.

Користењето на елементот е мртво едноставно. Првото нешто што треба да направите е да се вратите во Поглед на план со избирање View> Plan Mode . Кога се отвора изгледот на план, кликнете на почетната страница за да го отворите.

Отворете го панелот Библиотека - ако не е отворен на десната страна на интерфејсот, изберете Прозорец> Библиотека - и свртете ја папката за позадинско видео на целата екран [MR] . Повлечете го елементот во папката на страната.

Ќе забележите дека Опциите ќе ве прашаат да ги внесете имињата на mp4 и webm верзиите на видеата. Внесете ги имињата точно како што се напишани во папката каде што ги ставате. Еден мал трик за да се осигурате дека нема да направите грешка е да го ископирате името на видеото mp4 и да го залепите во MP4 и WEBM областите од менито Опции .

Еден друг трик: Сето ова графикон не е да го напишете HTML кодот 5 за вас. Ова може да го кажете затоа што го гледате <> во графичкиот елемент. Во овој случај, можете да го поставите widget-от на веб-страницата на пастилот и тоа сеуште ќе работи. На овој начин не се меша со некоја содржина што ќе ја ставите на страницата.

04 од 05

Како да додадете видео и да тестирате страница во Adobe Muse CC

Видеото се репродуцира кога ќе ја тестирате страницата или страната.

Иако сте го додале кодот кој ќе ги репродуцира видеата, Muse сè уште нема поим каде се наоѓаат овие видеа. За да го поправите ова, одберете File> Add Files за Upload . Кога ќе се отвори дијалогот Откажи, одете до папката што ги содржи вашите видеа, одберете ги и кликнете Open . За да бидете сигурни дека тие се поставени, отворете го панелот Асетс и треба да ги видите вашите два видеа. Само оставете ги на панелот. Тие не треба да бидат поставени на страната.

За да го тестирате проектот, одберете File> Preview Page In Browser или, бидејќи ова е една страница, File> Preview Site in Browser . Вашиот стандарден прелистувач ќе се отвори и видео - во мојот случај тропска бура - ќе почне да пушта.

Во овој момент, можете да ја третирате датотеката Муза како редовна веб-страница и да додавате содржина на Главна страница и видео ќе игра под него.

05 од 05

Како да додадете рамка за видео постер во Adobe Muse CC

Секогаш додавајте рамка за постер на било кој видео проект.

Ова е мрежата за која зборуваме овде, и во зависност од брзината на врската, постои добра шанса вашиот корисник да ја отвори страницата и да гледа во празно додека видео вчитува. Ова не е добра работа. Еве како да се справи со овој малку нагон.

Тоа е "Најдобри практики" за да вклучите рамка на постер на видеото, што ќе се појави додека видео се вчитува. Ова е обично целосна големина на екранот на рамката од видеото.

За да додадете рамка на постер кликнете еднаш на прелистувачот Пополнете на врвот на страницата. Кликнете на линкот Image и одете до сликата што ќе се користи. Во областа за фитинг , одберете Скали за да се пополни и кликнете на точката Центар во Полето . Ова ќе осигури дека сликата секогаш ќе се зголемува од центарот на сликата кога ќе се промени големината на прегледникот на прелистувачот. Исто така ќе видите сликата да ја пополни страницата.

Друг мал трик е барем да има цврста боја која не е бела боја, само во случај кога рамката на постерот трае некое време да се појави. За да го направите ова, кликнете на чип Боја за да го отворите Muse Picker за боја. Изберете ја алатката за очила и кликнете на доминантна боја на сликата. Кога ќе завршите, кликнете на страната за да го затворите полето за дијалог Browser Fill.

Во овој момент, можете да го зачувате проектот или да го објавите.

Конечниот дел од оваа серија ви покажува како да го напишете кодот HTML5 кој го лизга видео во позадина на веб-страницата.