Osa 3 Kuinka luoda taustamusiikki

01/05

Videoiden lisääminen Adobe Muse -ohjelmaan

Taustakuva video on helppo lisätä Musein ansiosta ilmainen widget.

Adobe Musein todella mielenkiintoinen näkökohta on se, että voit luoda verkkosivuja käyttämällä samanlaista työnkulkua kuin julkaisujen luomiseen. Sinun ei tarvitse ymmärtää koodia, joka rakentaa sivuston tai sivun, mutta HTML5-, CSS- ja JavaScript-tuntemus ei loukkaa.

Vaikka perinteinen web-video lisätään tavallisesti HTML5-video-API: n avulla, Adobe Muse saa aikaan saman sisällön kuin mitä se kutsuu "widgetteiksi". Widgettiin luodaan HTML 5, joka vaaditaan tiettyihin tehtäviin, mutta käytä Mustonessa selainkielistä käyttöliittymää koodin kirjoittamiseen, kun sivu julkaistaan.

Tässä harjoituksessa käytämme widgetia, jota voit ladata ilmaiseksi Muse Resourcesista. Kun widgetiin latautuu, sinun tarvitsee vain avata .zip-tiedosto ja kaksoisnapsauta .mulib-tiedostoa Full-Screen Video -kansiossa. Tämä asentaa sen kopioon Adobe Muse.

02/05

Kuinka valmistautua sivulle taustakuvaksi Adobe Muse CC: ssä

Aloitamme luomalla uuden sivuston ja asettamalla sivun mitat.

Kun widget on asennettu, voit nyt luoda sivun, joka käyttää videota.

Ennen kuin aloitat, luo kansio Muse-sivustolle. Tämän kansion sisällä luodaan uusi kansio - käytän " mediaa " - ja siirrän mp4- ja webm-versiot videon kyseiseen kansioon.

Kun käynnistät Musein, valitse Tiedosto> Uusi sivusto . Kun Layout (Asettelu) -valintaikkuna avautuu, valitse Desktop as Initial Layout (Asettelun alustus) ja muuta sivun leveyden ja sivun korkeuden arvoksi 1200 ja 900 . Napsauta OK .

Avaa Master-sivu kaksoisnapsauttamalla Master-sivua Plan-näkymässä. Kun pääsivu aukeaa, siirrä otsikko- ja alatunnisteen oppaat sivun yläosaan ja alaosaan. Et todellakaan tarvitse otsikkoa ja alatunnistetta tässä esimerkissä.

03/05

Kuinka käyttää Fullscreen Background Video Widgetä Adobe Muse CC: ssä

Sinun tarvitsee vain lisätä videon nimet ja anna widgetin käsitellä loput.

Widgetin käyttäminen on yksinkertainen. Ensin sinun tarvitsee palata Plan View -näkymään valitsemalla Näytä> Suunnitelma . Kun Näkymänäkymä avautuu, kaksoisnapsauta sitä kotisivulla avataksesi sen.

Avaa Kirjasto-paneeli - jos se ei ole avoin liittymän oikealla puolella, valitse Ikkuna> Kirjasto - ja katkaise [MR] Fullscreen Background Video -kansio. Vedä widgetti kansioon sivulle.

Huomaat, että Asetukset pyytää sinua kirjoittamaan videoiden mp4- ja webm-versiot. Anna nimiä täsmälleen sellaisena kuin ne on kirjoitettu kansioon, johon ne on sijoitettu. Yksi pieni temppu sen varmistamiseksi, että et tee virheen on kopioida MP4-videon nimi ja liitä se Asetukset-valikon MP4- ja WEBM- alueisiin.

Yksi muu temppu: Kaikki tämä widget on kirjoittaa HTML 5 -koodi sinulle. Voit kertoa tämän, koska widgetissä näkyy <> . Tällöin voit sijoittaa widgetin pois sivulta lomakkeeseen ja se toimii edelleen. Tällä tavalla se ei häiritse sisältöä, jota sijoitat sivulle.

04/05

Kuinka lisätä videoita ja testata sivua Adobe Muse CC: ssä

Video toistetaan, kun testataan sivustoa tai sivua.

Vaikka olet lisännyt koodin, joka toistaa videoita, Museilla ei vieläkään ole vihjeitä siitä, missä nämä videot sijaitsevat. Voit korjata tämän valitsemalla Tiedosto> Lisää tiedostoja lataukseen . Kun Lataa-valintaikkuna avautuu, siirry kansioon, joka sisältää videoidesi, valitse ne ja napsauta Avaa . Varmistaaksesi, että ne on lähetetty, avaa Asetukset-paneeli ja näet kaksi videota. Jätä ne vain paneeliin. Niitä ei tarvitse asettaa sivulle.

Projektin testaamiseksi valitse Tiedosto> Esikatsele sivu selaimessa tai, koska tämä on yksittäinen sivu, Tiedosto> Esikatsele sivusto selaimessa . Oletusselaimesi avautuu ja video - minun tapauksessani trooppinen sademäärä - alkaa pelata.

Tässä vaiheessa voit käsitellä Muse-tiedostoa tavallisena verkkosivustona ja lisätä sisältöä kotisivulle ja video leikkii sen alle.

05/05

Kuinka lisätä videokuvan kehyksen Adobe Muse CC: ssä

Lisää aina juliste runkoon mihin tahansa videoprojektiin.

Tämä on verkko, josta puhumme täällä ja yhteysnopeudesta riippuen on hyvät mahdollisuudet, että käyttäjä voi avata sivun ja katsoa tyhjää näyttöä videon lataamisen aikana. Tämä ei ole hyvä asia. Seuraavassa on, miten käsitellä tätä pientä harmia.

Se on "Best Practice", joka sisältää videon julistekehyksen, joka näkyy videon lataamisen aikana. Tämä on tavallisesti täysikokoinen näytön laukaus videon kehyksestä.

Lisää julistekehys napsauttamalla kerran sivun yläreunassa olevaa Selaimen täyttö -kuvaketta . Napsauta Image-linkkiä ja siirry käytettäväksi kuvaksi. Valitse Asennus- alueella Tasoita-asteikko ja napsauta Sijainti-kentän keskipistettä . Tämä varmistaa, että kuva skaalautuu aina kuvan keskikohdasta, kun selaimen näkymän koko muuttuu. Näet myös kuvan täyttävän sivun.

Toinen pieni temppu on ainakin olla kiinteä, ei valkoista täyttä väriä vain siinä tapauksessa, että julistekehys kestää hetken. Voit tehdä tämän napsauttamalla Color-siru avata Muse-värivalitsin. Valitse pipetintyökalu ja napsauta kuvan hallitsevaa väriä. Kun olet valmis, sulje Selaimen täyttö -valintaikkuna napsauttamalla sivua.

Tässä vaiheessa voit tallentaa projektin tai julkaista sen.

Tämän sarjan viimeinen osa osoittaa, kuinka voit kirjoittaa HTML5-koodin, joka liukuu videon verkkosivun taustaan.