Cara Membuat Video Animasi Kode dan Terminal

Kenapa animasi lebih baik dari rekaman layar

Rekaman layar menangkap semua yang terjadi, termasuk yang tidak penting. Animasi kode hanya menampilkan apa yang ingin kamu ajarkan. Kamu menentukan baris mana yang muncul, kapan, dan baris mana yang disorot.

Selain itu, ukuran font bisa dibuat besar khusus untuk video vertikal, sesuatu yang sulit didapat dari rekaman layar laptop. Penonton yang menonton di HP bisa membaca setiap karakter tanpa zoom.

Apa yang membentuk tampilannya

Gaya animasi kode sudah punya bahasa visual yang dikenal penonton. Ikuti saja, lalu tambahkan sedikit sentuhan supaya tetap khas.

Siapkan kodenya

Potong kodenya sependek mungkin. Untuk video pendek, 5 sampai 15 baris sudah cukup. Hapus komentar yang tidak perlu, import yang tidak dibahas, dan nama variabel yang membingungkan.

Kalau ada output, tulis juga output yang diharapkan. Otto akan menampilkannya persis seperti yang kamu tulis, jadi pastikan kodenya memang benar dan outputnya cocok. Untuk perintah terminal, tulis prompt shell, perintahnya, lalu hasilnya.

Pikirkan juga urutan tampilnya. Kadang lebih jelas kalau penonton melihat hasilnya dulu, misalnya tampilan aplikasi yang sudah jadi, baru kemudian kode yang membuatnya. Urutan terbalik ini bagus sebagai hook, karena penonton penasaran bagaimana hasil itu dibuat dan bertahan sampai kodenya selesai diketik.

Buat dalam 5 langkah

1. Tempel kodenya. Langsung di prompt, beserta bahasa pemrogramannya supaya warna sintaksnya pas.
2. Tandai baris penting. Sebut nomor baris yang ingin disorot dan apa yang ingin ditekankan.
3. Tulis outputnya. Hasil yang muncul di terminal atau tampilan aplikasi setelah kode dijalankan.
4. Tambahkan narasi. Upload voice over, video talking head, atau minta voice over AI yang menjelaskan kodenya.
5. Cek karakter per karakter. Satu tanda kurung yang salah akan ditangkap penonton di kolom komentar. Bandingkan dengan kode aslinya.

Prompt yang bisa langsung dipakai

Tempel di Otto dan ganti bagian dalam kurung siku.

Buat video 9:16 berisi animasi kode, durasi sekitar 30 detik.
Judul di atas: "[judul tips]".
Kode [bahasa pemrograman]:
[tempel kode]
Tampilkan di jendela editor gelap, font monospace besar.
Kode diketik baris per baris dengan kursor berkedip.
Sorot baris [nomor] dengan warna [warna] dan beri label kecil "[penjelasan]".
Lalu pindah ke terminal, jalankan perintah [perintah], dan tampilkan output: [output].
Suara keyboard halus dan bunyi sukses saat output muncul.
Tambahkan subtitle otomatis dari voice over saya.

Versi pendek yang sering dipakai

• "Bikin animasi terminal yang mengetik perintah ini lalu menampilkan hasilnya."
• "Bandingkan kode lama dan kode baru, baris yang berubah disorot hijau dan merah."
• "Tampilkan error ini dulu, lalu perbaikannya diketik di bawahnya."
• "Font kode dibesarkan, maksimal 12 baris per layar."

Ide konten coding yang cocok

Animasi kode paling efektif untuk satu ide kecil yang bisa dipahami dalam satu video. Penonton menyimpan video seperti ini sebagai catatan, jadi buat setiap video berdiri sendiri.

Beri judul yang menjanjikan hasil konkret, misalnya "Cara membalik string dalam satu baris", lalu tutup dengan ringkasan satu kalimat di layar terakhir.

• Satu trik singkat: cara menulis sesuatu lebih pendek atau lebih rapi.
• Sebelum dan sesudah: kode yang berantakan, lalu versi yang sudah dirapikan.
• Error yang sering muncul: tampilkan pesan error, penyebab, lalu perbaikannya.
• Perintah terminal harian: perintah yang sering dipakai beserta contoh output.
• Demo produk developer: perintah instalasi dan hasil pertama yang muncul.

Kesalahan yang sering terjadi

• Terlalu banyak baris. Kode 50 baris di layar vertikal tidak akan terbaca. Ambil bagian intinya saja.
• Ketikan terlalu lambat. Penonton tidak perlu melihat setiap huruf diketik pelan. Percepat baris biasa, perlambat di baris penting.
• Kontras rendah. Warna sintaks yang pucat di atas latar gelap sulit dibaca di HP dengan kecerahan rendah.
• Output yang tidak cocok. Penonton yang paham akan langsung tahu kalau outputnya mustahil. Jalankan kodenya sendiri dulu.

FAQ