Direktorat Pembinaan SMK 2008
279
2. Insert blank Aligment pada
frame akhir animasi, misal 20 dengan mengklik kanan frame
tersebut dan memilih menu insert blank Aligment.
3. Buat pada frame 20 tersebut
sebuah gambar yang berbeda bentuk maupun warnanya dengan
gambar pada frame 1, misal persegi empat
Gambar 6-82 Objek kotak
4. Sekarang
kita sudah
mempunyai dua buah Aligment dan didalamnya terdapat dua obyek
yang berbeda, selanjutnya akan kita gerakkan diantara keduanya
dengan menggunakan tweening shape.letakkan
penunjuk frame
pada frame 1 kemudian pilih menu windowpanelframe dan pilih
option tweening shape.
Gambar 6-83 Gambar frame terseleksi
6.19.1 Tulisan berubah menjadi tulisan lain
Untuk membuat
tulisan yang
berubah menjadi tulisan yang lain caranya hampir sama dengan
contoh diatas
tetapi dengan
menambahkan fungsi break apart. 1.
Buat file baru dan buat tulisan didalamnya. Blok tulisan
tersebut kemudian pilih menu modifybreak apart
Gambar 6-83 Teks dengan tulisan ‘belajar’
2. Insert blank Aligment di
frame 20 dan buat tulisan yang lain. Kemudian
pilih menu
modifybreak apart. Sebaiknya tulisan yang dibuat pada frame 20
mempunyai lebar dan tinggi yang tidak berbeda jauh dengan tulisan
pada frame 1.
3. Letakkan penunjuk frame
pada frame 1 dan kita perintahkan tweening shape.
Gambar 6-84 Animasi perubahan teks
proses perubahan tulisan
secara perlahan
6.19.2 Gambar tampak menghilang
Contoh berikut ini adalah
membuat gambar yang menghilang secara perlahan lahan dengan
menggunakan fasilitas alpha yang ada dalam panel effect.
Direktorat Pembinaan SMK 2008
280
1. Buat file baru kemudian dan
sebuah obyek didalamnya, misal lingkaran
Gambar 6-85 Gambar objek lingkaran
2. Ubah
obyek tersebut
menjadi symbol
dengan cara
memblok obyek dan pilih menu insertconvert to symbol. Pilih
option grafik atau Movieclip
3. Kopi gambar yang ada pada
frame 1 ke dalam frame 20 dengan cara klik kanan frame 20 dan pilih
menu insert Aligment.
Gambar-86 Objek yang terseleksi
4. Sekarang gambar yang ada
pada frame 20 kita hilangkan dengan menggunakan effect alpha.
Klik terlebih dahulu obyeknya kemudian pilih panel properties.
Pada panel properties tersebut pilih option alpha dan isikan Setting
transparansinya
menjadi sehingga
gambar menjadi
menghilang, 5.
kembalikan penunjuk frame ke frame 1 dan kita gerakkan
gambar dengan
menggunakan tweening motion pada panel frame.
Gambar-87 Objek yang diberi animasi
6.19.3 Tulisan berputar
Kita akan membuat tulisan yang tampak berputar dengan sumbu
garis vertikal
dengan menggunakan fungsi scale.
1. Buat file baru dan buat
sebuah tulisan didalamnya.
Gambar 6-88 Teks dengan tulisan ‘belajar’
2. insert Aligment pada frame
dua puluh
Gambar-89 Objek yang terseleksi
3. kurangi lebar dari tulisan
yang ada pada frame 20 sehingga hampir
menyatu membentuk
sebuah garis
dengan menggunakan scale. Caranya klik
kanan tulisan tersebut dan pilih menu scale. Usahakan tulisan yang
diperkecil tersebut
letaknya ditengah dari tulisan sebelumnya.
Gambar-90 Objek teks diperkecil
4. kembali keframe 1 dan
berikan tweening motion 5.
selanjutnya kita buat tulisan kembali membesar dengan bentuk
yang terbalik. Insert Aligment pada
Direktorat Pembinaan SMK 2008
281
frame 21, sehingga gambar yang ada pada frame 20 terkopi ke frame
21
6. insert Aligment lagi pada
frame 40.
Gambar-91 Frame yang terseleksi
7. sekarang kita ubah tulisan
yang ada pada frame 40. klik kanan tulisan dan pilih menu scale.
8. geser sisi sebelah kiri ke
arah kanan, dan sisi sebelah kanan ke arah kiri sehingga menghasilkan
tulisan yang terbalik.
Gambar-92 Teks yang dirubah posisinya
usahakan lebar dari tulisan
yang terbalik
tersebut sama
dengan tulisan
yang dibuat
pertama kali dan terletak pada tempat yang sama
9. kembali ke frame 21 dan
gerakkan dengan menggunakan tweening motion
Gambar-93 Frame yang terseleksi
10. animasi diatas sudah bisa
dicoba, tetapi
masih belum
sempurna. Tulisan berputar hanya 180
sehingga masih
perlu dilanjutkan ke frame berikutnya
agar tulisan tampak berputar 360 penuh dengan cara yang hampir
sama seperti contoh diatas.
6.20 Animasi Frame By Frame Konsep animasi frame by frame
Jika kita bicara tentang dunia nyata,
maka setiap
gerakan tergantung
dengan lingkungan.
Contohnya pelari tidak akan berlari dengan kecapatan konstan. Untuk
membuat animasi yang efektif kita harus memperhatikan aspek nyata
tersebut.
Kita bisa
membuat animasi yang bergerak secara
konstan namun hal itu tidak akan menghasilkan
gambar yang
menunjukkan keadaan sebenarnya. Penggunaan animasi sederhana
seperti yang telah diajarkan pada bab
sebelumnya tidak
bisa digunakan untuk membuat animasi
yang mempunyai gerakan alamiah. Untuk mengatasi hal tersebut maka
dapat kita gunakan animasi frame by frame, karena dengan animasi
tersebut kita
bisa membuat
gerakan sesuai dengan keinginan kita.
Kerugian dalam
pembuatan animasi frame by frame adalah kita
harus mengisikan gambar satu persatu pada tiap tiap frame
sehingga membutuhkan
waktu yang lama. Untuk 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. Jadi dalam keseluruhan sebuah
animasi merupakan
gabungan dari animasi frame by
Direktorat Pembinaan SMK 2008
282
frame, tweening
motion, dan
tweening shape. Tidak seperti animasi tweening,
animasi frame
demi frame
meletakkan satu key frame pada setiap
framenya dan
tidak menggunakan in-Between frame.
Untuk membuatnya kita harus memasukkan
satu persatu
Aligment pada setiap frame.
Gambar 6-94 Tiap-tiap frame terdapat Aligment
Kita bisa memasukkan Aligment secara berurutan dari frame yang
pertama, kedua, dan seterusnya. Caranya
seperti yang
telah dijelaskan
sebelumnya yaitu
dengan mengklik
kanan dan
memilih menu insert Aligment, atau insert blank key frame sesuai
dengan keperluan.
Sekarang kita
akan belajar
membuat animasi frame by frame melalui sebuah contoh sederhana
yaitu animasi sebuah bola yang memantul pada lantai. kita buat
layer pertama berisi instance dari simbol yang bernama Floor. Kita
perlu meletakkan lantai dimana bola kita akan memantul. Lantai
kita tidak akan bergerak sehingga kita
hanya perlu
menyimpan informasi tentang instance Floor
dalam beberapa frame, misal 20 frame. Untuk melakukannya buat
sebuah gambar lantai pada frame 1 dan kita kopi gambar yang ada
pada frame 1 tersebut ke dalam frame 2 hingga 20. Caranya
dengan mengklik kanan frame 10 dan pilih menu insert frame.
Gambar 6-95 Tiap-tiap frame terdapat Aligment
Perbedaan antara insert frame dengan insert key frame adalah
dengan insert frame kita hanya mengkopi gambar yang ada pada
Aligment kedalam frame berikutnya sesuai dengan jumlah yang kita
inginkan dan diakhir dari frame tersebut kita tidak membuat sebuah
Aligment
baru. Dengan
menggunakan insert frame maka Aligment hanya ada pada frame 1,
sehingga jika kita mengedit gambar yang ada pada frame 1 maka
gambar yang ada pada frame lainnya juga ikut berubah.
Gambar 6-96 Tiap-tiap frame terdapat Aligment
Kita sekarang memerlukan layer baru untuk membuat ball dan
menganimasikannya. Kita
buat layer baru kemudian kita ubah
namanya menjadi “ball”. Dan secara
otomatis layer
kedua tersebut sudah memiliki 20 frame
namun dengan key frame yang masih kosong karena menduplikasi
layer sebelumnya.
Direktorat Pembinaan SMK 2008
283
Gambar 6-97 Frame terdapat Aligment
Kita perlu membuat gambar bola ke dalam stage untuk mengisi key
frame dari layer “ball” pada frame
1.
Gambar 6-98 Objek dengan light diam
Selanjutnya insert key frame pada frame
2 sehingga
mengkopi gambar yang ada pada frame 1
kedalam frame 2. kita geser gambar bola yang ada pada frame
2 tersebut sedikit ke bawah.
Gambar 6-99 Objek dengan light bergerak
Insert key frame dilanjutkan terus hingga seluruh frame terisi semua
dan kita mengkopi gambar bola kedalam tiap tiap frame dan kita
gerakkan
bola tersebut
satu persatu dan kita buat agar bola
tampak memantul.
6.20.1 Menggunakan Onion Skinning
Dalam pembuatan animasi frame by frame kita bisa menggunakan
fasilitas onion skinning. Dengan onion skinning kita bisa melihat
keadaan
dari key
frame sebelumnya atau sesudahnya dari
satu frame
tertentu. Untuk
mengaktifkan fungsi onion skinning, klik salah satu tombol onion
skinning yaitu Onion skinning button
atau Onion skinning outLine button
yang terletak pada bagian bawah TimeLine.
Perbedaan antara onion skinning dan onion skinning outLine adalah
pada onion
skinning outLine
keadaan key frame sebelumnya muncul dalam bentuk garis luar
outLine.
Gambar 6-100 Gambar seleksi onion skinning
pada frame Kita juga bisa mengatur jangkauan
frame yang akan ditampilkan dalam onion skinning dengan menggeser
pengatur tanda dari onion skinning. Atur sehingga
onion skinning
mencakup 20 frame yang kita buat.
Gambar 6-101 Frame 1-20
Direktorat Pembinaan SMK 2008
284
Gambar 6-102 Objek yang bergerak memantul
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.
Contoh diatas adalah contoh yang paling
sederhana dalam
pembuatan animasi
frame by
frame. Sebenarnya
pembuatan animasi tersebut tidak sesederhana
seperti yang dicontohkan karena umumnya gerakan gerakan yang
digunakan sangat
kompleks contohnya
seperti dalam
pembuatan film kartun.
6.21 Contoh Aplikasi. 1. Pentingnya Manajemen Layer
Jika Anda membuat animasi yang sangat kompleks maka diperlukan
manajemen Layer yang cukup baik agar
animasi yang
sedang dirancang mudah dikendalikan dan
tidak menjadi berantakan. Dalam hal ini Anda dapat menggunakan
Folder Layer
untuk mengelompokkan Layer-layer yang
ingin dijadikan satu kelompok kategori.
Untuk memulai projek ini buat lima buah Folder-folder Layer dengan
nama “Kelinci
Betina”,“Kelinci Jantan”,“Senjata KJ”, Senjata KB”,
dan “Darah”.
Folder Layer: Buat lima buah Folder Layer dalam panel Timeline
dengan nama
masing-masing Folder Layer yaitu: “Kelinci Jantan:,
“Kelinci Betina”,“Senjata
KJ”, “Senjata KB”, dan “ “Darah”.
2. Mengisi Folder Layer Layer
“Kelinci Jantan”
Dalam Folder Layer Kelinci Jantan buat dua buah Layer dengan nama
Layer “Kepala KJ” dan “Badan KJ”,
Direktorat Pembinaan SMK 2008
285
kemudian buat dua buah Sub Folder yang diberi nama “Bagian
Kanan KJ ” dan “Bagian Kiri KJ”.
Dalam Sub Folder Bagian Kanan KJ buat dua buah layer di
dalamnya dengan nama “Kaki
kanan depan”,dan “Kaki kanan belakang”.
Sedangkan Sub Folder Bagian Kiri KJ buat dua buah layer di
dalamnya dengan nama “Kaki kiri
depan”,dan “Kaki kiri belakang”.
Kelinci Jantan: Mengisi Folder Layer dan membuat Layer anggota
tubuh Kelinci Jantan. 3. Mengisi Folder Layer Layer
“Kelinci Betina”
Dalam Folder Layer Kelinci Betina buat dua buah Layer dengan nama
Layer “Kepala KB” dan “Badan KB”, kemudian buat dua buah Sub
Folder yang diberi nama“Bagian Kanan KB
” dan “Bagian Kiri KB”.
Dalam Sub Folder Bagian Kanan KB buat dua buah layer di
dalamnya dengan nama “Kaki
kanan depan”,dan “Kaki kanan belakang”.
Sedangkan dalam Sub Folder
Bagian Kiri KB buat dua buah layer di dalamnya
dengan nama “Kaki kiri depan”,dan
“Kaki kiri belakang”.
Kelinci Betina: Mengisi Folder Layer dan membuat Layer anggota
tubuh Kelinci Betina . 4. Karakter Kelinci Jantan dan
Betina
Gunakan Oval Tool O untuk membuat karakter Kelinci Betina
dan karakter Kelinci Jantan. Buat masing-masing bagian tubuh pada
Frame pertama setiap Layer yang berbeda.
Pertama-tama buat
sebuah lingkaran untuk bagian kepala
Kelinci Jantan pada Frame ini: pertama Layer Kepala KJ dan
Layer Badan KJ. Dalam Sub Folder Bagian Kanan
KJ buat dua buah elips untuk membentuk bagian-bagian tubuh
menjadi satu kesatuan padalayer.
Direktorat Pembinaan SMK 2008
286
“Kaki kanan depan”,dan “Kaki kanan belakang”.
Sedangkan dalam Sub Folder Bagian Kiri Kelinci Jantan buat
dua buah elips untuk membentuk bagian-bagian tubuh menjadi satu
kesatuan pada layer di dalamnya dengan nama
“Kaki kiri depan”,dan “Kaki kiri belakang”.
Untuk karakter
Kelinci Betina lakukan dengan cara-cara yang
mirip dengan membuat karakter Kelinci Jantan namun semua objek
bagian-bagian tubuh Kelinci Betina harus diletakkan pada Folder Layer
Kelinci Betina. Komposisikan bagian-bagian tubuh
tersebut di dalam Stage pada posisi Frame 1setiap Layer seperti
gambar berikut:
Karakter kelinci1 dan kelinci2: Posisi
bagian-bagian tubuh
masing-masing karakter
pada Frame
5. Animasi Tween pada Frame 1-
Frame 9
Buat animasi Tween pada panel Timeline
dari masing-masing
karakter pada posisi Layout yang ada
di Stage
dalam Frame
pertama, kemudian pada Frame 9 adakan
perubahan-perubahan seperti gambar di bawah
Layout yang ada di Stage dalam Frame pertama, kemudian pada
Frame
9
adakan perubahan-
perubahan seperti
gambar di
bawah Frame 1 - Frame 9: Membuat
animasi Tween pada karakter Neo pada Frame 1 - Frame 9.
dari masing-masing karakter pada posis Layout yang ada di Stage
dalam Frame pertama. Lanjutkan pembuat animasi tween
pada panel Timeline dari masing- masing karakter secara menerus
dari
Frame 9
dengan menambahkan titik-titik Keyframe
pada masing-masing Layer pada Frame 21. Adakan perubahan-
perubahan seperti
gambar di
bawah ini:
Direktorat Pembinaan SMK 2008
287
bahan-perubahan seperti gambar
ma, kemudian pada Frame 9 adakan
perubahan-perubahan seperti gambar di bawah
Frame 21: Posisi objek karakter Neo terhadap karakter Smith pada
Frame 21. 6. Animasi Tween pada Frame
25
Masih dalam lanjutan pebuatan animasi Tween pada Frame 25,
tambahkan Keyframe pada masing- masing Layer. Buat sebuah objek
kacamata dan kenakan pada objek karakter Kelinci Betina. Adakan
perubahan-perubahan
objek lainnya seperti gambar di bawah
ini:
Animasi Tween pada Frame 21: Posisi objek karakter Neo dan
Smith pada Frame 21.
7. Animasi Tween pada Frame 33
Insert Keyframe pada masing- masing Layer
pada Frame 33. Gerakkan kaki karakter Kelinci Betina seakan-
akan sedang menendang karakter Kelinci Jantan. Ubah skala objek
karakter Kelinci Jantan hingga keluar bidang Stage seperti gambar
di bawah ini:
Frame 33: Posisi objek karakter Kelinci Betina menendang karakter
Kelinci Jantan. 8. Animasi Tween pada Frame
Lainnya
Untuk mempermudah pembuatan animasi
Tween ini
sampai selesai,
tambahkan beberapa titik Keyframe dan lakukan beberapa perubahan
pada bagian-bagian objek karakter yang berkaitan sesuai dengan
keterangan gambar.
Direktorat Pembinaan SMK 2008
288
Animasi Tween pada Frame 40: Memperbesar skala objek karakter
Kelinci Jantan lebih besar lagi hingga keluar bidang Stage.
Animasi Tween pada Frame 45, 49, 54, 58, 59: Gerakan karakter
Kelinci Betina dalam Stage pada beberapa titik Keyframe.
Animasi Tween pada Frame 62 dan 67:Karakter Kelinci Betina sedang
menggenggam pistol.
Animasi Tween pada Frame 72:
Direktorat Pembinaan SMK 2008
289
Buat gerakan karakter Kelinci Betina di dalam Stage yang sedang
bersiap-siap untuk
berlari. Sedangkan karakter Kelinci Jantan
baru dimunculkan kembali pada frame ini dan letakkan posisi
karakter tersebut di bagian kiri luar Stage.
Animasi Tween pada Frame 73: Gerakan karakter Kelinci Betina
dan
karakter Kelinci
Jantan mengambil ancang-ancang untuk
saling berlari dan menodongkan pistol antara satu dengan yang
lainnya. Animasi Tween pada Frame 75:
Buat gerakan karakter Kelinci Betina dan karakter Kelinci Jantan
saling berlari selangkah ke depan. Sedangkan gerakan tangan kedua
karakter
yang sedang
menggenggam pistol juga harus digerakkan
supaya animasi
nampak lebih hidup. Animasi Tween pada Frame 77:
Gerakan karakter Kelinci Betina dan karakter Kelinci Jantan yang
saling berlari semakin didekatkan. Sedangkan gerakan tangan kedua
karakter
yang sedang
menggenggam pistol
tersebut kembali di posisi saling menodong.
Animasi Tween pada Frame 81: Buat gerakan karakter Kelinci
Betina dan karakter Kelinci Jantan yang saling berlari dan sambil
sedikit meloncat ke atas. Sedangkan gerakan tangan kedua
karakter tersebut diatur seperti orang yang sedang bersiap-siap
untuk melompat. Animasi Tween pada Frame 83:
Gerakan karakter Kelinci Betina dan
karakter Kelinci
Jantan meloncat ke atas sedikit lebih tinggi
lagi. Sedangkan gerakan tangan kedua karakter diposisikan untuk
saling menodongkan pistol lebih dekat.
Animasi Tween pada Frame 86: Buat gerakan karakter Kelinci
Betina dan karakter Kelinci Jantan sekarang melayang di udara. Kini
gerakan tangan kedua karakter diposisikan untuk saling menembak
dan objek-objek butiran peluru sudah dikeluarkan dibuat juga
animasi Tween-nya. Animasi Tween pada Frame 104:
Animasi beberapa butiran peluru melesat melalui ke dua karakter.
Sedangkan bagian-bagian tubuh kedua karakter tetap digerakkan
melayang dan sedikit perlahan saling maju ke depan.
Direktorat Pembinaan SMK 2008
290
Animasi Tween pada Frame 108: Buat
gerakan kepala karakter Kelinci Betina dan karakterKelinci Jantan
saling bertabrakan melayang di udara. Sedangkan gerakan tangan
kedua karakter tersebut diposisikan seperti saling memukul.
Animasi Tween pada Frame 113: Buat gerakan kedua tubuh karakter
yang melayang di udara jatuh dari atas ke bawah. Angkat sedikit
kedua
pasang kaki
karakter tersebut untuk memberikan efek
gravitasi. Animasi Tween pada Frame 115:
Kini buat kedua tubuh karakter yang terjatuh tersebut tergeletak di
atas
tanah. Luruskan
kedua pasang
kaki karakter
sejajar dengan tubuh mereka.
Animasi Tween pada Frame 117: Untuk membuat efek pantulan
benda jatuh maka gerakan sedikit ke atas bagian-bagian kedua tubuh
karakter tersebut. Animasi Tween pada Frame 120:
Buat gerakan tubuh membungkuk yang sedang ingin bangkit berdiri
pada
karakter Kelinci
Betina. Sedangkan untuk karakter Kelinci
Jantan gerakan sedikit kepala dan lengannya.
Animasi Tween pada Frame 129: Pada karakter Kelinci Betina buat
gerakan tubuh yang sedang ingin bangkit berdiri kini telah berdiri
sempurna.
Sedangkan untuk
karakter Kelinci Jantan hanya gerakan sedikit lengannya.
Animasi Tween pada Frame 135: Pada karakter Kelinci Betina buat
gerakan ayunan kaki dan lengan
Direktorat Pembinaan SMK 2008
291
yang sedang
hendak berancangancang
untuk menendang.
Sedangkan untuk
karakter Kelinci Jantan hanya gerakan sedikit lengannya.
Animasi Tween
pada Frame
137:Kini gerakan bagian kaki Karakter Kelinci Betina berada
pada posisi di tengah yang hendak menendang
karakter Kelinci
Jantan. Dalam hal ini tendangan kaki
masih belum
mengenai karakter Kelinci Jantan.
9. Animasi Tween pada Frame
139 Pada Frame 139 buat animasi kaki
karakter Kelinci
Betina yang
sedang menendang, kini gerakan kaki tersebut tepat mengenai
kepala karakter Kelinci Jantan.
Animasi Tween pada Frame 139: Posisi kaki
karakter Neo tepat mengenai kepala
karakter Smith. 10. Animasi Tween pada Frame
144 Pada Frame 144 buat pergerakan
kelanjutan dari ayunan kaki yang sedang menendang tadi ke arah
depan. Untuk karakter Kelinci Jantan buat
animasi tubuh yang melayang terhempas tendangan
kaki karakter Kelinci Jantan. Pada Layer Darah tambahkan sedikit
animasi darah yang keluar dari kepala karakter Kelinci Jantan.
Animasi Tween pada Frame 144: Buat animasi gerakan karakter
Kelinci Jantan yang melayang terhempas
ditendang karakter
Kelinci Betina. 11. Animasi Tween pada Frame
147
Lanjutkan pembuatan
animasi karakter
Kelinci Jantan
yang melayang
terhempas terkena
tendangan karakter Kelinci Betina pada Frame 147 hingga keluar
area Stage.
Direktorat Pembinaan SMK 2008
292
Animasi Tween pada Frame 147: Tubuh karakter Smith melayang
terhempas kena
tendangan karakter Neo ke luar Stage.
Pada Frame 150 buat akhir cerita animasi ini dengan membuat tubuh
karakter Kelinci Jantan terjatuh turun akibat gravitasi. Sedangkan
untuk
karakter Kelinci
Betina posisikan
letak bagian
tubuh karakter tersebut dalam keadaan
berdiri tegak dan letakkan di sebelah kanan Stage. Semua
animasi harus berhenti pada Frame ini.
karakter Smith melayang terhem tendangan karakter Neo ke luar
Frame terakhir
dari semua
pembuatan animasi Tween.
Penggunaan Onion Skin: Untuk melihat beberapa
frame sekaligus
pergerakan animasi MotionTween yang dibuat,
Anda dapat menggunakan fasilitas Kulit Bawang Onion Skin.
12. Simpan Projek dan Ekspor Setelah mengetes animasi yang
telah dibuat, simpanlah pekerjaan yang telah Anda buat dalam format
.fla agar dapat dimodifikasi di kemudian hari, lalu ekspor animasi
tersebut ke dalam format akhir Flash Movie
Play Head: Untuk menelusuri atau melihat
pergerakan komponen animasi dari frame ke frame lainnya secara
perlahan, drag Playhead yang berada di panel Timeline ke
kiri atau ke kanan. Tes Seluruh Animasi:
Direktorat Pembinaan SMK 2008
293
Untuk mencoba apakah jalannya keseluruhan animasi yang telah
dibuat telah sesuai dengan yang dikehendaki, gunakan perintah Play
atau tekan tombol Enter. Anda juga dapat menggunakan perintah Test
Movie.
6.22 embuatan Tombol
Didalam flash diberikan fasilitas yang
sangat banyak
untuk pembuatan tombol sehingga kita
bisa membuat
tombol yang
interaktif yang berbeda dengan tombol tombol yang ada pada
umumnya. Tombol
bisa kita
gunakan untuk membuat link dari satu halaman ke halaman yang lain
atau juga digunakan untuk untuk fungsi fungsi yang lain yang bisa
membuat web kita menjadi lebih interaktif.
6.22.1 Mengubah obyek menjadi tombol
Agar suatu obyek bisa berubah menjadi tombol dan diberi fasilitas
fasilitas yang berhubungan dengan tombol maka obyek tersebut harus
diubah terlebih dahulu menjadi symbol button. Jika 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.
Untuk mengubah suatu obyek menjadi tombol maka blok terlebih
dahulu obyek yang akan dijadikan tombol
lalu pilih
menu
insertconvert to symbol dan pilih menu button. Setelah hal
tersebut dilakukan maka obyek tersebut sudah menjadi sebuah
symbol button dan obyek tersebut diberi fasilitas segala sesuatu yang
berhubungan
dengan tombol.
Tanda bahwa obyek tersebut telah dikonversi ke dalam symbol yaitu
muncul garis tepi persegi yang berwarna biru muda.
Gambar 6-102 Objek yang telah menjadi simbol
tombol
6.22.2 Memanipulasi tombol
Sekarang akan kita pelajari apa saja yang dapat kita lakukan
terhadap obyek yang telah diubah menjadi symbol button. Tombol
yang
interaktif biasanya
bisa berubah ubah sesuai dengan
kondisi dari mouse. Misal jika mouse berada diatas tombol maka
bentuk atau warna tombol berubah. Kemudian jika tombol diklik maka
warna atau bentuk akan berubah lagi ke yang lainnya.
Gambar 6-103
Direktorat Pembinaan SMK 2008
294
i Mouse di luar tombol ii Mouse di atas tombol iii Mouse menekan
tombol Kita bisa membuat hal seperti
diatas dengan sangat mudah
terhadap symbol button. Untuk membuatnya klik kanan tombol
yang akan dimanipulasi, kemudian pilih menu edit, jika kita sudah
memilih option edit maka obyek tombol yang kita klik tersebut akan
masuk
ke ruangan
tersendiri khusus untuk memanipulasi tombol
yang kita pilih tersebut. Didalam
edit stage
tersebut dibagian
TimeLine bentuknya
berubah menjadi seperti gambar di bawah.
Gambar 6-104 TimeLine tombol
Ditempat tersebut terdapat empat pilihan frame yaitu up, over,
down,hit.
Up : bentuk tombol pada
saat mouse berada di luar tombol
Over : bentuk tombol pada saat mouse berada diatas tombol
Down : bentuk tombol pada
saat mouse menekan tombol
Hit : untuk menentukan
luas area dari tombol Kita bisa memasukkan bentuk-
bentuk atau warna yang berbeda- beda terhadap setiap frame diatas.
Khusus untuk frame hit tidak akan muncul dalam hasilnya. Pada saat
mouse berada didaerah tombol maka pointer dari mouse yang
sebelumnya berbentuk panah akan berubah menjadi bentuk tangan. Ini
artinya bahwa kita bisa menekan tombol
tersebut dan
akan menjalankan
perintah tertentu.
Luas dan bentuk dari daerah tombol yaitu pada saat pointer
mouse berubah menjadi bentuk tangan ditentukan oleh bentuk dan
luas daerah yang diberikan pada frame hit. Luas area dari frame hit
bisa lebih luas atau lebih sempit dari area dari tombol tergantung
dari kebutuhan. Jika pada frame hit ini tidak diisi maka secara default
ukuran dari area tombol akan sama dengan ukuran tombol itu sendiri.
Agar lebih jelas akan kita lakukan praktek
membuat tombol
sederhana dan
memanipulasi bagian up, over, down, dan hit.
Pertama buat halaman yang baru dan buat obyek didalamnya, misal
lingkaran. Lingkaran tersebut akan kita gunakan sebagai tombol, untuk
itu lingkaran diblok lalu pilih menu insertconvert to symbol dan
pilih kedalam symbol button.
Gambar 6-104 Objek bulat
Selanjutnya akan kita manipulasi tombol tersebut dengan mengklik
kanan dan pilih menu edit dibagian time Line akan muncul Aligment
pada bagian up dan frame yang lain masih kosong itu artinya
adalah obyek yang kita buat pertama kali sebagai tombol secara
default akan menjadi bagian up yaitu keadaan tombol pada saat
mouse berada diluar area tombol. Kita bisa juga mengganti bentuk
atau warna tombol pada bagian up.