BAB III PERANCANGAN DAN DESAIN

Transkripsi

1 BAB III PERANCANGAN DAN DESAIN III.1 Perancangan Animasi Olahraga Olimpiade Adapun rancangan Animasi Olahraga Olimpiade adalah dengan menggunakan desain yang dibuat pada software dan Action Script pada bahasa pemograman flash yang digunakan untuk mengontrol objek-objek dalam Movie Flash seperti untuk navigasi dalam movie, mengontrol data atau variabel, dan menampilkan atau menyembunyikan suatu objek. Animasi Olaharaga Olimpiade ini cara memainkannya adalah dengan mengklik melalui button yang sudah disediakan. Ketika pemain mengklik button maka pemain akan dialihkan ke tampilan animasi yang sesuai dengan button yang diklik. III.2 Perancangan Animasi Dalam hal ini objek yang didesain dapat dibangun dan dikembangkan menjadi animasi yang berguna sesuai dengan tujuan penulis. Perancangan animasi Olahraga Olimpiade ini yang dibangun adalah suatu animasi yang menampilkan sebagian gaya dari tiap olahraga tersebut. III.3 Kebutuhan Hardwere Dan Softwere Dalam pembuatan animasi Olahraga Olimpiade ini penulis menerapkan fitur-fitur yang dikontrol bahasa pemograman yang dituliskan di Action Script. Diperlukan perangkat lunak (software) dan perangkat keras (hardware) dalam pembuatan Animasi Olahraga Olimpiade ini. 28

2 29 III.3.1 Hardware Perangkat keras (hardware) yang peneliti gunakan dalam pembuatan Animasi Olahraga Olimpiade ini adalah: 1. Laptop Compaq Presario CQ43 2. Hard Disk 500GB 3. Memory 2048MB RAM III.3.2 Softwere Perangkat lunak (software) yang peneliti gunakan dalam pembuatan game mengenal bendera ini adalah: 1. Windows 7 2. Macromedia Flash 8 III.3.3 Story Board Storyboard adalah kolom cerita yang dituangkan dalam beberapa bagian, dengan tujuan agar animasi yang akan dirancang nantinya tidak lari dari alur yang telah ditetapkan. Berikut adalah merupakan storyboard untuk Animasi Olahraga Olimpiade yang akan dirancang :

3 30 Tabel III.1 Story Board Rancangan Animasi Olahraga Olimpiade No Visual Keterangan 1 Animasi Lari jarak pendek. lalu klik tombol back. 2 Animasi Lari jarak jauh. lalu klik tombol back. 3 Animasi Basket (Passing). Lalu klik tombol back 4 Animasi Basket (Dribble). Lalu klik tombol back

4 31 5 Animasi Basket (Shooting). Lalu klik tombol back 6 Animasi Volly (Service). Lalu klik tombol back 7 Animasi Volly (Smash). Lalu klik tombol back 8 Animasi Renang (Bebas). Lalu klik tombol back

5 32 9 Animasi Renang (Bebas). Lalu klik tombol back 10 Animasi Renang (Kupu-Kupu). Lalu klik tombol back III.4. Perancangan Aplikasi Desain aplikasi merupakan suatu bentuk rancangan aplikasi yang nantinya akan menghasilkan suatu bentuk aplikasi. Adapun maksud dan tujuan dari desain aplikasi adalah: 1. Untuk memenuhi kebutuhan pemakai aplikasi 2. Untuk memberikan gambaran yang jelas dan rancang bangunan yang lengkap kepada program. III.4.1 Perancangan Diagram Perancangan diagram terdiri dari rancangan Use Case, Activity Diagram, dan Sequence Diagram yang peneliti rancang, berikut adalah penjelasan dari masing-masing diagram.

6 33 1. Use Case Use case digunakan untuk memodelkan dan menyatakan unit fungsi/layanan yang disediakan oleh sistem (subsistem atau class) ke pemakai. Use case diprakarsai oleh actor dan mungkin melibatkan peran actor lain. Use case harus menyediakan nilai minimal kepada satu actor. Lari <<Include>> Basket Mulai Volly User Renang Gambar III.1 Use Case Diagram Animasi Olahraga Olimpiade 2. Activity Diagram Activity diagram dibuat berdasarkan sebuah atau beberapa use case pada use case diagram. Struktur diagram ini mirip flowchart atau Data Flow Diagram pada perancangan terstruktur. Diagram ini dalam memodelkan sebuah alur kerja dari suatu aktivitas ke aktivitas lainnya atau dari suatu aktivitas ke dalam sesaat.

7 34 Aplikasi Mulai Y Menu Lari Animasi Lari Jarak Jauh Animasi Lari Jarak Pendek T Gambar III.2. Activity Diagram Animasi Olahraga Lari

8 35 Aplikasi Y Mulai Menu Basket Animasi Basket Passing Animasi Basket Dribble Animasi Basket Shooting T Gambar III.3. Activity Diagram Animasi Olahraga Basket

9 36 Aplikasi Mulai Y Menu Volly Animasi Volly Smash Animasi Volly Service T Gambar III.4. Activity Diagram Animasi Olahraga Volly

10 37 Aplikasi Mulai Y Menu Renang Animasi Renang Gaya Bebas Animasi Renang Gaya Dada Animasi Renang Gaya Kupu-Kupu T Gambar III.5. Activity Diagram Animasi Olahraga Renang

11 38 3. Class Diagram Class Diagram adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Class Diagram adalah alat perancangan terbaik untuk tim pengembang. Diagram tersebut membantu pengembang mendapatkan struktur sistem sebelum kode ditulis. Secara tradisional, sistem dibangun dengan ide dasar bahwa akan menyimpan informasi pada sisi baris data dan data perilaku pengolahnya pada sisi aplikasi. Berikut adalah Class Diagram yang penulis rancang dari animasi olahraga olimpiade - Mulai - Keluar Aplikasi Animasi Function - Shuffle - Sound stringnamaolahraga initbakcground Gambar III.6. Class Diagram Animasi Olahraga Olimpiade 4. Sequence Diagram Sequence Diagram adalah menggambarkan perilaku pada sebuah scenario, diagram ini menunjukkan sejumlah contoh objek dan massage (pesan) yang diletakkan diantara objek-objek ini didalam use case, berikut gambar sequence diagram :

12 39 Aplikasi Mulai Animasi Lari Animasi Basket Animasi Volly Animasi Renang User View (item) Open new Open new Open new Open new Open new Gambar III.7. Sequence Diagram Animasi Olahraga Olimpiade III.4.2 Perancangan Antarmuka Perancangan antarmuka dalam program ini sangat diperlukan dalam pemograman visual karena desain menggambarkan isi dari aplikasi sistem yang dibuat, dalam animasi olahraga olimpiade ini hanya terdiri dari satu aplikasi utama saja dan semua informasi terdapat di form tersebut, berikut adalah rancanganya. Nama Animasi Mulai Continue Gambar III.8 Rancangan Tampilan Utama

13 40 Setelah menampilkan scene intro maka akan masuk ke scene menu utama, berikut scenenya. Nama Animasi Lari Basket Volly Renang Gambar III.9 Perancangan Scene Menu Utama Setelah menampilkan scene menu utama, maka berikutnya adalah menampilkan scene tampilan menu jenis olahraga Lari, berikut desainnya. LARI Lari Jarak Pendek Lari Jarak Jauh Gambar III.10 Tampilan Perancangan Menu Animasi Olahraga Lari Setelah ditekan tombol button maka langsung masuk ke scene animasi olahraga Lari Jarak Pendek, berikut desainnya.

14 41 LARI Lari Jarak Pendek Next Gambar III.11 Tampilan Perancangan Animasi Olahraga Lari Jarak Pendek Setelah ditekan tombol back, maka langsung masuk ke scene animasi olahraga Lari Jarak Jauh, berikut desainnya. LARI Lari Jarak Jauh Gambar III.12 Tampilan Perancangan Animasi Olahraga Jarak Jauh Setelah ditekan tombol back maka langsung masuk ke menu olahraga Basket, berikut desainnya. Dribble BASKET Passing Shotting Gambar III.13 Tampilan Perancangan Menu Animasi Olahraga Basket

15 42 Setelah ditekan tombol menu button, maka langsung masuk ke scene animasi Dribble Bola Basket. Dribble Olahraga Basket (Dribble) Gambar III.14 Tampilan Perancangan Animasi Olahraga Basket (Dribble) Setelah ditekan tombol back, maka langsung masuk ke scene animasi Passing Bola Basket. Passing Olahraga Basket (Passing) Gambar III.15 Tampilan Perancangan Animasi Olahraga Basket (Passing) Setelah ditekan tombol back, maka langsung masuk ke scene animasi Shotting Bola Basket. Shotting Olahraga Basket (Shotting) Gambar III.16 Tampilan Perancangan Animasi Olahraga Basket (Shotting)

16 43 Setelah ditekan tombol back maka langsung masuk ke menu olahraga Volly, berikut desainnya. Smash Volly Service Gambar III.17 Tampilan Perancangan Menu Animasi Olahraga Volly Setelah ditekan tombol menu button, maka langsung masuk ke scene animasi Service Bola Volly. Smash Olahraga Volly (Smash) Gambar III.18 Tampilan Perancangan Animasi Olahraga Volly (Smash) Setelah ditekan tombol menu back, maka langsung masuk ke scene animasi Smash Bola Volly. Service Olahraga Volly (Service) Gambar III.19 Tampilan Perancangan Animasi Olahraga Volly (Service)

17 44 Setelah ditekan tombol menu back, maka langsung masuk ke scene animasi menu olahraga Renang. RENANG Gaya Bebas Gaya Dada Gaya Kupu Gambar III.20 Tampilan Perancangan menu Animasi Olahraga Renang Setelah ditekan tombol menu button, maka langsung masuk ke scene animasi Gaya Renang Kupu-Kupu. Gaya Bebas Gaya Bebas Next Gambar III.21 Tampilan Perancangan Animasi Olahraga Renang (Gaya Bebas) Setelah ditekan tombol back, maka langsung masuk ke scene animasi olahraga Gaya Bebas.

18 45 Gaya Dada Gaya Dada Gambar III.22 Tampilan Perancangan Animasi Olahraga Renang (Gaya Dada) Setelah ditekan tombol back, maka langsung masuk ke scene animasi olahraga Gaya Kupu-Kupu. Gaya Kupu-Kupu Gaya Kupu-Kupu Gambar III.23 Tampilan Perancangan Animasi Olahraga Renang (Gaya Kupu-Kupu) Setelah ditekan tombol, maka langsung kembali ke menu utama. Nama Animasi Lari Basket Volly Renang Gambar III.24 Perancangan Scene Menu Utama