Teknik mendesain dan contoh membuat macromedia flash.amir

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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.

Education

Teknik mendesain dan contoh membuat macromedia flash.amir