Cara Mudah Membuat App Android dengan Template Flash CS6

flashbegin.com

Cara Mudah Mengembangkan Aplikasi Android dengan Template Adobe Flash Professional CS 6 Toni Setyawan, S.T., M.Pd.

2014

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. LANGKAH-LANGKAH 1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti dibawah ini

Open

Toni Setyawan, S.T., M.Pd. - flashbegin.com

1

2. Selanjutnya klik open dan pilih file "Temp Android 2014 ver 3.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

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 diinstall di hanphone

3. Setting tampilan di layar hanphone

Tab Deployment


2

5. Ubah parameter selanjutnya dengan mengklik tab deployment, maka akan muncul gambar seperti dibawah 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 ingin memilikinya sendiri, anda bisa membuatnya dengan mengklik tombol Create. Lalu isilah kolom isian seperti yang ditunjukkan anak panah dengan isian yang anda inginkan.


3

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.

Tab Icon

9. Tekan tombol OK kemudian tunggu beberapa saat. Jika berhasil maka akan muncul popup seperti gambar di bawah ini.


4

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 seperti menginstall aplikasi lainnya. Jika berhasil maka akan muncul icon program seperti gambar diatas sebelah kanan. 13. Jalankan aplikasi yang anda buat seperti menjalankan aplikasi lainnya, bila muncul tampilan seperti gambar dibawah ini, berarti ...

“Selamat anda berhasil membuat aplikasi android!”


5

Modul Bedah Template MENGEMBANGKAN APLIKASI ANDROID DENGAN TEMPLATE ADOBE FLASH PRO CS 6

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 ide/tema, peta kompetensi, peta konsep, Garis Besar Isi Media, Jabaran Materi, Flowchart dan 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. LANGKAH AWAL 1. Buka Adobe Flash CS 6 kemudian open file "Temp Android 2014 ver 3.fla". 2. Sesuaikan scene yg ada di template dengan hirarki yang anda buat. Untuk memahaminya lihat contoh dibawah 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 6

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

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

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

7

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.

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

8

8. Pasang AS untuk tiap tombol dan sesuaikan perintahnya seperti gambar berikut : 1 2 3 4 5 6 7 8

//jangan diubah AS3 untuk mengarahkan tombol, tbmetu.addEventListener(MouseEvent.MOUSE_UP,clikmetu); satu baris satu tombol Contoh : //ubah AS untuk memasang fungsi tombol menu utama; Tombol dengan nama instant arahtombol("tbmenu0","pengantar"); “tbmenu0” berfungsi untuk arahtombol("tbmenu1","materi1"); melompat ke scene “pengantar” 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”. 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. Pertahankan AS di awal frame

2. Sesuaikan jumlah halaman/frame ke dalam as berikut ini 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. Toni Setyawan, S.T., M.Pd. - flashbegin.com

9

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

Layer AS yang berisi action script Frame di layer isi yang berisi pembuka, soal, penyelesaian dan resume.


10

2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action Script pada frame 1 seperti gambar berikut 1 2 3 4 5 6 7 8 9 10

//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. 4. Selanjutnya ubah tampilan soal dengan cara yang ditunjukkan pada 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


11

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 setiap soal tampil serasi hingga akan lebih bagus. Tombol navigasi sebaiknya juga tidak diubah posisinya agar sinkron dengan soal dan tampilan lainnya. 5. 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 ditampilkan

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 6. Selanjutnya ubah tampilan soal dengan cara yang ditunjukkan pada gambar dibawah 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 7. Action script yang ada diatas frame penyelesaian tidak perlu diubah. Biarkan saja seperti gambar dibawah 1 2 3

//jangan diubah dipenyel();

Keterangan Action Script  Line 2 : Jangan mengubah Action Script di frame ini Toni Setyawan, S.T., M.Pd. - flashbegin.com

12

8. Selanjutnya ubah tampilan resume dengan cara yang ditunjukkan pada gambar dibawah 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 9. 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 : res10 berarti respon untuk soal no 10

10. 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!")


13

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. 11. 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 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 “Temp Android 2014 ver 3.fla” kunjungi blog kami di alamat : http://blog.flashbegin.com/2010/02/ebook-tutorial-action-script-flash.html Blog kami juga menjelaskan banyak hal tentang Adobe Flash baik drawing, tips dan trik, action script dan lain lain. Bila ada yang perlu ditanyakan silahkan hubungi saya di : Handphone

: 08164881971

PIN BBM

: 75909060

email pribadi

: [email protected] [email protected]

Alamat blog

: http://flashbegin.com

Profil

: https://www.facebook.com/tonimation


14

Cara Mudah Membuat App Android dengan Template Flash CS6

Recommend Documents