Ce trebuie să știți
- Cu pagina Acasă din vizualizarea Plan, accesați Fereastra >Biblioteca > [MR] Dosarul video de fundal pe ecran complet și trageți widget-ul în pagină.
- Pentru a adăuga un videoclip, accesați Fișier > Adăugați fișiere pentru încărcare > dosarul de videoclipuri > Deschide.
Adobe Muse vă permite să creați pagini web folosind un flux de lucru similar cu publicațiile; nu aveți nevoie de o înțelegere profundă a codului care creează un site sau o pagină, deși familiaritatea cu HTML5, CSS și JavaScript nu va strica. Deși videoclipurile web tradiționale sunt adăugate de obicei prin HTML5 Video API, Adobe Muse realizează același lucru prin widget-uri care creează HTML 5 necesar pentru anumite sarcini, dar utilizează o interfață în limbaj simplu în Muse pentru a scrie codul atunci când pagina este publicată.
Cum se pregătesc o pagină pentru un videoclip de fundal în Adobe Muse CC
Cu widgetul instalat, acum puteți crea pagina care va folosi videoclipul.
- Înainte de a începe, creați un folder pentru site-ul dvs. Muse. În acel dosar, creați un alt dosar – folosim „media” – și mutați versiunile mp4 și webm ale videoclipului în acel dosar.
- Când lansați Muse, selectați fișier > Site nou.
- Când se deschide caseta de dialog Aspect, selectați Desktop ca Aspect inițial și modificați Lățimea paginiiși Înălțimea paginii valori la 1200 și 900 . Faceți clic pe OK.
-
Dublu clic pe Pagina principală în vizualizarea Plan pentru a deschide pagina principală. Când se deschide Pagina principală, mutați ghidajele Antet și Subsol în partea de sus și de jos a paginii. Chiar nu aveți nevoie de antet și subsol pentru acest exemplu.
Cum se utilizează widgetul video de fundal pe ecran complet în Adobe Muse CC
Folosirea widget-ului este foarte simplă.
- Primul lucru pe care trebuie să-l faceți este să reveniți la Afișarea planului selectând Vizualizare > Modul Plan.
- Când se deschide Afișarea planului, faceți dublu clic pe Pagina de pornire pentru a o deschide.
- Deschide panoul Bibliotecă – dacă nu este deschis în partea dreaptă a interfeței, selectează Window > Library – și învârtiți în jos dosarul [MR] Video de fundal pe ecran complet.
- Trageți widgetul folderului în pagină.
-
Veți observa că Opțiuni vă solicită să introduceți numele versiunilor mp4 și webm ale videoclipurilor. Introduceți numele exact așa cum sunt scrise în folderul î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 WEBM din meniul de opțiuni
Un alt truc: tot ceea ce face acest widget este să 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 tablă și va funcționa în continuare. În acest fel, nu interferează cu niciun conținut pe care îl veți plasa pe pagină.
Cum să adăugați un videoclip și să testați o pagină în Adobe Muse CC
Deși ați adăugat codul care va reda videoclipurile, Muse încă nu știe unde se află acele videoclipuri.
- Pentru a remedia acest lucru, selectați Fișier > Adăugați 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 Deschide.
-
Pentru a vă asigura că au fost încărcate, deschideți panoul de Assets,și ar trebui să vedeți cele două videoclipuri. Doar lăsați-le în panou. Nu trebuie să fie plasate pe pagină.
- Pentru a testa proiectul, selectați Fișier > Pagina de previzualizare în browser sau, deoarece aceasta este o singură pagină, Fișier > Previzualizați site-ul în browser. Browserul dvs. implicit se va deschide și videoclipul va fi redat.
- În acest moment, puteți trata fișierul Muse ca pe o pagină web obișnuită și puteți adăuga conținut la pagina de pornire, iar videoclipul va fi redat sub acesta.
Cum se adaugă un cadru de poster video în Adobe Muse CC
Acesta este web-ul despre care vorbim aici și, în funcție de viteza conexiunii, există șanse mari ca utilizatorul dvs. să deschidă pagina și să se uite la un ecran gol în timp ce videoclipul se încarcă. Acesta nu este un lucru bun. Iată cum să faceți față acestui pic de răutate.
Este o „Ce mai bună practică” includerea unui cadru poster al videoclipului, care va apărea în timp ce videoclipul se încarcă. Aceasta este de obicei o captură de ecran la dimensiune completă a unui cadru din videoclip.
- Pentru a adăuga rama posterului, faceți clic o dată pe Umplere browser din partea de sus a paginii.
- Faceți clic pe linkul pentru imagine și navigați la imaginea de utilizat.
- În zona Fitting, selectați Scale to Fill și faceți clic pe Punctul central în zona Poziție. Acest lucru va asigura că imaginea se va scala întotdeauna din centrul imaginii atunci când dimensiunea ferestrei de vizualizare a browserului se schimbă. Veți vedea, de asemenea, că imaginea umple pagina.
- Un alt mic truc este să ai o culoare de umplere solidă în cazul în care rama posterului durează să apară. Pentru a face acest lucru, faceți clic pe Color pentru a deschide selectorul de culori Muse. Selectați instrumentul eyedropper și faceți clic pe o culoare predominantă din imagine. Când ați terminat, faceți clic pe pagină pentru a închide caseta de dialog Browser Fill.
-
Î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 plasează un videoclip în fundalul unei pagini web.
