dengan Android Template TAT#04

dengan Android Template TAT#04

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

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

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


3

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

“flashbegincom.p12”

mengklik

(sertifikat

browse

yang

saya

(4),

contoh

miliki)

dan

passwordnya flashbegin (5), kemudian lanjutkan ke step 8. File ini bisa didapatkan di http://blog.flashbegin.com. Bila anda Toni Setyawan, S.T., M.Pd. - flashbegin.com

4

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.


5

Tab Icon

9.

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


6

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

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


8

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.


9

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 Scene Opening Scene Menu

Menu Utama Scene Menu Frame 2

Scene closing

Scene Edukasi

Wisata 3.

Scene Menu Frame 3

Edukasi

Bantuan

Closing

Untuk melakukan penyesuaian, buka docker scene di pulldown menu Windows > Other Panel > Scene. Jika perintah anda benar akan muncul tampilan seperti gambar dibawah ini :


10

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


11

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.

2.

Ubah tombol di menu utama sesuai dengan seperti hirarki anda


12

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.


13

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 :


14

Keterangan Action Script · Line 6 · Line 13 · Line 20 · Line 23

9.

: memerintahkan tombol tbmenu0 untuk melompat dan berhenti ke frame 2 scene yang sama. : memerintahkan tombol tbmenu1 untuk melompat dan berhenti ke frame 1 scene edukasi. : memerintahkan tombol tbmenu2 untuk melompat dan berhenti ke frame 3 scene yang sama. : menjalankan function clikmenu yang berisi melompat ke scene closing.

Coba fungsi masing masing tombol pada menu utama beserta navigasinya dengan emulator yang disediakan flash atau tekan ctrl-enter.


15

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


16

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 melompat ke scene kota. · tbkota1 adalah nama tombol yang akan difungsikan · clikkota1 adalah functionnya · kota1 adalah nama scene tempat meterinya.

untuk

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


17

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.


18

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


19

dengan keinginan anda. Tetapi harus dingat bahwa satu tombol Tombol ke wisata Wisata 2terdapat mewakili satu tempat wisata dan setiap tempat

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


20

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.


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 13 – 22 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

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 10 11 12 13

mcres.x = 20; mcres.y = 40; mcres.scaleX = 3; mcres.scaleY = 3;

Line 10 -11 untuk mengatur posisi respon soal Line 12 -13 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

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


23

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

6.

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.

7.


LANGKAH FINAL 1.

Langkah terakhir adalah mengubah penutup dengan cara membuka scene closing dengan cara seperti langkah awal pada step no 5.

2.

Edit scene closing sesuai dengan keinginan anda, dengan aturan seperti mengubah scene opening.


25

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 :

http://flashbegin.com 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.

http://ebook.flashbegin.com


26

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

http://ebook.flashbegin.com Bila ada yang perlu ditanyakan silahkan hubungi saya di : Handphone

: 08164881971

email pribadi : [email protected] Alamat blog

: http://flashbegin.com

Profil FB

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


dengan Android Template TAT#04

Recommend Documents