Garis yang mengikuti kotak

24
Mar

Written by admin

Tutorial di bawah ini membahas tentang sebuah garis yang dapat dipanjang dan pendekkan jika kotak digerakkan.

1. Buatlah sebuah kotak kecil dengan warna merah dan bergaris biru. Seleksi kotak tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan kotak1 sebagai name dan movie clip sebagai type lalu tekan ok.

2. Seleksi movie clip kotak1 dan tekan Ctrl+F3 untuk memunculkan panel properties. Masukkan kotak1 sebagai Instance name pada panel properties.

3. Buatlah sebuah kotak kecil dengan warna kuning dan bergaris biru. Seleksi kotak tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan kotak2 sebagai name dan movie clip sebagai type lalu tekan ok.

4. Seleksi movie clip kotak1 dan tekan Ctrl+F3 untuk memunculkan panel properties. Masukkan kotak2 sebagai Instance name pada panel properties.

5. Seleksi movie clip kotak1 dan kotak2 lalu tekan F8. Pada kotak dialog yang muncul masukkan induk sebagai name dan movie clip sebagai type lalu tekan ok.

6. Seleksi movie clip induk dan tekan Ctrl+F3 untuk memunculkan panel properties. Masukkan induk sebagai Instance name pada panel properties.

7. Klik frame 1 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut :

//membuat fungsi bernama buatGaris
function buatGaris() {
	//gerakan garis ke koordinat x dan y kotak1 di dalam movie clip induk
	induk.moveTo(induk.kotak1._x, induk.kotak1._y);
	//buat garis kurva dari koordinat x dan y kotak1 sampai koordinat x dan y kotak2 di dalam movie clip induk
	induk.curveTo(induk.kotak1._x, induk.kotak1._y, induk.kotak2._x, induk.kotak2._y);
}
//ketika movie clip kotak1 atau kotak2 didalam movie clip induk ditekan
induk.kotak1.onPress = function() {
	this.onEnterFrame = function() {
		//posisi x movie clip ini sama dengan posisi x mouse induk
		this._x = induk._xmouse;
		//posisi y movie clip ini sama dengan posisi y mouse induk
		this._y = induk._ymouse;
		//menghapus garis hasil fungsi buatGaris
		induk.clear();
		//tebal garis di dalam movie clip induk adalah hairline dengan warna hitam
		induk.lineStyle(0, 0x000000);
		//jalankan fungsi buatGaris
		buatGaris();
	};
	//ketika tekanan pada movie clip ini dilepaskan dan kursor mouse berada di movie clip ini ataupun tidak
	this.onRelease = this.onReleaseOutside=function () {
		//hapus onEnterFrame movie clip ini
		delete this.onEnterFrame;
	};
};
//tebal garis di dalam movie clip induk adalah hairline dengan warna hitam
induk.lineStyle(0, 0x000000);
//jalankan fungsi buat garis
buatGaris();

8. Tekan Ctrl+Enter untuk melihat hasilnya

Drag kotak berwarna kuning untuk mengubah panjang pendek garis

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

Posted in Flash - Menengah

8 Responses to “Garis yang mengikuti kotak”

chan Says:
March 24th, 2009 at 10:56
Wah iya bener.
Terimakasih banyak mas
rizaal Says:
April 16th, 2009 at 12:38
trus, gimna buat garisnya melengkung, jadi gk lurus …………
david Says:
April 20th, 2009 at 23:03
mas aq mau tnya…!!
lo mau kasih halus pada tween pada mouse over itu gNn ya…???
supaya lebih halus saat kembalinya..
tolong di bantu yaaaa….
Yudi Says:
June 26th, 2009 at 19:42
Boleh minta diajarin mas.
Saya mo bikin kotak kuning tersebut menjadi dua, dengan posisi yang berlawanan.
Sedangkan kotak merah adalah titik tengah antara dua kotak kuning.
Sehingga.., ketika kotak kuning kita mainkan kotak kuning satunya ikut bergerak berlawanan arah (sudut dua kotak kuning tersebut 180 derajat).
Misal ketika kotak kuning1 berada di atas, maka kotak kuning2 berada di bawah, kotak kuning1 ke kanan, kotak kuning2 ke kiri.
Boleh bagi-bagi ilmunya ya?
Please….
admin Says:
June 27th, 2009 at 17:27
Maksudnya dimainkan itu ketika keyboard ditekan atau bagaimana?
Yudi Says:
June 29th, 2009 at 11:34
Sama dengan tutorial disini mas,

Ketika kotak kuning1 mendapat event onPress dari mouse, maka dengan sendirinya kotak kuning2 akan bergeser dengan arah yang berlawanan dengan kotak kuning1.
admin Says:
June 30th, 2009 at 08:47
Dapat di lihat di sini : http://warungflash.com/2009/06/garis-yang-mengikuti-kotak-2/
ama Says:
March 24th, 2011 at 09:23
mas, mau nanya,,
saya punya kasus kyk gni, sya pengen bkin aplikasi pemetaan perangkat2 kerja di dalam ruangan sperti komputer, printer dll.
dimana perangkat2 itu bisa dipindah2 posisinya(drag n drop gtu), trus bisa di save dan sewaktu-waktu bisa di buka kembali (untuk di edit misalnya)..kira2 klo pake flash gimana ya mas?..

mohon bantuannya mas,,terima kasih sebelumnya..:D

Warung Flash

Pages