Bahagian 3 Cara Membuat Video Latar Belakang

01 dari 05

Menambah Video Ke Adobe Muse

Video latar belakang mudah ditambah dalam Muse terima kasih kepada widget percuma.

Aspek yang sangat menarik dari Adobe Muse ialah ia membolehkan anda membuat laman web menggunakan alur kerja yang sama dengan yang digunakan untuk meletakkan penerbitan. Anda tidak memerlukan pemahaman mendalam tentang kod yang membina laman web atau halaman tetapi kebiasaan dengan HTML5, CSS dan JavaScript tidak akan menyakiti.

Walaupun video web tradisional biasanya ditambahkan melalui penggunaan HTML5 Video API, Adobe Muse melakukan perkara yang sama melalui apa yang dipanggil "widget". Widget membuat HTML 5 yang diperlukan untuk tugas tertentu tetapi menggunakan antara muka bahasa biasa di Muse untuk menulis kod apabila halaman diterbitkan.

Dalam latihan ini, kami akan menggunakan widget yang boleh anda muat turun, secara percuma, dari Sumber Muse. Apabila muat turun widget, semua yang anda perlu lakukan ialah membuka fail .zip dan klik dua kali pada fail .mulib dalam folder Video Skrin Penuh. Ini akan memasangnya ke salinan Adobe Muse anda.

02 dari 05

Cara Menyediakan A Halaman Untuk Video Latar Belakang di Adobe Muse CC

Kami mulakan dengan membuat sebuah laman baru dan menetapkan dimensi halaman.

Dengan widget yang dipasang, anda kini boleh membuat halaman yang akan menggunakan video itu.

Sebelum memulakan, buat folder untuk laman Muse anda. Di dalam folder itu, buat folder lain - saya menggunakan " media " - dan alihkan mp4 dan versi webm video anda ke dalam folder itu.

Apabila anda melancarkan Muse pilih Fail> Tapak Baru . Apabila kotak dialog Tata Letak terbuka pilih Desktop sebagai Tata Letak Awal dan ubah nilai Lebar Halaman dan Nilai Ketinggian Halaman ke 1200 dan 900 . Klik OK .

Klik dua kali Halaman Sarjana dalam paparan Rancangan untuk membuka halaman Master. Apabila Halaman Master dibuka bergerak Panduan Header dan Footer ke bahagian atas dan bawah halaman. Anda benar-benar tidak memerlukan Header dan Footer untuk contoh ini.

03 dari 05

Cara Penggunaan Widget Video Latar Belakang Fullscreen di Adobe Muse CC

Apa yang perlu anda lakukan ialah menambah nama video dan biarkan widget mengendalikan selebihnya.

Menggunakan widget adalah mudah mati. Perkara pertama yang perlu anda lakukan ialah kembali ke Rancangan Pandangan dengan memilih Lihat> Mod Rancangan . Apabila Paparan Rancangan dibuka dua kali klik Laman Utama untuk membukanya.

Buka panel Perpustakaan - jika ia tidak dibuka di sebelah kanan Antara Muka pilih Tetingkap> Perpustakaan - dan memutarkan folder Video Latar Belakang [MR] penuh . Seret widget ke folder ke halaman.

Anda akan melihat Pilihan meminta anda memasuki nama-nama versi mp4 dan webm video. Masukkan nama tepat seperti yang dieja dalam folder tempat anda meletakkannya. Satu helah kecil untuk memastikan anda tidak membuat kesilapan adalah menyalin nama video mp4 dan tampalkannya ke dalam kawasan MP4 dan WEBM dalam menu Pilihan .

Satu helah yang lain: Semua widget ini tidak adalah untuk menulis kod HTML 5 untuk anda. Anda boleh memberitahu ini kerana anda melihat <> dalam widget. Dalam kes ini, anda boleh meletakkan widget dari halaman web ke papan papan dan ia masih akan berfungsi. Dengan cara ini, ia tidak mengganggu apa-apa kandungan yang akan anda letakkan pada halaman tersebut.

04 dari 05

Cara Tambah Video dan Menguji Halaman Dalam Adobe Muse CC

Video memainkan semasa anda menguji tapak atau halaman.

Walaupun anda telah menambah kod yang akan memainkan video, Muse masih tidak mempunyai petunjuk di mana video tersebut terletak. Untuk menetapkan ini, pilih Fail> Tambah Fail Untuk Muat Naik . Apabila kotak dialog Muat Naik terbuka menavigasi ke folder yang mengandungi video anda, pilihnya dan klik Terbuka . Untuk memastikan mereka telah dimuat naik, buka panel Aset dan anda akan melihat dua video anda. Cuma tinggalkan mereka di panel. Mereka tidak perlu diletakkan di halaman.

Untuk menguji projek pilih Fail> Halaman Pratonton Dalam Penyemak Imbas atau, kerana ini adalah satu halaman, File> Preview Site In Browser . Penyemak imbas lalai anda akan dibuka dan video - dalam kes saya badai hujan tropika - akan mula bermain.

Pada ketika ini, anda boleh merawat fail Muse sebagai halaman web biasa dan menambah kandungan ke Laman Utama dan video akan dimainkan di bawahnya.

05 dari 05

Cara Tambah Bingkai Poster Video Di Adobe Muse CC

Sentiasa tambahkan bingkai poster ke mana-mana projek video.

Inilah web yang kita bicarakan di sini dan, bergantung kepada kelajuan sambungan, ada peluang yang baik pengguna anda dapat membuka halaman dan menatap pada skrin kosong semasa memuatkan video. Ini bukan perkara yang baik. Berikut adalah cara untuk menangani sedikit nastiness ini.

Ia adalah "Amalan Terbaik" untuk menyertakan bingkai poster video, yang akan muncul semasa video dimuatkan. Ini biasanya merupakan pukulan skrin bersaiz penuh dari bingkai dari video.

Untuk menambah bingkai poster klik sekali pada Pelayar Isi di bahagian atas halaman. Klik pautan Imej dan navigasi ke imej untuk digunakan. Di kawasan Pemasangan , pilih Skala untuk Isi dan klik Pusat titik di kawasan Kedudukan . Ini akan memastikan imej akan sentiasa skala dari pusat imej apabila saiz paparan penyemak imbas berubah. Anda juga akan melihat imej mengisi halaman.

Satu lagi helah kecil adalah sekurang-kurangnya mempunyai warna pepejal-putih yang tidak lengkap sekiranya bingkai poster mengambil sedikit masa untuk muncul. Untuk melakukan ini klik cip Warna untuk membuka Muse Color Picker. Pilih alat eyedropper dan klik pada warna utama dalam imej. Apabila selesai, klik pada halaman untuk menutup kotak dialog Penyemak Imbas.

Pada ketika ini, anda boleh menyimpan projek atau menyiarkannya.

Bahagian akhir siri ini menunjukkan kepada anda cara menulis kod HTML5 yang memunculkan video ke latar belakang halaman web.