Memahami corak animasi FLASH CS4

Assalammualaikum dan Salam Sejahtera semua, CS4 merupakan produk baru bagi ADOBE. Ianya telah lama berada dipasaran dan telah ramai antara kita yang menggunakannya. Akan tetapi bagi flash designer, FLASH CS4 merupakan satu perkara baru dan saya pasti tak ramai designer telah beralih kepada CS4.

Ini kerana interaksi animasinya ada sedikit perubahan di mana motion tween yang sebelum ini kita guna di dalam FLASH terdahulu telah ditukar kepada CLASSIC TWEEN. Motion Tween yang baru ini pula masih mengekalkan nama yang sama cuma cara kendaliannya sahaja berlainan. Kerana apa? Kerana motion tween yang baru ini telah bergabung dengan motion guide versi FLASH terdahulu. Bagi pengguna baru ianya tidak mendatangkan masalah tetapi pengguna lama ada sedikit kekeliruan. Tetapi ianya boleh diperbaiki dengan segera jika kita dapat memahami interaksi animasi yang baru ini. Motion Tween yang baru ini memberi kemudahan 10 kali ganda kepada kita sebagai FLASH designer.

Jadi jangan takut. Mari kita cuba mengikuti penerangan serba ringkas tentang animasi ini.

AYOH!!!

Langkah 1 :
Sediakan satu stage kosong. Saya menggunakan file FLASH 400 x 400 dengan mode ACTION SCRIPT 2.0 berlatarkan warna gelap

Langkah 2 :
Buatkan satu kotak (tanpa outline) di atasnya dan convert to symbol MOVIE CLIP (shotcut F8)

Langkah 3 :
Right klik pada frame 50 dan pilih menu insert frame (shortcut F5)

31

Langkah 4 :
Right klik pada mana-mana frame dan pilih menu create motion tween

41

Ok sekarang ia telah menjadi warna biru. Dalam animasi CS4 ini kita akan kurang lakukan insert keyframe sebab ianya akan tersedia sendiri dengan hanya gerakkan sahaja kotak tersebut pada sesuatu tempat. Sila klik pada frame 10 dan gerakkan kotak anda ke arah atas (rujuk imej di bawah)

411

Kemudian buatkan pergerakan yang berlainan seterusnya. Klik pada frame 20 = gerakkan kotak, klik pada frame 30 = gerakkan kotak, klik pada frame 40 = gerakkan kotak. Maka hasilnya akan jadi seperti di bawah

42

Mudah bukan? Tekan CTRL + ENTER untuk melihat hasilnya.

Langkah 5 :
Dari animasi yang telah kita rangka tadi kita boleh adjust setiap titik animasi yang ada untuk mengubah tempat dan arah animasi tersebut. Sebagai contoh anda klik pada frame 10 dan gerakkan kotak itu ke tempat lain. Maka tempat animasi dan arahnya akan berubah.

Langkah 6 :
Selain itu, kita juga boleh membuat garisan animasi itu menjadi lengkung.

  • Klik pada frame 20
  • Letakkan selection tool betul-betul di atas garisan hijau (garisan animasi) sehingga keluar tanda lengkung di bawah selection tool

61

  • Tolakkan garisan tersebut ke atas mahupun ke bawah. Ikut kreativiti anda

611

Maka hasilnya animasi anda akan kelihatan smooth dan lancar dengan adanya lengkungan

Langkah 7 :

  • Klik pada frame 30 pula
  • Kali ini saya buatkan lengkungan ke dalam

73

  • Gunakan sub selection tool pula
  • Klik pada titik tengah animasi frame 30 itu
  • Maka ianya akan jadi seperti di bawah

711

  • Gunakan subselection tool dan klik pada point lengkungan anchor (teknik ini sama seperti di dalam AI) untuk adjust bentuk lengkungan yang lebih cantik (rujuk imej di bawah)

721

Hasilnya :

731

Maka bila anda test movie animation ini hasilnya cukup menarik. Apa yang membezakannya adala kreativiti anda untuk membentuk lengkungan animasi tersebut. Secara amnya teknik animasi CS4 ini lebih mudah dan teratur. Jika di versi terdahulu kita terpaksa membuat beberapa layer untuk merge dengan motion guidebagi mendapatkan lengkungan seperti itu, tetapi di CS4 ia mudah dan cepat.

Oleh itu JOM BERALIH KE FLASH CS4!!!

Tutorial ini juga boleh didapati di www.sifoo.com


75 Responses to “Memahami corak animasi FLASH CS4”

  1. Ian says:

    .

    tnx for info!!…

  2. Andre says:

    .

    hello!…

  3. bill says:

    .

    tnx for info….

  4. donald says:

    .

    thank you!!…

  5. Max says:

    .

    thanks….

  6. herbert says:

    .

    thank you!…

  7. allen says:

    .

    tnx for info!…

  8. rex says:

    .

    thanks!…

  9. Marion says:

    .

    tnx for info!!…

  10. Leroy says:

    .

    thanks!…

  11. lloyd says:

    .

    good!!…

  12. jaime says:

    .

    hello….

  13. peter says:

    .

    thanks for information!…

  14. jackie says:

    .

    thanks!…

  15. terrence says:

    .

    thanks for information….

  16. Stanley says:

    .

    thanks for information!!…

  17. max says:

    .

    thanks for information!…

  18. Robert says:

    .

    tnx for info….

  19. willard says:

    .

    hello!!…

  20. Jamie says:

    .

    thanks for information!!…

  21. terry says:

    .

    thank you….

  22. Max says:

    .

    thanks!…

  23. Edwin says:

    .

    tnx!…

  24. Austin says:

    .

    tnx for info!…

  25. Theodore says:

    .

    thanks for information….

Komen Anda

You must be logged in to post a comment.

Copy Protected by Chetan's WP-CopyProtect.