SWFObject’i tanıyalım nasıl kullanacağımızı öğrenelim…

SWFObject, Flash içeriğinizi sitenize ekleyebilmeniz için kullanabileceğiniz küçük bir Javascript dosyasıdır. Script, PC ve Mac ortamındaki tüm browser (tarayıcı) larda Flash plug-in i algılayarak olabilecek en kolay yoldan Flash içeriğinizi sayfanıza ekler. Aynı zamanda arama motoru dostu olup, valid (geçerli) HTML ve XHTML 1.0 dosyalar için kullanılabilir. İleriye dönük uyum sorunu olmadığından yıllarca rahatlıkla çalışacaktır.

SWFObject avantajları nelerdir?

• İki adet Flash içerik ekleme yöntemi sunar; markup (biçimleme) tabanlı ve JavaScript ile çalışan yöntem.
• SWF dosyalarını sayfanıza eklemenizi ve Flash Player ile ilgili bilgileri almanızı sağlayacak tüm araçları bir arada tutan bir JavaScript API sistemini size sunar.
• Sadece 10Kb (GZIPed: 3.9Kb)’lık küçük bir JavaScript dosyası kullanır.
• SWFObject 2, SWFObject 1.5, UFO ve Adobe Flash Player Detection Kit‘in yerine geçmiştir.
• Adobe Flash Player ekleme yöntemlerinde yeni bir standart oluşturma amacı ve tüm yöntemleri tek bir çatı altında toplamak için tasarlanmıştır.

Neden SWFObject kullanmalıyız?

• Diğer tüm Flash Player ekleme yöntemlerinden daha optimize ve esnek yapıdadır.
• Herkese tek bir çözüm sunar: HTML, Flash veya JavaScript geliştiricisi olmanız farketmez, SWFObject’de herkes için bir şey var.
• Kendine özgü markup (biçimleme)’dan bizi kurtararak, web standartlarını ve alternatif içerikleri kullanmaya teşvik eder.
• JavaScript’i sade ve en iyi örnekleri ile kullanır.
• Kullanımı kolaydır.

SWFObject neden Javascript kullanır?

SWFObject 2 esasen, sadece markup (biçimleme) ile üstesinden gelinemeyecek sorunları çözmek için JavaScript kullanır;

SWFObject:

• Flash Player versiyonunu algılar ve Flash içeriğimi yoksa alternatif içeriğimi koyacağına karar verir, böylelikle eski olan Flash plug-in’in Flash içeriği bozmasını önlemiş olur.
• Özelliklerinden biri de eski bir Flash plug-in yüklü olması durumunda DOM hilesi ile alternatif içeriği göstermesidir; (Not: Eğer Flash plug-in yüklü değil ise HTML object elementi otomatik olarak içindeki alternatif içeriği gösterecektir.)
• Flash Player’ın en son versiyonunu indirebilmek için bize Adobe Express Install seçeneğini sunar.
• Flash Player ve Flash içerik ile ilgili yaygın görevleri yürütmek için JavaScript API’yi önerir.

Statik yayınlama yöntemini mi yoksa dinamik yayınlama yöntemini mi kullanmalıyım?

SWFObject 2 bize iki farklı Flash içerik ekleme yöntemi sunmaktadır:

• Statik yayınlama metodu standart, uyumlu markup kullanarak Flash içerik ile alternatif içeriği birlikte sayfanıza ekler ve yalnızca markup ile çözülemeyecek sorunlar için JavaScript kullanır.
• Dinamik yayınlama yöntemi eğer JavaScript desteği aktif ve gerekli Flash Player versiyonu yüklü ise JavaScript’i kullanarak Flash içeriği alternatif içerik ile değiştirir (Bir önceki SWFObject versiyonu ve UFO yöntemine benzer şekilde).

Statik yayınlama yönteminin avantajları:

• Güncel yazım standartlarına uygun markup kullanımı teşvik edilir.
• En iyi performans
• Flash içerik ekleme script kodlarına bağlı değildir böylelikle Flash içeriğiniz daha büyük kitlelere ulaşabilecektir:
  • Eğer Flash plug-in yüklü ise JavaScript desteğiniz aktif olmasa veya JavaScript desteği olmayan bir browser kullanıyor olsanız da Flash içeriği sayfanızda görebilirsiniz.
  • JavaScript desteği çok zayıf olan Sony PSP gibi cihazlarda da artık Flash çalışmaktadır.
  • RSS okuyucular gibi otomatikleşmiş araçlar da Flash içeriği alabilmektedir.

Dinamik yayınlama yönteminin avantajları:

• Kodla oluşturulmuş uygulamaları çok iyi bir şekilde birleştirir ve dinamik verileri kullanmaya izin verir (flashvars).
• Internet Explorer 6/7 ve Opera 9+ ‘daki içeriği aktif etmek için gerekli olan click-to-activate (tıkla-aktif et) mekanizmasını önlemektedir. Microsoft bunu Internet Explorer’dan kademeli olarak kaldırmıştır.

SWFObject statik yayınlama ile Flash içeriğini ekleme

ADIM 1:Standartlara uygun markup kullanarak Flash içeriği ve alternatif içeriği birlikte ekleme

SWFObject, markup tabanlı içiçe-objeler yöntemini kullanır (Internet Explorer’a ait koşullu yorumlar ile), bu yöntemle standartlara uygun ve alternatif içerik desteğini elden bırakmadan tüm browserlara destek vermeyi sağlamaktadır:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject - adım 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  </head>
  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="icerik.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="icerik.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternatif içerik buraya eklenecek</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>

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

NOT: İçiçe-objeler yönteminde object tanımlamasının iki kere yapılması gerekmektedir (dıştaki object‘in hedefi Internet Explorer, içteki object‘in hedefi diğer tüm browserlardır), bu yüzden object özelliklerini ve param elementini ikişer defa tanımlamalıyız.

Gerekli özellikler:

• classid ([sınıfkimliği] sadece dıştaki object elementi için, değeri daima clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
• type ([tür] sadece içteki object elementi için, değeri daima application/x-shockwave-flash)
• data ([veri] sadece içteki object elementi için, SWF’nin yolu tanımlanır)
• width ([genişlik] her iki object elementi için, SWF’nin genişliği tanımlanır)
• height ([yükseklik] her iki object elementi için, SWF’nin yüksekliği tanımlanır)

Gerekli param elementi:

• movie ([film] sadece dıştaki object elementi için, SWF’nin yolu tanımlanır)

NOT: Adobe sunucularında bulunan Flash plug-in’e link vermek için codebase özelliğini kullanmayı tavsiye etmiyoruz. Çünkü domain erişimi sadece mevcut belgeler (current document only) için kısıtlanmış şartına göre bu yasadışı bir durumdur. Bunun yerine alternatif içerik ile kullanıcılarınıza Flush plug-in indirmeleri için bir mesaj yazabilirsiniz.

Flash içeriği yapılandırmak için HTML’i nasıl kullanabilirim?

Aşağıda object elementi için sıkça kullanılan opsiyonel özellikler belirtilmiştir:

• id (kimlik)
• name (isim)
• class (sınıf)
• align (hizalama)

Flash’a ait opsiyonel param elementlerini de kullanabilirsiniz (daha fazla bilgi):

• play (oynat)
• loop (döngü)
• menu (menü)
• quality (kalite)
• scale (ölçeklendirme)
• salign ([stage align] zemin hizalaması)
• wmode (pencere modu (window – opaque – transparent)
• bgcolor (arkaplan rengi)
• base (tanımlanması dosya dizinleri değiştiğinde size yardımcı olur)
• swliveconnect (Flash içine JavaScript fonksiyonlarını çağırma için kullanılır)
• flashvars (değişkenler)
• devicefont (daha fazla bilgi) (aygıt yazı tipleri)
• allowscriptaccess (daha fazla bilgi) (script erişim izni)
• seamlesstabbing (daha fazla bilgi)
• allowfullscreen (daha fazla bilgi) (tam ekran izni)
• allownetworking (daha fazla bilgi) (Flash’ın network fonksiyonlarından faydalanmasını sağlayabilirsiniz)

Neden alternatif içerik kullanmalıyız?

Flash yüklü değil veya desteklenmiyor ise object elementi, içerisine alternatif içerik koyulmasına imkan sağlar. Aynı zamanda bu içerik arama motorları tarafından görülebilir ve arama motoru dostu bir site sahibi oluşturmak adına güzel bir araçtır. Özetlemek gerekirse, plug-in kullanmadan Web’de dolaşan insanların ulaşabilmesi, arama motorlarının içeriğinizi alabilmesi ve ziyaretçilerinize Flash plug-in indirerek daha verimli kullanıcı deneyimi sağlayabileceklerini söylemek için alternatif içerik oluşturmalısınız.

ADIM 2:SWFObject JavaScript kütüphanesini HTML sayfasının head bölümüne yerleştirin

SWFObject kütüphanesi tek bir harici JavaScript dosyasından oluşur. SWFObject, dosya okunur okunmaz, destekleyen tüm browserlarda DOM yüklenmesi ardından DOM hileleri yapılır ve çalışmaya başlar. Bir başka deyişle onload event’ı tetiklendiği anda çalışır:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject - adım 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

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

  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="icerik.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="icerik.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternatif içerik buraya eklenecek</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

ADIM 3:Flash içeriğinizi SWFObject kütüphanesine kaydedin ve o’na ne yapacağını söyleyin

İlk önce Flash içeriğinizi tanımlayacak olan dıştaki object tag ine özel bir id verin. Daha sonra swfobject.registerObject yöntemini ekleyin:

• İlk argümanımız markupda kullanılan id‘i belirtir.
• İkinci argümanımız içeriğimizi yayınladığımız Flash player versiyonunu belirtir. Bu, Flash versiyon kontrolünü, Flash içeriği mi yoksa alternatif içeriğimi göstereceğine karar vermesi için aktif eder. Normal şartlarda Flash versiyon numaraları major.minor.release.build şeklinde oluşmuşsa, SWFObject sadece ilk 3 sayıya bakar, böylelikle “WIN 9,0,18,0″ (IE) ya da “Shockwave Flash 9 r18″ (diğer browserlar) in her ikisi de “9.0.18″ şeklinde yorumlanacaktır. Eğer sadece major versiyonu test etmek istiyorsak minor ve release sayılarını dahil etmeyebiliriz, yani “9.0.0″ yerine “9″ gibi.
• Üçüncü argümanımız Adobe express install‘i aktif eder ve express install SWF dosyamızın yolunu gösterir. Express install, gerekli Flash player versiyonuna sahip olunmadığı takdirde Flash içeriği yerine standart bir Flash plug-in indirme kutucuğu gösterir. Geçerli bir expressInstall.swf dosyasını proje paketi içinde bulabilirsiniz. Aynı zamanda kendinize özel bir express install hazırlayabilmeniz için expressInstall.fla ve AS dosyası da (SRC dizininde) bulunmaktadır. Dikkat edilmesi gereken bir husus da express install sadece bir kere tetiklenir (ilk sefer çağırıldığında) ve sadece Win ya da Mac ortamında Flash Player 6.0.65 veya üstü versiyonları destekler. SWF boyutlarımızın da en az 310 x 137px olması gerekmektedir.
• Dördüncü ve son argümanımız (JavaScript fonksiyonu, opsiyonel) SWF’nin sayfaya başarıyla eklendiğine ya da hata oluştuğuna dair bir geriçağrı (callback) fonksiyonu tanımlayabiliriz. (API dökümanlarını inceleyin)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject - adım 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.registerObject("verdigimizId", "9.0.115", "expressInstall.swf");
    </script>

  </head>
  <body>
    <div>

      <object id="verdigimizId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="icerik.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="icerik.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternatif içerik buraya eklenecek</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

İpuçları

• SWFObject HTML ve JavaScript üretici‘yi kullanmanız size özel kodlar elde etmenize yardımcı olacaktır.
• 1. ve 3. adımları tekrarlayarak tek HTML sayfasına birden çok SWF dosyası ekleyebilirsiniz.
• Aktif object elementine ulaşmanın en kolay yolu JavaScript API kullanmaktır: `swfobject.getObjectById(objectIdStr)

SWFObject dinamik yayınlama ile Flash içeriğini ekleme

ADIM 1:Standartlara uygun markup kullanarak alternatif içerik oluşturma

SWFObject dinamik ekleme yöntemi kademeli iyileştirme prensibini izler. JavaScript ve Flash plug-in desteği açık ise HTML içeriğin yerine Flash içeriği ekler. İlk olarak alternatif içeriği tanımlamalı ve ona bir id vermelisiniz:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject dinamik ekleme - adım 1</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  </head>
  <body>

    <div id="icerik">
      <p>Alternatif içerik buraya eklenecek</p>
    </div>

  </body>
</html>

ADIM 2:SWFObject JavaScript kütüphanesini HTML sayfasının head bölümüne yerleştirin

SWFObject kütüphanesi tek bir harici JavaScript dosyasından oluşur. SWFObject, dosya okunur okunmaz, destekleyen tüm browserlarda DOM yüklenmesi ardından DOM hileleri yapılır ve çalışmaya başlar. Bir başka deyişle onload event’ı tetiklendiği anda çalışır:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject dinamik ekleme - adım 2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

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

  </head>
  <body>
    <div id="icerik">
      <p>Alternatif içerik buraya eklenecek</p>
    </div>

  </body>
</html>

ADIM 3:SWF’yi JavaScript ile ekleme

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn) şeklinde 5 gerekli, 5 isteğe bağlı argüman vardır:

• swfUrl (String, gerekli) SWF’nizin yolunu belirtir.
• id (String, gerekli) HTML elementin kimliğini belirtir (alternatif içeriğinizin bulunduğu).
• width (String, gerekli) SWF’nizin genişliğini belirtir.
• height (String, gerekli) SWF’nizin yüksekliğini belirtir.
• version (String, gerekli) SWF’nizi yayınladığınız Flash player versiyonunu belirtir (format: “major.minor.release” veya “major”)
• expressInstallSwfurl (String, isteğe bağlı) express install SWF’nizin yolunu belirtir ve Adobe express install’i aktif eder. Dikkat edilecek husus express install sadece bir kere tetiklenir (ilk sefer çağırıldığında) ve sadece Win ya da Mac ortamında Flash Player 6.0.65 veya üstü versiyonları destekler. SWF boyutlarımızın da en az 310 x 137px olması gerekmektedir.
• flashvars (Object, isteğe bağlı) flash değişkenlerinizi isim:değer çifti ile belirtir.
• params (Object, isteğe bağlı) object elementi içinde yer alan params (parametreler) isim:değer çifti ile belirtir.
• attributes (Object, isteğe bağlı) object‘in özelliklerini isim:değer çifti ile belirtir.
• callbackFn (JavaScript function, isteğe bağlı) SWF’nin sayfaya başarıyla eklendiğine ya da hata oluştuğuna dair bir geriçağrı (callback) fonksiyonu tanımlamak için kullanılır. (API dökümanlarını inceleyin)

NOT: Parametre düzenini bozmadığınız sürece isteğe bağlı olan parametreleri ihmal edebilirsiniz. Eğer bir parametreyi kullanmak istemiyorsanız fakat onu takip eden diğer bir parametreyi kullanmak istiyorsanız, basit bir şekilde kullanmak istemediğiniz parametrenin değerini false yapabilirsiniz. JavaScript Objelerinden flashvars, params ve attributes için, boş olanların yerine {} kullanabilirsiniz.

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
  <head>
    <title>SWFObject dinamik ekleme - adım 3</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="icerik">
      <p>Alternatif içerik buraya eklenecek</p>
    </div>

  </body>
</html>

Flash içeriği nasıl ayarlayabilirsiniz?

Aşağıda object elementi için sıkça kullanılan opsiyonel özellikler belirtilmiştir:

• id (NOT: eğer tanımsızsa, object elementi otomatik olarak alternatif içerik taşıyıcı elementin id değerini alacaktır.)
• name
• styleclass (class yerine kullanılır, çünkü bu aynı zamanda ECMA4 için ayrılmış bir anahtar sözcüktür)
• align

Flash’a ait opsiyonel param elementlerini de kullanabilirsiniz:

• play
• loop
• menu
• quality
• scale
• salign
• wmode
• bgcolor
• base
• swliveconnect
• flashvars
• devicefont
• allowscriptaccess
• seamlesstabbing
• allowfullscreen
• allownetworking

Flash değişkenleri, parametreler ve obje özellikleri için JavaScript Objelerini nasıl tanımlamalısınız?

Aşağıda görüleceği gibi JavaScript Objectlerini en iyi tanımlama şekli Object literal notation (Objeyi aslına uygun işaretleme) dur:

<script type="text/javascript">

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Bir obje tanımlarken isim:değer çifti ekleyebilirsiniz (not: son isim:değer çiftinden sonra virgül koymadığınızdan emin olun.)

<script type="text/javascript">

var flashvars = {
  name1: "merhaba",
  name2: "dunya",
  name3: "hata"
};
var params = {
  menu: "false"
};
var attributes = {
  id: "dinamikIcerik",
  name: "dinamikIcerik"
};

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Ya da bir nokta işareti kullanarak özellik ve değer ekleyebilirsiniz:

<script type="text/javascript">

var flashvars = {};
flashvars.name1 = "merhaba";
flashvars.name2 = "dunya";
flashvars.name3 = "hata";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "dinamikIcerik";
attributes.name = "dinamikIcerik";

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Tek satır kod severler için okunması güç olan daha kısa versiyonu da mevcuttur:

<script type="text/javascript">

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", {name1:"merhaba",name2:"dunya",name3:"hata"}, {menu:"false"}, {id:"dinamikIcerik",name:"dinamikIcerik"});

</script>

Opsiyonel argümanları kullanmak istemiyorsanız tanımlamanızı false veya boş Obje şeklinde yapmalısınız (NOT: SWFObject 2.1′den bu yana null ya da 0 şeklinde kullanılmaktadır):

<script type="text/javascript">

var flashvars = false;
var params = {};
var attributes = {
  id: "dinamikIcerik",
  name: "dinamikIcerik"
};

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

flashvars Object kolay kullanımı sağlamak için varolan bir kısaltma işaretlemesidir. Bunu yoksayarak flashvars’ı params Object içinde belirtebilirsiniz:

<script type="text/javascript">

var flashvars = false;
var params = {
  menu: "false",
  flashvars: "name1=merhaba&name2=dunya&name3=hata"
};
var attributes = {
  id: "dinamikIcerik",
  name: "dinamikIcerik"

};

swfobject.embedSWF("icerik.swf", "icerik", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Kaynak: http://code.google.com/p/swfobject/

Download: http://code.google.com/p/swfobject/downloads/list