Multipages dengan Smart Apps Creator

posted in: Tutorial | 0

Beberapa artikel tentang Smart Apps Creator sudah saya rilis ya. Nah kali ini kita lanjut untuk membuat Multipages alias banyak halaman dalam satu section dengan Smart Apps Creator (SAC).

Jika ketinggalan sesinya, kalian bisa mempelajari dari link-link berikut.

  1. Smart Apps Creator (SAC) : Mari Berkenalan
  2. Smart Apps Creator (SAC) : Start Page, Page, Section
  3. Opening Beranimasi dengan Smart Apps Creator (SAC)
  4. Mengatur Durasi Opening di Smart Apps Creator (SAC)
  5. Membuat Menu di Smart Apps Creator (SAC) – Bagian 1
  6. Membuat Menu di Smart Apps Creator (SAC) – Bagian 2

Tampilan terakhir jika kalian sudah membuat sesuai urutan tutorial link di atas, dalam SAC akan seperti berikut.

Lima bagian sementara dalam SAC
Lima section sementara dalam SAC

Kalian harusnya sudah memiliki lima section secara berurutan sesuai nomor di atas yakni

  1. Start Page,
  2. Menu Utama,
  3. Darat,
  4. Laut, dan
  5. Udara

Sekarang kita akan membuat salah satu section menjadi multipage alias satu section dengan beberapa page sehingga memiliki banyak halaman/isi.

Dalam contoh ini kita akan mencoba membuat multipages di section Darat. Cus langsung saja ke langkah-langkahnya.

  1. Klik page di section Darat kemudian isi terlebih dahulu dengan gambar hewan darat. Dalam hal ini saya menambahkan gambar dan teks sehingga tampilan seperti berikut.
    Tampilan halaman gajah
    Tampilan halaman gajah
  2. Kemudian copy page yang ada di section Darat. Mengapa di-copy? Agar tidak perlu membuat lagi kontennya dari awal. Nanti yang diperlukan hanya me-replace gambarnya saja. Hemat tenaga 😀
    Copy page Darat
    Copy page Darat

    Setelah copy, tentunya harus di-paste ya. Klik lagi section Darat > klik kanan > Paste Page.
    Paste page Darat
    Tampilan section Darat kalian sekarang harusnya seperti berikut.

    Tampilan section Darat
    Tampilan section Darat

    Sekarang section Darat telah memiliki dua halaman (page).

  3. Di page kedua, ganti gambar dan teks Gajah dengan hewan darat lain. Untuk mengganti teks, tinggal lakukan editing seperti biasa layaknya mengetik teks. Nah, untuk mengubah gambar dengan cepat tanpa harus import ulang, cukup lakukan replace image.
    Klik page kedua > klik kanan gambar Gajah yang akan di-replace > pilih Replace Image (Keep Proportion) > cari gambar yang akan dimunculkan. Dalam hal ini saya akan mengganti dengan gambar Rusa.

    Me-replace image di SAC
    Me-replace image di SAC

    Oiya, ada perbedaan antara Replace Image dengan Replace Image (Keep Proportion). Saat menggunakan Replace Image, jika gambar awal berbeda ukuran dengan gambar kedua, ukuran gambar kedua akan menyesuaikan gambar pertama. Sedangkan Replace Image (Keep Proportion), gambar kedua akan tetap sesuai ukurannya dan tidak terpengaruhi ukuran gambar pertama.
    Sekarang tampilan sementara untuk page kedua adalah seperti berikut.

    Tampilan sementara dengan dua page
    Tampilan sementara dengan dua page
  4. Kalian bisa menambahkan page lagi dan mengganti isinya dengan gambar hewan darat lain ya. Cobalah sampai ada tiga halaman aja cukup walaupun sebenarnya kita sudah bisa membuat multipages di SAC hanya dengan dua halaman saja.
    Halaman ketiga saya berisi kuda sebagai hewan daratnya. Tampilan sementara akan seperti berikut.

    Tampilan sementara dengan tiga page
    Tampilan sementara dengan tiga page
  5. Sekarang coba preview aplikasi kalian. Klik tombol menu Darat. Jika sudah masuk ke materi Hewan Darat, untuk menuju ke halaman berikut cukup lakukan swipe alias geser layar kalian saja.
    Demo Multipages dengan SAC
    Demo Multipages dengan SAC

Sampai di sini mudah kan? Bahasan selanjutnya akan kita buat tombol Home untuk kembali ke menu awal ya.

Selamat belajar 😀

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.