MODUL FASILITASI

dengan Android Template

Produksi Model - BPMPK - Pustekkom

tahun 2016
 Modul 1
PENGENALAN APLIKASI ANDROID (apk) DARI
ADOBE FLASH PRO CS 6

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. - Produksi Model BPMPK 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 Aplikasi Edukasi.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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 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. - Produksi Model BPMPK 8

 Modul 2
MENGEMBANGKAN APLIKASI MOBILE LEARNING
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. - Produksi Model BPMPK 9

LANGKAH PERSIAPAN

1. Buka Adobe Flash CS 6 kemudian open file " Template AMO

2016.fla ", lalu simpan dengan nama baru.
2. Sesuaikan scene yg ada di template dengan hirarki yang anda
buat. Untuk memahaminya lihat contoh di halaman berikut ini :

Opening
Scene Opening

Scene Menu
Menu Utama

Scene Pengantar

Scene Materi 2 Scene closing

Scene Materi 1 Scene Tes

Pengantar Materi 1 Materi 2 Tes 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 :

Double Klik untuk

mengedit nama Scene

Klik duplikat Scene

Klik delete Scene

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 10

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

Frame isi Script

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 11

8. Coba tampilan opening yang anda ubah dengan emulator yang
disediakan flash atau dengan cara tekan ctrl-enter.

MEMBUAT 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

Tombol ke Pengantar

Tombol ke Materi 1

Tombol ke Materi 2

Tombol ke
Uji Kompetensi / Tes

Tombol ke
Keluar/closing

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.

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 12

 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. AS3 untuk
Teks yang muncul dalam tombolmengarahkan
baru masihtombol, satu
sesuai dengan
baris satu tombol
tombol yang lama. Untuk mengedit
Contoh : teks tombol dengan double
Tombol dengan nama instant “tbmenu0”
klik tombol yang akan diubah.
berfungsi untuk melompat ke scene
8. Pasang AS untuk tiap“pengantar”
tombol dan sesuaikan perintahnya
seperti gambar berikut :

1 //jangan diubah
2 tbmetu.addEventListener(MouseEvent.MOUSE_UP,clikm
etu);
3
4 //ubah AS untuk memasang fungsi tombol menu
utama;
5 arahtombol("tbmenu0","pengantar");
6 arahtombol("tbmenu1","materi1");
7 arahtombol("tbmenu2","materi2");
8 arahtombol("tbmenu3","tes");

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”.

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 13

9. Coba fungsi masing masing tombol pada menu utama beserta
navigasinya dengan emulator yang disediakan flash atau tekan
ctrl-enter.

MEMBUAT MENU 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.

Pertahankan AS
di awal frame

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

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 14
 1 //angka 5 menandakan materi ini ada 5 frame.
2 awalframemateri(5);

Keterangan Action Script

 Line 2 : angka 5 pada perintah function menandakan
materi ini ada 5 frame.

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.

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 15

MEMBUAT MENU 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.

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

Script pada frame 1 seperti gambar di halaman berikut

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 16

 1 //sesuaikan macam soal, tampil soal, respon dan
penyelesaian
2 macamnya = 15;
3 tampilnya = 10;
4 dirandom = true;
5 adarespon = true;
6 adapenyelesaian = true;
7
8 //jangan diubah
9 diawalquis();

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.
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. Tetapi dalam merubahnya jangan diubah secara
radikal karena akan tidak sedap dipandang mata. Usahakan
Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 17
 setiap soal tampil serasi hingga akan lebih bagus. Tombol
navigasi sebaiknya juga tidak diubah posisinya agar sinkron
dengan soal dan tampilan lainnya. Untuk jelasnya perhatikan
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

4. Ubah juga action script di atasnya dengan cara yang

ditunjukkan pada gambar dibawah ini
Sesuaikan dengan kunci
1 //sesuaikan kuncinya jawaban pada soal yang
2 kuncinya("b"); ditampilkan

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 18

 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 soal dengan cara yang ditunjukkan

pada gambar di halaman berikut ini

Tombol untuk menuju

soal berikutnya

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

6. Action script yang ada diatas frame penyelesaian tidak perlu

diubah karena akan merusak semua alur yang telah dibuat.
Biarkan saja seperti gambar di bawah ini.

1 //jangan diubah
2 dipenyel();
3

Keterangan Action Script

 Line 2 : Jangan mengubah Action Script di frame ini
Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 19
7. 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,

salah dan nilainya

Respon jawaban tiap soal

Komentar hasil quis

Tombol untuk mengulang

Tes

Tombol Navigasi

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

8. 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 :

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 20

 res10 berarti respon untuk
soal no 10

9. 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.

10. 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. - Produksi Model BPMPK 21

MEMBUAT PENUTUP

1. Langkah terakhir adalah mengubah pembuka dan penutup

dengan cara membuka scene closing untuk penutup dengan
cara seperti langkah persiapan pada step no 5. Selanjutnya
perhatikan time line seperti gambar berikut.

2. Edit scene closing sesuai dengan keinginan anda, dengan

aturan seperti mengubah scene opening.
3. Simpan template dengan nama sesuai nama aplikasi yang anda
inginkan 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.

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 22