Što treba znati
- Sa Home stranicom u Plan prikazu, idite na Window >Library > [MR] Fullscreen Background Video folder i povucite widget na stranicu.
- Za dodavanje videozapisa idite na Datoteka > Dodaj datoteke za prijenos > mapa videozapisa > Otvori.
Adobe Muse vam omogućuje stvaranje web stranica koristeći radni proces sličan publikacijama; nije vam potrebno duboko razumijevanje koda koji izrađuje web mjesto ili stranicu, iako poznavanje HTML5, CSS-a i JavaScripta neće škoditi. Iako se tradicionalni web video obično dodaje putem HTML5 Video API-ja, Adobe Muse postiže istu stvar putem widgeta koji stvaraju HTML 5 potreban za određene zadatke, ali koristi sučelje na jednostavnom jeziku u Museu za pisanje koda kada se stranica objavi.
Kako pripremiti stranicu za pozadinski video u Adobe Muse CC
S instaliranim widgetom, sada možete stvoriti stranicu koja će koristiti video.
- Prije nego počnete, stvorite mapu za svoju stranicu Muse. Unutar te mape stvorite drugu mapu – mi koristimo “media” – i premjestite svoje mp4 i webm verzije videa u tu mapu.
- Kada pokrenete Muse, odaberite File > Nova stranica.
- Kada se otvori dijaloški okvir Izgled, odaberite Desktop kao Početni izgled i promijenite Širina stranicei Visina stranice vrijednosti za 1200 i 900 . Kliknite OK.
-
Dvaput kliknite Glavna stranica u prikazu plana za otvaranje glavne stranice. Kada se otvori glavna stranica, pomaknite vodilice zaglavlja i podnožja na vrh i dno stranice. Za ovaj primjer stvarno vam ne trebaju zaglavlje i podnožje.
Kako koristiti Widget za pozadinski video preko cijelog zaslona u Adobe Muse CC
Korištenje widgeta vrlo je jednostavno.
- Prvo što trebate učiniti je vratiti se na prikaz plana odabirom View > Način plana.
- Kada se otvori planski prikaz, dvaput kliknite Početnu stranicu da biste je otvorili.
- Otvorite ploču Library – ako nije otvorena na desnoj strani sučelja, odaberite Window > Library – i okrenite mapu [MR] Fullscreen Background Video.
- Povucite widget mape na stranicu.
-
Primijetit ćete da Opcije traže da unesete nazive mp4 i webm verzija videa. Unesite imena točno onako kako su napisana u mapi u koju ste ih stavili. Jedan mali trik da ne pogriješite je kopiranje naziva mp4 videa i zalijepljenje u MP4 i WEBM područja izbornika opcija
Još jedan trik: Sve što ovaj widget radi je da piše HTML 5 kod umjesto vas. To možete reći jer vidite u widgetu. U tom slučaju možete postaviti widget s web-stranice na kartonsku ploču i on će i dalje raditi. Na ovaj način ne ometa sadržaj koji ćete postaviti na stranicu.
Kako dodati video i testirati stranicu u Adobe Muse CC
Iako ste dodali kod koji će reproducirati videozapise, Muse još uvijek ne zna gdje se ti videozapisi nalaze.
- Da biste to popravili, odaberite Datoteka > Dodaj datoteke za učitavanje.
- Kada se otvori dijaloški okvir za prijenos, idite do mape koja sadrži vaše videozapise, odaberite ih i kliknite Otvori.
-
Da biste bili sigurni da su učitani, otvorite ploču Sredstva,i trebali biste vidjeti svoja dva videozapisa. Samo ih ostavite na ploči. Ne moraju se postavljati na stranicu.
- Za testiranje projekta odaberite Datoteka > Pregled stranice u pregledniku ili, budući da je ovo jedna stranica, Datoteka > Pregled stranice u pregledniku. Otvorit će se vaš zadani preglednik i reproducirati će se videozapis.
- U ovom trenutku možete tretirati Muse datoteku kao običnu web stranicu i dodati sadržaj na početnu stranicu, a video će se reproducirati ispod nje.
Kako dodati okvir video postera u Adobe Muse CC
Ovdje govorimo o webu i, ovisno o brzini veze, postoji dobra šansa da vaš korisnik otvori stranicu i bulji u prazan ekran dok se video učitava. Ovo nije dobra stvar. Evo kako se nositi s ovom gadošću.
"Najbolja praksa" je uključiti okvir postera videozapisa koji će se pojaviti dok se video učitava. Ovo je obično snimka zaslona u punoj veličini okvira iz videozapisa.
- Za dodavanje okvira postera kliknite jednom na Browser Fill na vrhu stranice.
- Kliknite na vezu slike i dođite do slike koju želite koristiti.
- U području Fitting odaberite Scale to Fill i kliknite Center point u područje Pozicija. Ovo će osigurati da se slika uvijek skalira od središta slike kada se promijeni veličina okvira preglednika. Također ćete vidjeti kako slika ispunjava stranicu.
- Još jedan mali trik je imati jednobojnu boju ispune u slučaju da okvir postera treba neko vrijeme da se pojavi. Da biste to učinili, kliknite Color čip da biste otvorili Muse Color Picker. Odaberite alat eyedropper i kliknite na prevladavajuću boju na slici. Kada završite, kliknite na stranicu da biste zatvorili dijaloški okvir Ispunjavanje preglednika.
-
U ovom trenutku možete spremiti projekt ili ga objaviti.
Završni dio ove serije pokazuje vam kako napisati HTML5 kod koji postavlja video u pozadinu web stranice.
