cara mudah membuat app android dengan template flash cs6

flashbegin.com

2014

Cara Mudah Mengembangkan

Aplikasi Android dengan Template

Adobe Flash Professional CS 6 Toni Setyawan, S.T., M.Pd.

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.

LANGKAH-LANGKAH

1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti dibawah ini

Open


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.

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

3. Setting tampilan di layar hanphone

Ukuran state

edit application setting


5. Ubah parameter selanjutnya dengan mengklik tab deployment, maka akan

muncul gambar seperti dibawah 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 ingin memilikinya sendiri,

anda bisa membuatnya dengan mengklik tombol Create. Lalu isilah kolom isian

seperti yang ditunjukkan anak panah dengan isian yang anda inginkan.

4. Nama file sertifikat publishing Android anda

5. Password yang anda ciptkan Saat membuat sertifikat Android anda

Membuat sertifikat sendiri


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.

9. Tekan tombol OK kemudian tunggu beberapa saat. Jika berhasil maka akan

muncul popup seperti gambar di bawah ini.

Tab Icon


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 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!”

File apk


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

Menu Utama

Pengantar Materi 1 Materi 2 Tes Closing

Scene Materi 1

Scene Materi 2

Scene Pengantar

Scene Tes

Scene closing

Scene Menu

Scene Opening


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 :

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.

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.

Klik Edit Scene

Kemudian pilih opening

Frame isi Script

Klik delete Scene

Double Klik untuk mengedit nama Scene

Klik duplikat Scene


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.

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.

Tombol ke Materi 1

Tombol ke Materi 2

Tombol ke Uji Kompetensi / Tes

Tombol ke Keluar/closing

Tombol ke Pengantar

Klik kanan salah satu tombol dan pilih duplicate


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

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

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.

Pertahankan AS di awal frame

AS3 untuk mengarahkan tombol, satu baris satu tombol Contoh : Tombol dengan nama instant “tbmenu0” berfungsi untuk melompat ke scene “pengantar”


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.



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.


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


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");

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

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

Sesuaikan dengan kunci jawaban pada soal yang ditampilkan

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


8. Selanjutnya ubah tampilan resume dengan cara yang ditunjukkan pada gambar

dibawah ini

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 :

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

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

res10 berarti respon untuk soal no 10


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.



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

cara mudah membuat app android dengan template flash cs6

Documents