TUTORIAL MATERI UJIAN PRAKTEK TIK TAHUN 2013-2014

Persiapan Ujian Praktik TIK (Macromedia Flash) : Pada ujian praktik kali ini kita akan membuat animasi interaktif dengan Macromedia Flash. Kita ambil contoh pada Daur Hidup Nyamuk: 1. Kita pelajari lebih dahulu daur hidup nyamuk kita dapat sketsa sbb:

Tahapan : a. b. c. d.

Telur nyamuk Jentik-jentik Kepompong Nyamuk

Kita dapat menambah tahapan dengan membuat detailnya atau mengurangi jumlah tahapan dengan menyederhanakan. Pasa kesempatan kali ini kita sederhanakan saja tahapan tersebut menjadi 2 tahapan atau 2 proses : a. Proses Pertama : telur, menetas menjadi jentik, kemudian menjadi kepompong b. Proses Kedua : kepompong menjadi nyamuk, terbang dan ber-telur Perhatikan kata yang ditebalkan! 2. Proses Pertama : a. Membuat symbol telur : Insert - New Symbol - telur (tipe graphic) – OK

Dengan menggunakan “oval tool” kita gambar elip yang mewakili satu telur nyamuk, kemudian kita warnai dengan warna gradient,dan kita atur dengan gradient transform tool . Perhatikan Gambar di bawah ini!

Gambar Dialog Create New Symbol dan Telur Nyamuk Letakkan gambar telurnya di titik tengah atau pada tanda “+” b. Membuat symbol jentik : Insert - New Symbol - jentik (tipe graphic) – OK Siapkan gambar jentik, potong secukupnya saja, lihat gambar di bawah ini!

Gambar Jentik-Nyamuk dan Dialog Trace-Bitmap File - Import - to Stage maka gambar jentik.jpg akan masuk ke library dan ke stage Modify – Bitmap – Trace Bitmap - muncul dialog (lihat gambar di atas!) Isi dialog tersebut dengan angka/pilihan seperti contoh di atas, klik OK, maka akan diperoleh tampilan sbb. Klik kiri diluar gambar sehingga gambar tidak terseleksi. Klik kanan di tanda panah lalu – cut (lihat gambar kanan) Teruskan menghapus semua bagian gambar yang tidak diperlukan sehingga yang tersisa hanya gambar jentiknya saja:

Tekan tombol “Ctrl+A”, lalu klik menu “Modify – Grup” atau tekan tombol “Ctrl+G”

c. Membuat symbol kepompong : Dengan cara yang sama dalam pembuatan symbol jentik kita buat symbolkepompong. Siapkan gambar kepompong nyamuk kemudian lakukan “trace bitmap” dan hapus bagian gambar yang tidak diperlukan sehingga diperoleh kepompong sbb. : Modify – Bitmap – Trace Bitmap

Menjadi

Tipe Bitmap

Tipe Vektor

Tekan tombol “Ctrl+A”, lalu klik menu “Modify – Grup” atau tekan tombol “Ctrl+G” d. Kita buat symbol proses1 Agar didalam proses1 lebih menarik maka perlu kita tambahkan animasi jentikbergerak untuk menunjukkan bahwa jentik itu hidup, dan animasi jentik-berenang untuk menunjukkan adanya aktifitas dan perkembangan dari jentik kecil menjadi jentik besar. 1. Kita buat symbol jentik-bergerak Insert – New symbol – jentik-bergerak (tipe movieclip) – OK Masukkan symbol jentik ketengah-tengah stage atau pada tanda “+” Klik-kanan pada frame 5 – insert keyframe Klik-kanan pada frame 3 – insert keyframe Tekan “Ctrl+B” lalu edit agar ekor jentik kekiri Klik-kanan pada frame 7 – insert keyframe Tekan “Ctrl+B” lalu edit agar ekor jentik kekanan Perhatikan gambar dibawah ini!

Timeline

Frame -1

Frame-3

Frame-5

Frame-7

2. Kita buat symbol proses1 Symbol proses1 berisi : telur tadinya terapung turun ke dalam air ukurannya membesar kemudian berubah bentuk menjadi jentik yang bergerak, kemudian berenang, dan diakhiri dengan perubahan menjadi kepompong yang kembali terapung. Animasi telur turun bertambah besar (motion-tween-scale): Insert – New symbol – proses1 (tipe movieclip) – OK Masukkan telur pada posisi x=-10 dan y=-150 dengan ukuran W=20 dan H=80

Klik-kanan pada frame-50 – insert keyframe Pindahkan telur ke posisi x=-15 dan y=-40 dengan ukuran W=30 dan H=80 Klik-kanan pada frame-1 – Create Motion Tween Animasi telur berubah menjadi jentik (tween-shape): Klik-kanan pada frame-51 – insert keyframe Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kanan pada frame-100 – insert keyframe Hapus symbol telur, masukkan symbol jentik, Tentukan posisi jentik x=-15 dan y=-40 dan ukurannya W=30 dan H=80 Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kiri pada frame-51 – pada bagian property-tween – pilih shape Lihat gambar di bawah ini!

Animasi jentik-bergerak berubah arah kekanan (motion-tween): Klik-kanan pada frame-101 – insert keyframe Hapus symbol jentik, masukkan symbol jentik-bergerak menghadap ke atas Tentukan posisi symbol jentik-bergerak x=-15 dan y=-40 dan ukurannya W=30 dan H=80 Klik-kanan pada frame-150 – insert keyframe Putar symbol jentik-bergerak (90o) sehingga menghadap ke kanan lurus Klik-kanan pada frame-101 – Create Motion Tween Animasi jentik berenang dan bertambah besar (motion-guide-scale): Perhatikan gambar di bawah ini (pada Timeline) :

“Insert Layer”

“Add Motion Guide”

“Insert Layer Folder”

Klik icon “Add Motion Guide” sehingga muncul layer baru di atas layer-1 Untuk sementara layer-1 kita kunci/locked Klik-kanan pada frame-150 (layer-guide) – insert keyframe Gambar jalur perjalanan jentik berenang, lihat contoh berikut : Jalur dibatasi titik awal dan titik akhir. Antara titik awal dan titik akhir tidak boleh terputus, dan tidak boleh ada cabang yang merupakan jalur buntu Titik Akhir Titik Awal Kunci/locked pada layer-1 kita lepas, layer-guide kita kunci/locked Klik-kanan pada frame-400 (layer-1) – insert keyframe Klik-kanan pada frame-400 (layer-guide) – insert frame Klik-kanan pada frame-150 – Create Motion Tween Letakkan symbol jentik-bergerak pada Titik Awal Klik-kiri pada frame-400 Letakkan symbol jentik-bergerak pada Titik Akhir

Animasi jentik-bergerak berubah arah ke atas (motion-tween): Klik-kanan pada frame-401 – insert keyframe Klik-kanan pada frame-450 – insert keyframe Putar symbol jentik-bergerak (-90o) sehingga menghadap ke atas lurus Tentukan posisi symbol jentik-bergerak x=-25 dan y=-75 dan ukurannya W=50 dan H=150 Klik-kanan pada frame-401 – Create Motion Tween Animasi Jentik-bergerak berubah menjadi kepompong (tween-shape): Klik-kanan pada frame-451 – insert keyframe Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kanan pada frame-500 – insert keyframe Hapus symbol jentik-bergerak, masukkan symbol kepompong, Tentukan posisi symbol kepompong x=-50 dan y=-60 dan ukurannya W=100 dan H=120 Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kiri pada frame-451 – pada bagian property-tween – pilih shape Lihat gambar di bawah ini !

Animasi kepompong bergerak naik/terapung (motion-tween-scale): Klik-kanan pada frame-501 – insert keyframe Klik-kanan pada frame-550 – insert keyframe Pindahkan kepompong ke posisi x=-50 dan y=-150 dengan ukuran W=120 dan H=150 Klik-kanan pada frame-501 – Create Motion Tween Pada frame-550 – klik-kanan – Actions – tulis “stop();”

3. Proses Kedua : a. Kita buat symbol nyamuk : Insert - New Symbol - nyamuk (tipe graphic) – OK

Siapkan gambar nyamuk (nyamuk.jpg), potong secukupnya saja, lihat gambar di bawah ini! File - Import - to Stage maka gambar “nyamuk.jpg” akan masuk ke library dan ke stage Lakukan operasi “Trace Bitmap” dan hapus bagian gambar yang tidak diperlukan sehingga diperoleh gambar nyamuk sbb. :

Modify – Bitmap – Trace Bitmap

Menjadi

Tipe Vektor

Tipe Bitmap

b. Kita buat symbol sayap: Insert – new symbol – sayap (tipe movieclip) – OK Buat gambar seperti pada contoh Frame-1 di bawah ini, letakkan di tengah-tengah Klik-kanan pada frame-3 – Insert keyframe Edit gambar seperti pada contoh Frame-3 dibawah ini Klik-kanan pada frame-5 – Insert keyframe Hapus gambar sayap, Copy - “Paste-in-place” – dari frame-1 Klik-kanan pada frame-7 – Insert keyframe Hapus gambar sayap, Copy - “Paste-in-place” – dari frame-3

Frame -1 Frame-3 Frame-5

Frame-7

c.

Kita buat symbol proses2: Symbol proses2 berisi : animasi kepompong yang berubah bentuk menjadi nyamuk, kemudian nyamuk terbang dan bertambah besar, dan diakhiri dengan nyamuk bertelur. Animasi kepompong berubah menjadi nyamuk(tween-shape): Insert – New symbol – proses2 (tipe movieclip) – OK Masukkan symbol kepompong pada posisi dan ukuran sama dengan posisi akhir symbol proses1 yaitu : Pada posisi x=-50 dan y=-150 dengan ukuran W=120 dan H=150 Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kanan pada frame-50 – insert keyframe Hapus gambar kepompong, masukkan gambar nyamuk pada posisi kepompong tersebut. Tekan “Ctrl+B” atau “Klik menu – Modify – break apart” Klik-kiri pada frame-1 Pada property – Tween – pilih Shape Animasi nyamuk terbang (motion-guide): Klik-kanan pada frame-51 – insert keyframe Hapus sayap nyamuk, ganti dengan symbol sayap (tipe movieclip) Klik-kanan pada frame-51 – insert keyframe Karena symbol nyamuk bentuknya akan berubah apabila dianimasikan dengan layer guide, maka rute nyamuk terbang cukup menggunakan motion tween Klik-kanan pada frame-100 – insert keyframe Pindahkan posisi nyamuk ke kanan atas Klik-kanan pada frame-51 – Create MotionTween Klik-kanan pada frame-101 – insert keyframe Balik arah nyamuk menghadap ke arah kiri Klik-kanan pada frame-300 – insert keyframe Pindahkan posisi nyamuk ke kiri atas

Klik-kanan pada frame-101 – Create MotionTween Klik-kanan pada frame-301 – insert keyframe Balik arah nyamuk menghadap ke arah kanan Klik-kanan pada frame-450 – insert keyframe Pindahkan posisi nyamuk ke tengah atas Klik-kanan pada frame-301 – Create MotionTween Klik-kanan pada frame-451 – insert keyframe Klik-kanan pada frame-500 – insert keyframe Pindahkan posisi nyamuk ke posisi awal (pertama kali) Klik-kanan pada frame-451 – Create MotionTween Klik-kanan pada frame-501 – insert keyframe Balik arah nyamuk menghadap ke arah kanan Klik-kanan pada frame-550 – insert keyframe Pindahkan posisi nyamuk ke atas tengah Klik-kanan pada frame-501 – Create MotionTween Pada frame-550 – klik-kanan – Actions – tulis “stop();”

4. Proses Ketiga a. Kita buat symbol button Klik Scene 1 Klik Window – Common Libraries – Buttons Pilih jenis tombol – Oval Drag 2 buah tombol (missal oval-blue dan oval-rust) ke stage Tombol Biru kita beri instant name = “proses1” Tombol Rust kita beri instant name = “proses2” Lihar Gambar berikut ini : Masukkan symbol proses1 dan proses2, atur letakkan dengan format rata atas dan center horizontal

“proses1” beri nama “telur” “proses2” beri nama “nyamuk” Klik-kanan pada frame-1 – Actions, tuliskan scipt berikut ini :

telur.stop(); nyamuk.stop(); telur._visible = false;

nyamuk._visible = false; proses1.onRelease = function() { telur._visible = true; nyamuk._visible = false; telur.play(); nyamuk.stop(); proses1._visible = false; proses2._visible = true; } proses2.onRelease = function() { telur._visible = false; nyamuk._visible = true; telur.stop(); nyamuk.play(); proses1._visible = true; proses2._visible = false; } b.

Tambahkan Background Siapkan gambar background yang sesuai File - Import – Import to Library Insert layer, pindahkan layer-2 di bawah layer-1 Drag background ke layer-2

c.

Membuat File Publikasi File – Publish Setting – Pilih output yang diinginkan Misal kita pilih (*.swf, *.html, *.exe) Klik – Publish - OK