Menambahkan Video Ke Adobe Muse
Aspek yang sangat menarik dari Adobe Muse adalah memungkinkan Anda untuk membuat halaman web menggunakan alur kerja yang sama dengan yang digunakan untuk meletakkan publikasi. Anda tidak perlu pemahaman mendalam tentang kode yang membangun situs atau laman tetapi keakraban dengan HTML5, CSS, dan JavaScript tidak akan merugikan.
Meskipun video web tradisional biasanya ditambahkan melalui penggunaan API Video HTML5, Adobe Muse menyelesaikan hal yang sama melalui apa yang disebut "widget". Widget membuat HTML 5 diperlukan untuk tugas-tugas tertentu tetapi menggunakan antarmuka bahasa sederhana di Muse untuk menulis kode ketika halaman tersebut diterbitkan.
Dalam latihan ini, kita akan menggunakan widget yang dapat Anda unduh, gratis, dari Muse Resources. Ketika widget diunduh, yang perlu Anda lakukan hanyalah membuka file .zip dan klik ganda file .mulib di folder Video Layar Penuh. Ini akan menginstalnya ke dalam salinan Adobe Muse Anda.
Cara Mempersiapkan Halaman Untuk Video Latar dalam Adobe Muse CC
Dengan widget terinstal, Anda sekarang dapat membuat halaman yang akan menggunakan video.
Sebelum memulai, buat folder untuk situs Muse Anda. Di dalam folder itu buat folder lain - saya menggunakan “ media ”- dan pindahkan versi mp4 dan webm Anda dari video ke folder itu.
Ketika Anda memulai memilih Muse File> Situs Baru. Ketika kotak dialog Layout terbuka, pilih Desktop sebagai Tata Letak Awal dan ubah Lebar Halaman dan Tinggi Halaman nilai ke 1200 dan 900. Klik baik.
Klik dua kali Halaman Master dalam tampilan Rencana untuk membuka halaman Master. Ketika Halaman Utama terbuka, gerakkan panduan Header dan Footer ke atas dan bagian bawah halaman. Anda benar-benar tidak membutuhkan Header dan Footer untuk contoh ini.
03 dari 05Cara Menggunakan Widget Video Latar Belakang Layar Penuh dalam Adobe Muse CC
Menggunakan widget ini sangat sederhana. Hal pertama yang perlu Anda lakukan adalah kembali ke Tampilan Plan dengan memilih Lihat> Mode Paket. Ketika Tampilan Rentang terbuka, klik ganda Halaman rumah untuk membukanya.
Buka panel Pustaka - jika tidak terbuka di sisi kanan Antarmuka pilih Jendela> Perpustakaan - dan berputar ke bawah MR Video Latar Belakang Layar Penuh map. Seret widget ke folder ke halaman.
Anda akan melihat Pilihan meminta Anda memasukkan nama versi mp4 dan webm dari video tersebut. Masukkan nama persis seperti yang dieja di folder tempat Anda menempatkannya. Satu trik kecil untuk memastikan Anda tidak melakukan kesalahan adalah menyalin nama video mp4 dan menempelkannya ke dalam MP4 dan WEBM area dari Menu Opsi.
Satu trik lain: Semua widget ini adalah 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 papan dan masih akan berfungsi. Dengan cara ini tidak akan mengganggu konten apa pun yang akan Anda tempatkan di halaman.
04 dari 05Cara Menambahkan Video dan Menguji Halaman Dalam Adobe Muse CC
Meskipun Anda telah menambahkan kode yang akan memutar video, Muse tetap tidak tahu di mana video tersebut berada. Untuk memperbaikinya, pilih File> Tambah File Untuk Diunggah. Ketika Unggah kotak dialog membuka navigasi ke folder yang berisi video Anda, pilih mereka dan klik Buka. Untuk memastikan mereka telah diunggah, buka Panel aset dan Anda harus 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 - dalam kasus saya hujan badai tropis - akan mulai diputar.
Pada titik ini, Anda dapat memperlakukan file Muse sebagai halaman web biasa dan menambahkan konten ke halaman Home dan video akan diputar di bawahnya.
05 dari 05Cara Menambahkan Frame 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. Inilah cara menangani sedikit keburukan ini.
Ini adalah "Praktik Terbaik" untuk menyertakan bingkai poster video, yang akan muncul saat video dimuat. Ini biasanya adalah cuplikan layar ukuran penuh dari sebuah bingkai dari video.
Untuk menambahkan bingkai poster, klik sekali Pengisi Browser di bagian atas halaman. Klik Tautan gambar dan arahkan ke gambar yang akan digunakan. Dalam Tepat daerah, pilih Skala untuk Diisi dan klik Titik pusat dalam Posisi daerah. Ini akan memastikan gambar akan selalu diskalakan dari pusat gambar ketika ukuran viewport browser berubah. Anda juga akan melihat gambar mengisi halaman.
Trik kecil lainnya adalah setidaknya memiliki warna solid-bukan putih-mengisi hanya dalam kasus frame poster membutuhkan waktu beberapa saat untuk muncul. Untuk melakukan ini klik chip Warna untuk membuka Muse Color Picker. Pilih alat pipet dan klik pada warna dominan dalam gambar. Setelah selesai, klik pada halaman untuk menutup kotak dialog Isi Browser.
Pada titik ini, Anda dapat menyimpan proyek atau mempublikasikannya.
Bagian terakhir dari seri ini menunjukkan kepada Anda cara menulis kode HTML5 yang menyelipkan video ke latar belakang halaman web.
