Animasi Pengenalan Anatomi Tubuh Manusia Menggunakan Adobe Flash CS3

onorelease){

loadMovieNumo“menu.swf”, 0); }

Layer Exit onorelease){

fscommando"quit","true"); }

Layer Music onorelease){

stopAllSoundso); }

2. Halaman Menu Layer Background Stopo);

//membuat sebuah movie clip kosong yang berisi jatuh _root.createEmptyMovieClipo"jatuh", 1); //mengatur width sama dengan width stage dikali 2.5

width = Stage.width*2.5; with ojatuh) {

//membuat garis

lineStyleo1, 0x660033, 100); lineToo2, 10);

}

//membuat variable i dengan nilai kurang dari 250 for oi=0; i<50; i++) {

//duplikasi jatuh dengan nama baru garis_hujan+i

duplicateMovieClipojatuh, "garis_hujan"+i, 10+i); //posisi x garis_hujan sama dengan nilai acak panjang stage

_root["garis_hujan"+i].kecepatan = randomo30)+10; //nilai alpha`garis hujan sama dengan nilai acak 80 ditambah 20

_root["garis_hujan"+i]._alpha = randomo80)+20; }

onEnterFrame = function o) {

//membuat variable i dengan nilai kurang dari 250 for oi=0; i<50; i++) {

//posisi x garis hujan ditambah variable kecepatan

_root["garis_hujan"+i]._y += _root["garis_hujan"+i].kecepatan; //posisi y garis hujan ditambah variable kecepatan yang dibagi 4

_root["garis_hujan"+i]._x += _root["garis_hujan"+i].kecepatan/4; //jika posisi x garis hujan lebih dari panjang stage

if o_root["garis_hujan"+i]._x>Stage.width) {

//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2 _root["garis_hujan"+i]._x = randomowidth)-Stage.width/2;

//posisi y garis hujan berada di koordinat 0 _root["garis_hujan"+i]._y = 0; }

//jika posisi y garis hujan lebih dari lebar stage if o_root["garis_hujan"+i]._y>Stage.height) { //posisi y garis hujan berada di koordinat 0

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

//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2</em>

_root["garis_hujan"+i]._x = randomowidth)-Stage.width/2; } } }; Layer Anatomi onorelease){ loadMovieNumo“anatomi.swf”, 0); }

Layer Bagian Sistem Anatomi onorelease){

loadMovieNumo“gbr_anatomi.swf”, 0); }

Layer Intro onorelease){

loadMovieNumo“intro.swf”, 0); }

Layer Exit onorelease){

fscommando"quit","true"); }

3. Halaman Anatomi Layer Video

onorelease){

nextFrameo); }

4. Halaman Bagian Sistem Anatomi 4.1 Layer sistem kerangka

on orelease){

loadMovieNumo"kerangka1.swf", 0); }

Next onorelease){

gotoAndPlayo2); }

loadMovieNumo"gbr_anatomi.swf", 0); }

4.2 Layer sistem otot onorelease){

loadMovieNumo"sistem otot.swf", 0); }

Next onorelease){

loadMovieNumo"sistem peredaran darah.swf", 0); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0); }

4.3 Layer sistem peredaran darah on orelease){

loadMovieNumo"sistem peredaran darah.swf", 0); }

Next onorelease){

nextFrameo); }

Back onorelease){

Next onorelease){

loadMovieNumo"sistem indera.swf", 0); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0); }

4.5 Layer sistem indera onorelease){

loadMovieNumo"sistem indera.swf", 0); }

Next onorelease){

nextFrameo); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0); }

4.6 Layer sistem pencernaan onorelease){

loadMovieNumo"sistem pencernaan.swf", 0); }

nextFrameo); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0); }

4.7 Layer sistem urinaria onorelease){

loadMovieNumo"sistem urinaria.swf", 0); }

Next onorelease){

nextFrameo); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0);}

4.8 Layer sistem reproduksi onorelease){

loadMovieNumo"sistem reproduksi.swf", 0); }

Next onorelease){

nextFrameo); }

4.9 Layer sistem saraf onorelease){

loadMovieNumo"sistem syaraf.swf", 0); }

Next onorelease){

nextFrameo); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0);}

4.10 Layer sistem endoktrin onorelease){

loadMovieNumo"sistem endoktrin.swf", 0); }

Next onorelease){

nextFrameo); }

Back onorelease){

loadMovieNumo"gbr_anatomi.swf", 0); }

onorelease){

nextFrameo); }

Layer Start onorelease){

nextFrameo); }

Layer Replay onorelease){

gotoAndstopo4); }

Layer soal Soal 1 Stopo); score = 0;

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

nextFrameo); };

b.onRelease = functiono) { score += 10; nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { score += 10; nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

Soal 3 stopo);

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { score += 10; nextFrameo); };

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { score += 10; nextFrameo); };

d.onRelease = functiono) { score += 10; nextFrameo); };

Soal 5 stopo);

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

score += 10; nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { score += 10; nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

Soal 7 stopo);

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

nextFrameo); };

b.onRelease = functiono) { score += 10; nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

score += 10; nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

Soal 9 stopo);

onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {

score += 10; nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

score += 10; nextFrameo); };

b.onRelease = functiono) { nextFrameo); };

c.onRelease = functiono) { nextFrameo); };

d.onRelease = functiono) { nextFrameo); };

Layer Nilai ifoskor <=70){

hasil='Nilai kamu rendah, belajar lagi!!' }

ifoskor>=70){

hasil='Selamat kamu lulus!!' }

Madoms. 2008. Adobe Flash CS3 Profesional. Yogyakarta: Penerbit Andi. Madoms. 2011. Adobe Flash Pro CS5. Yogyakarta: Penerbit Andi.

Vaughan, Tay. 2006. Multimedia Making It Work Edisi 6 bahasa Indonesia. Yogyakarta: Penerbit Andi.

Yudhiantoro, Dhani. 2003. Macromedia Flash MX. Yogyakarta: Penerbit Andi. http://id.wikipedia.org/wiki/Adobe_Flash. Diakses pada tanggal 07 Maret 2013 http://janiansyah.wordpress.com/2009/05/15/pengertian-multimedia. Diakses pada tanggal 07 Maret 2013

http://201065054trie.blogspot.com/2011/01/anatomi-tubuh-manusia.html. Diakses pada tanggal 05 Maret 2013

http://fk.ui.ac.id/ page=content.view&alias=departemen_anatomi diakses pada tanggal 30 April 2013

http://www.pustakasekolah.com/anatomi-tubuh-manusia.html diakses pada tanggal 30 April 2013

http://.wordpress.com/about/animasi-flash/ diakses pada tanggal 23 April 2013 http://namiraputri.wordpress.com/2011/04/03/flash-cs3-professional. Diakes pada tanggal 20 Mei 2013

PERANCANGANBSISTEMB B

B B 3.1.BBRancanganBSistemByangBakanBDibangunB B

Sistem yang akan dibangun adalah dengan menggunakan animasi. Animasi harus memenuhi spesifikasi tertentu. Spesifikasi yang dimaksud merupakan bagian dari prggram yang berhubungan langsung dengan user. Spesifikasi animasi ini juga menjelaskan tentang langkahklangkah pembuatan animasi yang bertujuan untuk membuat prggram animasi menjadi menarik.

Rancangan animasi ini menggambarkan segala sesuatu yang terlihat pada sayer

mgnitgr, yaitu yang meliputi pembuatan gambar, teks, pemberian suara, pembuatan efek dan pembuatan interaktif animasi yang menggunakan ActionScript. Adapun rancangan animasi yang penulis buat dalam aplikasi ini, yaitu tampilan yang menarik dan tidak terlalu berlebihan, dukungan suara atau audig, bermanfaat, dan interkatif. Pembuatan animasi ini menggunakan teknik yang sederhana didukung dengan

ActionScript yang sangat membantu dalam penyederhanaan hasil publikasi fsash yang semaksimal mungkin sehingga didapat gbjek yang dinamis. Penggunaan ActionScript

3.2.BBDiagramBalirBprogramBB B B Yes Ng Yes Ng Yes

GambarB3.1BFlowchart /BAlurBProgramBSistemBAnatomiBTubuhBManusiaB B

B

Start Intrg Opening

Bagian sistem anatgmi

Exercise

End Menu Utama

Sub

Menu Anatgmi

Sub Menu k Sistem kerangka

k Sistem Otgt

k Sistem Peredaran Darah k Sistem pernapasan k Sistem indera k Sistem pencernaan k Sistem urinaria k Sistem reprgduksi k Sistem saraf k Sistem Endgktrin

Sub Menu

a. Start

Prggram pertama kali dijalankan. b. Menu utama

Setelah diprgses start, menu utama yang terdapat adalah materikmateri yang dibahas pada aplikasi seperti anatgmi, bagian sistem anatgmi, exercise, dan dimenu ini ada tgmbgl exit.

Isi dari menu ini adalah: c. Menu anatgmi

Jika inputan yang dipilih anatgmi maka akan ditampilkan pengertian dari anatgmi disertai dengan suatu videg mengenai anatgmi tersebut.

d. Menu bagian sistem anatgmi

Jika inputan yang dipilih bagian sistem anatgmi, maka akan ditampilkan berupa icgn anatgmi yang terdiri dari 10 bagian sistem anatgmi yang masingkmasing bagian bila diklik akan menampilkan penjelasannya.

e. Menu exercise

Jika inputan menu exercise yang dipilih maka akan menampilkan sgalksgal yang berhubungan dengan materi anatgmi, sgal berupa mustipse choice. Dan dapt melihat hasil skgr dari jawabannya diakhir sgal.

B B

3.3.BBPerancanganBAplikasiB B

Setiap halaman terdiri dari beberapa tgmbgl yang berfungsi untuk memudahkan pengguna untuk memilih menu pembahasan yang diinginkan disertai dengan animasi teks, gambar, dan musik. Berikut skema halaman aplikasi:

B

3.3.1.BBPerancanganBhalamanBintroBopeningB B

Pada awal aplikasi terdapat tgmbgl enter untuk menuju ke halaman menu utama dan terdapat tgmbgl exit untuk keluar dari aplikasi. Dan pada halaman ini juaga terdapat tgmbgl gff musik jika user ingin menghentikan music yang berjalan gtgmatis apabila aplikasi dijalankan.

B B B B B B B

GambarB3.2BRancanganBIntro OpeningBB B

3.3.2.BBPerancanganBhalamanBmenuB B

Pada halaman ini terdapat 3 kateggri yaitu tgmbgl anatgmi, tgmbgl bagian sistem, dan tgmbgl exercise untuk memudahkan pengguna memilih menu pembahasan yang

MENGENAL BAGIANkBAGIAN ANATOMI TUBUH MANUSIA MENGGUNAKAN ADOBE FLASH CS3

enter

opening, dan exit untuk keluar dari aplikasi. B B B B B B B B B B GambarB3.3BRancanganBHalamanBMenuB B 3.3.3.BBPerancanganBhalamanBanatomiB B B B B B B B B BBBBBBBBBBBBBBBB B GambarB3.4BRancanganBHalamanBAnatomiB B Tgmbgl

PENGENALAN ANATOMI TUBUH MANUSIA

ANATOMI BAGIAN

SISTEM EXERCISE

INTRO EXIT

PENJELASAN MATERI Tgmbgl

ANATOMI

3.3.4.BBPerancanganBhalamanBbagian-bagianBsistemBanatomiB B

Pada halaman ini terdapat bagiankbagian sistem anatgmi tubuh yang terdiri dari sepuluh tgmbgl yang kemudian di buat menjadi symbos button. Yang masingkmasing bagian bila diklik akan menampilkan penjelasannya.

B B B B B B B B B B B B GambarB3.5BRancanganBBagian-bagianBAnatomiB B 3.3.5.BBPerancanganBhalamanBexerciseB B

Pada layer exercise terdapat tgmbgl psay untuk masuk ke halaman kuis, pada halaman ini akan terdapat juga beberapa tgmbgl seperti start untuk memulai kuis setelah user

menginput nama, repsay untuk kembali ke tgmbgl start. Sgal berupa mustipse choice

yang terdiri dari 10 sgal dan skgr akan tampil diakhir sgal.

BAGIANkBAGIAN SISTEM ANATOMI TUBUH MANUSIA T O M B O L

B B B B B B B

B GambarB3.6BRancanganBExerciseB

B B 3.4.BBDesainBAplikasiB

B

3.4.1.BBDesainBintro openingB B

1. Halaman intro opening adalah tampilan awal yang muncul untuk aplikasi ini. Halaman ini berisi judul “Animasi Pengenalan Bagiankbagian Anatgmi Tubuh Manusia Menggunakan Adgbe Flash CS3”, dengan menggunakan motion tween, serta gerakan animasi frame by frame, dan diberi effect bsur yang dipergleh dari insert-timesine-effect-bsur. Serta desain tampilan background

yang menarik yang dipergleh dari perintah import, lalu import to sibrary.

2. Tgmbgl enter yang dipergleh dari perintah windows-common sibraries-button-circse bubse bsue yang diberi perintah pada ActionScript agar tgmbgl enter

yang di import dapat berfungsi. Berikut script yang digunakan. Tgmbgl PLAY

gn(release){

lgadMgvieNum(“intrg.swf”, 0);}

3. Penggunaan musik pada intro opening akan berjalan ketika aplikasi dijalankan dan tgmbgl off yang difungsikan untuk menghentikan musik yang diberi

ActionScript sebagai berikut.B

gn(release){

stgpAllSgunds();}

4. Pada setiap halaman aplikasi terdapat tgmbgl intro dan tgmbgl exit yang diubah menjadi button dan diberi ActionScript sebagai berikut”

Intro: gn(release){

lgadMgvieNum("intrg.swf", 0); }

Exit:

gn(release){

fscgmmand("quit","true"); }

B

5. Simpan dan beri judul intrg.fla dan export ke movie simapn dengan nama yang sama intrg.swf.B

B B B B

B

1. Buka halaman baru dan beri judul menu.fla. Buat background yang dipergleh dari fise- import- import to stage. Atur sesuai dengan ukuran stage, desain tampilan menggunakan Line toos.B

B

2. Buat sayer judul, buat teks judul “Pengenalan Bagiankbagian Anatgmi Tubuh Manusia” dengan menggunakan Text toos gunakan font Osd Engsish Text MT

dan pilih cosor merah #990000 pada fisters pilh Gradient gsow pilih warna hijau #66FF00 ubah teks menjadi movie, klik kanan frame 1 dan frame 50 kemudian pilih insert Keyframe. Pada frame 1 perkecil teks menggunakan free transform toos .B

B

3. Buat sayer teks1, pada layer ini buat tiga teks yakni anatgmi, bagiankbagian anatgmi, dan exercise gunakan font Osd Engsish Text MT warna biru #000066 masingkmasing teks ubah menjadi button (Ctrl+F8) .Pada Up gambarkan

rectangse toos dengan warna radias merah #000000, Pada Over beri insert Keyframe ubah warna teks menjadi biru #00FFFF, pada Down perkecil teks menggunakan Free Transform Toos, dan Hit beri insert Keyframe.B

B

4. buat sayer sine, gambarkan menggunakan Line Toos tepat dibawah masingk masing tgmbgl yang telah diubah menjadi button, pilih Sesection Toos lalu ubah symbgl menjadi Movie csip. Pada insert Keyframe pada frame 1 dan

frame 50 beri motion tween dan import warna Bitmap, pada frame 1 perkecil teks menggunakan Free Transform Toos.

5. Pada setiap halaman aplikasi terdapat tgmbgl intro dan exit yang masingk masing diubah menjadi button dan diberi ActionScript sebagai berikut:

Tgmbgl intro: gn(release){

lgadMgvieNum(“intrg.swf”, 0);} Tgmbgl exit:

gn(release){

fscgmmand("quit","true");}

B B

3.4.3.BBDesainBhalamanBanatomiB B

1. Buka lembar kerja baru, pilih fsash fise (ActionScript 2.0) simpan dengan nama anatgmi.fla lalu eksport movie simpan dengan nama yang sama.B

B

2. Pada sayer background, import gambar melalui perintah fise-import-import to stage lalu pilih gambar yang akan dijadikan background. Atur stage dengan ukuran 650 x 550 dari Modify-Document lalu atur width dan height.B

B

3. Tambahkan sayer dan beri nama judul, pada layer ini ketikan judul “Anatgmi” dengan font Osd Engsish Text MT dengan effect fister beves warna shadow

merah #FF0000 . Tekan Ctrl+F8 lalu ubah teks menjadi Movie csip, klik kanan

frame 1 dan frame 50 kemudian pilih insert Keyframe dan pilih motion tween

diantara frame 1 dan frame 100. Pada frame 1 gerakkan tulisan ke kanan sehingga teks judul akan bergerak ke tengah stage.

4. Pada layer tegri, ketik teks dengan font Osd Engsish Text MT dengan warna #99CC00 tekan Ctrl+F8 pilih Movie csip.BKetikkan teks “videg anatgmi tubuh” tekan Ctrl+F8 pilih button. Pada Up, beri warna teks #09182C dan gambarkan

rectangse dengan Fiss Cosor #99FF00, pada Over ganti warna teks menjadi pink #FF0099, pada Down, gunakan Free Transform Toos untuk memperkecil ukuran teks, dan pilih insert Keyframe pada Hit. Berikan ActionScript pada tgmbgl tekan Ctrl+F9 atau windows-Action dengan script:

gn(release){

nextFrame();}

5. Pada layer background klik kanan pada frame 2 pilih insert keyframe, import video.FLV melalui fise-import-import video, Sesect Video dan browse lalu next

dan pilih progressive downsoad from web server pada pilihan skinning pilih

ArcticOverAss.swf. Terdapat juga tgmbgl csose yang diubah penulis menjadi

button untuk kembali ke halaman sebelumnya. Pada Over gambar csose, diatas gambar ketik teks font Osd Engsish Text MT dengan warna kuning #CCFF00.

B B B B B B B

3.4.4.BBDesainBhalamanBbagian-bagianBanatomiBtubuhB B

1. Buka halaman baru simpan dengan nama gbr_anatgmi.fla lalu export movie

simpan dengan nama gbr_anatgmi.B B

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage. Pada sayer yang sama import to sibrary gambar anatgmi tubuh manusia. Tekan Ctrl+F8 pilih movie csip, insert Keyframe pada frame 1, frame 50, dan frame

100, klik kanan antara frame 1 hingga frame 100 berikan efek motion tween.

Pada frame 50 gerakkan gambar ke kiri, pada frame 100 gerakkan gambar ke bawah agar gambar dapat bergerak berlahanklahan.

3. Buat sayer baru, buat teks yang berkaitan dengan bagiankbagian anatgmi tubuh yang akan dibahas dengan font Osd Engsish Text MT warna hijau #00FF00 , lalu tekan Ctrl+F8 pilih button untuk masingkmasing teks. Pada Up, gambar

rectangse toos dan beri warna Fiss cosor-bitmap-import. Pada Over, ganti warna rectangse dan teks warna abukabu #CCCCCC. Pada down, ganti warna teks menjadi kuning #CCFF00 dengan Fiss Cosor yang sama. Pada Hit pilih

insert Keyframe.

4. Buat sayer menu, buat teks “menu” dengan font Osd Engsish Text MT warna #33CC99 . Tekan Ctrl+F8 pilih button kemudian pada Up, gambar rectangse toos dengan Fiss cosor abukabu #333333. Pada Over, ganti warna teks menjadi

orange #CC3300. Pada Down, pilih Free Transform toos untuk memperkecil teks, dan pilih insertKeyframe pada Hit.

5. Pembahasan pada setiap halaman pengenalan bagian sistem anatgmi, penulis menambahkan beberapa tgmbgl yang dibuat menjadi simbgl dengan pilihan

button, dengan menggunakan ActionScript untuk menjalankan prggram psay

pada tiap materi pengenalan anatgmi tubuh ini. Berikut ActionScript yang digunakan.

Tgmbgl next: gn(release){

nextFrame();}. Tgmbgl back:

gn(release){

ggtgAndStgp(2);}

keterangan: Angka 2 yang digunakan akan selalu berubah sesuai dengan kebutuhan.

Tgmbgl menu: gn(release){

lgadMgvieNum(“intrg.swf”, 0);} Tgmbgl exit:

gn(release){

fscgmmand("quit","true");}

B B B

3.4.4.1.BDesainBhalamanBsistemBkerangkaBmanusiaB B

1. Buka halaman baru simpan dengan nama kerangka1.fla lalu export movie

simpan dengan nama kerangka1.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul klik kanan pada frame 1 pilih insert Keyframe. Buat judul dengan “Sistem Kerangka Manusia” dengan font Osd Engsish Text MT warna

Fister gsow dengan warna hijau #669900. Tekan Ctrl+F8 pilih Movie csip, pilih

insert keyframe pada frame 1, frame 5, frame 10, frame 15, frame 30, frame

35, frame 40 dan frame 65 berikan masingkmasing efek bsur yang dipergleh dari insert-Timesine effect-bsur.

4. Pada sayer tegri , buatlah teks dengan mengunakan font Monotype Corsiva plih

insert-new symbos pilih movie csip, pada frame 1 dan frame 50 pilih insert Keyframe. Pada frame 1 pindahkan teks ke bagian atas diluar stage dan perkecil ukuran teks menggunkan Free Transform toos pada frame 50 berikan

ActionScript: Stop(); agar animasi berhenti pada frame 50. Pada frame ini terdapat juga berupa teks atau petunjuk untuk mengarahkan kursgr pada setiap gambar. Teks diubah menjadi movie csip, pada frame 1 dan frame 50 klik kanan, pilih insert keyframe lalu klik kanan pilih motion tween dan frame 1 arahkan gambar ke kiri.

menggunakan font Osd Engsish Text MT warna merah #FF0000. Buat tegri dengan font Monotype Corsiva warna kuning #FFFF00 dan biru #99FFFF tekan Ctrl+F8 pilih movie csip. Pada frame 1 dan frame 50 pilih insert keyframe dan berikan efek motion tween. Frame 1 perkecil teks menggunakan

Free Transform toos. Kemudian import gambar gelang bahu ke sibrary lalu

drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over

dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika

user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

6. Pada layer yang sama pada frame 3 pilih insert keyframe buat judul “Sendi Lutut” menggunakan font Osd Engsish Text MT dengan warna merah #FF0000 lalu ubah menjadi movie csip. Buat tegri dengan font Monotype Corsiva dengan warna biru #00CCFF tekan Ctrl+F8 pilih movie csip. Pada

frame 1 dan frame 50 pilih insert keyframe dan berikan efek motion tween.

Frame 1 perkecil teks menggunakan Free Transform toos. Kemudian import

gambar sendi lutut ke sibrary lalu drag ke dalam stage dan ubah menjadi

button, pilih insert keyframe pada Over dan perbesar gambar menggunakan

Free Transform toos .

B B B B B B

3.4.4.2.BBDesainBhalamanBsistemBototB

1. Buka halaman baru simpan dengan nama sistem gtgt.fla lalu export movie

simpan dengan nama sistem gtgt.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul klik kanan pada frame 1 pilih insert Keyframe. Buat judul dengan “Sistem Otgt” dengan font Osd Engsish Text MT warna hijau #99FF00 ditambah efek gradient gsow. Tekan Ctrl+F8 pilih Movie csip, pilih insert keyframe pada frame 1, frame 25, frame 50. Pada frame 50 ubah cosor properties dengan cosor tint #FF00CC, diantara frame 1 dan 50 create motion tween.B

B

4. Pada sayer tegri , buatlah teks dengan mengunakan font Monotype Corsiva pilih

insert-new symbos pilih movie csip, pada frame 1 dan frame 50 pilih insert Keyframe. pada frame 1 dan frame 50 klik kanan, pilih insert keyframe lalu klik kanan pilih motion tween. Pada frame 1 pindahkan teks ke bagian atas diluar stage dan pilih cosor tint biru #00FFFF pada frame 50 dengan cosor tint

biru #00CCCC berikan ActionScript: Stop(); agar animasi berhenti pada frame

50. Teks diubah menjadi movie csip. Kemudian import gambar gtgt punggung sejati ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih

insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos .

B

1. Buka halaman baru simpan dengan nama sistem peredaran darah.fla lalu

export movie simpan dengan nama sistem peredaran darah.swf.B B

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

B

3. Pada sayer judul klik kanan pada frame 1 pilih insert Keyframe. Buat judul dengan “Sistem Peredaran Darah” dengan font Osd Engsish Text MT warna merah #FF0000. Tekan Ctrl+F8 pilih Graphic, pilih insert keyframe pada

frame 1, frame 10, frame 20, frame 25, frame 40. Pada frame 40 ubah cosor properties dengan cosor tint #FF6600 diantara frame 1 dan 40 create motion tween.B

B

4. Buat layer tegri, Buat teks dengan font Monotype Corsiva warna biru #00FFFF dan tekan Ctrl+F8 pilih movie csip. Pada frame 1 dan frame 50 pilih insert keyframe dan berikan efek motion tween. Frame 1 perkecil teks menggunakan

Free Transform toos. Kemudian import gambar jantung ke sibrary lalu drag

ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user

mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

5. Pada frame 2 pilih insert Keyframe, import gambar jantung dengan bagiank bagiannya ke sibrary dari perintah fise-import-import to sibrary pilih gambar lalu Ok, tekan Ctrl+F8 ubah gambar menjadi symbos button. Pada Up pilih

insert keyframe dan pada Over perbesar gambar menggunakan Free Transform toos sehingga user dapat melihat gambar dengan jelas.

3.4.4.4.BBDesainBhalamanBsistemBpernapasanB B

1. Buka halaman baru simpan dengan nama sistem pernapasan.fla lalu export movie simpan dengan nama sistem pernapasan.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul. Buat judul dengan “Sistem Pernapasan” dengan font Osd Engsish Text MT warna biru #3300CC. Tekan Ctrl+F8 pilih Movie csip, pilih

insertkeyframe pada frame 1, frame 15, frame 30,. Pada frame 1 ubah cosor properties dengan dan tambahkan efek glgw berwarna merah #FF0000 dan diantara frame 1 dan 30 create motiontween.B

B

4. Buat layer tegri, Buat teks dengan font Osd Engsish Text MT warna putih #FFFFFF dan tambahkan efek glgw dengan cglgr #9900CC dan tekan Ctrl+F8 pilih movie csip. Pada frame 1 dan frame 50 pilih insertkeyframe dan berikan efek motion tween. Frame 1 pindahkan teks ke bagian bawah. Demikian dengan teks2 tekan Ctrl+F8 beri warna teks kuning #CCFF00. Kemudian

import gambar parukparu ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar

kursgr pada gambar maka gambar tampak lebih jelas.

5. Tambahkan tgmbgl back dan next yang di import dari windows-common sibraries-button-csassic buttons-key buttons lalu drag ke stage dan berikan

ActionScript pada masingkmasing tgmbgl.

3.4.4.5.BBDesainBhalamanBsistemBinderaB B

1. Buka halaman baru simpan dengan nama sistem indera.fla lalu export movie

simpan dengan nama sistem indera.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul. Buat judul dengan “Sistem Indera” dengan font Osd Engsish Text MT warna #9900CC dan tambahkan fister gradient gsow. Tekan Ctrl+F8 pilih Movie csip, pilih insert keyframe pada frame 1, frame 10, frame 25, dan

frame 40,. Pada frame 1 perkecil teks menggunakan Free Transform Toos dan tambahkan cosortint biru #339999 pada properties . B

B

4. Buat layer baru ganti dengan teks1, Buat teks dengan judul “Alat Penglihatan” dengan font Osd Engsish Text MT dengan warna merah #FF3333 tambahkan efek gsow pada fisters warna #CCFF00 dengan bsur X dan Y =5. Tambahkan tegri menggunakan font yang sama ganti warna menjadi #330066 ubah teks menjadi movie csip, pilih insert keyframe pada frame 1 dan frame 50, klik

kanan pada timesine lalu create motion tween diantara frame 1 dan frame 50. Pada frame 1 pindahkan teks ke kanan bawah stage dan frame 50 ganti warna teks menjadi #00FF00 menggunakan efek cosor tint dengan tint amount 82%.

5. Demikian halnya dengan teks 2 bagian tegri, gambar dipindahkan ke arah yang berlawanan dengan perubahan warna saat animasi dijalankan agar tampak lebih menarik. Kemudian import gambar mata ke sibrary lalu drag ke dalam

stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user

mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

6. Untuk desain halaman alat pendengaran atau telinga , klik kanan pada frame 2 layer background pilih insert keyframe, lalu buat teks judul “Alat Pendengaran” dengan font Osd Engsish Text MT dengan warna merah #FF3333 tambahkan efek gradient gsow dengan bsur X dan Y 5. Tambahkan tegri menggunakan font yang sama ganti warna menjadi merah #CC0066 dengan efek gradient gsow. Ubah teks menjadi movie csip, pilih insert keyframe pada

frame 1 dan frame 50, klik kanan pada timesine lalu create motion tween

diantara frame 1 dan frame 50. Pada frame 1 pindahkan teks ke kanan bawah

stage. Tambahkan teks 2 bagian tegri ubah menjadi movie csip ganti warna teks #FFFF00 dan efek gradient gsow. Pilih insert keyframe pada frame 1 dan

frame 50 diantara frame 1 dan frame 50 create motion tween Pada frame 1 pindahkan teks ke atas di luar stage lalu perkecil teks menggunakan Free Transform toos. Kemudian import gambar telinga ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan

mengarahkan kursgr pada gambar maka gambar tampak lebih jelas. Tekan

Ctrs+Enter untuk menjalankan animasi.

7. Untuk halaman indera peraba, pada layer background klik kanan pilih insert keyframe pada frame 3. Buat judul ”Indera Peraba” gunakan font Osd Engsish Text MT dengan warna merah #FF0000 tambahkan efek fisters gsow lalu tambahkan warna hijau #99FF00. Ubah teks ke symbos menjadi movie csip. Pilih insert keyframe pada frame 1 dan frame 50. Pada frame 1 ganti cosor aspha 0% pada properties dan frame 50 berikan ActionScript agar animasi teks berhenti. Blgk frame 1 hingga frame 50, lalu pilih motion tween pada properties.

Kemudian import gambar kulit ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas. Setelah diubah ke button

gambar kembali diubah menjadi symbos movie csip untuk memberikan efek animasi. Pada frame 1 ganti cosor aspha 0% pada properties dan frame 50 berikan ActionScript agar animasi teks berhenti. Blgk frame 1 hingga frame

50, lalu pilih motion tween pada properties.

8. Desain halaman indera pembau, klik kanan pilih insert Keyframe pada frame 4 layer yang sama. Buat judul “Indera pembau / hidung ” dengan font Osd Engsish Text MT dengan warna merah #FF0033 kemudian ubah ke symbos

Osd Engsish Text MT warna hijau #99FF33 tekan Ctrl+F9 pilih movie csip. Diantara frame 1 hingga frame 50 klik kanan tekan F6 berikan efek motion tween. Pada frame 1 perkecil teks menggunakan Free Transform Toos.

Kemudian import gambar hidung ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas. Setelah diubah ke button

gambar kembali diubah menjadi symbos movie csip untuk memberikan efek animasi. Pada frame 1 ganti cosor aspha 0% pada properties dan frame 50 berikan ActionScript agar animasi teks berhenti. Blgk frame 1 hingga frame

50, lalu pilih motion tween pada properties.

9. Desain halaman indera pengecap atau lidah. Pilih Insert Keyframe pada frame 4 buat judul “Indera Pengecap / lidah” dengan font Osd Engsish Text MT warna hijau #99FF33 tambahkan efek gsow warna merah #CC0000 tekan Ctrl+F9 pilih movie csip. Tambahkan tegri mengenai indera pengecap dengan font Osd Engsish Text MT warna #FFCC00 tekan Ctrl+F9 pilih movie csip. Diantara

frame 1 hingga frame 50 klik kanan tekan F6 berikan efek motion tween. Pada

frame 1 perkecil teks menggunakan Free Transform Toos kemudian pindahkan teks ke atas diluar stage.

Kemudian import gambar lidah ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas. Setelah diubah ke button

perkecil gambar menggunakan Free Transform Toos, lalu klik kanan diantara

frame 1 dan frame 45 create motion tween.

3.4.4.6.BBDesainBhalamanBsistemBpencernaanB B

1. Buka halaman baru simpan dengan nama sistem pencernaan.fla lalu export movie simpan dengan nama sistem pencernaan.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Tambahkan layer, buat judul “Sistem Pencernaan” dengan font Osd Engsish Text MT warna merah #FF0000 tambahkan efek gsow #00CCFF. Tekan Ctrl+F8 pilih Movie csip dengan animasi effect bsur dengan perubahan warna pada tint cosor.

4. Buat layer teks, buat judul “Rgngga Mulut” yang merupakan bagian dari sistem pencernaan dengan font Osd Engsish Text MT warna merah #FF0000. Tambahkan teks 2 yang merupakan pembahasan dari rgngga mulut dengan

font Osd Engsish Text MT warna hijau # FF0099. Tekan Ctrl+F8 pilih Movie csip.Insert Keyframe pada frame 1 dan frame 50 create motion tween diantara

frame tersebut. Pada frame 50 gunakan ActionSript Stgp(); Kemudian import

gambar mulut ke sibrary lalu drag ke dalam stage dan ubah menjadi button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free

Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar akan lebih besar.

5. Pada layer yang sama pada frame 2 pilih insert keyframe buat judul “Geligi” yang merupakan bagian dari sistem pencernaan dengan font Osd Engsish Text MT warna merah #FF0000 dengan cosor brightness k46%. Tambahkan teks 2 yang merupakan pembahasan dari geligi dengan font Osd Engsish Text MT

warna kuning #CCFF33. Tekan Ctrl+F8 pilih Movie csip. Insert Keyframe

pada frame 1 dan frame 50 create motion tween diantara frame tersebut.

Frame 1 perkecil teks menggunakan Free Transform tooss ganti warna pada

cosor tint menjadi #9933FF dan pada frame 50 gunakan ActionSript Stgp();

6. Pada frame 3 pilih insert keyframe buat judul “Lambung” yang merupakan dengan font Osd Engsish Text MT warna merah #FF0000. Tambahkan teks 2 yang merupakan pembahasan mengenai lambung dengan font Osd Engsish Text MT warna #CCFFFF. Tekan Ctrl+F8 pilih Movie csip. Insert Keyframe pada

frame 1 dan frame 50 create motion tween diantara frame tersebut. Frame 1 perkecil teks menggunakan Free Transform tooss pindahkan teks kebagian bawah menjadi #9933FF dan pada frame 50 gunakan ActionSript Stgp(); Kemudian import gambar lambung ke sibrary lalu drag ke dalam stage dan buat menjadi simbgl button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user

mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

B

1. Buka halaman baru simpan dengan nama sistem urinaria.fla lalu export movie

simpan dengan nama sistem urinaria.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul. Buat judul dengan “Sistem Urinaria” dengan font Osd Engsish Text MT warna #FF00CC. Tekan Ctrl+F8 pilih Movie csip, pilih insert keyframe pada frame 1, frame 15, frame 30,. Pada frame 1 ganti warna hijau #33FF00 kemudian pada frame 15 ganti #00FFCC dan diantara frame 1 dan 30

create motion tween. Buat teks “Ginjal” yang merupakan judul dari bagian sistem urinaria dengan font yang sama dengan warna #FF00CC. Buat menjadi simbgl Movie Csip. Buat teks 2 keterangan dari ginjal dengan warna hijau #99FF33 buat menjadi simbgl Movie csip. import gambar ginjal ke sibrary lalu

drag ke dalam stage dan buat menjadi simbgl button, pilih insert keyframe

pada Over dan perbesar gambar menggunakan Free Transform toos.B B

4. Pada frame 2 pilih insert keyframe Buat teks “Kandung Kemih” dengan font

yang sama dengan warna #FF00CC. Buat menjadi simbgl Movie Csip. Buat teks 2 keterangan dari ginjal dengan warna #00FFFF buat menjadi simbgl

Movie csip. import gambar kandung kemih ke sibrary lalu drag ke dalam stage

kemudian buat menjadi simbgl movie csip. Animasikan teks dan gambar yang dari kecil menjadi besar dan perubahan warna pada teks.B

3.4.4.8.BBDesainBhalamanBsistemBreproduksiB B

1. Buka halaman baru simpan dengan nama sistem reprgduksi.fla lalu export movie simpan dengan nama sistem reprgduksi.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul. Buat judul dengan “Sistem Reprgduksi” dengan font Osd Engsish Text MT warna kuning #FFFF00. Tekan Ctrl+F8 pilih Movie csip, pilih

insert keyframe pada frame 1, frame 50,. Pada frame 1 ganti warna menjadi

tint pada cosor properties #FF00CC. Diantara frame 1 dan 50 create motion tween. Buat teks “Sistem Reprgduksi lakiklaki” yang merupakan judul dari bagian sistem reprgduksi dengan font yang sama dengan warna #00FFFF. Buat menjadi simbgl Movie Csip. Buat teks 2 keterangan dari sistem reprgduksi lakiklaki menjadi simbgl Movie csip. Pada frame 1 buat warna merah #CC0033 sementara pada frame 55 ganti warna menjadi #99CC00 lalu create motion tween. Import gambar alat reprgduksi lakiklaki ke sibrary lalu drag ke dalam stage pada frame 2 pilih insert keyframe.B

B

4. Pada frame 3 pilih insert keyframe buat judul “Sistem Reprgduksi Perempuan” menggunakan font Osd Engsish Text MT dengan warna merah #990000 baut menjadi simbgl Movie csip. Perkecil teks pada frame 1 kemudian create motiontween dan pada frame 50 berikan ActionScript agar animasi teks dapat berhenti. Buat tegri menggunakan font yang sama dengan warna hijau #99FF33 buat menjadi simbgl Movie csip, animasikan teks dari terkecil

ke dalam stage. B

B

3.4.4.9.BBDesainBhalamanBsistemBsarafB B

1. Buka halaman baru simpan dengan nama sistem saraf.fla lalu export movie

simpan dengan nama sistem saraf.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada sayer judul. Buat judul dengan “Sistem Saraf” dengan font Osd Engsish Text MT warna hijau #99FF33 ditambah dengan efek gsow pada fister dengan warna merah. Tekan Ctrl+F8 pilih Movie csip, pilih insertkeyframe pada frame

1, frame 50. Pada frame 1 perkecil teks. Diantara frame 1 dan 50 create motion tween. Buat judul “Otak” yang merupakan judul dari bagian sistem saraf dengan font Osd Engsish Text MT dengan warna biru #00FFFF. Buat menjadi simbgl Movie Csip. Buat keterangan dari sistem saraf gtak dengan font yang sama dengan warna merah #CC0000 ubah menjadi simbgl Movie csip. Kemudian import gambar gtak ke sibrary lalu drag ke dalam stage dan buat menjadi simbgl button, pilih insert keyframe pada Over dan perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

4. Pada frame 2 layer background pilih insert keyframe buat judul “Sumsum Tulang Belakang” menggunakan font Osd Engsish Text MT dengan warna #9900CC buat menjadi simbgl Movie csip. Tambahkan teks yang merupakan pembahasan dari sumsum tulang belakang buat menjadi simbgl Movie csip.

Perkecil teks pada frame 1 kemudian create motion tween dan pada frame 50 berikan ActionScript agar animasi teks dapat berhenti. Import gambar sumsum tulang belakang ke sibrary lalu drag ke dalam stage.

B

3.4.4.10.BBDesainBhalamanBsistemBendoktrinB B

1. Buka halaman baru simpan dengan nama sistem endgktrin.fla lalu export movie simpan dengan nama sistem endgktrin.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage.

3. Pada layer judul, buat teks “Sistem endgktrin” dengan font Osd Engsish Text MT buat menjadi simbgl Movie csip. Animasi teks yang berjalan berupa perubahan warna teks pada cosor properties dengan warna biru #00FFFF kemudian hijau #666600. Tambahkan teks “Kelenjar Himgfise” tekan Ctrl+F8 pilih movie csip dengan font yang sama dengan warna biru. Buat keterangan dari kelenjar himgfise buat menjadi simbgl movie csip. Pilih insert Keyframe

diantara frame 1 dan frame 50 create motion tween. Pada frame 1 perkecil teks menggunakan Free Transform Toos dengan perubahan pada cosor tint.B

“Kelenjar Tirgid” menggunakan font Osd Engsish Text MT dengan warna biru #66CCFF. Tambahkan teks mengenai kelenjar tirgid degan warna orange

#FF6600 tekan ctrl+F8 pilih movie csip. Animasikan teks pada frame 1 dan

frame 50 pilih insert keyframe dan pilih create motion tween. Pada frame 1 perkecil teks menggunakan Free Transform toos dan pada frame 50 berikan

ActionScript Stgp(); agar animasi dapat berhenti. Kemudian import gambar kelenjar tirgid ke sibrary lalu drag ke dalam stage dan buat menjadi simbgl

button, pilih insert keyframe pada Over dan perbesar gambar menggunakan

Free Transform toos berfungsi agar ketika user mengarahkan kursgr pada gambar maka gambar tampak lebih jelas.

3.4.5.BBDesainBHalamanBExerciseB B

1. Buka halaman baru simpan dengan nama sgal.fla lalu export movie simpan dengan nama sgal.swf.

2. Pada sayer background, import gambar pada stage yang dipergleh dari perintah fise-import-import to stage ukuran gambar diatur sesuai dengan stage. Desain tampilan menggunakan sine toos.

3. Pada layer 2 frame 3 buat judul exercise buat menjadi movie csip dan tgmbgl

4. Pada layer 3 frame 3 buat teks nama tambahkan teks kgsgng menggunakan input teks pada menu properties Text tooss. Kemudian tambahkan tgmbgl Start

buat menjadi button.

5. Pada layer 4 frame 5 sampai frame 14 buat sgal pada setiap frame

menggunakan Text toos dengan font Nyasa dengan warna kuning #CC9900. Tambahkan mustipse choice buat menjadi button. Masingkmasing mustipse choice yang yang dibuat menjadi simbgl button diberikan perintah

ActionScript yang akan dilampirkan pada sisting program.

6. Pada layer nilai tambahkan nama dan nilai menggunakan static text dan buat teks kgsgng menggunakan input text. Kemudian tambahkan tgmbgl Repsay

dibuat menjadi simbgl button.

B

IMPLEMENTASIBSISTEMB B

B B

Animasi pengenalan anatomi tubuh manusia menggunakan Adobe elash CS3 pada pengerjaannya menggunakan beberapa file.fla yang di eksport menjadi movie (swf) untuk memperingan cara kerja dan mempermudah penulis dalam mengerjakan animasi ini.

Pada aplikasi ini selain terdapat tombol pilih materi yang akan dibahas pada bagian menu juga terdapat beberapa aplikasi tambahan yaitu musik, tombol intro, dan tombol exit. Aplikasi ini juga didukung dengan adanya soal latihan, dan video pengenalan anatomi tubuh manusia. Tujuan aplikais ini menggunakan musik agar user lebih semangat dalam pembelajaran aplikasi ini. Tombol intro digunakan jika pada saat user berada pada halaman isi, user juga dapat kembali pada halaman intro. Dan tombol exit, mempermudah kapan saja user ingin menghentikan pembelajarannya. Berikut ini akan dijabarkan hasil tampilan animasi.

4.1.BTampilanBHalamanBIntro OpeningB B B

B GambarB4.1BHalamanBIntro OpeningB

Gambar diatas merupakan tampilan awal dari Animasi Pengenalan Anatomi Tubuh Manusia. Pembuatan animasi intro opening dengan menggunkan motion tween, dan gerakan animasi frame by frame untuk judul. Gambar logo yang ditengah atau tombol

Enter merupakan tombol masuk untuk ke halaman menu. Serta menggunakan musik

yang diperoleh dari perintah import, lalu import to library. B

4.2.BTampilanBHalamanBMenuB B

Setelah user menekan tombol enter pada intro opening, maka user akan masuk ke halaman menu. Halaman ini berisi tiga tombol yang diubah menjadi button agar dapat diberi action script yaitu anatomi, bagian-bagian anatomi, dan exercise. Untuk memulai user harus memilih tombol seperti tombol anatomi untuk masuk ke pengertian anatomi , tombol bagian-bagian anatomi untuk masuk ke pembahasan

latihan. B

B GambarB4.2BHalamanBmenuB

B

Dan setiap halaman diberi tombol intro untuk kembali ke halaman intro

opening, dan tombol exit untuk keluar dari aplikasi. Musik pada halaman ini dapat di

off kan. B

4.3.BTampilanBHalamanBAnatomiB B

Halaman ini berisi pengertian anatomi dan animasi teks berjalan disertai dengan animasi.gif serta animasi hujan dan terdapat sebuah link untuk menuju tampilan anatomi selanjutnya yang berisi video tentang apa saja yang menjadi bagian-bagian anatomi tubuh manusia.

B B

B GambarB4.3BHalamanBPengertianBAnatomiB

4.3.1.BTampilanBhalamanBvideoBanatomiBtubuhBmanusiaB B

B GambarB4.4BHalamanBVideoBAnatomiBTubuhBManusiaB

B

Halaman ini berisi video anatomi tubuh manusia yang bertujuan untuk mengenal bagian anatomi tubuh manusia yang selanjutnya akan dibahas pada bagian-bagian anatomi tubuh yang terdapat pada menu dengan cara user memilih tombol

close, maka user masuk ke halaman sebelumnya dan memilih tombol bagian-bagian

anatomi tubuh.. B

B

B GambarB4.5BHalamanBBagianBSistemBAnatomiBTubuhBB

B

Halaman ini berisi 10 tombol yang diubah menjadi button yang dibuat melalui perintah insert-new symbol-button dan apabila user mengklik salah satu tombol maka

user akan menuju teori atau pembahasan sesuai link yang dipilih dan juga animasi

gambar anatomi tubuh manusia yang berjalan dan disertai dengan tombol menu untuk kembali ke halaman menu.

B

4.4.1.BTampilanBhalamanBsistemBkerangkaBmanusiaB B

Halaman ini akan tampil apabila user memilih tombol sistem kerangka manusia pada Gambar 4.5 Bagian Anatomi Tubuh maka akan tampil bagian-bagian yang menjadi sistem kerangka manusia. Animasi yang berjalan berupa teks penjelasan disertai masing-masing mengenai sistem kerangka manusia. Dan disertai dengan musik yang dapat dihentikan.

B B

1.BTampilanBkerangkaBmanusiaB B

GambarB4.6BHalamanBSistemBKerangkaBManusiaB

B

2.BTampilanBgelangBbahuB B

B GambarB4.7BHalamanBGelangBBahuB

B

B GambarB4.8BHalamanBSendiBLututB

B B

4.4.2.BTampilanBhalamanBsistemBototB B

B GambarB4.9BHalamanBSistemBOtotB

Halaman ini berisi penjelasan mengenai sistem otot ,yaitu otot punggung sejati. Animasi yang berjalan berupa animasi teks dan gambar dan musik tetap berjalan. Pada halaman ini terdapat tombol next dan back yang diperoleh dari perintah

windows-common libraries-buttons-key buttons yang masing-masing diberi ActionScript agar

tombol dapat berfungsi. B

B

4.4.3.BTampilanBhalamanBsistemBperedaranBdarahB

Halaman ini berisi penjelasan tentang sistem peradaran darah ,yaitu jantung. Animasi yang berjalan beruapa teks dan disertai dengan gambar dan perubahan warna. Halaman ini berisi link atau tombol back untuk kembali pada halaman bagian-bagian anatomi tubuh manusia seperti gambar 4.5 dan next untuk tampil kehalaman selanjutnya.

1.BTampilanBjantungB B

B GambarB4.10BHalamanBSistemBPeredaranBDarahB

B

B GambarB4.11BHalamanBbagianBJantungBB

B

4.4.4.BTampilanBhalamanBsistemBpernapasanB

B GambarB4.12BHalamanBSistemBPernapasanB

Halaman ini berisi penjelasan tentang paru-paru yang merupakan bagian dari sistem pernapasan yang dilengkapi dengan gambar paru-paru. Dan animasi berjalan berupa teks judul yang diberi animasi effect blur dan efek glow dalam penulisan teks dan gambar dapat diperbesar dengan mengarahkan kursor pada gambar. Musik dapat dihentikan dengan menekan tombol off terdapat juga tombol next untuk lanjut ke halaman sistem indera dan tombol back untuk kembali ke menu bagian-bagian anatomi tubuh manusia.

4.4.5.BTampilanBhalamanBsistemBinderaB B

Halaman ini berisi bagian-bagian sistem indera yang mencakup indera penglihatan berisi penjelasan tentang mata, indera pendengaran, indera peraba, indera pembau, indera pengecap yang masing-masing disertai sebuah gambar dan iringan music, dan setiap halaman terdapat tombol next dan back. Tombolmenu berfungsi untuk kembali ke halaman menu, dan tombol exit untuk keluar dari aplikasi.Contoh tampilan:

B B B B B B B B B

B

B GambarB4.13BHalamanBInderaBPenglihatanB

B

2.BTampilanBinderaBpendengaranB B

B GambarB4.14BHalamanBInderaBPendengaranB

3.BTampilanBinderaBperabaB/BkulitB B

B GambarB4.15BHalamanBInderaBPerabaB

B

4.BTampilanBinderaBpembauB/BhidungB B

B GambarB4.15BHalamanBInderaBPembauBB

B B B

B

B GambarB4.16BHalamanBInderaBPengecapB

4.4.6.BTampilanBhalamanBsistemBpencernaanB B

Pada halaman ini berisi penjelasan tentang sistem pencernaan, yaitu rongga mulut, geligi, dan lambung yang disertai keterangan dari bagian-bagian sistem pencernaan tsb. Gambar pada masing-masing halaman dapat diperbesar serta musik yang mengiringi aplikasi pada halaman ini dapat dihentikan dengan menekan tombol off. B

B B B B B

1.BTampilanBronggaBmulutB B

B GambarB4.17BHalamanBRonggaBMulutB

2.BTampilanBgeligiB B

B GambarB4.18BHalamanBGeligiB

B

B GambarB4.19BHalamanBLambungB

B B

4.4.7.BBTampilanBhalamanBsistemBurinariaB

Halaman ini berisi penjelasan mengenai sistem urinaria ,yaitu ginjal dan kandung kemih. Animasi yang berjalan berupa animasi teks dan gambar dan musik tetap berjalan dan dapat dihentikan. Pada halaman ini terdapat tombol next dan back yang diperoleh dari perintah windows-common libraries-buttons-key buttons yang masing-masing diberi ActionScript agar tombol dapat berfungsi.

B B B B B B

1.BTampilanBginjalB B

B GambarB4.20BHalamanBGinjalB

2.BTampilanBkandungBkemihB B

B GambarB4.21BHalamanBKandungBKemihB

B B B B

Halaman ini akan tampil apabila user memilih tombol sistem reproduksi pada Gambar

4.5 Bagian Anatomi Tubuh maka akan tampil pembahasan sistem reproduksi yaitu

sistem reproduksi laki-laki dan sistem reproduksi perempuan. Animasi yang berjalan berupa teks penjelasan disertai masing-masing gambar. Terdapat tombol off yang berfungsi menghentikan musik, tombol menu untuk kembali ke halaman menu dan tombol exit untuk keluar dari aplikasi.

1.BSistemBreproduksiBlaki-lakiB B

B GambarB4.22BHalamanBReproduksiBLaki-lakiB

Apabila link di klik maka akan tampil gambar alat reproduksi laki-laki seperti dibawah ini:

GambarB4.23BHalamanBAlatBReproduksiBLaki-lakiB B

2.BSistemBreproduksiBperempuanB B

B GambarB4.24BHalamanBReproduksiBPerempuanB

B B B B

B

Halaman ini berisi pembahasan mengenai sistem saraf yang terdiri dari otak, dan sumsum tulang belakang. Animasi berjalan berupa teks dan effect glow yang diperoleh dari properties serta animasi frame by frame dari teks kecil menjadi besar dengan menggunakan free transform tools. User juga dapat mengarahkan kursor pada setiap gambar untuk memperbesar ukuran gambar agar gambar beserta bagian-bagiannya terlihat jelas.

1.BTampilanBotakB B

B GambarB4.25BHalamanBSistemBSarafBOtakB

B B B B B

2.BTampilanBsumsumBtulangBbelakangB B

B GambarB4.26BHalamanBSumsumBTulangBBelakangB

B B

4.4.10BTampilanBhalamanBsistemBendoktrinB B

Halaman ini berisi penjelasan tentang bagian-bagian dari sistem endoktrin, yaitu kelenjar himofise dan kelenjar tiroid. Animasi yang berjalan adalah penjelasan berupa teks penjelasan yang disertai satu gambar. Halaman ini juga berisi link yang dapat diklik yang akan menuju ke halaman selanjutnya serta dapat kembali kehalaman sebelumnya. Link yang dimaksud yaitu link next dan back. Halaman ini adalah akhir pembahasan mengenai bagian-bagian anatomi tubuh manusia. Jadi ketika user memilih tombol next pada halaman kelenjar tiroid maka user masuk pada tampilan halaman menu.

B B

B

B GambarB4.27BHalamanBKelenjarBHimofiseB

B

2.BTampilanBkelenjarBtiroidB B

B GambarB4.28BHalamanBKelenjarBTiroidB

B B B

4.5.BBTampilanBHalamanBExerciseB B

4.5.1.BBTampilanBawalB B

Halaman ini merupakan tampilan awal exercise, user pertama sekali memilih tombol play untuk masuk ke halaman berikutnya, dan terdapat tombol menu dan profil.

B GambarB4.29BHalamanBAwalBExerciseB

B B

4.5.2.BBTampilanBstartBexerciseB

Halaman ini akan tampil apabila user menekan tombol play dan menginput nama kemudian start maka user akan masuk ke halaman soal pertama.

B GambarB4.31BHalamanBSoalB

Halaman ini berisi soal pertama yang akan menguji pemahaman siswa ataupun pengguna terhadap teori yang telah disampaikan. Untuk masuk ke halaman ini pertama user harus menekan tombol play, ketik nama pengguna lalu pilih start untuk memulai soal.

4.5.4.BBTampilanBNilaiB B

Pada halaman ini menjelaskan hasil score akhir. Setiap jawaban yang benar akan diberi score 10 dan nilai lulus dimulai dengan nilai 70. Di halaman ini juga terdapat tombol replay untuk kembali ke soal halaman start dan link intro dan profil.

BBBB B

B GambarB4.33BHalamanBNilaiBTidakBLulusB

B B

4.6.BBTampilanBHalamanBProfilB B

BB B

GambarB4.34BHalamanBProfilB B

Gambar diatas merupakan tampilan halaman profil penulis. Dan terdapat tombol

intro,untuk kembali ke halaman intro opening dan tombol exit untuk keluar dari

KESIMPULANBDANBSARANB B

B B 5.1.BKesimpulanB

B

Dari penelitian tersebut dapat disiepulkan:

1. Tahapan dalae peebuatan anieasi terdiri dari, penentuan eateri yang akan disaepaikan, dan penggabungan sebuah desain dengan eateri dan perancangan desain.

2. Penggunaan ActionScript eenjadikan anieasi pada Adobe Flash eenjadi lebih eenarik dan juga efisien.

3. Dalae eeepublikasikan Flash sebaiknya jadikan file tersebut dalae bentuk

file HTML agar koeputer yang tidak eeepunyai software Adobe Flash tetap

dapat eelihat hasil anieasi.

4. Penggunaan aplikasi ini sangat cocok bagi siswa SMP dan SMA dalae pelajaran yang bersifat ueue khususnya pelajaran IPA (Ileu Pengetahuan Alae) untuk eengenal bagian-bagian anatoei tubuh eanusia dan eenjadi referensi untuk eeebahas bagian-bagian anatoei tubuh eanusia.

5.2.BSaranB B

Saran yang dapat penulis saepaikan yang berhubungan dengan aplikasi ini yaitu; 1. Jika setelah selesai dalaepeebuatan anieasi peebelajaran, sebaiknya diuji

terlebih dahulu untuk eeeastikan anieasi telah berjalan dengan benar dan tetap dengan tujuan aplikasi dapat berjalan dengan benar sesuai keinginan. 2. Sebagai alternatif peebelajaran sebaiknya bagi leebaga pendidikan

diharapkan eulai eenggunakan anieasi dalae sebuah peebelajaran sehingga eenjadi eenarik.

3. Meeperhatikan penulisan ActionScript pada objek atau fraee yaitu besar dan kecilnya huruf karena eerupakan case sensitive.

4. Proyek akhir yang dibuat diharapkan dapat dikeebangkan lebih beragae lagi dalae hal anieasi, desain, dan fitur yang lebih efektif.

LANDASAN TEORI

2.1. Animasi Flash

Animnsi ndnlnh gnmbnr bergernk berbentuk dnri sekumpulnn objek (gnmbnr) ynng disusun secnrn bernturnn mengikuti nlur pergernknn ynng telnh ditentuknn pndn setinp pertnmbnhnn hitungnn wnktu ynng terjndi. Gnmbnr ntnu objek ynng dimnksud dnlnm definisi di ntns bisn berupn gnmbnr mnnusin, hewnn, mnupun tulisnn. Pndn proses pembuntnnnyn, pembunt nnimnsi ntnu ynng lebih dikennl dengnn nnimntor hnrus menggunnknn logikn berfikir untuk menentuknn nlur gernk suntu objek dnri kendnnn nwnl hinggn kendnnn nkhir objek tersebut. Perencnnnnn ynng mntnng dnlnm perumusnn nlur gernk berdnsnrknn logikn ynng tepnt nknn menghnsilknn nnimnsi ynng mennrik untuk disnksiknn.

Atnu jugn Animnsi merupnknn suntu teknik mennmpilknn gnmbnr berurut sedemikinn rupn sehinggn penonton mernsnknn ndnnyn ilusi gernknn (motiono pndn gnmbnr ynng ditnmpilknn. Secnrn umum ilusi gernknn merupnknn perubnhnn ynng dideteksi secnrn visunl oleh mntn penonton sehinggn tidnk hnrus perubnhnn ynng terjndi merupnknn perubnhnn posisi sebngni mnknn dnri istilnh ‘gernknn’. Perubnhnn seperti perubnhnn wnrnn pun dnpnt dikntnknn sebunh nnimnsi.

Adn 2 cnrn untuk membunt nnimnsi di dnlnm Flash, nnimnsi frame by frame dnn nnimnsi tweening. Pndn nnimnsi frame-by-frame, nknn membunt gnmbnr pndn setinp frame. Pndn nnimnsi tweening, hnnyn membunt frame nwnl dnn frame nkhir, sednng Flash nknn membunt frame dinntnrnnyn (in betweeno. Animnsi tween merupnknn cnrn ynng bnik untuk membunt gernknn dnn perubnhnn dnlnm movie dengnn file ynng relntif kecil.

Animnsi Frame by Frame ndnlnh membunt sebunh ilusi pergernknn dnri sebunh gnmbnr/objek ynng dinm (still imageo frame demi frame-nyn. Pndn pembuntnn nnimnsi ini nknn mempelnjnri bngnimnnn cnrn membunt objek bergernk melintns pndn stage, merubnh ukurnn, memutnr, menggnnti wnrnn dnn mengubnh bentuk. Adn bebernpn istilnh dnlnm pembuntnn nnimnsi, dinntnrnnyn ndnlnh :

1. Frame dnpnt diumpnmnknn seperti film, ynitu film merupnknn kumpulnn gnmbnr ynng dimninknn secnrn berurutnn dengnn kecepntnn tertentu, sehinggn gnmbnr tersebut terlihnt bergernk .

2. Keyframe ndnlnh frame dimnnn Andn menentuknn perubnhnn pndn tombol ntnu nnimnsi. Pndn nnimnsi tween, Andn membunt keyframe hnnyn pndn titik ynng penting di dnlnm Timeline. Keyframe ditnndni oleh titik di dnlnm frame. Keyframe ynng tidnk berisi gnmbnr di dnlnm layer ditnndni oleh titik kosong. 3. Blank Keyframe nrtinyn kitn mempersinpknn frame kosong untuk diisi objek

bnru, dnn npnbiln kitn menggnmbnr objek, blank keyframe tersebut sudnh berisi objek. Blank keyframe dilnmbnngknn dengnn titik bulnt putih pndn frame.

1. Motion Path

Dnpnt menggunnknn motion path untuk membunt simbol bergernk mengikuti bentuk lintnsnn ynng sulit. Dengnn menggunnknn layer Motion Guide untuk membunt gnris untuk lintnsnn gernk objek. Layer Guide ditnndni oleh ikon guide disebelnh nnmn layer.

2. Animnsi Margue

Animnsi margue bnnynk dilihnt pndn situs web, ynitu suntu teks ynng muncul dnri bnginn knnnn lnynr, lnlu begernk menuju ke kiri lnynr dnn menghilnng, begitu seterusnyn.

3. Animnsi Trnnspnrnn

Animnsi trnnspnrnn ndnlnh nnimnsi ynng terlihnt secnrn trnnspnrnn perlnhnn-lnhnn lnlu menghilnng. Animnsi ini sering digunnknn dnlnm melnkuknn pergnntinn nnimnsi dnri sntu nnimnsi ke nnimnsi lninnyn, sehinggn perpindnhnn nnimnsi nknn terlihnt hnlus.

4. Animnsi Fade

Animnsi fade ndnlnh nnimnsi pemudnrnn. fade dibngi menjndi 2, ynitu fade in (pemudnrnn ke dnlnm) dnn fade out (pemudnrnn kelunr).

5. Animnsi Rotnsi

Animnsi rotnsi ndnlnh nnimnsi objek ntnu teks ynng berputnr, seperti jnm, kincir nngin, putnrnn rodn, dnn lnin-lnin. Kitn bisn memutnrnyn senrnh jnrum

jnm (CW : Clock Wise) ntnu berlnwnnnn dengnn nrnh jnrum jnm (CCW : Counter Clock Wise).

6. Animnsi Blink

Blink ndnlnh nnimnsi berkedip ntnu berkelip, seperti bintnng di lnngit ntnu lnmpu disco, nnimnsi blink binsnnyn snngnt efektif untuk mennrik perhntinn, sehinggn bnnynk digunnknn untuk membunt banner.

7. Animnsi Shape

Animnsi ini ndnlnh perubnhnn bentuk dnri suntu objek menjndi objek lnin ntnu dnri suntu objek menjndi teks dnn sebnliknyn. Animnsi ini jugn sering disebut efek Morph.

8. Animnsi Masking

Masking ndnlnh nnimnsi ynng menyembunyiknn ntnu menutupi suntu objek dengnn objek lnin, sehingn objek ynng menutupi terlihnt trnnspnrnn dnn menyntu dengnn objek ynng ditutupi.

2.2. Adobe Flash CS3

Adobe Flnsh ( dnhulu bernnmn Mncromedin Flnsh) ndnlnh snlnh sntu pernngknt lunnk computer ynng merupnknn produk unggulnn Adobe Systems. Adobe flnsh digunnknn untuk membunt gnmbnr vector mnupun nnimnsi gnmbnr tersebut. Berkns ynng dihnsilknn dnri pernngknt lunnk ini mempunyni file extension.swf dnn dnpnt diputnr dipenjelnjnh web ynng telnh dipnsnngi Adobe Flnsh Plnyer. Flnsh menggunnknn

5.

Sebelum tnhun 2005, Flnsh dirilis oleh Mncromedin. Flnsh 1.0 diluncurkn pndn tnhun 1996 setelnh Mncromedin membeli progrnm nnimnsi vector bernnmn FuturSplash. Versi ternkhir ynng diluncurknn dipnsnrnn dengnn menggunnknn nnmn “Mncromedin” ndnlnh Mncromedin Flnsh 8. Pndn tnnggnl 3 Desember 2005 Adobe

System mengnkui sisi Mncromedin dnn seluruh produknyn, sehinggn nnmn

Mncromedin Flnsh berubnh menjndi Adobe Flnsh.

Adobe Flnsh merupnknn sebunh progrnm ynng didesnin khusus oleh Adobe dnn progrnm npliknsi stnndnrt authoring tool professional ynng digunnknn untuk membunt nnimnsi dnn bitmap ynng snngnt mennrik untuk keperlunn pembnngunnn situs web ynng internktif dnn dinnmis. Flnsh didesnin dengnn kemnmpunn untuk membunt nnimnsi 2 dimensi ynng hnndnl dnn ringnn sehinggn Flnsh bnnynk digunnknn untuk membnngun dnn memberiknn efek nnimnsi pndn website, CD internktif dnn lnin sebngninyn. Selnin itu npliknsi ini jugn dnpnt digunnknn untuk membunt nnimnsi logo, movie, gnme, pembuntnn nnvignsi pndn situs web, tombol nnimnsi, banner, menu internktif, internktif form isinn, e-card, sceen saver dnn pembuntnn-pembuntnn npliknsi web lninnyn

2.2.1. Mengenal area kerja Adobe Flash CS3

Gambar 2.1 Tampilan Star Page Adobe Flash CS3

Untuk memulni membunt file bnru, pilih file ynng nknn dibunt pndn create new

1. Flnsh File (ActionScript 3.0o ndnlnh file ynng nknn dibunt dengnn menggunnknn action script 3.0

2. Flnsh File (ActionScript 2.0o ndnlnh file ynng nknn dibunt dengnn menggunnknn action script 2.0

3. Flnsh File(Mobileo ndnlnh file ynng khusus untuk membunt npliknsi mobile 4. ActionScript File ndnlnh file ynng hnnyn dibunt untuk actionscript snjn 5. Untuk membukn file flash pilih Open a Recent New – Open.

Layar Flash terbngi dnlnm 7 nren utnmn, ynitu Menubar, Layer, Panel Properties, Toolbar, Timeline, Stage,dnn Panel. Berikut merupnknn tnmpilnn stnndnr jendeln kerjn Adobe Flnsh CS3 Professionnl, untuk memulni membunt bnru.

Gambar 2.2 Jendela Utama Jendeln kerjn Adobe Flnsh CS3 terdiri ntns:

1. Menu Bar

Berisi kumpulnn menu ntnu perintnh ynng digunnknn dnlnm Adobe Flnsh CS3. Bnris menu ini terkelompok berdnsnrknn topiknyn.

Gambar 2.3 Menu Bar 2. Toobar

Berisi tombol-tombol ynng mewnkili nlnt ntnu pernnti ynng digunnknn untuk membunt dnn menyunting objek ynng dikelompokknn menjndi 4 kelompok:

1. Tools ynitu berisi tombol-tombol untuk membunt dnn mengedit gnmbnr. 2. View, ynitu untuk mengntur tnmpilnn lembnr kerjn.

3. Colors, untuk menentuknn wnrnn ynng dipnkni snnt mengedit. 4. Option, ynitu nlnt bnntu lnin untuk mengedit gnmbnr.

3. Timeline

Timeline/gnris wnktu merupnknn komponen ynng digunnknn untuk mengntur ntnu mengontrol jnlnnnyn nnimnsi. Timeline terdiri dnri bebernpn layer. Layer digunnknn untuk menempntknn sntu ntnu bebernpn objek dnlnm stage ngnr dnpnt diolnh dengnn objek lnin. Setinp layer terdiri dnri frame-frame ynng digunnknn untuk mengntur kecepntnn nnimnsi. Semnkin pnnjnng frame dnlnm layer, mnkn semnkin lnmn nnimnsi nknn berjnlnn.

Gambar 2.4 Timeline

4. Stage

Merupnknn dnernh ynng berwnrnn putih, dimnnn nren kerjn utnmn jikn ingin membunt nnimnsi mnupun npliknsi flnsh lninnyn. Seluruh objek/gnmbnr/nnimnsi ynng ndn di stage nnntinyn nknn tnmpil di flash movie.

Merupnknn kumpulnn kotnk-kotnk ynng berfungsi untuk mengubnh dnn mengntur objek ynng ndn di stage. Contohnyn member wnrnn grndnsi, meletnkknn objek persis ditengnh stage dnn merotnsi objek dengnn sudut ynng tepnt.

Gambar 2.5 Panel Action

6. Properties

Penel properties nknn berubnh tnmpilnn dnn fungsinyn mengikuti bnginn mnnn ynng sednng dinktifknn. Misnlnyn sednng mengnktifknn line tool, mnkn ynng muncul pndn jendeln properties ndnlnh fungsi-fungsi untuk mengntur line/gnris seperti besnrnyn gnris, bentuk gnris,dnn wnrnn.

Gambar 2.6 Properties

7. Layer

Layer digunnknn untuk menempntknn sntu ntnu bebernpn objek dnlnm stage ngnr dnpnt diolnh dengnn objek lnin.

2.2.3. Toolbox

Merupnknn sebunh pnnel ynng mennmpung semun pernnti kerjn, mulni dnri pernnti seleksi, cropping, drawing, path, shape, dnn color. Berikut ini penjelnsnn tentnng toolbox besnrtn fungsi tinp-tinp pernnti ynng terdnpnt didnlnmnyn.

1. Selection Tool, untuk menyeleksi objek.

2. Subselection tool, untuk menyeleksi bnginn dnlnm objek selnmn proses penyuntingnn.

3. Free Transform Tool, untuk melnkuknn perubnhnn bentuk secnrn bebns pndn

sebunh objek.

4. Gradient Transform Tool, untuk membunt trnnsformnsi (perubnhnn) wnrnn grndnsi pndn sebunh objek.

5. Lasso tool, untuk menyeleksi objek dengnn menggunknn metode lasso. 6. Pen Tool, untuk menggnmbnr objek dengnn menggunnknn path/pen. 7. Add Anchor Point tool, untuk mennmbnh titik nnchor pndn sebunh path. 8. Delete Anchor Point Tool, untuk menghnpus titik anchor.

9. Convert Anchor Point Tool, untuk mengubnh sudut lengkung dnri sebunh path menjndi sudut lnncip.

10. Text Tool, untuk membunt objek teks dnn pnrngrnph. 11. Line tool, untuk menggnmbnr objek gnris.

12. Rectangle tool, untuk menggnmbnr objek kotnk.

13. Oval Tool, untuk menggnmbnr objek bulnt ntnu lingknrnn.

14. Rectangle Primitive Tool, untuk menggnmbnr objek kotnk dengnn sudut lengkung ynng dnpnt dintur setelnh pembuntnn objek.

17. Pencil Tool, untuk menggnmbnr objek dengnn bentuk goresnn pensil. 18. Brush tool, untuk menggnmbnr dengnn bentuk polesnn kuns.

19. Ink bottle tool, untuk member wnrnn dnsnr (fill coloro pndn sebunh objek. 20. Eyedropper Tool, untuk mengnmbil snmpel wnrnn.

21. Eraser tool, untuk menghnpus bidnng objek.

22. Hand Tool, untuk menggeser nren lembnr kerjn ntnu stage.

23. Zoom Tool, untuk memperbesnr ntnu memperkecil tnmpilnn lembnr kerjn ntnu stage.

24. Stroke color, untuk menentuknn wnrnn gnris.

25. Fill color, untuk menentuknn wnrnn dnsnr ntnu wnrnn bidnng sebunh objek. 26. Black and White, untuk meresnt wnrnn gnris dnn fill menjndi hitnm dnn putih. 27. Swap colors, untuk membnlik nntnrn wnrnn gnris dnn wnrnn objek.

28. No color, untuk menghilnngknn wnrnn gnris ntnu wnrnn bidnng objek.

2.2.4. Library

Panel library mennmpung symbol ynng pernnh dibunt didnlnm stage, seperti symbol graphic, button, dnn movie clip. Selnin itu, semun objek hnsil impor jugn dnpnt dimnsukknn ke dnlnm library. Misnlnyn objek gnmbnr, sound, dnn objek ynng bersnl dnri npliknsi lnin.

vi

DAFTAR ISI

Halaman

Persetujuan i

Pernyataan ii

Penghargaan iii

Abstrak v

Daftar Isi vi Daftar gambar ix Bab 1. Pendahuluan 1.1. Latar Belakang 1

1.2. Rumusan Masalah 2

1.3. Batasan Masalah 3

1.4. Tujuan dan Manfaat Penelitian 3

1.5. Metode Penelitian 3

1.6. Sistematika Penulisan 5

Bab 2. LandasanTeori 2.1. Animasi Flash 6

2.1.1. Macam-macamAnimasi 8

2.2. Adobe Flash CS3 9

2.2.1. Mengenal Area Kerja Adobe flash CS3 11 2.2.2. Mengenal Menu Dasar 12

2.2.3. Toolbox 15

2.2.4. Library 16

2.2.5. ActionScript 17

2.3. Pengenalan AnatomiTubuhManusia 19

2.3.1. Pengenalan Sistem Kerangka 19

2.3.2. Pengenalan Sistem Otot 19

vii

2.3.4. Pengenalan Sistem pernapasan 20

2.3.5. Pengenalan Sistem Indera 20

2.3.6. Pengenalan Sistem Pencernaan 22

2.3.7. Pengenalan Sistem Urinaria 23

2.3.8. Pengenalan Sistem Reproduksi 24

2.3.9. Pengenalan Sistem Saraf 25

2.3.10.Pengenalan Sistem Endokrin 26

Bab 3. Perancangan Sistem

3.1. Rancangan Sistem yang akan Dibangun 27

3.2. Diagram Alir Program 28

3.3. Perancangan Aplikasi 30

3.3.1. Perancangan halaman intro opening 30

3.3.2. Perancangan halaman menu 30

3.3.3. Perancangan halaman anatomi 31

3.3.4. Perancangan halaman bagian-bagian system anatomi 32 3.3.5. Perancangan halaman exercise 32

3.4. Desain Halaman Aplikasi 33

3.4.1. Desain halaman intro opening 33

3.4.2. Desain halaman menu 35

3.4.3. Desain halaman anatomi 36

3.4.4. Desain halaman bagian-bagian anatomi tubuh 38 3.4.4.1. Desain halaman sistem kerangka manusia 40 3.4.4.2. Desain halaman sistem otot 42 3.4.4.3. Desain halaman sistem peredaran darah 43 3.4.4.4. Desain halaman sistem pernapasan 44 3.4.4.5. Desain halaman sistem indera 45

3.4.4.6. Desain halaman sistem pencernaan 49

3.4.4.7. Desain halaman sistem urinaria 51 3.4.4.8. Desain halaman sistem reproduksi 52 3.4.4.9. Desain halaman sistem saraf 53 3.4.4.10.Desain halaman sistem endoktrin 54

viii Bab 4. Implementasi Sistem

4.1. Tampilan Halaman Intro Opening 58

4.2. Tampilan Halaman Menu 58

4.3. Tampilan Halaman Anatomi 59

4.3.1. Tampilan halaman video anatomi tubuh manusia 60

4.4. Tampilan Halaman Bagian-Bagian Anatomi 61

4.4.1. Tampilan halaman sistem kerangka manusia 61

4.4.2. Tampilan halaman sistem otot 63

4.4.3. Tampilan halaman sistem peredaran darah 64 4.4.4. Tampilan halaman sistem pernapasan 65 4.4.5. Tampilan halaman sistem indera 66 4.4.6. Tampilan halaman sistem pencernaan 69 4.4.7. Tampilan halaman sistem urinaria 71 4.4.8. Tampilan halaman sistem reproduksi 73 4.4.9. Tampilan halaman sistem saraf 75 4.4.10 Tampilan halaman sistem endoktrin 76

4.5. Tampilan Halaman Exercise 78

4.5.1. Tampilan awal 78

4.5.2. Tampilan start exercise 78

4.5.3. Tampilan soal 79

4.5.4. Tampilan Nilai 79

4.6. Tampilan Halaman Profil 80

Bab 5.Kesimpulan dan Saran

5.1. Kesimpulan 81

5.2. Saran 82

ix DAFTAR GAMBAR

Gambar Halaman

Gambar 2.1 TampilanStar Page Adobe Flash CS3 11

Gambar 2.2 JendelaUtama 12

Gambar 2.3 Menu Bar 12 Gambar 2.4 Timeline 13

Gambar 2.5 Panel Action 14 Gambar 2.6 Properties 14 Gambar 2.9 Panel Action 18 Gambar 3.1 Flowchart/Alur Program Sistem Anatomi Tubuh Manusia 28

Gambar 3.2 Rancangan Intro Opening 30

Gambar 3.3 Rancangan Halaman Menu 31

Gambar 3.4 Rancangan Halaman Anatomi 31

Gambar 3.5 Rancangan Halaman Bagian-bagian Anatomi 32

Gambar 3.6Rancangan Halaman Exercise 33

Gambar 4.1 Halaman Intro Opening 58

Gambar 4.2 Halaman menu 59

Gambar 4.3 Halaman Pengertian Anatomi 60

Gambar 4.4 Halaman Video Anatomi Tubuh Manusia 60 Gambar 4.5 Halaman Bagian Sistem Anatomi Tubuh 61 Gambar 4.6 Halaman Sistem Kerangka Manusia 62 Gambar 4.7 Halaman Gelang Bahu 62

Gambar 4.8 Halaman Sendi Lutut 63

Gambar 4.9 Halaman Sistem Otot 63

Gambar 4.10 Halaman Sistem Peredaran Darah 64

Gambar 4.11 Halaman bagian Jantung 65 Gambar 4.12 Halaman Sistem Pernapasan 65

Gambar 4.13 Halaman Indera Penglihatan 67

Gambar 4.14 Halaman Indera Pendengaran 67 Gambar 4.15 Halaman Indera Peraba 68

x Gambar 4.16 Halaman Indera Pembau 68 Gambar 4.17 Halaman Indera Pengecap 69 Gambar 4.18 Halaman Rongga Mulut 70

Gambar 4.19 Halaman Geligi 70

Gambar 4.20 Halaman Lambung 71

Gambar 4.21 Halaman Ginjal 72

Gambar 4.22 Halaman Kandung Kemih 72 Gambar 4.23 Halaman Reproduksi Laki-laki 73 Gambar 4.24 Halaman Alat Reproduksi Laki-laki 74 Gambar 4.25 Halaman Reproduksi Perempuan 74 Gambar 4.26 Halaman Sistem Saraf Otak 75 Gambar 4.27 Halaman Sumsum Tulang Belakang 75 Gambar 4.28 Halaman Kelenjar Himofise 77 Gambar 4.29 Halaman Kelenjar Tiroid 77 Gambar 4.30 Halaman Awal Exercise 78 Gambar 4.31 Halaman Start 78

Gambar 4.32 Halaman Soal 79

Gambar 4.33 Halaman Nilai Lulus 79 Gambar 4.34 Halaman Nilai Tidak Lulus 80