Yang Perlu Diketahui
- Dengan halaman Home di tampilan Plan, buka Window >Library > [MR] Video Latar Belakang Layar Penuh folder dan seret widget ke halaman.
- Untuk menambahkan video, buka File > Tambah File Untuk Diunggah > folder video > Open.
Adobe Muse memungkinkan Anda membuat halaman web menggunakan alur kerja yang mirip dengan publikasi; Anda tidak perlu pemahaman mendalam tentang kode yang membangun situs atau halaman, meskipun keakraban dengan HTML5, CSS, dan JavaScript tidak ada salahnya. Meskipun video web tradisional biasanya ditambahkan melalui HTML5 Video API, Adobe Muse menyelesaikan hal yang sama melalui widget yang membuat HTML 5 yang diperlukan untuk tugas tertentu tetapi menggunakan antarmuka bahasa sederhana di Muse untuk menulis kode saat halaman dipublikasikan.
Cara Menyiapkan Halaman Untuk Video Latar Belakang di Adobe Muse CC
Dengan widget terpasang, Anda sekarang dapat membuat halaman yang akan menggunakan video.
- Sebelum memulai, buat folder untuk situs Muse Anda. Di dalam folder itu, buat folder lain – kami menggunakan “media” – dan pindahkan video versi mp4 dan webm Anda ke folder itu.
- Saat Anda meluncurkan Muse, pilih File > Situs Baru.
- Saat kotak dialog Layout terbuka, pilih Desktop sebagai Initial Layout dan ubah Page Widthdan Ketinggian Halaman nilai ke 1200 dan 900 . Klik OK.
-
Klik dua kali Halaman Master dalam tampilan Rencana untuk membuka halaman Master. Saat Halaman Master terbuka, pindahkan panduan Header dan Footer ke bagian atas dan bawah halaman. Anda benar-benar tidak membutuhkan Header dan Footer untuk contoh ini.
Cara Menggunakan Widget Video Latar Belakang Layar Penuh di Adobe Muse CC
Menggunakan widget sangat sederhana.
- Hal pertama yang perlu Anda lakukan adalah kembali ke Tampilan Rencana dengan memilih Tampilan > Mode Rencana.
- Saat Plan View terbuka, klik dua kali Home page untuk membukanya.
- Buka panel Library – jika tidak terbuka di sisi kanan Antarmuka, pilih Window > Library – dan putar ke bawah folder [MR] Video Latar Belakang Layar Penuh.
- Seret widget folder ke halaman.
-
Anda akan melihat Options meminta Anda memasukkan nama versi mp4 dan webm dari video tersebut. Masukkan nama persis seperti yang dieja di folder tempat Anda meletakkannya. Satu trik kecil untuk memastikan Anda tidak membuat kesalahan adalah menyalin nama video mp4 dan menempelkannya ke area MP4 dan WEBM dari menu Opsi
Satu trik lain: Widget ini hanya menulis kode HTML 5 untuk Anda. Anda dapat mengatakan ini karena Anda melihat di widget. Dalam hal ini, Anda dapat menempatkan widget dari halaman web ke dalam karton, dan itu akan tetap berfungsi. Dengan cara ini, tidak mengganggu konten apa pun yang akan Anda tempatkan di halaman.
Cara Menambahkan Video dan Menguji Halaman Di Adobe Muse CC
Meskipun Anda telah menambahkan kode yang akan memutar video, Muse masih tidak tahu di mana video tersebut berada.
- Untuk memperbaikinya, pilih File > Tambahkan File Untuk Unggah.
- Ketika kotak dialog Upload terbuka, navigasikan ke folder yang berisi video Anda, pilih dan klik Open.
-
Untuk memastikan mereka telah diunggah, buka panel Assets,dan Anda akan melihat dua video Anda. Biarkan saja di panel. Mereka tidak perlu ditempatkan di halaman.
- Untuk menguji proyek, pilih File > Halaman Pratinjau Di Browser atau, karena ini adalah satu halaman, File > Pratinjau Situs Di Browser. Browser default Anda akan terbuka, dan video akan diputar.
- Pada titik ini, Anda dapat memperlakukan file Muse sebagai halaman web biasa dan menambahkan konten ke halaman Beranda, dan video akan diputar di bawahnya.
Cara Menambahkan Bingkai Poster Video Di Adobe Muse CC
Ini adalah web yang sedang kita bicarakan di sini, dan, tergantung pada kecepatan koneksi, ada kemungkinan besar pengguna Anda dapat membuka halaman dan menatap layar kosong saat video dimuat. Ini bukan hal yang baik. Begini cara mengatasi sedikit rasa tidak enak ini.
Ini adalah "Praktek Terbaik" untuk menyertakan bingkai poster video, yang akan muncul saat video dimuat. Ini biasanya merupakan tangkapan layar ukuran penuh dari sebuah bingkai dari video.
- Untuk menambahkan bingkai poster, klik sekali pada Browser Fill di bagian atas halaman.
- Klik Tautan gambar dan arahkan ke gambar yang akan digunakan.
- Di area Fitting, pilih Scale to Fill dan klik Center point di area Posisi. Ini akan memastikan gambar akan selalu diskalakan dari tengah gambar saat ukuran viewport browser berubah. Anda juga akan melihat gambar mengisi halaman.
- Trik kecil lainnya adalah memiliki warna isian yang solid jika bingkai poster membutuhkan waktu beberapa saat untuk muncul. Untuk melakukannya, klik chip Color untuk membuka Muse Color Picker. Pilih alat eyedropper dan klik warna dominan pada gambar. Setelah selesai, klik halaman tersebut untuk menutup kotak dialog Isi Browser.
-
Pada titik ini, Anda dapat menyimpan proyek atau mempublikasikannya.
Bagian terakhir dari seri ini menunjukkan cara menulis kode HTML5 yang menggeser video ke latar belakang halaman web.
