03 January 2016

Desain web ciamik dengan Flash

Desain web walaupun bukan hal yang terpenting dalam membangun sebuah website, namun tampilan website yang menarik juga sangat di butuhkan terutama untuk website yang berkaitan dengan entertaiment dan company profile dari suatu perusahaan. Namun kali ini, penulis akan mendesain web yang ciamik dengan menggunakan Flash.

1. Buatlah dokumen baru dengan ukuran 800 x 450 px., dan angkah berikutknya membuat objek rectangle dengan sudut rounded 25 dan ketebalan garis 2 tanpa arsiran.


2. Kemudian tambahkan objek-objek garis dengan Line Tool seperti tampilan berikut ini :


3. Memofikasi objek garis dengan menggunakan Selection Tool.
Cara kerjanya :

1. Lekatkan pointer selection tool tapi dalam kondisi objek garis tidak terpilih.


2. Kemudian klik mouse dan tekan, drag-lah mouse ke atas luar.


4. Lakukan cara yang sama dengan garis horizontal bagian bawah, namun hanya bedanya arah drag-nya saja yang ke bawah luar.

Hasilnya :


5. Tambahkan teks dengan Text Tool di bagian atas sebagai header dari web. Misalnya : BINA INOVASI INFORMATIKA.


6. Selanjutnya kita akan membuat effect objek berjalan di tengah teks  “BINA INOVASI INFORMATIKA”.

Cara kerja :

1. Pada layer pertama sisipkan Insert Key Frame pada frame 40.
2. Kemudian tambahkan layer baru dan beri nama “Kotak”.  Seperti terlihat berikut ini :


7. Masih di layer “Kotak”, buatlah persegi panjang dengan Rectangle Tool tepat berada di depan teks “BINA INOVASI INFORMATIKA”. Dan masih dalam kondisi lingkaran itu terpilih, klik mouse bagian kanan dan pilih Convert to Symbol.


8. Lalu sisipkan Insert Key Frame pada frame 20 dan 40. Dan pada frame 20 pindahkan objek kotak tepat di belakang teks “BINA INOVASI INFORMATIKA”, setelah itu pilih frame 1 dan klik mouse bagian kanan pilih Create Motion Tween. Seperti terlihat berikut ini :


9. Pilih frame 20 dan buat juga Create Motion Tween. Tampilannya terlihat seperti berikut ini :


10. Buat layer baru dan berinama “Kotak 2”, kemudian buatlah kotak dengan Rectangle Tool. Seperti tampilan berikut ini :


11. Kemudian pilih Layer 1 dan lakukan pengarsiran untuk masing-masing bidang, caranya klik bidang yang akan di arsir lalu pilih Fill Color. Tampilan akhirnya seperti berikut ini :


12. Masih pada Layer 1, copylah frame 1 dan paste di frame 40. Agar pada waktu di jalankan tidak ada senggang untuk berkedip saat perpindahan dari frame 40 ke frame 1 lagi.

Semoga bermanfaat, Insya Allah di waktu lain saya akan kembangkan desain web ini degan button yang beranimasi.

No comments:

Post a Comment