Internet Explorer ve Flash'lardaki Çerçeve (Aktivasyon) Sorunu

0 dakikada yazıldı

9594 defa okundu

Düzenle

Bu konuyu uzun süre önce, daha Türkçe blog sitemi açmadığım zamanlarda
(17 Nisan 2006) İngilizce blog sitemde incelemiştim. İngilizce makaleye
buradan
ulaşabilirsiniz. Mayasoft Bilişim Akademi'sinde vermekte olduğum
Web Tasarım dersinde öğrencilerimden biri bu konuya değinince
sorunla ilgili çözümü Türkçe blog siteme de yazmam gerektiğini düşündüm.
Halen çok sayıda eski ve yeni yapılan web sitesinde Flash animasyonlar
ve Internet Explorer arasındaki sorun devam ediyor. İlk önce sorun nedir
ve nerden çıktı, ona bakalım.

Güncel bir örnek olarak bugünlerde ziyaret edeceğim
EducaTurk fuarının yeni
web sitesini ele alabiliriz. Siteye girdikten sonra online davetiye
almak için tıklamam gereken görsel link Flash ile hazırlanmış. Fakat
gerekli düzenlemeler yapılmadığı için Internet Explorer ile siteye giriş
yaptığımda düğmeye iki kere tıklamam gerekiyor. Birinci tıklamayı Flash
animasyonunu aktive etmek için, ikinciyi de aktive edilmiş animasyona
tıklayabilmek için yapmam gerekiyor.

Bu sorun sadece Internet Explorer için geçerli. 11 Nisan 2006
tarihinde Microsoft tarafından bir
yama
çıkarıldı ve tüm Windows'lara Windows Update aracılığı ile yüklendi.
Microsoft, ActiveX objelerinin Internet Explorer'daki çalışma
yapısını değiştirmek durumunda kaldı. Bu durum da sayfalarımıza
eklediğimiz Flash objelerini etkiledi. Peki Microsoft neden bunu yaptı?
Özetle patent sorunları diyebiliriz. Konuyla ilgili makaleyi
(İngilizce)
buradan

inceleyebilirsiniz. Eolas ve California
Üniversite
'ine ait patent
nedeniyle web sayfaları içerisine ActiveX ile dinamik içerik, animasyon
eklenmesini sağlayan Microsoft 521m$ cezaya çarptırıldı. Sonuç olarak
yukarıdaki manzara ortaya çıktı.

Peki bu sorundan nasıl kurtulabiliriz? Çözüm basit sayfanın içerisine
direk ActiveX objeleri eklemeyeceğiz. Ekleme işlemini JavaScript ile
istemci tarafında yapacağız. Bunun için Flash objemizi sayfaya
yerleştirecek olan HTML kodunu JavaScript ile sayfaya yazan bir
JavaScript fonksiyonu tanımlayarak harici bir JavaScript dosyasına
yerleştirmemiz gerekiyor.\

function GetLogo()
{
   document.write('<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\#version=8,0,0,0"
width="786" height="241" id="logo" align="middle"><param
name="allowScriptAccess" value="sameDomain" /><param name="movie"
value="banner.swf" /><param name="quality" value="high" /><param
name="bgcolor" value="#ffffff" /><embed src="banner.swf"
quality="high" bgcolor="#ffffff" width="786" height="241"
name="logo" align="middle" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/></object>'
);

}

Yukarıdaki JavaScript fonksiyonu HTML kodunu document.write()
JavaScript metodu ile sayfaya yazıyor. Bu fonksiyonu flash.js adında
bir metin dosyasına kaydediyoruz. Flash animasyonu kullanacağımız sayfa
ile aynı klasöre koyuyoruz. Kod içerisinde yer alan HTML kodundaki flash
animasyon dosyasına ait dosya adını ve boyut bilgilerini kendi sitenize
uygun şekilde değiştirebilirsiniz. Sıra geldi içerisinde yukarıdaki
fonksiyonumuzun yer aldığı dosyayı sayfamıza eklemeye.\

<head>
  <meta
http-equiv
="Content-Type" content="text/html; charset=utf-8" />

  <script language="javascript"
type
="text/javascript" src="flash.js">
</script>
  <title>Örnek Sayfa
</
title>

</head>

Yukardaki şekli ile sayfamızın Header kısmına JavaScript dosyamızı
linkledik. Böylece dosya içerisinde fonksiyonları sayfamızda
kullanabileceğiz. Hazırladığımız fonksiyonun adı GetLogo
şeklindeydi. Flash animasyon sayfada nereye eklenecekse oraya aşağıdaki
kodu yazmamız gerekiyor.

   <script
language
="javascript" type="text/javascript">GetLogo()</script>

Sayfamızın tam kodu aşağıdaki şekilde olacaktır.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"\>

<html xmlns="http://www.w3.org/1999/xhtml"\>
<head>
 <meta
http-equiv
="Content-Type" content="text/html; charset=utf-8"/>

 <script language="javascript"
type
="text/javascript" src="flash.js"></script>

 <title>Örnek Sayfa</title>
</head>
<body>
 <div
style
="position: absolute; left: 20px;
top: 50px;">

   <script language="javascript"
type
="text/javascript">GetLogo()</script>

 </div>
</body>
</html> 

Yukarıdaki örnek içerisinde bir katman (div) içine flash animasyonumuzu
yerleştiriyoruz. Gerekli HTML kodunun belgenin o kısmına yerleştirilmesi
için önceden hazırlamış olduğumuz JavaScript fonksiyonunu
çalıştırıyoruz. Tabi ki bir JavaScript fonksiyonu çalıştırabilmek için
komutumuzu script tagları arasına koymalıyız.

Çözümümüz tamamlandı fakat yukarıdaki sistem farklı durumlarda sorun
çıkartabilir. Örneğin hedef internet tarayıcı JavaScript desteklemiyorsa
sistem çalışmayacaktır. Tüm tarayıcılara uygun bir sistem için aşağıdan
indirebileceğiniz Adobe'a ait JavaScript dosyasını kullanabilirsiniz.
Söz konusu dosyayı makalenin sonundaki download paketinde
bulabilirsiniz. Dosyanın adı AC_RunActiveContent.js şeklinde.
Yukarıdaki, bizim hazırladığımız JavaScript dosyası yerine bu dosyayı
sitemize ekleyeceğiz. Ekledikten sonra da aşağıdaki JavaScript kodu ile
animasyonu sayfamıza yazdıracağız.

   <script
type
="text/javascript">

AC_FL_RunContent('codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\#version=9,0,28,0'
,
'width','786','height','241','src','banner','quality','high','pluginspage',

'http://www.adobe.com/shockwave/download/download.cgi?P1\_Prod\_Version=ShockwaveFlash'
,
'movie','banner' );//end AC code

   </script>

Kullandığımız JavaScript fonksiyonu Adobe tarafından hazırlanmış bir
fonksiyon. Sayfamıza eklediğimiz AC_RunActiveContent.js dosyası
içerisinde bulunuyor. Fonksiyonun aldığı parametreler arasında kalın
yazılmış olanlara dikkat etmekte fayda var. Bunlar Flash animasyonun
yüksekliği, genişliği ve dosya adını içeriyor. Adobe tarafından
hazırlanmış olan bu fonksiyonu farklı tarayıcılarla ilgili uyumluluk
sorunlarını halledecektir. Son olarak JavaScript desteklemeyen
tarayıcılar için de aşağıdaki kodu sayfamıza yerleştireceğiz. Fakat
unutmamakta fayda var, eğer tarayıcının JavaScript desteği kapatılmışsa
maalesef Internet Explorer'da Flash animasyonlarda aktivasyon talebi
devam edecektir.

   <noscript>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\#version=9,0,28,0"
       width="786" height="241">
       <param
name
="movie" value="banner.swf"/>

       <param
name
="quality" value="high"/>

       <embed
src
="banner.swf" width="786"
height
="241" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1\_Prod\_Version=ShockwaveFlash"

         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>

Sonuç olarak tam çözümümüzün kodu aşağıdaki şekilde sonlanıyor.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"\>

<html xmlns="http://www.w3.org/1999/xhtml"\>
<head>
 <meta
http-equiv
="Content-Type" content="text/html; charset=utf-8"/>

 <title>Untitled 1</title>
 <script language="javascript"
type
="text/javascript" src="AC_RunActiveContent.js"></script>

</head>
<body>
 <div
style
="position: absolute; left: 20px;
top: 50px;">

 
   <script
type
="text/javascript">

AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\#version=9,0,28,0',
'width','786','height','241','src','banner','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1\_Prod\_Version=ShockwaveFlash',
'movie','banner' );//end AC code

   </script>
 
   <noscript>
     <object
classid
="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\#version=9,0,28,0"

       width="786" height="241">
       <param
name
="movie" value="banner.swf"/>

       <param
name
="quality" value="high"/>

       <embed
src
="banner.swf" width="786"
height
="241" quality="high"
pluginspage
="http://www.adobe.com/shockwave/download/download.cgi?P1\_Prod\_Version=ShockwaveFlash"

         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>
 </div>
</body>
</html>

Makale boyunca kullandığımız tüm dosyaları ve örnekleri aşağıdaki
download paketine bulabilirsiniz.

Kolay gelsin.

27042007_2.rar - Örnekler (12.37
KB)