Co warto wiedzieć
- Na stronie Home w widoku Plan przejdź do Window >Biblioteka > [MR] Fullscreen Background Video folder i przeciągnij widżet na stronę.
- Aby dodać wideo, przejdź do Plik > Dodaj pliki do przesłania > folder wideo > Otwórz.
Adobe Muse umożliwia tworzenie stron internetowych przy użyciu podobnego przepływu pracy do publikacji; nie potrzebujesz głębokiego zrozumienia kodu, który buduje witrynę lub stronę, chociaż znajomość HTML5, CSS i JavaScript nie zaszkodzi. Chociaż tradycyjne wideo internetowe jest zwykle dodawane za pomocą interfejsu API wideo HTML5, program Adobe Muse osiąga to samo dzięki widżetom, które tworzą kod HTML 5 wymagany do określonych zadań, ale używają interfejsu Muse w prostym języku do pisania kodu po opublikowaniu strony.
Jak przygotować stronę z filmem w tle w programie Adobe Muse CC
Po zainstalowaniu widżetu możesz teraz utworzyć stronę, która będzie używać wideo.
- Zanim zaczniesz, utwórz folder dla swojej witryny Muse. Wewnątrz tego folderu utwórz kolejny folder – używamy „ media” – i przenieś do niego wersje wideo w formacie mp4 i webm.
- Po uruchomieniu Muse wybierz Plik > Nowa witryna.
- Kiedy otworzy się okno dialogowe Układ, wybierz Desktop jako Układ początkowy i zmień Szerokość stronyi Wysokość strony wartości do 1200 i 900 . Kliknij OK.
-
Kliknij dwukrotnie Strona wzorcowa w widoku Plan, aby otworzyć stronę wzorcową. Po otwarciu strony wzorcowej przesuń prowadnice nagłówka i stopki na górę i dół strony. Naprawdę nie potrzebujesz nagłówka i stopki w tym przykładzie.
Jak korzystać z pełnoekranowego widżetu wideo w tle w programie Adobe Muse CC
Korzystanie z widżetu jest banalnie proste.
- Pierwszą rzeczą, którą musisz zrobić, to wrócić do widoku planu, wybierając View > Tryb planowania.
- Kiedy otworzy się widok planu, kliknij dwukrotnie Strona główna, aby ją otworzyć.
- Otwórz panel Biblioteka – jeśli nie jest otwarty po prawej stronie interfejsu, wybierz Window > Biblioteka – i obróć w dół folder [MR] Fullscreen Background Video.
- Przeciągnij widżet folderu na stronę.
-
Zauważysz, że Options poprosi Cię o wpisanie nazw wersji mp4 i webm wideo. Wpisz nazwy dokładnie tak, jak zostały zapisane w folderze, w którym je umieściłeś. Jedną małą sztuczką, aby upewnić się, że nie popełnisz błędu, jest skopiowanie nazwy filmu mp4 i wklejenie go do obszarów MP4 i WEBM z menu Opcje
Jeszcze jedna sztuczka: wszystko, co robi ten widżet, to napisanie kodu HTML 5 za Ciebie. Możesz to powiedzieć, ponieważ widzisz w widżecie. W takim przypadku możesz umieścić widżet ze strony internetowej w schowku i nadal będzie działać. W ten sposób nie koliduje z żadną treścią, którą umieścisz na stronie.
Jak dodać wideo i przetestować stronę w programie Adobe Muse CC
Chociaż dodałeś kod, który będzie odtwarzał filmy, Muse nadal nie wie, gdzie znajdują się te filmy.
- Aby to naprawić, wybierz Plik > Dodaj pliki do przesłania.
- Kiedy otworzy się okno dialogowe Prześlij, przejdź do folderu zawierającego Twoje filmy, wybierz je i kliknij Otwórz.
-
Aby upewnić się, że zostały przesłane, otwórz panel Zasoby,i powinieneś zobaczyć swoje dwa filmy. Po prostu zostaw je w panelu. Nie trzeba ich umieszczać na stronie.
- Aby przetestować projekt, wybierz Plik > Podgląd strony w przeglądarce lub, ponieważ jest to pojedyncza strona, Plik > Podgląd witryny w przeglądarce. Otworzy się domyślna przeglądarka i odtworzy się wideo.
- W tym momencie możesz potraktować plik Muse jako zwykłą stronę internetową i dodać zawartość do strony głównej, a wideo będzie odtwarzane pod nią.
Jak dodać klatkę plakatu wideo w programie Adobe Muse CC
To jest sieć, o której tutaj mówimy, i w zależności od szybkości połączenia istnieje duża szansa, że użytkownik otworzy stronę i będzie wpatrywał się w pusty ekran podczas wczytywania wideo. To nie jest dobra rzecz. Oto jak radzić sobie z tą nieprzyjemnością.
Do „Najlepszej praktyki” należy dołączenie ramki plakatu do filmu, która pojawi się podczas wczytywania filmu. Zwykle jest to pełnowymiarowy zrzut ekranu klatki z filmu.
- Aby dodać ramkę plakatu, kliknij raz Wypełnienie przeglądarki na górze strony.
- Kliknij link Obraz i przejdź do obrazu, którego chcesz użyć.
- W obszarze Fitting wybierz Scale to Fill i kliknij Center point w obszar Pozycja. Dzięki temu obraz będzie zawsze skalowany od środka obrazu, gdy zmieni się rozmiar widocznego obszaru przeglądarki. Zobaczysz również obraz wypełniający stronę.
- Kolejną sztuczką jest zastosowanie jednolitego koloru wypełnienia na wypadek, gdyby ramka plakatu pojawiła się dopiero po pewnym czasie. Aby to zrobić, kliknij żeton Color, aby otworzyć selektor kolorów Muse. Wybierz narzędzie zakraplacz i kliknij dominujący kolor na obrazie. Po zakończeniu kliknij stronę, aby zamknąć okno dialogowe Wypełnianie przeglądarki.
-
W tym momencie możesz zapisać projekt lub go opublikować.
Końcowa część tej serii pokazuje, jak napisać kod HTML5, który wsuwa wideo w tło strony internetowej.
