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.
A. Sequence Diagram
B. Flowchart
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.
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.
RUBIX CUBE - INPUT
INPUT BOX 3X3 COLOR BUTTON SOLVE ANIMATION BOX INPUT BOX 3X3 INPUT BOX 3X3 INPUT BOX 3X3 INPUT BOX 3X3 INPUT BOX 3X3
Rancangan layar Cross Layer dapat dilihat pada Gambar 3.5.
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-RUBIX CUBE – CROSS LAYER
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
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.
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
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – TOP LAYER
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.
Gambar 3.7 Rancangan Layar Middle Layer
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – MIDDLE LAYER
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.
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
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – LAST LAYER CROSS
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.
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
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – CARROUSEL EDGES
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.
Gambar 3.10 Rancangan Layar Rotate Corners
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – ROTATE CORNERS
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.
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.
COLLAPSE EXPAND
STEP LIST BOX
ANIMATION BOX
ANIMATION
NEXT STEP
RUBIX CUBE – SWAP CORNERS
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.
