Diterima 16 November 2016, Direvisi 12 Desember 2016, Diterima untuk publikasi 16 Desember 2016

## Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba

## Enok Tuti Alawiah
AMIK BSI Bogor Jalan Merdeka 168 Bogor Email: enok.etw@bsi.ac.id
Abstract. Interactive learning media is one of the popular methods that are used today. Interactive animations easier for students in the learning process so that it can absorb knowledge  better.  The  design  of  interactive  animations  have  basic  knowledge  of  the dangers of drugs meant for the primary school level students to more easily understand the basic knowledge of the dangers of drugs to health, to determine the shape and type of drug and its effects on human health. The development method used is the waterfall model (Rosa Shalahudin 2014: 28). Results from this study is the design of interactive animation  is  easier  for  users  to  know  and  knowing  the  types  of  narcotics  and psychotropic substances, and know the dangers inherent in it. Results from testing of the user  is  that  students  can  better  understand  the  material  provided  by  the  method  of learning interesting and interactive.
Kata kunci: e-learning, animation, drugs

## 1 Pendahuluan
Media  pembelajaran  interaktif  adalah  salah  satu  metode  pembelajaran  yang popular digunakan saat ini. Animasi interaktif memudahkan siswa dalam proses pembelajaran  sehingga  dapat  menyerap  ilmu  dengan  lebih  baik.      Proses penciptaan  animasi  berada  pada  teknik  gambar,  efek  gerak  atau  perubahan bentuk  yang  terjadi  selama  beberapa  waktu  ( timeline ).  Perancangan  animasi interaktif  pengetahuan  dasar  bahaya  narkoba  ini  dimaksudkan  agar  para  siswa tingkat  sekolah  dasar  lebih  mudah  memahami  pengetahuan  dasar  bahaya narkoba  bagi  kesehatan,  untuk  mengetahui  bentuk  dan  jenis  narkoba  serta efeknya bagi kesehatan tubuh manusia.
Pada  saat  ini  masalah  narkoba  di  Indonesia  masih  merupakan  musuh  terbesar bangsa  Indonesia.  Berdasarkan  hasil  data  laporan  akhir  survei  nasional perkembangan  penyalahguna  narkoba  tahun  anggaran  2014,  diperkirakan jumlah  penyalahgunaan  narkoba  sebanyak  3,8  juta  sampai  4,1  juta  orang  atau

## Enok Tuti Alawiah
sekitar  2,10%  sampai  2,25%  dari  total  seluruh  penduduk  Indonesia  yang berisiko terpapar narkoba di tahun 2014 (www.bnn.go.id : 2015) . Dampak dari penyalahgunaan  narkotika  dan  psikotropika  yang  mengancam  kelangsungan hidup dan masa depan penggunanya sangatlah besar. Hal inilah yang wajib kita waspadai  untuk  selalu  melakukan  upaya  pencegahan  pada  berbagai  tingkatan, mengingat efek negatif narkoba tanpa membedakan strata sosial, ekonomi, usia maupun  tingkatan  pendidikan.  Menurut  data  press  release  akhir  tahun  2015 Badan  Narkotika  Nasional  (BNN)  bersama  pusat  penelitian  dan  kesehatan (Puslitkes)  Universitas  Indonesia,    sepanjang  tahun  2015  BNN  telah mengungkap  sebanyak  102  kasus  Narkotika  yang  merupakan  sindikat jaringan nasional dan internasional, sebanyak 1.593 dari 38.427 pecandu, penyalahgunaan, dan korban penyalah guna narkoba direhabilitasi melalui balai besar rehabilitasi yang dikelola oleh BNN (www.bnn.go.id : 2015).

## 2 Landasan Teori

## 2.1 Animasi
Animasi  adalah  rangkaian  gambar  yang  disusun  secara  berurutan  menurut Zeembry  (2006:1).  Sedangkan  menurut  Ramadianto  (2008:  21)  “Animasi adalah  gambar  yang  bergerak  dari  sekumpulan  objek  (gambar)  yang  disusun secara  beraturan  mengikuti  alur  pergerakan  yang  telah  ditentukan  pada  setiap pertambahan  hitungan  waktu  yang  terjadi”.  Pengertian  animasi  secara  umum dapat  di  definisikan  sebagai  suatu  rangkaian  adegan  ( sequence) gambar  yang ditampilkan  pada  tenggang  waktu  ( timeline )  tertentu  sehingga  tercipta  sebuah ilusi gambar bergerak.

## 2.2 Multimedia
Multimedia  adalah  kombinasi  dari  teks  yang  dimanipulasi  secara  digital,  foto, seni  grafis,  suara,  animasi  dan  elemen  video  menurut  Purnama  (2013:4). Ditinjau  dari  segi  bahasa,  terdiri  dari  dua  suku  kata  yaitu  “multi”  yang  bearti banyak  atau  lebih  dari  satu  dan  “media”  yang  memiliki  arti  wadah  atau  alat. Secara garis besar multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi, audio dan video dengan alat bantu  ( tool )  dan  koneksi  ( link )  sehingga  pengguna  dapat  melakukan navigasi, berinteraksi, berkarya dan berkomunikasi
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 137

## 2.3 Media Pembelajaran
Media  pembelajaran adalah  segala  sesuatu  yang  berupa  alat,  baik  itu  berupa buku,  televisi,  koran,  majalah,  internet  dan  lain  sebagainya  yang  membantu pengajar  dan  peserta  didik  dalam  mencapai  tujuan  pembelajaran  melalui penggunaan alat bantu pembelajaran yang tepat dan sesuai dengan karakteristik penggunanya.
Ada  tiga  jenis  media  pembelajaran  yang  dapat  dikembangkan  dan digunakan dalam kegiatan pembelajaran oleh guru di sekolah, yaitu:
1. Media  visual  adalah  media  yang  hanya  dapat  dilihat  dengan menggunakan  indra  penglihatan  terdiri  atas  media  yang  dapat diproyeksikan  (projek  visual)  dan  media  yang  tidak  dapat diproyeksikan (non projek visual).
2. Media  audio  adalah  media  yang  mengandung  pesan  dalam bentuk  auditif  yang  dapat  merangsang  pikiran,  perasaan, perhatian,  dan  kemauan  para  siswa  untuk  mempelajari  bahan ajar dan jenisnya.
3. Media  audio  visual  merupakan  kombinasi  dari  media  audio dan media audio visual atau media pandang dengar”.

## 2.4 Waterfall Model
Model  SDLC  air  terjun  ( waterfall )  sering  juga  disebut  model  sekuensial  linier ( sequential  linear )  atau  alur  hidup  klasik  ( classic  life  cycle ).  Model  air  terjun menyediakan  pendekatan  alur  hidup  perangkat  lunak  secara  sekuensial  atau terurut  dimulai  dari  analisis,  desain,  pengkodean,  pengujian,  dan  tahap pendukung ( support ) (Rosa A.S dan M.Shalahuddin , 2014:28). Berikut adalah gambaran waterfall model :
Sumber : Rosa A.S dan M.Shalahuddin (2014:29)

## Enok Tuti Alawiah
Gambar 1 waterfall model
1. Analisis kebutuhan perangkat lunak
Proses  pengumpulan  kebutuhan  dilakukan  secara  intensif  untuk mespesifikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak  seperti  apa  yang  dibutuhkan  oleh user .  Spesifikasi  kebutuhan perangkat lunak pada tahap ini perlu didokumentasikan.
2. Desain
Desain  perangkat  lunak  adalah  proses  multi  langkah  yang  fokus  pada desain  pembuatan  program  perangkat  lunak  termasuk  struktur  data, arsitektur  perangkat  lunak,  representasi  antarmuka,  dan  prosedur pengkodean.  Tahap  ini  mentranslasi  kebutuhan  perangkat  lunak  dari tahap  analisis  kebutuhan  ke  representasi  desain  agar  dapat diimplementasikan  menjadi  program  pada  tahap  selanjutnya.  Desain perangkat  lunak  yang  dihasilkan  pada  tahap  ini  juga  perlu didokumentasikan.
2. Pembuatan kode program
Desain  harus  ditranslasikan  ke  dalam  program  perangkat  lunak.  Hasil dari tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada tahap desain.
3. Pengujian
Pengujian fokus pada perangkat lunak dari segi lojik dan fungsional dan memastikan  bahwa  semua bagian  sudah  diuji.  Hal ini  dilakukan  untuk meminimalisir  kesalahan  ( error )  dan  memastikan  keluaran  yang dihasilkan sesuai dengan yang diinginkan.
4. Pendukung ( support ) atau pemeliharaan ( maintenance )
Tidak  menutup  kemungkinan  sebuah  perangkat  lunak  mengalami perubahan  ketika  dikirimkan  ke user .  Perubahan  bisa  terjadi  karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat  lunak  harus  beradaptasi  dengan  lingkungan  baru.  Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai  dari  analisis  spesifikasi  untuk  perubahan  perangkat  lunak  yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.

## 3 Hasil dan Pembahasan

## 3.1 Analisa Kebutuhan Sistem
Analisa  kebutuhan  sistem  dibagi  menjadi  dua  jenis  yaitu  analisis  kebutuhan fungsional, dan analisis non fungsional.
1. Analisa Kebutuhan Fungsional
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 139
Kebutuhan fungsional berisi proses-proses apa saja yang nantinya dilakukan  oleh  sistem.  Kebutuhan  fungsional  juga  berisi informasi-informasi  apa  saja  yang  harus  ada  dan  dihasilkan  oleh sistem.  Dalam  penyusunan  aplikasi  ini  kebutuhan  fungsionalnya adalah sebagai berikut :
a. Pada aplikasi ini terdapat lima menu utama yang dapat dipilih yaitu  home,  materi,  evaluasi,  about,  dan  exit.  Berikut penjelasan pada setiap menu :
1) Menu home merupakan menu awal aplikasi.
2) Menu  materi  terdapat  tiga  sub  menu  materi  tentang pengetahuan dasar bahaya narkoba yang meliputi :
a) Apa itu narkoba. b) Efek dari narkoba.
c) Video edukasi. 3) Menu evaluasi merupakan menu yang berisi soal-soal quis tentang  pengetahuan  dasar  bahaya  narkoba  yang  diambil dari  isi  menu  materi,  yang  bisa  dijawab  oleh  pengguna aplikasi. 4) Menu about berisi tentang informasi aplikasi dan pembuat aplikasi  yang  didalamnya  terdapat  dua  sub  menu diantaranya : a) Menu help . b) Menu profile . 5) Menu exit merupakan  menu  untuk  keluar  dari  aplikasi tersebut.
b. Pada  aplikasi  ini  mampu  menampilkan  materi  berupa  teks, audio, gambar, serta animasi.
2. Analisis Kebutuhan Non Fungsional Kebutuhan  non  fungsional  menjabarkan  apa-apa  saja  yang  harus dimiliki  oleh  sistem  agar  dapat  berjalan.  Analisis  kebutuhan  non fungsional  bertujuan  untuk  mengetahui  sistem  seperti  apa  yang cocok  diterapkan,  perangkat  keras  dan  perangkat  lunak  apa  saja yang  dibutuhkan.  Pembuatan  aplikasi  ini  dibuat  untuk  mampu bekerja  dengan  menggunakan  komputer  yang  memiliki spesifikasi  rendah  atau  dengan  kata  lain  dapat  dijalankan  pada komputer pada umumnya, tanpa memerlukan spesifikasi khusus.

## 3.2 Implementasi Sistem
3.2.1 Storyboard

## Enok Tuti Alawiah
Berikut adalah perancangan storyboard menu utama.
Gambar 2. Storyboard

## 3.2.2 Menu Utama
Tampilan  menu  utama  terdiri  dari  5  tombol  menu  dan  3  tombol  navigasi diantaranya  adalah  Home  berisi  tampilan  menu  utama,  Materi  berisi  sub  bab pembahasan  materi,  Evaluasi  berisi  soal-soal  tentang  materi  narkoba, About berisi  tentang  cara  penggunaan  dan profile pembuat, Exit untuk  keluar  dari aplikasi,  Tombol  on  untuk  menyalakan  suara,  Tombol  off  untuk  mematikan suara, Tombol volume untuk mengatur volume suara.
SKETSA VISUAL
Bagian menu utama  terdapat 5 tombol utama yaitu home,  materi,
evaluasi, about, exit. dan 3 tombol navigasi  yaitu play, stop, volume. Serta  animasi slide gambar di papan reklame AUDIO Happyness_Ba cksound_effect .wav
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 141

## Gambar 3. Menu Utama

## 3.2.3 Menu Materi
Tampilan  menu  materi  terdiri  dari  8  tombol  menu  dan  3  tombol  navigasi diantaranya  yaitu  Home  berisi  tampilan  menu  utama,  Materi  berisi  sub  bab pembahasan  materi,  Evaluasi  berisi  soal-soal  tentang  materi  narkoba, About berisi  tentang  cara  penggunaan  dan profile pembuat, Exit untuk  keluar  dari aplikasi, Apa itu narkoba berisi materi tentang narkoba, Efek dari narkoba berisi tentang  efek  narkoba  dan  menu  Video  edukasi  berisi  tentang  video  edukasi narkoba.
Gambar 4. Menu Materi

## 3.2.4 Menu Apa itu Narkoba
Tampilan  apa  itu  narkoba  terdiri  dari  5  tombol  menu  dan  5  tombol  navigasi diantaranya  yaitu  Home  berisi  tampilan  menu  utama,  Materi  berisi  sub  bab pembahasan materi, Evaluasi berisi soal-soal tentang materi narkoba dan About berisi tentang cara penggunaan dan profile pembuat.

## Enok Tuti Alawiah

## Gambar 5. Apa itu Narkoba

## 3.2.5 Menu Efek Narkoba
Tampilan efek dari narkoba ? terdiri dari 5 tombol menu dan 6 tombol navigasi diantaranya  Home  berisi  tampilan  menu  utama,  Materi  berisi  sub  bab pembahasan materi dan Evaluasi berisi soal-soal tentang materi narkoba.

## Gambar 6. Menu Efek Narkoba

## 3.2.6 Menu Video Edukasi
Tampilan  Video  Edukasi  terdiri  dari  5  tombol  menu  dan  5  tombol  navigasi diantaranya video edukasi bahaya penggunaan narkoba.
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 143
Gambar 7. Video Edukasi

## 3.2.7 Menu Evaluasi
Tampilan menu evaluasi berisi menu field yang dapat di isi oleh pengguna.
Gambar 8. Menu Evaluasi

## 3.2.8 Menu Soal Latihan
Menu soal latihan berisi soal mengenai pengetahuan dasar narkoba.

## Enok Tuti Alawiah

## Gambar 9. Soal Latihan

## 3.3 Pengujian Sistem
Pengujian  dilakukan  dengan  metode blackbock testing  yaitu  menguji  masukan dan keluaran.berikut adalah hasil pengujiannya:
Tabel 1: Pengujian Blackbox
Input/Efent Proses Output/Next
Stage
Hasil
Tombol on (release)
{gotoAndPlay(1);
} Menu
“Home”
Sesuai Tombol on (release)
{gotoAndPlay(210);
} Menu
“Materi”
Sesuai Tombol on (release) {gotoAndPlay(385); } Menu “Evaluasi” Sesuai Tombol on (release)
{gotoAndPlay(325);
}
Menu “About”
Sesuai
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 145 Tombol on (release) { gotoAnd Play(591); stopAllS ounds(); } Menu “Exit” Sesuai Tombol Pause = false; function mainkanMusik() { musik = new Sound(); musik.attachSound(" aaa"); }
stop_btn.onPress =
function() { posisi = Math.floor(musik.po sition/1000); musik.sto p(); Pause = true; }; play_btn.onPress = function() { if (Pause)
{ musik.start(posisi,
Musik Play ketika tombol Play ditekan, Musik Stop ketika tombol Stop ditekan Sesuai
1); Pause = false; } musik.onSoundCom plete = function() { mainkan
Musik();
};
};
mainkanMusik(); Tombol lagu = new Sound(); lagu.attachSound("a
aa"); lagu.start(0, 999); der.onPress = function() { kanan = _root.panjang._x+16 5; kiri = _root.panjang._x; atas = _root.panjang._y; bawah = _root.panjang._y; startDrag (this, true, kiri, atas,
kanan, bawah);
Suara akan mengecil dan membesar ketika tombol volume digerakan Sesuai
Perancangan Animasi Interaktif Pengetahuan Dasar Bahaya Narkoba 147
};
der.onMouseMove = function() { myPoint = new Object(); myPoint. x = this._x; myPoint. y = this._y; _root.pan jang.globalToLocal( myPoint); _root.lag
u.setVolume(myPoi
nt.x); }; der.onRelease = der.onReleaseOutsid e=function () { stopDrag
();  };

## 4 Kesimpulan
Berdasarkan penelitian yang telah dilakukan dapat ditarik kesimpulan bahwa
1. Perancangan animasi interaktif pengetahuan dasar bahaya narkoba dapat digunakan  untuk  menambah  ilmu  pengetahuan  bagi  siswa  usia  sekolah dasar dan menengah.
2. Perancangan animasi dibuat secara interaktif sehingga dapat mempermudah  siswa  dalam  mencerna  bahaya  penggunaan  narkoba  bagi kesehatan.
3. Perancangan  animasi  interaktif  inidapat  di  gunakan  sebagai  bahan kampanye bagi pencegahan peredaran narkoba di kalangan pelajar.

## 5 Referensi
[1] Purnama,  B.  2013.  Konsep  Dasar  Multimedia,  Penerbit  Ghara  Ilmu, Yogyakarta.
[2] Ramadianto,  Yuda  Anggara.  2008.  Membuat  Gambar  Vektor  dan Animasi  Atraktif  dengan  Macromedia  Flash  Profesional  8.  Bandung  : YRMA WIDYA.
[3] Sukamto,  Rosa  Arini  dan  M.  Shalahudin.2014.  Modul  Pembelajaran Rekayasa Perangkat Lunak Terstuktur dan Berorientasi Objek. Bandung: Modula Bandung
[4] Zeembry.2006.60  Efek  Animasi  Spektakuler  Flash  8.  Penerbit  Elek Media Komputindo. Jakarta
[5] www.bnn.go.id (1 Juni 2016)