Tutorial Android Template aplikasi peta interaktif

dengan Android Template
TAT#04

Toni Setyawan, S.T., M.Pd. - flashbegin.com 1
Modul Awal Bedah Template
PUBLISH TEMPLATE ADOBE FLASH PRO CS 6
MENJADI FILE APLIKASI ANDROID (apk)
INDIKATOR PENCAPAIAN HASIL BELAJAR
· Pembaca dapat membuat aplikasi android sederhana
mengunakan Flash CS 6
URAIAN
Android adalah operating system untuk handphone yang
populer. Hingga November 2013, pangsa pasar Android dikabarkan
telah mencapai 80%. Dari 261,1 juta telepon pintar yang terjual
pada bulan Agustus, September, dan Oktober 2013, sekitar 211
juta di antaranya adalah perangkat Android.
Flash adalah software yang mampu membuat animasi dengan
mudah. Untuk membuat simulasi atau animasi yang memiliki
interaksi dengan penguna, animasi flash dapat ditambahkan
program tambahan yang sering disebut Action Script. Animasi yang
interaktif ini sangat cocok digunakan untuk membuat aplikasi
pembelajaran. Selain dapat di jalankan secara mandiri/stand alone
flash juga dapat dijalankan mengunakan browser internet, hingga
banyak website yang menambahkan animasi untuk memperindah
dan memaksimalkan fungsi web tersebut.
Dengan mengunakan Adobe Flash CS 6, kita dapat
mempublish fla menjadi apk atau aplikasi untuk handphone/tablet
android. Jadi bagi anda yang sudah terbiasa mengunakan flash
untuk membuat berbagai macam animasi baik yang interaktif
maupun tidak, anda akan dengan mudah mempublishnya menjadi
aplikasi android.

LANGKAH-LANGKAH
1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti
di halaman berikut ini
2. Selanjutnya klik open dan pilih file "AT Peta Interaktif.fla". Cara
mendapatkan file tersebut baca bagian PENUTUP di akhir
modul ini. Pada template ini mengambil ukuran 480 x 800
sesuai dengan ukuran layar HP.
Open
Ukuran state
edit application setting

Tips : Untuk kemudahan dalam penanganan file, sebaiknya
semua file yang terkait dalam 1 project anda kumpulkan
dalam satu folder. Misalnya file fla template, icon
program, sertifikat developer dan media pendukung.
3. Selanjutnya mari kita mencoba membuat aplikasi Android
dengan cara mempublish template menjadi aplikasi android
(apk). Langkah pertama ubah Android setting dengan mengklik
“edit application setting” (icon kunci pas) seperti ditunjukkan
pada gambar diatas.
4. Setelah muncul tampilan seperti gambar di bawah ubah isian
penting yang ditunjukkan anak panah 1 (nama file apk hasil
publish), 2 (nama aplikasi setekah diinstall di device) dan 3
(setingan layar). Sedang isian lainnya diabaikan saja.
Tab Deployment
1. Nama file apk hasil
publish
2. Nama aplikasi
android setelah
diinstalldi hanphone
3. Setting tampilan
di layar handphone

5. Ubah parameter selanjutnya dengan mengklik tab deployment,
maka akan muncul gambar seperti di halaman berikut ini.
6. Isi Certificate dengan mencari posisi file sertifikat berserta
passwordnya dengan mengklik browse (4), contoh
“flashbegincom.p12” (sertifikat yang saya miliki) dan
passwordnya flashbegin (5), kemudian lanjutkan ke step 8. File
ini bisa didapatkan di http://blog.flashbegin.com. Bila anda
4. Nama file sertifikat
publishing Android anda
5. Password yang anda ciptkan
Saat membuat sertifikat
Android anda
Membuat sertifikat
sendiri

ingin memilikinya sendiri, anda bisa membuatnya dengan
mengklik tombol Create. Lalu isilah kolom isian seperti yang
ditunjukkan anak panah dengan isian yang anda inginkan.
7. Sebelum anda lanjutkan, pastikan komputer anda terkoneksi
internet. Setelah mengklik tombol OK akan muncul file sesuai
dengan nama yang tertera pada kolom save as. Untuk
melakukan proses publish sebaiknya file diletakan ke dalam
direktori yang sama dengan file fla yang anda buat.
8. Selanjutnya ubah icon untuk aplikasi yang anda buat dengan
mengklik tab Icon. Pilih ukuran gambar icon yang anda miliki,
semakin besar semakin detail (saya biasa mengunakan ukuran
72 x 72). Sebaiknya anda membuat dulu gambar dengan
pengolah gambar dulu kemudian export ke png (icon mengenal
background transparan) dan letakkan di direktori tempat anda
membuat aplikasi.

9. Tekan tombol OK kemudian tunggu beberapa saat. Jika
berhasil maka akan muncul popup seperti gambar di bawah ini.
Tab Icon

10. Dengan mengunakan windows explore pastikan akan muncul
file apk di direktori tempat anda menyimpan fla.
11. Selanjutnya copykan file apk yang anda buat ke device
handphone anda.
12. Install aplikasi yang anda buat dengan cara seperti anda
menginstall aplikasi lainnya. Jika proses install telah selesai
dan berhasil maka akan muncul icon program seperti gambar
di atas sebelah kanan. Gambar icon yang muncul tergantung
gambar yang anda gunakan
File apk

13. Jalankan aplikasi yang anda buat seperti menjalankan aplikasi
lainnya, bila muncul tampilan seperti gambar di dibawah ini,
berarti ...
“Selamat anda berhasil membua aplikasi
android!”

Modul Bedah Template
MENGEMBANGKAN APLIKASI PETA INTERAKTIF
DENGAN ADOBE FLASH PRO CS 6
ANDROID TEMPLATE
INDIKATOR PENCAPAIAN HASIL BELAJAR
· Penguna membuat aplikasi pembelajaran android
memanfaatkan template mengunakan Adobe Flash Pro CS 6
URAIAN
Dalam mengembangkan media pembelajaran, pengembang
harus memiliki bahan acuan yang di gunakan untuk pedoman.
Bahan acuan ini antara lain :
1. ide/tema
2. peta kompetensi
3. peta konsep
4. Garis Besar Isi Media
5. Jabaran Materi
6. Flowchart
7. Naskah.
Semua bahan acuan itu sebagai pengendali proses pengembangan
agar tidak melenceng dari konsep pengembangan awal.
Mungkin bagi anda terlalu repot menyiapkan bahan acuan,
tetapi saran saya anda sebaiknya tetap memikirkan meski tidak
menuangkannya dalam kertas. Bila kita mengembangankan media
pembelajaran dengan acuan maka media pembelajaran yang anda
kembangkan akan terarah untuk mencapai tujuan kompetensi yang
ditetapkan.

LANGKAH AWAL
1. Buka Adobe Flash CS 6 kemudian open file "AT Peta
Interaktif.fla".
2. Sesuaikan scene yg ada di template dengan hirarki yang anda
buat. Default template seperti contoh di berikut ini :
3. Untuk melakukan penyesuaian, buka docker scene di pulldown
menu Windows > Other Panel > Scene. Jika perintah anda
benar akan muncul tampilan seperti gambar dibawah ini :
Opening
Menu Utama
Wisata Edukasi Bantuan Closing
Scene Edukasi
Scene Menu Frame 2 Scene Menu Frame 3
Scene closing
Scene Menu
Scene Opening

4. Gunakan perintah duplikat scene dan delete scene untuk
menyesuaikannya
5. Bila jumlah scene sudah sesuai dengan hirarki, selanjutnya edit
scene “opening” sesuai dengan keinginan anda, dengan cara
dibawah ini
6. Kemudian ubah animasi sesuai keinginan anda dengan
mengedit gambar dan proses tween. (gunakan ilmu animasi
flash drawing)
7. Saat anda mengubah opening harap diperhatikan letak AS
frame tetap pada posisi awal dan teralhir, lihat gambar
Klik Edit Scene
Kemudian
pilih opening
Klik delete Scene
Double Klik untuk
mengedit nama Scene
Klik duplikat Scene

dibawah ini.
8. Coba tampilan opening yang anda ubah dengan emulator yang
disediakan flash atau dengan cara tekan ctrl-enter.
LANGKAH EDIT MENU UTAMA
1. Selanjutnya ubah ke tampilan menu di scene “menu” utama
dengan cara seperti langkah awal pada step no 5.
2. Ubah tombol di menu utama sesuai dengan seperti hirarki anda
Frame isi Script

3. Sesuaikan tombol dengan menu yang ingin ditampilkan. Dalam
contoh ada 4 tombol (Wisata, Edukasi, Bantuan dan Keluar)
yang akan ditampilkan, maka ada 4 tombol untuk melakukan
navigasi.
4. Lakukan delete tombol untuk mengurangi agar sesuai hirarki
anda.
5. Duplikat tombol di library dengan cara klik kanan kemudian
pilih duplicate, Lalu isi nama tombol baru hasil duplikat.
Tombol ke Edukasi
Tombol ke Bantuan
Tombol ke
Keluar/closing
Tombol ke Wisata

6. Bila dalam library telah muncul tombol yang baru, click and
drug ke stage. Atur posisi masing-masing tombol agar serasi.
7. Teks yang muncul dalam tombol baru masih sesuai dengan
tombol yang lama. Untuk mengedit teks tombol dengan double
klik tombol yang akan diubah.
8. Pasang AS untuk tiap tombol dan sesuaikan perintahnya
seperti gambar berikut :
Klik kanan salah satu
tombol dan pilih
duplicate

Keterangan Action Script
· Line 6 : memerintahkan tombol tbmenu0 untuk
melompat dan berhenti ke frame 2 scene yang
sama.
melompat dan berhenti ke frame 1 scene
edukasi.
melompat dan berhenti ke frame 3 scene yang
sama.
· Line 23 : menjalankan function clikmenu yang berisi
melompat ke scene closing.
9. Coba fungsi masing masing tombol pada menu utama beserta
navigasinya dengan emulator yang disediakan flash atau tekan
ctrl-enter.

LANGKAH EDIT MENU WISATA
Template ini terdapat scene menu yang berisi 3 frame. Frame
1 berisi navigasi menu, frame 2 berisi Menu Wisata dan frame 3
berisi bantuan. Untuk melakukan perubahan isinya anda tinggal
memodifikasi tampilan frame yang dimkasud.
Dalam frame 2 pada scene menu ini berisi movie clip view
peta. Di movie clip viewpeta terdapat movieclip mcpeta. Sedangkan
movieclip mcpeta ini berisi tombol kota yang akan digunakan untuk
melompa ke scene kota. Scene kota inilah yang berisi materi
pariwisata di kota yang ingin kita tampilkan. Langkah mengeditnya
sebagai berikut.
1. Untuk mengubah peta beserta tombol kotanya, langkah
pertama adalah membuka mcpeta dengan cara berikut
Frame tempat
movieclip
viewpeta
Double klik
mcpeta
Frame tempat
AS Navigasi
Peta

2. Klik frame AS3 kemudian tekan F9 untuk mengedit dan
menambah kota
· Line 1 - 5 : Jangan diubah.
· Line 6 - 11 : AS untuk tombol yang berfungsi untuk
melompat ke scene kota.
· tbkota1 adalah nama tombol yang akan difungsikan
· clikkota1 adalah functionnya
· kota1 adalah nama scene tempat meterinya.
Sesuaikan jumlah tombol dengan AS untuk perintahnya. Dan
samakan pula nama intance tombol dengan AS yang dipasang
3. Klik frame tempat movieclip viewpeta kemudian double klik
movie clip viewpeta yang tampil di state.
4. Jika benar maka akan muncul seperti gambar berikut
Menunjukan bahwa
sedan mengedit movie
clip view peta
Bila tidak tampil seperti
tampilan ini perhatikan
simbol view ini

5. Klik frame peta kemudian double klik movie clip mcpeta yang
tampil di state.
6. Jika benar maka akan muncul seperti gambar berikut
7. Tombol kota dapat di tambahkan dengan mencopynya tapi
perlu diingat untuk membedakan nama instance dari setiap
tombol yang dibuat.
Dari gambar di atas
menunjukkan bahwa
tombol btkota terpilih
memiliki nama instance
tbkota1.
Menunjukan
bahwa sedan
mengedit movie
clip mcpeta di
movieclip
viewpeta
Tombol Kota
dan bisa dicopy
paste sesuai
keingginan anda
Frame berisi tombol kota
Frame berisi gambar peta

LANGKAH MENGEDIT DAN MENAMBAH KOTA
Scene kota ini berisi materi parwista di kota yang anda pilih.
Sesuaikan jumlah kota dengan scene kota yang ada. Disarankan
untuk mengcopy scene kota sebanyak yang anda inginkan. Untuk
memudahkan usahakan namanya berkelanjutan sesuai angka.
Untuk memodifikasinya ikuti langkah berikut:
1. Pindah scene aktif ke scene kota, kemudian perhatikan gambar
berikut
2. Tampilan di atas menunjukan ada 2 tempat wisata. Hal ini
dapat dilihat dari 2 tombol wisata yang ada. Tambahkan sesuai
Frame berisi gambar peta
Tombol ke Wisata 1
Tombol ke Wisata 2

dengan keinginan anda. Tetapi harus dingat bahwa satu tombol
mewakili satu tempat wisata dan setiap tempat wisata terdapat
satu frame untuk menyimpan tampilannya. Gambar di atas
ditunjukkan bahwa wisata 1 pada frame 2 dan wisata 3 ada
frame 4. Untuk merubah isi materi untuk tempat wisata 1 klik
frame 2, begitu pula untuk tempat wisata 2. Perhatikan
gambar berikut :
Tombol ke Wisata 2
Tombol ke Wisata 2
Frame Materi Wisata 1
Frame Materi Wisata 2

3. Masukkan semua media (teks, gambar, animasi, video dll)
sesuai dengan keinginan anda. Disini kemampuan flash
drawing anda sangat dibutuhkan. Untuk memodifikasi materi
dengan cara :
· Untuk memasukkan teks dengan cara mengedit teks yang
ada di template, bisa juga diatur posisi teks tersebut.
Untuk mengubah isi teks yang telah ada di template anda
tinggal double klik teks tersebut.
· Untuk memasukkan gambar dengan cara import kemudian
atur di state atau ambil dari library dengan cara klik and
drug dari library ke state.
· Untuk memasukkan animasi, buat dahulu animasi dalam
bentuk movie clip di library. Selanjutnya click and drag
movie clip tersebut di library ke state sesuai dengan
keinginan anda.
· Untuk memasukkan suara disarankan mengunakan script
AS 3 sehingga akan mudah diatur kapan munculnya suara.
ctrl-enter.
5. Setelah selesai 1 kota lanjukan ke kotai yang lain.
LANGKAH EDIT EDUKASI
Dalam template terdapat quis multipelchoice yang berisi 2
Level dan masing masing lever terdapat 10 soal. Frame pertama
adalah pembuka quis, frame ke 2 – 11 berisi soal dan frame 12
sebagai resume level 1. Level 2 soal dari frame 13 – 22 sedangkan
resume ada di frame 23. Quis ini berbentuk games, user hanya
diberi kesempatan untuk salah 3 kali yang ditandai dengan

hilangnya gambar hati di bagian atas tengah. Bila user gagal
menyelesaikan level tampilan game over ada di frame 24. Langkah
mengeditnya sebagai berikut.
1. Untuk mengubah isi evaluasi, langkah pertama adalah
membuka scene tes dengan cara seperti langkah awal pada
step no 5.
2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action
Script pada frame 1 seperti gambar di halaman berikut
10
11
12
13
mcres.x = 20;
mcres.y = 40;
mcres.scaleX = 3;
mcres.scaleY = 3;
Jika ingin menganti respos modif mc respon di library folder movieclip
Layer AS yang berisi
action script
Frame di layer isi yang
berisi pembuka, soal,
penyelesaian dan
resume.
Line 10 -11 untuk mengatur
posisi respon soal
Line 12 -13 untuk mengatur
ukuran respon soal

3. Sesuaikan jumlah frame dengan macam soal yang ada set
untuk quis yang anda buat. Modifikasi jumlah frame pada tiap
layernya. Selanjutnya ubah tampilan soal dengan cara
mengedit dan mengatur posisi seperti editing flash biasa.
Selain teks yang ada dalam gambar di atas, soal bisa juga
ditambahkan gambar atau animasi. Cara menambahkannya
sama seperti pada scene materi. Semua tampilan pada gambar
diatas bisa di sesuaikan posisinya. Usahakan setiap soal tampil
serasi hingga akan lebih bagus. Untuk jelasnya perhatikan
gambar dibawah ini
Teks ini menyataka soal ke
dan akan di generate
Teks ini berisi soal yang ingin
anda tampilkan dalam quis.
Double klik untuk
mengubahnya
Teks ini berisi jawaban yang
ingin anda tampilkan dalam
quis. Double klik untuk
mengubahnya
Tombol Navigasi
Level dan sisa hati

4. Ubah juga action script di atasnya dengan cara yang
ditunjukkan pada gambar dibawah ini
1
2
//sesuaikan kuncinya
kuncinya("b");
· Line 2 : huruf “b” pada perintah function menandakan
kunci jawaban soal di frame adalah b.
Sesuaikan dengan kunci jawaban pada soal
yang ditampilkan
5. Selanjutnya ubah tampilan resume sesuai dengan selera anda.
Cara mengubahnya sama seperti mengubah tampilan yang lain
yang sudah dibahas sebelumnya. Untuk lebih jelasnya
perhatikan keterangan pada gambar di halaman berikut ini
Sesuaikan dengan kunci
jawaban pada soal yang
diframe bawahnya
Tombol melanjutkan ke
lever berikutnya
Semua tampilan di
atas dapat diubah
posisinya sama
seperti langkah ke 3
Tombol untuk mengulang
Tes
Komentar hasil quis
Total Nilai
Jumlah jawaban benar
dan salah

6. Ubah juga action script pada frame di atas frame resume
dengan cara yang ditunjukkan pada gambar dibawah ini
1
2
3
//ubah isinya angka 70 ada lah batas nilai baik.
dilanjutkan dengan
//komentar bila nilai sempurna, lulus dan gagal
diresumequis(70,"Jawaban Anda sempurna","Anda
lulus tapi masih ada salahnya, belajar lagi
ya!","Anda tidak lulus, ayo belajar lebih giat
lagi!")
· Line 1 – 2 : petunjuk singkat
· Line 3 : diresumquis adalah function yang berisi
variable. 7 adalah batas kelulusan yang
ditentukan, "Jawaban Anda sempurna" adalah
komentar yang muncul jika nilai sempurna
(10), " Anda lulus tapi masih ada salahnya,
belajar lagi ya!" adalah komentar yang muncul
jikan nilai melewati batas kelulusan, " Anda
tidak lulus, ayo belajar lebih giat lagi!" adalah
komentar yang muncul jika nilai kurang dari
batas kelulusan.
ctrl-enter.
LANGKAH FINAL
1. Langkah terakhir adalah mengubah penutup dengan cara
membuka scene closing dengan cara seperti langkah awal pada
step no 5.
2. Edit scene closing sesuai dengan keinginan anda, dengan
aturan seperti mengubah scene opening.

3. Simpan template dengan nama baru kemudian publish ke apk.
Sebelum di sebarkan ke user, aplikasi harus di coba secara
detail di device yang sesungguhnya, agar tidak ada kesalahan
dalam implementasinya.
PENUTUP
Setelah ada mempelajari dan memahami bedah modul ini
berarti anda sudah mampu membuat aplikasi media pembelajaran
berbasis android. Selanjutnya untuk mengetahui cara mendapatkan
file “AT Peta Interaktif.fla” kunjungi blog kami.
Langkah terakhir agar dokumen flash ini dapat di publish
menjadi aplikasi android atau file apk pernah kami bahas di blog.
Untuk mempelajarinya silahkan berkunjung ke :
http://flashbegin.com
Setelah ada mempelajari dan memahami bedah modul ini
berarti anda sudah mampu membuat aplikasi media pembelajaran
berbasis android. Selanjutnya untuk mengetahui cara mendapatkan
file “AT Multiple Choice Quis.fla” kunjungi blog kami di.
http://ebook.flashbegin.com

Toni Setyawan, S.T., M.Pd. - flashbegin.com
Bila anda menyukai modul ini, kunjungi blog kami. Di
blog kami terdapat artikel yang menjelaskan banyak hal
tentang Adobe Flash baik tutorial drawing, tips dan trik flash,
tutorial action script 2, tutorial action script 3, ebook,
template, file experimen, ide-ide baru dan lain lain.
Cara mendapatkan template
http://ebook.flashbegin.com
Bila ada yang perlu ditanyakan silahkan hubungi saya di :
Handphone : 08164881971
email pribadi : tonimation@gmail.com
Alamat blog : http://flashbegin.com
Profil FB : https://www.facebook.com/tonimation
flashbegin.com
Tutorial Android Template (TAT)

Tutorial Android Template aplikasi peta interaktif

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Tutorial Android Template aplikasi peta interaktif

Similar to Tutorial Android Template aplikasi peta interaktif (20)

More from Toni Setyawan

More from Toni Setyawan (8)

Recently uploaded

Recently uploaded (20)

Tutorial Android Template aplikasi peta interaktif