41

BAB IV

HASIL DAN PEMBAHASAN

4.1 Rancangan Pembuatan Media Pembelajaran

Pada halaman ini akan dijelaskan cara pembuatan media pembelajaran

animasi yang akan ditampilkan. Dalam tampilan animasi ini akan dibuat

dengan menggunakan teknik tracing yaitu teknik menggambar ulang dari

gambar yang sudah ada, sehingga tampilannya menjadi lebih menarik dan

4.1.1 Tampilan Scene Opening

Pada tampilan ini berisi animasi teks dan animasi objek sebagai tampilan

pembuka dari aplikasi.

Adapun langkah pembuatannya sebagai berikut :

1. Buka Macromedia Flash 8 dengan cara Klik Start > All Program >

Adobe Flash CS 6.0

Gambar 4.1 Tampilan Awal Program

 42

2. Create Actionscript 3.0 > klik kiri mouse

3. Masuk ke tampilan utama, seperti gambar di bawah ini:

Gambar 4.2 Tampilan Layar Utama

4. Ganti nama layer dengan nama background yang nantinya dijadikan

sebagai background dari scene 1.

Gambar 4.3 Tampilan Backgound Kosong

5. Memasukan gambar pada Stage adalah dengan cara File > Import >

Import to Library > Cari gambar background yang akan digunakan

dan klik tombol Open

6. Setelah gambar dimasukan, atur ukuran gambar sesuai dengan ukuran

Stage yang sedang kita gunakan.

 43

Gambar 4.4 Tampilan Background dengan gambar

7. Gunakan Tools Teks yang ada pada Panel Tool, lalu letakan di tengah

Stage dan ketikan Judul animasi Lets Study English With

Translate Menggunakan Adobe Flash CS 6.0

8. Pada Layer Teks 1, tambahkan Insert Keyframe pada Frame 10 dan

diantara Frame 1 sampai 10, klik kanan dan pilih Create Motion

Tween.

9. Pada Layer Teks 1, Frame 1 klik gambar dan ganti Color menjadi

Alpha dan Opacity menjadi 0%. Lakukan cara seperti 2 langkah diatas

untuk Layer Teks 2 sampai Layer Teks 7.

 44

Gambar 4.5 Tampilan Menu Halaman Judul

10. Membuat layer papan dengan menggunakan Insert > Timeline >

Layer, lalu ketik layer dengan nama papan untuk membuat tulisan di

background

11. Membuat layer ornamen dengan menggunakan Insert > Timeline >

Layer, lalu ketik layer dengan nama ornamen untuk menambahkan

ornamen di background.

12. Edit scene 2 dengan nama Numberik untuk membuat animasi

angka.

4.1.2. Tampilan Scene Numerik

 45

Pada tampilan ini berisi animasi angka sebagai tampilan dari scene yang

kedua dari aplikasi. Nama scene yang dibuat Numerik.

Adapun langkah pembuatannya sebagai berikut :

Gambar 4.6 Tampilan Scene Numerik

13. Buat layer baru satu per satu dengan klik tombol Insert > Timeline >

Layer dan buat layer sebanyak 9 untuk menampung angka 0 10.

14. Membuat Layer untuk angka 0 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 0.

 46

Gambar 4.7. Tampilan Layer untuk angka 0

15. Membuat Layer untuk angka 1 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 1.

Gambar 4.8. Tampilan Layer untuk angka 1

16. Membuat Layer untuk angka 2 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 2.

 47

Gambar 4.9. Tampilan Layer untuk angka 2

17. Membuat Layer untuk angka 3 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 3.

Gambar 4.10. Tampilan Layer untuk angka 3

 48

Lakukan hal seperti di atas sampai dengan Layer 9 untuk membuat angka

9.

18. Membuat Layer untuk angka 4 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 4.

Gambar 4.11. Tampilan Layer untuk angka 4

19. Membuat Layer untuk angka 5 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 5.

 49

Gambar 4.12. Tampilan Layer untuk angka 5

20. Membuat Layer untuk angka 6 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 6.

 50

Gambar 4.13. Tampilan Layer untuk angka 6

21. Membuat Layer untuk angka 7 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 7.

Gambar 4.14. Tampilan Layer untuk angka 7

22. Membuat Layer untuk angka 8 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 8.

 51

Gambar 4.15. Tampilan Layer untuk angka 8

23. Membuat Layer untuk angka 9 dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan 9.

 52

Gambar 4.16. Tampilan Layer untuk angka 9

24. Membuat Layer untuk angka 10 dengan klik tombol Insert > Timeline

> Layer dan ganti nama layer dengan 10.

Gambar 4.17. Tampilan Layer untuk angka 10

Peralihan dari tampilan dari scene Numerik ke scene Abjad :

 53

Gambar 4.18. Tampilan scene Numerik ke scene Abjad

4.1.3 Tampilan Scene Abjad

Pada tampilan ini merupakan animasi untuk abjad. Adapun langkah

pembuatannya sebagai berikut:

1. Tambahkan Scene dengan Insert > Scene, maka akan tampil Scene 3

dengan sendirinya.

2. Mengubah Scene 3 dengan nama Abjad

3. Klik Insert > Scene

4. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

ABJAD
 54

Gambar 4.19. Tampilan Scene Abjad dengan Layer ABJAD

5. Membuat Layer untuk abjad A dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan a.

Gambar

4.20. Tampilan

Layer Untuk

Huruf A

6. Membuat Layer untuk abjad B dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan b.

 55

Gambar 4.21. Tampilan Layer Untuk Huruf B

7. Membuat Layer untuk abjad C dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan c.

 56

Gambar 4.22. Tampilan Layer Untuk Huruf C

8. Membuat Layer untuk abjad D dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan d.

Gambar 4.23. Tampilan Layer Untuk Huruf D

9. Membuat Layer untuk abjad E dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan e.

 57

Gambar 4.24. Tampilan Layer Untuk Huruf E

10. Membuat Layer untuk abjad F dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan f.

Gambar 4.25. Tampilan Layer Untuk Huruf F

11. Membuat Layer untuk abjad G dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan g.

Gambar 4.25. Tampilan Layer Untuk Huruf G

 58

12. Membuat Layer untuk abjad H dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan h.

Gambar 4.26. Tampilan Layer Untuk Huruf H

13. Membuat Layer untuk abjad I dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan i.

Gambar 4.27. Tampilan Layer Untuk Huruf I

 59

14. Membuat Layer untuk abjad J dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan j.

Gambar 4.28. Tampilan Layer Untuk Huruf J

15. Membuat Layer untuk abjad K dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan k.

Gambar 4.29. Tampilan Layer Untuk Huruf K

 60

16. Membuat Layer untuk abjad L dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan l.

Gambar 4.30. Tampilan Layer Untuk Huruf L

17. Membuat Layer untuk abjad M dengan klik tombol Insert > Timeline

> Layer dan ganti nama layer dengan m.

Gambar 4.31. Tampilan Layer Untuk Huruf M

 61

18. Membuat Layer untuk abjad N dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan n.

Gambar 4.32. Tampilan Layer Untuk Huruf N

19. Membuat Layer untuk abjad O dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan o.

 62

Gambar 4.33. Tampilan Layer Untuk Huruf O

20. Membuat Layer untuk abjad P dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan p.

Gambar 4.34. Tampilan Layer Untuk Huruf O

21. Membuat Layer untuk abjad Q dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan q.

 63

Gambar 4.34. Tampilan Layer Untuk Huruf Q

22. Membuat Layer untuk abjad R dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan r.

Gambar 4.35. Tampilan Layer Untuk Huruf R

23. Membuat Layer untuk abjad S dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan s.

 64

Gambar 4.36. Tampilan Layer Untuk Huruf S

24. Membuat Layer untuk abjad T dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan t.

Gambar 4.37. Tampilan Layer Untuk Huruf T

25. Membuat Layer untuk abjad U dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan u.

 65

Gambar 4.38. Tampilan Layer Untuk Huruf U

26. Membuat Layer untuk abjad V dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan v.

Gambar 4.39. Tampilan Layer Untuk Huruf V

27. Membuat Layer untuk abjad W dengan klik tombol Insert > Timeline

> Layer dan ganti nama layer dengan w.

 66

Gambar 4.40. Tampilan Layer Untuk Huruf W

28. Membuat Layer untuk abjad X dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan x.

Gambar 4.41. Tampilan Layer Untuk Huruf X

29. Membuat Layer untuk abjad Y dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan y.

 67

Gambar 4.42. Tampilan Layer Untuk Huruf Y

30. Membuat Layer untuk abjad Z dengan klik tombol Insert > Timeline >

Layer dan ganti nama layer dengan z.

Gambar 4.43. Tampilan Layer

Untuk Huruf Z

31. Membuat Layer untuk penggabungan huruf A-Z dengan klik tombol

Insert > Timeline > Layer dan ganti nama layer dengan gabungan.
 68

Gambar 4.44. Tampilan Layer Untuk Gabungan Huruf

32. Membuat Layer untuk memasukkan suara dengan klik tombol Insert >

Timeline > Layer dan ganti nama layer dengan os abcd song.

Gambar 4.45.

Tampilan Layer

Untuk

Memasukkan Suara

4.1.4 Tampilan Scene Ejaan (Spelling)

Pada tampilan ini merupakan animasi untuk abjad. Adapun langkah

pembuatannya sebagai berikut:

1. Tambahkan Scene dengan Insert > Scene, maka akan tampil Scene 3

dengan sendirinya.

2. Mengubah Scene 3 dengan nama spelling

3. Klik Insert > Scene

4. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama bg
 69

Gambar 4.46. Tampilan Background Untuk Spelling

5. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

babi

Gambar 4.47. Tampilan Layer Babi

6. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

domba
 70

Gambar 4.48. Tampilan Layer Domba

7. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

jerapah

Gambar 4.49. Tampilan Layer Jerapah

8. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

sapi
 71

Gambar 4.50. Tampilan Layer Sapi

9. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

singa

Gambar 4.51. Tampilan Layer Singa

10. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

p.kelapa
 72

Gambar 4.52. Tampilan Layer P.Kelapa

11. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

p.pisang

Gambar 4.52. Tampilan Layer P.Pisang

11. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

p.palm

Gambar 4.53. Tampilan Layer P.Palm

12. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

b.matahari
 73

Gambar 4.54. Tampilan Layer B.Matahari

13. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

b.mawar

Gambar 4.55. Tampilan Layer B.Mawar

14. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama car
 74

Gambar 4.56.

Tampilan Layer

Car

15. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama bis

Gambar 4.56. Tampilan Layer Bis

16. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

pesawat
 75

Gambar 4.57. Tampilan Layer Pesawat

4.1.5 Tampilan Scene Closing

Pada tampilan ini merupakan tampilan animasi penutup (closing). Adapun

langkah pembuatannya sebagai berikut:

1. Tambahkan Scene dengan Insert > Scene, maka akan tampil Scene 3

dengan sendirinya.

2. Mengubah Scene 3 dengan nama closing

3. Klik Insert > Scene

4. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

background

5. Buat Layer dengan klik Insert > Timeline > Layer dan beri nama

nama
 76

Gambar 4.58. Tampilan Background Scene Closing