Pengantar Program Grafis Animasi

DARMAWAN SOEGANDAR

Pemrograman Animasi Grafis Dalam Macromedia Flash MX

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN UNINUS

Pengantar Pemrograman Animasi / Darmawan

hal 1

2008 PENGANTAR Komputer pada masa sekarang tidak lah layak jika sekedar dipandang sebagai hanya pengganti mesin Tik belaka. Komputer sebagai alat bantu harus di manfaatkan semaksimal mungkin. Sesuai bidang tugas dan kerja masing masing user. Flash MX, adalah sebuah software pemrograman animasi grafis yang cukup sederhana dan mudah untuk dipelajari. Untuk menampilkan simulasi cukup dibuat dengan cara yang sederhana, tanpa bahasa pemrograman yang rumit. Seperti halnya bahasa pemrograman berbasis numerik umumnya. Pada pembelajaran kali ini, kita akan meminimalisir penggunaan bahasa pemrograman ( action script ). Yang akan kita pelajari secara tersendiri dalam MK Komputer & Pemrograman. Pada buku ini sendiri akan dipelajari; Pendahuluan, Menggunakan Toolbar dan Propertiesnya, Mengenal UI Components, Multimedia, Dasar Dasar Animasi, dan Publish. Pada Pendahuluan kita akan mengidentifikasi beberapa layout dan tool yang penulis anggap paling mendasar dan harus diketahui para pengguna buku ini sebelum melangkah pada bagian berikutnya. Bagi mereka yang sudah terbiasa memahami software grafis tentu tidak akan

Pengantar Pemrograman Animasi / Darmawan

hal 2

mengalami terlalu banyak kesulitan. Begitupun pada bagian UI Components, para pengguna yang sudah terbiasa dengan bahasa pemrograman Visual, akan mendapat lebih banyak kemudahan lagi. Pada pembahasan Multimedia, para pembaca akan menemukan beberapa

pemahaman

yang

sangat

penting

ketika

akan

memasukkan multimedia kedalam program yang sedang anda bangun. Karena, ada beberapa format yang tidak bisa di run dalam Flash MX. Oleh karena itu pembaca diharapkan memperhatikan beberapa aturan yang dijelaskan di dalamnya. Bab mengenai dasardasar animasi yang penulis rangkum dari beberapa buku, hanyalah merupakan dasar-dasarnya saja. Selanjutnya untuk membuat sebuah program yang bagus, baik itu secara artistik maupun kegunaannya, tentu saja relatif tergantung pada kreatifitas dari pembuat program atau pembaca sekalian. Akhirnya mengcompile atau membuat sebuah publish adalah puncak tertinggi dari keinginan

pembuat

program.

Para

pembaca

dipersilahkan

mempelajarinya sebagai pemahaman dasar yang bisa dilengkapi dengan software resource yang di sediakan oleh Macromedia. Selanjutnya, selamat berkarya ! Darmawan Soegandar

Pengantar Pemrograman Animasi / Darmawan

hal 3

DAFTAR ISI 1. Pengantar……………………………………………. 1 2. Daftar Isi ……………………………………………. 3 3. BAB I Pendahuluan

……………………………. 4

4. BAB II Menggunakan Toolbar dan Propertiesnya.. 7 5. BAB III Mengenal UI Components ……………….. 20 6. BAB IV Multimedia

……………………………

28

7. BAB V Dasar Dasar Animasi ……………………...

37

8. BAB VI Publish ……………………………………. 54

Pengantar Pemrograman Animasi / Darmawan

hal 4

BAB I Pendahuluan Animasi adalah Proses manipulasi gambar agar gambar tampak lebih menarik atau hidup. Animasi pada Flash MX dibuat di dalam Simbol. Jadi gambar yang tampak pada stage terpartisi dalam beberapa sub gambar, objek Flash. Objek Flash inilah yang akan kita sebut simbol. Simbol terbagi menjadi tiga jenis; •

Movie Clip; animasi objek yang dibuat dalam beberapa frame sehingga menjadi satu rangkaian animasi objek

•

Button;

animasi

yang

terdapat

pada

tombol

interaktif •

Graphic; animasi diam yang siap di animasikan pada layar

Selain itu animasi bisa juga diberikan pada Teks dengan cara mempartisinya menjadi sebuah simbol dengan perintah Break Apart (Ctrl + B). Secara garis besar layout utama untuk membuat sebuah animasi sederhana dalam Flash tergambar seperti di bawah ini. Layout sendiri terdiri dari layout designer dan layout developer,

Pengantar Pemrograman Animasi / Darmawan

hal 5

tergantung keperluan kita terhadap Panels, tetapi default layout relatif lebih praktis sisanya bisa di tampilkan sesuai kebutuhan. Bagi mereka yang terbiasa dengan pemrograman GUI yang lain perbedaannya hanya terletak pada pemisahan components dari toolbox dan color panels dari properties sisanya secara umum sama saja baik dari cara penggunaan maupun perintah perintah programnya. Perintah yang kita masukkan pada objek atau frame diberikan pada windows action. Kelebihan utama layout flash terletak pada kemudahan akses pada frame yang tidak terdapat pada kemudahan akses form pada software pemrograman lainnya. Menu Toolbox

Panels Time line

Stage Properties

Pengantar Pemrograman Animasi / Darmawan

hal 6

Secara umum animasi dalam flash bisa dengan memakai Action Script, tetapi pada MK Pengantar ini kita akan membicarakan animasi objek tanpa Action Script, ( Action Script diberikan pada MK Bahasa pemrograman). Sebagai sebuah program GUI berbasis Vektor, Flash memang memungkinkan animasi tanpa memakai bahasa pemrograman yang rumit.

Pengantar Pemrograman Animasi / Darmawan

hal 7

BAB II Menggunakan Toolbar dan Propertiesnya Dalam penggunaan Toolbar pada Flash sebenarnya tidak ada bedanya dengan penggunaan tool sejenis pada software desain grafis yang lain arrow

subselection

line

lasso

pen

text

oval

rectangle

pencil

brush

free transform Ink bottle eyedropper

fill transform paint bucket eraser

dari beberapa tool yang tersedia ada beberapa tool yang harus di cermati a. Line Tool ini berguna untuk membuat garis. Pada tool ini yang harus diperhatikan, selain propertiesnya juga perubahan line yang diakibatkan penggunaan arrow dan subselect tool.

Pengantar Pemrograman Animasi / Darmawan

hal 8

warna ukuran

bentuk

•

Garis asal;

•

Untuk memindahkan garis gunakan subselection;

Pengantar Pemrograman Animasi / Darmawan

hal 9

•

Sedangkan jika ingin merubah garis pada titik tertentu gunakan arrow;

•

warna yang dimaksud pada line adalah warna stroke

•

ukuran garis berkisar antara 1 – 10

•

stylenya sendiri ada 7 pilihan bentuk. Tentu saja tergantung kebutuhan designer.

b. Lasso Tool ini berguna untuk memilah bagian tertentu yang ingin dianimasi. Tool ini terutama sering digunakan pada animasi cartoon (film kartun 2 dimensi)

Pengantar Pemrograman Animasi / Darmawan

hal 10

bisa di perhatikan bahwa animasinya sendiri hanya pada bagian kepala dan matanya saja. Prosesnya sendiri dengan cara memilih bagian tertentu dari gambar yang akan di jadikan symbol. c. Text Teks berguna untuk membuat tulisan baik yang akan dijadikan input text, dinamik teks ataupun yang statis.

yang dimaksud dinamik teks adalah jika teks yang kita buat ingin dibuat scrollnya resikonya carakter posisinya hanya normal saja sehingga jangan harap menuliskan rumus rumus matematis dengan sempurna pada mode teks ini.

Pengantar Pemrograman Animasi / Darmawan

hal 11

Sedangkan input text berguna untuk menjadi alat masukan bagi pengguna atas program yang kita buat. Input text

d. Oval Oval tool ini berguna jika kita ingin membuat lingkaran atau elips

stroke

yang harus kita perhatikan •

fill

Lingkaran bulat sempurna akan terbentuk jika ketika kita sedang membuat lingkaran dibagian

Pengantar Pemrograman Animasi / Darmawan

hal 12

bawah pointer ada lingkaran kecil yang ditebalkan. Tetapi secara otomatis bisa kita buat dengan cara menekan tombol shift bersamaan dengan proses pembuatan lingkaran. •

Gambar yang kita buat akan terdiri dari dua bagian stroke

dan

fill,

sehingga

dalam

proses

memindahkan gambar ini harus hal ini diperhatikan. Fill dan stroke pindah bersamaan Fill dan stroke tidak di pindah bersamaan

kegagalan pemindahan objek seperti diatas bisa dihindari dengan cara ctrl + a memblok seluruhnya, jika objek pada stage sudah komplek caranya dengan mengklik dua kali pada objek bersangkutan baru kemudian dipindahkan pada bagian yang kita inginkan.

Pengantar Pemrograman Animasi / Darmawan

hal 13

e. Rectangle Pada pembuatan persegi (rectangle) cara dan manipulasinya hampir sama dengan oval tool. Hal penting yang harus diingat adalah ketika kita ingin membuat sudut oval pada sudut sudut rectangle-nya. Sehingga akan tampak perbedaan sudut,

sudut sudut yang tumpul ini bisa di atur pada windows berikut

caranya dengan memilih option di bawah tool bar

Pengantar Pemrograman Animasi / Darmawan

hal 14

f. free transform Jika kita ingin merubah ukuran suatu objek, pilihlah free transform. Pilihan ini lebih sering di gunakan karena kita bisa langsung fiting di stage terhadap objek lain.

tool ini juga berguna untuk memanipulasi rotasi objek dan kemiringannya. Perhatikan jika kita mendekatkan pointer ke salah satu sisi stroke maka pointer akan berubah menjadi , jika pointer sudah berubah seperti itu cobalah c&d sehingga rectangle berubah sesuai yang diharapkan

sedangkan jika pointer berubah bentuk menjadi; , artinya free rotate aktif, maka kita bebas memutar objek sesuai kebutuhan.

Pengantar Pemrograman Animasi / Darmawan

hal 15

tetapi jika kita membutuhkan putaran dengan akurasi, bisa menggunakan pasilitas modify > transform > scale and rotate.

melalui windows ini tinggal masukkan berapa derajat besarn perputarannya. Windows ini juga bisa memberi akurasi pembesaran sesuai persentase yang diinginkan. g. paint bucket •

Pada bentuk oval dan rectangle paint bucket berguna untuk merubah fill color, dan perintahnyapun tidak ada yang istimewa. Tinggal klik paint bucket, pilih fill objek yang ingin dirubah lalu pilih warna yang ingin dirubah. Bisa menggunakan properties > fill color. Bisa

Pengantar Pemrograman Animasi / Darmawan

hal 16

juga menggunakan color mixer atau color bar di tool bar

Fungsi nya sama

ingat klik dulu paint bucket tool sebelum memakai ke tiga tool tersebut. •

Tool

ini

juga

berguna

untuk

memberi

kesan

pencahayaan ketika kita menggunakan color radial atau linear

Pengantar Pemrograman Animasi / Darmawan

hal 17

sehingga kesan yang tibul menjadi sudut pencahayaan tertentu. Jika dengan color radial warna asalnya;

jika diberi sentuhan paint bucket tool menjadi;

Perhatikan arah pencahayaannya, arah pencahayaan tergantung dari sisi mana paint bucket tool diberikan.

Pengantar Pemrograman Animasi / Darmawan

hal 18

h. Eyedropper Tool ini berguna untuk mengcopy warna suatu objek ke objek lain. Sehingga ada dua objek yang memiliki warna sama. Caranya; •

Klik eyedropper tool

•

Kemudian klik bagian warna ( stroke ataupun fill) yang hendak di gandakan. Sehingga paint bucket tool dan option lock fill aktif. Kemudian nonaktifkan lock fill di option eyedropper.

Lock fill

•

Barulah klik bagian dari objek yang hendak diberi warna sama, sehingga objek memiliki warna yang sama.

Pengantar Pemrograman Animasi / Darmawan

hal 19

i. ink bottle Tool ini berguna untuk memberi atau merubah warna stroke pada objek;

setelah diberi stroke height 3 point oleh ink bottle dengan , menjadi

Pengantar Pemrograman Animasi / Darmawan

hal 20

BAB III MENGENAL UI COMPONENT Sesuai kesepakatan sebelumnya kita akan mempelajari UI Component yang tidak melibatkan action script yang rumit. Pada bahasan kali ini kita akan mempelajari scroll baik text maupun image, dan keduanya. 1. Scrollbar Scroll bar pada teks yang harus di perhatikan adalah jenis teksnya. a. Pilihlah dynamic text

Line type

hal yang paling sering di lupakan oleh designer adalah merubah line typenya.

Pengantar Pemrograman Animasi / Darmawan

hal 21

Dari single menjadi multiline. Tentu saja tulisan yang terlihat di stage hanya sebagian saja. Yang secara keseluruhan akan terbaca dengan bantuan scrollbar b. Kemudian pilihlah scrollbar pada components UI, draglah tool scrollbar sampai tampak pointer berubah menjadi lingkaran kecil tebal, sebagai tanda posisi pointer sudah tepat.

Horizontal scrollbar

cara

yang

paling

sederhana

adalah

dengan

menempatkan scrollbar tepat di tengah tengah garis pinggir.

Pengantar Pemrograman Animasi / Darmawan

hal 22

c. Jika ingin membuat scrollbar horizontal buat lagi scrollbarnya tetapi pada properties > horizontal > ganti menjadi > true. Sehingga didapat.

Line type

perbedaannya terletak dari penggunaan line type > single line. d. Pemakaian arah scrollbar ditentukan pada kebutuan dan ketersediaan lahan pada stage. 2. ScrollPane Tool UI ini berguna untuk memberikan scrollbar pada image karena terbatasnya lahan pada stage. a. Misalnya kita telah loading atau import image ke library. File > import to library

Pengantar Pemrograman Animasi / Darmawan

hal 23

b. Berikutnya drag image tersebut dari library ke stage. (F11)

c. Kemudian rubahlah behavior symbolnya (F8) menjadi movie clip

sehingga pada stage tampak lingkaran kecil ditengah image sebagai tanda sudah berubah menjadi symbol seperti berikut;

Pengantar Pemrograman Animasi / Darmawan

hal 24

d. Selanjutnya kita akan membuat linkagenya. Untuk itu hapuslah dulu movie clip tersebut. Kemudian pada window library klik kanan pada icon movie clip bayiku

Icon movie clip

Pengantar Pemrograman Animasi / Darmawan

hal 25

e. Sehingga tampak kotak dialog linkage properties isilah sesuai kotak dialog berikut;

f. Berikutnya kita akan membuat UI scrollpanenya (ctrl+F7) atau tampak pada sebelah kanan layar default

g. Pilihlah scrollpane dan atur posisi serta ukurannya sesuai kebutuhan stage kita secara keseluruhan.

Pengantar Pemrograman Animasi / Darmawan

hal 26

h. Pada propertis > scroll content isikan nama linkage kita ( bayiku_lnk) i. Untuk memastikan hasilnya sesuai harapan kita coba lah previewnya ( ctrl + enter)

Pengantar Pemrograman Animasi / Darmawan

hal 27

Dengan penggunaan scrollpane kita bisa membuat baris baris rumus sesuai kaidah yang berlaku syaratnya dengan mengubah dulu teks yang kita butuhkan menjadi movie clip terlebih dahulu.

Jadi masalah keterbatasan penulisan rumus pada subscript, bisa diselesaikan dengan solusi scrollpane dengan merubah behavior ini.

Pengantar Pemrograman Animasi / Darmawan

hal 28

BAB IV MULTIMEDIA Proses manipulasi multi media pada flash mx sebetulnya tergantung

pada

kreatifitas

depeloper

atau

animatornya.

Maksudnya, hakikat aktifasi sebuah animasi sama saja dengan aktifasi objek lain pada flash mx. a. Video Untuk menampilkan sebuah video dalam flash mx sebetulnya relatif sederhana. Proses awalnya tentu saja sama dengan proses import objek lain pada library. 1. Ambilah file video yang dibutuhkan

Pengantar Pemrograman Animasi / Darmawan

hal 29

tentu saja untuk mempermudah pengambilan video disarankan untuk mengubah jenis file (files of type) menjadi All Video Formats. Karena tidak semua jenis video bisa ditampilkan dalam flash mx. Formats file Video yang di import Format video di bawah adalah file yang bisa di import jika QuickTime 4 telah terinstall (Windows dan Macintosh): File type

Extension

Audio Video Interleaved

.avi,

Digital Video

.dv

Windows Macintosh

Motion Picture Experts .mpg, Group

.mpeg

QuickTime Movie

.mov

Pengantar Pemrograman Animasi / Darmawan

hal 30

Format video di bawah adalah file yang bisa di import jika DirectX 7 atau lebih tinggi telah terinstall (hanya pada Windows): File type

Extension

Audio Video Interleaved

.avi,

Motion Picture Experts Group

.mpg, .mpeg

Windows Media File

.wmv, .asf

Windows

Defaultnya, imports dan exports video pada flash menggunakan Sorenson Spark codec. A codec adalah sebuah

algoritma

mengkontrol

compression/decompression

bagaimana

sebuah

file

yang

multimedia

di

compressed dan decompressed ketika melakukan import and export file. video yang di import formatnya

bisa

supported, tergantung pada codecs yang terinstall pada system kita. Jika kita mendapatkan file yang di import formatnya tidak supported pada system kita , Flash akan menampilkan

Pengantar Pemrograman Animasi / Darmawan

hal 31

warning message bahwa operasi tidak dapat dilaksanakan. Dalam beberapa kasus, Flash mungkin mengimport video tetapi audio nya tidak. Sebagai contoh, audio tidak supported pada MPG/MPEG files yang di import dengan QuickTime 4. pada kasus lainnya, Flash menampilkan warning bahwa file audio nya tidak dapat di import. Tetapi kita tetap bisa mengimport video tetapi tanpa suara (sound). 2. Aturlah kualitas gambar yang di inginkan

Pengantar Pemrograman Animasi / Darmawan

hal 32

3. Hasilnya akan terindikasi dengan tampilan pada time line. Tentu saja panjang frame tergantung pada pengaturan yang kita lakukan sebelumnya.

4. Sehingga hasilnya akan terlihat putaran jam seperti berikut;

Pengantar Pemrograman Animasi / Darmawan

hal 33

b. Sound Kita dapat menempatkan file sound kedalam Flash dengan mengimportnya kedalam library didalam docukemnt flash yang kita buat. Ketika menempatkan sound pada Timeline, di rekomendasikan untuk menempatkannya pada separate layer. Format sound file yang bisa di import pada flash adalah: WAV (Windows only) AIFF (Macintosh only) MP3 (Windows or Macintosh) Jika kita memiliki QuickTime 4 yang terinstall pada system kita, kita dapat memasukkan file sound file dengan format: AIFF (Windows or Macintosh) Sound Designer II (Macintosh only) Sound Only QuickTime Movies (Windows or Macintosh) Sun AU (Windows or Macintosh) System 7 Sounds (Macintosh only) WAV (Windows or Macintosh)

Pengantar Pemrograman Animasi / Darmawan

hal 34

Flash akan memasukkan

sounds yang di import kedalam

library bersama bitmaps dan symbols. sebagai graphic symbols, kita hanya memerlukan satu buah copy sound untuk di pergunakan dalam seluruh movie. Sounds dapat di pergunakan tergantung besarnya disk space dan RAM. Walau bagaimanapun, data MP3 sound terkompresi dan lebih kecil dari pada WAV atau AIFF data sound. Secara umum, ketika menggunakan file WAV atau AIFF files, lebih baik jika kita menggunakan 16-bit 22 kHz mono sounds (stereo menggunakan besaran data yang sama besarnya dengan mono), tetapi Flash dapat mengimport keduanya 8- atau 16-bit sounds sebagai contoh pada 11 kHz, 22 kHz, atau 44 kHz. Flash dapat melingkupi sounds ke sample rates yang di export yang lebih rendah. Jika kita hendak memasukkan effects sounds kedalam Flash, lebih baik mengimportnya dalam 16-bit sounds. Jika kita memiliki RAM yang ter batas, buatlah sound clips kita dengan pendek atau menggunakan 8-bit sounds sampai 16-bit sounds. 1. Untuk mengimport sebuah sound: a) Importlah file sound yang dibutuhkan kedalam library

Pengantar Pemrograman Animasi / Darmawan

hal 35

2. Tempatkanlah dalam time line, ingat jika memakai dua file sound gunakanlah frame yang terpisah, karena nantinya akan bertumpuk. Dan sound terakhir yang di masukkan lah yang akan aktif

3. Perbedaannya terlihat seperti pada time line berikut ini

Pengantar Pemrograman Animasi / Darmawan

hal 36

BAB V

Pengantar Pemrograman Animasi / Darmawan

hal 37

DASAR DASAR ANIMASI a. Animasi Bentuk Animasi ini bertujuan untuk merubah suatu bentuk simbol grafik tertentu menjadi bentuk lain, bahkan menjadi teks (yang akan kita bahas nanti). o Pertama buatlah sebuah persegi di sebelah kiri stage

o Pada frame 30 buatlah blank Keyframe, Insert > Blank Keyframe. Tujuannya adalah untuk memesan beberapa frame kosong sampai frame ke 30. Dan buatlah sebuah gambar, dengan bentuk apa saja sesuai imajinasi kita, pada frame ke 30.

Pengantar Pemrograman Animasi / Darmawan

hal 38

o Kembalilah pada frame ke-1. dan pilihlah Tween : Shape pada properties.

perhatikan Timelinenya menjadi

Sekarang cobalah hasil animasi kita dengan perintah ctrl + enter atau pilih Control > Test Movie . b. Animasi Gerak Untuk lebih memahami animasi jenis ini, kita akan memilahnya menjadi Animasi Motion Tween,

Animasi

Putar dan Animasi Jalur. 1. Animasi Motion Tween, animasi ini adalah animasi paling mendasar dan paling sering dipakai dalam Flash. Caranya sederhana sekali, perhatikan contoh berikut.

Pengantar Pemrograman Animasi / Darmawan

hal 39



Klik

oval

tool,

lalu

buatlah

gambar

lingkaran. Jika ingin lingkaran yang kita buat memiliki jari jari yang sama tekan shift. 

Berikutnya kita akan menganimasi lingkaran tersebut. Pilihlah lingkaran tersebut dengan perintah Edit > Select All, perintah ini diberikan agar fill dan strokenya dipilih sekaligus.



Kemudian konversi gambar tersebut menjadi simbol Insert > Convert to Symbol, dan pilihlah behaviornya Graphic.



Kemudian masukkan Keyframe pada frame ke 30 di Timeline, lalu klik Arrow tool, dan pindahkan lingkaran ke sisi kanan.

Pengantar Pemrograman Animasi / Darmawan

hal 40



Terakhir pada frame ke-1 pada properties pilihlah Tween : Motion.

Jika

perintah

ini

berhasil

sempurna

perhatikan Timeline berubah menjadi anak panah tanpa putus.

Pengantar Pemrograman Animasi / Darmawan

hal 41

Sekarang cobalah hasil animasi kita dengan perintah ctrl + enter atau pilih Control > Test Movie . 2. Animasi putar Animasi ini bertujuan menggerakkan hasil animasi sebelumnya sehingga memberi kesan berputar pada gambar. 

Pertama buatlah sebuah bola, dengan cara memakai oval tool tetapi diberi warna gradasi dan pencahayaan dari kiri atas dengan memakai paint bucket tool pada bagian yang di inginkan.



Ubahlah simbol menjadi grafik



Pada frame ke 30 masukkan Keyframe, tetapi pindahkan bola ke bagian lain dari stage.

Pengantar Pemrograman Animasi / Darmawan

hal 42



Kembalilah ke frame 1, berilah animasi gerak tetapi di tambah dengan rotasi. Pilihlah ease dan jenis rotasinya sesuai selera.

Sekarang cobalah hasil animasi kita dengan perintah ctrl + enter atau pilih Control > Test Movie . 3. Animasi Jalur Animasi

ini

sering

kali

dipakai

untuk

menggambarkan gerakan gerakan tertentu dalam Fisika, seperti gerakan peluru, planet dll. Kita akan ambil contoh menggambarkan animasi gerakan pesawat; 

Buatlah dua buah layer, satu layer guide dan satu layer biasa. Layer guide berguna sebagai lintasan bagi objek yang akan kita gerakkan.

Pengantar Pemrograman Animasi / Darmawan

hal 43



Perhatikan pada time line frame disediakan sampai frame 30 dengan Insert > Frame. Tetapi sebelum itu buatlah lintasan pada frame 1 di guide layer 1.



Kemudian simpanlah objek pada frame 1 layer 1. kemudian Insert > Keyframe pada frame 30.



Proses animasinya sendiri dilakukan di frame 30 dengan cara memindahkan objek dari ujung kiri lintasan ke ujung kanan

Pengantar Pemrograman Animasi / Darmawan

hal 44

lintasan hati hati proses klik & dragnya tidak boleh melenceng dari lintasan yang telah di tentukan. Jika sudah selesai kembali ke frame 1 di layer 1 dan berikan Tween: Motion di properties.

Pesawat berawal dari titik ini, gerakkan secara hati hati sampai end point

•

Sekarang cobalah hasil animasi kita dengan perintah ctrl + enter atau pilih Control > Test Movie .

c. Animasi Warna Animasi warna seringkali dipakai baik pada teks maupun simbol. Sekarang kita akan mencoba teks

Pengantar Pemrograman Animasi / Darmawan

hal 45

yang lajim dipakai pada banyak website. Sebagai cara untuk menarik pengunjung. o Pertama tama ketikkan sebuah tulisan dengan warna yang kita sukai pada frame 1 kemudian copykan ke frame 20 dan 40. o Kemudian pada frame 20 ganti lah color pada propertiesnya menjadi alpa 0%, agar memberi efek menghilang. Dan color tint 100% dengan warna dirubah dari warna awal. Contoh jika awalnya merah di frame 1 maka ganti jadi warna biru di frame 40 dst. Perintah ini selain memberi perubahan warna, 100% mengakibatkan warna jadi timbul kembali.

Pengantar Pemrograman Animasi / Darmawan

hal 46

•

Sekarang cobalah hasil animasi kita dengan

perintah ctrl + enter atau pilih Control > Test Movie . d. Animasi Masking Animasi ini berguna untuk menutupi suatu objek dengan objek lain, baik bertujuan untuk mebuat suatu simbol seakan akan menghilang,

atau

memang di tutup dengan simbol yang lain. •

Pertama tuliskan lagi tulisan tadi pada frame

1 •

Buatlah satu layer lagi dengan cara Insert >

layer. Dan gambarlah sebuah kotak tanpa garis pinggir di frame 1 layer 2. ingat fillnya beri warna putih. •

Copykan frame 1 ke frame 15 dan 30. tapi

pindahkan kotak ke bawah tulisan pada frame 15 dan kembalikan ke posisi semula di frame 30 •

Kembali lah ke frame 1 dan beri tween:

Motion pada propertiesnya. Begitupun pada frame 15

Pengantar Pemrograman Animasi / Darmawan

hal 47

•

Terakhir klik kanan pada layer 2, dan berilah

perintah mask, untuk memberikan efek masking.

Pengantar Pemrograman Animasi / Darmawan

hal 48

•

Sekarang cobalah hasil animasi kita dengan

perintah ctrl + enter atau pilih Control > Test Movie . e. Animasi Teks Yang di maksud namimasi teks di sini adalah proses animasi dengan cara mendistribusikan hurup sesuai animasi yang di inginkan. •

Ketiklah hurup FPMIPA pada frame 1 layer

1, kemudian rubahlah menjadi simbol teks terpartisi dengan memberi perintah modify > break apart

Pengantar Pemrograman Animasi / Darmawan

hal 49

•

Kemudian distribusikan dalam beberapa

layer dengan perintah modify > distribute to layer agar hurup hurup yang sudah terpartisi di pisah dalam beberapa layer sehingga masing masing bisa di beri perintah animasi yang berbeda sesuai kebutuhan.

•

Setelah memberikan perintah animasi pada

masing masing hurup, cobalah hasil pekerjaan kita. f. Animasi Tombol

Pengantar Pemrograman Animasi / Darmawan

hal 50

Animasi tombol adalah animasi dasar terakhir yang diperlukan bagi animator yang bertujuan untuk alat navigasi antar frame atau memberikan perintah action script pada objek anime. •

Pertema tama buatlah dua buah frame.

Frame yang pertama

•

Frame yang kedua

Pengantar Pemrograman Animasi / Darmawan

hal 51

•

Kemudian

kita

akan

menganimasikan

tombol tersebut dengan proses animasi yang paling sederhana.

1. Rubahlah teks tombol maju menjadi symbol Button 2. Kemudian klik dua kali tombol tadi untuk memberikan animasinya. Sehingga akan tampak layer tombol,

3. Tampak ada 4 posisi dalam tombol  Up; maksudnya tampilan awal dari tombol atau statis teks  Over; adalah posisi ketika pointer berada di atas tombol

Pengantar Pemrograman Animasi / Darmawan

hal 52

 Down; adalah ketika user dalam keadaan menekan / mengklik tombol  Hit; area yang akan bereaksi jika mouse di klik. 4. Berikanlah key frame pada over dan down, untuk meng-insert frame yang sama 5. Kemudian rubah lah warna masing masing simbolnya dengan warna yang berbeda. •

Berikutnya kita akan memberikan action script. Caranya pada tombol yang sudah kita berikan animasi standar tadi klik kanan dan pilihlah action. Sehingga tampak windows berikut;

•

Pilihlah layout normal bagi kebanykan pemula. Pilihan ini lebih sederhana. Kemudian pilih lambang (+) kemudian

pilih actions > movie

control > goto.

Pengantar Pemrograman Animasi / Darmawan

hal 53

•

Masukkan lah nama frame kita (Ahir) jangan lupa memberi tanda petik!

•

Berikan

perintah

yang

sama

pada

tombol

berikutnya. •

Sekarang cobalah hasil kerja kita.

Secara umum dasar dasar animasi sebetulnya hanya yang telah disebut diatas. Sisanya tinggal kreatifitas menggabung gabungkan beberapa jenis animasi. Jika mau bisa juga memanfaatkan action script lebih banyak. Tentu saja untuk itu diperlukan pemahaman bahasa pemrograman yang baik. Hakikatnya bahasa yang dipakai dalam bahasa pemrograman itu itu juga. Biasanya perbedaannya terletak pada penggunaan tanda baca, misalnya , . : : “ ‘ dst. Untuk itu akan di bahas dalam MK Khusus.

Pengantar Pemrograman Animasi / Darmawan

hal 54

BAB VI PUBLISH Cara untuk mempublish sebuah program Flash adalah File > Publish. Tetapi seringkali bagi mereka yang advance mensetting publish adalah sesuatu yang penting. Karena default

setting

publish hanya mempublish fla menjadi swf dan html saja. Publish setting a. Format setting

Pengantar Pemrograman Animasi / Darmawan

hal 55

pada setting ini yang paling sering kita perlukan adalah menampilkan format executable (.exe) format ini menjadi penting agar program animasi yang kita buat bisa di tampilkan di semua PC lain walaupun Macromedia Flash MX tidak terinstalasi. b. Flash setting Pada setting flash, bagian yang penting adalah pada •

Protect from import; item ini bertujuan menghindari

penjiplakan

karya

karena

dimungkinkannya perubahan dari film flash kembali

menjadi

dokument

flash

yang

berekstensi .fla •

Sedangkan pada item password ditujukan untuk menghindari akses software yang kita buat oleh user yang tidak kita harapkan.

•

Jika dalam animasi kita menggunakan fasilitas suara, audio stream dan audio event juga penting

untuk

diperhatikan

sebagai

alat

kompresi file •

Untuk mengurangi ukuran file, JPEG Quality juga harus diperhatikan. Hal ini agar gambar

Pengantar Pemrograman Animasi / Darmawan

hal 56

memiliki kualitas kompersi sesuai kebutuhan saja. Ingat flash berbasis Vektor.

c. Html Karena kita baru fokus pada pemrograman grafis animasi sebagai pengantar, maka kita akan memakai default seting pada bagian ini. Yang harus lebih menjadi perhatian adalah pada dimension, maksudnya jika kita ingin menampilkan dengan ukuran tertentu bisa menggunakan pixels dan percent

Pengantar Pemrograman Animasi / Darmawan

hal 57

Pengantar Pemrograman Animasi / Darmawan

hal 58

Daftar Pustaka Afrizal Mayub, (2005). e-Learning Fisika, Yogyakarta: Graha Ilmu. Asnawir. (2005). Media Pembelajaran, Jakarta. Ciputat Press. Chandra (2005). Menu interaktif Flash MX, Palembang, Maxikom. Erhans A. (2003). Flash MX, Cirebon: e-Con & WIT. Jensen and Sandlin (1997). Electronic Teaching and Learning: Trends in Adapting to Hypertext, Hypermedia, and Networks in Higher Education, San Antonio, www.trinity.edu. John Stenzel, Andy Jones (1997,2005). The Computer – Aided Instruction

Program,

UCDAVIS,

www.cai-

ucdavis.edu. Lukmanul Hakim, dkk (2003). Teknik Jitu menguasai Flash MX, Jakarta, Elekmedia Komputindo.

Pengantar Pemrograman Animasi / Darmawan

hal 59

Macromedia (2005). Software source Macromedia Flash MX, ContextHelp.htm, Macromedia Macromedia (2005). http://www.macromedia.com/support/flash/, Macromedia. Rathiphong Pittayanupakom (1999). Computer Aided Instruction, Thailand, www.kmitnb.ac.th Winastwan Gora S. (2005). Membuat CD Multimedia Interaktif, Jakarta: Elekmedia Komputindo

Pengantar Pemrograman Animasi / Darmawan

hal 60

Tentang Penyusun Darmawan Soegandar, lahir di Tasikmalaya, Jawa Barat tahun 1976. Pendidikan; Pendidikan Matematika di IKIP Bandung(1994), Teknik Tekstil di STT Tekstil(1998) dan Managment Telekomunikasi dan Informatika di STMB Divlat PT. Telkom Bandung(2000). Sempat juga belajar di Matematika Uninus yang kemudian menjadi tempatnya belajar mengajar. Dan sekarang pulang kampung untuk menyelesaikan studi di Sekolah Pascasarjana Universitas Pendidikan Indonesia (IKIP) Bandung Buku-buku yang sudah disusun diantaranya: • Algoritma untuk SMU, SMUN 3 Bandung, 1997. • Visual Basiq untuk SMU, SMUN 3 Bandung, 1997. • Memahami Windows for people with disabilities (penglihatan, pendengaran atau mobilitas yang terbatas), untuk lingkungan sekolah sekolah berbasis kesehatan dan luar biasa, ESENES, 2003. • Pemahaman Dasar Hardware, Bintang Merah, 2004. • Perbaikan Hardware, Bintang Merah, 2004. • Plan for Enterpreaneurs, Bintang Merah, 2004. • Modul TIK SMP Kelas VII-IX, MGMP TIK Ciamis, 2004. • Belajar dan Pembelajaran Matematika, UNINUS, 2005 • Modul Belajar IHT Komputer di lingkungan MI Depag Kab. Bandung, 2005. • Analisa Kepuasan Siswa terhadap Matematics Computer Aided Instruction, UNINUS, 2006. • eMath Book untuk Madrasah Aliyah, DEPAG, 2006 • Pengantar Pemrograman Animasi, Bintang Merah, 2006. • Aplikasi Komputer untuk Pendidikan, Bintang Merah, 2007

Pengantar Pemrograman Animasi / Darmawan

hal 61