7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Animation

Ilustrasi Menghidupkan Sebuah Bola Yang Memantul Pada Bagian 1 - Adobe Flash

Scroll to top
Read Time: 8 mins

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

Tutorial ini mempelajari teknik yang terdapat dalam Bagian 1 dari Illustrate dan Animate a Bouncing Ball series. Kami akan menggunakan alat 3D Illustrator untuk memperbaiki gerakan berputar dari Flash pada bola yang memantul dan melihat hasil di antara dua aplikasi. Langkah-langkah yang dilakukan juga dapat diikuti secara betahap dari Bagian 1 ini.

Pratinjau Gambar Akhir

Berikut adalah animasi terakhir yang akan kita kerjakan. Ingin akses ke file Sumber Vektor penuh dan salinan yang dapat didownload dari setiap tutorial, termasuk bagian ini? Bergabunglah dengan VECTORTUTS PLUS hanya 9 dollars/ month.

Langkah 1: Dokumen Baru

Mari kita mulai dengan membuka dokumen baru (File> New ...). File Flash File (ActionScript 2.0) perlahan saja.Versi Actionscript tidak relevan karena kita tidak akan menggunakan itu.

Langkah 2: Pengaturan Dokumen

Gunakan Properties Inspector di bagian bawah layar Anda untuk memasukkan Document Properties, klik tombol dimensi. Pertama, beri judul dokumen Anda, lalu beri Stage (area dokumen Anda yang akan terlihat saat dipublikasikan) dimensi 600px x 400px. Warna latar belakang kita akan menjadi putih, lalu ubah Frame Rate menjadi 21 fps (Frames Per Second). 21 fps memberikan tingkat animasi yang cepat dan lancar.

Langkah 3: Lapisan

Organisasi adalah kunci saat bekerja dengan Flash, jadi sebelum kita mulai menggambar bola kita, beri nama layer yang akan dibuat. Klik dua kali Layer 1 dan kita akan menyebutnya "Ball."

Langkah 4: Bola

Pilih Oval Tool, tentukan stroke dan warna fill, seperti yang ditunjukkan. Berikutnya menggambar lingkaran seragam (dengan menahan Shift dan menyeret mouse). Juga, gunakan Properties Inspector untuk memberi bobot Stroke 3px.

Langkah 5: Menciptakan Simbol

Dengan membuat simbol di Flash Anda dapat menggunakan beberapa contoh objek yang sama dalam satu file. Semua simbol dapat diakses dari palet Perpustakaan (Window> Library). Dengan mengubah simbol, semua contoh simbol itu di dalam file akan diubah.

Kita akan mengubah lingkaran kita menjadi simbol yang akan menjadi bola kita. Pilih seluruh lingkaran dan tekan F8. Nama itu "mc_ball," pilih untuk mengubahnya menjadi simbol Movie Clip dan klik OK.

Langkah 6: Bayangan

Tambahkan lapisan kedua di bawah lapisan "Bola" dan menyebutnya "Bayangan." Dalam bingkai pertama lapisan ini menarik elips untuk membentuk bayangan di bawah bola. Hapus stroke dan warnai # E2E0E5. Mengubahnya menjadi simbol seperti yang Anda lakukan sebelumnya dengan bola, lalu beri nama "mc_shadow".

Langkah 7: Posisi

Posisikan dua simbol pada ketinggian kira-kira dengan benar untuk menunjukkan bahwa bola sedang berada di tanah. Pada palet Align (Window> Align) cek To Stage dan atur kedua simbol secara horisontal.

Langkah 8: Tambahkan Keyframes

Kita telah menciptakan symbol dalam bentuknya yang paling mendasar, sekarang mari kita mulai menghidupkannya. Tahan Shift dan klik pada frame 20 dari kedua lapisan pada Timeline. Pergi ke Modify> Timeline> Convert to Keyframes atau tekan F6 untuk mengubah frame ini menjadi Keyframes. Keyframes mewakili titik sepanjang garis waktu di mana sesuatu terjadi. Poin pada Timeline ini akan menjadi akhir dari animasi; Dengan kata lain bola akan melambung dari tanah, mencapai puncaknya dan kembali ke posisi awal ini. Hal yang sama berlaku untuk bayangan kita: ia akan memudar saat bola naik dan kembali ke keadaan awal ini pada frame 20.

Langkah 9: High Point

Sekarang mari kita tambahkan titik di mana bola berada pada posisi tertinggi. Pilih frame 10 pada kedua lapisan dan tekan F6 untuk mengubahnya menjadi Keyframes.

Langkah 10: Pindahkan!

Dengan Slider yang masih di frame 10, gerakkan simbol bola secara vertikal ke atas ke beberapa titik di Stage. Pilih Free Transform Tool dan buat contoh simbol "shadow_main" lebih lebar.

Akhirnya, dengan bayangan yang dipilih, masuk ke Color on the Properties Inspector dan ubah ke nilai Alpha 30%.

Langkah 11: Tweening

Tweening adalah proses dimana Flash secara otomatis menghasilkan semua tahap antara benda atau bentuk dua keadaan.

Kita akan membuat bingkai di antara bingkai pertama dan setengah sepanjang animasi pada frame 10. Pilih bingkai antara 1 dan 10 di kedua lapisan dan rujuk sekali lagi ke Properties Inspector. Pilih Motion dari Tween pilih dan Anda akan melihat frame resultan menjadi ungu.

Langkah 12: Permudah

Gerakkan Slider bolak-balik sepanjang garis waktu dengan mouse Anda dan Anda akan melihat bola dan bayangan animasi dengan baik. Kecepatan gerakan ini bagaimanapun sepenuhnya seragam. Kita membutuhkan bola untuk melambat saat mencapai puncaknya dan kita bisa melakukan ini dengan mudah.

Sekali lagi, dengan satu frame dari setiap lapisan yang dipilih (di area tweened) lihat Properties Inspector. Ubah Tweening menjadi Ease out dengan nilai 100. Ini akan memperlambat bola pendakian kita.

Langkah 13: Kembali ke Bumi

Setelah berhasil animasi naiknya bola, ulangi langkah tweening untuk frame 11-20. Kali ini memudahkan gerak tween di -100, menyebabkan bola melaju saat mendekati tanah.

Langkah 14: periksalah!

Tekan Command + Enter untuk melihat bola animasi Anda sejauh ini. Seharusnya terlihat seperti animasi yang ditunjukkan di bawah ini.

Langkah 15: Sentuhan Ekstra

Dengan asumsi bola kita terbuat dari sesuatu yang sedikit lebih fleksibel daripada berlian maka akan berubah bentuk sedikit pada benturan dengan tanah. Mari tambahkan satu Keyframe terakhir dimana bola diratakan sesaat.

Pilih frame 21 pada kedua lapisan dan tekan F6 untuk mengubahnya menjadi Keyframes. Kemudian gunakan Free Transform Tool untuk squash simbol "bola" dari tepi atas (tahan Alt seperti yang Anda lakukan untuk menjaga tepi bawah di tempat itu).

Langkah 16: Perhatikan denggan Detail

Gerakan memantul kita sudah lengkap. Sekarang kita perlu menambahkan detail lebih lanjut dan gerakan ke bola kita. Klik dua kali simbol "bola" pada salah satu keyframes untuk memasukkan garis waktu simbol itu. Anda akan melihat lokasi Anda saat ini di bawah garis waktu - Anda harus berada dalam "Scene 1, mc_ball."

Langkah 17: Lapisan 2

Klik ikon Insert Layer untuk membuat Layer kedua di atas yang sekarang. Copy dan Paste lingkaran di tempat dari Layer 1 ke Layer 2 (Command + C, Command + Shift + V). Sekarang beri nama lapisan bawah "Ball Spinning" dan yang teratas "Shade." Akhirnya, kunci layer "Ball Spinning".

Langkah 18: Chop Shop

Gambarkan lingkaran besar di suatu tempat di atas panggung, pastikan warnanya berbeda dengan lingkaran yang ada.

Posisikan lingkaran yang lebih besar sehingga apa yang masih bisa dilihat dari lingkaran kuning adalah tentang bentuk yang tepat untuk shading pada bola. Lepaskan semua benda.

Sekarang pilih lingkaran yang lebih besar sekali lagi dan tekan Delete. Dengan meletakkan bentuk yang tidak dikelompokkan atau tidak dilambangkan satu sama lain, Anda menggabungkannya dengan cara yang sama seperti yang Anda lakukan dengan piksel dalam aplikasi cat. Dengan sekarang menghapus lingkaran yang lebih besar yang tersisa dengan hanya bulan sabit kecil yang akan menjadi bayangan pada bola. Pilih dan lepaskan sisa goresan dan warnai sabit # E2E0E5.

Langkah 19: Shadow Opacity

Seperti bulan sabit ini bertindak sebagai shading pada bola kita akan menyenangkan untuk memberikan Opacity Multiply. Untuk melakukan ini, kami harus mengubahnya menjadi Simbol Klip Video (Anda harus terbiasa dengan tindakan ini sekarang). Tekan F8 dan beri nama "mc_ball_shading" (nama-nama ini mulai cerdik). Rujuk ke Property Inspector dan ubahlah Blend to Multiply. Sempurna!

Langkah 20: periksalah!

Tekan Command + Enter lagi untuk melihat bola animasi Anda sejauh ini. Seharusnya terlihat seperti animasi di bawah ini.

Langkah 21: Manipulasi vektor lebih lanjut

Setelah berurusan dengan shading Anda sekarang dapat mengunci lapisan "Shade" (bahkan mungkin membuatnya tidak terlihat untuk mempermudah kerja) dan membuka "Ball Spinning". Kita akan menambahkan sebuah pola untuk memberi lingkaran agar kita bisa melihat bola pantai itu. Gunakan Oval Tool untuk menggambar oval besar di atas panggung. Perlu stroke 1px dan #FFFFFF, tapi tidak ada warna fill.

Langkah 22: Hapus Kelebihan

Tempatkan stroke seperti yang ditunjukkan pada gambar di bawah dan lepaskan. Sekarang pilih porsi stroke yang berada di luar bola dengan hanya mengkliknya saja. Seperti membuat bulan sabit shading tadi, semua vektor pada lapisan ini telah bergabung bersama, membentuk daerah yang terpisah. Hapus bagian terluar dari stroke.

Langkah 23: Bersihkan dan Ulangi

Gambarkan beberapa oval lain dan letakkan di atas lingkaran sehingga mereka menyatu di bagian atas di suatu tempat. Kemudian keluarkan kelebihan dari luar lingkaran. Oval tidak semua harus memiliki ukuran atau proporsi yang sama, coba untuk menciptakan sesuatu yang sedikit seperti gambar di bawah ini. Apa yang akan Anda ciptakan adalah serangkaian segmen yang sekarang dapat diwarnai secara individual.

Langkah 24: periksalah!

Warna segmen alternatif dengan # EA512D dan menghapus semua potongan pukulan putih dari bola. Tekan Command + Enter untuk melihat apa yang telah Anda buat sejauh ini. Seharusnya terlihat seperti animasi di bawah ini.

Langkah 25: Sebagai Ball Turns

Mari tambahkan dimensi akhir gerakan ke animasi, kita akan mendapatkan bola untuk berputar perlahan saat memantul. Untuk melakukan ini pertama-tama kita membutuhkan bola di atas layer "Ball Spinning" untuk diubah menjadi simbol. Klik pada keyframe pertama dari lapisan untuk memastikan semuanya dipilih. Sekarang tekan F8 dan beri nama simbol Movie Clip ini "mc_ball_base." Anda akan melihatnya ditambahkan di antara simbol-simbol lain di palet Library (Window> Library).

Langkah 26: Tambahkan Bingkai

Pilih frame 32 dari timeline pada layer "Spinning Ball" dan tekan F6 untuk membuat Keyframe baru. Pilih bingkai 32 dari timeline pada layer di atas dan tekan F5. Ini akan menciptakan bingkai baru, namun karena simbol "Shade" tidak berubah sama sekali, kita tidak perlu membuat Keyframe ini. Kita hanya perlu memastikan bahwa ketika Slider mencapai titik ini sepanjang garis waktu, simbol "Shade" ada.

Mengapa kita memilih frame 32? Nah, dengan berbuat demikian kita akan membuat bola kita berputar setiap 32 frame. Bola kita memantul sekali setiap 20 frame dan waktu yang tidak teratur ini akan berarti bahwa bola menemukan dirinya pada tahap spin yang terus menerus berbeda selama pentalan. Jika ini belum jelas, akan segera.

Langkah 27: Rotational Tweening

Pilih bingkai di suatu tempat di sepanjang garis waktu pada lapisan "Ball Spinning" dan lihat Properties Inspector. Pilih Motion tween seperti yang Anda lakukan dengan gerakan memantul. Kali ini, kami tidak menginginkan nilai Kemudahan, kami membutuhkan bola untuk terus berputar dengan kecepatan yang sama. Pilih CW (Searah jarum jam) dari menu tarik-turun Rotate dan biarkan 1 sebagai berapa kali bola akan berputar selama tween. Tentu saja, lapisan "Shade" tidak terpengaruh dan naungan karenanya akan tetap berada pada posisi yang sama di muka bola.

Kesimpulan

Jadi begitulah! Tekan Command + Enter lagi dan periksa apakah gerakan itu sesuai keinginan. Jika perlu perubahan, Anda dapat meningkatkan jumlah frame di masa permulaan, mengubah tinggi bola, jumlah waktu yang diputar, dll. Tutorial ini memberi Anda wawasan tentang: garis waktu dan lapisan Flash, perilaku Flash alat gambar vektor, hirarki simbol dan objek Flash, dan gerakan tweening.

Saya harap Anda menikmatinya! Bagian 2 akan terbit bulan depan dan akan memperluas teknik ini, meningkatkan prosesnya dengan sentuhan Illustrator.

Berlangganan ke VECTORTUTS RSS Feed untuk tetap up to date dengan terbaru vektor tutorial dan artikel.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.