KATRASA, Serkan AVCI

Türküm, doğruyum, yapışkanım!

Flash'ı sitenize valid olarak ekleyin

SWF Object sayesinde flash içeriğinizi valid HTML veya XHTML web sitelerinizde kullanabilirsiniz...

SWF Object küçük bir Javascript uygulamasıdır. Bu uygulama tüm önemli browserlar (IE, Firefox vs.) daki Flash plug in leri kontrol ederek en uygun şekilde swf dosyanızı sayfa içine gömer (embed). Ayrıca seveceğiniz en güzel özelliğinden biri de Internet Explorer'ın swflerin aktif edilmesi için bir kez tıklanması gerekliliği durumunu ortadan kaldırmış olması (Active X denetimi).

Evet şimdi uygulamaya göz atalım...

Sistem nasıl çalışıyor:

Basit bir şekilde anlatmaya çalışacağım, şekilde görüldüğü gibi kodlarımız 3 bölümden oluşuyor. Kodları inceleyin aşağıda ne işe yaradıklarını açıklayacağım.

<script type="text/javascript" src="swfobject.js"></script>
		
<div id="flashcontent">
  Buraya yazdıklarınız script tarafından swf niz ile değiştirilecektir.
</div>

<script type="text/javascript">
   var so = new SWFObject("ornek.swf", "ornek", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

İlk olarak servera gönderdiğimiz swfobject.js dosyamızı sayfaya bağlıyoruz.

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

Şimdi sıra swf'mizi sayfa üzerinde taşıyacak olan elementi eklemeye geldi. Bu örneğimizde taşıyıcı olarak <div> kullanılmıştır. Siz tasarımınızda <div> yerine <td> veya <p> kullanabilirsiniz. Burada önemli olan taşıyıcı elementimize bir id vermemiz gerektiğidir, yani bir kimlik adı, bu kimlik adı sayesinde Javascript ile taşıyıcı elementimizi beraber çalıştırabileceğiz. Örneğimizde taşıyıcı element (div)in id'si flashcontent tir. Script, taşıyıcı elementin içine yazdığınız içeriği, SWF'niz ile değiştirir. Eğer kullanıcının bilgisayarında Javascript aktif değil veya flash playerı güncel değil ise script bu değiştirmeyi yapamayıp sizin taşıyıcı elementin içine yazdığınız içeriği gösterecektir. Örnek dosyayı, javascripti kapalı olarak denediğinizde ne demek istediğimi daha iyi anlayacaksınız.

<div id="flashcontent">
  Buraya yazdıklarınız script tarafından swf niz ile değiştirilecektir.
</div>

Son bölümde <div> in içine swf mizi ekleyecek olan kodu sayfamıza yerleştiriyoruz. Burada yeni objemizin özelliklerini tanımlayarak id si belli olan taşıyıcı elementimizin içine güncellemesi için gereken emri veriyoruz.

<script type="text/javascript">
   var so = new SWFObject("ornek.swf", "ornegim", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Önemli: Yukarıda taşıyıcı elemente verdiğimiz id ile script içinde verdiğimiz emirdeki id aynı olmalıdır.

	<div id="flashcontent">

	so.write("flashcontent");

Özellik tanımlama kısmını biraz açalım:

var so = new SWFObject("ornek.swf", "ornek", "400", "200", "8", "#336699");

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Şimdi bunları tek tek açıklayalım,

  • swf: Dosyanızın ismini yani yolunu buraya gireceksiniz (Ör: anasayfa.swf).
  • id: Bu kimlik adı genellikle swf dosyanızın adı ile aynı olmasında fayda vardır, bu durum "swliveconnect" açısından önemlidir. (Ör: anasayfa).
  • width: Swf dosyanızın genişliği (Ör: Değeri pixel olarak verecekseniz sadece sayı yazmanız yeterli: 250 vs., değeri % şeklinde verecekseniz: 100% vs. şeklinde kullanabilirsiniz).
  • height: Swf dosyanızın yüksekliği (Ör: Değeri pixel olarak verecekseniz sadece sayı yazmanız yeterli: 250 vs., değeri % şeklinde verecekseniz: 100% vs. şeklinde kullanabilirsiniz).
  • version: Burada swf dosyanızı hangi flash versiyonu ile publish ettiyseniz onu belirtiyorsunuz (Ör: "6" veya daha detaya inerek "6.0.65" şeklinde bir tanımlama yapılabilir, bizim örneğimizde "8" kullanılmıştır).
  • background-color: Dosyanızın arkaplan-renginin hex kodunu buraya yazarak sayfa içinde kullanabilirsiniz (Ör: beyaz için: "#FFFFFF" yazmanız yeterlidir.).

Opsiyonel Parametreler:

  • quality: Swf nizin kalite değerini gösterir (Ör: "high", "medium", "low").
  • xiRedirectUrl: ExpressInstall upgrade'i tamamlayan kullanıcıların yönlendirileceği URL yi buraya yazabilirsiniz. (Bunlar tercihe bağlı parametreler ben şahsen hiç kullanmadım, siz deneyebilirsiniz).
  • redirectUrl: Eğer ziyaretçiniz sizin belirlediğiniz Flash versiyonuna sahip değilse yönlendirileceği URL yi buraya yazabilirsiniz.
  • detectKey: Bu kısım SWF Objectin Flash versiyonunu kontrol etmeden geçmesi için yazılacak URL dir. Varsayılan olarak 'detectflash' dır. (Ör: Flash versiyonu kontrolünü es geçmek ve kolayca sayfaya swf yi yerleştirmek için swf nizin yolunun sonuna "?detectflash=false" u eklemelisiniz).

Son olarak scriptin içine ekleyebileceğiniz diğer parametreleri buraya ekliyorum

<script type="text/javascript">
   var so = new SWFObject("ornek.swf", "ornegim", "400", "200", "8", "#336699");
   
   so.addParam("quality", "high");      //Filmin kalitesini belirtir..
   so.addParam("menu", "false");      //Sağ tuş menüsünü gizlemek için kullanılır..
   so.addParam("wmode", "transparent");      //Eğer Filminiz transparansa bu kodu kullanın..
   so.addParam("scale", "noscale");      //Eğer sayfa boyutu değiştikçe filminizin boyutunun değişmesini istemiyorsanız bu kodu kullanın.
   
   so.write("flashcontent");
</script>

Umarım bu makale size faydalı olur, ben tüm işlerimde bunu sorunsuz bir şekilde kullandım eğer bir hata ile karşılaşırsanız bana mail ile ulaşırsanız çözümünü bulup burada yayınlamaya çalışırım.

Örnek çalışmayı ÖNİZLEME yapın.

Örnek çalışmayı BURADAN indirin.

'04-'08, © Serkan AVCI katrasa.com - birine mi bakmıştın canım? en üstteyim...

Katrasa.com üzerinde bulunan tüm yazılı ve görsel malzemenin telif hakları belirtilen isimlere aittir. İzinsiz kopyalamak, kullanmak, yayınlamak tehlikeli ve yasaktır. Hırsızların kalbi itinayla kırılır, eline verilir.

Eklenmesini istediğiniz içeriğiniz mi var? Makalelerde veya içerikte yazım hatası mı var? Uyarın beni! Yani bir mail atın.

İçerikten rahatsız mı oldun? O zaman sana Bay baay.

Valid XHTML 1.0 Strict Valid CSS! Validated by HTML Validator (based on Tidy)

Zenci Yamyam değil zencili olsun!

Blogbox

KATRASA - Makaleler

HTML Dersleri

İncelemeler

Manipülatik olaylar

Bzzt...

  • Size Süper Teklif'im var

KATRASA - Bağlantılar

KATRASA - Takip edilenler

KATRASA on ...

Mis gibi arama motoru işte, arayın arayın!..