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 data-data 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.
16 III.2.1. Struktur Navigasi Struktur Navigasi diperlukan untuk menentukan alur dari visualisasi dari awal sampai akhir dari sebuah multimedia.
Intro
Halaman Utama
CPU
Data
Keyboard
Data
Monitor
Data
Mouse
Data
Komponen Cpu
Processor
Data
Motherbord
Data
Bios
Data
Memory
Data
Data
About
Data
Power Supply
Proloque
Data
Hardisk
Data
Floppy Drive
Data
CD-ROM
Data
VGA Card
Data
Gambar 3.1 Struktur Navigasi Program
17 III.2.2. Desain Antarmuka Program Desain antarmuka merupakan gambaran dari setiap scene dari program multimedia.
Scene
Visual
Tombol
Link
Scene 2
1
Judul Aplikasi 2 1
2
3
5
4 6
8
7
1. 2. 3. 4. 5. 6. 7. 8.
Sekilas Komputer Komponen CPU About Monitor CPU Keyboard Mouse Exit
Scene 3 Scene 4
8. Exit 9. Back
Scene 2
8. Exit 9. Back 10. Menu utama 11. Next
Scene 2 Scene 2 Scene 5
-
3 8
1
data
Sekilas komputer
9
4 8
2 Komponen CPU
data
Processor
10 0
9
11 0
18
Scene
Visual
Tombol Exit Back Menu utama Next
Scene 4 Scene 2 Scene 6
8
Exit Back Menu utama Next
Scene 5 Scene 2 Scene 7
8
Exit Back Menu utama Next
Scene 6 Scene 2 Scene 8
8
Exit Back Menu utama Next
Scene 7 Scene 2 Scene 9
8
2 Komponen CPU
Link
5 data
10 0
Motherborad
9
11 0
2 Komponen CPU
6 data
10 0
Bios
9
11 0
2 Komponen CPU
7 data
10 0
Memory
9
11 0
2 Komponen CPU
8 data
Power Supply
10 0
9
11 0
19
Scene
Visual
Tombol
8
2 Komponen CPU
9
Link
Exit Back Menu utama Next
Scene 8 Scene 2 Scene 10
Exit Back Menu utama Next
Scene 9 Scene 2 Scene 11
data
10 0
Hardisk
9
11 0
8
2 Komponen CPU
10 data
10 0
Floppy Drive
9
11 0
2 Komponen CPU
8
Exit Back Menu utama Next
Scene 10 Scene 2 Scene 12
8
Exit Back Menu utama Next
Scene 11 Scene 2 Scene 13
11 data
10 0
CD-ROM
9
11 0
2 Komponen CPU
12 data
VGA Card
10 0
9
11 0
20
Scene
Visual
Tombol
8
3
Exit Back
Link Scene 2
13 data
About
9
Exit Back
8
4
Scene 2
14 data
Monitor
15
9
8
5
Exit Back
Scene 2
Exit Back
Scene 2
data
CPU
9
8
6
16 data
Keyboard
9
21 Scene
Visual
Tombol
8
7
8. Exit 9. Back
Link Scene 2
17 data
Mouse
9
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.
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,100,1,false,true); fscommand("FullScreen","yes"); } onFrame (105) { 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.
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 submenu-submenu lainnya.dimana tombol tombol tersebut berupa text dan berupa gambar. Tombol-tombol navigasi tersebut adalah a. Sekilas komputer b. Komponen cpu
24 Pada tombol ini terdapat submenu – submenu antara lain •
Processor
•
Motherboard
•
Bios
•
Memory
•
Power supply
•
Hardisk
•
Floppy drive
•
Cd-rom
•
Vga card
c. About d. Exit e. Gambar monitor f. Gambar cpu g. Gambar keyboard h. Gambar mouse
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
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 data – data. 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
27 data – data, 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
28 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 0. buat juga efek palce pada objek teks pada frame 0 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 180. 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
29 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). 8)
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”. 9)
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”.
30 10) 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(); } } 11)
Langkah selanjutnya adalah membuat efek – efek pada keempat tombol. Pada frame 0 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.
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 10 frame pada
persegi panjang yang ada disebelah kanan. 4)
Berikan efek move dengan durasi 10 frame letakkan
setelah efek fade in pada kotak persegi panjang yang pertama. Berikan juga Script stop pada frame 20 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.
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 98/ME/NT4/2000/XP.
33 2. Flash player. 3. Memori pada prosesor minimal 600 MHz 4. Memori pada RAM minimal 128 Mb 5. Resolusi monitor komputer minimal 800x600. 6. Kapasitas pada harddisk minimal 100 Mb 7. CD - Rom drive. 8. Compatible sound card.
