di kantor, Saya sering diminta membuat animasi highlight paragraf panjang, biasanya quotes seseorang. highlight yang dimaksud adalah memberi warna teks berbeda pada beberapa kata atau kalimat yang ingin diberi penekanan.
Problem
tentu untuk satu dua kali, membuatnya di After Effects secara manual tidak sulit, cukup dengan beberapa keyframe bisa selesai. tapi ketika permintaan animasi semacam itu semakin sering dan banyak, saya akhirnya memutuskan untuk membuat setup atau rig otomatis yang bisa dijadikan template. Cara ini mengubah rutinitas jadi otomatis
lihat contoh dibawah
Solution
Kita butuh empat layer teks. Satu layer utama tempat paragraf dan highlight ditampilkan, dan ketiga sisanya kita gunakan untuk deteksi kata atau kalimat yang ingin di highlight.
Layer Teks Utama
Berikan Animasi Fill Color
Buat layer teks dengan nama Teks Utama, disini kita ketik atau paste paragraf panjang yang ingin kita tampilkan. Contoh diatas saya gunakan kutipan perkataan Walt Disney.
Beri text animation untuk layer ini. turunkan panah kiri di samping angka 1, lalu ke button panah Animate, dan beri Fill Color > RGB. setelah itu pilih warna text highlight. saya pilih warna orange. lihat gambar di bawah.
Layer Teks Pendukung
Buat tiga layer teks, letaknya bisa dimana saja tidak penting karena visibilitasnya (icon mata) akan kita matikan. Isi layer teksnya juga kosongkan saja untuk sementara. Tiga layer pendukung ini kita beri nama sebagai berikut
- Teks Penekanan Disini
- Nomor Baris Penekanan
- Teks Utama Dummy
Pastikan urutan posisi keempat layer teks yang sudah kita buat seperti gambar dibawah. Kalian juga bisa memberi tag warna yang berbeda untuk layer Teks Utama untuk mudah mengenalinya. disini saya pakai tag warna orange untuk layer utama, tag merah untuk layer pendukung
Expression Setup
Expression di Layer Teks Utama
Ada 3 expression yang kita pasang di layer ini. tempatnya di Start, End dan Offset
Start
teksUtama = thisLayer("Text")("Source Text");
teksPenekanan = thisComp.layer("Teks Penekanan Disini")("Text")("Source Text");
barisBaru = teksUtama.split("\\r").length-1 + teksUtama.split("\x03").length -1;
warna = thisLayer("Text")("Source Text").indexOf(teksPenekanan)-barisBaru;
if ( thisLayer("Text")("Source Text").indexOf(teksPenekanan) > -1){
warna+1;
}else{
0
}End
teksUtama = thisLayer("Text")("Source Text");
teksPenekanan = thisComp.layer("Teks Penekanan Disini")("Text")("Source Text");
barisBaru = teksUtama.split("\\r").length-1 + teksUtama.split("\x03").length -1;
warna = thisLayer("Text")("Source Text").indexOf(teksPenekanan)+teksPenekanan.length-barisBaru;
awalVal = thisLayer("Text")("Animators")("Animator 1")("Selectors")("Range Selector 1")("Start");
anim = easeOut(time,inPoint,inPoint+1,awalVal,0+warna)
if ( thisLayer("Text")("Source Text").indexOf(teksPenekanan) > -1){
anim
}else{
0
}Offset
txt = thisComp.layer("Nomor Baris Penekanan").text.sourceText;
n = (parseInt(txt)-1);
n - (n*2)Expression di Layer Teks Penekanan Disini
di layer ini tidak ada expression yang kita pasang. di layer ini kita akan mengetikkan atau paste bagian dari text di dalam paragraf yang ingin kita ganti warna nya sebagai bentuk penekanan
Expression di Layer Nomor Baris Penekanan
Berikan expression di Source Text
Source Text
theLayer = thisComp.layer(index+1);
firstLine = theLayer.sourceRectAtTime(t = 0, includeExtents = false).height;
secondLine = theLayer.sourceRectAtTime(t = 1, includeExtents = false).height - firstLine;
searchLine = theLayer.sourceRectAtTime(t = 2, includeExtents = false).height;
theLine = Math.floor((searchLine - firstLine)/secondLine) + 1;Expression di Layer Teks Utama Dummy
Beri expression di Source Text
Source Text
if (time == 0) "hai";
else if (time >0 && time < 2) "hai\nabaikan";
else {
teksUtama = thisComp.layer("Teks Utama").text.sourceText;
search = thisComp.layer("Teks Penekanan Disini").text.sourceText;
ind = teksUtama.indexOf(thisComp.layer("Teks Penekanan Disini").text.sourceText);
if (ind == -1) "";
else teksUtama.substring(0, ind+search.length);
}Cara Penggunaan & Stress Test
Kita hanya perlu mengubah isi layer Teks Penekanan Disini. dengan begitu otomatis animasi perubahan warna akan mengikuti apa yang kita isi. Simak contoh demo penggunaan di bawah
Ulasan
Alasan mengapa kita perlu tiga layer pendukung, adalah keterbatasan After Effects dalam penggunaan multi-line text. Karena ada kemungkinan kalimat yang kita highlight berada di baris yang berbeda. maka diperlukan cara untuk mendeteksi ada di baris berapa kalimat tersebut.
Ketika lokasi baris keberapa sudah kita deteksi, angka tersebut yang akan kita parse (convert) dari string value menjadi number value, untuk keperluan expression offset.
Bagian Range Selector Start & End kita beri expression untuk mendeteksi index (tiap kata punya index tersendiri). Kita cari kata pertama di layer Teks Penekanan Disini untuk dijadikan border expression Start, dan kata terakhir untuk dijadikan border expression End
Animasi berlangsung 1 detik dengan bantuan expression time.
Selamat mencoba, semoga dapat bermanfaat