Membuat Buku Interaktif

//www.youtube.com/embed/2Ej9nN2Pj0E

Intro:

Ini adalah tutorial untuk mengajarkan Anda cara membuat buku interaktif dasar menggunakan hyperPad. Dengan mengikuti tutorial ini, Anda akan memahami konsep-konsep yang diperlukan untuk menyusun sebuah buku.

Struktur Proyek:

Sebuah proyek hyperPad dibagi menjadi Adegan, Objek, dan Perilaku.

Adegan:

Adegan berisi semua objek untuk aplikasi Anda dan merupakan cara yang bagus untuk mengorganisir berbagai bagian yang membentuk aplikasi Anda. Misalnya, Anda dapat menggunakan adegan baru untuk setiap halaman buku.

Objek:

Objek adalah item individu dalam adegan. Ini termasuk teks atau ilustrasi. Setiap objek dapat memiliki perilakunya sendiri.

Perilaku:

Perilaku adalah yang membuat adegan dan objek Anda interaktif dan hidup.

Mengimpor Gambar:

Anda dapat mengimpor gambar dan ilustrasi dari Rol Kamera, Aliran Foto, dan Drop Box. hyperPad secara otomatis akan membuat gambar non-retina untuk Anda, jadi saat Anda membuat ilustrasi, pastikan Anda bekerja dengan ukuran gambar 2048×1536. Ukuran gambar maksimum yang dapat diimpor oleh Tapapbl adalah 2048×2048 piksel.

Selain itu, karena hyperPad saat ini tidak mendukung font, atau Teks Kaya, Anda juga harus mengimpor teks Anda sebagai PNG dengan latar belakang transparan.

Setelah Anda mengimpor semua gambar Anda, Anda dapat membuka Drawer Objek untuk mulai menambahkannya ke adegan Anda.

Menambahkan Perilaku:

Menjadikan objek Anda interaktif adalah mudah di hyperPad.

Pertama, ketuk pada objek yang ingin Anda jadikan interaktif. Kemudian dari Properti Objek, ketuk tombol "Perilaku" untuk membuka editor perilaku.

Untuk tutorial ini, interaksi yang ingin kita buat adalah ketika pembaca menyentuh objek, objek tersebut bergerak ke posisi tertentu.

Dari kategori "Input" seret perilaku "Mulai Menyentuh" ke kanvas.

Secara default perilaku mulai menyentuh secara otomatis memilih objek saat ini. Tetapi Anda dapat mengubah ini dengan mengetuk grafik objek dalam properti perilaku.

Selanjutnya, seret perilaku "Pindah ke Titik", dan sambungkan ke "Mulai Menyentuh" yang Anda tambahkan pada langkah sebelumnya. Perilaku "Pindah ke Titik" akan memindahkan objek ke titik yang dipilih di Kanvas.

Anda dapat memasukkan lokasi spesifik dengan mengisi kolom input X/Y yang terletak di "Properti Perilaku". Anda juga dapat memilih lokasi untuk bergerak secara visual.

Untuk melakukan ini secara visual, ketuk grafik objek dalam properti perilaku. Pilih objek yang ingin Anda pindahkan, lalu gerakkan target biru ke lokasi yang diinginkan.

Setelah Anda puas dengan posisi tersebut, ketuk ikon centang untuk menerima posisi baru. Perhatikan bahwa kolom X dan Y dalam properti perilaku otomatis terisi.

Jika Anda menekan "Putar" sekarang, Anda akan melihat bahwa itu berfungsi persis seperti perilaku yang telah ditentukan. Objek akan bergerak setelah Anda menyentuhnya.

Pergantian Halaman & Adegan:

Sekarang bahwa Anda telah menyiapkan halaman pertama dengan interaksi, Anda mungkin ingin menambahkan halaman tambahan, dan kemampuan untuk menggeser di antara mereka.

Ada beberapa cara berbeda untuk menambahkan gestur gesek. Anda dapat menambahkan perilaku ke objek tertentu di adegan Anda, atau menambahkannya ke Perilaku Global sehingga mempengaruhi semua adegan dalam buku Anda.

Untuk tutorial ini, mari tambahkan gestur gesek ke Perilaku Global sehingga kita tidak perlu menambahkannya untuk setiap adegan baru.

Untuk memulai, buka "Menu Kreasi" dengan menekan ikon di sudut kiri atas.

Kemudian ketuk tombol "Perilaku Global" di bagian bawah untuk membuka editor perilaku. Perilaku yang Anda tambahkan di sini akan mempengaruhi seluruh proyek Anda dan dieksekusi saat Anda memuat setiap adegan.

Selanjutnya, seret perilaku "Geser Kiri", dan ketuk sekali setelah ditambahkan ke kanvas untuk membuka properti perilaku.

Perhatikan saklar toggle "Geser pada apa saja". Jika saklar ini diatur ke "Mati", maka Anda harus menggeser objek tertentu agar peristiwa terjadi. Atur saklar ke posisi "Hidup", sehingga Anda dapat menggeser apa saja dan tidak terbatas pada objek tertentu.

Catatan: Jika Anda menambahkan perilaku "Geser" ke perilaku global, itu tidak akan memiliki objek tertentu yang dipilih. Objek yang Anda batasi adalah "Latar Belakang". Jika Anda tidak mengatur saklar ke posisi "Hidup", ini mungkin terlihat seperti berfungsi. Tetapi jika Anda menambahkan objek lain yang menutupi latar belakang, mereka dapat mengganggu penggesekan, terutama jika mereka memiliki perilaku input sentuh lainnya yang ditambahkan.

Selanjutnya, tambahkan perilaku Muat Adegan Berikutnya dan sambungkan ke perilaku Geser. Ini akan otomatis memuat adegan berikutnya setelah Anda menggeser jari Anda ke sisi kiri layar.

Jika Anda tidak memiliki adegan lain dalam proyek Anda, maka adegan saat ini akan dimuat ulang. Selain itu, jika Anda berada di adegan terakhir dalam proyek Anda, maka adegan berikutnya adalah yang pertama dalam daftar adegan.

Sekarang Anda dapat menambahkan adegan baru ke proyek Anda. Jika Anda menekan putar, Anda akan melihat bahwa gestur gesek Anda berfungsi di kedua adegan tanpa perlu menambahkan perilaku tambahan.

Kesimpulan:

Itulah dasar-dasar yang perlu Anda ketahui untuk membuat buku interaktif di hyperPad. Anda dapat bereksperimen dengan berbagai perilaku untuk menciptakan tingkat interaksi yang luas untuk buku Anda.