Teknik Dasar Membuat Website dengan Flash (4)

Tulisan ini adalah bagian terakhir dari tiga tulisan sebelumnya.
Lanjuut...

1. Buka kembali file flash yang sudah dibuat sebelumnya;
2. Click layer konten, buat kotak dengan fill : None dan stroke: abu-abu;
3. Tekan F8, pilih movie clip, beri nama : konten_mc , tekan OK;
4. Double click konten_mc, klik frame 1 buat tulisan sbb (lihat gambar) :

5. click frame 2, tekan f6 untuk membuat keyframe, lalu hapus tulisan

    dan ganti dengan gambar apa saja (lihat contoh) :

6. click frame 3, tekan f6 untuk membuat keyframe, lalu hapus gambar

    dan ganti dengan tulisan (lihat contoh) :

OK...pembuatan konten sudah selesai, tinggal membuat navigasi menggunakan button dan script ya...siaap ?

7. Pilih button HOME, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(1);

}

Penjelasan : script ini untuk memberikan respon, saat mouse di-click di button Home, maka halaman akan 

berpindah ke movie clip yang sudah diberi nama konten_mc, frame ke-1

8. Pilih button PRODUCT, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(2);

}

8. Pilih button CONTACT, click kanan>action, ketikkan script sbb :

on(release) {

konten_mc.gotoAndStop(3);

}

9. Double click konten_mc, pilih frame 1, ketikkan script sbb :

stop();

Tujuannnya agar pada saat masuk ke movie clip konten_mc, maka tidak langsung menjalankan frame berikutnya, tetapi nunggu respon user menekan button. Coba tekan ctrl+enter untuk mencobanya.

Selesai sudah pekerjaan kita di flash, selanjutnya web siap di-publish, caranya...?

10. Buka Dreamweaver>HTML, pilih design view.

11.Pilih Common> Media:Flash, lalu buka file flash tadi, kemudian simpan dan tekan F12...beres deh...!

Preview-nya seperti ini :

dan ini adalah web yang siap dipublish, dan sudah bisa dilihat di browser :

Selesai....sampai ketemu di tutorial selanjutnya, diantaranya Corel Draw, Photoshop, 3D Max, After Effect, PHP, MYSQL, dll...

Teknik Dasar Membuat Website dengan Flash (3)

OK...lanjut lagi ya..., lihat posting sebelumnya disini dan disini..

Pada bagian ketiga dan keempat,  kita akan menambahkan komponen sebagai berikut :
1. Tombol Navigasi (button) beserta penggunaan action script;
2. Content Web berupa halaman beserta isinya dengan konsep movie clip;
3. Mengimport file flash (*.swf) ke dreamweaver.

Lets Go!

1. Buka file flash yang tadi.
2. Buat dua buah layer baru dengan nama konten dan navigasi (lihat gambar) :

3. Click layer navigasi, pilih Text Tool, ketikkan tulisan sbb : HOME
4. Tekan F8, pilih Button, beri nama home_btn.
5. Ketikkan PRODUCT dan CONTACT, lalu ulangi langkah 3 dan 4 untuk membuat button,
    beri nama masing-masing product_btn dan contact_btn.
Lihat gbr sbb :

6. Double click tombol HOME, sehingga saat ini kita bekerja di home_btn

7. Buat layer baru, lalu arahkan kursor ke frame hit di layer 2.

8. Drag layer 2 ke bawah layer 1 (lihat gambar).

9. Buat kotak hijau dibelakang tulisan HOME, tujuannya untuk memberikan respon 

    kepada user saat mouse memasuki area button HOME, maka akan ada animasi warna hijau.  

10. Perhatikan baik-baik gbr berikut :

11. Terapkan langkah 6 sd 9 untuk button PRODUCT dan CONTACT. OK ?

sementara bagian tiga istirahat dulu sampai disini, besok lanjut ke bagian empat (akhir yaaa..)

Teknik Dasar Membuat Website dengan Flash (2)

OK, mandi, sholat, makan (soliskan) udah...kita lanjut lagi ya...yang baru baca lihat sebelumnya ya..

Mempercantik tampilan dengan sentuhan animasi. Caranya :
1. Buat layer baru, ubah namanya menjadi animasi.
2. Buat kotak 126x210 pixel beri fill black.tempatkan rata kiri dengan background.
3. Tekan F8 untuk mengubahnya menjadi movie clip,
     ubah name menjadi : animasi dan type : movie clip
4. Double click untuk mengedit movie clip, buat layer baru, ubah namanya menjadi animasi,
    sehingga kita memiliki dua layer yaitu layer animasi dan layer kotak hitam tadi.
     Ubah namanya menjadi kotak.
5. buat animasi motion tween, dengan cara :
    - pilih layer kotak, arahkan mouse di frame 100, tekan F6 untuk membuat keyframe,
       lakukan hal yang sama untuk layer  animasi.
    - klik kanan di layer animasi>create motion tween
    - geser layer animasi di frame 0 ke ujung kiri, dan di frame 100 ke ujung kanan.
    - buat masking dengan cara klik kanan layer kotak> Mask (untuk lebih jelasnya lihat gambar)
 

6. Kembali ke jendela Scene 1 dengan cara klik scene 1, lalu tekan Ctrl+Enter....dan...

    horee..animasi  berhasil hehe....(bersambung... )

Tunggu bagian (3) ya, tentang teknik navigasi halaman dengan button,  movie clip.& polesan Action Script..sekarang saya mau bulutangkis dulu....

Teknik Dasar Membuat Website dengan Flash (1)

Langkahnya adalah sebagai berikut :

1. Buat desain background di Photoshop 600 x 400 pixel,

    kira-kira desainnya seperti ini (lihat tutorial photoshop) :

2. Buka Flash (saya menggunakan Flash 8)

3. Buat file baru: Create New>Flash Document

4. Pilih panel properties, ubah size menjadi 600 x 400 pixel.

5. Tekan Ctrl+R (import to stage) file yang tadi dibuat di Photoshop.

6. Ubah layer menjadi bg, tampilannya sbb :

berlanjut ya...(mau mandi dulu hehe...)