teknik mendesain dan contoh membuat macromedia flash.amir
TRANSCRIPT
TEKNIK MENDESAIN DAN CONTOH MEMBUAT
MACROMEDIA FLASH
DISUSUN OLEH :
1. MUHAMAD AMIR (NIM : 09.111.103)
2. ALAMSYAH
JURUSAN TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
INSTITUT KEGURUAN DAN ILMU PENDIDIKAN
(IKIP) MATARAM
2012
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 2
BAB I
PENDAHULUAN
A. Latar Belakang
Pada saat sekarang ini banyak sekali bermunculan berbagai media pembela-
jaran. Media pembelajaran itu sendiri dapat diartikan sebagai Alat, metode,
dan teknik yang digunakan dalam rangka lebih mengefektifkan komuni-
kasi dan interaksi antara guru dan siswa dalam proses pendidikan dan
pengajaran di sekolah. Atau media pembelajaran dapat juga diartikan se-
bagai suatu alat pembantu secara efektif yang dapat digunakan oleh
guru untuk mencapai tujuan yang diinginkan. Salah satu media pembelaja-
ran yang banyak digunakan sekarang adalah media pembelajaran berba-
sis komputer. Bagian-bagian yang sebaiknya terdapat dalam media pembe-
lajaran berbasis komputer adalah materi yang berisi konsep-konsep yang
akan disampaikan, contoh soal yang membimbing siswa agar lebih ak-
tif, soal latihan yang berisi tempat siswa memasukan jawaban dan nilai
akhir siswa. Bagian-bagian media sangat dianjurkan memiliki tampilan
lebih familiar dengan pengguna. Sehingga diperoleh kesan pengguna
nyaman dalam menggunakan media. Selain itu seni menyampaikan san-
gat mempengaruhi gaya tampilan media. Salah satu program yang ba-
nyak digunakan dalam membuat media pembelajaran yang berisi anima-
si, grafik, teks dan suara adalah Macromedia Flash.
Nah, di sini penyusun akan mencoba membahas lebih lanjut tentang Macro-
media Flash yang meliputi Pengertian Macromedia Flash, Teknik Mendesain
serta Contoh membuat Macromedia Flash.
B. Rumusan Masalah
Adapaun rumusan masalah yang akan kami identifikasi adalah :
1) Apa pengertian dari Macromedia Flash ?
2) Bagaimana Teknik Mendesain Macromedia Flash ?
3) Seperti apa contoh membuat Macromedia Flash?
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 3
C. Tujuan
Adapun tujuan dari makalah ini adalah :
1) Untuk mengetahui pengertian dari Macromedia Flash.
2) Untuk dapat lebih memahami Teknik Mendesain Macromedia Flash.
3) Untuk mengetahui seperti apa contoh membuat Macromedia Flash.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 4
BAB II
PEMBAHASAN ISI
A. Pengertian Macromedia Flash
Macromedia Flash adalah program untuk membuat animasi dan apli-
kasi web profesional. Bukan hanya itu, Macromedia Flash juga banyak
digunakan untuk membuat game, animasi kartun, dan aplikasi multime-
dia interaktif seperti demo produk dan tutorial interaktif. Software kelu-
aran Macromedia ini merupakan program untuk mendesain grafis anima-
si yang sangat populer dan banyak digunakan desainer grafis. Kelebihan
flash terletak pada kemampuannya menghasilkan animasi gerak dan sua-
ra. Awal perkembangan flash banyak digunakan untuk animasi pada web-
site, namun saat ini mulai banyak digunakan untuk media pembelajaran ka-
rena kelebihan-kelebihan yang dimiliki. Macromedia Flash merupakan ga-
bungan konsep pembelajaran dengan teknologi audiovisual yang mampu
menghasilkan fitur-fitur baru yang dapat dimanfaatkan dalam pendidi-
kan. Pembelajaran berbasis multimedia tentu dapat menyajikan materi pela-
jaran yang lebih menarik, tidak monoton, dan memudahkan penyam-
paian. Peserta didik dapat mempelajari materi pelajaran tertentu secara
mandiri dengan komputer yang dilengkapi program multimedia.
Macromedia Flash memiliki sejumlah kelebihan. Beberapa kelebihan
Macromedia Flash antara lain :
1. Animasi dan gambar konsisten dan fleksibel untuk ukuran jendela
dan resolusi layar berapapun pada monitor pengguna.
2. Kualitas gambar terjaga.
3. Waktu kemunculan (loading time) program relative cepat.
4. Program yang dihasilkan interaktif.
5. Mudah dalam membuat animasi.
6. Dapat diintegrasikan dengan beberapa program lain.
7. Dapat dimanfaatkan untuk membuat film pendek atau kartun, presentasi,
dan lain-lain.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 5
B. Teknik Mendesain Macromedia Flash
1) Area Kerja Macromedia Flash MX
Macromedia Flash MX mempunyai area kerja yang terdiri dari bagian-
bagian pokok yaitu :
a. Menu
Berisi kumpulan instruksi atau perintah-perintah yang digunakan dalam
Flash MX. Terdiri dari menu File, Edit, View, Insert, Modify, Text,
Control, Window, Help.
b. Stage
Stage adalah layer (document dalam word) yang akan digunakan
meletakkan objek-objek dalam Flash.
c. Timeline
Timeline berisi frame-frame yang berfungsi untuk mengontrol objek
yang dibuat dalam stage atau layer yang akan dibuat animasinya.
d. Toolbox
Toolbox berisi tool-tool atau alat yang digunakan untuk membuat,
menggambar, memilih, menulis, memanipulasi objek atau isi yang ter-
dapat dalam stage (layer) dan timeline. Alat-alat yang terdapat dalam
toolbox adalah :
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 6
Arrow tool : memilih dan memindahkan object
Subselect tool : memilih titik-titik pada suatu objek atau garis
Line tool : membuat garis
Lasso tool : memilih sebagian dari object atau bagian ter-
tentu dari object
Pen tool : menggambar garis-garis lurus maupun garis
kurva
Text tool : menulis teks
Oval tool : membuat lingkaran
Rectange tool : membuat persegi maupun persegi panjang
Pencil tool : menggambar garis-garis bebas, seperti meng-
gunakan pensil biasa
Brush tool : berfungsi seperti kuas untuk mengecat me-
warnai suatu object
Fill Transform tool
: mengatur ukuran, tengah, arah dari warna
gradasi atau bidang suatu objek
Free Transform tool : mengubah dan memodifikasi bentuk dari ob-
jek yang dibuat bisa berupa memperbesar,
memperkecil ukuran objek.
Ink Bottle tool : menambah, memberi dan mengubah warna
pada garis di pinggir suatu objek (Stroke)
Paint bucket tool : menambah, memberi, mengubah warna pada
bidang objek yang dibuat
Eyedropper tool : mengidentifikasikan warna atau garis dala
sauatu objek
Eraser tool : menghapus area yang tidak diinginkan dari
suatu objek
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 7
Gambar: ToolBox
2) Dasar Objek Flash MX
Ketika menggambar objek dalam Flash seperti objek lingkaran, kotak,
oval dll, secara otomatis Flash akan menyediakan dua unsur objek, yai-
tu Fill (bidang objek) dan Stroke (bingkai/pinggir objek).
Gambar : Unsur Objek
3) Memilih atau Menyeleksi Objek
Objek dalam Flash terbagi dalam dua unsur yaitu Fill objek dan stroke
objek.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 8
Keterangan :
Gambar A : Objek belum diseleksi
Gambar B : Fill objek terseleksi
Gambar C : Stroke objek terseleksi
Gambar D : Fill dan Stroke objek terseleksi
Untuk melakukan penyeleksian objek, dilakukan dengan menggunakan
Arrow Tool yang terdapat dalam Tools Box, kemudian tinggal di klik
fill atau stroke dari objekyang akan diseleksi. Untuk menyeleksi seluruh
objek (fill dan stroke) double klik pada fill objek tersebut.Objek Terse-
leksi Pengaturan Stroke dan Fill dalam Menggambar Objek Objek da-
lam Flash dapat digambarkan dalam satu unsur saja, yaitu fill saja atau-
pun stroke saja.
4) Membuat Gradasi Warna
Untuk membuat contoh suatu gradasi warna ikuti langkah berikut :
a. Buatlah sebuah objek lingkaran pada stage.
b. Buatlah lingkaran tersebut tanpa stroke.
c. Seleksi objek lingkaran tersebut.
d. Klik tanda segitiga pada Panel Color Mixer. Jika Panel Color Mix-
er belum ada klik menu Window > Color Mixer kemudian tem-
patkan di bagian panel (bagian kanan stage).
e. Klik Fill Color, pilih warna hitam.
f. Klik Fill Style pilih Radial. Lingkaran akan berubah menjadi gra-
dasi putih hitam
Gambar A Gambar B Gambar C Gambar D
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 9
g. Ubahlah gradasi putih-hitam menjadi gradasi hitam-putih. Klik
Pointer Gradasi bagian kiri di Bar Gradasi kemudian klik Fill
Color dan ganti warnanya menjadi hitam.
h. Klik Pointer Gradasi bagian kanan lalu klik Fill Color ganti war-
nanya
menjadi putih.
Gambar . Panel Color Mixer dengan Gradasi Radial Putih-Hitam
Gambar. Hasil Gradasi Warna
5) Transformasi Objek
Untuk mengubah skala objek, langkahnya dalah sebagai berikut :
a. Buat objek segiempat di stage.
b. Seleksi seluruh objek.
c. Klik Free Transform tool pada toolbox
d. Drag salah satu titik sudutnya.
Skala objek juga dapat diubah dengan menggunakan Transfom Panel
yang ada di bagian kanan layar (Jika Transform Panel belum ada klik
Window > Transform. Pada Transform Panel masukan sebuah nilai 1
sampai 1000 untuk kolom lebar dan tinggi, kemudian tekan Enter.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 10
Gambar . Panel Transform
6) Memutar dan Memiringkan Objek
a. Seleksi seluruh objek
b. Klik Free Transform Tool pada toolbox
c. Klik option Rotate and Skew pada toolbox
d. Drag salah satu titik sudut dari objek untuk memutar objek.
e. Klik option Distort dan drag salah satu titik sudut untuk memiring-
kan objek
f. Dengan menggunakan Transform Panel. Klik Rotate dan isikan ni-
lainya untuk memutar objek. (Objek dapat diputar dengan Modify >
Transform > Rotate 900 CW atau 900 CCW untuk memutar objek
sebesar 900 searah jarum jam (CW) atau berlawanan jarum jam
(CCW).
Gambar . Option Free Transform Tool
g. Klik Distort pada Transform Panel dan isikan nilainya untuk me-
miringkan objek.
7) Menata Posisi Objek
a. Seleksi atau pilih objek yang akan dirapikan.
b. Klik Align Panel (Jika belum ada Klik Window > Align).
b. Klik icon To Stage di Align Panel untuK merapikan objek relatif
terhadap ukuran stage.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 11
c. Klik icon-icon yang ada di Align Panel pada perintah Align, Distri-
bute, atau Amtch Size untuk merapikan objek yang sudah dipilih
sesuai dengan kebutuhan.
Gambar . Align Panel
8) Pengolahan Teks
Teks digunakan untuk menerangkan atau menjelaskan sesuatu dalam
bentuk tulisan, pembuatan judul, komponen animasi, keterangan-
keterangan untuk movie interaktif. Teks merupakan bagian yang mem-
punyai perananl cukup besar dalam pembuatan animasi. Teks dapat di-
manipulasi atau dimodifikasi seperti halnya objek dalam Flash MX se-
suai dengan kebutuhan sehingga teks yang dihasilkan mempunyai ba-
nyak variasi. Teks dalam Flash ditulis dengan memggunakan bantuan
Text Tool pada Toolbox. Teks yang dihasilkan dapat di setting dengan
menggunakan Propeties Panel. Propeties Panels untuk teks berisi menu
atau atribut-atribut untuk membuat dan mengedit suatu teks.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 12
Flash MX mempunyai tiga tipe teks yang masing-masing mempunyai
fungsi yang berbeda. Tipe teks tersebut adalah sebagai berikut :
a. Static Text adalah jenis teks yang mempunyai karakter-karakter se-
perti teks biasa pada umumnya.
b. Dynamic Text adalah jenis teks yang dapat menampilkan sifat teks
yang dinamis dan bisa dikontrol, contohnya skor pertandingan olah
raga yang yang dapat berganti sesuai dengan perolehan nilai dari
pertandingan, nilai kurs mata uang dalam bursa efek, dll.
c. Input Text adalah jenis teks yang dapat diisi oleh pengguna atau
user dalam sebuah form isian atau Input Text digunakan untuk me-
nerima berbagai input dari user.
Teks yang ditulis atau dibuat dalam Flash orientasi dapat diubah sesuai
dengan kebutuhan. Orientasi teks dalam flash ada tiga macam, yaitu :
a. Horizontal, digunakan untuk membuat teks yang mengalir dari ki-
ri ke kanan secara horisontal seperti penulisan teks pada umum-
nya ( setting default).
b. Vertical Left-to-Right, digunakan untuk membuat teks yang men-
galir ke bawah secara vertikal dari kiri ke kanan.
c. Vertical Right-to-Left, digunakan untuk membuat teks yang men-
galir ke bawah dari kanan ke kiri.
9) Konsep Tentang Animasi
Animasi pada awalnya berupa kumpulan atau potongan gambar yang
ditampilkan bergantian secara cepat. Karena keterbatasan mata kita, ki-
ta tidak bisa membedakan setiap gambar yang satu dengan yang lainya
dan yang tampak dalam mata kita adalah sebuah gerakan yang disebut
animasi
10) Penggunaan Timeline
Didalam flash frame-frame dari animasi diletakkan dalam bagian time
line. Ditempat tersebut kita dapat mengatur frame yang digunakan un-
tuk animasi.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 13
didalam time line terdapat timeline header yaitu bagian yang terdapat
angka 1, 5, 10, dst itu berguna untuk menunjukkan letak frame. Jadi ji-
ka kita membuat sebuah animasi maka gerakan dari gambar akan di-
mulai dari frame ke satu, dilanjutkan kedua dan seterusnya hingga
animasi berakhir.
Playhead yang selanjutnya kita sebut sebagai penunjuk frame yaitu ga-
ris vertikal berwarna merah berguna untuk menunjukkan posisi dari
frame yang ditampilkan pada stage. Playhead dapat dipindah ke frame
yang kita inginkan cukup dengan mengklik frame tersebut. Misalnya
terdapat animasi bola yang bergerak dari kiri ke kanan
11) Penggunaan layer control
Didalam flash juga terdapat layer yang fungsinya sama dengan didalam
photoshop yaitu untuk memisahkan beberapa gambar atau animasi.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 14
New Layer
New layer digunakan untuk menambah layer di dalam timeline
Guide layer
Ada dua tipe dari layer yaitu mask dan guide. Keduanya digunakan un-
tuk animasi yang khusus dan akan dijelaskan pada bab selanjutnya.
Delete layer
Delete layer digunakan untuk menghapus layer.
Hide/Show layer
fungsinya sama dengan pada photoshop yaitu untuk menampilkan atau
menyembunyikan suatu layer
Lock/ Unlock layer
Kita bisa melindungi layer dengan cara menguncinya sehingga tidak
bisa kita ubah ketika kita sedang bekerja dengan layer lainnya.
Outline layer
Outline layer digunakan untuk menyembunyikan obyek dan hanya me-
nampilkan tepinya saja.
12) Keyframe Dan Fungsinya
Key Frame adalah frame yang berperan sebagai titik referensi, yang bi-
asanya menggambarkan momen waktu utama.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 15
agar suatu frame bisa diedit, misalnya dimasukkan gambar, diberi war-
na, tulisan dll maka frame tersebut harus diberi keyframe. Jadi key-
frame merupakan syarat mutlak pada suatu frame agar frame tersebut
bisa diisi atau diedit. Jika frame tersebut tidak mempunyai keyframe
maka tidak bisa dilakukan pekerjaan apapun terhadapnya.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 16
C. Contoh Membuat Animasi Macromedia Flash
Contoh animasi-animasi yang bisa kita ciptakan dari program Macromedia
Flash sangatlah beragam bentuk dan tampilannya tergantung dari kreatifitas
kita dalam mengembangkan desainnya.
Namun dalam makalah ini, penulis akan memberikan contoh membuat ani-
masi Macromedia Flash yang sederhana yang bisa menjadi dasar untuk
membuat media pembelajaran.
Membuat Animasi perpindahan (motion Tween)
Buka Flash 8 dan buat seperti berikut :
Ambil oval tool, klik fill tool dan pilih warna kiri bawah seperti gam-
bar kemudian buat lingkaran pada stage. Kemudian klik kanan di frame
20 dan pilih insert keyframe.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 17
Klik dua kali obyek lingkaran dan geser ke kanan. Klik frame diantara 1
dan 20. Misalkan frame 10. Klik kanan dan pilih Create Motion Tween.
Tekan CTRL + Enter untuk melihat hasilnya.
Membuat animasi perubahan bentuk (Motion Shape)
Buka halaman baru dengan klik file -> New. Buat gambar lingkaran
seperti contoh 1. Kemudian klik kanan pada frame 20 dan pilih in-
sert keyframe. Buat gambar persegi seperti gambar berikut.
Klik frame diantara 1 dan 20. Misalkan frame 10. Pilih shape pada kotak
Tween yang ada pada Properties. Tekan CTRL + Enter untuk melihat ha-
silnya.
Membuat animasi frame by frame.
Selain dengan Motion Tween dan Motion Shape, animasi juga dapat di-
buat dengan frame by frame. Frame by frame merupakan animasi
dengan manipulasi satu frame dengan frame berikutnya. Berikut con-
toh animasi sebuah bola jatuh ke lantai. Buat gambar lingkaran seperti
berikut:
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 18
Setelah buat gambar lingkaran dan sebuah garis sebagai lantai, lanjutkan
dengan mengklik kanan frame 2, pilih insert keyframe. Klik dua kali
obyek lingkaran dan tekan panah bawah pada keyboard lima kali.
Ini berarti posisi bola sudah bergerak sebesar lima ketukan ke ba-
wah. Kembali insert keyframe pada frame 3 dan pilih obyek ling-
karan, kemudian turunkan lima ketukan. Lanjutkan sampai obyek lingka-
ran menyentuh garis.
Untuk menaikkan kembali bola sebagai efek pantulan setelah me-
nyentuh lantai, pilih frame sebelah frame terakhir yang telah diisi lima
ketukan sebelum menyentuh lantai. Klik kanan frame ini dan pilih copy
frames. Klik kanan frame setelah frame terakhir dan pilih paste frames.
Jika posisi bola menyentuh lantai ada pada frame 10, maka kita meng-
copy frame 9 dan mempaste frames pada frame 11. Lanjutkan sam-
pai setengah dari jumlah frame sebelumnya. Ini lakuakan agar efek
pantulan bola adalah setengah tinggi sebelumnya. Untuk membuat
bola turun lagi, copy frame yang akan membuat obyek lingkaran
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 19
kembai turun. Lakukan sampai bola tidak berpantul lagi dengan posisi
terakhir bola adalah di lantai (tidak menggantung). Uji hasil dengan me-
nekan Ctrl+Enter.
Mengedit bentuk obyek.
Kita dapat mengubah bentuk obyek dengan selection tool. Bisa sudut
obyek yang digeser atau garis tepi yang diubah. Untuk mengubah su-
dut obyek, kita geser mouse ke sudut sampai muncul persegi pada
ujung mouse. Tarik sudut sambil ditekan ke arah yang diinginkan.
Untuk mengubah garis tepi, geser mouse ke garis tepi sampai mun-
cul garis pada ujung mouse. Tarik garis sambil ditekan ke arah yang di-
inginkan.
Stop, gotoAndPlay, button dan movie clip.
Untuk membuat media pembelajaran interaktif, kita membutuhkan
sebuah tombol (button). Berikut contoh membuat interaktif pada flash:
Buat sebuah obyek dengan dengan rectangle tool dan beri tulisan next.
Atur besar tulisan dengan font size. Pilih semua obyek dengan selection
tool. Tekan F8 untuk mengkonvert to symbol. Pilih button pada Type dan
tekan Ok.
Pilih kembali obyek, dan tekan F9. Tuliskan gotoAndPaly(2); dan tekan
kembali F9. Insert keyframe pada frame ke 2, pilih button dan de-
lete. Beri obyek oval pada stage seperti gambar berikut:
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 20
Pilih obyek dan tekan F8. Pilih Movie clip dan dengan nama bola. Tekan
dua kali obyek oval dan insert keyframe pada frame 20. pastikan bahwa
judul stage adalah bola, sesuai dengan nama movie clip yang kita buat
tadi. Pindahkan obyek oval ke tempat lain. Kita akan membuat sebuah
bola akan bergerak secara motion tween pada movie clip dan bera-
da pada frame kedua pada sciene 1. Klik kanan frame 10 dan pilih
create motion tween.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 21
Klik sciene 1 yang yang berada diatas timeline. Sehingga muncul tampi-
lan seperti gambar diatas. Uji hasil dengan Ctrl+Enter. Perhatikan ha-
silnya. Ini terjadi karena kita belum memasukan perintah stop pada
frame, sehingga frame dijalankan sebelum sempat kita menekan but-
ton next. Pilih frame 1 dan tekan F9, tulis stop();. Pilih frame 2 tekan F9,
tulis stop();. Uji hasil dengan Ctrl+Enter. Untuk membuat interaktif anta-
ra frame 2 ke frame 1, buat juga tombol dengan judul back dengan tuli-
san pada action gotoAndPlay(1);.
Macromedia Flash
Teknolgi Pendidikan | FIP | IKIP Mataram | 2012 22
BAB III
PENUTUP
A. Kesimpulan
Dari paparan di atas dapat diambil kesimpulan sebagai berikut :
Macromedia Flash adalah program untuk membuat animasi dan ap-
likasi web profesional. Bukan hanya itu, Macromedia Flash juga ba-
nyak digunakan untuk membuat game, animasi kartun, dan aplikasi
multimedia interaktif seperti demo produk dan tutorial interaktif
Teknik Mendesain Macromedia Flash secara sederhana terdiri dari be-
berapa hal yaitu :
- Mengetahui Area Kerja Macromedia Flash MX dan menu yang ter-
dapat di dalamnya
- Dasar Objek Flash MX
- Memilih atau Menyeleksi Objek
- Membuat Gradasi Warna
- Transformasi Objek
- Memutar dan Memiringkan Objek
- Menata Posisi Objek
- Pengolahan Teks
- Konsep tentang animasi
- Penggunaan Timeline
- Penggunaan layer control
- Penggunaan Keyframe
Dengan Macromedia Flash kita dapat membuat Contoh Animasi Ma-
cromedia Flash yang sederhana seperti Membuat Animasi perpindahan
(motion Tween), Membuat animasi perubahan bentuk (Motion Shape),
ataupun Membuat animasi frame by frame serta lebih banyak lagi sesuai
dengan kreatifitas kita masing-masing.