02
Jun

Foto Thumb

Written by admin


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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
jumlah_foto = 1;
for (i=1; i<jumlah_foto+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.

7. Hasil menggunakan 4 foto :

Sourcenya dapat didownload di sini





Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash



Bookmark and Share

19 Responses to “Foto Thumb”

  1. whamvee Says:

    terima kasih sekali atas tutorialnya ini semoga bermanfaat…

  2. yin Says:

    memang tutorial yang mas bikin sangat berguna.. thanks ya mas

  3. imam Says:

    bagus coy =D> =D>

  4. nawawi Says:

    kreatif :idea:

  5. ASLI Says:

    WAH SULIT… :|/:

  6. aLL Says:

    ..Mas Admin, penggunaan kurung [] , untuk menandakan apa ya?
    thanks tutornya..

  7. made Says:

    bang admin gimana caranya membuat “download gambar” di flash?? misal = ntar ada foto yang bisa dipilih ntar ada tulisan “download gambar” ntar gambarnya bisa diambil…. /stress (maaf kalau membingungkan.. /maaf )

  8. admin Says:

    Kami kurang tahu kalau masalah download.

  9. yin Says:

    mas saya mau nanya, bagaimana ya kalau misalnya kita klik gambar lalu akan mengeluarkan bunyi. tolong mas…penting bangat ni…

  10. admin Says:

    Kalau gambarnya tombol coba tutorial Suara Pada Tombol

  11. yin Says:

    gambarnya sama seperti tutorial diatas mas, menggunakan movie clip. saya coba dulu ya mas…terima kasih mas. /semangat

  12. haris johan Says:

    keren cuy…salam sukses selalu :)

  13. admin Says:

    /thanks

  14. khun Says:

    mas admin kalo sizenya di ubah menjadi 768×675 apa bila kita klik gambarnya munculnya ke bawah.
    apakah beda scriptnya.. :-? :-/

  15. Ican Says:

    =DV keren-keren

    boleh numpang nanya nih?
    cara gede in gambar nya gimana ya??
    maksudnya kan di klik jadi gede, itu kan 300×300
    saya bikin 500×400
    jadi ngubahnya gimana ya..
    mohon pencerahannya :respect: :respect:

  16. mbozen Says:

    mas admin.. kalo pindah frame, gambarnya kok masih kelihatan padahal di timelinenya frame yang buat nampilin gambar ini udah kosong. mohon pencerahannya. plissss

  17. ajik Says:

    Wah pas banget ni yg aq cari Mas admin kalau mau menambah suara sesuai dengan gmbar gmn? misalnya jika mouse di diarahkan kegambar yg diinginkan ada backsoundx? mohon masukannya…. bisa ke email saya =DV :peace:

  18. ridwan Says:

    Mas bisa gak yah misalkan setelah salah satu gambar kita klik kan gambarnya full, terus di gambar itu di bikin ada beberapa gambar lagi pakai icon button next & prev….kalau bisa tolong di kirimin dong tutorialnya…. :hope:

    Terima Kasih Mas Admin….

  19. Amier Gheree Says:

    numpang belajar gan

Leave a Reply

B-) =DV <:-P ;)) ;) :yeye: :respect: :peace: :p :idea: :hope: :I: :D :-SS :-? :-/ :)) :) :(( 8-> more »

Komentar yang berisi pertanyaan atau request tutorial kemungkinan besar tidak bisa kami jawab dan penuhi. Hal ini dikarenakan kesibukan kami yang padat . Oleh karena itu kami mohon maaf dan pengertiannya.