user interface, aplikasi, dan game untuk sma …00:12...modul tik kelas 2 sma 4 pembuatan ui diawali...

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


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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.

https://netbeans.org/dowhnloads/


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.


15

Step 4: Piih button dan Tarik ke Jfram form. Lalu ubah text dan variable pada properties seperti yang

dilakukan pada text field.


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:


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


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:


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


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 .


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.


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.


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.


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.


25

Berikutnya tekan ctrl+enter untuk menjalankan animasi

!!!!Cobalah untuk bereksperimen dengan membuat animasi animasi yang menarik!!!!!


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.


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:


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.


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.


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,


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”.


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.


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


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.


35

Dengan begitu pembuatan game telah selesai dan game dapat di test run dengan menekan ctrl+enter.

user interface, aplikasi, dan game untuk sma …00:12...modul tik kelas 2 sma 4 pembuatan ui diawali...

Documents