Bahagi 3 Ng Paano Upang Lumikha ng Video ng Background

01 ng 05

Pagdaragdag ng Video Upang Adobe Muse

Ang video ng background ay madaling idagdag sa Muse salamat sa isang libreng widget.

Ang talagang kagiliw-giliw na aspeto ng Adobe Muse ay nagbibigay-daan sa iyo upang lumikha ng mga web page gamit ang isang katulad na daloy ng trabaho sa na ginagamit upang mag-ipon ng mga publisher. Hindi mo kailangan ang isang malalim na pag-unawa sa code na nagtatayo ng isang site o pahina ngunit ang isang pamilyar sa HTML5, CSS at JavaScript ay hindi nasaktan.

Kahit na ang tradisyunal na web video ay kadalasang idinagdag sa pamamagitan ng paggamit ng HTML5 Video API, ang Adobe Muse ay gumagawa ng parehong bagay sa pamamagitan ng tinatawag nito na "widgets". Ang mga widget ay lumikha ng HTML 5 na kinakailangan para sa mga partikular na gawain ngunit gumamit ng plain-language interface sa Muse upang isulat ang code kapag nai-publish ang pahina.

Sa ganitong ehersisyo, gagamitin namin ang isang widget na maaari mong i-download, nang libre, mula sa Muse Resources. Kapag ang mga pag-download ng widget, ang kailangan mo lang gawin ay buksan ang .zip file at i-double-click ang .mulib file sa folder na Buong Video ng Screen. I-install ito sa iyong kopya ng Adobe Muse.

02 ng 05

Paano Maghanda ng Pahina Para sa Background Video sa Adobe Muse CC

Nagsisimula kami sa pamamagitan ng paglikha ng isang bagong site at pagtatakda ng mga sukat ng pahina.

Gamit ang widget na naka-install, maaari mo na ngayong lumikha ng pahina na gagamitin ang video.

Bago ka magsimula, lumikha ng isang folder para sa iyong site ng pag-isip-isip. Sa folder na iyon lumikha ng isa pang folder - Gagamitin ko ang " media " - at ilipat ang iyong mp4 at webm na bersyon ng video sa folder na iyon.

Kapag inilunsad mo ang Muse piliin ang File> New Site . Kapag ang dialog box ng Layout ay bubukas piliin ang Desktop bilang Initial Layout at palitan ang mga halaga ng Page Width at Page Height sa 1200 at 900 . I - click ang OK .

I-double click ang Master Page sa view ng Plano upang buksan ang pahina ng Master. Kapag ang Master Page bubukas ilipat ang Header at Footer gabay sa itaas at sa ibaba ng pahina. Hindi mo talaga kailangan ang Header and Footer para sa halimbawang ito.

03 ng 05

Paano Gamitin Ang Fullscreen Background Video Widget sa Adobe Muse CC

Ang kailangan mo lang gawin ay idagdag ang mga pangalan ng video at pahintulutan ang widget na pangasiwaan ang iba.

Ang paggamit ng widget ay simpleng patay. Ang unang bagay na kailangan mong gawin ay ang bumalik sa Plan View sa pamamagitan ng pagpili ng View> Plan Mode . Kapag nagbukas ang Plano ng Pag-double-click ang Home page upang buksan ito.

Buksan ang panel ng Library - kung hindi ito bukas sa kanang bahagi ng Interface piliin ang Window> Library - at i-twirl ang folder na [MR] Fullscreen Background Video . I-drag ang widget sa folder sa pahina.

Mapapansin mo ang Mga Opsyon na hilingin sa iyo na ipasok ang mga pangalan ng mga bersyon ng mp4 at webm ng mga video. Ipasok ang mga pangalan nang eksakto kung paano ito nabaybay sa folder kung saan mo inilagay ang mga ito. Ang isang maliit na lansihin upang matiyak na hindi ka nagkakamali ay kopyahin ang pangalan ng video na mp4 at i-paste ito sa mga lugar ng MP4 at WEBM ng menu ng Mga Pagpipilian .

Isa pang lansihin: Ang lahat ng widget na ito ay ang isulat ang HTML 5 code para sa iyo. Maaari mong sabihin ito dahil nakikita mo ang <> sa widget. Sa kasong ito, maaari mong ilagay ang widget mula sa pahina ng web papunta sa karton at gagana pa rin ito. Sa ganitong paraan hindi ito makagambala sa anumang nilalaman na ilalagay mo sa pahina.

04 ng 05

Paano Upang Magdagdag ng Video at Subukan ang Isang Pahina Sa Adobe Muse CC

Ang video ay gumaganap kapag sinusubukan mo ang site o ang pahina.

Kahit na idinagdag mo ang code na magpe-play ng mga video, ang Muse ay hindi pa rin mayroong isang bakas kung saan matatagpuan ang mga video na iyon. Upang ayusin ito, piliin ang File> Magdagdag ng Mga File Para Mag-upload . Kapag ang dialog box ng Pag- upload ay nabuksan ang pag-navigate sa folder na naglalaman ng iyong mga video, piliin ang mga ito at i-click ang Buksan . Upang matiyak na na-upload na sila, buksan ang panel ng Mga Asset at dapat mong makita ang iyong dalawang video. Basta iwanan ang mga ito sa panel. Hindi nila kailangang ilagay sa pahina.

Upang subukan ang proyekto piliin ang File> Preview Page In Browser o, dahil ito ay isang solong pahina, File> Preview Site In Browser . Magbubukas ang iyong default na browser at ang video - sa aking kaso ng isang tropikal na rainstorm - ay magsisimula sa paglalaro.

Sa puntong ito, maaari mong gamutin ang Muse file bilang isang regular na web page at magdagdag ng nilalaman sa Home page at ang video ay maglalaro sa ilalim nito.

05 ng 05

Paano Upang Magdagdag ng Isang Video Poster Frame Sa Adobe Muse CC

Laging magdagdag ng poster frame sa anumang proyekto ng video.

Ito ang web na pinag-uusapan natin dito at, depende sa bilis ng koneksyon, may isang magandang pagkakataon na buksan ng iyong user ang pahina at nakapako sa isang blangko na screen habang ang video ay naglo-load. Ito ay hindi isang magandang bagay. Narito kung paano haharapin ang ganitong bit ng nastiness.

Ito ay isang "Pinakamahusay na Practice" upang isama ang isang poster frame ng video, na lilitaw habang ang video ay naglo-load. Ito ay karaniwang isang full-size screen shot ng isang frame mula sa video.

Upang idagdag ang poster frame i-click nang isang beses sa Browser Fill sa tuktok ng pahina. I-click ang link ng Imahe at mag-navigate sa larawan upang magamit. Sa sukdulang lugar, piliin ang Scale to Fill at i-click ang Center point sa Position area. Ito ay titiyak na ang imahe ay palaging sukat mula sa gitna ng imahe kapag ang laki ng viewport ng laki ng browser ay nagbabago. Makikita mo rin ang imahe na punan ang pahina.

Ang isa pang maliit na panlilinlang ay hindi bababa sa isang magkaroon ng isang solid-hindi puting-punan ang kulay kung sakaling ang poster frame ay tumatagal ng isang habang upang lumitaw. Upang gawin ito, i-click ang Kulay ng chip upang buksan ang Muse Color Picker. Piliin ang tool na eyedropper at mag-click sa isang namamalaging kulay sa larawan. Kapag natapos, mag-click sa pahina upang isara ang dialog box ng Browser Fill.

Sa puntong ito, maaari mong i-save ang proyekto o i-publish ito.

Ang huling bahagi ng seryeng ito ay nagpapakita sa iyo kung paano isulat ang HTML5 code na nagpapakita ng isang video sa background ng isang web page.