Pada tampilan multimedia interaktif atau media pembelajaran, kadang kita menemukan halaman yang harus diisi dengan identitas kita seperti nama, kelas, nomor, password dan sebagainya. Hal itu mungkin bisa ditemukan pada halaman evaluasi atau latihan, bahkan halaman pertama /depan sebuah tayangan multimedia interaktif. Contohnya adalah tampilan gambar seperti berikut.
Nah pada kesempatan kali ini saya akan berbagi pengalaman untuk membuat desain halaman Log in. Sebenarnya untuk tutorial ini sudah pernah saya buat dalam bentuk video tutorial, namun saya tambahkan dengan teks supaya lebih mudah di baca dan dipahami. Oke kita simak baik baik ya.
Langkah pertama, pelajari tipe text static, dynamic dan input dulu ya!
Apa sih itu text static, dynamic dan input itu?
- Static Text : teks yang diam => untuk menampilkan teks pada stage yang diam/ judul/ tombol.
- Dynamic Text : teks yang berubah-ubah mengikuti perintah/ action => untuk menampilkan perubahan teks setelah mendapatkan perintah (JANGAN DIGUNAKAN UNTUK TEKS PADA TOMBOL)
- Input Text : kolom teks => teks yang dapat di gunakan sebagai input karakter (JANGAN DIGUNAKAN UNTUK TEKS PADA TOMBOL)
Langkah kedua, buatlah sebuah halaman log in pada Frame 1 dengan format layout sebagai berikut!
Langkah ketiga, masukkan action versi 2.0 berikut di Frame 1
var nama="" var kelas="" var nomor="" stop()
Langkah keempat, berikan action pada tombol Oke pada Frame 1
on (release) {
if (nama == "" or kelas == "" or nomor == "")
{gotoAndStop(2);}
else {gotoAndStop(3);}}
Langkah kelima, buat sebuah kalimat dengan teks static pada Stage di Frame 2
“Maaf anda belum mengisi kolom, silakan isi kembali!”
Langkah keenam, berikan action pada tombol Oke pada Frame 2
On(release) {
gotoAndStop(1)}
Langkah ketujuh, buat sebuah kalimat dengan teks static pada Frame 3
“Selamat datang!”
Langkah ke delapan, silakan anda buat tampilan menjadi lebih menarik dengan merancang desain tampilan di layer yang berbeda.
Untuk lebih jelasnya silakan tayangan video berikut ini!
catatan:
Selamat mencoba!