TEKNIK CEPAT BELAJAR ADOBE FLASH - … dari Macromedia Flash adalah Macromedia flash 8. Sekarang...

Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia

Copyright © 2010-2012 JasaMultimedia.Com

2012

By. Dedy Izham http://blog.jasamultimedia.com

TEKNIK CEPAT BELAJAR

ADOBE FLASH Mempelajari Adobe Flash itu ternyata sangat mudah dan menyenangkan, dalam buku ini dibahas beberapa teknik bagi anda yang belum mengenal sama sekali mengenai Adobe Flash. Agar anda bisa mahir menggunakan flash dengan teknik-teknik sederhana yang ditulis disini. Tunggu apa lagi, sisihkan waktu anda untuk membaca tekniknya. SELAMAT BELAJAR !!!

http://blog.jasamultimedia.com/

ii Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia


KATA PENGANTAR

Puji syukur penulis ucapkan kepada ALLAH .SWT, atas rahmat dan karunia-NYA. Akhirnya

karya tulis tutorial sederhana ini bisa penulis selesaikan dalam waktu kurang dari 1 bulan. Karya tulis

tutorial ini penulis buat dengan penuh perasaan. Hehehe okey deh..., sekian dulu kata pengantar

dari saya. Lagian anda juga gak bakalan baca kata pengantar ini. Bacanya paling singkat-singkat

doank. Makanya sedikit aja deh kata pengantarnya.

Yang penting disini, saya selaku penulis mengucapkan. SELAMAT BELAJAR !!!

Keberhasilan tidak datang dengan sendirinya.

Keberhasilan datang dari sebuah pengorbanan.

Pengorbanan yang dibayar dengan mahal,

Akan menuai hasil Maksimal.

SELAMAT !!! Anda berhak menyebarkan Ebook sederhana ini sebagai

hadiah kunjungan pada website anda. Dengan syarat, anda tidak diperbolehkan

mengubah atau menulis ulang tanpa seizin pihak JASAMULTIMEDIA.COM

Dapatkan Video Tutorial Pendukung Buku Ini di:

http://belajar.jasamultimedia.com

http://belajar.jasamultimedia.com/

iii Take easy With Technology | Belajar Murah dan mudah berbasis Multimedia


DAFTAR ISI

Cover............................................................................................................................. ......................... i

Kata pengantar ....................................................................................................................................... ii

Daftar isi ............................................................................................................... ................................ iii

Sekilas tentang FLASH ....................................................................................................... ................... 1

BAB I Pengenalan Adobe Flash ................................................................................................. ......... 2

1.1 Halaman Awal .......................................................................................................... .......... 2

1.2 Lingkungan Kerja Adobe Flash CS3 .................................................................................. 2

1.3 Tools Box ................................................................................................................ ........... 3

1.4 Library .......................................................................... ...................................................... 4

1.5 ActionScript ........................................................................................................................ 4

1.5.1 Event ........................................................................ ....................................... 5

1.5.2 Target ............................................................................................................. 5

1.5.3 Action ............................................................................................................ 5

BAB II Membuat Animasi Sederhana ..................................................................................... ......... 6

2.1 Frame dan Keyframe ................................................................................................ ......... 6

2.2 Motion Tweening .............................................................................................................. 9

2.2.1 Efek Fade in dan Fade out .............................................................................. 9

2.2.2 Membuat Kincir ............................................................................................ 12

2.2.3 Obyek Mengikuti Lintasan (Path) ................................................................ 16

2.3 Motion Shape ................................................................................................................... 18

2.3.1 Mengubah Bentuk Obyek ............................................................................ 18

2.4 Masking ........................................................................................................................... 20

BAB III ActionScript ........................................................................................................................ 21

3.1 Mengenal ActionScript ................................................................... ................................. 21

3.2 Memutar Kincir dengan ActionScript .................................................. ............................ 22

3.3 Menu Interaksi ....................................................................................................... .......... 25

Daftar Pustaka ................................................................................................................................... 30

Biografi Penulis ............................................................................... ................................................... 30


Copyright © 2010-2012 JasaMultimedia.Com 1

TTeekknniikk CCeeppaatt BBeellaajjaarr AAddoobbee FFllaasshh

Dedy Izham [email protected]

http://blog.jasamultimedia.com

Pada kesempatan kali ini, saya berkesempatan coret-coret lagi disini. Untungnya waktu saya tidak terlalu padat dengan kesibukan, jadi saya bisa menyempatkan untuk menulis sedikit mengenai hal yang berbau MULTIMEDIA. Kali ini saya akan membahas mengenai Multimedia sebagai media pembelajaran, yakni membahas mengenai “Cara Cepat Belajar Adobe Flash”. Ini merupakan tulisan pertama saya mengenai flash. Flash saat ini banyak digunakan dalam dunia pendidikan. Maka dari itu, saya disini tertarik untuk menulis Tutorial mengenai flash sebagai bahan ajar berbasis Multimedia. Disini saya akan membahas sedikit demi sedikit, agar anda lebih mudah memahaminya. Terutama bagi anda yang baru mengenal FLASH, bagi anda yang sudah mengenal. Saya harap melalui tulisan sederhana saya ini, bisa menambah wawasan anda mengenai FLASH.

SEKILAS TENTANG FLASH Flash merupakan software yang memiliki kemampuan menggambar sekaligus menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam pembuatan animasi, tetapi pada zaman sekarang ini flash juga banyak digunakan untuk keperluan lainnya seperti dalam pembuatan game, presentasi, membangun web, animasi pembelajaran, bahkan juga dalam pembuatan film. Animasi yang dihasilkan flash adalah animasi berupa file movie. Movie yang dihasilkan dapat berupa grafik atau teks. Grafik yang dimaksud disini adalah grafik yang berbasis vektor, sehingga saat diakses melalui internet, animasi akan ditampilkan lebih cepat dan terlihat halus. Selain itu flash juga memiliki kemampuan untuk mengimpor file suara, video maupun file gambar dari aplikasi lain. Flash adalah program grafis yang diproduksi pertama kali oleh Macromedia corp, yaitu sebuah vendor software yang bergerak dibidang animasi web. Macromedia Flash pertama kali diproduksi pada tahun 1996. Macromedia flash telah diproduksi dalam beberapa versi. Versi terakhir dari Macromedia Flash adalah Macromedia flash 8. Sekarang Flash telah berpindah vendor ke Adobe. Semua tools pada dasarnya sama, hanya yang membedakan disini adalah adanya jenis Actionsript 3.0. Actionscript ini merupakan versi terbaru dari penulisan actionscript di flash. Namun anda jangan khawatir, actionscript 2.0 masih berlaku di Adobe Flash.

Lisensi Dokumen:


Seluruh dokumen di blog atau website JasaMultimedia.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus

atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen.

Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari

JasaMultimedia.Com.



BAB I Pengenalan Adobe Flash

Pada bahasan awal ini, akan saya bahas mengenai dasar-dasar pengenalan tools dari Adobe Flash. Kalau anda dulu sempat mengenal Flash yang masih vendor Macromedia, tools-tools yang dipakai sebenarnya hampir sama seperti yang masih bervendor Macromedia. Dan kini, adobe flash juga masih menerapkan standarisasi dari macromedia. Hanya beberapa opsi saja yang berbeda. Saat ini adobe sudah memunculkan versi terbarunya. Yakni versi CS6, walau pun versinya tinggi tetapi kalau saya lihat, tools-tools dan default workspace-nya masih tetap hampir sama seperti versi sebelumnya. Hanya ada beberapa saja yang berbeda, di versi terbaru. Pada versi terbaru tersebut terdapat tools yang memungkinkan kita membuat efek ruang (3D). Disini saya memakai Adobe Flash CS3, sebagai media interaktif pembelajaran.

1.1 HALAMAN AWAL Halaman awal adalah tampilan yang pertama kali muncul ketika kita mengakses Adobe Flash CS3 Professional. Cara mengakses Adobe Flash CS3 Professional pertama kali yaitu double klik pada icon yang ada di desktop atau lihat dari daftar program. Tampilan start page pertama kali membuka Adobe Flash CS3 Professional yaitu:

Gambar 1.1 Tampilan start page Adobe Flash CS3

1.2 LINGKUNGAN KERJA ADOBE FLASH CS3 Secara garis besar, lingkungan kerja (Workspace) adobe flash cs3 terdiri dari beberapa komponen utama yang bisa anda lihat seperti pada gambar 1.2:

1. Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save, Import, Export, dan lain-lain.

2. Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan dan mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa tayang objek, pengaturan layer, dan lain-lain.

3. Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk mengkomposisi frame-frame secara individual dalam sebuah movie.

4. Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi, menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau objek.



5. Properties adalah informasi objek-objek yang ada di stage. Tampilan panel properties secara otomatis dapat berganti-ganti dalam menampilkan informasi atribut-atribut properties dari objek yang terpilih.

6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan memodifikasi

berbagai atribut dari objek dari animasi secara cepat dan mudah.

Gambar 1.2 Komponen Utama

1.3 TOOLBOX Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau alat yang mempunyai fungsi-fungsi tersendiri untuk keperluan desain (lihat Gambar 1.3). Berikut penjelasan setiap tool yang terdapat pada Toolbox .

1. Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi untuk memilih atau menyeleksi suatu objek.

2. Subselection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada selection tool.

3. Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi. 4. Lasso Tool, berfungsi untuk memotong gambar secara manual. 5. Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti

dalam pembuatan garis, kurva atau gambar. 6. Text Tool digunakan untuk membuat objek teks 7. Line Tool digunakan untuk membuat atau menggambar garis. 8. Oval Tool digunakan untuk menggambar bentuk lingkaran atau elips. 9. Pencil Tool digunakan untuk membuat garis. 10. Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk bebas. 11. Ink Bottle tool digunakan untuk mengisi/mengganti Stroke(garis luar) suatu objek. 12. Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan untuk

mengubah warna area sebuah objek yang telah diwarnai. 13. Eye Dropper Tool digunakan untuk mengambil sampel warna. 14. Eraser Tool digunakan untuk menghapus objek. 15. Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran. 16. Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage. 17. Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis. 18. Fill Color digunakan untuk memilih atau memberi warna pada suatu objek. 19. Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatu

gambar atau objek.



Gambar 1.3 Tools Box

1.4 LIBRARY Fungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan panel library.

Gambar 1.4 Library Panel

1.5 ACTION SCRIPT Salah satu kelebihan FLASH dibanding dengan perangkat lunak animasi lain yaitu adanya action script. ActionScript adalah bahasa pemrograman Adobe Flash yang digunakan untuk membuat animasi atau interaksi, ActionScript mengizinkan untuk membuat intruksi berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah sebelum



melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara menekan tombol F9 pada keyboard. Atau melalui menubar dengan cara klik Window > Actions .

Gambar 1.4 Panel ActionScript

Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen yang berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar ActionScript dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya dengan benar, maka hasil yang didapat kan akan berbeda atau file flash tidak akan bekerja sama sekali. ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie clip, dan lain-lain. Action frame adalah action yang diterapkan pada frame untuk mengontrol navigasi movie, frame, atau objek lain-lain. Salah satu fungsi ActionScript adalah memberikan sebuah konektivitas terhadap sebuah objek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang harus diperhatikan dalam ActionScript yaitu:

1.5.1 Event Event merupakan peristiwa atau kejadian untuk mendapatkan aksi sebuah objek. Event pada Adobe Flash ada empat, yaitu:

a) Mouse event Event yang berkaitan dngan penggunaan mouse.

b) Keyboard Event Kejadian pada saat menekan tombol keyboard.

c) Frame Event Event yang diletakkan pada keyframe.

d) Movie Clip Event Event yang disertakan pada movie clip.

1.5.2 Target Target adalah objek yang dikenai aksi atau perintah. Sebelum dikenai aksi atau perintah, sebuah objek harus dikonversi menjadi sebuah simbol dan memiliki nama instan. Penulisan nama target pada skrip harus menggunakan tanda petik ganda (” ”)

1.5.3 Action Pemberian action merupakan lagkah terakhir dalam pembuatan interaksi antarobjek. Action dibagi menjadi dua antara lain:

a) Action Frame: adalah action yang diberikan pada keyframe. Sebuah keyframe akan ditandai dengan huruf a bila pada keyframe tersebut terdapat sebuah action.

b) Action Objek: adalah action yang diberikan pada sebuah objek, baik berupa tombol maupun movie clip.

Okey…, cukup sekian dulu BAB I | Pengenalan Adobe Flash, untuk bab berikutnya. Materi yang saya berikan akan lebih asyik. Siapkan cemilan anda untuk melangkah ke BAB II.



BAB II Membuat Animasi Sederhana

Seorang yang membuat animasi itu biasa kita sebut dengan ANIMATOR. Nah…, seorang animator yang professional harus bisa memahami sifat-sifat gerak dialam. Terutama gerak mahluk hidup disekitar animator tersebut. Kita walau pun belum professional, kalau kita belajar dengan sungguh-sungguh pasti bisa menjadi seperti mereka. Karya kita juga bisa tampak realistis dan hidup. Untuk menciptakan karya bak Animator Handal, kita harus memperhatikan beberapa point penting berikut.

Mempunyai teknik animasi Keahlian dibidang acting dan sinematography, dan tentu saja pemahaman mengenai

proses pembuatan film itu sendiri.

Mengerti mengenai proses penceritaan yang baik, yang dapat menarik perhatian penonton.

Selalu menyampaikan sesuatu kepada penonton dan dapat memamcing reaksi penonton yang menyaksikan karyanya, baik tertawa, sedih maupun gembira.

Mampu berimajinasi Nah…, itulah yang kita perlukan dalam pembuatan suatu animasi. Baik itu animasi dalam sebuah CD interaktif atau animasi dalam sebuah FILM. Agar semakin ciamik dalam pemahaman anda mengenai animasi, let’s check this tutorial. Saya akan menyampaikan tutorialnya dengan sedikit sentuhan bahasa saya yang agak gila. Biar anda merasa makin dekat dengan saya.

2.1 FRAME dan KEYFRAME Bersyukurlah kita mengenal software flash ini, karena keajaiban symbol dan kemampuan dalam hal beranimasi sudah tidak bisa diragukan lagi dalam software flash ini. Sebelum anda mengenal lebih jauh mengenai berAnimasi, ada baiknya anda memperhatikan roll film pada gambar 2.1 berikut.

Gambar 2.1 Frame Sebuah Animasi

Ada 7 buah frame atau gambar animasi gerakan merpati yang sedang terbang. Apabila frame(gambar) tersebut diproyeksikan satu persatu secara bergantian, maka anda akan melihat 1 buah gambar utuh yang menunjukkan gerak burung merpati sedang terbang. Inilah konsep dasar sebuah animasi. Okey…, kita akan lihat konsep tersebut pada Adobe Flash. Perhatikan dan pahamilah tutorial sederhana berikut untuk mengetahui konsep animasi pada flash. Kalau anda tidak memahami konsep berikut, saya jamin anda bakal lapar.

1. Saat anda membuat document baru pada flash, pada bagian timeline. Anda bisa melihat bulatan kecil berwarna putih (gambar 2.2). Bulatan tersebut disebebut dengan Blank KeyFrame. Artinya…, blank keyframe tersebut ibarat anda mempersiapkan kertas



kosong yang siap untuk digambar. Kalau tidak ada symbol blank keyframe pada timeline, anda tidak bisa menggambar apapun pada Stage(kertas).

Gambar 2.2 Blank keyframe

2. Sekarang kita mencoba menggambarkan sebuah bidang pada stage di keyframe satu. Bisa oval tool, ractangel, atau pun obyek yang lainnya. Pada contoh kali ini

saya membuat obyek dengan menggunakan “Poly star tool”. Untuk mengaktifkan poly star tool ini, anda bisa menahan klik kiri saat menyeleksi oval tool pada tool box (seperti yang sudah dijelaskan pada bab I). perhatikan

gambar 2.3 berikut.

Gambar 2.3 Blank keyframe berubah jadi Keyframe

Anda bisa melihat symbol Blank keyframe telah berganti menjadi symbol keyframe, yang berarti kertas/Stage tersebut sudah terisi dengan obyek gambar.

Symbol keyframe diwakili dengan gambar bulatan kecil berwarna hitam. Lihat gambar 2.3

3. Setelah kertas/Stage terisi oleh obyek, kita memerlukan kertas baru (blank keyframe) lagi. Caranya klik kanan pada frame ke-2 dan pilih insert Blank

Keyframe. Lihat gambar 2.4

Gambar 2.4 insert blank keyframe

4. Sekarang anda mendapati stage dalam keadaan kosong kan…?!?! Setelah itu

coba anda isi kan gambar Persegi pada frame ke-2 ini.



5. Kini anda memiliki 2 buah frame yag masing-masing berisi gambar Segi 7 yang

telah kita buat dengan polystar, dan yang kedua adalah persegi.

Gambar 2.5 Ractangel pada frame-2

6. Masi berhubungan dengan keyframe, langkah berikutnya adalah kita klik kanan pada frame ke-3, dan pilih “Insert keyframe”.(gambar 2.6) mungkin anda bertanya-tanya didalam benak hati yang terdalam. Apa sih perbedaannya dengan

insert blank keyframe…?!? Okey…, penjelasan singkatnya gini. Ada kalanya anda tidak mau menggambar dari awal lagi kan…?!?! Anda ingin membuat

duplikasi dalam kertas baru yang mirip dengan gambar pada kertas sebelumnya. Setelah itu, anda tinggal memperbaiki dan mengeditnya dengan sentuhan-sentuhan tertentu. Jadi…, “Insert keyframe” ini berguna menduplikasi frame

sebelumnya ke frame yang baru.

Gambar 2.6 insert keyframe

7. Nah.., diframe ketiga ini. Anda memiliki duplikasi obyek sama seperti pada frame ke-2. Setelah kita duplikasi, kita tinggal memodifikasi sedikit pada obyek tersebut.

Gambar 2.7 modifikasi obyek



8. Untuk menjalankan (PLAY) animasi tersebut, silahkan anda tekan tombol “Enter” pada keyboard. Agar animasi dapat berulang, silahkan anda pilih menu

Control > Loop PlayBack. Atau anda tekan CTRL+ Enter pada keyboard.

Nah…, sekarang anda sudah bisa membedakan antara Insert Blank keyFrame dan Insert

Keyframe.

2.2 MOTION TWEENING “Waduh mas agan Izham…, istilah apa lagi nih gan…?!?! Kok ane jadi puyeng…?!?” Tenang saja, anda tidak perlu galau gitu dunk…, biar makin jelas mengenai Motion Tweening, ayo kita praktek dengan membuat karya berikut. Biar anda gak puyeng, dengan praktek, anda bisa mendiskripsikan tentang motion tweening.

2.2.1 EFEK FADE IN dan FADE OUT 1. Okey.., kita buat document baru pada flash. Selanjutnya kita isi dengan sebuah obyek

persegi pada frame pertama (lihat gambar 2.8).

Gambar 2.8 Obyek persegi

2. Setelah kita membuat obyek persegi, kita convert obyek tersebut ke symbol agar bisa di

transparasi (diberi efek fade in dan fade out). 3. Seleksi dulu obyek persegi tersebut, kemudian klik kanan dan anda pilih convet to

symbol (gambar 2.9)

Gambar 2.9 convert to symbol



4. Setelah anda pilih “Convert to symbol” maka akan muncul jendela baru seperti pada

gambar 2.10. bagian name, silahkan anda isi dengan nama “Persegi” dan typenya anda pilih “Graphic” kemudian anda klik tombol OK.

Gambar 2.10 tampilan menu convert to symbol

5. Graphic persegi yang kita buat tadi merupakan obyek persegi yang berada pada dunia

lain. Time line pada graphic sama sekali tidak ada bedanya dengan time line yang berada pada scene utama. Untuk perbedaannya, perhatikan gambar 2.11.

Gambar 2.11 obyek persegi pada graphic

Untuk masuk kedunia lain (Duniannya obyek persegi), anda bisa melakukan klik double pada obyek persegi dengan menggunakan selection tools. Tandanya anda memasuki dunia lain, bisa anda lihat pada gambar 2.11 yang telah saya lingkari merah. Untuk kembali lagi ke scene utama, silahkan anda pilih “Scene 1”. Maka secara otomatis anda dibawa ke scene utama anda dimana anda akan membuat animasi.

6. Okey…, saatnya kita lanjutkan. Anda masih tetap semangatkan…?!?! Harus dunk..,

anda harus semangat. Saya aja yang nulis capek-capek gini masih semangat. Apalagi anda yang ingin bisa Adobe Flash, harus tetep semangat dunkz... pastikan posisi anda di Scene 1.

Gambar 2.12 posisi di Scene 1

7. Klik kanan keyframe ke-15 (gambar 2.13) dan anda pilih insert keyframe. Setelah

keyframe muncul diframe 15 (ditandai dengan bulatan hitam), kemudian anda klik kanan diantara frame 2 dan 14, anda pilih “Create motion tween”. (gambar 2.14) anda bisa lihat perbedaannya kan antara gambar 2.13 dan gambar 2.14.



Gambar 2.13 Membuat keyframe

Gambar 2.14 motion tween terbentuk

8. Langkah berikutnya, kita balik lagi ke frame 15. Kemudian anda seleksi obyek persegi

yang ada pada frame ke-15 tersebut. Setelah anda seleksi, klik property panel yang ada pada bawah stage. Ubah colornya menjadi alpha, dan isi nilai alphanya menjadi Alpha=20%. (gambar 2.15) Dari langkah ke-8 ini, anda bisa melihat perbedaan obyek yang alphanya sudah kita ubah. Obyek persegi yang kita buat tampak samar dan agak buram.

Gambar 2.15 mengubah property transparasi obyek

9. Sekarang coba jalankan animasi anda. Tekan enter pada keyboard. Obyek persegi yang

kita buat, lama-lama akan buram kan….?!?! Inilah yang disebut dengan efek Fade Out. Sedangkan efek Fade in, efek tersebut adalah kebalikan dari efek fade out. Yaitu dari buram/tidak terlihat ke terang. (transparis NOL ke 100%). Untuk membuat efek fade in,

sangatlah mudah. Cukup membalik proses yang telah kita buat diatas. Caranya. Kita lanjutkan saja langkah diatas.

10. Klik kanan pada frame ke-30, dan anda pilih insert keyframe. 11. Selanjutnya, diatara frame ke-16 dan 29, anda klik kanan. Kemudian pilih create motion

tween. 12. Balik lagi ke frame 30. Anda seleksi frame 30. Kemudian anda ulangi langkah ke-8.

Pilih property panel. Anda ubah alpha-nya menjadi 100%. 13. Coba anda jalankan animasi anda dengan menekan tombol enter.

Gimana….?!?! Cukup mudah kan…?!?! Kesimpulnya…, proses di timeline pada frame ke-1 sampai frame 15, adalah efek FADE OUT sedangkan pada frame 16 ke 30 disebut efek FADE IN. Ternyata animasi itu mudah kan…?!? Sekarang anda sudah mengetahuikan motion tween itu apa…?!? Kalau anda masih binggung dengan motion tween, keyframe, insert blank keyframe, symbol dsb. Coba anda praktikkan lagi beberapa langkah yang ada di BAB II ini. Atau mungkin anda bingung gara-gara cemilan anda habis. Ehehe ini cemilan saya juga sudah habis. #curhat Oke deh…., mungkin ada sebagian dari anda masih binggung dengan hal tersebut. Coba kita latihan lagi membuat animasi yang agak komplek sedikit. Coba kita buat animasi kincir.



2.2.2 MEMBUAT KINCIR Biar anda semakin mahir dalam menggunakan obyek animasi di flash, saatnya anda melakukan eksperiment-eksperiment secara terus-menerus. Dan jangan bosan-bosan untuk membuat karya yang jauh lebih baik. tetep cemungudzZ yach…!! (Nah…, lhowW…, kok jadi aLay Gin1 saya.) Pada bahasan berikut ini, silahkan anda membuat obyek berbentuk kincir. Buatlah semenarik mungkin. Biar orang yang melihatnya bisa tertarik dengan kincir angin anda. Hehehe kalau anda ahli dalam menggambar, gunakan kreatifitas anda dalam menggambar tersebut untuk dijadikan animasi. Kalau anda tidak ahli menggambar, sama seperti saya. Bikin kincirnya yach yang sederhana saja. Jangan terlalu kompleks. (aslinya saya tidak bisa kalau bikin kincir yang bagus. Hehehe ) langkah pertama dalam pembuatan animasi kincir adalah, kita buat dulu kincirnya. Kalau kincir saya ini cukup sederhana, apabila anda ingin kincir yang lebih manis. Silahkan anda buat dengan mencontoh obyek-obyek kincir yang ada di sekitar anda.

1. Buatlah document baru pada Adobe flash yang telah anda buka. 2. Gunakan ractangel tools untuk membuat kincir. Pertama-tama, agar kincir tampak

manis, ractangel tools kita buat anda seleksi salah satu sudutnya dengan menggunakan Subselection Tool. (lihat tools box hal. 3) disini yang saya seleksi adalah sudut bagian kiri bawah. (lihat gambar 2.16) ingat…!! Hanya bagian itu saja yach yang terseleksi, kemudian anda seret kekiri hingga membentuk seperti gambar 2.16.

Gambar 2.16 bentuk awal kincir

3. Setelah membentuk obyek seperti gambar 2.15 diatas, berikan garis diagonal seperti

yang terlihat pada gambar 2.17 (warna orange). dengan menggunakan Line tool. Atau menekan tombol “N” pada keyboard. Tujuan garis diagonal tersebut untuk batas saat pemberian warna berbeda.

Gambar 2.17 garis diagonal pembatas

4. Setelah kita membuat garis pembatas tersebut, saatnya kita member warna pada kincir

kita. Gunakan selectioan tool (tekan tombol “V” pada keyboard), kemudian seleksi bagian segitiga besar. Segitiga yang berbentuk pyramid (segitiga sebelah kiri). Ubah warnanya pada fill color atau property menjadi #FF9900. (gambar 2.18)



Gambar 2.18 perubahan fill color

5. Lakukan langkah yang sama untuk mengubah warna segitiga berwarna hitam sebelah

kanan. Ubah warnanya menjadi #FFCC00. Maka hasil dari bagian kincir yang telah kita buat seperti pada gambar 2.19 berikut.

Gambar 2.19 bagian kincir sudah diwarnai

6. Masih tetap menggunakan selection tools, agar kincir terlihat tampak lebih manis.

Silahkan anda bengokkan segitiga bagian kanan. Caranya, dekatkan kursor selection tool pada salah satu sisi segitiga bagian kanan. Hingga kursor anda berubah menjadi seperti pada gambar 2.20

Gambar 2.20 cekung ke dalam

7. Okey…, setelah bentuknya kurang lebih seperti gambar 2.20, saatnya kita ubah bentuk

tersebut menjadi sebuah symbol graphic. Caranya, seleksi semua obyek kincir tersebut (CTRL+A). kemudian klik kanan dan pilih convert to Symbol (mirip pada gambar 2.8).

8. Akan muncul jendela baru seperti gambar 2.21, jangan lupa name = kincir beserta typenya = Graphic setelah itu tekan OK…



Gambar 2.21 mengubah menjadi symbol

9. Kita telah membuat symbol baru dengan nama kincir. Buatlah 1 buah kincir utuh dari

symbol bernama kincir tersebut. Caranyanya, kita tinggal CTRL+D (Untuk duplikasi). Atau seret symbol kincir ke stage yang berada pada panel library. Susunlah kincir hingga membentuk seperti pada gambar 2.22 untuk memutar bagian kincir hingga tersusun seperti gambar, anda bisa menggunakan Free Transform tool. Atau anda pilih menu Modify > transform kemudian anda pilih posisi transformasinya.(lihat gambar 2.23)

Gambar 2.22 bentuk kincir

Gambar 2.23 menu transform

10. Setelah kincir terbentuk seperti pada gambar 2.22, seleksi semua gambar seperti

langkah ke-7. Kemudian anda klik kanan pada obyek kincir yang telah dibuat tadi, dan anda ubah menjadi symbol. Cara sama seperti pada langkah ke-8. Name anda ubah menjadi “Kincir utuh”. Okey…, sekarang kita sudah memiliki obyek symbol kincir



utuh, anda bisa mempermanis tampilan kincir anda dengan memberikan lingkaran pada titik pusat kincir. Ingat…, anda harus klik dobel dulu pada obyek symbol “kincir utuh” tersebut. Dan anda akan dibawa masuk kedunia lain seperti pada penjelasan sebelumnya. (gambar 2.10) hasilnya setelah kita memberikan lingkaran di titik pusat kincir seperti terlihat pada gambar 2.24. apabila anda tidak ingin menambahi lingkaran di titik pusat, it’s OK kok. Tenang aja.

Gambar 2.24 kincir dengan lingkaran pusat

11. Kalau sudah diberikan lingkaran, kita balik lagi ke SCENE 1. Ingat yach…, ke scene 1.

Itu bagi anda yang menambahi lingkaran di titik pusat kincir. Bagi anda yang tidak menambahi lingkaran, berarti posisi anda masih didalam SCENE 1.

Gambar 2.25 posisi scene 1

12. Saatnya kita memutar kincir yang telah kita buat tadi. Langkahnya hampir sama seperti

pada langkah-langkah melakukan animation sebelumnya. Klik kanan pada frame ke-50, kemudian anda pilih Insert Keyframe.

13. Diantara frame ke-2 dan ke-49, silahkan anda buat Motion tweennya. Masih ingat dunk caranya…, pasti ingat deh…, kalau ndak ingat. Yach tinggal klik kanan, kemudian pilih “Create motion tween”. Uda jadi kan…..?!?! sama seperti pada gambar 2.13.

14. Langkah berikutnya, adalah mengatur posisi putaran kincir. Pastikan posisi framenya masih diantara frame ke-2 dan 49. Masuk ke panel property dibawah stage, anda ubah rotatenya dari NONE menjadi CW(searah jarum jam) atau CCW(kebalikan cw). Jangan lupa timesnya anda isi nilai 1. (lihat gambar 2.26)

Gambar 2.26 mengubah property putaran

15. Setelah kita ubah propertinya, silahkan anda Play animasi kincir yang telah anda buat.

Caranya CTRL+Enter. Selamat, kincir anda telah berputar. Pasti anda mendapati keanehan pada kincir yang anda buat. Kincir anda seolah-olah berhenti saat akan mengulang putarannya. Ini dikarenakan, gambar antara frame ke-1 dan frame ke-50 sama persis. Sehingga, seolah-olah kincir kita tersebut berhenti berputar untuk sesaat. Untuk melakukan solving atas masalah ini, anda bisa menggunakan trik yang saya berikan berikut.



Untuk menghindari perputaran kincir yang terhenti sejenak, anda bisa mencegah agar looping yang dilakukan tindak mencapai ke frame-1 atau 50. Karena diframe ini terdapat kesamaan posisi gambar obyek kincir. Untuk menghindari hal tersebut, silahkan anda insert keyframe pada frame 49, kemudian Remove frame ke-50. Sekarang anda hanya memiliki 49 frame dengan gambar masing-masing frame berbeda. Oh iya…, anda bisa menggunakan imajinasi anda untuk membuat seakan-akan kincir anda ditancapkan pada sebuah taman yang asri dan indah. (gambar 2.27)

Gambar 2.27 tambahan backgraound

Gimana….?!?! Keren kan. Dan yang terpenting, membuat animasi itu mudahkah….?!? Tak sesulit yang anda bayangkan. Hanya perlu kesabaran, dan juga niat yang tulus dalam pembuatan sebuah animas. Dan yang gak kalah pentingnya adalah. Harus ada computer, kalau tidak anda computer. Kita tidak mungkin bisa bikin animasi. Heheheh 2.2.3 OBYEK MENGIKUTI LINTASAN (path) Memang kecanggihan software flash sudah tidak bisa diragukan lagi. Kita bisa membuat sebuah obyek bergerak sesuai dengan lintasannya. Fasilitas yang disediakan tersebut biasa disebut dengan “Motion Guide”. Okey…, gak perlu banyak basa-basi lagi. Biar anda semakin memahaminya, silahkan simak tutorialnya. Disini kita masih menggunakan obyek kincir utuh yang telah kita buat tadi. (Menghemat waktu hehe)

1. Buat layer baru dengan nama “lintasan”, kemudian anda isi dengan gambar garis sederhana menggunakan brush tool.

2. Buat layer baru lagi beri nama “obyek”, kemudian anda isi dengan obyek “kincir utuh”, atau obyek lain. Lingkaran, atau persegi misalnya. Tapi disini saya gunakan kincir. Biar manis nanti hasilnya.



Gambar 2.28 beberapa obyek

3. Langkah berkutnya, silahkan insert keyframe sampai ke frame-15. (layer obyek dan

layer Lintasan harap di insert keyframe sampai frame 15) 4. Jadikan layer Lintasan menjadi layer guide. Caranya anda klik kanan pada layer

Lintasan, kemudian anda pilih guide. Sehingga layer Lintasan berubah menjadi gambar Martil.

Gambar 2.29 berubah icon dilayer lintasan

5. Selanjutnya, klik layer obyek, kemudian sambil menahan klik. Geser layer tersebut

kebawah layer Lintasan. Sehingga terlihat seperti pada gambar 2.30.

Gambar 2.30 perubahan icon lagi

6. Setelah layer terlihat seperti gambar 2.30 maka obyek kincir siap kita jalankan sesuai

dengan lintasannya. Jangan lupa, anda kunci layer lintasan agar tidak bisa diedit. 7. Aktifkan menu View > Snapping > Snap to Objects (CTRL+Shift+/). Menu ini

digunakan untuk mempermudah penempelan object kincir pada garis lintasan. 8. Focus kita sekarang pada obyek kincir. Klik keyframe-1 atau frame-1, kemudian dengan

menggunakan arrow tool. Klik obyek kincir, dan geser titik pusatnya (Registration point) sehingga menempel ke garis lintasan. Anda akan merasakan seperti ada magnet yang menempel disana. Ini adalah efek dari langkah ke-7 tadi.



Gambar 2.31 titik pusat menempel

9. Pastikan tetap dilayer obyek, kemudian anda buat motion tween di frame layer Obyek

tersebut. Masih ingatkan caranya bikin motion tween. Kalau tidak ingat, silahkan buka lagi halaman 12.

10. Ulangi langkah ke-8 dengan menuju ke keyframe ke-2 (frame 15). Dengan posisi diujung garis lintasan sebelah kanan. Setelah selesai, coba anda jalankan CTRL+Enter.

11. Selamat….!!! Anda telah berhasil membuat obyek kincir terbang mengikuti lintasan. Apabila anda masih binggung, coba anda bereksperimen lagi. Saya yakin, anda bisa. Kalau pun masih gagal, berarti anda dalam keadaan tidak focus. Coba anda focus, dan memahami yang saya sampaikan diatas. Pasti anda berhasil. I believe it…. *)Catatan: oh iya…, path yang anda buat tadi saat di playing (CTRL+Enter). Akan hilang alias tidak terlihat. Karena obyek tersebut merupakan garis guide untuk gerakan obyek kincir.

2.3 MOTION SHAPE “Waduh…, mas izham…?!?! Apa lagi nih motion shape…?!?!” Don’t panic dulu…., ini memang istilah baru lagi didalam flash. Yang saya sarankan, anda jangan panic dulu. Karena pengertian motion shape hampir sama seperti motion tween. Hanya ada beberapa saja yang berbeda. Mari kita pelajari bareng-bareng. Perbedaannya antara motion shape dan motion tween adalah, motion tween harus mensyaratkan obyek berupa symbol. Sedangkan di motion shape berupa shape. Jadi apabila obyek tersebut berupa group, symbol, atau gambar bitmap. Harus anda ubah menjadi shape. Biar anda tidak binggung, mari kita lihat fungsi motion shape ini dengan beberapa eksperimen berikut ini. 2.3.1 MENGUBAH BENTUK OBYEK Teknik ini kita sebut dengan teknik morphing atau perubahan bentuk. Namun teknik yang akan kita pelajari di Flash ini tidak se-Expert di film-film Hollywood. Yaps…., kalau difilm itu. Kita bisa lihat kecanggihan saat Dr. Saipul menjadi HULK. (bener ndak yach… ) perubahan bentuk yang kita pelajari disini sebenarnya memiliki konsep sama dengan perubahan bentuk HULK tersebut. Hanya saja yang kita pelajari disini lebih sederhana. Okey…, untuk pertama-tama. Siapkan dulu semua keperluan perang kita. Seperti kopi, cemilan dan juga yang paling penting adalah listrik PLN. Heheh…

1. Buatlah document baru pada flash 2. Jangan lupa menyimpannya terlebih dahulu, biar sewaktu-waktu misalnya ada crash.

Gak bingung dan panic. Save dengan nama “perubahan”.



3. Gambar sebuah obyek lingkaran pada frame pertama. 4. Kemudian anda klik kanan di frame ke-15, pilih insert blank keyframe.

Gambar 2.32 membuat keyframe baru

5. Setelah itu silahkan anda gambar obyek persegi pada frame ke 15 tersebut. 6. Klik antara frame ke-2 dan 15, kemudan anda lihat dibagian property. (gambar 2.33)

anda ubah tween-nya menjadi shape. Atau opsi lain, anda bisa melakukan klik kanan diantara frame 2 dan 15. Kemudian anda pilih create shape tween.

Gambar 2.33 mengubah tween menjadi shape

7. Setelah itu, coba anda Play dengan tekan Enter atau test Movie (CTRL+Enter). Anda

akan melihat perubahan bentuk obyek lingkaran ke persegi

Gambar 2.34 perubahan bentuk dengan motion shape

Bagaimana…?!?! Sekarang sudah tahukan perbedaan antara motion tween dengan motion shape, kalau masih bingung. Silahkan baca lagi mulai dari atas. Dan silahkan coba bereksperimen dengan menggunakan imajinasi anda. Misalnya membuat obyek yang lain. Apabila obyek yang anda gambar bukan berupa shape, maka di frame akan berubah menjadi titik-titik yang menunjukkan ketidak beresan.

Gambar 2.35 ada yang salah dengan obyek di Stage



2.4 MASKING Masking adalah sebuah fasilitas yang disediakan oleh software flash. Sebenarnya tidak hanya flash saja yang ada fasilitas masking. Hampir semua software graphic editor memiliki fasilitas ini. Pengertian masking sendiri berasal dari kata MASK atau dalam bahasa Indonesia berarti Topeng. Biar lebih jelasnya…., seperti biasa. Mari kita belajar melalui tutorial berikut.

1. Buatlah document baru pada flash. 2. Jangan lupa simpan dan beri nama file dengan nama Masking 3. Disini saya menggunakan obyek Movie Clip kincir yang pernah kita buat pada tutorial

sebelumnya dihalaman 12. 4. Letakkan movie clip kincir di stage. 5. Pada layer yang berisi movie clip kincir, silahkan anda rename. Ubah namanya dari

layer 1 menjadi layer “Kincir”

Gambar 2.36 ubah nama layer

6. Kemudian buat layer baru, klik symbol seperti pada gambar 2.37 untuk membuat layer

baru, kemudian beri nama mask.

Gambar 2.37 membuat layer baru

7. Buatlah sebuah obyek lingkaran pada layer mask. Pastikan posisinya tepat diatas kincir.

Karena kita akan menopengi kincir. Biar menjadi Velg/Ban mobil. 8. Setelah obyek lingkaran terbentuk. Klik kanan pada layer mask untuk mulai menopengi

obyek kincir tadi. Dan hasilnya seperti gambar berikut.

Gambar 2.38 simbol layer Gambar 2.39 obyek di stage

berubah setelah dimasking

Okey…, cukup sampai disini dulu BAB II. Bagaimana…?!?! Belajar Flash itu asyik kan….?!?



BAB III ActionScript

Kini, kita dibab III ini. Saatnya mempelajari mengenai pemrogaman diflash. Keistimewahan dari software flash adalah adanya sebuah pemrogaman yang disebut dengan actionscript. Pada bahasan awal, anda sudah mengenal adanya actioanScript 3.0 pada flash (bahasan hal 1) disini. Yang banyak kita bahas masih dalam tahapan actionscript 2.0 ActionScript pada flash dibutuhkan untuk memberi efek gerak dalam animasi. ActionScript di flash pada awalnya memang sulit dimengerti jika seseorang tidak mempunyai dasar atau mengenal flash. Tetapi jika sudah mengenalnya, kita tidak bisa lepas dari ActionScript karena sangat menyenangkan dan dapat membuat pekerjaan jauh lebih cepat dan mudah. Nah…, untuk itulah tujuan buku sederhana ini saya buat.

3.1 MENGENAL ACTIONSCRIPT Sebelum kita mengenal lebih jauh mengenai actionscript, ada baiknya kita mengenal terlebih dahulu mengenai apa itu ActionScript…?! Sebenarnya sih jawabannya sudah ada saat anda memasuki bab III ini. Biar anda tidak bingung, disini saya mendefinisikan lagi mengenai actionscript. ActionScript merupakan bahasa pemrogaman flash yang dibangun sebagai cara untuk mengembangkan pemrograman interaktif secara efisien menggunakan platform aplikasi adobe Flash ActionScript mulai dari animasi yang sederhana sampai dengan yang kompleks sekalipun, penggunaan data, dan aplikasi interface yang interaktif. Dan saat ini sudah muncul actionscript 3.0, generasi actionscript ini hampir sama seperti pemrograman JAVA. Walaupun sudah muncul actionscript 3.0, actionscript yang lama tetap tidak bisa ditingalkan dan masih jadi andalan dalam dunia pemrogaman Flash. Yakni actionscript 2.0, dan dibuku ini. Yang banyak saya bahas adalah actioanscript 2.0. Anda tentu masih ingat halaman startup dari software Adobe Flash (gambar 1.1), disana pada pilihan create new document. Anda disuguhi beberapa opsi. Maka, saat anda membuat document baru flash. Anda harus memilih document baru dengan actionscript 2.0. kenapa harus actionscript 2.0? “Karena yang akan kita pelajari adalah actionscript 2.0”________ “Bagaimana dengan ActionScript 3.0…?”___ Jika anda bertanya bagaimana dengan actionscript 3.0, kita akan membahasnya nanti. Soalnya actionscript versi 3.0 lumayan agak kompleks dan tidak mudah dipahami bagi sebagian kalangan yang masih dalam tahap belajar. Maka dari itu, saya membahasnya dibuku ini yang versi 2.0

Gambar 3.1 membuat document baru ActionScript 2.0



3.2 MEMUTAR KINCIR DENGAN ACTIONSCRIPT Inilah keistimewahan kita membuat animasi dengan menggunakan software flash. Kita bisa membuat animasi dengan otak-atik obyek, seperti yang dibawah di bab II. Kita mengAnimasikan obyek dengan memanfaatkan teknik Motion. Dan pada tutorial kali ini kita menganimasikan Obyek kincir dengan menggunakan pemrogaman. Pemrogaman pada flash disebut dengan ActionScript. Sudah dijelaskan dihalaman sebelumnya, actionscript ini sangat membantu kita menghemat waktu dalam pembuatan animasi. Itupun kalau kita tahu…., heheheh. biar tahu, ikuti tutorial berikut.

1. Buatlah document baru, Ingat !! Yang dipilih adalah Flash File ActionScript 2.0 (lihat gambar 3.1)

2. Untuk obyeknya, anda bisa copy-Paste Obyek MovieClip kincir yang telah kita buat pada praktek dibab II. Kita copy dan kita paste pada Library panel. Okey…!! Saya anggap sampai sini anda sudah mengerti prosesnya. Atau…, sambil mengasah kemampuan dan kemahiran lagi. Anda bisa membuat kincir baru dengan style yang berbeda dari bahasan sebelumnya.

3. Siapkan obyek yang akan kita putar distage. (gambar 3.2)

Gambar 3.2 obyek kincir yang akan digerakkan

4. Rename layer 1 tersebut yang berisi obyek kincir. Ganti namanya dengan kincir. 5. Ubah juga nama “Instance name” pada property. Caranya, seleksi dulu obyek kincirnya,

kemudian klik panel property. Beri nama kincir pada “instance name”-nya. (gambar 3.3)

Gambar 3.3 ubah Instance name

Perlu anda ketahui: instance name ini diperlukan dalam pemanggilan oleh



ActioanScript, sehingga saat memanggil movieclip yang sama. Tidak akan error, karena sudah dibedakan dengan Instance name tersebut.

6. Buat layer baru, dan beri nama Action. Pada layer baru inilah kita memberikan coding ActionScript pada keyframe.

7. Klik kanan pada keyFrame di layer Action, kemudian pilih Actions untuk menampilkan editor Action (gambar 3.5)

Gambar 3.4 memberi action pada keyframe

Gambar 3.5 kotak editor Action

8. Isikan script seperti pada gambar 3.5, setelah itu tutup kotak editor (gambar 3.6). Maka

anda akan melihat symbol actionscript pada keyframe (gambar 3.7)

Gambar 3.6 menutup kotak editor Gambar 3.7 muncul symbol



Pada gambar 3.7 yang saya lingkari merah itu, menunjukkan kalau pada layer action di keyframe pertama terdapat ActionScript. Symbol tersebut mewakili tanda adanya actionScript.

9. Selanjutnya, sambil menekan tombol SHIFT. Kita klik di frame ke-5 seleksi diframe 5 tersebut, baik layer action atau pun layer kincir. Kemudian anda klik kanan, dan pilih “insert Keyframe” (gambar 3.8). Kemudian klik kanan pada keyframe 5 dilayer action dan pilih Actions.

Gambar 3.8 membuat keyframe baru pada kedua buah layer

10. Isikan script berikut pada editor Actions. (gambar 3.9)

Gambar 3.9 script untuk menggerakkan kincir

Perlu anda ingat !!! penulisan actionscript pada Flash adalah sensitiveCase. Artinya, besar kecil (capital/tidak) menjadi perhitungan tersendiri. Biasanya kalau script yang kita ketikkan benar, maka tulisan script kita akan berwarna seperti gambar 3.9

11. Tutup kotak editor, dan coba anda test movie. Masih ingat kan caranya. (CTRL+Enter) Apabila anda berhasil, maka kincir akan berputar dengan manis.

Penjelasan ActionScript: ActionScript pada gambar 3.5 menunjukkan bahwa proses awal untuk mengisi variable yang nanti akan kita gunakan pada actionscript berikutnya. Yakni actionscript yang berada pada gambar 3.9. setProperty(kincir, _rotation, i*45); pada script property diatas, kita mendeklarasikan property awal dari movieClip yang memiliki nama Kincir, kemudian kita atur posisi derajat awalnya yakni senilai “i*45”. nilai i pada awalnya berupa (i=1)*45. Berikutnya, i++; menunjukkan bahwa nilai i ditambah sebanyak i+1 tiap putarannya. Hingga mencapai kondisi seperti yang dideklarasikan dengan Action “IF(i>45)”. Artinya kincir diputar sampai 45 kali, kalau sudah 25 kali. Maka variable harus kembali kenilai awal. Yakni i=1.



3.3 MENU INTERAKSI Menu interaksi ini adalah sebuah bentuk animasi yang dapat berinteraksi dengan kita. Kita bisa melakukan sebuah bentuk interaksi dengan menekan tombol-tombol yang telah kita buat pada flash. Bentuk-bentuk menu interaksi pun sangat beragam, kita bisa membuatnya sesuai dengan kreatifitas kita. Misalnya saat kita akan membuat CD interaktif menggunakan FLASH, kita harus memahami terlebih dahulu mengenai bentuk interaksi ini. Pada bahasan kali ini, menu interaksi inilah yang menjadi ujung tombak saat kita membuat sebuah CD interaktif. Okey deh…, tanpa banyak basa-basi lagi. Simak tutorial membuat menu interaksi sederhana berikut ini.

1. Pertama-tama, kita siapkan terlebih dahulu layout dari media interaktif kita. Seperti yang anda lihat pada gambar 3.10, disini saya membuatnya layout sederhana dari media interaktif yang nanti akan kita buat.

Gambar 3.10 layouting blueprint/konsep

Gambar 3.11 Layout setelah dibumbui desain

Pada gambar 3.10, itu adalah blueprint dari layout yang akan kita buat. Anda bisa menggunakan insting design dan kreatifitas anda. Misalnya kita menambahi beberapa movieClip yang pernah kita buat. Disini yang pernah kita buat adalah Kincir, maka



tinggal ditambah saja dengan kincir yang telah kita buat. Sehingga tampilannya seperti pada gambar 3.11. Pada gambar 3.11, kita sudah bisa melihat bahwa media interaktif kita makin tampak manis dan juga enak di pandang sebagai media interaksi. Usahakan bikin sebagus mungkin yach…., kalau masih binggung, mending bikin sederhana dulu deh. Dari kotak-kotak menggunakan ractangel tools. Saya anggap anda sudah bisa bikin kayak di gambar 3.10

2. Oh iya…, perlu saya tekankan disini. Meskipun masih tahap belajar, anda harus memperhatikan kerapihan dalam permainan layer. Kita harus bisa menyendiri-menyedirikan antara layer yang berisi tombol, isi, background dsb. Ingat juga…!!! semua tutorial yang kita buat pada bab ini harus anda jadikan sebuah symbol. (seperti pada bab II)

Gambar 3.12 layer tersusun rapih

untuk meletakkan obyek

3. Isikan actionscript “stop()” (tanpa petik) pada layer action di frame 1. Saya yakin anda masih ingat caranya. Actionscript ini berfungsi menghentikan animasi saat dirunning/Play. Animasi akan berjalan setelah dilakukan perintah interaksi saat menekan tombol.

4. Okey.., setelah kita memberikan sebuah action, kita klik diframe 5 layer action. Kemudian anda tekan tombol SHIFT, dan anda klik diframe 5 layer BG. Kemudian klik kanan, dan pilih insert Frame. (langkah ini sama seperti pada langkah tutorial sebelumnya.)

Gambar 3.14 membuat frame ke-5 pada semua layer

5. Selanjutnya, kita mengubah obyek tombol kontak, menjadi sebuah symbol tombol.

Caranya sama seperti pada tutorial sebelumnya, seleksi obyek yang akan dijadikan symbol. Kemudian anda klik kanan, “Convert to symbol” dan anda pilih button. (gambar 3.16) kemudian tekan OK.

Gambar 3.15 mengubah obyek menjadi symbol



Gambar 3.16 mengubah menjadi symbol button

6. Lakukan langkah yang sama pada beberapa obyek yang lain.

Gambar 3.17 convert obyek lainnya

7. Sekarang, button interaksi sudah siap untuk kita gunakan. Saatnya mempersiapkan

beberapa keyframe yang berisi materi/content dari menu interaksi kita. Caranya, anda klik kanan pada frame 2,3, dan 4 di layer “isi”. Kita buat KeyFrame baru. Pasti masih ingatkan anda caranya…?!? (klik kanan, Insert blank keyframe).

Gambar 3.18 membuat keyframe baru

8. Setelah anda membuat keyframe baru, silahkan anda isikan beberapa Content. Baik itu

Visi Misi, Layanan, atau pun kontak. Ingat…, waktu mengisi content harus beda keyframe. Misalnya, saat anda mengisi content visi misi. Anda harus meletakkannya diframe ke-2. Tujuannya saat menggunakan menu interaksi, content yang ditampilkan tidak kacau.

Gambar 3.19 buat content visi misi dengan text tool



Perlu anda ingat, posisi dari ISI visi-misi ada pada frame ke-2. (gambar 3.20)

Gambar 3.20 posisi frame ke-2

9. Langkah berikutnya hampir sama. Yakni mengisi content Layanan dan juga kontak.

Lakukan langkah yang sama seperti pada langkah diatas. Hanya yang membedakan adalah posisi dari framenya. Untuk content Visi-misi, berada pada frame ke-2. Sedangkan content Layanan berada pada frame ke-3, dan kontak diframe ke-4.

10. Setelah semua content yang ada pada stage sudah siap semua, saatnya kita membuat actionScript menu interaksi. Untuk awalnya, kita beri actionscript stop terlebih dahulu pada layer action diframe pertama. Caranya, anda klik kanan pada frame pertama dilayer action. Kemudian anda pilih action. Setelah muncul kotak editor actionScript. Disana anda ketikkan actionscript seperti gambar 3.21.

Gambar 3.21 actionscript stop

Actionscript tersebut bertujuan untuk menghentikan gerak dari proyeksi frame di timeline.

11. Setelah memberi actionscript pada timeline, saatnya anda beri actionscript pada tombol yang telah anda buat tadi. Tujuannya adalah member interaksi saat tombol ditekan. Klik kanan pada tombol Visi misi, kemudian anda pilih action. Ketikkan actionscript seperti pada gambar 3.23

Gambar 3.22 memberi action pada tombol

Gambar 3.23 actionscript pada tombol

visi misi



penjelasan singkatnya mengenai actionscript yang ada pada tombol adalah. Saat tombol visi misi ditekan, maka action yang dilakukan adalah menuju ke keyframe 2. Keyframe yang berisi content visi misi.

12. Lakukan langkah yang sama untuk member actionscript ditombol Layanan, dan kontak. Yang membedakan adalah posisi framenya. Anda tentu masih ingatkan posisi content yang berisi layanan, dan kontak. Yaps….!!! Diawal tadi kita buat keyframe ke-3 berisi Layanan dan keyframe ke-4 berisi Kontak. Kita tinggal mengganti angka keyframenya saja.

Gambar 3.24 ubah nilai framenya

Kita tinggal mengubah nilai keyframe-nya sesuai dengan keyframe yang kita tuju. Ganti saja angka 2 dengan 3. Maka ditombol Layanan sudah berisi action. Kalau anda ingin member actionscript pada tombol Kontak , anda tinggal mengubah nilainya saja. Sama seperti saat anda mengisi action di tombol Layanan.

13. Okey…!! Menu interaksi sudah kita buat, saatnya kita test Movie. (CTRL+Enter) Tadaaaa……!!! anda sudah bisa buat menu interaksi. Gimana….?!?! Keren kan…?!?! Kalau anda masih belum berhasil, silahkan anda coba lagi dan lagi. Saya yakin anda pasti bisa.



DAFTAR PUSTAKA

Baba. “Animasi kartun dengan Macromedia Flash MX”, Elexmedia computindo. 2007

Agus, Nugraha H.,M.Si. “Pengenalan Adobe Flash dan ActionScript 3.0”, http://ukdw.ac.id. 2011

Adelina. “Media Interaksi dengan Adobe Flash”, Universitas Sumatera utara. 2011

Biografi Penulis Dedy Izham, Mengenal computer saat duduk di bangku SMK. Sebelumnya, belum mengetahui sama-sekali mengenai computer. Lahir dari keluarga Tidak miskin kurang kaya (keluarga sederhana), sehingga beranggapan computer adalah barang mewah untuk dibeli. Bermodalkan DOA, niat dan kemauan yang keras, akhirnya mampu memiliki dan memahami sedikit tentang computer. Memiliki prestasi yang cukup baik di bidang computer. Prestasi ini dibuktikan dengan hasil yang memuaskan dalam suatu kompetisi baik LOKAL maupun NASIONAL tingkat SMA/SMK/umum. Lulus SMK Multimedia pada

tahun 2010, setelah lulus sempat bekerja pada salah satu Home Studio Web Desain di Surabaya. Bekerja di home studio bukanlah pilihannya, ia memilih bekerja untuk memperoleh tambahan biaya KULIAH. Dan saat ini, ia melanjutkan studi-nya di salah satu UNIVERSITAS SWASTA di Malang. Ia memilih ke Perguruan Tinggi Swasta bukan berarti tidak di terima di Perguruan Tinggi Negeri, akan tetapi telat daftar di PTN (perguruan tinggi negri). Saat ini, ia sudah keluar dari Home Studio Web Desain di Surabaya. Bermodalkan pengalaman yang lebih dari cukup didunia computer, saat ini mengelola salah satu website (www.jasamultimedia.com) sebagai dana tambahan studi di Perguruan Tinggi. Yang paling ironi, walau jarang masuk kuliah, prestasi akademik dibidang komputernya bisa dipertahankan.

Ilmu termahal diperoleh dari niat & pengorbanan

PERHATIAN!!! Anda masih binggung dengan semua materi ditutorial ini.

HARAP TENANG…!!! Anda tidak perlu memanggil mentor profesional dan harus

membayar mahal. Yang anda perlukan adalah:

GURU PROFESIONAL yang ada didalam komputer ANDA SAAT INI. Dapatkan

Video Tutorial dari semua bahasan materi disini yang dikemas secara

INTERAKTIF. Dengan PAKET PREMIUM PEMBELAJARAN yang saya tawarkan,

anda akan merasa memiliki GURU PROFESIONAL yang ada didalam komputer

anda pribadi.

DAPATKAN SEKARANG JUGA !!! http://belajar.jasamultimedia.com

TEKNIK CEPAT BELAJAR ADOBE FLASH - … dari Macromedia Flash adalah Macromedia flash 8. Sekarang...

Documents

Transcript of TEKNIK CEPAT BELAJAR ADOBE FLASH - … dari Macromedia Flash adalah Macromedia flash 8. Sekarang...