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

44 Responses to “Hujan + Riak”

  1. pokehack Says:

    bingung di script nh^^

  2. admin Says:

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

  3. iia Says:

    :I:
    bantuin donk…. bwat flash tentang banjir

  4. admin Says:

    Maksudnya :-/

  5. jhe Says:

    lebih detail dongpembuatan tutornya :peace:

  6. admin Says:

    Dibagian mana yang kurang jelas? :)

  7. amel Says:

    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:

    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:

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

    Thanks atas petunjuknya…

  10. Tom Says:

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

  11. nony Says:

    :hope:
    sumpah susah bngd nh…

  12. chungkring Says:

    kerennn.. =D>

  13. alin Says:

    bantuin bikin animasi buat opening company profile dong . pleasee

  14. Hilmi Says:

    makasih ya mas tutornya membantu banget :D

    thanks :respect:

  15. joko Says:

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

  16. kodok Says:

    :)) thank brow

  17. sanse Says:

    keren… 8->

  18. sagas99 Says:

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

  19. astra Says:

    /jempol /keren

  20. Kotok Says:

    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:

    keren – keren tutorialnya….

  22. Rizky Says:

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

  23. andri Says:

    bagus gan. trus berkarya.. :I:

  24. yoga Says:

    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:

    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:

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

  27. aan Says:

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

  28. admin Says:

    fpsnya pakai berapa ya?

  29. aan Says:

    fps?yang mana ya?
    maaf q newbie /maaf

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

  30. admin Says:

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

  31. aan Says:

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

  32. unknown Says:

    =DV :peace: :peace:

  33. Syaiful Says:

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

  34. ardhan Says:

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

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

  35. idris Says:

    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.

  36. HENKY Says:

    _mas, aq mu tnya, gimana caranya ubah file swf ke gambar gerak format (GIF),. tolong di bantu ya,. :hope:

  37. anzdree Says:

    haddeh :-SS

    susahnya minta ampun ,, guru ku yg ngajar aja ampe gak bisa

  38. Lathifah nur aeni Says:

    keren-keren tutorial.a 8->

  39. dhira Says:

    like…..sangat sempurna web anda =DV

  40. pedetkool Says:

    lingkaran bisa di doubel ga? trus bisa di beri warna? 8->

  41. fatma Says:

    :I: =DV

  42. anam Says:

    wah bgus nih bwt ..tmbah wawasan..thank gan

  43. jojo Says:

    waduh kurang jelas kka :respect:

  44. jojo Says:

    masih newbi guaa – :D :((

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.