Pertemuan 1 PENGENALAN ADOBE FLASH

Adobe Flash (Flash) merupakan standard profesional yang digunakan untuk membuat web yang lebih hidup dengan permainan animasi dan sinkronisasi suara yang mengagumkan. Dalam perkembangannya Flash sudah dipakai oleh banyak kalangan, bukan hanya untuk membuat web tetapi juga untuk membuat profil perusahaan, CD interaktif, game, dll. Mengatifkan Program Flash Klik tart All !rogram Adobe "aster Colle#tion C $ Adobe Flash C $ !rofessional %unggu beberapa saat maka akan keluar layar kerja dari Flash sebagai berikut &

Dari pilihan diatas anda dapat memilih & Create Ne 'ntuk membuat file yang baru pilih Flash File !A"tionS"ri#t $%&' O#en a (e"ent )tem 'ntuk membuka file yang pernah dibuat pilih O#en Create from *em#late 'ntuk membuat file dari template yang sudah ada, pilih berdasarkan kategori.

Catatan & Karena anda baru pertama kali membuka Flash maka pilih Flash File !A"tionS"ri#t $%&' untuk membuat file yang baru Pengenalan Area +er,a Flash

LA-E(

MEN .

*)MEL)N E S*AGE

)NFO(MA*)ON BA(

*OOLBA (

P(OPE(*)NSPEC*O(

S*AG E

PANELS

Be/era#a +om#onen Penting 0alam Area +er,a A0o/e Flash 1% *ool/ar "erupakan panel yang berisi berbagai ma#am tool. %ool(tool tersebut dibagi dalam ) kelompok. a. *ools berisi tombol(tombol untuk membuat dan mengedit gambar b. 1ie , untuk mengatur tampilan kerja #. Colors, menentukan warna yang dipakai saat mengedit d. O#tion, alat bantu lain untuk mengedit gambar *ebih lengkapnya dapat dilihat lebih jelas pada tabel dibawah ini &

*ool

Nama ele#tion tool ub ele#tion tool

Fungs i "emilih dan memindahkan objek

Short"ut + A , F * ! % 0 1 2 3 4

"engubah bentuk objek dengan edit point "engubah ukuran atau memutar objek Free %ransform tool sesuai keinginan -radient transform tool *asso tool !en tool %e/t tool *ine tool 1e#tangle %ool 2.al %ool !en#il tool 4rush tool 5nk 4ottle tool !aint 4u#ket tool 6ye Dropped tool 6raser tool 7and tool 8oom tool troke #olor Fill #olor 4la#k and 9hite wap Color 2ption tool "engubah warna gradasi "enyeleksi bagian objek yang akan diedit "enggambar garis dengan bantuan titik( titik bantu seperti dalam pembuatan garis, kur.a, atau gambar "embuat objek teks "embuat atau menggambar garis "enggambar bentuk persegi panjang atau bujur sangkar membuat bentuk bulat atau o.al "enggambar objek se#ara bebas "enggambar objek se#ara bebas dengan ukuran ketebalan dan bentuk yang sudah ditetapkan "engubah warna garis, lebar garis, dan style garis luar warna sebuah bentuk "emberi pada objek se#ara bebas "engambil #ontoh warna "enghapus objek "enggeser tampilan stage tanpa mengubah pembesaran atau memperke#il tampilan memperbesar stage "emberi warna pada suatu garis tepi "emberi warna pada suatu objek "emilih warna hitam dan putih saja "enukar warna fill dan stroke atau sebaliknya dari suatu gambar atau objek Fungsi tambahan pada tool yang aktif

K 5 6 7 " atau 8

$% *ime Line Digunakan untuk mengatur dan mengontrol suatu animasi. layer maka semakin lama animasi akan berjalan.

emakin panjang frame dalam

2% +e3Frame !ada time line anda akan mengenal keyframe dalam membuat animasi. +e3frame adalah sekumpulan frame(frame yang berisi objek di dalam timeline. Keyframe yang berisi objek ditandai dengan bulatan hitam. edangkan Keyframe yang tidak diisi objek ditandai dengan bulatan kosong dan disebut Blank Keyframe.

4% Stage "erupakan area kerja, didalamnya anda bisa membuat objek, memasukkan gambar, teks, memberi warna. Didalam tage ini anda menempatkan objek yang akan dibuat animasi. 5% Panel 4eberapa panel penting dalam dalam Adobe Flash C $ !rofessional, diantaranya panel properties, Filter dan parameter, A#tion, library, #olor : align info : %ransform

6% Pro#erties !anel properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang sedang diaktifkan. "isalnya anda mengaktifkan line tool, maka yang mun#ul pada jendedla properties adalah fungsi(fungsi untuk mengatur line;garis, seperti warna garis, bentuk garis, besarnya garis

7% Li/rar3 4erfungsi sebagai perpustakaan simbol;media yag akan digunakan dalam animasi yang sedang dibuat. imbol merupakan kumpulan gambar baik mo.ie, tombol (button), sound dan gambar stati# (grafik)

8% Do"ument Pro#erties 'ntuk melakukan pengaturan ukuran layar, warna ba#kgorund, frame rate dan dimensi dari animasi yang dibuat. 'ntuk memanggil kotak dialog Do#ument !roperties, pilih jendela properties dibawah layar, kemudian pilih tombol si<e.

=udul dan diskripsi yang akan dimasukkan kedalam metadata output. 4ukan merupakan penamaan file, jadi tidak masalah kalau tidak diisi Dimensi atau ukuran stage yang diinginkan !ilihan printer memaksimalkan ukuran mo.ie hingga area #etak penuh. Karena output yanghasilkan animasi dan bukan print out, maka pilihan yang diaktifkan adalah default Klik dan pilih warna yang tersedia untuk mengubah warna stage(area kerja flash Ke#epatan Flash dalam memutar animasi se#ara utuh yang diukur dalam fps(frame per se#ond)

!astikan satuan yang terpilih adalah !i/el, karena satuan ini yang akan digunakan

MENGGAMBA( BEN*.+9BEN*.+ DASA( 1% Mem/uat garis 0engan line tool Flash menyediakan pilihan untuk membuat beragam jenis garis. !ilih Line *ool. Kemudian lihat pilihan di properties (kiri bawah). "asukan ketebalannya. Dan untuk memulai garis klik pada stage dan drag sepanjang yang anda inginkan.

$%

Mem/uat Garis 0engan Pen"il tool !ilih Pen"il *ool, tentukan warna yang diinginkan dengan memilih warna di pilihan COLO( pada properties. Untuk membuat garis lurus, pilih 2ption S*(A)GH*EN, untuk membuat garis lengkung yang halus, pilih SMOO*H, untuk membuat garis sesuai gerakan mouse pilih )N+

2%

Menggam/ar Lingkaran atau Eli#s !ilih O:al *ool, untuk menggambar bentuk lingkaran atau 6lipse. Klik pada tage dan Drag sebesar lingkaran yang dihendaki

4%

Menggam/ar +otak !ilih (e"tangle *ool kemudian teknik menggambarnya ama halnya dengan #ara menggambar *ingkaran. Apabila anda menginginkan bentuk sudut kotak yang lebih halus, anda bisa ubah P(OPE(*)ES nya, sebelum anda menggambar kedalam stage

5%

Menggam/ar Bentuk Bersegi Ban3ak !Pol3gon' !ilih Pol3star tool. 'ntuk menggambar persegi banyak atau 4intang anda tinggal mengubah di propertiesnya. !ada kotak dialog yang mun#ul anda tinggal pilih model yang diinginkan. Cara menggambarnya anda tinggal drag sesuai ukuran yang anda inginkan.

6%

Menggam/ar Bentuk Be/as -unakan Pen *ool untuk menggambar bentuk bebas dan unik. Klik mouse pada tage, drag dan lepas maka akan terbentuk suatu garis. -erakkan kembali mouse kearah yang diinginkan, klik untuk membentuk suatu sudut (An#hor point). 4ila bentuknya merupakan kur.a tertutup maka dapat diberi warna.

7%

Mengu/ah .kuran ;Memutar O/,ek !ilih Free *ransform *ool, untuk "engubah 'kuran ;"emutar 2bjek. !ilih objek yang akan diubah ukuran;putar. Disisi obejek yang terpilih mun#ul kotak ke#il (handle). ebelum melakukan perubahan ukuran maupun memutar objek, anda bisa pilih option yang ada di toolbar

MENGG.NA+AN <A(NA 1% Mengganti <arna 'ntuk mengganti warna, anda gunakan Sele"tion *ool untuk memilih objek. Kemudian pilih troke Color untuk mengubah warna garis tepi dan Fill Color untuk mengubah warna isi objek $% <arna Gra0asi !ilih menu <in0o s= Color Mi>er. =endela Color "i/er akan mun#ul di sebelah kanan atas layar. !ilih objek yang akan diberi warna gradasi (pilih dengan menggunakan Sele"tion *ool). Di menu pilihan !ull Down anda bisa memilih model gradasi yang anda inginkan. Catatan ? 'ntuk mengedit warna gradasi pilih Gra0ient *ransform *ool. Klik dan drag 7andle yang mun#ul sesuai dengan arah yang diinginkan.

LA*)HAN 1 4uatlah gambar seperti gambar dibawah ini mengunakan perintah(perintah yang telah diuraikan diatas

>. 4uatlah data baru dengan mengklik menu F)LE NE< ?. Atur properties animasi tersebut dengan mengubah parameter menekan tombol i<e pada !roperties . etelah itu akan mun#ul tampilan berikut &

'bah dimensi menjadi ukuran yang anda inginkan misalkan 4&& > 2&& dimana )@@ adalah lebar dan $@@ adalah tinggi. Kemudian ubah Ba"kgroun0 dengan arna #utih dengan #ara mengklik segitiga ke#il kemudian pilih warnanya. 'bah pula Frame 1ate menjadi 15 f#s% $. Dengan (e"tangle *ool pada toolbar buatlah segiempat bertumpukan seperti gambar di bawah ini. Clik and drag mouse dari titik kiri atas ke titik kiri bawah Kemudian lakukan hal yang sama untuk segi empat di bawahnya

Catatan & sebelum mengambar dan setelah memilih Rectangle Tool pada toolbar, lihat dulu warnanya, apakah sudah sesuai dengan keinginan anda? Warna putih dengan garis merah diagonal berarti tidak memakai warna atau tidak memakai bagian itu. alam contoh ini ob!ect yang dibuat tidak memakai garis tepi "stroke#.

).

6ditlah sudut sudutnya dengan mengunakan Su/sele"tion *ool pada toolbar. Kemudian klik obje#t yang akan diedit sudutnya dengan mengklik bagian tepi obje#t tersebut. 4ila berhasil akan mun#ul garis hijau di bagian tepi dan segi empat di tiap sudutnya. 'ntuk merubah posisi sudutnya, #lik and drag segi empat tersebut ke tempat yang anda inginkan. etelah sesuai dengan bentuk yang diinginkan #li#k ke tempat kosong, maka garis hijau akan hilang.

A.

4uatlah tempat roda dengan menghapus gambar mengunakan erase pada tool bar. 7ingga menjadi seperti gambar dibawah ini

6. Dengan elips %ool pada toolbar buatlah dua buah lingkaran yang dipasang sebagai roda seperti gambar dibawah ini.

Pertemuan $ MENGENAL AN)MAS)

Animasi berasal dari kata BAnimationC yang dalam bahasa 5nggris B*o AnimateC yang berarti menggerakan. =adi animasi dapat diartikan sebagai Menggerakan sesuatu !gam/ar atau o/,ek' 3ang 0iam =enis(jenis animasi dalam Flash >. Frame by frame ?. %weened Animation a. "otion %ween b. "otion -uide #. hape %weening d. hape 7int $. "asking

)% F(AME F(AME

B-

Frame by frame adalah animasi yang biasa digunakan pada berbagai aplikasi program pembuat film animasi atau kartun. !emahaman konsep animasi ini sangat simple, dimana anda memiliki gambar yang banyak yang memiliki sedikit perubahan. 4ila gambar ini anda tampilkan se#ara berurutan maka gambar yang tampak seolah(olah merupakan gambar yang bergerak. Konsep ini sama seperti konsep pembuatan film kartun pada jaman dahulu. "eski konsepnya sangat sederhana dan sangat kuno, tapi konsep animasi frame by frame ini masih digunakan apabila semua type animasi yang ada dalam flash tidak dapat dilakukan. Dalam pembuatannya animasi frame by frame ini sangat rumit karena anda harus membuat gambar setiap frame yang berbeda agar animasi kelihatan bergerak, tetapi anda dapat membuat animasi dalam bentuk apapun.

ebagai #ontoh,
>. 4uat dokumen baru dengan memilih menu F)LE= NE<= Flash File !A"tionS"ri#t $%&' ?. -ambarlah sebuah lingkaran ke dalam tage, dengan menggunakan O1AL *OOL (berikan warna Kuning pada lingkaran yang dibuat atau sesuaikan dengan warna yang anda inginkan)

$. Kemudian di 4ar %ime *ine, di frame A anda klik kanan pilih )nsert +e3 Frame

).

ekarang gunakan Sele"tion *ool untuk memilih objek lingkaran. !ada Frame A ini anda ganti warna lingkaran menjadi warna 7ijau (atau bedakan dari warna sebelumnya) A. Coba ulangi langkah $ dan ), untuk Frame >@ >A dan ?@. (masing(masing frame bedakan warna lingkarannya).

D.

ekarang lihat animasi dengan memilih menu CON*(OL= PLA- atau anda bisa menggunakan tombol C*(L @ EN*E(

Selamat an0a /erhasil mem/uat animasi= tern3ata gam#ang /ukan A

E. impan 7asil pekerjaan anda dengan nama AnimasiFrame9nama an0a.

Catatan & Dari animasi yang barusan anda buat, anda bisa mengembangkannya misalnya pada frame ke A gambar lingkaran berubah ukuran atau mun#ul gambar yang lain, begitu juga di frame >@ dan seterusnya. ebagai latihan, #oba kerjakan latihan berikut ini

LA*)HAN $ >. 4uatlah Animasi frame by frame dengan ukuran width F ?)@ p/ dan height F ?D@ p/. ?. 4uatlah gambar yang sederhana dahulu yang merupakan gambar berurutan. eperti gambar dibawah ini. -unakan B(.SH *OOL, jangan lupa atur dahulu warnanya (fill #olor) sebelum mengoreskan ke stage. 'ntuk lebih detailnya sesuaikan pula brush si<e dan brush shape. Brush SiBe Brush Sha#e Catatan & !ada saat anda pilih Brush *ool, pastikan 2bje#t Drawing di %oolbar tidak terpilih ( upaya memudahkan mengedit gambar)

4 5 6 2% etelah selesai. 4uatlah gambar pada frame selanjutnya. 'ntuk memudahkan proses #opykan frame pertama dengan menekan tombol F5 ()nsert C frame), jika benar maka tampilan time line akan seperti gambar dibawah ini

!erhatikan frame ini

).

Kemudian #lik pada frame ke dua kemudian tekan FD (#on.ert to keyfarme) , jika benar maka tampilan time line akan seperti gambar dibawah ini

!erhatikan frame ini

A. 4ila sudah seperti pada gambar diatas kemudian ubah gambar yang anda inginkan bergerak (perhatikan #ontoh gambar di atas menurut urutannya no. ?). 5ntinya bahwa yang anda ubah hanya posisi lengannya. 6. 7al yang sama juga berlaku untuk membuat gambar pada frame $, ), A dan D. 4ila anda mengambar sampai frame 6 maka tampilan time line akan seperti gambar dibawah.

E. G.

'ntuk men#oba animasi yang sudah anda buat, tekan Ctrl(6nter etelah selesai simpan pekerjaan anda, dengan nama Latihan2-nama anda

Pertemuan 2 *<EENED AN)MA*)ON

Motion * een adalah fasilitas pada Adobe Flash yang berfungsi untuk menggerakkan obje#t dalam satu layer. Agar obje#t yang lain tidak ikut bergerak maka obje#t tersebut harus diletakkan pada layer yang berbeda. !ada "otion %ween anda dapat menggerakkan obje#t berdasar posisi maupun berputar, bahkan anda dapat mengubah warnanya.
*ayer yang terdapat obje#k yang akan digerakkan

Keyframe Awal

Keyframe Akhir

akan mun#ul tanda panah dan ba#kground biru sebagai tanda kalau sudah berujut motion tween

!osisi awal dan posisi akhir pada sebuah gerakan (tween) ditandai dengan adanya keyframe. =adi keyframe ini memuat data obje#k. Data obje#t yang dimuat dalam keyframe adalah data posisi, warna, ukuran dan rotasi. Anda juga bisa memasang keyframe di tengah(tengah tween bila anda menginginkan ada perubahan di tengah tween. *ebih jelasnya, buatlah latihan dibawah ini & >. iapkan dokumen baru dengan memilih menu F)LE= NE< ?. 4atlah -ambar seperti dibawah ini dan letakkan pada stage

$. %ambahkan layer untuk menggambar objek 1oda (Atur warnanya sesuai dengan selera anda)

). !anjangkan frame hingga frame $@ dengan #ara mengklik kanan frame ke $@ pada layer tersebut kemudian pilih insert frame. *ihat gambar berikut

A. Kemudian buatlah motion tween pada layer roda dengan mengklik kanan keyframe roda (keyframe disimbolkan dengan frame yang ada titiknya) lalu pilih #reate motion tween. =ika benar maka time line menjadi biru dan terdapat garis putus(putus dan akan menjadi seperti gambar dibawah ini.

D. Kemudian buatlah keyframe pada frame terakhir dengan mengklik kanan frame terakhir roda lalu pilih insert keyframe. =ika benar maka time line akan menjadi seperti gambar dibawah ini.

E. !ada saat ini anda sudah memiliki dua posisi obje#t ditandai dengan dua keyframe. =adi keyframe adalah status motion tween. 'ntuk membuatnya bergerak anda tinggal merubah posisi pada keyframe yang lain. Caranya klik key frame yang belakang lalu ubah posisi roda ke sebelah kanan seperti gambar berikut.

G. %ekan enter untuk melihat hasil tween. 4ila motion tween berhasil maka roda akan bergerak dari kiri ke kanan. 2psH.. ada yang kurang, rodanya memang bergerak tetapi tidak berputar, bagaimana #aranya I J. 'ntuk membuat rodanya berputar maka klik %ween !roperties seperti gambar dibawah ini. Mo0e * een $otion & !osisi %hape & 4entuk

Mo0e * een $otion & !osisi %hape & 4entuk

>@.

Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang menguling dari kiri ke kanan. 'ntuk membuat perubahan warna atau transparansinya anda dapat mengklik posisi frame kemudian mengklik obje#t yang akan anda ubah. 'ntuk parameternya dapat dilihat pada obje#t properties berikut

9arna !rosentase !engganti !en#ampura n

Color 4rightnes s %int

"engganti %ransparansi

!rosentase %ransparansi

>>. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang menguling dari kiri ke kanan dan berubah warna 1$% impan hasil kerja anda dengan nama & Animasi9* een9nama an0a LA*)HAN 2 >. 4uatlah dkumen baru dengan memilih menu File= NE<, ?. 4uatlah tiga buah bintang seperti berikut. usunan warna hijau, merah, merah.

$.

4lok semua bintang tersebut kemudian Con.ert menjadi simbol dengan #ara klik kanan, dengan nama & Lam#u

).

-unakan 1e#tangle %ool untuk membuat kotak, lihat gambar -aris !inggir (warna "erah)

-aris !inggir (warna "erah) A. Klik ?/ di gambar bintang (*ampu) D. 5nsert Keyframe di frame A. usunan warna merah, hijau, merah. E. 5nsert Keyframe di frame >@. usunan warna merah, merah, hijau.

G. J.

5nsert frame di frame >A. usunan layer seperti berikut&

>@. !ilih #ene > >>. %ambahkan > layer baru 4uat balon seperti gambar berikut. etelah selesai 4alon tersebut Co.ert ke imbol (seperti langkah nomor $). 4eri nama symbol & BALON

>?. Klik ? kali di objek 4alon, tambahkan > layer untuk memberikan tulisan Be hat ) <anna /e >$. %ambahkan > layer lagi untuk memberikan tulisan +i0s fest= lengkapnya seperti berikut

>). !ilih layer $ (tulisan +i0s Fest). 5nsert +e3 Frame di frame ke(?, kemudian ganti warna tulisan menjadi warna 4iru >A. 'langi langkah ke >) untuk frame ke $, ) dan A dengan memberikan warna (7ijau, 7itam dan 2range) atau sesuai dengan selera anda. >D. Di *ayer ? dan layer > blok sampai frame A dan klik kanan pada time line pilih )nsert Frame, time line lengkapnya dapat melihat gambar dibawah ini

>E. Kembali ke #ene >

>G. -anti *ayer > dengan nama *ampu, ganti *ayer ? dengan nama 4alon >J. %ambahkan $ layer baru untuk mengetik tulisan +i0sfest $&11= Atrium Pe,aten 1illage= 1& D 15 Desem/er $&11= se#erti 0i/a ah ini

?@. ekarang anda akan melengkapi animasinya. Di te/t > (tulisan Kidfest ?@>>). Create Motion * een= di frame $ insert KeyFrame. !ada frame > pindahkan te/t keluar stage (sehingga nantinya animasinya masuk dari luar sebelah kiri ke dalam) ?>. *akukan hal yang sama untuk %eks? dan %eks $ ??. 4alonnya juga lakukan hal yang sama dengan memanfaatkan Create Motion * een= tentukan posisi awal dan akhir, lebih lengkapnya dapat dilihat bentuk %imeline dibawah ini Create Motion * een=

?$. impan hasil kerja anda dengan nama Latihan29nama an0a ?). =alankan animasi anda tekan C*(L @ Enter

Pertemuan 4 SHAPE AN)MA*)ON

hape %ween adalah fasilitas pada Adobe Flash yang berfungsi untuk mengubah bentuk obje#t dalam satu layer. !rinsipnya adalah mengubah atau men(tween bentuknya atau shapenya. Dengan tweening shape, anda dapat membuat efek morphing yang membuat perubahan bentuk satu ke yang lain. elain men(tween shape, Flash juga dapat men(tween lokasi, ukuran dan warna shape. 2bje#t yang dapat diubah bentuk adalah obje#t shape. 4ila obje#t tersebut bukan sebuah shape maka anda harus mengubah obje#t tersebut menjadi obje#t shape dengan #ara menekan CtrlK4 (4reak Apart). Contoh obje#k bukan obje#t shape adalah obje#t %eks. >. 4uat Dokumen baru dengan memilih menu File= Ne ?. Ketik angka > (atur jenis huruf dan ukurannya) $. Kemudian di frame >A anda buat 5nsert Key Frame ). %ambahkan angka ? masih di frame >A Karena tulisan adalah teks blok maka anda harus membuatnya menjadi shape terlebih dahulu A. Klik angka > pada keyframe > dan jadikan klik kanan pilih Break A#art D. 'langi langka A untuk angka ? hape. !ilih menu Mo0if3= Break A#art atau

E.

'ntuk melakukan hape tweening, klik salah satu frame diantara frame ke ? sampai frame ke >) sehingga akan membuat seluruh frame dari frame ke > sampai frame ke >) menjadi tersorot G. !ada !roperties di kotak %ween, pilih hape

"aka seluruh frame yang tadinya berwarna abu(abu menjadi hijau terang

J. impan hasil kerja anda dengan nama SHAPE Animation19nama an0a >@. =alankan animasi anda dnegan menekan tombol C*(L @ EN*E( Catatan anda bisa mengembangkan;memodifikasi animasi ini dalam bentuk yang lain Catatan : 'ntuk memperoleh animasi yang gerakannya lebih teratur dapat digunakan 750%. ebagai #ontoh mari praktekkan latihan dibawah ini >. 4uatlah sebuah file baru ?. Dengan menggunakan O:al *ool buatlah objek seperti dibawah ini

7A!6

2%

Klik di frame )@ pada timeline, klik kanan mouse , pilih )nsert Blank +e3Frame

).

Di posisi frame yang ke()@ buatlah persegi panjang seperti dibawah ini

A. Klik mouse dibagian tengah %imeline, kemudian di Pro#erties, pada pilihan %ween, pilih SHAPE D. =alankan animasi Sam#ai 0isini an0a su0ah mem/uat sha#e animtion 3ang stan0ar0= mari lan,utkan su#a3a gerakan animasin3a le/ih teratur E. Klik mouse pada frame yang pertama

G. !ilih menu MOD)F- D SHAPE D ADD SHAPE H)N*, akan mun#ul bulatan ke#il berwarna merah

J.

'langi sebanyak $ kali kemudian drag masing masing titik a, b, #, d seuai gambar

>@. Klik mouse pada frame terakhir (frame )@)

>>. !indahkan masing(masing titik a, b, #, d sesuai gambar. %itik akan berubah menjadi warna hijau

>?. Klik kembali mouse pada frame yang pertama. Anda perhatikan bahwa titik berubah jadi warna kuning, artinya hape 7int telah berhasil >$. impan hasil pekerjaan anda dengan nama SHAPE Animation$9nama an0a >). =alankan animasi Coba anda bandingkan sebelum hasil animasinya sebelum diberikan hape 7intH.

Pertemuan 5 MOTION GUIDE

!embuatan "otion %ween telah dibahas pada pertemuan seblaumnya. "otion %ween akan menggerakkan obje#t dari satu posisi ke posisi yang lain dengan garis lurus. Kalau anda menginginkan gerakan objek tersebut tidak lurus maka anda dapat memasangkan motion guide pada tween tersebut. Dengan kata lain anda dapat membuat jalur yang akan dilewati gerakan objek tween mengunakan Motion Gui0e.
layer motion guide

layer object yang gerakannya diatur oleh layer motion guide. Layer ini ditandai dengan posisi icon agak menjorok ke dalam

Dengan "otion -uide ini anda dapat membuat jalur pergerakan sesuai dengan garis yang anda buat pada layer motion guide. 5si dari layer motion guide ini adalah garis dalam bentuk apa saja, bisa lurus, belok, melengkung dan lain(lain. "ari ikuti langkah(langkah dibawah ini sebagai #ontoh anda akan membuat suatu objek kemudian animasinya sesuai dengan jalur garis yang anda inginkan. >. 4uatlah -ambar bola seperti dibawah ini pada kiri atas stage.

?. -erakkan ke arah kanan bola mengunakan motion tween. (pelajari lagi modul $ jika anda lupa). $. *alu #li#k kanan layer hingga mun#ul tulisan seperti gambar berikut

Kemudian pilih add motion guide. Kalau benar layer akan bertambah seperti gambar berikut.

).

4uat garis pada layer guide dengan diawali meng#li#k keyframe layer guide lalu membuat garis mengunakan line tool pada toolbar. 4uat garis tersebut di state yang menandakan jalur pergerakan tween. *ihat gambar dibawah ini

A.

1ubah garis lurus menjadi melengkung dengan #ara mendekatkan mouse pada garis hingga gambar mouse berubah seperti gambar dibawah ini, kemudian klik and drag ke bentuk lengkung sesuai keinginan anda.

D.

4ila proses benar maka akan dapat terbentuk gambar seperti dibawah ini.

%ekan enter untuk melihat hasil motion guide. Kalau gagal #oba lakukan %5! berikut ini %ip & 'osisikan awal ob!ect dan akhir ob!ect sesuai dengan awal dan akhri garis guide. (aris guide dapat dihilangkan dengan mengklik titik dibawah mata pada layer guide, E. impan hasil kerja anda dengan nama Animasi9Motion Gui0e(nama anda

Pertemuan 6 MAS+)N G
"asking adalah fasilitas Adobe Flash yang berfungsi untuk menutup gambar atau objek dan menampilkan gambar atau objek sesuai dengan objek mask yang anda buat. "isal objek mask adalah lingkaran maka bila animasi dijalankan akan tampak objek yang asli tetapi yang terlihat hanya bentuk lingkaran. "asking ini juga dapat dilakukan terhadap tween dan anda juga dapat melakukan tween terhadap layer masking.
Layer masking

Layer objeck yang dimasking. Layer ini ditandai dengan menjorok ke dalam.

Dengan metoda masking anda dapat mengatur objek yang akan ditampilkan dalam sebuah animasi. "etoda masking akan terlihat dalam stage bila kedua layer dalam keadaan lo#k. 4ila tidak dalam keadaan lo#k masking tidak dapat berpengaruh terhadap .iew stage, tetapi akan tetap berjalan bila animasi dijalankan dalam mode pre.iew. ebagai latihan mari ikuti langkah dibawah ini >. 4uat dokumen baru ?. 4uatlah tulisan pada layer > di tengah state seperti gambar dibawah ini $. Kemudian pada layer yang berbeda (buat layer baru) buatlah gambar lingkaran pada posisi di sebelah kiri tulisan seperti gambar dibawah ini

). 4uatlah semua layer menjadi >A frame hingga timeline seperti gambar di bawah ini.

A.

4uatlah tween pada layer dua (gambar lingkaran) dari kiri ke kanan tulisan. 7ingga pada saat dijalankan lingkaran menutupi tulisan.

D.

Agar "ask menjadi melakukan masking pada layer > maka klik kanan layer dua lalu pilih mask. *ihat gambar berikut.

E.

=ika langkah ke A betul berarti timeline akan berubah menjadi seperti gambar berikut.

8. Coba jalankan dengan menekan enter. =ika proses anda benar maka tulisan yang

tampak adalah bentuk lingkaran seperti obje#k mask yang menutup. Tip & %etelah layer diset sebagai mask maka layer tersebut akan secara otomatis dikunci "lock# pada posisi ini layer tak bisa diedit. Untuk mengedit terlebih dulu membuka kunci dengan mengklik gambar kunci pada layer yang akan anda edit. %etelah diedit !angan lupa mengkunci kembali layer, karena masking tidak dapat ber!alan bila layer tidak terkunci. $eski masking seperti tidak berfungsi tetapi pada saat anda e)port "publish# masking tetap dapat berfungsi.

Klik di sini untuk mengun#i atau membuka kun#i

J.

Coba lakukan modifikasi pada animasi. "isalkan lingkaran sebagai masking yang diam tetapi tulisan sebagai yang dimasking justru yang bergerak. >@. impan hasil pekerjaan anda dengan nama Animasi masking9nama an0a

Pertemuan 7 )MPO(* DAN EEPO(* MED)A

eperti halnya software(software yang lain Adobe Flash juga terdapat fasilitas e/port dan import. Fungsi import ini digunakan untuk memasukkan media lain misal gambar (jpg, gif, bmp dll), suara (wa., mp$ dll), .e#tor (ai, wmf dll), animasi (swf, gif aminasi dll) atau mo.ie (a.i, mpg, mo., wmf dll). %erdapat dua metoda import yang terdapat dalam Adobe Flash yaitu )m#ort dan )m#ort to li/rar3. Kedua metoda ini memiliki maksud yang tersendiri, jadi anda harus menentukan metoda import apa yang akan anda gunakan. Import to Stage Fasilitas ini menghasilkan media yang anda import akan langsung ditampilkan dalam stage dan tersimpan pula dalam library. =adi bila anda mengunakan fasilitas ini, anda harus mengatur dulu ke layer dan frame mana import anda lakukan. "etoda ini tidak dapat anda gunakan dalam import media suara. "eski anda melakukan import suara tetapi media suara tidak langsung masuk ke frame. 'ntuk suara anda tetap harus memasukkan ke frame dengan #ara manual. Import to Library Fasilitas ini menghasilkan media yang anda import hanya masuk ke dalam library. =adi bila anda akan mengunakan media tersebut, anda harus memasukkan melalui library. =adi anda harus menampilkan do#ker library dengan #ara menekan *trl+,--. etelah mun#ul do#ker tersebut anda bisa mengunakan media tersebut dengan meng(click and drug media tersebut dan dimasukkan ke stage. Anda harus mengigat bahwa sebelum anda memasukkan media anda siapkan dahulu frame mana anda akan memasukkan media. Cara ini hanya diperuntukkan memasukkan media selain media suara. 'ntuk memasukkan media suara diperlukan #ara tersendiri yang akan anda pelajari dalam latihan. Fungsi e>#ort digunakan untuk mengubah animasi Adobe Flash menjadi media lainnya, misal& swf, wa., a.i, mo., gif animasi, e/e, wmf, html dll. 6/port ini dalam Adobe Flash la<im diistilahkan dengan Pu/lish. "emang dalam Adobe Flash terdapat berbagai ma#am e/port yang dapat dilakukan. "odul ini hanya akan membahas e/port media berwujud swf. Anda memilih swf karena memiliki ukuran file yang ke#il. LA*)HAN )MPO(* >. 4uat dokumen baru ?. Klik file pada pulldown menu kemudian akan terlihat seperti gambar berikut

)m#ort yang di import langsung masuk ke stage dan library )m#ort to li/rar3 yang di import tidaka masuk dalam stage tetapi hanya di *ibrary

$.

Dengan memilih perintah 5mport maupun 5mport to library akan mun#ul tampilan seperti dibawah ini
Direktory tempat File "edia

0ama File "edia

%ype File "edia

).

4ila tadi anda memilih import maka gambar langsung tampil di stage. dapat dilihat pada gambar berikut

ebagai #ontoh

Tip : (ambar dengan format !pg atau bmp akan selalu memberi warna dan background segi empat. Bila anda menginginkan gambar yang di import tidak mempunyai background atau background transparan anda sebaiknya mengunakan format gambar gif "gif mengenal warna transparan#. Tentu sa!a saat membuat gambar dengan format gif backgrundnya harus dibuat transparan.

A.

4ila anda ingin mengubah ukuran anda bisa mengunakan free transform tool pada tool bar. 4ila anda menekan tombol tersebut maka gambar akan menjadi seperti dibawah ini. Cli#k and drag pointer segi empat ini ke tempat yang anda inginkan untuk mengubah ukuran
Tip : 'ada saat mouse mendekati garis atau pointer atribut mouse akan berubah. .da / macam atribut mouse, temukan dan coba masing0masing fungsinya.

D.

Kalau anda melakukan import to library maka gambar tidak tampak pada stage. 'ntuk menggunakan anda harus menampilkan library dengan F>> atau #li#k window pull down lalu pilih Li/rar3. Kalau perintah benar akan mun#ul library seperti pada gambir berikut

'ntuk menggunakan gambar ini #li#k and drag i#on lalu letakkan di stage

E.

'ntuk import suara prosesnya sama dengan import to library, sedang untuk pengunaannya akan dibahas pada modul selanjutnya.

LA*)HAN EEPO(* Fasilitas e/port pada Adobe Flash lebih dikenal dengan nama Pu/lish. Ada juga e/port yang tidak terdapat pada publish yaitu e/port mo.ie dan e/port image. !enjelasan tentang ma#am( ma#am e/port dapat dijelaskan pada langkah(langkah berikut. >. ebelum anda melakukan publish sebaiknya anda melakukan publish settings dengan #ara #li#k ,ile pada pull down menu lalu pilih publish settings. "aka akan mun#ul gambar berikut.

Dari gambar diatas anda dapat menset file apa yang akan anda inginkan sebagai animasi hasil publish. 'ntuk biasa digunakan swf, maka tanda #entang di 7%"* sebaiknya anda hilangkan saja dengan mengklik tanda tersebut. ?. etelah anda klik 2K maka pengaturan setting publish telah selesai. 'ntuk mem(publish anda bisa mengklik File pada pull down menu lalu pilih !ublish. Kalau proses publish berhasil anda akan melihat tampilan animasi hasil !ublish. Tip : Untuk membuat media animasi, anda check swf sa!a. 1adi file hasil publish hanya swf. 2al ini dilakukan agar proses publish lebih cepat. ,ile hasil publish terletak di direktori tempat file .dobe ,lash anda simpan.

$.

6/port mo.ie digunakan untuk membuat animasi dengan format .ideo. Caranya adalah mengklik File pada pull down menu lalu pilih E>#ort Mo:ie. elanjutnya anda tinggal mengisi nama file dan format .ideo yang akan anda buat. Dalam modul ini tidak membahas lebih lanjut e/port metoda ini. 4. 6/port image digunakan apabila anda ingin meng(e/port frame by frame ke dalam format gambar. Dalam modul ini tidak membahas lebih lanjut e/port metoda ini.

Pertemuan 8 MEMAS.++AN MED)A S.A(A

'ntuk memperindah dan menghidupkan sebuah animasi anda dapat memasukkan suara untuk sound effe#t maupun narasi. Dengan tambahan media suara anda mengharapkan animasi yang anda buat akan lebih bagus. Cara memasukkan suara ke dalam animasi didahului dengan meng(import file suara. Cara meng(import suara sama dengan #ara meng(import media lain yang telah diuraikan pada modul sebelumnya. ebelum anda men#oba memasukkan media suara sebaiknya anda pahami dahulu parameter yang berhubungan dengan suara. !ada saat anda mengklik keyframe maka dibagian bawah stage terdapat parameter keyframe seperti gambar dibawah ini.
!roperties %ween !roperties ound

!roperties tween telah dibahas pada modul sebelumnya. !roperties sound berisi parameter suara yang berfungsi untuk mengatur pemun#ulan suara pada animasi yang anda buat. !arameter tersebut antara lain & Soun d !arameter ini berisi nama file suara yang terdapat pada library. Kalau ingin diubah anda bisa mengklik panah di sebelah kanan tulisan dan anda pilih suara apa yang ingin anda tampilkan dalam frame tersebut. 4ila dalam *ibrary tidak terdapat media suara maka pada saat anda mengklik panah anda tidak mendapatkan nama file suara tetapi hanya tertulis none. Effe ct !arameter ini berfungsi agar anda dapat mengatur bagaimana suara itu mun#ul pada frame tersebut. 4isa mun#ul dari pelan terus keras, awalnya keras trus berakhir pelan, pindah #hannel kiri ke kanan dan lain lain. 4ahkan anda dapat memilih #ustom dengan #ara mengklik tombol 6dit di sebelah kanannya. Syn c "ensinkronkan frame. Loo

suara

dengan

p 4erapa kali suara akan mun#ul setelah frame dijalankan. Atau dengan kata lain jumlah pengulangan yang anda inginkan. Dengan mengatur parameter di atas anda dapat se#ara leluasa mengatur pemun#ulan suara seperti yang anda inginkan.

Cara(#ara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan men#oba langkah( langkah dalam latihan berikut ini. LA*)HA N Agar anda dapat leluasa men#oba memasukkan media suara, anda harus terlebih dahulu membuat animasi yang akan anda masuki media suara. Apa bila anda masih kesulitan membuat animasi yang terdapat dalam latihan ini sebaiknya anda membuka kembali modul yang sebelumnya.

>. 4uatlah animasi bola memantul seperti gambar dibawah ini

?.

!osisi bola pada frame > dan $@ melayang sedang pada frame >A menyentuh lantai. =adi saat animasi dijalankan bola memantul ke lantai. $. 4ila prosedur import Anda benar maka dalam library akan mun#ul seperti gambar dibawah ini. 'ntuk memun#ulkan library Anda dapat menekan CtrlKF>>.

File uara hasil 5mport dari C&L950D29 L"edia

).

4uat layer baru dengan nama suara (double #li#k layer untuk menganti nama). Kemudian buat keyframe pada frame >A (klik kanan pada frame >A lalu pilih insert keyframe). Kalau benar akan terlihat seperti gambar dibawah ini.

A.

Kli#k keyframe >A pad layer suara lalu ubah keyframe properties seperti gambar dibawah ini
Klik panah lalu pilih suara yang akan dimasukkan

"engedit uara =umlah 1epat bila diinginkan repeat suara

"emberikan efek pada suara

D.

4ila langkah anda benar maka time line akan berubah menjadi seperti gambar dibawah ini.

File suara telah masuk kedalam frame ditandai dengan mun#ulnya grafik suara E. G. =alankan animasi dengan menekan enter. 'ntuk melihat hasil akhir animasi tekan Ctrl F>? impan hasil pekerjaan anda dengan nama Me0ia Suara9nama an0a

Pertemuan F B.**O N
Button adalah komponen yang penting dalam Adobe Flash. Karena dengan button anda dapat membuat animasi yang interaktif. "isalnya dengan mengunakan botton user dapat memerintah animasi untuk melompat ke s#ene atau frame yang lain. elain itu dapat digunakan membuat effek(effek yang lain. Di dalam button ada ? ma#am keadaan yaitu .#= O:er 0an Do n. =adi untuk membuat buttonanda harus membuat tiga gambar. 4ila kita mambuat button maka nomor frame akan berubah menjadi 'p, 2.er, Down dan 7it. .# & bila krusor berada di luar 7it O:er & bila krusor berada di area 7it Do n & bila mouse di klik dan krusor berada di area hit Hit & area untuk mengaktifkan fungsi button. 4ila kosong maka areanya sesuai dengan gambar yang ada. Dengan tiga keadaan di atas maka button akan menjadikan animasi yang dibuat interaktif. Agar button yang kita buat menjadi lebih dinamis kita dapat memasangkan mo.ie #lip pada salah satu keadaan. "isalkan pada frame down kita pasangkan mo.ie #lip dan pada frame up gambar statis maka bila button tersebut dijalankan dan mouse berada di posisi hit maka gambar button tersebut bergerak dinamis sesuai dengan mo.ie #lip yang dipasangkan. Ada dua #ara untuk mengunakan button yaitu & >. Mengunakan Common Li/raries 3ang su0ah terse0ia. 'ntuk mengaktifkannya kita dapat mengambil !ulldown menu Windows 3 *ommon 4ibraries 3 Buttons. Dengan perintah ini akan mun#ul do#ker seperti gambar di sebelah kanan. -ambar tas menunjukkan folder yang berisi berma#am(ma#am button dan i#on segi empat dengan tangan menandakan symbol button yang bisa digunakan. edangkan gambar diatas adalah bentuk button yang dipilih.

?.

Mem/uat sen0iri 0ari a al= dengan memilih di pulldown menu )nsert C Ne etelah itu akan mun#ul tampilan berikut ini &

S3m/ol.

0ame adalah nama symbol yang akan tampil di

library. =enis symbol yang akan dibuat

=ika sudah diberi nama dan jenis simbol (4utton) yang akan dibuat maka klik 2K dan tampilan akan menjadi seperti dibawah ini

0ama button yang sedang di edit

!osisi gambar saat ditampilkan

etelah tampilan %imeline berubah seperti gambar di atas maka anda bisa memulai mengambar pada stage. 'ntuk menjalankan interaktifnya button selalu mengunakan a#tion s#ript sebagai program bantunya. Dalam pengunaan a#tion s#ript pada button ada dua ma#am on(press) { perintah ; } on (release) { perintah ; } On !#ress' & !erintah dilakukan saat tombol mouse ditekan. On !release' & !erintah dilakukan saat tombol mouse dilepas. Perintah & perintah(perintah a#tion sript yang dijalankan. ebagai latihan, #oba buatlah animasi interaktif seperti dibawah ini & +eterangan ? >. 4erisi tulisan seperti gambar diatas angka sesuai dengan nomer frame. ?. Animasi tidak bergerak otomatis, tapi menunggu respon tombol dibawahnya. $. %ombol paling no > untuk melompat ke awal frame (frame >) ). %ombol paling no ? untuk melompat ke frame sebelumnya (pre.ious frame) A. %ombol paling no $ untuk melompat ke frame selanjutnya (ne/t frame) D. %ombol paling no ) untuk melompat ke akhir frame (frame >A) Langkah ker,a ? >. 4uatlah tiga layer dan diberi nama seperti

gambar diatas (A#tion, %eks, %ombol) ?. 4uatlah s#rip sto#!'G di semua frame pada layer a#tion. $. 4uatlah tulisan frame dan angka dibawahnya seperti gambar diatas pada layer teks. ). Copikan sampai frame ke >A, kemudian edit angkanya sesuai dengan nomer frame. A. 4uatlah tombol mengunakan #ommon libraries dalam map play ba#k. D. 4uatkan a#tion s#ript pada masing masing tombol dengan #ara mengklik kanan tombol lalu pilih a#tion. "aka akan mun#ul tampilan seperti dibawah ini.

%anda kalau a#tion s#riptnya untuk button

%empat untuk listing a#tion s#ript

7. 'ntuk tombol no > isikan A#tion #ript seperti list dibawah ini : on (release) { gotoAndPlay(1); } G. 'ntuk tombol no ? isikan A#tion #ript seperti list dibawah ini & on (release) { NextFrame(); } 9. 'ntuk tombol no $ isikan A#tion #ript seperti list dibawah ini & on (release) { prevFrame(); } >@. 'ntuk tombol no ) isikan A#tion #ript seperti list dibawah ini & on (release) { gotoAndPlay(15); } >>. impan hasil pekerjaan anda dengan nama Button9nama an0a >?. Coba anda jalankan, apa pendapatmu I

LA*)HAN F >. 4uka file animasi Masking9nama an0a yang pernah anda buat pada pertemuan( pertemuan sebelumnya ?. 4uat layer baru dan beri nama Kontrol, sehingga tampilannya seperti gambar dibawah ini

$. ).

%ampilkan *ibrary 4utton dengan memilih menu <in0o s= Common Li/raries= Button 4uat objek tombol pada layer Kontrol yang barusan anda tambahkan, seperti dibawah ini

!ilih !layba#k 1ounded (oun0e0 Green Sto# 0an (oun0e0 Green Pla3 A. D. E. G. !ada %ombol !lay tambahkan #ript %ambahkan *ayer 4aru dengan nama S"ri#t Klik kanan pada layer #ript di Frame > pilih )nsert Blank +e3frame %ambahkan s#ript pada Frame > di *ayer #ript dengan topt()

J.

=alankan animasi anda, kemudian simpan dengan nama LatihanF9nama an0a

Pertemuan 1& SCEN E

S"ene adalah satu macam animasi yang berisi berbagai layer dan frame. !ada animasi yang telah anda bahas sebelumnya hanya memiliki > s#ene. 4ila anda akan membuat satu file animasi dengan dua ma#am animasi yang berbeda dan anda akan memisahkannya anda bisa membuatnya dengan ? s#ene. Dengan menggunakan ? s#ene anda dengan mudah melakukan editing karena meskipun terdapat dalam satu file tetapi masing(masing animasi terpisah. 'ntuk mengatur s#ene anda dapat mengaturnya dalam do#ker seperti dibawah ini &

Ha#us S"ene

Nama S"e ne Du#li"ate S"ene

*am/ah S"ene

Dengan mengunakan dua s#ene anda lebih leluasa melakukan lompatan dari satu frame ke satu frame dalam s#ene yang lain. Dalam pengunaannya untuk e(learning anda dapat memanfaatkan s#ene untuk memisahkan menu materinya. =adi dalam pengeditannya anda lebih mudah. 'ntuk lebih jelasnya mari ikuti langkah(langkah berikut ini Keterangan >. #ene pertama seperti modul J (Button9 nama an0a) ?. #ene kedua berisi seperti modul J tetapi tidak berisi angka melainkan huruf. $. %ambahkan tombol huruf untuk s#ene angka dan

tombol angka untuk s#ene huruf.

Langkah ker,a >. ?. $. 4uka file modul J (Button9nama an0a) lalu sa.e as dengan nama S"ene9nama an0a !ada layer tombol buat tulisan huruf dengan segi empat seperi gambar diatas 'bah tulisan huruf dan kotak menjadi tombol dengan mengklik kanan dan pilih #on.ert to symbol, lalu pilih button dan beri nama *om/ol . %ambahkan a#tion s#ript pada tombol huruf dengan list s#ript dibawah ini on (release) { gotoAndPlay(!"#r#$!% 1); } A. Duplikat s#ene dengan #ara mengklik tombol duplikat pada do#ker s#ene D. 'bah nama s#ene ke dua menjadi huruf ( ada dua s#ene yang satu bernama ANG+A dan yang satu H.(.F) E. 6dit layer teks dari angka ke huruf berurutan dalam setiap frame G. 4uat tombol angka dan s#iptnya seperti langkah ?, $ dan ). %etapi mengunakan list s#ript sebagai berikut & on (release) { gotoAndPlay(!Ang&a!% 1); } J. Coba jalankan animasi anda >@. impan hasil kerjanya.