Membuat Image Gallery Menggunakan Adobe Flash

Membuat Image Gallery Menggunakan Adobe Flash

Image gallery dapat dimanfaatkan untuk menampilkan gambar-gambar yang ingin Anda pamerkan  pada website ataupun blog Anda. Tutorial ini akan membahas pembuatan image Gallery sederhana…

Image gallery dapat dimanfaatkan untuk menampilkan gambar-gambar yang ingin Anda pamerkan  pada website ataupun blog Anda. Tutorial ini akan membahas pembuatan image Gallery sederhana dengan memanfaatkan classic motion tween Pada Adobe Flash CS5.

  1. Langkah pertama, persiapkan beberapa foto ataupun gambar dengan resolusi 600 x 300 px. Kemudian buka Adobe Flash CS5 dan buat dokumen baru, pilih New > Flash File (ActionScript 3.0)
  2. Tekan ctrl + J untuk membuka panel properties. Ganti ukuran stage menjadi 600 x 300px dan ubah frame rate menjadi 30 fps.

    Document Settings

  3. Selanjutnya masukkan foto ataupun gambar yang sudah dipersiapkan File > Import > import to library. Drag and drop gambar ke stage dan ganti nama layer menjadi “image”.
  4. Gunakan Align horizontal center dan Align Vertical center sebagai alat bantu meluruskan gambar dengan stage.
  5. Klik kanan pada gambar yang sudah dimasukkan ke stage. Pilih convert to symbol atau tekan F8. Insert keyframe pada frame ke 15 dengan cara klik kanan pada frame 15 > insert keyframe ataupun dengan tekan F6.  kemudian klik kanan pada pertengahan antara frame 1 dan frame 15 dan pilih create classic tween.

    Tampilan insert keyframe dan classic motion tween

  6. Ulangi langkah 5 dengan memberikan keyframe pada frame ke 80 – 100 dan ubah menjadi classic tween.
  7. Pada frame ke 1 dan ke 100 ubah style color effect pada panel properties menjadi alpha.  Kemudian ubah skala alpha menjadi 0%.

    Tampilan Alpha

  8. Tahap berikutnya buat keyframe pada frame ke 110. Klik kanan pada gambar dan pilih duplicate symbol.
  9. Klik dua kali pada gambar dan anda akan memasuki ruang kerja tween. Selanjutnya klik swap pada panel properties. Swap dengan gambar kedua yang sudah dipersiapkan.

    Tampilan Swap

  10. Berikutnya kembali pada ruang kerja scene 1, lakukan proses yang sama pada langkah-langkah sebelumnya dengan ketentuan: pada frame ke 125 alpha 100%, pada pertengahan frame 110 dan 125 ubah menjadi classic motion tween, berikan key frame pada 185 dengan alpha 0% dan 200 dengan alpha 100%, pada pertengahan frame 185 dan 200 ubah menjadi classic motion tween. Keyframe 210 swap gambar ketiga dengan alpha 0%, keyframe 225 denga alpha 100%, pada pertengahan frame 210 dan 225 ubah menjadi classic motion tween. Keyframe 295 dengan alpha 100%, keyframe 310 dengan alpha 0 %, pada pertengahan frame 295 dan 310 ubah menjadi classic motion tween.
  11. Selanutnya buat layer baru dengan nama “teks”.  Kemudian buat persegi panjang berwarna hitam pada sisi atas stage dengan ukuran panjang 600 px dan lebar 40 px . Ubah menjadi symbol dengan convert to symbol.

    Pembuatan persegi panjang

  12. Klik dua kali pada gambar persegi panjang, dan Anda akan memasuki ruang kerja symbol. Berikan teks yang mencerminkan gambar ataupun foto Anda. jika sudah, kembali pada ruang kerja scene 1.
  13. Untuk langkah-langkah selanjutnya disarankan Anda mengunci area layer image terlebih dahulu. Kemudian frame ke 15 pada layer teks berikan keyframe dan pada pertengahan keyframe 1 dan 15 ubah menjadi classic motion tween.
  14. Pada key frame 1 layer teks ubah letak koordinat Y -50 dan alpha 0%. kemudian ubah juga ease pada panel tweening menjadi 100 out.

    Tampilan position dan tweening

  15. Berikutnya dengan proses yang sama pada langkah 12 – 14 namun dengan ketentuan sebagai berikut : pada frame ke 15 Y axis 20 alpha 100%, frame ke 85 Y axis 20 alpha 100% dan ease -100, frame 100 Y axis -50 alpha 0%, pada pertengahan keyframe 85 dan 100 ubah menjadi classic motion tween, keyframe 110 duplicate symbol kemudian ganti teks, ubah Y axis -50 alpha 0% ease 100, keyframe 125 Y axis 20 alpha 100%, pada pertengahan keyframe 110 dan 125 ubah menjadi classic motion tween. frame ke 185 Y axis 20 alpha 100% dan ease -100, frame 200 Y axis -50 alpha 0%,  keyframe 210 duplicate symbol kemudian ganti teks, ubah Y axis -50 alpha 0% ease 100, keyframe 225 Y axis 20 alpha 100%, pada pertengahan keyframe 210 dan 225 ubah menjadi classic motion tween. frame ke 285 Y axis 20 alpha 100% dan ease -100, frame 300 Y axis -50 alpha 0%.

    tampilan akhir

  16. Tahap terakhir simpan dan coba movienya (ctrl+enter). selamat mencoba

Download File

Artikel serupa versi sebelumnya pernah dipublikasikan penulis di PC Mild 23/2011

 

Tag: , , , ,

Write Comment

Your email will not be published. The marked label is required.