28
Nov

Hujan + Riak

Written by admin


Sebelumnya kita pernah membuat animasi hujan. Tetapai pada animasi hujan sebelumnya tidak ada riak air ketika hujan jatuh. Oleh karena itu pada tutorial kali ini kita akan membuat sebuah animasi hujan yang disertai riak air apabila hujan tersebut menyentuh tanah.

1. Buatlah sebuah flash document.

2. Buatlah garis lingkaran berwarna hitam. Seleksi garis lingkaran ini kemudian tekan F8. Pada panel yang muncul masukkan garis_lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

3. Seleksi movie clip garis_lingkaran di stage kemudian tekan F8. Pada panel yang muncul masukkan riak sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

4. Klik kanan movie clip riak kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip riak. Ubah bentuk movie clip garis_lingkaran menjadi seperti di bawah ini :

garis-lingkaran1

5. Klik kanan frame 15 kemudian tekan F6. Ubah ukuran movie clip garis_lingkaran pada frame 15 menjadi seperti di bawah ini :

garis-lingkaran2

6. Pastikan anda masih menyeleksi movie clip garis_lingkaran di frame 15 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Alpha 0%.

7. Klik kanan frame 1 dan pilih Create Motion Tween. Seleksi frame 15 kemudian tekan F9. Pada panel actions yang muncul masukkan script berikut :

1

stop();

8. Tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip riak yang ada di stage.

9. Buatlah sebuah garis miring berwarna hitam. Seleksi garis ini kemudian tekan F8. Pada panel yang muncul masukkan garis_miring sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

10. Seleksi movie clip garis_miring di stage kemudian tekan F8. Pada panel yang muncul masukkan hujan sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

11. Klik kanan movie clip hujan kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip hujan. Ubah bentuk dan posisi movie clip garis_miring menjadi seperti di bawah ini :

garis-miring1

12. Klik kanan frame 14 kemudian tekan F6. Ubah letak movie clip garis_miring di frame 14 seperti gambar di bawah ini :

garis-miring2

13. Seleksi frame 15 kemudian tekan F7. Pastikan anda masih berada di frame 15 kemudian tekan Ctrl+L. Pada panel library yang muncul drag movie clip riak ke dalam stage dan letakkan ditengah-tengah titik registration seperti gambar di bawah ini :

riak

14. Seleksi movie clip riak di frame 15 kemudian pada panel properties masukkan riak sebagai instance name. Klik frame 15 kemudian pada panel actions masukkan script berikut :

1

stop();

15. Klik kanan frame 1 kemudian pilih Create Motion Tween. Jika sudah tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip hujan yang ada di stage.

16. Klik kanan movie clip hujan yang ada di panel library kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan hujan sebagai identifier kemudian tekan ok.

17. Klik frame 1 dan pada panel actions 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

//membuat variable waktu dengan nilai 0
waktu = 0;
//perintah yang dijalankan ketika frame ini dimainkan
onEnterFrame = function () {
	//nilai variable waktu ditambah 1
	waktu++;
	//jika nilai variable waktu sama dengan 2
	if (waktu == 2) {
		//masukkan movie clip dengan identifier hujan ke dalam stage dengan instance name hujan pada kedalaman paling atas, pada p0sisi x sesuai nilai acak 300 yang ditambah 50 dan posisi y sesuai nilai acak 300 yang ditambah 50
		hujan = attachMovie("hujan", "hujan", _root.getNextHighestDepth(), {_x:random(300)+50, _y:random(350)+50});
		//perintah yang dijalankan ketika frame pada movie clip hujan dimainkan
		hujan.onEnterFrame = function() {
			//jika movie clip ini berada di frame 10 dan movie clip riak yang terdapat di dalam movie clip ini berada di frame 15
			if (this._currentframe == 10 && this.riak._currentframe == 15) {
				//hapus movie clip ini dari stage
				this.removeMovieClip();
			}
		};
		//ubah nilai variable waktu menjadi 0
		waktu = 0;
	}
};

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

Posted in Flash - Animasi

35 Responses to “Hujan + Riak”

  1. pokehack Says:
    December 18th, 2009 at 09:19

    bingung di script nh^^

  2. admin Says:
    December 18th, 2009 at 12:20

    Sebenarnya itu cuma mengattach movie clip ke stage dengan jeda waktu.

  3. iia Says:
    January 1st, 2010 at 21:42

    :I:
    bantuin donk…. bwat flash tentang banjir

  4. admin Says:
    January 2nd, 2010 at 18:30

    Maksudnya :-/

  5. jhe Says:
    January 13th, 2010 at 12:18

    lebih detail dongpembuatan tutornya :peace:

  6. admin Says:
    January 14th, 2010 at 06:09

    Dibagian mana yang kurang jelas? :)

  7. amel Says:
    February 4th, 2010 at 10:56

    bingung bgt waktu ngasih nma movie clip di F8 nya,..
    kalo ngasih tau lagi yg jelas yach, yar para newbie ngerti sampek akarnya kayak aq,.. :-? :-?
    tapi T.O.P bgt dech..

  8. admin Says:
    February 8th, 2010 at 20:16

    Iya toh, maaf :respect: :respect: :respect:
    Kami kira sudah cukup jelas. Karena ketika anda menekan F8 akan muncul panel convert to symbol. Pada tutorial anda disuruh memasukkan nama movie clip pada name. Anda tinggal mencari tulisan namepada panel yang muncul tersebut dan memasukan nama movie clipnya pada input text sebelah tulisan name.

  9. Alim Mahdi Says:
    April 4th, 2010 at 15:55

    Luar biasa, oh ya gimana cara pasang atau menampilkan animasi flash ke Fb (facebook).

    Thanks atas petunjuknya…

  10. Tom Says:
    June 1st, 2010 at 19:45

    haduh masih salah… tar saya coba lg deh, makasih banyak petunjuknya :D

  11. nony Says:
    December 10th, 2010 at 14:23

    :hope:
    sumpah susah bngd nh…

  12. chungkring Says:
    December 28th, 2010 at 09:00

    kerennn.. =D>

  13. alin Says:
    January 9th, 2011 at 17:49

    bantuin bikin animasi buat opening company profile dong . pleasee

  14. Hilmi Says:
    January 30th, 2011 at 15:17

    makasih ya mas tutornya membantu banget :D

    thanks :respect:

  15. joko Says:
    February 5th, 2011 at 07:42

    mas, kok ada scrip’y…?
    tanpa scrip jg bisa kan? tolong saran’y? :hope:

  16. kodok Says:
    February 7th, 2011 at 13:39

    :)) thank brow

  17. sanse Says:
    March 4th, 2011 at 10:21

    keren… 8->

  18. sagas99 Says:
    March 21st, 2011 at 09:41

    mas cara bikin tutor buat di film yg banyak efeknya gimana yah???

  19. astra Says:
    April 21st, 2011 at 13:12

    /jempol /keren

  20. Kotok Says:
    April 30th, 2011 at 21:26

    Wah bagus nih blog /jempol /jempol ..jadi betah gue. /kacamata /kacamata
    And tolong pencerahanya tentang script ya kk soalnya gue jga bngung kalo asal copas aja…mohon pencerahanya!!! /?? /?? /??

  21. after glow Says:
    July 15th, 2011 at 10:29

    keren – keren tutorialnya….

  22. Rizky Says:
    August 18th, 2011 at 10:24

    Untuk step ke 13… gmana cra menepatkan movie clip riak pada titik registation….. Bingng :-/

  23. andri Says:
    August 23rd, 2011 at 17:27

    bagus gan. trus berkarya.. :I:

  24. yoga Says:
    August 29th, 2011 at 09:28

    pas tahap ini aku bingung kak tolong donk tugas dari sekolah
    “6. Pastikan anda masih menyeleksi movie clip garis_lingkaran di frame 15 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Alpha 0%.”
    Gambar itu kan bukan bentuk shape gmana sih caranya ngubah warnanya biar 0% aku dah cobak malah riak hujan nya gak mau hilang tolong bantu ya,,,

  25. Aespe Says:
    October 28th, 2011 at 13:51

    ko aku cuma bisa keluar 1 percikan doank ?? ==

    yg maksudnya “Hapus movie clip hujan yang ada di stage” di tahap ke 15 itu gmna?? apa dihapus yg di library.nya?? bingung /??

  26. admin Says:
    October 28th, 2011 at 15:16

    yang dihapus hanya yang distage saja, dilibrary tidak perlu.
    kalo hanya muncul satu percikan, kemungkinan anda belum kasih scriptnya.

  27. aan Says:
    November 2nd, 2011 at 13:02

    bang admin kok hujanku cepet banget ya turunnya?
    yang salah apanya ya? :-?

  28. admin Says:
    November 2nd, 2011 at 13:44

    fpsnya pakai berapa ya?

  29. aan Says:
    November 2nd, 2011 at 18:14

    fps?yang mana ya?
    maaf q newbie /maaf

    scriptnya sama kok dengan yang di atas. gak ada yang q ganti

  30. admin Says:
    November 2nd, 2011 at 19:11

    fps = frame per second
    coba baca tutorial ini http://warungflash.com/2009/04/stage/

  31. aan Says:
    November 2nd, 2011 at 23:02

    ow yang itu aku gak ngatur sama sekali.
    ya dah tak coba dulu
    makasih om admin /merayu

  32. unknown Says:
    November 5th, 2011 at 10:08

    =DV :peace: :peace:

  33. Syaiful Says:
    December 3rd, 2011 at 11:29

    gan gmn cara buat efek kilat n petir…
    kasi tutor’a donk…
    8->

  34. ardhan Says:
    December 15th, 2011 at 19:46

    horeeee…aku bisa…xixixi..g#girangGulung-Gulung… :)) :)) :))

    Keren banget bos admin…terima kasih ya… :respect: :respect: :respect: :respect: :respect: :respect:

  35. idris Says:
    January 9th, 2012 at 12:54

    Ummm… terpaksa saya unduh hasilnya dahulu kemudian dicocokkan letaknya.

    Pertama garis lingkaran dan terakhir riak. Lalu membuat linkage pada movie clip hujan dan riak (awalnya menggunakan actionscript 3 ternyata actionscript 2 ha.. ha.. ha.. ) .

    Satu frame yang berisi banyak animasi. Thank’s banget.

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.