Perancangan dan Implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia

(1)

PERANCANGAN DAN IMPLEMENTASI APLIKASI

PEMBELAJARAN ALPHABET BERBASIS

MULTIMEDIA

TUGAS AKHIR

SUCI SUHAILA HARAHAP

112406219

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(2)

PERANCANGAN DAN IMPLEMENTASI APLIKASI PMBELAJARAN

ALPHABET BERBASIS MULTIMEDIA

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Ahli Madya Komputer

SUCI SUHAILA HARAHAP

112406219

PROGRAM STUDI DIPLOMA 3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(3)

PERSETUJUAN

Judul : Perancangan dan Implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia

Kategori : Tugas Akhir

Nama : Suci Suhaila Harahap

Nomor Induk Mahasiswa : 112406219

Program Studi : Diploma (D3) Teknik Informatika

Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam (FMIPA) Universitas Sumatera Utara

Disetujui di

Medan, Juni 2014

Disetujui oleh

Program Studi D3 Teknik Informatika Pembimbing, FMIPA Universitas Sumatera Utara

Ketua,

(4)

PERNYATAAN

PERANCANGAN DAN IMPLEMENTASI APLIKASI

PMBELAJARAN ALPHABET BRBASIS

MULTIMEDIA

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebut sumbernya.

Medan, Juni 2014

(5)

PENGHARGAAN

Puji dan syukur penulis mengucapkan khadirat Allah SWT, atas berkah dan rahmat-Nya yang telah memberikan kesehatan , kesempatan dan ilmu. Dengan limpah dankarunia-Nya penulis dapat menylesaikan penyusunan Tugas Akhir ini dengan judul Perancangan dan Implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia.

(6)

ABSTRAK

(7)

ABSTRACT

(8)

DAFTAR ISI

2.2.1. Metode Animasi Dalam Flash 10

2.2.2. Komponen Pada Flash 10

2.2.3. Istilah Umum Dalam Flash 11

2.2.4. Menggunakan Operator Aritmatika 13

2.2.5. Memasukkan Suara 14

2.3. Rekayasa Perangkat Lunak 15

2.4. Pemrograman Berorientasi Objek (PBO) 16

2,5. Unified Modeling Language (UML) 17

2.5.1. Unified Modeling Language (UML) 17

2.5.2. Diagram – Diagram Pada UML 18

2.6. Adobe Photoshop CS 26

2.7. Sistem Perancangan dan Implementasi 25

2.8. Pengertian Alphabet 25

(9)

3.1. Perancangan Aplikasi 28 3.1.1. Pendefenisian Fungsionalitas Aplikasi Animasi 29 3.1.2. Perancangan Class Diagram Alphabet 30 3.1.3. Perancangan Sequnce Diagram Alphabet 31 3.1.4. Perancangan Activity Diagram Animasi Alphabet 32

3.2. Rancangan Animasi 39

3.3. Rancangan Interface 41

3.3.1. Pemetaan Fungsi Aplikasi dan Storyaboard 41

3.3.2. Rancangan Storyboard 42

3.4. Mengemas Aplikasi Alphabet 50

BAB IV IMPLEMENTASI SISTEM 51

(10)

DAFTAR GAMBAR

HALAMAN

Gambar 2.1 Komponen pada Macromedia Flash 8 11

Gambar 2.2 Contoh Operator Aritmatika 14

Gambar 2.3 Properties Sound 15

Gambar 2.4 Metodologi Pemodelan Berorientasi Objek 18

Gambar 2.5 Use Case Diagram 21

Gambar 2.6 Activity Diagram 22

Gambar 2.7 Bentuk Realisasi Dari Class 23

Gambar 2.8 Sequence Diagram 24

Gambar 3.1 Diagram Use Case System 29

Gambar 3.2 Diagram Class Alphabet 30

Gambar 3.3 Diagram Sequence Alphabet 31

Gambar 3.4 Diagram Activity Intro Animasi Alphabet 32

Gambar 3.5 Diagram Activity Menu Alphabet 33

Gambar 3.6 Diagram Activity Screen Alphabet 34

Gambar 3.7 Diagram Activity Screen Song 35

Gambar 3.8 Diagram Activity Games alphabet 36

Gambar 3.9 Diagram Activity Top Score alphabet 37

Gambar 3.10 Diagram Activity about alphabet 38

Gambar 3.11 Rancangan Layar Intro animasi alphabet 42

Gambar 3.12 Layar Menu Alphabet 44

Gambar 3.13 Layar Study Alphbet 45

Gambar 3.14 Layar Huruf Alphbet 46

Gambar 3.15 Layar Song 46

Gambar 3.16 Layar games 47

Gambar 3.17 Layar your score 48

Gambar 3.18 Layar Top score 48

Gambar 3.19 Layar About 49

Gambar 4.1 Tampilan halaman awal 51

Gambar 4.2 Tampilan menu 51

Gambar 4.3 gambar menu study 52

Gambar 4.4 Tampilan contoh menu study 52

Gambar 4.5 Tampilan menu song 53

Gambar 4.6 Tampilan contoh menu song 53

Gambar 4.7 gambar menu games 54

(11)

Gambar 4.9 Gambar tampilan games 55

Gambar 4.10 Gambar tampilan score 55

(12)

DAFTAR TABEL

HALAMAN

2.1 Aritmatika dalam flash 13

2.2 Diagram-diagram pada UML 19

2.3 Notasi pada Use Case Diagram 20

2.4 Jenis Stereotype 20

2.5 Simbol Activity Diagram 21

(13)

ABSTRAK

(14)

ABSTRACT

(15)

BAB 1

PENDAHULUAN

1.1. Latar Belakang

Pada era seperti sekarang ini dimana kemajuan teknologi informasi diterapkan di segala bidang, kita dituntut untuk mengikuti kemajuan teknologi tersebut dengan menerapkan perangkat lunak agar kita dapat bekerja secara efektif dan efisien dalam mencapai tujuan-tujuannya.

Ilmu pengetahuan dan teknologi informasi yang ada sekarang ini dapat diterapkan sebagai sebuah solusi yang akan membantu pekerjaan manusia khususnya pembelajaran di sekolah melalui komputer. Pada umumnya dalam bidang pendidikan, penggunaan teknologi berbasis komputer merupakan cara untuk menghasilkan atau menyampaikan materi dengan menggunakan sumber-sumber yang berbasis multimedia.

(16)

Menyadari akan besarnya kebutuhan dalam proses pembelajaran, maka diperlukan sebuah program aplikasi yang interaktif sebagai salah satu alat pembelajaran yang diharapkan akan dapat dimanfaatkan dalam proses pendidikan, bahkan dapat meningkatkan efektivitas, efisiensi dan kualitas hasil pembelajaran.

Multimedia diambil dari kata multi dan media. Multi berarti banyak dan media berarti media atau perantara. Multimedia adalah gabungan dari beberapa unsur yaitu teks, grafik, suara, video dan animasi yang menghasilkan presentasi yang menakjubkan. Multimedia juga mempunyai komunikasi interaktif yang tinggi. Bagi pengguna komputer multimedia dapat diartikan sebagai informasi komputer yang dapat disajikan melalui audio atau video, teks, grafik dan animasi.

Disini dapat digambarkan bahwa multimedia adalah suatu kombinasi data atau media untuk menyampaikan suatu informasi sehingga informasi itu tersaji dengan lebih menarik.

(17)

teks, grafik, animasi, audio dan gambar video (Robin dan Linda, 2001). Multimedia adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, gambar bergerak (video dan animasi) dengan menggabungkan link yang memungkinkan pemakai melakukan navigasi, berinteraksi, berkreasi dan berkomunikasi. Dalam definisi ini terkandung empat komponen penting multimedia. Pertama, harus ada komputer yang mengkoordinasikan apa yang dilihat dan didengar. Kedua, harus ada link yang menghubungkan pemakai dengan informasi. Ketiga, harus ada alat navigasi yang membantu pemakai menjelajah jaringan informasi yang saling terhubung.

(18)

Oleh karena itu, melihat masalah yang terjadi tersebut penulis mengangkat permasalahan ini ke dalam satu topik pembahasan yang di beri judul Perancangan dan implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia.

1.2. Perumusan Masalah

Berdasarkan latar belakang permasalahan tersebut maka penulis dapat merumuskan masalah sebagai berikut :

1. Perkembangan zaman yang memicu masyarakat menggunakan media computer 2. Bagaimana cara mengimplementasikan materi pembelajaran bahasa inggris

dengan metode interaktif berbasis multimedia dengan menyisipkan karakter animasi dan suara yang membahas tentang alphabet.

3. Bagaimana cara menampilkan contoh-contoh dalam bentuk animasi ataupun video dari setiap materi, dan mengimplementasikan aplikasi ini menjadi sarana

pembelajaran yang tidak hanya mengandalkan buku.

1.3. Batasan Masalah

Penulis merasa perlu membatasi masalah yang ada, agar penyelesaiannya akan lebih terarah dan sesuai dengan yang diharapkan.

(19)

2. Aplikasi ini tidak menggunakan database.

3. Sound yang digunakan bertipe wav.

4. Image yang digunakan bertipe bitmap, .png, dan .jpg.

1.4. Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah :

1. Membuat suatu program aplikasi yang interaktif mengenai Alphabet. 2. Memperkenalka huruf alphabet yang dilegkapi denga cotoh animasi.

1.5. Manfaat Penelitian

Adapun manfaat dari penelitian ini adalah :

1. Sebagai sarana pendidikan interaktif dan menarik dalam memaparkan materi-materi pembelajaran alphabet pada tigkat taman kanak-kanak (TK).

2. Menumbuhkan minat belajar kepada para siswa dalam proses belajar mengajar. 3. Siswa dapat melihat contoh peggunaan alphabet dalam kehidupa sehari-hari.

1.6. Metode Penelitian

(20)

a) Studi Pustaka

Studi pustaka merupakan suatu kegiatan atau pengumpulan data–data atau informasi yang dibutuhkan untuk melengkapi kekurangan–kekurangan dalam pembuatan Tugas

Akhir dengan cara membaca buku, belajar dari internet dan mengambil file yang dibutuhkan untuk melengkapi kekurangan tersebut.

b) Alat dan Bahan Penelitian

Alat yang digunakan untuk merancang dan mengimplementasikan animasi alphabet

adalah:

1) Perangkat keras (hardware)

Perangkat keras yang digunakan sebagai sarana penunjang berupa seperangkat Laptop Acer Aspire One dengan spesifikasi :

a) Prosesor Intel (R)Atom (TM) CPU N270 @1.60 GHz b) Hardisk 140 Gb

c) Memory 10121 Gb d) Monitor 14 inc

2) Perangkat lunak (software)

(21)

a) Microsoft Windows XP Profesional SP 2 sebagai sistem operasi

b) Macromedia Flash 8 sebagai software untuk merancang objek animasi pada game c) Adobe Photoshop CS sebagai software untuk mengedit gambar

d) Microsoft Office sebagai software untuk mengolah data e) Web Browser (Mozilla Firefox)

c) Perancangan Aplikasi

Merancang aplikasi yang akan Membuat aplikasi pembelajaran Perancangan dan implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia.

d) Implementasi

Mengimplementasikan aplikasi pembelajaran alphabet berbasis multimedia.

e) Penyusunan Laporan

(22)

1.7. Sistematika Penulisan

(23)

BAB 1 PENDAHULUAN

Bab ini menguraikan tentang latar blakang, rumusan masalah, batasan masalah, tujuan masalah, manfaat penelitian, mtode pnelitian, dan sistematika penulisan.

BAB 2 LANDASAN TEORI

Bab ini menguraikan teori-teori yang membahas masalah secara terperinci yang berkaitan dengan permasalahan pada aplikasi yang dibuat.

BAB 3 PERANCANGAN SISTEM

Bab ini menguraikan analisis perancangan system dari aplikasi yang akan dibuat, diantaranya storyboard dan flowchart dari Perancangan dan implementasi Aplikasi Pembelajaran Alphabet Berbasis Multimedia.

BAB 4 IMPLEMENTASI SISTEM

(24)

BAB 5 KESIMPULAN DAN SARAN

(25)

BAB 2

LANDASAN TEORI

2.1. Animasi Dua Dimensi

Menurut Ibiz Fernandes dalam bukunya Macromedia Flash Animation & Catooning: A creative Guide, animasi didefenisikan sebagai beikut :

“ Animation is the process of recording and playing back a sequence of stills to

achieve the illusion of continues motion” (Ibiz Fernandez McGraw-Hiil/Osborn,

California, 2002).

Yang atinya animasi adalah sebuah proses merekam dan memainkan kembali seangkaian gambar statis untuk mendapatkan sebuah ilusi pergerakan. Berdasarkan arti harfiah, animasi adalah menghidupkan , yaitu usaha untuk menggerakkan sesuatu yang tidak bias bergerak sendiri. Secara garis besar, animasi computer di bagi menjadi dua katagori, yaitu:

(26)

b. Computer Generated Animation, pada katagori ini biasanya digunakan untuk animasi 3 dimensi dengan program 3D seperti 3D Studio Max, Maya, Autocard, dan lain sebagainya.

2.2. Macromedia Flash 8

Macromedia flash 8 merupakan salah satu progam yang digunakan untuk mendesain tampilan web seperti yang banyak yang digunakan saat ini. Saat membuka situs atau halaman internet tertentu, biasanya terdapat animasi objek gafis yang bergerak dari besar menjadi kecil, dari terang menjadi tampak lebih redup, dari bentuk satu satu menjadi bentuk yang lain, dan masih banyak lagi yang lain. Adapun animasi-animasi objekn grafis tersebut dapat dikerjakan dengan menggunakan Macromedia Flash 8. Flash 8 juga dapat mengenalkan bagaimana membuat movie clip, animasi frame, animasi tween motion, serta perintah action sript.

Flash 8 mempunyai banyak banyak fasilitas yang sangat berdaya guna, tetapi mudah digunakan seperti membuat interface/form menggunakan komponen dengan

(27)

2.2.1. Metode Animasi Dalam Flash

Pada dasarnya Macromedia Flash membagi animasi dalam dua metode, yaitu:

a. Frame by frame animation

Animasi frame merupakan pembuatan animasi dengan cara melakukan perubahan objek pada setiap frame secara manual, sehingga dihasilkan perubahan gambar yang teratur. Metode ini biasanya digunakan pada animasi dengan perubahan bentuk objek secara terus-menerus. Misalnya, film cartoon.

b. Tweened animation

Animasi tween merupakan pembuatan animasi dengan cara menentukan dua poin keadaan pada objek awal dan akhir, sedangkan Macromedia Flash membuat rangkaian gerakan diantaranya. Animasi yang dihasilkan menggunakan metode ini adalah gerakan yang halus, perubahan letak, ukuran, rotasi, bentuk maupun warna. (Setiawan, 2008)

2.2.2. Komponen Pada Flash

Area kerja flash ( mx, mx 2004, dan flash 8 ) pada dasarnya terdiri atas beberapa komponen yaitu, Menu, Timeline, Stage dan Panel.

(28)

b. Stage adalah area persegi empat yang merupakan tempat untuk membuat obyek animasi atau aplikasi yang akan di jalankan.

c. Toolbox berisi menu untuk membuat atau menggambarkan bentuk, Toolbox terbagi menjadi empat yaitu drawing tool, view, color, dan option.

d. Timeline adalah tempat untuk membuat dan mengontrol obyek dan animasi.

e. Panel berisi control fungsi yang di pakai dalam flash yaitu untuk mengganti dan memodifikasi berbagai property obyek animasi dengan cepat.

Gambar 2.1 Komponen pada Macromedia Flash 8

2.2.3. Istilah Umum Dalam Flash

a. Properties

Properties merupakan suatu cabang perintah yang lain. Seperti mengatur ukuran

(29)

b. Action Script

Action Script adalah suatu bahasa pemrograman yang ditambahkan dalam Flash secara intraktif, baik untuk kperluan aplikasi animasi SWF yang sderhana atau rumit, misalkan untuk aplikasi internet.

c. Movie Clip

Movie clip merupakan sebuah movie kecil yang berada didalam movie utama. Yang memiliki timeline sendiri, dan dapat ditampilkan dalam timeline movie utama dengan satu frame saja atau lebih.

d. Frame

Frame merupakan suatu bagian dari layer yang digunakan untuk mengatur pembuatan animasi.

e. Layer

(30)

f. Timeline

Timeline merupakan bagian dari program Macromedia Flash 8 yang digunakan untuk menampung layer.

g. Masking

Masking merupakan suatu perintah yang digunakan untuk menghilangkan sebuah isi dari suatu layer dan isi layer tersebut akan tampil saat movie di jalankan.

h. Keyframe

Keyfram merupakan suatu tanda yang digunakan untuk mmbatasi suatu gerakan animasi. (Wibiwanto, 2006)

2.2.4. Menggunakan Operator Aritmatika

Matematika memegang peranan penting dalam pemrograman. Flash menunjang operasi matematika dengan banyak Action script, meskipun demikian tidak semua

(31)

Tabel 2.1 Aritmatika dalam flash

N0 Operator Fungsi

1 + Penambahan

2 - Pengurangan

3 * Perkalian

4 / Pembagian

Operator ++ merupakan penggunaan operator untuk penambahan suatu variable dengan angka 1. Misalnya untuk membuat sebuah movieclip bola. Dengan posisi awal yang diletakkan disebelah kiri frame. Kmudian seleksi bola tersebut dan buka action script dengan mengtikkan program seperti yang diperlihstkan pada gambar 2.2.

Gambar 2.2 Contoh Operator Aritmatika

(32)

kekanan secara perlahan-lahan. Hal tersebut karena setiap seperduabelas detik ( bila setting default movie adalah 12 fps), koordinat x bola ditambah 1 pixel. (Wibiwanto, 2006)

2.2.5. Memasukkan Suara

Macromedia Flash 8 menyediakan fasilitas sound/suara. dengan tambahan mdia suara tersebut diharapkan dapat membuat suatu animasi atau game dengan kualitas yang lebih baik serta menarik. Cara memasukkan suara kdalam animasi didahului dengan meng-import file suara yaitu dengan memilih menu file – import – import library dan pilihlah suara yang sudah disiapkan pada penyimpanan.

Pada saat keyframe di klik maka pada bagian bawah stage terdapat parameter

keyframe seperti yang diperlihatkan pada gambar 2.3.

Gambar 2.3 Properties Sound

(33)

2.3. Rekayasa Perangkat Lunak

Perangkat Lunak (software) tidak sama dengan program computer. Perangkat lunak tidak hanya mncakup program, tetapi semua dokumentasi dan konfigurasi data yang dihubungkan, yang diperlukan untuk membuat agar program beroperasi dngan benar. System perangkat lunak terdiri dari :

a. Sejumlah program yang terpisah b. File-file konfiguras

c. Dokumentasi system d. Dokumentasi user

RPL atau software Enginering (SE) merupakan disiplin ilmu yang membahas semua aspek produksi perangkat lunak, mulai dari tahap awal spesifikasi system sampai pemeliharaan system setelah digunakan. Ada 2 istilah kunci di sini :

a. Disiplin rekayasa yaitu perekayasa membuat suatu alat bekerja. Menerapkan teori, metod, dan alat bantu yang sesuai, selain itu mereka menggunakannya dengan selektif dan selalu mencoba mencari solusi terhadap permasalahan.

(34)

kegiatan seperti manajemen proyek PL dan pengembangan alat bantu, metode, dan teori untuk mendukung produksi PL.

2.4. Pemrograman Berorientasi Objek (PBO)

Paradigma berorientasi objek memandang aplikasi dengan cara yang berbeda. Dengan pndekatan ini, kita membagi aplikasi menjadi banyak potongan-potonga kecil, atau obyek, yang cukup bebas antara satu dengan lainnya. Kita kemudian dapat membangun aplikasi dengan menggabungkan/ merekatkan semua obyek ini bersama.

Dalam konsep-konsep object oriented dikenal polimorfisme, inheritance

(pewarisan), dan Encapsulation (pembungkusan).

a. Polimorfisme, yaitu konsep yang menyatakan bahwa suatu fungsi yang sama dapat ditrapkan dan dapat dimiliki oleh kelas-kelas yang berlainan.

b. Inheritance, pewarisan ini pada dasar nya adalah berbagai atribut dan operasi antarkelas berdasarkan hierarki kelas. Pewarisan akan sangat mengurangin perulangan penulisan kod dan mungkin merupakan salah satu keunggulan utama rekayasa perangkat lunak, karena memungkinkan penulisan kode yang lbih sedikit tanpa mngorbankan esensi perangkat lunak secara keseluruhan.

(35)

menggunakan (mmanfaatkan fungsi-fungsi srta layanan) suatu komponen yang diciptakan dengan konsep pembungkusan tanpa mengetahui rincian implementasinya. (Munawar, 2005)

2.5. Unified Modeling Language (UML)

2.5.1. Defenisi Unified Modeling Language (UML)

UML (Unified Modling Langeage) adalah salah satu alat bantuyang sangat handal di dunia pengembangan system yang berorientasi objek. Hal ini disebabkan karena UML menyediakan bahasa permodelan visual yang memungkinkan bagi pengembang

system untuk membuat cetak biru atas visi mereka dalam bentuk yang baku, mudah dimngerti serta dilngkapi dengan mekanisme yang efektif untuk berbagai (sharing) dan berkomunikasikan rancangan mereka dengan yang lain.

UML merupakan kesatuan dari bahasa prmodelan yang dikembangkan oleh

booch, object Modeling Technique (OMT) dan object Oriented Softwareenginering

(OOSE). Metode Booch dari Grady Booch sangat terkenal dengan metode Design Object Oriented. Metode ini menjadikan proses analisis dan design kedalam empat tahapan interaktif, yaitu : identifikasi kelas-kelas dan objek-objek, identifikasi sematik dari hubungan obyek dan kelas tersebut, perincian interface dan implementasi.

(36)

metode lain yang lebih efektif dan elemen-elemen baru yang belum ada pada metode terdahulu sehingga UML lebih ekspresif dan seragan dari pada metode lainnya. Gambar 2.3. merupakan unsure-unsur yang mmbentuk UML. ( Munawar, 2005)

Gambar 2.4 Metodologi Pemodelan Berorientasi Objek

2.5.2. Diagram – Diagram Pada UML

(37)

Tabel 2.2 Diagram-diagram pada UML

Diagram Tujuan

Use Case Menunjukkan sekumpulan kasus fungsional dan aktor dan hubungannya. Memodelkan kosakata di sistem, distribusi dan tanggung jawab, tipe primitif, kolaborasi, skema database logik.

Activity Pandangan operasi, bagaimana objek-objek bekerja, aksi-aksi yang mempengaruhi objek, pandangan use case workflow

Sequence Berfungsi untuk overview prilaku sistem, menunjukkan objek-objek yang diperlukan, mendokumentasikan skenario dari suatu diagram Use Case.

a. Use case Diagram

(38)

use-case merupakan pusat pemodelan perilaku sistem, subsistem, kelas. Berikut adalah elemn dalam use case :

Tabel 2.3 Notasi pada Use Case Diagram

Penjelasan Notasi UML

Aktor : Mewakili peran orang, sistem yang lain atau

alat ketika berkomunikasi dengan use case.

Use Case : Abstraksi dari interaksi antara sistem

dan actor

Association : adalah abstraksi dari penghubung

antara actor dan use case

Generalisasi : menunjukkan spesialisasi actor untuk

dapat berpartisipasi dalam use case

Stereotype adalah sebuah modl khusus yang terbatas untuk kondisi tertentu. Stereotype digambarkan dengan bentuk << diawali dan ditutup >>. Adalah hal yang lumrah untuk menggunakan kembali use case yang sudah ada.

Berikut adalah jenis-jenis Stereotype :

(39)

Tabel 2.4 Jenis Stereotype

Penjelasan Tipe Stereotype

Menunjukkan bahwa suatu use case seluruhnya merupakan fungsionalitas dari use case lainnya..

Menunjukkan bahwa satu use case merupakan tambahan fungsional dari use case lainnya jika suatu kondisi terpenuhi.

Pelanggan dating melakukan pencarian buku untuk dibaca, dengan cara melihat dan membaca buku yang tersedia untuk dibaca sesuai dengan selera.

Gambar 2.5 Use Case Diagram

a. Activity Diagram

(40)

Tabel 2.5 Simbol Activity Diagram

Keterangan Simbol

Titik Awal atau permulaan.

Titik Akhir atau akhir dari aktivitas.

Aktiviti, atau aktivitas yang dilakukan oleh aktor.

Decision, atau pilihan untuk mengambil keputusan.

Arah tanda panah alur proses.

Activity diagram menunjukkan apa yang terjadi, tetapi tidak menunjukkan siapa yang melakukan apa. Dalam pemrograman hal tersebut tidak menunjukkan class mana yang bertanggung jawab atas setiap action. Pada pemodelan bisnis, hal tersebut tidak bias menunjukkan organisasi mana yang menjalankan sebuah action. Swimline

adalah sebuah cara untuk mengelompokkan activity berdasarkan actor ( mengelompokkan activity dari sebuah urutan yang sama ). Actor biasa ditulis nama

actor ataupun sekaligus dengan lambing actor ( stick figure) pada use case diagram.

(41)

Gambar 2.6 Activity Diagram

Di dalam activity diagram trsebut dijelaskan bahwa user melakukan proses login untuk dapat memasuki area system, jika proses login dan user belum teregistrasi, maka user akan di tolak oleh system tersebut dan diberi pesan error. Selain itu, bila user telah teregistrasi dan memasukkan kode login dengan benar maka akan diberi akses untuk masuk ke system, dan diberikan pesan sukses. User dapat logout ( keluar ) untuk mengakhiri sesi.

b. Class Diagram

(42)

menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu sama lainnya seperti containment, pewarisan, asosiasi, dan lain-lain.

Gambar 2.7 Bentuk Realisasi Dari Class

Atribut dan metode dapat memiliki sifat-sifat yang di bawa oleh Inheritance ( pewarisan ) dan Multiplicity. Multiplicity mendefenisikan relasi antara class dengan objek/golongan-golongan yang terkait. Multiplicity menggambarkan relasi class dengan class lain dalam satu ke satu ( one–to–one ), satu k satu atau lebih (

one-to-many), banyak ke satu ( many –to-one) dan banyak ke lebih banyak (many-to-many). Pada notasi UML, multiplicity dapat ditampilkan dengan tanda bintang (*), yang menunjukkan banyak, yang mnunjukkan ‘atau’ digunakan titik dua (..) seperti 1..*

satu atau lebih ), untukmenunjjukan ‘atau’ juga bias digunakan tanda koma (,).

(43)

Sequence Diagram adalah suatu diagram yang digunakan untuk memodelkan skenario penggunaan. Skenario penggunaan adalah barisan kejadian yang terjadi selama satu eksekusi sistem. Sequence diagram digunakaan untuk :

1)Overview perilaku sistem.

2)Menunjukkan objek-objek yang di perlukan. 3)Mendokumentasikan skenario dari suatu use-case. 4)Memeriksa jalur-jalur pengaksesan.

Gambar 2.8 Sequence Diagram

2.6. Adobe Photoshop CS

(44)

Photoshop bukanlah penyunting gambar biasa tapi merupakan program paling popular dan paling hebat yang ada dipasaran sekarang ini ( Abis, 2005). Photosop CS

merupakan program aplikasi pengolahan image atau gambit bitmap. Image atau bitmap yang sering disebut gambar rester merupakan gambar yang di bentuk dari grid-gride warna. Grid ini merupakan elmen dasar dari sbuah elemen image Atau gambar yang biasa di sebut pixel.(Budi permana.2007)

2.7. Sistem Perancangan dan Implementasi

Perancangan sistem informasi merupakan pengembangan sistem baru dari sistem lama yang sudah ada, dimana masalah-masalah yang terjadi pada sistem sebelumnya diharapkan akan dapat teratasi pada sistem yang baru. Artinya, konsep dan teknik untuk perancangan sistem informasi yang mengacu pada analisis dari siklus pengembangan yang didefinisikan dari kebutuhan-kebutuhan sistem lama yang dapat diimplementasikan pada suatu lingkungan organisasi.

2.8. Pengertian Alphabet

(45)

mengambil tanda gambar lembu (bagian kepala) dari huruf Hierogliph (hieroglyphyc) Mesir yang artinya tulisan para pemuka agama dengan mengesampingkan pengertian lembu itu sendiri dalam bahasa Mesir, sedangkan menurut bahasa semit, lembu itu disebut aleph. Demikian juga dengan gambar rumah yang disebut beth. Dengan menggunakan prinsip akroponi, tanda gambar kepala lembu oleh masyarakat semit dijadikan tanda untuk vokal a dan gambar rumah untuk vokal b.

Perkembangan cara untuk berkomunikasi melalui tanda dan gambar terus berkembang. Awalnya dengan menggunakan pictograph (simbol yang menggambarkan sebuah objek) hingga berkembang hingga ideograph (simbol yang menggambarkan gagasan yang lebih kompleks) dengan konsep abstrak yang lain dengan membuat lukisan di dinding gua. Bahasa tulisan menjadi salah satu indikator yang mampu membedakan zaman awal sejarah dan zaman prasejarah.

(46)

(47)

BAB 3

PERANCANGAN APLIKASI

3.1. Perancangan Aplikasi

Pada bab ini akan memberikan gambaran umum mengenai proses kerja aplikasi

Macromedia Flash 8 untuk merancang sebuah aplikasi animasi pembelajaran alphabet. Perancangan aplikasi ini di mulai dari start aplikasi yang menampilkan pembukaan animasi pembelajaran dan kemudian menampilkan menu utama aplikasi. Di dalam main aplikasi hanya terdapat menu-menu aplikasi yang berfungsi untuk memanggil animasi point alphabet, games, alphabet song. Keseluran objek dalam aplikasi akan di kendalikan dalam oleh action script yang ada dalam bahasa flash.

Proses sistem aplikasi game ini di jelaskan melalui bberapa diagram pada UML ( Unified Modeling Language) yang merupakan pemodelan alur (workflow) untuk memudahkan dalam perancangan aplikasi pembelajaran, dan rancangan

interface dari animasi.

3.1.1. Pendefenisian Fungsionalitas Aplikasi Animasi

(48)

3.1 Diagram Use Case System

(49)

3.1.2. Perancangan Class Diagram Alphabet

(50)

Diagram class alphabet merupakan gambaran secara umum operasi dan atribut dari setiap layer. Proses ini menunjukkan hubungan atau relasi yang terjadi antar class

mulai dari bagian paling awal aplikasi alphabet yaitu intro hingga bagian akhir dari

game.

3.1.3 Perancangan Sequnce Diagram Alphabet

(51)

Proses ini menunjukkan perilaku actor ketika menjalankan aplikasi. Pertama-tama actor membuka aplikasi maka system akan menampilkan layar intro yang kemudian akan menampilkan menu-menu pilihan yaitu menu study, song, games, dan

about. Pada menu study menyediakan menu alphabet dari A sampai Z dengan suara dan contoh nya, back, home dan next. Didalam menu song terdapat 3 menu alphabet song. Kemudian ke mnu gam, sedangkan untuk menu play maka actor akan ke menu di mana game akan di mainkan dengan durasi waktu 1 menit. Setelah gam di mainkan selama satu menit system akan melanjutkan ke layer your score dimana actor dapat melihat score hasil game yang di mainkan kemudian actor harus menginput nama sebagai data pemain. Pada layer ini terdapat 2 menu yaitu save dan replay. Jika actor

(52)

3.1.4 Perancangan Activity Diagram Animasi Alphabet

a. Proses View Menu

Gambar 3.4 Diagram Activity Intro Animasi Alphabet

(53)

b. Proses View Menu

Gambar 3.5 Diagram Activity Menu Alphabet

Pada diagram activity ini menjelaskan tentang proses ketika layar intro selesai ditampilkan yang selanjutnya system akan menampilkan layar menu. Pada layar menu

(54)

c. Proses View Study

Gambar 3.6 Diagram Activity Screen Alphabet

Layar study merupakan layar yang menjelaskan proses ketika animasi alphabet berlangsung. Layer study dapat diakses ketika actor memilih button alphabet , maka system kemudian akan menjalankan proses animasi pembelajaran alphabet. Animasi yang ditampilkan pada layar ini yaitu berfungsi sebagai background dasar yaitu kereta api yang disertai animasi suara, anak belajar, bunga yang di hinggapi kupu- kupu. Sedangkan animasi yang menjadi objek utama dari animasi alphabet ini yaitu animasi

(55)

d. Proses View Screen Song

Gambar 3.7 Diagram Activity Screen Song

Layar study merupakan layer yang menjelaskan proses ketika song berlangsong. Layer song dapat di akses ketika actor mmilih menu alphabet song, maka system kemudian akan menjalankan system. Animasi yang di tampilkan pada

(56)

e. Proses View Screen Games

Gambar 3.8 Diagram Activity Games alphabet

Layer game merupakan layer yang menjelaskan proses ketika game

berlangsung. Layergame dapat diakses ketika actor memilih menu play, maka system kemudian akan menjalankan proses permainan. Animasi yang ditampilkan pada layer

(57)

f. Proses View Screen Top Scors

Gambar 3.9 Diagram Activity Top Score alphabet

Diagram ini merupakan proses yang akan di jalankan system ketika actor

(player/pemain) telah selesai menginputkan nama dan memilih button save. Pada

layer ini system akan menampilkan 5 tertinggi dari pemain yang telah memainkan

(58)

g. Proses View Screen About

Gambar 3.10 Diagram Activity about alphabet

Proses viewabout merupakan layer yang akan di tampilkan oleh system ketika

(59)

beberapa tampilan. Pada layer ini juga menampilkan menu berupa button back untuk kembali ke menu utama.

3.2 Rancangan Animasi

Perancangan animassi merupakan salah satu bagian dalam membuat suatu animasi yang berkualitas lebih baik. Animasi di butuhkan untuk mendukung tampilan suatu aplikasi alphabet misalnya menyerupai dunia nyata dan menarik. Kualitas suatu animasi dalam flash di pengaruhi oleh beberapa hal yaitu jumlah frame yang digunakan, jumlah layer dalam satu animasi, dan action script.

Berikut ini merupakan animasi yang di butuh kan dalam aplikasi alphabet : a. Animasi kereta api

Untuk membuat animasi kereta api membutuhkan 29 movie clipt abjad dan 29 gerbong kereta api dan 1 kepala kreta api yang di setiap gerbongnya memiliki 2 roda putar, selanjutnya di kemas menjadi 1 animasi mation twin, dengan 270 frame twin motion dengan suara kereta api. Selanjutnya pada scane 1 disisip action script agar animasi dapat intraktif pada user.

(60)

this.play(); }

b. Animasi awan

Membuat animasi awan pada aplikasi alphabet merupakan tampilan pendukung agar

background alphabet terlihat lebih menarik. Agar animasi awan terlihat lebih menarik lebih nyata maka di perlukan action script untuk maembuat awan dapat bergerak dilayar projek dan kembali lagi keposisi semula ketika awan meninggalkan layar projek. Langkah- langkah untuk membuat animasi awan yaitu :

1. Pertama-tama gambarkan animasi awan seperti yang terlihat pada gambar 2. Setelah gambar terbentuk, select gambar tersebut kemudian klik kanan dan

pilih convert to symbol atau dengan menekan f8 pada keyboard untuk mengaktifkan jendela convert.

3. Kemudian isikan nama objek “awan” dan pilih type movie clipt dan titik registration ditengah. Kemudian pilih ok.

4. Setelah itu klik kanan kembali animasi awan dan pilih action. Pada layar

action isikan script berikut ini. onClipEvent (load) { ya = _x;

}

(61)

_x -= 2;

if (_x<-20) { _x = ya;

}}

Script diatas menjelaskan bahwa animasi awan akan bergerak dari kiri ke kanan dengan kecepatan 2, tanda “_” merupakan perintah untuk menggerakkan objek

kekanan dengan batas pada frame 20.

3.3 Rancangan Interface

Rancangan interface merupakan rancangan antara muka yang menunjukkan hubungan langsung antara system dengan penggunaan system atau actor dari alphabet. Sehingga aplikasi tersebut dapat di jalankan sesuai dengan perintah dari actor.

3.3.1 Pemetaan Fungsi Aplikasi dan Storyaboard

Berikut ini merupakan rincian dari masing- masing fungsi/ menu dengan layer (

(62)

Tabel 3.1 Fungsi pada layer alphabet

No Fungsi/menu

aplikasi

Proses Deskripsi

1. About View about Button yang berfungsi menampilkan layer

(63)

3.3.2 Rancangan Storyboard

Berikut ini merupakan rincian dari masing-masing layer (storyboard) pada aplikasi animasi alphabet.

a. Layar Intro

Gambaran 3.11 Rancangan Layar Intro animasi alphabet

Layar intro akan di tampilkan ketika alphabet baru di buka, disini akan menampilkan suara pembukaan yang berformat wave, sebagai efek animasi, serta animasi text“ aplikasi animasi alphabet”.

(64)

b. Layar Menu

Gambar rancangan 3.12 Layar Menu Alphabet

(65)

c. Layar Study

Gambar rancangan 3.13 Layar Study Alphbet

(66)

d. Layar huruf Alphabet

Gambar rancangan 3.14 Layar Huruf Alphbet

Layar huruf alphabet merupakan layar di mana system akan jalan apabila kursor akan di arah kan ke Aa dan akan mengeluar kan suara dan jika kursor di arahkan ke bagian button apel dia kan mengeluarkan suara apple.

e. Layar Song

(67)

Layar song merupakan layar yang dapat diakses oleh actor dngan memilih button song. Pada layar ini berisi tentang animasi alphabet song.

e. Layar Games

Gambar rancangan 3.16 Layar games

(68)

g. Layar Your Score

Gambar rancangan 3.17 Layar your score

Layar game over merupakan layar yang akan di tampilkan ketika pemain telah mnyelsaikan prmainan selama 1 menit.

f. Layar top score

(69)

Layar ini akan ditampilkan ketika pemain telah menyimpan data dengan memilih

button save pada layar game over, selanjutnya pada layer ini akan menampilkan daftar nama lima pemain teratas. Button back pada layar ini berfungsi untuk memanggil kembali layer game over dan button home kembali kemenu awal.

i. Layer about

Gambar rancangan 3.19 Layar About

(70)

3.4 Mengemas Aplikasi Alphabet

setelah merancang keseluruhan tampilan aplikasi alphabet dikemas menjadi aplikasi

(71)

BAB 4

IMPLEMENTASI SISTEM

4.1. Hasil

Ketika pertama kali dibuka, aplikasi ini akan menampilkan halaman background atau awal.

Gambar 4.1 Tampilan halaman awal

(72)

Gambar 4.2 Tampilan menu

4.1.1 Menu Study

Pada halaman ini terdapat button gambar alphabet dari a sampai z dan memiliki 3 button yaitu back,home dan next.

(73)

Lalu actor akan memilih button alphabet a sampai z, yang akan menampilkan halaman tersebut, yang apabila kursor di arahkan oleh actor kearah A akan menghasilkan suara A dan bila diarahkan kepada apple akan menghasilkan suara apple.

Gambar 4.4 Tampilan contoh menu study

4.1.2 Menu Song

(74)

Gambar 4.5 Tampilan menu song

Lalu actor akan memilih menu song, yang didalam nya ada 3 pilihan lagu yang di sediakan. Actor tinggal memilih lagu. Dan memiliki 3 button yaitu next, home, dan back.

(75)

4.1.3 Menu Games

Pada halaman ini terdapat pilihan easy, medium, dan hard dan top score, dan actor akan memilih salah satu dari menu tersebut.

Gambar 4.7 gambar menu games

Setelah memilih salah satu menu games, system akan menampilkan halaman loading

(76)

Setelah menunggu halaman loading maka akan terbuka halaman gams, yang memiliki 1 button yaitu home.

4.9 Gambar tampilan games

Dan setelah actor memainkan games, apabila actor tidak bisa menyelesaikan games dengan waktu yang disediakan actor akan kalah, dan memiliki 2 button yaitu save dan replay.

(77)

4.1.4 Menu About

Pada menu ini hanya memiliki button teks yang memperjelaskan keterangan tentang penulis.

(78)

BAB 5

PENUTUP

5.1. Kesimpulan

Dari hasil pngamatan penulis maka dapat di simpulkan bahwa :

1. Aplikasi ini dapat bermain dan bernyanyi sambil belajar mengenal alphabet. 2. Aplikasi yang dibuat menarik, karena aplikasi ini di lengkapi dengan song, dan

games sehingga para pengguna khususnya anak-anak akan lebih tertarik dan tidak jenuh.

3. Pada aplikasi ini juga menampilkan cara memperhalus tampilan animasi dengan penggunaan perbandingan jumlah frame, yaitu semakin banyak jumlah fram yang digunakan maka akan semakin baik tampilan animasi yang diciptakan.

5.2. SARAN

Saran yang dapat penulis berikan berhubungan dengan aplikasi yang di buat adalah : 1. Dalam pembuatan animasi sebaiknya di buat lebih intraktif lagi yaitu dengan menambahkan lebih banyak gambar-gambar yang bergerak, agar para siswa lebih tertarik melihatnya.

2. Menambah level pada permainan ini.

(79)

DAFTAR PUSTAKA

Wibianto, W. 2005. Membuat Game dengan Macromedia flash. Yogyakarta. Andi

Hakim, Lukmanul. 2004. Cara Ampuh Menguasai Macromedia Flash MX 2004.

Jakarta:PT Elex Media Komputindo

Munawar.2005.Pemodelan visual dengan UML. Jakarta: Grahailmu.

Salahuddin. 2009. Pembuatan Edu-Game Penumpasan Tentara Gajah dengan Macromedia Flash 8. Tugas Akhir Pasca Ahlimadya. Lhokseumawe.

(80)

LISTING PROGRAM

1. HALAMAN MATAHARI PADA BACKGROUND

onClipEvent(enterFrame) {

_rotation += 1; // berputar searah jarum jam }

4. ANIMASI KERETA API

(81)

(82)

(83)

(84)

{

set("kontrol" + i, true); }

//membuat variable xawal dengan nilai koordinat x movie clip lingkaran //pertama kali

xawal = satu._x;

//membuat variable yawal dengan nilai koordinat y movie clip lingkaran //pertama kali

yawal = satu._y;

(85)

//movie clip ini dapat didrag this.startDrag();

//movie clip ini berada di posisi paling atas this.swapDepths(1);

};

//ketika tekanan pada movie clip lingkaran dilepaskan satu.onRelease = function() {

//movie clip ini tidak dapat didrag this.stopDrag();

//jika posisi movie clip lingkaran berada di sekitar movie clip lingkaran_target if (eval(this._droptarget) == satu_target) {

//posisi x movie clip ini sama dengan posisi x movie clip lingkaran_target this._x = _root.satu_target._x;

//posisi y movie clip ini sama dengan posisi y movie clip lingkaran_target this._y = _root.satu_target._y;

//posisi x movie clip ini sama dengan nilai variable xawal this._x = xawal;

(86)

} };

//ketika tekanan pada movie clip dilepaskan dan kursor mouse tidak berada //di movie clip lingkaran

xawal = dua._x;

yawal = dua._y;

//ketika movie clip lingkaran ditekan dua.onPress = function() {

};

//ketika tekanan pada movie clip lingkaran dilepaskan dua.onRelease = function() {

//jika posisi movie clip lingkaran berada di sekitar movie clip lingkaran_target if (eval(this._droptarget) == dua_target) {

//posisi x movie clip ini sama dengan posisi x movie clip lingkaran_target

this._x = _root.dua_target._x;

//posisi y movie clip ini sama dengan posisi y movie clip lingkaran_target this._y = _root.dua_target._y;

(87)

this._y = yawal; }

};

dua.onReleaseOutside = function() { //movie clip ini tidak dapat didrag this.stopDrag();

//posisi y movie clip ini sama dengan nilai variable yawal this._y = yawal;

};

xawal = tiga._x;

yawal = tiga._y;

//ketika movie clip lingkaran ditekan tiga.onPress = function() {

};

//ketika tekanan pada movie clip lingkaran dilepaskan tiga.onRelease = function() {

//jika posisi movie clip lingkaran berada di sekitar movie clip lingkaran_target if (eval(this._droptarget) == tiga_target) {

this._x = _root.tiga_target._x;

//posisi y movie clip ini sama dengan posisi y movie clip lingkaran_target this._y = _root.tiga_target._y;

(88)

if (kontrol3) {

} };

tiga.onReleaseOutside = function() { //movie clip ini tidak dapat didrag this.stopDrag();

};

xawal = empat._x;

yawal = empat._y;

//ketika movie clip lingkaran ditekan empat.onPress = function() {

};

(89)

empat.onRelease = function() {

//jika posisi movie clip lingkaran berada di sekitar movie clip lingkaran_target if (eval(this._droptarget) == empat_target) {

this._x = _root.empat_target._x;

//posisi y movie clip ini sama dengan posisi y movie clip lingkaran_target this._y = _root.empat_target._y;

} };

empat.onReleaseOutside = function() { //movie clip ini tidak dapat didrag this.stopDrag();

};

(90)

yawal = lima._y;

lima.onPress = function() { this.startDrag(); this.swapDepths(1); };

lima.onRelease = function() { this.stopDrag();

if (eval(this._droptarget) == lima_target) { this._x = _root.lima_target._x;

(91)

enam.onPress = function() { this.startDrag(); this.swapDepths(1); };

enam.onRelease = function() { this.stopDrag();

if (eval(this._droptarget) == enam_target) { this._x = _root.enam_target._x;

enam.onReleaseOutside = function() { this.stopDrag();

(92)

this.startDrag(); this.swapDepths(1); };

tujuh.onRelease = function() { this.stopDrag();

if (eval(this._droptarget) == tujuh_target) { this._x = _root.tujuh_target._x;

tujuh.onReleaseOutside = function() { this.stopDrag();

(93)

this.swapDepths(1); };

delapan.onRelease = function() { this.stopDrag();

if (eval(this._droptarget) == delapan_target) { this._x = _root.delapan_target._x;

(94)