HTML Sayfası Üzerinde Transparan Flash Animasyonu Oluşturma

Bu animasyon özellikle incredimail adlı bir mail programının hazırlanmasından sonra popüler olmuştur. Bizim animasyonumuzda salyangoz sayfada 3 kez hareket edecek şekilde hazırlanmıştır.

Sayfamızdaki salyangoz animasyonu incredimail`den alınmıştır.Şayet HTML sayfası üzerinde oynatacağınız animasyon içinde resim dosyaları bulunuyorsa arkaplanın şeffaf olmasına mutlaka dikkat ediniz.

Çok çarpıcı bir görünüm oluşturmasına rağmen animasyonun hazırlanma tekniği son derece basittir ve esas görevi flash değil bir javascript kod grubu sağlamaktadır.

Animasyonu oluşturalım:

1- Önce istediğiniz ebadlarda flash animasyonunuzu oluşturun. Şayet bir resim içerecekse önceden de belittiğimiz gibi resim arkaplanını transparan olarak hazırlayın.

2- Sistem şöyledir. HTML sayfasının üzerine identifier adı verilmiş bir layer eklenir . Bu layer içine flash animasyonu alınır ve layer için kodlara eklenen DIV etiketinden hemen önce aşağıda bahsedilen javascript kodu eklenir. Dreamweaver kullanılıyorsa işlem daha kolay gerçekleşecektir. Önce sayfa üzerine bir layer ekleyin.Layerın içini tıklayarak seçin ve ana menüden swf dosyanızı yükleyin. Kodları açıp swf dosyasının bulunduğu dizine:

<param name=wmode value=transparent> eklentisini yapın. Bu basit işlem animasyonunuzu çalıştıracaktır.

3- Dreamweaver kullanmak istemiyorsanız 2. şıkta anlatılanları unutun ve alttaki satırları dikkatle okuyun.

HTML sayfanızı açın. Üstteki menüden Görünüm--> Kaynak seçeneğini tıklayın.Sayfanızın kodları gözlenecektir. Şimdi alttaki kodları kopyalayıp Sayfanızdaki arzu edilen alana yapıştırın:

<script type="text/javascript">
document.writeln('<style type="text/css">');
document.writeln('#layer_ID_Adi {position:absolute; left:'+(document.body.clientWidth-750)+'px; top:'+(document.body.clientHeight-350)+'px; visibility:visible;}');
document.writeln('</style>');
</script>
<div id="layer_ID_Adi">
<object ID="jumpad" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0" width="750" height="110">
<param name="SRC" value="snail_splash.swf">
<param name=wmode value=transparent>
</object></div>

Önemli kısmlar renkli olarak yazılmıştır. Kırmızı ile yazılan yerler div etiketi ile eklediğiniz layer identifier adıdır.

Yine kırmızı yazılan 750 rakamı ve 350 rakamı swf dosyası animasyonunun sayfanın hangi kısımlarında oluşacağını belitmektedir.750 sol kenar 350 ise üst kenara göre planlanır.750 değerini ne kadar küçültürseniz animasyon başlama yeri o kadar sağa doğru kayar. 350 değerini azaltırsanız animasyon aşağı, çoğaltırsanız yukarı doğru yerleşim gösterir. Uygun değeri deneme yanılma yolu ile bulabilirsiniz.

Film mutlaka transparan kaydedilmelidir.Bu nedenle <param name=wmode value=transparent> dizini eklenmelidir.

Dikkat etti iseniz flash kodları arasında EMBED tagı yok. Buradan çıkan sonuç doğal olarak şu oluyor. Bu tür bir sayfa sadece windows işletim sistemine sahip bilgisayarlarda gözükecektir.

Anlatım tarzımızın çok teknik olmadığının farkındayım. Önemli olan bu tür animasyonun teknik ifadesini değil uygulanabilirliğinin kolay olmasıdır diye düşünüyorum. Hazırlamada sorunlarınız olursa lütfen e-mail yolu ile bağlantı kurunuz.