Motion Tweening - Adobe Firework

Tujuan nya adalah Menggerakan Stickman dari Point A ke B yg terdiri Dari 12 Frame. Ombak akan kelihatan sama tetapi dalam Speed yang berbeda. Yg kita perlu Lakukan Hanya Mengedit 2 Frame yang nantinya Akan dilakukan tweening untuk menghasil kan pergerakan otomatis.

1. Pertama ambil dulu sample gambarnya disini Download. Setelah itu buka didalam firework

2. Pada file contoh, kita memiliki dua Grup grafis vektor. Surfing stickman dan gelombang. Mari kita mulai dengan mengubah Grup ke symbol, yang merupakan syarat untuk memungkinkan tweening.

• Buka Layers inspector dengan menekan F2 di keyboard atau click Window > Layers.
• Pilih Surfer group di layar Layers inspector.
• Lalu convert grup ke symbol dengan menekan F8 atau click Modify > Symbol > Convert to Symbol.
• Beri nama symbol ini Surfer dan Type: Graphic, lalu click OK.

Lakukan hal yang sama untuk vektor Gelombang dan beri nama Wave type grapic

3. Surfer dan Wave symbols terletak di start position (A), ok copy keduanya dan letakan di end position (B).

Melakukan Animating Surfer:

• Pilih Surfer dalam Layers inspector lalu click Edit > Copy. Lantas click Edit > Paste. Kita akan melihat surfer symbol lain di dalam Layers inspector.
• Taruh surfer dibelakang wave, dalam Layers inspector, drag  top layer Surfer kebawah waves layer. Maka urutan order Layers menjadi Wave, Surfer (B), Surfer (A).
• Pilih  layer paling bawah dari surfer dan pindahkan ke  end (B) position, seperti diatas.

4. Sekarang letak surfer di start and end position (A and B) job done! Sekarang tinggal Fireworks menyelesaikan animasinya untuk kita:

• Pilih Keduanya dari Surfer symbols dalam Layers inspector dengan click sati surfer lalu, tekan dan tahan CTRL dilanjutkan dengan click surfer kedua.
• Click Modify > Symbol > Tween Instances… untuk membuka tweening properties.
• Kita akan ditanya berapa step yang dibutuhkan A and B position pada surfer. Masukan 10. Tartinya setelah position A, Fireworks akan memindahkan surfer sepuluh langkah kedepan menuju position B, dan sepuluh lagi sampai di position B.
• Agar terjadi animasi di seluruh frame,  select ‘Distribute to frames’ dibagian Tween Instances box, click OK. Fireworks membutuhkan waktu untuk mengimplementasikan Tweening (Jika kita memilih 100 step mungkin akan membutuhkan waktu lebih dari dua menit)
• Setelah sukses maka surfer B akan menghilang. Jangan khawatir! karena surfer kita sekarang tersebar dalam frame - frame yang berbeda

5. Stickman kita sekarang surfing sekitaran canvas, bagaimana kita mengetestnya? Click  Play button di atas inspektur properti Anda. Anda akan melihat stickman dengan lancar surfing di kanvas, meskipun pada laut kosong. Langkah selanjutnya adalah membuat animasi Wave nya

6. Yang kita butuhkan adalah seperti yang ada di langkah 3:

• Copy waves symbol dan paste duplikat copy nya.
• Pindahkan waves symbol yang baru (paling atas) ke kanan, kita akan menindahkan frame sejauh 120px maka setiap frame berikan 10px.
• Select keduanya dari wave symbols dan click Modify > Symbol > Tween Instances…
• Choose 10 steps dan distribusikan ke setiap frames, then click OK.

Job Done!

Source: www.itmdesign.co.uk

Sumber https://www.blakbin.com/

Bagikan Artikel ini