MODUL ARTICULATE STORYLINE 3 – MEMBUAT MEDIA PEMBELAJARAN INTERAKTIF

Belajar Articulate Storyline 3

Articulate storyline merupakan salah satu multimedia authoring tools yang bisa digunakan untuk membuat media
pembelajaran interaktif dengan konten yang berupa gabungan dari teks, gambar, grafik, suara, animasi, dan video.
Hasil publikasi articulate storyline berupa media berbasis web (html5) atau berupa application file yang bisa
dijalankan pada berbagai perangkat seperti laptop, tablet, smartphone maupun handphone.
Articulate storyline ini cukup mudah dipelajari bagi para pemula yang telah memiliki dasar membuat media
menggunakan Ms PowerPoint, karena fitur AS ini sangat mirip dengan fitur yang ada pada Ms PowerPoint.
Sedangkan bagi pengguna yang sudah expert, bisa berkreasi menciptakan media yang lebih interaktif dan powerful.
Multimedia Interaktif dengan Articulate Storyline 3
Kerangka dasar AS seperti terlihat pada gambar berikut :

Kerangka Articulate Storyline

Sebuah media yang dibuat menggunakan AS, dapat disebut sebagai sebuah Project. Sebuah project dalam
articulate storyline terdiri atas minimal 1 scene. Sedangkan 1 scene dapat terdiri atas 1 atau lebih slide.
Sebuah slide dapat berisi 1 atau lebih layer yang berisi konten yang akan kita tampilkan dalam media. Konten ini
dapat berupa teks, gambar, audio, video atau bahkan file animasi/flash. Penjelasan detailnya sebagai berikut:
Ketika pertama kali kita membuat sebuah project, maka kita akan diberi sebuah scene yang bisa kita gunakan untuk
menampilkan konten melalui slide. Scene ini dapat kita beri nama sesuai dengan isi slide yang ada di dalamnya.
Misalnya, scene “splash screen” yang berisi tampilan opening media yang kita buat. Jadi scene “splash screen” ini
bisa terdiri atas beberapa slide dengan konten berupa judul media, nama pembuat dan seterusnya.

Tampilan Scene Saat Pertama Kali Menjalankan Articulate Storyline (1 scene)

Atau, anda dapat menambahkan sebuah scene lagi dengan nama “materi” untuk menampung
beberapa slide dengan konten materi pembelajaran. Begitu seterusnya. Scene dapat ditambahkan sesuai kebutuan
kita dalam menyusun media pembelajaran. Beberapa scene yang telah kita buat dapat dilihat pada bagian Story
view, seperti yang terlihat pada gambar berikut:

Contoh Tampilan Scene dalam Sebuah Media Pembelajaran (Story View)

Pada tampilan story view, terlihat semua scene yang ada pada sebuah project beserta alurnya. Penggunaan dan
penamaan scene yang terstruktur dan rapi nantinya akan memudahkan kita dalam
mengaitkan (hyperlink) antara slide yang satu dengan lainnya.

Selain scene, pada articulate storyline juga terdapat istilah slide. Slide digunakan untuk menampilkan konten media
pembelajaran. Slide pada AS tidak jauh berbeda dengan slide yang kita kenal pada software Ms PowerPoint.
Namun, slide pada articulate storyline memiliki beberapa jenis, tergantung pada kegunaannya. Misalnya, slide yang
kita gunakan untuk menampilkan konten biasa, akan berbeda dengan slide yang kita gunakan untuk menampilkan
kuis, dan seterusnya. Penggunaan slide pada AS akan saya bahas pada tutorial selanjutnya.
 Jenis Slide Pada Articulate Storyline

Selanjutnya adalah layer. Jika anda pernah belajar desain grafis, pasti tidak asing dengan istilah layer. Layer atau
lapisan digunakan untuk memisahkan objek (konten) yang satu dengan lainnya agar bisa kita perlakukan secara
bebas sesuai dengan keinginan kita tanpa mengganggu objek yang lain. Pada AS, sebuah slide bisa terdiri atas
minimal 1 layer (base layer) atau lebih.

Tampilan slide, 1 layer (base layer)

Tampilan Slide dengan Beberapa Layer

Articulate Storyline 3 : Membuat Project Baru

Membuat Project Baru

Ada beberapa cara untuk membuat project baru pada AS, yaitu : membuat project dari blank slide
(scratch), membuat project melalui Recording a Screencast (dengan cara merekam), membuat project
melalui Importing Content dari media lain dan membuat project dari Template.
Pada tutorial ini, saya lebih suka membuat project dari blank slide (slide kosong), karena kita bisa berkreasi sesuai
dengan keinginan kita. Untuk membuat project dari blank slide, ikuti salah satu langkah berikut:
 Jika pertama kali membuka AS, maka klik New Project, untuk membuat project baru. Atau anda dapat
menekan tombol Ctrl+N.

Membuat Project Baru

 Jika sebuah project telah terbuka, pilih File > New. Maka sebuah scene dengan blank slide (slidekosong)
siap digunakan.

Tampilan scene dengan 1 slide kosong

Selanjutnya anda dapat mengeklik ganda pada tampilan scene tersebut untuk memulai bekerja pada slide. Anda
dapat mengubah judul scene dan slide dengan mengeklik ganda pada teks judul scene/slide dan gantilah dengan
nama yang diinginkan.
 Mengganti Nama Slide

Mengganti Nama Scene

Selanjutnya anda dapat mengisi konten slide dengan cara yang sama dengan ketika anda membuat media
menggunakan Ms PowerPoint.

Menambahkan Konten (objek) Pada Slide

Menyimpan Project
Untuk menyimpan project yang telah dibuat, anda dapat menekan tombol Ctrl + S, atau File > Save, atau anda
dapat mengeklik ikon floppy disk pada bagian atas jendela articulate storyline. By default, projectyang anda buat
akan disimpan pada Documents > My Articulate Projects, kecuali jika anda mengubahnya.

Menampilkan Project
Untuk menampilkan hasil project sementara sebelum dipublish, klik ikon Preview pada Ribbon Menu. Terdapat 3
pilihan preview, yaitu slide (menampilkan hasil slide yang aktif), scene (menampilkan 1 scene), entire
project (menampilkan project keseluruhan).

Mempublish Project
Mempublish project bertujuan untuk mempersiapkan project agar menjadi media yang siap digunakan di kelas.
Untuk mempublish project, anda dapat mengeklik ikon Publish pada Ribbon Menu. Atau Klik File > Publish. Hasil
publish berupa file dengan format HTML5 dan flash file.

Format File Hasil Publish

File hasil publish yang berbasis web dapat dijalankan pada browser, sedangkan hasil publish berupa CD/file exe
dapat dijalankan pada desktop windows.
Articulate Storyline 3 : Bekerja dengan Timeline

Bagi pengguna yang biasa bekerja dengan video editing, pasti tidak asing dengan
istilah timeline. Timeline digunakan untuk mengatur kapan dan berapa lama sebuah objek akan ditampilkan pada
media. Misalkan, anda memiliki 3 objek pada slide yaitu judul media, gambar laptop dan kelas, seperti terlihat pada
gambar berikut:

Timeline Articulate Storyline

Maka ketiga jenis objek tersebut akan ditampilkan pada timeline secara berurutan mulai dari bawah (objek yang
pertama kali ditambahkan) ke atas sampai pada objek yang terakhir ditambahkan. Timeline menentukan kapan dan
berapa lama sebuah objek akan ditampilkan dalam sebuah media.
Menggunakan Timeline
Pada articulate storyline, timeline berada pada bagian bawah jendela pada mode slide view. Jika timelinetidak
terlihat pada bagian bawah jendela, maka anda dapat menampilkannya dengan mengeklik tanda panah pada
bagian kanan bawah slide seperti terlihat pada gambar berikut:

Tampilan Timeline yang Disembunyikan

Selanjutnya pilih Timeline. Maka akan tampil daftar semua objek yang ada pada media anda.

Tampilan Timeline
Mengganti Nama Objek
Mengganti nama objek bertujuan untuk memberi identitas pada setiap objek agar mudah dikenali saat kita
melakukan pengaturan. Untuk mengganti nama objek, anda dapat mengeklik ganda pada nama objek, ketikkan
nama baru yang diinginkan dan tekan ENTER, seperti yang terlihat pada gambar berikut:

Mengganti Nama Objek

Atau anda dapat mengeklik kanan objek tersebut, pilih Rename, ketikkan nama objek dan tekan [ENTER]. Apabila
nama yang anda berikan terlalu panjang sehingga tidak terlihat pada tab timeline, maka anda dapat menggeser
batas timeline ke kanan, seperti yang terlihat pada gambar berikut:

Mengubah Ukuran Nama Objek

Mengubah Urutan Objek

Semua objek yang anda tampilkan pada media, akan terlihat pada timeline. Semakin banyak objek yang ditampilkan
pada media, maka semakin banyak pula daftar objek yang tampil pada timeline. Anda dapat mengatur urutan
tampilan objek tersebut sesuai dengan keinginan anda dengan cara menggeser (drag and drop) ke atas atau ke
bawah pada objek yang diinginkan, seperti yang terlihat pada gambar berikut:

Mengatur Urutan Objek

Urutan objek pada timeline, tidak mempengarui urutan tampilan objek pada media. Urutan tampilan objek ditentukan
pada waktu sebuah objek diatur kemunculannya.
Mengatur Waktu dan Durasi Tampilan Objek
By default, objek yang ada pada media akan ditampilkan dalam waktu dan durasi yang sama. Untuk mengatur waktu
dan durasi objek ketika ditampilkan (termasuk mengatur animasi pada objek), anda dapat melakukannya pada
bagian timeline dengan menggeser (drag and drop) ke kanan pada objek yang diinginkan.

Mengatur Waktu Objek Ditampilkan

Sedangkan untuk mengatur durasi (lama) kemuculan objek pada media, anda dapat mengeklik kanan pada objek
yang diinginkan dan pilih Timing.

Pengaturan Durasi Menggunakan Timing

Selanjutnya pada kotak dialog Timing, isikan pada:

 Start Time, dengan waktu mulai tampil objek pada media
 Duration, lama objek tampil pada media

Kotak Dialog Timing

Atau untuk mengatur durasi objek ditampilkan pada media, anda dapat menggeser ke kanan batas
akhir timeline pada objek tersebut, seperti yang terlihat pada gambar berikut:

Mengatur Durasi Objek

Anda dapat pula mengatur durasi objek dengan mengeklik kanan objek pada timeline dan pilih:
 Show Until End, agar objek ditampilkan sampai akhir slide
 Always Show, agar objek ditampilkan dari awal sampai akhir slide
 Align to Cue Point, agar objek ditampilkan mulai dari batas clue point yang telah kita buat sebelumnya
 Align to Playhead, agar objek ditampilkan mulai dari posisi garis biru (blue vertical line)

Menyembunyikan Objek
Menyebunyikan objek bertujuan untuk menonaktifkan objek sementara agar kita lebih leluasa dalam melakukan
pengaturan pada sebuah objek. Untuk menyembunyikan objek bisa dilakukan dengan cara mengeklik gambar ikon
mata di sebelah kiri nama objek pada timeline. Dan lakukan hal yang sama untuk menampilkannya kembali.

Tampilan Hide Object

Untuk menyembunyikan semua objek secara bersamaan, anda dapat mengeklik ikon mata pada bagian atas panel
seperti yang terlihat pada gambar berikut:

Tampilan Unhide Object

Objek yang sedang disembunyikan, tidak akan ditampilkan pada media ketika dijalankan. Jadi, jangan lupa untuk
mengaktifkan kembali objek sebelum media dijalankan/di-publish yaa..
Group Objek Pada Timeline
Seringkali kita mengelompokkan beberapa objek dalam sebuah group untuk memudahkan dalam pengaturan objek
tersebut. Objek yang telah kita jadikan group, pada timeline juga akan dikelompokkan dan ditandai dengan ikon
panah kiri, seperti yang terlihat pada gambar berikut:

Penggabungan 3 Objek dalam 1 Group

Untuk melakukan pengaturan pada objek (dalam group), anda dapat mengeklik ikon tersebut sehingga terlihat objek
yang diinginkan. Selanjutnya lakukan pengaturan yang diinginkan.

Tampilan 3 Objek dalam 1 Group

Menampilkan Slide Melalui Timeline

Pada bagian bawah timeline disediakan tombol play dan stop untuk melihat/menjalankan tampilan slide sementara
saat dilakukan pengaturan, seperti yang terlihat pada gambar berikut:

Menjalankan Slide Melalui Timeline

Dengan cara ini anda dapat melihat/menjalankan tampilan slide meski dalam mode editing.
Articulate Storyline 3 : Bekerja dengan Layer

Jika anda pernah belajar desain grafis, misalnya Adobe Photoshop, pasti tidak asing dengan
istilah layer. Layer (lapisan) merupakan bagian yang penting dalam articulate storyline. Layer atau lapisan
digunakan untuk memisahkan objek (konten) yang satu dengan lainnya agar bisa kita perlakukan secara bebas
sesuai dengan keinginan kita tanpa mengganggu objek yang lain.
Pada AS, sebuah slide bisa terdiri atas minimal 1 layer (base layer) atau lebih (baca postingan saya
sebelumnya Multimedia Interaktif dengan Articulate Storyline). Layer memiliki tampilan yang sangat mirip
dengan slide, atau anda bisa menganggap layer sebagai slide yang berada di dalam slide. Karena fungsinya yang
mirip dengan slide, maka layer juga dapat diisi dengan konten apapun layaknya sebuah slide.
Terus apa yang membedakan slide dan layer? Untuk memahami perbedaan keduanya, anda bisa lihat dua gambar
berikut. Gambar 1, sebuah project yang terdiri atas 5 objek yaitu background, 2 button, 2 karakter (male dan female).
Ohya, saya tidak akan membahas bagaimana cara menambahkan objek-objek tersebut pada slide ya.. sebab saya
anggap anda telah memahaminya. Sama persis kok caranya dengan yang ada di Ms PowerPoint.

Gambar 1. Tampilan slide dengan 1 layer (base layer)

Nah, kelima objek di atas berada pada 1 slide atau base layer (layer bawaan setiap slide). Ketika project di atas
kita preview, maka kelima objek tersebut akan ditampilkan secara sekaligus, karena dia berada dalam 1 slide (layer).
Berbeda dengan gambar ke-2 berikut:
Mari kita modifikasi project di atas. Tambahkan 2 layer baru pada slide di atas dengan cara mengeklik ikon New
Layer pada panel Layer dan berilah nama pada kedua layer tersebut dengan Male dan Female, seperti yang terlihat
pada gambar berikut:
Selajutnya, mari kita isi layer Male dengan objek Male (ambil/cut dari base layer) dan layer Female dengan objek
Female (ambil/cut dari base layer juga), sehingga base layer hanya terisi background dan 2 button, seperti pada
gambar berikut:

Gambar 2. Tampilan objek pada base layer

Tampilan objek pada layer Male

Tampilan objek pada layer Female

Nah, apabila project tersebut kita preview, maka yang akan ditampilkan hanyalah objek yang ada pada base
layer. Sedangkan objek yang ada pada layer Male dan Female tidak akan ditampilkan.
Note:
 Anda juga dapat menambahkan layer dengan memilih menu Insert > Slide layer

 Setiap layer mempunyai timeline untuk mengatur objek yang berada pada layer tersebut. Untuk mengatur
objek pada timeline, silahkan baca postingan saya sebelumnya Bekerja dengan Timeline.
Bagaimana cara menampilkan layer Male atau Female? Kedua layer tersebut hanya dapat kita tampilkan melalui
tombol kontrol dari pengguna yang biasa disebut Trigger. Jadi kesimpulannya, layer digunakan untuk menyimpan
objek yang akan ditampilkan berdasarkan kontrol dari pengguna. Sedangkan objek yang tidak memerlukan kontrol
dari pengguna dapat disimpan/diletakkan pada base layer. Pembahasan tentang trigger dapat anda baca pada
postingan selanjutnya Mengenal Trigger.

Mengatur Layer Properties

Layer properties digunakan untuk mengatur tampilan layer saat project dijalankan. Untuk melakukan pengaturan
pada layer, anda bisa mengeklik ikon gear pada bagian kanan bawah panel layer, seperti yang terlihat pada gambar
berikut:

Maka kotak dialog Slide Layer Properties akan ditampilkan:

Tampilan Kotak Dialog Slide Layer Properties

Anda dapat mengatur tampilan layer saat dijalankan dengan memberikan tanda centang pada pilihan:
 Hide other slide layers, untuk menyembunyikan layer lain (kecuali base layer) saat layer aktif dijalankan
 Hide objects on base layer, untuk menyembunyikan konten pada base layer saat layer aktif dijalankan
 Hide slide layer when timeline finishes, menyembunyikan layer aktif setelah selesai dijalankan
 Allow seeking, Pilih Automatically Decide.
Base Layer:
 Prevent the user from clicking on the base layer, untuk membatasi pengguna berinteraksi dengan konten
pada base layer saat layer aktif dijalankan.
 Pause timeline of base layer, untuk mem-pause (menghentikan sementara) konten pada base layer (audio,
video, animasi) saat layer aktif dijalankan.
Menyembunyikan dan Menampilkan Layer Mode Editing
Pada saat kita bekerja dengan beberapa layer, ada kalanya kita ingin menyembunyikan layer tertentu supaya bisa
lebih leluasa bekerja dengan layer yang lain. Untuk menyembunyikan layer, anda dapat mengeklik ikon mata di
sebelah kanan layer dan klik ikon mata lagi jika ingin menampilkannya.

Menampilkan dan Menyembunyikan Layer

Note:
 By default, saat editing base layer akan selalu ditampilkan dan layer yang lain selalu dalam keadaan
tersembunyi. Apabila anda ingin menyembunyikan base layer, maka anda dapat mengeklik ikon mata di
sebelah kanannya. Demikian pula, jika anda ingin menampilkan layer yang lain, maka anda dapat mengeklik
ikon mata yang ada di sebelah kanannya.
 Saat editing, Layer aktif selalu ditampilkan dalam mode full color. Sedangkan layer yang tidak aktif
ditampilkan dalam mode gray color. Apabila anda menginginkan semua layer ditampilkan full color, anda
dapat memberi tanda centang pada pilihan Dim di bagian bawah panel layer.
Mengubah Nama, Menyalin dan Menghapus Layer
By default, base layer memiliki nama yang sama dengan nama slide. Sedangkan nama layer adalah Untitled Layer1.
Untuk mengubah nama layer, anda dapat mengeklik ganda pada nama layer dan ketikkan nama baru yang
diinginkan.
 Mengganti Nama Layer
Untuk menyalin layer, anda dapat memilih ikon Duplicate Selected Layer pada bagian bawah panel layer.

Menyalin Layer

Sedangkan untuk menghapus layer, anda dapat memilih ikon Delete Selected Layer pada bagian bawah panel layer.

Menghapus Layer

Mengatur Urutan Layer

Sebenarnya urutan layer tidak berpengaruh pada urutan tampilan layer, sebab layer hanya ditampilkan
melalui trigger dari pengguna. Untuk mengubah urutan layer, anda dapat menggeser layer (drag and drop) ke posisi
yang diinginkan.
Articulate Storyline 3 : Mengenal Trigger (1)

Trigger adalah bagian yang paling saya sukai dalam belajar articulate storyline (AS). Menurut saya, kekuatan
articulate storyline berada pada trigger-nya. Ketika anda telah menguasai konsep trigger, maka itu sama saja
dengan anda telah menguasai separuh lebih articulate storyline.
Hampir semua media interaktif yang dibuat melalui AS, memanfaatkan trigger dalam mengontrol semua elemen di
dalamnya. Anda dapat memberikan kreasi sedemikian rupa terhadap media anda agar terlihat lebih interaktif
dengan menggunakan trigger ini. Intinya, jika anda ingin membuat media yang interaktif dan powerful, maka
bagian ini wajib anda kuasai!
Trigger merupakan perintah/kontrol yang kita berikan kepada objek tertentu agar dia melakukan aksi (action) yang
kita inginkan. Jadi memberikan trigger kepada sebuah objek, berarti memerintahkan kepada objek itu untuk
melakukan sesuatu yang kita inginkan. Misalnya pada contoh project sebelumnya kita mempunyai 2 button, yaitu
Male dan Female. Kedua button tersebut akan kita beri trigger (perintah) agar:
 Ketika btn_Male diklik, maka ditampilkan layer Male yang berisi gambar karakter pria, dan
 Ketika btn_Female diklik, maka akan ditampilkan layer Female yang berisi gambar karakter wanita.

Tampilan Project Layer.story

Maka mari kita beri trigger kepada kedua button tersebut melalui langkah berikut:
Menambahkan Trigger
Pada dasarnya trigger memiliki 3 elemen, yaitu:
1. What (Apa), aksi apa yang akan dikerjakan terhadap sebuah objek.
2. Where (dimana), objek yang mana yang akan diberikan aksi.
3. When (kapan), kapan aksi itu harus dikerjakan.
Maka untuk memberi trigger pada btn_Male agar menampilkan layer Male, anda dapat mengikuti langkah berikut:
 Klik objek btn_Male pada slide (base layer)
 Pada panel Trigger, klik Add trigger. Maka kotak dialog Trigger Wizard akan ditampilkan.

Panel Trigger > Add Trigger

  Beri pilihan seperti terlihat pada kotak dialog berikut:

Kotak Dialog Trigger Wizard

Keterangan:
 Action, pilih Show layer untuk menampilkan layer tertentu
 Layer, pilih nama layer tujuan (dalam contoh ini layer Male) yang akan ditampilkan
 When, pilih User click (ketika user mengeklik objek tertentu)
 Object, pilih Btn_Male (objek yang diklik)
 Pilih OK
Jadi, trigger yang telah diberikan di atas dapat diucapkan dengan kalimat:

Selanjutnya, jalankan project tersebut dengan memilih tombol preview. Maka btn_Male sekarang sudah bisa
memberi aksi menampilkan gambar karakter pria yang ada pada layer Male.
Ulangi langkah di atas untuk memberi trigger pada btn_Female sehingga bisa menampilkan gambar karakter
wanita yang ada pada layer Female.

Kotak Dialog Trigger Wizard

Jika kedua button tersebut telah diberi trigger, maka pada panel Trigger akan terlihat seperti pada gambar berikut:
 Panel Trigger
Note:
 Anda juga dapat menambahkan trigger dengan mengeklik ikon Create a New Trigger.

Ikon Trigger > Create a New Trigger

 By default, sebuah slide kosong memiliki 2 buah trigger untuk tombol Next dan Prev pada Player (Player
Trigger).
 Anda dapat mengatur tampilan layer ketika ditampilkan pada bagian Layer Properties masing-masing
layer. Untuk melakukan pengaturan ini, anda bisa mengikuti caranya
Articulate Storyline 3 : Bekerja dengan Panel Trigger (2)

Pembahasan tentang Trigger saya tulis menjadi beberapa bagian dengan tujuan untuk memudahkan anda dalam
memahami konsep trigger.
Pada tulisan saya sebelumnya, anda telah berhasil membuat 2 trigger untuk memberi aksi pada dua tombol, yaitu
Btn_Male dan Btn_Female. Nah, Pada tulisan kali ini, kita akan belajar mengelola/mengatur trigger yang telah
atau akan kita buat.
Bekerja dengan Panel Trigger
Semua trigger yang telah anda tambahkan, akan tersimpan pada panel Trigger. Semakin banyak trigger yang
anda buat, maka semakin banyak pula daftar trigger yang ditampilkan pada panel tersebut.
Pada dasarnya, panel Trigger terbagi atas beberapa bagian lokasi berdasarkan jenis objek yang diberi trigger.
Pilihan parameter yang terdapat pada “When”, menentukan di mana lokasi trigger tersebut akan ditempatkan.

Pilihan Parameter Pada Trigger Wizard > “When”

Berikut penempatan lokasi trigger:

 Slide Triggers, trigger yang diberikan pada slide akan diletakkan pada bagian atas panel Trigger.
 Layer Triggers, trigger yang diberikan pada layer akan diletakkan pula pada bagian atas panel Trigger
(berurutan dengan slide triggers)
 Object Triggers, trigger yang diberikan pada object akan diletakkan pada bagian tengah panel Trigger.
 Player Triggers, trigger yang diberikan pada player akan diletakkan pada bagian paling bawah panel
Trigger.
 Lokasi Trigger
Note:
By default, sebuah slide kosong memiliki 2 buah trigger untuk tombol Next dan Prev yang terdapat pada Player
(Player Triggers). Jika anda menambahkan trigger lain, maka trigger tersebut akan ditempatkan di atas Player
Triggers sesuai dengan urutan pembagian lokasi di atas.
Mengedit Trigger
Untuk mengedit trigger yang sudah ada, anda dapat mengeklik trigger-nya dan memilih ikon Edit the selected
trigger. Atau anda dapat mengeklik ganda pada trigger yang akan diedit dan ubahlah pada bagian yang
diinginkan.

Ikon Triggers > Edit the selected trigger

Beberapa parameter trigger juga ada yang bisa langsung diedit dari panel Trigger dengan cara mengeklik teks
yang berwarna biru bergaris bawah dan pilih parameter yang akan digunakan.
 Mengedit Parameter Trigger
Menyalin dan Menghapus Trigger
Anda dapat menyalin trigger dengan mengeklik trigger yang akan disalin dan pilih ikon Copy the selected
trigger pada bagian atas panel Trigger. Atau klik kanan pilih Copy dan klik kanan Paste.
Sedangkan untuk menghapus trigger, anda dapat mengeklik pada trigger yang akan dihapus dan memilih
ikon Delete the selected trigger atau klik kanan pilih Delete.

Mengedit/Menyalin/Menghapus Trigger
Mengatur Urutan Trigger
Anda dapat memberi lebih dari satu trigger kepada sebuah objek. Misalnya, masih pada contoh project di atas,
anda akan menambahkan trigger pada Btn_Male berupa aksi menyembunyikan layer Female. Jadi, pada
Btn_Male terdapat 2 trigger (aksi), yaitu menyembunyikan (hide) layer Female dan menampilkan (show) layer
Male.

Membuat Trigger Hide Layer Female

Sehingga pada panel Trigger terlihat seperti pada gambar berikut:

Daftar Trigger untuk Btn_Male

Apabila sebuah objek memiliki lebih dari satu trigger, maka aksi akan dijalankan sesuai dengan urutan trigger (dari
atas ke bawah). Pada contoh di atas, Btn_Male akan menyembunyikan layer Female terlebih dahulu, baru
kemudian layer Male akan ditampilkan.
Untuk mengubah urutan trigger, anda dapat memilih ikon panah atas/bawah pada panel Trigger, seperti yang
terlihat pada gambar berikut:

Ikon untuk mengurutkan trigger

Selanjutnya dengan menggunakan cara yang sama dengan di atas, tambahkan trigger pada Btn_Female dengan
aksi menyembunyikan layer Male dan menampilkan layer Female. Sehingga tampilan panel Trigger akan menjadi
seperti pada gambar berikut:

Daftar Trigger untuk Btn_Male dan Btn_Female

Articulate Storyline 3 : Bekerja dengan Player

Pada articulate storyline (AS), yang dimaksud Player adalah antar muka (fitur) yang berada di sekitar slide. Fitur
ini bisa mencakup menu, slide notes, glossary, resources, seekbar, tombol navigasi dan komponen lain yang kita
tambahkan di sekitar slide.

Tampilan Standar Player Pada AS

Tampilan Player di atas dapat anda custom sedemikian rupa sehingga terlihat lebih bagus. Untuk melakukan
pengaturan Player dapat dilakukan pada Player Properties dengan cara :
 Klik Home dan pilih Player

 Maka kotak dialog Player Properties akan ditampilkan

Player Properties
Pada kotak dialog Player Properties, lakukan pengaturan pada Player Tabs dengan memberi tanda centang pada:
 Resources, apabila Anda ingin menambahkan sumber belajar lain, misalnya file PPT, alamat website dst.
 Menu, apabila Anda ingin menampilkan judul setiap slide yang ada pada media Anda
 Glossary, apabila Anda ingin menampilkan glossarium pada media Anda
 Notes, apabila Anda ingin menampilkan catatan slide pada media Anda.
Apabila Anda ingin menonaktifkan tab di atas, maka Anda dapat menghilangkan tanda centang pada kotak di
sebelah kanan judul tab yang ingin dinonaktifkan. Sedangkan untuk menambahkan fitur lain pada tab player, Anda
dapat memilih ikon Add seperti gambar berikut:

Manambahkan Menu Profil Pada Player

Selanjutnya pada Trigger Wizard, isikan pada:

 Name, nama tab (menu) yang akan ditambahkan
 Align, posisi tab yang akan ditambahkan (Topbar Right, Topbar Left dst.)
 Action, aksi yang akan diberikan pada tab, misalnya “Jump to slide“, “Change state of“, dst.
 Slide, slide yang akan ditampilkan (jika pilihan pada Action adalah Jump to slide)
 When, kapan slide akan ditampilkan
Dan klik OK. Apabila Anda ingin mengedit tab yang telah ditambahkan, Anda dapat mengeklik ikon Edit yang ada
di sebelah kanan ikon Add.

Tampilan Ikon Edit Pada Player Tabs

Menambahkan Logo
Untuk menambahkan logo pada media, Anda dapat memberi tanda centang pada kotak Logo dan klik “Click to
add a logo” untuk mengunggah gambar logonya.

Menambahkan Logo

Logo yang diunggah sebaiknya berukuran maksimum lebar = 200 pixels dan tinggi 220 pixels. Namun, jika Anda
tidak ingin menampilkan logo, Anda bisa menghilangkan tanda centang pada kotak Logo.

Player yang telah ditambahkan Logo

Menampilkan/Menyembunyikan Tombol Navigasi

By default, AS akan menampilkan tombol navigasi Prev dan Next pada setiap slide. Anda dapat
menampilkan/menyembunyikan tombol navigasi (Prev, Next dan Submit) dan Gestures (Prev dan Next pada
mode Mobile) pada tampilan slide melalui Slide Properties yang ada pada bagian bawah panel Slide Layers.

Slide Properties
 Slide Properties Articulate Storyline 3

Untuk menanmpilan/menyembunyikan tombol navigasi tersebut, Anda dapat menghilangkan tanda centang pada
kotak Prev, Next atau Submit.
Note!
Tombol navigasi Submit, hanya akan tampil jika Anda menggunakan Question Slide (slide khusus untuk
soal/kuis). Jika Anda menggunakan slide Basic Layout, maka tombol navigasi Prev dan Next yang aktif.
Baca Membuat Project Baru.
Menyimpan Perubahan Pada Player
Anda dapat menyimpan semua perubahan pada Player agar suatu saat dapat digunakan sebagai template pada
media / project yang lain dengan cara mengeklik kanan pada ribbon Current Player > Save. Selanjutnya isikan
nama player -nya dan klik OK.

Menyimpan perubahan pada Player

Articulate Storyline 3: Menambahkan Video Pada Project

Sebagaimana yang telah saya sampaikan sebelumnya, bahwa Articulate Storyline ini memiliki fitur yang sangat
mirip dengan Ms Powerpoint, terutama dalam hal cara menambahkan objek pada slide.
Articulate Storyline (AS) memiliki banyak pilihan objek yang dapat ditambahkan pada slide/project seperti yang
terlihat pada gambar berikut ini:

Pilihan Objek Pada Articulate Storyline

Pada Articulate Storyline, objek yang dapat ditambahkan pada slide berupa:
 Slide, yang terdiri atas:
 Slide layer
 Convert to Freeform
 Zoom Region
 Media, yang terdiri atas:
 Character, Picture, Shape, Caption, Video, Audio dan Web Object, Textbox dan Tabel, Symbol,
Reference dan Hyperlink.
 Interactive Object
 Buttons, Check Boxes, Radio Buttons, Button Sets, Sliders, Dials, Hotspots, Data-Entry
Fields, Markers, Triggers, Hyperlinks, Variables, Scrolling Panels, Mouse Cursors
Pada tutorial kali ini saya akan menuliskan tentang cara menambahkan objek berupa Media (video), sedangkan
untuk objek yang lain baik berupa Slide dan Interactive Object akan saya tuliskan pada postingan yang lain.
Berikut langkah untuk menambahkan video pada slide:
 Pada mode slide view, pilih Insert dan klik tanda panah drop down pada Video

Pilihan Insert Video Pada Articulate Storyline

 Selanjutnya pilihlah:
 Video from File, jika video diambil dari file yang ada di komputer kita
 Video from Website, jika video diambil dari webite, misalnya dari Youtube atau Vimeo
 Record Webcam, jika video diambil dengan cara merekam menggunakan web camera pada laptop
 Flash Movie, jika video berupa file flash (.swf)
 Dan klik Insert/OK.

Apabila Anda menambahkan video dari website, misalnya dari Youtube atau Vimeo, maka Anda harus
menyalin EMBED code dari video tersebut dan menempelkannya pada kotak dialog Insert Video from
Website seperti yang terlihat pada gambar berikut:
 Embed code dari Youtube.com

Manambahkan Video Pada Slide

Apabila video yang Anda tambahkan berasal dari file video yang ada di komputer Anda, maka format file video yang
didukung oleh Articulate Storyline adalah FLV, MP4, SWF. Apabila Anda memiliki format file video yang lain seperti
3GP, MOV, MPEG, AVI, WMV dan seterusnya, maka file tersebut akan dikonversikan terlebih dahulu oleh AS
menjadi format file MP4.

Selanjutnya Anda dapat mengatur tampilan video yang Anda tambahkan tersebut dengan cara mengeklik video dan
lakukan pengaturan yang diinginkan pada menu bar Option.

Pengaturan Video Pada Articulate Storyline

 Video Editor Pada Articulate Storyline

Melalui kotak dialog tersebut Anda dapat melakukan trim, crop, mengatur volume, brightness dan contrass serta
menambahkan logo pada video. Setelah melakukan pengaturan pada video, jangan lupa untuk menyimpan
perubahan dengan memilih ikon Save & Close.
Apabila video yang Anda tambahkan berasal dari Record Webcam, maka akan tampil kotak
dialog Record Webcam seperti yang terlihat pada gambar berikut. Sebelum Anda merekam video, klik Show (hide)
device settings untuk memilih webcam / mikrofon yang ingin Anda gunakan (jika Anda memiliki lebih dari satu) dan
mengatur ukuran video.

Kotak Dialog Pengaturan Record WebCam

Note:
 Anda juga dapat melakukan pengaturan/edit video dengan cara mengeklik kanan objek
pada slide atau timeline dan pilih Edit Video.
 Pilihan Edit Video tidak tersedia untuk video yang diambil dari website (video from website), file SWF, atau
video FLV dengan transparansi alpha channel.
 Anda dapat menambahkan tombol kontrol seperti Play, Pause atau Stop pada video dengan
memanfaatkan trigger (baca tulisan saya Mengenal Trigger).
Articulate Storyline 3: Menambahkan Audio Pada Project
Selain menambahkan video pada project, Anda juga dapat menambahkan Audio pada project/slide baik dari
file audio yang sudah Anda miliki atau dengan cara merekam suara secara langsung melalui Articulate Storyline.
Sebelum menambahkan audio pada project, Anda dapat melakukan pengaturan pada perangkat audio sebelum
digunakan melalui langkah berikut:
 Klik tab Insert pada ribbon Storyline
 klik panah drop-down Audio, dan pilih Options

Menu Insert > Audio

 Pilih Speaker untuk perangkat pemutaran default Anda

 Pilih Microphone untuk perangkat perekaman default Anda dan setel volume rekaman Anda

Kotak Dialog Audio Options

 Klik OK untuk menyimpan perubahan yang telah dilakukan

Menambahkan Audio dari File
Untuk menambahkan audio yang berasal dari file audio yang Anda miliki, Anda dapat mengikuti langkah berikut:
 Pada mode Slide View, Pilih Insert dan klik pada panah drop-down Audio
 Pilih Audio from File, pilih file audio yang ingin Anda sisipkan pada project dan klik Open
 Format file audio yang didukung oleh Storyline adalah AAC, AIF, AIFF, M4A, MP3, OGG, WAV, WMA.
Note!
 File audio yang telah Anda tambahkan hanya akan diputar pada slide dimana file audio tersebut
ditambahkan.
  Apabila Anda menginginkan audio diputar untuk mengiringi (sebagai backsound) beberapa objek, maka
Anda dapat mengatur tampilan objek-objek tersebut dalam layer. Tutorial tentang layer dapat Anda baca
pada tulisan sebelumnya tentang Bekerja dengan Layer.

Menambahkan Narasi Berupa Rekaman Audio

Untuk menambahkan narasi pada media/project Anda, Anda dapat menambahkan audio dengan cara merekamnya
secara langsung melalui Articulate Storyline dengan langkah berikut:
 Pada mode Slide View, Pilih Insert dan klik pada panah drop-down Audio
 Pilih Record Mic, maka kotak dialog Record Microphone akan ditampilkan.

Kotak Dialog Record Microphone

 Selanjutnya kotak dialog tersebut, beri pilihan pada:

 Narration Script, apabila Anda memiliki script (narasi) yang akan digunakan
 Record, untuk mulai merekam
 Stop recording, untuk mengakhiri merekam
 Play/Pause dan Rewind, untuk melihat hasil rekaman Anda
 Delete, untuk menghapus rekaman
 Import audio file, untuk membatalkan rekaman dan menggunakan audio dari file yang sudah ada
 Edit Audio, untuk melakukan pengeditan pada audio
 Klik Save untuk menyimpan dan menambahkan audio pada project.
Articulate Storyline 3 : Membuat Quiz

Dalam membuat media pembelajaran, rasanya belum pas jika belum ada media evaluasi. Kuis biasa ditambahkan
sebagai media untuk menguji keterserapan materi yang diajarkan pada siswa.
Pada Articulate Storyline, terdapat beragam jenis kuis yang dapat digunakan, diantaranya adalah:
 True/False
 Multiple Choice
 Multiple Response
 Fill-in-the-Blank
 Word Bank
 Matching Drag-and-drop
 Matching Drop down
 Sequence Drag-and-drop
 Sequence Drop down
 Numeric
 Hotspot

Jenis kuis pada Articulate Storyline

Membuat Soal Kuis

Untuk memulai membuat kuis pada Articulate Storyline, dapat dilakukan dengan 2 cara. Yaitu dengan cara
membuatnya secara langsung pada slide atau dengan soal kuis terlebih dahulu pada Question Bank dan baru
selanjutnya kita sisipkan ke slide.
Pada tulisan ini kita akan belajar membuat soal kuis dengan cara pertama, yaitu dengan menyisipkannya langsung
pada slide. Sedangkan untuk cara yang kedua akan saya dibahas pada tulisan berikutnya. Berikut langkah untuk
membuat soal kuis pada Articulate Storyline:
1. Buka scene/slide dimana soal akan ditambahkan.
2. Klik Slides pada daftar tab ribbon, dan pilih Graded Question.
Atau klik kanan pada scene/slide dan pilih New Slide > Graded Question.

Maka akan ditampilkan kotak dialog Insert Slide. Pada kotak dialog ini akan ditampilkan daftar pilihan jenis kuis
yang dapat digunakan.
3. Selanjutnya pilihlah jenis soal yang akan ditambahkan, misalnya Multiple Choice untuk membuat soal berbentuk
pilihan ganda, True/False untuk soal berbentuk Benar/Salah dan seterusnya.
4. Klik Insert Slide.
Selanjutnya, jenis soal yang telah dipilih akan ditampilkan pada mode Form View. Pada mode ini, Anda diminta
untuk menuliskan soalnya seperti yang terlihat pada gambar berikut:

Tampilan Soal pada mode Form View

Keterangan Gambar:
 Enter the question, ketikkan soalnya
 Enter the choices, ketikkan semua pilihan jawabannya pada kolom A, B dan seterusnya dan beri pilihan
pada jawaban yang benar pada kolom Correct.
 Set feedback and branching. Pada kolom ini Anda dapat mengedit feedback (komentar) yang ada
dengan feedback yang Anda tentukan sendiri menggunakan Bahasa Indonesia :). Selanjutnya pada
kolom Points, Anda dapat mengatur nilai untuk jawaban benar dan salah dengan cara menuliskan nilai yang
diinginkan
 Anda juga dapat menambahkan suara dan mengatur tampilan feedback dengan memilih tombol More di
sebelah kanan feedback Correct/Incorrect, maka akan tampil kotak dialog Feedback seperti terlihat pada
gambar berikut:
 Kotak dialog Feedback

Anda dapat menambahkan media berupa gambar dan video pada soal dengan cara memilih ribbon Media pada
menu Question, atau Anda juga dapat menambahkan suara pada soal dengan memilih Audio. Berikut file gambar,
video dan audio yang disupport oleh Articulate Storyline:

Format file audio pada Articulate Storyline

Format file gambar pada Articulate Storyline

Format file video pada Articulate Storyline

Ada dapat mengulangi langkah-langkah di atas untuk soal-soal berikutnya.

Tampilan soal kuis pada mode Form View

Mengatur Tampilan Soal

Soal yang telah Anda tambahkan pada slide memiliki tampilan standar dengan background slide warna putih. Anda
dapat mengatur tampilan soal kuis agar terlihat lebih menarik, pada mode Slide View.

Tampilan soal kuis pada mode Slide View

Pada saat berada pada mode Slide View, Anda dapat memodifikasi tampilan soal kuis semenarik mungkin sehingga
soal terlihat lebih interaktif. Misalnya Anda punya soal kuis pilihan ganda dalam mode Form View terihat seperti
pada gambar berikut:

Tampilan kuis pilihan ganda pada mode Form View

Maka Anda dapat memodifikasinya sedemikian rupa sehingga tampilan soal kuis menjadi lebih menarik seperti
terlihat pada gambar berikut:

Tampilan kuis pilihan ganda pada mode Slide View yang telah dimodifikasi

Untuk membuat tampilan soal kuis seperti di atas, Anda dapat melakukannya sama persis dengan ketika Anda
memodifikasi tampilan slide pada PowerPoint.
Articulate Storyline 3 : Menampilkan Hasil Kuis
Setelah Anda menambahkan soal-soal yang akan ditampilkan pada kuis, maka pada bagian akhir kuis biasanya
akan ditampilkan nilai hasil mengerjakan kuis. Pada Articulate Storyline, untuk menampilkan hasil kuis dapat
dilakukan dengan menambahkan slide baru (Result) pada bagian akhir slide soal kuis.
Berikut langkah untuk menambahkan slide Result:
I. Klik pada bagian akhir slide soal yang ada dan pilih menu Slide > Result.

Atau Anda dapat mengeklik kanan mouse dan pilih New Slide > Results.

Tampilan menu New Slide > Results

Maka akan ditampilkan kotak dialog Insert Slide seperti pada gambar berikut:

Tampilan kotak dialog Insert Slide > Result

2. Pilihlah Graded Result Slide dan Klik tombol Insert Slide. Maka akan ditambahkan slide Result dengan tampilan
seperti yang terlihat pada gambar berikut:
 Tampilan Slide Result

Sesaat sebelum ditambahkan slide result tersebut, akan ditampilkan kotak dialog Result Slide Properties seperti
pada gambar berikut.

Tampilan Result Slide Properties

Pada Result Slide Properties ini, akan ditampilkan daftar semua soal yang pernah Anda buat. Anda harus memilih
soal mana saja yang akan dihitung nilainya dan ditampilkan pada slide result. Pada kotak dialog ini Anda juga dapat
menentukan batas nilai minimal yang harus dicapai agar lulus pada kuis ini dengan menuliskan nilai angka pada
kolom Passing Score dan sekaligus menentukan waktu mengerjakan kuis pada kolom End quiz after dengan
menentukan durasi pengerjaan kuis.
 Menentukan Passing Score dan waktu pengerjaan kuis

Gambar berikut adalah tampilan hasil kuis (slide result):

Tampilan default slide result

Keterangan gambar:
By default, nilai hasil kuis yang ditampilkan pada slide result adalah Score (berupa total nilai soal yang berhasil
dijawab oleh user) dalam bentuk persen dan point, serta Passing Score (batas nilai minimal untuk bisa lulus kuis).
Pada slide tersebut juga disediakan tombol Review Quiz yang memungkinkan user melihat kembali kuis dan
jawaban yang benar/salah.
Anda dapat mengubah tampilan hasil kuis tersebut sehingga terlihat lebih menarik dengan menambahkan
gambar, button, mengganti background, jenis font dan seterusnya. Gambar berikut adalah tampilan hasil kuis yang
telah dimodifikasi.

Tampilkan kuis yang telah dimodifikasi

Articulate Storyline 3 : Membuat Bank Soal

Sebagaimana yang telah dibahas pada postingan sebelumnya, baca Membuat Quiz, bahwa cara lain untuk
membuat kuis pada Articulate Storyline adalah dengan membuat soalnya terlebih dahulu melalui bank soal, baru
kemudian menampilkannya pada slide/scene yang kita khususkan untuk kuis.
Bank soal (Question Bank) pada Articulate Storyline berfungsi untuk menyimpan semua slide yang berisi soal.
Menyimpan soal pada bank soal ini sangat disarankan, karena :
 Kita dapat menggunakan soal-soal tersebut kapan saja kita membutuhkannya tanpa harus menyalinnya
kembali, bahkan bisa digunakan untuk lebih dari satu kuis.
 Kita dapat mengacak (suffle) soal dari bank soal sehingga memungkinkan masing-
masing user mendapatkan jenis soal yang berbeda.
Membuat Bank Soal
Anda dapat membuat bank soal baik dari story view maupun slide view. Berikut adalah langkah untuk membuat
bank soal:
1. Aktifkan Pilih tab ribbon Slides > Question Banks > Create Question Bank.
2. Selanjutnya pada kotak dialog New Question Bank, ketikkan nama bank soalnya, Misalnya “Jenis Jaringan
Komputer”.

Kotak dialog New Question Bank

4. Klik OK. Maka sebuah bank soal yang masih kosong akan ditampilkan, seperti yang terlihat pada gambar
berikut:

Tampilan Bank Soal yang masih kosong

Anda dapat mulai menambahkan soal pada bank soal tersebut dengan memilih Graded untuk membuat soal
dengan berbagai jenis pilihan soal seperti True/False, Multiple choice dan seterusnya atau Survey untuk membuat
soal berupa survey dan Import untuk mengambil/menambahkan soal dari bank soal lain yang sudah pernah dibuat.
Selanjutnya untuk mulai membuat soal, Anda dapat mengikuti langkah mulai no.3 pada tulisan
sebelumnya, Membuat Quiz.
Menambahkan Bank Soal Pada Slide Kuis
Setelah Anda membuat soal pada bank soal, maka Anda dapat menggunakan satu atau lebih dari soal-soal tersebut
untuk membuat kuis yang dinamis (bisa diacak).
Berikut langkah untuk menambahkan bank soal pada kuis:
1. Buatlah scene baru dimana soal kuis akan ditempatkan
2. Pilih Slides > Question Banks, > New Draw from Question Bank. Maka kotak dialog Draw From Bank akan
ditampilkan. Apabila Anda memiliki lebih dari satu bank soal, maka Anda dapat memilihnya dengan mengeklik
tombol drop down pada kolom Question Bank.

Tombol drop down Question Bank

3. Berilah tanda centang pada Draw questions randomly agar soal ditampilkan secara random.
4. Pada pilihan Include, tentukan banyaknya soal yang akan ditampilkan pada kuis. Pilihan ini hanya aktif apabila
Anda memberi tanda centang pada Draw questions randomly.
5. Beri pilihan pada Include in Shuffle dengan:
 Randomly, untuk menampilkan soal secara random
 Never, untuk tidak menampilkan soal, apabila user memilih semua soal untuk ditampilkan
 Always, untuk selalu menampilkan soal yang dipilih
6. Pilihan Lock Question digunakan untuk mengatur tampilan soal ketika diacak dan ditampilkan pada kuis. Misalnya
jika Anda menginginkan soal ditampilkan pada awal kuis, maka Anda dapat menggunakan pilihan To Top of
Group. Gambar berikut menunjukkan beberapa pilihan pada Lock Question:

Menu Lock Question

7. Beri pilihan pada Move Question (Up/Down) untuk mengubah urutan soal pada bank soal.

Menu Move Question

8. Klik Insert untuk menambahkan bank soal pada scene. Maka akan ditambahkan slide baru yang berisi bank soal
seperti yang terlihat pada gambar berikut:
 Tampilan bank soal kuis pada Story View
Note:
 Seperti terlihat di atas bahwa tampilan bank soal pada slide akan terlihat seperti pada gambar berikut:

Tampilan placeholder bank soal

 Anda dapat menambahkan slide baru sebelum slide bank soal yang berisi keterangan kuis, agar tampilan
kuis terlihat lebih interaktif seperti yang terlihat pada gambar berikut:

Tampilan bank soal kuis pada Story View

 Anda juga dapat menambahkan slide Result setelah slide bank soal untuk menampilkan nilai hasil
pengerjaan kuis.
Apabila Anda ingin mengedit soalnya, Anda dapat melakukannya melalui slide view atau question bank dengan
mengeklik“Click to view the slide draw” atau “Click to view the question bank”

Tampilan slide kuis pada slide view

Untuk melihat daftar soal pada bank soal yang sedang digunakan, Anda dapat mengeklik ganda pada
tampilan placeholder tersebut.
Articulate Storyline 3 : Mengenal State

Jika Anda pernah belajar pemrograman web, saya yakin Anda mengenal istilah hover (mouse over), visited
link, active link dan seterusnya. Istilah-istilah tersebut biasanya kita gunakan ketika kita ingin memberikan aksi pada
objek berupa button atau hyperlink pada saat user mengarahkan/mengeklik mouse pada button tersebut.
Pada pemrograman web, aksi tersebut biasanya dibuat menggunakan CSS atau Javascript atau
menggunakan script pemrograman lainnya, yang terlihat agak rumit bagi yang tidak terbiasa bekerja
dengan script bahasa pemrograman.
Pada Articulate Storyline untuk membuat aksi serupa, dapat dilakukan dengan sangat simple, yaitu dengan
menggunakan State. State memungkinkan kita untuk mengubah tampilan objek pada slide sehingga terlihat lebih
interaktif. Misalnya, sebuah button merah akan berubah warna menjadi biru ketika mouse
diarahkan (hover) pada button tersebut.
Atau misalnya sebuah gambar bunga melati akan berubah menjadi gambar bunga mawar ketika mouse
diarahkan (hover) pada gambar tersebut. Dengan menggunakan State, hal tersebut dapat dilakukan dengan mudah
😉
By default, setiap objek yang kita sisipkan pada slide memiliki 1 state (Normal). Pada Articulate Storyline, sebuah
objek bisa memiliki lebih dari 1 state. Misalnya, gambar karakter berikut memiliki 5 state dengan variasi karakter
yang berbeda pada setiap state-nya.

Gambar 1. Contoh gambar dengan 5 state

Begitupula dengan button berikut:

Gambar 2. Contoh button dengan 5 state

Menambahkan State
Kita dapat menambahkan state sebuah objek dan memberikan tampilan sesuai dengan yang diinginkan dengan
cara sama dengan ketika anda memberikan perlakuan pada sebuah objek.
Berikut adalah langkah untuk menambahkan state pada sebuah objek-Tombol:
1. Aktifkan sebuah slide dan tambahkan sebuah Rounded Rectangle untuk membuat sebuah tombol dengan
memilih Insert > Shape > Rounded Rectangle.
2. Klik pada objek tombol yang telah ditambahkan.
3. Aktifkan State pada bagian bawah jendela Articulate Storyline dan pilih Edit State.
 Tampilan state pada objek (Normal)

Maka akan ditampilkan jendela Editing State seperti pada gambar berikut:

Tampilan Editing State

4. Tambahkan State baru dengan memilih ikon New State. Maka kotak dialog Add New State akan ditampilkan dan
ketikkan nama state baru.

Kotak dialog Add New State

5. Klik Add. Maka sebuah state baru akan ditambahkan. Modifikasilah state baru tersebut dengan
mengeklik state dan mengubah warna tombol menjadi merah seperti yang terlihat pada gambar berikut:

Menambahkan state baru

Anda dapat menambahkan state baru untuk jenis tampilan objek yang lain.
6. Klik Done Editing States untuk menyimpan perubahan pada state dan kembali ke slide.

Menampilkan State
Beberapa state tertentu seperti hover, down, and visited (gambar 1) akan dijalankan secara otomatis
ketika user memberi aksi kepada button tersebut. Sedangkan pada beberapa state yang lain, seperti state yang
berupa objek karakter (gambar 2) memerlukan trigger dari user untuk menampilkannya.
Untuk menampilkan state berupa button yang tidak mengandung trigger seperti pada contoh di atas, Anda dapat
menampilkannya dengan mengarahkan (hover) mouse pada tombol. Sedangkan untuk menampilkan state yang
menggunakan trigger, Anda dapat mengikuti langkah pada contoh berikut:
Pada contoh ini, kita akan membuat 2 tombol dengan label “DIAM” dan “SENYUM” untuk mengendalikan
sebuah state berupa karakter. Ketika tombol “SENYUM” diklik, maka akan tampil karakter dengan wajah tersenyum
(Happy) dan ketika tombol “DIAM” diklik maka tampilan karakter akan kembali seperti semula (Neutral).
Berikut langkah untuk membuatnya:
1. Buatlah 2 buah tombol dan berilah label “DIAM” dan “SENYUM”
2. Tambahkan sebuah Character – Beatrice – Expression – Neutral di sebelah kanan tombol sehingga terlihat
seperti gambar berikut:
Tampilan 2 tombol dan 1 karakter
3. Klik tombol DIAM dan berilah trigger berikut, dan klik OK.

Trigger untuk tombol DIAM

4. Klik tombol SENYUM dan berilah trigger berikut, dan klik OK.

Trigger untuk tombol SENYUM

Sehingga tampilan State menjadi seperti pada gambar berikut:

Tampilan state dan trigger

5. Selanjutnya jalankan slide dengan memilih Preview dan klik pada kedua tombol tersebut, maka masing-masing
tombol akan memberikan tampilan state yang berbeda sesuai dengan trigger yang diberikan.
Articulate Storyline 3 : Menambahkan Text Variable [2]

Melanjutkan postingan sebelumnya, Bekerja dengan Variabel, pada postingan kali ini kita akan belajar membuat
sebuah input-an sederhana yang menanyakan nama user dan menampilkannya kembali pada slide berikutnya.
Ada beberapa tahapan yang harus dilakukan untuk menggunakan variabel dalam media pembelajaran, yaitu:
1. Membuat form input berupa Textbox
2. Membuat dan mengatur variabel
3. Menampilkan isi variabel
Membuat Form Input Textbox
Form input berfungsi untuk menerima masukan dari user. Untuk membuat form input Textbox, Anda dapat mengikuti
langkah berikut:
1. Aktifkan slide dan buatlah tampilan yang akan menampilkan form masukan nama user.
2. Pilih tab Insert > Input > Data Entry > Text Entry Field, untuk menambahkan form masukan.
Pilihan Input > Textbox

Selanjutnya gambarlah kotak textbox sehingga seperti pada gambar berikut:

Tampilan kotak textbox pada slide

Pada teks “Tipe your text here” gantilah dengan teks “Nama Anda”. Maka sebuah variabel baru telah dibuat dengan
nama “TextEntry”, seperti yang terlihat pada panel Trigger berikut:
Variabel baru TextEntry
3. Ubahlah nama variabel “TextEntry” menjadi “username“ untuk memudahkan Anda dalam menggunakan variabel
ini nantinya, dengan cara:
 Klik ikon X pada bagian kanan panel Trigger, maka akan muncul kotak dialog Variables.
 Pada kotak dialog tersebut, double click pada nama variable “TextEntry” dan ubahlah nama variabel
menjadi “username” seperti yang terlihat pada gambar berikut:

Kotak dialog Variable

 Pada kolom Value biarkan kosong dan klik OK.

4. Selanjutnya, tambahkan tombol “Lanjut” di bagian bawah kotak textbox, untuk menyimpan data nama yang
telah dimasukkan, seperti terlihat pada gambar berikut:

Tampilan input username

5. Pada tombol “Lanjut” tersebut, berilah trigger dengan Action berikut:
 Action: Jump to slide
 Slide: next slide
 When: User click
 Object: Lanjut (Button)

Pengaturan trigger untuk tombol “Lanjut”

 Pilih Show Condition dan klik ikon + pada bagian kanan bawah kotak dialog di atas.

Pilihan Add a new “AND” or “OR” condition

Maka akan ditampilkan kotak dialog Add Trigger Condition seperti pada gambar berikut:

Pengaturan tambahan kondisi untuk tombol “Lanjut”

Selanjutnya lakukan pengaturan pada kolom:

 List, beri pilihan pada Variables
 If, beri pilihan pada nama variabel yang akan digunakan [username]
 Operator, beri pilihan pada != Not equal to
  Type, beri pilihan pada Value
 Value, dikosongkan (jika diinginkan user dapat mengisikan dengan teks apapun)
Sehingga apabila trigger di atas diucapkan, maka akan berbunyi:
“Tampilkan slide selanjutnya ketika user mengeklik tombol Lanjut dan isi variabel username telah terisi dengan
nama user (tidak kosong)”
Menampilkan Isi Variabel
Variabel yang telah diisi dengan data dapat ditampilkan kembali dalam slide/scene dengan
menambahkan Reference pada slide/scene di mana isi variabel akan ditampilkan. Berikut langkah untuk
menampilkan kembali isi variabel:
1. Aktifkan slide dimana isi variabel akan ditampilkan.
2. Klik Insert > Text Box, untuk menambahkan textbox, dimana data variabel akan ditampilkan
3. Masih pada textbox tersebut, klik Insert > Reference untuk mengambil isi variabel dan pilih nama
variabelnya, misalnya username.

Kotak dialog References

4. Klik OK untuk menyisipkan isi variabel pada slide. Ulangi langkah no.2 untuk memilih variabel yang lain yang
akan ditampilkan. Maka akan tampil nama variabel dengan format sebagai berikut:

Tampilan nama variabel pada slide

Selanjutnya Anda dapat mengatur tampilan isi variabel tersebut sesuai dengan tampilan yang diinginkan.