Dodawanie wideo do Adobe Muse
Naprawdę interesującym aspektem Adobe Muse jest to, że umożliwia tworzenie stron internetowych przy użyciu podobnego przepływu pracy do tego, który był używany do tworzenia publikacji. Nie potrzebujesz dogłębnej znajomości kodu budującego witrynę lub stronę, ale znajomość HTML5, CSS i JavaScript nie zaszkodzi.
Mimo że tradycyjne wideo sieciowe jest zwykle dodawane za pomocą interfejsu API HTML5 Video, Adobe Muse realizuje to samo poprzez to, co nazywa "widżetami". Widżety tworzą kod HTML 5 wymagany do określonych zadań, ale w języku Muse można używać prostego interfejsu do pisania kodu po opublikowaniu strony.
W tym ćwiczeniu zamierzamy użyć widgetu, który można bezpłatnie pobrać z zasobów Muse. Po pobraniu widgetu wystarczy otworzyć plik .zip i dwukrotnie kliknąć plik .mulib w folderze Wideo na pełnym ekranie. Spowoduje to zainstalowanie go w kopii programu Adobe Muse.
Jak przygotować stronę dla tła wideo w Adobe Muse CC
Po zainstalowaniu widgetu możesz teraz utworzyć stronę, która będzie korzystać z wideo.
Zanim zaczniesz, utwórz folder dla swojej strony Muse. Wewnątrz tego folderu utwórz kolejny folder - używam " głoska bezdźwięczna "- i przenieś wersje mp4 i webm wideo do tego folderu.
Po uruchomieniu Muse wybierz Plik> Nowa strona. Po otwarciu okna dialogowego Układ wybierz Pulpit jako Początkowy układ i zmień Szerokość strony i Wysokość strony wartości do 1200 i 900. Kliknij dobrze.
Kliknij dwukrotnie stronę wzorcową w widoku planu, aby otworzyć stronę wzorcową. Kiedy otwiera się strona wzorcowa, prowadnice nagłówka i stopki przesuwają się u góry iu dołu strony. Naprawdę nie potrzebujesz nagłówka i stopki dla tego przykładu.
03 z 05Jak korzystać z pełnoekranowego widgetu wideo w tle w Adobe Muse CC
Korzystanie z widżetu jest proste. Pierwszą rzeczą, którą musisz zrobić, to wrócić do widoku planu, wybierając Widok> Tryb planowania. Gdy otworzy się widok planu, kliknij dwukrotnie Strona główna aby go otworzyć.
Otwórz panel Biblioteka - jeśli nie jest otwarty po prawej stronie interfejsu wybierz Okno> Biblioteka - i zakręć w dół MR Pełny ekran wideo w tle teczka. Przeciągnij widget do folderu na stronę.
Zauważysz Opcje poproś o wpisanie nazw wersji MP4 i webmowych filmów. Wprowadź nazwiska dokładnie tak, jak zostały napisane w folderze, w którym je umieściłeś. Jedna mała sztuczka, aby upewnić się, że się nie pomylisz, to skopiować nazwę filmu MP4 i wkleić go do pliku MP4 i WEBM obszary Menu opcji.
Jedna inna sztuczka: cały ten widget ma na celu napisanie kodu HTML 5 dla ciebie. Możesz to powiedzieć, ponieważ widzisz <> w widgecie. W takim przypadku możesz umieścić widżet poza stroną internetową na stole montażowym i nadal będzie działać. W ten sposób nie koliduje z żadną zawartością, którą umieścisz na stronie.
04 z 05Jak dodać wideo i przetestować stronę w Adobe Muse CC
Mimo że dodałeś kod, który będzie odtwarzał wideo, Muse nadal nie ma pojęcia, gdzie znajdują się te filmy. Aby to naprawić, wybierz Plik> Dodaj pliki do przesłania. Kiedy Prześlij okno dialogowe otwiera nawigację do folderu zawierającego twoje filmy, zaznacz je i kliknij otwarty. Aby upewnić się, że zostały przesłane, otwórz Panel aktywów 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 rozpocznie się odtwarzanie wideo - w moim przypadku tropikalna ulewa.
W tym momencie możesz traktować plik Muse jako zwykłą stronę internetową i dodawać zawartość do strony głównej, a wideo będzie odtwarzane pod nią.
05 z 05Jak dodać ramkę plakatu wideo w programie Adobe Muse CC
To jest Internet, o którym 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 wpatrzony w pusty ekran podczas ładowania wideo. To nie jest dobra rzecz. Oto jak sobie poradzić z tą odrobiną złośliwości.
"Najlepszą praktyką" jest dołączenie ramki z filmem, która pojawi się podczas ładowania wideo. Zwykle jest to pełnowymiarowy zrzut ekranu klatki z filmu.
Aby dodać ramkę plakatową, kliknij raz Wypełnienie przeglądarki na górze strony. Kliknij Link do obrazu i przejdź do obrazu, który ma być użyty. w Dopasowywanie obszar, wybierz Skaluj do wypełnienia i kliknij Środek w Pozycja powierzchnia. Zapewni to, że obraz będzie zawsze skalowany od środka obrazu, gdy zmieni się rozmiar okna przeglądarki. Zobaczysz także obraz wypełniający stronę.
Inna mała sztuczka polega na tym, aby przynajmniej mieć bryłę, a nie biały kolor, na wypadek, gdyby pojawiła się potrzeba ułożenia ramki plakatu. Aby to zrobić, kliknij układ kolorów, aby otworzyć próbnik kolorów Muse. Wybierz narzędzie Kroplomierz i kliknij dominujący kolor na obrazie. Po zakończeniu kliknij na stronę, aby zamknąć okno dialogowe Wypełnienie przeglądarki.
W tym momencie możesz zapisać projekt lub opublikować go.
Ostatnia część tej serii pokazuje, jak napisać kod HTML5, który przesuwa wideo na tło strony internetowej.
