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)
Bismillahirrahmanirrahim.
<- Membuat Program Pertama "Bismillah" | Mengenal Tipe Data ->
Komentar adalah kode dalam skrip Python yang tidak dieksekusi saat kita menjalankan file python. Komentar ini digunakan untuk memberikan penjelasan tambahan dari kode yang kita ketikkan. Contohnya seperti ini
Ada beberapa cara untuk menuliskan komentar di Python, yaitu dengan tanda pagar ( # ) untuk komentarnya 1 baris kode atau tanda petik tiga ( ''' ) kalau komentarnya lebih dari 1 baris.
Saat kita menjalankan script diatas, kita akan melihat output berupa Bismillah dan Belajar Python dari Nol, karena tulisan/komentar yang ditulis tidak dieksekusi.
Referensi:
Bismillahirrahmanirrahim.
<- Menjalankan Python | Membuat Komentar ->
Tulisan kali ini kita akan mulai membuat program pertama di python, yaitu "Bismillah".
Silahkan kalian buka teks editor masing-masing, misalnya di GNU/Linux distro Kubuntu ada teks editor bawaan namanya KATE, berikut tampilannya
Untuk pengguna Windows, bisa menggunakan Visual Studio Code (VSC) yang bisa diunduh pada link berikut: https://code.visualstudio.com/
Berikut tampilannya
Pada tutorial ini saya akan gunakan VSC.
CARA MENJALANKAN PROGRAM PERTAMA "BISMILLAH":
1. Silahkan buka VSC melalui Start Menu lalu mengetikkan kata Visual Studio Code
2. Klik New File
lalu tekan CTRL+S untuk save file dengan nama yang kalian tentukan sendiri, contoh saya menggunakan nama kakalif.py
3. Silahkan ketikkan kode:
print ("Bismillah")
print ('Bismillah')
lalu CTRL+S untuk menyimpan
4. Untuk menjalankan kode ini, silahkan ikuti instruksi (1) lalu (2) pada gambar berikut
maka akan otomatis menjalankan file kakalif.py dan outputnya:
Bismillah
Bismillah
Selain lewat Terminal di VSC, kita bisa eksekusi juga lewat CMD.
Berikut langkah-langkahnya:
1. Buka folder tempat penyimpanan file python kalian, misalnya saya kakalif.py tersimpan di C:\Users\ar\Documents\Kak Alif-Python
2. Tahan tombol Shift pada keyboard dan klik kanan pada area kosong di dalam folder tersebut, akan muncul Open command window here
Referensi:
<- Menyiapkan Alat dan Bahan | Membuat Program Pertama "Bismillah" ->
Untuk menjalankan Python, silahkan cari di Start Menu dengan kata kunci Python
print ("Bismillah")
kemudian tekan tombol ENTER di keyboard, maka akan tampil hasilnya seperti ini
<- Perkenalan Python | Menjalankan Python ->
Persyaratan minimum
ALAT: PC atau Laptop
BAHAN: File master Python
CARA MENYIAPKAN:
Sebelum kalian menggunakan Python, kalian harus mengunduh file masternya lalu meng-install-nya di PC atau Laptop. Saat ini, versi terakhir dari Python yaitu 3.13.5.
1. Kunjungi alamat website python
2. Pilih Download (sesuaikan dengan sistem operasi anda)
Jika OS kalian Windows, silahkan unduh sesuaidengan arsitektur laptop kalian (64-bit atau 32-bit). Catatan: untuk pengguna Windows 7 atau versi sebelumnya hanya bisa meng-install versi 3.8.
Setelah download selesai, kalian akan dapat file python-3.13.5-amd64.exe.File python-3.13.5-amd64.exe adalah file master untuk python. FIle ini akan melakukan instalasi ke sistem Windows. Silahkan klik ganda untuk mengeksekusinya
Pada tahap ini kita akan diminta untuk memilih Install Now atau Customize Installation. Silahkan centang "Add python.exe to PATH" agar python dapat diakses dari Command Prompt (CMD) atau terminal secara langsung. Berikutnya silahkan klik Install Now
Silahkan klik Close
Berikutnya, kita coba dulu membuka IDLE (Python 3.13 64-bit). Silahkan buka Start Menu kemudian cari IDLE
Kemudian kita coba Python dari Command Promt (CMD). Silahkan buka Start Menu kemudian cari Command Promt (CMD)
Setelah CMD terbuka, ketik perintah python untuk masuk ke Python Shell dari CMD
Berhasil :)
Jika kalian pengguna GNU/Linux, misalnya distro Kubuntu 20.04 maka python sudah ter-install secara bawaan saat kita install Kubuntu 20.04. Silahkan cek melalui terminal dengan perintah:
python3 --version
Jika belum ter-install, maka silahkan buka terminal lalu masukkan perintah:
sudo apt-get update
sudo apt-get install python3
Untuk mengetahui apakah python sudah terinstall atau belum, silahkan cek melalui Terminal/Konsole dengan mengetikkan kode: python3 --version
 | ||
| Ini python versi 3.11.13 di GNU/Linux distro Kubuntu 20.04 |
Berikut contoh kode python:
print("Bismillah belajar python") dengan menggunakan teks editor KATE
