Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

105
ANIMASI KINEMATIKA GERAK LURUS DENGAN ADOBE FLASH CS3 PROFESSIONAL TUGAS AKHIR ADELINA PINEM 072406123 PROGRAM STUDI D3 ILMU KOMPUTER DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM MEDAN 2010

Transcript of Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Page 1: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

ANIMASI KINEMATIKA GERAK LURUS DENGAN

ADOBE FLASH CS3 PROFESSIONAL

TUGAS AKHIR

ADELINA PINEM

072406123

PROGRAM STUDI D3 ILMU KOMPUTER

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

MEDAN

2010

Page 2: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

ANIMASI KINEMATIKA GERAK LURUS DENGAN

ADOBE FLASH CS3 PROFESSIONAL

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh gelar Ahli Madya

ADELINA PINEM

072406123

PROGRAM STUDI D3 ILMU KOMPUTER

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2010

Page 3: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

PERSETUJUAN

Judul : ANIMASI KINEMATIKA GERAK LURUS

DENGAN ADOBE FLASH CS3 PROFESSIONAL

Kategori : TUGAS AKHIR

Nama : ADELINA PINEM

Nomor Induk Mahasiswa : 072406123

Program Studi : D3 ILMU KOMPUTER

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU

PENGETAHUAN ALAM (FMIPA)

UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan, Juni 2010

Diketahui/Disetujui oleh :

Departemen Matematika FMIPA USU Pembimbing,

Ketua,

Dr. Saib Suwilo, M.Sc Dra. Elly Rosmaini, M.Si

NIP. 19640109 198803 1 004 NIP. 19600520 198503 2 002

Page 4: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

PERNYATAAN

ANIMASI KINEMATIKA GERAK LURUS DENGAN

ADOBE FLASH CS3 PROFESSIONAL

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2010

ADELINA PINEM

072406123

Page 5: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha

Penyayang, dengan limpah karunia-Nya kertas kajian ini berhasil diselesaikan dalam

waktu yang telah ditetapkan.

Ucapan terima kasih saya sampaikan kepada Dra. Elly Rosmaini, M.Si selaku

pembimbing pada penyelesaian tuugas akhir ini yang telah memberikan panduan dan

penuh kepercayaan kepada saya untuk menyempurnakan kajian ini. Panduan ringkas dan

padat dan profesional telah diberikan kepada saya agar penulis dapat menyelesaikan tugas

ini. Ucapan terima kasih juga ditujukan kepada Ketua dan Sekretaris Departemen

Matematika, Dr. Saib Suwilo, M.Sc. dan Drs. Hendri Rani Sitepu, M.Si., Dekan dan

Pembantu Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera

Utara, semua dosen pada departemen Matematika FMIPA USU, pegawai di FMIPA USU,

dan rekan-rekan kuliah. Akhirnya, tidak terlupakan kepada orang tua tercinta serta sanak

saudara penulis yang selama ini memberikan bantuan, dorongan, dan doa yang diperlukan.

Semoga Tuhan Yang Maha Esa akan membalasnya.

Page 6: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

ABSTRAK

Kajian ini bertujuan untuk membangun sebuah aplikasi pembelajaran. Sistem

pembelajaran Fisika tentang kinematika gerak lurus ini dibuat dengan menggunakan

sperangkat lunak Adobe Flash CS3 professional. Selain itu, juga digunakan Macromedia

Fireworks 8 untuk membantu pembuatan gambar. Aplikasi ini dapat dijalankan dengan

Flash Player atau browser. Tujuan dari sistem pembelajaran ini adalah untuk membantu

para siswa untuk mempelajari pelajaran Fisika khususnya tentang kinematika gerak lurus.

Isi yang disampaikan mulai dari teori tentang gerak lurus, contoh soal, menghitung jarak

tempuh, sampai pada quis yang menguji pemahaman siswa. Selain itu aplikasi ini juga

dapat membantu guru menyampaikan materi tentang gerak lurus.

Page 7: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

ANIMATION OF KINEMATICS OF MOTION IN A STRAIGHT LINE

ABSTRACT

This study is to develop a study application. This Physics study application about

kinematics of motion in a straight line is developed by using software Adobe Flash CS3

Professional. Beside that, Macromedia Fireworks is also used to help in making an object.

This application can be run in Flash Player or browser. The aim of this study system is to

help students to learn Physics especially about kinematics of motion in a straight line. The

contents start from the theory about motion in a straight line, the example, how to

calculate the distance and at the end, there is a task to know how deep the student has

understood the lesson. This application also can help teacher to teach about kinematics of

motion in a straight line.

Page 8: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Abstract vi

Daftar Isi vii

Daftar Gambar ix

Bab 1 Pendahuluan 1

1.1 Latar Belakang 1

1.2 Identifikasi Masalah 3

1.3 Tujuan dan Manfaat 3

1.4 Metode Penelitian 4

1.5 Sistematika Penulisan 5

Bab 2 Landasan Teori 6

2.1 Flash 6

2.1.1 Sekilas Tentang Flash 6

2.1.2 Adobe Flash CS3 7

2.2 Dasar-dasar Penggunaan Adobe Flash CS3 8

2.2.1 Halaman Awal 8

2.2.2 Jendela Utama 9

2.2.3 Toolbox 11

2.2.4 Library 14

2.2.5 Action Script 14

2.3 Kinematika Gerak Lurus 17

2.3.1 Jarak dan Perpindahan 17

2.3.2 Kelajuan dan Kecepatan 18

2.3.2.1 Kelajuan Rata-rata 19

2.3.2.2 Kelajuan Sesaat 19

Page 9: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2.3.2.3 Kecepatan Rata-rata 19

2.3.2.4 Kecepatan Sesaat 20

2.3.3 Percepaatn dan Perlajuan 20

2.3.4 Gerak Lurus Beraturan dan Gerak Lurus Berubah Beraturan 21

2.3.5 Gerak Jatuh Bebas 22

2.3.6 Gerak Vertikal Ke Atas 23

Bab 3 Analisis dan Perancangan

3.1 Analisis Sistem Pembelajaran yang sedang Berjalan 24

3.2 Analisis Sistem Pembelajaran yang akan Dibangun 25

3.3 Rancangan Animasi 26

3.3.1 Desain Intro 26

3.3.2 Desain Menu 29

3.3.3 Desain Teori 33

3.3.4 Desain Halaman Contoh Soal 37

3.3.4.1 Animasi GLB 37

3.3.4.2 Animasi Gerak Jatuh Bebas 38

3.3.4.3 Animasi Gerak Vertikal 39

3.3.5 Desain Aplikasi 41

3.3.6 Desain Quis 44

3.3.7 Desain Exit 46

Bab 4 Implementasi Sistem 48

4.1 Hasil 48

4.1.1 Halaman Intro 48

4.1.2 Halaman Menu 49

4.1.3 Halaman Teori 50

4.1.4 Halaman GLB 51

4.1.5 Halaman Gerak Jatuh Bebas 52

4.1.6 Halaman Gerak Vertikal 53

4.1.7 Halaman Aplikasi 54

4.1.8 Halaman Quis 55

4.1.8.1 Animasi setelah klik tombol mulai 56

4.1.8.2 Tampilan ketika Nilai <=40 57

4.1.8.3 Tampilan ketika Nilai >=60 58

Page 10: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.1.9 Halaman Exit 59

4.2 Pembahasan 59

4.2.1 Kelebihan Aplikasi yang Dibuat 60

4.2.2 Kekurangan Aplikasi yang Dibuat 61

Bab 5 Kesimpulan dan Saran 62

5.1 Kesimpulan 62

5.2 Saran 63

Daftar Pustaka 64

LAMPIRAN

Page 11: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

DAFTAR GAMBAR

Halaman

Gambar 2.1 Tampilan Start Page Adobe Flash CS3 9

Gambar 2.2 Jendela Utama 10

Gambar 2.3 Library 14

Gambar 2.4 Panel Action 17

Gambar 3.1 Layer background 27

Gambar 3.2 Movie Clip Gelembung 27

Gambar 3.3 Movie Clip Ubur-ubur 28

Gambar 3.4 Movie Clip Judul 28

Gambar 3.5 Movie Clip Bukit 31

Gambar 3.6 Movie Clip rumput 31

Gambar 3.7 Movie Clip Bulan 32

Gambar 3.8 Movie Clip Awan 32

Gambar 3.9 Movie Clip Judul 32

Gambar 3.10 Movie Clip Matahari 34

Gambar 3.11 Movie Clip Tiang 34

Gambar 3.12 Movie Clip Teori 35

Gambar 3.13 Movie Clip Kupu-kupu 36

Gambar 3.14 Movie Clip Becak 37

Gambar 3.15 Movie Clip Buah Kelapa 39

Gambar 3.16 Movie Clip Siswa SMA 40

Gambar 3.17 Movie Clip Menang 45

Gambar 3.18 Movie Clip Kalah 45

Gambar 3.19 Movie Clip Batu 46

Gambar 4.1 Halaman Intro 48

Gambar 4.2 Halaman Menu 49

Gambar 4.3 Halaman Teori 50

Gambar 4.4 Halaman GLB 51

Gambar 4.5 Halaman Gerrak Jatuh Bebas 52

Gambar 4.6 Halaman Gerak Vertikal 53

Page 12: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.7 Halaman Aplikasi 54

Gambar 4.8 Halaman Awal Quis 55

Gambar 4.9 Halaman Animasi Soal Quis 56

Gambar 4.10 Halaman Kalah 57

Gambar 4.11 Halaman Menang 58

Gambar 4.12 Halaman Exit 59

Page 13: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3
Page 14: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Animasi berasal dari kata Animation yang dalam bahasa Inggris to animate yang berarti

menggerakan. Animasi dimulai dari zaman purba, dengan ditemukannya lukisan-lukisan

pada dinding gua di Spanyol yang menggambarkan gerak dari binatang-binatang.

Animasi pada zaman purba berusaha menceritakan urutan kejadian suatu peristiwa.

Sejak menyadari bahwa gambar bisa dipakai sebagai alternatif media komunikasi, timbul

keinginan manusia untuk menghidupkan lambang-lambang tersebut menjadi cermin

ekspresi kebudayaan. Maka, manusia terus berusaha untuk mengembangkan animasi.

Perkembangan animasi pada saat ini berjalan cepat dalam berbagai bidang.

Animasi begitu dikenal dalam bidang perfilman, terutama dunia anak-anak. Akan tetapi,

Page 15: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

sekarang animasi tidak hanya digunakan dalam dunia hiburan seperti pembuatan film dan

permainan, tetapi juga dalam pembuatan desain web dan dunia pendidikan.

Animasi dalam dunia pendidikan berperan dalam sebagai media pembelajaran

yang menarik. Animasi merupakan salah satu bentuk visual bergerak yang dapat

dimanfaatkan untuk menjelaskan materi pelajaran yang sulit disampaikan secara

konvensional. Animasi dapat diintergrasikan ke media lain seperti video atau presentasi

sehingga cocok untuk menjelaskan materi-materi pelajaran yang sulit disampaikan secara

langsung melalui buku.

Animasi dalam dunia pendidikan memberikan berbagai keuntungan bagi siswa

dan pengajar. Bagi siswa, animasi dapat meningkatkan minat belajar dan pemahaman

terhadap suatu bidang ilmu tertentu. Bagi pihak pengajar, animasi dapat mempermudah

proses pembelajaran dan pengajaran dalam penyampaian materi kepada siswa.

Salah satu perangkat lunak pembuat animasi yang cukup populer pada saat ini

adalah Adobe Flash CS3 Professional. Adobe Flash CS3 Professional menawarkan

berbagai fitur dan kemudahan dalam penggunaannya. Tampilan interface, fungsi, dan

Page 16: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

pilihan palet yang beragam, serta kumpulan tool yang lengkap sangat membantu dalam

pembuatan karya animasi yang menarik.

Berdasarkan permasalahan di atas, maka penulis sangat tertarik untuk membuat

animasi di bidang pendidikan. Animasi yang akan dibuat oleh penulis adalah animasi

tentang pelajaran Fisika. Mengingat Fisika adalah ilmu eksak yang berhubungan dengan

kehidupan sehari-hari tetapi banyak siswa yang kurang tertarik akan pelajaran tersebut.

Oleh sebab itu, penulis berusaha menarik minat siswa terhadap pelajaran Fisika dengan

menawarkan interface yang menarik. Sehingga siswa tidak merasa jenuh ketika belajar

Fisika.

Pelajaran Fisika yang akan dibuat animasinya oleh penulis difokuskan pada Fisika

tentang kinematika gerak lurus. Hasil dari animasi tersebut akan dituangkan dalam

bentuk tugas akhir dengan judul ”Animasi Kinematika Gerak Lurus dengan Adobe

Flash CS3 Professional”.

1.2. Identifikasi Masalah

Masalah yang diangkat disini adalah bagaimana membuat animasi dari pelajaran Fisika

khususnya tentang kinematika gerak lurus yang dapat memudahkan siswa memahami

Page 17: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

pelajaran tersebut serta menjadikan Fisika menjadi pelajaran yang benar-benar menarik

minat siswa. Animasi yang tepat dan menarik juga akan membuat pelajaran Fisika tidak

hanya sekedar dimengerti tetapi juga dapat dipahami sehingga dapat diaplikasikan dalam

kehidupan sehari-hari.

1.3.Tujuan dan Manfaat

Berdasarkan permasalahan – permasalahan yang penulis temukan, pembuatan animasi ini

bertujuan untuk:

1. Memudahkan siswa dalam mempelajari Fisika dan mambantu pihak pengajar

dalam menyampaikan materi pelajaran Fisika khususnya tentang kinematika

gerak lurus dengan interface yang lebih menarik dari sekedar membaca buku.

2. Menambah wawasan penulis dalam dunia animasi serta mengembangkan

kreativitas penulis.

3. Membuat suatu animasi yang juga dapat digunakan sebagai permainan yang

mengandung pengetahuan.

Manfaat yang diperoleh dalam pembuatan animasi kinematika gerak lurus ini adalah :

1. Bagi penulis, menambah wawasan dan pengetahuan tentang animasi.

Page 18: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2. Bagi dunia pendidikan, memperoleh sarana yang menarik untuk meningkatkan

proses belajar dan mengajar.

.

1.4 Metode Penelitian

Untuk memperoleh data dan informasi yang diperlukan dalam pembuatan animasi ini,

penulis menggunakan metode penelitian sebagai berikut :

1. Studi Pustaka

Penulis melakukan penelitian kepustakaan dengan membaca buku tentang teori-teori yang

berkaitan dengan pelajaran Fisika serta cara pembuatan animasi dengan menggunakan

Adobe Flash CS3 Professional. Selain itu, penulis juga membaca tugas akhir tahun

sebelumnya yang berkaitan dengan pembuatan animasi.

2. Studi Literatur

Penulis melengkapi informasi yang dibutuhkan dalam pembutan tugas akhir ini dengan

browsing di internet.

Page 19: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

1.5 Sistematika Penulisan

Sistematika penulisan tugas akhir ini adalah sebagai berikut:

BAB 1 : PENDAHULUAN

Menguraikan latar belakang, identifikasi masalah, tujuan dan manfaat

pembuatan animasi, metode penelitian, serta sistematika penulisan

laporan.

BAB 2 : TINJAUAN PUSTAKA

Menguraikan landasan teori yang membahas masalah secara teoretis

yaitu teori-teori yang berkaitan dengan permasalahan pelajaran Fisika

tentang kinematika gerak lurus serta penjelasan mengenai perangkat

lunak yang digunakan dalam pembuatan animasi ini yaitu Adobe Flash

CS3 Professional.

BAB 3 : ANALISIS DAN PERANCANGAN

Menguraikan analisis sistem yang berjalan serta perancangan sistem

yang akan dibangun. Pada bab ini juga akan dibahas kekurangan,

kelemahan dan persyaratan dalam penggunaan aplikasi tersebut.

Page 20: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 4 : IMPLEMENTASI SISTEM

Menguraikan hasil tampilan dari animasi yang dirancang dan

pembahasan hasilnya beserta kekurangan dan kelebihan sistem yang

dibuat.

BAB 5 : KESIMPULAN DAN SARAN

Menguraikan tentang kesimpulan dan saran-saran dari hasil akhir

pembuatan animasi serta pemecahan masalah untuk kesempurnaan

aplikasi.

Page 21: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3
Page 22: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 2

LANDASAN TEORI

Bab ini akan menjelaskan masalah-masalah teoretis yang berkaitan dalam pembuatan

animasi kinematika gerak lurus. Pembahasan pada bab ini meliputi perangkat lunak yang

digunakan yaitu Adobe Flash CS3 Professional serta penjelasan mengenai materi

kinematika gerak lurus pada pelajaran Fisika.

2.1 Flash

2.1.1 Sekilas Tentang Flash

Flash merupakan software yang memiliki kemampuan menggambar sekaligus

menganimasikannya, serta mudah dipelajari (M. Amarullah Akbar et al, 2008). Flash

tidak hanya digunakan dalam pembuatan animasi, tetapi pada zaman sekarang ini flash

Page 23: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

juga banyak digunakan untuk keperluan lainnya seperti dalam pembuatan game,

presentasi, membangun web, animasi pembelajaran, bahkan juga dalam pembuatan film.

Animasi yang dihasilkan flash adalah animasi berupa file movie. Movie yang

dihasilkan dapat berupa grafik atau teks. Grafik yang dimaksud disini adalah grafik

yang berbasis vektor, sehingga saat diakses melalui internet, animasi akan ditampilkan

lebih cepat dan terlihat halus. Selain itu flash juga memiliki kemampuan untuk

mengimpor file suara, video maupun file gambar dari aplikasi lain.

Flash adalah program grafis yang diproduksi oleh Macromedia corp, yaitu sebuah

vendor software yang bergerak dibidang animasi web. Macromedia Flash pertama kali

diproduksi pada tahun 1996. Macromedia flash telah diproduksi dalam beberapa versi.

Versi terakhir dari Macromedia Flash adalah Macromedia flash 8. Sekarang Flash telah

berpindah vendor menjadi Adobe.

Adobe adalah vendor software yang membeli Flash dari vendor sebelumnya yaitu

Macromedia. Sejak itu, Macromedia Flash berganti nama menjadi Adobe Flash. Versi

terbaru dari Adobe Flash adalah Adobe Flash Cs4 Professional. Namun, dalam

Page 24: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

pembuatan animasi ini penulis masih menggunakan Adobe Flash Cs3 Professional

sebagai aplikasinya.

2.1.2 Adobe Flash CS3

Adobe Flash CS3 adalah salah satu aplikasi pembuat animasi yang cukup dikenal saat ini.

Berbagai fitur dan kemudahan yang dimiliki menyebabkan Adobe Flash CS3 menjadi

program animasi favorit dan cukup populer. Tampilan interface, fungsi dan pilihan palet

yang beragam, serta kumpulan tool yang sangat lengkap sangat membantu dalam

pembuatan karya animasi yang menarik.

Flash seperti software gado-gado dimana didalamnya terdapat semua kelengkapan

yang dibutuhkan. Mulai dari fitur menggambar, ilustrasi, mewarnai, animasi, dan

programming. Kita dapat mendesain gambar atau objek yang akan kita animasikan

langsung pada Flash. Fitur programming pada Flash menggunakan bahasa ActionScript.

ActionScript dibutuhkan untuk memberi efek gerak dalam animasi. ActionScript

di flash pada awalnya memang sulit dimengerti jika seseorang tidak mempunyai dasar

atau mengenal flash. Tetapi jika sudah mengenalnya, kita tidak bisa lepas dari

Page 25: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

ActionScript karena sangat menyenangkan dan dapat membuat pekerjaan jauh lebih cepat

dan mudah.

2.2 Dasar-Dasar Penggunaan Adobe Flash CS3

2.2.1 Halaman Awal

Halaman awal adalah tampilan yang pertama kali muncul ketika kita mengakses Adobe

Flash CS3 Professional. Cara mengakses Adobe Flash CS3 Professional pertama kali

yaitu double klik pada icon yang ada di desktop atau lihat dari daftar program. Tampilan

start page pertama kali membuka Adobe Flash CS3 Professional yaitu:

Page 26: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 2.1 Tampilan Star Page Adobe Flash CS3

2.2.2 Jendela Utama

Jendela utama merupakan awal dari pembuatan program, pembuatannya dilakukan dalam

kotak movie dan stage yang didukung oleh tools lainnya. Seperti yang pernah dijelaskan

dalam sebuah tulisan “Jendela kerja flash terdiri dari panggung (stage) dan panel-panel.

Panggung merupakan tempat objek diletakkan, tempat menggambar dan menganimasikan

Page 27: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

objek. Sedangkan panel disediakan untuk membuat gambar, mengedit gambar,

menganimasi, dan pengeditan lainnya.” (Diginnovac et al, 2008) Berikut ini adalah

bentuk tampilan jendela utama pada Adobe Flash CS3.

1 2

2

3

Page 28: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4 5 6

Gambar 2.2 Jendela Utama

Keterangan gambar :

1. Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan

dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save,

Import, Export, dan lain-lain.

2. Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan

dan mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa

tayang objek, pengaturan layer, dan lain-lain.

3. Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk

mengkomposisi frame-frame secara individual dalam sebuah movie.

4. Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi,

menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau

objek.

Page 29: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

5. Properties adalah informasi objek-objek yang ada di stage. Tampilan panel

properties secara otomatis dapat berganti-ganti dalam menampilkan informasi

atribut-atribut properties dari objek yang terpilih.

6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan

memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah.

2.2.3 Toolbox

Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau alat

yang mempunyai fungsi-fungsi tersendiri untuk keperluan desain (M. Amarullah Akbar et

al, 2008). Berikut penjelasan setiap tool yang terdapat pada Toolbox .

1. Arrow Tool

Arrow Tool atau sering disebut selection tool berfungsi untuk memilih atau

menyeleksi suatu objek.

2. Subselection Tool

Subselection Tool berfungsi menyeleksi bagian objek lebih detail dari pada

selection tool.

3. Free Transform Tool

Page 30: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Free Transform Tool berfungsi untuk mentransformasi objek yang terseleksi.

4. Gradient Transform Tool

Gradien Transform Tool berfungsi untuk mentransformasi warna dari fill objek

yang terseleksi.

5. Lasso Tool

Lasso Tool digunakan untuk melakukan seleksi dengan menggambar sebuah garis

seleksi.

6. Pen Tool

Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu

seperti dalam pembuatan garis, kurva atau gambar.

7. Text Tool

Text Tool digunakan untuk membuat objek teks

8. Line Tool

Line Tool digunakan untuk membuat atau menggambar garis.

9. Rectangle Tool

Rectangle Tool digunakan untuk menggambar bentuk bentuk persegi panjang atau

bujur sangkar.

Page 31: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

10. Oval Tool

Oval Tool digunakan untuk membuat bentuk bulat atau oval.

11. Poly Star Tool

Poly Star Tool digunakan untuk menggambar bentuk dengan jumlah segi yang

diinginkan.

12. Pencil Tool

Pencil Tool digunakan untuk membuat garis

13. Brush Tool

Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk

bebas.

14. Ink bottle

Ink Bottle digunakan untuk mengubah warna garis, lebar garis, dan style garis atau

garis luar sebuah bentuk.

15. Paintbucket Tool

Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan

untuk mengubah warna area sebuah objek yang telah diwarnai.

Page 32: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

16. Eraser Tool

Eraser Tool digunakan untuk menghapus objek

17. Hand Tool

Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah

pembesaran.

18. Zoom Tool

Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.

19. Stroke Color

Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis.

20. Fill Color

Fill Color digunakan untuk memilih atau memberi warna pada suatu objek.

21. Black and white

Black and White digunakan untuk memilih warna hitam dan putih saja.

22. Swap Color

Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari

suatu gambar atau objek.

2.2.4 Library

Page 33: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Fungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah

yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan

panel library.

Gambar 2.3 Panel Library

2.2.5 Action Script

Salah satu kelebihan Adobe Flash Cs3 dibanding perangkat lunak animasi yang lain yaitu

adanya ActionScript. ActionScript adalah bahasa pemrograman Adobe Flash CS3 yang

digunakan untuk membuat animasi atau interaksi (Ferry Herlambang, 2007). ActionScript

Page 34: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

mengizinkan untuk membuat intruksi berorientasi action (lakukan perintah) dan instruksi

berorientasi logic (analisis masalah sebelum melakukan perintah) .

Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen

yang berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar

ActionScript dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai

semuanya dengan benar, maka hasil yang didapat kan akan berbeda atau file flash tidak

akan bekerja sama sekali. ActionScript juga dapat diterapkan untuk action pada frame,

tombol, movie clip, dan lain-lain. Action frame adalah action yang diterapkan pada frame

untuk mengontrol navigasi movie, frame, atau objek lain-lain.(Arry Maulana Syarif,

Diginnovac, 2008)

Salah satu fungsi ActionScript adalah memberikan sebuah konektivitas terhadap

sebuah objek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang

harus diperhatikan dalam ActionScript yaitu:

1. Event

Event merupakan peristiwa atau kejadian untuk mendapatkan aksi sebuah objek.

Event pada Adobe Flash CS3 ada empat, yaitu:

a. Mouse event

Page 35: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Event yang berkaitan dngan penggunaan mouse.

b. Keyboard Event

Kejadian pada saat menekan tombol keyboard.

c. Frame Event

Event yang diletakkan pada keyframe.

d. Movie Clip Event

Event yang disertakan pada movie clip.

2. Target

Target adalah objek yang dikenai aksi atau perintah. Sebelum dikenai aksi atau

perintah, sebuah objek harus dikonversi menjadi sebuah simbol dan memiliki

nama instan. Penulisan nama target pada skrip harus menggunakan tanda petik

ganda (” ”)

3. Action

Pemberian action merupakan lagkah terakhir dalam pembuatan interaksi

antarobjek. Action dibagi menjadi dua antara lain:

Page 36: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

a. Action Frame: adalah action yang diberikan pada keyframe. Sebuah

keyframe akan ditandai dengan huruf a bila pada keyframe tersebut

terdapat sebuah action.

b. Action Objek: adalah action yang diberikan pada sebuah objek, baik

berupa tombol maupun movie clip.

ActionScript diketikkan pada panel actions yang tersedia pada software.

ActionScript hanya dapat dituliskan pada objek yang bertipe Movie Clip, keyframe,

Button, dan objek components. ActionScript tidak dapat digunakan pada objek tulisan

atau gambar lain yang bukan bertipe Movie Clip. Jadi bila ingin menggunakan

ActionScript pada suatu objek, objek tersebut harus diubah menjadi Movie Clip terebih

dahulu. Untuk membuka panel Actions, klik tulisan Action yang ada pada jendela panel.

Berikut tampilan dari panel ActionScript pada Adobe Flash CS3.

Page 37: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 2.4 Panel Action

2.2 Kinematika Gerak Lurus

Suatu benda dikatakan bergerak jika benda tersebut mengalami perubahan kedudukan

terhadap acuan atau titik tertentu. Suatu benda dikatakan bergerak lurus jika lintasannya

lurus. Ilmu yang mempelajari tentang gerak tanpa memperhatikan penyebab dari gerak

tersebut disebut kinematika. Sedangkan ilmu yang mempelajari gerak dengan

Page 38: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

memperhatikan atau melibatkan gaya sebagai penyebab benda berpindah disebut dengan

dinamika.

2.3.1 Jarak dan Perpindahan

Jarak adalah panjang lintasan yang ditempuh oleh suatu benda dalam selang waktu

tertentu. Dalam ilmu fisika, jarak dan panjang lintasan mempunyai pengertian yang sama.

Keduanya merupakan besaran skalar yang tidak mempunyai arah. Hal ini menyebabkan

jarak dan perpindahan selalu bernilai positif.

Perpindahan adalah perubahan kedudukan suatu benda setelah bergerak pada

selang waktu tertentu. Perpindahan merupakan besaran vektor sehingga selain memiliki

besar, perpindahan juga mempunyai arah. Oleh karena itu perpindahan dapat bernilai

positif atu negatif.

2.3.2 Kelajuan dan Kecepatan

Kelajuan dan kecepatan mempunyai makna yang berbeda. Sering terjadi kekeliruan

dalam memahami makna dari kedua kata ini. Kata ”kelajuan” dalam bahasa Inggris

Page 39: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

adalah speed, sedangkan kecepatan adalah velocity. Kecepatan selau berhubungan dengan

perpindahan. Oleh karena itu, kecepatan dapat bernilai positif atau negatif, bergantung

pada arah perpindahan. Perpindahan merupakan besaran vektor. Demikian juga dengan

kecepatan. Jadi, kecepatan adalah kelajuan yang disertai perpindahan. Kelajuan dibagi

lagi menjadi kelajuan rata-rata dan kelajuan sesaat. Kecepatan juga dibagi menjadi

kecepatan rata-rata dan kecepatan sesaat.

2.3.2.1 Kelajuan Rata-rata

Sebuah kendaraan yang sedang bergerak umumnya mengalami kelajuan yang berbeda-

beda tergantung dari keadaan jalan raya dan lingkungan. Maka, ada yang disebut dengan

kelajuan rata-rata. Kelajuan rata-rata adalah jarak total yang ditempuh dalam selang

waktu tertentu. Jika kelajuan rata-rata dilambangkan dengan v, jarak yang ditempuh

dilambangkan dengan s, dan waktu tempuh t, secara sistematis persamaannya ditulis

sebagai berikut

v = t

s (2.1)

Keterangan:

v = kelajuan rata-rata(m/s)

Page 40: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

s = jarak yang ditempuh (m)

t = waktu tempuh (s)

2.3.2.2 Kelajuan Sesaat

Kelajuan rata-rata berbeda dengan kelajuan sesaat. Kelajuan rata-rata tidak dilihat dari

kedudukan benda itu berada.Kelajuan rata-rata ditinjau dari seluruh perjalanan benda itu

dalam selang waktu tertentu. Kelajuan sesaat bergantung pada kedudukan benda saat itu.

Kelajuan sesaat pada sebuah kendaraan dapat dilihat pada speedometer kendaraan

tersebut. Kelajuan sesaat selalu berubah-ubah.

2.3.2.3 Kecepatan Rata-rata

Kecepatan rata-rata suatu benda bergantung pada besar dan arah perpindahan serta selang

waktu yang dibutuhkan. Jadi ada dua kendaraan yang melaju dengan kelajuan yang sama

tetapi dengan arah ayng berlawanan berarti kecepatan kedua kenderaan tersebut berbeda.

Persamaan kecepatan rata-rata dapat ditulis sebagai berikut

v =t

s (2.2)

Page 41: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Keterangan:

v = kecepatan rata-rata (m/s)

s = perpindahan (meter)

t = selang waktu (sekon)

2.3.2.4 Kecepatan Sesaat

Sebuah benda yang bergerak dengan kecepatan yang tetap sulit dijumpai karena pada

umumnya kecepatan sealu berubah. Kecepatan sesaat adalah kecepatan gerak sebuah

benda pada suatu titik dari lintasannya. Persamaan kecepatan sesaat dituliskan sebagai

berikut:

t

yv (2.3)

v = Kecepatan sesaat (m/s)

y = Perpindahan benda (m)

t = Selang waktu sangat kecil pada suatu saat (s)

Page 42: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2.3.3 Percepatan dan Perlajuan

Semua benda yang bergerak dengan kecepatan yang tidak tetap mengalami perubahan

kecepatan yang disebut dengan percepatan. Percepatan merupakan besaran vektor.

Percepatan dapat bernilai positif atau negatif. Percepatan yang bernilai negatif disebut

perlambatan. Percepatan (accelaration = a) secara sistematis dapat ditulis dengan

persamaan:

t

va (2.4)

Keterangan:

a = Percepatan (m/s2)

v = Perubahan kecepatan (m/s)

t = Perubahan waktu (s)

Sama seperti kecepatan, percepatan juga dibagi menjadi percepatan rata-rata dan

percepatan sesaat. Percepatan rata-rata adalah hasil bagi perubahan kecepatan dengan

perubahan waktu. Sedangkan percepatan sesaat adalah hasil bagi perubahan kecepatan

dengan perubahan waktu yang sangat kecil (sesaat).

Page 43: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Perlajuan tidak sama dengan percepatan. Perlajuan tidak mempunyai arah seperti

percepatan. Persamaan perlajuan dapt ditulis sebagai berikut:

Perlajuan =waktuselang

kelajuanperubahan (2.5)

2.3.4 Gerak Lurus Beraturan dan Gerak Lurus Berubah Beraturan

Dalam kehidupan sehari-hari jarang ditemui benda yang bergerak lurus beraturan karena

pada umumnya gerak suatu benda diawali dengan percepatan diakhiri dengan

perlambatan. Hubungan antara nilai perpindahan (s) dengan nilai kecepatan (v) dapat

diyatakan sebagai berikut:

s = v. t (2.6)

Gerak lurus berubah beraturan adalah gerak benda yang mengalami percepatan

atau perlambatan dengan nilai yang yang konstan. Persamaannya dapat ditulis sebagai

berikut:

vt = vo + a . t (2.7)

keterangan:

Page 44: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

vt = kecepatan pada t sekon (m/s)

vo = kecepatan awal (m/s)

a = percepatan (m/s2)

t = waktu (s)

2.3.5 Gerak Jatuh Bebas

Gerak jatuh bebas adalah gerak sebuah benda yang jatuh dari ketinggian tertentu tanpa

kecepatan awal. Rumus pada gerak jatuh bebas sama dengan rumus pada gerak lurus

berubah beraturan hanya saja nilai kecepatan awalnya adalah nol. Pada gerak jatuh bebas,

besarnya percepatan sama dengan besarnya gravitasi. Persamaannya adalah sebagai

berikut:

tgvt . (2.8)

2.2

1tgh (2.9)

Keterangan:

Page 45: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

vt = Kecepatan pada t sekon (m/s)

g = Gravitasi (m/s2)

t = Waktu (s)

h =Ketinggian benda (m)

2.3.6 Gerak Vertikal Ke aAtas

Gerak vertikal ke atas adalah gerak yang dialami suatu benda yang dilempar keatas. Jadi

gerak vertikal ke atas adalah gerak yag diperlambat, karena semakin keatas kecepatannya

semakin berkurang. Ketika kecepatannya telah sama dengan nol, benda akan kembali

turun kebawah. Ketika kembali jatuh kebawah benda tersebut akan mengalami gerak

jatuh bebas. Gerak jatuh bebas mempunyai perlambatan sebesar gravitasi. Persamaannya

dapat dituliskan sebagai berikut:

g

voh

2

2

max (2.10)

Keterangan:

hmax = Tinggi maksimum yang dapat dicapai (m)

v0 = Kecepatan awal (m/s)

g = Gravitasi (m/s2)

Page 46: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3
Page 47: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 3

ANALISIS DAN PERANCANGAN

3.1 Analisis Sistem Pembelajaran yang sedang Berjalan

Sistem pembelajaran pelajaran Fisika yang selama ini berlangsung hanya berpatok pada

buku pegangan. Jika pun ada, proses pembelajaran hanya dibantu oleh alat peraga

seadanya yang tersedia di sekolah. Masalahnya, tidak semua sekolah mempunyai alat

peraga yang lengkap untuk setiap pelajaran. Hal ini disebabkan oleh ketidakmampuan

pihak sekolah dalam hal pembiayaan untuk membeli alat peraga tersebut. Ditambah lagi,

batuan dari pemerintah untuk alat peraga disetiap sekolah masih sangat minim. Tanpa

bantuan alat peraga siswa akan mengalami kesulitan dalam belajar Fisika karena siswa

harus mampu berimajinasi untuk membayangkan setiap kejadian yang diceritakan.

Dari analisis tersebut, penulis mencoba mencari suatu solusi untuk memudahkan

siswa belajar tanpa alat peraga yang mahal, tetapi tidak kalah menariknya belajar dengan

Page 48: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

alat peraga. Selain itu media pembelajaran tersebut mudah dipahami dan mudah

dipublikasikan. Animasi adalah salah satu solusi untuk masalah tersebut.

Animasi adalah gambar yang bergerak yang mampu merepresentasikan kejadian

yang diceritakan dalam pelajaran. Animasi juga dapat dilengkapi dengan video dan suara

sehingga interface yang ditampilkan akan semakin menarik minat siswa untuk belajar dan

memahami pelajaran yang disampaikan. Selain itu, menurut penelitian, gambar lebih

mudah diingat daripada tulisan. Maka dari itu, penulis menggabungkan gambar, tulisan

dan suara sehingga proses belajar dapat dilakukan secara optimal.

3.2 Analisis Sistem Pembelajaran yang akan Dibangun

Sistem Pembelajaran yang akan dibangun adalah dengan menggunakan animasi. Adapun

pengertian animasi telah dijelaskan di bab sebelumnya. Animasi harus memenuhi

spesifikasi tertentu. Spesifikasi ini merupakan bagian dari program yang berhubungan

langsung dengan pemakai.

Pembuatan animasi disini dijelaskan dalam bentuk rancangan animasi yang

menggambarkan segala sesuatu yang tampak pada layar monitor, yaitu meliputi

Page 49: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

pembuatan gambar, teks, pemberian suara, pembuatan efek gerak dan pembuatan

interaktif animasi yang menggunakan ActionScript. Animasi ini juga harus memenuhi

standar animasi yang baik. Adapun animasi yang baik memenuhi beberapa kriteria

dibawah ini:

1. Tampilan yang menarik dan tidak berlebihan

2. Dukungan suara dan video yang menarik

3. Bermanfaat

4. Informatif

5. Interaktif

3.3 Rancangan Animasi

Pembuatan animasi pembelajaran Fisika ini menggunakan teknik yang sederhana. Teknik

yang sederhana ini tentunya juga didukung oleh peranan ActionScript yang sangat

membantu dalam penyederhanaan hasil publikasi flash semaksimal mungkin sehingga

didapatkan objek yang dinamis, interaktif dan tidak terjadi pemakaian ruang publikasi

secara berlebihan. Animasi ini akan menggunakan ActionScript.

Page 50: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

3.3.1 Desain Intro

Bagian intro ini adalah halaman yang berisi ucapan selamat datang bagi pengguna sistem

pembelajaran. Bagian ini berisi animasi gambar dan suara. Bagian ini juga berisi tombol

yang akan menuju pada halaman menu. Bagian ini animasinya berupa dasar laut dengan

tulisan yang akan muncul semakin membesar dan berhenti setelah mencapai ukuran

tertentu. Langkah-langkah mendesain halaman intro adalah:

1. Buatlah tujuh buah layer dengan nama background, gelembung, ubur-ubur, judul,

max, narator, dan musik.

2. Pada layer background, buatlah sebuah segi empat dengan menggunakan

rectangle tool pada tool box. Pilih warna biru sebagi fill color dan tanpa stroke

color. Seleksi segi empat tersebut dan pada jendela panels color pilih radial

sebagai type color.

3. Masih pada layer background, letakkan objek-objek yang menggambarkan dasar

laut sedemikian rupa pada stage. Untuk objek ikan, dan bintang laut gerakkan

dengan menggunakan motion tween. Objek-objek ini dapat digambarkan dengan

menggunakan tools yang tersedia pada tool box pada Adobe Flash CS3.

Page 51: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.1 Layer background

4. Pada layer gelembung buatlah lingkaran yang menggambarkan gelembung udara

dengan stroke color berwarna putih dan tanpa fill color. Ubah menjadi movie clip

dengan menekan tombol F8. Double klik pada movie clip gelembung, lalu geser

sedikit-sedikit pada frame satu sampai frame enam. Kembali ke scene, copy movie

clip gelembung dan paste pada layer background di beberapa tempat.

Gambar 3.2 Movie Clip Gelembung

Page 52: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

5. Pada layer ubur-ubur gamabrkan sebuah objek ubur- ubur. Sama dengan cara pada

nomor 4, ubah ubur-ubur menjadi movie clip dan gerakkan frame per frame.

Gambar 3.3 Movie Clip ubur-ubur

6. Pada layer judul, buatlah sebuah lingkaran kecil dan ubah menjadi movie clip.

Double klik pada movie clip tersebut dan buatlah empat layer pada movie clip

judul. Buat layer teks, horisontal, vertikal, dan link. Pada layer teks

tuliskan ”Animasi Kinematika Gerak Lurus” font Alien Encounters ukuran 51 dan

static text. Copy tulisan tersebut dan paste in place pada layer vertikal dan layer

horisontal. Pada layer vertikal, perbesar tulisan ke atas dengan motion tween,

sedangkan pada layer horisontal perbesar tulisan kesamping dengan menggunakan

motion tween. Pada layer link, buatlah button ”next” yang akan menuju pada link

menu. Tuliskan ActionScript berikut pada button ”next”

on (release)

{

loadMovieNum("menu.swf", 0);

}

Page 53: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.4 Movie Clip Judul

7. Pada layer max tuliskan ActionScript berikut:

fscommand("fullscreen",true);

8. Pada layer narator, masukkan suara rekaman yang sudah diimport ke library

dengan men-drag-nya ke stage.

9. Sama seperti layer narator, tetapi pada layer musik, yang didrag ke stage adalah

file musik.

3.3.2 Desain Menu

Halaman menu adalah tampilan animasi yang dituju tombol next pada animasi intro.

Halaman ini berisi judul dari pembelajaran yaitu ” Kinematika Gerak Lurus” yang

dianimasikan serta link-link menuju materi, soal, dan quis. Selain itu background dari

Page 54: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

halaman awal ini juga berupa animasi pemandangan bukit ketika turun hujan. Langkah-

langkah mendesain halaman menu ini adalah:

1. Buatlah sembilan buah layer masing-masing dengan nama background, latar,

bukit, rumput, bulan, awal, judul, link, sound.

2. Pada layer background, ganti kode warna background pada layer menjadi biru tua

dan buatlah sebuah segi empat dengan menggunakan rectangle tool pada tool box.

Pilih warna abu-abu sebagi fill color dan tanpa stroke color. Letakkan di stage

bagian bawah. Pada frame 1, tekan F9, dan tuliskan ActionScript di bawah ini:

_root.createEmptyMovieClip("jatuh", 1);

width = Stage.width*2.5;

with (jatuh)

{

lineStyle(1, 0xFFFFFF, 100);

lineTo(2, 10);

}

for (i=0; i<50; i++)

{

duplicateMovieClip(jatuh, "garis_hujan"+i, 10+i);

_root["garis_hujan"+i]._x = random(Stage.width);

_root["garis_hujan"+i]._y = random(Stage.height);

_root["garis_hujan"+i].kecepatan = random(30)+10;

_root["garis_hujan"+i]._alpha = random(80)+20;

}

Page 55: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

onEnterFrame = function ()

{

for (i=0; i<50; i++)

{

_root["garis_hujan"+i]._y += _root["garis_hujan"+i].kecepatan;

_root["garis_hujan"+i]._x+= _root["garis_hujan"+i].kecepatan/4;

if (_root["garis_hujan"+i]._x>Stage.width)

{

_root["garis_hujan"+i]._x = random(width)-Stage.width/2;

_root["garis_hujan"+i]._y = 0;

}

if (_root["garis_hujan"+i]._y>Stage.height)

{

_root["garis_hujan"+i]._y = 0;

_root["garis_hujan"+i]._x = random(width)-Stage.width/2;

}

}

};

3. Pada layer bukit, buat gambar bukit, tekan F8, pilih movie clip, dan beri nama

bukit. Pada frame satu insert keyframe, dan insert motion tween. Pada frame 300

insert frame.

Page 56: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.5 Movie Clip Bukit

4. Pada layer rumput, buat gambar rumput, tekan F8, pilih movie clip, dan beri nama

rumput. Pada frame satu insert keyframe, dan insert motion tween. Pada frame 300

insert keyframe.

5.

Gambar 3.6 Movie Clip rumput

6. Pada layer bulan buat lingkaran menggunakan oval tool dengan kode warna

#FFFFFF. Tekan Ctrl+F3. Add Filter Blur, Blur X dan Y = 15. Quality = low.

Page 57: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.7 Movie Clip Bulan

7. Pada layer awan, buat gambar awan. Ubah alpha menjadi 64%. Tekan Ctrl+F3

lalu add Filter Blur, dan ubah Blur X dan Y menjadi 20. Ubah awan menjadi

movie clip dengan menekan F8. Insert keyframe pada frame 1, insert motion tween,

Insert keyframe pada frame 300 dan geser awan ke kanan stage.

Gambar 3.8 Movie Clip Awan

8. Pada layer judul, buat tulisan ”KINEMATIKA GERAK LURUS” dengan

menggunakan text tool. Seleksi tulisan, kemudian tekan (Ctrl +B). Masih dalam

keadaan terseleksi tekan (Ctrl + Shift + D). Klik kanan layer 1. Klik delete layer.

Animasi dimulai dari dari huruf K. Insert keyframe di frame 6 dan 11. Beri motion

Page 58: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

tween di frame 1 dan 2. Klik keyframe 2 di frame 6, tampilkan panel transform,

centang pilihan Constrain, ganti persentase menjadi 300 %. Tekan Enter.

Lakukan langkah yang sama untuk setiap huruf tetapi insert keyframe menjadi

lebih banyak 1 keyframe dibanding huruf sebelumnya dengan kelang-kelang 5.

Gambar 3.9 Movie Clip Judul

9. Pada layer link, buat tulisan yang akan digunakan sebagai link ke animasi

berikutnya. Ada 5 link yang digunakan yaitu: Teori, Contoh Soal, Aplikasi, Quis

dan Exit. Ubah setiap tulisan menjadi tombol. Masukkan ActionScript sesuai

tujuan file. Pada tulisan teori, ketik ActionScript berikut:

on (release) {

loadMovieNum("teori.swf", 0);

}

10. Pada layer sound, masukkan file musik yang sudah diimport ke library dengan

men-drag-nya ke stage.

11. Sama seperti layer sound, tetapi pada layer narasi, yang didrag ke stage adalah file

rekaman narasi.

3.3.3 Desain Halaman Teori

Page 59: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Halaman teori ini berisi teori-teori yang berkaitan dengan Kinematika Gerak Lurus. Teori

ditampilkan dalam bentuk link yang di desain pada sebuah papan penunjuk judul teori.

Pengguna dapat memilih teori yang mereka inginkan dan teori akan muncul. Adapun

langkah-langkah mendesain halaman ini yaitu:

1. Buatlah 14 buah layer masing-masing dengan nama latar, matahari, awan, tiang,

judul, rumput, pilihan, kupu2, kupu3, deskripsi, home, action, sound, narator.

2. Pada layer latar ganti kode warna background pada layer menjadi biru langit dan

buatlah sebuah segi empat dengan menggunakan rectangle tool pada tool box.

Pilih warna biru langit sebagi fill color dan tanpa stroke color. Buatlah ukurannya

800 x 400 pixel.

3. Pada layer matahari klik frame 1 ganti warna fill color menjadi #FFFF00 dan

stroke dijadikan none gunakan rectangle tool. Untuk mebuat perputaran matahari

buat 8 kotak panjang lalu urutkan seperti gambar lalu tekan F8 dan beri nama

sun_mc. Buat 1 layer lagi dan beri nama bulat, klik di frame 1 layer: bulat dan

klik oval tool untuk membuat objek lingkaran klik kanan > insert keyframe di

frame 60 lalu klik klik kanan create motion tween di frame 30. Klik di frame 1

layer 1, klik kanan > insert keyframe di frame 60 lalu klik pada frame 30 , klik di

propertiesnya ubah Rotate = CW.

Page 60: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.10 Movie Clip Matahari

4. Pada layer awan buatlah 2 buah gambar awan, tekan F8 jadikan movie clip awan.

Klik ganda pada movie clip awan. Insert keyframe dan insert motion tween pada

frame 1. Insert keyframe pada frame 600.

5. Pada layer tiang, klik di frame 1 lalu gunakan rectangle tool lagi untuk membuat

tiang penunjuk arah , setelah selesai pembuatan tiangnya maka untuk pemberian

garis tiang dan arah gunakanlah line tool setelah itu tekan tombol F8 dan beri

nama tiang_mc

Page 61: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.11 Movie Clip Tiang

6. Pada layer judul, buatlah tulisan ”TEORI” dengan menggunakan text tool. Jadikan

movie clip dan ubah warna tiap huruf pada setiap frame dari frame 1 sampai 5.

Gambar 3.12 Movie Clip Teori

7. Pada layer rumput, klik rectangle tool ,untuk membuat rumput hijau dengan men-

drag-nya ke stage.

8. Pada layer pilihan, ganti fill color menjadi warna putih dan strokenya hitam lalu

tekan tombol F8 dan beri nama Kotaknama_mc dan copy menjadi 4 lalu

sesuaikan dengan gambar dan beri nama : Gerak, Jarak, Kecepatan, Percepatan,

GLB dan GLBB, dan Gerak vertikal.

9. Pada masing-masing kotak nama yang telah dibuat pada desain background ubah

setiap bagiannya menjadi movie clip dan beri nama sesuai nama yang ditulis pada

kotak nama tersebut.

10. Pada layer kupu2 dan kupu3, buatlah objek kupu-kupu. Untuk membuat objek

kupu-kupu yang bergerak dan terbang, pertama buatlah sebuah bentuk bulat

memanjang sebagai badan kupu-kupu. Seleksi badan kupu-kupu tersebut-> klik

kanan->convert to symbol->movie clip->ok. Setelah itu klik dua kali pada movie

Page 62: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

clip tersebut hingga masuk ke timeline movie clip kupu-kupu. Buat bentuk sayap

kupu-kupu dengan line tool dan ubah bentuk sayap kupu-kupu dengan free

transform pada tiap frame dari frame 1 sampai 6. Pada layer kupu2 dan kupu3

insert keyframe dan motion tween pada frame 1. Pada frame 100 geser kupu-kupu

ke kanan stage jika awalnya berada dikiri stage dan sebaliknya lalu insert

keyframe.

Gambar 3.13 Movie Clip Kupu-kupu

11. Pada frame deskripsi, frame satu ketik ActionScript berikut :

Stop();

Selanjutnya pada frame 2-7 tulis penjelasan di atas background rumput dari

masing-masing kotak nama dengan menggunakan Text Tool.

12. Pada layer home, buatlah tulisan ”home” dengan text tool dan ubah menjadi

button. Lalu ketikkan ActionScript berikut:

on (release)

{

loadMovieNum("menu.swf", 0);

Page 63: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

}

13. Pada layer Action dari frame 1-7 masing-masing tuliskan ActionScript:

Stop();

14. Pada layer sound, masukkan file musik yang sudah diimport ke library dengan

men-drag-nya ke stage.

15. Sama seperti layer sound, tetapi pada layer narator, yang didrag ke stage adalah

file rekaman narasi.

3.3.4 Desain Halaman Contoh Soal

Pada halaman ini dtampilkan contoh soal. Contoh soal terdiri dari tiga halaman animasi.

Animasi pertama yaitu animasi gerak lurus beraturan, animasi kedua yaitu animasi gerak

jatuh bebas, dan animasi ketiga yaitu animasi gerak vertikal keatas.

3.3.4.1 Animasi GLB

Langkah-langkah dalam pembuatan halaman GLB ini yaitu:

1. Buatlah delapan buah layer. Masing-masing layer diberi nama secara berurut

yaitu: latar, background, becak, soal, batu, link, sound dan narator.

Page 64: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2. Pada layer latar buatlah segi empat dengan rectangle tool dengan ukuran 800x400

pixel dengan warna cokelat.

3. Pada layer background, buatlah persegi panjang sebagai jalan tempat becak akan

berjalan dengan ukuran 800x100 pixel. Letakkan di stage bagian bawah dan beri

warna cokelat yang lebih tua.

4. Pada layer becak, buatlah movie clip becak. Letakkan di sisi kiri stage Insert

keyframe dan motion tween pada frame 1. Insert keyframe di frame 120 dan

pindahkan becak ke sisi kanan stage.

Gambar 3. 14 Movie Clip Becak

5. Pada layer soal tuliskan soal dengan text tool pada frame 1. Insert keyframe pada

frame 120 dan ketikkan penyelesaiannya.

Page 65: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

6. Pada layer batu buat gambar batu diatas jalan dengan menggunkan oval tool dan

line tool.

7. Pada layer link buatlah tulisan ”next” dengan text tool dan ubah menjadi button.

Lalu ketikkan ActionScript berikut:

on (release)

{

loadMovieNum("gerak jatuh bebas.swf", 0);

}

8. Pada Pada layer sound, masukkan file musik yang sudah diimport ke library

dengan men-drag-nya ke stage.

9. Sama seperti layer sound, tetapi pada layer narator, yang di-drag ke stage adalah

file rekaman narasi.

3.3.4.2 Animasi Gerak Jatuh Bebas

Langkah-langkah mendesain halaman ini yaitu:

1. Buatlah enam buah layer masing-masing dengan nama: latar, tanah, judul, link,

lagu, narator.

2. Pada layer latar, buatlah segi empat dengan rectangle tool dengan fill color biru

langit dengna ukuran 800x400 pixel. Import gambar pohon kelapa ke stage

Page 66: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

letakkan di sisi kiri stage. Disissi kanan stage tulis soal dan penyelesaian tentang

gerak jatu bebas.

3. Pada layer tanah, dengan menggunakan rectangle tool, buat gambar sebagai tanah.

Ganti warnanya menjadi cokelat tua. Buat buah kelapa dengan oval tool. Letakkan

di atas pohon kelapa. Ubah menjadi movie clip dengan tekan F8. Beri nama buah

kelapa. Lalu klik ganda pada buah kelapa tersebut dan beri motion tween.

Pergerakan dari pohon hingga menyentuh tanah. Pada frame buah kelapa telah

menyentuh tanah, masukkan suara yang ada di library sebagai efek suara.

Gambar 3.15 Movie Clip Buah Kelapa

4. Pada layer judul dengan menggunkan text tool tuliskan ”Gerak Jatuh Bebas” di

bagian tengah atas stage.

5. Pada layer link buat buatlah tulisan ”next” dengan text tool dan ubah menjadi

button. Lalu ketikkan ActionScript berikut:

on (release)

{

loadMovieNum("gerak vertikal.swf", 0);

}

6. Pada layer lagu drag file musik yang sudah di-import ke library.

Page 67: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

7. Pada layer narator, drag ke stage rekaman suara yang sudah di-import ke library

sebelumnya.

3.3.4.3 Animasi Gerak Vertikal

Langkah-langkah dalam mendesain halaman ini yaitu:

1. Membuat movie clip seorang siswa SMA.

Gambar 3.16 Movie Clip Siswa SMA

2. Buatlah enam buah layer yaitu: dasar, soal, anak, home, narator, dan musik.

Page 68: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

3. Pada layer dasar, buatlah segiempat berukuran 800x 400 pixel dengan rectangle

tool dan beri warna biru kehijau-hijauan. Insert frame di frame 126.

4. Pada layer soal di frame satu tuliskan judul dan soal. Pada frame 126 insert

keyframe dan tambahakan peyelesaian dibawah tulisan soal.

5. Pada layer anak frame satu, import movie clip siswa SMA ke stage dan insert

frame di frame 126.

6. Pada layer home, buatlah tulisan ”home” dengan text tool dan ubah menjadi

button. Lalu ketikkan ActionScript berikut:

on (release)

{

loadMovieNum("menu.swf", 0);

}

7. Pada layer narator, drag ke stage rekaman suara yang sudah diimport ke library.

8. Pada layer music, drag stage file musik yang sudah di-import ke library.

3.3.5 Desain Aplikasi

1. Insert tujuh layer. Masing-masing layer diberi nama layer latar, background, objek,

sun, dan action, help, sound dan narator.

Page 69: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2. Pada layer latar buat segi empat dengan ukuran 800x400 pixel yang menutupi ukuran

dokumen. Pilih warna biru langit.

3. Pada layer background, gambarkan sebuah pemandangan dengan tools yang ada pada

tool box. Tambahakan judul “Gerak Lurus Berubah Beraturan” pada layer

background dengan menggunakan text tool.

4. Pada layer objek, disebelah kiri stage buatlah teks kecepatan awal, percepatan, dan

waktu tempuh dengan menggunakan Text tool. Pada properties-nya pilih static text.

Disisi kanan teks tambahkan input text dengan text tool dan mengganti properties-

nya menjadi input text. Disisi kanan setiap input teks buatlah satuan dari masing-

masing variabel dengan text tool jenis static text. Pada sisi kanan stage buatlah rumus

GLBB dengan jenis static text. Dibawah rumus, buatlah teks ”jarak tempuh”. Di sisi

kanan teks ”jarak tempuh” buatkan sebuah input teks.Disisi kanan input teks buatlah

satuannya dengan menggunakan text tool jenis static text.

5. Import sebuah gambar mobil ke layer objek. Tekan F8, pilih movie clip dan beri nama

mobil_mc.

6. Di sisi bawah mobil, buatlah dua timbol yaitu tombol flat blue back dan flat blue play.

7. Tambahkan ActionScript pada tombol flat blue play tersebut:

on (release)

{

gotoAndPlay(2);

Page 70: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

}

Pada tombol flat blue black tambahkan ActionScript:

on (release)

{

gotoAndPlay(1);

}

8. Buat sebuah tombol menuju home pada layer objek dengan menggunakan text tool

dan ubah menjadi button. Ketikkan ActionScript berikut:

on (release)

{

loadMovieNum("menu.swf", 0);

}

9. Pada layer Help, Buat tulisan help dengan menggunakan text tool. Pada tombol hitnya

tulis keterangan cara memakai aplikasi di tengah stage.

10. Pada layer action, Layer Action dapat kita munculkan dengan menekan tombol F9.

Atau dengan cara lain pilih pada frame yang kita ingin tambahkan ActionScript, lalu

klik kanan dan pilih Action. Ketikkan ActionScript untuk frame 1, frame 2 dan frame

3.

ActionScript pada frame 1:

var x0 : Number;

var v0 : Number

var a : Number;

var t : Number;

var xt : Number;

var t_tempuh: Number;

Page 71: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

var t_awal : Number;

var delta : Number;

function inisialisasi()

{

mobil._x = 0;

x0 = mobil._x;

xt = 0;

v0 = 0;

vt = v0;

a = 0;

t=0;

t_tempuh = 0;

delta = 0.1;

}

inisialisasi();

stop();

Pada frame 2 tuliskan ActionScript berikut:

if (t <= t_tempuh)

{

mobil._x = x0 + v0*t + (1/2)*a*t*t;

vt = v0 + a*t;

xt = mobil._x - x0;

}

else

Page 72: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

{

xt=v0*t_tempuh+(1/2)*a*t_tempuh*t_tempuh;

vt=v0+a*t_tempuh;

stop();

}

Pada frame tiga tuliskan ActionScript berikut:

t = t + delta;

gotoAndPlay(2);

11. Pada frame narator, isikan file suara yang ada di library. Caranya yaitu pilih menu file

lalu import to library dan pilih file suara yang akan dimasukkan drag ke stage suara

rekaman yang telah diimport ke library.

3.3.6 Desain Quis

1. Buka aplikasi Adobe Flash CS 3. Ubah ukuran stage menjadi 800 x 400 pixel.

2. Buat sepuluh layer dan masing-masing layer beri nama dasar, background, timer,

mulai, soal, hit, kunci, label, suara, dan action.

Page 73: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

3. Pada layer soal, ketikkan soal latihan dimulai dari frame 2 sampai frame 14. Berarti

ada 13 soal yang akan diacak. Dari 13 soal ini akan ditampilkan 5 soal yang akan

diujikan.

4. Klik pada layer kunci, selanjutnya akan dibuat kunci jawaban untuk setiap soal.

Sama seperti soal, kunci jawaban juga didistribusikan per-frame. Soal dimulai dari

frame 2 sehingga untuk kunci jawaban juga dimulai dari frame 2. Klik keyframe 2

pada layer kunci, kemudian di panel Action ketikkan action untuk jawaban soal.

Lanjut sampai keyframe 14.

5. Selanjutnya akan ditambahkan tombol hit untuk diletakkan diatas pilihan

jawaban.Klik pada layer hit, pastikan posisi tombol hit berada diatas pilihan abjad

jawaban. Disini akan diberikan ActionScript pada tombol hit, yang fungsinya jika user

mengklik tombol ini, maka variabel jawaban akan diisi nilai string abjad yang diklik.

6. Selanjutnya butlah kotak dynamic text dengan nama variabel jawaban. Kotak ini

berfungsi untuk menampilkan jawaban yang dipilih user.

7. Kemudian lanjutkan untuk mendesain sistem acak soal. Klik pada layer action, pada

frame pertama ketiklah ActionScript berikut :

stop();

8. Selanjutnya buat data array untuk diisi dengan jumlah soal, yaitu 13 nomor.

Page 74: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

9. Selanjutnya adalah mendesain sistem evaluasi jawaban. Klik pada layer action, pada

frame satu ketikkan ActionScript yang fungsinya, pada saat pertama kali movie

dimainkan, playback akan berhenti di frame satu, variabel jawaban dan kunci diisi

nilai kosong.

10. Setelah itu akan dibuat tombol untuk melanjutkan soal, dan melakukan evaluasi

jawaban dan penilaian soal.

11. Selajutnya adalah membuat frame menang dan frame kalah. Jika user mendapat skor

lebih besar dari 40 ( yaitu : nilai 60, 80, dan 100 ) maka playback akan diperintahkan

berhenti di frame dengan label frame_menang. Dan jika user mendapat skor lebih

kecil dari 30 ( yaitu : nilai 20, 10, dan 0 ) maka playback akan diperintahkan berhenti

di frame dengan label frame_kalah. Letakkan movie Clip yang berbeda di frame

menang dan frame kalah.

Page 75: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 3.17 Movie Clip Menang

Gambar 3.18 Movie Clip Kalah

3.3.7 Desain Exit

Halaman exit ini adalah halaman untuk keluar dari aplikasi. Setelah semua animasi pada

halaman ini ditampilkan sekali, maka aplikasi akan tertutup secara otomatis. Adapun

langkah-langkah membuat halaman exit ini yaitu:

1. Buatlah lima buah layer masing-masing dengan nama latar, batu, sound, dan

create.

2. Pada layer latar buatlah segi empat ukuran 1200x500 pixel. Pilih fill color hijau

untuk menutupi lebar dokumen yang sama ukurannya dengan ukuran segi empat.

Page 76: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

3. Pada layer batu buatlah gambar sebuah batu berbentuk persegi panjang dengan

menggunakan rectangle tool. Ubah menjadi movie clip.

Gambar 3. 19 Movie Clip Batu

Klik ganda pada movie clip batu. Pada layer satu, insert keyframe pada frames

satu dimana batu berada iluar stage. Insert motion tween, lalu pada frame lima

insert keyframe dan pindahkan batu ke stage kanan. Pada properties-nya pilih

Rotate CW. Insert layer baru, copy Movie clip batu insert keyframe pada frames

lima dimana batu berada diluar stage. Insert motion tween, lalu pada frame

sepuluh insert keyframe dan pindahkan batu ke stage kanan. Susun batu hingga

membentuk gapura dengan cara mengulangi langkah tersebut. Satu batu satu layer.

Setelah selesai di sebelah kanan stage pilih insert > timeline effect> transition.

Pilihan ini akan menggandakan gapura di kiri stage.

4. Pada layer sound, drag file musik yang sudah di-import ke library ke stage.

5. Pada layer thanks buat tulisan ucapan terima kasih. Ubah menjadi movie Clip dan

pada frame 105 insert keyframe dan motion tween. Pada frame ini letakkan tulisan

Page 77: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

diluar bawah stage. Dan insert keyframe pada frame 130 dan letakkan tulisan

ditengah stage. Frame 106 insert blank keyframe dan Insert frame di frame 160.

6. Pada layer create buat tulisan keterangan pembuat. Ubah menjadi movie Clip dan

pada frame 140 insert keyframe dan motion tween. Pada frame ini letakkan tulisan

diluar bawah stage. Dan insert keyframe pada frame 155 dan letakkan tulisan di

tengah stage.

7. Masih di layer create, buat tulisan sembarang, ubah menjadi movie clip dan tulis

ActionScript berikut pada movie clip tersebut.

fscommand("quit",true);

Page 78: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3
Page 79: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 4

IMPLEMENTASI SISTEM

4.1 Hasil

4.1.1 Halaman Intro

Pertama kali kita membuka aplikasi pembelajaran ini maka tampilan yang akan muncul

adalah halaman intro. Halaman ini berisi tombol yang akan menuju ke halaman menu

seperti dibawah ini :

Page 80: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.1 Halaman Intro

4.1.2 Halaman Menu

Halaman ini berisi link-link yang dapat kita klik dan akan menuju ke halaman desain

animasi yang dimaksudkan. Link-link yang tersedia yaitu;

1. Teori

Page 81: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

2. Contoh Soal

3. Menghitung Jarak Tempuh

4. Quiz

5. Exit

Tampilannya adalah sebagai berikut:

Gambar 4.2 Halaman Menu

Page 82: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.1.3 Halaman Teori

Gambar 4.3 Halaman Teori

Halaman ini berisi teori-teori yang berkaitan dengan pelajaran kinematika gerak lurus.

Untuk menampilkan teori, pengguna harus mengklik tulisan-tulisan yang ada pada tiang

penunjuk. Jadi pengguna dapat memilih teori apa yang ingin dilihat. Selain itu, halaman

ini berisi gambar kincir angin berbentuk matahari yang berputar serta awan yang terus

Page 83: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

berjalan. Ketika pengguna memilih teori yang akan disampaikan, akan muncul suara yang

membacakan isi teori. Jadi pengguna dapat melihat dan mendengar secara bersamaan.

Diharapkan belajar secar audiovisual ini dapat mengoptimalkan proses menginngat siswa.

4.1.4 Halaman GLB

Page 84: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.4 Halaman GLB

Halaman ini berisi contoh menghitung jarak tempuh becak. Becak akan berjalan dari kiri

stage ke kanan stage. Penyelesaian soal tidak langsung muncul. Penyelesaian baru

muncul setelah becak tidak terlihat lagi di stage. Pada halaman ini terdapat tombol yang

menuju contoh soal selanjutnya.

4.1.5 Halaman Gerak Jatuh Bebas

Page 85: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.5 Halaman Gerak Jatuh Bebas

Halaman ini berisi gambar sebuah kelapa yang jatuh dari pohonnya. Gambar ini

menunjukkan gerak jatuh bebas yang ada pada penjelasan teori. Halaman ini juga

memberi tahu penerapan dari rumus yang telah disampaikan sebelumnya. Ketika buah

kelapa jatuh, ditunjukkan variabel apa yang dapat digunakan untuk menjawab pertanyaan

yang diberikan.

Page 86: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.1.6 Halaman Gerak Vertikal

Gambar 4.6 Halaman Gerak Vertikal

Page 87: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Halaman ini berisi animasi seorang siswa SMA yang melempar bola yang dipegangnya

keatas. Bola yang dilempar ditangkap lagi oleh sang siswa. Pertama kali dijalankan

penyelesaain tidak langsung terlihat. Penyelesaian baru muncul setelah bola kembali ke

tangan siswa tersebut. Halaman ini juga berisi tombol yang akan menuju kembali ke

halaman menu.

4.1.7 Halaman Aplikasi

Page 88: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.7 Halaman Aplikasi

Halaman ini berisi aplikasi penghitung jarak. Jika pengguna memasukkan angka ke dalam

kotak input, kemudian pengguna mengklik tombol play, makan animasi akan berjalan.

Animasi yang berjalan adalah animasi sebuah mobil yang berjalan sesuai dengan jarak

yang dihitung. Penghitung jarak akan berjalan secara otomatis ketika tombol play di klik.

Jadi semakin besar angka yang dimasukkan, semakin lama mobil berjalan dan semakin

lama penghitungnya berjalan. Halaman ini juga memiliki tombol ”help” untuk

Page 89: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

memunculkan keterangan cara menggunakan aplikasi. Selain itu juga terdapat

tombol ”home” untuk kembali ke menu.

4.1.8 Kuis

Gambar 4.8 Halaman Awal Kuis

Page 90: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Halaman ini berisi soal-soal yang akan menguji pemahaman siswa atau pengguna setelah

teori disampaikan. Kuis ini menggunakan waktu. Soal yang diberikan adalah lima soal.

Jika pengguna mampu menjawab minimal tiga soal dengan benar, maka pengguna akan

menang. Pengguna yang menang akan menuju frame menang, dan yang kalah menuju

frame kalah. Tetapi tidak boleh lebih dari 3 menit. Jika satu menit telah habis maka

animasi kan menunjukkan nilai yang pengguna peroleh selama tiga menit. Untuk

memulainya klik tombol ”mulai”

4.1.8.1 Animasi setelah klik tombol mulai

Page 91: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.9 Halaman Animasi Soal Kuis

Pada halaman soal ini, user harus menghitung jawaban dan memilih jawaban yang

disediakan. Setelah merasa yakin, user dapat menekan tombol lanjut untuk maju ke soal

selanjutnya. Jawaban masih dapat diganti-ganti sebelum menekan tombol lanjut.

Page 92: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.1.8.2 Tampilan Ketika nilai <=40

Gambar 4.10 Halaman Kalah

Page 93: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Ketika user kalah, yaitu nilainya kurang dari enam puluh. Pada halaman ini tersedia link

untuk kembali ke halaman awal. Halaman ini langsung memberi tahu nilai yang diperoleh.

Jadi user dapat mengetahui berapa soal yang dapat dijawabnya dengan benar.

4.1.8.3 Tampilan jika Nilai>=60

Page 94: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Gambar 4.11 Halaman Menang

Gambar 4.8 tersebut muncul jika user menang. User yang menang akan tahu nilainya

berapa, sebab jika user menang bukan berarti jawabannya adalah benar semua. Sehingga

user khususnya siswa dapat lebih melatih diri dengan mengerjakan soal-soal fisika yang

lain.

Page 95: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.1.9 Halaman Exit

Gambar 4.12 Halaman Exit

Page 96: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

Halaman ini akan menutup aplikasi secar otomatis tetapi dengan menampilkan halaman

yang terlihat diatas terlebih dahulu.

4.2 Pembahasan

Animasi ini dapat dijalankan dengan menggunakan Flash Player. Namun selain itu

animasi ini juga dapat dijalankan dengan menggunakan browser. Adobe Flash Cs3

professional ini dapat digunakan pada komputer yang telah memenuhi spesifikasi

tertentu. Spesifikasi tersebut adalah:

1. Prosesor

- Microsoft Windows: Intel Pentium 3 atau 4

- Macintosh: Power PC (G3, G4, atau G5)

2. RAM

- Microsoft Windows: 192 disarankan minimal 256 MB

- Macintosh: 192 disarankan minimal 256 MB

3. Sistem operasi

- Microsoft Windows: Windows 2000 atau windows XP

- Macintosh: Mac Os X 10.2.4, 10.2.5, 10.2.6, 10.2.7.

Page 97: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4. Hardisk Kosong

- Microsoft Windows: 146 MB

- Macintosh: 146 MB

5. Kartu VGA

- Microsoft Windows: 1024 x 768

- Macintosh: 1024 x 768

Dari hasil animasi pembelajaran Fisika yang telah dibuat ini kita dapat

dikemukakan beberapa hal yang berkaitan dengan aplikasi ini. Aplikasi ini masih

memiliki beberapa kekurangan dari segi hasil yang kita dapatkan. Selain itu, aplikasi ini

juga mempunyai kelebihan.

4.2.1 Kelebihan Aplikasi yang Telah Dibuat

1. Memberikan media pembelajaran yang menarik bagi siiswa dengan aplikasi yang

full color sehingga siswa tidak merasa jenuh

2. Aplikasi ini lebih murah dibanding belajar dengan alat peraga

Page 98: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

4.2.2 Kekurangan Aplikasi

1. Animasi yang ditampilkan masih berupa animasi 2 dimensi sehingga terlihat tidak

begitu nyata seperti film-film animasi yang telah banyak beredar.

2. Animasi ini bersifat statis. Perubahan informasi yang ditampilkan harus di ubah

dari file .fla nya

Page 99: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3
Page 100: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Kesimpulan yang dapat diambil dari uraian yang telah dibahas yaitu:

1. Animasi ini dapat digunakan sebagai media pembelajaran interaktif khususnya

dalam mata pelajaran Fisika topik Kinematika Gerak Lurus.

2. Tahapan umum dalam pembuuatan animasi pembelajaran yaitu, penentuan materi

yang akan disampaikan, perancanngan desain dan penggabungan antara desain

dan materi.

3. Animasi dengan Adobe Flash dapat menjadi lebih menarik dan lebih efisien

dengan penggunaan ActionScript.

4. Dalam mempublikasikan flash sebaiknya jadikan file tersebut menjadi file HTML

agar komputer yang tidak mempunyai flash player tetap dapat melihat hasil

animasi.

Page 101: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

5.2 Saran

Saran yang dapat penulis berikan berhubungan denga aplikasi yang dibuat ini adalah:

1. Jika telah selesai dalam pembuatan animasi pembelajaran, sebaiknya uji lagi

untuk memastikan animasi telah berjalan sesuai dengan yang diharapkan serta

informasi yang ditampilkan telah terjamin kebenarannya.

2. Buatlah back up dari animasi pembelajaran yang telah selesai untuk menghindari

segala kemungkinan yang tidak diinginkan

3. Bagi lembaga pendidikan sebaikya mulai menggunakan animasi sebagai alternatif

pembelajaran disamping penggunaan alat peraga.

4. Dalam pembuatan animasi sebaiknya dilengkapi dengan video dan dapat juga

digunakan gabungan dengan aplikasi pembuat animasi lain yang dapat membuat

objek tiga dimensi agar animasi menjadi lebih menarik.

Page 102: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

DAFTAR PUSTAKA

Astuti, Dwi. 2006. Macromedia Flash 8. Yogyakarta: Penerbit Andi

Diginnovac, Arry Maulana, Karina Nasution. Draw and Animate with Flash. 2008.

Jakarta: Elex Media Komputindo.

Diginnovac, A. Zainul Fanani, Diana Hardiyanti.2009. Membuat Game Aritmetika

dengan Flash. Jakarta: Elex Media Komputindo.

Istiono, Wirawan. 2008. Education Game with Flash 8.0. Jakarta: Elex Media

Komputindo.

Madcoms. 2004. Macromedia Flash MX. Yogyakarta: Penerbit Andi.

Muis, Abdul. 2006. Perang Siasat Fisika Praktis. Yogyakarta: Kreasi Wacana.

Stevano, Bayu. 2006. Animasi Teks dengan Flash 8. Jakarta: Elex Media Komputindo.

Subagya, Hari. Agus Taranggono. 2007. Sains Fisika 1 SMA/MA. Jakarta: Bumi Aksara.

Syarif, Arry Maulana, Diginnovac. 2008. Tip dan Trik Membuat Fitur Game Flash.

Jakarta: Elex Media Komputindo.

http://warungflash.com. Diakses pada tanggal 28 Desember 2009.

Page 103: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

L

A

M

P

I

R

A

N

Page 104: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

KEMENTRIAN PENDIDIKAN NASIONAL

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, Fax. (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : ADELINA PINEM

Nomor Stambuk : 072406123

Judul Tugas Akhir : Animasi Kinematika Gerak Lurus dengan Adobe Flash CS3 Professional

Dosen Pembimbing : Dra. Elly Rosmaini Siregar, M.Si

Tanggal Mulai Bimbingan : 22 Desember 2009

Tanggal Selesai Bimbingan : 6 Mei 2010

No. Tanggal Asisten

Bimbingan

Pembahasan pada Asistensi

Mengenai, pada Bab :

Paraf Dosen

Pembimbing

Keterangan

1 22 Desember 2009 Ajukan Proposal Judul

2 29 April 2010 Bab 1-5

3 4 Mei 2010 Revisi Bab 1-5

4 7 Mei 2010 ACC Bab 1-5

5 19 Mei 2010 Uji Program

6 24 Mei 2010 Uji Program

*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui, Disetujui,

Ketua Departemen Matematika USU Pembimbing Utama/

Penanggung Jawab

Dr.Saib Suwilo,M.Sc Dra. Elly Rosmaini Siregar, M.Si

NIP. 19640109 198803 1 004 NIP. 19600520 198503 2 002

Page 105: Animasi Kinematika Gerak Lurus Dengan Adobe Flash CS 3

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir

Program Diploma 3 Ilmu Komputer/Statistika :

Nama : ADELINA PINEM

N I M : 072406123

Program Studi : Ilmu Komputer

Judul Tugas Akhir : Animasi Kinematika Gerak Lurus dengan Adobe Flash CS3

Professional

Telah melaksanakan tes program Tugas Akhir Mahasiswa tersebut di atas pada tanggal :

Mei 2010

Dengan Hasil : SUKSES / GAGAL

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau

Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Mei 2010

Dosen Pembimbing / Kepala Lab. Komputer

Program Studi D-3 Ilmu Komputer/Statistika

Dra. Elly Rosmaini Siregar, M.Si

NIP. 19600520 198503 2 002