Videoiden lisääminen Adobe Muse -ohjelmaan
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.
Kuinka valmistautua sivulle taustakuvaksi Adobe Muse CC: ssä
Kun widget on asennettu, voit nyt luoda sivun, joka käyttää videota.
Ennen kuin aloitat, luo kansio Muse-sivustolle. Sisällä kyseinen kansio luo uusi kansio - käytän " tiedotusvälineet "- ja siirrä mp4- ja webm -versiot videon kyseiseen kansioon.
Kun käynnistät Muse valitse Tiedosto> Uusi sivusto. Kun Asettelu-valintaikkuna avautuu, valitse pöytä- kuten Alustava asettelu ja muuta Sivun leveys ja Sivun korkeus arvoja 1200 ja 900. Klikkaus kunnossa.
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/05Kuinka käyttää Fullscreen Background Video Widgetä Adobe Muse CC: ssä
Widgetin käyttäminen on yksinkertainen. Ensimmäinen asia, jonka tarvitset, on palata Plan View -ohjelmaan valitsemalla Näytä> Suunnitelma. Kun Suunnittelunäkymä avautuu kaksoisnapsauttamalla Kotisivu avata se.
Avaa Kirjasto-paneeli - jos se ei ole avoinna, valitse Liitännän oikealla puolella Ikkuna> Kirjasto - ja pyöritä MR Koko näytön taustakuva kansio. Vedä widgetti kansioon sivulle.
Huomaat vaihtoehdot pyydä antamaan videon mp4- ja webm-versiot. Anna nimiä täsmälleen sellaisena kuin ne on kirjoitettu kansioon, johon ne on sijoitettu. Yksi pieni temppu varmistaaksesi, että et tee virheen on kopioida mp4-videon nimi ja liitä se MP4 ja WebM alueet Asetusvalikko.
Yksi muu temppu: Kaikki tämä widget on kirjoittaa HTML 5 -koodi sinulle. Voit kertoa tämän, koska näet <> widgetissä. 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/05Kuinka lisätä videoita ja testata sivua Adobe Muse CC: ssä
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ää tiedostot lataamiseen. Kun Lataa valintaikkuna avaa navigoi videosi sisältävään kansioon, valitse ne ja napsauta Avata. Varmista, että ne on ladattu, avaa Omaisuus-paneeli ja sinun pitäisi nähdä kaksi videota. Jätä ne vain paneeliin. Niitä ei tarvitse asettaa sivulle.
Testaa projekti valitsemalla Tiedosto> Esikatselukuva selaimessa tai, koska tämä on yksi 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/05Kuinka lisätä videokuvan kehyksen Adobe Muse CC: ssä
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 Selaimen täyttö sivun yläreunassa. Klikkaa Image link ja selaa käytettäväksi. Vuonna Asennus alue, valitse Vaaka täyttää ja napsauta Keskipiste vuonna asento alueella. 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.
