Partea 3 a modului de a crea video de fundal

01 din 05

Adăugarea videoclipului în Adobe Muse

Videoclipul de fundal este ușor de adăugat în Muse datorită unui widget gratuit.

Partea interesantă a Adobe Muse este că vă permite să creați pagini web folosind un flux de lucru similar celui folosit pentru a întocmi publicații. Nu aveți nevoie de o înțelegere profundă a codului care construiește un site sau o pagină, dar o familiaritate cu HTML5, CSS și JavaScript nu va strica.

Deși videoclipul tradițional web este adăugat de obicei prin utilizarea API-ului HTML5 Video, Adobe Muse realizează același lucru prin ceea ce numește "widget-uri". Widgeturile creează codul HTML 5 necesar pentru anumite sarcini, dar utilizează o interfață de limbaj simplu în Muse pentru a scrie codul în momentul publicării paginii.

În acest exercițiu, vom folosi un widget pe care îl puteți descărca gratuit de la Muse Resources. Când se descarcă widget-ul, tot ce trebuie să faceți este să deschideți fișierul .zip și să faceți dublu clic pe fișierul .mulib din folderul Full-Screen Video. Acest lucru îl va instala în copia dvs. de Adobe Muse.

02 din 05

Cum să pregătiți o pagină pentru fundal video în Adobe Muse CC

Începem prin crearea unui nou site și setarea dimensiunilor paginii.

Cu widgetul instalat, puteți crea acum pagina care va folosi videoclipul.

Înainte de a începe, creați un dosar pentru site-ul dvs. Muse. În interiorul acelui director creați un alt dosar - folosesc " media " - și mutați versiunile mp4 și webm ale videoclipului în acel director.

Când lansați Muse, selectați Fișier> Site nou . Când se deschide caseta de dialog Layout (Aspect), selectați Desktop ( Desktop) ca aspect inițial și modificați valorile lățimii paginii și ale lățimii paginii la 1200 și 900 . Faceți clic pe OK .

Faceți dublu clic pe Pagina principală din planul de vizualizare pentru a deschide pagina principală. Când pagina principală se deschide, mutați ghidajele Antet și Footer în partea de sus și în partea inferioară a paginii. Chiar nu aveți nevoie de Antet și Subsol pentru acest exemplu.

03 din 05

Cum să utilizați imaginea de fundal video de fundal în Adobe Muse CC

Tot ce trebuie să faceți este să adăugați numele videoclipurilor și să lăsați widgetul să se ocupe de restul.

Utilizarea widget-ului este simplă. Primul lucru pe care trebuie să-l faceți este să reveniți la planul de vizualizare selectând Vizualizare> Mod plan . Când planul de vizualizare se deschide, faceți dublu clic pe pagina principală pentru al deschide.

Deschideți panoul Bibliotecă - dacă nu este deschis în partea dreaptă a interfeței, selectați Fereastră> Bibliotecă - și răsuciți în jos dosarul video de pe panoul frontal [MR] . Glisați widgetul în dosarul paginii.

Veți observa că opțiunile vă solicită să introduceți numele versiunilor mp4 și webm ale videoclipurilor. Introduceți numele exact așa cum sunt scrise în dosarul în care le-ați plasat. Un mic truc pentru a vă asigura că nu faceți o greșeală este să copiați numele videoclipului mp4 și să îl inserați în zonele MP4 și WEB din meniul Opțiuni .

Un alt truc: Tot ceea ce face acest widget este de a scrie codul HTML 5 pentru tine. Puteți spune acest lucru pentru că vedeți <> în widget. În acest caz, puteți plasa widget-ul de pe pagina web pe carton și va funcționa în continuare. În acest fel, acesta nu interferează cu niciun conținut pe care îl veți plasa pe pagină.

04 din 05

Cum să adăugați un videoclip și să testați o pagină în Adobe Muse CC

Acest videoclip se redă atunci când testați site-ul sau pagina.

Deși ați adăugat codul care va reda videoclipurile, Muse încă nu are nicio idee despre localizarea acestor videoclipuri. Pentru a rezolva aceasta, selectați Fișier> Adăugare fișiere pentru încărcare . Când se deschide caseta de dialog Încărcare, navigați la dosarul care conține videoclipurile dvs., selectați-le și faceți clic pe Deschidere . Pentru a vă asigura că au fost încărcate, deschideți panoul Active și ar trebui să vedeți cele două videoclipuri. Doar lăsați-le pe panou. Nu trebuie să fie plasate pe pagină.

Pentru a testa proiectul, selectați Fișier> Previzualizare pagină în browser sau, deoarece aceasta este o singură pagină, Fișier> Previzualizare site în browser . Browserul dvs. implicit se va deschide, iar videoclipul - în cazul meu o furtună tropicală - va începe să se joace.

În acest moment, puteți trata fișierul Muse ca o pagină obișnuită și adăugați conținut la pagina de pornire, iar videoclipul va fi redat sub el.

05 din 05

Cum să adăugați un cadru video poster în Adobe Muse CC

Adăugați întotdeauna un cadru de postere la orice proiect video.

Acesta este webul despre care vorbim aici și, în funcție de viteza conexiunii, există o șansă bună ca utilizatorul dvs. să deschidă pagina și să privească la un ecran gol în timp ce se încarcă video. Acesta nu este un lucru bun. Iată cum să rezolvați această problemă.

Este o "Best Practice" pentru a include un cadru poster al videoclipului, care va apărea în timpul încărcării videoclipului. Aceasta este, de obicei, o fotografie de dimensiune completă a unui cadru din videoclip.

Pentru a adăuga rama posterului, faceți clic o dată pe Browser Completați în partea de sus a paginii. Faceți clic pe linkul Imagine și navigați la imaginea care urmează să fie utilizată. În zona Ajustare , selectați Scalare pentru a completa și faceți clic pe punctul central din zona Poziție . Acest lucru va asigura că imaginea va scala întotdeauna din centrul imaginii când se modifică mărimea ferestrei de vizualizare a browserului. Veți vedea, de asemenea imaginea umple pagina.

Un alt truc mic este cel puțin să aibă o culoare solidă, nu albă, doar în cazul în care cadrul posterului durează o vreme să apară. Pentru a face acest lucru, faceți clic pe cipul Culoare pentru a deschide Muse Color Picker. Selectați instrumentul pentru pipetă și faceți clic pe o culoare predominantă din imagine. Când ați terminat, dați clic pe pagină pentru a închide caseta de dialog Completare browser.

În acest moment, puteți salva proiectul sau îl puteți publica.

Partea finală a acestei serii vă arată cum să scrieți codul HTML5 care alunecă un videoclip într-un fundal al paginii web.