Sebelum kita memulai animasi pertama kita, Bouncing Ball, saya ingin menghadapi tantangan teknis terlebih dahulu: teks harus digambar ulang, seolah-olah teks itu ditulis dengan tangan. Fig Leaf Rag memiliki pengantar yang indah dengan aksen di akhir, di situlah kita akan menempatkan titik tanda seru.

Ada beberapa metode yang lebih atau kurang bagus, tergantung pada situasi yang kita hadapi. Karena saya bekerja dengan tablet grafik, saya akan menggambar tulisan dan menunjukkan kepada Anda bagaimana cara animasinya. Namun sebelumnya saya akan menunjukkan kepada Anda bagaimana cara lain yang bisa dilakukan, meskipun ini bukan pilihan favorit saya disini:


Langkah 1–10

Langkah 1

Saya ingin menghilangkan layer teks dan menggantinya dengan layer komposisi, sebuah layer piksel biasa di mana saya bisa melukis. Teks harus berada di dalam layer tersebut. Jadi saya membuat subkomposisi dengan Strg+Shift+C atau melalui Lapis> Buat Subkomposisi. Saya akan menamainya "Typo_Intro".

Animasi yang mudah dilakukan: animasi garis

Langkah 2

Semua atribut telah diambil, termasuk Displacement Turbulence.

Karena saya tidak ingin itu, saya klik Displacement Turbulence, tekan Strg+X dan tempelkan di komposisi di atasnya ("Fig Leaf Rag").

Animasi yang mudah dibuat: animasi garis

Langkah 3

Kembali ke komposisi "Typo_Intro". Di sini kita bisa melihat teksnya dan melakukan animasi.

Pilihan pertama adalah melalui Paths. Saya mengambil Pen Tool dan menarik garis pertama huruf A di atas huruf. Kemudian saya lepaskan dan klik di area hitam dengan tombol Strg- ditekan dan mengakhiri jalur saat ini, sebelum saya menarik garis kedua huruf A.

Saya lepaskan lagi, klik di area hitam dengan tombol Strg- ditekan dan kemudian menarik garis berikutnya, dan seterusnya, hingga seluruh huruf ditarik.

Animasi yang mudah dibuat: animasi garis

Langkah 4

Sekarang saya tambahkan efek. Anda dapat menemukannya sebagai Stroke di versi CC di bawah Generate. Hingga CS6, itu disebut Stroke Effect.

Kemudian kita pilih masker atau cetak tanda centang pada All Masks dan kita dapat menggambarkan masker-manuskrip tersebut.

Animasi simpel: animasi garis

Langkah 5

Saya matikan masker dengan simbol kecil ini dan saya warnai Path menjadi merah. Saya juga dapat mengubah Size, namun hanya secara global untuk semua masker.

Saya juga dapat memindahkan dan menyesuaikan titik-titik individual ketika saya menyalakan kembali masker, sehingga teks putih di bawahnya tertutup.

Animasi mudah dibuat: animasi garis

Langkah 6

Hal yang menarik adalah: Di sini saya memiliki penggeser Mulai- dan Akhir-: Saya tarik dari mulai hingga akhir dan bisa menggambar seluruh teks tersebut.

Ini berfungsi dengan baik, tetapi Anda tidak memiliki kontrol yang tepat. Misalnya, Anda harus selalu menggunakan ketebalan garis yang sama, jadi Anda tidak bisa menggambar tebal dan tipis.

Animasi yang mudah dibuat: animasi garis



Karena itu, saya ingin menunjukkan metode lain yang menurut pendapat saya lebih cepat daripada harus menggambar semuanya satu per satu …

Langkah 7

Pada kasus ini, saya lebih suka metode yang sedikit lebih cepat dengan Kuas.

Namun, Kuas tidak dapat diterapkan pada layer teks. Jadi kita harus membuat lagi sebuah Subkomposisi dan namakan "Typo_Statis". di dalam Subkomposisi ini kita dapat langsung bekerja.

Animasi mudah dibuat: animasi garis

Langkah 8

Saat kita ingin menggunakan Kuas dan kita klik dua kali dalam mode Kuas, jendela layer terbuka dan hanya di situlah kita dapat menggunakan Kuas.

Dua panel baru telah muncul: Kuas dan Lukis. Pada panel Kuas kita bisa mengatur ukuran, kekerasan, dll. dari kuas.

dan di panel Lukis kita dapat memilih cara melukis. Di bawah Duration awalnya konstan, tetapi saya ubah menjadi Animating Paint.

Saya membuat beberapa garis - tetapi begitu saya selesai menarik garis, garis tersebut menghilang anehnya.

Animasi menjadi mudah: animasi garis

Langkah 9

Saat saya kembali ke tab lain dan menggerakkan sepanjang Timeline, saya melihat bahwa semua garis ada dan semuanya digambar secara otomatis.

Animasi mudah dilakukan: animasi garis

Langkah 10

Jika kita menekan UU untuk semua properti yang diubah, maka kita akan mendapatkan banyak subproperti di bawah ini.

Untuk setiap properti individu, awal dan akhirnya juga ditampilkan.

Selain itu, kita dapat mengubah jarak, kekerasan, dan bahkan posisi setiap garis - bahkan setelah digambar.

Animasi yang mudah dibuat: animasi garis

Lanjutkan: Langkah 11–20

Langkah 11

Saya akan menghapus semua sekali lagi, agar kita memiliki pandangan yang lebih jelas.

Saya akan menggambar garis baru lagi dan jika Anda berada di tampilan layer, Anda akan melihat Path. Itulah yang disimpan.

Anggaplah saya tidak suka dengan garis yang digambar, maka saya dapat melukisnya kembali dengan memilihnya dan kemudian sekadar melukis ulang. Itu akan diperbarui dan tertimpa.

Animasi yang mudah dibuat: animasi garis

Langkah 12

Saya juga ingin mengecilkan teks, karena itu adalah cara tercepat untuk menganimasikan sesuatu.

Jadi saya membuat ukuran saya sedikit lebih kecil dan dengan tablet grafis, saya mengikuti teks dan menggambarkannya di sini.

Animasi mudah dibuat: animasi garis

Langkah 13

Saya telah menggambar semua garis dan saat kita memutarnya di Timeline, kita juga melihat bahwa semuanya ada di sana.

Jika saya menekan U, kita akan mendapatkan kembali semua Keyframes.

Animasi yang mudah dibuat: animasi garis

Langkah 14

Jika saya menekan tombol Ü, jendela di mana kursor saat ini bergeser akan diperbesar. Dalam hal ini adalah Timeline. Ini memberi saya lebih banyak ruang dan membantu saya melihat elemen yang menonjol. Saya akan mengatur sedikit mundur agar semuanya sekitar berlangsung sama lama.

Animasi mudah: animasi garis

Langkah 15

Mari kita putar.

By the way: Jika Anda secara tidak sengaja menekan tombol Caps Lock, After Effects tidak akan diupdate lagi. Anda akan melihat pesan Matikan Caps Lock untuk menyegarkan tampilan.

Saat kita putar sekarang, After Effects mulai menggambar semua huruf secara bersamaan. Tetapi seharusnya dimulai dari depan dan berlanjut ke belakang. Dan disinilah masalahnya. Untuk mendapatkannya sesuai dengan yang saya inginkan, saya harus menyesuaikan semuanya secara manual - satu garis demi satu garis. Itu memakan banyak waktu. Saya ingin melakukannya lebih cepat.

Pada langkah berikutnya, saya akan menjelaskan kepada Anda bagaimana - namun sebelum itu, mari kita tandai semua garis.

Animasi mudah dibuat: animasi garis

Langkah 16

Karena itulah, saya menggunakan sebuah skrip untuk mengatur Keyframes ini satu per satu.

Saya telah menulis skrip ini sendiri dan sudah memberikannya pada Anda. Anda akan menemukannya di folder Skripte dengan nama Sequence strokes. Bagi yang mengenal film "Sequenzebenen aus After Effects", bisa membayangkan apa yang dilakukan skrip ini.

Saya membuka skrip di Extend Script dan mengeksekusinya.

Animasi yang mudah dibuat: animasi garis

Langkah 17

Sekarang kita memiliki seakan-akan tangga Keyframes dan teks akan digambar Langkah demi Langkah. Namun masih terlalu lambat.

Kita harus mempercepatnya. Untuk itu, kita pilih semuanya, pilih Keyframe terakhir yang kita temukan, tekan tombol Alt- dan geser ke 5 detik.

Maka akan terasa lebih cepat.

Animasi mudah dibuat: animasi garis



Titik terakhir harus sedikit ditunda lagi, namun kita akan segera mengatasinya.

Langkah 18

Saya ingin membahas nilai pergeseran. Ini mempengaruhi transisi Keyframe:

Jika kita melihat transisi Keyframe saat ini, maka selalu dimulai di tempat yang sama di mana yang sebelumnya berakhir (a).

Jika saya tidak ingin demikian dan misalnya lebih suka ada dua frame jeda antara dua garis, maka saya akan memasukkan 2 di offset.

Tentu saja saya harus memilih semua kuas lagi sebelum saya dapat mengaktifkan skrip. Dengan Ctrl+A saya dapat memilih semua sekaligus.

Animasi yang mudah dilakukan: animasi garis



Atau saya ingin agar frame saling tumpang tindih, maka saya atur nilai pada offset menjadi -2. Maka selalu dua frame kembali ke belakang dari yang seharusnya. Namun jika telah dipersingkat secepat ini seperti di sini, itu tidak masuk akal. Saya cukup puas dengan angka 2.

Langkah 19

Apa yang pasti ingin saya ubah adalah timing tanda seru. Saya ingin menyesuaikannya lebih baik dengan musik.

Jadi saya juga membutuhkan musik dalam komposisi ini. Jadi saya pergi ke "Fig Leaf Rag" dan menyalin file tersebut.

Kemudian jika perlu, saya kembali ke komposisi dengan mengklik Alt dan memasukkannya di sini.

Animasi menjadi mudah: animasi garis

Langkah 20

Sekarang kita lihat di mana posisi-posisi yang kita butuhkan berada. Untuk itu, saya menggunakan Num-Pad dan menekan tombol Koma untuk membuat pratinjau. Saya menekan tanda bintang * pada Num-Pad untuk menandai. Pada perangkat tanpa Num-Pad, khususnya pada Mac, itu akan menjadi cmd+Koma untuk pratinjau dan cmd+8 untuk penanda.

Sekarang saya biarkan musik bermain dan menempatkan penanda tepat di tempat di mana garis dan titik tanda seru harus keluar (1). Yakni tepat pada dua aksen melodi.

Jadi saya telah menetapkan dua penanda: Pada yang pertama, garis dari tanda seru harus selesai, dan pada yang kedua, titik harus ditetapkan.

Saya tempatkan Garislurus pada penanda pertama dan beralih ke komposisi "Typo_Statisch". Di sana saya menggeser frame yang menunjukkan garis dari tanda seru ke Garislurus (2).

Saya lakukan hal yang sama dengan penanda kedua, yang menunjukkan posisi untuk titik: Saya letakkan Garislurus pada penanda, beralih ke komposisi dan menggeser frame yang sesuai.

Animasi sederhana: Animasi garis

Langkah Terakhir

Langkah 21

Saya ingin garis dari tanda seru digambar lebih lambat daripada teks sebelumnya, sehingga kita memiliki aksen yang lebih kuat saat mencapai tanda seru (1).

Dan teks secara keseluruhan harus selesai sedikit lebih cepat. Jadi saya menandai semua sebelumnya (2) dan mendorongnya sedikit ke depan (3).

Jadi, dari segi timing, semuanya pas.

Animasi mudah dilakukan: animasi garis

Langkah 22

Kami telah menggambar teks di atas teks dan sekarang akan sedikit mengubahnya.

Pertama, saya menduplikasi lapisan "Typo_Statisch" dan menghapus efek Lukis-.

Animasi yang mudah dibuat: animasi garis

Langkah 23

Pada lapisan atas, kami memiliki teks yang digambar di atas teks putih asli di bawahnya.

Pada lapisan bawah, kami memiliki teks putih biasa.

Jika kami memeriksa kotak centang di Gambar Di Atas Transparan pada lapisan atas, maka hanya garis-garis merah yang digambar itu yang akan terlihat.

Animasi yang mudah dibuat: animasi garis

Langkah 24

Lapisan atas harus digunakan sebagai masker untuk lapisan bawah.

Jika masker tidak ditampilkan, cukup klik di bawah pada Aktifkan/Nonaktifkan Mode Switch, maka masker bergerak BewMas akan ditampilkan.
Masker Alpha dan mencapai hasil yang tepat yang saya butuhkan. Artinya, di mana pun garis-garis ini digambar, tulisan asli saya juga akan terlihat.

Animasi mudah dibuat: animasi garis



Namun begitu, saya telah sedikit tergeser, karena langsung di awal sudah ada huruf A.

Langkah 25

Jadi kita yang terbaik adalah memilih semua Kuas dengan seleksi Kotak dari bawah ke atas (1) dan kemudian mengeluarkan dua frame tanda seru dengan pemilihan Shift+ (2). Kedua frame tersebut sudah ditempatkan dengan sempurna secara waktu.

Sekarang sudah pas.

Animasi yang mudah: animasi garis

Langkah 26

Kami melakukan ini dalam subkomposisi, di sini kita masih memiliki efek Pergeseran Kacau.

Jika kita melihat semuanya dalam komposisi ini, bukan hanya warna kuning dan warnanya akan berubah, tapi juga akan bergetar.

Animasi yang mudah: animasi garis

Langkah 27

Semua ini luar biasa dan pas sekali, tapi warna akan berubah setelah itu atau bahkan sama sekali tidak berubah terlebih dahulu. Ubah Warna seperti itu juga tetap dimatikan terlebih dahulu.

Animasi yang mudah dibuat: animasi garis