Pernahkah kalian menemui sebuah website yang didalamnya terdapat animasi flash? Jika jawabannya belum pernah, kalian bisa lihat contohnya di web yang ini atau juga web yang ini. Tapi sekarang website dengan flash sudah mulai banyak ditinggalkan. Alasannya karena telah muncul jQuery. JQuery ini dirasa lebih ringan untuk ditempelkan pada sebuah website dan tentunya mempunyai kemampuan menciptakan tampilan yang tidak kalah menariknya dengan flash.
Nah, pada postingan kali ini kita akan belajar menggabungkan keduanya menjadi satu, kita akan menampilkan animasi flash pada sebuah halaman website dengan menggunakan jQuery.
JQuery ini selain mampu memanipulasi tampilan, ternyata juga bisa digunakan untuk menambahkan atau menampilkan flash (embed) pada sebuah halaman website HTML.
Pada tutorial ini kita hanya membutuhkan 3 buah file, yaitu: file jquery.tools.min.js, file animasi flash, dan sebuah file HTML. Untuk yang belum mempunyai file jQuery nya, kalian dapat mendownloadnya disini. Sedangkan untuk isi file HTML-nya adalah sebagai berikut:
Nah, pada postingan kali ini kita akan belajar menggabungkan keduanya menjadi satu, kita akan menampilkan animasi flash pada sebuah halaman website dengan menggunakan jQuery.
JQuery ini selain mampu memanipulasi tampilan, ternyata juga bisa digunakan untuk menambahkan atau menampilkan flash (embed) pada sebuah halaman website HTML.
Pada tutorial ini kita hanya membutuhkan 3 buah file, yaitu: file jquery.tools.min.js, file animasi flash, dan sebuah file HTML. Untuk yang belum mempunyai file jQuery nya, kalian dapat mendownloadnya disini. Sedangkan untuk isi file HTML-nya adalah sebagai berikut:
<html>
<head>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script>
flashembed("game", "deflection.swf");
</script>
<style>
#game {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="game"></div>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script>
flashembed("game", "deflection.swf");
</script>
<style>
#game {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="game"></div>
</body>
</html>
Dapat dilihat pada kode diatas, terdapat 3 hal yang perlu diperhatikan, yaitu:
- Pemanggillan library jQuery.
<script type="text/javascript" src="jquery.tools.min.js"></script> - Penambahan obyek elemen berupa class / id pada bagian tag BODY untuk tempat animasi flash yang ingin ditampilkan. Dalam script diatas saya menggunakan id bernama "game".
<div id="game"></div> - Penambahan script jQuery pada bagian HEAD nya. Disini terdapat prosedur flashembed() yang mana di dalamnya terdapat 2 buah parameter. Parameter yang pertama yaitu selektor tempat flash akan ditampilkan. Sedangkan parameter yang kedua adalah posisi URL tempat file flash berada.
<script>
flashembed("game", "deflection.swf");
</script>
Tidak ada komentar:
Posting Komentar