BAB III ANALISA PEMBAHASAN MASALAH. canggih, maka semakin banyak komponen yang terdapat di dalam sebuah komputer.

Transkripsi

1 15 BAB III ANALISA PEMBAHASAN MASALAH III.1 Analisa III.1.1 Latar belakang Seiring dengan perkembangan dunia komputer yang semakin pesat dan canggih, maka semakin banyak komponen yang terdapat di dalam sebuah komputer. Pada umumnya pengguna komputer kurang mengetahui fungsi dari komponen sebuah komputer, untuk mengetahui tentang fungsi komponen komputer biasanya pengguna komputer membaca text book, tidak jarang dari text book tersebut tidak menyertai gambar dari komponen komputer yang dijelaskan. Sehingga pembaca terkadang menjadi jenuh untuk membacanya, untuk itu maka penulis membuatkan sebuah aplikasi multimedia interaktif mengenal komponen komputer dimana didalam aplikasi tersebut menyertakan gambar suara dan menu yang interaktif setidaknya dengan aplikasi ini pengguna komputer tertarik dalam mendapatkan informasi mengenai komponen computer, karena manusia pada dasarnya lebih mudah mencerna sebuah informasi dengan disertai visualisasi dari pada membaca sebuah text book yang membosankan. III.2. Pembahasan Masalah Dari yang telah dikumpulkan mengenai komponen dari sebuah komputer, maka dibuatlah Aplikasi mengenal komponen komputer. Aplikasi ini dibuat dengan menggunakan program Swishmax, dan juga dibantu dengan beberapa program desain grafis seperti Macromedia Freehand MX dan Adobe Photoshop Cs2.

2 16 III.2.1. Struktur Navigasi Struktur Navigasi diperlukan untuk menentukan alur dari visualisasi dari awal sampai akhir dari sebuah multimedia. CPU Keyboard Processor Monitor Motherbord Intro Halaman Utama Mouse Bios Komponen Cpu Memory About Power Supply Proloque Hardisk Floppy Drive CDROM VGA Card Gambar 3.1 Struktur Navigasi Program

3 17 III.2.2. Desain Antarmuka Program multimedia. Desain antarmuka merupakan gambaran dari setiap scene dari program Scene Visual Tombol Link 1 2 Judul Aplikasi Sekilas Komputer 2. Komponen CPU 3. About 4. Monitor 5. CPU 6. Keyboard 7. Mouse. Scene 3 Scene Sekilas komputer.. 1. Menu utama. Next Scene 5 2 Komponen CPU Processor 1

4 1 Scene Visual Tombol Link 5 2 Komponen CPU Menu utama Next Scene 4 Scene 6 Motherborad Komponen CPU Menu utama Next Scene 5 Scene 7 Bios Komponen CPU Menu utama Next Scene 6 Scene Memory 1 2 Komponen CPU Menu utama Next Scene 7 Scene Power Supply 1

5 1 Scene Visual Tombol Link 2 Komponen CPU Menu utama Next Scene Scene 1 Hardisk Komponen CPU Menu utama Next Scene Scene Floppy Drive 1 2 Komponen CPU Menu utama Next Scene 1 Scene 12 CDROM Komponen CPU Menu utama Next Scene Scene 13 VGA Card 1

6 2 Scene Visual Tombol Link 3 13 About 14 4 Monitor 15 5 CPU 6 16 Keyboard

7 21 Scene Visual Tombol Link Mouse Gambar 3.2 Peta Navigasi Desain Antarmuka Mutimedia Interaktif Mengenal Komponen Komputer. III.2.3. Rancangan Aplikasi Program 1. Scene Intro Scene intro adalah scene yang akan tampil sebelum scene halaman utama. Pada scene ini penulis membuat sebuah animasi sederhana Berupa animasi teks. Langkah untuk pembuatan animasi untuk teks pada Scene ini adalah: a) Tekan toolbar new untuk membuat file swish yang baru. b) Pada bagian insert toolbar, tekan tombol insert text untuk meletakkan teks pada scene. c) Perhatikan pada bagian movie panel,maka secara otomatis movie panel akan menuju pada jendela text. Kemudian edit teks tersebut, isi dengan kalimat yang akan ditampilkan, warna bahkan sampai jenis huruf yang akan digunakan.

8 22 d) Kemudian pilih animasi yang akan kita gunakan untuk teks tersebut, yaitu dengan memilih tombol Add Effect lalu pilih Salah satu effect yang tersedia, lalu pilih salah satu animasi yang ada didalamnya. e) pada scene intro ini menggunakan action script untuk menuju ke halaman utama sebagai berikut : onframe (1) { playsound("comp.mp3",false,1,1,false,true); fscommand("fullscreen","yes"); } onframe (15) { playsound("pop.mp3"); gotosceneandplay("utama",1); } f) Langkah terakhir tekan menu file lalu save. Hal ini untuk menyimpan hasil animasi tersebut dengan bentuk file SWI.

9 23 Gambar 3.3. Pembuatan Animasi Teks Dengan Menggunakan Swishmax Pada Scene Intro. 2. Scene Halaman Utama Pada menu scene halaman utama terdapat delapan buah tombol navigasi untuk menuju submenusubmenu lainnya.dimana tombol tombol tersebut berupa text dan berupa gambar. Tomboltombol navigasi tersebut adalah a. Sekilas komputer b. Komponen cpu

10 24 Pada tombol ini terdapat submenu submenu antara lain Processor Motherboard Bios Memory Power supply Hardisk Floppy drive Cdrom Vga card c. About d. e. Gambar monitor f. Gambar cpu g. Gambar keyboard h. Gambar mouse

11 25 Gambar 3.4 Halaman Utama. berikut ini langkah langkah pembuatan sceene halaman utama: a) Insert new scene, maka secara otomatis scene tersebut akan berukuran dan berwarna sama dengan scene sebelumnya. b) Insert picture untuk menambahkan gambar cpu, monitor, mouse keyboard yang kita perlukan dan kemudian convert gambar tersebut menjadi button. c) Insert text buatlah text dengan isi sekilas komputer, komponen cpu, about, exit. Kemudian convert text text tersebut menjadi button

12 26 d) Insert text buatlah text dengan isi processor, motherboard, bios, memory, power supply, hardisk, floppy drive, cd rom, vga card. Kemudian convert text text tersebut menjadi button dan jadikanlah menjadi satu group dan beri nama menu. e) Susunlah objek objek yang telah dibuat sesuai dengan lay out pada gambar di atas. Actionscript tombol tombol navigasi ini akan dibahas pada lembar lampiran. 3. Scene Processor. Scene ini merupakan scene submenu dari tombol komponen cpu. Pada scene ini terdapat empat buah tombol navigasi yaitu menu utama, back dan next. Untuk scene motherboard sampai dengan scene vga card serupa dengan dengan scene processor. pada scene scene tersebut terdapat sebuat text scroller dimana text scroller tersebut berguna untuk menampilkan. Sedangkan untuk scene cpu, monitor, mouse dan keyboard hampir sama dengan scene processor, hanya saja tidak ada tombol menu utama Berikut ini adalah cara pembuatan text scroller yang terdapat pada scene scene telah disebutkan di atas. 1) Buat kotak persegi panjang dengan menggunakan rectangle dari tool box. Objek ini akan digunkan sebagai tempat teks yang akan di tampilkan. Insert text pada tool box isilah dengan

13 27, kemudian atur perataan teks. Posisikan teks tersebut diatas kotak persegi panjang yang telah dibuat 2) Pilih kedua objek yang telah dibuat dari outline panel dan group keduanya menjadi suatu sprite dengan memilih menu, group, group as sprite. Dari panel matikan loop, dan aktifkan masked kemudian namai sprite ini dengan nama scroll. 3) Masukklah kedalam sprite scroll. Pastikan objek persegi panjang berada di lapisan bawah objek tes, karena objek ini akan dijadikan mask. Selanjutnya copy objek persegi panjang. Paste objek tersebut di tempat yang sama. Kemudian dengan menggunakan icon send backward dari outline panel. Pilih objek persegi panjang yang sudah dipindahkana ini. Dari shape panel, ubah ketebalan garis menjadi lebih tebal dan fill style menjadi none. Objek persegi panjang ini akan digunakan sebagai tempat teks yang digulung. Karena objek persegi panjang yang dijadikan sebagai mask maka tidak akan terlihat jika animasi dijalankan. 4) Untuk membuat teks agar dapat menggulung. Dapat digunakan efek move ke arah atas sehingga teks yang ada di atas semakin naik ke atas, sedangkan teks yang berada dibawah dapat terlihat. Gunakanlah perngkat motion path, klik pada frame 1 dari time line panel. Dengan menggunakan mouse pindahkan teks ke atas secara perlahan sehingga bagian paling bawah dari teks terlihat di dalam kotak. Maka akan mncul efek move pada

14 2 Time line Panel. Klik dua kali padaefek untukl memunculkan settings. Pada x position pilihlah unchanged, agar teks tidak bergerak ke kiri atau ke kanan ketika digulung 5) Agar efek move ini tidak digunakan langsung jika animasi dipanggil, buatlah action script stop pada frame. buat juga efek palce pada objek teks pada frame untuk menampilakan teks langsung di awal animasi alaupun efek move tidak dijalankan. 6) Kembali pada scene. Untuk mengontrol agar pengguna dapat menggulung teks dedngan baik maka dibutuhkan objek yang berbentuk segitiga. Buatlah sebuah objek shape berbentuk segitiga dengan menggunakan perangkat bezier dari toolbox. Namai objek ini panah atas dari shape panel. Gandakanlah objek sagitiga yang telah dibuat. Kemudian pilihlah menu modify, transform, rotate 1. obejek tersebut akan berputar menjadi ke arah bawah. Namai objek ini dengan nama panah bawah 7) Pilih objek panah atas konversi bentuk shape ini menjadi tombol menggunakan menu modify, convert, conver to button. Objek ini akan memiliki 4 keadaan, yaitu up state, over state, down state, dan hit state. Hit state adalah wilayah yang dideteksi oleh kursor mouse. Default hit state ini berbentuk segi empat. Untuk mengubahnya menjadi segitiga, dari outline panel, pilihlah objek panah atas yang berada di bawah

15 2 kondisi up state, kemudian copy ke bagian bawah hit state. Selanjutnya hapus objek hit ractangle di bawah objek panah atas. Dengan cara yang sama lakukanlah hal serupa pada objek segitiga panah bawah. Namai kedu objek tombol yang baru dengan nama atas (untuk panah atas dan bawah (untuk panah bawah). ) Copy objek atas dan paste ditempat yang sama. Lakukan hal yang sama pada objek bawah. Sehingga akan terbentuk 4 buah tombol. Untuk membedakannya ubahlah namanya menjadi atas1, atas2, bawah1, bawah2. ) Group keempat objek tombol ini menjadi sebuah sprite menggunakan menu group, group as sprite. Dari sprite panel namai sprite baru ini dengan nama panah aktifkan loop dan matikan masked.masuklah ke dalam sprite panah. Akan terlihat keempat buah tombol dalam sprite ini, pada tombol atas1 isi actionscript nya pada tab action yaitu. on (rollover) { telltarget (_parent.gulung) { prevframeandstop(); } } lakukan hal yang sama terhadap tombol atas2.

16 3 1) Untuk script pada tombol bawah1 dan bawah2 mirip dengan tombol atas1 dan atas2. Action script nya adalah sebagai berikut on (rollover) { telltarget (_parent.gulung) { nextframeandstop(); } } ) Langkah selanjutnya adalah membuat efek efek pada keempat tombol. Pada frame buatlah efek place, pada tombol atas1 dan bawah1. kemudian pada frame 1 buatlah efek place pada tombol atas2 dan bawah2 serta efek remove pada tombol atas1 dan bawah1. Selain text scroller ada juga animasi kecil yaitu animasi untuk navigation bar cara membuatnya adalah: 1) Buat 2 buah persegi panjang tetapi dengan ukuran yang berbeda beri warna masing masing persegi panjang tersebut, untuk jelasnya lihat gambar berikut Gambar 3.5 Navigation Bar.

17 31 2) Susunlah kedua pesegi panjang seperti gambar 3.5. kemudian pilih kedua persegi panjang tersebut, group menjadi sprite, melalui menu modify, group, group as sprite. Beri nama sprite tersebut navigation bar. 3) Berikan efek fade in dengan durasi 1 frame pada persegi panjang yang ada disebelah kanan. 4) Berikan efek move dengan durasi 1 frame letakkan setelah efek fade in pada kotak persegi panjang yang pertama. Berikan juga Script stop pada frame 2 untuk Sprite navigation bar. Untuk jelasnya lihat gambar berikut. Gambar 3.6 Efek Pada Vavigation Bar kemudian setelah objek objek selesai dibuat susunlah objek objek tersebut seperti gambar berikut ini.

18 32 Gambar 3.7 Scene Processor. Untuk scene scene yang lain lakukakan langkah langkah seperti pada scene processor 4. Export File Menjadi Exe. Langkah terakhir adalah menjadikan file.swi menjadi.exe yaitu : 1) Masuklah pada menu file 2) Pada menu file pilih menu export 3) Kemudian pilih menu exe (projector). Maka kita diharuskan memberi nama file yang akan di export. III.3. Perangkat Komputer Yang Dibutuhkan Perangkat yang cocok pada perangkat lunak serta sistem operasi komputer untuk menjalankan aplikasi ini adalah: 1. Sistem operasi Windows /ME/NT4/2/XP.

19 33 2. Flash player. 3. Memori pada prosesor minimal 6 MHz 4. Memori pada RAM minimal 12 Mb 5. Resolusi monitor komputer minimal x6. 6. Kapasitas pada harddisk minimal 1 Mb 7. CD Rom drive.. Compatible sound card.