7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Designing

Flash Tips dan praktik terbaik untuk desainer: animasi

Read Time: 11 mins

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

Untuk desainer, sebagian besar dari Flash's banding terletak pada kemampuannya untuk membiarkan pengguna menambahkan gerak dan interaktivitas ke apa saja. Untuk kebanyakan pengguna baru, Wow nyata! faktor datang ketika mereka pertama kali mencari cara untuk membawa hal-hal hidup menggunakan Flash timeline dan ActionScript.

Hari ini kita akan melihat bagaimana kita dapat membuat sebagian besar alat-alat Flash melempar pada kami untuk menambahkan animasi simbol kami. Ini bisa menjadi topik yang cukup padat untuk menutupi mengingat berapa banyak aplikasi telah berkembang sebagai pusat multimedia sejak awal, tapi aku akan mencoba dan menjaga hal-hal ringkas dan didekati. Untuk mendapatkan liputan mendalam, merasa bebas untuk memeriksa Tutorial lain di Activetuts + dan saya yakin Anda akan menemukan apa yang Anda cari.

Meskipun posting ini ditulis untuk Flash Professional CS5, sebagian besar tips harus bekerja baik di versi lama. Aku akan mencoba dan membuat sebuah titik untuk menyorot dimanapun sesuatu sangat spesifik ke versi terbaru Flash.


Daftar istilah penghilang...

Sebelum kita masuk ke rincian, mari kita luangkan beberapa menit untuk pergi ke beberapa jargon kita akan mengacu ke sini. Sejak paling Flash pemula datang dengan sangat sedikit atau tidak ada paparan konsep gambar bergerak, beberapa konsep-konsep ini dapat sedikit menakutkan untuk mendapatkan. Yang terbaik adalah kita membahasnya sebelum menyelam jauh ke dalam aspek praktis dari animasi dan interaktivitas dalam Flash.

WTH adalah FPS?

FPS (atau frame rate), sangat sederhana, mengacu pada jumlah bingkai diberikan setiap detik. Gambar bergerak - animasi atau video - adalah serangkaian gambar diam, diproyeksikan satu demi satu dengan kecepatan sangat tinggi, menyebabkan ilusi gerak. Jika Anda telah melihat film reel dari waktu ketika mereka benar-benar menggunakan film untuk menembak video, Anda akan melihat bahwa itu hanya sebuah strip dengan banyak gambar diam. Seberapa cepat proyektor film berjalan melalui mereka adalah apa yang disebut FPS.

Default FPS di versi sebelumnya Flash adalah 12, yang kini telah bumped hingga 24 selama beberapa versi. Ini bisa jadi karena karena Flash telah berkembang dari menjadi alat animasi vektor murni untuk pilihan cara memutar video di web. Sejak video perlu bermain minimal 24 fps berjalan lancar, wadah Flash juga kebutuhan kejar-kejaran. Juga, Flash player telah meningkat secara drastis sekarang dan dapat membuat data volume lebih tinggi diperlukan untuk bermain di fps tinggi tanpa mengambil kinerja yang memukul.

Bentuk vs gerak tween

Diambil langsung dari kitab animasi cel, tweening (pendek untuk betweening) adalah metode yang digunakan untuk membuat frame interim antara dua bingkai kunci. Misalnya, jika saya untuk menghidupkan tangan karakter dari itu adalah posisi yang biasa untuk menunjuk ke sesuatu, akan menarik posisi pertama dan terakhir, dan kemudian menarik frame di antara untuk mensimulasikan gerakan. Berapa banyak frame yang berada di antara dua frame kunci ditentukan oleh laju bingkai animasi dan waktu di mana Anda membutuhkan gerakan untuk diselesaikan. Gerakan yang lebih lambat berarti lebih banyak tween frame, dan sebaliknya.

Flash membuatnya mudah bagi kita dengan menggambar frame tween itu sendiri, tidak seperti apa yang akan Anda lakukan dalam animasi digambar tangan tradisional. Sejak CS4, ada tiga cara berbeda untuk tween - bentuk, tween klasik dan gerak. Mari kita memahami setiap satu sedikit:

Shape tween: paling dasar jenis tween, meskipun Anda mungkin tidak ingin menggunakan ini terlalu banyak. Anda mulai dengan bentuk dan mengubahnya dari waktu ke waktu. Kecuali kedua bentuk apakah tidak kompleks dan sangat mirip dengan satu sama lain, Anda mungkin akan membutuhkan banyak latihan untuk mendapatkan ini bekerja. Anda dapat menambahkan bentuk petunjuk untuk memaksa titik-titik tertentu pada bentuk berperilaku selama transformasi.

Klasik tween: sampai versi CS3, ini adalah metode tweening utama di Flash, yang seperti yang dicintai oleh semua orang seperti itu dibenci. Anda pada dasarnya mengambil simbol dan mengubah sifat antara keyframes - seperti ukuran, posisi, efek warna, dll. Karena metode tergantung pada dua negara yang berbeda - satu di setiap keyframe - mengedit simbol animasi bisa cukup tugas membosankan. Sesuatu yang sederhana seperti bergerak simbol membutuhkan Anda untuk memilih simbol pada setiap keyframe dan memindahkannya persis jumlah yang sama.

Motion tween: Sejauh ini merupakan peningkatan terbesar pada kemampuan animasi Flash, motion tween membawa editor gerak After Effects yang sangat dicintai ke Flash. Perubahan terbesar antara metode lama dan baru adalah bahwa gerakan tween sekarang berbasis objek daripada berbasis waktu seperti pada metode lama. Anda mendaftar semi-remaja simbol, dengan halus kontrol atas cukup banyak aspek fisik dari objek melalui panel editor gerak. Tentu saja, Anda masih menerapkan gerakan pada timeline, tapi sekarang mungkin untuk memilih simbol, bergerak dan memiliki animasi yang membawa dengan itu.

Mengurangi

Kita tahu bahwa ketika bola tetes di dunia nyata, kecepatan adalah tidak selalu sama. Ia mengambil kecepatan saat mendekati tanah, lalu memantul pada kecepatan yang kira-kira sama dan melambat ketika mencapai puncak di mana ia kembali ke tanah. Ketika Anda menghidupkan objek di Flash, mereka akan mengubah kecepatan bahkan secara default. Jika Anda sudah bertanya-tanya mengapa teks animasi Anda masuk dan keluar tahap terasa datar, ini adalah alasan. Dengan pelonggaran, Anda pada dasarnya dapat memberitahu Flash memiliki gerakan mempercepat atau memperlambat tanpa harus men-tweak posisi secara manual pada setiap frame.


Baru gerak Tween kebaikan

Salah satu masalah terbesar dengan tween motion lama di Flash - sesuatu yang saya tidak sadari sampai saya melihat yang baru - adalah bahwa animasi itu didominasi berbasis waktu. Anda menciptakan keyframe pada lapisan, ditempatkan simbol di atasnya, ditambahkan keyframe lain beberapa frame pergi dan dimodifikasi simbol. Pada dasarnya, Anda sedang berhadapan dengan dua contoh yang berbeda dari simbol. Satu bergerak buatan tidak nyata berbeda dengan contoh keyframe berikutnya. Tentu, kita semua pergi melalui neraka berusaha reposisi elemen setelah menghidupkan mereka, tapi itu hanya bagaimana Flash bermain kartu.

Kemudian dengan CS4 datang editor gerak, dan hal-hal berubah selamanya. Sayangnya, editor gerak adalah bukan yang terbaik dipahami bagian dari Flash bahkan setelah satu setengah versi bertahap. Biarkan saya mengambil beberapa saat kemudian dan membahas beberapa informasi menarik tentang bagaimana hal ini bekerja, dan bagaimana Anda bisa membuatnya bekerja untuk Anda.

Dua cara untuk menghidupkan

Sekarang Anda bisa mengedit simbol Anda dalam dua cara yang berbeda untuk memulai animasi - dari dalam editor gerak, atau langsung pada tahap seperti dulu. Setiap parameter fisik dari simbol yang dipilih - seperti x & koordinat y, skala, efek warna, filter, dll - sekarang terdaftar sebagai sebuah baris dalam editor gerak. Cukup pindah ke titik di timeline dan ubah parameter, dan keyframe dihasilkan untuk parameter itu. Jika Anda suka cara animasi tradisional, visualkan saja, cukup buka bingkai dan edit simbol di atas panggung.

Apa penting untuk memahami bahwa keyframes sedang ditambahkan setiap parameter, sehingga jika Anda hanya pindah contoh di atas panggung, akan ada keyframe hanya untuk X dan/atau Y kordinat di editor gerak. Ini menyediakan sangat berbagai kontrol atas animasi - sesuatu yang mustahil untuk mencapai dalam versi Flash.

Catatan: Anda tidak perlu secara eksplisit membuat keyframe lagi. Hanya memindahkan ke frame, mengubah sesuatu tentang contoh dan keyframe secara otomatis dihasilkan untuk parameter sendirian. Bagi banyak orang, ini sedikit perubahan budaya; sesuatu yang mereka temukan sangat sulit untuk terbiasa. Meskipun Anda masih dapat secara manual membuat keyframe, saya menemukan bahwa sebagian besar tidak perlu.

Kontrol yang lebih baik atas pelonggaran

Field input tunggal dan tombol 'Edit', Anda sekarang mendapatkan seluruh baris yang didedikasikan untuk mengurangi di editor gerakan baru. Garis putus-putus mencakup semua frame dari tween membuat super mudah untuk melihat bagaimana mengurangi bekerja. Prasetel yang disertakan adalah cara yang baik untuk memulai. Garis melengkung berarti kecepatan animasi meningkat atau menurun secara bertahap. Garis lurus berarti langkah yang konsisten dan merata. Anda dapat membuat memudahkan sebanyak yang Anda inginkan, dan menetapkan yang berbeda untuk setiap parameter. Ingat bahwa mengurangi kebutuhan untuk secara eksplisit ditetapkan pada setiap parameter. Kecuali Anda melakukannya, animasi Anda akan terus menjadi gerakan datar yang sama.

Setelah Anda mendapatkan memahamkan bagaimana pekerjaan meredakan dengan preset, saatnya untuk mendapatkan petualang dan mencoba pilihan 'Adat'. Apa yang Anda dapatkan di sini, adalah garis yang solid merah daripada yang bertitik, menunjukkan bahwa Anda dapat mengeditnya. Pergi ke bingkai dan buat bingkai kunci di baris pelonggaran 'Kustom' untuk menambahkan node bezier di timeline. Anda kemudian dapat menggunakan pegangan simpul untuk mengedit curver seperti yang Anda inginkan.

Quick Tip: Jika Anda tidak terlalu yakin tentang bagaimana mengurangi bekerja tapi ingin langsung mengambil animasi Anda atas beberapa notches, menggunakan aturan ini bahwa aku biasanya pergi dengan diriku sendiri - muncul elemen (sesuatu yang datang ke dalam bingkai atau di atas panggung) bekerja terbaik dengan positif ' (sederhana Menengah) 'mengurangi di ' 50', sementara menghilang elemen kerja terbaik dengan pelonggaran sama di-'50'. Hal ini membuat animasi keseluruhan merasa jauh lebih halus dan konsisten. Sebagai aturan, saya menggunakan mengurangi di hampir apa pun yang bergerak dalam animasi saya.

Gerak mengedit jalur

Ketika Anda memindahkan objek dari waktu ke waktu menggunakan gerakan tween, sebuah garis muncul dari titik pendaftaran simbol yang menunjukkan titik awal dan akhir gerakan serta setiap frame. Sebuah fitur yang tampaknya tersembunyi di sini adalah fakta bahwa jalan ini seperti garis lain di Flash. Anda dapat menggunakan pilihan dan pena alat untuk mengubah cara Anda akan jalan apapun. Klik & tarik di mana saja tapi ujung jalan (sementara itu tidak dipilih) untuk mengubahnya menjadi sebuah kurva. Anda kemudian dapat menggunakan sub pemilihan alat untuk mengedit bezier pegangan di node untuk kontrol yang lebih halus. Setiap kali Anda menambahkan keyframe di jalan gerak, kurva bezier yang baru akan ditambahkan ke jalan, yang Anda dapat kemudian mengedit saat Anda membutuhkannya.

Motion pathMotion pathMotion path

Cepat & mudah pseudo-3D animasi

Jika 3D dalam Flash adalah hal yang selalu Anda idam-idamkan, tetapi belum punya hati untuk bermain di sekitar kerangka 3D seperti papervision, berikut adalah cara cepat dan kotor untuk memalsukan gerakan 3D di Flash. Anda dapat menggunakan alat Rotasi 3D baru bersama dengan editor gerakan untuk membuat objek diputar dalam 3 dimensi untuk jazz yang ditambahkan.

3D Transform tools3D Transform tools3D Transform tools

3D rotasi tidak fitur dalam editor gerak kecuali jika Anda benar-benar menggunakannya pada objek. Untuk melakukannya, pilih alat rotasi 3D, pilih objek dan klik & menyeret salah satu dari tiga baris berwarna yang muncul. Masing-masing tiga baris mewakili sumbu - hijau adalah Y, merah adalah X, dan biru adalah Z. X & Y yang biasanya orang-orang yang akan membuat objek Anda terlihat seperti itu berputar dalam ruang 3D. Mendapatkan ke posisi yang diinginkan, pergi ke akhir tween gerak dan bergerak memutar itu lagi. Tambahkan 'Bouncing' kemudahan bagi beberapa rempah-rempah tambahan.

Membalikkan animasi untuk hasil yang lebih mudah diprediksi

Alur kerja khas animasi adalah untuk menciptakan merupakan gabungan dari frame kunci dalam animasi, dan kemudian menambahkan gerakan ke setiap objek yang diperlukan. Untuk apa-apa yang perlu meluncur dari luar panggung di sebelah kiri, ini berarti saya harus memindahkan obyek pada frame pertama, mengurangi Alfa, pergi kepada bingkai, memindahkannya kembali ke mana saya ingin dan meningkatkan Alfa 100%. Ini adalah bagaimana ia selalu benar-benar, jadi aku tidak pernah repot-repot dengan itu begitu banyak sampai suatu pagi baik ketika saya menemukan "reverse keyframes". Idenya adalah bodoh sederhana benar-benar, tapi layak berjam-jam jika Anda bernyawa barang masuk dan keluar dari panggung setiap hari.

Berikut adalah cara kerjanya. Setelah Anda memiliki komposit Anda di tempat, hanya menghidupkan kebalikan dari efek yang Anda butuhkan. Mulai dari posisi akhir objek, dan menghidupkan itu keluar ke arah kiri. Termasuk semua yang Anda butuhkan untuk membuat animasi sempurna - alpha, kabur, et al. Kemudian, cukup klik kanan tween dan klik 'reverse keyframes', dan voila! Anda memiliki Anda slide dalam dari kiri animasi sebanyak yang Anda butuhkan untuk menjadi.

Menyalin & paste dalam gerak

Mungkin penghemat waktu terbesar bagi saya sejak saya mulai menggunakan editor gerakan di Flash, adalah kemampuan untuk menerapkan gerakan ke suatu objek, menyalinnya dan menempelnya untuk semua yang serupa lainnya. Hal ini membuat paling masuk akal bila Anda memiliki sekelompok objek bergerak atau keluar dengan cara yang sama - daftar peluru, misalnya. Setelah Anda memiliki diterapkan tween ke salah satu daftar item (dengan asumsi setiap satu adalah sebuah movieklip tunggal di layer sendiri, tentu saja), klik kanan tween dan pilih 'Copy Motion'. Kemudian cukup pilih keyframes pertama dari semua item daftar lainnya, klik kanan dan pilih 'Pasta Motion'. Anda dapat kemudian memodifikasi masing-masing individu jika diperlukan.


Miscellaneous animasi Tips

Berikut adalah beberapa tips cepat untuk menghemat waktu, tenaga dan beberapa frame ketika berhadapan dengan animasi di Flash:

  • Jika Anda memiliki sekelompok movieklip pada lapisan yang Anda ingin untuk menghidupkan individual, hal pertama yang harus lakukan adalah untuk menempatkan mereka pada lapisan yang terpisah. Waktu berikutnya Anda perlu untuk melakukan ini, pilih mereka semua dan Tekan Shift + Ctrl + D. Flash akan melakukan pekerjaan kotor menempatkan mereka semua pada lapisan individual dan akan bahkan nama lapisan untuk mencocokkan movieklip masing-masing.
  • Saat membuat sesuatu muncul di layar, atur nilai Alpha dari frame pertama menjadi 5%, bukan 0. Dengan cara ini Anda bisa melihat versi samar dari objek untuk dapat memilih dan memanipulasinya. Karena bagaimanapun akan berubah dari 5% menjadi 100% dalam hitungan beberapa frame, efek pada animasi akhir hampir tidak terlihat.
  • Jika Anda memiliki unsur-unsur yang muncul di layar, tinggal untuk sementara dan kemudian menghilang, menghidupkan penampilan dengan tween gerak, kemudian tambahkan keyframe statis pada frame berikutnya untuk durasi daripada akan tetap pada layar. Menyalin gerakan penampilan, paste di akhir dan reverse frame untuk memiliki unsur yang hilang dengan cara yang sama muncul.

Kesimpulan

Yang membawa kita pada akhir bab lain dalam Flash Tips dan praktik terbaik untuk desainer. Jika Anda menggunakan Flash beberapa tahun yang lalu dan telah baru saja datang kembali, Anda tidak diragukan lagi akan menghargai lompatan besar telah diambil selama bertahun-tahun sebagai alat animasi kelas profesional. Saya harap tips ini akan membantu Anda bergulat dengan beberapa yang baru, yang mengejutkan jarang didokumentasikan perangkat dan fitur. Memiliki lebih banyak tips dan trik untuk berbagi? Mari kita mendengar tentang mereka di komentar.

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 Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.