tutorial android template aplikasi edukasi

24
dengan Android Template TAT#01

Upload: toni-setyawan

Post on 13-Jun-2015

2.018 views

Category:

Education


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Tutorial Android Template Aplikasi Edukasi

dengan Android Template

TAT#01

Page 2: Tutorial Android Template Aplikasi Edukasi

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.

Page 3: Tutorial Android Template Aplikasi Edukasi

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

Page 4: Tutorial Android Template Aplikasi Edukasi

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

Page 5: Tutorial Android Template Aplikasi Edukasi

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

Page 6: Tutorial Android Template Aplikasi Edukasi

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.

Page 7: Tutorial Android Template Aplikasi Edukasi

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

Page 8: Tutorial Android Template Aplikasi Edukasi

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

Page 9: Tutorial Android Template Aplikasi Edukasi

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

Page 10: Tutorial Android Template Aplikasi Edukasi

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.

Page 11: Tutorial Android Template Aplikasi Edukasi

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

Page 12: Tutorial Android Template Aplikasi Edukasi

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

Page 13: Tutorial Android Template Aplikasi Edukasi

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

Page 14: Tutorial Android Template Aplikasi Edukasi

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

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”

Page 15: Tutorial Android Template Aplikasi Edukasi

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

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

Pertahankan AS di awal frame

Page 16: Tutorial Android Template Aplikasi Edukasi

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

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.

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.

Page 17: Tutorial Android Template Aplikasi Edukasi

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

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.

2. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action

Script pada frame 1 seperti gambar di halaman berikut

Layer AS yang berisi action script

Frame di layer isi yang berisi pembuka, soal, penyelesaian dan resume.

Page 18: Tutorial Android Template Aplikasi Edukasi

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

1

2 3 4 5 6 7 8 9

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

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. Tetapi dalam merubahnya jangan diubah secara

radikal karena akan tidak sedap dipandang mata. Usahakan

Page 19: Tutorial Android Template Aplikasi Edukasi

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

setiap soal tampil serasi hingga akan lebih bagus. Tombol

navigasi sebaiknya juga tidak diubah posisinya agar sinkron

dengan soal dan tampilan lainnya. Untuk jelasnya perhatikan

gambar dibawah ini

4. Ubah juga action script di atasnya dengan cara yang

ditunjukkan pada gambar dibawah ini

1 2

//sesuaikan kuncinya kuncinya("b");

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

Sesuaikan dengan kunci jawaban pada soal yang ditampilkan

Tombol Navigasi

Page 20: Tutorial Android Template Aplikasi Edukasi

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

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 soal dengan cara yang ditunjukkan

pada gambar di halaman berikut ini

6. Action script yang ada diatas frame penyelesaian tidak perlu

diubah karena akan merusak semua alur yang telah dibuat.

Biarkan saja seperti gambar di bawah ini.

1 2 3

//jangan diubah dipenyel();

Keterangan Action Script Line 2 : Jangan mengubah Action Script di frame ini

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

Page 21: Tutorial Android Template Aplikasi Edukasi

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

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

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

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

Page 22: Tutorial Android Template Aplikasi Edukasi

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

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

10. Coba fungsi masing masing tombol pada menu utama beserta

navigasinya dengan emulator yang disediakan flash atau tekan

ctrl-enter.

res10 berarti respon untuk soal no 10

Page 23: Tutorial Android Template Aplikasi Edukasi

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

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 “AT Aplikasi Edukasi.fla” kunjungi blog kami.

Page 24: Tutorial Android Template Aplikasi Edukasi

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

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

http://ebook.flashbegin.com

Bila ada yang perlu ditanyakan silahkan hubungi saya di :

Handphone : 08164881971

PIN BBM : 75909060

email pribadi : [email protected]

Alamat blog : http://flashbegin.com

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

flashbegin.com Tutorial Android Template (TAT)