Pembuatan Media Pembelajaran

Berbasis Android
Dengan Menggunakan Power Point,
iSpring Suite 9 & Web 2 apk

Oleh :
Tekad Budi Wibowo, S. Pd

1
Dalam Modul Tutorial ini akan dibahas :
A. Cara menginstall iSpring Suite 9
B. Membuat Power Point yang aktraktif
C. Membuat HTML5 dengan iSpring Suite 9
D. Membuat Aplikasi dengan menggunakan Website 2 Apk Builder

2
 A. CARA MENGINSTALL ISPRING 9 DI LAPTOP
1. NON AKTIFKAN ANTI VIRUS
a. Klik kanan pada tombol windows

b. Klik search

c. Ketikkan Defender pada kolom search dan pilih Windows defender

3
d. Matikan / kekirikan 3 tombol on yg ada

Sehingga menjadi seperti ini

Untuk tampilannya berbeda dengan yang di atas

a. Klik kanan pada tombol windows

4
b. Klik search

c. Ketikkan Defender pada kolom search dan pilih Virus & threat protection

5
 d. Klik “manage settings”

e. Matikan / kekirikan tombol on yg ada

2. Mendownload aplikasi iSpring 9 dan cara menginstall

Klik link berikut untuk mendownload : https://bit.ly/39UDQte

6
Setelah selesai mendownload, buka Windows Explorer >> Download
Double klik iSpring Suite 9 x 64 yang sudah kita download tadi

7
Setelah double klik nanti akan muncul seperti ini. File akan berada di Drive DVD
Kemudian klik _igetintopc.com_ispring_suite_x64_9_7_2 untuk preparing install

jangan lupa centhang “I accept the terms in the License Agreement” dan klik “install”.
Tunggu beberapa saat sampai selesai menginstall. Ada notif permision klik “YES”.

8
Jika sudah selesai menginstall tampilannya seperti ini

JANGAN KLIK “LAUNCH” TAPI TOMBOL CLOSE (X)

Kembali ke Windows Explorer. Klik Folder _igetintopc.com_Fix

Kemudian copy (ctrl + C) file Patch

9
Kemudian klik Local Disk (C) >> Program Files >> iSpring >> Suite 9 >> bin.
Paste-kan Patch yang sudah kita copy tadi (ctrl + V)

Klik 1x Patch (yang sudah dipaste-kan di bin) lalu klik kanan >> run as administrator

Kemudian muncul dialog box. Pilih yes

10
Kemudian muncul dialog box seperti di bawah dan terdengar backsound.

Klik 2x dibagian kepala harimau sehingga nanti ada tanda - - -

Penginstalan iSpring Suite 9 sudah berhasil dan silahkan buka power point nya.
Nanti adamenu iSpring Suite 9 dan sudah tidak ada watermark iSpring apabila
akan digunakan.

SELAMAT MENCOBA
11
 B. MEMBUAT POWER POINT YANG AKTRAKTIF
1. Buka Powerpoint dan beri nama

2. Ubah slide size dengan cara

Klik Menu Design >> Slide Size >> Custom Slide Size

12
 Setelah custom slide size diklik kemudian pilih widescreen “on screen show (16
: 9) kemudia OK:

1 2

3. Membuat opening untuk media

a. Membuat background
Klik >> design >> format background >> fill (pilih 1 warna atau gambar juga
bisa

Buatlah 2 lingkaran dengan berbeda ukuran dan insert-kan gambar awan kecil,
awan besar dan bintang-bintang (silahkan download asset di :
https://bit.ly/3zSERN9)

13
Jangan lupa untuk menambahkan judul dari media kita dan tombol start/play

Kemudian tambahkan backsound ke dalam slide tsb (masih dalam slide 1).
Lagu/backsound dalam bentuk MP3
Klik menu insert >> audio >> audio on my PC

1 2

Setelah selesai kita akan melakukan animasi terhadap slide 1

Klik menu Animation >> animation pane

14
Ikuti langkah berikut : 1 2 3
1. Klik lingkaran 1 (yang besar)
2. pilih animation yang diinginkan
3. klik Start >> with previous

5 6
4
4. klik lingkaran2 2
5. pilih animation yang diinginkan
6. klik Start >> with previous
7. ubah delay menjadi 00,25

8. klik gambar awan besar kiri >> animation >> motion paths >> effect option
left
9. lakukan yang sama dengna awan besar kanan tetapi effect optionnya right

15
10. Lakukan juga untuk awan putih yang kiri
11. Untuk bintang hanya diberikan efect entrance “fly in” dengan waktu delay
yang berbeda-beda sehingga munculnya secara bergantian

12. Terakhir kita berikan effect untuk backsoundnya.

Klik icon sound >> start >> after previous

13. Klik tombol “PLAY” >> insert >> Hyperlink >> pilih hyperlink to next slide
>> play sound Click.wav >> OK

16
4. Membuat menu-menu di slide dan melakukan hyperlink
Setelah kita bekerja di SLIDE 1 maka selanjutnya kita akan melakukan pembuatan
menu-menu media di slide 2
Biasanya dalam media pembelajaran ada beberapa menu yang kita buat :
a. Kompetensi
Dalam menu ini ditampilkan kompetensi dan indikator yang akan dibahas oleh
media pembelajaran kita
b. Materi
Dalam menu ini ditampilkan materi-materi media pembelajaran
c. Video
Jika ada video tutorial atau video penjelasan bisa disematkan dalam menu ini
d. Kuis
Kuis ini digunakan sebagai latihan bagi siswa setelah mempelajari materi-materi
dalam media kita
e. Biografi
Biografi penting disematkan untuk mengetahui/memberikan informasi siapa
pembuat media pembelajaran ini

Slide 2

17
Dalam membuat media pembelajaran ini perlu kiranya kita mendesain tampilan-
tampilan apa saja yang muncul dan slide mana saja yang harus kita hyperlink.
Contoh desain media pembelajaran yang akan kita buat
Slide Nama menu Isi Keterangan
ke-
1 Opening Media Opening media Jika tombol “Play”
pembelajaran diklik maka akan
menuju slide 2. Kita
Ucapan selamat datang
lakukan hyperlink
Tombol “Play” pada tombol “play”

2 Menu-menu Kompetensi Hyperlink pada

utama menu-menu di
Materi
samping sesuai
Video dengan slide-slide
mana saja yang kita
Kuis buat
Biografi
Tombol “narasi” (jika
diperlukan)
3 Kompetensi Kompetensi dasar Tombol “next” di-
hyperlink ,menuju
Tombol “NEXT”
slide ke-3.
Tombol Home
berfungsi ke slide 2
sebagai balikan ke
menu-menu utama
4 Indikator pencapaian Tombol “Back”
kompetensi berfungsi untuk
kembali ke
Tombol “BACK” dan
“Kompetensi Dasar”
“HOME”
Tombol Home
berfungsi ke slide 2
sebagai balikan ke
menu-menu utama
5 Materi Pengertian
….
….

18
5. Cara mengubah icon sound
Klik menu Insert >> Audio >> audio on my PC >> pilih audio yang akan kita ambil

1
Selanjutnya klik icon sound >> klik kanan >> change picture >> pilih icon yang akan
kita gantikan

6. Membuat kuis
a. Buat slide pertama sebagai penanda bahwa itu adalah kuis

19
 Lakukan hyperlink pada tombol “start now” ke slide berikutnya dan “home” ke
slide utama
b. Slide kedua
Klik menu iSpring Suite 9 >> Quiz << Graded Quiz

Setelah itu muncul dialog box seperti di bawah ini

kemudia klik “Question” >> “multiple Choice

20
Kemudian isikan soal-soal yang akan kita buat lengkap dengan pilihan jawaban
kunci jawabannya dan core. Caranya adalah dengan mengklik dialog box yang
ada. Jika ingin menambahkan gambar pada soal silahkan klik icon gambar (pada
linkaran warba hitam)
pada tampilan “feedback and branching” bisa diganti dengan bahasa indonesia.
Misal untuk jawaban benar “selamat Anda benar” dan jika jawaban salah
“silahkan pelajari kembali materi yang sudah disampaikan”

Untuk soal nomor 2 dan seterusnya ulagi lagi langkah ini mulai dari “question”
Kita bisa melihat tampilan kuis yang kita buat dengan menekan menu “Preview”
Jika kuis yang kita buat sudah selesai maka klik “save and return to course”

Setelah itu maka kita akan kembali ke slide power point lagi

21
 Yang perlu diperhatikan :
Kuis yang kita buat ini tidak bisa dijalankan dari power point dengang mengklik
tombol slide show atau F5. Kuis ini bisa dijalankan nanti saat kita sudah
mengubahnya ke dalam HTML5. Jadi tidak usah kaget apabila tidak bisa
dijalankan

C. Membuat HTML5 dengan iSpring Suite 9

Kita bisa melihat hasilnya seperti apa dengan cara mengklik menu iSpring Suite
9 >> Preview

Setelah power point yang kita buat dirasa sudah selesai maka langkah berikutnya
adalah membuat HTML5.
Caranya
Klik menu iSpring Suite 9 >> Publish

22
Setelah klik “Pusblish” maka muncul dialog box seperti berikut :

Ubahlah project nama dan folder yang kita inginkan. Harap mengingat-ingat
dimana folder nanti akan dituju, jangan sampai lupa !!
Kemudia klik HTML5 >> bagian size dirubah menjadi fit to broser window

Lalu klik “Publish”

Setelah itu tunggu beberapa saat

23
 Setelah selesai akan muncul dialog box seperti ini. Dan selesai langkah membuat
HTML5

Perhatian : dalam menjalankan iSpring Suite 9 HARUS DALAM KONEKSI

INTERNET YANG STABIL. Apabila tidak stabil maka akan berpengaruh saat
membuat apk di langkah selanjutnya.

D. Membuat Aplikasi dengan menggunakan Website 2 Apk Builder

Setelah selesai membuat HTML5 maka langkah selanjutnya adalah membuat
apk dengan menggunakan aplikasi website 2 apk builder.
Download terlebih dahulu softwarenya di https://bit.ly/3B2gm1z
jika komputer/laptop anda belum ada software java8 maka bisa didownload di
https://bit.ly/2ZRlBDt

apabila sudah berhasil mendownload dan menginstall web 2 apk maka kita
sudah siap membuat apk
langkah-langkahnya :
1. Buka aplikasi web 2 apk dari dekstop (dalam mode internet online)
2. Tampilan pertama akan seperti ini

24
 3. Kemudian pilih/isikan
a. Website type to convert : Web
URL (pilih)
b. App Title (dengan nama
aplikasi kita yang akan tampil
di HP. Tidak usah terlalu
panjang)
c. Output Directory bisa diganti
sesuai keinginan
d. Extras tidak diceklist kecuali
Full screen
e. Change icon diganti dengan
gambar yang kita inginkan.
Icon ini nanti akan terlihat
saat apk terinstall di HP.
Seperti logo apk kita
f. Directory of local website
choose folder dimana saat kita
membuat HTML kita. Hanya
diklik/pilih Foldernya saja.
Biasanya ada tulisan
(Published)

g. Setelah selesai semua maka tinggal klik “GENERATE APK” dan tunggu
beberapa saat.
h. APK yang sudah jadi akan tampil sesuai dengan dimana output kita pilih.
i. Ambil APK tersebut kemudian kirim melalui Whatsapp Web dan share
untuk diinstall di HP
j. Install HP sangat mudah tinggal diklik dan nanti akan otomatis akan
terinstall di HP kita

Demikian Modul Tutorial pembuatan media pembelajaran berbasis android dengan

menggunakan power point, iSpring Suite 9 dan Website 2 apk.
Mohon maaf apabila banyak kekurangan.
Selamat mencoba

25