02
Oct

Memasukkan huruf dan gambar bersamaan

Written by admin


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 :

letak-objek-huruf-dan-gambar

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.

Bagaimana mengubah blog WordPress menjadi MESIN UANG yang MEMATIKAN !! Tutorial komplit dilengkapi Software dan Script Siap Pakai

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.

library-huruf-dan-gambar1

26. Tekan Ctrl+Enter untuk melihat hasilnya.

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

19 Responses to “Memasukkan huruf dan gambar bersamaan”

  1. yin Says:

    wah…mas admin terima kasih banget deh sudah bikin tutorial ini untuk saya… waduh gembira saya mas. semoga mas dan blog success selalu ya.. :respect: :respect: :respect:

  2. johari Says:

    salud … mas, ada tutorial flash ga? cara membuat game typing. Game mengetik. Thxs

  3. yin Says:

    mas mau tanya lagi ni…bagaimana mau memasukkan suara pada huruf yang kita klik. contohnya apabila kita tekan huruf A, lalu akan keluar sebutan A. tolong ya mas…penting bangat ni mas…

  4. admin Says:

    Masukin suaranya pada tutorial diatas atau bukan?

  5. yin Says:

    ya mas, masukin suaranya pada tutorial diatas.

  6. yin Says:

    mas, tolong mas…saya enggak bisa masukin suaranya ni…sudah coba tapi gagal.. /sendiri .mas admin yang baik hati tolongin saya ya mas masukin suaranya ke dalam tutorial diatas..stress nih.. /stress

  7. admin Says:

    Itu yang ada suaranya ketika user menekan tombol huruf yang ada kotaknya atau huruf yang berada di paling atas?

  8. yin Says:

    ketika user menekan tombol huruf yang ada kotaknya mas..waduh mas..tolong ya udah bingung ni…

  9. admin Says:

    Silahkan lihat di sini : http://warungflash.com/2009/11/memasukkan-huruf-dan-gambar-bersamaan-sound/

  10. mOncol Says:

    mas cra ny buat invisible button gmn

  11. Peter Says:

    Ikut bantu om admin jawab :D

    @mOncol
    http://warungflash.com/2009/03/invisible-button/

  12. mOncol Says:

    ok thx’s om :D

  13. hety Says:

    ini pake sofware’y apa maz.. kalo boleh minta link’y sekalian…

  14. aya Says:

    aq udah nyoba tp kog huruf gambar ma suaranya g muncul y min?? pdhl langkah”nya udah sama persis… apa yg salah y? :-SS

  15. ari Says:

    mas admin jawab donnkk . :(( . saya sangat butuh update data pada flash ..
    saya membuat aplikasi bel sekolah otomatis untuk TA saya mas admin .. :respect:

  16. doni Says:

    mas admin.. mo tanya gimana carax ktika me klik gambar,, gambar yang kita tekan tuh gak muncul lg di frame selanjutnya ktika mengklik tombol prevew frame.. tolongin donk :I:

  17. dany Says:

    kang admin…gambarnya ngikut diframe sebelum dan sesudahnya….biar ga muncul lagi gimana???

  18. winda Says:

    aku bikin gagal, gambarnya gamau muncul :(
    mengapa oh mengapa :-SS

  19. Aldi Says:

    Mas ada video buat tutorial membuat intro iklan produk gak?

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.