BUKU PANDUAN MEMBUAT MEDIA

PEMBELAJARAN E-MODUL BERBASIS

ARTICULAT STORYLINE

Penulis : Dede Rohendi Nurcahyadi

Kata sambutan : Drs. Sidi Nurzengky Ibrahim,. MM,. PhD,. Dr,. stsm (Dosen Ahli
Kewirausahaan Pembelajaran Sejarah Kajian Film dan Media)
 Kata Pengantar

Puji dan Syukur senantiasa kita panjatkan kehadirat Tuhan Yang

Maha Esa, karena dengan izinnya dan Ridho-Nya buku tentang “Buku

Panduan Membuat Media Pembelajaran E-Modul Berbasis Articulat

Storyline” ini dapat diselesaikan oleh penulis.

Kami mengucapkan terimakasi kepada semua yang telah

membantu, sehingga buku ini dapat diselesaikan pada waktunya. Buku

ini masih jauh dari sempurna, oleh karena itu keritik dan saran yang

bersifat membangun sangat kami hrapakan demi sempurnanya buku ini.

Semoga buku ini memberi informasi bagi masyarakat dan

bermanfaat untuk pengembangan wawasan serta meningkatan ilmu

pengetahuan bagi kita semua.

Bogor, 16 Mei 2014

Penyusun

i
 Kata Sambutan

Saya ini dibuat berbahagia dari sodara Dede Rohendi N

untuk pembuatan buku “Buku Panduan Membuat Media embelajaran

E-Modul Berbasis Articulat Storyline”

Kenapa, karena beliau merasa kegembiraan atas restu untuk

dideklarasikan atas arahan saya. Semoga buku ini bisa membeikan

informasi dan menambah pengembangan wawasan mengenai media

pembelajaran yang sudah ada.

Jakarta, 16 Mei 2014

Drs.sidi.Nurzengky Ibrahim, MM., PhD., Dr. STSM

ii
 Daftar Isi

Kata pengantar..................................................................................... i
Sambutan .......................................................................................... ii
Daftar Isi ......................................................................................... iii
Bab I
Menginstal Software Articulate Storyline............................................... 1
A. Menginstal Adobe Flash Player ............................................. 1
B. Menginstal Articulate Storyline ............................................. 4
Bab II
Fungsi Menu Articulate Storyline .......................................................... 9
A. Awal Membuat Slide............................................................. 9
B. Memilih Ukuran Halaman Layar .......................................... 10
C. Melihat Tampilan proyek .................................................. 12
D. Membuat Tombol/Button ................................................... 15
E. Memasukan Teks, Audio, Visual, Dan Audiovisual ................ 18
F. Menyimpan Dokumen ......................................................... 20
G. Publikasi ......................................................................... 21
Bab III
Pembuatan Modul Elektronik Menggunakan Articulate Storyline ......... 27
A. Membuat GBPP .................................................................. 27
B. Storyboard ....................................................................... 32
C. Membuat Media E-Modul Menggunakan Articulate Storyline.. 41
Daftar pustaka ................................................................................... 42

iii
 BAB. I
Menginstal Software Articulate Storyline

Sebelum penginstal software articulate stroryline terlebih

dahulu kita harus instalasi atau memperbarui adobe flash player ke
versi 10.0 karena bila tidak articulate storyline tidak akan bisa dibuka.
A. Menginstal Adobe Flash Player
1. Buka Browser Mozilla firefox, Opera atau sejenisnya dan klik link
Download Adobe Flash Player Terbaru. Setelah masuk area download
Adobe Flash Player silahkan hilangkan tanda checklist dibawah Free!
1

Gambar 1
Gambar cara menngunduh adobe flash player

McAfee Security Scan Plus dan klik pada tombol Dwonload

Now. (lihat gambar 1)
2. Setelah itu Akan muncul jendela kecil, dan langsung klik Save File
kemudian simpan di computer kamu. (lihat gambar 2)

Gambar 2
Gambar cara menyimpan adobe flash player

3. Tunggu proses download dari server Adobe System ke computer

kamu. Setelah proses download selesai, pada file adobe flash yang
berekstensi .exe langsung Double Klik atau Klik Kanan dan pilih
2
Open. (lihat gambar 3)

Gambar 3
Gambar cara membuka dan proses penginstalan adobe flash palyer

4. Pada Jendela berikutnya, klik tombol Run untuk menjalankan

program. (lihat gambar 4)
 Gambar 4
Gambar menjalankan penginstalan adobe flash player

5. Tunggu proses Instalasi Adobe Flash Player sampai selesai. Untuk

menghindari error, silahkan tutup semua aplikasi yang sedang
berjalan, termasuk browser Mozila Firefox. Setelah proses instalasi
selesai, langsung klik tombol Finish. (lihat gambar 5) 3

Gambar 5
Gambar inslatasi adobe flash player
 Proses Cara Install Adobe Flash Player dikomputer kamu sudah
selesai. Sekarang kamu bisa membuka articulat storyline tanpa
mengalami error serta nyaman.
B. Menginstal Articulate Storyline
Sesudah penginstalan atau pembaharuan adobe flash player,
sekarang kita akan menginstal articulate storyline tersebut ;
1. sebelumnya kita unduh dulu caranya masuk ke alamat website
www.articulate.com sesudah ini baru kita unduh software articulate
storyline dan simpan di komputer.
2. Klik kanan installer, dan pilih Run as administrator

Gambar 6
Gambar proses penginstalan software articulate storyline

3. Setelah muncul jendela install articulate storyline, klik next

Gambar 7
Gambar penginstalan software
articulate storyline
4. Kemudian akan muncul slide bar seperti di bawah, kita klik atau
pilih I accept the terms of the license agreement, klik next

Gambar 8
Gambar penginstalan software articulate storyline

5. Selanjutnya akan muncul tempat dimana kita akan menyimpan

5
instalan articulate storyline tersebut

Gambar 9
Gambar menentukan tempat menyimpan instalasi articulate storyline

6. Setelah itu akan muncul slide bar install shield wizard articulate
Kemudian klik install
 Gambar 10
Gambar tampilan slide bar install shield wizard articulate

7. Kemudian muncul install shield wizard articulate, tunggu

samapai install selesai. setelah selesai klik Finist

Gambar 11
Gambar akhir penginstalan articulate storyline

C. Aktifasi Serial Number

 Jika Anda menggunakan free trials 30 hari, klik tombol Continue
your free trial. Jika Anda telah membeli lisensi, klik Activate with your
serial number, dan ikuti langkah-langkah untuk mengaktifkan .
1. Pertama anda harus membeli serial number masuk ke website
articulat.com sesudah itu akan muncul seperti gambar dibawah ini,
ikuti petunjuk sesuai website, bila sudah serial number akan
dikirim ke email yang anda berikan kepada website tersebut.

Gambar 12
Gambar pembelian serial number articulate storyline

2. Ketika saat membuka articulat storyline akan muncul seperti

gambar berikut, klik Activate dengan nomor seri.

Gambar 13
Gambar aktifasi mengunakan
serial number
3. Salin nomor seri dari email yang telah dikirim oleh website
articulat, dan dan letakan Nomor Serial pada form aktivasi.
Kemudian klik tombol Aktifkan

Gambar 12
Gambar cara memasukan serial number pada articulate storyline
4. Setelah itu klik activation success, dan articulate storyline tersebut 8
sudah tidak trial lagi
 BAB. II
Fungsi Menu Articulate Storyline

A. Awal Membuat Slide

Ada beberapa cara untuk memulai sebuah proyek baru dari awal
Storyline:
1. Klik tombol yang berbentuk logo articulat di sudut kiri atas dan pilih
New.

Gambar 14 9
2. Atau, pada layar peluncuran Storyline, klik Proyek baru.

Gambar 15

3. Atau, tekan Ctrl + N pada keyboard Anda.

B. Memilih Ukuran Halaman Layar

Ketika Anda pertama kali memulai proyek baru, tentu ada konten
untuk menentukan ukuran halaman yang akan diabuat.
 Gambar 16

Anda dapat dengan mudah memilih ukuran yang berbeda dengan

menggunakan Story Size pada menu Design. Jika Anda ingin
mengubah ukuran halaman, lebih baik dilakukanya sebelum Anda
menambahkan konten apapun untuk halaman/slide Anda. Jika tidak,
ketika Anda mengubah ukuran, objek pada slide Anda mungkin perlu
mengatur ulang kembali
Perlu diingat bahwa ketika Anda mempublikasikan, ukuran total
10
output ditampilkan akan sedikit lebih besar dari dimensi yang Anda
pilih untuk Size Story. Tergantung pada fitur pemutar dan kontrol yang
anda masukan, dan anda bisa menambahkan hingga 260 piksel lebar,
dan sampai 118 piksel tingginya. Untuk rincian lebih lanjut tentang
menyesuaikan ukuranya anda bisa lihat tata cara pembuatanya.
Berikut adalah cara untuk mengubah ukuran cerita Anda:
1. Klik menu Design pada pita Storyline.
2. Pilih Story Size.

Gambar 17
 3. Selanjutnya anda bisa merubah ukuran sesuai dengan yang diinginkan lalu
klik ok.

Gambar 18

C. Melihat Tampilan proyek

1. Story view berfungsi untuk memberi Anda gambaran besar dari
semua konten yang dibuat. Anda dapat melihat dan mengatur
beberapa slide dalam satu group kadang disebut Scenes. Maksudnya
scenes yaitu terdiri dari beberapa slide yang saling berhubungan dan
11
didalam slide juga terdapat beberapa bagian kecil dari slide yang
sering disebut dengan layers.
Untuk menampilkan story view anda bisa klik bagian paling
bawah layar

Story view

Gambar 20

Gambar 19
 Atau, Anda dapat mengklik menu View dan pilih story view :

Story view

Gambar 21

2. Normal view berfungsi sebagai tempat di mana Anda membuat dan

menyesuaikan konten tiap slide. Di sini, Anda dapat mengedit baik
menambahkan atau menggurangi konten yang kita butuhkan.

Normal view

12

\ Gambar 22

Untuk menampilkan normal view anda bisa klik bagian paling

bawah layar

Normal View

Gambar 23

3. Preview berfungsi untuk menampilkan hasil proyek sementara

sebelum dipublikasikan yang mana kita bisa melihat apakah proyek
yang kita buat sudah sesuai dengan keinginan ataukah harus ada
perbaikan
 Preview

Gambar 24

Untuk menampilkan preview tersebut anda bisa klik bagaian

bawah layar atau dengan cara menekan F12 pada keyboard, bisa juga
anda mengklik di submenu articulat.

Gambar 25

13

Gambar 26

D. Menentukan Dan Memilih Fitur-Fitur Yang Akan Ditampilkan

E. Membuat Tombol/Button
Storyline memiliki bermacam bentuk tombol yang membantuk
anda didalam mengontrol media pelajaraan yang anda buat. Bentuk
tombol-tombol terdiri dari berbagai macam bentuk ada yang persegi
panjang, oval, tanda panah, gaya kotak centang dll.
1. Cara menyisipkan tombol
Untuk menyisipkan tombol ke slide storyline ikuti langkah-
langkah berikut ;
a. Tentukan ke slide yang akan anda tambahkan tombol
b. Pilih insert.
 Gambar 27

c. Klik button dan pilih salah satu bentuk tombol yang tersedia.
Kemudian akan
terlihat kursor yang
tadinya bentuk panah
berubah menjadi
Gambar 28
tanda plus “+” .
d. Klik dan seret kursor tersebut ke dalam slide yang sudah
ditentukan. Setelah tombol terbentuk anda bisa mengubah
ukuran dan warna sesuai yang diinginkan. Dengan cara menekan

Button styles Button fill

Button border 14

Botton effects
Format shape

Gambar 29
menu format lalu disana terdapat cara memberikan warna pada
tombol dengan cara klik button fill, untuk memberi garis pada
tombol anda bisa klik botton border, memberikan button efek
anda bisa klik button effects, dan untuk memberikan bentuk
tombol yang menarik bisa klik botton styles serta untuk lebih
lengkapnya anda bisa klik format shape.
e. Kemudian untuk memberikan teks pada tombol anda bisa klik
tombol tersebut lalu klik kanan pada
mouse dan pilih edit text.

Gambar 30
 f. Agar memudahkan membuat beberapa tombol yang sama anda
bisa mengklik tombol tersebut lalu geser dan tekan klik kanan
pada mouse.
2. Membuat tombol bekerja
Setelah anda membuat satu atau lebih tombol pada slide kita
lanjut dengan membuat agar tombol itu kekerja dengan cara klik
tombol yang kita buat lalu pilih submenu trigger pada menu insert,
disana terdapat pilihan diantaranya;
a. action berfungsi mengarahkan tombol pada slide atau scene
yang kita tuju,
b. slide berfungsi untuk menentukan maju atau mundur
“next/prevouse” pada layar tersebut,
c. when berfungsi menekan tombol agar bisa bekerja anda bisa
memilih 1 klik, 2 klik, apakah mengklik mengunakan tombol
kanan atau kiri pada mouse.
d. Object berfungsi menentukan tombol mana yang harus bekerja.
15

trigger

Gambar 31

F. Memasukan Teks, Audio, Visual, Dan Audiovisual

1. Memasukan teks
Untuk memasukan teks didalam storyline kita bisa memilih menu
insert lau pilih text box, setelah itu akan merubah kursor tersebut
menjadi bentuk plus “+” lalu tekan kursor tersebut pada slide yang
telah ditentukan, nanti akan ada bentuk persegi panjang yang
bergaris patah-patah setelah itu kita masukan kata atau angka yang
kita inginkan.
 Gambar 32

2. Memasukan video
Storyline memberikan tiga macam bentuk dalam memasukan
video kedalam slide antara lain yaitu ; video yang kita ambil dari file
yang kita punya, kedua kita bisa mengambil video dari website dan
yang terakhir kita bisa ambil video dengan cara merekam secara
langsung.
Cara memasukan video tersebut dengan cara tekan menu
insert pilih video nanti akan ada kreteria video yang akan kita
masukan.

Gambar 33 16

3. Memasukan audio
Cara memasukan audio pada storyline tidak jauh seperti
memasukan video, yaitu ; klik insert lalu pilih sound. Namun
dalam memasukan audio, storyline memberikan dua kriteria antara
lain mengambil audio yang ada di file yang telah kita tentukan dan
merekam audio secara langsung.

Gambar 34

G. Menyimpan Dokumen
Untuk menyimpan dokumen didalam storyline anda bisa tekan
tombol yang berbentuk logo articulat storyline lalu pilih save as/save,
 setelah itu tentukan tempat penyimpanan
yang kita inginkan kemudian beri nama file
pada file name dan tentukan jenis yang ingin
anda simpan di save as type klik save.

Gambar 35

H. Publikasi
1. Mempublikasikan untuk WEB
Jika anda menginginkan pempublikasianya di website anda
bisa mengunakan web. Langkah-langkah dalam pembuatanya
antara lain :
a. Memasukan judul, deskripsi dan lokasi penyimpanan
Pada menu home atau dari setiap menu pada storyline anda
kemudian pilih publish.

17

Gambar 36

Ketika jendela publish muncul kelik tab web

Gambar 37
 Selanjutnya didalam web tersebut terdapat Title yang berfungsi
untuk menentukan judul dari proyek yang kita buat. Bila kita
menginginkan deskripsi secara singkat tentang proyek yang kita
buat bisa masukan didalam description dan untuk menyimpan
dimana proyek yang kita inginkan bisa pilih folder lalu pilih
tempat penyimpanan.
Untuk lebih terperinci atau memasukan informasi proyek
tambahan untuk articulate storyline mobile player anda bisa klik
tombol sebelah
kanan title nanti
akan muncul
jendela proyek info
selanjutnya isikan
sesuai yang anda
inginkan.

18

Gambar 38

b. Pilih HTML5 dan atau penerbitan di mobile

Jika anda menginginkan agar proyek bisa dipublikasi di dalam
IPad anda bisa ceklis bagian yang ada di publishing for HTML5
and mobile devices

Gambar 39

2. Mempublikasikan untuk articulate online

 Mempublikasikan dengan articulate online tidak jauh beda
dengan langkah-langkah
mempublikasikan di
web, namun yang
membedakan adalah
anda harus melengkapi
account Information
dimana anda harus
mengisikan website
articulat storyline dan
memasukan email serta
password anda.

Gambar 40

3. Mempublikasikan untuk LMS

Jika anda ingin mempublikasikan berbentuk learning
19
management system (LMS), anda bisa mengunakan publish
LMS. Didalam pembuatanya sama seperti web namun yang
membedakan adanya output optional dimana kita harus bentuk
LMS tersebut.

Gambar 41
4. Mempublikasikan untuk CD
Jika anda ingin mempublikasikan berbentuk CD, DVD, dan
flashdisc, publish CD. Dimana didalam pembuatanya sama seperti
sebelumnya, namun
yang membedakan
anda bisa menjalanya
proyek di media
player yang ada di
computer anda.

Gambar 42

5. Mempublikasikan untuk Word

20
Storyline juga bisa mempublikasikan kedalam bentuk Ms. Word,
yang mana anda ingin menyediakan bahan ajar yang berbentuk
media cetak. Dalam pemuatanya jg tidak jauh seperti yang
sebelumnya.

Gambar 43
 BAB. III
Pembuatan E-Learning E-modul Menggunakan Articulate
Storyline

A. Menentukan Model E-Learning

B. Membuat GBPP
Sebelum membuat GBPP terlebih dahulu kita harus mempersiapkan
Contoh membuat GBPP
Garis Besar Perencanaan Program
Model Drill and Practive

Satuan Pendidikan : SMA/MA

Program : Elektronik Modul (E-Modul )
Model : Drill and Practive
Mata Pelajaran : Sejarah
Topik : Perkembangan Negara-negara Kerajaan 21
Hindu-budha di Indonesia
Sasaran : SMA/MA (Kelas XI Semester I )
Media : Komputer
Durasi : 15 Menit

I. Pendahuluan
Modul elektronik ini akan mengantarkan anda untuk
menganalisis pengaruh perkembangan agama Hindu-Budha terhadap
kehidupan masyarakat di berbagai daerah di Indonesia
Melalui kegiatan komputer, anda dapat memahami
perkembangan agama dan kebudayaan Hindu-Budha terhadap
masyarakat di berbagai daerah di Indonesia yaitu hipotesa proses
masuknya ajaran agama Hindu-Budha, proses interaksi, pengaruh
agama Hindu-Budha terhadap kerajaan-kerajaan yang bercorak
Hindu-Budha di Indonesia dan bukti-buktinya. Yaitu meliputi
kerajaan Kutai, Tarumanegara, Sriwijaya, Mataram Kuno, Kediri,
 Singosari, Majapahit, & lainya terhadap terhadap kehidupan
masyarakat Indonesia.
Dari proses integrasi masyarakat dan kerajaan-kerajaan yang
bercorak Hindu-Budha di Indonesia maka akan diharapkan tumbuh
kesadaran dalam diri anda untuk menghargai dinamika masyarakat
Indonesia sehingga dapat memperkokoh rasa persatuan dan kesatuan
bangsa
Dalam hal ini materi pengajaran disusun secara sistematis dan
dirancang dengan menggunakan Software Articulate storyline.
Pemrograman materi pembelajaran tersebut meliputi tujuan
pembelajaran, penguasaan materi dan soal-soal latihan.
II. Tujuan
Kompetensi Inti
Menganalisis perjalanan bangasa Indonesia pada masa Negara-
negara tradisonal
Kompetensi Dasar
22
Menganalisis perjalanan bangsa Indonesia pada masa Negara-
negara Tradisional
Indikator
 Mengidentifikasi peta perkembangan kerajaan Mataram Kuno di
Indonesia
 Menganalisis muncul dan berkembangnya Negara Mataram
Kuno di Indonesia
 Menganalisis sumber keberadaan kerajaan Mataram Kuno di
Indonesia
 Mendeksripsikan social, ekonomi, politik, dan budaya kerajaan
Mataram Kuno di Indonesia
 Menjelaskan keruntuhan Negara – Negara kerajaan Mataram
Kuno di Indonesia
III.Pengalaman Belajar/Materi Soal
 Pembelajaran terdiri dari beberapa unit, yang dikemas dalam
bentuk Elektronik Modul (E-modul). Adapun materinya meliputi :
a. Muncul dan berkembangnya Negara – Negara kerajaan Pajajaran
dan Majapahit di Indonesia
b. Kehidupan social , ekonomi, politik dan budaya kerajaan
Pajajaran dan Majapahit di Indonesia
c. Faktor – Faktor Penyebab Runtuhnya Pajajaran dan Majapahit di
Indonesia.
Masing-masing unit dalam program terdapat struktur sebagai
berikut :
 Uraian/konsep
 Latihan soal
 kesimpulan
IV. Sinopsis
Elektronik modul ini berisi tentang uraian materi, latihan-
latihan soal mata pelajaran sejarah, topik bahasan Perkembangan
23
Negara-negara Kerajaan Hindu-budha di Indonesia, yang disajikan
dalamm bentuk pembelajaran berbasis komputer model Drill
dilengkapi dengan unsur-unsur audio, visual, animasi yang dikemas
secara interaktif dan menarik.
V. Treatment
Program diawali dengan munculnya teks pembuka “ Selamat
Datang di Elektronik Modul (E-Modul), seiring dengan munculnya
teks tersebut muncul pilihan “Start” untuk memulai program
tersebut.
Setelah diklik “Start” maka tampilan berikutnya menghadirkan
beberpa menu yang terdiri dari “Tentang Program” untuk
mengetahui seputar tujuan pembelajaran, “Petunjuk” di fungsikan
untuk mengenai petunjuk penggunaan program, “Materi” untuk
memasuki materi pelajaran dan merupakan langkah menuju
pembelajaran sejarah, “Latihan Saal” dalam latihan soal ini
 penyajianya dikembangkan sesuai dengan pola dasar dari model Drill
and practice yaitu penyajian masalah-masalah dalam bentuk latihan
soal pada tingkat tertentu dari penampilan siswa, siswa mengerjakan
soal-soal latihan, program merakam kenerja siswa didalam menjawab
semua soal-soal yang telah ditentukan, mengevaluasi kemudian bila
skor siswa sama dengan atau lebih besar dari 80% maka dinyatakan
lulus dan itu berarti siswa telah berhasil memahami materi yang
disajikan, namun bila sekor siswa kurang dari 80% maka siswa
dinyatakan gagal dan itu berarti siswa harus mengulang latihan soal
tersebut, “Penutup” yang berisi mengenai rujuakan, ucapan
terimakasih.
C. Storyboard
No. VISUAL AUDIO
SCENE 1
1. Muncul teks pembukaan “ SELAMAT DATANG” di
ikuti teks “ PELAJARAN SEJARAH” dan topik “
PERKEMBANGAN NEGARA-NEGARA Musik 24
KERAJAAN HINDU-BUDHA DI INDONESIA” instrumen

Klik tombol “Start” untuk melanjutkan ke slide

“Menu” selanjutnya.
SCENE 2
2. Menu
Muncul lima pilihan tombol :
a. “PETUNJUK PENGGUNAAN”
Untuk menyelesaikan program ini kamu harus
Musik
memahami materi dan harus mengikuti latihan
instrumen
soal yang akan mengukur tingkat keberhasilan
kamu dalam menguasai materi yang telah
dipelajari.

Ikuti tombol-tombol pilihan secara bergantian

 Bila ada kesulitan segera tanyakan pada
instruktur.
3. b. “TENTANG PROGRAM”
Modul elektronik ini akan mengantarkan anda
untuk menganalisis pengaruh perkembangan
agama Hindu-Budha terhadap kehidupan
masyarakat di berbagai daerah di Indonesia.
Musik
Dalam hal ini materi pengajaran disusun secara
instrumen
sistematis dan dirancang dengan menggunakan
Software Articulate storyline. Pemrograman
materi pembelajaran tersebut meliputi tujuan
pembelajaran, penguasaan materi dan soal-soal
latihan.
4. c. “TUJUAN PROGRAM”
Satuan Pendidikan : SMA/MA
Mata Pelajaran : Sejarah
Topik : “Perkembangan Negara-negara Kerajaan 25
Hindu-budha di Indonesia”
Sasaran : SMA/MA (Kelas XI Semester I )
Durasi : 15 Menit

Kompetensi Inti
Menganalisis perjalanan bangasa Indonesia
pada masa Negara-negara tradisonal
Musik
Kompetensi Dasar
instrumen
Menganalisis perjalanan bangsa Indonesia
pada masa Negara-negara Tradisional
Indikator
 Mengidentifikasi peta perkembangan
kerajaan Pajajaran dan Majapahit di
Indonesia
 Menganalisis muncul dan berkembangnya
Negara – negara kerajaan Pajajaran dan
Majapahit di Indonesia
  Menganalisis sumber keberadaan
kerajaan – kerajaan Pajajaran dan
Majapahit di Indonesia
 Mendeksripsikan social, ekonomi, politik,
dan budaya kerajaan Pajajaran dan
Majapahit di Indonesia
 Menjelaskan keruntuhan Negara – Negara
kerajaan Pajajaran dan Majapahit di
Indonesia
5. SCENE 3
d. “MATERI”
Materi Pembelajaran terdiri dari beberapa
unit, meliputi :
 Muncul dan berkembangnya Negara –
Negara kerajaan Pajajaran dan Majapahit
di Indonesia
 Kehidupan social , ekonomi, politik dan
26
budaya kerajaan Pajajaran dan Majapahit
di Indonesia
 Faktor – Faktor Penyebab Runtuhnya
Pajajaran dan Majapahit di Indonesia.
6 SCENE 4
e. “EVALUASI/LATIHAN SOAL”

1. Raja yang pernah memerintah dikerajaan

Pajajaran salah satu diantaranya adalah…

a. Sena
b. Gajah Mada
c. Hayam Wuruk
d. Purnawarman
e. Simaratungga
2. Pada masa pemerintahan siapakah perang
Bubat terjadi…

a. Maharaja Jayabupati
b. Rahyang Dewa Naskala
c. Rahyang Niskala Watu Kencana
d. Sri Baduga Maharaja
e. Gajah Mada

3. Ketika Pajajaran mengalami keruntuhan

akibat serangan dari kerajaan Demak dan
Banten. Rakyat Pajajaran yang tidak tunduk
dan memilih untuk tinggal dipedalaman dan
dikenal dengan suku…

a. Asmat
b. Badui
c. Batak
27
d. Toraja
e. Tengger

4. Peristiwa perang Bubat diawali pada recana

pernikahan raja Hayam Wuruk dengan putrid
Pajajaran yang bernama…

a. Diah Balitung
b. Diah Pitaloka
c. Mahesa Cempaka
d. Ken Dedes
e. Kusumawardhani

5. Pada masa pemerintahan penuh dengan

pemberontakan dalam sejarah Kerajaan
Majapahit salah satu dianntaranya
 pemberontakan yang dianggap paling
berbahaya dan hampir meruntuhkan
kerajaan Majaphit adalah…

a. Kuti
b. Sadeng
c. Biru
d. Nimbi
e. Bubat

6. Alasan Jayanegara mengangkat Gajah

Mada sebagai Patih di daerah Kahurip
adalah…

a. Gajah Mada berhasil melenyepkan

pemberontakan yang dipimpin oleh
Kuti
b. Gajah Mada merupakan putra dari
28
pamannya
c. Gajah Mada merupakan orang yang
tangguh dan berjiwa besar
d. Gajah Mada berhasil meluluhkan
pemberontakan Ronggolawe
e. Gajah Mada berhasil meluluhkan
pemberontakan Sora

7. Pada masa pemerintahan Raja

Tribhuwanatunggadewi meletuslah
pemberontakan Sadeng. Namun,
pemberontakan tersebut dapat ditumpaskan
oleh….

a. Gajah Mada dan Hayam Wuruk

b. Gajah Mada dan Adityawarman
 c. Gajah Mada dan Wirahbhumi
d. Gajah Mada dan Jayanegara
e. Gajah Mada dan Kertanegara

8. Tidak lam setelah Hayam Wuruk meninggal,

terjadilah perang saudara abtara
Kusumawardhani dengan Wirabhumi.
Perang itu dikenal dengan….

a. Perang Sora
b. Perang Bubat
c. Perang Buleleng
d. Perang Puputan
e. Perang Paregreg

9. Sepeninggal Patih Gajah Mada dan Hayam

Wuruk, kerajaan Majaphit mengalami
kemunduran. Hal ini dikarenakan…
29

a. Wilayahnya terlalu luas

b. Kekosongan kas Negara
c. Majaphit menganut sistem ekonomi
agraris
d. Ibukota kerajaan Majapahit pindah ke
pedalaman
e. Kekosongan kepemimpinan yang
cakap seperti Hayam Wuruk dan
Gajah Mada

10. Berikut ini salah satu penyebab runtuhnya

kerajaan yang bercorak Hindu – Budha di
Indonesia adalah…

a. Tersiarnya agama dan Budaya

 Islam
b. Banyaknya kaum Brahmana pindah
ke India
c. Banyaknya kerajaan yang di serang
oleh bangsa Barat
d. Berlangsungnya perang dengan
bangsa Barat
e. Banyaknya daerah yang
melepasakan diri akibat terlalu
kuatnya penjagaan

“SKOR”
Skor akan muncul pada akhir pengerjaan
latihan soal.
Bila skor siswa sama dengan atau lebih besar
dari 80% maka dinyatakan lulus dan itu berarti
siswa telah berhasil memahami materi yang
disajikan maka dilanjutkan dengan mengklik 30
tombol “exit”, namun bila sekor siswa kurang
dari 80% maka siswa dinyatakan gagal dan itu
berarti siswa harus mengulang dengan
mengklik tombol “retry quiz”, untuk melihat
kesalahan menjawab bisa mengklik “review
quiz”
7. f. “PENUTUP”
 Ucapan Terima Kasih
 Pengembang Program:
Dede Rohendi Nurcahyadi
 Daftar Pustaka

D. Membuat Media E-Modul Menggunakan Articulate Storyline

Setelah membuat storybord sekarang kita akan membuat media
modul elektronik (emodul) menggunakan articylate storyline.
1. Untuk mengawali pembuatan modul elektronik kita buka dulu articulat
stroyline dan pilih new project, setelah itu kita tentukan dulu ukuran
slide yang kita inginkan di menu design dan plih story size seperti
contoh gambar dibawah ini ;

Gambar 44

Didalam story size terdapat tiga pilihan ukuran 720x540, 720x540 ,

dan costum. Kita pilih ukuran yang 720x540. Selanjutnya kita edit
playernya agar kita bisa memilih apa saja yang harus tampil di layar
31
modul elektronik tersebut, Untuk membuat layar terlihat luas saat
modul elektronik di tampilkan kita jangan menceklik semua yang ada di
edit player.

Dihilangkan ceklis
yang ada pade setiap
player tabs

Gambar 45
 Selanjutnya kita tekan properties yang ada di slide slayer sebelah
samping kanan dan hilangkan ceklis pada next dan privous agar
tampilanya seperti dibawah ini ;

Gambar 46

2. Membuat judul program

Ditahap ini kita akan membuat dulu judul program yang kita buat,
32
anda bisa lihat contoh judul program pada gambar dibawah ini ;

Gambar 47

Tahapan membuat judul program yang pertama kita buat “ selamat

datang” dan “ di modul elektronik ”dengan cara pilih bentuk persegi
panjang pada shape yang ada di menu insert selanjutnya tekan dan
tahan shape itu pada slide yang telah disediakan.

Gambar 48

lalu klik kanan pada mouse, pilih edit text dan ketik “ selamat
datang “, sesuaikan ukuaran teks “font size” yang kita inginkan tetapi
disini saya memberikan ukuran 48 dan jenis teks “font” script Mt Bold.
33

Gambar 49

Agar latar teks telihat warna transparan kita bisa tekan tekan latar
belakang “selamat datang” lalu pilih format dan klik shape styles.
 2

Gambar 50

Dan untuk merubah latar warna teks kita gunakan shape fill dan
menghilangkan, menebalkan atau merubah garis pinggir latar kita
gunakan shape outline. Sesudah itu kita membuat teks ”di modul
elektronik”, cara seperti kita membuat teks “selamat datang” Ukuran
teks sama seperti “selamat datang” namun jenis teks “modul
elektroniknya” disini kita menggunakan britannic bold. Kita bisa lihat
34
hasil gambarnya seperti berikut :

Gambar 51
 Selanjutnya untuk merubah background pada slide tersebut kita
memiliki dua pilihan antara lain menggunakan background yang sudah
disediakan oleh articulat storyline, dengan cara klik menu design lalu
pilih gambar slide-slide kecil yang ada di themes.

Gambar 52
Dan yang kedua kita bisa memilih background sesuai yang kita
inginkan yaitu dengan cara klik menu design, pilih background lalu pilih
fill nanti akan ada beberapa pilihan untuk menentukan background dan
kita pilih picture or texture fill dan klik file lalu pilih backround yang di
inginkan, bila sudah memilih background tepat tekan open.

1
35

Gambar 53
 Hasilnya seperti gambar dibawah ini ;

Gambar 54

Sekarang kita akan membuat musik intrumen pembukaan pada

judul program, pertama kita buat tombol/button, caranya; menu insert
36
lalu pilih button pada interactive objects setelah itu anda bisa pilih
bentuk yang diinginkan tapi disini kita akan ambil bentuk persegi
panjang selanjutnya anda tekan di slide dan sesuaikan ukurunya.
Diharapkan kita membuat dua tombol, yang mana nantinya akan
difungsikan untuk tombol on dan tombol off pada musik instrumen
tersebut.

Gambar 56
 Tombol pertama kita akan memberikan icon/lambang on, untuk
menambahkan icon tersebut caranya ; menu format lalu pilih bentuk
lambang volume on pada button icons .

Gambar 57

Setelah itu kita akan memberikan sedikit animasi dan warna pada
tombol tersebut agar terlihat seperti hidup caranya ; pertama klik
37
tombol volume on lalu menuju menu format lalu pilih gambar dan
tombol yang sesuai dengan warna keinginan anda pada button styles.
Disini kita gunakan dulu tombol yang berwarna orange.
2

Gambar 58

Untuk melihat hasilnya nanti akan seperti berikut ;

Sebelum Sesudah

Gambar 59
 Cara pembuatan dan pemberian tombol pada tombol off juga
sama namun yang membedakannya hanya pada bentuk lambang/icon-
nya saja, yang mana kita pilih bentuk volume off. Sejajarkan bentuk
tombol on/off, karena kita akan menambahkan warna lagi pada tombol
tersebut dengan cara ; pertama tekan tombol volume on lalu tekan
tombol panah yang dibawah dekat slide dan pilih states lanjutkan
dengan klik edit states dan pilih hover, berikan warna tombol pada
hover dengan warna biru pada format yang tadi kita gunakan. Lakukan
hal tersebut pada tombol volume off

38
3 2

4
5

Gambar 60

Bentuk gambar tombol on/off akan seperti gambar dibawah ini ;

Tombol saat akan ditekan akan

berubah warna menjadi biru

Gambar 61

Selesai membuat tombol on/off sekarang kita akan memasukan

musik instrumen kedalam slide caranya ; menu insert lalu pilih sound
pada media, nanti akan ada dua pilihan dan kita akan pilih sound from
file….yang mana kita mengambil musik instrumen sesuai dengan
keinginan kita setelah musik sesuai klik open.

Gambar 62
39
Nanti akan muncul bentuk icon sound disalmping slide sebelah kiri.

Icon sound yang berisi

musik instrumen

Gambar 63

Bila tombol on/off dan musik instrumen telah kita masukan

kedalam slide, sekarang kita tinggal menggabungkan keduanya menjadi
satu kesatuan caranya ;
 Pertama klik 2 tombol on/off sound tersebut dengan cara menekan
ctrl + tombol kiri mouse selanjutnya tekan tombol kanan mouse dan
pilih button set nanti klik new set, lalu setting menjadi button set 2
lanjut dengan add, yang mana fungsinya untuk bergantian saat di klik.

1
4

5
2

Gambar 64

Kedua tekan tombol on sound setelah itu lihat di sebelah samping

40
kanan slide terdapat trigers/object triggers nanti akan ada
button/tombol yang terblok, itu tandanya triggers tersebut
berhubungan dengan tombol on sound, lalu klik button 1 dan pilih pada
action : play media, media : sound 1 (sound 1 ini merupakan nama musik
instrumen yang kita masukan), when : user cliks, object : button 1
(button 1 merupakan nama tombol on sound) sesudah itu klik ok.

1
2

4
5

Gambar 65
 Lanjutkan dengan tombol off sound, cara peletakanya sama Cuma
yang membedakanya adalah pada action : stop media dan object : button
2 (menentukan nama tombol off sound)
Ketiga kita akan membuat tombol on/off sound muncul dan hilang
bergantian saat musik instrumen dinyalakan atau dimatikan, caranya ;
tekan tombol on sound lalu menu insert pilih trigger , pilih actoin :
cange state of, on object : button 1, to state hidden, when : user clicks,
object : button (ini berfungsi untuk menghilangkan tombol on sound
saat di tekan). Lanjut dengan tombol off sound, cara pembuatanya juga
sama Cuma yang membedakan pada on object : button 1, to state :
normal, object : 2.

2
41
3
4
5
6

Gambar 66

Dan sekarang kita saling timpahkan kedua tombol tersebut agar

terlihat seperti satu, tapi di perhatikan tombo on sound harus ada di
atas jangan sampai tertimpa oleh tombol off sound, caranya tekan
tombol on sound lalu klik kanan dan pilih bring to frons : bring to frons.

1 2

Gambar 67
 Sesudah disatukan blok kedua tombol tersebut lalu klok kanan
pada mouse dan pilih group : group dan hasilnya akan seperti berikut.

Berubah bentuk tombol saat ditekan

Gambar 68

Terlihat ada garis yang tidak nyaman pada kedua tombol tersebut
caranya ; tekan tombol on sound lalu tekan bentuk panah yang ada di
bawah slide, pilih state dan tekan edit states dan pilih down sesudah itu
masuk ke menu format tekan button border, pilih no outline. Kembali ke
state dan pilih selected lakukan seperti yang diatas. Setelah itu biar
tidak ada warna garis biru pada sisi kedua tombol bisa kita lakukan ,
caranya seperti diatas namun pada di format kita tekan button effects
dan pilih glow menjadi no glow.

2
1
3
42
4

Gambar 69

Lakukan yang sama pada tombol off sound dan hasilnya akan
seperti berikut ;

Seletah garis pinngir di

hilangkan

Gambar 70
 Sekarang kita akan membuat tombol exit untuk kluar program
modul elektronik, caranya seperti membuat tombol on/off yang mana
pengambilannya dari menu insert, klik button dan ambil bentuk persegi
panjang lagi sesudah itu kita bentuk sesuai ukuran dan warna yang kita
inginkan tapi disini saya membuat tombol di sesuaikan dengan ukuran,
warna tombol on/off dan sejajarkan dengan tombol on/off tersebut.
Sesudah itu kita beri lambang/icon gambar exit caranya tidak jauh
juga dengan yang sebelumnya yaitu klik tombol yang akan di buat
tombol exit lalu menu format, dan pilih icon berbentuk power pada
button icons.
2

Gambar 71
43
Agar tombol itu bisa berfungsi kita tambahkan trigger, dikarenakan
sudah di sediakan ditombol nya, kita klik tombol exit tersebut lalu
tekan tombol button 3 : add triger. yang ada di triggers sebelah samping
kanan. Setelah itu akan muncul triggers wizard, pilih action : exit
course, lalu when : user clicks. Ok.

4
2

Gambar 72
 Untuk melihat hasilnya kita bisa meninjaunya dengan cara klik
preview yang terdapat pada semua menu. Nanti akan di berikan tiga
pilihan preview, yang pertama kita hanya melihat 1 slide yang sedang
dibuat (this slide), kedua melihat beberapa slide dalam satu baris (this
scene), dan yang terakhir kita bisa melihat semua proyek yang kita buat
(entire project), tetapi untuk melihat keseluruhan semua proyek kita
bisa jiga tekan langsung tombol pada preview.

Gambar 73
44
Setelah membuat tombol exit kita lanjutkan dengan membuat
tombol start yang berfungsi untuk memulai kegiatan belajar dan masuk
ke menu utama didalam modul elektronik tersebut. Pertama kita buat
latar untuk tombol start dengan cara masuk ke menu insert lalu pilih
shape dan ambil bentuk persegi panjang, kemudian bentuk sesuai pada
gambar dibawah ini.

Gambar 74

Agar terlihat transparan tekan latar tersebut lalu menu format dan
pilih format shape yang berbentuk panah kecil, kemudian geser
transparency ke 30% bila sudah klik close.
 2

Gambar 75

Setelah latarnya terbuat kita buat tombol start, yang pembuatanya

tidak jauh beda dengan tombol-tombol yang diatas yaitu pada button di
menu insert dan timpahkan tombol tersebut pada latar sebelah kiri,
45
seperti gambar dibawah ini.

Tombol start

Gambar 76

Sekarang kita berikan teks pada tombol start agar terlihat lebih
jelas dengan cara klik kanan pada tombol start lalu pilih edit text dan
ketikan start. Agar tombol terlihat lebih menarik lagi saat disentuh kita
edit dengan cara tekan tombol start lalu seperti biasa di bawah layar
slide terdapat tanda panah dan tekan panah tersebut, pilih states, lalu
klik edit states dan pilih hover masuk ke slide kita lebih besarkan teks
serta berikan petunjuk yang isinya “klik tombol untuk menuju slide
berikutnya”

Sebelum di sentuh
 Saat mau di sentuh

Gambar 77

Bila sudah tahap diatas kita lanjutkan dengan pembetian triggers

pada tombol tersebut, tetapi sebelumnya kita harus membuat slide baru
agar trigger tersebut bisa bekerja. caranya klik kanan slide yang terletak
pada disebelah kiri pada scene dan pilih new slide lalu pilih templates
pilih bentuk templates serta isikan pada insert into scene : new scene,
bila sudah klik import.

1
2

46

5 6

Gambar 78
 Kembali ke tombol start, selanjutnya tekan tombol start kemudian
akan telihat add trigger yang terblok pada triggers sebelah kanan. Dan
klik add trigger tersebut lalu isikan action : jump to slide, slide : 2.1
anchor desk/next slide, when : user clicks, object : button 4 –“START”, ok.

Gambar 79
Pembutan judul program sudah selesai kita lanjut ke tahap
berikutnya.
3. Membuat menu utama
47
Setelah membuat judul program sekarang kita lanjut ke tahap
berikutnya yaitu membuat menu utama yang mana di dalam menu
utama terdiri dari beberapa tombol yang memiliki fungsi yang berbeda-
beda seperti ; petunjuk program, tentang program, tujuan program,
materi, evaluasi/latihan, dan penutup.

Gambar 80
Contoh gambar menu utama yang terdiri dari petunjuk program, tentang program,
tujuan program, materi, evaluasi/soal latiahan dan penutup
 Sebelumnya tadi kita sudah membuat slide baru, sekarang kita
jadikan sebagai menu utama. Pertama kita ganti nama slide tersebut
menjadi menu utam. caranya klik kanan
gambar slide kecil dan pilih rename
yang berada sebelah kanan bawah pada
slide layers dan ganti nama anchor desk
menjadi menu utama.

Gambar 81

Hasilnya nanti akan seperti berikut.

Nama slide setelah di rubah

Gambar 82
48
Selanjutnya kita akan membuat slide tersebut menjadi blank atau
kosong dari semua gambar yang ada pada bawaan slide tersebut
caranya :
 blok semua gambar dan teks yang ada pada slide dengan
menekan ctrl + a lalu tekan delete untuk menghilangkanya.
 Masuk ke menu design dan pilih tema yang kosong layarnya pada
themes.

Gambar 83
 klik kanan gambar slide kecil yang berada sebah kiri pada scenes
pilih layout, klik gambar blank.

2 3

Gambar 84
 Selanjutnya klik properties pada slide layer menu utama sebelah
kanan dan hilangkan ceklis next dan previus.

49

1 1

Gambar 85

Hasilnya nanti akan seperti berikut ;

Gambar 86
 Setalah slide tersebut blank sekarang kita masukan backgound atau
latar untuk slide tersebut, caranya lakukan seperti gambar 53. Disini
saya memberikan background seperti gambar yang diatas.

Gambar 87
Contoh gambar background untuk menu utama

Sesudah background selesai kita lanjutkan untuk memberikan

tombol-tombol untuk petunjuk program, tentang program, tujuan 50
program, materi, evaluasi dan penutup.
Diawali dengan membuat tombol petunjuk program caranya
sebagai berikut ;
 Ambil gambar yang sesuai dengan petunjuk program, masuk
menu insert, pilih picture dan ambil bentuk gambar sesuai
keinginan kita. Bila gambar sudah sesuai klik open. di ushakan
bentuk gambar tipe png agar bentuk gambar lebih nyata.

1 3

Gambar 88
Gambar cara mengambil gambar pada articulat storyline
 Sesudah gambar di ambil, sekarang kita akan edit gambar
tersebut sesuai keinginan. Kalau bisa gambar jangan terlalu besar
atau sebaliknya terlalu kecil yang fungsinya agar gambar tersebut
nanti biar terlihat nyaman saat di lihat. Berikan teks pada bawah
gambar dengan penjelasan “petunjuk”. Untuk melakukanya;
menu insert, pilih text box lalu tekan di bawah gambar dan
masukan penjelasan “petunjuk” serta sesuaikan dengan ukuran
gambar tersebut. Paling besar ukuran hurup 14.

3 51

Gambar 89
Gambar cara memberikan teks pada slide menggunakan text box

 Agar bentuk gambar terlihat lebih menarik, misalkan gambar saat

mau di tekan ukuran gambar menjadi lebih besar. Untuk
membuatnya; tekan gambar tersebut, lalu klik bentuk panah yang
ada dibawah layar setelah itu klik states, klik edit states lalu klik
new state dan pilih bentuk hover. Bila sudah lanjutkan dengan
klik hover tersebut lalu masuk ke layar slide dan perbesar ukuran
gambar tersebut sesuai dengan keingian, untuk menambah efek
pada gambar pilih menu format, ficture effects dan pilih bentuk
yang paling sesuai. klik done editing states untuk mengakhiri
pengeditan.
 1

3
6
4 2

10

11

Gambar 90 52
Gambar membuat gambar tombol lebih menarik dengan menggunakan states

Lakukan yang sama untuk membuat tombol fungsi yang lainnya.

Tetapi untuk mempermudah cara pengeditan gambar selanjutnya kita
bisa menduplikat gambar tersebut dengan cara ; blok gambar dan teks
petunjuk program lalu tekan dan tahan mengunakan tombol kiri mouse
setelah itu geser ke tempat yang kosong, lepas tombol mouse nanti akan
muncul tiga pilihan lalu kita pilih copy here. Selanjutnya kita tinggal
mengganti gambar, untuk menggantinya masuk menu format, pilih
change picture lalu sesuikan
gambar untuk tombol tersebut
jika sudah klik open. dan jangan
lupa ganti teks sesuai
keterangan gambar.
Gambar 91
Gambar cara menduplikat gambar
menggunakan
 1
2

Gambar 92
gambar cara merubah atau mengganti gambar di articulae storyline

Gambar hasilnya akan seperti berikut ;

53

Gambar 93
Contoh gambar tombol-tombol yang terdapat di menu utama

Sebelum melanjutkan fungsi tombol-tombol tersebut sekarang kita

akan buat dulu tombol keluar dan mempercantik tampilan dari menu
utama, seperti yang terdapat pada gambar 80. Kita buat latar untuk
bagian atas dan bawah, caranya seperti biasa menu insert dan pilih shape
lalu ambil bentuk persegi panjang. Setelah itu buat sesuai contoh
gambar. Jangan lupa berikan warna aga transparan. jika belum bisa anda
bisa liat dari gambar 48 s.d gambar 50.
 Latar atas dan bawah untuk background
tombol keluar menu utama dan
mempercantik tampilan slide

Gambar 94
Gambar latar yang befungsi untuk bacground tombol keluar dan
mempercantik tampilan slide

Sekarang kita akan mengisi latar atas dengan tombol keluar dan
keterangan menu utama. Pertama membuat keterangan menu utama
caranya insert, pilih text box, lalu tekan dan isikan penjelasan menu pada
54
latar atas. Selajutnya berikan efek yang terdapat pada format, pilih shape
effect, agar terlihat lebih timbul bagian menu tersebut.
kedua membuat tombol untuk keluar dari menu utama caranya
seperti gambar 71, yang membedakanya kita beri simbol yang berbentuk
“x” pada tombol tersebut. Setelah itu pemberian triggers yang mana
action: jump to slide (berfungsi untuk pergi ke slide), slide: 1.1 untitled
slide (menujukan slide yang kita tuju sekarang kita menu slide judul
program yang mana
1
2 disana kita beri
nama 1.1 untitled
slide dan nama ini
juga bisa dirubah
sesuai keinginan
3
kita), when : user
clicks (berfungsi
Gambar 95
Gambar membuat tombol untuk keluar dari menu utama
 mengontrol tombol contohnya berapa kali tombol bisa berfungsi apakah
satu kali klik atau lebih), object:button 1 (berfungsi mentukan tombol
yang akan ditekan).
Hasilnya akan seperti gambar dibawah ini :

Gambar 96
Contoh gambar untuk latar background atas pada menu utama

Sesudah selesai membuat latar atas kita lanjutkan membuat latar

bawah. Kita akan mengisikan tentang topik “Perkembangan Negara-
negara Kerajaan Hindu-budha di Indonesia” dan bentuk gambar pada
latar tersebut, caranyanya kita bisa lihat pada gambar 88 dan gambar 89.

Gambar 97
contoh gambar untuk latar background bawah pada menu utama 55

4. Membuat petunjuk program

Gambar 98
Contoh gambar slide petunjuk program
 Untuk membuat petunjuk program kita akan membuat layer pada
menu utama caranya ; klik new layer yang ada sebelah kanan pada layer
slides. Nanti akan muncul layer baru yang akan kita buat sebagai
petunjuk program.

New layer

Gambar 99
Gambar cara membua layer baru

Ganti nama layer tersebut yang tadinya untitled layer 1 menjadi

petunjuk, untuk menggantinya klik kanan pada untitle layer 1 lalu pilih
rename selanjutnya ketaikan petunjuk. Fungsinya kita mengganti nama
56
ini, agar kita saat membuat triggers tidak salah menentukan slide atau
layer mana yang akan di gunakan.

1
2

Gambar 100
Gambar cara mengganti nama layer atau slide

Didalam layer tersebut akan terlihat beberapa gambar berwarna

hitam putih yang terdapat pada slide menu utama, kita bisa
menghilangkanya dengan menuju klik bentuk panah yang ada dibawah
slide lalu pilih timeline dan klik panah base layer objects agar terlihat
semua gambar yang akan ditampilkan pada layer tersebut lalu
hilangkan gambar dengan cara klik mata yang terbuka menjadi
tertutup.

3
2

Gambar 101
Gambar cara menghilangkan atau menampilkan objek pada layar

Semua gambar yang ada kita hilangkan kecuali latar atas dan bawah
57
saja. Selanjutnya kita akan membuat keterangan dan tombol untuk
kembali menu utama. Dalam membuat keterangan tidak jauh caranya
dengan membuat keterangan menu utama, kita ketikan slide petunjuk
program ini dengan nama “petunjuk”. Lalu untuk memberikan tombol
kembali ke menu utama caranya juga tidak jauh beda kita
menggunakan triggers namun yang membedakanya disini kita pada
action pilih hide layer, layer : this layer, when : user: clicks, object :button
1 (disesuaikan dengan tombol mana yang akan dipilih). Anda bisa
melihat pada gambar 95.
Sekarang kita membuat keterangan petunjuk program, pertama
membuat kalimat penjelasan “Pilih tombol setiap ingin
memasuki/melihat halaman selanjutnya di bawah ini adalah keterangan
tombol yang digunakan” caranya kita menggunakan text box pada
menu insert. Jika sudah kita membuat tombol yang akan digunakan
pada proyek/modul elektronik kita . untuk membuatnya anda bisa
 melihat tata caranya pad gambar 72. Tatapi statenya kita hanya
menggunakan tombol normal jadi semua bentuk tombol lainya kita
hapus karena disi kita buat untuk menunjukan fungsi-fungsi dari
tombol-tombol tersebut. lihat gambar berikut ini :

Di hilangkan kecuali tombol normal saja

Gambar 102
Gambar agar tombol selain tombol normal harus dihilangkan
Selanjutnya kita akan membuat keterangan dari fungsi-fungsi
tombol tersebut, caranya masuk ke menu insert lalu klik marker dan
pilih bentuk lambang “i”. Selanjutnya kita letakan di samping tiap
58
tombol lalu ketikan keterangan pada maker tersebut.

Gambar 103
Contoh cara membuat keterangan tombol menggunakan maker

Lakukan itu itu pada tiap semua tombol, hasilnya anda bisa lihat
pada gambar 98.
5. Membuat tentang program.
 Gambar 104
Contoh gambar slide tentang program

Untuk membuat tentang program tidak jauh beda cara dengan

membuat petunjuk program anda bisa liat tata cara pembuatan pada
gambar 99 s/d gambar 101 dan gambar 95 Cuma yang kita hanya
mengisi tentang program modul elektronik tersebut dengan
menggunakan text box. Anda bisa lihat hasilnya pada gambar diatas.
59
6. Membuat tujuan program

Gambar 105
Contoh gambar slide tujuan program

Membuat tujuan program juga tidak jauh beda dengan membuat

tentang program, kita hanya mengisikan tujuan program tersebut, yang
 isinya mengenai mata ajar yang akan di bahas, topik yang di bahas dan
jangan lupa masukan kompetensi dasar yang harus dicapai.
7. Membuat materi

Gambar 106
Contoh gambar slide materi

Untuk membuat bagian materi, tidak jauh pembuatanya seperti

60
pembuatan slide pada tentang program, tujuan program atau petunjuk
program. Yang membedakanya kita sekarang akan membuat link untuk
setiap sub materi contohnya disini kita akan membuat sub materi
tentang “kerajaan pajajaran dan “kerajaan majapahit”. Tapi disini kita
hanya akan mebuat sub materi tentang kerajaan pajajaran saja. Cara
membuat tombol linknya tidak jauh beda dengan cara membuat tombol
pada gambar 88 s/d 92.
Sebelum kita membuat trigger atau link untuk tombol, kita harus
membuat slide baru dulu yang mana fungsinya untuk menempatkan
pembuatan penjabaran tentang sub materi tersebut. Anda bisa melihat
cara pada gambar 78 dan 79. Lalu pada slide baru tersebut kita ganti
namanya menjadi pajajaran yang fungsinya untuk menetukan
pembuatan triggers agar tidak tata letaknya, untuk melihat caranya juga
anda bisa lihat gambar 81.
 Kita lanjutkan lagi pembutan trigger, caranya pertama kita pilih
gambar yang akan dijadikan trigger lalu insert pilih triggers. Selanjutnya
kita masukan pada action : jump to slide, slide : 3.1 pajajaran
(disesuaikan dengan dimana slide pajajaran “sub materi” yang kita
buat), when : user clicks, object : picture 3 “kujang.jpeg” (disesuaikan
dengan nama gambar yang kita masukan kedalam program articulat
storyline disini saya memberi nama “kujang” ) lanjutkan dengan tekan
ok.

61
Gambar 107
Gambar cara membuat link untuk sub materi menggunakan trigger

Untuk menambah jelasnya anda juga bisa lihat pada gambar 79. Jika
sudah prosedur diatas sekarang kita lanjutkan membuat sub materi
pada slide berikutnya .

Gambar 108
Contoh gambar slide sub materi kerajaan pajajaran
 Sekarang kita akan membuat background (lihat pada gambar 83 s.d
87), judul pada slide (menggunakan text box) dan tombol suara (lihat
gambar 56 s.d 70)serta tombol keluar dari sub materi tersebut (lihat
gambar 71 s.d 72). Hasilnya akan seperti gambar dibawah ini.

Gambar 109
Contoh gambar tampilan pembuatan slide sub materi

62
Terlihat pada gambar 108 terdapat gambar peta dan penjelasannya,
tetapi coba anda lihat lebih dekat pada gambar tersebut terlihat bentuk
kecil yang berbentuk kaca pembesar, dimana fungsinya untuk
memperbesar gambar agar telihat lebih jelas saat dilihat. Pertama-tama
caranya anda bisa ambil gambarnya (lihat pada gambar 88) setelah itu
klik gambar tersebut lalu ke menu format dan pilih zoom picture
selanjutnya sesuaikan ukuran gambar tersebut.

1
3

Gambar 110
Gambar cara memperbesar tampilan gambar
 Jika sudah, sekarang kita akan membuat tombol-tombol yang mana
fungsinya untuk bagian-bagain sub materi yang akan dibahas. Disini
kita membuat lima tombol yang mana isi materinya terdiri dari
penjelasan kerajaan pajajaran (kerajaan),raja-raja yang ada di pajajaran
(raja-raja), sumber bukti sejarah kerajaan pajajaran (sumber),
kehidupan kerajaan pajajaran (kehidupan) dan video tentang kerajaan
pajajaran (video).
Pertama kita membuat tombol kerajaan caranya kita masuk menu
insert lalu pilih shape dan cari bentuk persegi panjang. Selanjutnya
bentuk persegi panjang pada slide sesuai keinginan dan jangan lupa beri
keterangan “kerajaan” pada tombol tersebut dengan cara klik kanan lalu
add text dan lanjutkan dengan mengetik kerajaan.
1
2

63
3

Gambar 111
Gambar cara membuat tombol link kerajaan

Agar terlihat menarik pada tombol tersebut kita akan berikan sediki
animasi caranya klik bentuk panah yang ada di bawah slide slanjutnya
klik states dan klik edit states. Sekarang kita tambahkan tombol pada
samping tombol normal dengan cara klik new states lalu pilih hover,
lakukan hal tersebut pada down, selected dan berikan warna sesuai
keinginan (lihat gambar 60) jika sudah done editing state, seperti
gambar dibawah ini.
 1

3
5 2
4

Gambar 112
Gambar cara animasi ke tombol menggunakan states
Setalah itu lanjutkan dengan membuat tombol yang lainya. Seperti
gambar dibawah ini .

64

Gambar 113
Contoh gambar tampilan setelah semua tombol dibuat

Agar tombol saat ditekan selaras atau bergantian saat ditekan kita
bisa melakukannya dengan memblok semua tombol lalu klik kanan
pada mouse, pilih button set : new set, lalu ketikan button set 5
(fungsinya menunjukan tombol yang akan ditekan bergantian pada 5
tombol dipilih).
 2
1

Gambar 114
Gambar cara membuat tombol selaras saat ditekan menggunakan button set

Sekarang kita akan mengisikan materi di tiap tombol-tombol

tersebut, diawali dengan tombol kerajaan. Pertama kita membuat dulu
layer baru dan ganti beri nama kerajaan pada layer tersebut. Caranya
anda bisa lihat pada gambar 99 dan gambar 100.

65

Gambar 115
Contoh gambar layer baru untuk pada sub materi kerajaan pajajaran

Lanjutkan dengan pembutan tombol untuk kembali ke halaman

muka sub materi, caranya tidak jauh dengan yang ada pada gambar 71
s.d gambar 72. Yang membedakan adalah bentuk lambang dan trigger
yang digunakan. Kita cari bentuk lambang “x” dan lanjut dengan
pembutan trigger untuk link kembali kehalaman muka, pada trigger
kita pilih action : hide layer, layer : this layer, when : user clicks, object:
button 3 (disesuaikan dengan tombol yang akan menjadi objek).

Gambar 116
Gambar cara menutup layer yang terdapat pada satu slide

Sesudah kita membuat tombol keluar, masukanlah materi

penjelasan kerajaan pajajaran kedalam layer tersebut. Hasilnya nanti
akan seperti berikut ini.

66

Gambar 117
Gambar tampilan saat pada layer penjelasan tentang kerajaan pajajaran

Jika kita ingin melanjutkan materi dari layer 1 ke layer berikutnya,

kita bisa gunakan tombol next dan previous. Pertama kita buat dulu
layer baru lagi, sesudah itu ganti namanya menjadi kerajaan 2 agar
mudah di peletakan triggernya. Setelah itu kita kembali ke layer
sebelumnya yaitu layer kerajaan, kita buat tombol next dan previous
caranya, buat dulu tombol next dan previous lalu kita berikan link
menggunakan triggers pada tombol tersebut. Action : show layer, layer :
kerajaan 2, when : user clicks, object : button 1. Lakukan pembutan
trigger yang sama pada previous juga.

Gambar 118
Contoh gambar cara pembutan trigger untuk bepindah dari layer ke layer.

Sekarang kita lanjutkan ke materi tentang raja-raja pajajaran.

Scrolling panel

67

Gambar 119
Contoh gambar tampilan layer pada materi raja-raja dan
menggunakan scrolling panel

Sebelumnya kita buat layer baru untuk materi raja-raja . caranya

tidak jauh beda dengan gambar 99 dan gambar 100. Jika sudah ganti
nama layer tersebut dengan nama raja-raja dan berikan tombol
penutup. Coba anda lihat pada gambar 119 terlihat ada scrolling panel
yang fungsinya untuk memasukan materi lebih dari beberapa paragraf
dan tidak muat kedalam satu layer. Untuk membuatnya pertama-tama
kita siapkan beberapa paragraf materi yang akan kita masukan kedalam
 scrolling panel, sesudah itu masuk ke menu insert dan pilih scrolling
panel. Selanjutnya sesuaikan ukuran scrolling panel pada layer tersebut.
Jika sudah, lalu timpahkan materi pada scrolling panel dan jangan lupa
sesuikan materi tersebut dengan ukuran scrolling panel, fungsinya agar
materi tidak berantakan dan terlihat nyaman saat dilihat.

4
3

Materi yang akan di masukan ke

scrolling panel
dalam scrolling panel

68
Gambar 120
Gambar cara memasukan materi kedalam scrolling panel

Hasilnya akan seperti gambar dibawah ini.

Gambar 121
Gambar tampilan materi setelah di satukan ke dalam scrolling panel
 Untuk membuat layer tentang materi berikutnya tidak jauh beda
dalam pembuatanya. Disini kita diuji ke kreatifan dalam membuat
tampilan dan isi materi agar terlihat menarik. Sekarang kita lanjutkan
untuk memasukan video ke dalam layer tersebut caranya kita masuk
lagi ke menu insert, lalu pilih video nanti disana akan ada tiga pilihan
yaitu video from file, video from website dan record webcam. Karena saya
mengambil dari file yang ada dikomputer jadi pilih video from file.

69

Gambar 122
Gambar cara memasukan video kedalam slide/layer

Sesudah itu lanjutkan dengan menyesesuaikan ukuran video

dengan layer. untuk menambahkan tombol atau mengedit video kita
bisa klik video lalu masuk ke menu options. Misalkan di dalam video
belum terdapat tombol untuk memutar atau mematikan video kita bisa
masukan show video controls. dan untuk mengedit kita bisa gunakan
edit video. Apabila kita mengambil sumber video dari orang lain jangan
lupa tampilkan sumber tersebut pada bagian video.

Gambar 123
Gambar menu options yang berfungsi untuk menambahkan tombol
dan mengedit video
 Hasilnya akan seperti gambar dibawah ini.

Gambar 124
Contoh gambar tampilan video pada slide/layer

8. Membuat soal latihan/evaluasi

70

Gambar 125
Contoh gambar tampilan evaluasi multiple choice
 Sekarang kita akan membuat soal latihan/evaluasi, disini kita akan
membuat soal latihan multiple choice lihat gambar 125. Tapi
sebelumnya kita buat slide baru dulu , caranya klik kanan pada bentuk
slide kecil yang ada disebelah kanan layar slide lalu pilih new slide,
quizzing : graded dan pilih multiple choice lalu klik insert. Selanjutnya
kita masukan soal dan kunci jawaban tersebut. Jika sudah jangan lupa
untuk menyimpanya dengan klik save.
3

4
2
1

71

Kolom untuk mengisikan soal

Kolom untuk mengisikan kunci

jawaban

Gambar 126
Contoh gambar cara membuat latihan soal/evaluasi pada articulat storyline

Hasilnya akan seperti dibawah ini.

 Gambar 127
Contoh gambar tampilan awal pembuatan multiple choice

Agar terlihat seperti pada gambar 125. Kita akan mengeditnya.

 Pertama kita ganti background yang kita inginkan
 Sesuaikan besar kecilnya tulisain baik itu soal maupun kunci
jawaban 12-16 ukuran font-nya
72
 Berikan penomoran pada slide tersebut caranya tidak jauh kita
gunakan shape pada menu insert atau bisa juga menggunakan
text box.

Gambar 128
Contoh tampilan slide setelah pengeditan background, ukuran
hurup dan penomoran
 Sekarang hilangkan submit. Caranya klik betuk option pada slide
layer dan hilangkan tanda centang yang ada lalu klik ok.
 Masuk ke edit multiple choice, kita akan tentukan score jawaban
dan umpan balik dari semua latihan soal. Disini pilih pada
feedback : by question (menentukan benar atau salah pada
jawaban yang kita pilih). Score : by qouestion (sekor ditentukan di
tiap soal yang kita jawab, misalkan jika benar pada correct kita
berikan score 10 dan jika salah pada incrorrect kita berikan
kosong). Attempts : 1 (menentukan berapaka kali kita mengunci
jawaban). Dari semua cara mengedit diatas bisa di rubah sesuai
dengan keinginan dan kreatifitas masing-masing.

73

Gambar 129
Gambar tampilan multiple choice setelah submit di hilangkan

 Sekarang kita akan membuat pengunci jawaban dan ketengan

jawaban itu benar atau salah. Cara membuat pengunci jawaban
kita gunakan trigger seperti biasa. Ambil bentuk lambang bentuk
gembok yang terkunci pada button icons. Lalu lakukan edit state
pada tombol tersebut dan pada tombol normal kita ganti
lambangnya menjadi bentuk kunci terbuka (ini berfungsi untuk
menentukan apakah jawaban sudah terkunci atau belum saat
jawaban sudah di pilih). Lalu pilih warna sesuai dengan yang kita
 inginkan agar bentuk tombol terlihat menarik. Jika sudah
lanjutkan ke edit the selected trigger (trigger). Lalu pada action :
submit interaction. Interaction : multiple choice, when : click,
object : button 6 ( disesuaikan dengan akan dijadikan tombol).
Nanti hasilnya akan seperti dibawah ini,

Tombol pengunci jawaban

sebelum dan sesudah dikunci

Gambar 130
Contoh gambar tampilan pengunci jawaban pada multiple choice

 Lanjutkan sekarang kita akan membuat keterangan jawaban

benar atau salah (correct dan incorrect). Sebelumnya keterangan
jawaban akan seperti gambar dibawah ini baik itu correct atau
74
incorrcet.

Gambar 131
Contoh gambar tampilan keterangan jawaban setelah di kunci jawbannya

dan untuk mempercantiknya kita harus mengeditnya. Lalukan

pengeditan pada correct dahulu. Pilih layer correct lalu masuk ke
menu view dan pilih feedback master. Selanjutnya hapus bentuk
persegi panjang dan ganti dengan gambar (masuk ke menu insert
: picture), text yang sesuai dengan keinginan contohnya; gambar
yang menjelaskan saat jawaban benar.

2
1

4
Di hapus kecuali untuk
tombol continue

6
75
5
Keterangan jawaban
lebih menarik setelah
di ganti

Gambar 132
Contoh gambar cara merubah tampilan pada correct agar terlihat lebih menarik

Jika sudah selesai dan ingin keluar dari pengeditan correct

tersebut masuk ke menu slide master lalu pilih close master view.
Dan jangan lupa berikan warna juga pada tombol continue agar
sesuai dengan gambar correct tersebut. Lakukan pengeditan
tersebut pada incorrect juga.
 Gambar 133
Contoh gambar tampilan correct/jawaban benar setelah di edit

 Lakukan pembuatan latihan soal yang sama seperti cara tersebut.

Dan untuk menggabungkan antar slide latihan soal kita bisa
gunakan trigger seperti gambar 118 namun yang membedakan
pada action : jump to slide. Slide : sesuaikan dengan slide mana
76
soal yang di tuju, when : click, object : button (disesuaikan dengan
akan dijadikan tombol).
 Setelah semua soal dibuat sekarang kita akan membuat jumlah
nilai (penilain) yang didapat dari semua multiple choice yang di
jawab baik itu benar maupun salah.

Gambar 134
Contoh gambar tampilan penilain articulate storyline
 Untuk membuatnya tidak jauh dengan gambar 126 namun yang
membedakanya kita mengambil tipe graded result slide pada
result slides.

Gambar 135
Gambar cara membuat penilaian akhir pada articulate storyline

Jika sudah sekarang kita edit slide tersebut caranya, pertama

masuk edit result slide lalu masuk ke result dulu kita tentukan
slide soal yang akan masuk ke dalam penilain tersebut disini kita
membuat soal multiple choice, ceklis smua slide multiple choice.
Lanjutkan dengan penentukan standar nilai untuk kelulusan,
77
disini saya gunakan standar nilai yaitu 80% dari semua soal yang
ada. Jika anda ingin memberikan waktu pada pengisian soal
gunakan end quiz after. Sesudah itu masuk ke options disni kita
tentukan apa saja yang akan
1
kita tampilkan di dalam
slide penilaian.

Gambar 136
Gambar cara membuat penilaian akhir untuk soal latihan pada articulate storyline
Hasil awalnya akan seperti dibawah ini.

Gambar 137
Gambar tampilan awal penilaian
Lanjutkan dengan menggati backroundnya agar terlihat lebih
menarik. Untuk menghilangkan tombol next/previous caranya
tidak jauh dari yang sebelumnya klik properties pada bagian slide
78
layers yang ada disebelah kanan lalu hilangkan gambar ceklis
yang ada pada properties tersebut (lihat pada gambar 85).

Gambar 138
Gambar tampilan setelah diganti backgraud dan menghilangkan
tombol next/previous
 Jika ingin seperti gambar 138 anda bisa mengeditnya kembali,
dengan cara merubah tampilan bentuk huruf dan pemberian
gambar yang menarik pada slide tersebut. Dan jangan lupa
berikan tombol untuk kembali ke menu utama.
9. Membuat penutup program

Gambar 139
Contoh gambar tampilan penutup program 79

Untuk membuat penutup program tidak jauh pembuatannya

seperti membuat pentuk program, tujuan program, dan tentang
program. Disini kita hanya akhir dari program dan menentukan daftar
pustakanya jika ada.
 Daftar pustaka

Arsyad, Azhar. Media Pembelajaran. Jakarta :

Rajawali Pers. 2010.
http://www.idseducation.com/2014/04/28/dasa
r-dasar-cara-pembuatan-film/
https://www.youtube.com/
https://www.articulate.com/products/storyline-
why.php
Rusman. Belajar dan Pembelajaran Berbasis
Komputer : Mengembangkan
Profesionalisme Guru Abad 21. Alfabeta
: Bandung. 2012.