Anda di halaman 1dari 51

LAPORAN AKHIR

FINAL PROJECT KONSENTRASI


APLIKASI MEDIA INTERAKTIF PENGENALAN JENIS – JENIS
KENDARAAN TRANSPORTASI BERBASIS FLASH PLAYER DENGAN
MENGGUNAKAN ADOBE FLASH CS6

Disusun Sebagai Syarat untuk Kelususan Mata Kuliah Final Project Konsentrasi Program
Studi Teknik Informatika Universitas Ibnu Sina

DISUSUN OLEH :
RAMADIANTO CHAIRUN
191055201144

PROGRAM STUDI FAKULTAS TEKNIK INFORMATIKA


UNIVERSITAS IBNU SINA
2021
HALAMAN PENGESAHAN

APLIKASI MEDIA INTERAKTIF


PENGENALAN JENIS – JENIS KENDARAAN TRANSPORTASI
BERBASIS FLASH PLAYER DENGAN MENGGUNAKAN ADOBE
FLASH CS 6

Laporan Praktikum Animasi dan Multimedia ini dibuat Oleh :


Nama : Ramadianto Chairun
NPM : 191055201144
Program Studi : Teknik Informatika
Laporan ini diajukan untuk memenuhi persyaratan kelulusan mata kuliah Final Project
Konsentrasi, pada Program Studi Teknik Informatika Universitas Ibnu Sina dan telah diperiksa
oleh Asisten Pembimbing, Dosen Pengampu dan Kepala Laboratorium Komputer Program Studi
Teknik Informatika Universitas Ibnu Sina

Batam, 29 Agustus 2021


Ka.Lab Teknik Informatika Dosen Pengampu

Hanafi, M.Kom Hanafi, M.Kom


NIDK. 8873810016 NIDK. 8873810016
KATA PENGANTAR

Puji syukur kita panjatkan kepada Tuhan Yang Maha Esa, yang telah memberikan segala
rahmat dan karunia-Nya sehingga laporan ini berhasil diselesaikan pada waktunya, yang berjudul
“Aplikasi Media Interaktif Jenis – jenis Kendaraan Transportasi Dengan Menggunakan Adobe
Flash CS6”.
Diharapkan laporan ini dapat memberi wahana pembelajaran bagi kita semua, laporan ini
dibuat dari hasil Pratikum penulis dengan beberapa bantuan dari berbagai pihak untuk membantu
menyelesaikan tantangan dan hambatan selama mengerjakan laporan.
Dengan selesainya laporan Praktikum ini tidak terlepas dari bantuan banyak pihak yang
telah memberikan masukan-masukan kepada penulis. Untuk itu penulis mengucapkan terima
kasih kepada :
1. Bapak Ir.Larisang, MT., IPM Yang Terhormat Selaku Ketua Dekan Fakultas Teknik
Universitas Ibnu Sina
2. Bapak Okta Veza, S.Kom, M.Kom Selaku Ketua Prodi Teknik Informatika Universitas Ibnu
Sina.
3. Bapak Hanafi, M.Kom Selaku Dosen Pengampu Matakuliah Final Project Konsentrasi.
4. Bapak Hanafi, M.Kom. Selaku Kepala Laboratorium Teknik Informatika.
5. Teman – Teman di kelas 6a Teknik Informatika
Penulis menyadari bahwa laporan ini masih jauh dari kesempurnaan, oleh karena itu penulis
mengharapkan saran dan kritik yang bersifat membangun untuk lebih menyempurnakan laporan
ini.

Batam,29 Agustus 2021

Ramadianto Chairun
HALAMAN PERSEMBAHAN

Laporan Praktikum Animasi dan Multimedia ini dipersembahkan untuk :


1. Untuk Allah SWT karena atas rahmat dan karunia-Nya Final Project Konsentrasi
ini dapat diselesaikan dengan baik.
2. Kedua orang tua dan keluarga yang selalu memberikan doa, motivasi dan dukungan
materi maupun non materi sehingga laporan praktikum pemrograman dapat selesai
dengan baik.
3. Hanafi, M.Kom Selaku Dosen Pengampu Matakuliah Final Project Konsentrasi.
4. Bapak Hanafi,M.Kom selaku Kepala Laboratorium Teknik Informatika Bapak
5. Okta Veza, M.Kom selaku ketua program Studi Teknik Informatika.
6. Untuk memenuhi salah satu syarat untuk mengikuti response dan sebagai tugas
akhir matakuliah Final Project.
Diharapkan laporan ini dapat bermanfaat bagi pihak yang membutuhkannya.
MOTTO

“Pelajari Kesalahan dari masa lalu , Perbaiki kesalahan dimasa mendatang.”


TAKARIR

Adobe Flash CS6 : Perangkat Lunak Animasi


End User : Pengguna Akhir
Flowchart : Alur Jalannya Program
Computer : Komputer
Game : Permainan
Icon : Ikon atau Simbol
Input : Hasil Masuk
Output : Hasil Keluar
Platform : : Rencana kerja, program
Screenshot : Hasil Tangkapan Layar
Storyboard : Alur Cerita atau Ide dari Pengarang ke dalam Bentuk
Scene
Scene : Tempat dimana Kejadian Itu Belangsung pada Jalan
Cerita
User : Pengguna
DAFTAR ISI

HALAMAN PENGESAHAN ........................................................................................................ 2


KATA PENGANTAR .................................................................................................................... 3
HALAMAN PERSEMBAHAN ..................................................................................................... 4
MOTTO .......................................................................................................................................... 5
TAKARIR ....................................................................................................................................... 6
DAFTAR ISI................................................................................................................................... 7
DAFTAR TABEL ........................................................................................................................... 9
DAFTAR GAMBAR .................................................................................................................... 10
BAB I PENDAHULUAN ............................................................................................................. 11
1.1 Latar Belakang .............................................................................................................. 11
1.2. Batasan Masalah ............................................................................................................. 11
1.3 Tujuan Laporan Praktikum ............................................................................................ 11
1.4. Manfaat Laporan Praktikum .......................................................................................... 12
BAB II LANDASAN TEORI ....................................................................................................... 14
2.1 Aplikasi .......................................................................................................................... 14
2.2 Media Interaktif .............................................................................................................. 14
2.3 Multimedia Interaktif ..................................................................................................... 14
2.5 Berbasis FlashPlayer ...................................................................................................... 17
2.6 Fungsi toolbox ................................................................................................................ 20
2.7 Flowchart ........................................................................................................................ 21
2.7 Story board ..................................................................................................................... 25
BAB III PERANCANGAN .......................................................................................................... 26
Konsep ...................................................................................................................................... 26
3.1 Desain ............................................................................................................................. 27
3.1.1 Storyboard .................................................................................................................. 27
3.1.2 Flowchart ................................................................................................................... 30
3.2 Material Collection ......................................................................................................... 31
3.2.1 Proses Start................................................................................................................. 31
3.2.2 profil ........................................................................................................................... 32
3.2.3 Menu keluar ............................................................................................................... 33
3.3 Membuat Scene Start ..................................................................................................... 33
3.3.1 Cara Untuk Memasukkan background ....................................................................... 34
3.3.2 Cara Membuat menu start ......................................................................................... 34
3.3.3 Cara Membuat Tombol pada Scene Intro .................................................................... 35
3.4 Membuat Scene Menu ....................................................................................................... 36
3.4.1 Cara Menambah File dan Teks pada Scene Materi ................................................ 36
3.4.2 Cara Membuat Tombol pada Scene Materi ............................................................ 36
3.5 Pembuatan Scene Profile ................................................................................................ 38
3.5.1 Cara Membuat Tombol pada Scene Profile ............................................................ 38
3.6 Pembuatan Tombol keluar ............................................................................................. 39
3.6.1 Cara Membuat Tombol keluar ................................................................................ 39
4.1 Publish Aplikasi ............................................................................................................. 40
4.1.1. General ........................................................................................................................ 41
4.2 Pembahasan dan Screenshot Aplikasi ............................................................................ 46
4.2 Penjelasan Aplikasi ........................................................................................................ 47
4.2.1 Persiapan Install Aplikasi .......................................................................................... 47
4.3 Setelah Aplikasi Sudah Install........................................................................................ 50
4.3.1 Halaman Proses Menu utama................................................................................. 50
4.3.2 Halaman Materi .................................................................................................... 50
BAB V PENUTUP........................................................................................................................ 52
5.1 Kesimpulan ................................................................................................................... 52
5.2 Saran ............................................................................................................................. 52
DAFTAR TABEL

Table 2. 1 Flowchart
Table 3. 1 Table Konsep
Table 3. 2 Storyboard
Table 3. 3 Intro
Table 3. 4 Material Collection Intro
Table 3. 5 Material Collection Petunjuk Penggunaan Aplikasi
Table 3. 6 Material Collection Profil penggunaan aplikasi
Table 3. 7 Material Collection Materi
Table 3. 9 Material Collection Pustaka
Table 4. 1 Spesifikasi Device
DAFTAR GAMBAR
BAB I
PENDAHULUAN

1.1 Latar Belakang


Perkembangan teknologi saat ini sangat cepat dan masih akan terus berkembang tanpa
ada batasan. Dengan adanya perkembangan ini secara tidak langsung manusia mau tidak mau
harus mengikuti perkembangan teknologi. Salah satu perkembangan teknologi yang berkembang
sangat cepat adalah perkembangan teknologi dalam bidang komputerisasi.
Komputer merupakan sebuah perangkat teknologi yang sangat penting dan tidak bisa lepas
dari kehidupan sehari-hari manusia. Komputer juga mempunyai berbagai kegunaan. Seperti
mengerjakan pekerjaan kantor, tugas kuliah, media informasi atau komunikasi, sebagai media
hiburan ,dan masih banyak lagi. Komputer juga terbagi dari berbagai komponen-komponen
komputer. Dengan dasar komponnen-komponen komputer tersebut tujuan dari makalah ini
adalah membahas tentang pengertian komponen-komponen komputer dan fungsinya.
Berdasarkan latar belakang diatas maka penulis menuangkan dalam bentuk laporan
praktikum animasi dan multimedia yang berjudul “Aplikasi Pengenalan Jenis – Jenis
Transportasi berbasis FlashPlayer dengan mengggunakan Adobe Flash cs6”
Rumusan Masalah yang bisa didapat dari Latar Belakang ini adalah sebagai berikut:
1. Bagaimana agar media pelajaran ini bisa berguna untuk mempelajari Jenis – Jenis Kendaraan
Transportasi?
2. Apakah dengan adanya media pembelajaran ini kita dapat mengenal Transportasi
?.

1.2. Batasan Masalah


Batasan masalah pada kasus ini adalah hanya untuk membahas mengenai pengenalan fitur
pada Adobe Flash dan membahas proses membuat Aplikasi Pengenalan Transportasi berbasis
FlashPlayer dengan menggunakan adobe Flash

1.3 Tujuan Laporan Praktikum


Tujuan dari Laporan Pratikum ini adalah untuk media pembelajaran Transportasi berbasis
FlashPlayer
1.4. Manfaat Laporan Praktikum
Adapun manfaat Laporan Pratikum ini adalah dengan adanya aplikasi ini,
diharapkan pelajar dengan hal yang positif dan bisa menumbuhkan rasa ingin tahu dengan ilmu
pengetahuan.
BAB I PENDAHULUAN
Dalam bab ini berisikan tentang Latar Belakang Masalah, Rumusan Masalah, Batasan
Masalah, Tujuan Laporan Praktikum, Manfaat Laporan Praktikum dan, Sistematika Penulisan
Laporan Praktikum.
BAB II LANDASAN TEORI
Dalam bab ini berisikan tentang beberapa teori yang digunakan pada Laporan Praktikum
ini.
BAB III PERANCANGAN
Dalam bab ini berisikan tentang langkah-langkah dalam pembuatan Aplikasi Pengenalan
Transportasi berbasis FlashPlayer dengan mengggunakan adobe Flash cs6”

BAB IV HASIL DAN PEMBAHASAN


Dalam bab ini berisi hasil dan pembahasan mengenai Aplikasi transportasi berbasis
FlashPlayer dengan menggunakan adobe Flash cs 6

BAB V PENUTUP
Dalam bab ini berisi tentang kesimpulan dan saran dari seluruh Laporan Praktikum.
DAFTAR PUSTAKA
Dalam daftar ini berisikan sumber referensi yang digunakan untuk pembuatan Laporan
Praktikum tersebut.
BAB II
LANDASAN TEORI

2.1 Aplikasi
Aplikasi merupakan program yang berisikan perintah-perintah untuk melakukan pengolahan
data [2]. Aplikasi secara umum adalah suatu proses dari cara manual yang ditransformasikan ke
komputer dengan membuat sistem atau program agar data diolah lebih berdaya guna secara optimal.
Aplikasi (application) juga bisa disebut sebagai perangkat lunak (software) yang dibuat oleh suatu
perusahaan komputer untuk mengerjakan tugas-tugas tertentu, misalnya Microsoft Word, dan
Microsoft Excel [3] (Maulana 2015:120).

2.2 Media Interaktif


Media Interaktif adalah metode komunikasi di mana output dari media berasal dari
masukan dari pengguna.[1] Media interaktif yang bekerja dengan pengguna partisipasi. Media
masih memiliki tujuan yang sama tapi masukan pengguna menambahkan interaksi dan
membawa fitur-fitur menarik untuk sistem untuk kenikmatan yang lebih baik.Berdasarkan
penjelasan pada jenis-jenis media pembelajaran, bahwa Seels & Glasgow (dalam
Arsyad,2002:33) mengelompokkan media interaktif merupakan kelompok pilihan media
teknologi mutakhir.Media teknologi mutakhir sendiri dibedakan menjadi (1) media berbasis
telekomunikasi, misalkan teleconference,kuliah jarak jauh, dan (2) media berbasis
mikroprosesor, misalkan computer-assistted instruction,permainan komputer, sistem tutor
intelejen, interaktif,hypermedia, dan compact (video) disc.

2.3 Multimedia Interaktif


Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat pengontrol yang
dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk
proses selanjutnya. Contoh multimedia interaktif adalah: multimedia pembelajaran interaktif, aplikasi
game, dan lain-lain [2] (Gunawan 2015 : 10).
Multimedia terdiri dari berbagai jenis media untuk menyampaikan pesan/informasi kepada
pengguna sesuai tujuan dan fungsinya. Terdapat beberapa komponen utama multimedia yang
dirangkai dalam format digital yang disusun sedemikian rupa sehingga menarik dan memotivasi
pengguna untuk belajar. Komponen-komponen tersebut adalah teks, gambar, audio, video, dan
animasi. Satu komponen lagi bisa ditambahkan yaitu interaktif, sehingga multimedia bisa disebut
sebagai „multimedia interaktif‟ [2]. (Gunawan 2015 : 11).
Berdasarkan hasil penelitian Gunawan et al [10], dapat disimpulkan bahwa penguasaan
konsep mahasiswa yang belajar menggunakan multimedia interaktif lebih tinggi dibandingkan
dengan mahasiswa yang diajarkan secara konvensional. Pembelajaran menggunakan multimedia
interaktif membantu mahasiswa untuk mengingat kembali konsep dasar yang pernah diterima
sebelumnya lebih baik dibandingkan pembelajaran secara konvensional. Hal ini ditunjukkan adanya
perbedaan yang signifikan pada konsep-konsep dasar setiap materi antara yang belajar dengan
multimedia interaktif dengan mahasiswa yang belajar secara konvensional . (Gunawan 2014 : 11).

2.4. Komponen pada komputer

computer adalah alat yang dipakai untuk mengolah data menurut prosedur yang telah
dirumuskan. Kata computer pada awalnya dipergunakan untuk menggambarkan orang yang
perkerjaannya melakukan perhitungan aritmetika, dengan atau tanpa alat bantu, tetapi arti kata
ini kemudian dipindahkan kepada mesin itu sendiri.Adapun Komponen nya sebagai berikut

1. Motherboard

Motherboard (atau biasa disebut mainboard, systemboard, logic board, baseboard atau mobo)
merupakan sebuah printed circuit board (PCB) yang bertindak sebagai tulang belakang pada
sebuah komputer, sebab motherboard menyediakan sebuah konektivitas elektrik yang disebut
bus sehingga semua komponen dan perangkat eksternal pada motherboard tersebut dapat
terhubung

2. Random Access Memory (RAM)


RAM merupakan kepanjangan dari Random Access Memory. Secara teori, RAM
memiliki prinsip kerja yang sama dengan memori internal (storage) yang biasa dipakai untuk
menyimpan berbagai foto, video, aplikasi, dan lain sebagainya di ponsel.
3. Harddisk
Hard disk adalah komponen perangkat keras yang menyimpan semua konten digital.
Dokumen, foto, musik, video, program, preferensi aplikasi, dan sistem operasi mewakili konten
digital yang tersimpan di hard disk. Hard disk dapat berupa eksternal atau internal.

4. Keyboard
Keyboard adalah sebuah perangkat keras (hardware) pada komputer yang berfungsi
sebagai alat untuk input data yang berupa huruf, angka dan simbol. Atau definisi keyboard yaitu
suatu perangkat keras pada komputer yang berbentuk papan dan memiliki berbagai macam
tombol yang dimana tombol tersebut fungsinya berbeda tergantung pada penekanannya yang
bisa menghasilkan proses yang sesuai dengan keinginan penggunanya.

5. Processor
Prosesor adalah komponen utama atau otak dari laptop / komputerAnda. Prosesor terletak
tepat di tengah motherboard. Prosesor memiliki fungsi yang penting bagi seluruh operasi
perangkat komputer karena semua perintah dimulai dari processor.

6. Mouse
Mouse merupakan alat yang membantu dalam mengoperasikan sebuah komputer.
Memiliki peranan dalam menggerakan kursor dilayar monitor, membuat pengguna dapat
memilih objek yang diinginkan.

7. Monitor
Monitor adalah perangkat keras yang dipakai untuk menampilkan output data grafis yang
berasal dari sumber-sumber data grafis seperti cpu, satelit, dan berbagai sumber data grafis
lainnya.
2.5 Berbasis FlashPlayer
FlashPlayer adalah sebuah sistem operasi untuk perangkat mobile berbasis linux yang
mencakup sistem operasi, middleware dan aplikasi. Android menyediakan platform terbuka bagi
para pengembang untuk menciptakan aplikasi mereka [4] (Pratama 2016 : 2).
Pada saat aplikasi sudah selesai di buat menggunakan adobe flash cs 6 melalui laptop,
Langkah selanjutnya yaitu melakukan Publish. Tujuannya adalah agar Aplikasi yang sudah di
buat dapat kompatibel pada platform smartphone khususnya Android yang nantinya
menghasilkan output .APK.
Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat
lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan
untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari
perangkat lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang
telah dipasangi Adobe Flash Player. Flash menggunakan bahasa
pemrograman bernama ActionScript yang muncul pertama kalinya pada Flash 5.
Sebelum tahun 2005, Flash dirilis oleh Macromedia. Flash 1.0 diluncurkan pada tahun
1996 setelah Macromedia membeli program animasi vektor bernama FutureSplash. Versi
terakhir yang diluncurkan di pasaran dengan menggunakan nama 'Macromedia' adalah
Macromedia Flash 8. Pada tanggal 3 Desember 2005 Adobe Systems mengakuisisi Macromedia
dan seluruh produknya, sehingga nama Macromedia Flash berubah menjadi Adobe Flash.
Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan program
aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap
yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash
didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan
sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website,
CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat
animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu
interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web
lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter,
custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV.
Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman
baik yang berjalan sendiri untuk mengatur animasi yang ada di dalamnya atau digunakan untuk
berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan
XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam
ukuran file outputnya.
Movie-movie Flash memiliki ukuran file yang kecil dan dapat ditampilkan dengan
ukuran layar yang dapat disesuaikan dengan keingginan. Aplikasi Flash merupakan sebuah
standar aplikasi industri perancangan animasi web dengan peningkatan pengaturan dan perluasan
kemampuan integrasi yang lebih baik. Banyak fiture-fiture baru dalam Flash yang dapat
meningkatkan kreativitas dalam pembuatan isi media yang kaya dengan memanfaatkan
kemampuan aplikasi tersebut secara maksimal. Fiture-fiture baru ini membantu kita lebih
memusatkan perhatian pada desain yang dibuat secara cepat, bukannya memusatkan pada cara
kerja dan penggunaan aplikasi tersebut. Flash juga dapat digunakan untuk mengembangkan
secara cepat aplikasi-aplikasi web yang kaya dengan pembuatan script tingkat lanjut. Di dalam
aplikasinya juga tersedia sebuah alat untuk men-debug script. Dengan menggunakan Code hint
untuk mempermudah dan mempercepat pembuatan dan pengembangan isi ActionScript secara
otomatis. Untuk memahami keamanan Adobe Flash dapat dilihat dari beberapa sudut pandang,
berdasarkan beberapa sumber referensi bahwa tidak ada perbedaan menyolok antara HTML dan
JavaScript di mana di dalamnya terdapat banyak tools yang dapat diambil dari SWF termasuk
ActionScript. Sehingga kode data dapat terjamin keamanannya. Oleh sebab itu, semua kebutuhan
data yang terdapat dalam SWF dapat diambil kembali melalui server. Keuntungan menggunakan
metode yang sama dengan menggunakan aplikasi web yang standar adalah akan menjamin dan
mengamankanpenyimpanan dan perpindahan data.
1.2. lingkungan kerja Adobe Flash CS6

Gambar 2.12 Lingkungan kerja adobe flash cs6


1. Menu Bar : Berisi kumpulan menu berupa perintah yang antara lain File, Edit,
View, Insert, Modify, Text, Commands, Control, Debug, Window, dan Help.

2. Timeline : Panel yang berguna untuk mengatur objek pada tingkat layer maupun
frame, serta sebagai pengatur jalannya animasi dan durasi waktu kecepatan frame-nya.

3. Tool Box : Panel berisi kumpulan tool yang dapat digunakan untuk membuat dan
edit object.

4. Stage: halaman kerja yang digunakan untuk menempatkan objek yang ingin
ditampilkan pada saat publishing.

5. Panel : Terdapat 2 letak panel, yaitu pada sisi kanan dan sisi bawah. Panel pada sisi
kanan terdapat kumpulan panel yang terdiri dari Color mixer panel, info, transform,
component, dan motion presets panel. Serta panel Properties yang berfungsi untuk
mengatur properties document, object, tool, dan lain-lain. Panel Library sebagai tempat
penyimpanan objek-objek yang digunakan (symbol, gambar, suara, video, dll). Pada sisi
bawah terdapat output, compiler errors, motion editor, dan action yang digunakan untuk
tempat menulis action-frame & action movie.
2.6 Fungsi toolbox
1. Arrow Tool, atau sering disebut selection tool berfungsi untuk memilih atau menyeleksi
suatu objek.

2. Subselection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada selection
tool.

3. Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi.

4. Lasso Tool, berfungsi untuk memotong gambar secara manual.

5. Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti
dalam pembuatan garis, kurva atau gambar.

6. Text Tool digunakan untuk membuat objek teks

7. Line Tool digunakan untuk membuat atau menggambar garis.

8. Oval Tool digunakan untuk menggambar bentuk lingkaran atau elips.

9. Pencil Tool digunakan untuk membuat garis.

10. Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk bebas.

11. Ink Bottle tool digunakan untuk mengisi/mengganti Stroke (garis luar) suatu objek.

12. Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan untuk
mengubah warna area sebuah objek yang telah diwarnai.

13. Eye Dropper Tool digunakan untuk mengambil sampel warna.

14. Eraser Tool digunakan untuk menghapus objek.

15. Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran.

16. Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.

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

18. Fill Color digunakan untuk memilih atau memberi warna pada suatu objek.
19. Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatu
gambar atau objek.

Gambar 2. 13 Toolbox

2.7 Flowchart
Pengertian Flowchart (Diagram Alir) atau di sebut Flowchart merupakan bagan (Chart)
yang mengarahkan alir (flow) di dalam prosedur atau program sistem secara logika. Flowchart
adalah cara untuk menjelaskan tahap-tahap pemecahan masalah dengan merepresentasikan
simbol-simbol tertentu yang mudah dipahami, mudah digunakan dan standar (Syamsiah 2019
:87).
Tujuan penggunaan flowchart adalah untuk menggambarkan suatu tahapan penyelesaian
masalah secara sederhana, terurai dan rapi dengan menggunakan simbol-simbol yang standar yang
dapat di mengerti oleh programer. Tahapan penyelesaian masalah yang disajikan harus tepat,
sederhana, dan jelas (Syamsiah 2019 : 87 – 88).
Simbol Nama
Terminal Point Symbol / Simbol Titik
Terminal menunjukkan permulaan (start) atau akhir
(stop) dari suatu proses.
Flow Direction Symbol / Simbol Arus adalah simbol
yang digunakan untuk menghubungkan antara simbol
yang satu dengan simbol yang lain (connecting line).
Simbol ini juga berfungsi untuk menunjukkan garis
alir dari proses.

Processing Symbol / Simbol Proses digunakan untuk


menunjukkan kegiatan yang dilakukan oleh komputer.
Pada bidang industri (proses produksi barang), simbol
ini menggambarkan kegiatan inspeksi atau yang biasa
dikenal dengan simbol inspeksi
Decision Symbol / Simbol Keputusan merupakan
simbol yang digunakan untuk memilih proses atau
keputusan berdasarkan kondisi yang ada. Simbol ini
biasanya ditemui pada flowchart program.
Input-Output / Simbol Keluar-Masuk menunjukkan
proses input-output yang terjadi tanpa bergantung dari
jenis peralatannya.
Predefined Process / Simbol Proses
Terdefinisimerupakan simbol yang digunakan untuk
menunjukkan pelaksanaan suatu bagian prosedur (sub-
proses). Dengan kata lain, prosedur yang terinformasi
di sini belum detail dan akan dirinci di tempat lain
Connector(On-page)
Simbol ini fungsinya adalah untuk menyederhanakan
hubungan antar simbol yang letaknya berjauhan atau
rumit bila dihubungkan dengan garis dalam satu
halaman
Connector(Off-page)
Sama seperti on-page connector, hanya saya simbol ini
digunakan untuk menghubungkan simbol dalam
halaman berbeda. label dari
simbol ini dapat menggunakan huruf atau angka
Preparation Symbol / Simbol Persiapan merupakan
simbol yang digunakan untuk mempersiapkan
penyimpanan di dalam storage.
Manual Input Symbol digunakan untuk menunjukkan
input data secara manual menggunakan online
keyboard.

Table 2. 1 Flowchart
Berikut ini Jenis – Jenis Flowchart :
1. Flowchart Sistem
Flowchart Sistem merupakan bagan yang menunjukkan alur kerja atau apa yang sedang
dikerjakan di dalam sistem secara keseluruhan dan menjelaskan urutan dari prosedur-
prosedur yang ada di dalam sistem. Dengan kata lain, flowchart ini merupakan dekripsi
secara grafik dari urutan prosedur-prosedur yang terkombinasi yang membentuk suatu
sistem.
Flowchart Sistem terdiri dari data yang mengalir melalui sistem dan proses yang
mentransformasikan data itu. Data dan proses dalam flowchart sistem dapat digambarkan
secara online (dihubungkan langsung dengan komputer) atau offline (tidak dihubungkan
langsung dengan komputer, misalnya mesin tik, cash register atau kalkulator).
2. Flowchart Dokumen
Bagan alir dokumen (document flowchart) atau disebut juga bagan alir formulir (form
flowchart) atau paperwork flowchart merupakan bagan alir yang menunjukkan arus dari
laporan dan formulir termasuk tembusan-tembusannya. Bagan alir dokumen ini
menggunakan simbol-simbol yang sama dengan yang digunakan di dalam bagan alir sistem.
3. Flowchart Skematik
Bagan alir skematik (schematic flowchart) merupakan bagan alir yang mirip dengan
bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem.Perbedaannya
adalah, bagan alir skematik selain menggunakan simbol-simbol bagan alir sistem, juga
menggunakan gambar-gambar komputer dan peralatan lainnya yang digunakan.Maksud
penggunaan gambar-gambar ini adalah untuk memudahkan komunikasi kepada orang yang
kurang paham dengan simbol-simbol bagan alir.Penggunaan gambar-gambar ini
memudahkan untuk dipahami, tetapi sulit dan lama menggambarnya.

4. Flowchart Program
Bagan alir program (program flowchart) merupakan bagan yang menjelaskan secara
rinci langkah-langkah dari proses program. Bagan alir program dibuat dari derivikasi bagan
alir sistem.
Bagan alir program dapat terdiri dari dua macam, yaitu bagan alir logika program
(program logic flowchart) dan bagan alir program komputer terinci (detailed computer
program flowchart).Bagan alir logika program digunakan untuk menggambarkan tiap-tiap
langkah di dalam program komputer secara logika.Bagan alir logika program ini
dipersiapkan oleh analis sistem.
5. Flowchart Proses
Flowchart Proses merupakan teknik penggambaran rekayasa industrial yang memecah
dan menganalisis langkah-langkah selanjutnya dalam suatu prosedur atau sistem.
2.7 Story board
Papan cerita (storyboard) adalah salah satu cara alternatif untuk mensketsakan kalimat
penuh sebagai alat perencanaan. Papan cerita menggabungkan alat bantu narasi dan visualisasi
pada selembar kertas sehingga naskah dan visual terkoordinasi. Storyboard ini membantu kita
untuk merancang sebuah cerita seperti halnya membuat gambaran kasar sebelum kita membuat
objek aslinya (Khulsum 2018 : 6 ).
Dari pengertian Storyboard diatas, maka dapat disimpulkan bahwa storyboard adalah
terjemahan berupa gambar sketsa dari naskah yang sudah dibuat, dan digunakan dalam proses
perancangan sebuah produk dan untuk menunjukkan secara visual bagaimana aksi dari sebuah
cerita berlangsung.
BAB III
PERANCANGAN

Konsep
Berikut ini beberapa tahapan untuk menentukan konsep :

a. Menentukan tujuan aplikasi (Hiburan, Pelatihan, Informasi, dan lain-lain)

b. Menentukan identifikasi pengguna (User)

c. Menetukan bentuk aplikasi (Interaktif, Presentasi, dan lain-lain)

d. Menentukan spesifikasi umum (Ukuran aplikasi, Dasar perancangan, Target, dan lain-
lain)

e. Menghasilkan Output yaitu berupa dokumen dengan penulisan yang bersifat naratif
untuk mengungkap tujuan proyek.

Dalam tahapan konsep juga dilengkapi tabel Deskripsi Konsep, sebagai berikut :

Judul aplikasi media interaktif Pengenalan Komponen


komputer berbasis android

Pengguna Pelajar, Mahasiswa, dan Umum


Durasi -

File Gambar Diambil dari Internet dengan format JPG,PNG yang


digunakan untuk Background, tombol, dan lain-lain
File Suara -

Table 3. 1 Table Konsep


3.1 Desain
3.1.1 Storyboard
Berikut ini storyboard Aplikasi Media Pembelajaran Interaktif mengenal makanan khas
kepulauan riau

Scene awal Keterangan

Pada Bagian Scene ini terdapat


background lalu ada menu start dan
Start
judul

Background

Media Interaktif Pengenalan

Jenis – Jenis Transportasi

menggunakan adobe flash


Scene Menu Utama Keterangan

Menu
Pada bagian menu utama terdiri dari
background label nama diaatas kanan
dan background dan list menu
Materi

Kuis

Profil

BACKGROUND
Scene profil Keterangan

Pada bagian ini tediri dari


PROFIL
background , tombol kembali dan
gambar profil mahasiswa

PROFIL

Background

back
Keterangan
Scene Materi

Pada bagian ini berisi konten materi


MATERI
dimana terdiri dari isi materi
background dan tombol kembali

KONTEN

back

Table 3. 2 Storyboard

3.1.2 Flowchart
Flowchart adalah bagan atau suatu diagram alir yang mempergunakan simbol atau tanda
untuk menyelesaikan suatu masalah. Flowchart memiliki 4 jenis yaitu Flowchart dokumen,
sistem, skematik, dan program. Berikut ini Flowchart yang digunakan pada Aplikasi Media
Pembelajaran Interaktif mengenal 12 prinsip - prinsip animasi .
Gambar 3. 1 Flowchart

3.2 Material Collection


Material Collection adalah kumpulan beberapa materi atau element pada setiap Scene.
Berikut ini Material Collection dari setiap Scene :
3.2.1 Proses Start

Background

Tombol
Media interaktif

Table 3. 3 Start

materi

Tombol

Table 3. 4 Material Collection Mulai


3.2.2 profil
Background

Tombol

Table 3. 5 Material Collection Menu Penggunaan Aplikasi

3.2.3 Menu keluar

Background

tombol

Table 3. 7 Material Collection Profil

3.3 Membuat Scene Start


Langkah awal membuat Aplikasi Media Interaktif Anatomi mata dan fungsi pada manusia
berbasis android dengan menggunakan adobe animate adalah membuat Scene start untuk
memuat komponen yang ada di aplikasi ini. Pada Scene ini menggunakan tombol Start
berbentuk gambar

3.3.1 Cara Untuk Memasukkan background


1. Untuk Background, menggunakan persegi yang di ambil tool yang kita pilih.
background ke library kemudian memasukkannya ke stage dan mengubah sesuai ukuran
stagenya
2. Buatlah judul pada bagian yang diinginkan background dengan menggunakan text Tool
3.3.2 Cara Membuat menu start
1. Buat layar baru buat background masukkan gambar dari library ke stage atau frame
di pastikan bahwa gambar sesuai layer .
2. yang kedua buat layer baru dengan nama tambahan ini untuk memasukkan gambar
tombol sebagai link ke berikutnya , pindahkan gambar dari library ke stage , jika
gambar sudah masuk ke stage klik kanan pada tombol-gambar pilih convert to symbol-
buat nama sesuaikan ajha terus tekan oke

Gambar 3. 2 Membuat gambar menjadi symbol dan pembuatan intro


3.3.3 Cara Membuat Tombol pada Scene Intro
1. Untuk tombol Start nya saya menggunakan gambar dari google jika sudah Convert
menjadi tombol. Yang pertama tarik file gambar tombol star nya ke layer aksi >klik
kanan> Convert To Symbol > beri nama pada objek tersebut dan pilih tipe Button.Disini
saya menamakannya tombol start.

2. Agar Scene tidak pindah ke Scene selanjutnya dengan sendirinya dan tombol tersebut bisa
pindah ke Scene selanjutnya setelah di klik yaitu harus di kasih Script pada Action Script
dengan cara klik kiri pada Frame 1 > Action > dan tulis Script seperti dibawah ini :
start.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene);

function fl_ClickToGoToScene(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "menu");
}

Gambar 3.3. Screenshot Membuat Scene Intro


3.4 Membuat Scene Menu
Selanjutnya membuat Scene Menu untuk melihat isi konten materi, pada bagian Scene
ini secara otomatis untuk menuju ke Scene Main Menu serta Tombol Previous dan Next untuk
menuju Frame sebelumnya dan selanjutnya. Berikut ini cara membuat Scene Materi :
3.4.1 Cara Menambah File dan Teks pada Scene Materi
1. Untuk Background dan animasi, karena sebelumnya sudah di Import ke Library, jadi File
atau animasi tersebut tinggal di Drag ke bagian Stage.
2. Buat beberapa Teks dengan cara klik Text Tool atau tekan tombol T > lalu buat Teks yang
diperlukan.
3. Untuk menambahkan materi selanjutnya, pada setiap Gambar harus dirubah ke convert t
to symbol.
3.4.2 Cara Membuat Tombol pada Scene Materi
1. Untuk membuat isi materi ada 10 titik gambar bagian mata yamg dijadikan tombol yang
terdiri dari: Mobo, Ram, Harddisk, keyboard, processor, mouse, Monitor.kemudian di
convert menjadi tombol, dengan cara clik objek animasi >convert to symbol>beri nama
dan pilih type button setelah itu kita beri actions dengan cara klik kanan pilih action kode
snippet.dengan cara sebagai berikut.

a.tombol Mobo
mobo.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_3);

function fl_ClickToGoToScene_3(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "mobo");
}
b.Tombol Ram
ram.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_4);

function fl_ClickToGoToScene_4(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "ram");
}
c.Harddisk
bhardisk.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_6);
function fl_ClickToGoToScene_6(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "hardisk");
}
d.Keyboard
keyboard.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_13);

function fl_ClickToGoToScene_13(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "keyboard");
}
e. Processor
proces.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_14);

function fl_ClickToGoToScene_14(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "proces");
}
j. mouse
mouse.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_15);

function fl_ClickToGoToScene_15(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "mouse");
}
k. Monitor
monitor.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_16);

function fl_ClickToGoToScene_16(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "monitor");
}
Gambar 3.6. Screenshot Pembuatan Scene Materi
3.5 Pembuatan Scene Profile
Selanjutnya membuat scene profile ini menggunakan gambar sebagai symbol nya caranya
sebagai Berikut ini :
3.5.1 Cara Membuat Tombol pada Scene Profile
1. Source Code Kembali ke menu utama
bprofil.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_17);

function fl_ClickToGoToScene_17(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "menu");

2. Source code ke Scene Profile


profil.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_19);

function fl_ClickToGoToScene_19(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "profile");
}
}
Gambar 3.7. Screenshot Pembuatan Scene Profile
3.6 Pembuatan Tombol keluar
Selanjutnya membuat Tombol keluar, pada bagian ini menggunakan Tombol keluart untuk
keluar dari aplikasi. Berikut ini cara membuat Tombol keluar:
3.6.1 Cara Membuat Tombol keluar
1. Untuk membuat tombol keluar pada Scene ini, menggunakan tombol gambar yang kita
buat dulu lalu ditulis keluar dan tinggal di convert menjadi tombol, dengan cara klik
Gambar yang sudha di tarik > Convert To Symbol > beri nama dan pilih tipe Button.
2. Selanjutnya memberi Script untuk tombol keluar agar Scene tersebut tidak pindah
sendirinya pada Action Script seperti dibawah ini :
log.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_20);
function fl_ClickToGoToScene_20(event:MouseEvent):void
{
NativeApplication.nativeApplication.exit(0);

Gambar 3.14. Screenshot Pembuatan Scene keluar


BAB IV
HASIL DAN PEMBAHASAN

4.1 Publish Aplikasi


Untuk melakukan Publish Aplikasi Media Pembelajaran Interaktif Komponen komputer ,
maka harus di sesuaikan untuk android agar bisa berjalan. Cara untuk pengaturannya yaitu klik
File > Publish Setting > pilih Target FlashPlayer 11.4 > pilih Script ActionScript 3.0 > OK,
Seperti gambar dibawah ini :
Gambar 4. 1 Screenshot Pengaturan Publish

Setelah sudah di sesuaikan, selanjutnya pilih Properties pada Scene 1 lalu klik pada pengaturan
FlashPlayer untuk mengatur Publish lanjutan, ada beberapa jenis pengaturan lanjutan Publish,
yaitu :

4.1.1. General
Pada bagian ini digunakan untuk mengisi data-data seperti mengisi nama aplikasi, ID
aplikasi, Version, Aspect Rasio, Render, dan lain-lain. Untuk aplikasi ini di sesuaikan seperti
gambar dibawah ini :
4.2 Setelah Aplikasi Sudah Install
4.2.1 Halaman Proses Menu utama
Setelah aplikasi sudah terpasang di Device, selanjutnya untuk membuka aplikasi tersebut, pada
awal pembuka akan menuju proses menu utama

Gambar 4. 13 Screenshot Halaman Pembuka


Gambar 4. 14 Screenshot Halaman Pembuka

4.2.2 Halaman Materi


Pada halaman Materi, User atau pengguna bisa membaca isi materi di dalam halaman
Materi, di halaman ini juga User bisa mengklik tombol Next dan back untuk melihat isi materi
yang lainnya. Jika User ingin menuju halaman Menu Utama bisa mengklik tombol Home.
Penampilan halaman Materi seperti gambar dibawah ini :
Gambar 4.19 Screenshot Halaman Materi

Gambar 4.19 Screenshot Halaman Isi Materi


BAB V
PENUTUP

5.1 Kesimpulan
Kesimpulan yang bisa diambil dari kasus Aplikasi media interaktif Komponen pada
komputer berbasis android dengan menggunakan adobe Flash . adalah sebagai berikut ini
:
1. Dengan adanya aplikasi ini, Pelajar dapat mempelajari dengan mudah Dengan adanya daya
tarik pada aplikasi ini, pelajar tertarik dengan kegiatan baca membaca.

2. aplikasi ini sudah mulai berubah gaya belajar seperti rasa ingin tahu terhadap ilmu
pengetahuan semakin meningkat melalui dunia maya atau media belajar lainnya.

5.2 Saran
Untuk pengembangan yang lebih lanjut, ada beberapa saran yang bisa digunakan untuk
mengoptimalkan penggunaan dari aplikasi ini, yaitu :
1. Karena aplikasi ini dibuat dari Adobe Flash maka aplikasi yang sudah di Publish harus
menggunakan aplikasi tambahan yaitu Adobe Air agar aplikasi tersebut berjalan. Bisa juga
aplikasi tersebut berjalan tanpa aplikasi Adobe Air dengan cara Embed atau menyatukan
Adobe Air ke dalam aplikasi, tetapi aplikasi tersebut bisa berjalan dengan menggunakan
versi OS Android yang terdahulu, seperti versi Android Ice Cream Sandwith.

2. Karena aplikasi ini dibuat dari Adobe Flash maka aplikasi yang sudah di Publish harus
menggunakan aplikasi tambahan yaitu Adobe Air agar aplikasi tersebut berjalan. Bisa juga
aplikasi tersebut berjalan tanpa aplikasi Adobe Air ..
DAFTAR PUSTAKA

Gunawan.,Harjono,A., Arsyad,2002:33). “MEDIA INTERAKTIF DALAM PEMBELAJARAN


KONSEP EKOSISTEM LINGKUNGAN”. Jurnal Pendidikan Fisika dan Teknologi, Vol.
1, No. 1, : 9 -14

Khulsum, U., Hudiyono, Y., & Sulistyowati, E. D. (2019). Pengembangan Bahan Ajar Menulis
Cerpen dengan Media Storyboard pada Siswa Kelas X SMA. Diglosia: Jurnal Kajian
Bahasa, Sastra, Dan Pengajarannya, 1(1), 1-12.

K. R. Maulana dan Bunyamin. (2015) “Rancang Bangun Sistem Informasi Penjualan dan Stok
Barang Di Toko Widari Garut”, algoritma, vol. 12, No. 1, pp. 119-124.

Mulyani, Tri (2017). ”PENGEMBANGAN COMPACT DISC INTERAKTIF


MENGGUNAKAN ADOBE FLASH PROFESSIONAL CS6 SEBAGAI MEDIA
PEMBELAJARAN MANDIRI MENULIS TEKS DESKRIPSI KELAS VII
SMP”.SKRIPSI, FAKULTAS BAHASA DAN SENI, Bahasa Dan Sastra Indonesia,
UNIVERSITAS NEGERI SEMARANG.
Pratama, Ndaru Adi., dan Catur Hermawan (2016). “APLIKASI PEMBELAJARAN TES
POTENSI AKADEMIK BERBASIS ANDROID”.Jurnal Penelitian Dosen FIKOM
(UNDA), Vol. 6, No. 1, : 1-6

Rohoani (2019). “MEDIA PEMBELAJARAN”. DIKTAT, FAKULTAS ILMU TARBIYAH


DAN KEGURUAN UNIVERSITAS ISLAM NEGERI SUMATERA UTARA

Sari, Rizqia Wulan. (2012). Sejarah Adobe Flash, 1-3.


https://rizqiaawulansari.wordpress.com/2012/04/19/sejarah-adobe-flash/
Syamsiah (2019). “PERANCANGAN FLOWCHART DAN PSEUDOCODE
PEMBELAJARAN MENGENAL ANGKA DENGAN ANIMASI UNTUK ANAK
PAUD RAMBUTAN”.STRING, Vol. 4, No. 1, : 86-93

Anda mungkin juga menyukai