eBook-Teknik Cepat AdobeFlash

8/13/2019 eBook-Teknik Cepat AdobeFlash

1/33

Take easy With Technology |Belajar Murah dan mudah berbasis Multimedia

Copyright 2010-2012 JasaMultimedia.Com

2012

By. Dedy Izham

http://blog.jasamultimedia.com

TEKNIK CEP T BEL J RDOBE FL SH

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/http://blog.jasamultimedia.com/


2/33

iiTake 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 tulistutorial 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 sebagaihadiah 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/http://belajar.jasamultimedia.com/http://belajar.jasamultimedia.com/


3/33

iiiTake 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.1Halaman Awal ........ .................................................................................................. .......... 21.2Lingkungan Kerja Adobe Flash CS3 ...... ... .............................................................. ........... 21.3Tools Box ................................................................................................................ ........... 31.4Library .... .... ........................................................................................................................ 41.5ActionScript .... .... ................................................................................................................ 4

1.5.1 Event ....... ................................................................. ....................................... 51.5.2 Target ............................................................................................................. 51.5.3 Action ............................................................................................................ 5

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

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

2.2Motion Tweening ....... .............................................................................................. .... .... . 92.2.1 Efek Fade in dan Fade out ........ ...................................................................... 92.2.2 Membuat Kincir .... ........................................................................................ 122.2.3 Obyek Mengikuti Lintasan (Path) ........ ........................................................ 16

2.3Motion Shape ................................................................................................................... 182.3.1 Mengubah Bentuk Obyek ..... .... .................................................................. . 18

2.4Masking ........................................................................................................................... 20BAB III ActionScript ........................................................................................................................ 213.1 Mengenal ActionScript .... ............................................................... ........................... .... .. 21

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

3.3Menu Interaksi ....................................................................................................... .......... 25Daftar Pustaka ................................................................................................................................... 30

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


4/33


Copyright 2010-2012 JasaMultimedia.Com 1

TTeekknniikkCCeeppaattBBeellaajjaarrAAddoobbeeFFllaasshh

Dedy Izham

[email protected]://blog.jasamultimedia.com

Pada kesempatan kali ini, saya berkesempatan coret-coret lagi disini. Untungnya waktusaya tidak terlalu padat dengan kesibukan, jadi saya bisa menyempatkan untuk menulis sedikitmengenai hal yang berbau MULTIMEDIA. Kali ini saya akan membahas mengenai Multimedia sebagai media pembelajaran, yaknimembahas mengenai Cara Cepat Belajar Adobe Flash.Ini merupakan tulisan pertama sayamengenai flash. Flash saat ini banyak digunakan dalam dunia pendidikan. Maka dari itu, sayadisini 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 harapmelalui tulisan sederhana saya ini, bisa menambah wawasan anda mengenai FLASH.

SEKILAS TENTANG FLASHFlash merupakan software yang memiliki kemampuan menggambar sekaligus

menganimasikannya, serta mudah dipelajari. Flash tidak hanya digunakan dalam pembuatananimasi, tetapi pada zaman sekarang ini flash juga banyak digunakan untuk keperluan lainnyaseperti dalam pembuatan game, presentasi, membangun web, animasi pembelajaran, bahkanjuga 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 filegambar dari aplikasi lain.

Flash adalah program grafis yang diproduksi pertama kali oleh Macromedia corp, yaitusebuah vendor software yang bergerak dibidang animasi web. Macromedia Flash pertama kalidiproduksi pada tahun 1996. Macromedia flash telah diproduksi dalam beberapa versi. Versiterakhir dari Macromedia Flash adalah Macromedia flash 8. Sekarang Flash telah berpindahvendor ke Adobe. Semua tools pada dasarnya sama, hanya yang membedakan disini adalahadanya jenis Actionsript 3.0. Actionscript ini merupakan versi terbaru dari penulisan actionscriptdi flash. Namun anda jangan khawatir, actionscript 2.0 masih berlaku di Adobe Flash.

L isensi Dokumen:


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

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

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

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

JasaMult imedia.Com.


5/33



BAB IPengenalan Adobe Flash

Pada bahasan awal ini, akan saya bahas mengenai dasar-dasar pengenalan tools dariAdobe Flash. Kalau anda dulu sempat mengenal Flash yang masih vendor Macromedia, tools-

tools yang dipakai sebenarnya hampir sama seperti yang masih bervendor Macromedia. Dankini, adobe flash juga masih menerapkan standarisasi dari macromedia. Hanya beberapa opsisaja yang berbeda. Saat ini adobe sudah memunculkan versi terbarunya. Yakni versi CS6, walaupun versinya tinggi tetapi kalau saya lihat, tools-tools dan default workspace-nya masih tetaphampir 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 AWALHalaman awal adalah tampilan yang pertama kali muncul ketika kita mengakses Adobe

Flash CS3 Professional. Cara mengakses Adobe Flash CS3 Professional pertama kali yaitudouble 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 CS3Secara 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 danmengatur 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 untukmengkomposisi 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.


6/33



5. Properties adalah informasi objek-objek yang ada distage . Tampilan panelpropertiessecara otomatis dapat berganti-ganti dalam menampilkan informasi atribut-atributproperties dari objek yang terpilih.

6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan memodifikasiberbagai atribut dari objek dari animasi secara cepat dan mudah.

Gambar 1.2 Komponen Utama

1.3 TOOLBOXFasilitas 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 Tooldigunakan untuk membuat objek teks7. Line Tooldigunakan untuk membuat atau menggambar garis.8. Oval Tooldigunakan untuk menggambar bentuk lingkaran atau elips.9. Pencil Tooldigunakan untuk membuat garis.10.Brush Tooldigunakan 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 Tooldigunakan untuk mengambil sampel warna.14.Eraser Tooldigunakan untuk menghapus objek.15.Hand Tooldigunakan untuk menggeser tampilan stage tanpa mengubah pembesaran.16.Zoom Tooldigunakan untuk memperbesar atau memperkecil tampilan stage.17.Stroke Colordigunakan untuk memilih atau memberi warna pada suatu garis.18.Fill Colordigunakan untuk memilih atau memberi warna pada suatu objek.19.Swap Colordigunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatugambar atau objek.


7/33



Gambar 1.3 Tools Box

1.4 LIBRARYFungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah

yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan panellibrary.

Gambar 1.4 Library Panel

1.5 ACTION SCRIPTSalah 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 intruksiberorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah sebelum


8/33



melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara menekan tombolF9 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 ActionScriptdapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya denganbenar, 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 sebuahobjek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang harus diperhatikandalam ActionScript yaitu:

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

a) Mouse eventEvent yang berkaitan dngan penggunaan mouse.

b) Keyboard EventKejadian pada saat menekan tombol keyboard.

c) Frame EventEvent yang diletakkan pada keyframe.

d) Movie Clip EventEvent yang disertakan pada movie clip.

1.5.2 TargetTarget 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 ActionPemberian action merupakan lagkah terakhir dalam pembuatan interaksi antarobjek.Action dibagi menjadi dua antara lain:

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

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

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


9/33



BAB IIMembuat 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 kitabelajar dengan sungguh-sungguh pasti bisa menjadi seperti mereka. Karya kita juga bisa tampakrealistis dan hidup.

Untuk menciptakan karya bak Animator Handal, kita harus memperhatikan beberapa pointpenting 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 perhatianpenonton.

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

Mampu berimajinasiNah, itulah yang kita perlukan dalam pembuatan suatu animasi. Baik itu animasi dalamsebuah CD interaktif atau animasi dalam sebuah FILM. Agar semakin ciamik dalampemahaman anda mengenai animasi, lets check this tutorial. Saya akan menyampaikantutorialnya dengan sedikit sentuhan bahasa saya yang agak gila. Biar anda merasa makin dekatdengan saya.

2.1 FRAME dan KEYFRAMEBersyukurlah 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 rollfilm pada gambar 2.1 berikut.

Gambar 2.1 Frame Sebuah Animasi

Ada 7 buah frame atau gambar animasi gerakan merpati yang sedang terbang. Apabilaframe(gambar) tersebut diproyeksikan satu persatu secara bergantian, maka anda akan melihat 1buah gambar utuh yang menunjukkan gerak burung merpati sedang terbang. Inilah konsep dasarsebuah animasi.

Okey, kita akan lihat konsep tersebut pada Adobe Flash. Perhatikan dan pahamilahtutorial sederhana berikut untuk mengetahui konsep animasi pada flash. Kalau anda tidakmemahami konsep berikut, saya jamin anda bakal lapar.

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


10/33



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

Gambar 2.2 Blank keyframe

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

saya membuat obyek dengan menggunakan Poly star tool. Untukmengaktifkan poly star tool ini, anda bisa menahan klik kiri saat menyeleksioval 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 symbolkeyframe, yang berarti kertas/Stage tersebut sudah terisi dengan obyek gambar.

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

3. Setelah kertas/Stage terisi oleh obyek, kita memerlukan kertas baru (blankkeyframe) 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 itucoba anda isi kan gambar Persegi pada frame ke-2 ini.


11/33



5. Kini anda memiliki 2 buah frame yag masing-masing berisi gambar Segi 7 yangtelah 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 kananpada frame ke-3, dan pilih Insert keyframe.(gambar 2.6) mungkin andabertanya-tanya didalam benak hati yang terdalam. Apa sih perbedaannya dengan

insert blank keyframe?!? Okey, penjelasan singkatnya gini. Ada kalanyaanda 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 padaframe ke-2. Setelah kita duplikasi, kita tinggal memodifikasi sedikit pada obyektersebut.

Gambar 2.7 modifikasi obyek


12/33



8. Untuk menjalankan (PLAY) animasi tersebut, silahkan anda tekan tombolEnter 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 TWEENINGWaduh mas agan Izham, istilah apa lagi nih gan?!?! Kok ane jadi puyeng?!?

Tenang saja, anda tidak perlu galau gitu dunk, biar makin jelas mengenai MotionTweening, ayo kita praktek dengan membuat karya berikut. Biar anda gak puyeng, denganpraktek, anda bisa mendiskripsikan tentang motion tweening.

2.2.1 EFEK FADE IN dan FADE OUT1. 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 ditransparasi (diberi efek fade in dan fade out).

3. Seleksi dulu obyek persegi tersebut, kemudian klik kanan dan anda pilih convet tosymbol (gambar 2.9)

Gambar 2.9 conve rt to symbol


13/33



4. Setelah anda pilih Convert to symbol maka akan muncul jendela baru seperti padagambar 2.10. bagian name, silahkan anda isi dengan nama Persegi dan typenya andapilih Graphic kemudian anda klik tombol OK.

Gambar 2.10 tampilan menu convert to symbol

5. Graphicpersegi yang kita buat tadi merupakan obyek persegi yang berada pada dunialain. Time line pada graphic sama sekali tidak ada bedanya dengan time line yangberada 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 memasukidunia lain, bisa anda lihat pada gambar 2.11 yang telah saya lingkari merah. Untukkembali lagi ke scene utama, silahkan anda pilih Scene 1. Maka secara otomatis andadibawa 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. Apalagianda yang ingin bisa Adobe Flash, harus tetep semangat dunkz... pastikan posisi andadi Scene 1.

Gambar 2.12 posisi di Scene 1

7. Klik kanan keyframe ke-15 (gambar 2.13) dan anda pilih insert keyframe. Setelahkeyframe muncul diframe 15 (ditandai dengan bulatan hitam), kemudian anda klikkanan diantara frame 2 dan 14, anda pilih Create motion tween. (gambar 2.1 4) andabisa lihat perbedaannya kan antara gambar 2.13 dan gambar 2.14.


14/33



Gambar 2.13 Membuat keyframe

Gambar 2.14 motion tween terbentuk

8. Langkah berikutnya, kita balik lagi ke frame 15. Kemudian anda seleksi obyek persegiyang ada pada frame ke-15 tersebut. Setelah anda seleksi, klik property panel yang adapada 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 obyekyang alphanya sudah kita ubah. Obyek persegi yang kita buat tampak samar dan agakburam.

Gambar 2.15 mengubah property transparasi obyek

9.

Sekarang coba jalankan animasi anda. Tekan enter pada keyboard. Obyek persegi yangkita 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 dariburam/tidak terlihat ke terang. (transparis NOL ke 100%). Untuk membuat efek fade in,sangatlah mudah. Cukup membalik proses yang telah kita buat diatas. Caranya. Kitalanjutkan 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 frameke-1 sampai frame 15, adalah efek FADE OUT sedangkan pada frame 16 ke 30 disebut efekFADE IN. Ternyata animasi itu mudah kan?!?

Sekarang anda sudah mengetahuikan motion tween itu apa?!? Kalau anda masihbinggung dengan motion tween, keyframe, insert blank keyframe, symbol dsb. Coba andapraktikkan lagi beberapa langkah yang ada di BAB II ini. Atau mungkin anda bingung gara-garacemilan anda habis. Ehehe ini cemilan saya juga sudah habis. #curhat

Oke deh., mungkin ada sebagian dari anda masih binggung dengan hal tersebut. Coba kitalatihan lagi membuat animasi yang agak komplek sedikit. Coba kita buat animasi kincir.


15/33



2.2.2 MEMBUAT KINCIRBiar anda semakin mahir dalam menggunakan obyek animasi di flash, saatnya anda

melakukan eksperiment-eksperiment secara terus-menerus. Dan jangan bosan-bosan untukmembuat karya yang jauh lebih baik. tetep cemungudzZ yach!! (Nah, lhowW, kok jadiaLay Gin1 saya.)

Pada bahasan berikut ini, silahkan anda membuat obyek berbentuk kincir. Buatlahsemenarik mungkin. Biar orang yang melihatnya bisa tertarik dengan kincir angin anda. Hehehe kalau anda ahli dalam menggambar, gunakan kreatifitas anda dalam menggambar tersebutuntuk dijadikan animasi. Kalau anda tidak ahli menggambar, sama seperti saya. Bikin kincirnyayach yang sederhana saja. Jangan terlalu kompleks. (aslinya saya tidak bisa kalau bikin kinciryang bagus. Hehehe ) langkah pertama dalam pembuatan animasi kincir adalah, kita buat dulukincirnya. 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 menggunakanSubselection Tool. (lihat tools box hal. 3) disini yang saya seleksi adalah sudut bagiankiri 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 sepertiyang terlihat pada gambar 2.17 (warna orange). dengan menggunakan Line tool. Ataumenekan tombol N pada keyboard. Tujuan garis diagonal tersebut untuk batas saatpemberian warna berbeda.

Gambar 2.17 garis diagonal pembatas

4. Setelah kita membuat garis pembatas tersebut, saatnya kita member warna pada kincirkita. Gunakan selectioan tool (tekan tombol V pada keyboard), kemudian seleksibagian segitiga besar. Segitiga yang berbentuk pyramid (segitiga sebelah kiri). Ubahwarnanya pada fill color atau property menjadi #FF9900. (gambar 2.18)


16/33



Gambar 2.18 perubahan fill color

5. Lakukan langkah yang sama untuk mengubah warna segitiga berwarna hitam sebelahkanan. Ubah warnanya menjadi #FFCC00. Maka hasil dari bagian kincir yang telahkita 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 menjadiseperti pada gambar 2.20

Gambar 2.20 cekung ke dalam

7. Okey, setelah bentuknya kurang lebih seperti gambar 2.20, saatnya kita ubah bentuktersebut 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 besertatypenya = Graphic setelah itu tekan OK


17/33



Gambar 2.21 mengubah menjadi symbol

9. Kita telah membuat symbol baru dengan nama kincir. Buatlah 1 buah kincir utuh darisymbol bernama kincir tersebut. Caranyanya, kita tinggal CTRL+D (Untuk duplikasi).Atau seret symbol kincir ke stage yang berada pada panel library. Susunlah kincirhingga membentuk seperti pada gambar 2.22 untuk memutar bagian kincir hinggatersusun seperti gambar, anda bisa menggunakan Free Transform tool. Atau anda pilihmenu Modify > transform kemudian anda pilih posisi transformasinya.(lihat gambar2.23)

Gambar 2.22 bentuk kincir

Gambar 2.23 menu transform

10.Setelah kincir terbentuk seperti pada gambar 2.22, seleksi semua gambar sepertilangkah 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 ubahmenjadi Kincir utuh. Okey, sekarang kita sudah memiliki obyek symbol kincir


18/33



utuh, anda bisa mempermanis tampilan kincir anda dengan memberikan lingkaran padatitik pusat kincir. Ingat, anda harus klik dobel dulu pada obyek symbol kincir utuhtersebut. Dan anda akan dibawa masuk kedunia lain seperti pada penjelasansebelumnya. (gambar 2.10) hasilnya setelah kita memberikan lingkaran di titik pusatkincir seperti terlihat pada gambar 2.24. apabila anda tidak ingin menambahi lingkarandi titik pusat, its 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 tidakmenambahi 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 sepertipada 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 dunkcaranya, pasti ingat deh, kalau ndak ingat. Yach tinggal klik kanan, kemudian pilihCreate motion tween. Uda jadi kan..?!?! sama seperti pada gambar 2 .13.

14.Langkah berikutnya, adalah mengatur posisi putaran kincir. Pastikan posisi framenyamasih diantara frame ke-2 dan 49. Masuk ke panel property dibawah stage, anda ubahrotatenya dari NONE menjadi CW(searah jarum jam) atau CCW(kebalikan cw). Janganlupa 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-olahberhenti saat akan mengulang putarannya. Ini dikarenakan, gambar antara frame ke-1 dan frameke-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 berikanberikut.


19/33



Untuk menghindari perputaran kincir yang terhenti sejenak, anda bisa mencegah agarlooping yang dilakukan tindak mencapai ke frame-1 atau 50. Karena diframe ini terdapatkesamaan posisi gambar obyek kincir. Untuk menghindari hal tersebut, silahkan anda insertkeyframe pada frame 49, kemudian Remove frame ke-50. Sekarang anda hanya memiliki 49frame dengan gambar masing-masing frame berbeda.

Oh iya, anda bisa menggunakan imajinasi anda untuk membuat seakan-akan kinciranda 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 dalampembuatan sebuah animas. Dan yang gak kalah pentingnya adalah. Harus ada computer, kalautidak 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 tersebutbiasa disebut dengan Motion Guide. Okey, gak perlu banyak basa-basi lagi. Biar anda

semakin memahaminya, silahkan simak tutorialnya. Disini kita masih menggunakan obyekkincir utuh yang telah kita buat tadi. (Menghemat waktu hehe)

1. Buat layer baru dengan nama lintasan, kemudian anda isi dengan gambar garissederhana 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. Biarmanis nanti hasilnya.


20/33



Gambar 2.28 beberapa obyek

3. Langkah berkutnya, silahkan insert keyframe sampai ke frame-15. (layer obyek danlayer Lintasan harap di insert keyframe sampai frame 15)

4. Jadikan layer Lintasan menjadi layer guide. Caranya anda klik kanan pada layerLintasan, 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 tersebutkebawah 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 sesuaidengan lintasannya. Jangan lupa, anda kunci layer lintasan agar tidak bisa diedit.

7. Aktifkan menu View > Snapping > Snap to Objects (CTRL+Shift+/). Menu inidigunakan untuk mempermudah penempelan object kincir pada garis lintasan.

8. Focus kita sekarang pada obyek kincir. Klik keyframe-1 atau frame-1, kemudian denganmenggunakan arrow tool. Klik obyek kincir, dan geser titik pusatnya (Registrationpoint) sehingga menempel ke garis lintasan. Anda akan merasakan seperti ada magnetyang menempel disana. Ini adalah efek dari langkah ke-7 tadi.


21/33



Gambar 2.31 titik pusat menempel

9. Pastikan tetap dilayer obyek, kemudian anda buat motion tween di frame layer Obyektersebut. Masih ingatkan caranya bikin motion tween. Kalau tidak ingat, silahkan bukalagi halaman 12.

10.Ulangi langkah ke-8 dengan menuju ke keyframe ke-2 (frame 15). Dengan posisidiujung 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 punmasih gagal, berarti anda dalam keadaan tidak focus. Coba anda focus, dan memahami yangsaya sampaikan diatas. Pasti anda berhasil. I believe it.

* )Catatan:oh iya, path yang anda buat tadi saat di playing (CTRL+Enter). Akan hilang aliastidak terlihat. Karena obyek tersebut merupakan garis guide untuk gerakan obyek kincir.

2.3 MOTION SHAPEWaduh, mas izham?!?! Apa lagi nih motion shape?!?!

Dont 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 harusmensyaratkan obyek berupa symbol. Sedangkan di motion shape berupa shape. Jadi apabilaobyek 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 eksperimenberikut ini.

2.3.1 MENGUBAH BENTUK OBYEKTeknik 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., kalaudifilm itu. Kita bisa lihat kecanggihan saat Dr. SaipulmenjadiHULK. (bener ndak yach )perubahan bentuk yang kita pelajari disini sebenarnya memiliki konsep sama dengan perubahanbentuk 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 flash2. Jangan lupa menyimpannya terlebih dahulu, biar sewaktu-waktu misalnya ada crash.Gak bingung dan panic. Save dengan nama perubahan.


22/33



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 kanandiantara 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). Andaakan melihat perubahan bentuk obyek lingkaran ke persegi

Gambar 2.34 perubahan bentuk dengan motion shape

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

Gambar 2.35 ada yang salah dengan obyek di Stage


23/33



2.4 MASKINGMasking adalah sebuah fasilitas yang disediakan oleh software flash. Sebenarnya tidak

hanya flash saja yang ada fasilitas masking. Hampir semua software graphic editor memilikifasilitas ini. Pengertian masking sendiri berasal dari kata MASK atau dalam bahasa Indonesiaberarti 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 Masking3. 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 layerbaru, 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 menopengiobyek kincir tadi. Dan hasilnya seperti gambar berikut.

Gambar 2.38 simbol layer Gambar 2.39 obyek di stageberubah setelah dimasking

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


24/33



BAB IIIActionScript

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 mempunyaidasar atau mengenal flash. Tetapi jika sudah mengenalnya, kita tidak bisa lepas dariActionScript karena sangat menyenangkan dan dapat membuat pekerjaan jauh lebih cepat danmudah.Nah, untuk itulah tujuan buku sederhana ini saya buat.

3.1 MENGENAL ACTIONSCRIPTSebelum kita mengenal lebih jauh mengenai actionscript, ada baiknya kita mengenal

terlebih dahulu mengenai apa ituActionScript?!

Sebenarnya sih jawabannya sudah ada saat anda memasuki bab III ini. Biar anda tidakbingung, disini saya mendefinisikan lagi mengenai actionscript. ActionScriptmerupakan bahasapemrogaman flash yang dibangun sebagai cara untuk mengembangkan pemrograman interaktifsecara efisien menggunakan platform aplikasi adobe Flash ActionScript mulai dari animasi yangsederhana sampai dengan yang kompleks sekalipun, penggunaan data, dan aplikasi interfaceyang interaktif. Dan saat ini sudah muncul actionscript 3.0, generasi actionscript ini hampirsama seperti pemrograman JAVA.

Walaupun sudah muncul actionscript 3.0, actionscript yang lama tetap tidak bisaditingalkan dan masih jadi andalan dalam dunia pemrogaman Flash. Yakni actionscript 2.0, dandibuku 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. Andadisuguhi beberapa opsi. Maka, saat anda membuat document baru flash. Anda harus memilihdocument 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. Soalnyaactionscript versi 3.0 lumayan agak kompleks dan tidak mudah dipahami bagi sebagiankalangan yang masih dalam tahap belajar. Maka dari itu, saya membahasnya dibuku ini yangversi 2.0

Gambar 3.1 membuat document baru ActionScript 2.0


25/33



3.2 MEMUTAR KINCIR DENGAN ACTIONSCRIPTInilah keistimewahan kita membuat animasi dengan menggunakan software flash. Kita

bisa membuat animasi dengan otak-atik obyek, seperti yang dibawah di bab II. KitamengAnimasikan obyek dengan memanfaatkan teknik Motion. Dan pada tutorial kali ini kitamenganimasikan Obyek kincir dengan menggunakan pemrogaman. Pemrogaman pada flashdisebut 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 (lihatgambar 3.1)

2. Untuk obyeknya, anda bisa copy-Paste Obyek MovieClip kincir yang telah kita buatpada praktek dibab II. Kita copy dan kita paste pada Library panel. Okey!! Sayaanggap sampai sini anda sudah mengerti prosesnya. Atau, sambil mengasahkemampuan dan kemahiran lagi. Anda bisa membuat kincir baru dengan style yangberbeda 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 namepada property. Caranya, seleksi dulu obyek kincirnya,

kemudian klik panel property. Beri nama kincir pada instance name-nya. (gambar3.3)

Gambar 3.3 ubah I nstance name

Perlu anda ketahui: instance name ini diperlukan dalam pemanggilan oleh


26/33



ActioanScript, sehingga saat memanggil movieclip yang sama. Tidak akan error, karenasudah dibedakan denganInstance nametersebut.

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

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

Gambar 3.4 memberi action pada ke yframe

Gambar 3.5 kotak editor Action

8. Isikan script seperti pada gambar 3.5, setelah itu tutup kotak editor (gambar 3.6). Makaanda akan melihat symbol actionscript pada keyframe (gambar 3.7)

Gambar 3.6 menutup kotak editor Gambar 3.7 muncul symbol


27/33



Pada gambar 3.7 yang saya lingkari merah itu, menunjukkan kalau pada layer action dikeyframe pertama terdapat ActionScript. Symbol tersebut mewakili tanda adanyaactionScript.

9. Selanjutnya, sambil menekan tombol SHIFT. Kita klik di frame ke-5 seleksi diframe 5tersebut, baik layer action atau pun layer kincir. Kemudian anda klik kanan, dan pilihinsert 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 yangkita 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 padagambar 3.9.

setProperty(kincir,_rotation, i*45);pada script property diatas, kita mendeklarasikan property awal dari movieClip yang memilikinama Kincir, kemudian kita atur posisi derajat awalnya yakni senilai i*45. nilai i padaawalnya berupa (i=1)*45.

Berikutnya,i++;

menunjukkan bahwa nilai i ditambah sebanyak i+1 tiap putarannya. Hingga mencapai kondisiseperti 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.


28/33



3.3 MENU INTERAKSIMenu interaksi ini adalah sebuah bentuk animasi yang dapat berinteraksi dengan kita.

Kita bisa melakukan sebuah bentuk interaksi dengan menekan tombol-tombol yang telah kitabuat pada flash. Bentuk-bentuk menu interaksi pun sangat beragam, kita bisa membuatnyasesuai dengan kreatifitas kita.

Misalnya saat kita akan membuat CD interaktif menggunakan FLASH, kita harusmemahami terlebih dahulu mengenai bentuk interaksi ini. Pada bahasan kali ini, menu interaksiinilah yang menjadi ujung tombak saat kita membuat sebuah CD interaktif. Okey deh, tanpabanyak basa-basi lagi. Simak tutorial membuat menu interaksi sederhana berikut ini.

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

Gambar 3.10 layouting blueprint/konsep

Gambar 3.11 Layout se telah dibumbui desain

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


29/33


30/33



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 mempersiapkanbeberapa keyframe yang berisi materi/content dari menu interaksi kita. Caranya, andaklik kanan pada frame 2,3, dan 4 di layer isi. Kita buat KeyFrame baru. Pasti masihingatkan 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 ituVisi Misi, Layanan, atau pun kontak. Ingat, waktu mengisi content harus bedakeyframe. Misalnya, saat anda mengisi content visi misi. Anda harus meletakkannyadiframe ke-2. Tujuannya saat menggunakan menu interaksi, content yang ditampilkantidak kacau.

Gambar 3.19 buat content visi misi dengan text tool


31/33



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

Gambar 3.20 posis i 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 membedakanadalah 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 membuatactionScript menu interaksi. Untuk awalnya, kita beri actionscript stop terlebih dahulupada 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 ditimeline.

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

Gambar 3.22 memberi action pada tombol

Gambar 3.23 actionscript pada tombol

visi misi


32/33


33/33

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. 2011Biografi Penulis

Dedy Izham, Mengenal computer saat duduk di bangku SMK.Sebelumnya, belum mengetahui sama-sekali mengenai computer. Lahirdari keluarga Tidak miskin kurang kaya (keluarga sederhana), sehinggaberanggapan computer adalah barang mewah untuk dibeli.

Bermodalkan DOA, niat dan kemauan yang keras, akhirnya mampumemiliki dan memahami sedikit tentang computer. Memiliki prestasiyang cukup baik di bidang computer. Prestasi ini dibuktikan dengan hasilyang memuaskan dalam suatu kompetisi baik LOKAL maupunNASIONAL tingkat SMA/SMK/umum. Lulus SMK Multimedia pada

tahun 2010, setelah lulus sempat bekerja pada salah satuHome Studio Web Desain di Surabaya.Bekerja di home studio bukanlah pilihannya, ia memilih bekerja untuk memperoleh tambahanbiaya KULIAH. Dan saat ini, ia melanjutkan studi-nya di salah satu UNIVERSITAS SWASTAdi Malang. Ia memilih ke Perguruan Tinggi Swasta bukan berarti tidak di terima di PerguruanTinggi Negeri, akan tetapi telat daftar di PTN (perguruan tinggi negri).

Saat ini, ia sudah keluar dari Home Studio Web Desain di Surabaya.Bermodalkan pengalamanyang 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.

PERHATIAN!!! Anda masih binggung dengan semua materi ditutorial ini.HARAP TENANG!!!Anda tidak perlu memanggil mentor profesional dan harus

membayar m ahal. 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 PEMBELAJARANyang saya tawarkan,

anda akan merasa memiliki GURU PROFESIONAL yang ada didalam komputer

anda pribadi.

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

eBook-Teknik Cepat AdobeFlash

Documents

Transcript of eBook-Teknik Cepat AdobeFlash