Showing posts with label Media Pembelajaran. Show all posts
Showing posts with label Media Pembelajaran. Show all posts

Cara Membuat Kuis Pilihan Ganda di Adobe Flash CS6 dengan Actionscript 2

Kuis Pilihan ganda di Adobe Flash CS6 pake AS2

Membuat Kuis Pilihan Ganda pertama kali saya pelajari ketika magang/prakerin di Sleman, Yogyakarta. Satu paket dengan Media Interaktif nya.

Tapi, pada tutorial ini hanya membahas bagaimana membuat Kuis/Soal Pilihan Ganda sesuai request dari teman kita 😙 Muhammad Indra.

Tutorial Membuat Kuis/Soal Pilihan Ganda di AdobeFlash CS6

Seperti biasanya, tutorial terbagi atas 2 tahap yaitu Desain dan Actionscript. Untuk membuat Kuis/Soal Pilihan Ganda tersebut, saya menggunakan Actionscript 2.


Tahap 1 - Bikin Desain Kuis/Soal Pilihan Ganda

1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x 600 satuan pixels)
2. Buatlah layer baru(bg) dan tambahkan gambar yang berbeda pada Frame 1(untuk opening), Frame 2-6(untuk soal/kuis) dan Frame 7 untuk hasil skornya nanti.
Buatlah layer baru dengan nama bg

3. Buat layer baru lagi, beri nama teks. Kemudian isi teks pada layer teks di frame 1 tersebut
buat layer teks dan isi tulisan di frame 1

4. Masih pada layer teks, frame 1. Buatlah teks dengan tipe Input Text dan tambahkan nama variabelnya. Contoh : namanya
Buatlah teks dengan tipe Input Text dan tambahkan nama variabelnya

5. Buat layer baru lagi, dan buatlah tombol 'Mulai' dengan Rectangle. Cara membuat tombol dapat anda lihat ditutorial sebelumnya(membuat Media Interaktif).
buatlah tombol 'Mulai' dengan Rectangle.

6. Jangan lupa, isikan nama Instance pada tombol Mulai seperti pada gambar.
nama Instance pada tombol Mulai

7. Clear Frames pada Frame 2 hingga 7 di layer Tombol, agar tombol 'Mulai' hanya muncul di Opening/Awal.
Clear Frames di Frame 2 sampe 7, layer Tombol

8. Isilah teks berupa soal dan pilihan jawaban dari Frame 2 hingga 6.
Isilah teks berupa soal dan pilihan jawaban

9. Pada layer tombol, buatlah tombol untuk pilihan jawaban A hingga D.
Pada layer tombol, buatlah tombol untuk pilihan jawaban A hingga D

10. Sekarang, tinggal copy paste deh pilihan a,b,c dan d ke Frame 3 hingga 6. Kemudian atur posisi tombolnya agar rapi.
copy frame biar lebih cepat

11. Jangan lupa, isi nama instance dari tombolA, tombolB, tombolC dan tombolD yang nantinya berfungsi dalam pembuatan kode script.
berikan nama instance dari tombolA, tombolB, tombolC dan tombolD

Hampir selesai, tinggal edit bagian frame terakhir(7). lanjut's 😆

12. Pada layer teks, buatlah teks tipe Input Text dengan nama variabel sebelumnya.

Sehingga, ketika kita masukkan nama dibagian opening. Namanya akan muncul di frame terakhir ini.
buatlah teks tipe Input Text dengan nama variabel sebelumnya

13. Masih pada layer yang sama, buat teks dengan tipe Dynamic Text dan nama variabelnya skor untuk menampilkan nilainya disini.

14. Dan yang terakhir, pake Dynamic Teks juga. tapi nama variabelnya beda ya 😅. Contoh : keterangan

15. Agar dapat kembali ke menu awal, kita tambahkan tombol Ulang dengan nama instance ulangi_btn.

Huh, agak panjang ya 😁 padahal sedikit aja kok bila dipraktekan.. Sudah selesai nih tahap 1, lanjut tahap akhir untuk ActionScript.


Tahap 2 - Menambahkan ActionScript 2.0 Kuis/Soal Pilihan Ganda

1. Buatlah layer baru(as2), klik kanan pada frame pertama - Pilih Actions - kemudian isi kode script dibawah ini.
stop();
score = 0;
mulai_btn.onPress = function(){
     nextFrame();
};

Keterangan Kode :
  • stop(); agar ketika di Test Movie(CTRL + F5) berhenti pada frame tersebut.
  • score = 0; membuat variabel dengan nama score dan nilainya 0;
  • mulai_btn.onPress = function(){ nextframe(); }; agar ketika tombol ditekan, akan berpindah ke Frame selanjutnya.
Layer baru as2 dan kode script di frame pertama

2. Lanjut, kode script Soal/Kuis nya untuk Frame 2 sampai 6.
kode script Soal/Kuis nya untuk Frame 2 sampai 6

stop();
onEnterFrame = function(){
 skor = +score;
};

tombolA.onPress = function() {
 nextFrame();
};

tombolB.onPress = function() {
 nextFrame();
};

tombolC.onPress = function() {
 nextFrame();
};

tombolD.onPress = function() {
 score += 20;
 nextFrame();
};
Keterangan Kode :
  • onEnterFrame merupakan sebuah event handler ketika masuk pada Frame tersebut. onEnterFrame akan terus melakukan perulangan pada perintah skor = +score; sehingga nilai Score yang awalnya 0 akan terus bertambah tiap Frame.
  • score += 20; artinya variabel score akan bertambah 20 poin. Perintah score += 20; hanya ditambahkan pada tombol jawaban yang benar.

3. FINAL, tambahkan kode script berupa percabangan pada frame 7.

if (score>=70) {
 keterangan = "Perfect! Pertahankan Prestasi Anda!";
 loadMovieNum("winner.swf", 1);
}

if (score<=60) {
 keterangan = "Tidak cukup. Kasihan banget, ya!";
 loadMovieNum("loser.swf", 1);
}

ulangi_btn.onPress = function() {
 gotoAndStop(1);
};

Keterangan Kode :
  • LoadMovieNum berfungsi untuk memanggil file berformat swf.
File bahan dan Demo nya dapat anda unduh/download secara Gratis di akun Github saya. Ukuran semua file, 12mb aja kok. 😁

Itulah tutorial Lengkap untuk Membuat Kuis/Soal Pilihan Ganda di Adobe Flash CS6 dengan ActionScript 2.0 . Jangan lupa Follow blog saya, hehe..

Cara Membuat Animasi Loading di Adobe Flash CS6

Animasi Loading di Flash

Setelah beberapa kali membuat tutorial Animasi Power Point, kini kita akan kembali belajar salah satu Animasi yang sering dijumpai pada Aplikasi atau Game berbasis Android maupun Desktop.. yaitu Animasi Loading/Please Wait... 😎

Jika pada tutorial sebelumnya kita membuat Media Interaktif di Adobe Flash CS6, mungkin akan lebih menarik jika ditambahkan animasi Loading seperti yang ditunjukkan pada Gambar GIF diatas..

Animasi Loading pertama kali saya buat saat Magang di PPPPTK Seni dan Budaya Yogyakarta, Sleman waktu kelas 2 SMK.. Gak ada yang ngajarin, tapi dari inisiatif sendiri ketika belajar teknik Masking di Flash terciptalah Animasi Loading yang keren, 😁 hehe.. 



Tutorial Membuat Animasi Loading di Adobe Flash CS6

1. File - New Document - Actionscript 3.0 dengan ukuran dan warna background terserah anda...
Actionscript 3.0 Flash CS6

2. Ubah nama layer pertama menjadi bg awal . Lalu buatlah Kotak dengan Style Solid dan Sudut lengkung sekitar 17.00 (gak wajib).. kemudian klik kanan pada Frame 100 - Insert Frame ..
Lalu buatlah Kotak di layer Pertama

3. Buat layer baru, kemudian Buatlah kotak warna hitam dengan ukuran lebar yang sama dengan bg awal... tetapi letakkan pada samping kiri seperti pada gambar di bawah ini...
Buatlah kotak warna hitam di Layer Baru

SARAN : Gunakan Tombol Shift ketika memindahkan posisi suatu objek agar hasilnya Rapi...

4. Ubah nama layer2 menjadi animasi...Lalu Insert Keyframe(F6) di Frame 100.. Kemudian pindahkan posisi kotak hitam menutupi bg color....
Insert Keyframe(F6) di Frame 100

5. Setelah itu, klik kanan diantara frame 2-99 layer animasi - pilih Create Classic Tween... Sekarang coba CTRL + ENTER untuk melihat hasilnya, kotak hitam bergerak dari kiri ke kanan..
pilih Create Classic Tween

6. Selanjutnya, buat Layer Baru... Klik kanan pada Layer bg awal - Pilih Copy Frames..
Jangan Lupa, centang gembok/kunci hitam terlebih dahulu agar layer bg awal tidak bisa diedit lagi..
Copy Frames bgcolor

7. Ubah nama layernya menjadi masking ... klik kanan pada Frame 1, Paste Frames... kemudian jangan lupa gembok juga...
Layer Masking di Flash

8. Selanjutnya, klik kanan pada layer Masking... Pilih Mask .. Selamat deh, sekarang anda berhasil membuat animasi Loading Sederhana di Flash CS6... Tidak mau berhenti disitu, kita akan menambahkan Animasi Persen...😏
Teknik Masking di Flash

9. Buat layer baru dengan nama Persen... Lalu buat Teks 1% dengan Font, Style, Color dan Ukuran sesuai selera...
buat teks 1 persen di layer baru

10. Kemudian, pilih semua Frame dari 1-100 pada Layer Persen... Tekan Tombol F6 (Insert Keyframe)
Tekan Tombol F6 (Insert Keyframe) di frame persen

Setelah itu, silahkan ubah angka dari 1 hingga 100 setiap Keyframe yang telah kalian Buat.. Sabar adalah kuncinya 😝 mungkin sekitar 5 Menit doang..

Agar Angka Persennya Rata, gunakan Ruler caranya pilih View - Rulers (CTRL + ALT + SHIFT + R)... 

Jika tidak ingin Animasi Loadingnya melakukan Looping atau Perulangan, klik kanan pada Frame 100 layer Animasi - pilih Actions - tambahkan script stop();
pilih Actions - tambahkan script stop();

Itulah cara Mudah Untuk Membuat Animasi Loading di Flash CS6 dengan teknik Masking.. Penjelasannya mungkin agak panjang, tapi sebenarnya caranya sangat gampang kok 😉 asal Niat mau Buat Animasi...

Ayo buat anak-anak Multimedia juga harus coba tutorial ini, semoga bermanfaat ya.. sampai jumpa di tutorial lainnya, see you 😭..

Cara Membuat Media Pembelajaran Interaktif di Power Point

Cara Membuat Media Pembelajaran Interaktif di Power Point
Pada tutorial sebelumnya, kita telah belajar Membuat Media Pembelajaran atau Interaktif di Adobe Flash.

SEKARANG, kita buat Media Interaktif di PowerPoint yuks.. 😁 Untuk pembuatannya lebih Mudah dan Sederhana dibandingkan membuat di Adobe Flash..

Dijamin Presentasi anda akan jauh lebih Menarik jika disuguhkan dalam bentuk Media Interaktif 😃

Teman-teman Anda atau Audiens gak bakal ketiduran atau bosen melihat Anda Berbicara di Depan serta...

Materi yang Anda sampaikan dengan Media Interaktif lebih mudah Dipahami dan Dimengerti sehingga Presentasi di Depan kelas dalam Kurun Waktu yang singkat tidaklah sia-sia ...

Jadi, saya harus Bagaimana ?? Ayo buruan belajar Membuat Media Pembelajaran Interaktif...! 😆

Tutorial Membuat Media Pembelajaran Interaktif Power Point 


1. Hal pertama yang perlu kalian lakukan adalah menjalankan aplikasi Microsoft Power Point (Pada kasus ini saya menggunakan Power Point 2016)

2. Buatlah 4 Slide Baru dan atur Background sesuai Selera. Kemudian buatlah 3 Kotak(Rectangle) pada menu Insert - Shapes - Rectangle. Berilah nama masing-masing hal1 hingga hal3 yang nantinya digunakan sebagai tombol menu.
membuat 4 slide dan 3 tombol untuk menu

3. Isilah konten berupa teks atau gambar pada semua Slide. Kembali ke Slide-1, klik kanan pada tombol hal1 - Pilih bagian Hyperlink...  
penggunaan hyperlink pada tombol di power point

4. Pilih Place in This Document - Pada Slide Titles, pilih halaman 1 dan OK. Cara ini bertujuan agar saat ketika tombol hal1, otomatis akan berpindah Slide ke-2 yang Berisi HAL 1 seperti pada gambar..
Mengatur Letak Hyper Link
Lakukanlah hal yang sama pada tombol hal2 dan hal3. Mudah bukan ? hanya dengan fitur Hyperlink kita bisa membuat Media Pembelajaran dengan Cepat.

Namun agar Media Interaktif yang kita buat lebih menarik, sebaiknya kita tambahkan tombol navigasi berupa tombol back(kembali), home(slide pertama) dan next(lanjut) pada setiap halaman.

Simak tutorial berikut ini...

Cara Membuat Tombol Navigasi di Power Point

Untuk membuat tombol navigasi ada 2 cara, cara pertama yaitu menggunakan cara sebelumnya yaitu dengan membuat rectangle dan diberi hyperlink.

Cara kedua dengan membuat tombol yang telah tersedia pada Shapes..

1. Pilih Insert - Shapes - Action Buttons. Akan ada beberapa tombol yang dapat anda gunakan sebagai navigasi. Pada kasus ini, kita akan membuat tombol Navigasi pada Halaman 1.
Membuat Tombol Action

2. Pilih salah satu Tombol dan letakkan pada halaman 1, maka akan otomatis muncul Action Settings seperti pada gambar berikut.

Pada bagian Hyperlink to, pilih Slide... agar anda dapat memilih Slide yang ingin ditampilkan ketika tombol itu di klik.
Action Settings
3. Untuk menambahkan efek suara atau Sound Effect pada setiap tombol ketika di klik, masih pada bagian Action Settings - conteng pada bagian Play Sound dan pilih Efek suara yang anda inginkan(hanya mendukung format .wav).

KESIMPULAN


  • Fitur utama yang sangat PENTING dalam pembuatan Media Interaktif adalah Objek berupa Tombol yang bisa Anda buat pada Tab Insert - Shapes...
  • Agar tombol tersebut dapat berfungsi ketika di click, Hyperlink lah yang mampu menjawabnya 😃 ...
Itulah Cara yang dapat anda lakukan untuk membuat Media Pembelajaran Interaktif di PowerPoint.

Ada beberapa fitur yang tidak saya sebutkan di Artikel ini, makanya tonton Video Tutorial yang baru saya buat Bulan April, 2018 ini ya .


Semoga artikel ini dapat membantu dan bermanfaat bagi sobat 😀. Jangan lupa untuk ikuti terus tutorial selanjutnya.

Cara Membuat Media Pembelajaran di Flash untuk Pemula

cara-membuat-media-interaktif-di-flash-pemula
Dengan semakin berkembangannya Ilmu Pengetahuan dan Teknologi dapat membantu anda dalam proses belajar mengajar. Salah satu cara agar proses pembelajaran menjadi lebih menarik, jelas dan interaktif yaitu...

...dengan menggunakan Media Pembelajaran/Media Interaktif sebagai alat bantu proses mengajar.

Selain itu, dengan adanya Media Interaktif ini dapat digunakan sebagai Presentasi, Tutorial, Quiz dan lain sebagainya.

Dalam tutorial kali ini, akan saya suguhkan tutorial Cara Membuat Media Pembelajaran atau yang lebih dikenal dengan sebutan Media Interaktif, di Adobe Flash untuk Pemula berikut ini :

Tutorial Cara Membuat Media Pembelajaran di Flash 

1. Buka Aplikasi Adobe Flash (saya menggunakan Flash CS6). Pilih Actionscript 2.0
Pilih Actionscript 2.0

2. Pada bagian Properties, ubah ukuran area kerja(kotak warna putih yang biasanya terletak di tengah) di "Size" menjadi 800 x 600 (satuan yang digunakan pixels). 
properties-document-settings

3. Pada bagian "Timeline", ubah nama layer dengan cara double klik kemudian isikan nama "BG" sebagai background pada Media Interaktif nantinya. 
Lalu, untuk memasukkan gambar ada 2 cara, yaitu dengan Import to Stage (Ctrl+R) atau Import to Library. Pada Kasus kali ini, saya menggunakan Import to Library
Import-to-Library

4. Perbedaannya itu sendiri, untuk to Stage gambar akan langsung masuk di area kerja sedangkan to Library akan otomatis tersimpan pada bagian Library lalu untuk memasukkannya dengan menggeser/drag gambarnya ke area kerja.
perbedaan-stage-dan-library

5. Atur posisi dan ukuran gambar agar sesuai dengan area kerja.
posisi-dan-ukuran-gambar-background

6. Pada Frame ke-21 dan ke-41, klik kanan - insert keyframe. Lalu pada bagian Properties, beri nama label "bg1" dan "bg2" maka akan ada tanda bendera warna merah.
Insert-Keyframe-pada-layer-background

7. Sekarang, buat layer baru. Caranya klik ikon seperti pada gambar di bawah ini..
cara-membuat-layer-baru-di-flash
Kemudian, ubah namanya menjadi "KONTEN" dan pada frame ke-41, klik kanan-pilih insert frame (atau tekan F5). Setelah itu, buatlah Teks, gambar pada Layer Konten tersebut.
buat-teks-dan-gambar-di-layer-Konten

8. Buat Layer Baru dengan Nama "TOMBOL" dan Insert Frame di frame-41. Kemudian pada Layer Tombol tersebut, buatlah kotak dengan rectangle options seperti pada gambar..
tombol-di-layer-tombol

9. Klik kanan pada kotak tersebut - pilih Convert to Symbol - isikan  dengan nama "bab1_btn" dan pilih tipe "button" seperti pada gambar di bawah, lalu OK..
convert-to-symbol-button

10. Tekan Klik Ganda atau Double Click pada button "bab1_btn" untuk mengedit tombol. Maka akan muncul seperti pada gambar di bawah. Kemudian, Isikan Teks berupa "BAB 1".
Setelah itu, klik kanan pada bagian Over dan Down - pilih insert keyframe (F6)
cara-mengedit-tombol-di-flash
Keterangan ;
UP        : Kondisi Normal
OVER  : Kondisi ketika kursor diatas tombol
DOWN : Kondisi ketika tombol ditekan 
Untuk mengetahui perbedaanya, coba anda ubah warna atau bentuk dari tombol pada bagian OVER dan DOWN. 
Animasi-Effect-Tombol
Seperti anda lihat, untuk kondisi normal saya menggunakan warna "putih", untuk kondisi ketika kursor diatas tombol berwarna "Biru Tua" dan ketika di klik warnanya berubah menjadi "abu-abu". 

Setelah Selesai Mengedit Tombol, tekan Scene 1 untuk kembali... 

11. Insert Keyframe (F6) pada Frame ke-21 dan ke-31 untuk layer tombol dan konten
insert-keyframe-di-layer-tombol-dan-konten

12. Pada Frame ke-21. Buatlah Teks pada Layer konten dan buatlah tombol navigasi "kembali" pada Layer tombol untuk membuat Halaman BAB1
Membuat-Halaman-BAB-1

13. Begitu pula untuk frame ke-31. Buatlah Teks pada Layer konten dan buatlah tombol navigasi "kembali" pada Layer tombol untuk membuat Halaman BAB2. Jangan Lupa beri masing-masing nama label "bab1" dan "bab2"..
Membuat-Halaman-BAB-2

Tekan "Ctrl + Enter" untuk melihat hasilnya. Namun hasilnya, tombol yang kalian buat tidak berfungsi dan Halamannya Berpindah berulang-ulang. Untuk melakukannya kita akan lanjut ke Cara Memberikan ActionScript pada Tombol di Flash

BACA JUGA : CARA MEMBUAT KALKULATOR SEDERHANA di Flash


Memberikan ActionScript pada Tombol di Adobe Flash

Setelah anda berhasil belajar Import,Timeline,Layer,Label,Button dan Teks pada tutorial sebelumnya. Kali ini kita akan menuju langkah terakhir untuk membuat Media Interaktif/Pembelajaran yaitu memberikan ActionSript di setiap Tombol sebagai berikut :

1. Buat Layer baru dengan nama "AS" dan pada Frame ke-1, klik kanan - pilih actions - lalu ketikkan command/perintah berikut :
stop();
fscommand("fullscreen", "true");
actionscript-untuk-layer-AS
Keterangan :
a) perintah stop(); digunakan agar waktu dijalankan, animasi tidak berulang-ulang/berpindah halaman. Untuk melihat perbedaanya. Silahkan tekan Ctrl + Enter
b) perintah fscommand("fullscreen","true"); digunakan ketika Media Interaktif ini di Publish menjadi file exe maka akan otomatis menjalakan secara layar penuh.

2. Untuk tombol BAB 1, klik kanan - pilih actions - ketikkan perintah berikut ini..
on (release) {
    gotoAndStop("bab1");
}
Memberi-perintah-pada-tombol-BAB1
Untuk tombol BAB 2, cukup anda ubah menjadi : 
on (release) {
    gotoAndStop("bab2");
}

atau langsung menggunakan lokasi frame berada seperti ini :
on (release) {
    gotoAndStop(31);
}

3. Langkah akhir, klik File - Publish Settings (Ctrl + Shift + F12)- conteng pada bagian .swf, .html, dan .exe dan Atur Lokasi penyimpanan dengan klik tombol Folder warna Kuning. Setelah itu, Klik Tombol PUBLISH...
Hasil-Akhir-Media-Interaktif
4. Hasil Publish sebagai berikut. Coba Anda jalankan MediaInteraktif.exe maka akan otomatis Layar Penuh (Fullscreen) seperti yang saya katakan sebelumnya. 
Hasil-dari-Publish-Settings
Sekian Tutorial Cara Membuat Media Pembelajaran atau Media Interaktif di Adobe Flash untuk Pemula. 😁

Semoga dapat membantu dan bermanfaat bagi semua kalangan, terima kasih. Untuk segala bentuk pertanyaan silahkan masukkan pada kolom Komentar 🙌