Gambar diperbesar saat mouse diatasnya

Baca Juga

Pada tutorial ini kita akan membuat sebuah foto dimana apabila mouse berada di atas foto tersebut, maka fotonya akan sedikit membesar. Apabila foto tersebut diklik maka foto tersebut akan fullscreen. Apabila diklik lagi maka ukuran foto akan kembali seperti semula. Tutorial di bawah ini hanya menggunakan 1 buah
foto. Anda dapat menambahkan foto sesuai keinginan anda dengan merubah jumlah_foto pada actionscript dan memberikan instance name yang berbeda setiap fotonya (foto1, foto2, foto3, foto4, dst)



1. Buatlah sebuah flash document berukuran 300×300.

2. Buatlah sebuah buah gambar/import 1 buah foto ke stage. Ubah ukurannya menjadi kecil

3. Seleksi gambar/foto tersebut dan tekan F8. Pada panel yang muncul masukkan foto1 sebagai name.

4. Seleksi movie clip foto1 di stage lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan foto1 sebagai instance name.

5. Klik frame 1 dan tekan F9. pada panel actions yang muncul masukkan script berikut :




jumlah_foto = 1;

for (i=1; i
_root["foto"+i].kondisi = "none";
_root["foto"+i].panjang = _root["foto"+i]._width;
_root["foto"+i].lebar = _root["foto"+i]._height;
_root["foto"+i].posX = _root["foto"+i]._x;
_root["foto"+i].posY = _root["foto"+i]._y;
_root["foto"+i].onRollOver = function() {
if (this.kondisi == "none") {
this._xscale *= 2;
this._yscale *= 2;
this.kondisi = "zoom";
this.swapDepths(1);
}
};
_root["foto"+i].onRollOut = function() {
if (this.kondisi == "zoom") {
this._xscale /= 2;
this._yscale /= 2;
this.kondisi = "none";
}
};
_root["foto"+i].onRelease = function() {
if (this.kondisi == "zoom") {
this.kondisi = "full";
this._width = Stage.width;
this._height = Stage.height;
this._x = Stage.height/2;
this._y = Stage.width/2;
}
};
_root["foto"+i].onPress = function() {
if (this.kondisi == "full") {
this._width = this.panjang;
this._height = this.lebar;
this._x = this.posX;
this._y = this.posY;
this.kondisi = "none";
}
};
}

6. Tekan Ctrl+Enter untuk melihat hasilnya.