Pages

Labels

Sunday, April 26, 2009

Membuat Animasi Flash dengan PHP dan Ming

Mohammad DAMT

Dilengkapi banyak contoh, Mdamt memperkenalkan cara mengakses library Ming dari PHP untuk generasi animasi Flash secara dinamik.

Situs-situs dengan animasi Flash sekarang makin digemari. Bukan saja karena dapat membuat tampilan lebih menarik, namun juga bisa membuat suatu situs menjadi interaktif secara instan.

Animasi Flash bisa dibuat dengan berbagai macam software selain Macromedia Flash. Dengan menggunakan library Ming buah karya Dave Hayden, kita bisa membuat animasi Flash sendiri menggunakan PHP, C, C++, Python, atau Ruby. Dalam artikel ini saya akan mengupas sedikit mengenai pembuatan animasi Flash dengan PHP. Di PHP sendiri, selain dengan Ming, kita juga bisa menggunakan libswf atau PHP Flash Turbine dari Blue Pacific. Namun keunggulan Ming dari dua library di atas adalah bahwa Ming adalah produk open source.

Instalasi

Instalasi Library

Library Ming menggunakan lisensi LGPL dan source codenya tersedia bebas. Silahkan download terlebih dahulu lalu ekstrak sourcenya. Setelah terekstrak, ketikkan: 

$ cd ming-0.1.1

$ make

$ su -c 'make install'

Perintah-perintah di atas menginstruksikan sistem untuk menginstall library Ming di dalam direktori /usr/lib.

Instalasi Modul PHP

Ming dapat diinstal mulai dari PHP versi 4.0.2, dan sejak versi 4.0.5, Ming sudah dimasukkan sebagai fungsi builtin PHP. Untuk menginstal modul Ming, PHP perlu dikompile dengan parameter --with-ming=/usr.

Apabila tidak ingin mengkompile ulang PHP, download saja file php_ming.so dan masukkan ke dalam konfigurasi di file php.ini. Tambahkan baris berikut ke file php.ini. 

extension=php_ming.so

Jangan lupa untuk meletakkan file php_ming.so ke dalam direktori modul PHP yang benar.

Konsep Dasar

Flash Object

Dalam Ming, semua komponen animasi

Flash adalah objek yang bisa langsung dimanipulasi melalui metode dan atribut yang disediakan. Karena itu, latar belakang pengetahuan mengenai pemrograman berorientasi objek (OOP) pada PHP akan sangat membantu.

Twips

Semua nilai jarak, panjang, ukuran, dan sebagainya, diukur dalam satuan twips (twenty units per pixel). Jadi dua puluh satuan pada Flash sama dengan satu pixel di layar. Namun demikian, kenyataan di layar bisa berbeda, karena Flash akan secara otomatis melakukan skala terhadap angka panjang dan lebar layar animasi yang didefinisikan pada tag atau di HTML atau bahkan akan melakukan skala sebesar panjang dan lebar browser bila Anda tidak mendefinisikan tag tersebut.

Animasi

Animasi Flash dibentuk dari urutan-urutan frame. Tiap-tiap frame dapat berisi objek gambar statik ataupun frame dari animasi lain. Jadi sebuah animasi Flash dapat berisi animasi Flash yang lain. Kita dapat menentukan besar laju frame pada suatu animasi Flash, namun kadang kala laju frame dapat diperlambat apabila player Flash yang tersedia tidak cukup cepat untuk menggambar isi frame dalam laju waktu tersebut, kecuali apabila kita menggunakan streaming audio, yang mana kualitas suara akan diutamakan hingga tidak terdengar terputus-putus.

Objek Flash

Pada artikel ini, saya tidak membahas semua objek Flash yang dapat diakses dari Ming, tetapi saya akan bahas tiga buah objek saja, yaitu Movie, Shape, dan Text. Objek-objek Flash lainnya telah menunggu untuk Anda eksplorasi.

Movie

Movie merupakan animasi utama dalam suatu animasi Flash. Semua yang ditampilkan di layar adalah isi dari objek Movie. Untuk membuat movie baru, kita buat objek movie: 

$movie = new SWFMovie();

Kemudian kita perlu menentukan ukuran dimensi layar animasi Flash dengan metode berikut: 

$movie->setdimension(1600,1200);

Dalam kode di atas kita membuat dimensi animasi Flash sebesar 800 x 600 pixel (ingat Twips!). Kita juga bisa menentukan laju frame (misalnya 20 frame per second) dengan kode: 

$movie->setrate(20.0);

Lalu kita juga bisa mendefinisikan warna latar belakang animasi kita dengan kode: 

$movie->setbackground(0x00,0xff,0x00);

Pada contoh di atas, kita baru saja membuat warna latar belakang menjadi warna hijau (kode RGB #00FF00).

Yang perlu kita ingat adalah bahwa semua yang kita buat dalam animasi Flash tidak akan bisa tampil di layar bila kita belum mengeluarkan perintah berikut: 

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

$movie->output();

Perintah header() akan menginstruksikan kepada browser untuk menyiapkan player Flash untuk menampilkan data animasi yang barusan kita buat. Lalu $movie->output() akan mengirimkan data animasi tersebut untuk ditampilkan oleh player Flash. Dua baris kode di atas biasanya akan kita tempatkan pada akhir program, sebagaimana kita bisa lihat pada contoh di Listing 1.

Shape

Sekarang kita akan berkenalan dengan shape. Shape adalah suatu objek geometri dan dapat berupa garis, kurva, atau glif. Garis-garis yang membentuk area dapat kita isi dengan warna tertentu. Untuk membuat shape, kita tinggal membuat objek shape baru: 

$shape = new SWFShape();

Untuk mulai menggambar, kita perlu menentukan ketebalan garis dan warna yang digunakan dengan metode setline() sebagaimana dicontohkan kode berikut: 

$shape->setline(80,0xff,0x00,0x00);

Kode di atas akan menginstruksikan Flash untuk nantinya menggambar dengan ketebalan garis sebesar 80 twips dan menggunakan warna merah (#ff0000). Setelah sebuah garis didefinisikan, kita dapat memulai menggambar dengan garis tersebut. Pertama kali kita tempatkan kursor gambar di koordinat yang kita inginkan, misalnya: 

$shape->movepento(1000,1000);

Kode di atas menempatkan kursor ke koordinat x = 1000 dan y = 1000. 

$shape->drawline(500,500);

Baris di atas menggambar garis dari lokasi koordinat asli (1000,1000) ke koordinat baru (1500,1500). Yang barusan kita lakukan adalah penggambaran shape dengan cara relatif. Artinya, penggambaran garis berikutnya dilakukan pada jarak relatif terhadap koordinat asli. Bila pada pertama kali kita tempatkan kursor pada koordinat (1000,1000), lalu kita gambar garis dengan drawline() dengan parameter (500,500), berarti koordinat terakhir adalah (1000+500,1000+500)=(1500,1500).

Metode penggambaran yang lainnya adalah dengan menggunakan koordinat absolut. Untuk mendapatkan hasil yang sama dengan gambar pada contoh sebelumnya, kode kita untuk absolut adalah: 

$shape->movepento(1000,1000);

$shape->drawlineto(1500,1500);

Pada baris kedua di atas kita menggunakan perintah drawlineto() dan bukan drawline(). Artinya koordinat yang kita sebutkan dalam parameter adalah koordinat absolut.

Garis yang barusan kita gambar tidak akan ditampilkan di layar sebelum kita berikan perintah berikut: 

$movie->add($shape);

Artinya, objek $shape yang sudah kita buat akan ditambahkan ke frame aktif saat ini pada movie Flash. Kode lengkapnya bisa Anda perhatikan pada Listing 2.

Text

Ming telah menyediakan objek Text untuk menulis sebuah string pada animasi Flash. Untuk menuliskan sebuah teks di layar, kita pertama kali perlu meload font yang digunakan dengan menggunakan objek Font. 

$font = new SWFFont("test.fdb");

$text = new SWFText();

$text->setfont($font);

Kode di atas akan meload font bernama test.fdb (font ini disediakan di file ming-examples.tgz di situs Ming). Font tersebut kemudian kita gunakan dengan perintah setfont().

Perhatikan bahwa tipe font yang didukung oleh Ming hanyalah tipe font fdb. Anda dapat memperoleh font dengan tipe ini di Internet atau membuat sendiri. Bila Anda ingin membuat sendiri font fdb dari suatu font TTF, yang harus Anda lakukan adalah menuliskan sembarang teks di Macromedia Flash dengan font tersebut, lalu simpan sebagai Generator Template. Kemudian gunakan utiliti makefdb yang disediakan oleh Ming (ada di dalam subdirektori util/) untuk menghasilkan font fdb dari file Flash yang baru Anda buat tadi. 

$text->setHeight(50);

$text->setColor(0xff, 0x00, 0x00);

$text->moveTo(200, 200);

$text->addString("Flash Gordon v.s. Emperor Ming");

Kode di atas akan menuliskan kalimat Flash Gordon v.s. Emperor Ming pada koordinat (200,200) dengan warna merah dan tingginya 50 twips. Kode lengkapnya bisa disimak pada Listing 3.

Animasi

Seperti dijelaskan sebelumnya, animasi Flash adalah kumpulan frame-frame. Semua objek yang ditampilkan di player Flash sebenarnya adalah frame yang aktif. Suatu frame akan ditampilkan secara bergantian di layar dengan laju kecepatan yang ditentukan dengan perintah setrate().

Semua kode yang telah kita bahas di atas adalah sebuah animasi Flash dengan frame tunggal. Lalu bagaimana kita menggambar animasi Flash dengan banyak frame ? Mudah saja. Kita dapat menggunakan perintah nextframe() untuk menginstruksikan player Flash bahwa kita akan menggambar pada frame selanjutnya. Perintah ini mirip dengan fungsi Insert Keyframe di Macromedia Flash.

Sebagai contoh, kita akan menuliskan kalimat Flash Gordon v.s. Emperor Ming dan kita animasikan agar tulisan tersebut berjalan dari koordinat awal ke (0,0) dengan kode berikut: 

$text->addString("Flash Gordon v.s. Emperor Ming");



$animasi = $movie->add($text);

for ($i=0;$i<50;$i++) {

 $animasi->move(5,5);

 $movie->nextframe();

}

Perhatikan pada baris 

$animasi = $movie->add($text);

di sini kita membuat sebuah objek yang disebut DisplayItem. Objek ini adalah keluaran dari hasil metode add() sebuah objek Flash dan bisa selanjutnya kita modifikasi baik ukuran, lokasi, dan sebagainya. Pada contoh di atas yang kita modifikasi adalah lokasinya. Lokasi tulisan kita pindahkan ke koordinat relatif (5,5) twips dari koordinat awal sebanyak 50 kali. Setelah kita pindahkan, kita perintahkan player Flash untuk menggambar di frame baru dengan perintah nextframe(). Pada contoh di atas kita baru saja membuat animasi Flash dengan frame sebanyak 50 buah. Silakan disimak juga beberapa contoh animasi pada Listing 6.

Action

Kita bisa memperoleh kontrol terhadap animasi yang kita buat dengan bantuan Action. Action memungkinkan kita untuk menuliskan suatu skrip pada animasi Flash. Syntaxnya mirip dengan C dan fungsinya mirip dengan ActionScript pada Macromedia Flash.

Fungsi-fungsi lengkap Action bisa Anda lihat pada manual Ming di bagian objek SWFAction. Sebagai contohnya kita akan modifikasi contoh pada Listing 4. Pada bagian akhir kode kita tambahkan 

$movie->add(new SWFAction("gotoFrame(0); stop();"));

Action di atas menginstruksikan player Flash untuk kembali ke frame 0 dan menghentikan animasi. Kode lengkapnya ada di Listing 5. Sebagaimana ActionScript pada Macromedia Flash, pemanfaatan Action hanya dibatasi oleh imajinasi Anda.

Penutup

Dengan library Ming, kita sudah dapat membuat animasi Flash langsung menggunakan PHP tanpa harus melibatkan Macromedia Flash. Beberapa ide penggunaannya adalah: a) pembuat efek teks (seperti yang dihasilkan Swish), online price ticker, counter, guestbook, e-card, dsb.

URL

Ming: www.opaque.net/ming; libswf: reality.sgi.com/grafica/flash/; PHP Flash Turbine dan Blue Pacific: www.blue-pac.com

Mohamad DAMT programer PHP dan aktivis open source. Tinggal di Bogor dan bekerja di perusahaan webhosting Bisnisweb, Jakarta. Saking gemar makan ayam goreng, pernah harus masuk rumah sakit karena kolesterol melonjak. Ingin menghubungi MDAMT? Kunjungi mdamt.net.


Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)