BAHYUDINNOR.COM - UI adalah tampilan desain atau desain antar muka perangkat lunak, seperti komputer, smarthphone, website maupun game. Lebih jelasnya pelajari disini.
Sekarang, kamu akan mempelajari pembuatan user interface multimedia interaktif berbasis media interaktif menggunakan Adobe Animate CC 2018 seperti tampak pada gambar dibawahPertama-tama, perhatikan dan ikuti langkah-langkah berikut ini.
a. Bukalah aplikasi Adobe Animate CC 2018 yang sudah diinstal sebelumnya.
b. Buatlah halaman kerja baru dengan cara klik File kemudian pilih New - ActionScript 3.0 kemudian tentukan width 1280 fx, height 720 fx, Frame rate 30 fps dan tekan OK.
c. Untuk memudahkan, carilah background, gambar dan beberapa simbol dari internet yang menjelaskan tentang media interaktif perangkat input dan output komputer. Sedangkan untuk Simbol yang dicari seperti tanda tanya/lampu, dan simbol silang.
d. Masukkan background yang kamu download tadi dengan cara klik File kemudian pilih Import > Import to stage (CTRL+R).
e. Setelah itu, buat teks dengan menggunakan Tool text yang dilambangkan huruf T atau dengan menekan huruf t pada keyboard dan ketikkkan "Media Pembelajaran Interaktif Perangkat Input dan Output Komputer" dan jika ingin memodifikasi teks silahkan tambahkan filter text pada bagiab properties text.
g. Selanjutnya aturlah simbol tanda tanya/.ikon lampu, buku, dan buku serta pensil di bagian tengah halaman kerja. Berikan teks "petunjuk","materi", " dan "soal". Sekarang ganti simbol tanda tanya, buku, dan buku serta pensil menjadi button agar menjadi tombol yang dapat diklik. Caranya klik gambar kemudian pilih Menu Modify - Convert to Symbol - pilih Button. Kemudian tekan OK.
h. Ulangi pada semua simbol dan gambar. Setelah itu, masukkan simbol tanda silang dan anak panah ke kanan. Ganti juga menjadi button dengan cara yang dapat dklik. Caranya klik gambar kemudian pilih menu modify > Convert to Symbol > Pilih Button. Kemudian tekan OK.
i. Ulangi semua simbol dan gambar. Setelah itu masukkan simbol tanda silang. Convert juga menjadi Button dengan cara yang sama sebelumnya.
Jadi penamaanya sebagai contoh seperti ini
- Tombol petunjuk = btn_petunjuk
- Tombol materi = btn_materi
- Tombol soal = btn_soal
- Tombol silang/close/tutup = btn_exit
Penjelasan:
Button digunakan untuk membuat tombol yang ada di Adobe Animate. Selain itu objek yang akan dijadikan button dapat pula diberikan ActionScript apabila objek telah diubah dalam bentuk button.
Movie clip digunakan untuk membuat animaasi yang dapat bergerak dalam Adobe Animate. Movie Clip juga dapat diberikan ActionScript. Dengan adanya Movie Clip, kita dapat membuat animasi seperti gerakan yang dinamis.
Graphic digunakan untuk membuat objek yang statis (objek tidak bergerak), namun Graphic tidak dapat diberikan program atau ActionScript dalam bentuk apapun.
j. Sampai disini proses membuat satu user interface multimedia interaktif berbasis media interaktif selesa. Hasilnya bisa dilihat pada gambar di atas.
Kamu telah berhasil membuat satu frame user interface media pembelajaran. Hasil kerjamu tersebut merupakan bentuk user interface multimedia interaktif berbasis media interaktif. Lalu, bagaimanakah dengan langkah pembuatan user interface multimedia interaktif berbasis web?
Pada dasarnya, langkah pengerjaan pembuatan user interface sama, hal yang membedakan antara berbasis interaktif dan web adalah cara pengaksesannya (menggunakan web dan komputer dekstop).
=========
Kegiatan 3.6
==================
A. Judul Kegiatan:
Membuat User Interface Multimedia Interaktif
В. Jenis Kegiatan :
Kerja Individu
С. Tempat Kegiatan :
Lab. Multimedia
D. Tujuan Kegiatan
- Peserta didik dapat memahami cara membuat desain user interface media pembelajaran dengan benar. (KD 3)
- Peserta didik dapat membuat user interface media pembelajaran interaktif pada Adobe Animate dengan terampil. (KD 4)
E. Alat dan Bahan
1. Komputer/Laptop
2. Aplikasi Adobe Animate Professional CC 2018
F. Langkah Kerja :
1. Siapkan komputer/laptop kalian dan lakukan Instalasi Adobe Animate CC 2018 terlebih dahulu jika komputer/laptop belum terinstal Adobe Animate!
2. Setelah Adobe Animate berhasil diinstal, buka aplikasi dengan cara klik dua kali pada shortcut AdobeAnimate!
3. Buatlah user interface media interaktif dengan tema bebas sesuai dengan kreatifiasmu dengan memperhatian Estetika Desain!
4. Setelah menentukan tema selanjutnya buatlah perancangan desain multimedia interaktif yang akan dibuat!
5. Untuk bahan yang digunakan dalam pembuatan media interaktif, kamu dapat mengunduh dari internet / membuat secara mandiri menggunakan aplikasi desain grafis (CorelDraw/Illustrator)
6. Buatlah user interface dalam bentuk 1 slide (frame)!
Kamu telah berhasil membuat user interface multimedia interaktif berbasis media interaktif. Sekarang, cobalah mengembangkan kreativitasmu dengan membuat user interface untuk multimedia berbasis web dengan tema, konsep, dan user interface yang berbeda dengan multimedia interaktif berbasis media interaktif!
7. Sebagai bahan membuat laporan, catat dan printscreen tahapan yang dilakukan dalam membuat user interface!
8. Jika sudah selesai, simpanlah file pada Flashdisk dan simpan dengan nama Praktikum2_DMI_Nama Anda!
Laporan Kerja:
Buatlah laporan kerja membuat user interface pada Adobe Animate CC 2018 lengkap dengan gambar hasil akhir user interface sesuai. Laporan dibuat sesuai sistematika penulisan laporan dalam bentuk print-out! Kemudian kumpulkan pada gurumu pada pertemuan selanjutnya!
