Saturday, 28 January 2017

Belajar Membuat Media Pembelajaran Berbasis Android dengan Construct 2

Perkembangan teknologi komunikasi (TI) yang semakin pesat membawa perubahan paradigma dalam dunia pendidikan. Perubahan paradigma tersebut terlihat secara nyata salah satunya dalah hal media pembelajaran. Salah satu contoh sederhana yang dapat kita amati adalah bergesernya media untuk presentasi pembelajaran, dari papan tulis menjadi OHP (Over Head Projector) dan saat ini menggunakan LCD Projector.

Perkembangan gadget yang semakin pesat juga membawa perubahan pada media pembelajaran. Media pembelajaran berbasis komputer yang sebelumnya marak digunakan kini beralih ke media pembelajaran berbasis mobile dalam berbagai platform, mulai dari android, windows phone, iPhone, flash lite, java, dan sebagainya. Berbagai software untuk mengembangkan media atau aplikasi berbasis mobile antara laib Eclipse, Android Studio, Adobe Flash CS6, Construct 2 dan sebagainya. Media yang dikembangkan dapat diakses oleh siswa melalui handphone yang dimiliki.



Cara Membuat Media Pembelajaran Berbasis Android dengan Construct 2


Construct 2 merupakan software pembuat game atau aplikasi berbasis HTML5 yang dikhususkan untuk platform 2D. Software ini dikembangkan oleh Scirra. Berbeda dengan Adobe Flash CS 6, Construct 2 tidak menggunakan bahasa pemrograman khusus, karena semua perintah yang digunakan pada game diatur dalam EvenSheet yang terdiri dari Event dan Action. Sehingga, untuk mengembangkan game atau aplikasi dengan Construct 2 kita tidak perlu menguasai bahasa pemrograman yang sulit.

Langkah untuk membuat media pembelajaran android dengan menggunakan Construct 2 adalah sebagai berikut:


Pertama, buka program Construct 2 kemudian klik New Project atau File > New kemudian pilih New empty project.
 Gambar 01. Beranda Construct 2
 Silahkan Unduh di sini
Kedua, klik pada layout yang ditampilkan kemudian atur properties yang tersedia di sebelah kiri layout. Beberapa hal yang perlu diatur dalam properties ini adalah Layout Size, Margins, Window Size, dan Preview browser.  Atur Layout Size, Margins, dan Window Size masing-masing dengan memasukkan angka 480, 800. Kemudian tentukan Preview Borwser yang di kehendaki, misal Chrome, Firefox, Opera, atau yang lainnya. Preview browser digunakan untuk menampilkan aplikasi atau media yang kita buat di browser. 
Gambar 02. Pengaturan layout dan Margin

Gambar 03. Pengaturan Windows Size dan Browser


Ketiga, masukkan cover media pembelajaran yang kita kehendaki. Cover yang dimasukkan berupa gambar dengan format PNG dalam ukuran 480x800 pixel yang dapat kita download atau kita siapkan  dan kita desain di sofware grafis, seperti Corel Draw atau Photoshop. Cara memasukkan cover atau background media pembelajaran yang kita inginkan adalah dengan klik kanan pada layout kemudian pilih Insert new object maka akan tampil pilihan sebagai berikut:

 Gambar 04. sprite

Pilih sprite kemudian klik pada layout sehingga muncul jendela Edit image:Sprite sebagai berikut:
Gambar 05. folder  untuk memasukkan gambar cover 
atau backgruond media

Klik icon folder  untuk memasukkan gambar cover atau backgruond media setelah itu klik icon Close. Fitur ini nantinya juga kita gunakan untuk memasukkan gambar maupun tombol yang kita butuhkan. 




Gambar 06. Properties Bar


Setelah itu atur posisi gambar dengan memberikan angka pada Properties bar > Position , isi dengan angka 240, 400. 

Keempat, ubah nama Layout dan Eventsheetnya dengan nama sama dan sesuai. Cara mengubah namanya adalah dengan klik kanan pada nama  layout kemudian pilih Rename. Lalu ketikkan nama layout yang sesuai, misalnya Cover.


Gambar 07.Layout





Mengubah Leyout dengan cara yang sama ubah nama eventsheetnya. Setiap layout selalu berpasangan dengan eventsheet yang kita buat sama namanya.

 Gambar 08. Projects


Kelima, Tambahkan layout dan eventsheet setelah Cover. Cara menambah layout dan eventsheet sekaligus yaitu dengan klik kanan pada Layouts, lalu pilih Add layout.

 Gambar 09. add layout


Maka akan muncul jendela add layout sebagai berikut:
 Gambar 10. Add event sheet


Pilih Add event sheet. Dengan cara yang sama ubah nama layout dan eventsheet yang muncul. Misalnya kita beri nama Menu, karena di layout ini akan kita pasang beberapa tombol untuk navigasi ke layout lainnya. Jika langkah anda benar maka akan tampil sebagai berikut pada project bar:
 Gambar 11. Menu Projects


Keenam, ubah ukuran layout dan margin menjadi 480, 800. Cara untuk mengubah ukuran ini telah disampaikan pada tutorial sebelumnya.
 
Ketujuh, tambahkan background untuk layout Menu ini. Cara menambahkan background melalui Insert Sprite seperti yang telah dibahas pada tutorial sebelumnya. Background dapat kita buat di software grafis seperti Adobe Photoshop atau Corel Draw dalam format PNG ukuran 480x800 pixel.
 Gambar 12. Layout Menu


Siapkan juga tombol-tombol yang diinginkan. Tombol dapat kita buat di Microsoft Office Powerpoint atau download di internet.
Pada tutorial sebelumnya telah dibahas langkah pembuatan media sampai dengan menambah layout dan eventsheet untuk menempatkan tombol-tombol navigasi. Layout dan evensheet ini pada tutorial bagian 2 kita beri nama yang sama, yaitu “Menu”. Tombol-tombol perlu disiapkan terlebih dahulu, baik dengan download di internet maupun kita buat di software grafis ataupun kita buat di Powepoint. Setiap tombol berupa shape atau pun gabungan gambar dan shape yang kita simpan dalam bentuk gambar (save as picture) dengan format PNG. Berikut ini contoh tombol yang dibuat di Powerpoint:

Gambar 13. Create Power Point



Setelah semua tombol telah siap, sisipkan tombol satu per satu  ke dalam layout Menu dengan cara seperti menyisipkan background, yaitu dengan klik kanan pada layout kemudian pilih Insert new object kemudian pilih Sprite. Jika anda merasa kesulitan maka silahkan baca kembali tutorial bagian 1. Aturlah besar kecilnya tombol. Jika langkah anda benar maka tampilan pada layout Menu adalah sebagai berikut.
 
Gambar 14. Metoda Create Power Point

Untuk memudahkan kerja kita maka setiap gambar atau object yang kita sisipkan ke dalam layout sebaiknya kita beri nama yang berbeda. Lihat pada Project Bar di sebelah kanan layout, semua object yang telah kita sisipkan ada di  folder Object types, ubah nama masing-masing object (sprite) dengan klik kanan kemudian pilih Rename. Lalu ketikkan nama object yang sesuai.

Gambar 15. Object Types


Setelah selesai tambahkan layout dan evensheet untuk materi, latihan soal dan evaluasi masing-masing 1 layout dan 1 eventsheet. Cara menambah layout dan eventsheet dapat dilihat di tutorial bagian 2. Ubah nama layout dan eventsheet menjadi materi, latihan soal dan evaluasi.
Gambar 16. Properties Projects


Tambahkan background untuk masing-masing layout tersebut seperti pada saat memberi background pada layout Menu. Jika langkah anda benar maka akan muncul jendela Add Event, silahkan pilih “Touch” kemudian pilih “on touched object”.

BERSAMBUNG

Post a Comment