Tutorial Android Template Aplikasi Edukasi
-
Upload
toni-setyawan -
Category
Education
-
view
2.022 -
download
1
description
Transcript of Tutorial Android Template Aplikasi Edukasi
dengan Android Template
TAT#01
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 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.
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 EDUKASI
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 Aplikasi
Edukasi.fla ".
2. Sesuaikan scene yg ada di template dengan hirarki yang anda
buat. Untuk memahaminya lihat contoh di halaman 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
Pengantar Materi 1 Materi 2 Tes Closing
Scene Materi 1
Klik delete Scene
Double Klik untuk mengedit nama Scene
Scene Materi 2
Scene Pengantar
Scene Tes
Scene closing
Scene Menu
Scene Opening
Klik duplikat Scene
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
dibawah ini.
Klik Edit Scene
Kemudian pilih opening
Frame isi Script
Toni Setyawan, S.T., M.Pd. - flashbegin.com 12
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
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.
Tombol ke Materi 1
Tombol ke Materi 2
Tombol ke Uji Kompetensi / Tes
Tombol ke Keluar/closing
Tombol ke Pengantar
Toni Setyawan, S.T., M.Pd. - flashbegin.com 13
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 :
1 2 3 4 5 6 7 8
//jangan diubah tbmetu.addEventListener(MouseEvent.MOUSE_UP,clikmetu); //ubah AS untuk memasang fungsi tombol menu utama; arahtombol("tbmenu0","pengantar"); arahtombol("tbmenu1","materi1"); arahtombol("tbmenu2","materi2"); 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”.
Klik kanan salah satu tombol dan pilih duplicate
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 14
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
Pertahankan AS di awal frame
Toni Setyawan, S.T., M.Pd. - flashbegin.com 15
1 2
//angka 5 menandakan materi ini ada 5 frame. 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. - flashbegin.com 16
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.
2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action
Script pada frame 1 seperti gambar di halaman berikut
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 17
1
2 3 4 5 6 7 8 9
//sesuaikan macam soal, tampil soal, respon dan penyelesaian macamnya = 15; tampilnya = 10; dirandom = true; adarespon = true; adapenyelesaian = true; //jangan diubah 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. - flashbegin.com 18
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
4. Ubah juga action script di atasnya dengan cara yang
ditunjukkan pada gambar dibawah ini
1 2
//sesuaikan kuncinya kuncinya("b");
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
Sesuaikan dengan kunci jawaban pada soal yang ditampilkan
Tombol Navigasi
Toni Setyawan, S.T., M.Pd. - flashbegin.com 19
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
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 2 3
//jangan diubah dipenyel();
Keterangan Action Script Line 2 : Jangan mengubah Action Script di frame ini
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 20
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
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 :
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 21
9. 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.
10. Coba fungsi masing masing tombol pada menu utama beserta
navigasinya dengan emulator yang disediakan flash atau tekan
ctrl-enter.
res10 berarti respon untuk soal no 10
Toni Setyawan, S.T., M.Pd. - flashbegin.com 22
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 “AT Aplikasi Edukasi.fla” kunjungi blog kami.
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
PIN BBM : 75909060
email pribadi : [email protected]
Alamat blog : http://flashbegin.com
Profil FB : https://www.facebook.com/tonimation
flashbegin.com Tutorial Android Template (TAT)