BAB 3 PERANCANGAN PROGRAM S IMULAS I
3.1
Garis Besar Perancangan Program Untuk merancang program simulasi penyelesaian rubix cube ini, digunakan
program Macromedia Flash 8.0 yang dioperasikan pada Microsoft Windows XP Proffesional Service Pack 2. Dalam operasi ini, akan dibuat layar pembukaan sebagai layar tampilan awal, kemudian akan muncul layar input di mana user harus memasukkan warna-warna dalam rangka rubix cube. Apabila semua warna telah selesai dimasukkan dengan benar, maka pada layar berikutnya akan tampak tahapan-tahapan penyelesaian rubix cube, lengkap dengan animasinya.
3.2
Perancangan Program
3.2.1
Perancangan Sistem Berikut ini merupakan detil rancangan sistem yang akan dibuat pada program
simulasi penyelesaian rubix cube meliputi 2 bagian utama, yaitu bagian input dan bagian penyelesaian.
46 A.
Sequence Diagram
Gambar 3.1 Sequence Diagram
47 B.
Flowchart
Gambar 3.2 Flowchart Input
48
Gambar 3.3 Flowchart Penyelesaian
49 3.2.2
Perancangan Layar Sebelum tahap
pembuatan program aplikasi, berikut ini dibuat
perancangan layar sebagai gambaran untuk dilanjutkan pada pembuatan GUI (Graphical User Interface). Berikut ini adalah rancangan layar yang ada pada program simulasi penyelesaian rubix cube .
A.
Perancangan Layar In put Pada layar ini terdapat 6 buah Input Box berukuran 3x3 yang berfungsi sebagai tempat user untuk memasukkan input berupa warna. Warna dapat dipilih pada tombol Color Button. Di samping itu juga terdapat Animation Box sebagai gambaran visual rubix cube. Tombol Solve digunakan apabila semua proses telah selesai dan berfungsi untuk melanjutkan ke layar berikutnya. Rancangan layar Input dapat dilihat pada Gambar 3.4.
50
RUBIX CUBE - INPUT
INPUT BOX 3X3 INPUT BOX 3X3
INPUT BOX 3X3
ANIMATION BOX
INPUT BOX 3X3
INPUT BOX 3X3
INPUT BOX 3X3
COLOR BUTTON
SOLVE Gambar 3.4 Rancangan Layar Input
B.
Perancangan Layar Cross Layer Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Cross Layer. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Cross Layer yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Cross Layer. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya.
51 Rancangan layar Cross Layer dapat dilihat pada Gambar 3.5.
RUBIX CUBE – CROSS LAYER
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
NEXT STEP
Gambar 3.5 Rancangan Layar Cross Layer
C.
Perancangan Layar Top Layer Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Top Layer. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Top Layer yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-
52 step yang harus dilakukan untuk menyelesaikan Top Layer. Tombol Last Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Top Layer dapat dilihat pada Gambar 3.6.
RUBIX CUBE – TOP LAYER
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.6 Rancangan Layar Top Layer
D.
Perancangan Layar Middle Layer Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Middle Layer. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk
53 menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Middle Layer yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Middle Layer. Tombol Last Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Middle Layer dapat dilihat pada Gambar 3.7.
RUBIX CUBE – MIDDLE LAYER
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.7 Rancangan Layar Middle Layer
54 E.
Perancangan Layar Last Layer Cross Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Last Layer Cross. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Last Layer Cross yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Last Layer Cross. Tombol Last Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Last Layer Cross dapat dilihat pada Gambar 3.8.
55
RUBIX CUBE – LAST LAYER CROSS
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.8 Rancangan Layar Last Layer Cross
F.
Perancangan Layar Carrousel Edges Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Carrousel Edges. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Carrousel Edges yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Top Layer. Tombol Last
56 Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Carrousel Edges dapat dilihat pada Gambar 3.9.
RUBIX CUBE – CARROUSEL EDGES
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.9 Rancangan Layar Carrousel Edges
G.
Perancangan Layar Rotate Corners Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Rotate Corners. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation
57 berfungsi untuk menampilkan animasi gerakan pada tahap Rotate Corners yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Rotate Corners. Tombol Last Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Rotate Corners dapat dilihat pada Gambar 3.10.
RUBIX CUBE – ROTATE CORNERS
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.10 Rancangan Layar Rotate Corners
58 H.
Perancangan Layar Swap Corners Pada layar ini terdapat tampilan dari step-step yang harus dilakukan untuk menyelesaikan rubix cube pada tahap Swap Corners. Di sini terdapat tombol Expand untuk menampilkan list gambar pada masing-masing step yang harus dilakukan. Tombol Collapse berfungsi untuk menutup list gambar yang ditampilkan oleh tombol Expand. Tombol Animation berfungsi untuk menampilkan animasi gerakan pada tahap Swap Corners yang dapat dilihat dalam Animation Box. Step List Box berfungsi untuk menampilkan step-step yang harus dilakukan untuk menyelesaikan Top Layer. Tombol Last Step berfungsi untuk kembali ke layar sebelumnya. Tombol Next Step berfungsi untuk melanjutkan ke layar selanjutnya. Rancangan layar Swap Corners dapat dilihat pada Gambar 3.11.
59
RUBIX CUBE – SWAP CORNERS
ANIMATION BOX
EXPAND
COLLAPSE
ANIMATIO N
STEP LIST BOX
LAST STEP NEXT STEP
Gambar 3.11 Rancangan Layar Swap Corners
3.2.3
Perancangan Modul M odul yang digunakan dalam program simulasi penyelesaian rubix cube ini terdiri dari tiga modul sebagai berikut. 1. M odul Input M odul ini berguna agar user dapat memasukkan input warna dari rubix cube ke dalam program. Apabila user memasukkan input warna yang tidak valid, maka ketika tombol Solve ditekan akan keluar pesan error.
60 2. M odul Animasi M odul ini berguna untuk memberikan gambaran visual rubix cube kepada user. 3. M odul Penyelesaian M odul ini akan memberikan langkah-langkah penyelesaian rubix cube dalam 7 tahap kepada user.
