Drag and Drop dan Random Color di ActionScript 3

tutorial di bawah ini dibuat menggunakan FlashDevelop versi 4.0.0 beta 3 dengan FLEX SDK 4.5.1. Bukalah FlashDevelop dan buatlah project baru.

hasil :

cobalah untuk klik dan drag objek lingkaran di atas

kode sumber :

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;

/**
* …
* @author Afief
*/
public class Main extends MovieClip
{
private function Main():void
{
for (var i:Number = 0; i < 10; i++) {
var mc:MovieClip = new MovieClip();
mc.graphics.lineStyle(3, Math.floor(Math.random() * 16777215), .5);
mc.graphics.beginFill(Math.floor(Math.random() * 16777215));
mc.graphics.drawEllipse(0, 0, 100, 100);
mc.y = 300;
mc.x = 60 + (i * 65);
addChild(mc);
mc.addEventListener(MouseEvent.MOUSE_DOWN, mdrag);
mc.addEventListener(MouseEvent.MOUSE_UP, sdrag);
}
}
private function mdrag(e:MouseEvent):void {
setChildIndex(MovieClip(e.currentTarget), numChildren – 1);
e.target.startDrag();
}
private function sdrag(e:MouseEvent):void {
e.target.stopDrag();
}

}

}

Penjelasan :

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;

Merupakan library classes atau pustaka yang diperlukan agar program kita dapat berjalan. Tanpa pustaka ini, beberapa kode yang kita masukkan tidak dapat di baca oleh compiler.

public class Main extends MovieClip

Class yang dibuat berisi Movie Clip, ini artinya bahwa kita akan bekerja dalam movie clip.
Di dalam Class, terdapat 1 fungsi utama yang diberi nama sama dengan nama class nya sehingga akan di eksekusi pertama kali ketika class ini dijalankan.

Selanjutnya yaitu script utamanya :

for (var i:Number = 0; i < 10; i++) {
var mc:MovieClip = new MovieClip();
mc.graphics.lineStyle(3, Math.floor(Math.random() * 16777215), .5);
mc.graphics.beginFill(Math.floor(Math.random() * 16777215));
mc.graphics.drawEllipse(0, 0, 100, 100);
mc.y = 300;
mc.x = 60 + (i * 65);
addChild(mc);
mc.addEventListener(MouseEvent.MOUSE_DOWN, mdrag);
mc.addEventListener(MouseEvent.MOUSE_UP, sdrag);
}

for (var i:Number = 0; i < 10; i++) {

Berfungsi untuk proses looping, yaitu sebanyak 10 kali.

var mc:MovieClip = new MovieClip();

membuat movie clip baru yang diberi nama ‘mc’. nama variabel ini bebas, boleh nama apapun,,,

mc.graphics.lineStyle(3, Math.floor(Math.random() * 16777215), .5);

membuat garis tepi pada objek yang akan kita buat. ukuran garis tepinya yaitu 3, kemudian diberinama dengan perintah pengacakan warna. Math.floor(Math.random() * 16777215 akan menghasilkan angka acak antara 0 sampai dengan 16777214. 16777215 apabila dijadikan bilangan hexadesimal maka menjadi FFFFFF yang dalam kode warna berarti warna phentermine putih. “.5” di belakangnya merupakan ‘alpha’ atau tingkat transparasi untuk border tersebut yang berarti ‘0,5’ atau transparansinya 50%.

mc.graphics.beginFill(Math.floor(Math.random() * 16777215));

Perintah “beginFill” berfungsi untuk memberikan warna utama pada objek yang akan kita.

mc.graphics.drawEllipse(0, 0, 100, 100);

Perintah untuk membuat objek elips / lingkaran dengan panjang 100 dan lebar 100.

mc.y = 300;
mc.x = 60 + (i * 65);

menentukan letak objek yang akan kita buat. X untuk letak secara horisontal, dan Y untuk letak posisi vertikal.

addChild(mc);

meletakkan objek yang kita buat ke dalam stage.

mc.addEventListener(MouseEvent.MOUSE_DOWN, mdrag);

memberikan perintah kepada objek apabila tombol kiri mouse di tekan di atas objek. Maka fungsi mdrag akan dijalankan. Fungsi mdrag berisi 2 baris perintah


setChildIndex(MovieClip(e.currentTarget), numChildren - 1);
e.target.startDrag();

Pada baris pertama adalah perintah agar ketika salah satu lingkaran di klik, maka posisi lingkaran tersebut akan berada paling atas di atas lingkaran yang lain (tidak tertutupi oleh lingkaran yang lain). Lalu baris kedua yaitu perintah untuk mendrag lingkaran, sehingga ketika tombol kiri mouse di tekan dan digeser, lingkaran tersebut akan bergeser pula.

mc.addEventListener(MouseEvent.MOUSE_UP, sdrag);

memberikan perintah apabila tombol kiri mouse dilepas, maka akan masuk ke dalam fungsi sdrag yang berisi perintah agar lingkaran tidak lagi bergerak sesuai mouse.

tekan CTRL + Enter untuk menjalankan program yang dibuat. ?

Salam Flangers,
Afief Yona Ramadhana


Comments

Hendri says:

waw, asik… di coba bang.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.