Cara membuat galeri dengan macromedia flash / adobe flash

dalam pertemuan kali ini saya akan memberikan tutorial tentang cara membuat galeri fotodengan macromedia flah / adobe flash pasti sebelumnya sudah tahu kan apa yang di maksud dengan galeri foto itu ? dari arti singkat yang saya ketahui galeri foto merupakan sekumpulan beberapa foto yang di tampilkan dalam urutan dan letak yang teratur
dalam TA (Tugas Akhir) untuk membuat sebuah media interaktif pasti di dalamnnya terdapat sebuah galeri yang menyediakan tampilan beberapa foto dari penjelasan tema yang di ambil, dalam tutorial ini galeri foto yang saya buat data nya di load secara external untuk memudahkan dalam pembaharuan mau itu data file photo maupun data xmlnya, sayapun membuatnya cukup sederhana dan saya menggunakan Action Scrip 2.0 , mari saja kita langsung ke tahapan awalnya

seperti biasa buka terlebih dahulu aplikasi macromedia flash atau adobe flashnya dan pilih flash file (Action Scrip 2.0)
pada document propertis atur dimension dengan Width :800 dan Hight :600, farame rate 30fps
dan buatlah 4 buah layer dengan nama action - item - maskgrup dan baground dengan posisi yg beraturan
pada layer item buatlah kotak menggunakan Rrectangle tool dengan ukuran w:150 dan h:120 lalu seleksi kotak
tersebut dan convert To Symbol pilih type Movie Clip pastikan pilih titik tengah pada registration dan isikan tgurp pada instance name
kemudian klik 2x pada movie clip tgrup untuk masuk ke dalam mode edit symbol lalu seleksi kotak dan convert To Symbol pilih type Movie Clip pastikan pilih titik tengah pada registration dan isikan tgbr pada instance name
langkah selanjutnya seperti pada langkah nomor 5 setelah movie clip tgbr telah di buat lalu klik 2x movie clip tgbr tersebut untuk masuk ke dalam mode edit symbol lalu buatlah 2 buah layer dengan nama item dan tombol pada layer item seleksi kotak dan convert To Symbol pilih type Movie Clip pastikan pilih titik kiri atas pada registration dan isikan gbr pada instance name
kemudian pada layer tombol buatlah kotak dengan ukuran yang sama dengan movie clip gbr dengan w:150 dan h:120 kemudian seleksi lalu convert to symbol pilih type buttton dan isikan tbtn pada instance name, samakan posisi tombol tbtn dengan posisi movie clip gbr lalu pada color pilih alpha dan atur alpha menjadi 0%
setelah langkah di atas selesai kemudian tekan tombol Ctrl + E untuk kembali ke tampilan stage awal
masih pada layer item kemudian buatlah sebuah persegi menggunakan rectangle tool dengan ukuran w: 580 dan h: 540 lalu seleksi persegi tersebut dan convert to symbol pilih type movie clip pastikan pilih titik kiri atas pada registration dan isikan disgbr pada instance name
setelah itu buatlah sebuah persegi dengan ukuran h:38 dan w:580 kemudian seleksi persegi tersebut dan convert to symbol pilih type movie clip, isikan info pada instance name
lalu klik 2x pada movie clip info untuk masuk ke dalam mode edit symbol dan buatlah sebuah dynamic text menggunakan text tool dengan ukuran sama seperti movie clip info dan beri nama ket pada variable kemudian tekan Ctrl + E untuk kembali ke tampilan stage awal
lalu sekarang beralih ke layer mskgrup dan buatlah sebuat persegi panjang dengan ukuran w:150 dan h:550 seleksi dan convert to symbol pilih type movie Clip dan isikan mskgrup pada instance name, atur posisinya seperti gambar berikut
langkah berikutnya beralih ke layer baground dan buatlah 2 buah kotak dengan ukuran kotak 1 = w:180 h:560 kotak 2 = w:590 h:560 atur posisinya seperti gambar berikut
setelah semua langkah di atas telah selesai selanjutnya masukan action scrip pada frame layer action :
_root.tgrup.tgbr._visible = 0;
_root.tgrup.setMask(_root.mskgrup);
photo_namafile = new Array();
photo_deskripsi = new Array();
awalx = _root.tgrup._x;
awaly = _root.tgrup._x;
jarak = 20;
var besar:Number = _root.tngrup._width;
var tinggi:Number = _root.tngrup._height;
filepath = "photos/";
// Load the photos XML
var photo_xml = new XML();
photo_xml.ignoreWhite = true;
photo_xml.onLoad = function(sukses:Boolean) {
if (sukses) {
var nodes:Array = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photo_namafile.push(nodes[i].attributes.filename);
photo_deskripsi.push(nodes[i].attributes.description);
//
_root.tgrup.tgbr.duplicateMovieClip("tgbr"+i,i);
tgrup["tgbr"+i]._x = tgbr._x;
tgrup["tgbr"+i]._y = i*140;
tgrup["tgbr"+i].gbr.loadMovie(_root.filepath+_root.photo_namafile[i]);
tgrup["tgbr"+i].no = i;
tgrup["tgbr"+i].tbtn.onRelease = function() {
_root.p = this._parent.no;
_root.gbesar();
};
}
}
r = random(nodes.length);
_root.disgbr.loadMovie(filepath+photo_namafile[r]);
_root.info.ket = _root.photo_deskripsi[r];
};
this.onLoad = function() {
kex = 0;
kecy = 0;
};
function gbesar() {
_root.disgbr.loadMovie(_root.filepath+_root.photo_namafile[_root.p]);
_root.info.ket = _root.photo_deskripsi[_root.p];
}
this.onEnterFrame = function() {
_root.disgbr._width = 582.0;
_root.disgbr._height = 539.4;
for (i=0; i<_root.photo_namafile.length; i++) {
_root.tgrup["tgbr"+i].gbr._width = 150;
_root.tgrup["tgbr"+i].gbr._height = 120;
if ((_root._xmouse>awalx-75) and (_root._xmouse<awalx+75)) {

if ((_root._ymouse>300)) {
kecy = -(_root._ymouse-300)/50;
}
if (_root.tgrup.tgbr0._y<140) {

if (_root._ymouse<300) {
kecy = (300-_root._ymouse)/50;

}
}
_root.tgrup["tgbr"+i]._y += Math.round(kecy);
} else {
kecy = 0;
}
}
};
photo_xml.load(filepath+"photos.xml");
lalu save project yang telah kita buat (ctrl+S)
dan buatlah folder photos samakan letaknya dengan project fla yang anda buat
masih belum selesai sekarang kita membutuhkan file xml, buka notepad dan ketikan kode berikut :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<photos>
<photo filename="Foto-0001.jpg" description="deskripsi foto ke 1"/>
<photo filename="Foto-0002.jpg" description="deskripsi foto ke 2"/>
<photo filename="Foto-0003.jpg" description="deskripsi foto ke 3"/>
<photo filename="Foto-0004.jpg" description="deskripsi foto ke 4"/>
<photo filename="Foto-0005.jpg" description="deskripsi foto ke 5"/>
</photos>
lalu simpan file xml terebut dengan nama photos.xml pada folder photos pada teks yang berwarna biru bisa di rubah dengan nama foto yang ingin anda tampilkan
kemudian masukan 5 buah foto dengan nama Foto-0001.jpg - Foto-0002.jpg -Foto-0003.jpg , Foto-0004.jpg dan Foto-0005.jpg
di sini saya menggunakan foto lukisan dinding kaka saya kalo mau rumah anda ingin di lukis silahkan hubungi saya :D // serius loh hehe

# andapun bisa merubah nama foto sesuka anda tetapi pada file xml tersebut (yg berwana biru) harus di sesuaikan dengan nama fotonya dan anda bisa menambahkan foto hingga puluhan foto
selesai sudah galeri foto yang kita buat sekarang jalankan project yang anda buat semoga berhasil jika anda kurang paham silahkan tinggalkan pesan pada kolom komentar :)
//mungkin anda bisa membuat hasilnya jauh lebih baik itu tergantung kreatifitas dan imajinasi anda selamat untuk berkreasi
hasil tampilan selesai

sayapun sudah memodifikasi tampilan yang saya buat : silahkan di download download file galery fla - swf - fo to dan xml