Perencanaan dan pembangunan aplikasi E-COMMERCE berbasis web pada toko baju miw miw store medan

(1)

Tombol Halaman Awal

on (release) {gotoAndPlay("frame 2"); }

Tombol Halaman Pilihan Menu Utama

1. Menu

Halaman Buah Pada Tombol Menu

(2)

8. Pepaya

Kembali Ke Menu Utama

on(release){gotoAndPlay(2); }

(3)

DAFTAR PUSTAKA

Panduan Tatacara Penulisan Skripsi & Tugas Akhir. 2015. Dokumen Nomor:

Akad/05/2005. Medan: Fakultas Matematika dan Ilmu Pengetahuan Alam

Universitas Sumatera Utara.

Veronica. 2012. Aneka Buah dan Manfaatnya Bagi Kesehatan. Jawa tengah:

V-media.

Yudhiantaro, Dhani. Membuat Animasi Web dengan Macromedia Flash

Professional 8.

(http://melianii9b26p2.blogspot.co.id/2012/08/kelebihan-macromedia-flash-1.html)

Di akses pada tanggal 18 April 2016 pukul 20.15.

www.rickyeka.com Di akses pada tanggal 18 April 2016 pukul 19.46

(4)

BAB 3

PERANCANGAN ANIMASI 3.5 Perancanan Animasi

Perancangan Animasi merupakan bagan yang menggambarkan alur kerja dari

aplikasi animasi kandungan vitamin pada buah, Perancangan merupakan tahap

yang sangat penting dalam pembuatan animasi pembelajaran yang dimulai dari

perancangan yang matang akan memberikan hasil akhir yang baik juga. Dalam

pembuatan animasi terlebih dahulu harus ditentukan tujuan dari animasi yang

akan dibuat karena bentuk desain dan isi dari animasi tersebut sangat tergantung

pada tujuan animasi itu sendiri.

Flowchart

Flowchart adalah gambaran dalam bentuk diagram alir dan algoritma dalam suatu program yang menyatakan alur program dalam menyelesaikan suatu masalah.

Flowchart dapat memerikan gambaran yang efektif, jelas, dan ringkas tentang prosedur logic. Teknik penyajian yang bersifat grafis jelas akan lebih baik dari

(5)

yang bersifat kompleks. Flowchart atau yang sering disebut bagan alur merupakan

metode untuk menggambarkan tahap-tahap penyelesaaian masalah (prosedur),

beserta aliran data dengan simbol-simbol standar yang mudah dipahami.

Tujuan utama penggunaan Flowchart adalah untuk menyederhanakan rangkaian

proses atau prosedur untuk memudahkan pemahaman pengguna terhadap

informasi tersebut. Oleh karena itu design sebuah Flowchart harus ringkas, jelas

(6)

Table 3.1 Simbol-simbol Flowchart

Dalam animasi pembelajaran kandungan vitamin pada buah ini penulis juga sudah

(7)

No

Gambar 3.1 Flowchart Animasi

3.3 M

endesain Tampilan Awal Animasi Pembelajaran

Desain tampilan awal animasi adalah sebagai berikut :

Gambar 3.2 Rancangan Tampilan awal animasi Cara pembuatannya adalah sebagai berikut :

Start

Selamat datang di pembelajaran kandungan vitamin pada 13 Buah

(8)

1. Buka lembar kerja Macromedia Flash 8,

Kemudian pilih Flash document.

2. Buat tiga layer pada timeline, yaitu layer

background, layer action, dan layer sound.

3. Untuk layer awal pembuatan

backgroound klik file pilih import lalu pilihimportto libary kemudian pilih gambar yang ingin di jadikan background pilih open setelah itu akan

secara otomatis masuk kedalam library kerja kita dan untuk menggunakan

gambar yang telah kita import tinggal tarik gambar tersebut kedalam stage

kerja kita.

4. Untuk membuat tampilan nama

masukkan teks dari menu Tools lalu pilih Text tool atau dengan shortcut

dengan menekan T.

5. Untuk membuat tampilan selamat datang

juga dengan masukkan teks dari menu Tools lalu ketikkan huruf S dan

pilih selection tool atau menekan V kemudian klik kanan pada huruf S

tersebut pilih convert to simbol lalu pilih movie Clip setelah itudouble clik

pada S klik kanan pada frame lalu tekan T dan ketikkan huruf selanjutnya.

Begitu selanjutnya sampai selesai menjadi kalimat Selamat Datang di

Animasi Pembelajaran Kandungan Vitamin Pada 13 Buah dan pada frame

terakhir letakkan action stop ();.

6. Untuk melanjutkan ke halaman

(9)

Click here setelah itu jadikan menjadi button dan pada action scrip nya berikan program seperti berikut

On(release){ gotoAndStop(2); }

3.4 Mendesain Halaman Start

Desain tampilan halaman Start adalah sebagai berikut :

Gambar 3.3 Rancangan Tampilan Halaman Start

Cara Pembuatannya adalah Sebagai berikut :

1. Masukkan background yang telah ada pada liberary.

2. Untuk membuat lets start pilih Text tool (T) masukan teks.

3. Untuk membuat Menu juga dengan mengguanakn Text tool kemudian

tekan V untuk menormalkan kemudian Convert to simbol kemudian pilih

(10)

}

4. Untuk membuat Profil Juga dengan mengguanakn Text tool kemudian

tekan V untuk menormalkan kemudian Convert to simbol kemudian pilih

button, setelah menjadi button berikan action scrip berikut : On(release){

gotoAndStop(17); }

5. Untuk membuat Latihan juga dengan menggunakan Text tool kemudian

tekan V untuk menormalkan kemudian Convert to simbol kemmudian pilih

button, setelah menjadi button berikan action scrip berikut : On(release){

3.5 Mendesain Isi Menu

Lets Start to Learn

Jeruk Tomat Pisang Pir

Jambu Merah Strawberry Belimbing

Pepaya Mangga Apel Melon

Semangka Wortel

(11)

Gambar 3.4 Rancangan Tampilan Isi Menu Cara pembuatannya adalah sebagai berikut :

1. Klik kanan pada keyframe dan kemudian insert blank keyframe

2. Masukkan background yang telah diimport ke library

3. Pilih Rectangel tool (R) setelah itu diluar stage kemudian tekan V dan Klik

pada kotak yang telah dibuat dan ganti warna dengan kode warna, setelah itu

ubah convert to symbol menjadi grafik dan tarik kedalam stage dan susun

bentuknya kemudian untuk memasukkan teks pilih text tool (T) dan ketikkan

jeruk setelah itu ubah teks menjadi button dan double klik untuk memasukkan

suara button dan mengubah ukuran ketika di klik, kemudian beri action scrip

berikut untuk menjalankan kedalam penjelasan dari buah jeruk.

On(release){

gotoAndStop(4); }

Apabila dipilih tombol buah jeruk maka akan muncul tampilan sebagai

berikut.

Gambar 3.5 Rancangan Tampilan animasi Buah Jeruk

Cara pembuatannya adalah sebagai berikut : Gambar Buah

Jeruk _{Kandungan Vitamin pada Buah Jeruk}

Penjelasan manfaat buah pada tubuh

(12)

1. Klik kanan pada frame sebelumnnya kemudian insert blank

keyframe.

2. Pilih background yang telah diimport ke library.

3. Pilih gambar buah yang telah diimport kedalam library kemudian

susun bentuknya.

4. Pilih text tool untuk membuat kandungan vitamin pada buah serta

penjelasan yang akan manfaat buah tersebut.

5. Untuk membuat tombol home tarik gambar home yang telah

diimport kedalam library kemudian letakkan posisinya di pojok

atas sebelah kanan, kemudian convert to symbol menjadi button

dan berikan actionscrip berikut :

On(release){

gotoAndStop(3); }

4. Pilih Rectangel tool (R) setelah itu diluar stage kemudian tekan V dan

Klik pada kotak yang telah dibuat dan ganti warna dengan kode warna,

setelah itu ubah convert to symbol menjadi grafik dan tarik kedalam stage

dan susun bentuknya kemudian untuk memasukkan teks pilih text tool (T)

dan ketikkan tomat setelah itu ubah teks menjadi button dan double klik

untuk memasukkan suara button dan mengubah ukuran ketika di klik,

kemudian beri action scrip berikut untuk menjalankan kedalam penjelasan

dari buah Tomat.

(13)

gotoAndStop(5); }

Apabila dipilih tombol buah Tomat maka akan muncul tampilan sebagai

berikut :

Gambar 3.6 Rancangan Tampilan Animasi Buah Tomat

Cara pembuatannya adalah sebagai berikut :

1. Klik kanan pada frame sebelumnnya kemudian insert blank keyframe.

susun bentuknya.

5. Untuk membuat tombol hometarik gambar home yang telah diimport

kedalam library kemudian letakkan posisinya di pojok atas sebelah Gambar Buah

Tomat

Kandungan Vitamin pada buah Tomat

Penjelasaan Manfaat Buah pada Tubuh

(14)

kanan, kemudian convert to symbol menjadi button dan berikan

dan ketikkan Pisang setelah itu ubah teks menjadi button dan double klik

dari buah Pisang.

Kandungan Vitamin Pada Buah Pisang

Gambar Buah Pisang H _O

(15)

Gambar 3.7 Rancangan Animasi Buah Pisang

1. Klik kanan pada frame sebelumnnya kemudian insert blank keyframe.

susun bentuknya.

kedalam library kemudian letakkan posisinya di pojok sebelah kanan,

kemudian convert to symbol menjadi button dan berikan actionscrip

berikut :

dan ketikkan Pir setelah itu ubah teks menjadi button dan double klik

(16)

penjelasan dari buah Pir.

Gambar 3.8 Rancangan Tampilan Animasi Buah Pir Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

kedalam library kemudian letakkan posisinya di pojok atas sebelah

actionscrip berikut : On(release){

gotoAndStop(3);

Gambar Buah Pir

Kandungan Vitamin pada buah Pir

Penjelasan maanfaat buah pada Tubuh

H O M

(17)

}

dan ketikkan Jambu Merah setelah itu ubah teks menjadi button dan

double klik untuk memasukkan suara button dan mengubah ukuran ketika di klik, kemudian beri action scrip berikut untuk menjalankan kedalam

penjelasan dari buah Jambu Merah.

On(release){

gotoAndStop(8); }

Apabila dipilih tombol buah Jambbu Merah maka akan Muncul tampilan

Sebagai berikut :

Gambar 3.9 Rancangan Tampilan Animasi Buah Jambu Merah

1. Klik kanan pada frame sebelumnnya kemudian insert blank keyframe. Gambar buah Jambu

Merah

Kandungan Vitamin pada buah Jambu Merah

Penjelasaan manfaat buah pada tubuh

(18)

susun bentuknya.

5. Untuk membuat tombol home tarik gambar home yang telah diimport

kedalam library kemudian letakkan posisinya di pojok bawah sebelah

dan ketikkan Strawberry setelah itu ubah teks menjadi button dan double

klik untuk memasukkan suara button dan mengubah ukuran ketika di klik,

dari buah Strawberry.

On(release){

(19)

Apabila dipilih tombol buah Strawberry Maka akan muncul tampilan

sebagai berikut :

ggggg

Gambar 3.10 Rancangan Tampilan Animasi Buah Strawberry

susun bentuknya.

kanan, kemudian convert to symbol menjadi button dan berikan Kandungan Vitamin Pada Buah Srtawberry

Penjelasan Manfaat pada buah Tubuh

(20)

dan ketikkan Belimbing setelah itu ubah teks menjadi button dan double

dari buah Belimbing.

On(release){

Apabila dipilih tombol buah Belimbing maka akan Muncul tampilan sebagai berikut :

Gambar 3.11 Rancangan Tampilan Animasi Buah Belimbing Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

penjelasan yang akan manfaat buah tersebut. Gambar

buah Belimbing

Kandungan Vitamin pada Buah Belimbing

Penjelasan maanfaat buah pada Tubuh

(21)

dan ketikkan pepaya setelah itu ubah teks menjadi button dan double klik

dari buah Pepaya.

Kandungan vitamin pada buah Pepaya

(22)

Gambar 3.12 Rancangan Tampilan Animasi Buah Pepaya Cara pembuatannya adalah sebagai berikut :

1. Klik kanan pada frame sebelumnya kemudian insert blank keyframe.

susun bentuknya.

kiri, kemudian convert to symbol menjadi button dan berikan

dan ketikkan Mangga setelah itu ubah teks menjadi button dan double klik

untuk memasukkan suara button dan mengubah ukuran ketika di klik, Gambar Buah

(23)

dari buah Mangga.

On(release){

Apabila dipilih tombol Buah Mangga maka akan Muncul tampilan sebagai

Berikut :

Gambar 3.13 Rancangan tampilan Animasi Buah Mangga Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

kedalam library kemudian letakkan posisinya di pojok atas sebelah Gambar Buah Mangga Kandungan Vitamin pada buah Mangga

Penjelasan manfaat buah pada Tubuh H

O M

(24)

kiri, kemudian convert to symbol menjadi button dan berikan

setelah itu ubah convertto symbol menjadi grafik dan tarik kedalam stage

dan ketikkan Apel setelah itu ubah teks menjadi button dan double klik

dari buah Apel.

Penjelasaan Manfaat Buah Pada Tubuh

(25)

Gambar 3.14 Rancangan Tampilan Animasi Buah Apel Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

dan ketikkan Melon setelah itu ubah teks menjadi button dan double klik

(26)

dari buah Melon.

On(release){

Apabila dipilih tombol Buah Melon akan Muncul Tampilan sebagai

Berikut :

Gambar 3.15 Rancangan Tampilan Animasi Buah Melon Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

actionscrip berikut : Gambar

Buah Melon

Kandungan Vitamin Pada Buah Melon

Penjelasaan Manfaat Buah Pada Tubuh

(27)

On(release){

gotoAndStop(3); }

14. Pilih Rectangel tool (R) setelah itu diluar stage kemudian tekan V dan

dan ketikkan Semangka setelah itu ubah teks menjadi button dan double

dari buah Semangka.

On(release){

Apabila dipilih tombol Semangka Maka akan Muncul Tampilan sebagai

Berikut :

Gambar Buah

(28)

Gambar 3.15 Rancangan Tampilan Animasi Buah Semangka Cara pembuatannya adalah sebagai berikut :

susun bentuknya.

5. Untuk membuat tombol home tarik gambar home yang telah di

import kedalam library kemudian letakkan posisinya di pojok bawah

sebelah kiri, kemudian convert to symbol menjadi button dan berikan

gotoAndStop(3); }

15. Pilih Rectangel tool (R) setelah itu diluar stage kemudian tekan V dan Klik

pada kotak yang telah dibuat dan ganti warna dengan kode warna, setelah

itu ubah convert to symbol menjadi grafik dan tarik kedalam stage dan

susun bentuknya kemudian untuk memasukkan teks pilih text tool (T) dan

ketikkan Wortel setelah itu ubah teks menjadi button dan double klik

(29)

dari buah Wortel.

On(release){

Apabila dipilih tombol Buah Wortel maka akan muncul tampilan sebagai

Berikut :

Gambar 3.17 Rancangan Tampilan Animasi Buah Wortel

susun bentuknya.

kedalam library kemudian letakkan posisinya di pojok tengah bawah, Gambar Buah

Wortel

Kandungan Vitamin pada Buah Wortel

Penjelasaan Manfaat buah Pada Tubuh

(30)

kemudian convert to symbol menjadi button dan berikan actionscrip

berikut :

On(release){

gotoAndStop(3); }

16. Untuk membuat tombol kembali kehalaman sebelumnya maka dibuat

tombol Menu, untuk membuat tombol menu tersebut maka kita gunakan

Text tool (T) pada Toolbox kemudian ketikkan Menu, setelah itu ubah Menu menjadi button dengan convert tosymbol kemudian double klik

untuk membuat suara pada button menu tersebut, kemudian berikan action

scrip berikut : On(release){

gotoAndStop(17);

}

3.6 Mendesain Isi Profil

Gambar 3.18 Rancangan Tampilan isi Profil Cara pembuatannya adalah sebagai berikut :

Foto Isi Profil Penulis

(31)

1. Klik kanan kembali

pada frame dan insert blank keyframe.

2. Pilih background yang

telah diimport ke library dan tarik ke stage.

3. Untuk membuat Foto

pilih Foto yang telah diimport ke library kemudian tarik

kedalam stage dan sesuaikan letak dan bentuknya.

4. Untuk membuat Fropil

penulis pilih Text tool (T) pada Toolbox dan ketikkan isi data

yang dimuat dalam profil penulis.

5. Untuk membuat tombol

home tarik gambar home yang telah

diimportkedalamliberarykemudian letakkan posisinya di

tengah bawah, kemudian convert to symbol menjadi button dan

berikan actionscrip berikut:

On(release){

gotoAndStop(2); }

3.7 Mendesain Isi Latihan

Setelah belajar mari kita kerjakan soal latihan berikut ini

Nama Kotak penginputan nama

(32)

Gambar 3.19 Rancangan Tampilan Isi Memulai Soal Latihan Cara Pembuatannya adalah sebagai berikut :

1. Klik kanan kembali

pada frame dan insert blank keyframe.

2. Pilih background yang

telah diimport ke library dan tarik ke stage.

3. Pilih Text tool (T)

pada Toolbox untuk membuat teks untuk mengerjakan soal latihan.

4. Pilih text tool (T) pada

Toolbox untuk membuat teks nama.

5. Pilih Textool (T) pada

Toolbox untuk membuat kontak penginputan nama kemudian

biarkan tetap kosong dan pada bagian properties ubah bentuk teks

menjadi input teks dan berikan keterangan juga pada bagian

variabel.

6. Pilih rectangle pada

toolbox untu membuat kotak dan bentuk kotak diluar stage dan

ubah warna menjadi seperti yang diinginkan kemudian convert

tosymbol daan ubah bentuk menjadi grapich seret kedalam stage, kemudian pilih Tex tool (T) untuk membuat start dan ubah bentuk

menjadi button dengan convert to symbol dan pada bagian

properties berikan keterangan mulai,

7. Untuk membuat

(33)

liberary kemudian letakkan posisinya di pojok bawah sebelah kiri, kemudian convert to symbol menjadi button dan berikan

gotoAndStop(2): }

8. Setelah dipilih start

maka akan muncul soal-soal latihan sebanyak 10 soal dan akan ada

hitungan mundur sebelum nilai keluar, setelah nilai keluar maka

akan ada juga keterangan nilai yang diperoleh sudah tuntas atau

belum, kemudian ada pilihan ulangi latihan dan akan kembali ke

halaman mulai latihan.

(34)

IMPLEMENTASI

4.1 Hasil

4.1.1 Tampilan Halaman Pembuka

Gambar 4.1 Tampilan Pembuka

Pilih CLICK HERE untuk melanjutkan animasi kehalaman selanjutnya.

(35)

Gambar 4.2 Tampilan Start

Klik tombol MENU untuk masuk ke halaman menu kemudian klik menu kembali

untuk kembali ke halaman start.

Klik tombol PROFIL untuk masuk ke halaman isi Profil kemudian klik button

home untuk kembali ke halaman start.

Klik tombol LATIHAN untuk masuk ke halaman Latihan kemudian klik button

(36)

Gambar 4.3 Tampilan Isi Menu

Klik nama buah yang dipilih untuk masuk ke penjelasan kandungan vitamin pada

buah.

(37)

Gambar 4.4 Tampilan Penjelasan Buah

Klik button home untuk kembali kehalaman isi menu melihat penjelasan buah

lainnya.

(38)

Gambar 4.5 Tampilan Isi Profil

Pilih button untuk kembali kehalaman start.

(39)

Gambar 4.6 Tampilan Isi Latihan

Masukkan nama dan klik start untuk memulai menjawab soal latihan, seperti

gambar tampilan dibawah ini atau klik button home untuk kembali kehalaman

start.

(40)

Gambar 4.7 Tampilan Soal Latihan

Pilih jawaban yang paling benar dengan memilih Option jawaban dan akan masuk

ke soal berikutnya.

(41)

Gambar 4.8 Tampilan Hitung Mundur

(42)

Gambar 4.9 tampilan Nilai

Pilih Kembali Ke Latihan untuk kembali ke Menu Latihan.

(43)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dalam Penulisan Tugas akhir ini telah dijelaskan proses perancangan animasi

hingga pembuatan animasi pembelajaran kandungan vitamin pada buah, dan

berdasarkan pembahasan dan evaluasi dari setiap bab maka diperoleh beberapa

kesimpulan sebagai berikut :

1. Pengguna dan pemanfaat animasi pembelajaran ini dapat memberikan

kemudahan kepada siswa untuk mengetahui kandungan vitamin dari buah

yang sering mereka konsumsi serta mengetahui manfaatnya bagi tubuh.

2. Animasi ini juga dibuat untuk menguji pemahaman mengenai materi

dengan menjawab beberapa soal latihan yang disediakan sehingga

pembelajaran lebih efesien.

3. Dalam pembuatan animasi diperlukan imajinasi agar dapat membuat

tampilan animasi yang menarik dan tidak membosankan.

4. Berdasarkan pengalaman penulis, Macromedia flash 8 adalah Perangkat

lunak yang dapat digunakan membuat animasi, karena tampilannya yang

sederhana dan mudah digunakan terutama bagi pemula, juga memiliki

(44)

5.2 Saran

Dari kesimpulan yang telah diambil, maka dapat dikemukakan saran-saran untuk

animasi pembelajaran adalah :

1. Sebaiknya animasi dijadikan pilihan untuk menggantikan alat peraga dan

pemberian materi yang menonton dalam proses belajar mengajar.

2. Dalam mempublikasikan Flash sebaiknya jadikan file tersebut menjadi file

HTML agar komputer yang tidak mempunyai Flash Player tetap dapat

melihat hasil animasi.

3. Jika telah selesai dalam pembuatan animasi pembelajaran sebaiknya uji

lagi untuk memastikan animasi telah berjalan sesuai dengan yang

(45)

BAB 2

LANDASAN TEORI

2.1 Animasi

Animasi adalah sususan gambar diam (static graphics) yang dibuat efek sehingga

seolah-olah tampak bergerak. (Dhani Yudhiantoro,2006)

Animation is a process of recording and playing back a sequence of stills

to achieve the illusion of continues motion, yang artinya adalah sebuah proses

merekam dan memakai kembali serangkaian gambar statis untuk mendapatkan

sebuah ilusi pergerakan. Berdasarkan arti harfiah, animasi adalah menghidupkan

suatu usaha untuk menggerakkan sesuatu yang tidak bias bergerak sendiri. Secara

garis besar, animasi komputer dibagi menjadi dua kategori, yaitu :

a. Computer Assisted Animation, animasi pada kategori ini biasanya

menunjuk pada sistem animasi dua dimensi, yaitu mengkomputerisasi

proses animasi tradisional yang menggunakan gambaran tangan.

Komputer diguanakan untuk pewarnaan, penerapan virtual kamera dan

penataan data yang digunakan dalam sebuah animasi.

b. Computer Generated Animation, pada katergori ini biasanya digunakan

untuk animasi tiga dimensi dengan 3D seperti 3D Studio Max, Autocad

(46)

(Ibiz Fernandez McGraw-Hill,2011)

Terdapat dua metode untuk membuat sebuah renteten animasi dalam

Flash, yaiutu Animasi Frame by Frame dan Animasi Tweened (Tweebed

Animation). Animasi frame frame by frame adalah cara klasik menyusun animasi.

Di sini Anda harus membuat secara berbeda gambar-gambar dalam tiap frame,

sedangkan dalam Animasi Tweened, Anda cukup membuat frame awal dan frame

akhir kemudian membiarkan flash membuat frame-frame diantara keduanya.

Flash akan membuat variasi besar kecilnya ukuran, rotasi, warna, atau

atribut-atribut objek lainnya secara merata di antara frame awal dan frame akhir untuk

membuat penampilan gerakan.(Dhani Yudhiantoro,2006)

Animasi Sebagai Media Pembelajaran

Media Animasi dalam Pembelajaran bertujuan untuk memaksimalkan efek visual

dan memberikan interaksi berkelanjutan sehingga pemahaman bahan ajar

meningkat. Media Animasi alam Pembelajaran memiliki kemampuan untuk dapat

memaparkan sesuatu yang rumit atau komplek untuk dijelaskan dengan hanya

gambar dan kata-kata saja. Dengan kemampuan ini maka Media animasi dapat

ddigunakan untuk menjelaskan suatu materi yang secara nyata tidak dapat terlihat

oleh mata, dengan cara melakukan visualisasi maka materi yang dijelaskan dapat

(47)

Media Animasi dalam Pembelajaran yang digunakan baik pada penjelasan

konsep maupun contoh-contoh, selain berupa animasi statis auto-run atau

diaktifkan melalui tombol, juga bisa berupa animasi interaktif dimana pengguna

(siswa) diberi kemungkinan berperan aktif dengan merubah nilai atau posisi

bagian tertentu dari animasi tersebut. Urutan kegiatan belajarnya dapat meliputi :

Melihat contoh, mengerjakan soal latihan, menerima informasi, meminta

penjelasan, dan mengerjakan soal/evaluasi.

Berikut merupakan beberapa kepentingan atau kelebihan Media Animasi dalam

Pembelajaran:

1. Media Animasi dalam Pembelajara mampu menyampaikan ssuatu

konsep yang kompleks secara visual dan dinamik.

2. Media Animasi digital mampu menarik perhatian pelajar dengan

mudah. Animasi mampu menyampaikan suatu pesan dengan lebih baik

dibanding penggunaan media yang lain.

3. Animasi digital juga dapat digunakan untuk membantu menyediakan

pembelajaran secara maya.

4. Media Animasi dalam Pembelajaran mampu menawarkan satu media

yang lebih menyenangkan. Animasi mampu menarik perhatian,

meningkatkan motivasi serta merangsang pemikiran pelajar yang lebih

berkesan.

5. Persembahan secara Visual dan dinamik yang disediakan oleh

teknologi animasi mampu memudahkan dalam proses penerapan

konsep ataupun demonstrasi.

(48)

2.3 Flash

2.3.1 Sekilas tentang Flash

Macromedia Flash adalah sebuah program yang ditunjukan kepada para desainer

maupun programer yang bermaksud merancang animasi untuk pembuatan

halaman web, presentasi untuk tujuan bisnis maupun proses pembelajaran hingga

pembuatan game interaktif serta tujuan-tujuan lain yang lebih spesifik.

Untuk itu, Flash dilengkapi dengan tool-tool (alat-alat) untuk membuat

gambar yang kemudian akan dibuat animasinya. Selanjutmya, animasi disusun

dengan menggabungkan adegan-adegan animasi hingga menjadi movie.

Langkah terakhir adalah menerbitkan karya tersebut ke media yang

dikehendakinya.

Flash adalah program animasi berbasis vektor yang bisa menghasilkan file

kecil (ringan) sehinggga mudah diakses pada halaman web tanpa

membutuhkan waktu loading yang lama. Flash menghasilkan file dengan

ekstensi .FLA Setelah file tersebut siap untuk dimuat ke halaman web,

selanjutnya file akan disimpan dalam format .SWF agar dapat dibuka tanpa

menginstal perangkat lunak Flash, tetapi cukup menggunakan Flash Player

yang dipasang pada browser berbasis Windows.

Pada tahun 1997 Macromedia membeli sebuah program gambar untuk web

yang diberi nama FutureSplash dari perusahaan bernama FutureWave.

Keistimewaanya FutureSplash adalah kemampuannya untuk menggerakan

(49)

web. Perogram inilah yang merupakan ciikal bakal Macromedia Flash yang

kita kenal sekarang. Macromedia melkukan inovasi besar-besaran sehingga

waktu tegangan munculnya Flash versi 1 hingga hingga versi 4 berlangsung

hanya dalam kurun waktu 2 tahun.

Tahun 2005 Macromedia mengeluarkan Flash basic 8 dan Flash

professional 8. Masing-masing ditunjukan untuk desainer pembuat animasi

serta pengguna yang memerlukan fasilitas lanjutan baik untuk para

pengembang (pembuat program baik dari sisi artistik maupun database) dan

pembuat aplikasi interaktif yang memerlukan fasilitas lebih dari sekedar

fasilitas dasar. Mungkin ini merupakan strategi pasar agar mereka yang ingin

mengenal Flash bisa memperoleh paket dengan harga murah dengan membeli

Flash Basic 8, sementara versi lengkapnya dijual dengan harga lebih mahal.

(Yudhiantoro 2006)

2.3.2 Macromedia Flash 8

Macromedia flash merupakan program grafis animasi web yang diperoduksi oleh

Macromedia corporation. Macromedia Flash pertama kali diperoduksi pada tahun

1996. Pada awal produksi, Macromedia Flash merupakan Software untuk

membuat animasi sederhana berbasis .gif. seiring dengan perkembangannya,

Macromedia Flash mulai digunakan dalam pembuatan desain situs web.

Macromedia Flash telah diperuduksi dengan beberapa versi terbaru yang sekarang

beredar dipasaran adalah Macromedia Flash versi 8 dirilis tahun 2005.

Seiring dengan perkembangannya, Macromedia Flash telah diperoduksi

dengan beberapa versi. Versi yang kini banyak digunakan adalah Macromedia

(50)

pasaran yakni Adobe Flash CS3 yang hak ciptanya telah dimiliki oleh Adobe

bukan Macroedia Corp lagi.

Keunggulan Macromedia Flash dibanding program lain yang sejenis,

antara lain :

1. Dapat membuat tombol intteraktif dengan sebuah movie atau objek

lain.

2. Dapat membuat perubahan transparansi warna dalam movie.

3. Dapat membuat perubahan animasi 1 bentuk ke bentuk lain.

4. Dapat membuat gerakan animasi dengan mengikuti alur yang telah

ditetapkan.

5. Dapat dikonveresni dan dipublikasikan ke dalam beberapa tipe,

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

Untuk membuka program Macromedia Flash 8 Anda dapat melakukan cara

berikut:

Pilih Start > Program > Macromedia > Flash 8

Atau

Pilih Ikon Flash 8 Pada dekstop ( Layar monitor ).

(51)

Gambar 2.1 Tampilan Awal Progarm Flash Pilih Create new > Flash Document untuk memulai membuat file baru.

Pilih Open a Recent New > Open untuk membuka file flash.

Berikut merupakan tampilan standar jendela kerja Flash 8, saat Anda memulai

memuat file baru.

Gambar 2.2 Jendela Kerja Flash

(52)

a. Menu bar yang berisi kumpulan menu atau perintah-perintah yang

digunakan dalam flash 8.

b. Toolbar yang merupakan panel berbagai macam tool. Tool-tool tersebut

dikelompokkan menjadi empat kelompok: Tools; berisi tombol-tombol

untuk membuat dan mengedit gambar, View; untuk mengatur tampilan

lembar kerja, Colors; menentukan warna yang dipakai saat mengedit;

(53)

Table 2.1 Simol-simbol Toolbar

c. Timeline atau garis waktu merupakan komponen yang digunakan untuk

mengatur atau mengontrol jalannya animasi.

d. Stage disebut juga layar atau panggung, dimana stage digunakan untuk

memainkan objek yang akan diberi animasi.

e. Panel yang meruakan komponen penting dalam Flash 8 seperti Properties,

Filters & Parameters, Action, Liberary, Color dan Align & Info &

Transform.

f. Panel Properties yang akan berubah tampilan dan fungsinya mengikuti

bagian mana yang sedang aktif.

g. Liberary mempunyai fungsi sebagai perpustakaan symbol/media yang

digunakan dalam animasi yang sedang dibuat. (Bambang Adriyanto,2010)

2.4 Kandungan Vitamin Pada Buah

Vitamin adalah suatu zat senyawa yang kompleks yang sangat dibutuhkan oleh

tubuh kita yang berfungsi untuk membantu pengaturn atau proses kegiatan tubuh.

Tanpa vitamin manusia, hewan, dan mahluk hidup lainnya tidak dapat melakukan

aktifitas hidup, dan kekurungan vitamin dapat menyebabkan mempebesar peluang

terkena penyakit pada tubuh kita.

Vitamin (bahasa inggris: vital anime, vitamin) adalah sekelompok

senyawa organic berbobot molekul kecil yang memiliki fungsi vital dalam

metabolisme setiap organisme yang tidak dapat dihasilkan oleh tubuh. Buah

adalah salah satu jenis makan yang memiliki kandungan gizi, vitamin dan mineral

(54)

adalah beberapa buah yang memiliki kandungan Vitamin yang dibutuhkan oleh

menurunkan kadar kolestrol dalm darah.

3. Buah Belimbing

Belimbing mengandung vitmin C dan provitamin A dan Belimbing dapat

membantu memperlancar pencernaan makanan.

4. Buah Jambu Merah

Jambu merah mengandung vitamin c dan provitamin A dan Belimbing

dapat membantu memperlancar pencernaan makanan.

5. Buah jeruk

Jeruk mengandung Vitamin A, B1, B2, dan C dan jeruk mengandung anti

kanker bagi tubuh.

6. Buah Mangga

Mangga mengandung vitamin A, E dan C dan mangga dapat bertindak

sebagai disifektan dan dapat membersihkan darah.

7. Buah Melon

(55)

zat anti kanker dan antioksidan.

8. Buah Pepaya

Pepaya mengandung vitamin c dan provitamin A dan Pepaya dapat

membantu memecah serat makanan dalam sistem pencernaan melancarkan

saluran pencernaan makanan.

9. Buah Pir

Pir mengandung vitamin C dan provitamin A dan Pir mengandung

antioksidan yang baik menjaga kesehatan.

10. Buah Pisang

Pisang mengandung Vitamin A,B1,B2, dan C dan Pisang dapat membantu

mengurangi asam lambung dan menjaga keseimbangan air dalam tubuh.

11. Buah Semangka

Semangka mengandung vitamin c dan proviitamin A dan Semangka dapat

menjadi anti alergi.

12. Buah Strawberry

Strawverry mengandung provitamin A, vitamin B1, B dan C dan

Strawberry mengandung antioksidan untuk melawan zat radikal bebas.

13. Buah Wortel

Wortel kaya akan vitamin A dan Wortel baik untuk menjaga kesehatan

(56)

BAB 1 PENDAHULUAN

1.1 Latar Belakang

Buah-buahan adalah pemberian alam yang sangat berharga untuk

kehidupan.Berbagai macam buah, dengan beragram nutrisi dan manfaatnya,

memberikan banyak konstribusi bagi kesehatan tubuh. Aneka vitamin dan

mineral yang terkandung dalam buah-buahan membuat kita tetap sehat,

dengan cara alami, dan rasa yang nikmat.

Buah-buahan mengandung serat makanan yang melimpah, sehingga dapat

memperlancar sistem pencernaan, menangkal kolestrol dan lemak dalam

tubuh, sekaligus menyediakan energi. Buah-buahan sangat rendah kalori dan

lemak. Buah-buahan menyediakan vitamin dan mineral esensial bagi tubuh,

yang dapat meningkatkat kesehatan secara keseluruhan. Buah-buahan

menyediakan antioksidan alami bagi tubuh, khususnya yang mengandung

vitamin C, vitamin E, polifenol, selenium, zinc dan senyawa antioksidan

lainnya. Buah-buahan bisa membantu mengatasi banyak masalah kesehatan,

antara lain untuk menurunkan kolestrol, mencegah konstipasi (susah Buang

Air Besar), mengontrol gula darah, menurunkan berat badan, hingga

mencegah penuaan diri.

Berbagai penelitian dan para ahli gizi menyarankan untuk selalu

memasukkan buah-buahan kedalam diet sehari-hari, untuk menyediakan

(57)

Berdasarkan permasalahan diatas maka penulis tertarik untuk membuat

animasi di bidang pendidikan. Animasi yang penulis akan buat adalah yang

berhubungan dengan buah-buahan. Dimana dalam kehidupan sehari-hari buah

juga memegang peranan penting dalam kehidupan, yaitu untuk melengkapi

kebutuhan vitamin yang dibutukan oleh tubuh. Vitamin yang terkandung pada

buah memiliki nutrisi penting yang dibutuhan tubuh untuk tumbuh dan

menjalankan fungsinya dengan baik.

Oleh karena itu, penulis mengajukan sebuah proposal yang berjudul

“ANIMASI KANDUNGAN VITAMIN PADA 13 BUAH

MENGGUNAKAN MACROMEDIA FLASH 8 ”.

1.2 Identifikasi Masalah

Masalah yang diangkat disini adalah bagaimana membuat animasi

buah-buahan khususnya kandungan yang terdapat pada setiap buah yang akan

muncul. Dimana animasi tersebut akan memudahkan siswa untuk menghataui

kandungan vitamin pada buah dan dapat menghataui kebutuhan vitamin dalam

tubuh serta mengetahui kandungan vitamin yang mereka konsumsi dengan

cara yang lebih menarik.

1.3 Tujuan dan Manfaat

Tujuan perancangan animasi ini adalah :

Merancang Animasi kandungan vitamin pada buah menggunakan Macromedia

(58)

Manfaat yang diperoleh dalam pembuatan animasi ini adalah:

1. Mempermudah siswa untuk mengetahui kandungan vitamin pada buah

yang dikonsumsi.

2. Animasi ini juga dapat digunakan sebagai permainan yang mendidik

dan menambah pengetahuan siswa.

3. Memberikan kesempatan bagi penulis untuk mengembangkan

kreativitas dalam dunia animasi di tengah perkembangan teknologi

komputer saat ini.

1.4 Batasan Masalah

Agar pembahasan tidak menyimpang maka perlu dibuat suatu batasan masalah

yaitu sebagai berikut:

1. Menampilkan animasi kandungan vitamin pada 13 buah dan manfaat pada

buah tersebut.

2. Pembuatan animasi ini menggunakan Macromedia Flash 8 .

1.5 Metodologi Penelitian

Penelitian ini akan dilaksanakan dengan mengikuti beberapa langkah yang

akan dilakukan penulis, yaitu :

1. Melakukan tinjauan pustaka untuk mendapatkan informasi berupa

data, tulisan, keterangan melalui buku atau sumber informasi

(59)

2. Mencari informasi terkini melalui internet sehingga data yang di

dapat tidak ketinggalan dan mengikuti perkembangan.

3. Melakukan observasi kepada narasumber yang mengerti tentang

animasi dan kandungan vitamin pada buah.

4. Merancang animasi pembelajaran kandungan vitamin pada buah

untuk sekolah dasar.

a. Merancang Animasi menggunakan Macromedia Flash 8

b. Merancang Cerita Animasi yang akan dituangkan

c. Pembuatan Ilustrasi

d. Pembuatan Model Animasi

e. Model yang dianimasikan

1.6 Sistematika Penulisan

Sistematika penulisan Tugas Akhir ini disajikan kedalam bentuk terstruktur

dan sistematik sehingga mempermudah pembaca untuk memahami isi Tugas

Akhir.

Adapun sistematika Tugas Akhir ini sebagai berikut :

BAB 1 : PENDAHULUAN

Pada bab ini diuraikan secara ringkas pembahasan

tentang Latar Belakang, Indentifikasi Masalah,

Tujuan dan Manfaat, Batasan Masalah, Metode

Penelitian dan Sistematika penulisan.

(60)

Bab ini menjelaskan landasan teori singkat tentang

hal-hal yang berhubungan dengan judul yaiutu teori

yang berhubungan dengan Macro media flash 8 dan

kandungan vitamin pada buah.

BAB 3 : PERANCANGAN SISTEM

Bab ini menguraikan analisis sistem dan

perancangan dari animasi kandungan vitamin pada

buah yang akan dibangun.

BAB 4 : IMPLEMENTASI

Bab menguraikan hasil tampilan dari animasi yang

dirancang dan pembahasan hasilnya beserta

kekurangan dan kelebihan sistem yang dibuat.

BAB 5 : KESIMPULAN DAN SARAN

Bab ini merupakan bab terakhir yang mencakup

kesimpulan dan saran dari hasil penelitian yang

(61)

ANIMASI KANDUNGAN VITAMIN PADA 13 BUAH MENGGUNAKAN MACROMEDIA FLASH 8

ABSTRAK

Pentingnya mempelajari dan memahami tentang fungsi dan manfaat kandungan

vitamin yang terdapat di dalam buah-buahan membuat siswa sekolah dasar (SD)

harus mengerti dan mengetahui pelajaran tersebut namun banyak siswa enggan

mempelajari nya, mereka lebih senang bermain atau menggangu temannya belajar

daripada mengikuti pelajaran tersebut. Untuk mengatasi masalah ini,

digunakanlah suatu aplikasi pembelajaran komputer yang menarik dan interaktif.

Aplikasi pembelajaran komputer tersebut dikembangkan dengan menggunakan

perangkat lunak Macromedia Flash 8. Dengan animasi yang dihasilkan dari

metode Motion Tween, Frame by Frame dan ActionScript akan membuat tampilan

aplikasi ini menjadi lebih menarik. Dengan demikian, diharapkan agar para siswa

sekolah dasar tidak akan merasa enggan ataupun malas lagi dalam mempelajari

(62)

ANIMASI KANDUGAN VITAMIN PADA 13 BUAH MENGGUNAKAN MACROMEDIA FLASH 8

TUGAS AKHIR

ANDREAS GINTING 132406193

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUAMTERA UTARA

(63)

TUGAS AKHIR

ANIMASI KANDUNGAN VITAMIN PADA 13 BUAH MENGGUNAKAN MACROMEDIA FLASH 8

Diajukan sebagai salah satu syarat dalam menyelesaikan

Pendidikan Program Studi Diploma III Teknik Informatika

ANDREAS GINTING 132406193

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

(64)

PERNYATAAN

ANIMASI KANDUNGAN VITAMIN PADA 13 BUAH

MENGGUNAKAN MACROMEDIA FLASH 8

TUGAS AKHIR

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

beberapa kutipan dan ringkasan yang masing – masing disebut sumbernya.

Medan, Juni 2016

(65)

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang telah

memberikan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan

penyusunan tugas akhir ini dengan baik dalam waktu yang telah ditetapkan.

Tugas akhir ini dibuat sebagai salah satu syarat yang harus dipenuhi untuk

menyelesaikan pendidikan D3 pada Program Studi Teknik Informatika Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

Dalam menyelesaikan tugas akhir ini, penulis banyak mengalami kesulitan

namun berkat bimbingan, dorongan, dan bantuan dari rekan-rekan

mahasiswa-mahasiswi Program Studi Teknik Informatika FMIPA USU, dosen, dan semua

pihak yang terkait dalam penyelesaian kajian tugas akhir ini, hal tersebut dapat

penulis atasi dengan baik.

Selama pengerjaan kajian tugas akhir ini hingga selesai penulis banyak

mendapatkan bantuan, dorongan, dan motivasi baik secara langsung maupun tidak

langsung. Maka pada kesempatan ini, penulis banyak mengucapkn terima kasih

kepada :

1. Ibu Dr. Mardiningsih, M.Si, selaku Dosen Pembimbing yang telah banyak

memberikan bimbingan kepada penulis selama penulisan tugas akhir ini.

2. Orang Tua yang selalu mendoakan dan memberikan dukungan, baik dari segi

materi maupun non materi.

3. Bapak Dr. Sutarman, M.Sc, selaku Dekan Fakultas Matematika dan Ilmu

(66)

4. Ibu Dr. Elly Rosmaini, M.Si selaku Ketua Program Studi D3 Teknik

Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sumatera Utara.

5. Dewi Indah Cahaya, Angela Bulan A Siagian, Linawati Br Sitorus , dan

Rinanda Manurung, selaku rekan Tugas Akhir sekaligus sahabat yang selalu

memberikan kerja sama dan dukungannya.

6. Abdul Mahmud, Reza Alkafi dan Teman-teman kos lainnya yang sangat

membantu dalam penyusunan tugas akhir ini.

7. Teman-teman D3 TI 2013, KOM D 2013 serta rekan-rekan lainnya yang

telah memberikan bantuan, doa dan dukungan selama proses penyelesaian

tugas akhir ini.

Penulis menyadari bahwa dalam penyusunan tugas akhir ini masih banyak

terdapat kekurangan dan kesalahan, maka dari itu penulis mengharapkan kritik

dan saran yang dapat membangun. Akhir kata, saya berharap semoga tugas akhir

ini dapat memberi manfaat dan wawasan maupun pengetahuan kita.

Medan, Juni 2016

Penulis,

Andreas Ginting

(67)