Memprogram Game Warna dalam Hype

• April 29, 2024

Dalam tutorial sebelumnya, kami mengimpor gambar untuk permainan mewarnai untuk iBooks Author^R yang kami buat di Hype Pro. Sekarang kita akan menambahkan elemen interaktif ke gim.

Buka dokumen Hype Anda dan mari kita mulai.

Langkah pertama kami adalah menambahkan identitas ke setiap lapisan yang perlu dihilangkan ketika diklik. Ini termasuk lapisan garis seni untuk tubuh bebek, sayap dan paruh. Dengan menetapkan masing-masing lapisan ini ID Elemen Unik, kami kemudian dapat memprogram visibilitas lapisan ini dengan JavaScript.

1. Buka Inspektur Identitas.
   
   
2. Pilih layer duck_body_line di Timeline Utama.
   
   
3. Di Inspektur Identitas, tambahkan ID Elemen Unik. Mari kita gunakan ID Tubuh.
   
   
4. Pilih layer duck_wing_line dan tambahkan Sayap sebagai ID Elemen Unik.
   
   
5. Pilih layer duck_beak_line dan tambahkan Paruh sebagai ID Elemen Unik.
   
   

Sekarang layer-layer tersebut memiliki ID Elemen Unik, kita bisa menambahkan aksi ke layer-layer ini. Kami akan menggunakan JavaScript dan properti Tampilan untuk mengontrol visibilitas lapisan ini. Nilai properti Tampilan default untuk gambar adalah Di barisan, yang berarti bahwa gambar ditampilkan dalam sisa HTML dan tidak dimulai pada baris baru.

Untuk menyembunyikan gambar, kami akan menggunakan JavaScript untuk mengubah nilai properti tampilan Di barisan untuk tidak ada untuk masing-masing lapisan seni garis. Ini akan mengungkapkan lapisan isian warna di bawah ini.

object.style.display = "tidak ada"

1. Buka Inspektur Tindakan.
   
   
2. Pilih layer duck_body_line.
   
   
3. Di bagian Klik Mouse (Ketuk), klik ikon Plus.
   
   
4. Di menu tarik-turun Tindakan, pilih Jalankan JavaScript.
   
   
5. Karena ini akan menjadi JavaScript khusus, atur menu drop-down Function ke Function Baru. Ini akan membuka jendela tab baru dengan kode JavaScript default dan fungsi bernama untitledFunction.
   
   
6. Ubah nama fungsi dari Fungsi tanpa judul untuk Fungsi Tubuh. Anda akan melihat nama tab berubah menjadi BodyFunction ().
   
   Selanjutnya kita akan menambahkan kode untuk mengatur properti tampilan tidak ada Untuk Tubuh elemen. Tambahkan kode berikut pada baris kosong 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Kembali ke jendela tab Pemandangan Tanpa Judul dan pilih layer duck_wing_line.
   
   
8. Ulangi langkah sebelumnya untuk mengubah nama fungsi menjadi WingFunction dan tambahkan JavaScript berikut.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Pilih layer duck_beak_line, ubah nama fungsinya menjadi Fungsi Beak dan tambahkan JavaScript berikut.
   
   hypeDocument.getElementById ("Paruh"). style.display = "none";
   
   Itu dia. Mari kita coba di Browser. Jika semuanya berjalan dengan baik, ekspor proyek sebagai widget iBooks Author.
   
   
10. Dari Menu, klik File - Ekspor sebagai HTML5 - Dashboard / iBooks Author Widget.
    
    

Petunjuk Video: Ismail Izzani jadi Barber Hispter?! // RIALISASI JOB SELEBRITI (April 2024).