25

BAB IV

PERANCANGAN DAN IMPLENTASI SISTEM

4.1. Analisa Permasalahan

Dalam Pembuatan program ini masalah yang akan dihadapi antara

lain :

a. Banyaknya simbol-simbol yang akan digunakan.

b. Pengeditan pada simbol-simbol tersebut dilakukan satu persatu sehingga

butuh ketelitian yang tinggi.

c. Pengeditan gambar tidak bisa langsung dilakukan di Macromedia Flash

Pro 8 membutuh software pendukung.

d. Memasukan script dalam Macromedia Flash Pro 8 harus dilakukan

dengan teliti.

4.1.2 Analisa Sistem

4.1.2.1. Kebutuhan Software

Perangkat lunak yang dibutuhkan anatara lain :

a. OS : Windows XP Profesional / Home Edition.

b. Macromedia Flash Pro 8.

c. Adobe Photoshop 7.0.

4.1.2.2. Kebutuhan Hardware

Perangkat keras yang dibutuhkan (minimum) antara lain:

 26

Tabel 4.1. Kebutuhan Hardware

No Jenis Spesifikasi Jumlah

1. Komputer Processor 800 Mhz 1 unit

Hardisk 10 GB

RAM 128 MB

VGA 16 MB

CD Rom 32x

Keyboard standar

Mouse standar

4.1.2.3. Analisa Biaya

Biaya yang dikeluarkan antara lain untuk:

a. Software Macromedia Flash Pro 8 Full Rp. 3.365.200,-

b. Komputer dan monitor lengkap Rp. 1.500.000,-

Rp. 4.865.200,-

4.2. Perancangan Sistem

Dengan dibuatnya software Media Pembelajaran Ilmu Komputer ini

diharapkan dapat membantu pengajar dalam menyampaikan materi tentang

ilmu komputer dengan interaktif dan menarik sehingga kegiatan belajar

mengajar dapat dilakukan dengan menyenangkan.

 27

4.2.1. Alur Kerja Sistem

Dalam merancang sebuah software ini diperlukan flowchat

program yang berisi keterangan tentang jalanya program secara garis

besar.

Mulai

Menu Utama
Definisi
komputer
Software
Hardware
Visualisasi
Kuis
Profil
Pembukaan
penutup

Tidak Pilih
Men
u

Ya

1.Definisi komputer, 2. Software, 3.

Hardware, 4. Visualisasi, 5. Kuis, 6. Profil,
7. Pembukaan, 8. Penutup

Materi Teori

Selesai
Gambar 4.1. Flowchat Analisadan Perancangan Media Pembelajaraan ilmu

komputer
 28

Alur kerja sistem dari Analisa dan perancangan Media

Pembelajaran Ilmu Komputer adalah sebagai berikut:

Keterangan :

a. Memulai program.

b. Setelah program mulai dijalankan maka akan tampil Menu Utama

sekaligus sebagai masukan untuk materi pelajaran yang akan

dipilih.

c. Pengguna akan memilih Menu yang diinginkan, jika ya maka akan

menuju proses berikutnya dan jika tidak maka kembali ke Menu

Utama.

d. Jika pengguna telah memilih salah satu menu yang diiginkan maka

program akan memproses Menu yang dipilih.

e. Menu yang dipilih akan menampilkan tulisan yang berisi materi.

f. Program selesai.

4.2.2. Desain Tampilan

Rancangan deasin program ini terdiri dari:

a. Halaman Menu, Berisi Menu dan judul program dan tombol

menuju materi.
 29

Menu 1

Menu 2

Menu 3

Menu 4
Teks pembukaan
Kuis

Keluar

Gambar 4.2. Desain Halaman Menu

b. Halaman Materi Definisi Komputer, Berisi toeri penjelasan

tentang Definisi Komputer dan Sejarah.

Menu 1 Materi Pelajaraan

Menu 2

Menu 3

Menu 4

Kuis
Next
Keluar

Gambar 4.3. Desain Halaman Materi Komputer

 30

4.3. Implementasi Sistem

4.3.1. Menyiapkan halaman

Halaman dibuat agar pengguna lebih mudah dalam mengikuti

materi yang diberikan, Setiap halaman kadang membutuhkan 2 sampai

3 layer tergantung kebutuhan dari animasi dan objek yang diberikan.

Halaman tersebut terdiri dari:

a. Halaman Menu, Berisi macam tombol untuk memudahkan

pengguna menuju layer materi teori pembelajaran ilmu komputer

yang diiginkan, animasi teks dan tombol keluar untuk keluar dari

program.

Gambar 4.7. Tampilan Halaman Menu

 31

b. Halaman Definisi Komputer, berisi teori materi tentang definisi

komputer, Pilih tombol menu disamping kiri untuk memilih materi

pelajaran selanjutnya dan tombol next jika pengguna ingin

melanjutkan ke layer selanjutnya.

Gambar 4.8. Tampilan Halaman Definisi Komputer

c. Halaman Visualisasi, berisi tentang gambar komponen komputer

dan nama komponennya , Pilih tombol menu disamping kiri untuk

memilih materi pelajaran selanjutnya dan tombol next jika

pengguna ingin melanjutkan ke layer selanjutnya.

 32

Gambar 4.9. Tampilan Halaman Visualisasi

d. Halaman Software, berisi tentang teori tentang software gambar

alur kinerja komputer, Pilih tombol menu disamping kiri untuk

memilih materi pelajaran selanjutnya

 33

Gambar 4.10. Tampilan Halaman Software

e. Halaman Hardware, berisi tentang teori tentang hardware, Pilih

tombol menu disamping kiri untuk memilih materi pelajaran

selanjutnya dan tombol next jika pengguna ingin melanjutkan ke

layer selanjutnya.

Gambar 4.11. Tampilan Halaman Hardware

4.3.2. Menyiapkan software pendukung

Dalam mengerjakan sebuah proyek animasi flash kadang diperlukan

program tambahan agar bisa menghasilkan obyek-obyek yang diiginkan

yang akan dimasukan dalam proyek pembuatan animasi tersebut. Program

pendukung dari vendor diluar Macromedia Flash Professional 8 yang

dibutuhkan anatra lain :

a. Adobe Photoshop 7.0, untuk keperluan edit objek gambar.

4.3.3. Menyiapkan bahan / obyek

 34

Dalam pembuatan bahan / materi yang akan ditampilkan di tiap

halaman dibutuhkan obyek-obyek baik berupa gambar, teks statis, obyek kotak,

obyek garis, obyek tombol, obyek garfish (file *.swf ). Obyek-obyek tersebutkan

ditempatkan di Library yang digunakan untuk keperluan pengeditan dan animasi.

Gambar 4.12. Obyek yang akan dimpor ke dalam library

 35

4.3.4. Menyiapkan layer

Layer digunakan untuk menempatkan satu atau beberapa obyek

dalam stage agar dapat diolah dengan oyek lain. Setiap layer terdiri dari

frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin

panjang Frame dalam layer, maka semakin lama animasi akan berjalan.

Gambar 4.13. Membuat layer

4.3.5. Membuat obyek

Untuk membuat obyek pada Macromedia Flash Professional 8 bisa

menggunakan tool-tool yang terdapat pada panel toolbar. Obyek tersebut

bisa berupa teks, garis, kotak, lingkaran.

4.3.6. Memasukan obyek

Obyek yang telah tersimpan di Library dimasukan ke dalam sebuah

layer dengan mengklik obyek tersebut ke dalam stage.

4.3.7. Mengedit obyek

Obyek yang telah berada distage dalam sebuah layer bisa di edit

warna, ukuran, memasukan suara, dengan cara klik dua kali obyek yang

bersangkutan.

4.3.8. Membuat obyek tombol

 36

Obyek yang telah berada distage bisa dirubah menjadi tombol yang

bisa diklik oleh pengguna dengan cara :

a. klik kanan obyek tersebut, pilih Convert to symbol

b. isi nama tombol pada pilihan name, klik button pada pilihan type, klik

OK

Gambar 4.14. Membuat obyek tombol

4.3.9. Memberi Action Script

Frame yang berisi obyek kadang harus diberi label agar lebih mudah

dalam pengeditan terutama untuk pemberian Action Script. Caranya adalah :

a. klik farme atau obyek yang akan diberi Action Script

b. klik panel Actions atau tekan F9 hingga muncul jendela Actions

c. klik tanda plus biru, pilih Global Functions, Time Control,on

Gambar 4.15. Memberi script fungsi tombol

 37

d. klik dua kali pada press

e. klik sesudah kurung kurawal pertama, tekan enter. Klik dua kali pada

layar sebelah kiri gotoAndStop. Masukan label frame yang dituju.

Gambar 4.16. Memberi script setelah tombol diklik

4.3.10. Publikasi File Flash

Setelah file tersebut sudah dibuat lengkap dengan animasinya maka

langkah terakhir adalah mempublikasikan file tersebut. Tipe file yang

dipublikasikan bisa berupa file flash (*.swf), HTML (*.html). GIF Image

(*.gif). JPG Image (*.jpg). PNG Image (*.png). Windows Projector

(*.exe). Macintosh Projector (*.hqx). QuickTime (*.mov).

Untuk pojek yang sedang dibuat akan disimpan dalam format .exe

sehingga bisa langsung dijalankan di computer. Langkah-langkanya

adalah sebagai berikut:

a. klik menu File, Publish Settings

b. setelah muncul jendela Publish Settings, klik Windows Projector (

.exe) pada type file, beri nama file, klik ikon folder untuk memilih

lokasi penyimpanan

c. klik Publish
 38

Gambar 4.17. Publish file flash

 39

4.4. Menjalankan Program

Setelah file tadi dipubliksi file tersebut bisa dijalankan langsung

dikomputer dengan OS Windows yang telah terinstal Flash player. Caranya

adalahdengan mengklik dua kali file tesebut sehingga muncul tampilan

seperti ini:

Halaman Menu

Gambar 4.18. Tampilan Menu Utama

Keterangan:

• Untuk Memulai Materi pilih salah satu tombol yang tersedia

• Untuk keluar dari program tekan tombol keluar

 40

Halaman Materi Definisi Komputer

Setelah memilih tombol definisi yang ada pada menu utama maka akan

muncul tampilan yang berisi teori tentang definisi komputer seperti dibawah

ini:

Gambar 4.19. Tampilan Halaman Definisi Komputer

Keterangan:

• Untuk memilih menu lain klik teks menu yang ada di samping kiri

• Untuk melanjutkan tekan tombol next sehingga akan muncul tampilan

halaman berikutnya
 41

Halaman Materi Visualisasi

Setelah memilih tombol Visualisasi yang ada pada menu utama maka

akan muncul tampilan yang berisi gambar komponen dasar dan nama

komponennya seperti dibawah ini:

Gambar 4.20. Tampilan Halaman Visualisasi

• Untuk memilih menu lain klik teks menu yang ada di samping kiri

• Untuk melanjutkan tekan tombol next sehingga akan muncul tampilan

halaman berikutnya
 42

Halaman Materi Software

Setelah memilih tombol software yang ada pada menu utama maka akan

muncul tampilan yang berisi teori tentang software seperti dibawah ini:

Gambar 4.21. Tampilan Halaman Software

• Untuk memilih menu lain klik teks menu yang ada di samping kiri
 43

Halaman Materi Hardware

Setelah memilih tombol hardware yang ada pada menu utama maka akan

muncul tampilan yang berisi teori tentang hardware seperti dibawah ini:

Gambar 4.22. Tampilan Halaman Hardware

• Untuk memilih menu lain klik teks menu yang ada di samping kiri

• Untuk melanjutkan tekan tombol next sehingga akan muncul tampilan

halaman berikutnya.