Pages

Thursday, July 24, 2025

Membuat Game Balon Matematika

Bismillahirrahmanirrahim.

<- Membuat Text Input | ->

🎈 Game Balon Matematika - Wick Editor

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!

Membuat Text Input

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)

Mengikuti Mouse

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:


Ikuti langkah-langkah berikut:

1. Tambahkan Objek (Karakter)

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  

2. Tambahkan Script di Frame (Update Event)

Klik frame (di Timeline) atau klik gambar (di Stage)

klik frame

klik gambar di stage


 Di panel Scripts, pilih add script-Timeline-Update

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


 Berikut hasilnya:

Tekan tombol Pause untuk menghentikan preview-nya.

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.

Aplikasi Pertama Saya di Wick Editor

Bismillahirrahmanirrahim.

<- Pengenalan Wick Editor | Mengenal Komponen di Wick Editor ->

Berikut aplikasi pertama saya dengan menggunakan Wick Editor 1.19:


 Berikut screenshot-nya:

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

Tentang Proyek

Aplikasi ini menyajikan soal sederhana:

2 + 1 × 0 = ?

Pengguna dapat menjawab dengan menekan angka pada keyboard, dan aplikasi akan menampilkan:

  • Benar → jika jawaban sesuai
  • Salah → jika jawaban keliru

Terdapat juga penjelasan konsep prioritas operasi matematika di bawah soal.

Kode sumber: Tekno Alif Repositori 

Semoga Allah memberikan taufik-Nya kepada kita semua

Mengenal Komponen di Wick Editor

Bismillahirrahmanirrahim.

<- Aplikasi Pertama Saya di Wick Editor | Mengikuti Mouse ->


🎨 1. Stage

Area kerja utama tempat objek ditampilkan dan diatur.

🕒 2. Timeline

Mengatur urutan animasi dan layer dengan keyframe.

📚 3. Asset Library

Penyimpanan aset seperti gambar, suara, dan simbol.

✏️ 4. Tools

Alat menggambar: select, brush, bentuk, teks, dsb.

🧠 5. Inspector Panel

Menampilkan dan mengatur properti objek (posisi, ukuran, nama, warna).

💻 6. Script Editor

Menulis kode interaktif (JavaScript) untuk objek atau frame.

🧩 7. Wick Object / Clip

Objek reusable seperti "movie clip" di Flash.

🎬 8. Playback Controls

Tombol Play/Stop untuk menguji animasi/interaksi.

📦 9. Export Options

Ekspor proyek ke HTML, GIF, video, atau file .wick.

🔄 10. Save & Load

Simpan proyek atau buka kembali file .wick

Perkenalan Wick Editor

Bismillahirrahmanirrahim.

<- Daftar Isi | Aplikasi Pertama Saya di Wick Editor -> 

 

✨ Apa Itu 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.

🔍 Kenapa Wick Editor?

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

🧪 Aplikasi Pertama Saya

Sebagai percobaan pertama, saya membuat aplikasi sederhana bernama:

Aplikasi Matematika Pertamaku

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:

  • Benar → jika jawaban sesuai
  • Salah → jika jawaban keliru

📦 Ekspor Jadi HTML & Upload ke GitHub

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.

🎯 Siapa yang Cocok Menggunakan Wick Editor?

  • 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 😄

🔚 Penutup

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.

Daftar Isi Wick Editor

Bismillahirrahmanirrahim.

Perkenalan Wick Editor ->


 Berikut adalah daftar isi untuk mempelajari Wick Editor dari Nol

  1. Perkenalan Wick Editor
  2. Aplikasi Pertama Saya
  3. Mengenal Komponen Wick Editor
  4. Membuat Karakter Mengikuti Mouse
  5.  

terakhir diperbaharui: Kamis 28 Muharram 1447 (24 Juli 2025) 

Saturday, July 19, 2025

Membuat Komentar

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:

https://belajarpython.com

https://ngodingdata.com

Membuat Program Pertama "Bismillah"

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 pilih Python 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

3. Berikutnya silahkan ketik python kakalif.py lalu tekan tombol ENTER, maka hasilnya seperti ini
 


Referensi:

https://belajarpython.com

https://ngodingdata.com

 

Menjalankan Python

Bismillahirrahmanirrahim.

 <- Menyiapkan Alat dan Bahan | Membuat Program Pertama "Bismillah" ->

Untuk menjalankan Python, silahkan cari di Start Menu dengan kata kunci Python


 
pilih Python 3.13 (64-bit), akan tampil seperti ini


 Silahkan coba ketikkan kode berikut:

    print ("Bismillah")

kemudian tekan tombol ENTER di keyboard, maka akan tampil hasilnya seperti ini

Menyiapkan Alat dan Bahan

 Bismillahirrahmanirrahim.

<- 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

 Tunggu sampai proses install-nya selesai

Jika sudah selesai, tampilannya seperti ini.

Silahkan klik Close  
 

Berikutnya, kita coba dulu membuka IDLE (Python 3.13 64-bit). Silahkan buka Start Menu kemudian cari IDLE

Begini tampilannya

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