tutorial android template aplikasi edukasi

Download Tutorial Android Template Aplikasi Edukasi

If you can't read please download the document

Post on 13-Jun-2015

2.007 views

Category:

Education

1 download

Embed Size (px)

DESCRIPTION

Cara Mudah Mengembangkan Aplikasi Edukasi dengan Android Template dari Adobe Flash Profesional

TRANSCRIPT

  • 1. dengan Android Template TAT#01

2. 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. 3. 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 4. 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 5. 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 6. 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. 7. 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 8. 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 9. 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! 10. 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. 11. 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 12. 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 13. 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 14. 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,clikm etu); //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 15. 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