Welcome To Blog…Ericute

(1)

PERANCANGAN PROGRAM PERMAINAN

MEWARNAI GAMBAR DENGAN MENGGUNAKAN

MACROMEDIA FLASH 8.0

TUGAS AKHIR

Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III)

Nama : Ayi Utami NIM : 11051027

Jurusan Komputerisasi Akuntansi

Akademi Manajemen Informatika dan Komputer Bina Sarana

Informatika

Jakarta

2010


(2)

PERSETUJUAN DAN PENGESAHAN TUGAS AKHIR

Tugas akhir ini telah disetujui dan disahkan serta diizinkan untuk dipresentasikan pada ujian lisan Tugas Akhir periode: I – 2010/2011

DOSEN PEMBIMBING Tugas Akhir

Eri Mardiani,S.Kom

KETUA JURUSAN Komputerisasi Akuntansi


(3)

PENGUJI TUGAS AKHIR

Tugas Akhir ini telah dipresentasikan pada tanggal ………

PENGUJI 1

(………..)

PENGUJI 2


(4)

LEMBAR KONSULTASI TUGAS AKHIR

AKADEMI BINA SARANA INFORMATIKA

NIM : 11051027

Nama Lengkap : Ayi Utami

Dosen Pembimbing : Eri Mardiani,S.Kom

Judul Tugas Akhir : Perancangan Program Permainan Mewarnai Gambar Dengan Menggunakan Macromedia Flash 8.0

No. Tanggal

Bimbingan

Pokok Bahasan Paraf Dosen

Pembimbing 1.

20 April 2010 Bimbingan Perdana 2.

24 April 2010 Pengajuan Judul “ ANIMASI “ 3. 27 May 2010 Mengajukan Program Animasi 4.

03 Juni 2010 Penampikan Program Animasi yang Di revisi

5.

10 Juni 2010 Menampilkan Program Animasi dengan Suara (Musik)

6.

03 Juli 2010 Pengajuan Bab I dan Bab II 7.

07 Juli 2010 Pengajuan Bab I, Bab II dan Bab III yang Direvisi

8.

13 Juli 2010 Makalah, Flowchart, Program (yang di revisi)

9.

17 Juli 2010 Menampilkan Flowchart yang Direvisi 10. 22 Juli 2010 Menampilkan Flowchart yang Direvisi

Ke-2

Catatan Untuk Dosen Pembimbing Bimbingan Tugas Akhir

Dimulai pada tanggal : 20 April 2010 Diakhiri pada tanggal : 27 Juli 2010 Jumlah pertemuan

bimbingan

: 10 ( Sepuluh )

Disetujui oleh Dosen Pembimbing Eri Mardiani,S.Kom


(5)

LEMBAR KONSULTASI TUGAS AKHIR

AKADEMI BINA SARANA INFORMATIKA

NIM : 11051027

Nama Lengkap : Ayi Utami Asisten

Pembimbing

: Ira Kurniati,SE

Judul Tugas Akhir : Perancangan Program Permainan Mewarnai Gambar Dengan Menggunakan Macromedia Flash 8.0

No. Tanggal Bimbingan

Pokok Bahasan Paraf Dosen Pembimbing 1.

24 April 2010 Ide & Judul Animasi 2.

26 Juli 2010 Pendahuluan & Lampiran 3.

27 Juli 2010 Pendahuluan & Lampiran Revisi 4.

5. 6. 7. 8.

Catatan Untuk Dosen Pembimbing Bimbingan Tugas Akhir

Dimulai pada tanggal : 20. April 2010

Diakhiri pada tanggal : 27 Juli 2010

Jumlah pertemuan bimbingan : 3 ( Tiga)

Disetujui oleh Asisten Pembimbing


(6)

KATA PENGANTAR

Bismillahirrohmanirrohiim,

Puji syukur alhamdulilah penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya, sehingga pada akhirnya penulis mampu menyelesaikan laporan tugas akhir dengan baik. Adapun judul penulisan tugas akhir yang penulis ambil adalah sebagai berikut:

“PERANCANGAN PROGRAM PERMAINAN MEWARNAI GAMBAR DENGAN MENGGUNAKAN MACROMEDIA FLASH 8.0”

Maksud dan tujuan penulisan laporan tugas akhir ini adalah untuk memenuhi salah satu syarat kelulusan Program Diploma III Jurusan Komputerisasi Akuntansi di Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika (AMIK BSI). Hambatan dan rintangan tidak pernah luput menggangu penulis saat

penyusunan laporan tugas akhir ini. Namun berkat bimbingan, dukungan dan arahan dari berbagai pihak baik secara moril maupun materil, penulis mampu menyelesaikan laporan tugas akhir ini.

Untuk itu, perkenankanlah penulis mengucapkan terima kasih yang sebesar-besarnya kepada:

1. Allah SWT, terima kasih untuk segala curahan rahmat dan hidayah-Nya.

2. Bapak Ir. Naba Aji Notoseputro, selaku Direktur Bina Sarana Informatika, Jakarta.

3. Ibu Hj.Eni Heni Hermaliani,S.Kom, MM selaku Ketua Jurusan Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika, Jakarta.

4. Ibu Eri Mardiani,S.Kom selaku Dosen Pembimbing tugas akhir yang telah memberikan petunjuk, waktu, bimbingan, nasehat dan kesabarannya kepada penulis.

5. Ibu Ira Kurniati,SE selaku Asisten Dosen Pembimbing tugas akhir. 6. Seluruh dosen, staf dan karyawan dilingkungan Bina Sarana Informatika.


(7)

7. Kedua orang tua penulis, khususnya Ibunda tercinta, yang telah memberikan dukungan moral dan spiritual.

8. Rekan-rekan dijurusan Komputerisasi Akuntansi angkatan 2005, terima kasih telah berkenan untuk bersahabat dengan penulis.

9. Serta seluruh pihak yang namanya tidak mungkin penulis sebutkan satu persatu. Penulis menyadari, dalam pembuatan laporan tugas akhir ini masih jauh dari kata sempurna. Untuk itu penulis mengharapkan segala saran dan kritik yang bersifat membangun, agar dikemudian hari menjadi lebih sempurna.

Akhir kata, semoga laporan tugas akhir ini dapat bermanfaat bagi pembaca pada umumnya, dan penulis pada khususnya.

Jakarta, 27 Juli 2010


(8)

DAFTAR ISI

Halaman

Lembar Judul Tugas Akhir... i

Lembar Persetujuan dan Pengesahan Tugas Akhir... ... ii

Lembar Penguji Tugas Akhir.. ... iii

Lembar Konsultasi Tugas Akhir... iv

Kata Pengantar ... v

Daftar Isi ... vi

Daftar Symbol... ix

Daftar Gambar ... xi

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang... 1

1.2. Maksud dan Tujuan ... 2

1.3. Metode Pengumpulan Data... 2

1.4. Ruang Lingkup ... 3 BAB II PEMBAHASAN... 4


(9)

2.1.1. Perancangan………...…………... 4

2.1.2. Program ……... 4

2.1.3. Sekilas Tentang Program Macromedia Flash ... 5

2.1.4. HIPO ... 15

2.1.5. Flowchart ... 16

2.2.. Analisa ... 20

2.2.1. Spesifikasi Animasi ... 20

1. Rancangan Animasi. ... 20

2. Publish Animasi ... 27

2.2.2. Sarana Pendukung Program ... 30

1. Perangkat Keras ... 30

2. Perangkat lunak ... 31

3. Konfigurasi Sistem Komputer ... 31

BAB III PENUTUP ... 31

3.1. Kesimpulan ... 31

3.2. Saran-saran ... 32

DAFTAR PUSTAKA

DAFTAR RIWAYAT HIDUP LAMPIRAN-LAMPIRAN


(10)

DAFTAR SIMBOL

a. Simbol Flowchart

TERMINAL

Digunakan untuk menggambarkan awal dan akhir dari suatu kegiatan.

DECISION

Digunakan untuk menggambarkan proses pengujian suatu kondisi yang ada.

PREPARATION

Digunakan untuk menggambarkan persiapan harga awal dari proses yang akan dilakukan.

FLOW LINE

Digunakan untuk menggambarkan hubungan proses dari satu proses ke proses lainnya.

INPUT/OUTPUT

Digunakan untuk menggambarkan proses memasukkan data yang berupa pembacaan data dan sekaligus proses keluaran yang berupa pencetakan data.


(11)

SUBROUTINE

Digunakan untuk menggambarkan proses pemanggilan sub program dari program utama (rekursivitas).

b. Simbol Konfigurasi Komputer

DISPLAY

Digunakan untuk menggambarkan kegiatan yang menampilkan data melalui CRT (Cathode Ray Tube) atau monitor.

MANUAL INPUT

Digunakan untuk menggambarkan kegiatan memasukkan data dengan menggunakan terminal (keyboard).

LINE PRINTER

Digunakan untuk menggambarkan pengeluaran data pada mesin pencetak (printer).

FLOPPY DISK DRIVE

Digunakan untuk menggambarkan proses pembacaan data melalui media disket.

HARD DISK DRIVE

Digunakan untuk menggambarkan proses pembacaan data melalui media hard disk.


(12)

DAFTAR GAMBAR

Halaman

1. Gambar II.1. Area Kerja Flash ... 10

2. Gambar II.2. Tool Box ... 10

3. Gambar II.3. Panel Info ... 11


(13)

5. Gambar II.5. Panel Properties ... 12

6. Gambar II.6. Panel Filter ... 12

7. Gambar II.7. Panel Color Mixer ... 13

8. Gambar II.8. Panel Color Swatches ... 14

9. Gambar II.9. Panel Align ... 14

10. Gambar II.10. Panel Transform ... 15

11. Gambar II.11. Panel Library ... 16

12. Gambar II.12. Panel Scene ... 16

13. Gambar II. 13.HIPO ... 17

14. Gambar II. 14. Flowchart Menu Utama ... 18

15. Gambar II.15. Flowchart Memulai Permainan ... 18

16. Gambar II.16. Flowchart Nilai Tertinggi ... 19

17. Gambar II. 17. Flowchart Biodata Pembuat ... 20

18. Gambar II. 18. Judul Permainan ... 21

19. Gambar II.19. Serangga ... 22

20. Gambar II. 20. Lauk Pauk ... 23

21. Gambar II. 21. Gadis Kecil ... 24

22. Gambar II. 22. Disain Awal Jam ... 24

23. Gambar II. 23. Hasil Akhir Gambar Jam ... 25

24. Gambar II. 24. Panel Publish ... 26

25. Gambar II. 25. Panel Publish Setting ... 27


(14)

BAB I

PENDAHULUAN

1.1. Latar Belakang

Video games adalah salah satu sarana hiburan yang saat ini sedang mengalami kemajuan yang pesat. Bahkan perusahaan sistem operasi terbesar saat ini


(15)

MICROSOFT pun rela untuk mengeluarkan dana yang begitu besar hingga mencapai puluhan jutaan dollar untuk mencoba terjun kedalam bisnis ini dan bersaing dengan pendahulunya SONYdanNINTENDO. Hal ini disebabkan karena kini game

bukan lagi dianggap sebagai hiburan belaka tetapi sudah menjadi peluang bisnis yang menjanjikan dengan keuntungan hingga mencapai milyaran US Dollar.

Saat ini sudah ada banyak sekali jenis-jenis dan tipe video games yang beredar dipasaran, namun dari sekian banyaknya game-game yang beredar dipasaran, jarang sekali kita temui game-game yang mendidik, bahkan banyak game-game yang ada sekarang mengandung unsur kekerasan ataupun hal-hal yang tidak pantas untuk dikonsumsi oleh anak-anak.

Oleh karena itu penulis tertarik untuk membuat program permainan yang dapat memberikan nilai positif bagi setiap pemainnya terutama anak-anak. Dan sesuai dengan permasalahan yang telah dijelaskan diatas, maka untuk itu penulis sangat tertarik untuk membahasnya dalam tugas akhir yang berjudul: “PERANCANGAN

PROGRAM PERMAINAN MEWARNAI GAMBAR DENGAN

MENGGUNAKAN MACROMEDIA FLASH 8.0”

1.2. Maksud dan Tujuan

Adapun maksud dari penulis disini adalah sebagai berikut:

a. Menambah wawasan dan ilmu pengetahuan penulis khususnya dalam merancang program yang akan dibuat.

b. Sebagai penerapan ilmu yang penulis dapatkan ketika mengikuti perkuliahan di Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika.


(16)

Sedangkan tujuan penulisan laporan tugas akhir ini adalah memenuhi salah satu syarat kelulusan pada program Diploma Tiga Jurusan Manajemen Informatika di Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika.

1.3.Metode Penelitian

Dalam penyusunan Tugas Akhir ini, data maupun teori yang digunakan oleh penulis diambil dari berbagi sumber. Adapun cara atau metode yang digunakan oleh penulis untuk mendapatkan data-data maupun teori yang mendukung guna terselesaikannya Tugas Akhir ini, yaitu :

a. Wawancara

Yaitu melakukan wawancara langsung maupun tidak langsung kepada orang-orang yang telah berkecimpung di dunia game dengan bertanya melalui forum-forum di internet ataupun bertemu langsung secara personal.

b. Observasi

Yaitu melakukan kegiatan pengumpulan data dengan melihat sejumlah objek penelitian dari sejumlah orang dalam jangka waktu yang bersamaan.

c. Studi Kepustakaan

Yaitu kegiatan yang dilakukan guna melengkapi data-data yang diperlukan dengan mencari berbagai literatur yang ada di perpustakaan.


(17)

1.4. Ruang Lingkup

Dalam penyusunan Tugas Akhir ini penulis membatasi permasalahan yang akan dijelaskan yaitu seputar pembahasan tentang menu-menu program, perancangan program, hingga publish animasi.

BAB II

PEMBAHASAN


(18)

2.1.1 Perancangan

Menurut Soetedjo (1991:1) mengemukakan bahwa ”Perancangan adalah merancang dalam arsitektur berkaitan dengan penggunaan gambar untuk mengembangkan ruang dan bentuk”.

Manfaat dari pemahaman terhadap proses perancanganadalah:

a. Mengenali permasalahan atau menyusun program, yaitu menguraikan masalah-masalah dalam bentuk daftar panjang perihal kumpulan informasi.

b. Pemilihan metoda sebagai pemecahan masalah, kemudian dikembangkan dalam alternatif rancangan. Kemudian pemilihan alternatif sebagai hasil akhir.

2.1.2 Program

Menurut John L Herman dalam Tayibnapis (1989 : 6) mengemukakan bahwa

Program adalah segala sesuatu yang anda lakukan dengan harapan akan mendatangkan hasil atau manfaat, ini dapat ditarik benang merah bahwa dari perbuatan manusia yang darinya diharapkan akan memperoleh hasil dan manfaat dapat disebut program”.

2.1.3 Sekilas Tentang Program Macromedia Flash 8

Menurut Yahya Kurniawan (2005 : 1) mengemukakan bahwa “Flash MX 2004 adalah contoh nyata dari kombinasi animasi dan pemrograman”.

Menurut Island Script (2008 : 1) mengemukakan bahwa “Flash adalah software grafis animasi yang dapat membuat objek grafis dan menganimasikannya


(19)

sehingga kita dapat langsug membuat objek desain tanpa harus menggunakan software grafis pendukung seperti illustrator atau photoshop”.

Menurut Waluyo (2004 : 1) mengemukakan bahwa “Macromedia Flash adalah software grafis animasi professional untuk menghasilkan halaman web yang menarik dan interaktif”.

Menurut Zeembry (2006 : 1) mengemukakan bahwa ”Animasi adalah rangkaian gambar yang disusun secara berurutan”.

Menurut DigiBook (2009 : 1) mengemukakan bahwa “Adobe Flash adalah software paling popular untuk membuat animasi”.

Macromedia Flash merupakan program grafis animasi web yang diproduksi oleh Macromediacorporation. MacromediaFlashpertama kali diproduksi pada tahun 1996. pada awal produksi, Macromedia Flash merupakan software untuk membuat animasi sederhana berbasis .gif. Seiring dengan perkembangannya, Macromedia Flash mulai digunakan dalam pembuatan desain situs web. Macromedia Flash telah diproduksi dengan beberapa versi terbaru yang sekarang beredar di pasaran adalah MacromediaFlash versi 8 di rilis tahun 2005.

Seiring dengan perkembangannya, Macromedia Flash telah diproduksi dengan beberapa versi. Versi yang kini banyak digunakan adalah Macromedia FlashMXdan Macromedia Flash 8. Meskipun versi terbarunya sudah beredar di pasaran yakni

Adobe Flash CS3 yang hak ciptanya telah dimiliki oleh Adobe bukan Macromedia Corp lagi. Keunggulan dari program MacromediaFlashdibanding program lain yang sejenis, antara lain :


(20)

2. Dapat membuat perubahan transparansi warna dalam movie. 3. Dapat membuat perubahan animasi dari 1 bentuk ke bentuk lain.

4. Dapat membuat gerakan animasi dengan mengikuti alur yang telah ditetapkan.

5. Dapat dikonversi dan dipublikasikan ke dalam beberapa tipe, diantaranya adalah

.swf, .html, .gif, .jpg, .png, .exe, .mov.

Area kerja Macromedia Flash 8 terdiri atas beberapa komponen, yaitu Menu Bar, Stage, Toolbox, Timeline dan Panels. Di bawah ini merupakan window dari Macromedia Flash 8 yang digunakan dalam pekerjaan pembuatan animasi, baik itu berupa graphic atau animasi bergerak, seperti tampak pada Gambar II.1.

Gambar II.1 Area Kerja MacromediaFlash 8

Tool Box

Panel 2

Stage Title bar

Panel 1

Timeline Menu


(21)

a. Menu Bar, terdiri dari 10 menu utama yang masing-masing berisi submenu yang dilengkapi dengan short cut menggunakan kombinasi tombol keyboard.

b. Stage, merupakan lembar kerja di mana gambar, teks dan tombol navigasi dibuat untuk keperluan animasi atau aplikasi.

c. Toolbox, terdiri dari beberapa tool untuk membuat gambar, mewarnai dan mengatur tampilan objek pada stage.

Arrow Tool

Line Tool Pen Tool Oval Tool Pencil Tool Free Transform Tool

Ink Bottle Tool Eyedropper Tool Hand Tool

Subselection Tool Gradient Transform Tool Lasso Tool

Text Tool Rectangle Tool Brush Tool

Paint Bucket Tool Eraser Tool Zoom Tool

Colors


(22)

Gambar II.2 Toolbox

1. Arrow tools (V)digunakan untuk memilih dan memindahkan objek.

2. Subselection tool (A)untuk memodifikasi titik-titik suatu garis pada objek.

3. Free Transform tool (Q)untuk mentransformasi bentuk suatu objek.

4. Gradient Transform tool (F)untuk mengatur setting gradasi ( fiil ) suatu objek.

5. Line tool (N) untuk membuat garis lurus.

6. Lasso tool (L) untuk memilih bagian dari objek atau memilih objek yang tidak teratur.

7. Pen tool (P)untuk menambah atau mengurangi titik-titik pada garis suatu objek.

8. Text tool (T)untuk mebuat objek yang berupa teks.

9. Oval tool (O) untuk membuat objek lingkaran atau oval.

10.Ractangle tool (R) untuk membuat persegi atau polystar.

11.Pencil tool (Y) untuk membuat objek bebas berupa garis.

12.Brush tool (B) untuk membuat objek bebas berupa sapuan kuas.

13.Ink Bottle tool (S) untuk memberi warna outline (garis luar)suatu objek.

14.Paint Bucket tool (K) untuk memberi warna fiil (bagian dalam) suatu objek.

15.Eyedropper tool (I) untuk mengambil atau meniru warna suatu objek.

16.Eraser tool (E) untuk menghapus bagian objektertentu.

17.Hand tool (H) untuk menggeser bidang kanvas ke atas atau ke bawah.

18.Zoom tool (Z) untuk mengatur ukuran persentase stage.

19.Colors untuk mengatur dan memodifikasi warna suatu objek


(23)

20.Options untuk mengatur setting objek pada stage (tiap tool memiliki option yang berbeda).

1. Panel

Panel adalah jendela persegi empat yang merupakan kumpulan dari berbagai macam fungsi yang dikelompokan sesuai dengan jenisnya. Ada berbagai macam panel yang terdapat dalam program MacromediaFlash8 diantaranya adalah :

a. Panel Info

Panel Info adalah panel yang berisi berbagai macam informasi yang terdapat pada suatu objek gambar ataupun symbol. Informasi yang diberikan meliputi panjang lebar, letak koordinat stage, kombinasi warna, nilai Alpha (transparan), kursor mouse. Panel Info terletak di menu window\info. Panel Info dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+I pada keyboard.

Gambar II.3 Panel Info. b. Panel Actions

Panel Actions adalah panel yang berfungsi sebagai tempat peletakan dan penulisan scripts. Panel Actions terletak di menu window\actions. Panel Info dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol F9 pada


(24)

Gambar II.4 Panel Actions. c. Panel Properties

Panel Properties adalah suatu panel yang berisi berbagai macam informasi dan atribut pada suatu objek yang sedang terseleksi. Panel ini terletak di menu

window\properties\properties. Panel Properties dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+F3 pada keyboard.


(25)

d. Panel Filter

Panel Filters adalah Panel yang berguna untuk melakukan modifikasi objek mengenai penambahan dan pengurangan effect pada suatu symbol. Panel Filters

terletak di menu window\properties\filters. Panel Color Mixer dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Shift+F9 pada keyboard.

Gambar II.6 Panel Filter. e. Panel Color Mixer

Panel Color Mixer adalah panel yang berfungsi untuk melakukan proses pencampuran warna. Panel ini terletak di menu window\color mixer. Panel Color Mixer dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Shift+F9 pada keyboard.


(26)

Gambar II.7 Panel Color Mixer. f. Panel Color Swatches

Panel Color Swacthes adalah panel tempat kumpulan warna dasar maupun warna gradien. Panel ini terletak di menu window\align. Panel ini terletak di menu

Window\Color Swatches. Panel ini terletak di menu window\transform. Panel

Transform dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+F9 pada keyboard.


(27)

g. Panel Align

Panel Align adalah panel yang berfungsi untuk membantu peletakan objek dengan objek, ataupun objeck dengan stage. Panel ini terletak di menu window\align. Panel Transform dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+K pada keyboard.

Gambar II.9 Panel Align. h. Panel Transform

Panel Tranform adalah Panel yang berguna untuk memodifikasi bentuk pada suatu objek gambar ataupun symbol. Perubahan bentuk meliputi perubahan pada ukuran, letak, dan perputaran. Panel ini terletak di menu window\transform. Panel

Transform dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+T pada keyboard.


(28)

Gambar II.10 Panel Transform. i. Panel Library

Panel Library adalah panel yang berisi kumpulan symbol, file suara, dan file

gambar yang terdapat dalam suatu project. Panel ini terletak di menu window\library. Panel Library dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Ctrl+L pada keyboard.


(29)

j. Panel Scene

Panel Scene adalah panel yang berfungsi untuk mengelola scene, seperti menambah, mengurangi, dan menggandakan scene pada suatu project. Panel ini terletak di menu window\other panels\scene. Panel Scene dapat juga dipanggil dengan menggunakan shortcut dengan cara menekan tombol Shift+F2 pada keyboard.

Gambar II.12 Panel Scene.

2.1.4 HIPO (Hierarcky Plus Input – Process – Output)

Merupakan metodologi yang dikembangkan dan didukung oleh IBM. HIPO sebenarnya adalah alat dokumentasi program. Akan tetapi sekarang, HIPO banyak digunakan sebagai alat disain dan teknik dokumentasi dalam situs pengembangan sistem. HIPO berbasis pada fungsi, yaitu tiap-tiap modul didalam sistem digambarkan oleh fungsi utamanya. HIPO dapat digunakan sebagai alat pengembangan sistem dan teknik dokumentasi program dan penggunaan HIPO ini mempunyai sasaran utama sebagai berikut ini.


(30)

(31)

2.1.5 Flowchart

Dalam pembuatan sebuah animasi dibutuhkan sebuah flowchart. Pembuatan

flowchart ini juga berfugsi untuk mempermudah pembuatan sebuah tampilan animasi. Jadi dengan adanya flowchart ini proses perulangan dari tampilan animasi game yang dibuat dapat dilihat tanpa harus menjalankan program animasi interaktifnya. Dibawah ini adalah flowchart pada animasi game yang telah dibuat.


(32)

1. Flowchart Menu Utama


(33)

2. Flowchart Memulai Permainan


(34)

3. Flowchart Nilai Tertinggi

Gambar II.16 Flowchart Nilai Tertinggi.

4. Flowchart Biodata Pembuat


(35)

2.2 Analisa (Perancangan/Pembuatan)

Untuk menghasilkan suatu rancangan yang baik maka diperlukan suatu bentuk masukan (input) dan keluaran (output) yang selanjutnya akan dijelaskan pada sub bab berikut.

2.2.1 Spesifikasi Animasi 1. Rancangan Animasi

Dalam sub bab berikut akan dijelaskan tentang langkah-langkah dalam pembuatan gambar yang ada dalam program permainan ini.

a. Membuat gambar judul permainan di scene Title.

1) Buatlah teks “Mewarnai Gambar” dengan menggunakan jenis huruf (font) “Windsor BT” dan menggunakan ukuran 50 pada panel properties.

2) Lalu untuk merubah bentuk font menjadi bentuk fill tekan Ctrl+B sebanyak 2 (dua) kali dengan menggunakan keyboard.

3) Berilah garis tepi pada setiap huruf dengan menggunakan Ink Bottle Tool

dengan ketebalan garis 4 (empat) pada panel properties.

4) Lalu setelah itu berilah warna pada objek dengan menggunakan Paint Bucket Tool, warnailah teks dengan mengunakan warna-warna linear

sesuai dengan contoh gambar dibawah ini.

5) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.


(36)

Gambar II.18 Judul Permainan.

b. Membuat gambar serangga di atas daun yang berada di scenegame.

1) Untuk membuat serangga pertama-tama buatlah gambar badan serangga dengan menggunakan Oval Tool.

2) Lalu buatlah kepala dan susun tepat diatas badan yang telah dibuat.

3) Setelah badan dan kepala selesai dibuat, langkah selanjutnya adalah membuat antena dan kaki-kaki serangga. Buat dengan menggunakan Line Tool lalu susun sesuai dengan contoh.

4) Tahap terakhir adalah memberi warna pada gambar dengan menggunakan

Paint Bucket Tool.

5) Buat 2 (dua) gambar serangga lagi dengan menggunakan cara yang sama pada pembuatan serangga sebelumnya.

6) Dan terakhir membuat daun dengan menggunkan Line Tool, dan warnai gambar tersebut dengan menggunakan Paint Bucket Tool.

7) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.


(37)

Gambar II.19 Serangga.

c. Membuat Gambar Lauk Pauk di Scene Game.

1) Pertama-tama buatlah bentuk dasar dari sebuah lauk pauk dengan menggunakan Line Tool, atau dengan menekan tombol N pada keyboard.

2) Ubah dan perbaikilah gambar dasar yang dibuat tadi dengan menggunakan Selection Tool hingga sesuai dengan bentuk yg diinginkan.

3) Setelah garis terbentuk dengan sempurna warnailah gambar dengan menggunakan Paint Bucket Tool.

4) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.


(38)

Gambar II.20 Lauk Pauk.

d. Membuat Gambar Gadis Kecil di Scene Game.

1) Pertama-tama buatlah bentuk dasar dari sebuah gadis kecil dengan menggunakan Line Tool, atau dengan menekan tombol N pada keyboard.

2) Ubah dan perbaikilah gambar dasar yang dibuat tadi dengan menggunakan Selection Tool hingga sesuai dengan bentuk yg diinginkan.

3) Setelah garis terbentuk dengan sempurna warnailah gambar dengan menggunakan Paint Bucket Tool.

4) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.


(39)

Gambar II.21 Gadis Kecil.

e. Membuat gambar kotak penjelasan di Scene Game.

1) Pertama-tama buatlah gambar kotak sebagai panel gambar dengan menggunakan Rectangle Tool.

2) Warnailah kotak tersebut dengan menggunakan warna gradient seperti pada contoh gambar dengan menggunakan Paint Bucket Tool.

3) Setelah itu buatlah teks penjelasan sebagai judul dengan menggunakan

Text Tool.

4) Lalu untuk merubah bentuk font menjadi bentuk fill tekan Ctrl+B sebanyak 2 (dua) kali pada keyboard.

5) Berilah garis tepi pada setiap huruf yang sudah di pecah tadi (break apart) dengan menggunakan Ink Bottle Tool.


(40)

6) Setelah itu tahap terakhir adalah memberikan warna dengan menggunakan Paint Bucket Tool, warnailah teks dengan mengunakan warna-warna linear sesuai dengan contoh gambar dibawah ini.

7) Ubah dan perbaikilah gambar dasar yang dibuat tadi dengan menggunakan Selection Tool.

8) Setelah garis terbentuk dengan sempurna warnailah gambar dengan menggunakan Paint Bucket Tool.

9) Dan terakhir adalah membuat kata-kata untuk penjelasan permainan, pertama-tama buatlah teks bertuliskan ” Warnailah gambar sesuai dengan contoh, sebelum waktu yang diberikan habis” dengan menggunakan Text Tool.

10) Lalu untuk merubah bentuk font menjadi bentuk fill tekan Ctrl+B sebanyak 2 (dua) kali.

11) Berilah garis tepi pada setiap huruf dengan menggunakan Ink Bottle Tool.

12) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.

f. Membuat gambar jam di Scene Game.

1) Pertama-tama buatlah bentuk dasar dari sebuah jam dengan menggunakan


(41)

2) Ubah dan perbaikilah gambar dasar yang dibuat tadi dengan menggunakan Selection Tool hingga sesuai dengan bentuk yang diinginkan.

Gambar II.22 Disain awal jam.

3) Setelah garis terbentuk dengan sempurna warnailah gambar dengan menggunakan Paint Bucket Tool.

4) Tahap terakhir yang harus dilakukan adalah membuat objek yang telah dibuat tersebut menjadi sebuah symbol. Caranya yaitu dengan menseleksi semua gambar atau objek yang sudah dibuat tadi lalu klik kanan dan pilih menu Convert to Symbol dan pilih Movie clip lalu tekan OK.


(42)

Gambar II.23 Hasil Akhir Gambar Jam.

2. Publish Animasi

Setelah game selesai dibuat, maka langkah selanjutnya adalah publishing. Hal ini dilakukan agar game dapat dijalankan pada semua PC, baik yang memiliki flash

player ataupun yang tidak memiliki flash player dapat menjalankan game yang telah dibuat tesebut.

Untuk mempublikasikan dokumen flash diharuskan untuk memilih format File

publikasi yang sesuai dengan tujuan dalam pembuatan game. Perintah publish akan menciptakan file-file di bawah ini :

a. Flash Movie yaitu untuk bentuk film setengah jadi (dalam artian file hanya dapat dilihat jika pengguna menginstal program flash) dari sebuah animasi, sebuah file dengan ekstensi .swf.

b. Gambar alternative dalam bermacam-macam format yang secara otomatis akan muncul bila flash player untuk memutar flash movie tidak tersedia

(GIF, JPEG, PNG dan Quick Time).

c. Dokumen HTML yang mendukung untuk menampilkan flash movie di dalam browser dan mengontrol setting browser.

d. Stand Alone Projector, merupakan aplikasi mandiri yang dapat berekstensi. EXE.


(43)

(44)

Gambar II.25 Publish Setting.

2.2.2 Sarana Pendukung Program

Dalam melaksanakan perubahan dari manual ke dalam komputerisasi diperlukan suatu sarana pendukung sehingga yang akan dijalankan atau dipergunakan dapat berjalan sebagaimana yang diinginkan. Adapun sarana pendukung yang diperlukan tersebut adalah berupa komputer.


(45)

Komputer adalah peralatan (device) sistem elektronik yang bekerja dibawah kontrol untuk memanipulasi data secara tepat serta dirancang tersimpan secara otomatis dapat menerima, menyimpan dan memproses data untuk menghasilkan informasi yang merupakan hasil dari pemrosesan tersebut.

Semakin berkembangnya teknologi komputer dalam menangani berbagai masalah yang ada disekitarnya maupun dalam suatu organisasi atau instansi, merupakan suatu hal yang sangat berarti dan mempunyai pengaruh positif. Komputer dapat dikatakan efektif serta efisien jika volume data yang diolah memiliki kapasitas yang lebih besar dan memerlukan ketelitian yang tinggi.

Agar komputer dapat digunakan untuk mengolah data maka harus berbentuk sistem komputer. Tujuan dari komputer adalah untuk menghasilkan informasi atau laporan yang cepat dan tepat, agar tujuan tersebut dapat tercapai maka haruslah ada elemen-elemen yang mendukung.

1. Perangkat Keras (Hardware)

Perangkat Keras (Software) yang dibutuhkan dalam pembuatan animasi game

ini, yaitu seperangkat komputer dengan spesifikasi sebagai berikut :

a. Processor Intel Pentium 1.8 GHz.

b. Memory 256 Mb.

c. Harddisk sebesar 40 Mb.

d. VGA Card 128 Mb.

e. Monitor warna 32-bit yang resolusinya mampu hingga 1024 x 768.


(46)

g. Sound Card dan speker untuk mendengarkan suara.

2. Perangkat Lunak (Software)

Selain perangkat keras (Hardware), perangkat lunak (Software) juga dibutuhkan dalam pembuatan animasi Game ini. Perangkat lunak yang digunakan diantaranya adalah :

a. Windows XP Service Park 2

b. MacromediaFlash8.0

c. Adobe Photoshop 7.0

d. WavePad Sound Editor

e. Konfigurasi Sistem Komputer

Konfigurasi komputer adalah suatu penggambaran spesifikasi perangkat dari sebuah komputer yang ditampilkan dengan bentuk simbol. Konfigurasi sistem komputer sangat berperan penting dalam menjalankan sebuah program yang di gunakan, karena apabila konfigurasi komputer yang digunakan tidak sesuai dengan batas nimimal yang dibutuhkan oleh sebuah perangkat lunak atau software maka program tersebut tidak dapat berjalan dengan baik dan bahkan tidak dapat berjalan sama sekali. Dibawah ini adalah konfigurasi komputer yang digunakan dalam pembuatan animasi interaktif dengan menggunakan program MacromediaFlash8.


(47)

(48)

BAB III

PENUTUP

3.1. Kesimpulan

Sebagai penutup dari penulisan tugas akhir ini, maka ada beberapa hal yang dapat dijadikan kesimpulan, antara lain :

1. Flash 8 adalah sebuah program yang mampu untuk membuat game, animasi kartun, dan aplikasi multimedia interaktif seperti demo produk dan tutorial

interaktif.

2. Berkas yang dihasilkan dari Adobe flash 8 mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi adobe flash player.

3. Flash menggunakan bahasa pemrograman bernama ActionScript, dan pada program macromedia flash 8 terdapat 2 jenis ActionScript yaitu ActionScript 1

dan ActionScript 2.

3.2. Saran-saran

Berkaitan dengan telah terselesaikannya penulisan tugas akhir ini, ada beberapa masukan dan saran-saran yang disampaikan sebagai berikut :

1. Gunakan spesifikasi komputer yang cukup guna kelancaran jalannya program. 2. Jika spesifikasi komputer yang digunakan kurang memadai, di sarankan untuk

mensetting qualitas gambar pada program menjadi “low”.


(49)

DAFTAR PUSTAKA

Nugroho. 2005. Perancangan Sistem. Jakarta : Penerbit Andi.

Sugiyono. 2005. Pemrograman Terstruktur untuk Pelajar dan Mahasiswa. Jawa Barat : Bagian Penerbit Panji Gumilang Press.

Kurniawan Yahya. 2005. Kiat Praktis Menguasai ActionScripts 2.0 Flash MX 2004. Jakarta : PT Elex Media Komputindo.

Script Island. 2008. Panduan Mudah Membuat Animasi. Jakarta : Media Kita Waluyo. 2004. Pemprograman visual Basic 6.0 Potensi Kombinasinya Dengan Macromedia Flash MX. Bandung : Dinastindo.

Zeembry. 2006. 12 Jurus Pamungkas Animasi Kartun dengan Flash 8. Jakarta : PT Elex Media Komputindo.

DigiBook. 2009. Ayo Belajar Mudah Animasi Flash CS4. Jakarta : Penerbit Andi.


(50)

DAFTAR RIWAYAT HIDUP

A. Biodata Mahasiswa

N.I.M : 11051027

Nama Lengkap : Ayi Utami

Tempat & Tgl Lahir : Jakarta, 03 April 1986.

Alamat : Jl. Jatayu 1 Lebak Wangi Rt 006 / 04 No. 28B Gandaria, Jakarta Selatan 12240.

B. Riwayat Pendidikan

1. SD Negeri 16 Pagi Kby Baru Jakarta, Lulus Tahun 1999. 2. SLTP Negeri 29 Jakarta, Lulus Tahun 2002.

3. SMK Gita Kirtti I Jakarta, Lulus Tahun 2005.

3 x 4

Jakarta,27 Juli 2010 Saya yang bersangkutan.


(51)

Lampiran 1 Tampilan Program.


(52)

(53)

(54)

(55)

(56)

(57)

(58)

(59)

(60)

(61)

(62)

Lampiran 2 Listing Program. 1. Listing Program Pada Halaman Permainan.

onClipEvent (load) { _root.Benar01_var = 0; _root.Benar02_var = 0; _root.Benar03_var = 0; _root.Benar04_var = 0; _root.Benar05_var = 0; _root.Benar06_var = 0; _root.Benar07_var = 0; _root.Benar08_var = 0; _root.Benar09_var = 0; _root.Benar10_var = 0; _root.Benar11_var = 0; _root.Benar12_var = 0; _root.Benar13_var = 0; _root.Benar14_var = 0; _root.Benar15_var = 0; _root.Benar16_var = 0; _root.Benar17_var = 0; _root.Benar18_var = 0; _root.Benar19_var = 0; _root.Benar20_var = 0;


(63)

_root.Benar21_var = 0; _root.Benar22_var = 0; _root.Benar23_var = 0; _root.Benar24_var = 0; _root.Benar25_var = 0; }

onClipEvent (enterFrame) {

this.gotoAndStop(_root.Image_var); if (this._alpha<100) {

this._alpha += 5; }

if (_root.Control_var == 2 and this._xscale<110) { this._xscale += 2;

this._yscale += 2; } _root.TotalBenar_var = _root.Benar01_var+_root.Benar02_var+_root.Benar03_var+_root.Benar04_var+_ root.Benar05_var+_root.Benar06_var+_root.Benar07_var+_root.Benar08_var+_r oot.Benar09_var+_root.Benar10_var+_root.Benar11_var+_root.Benar12_var+_ro ot.Benar13_var+_root.Benar14_var+_root.Benar15_var+_root.Benar16_var+_root


(64)

.Benar17_var+_root.Benar18_var+_root.Benar19_var+_root.Benar20_var+_root. Benar21_var+_root.Benar22_var+_root.Benar23_var+_root.Benar24_var+_root.B enar25_var+_root.Benar26_var+_root.Benar27_var+_root.Benar28_var+_root.Be nar29_var+_root.Benar30_var+_root.Benar31_var+_root.Benar32_var+_root.Ben ar33_var+_root.Benar34_var+_root.Benar35_var+_root.Benar36_var+_root.Bena r37_var+_root.Benar38_var+_root.Benar39_var+_root.Benar40_var+_root.Benar 41_var+_root.Benar42_var+_root.Benar43_var+_root.Benar44_var+_root.Benar4 5_var+_root.Benar46_var+_root.Benar47_var+_root.Benar48_var+_root.Benar49 _var+_root.Benar50_var; }

2. Listing Program Waktu.

onClipEvent (enterFrame) { if (_root.Control_var == 1) { _root.Sec_var -= 1;

if (_root.Sec_var<=0 and _root.Detik_var>0) { _root.Detik_var -= 1;

_root.Sec_var = 60; }


(65)

_root.Menit_var -= 1; _root.Detik_var = 60; }.

if (_root.Sec_var<=0 and _root.Detik_var<=0 and _root.Menit_var<=0) { _root.gotoAndStop("Result_lb");

} } }

3. Listing Program Menghitung Nilai.

on (press) {

_root.Score_var = Math.round((_root.TotalBenar_var/_root.Area_var)*100); _root.gotoAndStop("Result_lb");


(1)

(2)

(3)

Lampiran 2 Listing Program. 1. Listing Program Pada Halaman Permainan.

onClipEvent (load) { _root.Benar01_var = 0; _root.Benar02_var = 0; _root.Benar03_var = 0; _root.Benar04_var = 0; _root.Benar05_var = 0; _root.Benar06_var = 0; _root.Benar07_var = 0; _root.Benar08_var = 0; _root.Benar09_var = 0; _root.Benar10_var = 0; _root.Benar11_var = 0; _root.Benar12_var = 0; _root.Benar13_var = 0; _root.Benar14_var = 0; _root.Benar15_var = 0; _root.Benar16_var = 0; _root.Benar17_var = 0; _root.Benar18_var = 0; _root.Benar19_var = 0; _root.Benar20_var = 0;


(4)

_root.Benar21_var = 0; _root.Benar22_var = 0; _root.Benar23_var = 0; _root.Benar24_var = 0; _root.Benar25_var = 0; }

onClipEvent (enterFrame) {

this.gotoAndStop(_root.Image_var); if (this._alpha<100) {

this._alpha += 5; }

if (_root.Control_var == 2 and this._xscale<110) { this._xscale += 2;

this._yscale += 2; } _root.TotalBenar_var = _root.Benar01_var+_root.Benar02_var+_root.Benar03_var+_root.Benar04_var+_ root.Benar05_var+_root.Benar06_var+_root.Benar07_var+_root.Benar08_var+_r oot.Benar09_var+_root.Benar10_var+_root.Benar11_var+_root.Benar12_var+_ro ot.Benar13_var+_root.Benar14_var+_root.Benar15_var+_root.Benar16_var+_root


(5)

.Benar17_var+_root.Benar18_var+_root.Benar19_var+_root.Benar20_var+_root. Benar21_var+_root.Benar22_var+_root.Benar23_var+_root.Benar24_var+_root.B enar25_var+_root.Benar26_var+_root.Benar27_var+_root.Benar28_var+_root.Be nar29_var+_root.Benar30_var+_root.Benar31_var+_root.Benar32_var+_root.Ben ar33_var+_root.Benar34_var+_root.Benar35_var+_root.Benar36_var+_root.Bena r37_var+_root.Benar38_var+_root.Benar39_var+_root.Benar40_var+_root.Benar 41_var+_root.Benar42_var+_root.Benar43_var+_root.Benar44_var+_root.Benar4 5_var+_root.Benar46_var+_root.Benar47_var+_root.Benar48_var+_root.Benar49 _var+_root.Benar50_var;

}

2. Listing Program Waktu. onClipEvent (enterFrame) { if (_root.Control_var == 1) { _root.Sec_var -= 1;

if (_root.Sec_var<=0 and _root.Detik_var>0) { _root.Detik_var -= 1;

_root.Sec_var = 60; }


(6)

_root.Menit_var -= 1; _root.Detik_var = 60; }.

if (_root.Sec_var<=0 and _root.Detik_var<=0 and _root.Menit_var<=0) { _root.gotoAndStop("Result_lb");

} } }

3. Listing Program Menghitung Nilai. on (press) {

_root.Score_var = Math.round((_root.TotalBenar_var/_root.Area_var)*100); _root.gotoAndStop("Result_lb");