dengan Android Template TAT#04

Transkripsi

1 dengan Android Template TAT#04

2 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 1

3 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 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. edit application setting Ukuran state Toni Setyawan, S.T., M.Pd. - flashbegin.com 2

4 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. - flashbegin.com 3

5 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 Bila anda Toni Setyawan, S.T., M.Pd. - flashbegin.com 4

6 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 5

7 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. - flashbegin.com 6

8 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. - flashbegin.com 7

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

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

11 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 : Opening Menu Utama Scene Opening Scene Menu Scene Menu Frame 2 Scene Menu Frame 3 Scene Edukasi Scene closing Wisata Edukasi Bantuan 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 : Toni Setyawan, S.T., M.Pd. - flashbegin.com 10

12 Double Klik untuk mengedit nama Scene Klik duplikat Scene Klik delete Scene 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 Toni Setyawan, S.T., M.Pd. - flashbegin.com 11

13 dibawah ini. Frame isi Script 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 Ubah tombol di menu utama sesuai dengan seperti hirarki anda Toni Setyawan, S.T., M.Pd. - flashbegin.com 12

14 Tombol ke Wisata Tombol ke Edukasi Tombol ke Bantuan Tombol ke Keluar/closing 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. Toni Setyawan, S.T., M.Pd. - flashbegin.com 13

15 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. 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 : Toni Setyawan, S.T., M.Pd. - flashbegin.com 14

16 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 15

17 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 Double klik mcpeta Frame tempat AS Navigasi Peta Frame tempat movieclip viewpeta Toni Setyawan, S.T., M.Pd. - flashbegin.com 16

18 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 17

19 5. Klik frame peta kemudian double klik movie clip mcpeta yang tampil di state. 6. Jika benar maka akan muncul seperti gambar berikut 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 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. Toni Setyawan, S.T., M.Pd. - flashbegin.com 18

20 Frame berisi gambar peta 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 Tombol ke Wisata 1 Tombol ke Wisata 2 2. Tampilan di atas menunjukan ada 2 tempat wisata. Hal ini dapat dilihat dari 2 tombol wisata yang ada. Tambahkan sesuai Toni Setyawan, S.T., M.Pd. - flashbegin.com 19

21 dengan keinginan anda. Tetapi harus dingat bahwa satu tombol mewakili satu tempat wisata dan setiap Tombol tempat ke wisata Wisata 2 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 Frame Materi Wisata 1 Frame Materi Wisata 2 Toni Setyawan, S.T., M.Pd. - flashbegin.com 20

22 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 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 21

23 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. 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 mcres.x = 20; mcres.y = 40; mcres.scalex = 3; mcres.scaley = 3; Line untuk mengatur posisi respon soal Line untuk mengatur ukuran respon soal Jika ingin menganti respos modif mc respon di library folder movieclip Toni Setyawan, S.T., M.Pd. - flashbegin.com 22

24 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 Tombol Navigasi Level dan sisa hati 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 Toni Setyawan, S.T., M.Pd. - flashbegin.com 23

25 4. Ubah juga action script di atasnya dengan cara yang ditunjukkan pada gambar dibawah ini 1 2 //sesuaikan kuncinya kuncinya("b"); Sesuaikan dengan kunci jawaban pada soal yang diframe bawahnya 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 Jumlah jawaban benar dan salah Total Nilai Komentar hasil quis Tombol untuk mengulang Tes Tombol melanjutkan ke lever berikutnya Semua tampilan di atas dapat diubah posisinya sama seperti langkah ke 3 Toni Setyawan, S.T., M.Pd. - flashbegin.com 24

26 6. Ubah juga action script pada frame di atas frame resume dengan cara yang ditunjukkan pada gambar dibawah ini //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 Edit scene closing sesuai dengan keinginan anda, dengan aturan seperti mengubah scene opening. Toni Setyawan, S.T., M.Pd. - flashbegin.com 25

27 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 : 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 26

28 flashbegin.com Tutorial Android Template (TAT) 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 Bila ada yang perlu ditanyakan silahkan hubungi saya di : Handphone : pribadi : tonimation@gmail.com Alamat blog : Profil FB : Toni Setyawan, S.T., M.Pd. - flashbegin.com