membuat grafik sederhana dengan Flash (disatuin aja)

Beberapa hari yang lalu, saya bertemu dengan teman yang mengikuti kuliah di semester pendek, yaitu kuliah grafika komputer. grafika komputer menuntut kita untuk dapat membuat grafik menggunakan bahasa pemrograman yang kita kuasai…

karena itu, sebagai dasar, saya sudah membuat grid sederhana menggunakan aplikasi Flash (yang saya gunakan Flash 8), menggunakan beberapa baris actionscript saja

grid sederhana x,y

ini actionscript-nya..

// ambil dimensi stage
dh = Stage.height;
dw = Stage.width;
// panjang grid dalam pixel
grid = 30;
// tentukan x1,y1,x2,y2
inputx1 = 1;
inputy1 = 1;
inputx2 = -8;
inputy2 = 5;
// buat movie clip
isi_mc = createEmptyMovieClip(“isi_mc”, 0);
isi_mc.lineStyle(2.5);
isi_mc.moveTo(0, 0);
isi_mc.lineTo(dw, 0);
isi_mc.lineTo(dw, dh);
isi_mc.lineTo(0, dh);
isi_mc.lineTo(0, 0);
// buat garis cartesian x dan y
isi_mc.lineStyle(2, 0xaaaaaa);
isi_mc.moveTo(dw/2, 0);
isi_mc.lineTo(dw/2, dh);
isi_mc.moveTo(0, dh/2);
isi_mc.lineTo(dw, dh/2);
// buat grid setiap angka pixel grid yang telah ditentukan
isi_mc.lineStyle(1, 0xdddddd);
// grid x ke kanan
for (ax=1; grid*ax<dw/2; ax++) {
isi_mc.moveTo(dw/2+grid*ax, 0);
isi_mc.lineTo(dw/2+grid*ax, dh);
}
// grid x ke kiri
for (ax=1; grid*ax<dw/2; ax++) {
isi_mc.moveTo(dw/2-grid*ax, 0);
isi_mc.lineTo(dw/2-grid*ax, dh);
}
// grid y ke atas
for (ay=1; grid*ay<dh/2; ay++) {
isi_mc.moveTo(0, dh/2+grid*ay);
isi_mc.lineTo(dw, dh/2+grid*ay);
}
// grid y ke bawah
for (ay=1; grid*ay<dh/2; ay++) {
isi_mc.moveTo(0, dh/2-grid*ay);
isi_mc.lineTo(dw, dh/2-grid*ay);
}
// buat garis dari koordinat x1,y1 ke x2,y2
isi_mc.lineStyle(2, 0×000000);
isi_mc.moveTo((dw/2)+(grid*inputx1), (dh/2)-(grid*inputy1));
isi_mc.lineTo((dw/2)+(grid*inputx2), (dh/2)-(grid*inputy2));

grid ditambah dengan grid-resolution

grid ini sebenarnya masih sama dengan posting sebelumnya, tapi ini dilengkapi dengan grid-resolution (atau apalah namanya, ini hanya istilah saya saja). perbedaannya dapat dilihat ada garis tipis yang ikut membentuk grid.

actionscript-nya

// ambil dimensi stage
dh = Stage.height;
dw = Stage.width;
// panjang grid dalam pixel
grid = 10;
// resolusi grid
res = 3;
// tentukan x1,y1,x2,y2
inputx1 = 1;
inputy1 = 1;
inputx2 = -3;
inputy2 = 5;
// buat movie clip
isi_mc = createEmptyMovieClip(“isi_mc”, 0);
isi_mc.lineStyle(2.5);
isi_mc.moveTo(0, 0);
isi_mc.lineTo(dw, 0);
isi_mc.lineTo(dw, dh);
isi_mc.lineTo(0, dh);
isi_mc.lineTo(0, 0);
// jika resolusi < 1 maka grid tipis tidak perlu dibuat
if (res>1) {
// buat grid tipis setiap angka pixel grid yang telah ditentukan
isi_mc.lineStyle(1, 0xeeeeee);
// grid x ke kanan dan kiri
for (ax=1; grid*ax<dw/2; ax++) {
isi_mc.moveTo(dw/2+grid*ax, 0);
isi_mc.lineTo(dw/2+grid*ax, dh);
isi_mc.moveTo(dw/2-grid*ax, 0);
isi_mc.lineTo(dw/2-grid*ax, dh);
}
// grid y ke atas dan ke bawah
for (ay=1; grid*ay<dh/2; ay++) {
isi_mc.moveTo(0, dh/2+grid*ay);
isi_mc.lineTo(dw, dh/2+grid*ay);
isi_mc.moveTo(0, dh/2-grid*ay);
isi_mc.lineTo(dw, dh/2-grid*ay);
}
}
// buat grid tebal resolution dari res yang telah ditentukan
isi_mc.lineStyle(1.5, 0xdddddd);
// grid x ke kanan dan kiri
for (ax=res; grid*ax<dw/2; ax += res) {
isi_mc.moveTo(dw/2+grid*ax, 0);
isi_mc.lineTo(dw/2+grid*ax, dh);
isi_mc.moveTo(dw/2-grid*ax, 0);
isi_mc.lineTo(dw/2-grid*ax, dh);
}
// grid y ke atas dan ke bawan
for (ay=res; grid*ay<dh/2; ay += res) {
isi_mc.moveTo(0, dh/2+grid*ay);
isi_mc.lineTo(dw, dh/2+grid*ay);
isi_mc.moveTo(0, dh/2-grid*ay);
isi_mc.lineTo(dw, dh/2-grid*ay);
}
// buat garis cartesian x dan y
isi_mc.lineStyle(2, 0xaaaaaa);
isi_mc.moveTo(dw/2, 0);
isi_mc.lineTo(dw/2, dh);
isi_mc.moveTo(0, dh/2);
isi_mc.lineTo(dw, dh/2);
// buat garis dari koordinat x1,y1 ke x2,y2
isi_mc.lineStyle(2, 0×000000);
isi_mc.moveTo((dw/2)+(grid*inputx1)*res, (dh/2)-(grid*inputy1)*res);
isi_mc.lineTo((dw/2)+(grid*inputx2)*res, (dh/2)-(grid*inputy2)*res);

melengkapi grafik bagian2, ini ditambahkan dengan teks pada garis pandu x,y

ini actionscript-nya

// ambil dimensi stage
dh = Stage.height;
dw = Stage.width;
// panjang grid dalam pixel
grid = 10;
// resolusi grid
res = 3;
// tentukan x1,y1,x2,y2
inputx1 = 1;
inputy1 = 1;
inputx2 = -3;
inputy2 = 5;
// buat movie clip
isi_mc = createEmptyMovieClip(“isi_mc”, 0);
isi_mc.lineStyle(2.5);
isi_mc.moveTo(0, 0);
isi_mc.lineTo(dw, 0);
isi_mc.lineTo(dw, dh);
isi_mc.lineTo(0, dh);
isi_mc.lineTo(0, 0);
// jika resolusi < 1 maka grid tipis tidak perlu dibuat
if (res>1) {
// buat grid tipis setiap angka pixel grid yang telah ditentukan
isi_mc.lineStyle(1, 0xeeeeee);
// grid x ke kanan dan kiri
for (ax=1; grid*ax<dw/2; ax++) {
isi_mc.moveTo(dw/2+grid*ax, 0);
isi_mc.lineTo(dw/2+grid*ax, dh);
isi_mc.moveTo(dw/2-grid*ax, 0);
isi_mc.lineTo(dw/2-grid*ax, dh);
}
// grid y ke atas
for (ay=1; grid*ay<dh/2; ay++) {
isi_mc.moveTo(0, dh/2+grid*ay);
isi_mc.lineTo(dw, dh/2+grid*ay);
isi_mc.moveTo(0, dh/2-grid*ay);
isi_mc.lineTo(dw, dh/2-grid*ay);
}
}
// buat grid tabel resolution dari res yang telah ditentukan
// dan (eksperimental) buat teks big success
isi_mc.lineStyle(1.5, 0xdddddd);
// grid x ke kanan dan kiri
for (ax=res; grid*ax<dw/2; ax += res) {
isi_mc.moveTo(dw/2+grid*ax, 0);
isi_mc.lineTo(dw/2+grid*ax, dh);
var mov_txt = createTextField(“text_txt”, this.getNextHighestDepth(), (dw/2+grid*ax)-5, dh/2, 20, 20);
mov_txt.text = ax/res;
isi_mc.moveTo(dw/2-grid*ax, 0);
isi_mc.lineTo(dw/2-grid*ax, dh);
var mov_txt = createTextField(“text_txt”, this.getNextHighestDepth(), (dw/2-grid*ax)-5, dh/2, 20, 20);
mov_txt.text = -(ax/res);
}
// grid y ke atas
for (ay=res; grid*ay<dh/2; ay += res) {
isi_mc.moveTo(0, dh/2+grid*ay);
isi_mc.lineTo(dw, dh/2+grid*ay);
var mov_txt = createTextField(“text_txt”, this.getNextHighestDepth(), dw/2, (dh/2-grid*ay)-7, 20, 20);
mov_txt.text = ay/res;
isi_mc.moveTo(0, dh/2-grid*ay);
isi_mc.lineTo(dw, dh/2-grid*ay);
var mov_txt = createTextField(“text_txt”, this.getNextHighestDepth(), dw/2, (dh/2+grid*ay)-7, 20, 20);
mov_txt.text = -(ay/res);
}
// buat garis cartesian x dan y
isi_mc.lineStyle(2, 0xaaaaaa);
isi_mc.moveTo(dw/2, 0);
isi_mc.lineTo(dw/2, dh);
isi_mc.moveTo(0, dh/2);
isi_mc.lineTo(dw, dh/2);
// buat garis dari koordinat x1,y1 ke x2,y2
isi_mc.lineStyle(2, 0×000000);
isi_mc.moveTo((dw/2)+(grid*inputx1)*res, (dh/2)-(grid*inputy1)*res);
isi_mc.lineTo((dw/2)+(grid*inputx2)*res, (dh/2)-(grid*inputy2)*res);