Bismillahirrahmanirrahim.
<- Membuat Text Input | ->
Sebuah game edukatif interaktif berbasis matematika yang dibuat menggunakan Wick Editor. Dalam permainan ini, pemain harus menjawab soal matematika sebelum balon mencapai batas atas layar. Jika jawabannya benar, balonnya akan meledak — jika tidak, permainan berakhir!
Bismillahirrahmanirrahim.
<- Membuat Multiverse| Membuat Game Balon Matematika ->
Fitur text input sebenarnya sudah tersedia di Builtin Library (Beta) jika kita menggunakan Wick Editor secara online (lewat website). Catatan ya, kalau mau simpel ya pakai saja Wick Editor lewat website karena asset-nya memang tersedia online. Kalau mau buat sendiri, lanjutkan baca tulisan ini (agak ribet sih hehe)
Bismillahirrahmanirrahim.
<- Mengenal Komponen di Wick Editor | Membuat Multiverse ->
Kali ini kita akan coba buat karakter yang ada di stage mengikuti mouse saat kita gerakkan, hasilnya seperti ini:
Buat atau gambar karakter di Stage (bisa lingkaran, gambar, dll). Pada tutorial ini saya menggunakan logo Kak Alif
Klik objek tersebut.
Buka panel Inspector → beri nama instance, misalnya: kakaliflogo
Klik frame (di Timeline) atau klik gambar (di Stage)
 |
| klik frame |
 |
| klik gambar di stage |
Tulis kode berikut:
kakaliflogo.x = mouseX;
kakaliflogo.y = mouseY;
Ini akan membuat karakter langsung berpindah ke posisi mouse setiap frame.
Setelah itu, tutup Code Editornya, lalu tekan CTRL+SAVE ya. Setelah itu tekan tombol Play yang berwarna hijau
Langkah terakhir adalah menyimpannya dalam bentuk html:
Pilih menu export yang ada pada pojok kanan atas, lalu pilih Interactive-Export HTML
🎮 Coba Aplikasi di Browser: 👉 https://teknoalif.github.io/wickeditor-kakalif-mengikutimouse
📁 Lihat Kode Sumber & File Proyek di GitHub: 👉 https://github.com/teknoalif/wickeditor-kakalif-mengikutimouse
Semoga Allah memberikan taufik-Nya kepada kita semua.
Bismillahirrahmanirrahim.
<- Pengenalan Wick Editor | Mengenal Komponen di Wick Editor ->
Berikut aplikasi pertama saya dengan menggunakan Wick Editor 1.19:
 | |||
| Tampilan file proyek mentah dari Wick Editor |
 |
| Tampilan awal saat dibuka di GitHub Pages (LINK) |
 |
| Jika menekan tombol 2 maka jawabannya benar |
 |
| Jika menekan tombol selain 2 maka jawabannya salah |
2 + 1 × 0 = ?
Pengguna dapat menjawab dengan menekan angka pada keyboard, dan aplikasi akan menampilkan:
Terdapat juga penjelasan konsep prioritas operasi matematika di bawah soal.
Kode sumber: Tekno Alif Repositori
Semoga Allah memberikan taufik-Nya kepada kita semua
Bismillahirrahmanirrahim.
<- Aplikasi Pertama Saya di Wick Editor | Mengikuti Mouse ->
Area kerja utama tempat objek ditampilkan dan diatur.
Mengatur urutan animasi dan layer dengan keyframe.
Penyimpanan aset seperti gambar, suara, dan simbol.
Alat menggambar: select, brush, bentuk, teks, dsb.
Menampilkan dan mengatur properti objek (posisi, ukuran, nama, warna).
Menulis kode interaktif (JavaScript) untuk objek atau frame.
Objek reusable seperti "movie clip" di Flash.
Tombol Play/Stop untuk menguji animasi/interaksi.
Ekspor proyek ke HTML, GIF, video, atau file .wick.
Simpan proyek atau buka kembali file .wick
Bismillahirrahmanirrahim.
<- Daftar Isi | Aplikasi Pertama Saya di Wick Editor ->
Wick Editor adalah perangkat lunak bebas berbasis web untuk membuat animasi 2D, media interaktif, dan aplikasi sederhana. Tidak perlu instalasi—cukup buka wickeditor.com, dan kamu bisa langsung mulai menggambar, menambahkan animasi, serta menulis skrip interaktif dengan JavaScript.
Wick Editor juga tersedia dalam versi offline, sehingga tetap bisa digunakan meskipun tanpa koneksi internet. Alamat website untuk mengunduh Wick Editor bagi kalian yang mau menggunakannya tanpa internet: LINK. Unduh versi desktop (offline editor) untuk GNU/Linux, Windows, atau macOS.
Bisa dibilang, Wick Editor adalah penerus semangat Flash, tetapi lebih sederhana, ringan, dan terbuka untuk semua kalangan, termasuk pemula dan pendidik.
Setelah Flash MX tidak lagi bisa digunakan secara legal, banyak kreator kecil, guru, dan pelajar kehilangan alat sederhana untuk membuat animasi interaktif. Wick Editor hadir untuk mengisi kekosongan itu.
Beberapa alasan kenapa saya memilih Wick Editor:
Perangkat Lunak Bebas (lisensi: GNU General Public License v3)
Berjalan langsung di browser (tidak perlu install)
Antarmuka mirip Flash, mudah dipahami
Dukungan skrip interaktif dengan JavaScript
Langsung bisa ekspor ke HTML atau file video
Sebagai percobaan pertama, saya membuat aplikasi sederhana bernama:
Aplikasi ini mengenalkan konsep dasar operasi hitung matematika dengan soal sederhana: 2 + 1 × 0 = ?. Pengguna dapat menjawab dengan menekan angka pada keyboard, dan aplikasi akan menampilkan:
Hasil proyek bisa langsung diekspor dalam format .html. Saya unggah ke GitHub dan menyajikannya secara publik melalui GitHub Pages.
Dengan begini, aplikasi bisa dibuka di mana saja melalui browser tanpa harus install apa pun.
Pelajar & Mahasiswa yang ingin belajar dasar animasi & pemrograman
Guru yang ingin membuat media pembelajaran interaktif
Desainer yang butuh alat ringan untuk membuat prototipe
Mantan pengguna Flash MX yang kangen masa lalu 😄
Wick Editor bukan hanya alat pengganti Flash, tapi juga pintu masuk baru ke dunia kreatif digital yang lebih modern dan terbuka. Jika kamu pernah membuat sesuatu dengan Flash, kamu pasti akan tersenyum saat mencoba Wick. Dan kalau kamu baru pertama kali menyentuh alat semacam ini—percayalah, kamu sedang memulai sesuatu yang menyenangkan.
Bismillahirrahmanirrahim.
terakhir diperbaharui: Kamis 28 Muharram 1447 (24 Juli 2025)
