Warung Flash

Kali ini kita akan mempelajari bagaimana memunculkan gambar dan huruf secara bersamaan ketika sebuah tombol ditekan.Jumlah huruf dan gambar yang digunakan dalam tutorial ini adalah 4. Apabila anda ingin menggunakan gambar dan huruf lebih dari 4 anda dapat mengubah sedikit scriptnya. Tutorial ini cocok bagi anda yang ingin membuat aplikasi untuk anak-anak seperti misalnya memperkenalkan huruf kepada anak dengan menampilkan gambar sebagai contoh penggunaan hurufnya.

1. Buatlah sebuah flash document.

2. Buatlah 2 buah static text masing-masing bertuliskan Huruf : dan Gambar :

3. Buatlah sebuah dynamic text di stage. Seleksi dynamic text tersebut dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan huruf_tampil sebagai var serta nonaktifkan tombol selectable dan show border around text.

4. Buatlah sebuah persegi berwarna putih dengan hitam sebagai warna garisnya. Buatlah sebuah garis miring dari sudut kanan atas persegi ke sudut kiri bawah persegi.

5. Seleksi persegi dan garis miring tadi kemudian tekan F8. Pada panel yang muncul masukkan gambar_tampil sebagai name dan movie clip sebagai type lalu tekan ok.

6. Seleksi movie clip gambar tampil dan pada panel propertiesnya masukkan gambar_tampil sebagai instance name.

7. Buatlah 4 buah dynamic text dengan masing-masing bertuliskan A, B, C, D. Seleksi ke empat dynamic text tadi dan pada panel propertiesnya nonaktifkan tombol selectable dan aktifkan tombol show border around text.

8. Buatlah sebuah invisible button di stage. Seleksi invisible button tersebut dan tekan Ctrl+D sebanyak 3 kali sehingga di stage terdapat 4 buah invisible button.

9. Atur letak dan ukuran ke empat invisible button sampai menutupi 4 buah dynamic text (A,B,C,D).

10. Seleksi invisible button yang menutupi dynamic text bertuliskan A kemudian pada panel propertiesnya masukkan 1_btn sebagai instance name.

11.Seleksi invisible button yang menutupi dynamic text bertuliskan B kemudian pada panel propertiesnya masukkan 2_btn sebagai instance name.

12.Seleksi invisible button yang menutupi dynamic text bertuliskan C kemudian pada panel propertiesnya masukkan 3_btn sebagai instance name.

13. Seleksi invisible button yang menutupi dynamic text bertuliskan D kemudian pada panel propertiesnya masukkan 4_btn sebagai instance name.

14. Letakkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :

15. 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

//membuat array bernama array_huruf berisi A, B, C, D
//apabila anda ingin menambahkan huruf silahkan tulis huruf yang anda ingin masukkan di antara dua tanda petik dengan koma dan spasi sebagai pemisah antara huruf
//contoh : array_huruf = ["K", "L", "M", "M", "N", "O", "P"];
array_huruf = ["A", "B", "C", "D"];
 
//memberikan tanda - pada dynamic text dengan var huruf_tampil
huruf_tampil = "-";
 
//membuat variable i dengan nilai i=1, i=2, i=3, i=4
//jika anda mengubah jumlah huruf pada array_huruf anda juga harus mengubah perulanagn i ini
//contohnya pada array_huruf terdapat 10 buah huruf maka ubah tulisan i<=4 pmenjadi i<=10
for (i=1; i<=4; i++) {
	//membuat variable no pada i+_btn dengan nilai i
	_root[i+"_btn"].no = i;
	//ketika tombol i_btn ditekan
	_root[i+"_btn"].onPress = function() {
		//tampilkan huruf yang terdapat pada array_huruf sesuai nilai no button ini dikurangi 1 pada dynamix text bervar huruf_tampil
		huruf_tampil = array_huruf[this.no-1];
		//jalankan fungsi masukkan_gambar dengan nilai angka sama dengan nilai no pada button ini
		masukkan_gambar(this.no);
	};
}
 
//membuat fungsi masukkan_gambar
function masukkan_gambar(angka) {
	//hapus movie clip berinstance name gambar di stage
	removeMovieClip(gambar);
	//memasukkan movie clip dengan instance name gambar di stage
	//movie clip yang dimasukkan adalah movie clip yang berlinkage gambar ditambah nilai variable angka, dengan nama baru gambar, pada kedalaman paling atas, dengan posisi x sama dengan posisi x gambar_tampil dan posisi y sama dengan posisi y gambar tampil
	gambar = attachMovie("gambar"+angka, "gambar", _root.getNextHighestDepth(), {_x:gambar_tampil._x, _y:gambar_tampil._y});
}

16. Klik kanan frame 2 dan pilih Insert Blank Keyframe.

17. Buatlah 4 buah persegi dengan panjang dan lebar sama dengan panjang dan lebar persegi pada movie clip gambar_tampil di frame 1.

18. Jika sudah tekan Ctrl+R. Pada panel yang muncul cari 4 buah gambar yang diinginkan kemudian tekan open.

19. Atur letak 4 buah gambar yang baru d import ke tengah tengah 4 buah persegi. 1 buah persegi mendapatkan 1 buah gambar.

20. Seleksi gambar dan persegi pertama lalu tekan F8. Pada panel yang muncul masukkan gambar1 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

21. Seleksi gambar dan persegi kedua lalu tekan F8. Pada panel yang muncul masukkan gambar2 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

22. Seleksi gambar dan persegi ketiga lalu tekan F8. Pada panel yang muncul masukkan gambar3 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

23. Seleksi gambar dan persegi keempat lalu tekan F8. Pada panel yang muncul masukkan gambar4 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

24. Klik kanan frame 2 dan pilih remove frame lalu tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gambar 1 dan pilih linkage. Pada panel yang muncul berikan tanda centang pada Export for Actionscript dan masukkan gambar1 sebagai identifier.

25. Lakukan hal yang sama pada movie clip gambar2-4. Untuk idnetifernya masukkan sesuai name movie clipnya sehingga pada panel library terdapat 4 buah movie clip yaitu gambar1-gambar4 dengan masing-masing memiliki identifier yang sama dengan namanya.

26. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini