Tutorial transisi banner

  1

Tutorial Transisi Banner

Kita akan membuat banner web memiliki efek transisi yang membuat banner

berganti-ganti gambar. Untuk menciptakan efek itu, kita akan menggunakan

Adobe Flash dan Adobe Dreamweaver. Berikut langkah kerjanya.

1. Ketahui terlebih dahulu ukuran banner yang akan kita berikan efek transisi.

Cari banner tersebut dalam folder yang menyimpan file .html.

2. Buka Adobe Flash. “Create New” dan klik pada ActionSript 2.0.

Tutorial transisi banner

  2

3. Pada “Properties”, Sesuaikan ukuran worksheet dengan ukuran banner.

Kita memakai ukuran 596 x 186 pixel. Dan klik OK.

4. Pilih beberapa gambar yang akan dipakai untuk mendukung efek transisi pada

banner. Sebagai contoh, kita memakai 3 gambar . Tempatkan gambar-gambar

tersebut dalam “Library”. Caranya, tekan “File” ⇒ “Import” ⇒ “Import to

library”.

5. Pada “Timeline”, layer 1, di frame ke-30. Klik kanan ⇒ “Insert Frame”.

Setelah di “Insert Frame”, tampilan layer 1 akan menjadi seperti berikut.

Tutorial transisi banner

  3

6. Pada layer 1, drag salah satu dari 3 gambar yang terpilih pada worksheet.

Tampilannya akan jadi seperti berikut.

7. Pada layer 1, kunci layer.

Kemudian klik kanan ⇒ “Insert Layer”. Dan akan muncul layer 2 8. Pada layer 2, klik kanan pada frame 60 kemudian “Insert Frame”.

Tampilan layer 2 akan menjadi seperti berikut.

   

Tutorial transisi banner

  4

9. Pada layer 2, klik kanan pada frame 20 ⇒ “Insert Keyframe”.

10. Pada layer 2, drag kembali salah satu gambar dari 3 gambar yang ada di

“Library”. Drag gambar diantara frame 20 sampai 60.

                         

 11. Layer 2. Klik kanan pada frame 30 ⇒ “Insert Keyframe”. Setelah itu diantara

frame 20 sampai 30, klik kanan ⇒ “Create Classic Tween”.

Tampilannya akan menjadi seperti berikut.

     

     

     

Tutorial transisi banner

  5

12. Layer 2. Klik pada layer 20, klik gambar. Pada “Properties” ⇒ “Color Effect”

⇒ “Style” dan ubah menjadi “Alpha”.

                       

Mula-mula, nilai “alpha” adalah 100%. Kita ubah menjadi 0%.

13. Kunci layer 2. Seperti pada contoh ke-7.

14. Tambahkan layer baru. Layer 3. Dan pada frame 90, klik kanan ⇒ “Insert

Frame”. Sehingga tampilan layer 3 jadi seperti berikut.

15. Layer 3. Pada frame 50, klik kanan ⇒ “Insert Keyframe”

Tutorial transisi banner

  6

16. Layer 3. Klik antara frame 50 sampai 90. Drag ditengah worksheet gambar

lain yang ada didalam “Library”.

17. Layer 3. Pada frame 60, klik kanan ⇒ “Insert Keyframe”.

Tampilan layer 3 akan jadi seperti berikut.

18. Layer 3. Diantara frame 50 sampai 60, klik kanan ⇒ “Insert Classic Tween”.

Tutorial transisi banner

  7

Tampilannya akan menjadi seperti berikut.

19. layer 3. Klik pada frame 50. Kemudian klik pada gambar yang ada di

worksheet. Dan pada “Properties” ⇒ “Color Effect” ⇒ “Style”. Ubah

menjadi Alpha. Karena pada gambar dilayer sebelumnya sudah diatur Alpha

0% maka, otomatis gambar yang ada dilayer 3 Alpha –nya menjadi 0%.

Tampilan gambarnya akan menjadi seperti berikut.

20. Kunci layer 3.

Tutorial transisi banner

  8

21. Layer 1. Buka layer (unlock layer) dengan cara klik pada bagian yang

ditandai dibawah ini.

22. Layer 1. Pada frame 60, klik kanan ⇒ “Insert Frame”. Tampilan layer 1 jadi

seperti berikut.

23. Layer 3. Tambahkan Keyframe pada frame 80 dan 90. Setelah itu, tambahkan

Classic Tween diantara frame 80 dan 90. Tampilannya akan jadi seperti

berikut.

24. Layer 3. Buka layer. Dan layer 1 pun dibuka. Tampilannya seperti betikut.

Tutorial transisi banner

  9

25. Layer 3. Klik pada frame 90, kemudian klik gambar. Dan atur Alpha menjadi

0% (lakukan seperti cara-cara yang ada dilangkah sebelumnya).

26. Layer 1. Tambahkan frame pada frame 90. Ini berfungsi untuk membuat

tampilan transisi yang berulang dari pertama.

27. Simpan file banner transisi ini. Caranya, klik “File” ⇒ “Save As”. Dan

simpan file dengan format .fla.

         

     

                   

Tutorial transisi banner

  10

 28. Agar bannernya bisa dipakai pada web, kita harus memakai file .swf. untuk

mendapatkan file .swf nya, kita harus melakukan langkah berikut seperti yang

ada pada gambar.

Ketika di “test”, akan muncul file .swf nya.

29. Buka file .html yang ada bannernya dengan Adobe Dreamweaver.

30. Setelah file .html nya dibuka, temukan file .swf nya dan drag pada bagian

banner yang telah dibuka dengan Adobe Dreamweaver. Drag pada bagian

yang diberi petunjuk.

                 

   

Tutorial transisi banner

  11

   

Tampilan akan jadi seperti berikut. Hapus banner statis (banner yang pertama

yang tanpa transisi).

31. Jika sudah dihapus, langkah berikut yang akan dikerjakan adalah

menyimpannya. “File” ⇒ “Save”.

32. Setelah perubahan disimpan, buka file .html dengan salah satu browser.