dengan Android Template
TAT#04
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
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.
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
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
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
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com
