Lompat ke konten Lompat ke sidebar Lompat ke footer

Tutorial Adobe Animate: Membuat Login Page AS3 + File Download

Login Page di dalam sebuah media sangat penting fungsinya salah satunya untuk melindungi file kita agar tidak digunakan secara sembarang oleh orang lain. Membuat login page di adobe animate hampir sama pembuatannya dengan di Adobe Flash. Yang membedakan jika kita menggunakan adobe flash masih bisa memakai ActionScipt 2.0 namun pada Adobe Animate kita sudah terfokus memakai actionscript 3.0. Login Page yang akan kita buat hari ini sangat mendasar, jadi mudah untuk kalian pahami. Tutorial ini dibuat khusus untuk yang baru belajar. Langsung saja ke materi pembuatan Login Page di bawah ini.

Beberapa hal yang harus dipahami dalam membuat Login Page ini:
Layer, Frame, KeyFrame, MovieClip, Button, AS3.
Niat belajar yang tinggi :)

Alat dan Bahan:
Adobe Animate versi berapapun tidak masalah.

Langkah-langkah:
1. Buka Adobe Animatenya, buat ukuran 500px x 500px.


 2. Pada Layer 1 isi dengan nama "Background"
              Layer 2 isi dengan nama "Input name"
              Layer 3 isi dengan nama "Tombol"
              Layer 4 isi dengan nama "Action"
kalian bisa saja menjadikan 4 layer diatas menjadi 1, tetapi untuk yang baru belajar sebaiknya buat layer yang terpisah seperti di atas agar tidak kebingungan.


3. Buat Desain/Bentuk dari kotak Loginnya, disini dibutuhkan imajinasi dan kratifitas kalian. Saya membuatnya seperti gambar di bawah ini.



4. Rincian dari Gambar "Login Page" adalah sebagai berikut silakan dilihat.
    tulisan "nama" dan "pass" menggunakan static text
    kolom memasukkan nama dan password input text
    tombol login dibuat dengan menekan F8 kmudian pilih button.




5. Apabila tahap 4 sudah selesai selanjutnya, memasukkan ActionSciptnya. Agar login pagenya bisa berjalan. Lagin page tadi kita buat pada frame 1 semuanya. Sekarang kita klik pada frame 5 buat keyframe disana.

hapus loginbox (ingat yang di frame 5) yang sudah kita buat, kemudian buat tulisan "Selamat Datang ! Login Berhasil.



6. Sekarng barulah mengisi Action login page tersebut.
masukkan kode berikut ini pada frame 1, layer actionscript:


Catatan:
untuk tombol login beri instance name "submit_btn"
                    inputname (kolom masukan nama) beri instance name "name_input"
                    inputpassword (kolom masukan password) beri instance name "pass_input"
nama dan pasword silakan ganti:
nama : Dirga             pas: studio
nama2: dirga             pas: ganteng
silakan ubah sesuai keinginan kalian.
Besar kecilnya huruf sangat berpengaruh jadi diperhatikan secara teliti.


7. Selesai silakan jalankan Tekan CTRL+ENTER

Source Code Download
 * LoginPage by DirgaStudio
 * LoginPage by DirgaStudio untuk buat gif/animasi

KeyWords:
adobe animate. membuat animasi dengan adobe animate, tutorial adobe animate bahasa indonesia, belajar adobe animate 2017, cara menggunakan adobe animate terbaru, belajar animasi dengan adobe animate, tutorial adobe animate membuat animasi kipas angin mudah, animasikeren dengan adobe animate.cara membuat login page adobe flash, cara menggunakan login page, membuat login page di adobe animate, belajar membuat login page di animate. membuat halaman login di adobe animate mudah dan keren


3 komentar untuk "Tutorial Adobe Animate: Membuat Login Page AS3 + File Download"

toturial Adobe Animate Kamis, 16 April 2020 pukul 21.02.00 WIB Hapus Komentar
bang, tuk buat login yang isi nya "nama" dan "kelas" gimana yaa cara x
Muhammad Yusuf Jumat, 24 April 2020 pukul 19.38.00 WIB Hapus Komentar
Itu udah ada penjelasan nya gan.
Catatan nya itu kata nya tinggal ubah sesuai yang di inginkan
Belajar BahasaBali Senin, 27 April 2020 pukul 10.33.00 WIB Hapus Komentar
itu sudah lengkap gan, silakan diikuti ya