Video: From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu 2024
Adobe Edge Animate adalah program perangkat lunak yang dapat Anda gunakan dengan fungsi CC Dreamweaver baru yang memungkinkan desainer yang akrab dengan antarmuka Flash untuk membuat animasi dan kemudian ekspor mereka sebagai dibundel. File oam yang mudah dimasukkan ke dalam halaman web Anda. Sejak Apple sangat populer iPhone dan iPad terkenal menolak untuk mendukung Flash, Adobe telah bekerja pada memberikan alternatif untuk web designer.
. File oam berisi gambar dan kode JavaScript, HTML5, dan CSS yang digunakan Dreamweaver untuk menampilkan animasi di halaman web Anda. Untuk menambahkan. oam file ke halaman di Dreamweaver, gunakan langkah-langkah berikut:
-
Klik di mana Anda ingin file Edge Animate muncul di halaman web Anda.
-
Jika panel Insert belum terbuka, pilih Window → Insert. Kemudian gunakan daftar drop-down untuk memilih panel Media.
-
Pada daftar drop-down Media, pilih opsi Edge Animate Composition.
Anda juga dapat memilih Insert → Media → Edge Animate Composition, atau tekan Ctrl + Alt + Shift + E. Kotak dialog Select Edge Animate Package akan muncul.
-
Browse untuk mencari file paket Edge Animate yang ingin Anda masukkan di halaman Anda, pilih file, dan klik OK.
-
Jika Anda mengaktifkan opsi aksesibilitas, Anda diminta menambahkan teks alternatif untuk menggambarkan file The Edge Animate. Masukkan deskripsi file dan klik OK.
Kotak dialog ditutup, dan file Edge Animate dimasukkan ke dalam dokumen Anda. Dreamweaver juga menyalin file jQuery, CSS, HTML, dan gambar yang diperlukan ke folder akar situs Anda.
-
Klik tombol Live view di bagian atas ruang kerja untuk melihat animasi yang disisipkan.
(Tidak seperti Flash, tidak ada tombol untuk memutar animasi untuk melihat apakah ia bekerja.) Perhatikan daftar file yang terdaftar di sebelah tombol Source Code di atas perancangan halaman.
Dreamweaver hanya mencakup beberapa pilihan di Property inspector untuk memodifikasi animasi Edge pada halaman web Anda. Anda dapat menetapkan gaya kelas ke file Edge Animate, namun sebaiknya Anda tidak mengatur tinggi atau lebar animasi dengan kotak dialog di inspektur Properti, kecuali Anda ahli dalam mengedit file CSS, jQuery, dan HTML secara manual.
