Saputra.
Innova.
Capricorna.
Irawan.
Ramadhan dan Hakim Ai Sistem Otomatisasi Rendering Video Template After Effects Berbasis Web Dengan Extendscript Dan Flask
RASISTEM OTOMATISASI RENDERING VIDEO TEMPLATE
AFTER EFFECTS BERBASIS WEB DENGAN EXTENDSCRIPT DAN
FLASK
WEB-BASED VIDEO TEMPLATE AFTER EFFECTS RENDERING AUTOMATION SYSTEM WITH
EXTENDSCRIPT AND FLASK
Ragil Raditya Saputra.
Zacky Innova.
Epsilona Katiga Capricorna.
Bambang Irawan.
Ridwan Ramadhan.
Muhammad Hafizh Rahman Hakim .
, .
Teknik Informatika.
Universitas Esa Unggul Indonesia e-mail: ragil.
raditya2005@student.
Zackyinova1@student.
epsilonakatigacapricorna@student.
, bambang.
irawan@esaunggul.
ramadhanridwan660@student.
, mhafizhrhakim@student.
ABSTRAK
Proses pembuatan animasi atau video dalam Adobe After Effects umumnya memerlukan interaksi manual yang berulang dan memakan waktu, sehingga kurang efisien dalam alur kerja multimedia digital.
Untuk menjawab tantangan tersebut, penelitian ini merancang sistem otomatisasi rendering berbasis web dengan mengintegrasikan ExtendScript sebagai bahasa scripting internal After Effects dan framework Flask sebagai backend.
Antarmuka berbasis HTML memungkinkan pengguna menginput parameter seperti teks, warna, atau pilihan format, yang kemudian diproses oleh Flask dan diteruskan ke After Effects melalui subprocess lokal.
Tak hanya integrasi, kami juga telah membandingkan sistem otomatisasi ini dengan metode manual.
Penelitian ini menggunakan pendekatan eksperimental dalam bentuk pengembangan dan pengujian sistem untuk mengevaluasi efektivitasnya.
Sistem ini mampu meningkatkan efisiensi kerja hingga 67,78% dibandingkan metode manual tradisional, serta mendukung pemrosesan secara otomatis berdasarkan input pengguna.
Sistem ini memberikan solusi praktis dan terjangkau bagi pengguna yang ingin mempercepat produksi konten visual dari template After Effects dengan penyesuaian pada teks dan warna, tanpa mengurangi fleksibilitas dan kualitas hasil akhir.
Integrasi teknologi ini membuktikan bahwa otomatisasi proses kreatif dapat dilakukan secara efektif, stabil, dan dapat diakses dengan mudah melalui web jika dikembangkan lebih lanjut.
Kata Kunci: Adobe.
Flask.
Motion Graphic.
Python.
Video
ABSTRACT
The process of creating animations or videos in Adobe After Effects generally requires repetitive manual interaction, making it inefficient in the digital multimedia workflow.
To address this challenge, this study designed a web-based automated rendering system by integrating ExtendScript as the internal scripting language of After Effects and Flask as the backend framework.
The HTML-based interface allows users to input parameters such as text, color, or format options, which are then processed by Flask and passed to After Effects via a local subprocess.
In addition to the integration, we also compared this automated system with the manual method.
This study employed an experimental approach through the development and testing of the system to evaluate its effectiveness.
The system was able to improve workflow efficiency by up to 67.
78% compared to traditional manual methods and supports automated processing based on user input.
It offers a practical and affordable solution for user who want to accelerate visual content production from After Effects templates with customized text and color, without compromising the flexibility and quality of the final output.
This technological integration demonstrates that creative process automation can be carried out effectively, stably, and can be easily accessed via the web if further Keywords: Adobe.
Flask.
Motion Graphic.
Python.
Video
PENDAHULUAN
dobe After Effects merupakan salah satu perangkat lunak utama yang banyak digunakan dalam industri kreatif untuk menghasilkan animasi, motion graphic, dan efek visual yang kompleks.
Meskipun memiliki kemampuan yang sangat luas.
TEKNIMEDIA - Volume 6.
Nomor 2.
Desember 2025: 163 Ae 169 pada After Effects masih bersifat manual dan repetitif, seperti pengaturan parameter proyek, pemilihan template, hingga eksekusi render.
Kondisi ini menjadi hambatan dalam alur kerja yang membutuhkan efisiensi tinggi, terutama bagi pelaku industri kreatif yang menghadapi tuntutan produksi cepat dan tenggat waktu yang ketat.
Kebutuhan akan otomatisasi dalam produksi multimedia telah menjadi isu penting seiring meningkatnya permintaan konten visual di berbagai platform digital.
Secara teoritis, konsep workflow automation dalam bidang multimedia telah terbukti mampu mengurangi beban kerja manual, mempercepat proses produksi, serta menekan potensi kesalahan manusia.
Namun, belum banyak studi yang mengintegrasikan sistem otomatisasi rendering secara langsung ke dalam platform After Effects dengan pendekatan berbasis web, yang mudah diakses dan ramah pengguna.
Penelitian ini hadir untuk menjawab permasalahan tersebut dengan merancang dan rendering video template After Effects yang dapat dijalankan melalui antarmuka web.
Sistem ini memanfaatkan ExtendScript bahasa scripting internal Adobe untuk mengatur fungsi rendering secara otomatis, serta framework Flask sebagai backend yang mengelola input pengguna melalui Dengan pendekatan ini, sistem diharapkan dapat menjadi solusi yang praktis, efisien, dan terjangkau, terutama bagi pengguna non-teknis yang ingin mempercepat proses produksi konten tanpa mengorbankan kualitas hasil akhir.
II.
STUDI PUSTAKA
Otomatisasi proses produksi multimedia telah menjadi fokus banyak penelitian dalam beberapa tahun terakhir, terutama dalam konteks peningkatan efisiensi dan integrasi teknologi web dengan perangkat lunak kreatif.
Penelitian oleh Bonney et al.
menggunakan Python Flask untuk mendukung operasionalisasi otomatis dalam lingkungan berbasis web, yang menunjukkan fleksibilitas Flask sebagai backend web ringan yang dapat diterapkan dalam berbagai konteks .
Wijayanto dan Susetyo .
menerapkan Flask dalam pengembangan sistem informasi helpdesk, menunjukkan bagaimana framework ini mampu menangani interaksi pengguna melalui form dan permintaan HTTP secara efisien .
Ngantung dan Pakereng .
merancang sistem informasi akademik dengan pendekatan Pengguna-centered design dan implementasi Flask, menegaskan kemudahan integrasi antara antarmuka pengguna dan backend berbasis Python .
Dalam konteks integrasi dengan sistem Susanti Mailoa mengembangkan RESTful API menggunakan Flask untuk pengelolaan data visual melalui skema web service, menunjukkan potensi Flask dalam manajemen data media .
Sementara itu.
Pratama dan Susetyo .
mengembangkan sistem pembaruan cloud menggunakan API Flask, dengan fokus pada konversi data warna dari format HTML ke standar RGB, yang relevan untuk konteks pemrosesan input warna pada sistem kami .
Kelima penelitian tersebut menunjukkan bahwa framework Flask merupakan solusi backend yang fleksibel dan adaptif untuk membangun sistem otomasi, termasuk dalam konteks Namun, belum banyak penelitian yang secara spesifik mengintegrasikan Flask dengan Adobe After Effects menggunakan ExtendScript untuk tujuan rendering otomatis berbasis web, sehingga menjadi celah penelitian yang dijawab dalam studi ini.
METODE PENELITIAN
Penelitian ini menggunakan pendekatan eksperimental dalam bentuk pengembangan dan pengujian sistem otomatisasi rendering video berbasis web.
Sistem dirancang dengan menggunakan bahasa pemrograman dan scripting untuk mengintegrasikan backend web (Flas.
dengan perintah lokal (ExtendScrip.
dalam menjalankan proses rendering.
Alur Sistem Otomatisasi Pengguna memberikan input berupa teks dan warna melalui antarmuka HTML sebagaimana ditampilkan pada Gambar 4.
Input tersebut Flask membangkitkan file ExtendScript yang diterapkan pada proyek After Effects, sebagaimana diperlihatkan pada Gambar 6.
Setelah proses rendering selesai, pengguna akan menerima hasil video secara otomatis melalui halaman hasil yang ditunjukkan pada Gambar 7.
Gambar berikut Saputra.
Innova.
Capricorna.
Irawan.
Ramadhan dan Hakim Ai Sistem Otomatisasi Rendering Video Template After Effects Berbasis Web Dengan Extendscript Dan Flask memperlihatkan alur kerja sistem mulai dari input parameter oleh pengguna hingga proses rendering selesai dan hasil video diterima kembali oleh After Effects untuk menghasilkan berkualitas profesional dengan mudah.
Perancangan Sistem Backend Backend sistem dikembangkan dengan flask yang bertanggung jawab untuk menangani permintaan HTTP, pengolahan parameter input.
Selain itu.
ExtendScript (.
digunakan untuk mengontrol jalannya proses di Adobe After Effects secara otomatis .
Gambar 1.
Diagram Alur Otomatisasi Proses Rendering Video Perbandingan Metode Manual dan Otomatis Metode manual dalam proses pembuatan video memerlukan keterlibatan pengguna yang cukup intensif dan memakan waktu.
Pada pendekatan ini, pengguna harus membuka aplikasi After Effects secara langsung, kemudian melakukan serangkaian langkah yang repetitif seperti mengubah teks, menyesuaikan warna, dan mengonfigurasi pengaturan render.
Setiap kali ada perubahan yang diperlukan, pengguna harus mengulangi seluruh proses ini secara manual, yang tidak hanya membutuhkan waktu yang lama tetapi juga meningkatkan risiko kesalahan manusia.
Selain itu, metode ini memerlukan pemahaman teknis yang mendalam tentang interface After Effects dan workflow yang kompleks.
Sebaliknya, metode otomatis menawarkan pendekatan yang jauh lebih efisien dan userfriendly.
Dengan sistem ini, pengguna hanya perlu mengisi form web sederhana yang berisi parameter yang dibutuhkan seperti teks dan warna.
Setelah data disubmit, seluruh proses mulai dari input data, pembuatan script, eksekusi di After Effects, hingga rendering final dilakukan secara otomatis dengan intervensi manual sedikit.
Sistem otomatis ini tidak hanya menghemat waktu secara signifikan, tetapi juga mengurangi kemungkinan kesalahan dan memungkinkan pengguna tanpa keahlian teknis Gambar 2.
Alur Sistem Backend Contoh fungsi route utama pada backend yang ditunjukkan oleh Gambar 2 tentang menerima input, sebagai berikut:
@app.
route('/render', methods=['POST']) def render_motion():
text = request.
form['text'] color_hex = request.
form['color'].
lstrip('#') Kode di atas memperlihatkan bagaimana sistem menerima input text dan color dari form HTML, terutama pada nilai warna yang awalnya berupa kode HEX menjadi format RGB .
, agar After Effects dapat membaca warna dari masukan Seperti Gambar 2 tentang mengubah format kode HEX ke RGB TEKNIMEDIA - Volume 6.
Nomor 2.
Desember 2025: 163 Ae 169 r = int.
olor_hex.
, .
/ 255 g = int.
olor_hex.
, .
/ 255 b = int.
olor_hex.
, .
/ 255 Setelah itu, sistem membangkitkan skrip JSX secara dinamis berdasarkan parameter input pengguna yang ditunjukkan pada Gambar 2.
ExtendScript tersebut akan mengatur lapisan teks dan warna pada komposisi dalam proyek .
warna melalui antarmuka web.
Selanjutnya, proses render dilakukan secara otomatis oleh Adobe After Effects tanpa perlu interaksi manual.
Gambar berikut menunjukkan tampilan antarmuka utama dari sistem berbasis web yang telah dikembangkan menggunakan stopwatch.
_comp.
layer("Text Layer").
property("Source Text").
setValue(".
").
_comp.
layer("Control Layer").
property("Effects").
property("Color Control").
property("Color").
setValue([.
, .
, .
]).
Skrip JSX tersebut kemudian disimpan sementara dan dieksekusi oleh After Effects yang subprocess dari Python:
Gambar 3.
Main Menu Pada Gambar 3 Pengguna dapat memilih dari 3 template yang tersedia sesuai use case diagram di Gambar 1.
fterfx_path, aep_path, "r", jsx_pat.
) Proses ini sepenuhnya berjalan secara otomatis, dimulai dari pengambilan input pengguna, pembuatan skrip, setelah eksekusi file JSX After Effects, hingga hasil rendering yang disimpan secara otomatis di direktori output dengan penamaan berdasarkan text yang sudah dimasukan pengguna:
output_name = f"render_.
Setelah rendering selesai, pengguna diarahkan ke halaman preview dan dapat mengunduh hasil video secara langsung dari web.
Dengan sistem ini, proses yang sebelumnya dilakukan secara manual di After Effects kini dapat dilakukan dalam satu klik melalui antarmuka web, menghemat waktu dan mengurangi potensi kesalahan input.
Langkah Ae Langkah Penelitian Setelah pengembangan sistem otomatisasi rendering video berbasis web selesai dilakukan, langkah berikutnya adalah melakukan proses penelitian melalui pengujian terhadap sistem yang telah dibangun.
Penelitian ini difokuskan pada pembandingan antara dua metode rendering video, yaitu metode otomatis berbasis web dengan metode manual di After Effects langsung.
Metode otomatis yang telah dikembangkan memungkinkan pengguna melakukan rendering video hanya dengan mengisi formulir teks dan Gambar 4.
Pengguna Mengisi Teks dan Warna Di Gambar 4 tersedia form untuk Pengguna mengisi parameter teks dan warna yang Gambar 5.
Masuk Otomatis ke After Effects Untuk Eksekusi File JSX Saputra.
Innova.
Capricorna.
Irawan.
Ramadhan dan Hakim Ai Sistem Otomatisasi Rendering Video Template After Effects Berbasis Web Dengan Extendscript Dan Flask Gambar 9.
Proses Rendering Manual Gambar 6.
Eksekusi File JSX Saat masuk di dalam After Effects file JSX akan dieksekusi menggunakan shortcut, seperti alur sistem backend di Gambar 2.
Setelah file JSX di eksekusi, parameter yang ada akan otomatis terganti dengan parameter yang sudah isi sebelumnya oleh pengguna dan langsung render di After Effects secara otomatis.
Proses yang telah dijelaskan sebelumnya merupakan salah satu contoh dari lima kali percobaan yang dilakukan dalam penelitian ini.
Percobaan membandingkan performa metode otomatis berbasis web dengan metode manual tradisional di Adobe After Effects.
Perbandingan ini bertujuan untuk mengukur efisiensi waktu dan beban kerja pengguna pada masing-masing metode, serta mengevaluasi sejauh mana sistem otomatisasi yang dibangun mampu meningkatkan produktivitas dibandingkan proses manual tradisional di Adobe After Effects.
IV.
HASIL DAN PEMBAHASAN
Gambar 7.
Proses Rendering setelah eksekusi file JSX Penelitian ini berhasil mengembangkan sistem otomatisasi proses rendering video template berbasis web yang mengintegrasikan ExtendScript dan framework Flask.
Sistem yang dikembangkan terdiri dari beberapa komponen utama: antarmuka web berbasis HTML, backend Flask dengan Python, dan scripting ExtendScript untuk kontrol Adobe After Effects.
Analisis Efisiensi Sistem Gambar 8.
Proses Rendering Selesai Gambar 8 menjelaskan tentang halaman yang berubah otomatis menjadi video preview dengan parameter yang sudah sesuai dengan parameter teks dan warna yang sudah diisi oleh pengguna sebelumnya.
Video juga dapat diunduh oleh pengguna untuk disimpan, sesuai dengan use case diagram Gambar 1.
Sedangkan metode manual mengharuskan pengguna membuka proyek After Effects secara langsung, kemudian mengganti parameter seperti teks dan warna satu per satu secara manual, mengatur ulang komposisi, dan mengeksekusi render secara manual pada setiap perubahan.
Seperti di Gambar 9.
Pengujian menggunakan komputer os windows 10 yang menggunakan spesifikasi GTX 1650 super, software After Effects 2025 dan dilakukan sebanyak 5 kali menggunakan template yang sama dengan variasi parameter.
Waktu yang dicatat adalah total waktu mulai dari input hingga file berhasil diproses.
Tabel berikut menunjukkan data waktu .
alam deti.
dari masing-masing Tabel 1.
Data waktu rendering No.
Waktu Manual .
Waktu Otomatis .
TEKNIMEDIA - Volume 6.
Nomor 2.
Desember 2025: 163 Ae 169 Berdasarkan Tabel 1, rata-rata waktu proses rendering secara manual adalah 180.
80 detik, sedangkan waktu rendering dengan sistem otomatis hanya membutuhkan 58.
20 detik.
Untuk mengukur seberapa besar peningkatan efisiensi yang diperoleh dari penggunaan sistem otomatisasi rendering dibandingkan dengan metode manual, digunakan rumus efisiensi sebagai berikut:
ace = ccacoco - ccacocu ccacoco y 100 % .
di mana:
ace adalah nilai efisiensi dalam bentuk persentase (%), ccacoco merupakan rata-rata waktu rendering menggunakan metode manual .
alam deti.
, ccacocu merupakan rata-rata waktu rendering menggunakan sistem otomatisasi .
alam deti.
Rumus ini digunakan untuk mengetahui seberapa besar waktu yang berhasil dihemat dengan beralih dari proses manual ke proses Semakin tinggi nilai ace, semakin besar peningkatan efisiensi waktu yang diperoleh.
Berdasarkan data hasil percobaan Tabel 1, rata-rata waktu rendering secara manual adalah 80 detik, sedangkan dengan sistem otomatis hanya membutuhkan waktu 58.
20 detik.
Jika dimasukkan ke dalam rumus 1, maka efisiensi yang diperoleh sebesar:
ace = 80 - 58.
y 100 % = 67,78 % .
Hasil ini menunjukkan bahwa sistem otomatisasi memberikan peningkatan efisiensi waktu kerja hingga 67,78% dibandingkan metode rendering manual.
Python flask dapat digunakan untuk membangun antarmuka backend berbasis web yang serupa .
Keunggulan dan Keterbatasan Beberapa keunggulan yang ditawarkan oleh sistem ini antara lain adalah efisiensi waktu yang jauh lebih baik dibanding metode manual, kemudahan akses karena sistem berbasis web jika dikembangkan lebih lanjut, serta fleksibilitas tinggi dalam mendukung parameter kustomisasi seperti teks dan warna.
Sistem ini juga memudahkan pengguna tanpa keahlian teknis dalam After Effects untuk tetap bisa menghasilkan video secara otomatis .
Namun demikian, sistem ini masih memiliki sejumlah keterbatasan .
Proses rendering sangat bergantung pada keberadaan dan stabilitas Adobe After Effects di sisi server, yang artinya sistem hanya dapat berjalan jika After Effects terpasang dan aktif.
Selain itu, jumlah template yang tersedia masih terbatas dan dapat menjadi hambatan untuk variasi kebutuhan pengguna.
Proses rendering juga tetap membutuhkan sumber daya perangkat keras yang tinggi, sehingga server perlu memiliki spesifikasi yang memadai untuk menjaga performa optimal saat banyak pengguna mengakses system .
KESIMPULAN
Penelitian ini berhasil merancang dan mengimplementasikan sistem otomatisasi proses rendering video berbasis web pada Adobe After Effects dengan mengintegrasikan ExtendScript dan framework Flask.
Sistem yang dikembangkan terbukti dapat meningkatkan efisiensi proses rendering hingga 67,78% dibandingkan metode manual tradisional .
Sistem ini memungkinkan pembuat konten sosial media untuk mempercepat produksi konten visual tanpa mengorbankan kualitas dan fleksibilitas .
Integrasi teknologi web dengan software kreatif tradisional membuktikan bahwa otomatisasi proses kreatif dapat dilakukan secara efektif dan stabil .
Untuk pengembangan lebih lanjut, sistem dapat ditingkatkan dengan menambahkan dukungan untuk lebih banyak template, parameter kustomisasi yang lebih kompleks, dan integrasi dengan cloud storage untuk penyimpanan hasil render .
Selain itu, implementasi real-time monitoring dan notification system dapat meningkatkan pengalaman pengguna dalam memantau proses rendering .
Penelitian ini memberikan kontribusi signifikan dalam bidang otomatisasi produksi multimedia dan membuka peluang untuk pengembangan sistem serupa yang dapat diaplikasikan pada software kreatif.
Dengan terus berkembangnya teknologi web dan kebutuhan akan efisiensi dalam industri kreatif, sistem seperti ini memiliki potensi besar untuk diadopsi secara luas di masa depan .
Saputra.
Innova.
Capricorna.
Irawan.
Ramadhan dan Hakim Ai Sistem Otomatisasi Rendering Video Template After Effects Berbasis Web Dengan Extendscript Dan Flask
DAFTAR PUSTAKA