dengan Android Template

TAT#04
 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 1
LANGKAH-LANGKAH

1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti

di halaman berikut ini

Open

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.

edit application setting

Ukuran state

Toni Setyawan, S.T., M.Pd. - flashbegin.com 2

 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.

1. Nama file apk hasil

publish

2. Nama aplikasi
android setelah
diinstalldi hanphone

3. Setting tampilan
di layar handphone

Tab Deployment

Toni Setyawan, S.T., M.Pd. - flashbegin.com 3

5. Ubah parameter selanjutnya dengan mengklik tab deployment,
maka akan muncul gambar seperti di halaman berikut ini.

4. Nama file sertifikat

publishing Android anda

Membuat sertifikat
sendiri

5. Password yang anda ciptkan

Saat membuat sertifikat
Android anda

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com 4

 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 5

 Tab Icon

9. Tekan tombol OK kemudian tunggu beberapa saat. Jika

berhasil maka akan muncul popup seperti gambar di bawah ini.

Toni Setyawan, S.T., M.Pd. - flashbegin.com 6

10. Dengan mengunakan windows explore pastikan akan muncul
file apk di direktori tempat anda menyimpan fla.

File apk

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com 7

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 8

 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 9

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 :

Opening
Scene Opening

Scene Menu
Menu Utama

Scene Menu Frame 2 Scene Menu Frame 3

Scene Edukasi Scene closing

Wisata Edukasi Bantuan Closing

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 :

Toni Setyawan, S.T., M.Pd. - flashbegin.com 10

 Double Klik untuk
mengedit nama Scene

Klik duplikat Scene

Klik delete Scene

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
Klik Edit Scene

Kemudian
pilih opening

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com 11

 dibawah ini.

Frame isi Script

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com 12

 Tombol ke Wisata

Tombol ke Edukasi

Tombol ke Bantuan

Tombol ke
Keluar/closing

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.

Toni Setyawan, S.T., M.Pd. - flashbegin.com 13

 Klik kanan salah satu
tombol dan pilih
duplicate

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 :

Toni Setyawan, S.T., M.Pd. - flashbegin.com 14

 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 15

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

Double klik
mcpeta

Frame tempat
AS Navigasi
Peta

Frame tempat
movieclip
viewpeta

Toni Setyawan, S.T., M.Pd. - flashbegin.com 16

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 17

5. Klik frame peta kemudian double klik movie clip mcpeta yang
tampil di state.
6. Jika benar maka akan muncul seperti gambar berikut

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

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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 18
 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

Tombol ke Wisata 1

Tombol ke Wisata 2

2. Tampilan di atas menunjukan ada 2 tempat wisata. Hal ini

dapat dilihat dari 2 tombol wisata yang ada. Tambahkan sesuai

Toni Setyawan, S.T., M.Pd. - flashbegin.com 19

 dengan keinginan anda. Tetapi harus dingat bahwa satu tombol
Tombol
mewakili satu tempat wisata dan setiap ke wisata
tempat Wisata 2terdapat

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

Frame Materi Wisata 1

Frame Materi Wisata 2

Toni Setyawan, S.T., M.Pd. - flashbegin.com 20

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 21

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.

Layer AS yang berisi

action script

Frame di layer isi yang

berisi pembuka, soal,
penyelesaian dan
resume.

2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action

Script pada frame 1 seperti gambar di halaman berikut

Line 10 -11 untuk mengatur

10 mcres.x = 20; posisi respon soal
11 mcres.y = 40;
12 mcres.scaleX = 3; Line 12 -13 untuk mengatur
13 mcres.scaleY = 3; ukuran respon soal

Jika ingin menganti respos modif mc respon di library folder movieclip

Toni Setyawan, S.T., M.Pd. - flashbegin.com 22
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

Tombol Navigasi

Level dan sisa hati

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com 23

4. Ubah juga action script di atasnya dengan cara yang
ditunjukkan pada gambar dibawah ini

1 //sesuaikan kuncinya Sesuaikan dengan kunci

2 kuncinya("b"); jawaban pada soal yang
diframe bawahnya

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

Jumlah jawaban benar

dan salah

Total Nilai

Komentar hasil quis

Tombol untuk mengulang

Tes

Tombol melanjutkan ke
lever berikutnya

Semua tampilan di
atas dapat diubah
posisinya sama
seperti langkah ke 3

Toni Setyawan, S.T., M.Pd. - flashbegin.com 24

6. Ubah juga action script pada frame di atas frame resume
dengan cara yang ditunjukkan pada gambar dibawah ini

1 //ubah isinya angka 70 ada lah batas nilai baik.

dilanjutkan dengan
2 //komentar bila nilai sempurna, lulus dan gagal
3 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 25

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 26

 flashbegin.com
Tutorial Android Template (TAT)

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

Toni Setyawan, S.T., M.Pd. - flashbegin.com