06
Jan

Slideshow dengan tombol

Written by admin


Kali ini kita akan membuat sebuah slideshow gambar. Gambar akan berganti secara otomatis dalam waktu yang sudah ditentukan. Gambar juga akan berganti jika anda menekan tombol 1 sampai 5 dan juga tombol next.

1. Buatlah sebuah flash document.

2. Buatlah sebuah persegi berukuran cukup besar berwarna putih dengan hitam sebagai warna garisnya. Buatlah sebuah static text bertuliskan Gambar 1. Letakkan static text ini di tengah tengah kotak yang anda buat.

movie clip gambar

3. Seleksi kotak dan static text yang dibuat dan tekan F8. Pada panel yang muncul masukkan gambar sebagai name dan movie clip sebagai type lalu tekan ok.

4. Seleksi movie clip gambar dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan gambar sebagai instance name

5. Klik kanan movie clip gambar dan pilih edit. Anda akan masuk ke dalam stage movie clip gambar.

6. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
stop();

7. Klik kanan frame 1 dan pilih copy frames. Klik kanan frame 2 dan pilih paste frame. Klik kanan frame 3 dan pilih paste frame. Klik kanan frame 4 dan pilih paste frame. Klik kanan frame 5 dan pilih paste frame.

8. Ubah tulisan Gambar 1 pada static text di frame 2 menjadi Gambar 2. Ubah tulisan Gambar 1 pada static text di frame 3 menjadi Gambar 3. Ubah tulisan Gambar 1 pada static text di frame 4 menjadi Gambar 4. Ubah tulisan Gambar 1 pada static text di frame 5 menjadi Gambar 5.

9. Tekan Ctrl+E untuk kembali ke stage scene 1. Buatlah sebuah persegi berukuran kecil berwarna putih dengan hitam sebagai warna garisnya. Seleksi persegi ini dan tekan F8.

10. Pada panel yang muncul masukkan kotak sebagai name dan movie clip sebagai type lalu tekan ok. Seleksi movie clip kotak lalu tekan Ctrl+D sebanyak 5 kali sehingga di stage muncul movie clip kotak sebanyak 6 buah.

11. Buatlah 6 buah static text masing-masing bertuliskan 1, 2, 3, 4, 5, Next.

12. Letakkan 6 buah movie clip kotak tersebut seperti gambar di bawah ini. Ubah ukuran movie clip kotak menggunakan Free Transform Tool agar sesuai dengan gambar di bawah ini.

tombol navigasi

13. Masukkan instance name pada masing-masing movie clip kotak seperti gambar di bawah ini :

instance name tombol navigasi

14. Klik frame 1 dan 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//membuat variable no dengan nilai 1
no = 1;
//membuat variable waktu dengan nilai 0
waktu = 0;
//membuat variable jumlah_frame dengan nilai 5
jumlah_frame = 5;
//membuat variable i dengan nilai 1 sampai bernilai sesuai nilai variable jumlah_frame
for (i=1; i<=jumlah_frame; i++) {
	//nilai variable id pada movie clip kotak+i sama dengan nilai pada variable i
	_root["kotak"+i].id = i;
	//ketika movie clip kotak+i ditekan
	_root["kotak"+i].onPress = function() {
		//nilai variable no sama dengan nilai variable id movie clip ini
		no = this.id;
		//ubah nilai variable waktu menjadi 0
		waktu = 0;
	};
	//ketika kursor mouse berada di atas movie clip kotak+i
	_root["kotak"+i].onRollOver = function() {
		//mainkan frame 2 movie clip ini
		this.gotoAndStop(2);
	};
	//ketika kursor mouse tidak berada di atas movie clip kotak+i
	_root["kotak"+i].onRollOut = function() {
		//jika nilai variable id movie clip ini tidak sama dengan nilai variable no
		if (this.id != no) {
			//mainkan frame 1 movie clip ini
			this.gotoAndStop(1);
		}
	};
}
//perintah yang dijalankan ketika frame pada movie clip gambar dimainkan
gambar.onEnterFrame = function() {
	//nilai variable waktu ditambah 1
	waktu++;
	//jika nilai variable waktu sama dengan 1
	if (waktu == 1) {
		//membuat variable i dengan nilai 1 sampai bernilai sesuai nilai variable jumlah_frame
		for (i=1; i<=jumlah_frame; i++) {
			//mainkan frame 1 movie clip kotak+i
			_root["kotak"+i].gotoAndStop(1);
		}
		//mainkan frame 2 movie clip kotak+no
		_root["kotak"+no].gotoAndStop(2);
		//ubah nilai transparansi movie clip ini menjadi 0
		this._alpha = 0;
	}
	//jika nilai transparansi movie clip ini kurang dari 100         
	if (this._alpha<100) {
		//nilai tranparansi movie clip ini ditambah 5
		this._alpha += 5;
	}
	//jika variable waktu bernilai 80         
	if (waktu == 80) {
		//jalankan fungsi reset
		reset();
		//ubah nilai transparansi movie clip ini menjadi 0
		this._alpha = 0;
	}
	//mainkan frame movie clip ini sesuai nilai variable no         
	this.gotoAndStop(no);
};
//ketika movie clip kotak_next ditekan
kotak_next.onPress = function() {
	//jalankan fungsi reset
	reset();
};
//ketika kursor mouse berada di atas movie clip kotak_next
kotak_next.onRollOver = function() {
	//mainkan frame 2 movie clip ini
	this.gotoAndStop(2);
};
//ketika kursor mouse tidak berada di atas movie clip kotak_next
kotak_next.onRollOut = function() {
	//mainkan frame 1 movie clip ini
	this.gotoAndStop(1);
};
//membuat fungsi bernama reset
function reset() {
	//nilai variable no ditambah 1
	no += 1;
	//jika nilai variable no lebih dari nilai variable jumlah_frame
	if (no>jumlah_frame) {
		//ubah nilai variable no menjadi 1
		no = 1;
	}
	//ubah nilai variable waktu menjadi 0         
	waktu = 0;
}

15. Tekan Ctrl+Enter untuk melihat hasilnya.

16. Anda dapat mengganti static text yang terdapat pada movie clip gambar dengan gambar yang anda inginkan.

Sourcenya dapat di download 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

36 Responses to “Slideshow dengan tombol”

  1. levi Says:

    om admin saya pengen nanya nih tenteng attachMovieClip saya baru attacMovieClip nih :respect: tolong kasih tau saya cara agar sekali pake attachMovieClip bisa munculin dua gambar sekaligus :-? soal nya saya coba gak bisa – bisa tolong ya om admin
    maaf nih kalo ngerepotin

  2. admin Says:

    Langsung contoh scriptnya ya :

    1
    2
    3
    4
    
    jumlahGambar = 2;
    for (i=1; i<=jumlahGambar; i++) {
    	_root["gambar"+i] = attachMovie("gambar", "gambar"+i, _root.getNextHighestDepth(), {_x:random(200), _y:random(200)});
    }

    Tapi sebelumnya di library ada movie clip yang diberi linkage gambar

  3. levi Says:

    :D makasih banyak nih om

  4. admin Says:

    /jempol

  5. made Says:

    bang admin yang roda bisa diputer pake mouse tu apakah dah jadi?????

  6. admin Says:

    Belum bisa.

  7. Uphie Says:

    om admin (ikut-ikutan),, mw nanya neeh…
    kan diatas tuh pas udah di paste framex, dikasi nama di static textx, tapi kok intance namex gak muncul ????

  8. admin Says:

    Static text nggak ada instance namenya.

  9. agung Says:

    klo bisa seminggu sekali ad yg baru bisa gk :D :D :D

  10. admin Says:

    Maunya sih begitu, tapi saat ini kami sedang sibuk mengerjakan game kami sehingga tidak sempat bikin tutorial yang baru :respect:

  11. Aj Says:

    mw tnya ne mas admin kenapa sering keluar error kya:

    TextField.as: Line 7: The name of this class, ‘TextField’, conflicts with the name of another class that was loaded.
    {

    tp jalan pas tes movie ,,kenapa ya??

  12. prie Says:

    mas saya baru belajar flash nie , gimana ya caranya nge-linknya.
    seandainya page per page sudah saya buat.yang aq belum tau di situnya mas..mohon bimbingannya ya mas salam kenal.

  13. admin Says:

    Maksudnya nge-link gimana ya?

  14. prie Says:

    mau bikin website ohmm… :D
    domain sudah punya tgl ngelink page yg di buat ke domain tersebut ;)

  15. admin Says:

    Kami doakan semoga lancar ;)
    Webnya temanya tentang apa ya?

  16. Arga Says:

    Kakak minta tolong donk,saya disuruh buat program ni kak,,tapi masih ada eror ni kak,,
    Simpelnya gini ak mo bikin program yang jika program itu tidak dijalankan beberapa menit maka akan kembali ke menu utama.
    Mohon bantuannya yah…
    tolong kakak ada kan scriptnya??^^ :hope: :hope:

  17. yuzev Says:

    makasih yach sebelumnya.,,,,,,!!!!!!!! =D>

    kak sya minta tolong donk.,
    gimana caranya buat sebuah cd interaktif sderhaa di flash.,,,
    tolong yach.,
    ini penting bgt.,,
    bwt tgas project work..,,,,,
    ditunggu yach.,,, :hope:

  18. gOERIks Says:

    Mas tolongin saya dunk
    saya kan buat slide gitu tapi dia ga pake tombol…
    Jika gambar diklik maka dia akan berganti dan jika tidak diklik maka akan berjalan secara otomatis… tolong ea mas…
    Perlu banget ni…

    Terimakasih

  19. Mpon Says:

    good,

  20. sandi Says:

    mas mau nnya….
    jika membuat lebih banyak gambar…
    scripnya ditambahin pa kga…?

  21. dia Says:

    punteun mas mau nanya, klo bkin aplkasi yg kyk gni gmana caranya ya? : http://www.gliffy.com/gliffy/#

    mohon bantuannya,,mungkin mas2 n mbk2 pernah membuat yg sperti itu,,terima kasih :)

  22. sinta Says:

    om Admin, mau nanya dong, bagaimana sih cara membuat tombol next dan prev untuk kumpulan foto, yang fotonya memakai efek, jadi setiap kita nge-klik tombol next dan prev, akan muncul foto/image yang telah diberi efek pada tiap foto, tolong ya om Admin.. maaf ngerepotin.. makacih.

  23. didi Says:

    mas master, saya mau nanya kalo untuk animasi menggunakan silde gambar yang pake animasi text, kira2 gmana caranya pake action script ini?? tambahin apa aja??
    maafkan saya baru belajar flash krg. :respect:

  24. tom Says:

    ternyata yang ini masih pake AS2 ya? :-/

  25. admin Says:

    Iya :)

  26. danu Says:

    mas kalau kita cuma mau pakai next sama preview aja gmn ya? jadi nggak usah ada kotak 1,2,3 dst makasih

  27. mas mas Says:

    mbah admin mo nanya action scip onRollOver funsinya buat apa ya ??
    mohon pencerahan :hope:

  28. admin Says:

    Silahkan baca tutorial ini :)
    http://warungflash.com/2009/11/on/

  29. anjas Says:

    tahnks mas brooo…..

  30. dwi Says:

    klo ditambah prev button scriptx gmn??

  31. Tej Says:

    boss, itu kotak2 kecil yg saya buat ga fungsi, neh… :-/
    Jadi cuma kayak slide show biasa… :-SS
    Kaga bisa di klik… :((
    Mohon caranya, yee… :-?

  32. rey Says:

    boss admin, bisa nggak slide show nya cuma di teken tombolnya aja, jangan slide dengan sendirinya, tolong yaaa ada tugas dari guru :-?

  33. one Says:

    ne yang di pakai flash berapa sih bang :-/

  34. betavril Says:

    om ane ijin sedot…heheh ;)

  35. Riki Says:

    Bang Slide shownya bagus, tp cara nambah Tombol Previouse , Stop ,s m refresh mcm mn ?. Mohon pencerahannnya /berkaca

  36. ramdhan Says:

    kaa gimana yah caranya biar ganti scene menggunakan tombol arah pada keyboard? bales ya ka

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.