01 05
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 yang mendalam tentang kode yang membangun situs atau halaman 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.
02 dari 05
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 Muse pilih File> Situs Baru . Ketika kotak dialog Layout terbuka pilih Desktop sebagai Tata Letak Awal dan ubah Page Width dan Page Height ke 1.200 dan 900 . Klik OK .
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 05
Cara 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 View> Plan Mode . Ketika Tampilan Rencana terbuka, klik ganda halaman Beranda untuk membukanya.
Buka panel Library - jika tidak terbuka di sisi kanan Antarmuka pilih Window> Library - dan berputar ke bawah [MR] Fullscreen Background Video folder. Seret widget ke folder ke halaman.
Anda akan melihat Opsi 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 area MP4 dan WEBM pada 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 05
Cara Menambahkan Video dan Menguji Halaman Dalam 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> Tambah File Untuk Diunggah . Ketika kotak dialog Unggah terbuka, arahkan ke folder yang berisi video Anda, pilih mereka dan klik Buka . Untuk memastikan mereka telah diunggah, buka panel Aset dan Anda akan melihat dua video Anda. Biarkan saja di panel. Mereka tidak perlu ditempatkan di halaman.
Untuk menguji proyek pilih File> Preview Page In Browser atau, karena ini adalah satu halaman, File> Preview Site In 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 05
Cara 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. Beginilah cara mengatasi sedikit nastiness 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 pada Isi Browser di bagian atas halaman. Klik tautan Gambar dan arahkan ke gambar yang akan digunakan. Di area Fitting , pilih Scale to Fill dan klik titik Pusat di area Posisi . 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.