Senin, 10 Agustus 2020

CARA MEMBUAT KUIS DI ADOBE FLASH CS6

 

CARA MEMBUAT KUIS DI ADOBE FLASH CS6




Di era sekarang ini sudah tidak asing lagi dengan perangkat digital. Apalagi dengan hadirnya smartphone yang canggih.
Penggunaan system digital sangat membantu dalam hal kehidupan sehari-hari, begitu pula dengan dunia Pendidikan.
Untuk melakukan evaluasi hasil belajar tidak hanya dilakukan dengan manual saja, akan tetapi bentuk soal digital sangat efesien untuk dilakukan, karena mengingat teknologi yang terus berkembang sehingga pemanfaatan teknologi harus dimaksimalkan.
Oleh karena itu seorang pendidik harus mampu dalam mengelola system digital yang dimaksud, salah satunya adalah membuat soal dalam bentuk digital.
Aplikasi Adobe Flash adalah salah satu aplikasi yang bisa mewujudkan hal tersebut.

Lalu bagaimanakah cara membuatnya?

Yuk, baca baik-baik artikel di bawah ini dan jangan lupa dalam membuatnya harus sabar,,,hehehe.
Langkah-langkah dalam membuat kuis di Adobe Flash:

1.  Sebelum kita membuat kuis, alangkah baiknya kita tentukan terlebih dahulu jumlah kuis yang akan kita buat. Disini yang saya contohkan adalah 10 kuis.
2.  Buatlah sebuah background. Untuk membuat background tersebut bisa langsung di Adobe Flash, Corel Draw, Adobe Ilustrator, Photoshop, dan lain-lain. Dengan menggunakan ukuran gambar: width = 1000px dan height = 650px.

3.  Selanjutnya buka aplikasi Adobe Flash-nya dan buatlah dua buah Layer (Layer 1 dan Layer 2). Ubahlah nama layer tersebut agar lebih enak untuk mengingatnya. Contoh: Layer 1 diubah menjadi background dan Layer 2 menjadi isi kuis.

4.  Masukkan gambar background yang sudah dibuat pada layer background. Kemudian pada frame 12 gunakan perintah klik kanan lalu klik Insert Keyframe untuk mendapatkan gambar yang sama.

5.  Selanjutnya di Layer 2/isi kuis pada frame 1 buatlah identitas mata pelajaran, nama dan kelas dengan menggunakan Text Tool.

6.  Dikolom isian nama dan kelas ubahlah pada properties-nya yang awalnya Static Text menjadi Input Text.

7.  Ubahlah karakter teks isian nama dan kelas yang semula Anti-alias for readability menjadi Use device font.

8.  Tentukan perataan teks isian nama dan kelas.
9.  Pada isian nama dan kelas inputkan variable-nya, untuk memudahkan samakan saja variable-nya. Kolom isian nama variable-nya = nama dan kolom kelas variable-nya = kelas.

10.   Masih di layer isian kuis buatlah tombol mulai, kemudian jadikan symbol tombol tersebut. Dengan cara klik kanan lalu klik Convert to Symbol. Kemudian akan muncul popup, ganti pada kolom name dengan mulai dan untuk type gunakan Button lalu klok OK.

11.   Klik dua kali pada tombol mulai, kemudian ubahlah warna tombol masing-masing berbeda warna. Untuk mengisi tombol yang sama pada Over, Down dan Hit lakukan dengan cara klik kanan lalu klik Insert Keyframe. Dan untuk kembali ke tampilan semula klik Scene 1.

12.   Masih di tombol Mulai silakan klik kanan kemudian klik Action, lalu inputkan “ on (release) { nextFrame(); } “.

13.   Di Layer isian kuis pada frame 1 buatlah action-nya dengan cara klik menu Windows lalu klik Action dan inputkan “ stop();  dan skor=0; “.

14.   Di Layer isian kuis pada frame 2 lakukan klik kanan lalu klik Insert Blank Keyframe lalu buatlah daftar pertanyaannya. Pada masing-masing kotak tombol jadikan sebagai Button dan berikan action “ on (release) { nextFrame(); } “. Pada jawab yang benar tambahkan action-nya “ on (release) { nextFrame(); skor++; } “.

15.   Lakukan hal yang sama pada frame 3 sampai frame 11.
16.   Di Layer isian kuis pada frame 12 lakukan klik kanan lalu klik Insert Blank Keyframe lalu buatlah seperti pada gambar di bawah ini.

17.   Pada kolom isian nama, kelas dan nilai ubahlah pada Properties-nya menjadi Dinamic Text.
18.   Untuk kolom isian nilai inputkan “ hasil “ pada variable-nya,
19.   Buatlah tombol Ulangi dengan menggunakan button dan inputkan action-nya “ on (release) { gotoAndPlay(1); } “.

20.   Pada frame 12 inputkan action-nya “ hasil=skor*10; “.

21.   Lakukan tes melalui tombol kombinasi keyboard Ctrl+Enter.


Semoga bermanfaat.

CARA MEMBUAT STOPWATCH di Adobe Flash CS6

 

CARA MEMBUAT STOPWATCH di Adobe Flash CS6



Cara Membuat StopWatch di Adobe Flash CS6

Pada kesempatan ini admin ingin berbagi tutorial membuat StopWatch. Tentu teman-teman pernah menggunakannya bukan? Termasuk admin juga selalu menggunakannya pada saat praktik ataupun ulangan pada anak didik.

Pada suatu hari admin merasa penasaran dengan aplikasi tersebut, bagaimana cara membuatnya? Setelah mondar mandir dan gentayangan di internet dan...alhamdulillah akhirnya ketemu juga.

Sengaja tutorial ini admin buat untuk mendukung pembelajaran di tingkat SMK yang mempunyai jurusan Multimedia. 

Sebelum ke materi, sebaiknya siapkan dulu fisik, mental plus sabar dalam membuatnya, hehehe.

Lalu bagaimana cara membuatnya? Yuk, ikuti step by stepnya di bawah ini :

Sebagai langkah awal, teman-teman harus mempersiapkan 2 (dua) buah aplikasi. 

Lalu apa saja aplikasi yang dibutuhkan?

  1. Adobe Flash (versi bebas), admin menggunakan Adobe Flash CS6
  2. CorelDraw (versi bebas), tapi disini admin menggunakan CoreDraw X7
Untuk aplikasi yang ke 2 sebenarnya bebas bisa menggunakan apa saja, tapi...karena admin sudah merasa nyaman dengan CorelDraw maka itu yang admin gunakan.

Buatlah sebuah bacground dengan menggunakan aplikasi CorelDraw, seperti gambar di bawah ini.



no. 1
Buatlah 2 (dua) buah layer (layer 1 & layer 2)


gambar 1

no. 2
Masukkan gambar background pada Layer 1 frame 1 dan buatlah sebuah persegi panjang menggunakan ractangle pada Layer 2 frame 1.

no. 3
Klik kanan pada ractangle yang telah dibuat dan pilih Convert to Symbol


gambar 3

no. 4
Pada tampilan popup Convert to Symbol tentukan nama pada kolom Name, kemudian pada Type pilih Movie Clip lalu klik Ok


gambar 4

no. 5
Lakukan klik 2x pada objek (ractangle) yang telah dibuat tadi, sehingga disebelah kiri Scene 1 muncul nama simbol yang telah dibuat tadi


gambar 5

no. 6
Tambahkan Layer. Pada Layer 2 frame 1 buatlah 1 (satu) buah ractangle dan berilah warna yang berbeda, serta letakkan pada posisi yang sama seperti ractangle sebelumnya


gambar 6

no. 7
Lakuan seleksi pada frame 50 yang terdapat pada Layer 1 dan layer 2, lalu klik kanan dan pilih Insert KeyFrame


gambar 7

no. 8
Klik pada frame 50 Layer 2 kemudian pilih tools Free Transform Tool atau tekan huruf Q pada keyboard dan sesuaikan panjang ractangle yang terseleksi sehingga sama panjangnya


gambar 8

no. 9
Pada Layer 2 antara frame 1 dan frame 50 lakukan klik kanan lalu pilih Create Shape Tween


gambar 9

no. 10
Pada tahap ini silakan lakukan tes terlebih dahulu untuk memastikan, apakah langkah-langkah tadi berjalan dengan baik atau tidak. Klik menu Control lalu sorot Test Movie dan pilih in Flash Professional

gambar 10

no. 11
Klik pada Scene 1 untuk mengembalikan pada tampilan awal.


gambar 11

no. 12
Lakukan seleksi di Layer 2 frame 1 dan pada Properties-nya silakan berikan nama pada Instance Name-nya. Contoh "kotakberjalan" tanpa spasi lalu Enter


gambar 12

no. 13
Pilih Text Tool atau tekan huruf T pada keyboard, lalu di Properties tentukan Text Tool-nya menjadi Dynamic Text, lalu tentukan Size font-nya, kemudian klik Embed. Pada tampilan Font Embedding tentunakan jenis hurufnya yang terdapat pada kolom Family dan pada Character ranges centang (ceklis) pada All (585/93514 glyphs), kemudian klik OK. Jangan lupa untuk perataan teks pilih Center


gambar 13

no. 14
Seleksi teks yang telah dibuat dan berikan nama pada Instance Name-nya sesuai dengan fungsinya pada masing-masing teks. Disini sebagai ceontoh saja misalnya untuk jam saya berikan nama jam di Instance name-nya untuk detik = detik dan menit = menit


gambar 14

no. 15
Buatlah sebuah tombol dengan menggunakan ractangle. Aturlah pada properties-nya seperti memilih warna dan penentuan sudut pada ractangle, kemudian klik+drag pada posisi yang diinginkan, lalu berilah nama pada masing-masing tombol seperti Start, Stop dan Reset



gambar 15 dan gambar 16

no. 16
Ubahlah masing-masing tombol (start, stop dan reset) dengan cara seleksi ractangle+namanya lalu klik kanan, kemudian pilih Convert to Symbol


gambar 17

no. 17
Pada tampilan popup Convert to Symbol ubah type-nya menjadi Button, lalu klik OK. Ulanga seperti no. 16 untuk mengubah tombol Stop dan Reset


gambar 18

no. 18
Pada properties ubahlah Instance Name masing-masing tombol. Contoh disini untuk tombol Start = mulai, tombol Stop = berhenti dan tombol Reset = ulangi


gambar 19

no. 19
Tambahkan layer baru (Layer 3). Pada Layer 3 ini difungsikan untuk menulis koding. Caranya klik kanan pada frame 1 yang ada di Layer 3, lalu pilih Action. Untuk Layer 3 ganti namanya menjadi action


gambar 20

no. 20
Masukkan kode berikut. Silakan sesuaikan nama pada masing-masing yang sesuai dengan yang agan buat.


import flash.events.Event;
kotakberjalan.stop();
var second:Number = 0;
var minute:Number = 0;
var hour:Number = 0;
kotakberjalan.addEventListener(Event.ENTER_FRAME,countTime);
mulai.addEventListener(MouseEvent.CLICK,timeStart);
berhenti.addEventListener(MouseEvent.CLICK,timeStop);
ulangi.addEventListener(MouseEvent.CLICK,timeReset);
function countTime(e:Event):void{
if(kotakberjalan.currentFrame == 50){
second++;
if(second>59){
second = 0;
detik.text = "0"+second;
minute++;
if(minute>10){
menit.text = ""+minute;
}
else{
menit.text = "0"+minute;
}
if(minute>59){
minute = 0;
menit.text = "0"+minute;
hour++;
if(hour>=10){
jam.text = ""+hour;
}
else{
jam.text = "0"+hour;
}
}
}
else{
if(second>=10){
detik.text = ""+second;
}
else{
detik.text = "0"+second;
}
}
}
}
function timeStart(e:MouseEvent):void{
kotakberjalan.play();
}
function timeStop(e:MouseEvent):void{
kotakberjalan.stop();
}
function timeReset(e:MouseEvent):void{
kotakberjalan.stop();
detik.text= "00";
menit.text= "00";
jam.text= "00";
}


no. 21
Lakukan tes dengan cara tekan Ctrl+Enter

Taraaaaaaaa...bila berhasil berarti yang Anda lakukan sudah benar.




>>>Selamat Belajar<<<