Untuk membuat tampilan sebuah media menjadi lebih interaktif, kita dapat menambahkan fitur berupa masukan username atau password atau bahkan pilihan avatar sebagai identitas gender pengguna pada halaman pembuka media pembelajaran.

Avatar dalam dunia komputer/dunia maya dapat diibaratkan sebagai gambar/ikon yang mewakili karakter diri seseorang. Avatar seringkali digunakan pada sebuah media/aplikasi untuk membuatnya terlihat lebih menarik.

Contoh Halaman Login Menggunakan Avatar

Pada gambar di atas, avatar kita fungsikan sebagai tombol “Submit/Lanjut”. Dengan demikian pengguna bisa melanjutkan menggunakan media dengan mengeklik ‘tombol avatar’ yang sesuai, setelah sebelumnya memasukkan username.

Menampilkan Avatar
Untuk membuat tampilan pembuka dengan menggunakan avatar, Anda dapat memanfaatkan state (untuk memberi efek hover pada avatar) dan trigger (untuk memberi aksi lebih lanjut). Berikut langkah untuk membuat masukan berupa username dan pilihan avatar pada media:

1. Siapkan terlebih dahulu gambar avatar berikut ini:

Gambar avatar

2. Aktifkan sebuah slide dan tambahkan 3 buah objek, yaitu Textbox, gambar Male-gray.jpg dan Female.jpg sehingga tampilan slide terlihat seperti pada gambar berikut:

Tampilan Slide dengan textbox dan 2 pilihan avatar

3. Selanjutnya klik pada gambar Male-gray.jpg, dan klik tab State.

Tampilan state male-gray.jpg

4. Pilih Edit StateNew State dan berilah nama state dengan “Male”.

Tampilan Edit State > New State

Tampilan kotak dialog Add State

Maka tampilan tab State akan berubah menjadi:

Tampilan State yang telah ditambahkan dengan state Male

5. Hapuslah gambar male-gray.jpg pada slide, sehingga tampilan gambar pada slide hilang dan tampilan state Male menjadi kosong seperti terlihat pada gambar berikut.

Tampilan state male yang dihapus (kosong)

6. Selanjutnya tambahkan gambar avatar male.jpg (avatar male berwarna) dan letakkan posisinya tepat pada gambar avatar male-gray.jpg yang sebelumnya telah dihapus.

Tampilan state male yang telah diganti dengan avatar warna

7. Lakukan langkah no.3 untuk gambar avatar Female.jpg. Sehingga tampilan slide menjadi seperti pada gambar berikut:

Tampilan state Female yang telah diganti dengan avatar warna

Langkah selanjutnya adalah menambahkan trigger pada kedua avatar Male-gray dan Female-gray agar ketika mouse diarahkan pada kedua avatar tersebut gambar avatar akan berubah menjadi gambar avatar yang berwarna.

8. Tambahkan trigger baru untuk gambar avatar Male-gray dan Female-gray dengan trigger sebagai berikut:

Trigger untuk Male-gray

 Trigger untuk Female-gray

9. Tambahkan trigger baru untuk mengatur agar pengguna hanya bisa lanjut ke layer/slide berikutnya jika username telah diisi nama dan avatar telah dipilih (diklik).

Menambahkan Trigger pada Avatar

Klik tanda plus (+) untuk menambahkan kondisi pengecekan isi variabel username. Maka akan ditampilkan kotak dialog Add Trigger Condition dan isikan kolom sesuai dengan yang terlihat pada gambar berikut:

Menambahkan Kondisi pada Trigger Avatar

Tambahkan 2 layer baru dengan nama layer Male-Area dan Female-Area sebagai layer target yang akan ditampilkan ketika pengguna memilih avatar Male atau Female dengan tampilan berikut:

Tampilan Layer Female-Area

Tampilan Layer Male-Area

Tips!

  • Anda dapat menyembunyikan objek pada base layer dengan memilih Hide objects on based layer pada Slide Layer Properties.

Tampilan Slide Layer Properties

Berikut tampilan halaman login media pembelajaran dengan menggunakan avatar.

Tampilan Halaman Login (Male)

Pada halaman login di atas, maka pengguna diminta untuk mengisikan nama dan memilih avatar yang sesuai. Avatar pada halaman ini juga berfungsi sebagai tombol Submit menuju ke layer Male-Area. Demikian pula sebaliknya pada avatar Female.

Tampilan Halaman Konten Media pada Male

 

Tampilan Halaman Konten Media pada Female

Monggo dicoba.. 😉

Referensi:
https://articulate.com/support/article/Articulate-Storyline-360-Understanding-States-Layers-and-Triggers#states
https://articulate.com/support/article/introduction-to-variables-sl2
https://community.articulate.com/series/5/articles/working-with-variables