Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 3D
Code

Membuat Animasi 3D Realistis di Flash CS4

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Flash CS4 hadir dengan beberapa perubahan besar dan fitur yang masih memukau kita bahkan setelah rilis Flash CS5. Flash sekarang memiliki kemampuan untuk bekerja dengan objek-objek di ruang 3D secara langsung di dalam lingkungan kerja.

Meski masih merupakan fitur dasar dibandingkan dengan apa yang bisa Anda lakukan dengan 3D di kelas ActionScript, alat ini membuka pintu bagi para desainer dan animator yang tidak banyak tahu tentang kode. Hal ini memungkinkan mereka untuk mulai memindahkan objek mereka ke dalam ruang 3D tanpa perlu menggunakan metode lama (seperti mengimpor animasi 3D dalam urutan gambar, dll.)

Seiring dengan alat 3D, Flash telah mengubah cara kita memahami gerak tweening dengan menambahkan gaya tween motion baru, yang lebih mirip dengan animasi auto-key di After Effects.  Seiring dengan perubahan gerakan tweening, Flash hadir dengan Motion Editor. Panel ini memiliki banyak fitur dan kemampuan yang memberi animator kontrol lebih dari animasi di Flash menggunakan kurva animasi.

Panel Editor Motion tidak hanya meningkatkan animasi dengan memberi lebih banyak pilihan melalui kontrol kurva, namun juga memberikan kontrol atas easing animasi, memberikan tampilan yang lebih realistis. Konsep easing dikenal di banyak aplikasi animasi seperti After Effects, namun sebelumnya begitu mendasar di Flash dan terbatas pada perubahan nilai easing dari 100 menjadi -100.  Fitur easing yang lebih baru memberi Anda lebih banyak kemampuan untuk mengendalikan easing animasi seperti yang akan kita lihat pada langkah-langkah di bawah ini.

Dalam tutorial ini, kita akan menggabungkan fitur easing 3D dengan membuat animasi 3D di Flash dan juga menerapkan kurva easing.


Hasil Akhir Pratinjau

Mari kita lihat hasil akhir yang akan kita dapatkan:

Bagian pertama dalam tutorial kita adalah membangun scene kartun untuk ruangan dengan pintu.


Langkah 1: Dokumen Baru

Buka dokumen Flash baru dengan dimensi 600px X 450px dan mulailah menggambar garis besar ruangan yang ditunjukkan pada gambar di bawah ini.

Perhatikan bahwa alat 3D hanya tersedia bila Anda memiliki pengaturan dokumen yang dipublikasikan untuk ActionScript 3 dan Flash Player 10 atau yang lebih baru. Selain itu, hanya bisa diterapkan pada simbol klip video.  Anda harus memastikan bahwa File Publish Settings (ditemukan di File > Publish Settings, secara mengejutkannya) diatur ke Action Script 3 dan Flash Player 10 atau lebih tinggi.


Langkah 2: Pintu

Potong area pintu dan letakkan di layer baru agar bisa dikendalikan menggunakan alat 3D.


Langkah 3: Detail

Sekarang, mari kita tambahkan beberapa detail ke latar belakang untuk memberikan tampilan kartun yang sesungguhnya. Kita juga akan menambahkan beberapa bayangan dan tekstur ke lantai dan pintu.


Langkah 4: "Pintu"

Konversikan simbol pintu ke klip video dan beri nama 'Door'.


Langkah 5: Aset Navigasi 3D

Aset navigasi 3D mencakup empat titik orbit, menyeret setiap orbit memungkinkan Anda memutar simbol di salah satu arah sebagai berikut:

  • Titik merah memungkinkan Anda memutar simbol pada sumbu X
  • Titik hijau memungkinkan Anda memutar simbol pada sumbu Y
  • Titik biru memungkinkan Anda memutar simbol pada sumbu Z
  • Menyeret titik oranye memungkinkan Anda memutar objek ke arah mana pun. Meskipun menyediakan rotasi yang bebas, ia tidak memberikan nilai rotasi yang akurat.

Ketika simbol pintu dipilih, pilih alat 3D. Siklus aset 3D muncul di tengah simbol klip video.


Langkah 6: Titik Rotasi

Klik pada titik pusat dari siklus 3D dan seret aset navigasi ke kanan tengah pintu untuk menjadikannya titik pusat di mana pintu berputar. Tampilan terakhir untuk latar belakang harus seperti di bawah ini.


Langkah 7: Garis Waktu

Pada langkah di atas, kami menyiapkan latar belakang kartun untuk animasi 3D melalui gerakan tweening.  Dalam animasi ini, kita akan menganimasikan pintu untuk membuka dan menutup dengan menggunakan alat 3D. Seret indikator garis waktu ke bingkai pertama di panel Timeline untuk memulai animasi.


Langkah 8: Pilih

Klik pada alat Rotate 3D dan klik pada simbol pintu. Perhatikan bahwa aset navigasi 3D muncul di sisi kanan objek.


Langkah 9: Buka Sesame

Klik di atas titik hijau dan seret untuk membuka pintu ke arah luar ruangan seperti yang ditunjukkan pada gambar di bawah ini.


Langkah 10: Putar

Pindahkan indikator timeline ke frame 50. Dan gunakan alat 3D Rotate untuk memutar pintu ke sisi lain ruangan seperti yang ditunjukkan pada gambar di bawah ini.

Kami sekarang telah menciptakan animasi 3D untuk pintu di Flash. Selanjutnya, kita akan menggunakan motion editor untuk menciptakan efek animasi yang lebih realistis dengan menggunakan kurva Easing di panel Motion Editor.  Sementara fitur pelengkap yang disempurnakan ini ditambahkan ke Flash CS4 dan rilis yang lebih baru, versi Flash yang lebih lama memiliki fitur easing yang disederhanakan melalui nilai Easing di panel properti.  Anda masih bisa menemukan nilai ini saat Anda klik di manapun dalam motion tweening, namun metode ini tidak pernah memberi banyak pilihan selain easing in dan out.

Panel Editor Motion terdiri dari kurva animasi yang mengendalikan properti objek melalui animasi selama jangka waktu.  Setiap kurva mewakili properti khusus untuk objek dan bertanggung jawab untuk itu berubah dari waktu ke waktu dan tingkat perubahannya.  Misalnya, kurva X mewakili animasi objek pada sumbu X. Nilai ini menjadi aktif saat Anda membuat gerakan tweening yang terkait dengannya.

Kurva easing di panel Motion mirip dengan sisa kurva animasi editor motion karena mereka memberi Anda kemampuan lebih untuk mengendalikan motion animasi yang realistis.

Ada dua metode utama untuk menciptakan kurva easing. Yang pertama adalah melalui menu drop-down Ease presets yang mencakup opsi easing yang siap. Metode kedua adalah membuat kurva easing kustom. Dalam tutorial ini kita akan mencoba kedua metode tersebut.


Sebelum kita melanjutkan, inilah gambaran singkat kurva easingdi panel Motion.

Di bagian Easing dari panel Motion Editor, Anda dapat menambahkan / menghapus dan mengedit kurva easing dengan hanya memilih kurva yang diinginkan. Sebelum kita melihat bagaimana menerapkan efek easing pada animasi 3D, kita akan melihat secara singkat bagaimana kurva Easing bekerja di panel Motion Editor.

Kurva easing adalah metode komprehensif untuk mengendalikan bagaimana animasi berakselerasi melalui gerakan tweening untuk menciptakan animasi yang lebih realistis; Ini menunjukkan percepatan atau perlambatan nilai animasi di sepanjang waktu.

Panel Editor Motion memberi Anda pilihan untuk membuat banyak kurva easing dan menetapkan kurva yang berbeda pada setiap properti gerak dan menerapkan berbagai easings pada masing-masing fitur. Pada langkah-langkah berikut, kita akan mulai dengan menerapkan preset easing ke animasi pembuka pintu.


Langkah 11: Pilih

Pilih klip video atau klik di manapun pada gerakan tweening, masuk ke panel Motion Editor dan arahkan ke bagian Ease.


Langkah 12: Tambah Ease

Klik ikon tambah di bagian Ease untuk menambahkan ease dari drop-down preset easing. Pilih easing Spring.


Langkah 13: Kurva Y

Pergilah ke kurva Rotation Y yang menampilkan animasi pintu. Dalam daftar drop-down Easing, pilih Spring. Tekan Ctrl + Enter untuk menguji animasi.

Anda akan melihat bahwa animasi pintu berubah dari animasi sederhana dari dua keyframes menjadi animasi kompleks dengan efek musim semi.  Selain itu, Anda dapat menambahkan preset easing lainnya dan mencobanya untuk melihat bagaimana hal itu mempengaruhi animasi pintu. Animasi harus seperti berikut:

Pada langkah-langkah berikut, kita akan membuat kurva easing kustom dan menerapkannya pada animasi pembuka pintu. Kita akan melihat lebih dekat bagaimana kurva bekerja dan bisa mengatasi bagaimana cara melakukannya.


Langkah 14: Menghapus Easing

Pertama, mari kita hapus easing sebelumnya dengan memilih No Ease dari daftar drop-down easing atau klik ikon minus pada bagian easing dan pilih easing yang ingin Anda hapus. Dalam contoh ini, kita akan menghapus easing Spring.


Langkah 15: Custom Easing

Klik ikon plus di samping bagian Ease dan pilih Custom dari daftar drop-down. Ini akan menciptakan kurva easing kustom baru dengan kurva hijau untuk menunjukkan bahwa hal itu dapat diedit.  Jika Anda membuat kurva easing kustom tambahan, setiap kurva akan memiliki warna unik yang terkait dengannya.


Langkah 16: Handles

Kurva ease bekerja sama seperti cara menggambar sebuah path. Anda dapat membuat poin di atasnya; Poin ini mewakili keyframes atau titik yang menunjukkan perubahan pada animasi easing.  Setiap titik memiliki dua handles untuk mengubah bagaimana bagian kanan dan kiri kurva terlihat. Sekarang, kita akan membuat poin pada kurva easing yang akan mempengaruhi animasi pintu:

Klik kanan pada kurva easing dan buat keyframes pada frame 10, 20, 30 dan 40


Langkah 17: 0 - 100

Kurva easing berkisar antara nol dan 100. Bila kurva bergerak menuju nilai nol, animasi bergerak menuju bingkai pertama dan memindahkan kurva ke nilai 100 berarti bergerak ke akhir animasi.  Juga, perhatikan bahwa kurva hard slip berarti akselerasi yang lebih cepat dan slow slip berarti akselerasi animasi yang lambat.

Kita akan mengedit poin posisi dan kurva untuk mempengaruhi akselerasi animasi. Pilih titik pertama dan pindahkan ke nilai pelonggaran 100.  Ini berarti animasi akan sampai pada titik ini dan hard slip berarti animasi akan berakselerasi dengan cepat.


Langkah 18: Poin

Pindahkan titik kedua ke nilai nol, titik ketiga untuk nilai 50 dan titik keempat bernilai 50.


Langkah 19: Smooooth

Gunakan point handler pada dua titik terakhir untuk membuat slip melengkung halus agar pintu tetap bernyawa di akhir animasi. Kurva easing terakhir harus seperti gambar di bawah ini:


Langkah 20: Uji

Tekan Ctrl + Enter untuk menguji animasi dan lihat bagaimana kurva easing baru mempengaruhi animasi pintu. Animasi terakhir untuk easing kustom akan terlihat seperti di bawah ini:


Kesimpulan

Ini adalah akhir dari tutorial. Ini bertujuan untuk membantu Anda memahami bagaimana menggunakan alat 3D Flash untuk menciptakan animasi di ruang 3D dan menerapkan fitur easing yang komprehensif di panel Motion melalui kurva easing.

Memahami kurva Easing dapat membantu Anda menciptakan animasi yang kompleks dan realistis dengan lebih mudah dan efisien dengan menerapkan kurva easing pada animasi alih-alih membuat banyak keyframes dalam gerakan tweening.

Anda juga akan menemukan tutorial video ini oleh Tom Green yang berguna dalam memahami lebih banyak tentang Editor Motion di Flash: Flash CS4 Motion Editor.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.