f la shbegin.

com

2014
Cara Mudah
Mengembangkan
Aplikasi Android dengan
Template

Adobe Flash Professional CS 6
Toni Setyawan, S.T., M.Pd.


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 dibawah ini

Open

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

2. Selanjutnya klik open dan pilih file "Temp Android 2014 ver 3.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.

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
diinstall di hanphone
3. Setting tampilan di layar
hanphone
Ukuran state
edit application setting

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

5. Ubah parameter selanjutnya dengan mengklik tab deployment, maka akan
muncul gambar seperti dibawah 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 ingin memilikinya sendiri,
anda bisa membuatnya dengan mengklik tombol Create. Lalu isilah kolom isian
seperti yang ditunjukkan anak panah dengan isian yang anda inginkan.

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
4

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

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

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 seperti menginstall aplikasi lainnya. Jika berhasil
maka akan muncul icon program seperti gambar diatas sebelah kanan.
13. Jalankan aplikasi yang anda buat seperti menjalankan aplikasi lainnya, bila
muncul tampilan seperti gambar dibawah ini, berarti ...
Selamat anda berhasil membuat aplikasi android!

File apk

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

Modul Bedah Template
MENGEMBANGKAN APLIKASI ANDROID
DENGAN TEMPLATE ADOBE FLASH PRO CS 6
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 ide/tema, peta
kompetensi, peta konsep, Garis Besar Isi Media, Jabaran Materi, Flowchart dan 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 "Temp Android 2014 ver 3.fla".
2. Sesuaikan scene yg ada di template dengan hirarki yang anda buat. Untuk
memahaminya lihat contoh dibawah ini :

Opening
Menu Utama
Pengantar Materi 1 Materi 2 Tes Closing
Scene Materi 1
Scene Materi 2
Scene Pengantar
Scene Tes
Scene closing
Scene Menu
Scene Opening

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

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 :

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 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.
Klik Edit Scene
Kemudian pilih opening
Frame isi Script
Klik delete Scene
Double Klik untuk
mengedit nama Scene
Klik duplikat Scene

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

2. Ubah tombol di menu utama sesuai dengan seperti hirarki anda

3. Sesuaikan tombol dengan menu yang ingin ditampilkan. Dalam contoh ada 4
scene (pengantar, materi1, materi2 dan tes) 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.

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.
Tombol ke Materi 1
Tombol ke Materi 2
Tombol ke Uji Kompetensi / Tes
Tombol ke Keluar/closing
Tombol ke Pengantar
Klik kanan salah satu tombol
dan pilih duplicate

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

8. Pasang AS untuk tiap tombol dan sesuaikan perintahnya seperti gambar berikut :
1
2
3
4
5
6
7
8
/ / j angan di ubah
t bmet u. addEvent Li st ener ( MouseEvent . MOUSE_UP, cl i kmet u) ;

/ / ubah AS unt uk memasang f ungsi t ombol menu ut ama;
ar aht ombol ( " t bmenu0" , " pengant ar " ) ;
ar aht ombol ( " t bmenu1" , " mat er i 1" ) ;
ar aht ombol ( " t bmenu2" , " mat er i 2" ) ;
ar aht ombol ( " t bmenu3" , " t es" ) ;
Keterangan Action Script
Line 2 : Jangan mengubah Action Script di frame ini
Line 5 - 8 : perintah function untuk mengarahkan tombol, satu baris satu
tombol. Contoh : Tombol dengan nama instant tbmenu0
berfungsi untuk melompat ke scene pengantar.
9. Coba fungsi masing masing tombol pada menu utama beserta navigasinya
dengan emulator yang disediakan flash atau tekan ctrl-enter.
LANGKAH EDIT MATERI
Template ini terdapat scene pengantar, isi scene ini hanya 1 frame. Untuk
melakukan perubahan isinya anda tinggal memodifikasi tampilan frame yang dimkasud.
Bila anda ingin membuat dengan banyak halaman, sebaiknya anda mengkopy dan
memodifikasi scene materi.
Dalam scene materi di template ini terdapat 5 frame. Masing masing frame pada
time line mewakili 1 halaman tampilan, jadi jangan buat animasi/tween disini. Sesuaikan
isi media masing masing frame dengan tampilan yg ada inginkan. Kondisikan action
scrip pada layer AS tetap dalam formasi seperti itu. Kalau anda akan menambahkan
atau mengurangi jumlah frame, kondisikan AS tetap pada frame pertama layer AS.
Langkah mengeditnya sebagai berikut.
1. Untuk mengubah isi materi, langkah pertama adalah membuka scene materi
dengan cara seperti langkah awal pada step no 5. Sesuaikan frame dengan
banyaknya halaman yang ingin anda tampilkan.

2. Sesuaikan jumlah halaman/frame ke dalam as berikut ini
1
2

/ / angka 5 menandakan mat er i i ni ada 5 f r ame.
awal f r amemat er i ( 5) ;
Keterangan Action Script
Line 2 : angka 5 pada perintah function menandakan materi ini ada 5
frame.
Pertahankan AS di awal frame
AS3 untuk mengarahkan tombol,
satu baris satu tombol
Contoh :
Tombol dengan nama instant
tbmenu0 berfungsi untuk
melompat ke scene pengantar

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

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 materi lanjukan ke materi yang lain.
LANGKAH EDIT EVALUASI
Dalam template terdapat quis multipelchoice yang berisi 15 macam soal yang
tampil random 10 soal. Frame pertama adalah pembuka quis, frame ke 2 31 berisi soal
dan penyelesaian, serta frame 32 berisi resume hasil quis. Masing masing soal terdiri
dari 2 frame, 1 frame berisi soal dan 1 frame berisi penyelesaian. Bila anda ingin
mengubah macam soal, susuaikan dengan aturan yang dipakai. Misalnya ada ingin
membuat macam soalnya ada 20 maka aturannya sebagai adalah frame 1 pembuka,
frame 2 41 berisi soal dan penyelesaian, serta 42 berisi resume hasil quis. 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.

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

2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action Script pada frame
1 seperti gambar berikut
1
2
3
4
5
6
7
8
9
10
/ / sesuai kan macamsoal , t ampi l soal , r espon dan penyel esai an
macamnya = 15;
t ampi l nya = 10;
di r andom= t r ue;
adar espon = t r ue;
adapenyel esai an = t r ue;

/ / j angan di ubah
di awal qui s( ) ;
Keterangan Action Script
Line 2 : macamnya = 15 artinya macam soalnya ada 15.
Line 3 : tampilnya = 10 artinya quis yang ada buat tampil 10 soal.
Line 4 : dirandom = true artinya munculnya soal dibuat random bukan
urutan, bila anda ingin tidak random maka kata true diubah
menjadi false.
Line 5 : adarespon = true artinya quis yang anda buat menampilkan
respon benar salah pada setiap soal. Ubah jadi false bila tidak
menginginkan.
Line 6 : adapenyelesaian = true; artinya quis yang anda buat
menampilkan penyelesaian soal. Ubah jadi false bila tidak
menginginkan.
Line 8 9 : Jangan mengubah Action Script di line ini
3. Sesuaikan jumlah frame dengan macam soal yang ada set untuk quis yang anda
buat. Bila dikurangi, anda tinggal menghapus frame antara 2 - 31 sesuai dengan
set quis anda. Bila ditambah, anda tinggal memperbanyak dengan mengkopy
frame 2-31. Harus di ingat bahwa 1 soal diwakili dengan dua frame, jadi untuk
mengkopi atau menghapus harus sepasang.
4. Selanjutnya ubah tampilan soal dengan cara yang ditunjukkan pada gambar
dibawah ini

Teks ini akan di generate automatis tetapi
ubah untuk mengindentifikasikan soal ke.
Double klik untuk mengubahnya
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

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

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. Tetapi dalam
merubahnya jangan diubah secara radikal karena akan tidak sedap dipandang
mata. Usahakan setiap soal tampil serasi hingga akan lebih bagus. Tombol
navigasi sebaiknya juga tidak diubah posisinya agar sinkron dengan soal dan
tampilan lainnya.
5. Ubah juga action script di atasnya dengan cara yang ditunjukkan pada gambar
dibawah ini
1
2

/ / sesuai kan kunci nya
kunci nya( " 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
6. Selanjutnya ubah tampilan soal dengan cara yang ditunjukkan pada gambar
dibawah ini

7. Action script yang ada diatas frame penyelesaian tidak perlu diubah. Biarkan saja
seperti gambar dibawah
1
2
3
/ / j angan di ubah
di penyel ( ) ;

Keterangan Action Script
Line 2 : Jangan mengubah Action Script di frame ini
Sesuaikan dengan kunci jawaban pada soal
yang ditampilkan
Teks ini hasil generate automatis tidak usah
diubah.
Teks ini berisi penjelasan yang ingin anda
tampilkan dalam quis. Double klik untuk
mengubahnya
Tombol Navigasi
Semua tampilan di atas dapat diubah
posisinya sama seperti langkah ke 4
Tombol untuk menuju soal berikutnya

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


8. Selanjutnya ubah tampilan resume dengan cara yang ditunjukkan pada gambar
dibawah ini

9. Bila soal yang ingin anda tampilkan tidak 10, maka anda bisa merubah jumlah
Respon jawaban tiap soal sesuai dengan keinginan anda. Copykan saja movieclip
kotak dibawah soal. Jangan lupa sesuaikan Instan name nya dengan soal yang di
responnya. Perhatikan gambar berikut :

10. Ubah juga action script pada frame di atas frame resume dengan cara yang
ditunjukkan pada gambar dibawah ini
1
2
3

/ / ubah i si nya angka 70 ada l ah bat as ni l ai bai k. di l anj ut kan dengan
/ / koment ar bi l a ni l ai sempur na, l ul us dan gagal
di r esumequi s( 70, "J awaban Anda sempur na", "Anda l ul us t api masi h ada
sal ahnya, bel aj ar l agi ya! ", "Anda t i dak l ul us, ayo bel aj ar l ebi h gi at
l agi ! " )
Tombol Navigasi
Semua tampilan di atas dapat diubah
posisinya sama seperti langkah ke 4
Tombol untuk mengulang Tes
Komentar hasil quis
Respon jawaban tiap soal
Jumlah jawaban benar, salah dan
nilainya
res10 berarti respon untuk soal no 10

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

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.
11. 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 materi
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 Temp Android 2014 ver 3.fla kunjungi blog kami di
alamat :
http://blog.flashbegin.com/2010/02/ebook-tutorial-action-script-flash.html
Blog kami juga menjelaskan banyak hal tentang Adobe Flash baik drawing, tips dan trik,
action script dan lain lain. Bila ada yang perlu ditanyakan silahkan hubungi saya di :
Handphone : 08164881971
PIN BBM : 75909060
email pribadi : tonimation@yahoo.com
tonimation@gmail.com
Alamat blog : http://flashbegin.com
Profil : https://www.facebook.com/tonimation