user interface, aplikasi, dan game untuk sma …00:12...modul tik kelas 2 sma 4 pembuatan ui diawali...
Post on 10-Mar-2019
232 Views
Preview:
TRANSCRIPT
USER INTERFACE, APLIKASI, DAN
GAME UNTUK SMA KELAS 11
MODUL TIK
Dibuat oleh:
Udayawibawamukti
Modul TIK Kelas 2 SMA
1
KEGIATAN
Mempelajari User Interface
Mengumpulkan data data kepada teman untuk User Interface
Membuat Low Fidelity User Interface
Membuat High Fidelity User Interface dengan Adobe XD
Mempelajari JAVA
Membuat sebuah aplikasi dengan menggunakan JAVA
Membuat Animasi dengan menggunakan Macromedia
Membuat Game dengan Macromedia
Modul TIK Kelas 2 SMA
2
PERTEMUAN 1
Indikator
Mempelajari User Interface
Mengumpulkan data data kepada teman untuk User Interface
Materi
Graphical User Interface
cara membuat sebuah User Interface
Low Fidelity dan High Fidelity User Interface
1. GRAPHICAL USER INTERFACE
Graphical User Interface (GUI) merupakan sebuah hal yang selalu kita temui cepat atau lambat.
Salah satu contohnya adalah user interface yang sering kita temui pada halaman halman website.sebuah
User Interface dapat membuat pemakai berinteraksi dengan dengan website atau program yang akan
kita gunakan di internet atau dalam computer secara offline.
1.2. Membuat sebuah UI
Untuk membuat sebuah User Interface terdapat sebuah peraturan yang perlu diperhatikan
(“Golden Rule”), yaitu agar sebuah interface designs dapat dimengerti dan dibuat dengan baik, maka
pembuat harus terlebih dahulu menguasai basic dan bentuk bentuk sederhana(lingkaran, kotak, segitiga,
bintang , dll). Setiap desain yang ada dan baik sebenanrnya terbuat dari kelompok bentuk bentuk
sederhana. Carra sederhananya adalah untuk membayangkan sebuah gambar atau bentuk bentuk
sederhana yang lalu dikobinasikan dengan desain atau photo dan membuat atau menggambarnya dari
apapun dari yang diingat.
Untuk memulai, anda harus terlebih dahulu menentukan user interface ini akan dibuat untuk
program/software apa, apa yang dibutuhkan oleh pengguna, dan untuk siapa software ini dibuat.
Berikutnya dapat dilakukan dengan melihat lihat desain yang sudah ada yang dapat dicari didalam
internet. Pembuat UI harus memikirkan tetang bentuk elemen paling mudah diingat, dimengerti, dan
Modul TIK Kelas 2 SMA
3
paling melambangkan sebuah fasilitas didalam program. Cobalah untuk membuat atau mengambil
bentuk bentuk yang sudah biasa dilihat di program program lain seperti arrow, pensil, penghapus dan
lain lain.
Disaat anda telah selesai dalam memilih dan menyusun design ataupun elemn elemen yang
akan dipakai berikutnya dobalah untuk membuat sebuah halaman web seperti halaman web took pizza
dengan mencoba mengikuti hal hal berikut:
Buat interface yang simple
Usahakan untuk menggunakan elements dengan konsisten dan umum
Cobalah membuat sebuah layout yang penting
Menggunakan warna dan texture dengan strategis
Dalam pembuatan sebuah UI dikenal 2 buah bentuk UX prototype yaitu Low Fidelity dan High
Fidelity prototype. Low Fidelity memiliki waktu pembuatan yang pendek dan lebih memfokuskan
waktu terhadap pembuatan desain sebelum pengetesan. Pembuatan Low fidelity prototype dapat
dilakukan diatas kertas sehingga perubahan dapat dilakukan dengan cepat dan tidak membebankan
tester saat mencoba. Sedangkan High Fidelity prototype merupakan bentuk prototype yang sudah
menyerupai desain akhir software yang akan dibuat dan biasa dibuat didalam computer atau dengan
menggunakan software. High fidelity prototype memiliki waktu respon yang lebih cepat dibandingkan
dengan low fidelity prototype, tetapi sebuah perubahan pada UI akan sulit diubah. Pembuatan High
fidelity prototype dapat menggunakan Adoba XD.
1.3. Adobe XD
Pada Bab ini kita akan menggunakan program dengan nama Adobe XD. Adobe XD merupakan
sebuah program untuk membuat user interface prototype sebuah program yang akan dibuat. User
Interface tersebut memiliki interaksi interaksi layaknya program biasa saat dijalankan. Adobe XD juga
dapat dijalankan di banyak devices seperti Windows, Mac, iOS, dan Android.
Modul TIK Kelas 2 SMA
4
Pembuatan UI diawali dengan membuat sebuah low-fidelity design. Fokus pada struktur dan
alur dari aplikasi sebelum memperbagus desain yang akan dibuat. Masukan artboards, placeholder text,
dan bentuk sederhana untuk mengorganisir desain. Disarankan untuk mencoba mengambar di kertas
dan perlihatkan ke teman teman agar Hasil UI terlihat baik.
PERTEMUAN 2
Indikator
Membuat Low Fidelity User Interface
Materi
Low Fidelity
2. LOW FIDELITY USER INTERFACE PROTOTYPING
Dalam membuat sebuah user interface anda harus teerlebihi dahulu mencari data tentang apa
yang disukai oleh orang orang. Cobalah untuk mencari data kepada teman sekelas anda dan cobalah
untuk membuat sebuah user interface untuk sebuah website, program, atau aplikasi handphone dan
diskusikan dengan teman anda, apakah user interface yang anda buat sudah cukup baik atau belum
diatas kertas.
Modul TIK Kelas 2 SMA
5
Rencanakanlah alur aplikasi yang akan dibuat seperti rencanakan kemana program akan
menuju atau perubahan apa yang akan terjadi bila sebuah tombol ditekan. Mulailah mnggambar icon
icon dan bekerja pada bagian graphics dengan memakai bentuk bentuk yang bisa diingat atau paling
mudah ditebak oleh teman teman mu atau orang sekitarmu.
Modul TIK Kelas 2 SMA
6
PERTEMUAN 3
Indikator
Membuat High Fidelity User Interface dengan Adobe XD
Materi
High Fidelity
Praktek menggunakan Adobe XD
3. HIGH FIDELITY USER INTERFACE PROTOTYPING WITH ADOBE XD
AdobeXd merupakan sebuah interface yang sangat simple tapi juga efisien. AdobeXD
memberikan alat alat untuk membuat sebuah prototype didalam berbagai macam platform seperti
website, mobile,tablet, dan lainnya.
Saat menajalankan aplikasi, anda akan diarahkan ke layar selamat dating yang memberikan
anda macam macam tipe screen size dan kemampuan untuk menambah size custom. Selain itu didalam
menu juga terdapat beberapa assets yang dapat digunakan sebagai titik mulai untuk mempelajari lebih
banyak tentang aplikasi tersebut.
Langkah pertama adalah untuk memilih besar kanvas. Caranya adalah dengan menekan atua
mengklik artboard yang berada di bagian kiri toolbar. Setelah diklik akan muncul opsi di bagian kanan
untuk memilih artboards dengan ukuran yang ada. Untuk percobaan ini kita akan memakai artboards
dengan ukuran 1200x900.
Sekarang pilih tool untuk mengetik dibagian kiri sidebar dan dan tekan tempat dimana anda
ingin mulai menulis. Dalam mebuat UI, disarankan untuk meleakan objek objek tidak berdempetan dan
saling jaga jarak. Hal ini berguna untuk memberi elemen UI untuk bernapas. Cobalah untuk meletakan
nama dibagian kiri atas artboard.
Modul TIK Kelas 2 SMA
7
Tambahkan sebuah title yang berisikan deskripsi atau title kecil. Dengan menggunakan select
tool, klik layer nama yang baru saja dibuat dan tekan CTRL-C untuk mengcopy dan CTRL-V untuk
menempelkannya. Biasanya hasil copy akan muncul dibagian atas text yang dicopy. Klik Text hasil
copy lalu tekan shift dan tarik teks kebawah . Cobalah untuk mengatur ukuran dan tipe font sesuai
dengan keinginan anda.
Cobalah membuat dan memasukan teks teks seperti pada langkah diatas hingga prototype tampak
seperti prototype awal yang anda buat.
Modul TIK Kelas 2 SMA
8
Untuk membuat thumbnail corner, cobalah gunakan rectangle tool yang berada dibagian kiri
sidebar lalu ganti warna dengan keinginan anda. Berikutnya cobalah untuk memasukan gambar
kedalam AdobeXD dengan menarik gambar dari folder kedalam AdobeXD.
Anda dapat menggunakan Repeat gird untuk membuat gambar yang telah dimasukan
sebelumnya berlipat ganda menjadi banyak sesuai keingan anda. Cobalah bereksperimen dan masukan
gambar atau tulisan hingga prototype Nampak seperti prototype yang telah anda buat diatas kertas.
Modul TIK Kelas 2 SMA
9
Berikutnya anda dapat menduplikat artboard lalu tekan copy and paste. Perintah tersebut akan
menduplikasi artboard tersebut dan secara otomatis. Lalu letakan artboard di sebelah kanan artboard
utama. Untuk mengubah title artboard kedua, anda dapat mengklik 2 kali title yang berada diatas
artboard.
Modul TIK Kelas 2 SMA
10
Cobalah untuk menghapus isi atau konten pada artboard kedua dengan mendelete isi- isinya.
Pada artboard kedua cobalah desain hingga artboard tampak seperti sub atau halaman berikutnya disaat
anda menekan tombol di artboard pertama.
Modul TIK Kelas 2 SMA
11
Untuk menyambungkan kedua artboard yang telah dibuat, pertama anda butuh menggroup
semua elemen pada artboard kedua dengan memilih semua elemen yang ada dalam artboard kedua lalu
klik kiri dan tekan CTRL-G. Berikutnya tariklah gagang yang ada diatas artboard kedua ke elemen
artboard pertama dimana elemen ditekan. AdobeXD akan memunculkan sebuah dialog box, gantilah
transition menjadi “Side Right” dan biarkan semua setting yang lain.
Lakukan langkah diatas untuk semua action yang akan terjadi dan buatlah artboard artboard hingga dan
atur alur prototype hingga prototype sama dengan prototype yang telah dibuat diatas kertas.
Modul TIK Kelas 2 SMA
12
Bila telah selesai, jalankanlah prototype anda dengen menekan tombol play dibagian kanan toolbar.
Cobalah untuk menekan tombol tombol yang anda telah buat dan lihatlah transition bekerja.
Modul TIK Kelas 2 SMA
13
PERTEMUAN 5
Indikator
Membuat sebuah aplikasi dengan menggunakan JAVA
Materi
Mengunduh JAVA
Mengunduh NetBeans
Membuat sebuah kalkulator
5.1. MEMBUAT SEBUAH APLIKASI DENGAN JAVA NETBEANS
Untuk memulai, pertama peserta didik harus memiliki java SE Development Kit(JDK) 7 atau
JDK 8. Setelah itu unduh dan install NetBeans IDE dengan menggunakan link berikut
https://netbeans.org/dowhnloads/ . Setelah selesai menginstall Netbeans, jalankan aplikasi tersebut dari
windows. Setelah dijalankan NetBeans akan tampak seperti gambar berikut:
Menu utama NetBeans memiliki menus, toolbars, project panes, files pane, runtime pane,
navigator pane, dan pane lainnya. Mulailah dengan membuat dan menjalankan program dengan
membuat project baru terlebih dahulu. Untuk membuat Project baru pertama dilakukan dengan memilih
File > New Project yang berikutnya akan memunculkan dialog untuk new project.
Modul TIK Kelas 2 SMA
14
Langkah berikutnya adalah untuk memilih tipe java sesuai dengan list yang diberikan.
Langkah ketiga adalah memasukan nama project dan unselect kelas utama dari situ.
Pada praktek kita akan membuat sebuah aplikasi yang sederhana, yaitu sebuah kalkulator. Untuk
membuat kalkulator pada java dimulai dengan membuat java project yang kosong dan beri nama
JavaCalculator. Dan uncheck Main class dari option dari project tab.
Step 2: Untuk mamasukan Jframe, klik kanan pada nama project di project windows.
Step 3: Pada bagian kanan Jframe, terdapat Palette dengan sejumlah control didalamnya. Berikutnya
klik text field dan jadikan dalam bentuk blank field. Lalu klik properties dan hapus text field yang ada.
Klik Code dan ganti Nama Variable ke txtDisplay.
Modul TIK Kelas 2 SMA
15
Step 4: Piih button dan Tarik ke Jfram form. Lalu ubah text dan variable pada properties seperti yang
dilakukan pada text field.
Modul TIK Kelas 2 SMA
16
Step 5: Ganti Variable name menjadi btnOne seperti yang dilakukan pada textfield dan masukan nilai
1 di text dengan menekan table properties. Lakukan hal yang sama untuk semua tombol dan ubah text
dan variable name. Jframe akhir akan berbentuk seperti:
Modul TIK Kelas 2 SMA
17
Step 6: Double click pada tombol mana saja yang telah dibuat. Dengan mengklik 2 kali pada tombol,
lalu akan diarahkan ke source section dimana coding utama berada dan dibuat.
Step 7: Mendeclare variable berikut kedalam kelas utama.
Firstnum berguna untuk menerima input pertama dari user
Modul TIK Kelas 2 SMA
18
Secondnum berguna untuk menerima input kedua dari user dan variable result berguna untuk
menyimpan hasil akhir nilai.
Writing code for the number button on java calculator.
Untuk menerima text dari object, kita dapat menggunakan getText method dari object. Sehingga untuk
mendapatkan text input dari btnOne dapat dilakukan dengan menggunakan:
Hal yang sama juga dilakukan untuk button kedua dan button berikutnya:
Hingga berbentuk seperti:
5.2. ARITHMETIC CODES FOR THE BUTTON
Berikut adalah kode untuk operasi tambah. Statement parse digunakan untuk mengubah
argument string menjadi decimal atau integer. Angka yang dimasukan ke edittext textbox diambil dari
edittext dan disimpan sebagai variable sementara. getText() digunakan untuk mengambil data dan
setText() digunakan untuk menampilkan data. Elsewhere.Integer.parseInt() digunakan untuk melempar
“NumberFormatException” error jika string yang dimasukan bukanlah angka.
Mirip seperti sebelumnya, berikan logic yang akan dilakukan kesemua fungsi button yang ada:
Modul TIK Kelas 2 SMA
19
Tombol sama dengan akan beerja berdasarkan logic yang telah ditentukan user. Untuk
mlakukan ini, kita akan menggunakan if statement. Jika User memilih penambahan, variable firstnum
dan secondnum akan ditambahkan lalu jawaban akan disimpan didalam variable result.
Tombol Clear digunakan untuk menghapus nilai yang telah dipakai sebelumnya dari text
display. Untuk itu secondnum akan diubah menjadi 0 dan textfield harus dikosongkan.
Berikutnya jalankan program dengan menyimpan file tersebut lalu tekan tombol run
Modul TIK Kelas 2 SMA
20
Setelah itu Jframe akan muncul dan Nampak seperti gambar berikut
Cobalah untuk memasukan angka pertama dan angka kedua lalu logic atau operasi yang akan dilakukan.
Berikutnya tekan tombol sama dengan. Result akan ditampilkan di textfield .
Modul TIK Kelas 2 SMA
21
PERTEMUAN 8
Indikator
Membuat Animasi dengan menggunakan Macromedia
Materi
ADOBE MACROMEDIA FLASH
8. MAKE SIMPLE ANIMATION ON MACROMEDIA FLASH
Macromedia flash merupakan sebuah apikasi dari Adobe yang dapat digunakan untuk membuat
game ataupun animasi. Langkah pertama untuk membuat animasi didalam macromedia adalah untuk
membuka macromedia Flash 10. Saat dibuka, aplikasi akan tampak seperti
Dibagian atas macromedia terdapat section yang memperlihatkan timeline dan layer-layer.
Untuk memulai buatlah sebuah layer baru dengan mengklik tombol ##. Lalu cobalah untuk
menggambar pada bagian tengah atau tempat yang telah disediakan oleh macromedia.
Modul TIK Kelas 2 SMA
22
Cobalah untuk menggambar bentuk apapun yang diinginkan dalam frame atau layer pertama (contoh:
Stick Figure).
Berikutnya pilih frame berikutnya berdasarkan Panjang dari animation yang ingin dibuat. Lebih besar
perbedaan yang terjadi diantara frame maka semakin lama animation terjadi.
Modul TIK Kelas 2 SMA
23
Berikutnya klik kanan pada frame dan pilih “Insert KEYFrame”
Berikutnya klik kanan pada area diantara frame pertama dan terakhir, lalu pilih “Create Motion Frame”.
Dengan begitu gambar sama yang telah dibuat pada frame pertama akan muncul pada frame akhir yang
telah anda dibuat.
Modul TIK Kelas 2 SMA
24
Berikutnya cobalah untuk mengubah gambar seperti mengubah besar, position atau effect lainnya
seperti alpha, tint dan lain lain. Dapat dilakukan dengna klik kanan pada object dan pilih properties.
Modul TIK Kelas 2 SMA
25
Berikutnya tekan ctrl+enter untuk menjalankan animasi
!!!!Cobalah untuk bereksperimen dengan membuat animasi animasi yang menarik!!!!!
Modul TIK Kelas 2 SMA
26
PERTEMUAN 10
Indikator
Membuat Game dengan Macromedia
Materi
Coding Macromedia
Animasi Macromedia
10.1. MAKE FLAPPY BIRD GAME STYLE
Untuk memulai bukalah adobe flash macromedia anda. Dan mulailah mempersiapkan semua
bahan dibutuhkan. Sperti misalnya resolusi gme tersebut dan juga background color. Masukan opsi
dengan width :550px, Height:400px FPS:30 dan masukan background sesuai kemauan anda.
Berikutnya persiapkan game dengan membuat sebuah scene. Didalam game kita memiliki 3 element,
yaitu bird, pipe, dan basement. Kita mulai dengan basement.
Basement berguna untuk menghentikan burung untuk bergerak melewati besar window yang
telah ditentukan. Pakailah rectangle drawing toolbar dan gambar sebuah persegi Panjang dengan lebar
sesuai dengan resolusi window dan tinggi sekitar 20% tinggi window. Setelah digambar, pilih persegi
Panjang tersebut dan tekan F8 untuk mengubah gambar tersebut menjadi sebuah movie clip.
Modul TIK Kelas 2 SMA
27
Berikutnya klik persegi Panjang dan lihat pada bagian kanan yang terdapat properties.
Didalam section properties, anda dapat menemukan sebuah field untuk penamaan object. Ketikan
“base” pada field tersebut untuk mendefinisikan nama dari movie clip.
Sekarang adalah saat untuk mendesain elemen utama pada game, yaitu flappybird. Cobalah untuk
membuat gambar atau karakter yang unik, untuk dijadikan flappybird. Seperti pada gambar berikut:
Modul TIK Kelas 2 SMA
28
Berikutnya klik F8 dan berikan nama acak.Klik karater anda, dan lihat didalam properties seperti yang
telah dilakukan sebelumnya dan berikan nama untuk karakter tersebut.
Berikutnya kita perlu mendesign elemen game yaitu pipe. Didalam flappy bird terdapat 2 pipa yang
berada diatas dan dibawah. Pertama kita harus menggambar terlebih dahulu pipa pipa tersebut dan
mengubahnya menjadi movieclip.
Modul TIK Kelas 2 SMA
29
Berikutnya copy dan paste pipa tersebut lalu balikan gambar untuk membuat pipa lainnya. Pastikan ada
gap yang cukup diantara kedua pipa tersebut agar burung bisa melewatinya.
Berikutnya pilih kedua pipa tersebut dan tekan F8. Lalu Macromedia akan memunculkan dialog atau
window baru. Masukan detail seperti pada gambar berikut.
Modul TIK Kelas 2 SMA
30
Dengan ini akan lebih mudah untuk membuat sequence pipes dalam game. Anda dapat memberikan
nama sesuai dengan keinginan anda tapi nama kelas harus sama seperti gambar diatas.
Satu hal yang butuh dipastikan adalah dimana macromedia akan mencoba melokasikan pipe yang
muncul dengan acak saat gameplay. Caranya adalah dengan membuka movie clip kedua pipe yang telah
dibuat. Pindahkan pipe hingga titik tengah gambar berada di tengah window seperti yang dibawah,
Modul TIK Kelas 2 SMA
31
Berikutnya buat agar main scene dapat memberikan pesan “GAME OVER”. Caranya adalah
menggumbar sebuah persegi pnjang, lalu tambahkan text tool dan tulis ditengah kotak “GAME OVER”.
Berikutnya klik kotak dan textbox bersamaan dan tekan F8 lalu tekan OK. Berikutnya pilih kotak game
over dan lihat dibagian properties box, lalu tuliskan nama “gameOver_msg”. lalu letakan di tengah
layar.
Untuk membuat score dapat terhitung, dengan memilih text box tool dan letakan dibagian kiri atas
window. Lalu pilih text box, dan lihat dalam properties lalu ganti type menjadi “Dynamic Text”,
namakan text box tersebut sebagai “Score” dan ganti value dengan “0”.
Modul TIK Kelas 2 SMA
32
CODING
“gameLost” adalah sebuah Boolean variable yang dibuat global. Boolean tersebut akan memastikan
komunikasi antara semua elemen seperti bird,pipe,base, dan “game over” message box.
Bird dan wall akan berjalan seperti biasa selama game tidak kalah (Disaat gameLost =false)
Disaat bird menabrak salah satu pipe atau basement, game akan kalah(Disaat gameLost-True)
Wall akan berhenti berjalan, bird akan jatuh dan “game over” akan muncul(Disaat gameLost=true)
“speed” adalah variable yang mengontrol kecepatan bird untuk bergerak kebawah.
Modul TIK Kelas 2 SMA
33
Timers
Dibutuhkan 2 timers yang keduanya bergerak dalam interval yang berbeda. 1 Timer bergerak dalam
1ms yang memastikan burung turun kebawah. Dan satu timer dibuat untuk menentukan waktu
munculnya pipes di posisi yang berbeda dengan interval sebesar 4 detik.
Timer dibawah akan mentrigger fungsi dengan spek interval yang berbeda.
Berikutnya kita akan membuat fungsi untuk membuat pipe respawn.
Pertama kita membuat pipe dan letakan di layer dengan X=650. Posisi vertical pipe akan diacak. Lalu
addChild akan memastikan pipe baru muncul atau ditambahkan kedalam layar dan setindex agar posisi
pipe terlihat dibelakang bird. Berikutnya adalah pengcodingan untuk gerakan burung.
Timer bird memiliki 3 fungsi utama dan 1 fungsi tambahan. Yang pertama adalah untuk membuat
burung bergerak kebawah, kedua adalah menambah kecepatan burung turun dengan limit tertentu. Seain
itu fungsi juga akan mengecek setiap saat apakah bird menabrak dengan basement atau tidak. Jika
Boolean gameLost menjadi TRUE, maka game akan memunculkan movieclip “gameOver_msg”
Berikutnya buka movie clip pipe dan tambahkan frame pertama ke frame berikutnya dengan menekan
“F5” hingga Nampak seperti berikut
Modul TIK Kelas 2 SMA
34
Berikutnya ketikan kode berikut,
Karena timer yang telah dibuat dan letak pipe pada x = 650 maka pipe akan muncul dibagian kanan
layar (this.x>-100). Didalam kode akan dicek apakah bird menabrak bagian atar atau bagian bawah
pipe. Jika bird menabrak salah satu pipe maka kita game akan mengubah Boolean gameLost menjadi
TRUE. Sehingga, action lainnya seperti bird jatuh kebawah, gerakan pipe, dan game over message akan
muncul (ter-tigger). Fungsi else bermaksud bila this.x NOT>-100 maka pipe akan dihilangkan atau
dihapus dari screen dan score akan ditambahkan.
Pada Step terakhir, kita perlu menghapus pipe pada main scene dengan cara masuk ke movieclip dan
delete pipe movieclip dari scene karena kita akan membuat pipe muncul secara dinamik.
Modul TIK Kelas 2 SMA
35
Dengan begitu pembuatan game telah selesai dan game dapat di test run dengan menekan ctrl+enter.
top related