Jumat, 29 Januari 2021

Membuat Quiz Klik and Drag Pada Software Smart Apps Creator 3

1) Buka Software Smart Apps Creator 3.

2) Klik Android Phone→Horizontal→Submit (Sesuai yang dibutuhkan).

3) Beri nama pada section untuk quiznya.

4) Insert Text, untuk tampilan pembuka (start page), beri judul/nama Quiz dan posisikan di tengah (center).

5) Insert Image untuk objek pertama (atas) lalu Copy + Paste untuk objek kedua (bawah). Contoh : Atas (angka 1&2) dan Bawah (angka 1&2). ~ Pada objek pertam, set posisi berada di depan Blok objeknya→Bring to Font.

6) Non-aktifkan navigasi, sehingga halaman terkunci Menu Page→Aktifkan objek angka 1 (atas) menjadi dragging→Pilih juga Push Back After Dragging. Lakukan pada objek selanjutnya.

7)  Rename nama objek pada layer agar memudahkan objek mana yang akan di drag.

8) Insert Hotspot untuk objek yang bawah. Hotspot Shape→Oval, menyesuaikan dengan objek.

9)  Letakkan hotspot di atas angka 1 (bawah) copy hotspot untuk objek angka 2 (bawah). 

10)  Rename hotspot sesuai objek.

Note : Hotspot harus lebih besar ukuranya di banding objek

11) Pilih Objek→Interaction→Enter Hotspot (Pilih hotspot yang di tuju) →objek 1 (atas) →Hide→Add. Lakukan juga pada objek angka 2 atas. 

12) Insert Image untuk tampilan BENAR. Insert→Image→Tanda benar.png, (yang sudah di download sebelumnya). 

13) Setting Hide tampilan Klik Image (centang) → Property→Setting→Hide Object→When Browsing→Checklist.

14) Lalu, kita atur agar saat menjawab benar, muncul tampilan centang. Klik angka 1 (atas) > Interaction > Enter Hotspot (Pilih Hotspot yang dituju) > Object (Tanda benar. Png) > Appear > add.

15) Selanjutnya, insert animasi pada object centang Klik image > Animation > Zoom (biru) > add tambahkan lagi Klik image > Animation > Zoom (Orange).

16) Klik pada animasi kedua (bawah). Isi Delay dengan ukuran 1.50 kemudian save

17) Hapus interaction yang tadi sudah dibuat, lalu Klik angka 1 (Atas) > Interaction > Enter Hotspot (pilih hotspot yang dituju) > object (Centang) > Play Animation > Add.Lakukan Hal yang sama pada object angka 2 atas.

 

Terimakasih

Semoga Membantu;)

Tidak ada komentar:

Posting Komentar

Tutorial Membuat Geometri Pattern Design dan Membuat Design Book Mockup

  A . Membuat Desain Geometri Pattern Pada Adobe Ilustrator Cs 6 1). Buka Software Adobe Ilustrator 2). Ctrl+N untuk membuat file baru dan ...