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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s