Perancangan Aplikasi Pengenalan Dasar Bahasa Jepang Dengan Menggunakan Macromedia Flash 8.0.

(1)

i

Universitas Kristen Maranatha

ABSTRAK

Bahasa Jepang merupakan salah satu bahasa yang banyak dipelajari pada saat ini. Banyak orang menganggap sulit untuk belajar bahasa Jepang. Jika bahasa Jepang itu dipelajari dengan cara yang berbeda, akan membuat orang tertarik untuk mempelajarinya. Belajar bahasa Jepang dengan menggunakan aplikasi flash, dapat memudahkan orang dalam belajar bahasa Jepang.

Perancangan aplikasi belajar bahasa Jepang menggunakan macromedia flash 8.0 bertujuan untuk membuat suatu pembelajaran bahasa Jepang menggunakan macromedia flash.

(2)

ii Universitas Kristen Maranatha

ABSTRACT

Japanese language is one of popular language that be learned nowadays. Many people think that is difficult to learn Japanese language. But, if we learn it in different ways it will be attract people to learn Japanese language. Application that animation made used macromedia flash can make people easier to learn Japanese language.

(3)

iii Universitas Kristen Maranatha

DAFTAR ISI

Halaman

ABSTRAK ...i

ABSTRACT...ii

DAFTAR ISI...iii

DAFTAR GAMBAR...vii

DAFTAR TABEL...xi

BAB I PENDAHULUAN ...1

1.1 Latar Belakang Masalah ...1

1.2 Identifikasi Masalah ………..2

1.3 Tujuan ………2

1.4 Batasan Masalah ………...…2

1.5 Sistematika Penulisan ………2

BAB II LANDASAN TEORI ……….5

(4)

iv Universitas Kristen Maranatha

2.2 Animasi………6

2.2.1 Animasi Tradisional………..6

2.2.2 Animasi Komputer………7

2.3 Perangkat Lunak………...8

2.4 Perangkat Keras………8

2.5 Macromedia Flash 8.0………..8

2.5.1 Pengaktifan Macromedia Flash 8.0………...9

2.5.2 Pengenalan Lingkungan Macromedia Flash 8.0………...9

2.5.3 Menu Bar………..11

2.5.4 Stage………..12

2.5.5 Tool Box………12

2.5.6 Timeline……….14

2.5.7 Symbol Dan Instance……….14

2.5.8 Library………..15

2.6 Adobe Photoshop CS3………16

(5)

v Universitas Kristen Maranatha

BAB III ANALISA DAN PEMBAHASAN...18

3.1 Perancangan...18

3.2 Pembuatan Unsur Flash...24

3.2.1 Teks...24

3.2.2 Suara...25

3.2.3 Gambar atau Foto...25

3.2.4 Tombol...25

3.2.5 Unsur Animasi...26

3.3 Action Script...26

3.4 Peta Situs...28

3.5 Proses Perancangan...28

3.5.1 Tampilan Aplikasi...29

3.5.2 Komponen Parameter Kuis ...34

3.5.3 Perancangan Kuis...35

3.5.3.1 Lembar Kerja Kuis...35

(6)

vi Universitas Kristen Maranatha

3.5.3.3 Perancangan Pertanyaan Dan Input Jawaban ...37

3.6 Diagram Alir Kuis... 52

3.7 Publikasi Hasil Perancangan...55

BAB IV DATA PENGAMATAN...56

4.1 Tampilan Aplikasi...56

4.2 Hasil Survey...63

BAB V KESIMPULAN DAN SARAN...68

5.1 Kesimpulan...68

5.2 Saran ...69

DAFTAR PUSTAKA...70

LAMPIRAN A LISTING PROGRAM...A-1

LAMPIRAN B HASIL SURVEY...B-1

LAMPIRAN C NAMA KARAKTER TOKOH KARTUN...C-1

(7)

vii Universitas Kristen Maranatha DAFTAR GAMBAR

Halaman

Gambar 2.1 Memulai Macromedia Flash 8.0...9

Gambar 2.2 Tampilan Awal...10

Gambar 2.3 Tampilan pada bagian flash document...11

Gambar 2.4 Menu Bar ...12

Gambar 2.5 Stage ... 12

Gambar 2.6 Toolbox ...13

Gambar 2.7 Timeline...14

Gambar 2.8 Symbol...15

Gambar 2.9 Library...15

Gambar 2.10 Adobe Photoshop CS3...16

Gambar 2.11 WaveLab...17

(8)

viii Universitas Kristen Maranatha

Gambar 3.2 Sketsa Tampilan Pada Pelajaran Hiragana...19

Gambar 3.3 Sketsa Tampilan Katakana ... 20

Gambar 3.4 Sketsa Tampilan Angka………....21

Gambar 3.5 Sketsa Tampilan Kosakata………....22

Gambar 3.6 Sketsa Tampilan percakapan……….…23

Gambar 3.7 Sketsa Tampilan Kuis………24

Gambar 3.8 Peta Situs Aplikasi Animasi Flash Pengenalan Bahasa Jepang...28

Gambar 3.9 Proses Properties...29

Gambar 3.10 Proses Import Gambar...30

Gambar 3.11 Memasukkan Background kedalam lembar kerja ...30

Gambar 3.12 Pengaturan Posisi Background ……….………..31

Gambar 3.13 Proses Pembuatan Animasi ……… ……….31

Gambar 3.14 Proses Pembuatan Tombol ……… ………..……32

Gambar 3.15 Suara Yang Telah Di-import Kedalam Library ………...…33

(9)

ix Universitas Kristen Maranatha

Gambar 3.17 Komponen Parameter Untuk Kuis ……….. ………35

Gambar 3.18 Background Kuis Pada Library……… ………...36

Gambar 3.19 Penguncian Layer Background……… ..……….37

Gambar 3.20 Tampilan Component Learning Interaction……….38

Gambar 3.21 Label Pertanyaan……… ..………...38

Gambar 3.22 Penamaan Label ………...…….. 39

Gambar 3.23 Perancangan Text Input………39

Gambar 3.24 Perancangan Tombol ………… ………..40

Gambar 3.25 Penyusunan layer Dan frame Pertanyaan ……… ..….40

Gambar 3.26 Tampilan Dari Rancangan Pertanyaan………… ...………..41

Gambar 3.27 Parameter Pada Component Learning Interaction……… ..……….42

Gambar 3.28 Component Inspector ……… ..………42

Gambar 3.29 Input Action script ……… ..………43

Gambar 3.30 Diagram Alir Dari Kuis 1 ………52

Gambar 3.31 Diagram Alir Kuis 2 ………...54

(10)

x Universitas Kristen Maranatha

Gambar 4.1 Tampilan Utama ...57

Gambar 4.2 Tampilan Pada Tombol Kanan Atas... .58

Gambar 4.3 Tampilan Huruf Hiragana……….………....59

Gambar 4.4 Tampilan Huruf Katakana ...60

Gambar 4.5 Tampilan Angka ... 61

Gambar 4.6 Tampilan Kosakata ………...62

Gambar 4.7 Tampilan Percakapan ……….63

(11)

xi Universitas Kristen Maranatha DAFTAR TABEL

Halaman

(12)

(13)

A – 1

LISTING PROGRAM MACROMEDIA FLASH 8.0

//1: Inisialisasi Text yang masuk

function onFBInitText(){var router = _parent.SessionArray[_parent.session];

function onFBButton(){var router = _parent.SessionArray[_parent.session];

if(!router.buttonFlag || router.buttonFlag == false){evalFB();

var result = (router.result=="C")?2:3;

router.setFeedback(result);}if(router.result == "C"){ if(!router.scoreFlag || router.scoreFlag == false){

router.sessionStop();

router.scoreFlag = true;

router.assets_path[router.Assets.UserEntry].

enabled = false;}

router.setNavigation();

}else if (router.result == "W"){ if(router.numOfTries > 1){

if (!router.resetFlag || router.resetFlag == false){

router.buttonFlag = true;

router.resetFlag = true;

router.assets_path[router.Assets.UserEntry].enabled = false;

(14)

A - 2 Universitas Kristen Maranatha onFBInitText();

router.setFeedback(0);

router.buttonFlag = false;

router.resetFlag = false;

router.setComponentLabel(router.Assets.Contr olButton, router.label_state);}}

else{if(!router.scoreFlag || router.scoreFlag == false){ router.sessionStop();

router.scoreFlag = true;

router.assets_path[router.Assets.UserEntry].

enabled = false;} router.setNavigation();}}}

// 3: Evaluasi input dan hasil

function evalFB(){var router = _parent.SessionArray[_parent.session];

var rNameRef = new Array();

var rValueRef = new Array();

var rCorrectRef = new Array();

var response_results = new Array();

var i=0,j=0,count=0;

// Collect user data from parameter Objects and build Arrays for evaluation

for(var x in router.response){rNameRef[i] = x;

rValueRef[i] = router.response[x];i++;}

for (var y in router.response_value){rCorrectRef[j] = router.response_value[y];j++;}

// Membuat array untuk evaluasi

rNameRef = rNameRef.reverse();

rValueRef = rValueRef.reverse();

(15)

A - 3 Universitas Kristen Maranatha // Cek kesalahan

function checkFormat(string){var newFormat =

string.toString().split(";").toString();return newFormat;}

function removeChar (string){var stringFormat = string.toString();

var len = stringFormat.length; var i=0; while (i < len) {

if(stringFormat.substr(len-1,1) == "," || stringFormat.substr(len-1,1) == ";"){

stringFormat = stringFormat.slice(0,len-1) len = stringFormat.length; continue;}else{

break;}}return stringFormat;}

// pengecekan input yang dimasukkan user

router.correct_response = "{"+checkFormat(removeChar(rValueRef))+"}";

router.student_response =

"{"+checkFormat(router.assets_path[router.Assets.UserEntry].text)+"}";

// Cek respon dari 3 pilihan

for(var n=0; n < rValueRef.length; n++){

if(router.case_sensitive == false){

if (typeof router.response[rNameRef[n]] == "number"){

var response_temp = router.response[rNameRef[n]];

} else {var response_temp =

router.response[rNameRef[n]].toLowerCase();}

if(response_temp ==

router.assets_path[router.Assets.UserEntry].text.toLowerCase()) {if (rCorrectRef[n] == true) {response_results[n] = true;}

else if (rCorrectRef[n] == false) {response_results[n] = false;}}

else {response_results[n] = "No Match";}} else {

if(router.response[rNameRef[n]] ==

(16)

A - 4 Universitas Kristen Maranatha false) {response_results[n] = false;}}else{response_results[n] = "No Match";}}}

// cek kesamaan jawaban

if (router.exact_match == false) {

var getText = router.assets_path[router.Assets.UserEntry].text.split(" ");

var textLen = getText.length;

for (var t=0; t< textLen; t++){

if(getText[t].toLowerCase() == rValueRef[0].toLowerCase() && rValueRef[0] <> ""){response_results[0] = true;

break;}

else if(getText[t].toLowerCase() == rValueRef[1].toLowerCase() && rValueRef[1] <> ""){

response_results[1] = true; break;}

else if(getText[t].toLowerCase() == rValueRef[2].toLowerCase() && rValueRef[2] <> ""){response_results[2] = true;

break;}}}

// Respon jika jawaban berbeda

if (response_results[0] == "No Match" && response_results[1] == "No Match" && response_results[2] == "No Match") {

if (router.response_value.other_responses == true) {router.result = "C";}

else if (router.response_value.other_responses == false) {router.result = "W";}}

else if (response_results[0] == true || response_results[1] == true ||response_results[2] == true) {router.result = "C";}

else if (response_results[0] == false || response_results[1] == false || response_results[2] == false) {router.result = "W";}}

// Inisialisasi objek dan parameter

(17)

A - 5 Universitas Kristen Maranatha Response.Response1 = Response1;

Response.Response2 = Response2;

Response.Response3 = Response3;

Response_Value = new Object();

Response_Value.response_value1 = toBoolean(Response_Value1);

Response_Value.other_responses = toBoolean(Other_Responses);

Feedback_List = new Array();

Feedback_List[0] = Initial_Feedback;

Feedback_List[1] = Correct_Feedback;

Feedback_List[2] = Incorrect_Feedback;

Feedback_List[3] = Evaluate_Feedback;

Feedback_List[4] = Tries_Feedback;

Assets = new Object();

Assets.QuestionField = Assets1;

Assets.FeedbackField = Assets2;

Assets.UserEntry = Assets3;

Assets.ControlButton = Assets4;

ButtonLabels = new Array();

ButtonLabels[0] = undefined;

ButtonLabels[1] = ButtonLabels1;

(18)

A - 6 Universitas Kristen Maranatha function toBoolean( str ){if(typeof(str) == "boolean"){return

str;}else if(str.toLowerCase() == "true"){return true;}else{return false;}}

if(toBoolean( Feedback ) == false || typeof(Number(Num_Of_Tries)) != "number"){

Num_Of_Tries = 1;}

// Inisialisasi index

*/if(!_parent.SessionArray){_parent.session = 0;

_parent.SessionArray = new Array();

} else {_parent.session++;}

_parent.SessionArray[_parent.session] = new LToolBox();

var router = _parent.SessionArray[_parent.session];

// Initialize objecktive ID

router.assets_path = eval(this._parent);

router.Assets = Assets;

router.interaction_id = Interaction_ID;

router.interaction_type = "F";

router.question = Question;

router.response = Response;

router.response_value = Response_Value;

router.case_sensitive = toBoolean(Case_Sensitive);

router.exact_match = toBoolean(Exact_Match);

router.tracking = toBoolean(Tracking);

router.weighting = Number(Weighting);

router.objective_id = Objective_ID;

router.navigation = Number(Navigation);

router.navLabel = Go_To_Label;

(19)

A - 7 Universitas Kristen Maranatha router.feedback = toBoolean(Feedback);

router.numOfTries = Number(Num_Of_Tries);

router.feedback_list = Feedback_List;

router.buttonLabels = ButtonLabels;

router.buttonFlag = false;

router.resetFlag = false;

router.scoreFlag = false;

router.assets_path[router.Assets.UserEntry].changeHandler = function(){

if (router.scoreFlag == false){

router.setComponentState(router.Assets.Contr olButton, true);

router.setFeedback(1);}}

// inisialisasi feedback

router.setTextField(Assets.QuestionField, Question);

if(toBoolean( Feedback ) == false){

router.setTextField(Assets.FeedbackField, "");}

router.initControlButton(onFBButton);

router.setFeedback(0);

router.sessionStart();

onFBInitText();

Pada kuis terdapat juga action scrip untuk mengacak dari setiap pertanyaan yang ditampilkan. Hal ini dilakukan untuk membuat tantangan bagi pengguna aplikasi ini. Action script yang digunakan adalah :

this._visible = false;

(20)

A - 8 Universitas Kristen Maranatha // inisialisasi kuis

_parent.QuizTrack = new Quiz();

// Inisialisasi object

_parent.QuizTrack.randomize = Randomize;

_parent.QuizTrack.quest_to_ask = QuestionsToAsk;

_parent.QuizTrack.activity_ID = Activity_ID;

_parent.QuizTrack.activity_name = Activity_Name;

_parent.QuizTrack.results_page = Results;

_parent.QuizTrack.start_time = Math.round(getTimer()/1000);;

_parent.QuizTrack.level = _parent;

_parent.QuizTrack.setQuestArray();

_parent.QuizTrack.initStartQuiz(); startFlag = true;

stop();}

} else{

(21)

(22)

B – 1

(23)

(24)

(25)

(26)

(27)

(28)

(29)

(30)

(31)

(32)

(33)

C – 1

NAMA KARAKTER TOKOH KARTUN

Wikipe-tan (ウィキペたん Wikipe

pergeseran pelafalan (hypochorisma) dari salah sat

merupakan hasil dari

Wikipe-tan adalah tokoh maskot unt

(34)

C - 2 Universitas Kristen Maranatha Nama tokoh dari karakter kartun diatas adalah Corgiwings

(35)

C - 3 Universitas Kristen Maranatha Haruhi Suzumiya (涼宮ハルヒ Suzumiya Haruh

(36)

(37)

D – 1

(38)

(39)

(40)

(41)

(42)

1

BAB I

PENDAHULUAN

1.1Latar Belakang Masalah

Saat ini bahasa Jepang merupakan salah satu bahasa yang banyak dipelajari.

Banyak orang menganggap sulit untuk belajar bahasa Jepang. Padahal, jika bahasa

Jepang itu dipelajari dengan cara yang berbeda, akan membuat orang tertarik untuk

mempelajarinya.

Dengan perkembangan komputer saat ini membawa dampak yang sangat besar

pengaruhnya pada proses belajar. Setiap orang yang menggunakan komputer pada

saat ini kebanyakan memasukkan unsur multimedia pada komputernya.

Dengan menggunakan animasi flash, belajar bahasa Jepang yang akan disajikan

lebih menarik. Masyarakat akan lebih menyukai informasi yang menghibur daripada

hanya sekedar tulisan atau gambar. Melalui animasi flash, akan didapatkan nilai

tambah pada suatu paket informasi misalnya dengan animasi-animasi yang

(43)

2 Universitas Kristen Maranatha

menarik, ditambah lagi adanya gambar dengan warna-warna yang indah sehingga

membuat tidak terasa bosan untuk melihatnya.

1.2Identifikasi Masalah

Bagaimana membuat suatu aplikasi belajar bahasa Jepang dengan menggunakan

Macromedia Flash 8.0 ?

1.3Tujuan

Tujuan dari pembuatan aplikasi ini adalah untuk membuat aplikasi pengenalan

dasar bahasa Jepang dengan menggunakan macromedia flash 8.0 .

1.4Batasan Masalah

Dalam membuat aplikasi ini, dibuat suatu batasan masalah, yaitu :

1. Aplikasi ini menggunakan beberapa software yaitu :

a. Macromedia Flash 8.0

b. Adobe Photoshop CS 3

c. Wavelab

d. Ms, Paint

2. Huruf kanji dibatasi sejumlah 43 karakter.

1.5Sistem Penulisan

Untuk mempermudah dan memperjelas pembahasan, maka laporan ini

(44)

BAB I PENDAHULUAN

Menjelaskan secara umum tentang latar belakang masalah,

identifikasi masalah, tujuan, batasan masalah dan sistematika

penulisan.

BAB II LANDASAN TEORI

Bab ini menjelaskan secara singkat landasan-landasan teori

mengenai perangkat lunak yang membantu dalam pembuatan aplikasi

belajar bahasa Jepang dalam bentuk animasi.

BAB III ANALISA DAN PEMBAHASAN

Pada bab ini berisi mengenai pembahasan rancangan yang

terdiri diagram blok, input-output dan beberapa tahapan dari

pembuatan animasi.

BAB IV DATA PENGAMATAN

Pada bab ini berisi mengenai semua tampilan tampilan dari

animasi yang telah di buat.

BAB V KESIMPULAN DAN SARAN

Pada bab terakhir ini berisi tentang kesimpulan dan saran-saran

hasil dari semua bahasan yang terdapat didalam penulisan ilmiah ini

yakni tentang pembuatan animasi yang dibahas oleh penulis pada

(45)

68

BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari hasil analisa dan pengujian Tugas Akhir, dapat diambil

beberapa kesimpulan sebagai berikut :

1. Program belajar bahasa Jepang dengan menggunakan Macromedia

8.0 telah selesai dibuat.

2. Dari hasil survey terhadap 10 orang, menghasilkan nilai MOS =

3,27 yang menyatakan bahwa program aplikasi pengenalan dasar

bahasa Jepang menggunakan macromedia 8.0 dinyatakan cukup

(46)

5.2 Saran

Terdapat beberapa saran yang dapat dipertimbangkan dalam

pemanfaatan aplikasi ini, yaitu seperti :

1. Program belajar bahasa Jepang, dapat dilengkapi dengan tata cara

penulisan yang baik seperti teknik penulisan huruf Jepang,

penggunaan SPOK pada bahasa Jepang.

2. Program belajar bahasa Jepang dapat dilengkapi dengan kuis yang

dapat mendeteksi suara. Jika user berbicara sesuai dengan jawaban

yang ditampilkan, maka program otomatis dapat mengolah suara dari

(47)

Universitas Kristen Maranatha 70

DAFTAR PUSTAKA

55 Kreasi Populer Animasi Cantik dengan Adobe Flash, Penerbit ANDI dan

MADCOMS, Yogyakarta, 2009

Kurniawan,Yahya, Kiat Praktis Menguasai ActionScript 2.0 Flash MX 2004, PT

Elex Media Komputindo, Jakarta, 2005

Mutmainah, Siti, Onno W. Purbo, Flash Design & Animasi Web, PT Elex Media

Computindo, Jakarta, 2002

Zainul A. Fanani, Maulana Arry Syarif, Membuat Mini Game Seru dengan Flash,

Penerbit ANDI , Yogyakarta, 2009

http://www.Scribd.com, 11 Mei 2010

http://www.Skatel-1chezone.blogspot.com, 11 Mei 2010

http://www. archive.kaskus.us/thread/2856832/20, 13 Juli 2010

http://www. japaneseonline.org, 20 Mei 2010

http://www. nihongoresources.com, 20 Mei 2010