Tutorial cara membuat aplikasi kuis sederhana

 Tutorial C=ara membuat Aplikasi Quiz sederhana di SAC

1.Buatlah section baru dengan cara { KLIK KANAN PADA DEFAULT SEACTION DAN PILIH NEW SECTION } Setelah itu RENAME SECTION tersebut beri nama LATIHAN.

2.Selanjutnya untuk memperindah Page kosong kita beri Backgroun Gambar dengan cara { KLIK INSERT-BACKGROUND-EXTRUDE } Dan pilih Background yang kamu inginkan.

3.Selanjutnya kita akan menambahkan Elemen berupa Gambar & Teks agar tampilannya lebih menarik, Caranya untuk menambahkan Gambar { KLIK INSERT-IMAGE-PILIH GAMBAR YANG DI INGINKAN }

4.Masukan Gambar & Teks yang di perlukan agar terlihat menarik (Perhatikan Gambar).Untuk membuat Teks { KLIK INSERT-TEXT-HORIZONTAL TEKS }

5.Selanjutnya buat page baru Di bawah Page pertama, Dengan cara { KLIK KANAN DI BAWAH PAGE PERTAMA & KLIK NEW PAGE } Buatlah New page susuai Kebutuhan Jumlah soal yang akan di Buat Nanti.

6.Di page ke dua kita akan Memasukkan teks soal kita Beserta jawabannya, Dan perlu di ingat setiap Teks hendaknya berada pada BOX TEKS yang berbeda. Agar mempermudah perintah program selanjutnya. Setelah input Teks, Masukan Tombol Opsi A,B,C,D berupa PNG, dengan cara { KLIK INSERT-IMAGE-DAN MASUKAN ICON A,B,C,D PNG NYA }, Jika sudah Tambahkan Gambar untuk Background Score Dengan cara yang sama seperti input gambar, Selanjutnya masukan GLOBAL COUNTER yang akan di gunakan untuk menampilkan Score pengguna yang mengerjakan Latihan, Dengan cara { INSERT-COUNTER-GLOBAL COUNTER }.

 

 

SETIAP TEKS BERADA PADA BOX TEKS YANG BERBEDA

 

MASUKAN GLOBAL COUNTER UNTUK MENAMPILKAN SCORE

7.Lakukan Hal yang sama di setiap Page yang kita buat, Lebih mudahnya gunakan Perintah COPY-PASTE.

8.Selanjutnya di Page terakhir, kita Buat halaman yang akan Menampilkan Score pengguna, Masukkan beberapa gambar, Dan jangan lupa INPUT GLOBAL COUNTER untuk menampilkan Seluruh Score dan jawaban Pengguna.

9.Pada Page Pertama kita akan membuat Perintah interaksi, Agar soal-soal Latihan bisa digunakan Dengan baik. Di Slide awal Klik Icon Mulai kemudian { KLIK INTERACTION-TOUCH-OBJECT (Pilih tombol mulai)-SWITCH PAGE } Pilih Section Latihan
Dan pilih Slide soal nomor 1 Klik Submit. ( Fungsi interaction ini adalah ketika kita mengklik tombol mulai maka aplikasi akan menuju ke slide nomor 1 ).

10.Pada Page soal pertama, Kita akan membuat Printah Interaksi untuk jawaban Benar, Caranya Klik opsi icon Jawaban yang Benar Kemudian { KLIK INTERACTION-TOUCH-OBJECT- (Pilih counter)-INCREAS COUNTER } Akan muncul Popup Masukan Angka 10Digit klik Submit
( Perintah ini memberikan Fungsi apabila pengguna mengklik opsi jawaban Benar, Maka point akan bertambah 10 ).

11.PERLU DI PERHATIKAN, Setiap selesai memberikan perintah interaction jangan lupa untuk selalu mengklik Tombol (Add), "Karna, jika tidak Fungsi dari interaction tidak akan berjalan.

12.Selanjutnya,Berikan juga perintah untuk beralih Page di setiap Opsi jawaban Termasuk pada jawaban yang Benar, Caranya "Sama Seperti pada Perintah Tombol mulai di Halaman Pertama", Lakukan hal yang sama disetiap Halaman Soal.

13.Langkah terakhir, di Slide akhir Latihan kita akan memasang Perintah interaksi untuk mereset Skor kembali Menjadi "0".

14.Pada Tombol Home dan Tombol Ulangi, Pertama Kita beri Fungsi "Reset latihan" pada Tombol "Ulangi" dengan Cara {KLIK INTERACTION-TOUCH-OBJECT-COUNTER-RESET COUNTER}
Berikan Fungsi Kembali ke page awal Soal Latihan, Dengan cara yang sama seperti pada Tombol "MULAI LATIHAN", jadi setiap Tombol mempunyai 2Fungsi sekaligus, Yaitu mereset score dan Kembali ke halaman mulai latihan.

15.Jika sudah Jangan lupa untuk mengecek PREVIEW untuk memastikan semua tombol berfungsi dengan Benar.

Rancangan Modul Pembelajaran Interktif

• Struktur Navigasi

Sketsa awal

struktur navigasi yang saya gunakan

• Sketsa/Storyboard

sketsa awal

rancangan

CARA MEMBUAT QUIZ MENGGUNKANA SMART APPS CREATOR

1 .Buka Software SAC

2. Pilih Android Phone>Horizontal>Submit

3. Beri nama section untuk quiz Click and Drag

4. Insert text untuk tampilan Start Page (pembuka) 

5. Beri nama atau judul quiz

6. Insert image untuk objek pertama (atas) 

7. Lakukan copy pada objek pertama, lalu paste maka akan muncul objek kedua (bawah), pada objek atas set posisi didepan

8. Non-aktifkan navigasi, sehingga halaman terkunci. 

9. Aktifkan objek angka 1 menjadi "Dragging" dan "Push Back After Dragging". Objek atas sudah bisa digerakkan (drag). Lakukan hal yang sama pada objek berikutnya. Semua objek atas sudah berhasil di drag. 

10. Rename nama objek pada layer supaya memudahkan objek mana yang akan di drag. 

11. Insert hotspot untuk objek yang bawah. Hotspot shape pilih oval, menyesuaikan objek bawah, letakkan hotspot diatas objek angka 1, copy hotspot untuk objek angka 1. Rename hotspot sesuai objeknya. Hotspot harus lebih besar dari objek. 

12. Saat di geser belum nempel pada objek bawah, membuat interaction pada objek. Pilih objek>interaction>Enter Hotspot (pilih hotspot yang dituju)>Object (angka 1 atas)>Hide>Add. Lakukan hal yang sama pada objek angka 2. Kini objek atas sudah ada interacton nya. 

13. Selanjutnya, insert image untuk tampilan BENAR. Pilih insert>image>tanda benar.png.

14. Lalu kita setting hide tampilan.  Klik image(centang hijau)>Property>Setting>Hide Object When Browsing>Checklist. Lalu kita atur saat menjawab benar, muncul tampilan centang hijau. 

15. Tambahkan interaction pada objek angka 1 atas. Klik angka 1>Interaction>Enter Hotspot (pilih hotspot yang dituju)>Object (tanda benar.png)>Appear>Add.

16. Lalu insert animasi pada objek centang hijau. Klik image>Animation>Zoom (biru)>Add. Kemudian tambahkan 1 jenis animasi lagi. Klik image>Animation>Zoom (orange)>Add. 

17. Klik pada animasi kedua, lalu isi Delay 1.50 s kemudian Save. 

18. Gambar centang hijau layernya kita hide dulu, hapus interaction yang tadi sudah dibuat, lalu buat interaction supata animasinya muncul. Klik angka 1>Interaction>Enter Hotspot (pilih hotspot yang dituju)>Object (tanda benar.png)>Play Animation>Add. Saat menjawab benar muncul centang hijau dan animasinya sudah jalan. Lakukan hal yang sama pada objek angka 2 atas. Klik angka 2>Interaction>Enter Hotspot (pilih hotspot yang di tuju)>Object (tanda benar.png)>Play Animation>Add.

19. Sudah berhasil insert respon jawaban beserta animasi. 

Motion Tween

Motion tween adalah sebuah fasilitas yang telah diberikan oleh flash yang berfungsi untuk membuat pergerakan suatu objek dari posisi awal hingga posisi akhir.

Berikut tutorial untuk membuat sebuah motion tween sederhana :

1. Bukalah software Adobe Flash CS 6 (saya menggunakan versi CS 6)

2. Saya memilih Rectangle Tool untuk membuat objek kotak sederhana dengan warna biru :

3. Pilih Objeknya lalu Convert to Symbol

4. Klik kanan Create Motion Tween

5. Geser Objek kekanan

6. Lakukan tes untuk melihat hasilnya dengan beberapa cara berikut :

Cara Membuat Animasi Frame by Frame

Animasi Frame by Frame adalah membuat sebuah ilusi pergerakan dari sebuah gambar/objek yang diam (still image) frame demi frame-nya. Kumpulan gambar diam (still) yang bergerak dalam satuan waktu yang kontinu akan membentuk sebuah animasi.

Berikut cara membuat animasi Frame by Frame dengan Adobe Flash :



1. Buat sebuah key frame dengan cara Klik kanan Frame >> Insert Keyframe dengan jarak setiap frame 5


2.Tampilkan view grid untuk membantu mengatur posisi gambar dengan cara Klik menuView >> Grid >> ShowGrid (CTRL+’)


3. Klik Frame 1 lalu Import gambar (yang sudah disediakan) dengan cara pilih menu File >> Import >> Import to Stage (CTRL+R) pilih gambar frame 1.png


4. Posisikan gambar frame 1 seperti gambar di bawah ini.


5. Klik Frame 5 lalu Import gambar (yang sudah disediakan) dengan cara pilih menu File >> Import >> Import to Stage (CTRL+R) pilih gambar frame 2.png


6. Posisikan gambar frame 5 seperti gambar di bawah ini.
7. Klik Frame 10 lalu Import gambar (yang sudah disediakan) dengan cara pilih menu File >> Import >> Import to Stage (CTRL+R) pilih gambar frame 3.png


8. Posisikan gambar frame 10 seperti gambar di bawah ini.


9. Klik Frame 15 lalu Import gambar (yang sudah disediakan) dengan cara pilih menu File >> Import >> Import to Stage (CTRL+R) pilih gambar frame 4.png


10. Posisikan gambar frame 15 seperti gambar di bawah ini.

11. Lakukan proses yang sama hingga gambar frame 7.png, lalu tekan ENTER untuk melihat hasil animasi

Pengenalan Tools Adobe Flash

Adobe Flash atau yang dikenal pada awalnya sebagai Macromedia Flash adalah salah satu perangkat lunak komputer yang merupakan produk unggulan dari Adobe Systems. Adobe Flash ini digunakan untuk membuat gambar vektor maupun animasi gambar.

1. Selection tool

kalian bisa menggunakan selection tool ini untuk memilih dan memindahkan obyek yang ada dalam stage adobe flash

2. Sub selection

sedikit berbeda dari selection tools, sub selection tool ini digunakan untuk mengubah bentuk obyek dengan menggunakan edit points

3. Free transform tool

tools yang satu ini dapat kalian gunakan untuk mengubah ukuran atau memutar obyek dalam adobe flash, contohnya skrew, rotation, zoom dll.

4. Lasso tool

lasso tool ini berfungsi untuk menyeleksi sebagian obyek yang akan di edit

5. Pen tool

pen tool dapat akalian gunakan untuk membuat obyek dengan bebas yaitu dengan menggunakan titik titik penghubung.

6. Text tool

text tool ini dapat kalian gunakan untuk memasukkan tulisan ke dalam stage adobe flash

7. line tool

line tool digunakan untuk membuat garis dalam stage

8. Rectangle tools

digunakan jika kalian ingin membuat obyek persegi maupun persegi panjang.  

9. Oval tool

digunakan untuk membuat obyek lingkaran atau elips

10. Pencil tool

pencil tool berfungsi untuk menggambar obyek secara bebas

11. Brush tools

digunakan untuk menggambar obyek secara bebas dengan ukuran ketebalan dan bentuk yang sudah di sediakan dalam flash. 

12. Ink bootle tool

ink bootle tool digunakan untuk memberikan warna pada garis (stroke)

13. Paint bucket tool

digunakan untuk memberikan warna pada obyek secara bebas

14. Eyedropper tool

eye dropper tool digunakan untuk mengambil warna sesuai dengan keinginan kalian

15. Eraser tool

berfungsi untuk menghapus obyek yang tidak di butuhkan

16. Hand tool

digunakan untuk menggeser stage

17. Zoom tool

digunakan untuk memperbesar atau memperkecil ukuran stage

18. Stroke color

stroke color digunakan untuk memilih warna yang kalian gunakan untuk garis tepi

19. Fill color

digunakan untuk memilih warna yang akan kalian gunakan untuk warna obyek