.

MODUL INTERAKTIF Teori dan Praktek FLASH 8 Dasar

PPPPTK VEDC MALANG DEPARTEMEN TI Multimedia

MODUL INTERAKTIF Teaching aid merupakan suatu istilah yang digunakan dalam proses pemelajaran, dimana Teaching aid itu merupakan suatu alat digunakan untuk membantu proses pemelajaran agar mempermudah penyajian atau penyampain materi kepada siswa. Teaching aid bisa berupa buku, panduan praktikum, wallchart, media chart, kartu didaktik dan lain-lain. Sedangkan modul interaktif yang berupa CD multimedia interaktif merupakan salah satu media untuk bahan ajar dalam proses kegiatan belajar mengajar. Dengan menggunakan modul interktif maka proses belajar mengajar akan lebih mudah, menarik dan menyenangkan. Dengan memilih menu atau materi yang diinginkan, semua proses belajar terasa lebih mudah dan menarik. Dalam pembuatan materi modul ajar interaktif ada beberapa pengetahuan dasar yang harus dimiliki dan dipahami sebagai landasan dasar untuk melangkah ke dalam proses produksi CD multimedia interaktif sebagai bahan ajar. Dengan menggunakan berbagai media elektronik dalam menjalankan fungsi pendidikan berupa pendidikan berupa modul interaktif sebagai bahan ajar offline, maka memungkinkan staf pengajar dapat menyampaikan materi bahan ajar tanpa harus bertatap muka langsung dengan peserta didik. Dalam pembuatan dan pengembangan modul interaktif terdapat beberapa kebutuhan dasar yang harus dipenuhi, yaitu kemampuan sumber daya manusia, kebutuhan perangkat keras, dan kebutuhan perangkat lunak 1. DASAR FLASH Macromedia flash merupakan salah satu program untuk membuat animasi. Macromedia flash sering digunakan animator untuk pembuatan animasi interaktif. Keunggulan macromedia flash dibanding program yang lain yang sejenis, adalah Membuat tombol interaktif dengan sebuah movie atau obyek lain. Membuat perubahan animasi dari satu bentuk ke bentuk yang lain. Membuat perubahan transparansi warna dalam movie Membuat gerakan animasi dengan mengikuti alur yang telah ditentukan. File yang dibuat bisa dikon!ersi dan dipublikasikan ke dalam beberapa tipe di antaranya adalah swf, html, gif, jpg, png, e"e, mo!. #kuran file flash relatif lebih kecil

%anyak jenis - jenis file yang ada dalam flash. #ntuk itu buat sebuah animasi yang sederhana kemudian simpan dalam sebuah folder baru yang masih kosong dan beri nama terserah, misalnya coba. Kemudian pilih menu file>publish untuk mengekspor animasi yang kita buat kedalam web, maka akan dihasilkan file bertipe fla,html,S&'. Sedangkan untuk membuat modul pembelajaran interaktif yang bisa otomatis jalan dari CD maka harus dibuat file flash yang berekstensi e"e. .fla adalah file yang berisi semua animasi di flash, animasi yang mempunyai beberapa layer, menggunakan beberapa obyek, berapa frame yang digunakan dll semuanya masih tersimpan dalam file ini. (ika membuat animasi tetapi pembuatannya belum selesai bisa dilanjutkan lain waktu. File ini tidak kita perlukan jika animasi sudah dimasukkan ke dalam web tetapi sebaiknya tetap disimpan karena file ini diperlukan jika suatu saat ingin melakukan perubahan dari animasi yang sudah dibuat. (ika kita klik file ini maka kita akan membuka program flash dan pekerjaan animasi kita sudah ada didalamnya. .swf adalah file animasi dalam bentuk yang sudah jadi sehingga tidak bisa lagi di edit. File ini tidak lagi menyimpan data jumlah layer, obyek yang digunakan, dll karena sudah menjadi sebuah tampilan animasi yang hanya bisa dilihat. File inilah yang perlu diikut sertakan dalam web yang berisi animasi. (ika swf buka difile maka akan muncul sebuah program yang dinamakan flash standalone player yaitu sebuah program yang bisa menampilkan animasi flash. )rogram ini akan terinstal dengan sendirinya pada saat kita menginstal program flash. .html adalah file dari html yang sudah memasukkan animasi flash tersebut didalamnya. (ika file diklik ini maka akan masuk ke dalam browser dan menampilkan animasi yang telah dibuat. (ika dilihat source html nya maka dapat dilihat sintag yang memasukkan file coba.swf yaitu file animasi yang sudah jadi ke dalam web. Sintag tersebut tidak perlu dihapalkan. *ang perlu dilakukan adalah mengkopi dan menggabungkan dengan sintag html yang lain sehingga menjadi sebuah web yang utuh. !"#!"ala" K$mp$"!" Flash Sebelum membuat suatu animasi dengan flash, +nda harus terlebih dahulu mengenal komponen dari flash. +dapun tampilan utama dari macromedia flash , adalah sebagai berikut

MENU(AR

TIMELI E

TOOLBOX STAGE

ANEL A!TIO "#AME RO ERTIES

.ambar / 0ampilan #tama %.1.1 M!"uba& Menubar berisi kumpulan menu yang digunakan untuk mengatur aplikasi yang akan dibuat. Menu yang terdapat di macromedia flash , adalah file' edit' insert' modify' text' command' control' windows dan help. %.1.% Toolbox Toolbox berisi kumpulan tool yang digunakan untuk membuat dan memilih isi di dalam Timeline dan Stage. Toolbox terbagi menjadi tool dan modifier. Setiap tool memiliki ukuran Modifier tertentu yang ditampilkan ketika kita memilih tool tersebut. Sebagai contoh, jika kita memilih Text tool maka modifier seperti huruf, ukuran huruf, warna huruf dapat kita atur. Toolbox berisi alat-alat yang digunakan untuk menggambar obyek di stage.

.ambar $ Toolbox

View Tool Arrow Tool Tool ini digunakan untuk memilih suatu objek atau untuk memindahkannya. S$bSelection%Tool Tool ini digunakan untuk merubah suatu objek dengan edit points. Line%Tool Tool ini digunakan untuk membuat suatu garis di stage. Lasso%Tool Tool ini digunakan untuk memilih daerah di objek yang akan diedit. &en Tool Tool yang digunakan untuk menggambar dan merubah bentuk suatu objek dengan menggunakan edit points 2lebih teliti 3 akurat4. Text Tool Tool ini digunakan untuk menuliskan kalimat atau kata-kata. O)al Tool Tool yang digunakan untuk menggambar sebuah lingkaran. #ectangle Tool Tool yang digunakan untuk menggambar sebuah segiempat. !"*il Tool Tool ini digunakan untuk menggambar sebuah objek sesuai dengan yang +nda sukai. (&ush Tool Tool ini sering digunakan untuk memberi warna pada objek bebas. "ree T&a"sf$&m Tool Tool ini digunakan untuk memutar 2rotate4 objek yang +nda buat atau mengubah bentuk objek menjadi bentuk lain. I"+ ($ttl! Tool Tool ini digunakan untuk mengisi warna pada objek yang bordernya telah hilang. 5

ai"t (u*+!t Tool Tool ini digunakan untuk mengisi warna pada objek yang dipilih. E&as!& Tool Tool ini digunakan untuk menghapus objek yang +nda bentuk.

$./.- a"!l *$l$& a"!l yang sering digunakan di flash adalah pa"!l *$l$& window untuk pengatur warna pada obyek 6 obyek yang digambarkan di stage. )ada flash , untuk mengeluarkan pa"!l *$l$& bisa dilakukan dengan cara klik pada fill *$l$& kemudian pilih warna yang diinginkan.

.ambar - )anel Color $./.1 Stage

.ambar 1 Stage Stage merupakan area tempat bekerja membuat animasi. Stage adalah daerah yang berisi semua elemen gambar yang membentuk movie 'lash.. Kita akan selalu bekerja membuat gambar, membuat animasi, dll di tempat ini. )ada 'lash, anda dapat mengontrol seberapa besar layarnya, dan apa warnanya, melalui kotak dialog Mo'ie &roperties. $./.5 Timeline Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie atau animasi. Timeline adalah organisasi dan pengaturan tool yang besar dan kompleks. +nda akan menggunakan keuntunngannya ketika anda membuat animasi. Kemudian anda akan perlu untuk lebih mendalami komponen-komponennya pada bab selanjutnya. Sekarang anda hanya memerlukan untuk mengerti Timeline secara umum.

Timeline +nimasi 'lash bisa diibaratkan sebagai sebuah buku, Timeline merupakan tabel interaktif dari isinya. Setiap adegan seperti sebuah bab, setiap frame seperti halaman. 8majinasikan bahwa anda mendapatkan poin sampai bab /9 pada tabel isinya +nimasi 'lash lebih kompleks daripada buku. Setiap movie :pa#!; dapat menjadi beberapa lembar transparan ditumpuk satu di atas yang lain. 'lash menjaga track dari :sheet; ini yang dinamakan layers. Dan keseluruhan buku muncul menjadi gerak seperti anda bergerak melalui tabel isi, dengan beberapa tangan yang tak terlihat membalik halaman. $./.7 Action "rame Action frame merupakan window yang digunakan untuk menuliskan Action Script untuk 'lash ,. %iasanya Action Script digunakan untuk mengendalikan objek yang +nda buat sesuai dengan keinginan +nda.

<

.ambar actions frame $./.< &roperties &roperties, merupakan window yang digunakan untuk mengatur property serta animasi dari objek yang buat.

.ambar Properties

(indows Utilit, pa-a Flash $.$./ Library%% Window ini digunakan untuk menampilkan objek-objek yang kita import dari luar lingkungan 'lash , maupun objek-objek bawaan dari 'lash , itupun sendiri. #ntuk menggunakannya dapat menekan tombol '// atau ctrl=> pada Keyboard atau dari menu Window pilih Library kemudian drag 3 drop obyek yang diinginkan ke stage.

.ambar Library +da beberapa cara untuk memasukan obyek dalam Library . Diantaranya yaitu /. %uat $by!+ kemudian diubah ke dalam bentuk symbol, maka $by!+ tersebut otomatis akan masuk dalam Library%. $. Mengambil obyek yang sudah ada diluar aplikasi macromedia flash. Klik file > import% > import t$ Library%. ?byek tersebut otomatis akan ada dalam Library%. %.%.% D$*um!"t &roperties (indow

Window ini digunakan untuk merubah setting 2baik itu ukuran, warna, maupun kecepatan animasi4 pada dokumen yang berada pada stage. #ntuk menggunakannya +nda harus menekan tombol trl!" secara bersamaan pada Keyboard +nda, atau dari menu Modify pilih )oc$ment#.)ada window yang satu ini +nda dapat merubah warna bac$gro%nd dari dokumen +nda beserta ukurannya.

$.$.- (indow Layer &roperties Merupakan window dimana +nda dapat mengatur setting dari layer yang +nda buat sesuai dengan keinginan +nda. Melalui windowni +nda dapat mengatur bagaimana sebuah animasi berjalan. #ntuk menjalankannya +nda dapat memilih menu Modify lalu pilih Layer*

$.$.1 (indow%Scene Merupakan window dimana +nda dapat mengatur Scene yang ada. Melalui window ini. Scene dapat ditambahkan, dihapus atau diduplikasikan. #ntuk mengaktifkannya +nda dapat menekan secara bersamaan tombol Shift.F% melalui Keyboard, atau dengan memilih menu Modify %lalu Scene#.

%./

K$"s!p Shape'Symbol -a" Library% @

Shape'Symbol dan Library% %merupakan bagian yang penting dalam membuat animasi dengan flash. #ntuk membuat suatu obyek bisa beranimasi, maka obyek tersebut diubah menjadi symbol. )ada subbab ini akan membahas tentang symbol, bagaimana symbol dibuat, bekerja, diatur dan di perbaiki. Shape merupakan obyek yang belum diubah ke dalam simbol. +,-,. Symbol Dengan merubah suatu $by!+ menjadi symbol, itu artinya $by!+ tersebut sudah menjadi bentuk yang pasti dan tidak bisa memanipulasinya lagi didalam stage misalnya merubah warna, memberikan coretan diatasnya atau yang lainnya. (adi sebelum merubah suatu o byek menjadi symbol maka sebaiknya obyek tersebut harus benar benar sudah siap untuk digunakan sehingga tidak lagi ingin melakukan perubahan terhadap o byek tersebut. 0etapi kita bisa melakukan operasi merubah bentuk di dalam stage seperti memutar, memperbesar atau memindahkannya. 0erdapat - jenis symbol yang digunakan di 'lash, yaitu mo'ie clip' b$tton' graphic. Sebelum sebuah obyek dirubah menjadi symbol, blok terlebih dahulu obyek tersebut dengan menggunakan arrow tool yang ada pada toolbar bagian kiri atas. atau tekan ', sehingga

(ika suatu obyek sudah diblok maka obyek tersebut akan muncul titik titik kecil pada permukaanya.Selanjutnya pilih menu insert>con'ert % to symbol muncul menu seperti berikut

.ambar

Symbol Properties

8sikan nama sesuai dengan keinginan pada bagian name. Dan pada bagian behavior terdapat tiga pilihan yaitu mo'ie clip b$tton graphic %./.% obyek digunakan untuk beranimasi obyek dibuat sebagai tombol 0 obyek dibuat sebagai gambar yang statis atau tidak beranimasi Simb$l pa-a Library% Library merupakan sebuah tempat penyimpan symbol yang sudah kita buat. (ika membuat sebuah symbol maka secara otomatis symbol tersebut akan masuk ke dalam Library % . Symbol tersebut masih tersimpan dalam Library% %walaupun symbol yang sudah dihapus. /9

#ntuk menampilan Library%, pilih window>Library% %dari m!"u ba&. Library%%window akan muncul. Daftar semua symbol yang ada ditampilkan di bawah preview window. &con disebelah nama symbol menunjukkan tipe dari simbol 2beha!ior4. #ntuk melihat simbol di p&!'iew window' klik simbol yang ingin ditampilkan. icon graphic%beha'ior icon mo'ie clip%beha'ior icon b$tton%beha'ior #ntuk mengatur simbol yang ada, kita bisa menggunakan folder. Klik icon :new folder; untuk membuat folder baru.

#ntuk menghapus simbol dari Library % %klik icon :delete1

. )erlu diperhatikan

bahwa jika kita menggunakan tombol delete maka symbol yang telah hilang tidak bisa dikembalikan lagi serta tidak bisa lagi menggunakan fasilitas $ndo untuk mengembalikannya. $.-.- Instances Instances adalah duplikat dari symbol yang ada dalam stage. Kita bisa menduplikat symbol yang ada dalam Library% %berapapun jumlahnya. #ntuk menggunakan &nstances dari simbol, kita pindahkan simbol ke dalam stage dengan cara mendragnya. Simbol yang sesungguhnya tetap di Library%%sedangkan yang di dalam stage adalah Instance% dari simbol. Drawing tool tidak dapat digunakan terhadap &nstance hal ini disebabkan karena &nstance merupakan duplikat dari symbol. 0etapi kita masih bisa merubah &nstance misal //

memutar, memperbesar, atau memperkecil. (ika &nstance kita rubah maka hal itu tidak berpengaruh terhadap simbol sesungguhnya. 8nilah keuntungan utama dari simbol dan &nstance. Kita bisa menggunakan banyak &nstance berdasarkan satu simbol. Sebagai contoh, kita membutuhkan empat lingkaran merah. Maka kita hanya perlu memindahkan &nstance dari simbol :ball; ke dalam stage sebanyak empat kali. Kita bisa membuat perubahan yang berbeda dari setiap &nstance tersebut.

.ambar &nstance dari satu simbol %./.2 Ma"ipulasi Oby!+ Shape )ada obyek Shape dapat dibentuk atau dirubah dari bentuk dasar yang sederhana menjadi bentuk yang disesuaikan dengan kebutuhan untuk animasi dengan memanipulasi Shape menggunakan fasilitas yang ada di flash. 'asilitas itu diantaranya Selection tool, arrow tool serta fasiltas untuk pewarnaan. %./.2.1 Selection Tool Selection Tool merupakan tanda suatu bidang yang sudah diseleksi adalah terdapat titik titik dalam bidang tersebut. Selection 0oo pada flash hanya bisa menyeleksi suatu bidang atau obyek dan tidak bisa membuat seleksi pada daerah kosong dalam stage. Lass$ tool Tool yang digunakan untuk membuat seleksi pada flash hanya satu yaitu lasso tool. #ntuk membuat Selection menggunakan lasso tool, klik, tahan, dan gerakkan mo%se. )enggunaan lasso tool mirip dengan penggunaan pencil tool pada in$ mode. Selection yang kita buat akan tampak berupa area berpola dan terdapat titik titik. /$

>asso tool modifier terdiri dari dan )olygon mode. 'agic Wand

Magic wand, Magic wand Properties

Magic wand dan Magic wand Properties digunakan untuk membuat Selection pada bidang yang fungsinya mirip dengan magic wand pada photoshop yaitu untuk menyeleksi suatu bidang yang memiliki warna sama. Polygon 'ode )olygon mode memungkinkan kita membuat Selection berupa daerah yang tertutup oleh garis-garis lurus. #ntuk membuat Selection dengan polygon mode %./.2.% Arrow Tool Arrow tool memiliki fungsi yang banyak diflash diantaranya, yaitu untuk membuat seleksi pada suatu bidang baik secara keseluruhan atau sebagian. (ika ingin membuat seleksi keseluruhan dari suatu obyek maka cukup dengan mengklik obyek tersebut. Arrow tool juga bisa digunakan untuk menggeser obyek. Caranya klik obyek yang ingin dipindah kemudian geser ketempat yang diinginkan. 'ungsi lain dari arrow tool adalah untuk merubah bentuk obyek. +da beberapa cara dalam merubah bentuk obyek dengan menggunakan arrow tool. Cara yang pertama, klik bagian tepi dari suatu obyek kemudian geser ke arah yang diinginkan

mo%se letakkan pada tepi obyek .ambar 'ungsi arrow tool

geser arrow tool

Selain menggunakan arrow tool, obyek bisa juga di putar dengan menggunakan rotate tool yang merupakan bagian dari free t&a"sf$&m tool, dengan cara sebagai berikut - klik $by!+ kemudian pilih free t&a"sf$&m tool yang ada di tool box. demgam titik pembantu untuk

- arahkan mo%se ke obyek sehingga muncul kotak rotate memutar2rotate4 dan memiringkan 2skew4.

/-

Contoh free transform tool #ntuk melakukan Scale, klik bagian yang ingin kita ubah lalu klik tombol Scale sehingga muncul kotak Scale dengan titik pembantu. .eser titik pembantu tersebut sehingga kita memperoleh bentuk yang lebih besar ataupun lebih kecil dari bentuk aslinya.

.ambar %./.2./ !wa&"aa" Gradient

obyek yang dimanipulasi dengan Scale

)engaturan dari warna gradien dapat dilakukan pada panel fill untuk radial gradient. &arna gradien juga bisa di akses dengan cara klik windows > *$l$& mi3!& atau tekan tombol kombinasi shift . F4. Sehinnga akan muncul jendela sebagai beikut

/1

.ambar

jendela color mi"er

Dalam panel tersebut terdapat dua pilihan gradient yaitu linear gradient dan radial gradient. >inear gradient adalah gradient yang perubahan warnanya mendatar mengikuti garis lurus. Sedangkan radial gradient adalah gradien yang warnanya berubah membentuk suatu lingkaran.

)ewarnaan gradient Ketika menggunakan gradient sebagai warna isi kita bisa mengatur orientasi dari warna tersebut. %ila menggunakan linear gradient kita bisa menentukan horiAontal !ertikal ataupun diagonal. (ika kita menggunakan paint bucket untuk memberi warna dengan orientasi !ertikal kita hanya perlu menggeser mo%se secara !ertikal dari atas ke bawah melewati bentuk yang ingin kita beri warna atau sebaliknya dari bawah ke atas. Bal sama juga berlaku untuk horisontal kita hanya perlu menggeser mo%se secara horisontal dari kiri ke kanan atau sebaliknya. %ila menggunakan Cadial (radient kita bisa menentukan letak titik pusatnya. (ika kita menggunakan paint bucket tool untuk memberi warna maka titik tempat kita mengklik paint bucket tool tersebut menjadi titik pusat dari radial gradient. Titi+ pusat

)aint bucket tool dan gradient %./.5 M!ma"ipulasi Symbol

color

Cara memanipulasi symbol harus menggunakan cara yang berbeda dengan jika kita memanipulasi obyek. #ntuk memanipulasi obyek dapat memanfaatkan tool yang ada di tool box. Sedangkan untuk memanipulasi symbol dapat dilakukan dengan cara berikut ini. Mengedit symbol bisa dilakukan melalui stage symbol. Stage symbol adalah suatu ruangan khusus yang digunakan untuk mengedit obyek dari symbol tersebut. Stage symbol ini tidak mempunyai hubungan dengan stage utama. #ntuk merubah simbol, klik kanan simbol tersebut kemudian pilih )dit. Maka stage utama akan berubah menjadi stage simbol yang ditandai dengan tanda silang ditengahnya. /5

Didalam stage symbol tersebut kita bisa melakukan apa saja terhadap obyek, baik diubah warnanya, bentuknya atau ditambahkan obyek yang lain, jadi semua operasi dari toolbox bisa dilakukan terhadap obyek tersebut. (ika symbol sudah diperbaiki tersebut maka kita kembali ke stage utama dengan menekan tombol Scene / seperti gambar diatas dan obyek yang ada di Library akan berubah sesuai dengan perubahan yang baru dibuat.

&nstance sebelum obyek diubah

&nstance setelah obyek diubah

)erubahan &nstances )erubahan yang dilakukan pada symbol akan mempengaruhi semua &nstance yang berasal dari symbol yang sama. Sebagai contoh symbol lingkaran, misalkan pada lingkaran baru ditambah dengan warna lain ditengahnya maka semua &nstance akan ikut berubah.

DASAR ANIMASI +nimasi merupakan satu fungsi utama dari 'lash. +nimasi, dan cara pembuatannya

tidak sesederhana menggerakkan sesuatu dari titik + ke titik %. +da banyak faktor yang harus dipertimbangkan untuk membuat animasi yang efektif dan efisien. +nimasi pada awalnya berupa kumpulan atau potongan gambar yang ditampilkan bergantian secara cepat. Karena keterbatasan mata kita, kita tidak bisa membedakan setiap gambar yang satu dengan yang lainya dan yang tampak dalam mata kita adalah sebuah gerakan yang disebut animasi. Dalam film, setiap bagian gambar itu disebut frame. Frame frame tersebut berganti dengan kecepatan tertentu sehingga tidak nampak oleh mata manusia. Kecepatan banyaknya frame yang ditampilkan dihitung dalam satuan frame per detik2fps D frame per second4. 'ilm yang kita saksikan di bioskop menampilkan $1 frame per detik. Eideotape dan tele!isi /7

menampilkan -9 frame per detik. Semakin tinggi kecepatan dari frame maka gambar yang dihasilkan akan semakin halus tetapi kerugiannya adalah memerlukan jumlah frame yang lebih banyak dengan waktu yang sama. Misalnya film kecepatan 59 frame perdetik lebih baik daripada $5 frame perdetik, tetapi dengan waktu yang sama misal dua jam, untuk kecepatan 59 frame perdetik membutuhkan lebih banyak frame daripada yang kecepatannya $5 frame perdetik dan itu berarti sebuah pemborosan. /.1 Timeline Didalam flash frame-frame dari animasi diletakkan dalam bagian Timeline. Ditempat tersebut kita dapat mengatur frame yang digunakan untuk animasi. didalam Timeline terdapat Timeline header yaitu bagian yang terdapat angka /, 5, /9, dst itu berguna untuk menunjukkan letak frame. (adi jika kita membuat sebuah animasi maka gerakan dari gambar akan dimulai dari frame ke satu, dilanjutkan kedua dan seterusnya hingga animasi berakhir. Timeline- header playhead

Timeline Playhead yang selanjutnya kita sebut sebagai penunjuk frame yaitu garis !ertikal berwarna merah berguna untuk menunjukkan posisi dari frame yang ditampilkan pada stage. Playhead dapat dipindah ke frame yang kita inginkan cukup dengan mengklik frame tersebut. Misalnya terdapat animasi bola yang bergerak dari kiri ke kanan.

Playhead diletakkan pada frame / maka stage utama akan menampilkan gambar yang ada dalam frame /

Playhead diletakkan pada frame /9 maka stage utama menampilkan gambar yang ada dalam frame /9

/<

/.% !"##u"aa" Layer !ontrol Didalam flash juga terdapat layer yang fungsinya sama dengan didalam photoshop yaitu untuk memisahkan beberapa gambar atau animasi. Layer digunakan untuk menggabungkan beberapa gambar menjadi satu gambar. Setiap gambar diletakkan dalam satu lapisan layer dan digabungkan dengan lapisan lapisan layer yang lain sehingga membentuk gambar. >apisan tersebut saling bertumpuk sehingga menghasilkan sebuah gambar. .ambar yang berada pada layer atas maka akan berada pada tumpukan yang paling atas dan bisa menutupi tumpukan gambar yang berada dibawahnya. )ada saat membuat gambar baru maka secara default akan mempunyai sebuah layer yaitu layer bac$gro%nd. Layer tersebut adalah layer dasar didalam membuat desain. (ika kita membuat beberapa layer baru maka layer bac$gro%nd akan tetap berada pada lapisan yang terbawah. Sebaiknya dalam membuat desain, setiap obyek berada pada layer yang berbeda. Sehingga jika memanipulasi salah satu o byek maka perubahannya tidak akan mempengaruhi obyek yang lain.

Layer control *ew Layer *ew layer digunakan untuk menambah layer di dalam Timeline (%ide layer +da dua tipe dari layer yaitu mas$ dan g%ide. Keduanya digunakan untuk animasi yang khusus dan akan dijelaskan pada bab selanjutnya. +elete layer +elete layer digunakan untuk menghapus layer. ,ide-Show layer

/,

fungsinya sama dengan pada photoshop yaitu untuk menampilkan atau menyembunyikan suatu layer
.ambar ,ide-Show layer

Loc$- .nloc$ layer Kita bisa melindungi layer dengan cara

.ambar Loc$-

menguncinya sehingga tidak bisa kita ubah ketika kita sedang bekerja dengan layer lainnya.
.nloc$ layer

/%tline layer /%tline layer digunakan untuk menyembunyikan obyek dan hanya menampilkan tepinya saja.

/%tline layer

-,-

/eyframe )ada film animasi, memainkan $1 frame perdetik dengan durasi waktu @9 menit,

membutuhkan /$@799 frame yang harus dibuat. Sebelum ada bantuan komputer semua frame tersebut harus dibuat secara manual satu persatu sehingga membutuhkan waktu yang sangat lama. Dalam flash kita tidak perlu membuat frame satu persatu persatu karena dibantu oleh adanya Keyframe. KeyFrame adalah frame yang berperan sebagai titik referensi, yang biasanya menggambarkan momen waktu utama. Sebagai contoh jika ingin membuat animasi lari jarak pendek /99 meter, maka kita bisa memiliki Key frame berikut Key frame / pelari berdiri Key frame $ pelari menempatkan posisi kakinya Key frame - pelari mengambil posisi siap Key frame 1 pelari melawati garis star 0anda bahwa suatu frame sudah menjadi Keyframe adalah adanya bulatan kecil berwarna hitam pada frame tersebut,

Keyframe /@

Misalkan dari -79 frame tersebut, empat diantaranya kita jadikan Keyframe yaitu sebagai titik referensi, sedangkan sisanya disebut sebagai &n01etween frame. &n01etween Frame berfungsi untuk memainkan film diantara Key Frame. &n01etween frame ini akan menjembatani keadaan transisi dari satu Key Frame ke Key Frame yang lain. Misal Key frame yang pertama adalah gambar bola disebelah kiri, dan Keyframe yang kedua gambar bola disebelah kanan, maka in- betweeen framenya adalah gambar perubahan letak bola secara perlahan dari kiri ke kanan.

&n01etween frame insert Keyframe Menu insert Keyframe itu artinya adalah kita memasukkan Keyframe ke dalam frame tersebut sekaligus mengkopi gambar yang ada dalam Keyframe sebelumnya, misalnya

kemudian kita insert Keyframe pada frame $9, pada Keyframe /9 terdapat gambar bola maka gambar yang ada di frame /9 akan terkopi pada frame $9

.ambar insert Keyframe

insert blan$ Keyframe (ika kita memilih blank Keyframe itu berarti kita mengisikan Keyframe pada frame tersebut dan isinya masih kosong, belum terdapat gambar apapun. +nimasi Sederhana dengan dua Keyframe #ntuk membuat sebuah animasi minimal kita harus menggunakan dua buah Keyframe. Keyframe yang pertama diberi suatu gambar, dan keframe yang kedua diberikan gambar yang berbeda, misalnya berbeda letak atau warna. Kemudian kita gerakkan diantara keduanya sehingga terjadi perubahan yang perlahan lahan dari Keyframe yang pertama hingga Keyframe yang kedua, itulah yang disebut sebagai animasi.Sebagi contoh sederhananya adalah sebagai berikut $9

/. %uat file baru dan buat sebuah obyek sederhana didalamnya, misalnya sebuah lingkaran $. %lok gambar bola tersebut dengan menggunakan arrow tool yang ada pada toolbar

bagian kanan atas. Kemudian pilih menu insert>con'ert % to symbol dan isikan option grafik atau movie clip. Seperti telah dijelaskan pada bab sebelumnya bahwa o byek yang akan kita gunakan untuk animasi sebaiknya diubah terlebih dahulu menjadi symbol. -. ?byek yang baru saja kita buat berada pada frame /, sekarang kita akan membuat sebuah Keyframe di frame $9 dan mengkopi gambar yang ada di frame / dengan cara klik kanan pada frame $9 dan pilih menu insert Keyframe.

Keyframe / 1. Sekarang kita sudah mempunyai dua

Keyframe $

buah

Keyframe dengan dua gambar yang sama. +gar membentuk suatu animasi maka gambar yang ada pada Keyframe pertama harus berbeda dengan gambar yang ada pada Keyframe kedua karena konsep dari animasi adalah adanya suatu perubahan. ?leh karena itu agar terdapat perbedaan maka geser gambar yang ada pada frame $9 ke arah kanan dengan jarak secukupnya.

.ambar pada Keyframe /

.ambar pada Keyframe $

5. Karena gambar yang dipindah adalah gambar yang ada pada frame $9 maka gambar yang ada pada frame / masih tetap ditempatnya semula sehingga gambar pada Keyframe / dan Keyframe $ terdapat perbedaan letak. 1 Selanjutnya letakkan penunjuk frame pada frame/ dan kita gerakkan lingkaran tersebut dari kiri ke kanan dengan menggunakan panel frame. Dalam panel frame pilih menu motion.

$/

Setelah dipilih menu motion maka &n01etween frame akan berubah menjadi seperti disamping, itu artinya sudah terdapat gerakan diantara kedua Keyframe.

#ntuk menjalankan hasilnya, pilih menu control>test mo'ie atau tekan tombok kombinasi *t&l.enter jika langkah langkah yang disebutkan diatas sudah dilakukan dengan benar maka akan muncul animasi lingkaran yang bergerak dari kiri ke kanan.

/.2 M!"#atu& Mo'ie &roperties Sebelum membuat sebuah animasi kita harus melakukan setting dari animasi yang akan kita buat. #ntuk itu pilih &roperties yang dibagian bawah stage seperti gambar dibawah

'ovie Properties

Frame rate

digunakan untuk mengatur kecepatan dari animasi seperti yang telah dijelaskan pada bab sebelumnya. Didalam animasi flash kecepatan yang optimal adalah /$ fps. kita bisa menambah atau mengurangi kecepatan file tersebut. (ika semakin kecil kecepatannya maka ukuran file lebih kecil tetapi gambar akan tampak patah patah. Dan begitu juga sebaliknya.

Si2e %ackgroud

untuk mengatur ukuran dari stage, dan juga ukuran animasi pada saat dimasukkan dalam web. Satuannya bisa diubah pada ruler units. untuk menentukan warna dari bac$gro%nd

/.5 A"imasi p!& "rame /.5.1 K$"s!p Dasa& A"imasi p!& "rame )enggunaan animasi sederhana menggunana in between frame maka dapat kita gunakan animasi frame by frame. tidak bisa digunakan untuk membuat animasi yang mempunyai gerakan alamiah. #ntuk mengatasi hal tersebut

$$

Kerugian dalam pembuatan animasi frame by frame adalah kita harus mengisikan gambar satu persatu pada tiap tiap frame sehingga membutuhkan waktu yang lama. #ntuk itu dalam membuat sebuah animasi, tidak perlu menggunakan animasi frame by frame untuk keseluruhan animasi tetapi hanya bagian bagian yang diperlukan saja, sedangkan bagian yang lainnya dapat kita gunakan tweening motion atau Shape. (adi dalam keseluruhan sebuah animasi merupakan gabungan dari animasi frame by frame, tweening motion, dan tweening Shape.

Keyframe per frame Misalnya saja membuat animasi gerakan bola menggunakan animasi per frame, langkah yang dilakukan adalah sebagai berikut - buat simbol graphic pada layer /2nama layer bola4 yang nantinya berfungsi sebagai lantai dan diberi nama floor dengan posisi ada di frame /. - buat obyek bola pada layer $2nama layer floor4, ubah bola tersebut menjadi simbol mo'ie clip, dengan posisi ada di frame /. - kemudian mulai buat animasinya dengan meng- insert Key frame pada frame ke $ dan geser posisi bola. - #langi untuk meng-insert Key frame pada tiap frame sampai frame ke /9 dan geser posisi bola sehingga tercipta suatu gerakan bola yang terpantul. - kemudian lakukan test movie

+nimasi bola pantul /.5.% M!"##u"a+a" Onion%s0inning

Dalam pembuatan animasi frame by frame kita bisa menggunakan fasilitas /nion s$inning. Dengan /nion s$inning kita bisa melihat keadaan dari Key frame sebelumnya atau $-

sesudahnya dari satu frame tertentu. #ntuk mengaktifkan fungsi /nion s$inning, klik salah satu tombol /nion s$inning yaitu /nion s$inning b%tton b%tton atau /nion s$inning o%tline yang terletak pada bagian bawah Timeline. )erbedaan antara /nion s$inning dan

/nion s$inning o%tline adalah pada /nion s$inning o%tline keadaan Key frame sebelumnya muncul dalam bentuk garis luar 2o%tline4.

)emanfaatan onion skining Keuntungan dari animasi frame by frame ini dibandingkan dengan tweening adalah kita bisa mengedit gambar yang ada dalam tiap tiap frame sesuai dengan keinginan kita sehingga kita lebih bebas dalam berkreasi.

/.6 G$ide Layer )ada pembuatan gerakan obyek dengan menggunakan motion tween biasa maka gerakan dari obyek akan membentuk gerakan yang mengikuti garis lurus dari o byek yang pertama menuju obyek yang terakhir. Dengan menggunakan G$ide layer kita bisa membuat gerakan dari obyek mengikuti lintasan tertentu sesuai dengan yang tentukan. >intasan yang dibuat harus diletakkan dalam sebuah layer yang dinamakan dengan g%ide layer. Layer tersebut khusus digunakan untuk lintasan dari suatu o byek. >intasan yang berada didalam g$ide layer tidak akan muncul pada saat animasi di publish karena g$ide% layer hanya berfungsi sebagai pemandu. (ika obyek apapun diletakan di g$ide layer juga tidak akan tampak pada saat animasi dipublish. $1

(%ide layer dapat kita munculkan dengan mengklik tanda

yang berada pada

Timeline bagian kiri bawah. Setelah g%ide layer terbentuk maka bisa dibuat lintasan di layer tersebut sesuai animasi yang akan dibuat. )angkal dan ujung lintasan yang dibuat sampai bersatu, karena obyek akan bergerak menurut lintasan yang berawal dari pangkal hingga ke ujung.

)angkal >intasan pada

ujung g%ide layer

+gar sebuah obyek dapat mengikuti lintasan yang telah dibuat maka obyek tersebut harus dalam bentuk symbol 2graphic atau movie clip4. Kemudian tentukan panjang atau jumlah frame dari lintasan yang akan digunakan oleh obyek mengikuti lintasan. %uat Keyframe di awal dan akhir frame, obyek yang berada di awal frame diletakkan pada pangkal lintasan dan obyek yang berada di akhir frame diletakkan diujung frame. Kemudian kedua obyek digerakan dengan menggunakan tweening motion. /.7 8$"t$h A"imasi S!-!&ha"a /.7.1 9amba& b!&ubah b!"tu+ Contoh ini adalah contoh yang paling mudah yaitu dengan menggunakan tweening Shape, tweening Shape merupakan animasi perubahan bentuk 2Shape4. /. %uat file baru dan buat sebuah obyek didalamnya, misal lingkaran dengan warna terserah. #ntuk kali ini karena menggunakan tweening Shape maka obyek tidak perlu diubah menjadi symbol. .ambar yang kita buat tersebut berada pada frame / $. &nsert blank Keyframe pada frame akhir animasi, misal $9 dengan mengklik kanan frame tersebut dan memilih menu insert blank Keyframe. Kedua gambar tersebut harus terdapat pada layer yang sama.

-. %uat pada frame $9 tersebut sebuah gambar yang berbeda bentuk maupun warnanya dengan gambar pada frame /, misal persegi empat $5

Sekarang kita sudah mempunyai dua buah Keyframe dan didalamnya terdapat dua obyek yang berbeda, selanjutnya akan kita gerakkan diantara keduanya dengan menggunakan tweening Shape.letakkan penunjuk frame pada frame / kemudian klik diantara kedua Keyframe, pilih option tween Shape% pada &roperties. Setelah itu test movienya dengan menekan *t&l.enter. /.7.% A"imasi p!&ubaha" tulisa" #ntuk membuat tulisan yang berubah menjadi tulisan yang lain caranya hampir sama dengan contoh diatas tetapi dengan menambahkan fungsi brea$ apart. /. %uat file baru dan buat tulisan didalamnya. %lok tulisan tersebut kemudian pilih menu modify>brea0%apart%atau tekan *t&l.b sebanyak $ kali.

0ulisan yang telah di brea$ apart $. &nsert blank Keyframe di frame $9 dan buat tulisan yang lain. Kemudian pilih menu modify>brea0%apart %atau tekan *t&l.b sebanyak $ kali. Sebaiknya tulisan yang dibuat pada frame $9 mempunyai lebar dan tinggi yang tidak berbeda jauh dengan tulisan pada frame /. -. >etakkan penunjuk frame pada frame / dan kita perintahkan tweening Shape dengan pilih option tween Shape pada &roperties.

)roses perubahan tulisan secara perlahan /.7./ Oby!+ m!"#ila"# #ntuk membuat gambar yang menghilang secara perlahan lahan dengan menggunakan fasilitas alpha yang ada dalam panel color /. %uat file baru kemudian dan sebuah obyek didalamnya, misal $. #bah obyek tersebut menjadi symbol dengan cara memblok dan pilih menu insert>con'ert%to symbol atau tekan F:. )ilih graphic atau movieclip lingkaran obyek option

$7

-. Kopi gambar yang ada pada frame / ke dalam frame $9 dengan cara klik kanan frame $9

dan pilih menu insert Keyframe. 1. Sekarang gambar yang ada pada frame $9 kita hilangkan dengan menggunakan effect alpha. Klik terlebih dahulu obyeknya kemudian pilih &roperties ; *$l$&. )ada *$l$& tersebut pilih option alpha dan isikan setting transparansinya menjadi 9F sehingga gambar menjadi menghilang, 5. kembalikan penunjuk frame ke frame / dan kita gerakkan gambar dengan menggunakan tweening motion pada panel frame. /.5./ A"imasi Tulisa" (!&puta&

Membuat tulisan yang tampak berputar dengan sumbu garis !ertikal dengan menggunakan fungsi Scale. /. buat file baru dan buat sebuah tulisan didalamnya. $. insert Key frame pada frame dua puluh

-. kurangi lebar dari tulisan yang ada pada frame $9 sehingga hampir menyatu membentuk sebuah garis dengan menggunakan Scale. Caranya klik kanan tulisan tersebut dan pilih menu Scale. #sahakan tulisan yang diperkecil tersebut letaknya ditengah dari tulisan sebelumnya. 1. kembali keframe / dan berikan tweening motion 5. selanjutnya kita buat tulisan kembali membesar dengan bentuk yang terbalik. &nsert Keyframe pada frame $/, sehingga gambar pada frame $9 terkopi ke frame $/ 7. insert Keyframe lagi pada frame 19.

<. #bah tulisan yang ada pada frame 19. klik kanan tulisan dan pilih menu Scale. ,. geser sisi sebelah kiri ke arah kanan, dan sisi sebelah kanan ke arah kiri sehingga menghasilkan tulisan yang terbalik. $<

.eser ke kiri geser ke kanan )roses rotate hasilnya #sahakan lebar dari tulisan yang terbalik tersebut sama dengan tulisan yang dibuat pertama kali dan terletak pada tempat yang sama @. kembali ke frame $/ dan gerakkan dengan menggunakan tweening motion

/9. animasi diatas sudah bisa dicoba, tetapi masih belum sempurna. 0ulisan berputar hanya /,99 sehingga masih perlu dilanjutkan ke frame berikutnya agar tulisan tampak berputar -799 penuh dengan cara yang hampir sama seperti contoh diatas. /.7.2 A"imasi $by!+ m!"#i+uti path )ada contoh berikut mengilustrasikan gerakan obyek bola mengikuti path atau jalur yang dibuat dengan menggunakan fasilitas g$ide layer. +dapun langkah 6 langkah membuatnya adalah sebagai berikut /. %uat obyek yang sederhana yang akan kita gerakkan dengan menggunakan g%ide layer, misal sebuah lingkaran $. )ada frame ke / ubah obyek tersebut menjadi simbol mo'ie clip dengan cara blok obyeknya dan pilih menu insert>con'ert%to symbol atau tekan F: -. Kemudian tentukan frame akhir dari animasi. (umlah frame tergantung dari kebutuhan, biasanya disesuaikan dengan panjang lintasan dan lama waktu yang dibutuhkan. Misalkan frame ke 59. 1. %uat g%ide layer dengan menekan tombol g%ide layer baru. 5. Sekarang kita akan bekerja di g%ide layer dan pastikan bahwa aktif layer yaitu tanda yang berbentuk pena berada di g%ide layer sehingga muncul layer yang

aktif layer

$,

7. %uat lintasan sesuai dengan kebutuhan di layer tersebut dan di frame pertama letak frame dari lintasan <. Kemudian pindah ke layer / pada layer tersebut dan frame yang pertama gerakkan obyek menuju pangkal dari lintasan. letakkan pusat dari obyek tepat berada di pangkal dari lintasan. (ika letaknya sudah tepat akan muncul lingkaran kecil di pusat obyek. (ika lingkaran kecil tersebut masih belum tampak berarti letak obyek belum tepat berada di pangkal lintasan.
.ambar bola diletakan dipangkal lintasan frame /

,. kemudian kita pindah ke frame yang terakhir yang dalam contoh ini adalah frame terdapat 59 dan ditempat Sama tersebut seperti Keyframe.

langkah pada nomor <, kita letakkan pusat dari obyek tepat pada ujung lintasan.
%ola diletakan diujung lintasan frame 59

@. Setelah buat motion tweening untuk membuat animasinya dengan jalan klik kanan pada Timeline antara frame ke / dan frame 59 pada layer 1 pilih create motion tween. Kemudian test movie dengan menekan *t&l.enter.

$@

/.7.5 A"imasi m!"##u"a+a" mas0 'as$ yang artinya adalah penutup mempunyai fungsi sesuai dengan namanya yaitu untuk menutupi suatu layer. 'as$ dapat diterapkan kepada suatu layer dan layer yang sudah dikenai mas$ bisa berfungsi untuk menutupi layer dibawahnya. #ntuk membuat sebuah layer menjadi mas$, klik kanan layer yang diinginkan kemudian pilih menu mas$. (ika sebuah layer sudah dikenai mas$ maka akan muncul tanda pada layer tersebut. Dan layer yang mempunyai lin$ terhadap layer mas$ muncul tanda . Layer yang mempunyai lin$ terhadap suatu layer mas$ bisa lebih dari satu. (ika membuat suatu layer menjadi mas$ maka secara default satu layer yang berada dibawahnya akan menjadi lin$ dari layer mas$ tersebut. Layer mas$ Lin$ dari layer mas$ Layer lain yang tidak terpengaruh oleh mas$ Layer yang tertutupi oleh mas$ adalah layer lin$ dari mas$ tersebut sedangkan layer yang lain tetap seperti biasa tidak terpengaruh oleh adanya mas$. Seperti contoh diatas, layer - sebagai layer mas$, layer $ sebagai layer lin$ dari mas$, dan layer ,,<,/ tidak terpengaruh oleh mas$. %erikut ini contoh penulisan yang dikombinasikan dengan mas$ing /. buat tulisan pada layer / yang nantinya akan ditutupi oleh mas$, misalnya tulisan Multim!-ia I"t!&a+tif $. tentukan frame akhir dari animasi, jumlahnya terserah dalam contoh ini kita buat frame akhirnya adalah -9. kemudian insert Key frame dengan mengklik kanan frame tersebut dan pilih menu insert Key frame -. buat layer yang baru yang letaknya diatas layer yang pertama. 1. buat sebuah animasi sederhana di layer baru tersebut. +nimasinya berupa lingkaran yang bergerak dari kiri ke kanan. +khir frame dari animasi sebaiknya sama dengan akhir frame dari layer yang pertama yaitu -9.

-9

5. #ntuk membuat gerakan bola yang nantinya akan melewati tulisan , terlebih dahulu o byek harus di ubah dalam simbol dan digerakan dengan create motion tween.

0ampilan di stage 7. Kemudian test movie dengan menekan *t&l.enter. /.7.6 A"imasi t!+s -il!wati si"a&

)ada contoh animasi berikut di perlihatkan ada teks yang akan dilewati sinar dari ujung tulisan sebelalh kiri dan bergerak kekanan. #ntuk lebih jelasnya dapat dilihat di contoh berikut /. %uat stage dengan ukuran 599G/99 pi"el, stage tersebut diberi warna hitam yang nantinya akan digunakan sebagai bac$gro%nd. $. %uat tulisan diatas stage tersebut, misalnya ;M#>08MHD8+ 8I0HC+K08'; -. Klik kanan tulisan tersebut dan pilih menu copy, untuk mengkopi tulisan tersebut. 1. %uat layer yang baru yaitu layer $ pastikan aktif layer berada pada dan layer $

tersebut. Klik kanan pada stage dan pilih menu paste in place3 untuk menempelkan tulisan yang sebelumnya sudah kita kopi kedalam layer $. Sehingga ada dua tulisan yang sama pada layer / dan layer $ dan bertumpuk. 5. %uat sebuah layer baru lagi yaitu layer -, dan letakkan aktif layer pada layer 7. %uat sebuah persegi yang tingginya sama dengan dua kali tinggi tulisan dan lebar secukupnya. hilangkan garis tepi dari persegi empat dengan cara mengklik tepinya dan tekan tombol delete <. )utar gambar 159 searah jarum jam dengan menggunakan fungsi rotate, ubah obyek tersebut menjadi simbol ;movieclip; -/

,. Karena tulisan hanya ada pada frame / maka pada frame $9 tidak terdapat tulisan. +gar tulisan muncul pada frame $9 maka pilih menu insert frame pada frame $9 di layer / dan begitu juga dengan layer $.

@. )indahkan obyek pada layer - yang ada

pada frame $9 ke sebelah kanan tulisan. ?byek pada frame / ?byek pada frame $9

/9. kemudian pada layer - beri animasi untuk menggerakan sinar 2o byek pada gambar diatas4 dengan jalan klik diantara frame /-$9, pilih create motion tween. //. layer - yang digunakan untuk animasi yang berada paling atas pindahkan menjadi di tengah dan bertukar dengan layer $ menjadi diatas. caranya dengan men drag tulisan layer - ke arah bawah /$. klik kanan layer $ dan pilih menu mas$ dan pastikan layer - menjadi lin$ dari mas$ tersebut sehingga nampak seperti gambar dibawah. /-. Kemudian lalukan test movie dengan tekan shortcut *t&l.enter' bila animasi berhasil maka akan tampak tulisan yang dilewati sinar berjalan seperti gambar dibawah ini. 0ampilan 0eks yang dilewati sinar 2. Dasa& Action Script Action script memungkinkan pemberian perintah terhadap animasi yang buat. Misalnya pada tombol play, stop dan sebuah obyek lingkaran. (ika kita tekan tombol play maka lingkaran bergerak dari kiri ke kanan dan jika kita klik tombol stop maka lingkaran akan berhenti. Semua itu bisa dilakukan dengan memberikan perintah kepada tombol serta lingkarannya sehingga mengikuti apa yang ditulis di script.

-$

)ada flash menggunakan actionccript untuk menambahkan interakti!itas ke dalam animasi. %ahasa ActionScript ini mirip dengan bahasa (a!aScript. )ada dasarnya ActionScript ini adalah suatu kumpulan perintah yang digunakan untuk mengaktifkan suatu action tertentu.#ntuk memunculkan menu action script, pilih window>action tekan F: atau maka akan muncul panel berisi pilihan pilihan action. )anel action script 2.1 T!&mi"$l$#i ActionScript )enulisan skrip dalam actionscript beroientasi pada obyek dan setiap informasi akan dikelola ke dalam group yang disebut informasi akan dikelola ke dalam group yang disebut class. Dari satu class dapat dibuat lebih dari satu &nstance. &nstance dari class dapat berisikan data atau gambar. Didalam panggung &nstance direpresentasikan dengan movieclip, b%tton atau text field. Setiap &nstance movieclip mempunyai properti tinggi24height53 rotasi 24rotation5, serta mempunyai metode seperti gotoAndPlay3 start+rag dan class movie clip6 ActionScript Macromedia 'lash mempunyai terminologi sebagai berikut Actions )ernyataan untuk membuat movie menjalankan perintah.contoh goto+ndPlay2/94J 1oolean Data dengan $ nilai, yaitu benar 2tr%e4 dan salah 2false4 lasses 0ipe data yang digunakan untuk mrndefinisikan tipe baru suatu obyek. onstants Hlemen yang bersifat mutlak dan tidak dapat diganti. Sebagai contoh Key 0+% akan slalu mengindikasikan pada tombol Tab di Keyboard. onstr%ctor 'ungsi yang dugunakan mendefinisikan properti dan metode2methods4 suatu class. +ata Types Suatu nilai dan operasi yang dapat diterapkan pada tipe data, antara lain string3 n%mber3 boolean3 ob"ect3 movie clip3 f%nction3 n%ll3 dan %ndefined --

)vents +ksi yang terjadi pada saat movie dimainkan, misalnya aksi klik pada b%tton, yaitu 2release5

)vents ,andlers +ksi yang mengelola )vent.b2action dan methods4 )xpression Kombinasi simbol actionscript yang merepresentasikan suatu nilai. F%nctions %olk atau kode yang dapat digunakan berulang-ulang, yang juga dapat diikuti parameter dan dapat mengembalikan suatu nilai.

&dentifiers Iama yang digunakan untuk mengidentifikasikan !ariabel, properti, o byek, function atau metode. #ntuk karakter pertama harus dimulai dengan huruf atau garis bawah2K4 atau sinar dollar2L4.sedangkan karakter lainya bisa berupa huruf atau angka.

&nstances ?byek yang masuk dalam class tertentu. Contoh semua movie clip merupakan &nstance dari class movie clip.

&nstances *ame Iama &nstances untuk movie atau b%tton yang digunakan sebagai target di dalam. Keyword Kata pengganti yang mempunyai arti khusus, sebagai contoh !ar adalah Keyword untuk mendeklarasikan local !ariable

'ethods 'ungsi yang diterapka pada obyek /perators Simbol yang mengkakulasikan nilai baru dari satu nilai atau lebih. Parameters 0empat mengesahkan nilai untuk fungsi Properties +tribut yang mendefinisikan suatu obyek, Target Path +lamat nama &nstances movie clip, !ariable, atau obyek yang disusun secara hierarki Variable -1

)elacak identitas yang menampung semua tipe data 2.% ActionScript E'ent ha"-l!& u"tu+ B$tton -a" Mo'ie !lip Actions yang diterapkan pada b%tton di apit dalam actions tertentu yang disebut dengan handler. 1andler yang digunakan untuk b$tton adalah on, sedangkan yang digunakan untuk mo'ie%clip adalah on!lipE'ent. )enulisan actions di dalam handler, )vent dimasukkan didalam tanda kurung, misalnya adalah on2release4 on2rollo!er4 on lip)vent2mo%seMo!e4 Satu handler, baik untuk b%tton movie clip, dapat mengelola lebih dari satu )vent. Contoh dibawah ini adalah pengelolaan dua )vent didalam satu handler b%tton. on2release, rollo!er4 %erikut ini tabel informasi actions handler untuk b%tton dan keterangannya Actions )vent Bandler 1%tton on7Press5 on78elease5 on78elease/%tside5 on78oll/ver5 on78oll/%t5 on7+rag/ver5 onKeypress9:Left;9 onKeypress9:8ight;9 onKeypress9:,ome;9 onKeypress9:)nd;9 onKeypress9:&nsert;9 onKeypress9:+elete;9 onKeypress9:1ac$space;9 onKeypress9:)nter;9 onKeypress9:.P;9 onKeypress9:+own;9 onKeypress9:Page.p;9 onKeypress9:Page+own; 9 onKeypress9:Tab;9 onKeypress9:)scape;9 onKeypress9:Space;9 Keterangan 0ombol mo%se ditekan di atas area b%tton 0ombol mo%se diklik di atas area b%tton 0ombol mo%se diseret dari area b%tton keluar area b%tton, kemudian tekanan pada tombol mo%se dilepaskan )ointer berada diatas area b%tton )ointer digeser dari dalam area b%tton ke luar area b%tton 0ombol mo%se diseret dari luar area b%tton ke dalam area b%tton 0ombol panah kiri di dalam Keyboard ditekan 0ombol panah kanan didalam Keyboard ditekan 0ombol home didalam Keyboard ditekan 0ombol end didalam Keyboard ditekan 0ombol insert didalam Keyboard ditekan 0ombol delete didalam Keyboard ditekan 0ombol backspace didalam Keyboard ditekan 0ombol enter didalam Keyboard ditekan 0ombol up didalam Keyboard ditekan 0ombol down didalam Keyboard ditekan 0ombol pageup didalam Keyboard ditekan 0ombol pagedown didalam Keyboard ditekan 0ombol tab didalam Keyboard ditekan 0ombol escape didalam Keyboard ditekan 0ombol space didalam Keyboard ditekan

%erikut ini tabel informasi actions handler untuk b%tton dan keterangannya -5

Actions )vent Bandler 'ovie clip on lip)vent2load4 on lip)vent2unload4 on lip)vent2enterFrame4 on on on on on lip)vent2mo%se+own4 lip)vent2mo%seMo!e4 lip)vent2mo%se#p4 lip)vent2Key+own4 lip)vent2Key#p4

Keterangan Setelah movie clip dtampilalkan di dalam Timeline Setelah frame terakhir tempat movie clip berada dilewati )ada semua frame dalam movie clip dan diproses sebelum actions frame yang diterapkan pada frame yang bersangkutan Setiap tombol kiri mo%se ditekan Setiap mo!e digerakkan Setiap penekanan tombol kiri mo%se dilepaskan Setelah actions dengan penekanan tombol dalam mo%se terjadi Setelah actions deangan penekanan tombol dalam mo%se

dilepaskan terjadi on lip)vent2data4 Setelah data dalam actions load!Eariabel atau load'ovie24 )ada penulisan ActionScript, suatu perinta diakhiri dengan tanda titik koma2J4. Contohnya sebagai berikut stop24J. )ada ActionScript bersifat case sensitif yang artinya penulisan kapitalisasi dalam penulisan huruf berpengaruh.

2./ M!"##u"a+a" ActionsScript 2./.1 M!"##u"a+a" action pa"!l )anel actions digunakan untuk mengelola action. )anel dapat di tampilkan atau disembunyikan dengan mengklik menu windows>actions atau tekan F4 pada obyek atau frame yang akan diberi actions. )ada actions terdiri atas tiga kolom yaitu - + kolom yang berisikan daftar action - % kolom tempat menuliskan kode ActionScript - C kolom yang berisikan informasi obyek, layer dan Scene yang terseleksi

+ (

-7

)anel Actions #ntuk dapat menuliskan actions pada frame, b%tton, atau movie clip, maka simbol tersebut harus dipilih terlebih dahulu, kemudian lakukankan cara sebagi berikut Dalam kolom daftar actions, klik ganda actions maka kode actions akan ditampilkan didalam penulisan actions Dalam kolom penulisan actions, klik tombol a-- 2=4 kemudian klik actions di dalam menu yang tampil, maka kode actions akan ditampilkan dalam kolom penulisan actions. Dalam kolom penulisan actions, ketikkan secara langsung kode actionsnya.

ActionScript yang ditulis pada action panel dapat digunakan untuk mengendalikan na!igasi dan interakasi pemakai pada sebuah animasi dan membuat flash yang menuliskan ActionScript tersebut. 2./.% M!masu++a" ActionScript Action bisa dimasukkan ke dalam dua macam bagian yaitu pada bagian frame dan pada bagian obyek. Bal ini sangat penting karena kedua bagian tersebut sangat berbeda. (ika memberikan action pada frame itu artinya perintah hanya diberikan pada frame, dan begitu juga dengan obyek. )erintah diberikan pada suatu obyek jika action tersebut diberikan pada layer, begitu juga sebaliknya. Sehingga sebelum memasukkan action harus dilihat terlebih dahulu tujuan dari action tersebut digunakan. 0andanya bahwa action dimasukkan pada frame, muncul tulisan frame action pada bagian paling atas panel action.

Action frame 0andanya bahwa action dimasukkan pada ob"ect, maka muncul tulisan ob"ect action pada bagian paling atas panel action.

Action b%tton 2./.%.1 M!masu++a" action pa-a layer %erikut adalah cara memberikan perintah kepada suatu layer. )ertama tentukan frame dan layer keberapa yang akan diisi oleh action, klik ditempat tersebut.dan buat Keyframe ditempat tersebut. Seperti telah dijelaskan pada bab sebelumnya pada saat kita ingin memanipulasi suatu frame maka kita harus mengisikan Keyframe ditempat tersebut.

-<

Kemudian buka panel action dan isikan action yang diinginkan. (ika suatu frame sudah diisi oleh action maka frame tersebut akan memiliki tanda huruf a yang sederhana dengan menggunakan $9 frame. .

+gar lebih jelas ikuti contoh berikut ini. %uat file baru dan buat didalamnya sebuah animasi

#ntuk mengisikan action stop yaitu digunakan untuk menghentikan gerakan animasi pada frame yang diinginkan. Action tersebut diisikan pada frame /9, maka klik kanan frame /9 tersebut dan pilih menu insert Key frame. )astikan penunjuk frame berada pada frame /9 kemudian munculkan panel action. )ilih action stop pada bagian basic action dengan cara double klik atau dengan mendr action ag list halaman disebelah kanannya. ke arah yaitu putih

D$ubl! *li*+ atau -idrag +! s!b!lah +a"a"

script .

Setelah action diberikan maka dibagian frame /9 akan muncul tanda

Contoh

diatas

adalah

memberikan action stop pada frame /9, jika dijalankan maka animasi akan berhenti pada frame ke sepuluh dan tidak akan melanjutkan ke frame yang selanjutnya kecuali jika ditambahkan action yang lain.

-,

Karena kita berikan action pada frame /9 maka jika kita mengklik frame yang lain misal frame satu maka script pada pada action list yang sebelumnya sudah kita isikan akan hilang. Bal ini disebabkan karena kita tidak mengisikan action pada frame satu.

Script yang ada dalam action list akan menyesuaikan dengan action yang kita isikan pada setiap frame. Misal kita mengisikan - action pada - frame yang berbeda. (ika kita klik pada frame satu maka pada action list akan memunculkan action yang diisikan pada frame satu, begitu juga dengan frame dua dan tiga.

2./.%.% M!masu++a" action pa-a $by!+ Memasukkan action pada obyek caranya hampir sama seperti pada frame. %edanya adalah jika pada frame sebelum memasukkan action, framenya harus diklik terlebih dahulu maka jika memasukkan pada obyek, maka obyek diklik yang akan diberi action tersebut. Misalnya terdapat tiga buah tombol. (ika tombol pertama diberi action maka tombol tersebut harus diklik terlebih dahulu kemudian kita munculkan panel action dan kita isikan action yang kita inginkan. )erlu diperhatikan bahwa sebelum suatu obyek diberi action, pastikan obyek tersebut sudah menjadi sebuah symbol karena action hanya bisa diberikan pada obyek yang berupa symbol. 5. DASAR MENU INTERAKTIF 5.1 M!mbuat T$mb$l Didalam flash diberikan fasilitas yang sangat banyak untuk pembuatan tombol sehingga aplikasi yang dibuat bisa diberi tombol yang interaktif yang berbeda dengan tombol tombol yang ada pada umumnya. +gar suatu o byek bisa berubah menjadi tombol dan diberi fasilitas fasilitas yang berhubungan dengan tombol maka obyek tersebut harus diubah terlebih dahulu menjadi symbol b%tton. (ika hal tersebut tidak dilakukan maka obyek tersebut tidak akan berfungsi sebagai tombol dan tidak akan bisa dimanipulasi karena semua fasilitas fasilitas yang diberikan oleh flash akan tertutup. -@

#ntuk mengubah suatu obyek menjadi tombol maka blok terlebih dahulu obyek yang akan dijadikan tombol lalu pilih menu insert>con'ert%to symbol dan pilih menu b%tton. Setelah hal tersebut dilakukan maka obyek tersebut sudah menjadi sebuah symbol b%tton dan obyek tersebut diberi fasilitas segala sesuatu yang berhubungan dengan tombol. 0anda bahwa obyek tersebut telah dikon!ersi ke dalam symbol yaitu muncul garis tepi persegi yang berwarna biru muda. #ntuk lebih jelasnya bisa dilihat dicontoh berikut

mo%se diluar tombol

mo%se diatas tombol

mo%se menekan tombol

)ada tombol diatas terjadi - perubahan tampilan pada saat mo%se di luar, di atas, serta pada saat tombol nya ditekan. >angkah yang dilakukan adalah /. $. -. 1. .p /ver +own ,it buat obyek elips dan diberi warna hijau radial dan garis tepinya diberi warna kuning setebal -,5 point diatas obyek elips tersebut diberi tulisan :enter; berwarna hitam. kemudian marMue kedua obyek tersebut dan tekan ', untuk menjadikan obyek diatas b%tton. klik dobel b%tton yang terbentuk maka akan terbuka menu khusus untuk manipulasi b%tton yang sudah dibuat. Manipulasi tersebut terbagi menjadi 1 bagian, yaitu bentuk tombol pada saat mo%se berada di luar tombol bentuk tombol pada saat mo%se berada diatas tombol bentuk tombol pada saat mo%se menekan tombol untuk menentukan luas area dari tombol

)ada saat menu manipulasi tersebut terbuka maka b%tton bisa diubah warna sesuai dengan animasi yg diinginkan. Misalnya pada o!er2mo%se melewati tombol4 garis tepinya diganti warna hitam. #ntuk memberi animasi di tiap bagian maka pada Timeline up' o'er2down2hit harus diberi /eyframe. 5. Khusus untuk frame hit tidak akan muncul dalam hasilnya. )ada saat mo%se berada didaerah tombol maka pointer dari mo%se yang sebelumnya berbentuk panah akan berubah menjadi bentuk tangan. >uas dan bentuk dari daerah tombol yaitu pada saat pointer mo%se berubah menjadi bentuk tangan ditentukan oleh bentuk dan luas daerah yang diberikan pada frame hit. >uas area dari frame hit bisa lebih luas atau lebih sempit 19

dari area dari tombol tergantung dari kebutuhan. (ika pada frame hit ini tidak diisi maka secara default ukuran dari area tombol akan sama dengan ukuran tombol itu sendiri. 7. (ika sudah selesai memanipulasi tombol maka kita akan kembali ke halaman utama dengan mengklik tombol Scene/ yang berada disebelah kanan atas dari Timeline. <. Kemudian test movie tombol dengan menekan *t&l.enter 'lash juga menyediakan tombol tombol yang sudah jadi dan sudah memiliki frame up, o!er, dan down. #ntuk menggunakannya pilih menu window>*$mm$" Library% %sehingga muncul Library yang berisi berbagai macam pilihan tombol yang bisa digunakan. #ntuk mengambil tombol tersebut pilih salah satu tombol, drag gambar tombolnya kearah halaman utama dan letakkan ke daerah sesuai yang diinginkan. )ada contoh animasi tombol di atas memperlihatkan adanya perubahan bentuk ataupun warna pada tombol pada saat mo%se berada di atas tombol. %erikut ini contoh tombol yang mengalami animasi laen yang lebih interaktif. )ada saat mo%se melewatiNmenekan tombol akan teks yang muncul. #ntuk lebih jelasnya ada pada contoh berikut /. %uat file baru, buat $by!+ !lips di stage yang nantinya akan dijadikan tombol, beri warna merah radial. $. %eri tulisan diatas $by!+ !lips -. #bah kedua obyek tersebut ke dalam bentuk simbol2b%tton4 dengan jalan tekan ', 1. Kemudian klik double b$tton untuk membuka menu manipulasi tombol. 5. Setelah menu manipulasi tombol terbuka, arahkan mo%se ke Timeline $)!& dan buat /eyframe dann tuliskan teks yang nantinnya dimunculkan pada saat tombol dianimasikan. Seperti pada gambar dibawah.

0eks yang muncul pada saat mo%se melewati b$tton 7. %egitu juga pada Timeline down' buat /eyframe dann tuliskan teks yang nantinnya dimunculkan pada saat tombol dianimasikan. 1/

5.% M!mbuat Lin0 B$tton 1%tton yang telah dibuat bisa diberi lin$ ke halaman atau frame tertentu dengan memanfaatkan actionscript. Lin$ ini dibuat sebagai na!igasi animasi yang dibuat agar lebih mudah untuk menggunakan dan lebih menarik. #ntuk lebih mudahnya bisa lihat dan ikuti langkah 6 langkah pada contoh berikut

frame b%tton

gambar bac$gro%nd

0ampilan awal animasi sebelum ketiga b%tton diklik /. %uat file baru, pada layer / diganti nama layer bac0gro$nd dan beri warna pada bac0gro$nd. )ada frame 1 klik kanan pilih insert frame. $. 0ambahkan layer baru dan beri nama bi"#+ai. )ada layer bi"#+ai buat bingkaiNframe untuk meletakkan gambar. %ingkai dibuat dari obyek rectangle yang berukuran --9"-99 pi"el. %eri warna orange dengan garis tepi kuning. -. %uat layer baru untuk b$tton. Klik kanan dan pilih insert frame pada frame ke 1. )ada layer b$tton ini buatlah - macam b$tton untuk mena!igasi gambar yang akan ditampilkan . B$tton dibuat dari obyek elips. Dan jangan lupa untuk memberikan animasi pada b$tton% tersebut. Ketiga b$tton tersebut diberi nama satu' -ua' ti#a. +tau juga bisa b$tton bisa dibuat di file lain sehingga b$tton tersebut dapat diambil di Library % %2tekan *t&l.L< kemudian drag a"- drop ke stage. 1$

1. %uat layer baru lagi 2layer yang ke 14 dan beri nama layer #amba&. Layer ini berfungsi untuk menempatkan gambar - gambar yang akan ditampilkan. )ada frame / tambahkan teks silah+a" -i+li+ m!"u. 0eks tersebut diletakkan ditengah 6 tengan frame. 5. Selanjutnya masih dilayer #amba& pada frame ke $ tambahkan Keyframe 2klik kanan pada frame $ dan pilih insert /eyframe4. Kemudian masukkan gambar yang akan ditampilkan. 0erlebih dahulu gambar yang akan ditampilkan import dulu ke dalam Library 2klik file;import t$ Library%4. Kemudian gambar bisa diambil dari Library% % dan di drag a"drop ke stage=frame. %egitu juga pada frame ke - dan 1.

)osisi layer dan frame 7. >angkah selanjutnya adalah memberikan actionscript pada ke - b%tton yang ada. 0erlebih dahulu klik tombol satu dan kemudian tekan F4 pada Keyboard untuk membuka panel actioscipt. Setelah panel actionscript terbuka maka ketikan on2release4Ogoto+ndStop2$4JP. +cion tersebut merupakan action-b%tton atau action yang diterapkan pada &nstance b%tton. Action tersebut berarti jika b%tton satu ditekan maka gambar yang ada diframe ke $ akan muncul. Seperti apda contoh berikut

.ambar ketika b%tton satu diklik 2gambar frame ke $4 <. Sedangkan untuk b%tton -ua dan ti#a sama dengan langkah nomer 7. ,. Setelah itu tekan *t&l.enter untuk tes movie.

1-

.ambar ketika diklik b%tton -ua 5.- M!mbuat B$tton &lay -a" Stop%

.ambar ketika diklik b%tton ti#a

ActionScript play dan stop dapat diterapkan pada b%tton untuk aplikasi untuk memulai dan menghentikan animasi yang sedang berjalan. )ada kasus ini, actionscript yang digunakan adalah on2release4Oplay24JP untuk b%tton play dan on2release4 Ostop24JP untuk b%tton stop #ntuk lebih mudahnya silahkan ikuti langkah 6 langkah berikut /. %uat file baru dan buat didalamnya sebuah animasi yang sederhana, misalnya bola yang bergerak dari kiri ke kanan pada layer / dan beri nama layer ball . .erakan dengan bola tersebut mengikuti path yang sudah kita buat pada layer G$ide0layer 2animasi obyek mengikuti path sudah di terangkan di bab -.<.14. $. %uat sebuah layer baru diberi layer b$tton dan letakkan aktif layer yaitu gambar pensil pada layer baru tersebut dan letakkan penunjuk frame pada frame /. -. buat ditempat tersebut dua buah tombol yang nantinya digunakan untuk tombol play dan stop. +gar tidak terlalu lama dalam membuat tombol, gunakan tombol yang sudah ada dalam common Library , dengan memilih window>*$mm$" Library %>b$tton dan pilih tombol yang sesuai.

11

Layer ball, b%tton dan g%ide layer 1. Kembali ke layer ball dan frame /. 8sikan actionscript stop><? pada frame tersebut agar jika pada saat dicoba, animasi tidak akan berjalan kecuali ditekan tombol play yang kita buat. Caranya klik frame / pada layer / kemudian munculkan panel action. )astikan bahwa tulisan yang ada diatas panel action adalah frame action.

5. Selanjutnya isi action play pada tombol play. )ilih b$tton@play selanjutnya isi action play pada tombol play. Klik tombol play kemudian buka panel action ketikan on2release4 Oplay24JP 7. %egitu juga dengan tombol stop, diisi action stop. )ilih b$tton@stop selanjutnya isi action stop pada b%tton-stop. Klik tombol stop kemudian buka panel action ketikan <. Setelah selesai silahkan test animasi dengan memilih menu control>test% mo'ie atau *t&l.enter. (ika langkah yang dibuat diatas sudah benar, maka animasi tidak bergerak, dan akan bergerak jika kita tekan tombol play dan berhenti jika kita tekan tombol stop

+nimasi dengan b%tton play 3 stop

15

6.

EFEK%so$nd 'lash mempunyai fasilitas memasukkan suara dalam animasi dan tidak bisa dilakukan

oleh program animasi ataupun script yang lain. Suara yang dimasukkan adalah berupa file file yang khusus untuk suara seperti contohnya mp-, waf, wma, !Mf, dll. File file suaran tersebut bisa kita buat sendiri atau mengambil dari yang sudah ada. Misalnya so%nd potong dari sebuah lagu. *ang harus dipertimbangkan adalah ukuran dari file suara tersebut, umumnya ukuran file dari suara cukup besar. Sebagai contoh lagu dalam bentuk file mp- yang lama waktunya menit ukuran filenya adalah $,< megabyte. #ntuk itu kita menggunakan file yang ukurannya relatif kecil seperti contohnya !Mf, wma, dll. Dan suara yang dimasukkan jangan terlalu lama waktunya karena ukuran file dari suara ditentukan oleh lamanya waktu dari suara tersebut. #mumnya memasukkan suara yang waktunya pendek, misalnya mempunyai waktu 5 detik, tetapi diulang secara terus menerus sehingga dapat melakukan banyak penghematan ukuran file. 6.1 M!masu++a"%so$nd -alam A"imasi Macromedia 'lash menyediakan berbagai contoh suara yang ukurannya relatif kecil dan waktunya juga pendek. #ntuk melihat contoh dari suara yang diberikan flash pilih menu window>*$mm$" Library %>s$u"- sehingga muncul pilihan pilihan suara. #ntuk mencobanya, klik tanda play yang ada di ujung kanan atas dari Library . #ntuk menggabungkan suara dengan animasi maka kita harus memasukkan suara tersebut kedalam Timeline dan kita siapkan sebuah layer khusus untuk suara agar tidak rancu dengan layer yang digunakan untuk animasi.
Layer untuk suara Layer untuk animasi

Memasukkan so%nd pada layer animasi Cara memasukkannya adalah sebagai berikut /. tentukan terlebih dahulu diframe dan layer yang mana akan kita letakkan suara dan insert Keyframe ditempat tersebut. Bal ini sangat penting karena akan menentukan kapan suara akan dimulai pada saat animasi berjalan. %. drag and drop suara yang ada dalam Library%%so$nd ke dalam stage yang telah ditentukan frame dan layernya. 17

Sebelum memasukkan so%nd dalam animasi tentukan terlebih dahulu frame yang akan diberi so%nd dan berhenti. )ada gambar layer dibawah ini menunjukkan bahwa so%nd akan muncul dianimasi yang dibuat pada frame ke /9 sampai $9. suara diletakkan pada layer dua, frame /9. ketika animasi dijalankan maka gambar bergerak dari frame / ke frame $9. pada saat bergerak dari frame / hingga @ masih belum muncul suara. Suara baru muncul pada saat animasi memasuki frame ke /9 dan seterusnya. >amanya suara muncul tergantung dari lama waktu suara yang dimasukkan serta perulangannya dan tidak tergantung dari frame. &alaupun animasi sudah berhenti pada frame ke $9 jika suara belum habis waktunya maka suara akan tetap berlanjut hingga selesai.

Sound muncul pada frame /9 - $9 #ntuk mengatur segala sesuatu yang berkaitan dengan so%nd dapat dilakukan dipanel spound yang ada dipropertis so%nd.

Sound )anel Hffect untuk mengatur efek dari suara yaitu pengaturan keseimbangan kiri dan kanan dari speaker. sync singkatan dari synchronisation digunakan untuk mengatur suara didalam frame. +da 1 option yang bisa dipilih )vent suara akan mulai pada frame dimana so%nd tersebut berada. 0etapi lama dari suara ini tidak tergantung dengan panjang frame. (ika frame berhenti dan suara belum habis waktunya maka suara tersebut akan terus melanjutkan hingga selesai. Stop Start digunakan untuk menghentikan suara pada frame yang kita inginkan, walaupun suaranya belum waktunya untuk berhenti. fungsinya hampir sama dengan )vent, bedanya adalah pada saat diberikan perintah stop di frame tertentu dan suara diberikan lagi ke frame selanjutnya pada start suara akan mememulai dari awal lagi, sedangkan jika menggunakan )vent maka suara akan melanjutkan suara yang tidak selesai karena diberikan perintah stop pada frame sebelumnya. 1<

>oop

digunakan untuk menentukan berapa kali suara tersebut diulang. (ika loop diset 9 maka suara hanya berbunyi sekali.

6.%. M!masu++a"%so$nd pa-a T$mb$l Selain digabungkan dengan animasi, suara juga bisa digabungkan dengan tombol, sehingga pada saat mo%se mendekati tombol atau pada saat mengklik tombol maka akan muncul suara. Caranya hampir sama dengan contoh diatas, bedanya adalah untuk memasukkan suara harus masuk dulu ke tempat mengedit simbol b%tton. #ntuk masuk ke tempat ke tempat edit symbol, klik kanan b%tton yang ingin diisi suara dan pilih menu edit sehingga masuk ke tempat edit symbol. Seperti telah dijelaskan pada bab sebelumnya, dibagian Timeline terdapat bagian up, o!er, down, hit. Dibagian itulah kita bisa memasukkan suara. #mumnya suara dimasukkan pada bagian o!er, dan down. Sedangkan dibagian hit tidak perlu diisi suara karena tidak ada gunanya dan tidak akan berfungsi pada saat ditampilkan. Sedangkan pada bagian up sebaiknya tidak diisi dengan suara, karena jika diisi maka suara akan berbunyi ketika mo%se berada diluar tombol. Seperti telah dijelaskan sebelumnya sebelum memasukkan suara, buat sebuah layer baru dan masukkan suara ke dalam layer baru dan isikan Keyframenya setelah itu baru masukkan so%nd. suara yang diletakkan pada o!er suara yang diletakkan pada down 6./ M!"##u"a+a" Sua&a -a&i "ile SAF Menggunakan suara dari file S&' berguna agar file animasi yang dihasilkan tidak bertambah besar karena file S&' yang berisi suara dipisahkan dari movie utama. Selain itu juga penggunaan suara dari file S&' agar lebih mudah untuk pengaturan Timeline. Sebelum membuat movie utama, terlebih dahulu buat file S&' yang hanya berisi suara. >angkah untuk membuat file suaraNmusik.S&' adalah sebagai berikut /. $. -. %uat file baru, pada layer / pilih frame 65 lalu klik kanan dan pilih insert frame. Kemudian klik menu file;import;import Library%. )ilih folder tempat penyimpan file suara, misalnya file yang diimpor adalah &$b.wa) %uka pa"!l Library%%2tekan *t&l.L4, lalu drag ke stage. Sepanjang frame pada layer musik akan tampak frekuensi suara.

1,

1. 5. 7.

)ilih frame 1 lalu beri action script pada frame, stop24J Kemudian buka panel &roperties, pilih l$$p dibagian so%nd l$$p. Simpan file tersebut dengan nama musi+.fla dan lakukan test mo'ie untuk menghasilkalah file musi+.SAF secara otomatis. File ini menghasilkan suara musik yang akan diulang terus menerus. Setelah file yang hanya berisi musik atau suara sudah ada maka langkah selanjutnya

adalah membuat movie utamanya. >angkah untuk membuat movie yang berisi b$tton play dan stop adalah sebagai berikut /. $. -. 1. 5. %uka File flash baru, layer / ganti dengan nama b$tton. %uka menu window;*ommon % libraries;b$ttons. )ilih % b$tton yang akan ditampilkan untuk tombol animasi. Kemudian drag@b$tton yang dipilih ke stage. )erbesar ukuran b$tton sesuai dengan yang anda inginkan. 0ambahkan 0eks play musi* dan stop musi* disisi kanan dari tombol play dan stop. )ilih tombol play lalu tuliskan script berikut on2release4 Oload'ovieIum2Qmusik.swfQ,/4JP 7. >alu pilih tombol stop dan tuliskan juga script berikut on2release4 Ounload'ovieIum2/4JP <. Simpan file movie tersebut dengan nama sua&aBplaystop.fla dan lakukan test mo'ie.

,.

Klik tombol play untuk membunyikan suara dari file musi+.SAF. Dan tekan tombol stop untuk menghentikan suara.

1@

7.

MEN9ATUR CENDELA RODEKTOR SAF 0ampilan fullscreen 2layar tampil penuh pada layar monitor4 digunakan untuk

M!mbuat Tampila" T$mb$l Fulls*&!!" menghilangkan jendela proyektor S&' ketika movie dijalankan, kecuali jika tombol HSC pada Keyboard ditekan. +dapun langkah-langkahnya sebagai berikut /. $. %uat file fla baru, pada layer / beri nama lata& dan buat bac0gro$nd dengan warna merah muda dan ukuran stage sebesar ,99 " 799 pi"els. Masih di layer lata&, buatlah $ obyek rectangle yang diberi warna merah tua, seperti pada gambar dibawah.

59

?byek pada fullscreen -. 1. 5. 7. )ada layer lata& pilih frame / lalu tulist script diberikut ini fscommand2;fullscreen;,;tr%e;4J beri nama file tersebut fullscreen.fla 0ekan *t&l.enter untuk test mo'ie Kemudian buka file fulls*&!!".swf dari luar program 'lash ,. Maka akan tampak hasil seperti berikut

0ampilan fullscreen M!"#hila"#+a" (a&is M!"u +pabila untuk pada tampilan jendela proyektor S&' tidak ingin ba&is m!"u ditampilkan. )ada file yang sedang dibuat bisa ditambahkan script sh$wm!"u. /. $. %uat file fla baru, pada layer / beri nama lata& dan buat bac0gro$nd dengan warna merah muda dan ukuran stage sebesar ,99 " 799 pi"els. Masih di layer lata&, buatlah $ obyek rectangle yang diberi warna merah tua, seperti pada gambar dibawah.

?byek pada menubar yang dihilangkan -. )ada layer lata& pilih frame / lalu tulist script diberikut ini 5/

fcommand2;showmenu;,;false;4J 1. 5. 7. %eri nama file tersebut menubar.fla 0ekan *t&l.enter untuk test mo'ie Kemudian buka file m!"uba&.swf dari luar program 'lash ,. Maka akan tampak hasil seperti berikut.

0ampilan tanpa menubar M!mbuat T$mb$l !lose )ada sesi ini akan dijelaskan langkah-langkah membuat tombol close. )ada tombol yang sudah buat sebelumnya diberi actionscript /. $. -. 1. %uat file fla baru, pada layer / beri nama lata& dan buat bac0gro$nd dengan warna merah muda dan ukuran stage sebesar ,99 " 799 pi"els. Masih di layer lata&, buatlah $ obyek rectangle yang diberi warna merah tua, seperti pada gambar dibawah. &nsert layer $ dan diberi nama b$tton. Kemudian masukkan simbol b$tton yang diambil dari Library dengan asumsi b$tton tersebut telah dibuat sebelumnya. )erintah untuk menampilkan Library adalah *t&l.L dan kemudian drag " drop @ b$tton yang akan dimasukkan ke stage. Dan sesuaikan ukuran b$tton@close dengan tampilan yang ada. Cara membuat b%ttonNtombol sudah dijelaskan pada bab sebelumnya.

5$

0ampilan dengan b%tton close 5. 7. <. )ilih b$tton E close , kemudian tuliskan script berikut on 2release4 Ofscommand2;Muit;,;tr%e;4JP Simpan file tersebut dan beri nama close.fla Kemudian lakukan test mo'ie dengan jalan *t&l.enter. 0ampilan file close tersebut belum dapat dijalankan. Test movie dilakukan hanya untuk membuat file close.swf secara otomatis. ,. @. %uka file close.swf dari lokasi folder penyimpanan file tersebut. (endela proyektor dari tombol close.swf akan tampil seperti berikut

0ampilan windows dari close.swf /9. :. klik b%tton untuk menutup tampilan windows.

MEN9ONTROL "ILE SAF DAN FIDEO )ada bab ini dijelaskan bagaimana cara untuk menampilkan movie.swf ke dalam tampilan

M!mai"+a" Mo'ie SAF -!"#a" B$tton animasi flash yang berekstensi swf juga, movie tersebut akan dikendalikan oleh b$tton@$p!" ' play' stop. +dapun langkah 6 langkah pembuatan animasi sebagai berikut /. 0erlebih dahulu buat movie yang akan ditampilkan ke stage animasi utama. Misalnya saja buat movie yang menggambarkan gerakan b$la yang mengikui path yang ditentukan dan beri nama file tersebut dengan b$lapath.swf dengan ukuran -99"-99 pi"els. $. Kemudian buat file baru lagi dan beri nama mo'ieBplaystop.fla 5-

-. 1.

)ada layer / ganti nama dengan layer bi"#+ai. )ada layer tersebut beri bac0gro$nd% warna merah muda, buat ukuran bac$gro%nd 559"199 pi"els. Masih dilayer bi"#+ai buat bingkaiNframe dari obyek rectangle untuk tempat menampilkan movie yang diload 2bolapath.swf4. #kuran rectangle sebesar -99"-99 pi"els, beri warna abu-abu dan garis tepi hitam ukuran 7.

5.

#bahlah obyek rectangle tersebut dalam symbol @ mo'ieclip 2tekan F:4 dan beri nama frame",a. %uka &roperties pa"!l' dan beri pada Instance@&roperties dengan nama frame.

7. <.

)ada frame / layer bingkai diberi actionscript stop24J agar ketika dimainkan movie berhenti pada frame /. 0ambahkan layer baru yang diberi nama b$tton. %uat - buah b$tton pada layer ini yang nantinya digunakan sebagai t$mb$l-$p!"' play' stop. #ntuk lebih cepatnya, pembuatan tombol bisa memanfaatkan b$tton yang sudah disediakan oleh windows 2klik window;*ommon%libraries;b$tton<.

,.

)osisi b$tton dan tampilan mo'ie adalah sebagai berikut

@. /9. //. /$.

Klik pada b$tton@$p!", tuliskan script sebagai berikut on 2release4Oload'ovie2Qbolapath.swfQ,QframeQ4JP Klik b$tton@play' beri script on2release4Oframe.play24JP Klik b$tton@stop' beri script on2release4Oframe.stop24JP >akukan test mo'ie. #ntuk menampilkan b$lapath.swf ke pada animasi yang ditest tekan tombol $p!". 51

/-. /1.

#ntuk memainkan b$lapath.swf klik tombol play. #ntuk menghentikan b$lapath.swf klik tombol stop.

M!"#imp$& "ile Fi-!$ +! -alam Flash. )ada 'lash , dilengkapi odec Sorenson Spart, yang merupakan progam untuk menampilkan !ideo dengan ukuran yang kecil tetapi tetap mempunyai kualitas !ideo tersebut. 'ormat !ideo yang bisa diimpor ke dalam flash adalah, mpeg movie 2mpg dan mpeg4, !ideo for windows 2a!i4, Miuck time movie2mo!4 dan digital movie 2d! dan d!i4. Sebagai contoh adalah sebagai berikut /. $. -. 1. Sebelum memulai membuat file di flash maka harus dipersiapkan dahulu movie yang akan di impor. Misalnya pada contoh ini akan mengimpor file berjudul *$u"tdown/.m$). Kemudian buka file baru di flash. )ada layer / ganti namanya menjadi )i-!$. Klik menu file>import>import t$ Library%. %ila kotak dialog untuk membuka file terbuka, pilihlah file yang akan diimpor. Setelah itu file diopen akan muncul kotak dialog seperti seperti yang dibawah ini dan piiih "!3t.

/ption untuk select !ideo 5. Setelah itu pilih !mb!- )i-!$ i" SAF a"- play i" tim! li"! lallu klik tombol "!3t. Kotak dialog berikutnya akan menanyakan, apakag file !ideo tersebut akan diimpor langsung atau diedit terlebih dahulu 55

7.

)ilih embed%the%entire%'ideo lalu klik tombol "!3t.

<.

%erikutnya akan muncul kotak dialog yang menyediakan profil kompresi, dan pilihlah flash :@ m!-ium Gualit,>2HH+bps<. Dan kemudian klik "!3t untuk melanjutkan proses import. Sampai akhirnya muncul kotak dialog yang menginformasikan bahwa proses import movie sudah berakhir, maka pilihlah tombol fi"ish.

,.

Setelah tombol fi"ish diklik maka akan muncul kotak dialog yang menunjukkan proses flash )i-!$ !"*$-i"# p&$#&!ss. 0unggu sampai proses ini selesai.

57

@.

Setelah proses flash )i-!$ !"*$-i"# p&$#&!ss maka munculkan kotak dialog Library%% >tekan *t&l.L<. kemudian drag I drop ke stage file movie yang sudah diimpor yang ada di Library%. +pabila muncul kotak dialog konfirmasi yang melaporkan jumlah frame, klik tombol ,!s.

/9.

%erikutnya buat layer baru yang diberi nama b$tton. %uat - b%tton yang bisa diambil dari windows. Klik menu (indow;*ommon%libraries;b$ttons. Ketiga b$tton tersebut digunakan untuk play' paus!' dan stop. #bah ukuran dari ketiga b$tton tersebut menjadi 59"59 pi"els.

//. /$. /-. /1. /5.

Kembali lagi ke layer )i-!$' pada frame 1 isilah a*ti$s frame stop24J Kemudian pilih b$tton@play pada frame b$tton, dan isikan action b$tton $">&!l!as!< Jplay><?K )ada b$tton@stop isikan action b$tton on2release4Ogoto+ndStop2/4JP agar pada saat tombol stop ditekan maka animasi kembali ke frame /. )ada b$tton@paus! isikan dengan dengan action b$tton on2release4Ostop24JP Setelah itu buat layer baru beri nama t!+s untuk meletakan teks yang diberi animasi dengan mengatur alpha dengan nilai 9F di frame / dan nilai /99F frame terakhir sehingga tulisan akan nampak muncul secara berlahan 6 lahan. 0api sebelum dianimasikan jangan lupa ubah teks dalam bentul simbol-graphic.

/7.

Simpan file tersebut dan beri nama import@)i-!$.fla dan buat file .SAF secara otomatis dengan melakukan test mo'ie 2tekan *t&l.enter<.

0ampilan awal import file !ideo 5<

4.

TEXT A#EA Scrolling text digunakan untuk menggulung tampilan teks secara !ertikal maupun

Scrolling Text horisontal. Sebagai contoh Scrolling text dapat dilihat pada langkah 6 langkah berikut /. $. %uka file baru dan ganti nama layer / dengan nama text. %uat teks paragraf seperti pada gambar berikut. 0eks diberi f$"t 0 a&ial' Si3e 0 16 pt' Ali#" &i#ht dan beri warna hitam.

Text type &nstan ce >ine type )ada panel &roperties pilih text t,p! 0 -,"ami* text' dan Instance "am! 0 text serta li"! t,p! pilih multili"!. 1. 0ahan tombol shift diKeyboard lalu +li+ -ua +ali kotak pada sudut kanan bawah bingkai teks, hasilnya warna kotak berubah menjadi warna hitam. )rag kotak hitam ke atas hingga separuh bingkai teks.

-.

+rag ke atas

5. 7. <.

%uat layer baru dan beri nama Scrolling. %uat $ tombol untuk tombol U )O( . >etakkan kedua tombol disamping teks.

dan

)ilih layer text lalu buat obyek bingkai berwarna merah tua dengan ukuran st&$+! *$l$& sebesar 5 tanpa fill *$l$&. )ada layer text ini beri warna bac$gro%nd merah muda. )ilih tombol up dan kemudian isikan script on 2release4 O text.scroll -D/JP text merupakan nama &nstance dari obye teks yang akan diScrolling. 5,

,.

)ilih tombol down dan kemudian isikan script on 2release4 O text.scroll =D/JP script sama dengan tombol up tetapi nilai "D-/ di tombol up diganti nilai "D=/

@.

Kemudian save file ini dengan nama textBupdown.fla kemudian lakukan test mo'ie% 2tekan *t&l.enter<.

0ampilan Scrolling text /9. Klik tombol down untuk menggulung teks ke atas dan klik tombol up menggulung teks ke bawah. Scroll&ane ScrollPane digunakan untuk menambah scroll pada animasi yang ditampilkan sehingga terlihat menggulung secara !ertikal maupun horisontal.#ntuk obyek yang akan digulung bisa berupa gambar maupun teks. #ntuk lebih jelasnya bisa dilihat pada langkah pembuatan animasi teks yang menggulung menggunakan ScrollPane, adapung cara pembuatannya sebagai berikut /. %uat file baru , beri nama file tersebut dengan nama s*&$llBtext.fla. )ada layer / buatlah t!+s pa&a#&af . )ada pa"!l &roperties teks beri wa&"a hiLau mu-a, Si3e 012 pt , f$"t 0 a&ial serta jenis teksnya adalah static text. )ada bac0gro$nd@layer diberi warna merah muda $. -. %uat obyek bingkai berwarna hitam mengelilingi o byek teks. %ingkai tersebut mempunyai f$"t 0 / pt, tanpa fill *$l$&. #kuran bingkai disesuaikan dengan kebutuhan. )astikan obyek bingkai terselect kemudian ubah warna bingkai menjadi putih. untuk

5@

%ingkai obyek berwarna hitam 1.

%ingkai obyek berwarna putih

0ekan *t&l.A untuk memilih obyek teks dan bingkai untuk kemudian ubah ke dua obyek tersebut menjadi / bentuk simbol mo'ie clip 2tekan F: ; mo'ie clip ; $+4. %eri nama mo'ie clip tersebut dengan nama textBm*.

5. 7.

Bapus mo'ie clip E textBm* tersebut dari stage )ada panel Library % %pilih movie clip textBm* kemudian klik kanan dan pilihlah lin0a#! ; $+.

Lin$age Properties <. Kemudian dari panel *$mp$"!"t' drag obyek Scroll&ane ke area stage. Cara mengeluarkan Scroll&ane adalah klik menu window ; components %; us!& i"t!&fa*!s ; Scroll&ane. ,. @. )erbesar ukuran Scroll&ane sesuai dengan kebutuhan, misalnya $59"$99, ukuran diseting dibagian &roperties@pa&am!t!&. )ada bagian &roperties@pa&am!t!& atur parameter Scroll&ane, dibagian *$"t!"tpath% ketikan textBm* 2nama simbol movie clip dari teks yang telah dibuat4 dan dibagian hS*&$ll $li*, pilih /9. >akukan test% $ff. mo'ie.

79

0ampilan ScrollPane Text Area #ntuk membuat Scroll&ane' teks harus dirubah menjadi mo'ie clip, sedangkan hal ini dapat diatasi dengan metode TextArea. Dengan menggunakan TextArea teks bisa secara langsung diketikan dibagian text pada saat mengatur parameter komponen. 0etapi TextArea% mempunyai kelemahan, yaitu sulit untuk mengatur format teks yang ada didalamnya tidak seperti pada komponen Scroll&ane, dimana teks bisa diatur dahulu formatnya setelah itu baru di ubah ke dalam mo'ie clip. #ntuk membuat teks dalam TextArea adalah sebagai berikut /. $. %uat file flash baru. Kemudian klik menu window ; components%; us!& i"t!&fa*!s ; TextArea. Setelah panel *$mp$"!"t tampil' drag < drop E TextArea ke area stage. Melalui panel &roperties ; pa&am!t!&s ubahlah ukuran TextArea. Menjadi /59 " /59 pi"el. +pabila ukuran stage terlalu besar dan teks yang ditampilkan sedikit maka nanti pada saat dianimasikan tidak akan muncul Scroll&ane@nya. -. )ada panel &roperties ; pa&am!t!&s pilihlah editabl! 0 false agar pada saat file dipublish teks tidak dapat diedit.

1. 5. 7.

)ada panel &roperties ; pa&am!t!&s pada bagian text dapat dituliskan t!+s yang akan diisikan di tampilan animasi. Kemudian simpan file tersebut dengan nama textarea.fla >akukan test mo'ie dan file animasi yang tampak adalah seperti gambar dibawah

7/

0ampilan text area 1H. MEM(UAT SOAL Salah satu alat ukur keberhasilan dalam pembelajaran adalah dengan proses e!aluasi baik berupa tanya jawab secara langsung, tes tertulis maupun tes secara online. )ada modul interaktif dapat disertakan proses e!aluasi. Soal 6 soal tes tersebut dapat berupa m%ltiple choice single answer dan m%ltiple choice m%lti answer6 )ada 'lash untuk membuat soal yang berbentuk m%ltiple choice single answer dan m%ltiple choice m%lti answer dapat memanfaatkan komponen sebagai berikut b%tton component3 chec$box component3 radiob%tton component6 Komponen sangat memudahkan karena tidak terlalu banyak menggunakan actioncript. 'lash , menyediakan cukup banyak b%ilt0in component6 #ntuk menampilkan komponen tersebut dapat dilakukan dengan cara klik pada menu (indow;components%atau *t&l.L. )ada komponen tersebut terdapat 5 komponen, yaitu - +ata 0 FLV Playbac$0Player = 0 FLV Playbac$ %stom .& 0 'edia >Player ?0@ 0 .ser &nterface % #ntuk menggunakan salah satu komponen tersebut dapat dapat diperbesar dan diperkecil sesuai dengan ukuran yang dibutuhkan. 1H.1 B$tton 8$mp$"!"t B$tton % component dapat B0M>. 7$ 0etapi% b$tton % didesain seperti tombol form di component tidak sama dengan diambil dari panel *$mp$"!"t dan diletakkan di stage. Dengan menggunakan free t&a"sf$&m tool, komponen

b$tton % symbol . B$tton % component memiliki parameter yang mempunyai $ser % interface% 2tampilan4 tersendiri dengan rancangan khusus pada &roperty%Inspector,

%erikut ini adalah langkah untuk menggunakan komponen tersebut adalah /. +mbil component B$tton dari panel komponen bagian 4ser%Interface dan letakkan di stage. $. Setelah itu tentunya komponen tersebut akan muncul di Library bernama b%tton. Dan komponen, yang ada di stage akan menjadi &nstance. -. +kan kembali b%tton dari Library ke stage6 (adi jangan dari panel komponen, ini akan menyebabkan terjadi duplikasi. Sehingga di stage akan terlihat dua tombol. 1. Ketika Instance %componeny di klik di stage , di property inspector akan muncul informasi dari komponen, seperti pada gambar berikut

Property 1%tton omponent +dapun keterangan dari parameter b%tton component adalah &con Menambahkan ikon tambahan pada tombol. )ada komponen ini dapat dibuat sebagai symbol movie cli3 graphic3 kemudian isi nama lin$age-nya pada Library hijau4 7Toggle Label 0ulisan yang muncul diatas tombol LabelPlacemet )ilihan parameter ini agar tulisan rata kiri, kanan, atas, atau bawah tombol. Selected (ika selected diisi dengan tr$e, maka tombol akan tetap dalam keadaan ditekan2berwarna

(ika diisi dengan % tr$e maka parameter ini mengecek apakah tombol ditekan tr$e atau dilepas %false. Dengan mengubah property lab!l pada $ser%interface 6 #ntuk mengganti tulisan tombol hanya dengan satu component b$tton di Library . %iasanya kalau symbol b%tton3 kita harus membuat dua tombol kalai ingin ada dua tombol yang mempunyai label berlainan. !hec0Box%!omponent #ntuk membuat pertanyaan m%ltiple choise m%lti answers pada flash dapat memanfaatkan hec$1ox omponent6 #ntuk lebih jelasnya dapat dilihat pada contoh soal berikut ini

)ada contoh soal diatas, jawaban dapat dipilih lebih dari /. #ntuk itu diperlukan hec$1ox omponent agar jawaban benar dapat diseting lebih / jawaban. #ntuk membuat soal hec$1ox omponent dapat dilakukan dengan cara berikut /. %uat soal dari static%text % pada frame /. 0eks soal tersebut tertulis sebagai berikut 1.t!&-apat / L!"is symbol ,a"# -i#u"a+a" -i flash % -ia"ta&a",a ,aituM $. Kemudian ambil hec$1ox omponent dari menu window5component5$ser % interface5%!hec0Box6 Kemudian letakkan hec$1ox di stage6 -. Kemudian duplikasi &nstance hec$1ox tersebut sehingga jumlahnya menjadi 1 buah. 1. %eri nama &nstance masing-masing, yaitu a'b'*'-. 5. %eri label pada property pada masing-masing, yaitu, mo'ie % clip2 % b$tton2 % Shape2 % Library%, 7. Kemudian letakkan b$tton % component yang diambil dari menu window5component5$ser % interface5b$tton di stage dengan nama &nstance t$mb$lBbt" dan isi label dengan *!+ Lawaba". <. Kemudian pada frame / isikan actionscript seperti dibawah ini tombolKbtn.onCeleaseDfunction24O if2 a.selected and b.selected 4O loadmovie2Qbenar.swfQ,jawab4J Pelse if 2c.selected and d.selected4O loadmovie2Qsalah.swfQ,jawab4J P 71

P ,. )ada script diatas dapat dilihat pada saat t$mb$lBbt" ditekan , jika jawaban benar maka akan file tersebut akan memanggil b!"a&.swf yang berisi file yang menampilkan komentar Lawaba" a"-a b!"a&. Dan jika jawaban salah maka akan file tersebut akan memanggil salah.swf yang berisi file yang menampilkan komentar Lawaba" a"-a salah. @. Karena file +uis ini memerlukan file lain 2b!"a&.swf dan salah.swf< maka harus dipersiapkan juga file-file tersebut, cara membuat file sudah diterangakan dalam bab ,./ M!mai"+a" Mo'ie SAF -!"#a" B$tton tetapi buat file tanpa ada b$tton' file yang dipanggil sudah bisa tampil.

75

#adioB$tton%!omponent 8adio1%tton omponent mirip dengan che$box , tetapi pada 8adio1%tton omponent3 jawaban tidak bisa lebih dari satu. )erbedaan antara chexbox dan radiob%tton ada pada gro$p ame pada saat radiob%tton diletakkan di stage . (ro%p*ame ini harus mempunyai nama yang sama pada / soal yang sama, misalnya gro%p*ame soal. .Cara untuk meletakan radiob%tton di stage sama dengan komponen lainnya .#ntuk lebih mudahnya dapat dilihat dicontoh dibawah ini

/. %uat soal dari static%text% pada frame /. 0eks soal tersebut tertulis sebagai berikut 1. (!&i+ut i"i ,a"# ti-a+ t!&masu+ -alam L!"is symbol -alam ma*&$m!-ia flash a-alah.... $. Kemudian ambil 8adiob%tton omponent dari menu window5component5$ser % interface5%8adiob%tton6 Kemudian letakkan 8adiob%tton di stage6 -. Kemudian duplikasi &nstance 8adiob%tton tersebut sehingga jumlahnya menjadi 1 buah. 1. %eri nama &nstance masing-masing, yaitu a'b'*'-. 5. 8si gro%p*ame pada Properties R parameter dengan nama s$al1 untuk ke 1 radiob%tton yang telah diberi &nstance name. 7. %eri label pada property pada masing-masing, yaitu b$tton2 % graphic2 % mo'ie % clip2 % Shape, <. Kemudian letakkan b$tton % component yang diambil dari menu window5component5$ser%interface5b$tton di stage dengan nama &nstance ce0 dan isi label dengan *!+ Lawaba". ,. Kemudian pada frame / isikan actionscript seperti dibawah ini *!+.$"R!l!as!Nfu"*ti$"><J if>-.s!l!*t!-<J l$a-Mo'ie>Ob!"a&.swfO'Lawab<? 77

K!ls!Jl$a-Mo'ie>Osalah.swfO'Lawab<?KK @. )ada script diatas dapat dilihat pada saat t$mb$lBbt" ditekan , jika jawaban benar maka akan file tersebut akan memanggil b!"a&.swf yang berisi file yang menampilkan komentar Lawaba" a"-a b!"a&. Dan jika jawaban salah maka akan file tersebut akan memanggil salah.swf yang berisi file yang menampilkan komentar Lawaba" a"-a salah. /9. Karena file +uis ini memerlukan file lain 2b!"a&.swf dan salah.swf< maka harus dipersiapkan juga file-file tersebut, cara membuat file sudah diterangakan dalam bab ,./ M!mai"+a" Mo'ie SAF -!"#a" B$tton tetapi buat file tanpa ada b$tton' file yang dipanggil sudah bisa tampil. //. Silahkan lakukan test movie .

7<

11.

MEM(UAT 8D INTERAKTIF )ada modul ajar interaktif ini akan berkerja secara otomatis ketika CD dimasukkan

!&!"*a"aa" -a" D!sai" dalam CD C?M Dri!e. #ntuk lebih detailnya cara kerja dari modul ajar interaktif ini digambarkan pada point 6 point berikut /. $. -. 1. 5. CD modul ajar 8nteraktif dimasukkan dalam CD C?M dri!e. Dan CD akan dibaca secara otomatis oleh komputer. Kemudian file p!mbu+aa" .!3! akan terbaca secara otomatis +kan muncul tampilan animasi pembukaan . Setelah itu akan ada menu untuk masuk ke dalam menu modul dan menu untuk keluar dari aplikasi modul aja interaktif. Setelah klik b%tton silah+a" +li+ u"tu+ masu+ +! m$-ul ' maka flash akan mena!igasi pengguna untuk masuk ke dalam modul utama. )ada modul utama terdapat // menu yang terdiri dari // pilihan, yaitu J /. modul interaktif $. dasar flash -. dasar animasi 1. dasar actionscript 5. dasar menu interaktif 7. efek so%nd <. mengatur jendela proyektor swf ,. mengontrol file swf dan !ideo @. text area /9. membuat soal //. membuat cd interaktif 7. Selain ada na!igasi berupa lin$ ke m!"u@m!"u' ada juga na!igasi berupa b%tton e"it, ne"t, pre!ious, atau juga dapat kembali ke menu awal.

7,

11.1.1 Alu& Dia#&am

)ada contoh modul aja interaktif ini sedikitnya membutuhkan /7 file fla dan swf. File 6 file tersebut dibagi-bagi menjadi - / file untuk pembukaan - // file untuk menampilkan materi per bab 2// bab4 - / file untuk kuis - / file untuk jawaban kuis salah - / file untuk jawaban kuis benar - / file untuk na!igasi menu per bab.

D!sai" La,$ut %erikut ini desain layout dari halaman pembukaan

7@

%erikut ini desain layout dari halaman menu utama

Sedangkan untuk layout materi perbab

<9

M!mbuat la,$ut -a" a"imasi tampila" m$-ul i"t!&a+tif 11.%.1 !mbu+aa".swf

</

<$

)ada file p!mbu+aa".swf terdapat beberapa obyek, baik symbol maupun Shape. )ada p!mbu+aa".swf ini ada beberapa animasi yang terjadi, yaitu /.)ada saat file pertama kali dijalankan maka akan tampak dua gambar yang berjalan dari tengah ke pinggir stage 2gerakan seperti pintu terbuka4. ?byek tersebut dibuat dari graphic yang dipecah jadi $. Cara untuk membuat animasi gambar seperti gerakan pintu terbuka adalah sebagai berikut - Cari gambar yang akan di gerakan, misalnya gambar berikut

- Select gambar tersebut dan tekan *t&l.( untuk menge-brea0 %gambar tersebut agar bisa dibagi menjadi $. - %agi $ gambar tersebut menggunakan !&as!& tool. @ Setelah gambar tersebut terbagi $, tekan *t&l.( pada kedua gambar untuk mengroup gambar tersebut. @ )isahkan kedua gambar tersebut ke dalam $ layer, misalnya layer +i&i dan +a"a". @ )ada layer +i&i dan +a"a"' frame 1 rapatkan gambar seperti pintu tertutup <-

- )ada layer +i&i dan +a"a"' frame %5 geser masing-masing gambar ke kanan dan ke kiri sampai keluar stage.

layer +i&i' diantara frame 1@%5 klik kanan pilih create motion tween - )ada layer +a"a"' diantara frame 1@%5 klik kanan pilih create motion tween @ Kemudian lakukan test mo'ie.

)ada

$.Setelah graphic tersebut menghilang akan muncul seperti gambar diatas. Dimana terdapat obyek teks Lab$&at$&ium Multim!-ia FED8 Mala"# yang dilewati sinar. #ntuk hal ini sudah dijelaskan di bab /.7.6. -.0eks M$-ul p!mb!laLa&a" I"t!&a+tif M!"##u"a+a" Ma*&$m!-ia Flash : akan muncul secara berlahan. Cara untuk membuat animasi teks tersebut - %uat teks M$-ul p!mb!laLa&a" I"t!&a+tif M!"##u"a+a" Ma*&$m!-ia Flash : di layer m$-ul pada frame 1H. @ #bah teks tersebut menjadi bentuk simbol graphic beri warna hitam. @ )ada frame 1H setting property teks, pada bagian *$l$& pilih alpha dan 9 F @ Insert /eyframe pada frame %6 , setting property teks, pada *$l$& pilih alpha dan /99 F - )ada layer +a"a"' diantara frame 1H@%6 klik kanan pilih create motion tween 1. Selain itu ada $ b%tton yang berfungsi untuk na!igasi masuk ke modul dan keluar dari modul. 0ombol yang dibuat ada $ macam, yaitu tombol yang bertuliskan silah+a" +li+ u"tu+ masu+ +! m$-ul dan silah+a" +li+ u"tu+ +!lua& m$-ul. #ntuk cara membuat modul dapat dilihar di bab 5.1 m!mbuat t$mb$l dan 5.% M!mbuat Lin0 B$tton . #ntuk tombol silah+a" +li+ u"tu+ masu+ +! m$-ul diisi dengan actionscript on2release4Oload'ovieIum2Qmenu.swfQ,94JP m!"u.swf merupakan file yang akan dituju ketika tombol tersebut diklik. #ntuk tombol silah+a" +li+ u"tu+ +!lua& m$-ul diisi dengan actionscript on2release4Ofscommand2QMuitQ,Qtr%eQ4JP (ika tombol tersebut di klik maka perintah Puit akan berjalan. Kedua tombol tersebut dibuat pada layer m$-ul pada frame %7 <1

5.

Dibagian bawah terdapat teks by E"-ah D yang bergerak dari kanan kekiri. #ntuk membuat animasi ini caranya sebagai berikut - %uat layer baru beri nama !- 0erlebih dahulu buat teks by E"-ah D pada frame 1 ubah ke dalam bentuk simbol graphic' posisi teks ada disebelah kanan stage @ )ada frame %6, insert /eyframe. )indahkan posisi teks tersebut di bagian kiri stage. @ )ada layer +a"a"' diantara frame 1@%6 klik kanan pilih create motion tween

7. Dibagian bac$gro%nd , warna dari bac$gro%nd berubah dari hijau muda ke hijau tua. #kuran bac$gro%nd dibuat standard ,99"799 pi"el. #ntuk lebih jelasnya ada dilangkah berikut - #bah bac$gro%nd tersebut menjadi bentuk simbol graphic beri warna hijau tua. @ )ada frame 1 setting property teks, pada bagian *$l$& pilih alpha dan 9 F @ Insert /eyframe pada frame 7H , setting property teks, pada *$l$& pilih alpha dan /99 F - )ada layer +a"a"' diantara frame 1@7H klik kanan pilih create motion tween @ )ada frame 1 ketikan action fscommand2QfullscreenQ,Qtr%eQ4J untuk tampilan fullscreen <. Diatas bac$gro%nd diberi graphic yang berasal dari obyek rectangle kemudian dengan menggunakan pi*+ tool, obyek rectangle tersebut dibuat lengkung.

Layer 6 layer pada pembukaan.swf 11.%.% M!"u.swf

<5

M!"u.swf ini berisi menu-menu yang akan mengarahkan pengguna ke materimateri modul. 0ampilan modul dapat dilihat seperti berikut ini

)ada m!"u.swf tersebut terdiri dari - layer, yaitu layer bac0gro$nd' "a)Bbab' "a)Bm$-ul.

Layer pada m!"u.swf %erikut adalah penjelasan perlayer /. Layer Bac0gro$nd )ada layer ini buat bac$gro%nd dengan diberi $ 2warna hijau lumut 6 kuning gading4 dengan efek degradasi radial. )ada frame 1 ketikan actionscript fscommand>Ofulls*&!!"O'Otr$eO<? Script ini berfungsi untuk membuat tampilan fillscreen <7 Kemudian buat graphic dari obyek rectangle diberi warna hijau tua, dan rubah bentuknya agar berbentuk melengkung. Setelah itu masukkan graphic yang ada tulisan MODUL INTERAKTIF , diberi bac$gro%nd berwarna hijau muda. EM(ELACARAN

0eks tersebut bisa dibuat di software aplikasi grafis corel dan photosop ataupun dibuat diflash .

0ampilan pada layer bac$gro%nd $. Layer "a)Bbab )ada layer ini terdiri dari tombol-tombol yang akan mena!igasi ke bab yang diinginkan, tombol kuis, tombol keluar aplikasi, tombol menuju halaman sebelumnya dan menuju halaman setelahnya.

0ampilan pada layer na!Kbab )ada frame 1 ketikan actionscript stop><? agar pada saat file dianimasikan pertama kali akan berhenti. << untuk membuat tombol caranya ada seperti pada bab 5.1 m!mbuat t$mb$l dan 5.% M!mbuat Lin0 B$tton . )ada tombol /,$,-,1,5,7,<,,,@,/9,//, menu kuis diisikan actionscript sebagai berikut

$">&!l!as!<Jl$a-Mo'ieNum>Obab1.swfO'H<?K untuk file tujuan 2bab1.swf< disesuaikan dengan lin$ bab yang akan dituju. -. )ada tombol halama" s!b!lum",a isikan action script berikut on2release4Opre!Frame24JP )ada tombol halama" s!b!lum",a isikan action script berikut on2release4One"tFrame24JP )ada tombol halama" s!b!lum",a isikan action script berikut on2release4Ofscommand2QMuitQ,Qtr%eQ4JP Layer "a)Bm$-ul )ada layer ini terdiri dari tombol-tombol yang akan mena!igasi ke bab yang diinginkan.

0ampilan pada layer na!Kmodul Cara untuk membuat tombol sudah di jelaskan di bab 5.1 m!mbuat t$mb$l dan 5.% M!mbuat Lin0 B$tton . )ada tombol 6 tombol tersebut diisikan actionscript, misalnya saja untuk action script untuk bab 1 m$-ul i"t!&a+tif on2release4Oload'ovieIum2Qbab/.swfQ,94JP (ab%.swf (ab%.swf ini berisi materi bab $ serta na!igasi yang akan mengarahkan pengguna ke materi isi modul tersebut serta halaman modul lainnya serta na!igasi ke halaman kuis. Cara pembuatan halaman materi bab1.swf sampai bab11.swf. adalah sama. 0ampilan modul dapat dilihat seperti berikut ini

<,

0ampilan awal dari (ab%.swf

0ampilan pada (ab%.swf setelah tombol %.1 p!"#!"ala" +$mp$"!" flash <@

0ampilan bab%.swf pada sub bab $././ menubar )ada file bab%.swf ini terdiri 7 layer, yaitu subKmenu, isi, nomorKbab, tombolKbab, na!Kbab, bac$gro%nd. Seperti yang terlihat pada gambar dibawah ini

Layer pada bab%.swf /. Layer Bac0gro$nd )ada layer ini buat bac$gro%nd dengan diberi $ 2warna hijau lumut 6 kuning gading4 dengan efek degradasi radial. )ada frame 1 ketikan actionscript fscommand>Ofulls*&!!"O'Otr$eO<? Script ini berfungsi untuk membuat tampilan fillscreen Kemudian buat graphic dari obyek rectangle diberi warna hijau tua, dan rubah bentuknya agar berbentuk melengkung. Setelah itu masukkan graphic yang ada tulisan MODUL INTERAKTIF , diberi bac$gro%nd berwarna hijau muda. ,9 EM(ELACARAN

1.

0eks tersebut bisa dibuat di software aplikasi grafis corel dan photosop ataupun dibuat diflash .

$. Layer "a)Bbab )ada layer ini terdiri dari tombol-tombol yang akan mena!igasi ke bab yang diinginkan, tombol kuis, tombol keluar aplikasi, tombol menuju halaman sebelumnya dan menuju halaman setelahnya.

0ampilan pada layer na!Kbab )ada frame 1 ketikan actionscript stop><? agar pada saat file dianimasikan pertama kali akan berhenti. untuk membuat tombol caranya ada seperti pada bab 5.1 m!mbuat t$mb$l dan 5.% M!mbuat Lin0 B$tton . )ada tombol /,$,-,1,5,7,<,,,@,/9,//, menu kuis diisikan actionscript sebagai berikut $">&!l!as!<Jl$a-Mo'ieNum>Obab1.swfO'H<?K untuk file tujuan 2bab1.swf< disesuaikan dengan lin$ bab yang akan dituju. )ada tombol halama" s!b!lum",a isikan action script berikut on2release4Opre!Frame24JP -. )ada tombol halama" s!b!lum",a isikan action script berikut on2release4One"tFrame24JP )ada tombol halama" s!b!lum",a isikan action script berikut on2release4Ofscommand2QMuitQ,Qtr%eQ4JP Layer tombolKdasar flash ,/

)ada layer ini terdapat tombol -asa& flash agar pada saat tombol tersebut diklik di frame% manapun tombol ini akan mena!igasi ke halaman materi -aasa& flash. )ada tombol -asa& flash diisikan actionscript on2release4Ogoto+ndStop254JP Dari action script diatas terlihat bahwa setelah tombol -asa& flash diklik maka tampilan akan berpimdah ke frame 5 file itu sendiri, yang berisi materi -asa& flash

?byek pada layer na!Kdasar flash 1. Layer nomorKbab

?byek pada frame / )ada layer "$m$&Bbab terdiri dari 1 frame. Frame pertama terdiri dari sub menu $./ sampai $.-. frame ini hanya berisi na!igasi menuju lin$ yang diinginkan. Seperti yang terlihat pada gambar diatas. %egitu juga pada frame ke $,-,1 terdiri dari sub-sub menu dari sub menu $./ sampai $.-. na!igasi yang dibuat adalah teks yang telah di rubah dalam bentuk b%tton dan diberi action script berikut on2release4Ogoto+ndStop2$4JP +rtinya ketika tombol na!igasi tersebut di klik maka akan manuju frame %. #ntuk melihat frame yang dituju maka kita harus melihat materi tersebut dibuat diframe yang keberapa.

,$

)ada frame / diberi actionscript Stop24J

?byek pada frame ke $ 5. Layer isi

0ampilan pada layer isi ,-

)ada layer ini inti dari modul, yaitu berisi materi berserta gambar . lebar gambar dan materi yang dikemas dalam Scroll&ane adalah sama. 259F untuk gambar dan 59F dari materi dari lebar stage4. .ambar yang dtampilkan disesuaikan dengan bab yang disajikan. Sedangkan materi dikemas dalam bentuk Scroll&ane dengan tujuan agar labih mudah untuk melihat materi meski materi tersebut panjang. Cara untuk mambuat ScrollPane telah dibahas di bab 4.% Scroll&ane. 7. Layer subKmenu Sedangkan pada layer ini hanya berisi teks untuk keterangan keterangan bab dan sub bab, misalnya agar lebih mudah untuk pengguna melihat ada diposisi bab berapa. Contoh dapat dilihat di gambar diatas. Kuis.swf #ntuk pembuatan +uis.swf sudah dijelaskan pada bab 1H.p!mbuata" +uis. Banya perlu ditambahkan bac$gro%nd dan na!igasi. 0ema bac$gro%nd dan na!igasi kuis dissamakan dengan materi. %ab yang lain. )erlu juga ditambahkan jumlah soal, soal tersebut di buat pada frame-frame yang berbeda 2/ frame / soal4. "ile Aut$&u" File autorun berfungsi agar CD interkatif yang dimasukkan ke CD-C?M bisa dideteksi dan dibaca olek komputer secara otomatis. %erikut langkah 6 langkah untuk membuat file autorun /.%uka aplikasi notepad, kemudian ketikkan QAut$&u"R Op!"Np!mbu+aa".!3! )embukaan.e"e merupakan file yang pertama kali akan dibuka. $.Simpan file tersebut dengan nama aut$&u".i"f -.0empatkan file aut$&u".i"f disamping 2satu folder4 dengan file yang lain.

,1

DAFTAR USTAKA /. Candra, Menu 8nteraktif 'lash MG $991, Ma"ikom, $995 $. Shofiani 8ka, )embuatan CD Multimedia 8nteraktif )enginstalan Sistem ?perasi Windows G) dan Windows $999 Ser!er, >aporan 0eaching +id, Malang, $997 -. Syarif +rry Maulana, Mastering ActionScript Macromedia 'las MG $991;Mudahnya Membuat +nimasi dan 8nteraksi, )enerbit )0 Hle" Media Komputindo .ramedia, (akarta, $995 1. 0eam 0raining SMK-08, Modul 'lash 5. Seembry. /$- 0ip30rik ActionScript 'lash MG $991, )enerbit )0 Hle" Media Komputindo .ramedia, (akarta, $995

,5