22
Oct

Animasi Gelembung

Written by admin


Animasi yang akan kita buat berikut ini berupa gelembung udara yang bergerak ke atas. Apabila kita menyentuh gelembung udara tersebut dengan kursor mouse maka gelembung udara itu akan otomatis menghilang.

1. Buatlah sebuah flash document berwarna biru.

2. Buatlah sebuah lingkaran berwarna biru dengan putih sebagai warna garisnya dan buatlah juga seperempat garis lingkaran berwarna putih yang ditempatkan ditengah lingkaran tersebut seperti gambar di bawah ini :

gelembung

3. Seleksi lingkaran dan seperempat garis lingkaran tadi kemudian tekan F8. Pada panel yang muncul masukkan gelembung sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah.

4. Hapus movie clip gelembung dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gelembung dan pilih linkage.

5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan gelembung sebagai idetifier lalu tekan ok.

6. 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
42
43
44
45

//perintah yang dijalankan ketika frame ini dimainkan
onEnterFrame = function () {
	//jika nilai acak 10 bernilai 5
	if (random(10) == 5) {
		//masukkan movie clip berlinkage gelembung ke dalam stage dengan posisi x sesuai nilai acak panjang stage dan posisi y sesuai lebar stage ditambah 20
		gelembung = attachMovie("gelembung", "gelembung"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:Stage.height+20});
		//membuat variable waktu di dalam movie clip gelembung dengan nilai acak 40
		gelembung.waktu = random(40);
		//perintah yang dijalankan ketika frame di dalam movie clip gelembung dimainkan
		gelembung.onEnterFrame = function() {
			//koordinat y movie clip ini dikurangi 5
			//movie clip gelembung bergerak ke atas
			this._y -= 5;
			//variable waktu movie clip ini ditambah 1
			this.waktu++;
			//jika nilai variable waktu kurang dari 20
			if (this.waktu<20) {
				//koordinat x movie clip ini ditambah 1
				//movie clip gelembung bergerak ke kanan
				this._x++;
			}
			//jika nilai variable waktu lebih dari 20 dan jika nilai variable waktu kurang dari 40
			if (this.waktu>20 && this.waktu<40) {
				//koordinat x movie clip ini dikurangi 1
				//movie clip gelembung bergerak ke kiri
				this._x--;
			}
			//jika nilai variable waktu lebih dari 40
			if (this.waktu>40) {
				//ubah nilai variable waktu menjadi 0
				this.waktu = 0;
			}
			//jika koordinat y movie clip ini kurang dari -20
			if (this._y<-20) {
				//hapus move clip ini
				removeMovieClip(this);
			}
		};
		//ketika mouse berada di atas movie clip gelembung
		gelembung.onRollOver = function() {
			//hapus movie clip ini
			removeMovieClip(this);
		};
	}
};

7. Tekan Ctrl+Enter untuk melihat hasilnya.

Coba sentuhkan kursor mouse ke salah satu gelembung.

8. Anda dapat mengembangkan animasi gelembung di atas misalnya dengan menambahkan animasi pecah apabila gelembung disentuh oleh mouse.

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

Posted in Flash - Animasi

33 Responses to “Animasi Gelembung”

  1. virna Says:
    October 22nd, 2009 at 17:37

    kk, klo background na dibuat kyk di dalam air gimana yah??? :idea:

  2. admin Says:
    October 23rd, 2009 at 07:40

    Kalau menurut kami sih anda buat dulu pemandangan di bawah air seperti batu, rumput laut, karang, ikan lalu di depannya (depth) anda kasih persegi sesuai panjang dan lebar stage berwarna biru dengan transparansi rendah. Masukkan animasi gelembung di atas di antara pemandangan bawah air dan persegi.

  3. virna Says:
    October 23rd, 2009 at 07:49

    woke!!! 8-> 8->
    oh iya kk, klo mau kasih efek di suatu benda yg kayak terkena cahaya gimana yah?? :-/
    gimana cara mengatur perubahan warna na?? :D
    TQ.. :peace:

  4. recko Says:
    October 23rd, 2009 at 22:02

    kk’ klo buat program searching pke AS bisa g??
    tolong petunjuknya…

  5. aLL Says:
    October 26th, 2009 at 21:52

    om admin …kog link file .fla yang di download salah ya?…
    rotation.fla jadinya..bukan file gelembung,,.btw thanks buat tutornya.. :respect: :respect:

  6. admin Says:
    October 27th, 2009 at 07:44

    Sudah dibetulkan :D
    Thanks :peace:

  7. Seven Says:
    November 3rd, 2009 at 10:38

    8-> kk klw buat di taruh fb bisa kgg??

  8. em.ha.zed Says:
    December 1st, 2009 at 15:23

    Om Admin, klo membuat random tapi ditentukan areanya bisa nggak ?, contohnya ingin membuat animasi Batu kerikil yang jatuh dari suatu pipa ke dalam suatu bejana besar.
    Please your answer CC also to my mail, Thanks.

  9. admin Says:
    December 10th, 2009 at 06:54

    Diatur saja randomnya.
    Misalnya _x = random(10)+10
    Berarti kemunculannya akan berada pada koordinat x minimal 10 dan maximal 20

  10. abu miqdad Says:
    January 21st, 2010 at 11:57

    halau warung flash, saya awam dengan animasi dengan flash…
    pertanyaanya:
    1. memakai softwer apa, berbayar atau tidak?
    2. itu aja deh..
    3. kalau bisa dikirim ke email atau kalau gak
    4. disini juga boleh deh
    5. terimakasih….

  11. admin Says:
    January 22nd, 2010 at 04:56

    Umumnya animasi flash dibuat dengan menggunakan software Adobe Flash atau Macromedia Flash. Software ini berbayar tetapi anda bisa mencoba versi trialnya secara gratis.

  12. Alim Mahdi Says:
    April 12th, 2010 at 10:36

    bagus sekali, keren.
    Oh ya ada gak info hosting gratis yang bisa untuk tanam file flash/swf dan yang bisa diambil URLnya?
    Thanks

  13. teman friend Says:
    May 12th, 2010 at 10:12

    tanya nih buat game fihgter tapi yang ada musuh nya tuh gimana sama kasih darah nya

  14. gamal pratama Says:
    June 3rd, 2010 at 10:57

    om situsnya bagus banget sangat berguna sekali buat mengerjakan tugas akhir saya dikampus..situs ini adalah salah satu referensi saya..

    om saya mau tanya. apa perintah actionskriptnya supaya gelembung ini tidak berjalan di scene 2. karna saya ingin menaruhnya di scene 1 saja..

  15. andi Says:
    June 13th, 2010 at 22:33

    tutorialnya bagus, aku uda coba, berhasil ^^
    yang versi AS3 ada ga mas…??? thx before :)

  16. admin Says:
    June 15th, 2010 at 05:22

    Belum ada.

  17. aguzthin Says:
    October 21st, 2010 at 11:49

    om,,, gelembungnya kk iza bnyk???????????????
    cr’y sama tah???? :hope: :yeye: :respect:

  18. shindtha Says:
    October 21st, 2010 at 11:52

    keRen NiEch gelembunG /berkaca /thanks2 /hi

  19. aguzthin Says:
    November 6th, 2010 at 10:29

    i like it /thanks2 /thanks2 /sarjana

  20. farhan Says:
    November 24th, 2010 at 17:03

    itu gelembung spongesbob ya? :idea:

  21. dhau Says:
    March 3rd, 2011 at 09:41

    ;)) :idea:

  22. d3ny41 Says:
    May 26th, 2011 at 07:20

    wawawawa hebat

  23. oktavianiharefa Says:
    July 27th, 2011 at 21:42

    =DV krenn bget kk

  24. hari Says:
    August 14th, 2011 at 12:35

    kk mksud tutorial yng no 5 itu gmn y??
    di perjelas lagi dong…
    :-?

  25. Rizal Says:
    September 7th, 2011 at 09:15

    Keren gan :D :D =DV =DV

  26. anandastoon Says:
    October 25th, 2011 at 14:44

    Hey, bahasanya sama kaya bahasa di game maker!! Walaupun sama2 c++, tapi cara penggunaannya sangat persis!!! :D

  27. yaaan Says:
    November 13th, 2011 at 20:44

    gan klo gelembungnya dibuat warna warni gimana.. caranya…

  28. yaaan Says:
    November 13th, 2011 at 20:45

    makashi sebelumnya :peace: :D :D

  29. tata Says:
    January 28th, 2012 at 18:56

    ka, kalo misalkan gelembungnya di sentuh trus dapat nilai gimana caranya. tlong ya ka? :)

  30. dina Says:
    February 2nd, 2012 at 11:58

    /cium /jempol /thanks2 /maaf /merayu

  31. Irwan Says:
    April 13th, 2012 at 00:50

    Om admin cara agar gelembunganya tidak masuk di scene 2 gimana?
    soalnya saya bikin flash menggunakan banyak scene dan gelembung pada scene 1 masih saja ada di scene 2?.
    Tolong pencerahanya.Terima kasih sebelumnya :D

  32. Aji Says:
    July 21st, 2012 at 17:39

    Bisa untuk android nga?

  33. erwin Says:
    November 28th, 2012 at 09:10

    assalamu’alaikum
    ane erwin ka’
    mw tanya klo animasi gelembung dihentikan di frame brikutnya gimana caranya ya ka’?makasi

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.