Antara Animasi Flash dan Jquery

November 23, 2012

Ternyata tidak hanya penyanyi dangdut saja yang bisa bergoyang, ujung halaman blog pun bisa kita bikin goyang, goyangannya lembut seperti kain sutera yang diterpa semilirnya angin.

Masih bingung ya, apa sih maksudnya ujung halaman blog bergoyang ? Aku sendiri juga bingung saat mau menulis maksud postingan ini, tapi jika sobat memperhatikan ujung atas sebelah kanan pada blog ini, maka sobat akan mengerti apa yang aku maksud.

Sebagai selingan tutorial mengoprek template blog agar tidak jenuh, kali ini aku sharing bagaimana membuat ujung halaman blog bisa bergoyang-goyang seperti yang sudah aku katakan diatas. Untuk membuat ujung blog bergoyang dan saat ditarik mouse akan muncul gambar di balik lipatannya tidak terlalu sulit.

Ada dua versi cara membuatnya, yang pertama dengan Javascript plus CSS, sedangkan yang kedua perpaduan antara Javascript dengan animasi flash. Untuk versi Java plus CSS, agak sedikit ribet membuatnya, kita harus lompat sana lompat sini dalam meletakan kode css dan menyisipkan javascriptnya, sayang setelah aku coba ternyata hasilnya kaku tidak mau bergoyang layaknya penari dangdut yang sedang sekauw..menringis

Nah, sambil menunggu hujan reda diwarung Ceu Mimin penjual nasi rames, aku ngobrol dengan salah satu guru asli yang sudah banyak malang melintang di dunia persilatan, eh dunia blogging hehehe.. Guru tersebut banyak cerita mengenai pernak pernik blog agar lebih menarik tampilannya saat ada pengunjung datang. Aku diberikan banyak sekali koding2 blog untuk mempercantik tampilan. Salah satunya seperti pada posting blog ini.

Antara animasi Flash dan Jquery
Karena ada dua pilihan dalam membuat ujung blog seolah melipat, dan dibalik lipatannya tadi bisa kita sisipi foto atau tulisan aku bertanya kepadanya. "Wan... (hmm aku pangil dia Wan bukan namanya Wan, tapi sebagai panggilan akrab saja kebetulan guru tersebut keturunan Arab..)ini kan ada dua versi lalu yang paling bagus yang mana menurut Wan Hamid?" (nama guru tersebut Hamid bin Basyalamah)..

"Oh itu terserah kakang saja, mau pakai yang mana, mau pake CSS+Java atau Java+Flash."

Hedeh, aku dipanggil "Kakang" mungkin menurut pandangan guru tersebut kata "kang" pangillan penghormatan seperti aku pangil dia "Wan". Okey terlepas dari kata-kata panggilan tadi, karena aku sebagai murid tentu aku masih penasaran ingin bertanya lebih fokus, aku penasaran mendengar google saat ini tidak menyukai file dengan ekstensi "swf" apanya sih yang salah dengan flash ? bukankah flash tersebut besutan Adobe yang memiliki repusai besar dalam dunia fotografi dan animasi ? Ternyata ini menyangkut mesin pencarian (search engine) milik google. dan keamanan !

Hati-hati dengan File SWF
Jika kita mensisipkan animashi flash pada postingan, sudah pasti gambar animasi tadi tidak akan terbaca oleh seacrh engine-nya google. Mengapa karena gambar tersebut dikompresi sedemikian besar sehingga tidak dapat diuraikan oleh browser. Hal ini sangat berbeda jika kita menggunakan Jquery, semuanya terbuka, tapi jelas lebih lambat loadingnya dari pada flash, apalagi jika jumlah gambarnya banyak ! Sedangkan bahayanya dengan flash, jika kita mengadopsi dari situs lain yang tidak kita kenal reputasinya, maksudnya mengkopi alamat file tersebut kemudian kita masukan kedalam blog atau website, dikuatirkan mengandung action script berbahaya, kecuali kita membuatnya sendiri. Mungkin inilah alasan utama google tidak menyukai File swf.

Sekarang tinggal terserah kita mau pakai mana jika ingin mensisipkan animasi pada blog atau web. Perlu dicatat, google sendiri tidak bisa lepas dari Flash demikian juga Microsoft. Perhatikan saat sobat mendowload film dari Youtube, ekstensi File filmnya berekstensi "Fla" .. ini artinya google juga memakai software Flash buatan Adobe. Sedangkan pada kasus lain, saat kita membaca iklan adsense dari google atau yang lain seperti yahoo, tidak sedikit iklan2 yang mengandung animasi ber ekstensi "SWF".. Ooo, katanya google tidak menyukai file Flash tapi ternyata dia sendiri tidak konsisten. Seharusnya Jika tidak suka dengan Flash, file adsense yang mengandung animasi harus dibuat dengan Jquery.. tapi ternyata tidak!

Keuntungan dan kerugiannya
Dengan flash, jelas ukuran filenya sangat kecil sehingga tidak memberatkan loading blog, dengan flash kita dapat mensisipkan berbagai bentuk animasi tanpa takut crash dengan javascript template.
Apalagi template yang kita pakai rame seperti pasar, tentu banyak memakai JSOn, pemanggilan ulang (call back).

Jquery aman dan disukai Search engine, tapi ukuran filenya lebih besar sehingga loading blog menjadi berat. Oleh karena itu semua iklan yang mengandung animasi baik dari adsense, yahoo atau yang lain tetap menggunakan swf (flash) karena ditakutkan saat disisipkan pada template blog atau web terjadi chrash atau menjadikan loading web atau blog lambat karena filenya besar jika memakai Jquery.
Sekarang keputusan akhir ada di tangan sobat, mau pakai animasi mana jika ingin menghias postingan web atau blog.

Oh ya, jika sobat ingin membuat pagepeel (ujung halaman melipat silahkan kopi kode dibawah ini kemudian pastekan dibawah <head>  sebelum di save, di preview dulu, jika berjalan sempurna dan sobat menyukainya silhakan di save.

Isi dari javascript sudah ada gambarnya jadi tinggal sobat kopikan saja seperti yang aku katakan diatas, Sobat juga bisa mengganti gambar dibalik lipatan ujung halaman dengan gambar sobat sendiri akan tetapi ukurannya harus sesuai dengan yang tertulis pada javascript tersebut jika ukuran gambar tidak sesuai maka akan merusak tampilan (bukan merusak template) Untuk dapat mengubah gambar yang terdapat didalam javascript, sobat bisa gunakan notepad atau worpad kemudian ganti alamat gambar sobat sendiri. contohnya seperti ini :

jaaspeel.small_path = 'alamat file swf kecil';
jaaspeel.small_image = escape('Alamat gambar sobat');
jaaspeel.small_width = '100'; jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'alamat file swf besar';
jaaspeel.big_image = escape('Alamat gambar sobat');
jaaspeel.big_width = '500'; jaaspeel.big_height = '500';

Warna merah adalah alamat dimana gambar sobat di upload (bisa dipostingan), warna biru adalah alamat dimana file animasi swf sobat di upload, yang jelas file animasi swf ini jangan di uplaod di google code atau di halaman posting, sebab akan di tolak oleh google. Warna hijau lebar dan tinggi gambar yang bisa sobat sesuaikan. Sedangkan koding yang lainnya tidak perlu di ubah. Setelah selesai save, kemudia file js ini bisa sobat upload di google code. Sedangkan untuk upload file swf-nya sobat bisa membuat akun di fileden.com, disini kita bebas meng upload semua jenis file termasuk yang berekstensi swf,  kecuali javascript.  Contoh gambar :
ukuran gambar 500x500 pixel
Sebaiknya gambar dibikin miring sesuai dengan pojok halaman, sobat bisa edit dengan software milik sobat, kalau aku biasa meng edit dengan photoshop

Untuk pagepeel dengan Javascript + css kapan2 saja aku share, karena menurutku kurang menarik. selain filenya besar tampilannya juga kaku, gak pake goyang-goyang ...

You Might Also Like

0 Comments

» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.

SUBSCRIBE NEWSLETTER

Get an email of every new post! We'll never share your address.

Flickr Images