Tutorial Android Template aplikasi peta interaktif
-
Upload
toni-setyawan -
Category
Education
-
view
668 -
download
4
Transcript of Tutorial Android Template aplikasi peta interaktif
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 2
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 3
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 4
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 5
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 6
9. Tekan tombol OK kemudian tunggu beberapa saat. Jika
berhasil maka akan muncul popup seperti gambar di bawah ini.
Tab Icon
Toni Setyawan, S.T., M.Pd. - flashbegin.com 7
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 8
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!”
Toni Setyawan, S.T., M.Pd. - flashbegin.com 9
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 10
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 11
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 12
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 13
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 14
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 15
Keterangan Action Script
• Line 6 : memerintahkan tombol tbmenu0 untuk melompat dan berhenti ke frame 2 scene yang sama.
• Line 13 : memerintahkan tombol tbmenu1 untuk melompat dan berhenti ke frame 1 scene edukasi.
• Line 20 : memerintahkan tombol tbmenu2 untuk 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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 16
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 17
2. Klik frame AS3 kemudian tekan F9 untuk mengedit dan
menambah kota
Keterangan Action Script • 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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 18
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 19
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 20
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 21
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.
4. Coba fungsi masing masing tombol pada menu utama beserta
navigasinya dengan emulator yang disediakan flash atau tekan
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 22
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 23
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 24
4. Ubah juga action script di atasnya dengan cara yang
ditunjukkan pada gambar dibawah ini
1 2
//sesuaikan kuncinya kuncinya("b");
Keterangan Action Script • 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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 25
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!")
Keterangan Action Script • 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.
7. Coba fungsi masing masing tombol pada menu utama beserta
navigasinya dengan emulator yang disediakan flash atau tekan
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 26
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 : [email protected]
Alamat blog : http://flashbegin.com
Profil FB : https://www.facebook.com/tonimation
flashbegin.com Tutorial Android Template (TAT)