Membuat Animasi PNG dengan Apngasm

Sesuai dengan post sebelumnya disini, PNG diucapkan "ping" atau "P-N-G" (pienji) adalah sebuah format file gambar yang didesain pada pertengahan 1990an sebagai jalan keluar untuk permasalahan paten format GIF. PNG sendiri merupakan singkatan dari Portable Network Graphics. Keunggulan dari PNG sendiri adalah kelebihan pada JPEG dan GIF digabung menjadi satu. GIF sendiri memiliki kelebihan berupa dapat dianimasikan dan mendukung transparansi. Pertanyaannya sekarang bagaimana cara membuat gambar PNG bergerak seperti GIF?

Gambar PNG yang bergerak seperti gambar GIF kebanyakan mempunyai ekstensi unofficial dengan nama .APNG (Animated PNG). Meski demikian ekstensi .PNG juga dapat digunakan untuk menganimasikan gambar PNG. Kelebihan animasi PNG dibandingkan dengan GIF adalah kualitasnya yang jauh lebih baik dibandingkan animasi GIF. Sedangkan kelemahan dari APNG sendiri adalah hanya sedikit browser yang dapat menampilkan animasi PNG. Beberapa macam browser tersebut antara lain:

• Mozilla Firefox versi 3 keatas
• Opera
• Google Chrome (dengan penambahan ekstensi)

Selain 3 browser tersebut APNG tidak akan berjalan dengan sempurna atau bahkan tidak berjalan sama sekali. Namun tidak ada salahnya mencoba membuat animasi apng sebagai pengetahuan. Jika ingin mencobanya silahkan disimak kebawah.

Pertama tama sebelumnya install terlebih dahulu apngasm. Untuk menginstallnya di Ubuntu bisa dengan menggunakan perintah berikut:

sudo apt-get install apngasm

Jika sudah, sekarang buat sebuah folder yang didalamnya ada beberapa gambar png. Jangan lupa untuk mengganti semua nama gambar dengan nama "frame00x.png" (tanpa tanda kutip) dimana x diganti dengan angka urut (1 sampai 999) sesuai dengan urutan yang akan dianimasikan. Setelah itu dengan menggunakan terminal (apngasm berbasis command line) masuk ke dalam folder yang telah dibuat sebelumnya dengan perintah :

cd nama-folder

Setelah itu masukkan perintah berikut ini:

apngasm hasil.png frame*.png 1 10

Keterangan dari perintah diatas adalah :

• apngasm : nama aplikasi
• hasil.png : output atau hasil dari penggabungan beberapa file png
• frame*.png : input atau sumber gambar png yang akan dianimasikan
• 1 10 : delay atau jeda antar gambar. 1 10 disini berarti 1/10 detik

Setelah jadi, coba lihat hasilnya dengan menggunakan browser (disarankan Mozilla Firefox). Hasil apng yang saya buat seperti gambar dibawah (hanya frame pertama karena blogger tidak support apng. untuk menyiasatinya silahkan klik link dibawah  gambar ini.)

Related Posts:", numPosts: 8, summaryLength: 100, titleLength: "auto", thumbnailSize: 100, noImage: "", containerId: "bpostrelated-post", newTabLink: false, moreText: "Read More", widgetStyle: 2, callBack: function() {} };