HariesDesign.com Untuk kali ini akan saya jelaskan bagaimana membuat animasi photo slide dengan cara menekan gambar kecil, sehingga akan ditampilkan gambar yang lebih besar. (Flash 8)

Langkah 1

Buat dokumen baru dengan dimensi 450 px X 350 px 

Langkah 2  

Buat layer dengan urutan seperti terlihat pada gambar, kali ini saya menggunakan 4 jenis gambar photo yang ditampilkan

Langkah 3 

Pada Layer Layer 1,Frame 1 pada keyboard tekan F6 untuk membuat keyframe,buat kotak dan warnai dengan warna hitam #000000, dengan menggunakan tool , sehingga akan terlihat seperti pada gambar. Kemudian masih dalam layer yang sama pada frame 60 tekan F5

Langkah 4 

Pada Layer Layer img1,pada Frame 2 tekan F6 untuk membuat keyframe,kemdian masukkan gambar besar yang pertama  dengan cara mengimport gambar File > Import > Import To Stage atau ( Ctrl+R). Kemudian convert to symbol > Movie clip,dan namai dengan img1_besar

Langkah 5 

Masih pada Layer img1, pada Frame 15 tekan F6, setelah itu kembali ke Frame 2 dan rubah menjadi motion tween, dengan Insert > Timeline  > Create Motion Tween. Pada keyframe 15 tambahkan action script

stop();

Sehingga dari

menjadi

Langkah 6 

Kembali ke Layer img1 Frame 2, klik pada gambar photo besar yang sudah dirubah menjadi type symbol movie clip, buka Properties panel pada color ubah menjadi advanced , dengan ketentuan sebagai berikut

Langkah 7

Pada Layer img2,img3,dan img4, prosesnya sama seperti pada Langkah 4,5,dan 6 , hanya yang membedakan adalah photo dan nama dari symbol masing2, yaitu menjadi img2_besar,img3_besar,dan img4_besar. Sehingga pada Timeline akan terlihat sebagai berikut

Klik untuk lebih besar

Langkah 8 

Kemudian untuk memilih photo dengan klik pada gambar photo kecil, yaitu dengan membuat photo dengan ukuran kecil berdimensi  90px x 68px, setelah susun berjajar seperti terlihat pada gambar berikut :

Agar didapat jarak yang sama dalam penyusunan, gunakan Align tools 

Langkah 9 

Klik pada photo/image kecil pertama kemudian tekan F8 ( convert to symbol), pilih mode botton. 

Langkah 10 

Klik pada photo kecil yang pertama, kemudian buka action panel, gunakan script berikut

on (release) {
gotoAndPlay(2);
}

dimana angka 2 pada script diatas menunjukkan jika gambar kecil pertama di klik maka akan tampil gambar besarnya.

Begitu juga dengan gambar kecil ke 2 diisi dengan 16,gambar kecil ke 3 diisi dengan 30, dan gambar kecil 4 diisi dengan  46

Langkah 11 

Untuk Layer Action ,Frame 1 klik pada keyframe dan tambahkan script berikut :

stop(); 

Untuk mencoba, tekan Ctrl+Enter 

Selesai 

Jika ada pertanyaan untuk Tutorial ini  klik Forum Haries Design