galery photo with flash

Selasa, 21 Desember 2010

Hay guys... bagi kamu yang suka photo kini ada penawaran bagus, heee. Karang kita buat sebuah galery photo interaktif dengan menggunakan Flash 8. Dari pada bengong gk da kerjaan mending kamu kreasiin diri kamu lewat animasi interaktif ini. baik langsung aja buka program flash kamu trus buat sebuah layer baru dengan ukuran 400px X 300px. Nah langkah berikutnya buat sebuah kotak dengan rectangle tool dengan ukuran 320 X 240... kamu bisa mengatur ukuran kotak yang kamu buat pada propertisnya.. masih bingung juga? Lihatlah gambar 01 disamping.

Nah setelah kamu mengatur besar kotak yang kamu buat sekarang convert to simbol, jadikan kotak itu movie clip denga regristasion poin di kiri atas. Lihat gambar 02.
Nah setelah itu isi Instance Namenya dengan nama: photo. Instance Name itu berada satu tempat dengan kotak perintah sewaktu kamu membuat ukuran kotak tadi.. lebih tepatnya berda pada kotak seperti gambar 01.
tenangkan pikiranmu saat membaca artikel ini, karena jika kamu tidak tenang atau buru-buru
kamu akan kesulitan memahaminya. OK tarik nafas... he. Kita lanjut.
Setelah kamu isi Instance Namenya sekarang kamu save pekerjaan kamu. Nah setelah di save copy sebuah folder poto kamu (beri nama folder photo kamu “galeri”), paste folder tersebut ditempat kamu menyimpan file fla tadi. Misalnya tadi kamu mnyimpan file fla di my document maka copylah folder galery potomu di my document. Ingat harus satu tempat jangan sampai terpisah.
Sekarang buat sebuah layer baru beri nama action. Kemudian pada layer action tuliskan pada action script seperti berikut ini. Tolong perhatikan pada deretan script yang saya warnai. Disana ada tulisan image 1.jpg,image 2.jpg dst... itu ditulis sesuai dengan nama poto kamu.. misalnya poto kamu namanya aku.jpg maka tulislah dalam script aku.jpg, ow ya lupa ukuran foto kamu harus 320px X 240px, caranya kamu harus edit dulu ukuran fotonya denga pothoshop.
this.pathToPics = "galeri/";this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];  this.fadeSpeed = 20;
this.pIndex = 0;
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
var p = _root.photo;
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);


Nah setelah kamu selesai dengan script di atas sekarang kamu tinggal membuat tombol navigator untuk next dan prev... adapun script untuk tombol prev adalah
on (release){
_root.changePhoto(-1);
}
Sedangkan untuk next dalah
on (release){
_root.changePhoto(1);
}
Selesai sekarang kamu punya galery poto yang bagus n interaktif.... kamu bisa menambahkan variasi di galery itu sesuai yang kamu inginkan. Selamat mencoba. lihat contohnya disini

0 komentar:

Posting Komentar