Kamis, 20 Oktober 2011

Kegiatan Belajar 5 MEMBUAT ANIMASI TEKS BERUBAH-UBAH WARNANYA





TUJUAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat:
·           Menggunakan teks pada flash
·           Mengkonvert teks menjadi vektor
·           Membuat animasi teks berubah-ubah warnanya

URAIAN MATERI
A.   Menggunakan Teks
tool-textUntuk menambahkan teks ke dalam stage pilih Text Tool (      ) pada toolbar kemudian klik pada stage. Sebuah kotak kosong akan muncul. Untuk mengubah jenis, ukuran serta warna font, gunakan jendela Properties di bagian bawah layar.
atur-teks


B.   Animasi Teks berubah-ubah Warna
       Untuk sebuah judul program terkadang perlu dibuat menarik dengan cara membuat teks pada judul tersebut bergerak atau berubah-ubah warnanya.
       Dengan Flash 8 membuat animasi tersebut bukanlah hal yang sulit.
  • Pertama buat file baru, melalui jendela Properties ubah warna background menjadi hitam.
warna-background
  • Pilih Text Tool (text-tool )
  • Pada jendela Properties, atur : Static Text, Arial, 40 warna Kuning, Anti-alias for animation (lihat gambar).
text-properties
  • Klik mouse pada stage, ketikkan JUDUL (judul program).
Judul-teks
  • Atur posisi agar di tengah layar kerja.
  • Pilih Modify > Break Apart atau tekan CTRL + B
break-apart
  • Pilih Modify > Break Apart

  • Pilih Modify > Convert to Symbol
modify
  • Pada jendela Convert to Symbol, beri nama judul, pilih Graphic, pilih OK
symbol-judul

  • Klik di frame 15 pada Timeline, Klik kanan mouse Insert Keyframe.
  • Klik di frame 30 pada Timeline, Klik kanan mouse Insert Keyframe.
  • Klik di frame 15 pada Timeline
  • Klik mouse pada teks JUDUL
  • Pada jendela Properties, pilih Color > Tint, atur warna ke Jingga (atau yang lain), kepekatan 100%.
color-properties
  • Blok frame 1 hingga 30, Klik kanan mouse pada timeline Pilih Create Motion Tween.
  • Jalankan animasi.

Kegiatan Belajar 4 MEMBUAT ANIMASI OBJEK BERGERAK





TUJUAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat membuat:
·           Animasi objek bergerak dengan pergeseran tempat
·           Animasi objek bergerak membesar atau mengecil
·           Animasi objek bergerak dengan berputar
·           Animasi perubahan bentuk

URAIAN MATERI
A.   Animasi Gerak dengan Pergeseran Tempat
       Untuk membuat animasi sebuah objek yang dapat bergerak/ bergeser dari suatu tempat ke tempat lain (ke samping , ke atas, ke bawah dan sebagainya) langkah-langkahnya sebagai berikut:
  1. Setelah membuat file baru, pilih Oval tool (oval-tool ) pada toolbar (atau tool yang lain sesuai bentuk objek yang akan dibuat).
  2. Buat sebuah lingkaran pada layar kerja.
  1. Pilih Selection tool (pointer-tool), kemudian double-klik pada lingkaran untuk mengaktifkan lingkaran.
  2. Pilih Modify > Convert to symbol
  1. Pada kotak dialog yang tampil isikan seperti berikut:
jendela-convert-graphic
  1. Pilih OK
  2. Klik mouse di frame 30 pada Timeline, kemudian pilih Insert > Timeline > Keyframe atau Klik kanan mouse pilih Insert Keyframe.
insert-keyframe
  1. Klik mouse pada lingkaran, kemudian geser lingkaran ke sembarang tempat ( sebagai contoh di sini digeser ke arah kanan )
geser-lingkaran
  1. Blok pada Timeline dari frame 1 hingga frame 30.
  2. Pilih jendela Properties, pada pilihan Tween pilih Motion.
properties-motion
Atau
Klik kanan mouse pada Timeline pilih Create Motion tween
create-motion-tween
Sekarang coba jalankan animasinya dengan cara pilih Control > Play atau tekan Enter pada keyboard
Catatan :
Anda dapat merubah gerakan awal dan akhir dengan cara:
Klik mouse pada frame 1 (untuk awal gerakan) kemudian ubah letak lingkaran pada layar, dan klik mouse pada frame 30 (untuk akhir gerakan) kemudian ubah letak lingkaran.
Untuk mempercepat gerakan animasi geser keyframe akhir ke kiri (<30) dan untuk memperlambat geser ke kanan (>30).
B.   Animasi Gerak dengan Pembesaran atau Pengecilan Bentuk
       Untuk membuat animasi gerak dengan pembesaran atau pengecilan bentuk, lakukan langkah yang sama dengan pembuatan animasi pergeseran tempat hingga langkah ke 10.
  • Kemudian klik frame 30 pada Timeline.
  • Pilih Free Transform Tool ( free-transform-tool ) , arahkan kursor ke salah satu titik sudut yang muncul di gambar lingkaran. Sambil menekan tombol Shift pada keyboard, Klik mouse pada titik tersebut dan geser ke arah luar hingga lingkaran membesar. Kemudian lepaskan mouse.
 Text Box:
Jalankan animasi dengan menekan tombol Enter.

Catatan:
Untuk membuat objek mengecil, saat menggeser sebuah titik pada lingkaran arahkan ke dalam hingga lingkaran mengecil.

C.   Animasi Gerak dengan berputar
       Untuk membuat animasi gerak dengan berputar, lakukan langkah yang sama dengan pembuatan animasi pergeseran tempat hingga langkah ke 10.
  • Pilih Selection tool ( pointer-tool ), kemudian double-klik pada lingkaran atau klik kanan mouse pada lingkaran, pilih Edit in Place.
edit-in-place
  • Pilih Paint Bucket Tool ( ember )
  • Pilih Window > Color Mixer

  • Pada jendela Color Mixer pilih Radial pada pilihan Type
color-mixer
  • Kemudian arahkan kursor ke lingkaran (jangan ditengah-tengah) dan klik mouse.
Catatan:
Langkah di atas bertujuan agar saat lingkaran diputar terlihat gerakkannya.
  • Tutup jendela lingkaran dan kembali ke jendela Scene 1 dengan cara klik pada tab Scene 1.
scene1

  • Kemudian klik frame 30 pada Timeline.
  • Pilih Modify > Transform > Rotate and Scale
  • Pada jendela Scale and Rotate isi kolom Rotate dengan 180 (angka ini menunjukkan berapa derajat objek akan berputar)
  • Pilih OK
Jalankan animasi
Catatan:
Untuk membuat animasi yang dapat bergerak berputar sambil membesar atau mengecil, Anda dapat mengisikan nilai Scale dan Rotate secara bersamaan pada jendela Scale and Rotate.




D.   Animasi Perubahan Bentuk
·         Buat sebuah file baru.
·         Dengan menggunakan Oval Tool (oval-tool) buatlah sebuah bentuk oval.
anim-bentuk
  • Klik di frame 40 pada timeline, klik kanan mouse pilih Insert Blank Keyframe.
anim-bentuk2
·         Di posisi frame ke-40, buatlah sebuah persegi.
anim-bentuk3
·         Klik mouse pada bagian tengah timeline, pilih jendela Properties, pada opsi Tween pilih Shape.
·         Jalankan animasi.

Untuk memperoleh animasi yang gerakannya lebih teratur, dapat digunakan Shape Hints. Sebagai contoh dapat dipraktekkan pada animasi yang baru saja kita buat.
·         Klik mouse pada frame pertama.
anim-bentuk5
·         Pilih Modify > Shape > Add Shape Hint, akan muncul bulatan kecil berwarna merah.
anim-bentuk6

·         Ulangi sebanyak tiga kali kemudian drag masing- masing titik a, b, c, d sesuai gambar.
anim-bentuk7
·         Klik mouse pada frame terakhir.
anim-bentuk8
·         Pindahkan masing-masing titik a, b, c dan d, sesuai gambar. Titik akan berubah menjadi hijau.
anim-bentuk9
·         Klik kembali mouse pada frame pertama. Dapat dilihat bahwa titik berubah menjadi kuning, artinya, Shape Hint telah berhasil.
anim-bentuk10
·         Jalankan animasi.

Kegiatan Belajar 3 MENGGAMBAR BENTUK DASAR, MENGGUNAKAN WARNA, DAN MENGIMPOR GAMBAR





TUJUAN
Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat menggunakan tool-tool pada Flash 8 untuk :
·           Menggambar bentuk-bentuk dasar (garis, kotak, lingkaran atau oval, dan bentuk bebas),
·           Mewarnai objek,
·           Mengolah teks, dan
·           Mengimport gambar.

URAIAN MATERI
A.   Menggambar Bentuk-bentuk Dasar
1.  Membuat garis dengan Line Tool
tool-lineFlash menyediakan pilihan untuk membuat beragam bentuk garis. Pilih ikon Line Tool (     ) pada toolbar di sisi kiri layar, kemudian lihat pilihannya di panel Properties di sebelah kiri bawah layar, Masukkan angka ketebalannya. Dan untuk memulai garis klik pada stage dan drag sepanjang yang anda inginkan.

gbr-garis-pensil2.  Membuat garis dengan Pencil Tool
tool-pencilUntuk membuat garis bebas, Pilih ikon Pencil Tool (    ) pada toolbar sisi kiri dan pilih warnanya pada panel Colors di bawahnya. Untuk membuat garis lurus, pada panel Options di bawah toolbar pilihlah opsi Straighten, untuk garis lengkung yang halus pilih Smooth, dan untuk membuat garis sesuai dengan gerakan mouse pilih Ink.
gbr-lingkran3.    Menggambar lingkaran atau elips
tool-ovalPilih Oval Tool (     ) untuk meng-gambar bentuk lingkaran atau elips. Untuk memulai menggambar, klik pada stage dan drag sebesar lingkaran atau oval yang Anda inginkan. Adapun jenis dan warna garis serta warna isi bentuk itu dapat dipilih pada panel Colors.

4.    Menggambar kotak
tool-rectanglegbr-kotakPilih Rectangle Tool (    ) untuk menggambar bentuk kotak pada layar. Untuk memulai menggambar, klik pada stage dan drag sebesar kotak yang Anda inginkan. Adapun jenis dan warna garis serta warna isi (fill) bentuk itu dapat dipilih pada panel Colors.


tool-rectangleApabila Anda ingin bentuk sudut kotak tidak berbentuk lancip tetapi berupa sudut yang halus (lengkung), Anda dapat mengubahnya dengan cara pilih Rectangle (    ) dan pilih Set Corner Radius yang berada di bagian bawah panel. Masukkan nilai 5 dalam kotak dialog Rectangle Setting dan pilih OK. Mulailah menggambar kotak dan hasilnya akan terlihat.
kotak-halusjendela-corner







gbr-segibanyak5.    Menggambar bentuk bersegi banyak
poligontool-rectangleUntuk menggambar bentuk bersegi banyak, Klik dan tahan pada Rectangle tool (      ), kemudian pilih Poligon tool (       ).
Untuk memilih bentuk bersegi banyak atau bintang, Pilih Options pada panel Properties, Kemudian pada jendela dialog Tool Settings yang muncul Anda dapat memilih bentuk yang diinginkan serta dapat mengisikan angka berapa segi banyak yang akan dibuat.


jendela-poligon
 
 

Untuk menggambarnya, Klik mouse pada stage kemudian drag sesuai besarnya objek yang diperlukan.




gbr-path6.    Menggambar bentuk bebas atau unik
tool-penUntuk membuat bentuk bebas atau unik Anda dapat menggunakan Pen Tool (       ). Klik mouse pada stage, drag dan lepas, maka garis akan terbentuk. Gerakkan kembali mouse ke arah yang diinginkan dan klik untuk membuat sudut atau anchor point. Bila bentuknya merupakan kurva tertutup maka dapat diberi warna.





Text Box:  7.    Mengubah Ukuran Objek
opsi-scaletool-freetransformtool-selectionPilih Selection Tool (      ) double klik pada gambar/ objek yang akan diubah ukurannya. Pilih Free Transform Tool (     ), maka pada ujung bentuk akan muncul kotak kecil atau handle. Pada panel Option pilih opsi Scale (     ). Klik pada salah satu titik kemudian Drag kotak kecil tersebut ke arah luar, ukuran akan membesar dan drag ke arah dalam maka ukuran akan mengecil.

Text Box:  8.    Memutar Objek
opsi-skewtool-freetransformtool-selectionPilih Selection Tool (      ) double klik pada gambar/objek yang akan diputar. Pilih Free Transform Tool (      ), maka pada ujung bentuk akan muncul kotak kecil atau handle. Pada panel Option pilih opsi Rotate and Skew (      ) pada panel Option kemudian arahkan mouse mendekati salah satu handle yang ada di sudut hingga cursor membentuk panah melingkar. Klik dan drag ke arah putaran yang diinginkan.
Text Box:
B.   Menggunakan Warna
1.    Mengganti Warna
tool-selectioncolor-fillUntuk mengganti warna isi atau garis dari bentuk yang telah dibuat dapat dilakukan dengan menyeleksi/memilih bentuk yang akan diganti dengan menggunakan Selection Tool (      ).  Double-klik gambar yang ingin diganti warnanya, kemudian pada panel Colors pilih opsi Stroke Color (         ) Klik dan pilih warna untuk mengubah warna garis atau pilih Fill Color (         ) Klik dan pilih warna untuk mengubah warna isi bentuk.






color-line


color-fill
 

2.    Gradasi
tool-selectionUntuk memberi warna gradasi bada suatu gambar/objek, pilih menu Window > Color Mixer, jendela Color Mixer akan muncul di sebelah kanan layar. Pilih gambar/objek yang akan diberi warna gradasi dengan Selection Tool (     ), pada pull-down menu di panel Color Mixer, pilih Type Radial. Pilih warna yang lebih terang untuk bagian sebelah kiri, sedangkan bagian kanan yang lebih gelap.





beri-gradasi



 
 











Untuk mengedit gradasi pilih Gradient Transform Tool  (     ). Klik dan drag handle yang muncul sesuai dengan arah yang diinginkan.


atur-gradasi
 














C.   Mengimpor Gambar dan Mengolahnya
1.    Mengimpor Gambar
       Untuk memasukkan gambar dalam format bitmap, seperti misalnya foto, ke dalam movie dapat dilakukan dengan cara mengimpor gambar/foto tersebut. Pilih menu File > Import > Import to Stage, lalu cari letaknya direktori gambar yang akan di impor.


mengimpor
 











2.    Memperbesar/memperkecil
tool-freetransformUntuk memperbesar atau memperkecil ukuran gambar dapat dilakukan dengan menggunakan Scale Tool (       ) pada toolbar disebelah kiri. Agar ukuran gambar tidak distorsi, tekan Shift pada keyboard pada saat memperbesar/memperkecil gambar.


edit-gbr1
 















3.    Mengubah Bitmap menjadi Vektor (Trace Bitmap)
       Dalam Flash terdapat fasilitas untuk mengubah gambar dalam format bitmap menjadi vektor, yaitu menu Trace Bitmap. Fasilitas ini berguna untuk mengurangi besarnya file karena penggunaan gambar bitmap dalam animasi. Namun tentunya kualitas gambar bitmap itu sendiri akan mengalami penurunan.
tool-selectionUntuk mengaplikasi Trace Bitmap pada gambar/foto yang telah kita impor, sebelumnya pilih/seleksi terlebih dulu gambarnya menggunakan Selection Tool (     ) pada toolbar.
Kemudian pilih menu Modify > Bitmap > Trace Bitmap


edit-gbr2
 











edit-gbr3Setelah muncul kotak dialog Trace Bitmap, masukkan angka pada kolom Color Threshold dan Minimum Area. Semakin besar angka yang dimasukkan semakin besar pula file yang dikompres. Namun sebaiknya tidak memasukkan angka lebih kecil dari 10 (sepuluh) karena pengaruhnya  pada pengurangan besarnya file sebagai tujuan utama Trace Bitmap akan sangat kecil. Bahkan pada beberapa komputer (dengan spesifikasi rendah) akan mengakibatkan hang, karena komputer dipaksa bekerja terlalu keras untuk menguraikan gambar tersebut.





edit-gbr4Setelah proses Tracing Bitmap selesai, pilih menu Modify > Group, agar gambar yang sudah di-trace tersebut terkumpul sebagai satu image.






4.    Pengolahan Gambar lebih lanjut
Untuk mendapatkan gambar dengan hasil olahan lebih lanjut, disarankan untuk menggunakan software lain yang memang dikhususkan untuk mengolah gambar/foto, seperti; Macromedia Fireworks, Adobe Photoshop atau Corel Photopaint. Flash digunakan pada saat gambar tersebut telah siap untuk dianimasikan.