Kelas baru PHP dan MySQL (periode agustus 2008)

Dibuka kelas baru PHP dan MySQL periode agustus dengan materi sebagai berikut:

  • Intro PHP 5 (fitur PHP 5, cara instalasi)
  • Sekilas XHTML dan CSS untuk design halaman
  • Tipe data, Variabel, Operator (scope variable, global dan local variable)
  • Pernyataan Kontrol (if, switch, while, for)
  • Menggunakan Fungsi (buitin function, user function)
  • Session dan Cookies
  • Intro MySQL dan penggunaan PHPMyAdmin
  • Integrasi MySQL dan PHP (koneksi, manipulasi data, CRUD)
  • Penggunaan Template (manual, smarty template)
  • Studi Kasus: Membangun E-Commerce dengan PHP dan MySQL

Lama Training: 24 jam (jadwal diatur sesuai dengan permintaan peserta dan kesediaan trainer)

Pendaftaran: email ke actualtraining@gmail.com atau telp 08156881169

Kapasitas Peserta: 6 orang

Peserta yang sudah mendaftar saat ini sebanyak 2 orang

kelas akan segera dimulai jika jumlah peserta sudah memenuhi

Menggunakan Cross-Page Post

Secara default ketika anda menekan tombol maka secara otomatis halaman akan dipostback atau di kirim ke server kemudian dikembalikan kehalaman itu lagi. Jika anda menginginkan agar setelah menekan tombol maka dikirimkan ke halaman lain maka anda harus mendefinisikan property PostBackUrl property.

Buat halaman dengan nama CrossPage.aspx

<form id="form1" runat="server">
    <div>
    <asp:Label id="lblSearch" Text="Search:" Runat="server" />
    <asp:TextBox id="txtSearch" Runat="server" />
    <asp:Button id="btnSearch" Text="Go!" PostBackUrl="CrossPage2.aspx" Runat="server" />
    </div>
</form>

 

Kemudian buat halaman baru lagi dengan nama CrossPage2.aspx

<form id="form1" runat="server">
    <div>
    <asp:Label id="lblSearch" Runat="server" />
    </div>
</form>

Untuk mengambil nilai dari server control yang ada di halaman sebelumnya tulis kode berikut

protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.PreviousPage != null) {
            TextBox txtSearch = (TextBox)PreviousPage.FindControl("txtSearch");
            lblSearch.Text = "Search For : " + txtSearch.Text;
        }
    }

untuk kode dari source diatas dapat di download disini

Mengambil Nilai dari GridView

Jika anda ingin mengambil nilai dari GridView pada saat anda mengklik link select, caranya adalah sebagai berikut:

image

cara untuk mengambil nilai pada gridview ketika anda menekan select adalah melalui event Row_Command

Protected Sub gvBuku_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvBuku.RowCommand
       If e.CommandName = "Select" Then
           Dim intIndex As Integer = CInt(e.CommandArgument)
           Dim row As GridViewRow = gvBuku.Rows(intIndex)
           'mengambil nilai cell ketiga karena index dimulai dari Nol 
           lblKeterangan.Text = String.Empty
           lblKeterangan.Text &= "Kode Buku : " & row.Cells(2).Text & "<br/>" & _
           "Judul Buku : " & row.Cells(3).Text & "<br/>" & _
           "Tahun Terbit : " & row.Cells(4).Text & "<br/>" & _
           "Pengarang : " & row.Cells(5).Text & "<br/>" & _
           "Penerbit : " & row.Cells(6).Text
       End If
   End Sub

intIndex digunakan untuk mendapatkan index dari row yang anda click

untuk contoh program diatas dapat di download pada link

semoga membantu :)

Membuat Paint App dengan C# dan GDI+ (Part 1)

Sesudah anda membaca tutorial saya yang sebelumnya tentang pemrograman GDI+ dengan C# Part 1 dan 2 maka pada kesempatan ini saya akan melanjutkannya dengan membuat sebuah contoh yang simple agar penerapan GDI+ menjadi lebih mudah untuk dimengerti

Pada tutorial kali ini saya akan mengajak anda untuk mencoba beberapa fitur yang ditawarkan oleh library GDI+ dan C# untuk membuat sebuah aplikasi pengolah citra yang sederhana (mirip aplikasi paint). Aplikasi ini juga saya gunakan sebagai tugas untuk mahasiswa yang mengambil matakuliah komputer grafis.

Untuk membuat aplikasi ini pertama-tama anda harus membuat design form sebagai berikut:

image 

kemudian deklarasikan beberapa variabel yang akan digunakan pada aplikasi ini

private Bitmap bitmap = null;
private Bitmap curBitmap = null;
private bool dragMode = false;
private bool boolFill = false;
private int drawIndex = 1;
private int curX, curY, x, y;
private int diffX, diffY;
private Graphics curGraphics;
public Pen curPen;
private SolidBrush curBrush;
private Size fullSize;

private Color borderColor = Color.Black;
private Color fillColor = Color.White;

private Image currImage = null;
private string currFilename = "";

pada saat form di load buat object Bitmap dan Graphic sebagai berikut,

private void Form1_Load(object sender, EventArgs e)
{
    //cek ukuran display monitor
    fullSize = SystemInformation.PrimaryMonitorMaximizedWindowSize;
    //buat object bitmap baru
    bitmap = new Bitmap(fullSize.Width,fullSize.Height);
    //buat object graphic baru
    curGraphics = Graphics.FromImage(bitmap);
    curPen = new Pen(Color.Black);
    curBrush = new SolidBrush(Color.Black);
}

pada saat event MouseDown pada form simpan titik (x,y)

private void Form1_MouseDown(object sender, MouseEventArgs e)
{
    curX = e.X;
    curY = e.Y;
    dragMode = true;
}

pada saat event MouseMove, hitung height dan width dari titik awak ke titik akhir

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    x = e.X;
    y = e.Y;
    //hitung beda antara titik awal dan akhir(pada saat move)
    diffX = e.X - curX;
    diffY = e.Y - curY;

    if (dragMode)
    {
        this.Refresh();
    }
}

Pada saat event MouseUp gambar dulu objectnya (rectangle, pen, atau, ellipse). Penggambaran object ini bukan di form melainkan pada object Graphic yang akan digunakan sebagai background agar setelah digambar object gambar yang lama tidak hilang.

private void Form1_MouseUp(object sender, MouseEventArgs e)
{
    diffX = x - curX;
    diffY = y - curY;

    switch (drawIndex)
    {
        case 1:
            //gambar garis
            curGraphics.DrawLine(curPen, curX, curY, x, y);
            break;
        case 2:
            //gambar ellipse
                curGraphics.DrawEllipse(curPen, curX, curY, diffX, diffY);
            break;
        case 3:
            //gambar kotak
                curGraphics.DrawRectangle(curPen, curX, curY, diffX, diffY);
            break;
    }

    RefreshFormBackground();
    dragMode = false;
}

Pada event Paint di form gambar objecnya

private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;
   
    if (currImage != null)
    {
        g.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        curGraphics.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        RefreshFormBackground();
        currImage = null;
    }

    if (dragMode)
    {
        switch (drawIndex)
        {
            case 1:
                //gambar garis
                g.DrawLine(curPen, curX, curY, x, y);
                break;
            case 2:
                //gambar ellipse
                    g.DrawEllipse(curPen, curX, curY, diffX, diffY);
                break;
            case 3:
                //gambar kotak
                    g.DrawRectangle(curPen, curX, curY, diffX, diffY);
                break;
        }
    }
}

method RefreshFormBackground() digunakan untuk menjadikan object curGraphic sebagai background form

private void RefreshFormBackground()
{
    curBitmap = bitmap.Clone(new Rectangle(0, 0, this.Width, this.Height), bitmap.PixelFormat);
    this.BackgroundImage = curBitmap;
}

setelah itu coba anda jalankan programnya dan mencoba menggambar object line atau rectangle sebagai berikut

image

untuk menambahkan pewarnaan fiil, border, open, dan save file akan dibahas di artikel selanjutnya, selamat mencoba

have fun guys.. coding is fun :)

Pemrograman GDI+ dengan C# (Part 2)

Graphic Class Method

Draw Method

Digunakan untuk menggambar garis, rectangle, dan ellipse

Drawing Lines

Method DrawLine digunakan untuk menggambar garis yang menghubungkan dua titik.

 

Contoh2_4 Menggambar Garis

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            Pen redPen = new Pen(Color.Red, 1);
            Pen bluePen = new Pen(Color.Blue, 2);
            Pen greenPen = new Pen(Color.Green, 3);
            Pen blackPen = new Pen(Color.Black, 4);
            // Draw line using float coordinates
            float x1 = 20.0F, y1 = 20.0F;
            float x2 = 200.0F, y2 = 20.0F;
            g.DrawLine(redPen, x1, y1, x2, y2);
            // Draw line using Point structure
            Point pt1 = new Point(20, 20);
            Point pt2 = new Point(20, 200);
            g.DrawLine(greenPen, pt1, pt2);
            // Draw line using PointF structure
            PointF ptf1 = new PointF(20.0F, 20.0F);
            PointF ptf2 = new PointF(200.0F, 200.0F);
            g.DrawLine(bluePen, ptf1, ptf2);
            // Draw line using integer coordinates
            int X1 = 60, Y1 = 40, X2 = 250, Y2 = 100;
            g.DrawLine(blackPen, X1, Y1, X2, Y2);
            // Dispose of objects
            redPen.Dispose();
            bluePen.Dispose();
            greenPen.Dispose();
            blackPen.Dispose();
        }

Contoh2_5 Menggambar Garis yang Terhubung

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            Pen redPen = new Pen(Color.Red, 1);
            PointF[] ptsArray ={
                new PointF( 20.0F, 20.0F),
                new PointF( 20.0F, 200.0F),
                new PointF(200.0F, 200.0F),
                new PointF(20.0F, 20.0F)};
            g.DrawLines(redPen, ptsArray);
        }

Drawing Rectangle

Bentuk dasar selanjutnya adalah rectangle. Jika anda ingin menggambar rectangle maka yang harus diperhatikan adalah titik awal / starting point, width, dan height-nya.

Contoh2_6 Menggambar Rectangle

 

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create pens and points
            Pen redPen = new Pen(Color.Red, 1);
            Pen bluePen = new Pen(Color.Blue, 2);
            Pen greenPen = new Pen(Color.Green, 3);
            float x = 5.0F, y = 5.0F;
            float width = 100.0F;
            float height = 200.0F;
            // Create a rectangle
            Rectangle rect = new Rectangle(20, 20, 80, 40);
            // Draw rectangles
            g.DrawRectangle(bluePen,
              x, y, width, height);
            g.DrawRectangle(redPen,
              60, 80, 140, 50);
            g.DrawRectangle(greenPen, rect);
            // Dispose of objects
            redPen.Dispose();
            bluePen.Dispose();
            greenPen.Dispose();
        }

Contoh 2_7 Menggambar Rectangle Berurutan / Series Mode

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            Pen greenPen = new Pen(Color.Green, 4);
            RectangleF[] rectArray =
            {
                new RectangleF( 5.0F, 5.0F, 100.0F, 200.0F),
                new RectangleF(20.0F, 20.0F, 80.0F, 40.0F),
                new RectangleF(60.0F, 80.0F, 140.0F, 50.0F)
            };
            g.DrawRectangles(greenPen, rectArray);
            greenPen.Dispose();
        } 

Drawing Ellipses dan Circle

Bentuk ellipses adalah bentuk circular didalam bentuk rectangle. Bentuk ellipses mempunyai titik tengah / center point.

image

Contoh2_8 Menggambar Ellipses

 

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create pens
            Pen redPen = new Pen(Color.Red, 6);
            Pen bluePen = new Pen(Color.Blue, 4);
            Pen greenPen = new Pen(Color.Green, 2);
            // Create a rectangle
            Rectangle rect =
              new Rectangle(80, 80, 50, 50);
            // Draw ellipses
            g.DrawEllipse(greenPen,
              100.0F, 100.0F, 10.0F, 10.0F);
            g.DrawEllipse(redPen, rect);
            g.DrawEllipse(bluePen, 60, 60, 90, 90);
            g.DrawEllipse(greenPen,
              40.0F, 40.0F, 130.0F, 130.0F);
            // Dispose of objects
            redPen.Dispose();
            greenPen.Dispose();
            bluePen.Dispose();
        }

Drawing Text

Digunakan untuk menggambar text string dalam graphic surfaces

Contoh2_9 Menggambar String

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create brushes
            SolidBrush blueBrush = new SolidBrush(Color.Blue);
            SolidBrush redBrush = new SolidBrush(Color.Red);
            SolidBrush greenBrush = new SolidBrush(Color.Green);
            // Create a rectangle
            Rectangle rect = new Rectangle(20, 20, 200, 100);
            // The text to be drawn
            String drawString = "Hello GDI+ World!";
            // Create a Font object
            Font drawFont = new Font("Verdana", 14);
            float x = 100.0F;
            float y = 100.0F;
            // String format
            StringFormat drawFormat = new StringFormat();
            // Set string format flag to direction vertical,
            // which draws text vertically
            drawFormat.FormatFlags =
              StringFormatFlags.DirectionVertical;
            // Draw string
            
            g.DrawString("Drawing text",
              new Font("Tahoma", 14), greenBrush, rect);
            g.DrawString(drawString,
              new Font("Arial", 12), redBrush, 120, 140);
            g.DrawString(drawString, drawFont,
              blueBrush, x, y, drawFormat);
            // Dispose of objects
            blueBrush.Dispose();
            redBrush.Dispose();
            greenBrush.Dispose();
            drawFont.Dispose();
        }

Drawing Arc

Arc adalah bagian dari ellipse, yang dibentuk dari area rectangle, start angle, dan sweep angle. Cara penggunaan Arc adalah sebagai berikut:

Contoh2_11 Menggambar Arc

Buat design form sebagai berikut:

image

Buat variabel awal untuk deklarasi awal start dan sweep angle

private void Form1_Paint(object sender, PaintEventArgs e)
    {
        Graphics g = e.Graphics;
        Pen redPen = new Pen(Color.Red, 3);
        Rectangle rect = new Rectangle(20, 20, 200, 200);
        g.DrawArc(redPen, rect, startAngle, sweepAngle);
        redPen.Dispose();
    }
    private void btnReset_Click(object sender, EventArgs e)
    {
        startAngle =(float)Convert.ToDouble(txtStart.Text);
        sweepAngle =(float)Convert.ToDouble(txtSweep.Text);
        Invalidate();
    }

Drawing Curves

Curve terdiri dari dua macam yaitu open dan close curve

image

Contoh2_12 Drawing Curves

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create a pen
            Pen bluePen = new Pen(Color.Blue, 1);
            // Create an array of points
            PointF pt1 = new PointF(40.0F, 50.0F);
            PointF pt2 = new PointF(50.0F, 75.0F);
            PointF pt3 = new PointF(100.0F, 115.0F);
            PointF pt4 = new PointF(200.0F, 180.0F);
            PointF pt5 = new PointF(200.0F, 90.0F);
            PointF[] ptsArray =
            {
                pt1, pt2, pt3, pt4, pt5
            };
            // Draw curve
            g.DrawCurve(bluePen, ptsArray);
            // Dispose of object
            bluePen.Dispose();
        }

Contoh2_13 Drawing Curves dengan Tension

private float tension = 0.5F;

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create a pen
            Pen bluePen = new Pen(Color.Blue, 1);
            // Create an array of points
            PointF pt1 = new PointF(40.0F, 50.0F);
            PointF pt2 = new PointF(50.0F, 75.0F);
            PointF pt3 = new PointF(100.0F, 115.0F);
            PointF pt4 = new PointF(200.0F, 180.0F);
            PointF pt5 = new PointF(200.0F, 90.0F);
            PointF[] ptsArray =
            {
                pt1, pt2, pt3, pt4, pt5
            };
            // Draw curve
            g.DrawCurve(bluePen, ptsArray,tension);
            // Dispose of object
            bluePen.Dispose();
        }

        private void btnApply_Click(object sender, EventArgs e)
        {
            tension = (float)Convert.ToDouble(txtTension.Text);
            Invalidate();
        }

Contoh2_14 Drawing Closed Curve

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create a pen
            Pen bluePen = new Pen(Color.Blue, 1);
            // Create an array of points
            PointF pt1 = new PointF(40.0F, 50.0F);
            PointF pt2 = new PointF(50.0F, 75.0F);
            PointF pt3 = new PointF(100.0F, 115.0F);
            PointF pt4 = new PointF(200.0F, 180.0F);
            PointF pt5 = new PointF(200.0F, 90.0F);
            PointF[] ptsArray =
            {
                pt1, pt2, pt3, pt4, pt5
            };
            // Draw curve
            g.DrawClosedCurve(bluePen, ptsArray);
            // Dispose of object
            bluePen.Dispose();
        }

Drawing Polygon

Polygon adalah bentuk yang terdiri dari tiga atau lebih garis, misal: segitiga, dan kotak.

Contoh2_15 Drawing Polygon

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create pens
            Pen greenPen = new Pen(Color.Green, 2);
            Pen redPen = new Pen(Color.Red, 2);
            // Create points for polygon
            PointF p1 = new PointF(40.0F, 50.0F);
            PointF p2 = new PointF(60.0F, 70.0F);
            PointF p3 = new PointF(80.0F, 34.0F);
            PointF p4 = new PointF(120.0F, 180.0F);
            PointF p5 = new PointF(200.0F, 150.0F);
            PointF[] ptsArray =
            {
                p1, p2, p3, p4, p5
            };
            // Draw polygon
            g.DrawPolygon(greenPen, ptsArray);
            // Dispose of objects
            greenPen.Dispose();
            redPen.Dispose();
        }

Drawing Graphic Path

Graphic Path menghubungkan beberapa objek drawing seperti line, rectable, circle, dll.

Contoh2_16 Drawing Graphic Path

using System.Drawing;
using System.Drawing.Drawing2D;

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            // Create a pen
            Pen greenPen = new Pen(Color.Green, 1);
            // Create a graphics path
            GraphicsPath path = new GraphicsPath();
            // Add a line to the path
            path.AddLine(20, 20, 103, 80);
            // Add an ellipse to the path
            path.AddEllipse(100, 50, 100, 100);
            // Add three more lines
            path.AddLine(195, 80, 300, 80);
            path.AddLine(200, 100, 300, 100);
            path.AddLine(195, 120, 300, 120);
            // Create a rectangle and call
            // AddRectangle
            Rectangle rect =
              new Rectangle(50, 150, 300, 50);
            path.AddRectangle(rect);
            // Draw path
            g.DrawPath(greenPen, path);
            // Dispose of object
            greenPen.Dispose();
        }

Drawing Pie Shapes

image

Contoh2_17 Drawing Pie Chart

image

private void btnDraw_Click(object sender, EventArgs e)
        {
            // Create a Graphics object
            Graphics g = this.CreateGraphics();
            g.Clear(this.BackColor);
            // Get the current value of start and sweep
            // angles
            float startAngle =
              (float)Convert.ToDouble(textBox1.Text);
            float sweepAngle =
              (float)Convert.ToDouble(textBox2.Text);
            // Create a pen
            Pen bluePen = new Pen(Color.Blue, 1);
            // Draw pie
            g.DrawPie(bluePen, 20, 20, 100, 100,
              startAngle, sweepAngle);
            // Dispose of objects
            bluePen.Dispose();
            g.Dispose();
        }

 

bersambung Part 3…..

Pemrograman GDI+ dengan C# (Part 1)

Apa itu GDI+?

GDI+ adalah library pada .NET yang digunakan untuk membuat aplikasi grafis berbasis Windows dan Web yang dapat berinteraksi dengan perangkat grafis berupa printer atau monitor.

Graphical User Interface (GUI) berinteraksi dengan perangkat hardware seperti monitor, printer, atau scanner untuk menampilkan format yang dapat dibaca oleh manusia, tetapi tidak ada program yang dapat mengakses perangkat hardware tersebut secara langsung, maka dibuat user interface agar pengguna dapat berinteraksi dengan perangkat-perangkat tersebut.

Untuk membuat user interface tersebut harus digunakan third component sebagai jembatan antara program dan perangkat keras, maka dibuatlah komponen GDI+ library, dengan komponen tersebut anda dapat menampilkan output berupa text dan gambar ke perangkat hardware.

Pada aplikasi .NET anda dapat menggunakan GDI+ untuk membuat aplikasi grafis baik untuk aplikasi berbasi windows maupun aplikasi web. Library GDI+ sudah tersinstall secara default pada sistem operasi Windows XP, Vista, dan Windows 2003 yang berlokasi di class library dengan nama Gdiplus.dll. Gdiplus.dll.

image

 

Apa saja fitur GDI+?

Fitur GDI+ dapat kategorikan dalam 3 fungsi utama yaitu:

  • 2D vector graphic
  • Imaging
  • Typograhy

 

2D Vector Graphics Programming

Vector Graphic merupakan komponen pembentuk bentuk gambar mis (kotak, lingkaran) yang dibentuk dari kumpulan titik pada sistem koordinat.

Pada .NET Framework library 2D vector graphic programming dibagi menjadi dua kategori yaitu general dan advanced. General 2D vector graphic didefinisikan dalam library System.Drawing namespace dan advance function didefinisikan dalam library System.Drawing.Drawing2D namespace.

 

Imaging

Imaging digunakan untuk memanipulasi image. Image file yang dapat dimanipulasi misalnya .bmp, .jpg, .gif, dan .png. Fungsi-fungsi untuk memanipulasi images ada dalam Image class yang digunakan untuk create, save, dan load images.

 

Typography

Typography digunakan untuk mendesign dan merepresentasikan text. GDI+ menyediakan class untuk membuat dan menggunakan font.

 

GDI+ Namespaces dan Class dalam .NET

image

Area Drawing

Setiap aplikasi drawing paling tidak terdiri dari tiga komponen yaitu canvas, brush, pen, dan process

  • Canvas: adalah area dimana object akan digambar, misal pada aplikasi Windows, Windows Form adalah canvasnya.
  • Brush atau Pen merepresentasikan tekstur, warna, dan ukuran dari objek yang akan digambar pada canvas.
  • Process mendifinisikan bagaimana object tersebut akan digambar kedalam canvas.

Setiap area drawing memiliki empat property utama yaitu: weight, height, resolution dan color depth.

  • Width dan height property digunakan untuk medeskripsikan ukuran area drawing secara vertikal dan horizontal
  • Resolution adalah satuan untuk mengukur output quality dari graphic object atau images dalam satuan dot per inch (dpi). Sebagai contoh resolusi 72 dpi berarti 1 inch dari area tersebut terdiri dari 72 horizontal dan 72 vertical pixel. Untuk monitor resolusi 1280×1024 berarti pada area monitor tersebut terdiri dari 1280 horizontal pixel dan 1024 vertical pixel.
  • Color depth adalah jumlah warna yang digunakan untuk merepresentasikan setiap pixel.

Definisi dari pixel adalah: elemen terkecil pada proses drawing untuk menampilkan graphic object atau images pada layar. Pixel density sering direpresentasikan dengan nilai dpi (dot per inch).

Struktur color pada GDI+ mempunyai empat komponen warna yaitu: alpha, red, green, dan blue. Red green blue (RGB) komponen mewakili kombinasi warna yang akan muncul. Setiap komponen dalam RGB mempunyai 256 (28) color combination, sehingga kombinasi tiga komponen RGB tersebut mempunyai kemungkinan warna 256x256x256. Alpha komponen mewakili aspek transparan dari warna, yang akan terlihat ketika beberapa warna digabungkan.

image

Seperti yang terlihat pada gambar diatas, area drawing paling tidak harus mensupport 24-bit color system (8-bit untuk setiap R, G, dan B komponen).

 

Sistem Koordinat

Memahami sistem koordinat sangat penting untuk pemrograman graphic, sistem koordinat merepresentasikan letak graphic objet pada perangkat tampilan seperti monitor dan printer.

Sistem Koordinat Kartesian

Ini adalah koordinat umum yang anda pelajari pada pelajaran matematika dasar, terdiri dari sumbu x dan y

image

Posisi sitem koordinat kartesian dibagi menjadi beberapa kuadran:

  • Kuadran I: x > 0 dan y > 0
  • Kuadran II: x < 0 dan y > 0
  • Kuadran III: x < 0 dan y < 0
  • Kuadran IV: x > 0 dan y < 0

Sistem Koordinat Standar GDI+

Tidak seperti sistem kartesian, pada perangkat tampilan seperti monitor sumbu (0,0) terletak pada pojok kiri atas.

image

 

Aplikasi Pertama menggunakan GDI+

Sekarang saatnya anda untuk mencoba membuat aplikasi menggunakan library GDI+ menggunakan .NET Framework.

1. Pertama buat aplikasi windows form baru pada visual studio, beri nama projectnya contoh2_1

2. Untuk menggunakan GDI+ maka anda harus menambahkan referensi library kedalam program

using System.Drawing;
using System.Drawing.Drawing2D;

3. Untuk menggambar di form anda dapat menambahkan kode dalam method OnPaint.

private void Form1_Paint(object sender, PaintEventArgs e)
{
   //membuat instan class / objek dari class graphic
   Graphics g = e.Graphics;
} 

4. Untuk menambahkan object Pen, Brush, serta Drawing Shape kedalam form tambahkan kode sebagai berikut

private void Form1_Paint(object sender, PaintEventArgs e)
{
            //membuat instan class / objek dari class graphic
            Graphics g = e.Graphics;
            //set smothing mode pada area drawing
            g.SmoothingMode = SmoothingMode.AntiAlias;
            //membuat kotak dengan width 100 dan height 100
            Rectangle rect = new Rectangle(20, 20, 100, 100);
            //membuat objek pen berwarna merah
            Pen redPen = new Pen(Color.Red, 3);
            Pen blackPen = Pens.Black;
            //membuat objek solid brush
            SolidBrush greenBrush = new SolidBrush(Color.Green);
            
            //menggambar shape dan line
            g.DrawRectangle(redPen, rect);
            g.FillEllipse(greenBrush, rect);
            g.DrawLine(blackPen, 0, 250, this.Width, 250);
            g.FillEllipse(Brushes.Blue, 70, 220, 30, 30);
            g.FillEllipse(Brushes.SkyBlue, 100, 210, 40, 40);
            g.FillEllipse(Brushes.Green, 140, 200, 50, 50);
            g.FillEllipse(Brushes.Yellow, 190, 190, 60, 60);
            g.FillEllipse(Brushes.Violet, 250, 180, 70, 70);
            g.FillEllipse(Brushes.Red, 320, 170, 80, 80);
}

5.Jalankan program dengan menekan tombol F5 untuk melihat hasilnya.

 

Menggunakan Struktur Point dan PointF

Pada GDI+ point digunakan untuk mendefinisikan koordinat titik dua dimensi yang direpresentasikan sebagai matrix (x dan y koordinat) . ada tiga macam konstruktor yang dapat digunakan untuk membuat object point yaitu:

Point pt1 = new Point(10);
Point pt2 = new Point( new Size(20, 20) );
Point pt3 = new Point(30, 30);

Struktur PointF hampir sama dengan Point hanya saja nilai sumbu x dan y-nya tidak berupa integer melainkan floating point.

PointF pt3 = new PointF(30.0f, 30.0f);

Contoh 2_2 Penggunaan Struktur Point

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;

            //membuat object point
            Point pt = new Point(50, 50);
            //membuat object point kosong
            Point newPoint = Point.Empty;
            newPoint.X = 100;
            newPoint.Y = 200;

            Pen pn = new Pen(Color.Blue, 4);
           
            //menggambar garis dari titik pt ke newPoint
            g.DrawLine(pn, pt, newPoint);

            pn.Dispose();
            g.Dispose();
        }

Menggunakan Struktur Rectangle

Struktur rectangle digunakan untuk membuat object rectangle di GDI+

Contoh2_3 Penggunaan Struktur Rectangle

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            // Create a Graphics object
            Graphics g = this.CreateGraphics();
            int x = 40;
            int y = 40;
            int height = 120;
            int width = 120;
            // Create a Point object
            Point pt = new Point(80, 80);
            // Create a Size object
            Size sz = new Size(100, 100);
            // Create a rectangle from Point and Size
            Rectangle rect1 = new Rectangle(pt, sz);
            // Create a rectangle from integers
            Rectangle rect2 =
                new Rectangle(x, y, width, height);
            // Create a rectangle from direct integers
            Rectangle rect3 =
                new Rectangle(10, 10, 180, 180);
            // Create pens and brushes
            Pen redPen = new Pen(Color.Red, 2);
            SolidBrush greenBrush =
                new SolidBrush(Color.Blue);
            SolidBrush blueBrush =
                new SolidBrush(Color.Green);
            // Draw and fill rectangles
            g.DrawRectangle(redPen, rect3);
            g.FillRectangle(blueBrush, rect2);
            g.FillRectangle(greenBrush, rect1);
            // Dispose of the objects
            redPen.Dispose();
            blueBrush.Dispose();
            greenBrush.Dispose();
            g.Dispose();
        }

 

bersambung Part 2…

Ming Library dengan PHP (Part2)

ditulis oleh mahasiswa saya : Erwin (TI UKDW 03)

Mengisi Obyek Dengan Ming

Ming menyediakan tiga cara untuk melakukan pengisian obyek, yaitu pengisian obyek dengan warna, mengisi obyek dengan gradient, dan mengisi obyek dengan gambar. Kelas SWFShape() menyediakan dua fungsi untuk mengisi obyek yaitu fungsi setLeftFill() dan fungsi setRightFill(). Untuk menggunakan keduanya, perlu menggunakan SWFFill() sebagai argument. SWFFill() dapat dipanggil dengan menggunakan fungsi addFill() yang merupakan bagian dari SWFShape(). Fungsi addFill() ini mempunyai argument warna RGB. Fungsi setRigthFill() digunakan jika ingin mengisi searah dengan jarum jam, sedangkan fungsi setLeftFill() digunakan untuk mengisi berlawanan dengan arah jarum jam.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru dan mengisi obyek
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: $fill = $square->addFill(0, 255, 0);
  10: $square->setRightFill($fill);
  11: // Menggambar kotak
  12: $square->movePenTo(40, 20);
  13: $square->drawLineTo(140, 20);
  14: $square->drawLineTo(140, 120);
  15: $square->drawLineTo(40, 120);
  16: $square->drawLineTo(40, 20);
  17: // Menambahkan shape ke movie
  18: $myMovie->add($square);
  19: // Menampilkan movie
  20: header('Content-type:application/x-shockwave-flash');
  21: $myMovie->output();
  22: ?> 

clip_image002

Cara kedua yang dapat digunakan untuk mengisi obyek adalah dengan menggunakan kelas SWFGradient(). Kelas ini dapat digunakan untuk mengisi obyek dengan efek gradasi dari dua warna atau gradient. Untuk menambah warna yang akan digunakan untuk gradasi dapat dengan menggunakan fungsi addEntry(). Fungsi ini memiliki lima argument, pertama adalah ratio yang berisikan antara 0.0 dan 1.0. Ratio ini digunakan untuk menentukan seberapa banyak warna yang ditampilkan dalam satu sisi. Argument berikutnya adalah warna RGB. Untuk argument kelima bersifat opsional, yaitu chanel alpha dari warna.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Membuat gradient fill
  10: $gradient = new SWFGradient();
  11: $gradient->addEntry(0.0, 255, 0, 0);
  12: $gradient->addEntry(0.5, 255, 255, 255);
  13: // Menambah fill ke shape
  14: $fill=$square->addFill($gradient, SWFFILL_RADIAL_GRADIENT);
  15: $square->setRightFill($fill);
  16: // Menggambar kotak persegi
  17: $square->movePenTo(40, 20);
  18: $square->drawLineTo(340, 20);
  19: $square->drawLineTo(340, 220);
  20: $square->drawLineTo(40, 220);
  21: $square->drawLineTo(40, 20);
  22: // Menambahkan shapes ke movie
  23: $myMovie->add($square);
  24: // Menampilkan movie
  25: header('Content-type:application/x-shockwave-flash');
  26: $myMovie->output();
  27: ?>

clip_image002[4]

Pengisian obyek yang terakhir adalah dengan gambar. Gambar dengan format .jpg dan Define Bit Lossless (*.dbl) yang dapat dibuat dari file gambar dengan format Graphic Interchange Format (*.gif) dan Portable Network Graphic (*.png), dapat digunakan untuk mengisi obyek. Developer Ming menyediakan perangkat lunak png2dbl yang terdapat di alamat http://www.opaque.net/ming/ming-winutils.zip. Perangkat lunak ini dapat mengkonversi *.gif ke format *.dbl. Gambar perlu dipanggil ke buffer menggunakan fungsi yang disediakan PHP. Fungsi tersebut adalah fopen() dan fread(). Berikut ini adalah contoh penggunaanya:

$fp = fopen(“somefile.jpg”, “rb”);

$data = fread($fp, filesize(“somefile.jpg”));

Setelah itu data perlu dipindahkan dari buffer ke kelas SWFBitmap(). Kelas SWFBitmap() adalah kelas untuk mengisi obyek dengan gambar.

$bitmap = SWFBitmap($data);

Kelas SWFBitmap() memiliki fungsi addFill() yang digunakan untuk mengisikan data ke dalam obyek. Dalam penggunaanya memerlukan salah satu dari dua flag dibawah ini:

· SWFFILL_CLIPPED_BITMAP. Flag ini digunakan untuk memasukkan gambar ke obyek sesuai dengan ukuran gambar tersebut.

· SWFFILL_TILED_BITMAP. Flag ini digunakan untuk menyesuaikan gambar sesuai dengan ukuran dari obyek.

Berikut ini adalah contoh script untuk mengisi sebuah obyek dengan gambar yang diambil dari suatu folder dan akan menghasilkan tampilan seperti pada gambar

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Membuka gambar and membaca data ke buffer
  10: $fp = fopen("dog.jpg", "rb");
  11: $data = fread($fp, filesize("dog.jpg"));
  12: // Membuat gambar bitmap baru
  13: $bitmap = new SWFBitmap($data);
  14: // mengisikannya ke shape
  15: $fill = $square->addFill($bitmap, SWFFILL_TILED_BITMAP);
  16: $square->setRightFill($fill);
  17: // Menggambar square
  18: $square->movePenTo(40, 20);
  19: $square->drawLineTo(340, 20);
  20: $square->drawLineTo(340, 220);
  21: $square->drawLineTo(40, 220);
  22: $square->drawLineTo(40, 20);
  23: // Menambah shapes ke movie
  24: $myMovie->add($square);
  25: // Menampilkan movie
  26: header('Content-type:application/x-shockwave-flash');
  27: $myMovie->output();
  28: ?>
  29:  

clip_image002[6]

Penggunaan Text Dan Font Dengan Ming

Ming menyediakan kelas SWFFont() yang berguna untuk menambahkan bentuk teks pada file movie Flash yang dibuat.

$font = new SWFFont( '_sans' );

Font yang digunakan dapat berasal dari web browser atau font yang disimpan dalam sebuah folder. Untuk font yang disimpan dalam sebuah folder memerlukan format Font Definition Block (*.fdb). Font ini adalah font yang dapat dibuat dengan mengkonversi font dengan format True Type File (*.ttf). Ming tidak dapat mengkonversikan font tersebut secara langsung secara langsung. Sehingga memerlukan sebuah perangkat lunak tambahan untuk mengkonversinya. Perangkat lunak tersebut adalah ttf2fdb yang salah satunya bisa didapat dari alamat situs http://www.amarasoftware.com/downloaddemo/makefdb.zip. Setelah membuat obyek font baru, diperlukan tempat untuk menampung font tersebut. Sehingga diperlukan kelas SWFText() atau SWFTextField().

$text = new SWFTextField();

Kemudian font dipindahkan ke dalam area teks dengan menggunakan fungsi dari kelas SWFTextField() yaitu setFont().

$text->setFont( $font );

Kelas SWFTextField() atau SWFText() memiliki dua fungsi yang digunakan untuk mengatur teks. Pertama adalah setColor() yang memiliki tiga argument warna RGB, kedua adalah setHeight() untuk mengatur tinggi atau besarnya teks, fungsi ini mempunyai satu argument yaitu tinggi teks dalam pixel. Untuk menambahkan string yang akan dimuat, dapat dengan menggunakan fungsi addString() yang diisi dengan argument string dalam tanda kutip.

   1: <?php
   2: $font = new SWFFont( '_sans' );
   3: $text = new SWFTextField();
   4: //Memuat font ke dalam teks area
   5: $text->setFont( $font );
   6: $text->setColor( 0, 0, 0 );
   7: $text->setHeight( 400 );
   8: //Menambahkan string 'Hello World'
   9: $text->addString( 'Hello World' );
  10: //Membuat movie baru
  11: $myMovie = new SWFMovie();
  12: $myMovie->setDimension( 2500, 800 );
  13: //Menambahkan teks ke dalam movie
  14: $myMovie->add( $text );
  15: //Menampilkan Movie
  16: header( 'Content-type: application/x-shockwave-flash' );
  17: $m->output( );
  18: ?>

clip_image002[8]

Menambahkan Animasi Pada Movie Flash

Pada dasarnya obyek bentuk geometri yang ditambahkan ke movie hanya ditampilkan saja dan tidak dianimasikan.

$movie->add($shape);

Untuk menambahkan animasi pada Flash dengan menggunakan Ming, memerlukan manipulasi dari penambahan obyek dengan fungsi add() yang merupakan fungsi dari kelas SWFMovie().

$shapeHandle = $movie->add($shape);

Manipulasi ini mengakibatkan pengembalian obyek SWFDisplayItem() untuk menganimasikan obyek bentuk geometri ke dalam movie Flash. Hal ini sama artinya dengan mempunyai obyek SWFDisplayItem() baru. Kelas SWFDisplayItem() mempunyai fungsi yang dapat digunakan untuk menggerakan obyek, yang pertama adalah fungsi move() yang memiliki dua argument, yaitu koordinat x dan koordinat y, yang kedua adalah fungsi moveTo() yang memiliki argument sama dengan move(). Selain itu dapat juga membuat obyek berputar dengan menggunakan fungsi rotate() yang hanya memiliki satu argument, yaitu derajat perputaran obyek yang diinginkan.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Menggambar kotak
  10: $square->movePenTo(1, 1);
  11: $square->drawLineTo(61, 1);
  12: $square->drawLineTo(61, 61);
  13: $square->drawLineTo(1, 61);
  14: $square->drawLineTo(1, 1);
  15: // Menambahkan shapes ke dalam movie
  16: $squareHandle = $myMovie->add($square);
  17: // Menggerakan shape
  18: $squareHandle->moveTo(30, 100);
  19: // Memutar shape 45 derajat
  20: $squareHandle->rotate(45);
  21:  
  22: // Tampilan dari movie
  23: header('Content-type:application/x-shockwave-flash');
  24: $myMovie->output();
  25: ?> 

clip_image002[10]

Agar pergerakannya kelihatan, maka perlu untuk melakukan perubahan pada obyek secara bertahap pada tiap frame. Untuk menggeser ke frame berikutnya dapat dengan menggunakan fungsi nextFrame() yang merupakan fungsi dari kelas SWFMovie(). Ming juga dapat melakukan animasi morphing. Animasi ini mengubah bentuk sebuah obyek ke bentuk lain. Kelas yang digunakan adalah SWFMorph() yang memiliki dua fungsi, yaitu getShape1() dan getShape2(). Keduanya tidak memiliki argument.

$morph = new SWFMorph();

$shape1 = $morph->getShape1();

$shape2 = $morph->getShape2();

Contoh penggunaanya adalah sebagai berikut:

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(5);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat obyek morph baru
   7: $morph = new SWFMorph();
   8: // Membuat shape baru and mengatur line style
   9: $square = new SWFShape();
  10: $rectangle = new SWFShape();
  11: $square = $morph->getShape1();
  12: $square->setLine(5, 0, 0, 0, 255);
  13: $rectangle = $morph->getShape2();
  14: $rectangle->setLine(5, 0, 0, 0, 255);
  15: // Menggambar kotak persegi
  16: $square->movePenTo(1, 1);
  17: $square->drawLineTo(61, 1);
  18: $square->drawLineTo(61, 61);
  19: $square->drawLineTo(1, 61);
  20: $square->drawLineTo(1, 1);
  21: // Menggambar persegi panjang
  22: $rectangle->movePenTo(1, 1);
  23: $rectangle->drawLineTo(161, 1);
  24: $rectangle->drawLineTo(161, 61);
  25: $rectangle->drawLineTo(1, 61);
  26: $rectangle->drawLineTo(1, 1);
  27: $morphHandle = $myMovie->add($morph);
  28: $morphHandle->moveTo(100, 100);
  29: //Melakukan animasi secara bertahap
  30: for($i = 0.0; $i < 1.0; $i += 0.1)
  31: {
  32: $morphHandle->setRatio($i);
  33: $myMovie->nextFrame();
  34: }
  35: // Tampilan movie
  36: header('Content-type:application/x-shockwave-flash');
  37: $myMovie->output();
  38: ?>

Masih banyak lagi animasi yang dapat dilakukan oleh Ming Library, seperti skew, scale, dan lain sebagainya. Selain itu Ming Library juga mendukung action script. Untuk lebih jelasnya dapat dilihat pada http://phpbuilder.com/manual/en/book.ming.php

Link Ming Library:

Basic:

· http://jerryscript.hostrocket.com/php/ming/lessons/

Contoh:

· http://www.gazbming.com/

· http://redhot.pepper.jp/ming_php/

Ming untuk desain:

· http://www.thatmingthing.com/

Ming pada bahasa pemrograman lain:

· http://kumamushi.org/~k/ming/examples/examples.html à pada Ruby

· http://todbot.com/ming/ à Perl

Reference:

· Php manual.

· Rutledge, Matt, 2004, “PHP Game Programing” cetakan pertama, Premier.

Ming Library dengan PHP (Part1)

ditulis oleh mahasiswa saya : Erwin (TI UKDW 03)

Dengan Ming Library kita dapat membuat file Flash hanya dengan menggunakan PHP script. Ming Library adalah pustaka karya Dave Hayden yang dapat menambah kemampuan PHP untuk menghasilkan file Flash (*.swf). Ming Library mendukung sebagian besar fitur yang terdapat pada Flash 4. Ming Library juga dapat digunakan pada bahasa pemrograman C++, Ruby, Phyton dan Perl.

Untuk dapat menggunakannya kita terlebih dahulu harus memastikan Ming Library terinstall sebagai ekstensi PHP. Petunjuk menginstall Ming dapat dilihat pada http://www.opaque.net/ming/install.html. Bagi pengguna Windows, agar lebih mudah dalam melakukan instalasi, dapat mendownload XAMPP di http://www.apachefriends.org/download.php?xampp-win32-1.6.6a-installer.exe

 

Membuat Movie Flash

Untuk membuat movie Flash membutuhkan kelas SWFMovie. Script yang digunakan adalah sebagai berikut:

$myMovie->new SWFMovie();

Variabel $myMovie merupakan obyek movie baru dan dapat diberi beberapa fundamental yang ada pada movie, seperti dimensi movie, frame rate, dan warna background. Untuk mengeset dimensi pada movie, menggunakan script berikut

$myMovie->setDimension(x,y);

Dengan demikian, ukuran atau dimensi movie Flash yang dibuat berukuran lebar x pixel dan tinggi x pixel. Mengeset frame rate dapat menggunakan fungsi setRate(), sebagai berikut:

$myMovie->setRate(30);

Angka 30 menunjukan banyaknya frame yang natinya ditampilkan tiap detik. Defaultnya adalah 12. Sedangkan untuk mengatur warna background adalah sebagai berikut:

$myMovie->setBackground(0,0,0);

Dengan demikian, warna background yang dihasilkan adalah putih yang merupakan komposisi dari nilai 0 untuk red, nilai 0 untuk green, dan nilai 0 untuk blue. Untuk menampilkan file Flash secara langsung ke dalam web browser menggunakan script sebagai berikut:

header( 'Content-type: application/x-shockwave-flash' );

$myMovie->output();

Sedangkan untuk menyimpan file Flash yang dihasilkan ke dalam diektori dengan format *.swf, menggunakan script sebagai berikut:

$myMovie->save(“namafile.swf”);

Beberapa script di atas jika digabungkan menjadi satu maka akan menghasilkan script PHP yang dapat menghasilkan movie Flash.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(0, 0, 0);
   6: // Tampilkan movie ke browser
   7: header(‘Content-type:application/x-shockwave-flash’);
   8: $myMovie->output();
   9: ?>
  10:  

Namun dengan cara ini file Flash tidak dapat ditampilkan secara spesifik sesuai dengan dimensi yang telah ditentukan. Hal ini terjadi karena file Flash berupa grafik vektor dan dapat secara dinamis memperbesar dimensinya sesuai dengan besarnya ukuran window Web browser. Cara untuk menampilkan file Flash ke browser agar sesuai dengan dimensi yang ditentukan adalah dengan cara menyimpan terlebih dahulu file Flash ke direktori dan kemudian di-embed-kan ke dalam tag HTML dengan cara sebagai berikut:

   1: <html> 
   2: <body>
   3: <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=objects WIDTH=460 HEIGHT=80> 
   4: <PARAM NAME=movie VALUE="example01.swf"> 
   5: <EMBED src="example01.swf" WIDTH=400 HEIGHT=300 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
   6: </OBJECT>
   7: </body> 
   8: </html>

Sehingga file Flash yang ditampilkan pada web browser akan tampak seperti pada gambar dibawah ini

clip_image002[4]

Menggambar Bentuk Obyek Dengan Ming

Untuk menggambar bentuk geometri pada Flash membutuhkan kelas SWFShape. Kelas ini dapat digunakan untuk menggambar garis maupun kurva.

$shape = new SWFShape();

Kelas SWFShape() mempunyai dua fungsi yang dapat digunakan untuk menggambar garis dan satu fungsi untuk mendefinisikan style dari garis. Untuk mengeset style dari garis dapat menggunakan fungsi setLine() yang mempunyai lima argument, yaitu pertama adalah lebar garis dalam pixel, tiga berikutnya adalah nilai RGB dan yang terakhir chanel alpha untuk garis. Berikut adalah bentuk penulisanya secara lengkap:

$shape->setLine(5, 255, 255, 0. 255);

Sedangkan dua fungsi untuk menggambar garis adalah drawLine() dan drawLineTo(). Setiap fungsi ini memiliki dua argument yaitu koordinat x dan koordinat y. drawLine() digunakan untuk menggambar garis dari titik koordinat (x,y) pen awal ditambahkan dengan x dan y pada argument sehingga dibentuk koordinat baru (x,y), sedangkan drawLineTo() digunakan untuk menggambar garis dari titik pen awal sampai ke koordinat (x,y) yang telah ditentukan.

Untuk menentukan koordinat posisi pen atau posisi awal pen dapat dengan menggunakan fungsi movePenTo() yang juga memiliki dua argument yaitu koordinat x dan koordinat y. Berikut ini adalah contoh script yang menggunakan kedua fungsi menggambar garis yaitu drawLine() dan drawLineTo():

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Menggambar garis ke kanvas menggunakan drawLine()
   7: $line1 = new SWFShape();
   8: $line1->setLine(5, 0, 0, 0, 255);
   9: $line1->movePenTo(40, 20);
  10: $line1->drawLine(100, 100); 
  11: //sehingga garis digambar menuju koordinat (140,120)
  12: //diperoleh dari (100+40,100+20)
  13: // Menggambar garis ke kanvas menggunakan drawLineTo()
  14: $line2 = new SWFShape();
  15: $line2->setLine(5, 0, 0, 0, 255);
  16: $line2->movePenTo(80, 20);
  17: $line2->drawLineTo(200, 100);
  18: // Menambahkan shapes ke movie
  19: $myMovie->add($line1);
  20: $myMovie->add($line2);
  21: // Tampilan dari movie
  22: header('Content-type:application/x-shockwave-flash');
  23: $myMovie->output();
  24: ?>

Dari script di atas ini menghasilkan file Flash yang tampat pada web browser pada gambar

clip_image002[6]

Selain menggambar garis, Ming Library juga menyediakan dua fungsi untuk menggambar kurva yaitu drawCurve() dan drawCurveTo(). Fungsi drawCurve()digunakan untuk menggambar kurva secara relatif dari posisi awal pen. Fungsi ini memiliki empat argument, yang pertama adalah koordinat x dan y sebagai control point dari kurva, dan yang terakhir adalah koordinat x dan y yang merupakan anchor point. Ketika Ming menggambar kurva, posisi pen awal disebut sebagai source point. Sedangkan fungsi drawCurveTo() digunakan untuk menggambar kurva dimulai dari posisi awal pen dan menggambarnya menuju anchor point, dengan menggunakan control point untuk mendefinisikan bentuk dari kurva. Fungsi ini juga memiliki empat argument sama seperti pada drawCurve().

clip_image002

Berikut ini adalah contoh script penggunaan dari fungsi drawCurveTo() untuk menggambar kurva menggunakan Ming:

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Menggambar kurva
   7: $curve = new SWFShape();
   8: $curve ->setLine(5, 0, 0, 0, 255);
   9: $curve ->movePenTo(40, 20);
  10: $curve ->drawCurveTo(100, 100, 100, 20);
  11: // Menambahkan shape ke movie
  12: $myMovie->add($curve);
  13: // Menampilkan movie
  14: header(‘Content-type:application/x-shockwave-flash’);
  15: $myMovie->output();
  16: ?>

Dari script di atas ini menghasilkan file Flash yang tampat pada web browser pada gambar

clip_image002[8]

Penggabungan beberapa kurva dapat digunakan untuk menggambar sebuah lingkaran. Pembuat Ming yaitu Dave telah membuat sebuah metode perhitungan untuk menggambar lingkaran dengan Ming. Berikut adalah metode yang disediakan oleh Dave untuk menggambar lingkaran dengan Ming:

   1: // draws a circle with radius $r 
   2: // centered at ($x,$y) into shape $s 
   3: $a = $r * 0.414213562; 
   4: // = tan(22.5 deg) 
   5: $b = $r * 0.707106781; 
   6: // = sqrt(2)/2 = sin(45 deg) 
   7: $s->movePenTo($x+$r, $y); 
   8: $s->drawCurveTo($x+$r, $y-$a, $x+$b, $y-$b); 
   9: $s->drawCurveTo($x+$a, $y-$r, $x, $y-$r); 
  10: $s->drawCurveTo($x-$a, $y-$r, $x-$b, $y-$b); 
  11: $s->drawCurveTo($x-$r, $y-$a, $x-$r, $y); 
  12: $s->drawCurveTo($x-$r, $y+$a, $x-$b, $y+$b); 
  13: $s->drawCurveTo($x-$a, $y+$r, $x, $y+$r); 
  14: $s->drawCurveTo($x+$a, $y+$r, $x+$b, $y+$b); 
  15: $s->drawCurveTo($x+$r, $y+$a, $x+$r, $y); 

Dengan menggabungkan metode tersebut pada kelas SWFShape(), maka dapat dibentuk suatu lingkaran yang sempurna. Berikut adalah contoh script yang digunakan untuk menggambar lingkaran dengan Ming:

 

   1: <?php  
   2: hape=new SWFShape();  
   3: hape->setLine(1,0,0,0);  
   4: hape->setRightFill(255,0,255);  
   5: = 100;  
   6:  40;  
   7:  40;  
   8:  $ra * 0.414213562; // = tan(22.5 deg) 
   9:  $ra * 0.707106781; // = sqrt(2)/2 = sin(45 deg) 
  10: hape->movePenTo($x+$ra, $y);  
  11: hape->drawCurveTo($x+$ra, $y-$a, $x+$b, $y-$b);  
  12: hape->drawCurveTo($x+$a, $y-$ra, $x, $y-$ra);  
  13: hape->drawCurveTo($x-$a, $y-$ra, $x-$b, $y-$b);  
  14: hape->drawCurveTo($x-$ra, $y-$a, $x-$ra, $y);  
  15: hape->drawCurveTo($x-$ra, $y+$a, $x-$b, $y+$b);  
  16: hape->drawCurveTo($x-$a, $y+$ra, $x, $y+$ra);  
  17: hape->drawCurveTo($x+$a, $y+$ra, $x+$b, $y+$b);  
  18: hape->drawCurveTo($x+$ra, $y+$a, $x+$ra, $y);  
  19: ovie=new SWFMovie();  
  20: ovie->setDimension(400,300);  
  21: ovie->setBackground(255,0,0);  
  22: //Menambahkan shape ke movie
  23: stCircle=$myMovie->add($myShape);  
  24: stCircle->moveTo(100,100);  
  25: enampilkan movie
  26: er(‘Content-type:application/x-shockwave-flash’);
  27: ovie->output();
  28:  

clip_image002[10]