Post on 05-Jul-2018
8/16/2019 Diktat Flash
1/48
PENDAHULUAN
Animasi merupakan salah satu bentuk visual bergerak yang dapat dimanfaatkan untuk
menjelaskan materi pelajaran yang sulit disampaikan secara konvensional. Dengandiintergrasikan ke media lain seperti video, presentasi, atau sebagai bahan ajar tersendiri
animasi cocok untuk menjelaskan materi-materi pelajaran yang secara langsung sulit
dihadirkan di kelas atau disampaikan dalam bentuk buku. Sebagai misal proses bekerjanya
mesin mobil atau proses terjadinya tsunami.
Dengan tujuan memberi pengetahuan dasar tentang bagaimana membuat animasi kepada
peserta didik modul Pembuatan Animasi dengan Flash ini ditulis. !odul ini berisi
kegiatan belajar yaitu"
#$%&A'A( ) " Menggambar Bentuk Dasar, Menggunakan Warna, dan Mengimpor
Gambar
#$%&A'A( * " Membuat Animasi Objek Bergerak
#$%&A'A( + " Membuat Animasi eks beruba! Warna
#$%&A'A( " Membuat Animasi dengan Masking dan Pat!
#$%&A'A( " Memberi "uara pada Animasi
#$%&A'A( " Membuat ombo# $ontro# %p#a& dan stop' untuk Animasi
#$%&A'A( / " Membuat Animasi Proses Metamor(osis $upu)$upu
#$%&A'A( " Mempub#is! dan Mengekspor *i#e
Setelah mengikuti kegiatan-kegiatan belajar tersebut diharapkan Anda dapat membuat
animasi sederhana dengan menggunakan Flash . Dengan pengetahuan dasar pembuatan
animasi ini serta pengetahuan lain dari modul-modul pelatihan pemanfaatan &0', diharapkan
Anda dapat mengembangkan bahan ajar yang lebih menarik dan mudah dipahami oleh
peserta didik.
Selamat Belajar.
1
8/16/2019 Diktat Flash
2/48
8/16/2019 Diktat Flash
3/48
3/ Menggambar #ingkaran atau
e#ips
Pilih O4a# oo# % ' untuk meng-
gambar bentuk lingkaran atau
elips. 4ntuk memulai
menggambar, klik pada stage
dan drag sebesar lingkaran atau
oval yang Anda inginkan. Adapun
jenis dan 3arna garis serta 3arna
isi bentuk itu dapat dipilih pada
panel 2o#ors .
5/ Menggambar kotak
Pilih e1tang#e oo# % ' untuk
menggambar bentuk kotak pada
layar. 4ntuk memulai
menggambar, klik pada stage
dan drag sebesar kotak yang
Anda inginkan. Adapun jenis dan
3arna garis serta 3arna isi 1fill2
bentuk itu dapat dipilih pada
panel 2o#ors .
Apabila Anda ingin bentuk sudut kotak tidak berbentuk lancip tetapi berupa sudut
yang halus 1lengkung2, Anda dapat mengubahnya dengan cara pilih e1tang#e %
' dan pilih "et 2orner adius yang berada di bagian ba3ah panel. !asukkan nilai
dalam kotak dialog e1tang#e "etting dan pilih O$ . !ulailah menggambar
kotak dan hasilnya akan terlihat.
6/ Menggambar bentuk bersegi3
8/16/2019 Diktat Flash
4/48
ban&ak
4ntuk menggambar bentuk bersegi
banyak, #lik dan tahan pada
e1tang#e too# % ' , kemudian pilih
Po#igon too# % ' .
4ntuk memilih bentuk bersegi banyak
atau bintang, Pilih Options pada
panel Properties, #emudian pada
jendela dialog oo# "ettings yang
muncul Anda dapat memilih bentuk
yang diinginkan serta dapat mengisikan angka berapa segi banyak yang akan dibuat.
4ntuk menggambarnya, #lik mouse pada stage kemudiandrag sesuai besarnya objek yang diperlukan.
7/ Menggambar bentuk bebas atau
unik
4ntuk membuat bentuk bebas atauunik Anda dapat menggunakan
Pen oo# % ' . #lik mouse pada
stage, drag dan lepas, maka garis
akan terbentuk. %erakkan kembali
mouse ke arah yang diinginkan dan
klik untuk membuat sudut atau
anchor point . 5ila bentuknya
merupakan kurva tertutup makadapat diberi 3arna.
8/ Menguba! Ukuran Objek
4
8/16/2019 Diktat Flash
5/48
Pilih "e#e1tion oo# % 'double klik pada gambar6
objek yang akan diubah
ukurannya. Pilih *ree
rans(orm oo# % ' ,
makapada ujung bentuk akan
muncul kotak kecil atau
handle . Pada panel Option
pilih opsi "1a#e % ' . #lik pada salah satu titik kemudian Drag kotak kecil tersebut
ke arah luar, ukuran akan membesar dan drag ke arah dalam maka ukuran akan
mengecil.
9/ Memutar Objek
Pilih "e#e1tion oo# % '
double klik pada gambar6objek
yang akan diputar. Pilih *ree
rans(orm oo# % ' , maka
pada ujung bentuk akan
muncul kotak kecil atau handle .
Pada panel Option pilih opsiotate and "ke: % ' pada
panel Option kemudian arahkan mouse mendekati salah satu handle yang ada di
sudut hingga cursor membentuk panah melingkar. #lik dan drag ke arah putaran
yang diinginkan.
B/ Menggunakan Warna
+/ Mengganti Warna
4ntuk mengganti 3arna isi ataugaris dari bentuk yang telah
dibuat dapat dilakukan dengan
menyeleksi6memilih bentuk yang
akan diganti dengan
menggunakan "e#e1tion oo#
% '. Double- klik gambar yang
ingin diganti 3arnanya, kemudian pada panel 2o#ors pilih opsi "troke 2o#or 5
8/16/2019 Diktat Flash
6/48
% '#lik dan pilih 3arna untuk mengubah 3arna garis atau pilih *i## 2o#or
% ' #lik dan pilih 3arna untuk mengubah 3arna isibentuk.
0/ Gradasi
4ntuk memberi 3arna gradasi bada suatu gambar6objek, pilih menu Windo: ;
2o#or Mi
8/16/2019 Diktat Flash
7/48
2/ Mengimpor Gambar dan Mengo#a!n&a
+/ Mengimpor Gambar
4ntuk memasukkan gambar dalam format bitmap , seperti misalnya foto, ke dalam
movie dapat dilakukan dengan cara mengimpor gambar6foto tersebut. Pilih menu
*i#e ; -mport ; -mport to "tage , lalu cari letaknya direktori gambar yang akan di
impor.
0/ Memperbesar=memperke1i#
4ntuk memperbesar atau memperkecil ukuran gambar dapat dilakukan dengan
menggunakan "1a#e oo# % ' pada toolbar disebelah kiri. Agar ukuran
gambar tidak distorsi, tekan "!i(t pada keyboard pada saat memperbesar6memperkecil
gambar.
7
8/16/2019 Diktat Flash
8/48
3/ Menguba! Bitmap menjadi >ektor % ra1e Bitmap'
Dalam Flash terdapat fasilitas untuk mengubah gambar dalam format bitmap
menjadi vektor, yaitu menu ra1e Bitmap . Fasilitas ini berguna untuk mengurangi
besarnya file karena penggunaan gambar bitmap dalam animasi. (amun tentunya
kualitas gambar bitmap itu sendiri akan mengalami penurunan.
4ntuk mengaplikasi ra1e Bitmap pada gambar6foto yang telah kita impor,
sebelumnya pilih6seleksi terlebih dulu gambarnya menggunakan "e#e1tion oo#
% 'pada toolbar .
#emudian pilih menu Modi(& ; Bitmap ; ra1e Bitmap
Setelah muncul kotak dialog
Trace Bitmap , masukkan angka
pada kolom Color Threshold
dan Minimum Area . Semakin
besar angka yang dimasukkan
semakin besar pula file yang
dikompres. (amun sebaiknya
tidak memasukkan angka lebih kecil dari )7 1sepuluh2 karena pengaruhnya pada
pengurangan besarnya file sebagai tujuan utama Trace Bitmap akan sangat kecil.5ahkan pada beberapa komputer 1dengan spesifikasi rendah2 akan
mengakibatkan hang , karena komputer dipaksa bekerja terlalu keras untuk
menguraikan gambar tersebut.
Setelah proses Tracing Bitmap
selesai, pilih menu Modi(& ; Group ,
agar gambar yang sudah di- trace
tersebut terkumpul sebagai satu
8
8/16/2019 Diktat Flash
9/48
image .
5/ Pengo#a!an Gambar #ebi! #anjut
4ntuk mendapatkan gambar dengan hasil olahan lebih lanjut, disarankan untuk
menggunakan software lain yang memang dikhususkan untuk mengolah
gambar6foto, seperti8 Ma1romedia *ire:orks , Adobe P!otos!op atau 2ore#
P!otopaint . Flash digunakan pada saat gambar tersebut telah siap untuk
dianimasikan.
$egiatan Be#ajar 0
MEMBUA AN-MA"- OB.E$ BE,GE,A$9
8/16/2019 Diktat Flash
10/48
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat membuat"
• Animasi objek bergerak dengan pergeseran tempat• Animasi objek bergerak membesar atau mengecil• Animasi objek bergerak dengan berputar
• Animasi perubahan bentuk
U A-AN MA E -
A/ Animasi Gerak dengan Pergeseran empat
4ntuk membuat animasi sebuah objek yang dapat bergerak6 bergeser dari suatu
tempat ke tempat lain 1ke samping , ke atas, ke ba3ah dan sebagainya2 langkah-
langkahnya sebagai berikut"
). Setelah membuat file baru, pilih O4a# too# % ' pada toolbar 1atau tool yang lain
sesuai bentuk objek yang akan dibuat2.
*. 5uat sebuah lingkaran pada layar kerja.
+. Pilih "e#e1tion too# % ' , kemudian double- klik pada lingkaran untuk mengaktifkan
lingkaran.
. Pilih Modi(& 9 2on4ert to s&mbo#
. Pada kotak dialog yang tampil isikan seperti berikut"
. Pilih :#
/. #lik mouse di frame +7 pada ime#ine , kemudian pilih -nsert 9 ime#ine 9 $e&(rame
atau #lik kanan mouse pilih -nsert $e&(rame .
10
8/16/2019 Diktat Flash
11/48
. #lik mouse pada lingkaran, kemudian geser lingkaran ke sembarang tempat
1 sebagai contoh di sini digeser ke arah kanan 2
;. 5lok pada ime#ine dari frame + hingga frame 3? .
)7. Pilih jendela Properties , pada pilihan :een pilih Motion .
Atau
#lik kanan mouse pada ime#ine pilih 2reate Motion t:een
Sekarang coba jalankan animasinya dengan cara pilih 2ontro# ; P#a& atau tekan
Enter pada keyboard Catatan :
Anda dapat merubah gerakan awal dan akhir dengancara:
lik mouse pada frame ! "untuk awal gerakan# kemudian ubah letak lingkaran padalayar$ dan klik mouse pada frame %& "untuk akhir gerakan# kemudian ubah letak lingkaran'(ntuk mempercepat gerakan animasi geser keyframe akhir ke kiri ")% danuntuk memperlambat geser ke kanan "*%'
B/ Animasi Gerak dengan Pembesaran atau Penge1i#an Bentuk
4ntuk membuat animasi gerak dengan pembesaran atau pengecilan bentuk, lakukan
11
8/16/2019 Diktat Flash
12/48
langkah yang sama dengan pembuatan animasi pergeseran tempat hingga langkah ke
)7.• #emudian klik frame +7 pada ime#ine .
• Pilih *ree rans(orm oo# % ' , arahkan kursor ke salah satu titik sudut yang
muncul di gambar lingkaran. Sambil menekan tombol "!i(t pada keyboard , #likmouse pada titik tersebut dan geser ke arah luar hingga lingkaran membesar.
#emudian lepaskan mouse .
8/16/2019 Diktat Flash
13/48
• #emudian arahkan kursor ke lingkaran 1jangan ditengah-tengah2 dan klikmouse .
Catatan:
,angkah di atas bertu+uan agar saat lingkaran diputar terlihat gerakkannya'
• 'utup jendela lingkaran dan kembali ke jendela "1ene + dengan cara klik pada tab
"1ene + .
• #emudian klik frame +7 pada ime#ine .• Pilih Modi(& ; rans(orm ; otate and "1a#e• Pada jendela "1a#e and otate isi kolom otate dengan ) 7 1angka ini
menunjukkan berapa derajat objek akan berputar2
• Pilih :#
8/16/2019 Diktat Flash
14/48
D/ Animasi Peruba!an Bentuk
• 5uat sebuah file baru.
• Dengan menggunakan O4a# oo# % ' buatlah sebuah bentuk oval .
• #lik di frame 7 pada timeline, klik kanan mouse pilih -nsert B#ank $e&(rame .
• Di posisi frame ke- 7, buatlah sebuah persegi.
• #lik mouse pada bagian tengah timeline , pilih jendela Properties , pada opsi :een
pilih "!ape .•
8/16/2019 Diktat Flash
15/48
• 4langi sebanyak tiga kali kemudian drag masing- masing titik a, b, c, d sesuai
gambar.
• #lik mouse pada frame terakhir.
• Pindahkan masing-masing titik a, b, c dan d, sesuai gambar. 'itik akan berubah
menjadi hijau.
• #lik kembali mouse pada frame pertama. Dapat dilihat bah3a titik berubah menjadi
kuning, artinya, "!ape Hint telah berhasil.
•
8/16/2019 Diktat Flash
16/48
MEMBUA AN-MA"- E$"
BE UBAH)UBAH WA,NAN@A
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat"• !enggunakan teks pada flash• !engkonvert teks menjadi vektor • !embuat animasi teks berubah-ubah 3arnanya
U A-AN MA E -
A/ Menggunakan eks
4ntuk menambahkan teks ke dalam stage pilih e
8/16/2019 Diktat Flash
17/48
B/ Animasi eks beruba!)uba! Warna
4ntuk sebuah judul program terkadang perlu dibuat menarik dengan cara membuat teks
pada judul tersebut bergerak atau berubah-ubah 3arnanya.
Dengan *#as! 9 membuat animasi tersebut bukanlah hal yang sulit.
• Pertama buat file baru, melalui jendela Properties ubah 3arna background menjadi
hitam.
• Pilih e= ? 5
• Pilih Modi(& ; Break Apart
17
8/16/2019 Diktat Flash
18/48
• Pilih Modi(& ; 2on4ert to "&mbo#
• Pada jendela 2on4ert to "&mbo# , beri nama judu#, pilih Grap!i1 , pilih O$
• #lik di frame ) pada ime#ine , #lik kanan mouse -nsert $e&(rame .• #lik di frame +7 pada ime#ine , #lik kanan mouse -nsert $e&(rame .• #lik di frame ) pada ime#ine• #lik mouse pada teks
8/16/2019 Diktat Flash
19/48
$egiatan Be#ajar 5
MEMBUA AN-MA"- DENGAN
MA"$-NG DAN PA H
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat"
• !embuat animasi dengan masking• !embuat animasi mengikuti alur6guideline
U A-AN MA E -
A/ Animasi Masking
• 5uat sebuah file baru.•
#etikkan teks Pustekkom pada stage . /ont " Arial, si e" , Color " 5iru. Atur agar letaknya di tengah stage .
• #lik di frame 7 pada timeline , klik kanan mouse pilih -nsert *rame .
• &nsert layer pada jendela ime#ine , beri nama lingkaran.
19
8/16/2019 Diktat Flash
20/48
• 5uat sebuah lingkaran pada stage , ukuran lebih besar dari tinggi teks, 3arna bebas.
• #lik mouse di frame ) pada ime#ine .• Pilih Modi(& ; 2on4ert to "&mbo# .• 5eri nama #ingkaran masking , pilih Grap!i1 , pilih O$/
• Dengan menggunakan "e#e1tion too# % ' atur gambar lingkaran kesamping kiri
teks.
• #lik di frame 7 pada layer lingkaran, klik kanan mouse pilih -nsert ke&(rame .
• Dengan menggunakan "e#e1tion too# % 2 atur gambar lingkaran kesamping
kanan teks.
• 5lok dari frame ) hingga 7 pada layer lingkaran, klik kanan mouse pilih 2reate
Motion :een .
20
8/16/2019 Diktat Flash
21/48
• Pilih kotak kecil pada layer lingkaran, #lik kanan mouse pilih Mask .
•
8/16/2019 Diktat Flash
22/48
• 'ambahkan layer baru pada ime#ine , dengan cara mengklik mouse pada ikon
-nsert #a&er beri nama 5ulan.
• 5uat lingkaran yang lebih kecil dari lingkaran bumi.
• #lik kanan mouse pada lingkaran bulan pilih 2on4ert to "&mbo# , beri nama 5ulan
pilih Grap!i1 , pilih O$
• Pilih ikon Add Motion Guide pada jendela ime#ine
22
8/16/2019 Diktat Flash
23/48
• 5uat sebuah lingkaran kosong 1tanpa /ill 2 dan atur posisinya seperti di ba3ah ini.
• Dengan bantuan Eraser oo# % ' hapus sebagian lingkaran tadi hingga terputus.
• #lik kanan mouse di frame 7 pilih -nsert $e&(rame 1untuk ketiga layer2
23
8/16/2019 Diktat Flash
24/48
• Pilih frame ) pada layer 5ulan, dengan menggunakan "e#e1tion too# % ' atur
lingkaran bulan hingga titik tengahnya pada posisi a3al lingkaran guide bulan.
• Pilih frame 7 pada layer 5ulan, dengan menggunakan "e#e1tion too# % ' atur
lingkaran bulan hingga titik tengahnya pada posisi akhir lingkaran guide bulan.
• 5lok frame ) hingga 7 pada layer bulan, klik kanan mouse pilih 2reate Motion
24
8/16/2019 Diktat Flash
25/48
:een .
8/16/2019 Diktat Flash
26/48
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat"• !engimpor suara• !emasukan suara pada animasi
U A-AN MA E -
A/ Mengimpor "uara
• 5uka file animasi masking 1ini hanya untuk mempercepat tutorial2• Pilih *i#e ; -mport ; -mport to Librar&• Pilih file suara yang akan digunakan 1pada tutorial ini kita akan menggunakan file
suara yang terdapat di direktori 2 ; Windo:s ; Media ; Windo:s P "tartup 2
B/ Mamasukan "uara pada Animasi
• 5uat layer baru pada ime#ine , beri nama suara.
• #lik mouse di frame ) pada layer suara.• Pilih jendela Properties , pada kolom suara pilih Windo:s P "tarup
•
8/16/2019 Diktat Flash
27/48
UN U$ AN-MA"-
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat"
• !embuat tombol• !amberi action pada tombol
U A-AN MA E -
A/ Membuat ombo#
• 5uka file animasi masking 1ini hanya untuk mempercepat tutorial2• 5uat layer baru, beri nama #ontrol.
• Pilih Windo: ; 2ommon Libraries ; Buttons• Pada jendela Librar& Bottons , pilih P#a&ba1k
rounded ; rounded green p#a& #lik mouse dan
geser gambar tombol yang muncul di stage. Atur
letaknya pada bagian ba3ah stage.
• Pada jendela Librar& Bottons , pilih P#a&ba1k rounded ; rounded green stop/
• #lik mouse dan geser gambar tombol yang muncul ke layar. Atur letaknya di samping tombol
play .
27
8/16/2019 Diktat Flash
28/48
B/ Memberi perinta! a1tion pada tombo#/
+/ Memberi perinta! a1tion p#a& pada tombo# p#a&
• #lik gambar tombol play pada stage.• Pilih jendela A1tions yang terdapat di ba3ah layar, atau pilih :indo: ; A1tions/
• Pada jendela A1tions pilih ikon ; G#oba# *un1tions ; Mo4ie 2#ip 2ontro#
; on
• Pilih re#ease pada menu pilihan yang muncul.
• #lik mouse di tengah tanda kurung kura3al pada jendela actions.
• Double klik pada pilihan p#a&
28
8/16/2019 Diktat Flash
29/48
8/16/2019 Diktat Flash
30/48
• Sehingga script pada jendela A1tions tampak seperti di ba3ah ini.
• 5uat layer baru pada ime#ine beri nama Script.
• #lik kanan mouse di frame), layer Script, pilih -nsert B#ank $e&(rame .
• #lik mouse di frame), layer Script.• Pada jendela A1tion ketikkan stop %' C
• #lik mouse di frame! , layer suara, dengan cara klik dan geser pindahkan titik
30
8/16/2019 Diktat Flash
31/48
1keyframe 2 ) ke frame *.
•
8/16/2019 Diktat Flash
32/48
$egiatan Be#ajar 8
MEMBUA AN-MA"- "-$LU" H-DUP $UPU)$UPU
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat membuat animasi siklus hidup
kupu-kupu dengan memanfaatkan tool pada Flash .
U A-AN MA E -
A/ Men&iapkan *i#e Baru
• 5uat File baru dengan setting properties sebagai berikut.
• #emudian buat empat layer pada 'imeline masing-masing dengan nama, kupu-kupu,
telur, ulat dan kepompong.
32
8/16/2019 Diktat Flash
33/48
B/ Membuat Gambar
• Pada frame ) layer kupu-kupu beri gambar kupu-kupu
1Anda dapat mengimpor atau membuat gambar sendiri2.
• Pada frame ) layer telur beri gambar telur.
• Pada frame ) layer ulat beri gambar ulat.
• Serta pada frame ) layer kepompong beri gambar
kepompong.
#emudian atur agar posisi gambar sebagai berikut.
• 5uat layer baru di antara layer kupu-kupu dan layer telur, beri
nama panah). Pada frame ) nya beri gambar panah seperti
berikut.
• 5uat layer baru lagi di antara layer telur dan layer ulat, beri
nama panah*. Pada frame ) nya beri gambar panah seperti
berikut.
• 5uat layer baru lagi di antara layer ulat dan layer kepompong,
beri nama panah+. Pada frame ) nya beri gambar panah seperti
berikut.
• 5uat layer baru lagi di atas layer kepompong, beri nama panah .
Pada frame ) nya beri gambar panah seperti berikut.
• #emudian atur agar semua gambar posisisnya sebagai berikut.33
8/16/2019 Diktat Flash
34/48
• Pastikan posisi urutan layer seperti pada gambar.
2/ Mengatur Gerakan Animasi
• %eser frame ) pada layer kupu-kupu ke frame .
• %eser frame ) pada layer panah) ke frame )7, dan pada frame *7 lakukan insertkeyframe.
• #emudian buat layer baru di atas layer panah), beri nama penutup).
• Pada frame )7 insert blank keyframe.
34
8/16/2019 Diktat Flash
35/48
• #lik mouse pada frame )7 layer penutup), dengan menggunakan re1tang#e too#
1 2, buat sebuah kotak di stage dengan ukuran menutupi gambar panah).Barna terserah Anda.
• #lik mouse dua kali pada gambar kotak, kemudian pilih Modi(& 9 2on4ert to s&mbo# .
• Pada jendela dialog yang muncul, atur sebagai berikut.
• Pilih O$ .
• #lik mouse pada frame *7 layer penutup), insert keyframe.• #lik mouse di frame )7 pada layer penutup).
35
8/16/2019 Diktat Flash
36/48
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kiri ba3ah gambar.
• Atur besarnya gambar kotak seperti pada gambar berikut.
• #lik mouse pada frame *7 layer penutup).
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kiri ba3ah gambar.• #lik mouse pada frame )7 layer penutup), tekan tombol shift, klik mouse pada frame
*7 layer penutup), lepas tombol shift.
• Pilih -nsert 9 ime#ine 9 2reate Motion :een .• #lik kanan mouse pada kotak kecil di layer penutup), pilih Mask/
36
8/16/2019 Diktat Flash
37/48
!aka posisi pada layer akan berubah seperti berikut.
Apabila animasi dijalankan, maka panah) akan muncul secara perlahan.
Setelah animasi panah) berhasil, selanjutnya menganimasikan munculnya gambar
telur secara dissolve.
• %eser frame ) pada layer telur ke frame *). #emudian #lik mouse pada gambar telur,
pilih Modi(& 9 2on4ert to "&mbo# 1atau tekan tombol F 2. Pada jendela dialog yang
muncul atur sebagai berikut.
• Pilih O$ .• #lik kanan mouse di frame * pada layer telur, pilih insert ke&(rame .
• #lik mouse di frame *) pada layer telur.•
#lik pada gambar telur di stage. Pada jendela properties pilih 1o#or pada posisiA#p!a dengan ? /
37
8/16/2019 Diktat Flash
38/48
• #lik mouse di frame *) pada layer telur, tekan tombol shift, klik mouse di frame
* pada layer telur, lepas tombol shift.• Pilih -nsert 9 ime#ine 9 2reate Motion :een .
Apabila animasi dijalankan, maka akan muncul gambar kupu-kupu, garis panah,
dan gambar telur secara disslove.
Selanjutnya Anda dapat menganimasikan panah*.• %eser frame ) pada layer panah* ke frame * , dan pada frame + lakukan insert
ke&(rame .
• #emudian buat layer baru di atas layer panah*, beri nama penutup*.• Pada frame * insert blank keyframe.
• Dari jendela =ibrary, pilih tutup), klik dan geser hingga menutupi gambar panah*
pada stage.
• #lik mouse di frame + pada layer penutup*, #lik kanan mouse 9 -nsert $e&(rame .
• #lik mouse di frame * pada layer penutup*.
38
8/16/2019 Diktat Flash
39/48
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kiri atas gambar.
• Atur besarnya gambar kotak seperti pada gambar berikut.
• #lik mouse di frame + pada layer penutup*.
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kiri atas gambar.• #lik mouse di frame * layer penutup*, tekan tombol shift, klik mouse pada frame
+ layer penutup*, lepas tombol shift.• Pilih -nsert 9 ime#ine 9 2reate Motion :een .
Animasi panah* sudah selesai, selanjutnya membuat animasi munculnya ulat.
• %eser frame ) pada layer ulat ke frame + . #emudian #lik mouse pada gambar ulat,
pilih Modi(& 9 2on4ert to "&mbo# 1atau tekan tombol F 2. Pada jendela dialog yang
muncul atur sebagai berikut.
• Pilih O$ .
• #lik kanan mouse di frame 7 pada layer ulat, pilih insert ke&(rame .
• #lik mouse di frame + pada layer ulat.• #lik pada gambar ulat di stage. Pada jendela properties pilih 1o#or pada posisi A#p!a
39
8/16/2019 Diktat Flash
40/48
8/16/2019 Diktat Flash
41/48
• #lik mouse di frame ) pada layer penutup+.
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kanan atas gambar.
• Atur besarnya gambar kotak seperti pada gambar berikut.
• #lik mouse di frame 7 pada layer penutup+.
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak, geser lingkaran
putih kecil yang di tengah gambar ke pojok kanan atas gambar.
• #lik mouse di frame ) layer penutup+, tekan tombol shift, klik mouse pada frame
7 layer penutup+, lepas tombol shift.• Pilih -nsert 9 ime#ine 9 2reate Motion :een .
Animasi panah+ sudah selesai, selanjutnya membuat animasi munculnya kepompong.
•
%eser frame ) pada kepompong ulat ke frame ). #emudian #lik mouse padagambar kepompong, pilih Modi(& 9 2on4ert to "&mbo# 1atau tekan tombol F 2.
Pada jendela dialog yang muncul atur sebagai berikut.
• Pilih O$ .• #lik kanan mouse di frame pada layer kepompong, pilih insert ke&(rame .
41
8/16/2019 Diktat Flash
42/48
8/16/2019 Diktat Flash
43/48
• #lik mouse di frame pada layer penutup , #lik kanan mouse 9 -nsert $e&(rame .
• #lik mouse di frame pada layer penutup .
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar
kotak, geser lingkaran putih kecil yang di tengah gambar ke pojok
kanan ba3ah gambar.
• Atur besarnya gambar kotak seperti pada gambar berikut.
• #lik mouse di frame pada layer penutup .
• Pilih *ree rans(orm oo# % ', #lik mouse pada gambar kotak,
geser lingkaran putih kecil yang di tengah gambar ke pojok kanan
ba3ah gambar.• #lik mouse di frame layer penutup , tekan tombol shift, klik
mouse pada frame layer penutup , lepas tombol shift.• Pilih -nsert 9 ime#ine 9 2reate Motion :een .• Selanjutnya, #lik mouse di frame /7 pada layer kupu-kupu, tekan tombol shift, tahan,
klik mouse frame /7 pada layer penutup . #lik kanan mouse pilih -nsert *rame .
!aka pada layar monitor akan menjadi seperti gambar berikut.
43
8/16/2019 Diktat Flash
44/48
• 0oba jalankan animasi dengan menekan tombol 2tr# dan Enter secara bersamaan.
• Simpan file dengan nama #upu-kupu.
Selesai sudah animasi siklus hidup kupu-kupu.
$egiatan Be#ajar 944
8/16/2019 Diktat Flash
45/48
MEMPUBL-"H DAN MENGE$"PO *-LE
U.UAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat"
• mempublish file flash ke berbagai format lain.• mengekspor image dan movie file flash ke format lain.
U A-AN MA E -
Flash mempunyai kemampuan untuk mengekspor6mempublish file ke format lain, dengan
tujuan agar hasilnya dapat dijalankan tanpa tergantung soft3are flash atau dapat
diintegrasikan dengan soft3are lain.
A/ Mempub#is! (i#e
• 5uka file yang akan di publish 1sebagai contoh file kupu-kupu2.• Pilih *i#e 9 Pub#is! "ettings
Pada jendela dialog yang muncul pilih" Flash 1.s3f2 apabila ingin mempublish
file yang berjalan dengan
menggunakan flash player. File ini
dapat digunakan untuk diupload ke
internet. C'!= 1.html2 apabila ingin
mempublish file dalam bentuk html.
File ini dapat digunakan untuk
diupload ke internet. %if &mage 1.gif2 apabila ingin
mempublish file dalam bentuk animasi
gif. File ini dapat digunakan untuk
diupload ke internet.
8/16/2019 Diktat Flash
46/48
P(%1.png2 apabila ingin mempublish file dalam bentuk image6gambar dengan format
P(%. File ini dapat digunakan untuk diupload ke internet. Bindo3s Projector 1.e e2 apabila ingin mempublish file yang dapat berjalan sendiri
1standalone2.
!acintosh Projector apabila ingin mempublish file yang dapat berjalan sendiri1standalone2 di komputer !acintosh.
Euick'ime 1.mov2 apabila ingin mempublish file dalam bentuk movie yang berjalan
dengan menggunakan Euick'ime player.
Setelah memilih format file 1untuk latihan ini pilih Flash 1.s3f2 2, selanjutnya
menentukan nama dan lokasi penyimpanannya.
• Pilih &kon yang terdapat di samping tipe format file yang dipilih.
Pada jendela dialog yang muncul isikan nama file pada kolom *i#e name . 4ntuk
lokasi penyimpanan, pilih Bro:se *o#ders , kemudian tentukan direktori foldernya.
• Pilih "a4e .• Pilih Pub#is!
• Pilih O$
B/ Mengekspor *i#e
Selain menggunakan fasilitas publish, flash juga menyediakan fungsi e
8/16/2019 Diktat Flash
47/48
• Pilih "a4e .
4ntuk menggunakan fungsi e port movie"• Pilih *i#e 9 E
8/16/2019 Diktat Flash
48/48