Layer Enter
//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;
//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;
loadMovieNumo“soal.swf”, 0);
4. Halaman Bagian Sistem Anatomi
loadMovieNumo"gbr_anatomi.swf", 0);
4.3 Layer sistem peredaran darah
onorelease){
onEnterFrame = function o) { skor = +score;};
onEnterFrame = function o) { skor = +score;};
onEnterFrame = function o) { skor = +score;};
onEnterFrame = function o) { skor = +score;};
onEnterFrame = function o) { skor = +score;}; a.onRelease = functiono) {
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
BABB3B B
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
Diagram diatas dapat dijelaskan sebagai berikut:
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.
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.
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
diinginkan. Dan juga terdapat dua tgmbgl yaitu intro untuk kembali ke halaman intro opening, dan exit untuk keluar dari aplikasi.
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
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.
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
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”
3.4.2.BBDesainBhalamanBmenuB 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
5. Pada setiap halaman aplikasi terdapat tgmbgl intro dan exit yang masingk masing diubah menjadi button dan diberi ActionScript sebagai berikut:
Tgmbgl intro:
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
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.
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
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");}
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
5. Pilih insert keyframe pada frame 2 layer yang sama buat judul “Gelang Bahu” 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
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 .
3.4.4.3.BBDesainBhalamanBsistemBperedaranBdarahB 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.
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
menggunakan Free Transform toos berfungsi agar ketika user mengarahkan 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”
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
perbesar gambar menggunakan Free Transform toos berfungsi agar ketika user
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
animasi. Pada frame 1 dan frame 45 pilih insert Keyframe, pada frame 1 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
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.
3.4.4.7.BBDesainBhalamanBsistemBurinariaB 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
menjadi besar. Import gambar alat reprgduksi Perempuan ke sibrary lalu drag
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
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
Pada layer background pilih insert Keyframe pada frame 2. Buat teks “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
BABB4B 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
bagian-bagian anatomi tubuh manusia, dan tombol exercise untuk masuk ke soal
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 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..
4.4.BTampilanBHalamanBBagian-BagianBAnatomiB 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
1.BTampilanBkerangkaBmanusiaB
B
GambarB4.6BHalamanBSistemBKerangkaBManusiaB
B
2.BTampilanBgelangBbahuB
B
3.BTampilanBsendiBlututB
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
2.BTampilanBbagian-bagianBjantungB
B
B GambarB4.11BHalamanBbagianBJantungBB
B
4.4.4.BTampilanBhalamanBsistemBpernapasanB
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. Tombol menu berfungsi untuk kembali
ke halaman menu, dan tombol exit untuk keluar dari aplikasi.Contoh tampilan:
B
B
B
B
B
B
B
B
1.BTampilanBinderaBpenglihatanB
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
5.BTampilanBinderaBpengecapB/BlidahB
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
1.BTampilanBronggaBmulutB
B
B GambarB4.17BHalamanBRonggaBMulutB
2.BTampilanBgeligiB
B
B GambarB4.18BHalamanBGeligiB
3.BTampilanBlambungB
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
1.BTampilanBginjalB
B
B GambarB4.20BHalamanBGinjalB
2.BTampilanBkandungBkemihB
B
B GambarB4.21BHalamanBKandungBKemihB
B B B
4.4.8.BBTampilanBhalamanBsistemBreproduksiB
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
GambarB4.23BHalamanBAlatBReproduksiBLaki-lakiB B
2.BSistemBreproduksiBperempuanB
B
B GambarB4.24BHalamanBReproduksiBPerempuanB
B B
B
4.4.9.BBTampilanBhalamanBsistemBsarafB
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
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
1.BTampilanBkelenjarBhimofiseB
B
B GambarB4.27BHalamanBKelenjarBHimofiseB
B
2.BTampilanBkelenjarBtiroidB
B
B GambarB4.28BHalamanBKelenjarBTiroidB
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.
4.5.3.BBTampilanBsoalB
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
BABB5B B
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
BAB 2
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
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
2.1.1. Macam-macam animasi
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,
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
bnhnsn pemogrnmnn bernnmn ActionScript ynng muncul pertnmn knlinyn pndn Flnsh
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
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
2.2.2. Mengenal menu dasar
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
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
5. Panel
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
