MENGENAL MACROMEDIAFLASH
Bab 1. Pengenalan
dan Instalasi Macromedia Flash 8
1.1 Mengenal
Macromedia Flash 8
Macromedia
Flash merupakan aplikasi
yang digunakan untuk melakukan desain
dan membangun perangkat
presentasi, publikasi, atau
aplikasi lainnya yang membutuhkan ketersediaan sarana interaksi dengan penggunanya. Proyek yang
dibangun dengan Flash bisa terdiri
atas teks, gambar,
animasi sederhana, video, atau efek-efek khusus lainnya.
Aplikasi ini diproduksi oleh Macromedia Corporation,
sebuah perusahaan pengembang perangkat
lunak dalam bidang
animasi, pengembangan sistem web
dan multimedia. Flash dikembangkan sejak
tahun 1996, dan pada walnya hanyalah merupakan program animasi sederhana GIF
Animation, tetapi sekarang sudah berkembang menjadi apkilasi raksasa yang
digunakan oleh hampir semua
orang yang menekuni
bidang desain dan
animasi berbasis komputer.
Sampai
saat ini, Macromedia
Flah telah dikembangkan
dalam beberapa versi. Setelah
sampai pada versi
Flash 6, muncul teknologi Flash 7 yang dikenal dengan
nama Macromedia MX dan yang terakhir sampai saat penulisan buku ini adalah
Flash versi 8 atau dikenal dengan Macromedia Flash Professional 8.
Macromedia
Flash merupakan aplikasi interaktif
dengan berbagai kelebihan. Beberapa
faktor yang mendukung
kepopuleran Flash sebagai sebuah
aplikasi untuk keperluan
desain dan animasi antara lain adalah memiliki format
grafis berbasis vektor, kapasitas file hasil yang kecil, memiliki
kemampuan tinggi dalam mengatur interaktivitas
program, memiliki kelengkapan fasilitas dalam melakukan desain, dan sebagainya.
1.2 Apa yang Dapat
Dibuat dengan Flash?
Dengan
aplikasi Macromedia Flash, Anda bisa membuat berbagai jenis aplikasi seperti:
– Animasi. Aplikasi yang menggunakan animasi
tersebut misalnya banner, kartu
ucapan online, kartun,
iklan, dan sebagainya. Macromedia
Flash menyediakan berbagai
elemen animasi yang cukup
lengkap.
– Games. Beberapa game, terutama yang berbasis
dua dimensi banyak yang dibangun
dengan aplikasi ini. Game
menggabungkan kemampuan animasi
pada flash dengan
bahasa skripting yang dimilikinya yang dikenal dengan ActionScript.
– User
Interface. Aplikasi user
interface yang biasa dibangun menggunakan Macromedia Flash adalah aplikasi-aplikasi berbasis web.
Interface tersebut biasanya
dilengkapi dengan kotak-kotak
navigasi sederhana sampai pada antarmuka yang lain yang lebih kompleks
– Aplikasi
FMA (Flexible Messaging Area).
FMA merupakan area pada
web page yang dirancang untuk
menampilkan pesan tertentu yang
bisa berubah setiap
waktu. Sebagai contoh, FMA pada
website restaurant, mungkin akan menampilkan menu spesial
harian yang bisa
berubah dari waktu
ke waktu.
– Reach
Internet Application (RIA).
RIA merupakan aplikasi internet yang
membutuhkan tingkat manipulasi
dan transfer data yang tinggi.
Beberapa aplikasi RIA yang didukung Macromedia Flash antara lain katalog
belanja, test online, kalender, inventory online, sistem informasi akademik,
dan sebagainya.
1.3 Fitur Macromedia
Flash 8
Secara umum,
penggunaan Macromedia Flash
menyediakan berbagai kemudahan dalam
pembuatan desain perangkat
publikasi. Beberapa
kelebihan yang dimiliki
aplikasi ini adalah
dalam hal produktivitas, ketersediaan
media pendukung, dan kemampuan improvisasi.
1. Meningkatkan
Produktivitas.
Beberapa fitur yang mendukung produktivitas pada aplikasi
ini
antara lain:
– Timeline effects. Anda dapat menerapkan
timeline effects pada semua objek dengan cepat, baik untuk penggunaan
transisi maupun animasi
seperti fade-ins, fly-ins,
blurs, dan spins.
– Behaviors. Dengan behaviors, Anda dapat
menambahkan interaktivitas ke dalam setiap isi Flash, tanpa harus menuliskan
baris-baris kode (skrip). Sebagai contoh, Anda bisa menggunakan behavior untuk melakukan
link website, loading sound dan
grafik, kontrol playback video, playing movie, dan sebagainya.
– Mendukung
Aksesibilitas. Dukungan
aksesibilitas yang disediakan,
misalnya dengan adanya keyboard
shortcuts untuk melakukan
navigasi, kontrol interface,
serta beberapa pekerjaan
dengan elemen interface
tanpa menggunakan mouse.
– Template
yang selalu Updated. Flash menyediakan templates yang selalu updated
untuk membuat presentasi, aplikasi
e-learning, advertising, aplikasi
mobile device, dan lain
sebagainya.
– Integrated Help system. Macromedia Flash
menyediakan panel bantuan yang
terintegrasi dengan referensi context, ActionScript, dan
teknik-teknik belajar di
lingkungan Flash.
– Spell checker. Macromedia Flash juga
menyediakan fasilitas spell checker
seperti yang dimiliki
beberapa aplikasi pengolah kata
untuk mencari teks-teks
yang memiliki kesalahan dalam
spelling bahasanya.
– Find
and Replace. Fasilitas Find
and Replace digunakan untuk mencari dan atau mengganti text,
jenis huruf, warna, symbol, file
suara, file video, atau file bitmap lainnya.
2. Support Media Presentasi lainnya.
Macromedia Flash
menyediakan media-media yang
mendu-
kung
kualitas presentasi seperti:
– High-fidelity import. Dengan high-fidelity import, Macromedia
Flash dapat melakukan
impor file dari
aplikasi-aplikasi lain seperti Adobe PDF dan Adobe Illustrator yang
menyediakan representasi gambar-gambar representasi vector yang cukup
akurat.
– Video Import wizard. Dengan video
import wizard maka Anda akan dapat melakukan encode video dan
sekaligus mempermudah melakukan clip editing.
3.
Improvement.
– Performa Flash Player
pada Flash versi 8 ini telah sangat meningkat.
Demikian juga dengan ActionScript yang
dimilikinya telah mematuhi standar ECMA.
– ActionScript
dimulai dari versi
2.0 merupakan bahasa pemrograman yang
telah berorientasi objek
(object-oriented language)
yang mendukung sifat-sifat inheritance, strong typing, dan
event model. Hal ini akan mempermudah improvisasi yang bisa dilakukan untuk
meningkatkan interaktivitas desain flash.
– Adanya History panel
dapat melakukan tracking aktivitas (action)
yang dilakukan sehingga
dapat melakukan pemakaian kembali perintah-perintah
sebelumnya.
1.4 Proses Instalasi
Sebelum menjalankan aplikasi Macromeda Flash 8,
terlebih dahulu harus dilakukan proses
instalasi. Proses instalasi
berarti mema-sang software ke
dalam sistem komputer kita, agar bisa dijalankan setiap waktu. Untuk
melakukan instalasi program,
Anda harus memiliki CD
Master Macromedia Flash
8. CD master
aplikasi merupakan CD sarana instalasi program ke dalam komputer
kita.Jika CD master
instalasi telah disiapkan, masukkan CD
tersebutke dalam CD ROM dan lakukan browsing menggunakan Windows
Explorer. Untuk lebih detailnya, lakukan langkah-langkah sebagai berikut.
1. Cari file Setup.exe dalam CD Macromedia Flash 8, kemudian klik ganda file tersebut sehingga
muncul gambar berikut.
Gambar 1.4.
Setup Awal Macromedia Flash 8
2. Klik Next untuk
melanjutkan proses instalasi. Akan muncul License Agreement seperti di bawah.
Gambar 1.5.
License Agreement
3. License Agreement berisi
tentang aturan-aturan lisensi
yang harus disepakati oleh pengguna aplikasi ini. Jika Anda setuju
dengan aturan lisensi
tersebut, pilih opsi I Accept...
dan klik Next.
Gambar 1.6.
Readme Information
4. Isikan folder tujuan instalasi sesuai keinginan,
kemudian tekan tombol Next.
Gambar 1.7.
Destination Folder
5.
Setelah muncul kotak Ready to Install. klik
Next untuk melanjutkan proses.
Gambar 1.8.
Installation Process
6. Proses
instalasi akan berjalan
dan tunggu sampai
kotak indikator menunjukkan proses sampai dengan 100% yang menunjukkan
bahwa proses instalasi telah selesai.
1.5 Menjalankan
Program Aplikasi
Jika program Macromedia Flash 8 sudah diinstal dalam
komputer Anda, selanjutnya program tersebut
dapat diaktifkan menggunakan Start Menu Program
sebagai berikut.
1.
Klik menu Start -> Programs -> Macromedia.
2. Dari daftar pilihan yang muncul, pilih Macromedia Flash
8.
Gambar 1.10.
Start Menu Program Macromedia Flash 8
3. Setelah klik ganda
ikon Macromedia Flash, selanjutnya akan muncul tampilan gambar seperti berikut.
Gambar 1.12. Menu Pembuka
4. Secara umum
tampilan yang muncul
pertama kali pada aplikasi Flash seperti pada gambar di
atas, menunjukkan tiga kelompok
menu yang bisa
dipilih, yaitu Open Recent
Item, Create New, dan Create from template seperti berikut.
a. Open Recent Item
Menu
tersebut digunakan untuk
membuka kembali proyek-proyek
yang pernah dibuat sebelumnya.
b. Create New
Bagian
.Create New. digunakan untuk
membuat proyek baru dengan Macromedia
Flash. Opsi Create New tersebut memiliki
beberapa pilihan, antara lain Flash
Document, Flash Slide Presentation,
Flash Form Application, dan sebagainya.
– Flash Document, digunakan jika Anda akan membuat dokumen
Flash Movie.
– Flash Slide
Presentation, digunakan jika
Anda akan membuat media presentasi.
– Flash Form
Application, digunakan untuk
membuat form aplikasi seperti pendaftaran, form input data, dan sebagainya.
– Action Script
File, digunakan untuk
membuat program sebagai sarana
interaktivitas objek-objek pada
Flash.
c Create From Template
Digunakan
untuk membuat desain
baru, tetapi menggunakan bentuk
yang sudah disediakan
di dalam template.
5. Untuk masuk ke
layar editor Flash, pilih Create New -> Flash Document dan Anda akan
masuk pada tampilan layar
editor Macromedia Flash 8 seperti pada gambar di bawah ini.
Gambar 1.13.
Tampilan Utama Flash
7. Jika layar monitor
sudah menunjukkan tampilan seperti di atas, maka proses instalasi program telah
berhasil dilakukan.
Bab 2. Area
Kerja Macromedia Flash Pro 8
2.1 Mengenal Area Kerja Flash 8
Macromedia Flash 8 adalah versi terbaru dari Flash.
Sejak diakuisisi oleh Adobe, kemampuan dan fitur-fiturnya menjadi sangat
dahsyat dan lengkap sehingga dapat digunakan untuk membuat berbagai macam
aplikasi seperti animasi web, kartun, multimedia interaktif,sampai aplikasi
untuk ponsel. Selain itu, Flash 8 juga kompatibel dengan software-software
desain dan animasi lainnya. Untuk memulai menggunakan Flash 8, sebaiknya kita
mengenal area kerjanya terlebih dahulu. Sesuai kata pepatah, tak kenal maka tak
sayang. Hal tersebut tentunya akan mempermudah kita dalam memahami program.
Tampilan area kerja Flash 8 dapat dilihat sebagai berikut.
Gambar 2.1. Area
kerja Flash
Keterangan
Gambar:
A. Menu Bar,
adalah sekumpulan perintah yang digunakan dalam Flash, seperti menu File
> New yang berfungsi untuk menyimpan file Flash.
B. Toolbox,
adalah sekumpulan tool yang digunakan untuk menggambar dan mengedit objek
(Tools), mengatur sudut pandang (View), menentukan warna (Colors), dan opsi pilihan
dari setiap tool yang ada (Options).
C. Panel Timeline,
adalah panel yang berfungsi mengatur jalannya animasi yang kita buat. Di sini
kita bisa mempercepat maupun memperlambat animasi.
D. Stage, adalah
kanvas tempat kita meletakkan dan mengedit objek-objek Flash.
E. Panel Properties,
adalah panel yang menampilkan atribut dari suatu objek yang sedang aktif
sehingga atribut objek tersebut dapat kita ubah.
F. Panel Actions,
adalah panel yang berisikan bahasa pemrograman ActionScript yang digunakan
untuk membuat animasi interaktif.
G. Panel Color,
adalah panel yang berfungsi untuk mengatur komposisi warna stroke maupun fill
pada objek.
H. Library,
adalah panel yang berfungsi untuk menyimpan objek-objek yang telah dijadikan
symbol.
2.2 Memahami Toolbox
Untuk membuat dan mengedit objek, Anda harus menggunakan
tooltool yang ada pada Toolbox. Perhatikan gambar berikut ini.
Gambar 2.2. Toolbox
Flash
Keterangan Gambar
– Selection Tool
(V), adalah tool yang berfungsi untuk memilih dan menyeleksi suatu objek.
– Subselection
Tool (A), adalah tool yang berfungsi untuk mengedit titik-titik pada suatu
objek secara detail.
– Free Transform
Tool (Q), adalah tool yang berfungsi untuk memutar suatu objek, mengatur
skala suatu objek, melakukan distorsi terhadap suatu objek, dan lainnya.
– Fill Transform
Tool (F), adalah tool yang memiliki fungsi yang sama dengan Free Transform
Tool, hanya saja penggunaannya terhadap warna gradasi dari suatu objek.
– Line Tool (N),
adalah tool yang berfungsi untuk membuat suatu garis.
– Lasso Tool (L),
adalah tool yang berfungsi untuk menyeleksi objek secara bebas sehingga dapat
memilih seluruh ataupun sebagian dari objek tersebut
– Pen Tool (P),
adalah tool yang berfungsi untuk menggambar kurva melengkung.
– Text Tool (T),
adalah tool yang berfungsi untuk membuat teks.
– Oval Tool (O),
adalah tool yang berfungsi untuk membuat objek berbentuk lingkaran maupun
elips.
– Rectangle Tool
(R), adalah tool yang berfungsi untuk membuat objek berbentuk kotak maupun
persegi empat.
– Pencil Tool (Y),
adalah tool yang berfungsi untuk menggambar bentuk bebas, sama seperti kita
menggambar dengan pensil di kertas.
– Brush Tool (B),
adalah tool yang berfungsi untuk memoles dalam bentuk cat, sama seperti kita
mengecat dinding dengan kuas.
– Ink Bottle Tool
(S), adalah tool yang berfungsi untuk memberi dan mengubah warna pada garis
luar objek (stroke).
– Paint Bucket Tool
(K), adalah tool yang berfungsi untuk memberi dan mengubah warna pada
bidang dalam objek (fill).
– Eyedropper Tool
(I), adalah tool yang berfungsi untuk mengambil dan meniru warna dari suatu
objek maupun gambar bitmap untuk diaplikasikan pada objek lain.
– Eraser
Tool (E), adalah tool yang berfungsi untuk menghapus objek.
Untuk
mempercepat pekerjaan kita dalam membuat movie Flash, biasakan menggunakan Shortcut.
Contoh : tombol R untuk mengaktifkan Rectangle Tool.
2.3
Mengenal Panel Timeline
Timeline merupakan panel utama yang berfungsi untuk
mengatur cepat atau lambatnya animasi yang kita buat dan sebagai wadah untuk
menyatukan objek-objek dari setiap layer
Gambar 2.3. Timeline
Flash
Keterangan Gambar
A. Layer, adalah
suatu lapisan transparan yang berfungsi untuk mengatur peletakan objek-objek
dalam suatu movie Flash. Jadi, objek yang berada di layer paling bawah akan tertutup
oleh objek yang berada pada layer di atasnya.
B. Keyframe,
adalah suatu frame yang berisikan satu objek atau lebih. Keyframe ditandai
dengan bulatan hitam pada frame.
C. Blank Keyframe,
adalah suatu frame kosong di mana didalamnya tidak ada objek. Apabila Blank
Keyframe tersebut diisikan sebuah objek, maka ia akan menjadi Keyframe.Blank
Keyframe ditandai dengan bulatan putih pada frame.
D. Playhead,
adalah suatu alat yang berfungsi untuk menjalankan animasi di stage tanpa perlu
melakukan Test Movie terlebih dahulu. Playhead ditandai dengan kotak slider berwarna
merah yang terletak di atas frame.
E. Frame, adalah
suatu wadah bingkai yang membentuk suatu movie Flash. Movie tersebut terdiri
atas sekumpulan gambar yang berurutan sehingga apabila dijalankan, movie
terlihat seolah-olah bergerak.
2.4 Memahami Jenis File Flash 8
Flash dapat menghasilkan banyak file keluaran. Namun
secara umum, terdapat tiga jenis file utama pada Flash, di antaranya:
A. File Utama (.fla), adalah jenis file utama ketika kita
menyimpan movie Flash Kita bisa membuka dan mengedit semua jenis file .fla pada
Flash.
B. File Hasil
Ekspor (.swf), adalah jenis file yang biasa digunakan pada halaman web.
File dalam format .swf dapat dilihat melalui web browser, selama browser
tersebut memiliki Flash Player.
C. File Eksekusi
(.exe), adalah jenis file yang dapat dieksekusi tanpa perlu memiliki
aplikasi Flash ataupun Flash Player. Dengan melakukan klik ganda terhadap file
.exe tersebut, maka file tersebut akan terbuka secara otomatis.
2.5 Tampilan Menu Flash
Menu pada Macromedia Flash Pro 8 terdiri dari: File,
Edit, View, Insert, Modify, Text Commands, Control, Window dan Help. Anda dapat
melihat submenu yang terdapat pada masing-masing menu dengan mengeklik satu
kali pada menu yang ingin Anda pilih
Gambar 2.4. menu dan
submenu Flash
2.6 Membuat dan Menyimpan File
Sebelum kita bekerja pada Flash, ada baiknya terlebih
dahulu kita memahami bagaimana membuat dan menyimpan file di Flash. Untuk
membuat file baru, klik opsi Flash Document pada bagian Create New.
Gambar 2.5. Tampilan menu
open Flash
Selain cara
di atas, kita juga dapat membuat file baru dengan cara klik menu File >
New, maka akan muncul kotak dialog New Document. Kemudian klik
tombol OK.
Untuk menyimpan file, klik menu File > Save atau
File > Save As sehingga akan muncul kotak dialog Save As. Isikan nama
file pada bagian File name, lalu klik tombol Save
Gambar 2.6. Tampilan
menu save Flash
Coba Anda buat file baru sehingga akan muncul halaman
Flash baru. Kemudian amati area kerja Flash tersebut dan perhatikan letak toolbox
dan panel-panel utama seperti panel Timeline, panel Properties, panel Library,
dan lainnya. Lalu simpan file tersebut. Berikut ini langkah-langkah
pengerjaannya:
1. Buat file baru
dengan memilih opsi Flash Document pada bagian Create New sehingga
akan muncul area kerja Flash.
2. Amati sejenak area
kerja di layer. Perhatikan dengan seksama Toolbox dan panel-panel yang
ada sehingga akan memudahkan Anda dalam bekerja nantinya.
3. Setelah diamati dan
dipahami sejenak, kemudian simpan file tersebut dengan cara klik menu File
> Save atau File > Save As. Beri nama latihan 1 pada
bagian File name dan pilih Save as type yang sesuai dengan
aplikasi yang kita gunakan, yaitu Flash 8 Document (*.fla). Lalu
klik Save untuk menyimpan.
2.7 Beberapa panel pada Flash
A. Panel Library
Sesuai dengan namanya, Library berarti perpustakaan. Jadi,
Library merupakan media tempat penyimpanan objek-objek yang telah kita jadikan
simbol maupun objek-objek yang kita impor dari file lain. Fungsi utama Library
adalah kita dapat menggunakan objek-objek yang ada di dalamnya berulang-ulang
dan meletakkan nya di Stage sebanyak-banyaknya tanpa menambah ukuran file Flash
kita
Gambar 2.7. Panel
Library Flash
Keterangan Gambar
A. Window Preview, adalah
tampilan yang berfungsi untuk menampilkan simbol atau objek lain pada Library.
B. Symbol, akan
dijelaskan lebih detail pada Modul 3 dan 4.
C. New Symbol,
adalah tombol yang berfungsi untuk membuat simbol baru pada Library.
D. New Folder, adalah
tombol yang berfungsi untuk membuat folder baru pada Library. Di sini kita
dapat mengelompokkan beberapa simbol ke dalam satu folder.
E. Delete,
adalah tombol yang berfungsi untuk menghapus simbol maupun objek lain pada
Library.
Untuk mengambil objek dari Library
lain, klik tanda panah pada Library kita, lalu pilih nama Library
lain (misal untitled-2). Ambil objek tersebut dengan cara men-drag-nya ke Stage
B. Panel Properties
& Filters & Parameters
Panel ini terdapat di bawah stage. Untuk mengeluarkan
atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+F3. Panel
Properties & Filters & Parameters digunakan untuk untuk mengatur ukuran
background, warna background, kecepatan animasi dan lain-lain.
Gambar 2.8.
Panel Properties & Filters & Parameters
C. Panel Action Script
Panel Actions digunakan untuk menuliskan script atau
bahasa pemrograman flash (ActionScript). Anda dapat mengetikkan secara langsung
pada layar Actions atau menggunakan bantuan yang disediakan oleh Macromedia
Flash Pro 8. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan
shortcut F9.
Action Script adalah kode-kode program dalam Flash
digunakan untuk mengontrol jalannya suatu animasi agar animasi yang dibuat
menjadi lebih atraktif dan menarik.
Gambar 2.9. Panel
action script
D. Panel Color
Panel Color merupakan panel yang digunakan untuk
memilih warna yang digunakan dalam pembuatan objek-objek pada stage. Ada dua jenis subpanel,
yaitu: Color Mixer dan Swatches. Shortcut untuk Color Mixer adalah Shift+F9 dan
shortcut untuk Color Swatches adalah Ctrl+F9.
Gambar 2.10. Panel color
Gambar 2.11. Panel color lanjutan
E. Panel Align
& Info & Transform
Untuk menampilkan panel ini Anda dapat menekan Ctrl+K
pada keyboard. Panel ini digunakan untuk mengatur posisi objek, ingin
diletakkan pada tengah stage, sebelah kiri atau kanan dan lain-lain. Dengan
panel ini Anda juga dapat memutar objek dengan Transform.
Gambar 2.12. Panel Align & Info &
Transform
Bab 3.
Dasar-dasar menggambar
3.1 Alat Gambar
Sebelum menggambar, tentu kita harus tahu dulu sifat
dari setiap alat gambar yang disediakan oleh Flash karena goresan Anda akan menentukan
seperti apa gambar itu nanti. Penulis hanya akan memberi contoh gambar yang
dibuat menggunakan alat gambar tertentu. Mudah-mudahan otak kanan dan kiri Anda
bisa bekerja sama dengan baik untuk mengetahui dengan cepat bagaimana cara
kerjanya.
1. Brush Tool (B), merupakan alat gambar yang
meniru cara kerja kuas. Brush di Flash terdiri atas berbagai ukuran dan bentuk
yang dapat Anda pilih pada Option Tool di kiri bawah saat Anda mengklik Brush
Tool
2. Pencil Tool (Y) & Pen Tool (P),
merupakan alat gambar yang meniru cara kerja pensil atau pulpen. Bedanya dengan
kuas, ketebalan garis pada pensil dan pulpen sama besar, tidak seperti goresan
kuas .
3.2 Model
Garis dan Goresan
1. Dengan menggunakan Oval Tool (O), Line
Tool (N), dan ketebalan garis adalah 5. Gambarkan Stick Man (Manusia
Garis), pilih salah satu saja yang Anda suka di antara ketiga makhluk di bawah
ini.
2. Saat Anda mengeditnya deng an Selection Tool
(V), garis tersebut hanya dapat melengkung dan tebal tipisnya berlaku juga
untuk satu garis saja
Bagaimana kalau kita ingin membuat satu garis , tetapi dengan
ketebalan yang berbeda dalam satu garis seperti gambar di bawah ini . Akan
lebih alami bukan? Seperti Goresan Kuas.
3. Seleksi seluruh tubuh manusia garis tersebut
kemudian ubah dari sifat garis ( Line) menjadi Fills dengan cara memilih menu Modify
> Shape > Convert Lines to Fills
4. Setelah diubah, mungkin Anda tidak akan melihat
perbedaannya. Akan tetapi, coba Anda menggunakan Selection Tool (V),
geser setiap sisinya sehingga ketebalan garis menjadi lebih bervariasi.
Sebenarnya ini hanya masalah gaya menggambar saja. Ada yang suka garis dengan ketebalan sama,
tetapi ada juga yang suka goresan dengan ketebalan berbeda. Gaya yang lainnya adalah menggunakan garis
luarnya tebal sekali dengan garis-garis di dalamnya tipis.
3.3
Bayangan dan Pantulan Cahaya
Objek yang
paling sederhana sekalipun akan kelihatan bagus bila kita tahu teknik
mewarnainya. Jadi, kita tidak harus jago menggambar untuk membuat film kartun. Tutorial
berikut ini untuk memberi warna suatu objek yang paling sederhana, yaitu
lingkaran. Dengan memberinya bayangan ( shadow) dan pantulan cahaya (hilite),
gambar Anda akan menjadi bagus
1.
Dengan menggunakan Oval Tool (O), gambar
lingkaran dengan ketebalan garis adalah 3. Tekan dan tahan tombol SHIFT
agar gambar lingkaran tersebut sempurna.
2.
Beri nama layer “Outline”, merupakan kerangka dari gambar.
Kita akan membagi warna objek lingkaran dalam beberapa layer.
3.
Buat layer baru yang bernama “Fill”, merupakan warna
dari lingkaran. Di sini penulis memilih warna dengan abu-abu tua.
4.
Tentu kita tidak bisa mewarnai layer yang masih kosong.
Oleh karena itu, harus ada akal -akalannya supaya kita bisa memisahkan antara
kerangka dengan warna. Dengan menggunakan Paint Bucket Tool (K), warnai
objek lingkaran yang ada di layer “Outline” dengan warna abu-abu tua.
5.
Klik atau seleksi warna objek lingkaran dan tekan
tombol CTRL+X atau klik kanan dan pilih menu Cut.
6.
Klik frame 1 di layer “ “Fill” dan pilih menu Edit
> Paste in Place (Ctrl+Shift+V). Ini akan menyebabkan warna objek
menempati layer yang terpisah degan kerangkanya. Anda bisa saja menjadikan satu
layer antara kerangka dan warna objek, itu boleh-boleh saja dan malah
langkahnya lebih sederhana. Akan tetapi, ada satu kasus di mana kita harus
memisahkan antara kerangka dan objek. Anda akan menemukan kasus ini bila objek
yang Anda buat sudah rumit.
Untuk objek yang sederhana seperti lingkaran, tentu
saja langkah-langkah yang diberikan di buku ini menjadi sangat panjang dan
lama. Akan tetapi, penulis memang sengaja untuk mempersiapkan Anda bila bertemu
dengan objek yang lebih rumit.
7.
Buat layer baru bernama “ Shadow” yang merupakan warna bayangan
dari objek lingkaran. Ini akan memberi kesan 3 Dimensi, seolah-olah membuat
berat dan tidak garing (membosankan).
8.
Dengan menggunakan Line Tool (N) atau Pen Tool
(P), terserah Anda ingin menggunakan yang mana. Buat bayangan lingkaran dan
beri dengan warna yang lebih gelap dari warna objek. Dan memang warna bayangan
harus lebih gelap.
9.
Untuk menemukan warna bayangan yang tepat , Anda bisa mengakalinya
dengan Eyedropper Tool (I). Klik warna objek sehingga pada Fill Color
berisi warna tersebut.
10.
Klik kotak Fill Color kemudian klik Panel
Color untuk memunculkan Panel Color.
11.
Geser kursor segitiga ke bawah agar warna menjadi lebih
gelap kemudian tekan tombol OK.
12.
Dengan warna yang baru saja Anda buat, beri warna bayangan
di objek lingkaran..
13.
Kini objek lingkaran kita menjadi lebih berbobot. Se
karang buat layer “Hilite”, untuk membuat pantulan cahaya pada objek lingkaran.
Gunakan Oval Tool (O) dan beri warna putih.
Pantulan ini bukan berbentuk lingkaran, melainkan berbentuk
elips. Anda bisa menggunakan Free Transform Tool (Q) agar
penempatannya sesuai dengan objek lingkaran.
Pantulan cahaya akan membuat gambar Anda menjadi
lebih elegan, eksklusif, dan cantik. Ini akan membuat Anda lebih percaya diri
dengan gambar yang Anda buat. Berbobot dancantik.
14. Terakhir,
buat layer “Shadow Ground” untuk membuat bayangan objek pada lantai sehingga
objek tidak kelihatan mengambang, tetapi ada lantai atau tanah yang menopangnya.
15. Dengan
Oval Tool (O), gambarkan bentuk elips dan beri warna hitam seperti yang
terlihat pada gambar.
Dengan teknik-teknik pewarnaan seperti ini, kita tidak
usah khawatir dan malu dengan karakter yang dibuat. Sesederhana apa pun gambar yang
Anda buat akan tampak lebih hidup
3.4
Pengaturan Gradasi Warna
Warna gradasi juga bisa (bahkan lebih bagus dan
kadang mendekati objek nyatanya) dalam membuat bayangan (shadow) atau pantulan cahaya
(hilite). Kebanyakan para pemula atau mereka yang mencoba meniru hanya berhenti
pada warna gradasi yang standar saja. Masih banyak setelan lain yang harus
diperhatikan seperti peng gunaan Gradient Transform Tool (F), penambah
bayangan, pantulan cahaya, dan warna latar. Untuk mahir dalam menyetel, Anda
tentu harus banyak berlatih supaya lebih peka dalam mewarnai. Oleh karena
kepekaan tidak bisa dipelajari, melainkan dilatih. Buku ini hanya menunjukkan
teknik-tekniknya saja sehingga Anda dapat terus berlatih mengembangkan kepekaan
akan setelan-setelan dalam warna gradasi.
Pewarnaan bertingkat dengan memberikan warna dasar,
bayangan dan pantulan cahaya seperti yang telah kita pelajari sebelumnya akan membantu
untuk membuat objek kelihatan lebih mempunyai bobot, elegan, dan menarik.
Tentunya akan banyak layer yang dibutuhkan untuk membuat pewarnaan bertingkat
ini.
Kita melihat objek lingkaran p aling sederhana pun
memiliki banyak layer yang mewakili tingkatan warna. Bayangkan kalau objeknya seperti
di situs yang telah disebutkan di atas. Akan tetapi, Anda jangan takut dengan
banyaknya layer seperti di atas. Seorang profesional tidak pernah berpi kir
mengenai banyaknya layer, tetapi akan selalu berpikir bagaimana objek tersebut
menjadi lebih menarik. Langkah-langkah untuk membuat setelan gradasi pada suatu
objek adalah:
1. Atur
penempatan terang dan gelap warna dengan Gradient Transform Tool (F) sehingga
objek tidak terlalu gelap.
Skala Horizontal
Skala Proporsional
Rotasi
Jika daerah pada objek tertentu terlalu gelap atau
memang sengaja digelapkan, Anda bisa sedikit memberikan pantulan cahaya
sehingga akan terlihat lebih elegan. Gelap tapi Mewah.
2. Pada
layer “Hilite”, buat lingkaran hilite yang lebih kecil dengan lingkaran awal
atau lingkaran aslinya .
3. Kemudian
buat warna gradasi dari warna Putih(Alpha=100%) ke warna Putih
(Alpha=0%). Jenis gradasinya adalah Radial.
4. Isi
lingkaran hilite dengan setelan warna gradasi yang telah kita buat. Setelah itu
hilangkan garisnya karena kita tidak memerlukannya lagi.
5. Dengan
menggunakan Gradient Transform Tool (F), atur pencahayaannya sehingga
pantulan cahaya hanya mengenai daerah yang gelap saja.
Kadang pemberian pantulan bisa berkali-kali atau banyak hanya
kepada satu bagian objek saja. Ini bisa terjadi kalau kepekaan Anda sudah mulai
berkembang. Anda bisa tahu bagian mana yang kurang atau jelek sehingga perlu
diberi tambahan shadow atau hilite
Jenis (type) gradasi Radial digunakan untuk objek-objek
yang bulat. Jenis gradasi Linear digunakan untuk objek-objek kotak atau yang
mempunyai sudut lancip
6.
Terakhir, buat bayangan obje k di lantai dengan
mengatur warna gradasi dari Hitam (Alpha=100%) ke Hitam (Alpha=0%)
dengan jenis gradasi adalah Radial
Kini Anda tahu tentang pewarnaan bertingkat ini yang dapat
membuat suatu objek begitu hidup. Silakan Anda mencobanya membuat objek lain
dengan apa yang baru saja telah dipelajari. Berikut ini merupakan penggunaan
gradasi untuk membuat objek mobil se-realistik mungkin. Apakah Anda bisa
membedakan mobil yang asli (kiri) dengan mobil yang dibuat dengan gradasi
(kanan)?
Kita harus mentrace atau membuat garis-garis secara manual
dengan berpanduan dari gambar mobil yang asli se-detail mungkin
Oleh karena itu, dibutuhkan kesabaran dan ketelitian yang
luar biasa untuk membuat detail sedemikian rupa
Garis-garis tersebut digunakan u ntuk “menangkap” cahaya
atau membuat pantulan yang akan diisi dengan warna gradasi.
Teknik pewarnaan gradasi untuk membuat objek mobil di
atas mudah - mudahan dapat berguna bagi Anda supaya tidak berpikir bahwa cara Anda
salah atau tidak benar. Memang u ntuk membuat sesuatu yang nyata atau real,
Anda harus bekerja keras seperti contoh yang telah ditunjukkan.
Latar belakang juga sering menggunakan warna -warna
gradasi dan tentu tidak serumit sampai bertingkat -tingkat seperti yang telah
kita pelajari sebelumnya. Akan tetapi, Anda harus tahu penggabungan warna yang
tepat seperti mewarnai pohon, gunung, rumah, danau, dan langit. Anda bisa lihat
beberapa contoh penggambaran kartun dan mungkin perlu dihafal warnanya untuk
mulai belajar
Kumpulkan beberapa suasana gambar kartun pagi, siang,
sore, berkabut, bersalju, cerah, musim panas. Dengan begitu, Anda akan punya
banyak ide untuk warna gradasi.
3.5
Sudut Pandang
Kalau ingin menggambar karakter atau tokoh , sebelum
dianimasikan, biasanya harus dilihat atau digambar dari berbagai sudut pandang,
entah itu dari depan, samping, belakang, atau atas,
Dengan membuat berbagai sudut pandang, Anda akan lebih
mengenal karakter tersebut secara detail. Semakin detail Anda mengenal karakter
Anda, semakin Anda akan jatuh cinta dengannya
3.6
Mimik Muka
Sama halnya dengan sudut pandang. Mimik sangat
penting agar tokoh kita menjadi lebih hidup dan mempunyai emosi. Buat gambar
berbagai emosi seperti tertawa, sedih, terkejut, dan diam. Kalau Anda sudah
menyukainya sebelum dianimasikan, berarti Anda sudah jatuh cinta dan menjiwai
apa yang dibuat. Kalau Anda membuatnya asal-asalan, pasti rasa cinta kepada
karakter yang kita buat tidak akan muncul.
3.7
Imajinasi
Sesederhana apa pun karakter buatan Anda, walau hanya
bentuk bulat sekalipun, kalau Anda tambah dengan imajinasi, maka karakter tersebut
akan memiliki jiwa. Ini yang paling penting. Penulis memberi nama ka rakter
imut tersebut adalah Babu. Ia selalu menyebut umurnya 10 tahun kepada
setiap orang yang menanyakannya. Entah dari mana asalnya, orang tuanya sudah
tidak ada lagi. Sesuai dengan namanya, Babu artinya pelayan. Ia hidup
berpetualang ke sana
ke mari mencari makan dengan melayani setiap orang tanpa pandang bulu. Entah
itu hanya mendorong mobil, cuci piring, menyapu jalanan, menghibur orang dengan
tariannya yang lucu, bernyanyi, atau apa pun, yang penting kerja serta dapat
bermanfaat bagi orang lain. Babu tidak mengenal gengsi karena memang ia masih
anak kecil dan begitu polos. Akan tetapi, ia tidak sepolos yang kita duga
karena pengalaman hidupnya sangatlah banyak sehingga ia bisa mengenal berbagai
macam sifat orang dari berbagai latar belakang. Tidak heran, Babu cepat belajar
dan akrab dengan siapa saja. Ia juga tidak pernah berpikir atau bekerja hanya untuk
uang. Yang penting perutnya bisa kenyang hari itu dan melihat orang lain bahagia,
maka ia sudah merasa s enang dan gembira. Ia tidak pernah berpikir tentang hari
esok ataupun terikat dengan masa lalunya. Hidupnya hanya untuk hari ini dan
sama sekali tanpa beban. Tidak ada Orang Tua yang menas ihatinya, Guru yang
mengajarinya. Semua pengetahuan yang didapat hanyalah dari alam. Siapa pun atau
apa pun ia anggap sebagai Orang Tua dan Guru. Itulah sekilas tentang Babu.
Petualangan selanjutnya akan diceritakan di modul berikutnya. Oleh karena itu,
jangan ke mana-mana
Coba buat karakter buatan Anda sendiri. Kalau tidak
jatuh cinta dengan karakter buatan Anda sendiri, berarti apa yang Anda buat belum
mempunyai jiwa atau ruh untuk dianimasikan atau dibuat ceritanya. Oleh karena
itu, Anda bisa melakukan latihan di bawah ini supaya perasaan suka itu muncul .
1. Buat dan gambarkan karakter tampak depan, samping, dan
belakang,
2. Buat dan gambarkan 5 (lima) mimik muka karakter sedih, marah,
senang, terkejut , dan ngantuk.
3. Buat data diri karakter seperti tempat, tanggal
lahir, hobby, sifat, makanan favorite, acara tv favorite, warna kesukaan, yang
paling dibenci, alamat email , dan friendster. Semakin detail atau banyak data
karakter yang Anda buat, akan membuat imajinasi Anda berkembang.
BAB
4. Animasi Dasar Flash
Macromedia Flash merupakan software keluaran
Macromedia yang dapat digunakan untuk pembuatan animasi: web, film kartun dan
presentasi multimedia. Sampai tutorial ini dibuat Macromedia sudah mengeluarkan
sampai dengan versi ke-8. Karena kemudahan dan banyak manfaatnya, maka sofware
ini dipelajari oleh berbagai kalangan. Tutorial berikut sedikit akan membahas
pembuatan animasi-animasi dasar.
4.1. Frame by
Frame
Frame by Frame adalah animasi yang paling mudah dalam
macromedia flash. Animasi frame by frame menggunakan penempatan objek pada
frame yang berbeda-beda, sehingga ketika di play, akan seolah-olah objek
tersebut bergerak,
Langkah 1
Atur
ukuran stage 800 x 600 pixel, atur lewat properti
Langkah 2
Buat objek lingkaran menggunakan Oval Tool (C+O) pada
sebelah kiri stage dan frame 1
Gambar 4.1. Objek oval
pada frame 1
Langkah 3
Pada
frame 10 lalu klik kanan mouse dan pilih Insert
Blank Keyframe.
Lakukan
juga langkah tersebut pada frame 20, dan frame 30
Langkah 4
Kemudian klik objek oval pada frame 1, melalui menu edit copykan ke frame 10, frame 20, dan frame 30 dengan cara pasang
kursor pada frame 10, 20, dan 30 lalu melalui menu edit lakukan paste in center
Langkah 5
Setelah dipaste objek akan terletak di tengah stage. Klik
objek oval tersebut menggunakan mouse klik kiri lalu sambil menekan tombol klik
kiri mouse geser ke tempat yang diinginkan.
Gambar 4.2. Objek oval pada
frame 1, 10, 20, dan 30
Langkah 6
Untuk
mengetahui animasinya, tekan tombol enter
atau masuk menu control lalu
pilih play
4.2. Motion Tween
Animasi ini merupakan animasi yang paling dasar
karena animasi ini pada prinsipnya adalah pergerakan suatu objek (motion),
seperti halnya definisi animasi yaitu teks/gambar yang bergerak.
Langkah 1:
Buat
objek lingkaran menggunakan Oval Tool (C+O)
Langkah 2:
Seleksi objek menggunakan Selection Tool (C+V) atau Ctrl +
A, untuk menyeleksi objek lingkaran.
Setelah itu, klik kanan → Convert to
symbol → pilih Movie Clip
Gambar 4.3. Jendela
dialog Convert to Symbol (F8)
Langkah 3:
Pilih frame 20 pada Layer 1 di Timeline, setelah itu klik
kanan dan Insert Keyframe. Geser objek ke arah kanan → kembalikan objek ke
frame 1
Gambar 4.4. Insert
Keyframe (F6)
Langkah 4:
Pada
Properties di bawah stage pilih Tween Motion. Jika langkah benar, maka di
bagian layer 1 akan muncul panah dari frame 1 ke frame 20. Untuk menjalankan
animasi: Enter atau Ctrl + Enter untuk melakukan Test Movie.
Gambar 4.5. Jendela Dialog
Pemilihan Jenis Animasi
Untuk menghentikan test movie_Ctrl + W
Animasi berhasil jika dalam layer terdapat tanda panah (→).
Jika belum berhasil (garis dalam layer berupa garis putus-putus), ulangi
langkah Anda sampai berhasil !
4.3. Motion Guide
Animasi ini merupakan dasar dari animasi game balapan
mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang
sudah ditentukan. Hati-hati dalam membuat animasi ini, karena langkah tidak
sesuai prosedur, maka animasi tidak akan berhasil.
Langkah-langkah:
Langkah 1:
Buat
objek persegi menggunakan rectangle tool dan convert object to symbol (F8),
pilih Movie Clip
Langkah 2:
Klik
kanan pada layer 1, pilih Add Motion Guide
Langkah 3:
Buat
jalur bebas menggunakan Pencil Tool di layer guide
Langkah 4:
Gunakan Selection Tool, klik frame 30, dan insert
keyframe di layer guide
Langkah 5:
Pilih kembali layer 1, frame 1, pindahkan objek ke pangkal
jalur, posisikan objek dengan tepat, sehingga terlihat lingkaran kecil di
tengah-tengah objek persegi
Gambar 4.6. Posisi
layer dan Guide Layer
Gambar 4.7. Posisi Objek
setelah diletakkan di pangkal jalur
Langkah 6:
Klik
frame 30 pada layer 1, lalu Insert Keyframe
Langkah 7:
Pindahkan
objek dari pangkal ke ujung sesuai jalur yang dibuat, hati-hati pada langkah
ini !
Langkah 8:
Klik
kembali frame 1 pada layer 1 kemudian pilih Tween Motion
Langkah 9:
Tekan
Enter untuk Play animasi yang baru saja Anda buat, jika belum berhasil ulangi
langkah-langkah tersebut
4.4. Shape Tween
Animasi
bentuk/shape dibedakan menjadi 2 bagian yaitu:
a. Animasi bentuk dengan objek statis/diam di tempat
b. Animasi bentuk dengan objek dinamis/bergerak (ada
motion-nya)
Yang perlu diperhatikan ketika akan membuat animasi bentuk
baik yang statis ataupun dinamis adalah bahwa objek tidak perlu di Convert to
Symbol.
a. Animasi Bentuk
Statis
Langkah-langkahnya:
Langkah 1:
Buat
objek lingkaran dengan Oval Tool.
Langkah 2:
Klik
Frame 30, kemudian Insert Keyframe.
Langkah 3:
Ubah
bentuk lingkaran menjadi bentuk bukan lingkaran, menggunakan subselection tool.
Langkah 4:
Klik
frame 1, pilih tween-shape di bawah stage.
Langkah 5:
Tekan Enter untuk Play atau Ctrl + Enter untuk Test
Movie.
Gambar 4.8. Perubahan
bentuk objek dari Frame 1 ke Frame 30
b. Animasi Bentuk Dinamis
Jenis
animasi ini merupakan pengembangan dari animasi bentuk statis. Pada jenis
animasi ini akan diberikan contoh objek kotak berubah menjadi teks kotak.
Langkah-langkahnya
adalah:
Langkah 1:
Buat
bentuk objek bentuk kotak di frame 1 menggunakan rectangle tool.
Langkah 2:
Klik
frame 40, insert keyframe.
Langkah 3:
Pindahkan
objek kotak dari frame 1 ke frame 40 setelah itu hapus objek dengan Delete.
Langkah 4:
Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl + B
(2x), agar teks terkonversi menjadi objek.
Langkah 5:
Kembali ke frame 1, pilih tween-shape, tekan Enter
Gambar 4.9. Perubahan
objek kotak menjadi teks “KOTAK”
4.5. Masking
Animasi mask termasuk salah satu animasi dasar dari
yang harus dikuasai jika seseorang ingin mahir membuat animasi. Contoh animasi
mask yang sederhana adalah animasi sorot lampu panggung. Untuk membuat animasi
ini dibutuhkan 3 layer, animasi tween-motion dan animasi mask
Langkah-langkah
pembuatan animasi mask:
Langkah 1:
Buat 3 layer dengan nama: Sorot, Objek dan Lampu. Untuk
mengubah nama layer tinggal klik 2x layer yang akan diganti namanya.
Gambar 4.10. Layer
Sorot, Objek dan Lampu
Langkah 2:
Klik layer objek, setelah itu buat teks bertuliskan NAMA
ANDA menggunakan text tool. Beri warna biru pada teks dengan fontasi
Arial.
Langkah 3:
Klik layer Lampu, buat animasi lingkaran yang bergerak
dari kiri ke kanan, gunakan tweenmotion, sampai dengan frame 40.
Posisikan lingkaran agar tepat dengan lingkaran yang ada di
sebelan kanan
Gambar 4.11
Tween-motion pada layer Lampu
Langkah 4:
Klik layer Objek, tekan F5 (insert frame) pada frame 40
atau klik kanan pada frame 40.
Langkah 5:
Klik layer Sorot-frame 1, kemudian klik layer Lampu-frame
1, tekan Ctrl + C (Copy), klik kembali layer Sorot-frame 1 dan Ctrl +
Shift + V (Paste In Place).
Langkah 6:
Klik layer Lampu-frame 40 (frame terakhir), tekan Ctrl
+ C. Klik layer Sorot-frame 40, klik kanan insert keyframe (F6) kemudian
Ctrl + Shift + V untuk paste in place. Gerakkan objek lingkaran yang
kiri, ke kanan.
Langkah 7:
Klik layer Sorot-frame 1, tambahkan
tween-motion.
Klik kanan layer Lampu, pilih
Mask
Gambar 4.12 Layer
tween-motion yang benar
Gambar 4.13 Penambahan
Mask pada layer
Langkah 8:
Tekan Enter untuk Play atau Ctrl +
Enter untuk Test Movie
Gambar 4.14 Animasi
mask yang benar tampak seperti sorot lampu panggung
4.5. Animasi Action Script
Action Script adalah kode-kode program dalam Flash
digunakan untuk mengontrol jalannya suatu animasi agar animasi yang dibuat
menjadi lebih atraktif dan menarik. Animasi action script merupakan animasi
flash yang menggunakan script program untuk mengendalikan movie klip. Animasi
action script dapat lebih feksibel, lebih komplit, dan lebih powerfull
dibanding animasi frame by frame, tween, motion guide, atau masking. Animasi
action script dapat menampilkan atau memanipulasi suatu objek menjadi lebih
menarik dan lebih bervariasi. Contoh animasi action script sederhana yaitu
animasi menggerakan objek bentuk batang bergerak melingkar. Untuk membuat
animasi ini cukup dibutuhkan 1 layer dan langkah-langkah pembuatan animasi
action script adalah sebagai berikut ::
Langkah 1:
Buat objek bentuk batang dengan type movie klip. Caranya
setelah membuat objek batang lalu diklik kanan objek tersebut lalu dipilih
convert to symbol dan pilih movie klip.
Langkah 2:
Klik kiri objek tersebut lalu buka jendela action script
lalu tuliskan action script sebagai berikut
onClipEvent (load)
{
v=10;
}
onClipEvent (enterFrame)
{
this._rotation+=v;
}
Langkah 3:
Tekan Ctrl + Enter untuk Test Movie
Action script juga dapat mengendalikan gerak suatu objek,
langkah-langkahnya yaitu
Langkah 1:
Buat 3 buah layer dengan menekan
tombol insert layer lalu beri nama masing-masing layer dengan nama kotak,
tombol, dan stop.
Gambar 4.15 Pengendalian gerak objek
menggunakan action acript
Langkah 2:
Pada layer kotak, buat objek kotak pada frame 1, lalu pada
frame 60 klik kanan mouse pilih → insert frame dan pada klik kanan mouse pada
frame antara frame 1 dengan 60 lalu pilih → create motion tween lalu pada frame
60 klik kanan mouse pilih → Insert Keyframe sehingga muncul garis panah antara
frame 1 sampai frame 60. Kemudian klik frame 60 lalu melalui mouse pindahkan
objek kotak (didrag) ke posisi kanan stage.
Langkah 3:
Klik frame 1 pada layer tombol, lalu pilih menu → window →
common libraries → buttons lalu pilih folder → classic buttons (klik 2 kali
secara cepat) → pilih folder playback pilih → gel Right lalu gambar tombolnya
dipindah ke stage lalu pilih lagi → gel Stop dan lalu gambar tombolnya dipindah
ke stage. Setelah itu klik kanan frame 60 → insert frame.
Langkah 4:
Klik
tombol selection tool, klik tombol gel Right lalu buka jendela action script
dan ketik program code sebagai berikut
on (release)
{
play();
}
Klik
tombol selection tool, klik tombol gel Stop lalu buka jendela action script dan
ketik program code sebagai berikut
on (release)
{
stop();
}
Langkah 5:
Klik frame 1 pada layer stop. Lalu pasang action script
stop();
seperti langkah 4. Tekan Ctrl + Enter untuk Test
Movie
Bab 5. Presentasi Dengan Flash
5.1 Presentasi Dengan Flash
Meskipun membuat slide
presentasi dengan Macromedia Flash Pro 8 lebih susah dibandingkan dengan Microsoft
Power Point, namun membuat slide presentasi dengan Macromedia Flash Pro 8 dapat
menghasilkan slide presentasi yang lebih menarik dan lebih dapat memberikan
banyak manfaat. Dengan Macromedia Flash Pro 8 kita dapat menggunakan dasar
pembuatan slide presentasi ini untuk membuat jenis presentasi-presentasi lain
yang dapat ditambahkan animasi yang lebih lengkap dan menarik.
Dalam pembuatan slide
presentasi dengan Macromedia Flash Pro 8, objek-objek seperti tombol atau
button, background dan teks sebaiknya diletakkan dalam layer yang berbeda. Hal
ini dimaksudkan agar objek dapat dikontrol dengan baik. Tutorial kali ini
membahas pembuatan slide presentasi dengan dokumen slide-slide kosong yang
sudah disediakan oleh Macromedia Flash Pro 8. Kita hanya perlu menambahkan
efek-efek animasi teks atau gambar dan tombol navigasi antarslide. Sebelum
membuat slide presentasi sebaiknya Anda siapkan isi dari slide presentasi, teks
atau gambar yang ingin dimasukkan ke dalam slide, tombol-tombol dan suara/musik
yang mendukung presentasi (jika diperlukan).
Kali ini kita akan berlatih
membuat 6 slide presentasi. Berikut ini contoh teks yang akan ditampilkan pada
slide presentasi
Slide ke -
|
Isi
|
1
|
Trik Belajar Membuat Animasi
Dengan Flash 8
|
2
|
Untuk membuat animasi dengan Flash
8, Anda harus berlatih terlebih dahulu: Animasi Dasar, Membuat Tombol,
Mengontrol Movie Clip
|
3
|
Animasi Dasar. Animasi dasar terdiri dari: animasi Motion
Tween, Shape Tween dan Motion Guide Membuat
|
4
|
Membuat
Tombol. Untuk membuat tombol Anda dapat menggunakan teks, gambar ataupun
gabungan antara teks dan gambar. Selain itu Anda juga dapat menggunakan
tombol yang ada di Library Flash
|
5
|
Mengontrol
Movie Clip. Movie Clip memiliki peran penting dalam pembuatan animasi. Dengan
Movie Clip objek-objek dalam flash dapat dikontrol dengan baik dan dapat
dibuat animasi yang menarik dan interaktif
|
6
|
Trik
lebih lanjut: banyak berlatih, mencari tutorialtutorial di internet dan
mengikuti forum-forum tentang animasi flash
|
Berikut contoh langkah-langkah pembuatan slide presentasi
dengan Macromedia Flash Pro 8
1. Ketika Anda
pertama kali masuk Macromedia Flash Pro 8, pilih Create New →
Flash
Slide Presentation.
2. Pada tampilan awal
secara otomatis di sebelah kiri stage sudah terdapat 1 slide. Karena kita akan
membuat 6 slide presentasi, maka kita tambahkan 5 slide lagi dengan mengeklik
tanda (+) atau klik kanan pada slide1 kemudian Insert Screen.
3. Jika ingin digunakan
background yang sama untuk semua slide, maka Anda gunakan background pada panel
Properties dan tidak perlu menggunakan layer khusus background.
4. Pada tutorial ini,
digunakan background yang berbeda untuk beberapa slide. Buat layer background,
kemudian gunakan Rectangle Tool, pilih warna sesuai dengan keinginan Anda. Jangan
lupa untuk mengunci layer background agar tidak bergerak ketika kita mengedit pada
objek-objek yang terdapat pada slide. Untuk mengunci, Anda klik gambar di
sebelah kanan teks background.
Gambar 5.1: Mengunci layer background
5. Tambahkan 2 layer dan beri nama:
teks_1 dan teks_2, pada layer teks_1 buat teks: “TRIK MEMBUAT ANIMASI”
sedangkan pada layer teks_2: “DENGAN FLASH 8”. Ubah masing-masing teks menjadi
Movie Clip dan tambahkan animasi Motion Tween, sehingga bentuk layer menjadi
seperti berikut:
Gambar 5.2 Susunan
layer dan urutan animasi Motion Tween
Keterangan:
a. Untuk layer background perlu ditambahkan frame
sampai dengan frame 25. Sebaiknya Anda ubah background menjadi Graphic (F8).
b. Layer teks_1: frame 1 sampai dengan frame 15
digunakan untuk menggerakkan teks_1 dari luar stage ke tengah-tengah stage
dengan Motion Tween. Frame 15 sampai frame 25 adalah animasi Motion Tween
dengan teks_1 berputar.
c. Layer teks_2: dimulai dari frame 15, setelah
teks_1 sampai tengah-tengah stage dan di tambahkan Motion Tween sampai frame
25.
6. Tambahkan 1 layer
dan beri nama action, Insert Keyframe (F6) pada frame terakhir (25) dan tekan
F9 untuk ke layar Actions dan tambahkan script stop(); untuk menghentikan
animasi.
7. Tambahkan 1 layer
dan beri nama tombol, kemudian buat atau masukkan tombol next dari Library.
Tombol ini digunakan untuk menuju ke slide berikutnya (slide 2). Anda juga
dapat menambahkan efek suara pada tombol.
8. Klik tombol, plih
menu Window _ Behaviours (Shift+F3). Setelah itu klik tanda (+) di kiri atas,
pilih Screen dan klik Go to Slide.
Gambar 5.3 Behaviours Go to Slide
9. Pilih presentation
dan klik slide2. Sebenarnya Anda dapat memilih submenu Screen → Go to Next
Slide secara langsung. Namun tujuan agar tidak memilih langsung mengunakan Go
to Next Slide adalah supaya Anda dapat memilih slide yang dituju tidak hanya
slide berikutnya, karena hal ini untuk mengantisipasi jika Anda ingin menuju
slide sembarang.
Gambar 5.4 Pilihan untuk
menuju ke slide 2
10. Slide presentasi akan
lebih menarik jika Anda berikan efek transisi, caranya: pilih slide 1 → klik
menu Window → Behaviours (Shift+F3) → klik tanda (+)→ Screen → Transition.
Gambar
5.5 Efek transisi slide
11.
Keluar kotak dialog dan pilih efek Fade.
Gambar 5.6 Jenis-jenis efek transisi slide
12. Untuk mengecek
tombol yang dibuat berfungsi atau tidak, Anda dapat mela-kukan test movie (Ctrl+Enter).
13. Selanjutnya kita
bekerja pada slide 2, dengan Rectangle Tool buat background yang berbeda dengan
background pada slide 1, kemudian kunci background.
14. Berikut ini adalah
susunan layer dan urutan animasi pada slide 2:
Gambar 5.7 Susunan layer pada slide 2
Keterangan:
a. Layer background
dibuat sampai dengan frame 20.
b. Pada layer teks_1
buat teks: “Untuk membuat animasi dengan Flash 8, Anda harus berlatih daluhu”.
Ubah teks menjadi tombol atau Button (F8) dan beri efek pada tombol. Berikan
efek Motion Tween sampai dengan frame 5, yang bergerak dari luarstage atas ke
stage bagian atas. Setelah itu tambahkan frame sampai dengan frame 20.
c. Pada layer teks_2
buat teks: “Animasi Dasar”. Ubah teks menjadi tombol atau Button (F8) dan beri
efek pada tombol. Berikan efek Motion Tween dari frame 5 sampai dengan frame
10, yang bergerak dari sebelah kiri luar stage ke tengah tengah stage.
d. Pada layer teks_3
buat teks: “Membuat Tombol”. Ubah teks menjadi tombol atau Button (F8) dan beri
efek pada tombol. Berikan efek Motion Tween dari frame 10 sampai dengan frame
15, yang bergerak dari sebelah kanan luar stage ke tengah tengah stage.
e. Pada layer teks_4
buat teks: “Mengontrol Movie Clip”. Ubah teks menjadi tombol atau Button (F8)
dan beri efek pada tombol. Berikan efek Motion Tween dari frame 15 sampai
dengan frame 20, yang bergerak dari sebelah kiri luar stage ke tengah tengah stage.
f. Pada layer action,
tambahkan keyframe (F6) pada frame 20, kemudian berisi scipt stop(); pada frame
20 (F9).
g. Pada layer tombol,
buat frame sampai dengan frame 20, kemudian masukkan tombol dari Library.
Tombol ini digunakan untuk menuju ke slide slide sebelumnya (slide 1). Pilih
tombol → klik menu Window → Behaviors (Shift+F3). Klik tanda (+) di kiri atas →
Screen → Go to Slide. Pilih presentation → slide1.
Gambar 5.8 Pilihan untuk ke Slide 1
15. Klik pada tombol di layer teks_2 kemudian pilih
menu Window _ Behaviors (Shift+F3). Klik tanda (+) di kiri atas → Screen → Go
to Slide. Pilih presentation → slide3.
16.
Berikut kotak dialog untuk tombol_1.
Gambar 5.9
Pilihan untuk ke slide 3
17. Dengan cara yang sama lakukan pula untuk tombol pada layer teks_3
dan teks_4. Hanya saja tombol pada layer teks_3 menuju ke slide 4 sedangkan
tombol pada layer teks_4 menuju ke slide 5. Anda dapat melakukan test movie
(Ctrl+Enter) untuk me-ngecek apakah tombol yang dibuat sudah dapat berfungsi
atau belum.
18. Selanjutnya kita bekerja pada slide 3. Slide 3 merupakan submenu
Animasi Dasar. Untuk background pada slide 3 sampai dengan slide 5 sama dengan
slide 2. Agar sama, maka kita Copy background yang ada pada slide 2. Buka
terlebih dahulu kunci yang ada pada layer background slide 2. Kemudian klik
layer background frame 1 pada slide 2 →
Copy (Ctrl+C) → Paste (Ctrl+V) pada layer
1 frame 1 slide 3 atau Paste in Place (Ctrl+Shift+V) agar letak objek tidak
berubah. Ubah nama layer menjadi background.
19. Berikut ini susunan layer pada slide 3
Gambar 5.10: Susunan awal layer slide 3
Keterangan:
a. Layer background dibuat satu frame saja dan kunci
layer.
b. Layer teks, berisi judul: “Animasi Dasar” dan isi:
“Animasi dasar terdiri dari: animasi Motion Tween, Shape Tween dan Motion
Guide”.
c. Dalam layer tombol terdapat dua tombol yaitu
tombol untuk menuju slide 2 dan tombol untuk menuju slide 4. Gunakan Behaviors
pada langkah ini.
Gambar 5.11
Behaviors untuk tombol pada slide 3
d. Tambahkan efek
Blinds pada slide 3. Caranya: Pilih slide 3 →
Window
_ Behaviors→
keluar
kotak dialog dan pilih Blinds.
Gambar 5.12 Menambahkan efek Blinds pada slide 3
20. Selanjutnya kita bekerja pada
slide 4. Susunan layer pada slide 4 sama dengan slide 3, yang berbeda hanya
pada isi teks dan tombol. Berikut ini susunan layer pada slide 4:
Gambar 5.13 Susunan layer pada slide 4
Keterangan:
a. Background sama
dengan slide 2 dan 3.
b. Layer teks, judul:
“Membuat Tombol” dan isi: “Untuk membuat tombol Anda dapat menggunakan teks,
gambar ataupun gabungan antara teks dan gambar”.
c. Dalam layer tombol
terdapat dua tombol yaitu tombol untuk menuju slide 3 dan tombol untuk menuju
slide 5.
d. Tambahkan efek transisi Photo pada slide 4.
21. Susunan layer pada slide 5 juga
sama dengan slide 3 dan 4.
Gambar 5.14: Susunan layer pada slide 5
Keterangan:
a. Background sama dengan slide 2, 3 dan 4.
b. Layer teks, judul: “Mengontrol Movie Clip” dan
isi: “Movie Clip memiliki peran penting dalam pembuatan animasi. Dengan Movie
Clip objek-objek dalam flash dapat dikontrol dengan baik dan dapat dibuat
animasi yang menarik dan nteraktif”.
c. Dalam layer tombol terdapat dua tombol yaitu tombol
untuk menuju slide 4 dan ombol untuk menuju slide 6.
d. Tambahkan efek transisi Wipe pada slide 5.
22. Untuk slide 6, dibuat berbeda dengan slide-slide
sebelumnya. Berikut susunan layer pada side 6
Gambar 5.15 Susunan akhir layer pada slide 6
Keterangan:
a. Background pada layer 6 sama dengan background
pada slide 1. Tambahkan frame (F5) sampai dengan frame 30.
b. Layer teks_1, isi teks: “Trik lebih lanjut”. Buat
animasi Motion Tween, sampai dengan frame 5, teks bergerak dari sebelah kiri
stage ke sebelah kanan stage, dari frame 6 sampai dengan frame 15, teks bergerak
dari sebelah kanan stage ke tengah tengah stage dan dari frame 16 sampai dengan
frame 30, teks kembali lagi ke posisi semula.
c. Layer teks_2, isi teks: “Banyak berlatih”. Tambahkan
keyframe (F6) sampai dengan frame 10. Setelah itu teks dihapus.
d. Layer teks_3, isi teks: “Mencari tutorial-tutorial
di internet”. Tambahkan keyframe (F6) pada frame 11 sampai dengan frame 20.
e. Layer teks_4, isi teks: “Mengikuti forum-forum
tentang animasi Flash”. Tambahkan keyframe (F6) pada frame 21 sampai dengan
frame 30.
f. Layer bintang: buat bintang di akhir presentasi
dan letakkan di tengah stage. Tambahkan keyframe (F6) sampai dengan frame 11,
setelah itu pilih bintang dan ganti warna menjadi biru. Tambahkan keyframe (F6)
sampai dengan frame 21, 8 kemudian pilih bintang dan ganti warna menjadi merah.
Tambahkan keyframe (F6) kembali sampai dengan frame 30, kemudian pilih bintang
dan ganti warna menjadi kuning (warna semula).
g. Layer tombol: berisi satu tombol saja, yaitu hanya
tombol untuk menuju ke slide sebelumnya. Tambahkan keyframe (F6) pada frame 30,
agar tombol tidak berkedapkedip saat dilakukan test movie.
h. Lakukan test movie (Ctrl+Enter) untuk melihat
hasil slide presentasi yang Anda buat.
i. Jika Anda ingin menambahkan efek suara pada
tombol, maka Anda klik dua kali tombol yang ingin beri efek suara, setelah itu
tambahkan satu layer dan beri nama layer suara. Drag file suara yang sudah ada pada
Library ke stage. Pastikan bahwa Anda hanya menambahkan keyframe (F6) pada efek
Down saja, yang mengakibatkan tombol berbunyi jika ditekan.
Gambar 5.16 Menambahkan suara pada tombol
j. Anda cukup menambahkan suara dua kali saja, yaitu
pada tombol untuk menuju slide sebelum dan sesudahnya.
k. Lakukan test movie (Ctrl+Enter) untuk melihat
hasil suara yang sudah Anda tambahkan pada tombol.
Langkah-langkah pada tutorial ini hanyalah salah satu
contoh saja. Kini Anda dapat mengkreasi sendiri slide-slide presentasi yang
Anda buat dengan menambahkan background, suara atau tombol yang menarik.
Pemilihan warna berpengaruh terhadap slide presentasi yang Anda buat, sehingga
perhatikan dengan baik ketika Anda akan memilih warna.
Bab 6.
Navigasi
Dalam
perancangan media pembelajaran, navigasi berarti bahwa sebuah tombol ditujukan
untuk melakukan sesuatu atau menuju ke suatu posisi yang dirancang dengan
bantuan action script.. Navigasi
secara umum adalah bantuan arah untuk melakukan sesuatu atau menuju ke suatu
tempat atau posisi. Navigasi untuk
melakukan sesuatu disebut dengan navigasi tindakan, sedangkan navigasi untuk ke
suatu posisi disebut dengan navigasi posisi.
Contoh navigasi tindakan adalah play
dan stop. Navigasi posisi dapat berupa navigasi frame, layer dan scene.
Dalam
perancangan navigasi diperlukan tombol (button)
yang digunakan sebagai kunci mulainya navigasi.
Macromedia Flash telah menyediakan tombol yang tersimpan dalam Library.
Tombol tersebut langsung dapat digunakan dengan cara menyeretnya (drag) ke stage. Tombol lainnya adalah
tombol kreasi sendiri. Tombol ini dapat
berupa teks, gambar, ataupun kombinasi keduanya.
A. TOMBOL (BUTTON)
1. Tombol dalam Library
Macromedia
Flash telah membekali berbagai bentuk tombol tersimpan dalam panel Library yang dapat digunakan
pengguna. Panel library dapat dibuka dengan cara klik menu Windows > Common Library > Buttons.
Gambar 5.1. Menu Windows > Common Library > Buttons
Gambar 5.2. Pilihan
tombol (button) dalam panel Library
Berikut cara penggunaan tombol yang tersedia dalam panel Library.
1.
Buka menu tombol (button)
dalam panel Library. Klik windows >
Common Libraries > Buttons.
Hasilnya akan tampil menu Library buttons.
2.
Menggunakan scroll
vertikal pada library buttons,
misalnya cari classic button.
Gambar 5.3. Menu classic buttons
3.
Lakukan klik ganda mouse
pada folder pada classic button dan
misalnya cari playback, pilih gel stop. Pada library buttons
akan muncul tombol bujur sangkar berwarna hitam dan background lingkaran warna
hijau.
Gambar 5.4. Tombol classic buttons > Playback > gel stop
4.
Klik dan tarik tombol (drag) gel
stop ke stage.
5. Tombol
gel stop telah siap untuk diisi action script dengan menggunakan panel Actions
Gambar 5.5. Posisi panel Actions
Gambar 5.6. Panel Actions untuk frame.
2. Tombol kreasi sendiri
Tombol
kreasi sendiri adalah tombol yang desain dan action script tombol dirancang sendiri. Desain tombol adalah bentuk atau tampilan
tombol sedangkan action script tombol
adalah program atau kerja tombol tersebut.
Berikut contoh pembuatan sebuah tombol kreasi sendiri:
1. Membuat sebuah persegi dalam stage dengan
bantuan Rectangle Tool pada
panel tools. Sebelumnya tentukan warna
Stroke dan Fill pada bagian bawah panel Tools, misalnya
Gambar 5.7. Pilihan stroke dan fill color pada panel color
Beri warna kosong
untuk Stroke.
Gambar 5.8. Pilihan warna kosong pada stroke
Pilih warna biru atau kode warna #0066FF untuk Fill.
Gambar 5.9. Pilihan warna biru pada Fill
Gambar 5.10. Tombol bentuk persegi kreasi sendiri
2. Ketik ”Menu 1” di atas gambar persegi
menggunakan Text Tool pada panel
tool
Gambar
5.11. Tombol Menu 1 kreasi sendiri
3. Seleksi persegi dan teks menggunakan Selection Tool dalam panel tool.
Gambar 5.12. Tombol Menu 1 kreasi sendiri telah
terseleksi
4. Klik menu Modify
> Convert to Symbol. Pada jendela Convert to Symbol beri nama ”Button
Menu 1”, pilih Button pada
Type, pada Registration pilih
titik tengah, dan klik OK. Sekarang persegi dan teks yang baru
dibuat telah menjadi Button.
Gambar 5.13. Menu Convert
to symbol tombol Menu 1
5. Tombol Menu
1 telah siap untuk diisi action script
dengan cara yang sama pada cara penggunaan tombol yang tersedia dalam panel Library langkah ke lima.
Tombol kreasi sendiri dapat
dimodifikasi lebih lanjut dengan memberikan efek perubahan saat tombol diam,
kursor tepat di atas tombol, tombol pada saat ditekan atau diklik, dan tombol
saat setelah ditekan atau diklik.
Keempat posisi tombol tersebut terangkum dalam tabel berikut.
Tabel 5.1.
Perbedaan Up, Over, Down, dan Hit
Keadaan
tombol
|
Arti
|
Up / Ke atas
|
Tampilan tombol ketika kursor
tidak melewatinya. Dengan kata lain,
tombol tidak dikanai tindakan apapun atau tombol diam
|
Over / Atas
|
Tampilan tombol ketika kursor
ditempatkan di atas tombol
|
Down / Ke bawah
|
Tampilan tombol ketika tombol selesai diklik atau ditekan
|
Hit / Tekan
|
Tampilan
tombol tepat saat diklik mouse
|
Berikut langkah
pembuatannya dengan melanjutkan langkah pembuatan tombol kreasi sendiri.
1. Klik ganda mouse pada tombol Menu 1. Perhatikan
perubahan pada Timeline, frame yang ada bukan berupa angka tapi Up,
Over, Down dan Hit.
Gambar
5.14. Tampilan timeline tombol Up,
Over, Down dan Hit
2. Klik kanan mouse dan pilih Insert Keyframe pada
frame Over dan Down.
Gambar
5.15. Pilihan tombol down
3. Klik frame
Over lalu klik gambar persegi pada Stage. Ganti warna gambar persegi
menjadi warna jingga atau masukkan kode warna #FFCC00.
Gambar
5.16. Pilihan warna untuk tombol over
4. Klik tulisan Menu 1 pada Timeline
untuk memindahkan area kerja kembali ke Menu 1.
Gambar
5.17. Pilihan tombol up
5. Klik Control
> Test Scene untuk mencoba tombol.
Alangkah baiknya jika dalam pembuatan media
pembelajaran, untuk tujuan yang serupa bentuk tombol yang digunakan konsisten
sehingga memudahkan pengguna dalam mengartikan sebuah tombol. Berikut cara menggandakan atau menduplikasi
tombol yang telah dibuat untuk tombol-tombol yang lain dengan tujuan yang
serupa.
1. Buka panel Library
atau pilih Windows>Library, library
tempat Button Menu 1 berada. Contoh Library-Latihan.
Gambar 5.18. Panel Library-Latihan
2. Klik kanan mouse pada Button Menu 1 pada Library,
pilih Duplicate.
Gambar
5.19. Menu duplicate untuk Button Menu 1
3. Muncul kotak
Duplicate Symbol, tuliskan”Button Menu 2” dan klik OK.
Gambar
5.20. Kotak Duplicate Symbol
Selanjutnya
panel Library telah bertambah satu buah button baru.
Gambar
5.21. Button Menu 2 dalam panel Library-Latihan
4. Untuk mengedit tulisan pada tombol, klik ganda Button Menu 2 pada panel Library.
Gambar
5.22. Tampilan pada stage akan berubah menjadi
gambar tombol yang akan diedit.
5. Ganti tulisan pada tiap-tiap frame menjadi ”Menu 2”
menggunakan Text Tool dalam
panel tools
Gambar
5.23. Penggantian nama tombol
6. Klik Selection Tool, klik kembali
tulisan Menu 1 pada timeline untuk memindahkan
area kerja kembali ke Menu 1. Tampilan Stage akan kembali ke Menu
1.
Gambar
5.24. Button Menu 2
7. Klik dan tarik Button Menu 2 dari Library
ke Stage. Letakkan sesuai
dengan rancangan, misalnya di bawah tombol
Menu 1.
Gambar
5.25. Contoh tatanan tombol Menu 1 dan Menu 2
8. Klik Control >Test Scene untuk mencoba tombol.
B. NAVIGASI
Navigasi
secara umum adalah bantuan arah untuk melakukan sesuatu atau menuju ke suatu
tempat atau posisi. Dalam perancangan
media pembelajaran, navigasi berarti bahwa sebuah tombol ditujukan untuk
melakukan sesuatu atau menuju ke suatu posisi yang dirancang dengan bantuan action script. Untuk memudahkan penyebutan, navigasi untuk
melakukan sesuatu akan disebut dengan navigasi tindakan, sedangkan navigasi
untuk ke suatu posisi akan disebut dengan navigasi posisi. Contoh navigasi tindakan adalah play dan stop. Navigasi posisi dapat berupa
navigasi frame, layer dan scene.
1. Navigasi tindakan
a. Navigasi play.
1. Klik
gambar tombol play pada stage.
2.
Klik panel Actions yang terdapat di bawah
layar, atau pilih window > Actions.
3.
Pada panel Actions > Global Functions >
Movie Clip Control > on
4.
Klik release
pada menu pilihan yang muncul.
Gambar
5.26. Pemilihan release
5. Klik mouse
di tengah tanda kurung kurawal
6.
Klik
ganda pada pilihan play
Gambar 5.27. Pemilihan play
7. Script akan
tampak sebagai berikut.
Gambar
5.28. Script untuk tombol play
b. Navigasi stop.
1. Klik
gambar tombol stop pada layar.
2.
Klik panel Actions > Global Functions >
Movie Clip Control > on
3.
Klik release
pada menu pilihan yang muncul.
Gambar
5.29. Pemilihan release
4. Klik di tengah tanda kurung kurawal
5. Klik
ganda pada pilihan stop
Gambar 5.30. Pemilihan stop
6.
Script akan
tampak sebagai berikut.
Gambar
5.31. Script untuk tombol stop
2. Navigasi posisi
a. Navigasi
frame
Navigasi frame merupakan navigasi yang bertujuan
ke atau posisi tujuannya adalah sebuah frame. Berikut contoh action script untuk navigasi frame yang diketik pada panel Action-Button.
1). Action
untuk berpindah dari suatu frame ke frame selanjutnya.
on (release) {
nextFrame();
}
2). Action untuk berpindah dari suatu frame ke frame sebelumnya.
on (release) {
prevFrame();
}
3). Action untuk berpindah ke frame
dengan label frame. Contoh label frame adalah judul yang terletak pada frame 1.
on (release) {
gotoAndStop(“judul”,1);
}
Cara membuat label pada frame
(misal, frame judul):
1. Klik
frame 5 (atau nomor antara range 1
sampai dengan 10)
2. Klik
menu window > properties atau klik panel properties di bawah stage
3. Klik
kotak label
4. Ketikan
kata judul
5. Tekan
enter
Gambar 5.32.
Kotak properties
b. Navigasi
layer
Navigasi layer merupakan navigasi
yang bertujuan ke atau posisi tujuannya adalah sebuah layer. Berikut contoh action script untuk navigasi layer yang diketik pada panel Action-Button. Contoh nama layer adalah isi yang dimulai pada frame 1.
on (release) {
gotoAndPlay(“isi”,1);
}
c. Navigasi scene
Navigasi scene
merupakan navigasi yang bertujuan ke atau posisi tujuannya adalah sebuah scene.
Berikut contoh action
script untuk navigasi scene yang diketik pada panel Action-Button. Contoh nama scene adalah materi yang
dimulai pada frame 1.
on (release) {
gotoAndPlay(“materi”,1);
}
Bab 9. Suara
Selain animasi grafik, efek suara (sound f/x)
merupakan elemen lain yang dapat Anda tambahkan pada animasi Flash Anda. Di bab
ini Anda akan mempelajari script yang berhubungan dengan pengaturan suara.
9.1
Equalizer
Feature ini banyak digunakan oleh movie yang
menggunakan musik. Di latihan ini, Anda akan membuat equalizer yang dapat
memilih lagu dan mengatur volume suara. Jalankan file “Sound equalizer
finish.swf”. Cobalah menyem-bunyikan equalizer-nya dengan mengklik teks “HIDE”.
Tampilkan kembali dengan mengklik tombol “SHOW”.
Gambar 9.1. Equalizer.
1. Bukalah file “Sound equalizer start.fla”.
Penulis sudah menyusun objek-objek yang akan Anda gunakan, sehingga Anda bisa
fokus ke script-nya.
2. Klik dua kali pada instance simbol “Equalizer”
untuk masuk ke timeline simbol ini.
3.
Klik frame pertama pada layer “Scripts”, kemudian berikan script berikut.
stop();
Script ini adalah untuk menahan tampilan movie clip
ini di frame pertama, sehingga Anda dapat melihat panel equalizernya.
4.
Klik frame ke-5 pada layer “Scripts”, berikan script berikut.
stop();
Script di atas menahan tampilan movie clip di frame ke-5, yaitu
pada saat panel equalizer-nya disembunyikan.
5. Pastikan Anda masih
berada di timeline instance simbol “Equalizer”. Di stage terdapat
instance simbol “Panel”. Klik dua kali instance simbol ini untuk masuk
ke timeline-nya. Di stage ada sebuah instance simbol “Bar” dengan nama
instance “Bar”. Lihat Gambar 9.2.
Gambar 9.2. Timeline simbol “Panel”.
6. Supaya musiknya
dapat dimainkan dengan ActionScript, Anda perlu mengisi option Identifier objek
musik di panel Library. Untuk itu, klik kanan objek sound “track1.wav”,
kemudian dari menu pop up yang muncul, pilihlah Linkage.
7. Di kotak dialog Linkage Properties, aktifkan
option Export for ActionScript. Beri nama identifier-nya dengan nama “track1”.
Gambar 9.3. Memberi nama identifier objek sound “track1.wav”.
8.
Lakukan hal yang sama pada objek musik “track2.mp3” dan “track3.mp3”.
9. Anda akan melakukan
inisialisasi variabel di frame pertama pada layer “Scripts”. Untuk itu,
klik frame pertama pada layer “Scripts”, lalu berikan script berikut
ini.
var Music_on : Boolean =
true;
var Track_number : Number =
1;
var My_sound : Sound = new
Sound();
var Hide : Boolean = false;
My_sound.attachSound("track"
+ Track_number);
My_sound.start(0,999);
Status_txt =
"TRACK" + Track_number;
Script di atas menginisialisasi
variabel Music_on, yang akan menentukan apakah musiknya sedang dimainkan
atau dimatikan. Variabel ini pertama-tama diset bernilai true, yang
berarti musiknya dimainkan.
Variabel Track_number
berfungsi untuk mencatat nomor musik yang sedang dimainkan. Di latihan ini,
penulis menyediakan tiga buah musik yang akan Anda gunakan. Isi dari variabel Track_number
ini nantinya akan digunakan untuk menampilkan informasi musik yang sedang
dimainkan.
Variabel My_sound digunakan untuk memilih lagu
yang akan dimainkan.
Variabel Hide digunakan untuk menyimpan
kondisi equalizer, apakah sedang ditampilkan atau disembunyikan. Pertamatama variabel
ini diset false, yang berarti equalizer-nya sedang ditampilkan.
10. Klik frame ke-2 pada layer “Scripts”,
kemudian berikan perintah berikut ini.
Bar._visible = false;
var Max_lines : Number = 30;
var atmp : Number = 20;
var i : Number = 0;
var Bar_scale, newy :
Number;
if (Music_on == true)
{
Bar_scale = 100;
}
else
{
Bar_scale = 0;
}
while (i < Max_lines)
{
newy = 1 +
Math.round(Bar_scale * Math.random());
duplicateMovieClip("Bar",
"Bar" + i, 10 + i);
setProperty("Bar"
+ i, _x, -110 + i*7);
setProperty("Bar"
+ i, _y, 13);
setProperty("Bar"
+ i, _yscale, newy);
setProperty("Bar"
+ i, _alpha, atmp + i*3);
i++;
}
Script di atas mula-mula menyembunyikan instance
simbol “Bar”. Di frame ini, penulis menentukan jumlah bar pada equalizer-nya
sebanyak 30 buah. Jumlah bar maksimum ini disimpan di variabel Max_lines.
Variabel atmp berfungsi untuk menyimpan nilai alpha movie clip hasil
duplikasi yang pertama kali, yaitu sebesar 20.
Selanjutnya dilakukan penduplikasian instance simbol
“Bar” sebanyak 30 kali. Untuk masing-masing duplikat, nilai property _yscale
ditentukan secara random.
11. Kliklah frame ke-3 pada layer “Scripts”,
kemudian berikan script berikut ini.
gotoAndPlay(2);
Script tersebut akan mengarahkan playhead di timeline
ke frame 2. Akibatnya, movie akan menampilkan kembali bar pada equalizer secara
random.
12. Berikan perintah Control
> Test Movie untuk melihat hasil kerja Anda. Sekarang equalizer Anda
sudah bekerja. Langkahlangkah berikut akan menyempurnakan equalizer Anda.
13.
Klik tombol Stop pada layer “Stuffs”, lalu berikan scripts berikut
ini.
on (release) {
stopAllSounds();
Music_on = false;
}
Setelah Anda mengklik tombol ini, musiknya akan dimatikan dengan
function stopAllSounds(). Lalu variabel Music_on diset menjadi false.
Ini akan menyebabkan bar pada equalizer digambar dengan nilai _yscale hanya
1% dari ukuran sebenarnya.
14.
Klik tombol Play , kemudian berikan instruksi berikut ini.
on (release)
{
if (Music_on == false)
{
Music_on = true;
My_sound.attachSound("track"
+ Track_number);
My_sound.start(0, 999);
Status_txt =
"TRACK" + Track_number;
}
}
Tombol ini berfungsi untuk menyalakan kembali
musiknya. Ini dilakukan dengan memasukkan nilai true ke dalam variabel Music_on.
Kemudian objek My_sound memilih dan memainkan kembali musik yang
sebelumnya dimatikan. Script di atas juga menampilkan informasi musik yang
sedang dimainkan di variabel Status_txt.
15. Berikan perintah Control
> Test Movie untuk melihat hasil kerja Anda sampai sejauh ini. Sekarang
Anda dapat mematikan dan memainkan kembali musik nya.
16.
Klik tombol Next , kemudian berikan script berikut ini.
on (release)
{
if (Track_number < 3)
{
Track_number++;
if (Music_on == true)
{
stopAllSounds();
My_sound.attachSound("track"
+
Track_number);
My_sound.start(0, 999);
}
Status_txt =
"TRACK" + Track_number;
}
}
Pada script berikut ini dilakukan penambahan nilai
pada variabel Track_number, sehingga movie akan memainkan musik berikutnya.
17.
Klik tombol Previous , kemudian berikan script berikut ini.
on (release)
{
if (Track_number > 1)
{
Track_number--;
if (Music_on == true)
{
stopAllSounds();
My_sound.attachSound("track"
+
Track_number);
My_sound.start(0, 999);
}
Status_txt =
"TRACK" + Track_number;
}
}
Proses yang dilakukan di sini adalah kebalikan dari
tombol Next. Di sini dilakukan pengurangan nilai pada variabel Track_number,
sehingga movie akan memainkan musik sebelumnya.
18. Berikan perintah Control
> Test Movie untuk melihat hasilnya sejauh ini. Sekarang Anda dapat
memilih lagu sebelumnya dan lagu berikutnya.
19. Pastikan Anda masih
berada di timeline instance simbol “Panel”. Kemudian klik dua kali
instance simbol “fader-gain”.
20. Klik frame pada
layer “Scripts” lalu carilah baris yang berisi script berikut.
sound.setVolume(level);
21.
Gantilah script tersebut dengan script ini.
_parent.My_sound.setVolume(level);
22. Berikan perintah Control
> Test Movie untuk melihat hasilnya sejauh ini. Sekarang Anda dapat
mengatur volume-nya.
23. Kembalilah ke timeline instance simbol “Panel”.
Klik dua kali instance simbol “Hide” untuk masuk ke dalam timeline-nya.
24. Di stage terdapat instance simbol “Hide button”.
Pastikan instance simbol ini terpilih, kemudian berikan script berikut ini.
on (release)
{
_parent.Hide =
!(_parent.Hide);
if (_parent.Hide == true)
{
Hide_txt = "SHOW";
}
else
{
Hide_txt = "HIDE";
}
_parent._parent.play();
}
Script di atas berfungsi menyembunyikan atau
menampilkan equalizer-nya. Script tersebut juga menampilkan teks “SHOW” jika
equalizer-nya sedang disembunyikan, dan menampilkan teks “HIDE” jika
equalizer-nya sedang ditampilkan.
25. Berikan perintah Control
> Test Movie untuk melihat hasil akhir equalizer Anda.
9.2 Piano
Pada latihan ini, Anda akan memainkan musik secara random.
Jalankan file “Piano finish.swf” untuk melihat hasil akhirnya.
1. Bukalah file “Piano
start.fla”. Di stage terdapat lima
tut piano yang akan Anda “tekan” secara random menggunakan Action- Script.
2. Lihatlah panel
Library Anda. Di sana terdapat lima objek sound dengan nama “01.wav”,
“02.wav”, “03.wav”, “04.wav”, dan “05.wav”.
3. Klik kanan pada
objek sound “01.wav”, kemudian pilihlah Linkage. Di kotak dialog
Linkage Properties, aktifkan Export for ActionScript. Beri nama
identifier-nya “s1”. Lihat Gambar 9.4.
Gambar 9.4. Memberi nama identifier objek sound “01.wav”.
4. Untuk objek sound
yang lain, beri nama identifier-nya dengan “s2”, “s3”, “s4”,
dan “s5”.
5.
Klik frame pada layer “Scripts”. Lalu berikan script berikut ini.
// Vibphone Sound
var mySound : Sound = new
Sound();
function ting()
{
var acak : Number = 1 +
Math.round(4*Math.random());
var idName : String =
"s" + acak;
mySound.attachSound(idName);
mySound.start(0,1);
_root["tuts" +
acak + "_mc"].gotoAndPlay(2);
}
setInterval(ting,300);
Di script ini Anda mendefinisikan function bernama “ting()”,
yang akan menghasilkan bilangan acak dengan range dari 1 sampai 5. Bilangan
inilah yang akan menentukan tuts yang mana yang harus dimainkan. Script
tersebut menggunakan function setInterval() untuk mengatur kecepatan
pianonya dimainkan.
6. Berikan perintah Control > Test Movie untuk
melihat hasil akhir piano Anda.
