Membuat Animasi Flash dengan PHP dan Ming
January 13th, 2010 by padepokan-it.comDilengkapi 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 <EMBED> atau <OBJECT> 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(0×00,0xff,0×00);
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,0×00,0×00);
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, 0×00, 0×00);
$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.
ARTIKEL TERKAIT :
- Membuat Animasi / Gambar Gerak dengan Easy GIF Animator Easy GIF Animator adalah sebuah software yang sangat simple dan mudah digunakan untuk membuat dan mengedit gambar animasi GIF ....
- Download file berformat flash dari website Anda yang gemar berselancar di internet pasti sering menemui animasi-animasi menarik dan lucu dari setiap halaman website yang anda buka....
- Membuat template atau tampilan web dengan css Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut...
- Membuat antivirus anda lebih ampuh dengan Threatfire Threatfire mempunyai kemampuan untuk menghalangi instalasi malware dengan mengidentifikasi perilaku malware. Threatfire lebih cepat mendeteksi bagian boot yang terinfeksi dibanding...
- Cara membuat virus dengan software Kamu pasti masih inget dengan virus worm yang sempat menghebohkan internet beberapa waktu yang lalu : Anna Kournikova. Worm yang...
.




January 16th, 2010 at 5:50 pm
Mohon bantuannya
Saya punya tugas untuk membuat gambar gerak/gif, tapi bukan dari flash. Kira2 software yang cocok untuk buat animasi tersebut apa ya?
February 19th, 2010 at 4:41 pm
kudu
April 16th, 2010 at 6:04 am
buy propecia online on line propecia , buy zithromax online magnesium aluminum zithromax antacid , buy kamagra online kamagra oral jelly 100 mg , buy lasix online lasix eye surgery pensacola , buy xenical online xenical acne , buy soma online drug info soma , buy lexapro online lexapro comments , buy nolvadex online nolvadex decreased gains , buy imitrex online commercial imitrex , buy flomax online faa flomax , buy celexa online celexa sore throat , buy diflucan online diflucan msm , buy ultram online cheap ultram cod , buy clomid online clomid success rate pregnancy , buy cipro online cipro xr interaction , buy silagra online silagra kamagra , buy accutane online accutane in brazil , buy amoxil online amoxil tablets , buy paxil online medication paxil , buy xanax online soma and xanax , buy valium online valium prozac together , buy tramadol online soma tramadol fioricet .
May 7th, 2010 at 5:23 am
Very nice site! is it yours too
May 9th, 2010 at 7:10 pm
Why place a link in our Website Directory? Our Website Directory is poised to become the largest directory. They allow for 100% free URL linking. Our directory is search engine friendly. We have strict guidelines to make sure that sites added to our directory are quality sites. We use the latest in technology to circumvent spam and all other kind of abuse.
May 12th, 2010 at 11:42 am
It is advantageous, then, to have a repair service manual for your car, whether it is a Bugatti Veyron or a Hillman Imp. Knowing what has gone wrong with the car, and whether you can run the repairs yourself, is helpful for so many reasons. A good service repair manual will make it easier to drive with confidence, knowing that you have all the information you need to make the repair job less stressful, and possibly less expensive. Audi Repair Manual
May 17th, 2010 at 3:10 am
Post bookmarked and shared on facebook, I’ll post a feedback on my site too
May 17th, 2010 at 4:12 am
A lot of comments in so little time, I have to second, it’s indeed a great blog. the site is outstanding
May 17th, 2010 at 8:28 am
I saw this article through Facebook (my friend posted it). After reading it, I clicked “Like” and shared it myseld.
May 18th, 2010 at 9:39 am
just posted this page on facebook. it’s an interesting article for all.
May 18th, 2010 at 10:59 am
Very nice site! is it yours too
May 19th, 2010 at 6:05 pm
thanks, very well written post, found it through a random google search and i shared it on my stumble upon account
May 19th, 2010 at 7:55 pm
Hello! cfdeeea interesting cfdeeea site!
May 20th, 2010 at 11:03 am
saw this page bookmarked and really liked it. will surely bookmark it too and also read your other posts later.
May 20th, 2010 at 11:03 am
just linked this article on facebook account. it is an interesting article for everyone.
May 24th, 2010 at 12:25 pm
this article is exactly what i’m looking for! found your page bookmarked from a friend. I will also share it. Thanks again!
May 26th, 2010 at 11:35 am
I am the first time on this site and am really enthusiastic about and so many good articles. I think it’s just very good.
Always yours Mr. Cialis
May 27th, 2010 at 9:35 am
Thanks for taking this opportunity to discuss this, I feel strongly about it and I take pleasure in learning about this topic. If possible, as you gain information, please add to this blog with new information. I have found it extremely useful.
May 27th, 2010 at 6:44 pm
Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can’t wait to read lots of your posts. . . .
May 27th, 2010 at 7:41 pm
Only want to say your article is as tonishing. The clearness in your post is simply spectacular and i can take for granted you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with succeeding post. Thanks a million and please keep up the ac complished work.
May 28th, 2010 at 9:26 am
I completely agree with the above comment, the internet is with a doubt growing into the most important medium of communication across the globe and its due to sites like this that ideas are spreading so quickly.
June 4th, 2010 at 6:14 pm
Post bookmarked and shared on facebook, I’ll post a feedback on my profile as well