Subhishine Area

Flash tutorial - Membuat picture gallery sederhana

Kamis, 10 Desember 2009 07:45:20 - oleh : admin

Picture gallery adalah sekumpulan gambar yang disajikan layaknya sebuah album. Bisa dikatakan bahwa picture gallery adalah album foto digital. Salah satu cara membuat picture gallery adalah dengan menggunakan Adobe Flash. Kali ini kita akan belajar membuat picture gallery sederhana. Berikut adalah langkah-langkah pembuatannya.

Untuk melihat contoh silahkan klik DI SINI.

Sebelum melangkah ke dalam pembuatan picture gallery sebaiknya persiapkan dahulu picture yang akan digunakan. Agar lebih terorganisir, letakkan semua gambar tersebut di dalam satu folder.

Selanjutnya, kita harus mempersiapkan 2 jenis ukuran gambar (untuk thumnail dan untuk icon kecil.

1. UNTUK THUMNAIL, gambar-gambar tersebut haruslah dikecilkan ukurannya (yang paling mudah adalah menggunakan picture manager). Klik kanan gambar yang akan dikecilkan > open with picture manager > klik edit picture pada toolbar > klik resize di bagian kanan > pilih "presentage of original width x height > kecilkan presentasinya hingga ukurannya menjadi kira-kira 400px.

selanjutnya klik save > save as > beri nama "thumnail_1"

Lakukan hal yang sama untuk gambar yang lainnya. Save dengan nama "thumnail_2, thumnail_3...dst."

2. UNTUK ICON KECIL, lakukan hal yang sama dengan di atas (kecilkan ukuran gambar). Namun, kecilkan hingga ukurannya kira-kira 99px. > save as dengan nama "icon_1, icon_2,....dst"

LAYOUTING

1. buat file baru dengan ukuran 800x600px, FPS 20.

2. Ubah warna background menjadi orange, dengan klik pada area kerja > ubah warna background yang ada di properties.

3. Beri nama layer 1 "txt kelas 3" > tuliskan di layer tersebut "kelas 3 picture gallery" > letakkan di pojok kiri atas.

4. Buat layer baru (letakkan di bawah layer "txt kelas 3") > beri nama layer "left".

5. Buat kotak berwarna hijau tua (tanpa line) > letakkan di pojok kiri atas (di bawah tulisan).

6. Buat layer baru ( di bawah layer "left" ) > beri nama layer "right".

7. Buat kotak berwarna hijau muda (tanpa line) > letakkan tepat di samping kanan kotak hijau tua tadi (buat memanjang hingga ke tepi kanan.

8. Buat layer baru (di bawah layer "right") > beri nama layer "back".

9. Tuliskan "kelas 3 picture gallery" pada layer back > converet tulisan tersebut menjadi symbol (F8) > perbesar ukurannya > ubah nilai alpha menjadi 40% (di properties bawah).

MEMBUAT GAMBAR BERJALAN + TOMBOL

1. Buat layer baru (posisikan di atas layer "right") > beri nama layer "buttons"

2. Import picture (file > import > import to stage > browse picture > pilih gambar "icon_1" s.d. "icon_....." > klik OK.

3. Atur posisi gambar (jejerkan gambar dan letakkan) di luar area kerja > sesuaikan ukuran gambar dengan lebar kotak "hijau muda".

4. Klik gambar pertama > convert to symbol (F8) > pilih button > beri nama "b1".

5. Klik lagi gambar pertama tadi > lihat properties di bawah > beri nama tombol tersebut "b1" (tanpa kutip).

6. Lakukan hal yang sama pada gambar-gambar berikutnya > beri nama b2, b3, ...dst.

7. Block semua gambar yang berjejer tadi lalu klik frame 220 > insert key frame (F6) > geser semua gambar tadi (bersamaan) ke kiri (hingga gambar terakhir berada tertutupi kotak "hijau tua").

8. Klik frame 1 > klik kanan > create motion tween.

MEMBUAT PREVIEW GAMBAR

1. Buat layer baru (di atas layer "back") > beri nama layer "preview".

2. import picture (file > import > import to stage > browse picture > pilih gambar thumnail_1, thumnail_2...dst." > letakkan di tengah bawah.

3. Klik gambar "thumnail_1" yang sudah masuk ke stage tadi dan > convert to symbol (F8) pilih movie clip > beri nama "p1".

4. Klik lagi gambar tadi > lihat properties bawah > beri nama instance "p1".

5. Lakukan langkah 2-4 untuk gambar thumnail_2, thumnail_3....>beri nama p2, p3,....dst.

6. Tumpuk semua gambar tadi di tengah bawah.

SCRIPTING

1. Buat layer baru (di posisi teratas) > beri nama "action"

2. Klik frame 1 > tuliskan action script berikut:

p1._alpha=0