SWF vs HTML5

Beberapa tahun yang lalu membuat animasi atau game di Flash sepertinya nyaris tanpa hambatan, baik animasi dengan banyak movie clip atau game/animasi yang lebih rumit pakai action script (tentunya kerja sama dengan programmer). Animasi serumit apapun pasti akan terlihat persis seperti apa yang kita buat dan sesuai dengan yang diinginkan. Tapi masalahnya ada di device; nggak semua komputer punya Flash player. Jadi user harus instal Flash player terlebih dahulu sebelum bisa melihat animasi Flash atau memainkan game Flash. Apalagi kalau device-nya bergambar apel, sudah bisa dipastikan kalau Flash/SWF nggak bakal bisa dimainkan di situ.

Ketika online dan mobile semakin jadi trend, Flash semakin dianggap nggak efektif lagi untuk aplikasi seperti itu. Selain harus instal player-nya, kadang membuat performance device jadi lebih berat. Pada saat itu munculah HTML5, sebuah bahasa pemrograman yang lebih canggih dan lebih ringan daripada Flash. Saya nggak terlalu ngerti soal html5 ini gimana, karena ranah saya bukan di bahasa pemrograman. Saya lebih concern gimana bikin animasi di HTML5 kalau Flash udah nggak terpakai lagi.

Saya pernah lihat animasi yang dibuat pakai HTML5, memang canggih jika memang kebutuhannya adalah animasi teknis tanpa gambar, hanya terdiri dari bentuk-bentuk geometris dan gerakan yang x/y-nya bisa ditentukan. Bagaimana bila butuh animasi dengan gambar yang gerakannya bebas? Apa gambar-gambar itu di-convert jadi PNG satu persatu dan digerakin pake kode? Saya pernah coba seperti itu, rasanya repot sekali dan hasilnya nggak bagus. Rasanya saya masih lebih suka bikin animasi dengan Flash, dengan gambar vector-nya yang tidak pecah jika dibesar/kecilkan dan animasinya yang bisa dibuat sebebas mungkin tanpa harus tergantung sepenuhnya dengan programmer.


Untunglah sekarang sudah banyak converter yang bisa menyulap file SWF jadi HTML5. Jadi para animator seperti saya ini nggak usah pusing mikirin gimana pake HTML5 yang sedang ngetop itu ๐Ÿ˜› Animator cukup bikin animasi dengan menggunakan Flash seperti biasa, dan biarkan converter itu mengubah SWF menjadi HTML5 agar bisa dijalankan di semua device. Salah satu converter online favorit saya adalah adalahย http://www.flash-to-html5.net/.

Tapi tetap saja, nggak berarti masalah terpecahkan 100% hanya dengan converter. Ternyata masih ada kendala. Kadang hasil convert HTML5 sedikit berbeda dengan SWF yang saya buat. Terutama jika saya menggunakan action script, mask, dan/atau movie clip, ada aja masalahnya. Ternyata HTML5 nggak bisa baca action script, nggak bisa detect banyak mask dan movie clip. Hadeh!

Pada video di atas, sebelah kiri adalah SWF, sebelah kanan adalah HTML5-nya. Di HTML5, muncul bentuk-bentuk berwarna hitam di sungai, padahal di SWF-nya nggak ada apa-apa. Rupanya itu dari salah satu movie clip aliran sungai. Saya coba hapus movie clip yang berubah hitam itu, dengan harapan bentuk hitam akan hilang. Tapi tebakan saya salah, setelah saya delete movie clip tersebut, convert kembali ke HTML5, ternyata bentuk hitam masih muncul… dari movie clip yang berbeda. Saya delete lagi, muncul lagi yang lain, begitu seterusnya. Sempat frustrasi saya, akhirnya saya delete aja semua movie clip yang kecil-kecil, hanya saya sisakan satu movie clip besar yang di-mask sesuai bentuk sungai. Baru deh berhasil. Tapi aliran sungainya jadi terlalu sederhana -__-”

Contoh lain adalah gelembung-gelembung gas pada minuman soda/soft drink. Bagaimana ini, HTML5 baca action stop() aja bablas, gimana mau pakai action script yang lebih advance dengan function, perhitungan random dan lain-lain? Akhirnya saya akal-akalin dengan menggunakan movie clip yang diduplikat beberapa kaliย dan di-flip. Hasilnya lumayan, beda tipis lah sama gelembung yang dibikin pake action script ๐Ÿ˜›

Anehnya, di animasi sungai, HTML5 seolah nggak bisa baca banyak movie clip, tapi di animasi soft drink, HTML5 berhasil mendeteksi banyak movie clip. Begitu juga dengan masking, kadang bisa kadang nggak. Benar-benar random -_-”

Ada yang bisa menjelaskan kenapa bisa begitu? Ah tapi biar dijelasin juga mungkin saya nggak bakal ngerti ๐Ÿ˜› Bagi saya yang penting animasi saya bisa jalan dan ga berubah-berubah amat, itu udah cukup ๐Ÿ˜€ Yaa… semoga tahun depan muncul bahasa HTML terbaru yang bisa ‘membaca’ SWF dengan sempurna, sehingga ketika di-convert nggak ada masalah sama sekali.

Catatan kaki:

Ilustrasi di video dibuat oleh teman kantor saya; Irfan. Animasi dibuat oleh saya sendiri. Semua ilustrasi dan animasi saya tampilkan hanya untuk contoh, hak cipta milik kantor kami; Adamas Digital.

Advertisements

3 thoughts on “SWF vs HTML5

  1. tapi pelan2 editor web kan editornya juga mulai kayak illustrator/photoshop. termasuk animasi html5 juga bisa dibuat di editor grafisnya. di adobe muse, tinggal drag and drop, posisi awal dimana, posisi akhir dimana, jenis animasinya spt apa. thn depan ada bbrp editor html5 jenis begini yg bakal launch dan lebih advance. jd bukan cuma ngga instal flash player, mungkin gue jg ngga akan instal program adobe flash lagi ๐Ÿ™‚

say something

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